:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --text: #172033;
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: #2563eb;
  --primary-dark: #1e40af;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #f59e0b;
  --soft-primary: #dbeafe;
  --soft-danger: #fee2e2;
  --soft-success: #dcfce7;
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* 2026-05-15: REMOVIDO `zoom: 0.8` que estaba desde
     16b7efa (feat ui: Stock con pestañas + UX facturación). Era
     un parche viejo para "hacer entrar más cosas" en pantallas
     chicas, pero corrompía todos los cálculos de altura del proyecto:
     - calc(100vh - Npx) de los listados fallaba (zoom escala viewport).
     - .view:has(.comprobante-page) height calculaba mal.
     - El body terminaba midiendo menos que la ventana → franja vacía
       abajo en muchas pantallas.
     Pedido de Martín 2026-05-15: 'auditar de dónde sale el zoom 0.8
     y por qué se puso. Si se puede sacar sin romper, mejor — destraba
     muchas otras cosas'.
     Si después aparecen pantallas donde el contenido no entra, se
     resuelve con layout (flex/grid) o reduciendo font-size puntual,
     NO con zoom global. */
}

button,
input,
select,
textarea {
  font-family: inherit;
}

#app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 290px;
  background: #0f172a;
  color: white;
  padding: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 4px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 14px;
}

.sidebar-header .brand-empresa {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.sidebar-header .brand-empresa img {
  max-height: 36px;
  max-width: 48px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  padding: 2px;
  flex-shrink: 0;
}

.sidebar-header .brand-empresa span {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #60a5fa, #fca5a5);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}

.brand-text {
  line-height: 1.15;
}

.brand h1 {
  font-size: 14px;
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
}

.brand p {
  margin: 2px 0 0;
  color: #cbd5e1;
  font-size: 11px;
}

.btn-candado {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  padding: 0;
  flex-shrink: 0;
}

.btn-candado:hover {
  background: #f1f5f9;
  color: #334155;
}

.btn-candado.active {
  color: #16a34a;
  border-color: #86efac;
  background: #f0fdf4;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-item,
.menu-parent {
  width: 100%;
  border: 0;
  text-align: left;
  padding: 12px 14px;
  border-radius: 13px;
  cursor: pointer;
  background: transparent;
  color: #e5e7eb;
  font-size: 15px;
}

.menu-parent {
  color: #93c5fd;
  font-weight: 700;
  margin-top: 8px;
}

.menu-parent::after {
  content: "▾";
  float: right;
}

.menu-item:hover,
.menu-parent:hover {
  background: rgba(255,255,255,.08);
}

.menu-item.active {
  background: #2563eb;
  color: #fff;
  font-weight: 700;
}

.submenu {
  display: none;
  padding-left: 10px;
}

.submenu.open {
  display: block;
}

.submenu .menu-item {
  font-size: 14px;
  padding: 10px 14px;
}

/* Cambio 2026-05-10: el botón secundario "↗" del menú se removió. Ahora
 * cada .menu-item abre por default en una pestaña nueva del navegador
 * (Shift+click navega en la actual). Comportamiento documentado en el
 * `title` del button. */

.menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.main {
  flex: 1;
  min-width: 0;
}

.topbar {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar h2 {
  margin: 0;
  font-size: 25px;
}

.topbar p {
  margin: 5px 0 0;
  color: var(--muted);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Botón Salir: rojo distintivo, anclado al final de la topbar.
   Antes era btn btn-light y se confundía con los otros botones; el
   usuario reportó que visualmente "se iba hasta la última fila de la
   tabla" — síntoma de que no resaltaba como acción separada. */
.btn-logout {
  background: #dc2626;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .12s;
}
.btn-logout:hover { background: #b91c1c; }
.btn-logout:active { background: #991b1b; }
.btn-logout:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}

.status {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--soft-success);
  color: #166534;
  font-size: 13px;
  font-weight: 700;
}

.view {
  padding: 28px;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.info-table td {
  padding: 6px 10px;
  border-bottom: 1px dashed #e5e7eb;
  font-size: 13px;
}
.info-table td:first-child {
  width: 200px;
  color: #6b7280;
}
.info-table tr:last-child td {
  border-bottom: 0;
}

.card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  border: 1px solid rgba(15,23,42,.04);
}

.card h3 {
  margin: 0 0 14px;
}

.kpi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kpi .label {
  color: var(--muted);
  font-size: 14px;
}

.kpi .value {
  font-size: 28px;
  font-weight: 900;
  margin-top: 8px;
}

.kpi .emoji {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  border-radius: 16px;
  font-size: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
}

.field label {
  display: block;
  font-weight: 700;
  color: #374151;
  margin-bottom: 7px;
  font-size: 14px;
}

.input,
select,
textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 11px 12px;
  border-radius: 12px;
  outline: none;
  font-size: 14px;
}

.input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

textarea {
  min-height: 86px;
  resize: vertical;
}

.btn {
  border: 0;
  border-radius: 12px;
  padding: 11px 15px;
  font-weight: 800;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-light {
  background: #e5e7eb;
  color: #111827;
}

.btn-danger {
  background: var(--soft-danger);
  color: #991b1b;
}

.btn-success {
  background: var(--soft-success);
  color: #166534;
}

.btn-warning {
  background: #fef3c7;
  color: #92400e;
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
}

table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
}

th {
  text-align: left;
  padding: 13px;
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 12px 13px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: 14px;
}

tr:last-child td {
  border-bottom: 0;
}

.badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

.badge-blue {
  background: var(--soft-primary);
  color: #1d4ed8;
}

.badge-green {
  background: var(--soft-success);
  color: #166534;
}

.badge-red {
  background: var(--soft-danger);
  color: #991b1b;
}

.badge-yellow {
  background: #fef3c7;
  color: #92400e;
}

/* Chip "provisorio" al lado del número del comprobante (feature #19/F3.5):
   indica que el número final puede shiftearse si otra pestaña guarda primero.
   El definitivo se confirma en el toast post-save. */
.badge-provisional {
  display: inline-block;
  background: #fde68a;
  color: #92400e;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 6px;
  cursor: help;
}

/* === Card "Información del depósito" en detalle de venta === */
#deposito-info-card { background: #fff7ed; border: 1px solid #fdba74; }
.dep-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.dep-checklist-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: white;
  border: 1px solid #e5e7eb;
}
.dep-checklist-row.done { background: #f0fdf4; border-color: #86efac; }
.dep-checklist-row.pending { background: #f9fafb; border-color: #e5e7eb; opacity: 0.85; }
.dep-checklist-mark {
  font-size: 20px;
  font-weight: 800;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.dep-checklist-row.done .dep-checklist-mark { color: #16a34a; }
.dep-checklist-row.pending .dep-checklist-mark { color: #9ca3af; }
.dep-checklist-label { font-weight: 600; font-size: 14px; }
.dep-checklist-detail {
  font-size: 12px;
  color: #6b7280;
  margin-top: 3px;
  line-height: 1.4;
}

.dep-fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.dep-foto-thumb-link {
  display: block;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  background: white;
}
.dep-foto-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.dep-foto-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
}
.dep-foto-lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
}
.dep-foto-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.2);
  color: white;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
}

/* Tabs secundarias y compatibilidad legacy (.ml-tabs): estilo underline. */
.ml-tabs,
.page-tabs.page-tabs-secondary {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ml-tab,
.page-tabs.page-tabs-secondary .page-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
}

.ml-tab:hover,
.page-tabs.page-tabs-secondary .page-tab:hover {
  color: var(--text);
}

.ml-tab.active,
.page-tabs.page-tabs-secondary .page-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Tabs primarias: estilo "segmented control" con fondo y pills,
   visualmente más prominentes que las secundarias para dejar clara
   la jerarquía cuando aparecen las dos al mismo tiempo. */
.page-tabs.page-tabs-primary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #eef1f5;
  border-radius: 10px;
  border: 1px solid #e2e6eb;
  margin-bottom: 16px;
}

.page-tabs.page-tabs-primary .page-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}

.page-tabs.page-tabs-primary .page-tab:hover:not(.active) {
  color: #1c2433;
  background: rgba(255,255,255,.55);
}

.page-tabs.page-tabs-primary .page-tab.active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 1px 1px rgba(15,23,42,.04);
}

.ml-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.ml-status-badge.connected {
  background: var(--soft-success);
  color: #166534;
}

.ml-status-badge.disconnected {
  background: #f1f5f9;
  color: #64748b;
}

.ml-status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.doc-total {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.total-box {
  min-width: 330px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}

.total-row.big {
  font-size: 24px;
  font-weight: 900;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}

.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: #111827;
  color: white;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 20;
  max-width: 430px;
}

.toast.show {
  display: block;
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 28px;
}

.comp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comp-item {
  display: grid;
  grid-template-columns: 1fr 120px 42px;
  gap: 8px;
  align-items: center;
}

.notice {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 16px;
}

@media (max-width: 1000px) {
  #app {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .view {
    padding: 16px;
  }
}


.combo-comp-item {
  grid-template-columns: 1fr 120px minmax(220px, auto) 42px;
}

.combo-cost-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
  font-size: 13px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}

@media (max-width: 1000px) {
  .combo-comp-item {
    grid-template-columns: 1fr;
  }
}


.product-form-locked-note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}


.notice-danger {
  border-color: #fecaca !important;
  background: #fff1f2 !important;
  color: #991b1b !important;
  margin-top: 14px;
}

/* === Reclamo de compra (al proveedor) === */
.reclamo-compra-block {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid var(--line, #e5e7eb);
}
.reclamo-compra-block.reclamo-abierto {
  background: #fffbeb;
  border-color: #fde68a;
}
.reclamo-compra-block.reclamo-resuelto {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.reclamo-compra-block h4 {
  font-size: 14px;
  margin: 0;
}

/* === Panel de faltantes (aviso al facturar pedido) === */
.faltantes-panel {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
}
.faltantes-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.faltantes-panel-header h3 {
  margin: 0;
  font-size: 15px;
  color: #92400e;
}
.faltantes-panel-icon {
  font-size: 20px;
  line-height: 1;
}
.faltantes-panel-help {
  margin: 0 0 10px;
  font-size: 13px;
  color: #78350f;
}
.faltantes-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.faltantes-panel-list li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px;
  padding: 8px 10px;
  background: white;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 13px;
}
.faltantes-cant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d97706;
  color: white;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  min-width: 40px;
}
.faltantes-art { color: #1f2937; }
.faltantes-motivo {
  grid-column: 2;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}


.small-help {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}


/* ============================================================
   LOGIN — estética SaaS premium ILUSOFT
   Estructura:
     #login-screen
       .login-bg-decor   (orbs + dotgrid)
       .login-topbrand   (ILUSOFT | Gestión comercial)
       .login-card.login-card-v2
         .login-card-hero  (eyebrow + h2 + subtítulo)
         .login-card-form  (inputs + botón + links)
       .login-footer     (© 2026 ILUSOFT…)
   No toca lógica: IDs login-empresa/login-user/login-pin/login-btn intactos.
   ============================================================ */
.login-screen {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(59, 130, 246, .35) 0%, transparent 55%),
    radial-gradient(110% 80% at 0% 100%, rgba(96, 165, 250, .22) 0%, transparent 60%),
    linear-gradient(135deg, #050d22 0%, #0b1a3b 45%, #11265a 100%);
  color: #e2e8f0;
  font-family: inherit;
}

.login-screen.show {
  display: block;
}

/* Decoración: orbs con blur + dot-grid suave */
.login-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
}
.login-orb-1 {
  width: 520px; height: 520px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(96,165,250,.85) 0%, rgba(59,130,246,0) 70%);
}
.login-orb-2 {
  width: 460px; height: 460px;
  bottom: -140px; right: -120px;
  background: radial-gradient(circle, rgba(56,189,248,.7) 0%, rgba(2,132,199,0) 70%);
}
.login-orb-3 {
  width: 360px; height: 360px;
  top: 40%; left: 55%;
  background: radial-gradient(circle, rgba(99,102,241,.45) 0%, rgba(79,70,229,0) 70%);
  filter: blur(110px);
  opacity: .45;
}
.login-dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Branding superior izquierdo */
.login-topbrand {
  position: absolute;
  top: 28px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .04em;
  z-index: 2;
  color: rgba(226, 232, 240, .92);
}
.login-topbrand-mark {
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.login-topbrand-sep {
  color: rgba(148, 163, 184, .55);
  font-weight: 400;
}
.login-topbrand-tag {
  color: rgba(186, 213, 255, .85);
  font-weight: 500;
}

/* Card centrado */
.login-card {
  position: relative;
  z-index: 2;
  width: min(460px, calc(100vw - 32px));
  margin: 0 auto;
  margin-top: clamp(72px, 12vh, 130px);
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 30px 80px -20px rgba(8, 22, 56, .55),
    0 12px 30px -10px rgba(8, 22, 56, .35),
    0 0 0 1px rgba(15, 23, 42, .04);
  padding: 40px 40px 32px;
  color: var(--text);
}

.login-card-hero {
  text-align: center;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.login-card-hero .login-empresa-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 16px;
  margin-bottom: 6px;
}
.login-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.login-card-hero h2 {
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #0f172a;
  line-height: 1.2;
}
.login-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.login-card-form .field {
  margin-bottom: 14px;
}
.login-card-form .field label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

/* Inputs con ícono */
.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  pointer-events: none;
  transition: color .15s ease;
}
.login-input.input {
  height: 50px;
  padding: 12px 14px 12px 44px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 15px;
  color: #0f172a;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.login-input.input::placeholder {
  color: #94a3b8;
}
.login-input.input:hover {
  background: #fff;
  border-color: #cbd5e1;
}
.login-input.input:focus {
  background: #fff;
  border-color: #2563eb;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, .14),
    0 1px 2px rgba(15, 23, 42, .04);
}
.login-input-wrap:focus-within .login-input-icon {
  color: #2563eb;
}
.login-input-pw {
  padding-right: 48px;
}
.login-pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #94a3b8;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.login-pw-toggle:hover {
  color: #1d4ed8;
  background: #eff6ff;
}
.login-pw-toggle.is-on {
  color: #1d4ed8;
}

/* Botón principal con gradiente */
.btn.login-submit {
  width: 100%;
  height: 50px;
  margin-top: 6px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e3a8a 100%);
  box-shadow:
    0 12px 24px -10px rgba(37, 99, 235, .55),
    0 2px 4px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn.login-submit:hover {
  filter: brightness(1.06);
  box-shadow:
    0 16px 32px -10px rgba(37, 99, 235, .65),
    0 3px 6px rgba(15, 23, 42, .14),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.login-submit:active {
  transform: translateY(1px);
}
.btn.login-submit:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35);
  outline-offset: 2px;
}

/* Hint de empresa preseleccionada */
.login-hint-empresa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  padding: 6px 12px;
  background: #ecfdf5;
  color: #065f46;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}
.login-hint-empresa .login-hint-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
}

/* Footer copyright */
.login-footer {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(203, 213, 225, .7);
  letter-spacing: .04em;
  z-index: 2;
}

/* Responsive mobile */
@media (max-width: 540px) {
  .login-topbrand {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
  }
  .login-card {
    margin-top: 78px;
    padding: 30px 22px 26px;
    border-radius: 20px;
  }
  .login-card-hero h2 { font-size: 22px; }
  .login-input.input { height: 48px; font-size: 14px; }
  .btn.login-submit { height: 48px; }
  .login-footer { font-size: 11px; bottom: 12px; padding: 0 16px; }
}

.permisos-categorias {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.permisos-cat {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.permisos-cat-titulo {
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  padding: 6px 8px;
  background: #f8fafc;
}

.perm-check {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.perm-check:hover {
  background: #e8f0ff;
}

.perm-check input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.permisos-tree details {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.permisos-tree details + details {
  margin-top: 10px;
}

.permisos-tree summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 9px 14px;
}

.permisos-tree summary::-webkit-details-marker {
  display: none;
}

.permisos-cat-summary {
  background: #1e293b;
  color: #fff;
  font-size: 13px;
}

.permisos-cat-summary strong {
  font-weight: 700;
  letter-spacing: .04em;
}

.permisos-grupo-summary {
  background: #eef2f7;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
}

.permisos-tree .perm-tree-arrow {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  margin-right: 2px;
  opacity: .75;
}

.permisos-tree details:not([open]) .perm-tree-arrow {
  transform: rotate(-45deg);
}

.perm-counter {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .15);
  border-radius: 999px;
  padding: 2px 9px;
}

.permisos-grupo-summary .perm-counter {
  background: #fff;
  border: 1px solid #cbd5e1;
}

.permisos-cat-body {
  padding: 8px 12px 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.permisos-grupo-tree {
  border: 1px solid #cbd5e1;
}

.permisos-grupo-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  padding: 6px 8px;
  background: #fff;
}

/* Permisos en pestañas — alternativa al árbol expandible. Usa la misma
   barra .product-modal-tabs que el editor de cliente/producto, una pestaña
   por categoría, panel único visible. */
.permisos-tabs-wrap {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  margin-top: 6px;
}

.perm-tabs-bar {
  /* La clase product-modal-tabs ya da display:flex / gap / borde inferior.
     Ajustes específicos de este contexto: padding más chico. */
  padding: 8px 12px 0;
}

.perm-tabs-body {
  padding: 14px 16px;
  background: #f8fafc;
}

.perm-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.perm-tab-header {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0;
  border-bottom: 1px dashed #e2e8f0;
}

.perm-tab-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.perm-tab-counter {
  margin-left: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .8);
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 1px 8px;
  color: #64748b;
  font-weight: 600;
}

.perm-tab.active .perm-tab-counter {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.permisos-grupo {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.permisos-grupo-header {
  padding: 10px 14px;
  background: #1e293b;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.permisos-grupo-header .perm-tab-toggle {
  color: #fff;
  font-weight: 700;
  width: 100%;
}

.perm-cat-toggle,
.perm-grupo-toggle {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


.client-search-wrap {
  position: relative;
}

.search-clear-btn {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 10px;
  background: #eef2f7;
  color: #334155;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.search-clear-btn:hover {
  background: #fee2e2;
  color: #991b1b;
}

.search-results {
  display: none;
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  padding: 6px;
}

.search-results.show {
  display: block;
}

.search-result-item {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 12px;
  background: white;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text);
}

.search-result-item:hover {
  background: #eff6ff;
}

.search-result-item span {
  color: var(--muted);
  font-size: 12px;
}

.search-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
}


.btn:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


.product-search-wrap {
  position: relative;
  min-width: 260px;
}

.product-search-input {
  padding-right: 12px;
}

.product-search-results {
  display: none;
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 360px;
  max-height: 340px;
  overflow: auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  padding: 6px;
}

.product-search-results.show {
  display: block;
}

.product-search-result {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 12px;
  background: white;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text);
}

.product-search-result:hover {
  background: #eff6ff;
}

.product-search-result span {
  color: var(--muted);
  font-size: 12px;
}

.comp-item .product-search-wrap {
  min-width: 320px;
}

.table-wrap .product-search-results {
  min-width: 520px;
}

@media (max-width: 900px) {
  .product-search-results,
  .table-wrap .product-search-results {
    min-width: 100%;
  }
}


/* Tabla de valores de tesorería — estilo grilla comprobante */
.tes-valores-grid-wrap {
  overflow-x: auto;
  margin: 0 0 4px;
}

.tes-valores-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.tes-valores-grid thead th {
  background: var(--bg-alt, #f8fafc);
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--muted);
}

.tes-valores-grid td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.tes-valores-grid td input,
.tes-valores-grid td select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

.tes-valores-grid td input:focus,
.tes-valores-grid td select:focus {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}

.tes-valores-grid tbody tr:has(:focus) {
  background: #eff6ff;
}

.tes-valores-grid tbody tr:has(:focus) td {
  border-bottom-color: #bfdbfe;
}

.tes-valores-grid .tes-importe-input {
  text-align: right;
}

/* Columna Medio fija, columna X angosta */
.tes-valores-grid td:first-child { min-width: 130px; width: 150px; }
.tes-valores-grid td:last-child  { width: 36px; text-align: center; }
.tes-valores-grid td:last-child .btn { padding: 2px 7px; font-size: 13px; }

/* Estilos legados — se mantienen por si algún partial los usa */
.tes-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) 42px;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 10px;
  background: #f8fafc;
}

