/* =====================================================================
   TEMA MACONDO (Tanda 5) — identidad visual de marca.
   Se carga DESPUÉS de app.css y remapea los tokens semánticos que los
   componentes ya consumen (--fondo, --tinta, --acento, --borde…), más
   overrides puntuales (nav navy, tablas, focus cyan, semáforo verde).
   Tema OSCURO de marca por defecto (:root) + variante CLARA ([data-theme="light"]).
   NO toca lógica, ids ni clases: solo presentación.
   ===================================================================== */

/* ------------------------------ Fuentes (self-hosted) ------------------------------ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;          /* archivo variable */
    font-display: swap;
    src: url('/assets/fonts/inter-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/bevietnampro-600.woff2') format('woff2');
}

/* ------------------------------ Paleta de marca (cruda) + fuentes ------------------------------ */
:root {
    --navy-900: #00132E;
    --navy-700: #00214F;
    --blue-500: #005AD9;
    --cyan-400: #00B4D8;
    --surface-50: #F6F9FC;
    --surface-white: #FFFFFF;
    --ink-900: #171717;
    --gray-700: #484848;
    --gray-300: #DBDBDB;
    --overlay-white: #FFFFFF2B;
    --white: #FFFFFF;

    --fuente-ui: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --fuente-titulo: 'Be Vietnam Pro', var(--fuente-ui);
    /* --fuente-mono se mantiene (IBM Plex Mono) para datos técnicos */
}

/* ------------------------------ TEMA OSCURO (default, navy de marca) ------------------------------ */
:root {
    --fondo: var(--navy-900);
    --fondo-panel: #042148;
    --fondo-alto: #08284F;
    --fondo-hover: #0B315E;
    --borde: rgba(255, 255, 255, .10);
    --borde-fuerte: rgba(255, 255, 255, .20);
    --tinta: #EAF1FB;
    --tinta-2: rgba(234, 241, 251, .72);
    --tinta-3: rgba(234, 241, 251, .50);

    --acento: #3B8DFF;
    --acento-fuerte: #5AA0FF;
    --acento-tinta: #00132E;
    --acento-tenue: rgba(59, 141, 255, .16);

    --cyan: var(--cyan-400);
    --cyan-tenue: rgba(0, 180, 216, .35);

    --verde: #3BD17F;
    --verde-tenue: rgba(59, 209, 127, .15);
    --ambar: #F0A33D;
    --ambar-tenue: rgba(240, 163, 61, .15);
    --rojo: #FF6B6B;
    --rojo-tenue: rgba(255, 107, 107, .15);
    --azul: #58A6FF;
    --azul-tenue: rgba(88, 166, 255, .15);

    --sombra: 0 16px 44px rgba(0, 0, 0, .5);
    --grilla: rgba(255, 255, 255, .04);

    /* Nav aún más oscuro que las superficies para diferenciarse */
    --nav-fondo: var(--navy-900);
    --nav-fondo-hover: rgba(255, 255, 255, .07);
    --nav-tinta: var(--white);
    --nav-tinta-2: rgba(255, 255, 255, .62);
    --nav-tinta-3: rgba(255, 255, 255, .40);
    --nav-borde: rgba(255, 255, 255, .12);
    --nav-activo-fondo: var(--blue-500);
    --nav-activo-tinta: var(--white);
}

/* ------------------------------ TEMA CLARO (variante de marca) ------------------------------ */
:root[data-theme="light"] {
    --fondo: var(--surface-50);
    --fondo-panel: var(--surface-white);
    --fondo-alto: var(--surface-white);
    --fondo-hover: #EDF2F9;
    --borde: var(--gray-300);
    --borde-fuerte: #C6CDD6;
    --tinta: var(--ink-900);
    --tinta-2: var(--gray-700);
    --tinta-3: #5E6A78;   /* gris muted con contraste AA sobre blanco */

    --acento: var(--blue-500);
    --acento-fuerte: #0048AD;
    --acento-tinta: var(--white);
    --acento-tenue: rgba(0, 90, 217, .10);

    --cyan: var(--cyan-400);
    --cyan-tenue: rgba(0, 180, 216, .28);

    --verde: #1E8E4E;
    --verde-tenue: rgba(30, 142, 78, .12);
    --ambar: #B45309;
    --ambar-tenue: rgba(180, 83, 9, .12);
    --rojo: #C43535;
    --rojo-tenue: rgba(196, 53, 53, .10);
    --azul: #1F6FB2;
    --azul-tenue: rgba(31, 111, 178, .10);

    --sombra: 0 10px 30px rgba(20, 40, 80, .10);
    --grilla: rgba(0, 33, 79, .05);

    /* Nav navy también en claro (no sigue el fondo claro general) */
    --nav-fondo: var(--navy-700);
    --nav-fondo-hover: rgba(255, 255, 255, .08);
    --nav-tinta: var(--white);
    --nav-tinta-2: rgba(255, 255, 255, .66);
    --nav-tinta-3: rgba(255, 255, 255, .42);
    --nav-borde: var(--overlay-white);
    --nav-activo-fondo: var(--blue-500);
    --nav-activo-tinta: var(--white);
}

