/* ============================================================
   argos — panel de vigilancia de acuerdos
   Un solo bloque. Sin JS, sin fuentes, sin imágenes, sin deps.
   "expediente": un escritorio de despacho, no un dashboard --
   la carpeta manila y el violeta de sello acompanan sin mandar.
   Tres niveles semánticos, cada uno con FORMA propia además de color:
     normal    → sin borde de énfasis, glifo ✓
     atención  → borde DISCONTINUO ámbar, glifo !, etiqueta hueca
     grave     → borde izquierdo SÓLIDO grueso rojo, etiqueta RELLENA, glifo ✕
   ============================================================ */

:root {
  color-scheme: light dark;
  --fondo: #f7f7f4;
  --superficie: #ffffff;
  --superficie-2: #eeede6;
  --tinta: #1b1d22;
  --tinta-2: #53565f;
  --tinta-3: #82858c;
  --borde: #dfdad0;
  --borde-fuerte: #a8a08c;
  --acento: #5a3fa0;
  --foco: #7a5cc4;
  --bien: #1f6b3f;
  --bien-fondo: #e7f2ea;
  --atencion: #7a4b00;
  --atencion-borde: #bd8a1f;
  --atencion-fondo: #faf1d8;
  --grave: #8f1c1c;
  --grave-borde: #b3261e;
  --grave-fondo: #fbe9e8;
  --grave-solido: #b3261e;
  --grave-solido-tinta: #ffffff;
  --carpeta: #ece4c9;
  --radio: 8px;
  --radio-tarjeta: 14px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", Charter, "Bitstream Charter", "Noto Serif", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141519;
    --superficie: #1c1d22;
    --superficie-2: #25262c;
    --tinta: #e9e7e2;
    --tinta-2: #b7b3aa;
    --tinta-3: #8a877f;
    --borde: #34333a;
    --borde-fuerte: #5c5a56;
    --acento: #b3a1ef;
    --foco: #cabdf7;
    --bien: #7fd39a;
    --bien-fondo: #16281c;
    --atencion: #f0c369;
    --atencion-borde: #c99a1f;
    --atencion-fondo: #2c2410;
    --grave: #ff9790;
    --grave-borde: #d9534f;
    --grave-fondo: #33161464;
    --grave-solido: #e5534b;
    --grave-solido-tinta: #1a0605;
    --carpeta: #2b2835;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
  text-wrap: pretty;
}
a { color: var(--acento); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .opcion:has(:focus-visible) {
  outline: 3px solid var(--foco); outline-offset: 2px;
}
p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1 { margin: 0 0 20px; font-family: var(--serif); font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: 0; color: var(--tinta); }
h1 small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--tinta-2); }
h2 { margin: 32px 0 12px; font-family: var(--sans); font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }
h2:first-child, h1 + h2 { margin-top: 0; }
h3 { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.3; font-weight: 600; }
main { max-width: 800px; margin: 0 auto; padding: 20px 16px 64px; }
.tenue { color: var(--tinta-2); }
.mal { color: var(--grave); font-weight: 600; }
.vacio { padding: 32px 16px; text-align: center; color: var(--tinta-2); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-tarjeta); }
/* Fechas y horas son metadato, no el "documento": tipografia de UI, no de
   lectura, con numeros alineados en columna. */
time, [data-cola] dd, [data-seccion="indice"] dd {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- barra de navegación ---------- */
/* On a phone the bar is a two-row grid: brand, account and "Salir" on top,
   the four screens below, one per column. As a sideways-scrolling strip it
   was twice the screen width and hid "Salir" and the active tab off-screen,
   with no scrollbar to say there was more. */
nav {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "marca cuenta cuenta salir";
  align-items: center; gap: 2px;
  padding: 4px 8px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
nav::-webkit-scrollbar { display: none; }
nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 4px; font-size: 15px;
  color: var(--tinta-2); font-weight: 500; text-decoration: none; white-space: nowrap;
  border-radius: var(--radio);
}
/* El tab activo es la unica marca de "donde estoy": el violeta es la voz
   propia de argos, y este es uno de los pocos lugares donde puede usarse. */
nav a[aria-current="page"] { color: var(--acento); box-shadow: inset 0 -2px 0 var(--acento); border-radius: 0; }
nav .marca { grid-area: marca; justify-self: start; padding: 0 8px 0 6px; font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: 0.01em; color: var(--acento); }
nav .marca::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--acento); }
/* La cuenta empuja: ella y "Salir" quedan juntas a la derecha, y el correo no
   se lee como un quinto destino del menú. */
