/* base.css — reinicio y elementos.
 *
 * Solo selectores de elemento. Ninguna clase de componente vive aquí: si algo
 * necesita un nombre, es de app.css. Y ni un valor literal: todo sale de
 * tokens.css.
 */

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

/* `hidden` tiene que ganar siempre.
 *
 * La regla que oculta [hidden] vive en la hoja del navegador, y CUALQUIER
 * `display` que ponga una clase de este proyecto la vence, aunque tenga menos
 * peso: las hojas del autor van por delante de las del navegador. Eso hacía que
 * el panel de resultados —que es `display: grid`— siguiera viéndose, vacío,
 * después de que main.js le pusiera `hidden`. */
[hidden] { display: none !important; }

html {
  /* Sin ajuste automático del tamaño de fuente al girar el móvil: en una tabla
   * de datos eso descuadra la retícula. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Contención lateral, con `clip` y NO con `hidden`.
 *
 * La causa se busca y se arregla —hay una auditoría que compara `scrollWidth`
 * con `clientWidth` a ocho anchos distintos y hoy sale limpia—, pero esto es un
 * documento jurídico ajeno metido en una tabla: basta una URL sin espacios o un
 * radicado kilométrico para que un día algo se salga de madre. `clip` corta ese
 * desbordamiento sin crear un contenedor de desplazamiento, así que las
 * cabeceras pegajosas y el panel de detalle siguen funcionando; `hidden` los
 * rompería. */
body { overflow-x: clip; }

/* La página ocupa la ventana entera y se reparte en tres franjas: cabecera,
 * cuerpo y pie. El cuerpo es el que crece, así que el pie se queda abajo del
 * todo aunque no haya informe, en vez de flotar a media pantalla con un vacío
 * debajo. */
body {
  margin: 0;
  min-block-size: var(--alto-visible);
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta-2);
  font-family: var(--fuente-texto);
  font-size: var(--t-m);
  line-height: var(--alto-linea);
}

/* Los titulares son la mitad del estilo: pesados, apretados y sin aire de
 * sobra. El peso no se pide con `font-weight` sino con la FAMILIA —Archivo
 * Black tiene un solo corte, y pedirle 700 solo consigue que el navegador la
 * engorde por su cuenta y salga sucia—, que es como los pide Jurisia. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--tinta);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-display);
  line-height: var(--alto-linea-titulo);
  letter-spacing: var(--tracking-display);
  /* Un titular grande partido por la mitad en un móvil estrecho es peor que
   * uno que sobresale: se parte por sílabas antes de desbordar. */
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); letter-spacing: 0; }

p { margin: 0 0 var(--e3); max-inline-size: var(--ancho-prosa); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--e3); padding-inline-start: var(--e5); }
li { margin-bottom: var(--e1); }

/* Todo dato va en monoespaciada. Es el criterio tipográfico del producto:
 * lo que se lee es prosa, lo que se compara es dato. */
code, kbd, samp, pre, time, output {
  font-family: var(--fuente-dato);
  font-size: 0.95em;
  letter-spacing: var(--tracking-dato);
}

a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  border-radius: var(--radio-hilo);
  transition: color var(--transicion), background var(--transicion);
}
/* En una pantalla táctil no hay «pasar por encima»: el resaltado se queda
 * pegado después del toque y confunde. El amarillo aparece aquí como lo que
 * es en este diseño: un rotulador, no un color de marca. */
@media (hover: hover) {
  a:hover { color: var(--tinta); background: var(--relleno-realce); }
}

/* El anillo de foco: dos capas, tinta fuera y papel dentro.
 *
 * La capa exterior es `outline` y no `box-shadow` a propósito. En el modo de
 * alto contraste de Windows, box-shadow se fuerza a `none` y el anillo
 * desaparecería entero; `outline-color`, en cambio, se sustituye por un color
 * del sistema y el trazo sobrevive. El hueco interior es lo que impide que el
 * anillo se funda con el borde de 2px que lleva casi todo aquí. */
:focus-visible {
  outline: var(--foco) solid var(--foco-tinta);
  outline-offset: var(--foco-hueco);
  box-shadow: 0 0 0 var(--foco-hueco) var(--foco-papel);
  border-radius: var(--radio-s);
}
:focus:not(:focus-visible) { outline: none; }

