/* ============================================================
   SAC 1.0 — Sistema visual institucional
   ============================================================
   Paleta: verde oliva + dorado (identidad Gendarmería Nacional /
   REGENDIEZ) en modo claro; navy + cian "consola" (ecosistema TICOM)
   en modo oscuro. Un solo archivo de tokens para que todas las
   páginas (login, panel, reportes, usuarios) se vean como el mismo
   sistema en vez de piezas sueltas.

   Cómo se activa el modo oscuro: cada página pone data-theme="dark"
   o data-theme="light" en <html> (automático por horario o manual
   con el botón del menú) — ver el <script> correspondiente en cada
   archivo. Acá solo se define qué significa cada token en cada caso.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ---- Marca: verde oliva institucional ---- */
    --sac-verde-950: #101d17;
    --sac-verde-900: #16261e;
    --sac-verde-800: #1e332a;
    --sac-verde-700: #2b4436;
    --sac-verde-600: #385643;
    --sac-verde-500: #4a6b53;
    --sac-verde-400: #6d8a73;

    /* ---- Marca: dorado institucional ---- */
    --sac-dorado-600: #a5762e;
    --sac-dorado-500: #b8863e;
    --sac-dorado-400: #cc9d4f;
    --sac-dorado-300: #e0bb72;

    /* ---- Semánticos ---- */
    --sac-ok-600: #157a4a;
    --sac-ok-500: #1c9257;
    --sac-ok-100: #e2f4e9;
    --sac-danger-600: #a6291f;
    --sac-danger-500: #c23a2c;
    --sac-danger-100: #fbe7e4;
    --sac-warn-600: #a5762e;
    --sac-warn-100: #f8ecd8;
    --sac-info-600: #2c5a86;

    /* ---- Tokens funcionales (MODO CLARO, por defecto) ---- */
    --bg: #f0f2ed;
    --bg-elevada: #f6f7f4;
    --superficie: #ffffff;
    --superficie-alt: #f4f5f1;
    --borde: #dfe3d8;
    --borde-fuerte: #c7cdbd;
    --texto: #1c2420;
    --texto-atenuado: #5c6659;
    --texto-invertido: #f7f8f5;

    --marca: var(--sac-verde-800);
    --marca-fuerte: var(--sac-verde-950);
    --marca-suave: var(--sac-verde-700);
    --marca-suave-hover: var(--sac-verde-600);
    --acento: var(--sac-dorado-500);
    --acento-fuerte: var(--sac-dorado-600);
    --anillo-foco: #2c5a86;

    --ok: var(--sac-ok-600);
    --ok-fondo: var(--sac-ok-100);
    --peligro: var(--sac-danger-600);
    --peligro-fondo: var(--sac-danger-100);
    --advertencia: var(--sac-warn-600);
    --advertencia-fondo: var(--sac-warn-100);

    --sombra-tarjeta: 0 1px 2px rgba(28,36,32,0.06), 0 1px 3px rgba(28,36,32,0.08);
    --sombra-flotante: 0 8px 24px rgba(16,29,23,0.18);
    --radio-sm: 6px;
    --radio-md: 10px;
    --radio-lg: 14px;

    --fuente-display: 'Lexend', 'Inter', system-ui, sans-serif;
    --fuente-cuerpo: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- Tokens funcionales (MODO OSCURO — consola navy/cian) ---- */
:root[data-theme="dark"] {
    --bg: #0a1526;
    --bg-elevada: #0c1a30;
    --superficie: #101f38;
    --superficie-alt: #0d1a30;
    --borde: rgba(148, 197, 255, 0.14);
    --borde-fuerte: rgba(148, 197, 255, 0.28);
    --texto: #e7ecf3;
    --texto-atenuado: #93a4be;
    --texto-invertido: #06101f;

    --marca: #0a1626;
    --marca-fuerte: #050d18;
    --marca-suave: #0891b2;
    --marca-suave-hover: #0aa5c9;
    --acento: #e8b84b;
    --acento-fuerte: #f2c766;
    --anillo-foco: #22d3ee;

    --ok: #34c77b;
    --ok-fondo: rgba(52, 199, 123, 0.14);
    --peligro: #f0554a;
    --peligro-fondo: rgba(240, 85, 74, 0.14);
    --advertencia: #e8b84b;
    --advertencia-fondo: rgba(232, 184, 75, 0.14);

    --sombra-tarjeta: 0 1px 2px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.35);
    --sombra-flotante: 0 10px 30px rgba(0,0,0,0.5);
}

/* ============================================================
   Base
   ============================================================ */
html, body { background-color: var(--bg); }
body {
    font-family: var(--fuente-cuerpo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .fuente-display { font-family: var(--fuente-display); }
.fuente-cuerpo { font-family: var(--fuente-cuerpo); }

a, button, [role="button"], input[type="submit"], .clicable { cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--anillo-foco);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background-color: var(--acento); color: var(--marca-fuerte); }

/* ============================================================
   Encabezado institucional
   ============================================================ */
.sac-header {
    background: linear-gradient(155deg, var(--marca-fuerte) 0%, var(--marca) 65%);
    color: var(--texto-invertido);
    border-bottom: 3px solid var(--acento);
}
.sac-header .sac-titulo {
    font-family: var(--fuente-display);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fdf6e8;
}
.sac-header .sac-subtitulo {
    font-family: var(--fuente-cuerpo);
    color: rgba(253, 246, 232, 0.65);
    font-weight: 500;
}
.sac-header .sac-institucion {
    color: var(--acento);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radio-sm);
    padding: 9px 16px;
    border: 1px solid transparent;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }

.btn-primario { background-color: var(--marca-suave); color: #fdf6e8; }
.btn-primario:hover { background-color: var(--marca-suave-hover); }

.btn-dorado { background-color: var(--acento); color: var(--marca-fuerte); }
.btn-dorado:hover { background-color: var(--acento-fuerte); }

.btn-ok { background-color: var(--ok); color: #fff; }
.btn-ok:hover { filter: brightness(1.08); }

.btn-peligro { background-color: var(--peligro); color: #fff; }
.btn-peligro:hover { filter: brightness(1.08); }

.btn-ghost {
    background-color: var(--superficie-alt);
    color: var(--texto);
    border-color: var(--borde);
}
.btn-ghost:hover { background-color: var(--borde); }

.btn-suave-ok { background-color: var(--ok-fondo); color: var(--ok); }
.btn-suave-ok:hover { filter: brightness(0.97); }
.btn-suave-peligro { background-color: var(--peligro-fondo); color: var(--peligro); }
.btn-suave-peligro:hover { filter: brightness(0.97); }

.btn-icono {
    padding: 7px;
    border-radius: var(--radio-sm);
    background-color: var(--superficie-alt);
    color: var(--texto-atenuado);
    border: 1px solid var(--borde);
}
.btn-icono:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.btn-icono.peligro:hover { color: var(--peligro); border-color: var(--peligro); }
.btn-icono.dorado:hover { color: var(--acento-fuerte); border-color: var(--acento); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ============================================================
   Tarjetas, superficies, tablas
   ============================================================ */
.tarjeta {
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-tarjeta);
}

.tarjeta-stat { border-left: 3px solid var(--marca-suave); }
.tarjeta-stat.acento-ok { border-left-color: var(--ok); }
.tarjeta-stat.acento-peligro { border-left-color: var(--peligro); }
.tarjeta-stat.acento-dorado { border-left-color: var(--acento); }

.sac-input, .sac-select {
    background-color: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    color: var(--texto);
    border-radius: var(--radio-sm);
    padding: 8px 10px;
    font-size: 0.85rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.sac-input::placeholder { color: var(--texto-atenuado); }
.sac-input:focus, .sac-select:focus {
    outline: none;
    border-color: var(--anillo-foco);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--anillo-foco) 25%, transparent);
}

/* Campo de contraseña con botón de "mostrar/ocultar" (el ojo) */
.campo-password { position: relative; }
.campo-password .sac-input { padding-right: 38px; }
.btn-alternar-clave {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--texto-atenuado);
    cursor: pointer;
    border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}
.btn-alternar-clave:hover { color: var(--texto); }
.btn-alternar-clave:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--anillo-foco);
}
.btn-alternar-clave .icono-ojo-cerrado { display: none; }
.btn-alternar-clave[aria-pressed="true"] .icono-ojo { display: none; }
.btn-alternar-clave[aria-pressed="true"] .icono-ojo-cerrado { display: block; }

table.sac-tabla { width: 100%; border-collapse: collapse; }
table.sac-tabla th {
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-atenuado);
    border-bottom: 1px solid var(--borde-fuerte);
    padding: 8px 6px;
}
table.sac-tabla td { padding: 8px 6px; border-bottom: 1px solid var(--borde); font-size: 0.8rem; }
table.sac-tabla tbody tr:hover { background-color: var(--superficie-alt); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.chip-ok { background-color: var(--ok-fondo); color: var(--ok); }
.chip-peligro { background-color: var(--peligro-fondo); color: var(--peligro); }
.chip-neutro { background-color: var(--superficie-alt); color: var(--texto-atenuado); border: 1px solid var(--borde); }

.barra-progreso { background-color: var(--borde); border-radius: 999px; overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; border-radius: 999px; background-color: var(--marca-suave); transition: width 300ms ease, background-color 200ms ease; }
.barra-progreso > span.alto { background-color: var(--peligro); }

/* ============================================================
   Texto atenuado / utilidades puntuales
   ============================================================ */
.texto-atenuado { color: var(--texto-atenuado); }
.texto-marca { color: var(--marca); }
.texto-dorado { color: var(--acento-fuerte); }
.texto-ok { color: var(--ok); }
.texto-peligro { color: var(--peligro); }
.superficie-alt { background-color: var(--superficie-alt); }
.borde-sac { border-color: var(--borde); }

/* Scrollbar discreta (Chromium/Edge) para listas internas */
.scroll-fina::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-fina::-webkit-scrollbar-thumb { background-color: var(--borde-fuerte); border-radius: 999px; }
.scroll-fina::-webkit-scrollbar-track { background-color: transparent; }

/* ============================================================
   Celular / uso táctil
   ============================================================
   El sistema se usa a la vera de la ruta, muchas veces desde el
   teléfono y con guantes o apuro: los controles necesitan más
   superficie de toque que en escritorio, sin agrandar tanto el
   diseño en pantallas grandes como para que se vea "inflado". */
a, button, [role="button"], .clicable {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Red de seguridad: un <canvas> de Chart.js nunca debería desbordar su
   tarjeta contenedora (los gráficos ya usan responsive:true +
   maintainAspectRatio:false), pero si la librería tarda en cargar en una
   conexión de celular lenta, esto evita que se vea un gráfico gigante
   empujando el layout mientras tanto. */
canvas { max-width: 100%; }

@media (max-width: 768px), (pointer: coarse) {
    .btn { padding: 11px 18px; min-height: 44px; font-size: 0.75rem; }
    .btn-icono { padding: 10px; min-width: 40px; min-height: 40px; }
    .sac-input, .sac-select {
        padding: 11px 12px;
        /* 16px evita que Safari/Chrome en iOS agranden la página
           solo por hacer foco en un campo con letra más chica. */
        font-size: 16px;
    }
    table.sac-tabla th, table.sac-tabla td { padding: 10px 6px; }
}