/* ==========================================================================
   Identidad de marca Grupo Prom  (especificacion seccion 8.4)

   Este es el UNICO lugar donde viven los colores y las tipografias. Todo lo
   demas (login, sidebar, home) se refiere a estas variables por nombre.

   TEMPORAL: los HEX de :root y las imagenes de public/img/ son los de
   Intraprom v2. Cuando haya marca propia, se reemplazan los archivos y
   variables listados en docs/handoff.md. Ningun otro CSS lleva un color fijo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografias

   Titulos y textos van en Montserrat (licencia OFL, ver
   fonts/montserrat-OFL.txt). No se copiaron Eastman (versiones de prueba),
   ni Futura, Antonio o PF Din: las variables de abajo apuntan a Montserrat
   hasta que haya tipografia propia. Ver docs/handoff.md.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-extrabold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

:root {
    /* ----------------------------------------------------------------------
       Colores principales

       Muestreados directamente del logo oficial (assets/img/logo.png del
       sitio de asistencia), no de una conversion Pantone aproximada, para
       que la interfaz combine exactamente con el logo. La especificacion
       1.3 proponia #003C7E y #007FA3 como placeholders; se conservan los
       nombres de variable por numero de Pantone segun esa convencion.

       PENDIENTE: reemplazar cuando el equipo creativo confirme los HEX.
       ---------------------------------------------------------------------- */
    --pantone-7687c: #273579; /* azul marino del texto "Grupo Prom" */
    --pantone-638c: #1984C7;  /* azul brillante del orbital */

    /* Colores secundarios — placeholder Pantone→HEX, sin confirmar. */
    --pantone-440c: #D6A461;
    --pantone-417c: #8C8C7A;
    --pantone-663c: #A9C4D8;
    --pantone-2985c: #6EC4E8;
    --pantone-291c: #A9D4F5;
    --pantone-656c: #D6E8F5;

    /* Derivados de los principales, para estados y superficies. */
    --marino-oscuro: #1B2555;
    --marino-claro: #3A4A94;

    /* Neutros de interfaz. */
    --tinta: #1F2733;
    --tinta-suave: #5B6773;
    --linea: #DFE5EC;
    --superficie: #FFFFFF;
    --lienzo: #F4F7FA;

    /* Semanticos. */
    --error-fondo: #FDECEA;
    --error-borde: #F3C0BA;
    --error-texto: #8C1D13;

    /* Campos de formulario (login, generador y futuros formularios). */
    --campo-borde: #7A8199;
    --campo-borde-hover: #5C6378;
    --campo-foco: #1984C7;
    --campo-error: #8C1D13;
    --campo-fondo: #FFFFFF;
    --campo-fondo-lectura: #F2F4F8;
    --campo-texto-ayuda: #5B6773;

    /* Tipografias por uso, no por nombre de archivo. */
    --font-heading: 'Montserrat', system-ui, sans-serif;
    --font-body: 'Montserrat', system-ui, sans-serif;
    --font-numbers: 'Montserrat', sans-serif;
    --font-accent: 'Montserrat', sans-serif;
    --font-note: 'Montserrat', system-ui, sans-serif;

    --radio: 14px;
    --sombra: 0 20px 50px rgba(27, 37, 85, .28);

    /* Texto sobre fondos de marca. Los demás CSS no repiten #fff. */
    --sobre-marca: #FFFFFF;

    /* Frase y velo del login. Salen del SVG temporal, no de un Pantone. */
    --frase-acento: #5AAEE0;
    --frase-suave: #CFE6F7;
    --frase-velo: rgba(20, 29, 77, .55);

    /* Cajón del menú en pantallas angostas. El rgb es --marino-oscuro. */
    --sombra-menu: 0 12px 40px rgba(27, 37, 85, .22);
    --velo-menu: rgba(27, 37, 85, .45);

    /* Halos de foco. El rgb repite --campo-foco y --campo-error. */
    --campo-foco-halo: rgba(25, 132, 199, .18);
    --campo-error-halo: rgba(140, 29, 19, .15);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--tinta);
    background: var(--lienzo);
    -webkit-font-smoothing: antialiased;
}

/* Los titulos van en mayusculas con letter-spacing, segun el manual. */
.titulo-marca {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0;
}

/* Numeros dentro de un titulo. Hoy usan Montserrat; la variable es --font-numbers. */
.numero {
    font-family: var(--font-numbers);
    letter-spacing: .02em;
}

.nota {
    font-family: var(--font-note);
    font-size: .85rem;
    color: var(--tinta-suave);
}

/* Foco visible y consistente: necesario para navegar con teclado. */
:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--pantone-638c);
    outline-offset: 2px;
}