/* app.css — retícula y componentes.
 *
 * Ni un valor literal: todo por var(). Si hace falta un token nuevo, se añade
 * a tokens.css, no aquí.
 *
 * ── cómo se reparte el estilo ────────────────────────────────────────────────
 *
 * Hay una regla de reparto y conviene respetarla al añadir cualquier cosa:
 *
 *   LA SOMBRA DURA ES DE LO QUE SE PULSA. Botones, filtros, la casilla y el
 *   enlace de vuelta a Jurisia. De nada más.
 *
 *   LAS TARJETAS LLEVAN BORDE Y NADA MÁS. .zona, .informe, .citas, .detalle,
 *   .leyenda y .aviso se distinguen del papel por su borde y por ser blancas
 *   sobre un fondo tintado. No flotan.
 *
 *   DENTRO DE LOS DATOS NO HAY NI BORDE NI SOMBRA. Filas, celdas, rótulos,
 *   pares clave-valor y fichas del rastro se separan con una línea de pelo y
 *   con aire. Nada más.
 *
 * Antes esto no era así —cada caja tenía borde de 3px y su propio bloque de
 * sombra— y el resultado era una pantalla que vibraba: con veinte elementos
 * gritando a la vez no queda jerarquía ninguna.
 *
 * ── el bloque que importa ────────────────────────────────────────────────────
 *
 * El más importante del archivo es «los ocho estados». Ahí se decide cómo se
 * distingue, de un vistazo y sin leer, una cita confirmada de una que la fuente
 * no devolvió y de una que no se pudo comprobar. Esa distinción es el producto
 * entero, así que NO descansa en el color: ninguno de los ocho tiene un tinte
 * que los demás no tengan. Cada estado es una GEOMETRÍA, en tinta sobre papel.
 */

/* ── armazón ───────────────────────────────────────────────────────────────── */

.salto {
  position: absolute;
  inset-inline-start: var(--e4);
  inset-block-start: calc(var(--e4) * -4);
  z-index: 10;
  padding: var(--e2) var(--e4);
  border: var(--borde);
  border-radius: var(--radio-s);
  background: var(--relleno-accion);
  color: var(--tinta-sobre-accion);
  font-weight: var(--peso-medio);
  text-decoration: none;
  box-shadow: var(--sombra-s);
  transition: inset-block-start var(--transicion);
}
.salto:focus { inset-block-start: var(--e4); }

.envoltura {
  inline-size: 100%;
  max-inline-size: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* La cabecera es una barra fina y nada más: de quién es esto, qué es y cómo
 * volver. Antes era una banda de color a sangre de casi trescientos píxeles que
 * se llevaba por delante lo único que la pantalla tiene que hacer, que es
 * invitar a soltar un escrito.
 *
 * Es además la costura con el resto de Jurisia. Quien llega aquí viene de
 * jurisia.com.co y tiene que reconocer el sitio en el primer vistazo y tener a
 * mano la puerta de vuelta; por eso el monograma es el MISMO archivo que sirve
 * de favicon al sitio, y no un dibujo parecido que un día se quedará viejo. */
.cabecera {
  flex: 0 0 auto;
  /* Trazo grueso: es la única línea estructural de la página y en este sistema
   * eso se dice con 3px, como los bloques de la portada de Jurisia. */
  border-block-end: var(--nb-bd-thick) solid var(--borde-color);
  background: var(--papel-caja);
  /* La altura, reservada AQUÍ y no sólo en .cabecera__barra.
   *
   * El comentario de index.html dice que la barra se queda vacía en el HTML
   * «para que no salte», y el razonamiento es correcto, pero faltaba la línea
   * que lo hacía verdad: los 64px los ponía .cabecera__barra, que es un <div>
   * que crea cabecera.js. Primer pintado 3px; al ejecutarse el módulo, 67px, y
   * el documento entero bajaba de golpe.
   *
   * Con `border-box` esta medida incluye el trazo de abajo, así que el hueco
   * útil sigue siendo exactamente el --e16 que pide .cabecera__barra. */
  min-block-size: calc(var(--e16) + var(--nb-bd-thick));
}
.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-block-size: var(--e16);
}
.cabecera__marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  /* Sin esto, un título largo impide que la fila se encoja y la barra desborda
   * a lo ancho en cuanto la ventana baja de 400px. */
  min-inline-size: 0;
  margin: 0;
  font-size: var(--t-l);
}
/* La flecha del enlace de vuelta. Va en la fuente de datos —monoespaciada— y
 * con interlineado 1 para que no arrastre la linea base de la barra: es un
 * glifo decorativo, no texto que se lea. */
.cabecera__flecha {
  font-family: var(--fuente-dato);
  line-height: 1;
  flex: 0 0 auto;
}

/* La insignia: cuadro de tinta con el monograma en dorado, que es la inversa
 * exacta del favicon. La misma pieza que lleva la barra lateral del chat. El
 * dorado aparece aquí de RELLENO, que es lo único para lo que sirve: escrito
 * da 1,6:1 y no se lee. */
.cabecera__icono {
  display: grid;
  place-items: center;
  inline-size: var(--e8);
  block-size: var(--e8);
  flex: 0 0 auto;
  border: var(--nb-bd-hair) solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
}
.cabecera__icono img { display: block; inline-size: var(--e5); block-size: var(--e5); }
/* El nombre de la casa y el del servicio, con distinto peso: lo primero dice de
 * quién es esto y lo segundo qué es. Van dentro del mismo <h1> porque juntos
 * son el título de la página, y así es como lo lee un lector de pantalla:
 * «JURISIA · Verificador de citas». */
.cabecera__jurisia {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-display);
}
.cabecera__producto {
  min-inline-size: 0;
  border-inline-start: var(--borde-fino);
  padding-inline-start: var(--e3);
  color: var(--tinta-3);
  font-family: var(--fuente-texto);
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  letter-spacing: 0;
}
.cabecera__acciones { display: flex; align-items: center; gap: var(--e2); flex: 0 0 auto; }
/* La puerta de vuelta, con la física de .nb-chip: lleva relieve porque se
 * pulsa, y al pulsarla cae exactamente en el hueco de su propia sombra. */
.cabecera__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border: var(--borde);
  border-radius: var(--radio);
  padding: var(--e2) var(--e3);
  background: var(--papel-2);
  color: var(--tinta);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sombra-s);
  transition: transform var(--transicion-pulsar), box-shadow var(--transicion-pulsar),
              background var(--transicion), color var(--transicion);
}
@media (hover: hover) {
  .cabecera__volver:hover { background: var(--relleno-accion); color: var(--tinta-sobre-accion); }
}
.cabecera__volver:active { transform: var(--empuje-s); box-shadow: none; }

.principal { flex: 1 1 auto; padding-block: var(--aire-hoja); }
/* El hueco entre secciones tambien cede en ventanas bajas: son cuatro huecos
 * entre la portada y el pie, y a 24px fijos son 96px que en 1366x700 no hay. */
.seccion + .seccion { margin-block-start: clamp(var(--e3), 2svh, var(--e6)); }
.seccion:empty { display: none; }

/* Mientras no hay informe, la página es una portada: la columna se estrecha,
 * se centra en la ventana y el pie se queda abajo del todo. En cuanto llega un
 * informe, la misma retícula se ensancha para dejarle sitio a la tabla.
 *
 * Todo con `:has()` y sin una línea de JavaScript: el estado ya está en el DOM
 * —#zona-informe está vacío o no lo está— y no hace falta duplicarlo en una
 * clase que alguien tendría que acordarse de mantener. */