.tes-line .tes-wide {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .tes-line {
    grid-template-columns: 1fr;
  }

  .tes-line .tes-wide {
    grid-column: auto;
  }
}


.search-count {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.inner-card {
  box-shadow: none;
  border: 1px solid var(--line);
  margin: 0;
}

.image-placeholder {
  min-height: 130px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: #f8fafc;
  margin-bottom: 10px;
}

.product-photo-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.product-photo-preview img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.product-thumb {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}


.searchable-select {
  position: relative;
}

.searchable-results {
  z-index: 120;
}

select.master-field {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 44px;
  padding: 0 12px;
  background: white;
  color: var(--text);
  font: inherit;
}


/* v1.25 menu horizontal */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sidebar {
  width: 100%;
  background: #0f172a;
  color: white;
  padding: 14px 20px;
  position: sticky;
  top: 0;
  height: auto;
  overflow: visible;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

.brand {
  padding: 8px 6px 14px;
  margin-bottom: 12px;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.menu-group {
  position: relative;
}

.menu-item,
.menu-parent {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 11px 14px;
  white-space: nowrap;
}

.menu-parent {
  margin-top: 0;
  background: rgba(255,255,255,.04);
  color: #dbeafe;
}

.menu-parent::after {
  content: "▾";
  float: none;
  margin-left: 8px;
}

.menu-item {
  background: rgba(255,255,255,.02);
}

.menu-group.single .menu-item {
  background: transparent;
}

.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  padding: 10px;
  border-radius: 14px;
  background: #0b1220;
  box-shadow: 0 18px 40px rgba(2,6,23,.35);
  border: 1px solid rgba(255,255,255,.10);
  z-index: 60;
}

.submenu.open {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.submenu .menu-item {
  width: 100%;
  justify-content: flex-start;
  font-size: 14px;
  padding: 10px 12px;
  background: transparent;
}

.main {
  width: 100%;
  flex: 1;
  min-width: 0;
}

/* DESACTIVADO 2026-05-11: el topbar pasó a `position: fixed; top: 0` con el
   nuevo layout horizontal. Las reglas viejas `top: 112px` rompían el fixed.
.topbar {
  top: 112px;
}
*/

@media (max-width: 980px) {
  .menu {
    gap: 8px;
  }
  .menu-item,
  .menu-parent {
    font-size: 14px;
    padding: 10px 12px;
  }
}


/* v1.26 autocomplete over table */

.table-wrap-autocomplete {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.table-wrap-autocomplete table,
.table-wrap-autocomplete tbody,
.table-wrap-autocomplete tr,
.table-wrap-autocomplete td,
.table-wrap-autocomplete th {
  overflow: visible;
}

.table-wrap-autocomplete td {
  position: relative;
}

.table-wrap-autocomplete .product-search-wrap {
  position: relative;
  z-index: 20;
}

.table-wrap-autocomplete .product-search-results {
  z-index: 5000;
  min-width: max(360px, 100%);
  max-width: 760px;
}

.table-wrap-autocomplete .product-search-results.show {
  display: block;
}

/* Header y filas en tablas de items de comprobantes. */
.comprobante-items-card table th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 8px 8px;
  line-height: 1.2;
  white-space: nowrap;
}
.comprobante-items-card table td {
  padding: 6px 8px;
  font-size: 15px;
}
.comprobante-items-card table td input,
.comprobante-items-card table td select {
  font-size: 15px;
  padding: 8px 10px;
  height: 38px;
}

/* Tabla de items: layout fijo, los inputs ocupan 100% de la celda y se ven como cells. */
.comprobante-items-card table { table-layout: fixed; width: 100%; }
.comprobante-items-card td input,
.comprobante-items-card td select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-overflow: ellipsis;
}
/* Celda con foco: celeste claro de fondo + borde celeste fuerte. La fila
   completa se tinta levemente para que sea obvio en qué renglón estás
   trabajando. */
.comprobante-items-card td input:focus,
.comprobante-items-card td select:focus {
  background: #dbeafe;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb inset;
  outline: none;
}
.comprobante-items-card tbody tr:has(.input:focus) {
  background: #eff6ff;
}
.comprobante-items-card tbody tr:has(.input:focus) td {
  background: transparent;
}
.comprobante-items-card tbody tr:has(.input:focus) td:has(.input:focus) {
  background: #dbeafe;
}
.comprobante-items-card td:has(input[data-field="codigo"]) { width: 22%; }
.comprobante-items-card td:has(input[data-field="descripcion"]) { width: 36%; }
.comprobante-items-card td:has(input[data-field="cantidad"]) { width: 9%; }
.comprobante-items-card td:has(input[data-field="precio_unitario"]) { width: 11%; }
.comprobante-items-card td:has(input[data-field="descuento_porcentaje"]),
.comprobante-items-card td:has(input[data-field="descuento"]) { width: 8%; }
.comprobante-items-card td input[data-field="cantidad"],
.comprobante-items-card td input[data-field="precio_unitario"],
.comprobante-items-card td input[data-field="descuento_porcentaje"],
.comprobante-items-card td input[data-field="descuento"] { text-align: right; }

/* Sacar las flechitas (spinners) de los inputs numéricos de comprobantes:
   cantidad, precio, descuento de línea, descuento general, plazo, tributos.
   Solo se modifican tipeando, sin botoncitos arriba/abajo. */
.comprobante-modal-overlay input[type="number"]::-webkit-outer-spin-button,
.comprobante-modal-overlay input[type="number"]::-webkit-inner-spin-button,
.comprobante-items-card input[type="number"]::-webkit-outer-spin-button,
.comprobante-items-card input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.comprobante-modal-overlay input[type="number"],
.comprobante-items-card input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.comprobante-items-card td .line-subtotal { white-space: nowrap; display: block; text-align: right; }
.comprobante-items-card td:last-child { width: 44px; text-align: center; }
.comprobante-items-card td:last-child .btn { padding: 4px 8px; font-size: 12px; }

/* Auto-shrink: si el contenido no entra, el JS marca con .desc-shrink y reducimos fuente. */
.comprobante-items-card td input[data-field="descripcion"].desc-shrink,
.comprobante-items-card td input[data-field="codigo"].desc-shrink { font-size: 12px; letter-spacing: -0.2px; }
.comprobante-items-card td input[data-field="descripcion"].desc-shrink-2,
.comprobante-items-card td input[data-field="codigo"].desc-shrink-2 { font-size: 11px; letter-spacing: -0.3px; }

/* Listado de artículos — wrapper específico para que el scroll y sticky no afecten otras tablas. */
.table-articulos-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
}

/* Tabla de resultados de informe — comparte el comportamiento sticky del
   listado de artículos: scroll vertical interno + thead pegado al tope.
   Mismo cálculo de max-height para que el header del informe quede visible
   mientras scrolleás resultados largos. */
.table-informe-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
}
.table-informe-wrap table {
  border-collapse: collapse;
  width: 100%;
}
.table-informe-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 10px;
  box-shadow: 0 1px 0 #e2e8f0;
  white-space: nowrap;
}
.table-informe-wrap tbody td {
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.25;
  border-bottom: 1px solid #eef2f7;
  white-space: nowrap;
}
.table-informe-wrap tbody tr:hover { background: #f1f5f9; }
.table-informe-wrap tfoot td {
  position: sticky;
  bottom: 0;
  background: #f1f5f9;
  font-weight: 600;
  border-top: 1px solid #e2e8f0;
  padding: 8px 10px;
}
.table-articulos-wrap .product-list-table {
  table-layout: auto;
  border-collapse: collapse;
  /* No fuerzo width:100% para que la tabla pueda exceder y aparezca el scroll horizontal. */
}
.product-list-table th,
.product-list-table td {
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.25;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}
.product-list-table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-align: left;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 #e2e8f0;
}
.product-list-table tbody tr:hover { background: #f1f5f9; }
/* A+B 2026-05-14: matchea el #bae6fd genérico de .cliente-row-selected
   para que el highlight sea uniforme en todos los listados. */
.product-list-table tbody tr.cliente-row-selected { background: #bae6fd; }
/* Anchos mínimos por columna: legibles, sin apretar contenido. */
.product-list-table th[data-col="modificado"],   .product-list-table td[data-col="modificado"]   { min-width: 95px; }
.product-list-table th[data-col="codigo"],       .product-list-table td[data-col="codigo"]       { min-width: 110px; }
.product-list-table th[data-col="codigo_barras"],.product-list-table td[data-col="codigo_barras"]{ min-width: 120px; }
.product-list-table th[data-col="nombre"],       .product-list-table td[data-col="nombre"]       { min-width: 240px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.product-list-table th[data-col="tipo"],         .product-list-table td[data-col="tipo"]         { min-width: 80px; }
.product-list-table th[data-col="categoria"],    .product-list-table td[data-col="categoria"]    { min-width: 110px; }
.product-list-table th[data-col="rubro"],        .product-list-table td[data-col="rubro"]        { min-width: 110px; }
.product-list-table th[data-col="marca"],        .product-list-table td[data-col="marca"]        { min-width: 110px; }
.product-list-table th[data-col="proveedor"],    .product-list-table td[data-col="proveedor"]    { min-width: 130px; }
.product-list-table th[data-col="precio"],       .product-list-table td[data-col="precio"]       { min-width: 100px; text-align: right; }
.product-list-table th[data-col="precio_neto"],  .product-list-table td[data-col="precio_neto"]  { min-width: 100px; text-align: right; }
.product-list-table th[data-col="iva_alicuota"], .product-list-table td[data-col="iva_alicuota"] { min-width: 60px; text-align: right; }
.product-list-table th[data-col="costo"],        .product-list-table td[data-col="costo"]        { min-width: 90px; text-align: right; }
.product-list-table th[data-col="stock"],        .product-list-table td[data-col="stock"]        { min-width: 70px; text-align: right; }
.product-list-table th[data-col="stock_minimo"], .product-list-table td[data-col="stock_minimo"] { min-width: 80px; text-align: right; }
/* Auto-shrink solo para nombre que no entra (el JS lo aplica). */
.product-list-table td[data-col="nombre"].name-shrink { font-size: 12px; letter-spacing: -0.2px; }
.product-list-table td[data-col="nombre"].name-shrink-2 { font-size: 11px; letter-spacing: -0.3px; }


/* v1.27 menu tabs estilo escritorio */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sidebar {
  width: 100%;
  height: auto;
  position: sticky;
  top: 0;
  z-index: 120;
  overflow: visible;
  padding: 0;
  background: linear-gradient(180deg, #5b5b5f 0%, #3f4146 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 6px;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 18px;
}

.brand h1 {
  font-size: 16px;
  margin: 0;
  color: #ffffff;
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #e5e7eb;
}

.menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 3px;
  padding: 6px 10px 0;
  overflow-x: auto;
  overflow-y: visible;
  background: linear-gradient(180deg, #4a4c51 0%, #3a3c41 100%);
}

.menu::-webkit-scrollbar {
  height: 7px;
}

.menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
}

.menu-group {
  position: relative;
  flex: 0 0 auto;
}

.menu-item,
.menu-parent {
  width: auto;
  min-width: 112px;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 13px 16px;
  background: linear-gradient(180deg, #5d6065 0%, #43464b 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.menu-group.single .menu-item {
  background: linear-gradient(180deg, #5d6065 0%, #43464b 100%);
}

.menu-item:hover,
.menu-parent:hover,
.menu-group:has(.submenu.open) > .menu-parent,
.menu-item.active {
  background: linear-gradient(180deg, #75b5e9 0%, #4d96d2 100%);
  color: #ffffff;
}

.menu-parent::after {
  content: "▼";
  float: none;
  margin-left: 9px;
  font-size: 10px;
  opacity: .95;
}

.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  min-width: 235px;
  padding: 0;
  background: linear-gradient(180deg, #6cb0e0 0%, #4b97d2 100%);
  border: 1px solid #2f5f87;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
  overflow: hidden;
  z-index: 160;
}

.submenu.open {
  display: block;
}

.submenu .menu-item {
  width: 100%;
  min-width: 0;
  display: block;
  text-align: left;
  border: none;
  border-top: 1px solid rgba(255,255,255,.22);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
}

.submenu .menu-item:first-child {
  border-top: none;
}

.submenu .menu-item:hover,
.submenu .menu-item.active {
  background: rgba(255,255,255,.16);
}

.main {
  width: 100%;
  flex: 1;
  min-width: 0;
}

/* DESACTIVADO 2026-05-11: ver explicación arriba.
.topbar {
  top: 112px;
}
*/

@media (max-width: 1100px) {
  .menu {
    padding-bottom: 6px;
  }

  .menu-item,
  .menu-parent {
    min-width: auto;
    padding: 11px 13px;
    font-size: 14px;
  }
}

/* v1.28 vendedores */
.badge-yellow {
  background: #fef3c7;
  color: #92400e;
}


/* v1.29 fix menú horizontal con submenús verticales */
.menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 3px;
  overflow-x: auto;
  overflow-y: visible;
}

.menu-group {
  position: relative;
  display: block;
  flex: 0 0 auto;
}

.menu-parent,
.menu-group.single .menu-item {
  white-space: nowrap;
}

.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  min-width: 240px;
  flex-direction: column;
  align-items: stretch;
  z-index: 9999;
}

.submenu.open {
  display: flex;
}

.submenu .menu-item {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  margin: 0;
}

.submenu .menu-item + .menu-item {
  margin-top: 0;
}


/* v1.30 menu dropdown estilo web */
#app {
  display: block;
  min-height: 100vh;
}

.sidebar {
  width: 100%;
  height: auto;
  position: sticky;
  top: 0;
  z-index: 80;
  overflow: visible;
  padding: 0;
  background: #ffffff;
  color: var(--text);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.brand {
  max-width: 1380px;
  margin: 0 auto;
  padding: 16px 24px;
  border-bottom: 1px solid #eef2f7;
  color: var(--text);
}

.brand-icon {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #fff;
}

.brand p {
  color: #6b7280;
}

.menu {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  overflow-x: auto;
  overflow-y: visible;
  background: #ffffff;
}

.menu-group,
.menu-group.single {
  position: relative;
  flex: 0 0 auto;
}

.menu-item,
.menu-parent {
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 16px 14px;
  background: transparent;
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
}

.menu-parent {
  margin-top: 0;
  color: #1f2937;
}

.menu-parent::after {
  content: '▾';
  float: none;
  margin-left: 8px;
  color: #6b7280;
  font-size: 11px;
}

.menu-item:hover,
.menu-parent:hover,
.menu-item.active,
.menu-group:has(.submenu.open) > .menu-parent {
  background: transparent;
  color: #2563eb;
}

.menu-item.active::after,
.menu-parent:hover::before,
.menu-group:has(.submenu.open) > .menu-parent::before,
.menu-group.single .menu-item:hover::before,
.menu-group.single .menu-item.active::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  background: #2563eb;
  border-radius: 999px 999px 0 0;
}

.submenu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  min-width: 260px;
  padding: 10px 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
  z-index: 9999;
}

.submenu.open {
  display: block;
}

.submenu .menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 18px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
}

.submenu .menu-item:hover,
.submenu .menu-item.active {
  background: #eff6ff;
  color: #1d4ed8;
}

.submenu .menu-item::after,
.submenu .menu-item::before {
  display: none !important;
}

.main {
  width: 100%;
}

/* DESACTIVADO 2026-05-11: ver explicación arriba.
.topbar {
  top: 118px;
  z-index: 40;
}
*/

.view {
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .menu {
    padding: 0 12px;
  }
}


/* v1.34 documentos comerciales */
.document-type-card {
  margin-bottom: 18px;
}

.document-type-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.document-type-header h3 {
  margin-bottom: 6px;
}

.document-type-header p {
  margin: 0;
  color: var(--muted);
}

.document-type-groups {
  display: grid;
  gap: 16px;
}

.document-type-group h4 {
  margin: 0 0 10px;
  color: #1f2937;
}

.document-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.document-type-option {
  border: 1px solid #dbe3ef;
  background: #ffffff;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.document-type-option strong {
  display: block;
  color: #0f172a;
  margin-bottom: 4px;
}

.document-type-option span {
  display: block;
  color: #64748b;
  font-size: 13px;
}

.document-type-option:hover,
.document-type-option.selected {
  border-color: #2563eb;
  background: #eff6ff;
}

@media (max-width: 1100px) {
  .document-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .document-type-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.35 pedidos y documentos comerciales */
.badge-blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.document-type-option[disabled],
.document-type-option.disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Override forzado del z-index del login (otras capas usan 100000+). */
.login-screen.show {
  display: block !important;
  z-index: 999999;
}

/* Acciones secundarias del login (recuperar contraseña / soporte). */
.login-extra-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.login-extra-sep {
  color: #cbd5e1;
  font-weight: 400;
}
.login-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: #1d4ed8;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.login-link svg {
  flex-shrink: 0;
  opacity: .85;
}
.login-link:hover {
  color: #1e40af;
  background: #eff6ff;
}
.login-link:hover svg { opacity: 1; }

/* ==========================================================
   FIX FINAL V1.36 - MENÚ HORIZONTAL + DROPDOWN VISIBLE
   Incorporado sobre v1.35 para que no vuelva al menú vertical.
   ========================================================== */

#app {
  display: block !important;
  min-height: 100vh !important;
}

/* Barra superior completa */
.sidebar {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  overflow: visible !important;
  padding: 0 !important;
  background: #ffffff !important;
  color: #172033 !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

/* Encabezado con logo */
.brand {
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid #eef2f7 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #172033 !important;
}

.brand-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 900 !important;
}

