/* HARDEN: ocultar interfaz interna sin login */

/* =========================================
   UI Theme Engine (Light / Dark)
   - Safe overrides using CSS variables
   - Does NOT change business logic
   ========================================= */
:root{
  /* Brand */
  --primary: #004d99;
  --primary-contrast: #ffffff;

  /* Light defaults */
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --border: rgba(17,24,39,0.14);
  --text: #111827;
  --muted: #6b7280;

  /* Feedback */
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;

  /* Layout */
  --radius: 12px;
  --control-h: 42px;
  --control-px: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,0.08);

  /* Tables / rows */
  --row-hover: rgba(17,24,39,0.04);
  --focus: rgba(59,130,246,0.35);
}

/* =========================
   INVENTARIO - PRODUCTO
   Tabla de precios (estilo tipo programa clásico)
   ========================= */
.ep-precios-wrap{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.ep-precios-table{margin:0;}
.ep-precios-table thead th{
  font-weight: 800;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ep-precios-table tbody th{
  font-weight: 700;
  background: rgba(255,255,255,.04);
  border-right: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}
.ep-precios-table td, .ep-precios-table th{
  border-color: rgba(255,255,255,.10) !important;
  vertical-align: middle;
}

/* Asegurar que Bootstrap no pinte fondos blancos en la tabla (especialmente en modo oscuro) */
.ep-precios-table > :not(caption) > * > *{
  background-color: transparent !important;
}
.ep-precios-table td{ background-color: rgba(255,255,255,.02) !important; }
.ep-precios-table input.form-control{
  background-color: rgba(255,255,255,.03) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Combo de categorías (un solo campo visible + lista desplegable) */
.ep-cat-combo{ position: relative; }
.ep-cat-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ep-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(59,130,246,0.14);
  border: 1px solid rgba(59,130,246,0.22);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  user-select:none;
}
.ep-chip .x{ opacity:.85; font-weight:800; }
.ep-cat-dd{
  position:absolute;
  z-index: 50;
  left:0; right:0;
  margin-top:6px;
  max-height: 225px;
  overflow:auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 6px;
}
.ep-cat-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px;
  border-radius: 12px;
  cursor:pointer;
}
.ep-cat-item:hover{ background: var(--row-hover); }
.ep-cat-item .dot{ width:10px; height:10px; border-radius:999px; background: rgba(148,163,184,0.35); }
.ep-cat-item.on .dot{ background: rgba(16,185,129,0.55); }
.ep-cat-item .name{ flex:1; }
.ep-cat-item .check{ width:18px; text-align:right; font-weight:900; }
.ep-cat-empty{ padding: 10px 12px; color: var(--muted); font-size: 12px; }
.ep-precios-table input.form-control{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.18);
  color: inherit;
}

/* Light mode */
body:not(.dark) .ep-precios-wrap{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}
body:not(.dark) .ep-precios-table thead th{
  background: rgba(0,0,0,.04);
  border-bottom-color: rgba(0,0,0,.10);
}
body:not(.dark) .ep-precios-table tbody th{
  background: rgba(0,0,0,.03);
  border-right-color: rgba(0,0,0,.08);
}
body:not(.dark) .ep-precios-table td, body:not(.dark) .ep-precios-table th{
  border-color: rgba(0,0,0,.08) !important;
}
body:not(.dark) .ep-precios-table input.form-control{
  background: rgba(255,255,255,1);
  border-color: rgba(0,0,0,.18);
}

html[data-theme="dark"]{
  /* Dark palette tuned for long sessions (less saturated, better contrast) */
  --bg: #0b1220;
  --surface: #101a2e;
  --surface-2: #0f172a;
  --border: rgba(148,163,184,0.18);
  --text: #e5e7eb;
  --muted: #9ca3af;
  --shadow: 0 14px 45px rgba(0,0,0,0.45);
  --row-hover: rgba(255,255,255,0.04);
  --focus: rgba(59,130,246,0.45);
}

/* Global base */
body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(59,130,246,0.10), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(16,185,129,0.08), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

/* Bootstrap color helpers override (keeps existing HTML classes working) */
.bg-primary{ background-color: var(--primary) !important; }
.btn-primary{ background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--primary-contrast) !important; }
.btn-primary:hover{ filter: brightness(1.06); }
.text-primary{ color: var(--primary) !important; }

.bg-secondary{ background-color: rgba(107,114,128,0.14) !important; color: var(--text) !important; }
html[data-theme="dark"] .bg-secondary{ background-color: rgba(148,163,184,0.14) !important; color: var(--text) !important; }

/* Bootstrap utilities that often break in Dark Mode */
html[data-theme="dark"] .bg-dark{ background-color: var(--surface) !important; color: var(--text) !important; }
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white{ background-color: var(--surface-2) !important; color: var(--text) !important; }
html[data-theme="dark"] .text-white{ color: var(--text) !important; }
html[data-theme="dark"] .text-dark{ color: var(--text) !important; }
html[data-theme="dark"] .text-muted{ color: var(--muted) !important; }
html[data-theme="dark"] .form-text{ color: rgba(229,231,235,0.72) !important; }
html[data-theme="dark"] .small.text-muted{ color: rgba(229,231,235,0.72) !important; }

html[data-theme="dark"] .btn-outline-dark{ color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .btn-outline-dark:hover{ background-color: var(--surface) !important; }
html[data-theme="dark"] .btn-outline-secondary{ border-color: var(--border) !important; }
html[data-theme="dark"] .btn-secondary{ background-color: rgba(148,163,184,0.14) !important; border-color: rgba(148,163,184,0.20) !important; color: var(--text) !important; }
html[data-theme="dark"] .btn-info{ color: var(--text) !important; }

.card, .modal-content{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}
.card .card-header{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.header{
  background: transparent !important;
}
.header h4, .header h5, .header h3{ color: var(--text); }

/* Controls */
input.form-control, select.form-select, textarea.form-control, .form-control{
  height: var(--control-h);
  padding: 8px var(--control-px);
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}

/*
  SELECT con indicador de desplegable (flecha/caret)
  Nota: el shorthand `background:` de los controles reemplaza el background-image
  que Bootstrap usa para la flecha del select. Para campos donde queramos el
  indicador visual, usamos un wrapper `.select-caret`.
*/
.select-caret{ position: relative; }
.select-caret::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--muted);
  opacity: .95;
}
.select-caret > select.form-select{ padding-right: 38px; }
textarea.form-control, textarea.form-control-sm, textarea{
  height: auto;
  min-height: 90px;
}

input.form-control:focus, select.form-select:focus, textarea.form-control:focus, .form-control:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--focus);
  outline: none;
}

.input-group-text{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted);
}

/* Config theme switch container */
.theme-toggle-box{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Make readonly / helper backgrounds consistent */
html[data-theme="dark"] input.bg-light,
html[data-theme="dark"] .form-control.bg-light{
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Tables */
.table, table{
  color: var(--text);
}
/* Encabezados de tablas: fondo SOLIDO para evitar transparencia al hacer scroll */
.table thead th{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="dark"] .table thead th{
  background: var(--surface-2) !important;
}
.table tbody tr:hover{
  background: var(--row-hover);
}

/* Small UI fixes for dark */
html[data-theme="dark"] .dropdown-menu{
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .modal-backdrop.show{
  opacity: 0.65;
}

/* Ensure links visible */
a{ color: var(--primary); }
a:hover{ filter: brightness(1.06); }

.text-muted{ color: var(--muted) !important; }

.vista { display: none; padding-bottom: 80px; }
        
        /* LOGIN */
        #vista-login { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg); display: flex; justify-content: center; align-items: center; z-index: 900; }
        .login-box { background: var(--surface); padding: 25px; border-radius: 12px; width: 360px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border); color: var(--text); }
        .btn-verde { background: var(--success); color: #ffffff; padding: 15px; width: 100%; border: none; font-weight: 400; cursor: pointer; border-radius: 10px; margin-top: 15px; font-size: 1.05rem; }

        /* GENERAL */
        .header { background: var(--primary); color: var(--primary-contrast); padding: 15px; display: flex; justify-content: space-between; align-items: center; }
        
        .grid-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px; padding: 50px; max-width: 1000px; margin: 0 auto; }

        /* --- DASHBOARD: variables de layout (solo escritorio) --- */
        :root{
          --tile-w: 260px;
          --tile-h: 200px;
          --tile-gap: 30px;
          --tile-pad: 20px;
          --tile-radius: 14px;
        }
        body.ui-compact{
          --tile-w: 240px;
          --tile-h: 180px;
          --tile-gap: 20px;
          --tile-pad: 16px;
        }
        body.ui-kiosk{
          --tile-w: 320px;
          --tile-h: 240px;
          --tile-gap: 28px;
          --tile-pad: 22px;
        }

        /* DESKTOP: 3x3 centrado con tamaño fijo */
        @media (min-width: 992px){
          .grid-menu{
            grid-template-columns: repeat(3, var(--tile-w));
            justify-content: center;
            gap: var(--tile-gap);
            max-width: none;
          }
          .card-item{
            width: var(--tile-w);
            height: var(--tile-h);
            padding: var(--tile-pad);
            box-sizing: border-box;
          }
        }
        /* Dashboard tiles: ensure icon + text are perfectly centered */
        .card-item {
          background: var(--surface);
          padding: 30px;
          border-radius: var(--tile-radius);
          cursor: pointer;
          transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
          box-shadow: var(--shadow);
          border: 1px solid var(--border);
          color: var(--text);
          /* robust centering (some fonts/icons can look slightly off with only text-align) */
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          gap: 10px;
          user-select: none;
          -webkit-tap-highlight-color: transparent;
          touch-action: manipulation;
        }
        .card-item i{ display:block; line-height: 1; margin-bottom: 0 !important; }
        .card-item h5{ margin:0; font-weight: 400; letter-spacing: 0; color: var(--text); text-align:center;  padding:0; margin:0; display:block; }

        .card-item:hover { transform: translateY(-4px); filter: brightness(1.02); }
        .card-item:active { transform: translateY(-1px) scale(0.985); filter: brightness(1.03); }

        /* En pantallas táctiles: no depender del hover */
        @media (hover: none){
          .card-item:hover{ transform: none; filter: none; }
          .card-item:active{ transform: scale(0.98); }
        }

        /* Kiosco: tipografía un poco más grande */
        body.ui-kiosk .card-item h5{ font-size: 1.05rem; }
        body.ui-kiosk .card-item i{ transform: scale(1.05); }
.paper-simple { max-width: 1200px; margin: 20px auto; background: var(--surface); padding: 25px; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--border); }

        /* Toggle del tema en la barra superior */
        .theme-toggle-inline{ display:inline-flex; align-items:center; gap:10px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); }
        .theme-toggle-inline i{ color: rgba(255,255,255,0.92); font-size: 0.95rem; }
        .theme-toggle-inline .form-check-input{ cursor: pointer; }

/* Ajuste: Toggle del tema en modo claro (más visible sin ser exagerado) */
html[data-theme="light"] .theme-toggle-inline{
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
}
html[data-theme="light"] .theme-toggle-inline i{
  color: rgba(0,0,0,0.70);
}



        /* Inventario: selector de almacén (pantalla, no modal) */
.inventario-chooser{
  display:none;
  min-height: calc(100vh - 80px);
  padding: 48px 16px;
  background: radial-gradient(900px 500px at 25% 0%, rgba(245,158,11,0.14), transparent 60%),
              radial-gradient(900px 500px at 90% 15%, rgba(59,130,246,0.10), transparent 55%),
              var(--bg);
}
.inventario-chooser .inventario-chooser-card{
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}
.inventario-chooser .inventario-chooser-header{
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.inventario-chooser .inventario-chooser-title{
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  gap: 10px;
  margin:0;
}
.inventario-chooser .inventario-chooser-body{
  padding: 22px;
}
.inventario-chooser .inventario-chooser-hint{
  font-size: .88rem;
  color: var(--muted);
}
.inventario-chooser .inventario-chooser-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  width:100%;
  margin-top: 14px;
}
.inventario-chooser select.form-select{
  height: 44px;
  border-radius: 10px;
}
.inventario-chooser .alert{
  border-radius: 12px;
}

