/* =============================================
   Sistema POS v2 - Stylesheet con multi-tema
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* ================================================
   TEMAS — base por data-theme y data-accent
   ================================================ */

/* TEMA CLARO (default) */
:root,
[data-theme="light"] {
    --bg:           #f1f5f9;
    --bg-soft:      #f8fafc;
    --surface:      #ffffff;
    --surface-2:    #f8fafc;
    --surface-3:    #eef2f7;
    --border:       #e2e8f0;
    --border-strong:#cbd5e1;
    --text:         #0f1419;
    --text-soft:    #64748b;
    --text-muted:   #94a3b8;
    --sidebar-bg:   #0f1419;
    --sidebar-text: #cbd5e1;
    --sidebar-muted:#94a3b8;
    --topbar-bg:    #ffffff;
    --topbar-border:#e2e8f0;
    --shadow-sm:    0 1px 2px rgba(15, 20, 25, 0.05);
    --shadow:       0 4px 12px rgba(15, 20, 25, 0.08);
    --shadow-lg:    0 12px 32px rgba(15, 20, 25, 0.12);
}

/* TEMA OSCURO */
[data-theme="dark"] {
    --bg:           #0a0e14;
    --bg-soft:      #11161e;
    --surface:      #1a212b;
    --surface-2:    #11161e;
    --surface-3:    #232b37;
    --border:       #2a3340;
    --border-strong:#3a4554;
    --text:         #e2e8f0;
    --text-soft:    #94a3b8;
    --text-muted:   #64748b;
    --sidebar-bg:   #050810;
    --sidebar-text: #cbd5e1;
    --sidebar-muted:#64748b;
    --topbar-bg:    #1a212b;
    --topbar-border:#2a3340;
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:       0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.7);
}

/* TEMA COLORIDO (claro con tonos cálidos para panadería) */
[data-theme="warm"] {
    --bg:           #fef7ed;
    --bg-soft:      #fffbf3;
    --surface:      #ffffff;
    --surface-2:    #fef7ed;
    --surface-3:    #fdecd0;
    --border:       #f0d9b1;
    --border-strong:#d4a574;
    --text:         #2d1810;
    --text-soft:    #78350f;
    --text-muted:   #a16207;
    --sidebar-bg:   #2d1810;
    --sidebar-text: #fde68a;
    --sidebar-muted:#d4a574;
    --topbar-bg:    #ffffff;
    --topbar-border:#f0d9b1;
    --shadow-sm:    0 1px 2px rgba(78, 38, 16, 0.06);
    --shadow:       0 4px 12px rgba(78, 38, 16, 0.10);
    --shadow-lg:    0 12px 32px rgba(78, 38, 16, 0.15);
}

/* TEMA SEPIA — PROTECCIÓN VISUAL (tonos crema/papel, reduce fatiga ocular) */
[data-theme="sepia"] {
    --bg:           #f4ecd8;
    --bg-soft:      #faf3e3;
    --surface:      #fbf6ea;
    --surface-2:    #f4ecd8;
    --surface-3:    #ece0c4;
    --border:       #ddcfae;
    --border-strong:#c9b68d;
    --text:         #433422;
    --text-soft:    #6b5840;
    --text-muted:   #99825f;
    --sidebar-bg:   #3a2f1f;
    --sidebar-text: #e8dcc0;
    --sidebar-muted:#b8a47e;
    --topbar-bg:    #fbf6ea;
    --topbar-border:#ddcfae;
    --shadow-sm:    0 1px 2px rgba(67, 52, 34, 0.06);
    --shadow:       0 4px 12px rgba(67, 52, 34, 0.10);
    --shadow-lg:    0 12px 32px rgba(67, 52, 34, 0.16);
}

/* TEMA NOCTURNO — PROTECCIÓN VISUAL (azul oscuro suave, baja luz azul intensa) */
[data-theme="night"] {
    --bg:           #1a2236;
    --bg-soft:      #1f2840;
    --surface:      #26304a;
    --surface-2:    #1f2840;
    --surface-3:    #2f3a58;
    --border:       #3a4769;
    --border-strong:#4d5d85;
    --text:         #dde6f5;
    --text-soft:    #a8b6d4;
    --text-muted:   #7d8cad;
    --sidebar-bg:   #141b2d;
    --sidebar-text: #c5d2ec;
    --sidebar-muted:#7d8cad;
    --topbar-bg:    #26304a;
    --topbar-border:#3a4769;
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:       0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.55);
}