nav .cuenta { grid-area: cuenta; justify-self: end; min-width: 0; max-width: 100%; padding: 0 10px; font-size: 14px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Salir" es un botón de barra: nunca hereda el width:100% de los formularios */
nav form { grid-area: salir; justify-self: end; margin: 0; padding: 0; }
nav button {
  width: auto; min-height: 44px; margin: 0; padding: 0 12px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--tinta-2);
  background: transparent; border: 1px solid var(--borde); border-radius: var(--radio);
  cursor: pointer; white-space: nowrap;
}

/* ---------- formularios (solo dentro de main) ---------- */
main label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
main label:first-child { margin-top: 0; }
main :is(input, select, textarea) {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
}
main textarea { min-height: 96px; resize: vertical; }
main :is(input, select, textarea):focus-visible { border-color: var(--foco); outline-offset: 0; }
main :is(input, select, textarea)[aria-invalid="true"] { border: 2px solid var(--grave-borde); }
main button {
  display: block; width: 100%; min-height: 48px; margin: 20px 0 0; padding: 0 20px;
  font: inherit; font-weight: 600; color: var(--fondo);
  background: var(--tinta); border: 1px solid var(--tinta); border-radius: var(--radio);
  cursor: pointer;
}
main button[formmethod="dialog"], main button[value="cancelar"] {
  color: var(--tinta); background: transparent; border-color: var(--borde-fuerte);
}
main form + form, main .acciones { margin-top: 12px; }
main .acciones { display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px; }
/* .acciones only ever holds a card's own action forms (the despacho card):
   at 720px+ it becomes a flex ROW (below), and the desktop main button rule
   gives every button a 160px floor. Two forms fit a card fine, but three --
   Agregar destinatario, Cambiar tope, Dar de baja -- do not, and width: 100%
   on a button never overrides min-width: they are separate properties, so
   the floor from main button still wins even where this rule sets a smaller
   width. Resetting it here, plus flex-wrap above, lets a form that does not
   fit the row wrap onto its own line instead of pushing past the card's edge. */
main .acciones button { margin: 0; min-width: 0; }
fieldset { margin: 16px 0 0; padding: 0; border: 0; min-inline-size: 0; }
legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.ayuda { margin-top: 6px; font-size: 14px; color: var(--tinta-2); }

/* opción con casilla: toda la fila es táctil (≥44px) */
.opcion {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; margin: 0 0 8px; padding: 6px 12px;
  font-size: 16px; font-weight: 500; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  cursor: pointer;
}
.opcion input { flex: 0 0 auto; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; accent-color: var(--acento); }
.opcion:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcion small { display: block; font-size: 13px; font-weight: 400; color: var(--tinta-2); }
.opcion:has(:focus-visible) input { outline: none; }

/* campo grande de número de expediente */
.expediente input, input.expediente {
  min-height: 60px; padding: 12px 16px;
  font-family: var(--serif); font-size: 24px; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}
.expediente input::placeholder, input.expediente::placeholder { color: var(--tinta-3); letter-spacing: 0.01em; }

/* ---------- pantalla de entrar ---------- */
body:not(:has(nav)) main { max-width: 400px; padding-top: 12vh; }
/* El h1 de esta pantalla es la marca, no un titulo de pagina: mismo violeta
   que el nav, mismo punto de sello. */