/* TABLAS Y DATOS */
        .tabla-datos { width: 100%; border-collapse: collapse; margin-top: 15px; color: var(--text); }
        .tabla-datos th { background: var(--surface-2); color: var(--text); padding: 12px; text-align: left; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); }
        .tabla-datos td { border-bottom: 1px solid var(--border); padding: 10px; background: transparent; }
        .tabla-scroll { overflow-x: auto; max-height: 400px; overflow-y: auto; }

        /* Acciones en tablas (compacto + alineado) */
        .row-actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap: nowrap; }
        .td-actions{ white-space: nowrap; }
        .inv-action-btn{
          width: 34px;
          height: 32px;
          padding: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
        }

        /* Fallback: si una tabla no marca td-actions, igual evitamos desbordes en la última columna */
        .tabla-datos td:last-child{ white-space: nowrap; }

        /* Mobile: tablas más estilo APP (sin scroll horizontal y acciones en línea) */
        @media (max-width: 576px){
          .paper-simple{ padding: 14px; margin: 16px auto; }
          .tabla-datos{ table-layout: fixed; font-size: 11px; }
          .tabla-datos th, .tabla-datos td{ padding: 8px 6px; }
          .tabla-datos td{ vertical-align: middle; word-break: break-word; }
          .td-actions{ width: 120px; }
          .row-actions{ gap:6px; }
          .inv-action-btn{ width: 32px; height: 32px; border-radius: 10px; }

          /* Inventario > Productos: ocultar Cód para que todo quepa */
          #inv-tab-productos .tabla-datos th:nth-child(1),
          #inv-tab-productos .tabla-datos td:nth-child(1){ display:none; }

          /* Inventario > Compras: ocultar Fecha para que no haya scroll lateral */
          #inv-tab-compras .tabla-datos th:nth-child(2),
          #inv-tab-compras .tabla-datos td:nth-child(2){ display:none; }
        }
        
        /* ESTADO DEUDA */
        tr.fila-deuda { background-color: #ffe6e6 !important; }
        tr.fila-deuda td { color: #d63384 !important; font-weight: bold !important; border-bottom: 1px solid #ffcccc !important; }
        
        /* CAJA - Pequeño para la barra de facturación */
        .caja-status-box { padding: 10px; border-radius: 5px; text-align: center; font-weight: bold; font-size: 0.9rem; }
        .caja-abierta { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .caja-cerrada { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

        html[data-theme="dark"] .caja-abierta{ background: rgba(22,163,74,0.18); color: #d1fae5; border-color: rgba(22,163,74,0.25); }
        html[data-theme="dark"] .caja-cerrada{ background: rgba(220,38,38,0.18); color: #fee2e2; border-color: rgba(220,38,38,0.25); }
        
        .dif-verde { color: #198754; font-weight: bold; }
        .dif-rojo { color: #dc3545; font-weight: bold; }
        .dif-azul { color: #0d6efd; font-weight: bold; }

        .barra-botones { background-color: var(--surface); padding: 10px; border-top: 1px solid var(--border); position: fixed; bottom: 0; width: 100%; z-index: 10; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

        /* Bootstrap striped tables / list groups (evita fondos blancos en Dark Mode) */
        html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{ background-color: rgba(255,255,255,0.03) !important; color: var(--text) !important; }
        html[data-theme="dark"] .table > :not(caption) > * > *{ background-color: transparent; color: var(--text); }

/* Filas con deuda (pendientes): el texto debe ser #d63384 en ambos modos */
html[data-theme="dark"] tr.fila-deuda{ background-color: #ffe6e6 !important; }
html[data-theme="dark"] tr.fila-deuda td{
  color: #d63384 !important;
  font-weight: bold !important;
}
        html[data-theme="dark"] .list-group-item{ background: var(--surface); border-color: var(--border); color: var(--text); }

        /* Estilos de Impresión */
        @media print {
            body { background: white !important; }
            .no-print { display: none !important; }
            .print-area { width: 100%; margin: 0 auto; font-family: 'Arial', sans-serif; font-size: 10pt; }
            .print-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ccc; padding-bottom: 10px; margin-bottom: 15px; }
            .print-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
            .print-table th, .print-table td { border: 1px solid #ddd; padding: 5px; }
            .print-table th { background-color: #f2f2f2; text-align: left; }
            .print-totals { width: 40%; margin-left: auto; margin-top: 10px; }
            .print-totals td { padding: 3px; border: none; font-size: 11pt; }
        }

/* ====== FROM index.html style block ====== */

body { font-family: 'Arial', sans-serif; font-size: 10pt; margin: 0; padding: 0; }
                    .print-area { width: ${formato === 'TICKET' ? '80mm' : '7.5in'}; margin: 0 auto; padding: 10px; }
                    .print-header { border-bottom: 1px solid #000; padding-bottom: 5px; margin-bottom: 10px; text-align: center; }
                    .print-table { width: 100%; border-collapse: collapse; margin-top: 5px; }
                    .print-table th, .print-table td { border-bottom: 1px ${formato === 'TICKET' ? 'dashed' : 'solid'} #ccc; padding: 4px 2px; text-align: left; }
                    .print-table th { background-color: #f8f8f8; border-bottom: 2px solid #000; }
                    .print-totals { width: ${formato === 'TICKET' ? '100%' : '40%'}; margin-left: ${formato === 'TICKET' ? '0' : 'auto'}; margin-top: 10px; border: 1px solid #ccc; }
                    .print-totals td { padding: 5px; }
                    .footer-sig { height: 50px; margin-top: 20px; border-top: 1px solid #000; text-align: center; font-size: 8pt; }
                    @media print { .print-area { box-shadow: none; } }


/* ===================== ANALÍTICA ===================== */
.stat-card{
  background: var(--surface);
  border-radius:14px;
  padding:14px 16px;
  box-shadow: var(--shadow);
  border:1px solid var(--border);
}
.stat-title{ font-size:.85rem; color: var(--muted); }
.stat-value{ font-size:1.4rem; font-weight: 400; margin-top:4px; }
.stat-sub{ font-size:.85rem; color: var(--muted); margin-top:2px; }

.chart-card{
  background: var(--surface);
  border-radius:14px;
  padding:14px 16px;
  box-shadow: var(--shadow);
  border:1px solid var(--border);
}
.chart-title{ font-weight: 400; margin-bottom:10px; }

.conta-kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:1rem;
}

.conta-kpi-item{
  min-width:0;
}

.conta-kpi-card{
  min-height: 128px;
  height: 100%;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}


#vista-contabilidad .conta-resumen-grid > [class*="col-"]{
  display:flex;
}

#vista-contabilidad .conta-resumen-grid .chart-card{
  width:100%;
}

#vista-contabilidad #conta-body-mensual td,
#vista-contabilidad #conta-body-mensual th,
#vista-contabilidad #conta-body-gastos-cat td,
#vista-contabilidad #conta-body-gastos-cat th{
  white-space: nowrap;
}

@media (max-width: 1199.98px){
  .conta-kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px){
  .conta-kpi-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px){
  .stat-value{ font-size:1.2rem; }
}


/* -------------------------------
   RESUMEN DE FACTURA (DETALLE)
-------------------------------- */
.resumen-factura-card{
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.resumen-factura-card .rf-title{
    font-weight: 400;
    text-align: center;
    letter-spacing: .6px;
    font-size: 0.95rem;
    color: var(--text);
}
.resumen-factura-card .rf-section{
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 0.78rem;
    color: var(--muted);
}
.resumen-factura-card .rf-table td{
    padding: 2px 0;
}
.resumen-factura-card .rf-label{
    text-align: left;
    white-space: nowrap;
    color: var(--muted);
}
.resumen-factura-card .rf-value{
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.resumen-factura-card .rf-total-label{
    font-weight: 400;
    letter-spacing: .2px;
}
.resumen-factura-card .rf-total-value{
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.resumen-factura-card hr{
    opacity: .15;
}
.resumen-factura-card .rf-muted{
    opacity: .9;
}

/* Modal detalle factura: navegación anterior/siguiente */
.det-nav-btn{
    border-radius: 10px;
    font-weight: 700;
    padding: 6px 10px;
    line-height: 1;
}
.det-nav-btn.disabled,
.det-nav-btn:disabled{
    opacity: .45;
    pointer-events: none;
}

/* =====================
   FILTRO FACTURAS (compacto)
   ===================== */
#filtro-dinamico{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-top: -4px;
  margin-bottom: 8px !important;
}

#filtro-dinamico .row{
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
}

#filtro-dinamico .row > [class*='col-']{
  flex: 0 0 auto;
  width: auto !important;
  padding: 0 !important;
}

#filtro-dinamico label{ display: none !important; }

/* Anchos amigables para que queden lado a lado */
#filtro-numero-desde, #filtro-numero-hasta{ width: 120px; }
#filtro-fecha-desde, #filtro-fecha-hasta{ width: 160px; }
#filtro-vendedor2, #filtro-comprobante2, #filtro-metodo2{ width: 220px; }

#filtro-dinamico .btn{ white-space: nowrap; }

/* Contenedor de filtros (input principal + filtro dinámico) */
.fact-filtros-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  /* Más aire entre el bloque principal (select + buscar) y el bloque dinámico */
  gap: 18px;
}

/* Bloque dinámico: que no empuje el layout ni provoque scroll horizontal */
.fact-filtros-row .fact-filtro-dinamico{
  margin: 0 !important;
  padding: 10px 12px;
  flex: 1 1 360px;
  max-width: 520px;
}

/* Unificar alturas y que se vean alineados */
.fact-filtros-row .input-group-text,
.fact-filtros-row .form-select,
.fact-filtros-row .form-control,
.fact-filtros-row .btn{
  height: 38px;
}

/* Ajuste fino para que el texto quede centrado verticalmente */
.fact-filtros-row .input-group-text{ display:flex; align-items:center; }
.fact-filtros-row .btn{ display:flex; align-items:center; justify-content:center; }

/* Que el input-group principal y el dinámico tengan el mismo “peso visual” */
.fact-filtros-row .input-group{ flex: 1 1 520px; max-width: 520px; }

/* Evita que el botón Limpiar quede más alto por el ancho completo */
#filtro-dinamico .btn{ height: 38px; }

/* Controles dinámicos en una sola fila, con separación limpia */
.fact-dyn-flex{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 14px;
  /* Baja ligeramente el bloque dinámico para alinearlo visualmente con el select #filtro-modo */
  margin-top: 6px;
}

/* Evitar que las columnas de Bootstrap fuercen anchos raros dentro del bloque dinámico */
.fact-dyn-flex > [class*="col-"]{
  flex: 0 0 auto;
  width: auto;
  padding: 0;
}

/* Que el select principal del bloque dinámico se vea del mismo “peso” que el bloque de la izquierda */
#filtro-vendedor2, #filtro-comprobante2, #filtro-metodo2{ width: 260px; }

/* Compactar cabecera de NUEVA FACTURA */
#factura-top-grid .form-label{
  margin-bottom: 2px;
  font-size: 11px;
  line-height: 1.1;
}
#factura-top-grid .small.text-muted{ line-height: 1.1; }

/* Encabezado compacto (grid) para NUEVA FACTURA */

.factura-top-compact{ border-radius: 6px; }

/* Grid principal: todo en una sola fila (como sistema clásico) */
.factura-top-compact .fc-grid{
  display: grid;
  /* Buscador un poco más estrecho para mantener proporciones con el resto */
  grid-template-columns: 1.55fr 1.1fr .9fr 1.0fr 1.0fr .9fr .9fr;
  gap: 8px;
  /*
    IMPORTANTÍSIMO:
    No alinear al "end".
    El bloque de búsqueda de cliente incluye una línea extra (puntos/saldo/puntos a ganar)
    y cuando se alinea al final, el resto de campos "baja" y se rompe la simetría.
    Con "start" todos los campos quedan al mismo nivel (como en tu prueba al desactivarlo).
  */
  align-items: start;
}

/*
  Alinear el input "Buscar cliente" al mismo nivel que los demás campos:
  el bloque de búsqueda incluye textos mini (puntos/bonos) y eso empuja la altura,
  haciendo que el input quede más arriba que los otros. Para evitarlo, sacamos
  esos mini-textos del flujo y reservamos espacio en el contenedor.
*/
#bonos-factura-line{
  margin-top: 4px;
  display: flex;
  flex-wrap: nowrap;           /* mantener en 1 sola línea */
  gap: 6px;
  align-items: center;
  white-space: nowrap;         /* no partir texto */
  overflow-x: auto;            /* si no cabe, permitir scroll horizontal solo en esta línea */
  overflow-y: hidden;
  scrollbar-width: none;       /* Firefox */
}
#bonos-factura-line::-webkit-scrollbar{ height: 0; } /* Chrome/Safari: ocultar barra */
#bonos-factura-line .bf-seg{ font-size: 11px; opacity: .95; }
#bonos-factura-line .bf-sep{ font-size: 11px; opacity: .6; margin: 0 2px; }
#bonos-factura-line .bf-saldo-badge{
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(25, 180, 90, .22); /* verde suave */
  border: 1px solid rgba(25, 180, 90, .35);
}
#bonos-factura-line .badge{
  font-size: 11px;
  line-height: 1.1;
}


.factura-top-compact .form-control,
.factura-top-compact .form-select,
.factura-top-compact .btn{
  height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.factura-top-compact .input-group .btn{ height: 32px; }

.factura-top-compact .fc-mini{
  font-size: 11px;
  line-height: 1.1;
  margin-top: 2px;
  color: #6c757d;
}

/* Ajuste responsive
   Regla del proyecto: NO queremos una "tercera" versión rara en tablet.
   Tablet debe comportarse como móvil (layout apilado).
*/
@media (max-width: 991.98px) and (orientation: portrait){
  .factura-top-compact .fc-grid{ grid-template-columns: 1fr; }
}


/* Facturación: selector de almacén (input-group) - coherente con tema */
#vista-factura .almacen-group .input-group-text,
#vista-factura .almacen-group .form-select{
  border-color: var(--border);
}

html[data-theme="dark"] #vista-factura .almacen-group .input-group-text{
  background: rgba(255,255,255,0.06);
  color: rgba(229,231,235,0.88);
}

html[data-theme="dark"] #vista-factura .almacen-group .form-select{
  background-color: rgba(255,255,255,0.04);
  color: var(--text);
}

html[data-theme="dark"] #vista-factura .almacen-group .form-select:focus{
  box-shadow: 0 0 0 .25rem var(--focus);
}


/* Fix: Bootstrap disabled select se veía "lavado" en tema oscuro (almacén/principal) */
html[data-theme="dark"] #vista-factura .almacen-group .form-select:disabled,
html[data-theme="dark"] #vista-factura .almacen-group .form-select.disabled{
  background-color: rgba(255,255,255,0.06) !important;
  color: rgba(229,231,235,0.88) !important;
  opacity: 1; /* evita que se apague demasiado */
}


/* Fix v2: almacén/principal está en vista-historial-facturas (no vista-factura) */
html[data-theme="dark"] #almacen-select-fac:disabled,
html[data-theme="dark"] #almacen-select-fac.disabled{
  background-color: rgba(255,255,255,0.06) !important;
  color: rgba(229,231,235,0.88) !important;
  opacity: 1 !important;
  border-color: rgba(148,163,184,0.22) !important;
}
html[data-theme="dark"] #almacen-select-fac:disabled option{
  color: #111827; /* opciones desplegadas suelen renderizarse por el SO; fallback */
}
html[data-theme="dark"] #vista-historial-facturas .almacen-group .input-group-text{
  background: rgba(255,255,255,0.06);
  color: rgba(229,231,235,0.88);
  border-color: rgba(148,163,184,0.22);
}


/* Mejoras: Placeholder legible en tema oscuro (global) */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: rgba(229,231,235,0.55);
}

