/* ═══════════════════════════════════════════════════════════════
   JekemiPOS — Design System: The Editorial Archive
   theme.css — Visual overrides only. No JS, no DOM changes.
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* ── Design Tokens ── */
:root {
  /* Surface hierarchy */
  --surface:                    #FEF9F3;
  --surface-container-lowest:   #FFFFFF;
  --surface-container-low:      #F8F3ED;
  --surface-container:          #F2EDE7;
  --surface-container-high:     #ECE7E1;
  --surface-container-highest:  #E6E2DC;

  /* Primary — Embers Orange */
  --primary:                    #9E3D00;
  --primary-container:          #C64F00;
  --on-primary:                 #FFFFFF;
  --on-primary-fixed-variant:   #7C2E00;

  /* Secondary */
  --secondary-container:        #F9DDD1;
  --on-secondary-container:     #756057;

  /* Tertiary — Adobo Red */
  --tertiary:                   #AA2E2D;

  /* Text */
  --on-surface:                 #1D1B18;
  --on-surface-variant:         #594238;

  /* Outline */
  --outline-variant:            #D6CFC8;

  /* Functional */
  --verde:    #2E7D32;
  --rojo:     #C62828;

  /* Shadows */
  --shadow-ambient: 0 24px 48px rgba(29, 27, 24, 0.06);
  --shadow-sm:      0 2px 8px  rgba(29, 27, 24, 0.05);
  --shadow-md:      0 8px 24px rgba(29, 27, 24, 0.06);

  /* Radius */
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Override legacy vars */
  --crema:    #FEF9F3;
  --cafe:     #1D1B18;
  --cafe2:    #F2EDE7;
  --naranja:  #9E3D00;
  --naranja2: #C64F00;
  --gris:     #594238;
  --fondo:    #F8F3ED;
  --card:     #FFFFFF;
  --borde:    #D6CFC8;
  --texto:    #1D1B18;
  --texto2:   #594238;
}

/* ── Global ── */
* {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

body {
  background: var(--surface) !important;
  color: var(--on-surface) !important;
}

/* ── LOGIN ── */
#login-screen {
  background: var(--surface) !important;
}

.logo-login h1 {
  color: var(--primary) !important;
  letter-spacing: -0.02em;
}

.logo-login p {
  color: var(--on-surface-variant) !important;
}

.pin-cajeros-grid {
  color: var(--on-surface-variant);
}

.pin-cajero-btn {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.15s;
}

.pin-cajero-btn:hover {
  border-color: transparent !important;
  background: var(--surface-container-low) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.pin-cajero-avatar {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
}

.pin-cajero-nombre { color: var(--on-surface) !important; }
.pin-cajero-rol    { color: var(--on-surface-variant) !important; }

/* PIN overlay */
#pin-overlay {
  background: rgba(29, 27, 24, 0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pin-modal {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

.pin-modal-nombre { color: var(--primary) !important; }

.pin-dot {
  border-color: var(--outline-variant) !important;
}

.pin-dot.lleno {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.pin-tecla {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
  transition: background 0.1s, transform 0.1s;
}

.pin-tecla:active {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: white !important;
}

.pin-tecla-del {
  color: var(--tertiary) !important;
}

.pin-error { color: var(--tertiary) !important; }

/* Login card (password fallback) */
.login-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
}

.login-card input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  color: var(--on-surface) !important;
  border-radius: var(--radius) !important;
}

.login-card input:focus {
  border-color: var(--primary) !important;
}

.btn-login {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  border: none;
}

.login-error { color: var(--tertiary) !important; }

/* ── HEADER ── */
header {
  background: var(--surface) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.header-logo {
  color: var(--primary) !important;
  letter-spacing: -0.02em;
}

.header-sucursal { color: var(--on-surface-variant) !important; }
.header-user     { color: var(--on-surface-variant) !important; }

.btn-logout {
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
}

.btn-logout:hover {
  background: var(--surface-container-low) !important;
}

/* ── SECTION NAV ── */
.sec-nav {
  background: var(--surface-container-low) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.sec-nav-btn {
  color: var(--on-surface-variant) !important;
  border-bottom-color: transparent !important;
  border-radius: var(--radius) 4px 0 0;
  transition: color 0.15s, border-color 0.15s;
}

.sec-nav-btn:hover {
  color: var(--on-surface) !important;
}

.sec-nav-btn.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

.toolbar-sep {
  background: var(--outline-variant) !important;
}

/* ── MENU PANEL ── */
#menu-panel {
  border-right: none !important;
  box-shadow: 1px 0 0 var(--outline-variant);
}

.marca-tabs {
  border-bottom: none !important;
  background: var(--surface-container-low);
  box-shadow: 0 1px 0 var(--outline-variant);
}

.marca-tab {
  color: var(--on-surface-variant) !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s, border-color 0.2s;
}

.marca-tab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

.cat-scroll {
  border-bottom: none !important;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--outline-variant);
}

.cat-btn {
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-low) !important;
  color: var(--on-surface-variant) !important;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.cat-btn:hover {
  background: var(--surface-container-high) !important;
}

.cat-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: var(--on-primary) !important;
}

/* ── PRODUCT CARDS ── */
.productos-grid {
  background: var(--surface);
}

.prod-card {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.15s;
}

.prod-card:hover {
  border-color: transparent !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.prod-card:active {
  transform: scale(0.98);
}

.prod-card-img {
  border-radius: var(--radius) var(--radius) 0 0;
}

.prod-nombre { color: var(--on-surface) !important; }
.prod-precio { color: var(--primary) !important; }
.prod-costo  { color: var(--on-surface-variant) !important; }

.prod-tag {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
}

/* ── ORDER PANEL ── */
.orden-header {
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.orden-titulo { color: var(--on-surface) !important; }

.btn-nueva-orden {
  background: var(--surface-container-high) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

.orden-tipo {
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.tipo-btn {
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
  background: transparent !important;
}

.tipo-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}

/* Items list */
.item-row {
  border-bottom: none !important;
  padding: 10px 0 !important;
}

.item-row + .item-row {
  box-shadow: 0 -1px 0 var(--surface-container-low);
}

.item-nombre { color: var(--on-surface) !important; }
.item-precio { color: var(--primary) !important; }

.cant-btn {
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-high) !important;
  color: var(--on-surface) !important;
}

.cant-btn:hover {
  background: var(--surface-container-highest) !important;
}

.item-nota-btn { color: var(--on-surface-variant) !important; }
.item-nota-btn.activa { color: var(--primary) !important; }

.item-nota-input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

/* Totals */
.orden-totales {
  border-top: none !important;
  background: var(--surface-container-low);
}

.total-row { color: var(--on-surface-variant) !important; }
.total-final { color: var(--on-surface) !important; }

/* Payment buttons */
.btns-pago {
  border-top: none !important;
  background: var(--surface);
}

.btn-pago {
  border-radius: var(--radius) !important;
  font-weight: 700;
  transition: opacity 0.15s, transform 0.15s;
}

.btn-efectivo {
  background: var(--verde) !important;
}

.btn-bold {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
}

.btn-descuento {
  background: transparent !important;
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  color: var(--on-primary-fixed-variant) !important;
}

.btn-pago:active {
  transform: scale(0.97);
}

/* ── MODAL COBRO ── */
#modal-pago {
  background: rgba(29, 27, 24, 0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cobro-wrap {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

.cobro-header {
  background: var(--surface-container-low) !important;
}

.cobro-header-num { color: var(--primary) !important; }

.cobro-header-tipo {
  background: var(--secondary-container) !important;
  color: var(--on-secondary-container) !important;
  border-radius: var(--radius) !important;
}

.cobro-medio-btn {
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-low) !important;
  transition: border-color 0.15s, background 0.15s;
}

.cobro-medio-btn:hover {
  border-color: var(--primary) !important;
}

.cobro-medio-btn.activo {
  border-color: var(--primary) !important;
  background: rgba(158, 61, 0, 0.06) !important;
}

.cobro-medio-label { color: var(--on-surface-variant) !important; }
.cobro-medio-btn.activo .cobro-medio-label { color: var(--primary) !important; }

.cobro-right {
  border-left: none !important;
  box-shadow: -1px 0 0 var(--outline-variant);
}

.cobro-display {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

.cobro-display-label { color: var(--on-surface-variant) !important; }
.cobro-display-val   { color: var(--on-surface) !important; }

.cobro-cambio-row.positivo { background: rgba(46, 125, 50, 0.08) !important; }
.cobro-cambio-row.negativo { background: rgba(170, 46, 45, 0.06) !important; }
.cobro-cambio-row.cero     { background: rgba(46, 125, 50, 0.06) !important; }

.cobro-billetes-titulo { color: var(--on-surface-variant) !important; }

.billete-btn {
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-low) !important;
  color: var(--on-surface) !important;
  transition: background 0.15s;
}

.billete-btn:hover {
  background: var(--surface-container-high) !important;
  color: var(--primary) !important;
}

.cobro-cliente-inp {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  color: var(--on-surface) !important;
  border-radius: var(--radius) !important;
}

.cobro-cliente-inp:focus {
  border-color: var(--primary) !important;
}

.tecla {
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-low) !important;
  color: var(--on-surface) !important;
  transition: background 0.1s, transform 0.1s;
}

.tecla:hover {
  background: var(--surface-container-high) !important;
}

.tecla:active {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: var(--on-primary) !important;
}

.tecla-borrar {
  color: var(--tertiary) !important;
}

.tecla-borrar:active {
  background: var(--tertiary) !important;
  color: var(--on-primary) !important;
}

.cobro-footer {
  border-top: none !important;
  box-shadow: 0 -1px 0 var(--outline-variant);
}

.cobro-btn-cancelar {
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
}

.cobro-btn-confirmar {
  border-radius: var(--radius) !important;
}

.cobro-btn-confirmar:disabled {
  background: var(--surface-container-high) !important;
  color: var(--on-surface-variant) !important;
}

/* ── MODALS — Shared ── */
#modal-caja,
#modal-config,
#modal-inventario,
#modal-estadisticas,
#modal-historico,
#modal-ventas,
#modal-adicionales,
#modal-sugerencias,
#modal-combo,
#modal-detalle-orden,
#modal-anulacion,
#modal-descuento,
.caja-modal-wrap {
  background: rgba(29, 27, 24, 0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* All modal cards */
.caja-card,
.config-card,
.inv-card,
.stats-card,
.hist-card,
.ventas-card,
.adic-card,
.desc-card,
.anulacion-card,
.detalle-card,
.cobro-wrap,
.caja-inner {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

.anulacion-card {
  border: 1px solid var(--tertiary) !important;
}

/* Modal titles */
.caja-titulo,
.config-titulo,
.inv-titulo,
.stats-titulo,
.hist-titulo,
.ventas-titulo,
.adic-titulo {
  color: var(--primary) !important;
}

.anulacion-titulo { color: var(--tertiary) !important; }
.desc-titulo      { color: var(--primary) !important; }

/* ── TABS (caja, config, etc.) ── */
.caja-tabs,
.config-tabs,
.caja-tabs-nav {
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.caja-tab,
.config-tab,
.caja-nav-tab {
  border: none !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-low) !important;
  color: var(--on-surface-variant) !important;
  transition: background 0.2s, color 0.2s;
}

.caja-tab.active,
.config-tab.active,
.caja-nav-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: var(--on-primary) !important;
}

/* ── STATS / KPIs ── */
.caja-stat,
.stats-kpi,
.ventas-stat,
.caja-kpi {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

.caja-stat-num,
.stats-kpi-num,
.ventas-stat-num,
.caja-kpi-num {
  color: var(--primary) !important;
}

.caja-stat-label,
.stats-kpi-label,
.ventas-stat-label,
.caja-kpi-label {
  color: var(--on-surface-variant) !important;
}

.caja-stat.verde .caja-stat-num,
.caja-kpi-num.verde { color: var(--verde) !important; }

.caja-stat.rojo .caja-stat-num,
.caja-kpi-num.rojo { color: var(--tertiary) !important; }

/* ── TABLES ── */
.caja-tabla,
.inv-tabla,
.stats-tabla,
.hist-tabla,
.ventas-tabla {
  color: var(--on-surface);
}

.caja-tabla th,
.inv-tabla th,
.stats-tabla th,
.hist-tabla th,
.ventas-tabla th {
  color: var(--on-surface-variant) !important;
  border-bottom-color: var(--outline-variant) !important;
}

.caja-tabla td,
.inv-tabla td,
.stats-tabla td,
.hist-tabla td,
.ventas-tabla td {
  border-bottom-color: var(--surface-container-low) !important;
}

.caja-tabla tr:hover td,
.inv-tabla tr:hover td,
.hist-tabla tr:hover td {
  background: var(--surface-container-low) !important;
}

.caja-tabla .num,
.inv-tabla .num,
.stats-tabla .num,
.hist-tabla .num,
.ventas-tabla .num {
  color: var(--primary) !important;
}

/* ── INPUTS ── */
.caja-input,
.config-input,
.config-select,
.caja-inp,
.modal-input,
.cobro-cliente-inp,
.adic-observacion,
.inv-filtros input,
.inv-filtros select,
.hist-filtros input,
.hist-filtros select,
.inv-precio-input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  color: var(--on-surface) !important;
  border-radius: var(--radius) !important;
  transition: border-color 0.2s;
}

.caja-input:focus,
.config-input:focus,
.config-select:focus,
.caja-inp:focus,
.modal-input:focus,
.adic-observacion:focus,
.inv-filtros input:focus,
.inv-filtros select:focus,
.hist-filtros input:focus,
.hist-filtros select:focus,
.inv-precio-input:focus {
  border-color: var(--primary) !important;
  outline: none;
}

/* ── BUTTONS — Utility classes ── */
.caja-btn {
  border-radius: var(--radius) !important;
}

.caja-btn-naranja,
.config-btn-naranja,
.caja-btn-n {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: var(--on-primary) !important;
}

.caja-btn-rojo,
.caja-btn-r {
  background: var(--tertiary) !important;
  color: var(--on-primary) !important;
}

.caja-btn-gris,
.config-btn-gris,
.caja-btn-g {
  background: transparent !important;
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
}

.config-btn {
  border-radius: var(--radius) !important;
}

/* ── BADGES & CHIPS ── */
.sec-nav-badge {
  background: var(--tertiary) !important;
  border-radius: var(--radius) !important;
}

.listo-chip {
  border-radius: var(--radius) !important;
}

.hist-estado {
  border-radius: var(--radius) !important;
}

.hist-estado.PAGADO   { background: rgba(158, 61, 0, 0.1) !important; color: var(--primary) !important; }
.hist-estado.LISTO    { background: rgba(46, 125, 50, 0.1) !important; color: var(--verde) !important; }
.hist-estado.ENTREGADO{ background: rgba(46, 125, 50, 0.08) !important; color: var(--verde) !important; }
.hist-estado.ANULADO  { background: rgba(170, 46, 45, 0.1) !important; color: var(--tertiary) !important; }
.hist-estado.NUEVO    { background: var(--surface-container-high) !important; color: var(--on-surface-variant) !important; }
.hist-estado.COTIZACION { background: rgba(21, 101, 192, 0.1) !important; color: #1976D2 !important; }

.rol-badge {
  border-radius: var(--radius) !important;
}

.rol-MAESTRO { background: rgba(158, 61, 0, 0.1) !important; color: var(--primary) !important; }
.rol-CAJERO  { background: rgba(46, 125, 50, 0.1) !important; color: var(--verde) !important; }
.rol-COCINA  { background: var(--surface-container-high) !important; color: var(--on-surface-variant) !important; }
.rol-TURNERO { background: rgba(30, 30, 80, 0.1) !important; color: #5555AA !important; }

/* ── USERS LIST (config) ── */
.user-row {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

.user-nombre { color: var(--on-surface) !important; }
.user-rol    { color: var(--on-surface-variant) !important; }

/* ── ADICIONALES modal ── */
.adic-opcion {
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-low) !important;
  transition: border-color 0.15s, background 0.15s;
}

.adic-opcion:hover {
  border-color: var(--primary) !important;
}

.adic-opcion.selected {
  border-color: var(--primary) !important;
  background: rgba(158, 61, 0, 0.04) !important;
}

.adic-opcion-nombre { color: var(--on-surface) !important; }
.adic-opcion-precio { color: var(--primary) !important; }

.adic-check {
  border-color: var(--outline-variant) !important;
}

.adic-opcion.selected .adic-check {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.adic-rapida-btn {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

.adic-rapida-btn:hover {
  color: var(--primary) !important;
  background: var(--surface-container-high) !important;
}

.adic-rapida-btn.agregado {
  background: rgba(46, 125, 50, 0.08) !important;
  color: var(--verde) !important;
}

.adic-grupo-nombre { color: var(--on-surface-variant) !important; }
.adic-requerido    { color: var(--tertiary) !important; }

/* ── DESCUENTO modal ── */
.desc-card {
  border-color: var(--primary) !important;
}

.desc-pct-btn {
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-low) !important;
  color: var(--on-surface) !important;
}

.desc-pct-btn.sel {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}

.desc-campo label { color: var(--on-surface-variant) !important; }

.desc-campo input[type="text"],
.desc-campo textarea,
.desc-campo input[type="password"] {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  color: var(--on-surface) !important;
  border-radius: var(--radius) !important;
}

#btn-desc-cancelar {
  background: transparent !important;
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

#btn-desc-confirmar {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: var(--on-primary) !important;
  border-radius: var(--radius) !important;
}

/* ── ANULACIÓN modal ── */
.anulacion-campo label { color: var(--on-surface-variant) !important; }

.anulacion-campo textarea,
.anulacion-campo input[type="password"] {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  color: var(--on-surface) !important;
  border-radius: var(--radius) !important;
}

#btn-anulacion-cancelar {
  background: transparent !important;
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

#btn-anulacion-confirmar {
  background: var(--tertiary) !important;
  border-radius: var(--radius) !important;
}

/* ── HISTORICO ── */
.btn-hist-anular {
  border-color: var(--tertiary) !important;
  color: var(--tertiary) !important;
  border-radius: var(--radius) !important;
}

.btn-hist-anular:hover {
  background: var(--tertiary) !important;
  color: var(--on-primary) !important;
}

.btn-hist-ver {
  border-color: rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

.btn-hist-ver:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ── INVENTARIO ── */
.inv-toggle.on  { background: var(--verde) !important; }
.inv-toggle.off { background: var(--surface-container-high) !important; }

.margen-bueno { background: rgba(46, 125, 50, 0.1) !important; color: var(--verde) !important; }
.margen-medio { background: rgba(158, 61, 0, 0.08) !important; color: var(--primary) !important; }
.margen-bajo  { background: rgba(170, 46, 45, 0.08) !important; color: var(--tertiary) !important; }

/* ── STATS bars ── */
.stats-bar {
  background: linear-gradient(90deg, var(--primary), var(--primary-container)) !important;
}

/* ── Sections & sections label ── */
.caja-seccion,
.stats-seccion,
.ventas-seccion,
.caja-sec {
  color: var(--on-surface-variant) !important;
}

.caja-stat-row {
  border-bottom-color: var(--surface-container-low) !important;
}

.caja-v { color: var(--primary) !important; }
.caja-v.verde { color: var(--verde) !important; }
.caja-v.rojo  { color: var(--tertiary) !important; }

.caja-medio {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius) !important;
}

/* ── TOAST ── */
#toast {
  background: var(--on-surface) !important;
  color: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md);
}

/* ── LOADING ── */
.loading { color: var(--on-surface-variant) !important; }

/* ── MODAL TOTAL ── */
.modal-titulo { color: var(--on-surface) !important; }
.modal-total  { color: var(--primary) !important; }
.modal-cambio { color: var(--verde) !important; }

.btn-confirmar {
  border-radius: var(--radius) !important;
}

.btn-cancelar {
  background: var(--surface-container-high) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

/* ── KDS (inside POS file) ── */
#kds-screen {
  background: var(--surface) !important;
}

.kds-header {
  background: var(--surface-container-low) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.kds-titulo { color: var(--primary) !important; }

.kds-card {
  background: var(--surface-container-lowest) !important;
  border-color: var(--primary) !important;
  border-radius: var(--radius) !important;
}

.kds-card.lista {
  border-color: var(--verde) !important;
}

.kds-num  { color: var(--primary) !important; }
.kds-tipo { color: var(--on-surface-variant) !important; }

.kds-item {
  border-bottom-color: var(--surface-container-low) !important;
}

.kds-item.listo { color: var(--on-surface-variant) !important; }

.btn-kds-listo {
  border-radius: var(--radius) !important;
}

/* ── TURNERO — keeps dark for display screens ── */
/* Turnero is a public-facing display, intentionally left dark */

/* ── PANEL LISTOS ── */
.panel-listos-titulo { color: var(--verde) !important; }

.listo-chip {
  background: var(--verde) !important;
}

/* ── SEC PANELS ── */
.sec-panel {
  background: var(--surface);
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--on-surface-variant);
}

/* ═══════════════════════════════════════════════════════════════
   KIOSCO — Editorial Archive overrides
   Touch-first: large targets, readable type, tactile buttons.
   ═══════════════════════════════════════════════════════════════ */

/* Override kiosco's own CSS variables */
body:has(#screen-bienvenida) {
  --bg:            #FEF9F3;
  --white:         #FFFFFF;
  --naranja:       #9E3D00;
  --naranja-light: rgba(158, 61, 0, 0.06);
  --naranja-dark:  #C64F00;
  --verde:         #2E7D32;
  --verde-light:   rgba(46, 125, 50, 0.06);
  --gris1:         #1D1B18;
  --gris2:         #594238;
  --gris3:         #594238;
  --gris4:         #D6CFC8;
  --gris5:         #F8F3ED;
  --sombra:        0 2px 8px rgba(29, 27, 24, 0.05);
  --sombra-lg:     0 24px 48px rgba(29, 27, 24, 0.06);
  --radio:         4px;
}

/* ── BIENVENIDA ── */
.bienvenida-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 24px rgba(158, 61, 0, 0.4) !important;
  padding: 20px 52px !important;
  font-size: 1.15rem !important;
}

@keyframes pulso {
  0%, 100% { box-shadow: 0 8px 24px rgba(158, 61, 0, 0.35); }
  50%      { box-shadow: 0 8px 40px rgba(158, 61, 0, 0.55); }
}

/* ── KIOSCO HEADER ── */
.kiosco-header {
  background: var(--surface) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.kiosco-logo span { color: var(--primary) !important; }

/* ── MARCA TABS ── */
.kiosco-marcas {
  background: var(--surface) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.kiosco-marca-tab {
  color: var(--on-surface-variant) !important;
  border-bottom-width: 2px !important;
  transition: color 0.2s, border-color 0.2s;
}

.kiosco-marca-tab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* ── CATEGORY SIDEBAR ── */
.kiosco-cats-sidebar {
  background: var(--surface-container-low) !important;
  border-right: none !important;
  box-shadow: 1px 0 0 var(--outline-variant);
}

.kiosco-cat {
  border-radius: var(--radius) !important;
  transition: background 0.18s;
}

.kiosco-cat.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
}

.kiosco-cat-label {
  color: var(--on-surface-variant) !important;
}

.kiosco-cat.active .kiosco-cat-label {
  color: white !important;
}

/* ── SEARCH ── */
.kiosco-busqueda-bar input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

.kiosco-busqueda-bar input:focus {
  border-color: var(--primary) !important;
  background: var(--surface-container-lowest) !important;
}

/* ── PRODUCT CARDS ── */
.kiosco-prod {
  background: var(--surface-container-lowest) !important;
  border-radius: var(--radius) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(29, 27, 24, 0.05);
  transition: box-shadow 0.2s, transform 0.2s;
}

.kiosco-prod:hover {
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(29, 27, 24, 0.08) !important;
  transform: translateY(-2px) !important;
}

.kiosco-prod:active {
  transform: scale(0.98) !important;
}

.kiosco-prod-img {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  background: var(--surface-container-low) !important;
}

.kiosco-prod-tag {
  background: var(--secondary-container) !important;
  color: var(--on-secondary-container) !important;
  border-radius: var(--radius) !important;
}

.kiosco-prod-nombre { color: var(--on-surface) !important; }
.kiosco-prod-precio { color: var(--primary) !important; }

.kiosco-prod-btn {
  background: var(--surface-container-low) !important;
  color: var(--primary) !important;
  border-radius: var(--radius) !important;
  font-weight: 700;
  transition: background 0.18s, color 0.18s;
}

.kiosco-prod:hover .kiosco-prod-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: white !important;
}

/* ── BOTTOM BAR (carrito fijo) ── */
#barra-carrito {
  background: var(--on-surface) !important;
  border-top: none !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.barra-badge {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  width: 38px !important;
  height: 38px !important;
}

.barra-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  padding: 14px 24px !important;
  min-height: 48px;
}

/* ── BOTTOM SHEET CARRITO ── */
#sheet-carrito {
  background: rgba(29, 27, 24, 0.4) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sheet-panel {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.sheet-handle {
  background: var(--outline-variant) !important;
  border-radius: 2px !important;
}

.carrito-header {
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.carrito-titulo { color: var(--on-surface) !important; }

.carrito-cerrar {
  background: var(--surface-container-low) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
  width: 40px !important;
  height: 40px !important;
}

.carrito-item {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius) !important;
}

.carrito-item-nombre { color: var(--on-surface) !important; }
.carrito-item-precio { color: var(--primary) !important; }

.carrito-cant-btn {
  border-radius: var(--radius) !important;
  border-color: var(--outline-variant) !important;
  width: 40px !important;
  height: 40px !important;
}

.carrito-footer {
  border-top: none !important;
  box-shadow: 0 -1px 0 var(--outline-variant);
}

.carrito-total-final span:last-child { color: var(--primary) !important; }

.btn-primario {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 20px rgba(158, 61, 0, 0.25) !important;
  padding: 18px !important;
  min-height: 56px;
}

.btn-cancelar-pedido {
  border-color: var(--outline-variant) !important;
  color: var(--tertiary) !important;
  border-radius: var(--radius) !important;
  min-height: 48px;
}

.btn-secundario {
  border-color: var(--outline-variant) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
  min-height: 52px;
}

/* ── SHEET MODIFICADORES ── */
#sheet-mod {
  background: rgba(29, 27, 24, 0.4) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mod-panel {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.mod-handle {
  background: var(--outline-variant) !important;
  border-radius: 2px !important;
}

.mod-header {
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.mod-prod-nombre { color: var(--on-surface) !important; }
.mod-prod-precio { color: var(--primary) !important; }

.mod-grupo-titulo { color: var(--on-surface-variant) !important; }

.mod-grupo-badge {
  background: var(--secondary-container) !important;
  color: var(--on-secondary-container) !important;
  border-radius: var(--radius) !important;
}

.mod-opcion {
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-lowest) !important;
  padding: 16px 18px !important;
  min-height: 52px;
  transition: border-color 0.15s, background 0.15s;
}

.mod-opcion:hover {
  border-color: var(--primary) !important;
}

.mod-opcion.selected {
  border-color: var(--primary) !important;
  background: rgba(158, 61, 0, 0.04) !important;
}

.mod-opcion-check {
  border-color: var(--outline-variant) !important;
  width: 28px !important;
  height: 28px !important;
}

.mod-opcion.selected .mod-opcion-check {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.mod-opcion-nombre { color: var(--on-surface) !important; }
.mod-opcion-extra  { color: var(--primary) !important; }

.mod-footer {
  border-top: none !important;
  box-shadow: 0 -1px 0 var(--outline-variant);
}

.mod-total { color: var(--primary) !important; }

.mod-btn-add {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  padding: 16px 32px !important;
  min-height: 52px;
}

/* ── SCREEN NOMBRE ── */
#screen-nombre {
  background: var(--surface) !important;
}

.nombre-titulo { color: var(--on-surface) !important; }
.nombre-sub    { color: var(--on-surface-variant) !important; }

.nombre-input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

.nombre-input:focus {
  border-color: var(--primary) !important;
  background: var(--surface-container-lowest) !important;
}

/* ── SCREEN PAGO ── */
#screen-pago {
  background: var(--surface) !important;
}

.pago-titulo { color: var(--on-surface) !important; }
.pago-total  { color: var(--primary) !important; }

.pago-btn {
  border: 1px solid rgba(214, 207, 200, 0.3) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-lowest) !important;
  box-shadow: 0 2px 8px rgba(29, 27, 24, 0.05) !important;
  min-height: 72px;
  transition: box-shadow 0.2s, transform 0.18s;
}

.pago-btn:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 8px 24px rgba(29, 27, 24, 0.08) !important;
}

.pago-btn-nombre { color: var(--on-surface) !important; }
.pago-btn-sub    { color: var(--on-surface-variant) !important; }

.pago-btn-efectivo {
  border-color: rgba(46, 125, 50, 0.2) !important;
  background: rgba(46, 125, 50, 0.04) !important;
}

.pago-btn-efectivo .pago-btn-nombre { color: var(--verde) !important; }

.pago-volver {
  background: var(--surface-container-low) !important;
  color: var(--on-primary-fixed-variant) !important;
  border-radius: var(--radius) !important;
  min-height: 52px;
}

/* ── FACTURA ELECTRÓNICA ── */
#screen-fe,
#screen-fe-form {
  background: var(--surface) !important;
}

