/*
 * base.css — Fuentes autoalojadas, tipografía, foco visible, enlace para saltar al contenido,
 * utilidades de accesibilidad y estado inicial del scroll reveal.
 */

/* ---- Fuentes autoalojadas (Roboto, SIL OFL 1.1; ver assets/fonts/LICENSES.md) ------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-700.woff2") format("woff2");
}
/* gobCL: agregar aquí sus @font-face cuando Suseso entregue los archivos (TODO.md). */

/* ---- Raíz ------------------------------------------------------------------------- */
html {
  /* El zoom propio escala sobre el tamaño base que la persona configuró en su navegador. */
  font-size: calc(100% * var(--zoom));
  scroll-padding-top: calc(var(--cabecera-alto) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--paso-texto);
  line-height: var(--interlineado-texto);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none; /* destino del enlace para saltar: no es un control interactivo */
}

/* ---- Tipografía --------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: var(--interlineado-titulo);
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
  /* Palabras largas ("superintendentas") a 320 px o con zoom: se dividen en vez de desbordar. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1,
.titulo-pagina {
  font-size: var(--paso-titulo);
  letter-spacing: -0.03em;
  margin-bottom: var(--s3);
}

h2 {
  font-size: var(--paso-titulo);
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--paso-destacado);
  letter-spacing: -0.01em;
}

p,
li,
dd {
  max-width: var(--medida);
}

p {
  text-wrap: pretty;
}

.entradilla {
  font-size: var(--paso-destacado);
  line-height: 1.45;
  max-width: 44ch;
}

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

small,
.texto-pequeno {
  font-size: var(--paso-pequeno);
}

a {
  color: var(--sus-azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--sus-azul-oscuro);
  text-decoration-thickness: 2px;
}

/* Cifras de años alineadas: tabulares en toda la interfaz. */
time,
.cifra {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- Foco visible (WCAG 2.4.7; sección 6.2) ------------------------------------------ */
:focus-visible {
  outline: var(--foco-ancho) solid var(--foco-color);
  outline-offset: var(--foco-desfase);
  box-shadow: 0 0 0 calc(var(--foco-ancho) + var(--foco-desfase) + 2px) var(--foco-halo);
}

/* Bootstrap aplica estilos de foco propios a botones y campos: se igualan al estándar. */
.btn:focus-visible,
.form-check-input:focus-visible,
.navbar-toggler:focus-visible,
.btn-close:focus-visible {
  outline: var(--foco-ancho) solid var(--foco-color);
  outline-offset: var(--foco-desfase);
  box-shadow: 0 0 0 calc(var(--foco-ancho) + var(--foco-desfase) + 2px) var(--foco-halo);
}

/* Elementos que reciben foco por programa (títulos del modal, main): contorno discreto. */
[tabindex="-1"]:focus-visible {
  outline-style: dashed;
}

/* En fondos oscuros el contorno es blanco y el halo azul noche. */
.fondo-oscuro {
  --foco-color: var(--sus-blanco);
  --foco-halo: var(--sus-azul-noche);
}

/* ---- Enlace para saltar al contenido (WCAG 2.4.1) ------------------------------------ */
.saltar {
  position: absolute;
  inset-inline-start: var(--margen);
  top: var(--s2);
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--sus-azul-noche);
  color: var(--sus-blanco);
  border-radius: var(--radio-boton);
  font-weight: 500;
  --foco-color: var(--sus-blanco);
  --foco-halo: var(--sus-azul-noche);
}
.saltar:hover,
.saltar:focus {
  color: var(--sus-blanco);
}

/* ---- Insignias de contenido ----------------------------------------------------------- */
.badge-demo {
  background-color: var(--sus-muestra-fondo);
  color: var(--sus-muestra-texto);
  border: var(--borde-ancho) dashed var(--sus-muestra-texto);
}

.badge-adicional {
  background-color: var(--sus-superficie);
  color: var(--tinta);
  border: var(--borde-ancho) solid var(--borde);
}

/* ---- Aviso sin JavaScript --------------------------------------------------------------- */
.aviso-sin-js {
  margin: 0;
  padding: var(--s3) var(--margen);
  background: var(--sus-superficie);
  color: var(--tinta);
  border-block-end: 2px solid var(--sus-rojo-texto);
}
.aviso-sin-js p {
  margin: 0;
}

/* ---- Estados vacíos y mensajes ------------------------------------------------------------ */
.estado-vacio {
  padding: var(--s4);
  background: var(--superficie);
  border-inline-start: var(--grosor-hilo) solid var(--linea);
}
.estado-vacio > :last-child {
  margin-bottom: 0;
}

/* ---- Scroll reveal (sección 10.10): visible por defecto, oculto solo con .reveal-listo ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-listo [data-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(var(--reveal-distancia));
  }
  .reveal-listo [data-reveal] {
    transition:
      opacity var(--duracion) var(--curva),
      transform var(--duracion) var(--curva);
    transition-delay: calc(var(--reveal-orden, 0) * var(--reveal-retardo));
  }
}

/* ---- Utilidades ---------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion {
  padding-block: calc(var(--separacion-seccion) / 2);
}

.seccion + .seccion {
  padding-block-start: calc(var(--separacion-seccion) / 2);
}

.campo-superficie {
  background-color: var(--superficie);
}

/* Imágenes nunca desbordan su contenedor y escalan con el zoom (dimensionadas en rem o %). */
img,
svg {
  max-width: 100%;
  height: auto;
}

/* ---- Modo de colores forzados (sección 12) -------------------------------------------------- */
@media (forced-colors: active) {
  :focus-visible,
  .btn:focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
  .badge,
  .badge-demo,
  .badge-adicional {
    border: 1px solid CanvasText;
  }
  .estado-vacio {
    border: 1px solid CanvasText;
  }
}

/* ---- Reflow (WCAG 1.4.10): URL y palabras largas se dividen en vez de desbordar a 320 px --- */
body {
  overflow-wrap: break-word;
}
main a,
main td,
main dd {
  overflow-wrap: anywhere;
}