/* Adaptaciones de los diálogos de Historial al sistema visual compartido. */
/* La variante global ghost conserva el activo original del selector de vistas. */
body.app-redesign #tab-history .history-view-switcher-bar .history-tabs-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-1);
  width: min(100%, 520px);
  max-width: 520px;
  box-sizing: border-box;
}
body.app-redesign #tab-history .history-view-switcher-bar .hist-view-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: .5rem;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.app-redesign #tab-history .hist-view-tab-btn.ui-button--ghost.active {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: color-mix(in srgb, var(--color-primary-hover) 68%, white);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
body:not(.dark-mode).app-redesign #tab-history .hist-view-tab-btn.ui-button--ghost.active {
  background: color-mix(in srgb, var(--color-primary) 10%, white);
  color: var(--color-primary-strong);
  box-shadow: none;
}
#historyReceiptModal .hist-receipt-dialog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 2rem));
  max-width: 560px;
  height: auto;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
  overscroll-behavior: none;
}
#historyReceiptModal .hist-receipt-topbar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: .3rem .45rem 0;
  background: var(--bg-card, #17191c);
}
#historyReceiptModal .hist-receipt-close {
  position: relative;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, #a5a5a5);
  font: 400 1.45rem/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
#historyReceiptModal .hist-receipt-close span,
#historyReceiptModal .hist-receipt-close span::after { position: absolute; width: .85rem; height: 1px; background: currentColor; content: ""; }
#historyReceiptModal .hist-receipt-close span { transform: rotate(45deg); }
#historyReceiptModal .hist-receipt-close span::after { transform: rotate(90deg); }
#historyReceiptModal .hist-receipt-close:hover { border-color: #ffffff24; background: #ffffff0d; color: var(--text-main, #fff); }
#historyReceiptModal .hist-receipt-close:focus-visible { outline: 2px solid var(--color-primary, #e76850); outline-offset: 2px; }
#historyReceiptModal .hist-receipt-modal-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: .25rem clamp(.65rem, 2.5vw, 1.15rem) .9rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
#historyReceiptContent { min-width: 0; padding: 0; overflow: visible; }
#historyReceiptModal .hist-receipt-footer {
  flex: 0 0 auto;
  min-width: 0;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.hist-receipt-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
#btnHistDeleteSaleInReceipt {
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}
#btnHistDeleteSaleInReceipt:hover { background: color-mix(in srgb, var(--color-danger) 20%, transparent); }

#confirmDeleteSaleModal .hist-delete-sale-dialog {
  max-width: 440px;
  width: 92%;
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
  box-shadow: var(--shadow-lg), 0 0 25px color-mix(in srgb, var(--color-danger) 20%, transparent);
}
#confirmDeleteSaleModal .hist-delete-sale-header {
  border-bottom-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface-raised));
  padding: var(--space-4) var(--space-5);
}
.hist-delete-sale-heading { display: flex; align-items: center; gap: var(--space-2); }
.hist-delete-sale-icon { font-size: 1.5rem; }
#confirmDeleteSaleModal .hist-delete-sale-title { color: var(--color-danger); font-size: var(--font-size-lg); }
.hist-delete-sale-subtitle { color: var(--color-text-muted); margin: 0; font-size: var(--font-size-xs); }
#confirmDeleteSaleModal .hist-delete-sale-body { padding: var(--space-5); gap: var(--space-4); }
.hist-delete-sale-copy { text-align: center; padding: .4rem 0; }
.hist-delete-sale-question { color: var(--color-text-primary); font-size: var(--font-size-xl); font-weight: 900; margin: 0 0 var(--space-2); }
.hist-delete-sale-note { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.4; margin: 0; }
#confirmDeleteSaleModal .hist-delete-sale-preview { padding: var(--space-3); font-size: var(--font-size-sm); }
#confirmDeleteSaleModal .hist-delete-sale-footer {
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
}
#confirmDeleteSaleModal .hist-delete-sale-footer > button { flex: 1; min-width: 0; }
#btnConfirmDeleteSaleAction {
  background: var(--color-danger);
  border-color: var(--color-danger);
  font-size: var(--font-size-md);
  font-weight: 900;
}
#btnConfirmDeleteSaleAction:hover { filter: brightness(1.08); }