.fe-titulo { color: var(--on-surface) !important; }
.fe-sub    { color: var(--on-surface-variant) !important; }

.fe-btn {
  border-radius: var(--radius) !important;
  border: 1px solid rgba(214, 207, 200, 0.3) !important;
  box-shadow: 0 2px 8px rgba(29, 27, 24, 0.05) !important;
  min-height: 64px;
  transition: box-shadow 0.18s, transform 0.18s;
}

.fe-btn-si {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.fe-btn-no {
  border-color: rgba(46, 125, 50, 0.2) !important;
  color: var(--verde) !important;
  background: rgba(46, 125, 50, 0.04) !important;
}

.fe-form-wrap label { color: var(--on-surface-variant) !important; }

.fe-form-wrap input,
.fe-form-wrap select {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
  box-shadow: none !important;
  min-height: 52px;
}

.fe-form-wrap input:focus,
.fe-form-wrap select:focus {
  border-color: var(--primary) !important;
}

.fe-continuar {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  min-height: 56px;
}

.fe-volver {
  color: var(--on-surface-variant) !important;
}

/* ── BOLD ESPERA ── */
#screen-bold-espera {
  background: var(--surface) !important;
}

.bold-anim {
  background: rgba(158, 61, 0, 0.06) !important;
}

.bold-titulo { color: var(--on-surface) !important; }
.bold-sub    { color: var(--on-surface-variant) !important; }

.bold-loader {
  background: var(--surface-container-high) !important;
}

.bold-loader-fill {
  background: linear-gradient(90deg, var(--primary), var(--primary-container)) !important;
}

.bold-cancel {
  border-color: var(--outline-variant) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

/* ── ESPERA / CONFIRMACIÓN ── */
#screen-espera {
  background: var(--surface) !important;
}

.espera-circulo {
  background: rgba(158, 61, 0, 0.06) !important;
  border-radius: 50%;
}

.espera-titulo { color: var(--on-surface) !important; }
.espera-sub    { color: var(--on-surface-variant) !important; }
.espera-label  { color: var(--on-surface-variant) !important; }
.espera-numero { color: var(--primary) !important; }

.espera-efectivo {
  background: rgba(46, 125, 50, 0.06) !important;
  border: 1px solid rgba(46, 125, 50, 0.15) !important;
  border-radius: var(--radius) !important;
}

.espera-efectivo-titulo { color: var(--verde) !important; }

/* ── ENCUESTA ── */
#screen-encuesta {
  background: var(--surface) !important;
}

.encuesta-titulo { color: var(--on-surface) !important; }
.encuesta-sub    { color: var(--on-surface-variant) !important; }

.encuesta-barra-wrap {
  background: var(--surface-container-high) !important;
}

.encuesta-barra-fill {
  background: linear-gradient(90deg, var(--primary), var(--primary-container)) !important;
}

.encuesta-skip { color: var(--outline-variant) !important; }

/* ── WIZARD ── */
#screen-wizard,
#screen-wizard-fin {
  background: var(--surface) !important;
}