/* TEMA ALTO CONTRASTE (máxima legibilidad, accesibilidad) */
[data-theme="contrast"] {
    --bg:           #ffffff;
    --bg-soft:      #ffffff;
    --surface:      #ffffff;
    --surface-2:    #f0f0f0;
    --surface-3:    #e0e0e0;
    --border:       #000000;
    --border-strong:#000000;
    --text:         #000000;
    --text-soft:    #1a1a1a;
    --text-muted:   #3a3a3a;
    --sidebar-bg:   #000000;
    --sidebar-text: #ffffff;
    --sidebar-muted:#cccccc;
    --topbar-bg:    #ffffff;
    --topbar-border:#000000;
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow:       0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ============== ACENTOS DE COLOR ============== */
[data-accent="blue"] {
    --primary:      #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #dbeafe;
}
[data-accent="green"] {
    --primary:      #10b981;
    --primary-dark: #059669;
    --primary-soft: #d1fae5;
}
[data-accent="purple"] {
    --primary:      #8b5cf6;
    --primary-dark: #7c3aed;
    --primary-soft: #ede9fe;
}
[data-accent="orange"] {
    --primary:      #f97316;
    --primary-dark: #ea580c;
    --primary-soft: #ffedd5;
}
[data-accent="red"] {
    --primary:      #ef4444;
    --primary-dark: #dc2626;
    --primary-soft: #fee2e2;
}
[data-accent="teal"] {
    --primary:      #14b8a6;
    --primary-dark: #0d9488;
    --primary-soft: #ccfbf1;
}

/* Defaults si no hay accent */
:root {
    --primary:      #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #dbeafe;
    --success:      #10b981;
    --success-soft: #d1fae5;
    --warning:      #f59e0b;
    --warning-soft: #fef3c7;
    --danger:       #ef4444;
    --danger-soft:  #fee2e2;
    --info:         #06b6d4;
    --info-soft:    #cffafe;
    --radius:       10px;
    --radius-lg:    16px;
    --sidebar-w:    260px;
    --topbar-h:     64px;
    --font:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
}

/* En tema oscuro ajustar colores soft */
[data-theme="dark"] {
    --success-soft: rgba(16, 185, 129, 0.15);
    --warning-soft: rgba(245, 158, 11, 0.15);
    --danger-soft:  rgba(239, 68, 68, 0.15);
    --primary-soft: rgba(37, 99, 235, 0.15);
    --info-soft:    rgba(6, 182, 212, 0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s, color 0.2s;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ================================================ LAYOUT ================================================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    height: 100dvh; /* respeta la barra del navegador en móvil */
    z-index: 50;
    transition: transform 0.3s, background 0.2s;
}

.sidebar-brand {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(168, 85, 247, 0.03));
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Menú expandido: logo a la IZQUIERDA, botón hamburguesa a la DERECHA */
.sidebar-brand .kobra-logo { order: 1; flex: 1; }
.sidebar-brand .sidebar-collapse-btn { order: 2; }
.sidebar-collapse-btn {
    background: rgba(255,255,255,0.06);
    border: none;
    color: var(--sidebar-text);
    width: 38px; height: 38px;
    min-width: 38px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 17px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.14); }

/* ===== MENÚ ENCOGIDO (solo iconos) — se controla SOLO con el botón ☰, no con el mouse ===== */
.app.sidebar-collapsed .sidebar { width: 64px; }
.app.sidebar-collapsed .main { margin-left: 64px; }

/* Quitar texto: ocultar TODOS los textos (sueltos con font-size:0, y los span con display:none).
   Ocultar el span es clave: el span de los grupos tiene flex:1 y, aunque el texto sea invisible,
   reservaba espacio y descentraba el ícono respecto a Dashboard. */
.app.sidebar-collapsed .sidebar-nav a,
.app.sidebar-collapsed .sidebar-nav .nav-group-toggle {
    font-size: 0;
    justify-content: center;
    padding: 11px 0;
    gap: 0;
    width: 100%;
}
.app.sidebar-collapsed .sidebar-nav a span,
.app.sidebar-collapsed .sidebar-nav .nav-group-toggle span,
.app.sidebar-collapsed .nav-group-chevron { display: none; }
/* El único ícono visible se centra ocupando todo el ancho (igual para Dashboard y grupos) */
.app.sidebar-collapsed .sidebar-nav a i,
.app.sidebar-collapsed .sidebar-nav .nav-group-toggle > i:first-child {
    font-size: 18px;
    margin: 0;
    width: 100%;
    text-align: center;
}
/* Con el menú encogido, el ícono AZUL indica dónde estás. Se usa la clase 'aqui'
   (la pone el servidor según la página) y NO 'open' (que solo dice si el grupo
   está desplegado y la controla el usuario al hacer clic). Antes ambas cosas
   compartían la clase 'open', así que al encoger el menú se pintaban dos íconos
   en azul: el del grupo donde estabas y el de cualquier grupo abierto a mano. */
.app.sidebar-collapsed .nav-group.aqui .nav-group-toggle {
    background: var(--primary);
    color: #fff;
}
/* Ocultar elementos que sí tienen clase propia */
.app.sidebar-collapsed .kobra-logo-text,
.app.sidebar-collapsed .user-info,
.app.sidebar-collapsed .nav-section-label { display: none; }
/* Ocultar los sub-items de los grupos (en modo encogido no se muestran) */
.app.sidebar-collapsed .nav-group-items { display: none; }

/* Encabezado: el LOGO arriba (order 1) y el botón hamburguesa abajo (order 2), centrados */
.app.sidebar-collapsed .sidebar-brand {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    gap: 10px;
}
.app.sidebar-collapsed .kobra-logo { order: 1; gap: 0; justify-content: center; width: 100%; }
.app.sidebar-collapsed .sidebar-collapse-btn { order: 2; margin: 0 auto; }
.app.sidebar-collapsed .kobra-logo-icon {
    margin: 0 auto;
    width: 38px;
    height: 38px;
}
.app.sidebar-collapsed .sidebar-user {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
}
.app.sidebar-collapsed .user-info-btn { justify-content: center; padding: 6px; width: auto; }
.app.sidebar-collapsed .user-logout { padding: 8px; }

.sidebar { transition: width 0.2s, transform 0.3s, background 0.2s; }
.main { transition: margin-left 0.2s; }

/* ============================================================
   LOGO KOBRA POS — paleta neón moderna (esmeralda + violeta + cyan)
   ============================================================ */
.kobra-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: kobraSlideIn 0.6s ease-out;
}
@keyframes kobraSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.kobra-logo-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(168, 85, 247, 0.10));
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 10px;
    padding: 4px;
    box-shadow:
        0 2px 12px rgba(16, 185, 129, 0.25),
        0 0 0 1px rgba(168, 85, 247, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.kobra-logo:hover .kobra-logo-icon {
    transform: scale(1.06) rotate(-3deg);
    box-shadow:
        0 6px 20px rgba(16, 185, 129, 0.45),
        0 0 0 1px rgba(168, 85, 247, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.kobra-logo-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.kobra-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
}

.kobra-logo-name {
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 4px;
}
.kobra-name-1 {
    color: #fff;
    margin-right: 4px;
}
.kobra-name-2 {
    background: linear-gradient(135deg, #34d399 0%, #10b981 35%, #06b6d4 70%, #a855f7 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    animation: kobraGradientShift 6s ease-in-out infinite;
}
@keyframes kobraGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.kobra-logo-tag {
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #10b981;
    text-transform: uppercase;
    opacity: 0.95;
    border-top: 0.5px solid rgba(16, 185, 129, 0.35);
    padding-top: 3px;
    white-space: nowrap;
}

/* Versión grande (login) */
.kobra-logo.kobra-logo-large {
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.kobra-logo.kobra-logo-large .kobra-logo-icon {
    width: 88px;
    height: 88px;
    border-radius: 18px;
    padding: 8px;
    box-shadow:
        0 8px 36px rgba(16, 185, 129, 0.3),
        0 0 0 1px rgba(168, 85, 247, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.kobra-logo.kobra-logo-large .kobra-logo-text {
    align-items: center;
}
.kobra-logo.kobra-logo-large .kobra-logo-name {
    font-size: 38px;
    margin-bottom: 8px;
}
.kobra-logo.kobra-logo-large .kobra-name-1 {
    color: var(--text);
    margin-right: 8px;
}
.kobra-logo.kobra-logo-large .kobra-logo-tag {
    font-size: 10px;
    letter-spacing: 0.36em;
    border-top: 1px solid rgba(16, 185, 129, 0.45);
    padding-top: 6px;
    padding-left: 30px;
    padding-right: 30px;
}

/* Tema oscuro/cálido: el "Kobra" en login adapta su color */
[data-theme="dark"] .kobra-logo.kobra-logo-large .kobra-name-1,
[data-theme="night"] .kobra-logo.kobra-logo-large .kobra-name-1,
[data-theme="sepia"] .kobra-logo.kobra-logo-large .kobra-name-1,
[data-theme="contrast"] .kobra-logo.kobra-logo-large .kobra-name-1,
[data-theme="warm"] .kobra-logo.kobra-logo-large .kobra-name-1 {
    color: var(--text);
}

.sidebar-brand i { color: var(--primary); font-size: 22px; }
.sidebar-brand span { display: flex; flex-direction: column; line-height: 1; color: #fff; }
.sidebar-brand small { font-size: 10px; color: var(--sidebar-muted); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }

.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }

/* Scrollbar custom oscuro para el sidebar (combina con su tema) */
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background 0.15s;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
    background-clip: content-box;
}
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }

/* Scrollbar custom para el resto del sistema (claro/oscuro según tema) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--surface-2, #f1f5f9); border-radius: 6px; }
*::-webkit-scrollbar-thumb {
    background: var(--border, #cbd5e1);
    border-radius: 6px;
    border: 2px solid var(--surface-2, #f1f5f9);
    transition: background 0.15s;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-soft, #64748b); }
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--surface-2); }

.sidebar-nav .nav-section {
    font-size: 10px;
    color: var(--sidebar-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 14px 6px;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--sidebar-text);
    border-radius: 8px;
    margin-bottom: 2px;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.15s;
}
.sidebar-nav a i { width: 18px; text-align: center; font-size: 14px; }
.sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-nav a.active { background: var(--primary); color: #fff; }

/* === Grupos desplegables del sidebar === */
/* ============================================================
   BUSCADOR DEL MENÚ
   ------------------------------------------------------------
   El menú tiene más de treinta pantallas repartidas en seis grupos plegados.
   Encontrar una exige acordarse de en qué grupo vive, y eso no se recuerda:
   se busca por el nombre. Escribiendo aquí se filtran las entradas que ya
   están en la página, así que lo que sale es exactamente lo que ese usuario
   tiene permitido ver — no hay una segunda lista que pueda quedarse desfasada.
   ============================================================ */
.nav-buscador {
    position: relative;
    margin: 0 0 10px;
}
.nav-buscador > i {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: .55;
    pointer-events: none;
}
/* Con el id y no solo la clase: la regla general de `input[type=text]` vive
   más abajo en este archivo y empata en especificidad, así que ganaba ella y
   el texto se metía debajo de la lupa. */
.nav-buscador input#nav-buscar {
    width: 100%;
    padding: 9px 32px 9px 36px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.07);
    color: inherit;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s, background .15s;
}
.nav-buscador input#nav-buscar::placeholder { color: inherit; opacity: .5; }
.nav-buscador input#nav-buscar:focus {
    border-color: var(--primary);
    background: rgba(255,255,255,0.12);
}
/* El aspa solo aparece cuando hay algo escrito. */
.nav-buscador button {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 22px; height: 22px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: inherit;
    font-size: 15px; line-height: 1;
    cursor: pointer;
    opacity: .75;
}
.nav-buscador button:hover { opacity: 1; background: rgba(255,255,255,0.2); }
.nav-buscador.con-texto button { display: block; }

/* Mientras se busca, los grupos que tengan resultados se abren solos: si no,
   habría que adivinar dentro de cuál está lo que acaba de salir. */
.sidebar-nav.buscando .nav-group-items { max-height: 1200px; }
.sidebar-nav.buscando .nav-group-chevron { display: none; }

/* La entrada señalada con las flechas del teclado. */
.sidebar-nav a.nav-marcado {
    background: rgba(255,255,255,0.14) !important;
    color: #fff !important;
}

.nav-sin-resultados {
    display: none;
    padding: 14px 12px;
    font-size: 12px;
    opacity: .6;
    text-align: center;
}
.sidebar-nav.sin-nada .nav-sin-resultados { display: block; }

/* Con el menú encogido solo se ven los iconos: ahí el buscador no cabe ni
   tendría dónde enseñar los resultados. */
.app.sidebar-collapsed .nav-buscador,
.app.sidebar-collapsed .nav-sin-resultados { display: none; }

.nav-group { margin-bottom: 2px; }
.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--sidebar-text);
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.nav-group-toggle i { width: 18px; text-align: center; font-size: 14px; }
.nav-group-toggle:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-group-toggle span { flex: 1; }
.nav-group-chevron { font-size: 11px !important; opacity: 0.6; transition: transform 0.2s; }
.nav-group.open .nav-group-chevron { transform: rotate(180deg); }
.nav-group-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    padding-left: 16px;
}
.nav-group.open .nav-group-items { max-height: 500px; }
.nav-group-items a {
    padding: 8px 12px;
    font-size: 12.5px;
    border-left: 2px solid rgba(255,255,255,0.08);
    border-radius: 0 8px 8px 0;
    margin-left: 4px;
}
.nav-group-items a i { font-size: 12px; }