body:not(:has(nav)) h1 { display: flex; align-items: center; gap: 10px; font-size: 22px; color: var(--acento); }
body:not(:has(nav)) h1::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }

/* ---------- tarjetas ---------- */
.tarjetas { display: grid; gap: 20px; align-items: start; margin-top: 16px; }
/* Cuando hay pestana, la fila necesita mas aire: la pestana sube por encima
   del borde de la tarjeta, y sin este margen extra choca con lo que esta
   arriba (filtro, h1) y con la fila de tarjetas anterior. */
.tarjetas:has(.expediente-num) { margin-top: 30px; row-gap: 42px; }
.tarjeta {
  position: relative;
  display: grid; gap: 8px;
  align-content: start;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
}
.tarjeta a { color: inherit; text-decoration: none; font-weight: 600; }
.tarjeta a::after { content: ""; position: absolute; inset: 0; }             /* toda la tarjeta enlaza */
.tarjeta .cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.tarjeta .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--tinta-2); }
.tarjeta .extracto { font-size: 15px; line-height: 1.5; color: var(--tinta); }
.tarjeta .pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
/* Nombre de despacho: voz de UI, no la del documento -- no es un numero de
   expediente. */
.tarjeta h3 { font-size: 17px; font-weight: 650; }

/* La pestana de carpeta: el numero de expediente sube sobre el borde
   superior de la tarjeta, como una etiqueta de carpeta manila. Solo existe
   donde hay un ".expediente-num" en el marcado (Novedades, Expedientes) --
   Despachos no tiene numero de expediente en su tarjeta, asi que no aplica
   y su h3 (nombre del despacho) sigue en flujo normal, sin pestana.
   ":has()" ya es parte de este archivo (.opcion:has(...), body:not(:has(nav))).
   La pestana sigue en el flujo normal de ".cabecera" -- comparte la fila con
   la fecha, nunca la deja sola en una fila vacia -- y un margen negativo la
   levanta para que monte el borde superior de la tarjeta. La fila se alinea
   arriba para que la altura de la fecha no absorba ese margen (con flex-end
   la pestana quedaba adentro en Novedades y afuera en Expedientes); la fecha
   sube un poco para quedar a la altura de la base de la pestana, dentro de
   la tarjeta y sin que el borde la cruce. */
.tarjeta:has(.expediente-num) .cabecera { align-items: flex-start; }
.tarjeta:has(.expediente-num) .cabecera > time { margin-top: -12px; }
.tarjeta .expediente-num {
  display: inline-block;
  margin-top: -28px;
  padding: 7px 14px 6px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--carpeta);
  border: 1px solid var(--borde);
  border-bottom-width: 0;
  border-radius: 10px 10px 0 0;
}
.tarjeta .expediente-num a { font-weight: inherit; }

/* nivel ATENCIÓN: borde discontinuo ámbar */
.tarjeta:is(
  [data-nivel="atencion"], [data-cuenta="baja"], [data-despacho="baja"], [data-vigilado="cuenta-inactiva"],
  :has([data-envio="pendiente"]), :has([data-estado="corriendo"]), :has([data-estado="nunca"]),
  :has([data-cuenta="baja"]), :has([data-despacho="baja"])
) { border: 1px dashed var(--atencion-borde); background: var(--atencion-fondo); }
/* La pestana coexiste con el estado: mismo tono de borde que la tarjeta,
   nunca lo tapa -- el borde grueso o discontinuo de la tarjeta sigue leyendose. */
.tarjeta:is(
  [data-nivel="atencion"], [data-cuenta="baja"], [data-despacho="baja"], [data-vigilado="cuenta-inactiva"],
  :has([data-envio="pendiente"]), :has([data-estado="corriendo"]), :has([data-estado="nunca"]),
  :has([data-cuenta="baja"]), :has([data-despacho="baja"])
) .expediente-num { border-color: var(--atencion-borde); border-style: dashed; border-bottom-style: none; }