.brand h1 {
  margin: 0 !important;
  font-size: 18px !important;
  color: #172033 !important;
}

.brand p {
  margin: 3px 0 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}

/* Contenedor del menú principal */
.menu {
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 18px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  background: #ffffff !important;
  position: relative !important;
  z-index: 5000 !important;
}

/* Cada categoría principal queda una al lado de la otra */
.menu-group,
.menu-group.single {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Botones principales */
.menu-item,
.menu-parent {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 16px 13px !important;
  background: transparent !important;
  color: #1f2937 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  position: relative !important;
  text-align: center !important;
  box-shadow: none !important;
}

.menu-parent {
  margin-top: 0 !important;
}

/* Flechita de desplegable */
.menu-parent::after {
  content: "▾" !important;
  display: inline-block !important;
  float: none !important;
  margin-left: 8px !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  opacity: 1 !important;
}

/* Hover / activo */
.menu-item:hover,
.menu-parent:hover,
.menu-item.active,
.menu-group:has(.submenu.open) > .menu-parent {
  background: transparent !important;
  color: #2563eb !important;
}

/* Línea inferior azul */
.menu-group.single .menu-item:hover::before,
.menu-group.single .menu-item.active::before,
.menu-parent:hover::before,
.menu-group:has(.submenu.open) > .menu-parent::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 0 !important;
  height: 3px !important;
  background: #2563eb !important;
  border-radius: 999px 999px 0 0 !important;
}

/* Dropdown visible por click y por hover */
.menu-group:hover > .submenu,
.submenu.open {
  display: block !important;
}

/* Dropdown */
.submenu {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 1px) !important;
  min-width: 255px !important;
  width: max-content !important;
  max-width: 380px !important;
  padding: 8px 0 !important;
  background: #ffffff !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .22) !important;
  z-index: 999999 !important;
  overflow: visible !important;
}

/* Opciones internas una debajo de otra */
.submenu .menu-item {
  display: block !important;
  width: 100% !important;
  min-width: 255px !important;
  text-align: left !important;
  justify-content: flex-start !important;
  padding: 13px 18px !important;
  color: #374151 !important;
  background: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Hover en opciones del dropdown */
.submenu .menu-item:hover,
.submenu .menu-item.active {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* Evita líneas decorativas dentro del dropdown */
.submenu .menu-item::before,
.submenu .menu-item::after {
  display: none !important;
  content: none !important;
}

/* Contenido principal */
.main {
  width: 100% !important;
  min-width: 0 !important;
}

/* DESACTIVADO 2026-05-11: esta regla con `position: sticky !important` y
   `top: 116px !important` era la principal culpable de que el topbar nuevo
   (que debe estar fixed top:0 sobre el menu horizontal) quedara "flotante"
   y bajara con el scroll. La sustituye el bloque #app > .topbar de más abajo.
.topbar {
  position: sticky !important;
  top: 116px !important;
  z-index: 20 !important;
}
*/

/* Vista centrada */
.view {
  max-width: 1440px !important;
  margin: 0 auto !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .sidebar {
    position: static !important;
  }

  .brand {
    padding: 12px 16px !important;
  }

  .menu {
    padding: 0 10px !important;
    overflow-x: auto !important;
  }

  .menu-item,
  .menu-parent {
    padding: 14px 12px !important;
    font-size: 14px !important;
  }

  .topbar {
    top: 0 !important;
  }
}


/* v1.37 selector resumido de documentos comerciales */
.document-type-card-compact {
  margin-top: 4px;
}

.document-type-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.document-type-card-compact .document-type-option {
  min-height: 88px;
}

@media (max-width: 1100px) {
  .document-type-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .document-type-grid-compact {
    grid-template-columns: 1fr !important;
  }
}


/* Badge BCRA — aparece en el editor de venta cuando el cliente
   tiene situación BCRA > 1 o cheques rechazados. */
.bcra-warning-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  background: #dc2626;
  color: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px #fee2e2;
  animation: bcra-pulse 1.6s ease-in-out infinite;
}

@keyframes bcra-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #fee2e2; }
  50% { box-shadow: 0 0 0 4px #fecaca; }
}

/* v1.38 fix buscador de productos sobre documentos */
.product-search-wrap {
  position: relative !important;
  z-index: 60 !important;
}

.product-search-results {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: max(360px, 100%) !important;
  max-width: 720px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  z-index: 999999 !important;
  background: #ffffff !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18) !important;
}

.product-search-results.show {
  display: block !important;
}

.table-wrap,
.table-wrap table,
.table-wrap tbody,
.table-wrap tr,
.table-wrap td {
  overflow: visible !important;
}


/* v1.58 — La "fila azul de pestañas internas de navegación" (contenedor
 * `.open-tabs` y la regla `.tab-close`) fue removida el 2026-05-10 a
 * pedido del usuario. Cada sección abre ahora en una pestaña real del
 * navegador (window.open), aprovechando el deep-link via hash.
 *
 * **No removemos** la clase `.open-tab` porque varios listados internos
 * la siguen usando como "estilo de tab azul" para sus sub-pestañas
 * (ej. el switcher de tipo de documento en Documentos de Ventas y de
 * Compras: `#ventas-tabs-grupo`, `#compras-tabs-grupo`, `.rec-tabs`).
 * Ese estilo se mantiene tal cual estaba antes del refactor. */
.open-tab {
  position: relative !important;
  border: none !important;
  background: #c4cad4 !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 9px 14px 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  max-width: 240px !important;
  min-width: 110px !important;
  transition: background .15s ease, color .15s ease !important;
}

.open-tab:hover {
  background: #d2d7e0 !important;
  color: #1e293b !important;
}

.open-tab.active {
  background: #1e3a8a !important;
  color: #ffffff !important;
  box-shadow: 0 -2px 0 #1e3a8a inset, 0 -1px 8px rgba(30,58,138,0.25) !important;
  z-index: 2 !important;
}

.open-tab.active:hover {
  background: #1e40af !important;
  color: #ffffff !important;
}


/* v1.39 validación CUIT único */
.input.duplicated-cuit {
  border-color: #dc2626 !important;
  background: #fff1f2 !important;
}


/* v1.40 buscador de productos flotante en documentos */
.product-floating-results {
  display: none;
  max-height: 340px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .24);
  padding: 6px;
}

.product-floating-results.show {
  display: block !important;
}

.product-floating-results .product-search-result {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 12px;
  background: white;
  padding: 11px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #0f172a;
}

.product-floating-results .product-search-result:hover {
  background: #eff6ff;
}

.product-floating-results .product-search-result span {
  color: #64748b;
  font-size: 12px;
}


/* v1.41 cancelar documento / confirmar salida */
/* 2026-05-15 (spec final Martín): franja "Documento seleccionado..."
   ELIMINADA del HTML (los 3 callsites: venta, compra, NC compra).
   Botón nuevo .doc-back-btn-floating reemplaza la "X" — es un
   botón discreto "← Cambiar tipo" arriba a la derecha del body,
   delicado y poco invasivo. Pedido Martín: 'hay una cruz para volver
   a la pantalla de elegir comprobante hacela un botón para volver
   atrás y que este a la derecha arriba pero delicadamente'. */
.doc-back-btn-floating {
  position: absolute;
  top: 10px;
  right: 50px; /* deja espacio para el botón × de cerrar pestaña a su derecha */
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 6;
  transition: background .15s, color .15s, border-color .15s;
}
.doc-back-btn-floating:hover {
  background: #fff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, .25);
}


/* v1.42 líneas libres + buscador de producto */
.product-search-wrap .small-help {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.product-floating-results {
  display: none;
  max-height: 360px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .28);
  padding: 6px;
  z-index: 99999999 !important;
}

.product-floating-results.show {
  display: block !important;
}

.product-floating-results .product-search-result {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  padding: 11px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #0f172a;
}

.product-floating-results .product-search-result:hover {
  background: #eff6ff;
}

.product-floating-results .product-search-result span {
  color: #64748b;
  font-size: 12px;
}


/* v1.44 selección de producto confiable */
.product-floating-result {
  user-select: none;
  pointer-events: auto !important;
}

.product-floating-result strong,
.product-floating-result span {
  pointer-events: none;
}

.product-floating-results {
  pointer-events: auto !important;
}


/* v1.45 producto seleccionable + botón usar producto */
.product-floating-result {
  cursor: pointer !important;
}

.product-floating-result em {
  margin-top: 4px;
  color: #2563eb;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.product-search-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.btn-mini {
  padding: 6px 9px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
}


/* v1.46 selector inline de productos: sin datalist ni desplegable duplicado */
.product-search-wrap {
  position: relative !important;
}

.inline-product-results {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: min(560px, 82vw);
  z-index: 999999;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .20);
  padding: 8px;
}

.inline-product-results.show {
  display: block !important;
}

.product-inline-select {
  width: 100%;
  border: 0;
  outline: none;
  background: #ffffff;
  font-size: 14px;
}

.product-inline-select option {
  padding: 9px;
}

.product-search-results:not(.inline-product-results),
.product-floating-results {
  display: none !important;
}


/* v1.47 líneas de documentos estables */
.inline-product-results {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: min(620px, 86vw);
  max-height: 360px;
  overflow-y: auto;
  z-index: 9999999;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .22);
  padding: 8px;
}

.inline-product-results.show {
  display: block !important;
}

.product-result-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  border: 0;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.product-result-btn:hover {
  background: #eff6ff;
}

.product-result-btn strong {
  color: #0f172a;
}

.product-result-btn span {
  color: #64748b;
  font-size: 12px;
}

.product-result-btn b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #2563eb;
  font-size: 13px;
}

.product-search-results:not(.inline-product-results),
.product-floating-results {
  display: none !important;
}


/* v1.48 corrección total/documentos + selector directo */
.product-direct-select {
  max-width: 150px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  padding: 6px 8px;
  background: #ffffff;
  font-size: 12px;
}

.product-search-actions {
  flex-wrap: wrap;
}

.total-box [data-total-total],
.total-box .total-row.big strong {
  color: #0f172a;
}


/* v1.49 ventas reconstruido estable */
.simple-product-cell {
  position: relative;
  min-width: 300px;
}
.inline-product-results {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: min(620px, 86vw);
  max-height: 360px;
  overflow-y: auto;
  z-index: 9999999;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .22);
  padding: 8px;
}
.inline-product-results.show {
  display: block !important;
}
.product-result-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  border: 0;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}
.product-result-btn:hover {
  background: #eff6ff;
}
.product-result-btn strong { color: #0f172a; }
.product-result-btn span { color: #64748b; font-size: 12px; }
.product-result-btn b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #2563eb;
  font-size: 13px;
}
.product-search-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.product-direct-select {
  max-width: 180px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  padding: 6px 8px;
  background: #ffffff;
  font-size: 12px;
}

.table-wrap-autocomplete .simple-product-cell,
.compra-lines-card .simple-product-cell {
  min-width: 300px;
  max-width: 360px;
}

.table-wrap-autocomplete .inline-product-results,
.compra-lines-card .inline-product-results {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.compra-doc-card {
  width: 100%;
}

.lista-precio-form {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.lista-precio-editor {
  margin-top: 14px;
}

.lista-precio-search {
  max-width: 360px;
}


/* v1.50 clientes/vendedores fix */
#venta-cliente-results,
.search-results {
  z-index: 9999999 !important;
}

#venta-cliente-results.show {
  display: block !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .22) !important;
}

#venta-cliente-results .search-result-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: #ffffff;
  padding: 12px 14px;
  display: block;
  cursor: pointer;
}

#venta-cliente-results .search-result-item:hover {
  background: #eff6ff;
}

#venta-cliente-results .search-result-item strong {
  display: block;
}

#venta-cliente-results .search-result-item span {
  color: #64748b;
  font-size: 12px;
}


/* v1.51 vendedores y zonas */
.master-field {
  width: 100%;
}


/* v1.53 botón agregar línea abajo */
.line-actions-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 14px;
  margin-bottom: 10px;
}

.line-actions-bottom .btn {
  min-width: 160px;
}


/* v1.55 numeración automática */
.readonly-number,
input[readonly].readonly-number {
  background: #f8fafc;
  color: #475569;
  cursor: not-allowed;
}


/* archivos maestros */
.global-master-search {
  position: relative;
  width: min(360px, 34vw);
  min-width: 260px;
}

.global-master-search .input {
  border-radius: 999px;
  padding-left: 16px;
  padding-right: 16px;
  background: #ffffff;
}

.global-master-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(520px, 92vw);
  max-height: 420px;
  overflow-y: auto;
  z-index: 10000000;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .22);
  padding: 8px;
}

.global-master-results.show {
  display: block;
}

