/* firma · demo.html, extiende styles.css. Cero tokens nuevos: todo lo de aquí
   consume :root de styles.css. Si algo faltara, sube primero a ese :root. */

/* ---------------------------------------------------------------- layout */

.demo-body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* En la landing el header vive sobre un hero y su fondo aparece con el scroll
   (--scroll-p). Aquí no hay hero ni ese script: sin fondo propio, el texto del
   escrito pasa por debajo del logo y se lee encima de él. En una superficie de
   producto la barra superior es cromo, no capa flotante: fondo sólido y punto. */
.demo-head { background: var(--bg); }
.demo-head::before { display: none; }
.demo-head .head-in { align-items: center; }
.demo-head .mark { text-decoration: none; }
.demo-head .mark:hover { color: var(--accent); }

/* La barra de modos, en flujo, es la que despeja el header fijo (ver .modes más
   abajo): por eso aquí ya no hay padding-top propio. */
.chat-main {
  flex: 1;
  padding-bottom: 132px;
}

.chat-shell-in {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 236px);
}

/* ---------------------------------------------------------------- empty state / ejemplos */

.chat-empty {
  max-width: 640px;
  padding-block: var(--space-2xl) var(--space-lg);
}
.chat-empty .h2 { margin-block: var(--space-md) var(--space-sm); }

.examples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.example-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: left;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  border-radius: var(--r-sub);
  padding: var(--space-md) var(--space-lg);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.example-card:hover,
.example-card:focus-visible {
  border-color: var(--line-hi);
  background: var(--bg-card-2);
}
.example-card:disabled { opacity: .5; cursor: not-allowed; }
.example-card .label { margin: 0; }
.example-card .example-q {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- hilo de mensajes */

.chat-thread { display: flex; flex-direction: column; padding-block: var(--space-lg); }

.msg { max-width: 920px; margin-bottom: var(--space-xl); width: 100%; }
.msg-user { margin-left: auto; display: flex; justify-content: flex-end; }
.msg-user-bubble {
  max-width: 70ch;
  border: 1px solid var(--line-strong);
  background: var(--bg-card-2);
  border-radius: var(--r-sub);
  padding: var(--space-sm) var(--space-lg);
  color: var(--ink);
  font-size: var(--fs-body);
  overflow-wrap: anywhere;
}
.msg-assistant { margin-right: auto; }

.msg-loading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  padding-block: var(--space-md);
}
.dots { display: inline-flex; gap: 4px; }
.dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-4);
  animation: dot-pulse 1.1s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dot-pulse {
  0%, 80%, 100% { opacity: .3; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dots span { animation: none; opacity: .7; transform: none; }
}

/* respuesta: el texto del artículo.
 *
 * Esta regla faltaba y el <p> caía al estilo heredado, que lo mostraba a 26px
 * de serif de display: un artículo entero se leía como si fuera el título de la
 * ley. 26px sirve para un valor corto como la UF, no para prosa legal de mil
 * caracteres.
 *
 * Tres decisiones, todas por legibilidad de documento y no de titular:
 *  - tamaño de lectura (--fs-lead) con interlínea de cuerpo (--lh-body);
 *  - medida acotada, porque una línea de 120 caracteres hace perder el renglón
 *    justo en el texto que la persona vino a leer con cuidado;
 *  - se mantiene la serif, que es la voz de la marca y sostiene bien la lectura
 *    larga.
 *
 * El texto de BCN viene con saltos de línea cada ~55 caracteres, que son su
 * wrap de ancho fijo y no incisos (medido: 24 saltos simples, 0 líneas en
 * blanco en el art. 160 del Estatuto Administrativo). Por eso se colapsan y no
 * se usa white-space: pre-wrap, que reproduciría el wrap ajeno.
 */
.answer-quote {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink);
  max-width: 72ch;
  margin-bottom: var(--space-md);
  white-space: pre-line;
}

