/* ──────────────────────────────────────────────────────────────────
   base.css · reset tipográfico + base global del sistema
   ────────────────────────────────────────────────────────────────── */

@layer base {
    body {
        font-family: var(--font-body);
        background-color: var(--color-paper);
        color: var(--color-ink-2);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        line-height: 1.55;
        font-size: 14px;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* ── Headings ──────────────────────────────────────────────────
       H1 y display siempre con Fraunces italic — carácter editorial.
       H2/H3 con Inter, peso 600, peso visual por tamaño y letter-
       spacing antes que por peso máximo.
       ────────────────────────────────────────────────────────────── */
    h1, h2, h3, h4, h5, h6 {
        color: var(--color-ink);
        margin-top: 0;
        margin-bottom: var(--sp-2);
        line-height: 1.2;
    }

    h1 {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 400;
        font-size: 2rem;            /* 32px */
        letter-spacing: -0.6px;
        line-height: 1.1;
    }

    h2 {
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 1.125rem;        /* 18px */
        letter-spacing: -0.2px;
    }

    h3 {
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 0.875rem;        /* 14px */
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: var(--color-ink);
    }

    h4 {
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 0.9375rem;
    }

    p {
        margin-top: 0;
        margin-bottom: var(--sp-4);
    }

    a {
        color: var(--color-accent);
        text-decoration: none;
        transition: color var(--t-fast);
    }

    a:hover {
        color: var(--color-ink);
    }

    /* ── Numbers: tabular by default in number-like contexts ──── */
    .num,
    [data-num],
    td.num,
    th.num {
        font-feature-settings: 'tnum';
        text-align: right;
    }

    /* ── Mono ─────────────────────────────────────────────────── */
    code, kbd, samp, pre, .mono {
        font-family: var(--font-mono);
        font-size: 0.875em;
    }

    /* ── Eyebrow utility ──────────────────────────────────────── */
    .eyebrow {
        font-family: var(--font-body);
        font-size: 0.6875rem;       /* 11px */
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--color-accent);
    }

    /* ── Display utility ──────────────────────────────────────── */
    .display {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 400;
        letter-spacing: -1px;
        line-height: 1;
    }

    hr {
        border: 0;
        border-top: 1px solid var(--color-rule);
        margin: var(--sp-6) 0;
    }

    /* ── Selection ────────────────────────────────────────────── */
    ::selection {
        background-color: var(--color-accent-tint);
        color: var(--color-accent);
    }

    /* ── Scrollbar ────────────────────────────────────────────── */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--color-paper);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-rule);
        border-radius: var(--r-sm);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-muted);
    }
}


/* ── Texto solo para lectores de pantalla ─────────────────────────────────
   Da nombre a un control sin pintarlo: un botón que solo lleva un icono, o un
   campo cuya etiqueta ya se entiende por el contexto visual.

   Vive AQUÍ y no en la hoja de un portal porque la usan cuatro plantillas de
   tres portales distintos (administración, instructor y laboratorio) y sólo
   estaba definida en `kiosko.css`, que esos tres no cargan. Resultado: nueve
   textos de accesibilidad **visibles en pantalla** — donde debía haber un icono
   se leía «Editar», y las etiquetas ocultas de los campos aparecían.

   `clip-path` además de `clip`: `clip` está obsoleta pero se mantiene por los
   navegadores viejos, y sin `clip-path` alguno moderno la ignora y el texto
   reaparece. `white-space: nowrap` evita que un texto largo cambie la altura de
   la línea desde su caja de un píxel.

   Lo vigila `tests/unit/test_el_texto_para_lectores_no_se_ve.py`, que compara
   dónde se usa la clase con las hojas que carga cada plantilla. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* Giro de los iconos de "cargando" (`class="ph ph-compass ph-spin"`).

   `ph-spin` es un modificador de animación del paquete Phosphor, pero el
   vendor que se sirve desde `app/static/vendor/phosphor/` NO lo trae: solo
   define los `content` de cada icono. Consecuencia silenciosa —la única que
   dan los iconos— el compás de "calculando" y el de "recalculando ruta" se
   quedaban quietos, así que la pantalla parecía colgada justo cuando lo que
   hacía falta era decir que seguía trabajando.

   Se apoya en el `@keyframes spin` que ya vive en tokens.css. */
.ph-spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* Quien pide menos movimiento no necesita un icono girando para entender que
   algo está en marcha: el texto que lo acompaña ya lo dice. */
@media (prefers-reduced-motion: reduce) {
    .ph-spin { animation: none; }
}