/* Compat: algunos navegadores usan prefijos */
html[data-theme="dark"] input::-webkit-input-placeholder,
html[data-theme="dark"] textarea::-webkit-input-placeholder{
  color: rgba(229,231,235,0.55);
}
html[data-theme="dark"] input::-moz-placeholder,
html[data-theme="dark"] textarea::-moz-placeholder{
  color: rgba(229,231,235,0.55);
  opacity: 1;
}
html[data-theme="dark"] input:-ms-input-placeholder,
html[data-theme="dark"] textarea:-ms-input-placeholder{
  color: rgba(229,231,235,0.55);
}


/* ===========================
   Mobile Stepper: Cliente -> Productos
   =========================== */
@media (max-width: 768px){
  body.step-products #factura-top-grid{
    display:none !important;
  }
  .mobile-client-bar{
    display:none;
    margin: 0 0 10px 0;
  }
  body.step-products .mobile-client-bar{
    display:block;
  }
  .mobile-client-bar-inner{
    /* Use theme variables so it matches BOTH dark/light without forcing white backgrounds */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .mobile-client-bar-title{
    font-size: 11px;
    opacity: 0.75;
    min-width: 50px;
  }
  .mobile-client-bar-name{
    flex:1;
    font-weight: 600;
    font-size: 14px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Make the continue button consistent */
  #btn-to-products.btn-to-products{
    height: 44px;
    border-radius: 10px;
  }

  /* Ensure bar inherits theme text */
  .mobile-client-bar-inner{ color: var(--text); }
  .mobile-client-bar-title{ color: var(--muted); }
}


/* ===========================
   Opción B (Mobile): Productos en tarjetas
   Solo aplica en la vista de FACTURA
   =========================== */
@media (max-width: 768px){
  #vista-factura .tabla-scroll{
    overflow-x: visible;
    /* En móvil no queremos scroll interno en la tabla (se vuelve incómodo).
       Que el scroll sea el de la página, no el de .tabla-scroll. */
    max-height: none !important;
    overflow-y: visible !important;
  }
  #vista-factura .tabla-scroll .tabla-datos thead{
    display: none !important;
  }
  #vista-factura .tabla-scroll .tabla-datos{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
  }

  /* Each row becomes a card */
  #vista-factura .tabla-scroll .tabla-datos tbody tr{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "codigo codigo"
      "desc desc"
      "cant precio"
      "total total"
      "acciones acciones";
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    /* Solo layout: NO cambiamos colores. */
    border: 0;
    background: transparent;
  }

  /*
    IMPORTANTE:
    No debemos alterar la paleta de colores ya definida para el sistema.
    Solo re-maquetamos la tabla en móvil (cards) sin cambiar colores.
    (El modo claro/oscuro ya está definido por el tema global.)
  */

  #vista-factura .tabla-scroll .tabla-datos tbody td{
    padding: 0 !important;
    border: 0 !important;
    display: block;
  }

  #vista-factura .tabla-scroll .tabla-datos tbody td:nth-child(1){ grid-area: codigo; }
  #vista-factura .tabla-scroll .tabla-datos tbody td:nth-child(2){ grid-area: desc; }
  #vista-factura .tabla-scroll .tabla-datos tbody td:nth-child(3){ grid-area: cant; }
  #vista-factura .tabla-scroll .tabla-datos tbody td:nth-child(4){ grid-area: precio; }
  #vista-factura .tabla-scroll .tabla-datos tbody td:nth-child(5){ grid-area: total; }
  #vista-factura .tabla-scroll .tabla-datos tbody td:nth-child(6){ grid-area: acciones; }

  /* Label above each field */
  #vista-factura .tabla-scroll .tabla-datos tbody td::before{
    content: attr(data-label);
    display: block;
    font-size: 11px;
    letter-spacing: .3px;
    margin-bottom: 6px;
    opacity: .75;
  }

  /* Inputs comfortable for touch */
  #vista-factura .tabla-scroll .tabla-datos input,
  #vista-factura .tabla-scroll .tabla-datos select{
    height: 46px;
    font-size: 16px;
    border-radius: 12px;
  }

  /* Total field aligns to right like summary */
  #vista-factura .tabla-scroll .tabla-datos input.total{
    text-align: right;
    font-weight: 700;
  }

  /* Delete button centered */
  #vista-factura .tabla-scroll .tabla-datos .btn-del-row{
    height: 44px;
    border-radius: 12px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* =====================================================
   Inventario > Movimientos (Reporte) - Responsive móvil
   Convierte la tabla ancha en tarjetas (sin cambiar colores)
   ===================================================== */
@media (max-width: 576px){
  #inv-tab-mov .table-responsive{ overflow-x: hidden; }

  #inv-tab-mov table.table{
    border: 0;
    background: transparent;
  }

  #inv-tab-mov thead{ display: none; }

  #inv-tab-mov tbody tr{
    display: block;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
  }

  /* Cada celda como fila label/valor */
  #inv-tab-mov tbody td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 6px 0;
    white-space: normal;
  }

  #inv-tab-mov tbody td::before{
    content: attr(data-label);
    font-weight: 600;
    opacity: .78;
  }

  /* Primera línea (código) más protagonista */
  #inv-tab-mov tbody td:first-child{
    font-size: 16px;
    font-weight: 800;
    padding-top: 2px;
  }

  /* Descripción se deja respirar */
  #inv-tab-mov tbody td:nth-child(2){
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 6px;
  }

  /* Estado vacío */
  #inv-tab-mov tbody tr.no-data{ padding: 14px; }
  #inv-tab-mov tbody tr.no-data td{
    display: block;
    text-align: center;
  }
  #inv-tab-mov tbody tr.no-data td::before{ content: ''; }
}


/* =====================================================
   Facturación > Historial de facturas - Responsive móvil
   Convierte la tabla comprimida en tarjetas (estilo APP)
   Igual al patrón usado en Inventario > Movimientos
   ===================================================== */
@media (max-width: 576px){
  #vista-historial-facturas .tabla-scroll{ overflow-x: hidden; }

  #vista-historial-facturas table.tabla-datos{
    border: 0;
    background: transparent;
  }

  #vista-historial-facturas table.tabla-datos thead{ display:none; }

  #vista-historial-facturas table.tabla-datos tbody tr{
    display: block;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
  }

  #vista-historial-facturas table.tabla-datos tbody td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 6px 0;
    white-space: normal;
  }

  #vista-historial-facturas table.tabla-datos tbody td::before{
    content: attr(data-label);
    font-weight: 600;
    opacity: .78;
  }

  /* Primera línea (ID) más protagonista */
  #vista-historial-facturas table.tabla-datos tbody td:first-child{
    font-size: 16px;
    font-weight: 800;
    padding-top: 2px;
  }

  /* Cliente deja una separación visual */
  #vista-historial-facturas table.tabla-datos tbody td:nth-child(3){
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 6px;
  }
}


/* =====================================================
   Cuadre - Responsive móvil
   Tablas (Gastos, Comentarios, Guardados) en estilo APP
   ===================================================== */