/* respuesta: indicador. Valor corto y numérico, por eso sí va grande. */
.indicator-quote {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: var(--space-xl);
}
.indicator-quote small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  margin-top: var(--space-xs);
  letter-spacing: 0;
  text-transform: none;
}

.tramos-list { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.tramos-list li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-xs);
}
.tramos-list li span:last-child { color: var(--ink-2); white-space: nowrap; }

/* límite alcanzado */
.limit-card { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }

/* advertencia de numeral/inciso no aislable (Fix 2) -- acompaña la cita, nunca
   la reemplaza. Borde de acento a la izquierda para que se note sin gritar. */
.answer-advertencia {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--accent-soft);
  background: var(--bg-raise);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
}

/* respuesta "no reconocido" (Fix 3): encuadre + ejemplos ANTES del detalle técnico */
.no-reconocido-intro { color: var(--ink-2); max-width: 62ch; }

.examples-grid-inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}
.example-card-inline {
  padding: var(--space-sm) var(--space-md);
}
.example-card-inline .example-q { font-size: 15px; }
/* "reformula el tema" (P4) es informativo, no una consulta pre-armada -- sin
   cursor de clic ni resalte de hover, para no prometer una acción que no hace. */
.example-card-tip { cursor: default; }
.example-card-tip:hover { border-color: var(--line-strong); background: var(--bg-card); }

@media (max-width: 539.98px) {
  .examples-grid-inline { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- input fijo */

/* Fondo sólido, no degradado: la barra creció (ahora lleva el control de fecha)
   y con un fade el párrafo del hilo se leía a través de la fila de la fecha.
   Además, con el header y la barra de modos ya sólidos, un cromo inferior
   translúcido rompía la coherencia de la pantalla. */
.chat-input-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding-block: var(--space-md) var(--space-lg);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-raise);
  border-radius: var(--r-pill);
  padding: var(--space-2xs);
  padding-left: var(--space-lg);
  backdrop-filter: blur(10px);
}
.chat-input-bar:focus-within { border-color: var(--line-hi); }

.chat-input-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.chat-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  padding-block: var(--space-sm);
}
.chat-input::placeholder { color: var(--ink-4); }
.chat-input:disabled { color: var(--ink-4); }

/* Segundo placeholder (P2, pulido-3): bajo 640px el largo ("Escribe una
   pregunta, pega un escrito o adjunta un PDF") se parte palabra por línea en
   una caja angosta. En vez de medir el ancho por JS, es un segundo elemento
   -- oculto siempre salvo bajo ese breakpoint Y solo mientras el campo real
   está vacío (:placeholder-shown cubre las dos condiciones a la vez, ver la
   media query de abajo). */
.chat-input-placeholder-sm {
  display: none;
  position: absolute;
  top: var(--space-sm);
  left: 0;
  color: var(--ink-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  pointer-events: none;
}

/* Los botones son hijos directos de .chat-input-bar en el layout de escritorio
   (display:contents los saca del flujo del propio <div> envoltorio) -- bajo
   640px pasan a ser su fila real, ver la media query. */
.chat-input-acts { display: contents; }

/* Compositor único (flujo único, 02-09-2026): crece con el contenido, de una
   línea a un tope de ~12 -- el alto real lo fija el JS (scrollHeight) leyendo
   este min/max, nunca al revés. */
.chat-input-textarea {
  resize: none;
  line-height: 1.5;
  min-height: 24px;
  max-height: 280px;
  overflow-y: auto;
}

.chat-foot-note {
  margin-top: var(--space-sm);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
}

/* ---------------------------------------------------------------- overflow */

/* P3 (pulido-3): un token largo sin espacios (una URL pegada, una cita sin
   cortes) dentro de un flex item sin min-width:0 empuja el ancho del item más
   allá de su contenedor -- confirmado con un smoke real: "tu pregunta: <url
   larga>" en la barra mono de la card llegaba a 930px de ancho en un viewport
   de 375px. `overflow-x: clip` en html/body (styles.css) esconde el síntoma
   en navegadores que soportan ese valor, pero el layout de abajo sigue roto
   -- en un in-app browser sin soporte (el caso real: Safari/Instagram en
   iPhone) el scroll horizontal vuelve. Se arregla en el origen: el texto
   puede partirse, y el flex item puede encogerse bajo su ancho de contenido. */
.answer-bar span,
.mat-head > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 809.98px) {
  .chat-main { padding-bottom: 148px; }
  .examples-grid { grid-template-columns: minmax(0, 1fr); }
  .msg { max-width: 100%; }
  .msg-user-bubble { max-width: 100%; }
}

