/* veritas — hoja de estilo unica (Prompt 15).
 *
 * Escrita a mano y sin librerias. El enunciado pedia Tailwind, y se decidio no usarlo por
 * un motivo de docs/07: «un despacho instala, activa su licencia y trabaja **sin conexion**
 * a tus servidores». Tailwind sin compilar significa o un CDN en tiempo de ejecucion o
 * meter tres megas de utilidades en el repositorio; ninguna de las dos encaja con eso ni
 * con un repositorio de Python puro sin npm. Queda anotado en docs/decisiones.md.
 *
 * Los tres principios de docs/05, en este orden:
 *
 * 1. El estado de verificacion es el elemento visual dominante.
 * 2. Cero animaciones decorativas. Es una herramienta de trabajo.
 * 3. Se maneja con teclado: un abogado con prisa no usa el raton.
 */

/* ── Variables ───────────────────────────────────────────────────── */

:root {
  --tinta: #1a1a1a;
  --tinta-suave: #555;
  --papel: #fbfbfa;
  --papel-hundido: #f2f2f0;
  --borde: #d6d6d2;

  /* Los colores de estado NUNCA van solos: siempre acompanan a la palabra escrita.
   * Un daltonico no puede jugarse un escrito a distinguir un verde de un rojo, y la
   * norma de accesibilidad es la misma: el color no puede ser el unico portador de una
   * informacion. */
  --verificada: #1b6b3a;
  --verificada-fondo: #eaf5ee;
  --problema: #9c1f1f;
  --problema-fondo: #fbeceb;
  --pendiente: #8a5a00;
  --pendiente-fondo: #fdf4e3;
  --neutro: #44506b;
  --neutro-fondo: #eef0f6;

  --foco: #0b57d0;
  --ancho-lectura: 46rem;
}

/* ── Reinicio minimo ─────────────────────────────────────────────── */

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* Cero animaciones decorativas: no hay ninguna transicion en toda la hoja, y esta regla
 * esta aqui para que quien anada una se encuentre con que el sistema la desactiva si el
 * usuario lo ha pedido. Es lo minimo. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Teclado ─────────────────────────────────────────────────────── */

/* El foco tiene que verse **mucho**. Un contorno de un pixel gris es lo mismo que no
 * tenerlo cuando se navega rapido. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.salto-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--foco);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
}

.salto-al-contenido:focus {
  left: 0;
}

/* ── Estructura ──────────────────────────────────────────────────── */

.cabecera {
  border-bottom: 1px solid var(--borde);
  background: #fff;
}

