/* ============================================================================
   SKALRP · SISTEMA DE DISEÑO — tokens compartidos
   ----------------------------------------------------------------------------
   Un solo archivo controla el aspecto de TODOS los recursos SKALRP.
   Cambia los valores de :root y toda la suite cambia con ellos.

   Restricción de plataforma: el navegador de FiveM es Chromium 103.
   NO existen: backdrop-filter (útil), color-mix(), :has(), oklch(),
   container queries, dvh/svh/lvh, anidamiento CSS, subgrid,
   View Transitions ni text-wrap: balance. Todo lo de aquí SÍ funciona en 103.
   ========================================================================== */

/* ---------- Tipografía empaquetada (sin CDN → sin parpadeo al abrir) ---------- */
@font-face {
    font-family: 'SKAL UI';
    src: url('nui://skal_ui/fonts/inter.woff2') format('woff2');
    font-weight: 100 900;
    font-display: block;
}
@font-face {
    font-family: 'SKAL Num';
    src: url('nui://skal_ui/fonts/rajdhani.woff2') format('woff2');
    font-weight: 400 700;
    font-display: block;
}

:root {
    /* ======================= ACENTOS =======================
       DOS acentos, y la diferencia es SEMÁNTICA, no decorativa:
         · machine → superficies de máquina/vehículo (tablet, garaje, mecánico)
         · human   → superficies de persona/estado   (HUD, notificaciones, admin)
       Se guardan como triplete RGB para poder componer alfas
       (sustituto de color-mix(), que no existe en Chromium 103). */
    --skal-machine-rgb: 49, 224, 196;
    --skal-human-rgb:   74, 144, 217;

    /* El acento activo de cada recurso: se sobrescribe por recurso */
    --skal-accent-rgb: var(--skal-machine-rgb);
    --skal-accent: rgb(var(--skal-accent-rgb));

    /* Escala de tintes derivada del acento (una sola fuente de verdad) */
    --skal-accent-wash: rgba(var(--skal-accent-rgb), .10);
    --skal-accent-soft: rgba(var(--skal-accent-rgb), .16);
    --skal-accent-line: rgba(var(--skal-accent-rgb), .38);
    --skal-accent-glow: rgba(var(--skal-accent-rgb), .45);

    /* ======================= SUPERFICIES =======================
       Rampa neutra ligeramente CÁLIDA (referencia estética 2026).
       Nunca #000 puro: produce banding sobre el juego. */
    --skal-s0: #0f1113;   /* fondo profundo   */
    --skal-s1: #16191d;   /* panel            */
    --skal-s2: #1e2228;   /* tarjeta          */
    --skal-s3: #272c33;   /* elemento elevado */
    --skal-line: rgba(255, 255, 255, .08);
    --skal-line-strong: rgba(255, 255, 255, .14);

    /* ======================= TEXTO ======================= */
    --skal-text-hi: rgba(255, 255, 255, .92);
    --skal-text-md: rgba(255, 255, 255, .62);
    --skal-text-lo: rgba(255, 255, 255, .40);

    /* ======================= SEMÁNTICOS ======================= */
    --skal-ok-rgb: 52, 199, 123;
    --skal-warn-rgb: 240, 168, 56;
    --skal-danger-rgb: 232, 84, 86;
    --skal-ok: rgb(var(--skal-ok-rgb));
    --skal-warn: rgb(var(--skal-warn-rgb));
    --skal-danger: rgb(var(--skal-danger-rgb));

    /* ======================= FORMA =======================
       Escala fija de 3 radios. Regla de anidado: hijo = padre − padding. */
    --skal-r-sm: 8px;    /* chips, inputs      */
    --skal-r-md: 14px;   /* tarjetas           */
    --skal-r-lg: 22px;   /* paneles, píldoras  */

    /* Firma geométrica SKALRP: chaflán en una sola esquina.
       Se aplica a UNA familia de elementos, no a todo. */
    --skal-chamfer: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);

    /* ======================= PROFUNDIDAD =======================
       Sin blur. Tres capas: superficie sólida + luz de canto + sombra larga.
       Las sombras SIEMPRE en 2 capas (contacto corta + difusa larga). */
    --skal-rim: inset 0 1px 0 rgba(255, 255, 255, .07);
    --skal-sh-1: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px -6px rgba(0, 0, 0, .45);
    --skal-sh-2: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 48px -12px rgba(0, 0, 0, .62);
    /* "Cristal" honesto: gradiente propio sobre superficie sólida (nada de blur) */
    --skal-glass: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));

    /* ======================= MOVIMIENTO =======================
       Solo se anima transform y opacity (lo demás sale del compositor
       en CEF 103 y produce tirones). Por encima de 300 ms se percibe lento. */
    --skal-t-micro: 140ms;   /* hover, pulsado        */
    --skal-t-panel: 280ms;   /* entrada de panel      */
    --skal-t-slow: 420ms;    /* transiciones de vista */
    --skal-ease-in: cubic-bezier(.22, 1, .36, 1);
    --skal-ease-out: cubic-bezier(.4, 0, .2, 1);
    --skal-stagger: 35ms;

    /* ======================= TIPOGRAFÍA ======================= */
    --skal-font-ui: 'SKAL UI', system-ui, -apple-system, sans-serif;
    --skal-font-num: 'SKAL Num', 'SKAL UI', system-ui, sans-serif;

    /* Escala con ROL fijo (no inventar tamaños fuera de esta lista) */
    --skal-fs-label: .72rem;   /* mayúsculas, +tracking */
    --skal-fs-body: 1rem;
    --skal-fs-section: 1.14rem;
    --skal-fs-value: 1.6rem;   /* cifras del HUD        */
    --skal-fs-title: 1.7rem;
    --skal-fs-display: 2.6rem;
    --skal-track-tight: -.015em;  /* a partir de 28px */
    --skal-track-label: .08em;    /* microtexto en mayúsculas */

    /* ======================= ESPACIADO ======================= */
    --skal-sp-1: 4px;  --skal-sp-2: 8px;  --skal-sp-3: 12px; --skal-sp-4: 16px;
    --skal-sp-5: 24px; --skal-sp-6: 32px; --skal-sp-7: 48px;

    /* ======================= ESCALADO =======================
       Base en vh para que funcione en 1080p, 1440p, 4K y ultrawide.
       --skal-scale lo controla el jugador (80%–140%). */
    --skal-scale: 1;
    font-size: calc(clamp(12px, 1.05vh + 2px, 22px) * var(--skal-scale));
}

/* Utilidades mínimas compartidas ------------------------------------------- */

/* Todo número que cambia debe llevarla: sin esto los dígitos "bailan". */
.skal-num {
    font-family: var(--skal-font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.skal-label {
    font-size: var(--skal-fs-label);
    letter-spacing: var(--skal-track-label);
    text-transform: uppercase;
    color: var(--skal-text-md);
}

/* Panel base: superficie sólida + luz de canto + sombra en 2 capas */
.skal-panel {
    background: var(--skal-glass), var(--skal-s1);
    border: 1px solid var(--skal-line);
    border-radius: var(--skal-r-lg);
    box-shadow: var(--skal-rim), var(--skal-sh-2);
}

/* Glow SOLO en el elemento activo. Si todo brilla, nada destaca. */
.skal-active {
    border-color: var(--skal-accent-line);
    box-shadow: var(--skal-rim), 0 0 24px -6px var(--skal-accent-glow);
}

/* Accesibilidad de movimiento (señal de producto serio en 2026) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}