@media (max-width: 639.98px) {
  .chat-empty { padding-block: var(--space-xl) var(--space-md); }
  .fecha-bar { padding-inline: var(--space-sm); margin-bottom: var(--space-xs); }
  /* El control de fecha y su nota se apilan (P2): la fila label+input queda
     arriba, la nota abajo, acortada a una línea en vez de escondida fuera de
     pantalla -- .fecha-bar ya es flex-wrap:wrap (styles.css), esto solo obliga
     a la nota a su propia fila y le pone un límite visual de una línea. */
  .fecha-nota {
    flex-basis: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chat-foot-note { display: none; }
  /* El contador de consultas restantes es información de uso, no adorno de
     landing: aquí se queda en toda pantalla (styles.css lo esconde bajo 640
     porque en la landing es solo decorativo). */
  .demo-head .head-meta { display: block; }

  /* Compositor angosto (P2): el campo ocupa todo el ancho y crece hacia abajo;
     los dos botones bajan a su propia fila, "Enviar" a la derecha por ser el
     primario (.btn-tinta en styles.css: fondo tinta vs. el borde neutro de
     .act). Pill de una sola fila no calza con dos filas de contenido -- baja
     a --r-sub, el mismo radio que usa .fecha-input al lado. */
  .chat-input-bar {
    flex-wrap: wrap;
    border-radius: var(--r-sub);
    padding-left: var(--space-md);
  }
  .chat-input-field { flex-basis: 100%; }
  .chat-input-textarea::placeholder { color: transparent; }
  #campo-pregunta:placeholder-shown ~ .chat-input-placeholder-sm { display: block; }
  .chat-input-acts {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-2xs);
  }
  .chat-input-acts .btn { margin-left: auto; }
}

/* --- búsqueda por materia -------------------------------------------------
   Deliberadamente MENOS enfática que una cita verificada: sin borde de acento,
   sin la tipografía del texto legal citado. La jerarquía visual tiene que decir
   "esto puede servirte" y no "esta es la respuesta". */

.mat-intro {
  font-size: var(--fs-small);
  color: var(--ink-3);
  margin: 0 0 var(--space-md);
  max-width: 62ch;
}

/* Bloque del asistente (encargo "asistente", 02-09-2026): reusa .label y
   .answer-quote/.field-note tal cual -- ver design.md §8, sin tokens ni
   colores nuevos. Solo el espaciado antes de la lista de fuentes es propio. */
.asis-bloque {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.asis-bloque .asis-texto { margin-bottom: 0; }

.mat-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.mat-item {
  border-top: 1px solid var(--line);
  padding-top: var(--space-sm);
}

.mat-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
  margin: 0 0 var(--space-2xs);
}

.mat-marca {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
}

.mat-norma {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: var(--tr-label);
}

.mat-art {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--accent);
}

.mat-texto {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
  white-space: pre-wrap;
}

.mat-meta,
.mat-terminos {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  margin: 0;
  overflow-wrap: anywhere;
}

.mat-terminos { color: var(--ink-4); }

.mat-alcance {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-3);
  max-width: 68ch;
}

.mat-recorte {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
  margin: 0 0 var(--space-2xs);
}