.cabecera-interior {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0.7rem 1.2rem;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.marca {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.navegacion {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.navegacion a {
  color: var(--tinta-suave);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

.navegacion a:hover,
.navegacion a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

main {
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 4rem;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 0.3rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.7rem;
}

.sumario {
  color: var(--tinta-suave);
  margin: 0 0 1.5rem;
}

/* ── La tarjeta de pasaje, el componente central ─────────────────── */

.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  /* La banda de estado. Es lo primero que se ve de una tarjeta, y por eso esta aqui y no
   * en un icono al final de la linea. */
  border-left: 6px solid var(--neutro);
  margin-bottom: 1.1rem;
}

.tarjeta--verificada {
  border-left-color: var(--verificada);
}
.tarjeta--problema {
  border-left-color: var(--problema);
}
.tarjeta--pendiente {
  border-left-color: var(--pendiente);
}

.tarjeta-estado {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--neutro-fondo);
  font-size: 0.85rem;
}

.tarjeta--verificada .tarjeta-estado {
  background: var(--verificada-fondo);
}
.tarjeta--problema .tarjeta-estado {
  background: var(--problema-fondo);
}
.tarjeta--pendiente .tarjeta-estado {
  background: var(--pendiente-fondo);
}

/* El estado, **escrito**. El color acompana; la palabra es la que informa. */
.estado-nombre {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tarjeta--verificada .estado-nombre {
  color: var(--verificada);
}
.tarjeta--problema .estado-nombre {
  color: var(--problema);
}
.tarjeta--pendiente .estado-nombre {
  color: var(--pendiente);
}

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

.tarjeta-cuerpo {
  padding: 0.9rem 1rem;
}

/* El literal, entero y sin recortar. Aqui no hay resumen: docs/05 dice que ningun resumen
 * se muestra sin el literal al lado, y la forma segura de cumplirlo es que en esta
 * tarjeta solo haya literal. */
.literal {
  margin: 0 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  border-left: 3px solid var(--borde);
  padding-left: 0.9rem;
  white-space: pre-wrap;
}

.procedencia {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: baseline;
}

.procedencia .separador {
  color: var(--borde);
}

.tarjeta-acciones {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--borde);
  background: var(--papel-hundido);
}

/* ── Controles ───────────────────────────────────────────────────── */

.boton,
button,
input[type="submit"] {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--tinta);
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.boton:hover,
button:hover {
  background: var(--papel-hundido);
}

.boton--principal,
button.principal {
  background: var(--tinta);
  color: #fff;
}

.boton--principal:hover,
button.principal:hover {
  background: #000;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

input[type="text"],
input[type="date"],
input[type="search"],
input[type="password"],
input[type="email"],
/* `number` y `file` los anadio el Prompt 16 con la pantalla de ajustes y la de auditoria.
 * Sin estar en esta lista se pintaban con el estilo por defecto del navegador, mas pequenos
 * y con otro borde, al lado de los campos de texto de la misma rejilla. */
input[type="number"],
input[type="file"],
textarea,
select {
  font: inherit;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--tinta);
}

.campo {
  margin-bottom: 1rem;
}

/* El texto de ayuda de un campo. **Sin `pre-wrap`**, y esa es la unica linea que importa
 * aqui: el Prompt 15 encontro que con `white-space: pre-wrap` una etiqueta escrita en
 * varias lineas en la plantilla imprime el salto y la sangria del HTML, y lo arreglo solo
 * para `.ayuda--larga`. Las demas seguian imprimiendolas: medido en el navegador en el
 * Prompt 16, `textContent` empezaba por "\n        " y el bloque ocupaba una linea de mas.
 * Ninguna ayuda necesita conservar saltos: el unico texto multiparrafo --la explicacion de
 * la fecha de referencia-- se pinta ya en varios `<p>`. */
.ayuda {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin: 0.3rem 0 0;
}

/* ── Tablas ──────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.93rem;
}

th,
td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

th {
  background: var(--papel-hundido);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Un hueco del cuadro va en rojo, y con la palabra «hueco» escrita. */
tr.hueco td {
  background: var(--problema-fondo);
}

/* ── Avisos ──────────────────────────────────────────────────────── */

.aviso {
  border: 1px solid var(--borde);
  border-left: 6px solid var(--pendiente);
  background: var(--pendiente-fondo);
  padding: 0.8rem 1rem;
  margin: 0 0 1.2rem;
}

.aviso--grave {
  border-left-color: var(--problema);
  background: var(--problema-fondo);
}

.aviso p {
  margin: 0;
}

.aviso strong {
  display: block;
  margin-bottom: 0.2rem;
}

/* ── Los trece pasos ─────────────────────────────────────────────── */

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--borde);
  background: #fff;
}

.paso {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--borde);
}

.paso:last-child {
  border-bottom: 0;
}