.principal:has(#zona-informe:empty) {
  display: grid;
  align-content: center;
}
.principal:has(#zona-informe:empty) .envoltura { max-inline-size: var(--ancho-columna); }
.principal:has(#zona-informe:not(:empty)) .portada { display: none; }
/* Y con la portada se va el bloque explicativo del final: quien ya tiene un
 * informe delante no necesita que le expliquen otra vez qué hace la
 * herramienta. Escrito aquí al lado y no en una regla propia, para que el día
 * que una cambie no se quede la otra. */
.principal:has(#zona-informe:not(:empty)) .explicacion { display: none; }
/* Y al revés: la leyenda de los ocho resultados no tiene nada que explicar
 * mientras no haya resultados. Antes salía ya en la portada, ocupando sitio y
 * hablando de un vocabulario que el usuario todavía no ha visto. */
.principal:has(#zona-informe:empty) #zona-leyenda { display: none; }

/* Con un informe delante, la zona de entrada deja de ser el asunto de la
 * pantalla y se encoge: el área de soltar pierde aire, el área de pegar baja a
 * lo mínimo y la nota de alcance se calla. Sigue estando entera y sigue
 * funcionando igual —se puede verificar otro escrito sin recargar—, pero deja
 * de competir por la atención con lo que el usuario vino a leer. */
.principal:has(#zona-informe:not(:empty)) .zona__soltar { padding-block: var(--e4); }
.principal:has(#zona-informe:not(:empty)) .zona__texto { block-size: calc(var(--e16) + var(--e4)); min-block-size: 0; }

.pie {
  flex: 0 0 auto;
  border-block-start: var(--borde-fino);
  padding-block: clamp(var(--e2), 1.5svh, var(--e4)) clamp(var(--e2), 1.8svh, var(--e5));
  color: var(--tinta-3);
  font-size: var(--t-s);
  text-align: center;
}
/* En el pie la prosa puede ser más ancha que en el cuerpo: son tres apuntes
 * cortos seguidos, no un párrafo que haya que leer con calma. */
.pie .prosa { margin-inline: auto; max-inline-size: 100ch; font-size: var(--t-xs); }

/* ── portada ───────────────────────────────────────────────────────────────── */

/* Lo que hay que haber leído antes de pegar un escrito, y ni una palabra más.
 * La promesa en una frase y el límite en otra: el límite va destacado porque es
 * lo que impide que alguien lea «no devuelta» como «inventada». */
.portada { text-align: center; margin-block-end: var(--aire); }
.portada__titulo {
  font-size: var(--t-titulo);
  font-weight: var(--peso-titulo);
  /* Desde que el titular es el <h1> de la página, base.css ya le da este
   * interlineado. Se deja escrito igualmente porque lo que manda aquí es la
   * CLASE: si mañana el titular vuelve a ser un `p` —o la clase se reutiliza en
   * otro sitio—, a 36px un interlineado de 1,6 separa las dos líneas media
   * pulgada y el titular deja de leerse como un bloque. */
  line-height: var(--alto-linea-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--tinta);
  /* 22ch es la medida que mejor se lee, y se mantiene mientras la ventana da
   * de si. En una ventana BAJA el titular a 22ch se parte en tres lineas -138px
   * de las 700 que hay-, y ahi el alto vale mas que la medida: se ensancha a
   * 34ch, cae a dos lineas y se recuperan cuarenta y pico pixeles sin tocar el
   * cuerpo de letra. */
  max-inline-size: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.portada__entrada {
  margin: var(--e3) auto 0;
  max-inline-size: 60ch;
  color: var(--tinta-2);
  text-wrap: pretty;
}



/* En una ventana baja, la frase que describe el servicio es lo primero que
 * sobra: el titular ya dice qué hace esto y el límite no se puede quitar.
 *
 * Y SOLO si la ventana es tambien estrecha. La regla llevaba unicamente la
 * condicion de alto, asi que en un portatil de 1366x630 -bajo de alto por las
 * barras del navegador, pero ancho de sobra- la frase desaparecia aunque
 * cupiera. Medido: con la frase visible, a 1024px de ancho y mas cabe; a 820 y
 * menos, no. El umbral esta entre los dos. */
@media (max-height: 50em) and (max-width: 62em) {
  .portada__entrada { display: none; }
}

/* ── lo que lee un buscador ────────────────────────────────────────────────── */

/* La explicación del final: qué comprueba, contra qué fuentes, qué puede decir
 * cada resultado y las preguntas frecuentes.
 *
 * Va DEBAJO de la herramienta, y eso es una decisión de producto antes que de
 * posicionamiento: quien llega con un escrito que comprobar tiene que poder
 * pegarlo sin leer una línea. Esto es para quien llega de una búsqueda y
 * todavía no sabe si le sirve.
 *
 * Y no se oculta en el primer pintado por ningún motivo. Contenido escondido
 * de salida es contenido que el buscador descuenta, y ésta es la única prosa
 * que la página sirve sin ejecutar una línea de JavaScript: es justo lo que le
 * pasaba a la leyenda de los resultados, que se construye desde format.js y
 * además está en display:none mientras no hay informe. */
.explicacion {
  margin-block-start: var(--e12);
  border-block-start: var(--borde-fino);
  padding-block-start: var(--e8);
  /* La portada se centra; esto es prosa larga y se lee alineada al principio,
   * también en la ventana ancha donde la portada sí va centrada. */
  text-align: start;
}
.explicacion__bloque + .explicacion__bloque { margin-block-start: var(--e10); }
.explicacion h2 { margin-block-end: var(--e3); }
/* Los h3 —las tres familias de resultado y cada una de las nueve preguntas—
 * bajan a cuerpo grande. A --t-l y en Archivo Black, nueve preguntas seguidas
 * se leen como nueve titulares y la sección pierde el hilo. */
.explicacion h3 {
  margin-block: var(--e5) var(--e2);
  font-size: var(--t-m);
}
.explicacion li { margin-block-end: var(--e2); }
/* En prosa apagada, el nombre de cada corte y el verbo de cada paso son lo
 * que se busca con la vista: suben a la tinta de los datos. */
.explicacion strong { color: var(--tinta); }

/* ── la pista ──────────────────────────────────────────────────────────────── */

/* Se abre con el ratón Y con el foco. Lo segundo es lo que la hace utilizable
 * con teclado y con el dedo: `:focus-within` la mantiene abierta mientras el
 * botón esté enfocado, y al salir se cierra sola. Cero JavaScript. */
.pista { position: relative; display: inline-flex; vertical-align: middle; }
.pista__boton {
  inline-size: var(--e6);
  block-size: var(--e6);
  min-block-size: 0;
  padding: 0;
  border: var(--borde-fino);
  border-radius: 50%;
  background: var(--papel-caja);
  color: var(--tinta-3);
  font-family: var(--fuente-dato);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  box-shadow: none;
}
@media (hover: hover) {
  /* El borde se queda en tinta al pasar por encima. Antes el relleno era un
   * azul oscuro y teñir el borde del mismo color no costaba nada; el dorado,
   * en cambio, da 1,8:1 contra la tarjeta blanca, y el disco se quedaba sin
   * contorno justo en el estado en que hay que verlo. */
  .pista__boton:hover { background: var(--relleno-accion); border-color: var(--borde-color); color: var(--tinta-sobre-accion); }
}
.pista__globo {
  /* `fixed` y no `absolute`: el globo se coloca respecto a la VENTANA, lo cual
   * es lo unico que permite voltearlo arriba cuando abajo no cabe. Colgando del
   * boton, un globo de cuatro lineas a media altura se salia por el pie y se
   * veia como una caja encimada sobre la herramienta.
   *
   * Las coordenadas las escribe pista.js al abrirlo; aqui solo esta el aspecto
   * y el estado cerrado. */
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 200;
  inline-size: max-content;
  max-inline-size: 26rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--borde);
  border-radius: var(--radio-s);
  padding: var(--e3) var(--e4);
  background: var(--papel-caja);
  color: var(--tinta-2);
  font: 400 var(--t-s) / var(--alto-linea) var(--fuente-texto);
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  overflow-wrap: anywhere;
  box-shadow: var(--sombra-m);
  /* `display: none` y no `visibility: hidden`: oculto por visibilidad, el globo
   * SIGUE ocupando su caja y ensancha el documento. */
  display: none;
}

.pista__globo[data-abierto] { display: block; }

/* La punta. Es lo que convierte dos cajas sueltas en una caja que sale de un
 * boton: sin ella, el globo aparece flotando y el usuario tiene que deducir de
 * donde vino. Va en --punta-x, que pista.js pone sobre el centro del boton y no
 * sobre el centro del globo, porque dejan de coincidir en cuanto el globo se
 * empuja contra un borde de la pantalla. */
.pista__globo::before,
.pista__globo::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--punta-x, 50%) - 7px);
  border: 7px solid transparent;
}
.pista__globo[data-lado='abajo']::before {
  inset-block-start: -14px;
  border-block-end-color: var(--borde-color);
}
.pista__globo[data-lado='abajo']::after {
  inset-block-start: -12px;
  border-block-end-color: var(--papel-caja);
}
.pista__globo[data-lado='arriba']::before {
  inset-block-end: -14px;
  border-block-start-color: var(--borde-color);
}
.pista__globo[data-lado='arriba']::after {
  inset-block-end: -12px;
  border-block-start-color: var(--papel-caja);
}

/* ── piezas de texto ───────────────────────────────────────────────────────── */

.rotulo {
  display: block;
  color: var(--tinta-3);
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
}
.dato {
  font-family: var(--fuente-dato);
  font-size: var(--t-s);
  color: var(--tinta);
  letter-spacing: var(--tracking-dato);
  overflow-wrap: anywhere;
}
.dato--fuerte { font-weight: var(--peso-fuerte); }
.dato--apagado { color: var(--tinta-3); }
.prosa { max-inline-size: var(--ancho-prosa); color: var(--tinta-2); }
.prosa--menor { font-size: var(--t-s); }

/* ── el chasis ─────────────────────────────────────────────────────────────── */

/* Las cajas de primer nivel comparten el mismo cuerpo. Se declara UNA vez:
 * repetirlo en seis bloques es lo que hace que dentro de un año una de ellas
 * tenga 2px de borde y las otras 3, y nadie sepa cuál es la correcta.
 *
 * Aquí entraban también las cuatro tarjetas del segundo producto que tenía
 * este proyecto. Ese no se trajo a Jurisia y su hoja se fue entera con él; si
 * algún día vuelve, su sitio es esta lista y no un bloque aparte, para que
 * el chasis siga estando declarado una sola vez. */
.zona,
.informe,
.citas,
.detalle,
.leyenda,
.aviso {
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--papel-caja);
}

/* ── botones ───────────────────────────────────────────────────────────────── */

/* La acción principal es la única pieza con la sombra grande: es lo que hay
 * que pulsar y tiene que pesar más que lo que la rodea. */
.boton--principal {
  background: var(--relleno-accion);
  color: var(--tinta-sobre-accion);
  font-size: var(--t-m);
  font-weight: var(--peso-titulo);
  padding-inline: var(--e6);
  box-shadow: var(--sombra-m);
}
.boton--principal:active:not(:disabled) { transform: var(--empuje-m); box-shadow: none; }
.boton--principal:hover:not(:disabled) { background: var(--relleno-accion-vivo); }
.boton--principal:disabled { background: var(--papel-3); color: var(--tinta-4); }

.boton--menor {
  min-block-size: var(--toque);
  padding: var(--e1) var(--e3);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
}

.boton--plano { font-weight: var(--peso-medio); }

.barra-botones { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ── avisos ────────────────────────────────────────────────────────────────── */

/* Un aviso es un fallo de la HERRAMIENTA, nunca un juicio sobre una cita. Por
 * eso no comparte ni una regla con los estados: si se parecieran, alguien
 * leería «no se pudo conectar» como «la cita está mal».
 *
 * Y es el ÚNICO sitio del producto donde aparece el rojo. Puede hacerlo porque
 * lo que está señalando es un fallo nuestro, y el texto del aviso lo dice con
 * todas las letras. */
.aviso {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e4) var(--e5);
  background: var(--tinte-falta);
}
.aviso__cuerpo { flex: 1 1 auto; min-inline-size: 0; }
.aviso__titulo { font-weight: var(--peso-titulo); font-size: var(--t-m); }
.aviso__texto { margin-block-start: var(--e2); color: var(--tinta-2); font-size: var(--t-s); }
.aviso__acciones { margin-block-start: var(--e3); }
.aviso__titulo { color: var(--sello-falta); }
/* El de trabajo en curso no es un fallo: va en el azul de la casa, no en el
 * tinte de lo que se rompió. */
.aviso--neutro { background: var(--papel-marca); }
.aviso--neutro .aviso__titulo { color: var(--tinta); }
/* Y la espera tampoco es un fallo. El 409 de «ya hay una verificación en
 * vuelo» dice que este servicio procesa un documento a la vez, no que algo se
 * haya roto: va en el ámbar de «espérese» y no en el rojo de «se rompió». */
.aviso--espera { background: var(--tinte-ojo); }
.aviso--espera .aviso__titulo { color: var(--sello-ojo); }

/* ── zona de entrada ───────────────────────────────────────────────────────── */

/* Las dos vías de entrada, una al lado de la otra en cuanto hay ancho.
 *
 * Apiladas ocupaban 460px de alto y empujaban el botón de verificar fuera de
 * la pantalla en un portátil. Y además se leían como los pasos de un
 * formulario, cuando son alternativas: o se suelta un archivo, o se pega el
 * texto. En paralelo se ve de un vistazo que hay dos caminos y que basta con
 * uno. El pie —la opción y los botones— cruza por debajo de los dos, porque
 * vale para cualquiera de ellos. */
.zona {
  display: grid;
  gap: var(--aire) var(--e5);
  padding: var(--e4) var(--e5) var(--e5);
}
@media (min-width: 52em) {
  .zona { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .zona__pie { grid-column: 1 / -1; }
  /* En dos columnas, cada vía ocupa lo mismo de alto: dos cajas de distinta
   * altura una al lado de la otra se leen como un descuadre. */
  .zona__soltar { display: grid; align-content: center; }
  .zona__pegar { display: flex; flex-direction: column; }
  .zona__texto { flex: 1 1 auto; block-size: auto; min-block-size: calc(var(--e16) + var(--e5)); }
}

/* El área de soltar: borde discontinuo —la convención de «aquí se puede tirar
 * algo»— y todo centrado, incluido el archivo elegido. */
.zona__soltar {
  border: var(--borde-ancho) dashed var(--linea);
  border-radius: var(--radio-s);
  padding: var(--aire) var(--e5);
  text-align: center;
  transition: background var(--transicion), border-color var(--transicion);
}
/* El único momento en que el fondo cambia de color: hay un archivo encima y
 * hay que decir dónde va a caer. */
.zona--encima .zona__soltar {
  background: var(--papel-marca);
  border-style: solid;
  border-color: var(--borde-color);
}

/* ── soltar en cualquier parte de la ventana ─────────────────────────────────
 *
 * El recuadro mide 250 px en una pantalla de mil y pico, y quien arrastra un
 * escrito apunta a la pagina, no al rectangulo. Desde que el `drop` se escucha
 * en `document`, el archivo entra se suelte donde se suelte; esto es lo que lo
 * DICE, porque un gesto que funciona sin senal se siente como que no funciono.
 *
 * El borde va en un ::after sobre la ventana, no sobre el <body>: un borde en
 * el body empujaria el contenido y la pagina entera daria un salto de 3 px en
 * el momento mas inoportuno. `position: fixed` no ocupa sitio.
 *
 * `pointer-events: none` es obligatorio: sin el, esta capa se traga el `drop` y
 * el archivo nunca llega. */
body.arrastrando::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  border: var(--nb-bd-thick, 3px) dashed var(--borde-color);
  background: color-mix(in srgb, var(--papel-marca) 45%, transparent);
}

/* El recuadro, mientras tanto, sigue diciendo «aqui dentro» con su propio
 * resalte; los dos conviven a proposito: uno dice «vale en cualquier sitio» y
 * el otro «y este es el sitio natural». */
body.arrastrando .zona__soltar {
  border-color: var(--borde-color);
  border-style: solid;
}

@media (prefers-reduced-motion: reduce) {
  body.arrastrando::after { transition: none; }
}
.zona__titulo {
  color: var(--tinta);
  font-size: var(--t-l);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
}
.zona__ayuda { margin: var(--e2) auto 0; color: var(--tinta-3); font-size: var(--t-s); max-inline-size: var(--ancho-prosa); }
.zona__acciones { margin-block-start: var(--e4); display: flex; justify-content: center; gap: var(--e2); flex-wrap: wrap; }
.zona__archivo { display: none; }

/* El archivo elegido. `inline-flex` y `margin-inline: auto`: como bloque, la
 * ficha se estiraba de lado a lado del área con su contenido pegado a la
 * izquierda, debajo de un texto centrado, y se veía torcida. */
.zona__elegido:not(:empty) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2) var(--e3);
  /* `justify-self` y no solo `inline-flex`: cuando el área de soltar pasa a ser
   * una rejilla —en dos columnas—, sus hijos se convierten en elementos de
   * rejilla y el navegador bloquea el `inline-flex`. Sin esto, la ficha vuelve
   * a estirarse de lado a lado con el texto pegado a la izquierda debajo de un
   * bloque centrado, que es exactamente el descuadre que se venía a corregir. */
  justify-self: center;
  margin-block-start: var(--e5);
  border: var(--borde-fino);
  border-radius: var(--radio-s);
  padding: var(--e2) var(--e2) var(--e2) var(--e4);
  background: var(--papel-2);
  text-align: start;
}