/* El botón es la pieza más brutalista que queda, y a propósito: en este diseño
 * la sombra dura ya no la lleva cualquier caja, solo lo que se puede pulsar.
 * Así la sombra vuelve a significar algo.
 *
 * El gesto de pulsar consiste en caer exactamente dentro del hueco que dejaba
 * su propia sombra: el desplazamiento y la sombra son gemelos —--empuje-m mide
 * lo mismo que --sombra-m— y por eso la silueta exterior no se mueve.
 *
 * Va en :active y NO en :hover. En una pantalla que se recorre con el ratón
 * durante horas, animar al pasar por encima la convierte en un campo de piezas
 * saltando. */
button {
  margin: 0;
  border: var(--borde);
  border-radius: var(--radio-s);
  padding: var(--e2) var(--e4);
  min-block-size: var(--toque);
  background: var(--papel-caja);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-s);
  /* En negra, como .nb-btn y .nb-chip de Jurisia. Un botón de borde marcado y
   * sombra dura con la letra a peso normal se lee como una caja con texto
   * dentro, no como algo que se pulsa. */
  font-weight: var(--peso-fuerte);
  line-height: 1.15;
  cursor: pointer;
  box-shadow: var(--sombra-s);
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), box-shadow var(--transicion-pulsar),
              transform var(--transicion-pulsar);
}
@media (hover: hover) {
  button:hover:not(:disabled) { background: var(--papel-hover); }
}
button:active:not(:disabled) { transform: var(--empuje-s); box-shadow: none; }
button:disabled {
  border-color: var(--linea);
  background: var(--papel-3);
  color: var(--tinta-4);
  box-shadow: none;
  cursor: not-allowed;
}
/* Con foco, la sombra dura cede el sitio al anillo: las dos capas a la vez
 * producen un amasijo de tres contornos. */
button:focus-visible { box-shadow: 0 0 0 var(--foco-hueco) var(--foco-papel); }

/* Los campos llevan borde marcado pero NO sombra: un formulario con seis cajas
 * flotando es ruido, y además la sombra compite con el anillo de foco, que aquí
 * es la señal que de verdad importa. */
textarea, input {
  margin: 0;
  border: var(--borde);
  border-radius: var(--radio-s);
  padding: var(--e3);
  background: var(--papel-caja);
  color: var(--tinta);
  font-family: var(--fuente-dato);
  font-size: var(--t-campo);
  line-height: var(--alto-linea);
}
textarea { display: block; inline-size: 100%; resize: vertical; }
textarea::placeholder, input::placeholder { color: var(--tinta-3); font-family: var(--fuente-texto); }

/* Dentro de los datos, el estilo se retira: la tabla no lleva sombra, ni radio,
 * ni bordes verticales de celda. Lo único que se queda es la línea horizontal.
 * Todo el peso visual lo pone la caja que la contiene, no cada fila. */
table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-s);
}
/* La cabecera se queda pegada arriba: con doscientas citas, saber qué columna
 * se está mirando no puede depender de recordarlo. Necesita fondo opaco, que en
 * este estilo ya lo tiene. */
th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  padding: var(--celda-y) var(--celda-x);
  border-block-end: var(--borde);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  text-align: start;
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  white-space: nowrap;
}
td {
  padding: var(--celda-y) var(--celda-x);
  border-block-end: 1px solid var(--linea-suave);
  vertical-align: top;
}

hr {
  block-size: 0;
  margin: var(--e6) 0;
  border: 0;
  border-block-start: var(--borde-fino);
}

summary { cursor: pointer; }
summary::marker { color: var(--tinta-3); }

::selection { background: var(--relleno-realce); color: var(--tinta-sobre-realce); }

/* Un dato que se puede copiar no debería obligar a apuntar con precisión de
 * cirujano: la barra de desplazamiento de las cajas internas se hace visible y
 * gruesa en vez de esconderse. Maciza y sobre crema, en la misma gramática de
 * bloques que el resto del sitio. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tinta) var(--papel-2);
}

/* Quien pidió menos movimiento no recibe ninguno. Aquí es barato cumplirlo:
 * ninguna animación de este producto transporta información que el estado
 * final no diga por sí solo. Se apaga sobre todo el gesto de pulsar, que es un
 * desplazamiento, y se conserva el cambio de color, que no lo es. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button:active:not(:disabled) { transform: none; }
}