.paso-numero {
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.paso-nombre {
  font-weight: 600;
}

.paso-detalle {
  grid-column: 2 / -1;
  font-size: 0.88rem;
  color: var(--tinta-suave);
}

.paso-metrica {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Progreso real, no una barra falsa: cada paso se pinta cuando llega su evento. */
.paso--pendiente .paso-nombre {
  color: var(--tinta-suave);
  font-weight: 400;
}
.paso--ok {
  background: var(--verificada-fondo);
}
.paso--fallido {
  background: var(--problema-fondo);
}

.incidencia {
  grid-column: 2 / -1;
  font-size: 0.86rem;
  color: var(--problema);
  margin: 0.2rem 0 0;
}

/* Por que existe ese paso. Los tres que la llevan --verificar, linea contraria y barrera--
 * son los que un letrado no adivinaria mirando el nombre, y son los que justifican el
 * sistema entero. */
.paso-explicacion {
  grid-column: 2 / -1;
  margin: 0.25rem 0 0;
}

/* ── El lector ───────────────────────────────────────────────────── */

.lector {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .lector {
    grid-template-columns: 1fr;
  }
}

.lector-indice {
  position: sticky;
  top: 1rem;
  font-size: 0.9rem;
}

.lector-indice h2 {
  margin-top: 0;
}

.lector-indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lector-indice li {
  margin-bottom: 0.35rem;
}

/* La sección donde cae el pasaje citado, marcada en el índice. Va con `font-weight`
 * además del color, por lo mismo de siempre. */
.lector-indice a[aria-current="true"] {
  font-weight: 700;
  color: var(--tinta);
}

.lector-texto {
  background: #fff;
  border: 1px solid var(--borde);
  padding: 1.5rem;
  max-width: var(--ancho-lectura);
  font-family: Georgia, "Times New Roman", serif;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* El pasaje citado, resaltado **en su posicion exacta** por offsets. No se busca el texto:
 * un pasaje que aparece dos veces resaltaria el primero, y el citado podria ser el otro. */
mark.pasaje-citado {
  background: #fff3a3;
  padding: 0.1em 0;
  box-shadow: 0 0 0 2px #fff3a3;
}

/* Dentro del lector el literal es el documento entero, no una cita: sin la barra lateral
 * y sin sangrar, que ahi no significaria nada. */
.lector-texto .literal {
  border-left: 0;
  padding-left: 0;
  margin: 0;
}

/* ── Huecos del cuadro ───────────────────────────────────────────── */

/* **En rojo, y con la palabra escrita.** Un elemento confirmado que ninguna autoridad
 * sostiene es un agujero en la demanda, y senalarlo vale mas que traer otra cita. Va antes
 * que las fichas en la pantalla por eso mismo. */
.huecos {
  margin-bottom: 1.5rem;
}

.huecos ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li.hueco {
  border: 1px solid var(--borde);
  border-left: 6px solid var(--problema);
  background: var(--problema-fondo);
  padding: 0.7rem 1rem;
  margin-bottom: 0.6rem;
}

li.hueco p {
  margin: 0;
}

/* ── Fichas de subsuncion ────────────────────────────────────────── */

/* Misma gramatica visual que la tarjeta de pasaje, y a proposito: las dos dicen «esto se
 * puede usar» o «esto sigue bloqueado», que es la misma informacion. */
.ficha {
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 6px solid var(--pendiente);
  margin-bottom: 1.2rem;
}

.ficha--utilizable {
  border-left-color: var(--verificada);
}

.ficha-cabecera {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--pendiente-fondo);
  font-size: 0.85rem;
}

.ficha--utilizable .ficha-cabecera {
  background: var(--verificada-fondo);
}

.ficha--pendiente .estado-nombre {
  color: var(--pendiente);
}

.ficha--utilizable .estado-nombre {
  color: var(--verificada);
}

.formulario--ficha {
  padding: 0.9rem 1rem;
}

.ficha-acciones {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--borde);
  background: var(--papel-hundido);
}

/* Descartar no se disfraza de accion neutra, pero tampoco se pinta como la principal: es
 * una decision del letrado, no un boton de emergencia. */
button.destructivo {
  border-color: var(--problema);
  color: var(--problema);
}

button.destructivo:hover {
  background: var(--problema-fondo);
}

/* ── Elementos de la accion ──────────────────────────────────────── */

.lista-elementos,
.lista-investigaciones,
.bitacora {
  list-style: none;
  margin: 0;
  padding: 0;
}

.elemento {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: baseline;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 6px solid var(--pendiente);
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.5rem;
}

/* Un elemento propuesto y uno confirmado se distinguen a un metro de distancia, porque de
 * eso depende que nadie construya un escrito sobre elementos que no ha revisado. */
.elemento--utilizable {
  border-left-color: var(--verificada);
}

.estado-nombre--pequeno {
  font-size: 0.75rem;
}

.elemento--pendiente .estado-nombre {
  color: var(--pendiente);
}

.elemento--utilizable .estado-nombre {
  color: var(--verificada);
}

.marca-pendiente {
  color: var(--pendiente);
  font-weight: 600;
}

/* ── Bitacora e investigaciones ──────────────────────────────────── */

.bitacora li,
.lista-investigaciones li {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--borde);
  font-size: 0.92rem;
}

.tipo-anotacion {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  font-weight: 600;
}

/* ── Formularios y textos de pantalla ────────────────────────────── */

.formulario {
  max-width: var(--ancho-lectura);
}

.formulario--linea {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  max-width: none;
}

.formulario--linea .campo {
  flex: 1 1 20rem;
  margin-bottom: 0;
}