@media (max-width: 576px){
  /* Evita scroll horizontal innecesario */
  #vista-cuadre .table-responsive{ overflow-x: hidden; }

  #vista-cuadre table.cuadre-app-table{
    border: 0;
    background: transparent;
  }
  #vista-cuadre table.cuadre-app-table thead{ display:none; }

  #vista-cuadre table.cuadre-app-table tbody tr{
    display: block;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.12);
    background: transparent;
  }
  html[data-theme="dark"] #vista-cuadre table.cuadre-app-table tbody tr{
    border-color: rgba(255,255,255,0.12);
  }

  #vista-cuadre table.cuadre-app-table tbody td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 6px 0;
    white-space: normal;
  }
  #vista-cuadre table.cuadre-app-table tbody td::before{
    content: attr(data-label);
    font-weight: 600;
    opacity: .78;
    padding-right: 10px;
  }

  
  /* Ajustes para que las tarjetas queden centradas y "ordenadas" */
  #vista-cuadre table.cuadre-app-table tbody tr{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  #vista-cuadre table.cuadre-app-table tbody td::before{
    flex: 0 0 48%;
    max-width: 48%;
    text-align: left;
  }
  #vista-cuadre table.cuadre-app-table tbody td{
    min-height: 28px;
  }
  #vista-cuadre table.cuadre-app-table tbody td input{
    max-width: 160px;
    margin-left: auto;
  }
  /* Otras formas de pago: inputs simétricos y a ancho completo */
  #vista-cuadre table.cuadre-payments tbody td[data-label="Monto"]{
    width: 100% !important;
  }
  #vista-cuadre table.cuadre-payments tbody td[data-label="Monto"] input{
    width: 100% !important;
    max-width: 260px !important;
    display: block;
    margin-left: auto;
    box-sizing: border-box;
  }


  /* Footer (Totales) en formato tipo app */
  #vista-cuadre table.cuadre-app-table tfoot{ display:block; }
  #vista-cuadre table.cuadre-app-table tfoot tr{
    display:flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.10);
  }
  html[data-theme="dark"] #vista-cuadre table.cuadre-app-table tfoot tr{
    border-top-color: rgba(255,255,255,0.12);
  }
  #vista-cuadre table.cuadre-app-table tfoot th{
    display:flex;
    justify-content: space-between;
    border:0;
    padding: 6px 0;
  }

  /* Botón de acción al final ocupa todo el ancho (se siente tipo app) */
  #vista-cuadre table.cuadre-app-table tbody td[data-label="Acción"]{
    justify-content: flex-end;
  }

  /* Filas de estado (vacío) */
  #vista-cuadre table.cuadre-app-table tbody tr.no-data{ padding: 14px; }
  #vista-cuadre table.cuadre-app-table tbody tr.no-data td{
    display: block;
    text-align: center;
  }
  #vista-cuadre table.cuadre-app-table tbody tr.no-data td::before{ content: ''; }

  /* Resumen de cuadre más compacto y legible */
  #vista-cuadre #cuadre-tab-resumen{ margin-bottom: 8px; }
  #vista-cuadre #cuadre-tab-resumen tr{ display:flex; justify-content: space-between; gap: 10px; }
  #vista-cuadre #cuadre-tab-resumen td{ border:0; padding: 6px 0; }
  #vista-cuadre #cuadre-tab-resumen td:first-child{ opacity: .9; }
}


/* Mobile: Compra items (Nueva compra - Inventario) */
@media (max-width: 768px){
  #tabla-compra thead{ display:none; }
  #tabla-compra, #tabla-compra tbody, #tabla-compra tr, #tabla-compra td{ display:block; width:100%; }
  #tabla-compra tbody tr{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
  }
  #tabla-compra tbody tr td{
    border: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0;
  }
  #tabla-compra tbody tr td:last-child{ margin-bottom: 0; }

  #tabla-compra tbody tr td::before{
    content: attr(data-label);
    display:block;
    font-size: .75rem;
    opacity: .75;
    margin-bottom: 4px;
  }

  /* grid layout inside each row */
  #tabla-compra tbody tr{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #tabla-compra tbody tr td[data-label="Descripción"]{
    grid-column: 1 / -1;
  }
  #tabla-compra tbody tr td[data-label="Acción"]{
    grid-column: 1 / -1;
    text-align: right;
  }
  #tabla-compra .compra-del{
    width: 100%;
    max-width: 125px;
  }
  #tabla-compra td.text-end{ text-align:left !important; }
}


/* ==============================
   Mobile UX: Facturación (Historial)
   ============================== */
.no-scroll{ overflow:hidden !important; }

@media (max-width: 768px){
  /* Ocultar barra de botones antigua en móvil */
  #vista-historial-facturas .barra-botones{ display:none !important; }
  /* Espacio para la barra fija inferior */
  #vista-historial-facturas .paper-simple{ padding-bottom: 92px !important; }

  /* Controles de turno más compactos (estilo app) */
  #vista-historial-facturas .fact-turn-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  /* reset estilos de btn-group en móvil para que no se desalineen */
  #vista-historial-facturas .fact-turn-actions.btn-group > .btn,
  #vista-historial-facturas .fact-turn-actions > .btn{
    width:100% !important;
    margin-left: 0 !important;
    border-radius: 10px !important;
    white-space: nowrap;
    font-size: 11px;
    padding: 10px 8px;
    min-height: 42px;
  }
  #vista-historial-facturas #caja-status-display{ width:100% !important; text-align:center; }
/* Almacén y búsqueda ocupan todo el ancho */
  #vista-historial-facturas .almacen-group{ max-width: 100% !important; width:100% !important; }
  #vista-historial-facturas .input-group{ width:100% !important; }

  /* Colapsable de filtros */
  #fact-filtros-wrap.collapsed{ display:none !important; }

  /* Bottom bar */
  .fact-mobile-bottombar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px;
    background: rgba(0,0,0,0.20);
    backdrop-filter: blur(8px);
    z-index: 900;
    display:flex;
    gap:10px;
  }

  /* =====================================================
     Vista FACTURA (Nueva factura) - Totales + botones fijos en móvil
     En modo oscuro NO debe verse como una franja blanca.
     Usamos variables del tema: --surface / --border.
     ===================================================== */
  @media (max-width: 576px){
    /* El bloque de totales + botones está en el .mt-3.row dentro de #vista-factura */
    #vista-factura .paper-simple > .mt-3.row{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      margin: 0;
      padding: 10px 12px;
      background: var(--surface);
      border-top: 1px solid var(--border);
      z-index: 899;
      /* En móvil lo tratamos como un dock con 2 filas:
         1) Acciones (+Producto / +Comentario)
         2) Resumen (subtotal/itbis/total) + botones Guardar */
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* SOLO móvil + modo oscuro + vista FACTURA: oscurecer ligeramente la barra fija inferior de cobro */
    html[data-theme="dark"] #vista-factura .paper-simple > .mt-3.row{ background: #040d21; }

    /* Evita que el contenido quede tapado por la barra fija */
    #vista-factura .paper-simple{ padding-bottom: 220px !important; }
  /* Evitar que el dock inferior tape modales (pantallas cortas) */
  body.modal-open #vista-factura .paper-simple > .mt-3.row,
  body.modal-open .fact-mobile-bottombar{
    display:none !important;
  }


    /* El layout original usa columnas: en móvil lo hacemos full-width */
    #vista-factura .paper-simple > .mt-3.row > .col-md-6{
      width: 100% !important;
      max-width: 100% !important;
    }

    /* En móvil, el resumen va arriba, luego acciones (+Producto/+Comentario), luego Guardar */
    /* Ocultamos la columna izquierda original (solo era para escritorio) */
    #vista-factura .paper-simple > .mt-3.row > .col-md-6:first-child{ display:none !important; }

    /* La columna derecha contendrá: resumen + acciones móvil + guardar */
    #vista-factura .paper-simple > .mt-3.row > .col-md-6.text-end{
      order: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Acciones rápidas en móvil (insertadas dentro de la columna derecha) */
    #vista-factura .paper-simple .fact-mobile-actions{
      display:flex;
      gap:10px;
      width:100%;
      order: 2;
    }
    #vista-factura .paper-simple .fact-mobile-actions .btn{
      flex:1 1 0;
      border-radius:12px;
      padding: 12px 10px;
      font-weight:700;
      white-space: nowrap;
    }

    /* Guardar / Guardar e imprimir: deben verse más importantes */
    #vista-factura .paper-simple > .mt-3.row > .col-md-6.text-end .d-flex.gap-2.w-100{ order: 3; }

    /* Alineación visual */
    #vista-factura .paper-simple > .mt-3.row > .col-md-6.text-end{ text-align: right !important; }
  }
  .fact-mobile-bottombar .fact-btn-primary{
    flex: 1 1 auto;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 14px;
  }
  .fact-mobile-bottombar .fact-btn-more{
    flex: 0 0 auto;
    min-width: 120px;
    border-radius: 12px;
    padding: 12px 0;
  }

  /* Action sheet */
  .fact-acciones-sheet{
    position: fixed;
    inset: 0;
    z-index: 10000;
  }
  .fact-acciones-sheet .fact-sheet-backdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.55);
    z-index: 0;
  }
  .fact-acciones-sheet .fact-sheet-card{
    position:absolute;
    left: 12px; right: 12px;
    bottom: 78px;
    z-index: 1;
    border-radius: 16px;
    overflow:hidden;
    background: rgba(20, 28, 45, 0.98);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  .fact-acciones-sheet .fact-sheet-btn{
    width:100%;
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    color: #e9eefc;
    font-size: 16px;
    text-align:left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .fact-acciones-sheet .fact-sheet-btn:last-child{ border-bottom:0; }
  .fact-acciones-sheet .fact-sheet-btn i{ width: 22px; text-align:center; }
  .fact-acciones-sheet .fact-sheet-btn.danger{ color: #ffb3b3; }
  .fact-acciones-sheet .fact-sheet-btn:active{ transform: scale(0.99); }
}

/* Acciones rápidas insertadas dentro del resumen (solo móvil) */
.fact-mobile-actions{ display:none; }


/* --- Mobile cards: Cierres/Turnos --- */
.cierres-cards{display:flex;flex-direction:column;gap:10px;}
.cierre-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:12px;}
.cierre-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px;}
.cierre-titulo{font-weight:700;font-size:14px;}
.cierre-estado{font-size:12px;padding:4px 8px;border-radius:999px;color:#fff;white-space:nowrap;}
.cierre-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;}
.cierre-grid .lbl{opacity:.85;}
.cierre-grid .val{text-align:right;font-weight:600;}
.cierre-actions{margin-top:10px;display:flex;justify-content:flex-end;}
.cierre-actions .btn{border-radius:10px;}
.dif-pos{color:#33d17a;font-weight:700;}
.dif-neg{color:#ff6b6b;font-weight:700;}
.dif-zero{opacity:.9;font-weight:700;}

@media (max-width: 768px){
  /* En móvil, la tabla se oculta y se usan tarjetas */
  #tabla-cierres-wrapper{display:none;}
  #cierres-cards.d-none{display:none !important;}
  #cierres-cards{display:flex;}
}

/* BONOS - destacar movimientos USADO (similar a fila-deuda / pendiente) */
.bono-tipo{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 700;
}
.bono-tipo-ganado{
  background: rgba(25,135,84,0.12);
  color: #198754;
  border: 1px solid rgba(25,135,84,0.25);
}
.bono-tipo-usado{
  background-color: #ffe6e6;
  color: #d63384;
  border: 1px solid #ffcccc;
}

/* Tabla (escritorio) */
tr.bono-usado-row{ background-color: #ffe6e6 !important; }
tr.bono-usado-row td{ color: #d63384 !important; font-weight: 600; border-bottom: 1px solid #ffcccc !important; }
html[data-theme="dark"] tr.bono-usado-row{ background-color: #ffe6e6 !important; }
html[data-theme="dark"] tr.bono-usado-row td{ color: #d63384 !important; }

/* Tarjetas (móvil) */
.bono-usado-card{ border: 1px solid #ffcccc !important; }


/* --- CUADRE: mejoras modo APP (v3) --- */
@media (max-width: 768px){
  /* Inputs/textarea alineados y con tamaño consistente dentro de tarjetas */
  #vista-cuadre table.cuadre-app-table tbody td > input,
  #vista-cuadre table.cuadre-app-table tbody td > textarea,
  #vista-cuadre table.cuadre-app-table tbody td > select{
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  /* Campos de texto (Descripción/Comentario) más cómodos */
  #vista-cuadre .cuadre-textarea{
    resize: vertical;
    min-height: 44px;
    line-height: 1.25;
  }

  /* Celda de acción: evita que el label quede “en el medio” visualmente */
  #vista-cuadre table.cuadre-app-table tbody td.cuadre-action-cell{
    align-items: flex-start;
  }
  #vista-cuadre table.cuadre-app-table tbody td.cuadre-action-cell::before{
    padding-top: 6px;
  }

  /* Tabla resumen (key/value) en formato APP */
  #vista-cuadre table.cuadre-kv-table{
    border: 0;
  }
  #vista-cuadre table.cuadre-kv-table tr{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.12);
  }
  html[data-theme="dark"] #vista-cuadre table.cuadre-kv-table tr{
    border-bottom-color: rgba(255,255,255,0.12);
  }
  #vista-cuadre table.cuadre-kv-table td{
    border: 0 !important;
    padding: 0 !important;
    white-space: normal;
  }
  #vista-cuadre table.cuadre-kv-table td:first-child{
    font-weight: 600;
    opacity: .78;
  }
  #vista-cuadre table.cuadre-kv-table td:last-child{
    text-align: right;
    font-weight: 700;
  }
}