/* nivel GRAVE: borde izquierdo grueso sólido — gana sobre atención */
.tarjeta:is(
  [data-nivel="grave"], [data-vigilado="sin-destinatario"], [data-despacho="sin-canal"],
  :has([data-envio="fallido"]), :has([data-envio="sin-canal"]), :has([data-estado="fallida"]),
  :has([data-estado="muerta"]), :has([data-despacho="sin-canal"]), :has([data-notificado="nadie"])
) {
  border: 1px solid var(--grave-borde); border-left-width: 6px; background: var(--grave-fondo);
  /* Un radio grande sobre un borde izquierdo grueso se curva y deja de leerse
     como una barra recta -- por eso el lado izquierdo casi no redondea. */
  border-top-left-radius: 4px; border-bottom-left-radius: 4px;
}
.tarjeta:is(
  [data-nivel="grave"], [data-vigilado="sin-destinatario"], [data-despacho="sin-canal"],
  :has([data-envio="fallido"]), :has([data-envio="sin-canal"]), :has([data-estado="fallida"]),
  :has([data-estado="muerta"]), :has([data-despacho="sin-canal"]), :has([data-notificado="nadie"])
) .expediente-num { border-color: var(--grave-borde); }

/* ---------- etiquetas de estado ---------- */
:where(:not(.tarjeta):not(li)):is([data-envio], [data-estado], [data-despacho], [data-destinatario], [data-lock], [data-notificado], [data-vigilado], [data-cuenta], [data-vigilancia]), dt[data-cola="fallidos"] + dd {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 2px 10px 2px 8px;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  color: var(--tinta-2);
  border: 1px solid var(--borde-fuerte); border-radius: 999px;
  background: var(--superficie);
}
/* glifo: forma distinta por nivel, siempre presente */
:where(:not(.tarjeta):not(li)):is([data-envio], [data-estado], [data-despacho], [data-destinatario], [data-lock], [data-notificado], [data-vigilado], [data-cuenta], [data-vigilancia])::before {
  content: "•"; display: inline-grid; place-items: center;
  width: 16px; height: 16px; flex: 0 0 auto;
  font-size: 11px; font-weight: 800; line-height: 1;
  border-radius: 50%;
}
/* normal */
[data-envio="enviado"], :where(:not(li))[data-estado="ok"], [data-lock="libre"], [data-notificado="si"] { color: var(--bien); border-color: transparent; background: var(--bien-fondo); }
[data-envio="enviado"]::before, :where(:not(li))[data-estado="ok"]::before, [data-lock="libre"]::before, [data-notificado="si"]::before { content: "✓"; }
/* atención: hueca, borde discontinuo */
[data-envio="pendiente"], :where(:not(li))[data-estado="corriendo"], :where(:not(li))[data-estado="nunca"], [data-lock="tomado"], :where(:not(.tarjeta)):is([data-despacho="baja"], [data-destinatario="baja"], [data-cuenta="baja"], [data-vigilado="cuenta-inactiva"], [data-vigilancia="no-vigilada"]) {
  color: var(--atencion); border: 1px dashed var(--atencion-borde); background: transparent;
}
[data-envio="pendiente"]::before, :where(:not(li))[data-estado="corriendo"]::before, :where(:not(li))[data-estado="nunca"]::before, [data-lock="tomado"]::before, :where(:not(.tarjeta)):is([data-despacho="baja"], [data-destinatario="baja"], [data-cuenta="baja"], [data-vigilado="cuenta-inactiva"], [data-vigilancia="no-vigilada"])::before {
  content: "!"; color: var(--atencion); border: 1.5px solid var(--atencion-borde);
}
:where(:not(li))[data-estado="corriendo"]::before { content: "…"; letter-spacing: -0.1em; }
/* grave: rellena */
[data-envio="fallido"], [data-envio="sin-canal"], :where(:not(li))[data-estado="fallida"], :where(:not(li))[data-estado="muerta"], :where(:not(li))[data-estado="bloqueada"], :where(:not(.tarjeta)):is([data-despacho="sin-canal"], [data-vigilado="sin-destinatario"], [data-notificado="nadie"]), dt[data-cola="fallidos"] + dd:not([data-cero="true"]) {
  color: var(--grave-solido-tinta); border-color: var(--grave-solido); background: var(--grave-solido);
}
[data-envio="fallido"]::before, [data-envio="sin-canal"]::before, :where(:not(li))[data-estado="fallida"]::before, :where(:not(li))[data-estado="muerta"]::before, :where(:not(li))[data-estado="bloqueada"]::before, :where(:not(.tarjeta)):is([data-despacho="sin-canal"], [data-vigilado="sin-destinatario"], [data-notificado="nadie"])::before {
  content: "✕"; color: var(--grave-solido); background: var(--grave-solido-tinta);
}
:where(:not(li))[data-estado="muerta"]::before { content: "▮"; font-size: 9px; }
/* Aclaración obligatoria para pérdidas silenciosas. La ESCRIBE EL SERVIDOR, no
   este archivo: en un content: de CSS no la leería una prueba, no se podría
   seleccionar ni buscar, y sin la hoja cargada una tarjeta rota volvería a
   verse igual que una sana -- el defecto exacto que este panel evita. Acá solo
   se la viste, y el nivel lo declara el marcado. */