/* La fecha de referencia lleva marco propio: es el campo del que depende que todo el
 * sistema razone con el Derecho vigente cuando ocurrieron los hechos. */
.campo--destacado {
  border: 1px solid var(--borde);
  border-left: 6px solid var(--neutro);
  background: var(--neutro-fondo);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

/* Aqui el texto ya viene en parrafos, asi que el `pre-wrap` heredado de `.ayuda` sobra: lo
 * unico que hacia era imprimir la sangria de las etiquetas de Jinja. */
/* Ya no hace falta anular `pre-wrap` aqui: `.ayuda` no lo pone. Queda la separacion entre
 * parrafos, que es lo propio de una ayuda larga. */
.ayuda--larga p {
  margin: 0 0 0.5rem;
}

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

.nota {
  color: var(--tinta-suave);
  font-size: 0.9rem;
  margin: 0.4rem 0 1rem;
}

.consulta {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  border-left: 3px solid var(--borde);
  padding-left: 0.9rem;
}

.acciones-fila {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.5rem;
}

/* ── Migas y datos ───────────────────────────────────────────────── */

.migas {
  font-size: 0.88rem;
  color: var(--tinta-suave);
  margin-bottom: 0.6rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.2rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.datos dt {
  font-weight: 600;
  color: var(--tinta-suave);
}

.datos dd {
  margin: 0;
}

.datos .ayuda {
  margin: 0;
}

/* ── Acceso ──────────────────────────────────────────────────────── */

.acceso {
  max-width: 24rem;
  margin: 2rem auto;
}

/* ── Salir ───────────────────────────────────────────────────────── */

/* Un `<form>` con un `<button>`, porque cerrar sesion cambia estado y un enlace no debe.
 * Pero tiene que verse como el resto de la navegacion, no como un boton suelto. */
.salir {
  margin: 0;
}

button.enlace {
  border: 0;
  background: none;
  padding: 0.2rem 0;
  font-size: 1rem;
  color: var(--tinta-suave);
  border-bottom: 2px solid transparent;
}

button.enlace:hover {
  background: none;
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

/* ── Paso omitido ────────────────────────────────────────────────── */

/* Ni bien ni mal: no se ejecuto. Pintarlo de verde seria decir que hizo algo. */
.paso--omitido {
  background: var(--papel-hundido);
}

.paso--omitido .paso-nombre {
  color: var(--tinta-suave);
}

/* ── Varios ──────────────────────────────────────────────────────── */

.vacio {
  color: var(--tinta-suave);
  background: var(--papel-hundido);
  border: 1px dashed var(--borde);
  padding: 1.2rem;
  text-align: center;
}

.pila > * + * {
  margin-top: 1rem;
}

.fila {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.fila > .campo {
  flex: 1 1 14rem;
  margin-bottom: 0;
}

.monospace {
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
  font-size: 0.85rem;
}

.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── La cita del informe de auditoria (Prompt 16) ─────────────────── */

/* Misma anatomia que `.tarjeta`: banda de estado a la izquierda, cabecera con el estado
 * ESCRITO y cuerpo con el literal. No se reutiliza `.tarjeta` porque lo que se ensena es
 * otra cosa --una cita de un escrito ajeno, no un pasaje del corpus-- y compartir la clase
 * habria atado dos pantallas que van a evolucionar por separado. */
.cita {
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 6px solid var(--neutro);
  margin-bottom: 1.1rem;
}

.cita--verificada {
  border-left-color: var(--verificada);
}
.cita--problema {
  border-left-color: var(--problema);
}
.cita--pendiente {
  border-left-color: var(--pendiente);
}

.cita-estado {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--neutro-fondo);
  font-size: 0.85rem;
}

.cita--verificada .cita-estado {
  background: var(--verificada-fondo);
}
.cita--problema .cita-estado {
  background: var(--problema-fondo);
}
.cita--pendiente .cita-estado {
  background: var(--pendiente-fondo);
}

.cita--verificada .estado-nombre {
  color: var(--verificada);
}
.cita--problema .estado-nombre {
  color: var(--problema);
}
.cita--pendiente .estado-nombre {
  color: var(--pendiente);
}

.cita-cuerpo {
  padding: 0.9rem 1rem;
}

/* Que es cada bloque de texto, escrito. En una cita alterada hay DOS literales seguidos, y
 * sin etiqueta no se sabe cual es el del escrito y cual el de la resolucion: exactamente el
 * error que esta pantalla existe para evitar. */
.etiqueta-campo {
  margin: 0.9rem 0 0.25rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-suave);
}

.cita-cuerpo > .etiqueta-campo:first-child {
  margin-top: 0;
}

/* El literal de la fuente, distinguido del citado. El borde verde acompana a la etiqueta;
 * la etiqueta es la que informa. */
.literal--fuente {
  border-left-color: var(--verificada);
  background: var(--verificada-fondo);
}

.diferencias {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.93rem;
}

.diferencia-citado {
  color: var(--problema);
}

.diferencia-fuente {
  color: var(--verificada);
}

/* El texto de impugnacion es un borrador para copiar, y se ve que lo es. */
.impugnacion {
  margin: 0.2rem 0 0;
  padding: 0.8rem 1rem;
  background: var(--papel-hundido);
  border: 1px dashed var(--borde);
  white-space: pre-wrap;
}

.accion {
  margin: 0.6rem 0 0;
  font-weight: 600;
}

/* ── Formularios de auditoria y ajustes ───────────────────────────── */

.opcion {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
}

.opcion label {
  font-weight: 400;
}

fieldset {
  border: 1px solid var(--borde);
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
}

legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 1rem;
}

/* ── Alertas (Prompt 17) ──────────────────────────────────────────── */

/* Misma anatomia que `.tarjeta` y `.cita`: banda a la izquierda, cabecera con el estado
 * escrito y cuerpo. Aqui la banda solo distingue leida de pendiente: una alerta no tiene
 * mas estados que ese, e inventarle colores seria dar a entender gravedades que el sistema
 * no calcula. */
.alerta {
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 6px solid var(--borde);
  margin-bottom: 1.1rem;
}

.alerta--pendiente {
  border-left-color: var(--pendiente);
}

.alerta-cabecera {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--papel-hundido);
  font-size: 0.85rem;
}