/* --------------------------------------------------
   Crear Producto: separadores y precios responsive
-------------------------------------------------- */
.ep-sep{
  border: 0;
  height: 1px;
  margin: 10px 0;
  background: rgba(255,255,255,.10);
}
body.light-mode .ep-sep, .light-mode .ep-sep{
  background: rgba(0,0,0,.10);
}

/* Tabla de precios: evitar fondos blancos en oscuro */
.ep-precios-table{
  color: inherit;
}
.ep-precios-table th,
.ep-precios-table td{
  background: transparent !important;
  border-color: rgba(255,255,255,.12);
}
body.light-mode .ep-precios-table th,
body.light-mode .ep-precios-table td,
.light-mode .ep-precios-table th,
.light-mode .ep-precios-table td{
  border-color: rgba(0,0,0,.12);
}

/* Vista APP de precios (solo móvil) */
.ep-precios-app{
  display: none;
  margin-top: 10px;
}
.ep-precios-app-row{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.ep-precios-app-label{
  min-width: 70px;
  font-weight: 600;
}
.ep-precios-app-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ep-precios-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.03);
}
body.light-mode .ep-precios-card, .light-mode .ep-precios-card{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}
.ep-precios-card-title{
  font-weight: 700;
  margin-bottom: 4px;
}
.ep-precios-card-util{
  font-size: 11px;
  opacity: .85;
  margin-bottom: 6px;
}

@media (max-width: 768px){
  .ep-precios-wrap{ display: none !important; }
  .ep-precios-app{ display: block; }
  .ep-precios-app-grid{ grid-template-columns: 1fr; }
}


/* === CIERRE DE TURNO: colores semánticos (scoped, sin afectar el resto) === */
#modalConfirmarDiferencia .modal-header.bg-warning{
  /* mejora legibilidad en tema oscuro */
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

/* === MEJORA CONTRASTE SOBRANTE (AMARILLO) === */
#modalConfirmarDiferencia .modal-header.bg-warning,
#modalConfirmarDiferencia .modal-header.bg-warning *{
  color:#1f2937 !important; /* gris oscuro */
}

#modalConfirmarDiferencia .btn-warning{
  color:#1f2937 !important;
  font-weight:600;
}


/* === FACTURACIÓN (ESCRITORIO): botones debajo de la tabla === */
/* En móvil ya existe un diseño propio (bottombar/sheet). Ocultamos esta barra en móvil. */
@media (max-width: 767.98px){
  .barra-botones{ display:none !important; }
}

/* En escritorio: que NO sea fija abajo; que quede justo debajo de la tabla */
@media (min-width: 768px){
  .barra-botones{
    position: static !important;
    bottom: auto !important;
    width: auto !important;
    z-index: auto !important;
    background: transparent !important;
    border-top: none !important;
    padding: 14px 0 0 !important;
    margin-top: 10px;
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
  }
  .barra-botones .btn-action{
    flex: 1 1 0;
    min-width: 165px;
    height: 48px;
    font-weight: 700;
    border-radius: 12px;
  }
}


/* === FACTURACIÓN (ESCRITORIO): panel de botones con el mismo ancho del contenedor (.paper-simple) === */
@media (min-width: 768px){
  .barra-botones{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    margin-top: 14px !important;
    box-shadow: none !important;
  }
  .tabla-scroll{ margin-bottom: 12px; }
}


/* === FACTURACIÓN DESKTOP: ancho exacto del panel de botones === */
@media (min-width: 768px){
  .barra-botones{
    max-width: 1200px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* === FACTURACIÓN DESKTOP: altura del panel de botones === */
@media (min-width: 768px){
  .barra-botones{
    min-height: 110px !important;
    padding: 22px 18px !important;
    align-items: center;
  }

  .barra-botones .btn-action{
    height: 56px !important;
    font-size: 15px;
  }
}


/* === FACTURACIÓN DESKTOP: botones más altos === */
@media (min-width: 768px){
  .barra-botones .btn-action{
    height: 85px !important;
    font-size: 16px;
    font-weight: 700;
  }
}

/* === FACTURACIÓN TABLET (768px - 991.98px): NO crear un "tercer" diseño roto ===
   En tablet, los 6 botones no caben en una sola fila y provocan scroll horizontal.
   Solución: permitir wrap y hacer un grid 3x2 (o 2x3 según ancho) sin afectar escritorio.
*/
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait){
  .barra-botones{
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 10px !important;
    min-height: auto !important;
    padding: 14px !important;
  }
  .barra-botones .btn-action{
    flex: 1 1 calc(33.333% - 10px) !important;
    min-width: 0 !important;
    height: 56px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    white-space: nowrap;
  }
}

/* En tablet estrecha, pasar a 2 columnas para que el texto no se corte */
@media (min-width: 768px) and (max-width: 860px) and (orientation: portrait){
  .barra-botones .btn-action{
    flex: 1 1 calc(50% - 10px) !important;
  }
}



/* Tablet horizontal: mantener diseño tipo escritorio, pero evitar scroll horizontal en barra de botones */
@media (max-width: 1024px) and (orientation: landscape){
  .barra-botones{
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .barra-botones .btn-action{
    flex: 1 1 calc(33.333% - 10px) !important;
    min-width: 220px !important; /* conserva sensación de escritorio */
    white-space: nowrap;
  }
}

/* Ayudas contextuales (icono ?) */
.help-icon{
  margin-left:8px;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
  font-weight:700;
  line-height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.help-icon:hover{background:rgba(255,255,255,.14);}
.help-icon:focus{outline:2px solid rgba(255,255,255,.25); outline-offset:2px;}

.help-pop{
  display:none;
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.82);
  font-size:12px;
}
.help-pop.is-open{display:block;}

/* Ajuste placeholder cobro */
#cobro-recibido::placeholder {
    font-size: 25px;
    opacity: 0.6;
}

@media (max-width: 768px) {
    #cobro-recibido::placeholder {
        font-size: 25px;
    }
}


/* === Ajuste UX: Barra fija de facturación más comprimida en móvil === */
@media (max-width: 576px){
  /* Dock inferior más bajo */
  #vista-factura .paper-simple > .mt-3.row{
    padding: 6px 10px !important;
    gap: 6px !important;
  }

  /* Reducir espacio reservado para que no tape líneas */
  #vista-factura .paper-simple{ padding-bottom: 160px !important; }

  /* Bloque de acciones (+Producto / +Comentario) más compacto */
  #vista-factura .paper-simple .fact-mobile-actions{
    gap: 6px !important;
  }
  #vista-factura .paper-simple .fact-mobile-actions .btn{
    padding: 8px 10px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    line-height: 1.1 !important;
  }

  /* Guardar / Guardar e imprimir más bajitos */
  #vista-factura .paper-simple > .mt-3.row > .col-md-6.text-end{
    gap: 6px !important;
  }
  #vista-factura .paper-simple > .mt-3.row > .col-md-6.text-end .d-flex.gap-2.w-100 .btn{
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    line-height: 1.1 !important;
  }

  /* Totales/inputs (Dscto/Impto) un poco más compactos */
  #vista-factura .paper-simple > .mt-3.row input,
  #vista-factura .paper-simple > .mt-3.row select{
    height: 40px !important;
  }
}



/* === UX móvil: Dscto% + Impto% en la misma línea del TOTAL === */
.fact-total-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 576px){
  /* Mantener todo en una sola línea */
  .fact-total-row{
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* Inputs de porcentaje más compactos */
  #area-porcentajes-manuales{
    margin: 0 !important;
    gap: 6px !important;
    flex: 0 0 auto;
  }
  #area-porcentajes-manuales .input-group{
    max-width: 120px !important;
  }
  #area-porcentajes-manuales .input-group-text{
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  #area-porcentajes-manuales input{
    padding: 6px 8px !important;
    font-size: 13px !important;
    height: 34px !important;
  }

  /* TOTAL más compacto pero visible */
  .fact-total-row h3{
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }
}



/* === UX móvil: Porcentajes con etiqueta arriba (más compactos) === */
#area-porcentajes-manuales .fact-pct-field{ display:flex; flex-direction:column; gap:3px; }
#area-porcentajes-manuales .fact-pct-label{ font-size: 11px; opacity: .85; text-align:left; }
#area-porcentajes-manuales .fact-pct-input{ padding: 6px 8px; height: 32px; font-size: 12px; border-radius: 10px; }
  /* Reordenar (solo móvil): primero % Descuento/Impuesto (izquierda), luego TOTAL (derecha) */
  #area-porcentajes-manuales{
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
  }
  #area-porcentajes-manuales .fact-pct-field{ order: 1; }
  #area-porcentajes-manuales .fact-pct-field:last-of-type{ order: 2; }
  #area-porcentajes-manuales .fact-total-inline{
    order: 3;
    margin-left: auto !important;
    text-align: right !important;
  }


/* Ajustes específicos móvil para que el TOTAL no se corte */
@media (max-width: 576px){
  #area-porcentajes-manuales{
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  #area-porcentajes-manuales .fact-pct-field{
    width: 90px;
  }
  .fact-total-row{
    align-items: flex-end;
  }
  .fact-total-row h3{
    margin-left: auto !important;
    text-align: right !important;
    font-size: 20px !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}



/* === Ajuste final: porcentajes más pequeños en móvil === */
@media (max-width: 576px){
  #area-porcentajes-manuales .fact-pct-field{
    width: 95px !important;
  }
  #area-porcentajes-manuales .fact-pct-label{
    font-size: 11px !important;
  }
  #area-porcentajes-manuales .fact-pct-input{
    height: 30px !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
  }
}


/* === UX móvil: Orden final limpio de resumen === */
@media (max-width: 576px){
  /* Resumen arriba */
  #area-impuesto-extra{
    order: 1;
    margin-bottom: 6px !important;
  }

  /* Inputs % compactos en una sola línea */
  #area-porcentajes-manuales{
    order: 2;
    display:flex !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  /* TOTAL como cierre */
  .fact-total-row{
    order: 3;
    margin-top: 6px !important;
  }

  .fact-total-row h3{
    font-size: 22px !important;
  }
}


/* === UX móvil: resumen compacto y TOTAL sin recortes === */
.fact-pct-row{ align-items: flex-end; }

@media (max-width: 576px){
  /* Resumen (Subtotal/Descuento/Impuesto) pegado al total */
  #area-subtotal, #area-descuento, #area-impuesto, #area-impuesto-extra{
    margin-bottom: 2px !important;
  }

  /* Campos % más pequeños aún */
  #area-porcentajes-manuales{
    gap: 10px !important;
    justify-content: flex-start !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
  }
  #area-porcentajes-manuales .fact-pct-field{ width: 86px !important; }
  #area-porcentajes-manuales .fact-pct-label{ font-size: 11px !important; }
  #area-porcentajes-manuales .fact-pct-input{
    height: 30px !important;
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  /* TOTAL siempre visible */
  #vista-factura h3.fw-bold.text-primary{
    text-align: right !important;
    font-size: 22px !important;
    white-space: nowrap;
  }
}



/* === UX móvil: TOTAL inline junto a descuento/impuesto === */
.fact-total-inline{
  font-weight: 700;
  font-size: 18px;
  color: #2da3ff;
  white-space: nowrap;
  align-self: flex-end;
  margin-left: auto;
}

@media (max-width: 576px){
  .fact-pct-row{
    align-items: flex-end;
  }
}