.sidebar-user {
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; min-width: 0; }
.user-info-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    background: none;
    border: none;
    padding: 4px 6px;
    margin: 0 -6px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    border-radius: 8px;
    transition: background 0.15s;
    min-width: 0;
}
.user-info-btn:hover { background: rgba(255,255,255,0.06); }
.user-name { color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: var(--sidebar-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.user-logout { color: var(--sidebar-muted); padding: 8px; }
.user-logout:hover { color: var(--danger); }

.main {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
}

.topbar {
    height: var(--topbar-h);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 20;
}
/* El título debe poder encogerse (min-width:0), si no empuja a los elementos
   de la derecha y se les monta encima cuando el título es largo o la ventana
   es angosta (por ejemplo, a media pantalla). */
.topbar-title {
    font-size: 18px; font-weight: 700;
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Reloj de la barra superior: pastilla legible, con la hora destacada.
   Se actualiza solo cada segundo (ver initTopbarClock en app.js). */
.topbar-date {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-size: 13px; line-height: 1;
    white-space: nowrap;
}
.topbar-date > i { color: var(--primary); font-size: 13px; }
.topbar-date .tb-time {
    font-weight: 800; font-size: 14px; letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums; color: var(--text);
}
.topbar-date .tb-ampm { font-size: 10px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; }
.topbar-date .tb-sep { width: 1px; height: 16px; background: var(--border); }
.topbar-date .tb-day { font-weight: 600; color: var(--text); }
.topbar-date .tb-date { color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.topbar-date { flex: 0 0 auto; }
/* Los elementos de la derecha no se deforman ni se solapan entre sí. */
.topbar-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; flex-wrap: nowrap; }
.topbar-actions > * { flex: 0 0 auto; }
.menu-toggle { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text); }

/* Botones de herramientas (calculadora, teclado) en la barra superior */
.topbar-tool-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); cursor: pointer; font-size: 16px;
    transition: background .15s, transform .1s;
}
.topbar-tool-btn:hover { background: var(--primary); color: #fff; }
.topbar-tool-btn:active { transform: translateY(1px); }

/* === Tasas BCV en el header === */
.bcv-rates-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--info-soft, #dbeafe) 0%, var(--surface-2, #f1f5f9) 100%);
    border: 1.5px solid var(--info, #3b82f6);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    position: relative;
    font-size: 12px;
    font-weight: 600;
}
.bcv-rates-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
    background: linear-gradient(135deg, var(--info-soft, #dbeafe) 0%, var(--info-soft, #dbeafe) 100%);
}
.bcv-rates-pill:active { transform: translateY(0); }

/* Pill cuando el usuario NO tiene permiso para actualizar */
.bcv-rates-pill.no-permission {
    opacity: 0.78;
}
.bcv-rates-pill.no-permission:hover {
    transform: none;
    box-shadow: none;
    background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.04) 100%);
    border-color: var(--warning, #f59e0b);
}
.bcv-rates-pill.no-permission .bcv-refresh-icon {
    color: var(--warning, #f59e0b);
    opacity: 0.8;
}
/* Shake al intentar actualizar sin permiso */
.bcv-rates-pill.shake-deny {
    animation: bcv-shake 0.4s ease-in-out;
    border-color: var(--danger, #ef4444) !important;
}
@keyframes bcv-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.bcv-rates-label {
    color: var(--info, #3b82f6);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-right: 8px;
    border-right: 1px solid var(--info, #3b82f6);
    opacity: 0.85;
}
.bcv-rates-label i { margin-right: 4px; font-size: 13px; }

.bcv-rate-item {
    display: inline-flex; align-items: baseline; gap: 4px;
    color: var(--text);
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace);
}
.bcv-rate-code {
    font-weight: 800; font-size: 10px;
    color: var(--text-soft);
    letter-spacing: 0.03em;
}
.bcv-rate-value {
    font-weight: 700; font-size: 13px;
    color: var(--info, #3b82f6);
}
.bcv-rate-unit {
    font-size: 9px; color: var(--text-muted); font-weight: 600;
    text-transform: uppercase;
}

.bcv-refresh-icon {
    font-size: 10px; color: var(--info, #3b82f6); opacity: 0.55;
    margin-left: 2px; transition: transform 0.4s ease;
}
.bcv-rates-pill:hover .bcv-refresh-icon { opacity: 1; }
.bcv-rates-pill.is-syncing .bcv-refresh-icon { animation: bcvRotate 0.9s linear infinite; opacity: 1; }
@keyframes bcvRotate { to { transform: rotate(360deg); } }

/* Animación al actualizar el valor */
.bcv-rate-value.is-updating {
    animation: bcvFlash 0.6s ease;
}
@keyframes bcvFlash {
    0%   { background: transparent; }
    30%  { background: rgba(34, 197, 94, 0.25); border-radius: 4px; padding: 0 4px; transform: scale(1.08); }
    100% { background: transparent; }
}

/* En móvil mostrar más compacto */
@media (max-width: 768px) {
    .bcv-rates-pill { gap: 5px; padding: 5px 9px; font-size: 11px; }
    .bcv-rates-label span { display: none; }
    .bcv-rates-label { padding-right: 5px; }
    .bcv-rate-unit { display: none; }
}
@media (max-width: 480px) {
    .bcv-rates-pill { display: none; }
}

.theme-toggle {
    background: none; border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px; cursor: pointer; color: var(--text-soft);
    display: flex; align-items: center; gap: 6px; font-size: 13px;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }

.content { padding: 24px; }

/* ================================================ CARDS ================================================ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.card-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-title i { color: var(--primary); }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--border); }

/* ================================================ BOTONES ================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { color: #fff; }
.btn-danger  { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { color: #fff; }
.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-warning:hover { color: #fff; }
.btn-info    { background: var(--info); color: #fff; border-color: var(--info); }
.btn-info:hover { color: #fff; }
.btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* === Celdas de acciones de tabla: separación generosa entre iconos === */
.actions-cell {
    white-space: nowrap;
}
.actions-cell .btn,
.actions-cell button {
    margin-left: 6px;
    margin-right: 0;
    margin-top: 2px;
    margin-bottom: 2px;
}
.actions-cell .btn:first-child,
.actions-cell button:first-child {
    margin-left: 0;
}
.product-actions-cell .btn {
    min-width: 36px;
    padding: 7px 11px;
}
.btn-lg { padding: 12px 22px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-icon { padding: 7px; width: 32px; height: 32px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ================================================ FORMULARIOS ================================================ */
.form-group { margin-bottom: 14px; }
.form-label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-soft);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-control, select, textarea,
input[type=text], input[type=number], input[type=email], input[type=password],
input[type=date], input[type=tel], input[type=search], input[type=time], input[type=datetime-local] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
    transition: all 0.15s;
    min-height: 38px;
    box-sizing: border-box;
}
.form-control:focus, select:focus, textarea:focus, input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.form-help { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.form-required::after { content: ' *'; color: var(--danger); }

/* === Estilos modernos para <select> === */
/* Quitamos la apariencia nativa (que se ve arcaica) y ponemos una flecha chevron
   personalizada vía background SVG, consistente con el diseño del sistema. */
select, select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    /* Chevron SVG (color gris que combina con --text-muted) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px !important;
    font-weight: 500;
}
select:hover, select.form-control:hover {
    border-color: var(--primary);
}
select:focus, select.form-control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
/* Cuando el select está dentro de un wrapper con icono, la flecha y el icono no chocan */
.input-icon-wrap > select {
    padding-left: 38px !important;
    padding-right: 36px !important;
}
/* Las opciones del dropdown heredan el fondo del tema (para modo oscuro) */
select option {
    background: var(--surface);
    color: var(--text);
    padding: 8px;
}
/* Select deshabilitado */
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--surface-2);
}

/* ===== CUSTOM SELECT (dropdown estilizado) ===== */
.cs-wrap {
    position: relative;
    width: 100%;
}
.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    min-height: 38px;
}
.cs-trigger .cs-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.cs-trigger .cs-arrow {
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.cs-wrap.open .cs-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.cs-wrap.open .cs-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}
.cs-trigger:hover { border-color: var(--primary); }
.cs-trigger.cs-disabled-trigger {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--surface-2);
}

/* Cuando el custom-select va dentro de un wrapper con icono, dejar espacio al icono */
.input-icon-wrap > .cs-wrap > .cs-trigger {
    padding-left: 38px;
}

/* Panel desplegable */
.cs-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 11000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    animation: csFadeIn 0.12s ease;
}
@keyframes csFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.cs-option {
    padding: 9px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-option:hover {
    background: var(--surface-2);
}
.cs-option.cs-selected {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
}
.cs-option.cs-selected::after {
    content: '\f00c'; /* check de FontAwesome */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
    font-size: 11px;
    opacity: 0.9;
}
.cs-option.cs-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Scrollbar del panel */
.cs-panel::-webkit-scrollbar { width: 8px; }
.cs-panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.cs-panel::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* === Estilos modernos para inputs de fecha/hora === */
input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-mono, 'Consolas','Monaco',monospace);
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
    position: relative;
    padding-right: 40px; /* espacio para el icono custom */
    /* Garantizar mismo alto que input[type=text] */
    line-height: normal;
    box-sizing: border-box;
    min-height: 38px;
    height: auto;
}
/* Icono del calendario en Webkit (Chrome/Edge/Safari): customizado */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    padding: 4px;
    margin-right: -4px;
    border-radius: 4px;
    opacity: 0.65;
    transition: opacity 0.15s, background 0.15s;
    /* Reemplaza el icono nativo con uno SVG temático */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    width: 22px;
    height: 22px;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background-color: var(--primary-soft);
}
/* En modo oscuro/cálido invertir el icono */
[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type=datetime-local]::-webkit-calendar-picker-indicator,
[data-theme="night"] input[type=date]::-webkit-calendar-picker-indicator,
[data-theme="night"] input[type=time]::-webkit-calendar-picker-indicator,
[data-theme="night"] input[type=datetime-local]::-webkit-calendar-picker-indicator,
[data-theme="warm"] input[type=date]::-webkit-calendar-picker-indicator,
[data-theme="warm"] input[type=time]::-webkit-calendar-picker-indicator,
[data-theme="warm"] input[type=datetime-local]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
/* Cuando hay icono dentro de input-icon-wrap, ajustar el padding */
.input-icon-wrap input[type=date],
.input-icon-wrap input[type=time],
.input-icon-wrap input[type=datetime-local] {
    padding-left: 36px;
    padding-right: 40px;
}
/* Hover para todo el input */
input[type=date]:hover, input[type=time]:hover, input[type=datetime-local]:hover {
    border-color: var(--primary);
    background: var(--surface);
}
input[type=date]:focus, input[type=time]:focus, input[type=datetime-local]:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
/* Color del placeholder y texto */
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit,
input[type=datetime-local]::-webkit-datetime-edit {
    color: var(--text);
    padding: 0;
}
input[type=date]::-webkit-datetime-edit-fields-wrapper {
    color: var(--text);
}
input[type=date]::-webkit-datetime-edit-text {
    color: var(--text-muted);
    padding: 0 2px;
}

/* ====================================================================
   FLATPICKR: estilos custom del calendario expandido (temáticos)
   ==================================================================== */