.global-master-count,
.global-master-empty {
  padding: 8px 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.global-master-result {
  width: 100%;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 3px 12px;
  align-items: center;
  border: 0;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.global-master-result:hover {
  background: #eff6ff;
}

.global-master-result span {
  grid-row: 1 / span 2;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.global-master-result strong {
  color: #0f172a;
  min-width: 0;
  overflow-wrap: anywhere;
}

.global-master-result small {
  color: #64748b;
  min-width: 0;
  overflow-wrap: anywhere;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.section-title-row h3 {
  margin: 0;
}

.confirm-dialog-backdrop {
  z-index: 10000010;
}

.confirm-dialog {
  width: min(440px, 92vw);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 28px 60px rgba(15, 23, 42, .32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.confirm-dialog-header {
  padding: 14px 18px;
  background: #eef6ff;
  border-bottom: 1px solid #cbd5e1;
}

.confirm-dialog-header h3 {
  margin: 0;
  font-size: 17px;
  color: #0f172a;
}

.confirm-dialog-body {
  padding: 18px;
  font-size: 15px;
  color: #1f2937;
  line-height: 1.45;
}

.confirm-dialog-footer {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}

/* Variantes de color para appAlert (reusa la base .confirm-dialog).
   Header coloreado por tipo: error rojo, warn ámbar, ok verde, info azul. */
.app-alert-backdrop { z-index: 10000020; }
.app-alert-dialog { width: min(420px, 92vw); }
.app-alert-body { white-space: pre-line; }

/* quickInputModal — mini-modal para alta inline de un campo (ej: + Nuevo
   transporte). z-index 10000025: por encima de .app-alert-backdrop (10000020)
   y de .bulk-modal-backdrop (10000001) donde vive el modal cliente. No usa
   z-index inline para evitar que CSS de clase quede pisado por specificity. */
.quick-input-modal-backdrop {
  z-index: 10000025;
}
.quick-input-dialog {
  width: min(480px, 92vw);
}
.quick-input-dialog .confirm-dialog-body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quick-input-dialog .confirm-dialog-body label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}
.quick-input-dialog .confirm-dialog-body .input {
  width: 100%;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 8px;
}
.quick-input-dialog .confirm-dialog-footer {
  padding: 12px 20px;
}
.app-alert-error .app-alert-header { background: #fee2e2; border-bottom-color: #fca5a5; }
.app-alert-error .app-alert-header h3 { color: #991b1b; }
.app-alert-warn  .app-alert-header { background: #fef3c7; border-bottom-color: #fcd34d; }
.app-alert-warn  .app-alert-header h3 { color: #92400e; }
.app-alert-ok    .app-alert-header { background: #d1fae5; border-bottom-color: #6ee7b7; }
.app-alert-ok    .app-alert-header h3 { color: #065f46; }
.app-alert-info  .app-alert-header { background: #dbeafe; border-bottom-color: #93c5fd; }
.app-alert-info  .app-alert-header h3 { color: #1e3a8a; }

.bulk-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000001;
  background: rgba(15, 23, 42, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overscroll-behavior: contain;
}

.bulk-modal {
  width: min(1320px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .34);
  overflow: hidden;
}

.bulk-modal-header,
.bulk-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: #eef6ff;
  border-bottom: 1px solid #cbd5e1;
}

.bulk-modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.bulk-modal-header p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 13px;
}

.bulk-toolbar {
  display: grid;
  grid-template-columns: 1fr 180px 210px;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.bulk-table-wrap {
  overflow: auto;
  min-height: 280px;
}

.bulk-table-wrap table {
  min-width: 860px;
}

.bulk-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.bulk-product-row:hover {
  background: #eff6ff;
}

.bulk-product-row.bulk-row-highlighted,
.bulk-product-row.bulk-row-highlighted:hover,
.bulk-cliente-row.bulk-row-highlighted,
.bulk-cliente-row.bulk-row-highlighted:hover,
tr.bulk-row-highlighted,
tr.bulk-row-highlighted:hover {
  background: #bae6fd;
  outline: 2px solid #38bdf8;
  outline-offset: -2px;
}

/* Filas de tablas listadas con navegación por flechas: clientes, proveedores
   (reusan .cliente-row), productos, ventas, compras, ofertas, listas de precios. */
.cliente-row:hover,
.venta-row:hover,
.compra-row:hover,
.prod-row:hover,
.of-row:hover,
.lp-row:hover,
.stock-rep-row:hover,
.stock-ext-row:hover { background: #f1f5f9; }
.cliente-row-selected,
.cliente-row-selected:hover {
  background: #bae6fd;
  outline: 2px solid #38bdf8;
  outline-offset: -2px;
}
.cliente-row:focus,
.venta-row:focus,
.compra-row:focus,
.prod-row:focus,
.of-row:focus,
.lp-row:focus,
.stock-rep-row:focus,
.stock-ext-row:focus { outline: 2px solid #0ea5e9; outline-offset: -2px; }

/* Constructor de informes (Fase 3): chips + drop zones + pivot */
.inf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #bae6fd;
  border-radius: 16px;
  font-size: 12px;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
}
.inf-chip:active { cursor: grabbing; }
.inf-chip.in-zone {
  background: #bae6fd;
  color: #0c4a6e;
  border-color: #38bdf8;
}
.inf-chip .inf-chip-x {
  cursor: pointer;
  opacity: 0.6;
  font-weight: 700;
  margin-left: 2px;
}
.inf-chip .inf-chip-x:hover { opacity: 1; color: #b91c1c; }
.inf-chip select {
  border: 1px solid #bae6fd;
  background: #fff;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 11px;
  margin-left: 2px;
}

.inf-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  min-height: 44px;
}
.inf-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  background: #fff;
  min-height: 44px;
  transition: background 0.15s, border-color 0.15s;
}
.inf-zone.empty::before {
  content: attr(data-empty-label);
  color: #94a3b8;
  font-size: 12px;
  font-style: italic;
  align-self: center;
}
.inf-zone.drag-over {
  background: #ecfeff;
  border-color: #06b6d4;
  border-style: solid;
}
.inf-zone-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  color: #475569;
}

.inf-pivot-table {
  border-collapse: collapse;
  width: 100%;
}
.inf-pivot-table th, .inf-pivot-table td {
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  text-align: right;
  font-size: 13px;
}
.inf-pivot-table th { background: #f1f5f9; font-weight: 600; text-align: center; }
.inf-pivot-table th.row-header { text-align: left; background: #f8fafc; }
.inf-pivot-table td.row-header { text-align: left; font-weight: 600; background: #f8fafc; }
.inf-pivot-table .row-total td, .inf-pivot-table .row-total th { background: #e0f2fe; font-weight: 600; }
.inf-pivot-table .col-total { background: #e0f2fe; font-weight: 600; }
.inf-pivot-table .grand-total { background: #bae6fd; font-weight: 700; }

.inf-filtro-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 0;
}
.inf-filtro-row .input { padding: 4px 8px; font-size: 13px; }

/* Tabs internos (ej. Stock: Existencias / Movimientos) */
.inner-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px;
}
.inner-tab {
  padding: 8px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #64748b;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.inner-tab.active {
  color: #0ea5e9;
  border-bottom-color: #0ea5e9;
  font-weight: 600;
}
.inner-tab:hover:not(.active) { color: #334155; }

.cliente-titulo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}
.cliente-titulo-row > h3 { margin: 0; }
.cliente-row-actions {
  margin: 0 auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cliente-row-actions-empty {
  margin: 0 auto;
  color: #94a3b8;
  font-style: italic;
}

.bulk-product-check,
#bulk-select-visible {
  width: 18px;
  height: 18px;
}

.bulk-stock-danger {
  color: #dc2626;
  font-weight: 800;
}

.bulk-stock-warning {
  color: #d97706;
  font-weight: 800;
}

.bulk-footer {
  border-top: 1px solid #cbd5e1;
  border-bottom: 0;
}

#bulk-visible-count {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.product-editor-modal {
  width: min(1560px, 98vw);
  /* Altura fija para que el modal NO cambie de tamaño al alternar pestañas
     (datos, foto, integraciones, etc.). Cada panel scrollea internamente
     dentro de .product-editor-body. */
  height: 94vh;
  max-height: 94vh;
}

/* Header de modales de maestros (clientes/proveedores/artículos) — alineado
   con el modal de Nueva Venta (header azul brand con texto blanco y botón
   cerrar blanco). Acordado 2026-05-09. Override sobre .bulk-modal-header
   genérico (que es claro). */
.product-editor-modal .product-editor-header,
.product-editor-modal .bulk-modal-header {
  background: #1e3a8a;
  color: #fff;
  border-bottom: 0;
  padding: 12px 18px;
  flex-shrink: 0;
}
.product-editor-modal .product-editor-header h3,
.product-editor-modal .bulk-modal-header h3 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.product-editor-modal .product-editor-header p,
.product-editor-modal .bulk-modal-header p {
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  margin: 3px 0 0;
}
.product-editor-modal .product-editor-header .btn-light,
.product-editor-modal .bulk-modal-header .btn-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}
.product-editor-modal .product-editor-header .btn-light:hover,
.product-editor-modal .bulk-modal-header .btn-light:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .55);
}

/* Tabs sobre fondo claro (pedido usuario 2026-05-09: que las pestañas NO
   estén dentro de la franja superior azul). Quedan en banda blanca debajo
   del header con la pestaña activa marcada por borde inferior azul brand
   en lugar de fondo. */
.product-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.product-modal-tab {
  border: 0;
  background: transparent;
  color: #475569;
  border-radius: 6px 6px 0 0;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  top: 1px;
  border-bottom: 2px solid transparent;
}

.product-modal-tab:hover {
  color: #1e3a8a;
  background: #f1f5f9;
}

.product-modal-tab.active {
  background: transparent;
  color: #1e3a8a;
  font-weight: 700;
  border-bottom: 2px solid #1e3a8a;
}

.product-editor-body {
  overflow: auto;
  padding: 16px;
  background: #ffffff;
  flex: 1 1 auto;
  min-height: 0;
}

.product-editor-section,
.product-analysis-section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.product-editor-notice {
  margin-bottom: 12px;
}

.product-editor-panels,
.product-analysis-columns {
  margin-top: 14px;
}

.product-editor-panel {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
}

.product-editor-panel h3,
.product-analysis-section h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.product-editor-actions {
  justify-content: flex-end;
  margin-top: 18px;
  position: sticky;
  bottom: -16px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 12px 0 0;
}

.product-analysis-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 28px;
  text-align: center;
  color: #64748b;
  font-weight: 800;
  background: #f8fafc;
}

.product-analysis-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.product-analysis-kpi {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  min-height: 104px;
}

.product-analysis-kpi span,
.product-analysis-kpi small {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.product-analysis-kpi strong {
  display: block;
  margin: 7px 0 5px;
  color: #0f172a;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.product-cost-chart {
  height: 190px;
  display: grid;
  grid-template-columns: repeat(12, minmax(44px, 1fr));
  gap: 8px;
  align-items: end;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  overflow-x: auto;
}

.product-cost-point {
  min-width: 44px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.product-cost-point span {
  font-size: 11px;
  color: #475569;
  font-weight: 800;
  white-space: nowrap;
}

.product-cost-bar {
  width: 100%;
  min-height: 12px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.product-cost-point small {
  font-size: 11px;
  color: #64748b;
  font-weight: 800;
}

.product-analysis-lines {
  display: grid;
  gap: 9px;
}

.product-analysis-lines div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 9px;
}

.product-analysis-lines div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.product-analysis-lines span {
  color: #64748b;
  font-weight: 800;
}

.product-analysis-lines strong {
  text-align: right;
  color: #0f172a;
}

.table-wrap.product-analysis-table {
  overflow-x: auto !important;
}

.table-wrap.product-analysis-table table {
  min-width: 760px !important;
}

.master-editor-card {
  overflow: hidden;
}

.master-editor-tabs {
  margin: 12px -16px 14px;
}

.master-editor-panel {
  padding-top: 2px;
}

.master-editor-modal .master-code-kpi {
  width: min(260px, 100%);
  min-height: auto;
  margin-bottom: 12px;
}

.cliente-editor-general {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.cliente-general-grid {
  grid-template-columns: minmax(160px, 220px) 1fr;
  align-items: start;
}

.cliente-general-obs textarea {
  min-height: 56px;
  resize: vertical;
}

.cliente-general-grid .field[data-master-field="activo"] select {
  font-weight: 600;
}

.client-account-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.cc-access-table table {
  min-width: 920px;
}

.cc-access-table .actions {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .top-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .global-master-search {
    width: 100%;
    min-width: 0;
    order: -1;
  }

  .global-master-results {
    left: 0;
    right: auto;
    width: min(100%, 92vw);
  }

  .bulk-toolbar {
    grid-template-columns: 1fr;
  }

  .bulk-modal-backdrop {
    align-items: stretch;
    padding: 10px;
  }

  .bulk-modal {
    max-height: 96vh;
  }

  .product-editor-modal {
    height: 96vh;
    max-height: 96vh;
  }

  .product-analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-editor-panels,
  .product-analysis-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .product-analysis-grid {
    grid-template-columns: 1fr;
  }

  .product-modal-tab {
    flex: 1 1 100%;
  }
}

/* Ajuste de grillas para trabajar a pantalla completa con bases grandes. */
.view {
  width: 100% !important;
  max-width: none !important;
  padding: 18px 14px !important;
}

.card {
  border-radius: 8px !important;
  padding: 16px !important;
}

.table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  border-radius: 8px !important;
}

/* A+B 2026-05-15: excluimos los listados is-listado (list-sticky-wrap,
   cliente-list-wrap) de esta regla. Esos listados quieren table-layout:
   auto + width natural para que las columnas tomen su ancho según
   contenido y la tabla crezca a la derecha con scroll horizontal en
   lugar de comprimir / superponer texto. El listado de Artículos
   (.table-articulos-wrap, fuera de .table-wrap) ya funciona así. */
.table-wrap:not(.list-sticky-wrap):not(.cliente-list-wrap) table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}
/* Para los wraps de listados is-listado: tabla en layout auto, sin width
   fijo, sin min-width 0. Así las celdas con nowrap fuerzan ancho mínimo
   propio y la tabla puede exceder el wrap → aparece scroll horizontal. */
.table-wrap.list-sticky-wrap table,
.table-wrap.cliente-list-wrap table {
  table-layout: auto;
}

.table-wrap.table-wrap-autocomplete {
  overflow: visible !important;
}

.table-wrap.table-wrap-autocomplete table {
  table-layout: auto !important;
}

.table-wrap th,
/* A+B 2026-05-14: excluimos los listados is-listado (list-sticky-wrap,
   cliente-list-wrap) de esta regla legacy. Esos listados quieren
   nowrap + scroll horizontal, no wrapping multi-línea. El listado de
   Artículos (que NO usa .table-wrap sino .table-articulos-wrap) es el
   modelo a replicar. */
.table-wrap:not(.list-sticky-wrap):not(.cliente-list-wrap) td {
  padding: 8px 9px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.table-wrap th {
  font-size: 12px !important;
}

.table-wrap:not(.list-sticky-wrap):not(.cliente-list-wrap) td.actions {
  display: table-cell !important;
  white-space: normal !important;
}

.table-wrap td.actions .btn {
  width: 100%;
  margin: 2px 0;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.table-wrap .badge {
  padding: 4px 7px;
  font-size: 11px;
}

.product-list-table th:nth-child(1),
.product-list-table td:nth-child(1) {
  width: 36px;
  text-align: center;
}

.product-list-table th:nth-child(2),
.product-list-table td:nth-child(2) {
  width: 10%;
}

.product-list-table th:nth-child(3),
.product-list-table td:nth-child(3) {
  width: 9%;
}

.product-list-table th:nth-child(4),
.product-list-table td:nth-child(4) {
  width: 24%;
}

.product-list-table th:nth-child(5),
.product-list-table td:nth-child(5) {
  width: 6%;
}

.product-list-table th:nth-child(6),
.product-list-table td:nth-child(6),
.product-list-table th:nth-child(7),
.product-list-table td:nth-child(7),
.product-list-table th:nth-child(8),
.product-list-table td:nth-child(8) {
  width: 9%;
}

.product-list-table th:nth-child(9),
.product-list-table td:nth-child(9) {
  width: 8%;
}

.product-list-table th:nth-child(10),
.product-list-table td:nth-child(10),
.product-list-table th:nth-child(11),
.product-list-table td:nth-child(11) {
  width: 6%;
}

.product-list-table th:nth-child(12),
.product-list-table td:nth-child(12) {
  width: 10%;
}

@media (max-width: 1100px) {
  .view {
    padding: 12px 8px !important;
  }

  .card {
    padding: 12px !important;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 7px 6px !important;
    font-size: 12px !important;
  }
}

/* ── Módulo Ofertas ──────────────────────────────────────────────────── */
.of-check-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--bg, #f4f7fb);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
}

.of-check-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
}

.of-check-row:hover {
  background: var(--soft-primary, #eff6ff);
}

.of-check-row input[type="checkbox"] {
  flex-shrink: 0;
}


/* Dashboard v1.56 — KPIs, notas y agenda */
.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-xs {
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
}

/* Notas */
.notas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.nota-item {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 10px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.nota-color-amarillo { background: linear-gradient(160deg, #fef3c7, #fde68a); border-color: #f59e0b; }
.nota-color-rosa     { background: linear-gradient(160deg, #fce7f3, #fbcfe8); border-color: #ec4899; }
.nota-color-verde    { background: linear-gradient(160deg, #d1fae5, #a7f3d0); border-color: #10b981; }
.nota-color-azul     { background: linear-gradient(160deg, #dbeafe, #bfdbfe); border-color: #3b82f6; }
.nota-color-naranja  { background: linear-gradient(160deg, #ffedd5, #fed7aa); border-color: #f97316; }
.nota-color-violeta  { background: linear-gradient(160deg, #ede9fe, #ddd6fe); border-color: #8b5cf6; }

.nota-item {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}

.nota-item:hover {
  transform: translateY(-2px) rotate(-.4deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

.nota-colors {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  opacity: .55;
  transition: opacity .15s ease;
}

.nota-item:hover .nota-colors { opacity: 1; }

.nota-color-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, .15);
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease, box-shadow .1s ease;
}

.nota-color-chip:hover {
  transform: scale(1.25);
}

.nota-color-chip.active {
  border-color: #1f2937;
  border-width: 2.5px;
  box-shadow: 0 0 0 2px #ffffff inset, 0 1px 4px rgba(0, 0, 0, .2);
}

/* Color picker grande dentro del modal */
.nota-colors-pick {
  display: flex;
  gap: 10px;
}

.nota-colors-pick .nota-color-chip {
  width: 32px;
  height: 32px;
}

.btn-icon-x {
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

.btn-icon-x:hover {
  background: rgba(0, 0, 0, .08);
  color: #1f2937;
}

.nota-texto {
  flex: 1;
  white-space: pre-wrap;
  outline: none;
  font-size: 13px;
  color: #1f2937;
  margin-bottom: 6px;
  min-height: 60px;
}

.nota-texto:focus {
  background: rgba(255, 255, 255, .6);
  border-radius: 4px;
}

.nota-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed rgba(0, 0, 0, .12);
  padding-top: 5px;
  font-size: 11px;
  color: #6b7280;
  gap: 6px;
}

/* Agenda */
.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}

.agenda-item {
  display: grid;
  grid-template-columns: auto 92px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}

.agenda-item.hoy {
  background: #eff6ff;
  border-color: #93c5fd;
}

.agenda-item.vencido {
  background: #fef2f2;
  border-color: #fca5a5;
}

.agenda-item.completado {
  opacity: .6;
}

.agenda-item.completado .agenda-titulo {
  text-decoration: line-through;
}

.agenda-fecha {
  text-align: center;
}

.agenda-dia {
  font-weight: 600;
  font-size: 12px;
  color: #374151;
}

.agenda-hora {
  font-size: 11px;
  color: #6b7280;
}

.agenda-titulo {
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
}

.agenda-desc {
  color: #6b7280;
  margin-top: 2px;
}

.agenda-check {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Dashboard modules — drag & drop */
.dashboard-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 980px) {
  .dashboard-modules { grid-template-columns: 1fr; }
}

.dashboard-module {
  position: relative;
  transition: opacity .15s ease, transform .15s ease;
  overflow: hidden;
}

.dashboard-module[data-cols="2"] { grid-column: span 2; }
.dashboard-module[data-rows="2"] { grid-row: span 2; }

.dashboard-module.resizing {
  outline: 2px dashed #1d4ed8;
  outline-offset: -2px;
}

.dashboard-resize-handle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #94a3b8;
  cursor: nwse-resize;
  background: rgba(255,255,255,0.85);
  border-radius: 4px;
  user-select: none;
  z-index: 2;
  transition: color .1s, background .1s, transform .1s;
}

.dashboard-resize-handle:hover {
  color: #1d4ed8;
  background: #e0e7ff;
  transform: scale(1.1);
}

@media (max-width: 980px) {
  /* En mobile el grid es 1 columna; resize no aplica. */
  .dashboard-module[data-cols="2"],
  .dashboard-module[data-rows="2"] {
    grid-column: auto;
    grid-row: auto;
  }
  .dashboard-resize-handle { display: none; }
}

.dashboard-module.dragging {
  opacity: .5;
  transform: scale(.99);
}

.dashboard-module-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.dashboard-drag-handle {
  cursor: grab;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: -2px;
  font-size: 18px;
  user-select: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background .1s ease, color .1s ease;
}

.dashboard-drag-handle:hover {
  background: #e5e7eb;
  color: #475569;
}

.dashboard-drag-handle:active { cursor: grabbing; }

/* KPI alert + sub label */
.kpi-alert {
  border-left: 4px solid #b91c1c;
  background: linear-gradient(135deg, #fff, #fef2f2);
}

.kpi-alert .value { color: #991b1b; }

.kpi-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* Modal */
.app-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Por encima de .comprobante-modal-overlay (10000000) y .bulk-modal-backdrop
     (10000001), por debajo de .confirm-dialog-backdrop (10000010). Necesario
     para que sub-modales como "Vincular producto" y "Crear producto desde
     línea" se vean al abrirse desde el modal del comprobante de compra. */
  z-index: 10000005;
  animation: appModalFadeIn .15s ease;
  overscroll-behavior: contain;
}

@keyframes appModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.app-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: appModalSlideIn .2s ease;
}

@keyframes appModalSlideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.app-modal-header h3 { margin: 0; font-size: 16px; }

.app-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
}

.app-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}

/* Headers ordenables (sortable) */
table th.sortable-th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 18px !important;
}
table th.sortable-th:hover {
  background: #eef2ff;
}
table th.sortable-th::after {
  content: "↕";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .35;
  font-size: 10px;
}
table th.sortable-th.sorted-asc::after {
  content: "▲";
  opacity: 1;
}
table th.sortable-th.sorted-desc::after {
  content: "▼";
  opacity: 1;
}

/* Cuando hay un modal abierto, bloqueamos el scroll del fondo. Sin esto, la
   rueda del mouse sobre el overlay (que es position:fixed pero deja pasar el
   evento wheel) termina desplazando el <body> de atrás. */
html:has(.comprobante-modal-overlay, .app-modal-overlay, .bulk-modal-backdrop),
body:has(.comprobante-modal-overlay, .app-modal-overlay, .bulk-modal-backdrop) {
  overflow: hidden;
}

/* Comprobante modal (ventas/compras en popup estilo MerNet) */
.comprobante-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  z-index: 10000000;
  animation: appModalFadeIn .15s ease;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Feature #19 (2026-05-10): comprobante in-page (pestaña Chrome real).
   El comprobante deja de ser overlay y ocupa #view. La página se comporta
   como un "modal de alto fijo": el header azul queda fijo arriba, la barra
   de Guardar+Totales queda fija abajo, y el cuerpo (cliente + items +
   condición + observaciones) scrollea internamente. Esto restaura el sticky
   que tenía el modal viejo (.comprobante-modal-header + .comprobante-modal-body
   con flex:1; overflow:auto) sin necesitar overlay.

   Cuando #view contiene una .comprobante-page lo forzamos a layout flex que
   llene la altura útil (viewport menos topbar de ~80px). El padding default
   del .view (28px) se elimina para que el comprobante use todo el ancho. */
.view:has(.comprobante-page) {
  padding: 0;
  /* 2026-05-15 (zoom-removal + fullheight): SIN número mágico. Replicamos
     el patrón TABLES-OPTIN — el .main padre se vuelve flex column 100vh
     (regla siguiente) y este view absorbe TODO el alto sobrante con
     flex:1. Sin calc(100vh - Npx). El criterio de aceptación de Martín
     es: 'la pantalla de comprobante ocupa el 100% del alto visible, en
     distintos tamaños de ventana, sin franja vacía abajo'. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
/* Hacer el .main flex column 100vh cuando contiene un comprobante,
   igual que se hace con is-listado. El #view interior usa flex:1 y
   absorbe el alto sobrante sin necesidad de números mágicos. */
.main:has(> .view:has(.comprobante-page)) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
#app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view:has(.comprobante-page)) {
  height: calc(100vh - 122px);
}
@media (max-width: 768px) {
  .main:has(> .view:has(.comprobante-page)) {
    height: 100dvh;
  }
  #app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view:has(.comprobante-page)) {
    height: calc(100dvh - 122px);
  }
}
/* D-F1 (2026-05-14): Layout fullscreen del comprobante cuando el usuario
   activa `usar_comprobante_fullscreen`. El número mágico `calc(100dvh -
   100px)` es la raíz de la "franja blanca cortada abajo" que reporta el
   operador — falla cuando el banner AFIP está visible, en mobile, o cuando
   el chrome del ERP cambia de altura. Replicamos el patrón TABLES-OPTIN
   (que funciona para listados): .main flex column de altura 100vh y el
   #view absorbe TODO el sobrante. Sin números mágicos. */
.main:has(> .view:has(.comprobante-page.comprobante-fs)) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
#app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view:has(.comprobante-page.comprobante-fs)) {
  height: calc(100vh - 122px);
}
@media (max-width: 768px) {
  .main:has(> .view:has(.comprobante-page.comprobante-fs)) {
    height: 100dvh;
  }
  #app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view:has(.comprobante-page.comprobante-fs)) {
    height: calc(100dvh - 122px);
  }
}
.view:has(.comprobante-page.comprobante-fs) {
  /* Anula el `height: calc(100dvh - 100px)` legacy de la regla previa.
     Con flag ON, el view absorbe el alto vía flex sin número mágico. */
  height: auto;
  flex: 1;
  min-height: 0;
}
/* Zona 1 expandida (firma Martín 2026-05-14): cuando flag ON, el header
   muestra razón social + CUIT + lista + condición + dirección. La línea
   .comprobante-page-header-entidad se llena con todos esos campos en
   updateComprobanteHeaderEntidadInfo. La franja azul gana 1-2 líneas. */
.comprobante-page.comprobante-fs .comprobante-page-header-entidad {
  /* Más respiro vertical para 2-3 líneas de info del cliente. */
  gap: 4px 18px;
}
.comprobante-page.comprobante-fs .comprobante-header-entidad-cli {
  /* Razón social + CUIT van en una línea propia, tipografía un poco más
     marcada para que el operador no la pierda de vista. */
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
}
/* Mobile compacto (firma Martín 2026-05-14): zona 1 en 1-2 líneas. */
@media (max-width: 768px) {
  .comprobante-page.comprobante-fs .comprobante-page-header {
    padding: 8px 12px 6px;
  }
  .comprobante-page.comprobante-fs .comprobante-page-header-entidad {
    gap: 2px 10px;
    margin-top: 4px;
    padding-top: 4px;
    font-size: 11px;
  }
  .comprobante-page.comprobante-fs .comprobante-header-entidad-cli {
    font-size: 12px;
  }
  /* En mobile sólo razón social + CUIT + lista; dirección y condición se
     ocultan para ahorrar pantalla vertical (operador toca el header del
     ERP / abre cliente si necesita verlas). */
  .comprobante-page.comprobante-fs .comprobante-header-entidad-part[data-field="direccion"],
  .comprobante-page.comprobante-fs .comprobante-header-entidad-part[data-field="localidad"],
  .comprobante-page.comprobante-fs .comprobante-header-entidad-part[data-field="condicion"] {
    display: none;
  }
}
.comprobante-page {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  /* 2026-05-15 (spec final): position:relative para anclar los botones
     flotantes (.doc-back-btn-floating, .comprobante-modal-close-floating). */
  position: relative;
  /* HOTFIX 2026-05-15: !important defensivo después de bug reportado
     de "el comprobante entero no scrollea". Garantiza la cadena flex
     completa para que el body interno pueda absorber el espacio y
     scrollear sin que otras reglas la rompan. */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
}
/* 2026-05-15 (spec final): la barra azul del header del comprobante
   queda OCULTA (Martín: 'las dos primeras filas azules ya no tiene
   sentido tampoco, porque el titulo esta arriba de todo'). El page-
   title del chrome ya muestra el tipo + cliente. El botón cerrar (×)
   pasa a flotante absoluto en la esquina superior derecha del page. */
.comprobante-page-header {
  display: none;
}
/* Botón × flotante para cerrar el comprobante (reemplaza el botón
   que vivía dentro de .comprobante-page-header-main). El JS sigue
   bindeando #comprobante-modal-close, así que el helper que lo
   busca al crear el page sigue funcionando. */
.comprobante-page > .comprobante-modal-close-floating {
  position: absolute;
  top: 8px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: #475569;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comprobante-page > .comprobante-modal-close-floating:hover {
  background: rgba(15, 23, 42, .12);
  color: #1e293b;
}
/* Línea sticky con info del cliente / proveedor (dirección, localidad, lista,
   condición). Se llena vía updateComprobanteHeaderEntidadInfo desde el
   renderer. Si no hay entidad, el atributo `hidden` la oculta. */
.comprobante-page-header-entidad {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px;
  color: rgba(255, 255, 255, .92);
  line-height: 1.4;
}
.comprobante-page-header-entidad[hidden] { display: none; }
.comprobante-header-entidad-part {
  white-space: nowrap;
}
.comprobante-header-entidad-label {
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}
.comprobante-page-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 10px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Todo lo que NO es items ni save-bar queda anclado arriba con
   flex-shrink:0 — fijo, no scrollea. */
.comprobante-page-body > *:not(.comprobante-items-card):not(.comprobante-save-bar) {
  flex-shrink: 0;
}
/* Cards de encabezado: más finas, juntas, delicadas (Martín spec
   final: 'hace mas delicado la informacion de arriba, contenedores
   mas chicos y juntos'). */
.comprobante-page-body > .card:not(.comprobante-items-card) {
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.comprobante-page-body > .card:not(.comprobante-items-card) .form-grid {
  gap: 6px 10px;
}
.comprobante-page-body > .card:not(.comprobante-items-card) .field {
  margin-bottom: 0;
}
.comprobante-page-body > .card:not(.comprobante-items-card) .field label {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 1px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #475569;
}
.comprobante-page-body > .card:not(.comprobante-items-card) .field .input,
.comprobante-page-body > .card:not(.comprobante-items-card) .field select,
.comprobante-page-body > .card:not(.comprobante-items-card) .field input {
  padding: 5px 8px;
  font-size: 12.5px;
  height: 28px;
  border-radius: 4px;
}
.comprobante-page-body > .card:not(.comprobante-items-card) .small-help {
  font-size: 10.5px;
  margin-top: 1px;
}
/* Items-card: ocupa todo el espacio restante (más espacio = más
   filas visibles, como pidió Martín). */
.comprobante-page-body > .comprobante-items-card {
  flex: 1 1 auto;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.comprobante-page-body > .comprobante-items-card > .section-title-row,
.comprobante-page-body > .comprobante-items-card > .line-actions-bottom {
  flex-shrink: 0;
}
.comprobante-page-body > .comprobante-items-card > .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
/* Wrap con autocomplete: el dropdown del buscador de productos
   necesita poder salir del wrap. Trade-off conocido: overflow:visible
   pierde el scroll-y del wrap, pero ahora el padre items-card es
   overflow:hidden + flex:1 → la tabla con altura natural queda
   contenida y si excede, el SCROLL es del propio items-card por
   tener overflow:hidden? No — necesita ser overflow:auto. Compromiso:
   wrap-autocomplete con overflow:visible + max-height para forzar
   altura. El items-card ENVOLVENTE hace el scroll. */
.comprobante-page-body > .comprobante-items-card > .table-wrap-autocomplete {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
/* Cuando el wrap interno es autocomplete (overflow:visible), el SCROLL
   debe estar en el items-card. Lo cambiamos a overflow-y:auto SOLO
   cuando contiene un .table-wrap-autocomplete. */
.comprobante-page-body > .comprobante-items-card:has(> .table-wrap-autocomplete) {
  overflow-y: auto;
  overflow-x: hidden;
}
/* Save-bar: ahora vive fuera del scroll, anclada abajo por flex. */
.comprobante-page-body > .comprobante-save-bar {
  flex-shrink: 0;
  margin-top: 0;
  position: static;
  padding: 10px 14px;
  border-radius: 4px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}
/* 2026-05-15 (zoom-removal + 5 filas + sticky header): después de
   sacar el zoom 0.8 global, el scroll del body funciona perfecto.
   Ahora podemos sumar STICKY a la primera card del body (encabezado
   del cliente/proveedor) Y al thead de la tabla de artículos sin
   romper el dropdown del autocomplete (que sigue con overflow:visible
   porque el body es bloque scroll, no flex column).

   Pedido de Martín: 'desde el título hasta la fila de nombre de las
   columnas de artículos no se mueva, siempre fijo + que se vean al
   menos 5 filas a la vez'. */

/* Thead sticky DENTRO del items-card cuando el scroll está ahí
   (caso autocomplete) o dentro del wrap (caso table-wrap simple).
   En ambos casos sticky top:0 relativo al scroll container más
   cercano funciona correctamente. */
.comprobante-page-body .comprobante-items-card thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f1f5f9;
}
/* Pegada al fondo del body scrolleable: la barra "Total + Guardar". Queda
   visible sin importar cuánto se scrollee la tabla de artículos. */
.comprobante-page-body .comprobante-save-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  margin-top: 16px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  z-index: 5;
}
/* Headers de la tabla de artículos también sticky dentro del scroll del body.
   El usuario pidió ver más renglones — con el body más alto y la tabla con
   thead sticky, se aprovecha todo el espacio vertical. */
.comprobante-page-body .comprobante-items-card table thead th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  z-index: 2;
}

/* Botones chicos al lado del código de una línea de compra para vincular
   el código suelto a un producto del catálogo o crear el producto al vuelo.
   Se muestran sólo cuando la línea no quedó matcheada a ningún producto. */
.line-link-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.line-link-btn {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #1e3a8a;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.25;
}
.line-link-btn:hover { background: #dbeafe; border-color: #93c5fd; }
.line-link-btn.create {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}
.line-link-btn.create:hover { background: #fde68a; }

.comprobante-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
  width: 100%;
  max-width: 1180px;
  /* Altura fija (no max) para que el modal NO cambie de tamaño cuando el
     contenido crece (renglones del comprobante, pestañas del editor de
     usuarios, etc.). El cuerpo scrollea internamente vía .comprobante-modal-body
     (flex: 1; min-height: 0; overflow-y: auto). */
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: appModalSlideIn .2s ease;
}

.comprobante-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #1e3a8a;
  color: #fff;
}

.comprobante-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.comprobante-modal-close,
.comprobante-modal-min {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}

.comprobante-modal-close:hover,
.comprobante-modal-min:hover {
  background: rgba(255, 255, 255, .15);
}

.modal-window-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Estado minimizado del overlay del comprobante: no quitamos el DOM, sólo
   ocultamos visualmente para conservar foco/scroll/inputs cargados. */
.comprobante-modal-overlay.modal-minimized,
.bulk-modal-backdrop.modal-minimized,
.app-modal-overlay.modal-minimized {
  display: none !important;
}

/* Stack de chips minimizados: se apilan a la izquierda del chip más reciente
   en una fila horizontal abajo a la derecha. Permite tener varios modales
   minimizados a la vez (ej. la ficha del producto + el ajuste de stock). */
.modal-chip-stack {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  z-index: 9999990;
  pointer-events: none;
}
.modal-chip-stack .modal-chip-stacked {
  position: static !important;
  pointer-events: auto;
}

/* Cartel sticky de "tu sesión cierra en X s" (Sprint J3, 2026-05-10).
 * Aparece abajo a la izquierda — la derecha la ocupa el chip stack de
 * modales minimizados. Click postpone el cierre. */
.idle-countdown-chip {
  position: fixed;
  bottom: 16px;
  left: 16px;
  background: #b91c1c;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  z-index: 9999991;
  max-width: 360px;
  animation: idle-countdown-pulse 2s ease-in-out infinite;
}
.idle-countdown-chip:hover {
  background: #991b1b;
}
.idle-countdown-chip strong {
  font-size: 16px;
  margin: 0 2px;
}
@keyframes idle-countdown-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(185, 28, 28, .35); }
  50%      { box-shadow: 0 8px 32px rgba(185, 28, 28, .65); }
}

/* Chip flotante cuando el modal está minimizado (estilo "barra de tareas"). */
.modal-chip-minimized {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: #1e3a8a;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  z-index: 9999990;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}
.modal-chip-minimized:hover { background: #1e40af; }
.modal-chip-icon { opacity: .85; }
.modal-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-chip-action {
  opacity: .85;
  margin-left: 4px;
  font-size: 14px;
}

.comprobante-modal-body {
  /* 2026-05-15 (madrugada 4): el div del body tiene 2 clases
     (comprobante-page-body + comprobante-modal-body). Antes esta
     regla tenía overflow-y:auto !important, que peleaba con el
     overflow:hidden !important de .comprobante-page-body (que es el
     que activa el patrón flex-3-zonas: solo items-card scrollea).
     Como `comprobante-modal-body` viene DESPUÉS en el CSS, su
     !important ganaba y el body entero scrolleaba, rompiendo el
     sticky header/footer del comprobante. Removido overflow-y de
     acá: la cadena flex de `.comprobante-page-body` ya cumple.
     Mantenemos flex/min-height por defensa. */
  flex: 1 !important;
  min-height: 0 !important;
  padding: 10px 14px;
}

.comprobante-save-bar .doc-total {
  margin: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}

.comprobante-save-bar .total-box {
  background: transparent;
  border: 0;
  padding: 0;
}

.comprobante-modal-body .total-box {
  min-width: 0;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: baseline;
  justify-content: flex-end;
  padding: 6px 12px;
  border-radius: 10px;
}

.comprobante-modal-body .total-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 13px;
}

.comprobante-modal-body .total-row.big {
  font-size: 16px;
  font-weight: 800;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  margin-left: 4px;
}

.comprobante-modal-body .card {
  margin-bottom: 6px;
  padding: 8px 12px;
}
/* Compactar el header del comprobante para que la primera fila de la tabla
   de items entre sin scroll. Ajustes acotados al modal — afuera no aplican. */
.comprobante-modal-body .section-title-row { margin-bottom: 6px; }
.comprobante-modal-body .document-selected-notice {
  padding: 6px 10px !important;
  font-size: 12px;
  margin-bottom: 6px !important;
}
.comprobante-modal-body .doc-cancel-btn {
  width: 26px;
  height: 26px;
  font-size: 16px;
}
.comprobante-modal-body .notice { margin-bottom: 6px; }
.comprobante-items-card table th { padding: 4px 6px; font-size: 11px; }

.comprobante-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 10px 0 4px;
  margin-top: 8px;
  border-top: 1px solid #e5e7eb;
  z-index: 5;
}

/* Cuando la barra de guardar de un modal sólo tiene el botón (sin total al
   lado), alinearlo a la derecha. Aplica a Recibo, Orden de Pago, etc. */
.comprobante-save-bar:has(> button:only-child) {
  justify-content: flex-end;
}

.comprobante-save-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
}
/* Indicador visual del shortcut F10 en el botón primario del modal. */
.comprobante-save-btn::after,
.app-modal-footer .btn-primary:last-child::after {
  content: " · F10";
  opacity: .65;
  font-weight: 500;
  font-size: 0.85em;
}

/* Inputs/selects compactos dentro del modal de comprobante */
.comprobante-modal-body input.input,
.comprobante-modal-body select,
.comprobante-modal-body select.input {
  padding: 3px 8px;
  font-size: 13px;
  min-height: 28px;
  height: 28px;
}

.comprobante-modal-body .field label {
  font-size: 11px;
  margin-bottom: 1px;
  display: block;
}

.comprobante-modal-body .small-help {
  font-size: 10px;
  margin-top: 1px;
  line-height: 1.25;
}

.comprobante-modal-body .form-grid {
  gap: 4px 10px;
}

.comprobante-modal-body .card {
  box-shadow: none;
  border: 1px solid #e5e7eb;
}

@media (max-width: 1100px) {
  .comprobante-modal-overlay { padding: 8px; }
  .comprobante-modal { max-width: 100%; border-radius: 8px; }
  .comprobante-modal-body { padding: 12px; }
}

.ref-comprobante,
.ref-cliente,
.ref-proveedor {
  color: #1d4ed8;
  text-decoration: underline;
  cursor: pointer;
}
.ref-comprobante:hover,
.ref-cliente:hover,
.ref-proveedor:hover {
  color: #1e3a8a;
}

/* =================== Filtros CC y paginación =================== */

.cc-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 14px;
  align-items: end;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.cc-filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cc-filtro-grupo > label {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cc-filtro-grupo select,
.cc-filtro-grupo input[type="date"],
.cc-filtro-grupo input[type="search"],
.cc-filtro-grupo input[type="text"] {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  box-sizing: border-box;
}

.cc-filtro-grupo input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.cc-filtro-grupo-buscar {
  grid-column: span 2;
}

.cc-filtro-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.cc-filtro-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
}

.cc-filtro-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.cc-filtro-acciones {
  align-items: stretch;
}

.cc-filtro-acciones .btn {
  width: 100%;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 4px;
}

.pagination-info {
  font-size: 13px;
  color: #475569;
}

.pagination-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.pagination-btn {
  min-width: 32px;
  padding: 5px 10px;
  border: 1px solid #cbd5e1;
  background: white;
  color: #1e293b;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.12s;
}

.pagination-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.pagination-btn.active {
  background: #1e293b;
  color: white;
  border-color: #1e293b;
}

.pagination-btn:disabled {
  background: #f8fafc;
  color: #cbd5e1;
  cursor: not-allowed;
  border-color: #e2e8f0;
}

.pagination-ellipsis {
  padding: 5px 6px;
  color: #94a3b8;
  font-size: 13px;
}

/* ============ MOBILE MENU (sidebar overlay + burger) ============ */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  margin-right: 6px;
  color: inherit;
  align-self: center;
}

.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 998;
}
.mobile-backdrop.open {
  display: block;
}

@media (max-width: 1000px) {
  /* Sobrescribe el layout column anterior y vuelve sidebar overlay deslizante */
  #app {
    flex-direction: row;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 999;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.0);
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  }
  main {
    width: 100%;
  }
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
  }
}

/* === Dashboard: Recordatorio de tareas === */
.rec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 12px;
}

.rec-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #475569;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}

.rec-tab:hover { background: #f1f5f9; color: #1e293b; }

.rec-tab.active {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
  background: #eff6ff;
}

.rec-tab-emoji { font-size: 14px; }

.rec-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}

.rec-tab-badge.with-items { background: #1d4ed8; color: #fff; }
.rec-tab.active .rec-tab-badge.with-items { background: #1e40af; }

.rec-empty {
  padding: 24px 12px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.rec-table th { font-size: 12px; }
.rec-row { cursor: pointer; }
.rec-row:hover { background: #f8fafc; }
.rec-row:focus { outline: 2px solid #1d4ed8; outline-offset: -2px; }
/* 2026-05-15: si la fila está SELECCIONADA y además hovered, el azul
   del selected gana sobre el gris hover (sino visualmente pierde
   el highlight al pasar el mouse). */
.rec-row.cliente-row-selected,
.rec-row.cliente-row-selected:hover {
  background: #bae6fd;
}

.rec-dias {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.rec-dias-verde { background: #d1fae5; color: #065f46; }
.rec-dias-amber { background: #fef3c7; color: #92400e; }
.rec-dias-rojo  { background: #fee2e2; color: #991b1b; }

/* === Editor de horario de trabajo en usuarios === */
.horario-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.horario-row {
  display: grid;
  grid-template-columns: 160px 110px 30px 110px;
  gap: 10px;
  align-items: center;
}

.horario-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.horario-dia-label { font-weight: 600; color: #374151; }

.horario-row .input { padding: 4px 6px; font-size: 14px; }
.horario-row .input:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }

/* === Sección colapsable dentro del editor de usuarios === */
.user-editor-section {
  margin-top: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.user-editor-section > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border-bottom: 1px solid transparent;
  user-select: none;
}

.user-editor-section[open] > summary {
  border-bottom-color: #e5e7eb;
}

.user-editor-section > summary::-webkit-details-marker { display: none; }
.user-editor-section > summary::marker { content: ""; }

.user-editor-section > summary::before {
  content: "▶";
  font-size: 10px;
  color: #6b7280;
  transition: transform .12s ease;
}

.user-editor-section[open] > summary::before {
  transform: rotate(90deg);
}

.user-editor-section-title {
  font-weight: 700;
  font-size: 16px;
  color: #1e293b;
  flex-shrink: 0;
}

.user-editor-section-hint {
  font-size: 13px;
  color: #6b7280;
  flex: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-editor-section > :not(summary) {
  padding: 0 14px 14px;
}

.user-editor-section > :first-of-type:not(summary) {
  padding-top: 12px;
}

.horario-sep {
  text-align: center;
  color: #6b7280;
  font-size: 12px;
}

@media (max-width: 600px) {
  .horario-row { grid-template-columns: 1fr; }
  .horario-sep { display: none; }
}

/* === Modal de usuario: barra superior con datos básicos siempre visible === */
/* Se monta como hermano flex entre el header del modal y el body scrollable
   para que Nombre, Usuario, Mail, PIN, Rol, Vendedor y Depósito queden a la
   vista mientras se scrollea por permisos / horario. */
.user-editor-toolbar {
  flex-shrink: 0;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.user-editor-toolbar .form-grid {
  margin: 0;
  gap: 8px 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.user-editor-toolbar .field label {
  font-size: 12px;
  margin-bottom: 2px;
}

.user-editor-toolbar input.input,
.user-editor-toolbar select {
  padding: 5px 8px;
  font-size: 13px;
  min-height: 30px;
  height: 30px;
  border-radius: 8px;
}

/* Barra de acciones (Guardar / Cancelar) anclada al pie del modal de
   usuario. flex-shrink:0 garantiza que no se comprima al crecer el body. */
.user-editor-actions {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 6px rgba(15, 23, 42, .04);
}

.user-editor-actions .btn { padding: 8px 18px; font-weight: 600; }

@media (max-width: 600px) {
  .user-editor-toolbar { padding: 8px 10px; }
  .user-editor-actions { padding: 8px 10px; }
  .user-editor-actions .btn { flex: 1; }
}

/* ===== AFIP "Mis Comprobantes Recibidos" — dropzone del modal de sync ===== */
.afip-sync-dropzone {
  margin-top: 14px;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  padding: 22px 16px;
  text-align: center;
  transition: all 0.15s ease;
  cursor: pointer;
  outline: none;
}
.afip-sync-dropzone:hover,
.afip-sync-dropzone:focus-visible {
  border-color: #94a3b8;
  background: #f1f5f9;
}
.afip-sync-dropzone.is-drag {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.afip-sync-dropzone-icon {
  font-size: 28px;
  color: #64748b;
  margin-bottom: 4px;
}
.afip-sync-dropzone-title {
  font-weight: 600;
  font-size: 15px;
  color: #1e293b;
}
.afip-sync-dropzone-sub {
  font-size: 13px;
  color: #475569;
  margin-top: 2px;
}
.afip-sync-dropzone-status {
  margin-top: 10px;
  padding: 8px 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  color: #065f46;
  font-size: 13px;
  text-align: left;
}

/* ===== Popup flotante: borrador AFIP siendo editado ===== */
.afip-float-panel {
  position: fixed;
  top: 90px;
  right: 16px;
  width: 280px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  z-index: 10000005;
  font-size: 13px;
  color: #1e293b;
  overflow: hidden;
}
.afip-float-panel.is-collapsed .afip-float-panel-body {
  display: none;
}
.afip-float-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  font-size: 14px;
  color: #1e3a8a;
}
.afip-float-panel-close {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #1e3a8a;
  padding: 0 4px;
}
.afip-float-panel-close:hover { color: #0f172a; }
.afip-float-panel-body {
  padding: 10px 14px 12px;
}
.afip-float-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted #e2e8f0;
}
.afip-float-row:last-of-type { border-bottom: none; }
.afip-float-row > span { color: #64748b; }
.afip-float-row > strong { font-weight: 600; text-align: right; }
.afip-float-sep {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 6px 0;
}
.afip-float-status {
  margin-top: 8px;
  padding-top: 8px;
  font-size: 14px;
}
@media (max-width: 1100px) {
  .afip-float-panel {
    width: 220px;
    right: 8px;
    top: 70px;
  }
}

/* ===== Panel "faltantes informados desde depósito" en form de venta ===== */
.faltantes-panel {
  margin: 12px 0;
  padding: 12px 14px;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  border-radius: 8px;
  color: #78350f;
}
.faltantes-panel-titulo {
  font-weight: 600;
  margin-bottom: 6px;
}
.faltantes-panel ul {
  margin: 6px 0 8px;
  padding-left: 22px;
}
.faltantes-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}


/* === v1.55.2 — Listado con header pegajoso completo ======================
   En cada pestaña con listado, todo el bloque de cabecera (título + acciones
   + filtros + búsqueda + fila "Acciones" sobre la tabla) queda estático,
   incluso con muchas filas. Estrategia: la `.view` que contiene un listado
   se convierte en un flex column del alto del viewport (descontado el menú
   superior); la card que envuelve la tabla pasa a flex:1 con flex column
   adentro, y solo la `.table-wrap` (o `.table-articulos-wrap`) scrollea.

   Excluye:
   - `.table-wrap-autocomplete` (resultados inline de búsqueda).
   - `.product-analysis-table` (análisis de producto, no es un listado).
*/

/* TABLES-V5 (2026-05-14): la .view de listado YA NO tiene altura fija
   con calc(100vh - Npx). La altura se hereda del estirado flex de .main
   (regla TABLES-OPTIN — ver más abajo). Las 4 reglas viejas con
   `height: calc(100vh - ...)` se borraron porque competían entre sí y
   ninguna llenaba la pantalla en pantallas grandes.
   La regla que SÍ queda es .view.is-listado (flex column) + el ancho de
   .main:has(>.view.is-listado) que define la altura efectiva.

   La regla heredada `.view > .card:has(>...)` que ponía flex column en
   la card también se borró (queda en .view.is-listado > .card:last-child
   de la regla nueva). */

/* La table-wrap (genérica o de productos) es la única zona scrolleable. */
.view > .card > .table-wrap:not(.table-wrap-autocomplete):not(.product-analysis-table),
.view > .card > .table-articulos-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Thead pegajoso al tope del table-wrap (table-articulos-wrap ya lo trae). */
.view > .card > .table-wrap:not(.table-wrap-autocomplete) thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f9fafb;
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

/* TABLES-V5 (2026-05-14): el bloque v1.55.3 con `height: calc(100vh - 130px) !important`
   y el media query asociado también se borraron. La altura del listado
   ahora viene del flex de .main (TABLES-OPTIN) y del :last-child que
   absorbe (regla nueva más abajo). El padding 6px 10px + gap del
   listado también está en .view.is-listado de TABLES-OPTIN. */

/* Topbar más compacta (impacta global, pero la altura queda igual de
   legible y libera ~24px verticales). */
.topbar {
  padding: 8px 28px !important;
}
.topbar h2 {
  font-size: 18px !important;
  line-height: 1.2 !important;
}
.topbar p {
  margin: 1px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Cards del listado: menos padding y sin borde redondo grande. */
.view > .card:has(> .table-wrap:not(.table-wrap-autocomplete):not(.product-analysis-table)),
.view > .card:has(> .table-articulos-wrap),
.view > .card:has(+ .card > .table-wrap),
.view > .card:has(+ .card > .table-articulos-wrap) {
  padding: 8px 12px !important;
  border-radius: 6px !important;
}

/* Cabecera de cada card (título + actions row + filas tipo "Acciones"):
   menos margin para liberar verticales. */
.view > .card > .section-title-row,
.view > .card > .cliente-titulo-row {
  margin-bottom: 4px !important;
}
.view > .card > .section-title-row > h3,
.view > .card > .cliente-titulo-row > h3 {
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Form-grid de filtros y buscador: menos gap y margin. */
.view > .card > .form-grid {
  gap: 4px 10px !important;
  margin: 4px 0 !important;
}
.view > .card > .form-grid .field label {
  font-size: 11px !important;
  margin-bottom: 2px !important;
}
.view > .card > .form-grid input.input,
.view > .card > .form-grid select,
.view > .card > .form-grid select.input,
.view > .card > .form-grid textarea {
  padding: 4px 8px !important;
  font-size: 13px !important;
  height: auto !important;
  min-height: 28px !important;
}

/* Botones del header de listado: más compactos. */
.view > .card > .section-title-row .btn,
.view > .card > .cliente-titulo-row .btn,
.view > .card > .actions .btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  min-height: 26px !important;
}

/* small-help y contador del listado: menos margen. */
.view > .card > .small-help {
  margin: 2px 0 !important;
  font-size: 11px !important;
}

/* Filas de la tabla del listado: menos padding (gana ~12-14px por fila). */
.view > .card > .table-wrap:not(.table-wrap-autocomplete) th,
.view > .card > .table-wrap:not(.table-wrap-autocomplete) td {
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.view > .card > .table-articulos-wrap th,
.view > .card > .table-articulos-wrap td {
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Botones dentro de la columna Acciones: mucho más chicos para no inflar
   la fila. */
.view > .card > .table-wrap td.actions .btn,
.view > .card > .table-articulos-wrap td.actions .btn {
  padding: 2px 6px !important;
  font-size: 11px !important;
  margin: 1px 0 !important;
  min-height: 22px !important;
}

/* Pill "sin clasificar" para tipo_proveedor null (P4 — tipos de proveedor). */
.tipo-prov-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.tipo-prov-pill-vacio {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffe69c;
}

/* ===== Popup flotante: "Código no encontrado" en línea de compra (P3) =====
   Mismo posicionamiento que .afip-float-panel para no tapar el modal del
   comprobante. Sin overlay backdrop: el comprobante de atrás sigue visible y
   editable. */
.codigo-compra-float-panel {
  position: fixed;
  top: 90px;
  right: 16px;
  width: 320px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  z-index: 10000010;
  font-size: 13px;
  color: #1e293b;
  overflow: hidden;
}
.codigo-compra-float-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  font-size: 14px;
  color: #92400e;
}
.codigo-compra-float-close {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #92400e;
  padding: 0 4px;
}
.codigo-compra-float-close:hover { color: #451a03; }
.codigo-compra-float-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.codigo-compra-float-opt {
  text-align: left;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  white-space: normal;
}
.codigo-compra-float-opt-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}
.codigo-compra-float-opt-help {
  font-size: 11px;
  font-weight: 400;
  opacity: .85;
  line-height: 1.3;
}
@media (max-width: 1100px) {
  .codigo-compra-float-panel {
    width: 270px;
    right: 8px;
    top: 70px;
  }
}

/* Modal de ambigüedad de código en compras: highlight de fila navegable. */
.ambig-row { outline: none; }
.ambig-row:focus,
.ambig-row.ambig-row-selected {
  background: #dbeafe;
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
.ambig-row:hover { background: #eff6ff; }

/* Editor de cliente — secciones del tab "Económicos" y panel de contactos
   del tab "Otros datos". */
.cliente-econ-subgrid + .cliente-econ-subgrid {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}
.cliente-econ-subtitle {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cliente-contactos-table th {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-bottom: 1px solid #cbd5e1;
}
.cliente-contactos-table tbody tr + tr {
  border-top: 1px solid #f1f5f9;
}
.cliente-contactos-table .cli-contacto-del {
  padding: 4px 8px;
  line-height: 1;
  color: #b91c1c;
}
.cliente-envio-actions { display: flex; gap: 8px; }

/* Pestaña "Observaciones" del editor de cliente: textarea full-width
   pegada al ancho del modal y con altura cómoda. */
.cliente-observaciones-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cliente-observaciones-textarea {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
}

/* Listado de clientes — buscador acotado (no ancho completo) y columna
   "Nombre" con ancho mínimo para no comprimirse. */
.card .form-grid > .field.cliente-search-field {
  grid-column: auto;
  max-width: 520px;
}
.cliente-list-table th.col-nombre,
.cliente-list-table td.col-nombre {
  min-width: 260px;
  white-space: nowrap;
}

/* A+B 2026-05-14 — Listado clientes: header sticky VERTICAL solamente.
   El sticky HORIZONTAL en columnas Código/Nombre fue removido (Martín
   2026-05-14): generaba layers de compositing distintas que rompían el
   highlight selected/hover (las dos columnas quedaban con otro tono que
   el resto del row). Las columnas siguen con ancho mínimo y no-wrap pero
   scrollean con el resto al desplazarse horizontalmente. */
.cliente-list-wrap {
  /* Scroll vertical interno: la tabla llena el alto disponible hasta el
     borde inferior del viewport (calc 100vh - chrome). El scroll de filas
     arranca recién ahí (no a 70vh fijo). Mismo comportamiento que F-FUT-4
     vía la variable global --list-sticky-chrome-h. */
  max-height: calc(100vh - var(--list-sticky-chrome-h, 220px));
  overflow: auto;
}
.cliente-list-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f9fafb;
  background-clip: padding-box;
}
/* Anchos mínimos por columna (sin sticky ni z-index — el highlight del
   row aplica sobre toda la fila sin diferencias). */
.cliente-list-sticky td.col-codigo,
.cliente-list-sticky th.col-codigo {
  min-width: 110px;
  max-width: 110px;
  white-space: nowrap;
}
.cliente-list-sticky td.col-nombre,
.cliente-list-sticky th.col-nombre {
  white-space: nowrap;
}
/* Filas no-wrap por columna (para que el scroll horizontal funcione bien
   con celdas que tendrían texto largo). */
.cliente-list-sticky td {
  white-space: nowrap;
}

/* Filas de selección de proveedores en captura — hover via CSS para
   cumplir CSP sin 'unsafe-inline' (sprint seguridad sesión 2 2026-05-09). */
.cap-prov-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.cap-prov-row:hover {
  background: #f1f5f9;
}
.cap-prov-row-text {
  font-size: .92rem;
}

/* === v1.56 — Venta/Compra: header de grilla sticky + footer opaco ===========
   Pedido usuario 2026-05-10. La grilla de líneas (venta/compra/NC/ND/remito)
   tiene `table-wrap-autocomplete` que pone `overflow: visible` para que el
   dropdown de búsqueda no se recorte. Eso impide el sticky-en-overflow
   tradicional. La solución acá es anclar el thead al modal scrolleable
   (`.comprobante-modal-body { overflow-y: auto }`, ver bloque arriba):
   con `position: sticky; top: 0` el thead queda pegado al borde superior
   del modal mientras las filas y los headers de comprobante se desplazan.
   
   El z-index queda por debajo del dropdown de productos (`5000`) y por
   encima de las filas (~10).
*/
.comprobante-items-card thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #ffffff !important;
  box-shadow: inset 0 -1px 0 #e2e8f0;
}

/* Footer (.comprobante-save-bar) ya tiene `position: sticky; bottom: 0;
   background: #fff` desde v1.55+. Reforzamos con box-shadow para que la
   separación visual con las filas que pasen por debajo sea clara. Pedido
   usuario 2026-05-10: "fondo blanco que no permita ver lo de atrás". */
.comprobante-modal-body .comprobante-save-bar,
.comprobante-save-bar {
  background: #ffffff !important;
  box-shadow: 0 -6px 12px rgba(15, 23, 42, 0.08);
}

/* === 2026-05-11 — Banner global AFIP modo Homologación =====================
   Pedido usuario: cuando el ambiente AFIP está en HOMOLOGACION (testing) hay
   que dejar muy claro en todas las pantallas que los comprobantes no son
   fiscales. Banner sticky debajo del topbar, color ámbar, no se puede pasar
   por alto. Aparece sólo si state.catalogos.afip_modo === "HOMOLOGACION". */
.afip-modo-banner {
  background: #fef3c7;
  color: #92400e;
  border-bottom: 2px solid #f59e0b;
  padding: 10px 16px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
  z-index: 50;
}
.afip-modo-banner a {
  color: #7c2d12;
  text-decoration: underline;
  margin-left: 6px;
}

/* ----------------------------------------------------------------------
 * Modales con tabs en modo lectura
 *
 * Los editores master (clientes/proveedores/vendedores) y de producto
 * arrancan en modo lectura cuando se abren para "ver" un registro
 * existente — el botón "Modificar" abajo a la derecha es el que activa
 * la edición. El JS toggle `dataset.modoLectura="1"/"0"` en el modal y
 * además seta `disabled`/`readOnly` por input. Este bloque CSS es la
 * defensa adicional: bloquea pointer-events en TODOS los inputs/selects/
 * textareas del modal (incluso los de pestañas ocultas con display:none),
 * para que ningún wireup posterior pueda re-habilitar inputs de forma
 * accidental por su lógica propia (ej. syncClienteDocumentoField al
 * cambiar tipo de documento). Reportado por usuario 2026-05-10:
 * "el botón Modificar solo afecta la primer pestaña, en las que siguen
 *  puedo hacer cambios sin tocarlo".
 * ---------------------------------------------------------------------- */
[data-modo-lectura="1"] .product-editor-body input:not([type="button"]):not([type="submit"]):not([type="reset"]),
[data-modo-lectura="1"] .product-editor-body select,
[data-modo-lectura="1"] .product-editor-body textarea,
[data-modo-lectura="1"] .product-editor-section input:not([type="button"]):not([type="submit"]):not([type="reset"]),
[data-modo-lectura="1"] .product-editor-section select,
[data-modo-lectura="1"] .product-editor-section textarea,
[data-modo-lectura="1"] .product-editor-panel input:not([type="button"]):not([type="submit"]):not([type="reset"]),
[data-modo-lectura="1"] .product-editor-panel select,
[data-modo-lectura="1"] .product-editor-panel textarea {
  pointer-events: none !important;
  user-select: none;
  background-color: #f9fafb !important;
  cursor: not-allowed !important;
}
/* Botones de "+ Agregar" / "ARCA" / etc. dentro de las tabs también
 * se bloquean en modo lectura — son acciones de edición. */
[data-modo-lectura="1"] .product-editor-body .btn,
[data-modo-lectura="1"] .product-editor-section .btn,
[data-modo-lectura="1"] .product-editor-panel .btn {
  pointer-events: none !important;
  opacity: 0.55;
  cursor: not-allowed !important;
}
/* Excepción: los botones de la barra de acciones (Modificar / Cancelar)
 * SIEMPRE deben funcionar para poder activar la edición o cerrar. */
[data-modo-lectura="1"] .product-editor-actions .btn,
[data-modo-lectura="1"] .product-editor-actions button,
[data-modo-lectura="1"] .actions .btn,
[data-modo-lectura="1"] #save-master,
[data-modo-lectura="1"] #save-product,
[data-modo-lectura="1"] #cancel-master,
[data-modo-lectura="1"] #cancel-edit-product,
[data-modo-lectura="1"] .product-modal-tab,
[data-modo-lectura="1"] .product-modal-tabs button {
  pointer-events: auto !important;
  opacity: 1;
  cursor: pointer !important;
}


/* =============================================================================
   Topbar full-width arriba + sidebar fija exactamente debajo (2026-05-11).
   Pedido del usuario: "la barra que tiene el título y termina en el botón
   Salir debe estar arriba de todo fija con el menú exactamente por debajo".
   Convertimos #app de flex (sidebar-izq + main-der) a grid 2-col x 3-fila:
     fila 1: topbar full-width (sticky top:0)
     fila 2: banner AFIP (opcional, mismo full-width)
     fila 3: sidebar (col1) + main (col2)
   Reglas previas de .sidebar (width:290px; position:sticky; height:100vh)
   quedan overrideadas más abajo.
============================================================================= */
/* Layout horizontal 2026-05-11 (pedido del usuario): NO MÁS sidebar lateral.
   Filas apiladas, las dos primeras sticky (siempre visibles al scroll):
     fila 1: topbar fina (search, badges, Mi cuenta, Salir) — sticky top:0
     fila 2: menú horizontal con dropdowns por grupo — sticky debajo
     fila 3: banner AFIP (opcional)
     fila 4: contenido principal (#view) */
#app {
  display: block !important;
  min-height: 100vh;
  /* Compensación para el header unificado (header-row 52 + menu 46 = 98px). */
  padding-top: 98px;
}
/* Topbar legacy oculta — su contenido ahora vive dentro del sidebar header-row. */
#app > .topbar.topbar-legacy-hidden {
  display: none !important;
}
#app > .topbar > div:nth-child(2) {
  flex: 0 1 auto;
  min-width: 0;
}
#app > .topbar #page-title {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
  color: #fff;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app > .topbar #page-subtitle {
  display: none;
}
#app > .topbar .top-actions {
  /* Todo a la izquierda (sin margin-left:auto) para mantener lógica con
     el menú horizontal de abajo. */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
#app > .topbar .global-master-search {
  position: relative;
  min-width: 220px;
  max-width: 320px;
  width: auto;
}
#app > .topbar .global-master-search input,
#app > .topbar .global-master-search .input {
  width: 100%;
  /* Override de la regla vieja `background:#fff` que hacía blanco sobre
     blanco con el topbar oscuro. */
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px;
  padding: 0 16px;
  height: 30px;
  font-size: 13px;
}
#app > .topbar .global-master-search input::placeholder {
  color: rgba(255, 255, 255, .55);
}
#app > .topbar .global-master-search input:focus {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(96, 165, 250, .6) !important;
  outline: none;
}
#app > .topbar .ml-status-badge {
  background: rgba(255, 255, 255, .08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
}
#app > .topbar .ml-status-badge.disconnected { color: #fca5a5; }
#app > .topbar .ml-status-badge.connected { color: #6ee7b7; }
#app > .topbar #current-user-badge {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Botón mobile-menu-toggle: oculto en desktop (≥769px) porque el menú es
   horizontal, no drawer. */
@media (min-width: 769px) {
  #app > .topbar #mobile-menu-toggle {
    display: none !important;
  }
}
/* Inputs y botones de la topbar adaptados al fondo oscuro. */
#app > .topbar .input,
#app > .topbar input.input,
#app > .topbar select.input {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  height: 32px;
  font-size: 13px;
}
#app > .topbar .input::placeholder { color: rgba(255, 255, 255, .45); }
#app > .topbar .input:focus {
  border-color: #60a5fa;
  background: rgba(255, 255, 255, .1);
  outline: none;
}
#app > .topbar .btn,
#app > .topbar .btn-light {
  background: rgba(255, 255, 255, .08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .12);
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
#app > .topbar .btn:hover,
#app > .topbar .btn-light:hover {
  background: rgba(96, 165, 250, .18);
  color: #fff;
}
#app > .topbar .btn-logout {
  background: rgba(220, 38, 38, .18);
  color: #fecaca;
  border-color: rgba(220, 38, 38, .35);
  height: 32px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
}
#app > .topbar .btn-logout:hover {
  background: #dc2626;
  color: #fff;
}
#app > .topbar .status {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}
#app > .topbar .btn-candado {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #cbd5e1;
}
#app > .topbar .btn-candado:hover { background: rgba(255, 255, 255, .12); color: #fff; }
#app > .topbar .btn-candado.active { color: #34d399; }
/* La unión topbar↔menú: ambas son del mismo color #0f172a — el divisor es
   un border sutil casi imperceptible que solo marca la línea de separación. */
#app > .sidebar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100% !important;
  height: auto !important;
  /* Bloque header unificado: header-row (44) + menu (44) = 88px. */
  background: #1e3a8a;
  color: #fff;
  padding: 0 !important;
  overflow: visible !important;
  border-top: 0;
  border-bottom: 1px solid rgba(96, 165, 250, .28);
  box-shadow: 0 4px 14px rgba(30, 58, 138, .35);
  display: block;
  box-sizing: border-box;
  transform: none !important;
}
/* Fila superior del header dentro del sidebar — buscador + título + badges. */
#app > .sidebar .header-row {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
}
#app > .sidebar .header-row .header-title {
  flex: 0 1 auto;
  min-width: 0;
}
#app > .sidebar .header-row #page-title {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app > .sidebar .header-row #page-subtitle {
  display: none;
}
#app > .sidebar .header-row .top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
/* Bloque de íconos de estado (candado, campana, ML) a la izquierda del
   buscador. Todos en línea horizontal con gap fijo. */
#app > .sidebar .header-row .header-status-icons {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
#app > .sidebar .header-row .header-status-icons .btn-candado,
#app > .sidebar .header-row .header-status-icons .menu-icon-btn {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: background .12s, border-color .12s;
}
#app > .sidebar .header-row .header-status-icons .btn-candado:hover,
#app > .sidebar .header-row .header-status-icons .menu-icon-btn:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .35);
}
#app > .sidebar .header-row .header-status-icons .btn-candado.active {
  background: rgba(52, 211, 153, .22);
  border-color: rgba(52, 211, 153, .5);
  color: #6ee7b7;
}
#app > .sidebar .header-row .header-status-icons .ml-status-badge {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
}
#app > .sidebar .header-row .header-status-icons .ml-status-badge.disconnected { color: #fca5a5; }
#app > .sidebar .header-row .header-status-icons .ml-status-badge.connected { color: #6ee7b7; }
#app > .sidebar .header-row .global-master-search {
  position: relative;
  min-width: 240px;
  max-width: 360px;
  width: auto;
}
#app > .sidebar .header-row .global-master-search input,
#app > .sidebar .header-row .global-master-search .input {
  width: 100%;
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 999px;
  padding: 0 16px;
  height: 30px;
  font-size: 13px;
}
#app > .sidebar .header-row .global-master-search input::placeholder {
  color: rgba(255, 255, 255, .55);
}
#app > .sidebar .header-row .global-master-search input:focus {
  background: rgba(255, 255, 255, .2) !important;
  border-color: rgba(147, 197, 253, .7) !important;
  outline: none;
}
#app > .sidebar .header-row #current-user-badge {
  background: rgba(255, 255, 255, .1);
  color: #e0e7ff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .14);
}
#app > .sidebar .header-row #api-status {
  background: rgba(255, 255, 255, .08);
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  border: 1px solid rgba(255, 255, 255, .12);
}
#app > .sidebar .header-row #topbar-empresa-switch {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  height: 28px;
  font-size: 12.5px;
  border-radius: 6px;
  padding: 0 10px;
}
/* Options del select desplegado: en muchos browsers se renderizan con
   fondo blanco — si el `color` del select es blanco, el texto queda
   invisible. Forzamos negro sobre blanco solo para las options. */