@media (max-width: 540px) {
  #historyReceiptModal { padding: .5rem; }
  #historyReceiptModal .hist-receipt-dialog { width: calc(100vw - 1rem); max-width: none; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  #historyReceiptModal .hist-receipt-footer { align-items: stretch; }
  .hist-receipt-actions { width: 100%; }
  .hist-receipt-actions > button { flex: 1; }
  #historyReceiptModal .hist-receipt-footer { padding: .65rem; }
}

/* Adaptación HTML/CSS de PaymentReceiptPrinter de EasyUI (MIT, Copyright 2026 Suraj Maurya).
   Referencia: https://github.com/Surajmaurya1/easyui/blob/main/src/components/ui/PaymentReceiptPrinter.tsx */
.hist-printer { width: min(100%, 410px); min-width: 0; margin: 0 auto; overflow: visible; clip-path: none; mask: none; color: #f4f1ec; font-family: ui-sans-serif, system-ui, sans-serif; }
.hist-printer-status { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0 auto .65rem; color: #d5d4d1; font-size: .74rem; }
.hist-printer-status-dot { width: .48rem; height: .48rem; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px #f59e0b88; }
.hist-printer-shell { position: relative; z-index: 2; padding: .8rem .9rem .72rem; border: 1px solid #35383b; border-radius: 1rem; background: linear-gradient(180deg,#26282a,#171819 55%,#111213); box-shadow: 0 12px 28px #0008, inset 0 1px #ffffff12; }
.hist-printer-top { display: flex; align-items: center; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px solid #343638; color: #d8d9da; font: 600 .67rem ui-monospace, monospace; letter-spacing: .06em; }
.hist-printer-icon { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid #414446; border-radius: .4rem; color: #c5c6c6; }
.hist-printer-led { width: .45rem; height: .45rem; margin-left: auto; border-radius: 50%; background: #4ade80; box-shadow: 0 0 7px #4ade8080; }
.hist-printer-slot { display: grid; height: .72rem; margin-top: .55rem; place-items: center; overflow: hidden; border: 1px solid #292b2d; border-radius: 99px; background: #070808; box-shadow: inset 0 2px 4px #000b; }
.hist-printer-slot i { width: 72%; height: 1px; background: linear-gradient(90deg,transparent,#45484a,transparent); }
.hist-thermal-paper { position: relative; z-index: 1; box-sizing: border-box; width: calc(100% - 1.2rem); max-width: 100%; min-width: 0; margin: -.1rem auto 0; padding: 1.15rem clamp(.8rem, 5vw, 1.45rem) 1.4rem; border: 1px solid #e2e2df; border-top: 0; border-radius: 0 0 .25rem .25rem; background: #fbfaf6; box-shadow: 0 15px 35px #0006; color: #181817; font: 500 .78rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: visible; overflow-wrap: anywhere; }
.hist-paper-header { display: flex; flex-direction: column; align-items: center; padding-bottom: .8rem; border-bottom: 1px dashed #b8b8b2; text-align: center; }
.hist-paper-brand-mark { display: grid; width: 1.8rem; height: 1.8rem; margin-bottom: .3rem; place-items: center; border-radius: 50%; background: #272727; color: #f7f4ed; font-size: .63rem; font-weight: 800; }
.hist-paper-header h2 { max-width: 100%; margin: 0; font: 800 .92rem/1.25 ui-sans-serif,system-ui,sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.hist-paper-header p { margin: .18rem 0 .35rem; color: #686861; font-size: .7rem; }
.hist-paper-status { padding: .12rem .48rem; border: 1px solid currentColor; border-radius: 99px; font: 700 .62rem ui-sans-serif,system-ui,sans-serif; text-transform: uppercase; }
.hist-paper-status.is-pending { color: #a04413; background: #fff1df; }
.hist-paper-status.is-recorded { color: #276749; background: #e9f5eb; }
.hist-paper-meta, .hist-paper-payments, .hist-paper-totals { padding: .7rem 0; border-bottom: 1px dashed #b8b8b2; }
.hist-paper-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; padding: .18rem 0; }
.hist-paper-row > span { color: #696962; }
.hist-paper-row > strong { max-width: 64%; text-align: right; font-weight: 700; }
.hist-paper-items { padding: .72rem 0; border-bottom: 1px dashed #b8b8b2; }
.hist-paper-section-title { display: flex; justify-content: space-between; margin-bottom: .4rem; color: #686861; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.hist-paper-item { padding: .34rem 0; }
.hist-paper-item-main { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; }
.hist-paper-item-name { min-width: 0; font-weight: 600; }
.hist-paper-item-name b { white-space: nowrap; }
.hist-paper-item-main > strong { flex: 0 0 auto; white-space: nowrap; }
.hist-paper-item-details { padding: .12rem 0 0 1.15rem; color: #66665f; font-size: .68rem; }
.hist-paper-muted { margin: .3rem 0; color: #777; }
.hist-paper-payments h3 { margin: 0 0 .3rem; font: 800 .66rem ui-sans-serif,system-ui,sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.hist-paper-payments .hist-paper-row { font-size: .71rem; }
.hist-paper-totals { border: 0; }
.hist-paper-discount { color: #26734d; }
.hist-paper-total { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin: .35rem 0; padding: .55rem 0; border-top: 1px solid #353530; border-bottom: 1px dashed #a9a9a2; font-weight: 900; }
.hist-paper-total > span { font-size: .92rem; }
.hist-paper-total > strong { font-size: 1.18rem; white-space: nowrap; }
.hist-paper-balance { color: #a04413; font-weight: 800; }
.hist-paper-footer { padding-top: .2rem; text-align: center; }
.hist-paper-footer p { margin: .2rem 0; font-weight: 700; }
.hist-paper-footer small { color: #77776f; font-size: .62rem; }
#historyReceiptModal.receipt-printing .hist-printer-shell { animation: hist-printer-vibrate .14s ease-in-out 6; }
#historyReceiptModal.receipt-printing .hist-thermal-paper { transform-origin: top center; animation: hist-paper-feed 1.05s cubic-bezier(.16,1,.3,1) both; }
@keyframes hist-paper-feed { from { transform: translateY(calc(0px - var(--hist-receipt-height, 100%))); opacity: .35; } to { transform: translateY(0); opacity: 1; } }
@keyframes hist-printer-vibrate { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { #historyReceiptModal.receipt-printing .hist-printer-shell, #historyReceiptModal.receipt-printing .hist-thermal-paper { animation: none !important; } }

#historyReceiptPrintContainer { display: none; }

/* Selector de historial con dos vistas: compacto, centrado y equilibrado. */
body.app-redesign #tab-history .history-view-switcher-bar {
  width: min(430px, 100%);
  max-width: 100%;
  margin: .9rem auto 1rem;
}
body.app-redesign #tab-history .history-view-switcher-bar .history-tabs-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 430px;
  padding: 5px;
  gap: 5px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  background: #1b222a;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
body.app-redesign #tab-history .history-view-switcher-bar .hist-view-tab-btn {
  min-height: 2.8rem;
  padding: .5rem .65rem;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #b6c2ce;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
body.app-redesign #tab-history .history-view-switcher-bar .hist-view-tab-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.055);
}
body.app-redesign #tab-history .history-view-switcher-bar .hist-view-tab-btn.ui-button--ghost.active {
  color: #ffb19e;
  border-color: rgba(255,139,112,.2);
  background: linear-gradient(145deg,rgba(230,91,72,.2),rgba(184,60,69,.13));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 3px 10px rgba(201,67,67,.12);
}
body:not(.dark-mode).app-redesign #tab-history .history-view-switcher-bar .history-tabs-pills {
  border-color: #dce3e8;
  background: #f3f6f8;
  box-shadow: 0 5px 16px rgba(31,45,61,.08);
}
body:not(.dark-mode).app-redesign #tab-history .history-view-switcher-bar .hist-view-tab-btn { color: #536373; }
body:not(.dark-mode).app-redesign #tab-history .history-view-switcher-bar .hist-view-tab-btn:hover { background: #e9eef2; color: #243746; }
body:not(.dark-mode).app-redesign #tab-history .history-view-switcher-bar .hist-view-tab-btn.ui-button--ghost.active {
  color: #9e432f;
  border-color: rgba(194,83,58,.16);
  background: linear-gradient(145deg,#fff1ec,#fbe5df);
  box-shadow: 0 2px 7px rgba(146,64,45,.1);
}
@media (max-width: 420px) {
  body.app-redesign #tab-history .history-view-switcher-bar .history-tabs-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.app-redesign #tab-history .history-view-switcher-bar .hist-view-tab-btn {
    min-height: 2.55rem;
    padding-inline: .25rem;
    font-size: .75rem;
  }
}

/* Ajustes finales para el historial en teléfonos. */
@media (max-width: 600px) {
  body.app-redesign #tab-history .history-view-switcher-bar {
    width: 100%;
    max-width: 100%;
    margin: .55rem auto .8rem;
  }
  body.app-redesign #tab-history .history-view-switcher-bar .history-tabs-pills {
    display: none !important;
  }
  body.app-redesign #tab-history .history-view-switcher-bar .history-mobile-switcher {
    display: block;
    width: min(100%, 24rem);
    max-width: 100%;
    margin-inline: auto;
  }
  body.app-redesign #tab-history .history-mobile-switcher-toggle {
    min-height: 3rem;
    padding: .42rem .7rem;
    gap: .5rem;
  }
  #tab-history .hist-display-toolbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    gap: .45rem;
    margin: .55rem auto .7rem;
    padding: .32rem .38rem .32rem .62rem;
    border-radius: 12px;
  }
  #tab-history .hist-display-intro {
    flex: 1 1 auto;
    min-width: 0;
    gap: .32rem;
    overflow: hidden;
    font-size: .69rem;
    white-space: nowrap;
  }
  #tab-history .hist-display-toggle { flex: 0 0 auto; }
  #tab-history .hist-display-toggle button {
    padding: .36rem .46rem;
    font-size: .68rem;
  }
}

/* Dashboard móvil de consulta: encabezado, fecha, resumen y actividad. */
@media (max-width: 600px) {
  body.app-redesign #tab-history .hist-display-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: .15rem auto .6rem;
    padding: .45rem .55rem .45rem .7rem;
    border-radius: 13px;
  }
  body.app-redesign #tab-history .hist-display-intro {
    min-width: 0;
    font-size: .8rem;
    white-space: nowrap;
  }
  body.app-redesign #tab-history .hist-display-toggle {
    flex: 0 0 auto;
    gap: .15rem;
    padding: .16rem;
  }
  body.app-redesign #tab-history .hist-display-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 2.6rem;
    min-height: 2.35rem;
    padding: .35rem .45rem;
    font-size: .72rem;
  }
  body.app-redesign #tab-history .hist-compact-layout {
    width: 100%;
    max-width: none;
    gap: .6rem;
  }
  body.app-redesign #tab-history .hist-date-bar,
  body.app-redesign #tab-history .hist-date-actions {
    width: 100%;
    justify-content: stretch;
  }
  body.app-redesign #tab-history .hist-datepicker-wrap.hist-datepicker-button {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    min-height: 2.8rem;
    border-radius: 12px;
  }
  body.app-redesign #tab-history .hist-pay-tabs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  body.app-redesign #tab-history .hist-pay-tab {
    align-items: flex-start;
    min-height: 5.1rem;
    padding: .65rem .7rem;
    border-radius: 13px;
    text-align: left;
  }
  body.app-redesign #tab-history .hist-pay-tab:first-child {
    grid-column: 1 / -1;
    min-height: 5.6rem;
    padding: .75rem .85rem;
  }
  body.app-redesign #tab-history .hist-pay-title {
    font-size: .62rem;
    letter-spacing: .055em;
    line-height: 1.2;
  }
  body.app-redesign #tab-history .hist-pay-val {
    max-width: 100%;
    margin-top: .12rem;
    font-size: clamp(1.05rem, 5vw, 1.35rem);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  body.app-redesign #tab-history .hist-pay-tab:first-child .hist-pay-val {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }
  body.app-redesign #tab-history .hist-pay-sub {
    overflow: hidden;
    max-width: 100%;
    font-size: .64rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  body.app-redesign #tab-history .hist-display-toolbar { padding-inline: .45rem; }
  body.app-redesign #tab-history .hist-display-intro { gap: .3rem; font-size: .73rem; }
  body.app-redesign #tab-history .hist-display-toggle button { min-width: 2.3rem; padding-inline: .35rem; }
  body.app-redesign #tab-history .hist-pay-tab { padding-inline: .55rem; }
}
@media (max-width: 380px) {
  #tab-history .hist-display-intro { font-size: .64rem; }
  #tab-history .hist-display-toggle button { padding-inline: .36rem; font-size: .64rem; }
}

/* Tarjetas resumen: montos completos y detalles que fluyen sin desbordarse. */
body.app-redesign #tab-history .hist-pay-tabs-grid {
  align-items: stretch;
}
body.app-redesign #tab-history .hist-pay-tab {
  box-sizing: border-box;
  min-width: 0;
}
body.app-redesign #tab-history .hist-pay-title {
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.2;
}
body.app-redesign #tab-history .hist-pay-val {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
}
body.app-redesign #tab-history .hist-pay-tab:first-child .hist-pay-title {
  font-size: .7rem;
  letter-spacing: .045em;
}
body.app-redesign #tab-history .hist-pay-tab:first-child {
  align-items: center;
  justify-content: center;
  gap: .14rem;
  padding: .8rem 1rem;
  text-align: center;
}
body.app-redesign #tab-history .hist-pay-tab:first-child .hist-pay-val {
  font-size: clamp(1.4rem, 6vw, 1.75rem);
  margin-top: .04rem;
}
body.app-redesign #tab-history .hist-pay-tab:first-child .hist-pay-sub {
  font-size: .72rem;
  line-height: 1.3;
  justify-content: center;
  text-align: center;
}

