/* ======================================================
   BASE / RESET (Paso 18 · refinamiento)
   ====================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Bloqueo de fondo con un sheet/modal abierto (public/js/dom.js::abrirSheet
   -- auditoría "Grupos -- sheets móviles/layout", punto 9). `overflow:
   hidden` en `html` Y `body` (el navegador puede tratar a cualquiera de
   los dos como raíz de scroll) -- a propósito NO se usa la técnica
   `position: fixed` + `top` calculado, que necesitaría escribir un valor
   dinámico en `.style` (este proyecto blinda `.style` a un único uso
   aprobado, ver `anchoBarra()` y test/inline-styles-etapa3.test.js). El
   scroll SIGUE ocurriendo con normalidad dentro de `.sheet` -- esto sólo
   congela la página de atrás, sin mover su posición. */
html.body-lock, body.body-lock { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-primary); }

/* `el.hidden = true` debe ocultar SIEMPRE, incluso en elementos con un
   `display` explícito por clase (.app-header, .bottom-nav son flex). Sin
   esto, ocultar la cabecera/navegación fuera del área autenticada
   (#/login, #/registro) no tenía efecto visual. */
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Contenedor tipo app: superficie casi blanca sobre un fondo ligeramente
   más oscuro, para dar sensación de "hoja" luminosa. */
.app {
    max-width: var(--app-max-width);
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-surface);
    position: relative;
    display: flex;
    flex-direction: column;
    /* Defensa secundaria (la causa real se corrige en cada componente, p.
       ej. `.segmented`): si algún hijo llegara a exceder el ancho, se
       recorta al marco de la app en lugar de ensanchar la página. Se usa
       `clip` y NO `hidden` a propósito: `clip` no crea contenedor de
       scroll, así que no rompe el `position: sticky` de la navegación
       inferior ni añade barras. El eje vertical sigue en `visible`. */
    overflow-x: clip;
}

@media (min-width: 480px) {
    body { background: var(--color-frame); }
    .app {
        min-height: 100dvh;
        border-left: 1px solid var(--color-border);
        border-right: 1px solid var(--color-border);
        box-shadow: var(--shadow-soft);
    }
}

/* Cabecera global: altura fija y consistente; el título de cada pantalla
   arranca justo después, sin huecos enormes. */
.app-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.screen {
    flex: 1;
    padding: var(--screen-top) var(--space-4) var(--content-bottom-gap);
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted { color: var(--color-muted); }
.faint { color: var(--color-faint); }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------
   Utilidades de margen superior (migración de estilos inline · etapa 1).
   Valores LITERALES, deliberadamente NO sustituidos por tokens --space-*.
   ------------------------------------------------------ */
.mt-075 { margin-top: .75rem; }
.mt-1   { margin-top: 1rem; }
.mt-125 { margin-top: 1.25rem; }

/* Mensaje de <noscript> (H1/H2): antes `style="padding:1.5rem"` inline. */
.noscript-msg { padding: 1.5rem; }