/* ==========================================================================
   Mesa de trabajo: dos modos, cita copiable, versión histórica y revisión de
   un escrito completo. Cero tokens nuevos, igual que el resto del archivo.

   NOTA DE JERARQUÍA CROMÁTICA (design.md §2, don't #4: un solo color, menos del
   5% del viewport). El revisor tiene cuatro estados y NO se resuelven con cuatro
   colores: se resuelven con tono y con el trazo del subrayado.
     verificada     -> tinta normal, hairline sólido. Es el caso aburrido: si tu
                       cita está bien, no tiene por qué gritarte.
     inexistente    -> lo ÚNICO que se lleva el acento. Es el hallazgo que puede
                       costarte un escrito, y en un documento sano aparece cero
                       veces, así que el presupuesto de acento no se toca.
     no verificable -> tinta apagada, hairline discontinuo.
     sin revisar    -> tinta más apagada todavía, hairline punteado.
   ========================================================================== */

/* El atributo hidden tiene que ganarle al display:flex del panel. */
.chat-shell-in[hidden], .chat-input-wrap[hidden] { display: none; }

/* ---------------------------------------------------------------- fecha */

.fecha-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: 0 var(--space-md);
}

.fecha-lab, .fecha-nota {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.fecha-nota { text-transform: none; letter-spacing: 0; flex: 1 1 240px; min-width: 0; }

.fecha-input {
  color-scheme: dark;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-chip);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  padding: 5px var(--space-xs);
  min-width: 0;
}
.fecha-input.is-puesta { color: var(--ink); border-color: var(--accent-soft); }

.fecha-reset {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  padding: 4px var(--space-sm);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.fecha-reset:hover { border-color: var(--line-hi); color: var(--ink); }

/* ---------------------------------------------------------------- cita copiable */

.cita-box {
  margin-top: var(--space-lg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sub);
  background: var(--bg-raise);
  padding: var(--space-md) var(--space-lg);
}

.cita-lab { margin: 0 0 var(--space-xs); }

.cita-pin {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 0 0 var(--space-md);
}

.cita-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.act {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  padding: 6px var(--space-sm);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.act:hover { border-color: var(--line-hi); color: var(--ink); }
.act-fuerte {
  border-color: var(--accent-soft);
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.act-fuerte:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.act.is-hecho { border-color: var(--accent); color: var(--accent); }
.act.is-falla { border-color: var(--line-lit); color: var(--ink-4); }

.cita-nota {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- versión histórica */

.hist {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-sub);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.hist-k {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.hist-v {
  flex: 1 1 260px;
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- textareas dentro del hilo */

.escrito-input {
  width: 100%;
  resize: vertical;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sub);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.7;
  padding: var(--space-md) var(--space-lg);
  min-height: 220px;
}
.escrito-input::placeholder { color: var(--ink-4); }
.escrito-input:focus-visible { border-color: var(--line-hi); }

.escrito-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.escrito-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
}

.escrito-out { margin-top: var(--space-xl); }
.escrito-out .msg-loading { padding-block: var(--space-lg); }

/* resumen de la revisión: grilla con separadores de 1px hechos con gap */
.sum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.sum-cell {
  background: var(--bg-card);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.sum-n {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}
.sum-cell.is-alarma .sum-n { color: var(--accent); }

.sum-t { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); }

/* lo que el revisor NO miró: va arriba, nunca escondido */
.gap-rev {
  border-left: 2px solid var(--accent-soft);
  background: var(--bg-raise);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
}
.gap-rev .label { display: block; margin-bottom: var(--space-2xs); }
.gap-v { font-size: var(--fs-small); line-height: 1.65; color: var(--ink-2); max-width: 68ch; }

.gap-lista {
  margin-top: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
}
.gap-lista li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-chip);
  padding: 2px var(--space-xs);
}

/* el escrito con sus marcas */
.doc-wrap { margin-bottom: var(--space-xl); }
.doc-lab { display: block; margin-bottom: var(--space-xs); }

.doc {
  max-height: 46svh;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sub);
  background: var(--bg-card);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: 1.85;
  color: var(--ink-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mk {
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid var(--line-lit);
}
.mk-ok { color: var(--ink); border-bottom-color: var(--line-hi); }
.mk-mal {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.mk-duda { color: var(--ink-2); border-bottom-style: dashed; }
.mk-sin { color: var(--ink-4); border-bottom-style: dotted; }
.mk:hover, .mk:focus-visible { background: var(--bg-card-2); }

.doc-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
}
.lg {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
  border-bottom: 1px solid var(--line-lit);
  padding-bottom: 1px;
}
.lg-ok { color: var(--ink-2); border-bottom-color: var(--line-hi); }
.lg-mal { color: var(--accent); border-bottom: 2px solid var(--accent); }
.lg-duda { border-bottom-style: dashed; }
.lg-sin { border-bottom-style: dotted; }

/* detalle por cita */
.rev-acts { margin-bottom: var(--space-xl); }

.rev-lista { display: flex; flex-direction: column; }

.rev {
  border-top: 1px solid var(--line);
  padding-block: var(--space-lg);
  scroll-margin-top: 140px;
  transition: background var(--dur-2) var(--ease-out);
}
.rev.is-mirando { background: var(--bg-card-2); }
.rev-mal { border-left: 2px solid var(--accent); padding-left: var(--space-md); }

.rev-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
}

.badge {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-chip);
  padding: 2px var(--space-xs);
  color: var(--ink-3);
  white-space: nowrap;
}
.badge-ok { border-color: var(--line-lit); color: var(--ink-2); }
.badge-mal { border-color: var(--accent); color: var(--accent); }
.badge-duda { border-style: dashed; border-color: var(--line-lit); }
.badge-derog { border-color: var(--accent-soft); color: var(--accent-soft); }

.rev-orig {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.rev-razon { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); max-width: 68ch; }

.rev-aviso {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-3);
  border-left: 2px solid var(--line-lit);
  padding-left: var(--space-sm);
  max-width: 66ch;
}

