/* ============================================================================
   POIROT — hoja propia
   ----------------------------------------------------------------------------
   Va DESPUÉS de escriba-ui.css e importa sólo lo que a esa hoja le falta: el
   acento del producto y las fuentes vendorizadas. NUNCA redefine un token
   neutro (--bg, --text, --border, --panel, --muted…): eso es lo que garantiza
   que Poirot comparte la experiencia con el resto de la Suite y sólo cambia
   de color.

   Portada de custodia.css (Custodia, misma Suite), con dos diferencias:
   el acento -acá el rojo del hilo- y los componentes propios, que son los de
   una investigación y no los de una detección de reventa.
   ============================================================================ */

/* ---- Acento: el rojo del hilo ----------------------------------------------
   --producto es el color de Poirot en la tabla del ecosistema: #b3001b, el
   rojo del hilo del que se tira. Todo lo demás se deriva de él, y los valores
   salen de medir contraste WCAG, no de ajustarlos a ojo:

     claro   --accent #b3001b   blanco encima: 7.16 · como TEXTO sobre --bg: 6.86
             --accent-2 #8c0015 (hover: un escalón más oscuro del mismo tono)
             --on-accent #ffffff

   A diferencia de Custodia -que con su celeste pastel necesitó un token
   propio (--accent-texto) porque el acento como TEXTO daba 2.5-, acá no hace
   falta ninguna desviación: el mismo #b3001b se lee cómodo como relleno con
   blanco encima y como texto sobre el fondo claro. Por eso este archivo NO
   pisa a.link ni los enlaces de contenido con un color aparte.

     oscuro  --accent #ff6a75   sobre --bg oscuro: 7.13 · tinta oscura encima: 6.65
             --accent-2 #e04a58
             --on-accent #16161a

   En oscuro el acento SÍ cambia -#b3001b sobre el fondo oscuro da 2.76, no se
   lee-, que es el patrón normal del resto de la Suite: el acento oscuro es
   una variante más clara del claro. Y como el relleno cambia de claridad,
   --on-accent también: blanco sobre #ff6a75 daría 2.8, así que ahí encima va
   la tinta oscura. */
:root {
  --producto: #b3001b;
  --accent: var(--producto); --accent-2: #8c0015; --on-accent: #ffffff;
  --ring: 0 0 0 3px rgba(179,0,27,.20);
}
:root[data-theme="dark"] {
  --producto: #ff6a75;
  --accent: var(--producto); --accent-2: #e04a58; --on-accent: #16161a;
  --ring: 0 0 0 3px rgba(255,106,117,.26);
}

/* ---- Tipografía vendorizada (sin CDN) --------------------------------------
   Si estos archivos faltaran (un build sin /estaticos/vendor/fonts, por
   ejemplo), el navegador no encuentra el @font-face y cae solo a la pila de
   "system-ui, …" que ya trae escriba-ui.css en `body`: no hace falta un
   fallback propio acá, y no romper es justamente no declarar nada más. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/estaticos/vendor/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/estaticos/vendor/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/estaticos/vendor/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   COMPONENTES PROPIOS — las pantallas de trabajo
   ----------------------------------------------------------------------------
   escriba-ui.css (canónico) sólo trae el cromo de la Suite (topbar, menú,
   modal, login): NO trae tarjeta, chip, tabla ni tipografía de contenido, así
   que las pantallas de trabajo necesitan sus propios componentes. Van acá,
   construidos sobre los tokens neutros y de estado del canónico -nunca
   redefiniéndolos-.
   ============================================================================ */

/* ---- Contenedor de página: el cromo no tiene, cada app declara el suyo ---- */
main { padding: 22px 24px 60px; max-width: 1080px; margin: 0 auto; }

/* ---- Tarjeta: unidad de contenido de toda pantalla de trabajo -------------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

/* ---- Cabecera de pantalla y vuelta atrás ---------------------------------- */
.pagina { margin: 0 0 18px; }
.pagina h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.pagina p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 76ch; }
.volver { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  color: var(--muted); font-size: 13px; text-decoration: none; }
.volver:hover { color: var(--text); }