.aclaracion { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.4; }
.aclaracion[data-nivel="grave"] { color: var(--grave); font-weight: 600; }
.aclaracion[data-nivel="atencion"] { color: var(--atencion); }
/* El motivo tecnico es un <code> (inline por defecto) y lo sigue la aclaracion
   que dice que el expediente puede existir igual: sin bloque ni margen propio,
   las dos frases se tocan y se leen como una sola. */
.motivo { display: block; margin: 10px 0; padding: 8px 10px; font-family: var(--mono); font-size: 13px; color: var(--grave); background: var(--superficie); border: 1px solid var(--grave-borde); border-radius: var(--radio); overflow-wrap: anywhere; }

/* ---------- línea de tiempo (detalle de expediente) ---------- */
.linea { position: relative; padding-left: 28px; }
.linea::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--borde-fuerte); }
.linea > li { position: relative; padding: 0 0 28px; }
.linea > li:last-child { padding-bottom: 0; }
.linea > li::before {
  content: ""; position: absolute; left: -28px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--borde-fuerte);
}
.linea > li:has([data-notificado="si"])::before { border-color: var(--bien); }
.linea > li:has([data-notificado="nadie"])::before { border-color: var(--grave-solido); background: var(--grave-solido); border-radius: 2px; }
.linea time { display: block; margin-bottom: 4px; font-size: 13px; color: var(--tinta-2); }
.linea .destinatarios { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--tinta-2); }
.linea .destinatarios span:not([data-notificado]) { padding: 2px 8px; background: var(--superficie-2); border-radius: 999px; }

/* El texto del acuerdo -- copiado del boletin del tribunal -- es la "voz del
   documento": serifa, algo mas de interlineado, ancho de lectura acotado. */
.extracto { font-family: var(--serif); line-height: 1.6; max-width: 66ch; }
.linea .extracto { margin: 6px 0 10px; font-size: 16px; }

/* ---------- alta de expediente ---------- */
/* .resultado is the sweep's answer card (GET /barridos/:id). No wrapper holds
   it, so it is matched on its own class, never through a parent. */