/* La separación entre las dos vías de entrada. La palabra va encima de la
 * línea, que es lo que dice «una cosa o la otra» sin necesidad de explicarlo. */
.zona__pegar { min-inline-size: 0; }
.zona__pegar-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-block-end: var(--e2);
}
.zona__contador { color: var(--tinta-3); font-family: var(--fuente-dato); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.zona__contador--excedido {
  border-radius: var(--radio-hilo);
  padding: 0 var(--e1);
  background: var(--relleno-fallo);
  color: var(--blanco);
  font-weight: var(--peso-fuerte);
}
/* Alto medido contra la ventana, no en filas: `rows=10` deja un área de diez
 * líneas que en un portátil empuja el botón de verificar fuera de la pantalla,
 * y en un monitor grande desaprovecha la mitad del hueco. Sigue siendo
 * redimensionable a mano para quien quiera ver más texto de una vez. */
.zona__texto { block-size: clamp(calc(var(--e16) + var(--e5)), 14svh, calc(var(--e16) * 2.5)); }

/* El pie de la zona: a la izquierda lo que informa, a la derecha lo que actúa.
 * La acción principal cierra la fila por la derecha, que es donde se termina de
 * leer. */
.zona__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
}
/* La opción ocupa lo que mide y ni un píxel más: como pastilla, estirarla de
 * lado a lado dejaba medio control vacío. Los botones cierran la fila por la
 * derecha, que es donde se termina de leer. */
.zona__pie .opcion { flex: 0 1 auto; min-inline-size: 0; }
/* El aviso local casi siempre está vacío, y vacío seguía ocupando un hueco en
 * el reparto de la fila —lleva márgenes automáticos— y empujaba la opción al
 * centro. Cuando tiene algo que decir, vuelve y se pone el primero. */
.zona__pie .zona__ayuda { margin-inline: 0; text-align: start; }
.zona__pie .zona__ayuda:empty { display: none; }
.zona__pie .barra-botones { flex: 0 0 auto; margin-inline-start: auto; }

/* El campo trampa. Invisible para una persona, presente para quien rellena
 * formularios a ciegas. No usa display:none porque eso lo delata. */
.trampa {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── opción de contraste textual ───────────────────────────────────────────── */

/* Una pastilla con la casilla dentro, no una casilla suelta con dos párrafos
 * de letra pequeña colgando. Al marcarla se tiñe: el control dice por sí mismo
 * que está activo, sin depender de que se vea la marca de 20px. */
.opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border: var(--borde-fino);
  border-radius: var(--radio-pastilla);
  padding: var(--e1) var(--e2) var(--e1) var(--e4);
  background: var(--papel-caja);
  transition: background var(--transicion), border-color var(--transicion);
}
.opcion__control { display: inline-flex; align-items: center; gap: var(--e3); cursor: pointer; }
.opcion .casilla {
  inline-size: var(--casilla);
  block-size: var(--casilla);
  margin: 0;
  /* En tinta y no en el dorado de la acción: el navegador elige solo el
   * color del palomito según la luminancia del acento, y sobre un amarillo
   * claro le sale turbio. En tinta plena es blanco sobre negro. */
  accent-color: var(--tinta);
  cursor: pointer;
}
.opcion__texto { color: var(--tinta); font-weight: var(--peso-medio); font-size: var(--t-s); }
/* Marcada, la pastilla se tiñe y su borde pasa al ámbar. Al ámbar y no al
 * dorado del relleno: sobre el crema teñido el dorado da 1,3:1 y el borde
 * desaparecía —es la regla de los dos dorados, aplicada a un borde—. */
.opcion:has(.casilla:checked) { border-color: var(--acento); background: var(--papel-marca); }
.opcion:has(.casilla:disabled) { opacity: 0.55; }
.opcion:has(.casilla:disabled) .opcion__control,
.opcion:has(.casilla:disabled) .casilla { cursor: default; }

/* ── barra del informe ─────────────────────────────────────────────────────── */

.informe { overflow: clip; }
.informe__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  padding: var(--e5);
}
.informe__cifras { display: flex; gap: var(--e6) var(--e8); flex-wrap: wrap; }
.cifra { min-inline-size: calc(var(--e16) + var(--e4)); }
.cifra__valor {
  display: block;
  color: var(--tinta);
  font-family: var(--fuente-dato);
  font-size: var(--t-xxl);
  font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
  line-height: var(--alto-linea-titulo);
  letter-spacing: var(--tracking-titulo);
}
/* Las cifras se subrayan con un trazo de rotulador del color de su familia, no
 * cambiando el color del número: un número teñido se lee peor, y el trazo se ve
 * igual en gris. El de atención va en amarillo, que es lo que hace un
 * subrayador sobre un folio; el de confirmadas, en el verde de su familia. */
.cifra--bien .cifra__valor,
.cifra--ojo .cifra__valor { display: inline-block; }
.cifra--bien .cifra__valor { box-shadow: inset 0 calc(var(--e1) * -1) 0 0 var(--sello-bien); }
.cifra--ojo .cifra__valor { box-shadow: inset 0 calc(var(--e1) * -1) 0 0 var(--relleno-realce); }
.cifra__rotulo { margin-block-start: var(--e2); }

.informe__reparto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  padding: var(--e3) var(--e5);
  border-block-start: var(--borde-fino);
  background: var(--papel-2);
}
/* Cada estado del reparto lleva el tinte de su familia. Se elige con `:has()`
 * mirando la insignia que hay dentro, así que el componente no tiene que saber
 * nada de familias ni pasar una clase más. */
.reparto {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  /* Con borde, y no solo con su tinte. El tinte de la familia `mudo` es el
   * mismo crema que el de la banda que contiene las pastillas, así que sin
   * línea esa pastilla se quedaba sin límite y flotaba en el fondo. Es la
   * regla de la casa: lo que hace visible el borde de una caja es el borde. */
  border: var(--borde-fino);
  border-radius: var(--radio-pastilla);
  padding: var(--e1) var(--e3);
  background: var(--papel-caja);
  font-family: var(--fuente-dato);
  font-size: var(--t-xs);
  color: var(--tinta-2);
}
.reparto:has(.estado--CONFIRMADA) { background: var(--tinte-bien); }
.reparto:has(.estado--METADATOS_DISCREPANTES),
.reparto:has(.estado--AMBIGUA),
.reparto:has(.estado--INCOMPLETA_RESUELTA) { background: var(--tinte-ojo); }
.reparto:has(.estado--NO_DEVUELTA_POR_LA_FUENTE) { background: var(--tinte-falta); }
.reparto:has(.estado--NO_VERIFICABLE),
.reparto:has(.estado--FUERA_DE_ALCANCE),
.reparto:has(.estado--PENDIENTE_DE_PUBLICACION) { background: var(--tinte-mudo); }
.reparto__n { font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte); color: var(--tinta); }
.informe__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  padding: var(--e3) var(--e5);
  border-block-start: var(--borde-fino);
}
.informe__momento { color: var(--tinta-3); font-family: var(--fuente-dato); font-size: var(--t-xs); }

/* ── panel: tabla + detalle ────────────────────────────────────────────────── */

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ancho-detalle);
  gap: var(--e5);
  align-items: start;
}
@media (max-width: 68.75em) {
  .panel { grid-template-columns: minmax(0, 1fr); }
}

/* ── tabla de citas ────────────────────────────────────────────────────────── */

/* `clip` y no `hidden`: `hidden` convertiría la caja en un contenedor de
 * desplazamiento y la cabecera pegajosa de la tabla dejaría de pegarse a nada.
 * `clip` recorta el radio igual y no crea scroll. */
.citas { overflow: clip; }
.citas__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  border-block-end: var(--borde-fino);
}
/* Filtros: cada uno es un interruptor con su propio borde y su sombra. No se
 * solapan entre ellos —así cada objetivo de puntero está separado del vecino,
 * que es lo que pide la norma de tamaño mínimo— y el activo se invierte a tinta
 * plena, que es la señal que sobrevive a la impresión y al daltonismo. */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); }
.filtro {
  min-block-size: var(--toque);
  border-radius: var(--radio-s);
  padding: var(--e1) var(--e3);
  color: var(--tinta-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
}
.filtro[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel-caja);
  transform: var(--empuje-s);
  box-shadow: none;
}