/* ---- Enlaces de contenido --------------------------------------------------
   Los que NO son un componente propio: el título de un caso, la URL de una
   página archivada, la cita de un hecho. El canónico no le pone color a un
   <a> pelado, así que sin esto quedaban en el azul -y el violeta de
   "visitado"- del navegador: no es el color de ninguna app de la Suite, y
   "visitado" acá no significa nada. Van con la tinta del texto y el subrayado
   teñido de acento, que es lo que los hace legibles como enlaces sin gritar
   en una lista de cien hallazgos; el acento pleno se reserva para el hover.
   El selector es :not([class]) para no pisar a ningún componente: cada uno
   declara su color. */
main a:not([class]) { color: var(--text); text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
main a:not([class]):hover { color: var(--accent); text-decoration-color: currentColor; }
.card h2 a:not([class]) { text-decoration: none; }
.card h2 a:not([class]):hover { text-decoration: underline; }

/* ---- Enlace de acción (ir a otra pantalla que SÍ hace lo que se busca) ---- */
.enlace-accion { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 0;
  color: var(--accent); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.enlace-accion:hover { color: var(--accent-2); text-decoration: underline; }

/* ---- Texto secundario / cifras --------------------------------------------- */
.meta { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- Filas de formulario: filtrar y accionar ------------------------------- */
.filtros, .acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.acciones:last-child { margin-bottom: 0; }
.acciones input[type="text"] { min-width: 200px; flex: 1 1 200px; }
/* Adentro de una celda de tabla la fila de acciones no debe estirarse: si no,
   cada fila de usuarios queda más ancha que la pantalla. */
td .acciones { margin: 0; gap: 6px; }
td .acciones input[type="text"] { min-width: 0; flex: 0 1 auto; }

/* ---- Campos de formulario con su ayuda ------------------------------------- */
.campos { display: flex; flex-direction: column; }
.campo { display: flex; flex-direction: column; gap: 7px; padding: 15px 0; border-top: 1px solid var(--hairline); }
.campo:first-child { border-top: 0; padding-top: 4px; }
.campo-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.campo-lbl { font-size: 13.5px; font-weight: 600; }
.campo input[type="text"], .campo input[type="number"] { max-width: 320px; }
.campo-ayuda { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; max-width: 76ch; }

/* ---- Chips: información, no decoración -------------------------------------
   Los de estado usan un token de ESTADO y nunca el acento: si todos quedan
   del color del producto, dejan de distinguirse de un vistazo, que es lo
   único para lo que existen. */
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px;
  border-radius: 999px; letter-spacing: .01em; }
.chip.rol { color: var(--text); background: var(--card-2); border: 1px solid var(--border); font-weight: 600; }
.chip.usuario-activo { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.chip.usuario-baja { color: var(--err); background: color-mix(in srgb, var(--err) 15%, transparent); }

/* ---- Avisos de resultado ---------------------------------------------------
   Un aviso es una consecuencia, no un adorno: toma su color del token de
   ESTADO que le corresponde a través de --estado, nunca del acento. */
.aviso { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 16px; padding: 12px 15px;
  background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--estado, var(--hairline));
  border-radius: var(--radius); }
.aviso svg { flex: 0 0 auto; margin-top: 2px; color: var(--estado, var(--muted)); }
.aviso p { margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 76ch; }
.aviso-ok { --estado: var(--ok); }
.aviso-warn { --estado: var(--warn); }
.aviso-err { --estado: var(--err); }

/* ---- Tablas ----------------------------------------------------------------
   La evidencia de una investigación se lee, no se espía en letra chica:
   celdas a tamaño normal, y sólo el encabezado de columna es chico, como
   corresponde a una etiqueta. */
.card table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0 0 10px; }
.card th, .card td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.card th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.card tr:last-child td { border-bottom: 0; }

/* ---- Tablas anchas: primera columna fija (contrato §3.4.3) -----------------
   El §3.4.3 no pide "que scrollee": pide primera columna sticky y/o colapso a
   tarjetas en móvil, NUNCA un scroll horizontal crudo y apretado. Un
   overflow-x pelado ES ese scroll crudo: la tabla se corre a la derecha y se
   pierde de qué fila era cada celda. Así que la caja scrollea, pero la
   primera columna -la que dice de QUÉ es la fila- queda fija con su propio
   fondo y una hairline que marca la costura. */
.tabla-scroll { overflow-x: auto; margin: 0 0 10px; }
.tabla-scroll table { margin: 0; width: max-content; min-width: 100%; }
.tabla-scroll th:first-child, .tabla-scroll td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--panel);
  box-shadow: inset -1px 0 0 var(--hairline); }