.alerta--pendiente .alerta-cabecera {
  background: var(--pendiente-fondo);
}

.alerta-cuerpo {
  padding: 0.9rem 1rem;
}

.alerta-titulo {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

/* El cuerpo trae el parrafo que motiva el aviso, y el briefing trae una linea por norma:
 * `pre-wrap` conserva esos saltos. Aqui SI hace falta, al reves que en `.ayuda`, porque el
 * texto lo compone el dominio con saltos deliberados y no la sangria de una plantilla. */
.alerta-texto {
  margin: 0;
  white-space: pre-wrap;
}

.alerta-acciones {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.9rem;
}

.alerta-acciones form {
  margin: 0;
}

/* ── Bandas de licencia y demostración (Prompt 18) ─────────────────────────
   Van arriba del contenido y no en una esquina: un aviso de que la licencia
   caduca en cinco días tiene que verse sin buscarlo, y la marca de
   demostración tiene que estar donde nadie pueda enseñar una captura sin
   ella. El rojo se reserva para cuando la instalación ya NO deja crear. */
.banda {
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.45;
  border-bottom: 1px solid transparent;
}
.banda-demo {
  background: #eef2ff;
  border-bottom-color: #c7d2fe;
  color: #312e81;
}
.banda-licencia {
  background: #fffbeb;
  border-bottom-color: #fde68a;
  color: #78350f;
}
.banda-licencia-parada {
  background: #fef2f2;
  border-bottom-color: #fecaca;
  color: #7f1d1d;
}

/* ── Corpus: ingesta asistida ──────────────────────────────────────────────
   El aviso de la fuente va con peso visual propio, no como una nota al pie:
   quien sube un fichero tiene que leer que la aplicación no entra en vLex y
   que el fichero no se guarda. Una nota gris de 12 px no la lee nadie. */
.aviso-fuente {
  border-left: 4px solid #94a3b8;
  background: #f8fafc;
  padding: 0.75rem 1rem;
  margin: 1rem 0 1.5rem;
}
.aviso-fuente p {
  margin: 0.4rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.exito {
  border-left: 4px solid #16a34a;
  background: #f0fdf4;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.exito p { margin: 0.3rem 0; }
.ojo { color: #92400e; }
.opcional { color: #64748b; font-weight: normal; }
.campo--triple {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.campo--triple > span { flex: 1 1 12rem; display: block; }
.campo--casilla label { font-weight: normal; }