/* Sin contenedor de desplazamiento: las celdas parten las cadenas largas y la
 * tabla cabe siempre. Un envoltorio con overflow crearía un contenedor de
 * scroll y la cabecera pegajosa dejaría de pegarse a nada. */
.citas__tabla { table-layout: auto; }
.citas__tabla th { background: var(--papel-marca); color: var(--tinta-sobre-marca); }
.citas__tabla th:first-child, .citas__tabla td:first-child { padding-inline-start: var(--e4); }
.citas__tabla th:last-child, .citas__tabla td:last-child { padding-inline-end: var(--e4); }
/* La cabecera de una columna numérica se alinea con sus números. */
.citas__tabla th:last-child { text-align: end; }

/* Cada fila lleva el tinte de su familia.
 *
 * El tinte es una AYUDA, no el dato: la geometría de la marca y el nombre del
 * estado siguen en la celda y siguen siendo lo que manda. Si se imprime, si se
 * mira en gris o si el sistema impone sus colores, los tintes desaparecen y no
 * se pierde nada.
 *
 * Y hay una familia que no se tiñe de rojo por mucho que suene a negativa: «no
 * se pudo comprobar», «fuera del alcance» y «pendiente de publicación» van en
 * gris, porque ahí el que falló fue este servicio o la fuente, no el escrito.
 *
 * Cada fila publica su tinte en dos variables propias y el hover lee la segunda:
 * así una regla sola sirve para las cuatro familias en vez de cuatro reglas de
 * hover que alguien tendría que mantener a la par. */
.fila {
  --fila-tinte: transparent;
  --fila-tinte-alto: var(--papel-hover);
  background: var(--fila-tinte);
  cursor: pointer;
  transition: background var(--transicion);
}
.fila[data-estado="CONFIRMADA"] { --fila-tinte: var(--tinte-bien); --fila-tinte-alto: var(--tinte-bien-alto); }
.fila[data-estado="METADATOS_DISCREPANTES"],
.fila[data-estado="AMBIGUA"],
.fila[data-estado="INCOMPLETA_RESUELTA"] { --fila-tinte: var(--tinte-ojo); --fila-tinte-alto: var(--tinte-ojo-alto); }
.fila[data-estado="NO_DEVUELTA_POR_LA_FUENTE"] { --fila-tinte: var(--tinte-falta); --fila-tinte-alto: var(--tinte-falta-alto); }
.fila[data-estado="NO_VERIFICABLE"],
.fila[data-estado="FUERA_DE_ALCANCE"],
.fila[data-estado="PENDIENTE_DE_PUBLICACION"] { --fila-tinte: var(--tinte-mudo); --fila-tinte-alto: var(--tinte-mudo-alto); }
@media (hover: hover) { .fila:hover { background: var(--fila-tinte-alto); } }
/* La fila abierta se rodea entera. Antes era una barra a la izquierda; el
 * contorno completo dice «esta» sin repetir el recurso del borde lateral, y
 * sobrevive a la impresión y al alto contraste, donde se vuelve del color del
 * sistema. */
.fila--sel {
  background: var(--fila-tinte-alto);
  outline: var(--borde-ancho) solid var(--acento);
  outline-offset: calc(var(--borde-ancho) * -1);
}
.fila--sel td { border-block-end-color: transparent; }
.fila__cita { font-family: var(--fuente-dato); color: var(--tinta); font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.fila__id { font-family: var(--fuente-dato); color: var(--tinta-2); overflow-wrap: anywhere; }
.fila__estado { white-space: nowrap; }
.fila__fuente { color: var(--tinta-3); font-size: var(--t-xs); }
/* Una cita mencionada varias veces. El multiplicador va pegado al identificador
 * y en apagado: es un dato de segundo orden y no puede competir con la cita
 * misma, que es lo que se lee al recorrer la columna. */
.fila__veces {
  margin-inline-start: var(--e2);
  border-radius: var(--radio-hilo);
  padding-inline: var(--e1);
  background: var(--papel-2);
  color: var(--tinta-3);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
}
.fila__mas { color: var(--tinta-3); white-space: nowrap; }
.fila__pos { color: var(--tinta-3); font-family: var(--fuente-dato); font-size: var(--t-xs); font-variant-numeric: tabular-nums; text-align: end; }
.citas__nada { padding: var(--e10) var(--e4); text-align: center; color: var(--tinta-3); }
/* Una fila enfocada con el teclado no puede quedar tapada por la cabecera
 * pegajosa al llegar por scroll. */
.fila:focus-visible { position: relative; z-index: 2; scroll-margin: var(--e10); }

/* ── los ocho estados ──────────────────────────────────────────────────────── */

/* La marca: un cuadro cuya GEOMETRÍA identifica el estado. Ni uno solo lleva
 * color, y esa es la regla que no se puede tocar.
 *
 * Por qué cada una es la que es:
 *
 *   confirmada       cuadro lleno            — hay algo, macizo
 *   discrepantes     lleno, partido por una banda — está, pero un dato no cuadra
 *   ambigua          mitad y mitad           — dos lecturas, ninguna elegida
 *   resuelta         esquina llena           — se completó por un lado
 *   no devuelta      cuadro dentro de cuadro — vacío por dentro: no vino nada.
 *                    Pesa por el doble trazo, no por un tinte de alarma
 *   pendiente        borde discontinuo y un punto — todavía no, que no es lo mismo
 *   fuera de alcance banda diagonal          — el mapa no llega hasta aquí
 *   no verificable   rayado                  — ausencia de información
 *   desconocido      borde punteado          — no sabemos ni leerlo
 *
 * Las formas se dibujan con borde y con relleno recortado (clip-path), nunca
 * con degradados: en el modo de alto contraste de Windows los degradados se
 * fuerzan a `none` y tres de los ocho estados se quedarían en blanco. */
.marca {
  display: inline-block;
  inline-size: var(--marca);
  block-size: var(--marca);
  flex: 0 0 auto;
  position: relative;
  border: var(--marca-borde) solid var(--marca-tinta);
  border-radius: var(--radio-marca);
  background: var(--marca-fondo);
  vertical-align: -3px;
  /* Se imprime con su relleno aunque el navegador tenga los fondos apagados:
   * sin esto, cinco de los ocho estados salen como cuadros vacíos en papel. */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.marca::before, .marca::after { content: ""; position: absolute; }

.marca--CONFIRMADA { background: var(--marca-tinta); }

.marca--METADATOS_DISCREPANTES { background: var(--marca-tinta); }
.marca--METADATOS_DISCREPANTES::before {
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: var(--marca-banda);
  transform: translateY(-50%);
  background: var(--marca-fondo);
}

.marca--AMBIGUA::before { inset: 0 50% 0 0; background: var(--marca-tinta); }

.marca--INCOMPLETA_RESUELTA::before {
  inset: 0;
  background: var(--marca-tinta);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* El único negativo. Vacío por dentro —la fuente no devolvió nada— y con doble
 * trazo para que pese en la tabla sin necesidad de un color de alarma. */
.marca--NO_DEVUELTA_POR_LA_FUENTE::after {
  inset: var(--marca-borde);
  border: var(--marca-borde) solid var(--marca-tinta);
  border-radius: var(--radio-hilo);
}

/* Discontinuo Y con un punto dentro: sin el punto, este estado y el de «no sé
 * leerlo» eran los dos un cuadro vacío de borde troceado, y a 15px eso no es
 * una diferencia. El punto dice que hay algo en camino. */
.marca--PENDIENTE_DE_PUBLICACION { border-style: dashed; }
.marca--PENDIENTE_DE_PUBLICACION::before {
  inset: var(--marca-punto);
  background: var(--marca-tinta);
  border-radius: var(--radio-hilo);
}

.marca--FUERA_DE_ALCANCE::before {
  inset: 0;
  background: var(--marca-tinta);
  clip-path: polygon(0 72%, 72% 0, 100% 28%, 28% 100%);
}

.marca--NO_VERIFICABLE::before {
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--marca-tinta) 0 2px,
    var(--marca-fondo) 2px 5px
  );
}

/* Un estado que esta interfaz no conoce NO se pinta como negativo jamás. Se
 * pinta como lo que es: algo que no sabemos leer. */
.marca--desconocido { border-style: dotted; }

.estado { display: inline-flex; align-items: center; gap: var(--e2); }
.estado__texto {
  font-family: var(--fuente-dato);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-dato);
  color: var(--tinta-2);
  text-transform: uppercase;
}
/* Solo dos estados llevan el nombre en negra, y son los dos que obligan a abrir
 * el detalle. Se distinguen por PESO y no por color: en cuanto un estado tiene
 * un tinte que los demás no tienen, alguien lo lee como veredicto. */
.estado--NO_DEVUELTA_POR_LA_FUENTE .estado__texto,
.estado--METADATOS_DISCREPANTES .estado__texto { color: var(--tinta); font-weight: var(--peso-fuerte); }
.estado--CONFIRMADA .estado__texto { color: var(--tinta-3); }

/* ── detalle de una cita ───────────────────────────────────────────────────── */

.detalle {
  position: sticky;
  inset-block-start: var(--e4);
  /* El panel no puede crecer más que la pantalla: si lo hace, el final del
   * rastro queda fuera de alcance sin forma de llegar. */
  max-block-size: calc(var(--alto-visible) - var(--e8));
  overflow: auto;
  /* Al llegar al final del panel, la rueda no debe seguir moviendo la página
   * por debajo: el usuario pierde el sitio en la tabla sin haberlo pedido. */
  overscroll-behavior: contain;
}
@media (max-width: 68.75em) {
  .detalle { position: static; max-block-size: none; overflow: visible; }
}

.detalle__vacio { padding: var(--e10) var(--e5); color: var(--tinta-3); text-align: center; font-size: var(--t-s); }
.detalle__cabecera { border-block-end: var(--borde-fino); padding: var(--e5); background: var(--papel-2); }
.detalle__cita {
  color: var(--tinta);
  font-family: var(--fuente-dato);
  font-size: var(--t-l);
  font-weight: var(--peso-fuerte);
  overflow-wrap: anywhere;
}
.detalle__id { margin-block-start: var(--e1); color: var(--tinta-3); font-family: var(--fuente-dato); font-size: var(--t-s); }
.detalle__estado { margin-block-start: var(--e3); }
.detalle__bloque { border-block-end: var(--borde-fino); padding: var(--e5); }
.detalle__bloque:last-child { border-block-end: 0; }
.detalle__bloque > .rotulo { margin-block-end: var(--e3); }
.detalle__motivo { color: var(--tinta-2); font-size: var(--t-s); }

/* La lectura del estado. Es el bloque que impide que alguien lea «la fuente no
 * la devolvió» como «es inventada», así que va destacado como caja propia.
 *
 * En tinta y no en color: la diferencia entre una lectura crítica y una
 * corriente es el GROSOR de la barra, porque en el informe impreso los dos
 * tintes son negros y solo queda el grosor. */
.lectura {
  border-radius: var(--radio-s);
  padding: var(--e4);
  background: var(--tinte-ojo);
  color: var(--tinta-2);
  font-size: var(--t-s);
}
/* La corriente va en neutro. La crítica no se distingue solo por el tinte: es
 * la única que lleva además el párrafo de «esto no afirma que…», y ese párrafo
 * es lo que sobrevive a una impresión en blanco y negro. */