.rev-lab { display: block; margin: var(--space-md) 0 var(--space-2xs); }

.rev-oficial {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  white-space: pre-wrap;
  border-left: 1px solid var(--line-lit);
  padding-left: var(--space-md);
  max-width: 74ch;
}

.rev-meta {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
  overflow-wrap: anywhere;
}
.rev-meta a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.rev-meta a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 809.98px) {
  .modes { margin-top: 74px; top: 72px; }
  .sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-n { font-size: 28px; }
}

@media (max-width: 539.98px) {
  .cita-box { padding: var(--space-md); }
  .act { font-size: 11px; padding: 5px 10px; }
  .sum-cell { padding: var(--space-sm) var(--space-md); }
  .rev-oficial { padding-left: var(--space-sm); }
  .doc { padding: var(--space-sm) var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .act, .fecha-reset, .rev, .fecha-input { transition: none; }
}

/* Opciones de desambiguación dentro de una abstención.
 *
 * Van visualmente por debajo del motivo: lo importante sigue siendo que el
 * motor NO respondió, y estas son la salida, no el resultado. Por eso son chips
 * discretos y no botones de acción primaria. */
.opciones-titulo {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  color: var(--ink-3);
}
.opciones-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.opcion-chip {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  text-align: left;
  color: var(--ink);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.opcion-chip:hover { border-color: var(--accent); background: var(--bg-card); }
.opcion-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "leído como" + "no era esto" (flujo único, D3): arriba de la card, no
 * dentro -- es el veredicto del enrutador, no parte de la respuesta misma. */
.leido-como {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.leido-como .label { margin: 0; }
.leido-como .opciones-grid { flex-basis: 100%; margin-top: var(--space-2xs); }
.leido-como .opciones-grid[hidden] { display: none; }

/* ---------------------------------------------------------------------------
 * Respuesta en cuatro niveles: identidad, texto oficial, expansión, procedencia.
 *
 * La jerarquía es la regla de producto hecha visible. El texto oficial es lo
 * único que se muestra grande; todo lo demás (identidad, ids, acciones) queda
 * por debajo en peso. No hay nivel de "resumen" porque el producto no resume.
 * --------------------------------------------------------------------------- */

/* NIVEL 1 -- identidad */
.ident {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.ident-titulo {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0;
}
.ident-estado {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-2);
  white-space: nowrap;
}
.ident-estado.es-derogado { color: var(--accent); }
.ident-version {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  margin: 0;
}

/* NIVEL 2 y 3 -- texto oficial y su expansión */
.bloque-titulo {
  color: var(--ink-3);
  margin-bottom: var(--space-xs);
}
.bloque-oficial { margin-bottom: var(--space-lg); }
.continua {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.continua-nota {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
}
.btn-expandir {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.btn-expandir:hover { border-color: var(--accent); background: var(--bg-card); }
.btn-expandir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* NIVEL 4 -- procedencia. Los ids sirven para auditar, no para leer. */
.detalles { margin-top: var(--space-md); }
.detalles > summary {
  cursor: pointer;
  color: var(--ink-3);
  padding-block: var(--space-xs);
}
.detalles > summary:hover { color: var(--ink-2); }
.detalles > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.detalles[open] > summary { margin-bottom: var(--space-xs); }

/* Una acción principal a la vista; las variantes se despliegan. */
.cita-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.cita-mas > summary {
  cursor: pointer;
  color: var(--ink-3);
  padding-block: var(--space-2xs);
  padding-inline: var(--space-xs);
}
.cita-mas > summary:hover { color: var(--ink-2); }
.cita-mas > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cita-acts-sec { margin-top: var(--space-xs); }

/* NIVEL 5 -- documentos que citan el artículo.
 *
 * Va plegado y con peso bajo: es contexto, no la respuesta. La nota de arriba
 * existe para que nadie lea la lista como "jurisprudencia aplicable". */
.citantes { margin-top: var(--space-md); }
.citantes > summary {
  cursor: pointer;
  color: var(--ink-2);
  padding-block: var(--space-xs);
}
.citantes > summary:hover { color: var(--ink); }
.citantes > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.citantes-nota {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-width: 62ch;
  margin: var(--space-xs) 0 var(--space-md);
}
.citantes-fuente {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-2);
  margin: var(--space-md) 0 var(--space-2xs);
}
.citantes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.citantes-lista li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- admin (GET /admin) */

.admin-indice {
  display: flex;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
}
.admin-indice a { color: var(--ink-3); text-decoration: none; }
.admin-indice a:hover { color: var(--accent); }

.admin-main {
  padding-top: 120px;
  padding-bottom: var(--space-4xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}
.admin-doc { max-width: 78ch; }
.admin-doc h1, .admin-doc h2, .admin-doc h3, .admin-doc h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}
.admin-doc h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); margin-top: 0; }
.admin-doc h2 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
.admin-doc h3, .admin-doc h4 { font-size: var(--fs-lead); line-height: var(--lh-tight); }
.admin-doc p {
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-md);
}
.admin-doc ul, .admin-doc ol {
  list-style: disc;
  padding-left: var(--space-lg);
  color: var(--ink-2);
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.admin-doc ol { list-style: decimal; }
.admin-doc code {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink);
  background: var(--bg-raise);
  padding: 0 4px;
}
.admin-doc a { color: var(--accent); }
.admin-doc table {
  margin-bottom: var(--space-lg);
  font-size: var(--fs-small);
}
.admin-doc th, .admin-doc td {
  border-bottom: 1px solid var(--line);
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  vertical-align: top;
}
.admin-doc th {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line-strong);
}