#app > .sidebar .header-row #topbar-empresa-switch option {
  background: #fff !important;
  color: #1e293b !important;
}
/* Dropdown "Mi cuenta" en la header-row: botón translúcido con dropdown
   anclado a la derecha. Inherita la lógica del .menu-group/.menu-parent
   pero con estilo propio para encajar en el header. */
.header-mi-cuenta {
  position: relative;
  height: 32px;
  display: inline-flex;
  align-items: center;
}
.header-mi-cuenta .menu-parent {
  /* Estilo premium ERP: gradiente azul suave + sombra elegante + ícono de
     usuario. Texto blanco en negrita. */
  background: linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .12) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700 !important;
  letter-spacing: .25px;
  height: 36px;
  padding: 0 16px 0 12px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .15);
  white-space: nowrap;
}
.header-mi-cuenta .menu-parent .mi-cuenta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #1e3a8a;
  font-size: 12px;
  flex-shrink: 0;
}
.header-mi-cuenta .menu-parent .mi-cuenta-label {
  display: inline-block;
}
.header-mi-cuenta .menu-parent::after {
  content: "▾";
  font-size: 10px;
  opacity: .85;
  color: #fff;
  margin-left: 2px;
}
.header-mi-cuenta .menu-parent:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .18) 100%) !important;
  border-color: rgba(255, 255, 255, .5) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
  transform: translateY(-1px);
}
.header-mi-cuenta .menu-parent:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .15);
}
.header-mi-cuenta .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  /* Desplazado 12px hacia la derecha respecto al borde derecho del botón —
     así el contenido no queda apretado contra el borde del header. */
  right: -12px;
  min-width: 260px;
  max-width: calc(100vw - 24px);
  background: #111e36;
  border: 1px solid rgba(96, 165, 250, .25);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
  padding: 8px 0;
  z-index: 1100;
  flex-direction: column;
  animation: submenuFadeIn .15s ease-out;
}
.header-mi-cuenta:hover .submenu,
.header-mi-cuenta .submenu.open {
  display: flex !important;
}
.header-mi-cuenta .submenu .menu-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  background: transparent;
  border: 0;
  color: #e2e8f0;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  width: 100%;
  border-radius: 0;
  transition: background .12s, color .12s, padding .12s;
}
.header-mi-cuenta .submenu .menu-item:hover {
  background: rgba(96, 165, 250, .18);
  color: #fff;
  padding-left: 26px;
}
.header-mi-cuenta .menu-item-danger {
  color: #fca5a5 !important;
}
.header-mi-cuenta .menu-item-danger:hover {
  background: rgba(220, 38, 38, .22) !important;
  color: #fee2e2 !important;
}
#app > .sidebar .header-row #mobile-menu-toggle {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: none;
}
#app > .sidebar .menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  padding: 0 14px;
  overflow-x: visible;
  overflow-y: visible;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