.wiz-header {
  background: var(--surface-container-lowest) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

.wiz-back {
  background: var(--surface-container-low) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
  width: 44px !important;
  height: 44px !important;
}

.wiz-paso-label { color: var(--on-surface-variant) !important; }

.wiz-bar {
  background: var(--surface-container-high) !important;
  border-radius: 2px !important;
}

.wiz-bar.done {
  background: var(--primary) !important;
}

.wiz-bar.active::after {
  background: var(--primary) !important;
}

.wiz-footer {
  background: var(--surface-container-lowest) !important;
  border-top: none !important;
  box-shadow: 0 -1px 0 var(--outline-variant);
}

.wiz-btn-saltar {
  border-color: var(--outline-variant) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
  min-height: 52px;
}

.wiz-btn-continuar {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  min-height: 52px;
}

/* Wizard product card */
.wiz-prod-card {
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(29, 27, 24, 0.06) !important;
}

.wiz-prod-img {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

.wiz-prod-nombre { color: var(--on-surface) !important; }
.wiz-prod-precio { color: var(--primary) !important; }
.wiz-prod-confirmado { color: var(--verde) !important; }

/* Wizard upsell */
.wiz-upsell-titulo { color: var(--on-surface) !important; }
.wiz-upsell-sub    { color: var(--on-surface-variant) !important; }

.wiz-upsell-item {
  border-radius: var(--radius) !important;
  border-width: 2px !important;
  box-shadow: 0 2px 8px rgba(29, 27, 24, 0.05) !important;
}

.wiz-upsell-item.selected {
  border-color: var(--primary) !important;
}

.wiz-upsell-item-img {
  background: var(--surface-container-low) !important;
}

.wiz-upsell-item-nombre { color: var(--on-surface) !important; }
.wiz-upsell-item-precio { color: var(--primary) !important; }

/* Wizard nota */
.wiz-nota-titulo { color: var(--on-surface) !important; }
.wiz-nota-sub    { color: var(--on-surface-variant) !important; }

.wiz-nota-input {
  border-color: var(--outline-variant) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-container-highest) !important;
  color: var(--on-surface) !important;
}

.wiz-nota-input:focus {
  border-color: var(--primary) !important;
}

/* Wizard fin */
.wiz-fin-titulo { color: var(--on-surface) !important; }
.wiz-fin-sub    { color: var(--on-surface-variant) !important; }

.wiz-fin-resumen {
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(29, 27, 24, 0.05) !important;
}

.wiz-fin-item-nombre { color: var(--on-surface) !important; }
.wiz-fin-item-precio { color: var(--primary) !important; }

.wiz-fin-nota {
  color: var(--on-surface-variant) !important;
  border-top-color: var(--surface-container-low) !important;
}

.wiz-fin-btn-mas {
  background: var(--surface-container-low) !important;
  color: var(--on-primary-fixed-variant) !important;
  border-radius: var(--radius) !important;
  min-height: 52px;
}

.wiz-fin-btn-pagar {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 20px rgba(158, 61, 0, 0.25) !important;
  min-height: 56px;
}

.wiz-fin-card {
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(29, 27, 24, 0.05) !important;
}

.wiz-fin-card-nombre { color: var(--on-surface) !important; }
.wiz-fin-card-precio { color: var(--primary) !important; }

.wiz-cant-btn {
  border-color: var(--outline-variant) !important;
  border-radius: var(--radius) !important;
  width: 40px !important;
  height: 40px !important;
}

/* ── MODAL CONFIRMACIÓN ── */
#modal-confirm {
  background: rgba(29, 27, 24, 0.4) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.confirm-card {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

.confirm-titulo { color: var(--on-surface) !important; }
.confirm-sub    { color: var(--on-surface-variant) !important; }

.confirm-btn-si {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
  min-height: 52px;
}

.confirm-btn-no {
  background: var(--surface-container-low) !important;
  color: var(--on-primary-fixed-variant) !important;
  border-radius: var(--radius) !important;
  min-height: 52px;
}

/* ── KIOSCO TOAST ── */
#kiosco-toast {
  background: var(--on-surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(29, 27, 24, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   KDS — Editorial Archive overrides
   Kitchen display: high legibility, large text, clear status colors.
   ═══════════════════════════════════════════════════════════════ */

/* Override KDS dark variables with the Editorial palette */
body:has(#kds-screen) {
  --fondo:    #FEF9F3;
  --card:     #FFFFFF;
  --borde:    #D6CFC8;
  --naranja:  #9E3D00;
  --verde:    #2E7D32;
  --amarillo: #E68A00;
  --rojo:     #AA2E2D;
  --texto:    #1D1B18;
  --texto2:   #594238;
  --cafe2:    #F8F3ED;
  background: #FEF9F3 !important;
  color: #1D1B18 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── KDS LOGIN ── */
body:has(#kds-screen) #login-screen .login-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

body:has(#kds-screen) .login-titulo {
  color: var(--primary) !important;
}

body:has(#kds-screen) .login-input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

body:has(#kds-screen) .login-input:focus {
  border-color: var(--primary) !important;
}

body:has(#kds-screen) .login-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
}

body:has(#kds-screen) .login-error {
  color: var(--tertiary) !important;
}

/* ── KDS SUCURSAL SELECTOR ── */
body:has(#kds-screen) #sucursal-screen {
  background: var(--surface) !important;
}

body:has(#kds-screen) .suc-btn {
  background: var(--surface-container-lowest) !important;
  border: 1px solid rgba(214, 207, 200, 0.3) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
}

body:has(#kds-screen) .suc-btn:hover {
  border-color: var(--primary) !important;
  background: var(--surface-container-low) !important;
  box-shadow: var(--shadow-md);
}

body:has(#kds-screen) .suc-nombre {
  color: var(--on-surface) !important;
}

/* ── KDS ESTACIÓN SELECTOR ── */
body:has(#kds-screen) #estacion-screen {
  background: var(--surface) !important;
}

body:has(#kds-screen) .est-titulo {
  color: var(--primary) !important;
}

body:has(#kds-screen) .est-sub {
  color: var(--on-surface-variant) !important;
}

body:has(#kds-screen) .est-btn {
  background: var(--surface-container-lowest) !important;
  border: 1px solid rgba(214, 207, 200, 0.3) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

body:has(#kds-screen) .est-btn:hover {
  border-color: var(--primary) !important;
}

body:has(#kds-screen) .est-btn.sel {
  border-color: var(--primary) !important;
  background: rgba(158, 61, 0, 0.04) !important;
}

body:has(#kds-screen) .btn-ok-est {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
}

body:has(#kds-screen) .btn-ok-est.ok {
  opacity: 1;
}

body:has(#kds-screen) .est-back {
  color: var(--on-surface-variant) !important;
}

/* ── KDS HEADER ── */
body:has(#kds-screen) .kds-header {
  background: var(--surface-container-low) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

body:has(#kds-screen) .kds-titulo {
  color: var(--primary) !important;
  font-size: 1rem !important;
}

body:has(#kds-screen) .est-badge {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
}

body:has(#kds-screen) .btn-cambiar-area {
  border-color: rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

body:has(#kds-screen) .btn-cambiar-area:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

body:has(#kds-screen) #area-panel {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

body:has(#kds-screen) .area-toggle {
  border-bottom-color: var(--surface-container-low) !important;
}

body:has(#kds-screen) .area-toggle-label {
  color: var(--on-surface) !important;
}

body:has(#kds-screen) .area-toggle-check {
  background: var(--surface-container-high) !important;
  border-radius: 10px;
}

body:has(#kds-screen) .area-toggle-check.on {
  background: var(--primary) !important;
}

/* Average time bar */
body:has(#kds-screen) .avg-label {
  color: var(--on-surface-variant) !important;
}

body:has(#kds-screen) .avg-track {
  background: var(--surface-container-high) !important;
}

/* ── KDS TABS ── */
body:has(#kds-screen) .kds-tabs {
  background: var(--surface) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

body:has(#kds-screen) .kds-tab {
  color: var(--on-surface-variant) !important;
  border-bottom-width: 2px !important;
  font-size: 0.9rem !important;
  transition: color 0.2s, border-color 0.2s;
}

body:has(#kds-screen) .kds-tab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* ── KDS GRID ── */
body:has(#kds-screen) .kds-grid {
  background: var(--surface);
}

/* ── KDS CARDS — high legibility ── */
body:has(#kds-screen) .kds-card {
  background: var(--surface-container-lowest) !important;
  border: 2px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  padding: 14px !important;
}

body:has(#kds-screen) .kds-body {
  border-top-color: var(--surface-container-low) !important;
}

body:has(#kds-screen) .kds-seccion:first-child {
  border-right-color: var(--surface-container-low) !important;
}

/* Section titles — large and clear */
body:has(#kds-screen) .sec-titulo {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  border-radius: var(--radius) !important;
  padding: 4px 10px !important;
}

body:has(#kds-screen) .sec-titulo.prep {
  background: rgba(230, 138, 0, 0.1) !important;
  color: #B37400 !important;
}

body:has(#kds-screen) .sec-titulo.ready {
  background: rgba(46, 125, 50, 0.1) !important;
  color: var(--verde) !important;
}

body:has(#kds-screen) .sec-empty {
  color: var(--on-surface-variant) !important;
}

/* ── KDS ITEMS — large readable text ── */
body:has(#kds-screen) .kds-item {
  border-bottom-color: var(--surface-container-low) !important;
  padding: 6px 0 !important;
}

body:has(#kds-screen) .kds-item-txt {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #AA2E2D !important;
  line-height: 1.4 !important;
}

body:has(#kds-screen) .kds-item-txt.done {
  color: var(--verde) !important;
}

body:has(#kds-screen) .nota-txt {
  color: var(--primary) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

body:has(#kds-screen) .area-txt {
  color: var(--on-surface-variant) !important;
}

/* ── KDS ACTION BUTTONS — clear status colors ── */
body:has(#kds-screen) .btn-conf {
  background: rgba(46, 125, 50, 0.12) !important;
  color: var(--verde) !important;
  border-radius: var(--radius) !important;
  font-size: 0.78rem !important;
  padding: 5px 12px !important;
  font-weight: 700 !important;
}

body:has(#kds-screen) .btn-back {
  background: rgba(158, 61, 0, 0.08) !important;
  color: var(--primary) !important;
  border-radius: var(--radius) !important;
  font-size: 0.78rem !important;
  padding: 5px 12px !important;
  font-weight: 700 !important;
}

/* LISTO button — prominent green */
body:has(#kds-screen) .btn-listo {
  border-radius: var(--radius) !important;
  background: var(--surface-container-high) !important;
  color: var(--on-surface-variant) !important;
  font-size: 0.95rem !important;
  padding: 12px !important;
}

body:has(#kds-screen) .btn-listo.ok {
  background: var(--verde) !important;
  color: white !important;
}

/* ── DESPACHADOS TAB ── */
body:has(#kds-screen) .desp-search {
  background: var(--surface) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

body:has(#kds-screen) .desp-search input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

body:has(#kds-screen) .desp-search input:focus {
  border-color: var(--primary) !important;
}

body:has(#kds-screen) .desp-table th {
  background: var(--surface-container-low) !important;
  color: var(--on-surface-variant) !important;
  font-weight: 700 !important;
}

body:has(#kds-screen) .desp-table td {
  border-bottom-color: var(--surface-container-low) !important;
  color: var(--on-surface) !important;
}

body:has(#kds-screen) .desp-table tr:hover td {
  background: var(--surface-container-low) !important;
}

/* ── KDS MISC ── */
body:has(#kds-screen) #toast {
  background: var(--on-surface) !important;
  color: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md);
}

body:has(#kds-screen) .btn-sec {
  border-color: rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

body:has(#kds-screen) .btn-salir {
  color: var(--on-surface-variant) !important;
}

body:has(#kds-screen) .loading {
  color: var(--on-surface-variant) !important;
}

/* Sucursal panel (live switch) */
body:has(#kds-screen) #suc-panel-kds {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

/* ═══════════════════════════════════════════════════════════════
   TURNERO — Editorial Archive overrides
   Public TV display: extreme legibility at 3+ meters.
   Giant order numbers, clear LISTO vs EN PREPARACIÓN status.
   ═══════════════════════════════════════════════════════════════ */

body:has(#turnero-screen) {
  --naranja: #9E3D00;
  --verde:   #2E7D32;
  --texto:   #1D1B18;
  --texto2:  #594238;
  background: var(--surface) !important;
  color: var(--on-surface) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── TURNERO LOGIN ── */
body:has(#turnero-screen) #login-screen {
  background: var(--surface) !important;
}

body:has(#turnero-screen) .login-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

body:has(#turnero-screen) .login-titulo {
  color: var(--primary) !important;
}

body:has(#turnero-screen) .login-input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

body:has(#turnero-screen) .login-input:focus {
  border-color: var(--primary) !important;
}

body:has(#turnero-screen) .login-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
}

body:has(#turnero-screen) .login-error {
  color: var(--tertiary) !important;
}

/* ── TURNERO SUCURSAL SELECTOR ── */
body:has(#turnero-screen) #sucursal-screen {
  background: var(--surface) !important;
}

body:has(#turnero-screen) .suc-titulo {
  color: var(--primary) !important;
}

body:has(#turnero-screen) .suc-btn {
  background: var(--surface-container-lowest) !important;
  border: 1px solid rgba(214, 207, 200, 0.3) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
}

body:has(#turnero-screen) .suc-btn:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-md);
}

body:has(#turnero-screen) .suc-nombre {
  color: var(--on-surface) !important;
}

body:has(#turnero-screen) .suc-back {
  color: var(--on-surface-variant) !important;
}

/* ── TURNERO HEADER ── */
body:has(#turnero-screen) .turnero-header {
  background: var(--surface-container-low) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 0 var(--outline-variant);
  padding: 20px 40px !important;
}

body:has(#turnero-screen) .turnero-logo {
  color: var(--primary) !important;
  font-size: 1.8rem !important;
  letter-spacing: -0.02em;
}

body:has(#turnero-screen) .turnero-reloj {
  color: var(--on-surface) !important;
  font-size: 1.4rem !important;
  font-weight: 700;
}

body:has(#turnero-screen) .btn-salir {
  color: var(--on-surface-variant) !important;
}

/* ── TURNERO MAIN BODY ── */
body:has(#turnero-screen) #turnero-screen {
  background: var(--surface) !important;
}

body:has(#turnero-screen) .turnero-body {
  background: var(--surface);
}

/* ── LEFT: LISTOS — green, giant numbers ── */
body:has(#turnero-screen) .turnero-listos {
  border-right: none !important;
  box-shadow: 1px 0 0 var(--outline-variant);
  padding: 32px !important;
}

body:has(#turnero-screen) .turnero-listos-titulo {
  color: var(--verde) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  margin-bottom: 28px !important;
}

body:has(#turnero-screen) .turnero-listos-titulo::before {
  background: var(--verde) !important;
  width: 12px !important;
  height: 12px !important;
}

body:has(#turnero-screen) .turnero-nums {
  gap: 20px !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}

body:has(#turnero-screen) .turnero-num-card {
  background: rgba(46, 125, 50, 0.04) !important;
  border: 3px solid var(--verde) !important;
  border-radius: var(--radius) !important;
  padding: 32px 20px !important;
}

body:has(#turnero-screen) .turnero-num-big {
  color: var(--on-surface) !important;
  font-size: 5rem !important;
  font-weight: 900 !important;
  letter-spacing: -2px;
}

body:has(#turnero-screen) .turnero-num-label {
  color: var(--verde) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-top: 10px !important;
}

/* ── RIGHT: EN PREPARACIÓN — orange tint ── */
body:has(#turnero-screen) .turnero-enprep {
  background: var(--surface-container-low) !important;
  width: 320px !important;
  padding: 32px !important;
}

body:has(#turnero-screen) .turnero-prep-titulo {
  color: var(--primary) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  margin-bottom: 20px !important;
}

body:has(#turnero-screen) .turnero-prep-titulo::before {
  background: var(--primary) !important;
  width: 12px !important;
  height: 12px !important;
}

body:has(#turnero-screen) .turnero-prep-item {
  color: var(--on-surface-variant) !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  padding: 16px 0 !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

body:has(#turnero-screen) .turnero-prep-item:last-child {
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   CAJA — Editorial Archive overrides
   Professional financial UI: legible numbers, green=ingreso,
   tertiary red (#AA2E2D)=egreso.
   ═══════════════════════════════════════════════════════════════ */

body:has(.app) {
  --crema:    #FEF9F3;
  --cafe:     #1D1B18;
  --cafe2:    #F2EDE7;
  --naranja:  #9E3D00;
  --naranja2: #C64F00;
  --verde:    #2E7D32;
  --rojo:     #AA2E2D;
  --fondo:    #F8F3ED;
  --card:     #FFFFFF;
  --borde:    #D6CFC8;
  --texto:    #1D1B18;
  --texto2:   #594238;
  background: var(--surface) !important;
  color: var(--on-surface) !important;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif !important;
}

/* ── CAJA LOGIN ── */
body:has(.app) #login-screen {
  background: var(--surface) !important;
}

body:has(.app) .login-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

body:has(.app) .login-card input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

body:has(.app) .login-card input:focus {
  border-color: var(--primary) !important;
}

body:has(.app) .btn-login {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
}

body:has(.app) .login-error {
  color: var(--tertiary) !important;
}

/* ── CAJA SUCURSAL SELECTOR ── */
body:has(.app) #sucursal-screen {
  background: var(--surface) !important;
}

body:has(.app) .suc-titulo {
  color: var(--primary) !important;
}

body:has(.app) .suc-btn {
  background: var(--surface-container-lowest) !important;
  border: 1px solid rgba(214, 207, 200, 0.3) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

body:has(.app) .suc-btn:hover {
  border-color: var(--primary) !important;
  background: var(--surface-container-low) !important;
  box-shadow: var(--shadow-md);
}

body:has(.app) .suc-nombre {
  color: var(--on-surface) !important;
}

body:has(.app) .suc-back {
  color: var(--on-surface-variant) !important;
}

/* ── CAJA HEADER ── */
body:has(.app) header {
  background: var(--surface) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

body:has(.app) .header-logo {
  color: var(--primary) !important;
  letter-spacing: -0.02em;
}

body:has(.app) .btn-logout {
  border-color: rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

/* ── CAJA TABS ── */
body:has(.app) .tabs {
  background: var(--surface) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

body:has(.app) .tab {
  color: var(--on-surface-variant) !important;
  border-bottom-width: 2px !important;
  transition: color 0.2s, border-color 0.2s;
}

body:has(.app) .tab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* ── CAJA CARDS ── */
body:has(.app) .card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

body:has(.app) .card-titulo {
  color: var(--primary) !important;
}

/* ── KPIs — professional financial numbers ── */
body:has(.app) .kpi {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

body:has(.app) .kpi-num {
  color: var(--primary) !important;
  font-size: 1.4rem !important;
}

body:has(.app) .kpi-num.verde { color: var(--verde) !important; }
body:has(.app) .kpi-num.rojo  { color: var(--tertiary) !important; }

body:has(.app) .kpi-label {
  color: var(--on-surface-variant) !important;
}

/* ── STAT ROWS ── */
body:has(.app) .stat-row {
  border-bottom-color: var(--surface-container-low) !important;
}

body:has(.app) .stat-val { color: var(--primary) !important; }
body:has(.app) .stat-val.verde { color: var(--verde) !important; }
body:has(.app) .stat-val.rojo  { color: var(--tertiary) !important; }

body:has(.app) .medio-row {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius) !important;
}

body:has(.app) .seccion-titulo {
  color: var(--on-surface-variant) !important;
}

/* ── INPUTS ── */
body:has(.app) .inp {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

body:has(.app) .inp:focus {
  border-color: var(--primary) !important;
}

/* ── BUTTONS — ingreso=verde, egreso=tertiary red ── */
body:has(.app) .btn {
  border-radius: var(--radius) !important;
}

body:has(.app) .btn-naranja {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: white !important;
}

body:has(.app) .btn-rojo {
  background: var(--tertiary) !important;
  color: white !important;
}

body:has(.app) .btn-gris {
  background: transparent !important;
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  color: var(--on-surface-variant) !important;
}

/* ── TOAST ── */
body:has(.app) #toast {
  background: var(--on-surface) !important;
  color: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md);
}

body:has(.app) .loading {
  color: var(--on-surface-variant) !important;
}

/* ── DOMICILIO CARDS ── */
body:has(.app) .dom-card {
  background: var(--surface-container-low) !important;
  border: 1px solid rgba(214, 207, 200, 0.3) !important;
  border-radius: var(--radius) !important;
}

body:has(.app) .dom-card.listo {
  border-color: var(--verde) !important;
}

body:has(.app) .dom-card.camino {
  border-color: #6A1B9A !important;
}

body:has(.app) .dom-num { color: var(--primary) !important; }
body:has(.app) .dom-info { color: var(--on-surface-variant) !important; }

body:has(.app) .dom-badge { border-radius: var(--radius) !important; }

body:has(.app) .db {
  border-radius: var(--radius) !important;
}

/* ── MODALS ── */
body:has(.app) .mdo {
  background: rgba(29, 27, 24, 0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:has(.app) .mbox {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

body:has(.app) .mtit {
  color: var(--primary) !important;
}

body:has(.app) .mc2 {
  color: var(--on-surface-variant) !important;
}

body:has(.app) .mi {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

body:has(.app) .mi:focus {
  border-color: var(--primary) !important;
}

body:has(.app) .msel {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

body:has(.app) .mfl {
  color: var(--on-surface-variant) !important;
}

/* Wizard steps */
body:has(.app) .wms {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
}

body:has(.app) .wms.act {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: white !important;
}

body:has(.app) .wms.ok {
  background: var(--verde) !important;
  color: white !important;
}

/* Catálogo mini */
body:has(.app) .cchip {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
}

body:has(.app) .cchip.act {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  color: white !important;
}

body:has(.app) .pmc {
  background: var(--surface-container-low) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
}

body:has(.app) .pmc:hover {
  border-color: var(--primary) !important;
}

body:has(.app) .pm-n { color: var(--on-surface) !important; }
body:has(.app) .pm-p { color: var(--primary) !important; }

body:has(.app) .mc-bar {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius) !important;
}

body:has(.app) .mc-p { color: var(--primary) !important; }

body:has(.app) .qb {
  background: var(--surface-container-low) !important;
  border: 1px solid var(--outline-variant) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

/* Medios de pago */
body:has(.app) .mbtn {
  background: var(--surface-container-low) !important;
  border: 2px solid rgba(214, 207, 200, 0.3) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
}

body:has(.app) .mbtn.sel {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: rgba(158, 61, 0, 0.04) !important;
}

/* Sucursal panel (live switch) */
body:has(.app) #suc-panel-caja {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

/* ═══════════════════════════════════════════════════════════════
   MERCADO — Editorial Archive overrides
   Order hub: clear status badges, KPI dashboard, kanban board.
   ═══════════════════════════════════════════════════════════════ */

body:has(#nav) {
  --naranja:  #9E3D00;
  --naranja2: #C64F00;
  --verde:    #2E7D32;
  --rojo:     #AA2E2D;
  --azul:     #1565C0;
  --morado:   #6A1B9A;
  --amarillo: #E68A00;
  --gris:     #594238;
  --fondo:    #F8F3ED;
  --card:     #FFFFFF;
  --borde:    #D6CFC8;
  --texto:    #1D1B18;
  --texto2:   #594238;
  background: var(--surface) !important;
  color: var(--on-surface) !important;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif !important;
}

/* ── MERCADO LOGIN ── */
body:has(#nav) #login-screen {
  background: var(--surface) !important;
}

body:has(#nav) .login-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

body:has(#nav) .login-titulo { color: var(--primary) !important; }
body:has(#nav) .login-sub    { color: var(--on-surface-variant) !important; }

body:has(#nav) .login-input {
  background: var(--surface-container-highest) !important;
  border: 1px solid rgba(214, 207, 200, 0.2) !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface) !important;
}

body:has(#nav) .login-input:focus {
  border-color: var(--primary) !important;
}

body:has(#nav) .login-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
}

body:has(#nav) .login-err { color: var(--tertiary) !important; }

/* ── MERCADO HEADER ── */
body:has(#nav) #header {
  background: var(--surface) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

body:has(#nav) .h-titulo {
  color: var(--primary) !important;
  letter-spacing: -0.02em;
}

body:has(#nav) .h-stat {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
}

body:has(#nav) .h-stat span { color: var(--primary) !important; }
body:has(#nav) .h-fecha     { color: var(--on-surface-variant) !important; }

body:has(#nav) .h-btn {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
}

body:has(#nav) .h-btn:hover {
  color: var(--primary) !important;
  background: var(--surface-container-high) !important;
}

/* ── LATERAL NAV ── */
body:has(#nav) #nav {
  background: var(--surface-container-low) !important;
  border-right: none !important;
  box-shadow: 1px 0 0 var(--outline-variant);
}

body:has(#nav) .nav-btn {
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
  transition: background 0.15s, color 0.15s;
}

body:has(#nav) .nav-btn:hover {
  border-color: transparent !important;
  background: var(--surface-container-high) !important;
  color: var(--on-surface) !important;
}

body:has(#nav) .nav-btn.activo {
  background: rgba(158, 61, 0, 0.08) !important;
  border-color: transparent !important;
  color: var(--primary) !important;
}

body:has(#nav) .nav-sep {
  background: var(--outline-variant) !important;
}

/* ── KPI CARDS ── */
body:has(#nav) .kpi-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

body:has(#nav) .kpi-label { color: var(--on-surface-variant) !important; }
body:has(#nav) .kpi-val   { color: var(--primary) !important; font-size: 1.6rem !important; }
body:has(#nav) .kpi-sub   { color: var(--on-surface-variant) !important; }

body:has(#nav) .kpi-val.verde { color: var(--verde) !important; }
body:has(#nav) .kpi-val.azul  { color: #1976D2 !important; }
body:has(#nav) .kpi-val.rojo  { color: var(--tertiary) !important; }

/* ── PANEL CARDS (dashboard columns) ── */
body:has(#nav) .panel-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

body:has(#nav) .panel-titulo { color: var(--on-surface-variant) !important; }

/* Canal bars */
body:has(#nav) .canal-nom { color: var(--on-surface) !important; }
body:has(#nav) .canal-pct { color: var(--on-surface-variant) !important; }

body:has(#nav) .canal-bar-bg {
  background: var(--surface-container-high) !important;
}

body:has(#nav) .canal-bar {
  background: linear-gradient(90deg, var(--primary), var(--primary-container)) !important;
}

/* Mini tables */
body:has(#nav) .mini-tabla th {
  color: var(--on-surface-variant) !important;
  border-bottom-color: var(--outline-variant) !important;
}

body:has(#nav) .mini-tabla td {
  border-bottom-color: var(--surface-container-low) !important;
  color: var(--on-surface) !important;
}

body:has(#nav) .mini-tabla td:last-child { color: var(--primary) !important; }

/* ── TOGGLE VISTA ── */
body:has(#nav) .tv-btn {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
}

body:has(#nav) .tv-btn.activo {
  background: rgba(158, 61, 0, 0.08) !important;
  color: var(--primary) !important;
}

/* ── PEDIDO CARDS ── */
body:has(#nav) .ped-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px !important;
}

body:has(#nav) .ped-num     { color: var(--primary) !important; }
body:has(#nav) .ped-cliente { color: var(--on-surface) !important; }
body:has(#nav) .ped-meta    { color: var(--on-surface-variant) !important; }
body:has(#nav) .ped-total   { color: var(--on-surface) !important; }

body:has(#nav) .btn-ac { border-radius: var(--radius) !important; }
body:has(#nav) .btn-confirmar { background: var(--azul) !important; }
body:has(#nav) .btn-listo     { background: var(--verde) !important; }

/* ── STATUS BADGES — differentiated by color ── */
body:has(#nav) .badge { border-radius: var(--radius) !important; }

body:has(#nav) .b-nuevo     { background: rgba(21, 101, 192, 0.1) !important; color: #1976D2 !important; }
body:has(#nav) .b-prep      { background: rgba(158, 61, 0, 0.1) !important;  color: var(--primary) !important; }
body:has(#nav) .b-listo     { background: rgba(46, 125, 50, 0.1) !important;  color: var(--verde) !important; }
body:has(#nav) .b-camino    { background: rgba(106, 27, 154, 0.1) !important; color: #8E24AA !important; }
body:has(#nav) .b-entregado { background: var(--surface-container-high) !important; color: var(--on-surface-variant) !important; }
body:has(#nav) .b-anulado   { background: rgba(170, 46, 45, 0.1) !important;  color: var(--tertiary) !important; }
body:has(#nav) .b-canal     { background: var(--surface-container-low) !important; color: var(--on-surface-variant) !important; }

/* ── KANBAN BOARD ── */
body:has(#nav) .kanban-hdr {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  color: var(--on-surface) !important;
}

body:has(#nav) .kanban-hdr .count {
  background: linear-gradient(135deg, var(--primary), var(--primary-container)) !important;
  border-radius: var(--radius) !important;
}

body:has(#nav) .kanban-body {
  border: none !important;
  background: var(--surface-container-low) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: 0 1px 0 var(--outline-variant);
}

body:has(#nav) .kanban-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

body:has(#nav) .kanban-num     { color: var(--primary) !important; }
body:has(#nav) .kanban-cliente { color: var(--on-surface) !important; }
body:has(#nav) .kanban-meta    { color: var(--on-surface-variant) !important; }
body:has(#nav) .kanban-total   { color: var(--on-surface) !important; }

/* ── TABLA DESPACHADOS ── */
body:has(#nav) .tabla-desp th {
  color: var(--on-surface-variant) !important;
  border-bottom-color: var(--outline-variant) !important;
}

body:has(#nav) .tabla-desp td {
  border-bottom-color: var(--surface-container-low) !important;
  color: var(--on-surface) !important;
}

body:has(#nav) .tabla-desp tr:hover td {
  background: var(--surface-container-low) !important;
}

/* ── PREP CARDS (cocina) ── */
body:has(#nav) .prep-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

body:has(#nav) .timer-ok   { background: rgba(46, 125, 50, 0.08) !important; color: var(--verde) !important; }
body:has(#nav) .timer-warn { background: rgba(230, 138, 0, 0.08) !important; color: #B37400 !important; }
body:has(#nav) .timer-late { background: rgba(170, 46, 45, 0.08) !important; color: var(--tertiary) !important; }

/* ── MEDIOS DE PAGO CARDS ── */
body:has(#nav) .medio-card {
  background: var(--surface-container-lowest) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

body:has(#nav) .medio-label { color: var(--on-surface-variant) !important; }
body:has(#nav) .medio-val   { color: var(--on-surface) !important; }
body:has(#nav) .medio-sub   { color: var(--on-surface-variant) !important; }

/* ── MODAL DETALLE ── */
body:has(#nav) #modal-detalle {
  background: rgba(29, 27, 24, 0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:has(#nav) .detalle-card {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-ambient);
}

body:has(#nav) .detalle-titulo { color: var(--primary) !important; }

body:has(#nav) .detalle-resumen {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius) !important;
}

body:has(#nav) .detalle-resumen span  { color: var(--on-surface-variant) !important; }
body:has(#nav) .detalle-resumen strong { color: var(--on-surface) !important; }

body:has(#nav) .detalle-tabla th {
  color: var(--on-surface-variant) !important;
  border-bottom-color: var(--outline-variant) !important;
}

body:has(#nav) .detalle-tabla td {
  border-bottom-color: var(--surface-container-low) !important;
  color: var(--on-surface) !important;
}

body:has(#nav) .btn-detalle-cerrar {
  background: var(--surface-container-low) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  color: var(--on-surface-variant) !important;
}

body:has(#nav) .btn-det {
  border: 1px solid rgba(214, 207, 200, 0.4) !important;
  background: var(--surface-container-low) !important;
  color: var(--on-surface-variant) !important;
  border-radius: var(--radius) !important;
}

body:has(#nav) .btn-det:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ── CAJA BADGE ── */
body:has(#nav) .badge-abierta {
  background: rgba(46, 125, 50, 0.08) !important;
  color: var(--verde) !important;
  border: 1px solid rgba(46, 125, 50, 0.2) !important;
  border-radius: var(--radius) !important;
}

body:has(#nav) .badge-cerrada {
  background: rgba(170, 46, 45, 0.08) !important;
  color: var(--tertiary) !important;
  border: 1px solid rgba(170, 46, 45, 0.2) !important;
  border-radius: var(--radius) !important;
}

/* ── CAJA CERRADA SCREEN ── */
body:has(#nav) .cc-titulo { color: var(--on-surface) !important; }
body:has(#nav) .cc-sub    { color: var(--on-surface-variant) !important; }

body:has(#nav) .cc-link {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  border-radius: var(--radius) !important;
}

body:has(#nav) .cc-link:hover {
  background: rgba(158, 61, 0, 0.06) !important;
}

/* ── EMPTY STATE ── */
body:has(#nav) .empty-sec { color: var(--on-surface-variant) !important; }

/* ── TOAST ── */
body:has(#nav) #toast {
  background: var(--on-surface) !important;
  color: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════
   DOMICILIO — domicilio.html
   Scope: body:has(#btn-suc-dom)
   ═══════════════════════════════════════════════════════════════ */

body:has(#btn-suc-dom) {
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --azul: #1565C0;
  --morado: #6A1B9A;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#btn-suc-dom) #login-screen {
  background: var(--fondo);
}
body:has(#btn-suc-dom) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-suc-dom) .login-titulo {
  color: var(--naranja);
}
body:has(#btn-suc-dom) .login-sub {
  color: var(--texto2);
}
body:has(#btn-suc-dom) .login-input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .login-input:focus {
  border-color: var(--naranja);
}
body:has(#btn-suc-dom) .login-btn {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .login-err {
  color: var(--rojo);
}

/* ── Sucursal Selector ── */
body:has(#btn-suc-dom) #sucursal-screen {
  background: var(--fondo);
}
body:has(#btn-suc-dom) .suc-titulo {
  color: var(--naranja);
}
body:has(#btn-suc-dom) .suc-btn {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-suc-dom) .suc-btn:hover {
  border-color: var(--naranja);
  background: rgba(158,61,0,0.04);
}
body:has(#btn-suc-dom) .suc-nombre {
  color: var(--texto);
}
body:has(#btn-suc-dom) .suc-back {
  color: var(--texto2);
}

/* ── Header ── */
body:has(#btn-suc-dom) #header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-suc-dom) .h-titulo {
  color: var(--naranja);
}
body:has(#btn-suc-dom) .h-stat {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
}
body:has(#btn-suc-dom) .h-stat span {
  color: var(--naranja);
}
body:has(#btn-suc-dom) .h-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .h-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#btn-suc-dom) .h-btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}

/* ── Sucursal panel dropdown ── */
body:has(#btn-suc-dom) #suc-panel-dom {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.10);
}

/* ── Panels layout ── */
body:has(#btn-suc-dom) #panel-izq {
  border-right: none;
  box-shadow: 1px 0 0 #E6E2DC;
}

/* ── Panel header & filters ── */
body:has(#btn-suc-dom) .panel-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: #FFFFFF;
}
body:has(#btn-suc-dom) .panel-titulo {
  color: var(--texto);
}
body:has(#btn-suc-dom) .filtro-fecha {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .filtro-sel {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}

/* ── Order cards ── */
body:has(#btn-suc-dom) .pedido-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
  transition: box-shadow 0.15s, background 0.15s;
}
body:has(#btn-suc-dom) .pedido-card:hover {
  background: #F8F3ED;
  box-shadow: 0 4px 12px rgba(29,27,24,0.10);
}
body:has(#btn-suc-dom) .pedido-card.sel {
  border: 1px solid var(--naranja);
  background: rgba(158,61,0,0.04);
}
body:has(#btn-suc-dom) .pedido-card.listo {
  border: none;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06), inset 3px 0 0 var(--verde);
}
body:has(#btn-suc-dom) .pedido-card.camino {
  border: none;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06), inset 3px 0 0 var(--morado);
}
body:has(#btn-suc-dom) .pedido-num {
  color: var(--naranja);
}
body:has(#btn-suc-dom) .pedido-cliente {
  color: var(--texto);
}
body:has(#btn-suc-dom) .pedido-total {
  color: var(--naranja);
}
body:has(#btn-suc-dom) .pedido-info {
  color: var(--texto2);
}

/* ── Status badges ── */
body:has(#btn-suc-dom) .badge {
  border-radius: 4px;
}
body:has(#btn-suc-dom) .b-pagado {
  background: rgba(21,101,192,0.10);
  color: #1565C0;
}
body:has(#btn-suc-dom) .b-prep {
  background: rgba(158,61,0,0.10);
  color: #C64F00;
}
body:has(#btn-suc-dom) .b-listo {
  background: rgba(46,125,50,0.10);
  color: #2E7D32;
}
body:has(#btn-suc-dom) .b-camino {
  background: rgba(106,27,154,0.10);
  color: #6A1B9A;
}
body:has(#btn-suc-dom) .b-entregado {
  background: #E6E2DC;
  color: #5C5652;
}
body:has(#btn-suc-dom) .b-anulado {
  background: rgba(170,46,45,0.10);
  color: var(--rojo);
}
body:has(#btn-suc-dom) .b-plat {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
}
body:has(#btn-suc-dom) .dom-tag {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}

/* Sede badges */
body:has(#btn-suc-dom) .b-suc-a {
  background: rgba(21,101,192,0.08);
  color: #1565C0;
}
body:has(#btn-suc-dom) .b-suc-b {
  background: rgba(46,125,50,0.08);
  color: #2E7D32;
}

/* ── Action buttons on cards ── */
body:has(#btn-suc-dom) .btn-ac {
  border-radius: 4px;
}
body:has(#btn-suc-dom) .ac-despachar {
  background: var(--morado);
}
body:has(#btn-suc-dom) .ac-entregar {
  background: var(--verde);
}
body:has(#btn-suc-dom) .ac-asignar {
  background: var(--azul);
}
body:has(#btn-suc-dom) .ac-anular {
  border: 1px solid var(--rojo);
  color: var(--rojo);
}

/* ── Stats tabs ── */
body:has(#btn-suc-dom) .stats-tab {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .stats-tab.activo {
  border-color: var(--naranja);
  color: var(--naranja);
  background: rgba(158,61,0,0.05);
}

/* ── Wizard header & steps ── */
body:has(#btn-suc-dom) .wiz-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: #FFFFFF;
}
body:has(#btn-suc-dom) .wstep {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .wstep.activo {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-color: transparent;
  color: #FFFFFF;
}
body:has(#btn-suc-dom) .wstep.done {
  background: var(--verde);
  border-color: var(--verde);
  color: #FFFFFF;
}

/* ── Wizard body & footer ── */
body:has(#btn-suc-dom) .wiz-body {
  background: var(--fondo);
}
body:has(#btn-suc-dom) .wiz-footer {
  background: #FFFFFF;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}

/* ── Tipo entrega toggle ── */
body:has(#btn-suc-dom) .tipo-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .tipo-btn.activo {
  border-color: var(--naranja);
  color: var(--naranja);
  background: rgba(158,61,0,0.05);
}

/* ── Forms — address & phone fields emphasized ── */
body:has(#btn-suc-dom) .fg {
  margin-bottom: 12px;
}
body:has(#btn-suc-dom) .fl {
  color: var(--texto2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
body:has(#btn-suc-dom) .fi {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 10px 12px;
}
body:has(#btn-suc-dom) .fi:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}
body:has(#btn-suc-dom) .fsel {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 10px 12px;
}

/* Phone & address inputs — extra emphasis */
body:has(#btn-suc-dom) #p1-tel,
body:has(#btn-suc-dom) #p1-dir {
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 14px;
}

/* ── Autocomplete suggestions ── */
body:has(#btn-suc-dom) #sugerencias-tel {
  background: #FFFFFF !important;
  border: 1px solid #E6E2DC !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 4px 12px rgba(29,27,24,0.10) !important;
}
body:has(#btn-suc-dom) .sug-item {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-suc-dom) .sug-item:hover {
  background: rgba(158,61,0,0.05);
}
body:has(#btn-suc-dom) .sug-item:last-child {
  box-shadow: none;
}
body:has(#btn-suc-dom) .sug-nom {
  color: var(--texto);
}
body:has(#btn-suc-dom) .sug-sub {
  color: var(--texto2);
}

/* ── Product catalog (step 2) ── */
body:has(#btn-suc-dom) .cat-tab {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .cat-tab.activa {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-color: transparent;
  color: #FFFFFF;
}
body:has(#btn-suc-dom) .prod-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-suc-dom) .prod-card:hover {
  box-shadow: 0 4px 12px rgba(29,27,24,0.10);
}
body:has(#btn-suc-dom) .prod-nom {
  color: var(--texto);
}
body:has(#btn-suc-dom) .prod-precio {
  color: var(--naranja);
}

/* ── Mini cart ── */
body:has(#btn-suc-dom) .mini-carrito {
  background: #FFFFFF;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}
body:has(#btn-suc-dom) .mini-tit {
  color: var(--texto2);
}
body:has(#btn-suc-dom) .mini-nom {
  color: var(--texto);
}
body:has(#btn-suc-dom) .mini-precio {
  color: var(--naranja);
}
body:has(#btn-suc-dom) .qty-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}

/* ── Payment step (step 3) ── */
body:has(#btn-suc-dom) .resumen-box {
  background: #F8F3ED;
  border-radius: 4px;
}
body:has(#btn-suc-dom) .res-item {
  color: var(--texto);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-suc-dom) .res-item:last-child {
  box-shadow: none;
}
body:has(#btn-suc-dom) .res-totales {
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}
body:has(#btn-suc-dom) .res-row {
  color: var(--texto);
}
body:has(#btn-suc-dom) .res-row.big {
  color: var(--naranja);
  font-size: 1rem;
}
body:has(#btn-suc-dom) .medio-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  border-radius: 4px;
  color: var(--texto2);
}
body:has(#btn-suc-dom) .medio-btn.sel {
  border-color: var(--naranja);
  color: var(--naranja);
  background: rgba(158,61,0,0.05);
}

/* ── Primary & secondary buttons ── */
body:has(#btn-suc-dom) .btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .btn-sec {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .btn-sec:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#btn-suc-dom) .btn-verde {
  background: var(--verde);
  border-radius: 4px;
}
body:has(#btn-suc-dom) .btn-asig {
  background: var(--azul);
  border-radius: 4px;
}

/* ── Modals — glassmorphism ── */
body:has(#btn-suc-dom) .modal-ov {
  background: rgba(29,27,24,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:has(#btn-suc-dom) .modal-box {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(29,27,24,0.14);
}
body:has(#btn-suc-dom) .m-titulo {
  color: var(--texto);
}
body:has(#btn-suc-dom) .m-close {
  color: var(--texto2);
}

/* ── Driver items ── */
body:has(#btn-suc-dom) .driver-item {
  background: var(--fondo);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(29,27,24,0.04);
}
body:has(#btn-suc-dom) .driver-nom {
  color: var(--texto);
}
body:has(#btn-suc-dom) .driver-tel {
  color: var(--texto2);
}
body:has(#btn-suc-dom) .driver-badge {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
  border-radius: 4px;
}

/* ── Detail panel ── */
body:has(#btn-suc-dom) .det-hdr {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-suc-dom) .det-body {
  background: var(--fondo);
}
body:has(#btn-suc-dom) .det-section {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-suc-dom) .det-stit {
  color: var(--texto2);
}
body:has(#btn-suc-dom) .det-row span:first-child {
  color: var(--texto2);
}
body:has(#btn-suc-dom) .det-row span:last-child {
  color: var(--texto);
}
body:has(#btn-suc-dom) .det-item {
  color: var(--texto);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-suc-dom) .det-item:last-child {
  box-shadow: none;
}
body:has(#btn-suc-dom) .det-total-row {
  color: var(--naranja);
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}
body:has(#btn-suc-dom) .det-footer {
  background: #FFFFFF;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}

/* ── Empty state ── */
body:has(#btn-suc-dom) .empty {
  color: var(--texto2);
}

/* ── Toast ── */
body:has(#btn-suc-dom) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#btn-suc-dom) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN — admin.html
   Scope: body:has(#modal-prod-wizard)
   ═══════════════════════════════════════════════════════════════ */

body:has(#modal-prod-wizard) {
  --crema: #FEF9F3;
  --cafe: #1D1B18;
  --cafe2: #5C5652;
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#modal-prod-wizard) #login-screen {
  background: var(--fondo);
}
body:has(#modal-prod-wizard) .logo-login h1 {
  color: var(--naranja);
}
body:has(#modal-prod-wizard) .logo-login p {
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#modal-prod-wizard) .login-card input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .login-card input:focus {
  border-color: var(--naranja);
}
body:has(#modal-prod-wizard) .btn-login {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .login-error {
  color: var(--rojo);
}

/* ── Header ── */
body:has(#modal-prod-wizard) header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-prod-wizard) .header-logo {
  color: var(--naranja);
}
body:has(#modal-prod-wizard) .header-sede {
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .btn-logout {
  background: transparent;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .btn-logout:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#modal-prod-wizard) #btn-cambiar-sede-admin {
  background: var(--fondo) !important;
  border: 1px solid #E6E2DC !important;
  color: var(--texto2) !important;
  border-radius: 4px !important;
}

/* ── Admin grid ── */
body:has(#modal-prod-wizard) .admin-grid {
  background: var(--fondo);
}
body:has(#modal-prod-wizard) .admin-section-title {
  color: var(--texto2);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-prod-wizard) .admin-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
  transition: box-shadow 0.2s, transform 0.2s;
}
body:has(#modal-prod-wizard) .admin-card:hover {
  border: none;
  box-shadow: 0 4px 16px rgba(29,27,24,0.10);
  transform: translateY(-2px);
}
body:has(#modal-prod-wizard) .admin-card.disabled {
  opacity: 0.35;
}
body:has(#modal-prod-wizard) .admin-card.disabled:hover {
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
  transform: none;
}
body:has(#modal-prod-wizard) .admin-nombre {
  color: var(--texto);
}
body:has(#modal-prod-wizard) .admin-sub {
  color: var(--texto2);
}

/* ── Modal overlays — glassmorphism ── */
body:has(#modal-prod-wizard) #modal-prod-wizard {
  background: rgba(29,27,24,0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:has(#modal-prod-wizard) #modal-caja,
body:has(#modal-prod-wizard) #modal-config,
body:has(#modal-prod-wizard) #modal-inventario,
body:has(#modal-prod-wizard) #modal-estadisticas,
body:has(#modal-prod-wizard) #modal-historico,
body:has(#modal-prod-wizard) #modal-ventas,
body:has(#modal-prod-wizard) #modal-sala,
body:has(#modal-prod-wizard) #modal-detalle-orden,
body:has(#modal-prod-wizard) #modal-categorias,
body:has(#modal-prod-wizard) #modal-combos {
  background: rgba(29,27,24,0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Modal cards ── */
body:has(#modal-prod-wizard) .caja-card,
body:has(#modal-prod-wizard) .config-card,
body:has(#modal-prod-wizard) .inv-card,
body:has(#modal-prod-wizard) .stats-card,
body:has(#modal-prod-wizard) .hist-card,
body:has(#modal-prod-wizard) .ventas-card,
body:has(#modal-prod-wizard) .cat-card,
body:has(#modal-prod-wizard) .detalle-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(29,27,24,0.14);
}

/* ── Modal titles ── */
body:has(#modal-prod-wizard) .caja-titulo,
body:has(#modal-prod-wizard) .config-titulo,
body:has(#modal-prod-wizard) .inv-titulo,
body:has(#modal-prod-wizard) .stats-titulo,
body:has(#modal-prod-wizard) .hist-titulo,
body:has(#modal-prod-wizard) .ventas-titulo,
body:has(#modal-prod-wizard) .cat-titulo {
  color: var(--naranja);
}

/* ── Tabs ── */
body:has(#modal-prod-wizard) .caja-tabs,
body:has(#modal-prod-wizard) .config-tabs {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-prod-wizard) .caja-tab,
body:has(#modal-prod-wizard) .config-tab {
  background: transparent;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .caja-tab.active,
body:has(#modal-prod-wizard) .config-tab.active {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-color: transparent;
  color: #FFFFFF;
}

/* ── Caja stats ── */
body:has(#modal-prod-wizard) .caja-stat {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .caja-stat-num {
  color: var(--naranja);
}
body:has(#modal-prod-wizard) .caja-stat.verde .caja-stat-num {
  color: var(--verde);
}
body:has(#modal-prod-wizard) .caja-stat.rojo .caja-stat-num {
  color: var(--rojo);
}
body:has(#modal-prod-wizard) .caja-stat-label {
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .caja-seccion {
  color: var(--texto2);
}

/* ── Tables — alternating tonal rows, no borders ── */
body:has(#modal-prod-wizard) .caja-tabla,
body:has(#modal-prod-wizard) .inv-tabla,
body:has(#modal-prod-wizard) .stats-tabla,
body:has(#modal-prod-wizard) .hist-tabla,
body:has(#modal-prod-wizard) .ventas-tabla {
  border-collapse: separate;
  border-spacing: 0;
}
body:has(#modal-prod-wizard) .caja-tabla th,
body:has(#modal-prod-wizard) .inv-tabla th,
body:has(#modal-prod-wizard) .stats-tabla th,
body:has(#modal-prod-wizard) .hist-tabla th,
body:has(#modal-prod-wizard) .ventas-tabla th {
  color: var(--texto2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  padding: 8px 10px;
  background: transparent;
}
body:has(#modal-prod-wizard) .caja-tabla td,
body:has(#modal-prod-wizard) .inv-tabla td,
body:has(#modal-prod-wizard) .stats-tabla td,
body:has(#modal-prod-wizard) .hist-tabla td,
body:has(#modal-prod-wizard) .ventas-tabla td {
  border-bottom: none;
  padding: 8px 10px;
  color: var(--texto);
}
/* Alternating row tonal shift */
body:has(#modal-prod-wizard) .caja-tabla tr:nth-child(even) td,
body:has(#modal-prod-wizard) .inv-tabla tr:nth-child(even) td,
body:has(#modal-prod-wizard) .stats-tabla tr:nth-child(even) td,
body:has(#modal-prod-wizard) .hist-tabla tr:nth-child(even) td,
body:has(#modal-prod-wizard) .ventas-tabla tr:nth-child(even) td {
  background: #F8F3ED;
}
body:has(#modal-prod-wizard) .caja-tabla tr:nth-child(odd) td,
body:has(#modal-prod-wizard) .inv-tabla tr:nth-child(odd) td,
body:has(#modal-prod-wizard) .stats-tabla tr:nth-child(odd) td,
body:has(#modal-prod-wizard) .hist-tabla tr:nth-child(odd) td,
body:has(#modal-prod-wizard) .ventas-tabla tr:nth-child(odd) td {
  background: transparent;
}
body:has(#modal-prod-wizard) .caja-tabla .num,
body:has(#modal-prod-wizard) .inv-tabla .num,
body:has(#modal-prod-wizard) .stats-tabla .num,
body:has(#modal-prod-wizard) .hist-tabla .num,
body:has(#modal-prod-wizard) .ventas-tabla .num {
  color: var(--naranja);
}

/* ── Inputs & selects ── */
body:has(#modal-prod-wizard) .caja-input,
body:has(#modal-prod-wizard) .config-input {
  background: #F8F3ED;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .caja-input:focus,
body:has(#modal-prod-wizard) .config-input:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}
body:has(#modal-prod-wizard) .config-select {
  background: #F8F3ED;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}

/* ── Buttons ── */
body:has(#modal-prod-wizard) .caja-btn {
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .caja-btn-naranja {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  color: #FFFFFF;
}
body:has(#modal-prod-wizard) .caja-btn-rojo {
  background: var(--rojo);
  color: #FFFFFF;
}
body:has(#modal-prod-wizard) .caja-btn-gris {
  background: #E6E2DC;
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .config-btn {
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .config-btn-naranja {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  color: #FFFFFF;
}
body:has(#modal-prod-wizard) .config-btn-gris {
  background: #E6E2DC;
  color: var(--texto2);
}

/* ── User rows ── */
body:has(#modal-prod-wizard) .user-row {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .user-nombre {
  color: var(--texto);
}
body:has(#modal-prod-wizard) .user-rol {
  color: var(--texto2);
}

/* ── Role badges ── */
body:has(#modal-prod-wizard) .rol-badge {
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .rol-MAESTRO {
  background: rgba(158,61,0,0.10);
  color: var(--naranja);
}
body:has(#modal-prod-wizard) .rol-CAJERO {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#modal-prod-wizard) .rol-COCINA {
  background: #E6E2DC;
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .rol-TURNERO {
  background: rgba(21,101,192,0.08);
  color: #1565C0;
}
body:has(#modal-prod-wizard) .rol-DOMICILIO {
  background: rgba(106,27,154,0.08);
  color: #6A1B9A;
}

/* ── Categories ── */
body:has(#modal-prod-wizard) .cat-row {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .cat-nombre {
  color: var(--texto);
}
body:has(#modal-prod-wizard) .cat-meta {
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .cat-form {
  background: #F8F3ED;
  border: 1px solid var(--naranja);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .cat-form input,
body:has(#modal-prod-wizard) .cat-form select {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .cat-form input:focus,
body:has(#modal-prod-wizard) .cat-form select:focus {
  border-color: var(--naranja);
}

/* ── Product wizard ── */
body:has(#modal-prod-wizard) .wiz-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(29,27,24,0.14);
}
body:has(#modal-prod-wizard) .wiz-titulo {
  color: var(--naranja);
}
body:has(#modal-prod-wizard) .wiz-steps {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-prod-wizard) .wiz-step {
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .wiz-step.active {
  color: var(--naranja);
  background: rgba(158,61,0,0.06);
}
body:has(#modal-prod-wizard) .wiz-step.done {
  color: var(--verde);
}
body:has(#modal-prod-wizard) .wiz-inp {
  background: #F8F3ED;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .wiz-inp:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}
body:has(#modal-prod-wizard) .wiz-label {
  color: var(--texto2);
  font-weight: 600;
}
body:has(#modal-prod-wizard) .wiz-check {
  color: var(--texto);
}
body:has(#modal-prod-wizard) .wiz-check input {
  accent-color: var(--naranja);
}
body:has(#modal-prod-wizard) .wiz-footer {
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}
body:has(#modal-prod-wizard) .wiz-btn-pri {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .wiz-btn-sec {
  background: transparent;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .wiz-grupo {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .wiz-opcion {
  color: var(--texto);
}
body:has(#modal-prod-wizard) .wiz-opcion small {
  color: var(--texto2);
}

/* ── Inventory filters ── */
body:has(#modal-prod-wizard) .inv-filtros input,
body:has(#modal-prod-wizard) .inv-filtros select {
  background: #F8F3ED;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .inv-precio-input {
  background: #F8F3ED;
  border: 1px solid #E6E2DC;
  color: var(--naranja);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .inv-toggle.on {
  background: var(--verde);
}
body:has(#modal-prod-wizard) .inv-toggle.off {
  background: #E6E2DC;
}

/* ── Margin badges ── */
body:has(#modal-prod-wizard) .margen-badge {
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .margen-bueno {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#modal-prod-wizard) .margen-medio {
  background: rgba(158,61,0,0.10);
  color: #C64F00;
}
body:has(#modal-prod-wizard) .margen-bajo {
  background: rgba(170,46,45,0.10);
  color: var(--rojo);
}

/* ── Stats KPIs ── */
body:has(#modal-prod-wizard) .stats-kpi {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .stats-kpi-num {
  color: var(--naranja);
}
body:has(#modal-prod-wizard) .stats-kpi-label {
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .stats-seccion {
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .stats-bar {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .stats-atajo {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .stats-atajo:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#modal-prod-wizard) .stats-dia-bar-fill {
  background: linear-gradient(180deg, #C64F00, #9E3D00);
}
body:has(#modal-prod-wizard) .stats-dia-label {
  color: var(--texto2);
}

/* ── History filters & badges ── */
body:has(#modal-prod-wizard) .hist-filtros input,
body:has(#modal-prod-wizard) .hist-filtros select {
  background: #F8F3ED;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .hist-estado {
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .hist-estado.PAGADO {
  background: rgba(158,61,0,0.10);
  color: #C64F00;
}
body:has(#modal-prod-wizard) .hist-estado.LISTO {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#modal-prod-wizard) .hist-estado.ENTREGADO {
  background: rgba(46,125,50,0.08);
  color: var(--verde);
}
body:has(#modal-prod-wizard) .hist-estado.ANULADO {
  background: rgba(170,46,45,0.10);
  color: var(--rojo);
}
body:has(#modal-prod-wizard) .hist-estado.NUEVO {
  background: #E6E2DC;
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .btn-hist-anular {
  border: 1px solid var(--rojo);
  color: var(--rojo);
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .btn-hist-ver {
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}

/* ── Ventas stats ── */
body:has(#modal-prod-wizard) .ventas-stat {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
}
body:has(#modal-prod-wizard) .ventas-stat-num {
  color: var(--naranja);
}
body:has(#modal-prod-wizard) .ventas-stat-label {
  color: var(--texto2);
}
body:has(#modal-prod-wizard) .ventas-seccion {
  color: var(--texto2);
}

/* ── Loading ── */
body:has(#modal-prod-wizard) .loading {
  color: var(--texto2);
}

/* ── Toast ── */
body:has(#modal-prod-wizard) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#modal-prod-wizard) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   CLIENTES — clientes.html
   Scope: body:has(#btn-nuevo-cli)
   ═══════════════════════════════════════════════════════════════ */

body:has(#btn-nuevo-cli) {
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --azul: #1565C0;
  --morado: #6A1B9A;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#btn-nuevo-cli) #login-screen {
  background: var(--fondo);
}
body:has(#btn-nuevo-cli) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-nuevo-cli) .login-titulo {
  color: var(--naranja);
}
body:has(#btn-nuevo-cli) .login-sub {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .login-input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .login-input:focus {
  border-color: var(--naranja);
}
body:has(#btn-nuevo-cli) .login-btn {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .login-err {
  color: var(--rojo);
}

/* ── Header ── */
body:has(#btn-nuevo-cli) #header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-nuevo-cli) .h-titulo {
  color: var(--naranja);
}
body:has(#btn-nuevo-cli) .h-stat {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .h-stat span {
  color: var(--naranja);
}
body:has(#btn-nuevo-cli) .h-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .h-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#btn-nuevo-cli) .h-btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}

/* ── Main tabs (Clientes / Proveedores) ── */
body:has(#btn-nuevo-cli) .main-tab {
  background: transparent;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .main-tab.activo {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-color: transparent;
  color: #FFFFFF;
}
body:has(#btn-nuevo-cli) .main-tab:hover:not(.activo) {
  border-color: var(--naranja);
  color: var(--naranja);
}

/* ── Left panel ── */
body:has(#btn-nuevo-cli) #panel-izq {
  border-right: none;
  box-shadow: 1px 0 0 #E6E2DC;
}
body:has(#btn-nuevo-cli) .panel-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: #FFFFFF;
}
body:has(#btn-nuevo-cli) #buscador {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) #buscador:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}

/* ── Client cards ── */
body:has(#btn-nuevo-cli) .cli-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
  transition: box-shadow 0.15s;
}
body:has(#btn-nuevo-cli) .cli-card:hover {
  box-shadow: 0 4px 12px rgba(29,27,24,0.10);
}
body:has(#btn-nuevo-cli) .cli-card.activo {
  box-shadow: 0 2px 8px rgba(29,27,24,0.06), inset 3px 0 0 var(--naranja);
}
body:has(#btn-nuevo-cli) .cli-avatar {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
}
body:has(#btn-nuevo-cli) .cli-nombre {
  color: var(--texto);
}
body:has(#btn-nuevo-cli) .cli-tel {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .cli-stats {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .cli-stats span {
  color: var(--naranja);
}

/* ── Empty state ── */
body:has(#btn-nuevo-cli) .empty-state {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .det-vacio {
  color: var(--texto2);
}

/* ── Detail header ── */
body:has(#btn-nuevo-cli) .det-hdr {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-nuevo-cli) .det-avatar-big {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
}
body:has(#btn-nuevo-cli) .det-nombre {
  color: var(--texto);
}
body:has(#btn-nuevo-cli) .det-sub {
  color: var(--texto2);
}

/* ── Tabs ── */
body:has(#btn-nuevo-cli) .tabs {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-nuevo-cli) .tab {
  color: var(--texto2);
  border-radius: 4px 4px 0 0;
}
body:has(#btn-nuevo-cli) .tab.activo {
  background: var(--fondo);
  color: var(--naranja);
  border-color: #E6E2DC;
  border-bottom: none;
}

/* ── Tab body ── */
body:has(#btn-nuevo-cli) .tab-body {
  background: var(--fondo);
}

/* ── Stat cards ── */
body:has(#btn-nuevo-cli) .stat-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-nuevo-cli) .stat-label {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .stat-val {
  color: var(--naranja);
}
body:has(#btn-nuevo-cli) .stat-sub {
  color: var(--texto2);
}

/* ── Direcciones ── */
body:has(#btn-nuevo-cli) .dir-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-nuevo-cli) .dir-nombre {
  color: var(--texto);
}
body:has(#btn-nuevo-cli) .dir-texto {
  color: var(--texto2);
}

/* ── Historial ── */
body:has(#btn-nuevo-cli) .ped-row {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-nuevo-cli) .ped-num {
  color: var(--naranja);
}
body:has(#btn-nuevo-cli) .ped-fecha {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .ped-desc {
  color: var(--texto);
}
body:has(#btn-nuevo-cli) .ped-total {
  color: var(--texto);
}
body:has(#btn-nuevo-cli) .ped-medio {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .badge-est {
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .be-entregado {
  background: #E6E2DC;
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .be-listo {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#btn-nuevo-cli) .be-prep {
  background: rgba(158,61,0,0.10);
  color: #C64F00;
}

/* ── Puntos / Crédito ── */
body:has(#btn-nuevo-cli) .puntos-hero {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .puntos-num {
  color: #FFFFFF;
}
body:has(#btn-nuevo-cli) .puntos-label {
  color: rgba(255,255,255,0.8);
}
body:has(#btn-nuevo-cli) .credito-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-nuevo-cli) .credito-label {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .credito-val {
  color: var(--texto);
}
body:has(#btn-nuevo-cli) .btn-ajustar {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .btn-ajustar:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#btn-nuevo-cli) .sin-puntos {
  color: var(--texto2);
}

/* ── Forms ── */
body:has(#btn-nuevo-cli) .fl {
  color: var(--texto2);
  font-weight: 600;
}
body:has(#btn-nuevo-cli) .fi {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .fi:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}
body:has(#btn-nuevo-cli) .btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .btn-sec {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}

/* ── Modals — glassmorphism ── */
body:has(#btn-nuevo-cli) .modal {
  background: rgba(29,27,24,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:has(#btn-nuevo-cli) .modal-box {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(29,27,24,0.14);
}
body:has(#btn-nuevo-cli) .modal-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-nuevo-cli) .modal-titulo {
  color: var(--texto);
}
body:has(#btn-nuevo-cli) .modal-cerrar {
  color: var(--texto2);
}
body:has(#btn-nuevo-cli) .modal-body {
  background: var(--fondo);
}
body:has(#btn-nuevo-cli) .modal-footer {
  background: #FFFFFF;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}

/* ── Proveedores table — tonal alternating rows ── */
body:has(#btn-nuevo-cli) .prov-table {
  border-collapse: separate;
  border-spacing: 0;
}
body:has(#btn-nuevo-cli) .prov-table th {
  color: var(--texto2);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  padding: 8px 10px;
  background: transparent;
}
body:has(#btn-nuevo-cli) .prov-table td {
  border-bottom: none;
  padding: 9px 10px;
  color: var(--texto);
}
body:has(#btn-nuevo-cli) .prov-table tr:nth-child(even) td {
  background: #F8F3ED;
}
body:has(#btn-nuevo-cli) .prov-table tr:hover td {
  background: rgba(158,61,0,0.04);
}
body:has(#btn-nuevo-cli) .prov-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-nuevo-cli) .prov-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#btn-nuevo-cli) .prov-btn.del:hover {
  border-color: var(--rojo);
  color: var(--rojo);
}

/* ── Proveedores search ── */
body:has(#btn-nuevo-cli) #buscador-prov {
  background: var(--fondo) !important;
  border: 1px solid #E6E2DC !important;
  color: var(--texto) !important;
  border-radius: 4px !important;
}

/* ── Toast ── */
body:has(#btn-nuevo-cli) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#btn-nuevo-cli) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   INVENTARIO — inventario.html
   Scope: body:has(#nav-lat)
   ═══════════════════════════════════════════════════════════════ */

body:has(#nav-lat) {
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --amarillo: #F9A825;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#nav-lat) #login-screen {
  background: var(--fondo);
}
body:has(#nav-lat) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#nav-lat) .login-titulo {
  color: var(--naranja);
}
body:has(#nav-lat) .login-sub {
  color: var(--texto2);
}
body:has(#nav-lat) .login-input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#nav-lat) .login-input:focus {
  border-color: var(--naranja);
}
body:has(#nav-lat) .login-btn {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#nav-lat) .login-err {
  color: var(--rojo);
}

/* ── Header ── */
body:has(#nav-lat) #header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#nav-lat) .h-titulo {
  color: var(--naranja);
}
body:has(#nav-lat) .h-seccion {
  color: var(--texto2);
}
body:has(#nav-lat) .h-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#nav-lat) .h-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#nav-lat) .h-btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}

/* ── Side nav ── */
body:has(#nav-lat) #nav-lat {
  background: #FFFFFF;
  border-right: none;
  box-shadow: 1px 0 0 #E6E2DC;
}
body:has(#nav-lat) .nav-item {
  color: var(--texto2);
  border: 1px solid transparent;
  border-radius: 4px;
}
body:has(#nav-lat) .nav-item:hover {
  background: #F8F3ED;
  color: var(--texto);
}
body:has(#nav-lat) .nav-item.activo {
  background: rgba(158,61,0,0.06);
  color: var(--naranja);
  border-color: transparent;
}

/* ── Toolbar ── */
body:has(#nav-lat) .toolbar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#nav-lat) .buscador {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#nav-lat) .buscador:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}
body:has(#nav-lat) .toolbar-titulo {
  color: var(--texto);
}

/* ── Tables — tonal alternating rows ── */
body:has(#nav-lat) table {
  border-collapse: separate;
  border-spacing: 0;
}
body:has(#nav-lat) thead th {
  color: var(--texto2);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: transparent;
}
body:has(#nav-lat) tbody tr {
  border-bottom: none;
}
body:has(#nav-lat) tbody tr:nth-child(even) td {
  background: #F8F3ED;
}
body:has(#nav-lat) tbody tr:nth-child(odd) td {
  background: transparent;
}
body:has(#nav-lat) tbody tr:hover td {
  background: rgba(158,61,0,0.04);
}
body:has(#nav-lat) tbody td {
  color: var(--texto);
}
body:has(#nav-lat) .td-nombre {
  color: var(--texto);
}

/* ── Alert badges — stock bajo = tertiary red ── */
body:has(#nav-lat) .badge-alerta {
  border-radius: 4px;
  border: none;
}
body:has(#nav-lat) .ba-ok {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#nav-lat) .ba-bajo {
  background: rgba(170,46,45,0.10);
  color: #AA2E2D;
}
body:has(#nav-lat) .ba-agotado {
  background: rgba(170,46,45,0.18);
  color: #AA2E2D;
  font-weight: 800;
}

/* ── Active/inactive badges ── */
body:has(#nav-lat) .badge-activo {
  border-radius: 4px;
}
body:has(#nav-lat) .ba-si {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#nav-lat) .ba-no {
  background: #E6E2DC;
  color: var(--texto2);
}

/* ── Icon buttons ── */
body:has(#nav-lat) .btn-ico {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#nav-lat) .btn-ico:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#nav-lat) .btn-ico.rojo:hover {
  border-color: var(--rojo);
  color: var(--rojo);
}

/* ── Empty & prox states ── */
body:has(#nav-lat) .empty-state {
  color: var(--texto2);
}
body:has(#nav-lat) .prox {
  color: var(--texto2);
}
body:has(#nav-lat) .prox-titulo {
  color: var(--texto);
}

/* ── Modal — glassmorphism ── */
body:has(#nav-lat) .modal {
  background: rgba(29,27,24,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:has(#nav-lat) .modal-box {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(29,27,24,0.14);
}
body:has(#nav-lat) .modal-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#nav-lat) .modal-titulo {
  color: var(--texto);
}
body:has(#nav-lat) .modal-cerrar {
  color: var(--texto2);
}
body:has(#nav-lat) .modal-body {
  background: var(--fondo);
}
body:has(#nav-lat) .modal-footer {
  background: #FFFFFF;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}

/* ── Modal tabs ── */
body:has(#nav-lat) .modal-tabs {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: #FFFFFF;
}
body:has(#nav-lat) .modal-tab {
  color: var(--texto2);
  border-bottom: 2px solid transparent;
}
body:has(#nav-lat) .modal-tab:hover {
  color: var(--texto);
}
body:has(#nav-lat) .modal-tab.activo {
  color: var(--naranja);
  border-bottom-color: var(--naranja);
}

/* ── Forms ── */
body:has(#nav-lat) .fl {
  color: var(--texto2);
  font-weight: 600;
}
body:has(#nav-lat) .fi {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#nav-lat) .fi:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}
body:has(#nav-lat) .btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#nav-lat) .btn-sec {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}

/* ── Stock alert in modal ── */
body:has(#nav-lat) .alerta-stock {
  background: rgba(170,46,45,0.06);
  border: 1px solid rgba(170,46,45,0.15);
  color: #AA2E2D;
  border-radius: 4px;
}

/* ── Movement type badges ── */
body:has(#nav-lat) .badge-mov {
  border-radius: 4px;
  border: none;
}
body:has(#nav-lat) .bm-entrada {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#nav-lat) .bm-salida {
  background: rgba(170,46,45,0.10);
  color: #AA2E2D;
}
body:has(#nav-lat) .bm-ajuste {
  background: rgba(21,101,192,0.10);
  color: #1565C0;
}
body:has(#nav-lat) .bm-merma {
  background: rgba(158,61,0,0.10);
  color: #C64F00;
}

/* ── Recipe tags ── */
body:has(#nav-lat) .tag-receta {
  background: rgba(21,101,192,0.08);
  color: #1565C0;
  border: none;
  border-radius: 4px;
}
body:has(#nav-lat) .tag-sin-receta {
  background: #E6E2DC;
  color: var(--texto2);
  border: none;
  border-radius: 4px;
}

/* ── Ingredient row in recipe modal ── */
body:has(#nav-lat) .ing-fila select,
body:has(#nav-lat) .ing-fila input {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#nav-lat) .ing-fila select:focus,
body:has(#nav-lat) .ing-fila input:focus {
  border-color: var(--naranja);
}
body:has(#nav-lat) .btn-del-ing {
  border: 1px solid #E6E2DC;
  color: var(--rojo);
  border-radius: 4px;
}
body:has(#nav-lat) .btn-del-ing:hover {
  background: rgba(170,46,45,0.06);
}

/* ── Requirement badges ── */
body:has(#nav-lat) .badge-req {
  border-radius: 4px;
  border: none;
}
body:has(#nav-lat) .br-pendiente {
  background: rgba(249,168,37,0.12);
  color: #D48C00;
}
body:has(#nav-lat) .br-aprobado {
  background: rgba(21,101,192,0.10);
  color: #1565C0;
}
body:has(#nav-lat) .br-recibido {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#nav-lat) .br-cancelado {
  background: #E6E2DC;
  color: var(--texto2);
}

/* ── Reception split panel ── */
body:has(#nav-lat) #rec-izq {
  border-right: none;
  box-shadow: 1px 0 0 #E6E2DC;
}
body:has(#nav-lat) .rec-row {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#nav-lat) .rec-row:hover {
  box-shadow: 0 4px 12px rgba(29,27,24,0.10);
}
body:has(#nav-lat) .rec-row.sel {
  box-shadow: 0 2px 8px rgba(29,27,24,0.06), inset 3px 0 0 var(--naranja);
}
body:has(#nav-lat) .rec-row-nombre {
  color: var(--texto);
}
body:has(#nav-lat) .rec-row-sub {
  color: var(--texto2);
}
body:has(#nav-lat) .rec-det-vacio {
  color: var(--texto2);
}
body:has(#nav-lat) .rec-det-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#nav-lat) .rec-det-titulo {
  color: var(--texto);
}
body:has(#nav-lat) .rec-det-sub {
  color: var(--texto2);
}
body:has(#nav-lat) .rec-det-footer {
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}
body:has(#nav-lat) .rec-item-fila {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#nav-lat) .rec-item-fila:last-child {
  box-shadow: none;
}
body:has(#nav-lat) .rec-qty-in {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#nav-lat) .rec-qty-in:focus {
  border-color: var(--naranja);
}

/* ── Filter selects ── */
body:has(#nav-lat) .filtro-sel {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#nav-lat) .filtro-date {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}

/* ── Toast ── */
body:has(#nav-lat) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#nav-lat) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   REMISIONES — remisiones.html
   Scope: body:has(#modal-crear)
   ═══════════════════════════════════════════════════════════════ */

body:has(#modal-crear) {
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --amarillo: #D48C00;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#modal-crear) #login-screen {
  background: var(--fondo);
}
body:has(#modal-crear) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#modal-crear) .login-titulo {
  color: var(--naranja);
}
body:has(#modal-crear) .login-sub {
  color: var(--texto2);
}
body:has(#modal-crear) .login-input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-crear) .login-input:focus {
  border-color: var(--naranja);
}
body:has(#modal-crear) .login-btn {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#modal-crear) .login-err {
  color: var(--rojo);
}

/* ── Header ── */
body:has(#modal-crear) #header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-crear) .h-titulo {
  color: var(--naranja);
}
body:has(#modal-crear) .h-seccion {
  color: var(--texto2);
}
body:has(#modal-crear) .h-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-crear) .h-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#modal-crear) .h-btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}

/* ── Tabs ── */
body:has(#modal-crear) .tabs {
  background: var(--fondo);
}
body:has(#modal-crear) .tab {
  color: var(--texto2);
  border-radius: 4px 4px 0 0;
}
body:has(#modal-crear) .tab:hover {
  color: var(--texto);
}
body:has(#modal-crear) .tab.active {
  background: #FFFFFF;
  color: var(--naranja);
  border-color: #E6E2DC;
  border-bottom: none;
}

/* ── Toolbar ── */
body:has(#modal-crear) .toolbar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-crear) .fi {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-crear) .fi:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}

/* ── Table — tonal alternating rows ── */
body:has(#modal-crear) table {
  border-collapse: separate;
  border-spacing: 0;
}
body:has(#modal-crear) thead th {
  color: var(--texto2);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: transparent;
}
body:has(#modal-crear) tbody tr {
  border-bottom: none;
}
body:has(#modal-crear) tbody tr:nth-child(even) td {
  background: #F8F3ED;
}
body:has(#modal-crear) tbody tr:nth-child(odd) td {
  background: transparent;
}
body:has(#modal-crear) tbody tr:hover td {
  background: rgba(158,61,0,0.04);
}
body:has(#modal-crear) tbody td {
  color: var(--texto);
}

/* ── Status badges ── */
body:has(#modal-crear) .badge {
  border-radius: 4px;
  border: none;
}
body:has(#modal-crear) .b-pendiente {
  background: rgba(212,140,0,0.10);
  color: #D48C00;
}
body:has(#modal-crear) .b-confirmado {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#modal-crear) .b-incompleto {
  background: rgba(170,46,45,0.10);
  color: #AA2E2D;
}

/* ── Icon buttons ── */
body:has(#modal-crear) .btn-ico {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-crear) .btn-ico:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}

/* ── Empty state ── */
body:has(#modal-crear) .empty-state {
  color: var(--texto2);
}

/* ── Modals — glassmorphism ── */
body:has(#modal-crear) .modal {
  background: rgba(29,27,24,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:has(#modal-crear) .modal-box {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(29,27,24,0.14);
}
body:has(#modal-crear) .modal-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-crear) .modal-titulo {
  color: var(--texto);
}
body:has(#modal-crear) .modal-cerrar {
  color: var(--texto2);
}
body:has(#modal-crear) .modal-body {
  background: var(--fondo);
}
body:has(#modal-crear) .modal-footer {
  background: #FFFFFF;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}

/* ── Forms ── */
body:has(#modal-crear) .fl {
  color: var(--texto2);
  font-weight: 600;
}
body:has(#modal-crear) .btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#modal-crear) .btn-sec {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-crear) .btn-quitar {
  color: var(--rojo);
}

/* ── Search results dropdown ── */
body:has(#modal-crear) .search-results {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(29,27,24,0.10);
}
body:has(#modal-crear) .search-item {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  color: var(--texto);
}
body:has(#modal-crear) .search-item:hover {
  background: rgba(158,61,0,0.04);
  color: var(--naranja);
}
body:has(#modal-crear) .search-item:last-child {
  box-shadow: none;
}

/* ── Toast ── */
body:has(#modal-crear) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border: none;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#modal-crear) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCCION — produccion.html
   Scope: body:has(#btn-registrar)
   ═══════════════════════════════════════════════════════════════ */

body:has(#btn-registrar) {
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --amarillo: #D48C00;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#btn-registrar) #login-screen {
  background: var(--fondo);
}
body:has(#btn-registrar) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-registrar) .login-titulo {
  color: var(--naranja);
}
body:has(#btn-registrar) .login-sub {
  color: var(--texto2);
}
body:has(#btn-registrar) .login-input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#btn-registrar) .login-input:focus {
  border-color: var(--naranja);
}
body:has(#btn-registrar) .login-btn {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#btn-registrar) .login-err {
  color: var(--rojo);
}

/* ── Header ── */
body:has(#btn-registrar) #header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#btn-registrar) .h-titulo {
  color: var(--naranja);
}
body:has(#btn-registrar) .h-seccion {
  color: var(--texto2);
}
body:has(#btn-registrar) .h-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#btn-registrar) .h-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}

/* ── Form card ── */
body:has(#btn-registrar) .form-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-registrar) .form-titulo {
  color: var(--naranja);
}

/* ── Forms ── */
body:has(#btn-registrar) .fl {
  color: var(--texto2);
  font-weight: 600;
}
body:has(#btn-registrar) .fi {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#btn-registrar) .fi:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}

/* ── Register button ── */
body:has(#btn-registrar) .btn-registrar {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}

/* ── Search results ── */
body:has(#btn-registrar) .search-results {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(29,27,24,0.10);
}
body:has(#btn-registrar) .search-item {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  color: var(--texto);
}
body:has(#btn-registrar) .search-item:hover {
  background: rgba(158,61,0,0.04);
  color: var(--naranja);
}
body:has(#btn-registrar) .search-item:last-child {
  box-shadow: none;
}

/* ── Selected product chip ── */
body:has(#btn-registrar) .producto-sel {
  background: rgba(46,125,50,0.06);
  border: 1px solid var(--verde);
  border-radius: 4px;
}
body:has(#btn-registrar) .producto-sel-nombre {
  color: var(--texto);
}
body:has(#btn-registrar) .producto-sel-quitar {
  color: var(--rojo);
}

/* ── Table wrap ── */
body:has(#btn-registrar) .tabla-wrap {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#btn-registrar) .tabla-titulo {
  color: var(--texto2);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}

/* ── Table — tonal alternating rows ── */
body:has(#btn-registrar) table {
  border-collapse: separate;
  border-spacing: 0;
}
body:has(#btn-registrar) thead th {
  color: var(--texto2);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: transparent;
}
body:has(#btn-registrar) tbody tr {
  border-bottom: none;
}
body:has(#btn-registrar) tbody tr:nth-child(even) td {
  background: #F8F3ED;
}
body:has(#btn-registrar) tbody tr:nth-child(odd) td {
  background: transparent;
}
body:has(#btn-registrar) tbody tr:hover td {
  background: rgba(158,61,0,0.04);
}
body:has(#btn-registrar) tbody td {
  color: var(--texto);
}

/* ── Empty state ── */
body:has(#btn-registrar) .empty-state {
  color: var(--texto2);
}

/* ── Descuento info ── */
body:has(#btn-registrar) .descuento-info {
  background: rgba(46,125,50,0.06);
  border: 1px solid rgba(46,125,50,0.15);
  color: var(--verde);
  border-radius: 4px;
}

/* ── Toast ── */
body:has(#btn-registrar) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border: none;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#btn-registrar) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   GASTOS — gastos.html
   Scope: body:has(#modal-gasto)
   ═══════════════════════════════════════════════════════════════ */

body:has(#modal-gasto) {
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --amarillo: #D48C00;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#modal-gasto) #login-screen {
  background: var(--fondo);
}
body:has(#modal-gasto) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#modal-gasto) .login-titulo {
  color: var(--naranja);
}
body:has(#modal-gasto) .login-sub {
  color: var(--texto2);
}
body:has(#modal-gasto) .login-input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-gasto) .login-input:focus {
  border-color: var(--naranja);
}
body:has(#modal-gasto) .login-btn {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#modal-gasto) .login-err {
  color: var(--rojo);
}

/* ── Header ── */
body:has(#modal-gasto) #header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-gasto) .h-titulo {
  color: var(--naranja);
}
body:has(#modal-gasto) .h-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-gasto) .h-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#modal-gasto) .h-btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}

/* ── Resumen bar — financial totals ── */
body:has(#modal-gasto) .resumen-bar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-gasto) .resumen-val {
  font-size: 1.1rem;
  color: var(--texto);
}
body:has(#modal-gasto) .resumen-lbl {
  color: var(--texto2);
}

/* ── Tipos bar ── */
body:has(#modal-gasto) .tipos-bar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-gasto) .tipo-badge {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
  color: var(--texto2);
}
body:has(#modal-gasto) .tipo-badge-monto {
  color: var(--texto);
}

/* ── Toolbar / filters ── */
body:has(#modal-gasto) .toolbar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-gasto) .filtro-sel {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-gasto) .filtro-date {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}

/* ── Table — tonal alternating rows ── */
body:has(#modal-gasto) table {
  border-collapse: separate;
  border-spacing: 0;
}
body:has(#modal-gasto) thead th {
  color: var(--texto2);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: transparent;
}
body:has(#modal-gasto) tbody tr {
  border-bottom: none;
}
body:has(#modal-gasto) tbody tr:nth-child(even) td {
  background: #F8F3ED;
}
body:has(#modal-gasto) tbody tr:nth-child(odd) td {
  background: transparent;
}
body:has(#modal-gasto) tbody tr:hover td {
  background: rgba(158,61,0,0.04);
}
body:has(#modal-gasto) tbody td {
  color: var(--texto);
}
body:has(#modal-gasto) .td-nombre {
  color: var(--texto);
}

/* ── Row state tints ── */
body:has(#modal-gasto) tr.row-pendiente td {
  background: rgba(212,140,0,0.04) !important;
}
body:has(#modal-gasto) tr.row-vencido td {
  background: rgba(170,46,45,0.05) !important;
}

/* ── Status badges ── */
body:has(#modal-gasto) .badge {
  border-radius: 4px;
  border: none;
}
body:has(#modal-gasto) .b-pagado {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}
body:has(#modal-gasto) .b-pendiente {
  background: rgba(212,140,0,0.10);
  color: #D48C00;
}
body:has(#modal-gasto) .b-vencido {
  background: rgba(170,46,45,0.10);
  color: #AA2E2D;
}

/* ── Tipo tag ── */
body:has(#modal-gasto) .tipo-tag {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
  color: var(--texto2);
}

/* ── Small buttons ── */
body:has(#modal-gasto) .btn-sm {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#modal-gasto) .btn-sm:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}

/* ── Modal — glassmorphism ── */
body:has(#modal-gasto) .modal {
  background: rgba(29,27,24,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:has(#modal-gasto) .modal-box {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(29,27,24,0.14);
}
body:has(#modal-gasto) .modal-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#modal-gasto) .modal-titulo {
  color: var(--texto);
}
body:has(#modal-gasto) .modal-cerrar {
  color: var(--texto2);
}
body:has(#modal-gasto) .modal-body {
  background: var(--fondo);
}
body:has(#modal-gasto) .modal-footer {
  background: #FFFFFF;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}

/* ── Forms ── */
body:has(#modal-gasto) .fl {
  color: var(--texto2);
  font-weight: 600;
}
body:has(#modal-gasto) .fi {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#modal-gasto) .fi:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}
body:has(#modal-gasto) .btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#modal-gasto) .btn-sec {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}

/* ── Empty state ── */
body:has(#modal-gasto) .empty-state {
  color: var(--texto2);
}

/* ── Toast ── */
body:has(#modal-gasto) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#modal-gasto) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   CONTABILIDAD — contabilidad.html
   Scope: body:has(#er-body)
   ═══════════════════════════════════════════════════════════════ */

body:has(#er-body) {
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#er-body) #login-screen {
  background: var(--fondo);
}
body:has(#er-body) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#er-body) .login-titulo {
  color: var(--naranja);
}
body:has(#er-body) .login-sub {
  color: var(--texto2);
}
body:has(#er-body) .login-input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#er-body) .login-input:focus {
  border-color: var(--naranja);
}
body:has(#er-body) .login-btn {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#er-body) .login-err {
  color: var(--rojo);
}

/* ── Header ── */
body:has(#er-body) #header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#er-body) .h-titulo {
  color: var(--naranja);
}
body:has(#er-body) .h-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#er-body) .h-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#er-body) .h-btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#er-body) .h-btn-disabled {
  background: #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}

/* ── Resumen bar — financial KPIs ── */
body:has(#er-body) .resumen-bar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#er-body) .resumen-val {
  font-size: 1.15rem;
  color: var(--texto);
}
body:has(#er-body) .resumen-lbl {
  color: var(--texto2);
}

/* ── Toolbar / filters ── */
body:has(#er-body) .toolbar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#er-body) .filtro-sel {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}

/* ── Tabs ── */
body:has(#er-body) .tabs {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#er-body) .tab {
  color: var(--texto2);
  border-bottom: 2px solid transparent;
}
body:has(#er-body) .tab:hover {
  color: var(--texto);
}
body:has(#er-body) .tab.active {
  color: var(--naranja);
  border-bottom-color: var(--naranja);
}

/* ── Table — tonal alternating rows ── */
body:has(#er-body) table {
  border-collapse: separate;
  border-spacing: 0;
}
body:has(#er-body) thead th {
  color: var(--texto2);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: transparent;
}
body:has(#er-body) tbody tr {
  border-bottom: none;
}
body:has(#er-body) tbody tr:nth-child(even) td {
  background: #F8F3ED;
}
body:has(#er-body) tbody tr:nth-child(odd) td {
  background: transparent;
}
body:has(#er-body) tbody tr:hover td {
  background: rgba(158,61,0,0.04);
}
body:has(#er-body) tbody td {
  color: var(--texto);
}
body:has(#er-body) td.num {
  font-variant-numeric: tabular-nums;
}

/* ── Row hierarchy ── */
body:has(#er-body) tr.row-header td {
  color: var(--texto);
}
body:has(#er-body) tr.row-subheader td {
  color: var(--texto);
}
body:has(#er-body) tr.row-detalle td {
  color: var(--texto2);
}
body:has(#er-body) tr.row-total td {
  border-top: 2px solid #E6E2DC;
  color: var(--texto);
}
body:has(#er-body) tr.row-utilidad td {
  border-top: 3px double var(--naranja);
  color: var(--naranja);
  font-size: 1rem;
}

/* ── Financial values — green positive, tertiary red negative ── */
body:has(#er-body) .val-positivo {
  color: #2E7D32;
}
body:has(#er-body) .val-negativo {
  color: #AA2E2D;
}
body:has(#er-body) .val-neutro {
  color: var(--texto);
}

/* ── Balance cards ── */
body:has(#er-body) .balance-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#er-body) .balance-titulo {
  color: var(--texto2);
}
body:has(#er-body) .balance-valor {
  font-size: 1.7rem;
  color: var(--texto);
}
body:has(#er-body) .balance-sub {
  color: var(--texto2);
}

/* ── Loading ── */
body:has(#er-body) .loading {
  color: var(--texto2);
}

/* ── Toast ── */
body:has(#er-body) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#er-body) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   CONTEO — js/conteo.html (conteo.html)
   Scope: body:has(#fil-dif)
   ═══════════════════════════════════════════════════════════════ */

body:has(#fil-dif) {
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --gris: #8D8480;
  --amarillo: #D48C00;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Login ── */
body:has(#fil-dif) #login-screen {
  background: var(--fondo);
}
body:has(#fil-dif) .login-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#fil-dif) .login-titulo {
  color: var(--naranja);
}
body:has(#fil-dif) .login-sub {
  color: var(--texto2);
}
body:has(#fil-dif) .login-input {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#fil-dif) .login-input:focus {
  border-color: var(--naranja);
}
body:has(#fil-dif) .login-btn {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#fil-dif) .login-err {
  color: var(--rojo);
}

/* ── Header ── */
body:has(#fil-dif) #header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#fil-dif) .h-titulo {
  color: var(--naranja);
}
body:has(#fil-dif) .h-seccion {
  color: var(--texto2);
}
body:has(#fil-dif) .h-btn {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#fil-dif) .h-btn:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}
body:has(#fil-dif) .h-btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}

/* ── Toolbar ── */
body:has(#fil-dif) .toolbar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#fil-dif) .buscador {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#fil-dif) .buscador:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}
body:has(#fil-dif) .filtro-sel {
  background: var(--fondo);
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}

/* ── Resumen bar ── */
body:has(#fil-dif) .resumen-bar {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#fil-dif) .resumen-val {
  font-size: 1.15rem;
  color: var(--texto);
}
body:has(#fil-dif) .resumen-lbl {
  color: var(--texto2);
}

/* ── Conteo cards (list view) ── */
body:has(#fil-dif) .conteo-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
  transition: box-shadow 0.15s;
}
body:has(#fil-dif) .conteo-card:hover {
  box-shadow: 0 4px 12px rgba(29,27,24,0.10);
}
body:has(#fil-dif) .conteo-card-titulo {
  color: var(--texto);
}
body:has(#fil-dif) .conteo-card-info {
  color: var(--texto2);
}

/* ── Status badges ── */
body:has(#fil-dif) .badge {
  border-radius: 4px;
  border: none;
}
body:has(#fil-dif) .b-en_proceso {
  background: rgba(212,140,0,0.10);
  color: #D48C00;
}
body:has(#fil-dif) .b-completado {
  background: rgba(21,101,192,0.10);
  color: #1565C0;
}
body:has(#fil-dif) .b-aprobado {
  background: rgba(46,125,50,0.10);
  color: var(--verde);
}

/* ── Table — tonal alternating rows ── */
body:has(#fil-dif) table {
  border-collapse: separate;
  border-spacing: 0;
}
body:has(#fil-dif) thead th {
  color: var(--texto2);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
  background: transparent;
}
body:has(#fil-dif) tbody tr {
  border-bottom: none;
}
body:has(#fil-dif) tbody tr:nth-child(even) td {
  background: #F8F3ED;
}
body:has(#fil-dif) tbody tr:nth-child(odd) td {
  background: transparent;
}
body:has(#fil-dif) tbody tr:hover td {
  background: rgba(158,61,0,0.04);
}
body:has(#fil-dif) tbody td {
  color: var(--texto);
}
body:has(#fil-dif) .td-nombre {
  color: var(--texto);
}

/* ── Count input — large for easy entry ── */
body:has(#fil-dif) .inp-conteo {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
  font-size: 1.1rem;
  padding: 8px 10px;
  width: 100px;
  font-weight: 700;
}
body:has(#fil-dif) .inp-conteo:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}

/* ── Difference values — green positive, tertiary red negative ── */
body:has(#fil-dif) .dif-pos {
  color: #2E7D32;
}
body:has(#fil-dif) .dif-neg {
  color: #AA2E2D;
}
body:has(#fil-dif) .dif-zero {
  color: var(--texto2);
}

/* ── Detail footer ── */
body:has(#fil-dif) #detalle-footer {
  background: #FFFFFF;
  border-top: none !important;
  box-shadow: 0 -1px 0 #E6E2DC;
}

/* ── Modal — glassmorphism ── */
body:has(#fil-dif) .modal {
  background: rgba(29,27,24,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body:has(#fil-dif) .modal-box {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(29,27,24,0.14);
}
body:has(#fil-dif) .modal-hdr {
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#fil-dif) .modal-titulo {
  color: var(--texto);
}
body:has(#fil-dif) .modal-cerrar {
  color: var(--texto2);
}
body:has(#fil-dif) .modal-body {
  background: var(--fondo);
}
body:has(#fil-dif) .modal-footer {
  background: #FFFFFF;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
}

/* ── Buttons ── */
body:has(#fil-dif) .btn-prim {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#fil-dif) .btn-sec {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#fil-dif) .btn-verde {
  background: var(--verde);
  border-radius: 4px;
}
body:has(#fil-dif) .btn-rojo {
  background: var(--rojo);
  border-radius: 4px;
}

/* ── Empty state ── */
body:has(#fil-dif) .empty-state {
  color: var(--texto2);
}

/* ── Toast ── */
body:has(#fil-dif) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#fil-dif) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   CONFIG-IMPRESORA — config-impresora.html
   Scope: body:has(#jp-status)
   ═══════════════════════════════════════════════════════════════ */

body:has(#jp-status) {
  --crema: #FEF9F3;
  --cafe: #1D1B18;
  --cafe2: #5C5652;
  --naranja: #9E3D00;
  --naranja2: #C64F00;
  --verde: #2E7D32;
  --rojo: #AA2E2D;
  --fondo: #FEF9F3;
  --card: #FFFFFF;
  --borde: transparent;
  --texto: #1D1B18;
  --texto2: #5C5652;

  background: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

/* ── Header ── */
body:has(#jp-status) header {
  background: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}
body:has(#jp-status) .header-logo {
  color: var(--naranja);
}
body:has(#jp-status) .header-back {
  background: transparent;
  border: 1px solid #E6E2DC;
  color: var(--texto2);
  border-radius: 4px;
}
body:has(#jp-status) .header-back:hover {
  border-color: var(--naranja);
  color: var(--naranja);
}

/* ── Section cards ── */
body:has(#jp-status) .section-card {
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(29,27,24,0.06);
}
body:has(#jp-status) .section-titulo {
  color: var(--naranja);
  border-bottom: none;
  box-shadow: 0 1px 0 #E6E2DC;
}

/* ── Fields / inputs ── */
body:has(#jp-status) .field label {
  color: var(--texto2);
}
body:has(#jp-status) .field input,
body:has(#jp-status) .field select {
  background: #F8F3ED;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#jp-status) .field input:focus,
body:has(#jp-status) .field select:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 2px rgba(158,61,0,0.08);
}

/* ── Toggle rows ── */
body:has(#jp-status) .toggle-row {
  border-bottom-color: #E6E2DC;
}
body:has(#jp-status) .toggle-row:last-child {
  border-bottom: none;
}
body:has(#jp-status) .toggle-label {
  color: var(--texto);
}
body:has(#jp-status) .toggle-desc {
  color: var(--texto2);
}
body:has(#jp-status) .toggle.on {
  background: var(--verde);
}
body:has(#jp-status) .toggle.off {
  background: #E6E2DC;
}

/* ── Copias grid ── */
body:has(#jp-status) .copias-item {
  background: #F8F3ED;
  border: none;
  border-radius: 4px;
}
body:has(#jp-status) .copias-label {
  color: var(--texto2);
}
body:has(#jp-status) .copias-btn {
  background: #FFFFFF;
  border: 1px solid #E6E2DC;
  color: var(--texto);
  border-radius: 4px;
}
body:has(#jp-status) .copias-num {
  color: var(--naranja);
}

/* ── Logo upload area ── */
body:has(#jp-status) .logo-area {
  border: 2px dashed #E6E2DC;
  border-radius: 4px;
}
body:has(#jp-status) .logo-area:hover {
  border-color: var(--naranja);
}
body:has(#jp-status) .logo-placeholder {
  color: var(--texto2);
}

/* ── Font size segmented control ── */
body:has(#jp-status) .font-row {
  border-bottom-color: #E6E2DC;
}
body:has(#jp-status) .font-row:last-child {
  border-bottom: none;
}
body:has(#jp-status) .font-row-lbl {
  color: var(--texto);
}
body:has(#jp-status) .font-seg {
  border: 1px solid #E6E2DC;
  border-radius: 4px;
  overflow: hidden;
}
body:has(#jp-status) .font-seg button {
  background: var(--fondo);
  border-right: 1px solid #E6E2DC;
  color: var(--texto2);
}
body:has(#jp-status) .font-seg button:last-child {
  border-right: none;
}
body:has(#jp-status) .font-seg button.sel {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  color: #FFFFFF;
}

/* ── Checkbox rows ── */
body:has(#jp-status) .chk-row input[type=checkbox] {
  accent-color: var(--naranja);
}
body:has(#jp-status) .chk-row label {
  color: var(--texto);
}

/* ── QZ / JekemiPrint status ── */
body:has(#jp-status) .qz-status.conectado {
  background: rgba(46,125,50,0.06);
  color: var(--verde);
  border: none;
  border-radius: 4px;
}
body:has(#jp-status) .qz-status.desconectado {
  background: #F8F3ED;
  color: var(--texto2);
  border: none;
  border-radius: 4px;
}
body:has(#jp-status) .qz-status.conectado .qz-dot {
  background: var(--verde);
}
body:has(#jp-status) .qz-status.desconectado .qz-dot {
  background: var(--texto2);
}

/* ── Buttons ── */
body:has(#jp-status) .btn-guardar {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  border-radius: 4px;
}
body:has(#jp-status) .btn-guardar:hover {
  background: linear-gradient(135deg, #C64F00, #9E3D00);
}
body:has(#jp-status) .btn-test {
  color: var(--naranja);
  border: 2px solid var(--naranja);
  border-radius: 4px;
}

/* ── Ticket preview — keep white, no theme override ── */
body:has(#jp-status) .ticket-preview {
  border: 1px solid #E6E2DC;
  border-radius: 4px;
}

/* ── Toast ── */
body:has(#jp-status) #toast {
  background: #1D1B18;
  color: #FEF9F3;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(29,27,24,0.18);
}

/* ── Scrollbar ── */
body:has(#jp-status) ::-webkit-scrollbar-thumb {
  background: #E6E2DC;
}

/* ═══════════════════════════════════════════════════════════════
   TERMINOS — terminos.html
   Scope: body:has(.fecha)
   ═══════════════════════════════════════════════════════════════ */

body:has(.fecha) {
  background: #FEF9F3;
  color: #1D1B18;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  line-height: 1.7;
}

body:has(.fecha) header {
  background: linear-gradient(135deg, #9E3D00, #C64F00);
  color: #FFFFFF;
  padding: 40px 24px;
}
body:has(.fecha) header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
body:has(.fecha) header p {
  opacity: 0.85;
  font-size: 0.88rem;
}

body:has(.fecha) .container {
  max-width: 720px;
  padding: 48px 24px;
}

body:has(.fecha) h2 {
  color: #9E3D00;
  font-size: 1.05rem;
  font-weight: 800;
  margin: 36px 0 10px;
  letter-spacing: -0.01em;
}

body:has(.fecha) p {
  color: #1D1B18;
  font-size: 0.92rem;
}

body:has(.fecha) li {
  color: #1D1B18;
  font-size: 0.92rem;
}

body:has(.fecha) a {
  color: #9E3D00;
}

body:has(.fecha) .fecha {
  color: #5C5652;
  border-top: none;
  box-shadow: 0 -1px 0 #E6E2DC;
  padding-top: 24px;
  margin-top: 48px;
}

/* ── Print: reset theme for thermal printing ── */
@media print {
  :root {
    --surface: #fff;
    --on-surface: #000;
  }
}