.resultado { padding: 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.resultado h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.resultado h3::before { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; font-weight: 800; }
/* buscando: barra viva sin JS (animación CSS) */
[data-barrido="buscando"] { border: 1px dashed var(--atencion-borde) !important; background: var(--atencion-fondo) !important; }
[data-barrido="buscando"] h3::before { content: "…"; color: var(--atencion); border: 1.5px solid var(--atencion-borde); }
[data-barrido="buscando"] .progreso { height: 4px; margin-top: 12px; border-radius: 2px; overflow: hidden; background: var(--superficie-2); }
[data-barrido="buscando"] .progreso::before { content: ""; display: block; width: 40%; height: 100%; background: var(--atencion-borde); animation: argos-barrido 1.6s ease-in-out infinite alternate; }
@keyframes argos-barrido { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* buscando pero colgado: el scheduler no responde → grave */
[data-barrido="buscando"][data-barrido-demorado] { border: 1px solid var(--grave-borde) !important; border-left-width: 6px !important; background: var(--grave-fondo) !important; }
[data-barrido="buscando"][data-barrido-demorado] h3::before { content: "▮"; font-size: 9px; color: var(--grave-solido-tinta); background: var(--grave-solido); border: 0; }
[data-barrido="buscando"][data-barrido-demorado] .progreso::before { animation: none; width: 100%; background: var(--grave-borde); }
/* encontrado */
[data-barrido="encontrado"] h3::before { content: "✓"; color: var(--bien); background: var(--bien-fondo); }
/* no lo encontré (resultado legítimo): neutro, sin alarma */
[data-barrido="sin-hallazgos"] h3::before { content: "–"; color: var(--tinta-2); background: var(--superficie-2); }
/* parcial: sí es un resultado, pero incompleto → atención */
[data-barrido-parcial] { border: 1px dashed var(--atencion-borde) !important; }
/* NO PUDE BUSCAR: nunca puede leerse como "no está" → grave, rellena */
[data-barrido="nada-consultado"], [data-barrido="fallido"] { border: 1px solid var(--grave-borde) !important; border-left-width: 6px !important; background: var(--grave-fondo) !important; }
[data-barrido="nada-consultado"] h3::before, [data-barrido="fallido"] h3::before { content: "✕"; color: var(--grave-solido-tinta); background: var(--grave-solido); }
[data-barrido="nada-consultado"]::before, [data-barrido="fallido"]::before { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--grave); }
/* mensajes del alta */
[data-alta] { padding: 12px 14px; font-size: 15px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); }
[data-alta="hallazgos"] { border-color: var(--bien); background: var(--bien-fondo); color: var(--bien); }
[data-alta="sin-hallazgos"] { color: var(--tinta-2); }
[data-alta="parcial"], [data-alta="sin-eleccion"], [data-alta="numero-invalido"] { border: 1px dashed var(--atencion-borde); background: var(--atencion-fondo); color: var(--atencion); font-weight: 600; }
[data-alta="sin-despachos"], [data-alta="ninguna-creada"] { border: 1px solid var(--grave-borde); border-left-width: 6px; background: var(--grave-fondo); color: var(--grave); font-weight: 600; }
.resultado .opcion:last-of-type { margin-bottom: 0; }
.resultado h3 + .ayuda { margin: -4px 0 12px 34px; }

/* ---------- sistema ---------- */
[data-seccion] { padding: 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
[data-seccion] + [data-seccion] { margin-top: 12px; }
[data-seccion] h2 { margin: 0 0 12px; }
[data-seccion] dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; font-size: 15px; }
[data-seccion] dt { color: var(--tinta-2); }
[data-seccion] dd { text-align: right; font-weight: 600; }
/* corrida por trabajo: fila con nombre, hora y etiqueta */
[data-seccion="por-job"] li, [data-seccion="corridas"] li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde); }
[data-seccion="por-job"] li:first-of-type, [data-seccion="corridas"] li:first-of-type { border-top: 0; padding-top: 0; }
[data-seccion="por-job"] li:last-of-type, [data-seccion="corridas"] li:last-of-type { padding-bottom: 0; }
[data-seccion] li .nombre { font-weight: 600; }
[data-seccion] li time { grid-column: 1; font-size: 13px; color: var(--tinta-2); }
/* La pastilla de la fila es .etiqueta, no el <li>: el <li> lleva data-estado
   para que una prueba lea un solo elemento, y de ahi sale el nivel. */