.roadmap-resumen {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
}
.roadmap-fase { margin-top: var(--space-2xl); }
.roadmap-contador {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
  margin-top: calc(-1 * var(--space-sm));
  margin-bottom: var(--space-md);
}
.admin-doc .roadmap-lista {
  list-style: none;
  padding-left: 0;
  gap: 0;
  margin-bottom: 0;
  border-top: 1px solid var(--line);
}
.admin-doc .roadmap-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.roadmap-marca {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--ink-3);
  background: transparent;
}
.roadmap-marca--cerrado { background: var(--ink); border-color: var(--ink); }
.roadmap-marca--en-curso { background: var(--accent); border-color: var(--accent); }
.roadmap-marca--pendiente { background: transparent; border-color: var(--ink-3); }
.roadmap-marca--bloqueado { border-radius: 0; border: none; width: 8px; height: 2px; background: var(--ink-4); }
.roadmap-nombre { flex: 1 1 240px; min-width: 0; color: var(--ink); }
.roadmap-dueno {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.roadmap-fecha {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.roadmap-metrica {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
}
.roadmap-enlace {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--accent);
  text-decoration: none;
}
.roadmap-enlace:hover { color: var(--ink); }

/* Enlace de salto para teclado: invisible hasta que recibe foco (la regla vive en styles.css,
   que la mesa no carga; sin ella el enlace quedaba visible arriba de la cabecera). */
.skip { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--bg-card); color: var(--ink); padding: var(--space-xs) var(--space-md); border: 1px solid var(--line-strong); border-radius: var(--r-chip); }
.skip:focus { left: var(--space-md); top: var(--space-md); }