.flatpickr-calendar {
    background: var(--surface) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.22), 0 4px 14px rgba(0,0,0,0.10) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow: hidden;
    font-family: inherit;
    width: 340px !important;
    padding: 6px 8px 8px 8px !important;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
    border-bottom-color: var(--primary) !important;
}
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--border) !important;
    border-bottom-color: transparent !important;
}

/* Cabecera del mes */
.flatpickr-months {
    background: var(--primary) !important;
    border-radius: 10px 10px 0 0;
    padding: 12px 6px !important;
    margin: -6px -8px 8px -8px;
    align-items: center;
    /* POSICIÓN PROPIA: ES LO QUE ARREGLA LAS FLECHAS.
       Las flechas de mes son `position:absolute; top:0`, pero esta barra no
       tenía posición, así que ese `top:0` se medía desde el CALENDARIO entero,
       no desde aquí. Al darle a la barra su padding y su margen negativo, la
       barra creció hacia abajo y las flechas se quedaron ancladas arriba, con
       34px de alto: el mes se veía centrado, pero la zona que responde al clic
       solo cubría la franja de arriba. Apuntando al centro, el clic caía fuera
       y no pasaba nada. */
    position: relative;
}
/* Con la barra ya posicionada, las flechas se centran respecto a ELLA y se les
   da un área de toque cómoda, que en una pantalla táctil importa más todavía. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    height: auto !important;
    line-height: 0;
    z-index: 5 !important;   /* por encima del bloque del mes y del año */
}
.flatpickr-months .flatpickr-prev-month { left: 10px !important; right: auto !important; }
.flatpickr-months .flatpickr-next-month { right: 10px !important; left: auto !important; }
.flatpickr-months .flatpickr-month {
    color: #fff !important;
    fill: #fff !important;
    height: 38px;
    overflow: visible;
}
.flatpickr-current-month {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 6px 0 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Se deja aire a los lados para las flechas. Con el 75% de ancho que trae
       la librería, este bloque llegaba a solaparse con ellas y se quedaba con
       los clics de los bordes. */
    width: 62% !important;
    left: 19% !important;
    z-index: 1;
}
.flatpickr-current-month .cur-month {
    color: #fff !important;
    font-weight: 700 !important;
}
.flatpickr-current-month input.cur-year {
    color: #fff !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,0.18);
    border: none;
    border-radius: 5px;
    padding: 3px 8px;
    font-family: inherit;
    text-align: center;
    box-shadow: none !important;
}
.flatpickr-current-month input.cur-year:focus {
    background: rgba(255,255,255,0.28);
    outline: none;
}
.numInputWrapper:hover {
    background: rgba(255,255,255,0.1) !important;
}
.numInputWrapper span {
    border-color: rgba(255,255,255,0.3) !important;
}
.numInputWrapper span:after {
    border-top-color: #fff !important;
    border-bottom-color: #fff !important;
}
.flatpickr-monthDropdown-months {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    cursor: pointer;
    border-radius: 5px;
    padding: 3px 8px !important;
    -webkit-appearance: none;
    appearance: none;
}
.flatpickr-monthDropdown-months:hover {
    background: rgba(255,255,255,0.25) !important;
}
.flatpickr-monthDropdown-months option {
    background: var(--surface) !important;
    color: var(--text) !important;
    font-weight: 600;
}
.flatpickr-prev-month, .flatpickr-next-month {
    fill: rgba(255,255,255,0.85) !important;
    color: rgba(255,255,255,0.85) !important;
    padding: 8px !important;
    border-radius: 6px;
    transition: background 0.15s;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
    background: rgba(255,255,255,0.25) !important;
    fill: #fff !important;
    color: #fff !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg {
    fill: currentColor !important;
}

/* Día de la semana (Lu, Ma, Mi...) */
.flatpickr-weekdays {
    background: var(--surface) !important;
    padding: 8px 0 4px;
    height: auto;
}
.flatpickr-weekdaycontainer {
    display: flex;
    width: 100%;
}
span.flatpickr-weekday {
    color: var(--text-soft) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent !important;
    height: 28px;
    line-height: 28px;
}

/* Días del calendario */
.dayContainer {
    padding: 4px 0;
    width: 322px;
    min-width: 322px;
    max-width: 322px;
}
.flatpickr-day {
    color: var(--text) !important;
    border-radius: 8px !important;
    margin: 2px;
    max-width: 40px;
    height: 40px;
    line-height: 40px;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.15s;
    border: 1.5px solid transparent !important;
}
.flatpickr-day:hover {
    background: var(--primary-soft) !important;
    border-color: var(--primary-soft) !important;
    color: var(--primary) !important;
    font-weight: 700;
}
.flatpickr-day.today {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}
.flatpickr-day.today:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 3px 10px var(--primary-soft);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important;
    opacity: 0.35;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    opacity: 0.6;
    background: var(--surface-2) !important;
    color: var(--text-soft) !important;
}
.flatpickr-day.flatpickr-disabled:hover {
    background: transparent !important;
    cursor: not-allowed;
}

/* Footer / time picker */
.flatpickr-time {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 10px 10px;
    margin: 8px -8px -8px -8px;
    padding: 6px 8px;
}
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm {
    color: var(--text) !important;
    background: transparent !important;
    font-weight: 700 !important;
}
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--primary-soft) !important;
}

/* Modo oscuro/cálido: bordes más visibles */
[data-theme="dark"] .flatpickr-calendar,
[data-theme="night"] .flatpickr-calendar,
[data-theme="warm"] .flatpickr-calendar {
    box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4) !important;
}

.input-group { display: flex; gap: 0; }
.input-group .form-control { border-radius: 8px 0 0 8px; }
.input-group .btn { border-radius: 0 8px 8px 0; }

/* === Input con icono dentro === */
.input-icon-wrap {
    position: relative;
    display: block;
}
.input-icon-wrap > i {
    position: absolute;
    left: 12px;
    top: 13px;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
    transition: color 0.15s;
}
.input-icon-wrap > input,
.input-icon-wrap > select,
.input-icon-wrap > textarea {
    padding-left: 38px !important;
}
/* Flatpickr crea un altInput visible que NO es un type=date.
   Heredamos los estilos del wrapper para que se vea idéntico al resto. */
.input-icon-wrap > input.flatpickr-input,
.input-icon-wrap > input.form-control[type="text"][readonly].flatpickr-alt-input {
    padding-left: 38px !important;
}
input.flatpickr-input, input.form-control.flatpickr-alt-input {
    width: 100% !important;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-mono, 'Consolas','Monaco',monospace) !important;
    font-weight: 600;
    font-size: 13px;
    background: var(--surface) !important;
    color: var(--text);
    cursor: pointer;
    min-height: 38px;
    box-sizing: border-box;
    transition: all 0.15s;
}
input.flatpickr-input:hover, input.flatpickr-alt-input:hover {
    border-color: var(--primary);
}
input.flatpickr-input:focus, input.flatpickr-alt-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
/* Cuando Flatpickr está activo, ocultar el original (que viene como hidden) */
input.flatpickr-input.flatpickr[type="hidden"] {
    display: none !important;
}
.input-icon-wrap:focus-within > i { color: var(--primary); }

/* Iconos a la derecha */
.input-icon-wrap.input-icon-right > i {
    left: auto;
    right: 12px;
}
.input-icon-wrap.input-icon-right > input,
.input-icon-wrap.input-icon-right > select,
.input-icon-wrap.input-icon-right > textarea {
    padding-left: 12px !important;
    padding-right: 38px !important;
}
/* Si el select tiene un icono a la derecha, ocultamos la flecha SVG para no duplicar */
.input-icon-wrap.input-icon-right > select {
    background-image: none;
}

/* Inputs numéricos formateados (es-VE 10.000,00) — alineación derecha y monoespaciado */
input.num-input,
input[data-num] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0.02em;
}

/* Validación visual */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--danger) !important;
    background: var(--danger-soft) !important;
}
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* === Inputs FILE estilizados === */
input[type=file] {
    width: 100%;
    padding: 0;
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
}
input[type=file]:hover { border-color: var(--primary); background: var(--surface); }
input[type=file]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
input[type=file]::file-selector-button {
    padding: 10px 16px;
    margin-right: 12px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s;
}
input[type=file]::file-selector-button:hover { background: var(--primary-hover); }
input[type=file]::-webkit-file-upload-button {
    padding: 10px 16px;
    margin-right: 12px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0;
}
input[type=file]::-webkit-file-upload-button:hover { background: var(--primary-hover); }

/* Mejor separación visual entre form-groups */
.form-grid { display: grid; gap: 14px; }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid .form-group { margin-bottom: 0; }
.form-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-title:first-child { margin-top: 0; }

