/* ================================================================
   TFMSolutions IA — Global Styles
   Tema: Glassmorphism Futurista (dark mode)
   ================================================================ */

/* ── Variables ── */
:root {
    --bg-deep:       #060b18;
    --bg-base:       #0d1528;
    --bg-panel:      rgba(255,255,255,.04);
    --bg-panel-hover:rgba(255,255,255,.07);
    --glass-border:  rgba(255,255,255,.09);
    --glass-blur:    blur(18px);

    --accent-blue:   #4f8ef7;
    --accent-purple: #8b5cf6;
    --accent-teal:   #06d6a0;
    --accent-pink:   #f472b6;

    --grad-primary:  linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    --grad-glow:     linear-gradient(135deg, #1a3a8a, #4b2a8a);

    --text-primary:  #e2e8f0;
    --text-muted:    #94a3b8;
    --text-dim:      #475569;

    /* Tokens semanticos: los componentes deben preferirlos a colores fijos. */
    --surface-card:   rgba(255,255,255,.04);
    --surface-subtle: rgba(255,255,255,.03);
    --surface-hover:  rgba(255,255,255,.07);
    --border-subtle:  rgba(255,255,255,.06);
    --border-default: rgba(255,255,255,.10);
    --border-strong:  rgba(79,142,247,.30);
    --text-secondary: #cbd5e1;
    --text-soft:      #7f9bbf;
    --text-success:   #34d399;
    --text-danger:    #f87171;
    --text-warning:   #fbbf24;
    --text-info:      #93c5fd;
    --text-purple:    #c4b5fd;

    --sidebar-w:     270px;
    --topbar-h:      60px;
    --radius-lg:     16px;
    --radius-md:     10px;
    --radius-sm:     6px;

    --transition:    all .25s cubic-bezier(.4,0,.2,1);
    --shadow-glow:   0 0 24px rgba(79,142,247,.18);
    --shadow-card:   0 8px 32px rgba(0,0,0,.4);

    /* Hace que los controles nativos (popup de <select>, scrollbars) se
       rendericen en oscuro, evitando el fondo blanco de las opciones */
    color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Fondo animado con partículas sutiles */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(79,142,247,.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139,92,246,.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ── Scrollbar personalizada ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(79,142,247,.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* ── Glass card ── */
.glass {
    background: var(--bg-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* ── Inputs ── */
.tfm-input {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: .45rem .8rem;
    font-size: .9rem;
    transition: var(--transition);
    outline: none;
}
.tfm-input:focus {
    border-color: rgba(79,142,247,.55);
    box-shadow: 0 0 0 3px rgba(79,142,247,.15);
    background-color: rgba(255,255,255,.08);
}
.tfm-input::placeholder { color: var(--text-dim); }
.tfm-input:disabled {
    opacity: 1;
    color: var(--text-muted);
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.06);
    cursor: not-allowed;
}

/* ── Select: quita el chrome nativo (borde grueso) y usa flecha propia ── */
select.tfm-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 2.1rem;
    border-color: rgba(79,142,247,.18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px;
}
select.tfm-input:hover { border-color: rgba(79,142,247,.35); background-color: rgba(255,255,255,.07); }
select.tfm-input:focus {
    border-color: rgba(79,142,247,.55);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%234f8ef7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.tfm-input option { background: #0d1526; color: #e2e8f0; }
.tfm-input option:checked { background: #1a2740; }

/* ── Botones ── */
.btn-tfm {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.btn-tfm::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .2s;
}
.btn-tfm:hover::after { background: rgba(255,255,255,.08); }
.btn-tfm:active { transform: scale(.97); }

.btn-primary  { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 14px rgba(79,142,247,.3); }
.btn-ghost    { background: transparent; color: var(--text-primary); border: 1px solid var(--glass-border); }
.btn-ghost:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.btn-danger   { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.btn-success  { background: rgba(6,214,160,.15); color: var(--accent-teal); border: 1px solid rgba(6,214,160,.3); }

/* Ripple effect en botones */
.btn-tfm .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-anim .5s linear;
    background: rgba(255,255,255,.25);
    pointer-events: none;
}
@keyframes ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

/* ── Título de sección ── */
.section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: .4rem 0 .8rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 1rem;
}
.section-title::before {
    content: '';
    display: block;
    width: 4px;
    height: 18px;
    background: var(--grad-primary);
    border-radius: 99px;
}

/* ── Table ── */
.tfm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
}
.tfm-table thead th {
    background: rgba(79,142,247,.1);
    color: var(--accent-blue);
    padding: .6rem .8rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .5px;
    border-bottom: 1px solid rgba(79,142,247,.2);
}
.tfm-table tbody tr {
    transition: background .15s;
}
.tfm-table tbody tr:hover {
    background: rgba(255,255,255,.04);
}
.tfm-table tbody td {
    padding: .55rem .8rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--text-primary);
}

/* ── Alineación de tablas (skill formato-tabla) ──
   Números a la derecha, texto/fecha a la izquierda, y la cabecera SIEMPRE igual que su contenido.
   El <th> por defecto se centra, por eso th-left/th-num/th-center existen. Globales con !important
   para que ganen a cualquier regla scoped por página y queden consistentes en todo el sistema. */
.th-num, .td-num       { text-align: right !important; }
.th-left, .td-left     { text-align: left !important; }
.th-center, .td-center { text-align: center !important; }

/* ── Badge ── */
.badge-tfm {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
}
.badge-blue   { background: rgba(79,142,247,.15); color: var(--accent-blue); }
.badge-purple { background: rgba(139,92,246,.15); color: var(--accent-purple); }
.badge-teal   { background: rgba(6,214,160,.15);  color: var(--accent-teal); }
.badge-red    { background: rgba(239,68,68,.15);  color: #f87171; }

/* ── Page enter animation ── */
/* Sin 'forwards': al terminar, el transform vuelve a 'none' para no
   crear un containing block que rompa los modales con position:fixed. */
.page-enter {
    animation: pageEnter .35s cubic-bezier(.4,0,.2,1);
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal base ── */
.tfm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease;
}
.tfm-modal {
    background: rgba(13,21,40,.92);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 80px rgba(0,0,0,.6), var(--shadow-glow);
    padding: 1.5rem;
    min-width: 320px;
    max-width: 90vw;
    animation: modalEnter .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalEnter {
    from { opacity: 0; transform: scale(.88) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Glow line decorativa ── */
.glow-line {
    height: 2px;
    background: var(--grad-primary);
    border-radius: 99px;
    box-shadow: 0 0 8px rgba(79,142,247,.5);
}

/* ── Tooltip ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(.9);
    background: rgba(13,21,40,.95);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: .78rem;
    white-space: nowrap;
    padding: .3rem .6rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ================================================================
   TEMA CLARO  (html[data-theme="light"])
   Redefine las variables base + ajusta las clases compartidas que
   usan colores fijos. El prefijo html[data-theme="light"] le da
   mayor especificidad que los estilos por componente.
   ================================================================ */
html[data-theme="light"] {
    --bg-deep:        #f1f5f9;
    --bg-base:        #f8fafc;
    --bg-panel:       #ffffff;
    --bg-panel-hover: #eef2f7;
    --glass-border:   #cbd5e1;
    --text-primary:   #172033;
    --text-muted:     #475569;
    --text-dim:       #64748b;
    --surface-card:   #ffffff;
    --surface-subtle: #f8fafc;
    --surface-hover:  #eef2ff;
    --border-subtle:  #d8e0ea;
    --border-default: #cbd5e1;
    --border-strong:  #94a3b8;
    --text-secondary: #475569;
    --text-soft:      #64748b;
    --text-success:   #047857;
    --text-danger:    #b91c1c;
    --text-warning:   #92400e;
    --text-info:      #1d4ed8;
    --text-purple:    #6d28d9;
    --shadow-card:    0 3px 14px rgba(15,23,42,.09), 0 1px 3px rgba(15,23,42,.06);
    --shadow-glow:    0 0 24px rgba(79,142,247,.12);

    /* ── Remapa de colores de texto de las páginas (var --lx-HEX) ──
       Los <style> de las páginas usan color:var(--lx-HEX,#HEX): en tema oscuro estas
       variables NO existen y rige el fallback (el color neón original); aquí se definen
       con el tono oscuro equivalente para que el texto contraste sobre fondo claro. */
    /* grises claros → texto oscuro/legible */
    --lx-e2e8f0:#1e293b; --lx-cbd5e1:#334155; --lx-cdd6e6:#334155;
    --lx-94a3b8:#475569; --lx-7f9bbf:#47617e; --lx-7f8aa0:#4a5568; --lx-9aa6b8:#475569;
    /* azul-grises de la marca */
    --lx-4f7db8:#395e8e; --lx-6b8fc0:#395e8e; --lx-7aa2e3:#35609c;
    --lx-93b4d8:#35609c; --lx-bcd4f6:#2f5590; --lx-7eb0ff:#2563eb;
    /* verdes / teal */
    --lx-34d399:#047857; --lx-6ee7b7:#059669; --lx-a7f3d0:#065f46; --lx-bbf7d0:#065f46;
    --lx-37c978:#15803d; --lx-06d6a0:#047857; --lx-2dd4bf:#0f766e; --lx-5eead4:#0f766e;
    /* rojos */
    --lx-f87171:#b91c1c; --lx-fca5a5:#dc2626; --lx-fecaca:#b91c1c;
    /* ámbar / naranja */
    --lx-fbbf24:#a16207; --lx-fcd34d:#a16207; --lx-fde68a:#854d0e;
    --lx-fb923c:#c2410c; --lx-fdba74:#c2410c;
    /* azules */
    --lx-93c5fd:#1d4ed8; --lx-60a5fa:#2563eb; --lx-7dd3fc:#0369a1;
    --lx-bfdbfe:#1e40af; --lx-dbeafe:#1e40af; --lx-4f8ef7:#2563eb;
    /* índigo / violeta / rosa */
    --lx-a5b4fc:#4f46e5; --lx-c4b5fd:#6d28d9; --lx-a78bfa:#6d28d9;
    --lx-c084fc:#7c3aed; --lx-d8b4fe:#7c3aed; --lx-8b5cf6:#6d28d9; --lx-f472b6:#be185d;
}
html[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(79,142,247,.05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139,92,246,.05) 0%, transparent 60%);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(79,142,247,.4); }

/* Glass cards */
html[data-theme="light"] .glass { background:var(--surface-card); border-color:var(--border-subtle); box-shadow:var(--shadow-card); }

/* Inputs y selects */
html[data-theme="light"] .tfm-input { background:#fff; border-color:var(--border-default); color:var(--text-primary); }
html[data-theme="light"] .tfm-input::placeholder { color:var(--text-dim); opacity:1; }
html[data-theme="light"] .tfm-input:hover:not(:disabled) { border-color:var(--border-strong); }
html[data-theme="light"] .tfm-input:focus { border-color:#3b6fd4; background:#fff; box-shadow:0 0 0 3px rgba(59,111,212,.16); }
html[data-theme="light"] select.tfm-input { border-color:var(--border-default); }
html[data-theme="light"] select.tfm-input:hover { border-color:var(--border-strong); background-color:#f8fafc; }
html[data-theme="light"] .tfm-input option { background:#fff; color:var(--text-primary); }
html[data-theme="light"] .tfm-input:disabled { background:#eef2f7; color:var(--text-muted); border-color:var(--border-subtle); }

/* Textos: titulos / valores (oscuros) */
html[data-theme="light"] .page-title,
html[data-theme="light"] .ks-val, html[data-theme="light"] .er-val, html[data-theme="light"] .mr-val,
html[data-theme="light"] .emp-nombre, html[data-theme="light"] .td-nombre, html[data-theme="light"] .td-salario,
html[data-theme="light"] .td-cliente, html[data-theme="light"] .modal-title,
html[data-theme="light"] .welcome-title, html[data-theme="light"] .kpi-val,
html[data-theme="light"] .card-header h3, html[data-theme="light"] .cs-title,
html[data-theme="light"] .tema-nombre { color:var(--text-primary); }

/* Textos: secundarios / etiquetas (gris) */
html[data-theme="light"] .page-desc, html[data-theme="light"] .field-label,
html[data-theme="light"] .ks-label, html[data-theme="light"] .er-label, html[data-theme="light"] .mr-label,
html[data-theme="light"] .emp-sub, html[data-theme="light"] .td-muted, html[data-theme="light"] .td-mono,
html[data-theme="light"] .td-date, html[data-theme="light"] .emp-ingreso, html[data-theme="light"] .kpi-label,
html[data-theme="light"] .kpi-sub, html[data-theme="light"] .welcome-sub,
html[data-theme="light"] .nav-section-label, html[data-theme="light"] .cs-desc,
html[data-theme="light"] .cart-head, html[data-theme="light"] .cart-empty,
html[data-theme="light"] .cat-empty, html[data-theme="light"] .tt,
html[data-theme="light"] .bi-cod, html[data-theme="light"] .cl-fld label,
html[data-theme="light"] .bi-qty label { color:var(--text-muted); }

/* Tabla — encabezados gris con texto blanco */
html[data-theme="light"] .tfm-table thead th { background:#475569; color:#fff; border-bottom-color:#334155; }
html[data-theme="light"] .tfm-table tbody td { color:var(--text-primary); border-bottom-color:var(--border-subtle); }
html[data-theme="light"] .tfm-table tbody tr:hover { background:var(--surface-hover); }

/* KPI / tiras / paneles con fondo translucido */
html[data-theme="light"] .kpi-strip, html[data-theme="light"] .filter-panel,
html[data-theme="light"] .resumen-conc, html[data-theme="light"] .kpi-card { background:#fff; border-color:rgba(15,23,42,.08); }
html[data-theme="light"] .ks-sep, html[data-theme="light"] .rc-sep, html[data-theme="light"] .er-sep { background:rgba(15,23,42,.1); }

/* Code cell / chips de codigo */
html[data-theme="light"] .code-cell { background:rgba(79,142,247,.1); color:#3b6fd4; }

/* Barra de progreso de cuotas: texto azul oscuro y pista visible */
html[data-theme="light"] .cuotas-bar { background:rgba(30,58,138,.10); }
html[data-theme="light"] .cb-text { color:#1e3a8a; }

/* Linea divisoria */
html[data-theme="light"] .glow-line { background:linear-gradient(90deg,transparent,rgba(79,142,247,.3),transparent); }

/* Modales — base GLOBAL (overlay centrado fijo). Antes cada página la definía en su <style>
   local; las que no lo hacían (p. ej. Cuentas por Pagar) mostraban el "modal" como un bloque
   al final de la página. Las páginas con estilo propio siguen sobrescribiendo esta base. */
.modal-overlay{position:fixed;inset:0;background:rgba(3,7,18,.7);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}
/* El MISMO fondo con otro nombre: hay pantallas que lo llaman .modal-back. Estaba definido en una
   sola de las cuatro que lo usan, y como el <style> de una pagina solo existe mientras esa pagina
   esta en pantalla, en las demas (Historial de cuadres, Prestamos) el modal no flotaba: salia como
   un bloque suelto al final del documento. Es el mismo caso que arriba, con el otro nombre. */
.modal-back{position:fixed;inset:0;background:rgba(3,7,18,.7);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}

/* ── Chips de estado ──────────────────────────────────────────────────────────
   Base COMPARTIDA. La usan 30 pantallas y hasta ahora cada una la escribia en su
   propio <style>: las cuatro que no lo hacian (Sucursales, Pendientes por subir,
   Token de autorizacion, Notas de credito) pintaban el color pegado al texto, sin
   relleno ni esquinas -- se veia como un subrayado de marcador.

   Los colores van por CLASE y no en un style= a mano, porque el modo claro tiene
   que poder cambiarlos: un color escrito en el atributo gana siempre y deja el
   chip oscuro sobre fondo blanco. Las variantes claras estan mas abajo, con el
   resto del tema. */
.status-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;
    font-size:.72rem;font-weight:700;white-space:nowrap;border:1px solid transparent}
.chip-green {background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.3);  color:var(--lx-34d399,#34d399)}
.chip-red   {background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3); color:var(--lx-f87171,#f87171)}
.chip-yellow{background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.3);  color:var(--lx-fbbf24,#fbbf24)}

/* Chip de estado de una nota de credito (componente ChipEstadoNota). Vive AQUI y no en el <style>
   de una pagina: las clases s-ok/s-warn/s-bad que se usaban antes solo existen dentro del bloque
   de cada pantalla, y por eso en Notas de credito los chips salian en gris —usaba unas clases que
   estaban definidas en OTRA pagina—. Clases propias para no alterar el s-* que usan otras. */
.nc-chip{border-radius:99px;padding:.12rem .55rem;font-size:.72rem;font-weight:600;white-space:nowrap}
.nc-chip-ok  {background:rgba(52,211,153,.1); color:var(--lx-34d399,#34d399)}
.nc-chip-warn{background:rgba(251,191,36,.08);color:var(--lx-fbbf24,#fbbf24)}
.nc-chip-bad {background:rgba(248,113,113,.1);color:var(--lx-f87171,#f87171)}
.chip-blue  {background:rgba(79,142,247,.12); border-color:rgba(79,142,247,.3);  color:var(--lx-93c5fd,#93c5fd)}
.chip-purple{background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.3);  color:var(--lx-c4b5fd,#c4b5fd)}
.chip-gray  {background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.28);color:var(--lx-94a3b8,#94a3b8)}
.chip-teal  {background:rgba(45,212,191,.12); border-color:rgba(45,212,191,.3);  color:var(--lx-2dd4bf,#2dd4bf)}

/* ── Desplegable de sugerencias (buscar y elegir de una lista) ────────────────
   Lo usan el buscador de suplidor de Salida de almacen y el de empleado de
   Prestamos. Vive aqui y no en una pantalla porque en cuanto lo quiso la
   segunda habia que copiarlo, y una copia es una que se queda sin arreglar.
   Con variables de tema: con el fondo escrito a mano salia una caja oscura
   sobre una pantalla blanca en modo claro. */
.sug-box{position:absolute;top:100%;left:0;right:0;z-index:1500;margin-top:.2rem;background:var(--bg-base);
    border:1px solid var(--border-default);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);
    max-height:280px;overflow:auto;min-width:280px}
.sug-item{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;text-align:left;
    background:none;border:none;border-bottom:1px solid var(--border-subtle);padding:.45rem .6rem;cursor:pointer}
.sug-item:hover{background:var(--surface-hover)}
.sug-name{font-size:.82rem;color:var(--text-primary);font-weight:600}
.sug-meta{font-size:.72rem;color:var(--text-muted)}
html[data-theme="light"] .sug-box{box-shadow:0 12px 32px rgba(15,23,42,.18)}
.modal-card{--tfm-modal-bg:#0b1424;background:var(--tfm-modal-bg);border:1px solid rgba(79,142,247,.2);border-radius:14px;width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.modal-card.sm{max-width:380px}.modal-card.lg{max-width:760px}.modal-card.xl{max-width:980px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08)}
/* La tarjeta es redondeada pero NO recorta a sus hijos, y en tema claro la cabecera lleva fondo
   azul solido: sus esquinas rectas pintaban por encima de la curva del modal y se veian dos
   picos arriba. Se reporto en el cobro del POS, pero pasaba en TODOS los modales del tema claro.
   `inherit` toma el radio de SU tarjeta, asi que sirve igual para las que usan 14px y para las
   dos que usan 16px, y aplana abajo porque ahi la cabecera sigue pegada al cuerpo.
   Se arregla aqui y no con overflow:hidden en .modal-card: eso recortaria las listas
   desplegables que se abren dentro de un modal. */
.modal-header{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.modal-title{font-size:1rem;font-weight:700;color:#e2e8f0;display:flex;align-items:center;gap:.5rem}
.modal-body{padding:1rem 1.1rem;overflow:auto}
.modal-footer{padding:.8rem 1.1rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:flex-end;gap:.5rem}
.modal-header .icon-btn{background:none;border:none;color:#7f9bbf;cursor:pointer;font-size:1rem}

/* Un modal que enseña una TABLA necesita ancho de verdad.
   Con el ancho de un formulario (480–820 px) las últimas columnas se salen del borde, y «Acciones»
   es SIEMPRE la última: los botones quedan detrás de un desplazamiento horizontal que nadie busca,
   así que el usuario ni se entera de que existen. Se reportó con «Lista de salidas», cuya columna
   de acciones lleva hasta cuatro botones.

   Se hace con :has() y no página por página porque hay más de treinta modales con tabla repartidos
   por toda la aplicación. Y la especificidad importa: (0,2,1) le gana a los `.modal-card.lg` (0,2,0)
   que varias páginas redefinen en su propio <style>, así que no depende del orden de carga.
   Un navegador sin :has() lo ignora y se queda como estaba: no rompe nada. */
.modal-card:has(table.tfm-table){ width:min(96vw,1250px); max-width:min(96vw,1250px) }

/* Y cuando ni con eso cabe (pantalla pequeña, tabla de doce columnas), que el desplazamiento sea
   cómodo: scrollea el contenedor —no el modal— y la cabecera se queda fija al bajar.
   Esa cabecera fija necesita fondo propio, o las filas se ven por debajo al desplazar. Se toma de
   --tfm-modal-bg, que cada modal define con SU color: hay páginas cuyo panel va en otro tono y un
   color fijo dejaría una costura a la vista. */
.modal-body .table-wrap{overflow:auto}
.modal-body .table-wrap thead th{position:sticky;top:0;z-index:1;background:var(--tfm-modal-bg,#0b1424)}

/* Modales — cabecera azul oscuro con texto blanco */
html[data-theme="light"] .modal-card { --tfm-modal-bg:#fff; background:var(--tfm-modal-bg); border-color:rgba(15,23,42,.12); box-shadow:0 24px 80px rgba(15,23,42,.25); }
html[data-theme="light"] .modal-header { background:#1e3a8a; border-bottom-color:#16306b; }
html[data-theme="light"] .modal-header .modal-title { color:#fff; }
html[data-theme="light"] .modal-header .icon-btn { color:rgba(255,255,255,.8); }
html[data-theme="light"] .modal-header .icon-btn:hover { color:#fff; background:rgba(255,255,255,.15); }
html[data-theme="light"] .modal-footer { border-color:rgba(15,23,42,.08); }
html[data-theme="light"] .edit-resumen, html[data-theme="light"] .mov-resumen,
html[data-theme="light"] .abono-saldo, html[data-theme="light"] .mov-table-wrap { background:#f8fafc; border-color:rgba(15,23,42,.08); }
html[data-theme="light"] .quick-btn { background:#f1f5f9; border-color:rgba(79,142,247,.2); color:#475569; }

/* Sidebar (menú de opciones) */
html[data-theme="light"] .sidebar { background:#fff; border-right-color:rgba(15,23,42,.08); box-shadow:4px 0 30px rgba(15,23,42,.08); }
/* Cabecera del menú: azul oscuro como la barra principal, texto blanco, IA azul claro */
html[data-theme="light"] .sidebar-header { background:#1e3a8a; border-bottom-color:#16306b; }
html[data-theme="light"] .brand-name { color:#fff; }
html[data-theme="light"] .brand-ia { background:none; -webkit-text-fill-color:#7cc0ff; color:#7cc0ff; }
/* Opciones del menú en azul oscuro */
html[data-theme="light"] .nav-item { color:#1e3a8a; }
html[data-theme="light"] .nav-item:hover { background:rgba(30,58,138,.08); color:#16306b; }
html[data-theme="light"] .nav-group-toggle { color:#1e3a8a; }
html[data-theme="light"] .nav-group-toggle:hover,
html[data-theme="light"] .nav-group.expanded .nav-group-toggle { background:rgba(30,58,138,.08); color:#16306b; }
html[data-theme="light"] .nav-chev { color:rgba(30,58,138,.5); }
html[data-theme="light"] .sidebar-footer { border-color:rgba(15,23,42,.07); }
html[data-theme="light"] .footer-copy { color:rgba(71,85,105,.6); }

/* Topbar — cabecera de la ventana principal: azul oscuro, texto blanco */
html[data-theme="light"] .topbar { background:#1e3a8a; border-bottom-color:#16306b; box-shadow:0 2px 16px rgba(15,23,42,.18); }
html[data-theme="light"] .topbar-brand { color:#fff; }
html[data-theme="light"] .topbar-icon-btn { color:#fff; }
html[data-theme="light"] .topbar-icon-btn:hover { background:rgba(255,255,255,.15); color:#fff; }
html[data-theme="light"] .user-name { color:#fff; }
/* La versión de la caja (junto a «TFM Caja») se quedaba en el gris del tema oscuro y en modo claro
   se veía apagada al lado de la marca en blanco. No se resuelve con las variables de tema: esta
   barra es azul oscura EN LOS DOS temas, así que lo que toca es aclararla, como sus vecinos. */
html[data-theme="light"] .topbar-ver { color:#fff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); }
html[data-theme="light"] .btn-hamburger span { background:#fff; }
html[data-theme="light"] .btn-hamburger:hover { background:rgba(255,255,255,.12); }

/* Quick actions / botones ghost */
html[data-theme="light"] .quick-btn-primary { color:#3b6fd4; }
html[data-theme="light"] .btn-ghost { color:#475569; }

/* Compatibilidad con componentes que aun conservan superficies del tema oscuro. */
html[data-theme="light"] .tema-card,
html[data-theme="light"] .cart-line,
html[data-theme="light"] .buscar-item,
html[data-theme="light"] .ord-item,
html[data-theme="light"] .fa-item,
html[data-theme="light"] .fa-resumen,
html[data-theme="light"] .fa-vinc-op,
html[data-theme="light"] .dias-box {
    background:var(--surface-subtle);
    border-color:var(--border-subtle);
}
html[data-theme="light"] .tema-card:hover,
html[data-theme="light"] .buscar-item:hover,
html[data-theme="light"] .ord-item:hover,
html[data-theme="light"] .fa-item:hover,
html[data-theme="light"] .fa-vinc-op:hover { background:var(--surface-hover); border-color:var(--border-strong); }

html[data-theme="light"] .cl-desc, html[data-theme="light"] .cl-val,
html[data-theme="light"] .tt-total, html[data-theme="light"] .cli-chip-name,
html[data-theme="light"] .bi-desc, html[data-theme="light"] .oi-num,
html[data-theme="light"] .fa-it-desc, html[data-theme="light"] .fa-vinc-op,
html[data-theme="light"] .gen-resumen strong { color:var(--text-primary); }
html[data-theme="light"] .cod-input, html[data-theme="light"] .cl-num,
html[data-theme="light"] .tt-num, html[data-theme="light"] .oc-qty,
html[data-theme="light"] .fa-vinc-input {
    background:#fff;
    border-color:var(--border-default);
    color:var(--text-primary);
}

/* POS — el cuadro donde se lee el codigo del articulo. Su relleno es un verde translucido al 7 %:
   sobre el fondo oscuro se lee como un resaltado limpio, pero sobre blanco queda como un manchon
   difuminado y sucio. En claro va un verde palido SOLIDO, que resalta igual sin ensuciar. El borde
   se deja como esta: ese si funciona en los dos temas. */
html[data-theme="light"] .cod-box { background:#ecfdf5; }
/* Y el campo, transparente: la regla general de arriba lo pinta de blanco (bien cuando el campo va
   suelto), pero DENTRO de este cuadro dejaba un rectangulo blanco recortado sobre el verde. Aqui la
   superficie la pone el cuadro. */
html[data-theme="light"] .cod-box .cod-input { background:transparent; }

/* Textos y estados semanticos: tonos oscuros en claro, luminosos en oscuro. */
html[data-theme="light"] .text-green, html[data-theme="light"] .s-ok, html[data-theme="light"] .nc-chip-ok,
html[data-theme="light"] .st-exist, html[data-theme="light"] .rec-ok,
html[data-theme="light"] .cl-tot, html[data-theme="light"] .bi-act,
html[data-theme="light"] .chip-green, html[data-theme="light"] .asiento-chip,
html[data-theme="light"] .fa-ok, html[data-theme="light"] .fa-confirm,
html[data-theme="light"] .chip-ok, html[data-theme="light"] .chip-ct,
html[data-theme="light"] .st-ok, html[data-theme="light"] .st-oferta { color:var(--text-success); }
html[data-theme="light"] .text-red, html[data-theme="light"] .req,
html[data-theme="light"] .st-0, html[data-theme="light"] .pos-err,
html[data-theme="light"] .chip-red, html[data-theme="light"] .cl-del,
html[data-theme="light"] .cli-chip-x, html[data-theme="light"] .buscar-sup-x,
html[data-theme="light"] .fa-sup-x, html[data-theme="light"] .chip-danger,
html[data-theme="light"] .s-bad, html[data-theme="light"] .nc-chip-bad, html[data-theme="light"] .st-dif { color:var(--text-danger); }
html[data-theme="light"] .text-yellow, html[data-theme="light"] .chip-yellow,
html[data-theme="light"] .incart-ico, html[data-theme="light"] .fa-warn,
html[data-theme="light"] .chip-warn, html[data-theme="light"] .s-warn, html[data-theme="light"] .nc-chip-warn,
html[data-theme="light"] .s-pend, html[data-theme="light"] .st-incart,
html[data-theme="light"] .st-prob { color:var(--text-warning); }
html[data-theme="light"] .text-blue, html[data-theme="light"] .chip-blue,
html[data-theme="light"] .st-sold, html[data-theme="light"] .rec-tag,
html[data-theme="light"] .docs-h, html[data-theme="light"] .oi-tot,
html[data-theme="light"] .oi-btn, html[data-theme="light"] .mini-btn,
html[data-theme="light"] .fa-new, html[data-theme="light"] .fa-nuevo-btn,
html[data-theme="light"] .s-blue, html[data-theme="light"] .s-info,
html[data-theme="light"] .chip-ex, html[data-theme="light"] .chip-active { color:var(--text-info); }
html[data-theme="light"] .chip-purple, html[data-theme="light"] .st-promo,
html[data-theme="light"] .st-sup { color:var(--text-purple); }
html[data-theme="light"] .text-muted, html[data-theme="light"] .s-off,
html[data-theme="light"] .st-pend, html[data-theme="light"] .chip-gray,
html[data-theme="light"] .chip-rnc { color:var(--text-muted); }

html[data-theme="light"] .chip-green, html[data-theme="light"] .st-exist,
html[data-theme="light"] .asiento-chip, html[data-theme="light"] .chip-ok,
html[data-theme="light"] .chip-ct, html[data-theme="light"] .st-ok,
html[data-theme="light"] .st-oferta, html[data-theme="light"] .s-ok, html[data-theme="light"] .nc-chip-ok { background:#ecfdf5; border-color:#a7f3d0; }
html[data-theme="light"] .chip-red, html[data-theme="light"] .st-0,
html[data-theme="light"] .pos-err, html[data-theme="light"] .chip-danger,
html[data-theme="light"] .s-bad, html[data-theme="light"] .nc-chip-bad, html[data-theme="light"] .st-dif { background:#fef2f2; border-color:#fecaca; }
html[data-theme="light"] .chip-yellow, html[data-theme="light"] .chip-warn,
html[data-theme="light"] .s-warn, html[data-theme="light"] .nc-chip-warn, html[data-theme="light"] .s-pend,
html[data-theme="light"] .st-incart, html[data-theme="light"] .st-prob { background:#fffbeb; border-color:#fde68a; }
html[data-theme="light"] .chip-blue, html[data-theme="light"] .st-sold,
html[data-theme="light"] .rec-tag, html[data-theme="light"] .s-blue,
html[data-theme="light"] .s-info, html[data-theme="light"] .chip-ex,
html[data-theme="light"] .chip-active { background:#eff6ff; border-color:#bfdbfe; }
html[data-theme="light"] .chip-purple, html[data-theme="light"] .st-promo,
html[data-theme="light"] .st-sup { background:#f5f3ff; border-color:#ddd6fe; }
html[data-theme="light"] .s-off, html[data-theme="light"] .st-pend,
html[data-theme="light"] .chip-gray, html[data-theme="light"] .chip-rnc { background:#f1f5f9; border-color:#cbd5e1; }
/* Teal — lo usa el chip «Suministro». Faltaba en la paleta clara. */
html[data-theme="light"] .chip-teal { background:#f0fdfa; border-color:#99f6e4; color:var(--lx-2dd4bf,#0f766e); }

/* Centro de notificaciones coherente con el tema claro. */
html[data-theme="light"] .noti-panel { background:#fff; border-color:var(--border-subtle); box-shadow:0 20px 60px rgba(15,23,42,.22); }
html[data-theme="light"] .noti-head,
html[data-theme="light"] .noti-sub,
html[data-theme="light"] .noti-tools,
html[data-theme="light"] .noti-item { border-color:var(--border-subtle); }
html[data-theme="light"] .noti-head,
html[data-theme="light"] .noti-t { color:var(--text-primary); }
html[data-theme="light"] .noti-b,
html[data-theme="light"] .noti-f,
html[data-theme="light"] .noti-empty,
html[data-theme="light"] .noti-x,
html[data-theme="light"] .noti-del { color:var(--text-muted); }
html[data-theme="light"] .noti-item.unread { background:#eff6ff; border-left-color:#2563eb; }
html[data-theme="light"] .noti-act { background:#eff6ff; border-color:#bfdbfe; color:var(--text-info); }
html[data-theme="light"] .noti-act.on { background:#ecfdf5; border-color:#a7f3d0; color:var(--text-success); }
html[data-theme="light"] .noti-tool { background:#f8fafc; border-color:var(--border-default); color:var(--text-muted); }
html[data-theme="light"] .noti-tool:hover:not(:disabled) { background:var(--surface-hover); }
html[data-theme="light"] .noti-tool.danger { border-color:#fecaca; color:var(--text-danger); }
html[data-theme="light"] .noti-tool.danger:hover:not(:disabled),
html[data-theme="light"] .noti-del:hover { background:#fef2f2; color:var(--text-danger); }

/* Tooltip */
html[data-theme="light"] [data-tooltip]::after { background:#1e293b; color:#fff; border-color:rgba(15,23,42,.2); }

/* ═══ Ventana de cobro (POS y Facturacion) ═══════════════════════════════════════════════════════
   UNA sola copia para las dos pantallas: es el mismo gesto y el mismo modulo de pago, y tenerlo
   duplicado en cada .razor ya costo hacer dos veces cada cambio (la marca de tarjeta, por ejemplo).
   Todo cuelga de .cobro para que ningun nombre corto se escape al resto de la aplicacion.

   Manda el efectivo, que es lo que se cobra casi siempre; los demas medios se piden por ficha y
   cada uno abre su bloque con su monto y su detalle DENTRO (la marca junto al monto de la tarjeta,
   la cuenta de banco junto al monto de la transferencia). */
.cobro { display:flex; flex-direction:column; gap:.85rem; }
/* Doble clase a proposito: cada pagina define su propio .modal-card en su bloque <style>, y ese
   bloque se inyecta DESPUES de app.css. Con un solo .cobro-card el ancho de la pagina ganaba. */
.modal-card.cobro-card { max-width:560px; max-height:calc(100vh - 3rem); max-height:calc(100dvh - 3rem); }
.cobro-card .modal-header, .cobro-card .modal-footer { flex-shrink:0; }
.cobro-card .modal-body { flex:1 1 auto; min-height:0; overflow:auto; }
/* Campo obligatorio sin llenar (la cuenta de banco de la transferencia) y titular de la cuenta:
   los usan las dos pantallas, asi que viven aqui y no en una sola. */
.campo-falta { border-color:rgba(251,191,36,.6)!important; background:rgba(251,191,36,.08)!important; }
.pago-titular { display:flex; align-items:center; gap:.4rem; margin-top:.1rem; font-size:.8rem;
    color:var(--lx-93c5fd,#93c5fd); background:rgba(79,142,247,.08); border:1px solid rgba(79,142,247,.18);
    border-radius:8px; padding:.4rem .6rem; }
.pago-titular b { color:var(--lx-e2e8f0,#e2e8f0); }

.cobro .cobro-aviso { display:flex; gap:.5rem; align-items:center; background:rgba(52,211,153,.1);
    border:1px solid rgba(52,211,153,.35); color:var(--lx-6ee7b7,#6ee7b7); border-radius:9px;
    padding:.55rem .75rem; font-size:.84rem; }

/* Efectivo: grande, primero y con el foco al abrir. */
.cobro .cobro-cash label { font-size:.78rem; font-weight:600; color:var(--lx-93c5fd,#93c5fd);
    display:flex; align-items:center; gap:.35rem; margin-bottom:.3rem; }
.cobro .cash-row { display:flex; align-items:center; gap:.5rem; background:rgba(52,211,153,.07);
    border:2px solid rgba(52,211,153,.35); border-radius:12px; padding:.45rem .8rem; transition:.15s; }
.cobro .cash-row:focus-within { border-color:rgba(52,211,153,.75); box-shadow:0 0 0 4px rgba(52,211,153,.12); }
.cobro .cash-row.off { opacity:.55; }
.cobro .cash-cur { font-size:1.25rem; font-weight:700; color:var(--lx-34d399,#34d399); }
.cobro .cash-input { flex:1; min-width:0; background:none; border:none; outline:none;
    color:var(--lx-e2e8f0,#e2e8f0); font-family:inherit; font-size:1.8rem; font-weight:800;
    letter-spacing:.5px; padding:.1rem 0; }
.cobro .cash-input::placeholder { color:rgba(148,163,184,.3); font-weight:600; }
.cobro .cash-exacto { background:rgba(52,211,153,.16); border:1px solid rgba(52,211,153,.32);
    color:var(--lx-34d399,#34d399); border-radius:7px; padding:.32rem .7rem; font-size:.76rem;
    font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.cobro .cash-exacto:hover { background:rgba(52,211,153,.28); }

/* Fichas de los demas medios: se piden a proposito, y cada una abre su bloque. */
.cobro .cobro-mas { display:flex; flex-direction:column; gap:.4rem; }
.cobro .cm-lbl { font-size:.68rem; text-transform:uppercase; letter-spacing:.7px;
    color:var(--lx-4f7db8,#4f7db8); font-weight:700; }
.cobro .cm-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.cobro .cm-chip { display:inline-flex; align-items:center; gap:.3rem; background:rgba(255,255,255,.03);
    border:1px dashed rgba(255,255,255,.18); color:var(--lx-cdd6e6,#cdd6e6); border-radius:99px;
    padding:.35rem .8rem; font-size:.8rem; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s; }
.cobro .cm-chip:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.32); }
.cobro .cm-chip.on { border-style:solid; }
.cobro .cm-chip.ct.on { background:rgba(168,85,247,.18); border-color:rgba(168,85,247,.55); color:var(--lx-c084fc,#c084fc); }
.cobro .cm-chip.cb.on { background:rgba(79,142,247,.18); border-color:rgba(79,142,247,.55); color:var(--lx-93c5fd,#93c5fd); }
.cobro .cm-chip.cn.on { background:rgba(251,191,36,.15); border-color:rgba(251,191,36,.5); color:var(--lx-fcd34d,#fcd34d); }
.cobro .cm-badge { background:rgba(52,211,153,.2); color:var(--lx-34d399,#34d399); border-radius:6px;
    padding:.05rem .35rem; font-size:.7rem; font-weight:700; }

/* Cada medio, su bloque, con el color del medio en el borde Y en el fondo: se reconoce cual es
   cual sin leer la etiqueta, igual que el efectivo se reconoce por su verde. */
.cobro .cobro-blk { border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.65rem .8rem;
    display:flex; flex-direction:column; gap:.45rem; animation:cobroBlkIn .16s ease-out; }
@keyframes cobroBlkIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.cobro .cobro-blk.blk-t { background:rgba(168,85,247,.1); border-color:rgba(168,85,247,.38); }
.cobro .cobro-blk.blk-b { background:rgba(79,142,247,.1);  border-color:rgba(79,142,247,.38); }
.cobro .cobro-blk.blk-n { background:rgba(251,191,36,.09); border-color:rgba(251,191,36,.35); }
.cobro .blk-head { display:flex; align-items:center; justify-content:space-between; font-size:.78rem; font-weight:700; }
.cobro .blk-head > span { display:inline-flex; align-items:center; gap:.35rem; }
.cobro .blk-t .blk-head { color:var(--lx-c084fc,#c084fc); }
.cobro .blk-b .blk-head { color:var(--lx-93c5fd,#93c5fd); }
.cobro .blk-n .blk-head { color:var(--lx-fcd34d,#fcd34d); }
.cobro .blk-x { background:none; border:none; color:var(--lx-7f8aa0,#7f8aa0); cursor:pointer;
    padding:0 .15rem; font-size:.78rem; line-height:1; }
.cobro .blk-x:hover { color:var(--lx-f87171,#f87171); }
.cobro .blk-row { display:flex; align-items:center; gap:.45rem; background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:.3rem .6rem; }
.cobro .blk-row:focus-within { border-color:rgba(79,142,247,.55); }
.cobro .blk-cur { color:var(--lx-94a3b8,#94a3b8); font-weight:700; }
.cobro .blk-input { flex:1; min-width:0; background:none; border:none; outline:none;
    color:var(--lx-e2e8f0,#e2e8f0); font-family:inherit; font-size:1.15rem; font-weight:700; }
.cobro .blk-input::placeholder { color:rgba(148,163,184,.28); }
.cobro .blk-lbl { font-size:.74rem; color:var(--lx-93c5fd,#93c5fd); font-weight:600;
    display:flex; align-items:center; gap:.3rem; margin-top:.1rem; }
.cobro .blk-warn { font-size:.74rem; color:var(--lx-fcd34d,#fcd34d); display:flex; align-items:center; gap:.35rem; }

/* Venta a credito: no es una forma de pago, asi que ocupa la cabecera y no una ficha. */
.cobro .cobro-cred { border-radius:11px; padding:.7rem .85rem; background:rgba(79,142,247,.1); border:1px solid rgba(79,142,247,.3); }
.cobro .cobro-cred.warn { background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.4); }
.cobro .cc-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.cobro .cc-lbl { font-size:.8rem; font-weight:700; color:var(--lx-bcd4f6,#bcd4f6); display:inline-flex; align-items:center; gap:.35rem; }
.cobro .cobro-cred.warn .cc-lbl { color:var(--lx-fcd34d,#fcd34d); }
.cobro .cc-monto { font-size:1.7rem; font-weight:800; color:var(--lx-e2e8f0,#e2e8f0); line-height:1.25; }
.cobro .cc-meta { font-size:.74rem; color:var(--lx-94a3b8,#94a3b8); }

/* Resumen: el cambio (o lo que falta) es el numero que el cajero busca, y va grande. */
.cobro .cobro-res { border-top:1px solid rgba(255,255,255,.08); padding-top:.6rem; display:flex; flex-direction:column; }
.cobro .cobro-r { display:flex; justify-content:space-between; gap:.6rem; font-size:.85rem;
    color:var(--lx-94a3b8,#94a3b8); padding:.12rem 0; }
.cobro .cobro-r-tot { font-weight:700; color:var(--lx-e2e8f0,#e2e8f0); }
.cobro .cobro-r-big { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
    margin-top:.4rem; padding-top:.5rem; border-top:1px dashed rgba(255,255,255,.1);
    font-size:1.4rem; font-weight:800; }
.cobro .cobro-r-big > span:first-child { font-size:.8rem; font-weight:700; letter-spacing:.6px;
    text-transform:uppercase; display:inline-flex; align-items:center; gap:.35rem; }
.cobro .cobro-r-big.ok  { color:var(--lx-34d399,#34d399); }
.cobro .cobro-r-big.bad { color:var(--lx-f87171,#f87171); }

/* La tarjeta de cobro junto al carrito: boton PAGAR grande y, debajo, las maneras de cerrar la
   venta SIN cobrarla ahora (apartar, dejar en espera, cargar a la cuenta del cliente). */
.btn-pagar { display:flex; align-items:center; justify-content:center; gap:.7rem; width:100%;
    background:linear-gradient(135deg,#16a34a,#22c55e); border:none; color:#fff; border-radius:14px;
    padding:1rem; cursor:pointer; font-family:inherit; box-shadow:0 6px 18px rgba(34,197,94,.28); transition:filter .15s; }
.btn-pagar:hover:not(:disabled) { filter:brightness(1.08); }
.btn-pagar:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
/* Cuando el botón verde muestra el CAMBIO de la última venta (carrito vacío = está deshabilitado):
   se mantiene vívido y con un latido suave para que el cajero lo vea sin buscar el recibo. */
.btn-pagar-cambio:disabled { opacity:1; cursor:default; box-shadow:0 6px 18px rgba(34,197,94,.28);
    animation:pagarCambioPulse 1.6s ease-in-out infinite; }
@keyframes pagarCambioPulse { 0%,100% { box-shadow:0 6px 18px rgba(34,197,94,.28); }
    50% { box-shadow:0 6px 30px rgba(34,197,94,.65); } }
.btn-pagar i { font-size:1.7rem; }
.pagar-txt { display:flex; flex-direction:column; line-height:1.05; align-items:flex-start; }
.pagar-lbl { font-size:.95rem; font-weight:700; letter-spacing:1.5px; }
.pagar-tot { font-size:1.55rem; font-weight:800; }
.acciones-sec { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; align-items:stretch; }
.acciones-sec .btn-tfm { flex:1 1 auto; min-width:0; justify-content:center; font-size:.78rem;
    padding:.45rem .35rem; white-space:nowrap; }
.btn-apartar { background:rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.4); color:var(--lx-c084fc,#c084fc); }
.btn-apartar:hover:not(:disabled) { background:rgba(168,85,247,.24); }
.btn-credito { background:rgba(79,142,247,.14); border:1px solid rgba(79,142,247,.4); color:var(--lx-93c5fd,#93c5fd); }
.btn-credito:hover:not(:disabled) { background:rgba(79,142,247,.24); }

/* ── Campo de fecha propio (componente CampoFecha) ─────────────────────────────
   Reemplaza al <input type="date"> del navegador, cuyo comportamiento dependía
   del idioma del navegador y de la configuración regional de cada Windows.      */
.cf-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.cf-txt  { width: 100%; padding-right: 2rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cf-txt::selection { background: var(--accent-blue); color: #fff; }

.cf-btn {
    position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; padding: .2rem .3rem; cursor: pointer; line-height: 1;
    color: var(--text-muted); border-radius: 4px;
}
.cf-btn:hover { color: var(--accent-blue); background: var(--surface-hover); }

/* Capa transparente que cierra el calendario al pulsar en cualquier otro sitio. */
.cf-fuera { position: fixed; inset: 0; z-index: 1200; }

/* El calendario salia DETRAS de la tabla, y no era cosa de subirle el z-index: un panel .glass
   lleva backdrop-filter, y eso crea un CONTEXTO DE APILAMIENTO. Dentro de el, el z-index del
   calendario solo compite con sus hermanos del propio panel; frente al panel de la tabla, que va
   despues en el documento, siempre perdia por mucho que se subiera.
   La unica forma de ganar es subir el PANEL entero: el de los filtros por delante del de la tabla.
   Va aqui, en el CSS global, y no en cada pantalla, porque el problema es de cualquiera que ponga
   un campo de fecha encima de una tabla. */
.filtros { position: relative; z-index: 20; }
.glass:has(.cf-wrap) { position: relative; z-index: 20; }

.cf-pop {
    position: absolute; z-index: 1201; top: calc(100% + 4px); left: 0;
    background: var(--bg-base); border: 1px solid var(--border-default);
    border-radius: 10px; padding: .55rem; width: 250px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.cf-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.cf-mes { font-weight: 600; color: var(--text-primary); text-transform: capitalize; font-size: .92rem; }
.cf-nav {
    background: none; border: 0; color: var(--text-muted); cursor: pointer;
    padding: .15rem .4rem; border-radius: 5px; line-height: 1;
}
.cf-nav:hover { color: var(--accent-blue); background: var(--surface-hover); }

.cf-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cf-dia-cab {
    text-align: center; font-size: .68rem; color: var(--text-dim);
    text-transform: uppercase; padding: .2rem 0;
}
.cf-hueco { height: 28px; }
.cf-dia {
    height: 28px; border: 0; border-radius: 6px; cursor: pointer;
    background: none; color: var(--text-secondary); font-size: .82rem;
}
.cf-dia:hover { background: var(--surface-hover); color: var(--text-primary); }
/* Hoy va marcado con un aro; el día elegido, relleno. Así se distinguen aunque coincidan. */
.cf-hoy { box-shadow: inset 0 0 0 1px var(--accent-blue); color: var(--text-info); }
.cf-sel { background: var(--accent-blue); color: #fff; font-weight: 600; }
.cf-sel:hover { background: var(--accent-blue); color: #fff; }

.cf-pie {
    display: flex; gap: .4rem; margin-top: .5rem;
    padding-top: .45rem; border-top: 1px solid var(--border-subtle);
}
.cf-accion {
    flex: 1; padding: .3rem; border-radius: 6px; cursor: pointer; font-size: .8rem;
    background: var(--surface-subtle); border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.cf-accion:hover { background: var(--surface-hover); color: var(--text-primary); }
.cf-limpiar:hover { color: var(--text-danger); }

html[data-theme="light"] .cf-pop { box-shadow: 0 12px 32px rgba(15,23,42,.18); }