@media (max-width: 600px) {
  body.app-redesign #tab-history .hist-pay-tabs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.app-redesign #tab-history .hist-pay-tab {
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 6rem;
    padding: .62rem .62rem;
    gap: .2rem;
  }
  body.app-redesign #tab-history .hist-pay-tab:first-child {
    min-height: 5.6rem;
    padding: .7rem .85rem;
  }
  body.app-redesign #tab-history .hist-pay-title {
    font-size: clamp(.56rem, 2.7vw, .62rem);
    letter-spacing: .025em;
  }
  body.app-redesign #tab-history .hist-pay-val {
    width: 100%;
    margin-top: .12rem;
    font-size: clamp(1rem, 4.9vw, 1.25rem);
  }
  body.app-redesign #tab-history .hist-pay-tab:first-child .hist-pay-title {
    font-size: .7rem;
    letter-spacing: .045em;
  }
  body.app-redesign #tab-history .hist-pay-tab:first-child .hist-pay-val {
    font-size: clamp(1.4rem, 6vw, 1.75rem);
  }
  body.app-redesign #tab-history .hist-pay-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .22rem;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    font-size: .66rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
  }
  body.app-redesign #tab-history .hist-pay-sub > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body.app-redesign #tab-history .hist-pay-tab:first-child .hist-pay-sub {
    font-size: .72rem;
    line-height: 1.3;
  }
}