.lectura--neutra { background: var(--papel-2); }
.lectura__que { color: var(--tinta); font-weight: var(--peso-titulo); }
.lectura__aviso { margin-block-start: var(--e2); color: var(--tinta); font-weight: var(--peso-medio); }

/* La ficha que publica la corte. Sin veredicto ni color de alarma: no se está
 * juzgando nada, se está enseñando la fuente. */
.publicados {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--e2) var(--e4);
  margin: 0;
}
.publicados dt {
  color: var(--tinta-3);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
}
.publicados dd {
  margin: 0;
  color: var(--tinta);
  font-family: var(--fuente-dato);
  font-size: var(--t-s);
  overflow-wrap: anywhere;
}

/* ── el cotejo de los entrecomillados ──────────────────────────────────────── */

/* Este bloque es una LISTA DE HALLAZGOS, no un párrafo largo, y ahora se lee
 * como tal. Cada ficha responde en tres alturas:
 *
 *   1. el sello: dos palabras que se leen recorriendo la lista con el ojo
 *   2. la frase: el desenlace entero, con los identificadores
 *   3. el motivo: la letra pequeña, para quien quiera saber por qué
 *
 * Antes las tres iban con el mismo peso, la cita ocupaba media pantalla en
 * cursiva y el motivo se partía en renglones de distinto largo porque heredaba
 * la medida de la prosa. Con treinta fichas seguidas no había forma de
 * encontrar la que importaba.
 *
 * Sin color de alarma en ningún desenlace: no encontrar un entrecomillado no
 * acusa de nada, porque puede venir de doctrina, de un testimonio o de una
 * norma. Por eso el peor de los cuatro va en ámbar de «mírelo», no en rojo. */
.textuales {
  /* Va dentro de la tarjeta del informe, así que necesita su mismo margen
   * lateral: sin él las fichas se pegaban al borde y parecían desbordarse. */
  border-block-start: var(--borde-fino);
  padding: var(--e5);
}
.textuales__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e5);
}
.textuales__titulo { font-size: var(--t-l); }

/* Las cifras, en fichas. Cuatro datos distintos separados por puntos en una
 * línea corrida son cuatro datos que nadie lee. */
.textuales__cifras { display: flex; flex-wrap: wrap; gap: var(--e2); }
.recuento {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  border-radius: var(--radio-pastilla);
  padding: var(--e1) var(--e4);
  background: var(--papel-2);
}
.recuento--bien { background: var(--tinte-bien); }
.recuento--mudo { background: var(--tinte-mudo); }
.recuento__n {
  color: var(--tinta);
  font-family: var(--fuente-dato);
  font-size: var(--t-m);
  font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums;
}
.recuento__rotulo { color: var(--tinta-3); font-size: var(--t-xs); }

.textuales__lista {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e4);
  counter-reset: textual;
}
.textual {
  counter-increment: textual;
  border-radius: var(--radio);
  padding: var(--e4) var(--e5);
  background: var(--papel-2);
}
.textual[data-familia="bien"] { background: var(--tinte-bien); }
.textual[data-familia="ojo"]  { background: var(--tinte-ojo); }
.textual[data-familia="mudo"] { background: var(--tinte-mudo); }

.textual__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
/* El sello es la respuesta en dos palabras. Va sobre papel para que el tinte de
 * la ficha no se lo coma, y con el color de su familia. */
.textual__sello {
  border-radius: var(--radio-pastilla);
  padding: var(--e1) var(--e3);
  background: var(--papel-caja);
  color: var(--sello-mudo);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
}
.textual[data-familia="bien"] .textual__sello { color: var(--sello-bien); }
.textual[data-familia="ojo"]  .textual__sello { color: var(--sello-ojo); }
/* El mismo «T3» con el que sale en el informe descargado, para poder cotejar la
 * pantalla y el archivo sin contar fichas a mano. */
.textual__indice { color: var(--tinta-3); font-family: var(--fuente-dato); font-size: var(--t-xs); }
.textual__indice::before { content: "T" counter(textual); }

/* Todo el texto de la ficha comparte la MISMA medida, y en `rem` y no en `ch`.
 *
 * En `ch` cada bloque se cortaba a un ancho distinto —porque cada uno tiene su
 * tamaño de letra— y el conjunto quedaba con los renglones desiguales y el
 * borde derecho hecho sierra. Con una medida común, los cuatro bloques acaban
 * en la misma vertical y la ficha se lee como una columna. */
.textual__veredicto { max-inline-size: var(--medida-ficha); }

/* La cita a la izquierda y su explicación a la derecha. Los dos `flex-basis`
 * están puestos para que en una tarjeta ancha quepan lado a lado y en una
 * estrecha se apilen solos, sin un punto de ruptura que alguien tenga que
 * mantener. `min-inline-size: 0` es obligatorio: sin él, un radicado sin
 * espacios impide que la columna se encoja y rompe la fila. */
.textual__cuerpo {
  display: flex;
  flex-wrap: wrap;
  /* `start` y no el estirado por defecto: si no, la caja de la cita crece hasta
   * la altura de la columna de al lado y una cita de un renglón queda dentro de
   * un recuadro de cinco. */
  align-items: start;
  gap: var(--e3) var(--e5);
  margin-block-start: var(--e3);
}
.textual__fragmento { flex: 1 1 26rem; min-inline-size: 0; }
.textual__notas { flex: 1 1 15rem; min-inline-size: 0; }

.textual__veredicto {
  margin: var(--e3) 0 0;
  color: var(--tinta);
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
}

/* La cita, en su propia caja de papel y con una comilla colgada.
 *
 * La comilla sustituye a la barra lateral que había antes: dice «esto es una
 * cita» con un recurso tipográfico en vez de con un filete. El alto máximo está
 * puesto porque hay entrecomillados de media página —los hay de verdad— y uno
 * solo empujaba los otros veinte fuera de la pantalla. */
.textual__fragmento {
  position: relative;
  margin: 0;
  border-radius: var(--radio-s);
  border: var(--borde-fino);
  padding: var(--e3) var(--e4) var(--e3) var(--e8);
  background: var(--papel-caja);
  color: var(--tinta-2);
  font-size: var(--t-s);
  font-style: italic;
  /* Los hay de media página. Uno solo, sin tope, empujaba las otras veinte
   * fichas fuera de la pantalla; con tope, se desplaza dentro de su caja y la
   * lista sigue siendo una lista. El borde es lo que dice que la caja tiene
   * fondo y que ahí dentro hay más. */
  max-block-size: calc(var(--e16) * 3);
  overflow: auto;
  overscroll-behavior: contain;
}
.textual__fragmento::before {
  content: "“";
  position: absolute;
  inset-block-start: var(--e1);
  inset-inline-start: var(--e3);
  color: var(--tinta-4);
  font-family: var(--fuente-texto);
  font-size: var(--t-xxl);
  font-style: normal;
  line-height: 1.4;
}
/* La medida de lectura la pone el envoltorio interno, no la caja: la caja tiene
 * que ocupar todo el ancho para que el fondo llegue de lado a lado. */
/* El texto entrecomillado viene de un PDF ajeno y trae códigos de verificación
 * de sesenta caracteres sin un espacio. Sin esto, esa cadena fija el ancho
 * mínimo de la ficha y arrastra la página entera a un desplazamiento lateral. */
.textual__fragmento > span { display: block; overflow-wrap: anywhere; }

.textual__aviso {
  margin: 0;
  color: var(--tinta-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
}
.textual__motivo { margin: var(--e2) 0 0; color: var(--tinta-3); font-size: var(--t-xs); }

/* El cruce de metadatos. `table-layout: fixed` no es un detalle: sin él, un
 * ponente con dos nombres largos ensancha la tabla hasta desbordar el panel y
 * arrastra la página entera a un scroll horizontal. */
.campos { table-layout: fixed; }
.campos th {
  position: static;
  border-block-end: var(--borde-fino);
  background: none;
  color: var(--tinta-3);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  white-space: normal;
}
.campos th, .campos td { padding: var(--e2); }
/* Las dos columnas de los extremos ceden ancho a las del medio, que son las
 * que llevan los datos largos: con 22 y 20 por ciento, «constitucionalidad» se
 * partía a la mitad. */
.campos th:first-child, .campos td:first-child { padding-inline-start: 0; inline-size: 17%; }
.campos th:last-child, .campos td:last-child { padding-inline-end: 0; inline-size: 16%; }
.campos td { font-family: var(--fuente-dato); font-size: var(--t-xs); color: var(--tinta); overflow-wrap: anywhere; }
.campos td:first-child { color: var(--tinta-3); text-transform: uppercase; letter-spacing: var(--tracking-rotulo); font-family: var(--fuente-texto); font-weight: var(--peso-medio); }
/* El campo que no cuadra se tiñe con la familia de «revise esto». Lo que dice
 * el informe ahí es un hecho —este dato no corresponde— y el hecho ya está
 * escrito con todas las letras en la última columna; el tinte solo ahorra
 * buscarlo. */
.campos tr[data-coincide="no"] td { background: var(--tinte-ojo); }
.campos__veredicto { font-weight: var(--peso-fuerte); }

/* El fragmento del escrito del que se leyó lo declarado. Solo aparece cuando el
 * campo no coincide, que es cuando el informe está diciendo algo incómodo y hay
 * que poder comprobarlo sin salir de la pantalla. */
.campos__evidencia td {
  padding-block-start: 0;
  border-block-start: 0;
  font-family: var(--fuente-texto);
  color: var(--tinta-2);
  white-space: normal;
}
.campos__evidencia .rotulo { display: inline; margin-inline-end: var(--e2); }
.campos__evidencia q { font-style: italic; }

.candidato { border-radius: var(--radio-s); padding: var(--e4); background: var(--papel-2); }
.candidato + .candidato { margin-block-start: var(--e3); }
.candidato__id { color: var(--tinta); font-family: var(--fuente-dato); font-size: var(--t-s); font-weight: var(--peso-fuerte); }
.candidato__meta { margin-block-start: var(--e2); display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); }
.candidato__porque { margin-block-start: var(--e2); color: var(--tinta-3); font-size: var(--t-xs); }

.par { display: flex; gap: var(--e2); font-family: var(--fuente-dato); font-size: var(--t-xs); min-inline-size: 0; }
.par__k { color: var(--tinta-3); }
.par__v { color: var(--tinta); overflow-wrap: anywhere; }

/* El rastro. Es lo que hace auditable el informe: cada línea es una consulta
 * que el lector puede repetir. Por eso la URL va entera y enlazada, aunque
 * ocupe: acortarla obligaría a creernos. */
/* El rastro es una secuencia y ahora se ve que lo es: cada consulta lleva su
 * número en un disco. El contador lo lleva la hoja de estilos, así que el
 * componente no tiene que enumerar nada. */
