/*
  Estilos base: rejilla, tipografía y las tres vías.

  Todo sale de tokens.css. Ninguna regla de este archivo declara un color, un
  espaciado o un tamaño literal: si hace falta uno que no existe, se añade el
  token, no el valor (artículo V de la constitución).
*/
@layer base {


@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fuentes/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fuentes/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
}

/* --------------------------------------------------------------- vías
   Tres anchos, y el cuerpo NO se ensancha nunca para llenar la pantalla.
   600 px son ~70 caracteres a 17 px, dentro del rango 65–75. */
.via-lectura, .via-ancha, .via-completa { margin-inline: auto; padding-inline: var(--margen); }

/* El margen de página va FUERA de la medida de lectura, no dentro.
   Con box-sizing: border-box, `max-width: 600px` + `padding-inline: 48px` deja
   un texto de 504 px: ~59 caracteres, por debajo del rango 65–75 que el propio
   sistema cita. Se sumaba el margen a la vía en vez de restarlo, así que las 29
   páginas se leían más estrechas de lo especificado. */
.via-lectura  { max-width: calc(var(--via-lectura)  + 2 * var(--margen)); }
.via-ancha    { max-width: calc(var(--via-ancha)    + 2 * var(--margen)); }
.via-completa { max-width: calc(var(--via-completa) + 2 * var(--margen)); }

/* Un solo valor por punto de ruptura, para que el relleno y el cálculo de
   arriba no puedan desincronizarse. */
:root { --margen: var(--grid-margin-base); }
@media (min-width: 640px)  { :root { --margen: var(--grid-margin-sm); } }
@media (min-width: 1024px) { :root { --margen: var(--grid-margin-md); } }
@media (min-width: 1280px) { :root { --margen: var(--grid-margin-lg); } }

/* ---------------------------------------------------------- tipografía
   En móvil bajan SOLO los títulos. El cuerpo se queda en 17 px: reducirlo es
   la causa más común de lectura incómoda en teléfono. */
h1, h2, h3, h4 { font-weight: var(--font-weight-semibold); margin-block: 0 var(--space-lg); }

h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); }
h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); }
h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
h4 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }

/* Un título de dos líneas con una palabra suelta en la segunda se lee peor y se
   ve peor. `balance` reparte; en párrafos, `pretty` evita la viuda final. Si el
   navegador no lo soporta, no pasa nada: no hay reserva que escribir. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption, dd { text-wrap: pretty; }

/* El hueco sobre el destino de un salto lo pone `scroll-padding-top` en la raíz
   —ver componentes.css—, NO un `scroll-margin-top` en cada destino.
   
   Estaban los dos y se sumaban: el título aterrizaba a 208 px del borde con una
   cabecera de 57. `scroll-padding` es además el mecanismo general: cubre
   cualquier desplazamiento automático, incluido el que provoca el foco al
   tabular, que es lo que pide WCAG 2.4.11. */

/* SIN `scroll-behavior: smooth`, y no por olvido.
   El sistema pide «sin animación por scroll», y además se probó: con scroll
   suave, dos casos de calculadora empezaron a fallar de forma intermitente en
   ejecución paralela porque el elemento seguía moviéndose cuando llegaba el
   clic. Es el mismo defecto que ya apareció en U04 cuando un mensaje de error
   empujaba el botón hacia abajo. Un salto de ancla es un salto. */

/* El destino de un ancla se señala un momento, para no perderlo de vista. Sin
   animación por scroll, que el sistema prohíbe. */
:target { background: var(--color-surface-sunken); }

/* Ya no hay salto en 640 px: los tamaños son fluidos y en los dos extremos
   valen lo mismo que valían con el escalón. */

p, ul, ol { margin-block: 0 var(--space-xl); }

.lead    { font-size: var(--font-size-lead); line-height: var(--line-height-lead); }
.caption { font-size: var(--font-size-caption); line-height: var(--line-height-caption);
           letter-spacing: var(--letter-spacing-caption); color: var(--color-text-secondary); }
.etiqueta { font-size: var(--font-size-label); line-height: var(--line-height-label);
            letter-spacing: var(--letter-spacing-label); font-weight: var(--font-weight-semibold);
            text-transform: uppercase; }