/* PJUD: identificación de la causa antes del pasaje, con procedencia visible
   y sin campos propios de legislación BCN. */
.pjud-intro { color: var(--ink-3); font-size: var(--fs-small); max-width: 68ch; margin-bottom: var(--space-lg); }
.pjud-intro p { margin: 0; }
.pjud-intro p + p { margin-top: var(--space-2xs); }
.pjud-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.pjud-item { border-top: 1px solid var(--line); padding-top: var(--space-md); min-width: 0; }
.pjud-causa { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-mono-sm); line-height: 1.55; }
.pjud-causa > span:not(.pjud-index) { color: var(--ink-2); }
.pjud-causa > span:nth-of-type(odd) { color: var(--ink-4); }
.pjud-index { color: var(--ink-4); }
.pjud-causa time { color: var(--ink-3); }
.pjud-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: var(--space-md) 0; background: var(--line); border: 1px solid var(--line); }
.pjud-meta > .field { min-width: 0; padding: var(--space-sm) var(--space-md); background: var(--bg-card); }
.pjud-meta .field dt { color: var(--ink-4); }
.pjud-meta .field dd { overflow-wrap: anywhere; }
.pjud-pasaje { margin: var(--space-lg) 0; padding: 0 0 0 var(--space-md); border-left: 2px solid var(--line-lit); color: var(--ink); font-family: var(--font-display); font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.pjud-terminos { margin: 0 0 var(--space-md); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-mono-sm); overflow-wrap: anywhere; }
.pjud-fuente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.pjud-fuente p { margin: 0; color: var(--ink-3); font-size: var(--fs-small); }
.pjud-fuente a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-md); border: 1px solid var(--line-strong); border-radius: var(--r-sub); color: var(--ink); text-decoration: none; white-space: nowrap; }
.pjud-fuente a:hover { border-color: var(--accent); color: var(--accent); }
.pjud-fuente a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pjud-alcance { margin: var(--space-xl) 0 0; color: var(--ink-3); font-size: var(--fs-small); }
.pjud-abstencion { border-left: 2px solid var(--line-lit); padding-left: var(--space-md); color: var(--ink-2); }
.pjud-abstencion p { margin: 0; }
.pjud-abstencion p + p { margin-top: var(--space-sm); color: var(--ink-3); }
@media (max-width: 640px) {
  .pjud-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pjud-causa { gap: var(--space-2xs) var(--space-xs); }
  .pjud-pasaje { font-size: var(--fs-small); }
  .pjud-fuente { align-items: flex-start; flex-direction: column; }
  .pjud-fuente a { width: 100%; justify-content: center; }
}