.rastro { list-style: none; margin: 0; padding: 0; counter-reset: consulta; }
.rastro__item {
  position: relative;
  counter-increment: consulta;
  padding: 0 0 var(--e4) var(--e8);
}
.rastro__item::before {
  content: counter(consulta);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: var(--e6);
  block-size: var(--e6);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--papel-marca);
  color: var(--tinta-sobre-marca);
  font-family: var(--fuente-dato);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
}
.rastro__item:last-child { padding-block-end: 0; }
.rastro__fuente { color: var(--tinta); font-size: var(--t-s); font-weight: var(--peso-medio); }
.rastro__url {
  display: block;
  margin-block-start: var(--e1);
  padding-block: var(--e1);
  font-family: var(--fuente-dato);
  font-size: var(--t-xs);
  /* `anywhere` y no `break-all`: además de partir la URL, reduce el ancho
   * mínimo del contenedor, que es lo que evita que el panel se ensanche. */
  overflow-wrap: anywhere;
}
.rastro__meta { margin-block-start: var(--e2); display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); }
.rastro__nota { margin-block-start: var(--e1); color: var(--tinta-3); font-size: var(--t-xs); }
.rastro--sin { color: var(--tinta-3); font-size: var(--t-s); }

/* El fragmento del escrito, con la cita señalada en su sitio. */
.fragmento {
  border-radius: var(--radio-s);
  padding: var(--e3);
  background: var(--papel-2);
  font-family: var(--fuente-dato);
  font-size: var(--t-xs);
  line-height: var(--alto-linea);
  color: var(--tinta-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-block-size: calc(var(--e16) * 3);
  overflow: auto;
}
.fragmento__cita {
  background: var(--relleno-realce);
  color: var(--tinta-sobre-realce);
  padding: 0 var(--e1);
  border-radius: var(--radio-hilo);
  font-weight: var(--peso-fuerte);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* ── leyenda de los ocho estados ───────────────────────────────────────────── */

.leyenda { overflow: clip; }
.leyenda__resumen {
  padding: var(--e3) var(--e4);
  color: var(--tinta);
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  transition: background var(--transicion);
}
@media (hover: hover) { .leyenda__resumen:hover { background: var(--papel-hover); } }
.leyenda__cuerpo {
  border-block-start: var(--borde-fino);
  padding: var(--e5);
  display: grid;
  gap: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.leyenda__item { display: grid; grid-template-columns: var(--marca) minmax(0, 1fr); gap: var(--e1) var(--e3); align-content: start; }
.leyenda__marca { margin-block-start: 2px; }
.leyenda__nombre { color: var(--tinta); font-family: var(--fuente-dato); font-size: var(--t-xs); font-weight: var(--peso-fuerte); text-transform: uppercase; }
.leyenda__texto { grid-column: 2; color: var(--tinta-3); font-size: var(--t-xs); }

/* ── trabajo en curso ──────────────────────────────────────────────────────── */

/* La única animación del producto. Existe porque una verificación puede tardar
 * un minuto largo —hay tres relatorías al otro lado— y sin señal de vida el
 * usuario recarga la página y vuelve a hacer cola. Late en dos pasos, sin
 * transición suave: es un latido, no un adorno. */
.pulso {
  inline-size: var(--marca);
  block-size: var(--marca);
  flex: 0 0 auto;
  margin-block-start: var(--e1);
  border: var(--marca-borde) solid var(--marca-tinta);
  border-radius: var(--radio-marca);
  background: var(--marca-fondo);
  animation: latir 1200ms steps(2, end) infinite;
}
@keyframes latir {
  0%, 100% { background: var(--marca-fondo); }
  50% { background: var(--marca-tinta); }
}

/* ── pantallas estrechas ─────────────────────────────────────────────────────
 *
 * La tabla se deja de comportar como tabla y cada cita pasa a ser una ficha.
 * El desplazamiento lateral es la alternativa fácil y es mala: obliga a
 * arrastrar para leer el estado, que es justo el dato por el que se entra.
 * Cada celda recupera su rótulo desde `data-rotulo`, que la tabla escribe con
 * los mismos títulos de columna, así que no hay dos listas que mantener. */
@media (max-width: 52em) {
  .principal { padding-block: var(--e6) var(--e8); }
  /* Los dos van JUNTOS. .cabecera reserva el hueco antes de que corra el
   * modulo —es lo que evita el salto al cargar— y .cabecera__barra es lo que
   * de verdad mide dentro. Si uno baja y el otro no, el hueco reservado deja
   * de corresponder a lo que se pinta y el salto vuelve, al reves: sobra. */
  .cabecera__barra { min-block-size: var(--e12); }
  .cabecera { min-block-size: calc(var(--e12) + var(--nb-bd-thick)); }

  .citas__tabla thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .citas__tabla tr { display: block; }
  .citas__tabla td { display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr); gap: var(--e3); border-block-end: 0; padding: var(--e1) var(--e4); }
  .citas__tabla td::before {
    content: attr(data-rotulo);
    color: var(--tinta-3);
    font-family: var(--fuente-texto);
    font-size: var(--t-xs);
    font-weight: var(--peso-medio);
    text-transform: uppercase;
    letter-spacing: var(--tracking-rotulo);
  }
  .citas__tabla td:empty { display: none; }
  .fila { display: block; padding-block: var(--e4); border-block-end: var(--borde-fino); }
  .fila:last-child { border-block-end: 0; }
  .fila__pos { text-align: start; }
  /* En la ficha apilada, el nombre del estado tiene que poder partirse: sin
   * partir, «incompleta, resuelta por contexto» se sale de la celda y se corta
   * justo en el dato por el que se entra a mirar. */
  .fila__estado { white-space: normal; }
  .estado { align-items: start; }
  .estado__texto { overflow-wrap: anywhere; }
  .fila--sel td:first-child { box-shadow: none; }
  .fila--sel { outline-offset: calc(var(--borde-ancho) * -1); }
  .citas__nada { display: block; padding: var(--e8) var(--e4); }

  .zona { padding: var(--e4); }
  .zona__soltar { padding: var(--e5) var(--e4); }
  .zona__pie { align-items: stretch; }
  .zona__pie .barra-botones { margin-inline-start: 0; }
  .informe__cabecera, .informe__reparto, .informe__pie { padding-inline: var(--e4); }
  .informe__cifras { gap: var(--e4) var(--e6); }
  .detalle__cabecera, .detalle__bloque, .detalle__vacio { padding: var(--e4); }
  .leyenda__cuerpo { padding: var(--e4); gap: var(--e4); }
}

/* ── alto contraste del sistema ──────────────────────────────────────────────
 *
 * En el modo de alto contraste de Windows el sistema impone sus colores: las
 * sombras desaparecen y los rellenos se sustituyen. Todo eso es correcto y se
 * deja pasar, MENOS las ocho marcas: si sus rellenos se colapsan al mismo color
 * del sistema, cinco de los ocho estados dejan de distinguirse. La marca se
 * dibuja entonces con los dos colores del sistema y se excluye del ajuste
 * automático, que es exactamente el caso para el que existe esa exclusión. */
@media (forced-colors: active) {
  .marca, .marca::before, .marca::after, .pulso {
    forced-color-adjust: none;
    --marca-fondo: Canvas;
    --marca-tinta: CanvasText;
  }
  .fila--sel td:first-child, .fila--sel { box-shadow: none; }
  .fila--sel { outline: 2px solid Highlight; outline-offset: -2px; }
  .filtro[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .cifra--bien .cifra__valor, .cifra--ojo .cifra__valor { box-shadow: none; text-decoration: underline; }
  :focus-visible { outline-color: Highlight; }
}

/* ── impresión ─────────────────────────────────────────────────────────────── */

@media print {
  /* La pista se va: un botón de ayuda impreso no lleva a ninguna parte. Lo que
   * dice sigue estando en el informe descargado, que es lo que se archiva. */
  .zona, .filtros, .barra-botones, .salto, .informe__pie, .portada,
  .explicacion, .cabecera__acciones, .pista { display: none; }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .detalle { position: static; max-block-size: none; overflow: visible; page-break-inside: avoid; }
  /* En papel no hay desplazamiento: una caja con tope de altura imprime la
   * mitad de la cita y se calla el resto. En un informe que va al expediente
   * eso es inaceptable, así que los dos recortes se sueltan. */
  .fragmento, .textual__fragmento { max-block-size: none; overflow: visible; }
  .fila { cursor: default; }
  .citas__tabla th { background: none; }
  a { color: var(--tinta); }
  .rastro__url { color: var(--tinta-2); }
}

/* El apéndice de lo que NO es jurisprudencia.
 *
 * Va plegado y en tono apagado: está para poder auditarlo, no para leerlo. Si
 * pesara lo mismo que el bloque principal volvería el ruido que la separación
 * vino a quitar. */
.textuales__apendice {
  margin-block-start: var(--e6);
  border-block-start: var(--borde-fino);
  padding-block-start: var(--e4);
}

.textuales__apendice > summary {
  cursor: pointer;
  color: var(--tinta-3);
  font-size: var(--t-m);
  padding: var(--e2) 0;
}

/* La explicación del apéndice ocupa el ancho entero.
 *
 * Hereda de .textual__motivo, que vive en la columna estrecha de la derecha de
 * una ficha. Aquí no hay ficha ni columna, así que sin esto salía un párrafo de
 * un tercio de ancho colgado a la izquierda. */
.textuales__apendice-nota {
  max-inline-size: 80ch;
  margin: 0 0 var(--e4);
  color: var(--tinta-3);
  font-size: var(--t-s);
}

/* Las fichas del apéndice NO se numeran.
 *
 * El contador se reinicia en cada lista, así que el apéndice volvía a empezar
 * en T1 y había dos fichas «T1» en la misma pantalla. Peor todavía: el informe
 * exportado solo numera las citas de jurisprudencia, de modo que el T2 del
 * apéndice no corresponde a ningún T2 del archivo. Un número que no sirve para
 * cotejar es un número que engaña. */
.textuales__apendice .textual__indice { display: none; }

.textuales__apendice > summary:hover {
  color: var(--tinta);
}

.textuales__apendice[open] > summary {
  margin-block-end: var(--e3);
}

/* La nota de cotejo: contra qué se comparó de verdad.
 *
 * Va a la vista y no plegada porque califica todo lo que hay debajo. Un
 * «no se encontró en ninguna de las 12 citadas» quiere decir una cosa si las
 * citadas eran doce y otra muy distinta si eran ciento veinte, y sin esta línea
 * el informe se leía igual en los dos casos.
 *
 * El modificador --ojo se enciende SOLO cuando alguna providencia se quedó sin
 * texto: es la única situación en la que el lector tiene que ajustar lo que va
 * a leer, y encenderla siempre la volvería invisible. */
.textuales__cotejo {
  max-inline-size: 80ch;
  margin: 0 0 var(--e4);
  padding: var(--e2) var(--e3);
  border-inline-start: var(--nb-bd-thick) solid var(--linea);
  color: var(--tinta-2);
  font-size: var(--t-s);
}

/* El modificador se encendía contra un token que no existía en ninguna hoja:
 * `var(--ojo, ...)` caía siempre en el respaldo y la barra quedaba igual que
 * la corriente. Ahora lleva el sello de su familia, que es el ámbar legible. */
.textuales__cotejo--ojo {
  border-inline-start-color: var(--sello-ojo);
}

.textuales__cotejo-lista {
  color: var(--tinta-3);
}

/* ═════════════════════════════════════════════════════════════════════════════
 * LA COSTURA CON JURISIA
 *
 * Lo que sigue no existe en el producto original: son las piezas que hacen que
 * esto se lea como una pantalla más de jurisia.com.co y no como una herramienta
 * de otra casa. Casi todo el trabajo lo hizo tokens.css cambiando el valor de
 * los nombres de siempre; aquí solo queda lo que un token no puede decir.
 * ═════════════════════════════════════════════════════════════════════════════ */

/* base.css ya viste a h1–h4 con Archivo Black, y estos tres tienen que pesar
 * igual aunque no todos sean un <h*>.
 *
 * .zona__titulo y .aviso__titulo son párrafos y lo seguirán siendo: rotulan una
 * zona de la interfaz, no una sección del documento. .portada__titulo sí es el
 * <h1> de la página desde que se invirtió la jerarquía —el titular de portada
 * es el título de esta página, y la cabecera es la marca de la casa— así que
 * para él esto es redundante; se queda en la lista porque lo que manda es la
 * clase, y una clase que sólo se ve bien con una etiqueta concreta es una
 * trampa para el siguiente.
 *
 * La familia se pide entera: Archivo Black trae un solo corte y pedirle 700
 * solo consigue que el navegador la engorde y salga sucia. */
.portada__titulo,
.zona__titulo,
.aviso__titulo {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-display);
}

/* La línea de marca de la portada: de quién es esto y cuánto cuesta, antes del
 * titular. Va arriba y no en el pie porque la pregunta «qué me van a cobrar» se
 * hace ANTES de soltar un escrito, no después de leer el informe. */
.portada__marca {
  margin: 0 0 var(--e3);
  max-inline-size: none;
  color: var(--tinta-3);
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
}
.portada__marca strong {
  color: var(--tinta);
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-display);
}

/* Las tres condiciones de uso, en pastillas. Planas y sin sombra: en este
 * sistema el relieve es de lo que se pulsa, y esto solo informa —es la misma
 * regla que separa .nb-chip de a.nb-chip en Jurisia—.
 *
 * «Un documento a la vez» se dice aquí y no solo cuando el servidor devuelve un
 * 409: enterarse de un límite al chocar con él, con un escrito ya pegado, es
 * enterarse tarde. */
.portada__notas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
}
.portada__notas li { margin: 0; }
.nota {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border: var(--borde);
  border-radius: var(--radio);
  padding: var(--e1) var(--e3);
  background: var(--papel-caja);
  color: var(--tinta);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
}
/* La primera lleva el dorado de la casa: de las tres, la que más importa leer
 * es la que dice que no se paga. Un solo acento por grupo, o deja de serlo. */