/* Íconos a la izquierda del menú: candado, campana CRM, badge ML. */
.menu-left-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 0;
  margin-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, .12);
  height: 100%;
}
.menu-left-icons .btn-candado,
.menu-left-icons .menu-icon-btn {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #dbeafe;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.menu-left-icons .btn-candado:hover,
.menu-left-icons .menu-icon-btn:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.menu-left-icons .btn-candado.active {
  background: rgba(52, 211, 153, .18);
  border-color: rgba(52, 211, 153, .45);
  color: #6ee7b7;
}
.menu-left-icons .ml-status-badge {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #cbd5e1;
}
.menu-left-icons .ml-status-badge.disconnected { color: #fca5a5; }
.menu-left-icons .ml-status-badge.connected { color: #6ee7b7; }
/* Dropdown "Mi cuenta" anclado a la derecha del menú. Combinamos
   `margin-left: auto` (empuja al final del flex row) con `order: 999`
   para garantizar que vaya al final aunque el HTML lo ponga en otro
   orden, y `position: relative` para que el dropdown se ancle a este
   elemento. */
.menu-mi-cuenta {
  margin-left: auto !important;
  order: 999 !important;
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: 4px;
}
#app > .sidebar .menu-mi-cuenta .menu-parent {
  padding: 0 18px;
  font-weight: 600;
  color: #fff;
}
#app > .sidebar .submenu.submenu-right {
  left: auto;
  right: 0;
  border-radius: 0 0 0 10px;
}
#app > .sidebar .menu-item-danger {
  color: #fca5a5 !important;
}
#app > .sidebar .menu-item-danger:hover {
  background: rgba(220, 38, 38, .22) !important;
  color: #fee2e2 !important;
}
#app > .sidebar .menu::-webkit-scrollbar { height: 4px; }
#app > .sidebar .menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
#app > .sidebar .menu-group {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 100%;
}
#app > .sidebar .menu-parent,
#app > .sidebar .menu-group.single .menu-item {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 18px;
  background: transparent;
  border: 0;
  color: #dbeafe;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .15px;
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  position: relative;
}
#app > .sidebar .menu-parent::after {
  content: "▾";
  font-size: 9px;
  margin-left: 6px;
  opacity: .55;
  transition: transform .15s ease;
}
#app > .sidebar .menu-group:hover .menu-parent::after,
#app > .sidebar .menu-group .submenu.open ~ .menu-parent::after {
  transform: rotate(-180deg);
  opacity: 1;
}
#app > .sidebar .menu-parent:hover,
#app > .sidebar .menu-group.single .menu-item:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
#app > .sidebar .menu-item.active,
#app > .sidebar .menu-group.single .menu-item.active {
  background: rgba(96, 165, 250, .14);
  color: #fff;
  box-shadow: inset 0 -3px 0 #60a5fa;
}
#app > .sidebar .menu-group:has(.menu-item.active) > .menu-parent {
  color: #fff;
  background: rgba(96, 165, 250, .1);
  box-shadow: inset 0 -3px 0 #60a5fa;
}
#app > .sidebar .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #111e36;
  border: 1px solid rgba(96, 165, 250, .15);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
  padding: 8px 0;
  z-index: 1001;
  flex-direction: column;
  animation: submenuFadeIn .15s ease-out;
}
@keyframes submenuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#app > .sidebar .submenu.open,
#app > .sidebar .menu-group:hover .submenu {
  display: flex !important;
}
#app > .sidebar .submenu .menu-item {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  background: transparent;
  border: 0;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  width: 100%;
  border-radius: 0;
  transition: background .12s, color .12s;
}
#app > .sidebar .submenu .menu-item:hover {
  background: rgba(96, 165, 250, .18);
  color: #fff;
  padding-left: 22px;
}
#app > .sidebar .submenu .menu-item.active {
  background: rgba(96, 165, 250, .22);
  color: #fff;
  font-weight: 500;
  border-left: 3px solid #60a5fa;
  padding-left: 15px;
}
#app > .sidebar .sidebar-mobile-footer {
  display: none !important;
}
#app > #afip-modo-banner {
  position: fixed !important;
  top: 98px;
  left: 0;
  right: 0;
  z-index: 998;
}
/* Si el banner AFIP está visible, sumar altura al padding-top del app. */
#app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) {
  padding-top: 122px;
}
#app > .main {
  width: 100%;
  min-width: 0;
}
/* Reducir el espacio entre el bloque topbar+menú y el contenido (KPIs).
   Antes era padding:28px (1700) — ahora 10px arriba y mantenemos los
   laterales/abajo para que no se vea pegado al borde. */
