/* Tokens de la interfaz (ADR-029 §5 y ADR-033). El primer bloque :root repite, color a color,
   marca\colores.json (lo vigila tests\web-tokens.test.js, que ademas mide los contrastes). Debajo,
   los tokens SEMANTICOS: son los unicos que usan los estilos. El modo oscuro los redefine con los
   mismos nombres. Ningun otro fichero CSS escribe colores a mano. */
:root {
  --marino: #0F1F4F;
  --azul-c: #4D7CFF;
  --blanco: #FFFFFF;
  --es-claro: #6571A0;
  --es-oscuro: #A8B4E6;
  --niebla: #F4F7FF;
  --noche: #070E26;
  --enlace-claro: #2F5FE6;
  --enlace-oscuro: #8FB0FF;
  --superficie-oscuro: #0E1736;
  --texto-secundario-claro: #4A5578;
  --texto-secundario-oscuro: #A8B4E6;
  --texto-apagado-claro: #8A93B0;
  --texto-apagado-oscuro: #6F7BA6;
  --borde-claro: #7C86AB;
  --borde-oscuro: #5A6794;
  --separador-claro: #D5DCF0;
  --separador-oscuro: #222E5C;
  --exito-claro: #17703F;
  --exito-oscuro: #5BD694;
  --error-claro: #C0262D;
  --error-oscuro: #FF8A8F;
  --atencion-claro: #8A5300;
  --atencion-oscuro: #FFB454;
  --visor: #0D0E10;
}

/* Semanticos, modo claro (los de partida). */
:root {
  --fondo: var(--niebla);
  --superficie: var(--blanco);
  --texto: var(--marino);
  --texto-secundario: var(--texto-secundario-claro);
  --texto-apagado: var(--texto-apagado-claro);
  --borde: var(--borde-claro);
  --separador: var(--separador-claro);
  --enlace: var(--enlace-claro);
  --foco: var(--enlace-claro);
  --exito: var(--exito-claro);
  --error: var(--error-claro);
  --atencion: var(--atencion-claro);
  --boton-fondo: var(--marino);
  --boton-texto: var(--blanco);
  --visor-fondo: var(--visor);
  --visor-texto: var(--blanco);
}

/* Semanticos, modo oscuro: mismos nombres, otros valores. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: var(--noche);
    --superficie: var(--superficie-oscuro);
    --texto: var(--blanco);
    --texto-secundario: var(--texto-secundario-oscuro);
    --texto-apagado: var(--texto-apagado-oscuro);
    --borde: var(--borde-oscuro);
    --separador: var(--separador-oscuro);
    --enlace: var(--enlace-oscuro);
    --foco: var(--enlace-oscuro);
    --exito: var(--exito-oscuro);
    --error: var(--error-oscuro);
    --atencion: var(--atencion-oscuro);
    --boton-fondo: var(--enlace-oscuro);
    --boton-texto: var(--noche);
  }
}

/* Escala (ADR-033 §3; PRODUCTO.md §2.4 y §2.5). Todo en rem: se respeta el tamano de letra del sistema. */
:root {
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --radio-control: 0.375rem;
  --radio-tarjeta: 0.75rem;
  --radio-pastilla: 999px;
  --tactil: 2.75rem;
  --t-respuesta: 150ms;
  --t-pantalla: 250ms;
  --fuente-titulos: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-respuesta: 0ms;
    --t-pantalla: 0ms;
  }
}

/* Fuentes autoalojadas (ADR-029 §6, ADR-033 §2): Inter 400 y 600, Outfit 700, subconjunto latino
   (cubre el espanol: n con tilde, acentos, signos de apertura, comillas angulares y el punto medio).
   Sin Google Fonts: la CSP solo permite font-src 'self'. font-display: swap + pila del sistema de
   respaldo (tokens.css). Origen y licencia (SIL OFL 1.1): web\src\fuentes\LEEME.md. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/outfit-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base (ADR-033). Solo usa tokens semanticos de tokens.css: ningun color escrito a mano.
   El fondo va en html y body: iOS 26 tine la barra con el fondo del body (guia §4). */
html,
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.625;
}

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

.pantalla {
  max-width: 40rem;
  margin: 0 auto;
  padding: max(var(--e-6), env(safe-area-inset-top)) max(var(--e-6), env(safe-area-inset-right))
    max(var(--e-6), env(safe-area-inset-bottom)) max(var(--e-6), env(safe-area-inset-left));
}

h1,
h2 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  margin: 0 0 var(--e-2);
}

h1 {
  font-size: 1.75rem;
  line-height: 2.125rem;
}

h2 {
  font-size: 1.375rem;
  line-height: 1.75rem;
}

h3 {
  font-family: var(--fuente-cuerpo);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  margin: 0;
}

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

.secundario {
  color: var(--texto-secundario);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.entorno {
  color: var(--texto-secundario);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

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

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}


/* --- Pagina publica provisional (ADR-064): solo lo propio, con los tokens de la app --- */
.pagina {
  padding-top: max(var(--e-8), env(safe-area-inset-top));
  padding-bottom: max(var(--e-16), env(safe-area-inset-bottom));
}

.portada {
  text-align: center;
  padding: var(--e-8) 0 var(--e-4);
}

.portada picture {
  display: block;
}

.logo {
  display: block;
  width: 9rem;
  height: 9rem;
  margin: 0 auto var(--e-6);
  border-radius: 22%;
  box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--texto) 22%, transparent);
}

.portada h1 {
  margin-bottom: var(--e-3);
}

.nombre {
  display: block;
  width: 15rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.lema {
  font-family: var(--fuente-titulos);
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--e-1);
}

.sublema {
  color: var(--texto-secundario);
  margin-bottom: 0;
}

.aviso {
  margin: var(--e-6) 0;
  padding: var(--e-4) var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--separador);
  border-left: 0.25rem solid var(--enlace);
  border-radius: var(--radio-tarjeta);
}

.aviso h2 {
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.aviso p:last-child {
  margin-bottom: 0;
}

.pagina section {
  margin-top: var(--e-8);
}

.pagina section p {
  max-width: 36rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil);
  padding: 0 var(--e-6);
  border-radius: var(--radio-pastilla);
  background: var(--boton-fondo);
  color: var(--boton-texto);
  font-weight: 600;
  text-decoration: none;
}

.boton:hover {
  opacity: 0.9;
}

.volver {
  margin-bottom: var(--e-6);
}

.pie {
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: 1px solid var(--separador);
  text-align: center;
}

.firma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  color: var(--texto-secundario);
  margin-bottom: var(--e-4);
}

.firma picture {
  display: block;
}

.marca {
  display: block;
  width: 10.5rem;
  max-width: 100%;
  height: auto;
}

@media (min-width: 40rem) {
  .nombre {
    width: 18rem;
  }
}