/* === SOLO ESCRITORIO: inputs (%) al lado de sus líneas (descuento / impuesto adicional) === */
@media (min-width: 992px){
  /* Alinear inputs (%) en columna fija para que queden simétricos */
  #area-descuento.fact-line-with-input,
  #area-impuesto-extra.fact-line-with-input{
    display: grid !important;
    grid-template-columns: 50px auto;
    column-gap: 12px;
    align-items: center;
    justify-content: end;
  }

  #area-descuento.fact-line-with-input .fact-line-input,
  #area-impuesto-extra.fact-line-with-input .fact-line-input{
    width: 50px;
  }

  #area-descuento.fact-line-with-input .fact-line-text,
  #area-impuesto-extra.fact-line-with-input .fact-line-text{
    white-space: nowrap;
  }

  #area-descuento.fact-line-with-input input.fact-pct-input,
  #area-impuesto-extra.fact-line-with-input input.fact-pct-input{
    width: 50px;
    height: 29.5px;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 6px;
  }
/* Total con tamaño 18px, sin romper layout */
  .fact-total-inline{
    font-size: 18px;
    white-space: nowrap;
  }
  #area-porcentajes-manuales{
    justify-content: flex-end !important;
  }

}


@media (min-width: 992px){
  /* Fondo para montos (subtotal, descuento, impuesto) */
  .fact-amount-box,
  #lbl-subtotal-valor,
  #lbl-descuento-valor,
  #lbl-impuesto-extra-valor{
    background: rgba(255,255,255,0.06);
    padding: 6px 10px;
    border-radius: 6px;
    min-width: 90px;
    display: inline-block;
  }
}


@media (min-width: 992px){
  /* Fondo también para Subtotal y TOTAL */
  #lbl-subtotal-valor,
  #lbl-total-valor{
    background: rgba(255,255,255,0.08);
    padding: 6px 12px;
    border-radius: 6px;
    min-width: 110px;
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  #lbl-total-valor{
    font-size: 18px;
    font-weight: 600;
  }
}



@media (min-width: 992px){
  /* Fondo uniforme para TODOS los montos */
  /* IDs reales en la vista: lbl-subtotal y lbl-total */
  #lbl-subtotal,
  #lbl-descuento-valor,
  #lbl-impuesto-extra-valor,
  #lbl-total{
    background: rgba(255,255,255,0.08);
    padding: 6px 12px;
    border-radius: 6px;
    min-width: 110px;
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  #lbl-total{
    font-size: 18px;
    font-weight: 600;
  }
}

/* Quitar flechas (spin buttons) en inputs numéricos - SOLO escritorio */
#area-descuento input.fact-pct-input::-webkit-outer-spin-button,
#area-descuento input.fact-pct-input::-webkit-inner-spin-button,
#area-impuesto-extra input.fact-pct-input::-webkit-outer-spin-button,
#area-impuesto-extra input.fact-pct-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#area-descuento input.fact-pct-input,
#area-impuesto-extra input.fact-pct-input {
  -moz-appearance: textfield;
}


/* === SOLO ESCRITORIO: Alineación estricta de inputs (%) (columna fija) === */
@media (min-width: 992px){
  #area-descuento.fact-line-with-input,
  #area-impuesto-extra.fact-line-with-input{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  /* Columna fija para el input: mismo X en ambas líneas */
  #area-descuento.fact-line-with-input .fact-line-input,
  #area-impuesto-extra.fact-line-with-input .fact-line-input{
    flex: 0 0 50px !important;
    width: 50px !important;
    display: inline-flex !important;
    justify-content: flex-end !important;
    margin-right: 12px !important;
  }

  #area-descuento.fact-line-with-input .fact-line-input input.fact-pct-input,
  #area-impuesto-extra.fact-line-with-input .fact-line-input input.fact-pct-input{
    width: 50px !important;
    height: 29.5px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Texto sin empujar el input por espacios raros */
  #area-descuento.fact-line-with-input .fact-line-text,
  #area-impuesto-extra.fact-line-with-input .fact-line-text{
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }
}



/* === SOLO ESCRITORIO: orden label -> input -> (% y valor) === */
@media (min-width: 992px){
  #area-descuento.fact-line-with-input,
  #area-impuesto-extra.fact-line-with-input{
    gap: 8px !important;
  }
  #area-descuento.fact-line-with-input .fact-line-label,
  #area-impuesto-extra.fact-line-with-input .fact-line-label{
    white-space: nowrap;
  }
  #area-descuento.fact-line-with-input .fact-line-rest,
  #area-impuesto-extra.fact-line-with-input .fact-line-rest{
    white-space: nowrap;
    margin-left: 2px;
  }
}



/* === SOLO ESCRITORIO: Descuento/Impuesto en 4 columnas (label | input | % | valor) === */
@media (min-width: 992px){
  #area-descuento.fact-line-with-input,
  #area-impuesto-extra.fact-line-with-input{
    display: grid !important;
    grid-template-columns: 110px 50px 18px 110px;
    align-items: center !important;
    column-gap: 10px !important;
    justify-content: end !important;
  }

  #area-descuento.fact-line-with-input .fact-line-label,
  #area-impuesto-extra.fact-line-with-input .fact-line-label{
    text-align: right !important;
    white-space: nowrap !important;
  }

  #area-descuento.fact-line-with-input .fact-line-input,
  #area-impuesto-extra.fact-line-with-input .fact-line-input{
    width: 50px !important;
    justify-self: center !important;
    margin-right: 0 !important;
    display: block !important;
  }

  #area-descuento.fact-line-with-input input.fact-pct-input,
  #area-impuesto-extra.fact-line-with-input input.fact-pct-input{
    width: 50px !important;
    height: 29.5px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  #area-descuento.fact-line-with-input .fact-line-pctsign,
  #area-impuesto-extra.fact-line-with-input .fact-line-pctsign{
    text-align: right !important;
    white-space: nowrap !important;
  }

  #area-descuento.fact-line-with-input .fact-line-value,
  #area-impuesto-extra.fact-line-with-input .fact-line-value{
    text-align: right !important;
    display: inline-block !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
  }

  .fact-hidden-pct{
    display: none !important;
  }
}



/* === SOLO ESCRITORIO: Impuesto fijo (config) con el mismo layout de 4 columnas === */
@media (min-width: 992px){
  #area-impuesto.fact-line-fixed{
    display: grid !important;
    grid-template-columns: 110px 50px 18px 110px;
    align-items: center !important;
    column-gap: 10px !important;
    justify-content: end !important;
  }

  #area-impuesto.fact-line-fixed .fact-line-label{
    text-align: right !important;
    white-space: nowrap !important;
  }

  #area-impuesto.fact-line-fixed .fact-line-pctvalue{
    width: 50px !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
  }

  #area-impuesto.fact-line-fixed .fact-line-pctsign{
    text-align: right !important;
    white-space: nowrap !important;
  }

  #area-impuesto.fact-line-fixed .fact-line-value{
    text-align: right !important;
    display: inline-block !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
  }
}



/* === SOLO ESCRITORIO: porcentaje del impuesto fijo como "cajita" (no editable) === */
@media (min-width: 992px){
  #area-impuesto.fact-line-fixed .fact-line-fixedpct{
    width: 50px !important;
    height: 29.5px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 6px 8px !important;
    /* apariencia tipo input */
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.06) !important;
    color: inherit !important;
    font-variant-numeric: tabular-nums;
  }
  #area-impuesto.fact-line-fixed .fact-line-fixedpct .fact-hidden-pct{
    display:none !important;
  }
}



/* === SOLO ESCRITORIO: fondo para el resultado del impuesto fijo === */
@media (min-width: 992px){
  #area-impuesto.fact-line-fixed .fact-line-value{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    min-width: 110px;
  }
}



/* Ticket config layout */
.ticket-config-card .card-body{padding:16px;}
.ticket-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.ticket-config-section{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;background:rgba(255,255,255,.02);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;}
.ticket-config-section h6{margin:0 0 12px;font-weight:700;color:#cfe3ff;font-size:14px;letter-spacing:.2px;}
.ticket-config-switches{display:grid;gap:10px;}
.ticket-config-fields{display:grid;gap:12px;}
.ticket-config-section .form-check{margin:0;}
.ticket-config-section .form-check-label{font-size:.95rem;}
.ticket-config-section .form-control,.ticket-config-section .form-select{min-height:40px;}
.ticket-config-section .small.text-muted{line-height:1.25;}
.ticket-inline-toggle{padding:10px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.02);}
@media (max-width: 991.98px){.ticket-config-grid{grid-template-columns:1fr;}}

/* ===== Configuración: orden visual mejorado ===== */
.config-top-note{
  background: rgba(86, 164, 255, .12);
  border: 1px solid rgba(86, 164, 255, .22);
  color: #dbe9ff;
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 18px;
  font-size: .95rem;
}
.config-block-title{
  margin: 8px 0 4px;
  padding: 8px 2px 0;
}
.config-block-title h5{
  margin: 0;
  color: #f3f7ff;
  font-weight: 800;
  font-size: 1.02rem;
}
.config-block-sub{
  margin-top: 4px;
  color: #9db2d7;
  font-size: .88rem;
}
.config-card{
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
#vista-config .card-header{
  letter-spacing: .2px;
}
#vista-config .card-body{
  padding: 16px;
}
.ticket-config-card{
  margin-top: 2px;
}
.ticket-config-card .card-header{
  flex-wrap: wrap;
  gap: 6px 10px;
}
.ticket-config-grid{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.ticket-config-section{
  min-height: 100%;
}
.ticket-config-section h6{
  font-size: 15px;
}
#vista-config .row.g-4{
  row-gap: 18px !important;
}
@media (max-width: 1199.98px){
  .ticket-config-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 991.98px){
  .ticket-config-grid{grid-template-columns:1fr;}
  .config-block-title{margin-top:2px;}
}