/* ================================================ TABLAS ================================================ */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.table th {
    background: var(--surface-2);
    font-weight: 700;
    font-size: 11px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.table tbody tr:hover { background: var(--surface-2); }
.table .text-right { text-align: right; }
.table .text-center { text-align: center; }
.table-compact th, .table-compact td { padding: 6px 10px; font-size: 12px; }

/* ================================================ BADGES ================================================ */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-muted   { background: var(--surface-3);    color: var(--text-soft); }

/* ================================================ STATS ================================================ */
/* BARRA DE CARGA SUPERIOR (la nuestra, no la de Chrome).
   Chrome dibuja una en su propia franja, pero el color lo decide él a partir
   del theme-color y no se puede elegir. Esta va dentro de la página, en el
   verde del logotipo, y sí la controlamos.
   Baja lo que ocupe la franja del sistema en el teléfono, para no quedar
   tapada por ella. */
#kp-barra-carga {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    width: 0;
    height: 3px;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #059669, #10b981, #34d399);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* REJILLA DE DOS COLUMNAS.
   Esta clase se usaba en el panel y en los informes desde hace tiempo, pero
   NUNCA SE DEFINIÓ: el navegador la ignoraba y las dos tarjetas caían una
   detrás de otra, pegadas y sin separación. De ahí que "Ventas últimos 7 días"
   y "Top productos" se vieran juntas, y lo mismo "Alertas" con "Ventas
   recientes".
   La separación es de 20px, la misma que el `margin-top` de los bloques del
   panel, para que el espaciado de toda la página sea uniforme. */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
/* Cuando van varias seguidas —como en los informes— también necesitan aire
   entre ellas, no solo entre sus columnas. */
.grid-2 + .grid-2,
.grid-2 + .card,
.card + .grid-2 { margin-top: 20px; }
/* En pantallas estrechas pasan a una sola columna, conservando la separación:
   apiladas, el hueco sigue haciendo la misma falta. */
@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 70px; height: 70px;
    background: var(--primary-soft);
    border-radius: 50%;
    transform: translate(30%, -30%);
    opacity: 0.6;
}
.stat-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    margin-bottom: 12px;
    position: relative;
}
.stat-card.success .stat-icon { background: var(--success); }
.stat-card.success::before { background: var(--success-soft); }
.stat-card.warning .stat-icon { background: var(--warning); }
.stat-card.warning::before { background: var(--warning-soft); }
.stat-card.danger .stat-icon { background: var(--danger); }
.stat-card.danger::before { background: var(--danger-soft); }
.stat-card.info .stat-icon { background: var(--info); }
.stat-card.info::before { background: var(--info-soft); }
.stat-label { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stat-value { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; font-family: var(--font-mono); }
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ================================================ MODALES ================================================ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 20, 25, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}
.modal-backdrop.show { display: flex; }
.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalIn 0.2s ease;
}
.modal.modal-lg { max-width: 720px; }
.modal.modal-xl { max-width: 980px; }
.modal.modal-full { max-width: 1200px; }
@keyframes modalIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-title i { color: var(--primary); }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ================================================ TOAST ================================================ */
#toast-container { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
    background: var(--surface);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 12px 18px;
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 90vw;
    animation: toastIn 0.3s ease;
    font-weight: 500;
    font-size: 13px;
    color: var(--text);
    display: flex; align-items: center; gap: 10px;
    pointer-events: auto;
}
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.warning { border-color: var(--warning); }
.toast i { font-size: 18px; }
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }
.toast.warning i { color: var(--warning); }
@keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ================================================ TABS ================================================ */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}
.tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.tab,
.tab-btn {
    padding: 10px 18px;
    background: none; border: none;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 8px 8px 0 0;
}
.tab:hover,
.tab-btn:hover { color: var(--text); background: var(--surface-2); }
.tab.active,
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--primary-soft);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ================================================ LOGIN ================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f1419 0%, #1e293b 100%);
    padding: 20px;
}
.login-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 36px;
    width: 100%;
    max-width: 400px;
    color: #0f1419;
}
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand i {
    font-size: 36px;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 14px;
    border-radius: 14px;
}
.login-brand h1 { font-size: 22px; font-weight: 800; margin-top: 12px; }
.login-brand p { color: var(--text-soft); margin-top: 4px; font-size: 13px; }
.login-error {
    background: var(--danger-soft);
    color: var(--danger);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
}

