/* ---------- MODAL ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:var(--overlay-rgba); display:flex;
    align-items:center; justify-content:center; z-index:50; padding:16px;
  }
  .modal-box{
    background:var(--warm-card); border-radius:var(--radius-lg); padding:22px; width:100%; max-width:320px;
    box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:14px;
    animation:modal-in 0.16s ease-out;
  }
  @keyframes modal-in{
    from{ opacity:0; transform:translateY(6px) scale(0.99); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .modal-box.scan-box{ max-width:420px; }
  #editProductOverlay .modal-box{ max-width:500px; height:calc(100dvh - 32px); }
  /* ---------- MODAL-SCROLL: patrón scrolleable/full-height compartido ----------
     Aplica a overlays cuyo contenido supera el alto de pantalla (edición e importación).
     Se agrupa por selector para no tocar la estructura HTML. Conserva comportamiento. */
  .modal-scroll,
  #editProductOverlay,
  #importOverlay{
    overflow-y:auto; overscroll-behavior:contain;
    align-items:flex-start; justify-content:center;
  }
  #editProductOverlay .modal-box{ margin:0 auto; }
  .more-details-toggle{
    width:100%; min-height:var(--control-h-md);
    background:var(--graphite-light); border:1px solid var(--paper-line); border-radius:var(--radius-md);
    color:var(--paper-fade); font-family:var(--font-mono); font-size:11px;
    letter-spacing:0.06em; cursor:pointer; text-align:center;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .more-details-toggle:hover{ border-color:var(--paper-fade); color:var(--paper-ink); }
  .more-details-toggle:disabled{ opacity:0.45; cursor:not-allowed; }
  .more-details-panel{
    display:flex; flex-direction:column; gap:14px;
    border-top:1px dashed var(--paper-line); padding-top:14px;
  }
  .modal-title{
    font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:0.06em;
    color:var(--paper-ink);
  }
  .modal-box .field input{
    padding:10px 10px; border:1px solid var(--paper-line); border-radius:var(--radius-sm);
    font-family:var(--font-mono); font-size:16px; background:var(--graphite-light); color:var(--paper-ink); outline:none;
    transition:border-color 0.12s ease, box-shadow 0.12s ease;
  }
  .modal-box .field input:focus{ border-color:var(--felt-light); box-shadow:var(--ring-focus); }
  .modal-box .field select{
    padding:10px 10px; border:1px solid var(--paper-line); border-radius:var(--radius-sm);
    font-family:var(--font-ui); font-size:14px; background:var(--graphite-light); color:var(--paper-ink); outline:none;
  }
  .modal-box .field select:focus{ border-color:var(--felt-light); box-shadow:var(--ring-focus); }
  .modal-box .field input#editProdCategoryNew{ margin-top:6px; }
  .modal-actions{ display:flex; gap:8px; flex-shrink:0; z-index:5; }
  .modal-actions .key{ flex:1; min-height:var(--control-h-md); }
  #editProductOverlay .edit-prod-fields{
    flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    display:flex; flex-direction:column; gap:14px;
  }
  @media print{
    body{ background:#fff !important; padding:0 !important; }
    .pos{ box-shadow:none !important; border-radius:0 !important; max-width:100% !important; padding:0 !important; }
    .pos-header, .storage-warning, .brand-panel, .page-nav, .lock-overlay, .modal-overlay,
    .dash-period-tabs, .no-print{
      display:none !important;
    }
    .page:not(#pageDashboard){ display:none !important; }
    .dash-panel{ box-shadow:none !important; padding:0 !important; }
    .dash-bar-tooltip{ display:none !important; }

    body.printing-label .pos{ display:none !important; }
    body.printing-label #labelOverlay{
      display:flex !important; position:static !important; background:none !important; padding:0 !important;
    }
    body.printing-label #labelOverlay .modal-box{
      box-shadow:none !important; padding:0 !important; background:none !important; max-width:none !important;
    }
    body.printing-label #labelOverlay .modal-title,
    body.printing-label #labelOverlay .brand-hint,
    body.printing-label #labelOverlay .modal-actions{ display:none !important; }
    body.printing-label #labelOverlay .label-preview{ border:none !important; width:60mm; margin:0 auto; }
  }
   .label-preview{
     background:var(--paper); border:1px dashed var(--paper-line); border-radius:8px;
     padding:14px; display:flex; flex-direction:column; align-items:center; gap:6px;
   }
   .label-name{ font-family:var(--font-ui); font-weight:700; font-size:13px; color:var(--paper-ink); text-align:center; }
   .label-price{ font-family:var(--font-mono); font-weight:700; font-size:16px; color:var(--paper-ink); }
   .label-barcode-number{ font-family:var(--font-mono); font-size:12px; color:var(--paper-ink); letter-spacing:0.1em; text-align:center; }
   #labelBarcodeSvg{ max-width:100%; }

  /* ---------- IMPORTAR PRODUCTOS ---------- */
  #importOverlay .modal-box.import-box{ max-width:760px; height:calc(100dvh - 32px); margin:0 auto; }
  .import-summary{ display:flex; flex-wrap:wrap; gap:6px; }
  .imp-chip{
    font-family:var(--font-mono); font-size:11px; white-space:nowrap;
    background:var(--graphite-light); border:1px solid var(--paper-line);
    border-radius:999px; padding:4px 10px; color:var(--paper-ink);
  }
  .import-update-row{ margin:0; cursor:pointer; }
  .import-update-row input{ accent-color:#3F9B6F; }
  .import-table-wrap{
    flex:1 1 0; min-height:140px; overflow:auto;
    border:1px solid var(--paper-line); border-radius:8px;
  }
  .import-table{
    width:100%; border-collapse:collapse;
    font-family:var(--font-ui); font-size:12px; color:var(--paper-ink);
  }
  .import-table th{
    position:sticky; top:0; z-index:1; text-align:left; padding:8px;
    background:var(--graphite-light); color:var(--paper-fade);
    font-family:var(--font-mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase;
  }
  .import-table td{ padding:7px 8px; border-top:1px dashed var(--paper-line); vertical-align:top; }
  .imp-badge{
    display:inline-block; white-space:nowrap; padding:2px 7px; border-radius:999px;
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.03em;
    border:1px solid var(--paper-line); color:var(--paper-fade);
  }
  .imp-badge-new{ color:#2E7D4F; border-color:#2E7D4F; }
  .imp-badge-upd{ color:#8A6D1C; border-color:#B08B2E; }
  .imp-badge-warn{ color:#A05A00; border-color:#C77F2E; }
  .imp-badge-err{ color:#A33B3B; border-color:#A33B3B; }
  .imp-cell-num, .imp-cell-price{ white-space:nowrap; font-family:var(--font-mono); font-size:11px; }
  .imp-cell-name{ max-width:180px; overflow-wrap:anywhere; font-weight:600; }
  .imp-cell-detail{ max-width:230px; overflow-wrap:anywhere; color:var(--paper-fade); font-size:11px; }
  @media (max-width:600px){
    .import-table th:nth-child(5), .import-table td:nth-child(5),
    .import-table th:nth-child(7), .import-table td:nth-child(7){ display:none; }
    .import-table{ font-size:11px; }
  }

/* ---------- modal de pago (lógica funcional, estilos) ---------- */
/* Colores de Plin, locales al modal (sin tocar los tokens globales de base.css) */
#paymentModalOverlay{
  --plin:#0F6BFF;
  --plin-light:#3D8CFF;
}
#paymentModalOverlay .modal-box{ max-width:430px; padding:24px; }
.payment-modal-total{
  margin:6px 0 4px; padding:18px 16px; text-align:center;
  border:1px solid var(--paper-line); border-radius:var(--radius-md); background:var(--graphite-light);
}
.payment-modal-total-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--paper-fade);
  text-transform:uppercase; font-weight:700;
}
.payment-modal-total-value{
  font-family:var(--font-mono); font-size:34px; font-weight:700; color:var(--felt);
  margin-top:4px; line-height:1.15; letter-spacing:0.01em;
}
.payment-modal-methods{ display:flex; gap:7px; margin-bottom:14px; }
.payment-modal-methods .pay-tab{
  min-height:60px; flex-direction:column; gap:6px; font-size:11px; padding:8px 2px;
  border-radius:var(--radius-md); border:1px solid var(--paper-line);
  background:var(--paper); color:var(--paper-ink); flex:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.payment-modal-methods .pay-tab:hover{ border-color:var(--paper-fade); background:var(--graphite-light); }
.payment-modal-methods .pay-tab:focus-visible{ box-shadow:var(--ring-focus); }
.payment-modal-methods .pay-tab .icon{ font-size:20px; }
.payment-modal-methods .pay-tab[data-method="efectivo"].active{
  background:var(--felt); border-color:var(--felt-light); color:#fff; box-shadow:var(--shadow-sm);
}
.payment-modal-methods .pay-tab[data-method="yape"].active{
  background:var(--yape); border-color:var(--yape-light); color:#fff; box-shadow:var(--shadow-sm);
}
.payment-modal-methods .pay-tab[data-method="plin"].active{
  background:var(--plin); border-color:var(--plin-light); color:#fff; box-shadow:var(--shadow-sm);
}
.payment-modal-methods .pay-tab[data-method="fiado"].active{
  background:var(--fiado); border-color:var(--fiado-light); color:#fff; box-shadow:var(--shadow-sm);
}
.payment-panes{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.payment-pane{
  border:1px solid var(--paper-line); border-radius:var(--radius-md); padding:14px; background:var(--graphite-light);
}
.payment-pane-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.payment-pane-dot{ width:10px; height:10px; border-radius:var(--radius-pill); flex-shrink:0; }
.payment-pane-dot.pm-efectivo{ background:var(--felt); }
.payment-pane-dot.pm-yape{ background:var(--yape); }
.payment-pane-dot.pm-plin{ background:var(--plin); }
.payment-pane-dot.pm-fiado{ background:var(--fiado); }
.payment-pane-name{ font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--paper-ink); }
.payment-method-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.payment-method-grid .field{ min-width:0; }
.payment-amount-input{
  font-size:20px; font-weight:700; text-align:right; padding:11px 12px;
  font-family:var(--font-mono); letter-spacing:0.02em;
}
.payment-cash-shortcuts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.payment-cash-shortcuts .cash-shortcut{
  flex:1 1 calc(33.333% - 6px); min-width:0; min-height:42px;
  background:var(--paper); border:1px solid var(--paper-line); border-radius:var(--radius-sm);
  color:var(--paper-ink); font-family:var(--font-mono); font-weight:700;
  font-size:12px; letter-spacing:0.02em; cursor:pointer; padding:8px 6px;
}
.payment-cash-shortcuts .cash-shortcut:hover{ border-color:var(--paper-fade); }
.payment-cash-shortcuts .cash-shortcut.payment-shortcut-set{
  background:var(--color-success-bg); border-color:var(--felt-light); color:var(--felt);
}
.payment-change-row{
  display:flex; justify-content:space-between; align-items:center; margin-top:12px;
  padding:11px 14px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-weight:700; font-size:17px; color:var(--felt);
  background:var(--color-success-bg); border:1px solid var(--color-success-border);
}
.payment-change-row span:first-child{ font-size:11px; letter-spacing:0.1em; }
.payment-msg{
  padding:10px 12px; border:1px solid var(--color-info-border); border-radius:var(--radius-sm);
  font-size:12.5px; line-height:1.5; color:var(--color-info-text); background:var(--color-info-bg); margin-top:10px;
  display:flex; align-items:flex-start; gap:9px;
}
.payment-msg .icon{ font-size:17px; flex-shrink:0; margin-top:1px; }
.payment-summary{
  border:1px solid var(--paper-line); border-radius:var(--radius-md); margin-bottom:14px; overflow:hidden;
}
.payment-summary-row{
  display:flex; justify-content:space-between; align-items:center; padding:11px 14px;
  font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--paper-ink);
  border-bottom:1px solid var(--paper-line);
}
.payment-summary-row:last-child{ border-bottom:none; }
.payment-summary-row span:first-child{ font-size:11px; letter-spacing:0.1em; color:var(--paper-fade); }
.payment-summary-pend{ color:var(--fiado); }
.payment-summary-pend.negative{ color:var(--color-error); background:var(--color-error-bg); }
#paymentModalOverlay .modal-actions .key{ min-height:var(--control-h-lg); font-size:13px; }
#paymentConfirmBtn{ flex:1.4; }
@media (max-width:400px){
  #paymentModalOverlay .modal-box{ padding:18px; }
  .payment-modal-methods .pay-tab{ min-height:54px; }
  .payment-modal-methods .pay-tab .icon{ font-size:17px; }
  .payment-modal-total-value{ font-size:28px; }
  .payment-method-grid{ grid-template-columns:1fr; }
}