/* ============ Génesis — hoja de estilos propia (sin CDN) ============ */

:root {
    color-scheme: dark;

    /* ---- Superficie y texto ---- */
    --bg: #000000;
    --surface: #121018;
    --surface-elevated: #1a1626;
    --surface-hover: rgba(255, 255, 255, 0.06);
    --surface-soft: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.07);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* ---- Marca ---- */
    --primary: #7c3aed;
    --primary-2: #9333ea;
    --accent: #c026d3;
    --gradient-brand: linear-gradient(135deg, var(--primary), var(--accent));

    /* ---- Estado semántico ---- */
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, .12);
    --success-text: #6ee7b7;
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, .14);
    --warning-text: #fbbf24;
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, .12);
    --danger-text: #fca5a5;
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, .12);
    --info-text: #93c5fd;

    /* ---- Alias retrocompatibles: todo el CSS/markup existente que usa los
       nombres antiguos sigue funcionando sin cambios mientras cada módulo
       se migra a los nombres semánticos de arriba en las próximas fases. ---- */
    --panel: var(--surface);
    --panel-soft: var(--surface-soft);
    --line: var(--border);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --muted-2: var(--text-muted);
    --purple: var(--primary);
    --purple-2: var(--primary-2);
    --fuchsia: var(--accent);
    --grad: var(--gradient-brand);

    /* ---- Tipografía: escala nombrada, aún basada en el stack de sistema
       (garantiza que el layout funcione sin depender de una fuente externa). ---- */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
    --fs-display: 28px;
    --fs-h1: 22px;
    --fs-h2: 17px;
    --fs-h3: 14px;
    --fs-body: 13.5px;
    --fs-small: 12px;
    --fs-caption: 11px;
    --fs-kpi: 26px;

    /* ---- Espaciado: escala base 4px ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* ---- Radios ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --radius: var(--radius-lg);

    /* ---- Sombras ---- */
    --shadow-sm: 0 4px 12px -4px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 24px -6px rgba(0, 0, 0, .4);
    --shadow-lg: 0 20px 45px -10px rgba(0, 0, 0, .5);
    --shadow-primary: 0 10px 24px -6px rgba(124, 58, 237, .45);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Estado de foco visible por defecto para navegación por teclado — los
   componentes que ya definen su propio :focus/:focus-visible más específico
   (inputs, botones del sidebar, etc.) lo pisan sin problema. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--purple-2);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------- Login ---------------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(168, 85, 247, 0.35), transparent),
        radial-gradient(ellipse 55% 45% at 90% 10%, rgba(139, 92, 246, 0.30), transparent),
        radial-gradient(ellipse 65% 55% at 5% 95%, rgba(88, 28, 135, 0.55), transparent),
        radial-gradient(ellipse 40% 30% at 50% 100%, rgba(217, 70, 239, 0.15), transparent),
        linear-gradient(180deg, #000000 0%, #0b0616 40%, #150a26 75%, #1c0f33 100%);
}

.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 40% 30%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,.4) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 95% 75%, rgba(255,255,255,.4) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 15% 85%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 50% 45%, rgba(255,255,255,.4) 50%, transparent 51%),
        radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,.5) 50%, transparent 51%);
    pointer-events: none;
}

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.login-card-wrap { position: relative; z-index: 1; width: 100%; max-width: 380px; animation: float 6s ease-in-out infinite; }

.login-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    box-shadow: 0 25px 90px -15px rgba(88, 28, 135, 0.6);
    padding: 40px 34px;
}

.login-logo {
    width: 64px; height: 64px; border-radius: 18px; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.35);
    margin: 0 auto 18px; padding: 8px; overflow: hidden;
}
.login-logo img { width: 100%; height: 100%; object-fit: contain; }

.login-header { text-align: center; margin-bottom: 26px; }
.login-header h1 { font-size: 25px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.02em; }
.login-header p { font-size: 13.5px; color: rgba(255,255,255,.5); margin: 8px 0 0; line-height: 1.5; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.5); margin: 0 0 6px 4px; }
.field-wrap { position: relative; }

.input {
    width: 100%;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 13px 20px;
    font-size: 14px;
    outline: none;
    transition: all .15s ease;
}
.input::placeholder { color: rgba(255,255,255,.3); }
.input:focus { background: rgba(255,255,255,.1); border-color: #c084fc; box-shadow: 0 0 0 4px rgba(192, 132, 252, .2); }
.input.has-icon { padding-right: 46px; }

.toggle-eye {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,.4); padding: 4px; display: flex;
}
.toggle-eye:hover { color: rgba(255,255,255,.8); }


.btn-submit {
    width: 100%;
    border-radius: var(--radius-pill);
    border: none;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    font-size: 14px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(88, 28, 135, .4);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(88, 28, 135, .5); }

.alert {
    display: flex; gap: 8px; align-items: flex-start;
    border-radius: 16px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px;
}
.alert-error { background: var(--danger-bg); border: 1px solid rgba(239, 68, 68, .3); color: var(--danger-text); }
.alert-success { background: var(--success-bg); border: 1px solid rgba(16, 185, 129, .3); color: var(--success-text); }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; }

.login-footer { text-align: center; color: rgba(255,255,255,.25); font-size: 12px; margin-top: 22px; }