/* ---- Estado vacío: decir qué falta, no dejar un hueco ----------------------
   Una lista vacía sin explicación se lee como una pantalla rota. El icono va
   con el acento del producto porque acá no comunica un estado -no hay nada
   bueno ni malo que informar-, sólo identifica de qué producto es la
   pantalla. */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 26px 16px; }
.vacio svg { color: var(--accent); }
.vacio-tit { margin: 0; font-size: 15px; font-weight: 600; }
.vacio .meta { margin: 0; max-width: 62ch; }

/* ---- Clave recién generada -------------------------------------------------
   Se muestra UNA vez y hay que poder copiarla sin equivocarse: monoespaciada,
   grande, con espacio entre caracteres y seleccionable de un doble click. El
   borde punteado es la señal de que esto es efímero y no un dato de la ficha:
   al recargar no está más. */
.clave-caja { margin: 0 0 10px; }
.clave-generada { display: inline-block; font-family: var(--mono); font-size: 16px; letter-spacing: .04em;
  padding: 10px 14px; border-radius: var(--radius); user-select: all;
  color: var(--text); background: var(--card-2); border: 1px dashed var(--hairline); }

/* ---- Ancho de la tarjeta de login ------------------------------------------
   El canónico la deja en 340px, que aprieta la bajada de Poirot en dos
   renglones muy cortos. Es lo único que se le toca al login. */
.login-card { max-width: 372px; }

/* ---- Submenú de un caso ----------------------------------------------------
   Las secciones de un caso (tablero, páginas, entidades, hechos, grafo, línea,
   informe, configuración, exclusiones) no van en el menú del header: el header
   es de la INSTANCIA y esto es de UN caso. Va acá, debajo del nombre del caso,
   que es donde se entiende que todo lo de la fila pertenece a lo de arriba. */
.submenu { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 8px; }
.submenu a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; }
.submenu a:hover { color: var(--text); background: var(--card-2); }
.submenu a.activo { color: var(--on-accent); background: var(--accent); }

/* ---- Exportar: fila pequeña de enlaces de descarga -------------------------
   Estilos similares al submenú pero para la fila de "Exportar CSV": pequeños
   enlaces de acción en una fila con el label. */
.submenu-exportar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 16px; font-size: 13px; }