/* Cifras tabulares obligatorias donde se comparan números. */
table, .resultado, .dato { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- enlaces */
a { color: var(--color-action-primary); text-underline-offset: 0.2em; }
a:hover  { color: var(--color-action-hover); }
a:active { color: var(--color-action-active); }

/* ----------------------------------------------------------------- foco
   Visible y NO recortado. Nunca se suprime sin sustituto (RNF-002 CA-2). */
:focus-visible {
  outline: var(--border-width-emphasis) solid var(--color-focus-ring);
  outline-offset: var(--space-2xs);
  border-radius: var(--radius-sm);
}

/* Salto al contenido: primer destino del teclado, visible al recibir foco. */
.salto-contenido {
  position: absolute; left: var(--space-lg); top: calc(var(--space-lg) * -4);
  z-index: 10;
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  transition: top var(--duration-normal) var(--ease-decelerate);
}
.salto-contenido:focus { top: var(--space-lg); }

/* ------------------------------------------------------- superficies
   Toda superficie elevada lleva borde: blanco sobre Warm Paper da 1.10:1,
   y el relleno por sí solo no identifica una superficie. */
.superficie-elevada {
  background: var(--color-surface-raised);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  padding: var(--space-xl);
}

/* ------------------------------------------------ contenido desplazable
   Una figura de 1000 px no cabe sin desplazamiento hasta los 1088 px de
   viewport. El punto de ruptura md (1024) NO basta: entre 1024 y 1088 la
   figura sigue necesitando su contenedor. No se estrecha la figura, porque a
   760 px su texto cae a 7 px CSS y es ilegible. */
.desplazable {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* El suelo de 1000 px es del sistema de imágenes: por debajo, el texto de la
   figura deja de leerse, así que se DESPLAZA en vez de encogerse. Se aplica
   siempre, sin punto de ruptura: cuando el contenedor ya mide 1000 px o más no
   aparece barra alguna, y la regla deja de depender de adivinar el viewport.

   Antes había un `@media (min-width: 1088px)` que ponía `min-width: 0`, y a
   partir de ahí `img { max-width: 100% }` encogía la figura al ancho de su
   contenedor —la vía de LECTURA— hasta 424 px: su texto de 12 px quedaba en
   4.2 px CSS. En pantalla ancha la figura salía MÁS PEQUEÑA que en estrecha. */
.desplazable > * { min-width: var(--via-ancha); }

/* Figuras y tablas van por la vía ANCHA, no por la de lectura: lo dice la tabla
   de vías del sistema —«ancha: figuras, tablas de datos, calculadoras»—. Se
   insertan dentro del cuerpo del artículo, que corre por la vía de lectura, así
   que se ensanchan simétricamente y se auto-limitan al viewport.

   El tope es 1200 px, el lienzo nativo de las figuras, no 1000: 1000 es el
   MÍNIMO legible, y estrechar una figura que cabe entera sería tirar los dos
   puntos de tamaño de texto que separan «correcto» de «límite aceptable». */
.figura, .cuerpo > .desplazable {
  /* El relleno propio se SUMA al ancho, no se resta de él: con border-box, un
     `padding` de 16 px dejaba la figura en 1168 px en vez de 1200 y su texto
     por debajo del tamaño nativo. Es el mismo error que tenían las vías. */
  /* Se acota el ancho EXTERIOR, no el interior. Sumar el marco después de
     acotar hacía que la portada desbordase a 430 px: el interior cabía y el
     marco no. Así el elemento nunca supera el viewport menos sus márgenes, y
     dentro queda el lienzo nativo cuando hay sitio. */
  --relleno-salido: 0px;
  --borde-salido: 0px;
  --marco-salido: calc(var(--relleno-salido) + var(--borde-salido));
  --ancho-exterior: min(calc(var(--ancho-salido) + 2 * var(--marco-salido)),
                        calc(100vw - 2 * var(--margen)));
  width: var(--ancho-exterior);
  margin-inline: calc((100% - var(--ancho-exterior)) / 2);
}

/* La figura llega a 1200, su lienzo nativo: 1000 es el MÍNIMO legible, y
   estrecharla cuando cabe entera tira los dos puntos de tamaño de texto que
   separan «correcto» de «límite aceptable». */
.figura { --ancho-salido: var(--via-completa); }

/* La tabla se queda en la vía ancha, que es la que el sistema le asigna. A 1200
   una tabla de tres columnas se estira sin ganar nada legible. */
.cuerpo > .desplazable { --ancho-salido: var(--via-ancha); }

img, svg { max-width: 100%; height: auto; }

/* Una palabra sin espacios más ancha que su columna empuja la PÁGINA entera, y
   eso rompe la única regla que no se negocia: el cuerpo no scrollea en
   horizontal. Pasa con `Startup/sanitation/programming/disposal` y con las
   líneas de subrayado de las hojas imprimibles, y pasaría con un número de
   modelo o una URL de la lista de fuentes. Se resuelve una vez, aquí, y no
   componente a componente. */
body { overflow-wrap: break-word; }

/* ------------------------------------------------------ movimiento reducido
   Se maneja aquí, en el sistema, no componente a componente: se eliminan
   desplazamiento, escala y rotación; se conserva la transición de opacidad. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
    transition-duration: var(--duration-fast) !important;
    scroll-behavior: auto !important;
  }
}

}