/* ---------------- App shell (dashboard) ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 260px; flex-shrink: 0; background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; }
.sidebar-brand .mark {
    width: 36px; height: 36px; border-radius: 12px; background: #fff;
    display: flex; align-items: center; justify-content: center; padding: 4px; overflow: hidden; flex-shrink: 0;
}
.sidebar-brand .mark img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-brand span { font-weight: 800; color: #fff; letter-spacing: -0.02em; }

.sidebar-search {
    margin: 0 16px 16px; display: flex; align-items: center; gap: 8px;
    background: var(--panel-soft); border: 1px solid var(--line); border-radius: 12px;
    padding: 9px 12px; color: var(--muted-2);
}
.sidebar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-search:focus-within { border-color: var(--purple-2); }
.sidebar-search input {
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    color: var(--text); font-size: 12.5px; font-family: inherit; padding: 0;
}
.sidebar-search input::placeholder { color: var(--muted-2); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
    font-size: 14px; font-weight: 500; color: var(--muted); transition: all .15s ease;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted-2); }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
/* Indicador activo liviano: acento a la izquierda + fondo tenue, en vez de
   un bloque sólido de gradiente que compite con el resto del menú. */
.nav-item.active { background: rgba(124,58,237,.12); color: #fff; box-shadow: inset 3px 0 0 var(--primary); }
.nav-item.active svg { color: var(--primary-2); }

.nav-group + .nav-group { margin-top: var(--space-4); }
.nav-group-label {
    padding: 0 12px var(--space-2);
    font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted);
}

.sidebar-promo {
    margin: 16px 12px; padding: 16px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(192,38,211,.1));
    border: 1px solid rgba(124,58,237,.25); font-size: 12px; color: #cbd5e1; line-height: 1.5;
}
.sidebar-foot { padding: 16px 20px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted-2); }

.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    position: sticky; top: 0; z-index: 20; background: rgba(0,0,0,.9);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
    padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
}
.topbar .crumb { font-size: 12px; color: var(--muted-2); margin-bottom: 2px; }
.topbar .crumb span { color: #3f3550; margin: 0 4px; }
.topbar h1 { font-size: 18px; font-weight: 700; color: #fff; margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.topbar-title { min-width: 0; }
.topbar-title .crumb, .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Botón hamburguesa: solo visible en móvil/tablet (ver @media 900px) */
.menu-toggle-btn {
    display: none; width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    border: 1px solid var(--line); background: var(--panel-soft); color: var(--text);
    align-items: center; justify-content: center; transition: all .15s ease;
}
.menu-toggle-btn:hover { background: rgba(255,255,255,.08); }
.menu-toggle-btn:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; }
.menu-toggle-btn svg { width: 22px; height: 22px; }

/* Logo de marca en el header: solo visible en móvil/tablet (ver @media 900px),
   porque ahí el sidebar arranca cerrado y si no, no se vería el logo hasta
   abrir el menú. En escritorio el sidebar ya lo muestra siempre. */
.topbar-logo {
    display: none; width: 30px; height: 30px; border-radius: 9px; background: #fff;
    align-items: center; justify-content: center; padding: 3px; flex-shrink: 0; overflow: hidden;
}
.topbar-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Botón cerrar dentro del sidebar: solo visible en móvil/tablet */
.sidebar-close {
    display: none; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    border: none; background: rgba(255,255,255,.06); color: var(--muted);
    align-items: center; justify-content: center; margin-left: auto;
}
.sidebar-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-close:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; }
.sidebar-close svg { width: 18px; height: 18px; }

/* Overlay del drawer: solo puede volverse visible dentro del @media 900px */
.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 45;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease;
}

.icon-btn {
    width: 36px; height: 36px; border-radius: 999px; border: none; background: none;
    color: var(--muted); display: flex; align-items: center; justify-content: center; position: relative;
    transition: all .15s ease;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 999px; background: var(--purple-2); }

.divider-v { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }

.user-block { text-align: right; }
.user-block .name { font-size: 13.5px; font-weight: 600; color: #fff; }
.user-block .role { font-size: 11.5px; color: var(--muted-2); text-transform: capitalize; }

.avatar {
    width: 36px; height: 36px; border-radius: 999px; background: var(--grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
    box-shadow: 0 8px 20px rgba(124,58,237,.35);
}
.logout-btn { color: var(--muted); }
.logout-btn:hover { background: rgba(239,68,68,.1); color: #f87171; }

.main { flex: 1; padding: 24px; }

.flash { margin-bottom: 18px; padding: 12px 16px; border-radius: var(--radius-lg); font-size: var(--fs-body); border: 1px solid; }
.flash-success { background: var(--success-bg); border-color: rgba(16,185,129,.3); color: var(--success-text); }
.flash-error { background: var(--danger-bg); border-color: rgba(239,68,68,.3); color: var(--danger-text); }
.flash-warning { background: var(--warning-bg); border-color: rgba(245,158,11,.3); color: var(--warning-text); }
.flash-info { background: var(--info-bg); border-color: rgba(59,130,246,.3); color: var(--info-text); }

/* Cards & grid */
/* Separación por defecto arriba de cada panel — antes dependía de que cada
   página se acordara de agregar style="margin-top:16px" a mano (algunas lo
   tenían, otras no, por eso algunas cajas quedaban pegadas y otras no). */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-top: var(--space-4); }
/* Cuando el panel es columna de un grid de 2 (gráficos/paneles lado a lado),
   el espacio de arriba lo pone el elemento anterior al grid completo, no
   cada columna por separado — si no, se duplicaría o se desalinearían. */
.grid-2col > .panel, .grid-2col-even > .panel, .ap-detail-grid > .panel { margin-top: 0; }

/* Clase base de tarjeta: sombra/borde/hover consistentes para que
   .stat-card, .inv-card, .apartado-card, etc. puedan heredarla en las
   próximas fases sin redefinir su propio tratamiento de hover cada vez. */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-hover:hover { transform: translateY(-3px); border-color: rgba(192,132,252,.35); box-shadow: var(--shadow-lg); }

/* ---------------- Modales / drawers (base del sistema, aún sin usar en
   ninguna pantalla — queda lista para reemplazar los confirm() nativos
   en fases posteriores). ---------------- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 90;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease;
}
.modal-backdrop.show { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
    width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: var(--space-6);
    transform: translateY(12px); transition: transform .2s ease;
}
.modal-backdrop.show .modal { transform: translateY(0); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.modal-title { font-size: var(--fs-h2); font-weight: 700; color: #fff; margin: 0; }
.modal-subtitle { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 4px; }
.modal-body { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
@media (max-width: 480px) {
    .modal-footer { flex-direction: column-reverse; }
    .modal-footer .btn { width: 100%; justify-content: center; }
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-card { border-radius: var(--radius); padding: 20px; border: 1px solid var(--line); background: var(--panel); }
.stat-card.featured { background: linear-gradient(135deg, var(--purple), var(--fuchsia)); border-color: rgba(216,180,254,.3); box-shadow: 0 20px 45px -10px rgba(88,28,135,.5); }

/* KPI principal del dashboard (Ventas del periodo): un solo elemento con
   más peso visual que el resto — responde "¿cuánto vendí?" de un vistazo,
   antes de competir con las demás cifras. */
.stat-hero {
    background: var(--gradient-brand); border: 1px solid rgba(216,180,254,.3);
    border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6);
    box-shadow: var(--shadow-lg); margin-bottom: var(--space-4);
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
}
.stat-hero .stat-sub { color: rgba(255,255,255,.75); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-hero-value { font-size: var(--fs-display); font-weight: 800; color: #fff; margin-top: 6px; letter-spacing: -0.01em; line-height: 1.1; }
.stat-hero .stat-label { color: rgba(255,255,255,.85); margin-top: 6px; font-size: var(--fs-body); }
@media (max-width: 480px) { .stat-hero-value { font-size: 24px; } }

/* Variante de estado para KPIs que necesitan atención (p. ej. stock crítico
   con al menos un caso) — mismo tamaño que el resto, distinto de color. */
.stat-card-alert { border-color: rgba(245,158,11,.35); }
.stat-card-alert .stat-value { color: var(--warning-text); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.stat-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 20px; height: 20px; color: var(--purple-2); }
.stat-card.featured .stat-icon { background: rgba(255,255,255,.2); }
.stat-card.featured .stat-icon svg { color: #fff; }
.stat-sub { font-size: 11.5px; color: var(--muted-2); margin-bottom: 4px; }
.stat-card.featured .stat-sub { color: rgba(255,255,255,.7); }
.stat-value { font-size: 26px; font-weight: 800; color: #fff; }
.stat-label { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.stat-card.featured .stat-label { color: rgba(255,255,255,.85); }
.dots-btn { background: none; border: none; color: var(--muted-2); }
.stat-card.featured .dots-btn { color: rgba(255,255,255,.6); }

.grid-2col { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-top: var(--space-4); margin-bottom: 16px; }
/* Igual que .grid-2col pero mitad y mitad — para pares de paneles con el
   mismo peso (p. ej. los dos gráficos diarios del dashboard). Usar .grid-2col
   (1fr/2fr) solo cuando un lado es intencionalmente más angosto. */
.grid-2col-even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: var(--space-4); margin-bottom: 16px; }

.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-head h2 { font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
.panel-head .value { font-size: 24px; font-weight: 800; color: #fff; margin-top: 4px; }
.pill-btn { font-size: 11.5px; background: rgba(255,255,255,.06); color: #d8b4fe; border: none; padding: 6px 14px; border-radius: 999px; }
.pill-btn.active { background: var(--grad); color: #fff; }
.pill-row { display: flex; gap: 8px; }

.alert-list { display: flex; flex-direction: column; gap: 10px; }
.alert-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.skeleton-box { border-radius: 8px; background: rgba(255,255,255,.06); flex-shrink: 0; }
.skeleton-line { border-radius: 999px; background: rgba(255,255,255,.08); }

.bars { display: flex; align-items: flex-end; gap: 12px; height: 176px; }
.bar { flex: 1; border-radius: 8px 8px 0 0; background: rgba(255,255,255,.06); }
.bar.hi { background: linear-gradient(180deg, #c084fc, var(--purple)); }
.bar-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); margin-top: 10px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.data-table tr:last-child td { border-bottom: none; }
.text-right { text-align: right; }

/* ---------------- Inventario / formularios ---------------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.search-input-wrap { position: relative; flex: 1; min-width: 220px; }
.search-input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted-2); }
.search-input {
    width: 100%; padding: 11px 14px 11px 40px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--panel-soft); color: #fff; font-size: 13.5px; outline: none; transition: all .15s;
}
.search-input::placeholder { color: var(--muted-2); }
.search-input:focus { border-color: var(--purple-2); background: rgba(255,255,255,.05); }

.select {
    padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-soft);
    color: #fff; font-size: 13.5px; outline: none; min-width: 160px;
}
.select:focus { border-color: var(--purple-2); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 12px; border: none; font-size: 13.5px; font-weight: 600; transition: all .15s; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 24px rgba(124,58,237,.35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(124,58,237,.45); }
.btn-ghost { background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line); }
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.06); }
.btn-danger { background: var(--danger-bg); color: var(--danger-text); border: 1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.2); }
.btn-success { background: var(--success-bg); color: var(--success-text); border: 1px solid rgba(16,185,129,.3); }
.btn-success:hover { background: rgba(16,185,129,.2); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }

/* Sistema de badges: cubre todos los estados nombrados del proyecto
   (Activo/Inactivo/Bajo stock/Agotado/Pendiente/Vencido/Completada/Anulada),
   todos derivados de los mismos 4 tokens semánticos de estado. */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; }
.badge-on { background: var(--success-bg); color: var(--success-text); }
.badge-off { background: rgba(148,163,184,.12); color: var(--text-secondary); }
.badge-low { background: var(--warning-bg); color: var(--warning-text); }
.badge-empty { background: rgba(148,163,184,.12); color: var(--text-secondary); }
.badge-pending { background: var(--info-bg); color: var(--info-text); }
.badge-expired { background: var(--danger-bg); color: var(--danger-text); }
.badge-completed { background: var(--success-bg); color: var(--success-text); }

.table-wrap { overflow-x: auto; }

/* Tablas que se convierten en tarjetas apiladas en móvil (agregar la clase
   "mobile-cards" a la tabla + data-label="..." en cada <td>). Se usa solo en
   las listas de uso más frecuente con pocas columnas (Clientes, Usuarios,
   Gastos, Historial de ventas); las tablas analíticas o con muchas columnas
   (Reportes, Permisos) se dejan con scroll horizontal controlado, que es lo
   apropiado cuando hay muchos campos a la vez. */
@media (max-width: 900px) {
    .data-table.mobile-cards thead { display: none; }
    .data-table.mobile-cards, .data-table.mobile-cards tbody,
    .data-table.mobile-cards tr, .data-table.mobile-cards td { display: block; width: 100%; }
    .data-table.mobile-cards tr {
        background: var(--panel-soft); border: 1px solid var(--line); border-radius: 14px;
        padding: 4px 14px; margin-bottom: 10px;
    }
    .data-table.mobile-cards td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 9px 0; border-bottom: 1px solid var(--line); text-align: right;
    }
    .data-table.mobile-cards tr td:last-child { border-bottom: none; }
    .data-table.mobile-cards td::before {
        content: attr(data-label); font-size: 11.5px; font-weight: 600; color: var(--muted-2);
        text-align: left; flex-shrink: 0; margin-right: 12px;
    }
    .data-table.mobile-cards td.no-label::before { content: none; }
    .data-table.mobile-cards .row-actions { justify-content: flex-end; flex-wrap: wrap; }
}
.thumb { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,.05); flex-shrink: 0; }
.prod-cell { display: flex; align-items: center; gap: 12px; }
.prod-cell .name { color: #fff; font-weight: 600; }
.prod-cell .code { color: var(--muted-2); font-size: 11.5px; }

.icon-action { width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--panel-soft); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.icon-action svg { width: 16px; height: 16px; }
.icon-action:hover { background: rgba(255,255,255,.08); color: #fff; }
.icon-action.danger:hover { background: rgba(239,68,68,.15); color: #fca5a5; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.empty-state { text-align: center; padding: 50px 20px; color: var(--muted-2); }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .5; }

.pagetop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tab { padding: 11px 4px; margin-right: 22px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none; }
.tab.active { color: #fff; border-bottom-color: var(--purple-2); }
.tab:disabled { color: #3f3550; cursor: not-allowed; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid .col-span-2 { grid-column: span 2; }
.form-group label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.form-control {
    width: 100%; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--line);
    background: var(--panel-soft); color: #fff; font-size: 13.5px; outline: none; font-family: inherit; transition: all .15s;
}
.form-control:focus { border-color: var(--purple-2); background: rgba(255,255,255,.05); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-hint { font-size: 11.5px; color: var(--muted-2); margin-top: 4px; }

.img-upload { display: flex; align-items: center; gap: 16px; }
.img-preview {
    width: 84px; height: 84px; border-radius: 16px; object-fit: cover; background: rgba(255,255,255,.05);
    border: 1px solid var(--line); flex-shrink: 0;
}

.variant-toolbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 18px; }
.variant-toolbar .form-group { flex: 1; min-width: 100px; margin-bottom: 0; }

.field-error { color: #fca5a5; font-size: 12px; margin-top: 8px; }

/* Formularios largos en secciones tituladas (Información básica / Precios /
   Variantes / etc.) — separa grupos de campos con un título + ayuda opcional
   en vez de un solo bloque de inputs sin jerarquía. */
.form-section + .form-section { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.form-section-head { margin-bottom: var(--space-4); }
.form-section-head h3 { font-size: var(--fs-h3); font-weight: 700; color: #fff; margin: 0; }
.form-section-head p { font-size: var(--fs-small); color: var(--text-secondary); margin: 4px 0 0; }

@media (max-width: 900px) {
    /* El sidebar pasa a ser un drawer fijo que entra desde la izquierda,
       en vez de desaparecer sin forma de volver a abrirlo. */
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 50;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.5);
    }
    .sidebar.open { transform: translateX(0); }
    .menu-toggle-btn { display: inline-flex; }
    .topbar-logo { display: flex; }
    .sidebar-close { display: flex; }
    .sidebar-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

    /* Área de toque más cómoda para dedo en el menú */
    .nav-item { padding: 13px 14px; font-size: 15px; }

    .topbar { padding: 14px 16px; gap: 10px; }

    /* Tablet: dos tarjetas por fila en los KPIs del dashboard/inventario. */
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2col, .grid-2col-even { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .col-span-2 { grid-column: span 1; }

    /* Toolbars de búsqueda/filtro: apiladas y a todo el ancho, más fáciles
       de tocar que varios campos angostos en una sola fila. */
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar > * { width: 100%; }

    /* Botones de acción más grandes para dedo (editar/eliminar en tarjetas). */
    .icon-action { width: 40px; height: 40px; }
    .icon-action svg { width: 18px; height: 18px; }
    .btn-sm { padding: 10px 14px; font-size: 13px; }
}

/* Tablets en horizontal (900-1194px aprox: iPad landscape, iPad Pro, etc.)
   quedan por encima del breakpoint de 900px de arriba y antes recibían el
   mismo tamaño de botón que un mouse en escritorio, aunque siguen siendo
   pantalla táctil. Esta regla no depende del ancho sino de si el dispositivo
   es táctil (sin hover, puntero impreciso), así que aplica en cualquier
   tablet sin importar su orientación, sin afectar laptops/desktop con mouse. */
@media (hover: none) and (pointer: coarse) {
    .icon-action { width: 40px; height: 40px; }
    .icon-action svg { width: 18px; height: 18px; }
    .btn-sm { padding: 10px 14px; font-size: 13px; }
    .nav-item { padding: 13px 14px; }
    .pill-tab, .pill-btn { padding: 9px 16px; }
}

@media (max-width: 560px) {
    /* Celular: una sola columna para que los montos ("$1.234.567") no
       queden apretados. */
    .stat-grid { grid-template-columns: 1fr; }

    /* Los 5 métodos de pago en una sola fila quedaban demasiado angostos
       en celulares chicos (el ícono casi no dejaba espacio para la
       etiqueta). En 2 filas de ~3 cada botón tiene espacio real. */
    .pay-methods { flex-wrap: wrap; }
    .pay-method { flex: 1 1 30%; }
}

@media (max-width: 480px) {
    /* En celulares muy angostos, el nombre/rol y el separador ceden el
       espacio a los botones de acción — el avatar sigue identificando
       a la persona. */
    .user-block, .divider-v { display: none; }
    .topbar h1 { font-size: 16px; }
}

/* ---------------- Ventas ---------------- */
.venta-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.venta-cart { position: sticky; top: 84px; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.product-card { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s ease, transform .15s ease; }
.product-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; background: rgba(255,255,255,.04); }
.product-name { color: #fff; font-weight: 600; font-size: 13.5px; }
.product-price { color: var(--muted); font-size: 12px; margin-top: 2px; }
.qty-row input { width: 70px; flex-shrink: 0; }

.cart-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cart-item:last-child { border-bottom: none; }
.cart-item-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,.05); flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 13px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-meta { font-size: 11.5px; color: var(--muted-2); }
.cart-item-price { font-size: 12.5px; color: #fff; font-weight: 600; white-space: nowrap; }
.cart-remove { background: none; border: none; color: var(--muted-2); font-size: 18px; line-height: 1; padding: 0 2px; }
.cart-remove:hover { color: #f87171; }

.cart-totals { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.cart-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.cart-row.cart-total { font-size: 16px; font-weight: 800; color: #fff; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }

@media (max-width: 1100px) {
    .venta-layout { grid-template-columns: 1fr; }
    .venta-cart { position: static; }
}

/* Barra flotante del carrito en móvil/tablet: el carrito real sigue siendo
   la fuente de verdad (mismo HTML, mismos totales), esto es solo un acceso
   rápido para no tener que bajar todo el catálogo para llegar al total. */
.mobile-cart-bar {
    display: none; width: 100%; font-family: inherit; text-align: left; cursor: pointer;
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 480px;
    margin: 0 auto; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--grad); color: #fff; border: none; border-radius: 16px;
    padding: 14px 18px; font-size: 13.5px; font-weight: 700;
    box-shadow: 0 12px 30px -8px rgba(88,28,135,.6);
}
.mobile-cart-bar .mobile-cart-cta { font-weight: 800; white-space: nowrap; }
.mobile-cart-bar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Nunca debe poder aparecer en escritorio, aunque el JS quede en un estado
   raro — ahí el carrito sticky ya está siempre visible al lado. */
@media (min-width: 1101px) {
    .mobile-cart-bar { display: none !important; }
}

.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }

/* ---------------- Fix: <select> nativo se veía blanco al desplegar ---------------- */
select.form-control, select.select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
    padding-right: 34px;
}
select.form-control option, select.select option {
    background: #1a1626; color: #f1f5f9; padding: 8px;
}
select.form-control option:disabled, select.select option:disabled { color: #4b4160; }

/* ---------------- Ventas: mejoras de diseño ---------------- */
.venta-toolbar-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.venta-toolbar-row .count-pill { font-size: 12px; color: var(--muted-2); background: var(--panel-soft); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; }

.product-card:hover { border-color: rgba(192,132,252,.35); }
.product-card.out-of-stock { opacity: .5; }
.product-card .stock-flag { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; display: inline-block; margin-top: 2px; }
.product-card .stock-flag.low { background: rgba(245,158,11,.15); color: #fbbf24; }
.product-card .stock-flag.out { background: rgba(148,163,184,.15); color: #94a3b8; }

.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--panel-soft); flex-shrink: 0; }
.stepper button { width: 30px; height: 36px; background: none; border: none; color: var(--muted); font-size: 16px; font-weight: 700; }
.stepper button:hover { background: rgba(255,255,255,.06); color: #fff; }
.stepper input[type="number"] {
    width: 40px; height: 36px; text-align: center; border: none; background: transparent; color: #fff;
    font-size: 13.5px; padding: 0; -webkit-appearance: none; -moz-appearance: textfield; appearance: none;
}
.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; background: rgba(255,255,255,.04); }

.cart-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cart-count { font-size: 11.5px; background: var(--grad); color: #fff; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.cart-clear { font-size: 11.5px; color: var(--muted-2); background: none; border: none; }
.cart-clear:hover { color: #f87171; }
.cart-item-stepper { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.cart-item-stepper button { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--muted); font-size: 12px; line-height: 1; }
.cart-item-stepper button:hover { color: #fff; }
.cart-item-stepper span { font-size: 12px; color: var(--muted); min-width: 16px; text-align: center; }

/* ---------------- Métodos de pago (botones en vez de <select>) ---------------- */
.pay-methods { display: flex; gap: 7px; }
.pay-method {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
    border: 1px solid var(--line); background: var(--panel-soft); border-radius: 16px;
    padding: 10px 2px 9px; color: var(--muted-2); text-align: center; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.pay-method .pm-icon {
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--pm-tint, rgba(255,255,255,.06)); color: var(--pm-color, var(--muted));
    transition: all .15s ease;
}
.pay-method .pm-icon svg { width: 16px; height: 16px; }
.pay-method .pm-label { font-size: 9.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.pay-method:hover { transform: translateY(-1px); border-color: var(--pm-color, rgba(192,132,252,.4)); }
.pay-method.active {
    background: linear-gradient(160deg, var(--pm-color, var(--purple)), var(--pm-color-2, var(--fuchsia)));
    border-color: transparent; color: #fff;
    box-shadow: 0 10px 24px -6px var(--pm-shadow, rgba(124,58,237,.55));
}
.pay-method.active .pm-icon { background: rgba(255,255,255,.22); color: #fff; }

/* Paleta por método de pago — reutilizable en botones, filas de ventas, etc. */
[data-metodo="efectivo"]     { --pm-color: #10b981; --pm-color-2: #047857; --pm-tint: rgba(16,185,129,.13); --pm-shadow: rgba(16,185,129,.5); }
[data-metodo="nequi"]        { --pm-color: #d946ef; --pm-color-2: #a21caf; --pm-tint: rgba(217,70,239,.13); --pm-shadow: rgba(217,70,239,.5); }
[data-metodo="daviplata"]    { --pm-color: #ef4444; --pm-color-2: #b91c1c; --pm-tint: rgba(239,68,68,.13); --pm-shadow: rgba(239,68,68,.5); }
[data-metodo="transferencia"]{ --pm-color: #3b82f6; --pm-color-2: #1d4ed8; --pm-tint: rgba(59,130,246,.13); --pm-shadow: rgba(59,130,246,.5); }
[data-metodo="tarjeta"]      { --pm-color: #7c3aed; --pm-color-2: #5b21b6; --pm-tint: rgba(124,58,237,.13); --pm-shadow: rgba(124,58,237,.5); }

/* ---------------- Fila de venta (lista "Ventas de hoy") ---------------- */
.today-sales { display: flex; flex-direction: column; gap: 8px; }
.tsr { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--panel-soft); border: 1px solid var(--line); transition: border-color .15s ease; }
.tsr:hover { border-color: rgba(255,255,255,.16); }
.tsr-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pm-tint); color: var(--pm-color); flex-shrink: 0; }
.tsr-icon svg { width: 15px; height: 15px; }
.tsr-info { flex: 1; min-width: 0; }
.tsr-folio { font-size: 13px; font-weight: 700; color: #fff; }
.tsr-meta { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.tsr-total { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; margin-right: 4px; }
.tsr-actions { display: flex; gap: 6px; flex-shrink: 0; }

.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--success); color: #fff; padding: 10px 20px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.badge-cancel { background: var(--danger-bg); color: var(--danger-text); }

/* ---------------- Inventario: tarjetas de producto ---------------- */
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 16px; }

.inv-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
    display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.inv-card:hover { transform: translateY(-3px); border-color: rgba(192,132,252,.35); box-shadow: 0 18px 40px -14px rgba(124,58,237,.4); }
.inv-card.is-inactive { opacity: .55; }

.inv-card-media {
    position: relative; height: 160px; overflow: hidden;
    background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(255,255,255,.02));
}
.inv-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-card-media .no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted-2); }
.inv-card-media .no-img svg { width: 34px; height: 34px; opacity: .5; }
.inv-card-status { position: absolute; top: 10px; right: 10px; backdrop-filter: blur(6px); }

.inv-card-zoom-btn {
    position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: var(--radius-pill);
    border: none; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); color: #fff;
    display: flex; align-items: center; justify-content: center; opacity: .9; transition: all .15s ease; z-index: 2;
}
.inv-card-zoom-btn svg { width: 15px; height: 15px; }
.inv-card-zoom-btn:hover { background: rgba(0,0,0,.65); opacity: 1; transform: scale(1.07); }

.inv-card-body { padding: 14px 16px 4px; flex: 1; }
.inv-card-cat {
    display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #e2b8fb; background: rgba(124,58,237,.15); padding: 3px 9px 3px 7px; border-radius: 999px;
    margin-bottom: 9px;
}
.inv-card-cat svg { width: 11px; height: 11px; }
.inv-card-name { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 2px; }
.inv-card-sub { font-size: 11.5px; color: var(--muted-2); margin-bottom: 13px; min-height: 14px; }
.inv-card-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.inv-card-price { font-size: 17px; font-weight: 800; color: #fff; }
.inv-card-stock { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.inv-card-stock svg { width: 13px; height: 13px; }

.inv-card-actions { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.inv-card-actions .btn { flex: 1; }

/* ---------------- Genéricos: back-link, count-pill, pill-tabs ---------------- */
.back-link {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted);
    transition: color .15s ease; margin-bottom: 6px;
}
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { color: #fff; }

.count-pill {
    display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted);
    background: var(--panel-soft); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px;
}

.pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; }
.pill-tab {
    font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--panel-soft);
    border: 1px solid var(--line); padding: 7px 15px; border-radius: 999px; transition: all .15s ease;
}
.pill-tab:hover { color: #fff; border-color: rgba(255,255,255,.18); }
.pill-tab.active { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 8px 20px -8px rgba(124,58,237,.6); }

/* ---------------- Variantes de color para stat-icon ---------------- */
.stat-icon-violet { background: rgba(124,58,237,.14); }
.stat-icon-violet svg { color: var(--purple-2); }
.stat-icon-danger { background: rgba(239,68,68,.14); }
.stat-icon-danger svg { color: #ef4444; }
.stat-icon-success { background: rgba(16,185,129,.14); }
.stat-icon-success svg { color: #10b981; }

/* ---------------- Ventas/Apartados: buscador de producto (variant picker) ---------------- */
.variant-picker { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-row .btn { flex: 1; }

/* ---------------- Apartados: tarjetas ---------------- */
.apartados-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 6px; }

.apartado-card {
    display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.apartado-card:hover { transform: translateY(-3px); border-color: rgba(192,132,252,.35); box-shadow: 0 18px 40px -14px rgba(124,58,237,.4); }
.apartado-card.estado-vencido { border-color: rgba(239,68,68,.35); }
.apartado-card.estado-completado { opacity: .75; }
.apartado-card.estado-cancelado { opacity: .55; }

.ap-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ap-cliente { font-size: 15px; font-weight: 700; color: #fff; }
.ap-tel { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }

.ap-badge {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.ap-badge-activo { background: rgba(124,58,237,.16); color: #d8b4fe; }
.ap-badge-vencido { background: rgba(239,68,68,.16); color: #fca5a5; }
.ap-badge-completado { background: rgba(16,185,129,.16); color: #6ee7b7; }
.ap-badge-cancelado { background: rgba(255,255,255,.08); color: var(--muted); }

.ap-items { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

.ap-progress { margin-bottom: 14px; }
.ap-progress-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.ap-progress-fill { height: 100%; border-radius: 999px; background: var(--grad); transition: width .2s ease; }
.ap-progress-label { font-size: 10.5px; color: var(--muted-2); margin-top: 5px; font-weight: 600; }

.ap-money-row { display: flex; justify-content: space-between; margin-bottom: 14px; }
.ap-money-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); margin-bottom: 2px; }
.ap-money-value { font-size: 15px; font-weight: 800; color: #fff; }
.ap-saldo { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ap-footer {
    display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted-2); font-weight: 600;
    border-top: 1px solid var(--line); padding-top: 12px;
}
.ap-footer svg { flex-shrink: 0; }
.ap-footer-danger { color: #fca5a5; }
.ap-soon { color: #fbbf24; margin-left: 2px; }

/* ---------------- Apartado detalle ---------------- */
.ap-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; margin-top: 16px; }
@media (max-width: 900px) { .ap-detail-grid { grid-template-columns: 1fr; } }

.ap-detail-items { display: flex; flex-direction: column; gap: 10px; }
.ap-detail-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
    background: var(--panel-soft); border: 1px solid var(--line);
}
.ap-detail-item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,.05); flex-shrink: 0; }
.ap-detail-item-info { flex: 1; min-width: 0; }
.ap-detail-item-name { font-size: 13.5px; font-weight: 700; color: #fff; }
.ap-detail-item-meta { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.ap-detail-item-price { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; }

.ap-summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding: 7px 0; }
.ap-summary-row.total { font-size: 16px; font-weight: 800; color: #fff; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; }
.ap-summary-row.saldo .amt { font-weight: 800; color: #fbbf24; }

.abonos-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.abono-row {
    display: flex; align-items: center; justify-content: space-between; padding: 9px 12px;
    border-radius: 12px; background: var(--panel-soft); border: 1px solid var(--line);
}
.abono-fecha { font-size: 11.5px; color: var(--muted-2); }
.abono-monto { font-size: 13px; font-weight: 700; color: #6ee7b7; }
.inv-card-actions form { display: contents; }

/* ---------------- Sistema: colores de marca y logo ---------------- */
.color-field {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 11px;
    border: 1px solid var(--line); background: var(--panel-soft);
}
input[type="color"] {
    -webkit-appearance: none; appearance: none; width: 40px; height: 40px; border: none; border-radius: 10px;
    background: none; cursor: pointer; padding: 0; flex-shrink: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 2px solid rgba(255,255,255,.15); border-radius: 10px; }
input[type="color"]::-moz-color-swatch { border: 2px solid rgba(255,255,255,.15); border-radius: 10px; }
.color-hex { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em; }

.theme-preview {
    display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; border-radius: 14px;
    background: var(--panel-soft); border: 1px solid var(--line);
}
.theme-preview-swatch { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; box-shadow: 0 10px 24px -10px rgba(124,58,237,.6); }
.theme-preview-title { font-size: 13px; font-weight: 700; color: #fff; }
.theme-preview-sub { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }

.logo-preview {
    display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: 16px;
    background: var(--panel-soft); border: 1px dashed var(--line);
}
.logo-preview img { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; background: #fff; padding: 8px; }

code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 6px; font-size: 12px; }

/* ---------------- Permisos: tabla CRUD ---------------- */
.text-center { text-align: center; }

.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; inset: 0; background: rgba(255,255,255,.12); border-radius: 999px; cursor: pointer; transition: background .18s ease;
}
.switch .slider::before {
    content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s ease;
}
.switch input:checked + .slider { background: var(--grad); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:disabled + .slider { opacity: .3; cursor: not-allowed; }

.permisos-table th { white-space: nowrap; }
.permisos-table td { vertical-align: middle; }
.permiso-nombre { font-size: 13.5px; font-weight: 700; color: #fff; }
.permiso-desc { font-size: 11px; color: var(--muted-2); margin-top: 2px; }

/* ---------------- Dashboard: KPIs, deltas y gráficos ---------------- */
.delta-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.delta-up { background: rgba(16,185,129,.12); color: #6ee7b7; }
.delta-down { background: rgba(239,68,68,.12); color: #fca5a5; }
.delta-flat { background: rgba(148,163,184,.12); color: #94a3b8; }

.chart-scroll { display: flex; align-items: flex-end; gap: 5px; height: 190px; overflow-x: auto; padding-bottom: 4px; }
.chart-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 24px; height: 100%; }
.chart-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.chart-bar { width: 100%; min-height: 3px; border-radius: 5px 5px 0 0; background: rgba(255,255,255,.07); }
.chart-bar.pos { background: linear-gradient(180deg, #c084fc, var(--purple)); }
.chart-bar.neg { background: linear-gradient(180deg, #fca5a5, #b91c1c); }
.chart-bar.hi { background: linear-gradient(180deg, #f0abfc, var(--fuchsia)); }
.chart-label { font-size: 9.5px; color: var(--muted-2); white-space: nowrap; }

.rank-row + .rank-row { margin-top: 14px; }
.rank-row-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.rank-row-head .name { color: #fff; font-weight: 600; }
.rank-row-head .meta { color: var(--muted-2); }
.rank-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.rank-fill { height: 100%; border-radius: 999px; background: var(--grad); }
.rank-fill.warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

.mini-stat-row { display: flex; flex-wrap: wrap; gap: 12px; }
.mini-stat { flex: 1; min-width: 150px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.mini-stat .mini-label { font-size: 11px; color: var(--muted-2); margin-bottom: 4px; }
.mini-stat .mini-value { font-size: 18px; font-weight: 800; color: #fff; }
.permiso-na { color: var(--muted-2); font-size: 14px; }

/* ---------------- Dashboard: gráficos de línea/área en SVG ---------------- */
.chart-grad-stop.chart-grad-brand-a { stop-color: var(--primary-2); stop-opacity: .35; }
.chart-grad-stop.chart-grad-brand-b { stop-color: var(--primary-2); stop-opacity: 0; }
.chart-grad-stop.chart-grad-success-a { stop-color: var(--success); stop-opacity: .32; }
.chart-grad-stop.chart-grad-success-b { stop-color: var(--success); stop-opacity: 0; }
.chart-grad-stop.chart-grad-danger-a { stop-color: var(--danger); stop-opacity: .32; }
.chart-grad-stop.chart-grad-danger-b { stop-color: var(--danger); stop-opacity: 0; }

.svg-chart-wrap { width: 100%; }
.svg-chart { width: 100%; height: 170px; display: block; overflow: visible; }
.svg-chart-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; }
.svg-chart-zero { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svg-chart-area { opacity: .9; }
.svg-chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svg-chart-line.brand { stroke: var(--primary-2); }
.svg-chart-line.pos { stroke: var(--success); }
.svg-chart-line.neg { stroke: var(--danger); }

.svg-chart-dot { fill: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; transition: r .12s ease; }
.svg-chart-dot.brand { stroke: var(--primary-2); }
.svg-chart-dot.pos { stroke: var(--success); }
.svg-chart-dot.neg { stroke: var(--danger); }
.svg-chart-dot.is-neg { stroke: var(--danger); }
.svg-chart-dot:hover { r: 6; }
.svg-chart-dot.is-last { fill: currentColor; stroke: var(--surface); }
.svg-chart-dot.is-last.brand { color: var(--primary-2); }
.svg-chart-dot.is-last.pos { color: var(--success); }
.svg-chart-dot.is-last.neg { color: var(--danger); }
.svg-chart-dot.is-last.is-neg { color: var(--danger); }

.svg-chart-axis { position: relative; height: 16px; margin-top: 8px; }
.svg-chart-axis-label { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; }
.svg-chart-axis-label:first-child { transform: translateX(0); }
.svg-chart-axis-label:last-child { transform: translateX(-100%); }

.chart-tooltip {
    position: fixed; z-index: 90; pointer-events: none;
    background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 10px; font-size: var(--fs-caption); font-weight: 600; color: #fff;
    box-shadow: var(--shadow-md); opacity: 0; transform: translate(-50%, -100%) translateY(-10px);
    transition: opacity .12s ease; white-space: nowrap;
}
.chart-tooltip.show { opacity: 1; }