/* ================================================ FILTROS / PAGE HEADER ================================================ */
.filters {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.filters > div { display: flex; flex-direction: column; }
.filters input, .filters select { min-width: 180px; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
/* EL ICONO DEL TÍTULO, SEPARADO SIEMPRE IGUAL.
   La separación venía del espacio en blanco del HTML, que es un solo espacio y
   además desaparece si alguien junta las etiquetas al escribir. Resultado: cada
   pantalla con una distancia distinta y el icono pegado a la palabra.
   Con flex y un gap fijo, todas quedan iguales sin depender de cómo se escribió
   el HTML. El icono se ve algo menor que el texto y en el color del sistema,
   para que acompañe al título en vez de competir con él. */
.page-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-header h2 > i {
    color: var(--primary);
    font-size: 0.85em;
    flex-shrink: 0;
}
.page-header p { color: var(--text-soft); margin-top: 2px; font-size: 13px; }
.page-header-actions { display: flex; gap: 8px; }

/* ================================================ UTILITIES ================================================ */
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info    { color: var(--info); }
.text-muted   { color: var(--text-muted); }
.text-soft    { color: var(--text-soft); }
.text-primary { color: var(--primary); }
.text-mono    { font-family: var(--font-mono); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.fw-bold      { font-weight: 700; }
.fw-700       { font-weight: 700; }
.fw-800       { font-weight: 800; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } .mt-4 { margin-top: 22px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 14px; } .mb-4 { margin-bottom: 22px; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 14px; }
.flex-1 { flex: 1; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.empty-state { padding: 50px 20px; text-align: center; color: var(--text-muted); }
.empty-state i { font-size: 42px; opacity: 0.3; margin-bottom: 10px; }
.empty-state p { margin-top: 4px; }

/* ================================================ IMÁGENES ================================================ */
.thumb {
    width: 40px; height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb i { color: var(--text-muted); font-size: 16px; }
.thumb-lg { width: 60px; height: 60px; border-radius: 10px; }
.thumb-lg i { font-size: 22px; }

.image-uploader {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    background: var(--surface-2);
    transition: all 0.15s;
    cursor: pointer;
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-uploader:hover { border-color: var(--primary); background: var(--surface); }
.image-uploader input[type=file],
.image-uploader .image-uploader-file {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.image-uploader.has-image { padding: 0; border-style: solid; }
.image-uploader-preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-3);
    position: relative;
}
.image-uploader-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.image-uploader-preview .remove-image {
    position: absolute;
    top: 6px; right: 6px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff; border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}
.image-uploader-empty i { font-size: 32px; color: var(--text-muted); margin-bottom: 8px; display: block; }
.image-uploader-empty p { color: var(--text-soft); font-size: 13px; margin-top: 6px; }
.image-uploader-empty small { color: var(--text-muted); font-size: 11px; }
.image-uploader.uploading { opacity: 0.6; pointer-events: none; }

/* ================================================ RESPONSIVE — TABLETS Y MÓVILES ================================================ */

/* Tablets grandes y laptops pequeñas (1024px) */
@media (max-width: 1024px) {
    :root { --sidebar-w: 240px; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .stat-value { font-size: 22px; }
    .content { padding: 18px; }
    .page-header h2 { font-size: 20px; }
}

/* Formularios de 2-3 columnas colapsan antes (cubre teléfonos grandes/tablets ~hasta 900px) */
@media (max-width: 900px) {
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr !important; }
    .form-row { grid-template-columns: 1fr !important; }
    /* Selects/inputs no desbordan */
    select, input, textarea, .form-control { max-width: 100% !important; box-sizing: border-box !important; }
    /* Grids inline de columnas fijas en cards/modales colapsan */
    .card-body [style*="grid-template-columns"]:not([style*="minmax"]),
    .modal-body [style*="grid-template-columns"]:not([style*="minmax"]) {
        grid-template-columns: 1fr !important;
    }
}

/* Tablets (768px) */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: var(--shadow-lg);
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }
    .sidebar.open { transform: translateX(0); }
    /* El menú (nav) es lo único que scrollea; brand y usuario quedan fijos */
    .sidebar .sidebar-brand { flex-shrink: 0; }
    .sidebar .sidebar-nav { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
    .sidebar .sidebar-user {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: var(--sidebar-bg);
        border-top: 1px solid rgba(255,255,255,0.12);
        z-index: 2;
    }
    .main { margin-left: 0; }
    .menu-toggle { display: block; }
    .content { padding: 14px; }
    /* En móvil el menú es cortina y siempre va completo.
       Aquí NO hay reglas para deshacer el modo encogido: la clase
       `sidebar-collapsed` se quita directamente en el encabezado cuando la
       pantalla es estrecha. Se intentó contrarrestarla desde el CSS y no
       funciona bien: hay que deshacer una por una todas las propiedades que
       toca, y con que se escape una el menú se ve entrecortado. */

    /* Backdrop al abrir sidebar */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 49;
    }
    .sidebar-backdrop.show { display: block; }

    /* Modales a pantalla casi completa */
    .modal-backdrop { padding: 0; align-items: flex-end; }
    .modal {
        max-width: 100% !important;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        margin: 0;
    }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; flex-direction: column-reverse; }
    .modal-footer .btn { width: 100%; }

    /* Tablas → tarjetas verticales */
    .table-responsive thead { display: none; }
    .table-responsive tbody, .table-responsive tr, .table-responsive td { display: block; width: 100%; }
    .table-responsive tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 12px;
    }
    .table-responsive td {
        border: none !important;
        padding: 4px 0 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    .table-responsive td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        letter-spacing: 0.05em;
        flex-shrink: 0;
    }
    .table-responsive td.actions-cell {
        justify-content: flex-end;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        border-top: 1px solid var(--border) !important;
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .table-responsive td.actions-cell::before { display: none; }
    .table-responsive td.actions-cell .btn,
    .table-responsive td.actions-cell button {
        margin: 0;
        flex: 0 0 auto;
        min-height: 38px;
        min-width: 44px;
    }

    /* Stats: 2 columnas */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-value { font-size: 20px; }
    .stat-icon { width: 36px; height: 36px; font-size: 14px; }

    /* Page header apilado */
    .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-header-actions { flex-wrap: wrap; }
    .page-header-actions .btn { flex: 1; min-width: 0; }

    /* Form rows apilados */
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr !important; }

    /* Topbar */
    .topbar { padding: 0 14px; gap: 10px; }
    .topbar-title { font-size: 16px; }
    /* Reloj compacto: solo la hora, sin fecha ni día. */
    .topbar-date { padding: 5px 9px; gap: 5px; }
    .topbar-date .tb-day, .topbar-date .tb-date, .topbar-date .tb-sep { display: none; }
    .theme-toggle span { display: none; }
    .theme-toggle { padding: 8px; }

    /* Filtros */
    .filters { flex-direction: column; align-items: stretch; }
    .filters > div { width: 100%; }
    .filters input, .filters select { min-width: 0; width: 100%; }
    .filters .btn { width: 100%; margin-top: 4px; }

    /* Tabs scroll */
    .tabs { overflow-x: auto; flex-wrap: nowrap; }
    .tab { white-space: nowrap; flex-shrink: 0; }

    /* Inputs táctiles: mínimo 16px para evitar zoom de iOS */
    input[type=text], input[type=number], input[type=email], input[type=password],
    input[type=date], input[type=tel], input[type=search], input[type=time],
    input[type=datetime-local], select, textarea, .form-control {
        font-size: 16px !important;
        padding: 12px 14px;
    }

    /* Botones táctiles más grandes */
    .btn { min-height: 42px; padding: 10px 16px; }
    .btn-sm { min-height: 34px; padding: 8px 12px; }
    .btn-lg { min-height: 50px; padding: 14px 20px; }

    /* Calculadora flotante: ajustar posición */
    .calc-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; }
    .calc-window { bottom: 16px; right: 16px; left: 16px; width: auto; }

    /* ===== RESPONSIVE GLOBAL: forzar grids/flex inline a colapsar en móvil ===== */
    /* Cualquier grid inline con columnas fijas pasa a una sola columna */
    .modal-body [style*="grid-template-columns"],
    .card-body [style*="grid-template-columns"],
    [style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Excepción: rejillas de miniaturas/imágenes pequeñas mantienen varias columnas */
    [style*="minmax(100px"], [style*="minmax(140px"], [style*="minmax(120px"] {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    }
    /* El teclado de denominaciones / cuadrículas cortas quedan en 2 columnas */
    [style*="repeat(7"], [style*="repeat(5"], [style*="repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Contenedores flex dentro de modales: permitir que envuelvan y no desborden */
    .modal-body > div[style*="display:flex"],
    .modal-body div[style*="display:flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }
    /* Columnas de ancho fijo (ej: 180px imagen) → ancho completo en móvil */
    .modal-body [style*="width:180px"],
    .modal-body [style*="width:240px"],
    .modal-body [style*="min-width:240px"] {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    /* Inputs y campos nunca se salen del contenedor */
    .modal-body input, .modal-body select, .modal-body textarea,
    .modal-body .form-control, .modal-body .input-icon-wrap {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .modal-body .input-group { flex-wrap: nowrap !important; }
    /* Las etiquetas con min-height fijo (alineación de precios) se relajan en móvil */
    .modal-body .form-label[style*="min-height"] {
        min-height: 0 !important;
        display: block !important;
    }
    /* form-group dentro de grids recupera su margen inferior al apilar */
    .modal-body .form-group[style*="margin-bottom:0"] { margin-bottom: 12px !important; }

    /* ===== INPUTS Y SELECTS: nunca desbordar (aplica en TODO el sistema, no solo modales) ===== */
    input, select, textarea, .form-control, .input-icon-wrap {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Selects con opciones largas: truncar el texto en vez de desbordar */
    select, .form-control {
        text-overflow: ellipsis;
        overflow: hidden;
    }
    /* Cualquier form-grid (2,3,4 columnas) colapsa a 1 en móvil, aunque esté en una card */
    .form-grid, .form-grid-2, .form-grid-3, .form-grid-4 {
        grid-template-columns: 1fr !important;
    }
    /* Las cards y sus cuerpos no permiten scroll horizontal */
    .card, .card-body { max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; }
    /* Contenedores con anchos mínimos fijos se relajan en toda la app */
    [style*="min-width:240px"], [style*="min-width:220px"], [style*="min-width:200px"] {
        min-width: 0 !important;
    }
    /* El contenido nunca causa scroll horizontal en la página */
    /* clip (no hidden): recorta sin convertir .content en contenedor de scroll,
       que era lo que rompía la posición de la lista en el teléfono */
    .content { overflow-x: clip; max-width: 100%; }
}

/* Móviles (480px) */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .content { padding: 10px; }
    .card-header { padding: 12px 14px; flex-direction: column; align-items: stretch; gap: 8px; }
    .card-body { padding: 14px; }
    .login-card { padding: 24px; }

    /* Topbar más compacto */
    .topbar { height: 56px; padding: 0 10px; }
    :root { --topbar-h: 56px; }

    /* Sidebar a pantalla completa */
    .sidebar { width: 100%; }
}

/* Pantallas táctiles (puntero grueso) */
@media (pointer: coarse) {
    .btn-icon { width: 40px; height: 40px; padding: 8px; }
    .table th, .table td { padding: 12px 14px; }
    .cart-qty button { width: 32px; height: 32px; }
    .cart-qty input { width: 70px; padding: 6px; font-size: 16px; }
}

/* Print */
@media print {
    .sidebar, .topbar, .page-header, .btn, .no-print, .calc-fab, .calc-window, .sidebar-backdrop { display: none !important; }
    .main { margin-left: 0 !important; }
    .content { padding: 0 !important; }
}

/* =====================================================
   RESPONSIVE AVANZADO - Teléfono / Tablet / PC
   ===================================================== */

/* Tipografía fluida que escala suavemente */
:root {
    --fs-xs:   clamp(10px, 0.7vw + 8px, 11px);
    --fs-sm:   clamp(12px, 0.8vw + 10px, 13px);
    --fs-base: clamp(13px, 0.9vw + 11px, 14px);
    --fs-lg:   clamp(15px, 1vw + 12px, 16px);
    --fs-xl:   clamp(18px, 1.5vw + 14px, 22px);
    --fs-2xl:  clamp(22px, 2vw + 16px, 28px);
    --fs-3xl:  clamp(28px, 3vw + 18px, 38px);
}

/* En dispositivos táctiles, áreas de toque más grandes.
   Se consulta TAMBIEN any-pointer: en un PC con monitor táctil y mouse
   conectado, el sistema informa el puntero PRIMARIO como "fine", asi que
   (pointer: coarse) por si solo daba falso y estas reglas nunca se
   activaban aunque se estuviera operando con el dedo. any-pointer: coarse
   acierta cuando existe ALGUN puntero grueso disponible, que es justo el
   caso de una caja con pantalla táctil. */
@media (pointer: coarse), (any-pointer: coarse) {
    .btn { min-height: 44px; padding: 11px 18px; }
    .btn-sm { min-height: 36px; padding: 8px 12px; }
    .btn-icon { min-width: 44px; min-height: 44px; }
    input, select, textarea { min-height: 44px; }
    .form-control { min-height: 44px; }
    .sidebar-nav a { min-height: 44px; }
    .tab { min-height: 44px; }
    .cart-qty button { width: 32px; height: 32px; }
    .modal-close { min-width: 44px; min-height: 44px; }
}

/* Hover solo en dispositivos con mouse real */
@media (hover: hover) {
    .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
}
@media (hover: none) {
    .btn:hover { transform: none; box-shadow: none; }
    .btn:active { transform: scale(0.97); }
}

/* Prevenir scroll horizontal accidental */
html, body { overflow-x: clip; }
.content { max-width: 100%; }
.table-wrap { -webkit-overflow-scrolling: touch; }

/* ===== TABLET (600 - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 769px) {
    :root { --sidebar-w: 70px; }

    .sidebar { width: 70px; transition: width 0.2s; }
    .sidebar:hover { width: 240px; }

    .sidebar-brand span,
    .sidebar-brand .kobra-logo-text,
    .sidebar-nav .nav-section,
    .sidebar-user .user-info,
    .sidebar-user .user-logout { display: none; }

    .sidebar:hover .sidebar-brand span,
    .sidebar:hover .sidebar-brand .kobra-logo-text,
    .sidebar:hover .sidebar-nav .nav-section,
    .sidebar:hover .sidebar-user .user-info,
    .sidebar:hover .sidebar-user .user-logout { display: block; }

    .sidebar:hover .sidebar-user .user-info { flex: 1; min-width: 0; }

    .sidebar-nav a { justify-content: center; }
    .sidebar:hover .sidebar-nav a { justify-content: flex-start; }
    .sidebar-nav a span:not(.badge) { display: none; }
    .sidebar:hover .sidebar-nav a { padding: 10px 14px; }
    .sidebar:hover .sidebar-nav a span { display: inline; }

    /* Títulos de grupo (Operación diaria, Ventas y crédito, etc.):
       cuando el menú está encogido, mostrar SOLO el ícono centrado, sin texto
       cortado ni la flechita. Al pasar el mouse, se expande y aparece el texto. */
    .sidebar-nav .nav-group-toggle {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .sidebar-nav .nav-group-toggle > span,
    .sidebar-nav .nav-group-chevron { display: none; }
    .sidebar-nav .nav-group-toggle > i:first-child { margin: 0; font-size: 18px; }

    .sidebar:hover .sidebar-nav .nav-group-toggle {
        justify-content: flex-start;
        padding-left: 14px;
        padding-right: 14px;
    }
    .sidebar:hover .sidebar-nav .nav-group-toggle > span { display: inline; }
    .sidebar:hover .sidebar-nav .nav-group-chevron { display: inline-block; }

    /* Cuando el menú está encogido, no mostrar los sub-items de los grupos
       (se ven al expandir con el mouse). */
    .nav-group-items { display: none; }
    .sidebar:hover .nav-group.open .nav-group-items { display: block; }

    /* Ícono de usuario y botones inferiores: centrados cuando está encogido */
    .sidebar-user { justify-content: center; }
    .sidebar:hover .sidebar-user { justify-content: flex-start; }

    /* El logo/hamburguesa arriba: centrar el ícono, ocultar botón colapsar
       para que no se monte sobre el texto. */
    .sidebar-brand { justify-content: center; }
    .sidebar-brand .sidebar-collapse-btn { display: none; }
    .sidebar:hover .sidebar-brand { justify-content: flex-start; }
    .sidebar:hover .sidebar-brand .sidebar-collapse-btn { display: inline-flex; }

    .main { margin-left: 70px; }

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

    /* POS en tablet: carrito más estrecho */
    .pos-layout { grid-template-columns: 1fr 360px; }

    /* Modales un poco más estrechos */
    .modal { max-width: 90vw; }
    .modal.modal-lg, .modal.modal-xl { max-width: 95vw; }
}

/* ===== TELÉFONO (≤ 600px) ===== */
@media (max-width: 600px) {
    :root { --sidebar-w: 0; --topbar-h: 56px; }

    /* Sidebar overlay */
    .sidebar {
        width: 280px;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.open + .main::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 49;
    }

    .menu-toggle { display: block; font-size: 22px; }
    .main { margin-left: 0; }

    .topbar { padding: 0 14px; gap: 10px; }
    .topbar-title { font-size: 15px; }
    /* Reloj compacto: solo la hora, sin fecha ni día. */
    .topbar-date { padding: 5px 9px; gap: 5px; }
    .topbar-date .tb-day, .topbar-date .tb-date, .topbar-date .tb-sep { display: none; }
    .theme-toggle span { display: none; }
    .theme-toggle { padding: 8px; }

    .content { padding: 12px; }

    .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-header h2 { font-size: 20px; }
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { flex: 1; }

    /* Stats en 2 columnas o 1 si es muy chico */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-value { font-size: 18px; }
    .stat-card { padding: 14px; }
    @media (max-width: 380px) {
        .stats-grid { grid-template-columns: 1fr; }
    }

    /* Cards más compactas */
    .card-header { padding: 12px 14px; flex-wrap: wrap; }
    .card-body { padding: 14px; }
    .card-title { font-size: 14px; }

    /* TABLAS RESPONSIVE: convertir en tarjetas */
    .table-responsive-cards thead { display: none; }
    .table-responsive-cards tbody, .table-responsive-cards tr { display: block; }
    .table-responsive-cards tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px;
        margin-bottom: 10px;
    }
    .table-responsive-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px dashed var(--border);
        font-size: 13px;
    }
    .table-responsive-cards td:last-child { border-bottom: none; }
    .table-responsive-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 11px;
        color: var(--text-soft);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 10px;
    }
    .table-responsive-cards td.text-right { justify-content: space-between; }

    /* Modales fullscreen en móvil */
    .modal-backdrop { padding: 0; align-items: flex-end; }
    .modal { max-width: 100%; max-height: 95vh; border-radius: 16px 16px 0 0; }
    .modal.modal-lg, .modal.modal-xl, .modal.modal-full { max-width: 100%; }
    @keyframes modalIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

    /* Filtros apilados */
    .filters { flex-direction: column; align-items: stretch; }
    .filters > div, .filters input, .filters select { width: 100%; min-width: 0; }

    /* Form rows en una columna */
    .form-row { grid-template-columns: 1fr; }

    /* Tabs scroll horizontal */
    .tabs { padding-bottom: 2px; }

    /* POS móvil — 1 columna, carrito como bottom sheet */
    .pos-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .product-tile { padding: 8px; }
    .product-tile-name { font-size: 12px; min-height: 28px; }
    .product-tile-price { font-size: 13px; }

    /* Carrito como botón flotante + bottom sheet */
    .pos-cart-toggle {
        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary);
        color: #fff;
        border: none;
        padding: 14px 24px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 14px;
        box-shadow: var(--shadow-lg);
        z-index: 80;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .pos-cart-toggle .badge {
        background: #fff;
        color: var(--primary);
    }
    .pos-cart {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        z-index: 81;
        transform: translateY(100%);
        transition: transform 0.3s;
        box-shadow: var(--shadow-lg);
    }
    .pos-cart.open { transform: translateY(0); }
    .pos-cart::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: var(--border);
        border-radius: 2px;
        margin: 8px auto 4px;
    }

    /* Calculadora a pantalla completa en móvil */
    .calc-window {
        width: calc(100vw - 24px);
        max-width: 380px;
        bottom: 80px;
        right: 12px;
        left: 12px;
        margin: 0 auto;
    }
    .calc-fab { bottom: 16px; right: 16px; }

    /* Despacho 1 columna */
    .dispatch-grid { grid-template-columns: 1fr; }
    .dispatch-stats { flex-direction: column; }

    /* Login full-width */
    .login-card { padding: 24px; border-radius: 14px; }

    /* Toast más estrecho */
    #toast-container { left: 50%; right: auto; transform: translateX(-50%); top: 12px; width: calc(100vw - 24px); }
    .toast { min-width: 0; width: 100%; }
}

/* ===== Pantallas muy pequeñas (≤ 380px) ===== */
@media (max-width: 380px) {
    .topbar { padding: 0 10px; }
    .content { padding: 10px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .stat-value { font-size: 16px; }
    .stat-card { padding: 12px; }
    .stat-icon { width: 32px; height: 32px; font-size: 14px; }
}

/* ===== Pantallas muy grandes (≥ 1600px) ===== */
@media (min-width: 1600px) {
    .content { padding: 28px 32px; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .pos-layout { grid-template-columns: 1fr 480px; }
}

/* ===== Orientación horizontal en teléfonos ===== */
@media (max-width: 900px) and (orientation: landscape) {
    .pos-layout { grid-template-columns: 1fr 320px; height: calc(100vh - var(--topbar-h)); }
    .pos-cart { position: relative; transform: none; max-height: none; }
    .pos-cart-toggle { display: none; }
}

/* ===== iOS notch / safe areas ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
    .pos-cart-toggle { bottom: calc(16px + env(safe-area-inset-bottom)); }
    .calc-fab { bottom: calc(16px + env(safe-area-inset-bottom)); }
    .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
}

/* ===== Reduce motion (accesibilidad) ===== */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ===== Tema oscuro automático del sistema (si el usuario no eligió) ===== */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg: #0a0e14;
        --bg-soft: #11161e;
        --surface: #1a212b;
        --surface-2: #11161e;
        --surface-3: #232b37;
        --border: #2a3340;
        --text: #e2e8f0;
        --text-soft: #94a3b8;
        --text-muted: #64748b;
        --topbar-bg: #1a212b;
        --topbar-border: #2a3340;
    }
}

/* ===== BUSCADOR EN VIVO (autocompletar para categoría, fabricante, etc.) ===== */
.live-search { position: relative; }
.ls-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1500;
}
.ls-panel.show { display: block; }
.ls-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.ls-item:last-child { border-bottom: none; }
.ls-item:hover { background: var(--primary-soft, rgba(99,102,241,0.1)); color: var(--primary); }
.ls-empty { padding: 12px 14px; color: var(--text-muted); font-size: 13px; text-align: center; }