[data-seccion] li .aclaracion { grid-column: 1 / -1; }
[data-seccion] li .etiqueta { grid-column: 2; grid-row: 1 / span 2; justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 8px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--tinta-2); border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie); }
[data-seccion] li .etiqueta::before { content: "•"; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; font-size: 11px; font-weight: 800; line-height: 1; border-radius: 50%; }
[data-seccion] li[data-estado="ok"] .etiqueta { color: var(--bien); border-color: transparent; background: var(--bien-fondo); }
[data-seccion] li[data-estado="ok"] .etiqueta::before { content: "✓"; }
[data-seccion] li[data-estado="nunca"] .etiqueta, [data-seccion] li[data-estado="corriendo"] .etiqueta { color: var(--atencion); border: 1px dashed var(--atencion-borde); background: transparent; }
[data-seccion] li[data-estado="nunca"] .etiqueta::before { content: "!"; color: var(--atencion); border: 1.5px solid var(--atencion-borde); }
[data-seccion] li[data-estado="corriendo"] .etiqueta::before { content: "…"; letter-spacing: -0.1em; color: var(--atencion); }
[data-seccion] li[data-estado="fallida"] .etiqueta, [data-seccion] li[data-estado="muerta"] .etiqueta, [data-seccion] li[data-estado="bloqueada"] .etiqueta { color: var(--grave-solido-tinta); border-color: var(--grave-solido); background: var(--grave-solido); }
[data-seccion] li[data-estado="fallida"] .etiqueta::before, [data-seccion] li[data-estado="muerta"] .etiqueta::before, [data-seccion] li[data-estado="bloqueada"] .etiqueta::before { content: "✕"; color: var(--grave-solido); background: var(--grave-solido-tinta); }
[data-seccion] li[data-estado="muerta"] .etiqueta::before { content: "▮"; font-size: 9px; }
[data-seccion] li[data-estado="fallida"], [data-seccion] li[data-estado="muerta"], [data-seccion] li[data-estado="bloqueada"] { box-shadow: inset 6px 0 0 var(--grave-solido); padding-left: 14px; margin-left: -16px; padding-right: 0; }
[data-seccion] li[data-estado="nunca"] .nombre::after, [data-seccion] li[data-estado="muerta"] .nombre::after { display: block; font-size: 13px; font-weight: 400; color: var(--tinta-2); }
/* cola */
dt[data-cola="fallidos"] + dd { min-height: 26px; padding: 0 10px; font-size: 14px; }
dt[data-cola="fallidos"] + dd[data-cero="true"], dt[data-cola="fallidos"] + dd:empty { color: var(--tinta-2); background: transparent; border-color: var(--borde); }
[data-saturado="true"] { border: 1px dashed var(--atencion-borde) !important; }
[data-seccion="cola"][data-reintento="true"] { border: 1px dashed var(--atencion-borde); background: var(--atencion-fondo); }
/* índice */
[data-indice-vacio] { border: 1px dashed var(--atencion-borde); }
[data-indice-vacio]::after { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--atencion-borde); font-size: 14px; font-weight: 600; color: var(--atencion); }
[data-indice-vacio="quedo-vacio"], [data-indice-vacio="sin-job"] { border: 1px solid var(--grave-borde); border-left-width: 6px; background: var(--grave-fondo); }
[data-indice-vacio="quedo-vacio"]::after, [data-indice-vacio="sin-job"]::after { border-top-style: solid; border-top-color: var(--grave-borde); color: var(--grave); }
/* lock */
[data-seccion="lock"] dl { grid-template-columns: 1fr auto; }

/* ---------- despachos ---------- */
.tarjeta .destinatarios { display: grid; gap: 4px; font-size: 14px; color: var(--tinta-2); }
.tarjeta .destinatarios li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; overflow-wrap: anywhere; }
.tarjeta .destinatarios li.inactivo { color: var(--tinta-3); }
/* The strike goes on the name and address only: a text-decoration set on the
   row propagates into its blockified flex children, and the Editar/Reactivar
   buttons came out struck through as if they were dead too. */