#app > .main > .view {
  padding: 10px 24px 24px !important;
}
@media (max-width: 768px) {
  #app > .sidebar .menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #app > .sidebar .menu-parent,
  #app > .sidebar .menu-group.single .menu-item {
    padding: 0 10px;
    font-size: 12px;
  }
  #mobile-menu-toggle { display: none !important; }
}

/* =============================================================================
   Premium ILUSOFT dialog (post-save de venta y otros momentos celebratorios).
   Tono pedido por el usuario 2026-05-10: mismo lenguaje del login premium
   del ERP — fondo azul oscuro con gradiente, badge ILUSOFT, tipografía
   moderna. Se invoca desde `confirmDialogPremium(message, opts)`. No
   reemplaza el `confirmDialog` estándar (que sigue sobrio para el resto).
============================================================================= */
.premium-dialog-backdrop {
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
}
.premium-dialog {
  background: linear-gradient(135deg, #1a2233 0%, #0f1419 100%);
  color: #e6e8ec;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04);
  width: min(460px, 92vw);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: premiumDialogIn .2s ease-out;
}
@keyframes premiumDialogIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.premium-dialog-hero {
  position: relative;
  padding: 30px 34px 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(96, 165, 250, .25), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(252, 165, 165, .12), transparent 50%),
    linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}
.premium-dialog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, .06), transparent 40%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, .015) 12px 13px);
  pointer-events: none;
}
.premium-dialog-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #bfdbfe;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.premium-dialog-hero h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: .2px;
  position: relative;
  z-index: 1;
}
.premium-dialog-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.premium-dialog-body {
  padding: 22px 34px 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #cbd5e1;
}
.premium-dialog-footer {
  padding: 16px 34px 26px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.premium-dialog-cancel,
.premium-dialog-ok {
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.premium-dialog-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #cbd5e1;
}
.premium-dialog-cancel:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .28);
}
.premium-dialog-ok {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .35);
}
.premium-dialog-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .5);
}
.premium-dialog-ok:active {
  transform: translateY(0);
}

/* F-FUT-4 (2026-05-14): clases genéricas de header sticky + columnas sticky para
   listados principales (proveedores, ventas, compras, pedidos, tesorería-listado).
   Generalización del patrón T-1a (cliente-list-sticky/wrap). Productos queda excluido
   porque ya usa table-articulos-wrap con sticky propio.

   2026-05-14 update (TABLES-FULL-HEIGHT): las tablas usan
   `calc(100vh - --list-sticky-chrome-h)` en vez de 70vh fijo, para llenar
   el alto disponible hasta el borde inferior de la ventana. El scroll
   interno arranca recién ahí. La variable --list-sticky-chrome-h se
   define en :root y aplica a TODAS las tablas con .list-sticky-wrap o
   .cliente-list-wrap (T-1a, F-FUT-4). Una sola modificación cubre todos
   los listados. */