/* ===== Toggle switch (interruptor) para configuración ===== */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--border); border-radius: 24px; transition: 0.25s;
}
.switch .slider:before {
    content: ""; position: absolute; height: 18px; width: 18px;
    left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.25s;
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* Enmascarar salario (privacidad) — funciona en Chrome/Edge/Chromium */
.salary-hidden {
    -webkit-text-security: disc;
    text-security: disc;
}

/* Botón de micrófono grabando (nota de voz) */
.btn.recording {
    color: #fff !important;
    animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ===== INDICADOR DE CARGA GLOBAL (al navegar entre páginas) ===== */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}
#page-loader.show { display: flex; }
.page-loader-box {
    background: var(--surface, #fff);
    border-radius: 16px;
    padding: 26px 34px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: plPop 0.15s ease;
}
@keyframes plPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.page-loader-spinner {
    width: 46px;
    height: 46px;
    border: 4px solid rgba(16, 185, 129, 0.2);
    border-top-color: var(--primary, #10b981);
    border-radius: 50%;
    animation: plSpin 0.7s linear infinite;
}
@keyframes plSpin { to { transform: rotate(360deg); } }
.page-loader-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1e293b);
}


/* ===== MARCA DE IMPUESTO: G = Gravable (con IVA) · E = Exento ===== */
.iva-flag {
    display: inline-block;
    min-width: 17px;
    padding: 1px 5px;
    margin-left: 5px;
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    vertical-align: middle;
    cursor: help;
}
.iva-flag.g { background: rgba(245,158,11,0.18); color: #b45309; }
.iva-flag.e { background: rgba(16,185,129,0.15); color: #059669; }

/* ===== Fila recién guardada: destello suave para ubicarla ===== */
@keyframes fila-guardada-destello {
    0%   { background-color: rgba(16,185,129,0.28); }
    100% { background-color: transparent; }
}
tr.fila-guardada > td { animation: fila-guardada-destello 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
    tr.fila-guardada > td { animation: none; background-color: rgba(16,185,129,0.14); }
}

/* ===== Ficha de producto/servicio estilo "cédula" (showItemIdCard) ===== */
.idc-rows { display: flex; flex-direction: column; gap: 2px; }
.idc-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 2px; border-bottom: 1px dashed var(--border);
    font-size: 13.5px;
}
.idc-row:last-child { border-bottom: none; }
.idc-label { color: var(--text-muted); white-space: nowrap; }
.idc-label i { width: 16px; text-align: center; margin-right: 4px; color: var(--primary); }
.idc-value { text-align: right; color: var(--text); font-weight: 600; word-break: break-word; }
.idc-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700;
}
@media (max-width: 560px) {
    .idc-body { flex-direction: column; align-items: center; }
    .idc-body > div:first-child { flex: 1 1 auto !important; max-width: 100% !important; }
}

/* ===== Botón X para limpiar un campo de búsqueda (dentro de .input-icon-wrap) ===== */
.input-icon-wrap { position: relative; }
.input-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    /* 24px era un blanco muy pequeño para el dedo en la caja táctil */
    width: 34px;
    height: 34px;
    z-index: 4;   /* por encima del iconito del teclado en pantalla */
    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.input-clear:hover { background: var(--danger); color: #fff; }
.input-clear:active { transform: translateY(-50%) scale(0.9); }
/* Que el texto no quede debajo de la X */
.input-icon-wrap > input[type="text"] { padding-right: 38px; }

/* ==========================================================================
   DÍAS CON VENTAS EN EL CALENDARIO
   Marca en el filtro de fechas los días en que sí hubo movimiento, para elegir
   el rango sin adivinar. Solo se aplica a los campos con data-marcar-ventas.
   ========================================================================== */
.flatpickr-day.dia-con-ventas {
    position: relative;
    font-weight: 700;
    color: var(--primary);
}

/* Punto debajo del número: señala el día sin tapar la fecha ni competir con
   el resaltado del día seleccionado. */
.flatpickr-day.dia-con-ventas::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
}

/* Cuando el día está elegido, el fondo ya es del color primario: el punto pasa
   a blanco para que se siga viendo. */
.flatpickr-day.dia-con-ventas.selected,
.flatpickr-day.dia-con-ventas.startRange,
.flatpickr-day.dia-con-ventas.endRange { color: #fff; }
.flatpickr-day.dia-con-ventas.selected::after,
.flatpickr-day.dia-con-ventas.startRange::after,
.flatpickr-day.dia-con-ventas.endRange::after { background: #fff; }

/* ==========================================================================
   ORDEN VISUAL DEL PUNTO DE VENTA (modal en Productos)
   Dos columnas: los que tienen posición fija y los que no.
   ========================================================================== */
/* Este modal necesita más ancho que ningún otro: son dos listas de productos
   con foto, una al lado de la otra, y comprimidas no se leen. */
.modal.modal-orden { max-width: 1320px; }

.ord-rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.ord-col { min-width: 0; }

.ord-cab {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; font-size: 13px;
}

/* Alto fijo con desplazamiento propio: con 246 productos, una lista sin tope
   estiraría el modal muy por debajo de la pantalla. */
.ord-lista {
    /* Más alto: con el modal grande se aprovecha la pantalla y se ven bastantes
       más productos sin desplazarse. */
    max-height: 62vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    background: var(--surface-2);
}

.ord-fila {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 9px; margin-bottom: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}

/* Miniatura pequeña: suficiente para reconocer el producto de un vistazo sin
   convertir la lista en una galería. */
.ord-img {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--surface-2);
}
.ord-img-vacia {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 14px;
}

.ord-pos {
    flex: 0 0 26px; text-align: center;
    font-family: var(--font-mono); font-weight: 800; font-size: 12px;
    color: var(--primary);
}

.ord-nom {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ord-nom small { color: var(--text-muted); font-size: 10.5px; }

.ord-acc { display: flex; gap: 4px; flex-shrink: 0; }
.ord-acc .btn-sm { padding: 3px 8px; font-size: 12px; min-width: 30px; }

/* La columna de disponibles se agrega con un toque en toda la fila. */
.ord-disp { cursor: pointer; }
.ord-disp:hover { border-color: var(--primary); background: var(--primary-soft); }

.ord-vacio {
    text-align: center; padding: 26px 10px;
    color: var(--text-muted); font-size: 12.5px; line-height: 1.6;
}

/* En pantallas angostas las columnas se apilan. */
@media (max-width: 900px) {
    .ord-rejilla { grid-template-columns: 1fr; }
    .ord-lista { max-height: 34vh; }
}

/* ==========================================================================
   REPORTE DE CAJA (X y Z) DENTRO DE UNA VENTANA DEL SISTEMA
   Vive en style.css y no en pos.css porque se abre desde dos sitios: el
   Punto de Venta y el módulo de Caja.
   ========================================================================== */
.rc-cab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    background: var(--surface-2);
    margin-bottom: 16px;
}
.rc-cab.es-z { border-left-color: var(--danger); }
.rc-cab strong { display: block; font-size: 15px; margin-bottom: 2px; }
.rc-cab div > div { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }

.rc-sello {
    flex: none;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 2.5px solid var(--warning);
    color: var(--warning);
    font-family: var(--font-mono, 'Consolas','Monaco',monospace);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}
.es-z .rc-sello { border-color: var(--danger); color: var(--danger); }

.rc-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 16px;
    margin-bottom: 14px;
}
.rc-dato { font-size: 13.5px; }
.rc-dato > span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 1px;
}