/* ------------------------------ Tipografía ------------------------------ */
body { font-family: var(--fuente-ui); font-size: 16px; line-height: 1.5; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 600; line-height: 1.2; }
h1 { letter-spacing: -1px; }
h2 { letter-spacing: -.6px; }
.campo label { font-family: var(--fuente-ui); font-weight: 600; letter-spacing: .04em; }

/* ------------------------------ Navegación (sidebar + topbar) ------------------------------ */
.nav-lateral { background: var(--nav-fondo); border-right: 1px solid var(--nav-borde); }
.nav-cabecera { border-bottom: 1px solid var(--nav-borde); }
.nav-logo { color: var(--nav-tinta); }
.nav-logo b { color: var(--cyan); }
.nav-seccion { color: var(--nav-tinta-3); }
.nav-cuerpo a, .nav-item-prox { color: var(--nav-tinta-2); }
.nav-cuerpo a:hover { background: var(--nav-fondo-hover); color: var(--nav-tinta); }
.nav-cuerpo a.activo {
    background: var(--nav-activo-fondo);
    color: var(--nav-activo-tinta);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 90, 217, .4);
}
.nav-item-prox { color: var(--nav-tinta-3); }
.nav-pie { border-top: 1px solid var(--nav-borde); }
.nav-avatar { background: var(--blue-500); color: var(--white); }
.nav-usuario-datos .nombre { color: var(--nav-tinta); }
.nav-pie .boton-fantasma { color: var(--nav-tinta); border-color: var(--nav-borde); }
.nav-pie .boton-fantasma:hover { background: var(--nav-fondo-hover); }

.topbar {
    background: var(--nav-fondo);
    border-bottom: 1px solid var(--nav-borde);
    color: var(--nav-tinta);
}
.topbar h1 { color: var(--nav-tinta); }
.topbar .boton-icono { color: var(--nav-tinta); }
.topbar .boton-icono:hover { background: var(--nav-fondo-hover); }

/* ------------------------------ Cards / superficies ------------------------------ */
.tarjeta { box-shadow: var(--sombra); }

/* ------------------------------ Tablas de inventario ------------------------------ */
.tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--fondo-panel);
    color: var(--tinta-2);
}
.tabla tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .03); }
:root[data-theme="light"] .tabla tbody tr:nth-child(odd) td { background: rgba(0, 33, 79, .025); }
.tabla tbody tr:hover td { background: var(--fondo-hover); }

/* ------------------------------ Formularios: focus cyan ------------------------------ */
.campo input:focus, .campo select:focus, .campo textarea:focus,
.alta-inline input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-tenue);
}
.filtros input[type="search"]:focus, .filtros select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-tenue);
}

/* ------------------------------ Botones ------------------------------ */
.boton-primario { box-shadow: 0 2px 10px rgba(0, 90, 217, .25); }
.boton:focus-visible { outline-color: var(--cyan); }

/* ------------------------------ Semáforo / estados (verde funcional, no azul) ------------------------------ */
.led-verde { background: var(--verde); box-shadow: 0 0 6px var(--verde); }
.alerta-ok { color: var(--verde); border-color: var(--verde); background: var(--verde-tenue); }
.toast-ok { border-color: var(--verde); }
.chip-estado-activo { color: var(--verde); border-color: var(--verde); background: var(--verde-tenue); }
.chip-admin { color: var(--acento); border-color: var(--acento); background: var(--acento-tenue); }
.semaforo-verde .numero { color: var(--verde); }
.campo-check input { accent-color: var(--acento); }

/* ------------------------------ Dashboard (KPIs) ------------------------------ */
.kpi-numero { color: var(--acento); }
.kpi:hover { border-color: var(--cyan); box-shadow: var(--sombra); }