/* ==========================================================================
   Conecta Juventud — Base
   Normalización, tipografía y estructura de página.
   Ningún valor literal: todo proviene de tokens.css.
   ========================================================================== */

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

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

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: var(--t-cuerpo);
    line-height: var(--lh-cuerpo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Foco visible en todo elemento interactivo (marca 15.2) ───────────── */
:focus-visible {
    outline: var(--foco-grosor) solid var(--foco);
    outline-offset: var(--foco-desplazamiento);
}

/* ── Enlace de salto para navegación por teclado ──────────────────────── */
/* El -9999px no es una medida de diseño: es la técnica estándar para sacar un
   elemento de la pantalla sin ocultarlo a los lectores de pantalla. */
.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    display: inline-flex;
    align-items: center;
    min-height: var(--toque-min);
    background: var(--blanco);
    color: var(--primario);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--radio-chico);
    z-index: 10;
}

.salto-contenido:focus {
    left: var(--e-3);
    top: var(--e-2);
}

/* ── Tipografía ───────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
    margin: 0 0 var(--e-3);
    color: var(--primario-oscuro);
    line-height: var(--lh-titulo);
    font-weight: 700;
}

h1 { font-size: var(--t-titulo-1); }
h2 { font-size: var(--t-titulo-2); }
h3 { font-size: var(--t-titulo-3); }
h4 { font-size: var(--t-titulo-4); }

p {
    margin: 0 0 var(--e-3);
}

a {
    color: var(--primario);
}

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

small,
.texto-sm {
    font-size: var(--t-cuerpo-sm);
}

.texto-suave {
    color: var(--texto-suave);
}

/* Alineación siempre a la izquierda: nunca justificado (marca 9.4). */
p, li, td, th, dd, dt {
    text-align: left;
}

code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--t-cuerpo-sm);
    background: var(--azul-50);
    border: var(--borde-grosor) solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 0 var(--e-1);
}

/* ── Estructura de página ─────────────────────────────────────────────── */

.contenedor {
    width: 100%;
    max-width: var(--ancho-panel);
    margin: 0 auto;
    padding-left: var(--margen-lateral);
    padding-right: var(--margen-lateral);
}

.contenedor--lectura {
    max-width: calc(var(--ancho-lectura) + (var(--margen-lateral) * 2));
}

.principal {
    flex: 1 0 auto;
    padding-top: var(--e-5);
    padding-bottom: var(--e-6);
}

/* ── Barra de navegación ──────────────────────────────────────────────── */

.barra-nav {
    background: var(--azul-600);
    color: var(--texto-inverso);
    min-height: var(--alto-barra-nav);
    display: flex;
    align-items: center;
}

.barra-nav__interior {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    flex-wrap: wrap;
    width: 100%;
    padding-top: var(--e-1);
    padding-bottom: var(--e-1);
}

.barra-nav__marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    color: var(--texto-inverso);
    text-decoration: none;
    min-height: var(--toque-min);
}

.barra-nav__emblema {
    height: var(--emblema-nav);
    width: auto;
}

.barra-nav__nombre {
    font-size: var(--t-titulo-4);
    font-weight: 700;
    white-space: nowrap;
}

.barra-nav__enlaces {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-left: auto;
}

.barra-nav__enlace {
    color: var(--azul-100);
    text-decoration: none;
    font-size: var(--t-nav);
    font-weight: 700;
    letter-spacing: var(--track-nav);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    min-height: var(--toque-min);
    padding: 0 var(--e-1);
    border-bottom: var(--foco-grosor) solid transparent;
}

.barra-nav__enlace:hover,
.barra-nav__enlace[aria-current="page"] {
    color: var(--blanco);
    border-bottom-color: var(--blanco);
}

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie {
    flex-shrink: 0;
    border-top: var(--borde-grosor) solid var(--borde);
    background: var(--fondo-alt);
    padding-top: var(--e-4);
    padding-bottom: var(--e-4);
    color: var(--texto-suave);
    font-size: var(--t-cuerpo-sm);
}

.pie__interior {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    justify-content: space-between;
}

/* El enlace a la política de privacidad del pie (Fase 10) es un destino
   táctil suelto, no un enlace dentro de un párrafo: necesita los 44 px. */
.pie a {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque-min);
}

.pie__interior {
    align-items: center;
}

/* ── Utilidades mínimas de espaciado ──────────────────────────────────── */

.apilado > * + * {
    margin-top: var(--e-3);
}

.apilado-amplio > * + * {
    margin-top: var(--e-5);
}

.rejilla {
    display: grid;
    gap: var(--e-3);
    /* 240px es el umbral a partir del cual cabe otra columna, no una medida
       del sistema de diseño. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ── Ajustes para pantallas angostas (mínimo 360 px) ──────────────────── */

/* Punto de quiebre. CSS no admite variables dentro de una media query, así que
   este número no puede salir de un token. */
@media (max-width: 480px) {
    .barra-nav__enlaces {
        gap: var(--e-2);
    }

    .principal {
        padding-top: var(--e-4);
    }
}

/* ── Páginas de error ─────────────────────────────────────────────────── */

.pagina-error {
    max-width: var(--ancho-lectura);
    margin: 0 auto;
    padding-top: var(--e-5);
    padding-bottom: var(--e-5);
    text-align: left;
}

.pagina-error__emblema {
    height: var(--emblema-estado);
    width: auto;
    opacity: 0.7;   /* emblema en azul tenue, como en los estados vacíos */
    margin-bottom: var(--e-4);
}

.pagina-error__titulo {
    font-size: var(--t-titulo-1);
    margin-bottom: var(--e-3);
}

.pagina-error__texto {
    margin-bottom: var(--e-4);
}

/* Botón «Salir» de la barra: se ve y se comporta como el resto de enlaces */
.barra-nav__salir {
    background: none;
    border: 0;
    border-bottom: var(--foco-grosor) solid transparent;
    font-family: var(--fuente);
    cursor: pointer;
}

/* Un texto largo sin espacios —una lista de columnas, una dirección— no debe
   ensanchar la pantalla en un móvil de 360 px. */
code {
    overflow-wrap: anywhere;
}


/* ── Utilidades de uso general (Fase 3) ──────────────────────────────────── */

/* Saca el elemento de la pantalla sin ocultarlo a los lectores de pantalla.
   Se usa en encabezados de tabla y en textos que explican un botón que solo
   muestra una flecha. */
/* ── El atributo hidden, con el efecto que debería tener ───────────────────

   `hidden` equivale a display:none, pero ese display lo pone la hoja del
   navegador, y CUALQUIER regla de autor lo pisa. Una clase como .aviso, que
   fija display:flex, deja visible un elemento marcado como oculto.

   Esta regla vivía en contenido.css, que solo cargan ALGUNAS pantallas. En
   /panel, /perfil o /panel/personas no se cargaba, y ahí el aviso de «sin
   conexión» se veía siempre, hubiera o no conexión. Por eso está aquí: base.css
   la carga toda pantalla del proyecto, sin excepción.

   El selector lleva !important a propósito. Es la única forma de que un
   elemento marcado como oculto lo esté de verdad sin ir persiguiendo cada
   clase que fije un display. Y es lo correcto: `hidden` no es una sugerencia
   de estilo, es una afirmación sobre el documento. */
[hidden] {
    display: none !important;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.texto-menudo {
    font-size: var(--t-cuerpo-sm);
    color: var(--texto-suave);
}

.grupo-botones--juntos {
    gap: 4px;
}