:root {
  /* Topbar (~60px) + page title block (~70px) + filtros/acciones (~70px)
     + paddings y márgenes (~20px) ≈ 220px. Si el chrome del ERP cambia
     mucho de altura habrá que ajustar este valor. */
  --list-sticky-chrome-h: 220px;
}
.list-sticky-wrap {
  max-height: calc(100vh - var(--list-sticky-chrome-h));
  overflow: auto;
}
.list-sticky-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f9fafb;
  background-clip: padding-box;
}
/* A+B 2026-05-14 — Sticky horizontal REMOVIDO en col-sticky-1/2 (Martín):
   generaba layers de compositing distintas que rompían el highlight
   selected/hover. Solo dejamos ancho mínimo y no-wrap. El header
   vertical sticky (thead) sigue. */
.list-sticky-table td.col-sticky-1,
.list-sticky-table th.col-sticky-1 {
  min-width: 110px;
  max-width: 130px;
  white-space: nowrap;
}
.list-sticky-table td.col-sticky-2,
.list-sticky-table th.col-sticky-2 {
  white-space: nowrap;
}
.list-sticky-table td {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .list-sticky-wrap {
    max-height: none;
    overflow: visible;
  }
}

/* CC-STICKY (2026-05-14): el header (Saldo + acciones) y los títulos de la
   tabla de detalle de cuenta corriente quedan sticky cuando el operador
   scrollea por la lista de movimientos. Aplica en:
   - openClienteCcModal (modal desde listado clientes)
   - renderCuentaClientes (route cc-clientes)
   - renderCuentaProveedores (route cc-proveedores)
   El scroll vive en `.comprobante-modal-body` (overflow-y: auto). Ambos
   elementos sticky usan `top: 0` y `top: <altura saldo>` para apilarse
   visualmente sin solaparse. */
.cc-saldo-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
}
.cc-thead-sticky thead th {
  position: sticky;
  /* Approximate height of .cc-saldo-sticky (card padding ~ 14px + h3 ~ 32px
     + actions margin ~ 14px = ~60px). Hardcodeo seguro: si el saldo crece,
     la thead se solapa ~10px pero sigue legible. */
  top: 60px;
  z-index: 2;
  background: #f9fafb;
  box-shadow: inset 0 -1px 0 0 #e5e7eb;
}

/* En mobile (<=768px), el modal usa width 100% y el sticky sigue siendo
   útil porque la altura del modal puede ser limitada. No deshabilitamos
   acá (a diferencia de F-FUT-4) porque el CC modal no tiene mobile-cards. */

/* WELCOME-TEST (2026-05-14): pop-up de bienvenida para test@gmail.com
   con gatito SVG blanco y negro que rota infinito. Se muestra cada vez
   que el usuario entra (no se persiste). */
.welcome-test-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000050;
  animation: welcome-test-fadein 0.25s ease-out;
}
@keyframes welcome-test-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.welcome-test-modal {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 16px;
  padding: 28px 32px 24px;
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
  position: relative;
  animation: welcome-test-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes welcome-test-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.welcome-test-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 24px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
}
.welcome-test-close:hover { color: #1e293b; background: #f1f5f9; }
.welcome-test-cat {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
.welcome-test-cat svg {
  /* Animación: gira indefinidamente. 4s por vuelta = suave, no marea. */
  animation: welcome-test-spin 4s linear infinite;
  transform-origin: 60px 60px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}
@keyframes welcome-test-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.welcome-test-modal h2 {
  margin: 0 0 12px;
  font-size: 20px;
  color: #0d6e4e;
  font-weight: 700;
}
.welcome-test-mensaje {
  margin: 0 0 10px;
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}
.welcome-test-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.welcome-test-actions .btn {
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 480px) {
  .welcome-test-modal {
    padding: 22px 18px 18px;
  }
  .welcome-test-modal h2 { font-size: 18px; }
  .welcome-test-cat svg { width: 96px; height: 96px; }
}
/* Pausar la rotación si el usuario prefiere reduce motion (a11y). */
@media (prefers-reduced-motion: reduce) {
  .welcome-test-cat svg { animation: none; }
  .welcome-test-overlay,
  .welcome-test-modal { animation: none; }
}

/* === TABLES-OPTIN (2026-05-14) ============================================
   Cuarto intento de full-height para listados, ahora OPT-IN PURO. Pedido
   de Martín: "después de 3 parches que se rompían entre sí, vamos por
   opt-in: solo los .view con clase explícita reciben el modelo flex".

   Por qué los 3 anteriores fallaron:
   - TABLES-FULL-HEIGHT (calc 100vh - 220px fijo): el chrome de cada
     listado varía 180-280px → hueco gris o cortado.
   - TABLES-FLEX-HEIGHT v1 (height: 100dvh): 100dvh era el viewport
     completo, no el área restante después de la topbar/banner.
   - TABLES-FLEX-HEIGHT v2 (position: absolute + inset 0): .main no
     tenía altura propia → colapsó al alto del contenido restante
     cuando el .view salió del flujo. Reportado con 1 fila en Ventas
     y gris abajo.

   Estrategia A opt-in:
   - JS agrega `.view.is-listado` SOLO en las 12 rutas problemáticas
     (productos, clientes, proveedores, ventas-listado, compras-listado,
     listas-precios, productos-ofertas, depositos, stock, transferencias,
     tesoreria-listado, catalogos). Ver TABLES_OPTIN_LISTADO_ROUTES en
     app.js.
   - `.main:has(>.view.is-listado)` se convierte en flex column con
     altura fija al viewport (descontando banner AFIP). El navegador
     reparte solo entre el chrome de la página y el listado.
   - Las pantallas NO listado (dashboard, comprobante, ABMs, configs)
     quedan IGUAL — la regla `.main` base no se toca.

   Sin cambios a `#app`, `.main` base, `.view` base. Cero riesgo en
   pantallas no listadas. Reversible: sacar la clase y vuelve al
   comportamiento previo.
*/

/* .main solo se vuelve container flex cuando contiene un listado.
   Las demás pantallas siguen exactamente como antes. */
.main:has(> .view.is-listado) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Si el banner AFIP está visible, #app recibe `padding-top: 122px` (ver
   regla pre-existente). Descontamos eso del alto disponible para .main
   para que el listado no se extienda atrás del banner. */
#app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view.is-listado) {
  height: calc(100vh - 122px);
}

/* En mobile (≤768px) el layout es block: .sidebar es drawer fixed,
   .main ocupa toda la pantalla en flujo normal. Cambiamos a 100dvh
   para colapsar el chrome del browser móvil. */
@media (max-width: 768px) {
  .main:has(> .view.is-listado) {
    height: 100dvh;
  }
  #app:has(> #afip-modo-banner:not([style*="display:none"]):not([style*="display: none"])) > .main:has(> .view.is-listado) {
    height: calc(100dvh - 122px);
  }
}

/* El .view del listado consume todo el alto del .main vía flex. */
.view.is-listado {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* PDF-LISTADOS-PADDING (2026-05-14): hipótesis Z del agente — quitar
     padding-bottom del .view.is-listado. El gap del flex (6px) ya
     separa las cards entre sí; el padding-bottom solo agregaba aire
     muerto debajo de la última card. Era `6px 24px` (top y bottom 6px),
     ahora `6px 24px 0` (bottom 0). */
  padding: 6px 24px 0 !important;
  gap: 6px;
}

/* La última card del listado (la que contiene el wrap scrolleable) no
   necesita margin-bottom — el padding del .view ya cubre el límite
   inferior, y el gap del flex maneja la separación entre cards. */
.view.is-listado > .card:last-child {
  margin-bottom: 0 !important;
}

/* TABLES-V5 (2026-05-14): ÚNICA regla para el alto interno del listado.
   No usa :has(), no usa calc, no usa !important — solo flex distribution
   simple basado en :first-child / :last-child.

   Diagnóstico de Martín confirmado con DevTools: las cards no tenían
   flex-grow, el sobrante quedaba como espacio en blanco abajo. Las 4
   reglas viejas con `height: calc(100vh - Npx)` se borraron en el
   commit anterior.

   Cómo funciona ahora:
   - .view.is-listado es flex column (regla previa) y recibe altura del
     .main flex container (también de TABLES-OPTIN).
   - TODAS las cards directas del .view.is-listado arrancan como
     `flex: 0 0 auto` (toman su tamaño natural — chrome / filtros).
   - La ÚLTIMA card (la del listado) sobreescribe a `flex: 1 1 auto`
     con `min-height: 0`, lo que la fuerza a absorber TODO el espacio
     sobrante del .view.
   - El wrap interno (.table-wrap / .table-articulos-wrap /
     .list-sticky-wrap / .cliente-list-wrap) hereda `flex: 1 1 auto`
     + `min-height: 0` para scrollear adentro.

   Cuando el listado tiene UNA SOLA card (productos, clientes, etc.),
   :last-child es también :first-child y la regla de :last-child gana
   por especificidad (+1 pseudo-clase). flex: 1 1 auto aplica. OK.

   Cuando hay 2+ cards (filtros + tabla), las de chrome son 0 0 auto,
   la última es 1 1 auto. Reparto natural. */
.view.is-listado > .card {
  flex: 0 0 auto;
}
.view.is-listado > .card:last-child {
  flex: 1 1 auto;
  min-height: 0;
  /* A+B 2026-05-14: card flex column ⇒ chrome (título + buscador +
     filtros + fila acciones) anclado arriba, SOLO el wrap scrolea. Esto
     hace que el wrap llegue hasta el fondo de la pantalla sin franja
     muerta y que los filtros queden fijos al scrollear. */
  display: flex;
  flex-direction: column;
}
/* Hijos directos del card que no son el wrap: chrome (title-row,
   form-grid de búsqueda y de filtros, fila de acciones, paginación).
   NO deben encogerse cuando la card flex distribuye espacio. Solo el
   wrap (con flex: 1 1 auto abajo) absorbe el sobrante. */
.view.is-listado > .card:last-child > *:not(.table-wrap):not(.table-articulos-wrap):not(.list-sticky-wrap):not(.cliente-list-wrap) {
  flex-shrink: 0;
}
/* A+B 2026-05-14: TODAS las celdas (td y th) de listados is-listado en
   una sola línea. Si la suma de anchos excede el viewport, aparece
   scroll horizontal (gracias a overflow-x:auto del wrap más abajo).
   La regla legacy `.table-wrap td white-space:normal !important` ya
   está excluida con :not() para list-sticky-wrap/cliente-list-wrap,
   así que acá no hace falta !important. El listado de Artículos
   (.product-list-table) es el modelo: nowrap simple sin overrides. */
.view.is-listado > .card:last-child .cliente-list-table th,
.view.is-listado > .card:last-child .cliente-list-table td,
.view.is-listado > .card:last-child .list-sticky-table th,
.view.is-listado > .card:last-child .list-sticky-table td,
.view.is-listado > .card:last-child .product-list-table th,
.view.is-listado > .card:last-child .product-list-table td {
  white-space: nowrap;
}
.view.is-listado > .card:last-child .table-wrap,
.view.is-listado > .card:last-child .table-articulos-wrap,
.view.is-listado > .card:last-child .list-sticky-wrap,
.view.is-listado > .card:last-child .cliente-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  /* A+B 2026-05-14: cancela el max-height legacy de
     .cliente-list-wrap / .list-sticky-wrap dentro de is-listado.
     Con flex column del card, el wrap absorbe la altura disponible
     hasta el fondo de la pantalla sin necesidad del cap legacy. */
  max-height: none;
  /* A+B 2026-05-14: scroll horizontal explícito para que las filas
     queden en UNA sola línea sin importar el ancho del viewport
     (pedido de Martín). Sin overflow-x:auto el browser podía comprimir
     las columnas y wrappear el contenido a varias líneas. */
  overflow-x: auto;
  /* TABLES-V5 SCROLL-DEFENSE (2026-05-14): defensas cero-riesgo
     contra "scroll vuelve para arriba" (#28). Pedido de Martín
     post-deploy de TABLES-OPTIN.
     - overflow-y: auto ⇒ el wrap es el único elemento scrolleable.
     - overflow-anchor: auto ⇒ si el browser detecta cambio de contenido
       arriba (re-render parcial, sortable, autocomplete), ancla la
       posición del scroll al elemento visible más cercano en vez de
       saltar al top.
     - scroll-behavior: auto ⇒ explícito "no smooth", evita que un
       hash-change / setPage dispare animación que empuja al top.
     - overscroll-behavior: contain ⇒ en mobile/touchpad, evita que el
       scroll del wrap propague al body cuando llega al borde (que era
       lo que parecía "saltar al top"). */
  overflow-y: auto;
  overflow-anchor: auto;
  scroll-behavior: auto;
  overscroll-behavior: contain;
}

/* === MOBILE-LITE (2026-05-14) =========================================
   Vista mobile minimalista del ERP. Activación opt-in vía class
   `body.mobile-lite-mode` que JS pone al entrar en route mobile-lite-*.
   Cuando el body tiene la clase:
   - Sidebar legacy + topbar legacy + banner AFIP se ocultan
   - #app pasa a layout block normal (sin flex row)
   - .main toma todo el ancho
   - El chrome mobile-lite (topbar simple + bottom-nav) se monta dentro
     de #view por JS
*/
body.mobile-lite-mode { zoom: 1 !important; }
body.mobile-lite-mode > #app {
  display: block !important;
  min-height: 100dvh !important;
  padding: 0 !important;
}
body.mobile-lite-mode > #app > .sidebar,
body.mobile-lite-mode > #app > #topbar,
body.mobile-lite-mode > #app > #afip-modo-banner {
  display: none !important;
}
body.mobile-lite-mode > #app > .main {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  height: auto !important;
}
body.mobile-lite-mode > #app > .main > #view {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f3f4f6;
}

.mobile-lite-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.mobile-lite-topbar-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-lite-toggle-clasica,
.mobile-lite-logout-btn {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-lite-toggle-clasica:active,
.mobile-lite-logout-btn:active {
  background: rgba(255,255,255,.1);
  border-radius: 6px;
}

.mobile-lite-bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 50;
  height: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -1px 4px rgba(0,0,0,.06);
}
.mobile-lite-nav-btn {
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: #6b7280;
  font-size: 11px;
  padding: 4px 0;
}
.mobile-lite-nav-btn.active { color: #0f172a; }
.mobile-lite-nav-btn.active .mobile-lite-nav-icon { transform: scale(1.15); }
.mobile-lite-nav-icon { font-size: 22px; line-height: 1; transition: transform .15s ease; }
.mobile-lite-nav-label { font-size: 10px; font-weight: 600; }

.mobile-lite-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-lite-section {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.mobile-lite-h2 { font-size: 16px; font-weight: 700; margin: 0 0 10px; color: #0f172a; }
.mobile-lite-h3 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; color: #374151; }
.mobile-lite-empty { color: #9ca3af; font-size: 13px; margin: 6px 0 0; text-align: center; }
.mobile-lite-error { color: #b91c1c; background: #fef2f2; padding: 12px; border-radius: 8px; margin: 12px; }
.mobile-lite-loading { color: #6b7280; text-align: center; padding: 24px 12px; }

.mobile-lite-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mobile-lite-tile {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 80px;
  border: 1px solid #e5e7eb;
}
.mobile-lite-tile-clickable { cursor: pointer; }
.mobile-lite-tile-clickable:active { background: #f3f4f6; }
.mobile-lite-tile-alert { background: #fef2f2; border-color: #fecaca; }
.mobile-lite-tile-icon { font-size: 18px; }
.mobile-lite-tile-label { font-size: 11px; color: #6b7280; font-weight: 500; }
.mobile-lite-tile-value { font-size: 17px; color: #0f172a; }
.mobile-lite-tile-alert .mobile-lite-tile-value { color: #991b1b; }

.mobile-lite-tareas, .mobile-lite-movs { display: flex; flex-direction: column; gap: 8px; }
.mobile-lite-tarea, .mobile-lite-mov {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
}
.mobile-lite-tarea:last-child, .mobile-lite-mov:last-child { border-bottom: 0; }
.mobile-lite-tarea-icon { font-size: 14px; }
.mobile-lite-tarea-txt { flex: 1; color: #374151; }
.mobile-lite-mov-fecha { color: #6b7280; font-size: 11px; min-width: 70px; }
.mobile-lite-mov-desc { flex: 1; color: #374151; }
.mobile-lite-mov-importe { font-weight: 600; color: #0f172a; }
.mobile-lite-mov-importe.pos { color: #166534; }
.mobile-lite-mov-importe.neg { color: #b91c1c; }

.mobile-lite-section-actions { padding: 8px; }
.mobile-lite-action-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 8px;
  color: #0f172a;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
}
.mobile-lite-action-link:last-child { margin-bottom: 0; }
.mobile-lite-action-link:active { background: #f3f4f6; }

.mobile-lite-list {
  display: flex;
  flex-direction: column;
  margin: 8px 0 0;
  max-height: 60dvh;
  overflow-y: auto;
}
.mobile-lite-list-movs { max-height: 70dvh; }
.mobile-lite-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  background: #fff;
}
.mobile-lite-list-item:active { background: #f9fafb; }
.mobile-lite-list-item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mobile-lite-list-item-main strong {
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-lite-list-item-sub { font-size: 11px; color: #6b7280; }
.mobile-lite-saldo {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.mobile-lite-saldo.zero { background: #f3f4f6; color: #6b7280; }
.mobile-lite-saldo.pos { background: #fef2f2; color: #991b1b; }
.mobile-lite-saldo.neg { background: #ecfdf5; color: #166534; }
.mobile-lite-cc-saldo {
  font-size: 14px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}
.mobile-lite-back {
  background: transparent;
  border: 0;
  color: #2563eb;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  padding: 4px 0;
  cursor: pointer;
}

.mobile-lite-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.mobile-lite-field label { font-size: 12px; color: #6b7280; font-weight: 600; }
.mobile-lite-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
  color: #0f172a;
  text-align: left;
}
.mobile-lite-input:focus { outline: 2px solid #60a5fa; outline-offset: 0; border-color: #60a5fa; }
.mobile-lite-btn-primary, .mobile-lite-btn-secondary {
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin: 8px 0 0;
}
.mobile-lite-btn-primary { background: #0f172a; color: #fff; }
.mobile-lite-btn-primary:disabled { background: #9ca3af; cursor: not-allowed; }
.mobile-lite-btn-secondary { background: #f3f4f6; color: #0f172a; border: 1px solid #e5e7eb; }
.mobile-lite-items { margin: 6px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.mobile-lite-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.mobile-lite-item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mobile-lite-item-main strong {
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-lite-item-detail { font-size: 11px; color: #6b7280; }
.mobile-lite-item-del {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-lite-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 12px;
}
.mobile-lite-help { font-size: 11px; color: #6b7280; margin: 4px 0 0; text-align: center; }

.mobile-lite-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mobile-lite-picker {
  background: #fff;
  width: 100%;
  height: 85dvh;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-lite-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
}
.mobile-lite-picker-header .mobile-lite-input { flex: 1; }
.mobile-lite-picker-close {
  width: 36px;
  height: 36px;
  border: 0;
  background: #f3f4f6;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}
.mobile-lite-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}