/* El total del turno: es el número por el que se abre este reporte. */
.rc-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--primary-soft);
    margin-bottom: 14px;
}
.rc-total > span {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--primary);
}
.rc-total > strong { font-size: 24px; font-weight: 800; color: var(--text); }

.rc-tabla th, .rc-tabla td { font-size: 13px; }

.rc-cuadre {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    font-size: 13.5px;
}
.rc-cuadre > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.rc-cuadre-fin {
    border-top: 1px solid var(--border);
    margin-top: 5px;
    padding-top: 7px !important;
    font-weight: 800;
}

.rc-nota { margin-top: 8px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }

/* VISTA PREVIA DE LA TIRA: QUE PAREZCA UN PAPEL, NO UN RECUADRO.
   Antes el blanco ocupaba todo el ancho del modal y no se entendía dónde
   terminaba el papel. La tira de verdad mide lo que mide —32 caracteres— y
   el resto es el mostrador. Así se ve de un vistazo si una línea cabe. */
.rc-tira-fondo {
    /* El fondo de la página, que en todos los temas va un tono por detrás de
       la tarjeta: hace de mostrador y deja que el papel blanco se despegue. */
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 16px;
    max-height: 420px;
    overflow: auto;
    display: flex;
    justify-content: center;
    /* SIN ESTO EL PAPEL SE ESTIRA AL ALTO DEL MARCO.
       Un contenedor flex estira sus hijos por omisión: la tira medía 420 px
       aunque su contenido fuera más largo, el texto se salía por debajo y el
       borde dentado quedaba clavado a media factura, cortándola. Con
       flex-start el papel mide lo que mide y es el marco el que se desplaza. */
    align-items: flex-start;
}
/* Fondo de mostrador algo más marcado en tema oscuro, para que el papel
   blanco destaque sin deslumbrar. */
:root[data-theme="dark"] .rc-tira-fondo { background: #0b0f16; }

.rc-tira-papel {
    position: relative;
    flex: none;
    background: #fff;
    color: #16181d;
    padding: 16px 14px;
    /* El borde fino es para el tema totalmente blanco, donde el mostrador y el
       papel serían del mismo color y la tira se perdería. */
    border-left: 1px solid rgba(15,23,42,.10);
    border-right: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 3px 14px rgba(0,0,0,.22);
}
/* Los bordes dentados de arriba y abajo: es lo que hace que se lea como un
   trozo de rollo cortado y no como una caja de texto. */
.rc-tira-papel::before,
.rc-tira-papel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 7px;
    background:
        linear-gradient(45deg,  transparent 50%, #fff 50%) 0 0 / 11px 7px repeat-x,
        linear-gradient(-45deg, transparent 50%, #fff 50%) 0 0 / 11px 7px repeat-x;
}
.rc-tira-papel::before { top: -7px; transform: scaleY(-1); }
.rc-tira-papel::after  { bottom: -7px; }

.rc-tira-papel pre {
    margin: 0;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.4;
    white-space: pre;
    color: inherit;
}

/* ==========================================================================
   LA HOJA DEL REPORTE DENTRO DE UNA VENTANA
   El aspecto del papel lo pone reporte-caja.js (lo comparte con el marco de
   impresión y con el PDF). Aquí solo va el mostrador donde se apoya y el
   encogido para que una hoja de 190 mm quepa en la ventana.
   ========================================================================== */
.hj-marco {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    max-height: 62vh;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;   /* la hoja mide lo suyo, no se estira al marco */
}
.hj-marco > .hj-hoja {
    flex: none;
    /* Se encoge desde arriba para que entre en la ventana. Al imprimir y al
       generar el PDF se usa el tamaño real, no este. */
    transform: scale(.82);
    transform-origin: top center;
    /* Lo que el encogido deja de ocupar hay que descontarlo, o abajo queda un
       hueco del tamaño del 18% que se recortó. */
    margin-bottom: calc(-18% - 10px);
    box-shadow: 0 4px 18px rgba(15,23,42,.16);
}
@media (max-width: 900px) {
    .hj-marco { padding: 10px; }
    .hj-marco > .hj-hoja { transform: scale(.55); margin-bottom: calc(-45% - 10px); }
}

/* ==========================================================================
   LOS BOTONES DEL REPORTE: ACCIONES A UN LADO, SALIDA AL OTRO
   Los cuatro juntos contra el borde derecho se leían como un muro y había
   que repasarlos uno a uno para dar con el de cerrar. `margin-right:auto`
   separa el grupo de acciones, porque el pie de las ventanas empuja todo a
   la derecha por omisión.
   ========================================================================== */
.rc-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-right: auto;
}
/* Si algún día el grupo no cupiera en una línea (una pantalla rara, el
   navegador con el zoom subido), que los botones se repartan en dos filas sin
   que el de salida se estire a lo alto de las dos. */
.modal-footer:has(> .rc-acciones) { flex-wrap: wrap; align-items: center; }
.modal-footer > .rc-acciones ~ .btn { align-self: center; }
/* En teléfono el pie de TODAS las ventanas del sistema se apila al revés (el
   botón principal arriba). No se le lleva la contraria: el grupo se deshace y
   deja que cada botón caiga en su línea, como en el resto de la aplicación. */
@media (max-width: 768px) {
    .modal-footer > .rc-acciones {
        width: 100%;
        margin-right: 0;
        flex-direction: column;
    }
}