.nota--marca { background: var(--relleno-accion); color: var(--tinta-sobre-accion); }

/* La acción principal es la única pieza de la pantalla que se levanta al pasar
 * por encima, y es a propósito: base.css deja el gesto en :active para todos
 * los demás botones porque una tabla de doscientas filas con botones saltando
 * al paso del ratón es un campo de minas. Aquí hay uno solo, es el que hay que
 * pulsar, y levantarlo es la física exacta de .nb-btn. */
@media (hover: hover) {
  .boton--principal:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--d-m) + 2px) calc(var(--d-m) + 2px) 0 0 var(--sombra-color);
  }
  /* El pulsado se vuelve a declarar aquí, DESPUÉS del levantado. Las dos
   * reglas pesan lo mismo, así que gana la última: sin esta línea, un botón
   * pulsado con el ratón encima —que es como se pulsa siempre— se quedaba
   * levantado en vez de hundirse, y el gesto entero desaparecía. */
  .boton--principal:active:not(:disabled) {
    transform: var(--empuje-m);
    box-shadow: none;
  }
}

/* Quien pidió menos movimiento tampoco recibe este. base.css apaga el gesto de
 * pulsar de todos los botones, pero no conoce el levantado del principal, que
 * se añadió aquí: con la transición a cero, un salto de 2px sin animar sigue
 * siendo un salto. */
@media (prefers-reduced-motion: reduce) {
  .boton--principal:hover:not(:disabled),
  .boton--principal:active:not(:disabled) { transform: none; }
}

/* El pie, ahora que lleva dos líneas: la letra pequeña del producto arriba y la
 * marca debajo, separadas por una línea de pelo. */
.pie__marca {
  margin-block-start: var(--e3);
  padding-block-start: var(--e3);
  border-block-start: var(--borde-fino);
  color: var(--tinta-3);
  font-size: var(--t-xs);
}
.pie__marca a { font-weight: var(--peso-fuerte); }

/* ── pantallas muy estrechas ──────────────────────────────────────────
 *
 * A 360px la cabecera tiene tres cosas y no caben. Se van las dos que otra
 * pieza ya está diciendo: el nombre de la casa —que lo dice el monograma— y el
 * «Volver a» del enlace —que lo dice la flecha—. Lo que NO se toca es el nombre
 * del servicio: es el título de la página.
 *
 * El texto no se esconde con display:none sino recortándolo: así sigue estando
 * en el árbol de accesibilidad y el enlace se sigue anunciando entero, que es
 * «Volver a JURISIA» y no «JURISIA» a secas. */
