/* ==========================================================================
   RUMBOH · Portal — TOKENS DE DISENO                            (HU-PC-101)
   ==========================================================================

   Este es el UNICO archivo del Portal donde se escribe un color. Todo lo
   demas usa var(--…). Si la marca cambia, se cambia aqui y nada mas.

   🔴 LOS VALORES NO SON LOS HEX CRUDOS DE LA LAMINA DEL MUNICIPIO.
   Salen de docs/estilos.md §6, que ya los derivo comprobando el contraste
   CONTRA EL FONDO REAL sobre el que se pintan, no sobre blanco teorico. El
   naranja institucional #f57e20 da 2.66:1 y REPRUEBA EN LAS DOS DIRECCIONES
   —ni sirve de texto ni admite texto encima—, asi que aqui no aparece: en su
   lugar va #c23c0a, que es el mismo tono oscurecido hasta 5.08:1.

   Tomar un color de docs/estilos.jpeg o de RUMBOH-PROVISIONAL.png y pegarlo
   aqui es el unico error caro posible de este archivo: se propaga a todas las
   pantallas y hace que la conformidad WCAG 2.1 AA —que es CONTRACTUAL
   (Carta Proyecto, HU-APP-1005 / HU-PC-105)— se valide contra valores falsos.

   ── Los nombres son los MISMOS que Colors.xaml de la app movil ──
   No es casualidad ni gusto: HU-PC-101 pide que la experiencia sea consistente
   con la Aplicacion Movil, y dos juegos de nombres para los mismos colores es
   como empiezan a divergir. Primario/PrimarioSuperficie aqui significan
   exactamente lo que alla.

   🔴 REGLA PRACTICA, LA MISMA QUE EN EL MOVIL (CLAUDE.md §12):
   background-color usa la variante *-superficie; el texto y los iconos usan
   el acento. Con un solo token, un boton queda color menta con letras blancas.

   ── Contrastes verificados el 28 de agosto de 2026 ──
   Con la formula de luminancia relativa de WCAG 2.1, la misma que aplica
   Contraste en Domain. Cada par lleva su medicion al lado. Si tocas un valor,
   VUELVE A MEDIRLO: el ojo no distingue 4.44 de 4.65, y uno de los dos falla.
   ========================================================================== */

:root {
    /* ── Superficies ────────────────────────────────────────────────────── */
    --fondo:            #FCF9F8;  /* hueso; el mismo de la app movil          */
    --superficie:       #FFFFFF;  /* tarjetas, campos, dialogos               */
    --superficie-alta:  #F3EFEE;  /* zonas hundidas, encabezados de tabla     */

    /* ── Texto ─────────────────────────────────────────────────────────── */
    --texto:            #111111;  /* 18.02:1 s/fondo · 18.88:1 s/superficie   */
    --texto-secundario: #656668;  /*  5.49:1 s/fondo ·  5.75:1 s/superficie   */

    /* ── Primario (teal institucional) ──────────────────────────────────── */
    --primario:            #257173;  /* 5.43:1 s/fondo · 5.69:1 s/superficie  */
    --primario-superficie: #0d5d5e;  /* blanco encima 7.65:1                  */
    --primario-oscuro:     #093F40;  /* estado :active de lo anterior         */
    --sobre-primario:      #FFFFFF;

    /* ── Secundario (naranja institucional, oscurecido para poder leerse) ── */
    --secundario:            #c23c0a;  /* 5.08:1 s/fondo                      */
    --secundario-superficie: #c23c0a;  /* blanco encima 5.32:1                */
    --sobre-secundario:      #FFFFFF;

    /* ── Bordes ─────────────────────────────────────────────────────────── */
    /* 🔴 SON DOS Y NO SE PUEDEN INTERCAMBIAR. El borde de un campo o de un
       boton es lo que le dice a la persona donde termina el control, asi que
       WCAG 1.4.11 le exige 3:1 igual que a un icono. Un separador decorativo
       no comunica nada y no tiene minimo. Pintar un <input> con --borde-sutil
       es un incumplimiento que se ve perfectamente bien. */
    --borde-control: #767472;  /* 4.44:1 s/fondo · 4.65:1 s/superficie        */
    --borde-sutil:   #E3DFDD;  /* separadores, divisores; decorativo          */

    /* ── Estado ─────────────────────────────────────────────────────────── */
    --error:          #ba1a1a;  /* 6.17:1 s/fondo · blanco encima 6.46:1      */
    --error-fondo:    #FFDAD6;
    --exito:          #0d5d5e;  /* se reusa el teal: no hay verde en la marca */
    --exito-fondo:    #D7EFEE;
    --aviso:          #7A4A00;
    --aviso-fondo:    #FFEBCC;

    /* ── Foco ───────────────────────────────────────────────────────────── */
    /* 3:1 contra el fondo adyacente (WCAG 1.4.11). Ver base.css. */
    --foco: #0d5d5e;  /* 7.30:1 s/fondo */

    /* ── Sombras ────────────────────────────────────────────────────────── */
    --sombra-1: 0 1px 2px rgba(17, 17, 17, .06), 0 1px 3px rgba(17, 17, 17, .08);
    --sombra-2: 0 4px 12px rgba(17, 17, 17, .08), 0 2px 4px rgba(17, 17, 17, .06);

    /* ── Tipografia ─────────────────────────────────────────────────────── */
    /* Inter la indico el Municipio (confirmado el 26 de agosto de 2026), y se
       AUTOALOJA subconjuntada a latin — 128 KB en vez de 344. La @font-face y
       el porque estan en base.css y en wwwroot/fonts/LEEME.md.

       La pila de respaldo no es adorno: con font-display: swap el ciudadano ve
       estas mientras Inter llega, asi que estan elegidas por tener ancho y
       altura-x parecidos y que el salto al cambiar no mueva la maqueta. */
    --fuente: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Escala tipografica. Los tamanos van en rem A PROPOSITO: con px, el
       navegador ignora la preferencia de tamano de fuente del sistema y se
       incumple el criterio de HU-APP-1005 de que la interfaz sea usable con la
       fuente aumentada. */
    --txt-xs:  0.75rem;    /* 12px — solo etiquetas, nunca texto corrido      */
    --txt-sm:  0.875rem;   /* 14px */
    --txt-md:  1rem;       /* 16px — cuerpo */
    --txt-lg:  1.125rem;   /* 18px */
    --txt-xl:  1.375rem;   /* 22px */
    --txt-2xl: 1.75rem;    /* 28px */
    --txt-3xl: 2.25rem;    /* 36px */

    /* ── Espaciado (base 8, con un medio paso en 4) ─────────────────────── */
    --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
    --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;

    /* ── Radios ─────────────────────────────────────────────────────────── */
    --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-full: 9999px;

    /* ── Medidas de disposicion ─────────────────────────────────────────── */
    --ancho-contenido: 72rem;  /* el shell no crece sin limite en monitores  */
    --ancho-formulario: 27rem;
    --alto-encabezado: 4rem;

    /* 🔴 44px es el minimo de area tactil, y no es un numero de adorno: es lo
       que HU-APP-1005 exige y lo que hace usable el Portal en el telefono, que
       DT-03 marca como verificacion obligatoria. Todo control interactivo lo
       respeta — ver la regla de base.css. */
    --tactil-min: 44px;
}