.tarjeta .destinatarios li.inactivo > span { text-decoration: line-through; }
/* Editar/dar de baja/reactivar, per recipient: small side-by-side forms on
   their own row, not the full-width main button every other form on this
   card gets -- two of those stacked per person would dwarf the list they sit
   under, especially at phone width. */
.tarjeta .acciones-destinatario { display: flex; flex: 1 0 100%; gap: 8px; margin-top: 2px; }
.tarjeta .acciones-destinatario form { flex: 1 1 0; margin: 0; }
.tarjeta .acciones-destinatario button {
  /* Same min-width reset as main .acciones button above, and for the
     same reason: width: 100% here never overrides the desktop main
     button floor of 160px, which alone made two of these per row wider
     than the card. */
  width: 100%; min-width: 0; min-height: 40px; margin: 0; padding: 0 10px;
  font-size: 13px; font-weight: 500; color: var(--tinta); background: transparent; border-color: var(--borde-fuerte);
}
/* "Dejar de seguir" is a rare, destructive step that already has its own
   confirmation page: drawn as the full-width dark button every other form
   gets, it became the loudest thing on each case card, above the case itself,
   and on the timeline page too, which is why the button rule is not card-only. */
.tarjeta form.dejar-de-seguir { display: flex; justify-content: flex-end; margin-top: 8px; }
main form.dejar-de-seguir button {
  width: auto; min-width: 0; min-height: 40px; padding: 0 14px;
  font-size: 13px; font-weight: 500; color: var(--tinta); background: transparent; border-color: var(--borde-fuerte);
}
.tarjeta form { margin-top: 4px; }
.tarjeta form button { margin: 0; min-height: 44px; }
/* A button that follows fields needs air above it; a form that is only a
   button (dar de baja) does not, or the gap between the two forms doubles. */
.tarjeta form label ~ button { margin-top: 12px; }
/* data-despacho lives on the header pill, not on the card: match it from inside. */
.tarjeta:is([data-despacho="baja"], :has([data-despacho="baja"])) { color: var(--tinta-2); }
.tarjeta:is([data-despacho="baja"], :has([data-despacho="baja"])) h3 { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: var(--atencion-borde); }

/* ---------- filtros ---------- */
.filtro { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.filtro a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--tinta-2); text-decoration: none; border: 1px solid var(--borde-fuerte); border-radius: 999px; }
.filtro a[aria-current="true"] { color: var(--fondo); background: var(--tinta); border-color: var(--tinta); }

/* ---------- ancho: la base es el teléfono, esto solo ensancha ---------- */
@media (min-width: 720px) {
  main { padding: 32px 32px 80px; }
  /* With room, back to a single row; the account pushes to the right. */
  nav { display: flex; padding: 6px 24px; overflow-x: auto; scrollbar-width: none; }
  nav a { padding: 0 12px; font-size: inherit; }
  nav .marca { margin-right: 6px; }
  nav .cuenta { margin-left: auto; }
  h1 { font-size: 28px; }
  main button { display: inline-block; width: auto; min-width: 160px; }
  /* Side by side, the buttons share a baseline: without flex-end the lone
     "dar de baja" floats up beside the labels of the other form. */
  main .acciones { flex-direction: row; align-items: flex-end; }
  main .acciones > form:first-child { flex: 1 1 auto; }
  main[data-pagina="expedientes"] .tarjetas, main[data-pagina="despachos"] .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main[data-pagina="sistema"] .secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  main[data-pagina="sistema"] .secciones [data-seccion] + [data-seccion] { margin-top: 0; }
  [data-seccion="corridas"] { grid-column: 1 / -1; }
  body:not(:has(nav)) main { padding-top: 16vh; }
}
@media (min-width: 1100px) {
  main { max-width: 1040px; }
  main[data-pagina="novedades"] .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { [data-barrido="buscando"] .progreso::before { animation: none; width: 100%; opacity: 0.5; } }