@media (max-width: 30em) {
  .cabecera__jurisia,
  .cabecera__volver-largo {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .cabecera__producto { border-inline-start: 0; padding-inline-start: 0; }
  .cabecera__barra { gap: var(--e2); }
  /* La portada SIGUE CENTRADA en movil, y esto es un cambio respecto del
   * proyecto de origen. Alli se alineaba al principio de la linea porque con
   * tres pastillas y 328px utiles la tercera quedaba huerfana en el centro.
   * Cierto, pero el remedio era peor: dejaba el titular, el antetitulo y las
   * pastillas pegados al margen izquierdo mientras el pie seguia centrado, y
   * la pantalla se leia descuadrada. Una tercera pastilla sola y centrada no
   * molesta a nadie. */
}

/* ── impresión ────────────────────────────────────────────────────────
 *
 * Las pastillas de la portada se van con la portada, que ya estaba oculta. Lo
 * que se queda es de quién es el informe: en papel, sin barra de navegación,
 * esa línea es lo único que lo dice. */
@media print {
  .cabecera__volver { display: none; }
  .cabecera { border-block-end-width: 1px; }
  .cabecera__icono { background: none; border: 0; }
}

/* ── la regla del no-scroll en ventanas bajas ────────────────────────────────
 *
 * Medido a 1366x700: cabecera 67 + portada 270 + entrada 242 + pie 102 y los
 * huecos = 737px. Sobraban 37. Se recortan donde no cuesta informacion:
 * el titular pasa de tres lineas a dos, y el pie aprieta su interlineado.
 * Nada de esto esconde nada; lo que se va es aire. */
@media (max-height: 50em) {
  /* El titular se ensancha Y baja de cuerpo. Lo primero solo no bastaba: en
   * estado de portada la envoltura entera se estrecha a --ancho-columna, asi
   * que 34ch no cabian y el titular seguia en tres lineas de 36px. Bajando a
   * 26px las tres lineas ocupan 96px en vez de 138. */
  .portada__titulo {
    max-inline-size: 34ch;
    font-size: clamp(1.25rem, 1.05rem + 0.9vi, 1.625rem); /* 20px -> 26px */
  }
  .pie { line-height: 1.4; }
  .pie .prosa + .prosa { margin-block-start: var(--e1); }
}

/* ── el no-scroll en vertical ────────────────────────────────────────────────
 *
 * Medido a 390x844: portada 418 + entrada 494 + cabecera 51 + pie 159 = 1179px.
 * Sobraban 335, y en un telefono no se recortan apretando: hay que decidir QUE
 * sobra. El criterio es que LA HERRAMIENTA no se toca -los 494px de la zona de
 * entrada se quedan enteros, porque son el producto- y lo que cede es el texto
 * que la explica, que en vertical el usuario ya no lee antes de soltar el
 * escrito: llega con el documento en la mano.
 *
 * Lo que NO se esconde, aunque abultara: el aviso de «un documento a la vez» y
 * la pista del limite. Ahorrarse un aviso para ganar pixeles es cambiar una
 * sorpresa del usuario por un hueco en blanco. */
/* ══ ventanas bajas, sea cual sea el ancho ════════════════════════════════════

   Los bloques de arriba van por ANCHO -34em, 30em- y por eso no cubrian
   820x600: una ventana de escritorio estrecha de alto, donde el problema no es
   que falte sitio a los lados sino arriba y abajo. Esto depende solo del alto.

   Medido a 820x600: cabecera 51 + portada 134 + zona 362 + pie 77 = 691 contra
   600 de ventana. Lo que se recorta es aire y cuerpo de letra; no se esconde
   ninguna de las tres notas ni ninguna parte de la herramienta. */
@media (max-height: 660px) {
  .portada__titulo {
    font-size: clamp(1.0625rem, 0.95rem + 1.1vi, 1.375rem);
  }

  .portada { margin-block-end: var(--e1); }
  .portada__notas { margin-block-start: var(--e2); gap: var(--e1); }
  .portada__notas .nota { padding: 2px 7px; font-size: 10.5px; }

  /* El recuadro de arrastre es lo mas alto de la pagina despues del area de
     texto. Se le quita aire, no funcion: el boton y la linea de formatos siguen
     enteros. */
  .zona__soltar { padding: var(--e2); }
  .zona__titulo { font-size: var(--t-base); }
  .zona__ayuda { margin-block-start: var(--e1); font-size: 10.5px; }
  .zona__acciones { margin-block-start: var(--e2); }

  .zona { gap: var(--e3); }
  .zona__pegar-cabecera { margin-block-end: 2px; }
  .area { min-block-size: 3.5rem; }
  .zona__pie { margin-block-start: var(--e2); gap: var(--e2); }
  .opcion { padding-block: 2px; line-height: 1.25; }

  /* El pie son tres apuntes de letra menuda; en una ventana baja se parten en
     tres renglones y cuestan 77px. Apretados vuelven a uno o dos. */
  .pie { padding-block: var(--e1); line-height: 1.3; }
  .pie .prosa { font-size: 10.5px; }
  .pie__marca { display: none; }

  .seccion + .seccion { margin-block-start: var(--e2); }
}

@media (max-width: 34em) {
  /* El parrafo de entrada nombra las tres cortes, y eso ya lo dice la pista del
   * limite un poco mas abajo. Es la misma regla que ya se aplica en ventanas
   * bajas de escritorio. */
  .portada__entrada { display: none; }

  .portada__titulo {
    font-size: clamp(1.125rem, 1rem + 1.6vi, 1.375rem); /* 18px -> 22px */
    max-inline-size: none;
  }

  .portada { margin-block-end: var(--e2); }
  .portada__notas { margin-block-start: var(--e2); gap: var(--e1); }

  /* El pie son tres apuntes de letra menuda que en 390px se parten en nueve
   * lineas. Se quedan los tres -dicen que el escrito se descarta y que no
   * interviene ningun modelo, que es lo que hace confiable al servicio- pero
   * apretados y sin el segundo parrafo de marca, que repite lo que ya dice la
   * cabecera. */
  .pie { padding-block: var(--e2); line-height: 1.35; }
  .pie .prosa { font-size: 11px; }
  .pie__marca { display: none; }

  /* EN UN TELEFONO NO SE ARRASTRA. El recuadro de puntos con su «Arrastre aqui
   * el escrito» ocupa 176px diciendo algo que en una pantalla tactil no se
   * puede hacer: alli el gesto es tocar «Examinar» y elegir del almacenamiento.
   * Asi que en vertical deja de ser un blanco de puntera y pasa a ser lo que de
   * verdad se usa -el boton, con la linea de formatos debajo- y el borde
   * discontinuo se queda para que se siga leyendo como zona de archivo.
   *
   * El titulo no se esconde: cambia. Lo hace el CSS y no el JavaScript porque
   * el criterio es el ancho de la ventana, no el dispositivo: un telefono en
   * horizontal, o una ventana estrecha en un portatil con raton, se comportan
   * como toca sin preguntarle nada a nadie. */
  .zona__titulo { font-size: var(--t-base); }
  .zona__soltar { padding: var(--e3); }
  .zona__ayuda { margin-block-start: var(--e1); font-size: var(--t-xs); }
  .zona__acciones { margin-block-start: var(--e2); }
  .zona__pegar-cabecera { margin-block-end: var(--e1); }
  .zona__pie { gap: var(--e2); }
  .area { min-block-size: 6rem; }
}

/* Telefonos en vertical. Medido a 360x740 -un Galaxy A, de los mas extendidos en
 * Colombia-: 909px contra 740 de ventana. Lo de arriba ya apreto por ancho;
 * esto depende del alto y se condiciona a el, para que el mismo telefono en
 * horizontal no pague un recorte que no necesita.
 *
 * Se recorta cuerpo de letra y aire. Sigue sin esconderse ni un aviso: las tres
 * notas de la portada, la pista del limite y los tres apuntes del pie estan
 * todos, porque son lo que le dice al usuario que puede fiarse de esto. */
@media (max-width: 34em) and (max-height: 900px) {
  .portada__titulo { font-size: 1.0625rem; } /* 17px */
  .portada__notas { font-size: var(--t-xs); }
  .portada__notas .nota { padding: 3px 7px; }

  .zona__titulo { font-size: var(--t-s); }
  .zona__soltar { padding: var(--e2); }
  .zona__ayuda { font-size: 10.5px; }
  .area { min-block-size: 4.5rem; }
  .zona__pie { gap: var(--e1); }

  .pie { padding-block: var(--e1); }
  .pie .prosa { font-size: 10px; line-height: 1.3; }
}

/* El escalon mas bajo: 360x740 y por debajo. Va aparte y no metido en el
 * anterior para que un telefono de 844 -un iPhone de los ultimos- no pague un
 * recorte que solo necesita uno de 740. */
@media (max-width: 34em) and (max-height: 760px) {
  .cabecera__barra { min-block-size: var(--e10); }
  .cabecera { min-block-size: calc(var(--e10) + var(--nb-bd-thick)); }
  .portada__titulo { font-size: 1rem; }
  .portada { margin-block-end: var(--e1); }
  .seccion + .seccion { margin-block-start: var(--e2); }
  .opcion { font-size: var(--t-xs); }
  .zona__acciones { margin-block-start: var(--e1); }
  .area { min-block-size: 4rem; }

  /* Las tres notas se parten en dos lineas a 360px y ocupan 59px. Apretadas
   * caben en una: siguen estando las tres, que es lo que importa -gratuito,
   * sin cuenta y un documento a la vez son las tres respuestas que el usuario
   * busca antes de soltar un escrito confidencial-. */
  .portada__notas .nota { padding: 2px 6px; font-size: 10px; letter-spacing: .02em; }

  /* La casilla de contraste textual y su pista. Se quedan -es la unica opcion
   * que cambia lo que hace el servicio- pero sin el aire de escritorio. */
  .opcion { gap: var(--e1); line-height: 1.25; }
  .zona__pie { margin-block-start: var(--e2); }
  .zona__pegar-cabecera { margin-block-end: 2px; }
  .area { min-block-size: 3.25rem; }
}

/* ── centrado en vertical ────────────────────────────────────────────────────
 *
 * En escritorio la fila del pie de la zona reparte: la opcion a la izquierda y
 * los botones cerrando por la derecha, que es donde se termina de leer una
 * linea. Al envolverse en un movil ese reparto deja de tener sentido -cada
 * pieza cae en su propio renglon- y el `margin-inline-start: auto` de los
 * botones los pega al canto derecho, con la opcion pegada al izquierdo. La
 * pantalla se lee descuadrada justo donde hay que pulsar.
 *
 * Apilado y centrado: cada pieza en su renglon, las dos en el eje de la
 * tarjeta. Va al final del archivo porque una media query no suma
 * especificidad y las reglas de arriba ganarian por orden. */
@media (max-width: 34em) {
  .zona__pie {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .zona__pie .barra-botones {
    margin-inline-start: 0;
    justify-content: center;
    width: 100%;
  }

  .zona__pie .opcion {
    flex: 0 1 auto;
  }

  .zona__pie .zona__ayuda {
    text-align: center;
  }

  /* Los dos botones, del mismo ancho y repartiendo la linea: en un movil se
     pulsa con el pulgar y un boton de 70px al lado de otro de 110 invita a
     equivocarse. */
  .barra-botones > * {
    flex: 1 1 0;
    min-inline-size: 0;
  }
}

/* ══ el ultimo tramo: 640px de alto o menos ═══════════════════════════════════

   Va AL FINAL a proposito. Los bloques de ancho de arriba son mas apretados que
   el de 660px, asi que aquel tuvo que quedar antes que ellos para no pisarlos;
   este, en cambio, tiene que ganar a todos, porque describe el caso mas
   estrecho de todos: una ventana de 568px de alto, donde la herramienta entera
   -cabecera, portada, zona de entrada y pie- tiene que caber en menos de lo que
   mide un teclado en pantalla.

   Aqui si se esconde algo: el titulo y la linea de formatos del recuadro de
   arrastre. Se queda el boton, que es lo unico que se usa en una pantalla
   tactil, y el recuadro de puntos sigue diciendo que ahi van los archivos. */
/* ── ventana baja PERO ANCHA: solo se quita aire ──
   Una ventana de 1366x630 -un portatil con la barra de marcadores y la de
   pestanas abiertas- es baja, pero de ancha le sobra. Ahi apretar el cuerpo de
   letra y, peor, esconder el titulo del recuadro de arrastre es un error: se
   queda un rectangulo de puntos vacio con un boton dentro, y encima con hueco
   libre arriba y abajo. Lo que se toca aqui es SOLO el aire. */
@media (max-height: 640px) {
  .zona__soltar { padding: var(--e3); }
  .zona__acciones { margin-block-start: var(--e2); }
  .zona__pie { margin-block-start: var(--e2); }
  .zona { gap: var(--e2); }
  .portada { margin-block-end: var(--e1); }
  .portada__notas { margin-block-start: var(--e1); gap: var(--e1); }
  .pie { padding-block: var(--e1); }
  .cabecera__barra { min-block-size: var(--e12); }
  .cabecera { min-block-size: calc(var(--e12) + var(--nb-bd-thick)); }
}

/* ── ventana baja Y ESTRECHA: ahi si se quita contenido ──
   Lo de arriba no basta en un telefono en horizontal o en una ventana de 320px
   de ancho, y ahi el recorte de contenido si esta justificado: en una pantalla
   tactil NO SE ARRASTRA -el gesto es tocar «Elegir archivo»-, asi que el titulo
   «Arrastre aqui el escrito» y la linea de formatos estan diciendo algo que no
   se puede hacer. El boton se queda, y el recuadro de puntos sigue diciendo que
   ahi van los archivos.

   La condicion de ANCHO es la que faltaba: sin ella esta regla se disparaba en
   un escritorio de 1366px y dejaba la herramienta con pinta de rota. */
@media (max-width: 34em) and (max-height: 640px) {
  .zona__titulo,
  .zona__ayuda { display: none; }
  .zona__soltar { padding: var(--e2); }
  .zona__acciones { margin-block-start: 0; }

  .portada__titulo { font-size: 1rem; }
  .portada__notas .nota { padding: 2px 6px; font-size: 10px; }
  .area { min-block-size: 3rem; }
  .zona__pie { margin-block-start: var(--e1); gap: var(--e1); }
  .opcion { font-size: var(--t-xs); }
  .pie { padding-block: 4px; }
  .pie .prosa { font-size: 9.5px; line-height: 1.25; }
  .cabecera__barra { min-block-size: var(--e10); }
  .cabecera { min-block-size: calc(var(--e10) + var(--nb-bd-thick)); }
}

/* Y el caso extremo: 320x568, el iPhone mas pequeno que sigue en uso. Ahi ni el
   antetitulo de marca cabe -lo dice la cabecera dos centimetros mas arriba- y
   las tres notas pasan a una sola linea de texto corrido, que ocupa un tercio
   de lo que ocupan como pastillas. */
@media (max-width: 34em) and (max-height: 580px) {
  .portada__marca { display: none; }

  .portada__notas { gap: 0 var(--e1); }
  .portada__notas .nota {
    border: 0;
    background: none;
    padding: 0;
    font-size: 10px;
  }
  .portada__notas li + li::before {
    content: '·';
    margin-inline-end: var(--e1);
    color: var(--tinta-3);
  }

  .portada { margin-block-end: 2px; }
  .seccion + .seccion { margin-block-start: var(--e1); }
  .area { min-block-size: 2.5rem; }
}

/* ══ la vista de telefono, revisada ═══════════════════════════════════════════

   Tres cosas se veian mal y ninguna era un desborde, que es lo unico que la
   medicion automatica sabe detectar:

   1) EL HUECO BAJO LA CABECERA. En estado de portada la columna se centra
      verticalmente, que en un monitor queda bien y en un telefono alto deja
      unos noventa pixeles en blanco entre la barra y el primer texto, con la
      herramienta flotando en medio de la nada. En vertical el contenido va
      ARRIBA y el pie abajo, que es como se lee una pagina en el telefono.

   2) LA PASTILLA DE LA OPCION. «Comprobar las citas entrecomilladas» se partia
      en dos renglones dentro de una pastilla redondeada, y la casilla quedaba
      centrada contra dos lineas mientras el icono de ayuda colgaba al otro
      extremo. Deja de ser pastilla: en vertical pasa a ser una fila normal, a
      todo el ancho, con la casilla y el texto a la izquierda y la ayuda al
      final. Sin borde redondeado que sugiera que es un boton.

   3) EL AIRE LATERAL. `--margen` se come 17px por lado; en 360px eso es un
      10% del ancho para nada. Se recorta y el texto respira. */
@media (max-width: 34em) {
  .principal:has(#zona-informe:empty) {
    align-content: start;
    padding-block-start: var(--e4);
  }

  .envoltura { padding-inline: var(--e3); }

  .opcion {
    display: flex;
    inline-size: 100%;
    justify-content: space-between;
    border-radius: var(--radio-s);
    padding: var(--e2) var(--e2) var(--e2) var(--e3);
  }

  .zona__pie .opcion { flex: 0 0 auto; }
  .opcion__control { flex: 1 1 auto; }
}