/* ==========================================================================
   TEMA OSCURO
   ==========================================================================
   El Portal se consulta de noche —es un sistema de movilidad y
   videovigilancia—, y una pantalla blanca a oscuras deslumbra. Es la misma
   razon por la que se abrio el tema oscuro en la app movil.

   Se resuelve en DOS bloques y hacen falta los dos:
     · @media (prefers-color-scheme: dark) — la preferencia del sistema, que
       es lo que ve quien nunca toca el selector.
     · [data-tema="dark"] — la eleccion explicita, que tiene que poder GANAR
       sobre el sistema en las dos direcciones.
   Con solo el @media, elegir "claro" con el sistema en oscuro no haria nada.

   ⚠️ El selector del @media excluye data-tema="light" a proposito: sin esa
   exclusion, quien fuerza el tema claro con el sistema en oscuro se queda en
   oscuro y el selector parece roto.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="light"]) {
        --fondo:            #121716;
        --superficie:       #1A201F;
        --superficie-alta:  #232A29;

        --texto:            #ECEFEE;  /* 15.65:1 s/fondo · 14.29:1 s/superf.  */
        --texto-secundario: #a7a9ac;  /*  7.69:1 s/fondo ·  7.02:1 s/superf.  */

        --primario:            #22a3a2;  /* 5.89:1 s/fondo · 5.38:1 s/superf. */
        --primario-superficie: #14706f;  /* blanco encima 5.87:1              */
        --primario-oscuro:     #0A3D3D;
        --sobre-primario:      #FFFFFF;

        /* 🔴 En oscuro el acento se ACLARA para leerse y la superficie se
           OSCURECE para admitir texto blanco. Son movimientos opuestos, y por
           eso los dos tokens no pueden colapsar en uno. */
        --secundario:            #faa744;  /* 9.20:1 s/fondo · 8.40 s/superf. */
        --secundario-superficie: #bf4a12;  /* blanco encima 5.00:1            */
        --sobre-secundario:      #FFFFFF;

        --borde-control: #8A908E;  /* 5.57:1 s/fondo · 5.09:1 s/superficie    */
        --borde-sutil:   #2E3634;

        --error:       #ffb4ab;  /* 10.66:1 s/fondo */
        --error-fondo: #4A1512;
        --exito:       #74d6d3;
        --exito-fondo: #123534;
        --aviso:       #faa744;
        --aviso-fondo: #3A2A0E;

        --foco: #74d6d3;  /* 10.61:1 s/fondo */

        /* En oscuro una sombra negra no se ve: lo que separa un plano de otro
           es que la superficie sea mas clara que el fondo, no la sombra. */
        --sombra-1: 0 1px 2px rgba(0, 0, 0, .40);
        --sombra-2: 0 4px 12px rgba(0, 0, 0, .48);
    }
}

:root[data-tema="dark"] {
    --fondo:            #121716;
    --superficie:       #1A201F;
    --superficie-alta:  #232A29;

    --texto:            #ECEFEE;
    --texto-secundario: #a7a9ac;

    --primario:            #22a3a2;
    --primario-superficie: #14706f;
    --primario-oscuro:     #0A3D3D;
    --sobre-primario:      #FFFFFF;

    --secundario:            #faa744;
    --secundario-superficie: #bf4a12;
    --sobre-secundario:      #FFFFFF;

    --borde-control: #8A908E;
    --borde-sutil:   #2E3634;

    --error:       #ffb4ab;
    --error-fondo: #4A1512;
    --exito:       #74d6d3;
    --exito-fondo: #123534;
    --aviso:       #faa744;
    --aviso-fondo: #3A2A0E;

    --foco: #74d6d3;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .40);
    --sombra-2: 0 4px 12px rgba(0, 0, 0, .48);
}