/* ---- Cabecera de un caso --------------------------------------------------- */
.caso-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.caso-estado .meta { margin: 0; }
.chip.caso-abierto { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.chip.caso-cerrado { color: var(--muted); background: var(--card-2); }
.chip.vigilancia { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

/* ---- Estado de una corrida y nivel de un evento ----------------------------
   Cada estado con su token de ESTADO, nunca con el acento: de un vistazo hay
   que distinguir la que salió bien de la que se cayó. */
.chip.corrida-corriendo { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.chip.corrida-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.chip.corrida-degradada { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.chip.corrida-fallida { color: var(--err); background: color-mix(in srgb, var(--err) 15%, transparent); }
.chip.corrida-cancelada { color: var(--muted); background: var(--card-2); }
.chip.nivel-info { color: var(--muted); background: var(--card-2); font-weight: 600; }
.chip.nivel-aviso { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.chip.nivel-error { color: var(--err); background: color-mix(in srgb, var(--err) 15%, transparent); }

/* ---- Estado de una página, de un hecho y de la identidad de una entidad ---
   Mismo criterio que el estado de una corrida: cada uno con su token de
   ESTADO, nunca con el acento, para que se distingan de un vistazo. */
.chip.pagina-pendiente { color: var(--muted); background: var(--card-2); }
.chip.pagina-extraida { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.chip.pagina-fallida { color: var(--err); background: color-mix(in srgb, var(--err) 15%, transparent); }
.chip.pagina-excluida { color: var(--muted); background: var(--card-2); border: 1px dashed var(--hairline); }
.chip.pagina-homonimo { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

.chip.hecho-propuesto { color: var(--muted); background: var(--card-2); }
.chip.hecho-confirmado { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.chip.hecho-descartado { color: var(--err); background: color-mix(in srgb, var(--err) 15%, transparent); }

.chip.entidad-candidato { color: var(--muted); background: var(--card-2); }
.chip.entidad-confirmado { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.chip.entidad-homonimo { color: var(--err); background: color-mix(in srgb, var(--err) 15%, transparent); }

/* ---- Contenido de una página capturada -------------------------------------
   El texto entero que extrajo la araña: monoespaciado -es evidencia, se lee
   como un volcado, no como prosa-, con salto de línea preservado y un techo
   de alto para que una página larga no estire el resto de la ficha hasta el
   infinito; adentro scrollea sola. */
pre.contenido { white-space: pre-wrap; max-height: 60vh; overflow: auto; margin: 0;
  padding: 12px 14px; background: var(--card-2); border: 1px solid var(--hairline);
  border-radius: var(--radius); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }

/* ---- "No sé": una respuesta, no un campo vacío -----------------------------
   Se dibuja distinto de "sin contestar" a propósito: en el intake, no saber
   algo es un dato que apaga las búsquedas que dependían de él. */
.chip.no-se { color: var(--muted); background: var(--card-2); border: 1px dashed var(--hairline); font-weight: 600; }
.chip.variante { color: var(--text); background: var(--card-2); font-weight: 500; font-size: 11.5px; }
.variantes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* La casilla de "no sé" del intake: la etiqueta entera es el área de click. */
.no-se { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--muted); font-size: 12.5px; font-weight: 600; }
.no-se input { margin: 0; accent-color: var(--accent); }
.no-se:hover { color: var(--text); }

/* ---- Contadores: el estado de una investigación de un vistazo -------------- */
.contadores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.contador { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  background: var(--card-2); border: 1px solid var(--hairline); border-radius: var(--radius); }
.contador-n { font-size: 24px; font-weight: 600; line-height: 1.1; }
.contador-lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600; }
.contador .meta { margin: 4px 0 0; font-size: 12px; }

/* ---- Fichas largas: las nueve preguntas del perfil --------------------------
   .about-rows es del canónico (auto 1fr, pensada para dos o tres filas
   cortas). Acá las etiquetas son preguntas enteras, así que la columna se
   acota para que la respuesta no quede empujada contra el margen derecho, y
   en pantalla angosta las dos columnas se apilan. */
.card .about-rows { grid-template-columns: minmax(200px, 34%) 1fr; gap: 8px 18px; }
@media (max-width: 640px) {
  .card .about-rows { grid-template-columns: 1fr; gap: 2px 0; }
  .card .about-rows dd { margin: 0 0 10px; }
}

/* ---- Grafo: el lienzo, el respaldo imprimible y el panel de una arista ----
   El lienzo es alto a propósito (70vh): un grafo de veinte nodos apretado en
   300 px no se lee, y la pantalla del grafo es la que se mira entera. El SVG
   del servidor vive abajo en .grafo-fallback y grafo.js lo esconde recién
   cuando ya dibujó el suyo, así que sin JavaScript la pantalla igual muestra
   el grafo. Al IMPRIMIR se invierte: el interactivo no sirve en papel -no se
   puede arrastrar una hoja- y el del servidor vuelve, incluso si el atributo
   hidden lo tapaba. */
.grafo-lienzo { height: 70vh; min-height: 320px; margin: 0 0 12px;
  background: var(--card-2); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; color: var(--text); }
.grafo-lienzo svg { display: block; }
.grafo-fallback { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: auto; }
.grafo-fallback svg { display: block; width: 100%; height: auto; }

/* Las casillas de predicados del filtro: muchas, cortas y en columnas, para
   que no se coman la pantalla antes del dibujo. */
.filtros-grafo fieldset { margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid var(--hairline); border-radius: var(--radius); }
.filtros-grafo legend { font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; padding: 0 4px; }
.casillas { display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.casilla { display: inline-flex; align-items: flex-start; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--muted); }
.casilla input { margin: 2px 0 0; accent-color: var(--accent); }
.casilla:hover { color: var(--text); }

/* El panel de la arista elegida: la cita, la fecha y de dónde salió. */
.detalle { margin: 0 0 12px; padding: 12px 14px; background: var(--card-2);
  border: 1px solid var(--hairline); border-radius: var(--radius); position: relative; }
.detalle h3 { margin: 0 0 8px; font-size: 14.5px; padding-right: 70px; }
.detalle #detalle-cerrar { position: absolute; top: 10px; right: 12px; }
.detalle-cita { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent);
  background: var(--panel); font-size: 13px; line-height: 1.6; }

@media print {
  .grafo-lienzo, .detalle, .filtros-grafo, .submenu, .submenu-exportar, .app-header { display: none !important; }
  /* El respaldo vuelve aunque grafo.js le haya puesto hidden. */
  .grafo-fallback[hidden] { display: block !important; }
}

/* ---- Línea de tiempo (spec §10) -------------------------------------------
   Un riel vertical con el año como encabezado. Las entradas cuelgan del riel
   con su punto; las BANDAS -lo que la fuente fechó sólo con el año- ocupan
   todo el ancho y llevan su propio marco, para que se vea de un vistazo que
   no están en un día sino en un año entero. */
.linea { position: relative; margin: 6px 0 0; padding: 0 0 0 18px;
  border-left: 2px solid var(--hairline); }
.linea-anio { margin: 0 0 18px; }
.linea-anio-tit { margin: 0 0 8px; font-size: 15px; font-family: var(--mono); color: var(--accent); }
.linea-item { display: flex; gap: 12px; align-items: flex-start; position: relative;
  padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.linea-item:last-child { border-bottom: 0; }
.linea-item::before { content: ""; position: absolute; left: -25px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.linea-fecha { flex: 0 0 92px; font-size: 12px; color: var(--muted); padding-top: 2px; }
.linea-texto { flex: 1 1 auto; min-width: 0; }
.linea-tit { margin: 0; font-size: 13.5px; line-height: 1.6; }
.linea-texto .meta { margin: 2px 0 0; }
.linea-cita { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--hairline);
  font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* La banda del año: lo que no tiene ni mes ni día. */
.banda-anio { margin: 0 0 8px; padding: 8px 12px; background: var(--card-2);
  border: 1px dashed var(--hairline); border-radius: var(--radius); }
.banda-lbl { display: inline-block; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 4px; }

.chip.linea-tipo-hecho { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.chip.linea-tipo-pagina { color: var(--muted); background: var(--card-2); }
.chip.linea-tipo-wayback { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.chip.linea-estado { color: var(--muted); background: var(--card-2); font-weight: 600; }

/* Lo que no tiene fecha va al final y se ve distinto: no está en el eje. */
.linea-sin-fecha { border-top: 1px dashed var(--hairline); padding-top: 12px; }
.linea-sin-fecha .linea-item::before { background: var(--muted); }

/* ---- Informe: la prosa, su aviso y el anexo (spec §11) --------------------
   La caja PUNTEADA no es decoración: marca dónde empieza el texto que
   escribió un modelo. El borde discontinuo se lee como "esto es distinto de
   todo lo demás que muestra Poirot", y eso es exactamente lo que hay que
   entender antes de leer una sola frase. */
.prosa-aviso { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--accent);
  border-radius: var(--radius); background: var(--card-2); font-size: 12.5px; line-height: 1.6;
  color: var(--muted); }
.prosa-aviso strong { color: var(--text); }
.prosa-alerta { border-color: var(--err); color: var(--err); }

.informe-texto p { margin: 0 0 12px; font-size: 14px; line-height: 1.75; }
.informe-texto p:last-child { margin-bottom: 0; }
/* La cita [n]: chica, en el acento y en monoespaciada, para que se distinga
   de la prosa sin cortarla. */
.informe-texto a.ref { font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  text-decoration: none; padding: 0 1px; }
.informe-texto a.ref:hover { text-decoration: underline; }

.chip.version { text-decoration: none; }
.chip.version.activa { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* El anexo: un hecho por entrada, numerado con el mismo [n] que lo cita. */
.anexo { margin: 6px 0 0; padding: 0 0 0 4px; list-style: none; counter-reset: anexo; }
.anexo-item { counter-increment: anexo; position: relative; padding: 10px 0 12px 34px;
  border-bottom: 1px solid var(--hairline); }
.anexo-item:last-child { border-bottom: 0; }
.anexo-item::before { content: "[" counter(anexo) "]"; position: absolute; left: 0; top: 11px;
  font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
/* El ancla queda tapada por el header sticky si el salto cae justo arriba. */
.anexo-item { scroll-margin-top: 70px; }
.anexo-tit { margin: 0; font-size: 13.5px; line-height: 1.6; }
.anexo-tit em { color: var(--muted); font-style: normal; }
.anexo-cita { margin: 6px 0 8px; padding: 6px 10px; border-left: 3px solid var(--hairline);
  font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.anexo-datos { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0;
  font-size: 12px; }
.anexo-datos dt { color: var(--muted); }
.anexo-datos dd { margin: 0; }
/* La URL y el hash son largos y no se pueden recortar sin arruinarlos: se
   parten donde haga falta en vez de estirar la tarjeta a lo ancho. */
.anexo-url { overflow-wrap: anywhere; word-break: break-word; }

/* ---- Salud de los servicios (/config) -------------------------------------- */
.chip.salud-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.chip.salud-mal { color: var(--muted); background: var(--card-2); }

/* ---- Documento imprimible: el informe sin panel ----------------------------
   Es la misma hoja de estilo, pero la página no tiene header ni submenú, así
   que el documento se centra solo y respira como un papel. */
body.imprimible { background: var(--bg); }
.doc { max-width: 860px; margin: 0 auto; padding: 28px 22px 40px; }
.doc-cab { margin: 0 0 18px; padding: 0 0 14px; border-bottom: 2px solid var(--accent); }
.doc-cab h1 { margin: 0 0 6px; }
.doc-anexo-tit { margin: 26px 0 6px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.doc-pie { margin: 26px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline); }

@media print {
  /* En papel no hay tema oscuro ni fondos: tinta sobre blanco, y los enlaces
     como texto -un subrayado azul impreso no lleva a ningún lado-. */
  body.imprimible { background: #fff; color: #000; }
  .doc { max-width: none; padding: 0; }
  .doc a { color: #000; text-decoration: none; }
  .prosa-aviso { background: none; }
  /* Que ninguna entrada del anexo se parta entre dos hojas: un hecho cortado
     a la mitad es justo el que después nadie encuentra. */
  .anexo-item { break-inside: avoid; page-break-inside: avoid; }
  .informe-texto p { orphans: 3; widows: 3; }
}

/* Lista de renglones escritos a mano (los homónimos declarados del tablero). */
.lista-simple { margin: 0 0 14px; padding-left: 20px; }
.lista-simple li { margin: 0 0 4px; }