/* ===== Configuración: layout profesional por pestañas ===== */
.config-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start;}
.config-tabs{position:sticky;top:78px;display:flex;flex-direction:column;gap:10px;}
.config-tab-btn{appearance:none;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(10,27,58,.98),rgba(7,19,43,.98));border-radius:16px;padding:14px 16px;text-align:left;color:#d9e8ff;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:all .2s ease;cursor:pointer;}
.config-tab-btn:hover{transform:translateY(-1px);border-color:rgba(86,164,255,.35);}
.config-tab-btn.active{border-color:rgba(86,164,255,.55);background:linear-gradient(180deg,rgba(11,43,94,.98),rgba(8,27,61,.98));box-shadow:0 0 0 1px rgba(86,164,255,.2),0 14px 28px rgba(0,0,0,.22);}
.config-tab-title{display:block;font-size:1rem;font-weight:800;color:#fff;margin-bottom:3px;}
.config-tab-sub{display:block;font-size:.82rem;color:#9db2d7;line-height:1.35;}
.config-tab-content{min-width:0;}
.config-pane{display:none;}
.config-pane.active{display:block;}
.config-pane-head{margin-bottom:14px;padding:2px 2px 0;}
.config-pane-head h5{margin:0;color:#f3f7ff;font-weight:800;font-size:1.06rem;}
.config-pane-sub{margin-top:4px;color:#9db2d7;font-size:.9rem;}
.config-save-bar{display:flex;justify-content:center;margin-top:22px;}
.config-save-btn{min-width:min(560px,100%);}
#vista-config .config-pane .config-card{height:100%;}
#vista-config .config-pane .card-header{font-size:.92rem;}
#vista-config .config-pane .card-body label{font-weight:600;font-size:.92rem;margin-bottom:6px;}
#vista-config .config-pane .form-control,#vista-config .config-pane .form-select{min-height:40px;}
#vista-config .config-pane textarea.form-control{min-height:140px;}
.ticket-config-card .card-body{padding:18px;}
.ticket-config-section{border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px;background:rgba(255,255,255,.02);}
.ticket-config-section h6{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07);font-size:.98rem;font-weight:800;color:#f5f9ff;}
.ticket-config-switches{display:grid;gap:10px;}
.ticket-config-fields{display:grid;gap:12px;}
@media (max-width: 1199.98px){.config-shell{grid-template-columns:1fr;}.config-tabs{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 767.98px){.config-tabs{grid-template-columns:1fr;}.config-tab-btn{padding:12px 14px;}.config-save-btn{width:100%;}.ticket-config-grid{grid-template-columns:1fr !important;}}

/* --- UX módulo de cuadre --- */
.cuadre-status-wrap{display:flex;flex-direction:column;gap:.1rem}
.cuadre-status-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem;border-radius:999px;font-size:.86rem;font-weight:700;width:max-content;max-width:100%}
.cuadre-status-new{background:#e8f1ff;color:#0d47a1}
.cuadre-status-edit{background:#fff4d6;color:#8a5b00}
.cuadre-status-ready{background:#e8f7ed;color:#166534}
.cuadre-status-busy{background:#eef2ff;color:#4338ca}
.cuadre-inline-summary{background:#f8fafc;border:1px solid #dbe3ef;border-radius:12px;padding:.7rem .9rem;font-size:.92rem;color:#334155;text-align:center}
.cuadre-toast-container{position:fixed;right:18px;bottom:18px;z-index:1080;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.cuadre-toast{min-width:280px;max-width:380px;background:#fff;border:1px solid #dbe3ef;border-left:5px solid #22c55e;border-radius:14px;box-shadow:0 14px 30px rgba(15,23,42,.14);padding:.85rem .95rem;opacity:0;transform:translateY(12px);transition:all .25s ease;pointer-events:auto}
.cuadre-toast.show{opacity:1;transform:translateY(0)}
.cuadre-toast.toast-success{border-left-color:#22c55e}
.cuadre-toast.toast-warning{border-left-color:#f59e0b}
.cuadre-toast.toast-danger{border-left-color:#ef4444}
.cuadre-toast.toast-info{border-left-color:#3b82f6}
.cuadre-toast-title{font-weight:700;font-size:.95rem;color:#0f172a;margin-bottom:.1rem}
.cuadre-toast-body{font-size:.88rem;color:#475569;line-height:1.35}
.cuadre-row-highlight{animation:cuadreFlash 2.8s ease}
@keyframes cuadreFlash{0%{background:#dcfce7}100%{background:transparent}}
@media (max-width: 576px){.cuadre-toast-container{left:12px;right:12px;bottom:12px}.cuadre-toast{min-width:0;max-width:none;width:100%}}


/* --------------------------------------------------
   Facturación: autocompletado de productos por código
-------------------------------------------------- */
.factura-autocomplete{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  max-height:260px;
  overflow:auto;
}
.factura-autocomplete-item{
  width:100%;
  border:0;
  background:transparent;
  display:grid;
  grid-template-columns:minmax(90px, 120px) 1fr;
  gap:12px;
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.factura-autocomplete-item:last-child{ border-bottom:0; }
.factura-autocomplete-item:hover,
.factura-autocomplete-item:focus,
.factura-autocomplete-item.active{
  background:rgba(13,110,253,.08);
  outline:none;
}
.factura-autocomplete-code{
  font-weight:700;
  white-space:nowrap;
}
.factura-autocomplete-desc{
  color:#495057;
}


/* FACTURACIÓN — selector pro de impresión por defecto */
.factura-actions-row{
  align-items: flex-start;
}
.factura-actions-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.factura-action-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.factura-action-buttons-top{
  margin-top: 0;
  margin-bottom: 18px;
}
.factura-bottom-actions-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:14px;
  width:100%;
}
.print-default-inline-control{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  white-space:nowrap;
  flex:0 0 auto;
}
.print-default-inline-control label{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.72);
  margin:0;
}
.print-default-inline-select-wrap{
  width:136px;
}
.print-default-inline-control #fact-print-default{
  height:34px;
  min-height:34px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  padding:4px 28px 4px 12px;
}
.factura-save-buttons{
  min-width:0;
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
}
.factura-save-buttons .btn{
  min-width:190px;
}
@media (max-width: 768px){
  .factura-actions-left{
    gap:12px;
  }
  .factura-bottom-actions-row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .print-default-inline-control{
    width:100%;
    justify-content:space-between;
    margin-right:0;
  }
  .print-default-inline-select-wrap{
    width:160px;
    max-width:52%;
  }
  .factura-save-buttons{
    width:100%;
  }
  .factura-save-buttons .btn{
    min-width:0;
  }
  .factura-action-buttons,
  .factura-action-buttons-top{
    width:100%;
  }
}


.factura-bottom-left-tools{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  min-width:0;
}
.factura-shortcuts-btn{
  border-radius:10px;
  font-weight:600;
  padding:.45rem .8rem;
  white-space:nowrap;
}
.modal-atajos-factura{
  background:linear-gradient(180deg, rgba(11,22,49,.98) 0%, rgba(9,19,42,.98) 100%);
  color:#eef4ff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.modal-atajos-factura .modal-header{
  border-bottom:1px solid rgba(255,255,255,.10);
  background:transparent;
  padding:1rem 1.2rem .9rem;
}
.modal-atajos-factura .modal-title{
  color:#78aefc;
  font-weight:800;
  letter-spacing:.02em;
}
.modal-atajos-factura .modal-subtitle{
  font-size:.93rem;
  color:rgba(238,244,255,.72);
  margin-top:.15rem;
}
.modal-atajos-factura .modal-body{
  padding:1rem 1.2rem 1.15rem;
}
.atajos-list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.atajo-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:.9rem;
  align-items:center;
}
.atajo-key{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:.35rem .7rem;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  text-align:center;
}
.atajo-desc{
  color:#eef4ff;
  font-weight:500;
}
@media (max-width: 768px){
  .factura-bottom-left-tools{
    width:100%;
    justify-content:space-between;
    gap:10px;
  }
  .factura-shortcuts-btn{
    flex:0 0 auto;
  }
  .atajo-item{
    grid-template-columns:96px 1fr;
    gap:.7rem;
  }
  .atajo-key{
    min-height:34px;
    padding:.3rem .55rem;
    font-size:.9rem;
  }
  .atajo-desc{
    font-size:.95rem;
  }
}


/* Historial de facturas: fila seleccionada visible y clara */
#body-facturas tr.fact-row-selected,
#body-facturas tr.table-active{
  background: #1d4ed8 !important;
  color: #fff !important;
}
#body-facturas tr.fact-row-selected td,
#body-facturas tr.table-active td{
  color: #fff !important;
  font-weight: 600;
}
#body-facturas tr.fact-row-selected td::before,
#body-facturas tr.table-active td::before{
  color: rgba(255,255,255,.82) !important;
}


/* Modal de avisos propio del sistema */
.sistema-modal-aviso{
  background: linear-gradient(180deg, #1a2238 0%, #11192e 100%);
  color: #eef4ff;
  border: 1px solid rgba(120,150,255,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  border-radius: 14px;
}
.sistema-modal-aviso .modal-title{
  font-weight: 700;
  letter-spacing: .2px;
}
.sistema-modal-aviso .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .9;
}
.sistema-aviso-mensaje{
  white-space: pre-line;
  line-height: 1.45;
  color: #e6edff;
  font-size: 15px;
}
.sistema-modal-aviso .modal-footer .btn{
  min-width: 108px;
  font-weight: 600;
}


/* --------------------------------------------------
   Modales/Toasts del sistema
-------------------------------------------------- */
.sistema-modal-confirm{
  background: linear-gradient(180deg, #11192f 0%, #0c1326 100%);
  color:#eef4ff;
  border:1px solid rgba(120,150,255,.28);
  box-shadow:0 18px 50px rgba(0,0,0,.48);
  border-radius:14px;
}
.sistema-modal-confirm .modal-title{
  font-weight:700;
  letter-spacing:.2px;
}
.sistema-modal-confirm .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity:.9;
}
.sistema-confirm-mensaje{
  white-space:pre-line;
  line-height:1.5;
  color:#e6edff;
  font-size:15px;
}
.sistema-modal-confirm .modal-footer .btn{
  min-width:112px;
  font-weight:600;
}
.sistema-toast-container{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1095;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.sistema-toast{
  min-width:290px;
  max-width:390px;
  background:linear-gradient(180deg, rgba(17,25,47,.98) 0%, rgba(10,16,31,.98) 100%);
  color:#eef4ff;
  border:1px solid rgba(120,150,255,.20);
  border-left:5px solid #22c55e;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.36);
  padding:.88rem .95rem;
  opacity:0;
  transform:translateY(12px);
  transition:all .25s ease;
  pointer-events:auto;
}
.sistema-toast.show{ opacity:1; transform:translateY(0); }
.sistema-toast.toast-success{ border-left-color:#22c55e; }
.sistema-toast.toast-info{ border-left-color:#3b82f6; }
.sistema-toast.toast-warning{ border-left-color:#f59e0b; }
.sistema-toast.toast-danger{ border-left-color:#ef4444; }
.sistema-toast-title{
  font-weight:700;
  font-size:.95rem;
  color:#f8fbff;
  margin-bottom:.15rem;
}
.sistema-toast-body{
  font-size:.89rem;
  line-height:1.4;
  color:#d8e3ff;
}
@media (max-width: 576px){
  .sistema-toast-container{ left:12px; right:12px; bottom:12px; }
  .sistema-toast{ min-width:0; max-width:none; width:100%; }
}


/* Historial PRO */
.fact-historial-status{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  margin: .8rem 0 0;
  padding: .7rem .85rem;
  border:1px solid rgba(59,130,246,.18);
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(239,246,255,.96));
  border-radius: 12px;
}
.fact-historial-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:#e8f0ff;
  color:#1e3a8a;
  font-size:.9rem;
  font-weight:600;
}
.fact-historial-detail{
  color:#475569;
  font-size:.92rem;
  min-width: 240px;
  flex:1 1 280px;
}
#body-facturas tr{
  cursor:pointer;
  transition: background-color .14s ease, transform .08s ease, box-shadow .14s ease;
}
#body-facturas tr:hover{
  box-shadow: inset 0 0 0 9999px rgba(59,130,246,.06);
}
#body-facturas tr.fact-row-selected,
#body-facturas tr.table-active{
  box-shadow: inset 3px 0 0 #93c5fd, 0 8px 18px rgba(29,78,216,.18);
}
#vista-historial-facturas .tabla-scroll .tabla-datos thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
}
@media (max-width: 768px){
  .fact-historial-status{
    padding:.65rem .7rem;
    gap:.45rem;
  }
  .fact-historial-pill{
    font-size:.84rem;
  }
  .fact-historial-detail{
    font-size:.86rem;
  }
}



/* === HISTORIAL FACTURAS: panel de acciones pro / premium === */
@media (min-width: 768px){
  #vista-historial-facturas .barra-botones.barra-botones-pro{
    display:grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px !important;
    align-items: stretch;
    background:
      linear-gradient(180deg, rgba(15,31,62,.96), rgba(10,23,48,.98)) !important;
    border: 1px solid rgba(82,124,204,.22) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    margin-top: 18px !important;
    box-shadow:
      0 18px 38px rgba(2,8,23,.28),
      inset 0 1px 0 rgba(255,255,255,.04);
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action{
    min-width: 0 !important;
    width: 100%;
    height: 100px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: .01em;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-width: 1px !important;
    box-shadow:
      0 10px 20px rgba(2,8,23,.18),
      inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action i{
    font-size: 18px;
    line-height: 1;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action:hover{
    transform: translateY(-1px);
    box-shadow:
      0 14px 26px rgba(2,8,23,.24),
      inset 0 1px 0 rgba(255,255,255,.06);
    filter: brightness(1.03);
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 3px rgba(147,197,253,.22),
      0 14px 26px rgba(2,8,23,.24),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action-main{
    box-shadow:
      0 16px 28px rgba(22,163,74,.22),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action-pay{
    box-shadow:
      0 16px 28px rgba(22,163,74,.18),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action-danger{
    box-shadow:
      0 16px 28px rgba(220,38,38,.18),
      inset 0 1px 0 rgba(255,255,255,.04);
  }
}

@media (max-width: 1199px) and (min-width: 768px){
  #vista-historial-facturas .barra-botones.barra-botones-pro{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px){
  #vista-historial-facturas .barra-botones.barra-botones-pro{
    display:none !important;
  }
}


/* === HISTORIAL FACTURAS: botones premium reforzados === */
@media (min-width: 768px){
  #vista-historial-facturas .barra-botones.barra-botones-pro{
    gap: 16px !important;
    padding: 20px !important;
    border-radius: 18px !important;
    box-shadow:
      0 22px 44px rgba(2,8,23,.34),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action{
    position: relative;
    overflow: hidden;
    min-height: 100px !important;
    height: 100px !important;
    border-radius: 16px !important;
    padding: 14px 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .015em !important;
    text-transform: none;
    gap: 10px !important;
    box-shadow:
      0 16px 30px rgba(2,8,23,.24),
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -1px 0 rgba(0,0,0,.18) !important;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%);
    pointer-events: none;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action i{
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.22));
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action:hover{
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow:
      0 20px 34px rgba(2,8,23,.30),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.18) !important;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action:active{
    transform: translateY(0) scale(.995) !important;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-success.btn-action,
  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-action-pay{
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)), linear-gradient(180deg, #1f9f5a, #17884d) !important;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-primary.btn-action{
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)), linear-gradient(180deg, #0e67c9, #0a57ab) !important;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-secondary.btn-action{
    background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), linear-gradient(180deg, #33415c, #29344b) !important;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-info.btn-action{
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)), linear-gradient(180deg, #25bfe5, #17a8d1) !important;
  }

  #vista-historial-facturas .barra-botones.barra-botones-pro .btn-danger.btn-action{
    background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)), linear-gradient(180deg, #ea3d4c, #d8303f) !important;
  }
}

/* === CLIENTES: importación con progreso === */
.import-clientes-modal{
  background: linear-gradient(180deg, rgba(12,24,48,.98), rgba(8,18,38,.99)) !important;
  border: 1px solid rgba(82,124,204,.24) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 48px rgba(2,8,23,.36), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.import-clientes-modal .modal-title{
  font-weight: 800;
  letter-spacing: .01em;
}
.import-clientes-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 12px;
}
.import-clientes-meta span,
.import-clientes-counters span,
.import-clientes-summary span{
  display:block;
  color:#aab7d6;
  font-size:.85rem;
}
.import-clientes-meta strong{
  font-size:1.05rem;
  color:#eef4ff;
}
.import-clientes-pct{
  font-size:1.2rem;
  font-weight:800;
  color:#9cc3ff;
}
.import-clientes-progress{
  width:100%;
  height:14px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.import-clientes-progress-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, #1dd1a1, #36c3ff);
  box-shadow: 0 0 18px rgba(54,195,255,.22);
  transition: width .18s ease;
}
.import-clientes-status{
  margin-top: 12px;
  color:#d8e4ff;
  font-size:.92rem;
}
.import-clientes-counters,
.import-clientes-summary-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.import-clientes-counters{
  margin-top: 16px;
}
.import-clientes-counters > div,
.import-clientes-summary-grid > div{
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.import-clientes-counters strong,
.import-clientes-summary-grid strong{
  display:block;
  margin-top: 2px;
  color:#f4f8ff;
  font-size:1.05rem;
}
.import-clientes-summary{
  margin-top: 16px;
}
.import-clientes-summary-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 575.98px){
  .import-clientes-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .import-clientes-counters,
  .import-clientes-summary-grid{
    grid-template-columns: 1fr;
  }
}

.import-clientes-detalles{
  margin-top: 14px;
  max-height: 260px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  padding: 12px;
}
.import-clientes-detalle-bloque + .import-clientes-detalle-bloque{
  margin-top: 14px;
  padding-top: 12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.import-clientes-detalle-titulo{
  color:#eef4ff;
  font-weight:700;
  margin-bottom:8px;
}
.import-clientes-detalle-lista{
  margin:0;
  padding-left: 18px;
  color:#d8e4ff;
  font-size:.88rem;
}
.import-clientes-detalle-lista li + li{
  margin-top: 6px;
}

/* === CLIENTES: tabla con scroll y filtros pro === */
#vista-clientes .clientes-toolbar-top{
  align-items:flex-start;
}
#vista-clientes .clientes-filtros-wrap{
  flex: 1 1 620px;
}
#vista-clientes .clientes-resumen{
  font-size: .92rem;
  color: #b9c9ea;
  font-weight: 700;
  white-space: nowrap;
}
#vista-clientes .clientes-table-wrap{
  max-height: 620px;
  overflow: auto;
  border: 1px solid rgba(82,124,204,.18);
  border-radius: 14px;
}
#vista-clientes .tabla-clientes-pro{
  margin-bottom: 0;
}
#vista-clientes .tabla-clientes-pro thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #08162d;
}
#vista-clientes .tabla-clientes-pro tbody td{
  vertical-align: middle;
}
#vista-clientes .cliente-row-index{
  color: #8fb3ff;
  font-weight: 800;
}


/* clientes resumen oculto por requerimiento */
#vista-clientes .clientes-resumen{display:none !important;}


/* === CLIENTES: mejorar modal de importación === */
#modalImportClientesProgress .modal-dialog{
  max-width: 760px !important;
}
.import-clientes-modal{
  min-width: 0;
}
.import-clientes-counters{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.import-clientes-counters > div{
  min-height: 92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.import-clientes-counters span{
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.import-clientes-counters strong{
  margin-top: 8px;
  font-size: 1.7rem;
  line-height: 1;
}
@media (max-width: 767.98px){
  #modalImportClientesProgress .modal-dialog{
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
  }
  .import-clientes-counters{
    grid-template-columns: 1fr !important;
  }
}



/* === FIX ESPACIO HISTORIAL → BOTONES (20px exactos) === */
.historial-card,
.card-historial,
#historialFacturas {
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
}

.tabla-wrapper,
.table-responsive {
  margin-bottom: 0 !important;
}

.acciones-inferiores,
.botones-facturacion {
  margin-top: 0 !important;
}

/* evitar padding extra del card */
.card {
  padding-bottom: 10px !important;
}


/* === FIX DEFINITIVO GAP 20px (SIN COLAPSO DE MÁRGENES) === */
.historial-card,
.card-historial,
#historialFacturas {
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
}

.acciones-inferiores,
.botones-facturacion {
  margin-top: 0 !important;
}

/* eliminar margen superior del contenedor de botones */
.acciones-inferiores,
.botones-facturacion {
  margin-top: 0 !important;
}

/* eliminar margen inferior extra de la tabla */
.tabla-wrapper,
.table-responsive {
  margin-bottom: 0 !important;
}

/* evitar padding que empuje */
.card {
  padding-bottom: 10px !important;
}



/* === AJUSTE HISTORIAL: 20px REALES + 7 FILAS VISIBLES === */
@media (min-width: 768px){
  /* El cuadro de arriba deja 20px exactos */
  #vista-historial-facturas .tabla-scroll{
    margin-bottom: 20px !important;
    max-height: 350px !important; /* aprox. 7 filas visibles + encabezado */
    overflow-y: auto !important;
  }

  /* El panel de botones también queda en 20px */
  #vista-historial-facturas .barra-botones.barra-botones-pro{
    margin-top: 20px !important;
  }
}



/* === Factura: apertura más cómoda, 5 filas visibles y scroll interno === */
@media (min-width: 769px){
  #vista-factura .tabla-scroll{
    max-height: 320px !important; /* encabezado + aprox. 5 filas */
    overflow-y: auto !important;
  }
}
#vista-factura .tabla-scroll{
  overflow-x: auto;
}



