/* =========================================================================
   Sigma TPV: componentes adicionales sobre la base de estilos de SR TPV
   (styles.css). Todo color sale de los mismos tokens, así que el modo
   oscuro funciona sin reglas propias salvo donde se indica.
   ====================================================================== */
h2 { margin: 0 0 6px; color: var(--text-strong); letter-spacing: -0.01em; }
h3 { margin: 0 0 12px; color: var(--text-strong); }
label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.85rem; color: var(--muted-2); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.spacer { flex: 1 1 auto; }
.mt { margin-top: 16px; }

header .header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
header .header-user { text-align: right; font-size: 0.85rem; opacity: 0.92; line-height: 1.35; }
header .header-brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
header .header-brand .logo-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.16); font-size: 1.6rem; font-weight: 800; }
header button.secondary { background: rgba(255,255,255,0.14); box-shadow: none; border: 1px solid rgba(255,255,255,0.25); }

/* Migas de pan: dónde está el usuario y cómo volver. */
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -8px 0 18px; font-size: 0.88rem; color: var(--muted); }
.crumbs a { color: var(--accent-text); text-decoration: none; font-weight: 600; cursor: pointer; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { opacity: 0.5; }

.page-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title h2 { font-size: 1.35rem; }
.page-title p { margin: 4px 0 0; color: var(--muted); }

.module-btn .module-hint { font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.section-label { margin: 22px 0 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* Botones compactos y de acción secundaria. */
button.sm { padding: 7px 12px; font-size: 0.85rem; }
button.ghost { background: var(--surface); color: var(--accent-text); border: 1px solid var(--border); box-shadow: none; }
button.ghost:hover { background: var(--accent-hover-bg); border-color: var(--accent-soft-border); box-shadow: none; }
button.success { background: var(--success); box-shadow: 0 4px 10px rgba(22,163,74,0.28); }
button.big { padding: 14px 24px; font-size: 1.05rem; }
.kbd { display: inline-block; padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.45); font-size: 0.72rem; font-weight: 700; opacity: 0.9; }
button.ghost .kbd { border-color: var(--border); }

/* Formularios en grilla. */
.form-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid .span-2 { grid-column: auto; } }
.field { min-width: 0; }
.field input, .field select, .field textarea { padding: 10px 12px; }
.field textarea { min-height: 70px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); cursor: pointer; margin: 0; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.check-group { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.req::after { content: " *"; color: var(--danger); }

/* Barra de filtros de listados. */
.filters { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; margin-bottom: 16px; }
.filters input, .filters select { padding: 9px 11px; }
.filters .actions { display: flex; gap: 8px; }

/* Insignias de estado. */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.badge-open, .badge-issued { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-soft-border); }
.badge-partial { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
.badge-closed, .badge-ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.badge-cancelled, .badge-alert { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.badge-muted { color: var(--muted-2); background: var(--surface-3); border-color: var(--border); }
tr.row-cancelled td { color: var(--muted); }
tr.row-cancelled td.num { text-decoration: line-through; }

/* Avisos. */
.alert.warn { background: color-mix(in srgb, #f59e0b 12%, var(--surface)); border-left-color: #f59e0b; }
.alert.danger { background: var(--danger-soft); border-left-color: var(--danger); }
.alert.ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-left-color: var(--success); }
.alert .row { margin-top: 10px; }

/* Barra de estado: cotizaciones y turno. */
.status-bar .status-warn strong { color: #fbbf24; }
.status-bar button { padding: 3px 10px; font-size: 0.75rem; box-shadow: none; background: rgba(147,197,253,0.18); border: 1px solid rgba(147,197,253,0.4); }
.status-bar button:hover { transform: none; box-shadow: none; }

/* Notificaciones flotantes. */
.toast-host { position: fixed; top: 52px; right: 18px; z-index: 400; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 36px)); }
.toast { padding: 12px 16px; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); box-shadow: var(--shadow-pop); font-size: 0.9rem; animation: toast-in .18s ease; }
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.modal.modal-sm { max-width: 520px; }
.modal.modal-md { max-width: 820px; }

/* ---------------------------------------------------------------------------
   Documento (ventas / compras)
--------------------------------------------------------------------------- */
.doc-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1100px) { .doc-layout { grid-template-columns: 1fr; } }
.doc-side { position: sticky; top: 56px; }
.partner-card { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); font-size: 0.86rem; color: var(--accent-text); line-height: 1.5; }
.partner-card strong { color: var(--text-strong); }
.item-entry { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: end; margin-bottom: 14px; }
@media (max-width: 640px) { .item-entry { grid-template-columns: 1fr; } }
.search-wrap { position: relative; }
.autocomplete-item .ac-main { font-weight: 600; }
.autocomplete-item .ac-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; display: flex; gap: 12px; flex-wrap: wrap; }
.autocomplete-item.active { background: var(--accent-hover-bg); }
.lines-table td input { min-width: 70px; }
.lines-table .qty-input { width: 100px; }
.lines-table .price-input { width: 130px; }
.lines-table .disc-input { width: 80px; }
.lines-table .line-note { display: block; font-size: 0.74rem; color: var(--muted); }
.lines-empty td { padding: 28px; text-align: center; color: var(--muted); }
.totals-box { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-soft); }
.totals-box .tb-rows { padding: 14px 18px; }
.totals-box .tb-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.9rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.totals-box .tb-row strong { color: var(--text); font-weight: 600; }
.totals-box .tb-sep { border-top: 1px dashed var(--border); margin: 6px 0; }
.totals-box .tb-grand { padding: 16px 18px; background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%); color: #fff; }
.totals-box .tb-grand span { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.totals-box .tb-grand strong { font-size: 1.9rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.totals-box .tb-grand .tb-alt { font-size: 0.82rem; opacity: 0.85; margin-top: 2px; }
.totals-box .tb-actions { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.totals-box .tb-actions button { width: 100%; }
.session-pill { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.85rem; margin-bottom: 14px; flex-wrap: wrap; }
.session-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }
.session-pill.off .dot { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }

/* Detalle de documento en pantalla. */
.doc-head { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 18px; }
.doc-head .dh-item span { display: block; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.doc-head .dh-item strong { font-size: 0.98rem; color: var(--text-strong); }
.doc-number { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-text); font-variant-numeric: tabular-nums; }

/* Medios de pago. */
.pay-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pay-summary > div { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.pay-summary span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.pay-summary strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pay-summary .ps-change strong { color: var(--success); }
.pay-summary .ps-pending strong { color: var(--danger); }
.quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.quick-amounts button { padding: 6px 12px; font-size: 0.82rem; }

/* Arqueo por denominaciones. */
.denoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.denoms .denom { display: grid; grid-template-columns: 1fr 72px; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.denoms .denom span { font-weight: 700; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.denoms .denom input { padding: 6px 8px; text-align: right; }

/* Pestañas de configuración. */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.tabs button { background: transparent; color: var(--muted-2); box-shadow: none; padding: 8px 14px; border-radius: 8px; }
.tabs button:hover { background: var(--accent-hover-bg); transform: none; box-shadow: none; }
.tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }

.table tfoot td { padding: 12px 10px; font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border); }
.table-wrap { overflow-x: auto; }
.empty-row td { text-align: center; color: var(--muted); padding: 28px; }
.money-strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-big { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.rate-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rate-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.rate-card.stale { border-color: #f59e0b; }

/* =========================================================================
   Ticket térmico (58 / 80 mm)
   ====================================================================== */
#printRoot { display: none; }
.ticket-sheet {
  width: 72mm;
  color: #000;
  background: #fff;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 9pt;
  line-height: 1.3;
  padding: 2mm 0;
}
.ticket-sheet.w58 { width: 48mm; font-size: 7.5pt; }
.ticket-sheet .tk-center { text-align: center; }
.ticket-sheet .tk-title { font-size: 11pt; font-weight: 700; }
.ticket-sheet .tk-sep { border-top: 1px dashed #000; margin: 2mm 0; }
.ticket-sheet .tk-row { display: flex; justify-content: space-between; gap: 2mm; }
.ticket-sheet .tk-row span:last-child { text-align: right; white-space: nowrap; }
.ticket-sheet .tk-item { margin-bottom: 1mm; }
.ticket-sheet .tk-desc { font-weight: 700; }
.ticket-sheet .tk-total { font-size: 11pt; font-weight: 700; }
.ticket-sheet .tk-small { font-size: 7.5pt; }
.ticket-sheet img { max-width: 60%; max-height: 18mm; display: block; margin: 0 auto 1mm; }
.preview-host { margin-top: 18px; padding: 18px; border-radius: 12px; background: var(--surface-3); overflow-x: auto; }
.preview-host .ticket-sheet { margin: 0 auto; padding: 5mm 4mm; box-shadow: 0 10px 30px rgba(15,23,42,0.18); }
.preview-host .print-sheet { display: block; max-width: 820px; margin: 0 auto; padding: 42px 46px; box-shadow: 0 10px 30px rgba(15,23,42,0.12); }
.preview-host .print-sheet.ps-dense { max-width: 1120px; padding: 30px 32px; }

@media print {
  @page ticket { margin: 1.5mm; }
  .ticket-sheet { page: ticket; }
  body.printing #app, body.printing #statusBar, body.printing .theme-toggle,
  body.printing .toast-host, body.printing .modal-overlay { display: none !important; }
  body.printing #printRoot { display: block !important; }
  body.printing #printRoot .print-sheet { display: block !important; position: static; padding: 0; }
  body.printing * { visibility: visible !important; }
}