/* === AJUSTE CORRECTO COLUMNAS FACTURA === */

/* NO tocar código (col 1) */

/* Descripción (col 2) ocupa todo el espacio */
#vista-factura .tabla-datos th:nth-child(2),
#vista-factura .tabla-datos td:nth-child(2){
  width: auto !important;
}

/* Cantidad */
#vista-factura .tabla-datos th:nth-child(3),
#vista-factura .tabla-datos td:nth-child(3){
  width: 120px !important;
  max-width: 120px !important;
}

/* Precio */
#vista-factura .tabla-datos th:nth-child(4),
#vista-factura .tabla-datos td:nth-child(4){
  width: 130px !important;
  max-width: 130px !important;
}

/* Total */
#vista-factura .tabla-datos th:nth-child(5),
#vista-factura .tabla-datos td:nth-child(5){
  width: 130px !important;
  max-width: 130px !important;
}



/* === FACTURA: código fijo y descripción más ancha === */
#vista-factura .tabla-datos{
  width: 100% !important;
  table-layout: fixed !important;
}

#vista-factura .tabla-datos th:nth-child(1),
#vista-factura .tabla-datos td:nth-child(1){
  width: 210px !important;
  max-width: 210px !important;
}

#vista-factura .tabla-datos th:nth-child(2),
#vista-factura .tabla-datos td:nth-child(2){
  width: calc(100% - 590px) !important;
}

#vista-factura .tabla-datos th:nth-child(3),
#vista-factura .tabla-datos td:nth-child(3){
  width: 110px !important;
  max-width: 110px !important;
}

#vista-factura .tabla-datos th:nth-child(4),
#vista-factura .tabla-datos td:nth-child(4){
  width: 110px !important;
  max-width: 110px !important;
}

#vista-factura .tabla-datos th:nth-child(5),
#vista-factura .tabla-datos td:nth-child(5){
  width: 110px !important;
  max-width: 110px !important;
}

#vista-factura .tabla-datos th:nth-child(6),
#vista-factura .tabla-datos td:nth-child(6){
  width: 50px !important;
  max-width: 50px !important;
}

#vista-factura .tabla-datos td:nth-child(2) input.desc{
  width: 100% !important;
}



/* === FACTURA FINAL: columnas equilibradas === */
#vista-factura .tabla-datos{
  width: 100% !important;
  table-layout: fixed !important;
}

/* Código: NO cambiar visualmente */
#vista-factura .tabla-datos th:nth-child(1),
#vista-factura .tabla-datos td:nth-child(1){
  width: 210px !important;
  max-width: 210px !important;
}

/* Descripción: toma el espacio restante */
#vista-factura .tabla-datos th:nth-child(2),
#vista-factura .tabla-datos td:nth-child(2){
  width: calc(100% - 710px) !important;
}

/* Cantidad */
#vista-factura .tabla-datos th:nth-child(3),
#vista-factura .tabla-datos td:nth-child(3){
  width: 110px !important;
  max-width: 110px !important;
}

/* Precio más ancho */
#vista-factura .tabla-datos th:nth-child(4),
#vista-factura .tabla-datos td:nth-child(4){
  width: 165px !important;
  max-width: 165px !important;
}

/* Total más ancho */
#vista-factura .tabla-datos th:nth-child(5),
#vista-factura .tabla-datos td:nth-child(5){
  width: 165px !important;
  max-width: 165px !important;
}

/* Acciones */
#vista-factura .tabla-datos th:nth-child(6),
#vista-factura .tabla-datos td:nth-child(6){
  width: 60px !important;
  max-width: 60px !important;
}

/* Inputs numéricos alineados */
#vista-factura .tabla-datos input.cant,
#vista-factura .tabla-datos input.precio,
#vista-factura .tabla-datos input.total{
  text-align: right;
}


/* Landing principal CloudVenta */
#vista-publica-principal{
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  background: radial-gradient(circle at top, #0f2f61 0%, #07162e 45%, #030b18 100%);
}
.landing-cloudventa-box{
  width: min(760px, 100%);
  background: rgba(7, 19, 38, 0.92);
  border: 1px solid rgba(120, 162, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 42px 28px;
  text-align: center;
}
.landing-cloudventa-title{
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
}
.landing-cloudventa-subtitle{
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: #cfe0ff;
}
.landing-cloudventa-copy{
  margin: 0 auto 20px;
  max-width: 620px;
  color: #a8bedf;
  line-height: 1.65;
}
.landing-cloudventa-badge{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(57, 186, 113, .12);
  color: #7ef0ae;
  border: 1px solid rgba(126, 240, 174, .25);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .85rem;
}