/* ============================================================
   Denuncias · Sistema de diseño
   Tema claro (por defecto) y oscuro · Layout con barra lateral

   Un fondo, una tarjeta, un botón y UN SOLO acento (casi negro).
   Todo lo que se ve sale de aquí: si algo no usa estos tokens, es
   un descuido, no una variante. Nada de degradados, ni de sombras
   de color, ni de letra por debajo de 12 px.
   ============================================================ */

/* ---------- Tokens: tema claro (por defecto) ---------- */
:root,
html[data-theme="light"] {
  --bg: #f5f5f7;
  --bg-2: #ececee;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ededf0;
  --ink: #1d1d1f;
  --ink-2: #1d1d1f;
  /* Oscurecidos lo justo para cumplir contraste AA (4,5:1) sobre los fondos
     claros (--bg #f5f5f7, --surface-3 #ededf0): los grises originales
     (#6e6e73 sobre #ededf0 daba 4,34; #86868b sobre #f5f5f7, 3,32) dejaban
texto ilegible para quien tiene poca visión. Lo audita audit-accesibilidad.js. */
  --muted: #58585e;
  --faint: #6a6a70;
  --line: rgba(0, 0, 0, 0.07);
  --line-2: rgba(0, 0, 0, 0.12);
  --border: rgba(0, 0, 0, 0.07);

  /* El acento es uno: casi negro. Los tokens «gold» y «navy» se conservan
     con ese mismo valor porque las clases que los usan son las que marcan
     la acción (botón principal, pestaña activa, aviso). */
  --gold: #1d1d1f;
  --gold-2: #1d1d1f;
  --gold-soft: rgba(0, 0, 0, 0.05);
  --gold-line: rgba(0, 0, 0, 0.1);
  --navy: #1d1d1f;
  --navy-soft: rgba(0, 0, 0, 0.05);

  /* El color queda para lo que de verdad es un aviso, nunca para decorar. */
  --green: #1d7f4b;
  --green-soft: rgba(29, 127, 75, 0.1);
  --red: #d70015;
  --red-soft: rgba(215, 0, 21, 0.08);
  --blue: #0071e3;
  --blue-soft: rgba(0, 113, 227, 0.08);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.06), 0 24px 48px -24px rgba(0, 0, 0, 0.18);
  --paper: #ffffff;
  --paper-ink: #1d1d1f;
  --sidebar-bg: #fbfbfd;

  /* La interfaz va en la letra del aparato (como el resto de la web).
     La serif se reserva al documento que se imprime: el escrito. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);
  --documento: Georgia, "Times New Roman", "Iowan Old Style", serif;

  --radius: 20px;
  --radius-s: 14px;
  --trans: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Tokens: tema oscuro ---------- */
html[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #0a0a0a;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --ink: #f5f5f7;
  --ink-2: #f5f5f7;
  /* Aclarados para cumplir AA en oscuro: #a1a1a6 sobre --surface-3 (#3a3a3c)
     daba 4,41:1. Lo audita audit-accesibilidad.js en los dos temas. */
  --muted: #a9a9ae;
  --faint: #9a9a9f;
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.2);
  --border: rgba(255, 255, 255, 0.12);
  --gold: #f5f5f7;
  --gold-2: #f5f5f7;
  --gold-soft: rgba(255, 255, 255, 0.08);
  --gold-line: rgba(255, 255, 255, 0.16);
  --navy: #f5f5f7;
  --navy-soft: rgba(255, 255, 255, 0.08);
  --green: #30d158;
  --green-soft: rgba(48, 209, 88, 0.14);
  /* #ff453a sobre su propio fondo (--red-soft compuesto) daba 4,26:1; este
     rojo un poco más claro cumple AA en el aviso del taller y sigue leyéndose
     como alarma. Lo audita audit-accesibilidad.js. */
  --red: #ff5f56;
  --red-soft: rgba(255, 69, 58, 0.14);
  --blue: #0a84ff;
  --blue-soft: rgba(10, 132, 255, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --paper: #1c1c1e;
  --paper-ink: #f5f5f7;
  --sidebar-bg: #101012;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
::selection { background: var(--gold-soft); color: var(--ink); }

/* ---------- Layout general ---------- */
.layout { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  z-index: 60;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 8px 20px; border-bottom: 1px solid var(--line); }
.brand-emblem {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--bg);
  border-radius: 12px;
}
.brand-emblem svg { width: 24px; height: 24px; }
.brand-text .t1 { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.brand-text .t2 { font-size: 12px; color: var(--muted); margin-top: 4px; letter-spacing: 0.2px; }

.nav-label { font-size: 12px; color: var(--faint); margin: 18px 12px 6px; }
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-s);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background var(--trans), color var(--trans);
}
.nav-link svg { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.nav-link:hover { background: var(--surface); color: var(--ink); }
.nav-link.active { background: var(--gold-soft); color: var(--gold-2, var(--gold)); font-weight: 600; }
.nav-link.active::before {
  content: "";
  position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--gold);
}

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Modo de trabajo: no abogado / abogado ----------
   Un interruptor, no una explicación: apagado, los casos son tuyos;
   encendido, son de tus clientes. */
.modo-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-s);
  font: inherit; font-size: 13px;
  cursor: pointer;
  transition: border-color var(--trans), color var(--trans);
}
.modo-toggle:hover { border-color: var(--gold-line); color: var(--ink); }
.modo-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--gold-line); }
.modo-nombre { font-weight: 500; }
.interruptor {
  position: relative;
  flex: none;
  width: 36px; height: 21px;
  border-radius: 11px;
  background: var(--line-2);
  transition: background var(--trans);
}
.interruptor-punto {
  position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--bg);
  transition: transform var(--trans);
}
.modo-toggle[aria-pressed="true"] .interruptor { background: var(--ink); }
.modo-toggle[aria-pressed="true"] .interruptor-punto { transform: translateX(15px); }

/* ---------- Nivel de detalle: simple (por defecto) / avanzado ----------
   En simple, lo experto (el taller de modificadores, las ramas raras de
   cada catálogo) no se enseña; en avanzado, sí. Es un eje aparte del modo
   abogado: quien representa a otros también puede ir en simple. */
html:not(.nivel-avanzado) .solo-avanzado { display: none !important; }
.mod-simple-aviso {
  display: none;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-s);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
html:not(.nivel-avanzado) .mod-simple-aviso { display: block; }

/* EN SIMPLE, EL ESCRITO NO SE LEE: SE PRESENTA.
   Quien no es jurista no viene a leer un escrito ni una explicación de
   derecho: viene a que se lo dejen hecho. Así que en simple se retira el
   texto del documento y el botón de copiarlo (un borrador a medias parece un
   error de la aplicación). Quedan los datos por rellenar y los botones de
   descargar, Word e imprimir. En avanzado vuelve todo a la vista. */
html:not(.nivel-avanzado) #escrito-output,
html:not(.nivel-avanzado) #btn-copiar { display: none !important; }

/* Y sin el papel, la columna de la derecha se queda vacía: media pantalla en
   blanco al lado de los datos. En simple el reparto pasa a UNA sola columna
   —los datos a todo el ancho y las acciones en una barra inferior a lo
   ancho—; en avanzado vuelve el reparto datos | papel. */
html:not(.nivel-avanzado) .grid-escrito { grid-template-columns: 1fr; }
html:not(.nivel-avanzado) .paper-actions {
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Aviso de la IA para leer los documentos (opcional). */
.doc-ia {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  border-radius: var(--radius-s);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}
.doc-ia a { color: inherit; text-decoration: underline; }
.theme-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--radius-s);
  font: inherit; font-size: 13px;
  cursor: pointer;
  transition: border-color var(--trans), color var(--trans);
}
.theme-toggle:hover { border-color: var(--gold-line); color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ico-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: block; }
.sidebar-note { font-size: 12px; color: var(--faint); padding: 0 6px; line-height: 1.5; }

/* ---------- Área principal ---------- */
.main-wrap { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }
.topbar-title { font-size: 14px; color: var(--muted); }

.buscador-wrap { position: relative; margin-left: auto; min-width: 240px; }
.buscador-wrap .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.buscador-wrap input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 16px 9px 38px;
  font: inherit; font-size: 13.5px;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.buscador-wrap input::placeholder { color: var(--faint); }
.buscador-wrap input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

main { flex: 1; padding: 30px 34px 48px; max-width: 1200px; width: 100%; margin: 0 auto; }

footer {
  border-top: 1px solid var(--line);
  padding: 18px 34px;
  text-align: center;
  color: var(--faint);
  font-size: 12px;
}

/* ---------- Vistas ---------- */
.view { display: none; }
.view.active { display: block; animation: fade-in 0.32s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1.section-title {
  font-size: 19px; font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.03em;
}
p.section-sub { color: var(--muted); margin-bottom: 22px; max-width: 720px; font-size: 14.5px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--trans), border-color var(--trans);
}
.stat:hover { border-color: var(--line-2); }
.stat .num { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.stat .lab { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--trans);
}
.chip:hover { border-color: var(--gold-line); color: var(--ink); }
.chip-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.card:hover { border-color: var(--gold-line); }
.grid-org { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }

.organismo { animation: rise 0.5s ease both; }
.grid-org .organismo:nth-child(2) { animation-delay: 0.04s; }
.grid-org .organismo:nth-child(3) { animation-delay: 0.08s; }
.grid-org .organismo:nth-child(4) { animation-delay: 0.12s; }
.grid-org .organismo:nth-child(5) { animation-delay: 0.16s; }
.grid-org .organismo:nth-child(6) { animation-delay: 0.2s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.organismo.open { border-color: var(--line-2); box-shadow: var(--shadow-lg); }

.organismo .card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
}
.organismo .card-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius); }
.organismo .card-head h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-top: 8px; line-height: 1.35; }
.chevron {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
  transition: transform 0.3s ease, background var(--trans), color var(--trans);
}
.chevron svg { width: 16px; height: 16px; }
.organismo.open .chevron { transform: rotate(180deg); background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }

.card-body { padding: 2px 20px 20px; display: none; }
.organismo.open .card-body { display: block; animation: fade-in 0.28s ease both; }

.colectivo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
  line-height: 1.45;
}
.colectivo strong { color: var(--muted); font-weight: 600; }

.bloque-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
@media (max-width: 520px) { .bloque-grid { grid-template-columns: 1fr; } }
.bloque h4 {
  font-size: 12.5px; color: var(--muted); margin-bottom: 8px; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
.bloque h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bloque ul, .bloque ol { padding-left: 18px; font-size: 13px; color: var(--muted); }
.bloque li { margin-bottom: 6px; }
.bloque li::marker { color: var(--gold); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gold-soft);
  color: var(--gold-2, var(--gold));
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px;
}
.badge-articulo { background: var(--blue-soft); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }

.links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn-mini {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--trans);
}
.btn-mini svg { width: 14px; height: 14px; }
.btn-mini:hover { border-color: var(--gold-line); color: var(--gold-2, var(--gold)); text-decoration: none; }

/* ---------- Desglose CCAA ---------- */
.desglose { margin: 2px 0 10px; border: 1px dashed var(--line-2); border-radius: var(--radius-s); padding: 12px 16px; }
.desglose summary { cursor: pointer; color: var(--gold-2, var(--gold)); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tabla-ccaa { margin-top: 12px; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.fila-ccaa {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  align-items: start;
  transition: background var(--trans);
}
.fila-ccaa:last-child { border-bottom: none; }
.fila-ccaa:hover { background: var(--surface-2); }
.ccaa-nombre { font-weight: 700; color: var(--gold-2, var(--gold)); }
.muted { color: var(--muted); }

/* La ficha del cauce elegido: norma, precepto y enlace oficial del BOE.
   Es lo único que se explica en el alta, y se explica con la ley en la mano. */
.procedimiento-nota { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: -4px 0 2px; }
.procedimiento-nota a { color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--line-2); }

/* El paso que va antes de la demanda (papeleta, reclamación previa, MASC):
   se enseña en el alta y encabeza la cadena del caso. */
.requisito-linea { display: block; margin-top: 3px; color: var(--ink); }
.procedimiento-nota a:hover { text-decoration: underline; }

/* ---------- Jurisprudencia ---------- */
.card-head-static { padding: 18px 20px 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Normativa ---------- */
#normativa-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.normativa-item {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: all var(--trans);
}
.normativa-item:hover { border-color: var(--gold-line); text-decoration: none; box-shadow: var(--shadow); }
.normativa-item p { font-size: 13px; color: var(--muted); margin-top: 5px; }
.normativa-item .go { color: var(--gold); font-size: 15px; transition: transform var(--trans); }
.normativa-item:hover .go { transform: translateX(3px); }

/* ---------- Escritos ---------- */
.grid-escrito { display: grid; grid-template-columns: 400px 1fr; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .grid-escrito { grid-template-columns: 1fr; } }

.form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  /* Sin sticky ni scroll interno: el panel fluye con la página para que
     todas las secciones (Destino, Denunciante, Contenido, Fundamentación)
     sean siempre visibles al hacer scroll normal. */
  position: static;
  max-height: none;
  overflow: visible;
}
/* Los títulos de panel van en <h2>: cuelgan directamente del <h1> de la vista,
   y saltar de h1 a h3 hace que quien navega por encabezados pierda un nivel
   (lo avisaba `npm run test:a11y`). El tamaño se queda en 16px, que es el que
   tenían cuando eran h3. */
.form-panel h2, .form-panel h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 3px; }
.form-panel p.hint { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }

.form-sec { margin: 18px 0 12px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.form-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
/* Los apartados de un panel (Destino, Contenido, Fundamentación) son h3: cuelgan
   del h2 del panel. La regla lleva `.form-panel` delante para ganarle al 16px de
   `.form-panel h2, .form-panel h3`; sin eso, el título del apartado saldría del
   mismo tamaño que el del panel. Se deja también el selector h4 porque otros
   paneles siguen usándolo. */
.form-panel .form-sec h3, .form-sec h4 {
  font-size: 13px; color: var(--ink); margin-bottom: 10px; font-weight: 600;
}

.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-s);
  padding: 9px 12px;
  font: inherit; font-size: 13.5px;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.campo textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.campo input.campo-falta, .campo textarea.campo-falta {
  border-color: var(--red);
  background: var(--red-soft);
  box-shadow: 0 0 0 3px var(--red-soft);
  animation: pulso-falta 1.6s ease infinite;
}
.campo input.campo-falta:focus, .campo textarea.campo-falta:focus {
  border-color: var(--red);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--red-soft);
}
@keyframes pulso-falta {
  0%, 100% { box-shadow: 0 0 0 3px var(--red-soft); }
  50% { box-shadow: 0 0 0 6px transparent; }
}
.escrito-paper.incompleto { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); box-shadow: 0 0 0 1px var(--red-soft), var(--shadow-lg); }

.check {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink-2);
  transition: border-color var(--trans), background var(--trans);
}
.check:hover { border-color: var(--gold-line); background: var(--surface-2); }
.check input { margin-top: 3px; accent-color: var(--gold); width: auto; }
.check strong { color: var(--ink); }
.check small { color: var(--muted); display: block; }

/* Motivos del despido agrupados por tipo de derecho (sin citar artículos). */
.ddf-grupo { margin-bottom: 14px; }
.ddf-grupo:last-child { margin-bottom: 0; }
.ddf-titulo { margin: 0 0 7px; font-size: 12.5px; color: var(--muted); }
.ddf-titulo strong { color: var(--ink); }
.ddf-titulo small { display: block; }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--trans);
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { opacity: 0.88; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold-line); color: var(--gold-2, var(--gold)); }

/* Selector de puesto (destinatario) */
.destino-preview {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--gold-line);
  background: var(--gold-soft);
  border-radius: var(--radius-s);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.destino-linea strong { color: var(--gold-2, var(--gold)); }
.destino-preview .aviso { color: var(--red); margin-top: 6px; font-weight: 600; }
.destino-preview .btn-mini { margin-top: 8px; }

/* Dónde se presenta: la sede del órgano y la oficina donde se entrega, con su
   dirección y el enlace al mapa. Va junto a la casilla de la ciudad y NO dentro
   del escrito. */
.sede-presentacion {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: var(--surface-2);
  border-radius: var(--radius-s);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.sede-presentacion .sede-cabecera {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: .01em;
}
.sede-presentacion .sede-aviso {
  color: var(--red);
  font-weight: 600;
  margin-bottom: 8px;
}
.sede-presentacion .sede-partido + .sede-partido {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.sede-presentacion .sede-lugar { margin-bottom: 4px; }
.sede-presentacion .sede-linea { color: var(--muted); font-size: 12px; margin-top: 8px; }
.sede-presentacion .sede-direccion { margin-bottom: 4px; }
.sede-presentacion .sede-enlaces { display: flex; flex-wrap: wrap; gap: 6px; }
.sede-presentacion .sede-enlaces + .sede-linea { margin-top: 10px; }
.sede-presentacion .sede-enlaces .btn-mini { text-decoration: none; }
.sede-presentacion .sede-pie { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.sede-presentacion a { color: var(--gold-2, var(--gold)); }

/* Papel del escrito */
.paper-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.escrito-paper {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 40px 46px;
  min-height: 480px;
}
.escrito-aviso {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  background: var(--red-soft);
  color: var(--red);
  border-radius: var(--radius-s);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}
.escrito-aviso strong { color: inherit; }
.escrito-paper pre {
  font-family: var(--documento);
  font-size: 13.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: inherit;
}

/* ---------- Taller de modificadores (crafteo del escrito) ---------- */
.mod-workshop {
  margin-top: 30px;
  border: 1px dashed var(--gold-line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 26px 28px 28px;
}
.mod-workshop-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.mod-title {
  font-family: var(--serif);
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.mod-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 820px; }
.mod-desc strong { color: var(--ink); }

/* ---------- Packs de Casuística Guiada (en 1 clic) ---------- */
.packs-section {
  margin-bottom: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 18px 20px;
}
.packs-head { margin-bottom: 14px; }
.packs-title {
  font-family: var(--serif);
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  margin: 2px 0 6px;
}
.packs-desc { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 820px; }
.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.pack-card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans), background var(--trans);
}
.pack-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.pack-card.activo {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 2px var(--gold-line);
}
.pack-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pack-ico { display: none; }
.pack-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.pack-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed var(--line);
  padding-top: 8px; font-size: 12px;
}
.pack-tag { color: var(--gold-2, var(--gold)); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.pack-btn { pointer-events: none; }

/* ---------- Alertas de silencio y archivo en ficha de recursos ---------- */
.rec-alerta {
  margin-top: 12px;
  border-radius: var(--radius-s);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--line);
}
.rec-silencio {
  background: var(--gold-soft);
  border-color: var(--gold-line);
}
.rec-archivo {
  background: var(--red-soft);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
}
.rec-alerta strong { display: block; margin-bottom: 4px; color: var(--ink); }
.rec-detalle { color: var(--ink-2); margin-bottom: 4px; }
.rec-accion { font-weight: 600; color: var(--ink); margin-top: 4px; }
.btn-recurso { background: var(--gold-soft); color: var(--gold-2, var(--gold)); border: 1px solid var(--gold-line); }
.btn-recurso:hover { background: var(--ink); color: var(--bg); }

.mod-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.mod-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-buscar-wrap { position: relative; margin-left: auto; min-width: 230px; }
.mod-buscar-wrap .ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--faint); pointer-events: none;
}
.mod-buscar-wrap input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 16px 9px 38px;
  font: inherit; font-size: 13.5px;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.mod-buscar-wrap input::placeholder { color: var(--faint); }
.mod-buscar-wrap input:focus { border-color: var(--gold); background: var(--surface); box-shadow: 0 0 0 3px var(--gold-soft); }

.mod-build {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.mod-build-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.mod-build-head h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--gold); font-weight: 700;
}
.mod-count {
  background: var(--gold-soft); color: var(--gold-2, var(--gold));
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 1px 10px; font-size: 12px; font-weight: 800;
}
.mod-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.mod-chip:hover { box-shadow: var(--shadow); }
.mod-chip-slot {
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  border-right: 1px solid var(--line);
  padding-right: 8px;
}
.mod-chip-acciones { display: inline-flex; gap: 4px; }
.mod-chip-acciones .btn-mini { padding: 3px 8px; font-size: 12px; border-radius: 999px; }
.mod-chip-acciones .btn-mini:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.mod-chip-acciones .mod-quitar:hover { border-color: var(--red); color: var(--red); }
.mod-vacio { font-size: 12.5px; color: var(--muted); font-style: italic; line-height: 1.5; }

/* Colores por socket (implícito del mod) */
.mod-chip.slot-hechos { border-left-color: var(--blue); }
.mod-chip.slot-fundamentos { border-left-color: var(--gold); }
.mod-chip.slot-suplico { border-left-color: var(--green); }

/* Chip ancho con valores inline (estilo PoE Trade) */
.mod-chip-wide {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  flex: 1 1 100%;
  border-radius: 12px;
  padding: 10px 12px;
}
.mod-chip-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mod-chip-texto {
  font-size: 12.5px; line-height: 1.65;
  color: var(--ink-2);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.mod-param {
  font: inherit; font-size: 12px;
  color: var(--gold-2, var(--gold));
  background: var(--gold-soft);
  border: 1px dashed var(--gold-line);
  border-radius: 6px;
  padding: 2px 6px;
  min-width: 64px;
  max-width: 200px;
  transition: border-color var(--trans), background var(--trans), box-shadow var(--trans);
}
.mod-param:focus {
  outline: none;
  border-style: solid;
  border-color: var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.mod-param::placeholder { color: var(--faint); font-style: italic; }
.mod-param-num { min-width: 48px; max-width: 90px; }
.mod-param-pend {
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--gold-2, var(--gold));
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 1px 8px;
}
.mod-chip-ok {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: var(--green); color: var(--bg);
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
}
.mod-valores-hint {
  font-size: 12px; font-weight: 800;
  color: var(--gold-2, var(--gold));
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: help;
}
@media (max-width: 560px) {
  .mod-chip-wide { padding: 10px; }
  .mod-param { max-width: 140px; }
}

.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.mod-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-s);
  padding: 16px 18px;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
  animation: dike-rise 0.35s ease both;
}
.mod-card:hover { box-shadow: var(--shadow); }
.mod-card.slot-hechos { border-left-color: var(--blue); }
.mod-card.slot-fundamentos { border-left-color: var(--gold); }
.mod-card.slot-suplico { border-left-color: var(--green); }
.mod-card.equipado {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  background: var(--green-soft);
  box-shadow: 0 0 0 1px var(--green-soft);
}
.mod-card.bloqueado { opacity: 0.62; }
.mod-card.bloqueado:hover { transform: none; box-shadow: none; }
.mod-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-slot { text-transform: none; }

/* Relevancia de módulos (P1 pilar → P4 accesorio): el orden del escrito la refleja */
.mod-chip-prio {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--muted, inherit);
}
.mod-chip-prio.prio-1 { background: var(--red-soft, #fde8e8); color: var(--red, #c0392b); border-color: color-mix(in srgb, var(--red, #c0392b) 35%, transparent); }
.mod-chip-prio.prio-2 { background: var(--gold-soft, #fdf3d7); color: var(--gold-2, var(--gold, #b7950b)); border-color: var(--gold-line, #e6d9a8); }
.mod-chip-prio.prio-3 { background: var(--blue-soft, #e8f0fb); color: var(--blue, #2563eb); border-color: color-mix(in srgb, var(--blue, #2563eb) 35%, transparent); }
.mod-chip-prio.prio-4 { opacity: 0.75; }
.mod-orden-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--muted, inherit);
}
.mod-orden-barra .mod-orden-hint { opacity: 0.8; }
.mod-card .mod-chip-prio { position: absolute; top: 10px; right: 10px; }
.mod-card { position: relative; }
.mod-card.slot-hechos .badge-slot { background: var(--blue-soft); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.mod-card.slot-fundamentos .badge-slot { background: var(--gold-soft); color: var(--gold-2, var(--gold)); border-color: var(--gold-line); }
.mod-card.slot-suplico .badge-slot { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.mod-nombre { font-size: 14px; color: var(--ink); flex: 1; line-height: 1.35; }
.mod-ok {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--green); color: var(--bg);
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
}
.mod-texto {
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.mod-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: auto;
}
.mod-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.mod-tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--faint);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.mod-aviso {
  font-size: 12px; font-weight: 700;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
}
.mod-toggle { margin-left: auto; }
.mod-toggle:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.mod-card.equipado .mod-toggle { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent); color: var(--green); }

@media (max-width: 560px) {
  .mod-buscar-wrap { margin-left: 0; min-width: 100%; }
  .mod-workshop { padding: 20px 16px; }
}

/* ---------- Mis casos ----------
   La portada enseña los casos; el alta se abre a petición. Dentro de un
   caso el ancho es para él: la ficha no compite con un formulario ni con
   una rejilla de tarjetas. */
.grid-seg { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .grid-seg { grid-template-columns: 1fr; } }

.view-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.view-cab .section-title { margin: 0; }
.casos-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
body.exp-form .casos-grid { grid-template-columns: minmax(300px, 360px) 1fr; }
@media (max-width: 1000px) { body.exp-form .casos-grid { grid-template-columns: 1fr; } }
.casos-lista { min-width: 0; }
/* Con un caso abierto no hay nada que filtrar: es él y solo él. */
body.exp-caso .seg-filtros { display: none; }
body.exp-caso #seguimiento-list { grid-template-columns: 1fr; }

/* ---------- Barra del caso abierto ---------- */
.caso-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.caso-volver {
  display: inline-flex; align-items: center; gap: 2px;
  border: none; background: none; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 5px 8px 5px 4px; border-radius: 999px;
}
.caso-volver:hover { color: var(--ink); background: var(--surface-3); }
.caso-volver svg { width: 15px; height: 15px; }
.caso-titulo { font-size: 14px; font-weight: 600; color: var(--ink); }
.caso-meta { font-size: 12.5px; color: var(--muted); }
.caso-tabs {
  display: inline-flex; gap: 4px; margin-left: auto;
  background: var(--surface-3); border-radius: 999px; padding: 3px;
}
.caso-tabs button {
  border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.caso-tabs button:hover { color: var(--ink); }
.caso-tabs button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* Un campo con su botón al lado (buscar el organismo en el directorio). */
.campo-con-boton { display: flex; gap: 8px; align-items: center; }
.campo-con-boton input { flex: 1; min-width: 0; }

#seguimiento-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-content: start;
}
/* Las cadenas necesitan más ancho que una tarjeta suelta (pero dentro de un
   caso manda él: la ficha se queda con todo el ancho). */
body.exp-arbol:not(.exp-caso) #seguimiento-list { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
#seguimiento-list > .vacio { grid-column: 1 / -1; }
.registro { padding: 18px 20px; animation: rise 0.4s ease both; }
.registro.pendiente { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); box-shadow: 0 0 0 1px var(--red-soft), var(--shadow); }
.reg-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.reg-head h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.reg-notas {
  font-size: 13px; color: var(--muted);
  margin: 10px 0; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--radius-s);
  border-left: 3px solid var(--gold-line);
}
.reg-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* Expediente ya iniciado: la fase, y su historial de actuaciones. */
.badge-fase { background: var(--surface-3); color: var(--ink); border-color: var(--gold-line); font-weight: 500; }
.reg-actuaciones { margin: 10px 0; font-size: 13px; }
.reg-actuaciones > summary { cursor: pointer; color: var(--muted); }
.reg-actuaciones ul { list-style: none; margin: 8px 0 0; padding: 0; border-left: 2px solid var(--line); }
.reg-actuaciones li { padding: 4px 0 4px 12px; position: relative; }
.reg-actuaciones li::before { content: "•"; position: absolute; left: -7px; color: var(--gold-line); }
.reg-actuaciones time { color: var(--muted); }
/* Incidencias del expediente: lo que pasa de verdad, con su efecto sobre
   el plazo a la vista. Una incidencia no es una nota al margen. */
.reg-incidencias { margin: 10px 0; font-size: 13px; }
.reg-incidencias > summary { cursor: pointer; color: var(--muted); }
.reg-incidencias ul { list-style: none; margin: 8px 0 0; padding: 0; border-left: 2px solid var(--red-soft, var(--line)); }
.reg-incidencias li { padding: 6px 0 8px 12px; position: relative; }
.reg-incidencias li::before { content: "•"; position: absolute; left: -7px; color: var(--red, #c0534f); }
.inc-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.inc-cab time { color: var(--muted); }
.inc-detalle { margin: 4px 0; }
.inc-boe { margin-left: 8px; font-size: 12px; }
.badge-incidencia {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted);
  white-space: nowrap;
}
.badge-inc-suspende { background: var(--red-soft); color: var(--red, #c0534f); border-color: var(--red-soft); font-weight: 600; }
.badge-inc-no-consume { background: var(--gold-soft); color: var(--gold-2, var(--gold)); border-color: var(--gold-line); font-weight: 600; }
.badge-inc-reanuda { background: var(--gold-soft); border-color: var(--gold-line); }
.badge-inc-interrumpe { background: var(--gold-soft); border-color: var(--gold-line); }
.badge-inc-congela { background: var(--surface-3); border-color: var(--gold-line); }
.reg-alerta-suspension {
  margin: 10px 0 6px;
  padding: 10px 14px;
  background: var(--red-soft);
  border-left: 3px solid var(--red, #c0534f);
  border-radius: var(--radius-s);
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reg-alerta-suspension strong { color: var(--red, #c0534f); font-weight: 700; }
.reg-alerta-suspension.cerrada { background: var(--gold-soft); border-left-color: var(--gold-line); }
.reg-alerta-suspension.cerrada strong { color: var(--gold-2, var(--gold)); }

/* ---------- Vías de impugnación: anillo y árbol ----------
   Un color por estado de la vía: verde si ya se usó esa puerta, azul si
   está abierta, rojo si se pasó el plazo sin usarla y gris si por ahí no
   se va o todavía no toca. Es información, no adorno. */
:root {
  --via-hecha: var(--green);
  --via-disponible: var(--blue);
  --via-vencida: var(--red);
  --via-apagada: var(--line-2);
}

.anillo { flex: none; }
.anillo-seg { fill: none; stroke-width: 3.2; stroke-linecap: butt; stroke: var(--via-apagada); }
.anillo-seg.via-hecha { stroke: var(--via-hecha); }
.anillo-seg.via-disponible { stroke: var(--via-disponible); }
.anillo-seg.via-vencida { stroke: var(--via-vencida); }

.vista-toggle { display: inline-flex; background: var(--surface-3); border-radius: 999px; padding: 2px; }
.vista-toggle .btn-mini { border: none; background: transparent; border-radius: 999px; padding: 6px 14px; color: var(--muted); }
.vista-toggle .btn-mini.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* ---------- Árbol de la cadena de impugnación ---------- */
.arbol-exp {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px;
}
.arbol-cab { display: flex; align-items: center; gap: 12px; }
.arbol-cab-texto { flex: 1; min-width: 0; }
.arbol-cab h3 { font-size: 15px; font-weight: 600; }
.arbol-cab p { font-size: 12.5px; margin-top: 2px; }

.arbol { list-style: none; margin: 12px 0 0; padding: 0 0 0 14px; }
.arbol-nodo { position: relative; padding: 0 0 14px 22px; }
/* La línea que une los eslabones de la cadena. */
.arbol-nodo::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: -2px; width: 1px;
  background: var(--line-2);
}
.arbol-nodo:last-child::before { bottom: 60%; }
.arbol-nodo::after {
  content: "";
  position: absolute; left: -3px; top: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink);
}
.arbol-presentado .arbol-marca { font-weight: 600; }
/* El trámite previo encabeza la cadena cuando el cauce lo exige. */
.arbol-nodo.arbol-previo .arbol-marca { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); font-weight: 600; }
.arbol-marca { font-size: 13.5px; color: var(--ink); }
.arbol-fecha { font-size: 12.5px; color: var(--faint); margin-left: 8px; }
.arbol-nota { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }

/* La resolución, rodeada por cuatro lados: uno por vía, cada uno con su
   color (arriba = recurso, derecha = contencioso, abajo = penal,
   izquierda = Defensor). */
.resolucion-nodo {
  display: inline-block;
  border: 3px solid var(--via-apagada);
  border-radius: 18px;
  padding: 8px 16px;
  margin: 2px 0 14px;
  background: var(--surface-2);
}
.resolucion-nodo::after { background: transparent; }
.resolucion-nodo .arbol-fecha { display: inline; }

.vias-nodo { padding-bottom: 0; }
.vias-lista { display: flex; flex-direction: column; gap: 6px; }
.via-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.via-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--via-apagada); }
.via-fila.via-hecha .via-punto { background: var(--via-hecha); }
.via-fila.via-disponible .via-punto { background: var(--via-disponible); }
.via-fila.via-vencida .via-punto { background: var(--via-vencida); }
.via-fila.via-hecha { border-color: color-mix(in srgb, var(--via-hecha) 35%, transparent); background: var(--green-soft); }
.via-fila.via-vencida { border-color: color-mix(in srgb, var(--via-vencida) 30%, transparent); background: var(--red-soft); }
.via-nombre { font-size: 13.5px; font-weight: 600; color: var(--ink); flex: none; }
.via-estado { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 0; }
.via-resultado {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; outline: none;
}
.via-fila.via-pendiente, .via-fila.via-no-procede { opacity: 0.72; }

@media (max-width: 560px) {
  .via-fila { flex-wrap: wrap; }
  .via-estado { flex-basis: 100%; order: 3; }
}
.badge-materia { background: var(--surface-3); color: var(--muted); border-color: var(--line); font-weight: 500; }
/* Nube: transporte del expediente a un GitHub privado con token. */
.nube-panel { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.nube-panel > summary { cursor: pointer; padding: 10px 14px; color: var(--muted); font-size: 13px; }
.nube-campos { padding: 0 14px 14px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.nube-campos .acciones { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.nube-campos #nube-estado { grid-column: 1 / -1; margin: 0; }
/* Las piezas que no son un campo van a lo ancho: la explicación, los botones,
   el código de conexión y la lista de lo que hay en la nube. */
.nube-campos .nube-ancho { grid-column: 1 / -1; margin: 0; }
/* El código que hay que copiar en GitHub es lo único que se lee de un vistazo:
   se enseña grande, con letra de máquina y separado para no confundirlo. */
.nube-codigo { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; background: var(--surface-2); }
.nube-codigo-texto {
  margin: 6px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--ink);
}
/* Cada camino de la copia (Google y GitHub) es una TARJETA con la misma forma:
   cabecera con su nombre y una etiqueta que dice de un vistazo si hay que
   crearse algo, una línea de qué hace, los botones y el estado. Se leen como
   dos opciones; el texto corrido de antes se leía como una sola cosa con
   muchos pasos. */
.nube-opcion {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.nube-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nube-titulo { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
/* La etiqueta es lo que evita el párrafo: dice en dos palabras si el camino
   pide algo que el ciudadano ya tenga o tenga que crearse. */
.nube-etiqueta {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2c5d2c;
  background: #e6f2e6;
  border: 1px solid #b7d8b7;
  border-radius: 999px;
  padding: 1px 8px;
}
.nube-etiqueta-neutra { color: var(--muted); background: var(--surface-3); border-color: var(--line); }
.nube-opcion .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.nube-opcion p { margin: 0; font-size: 13px; }
/* El estado de cada camino: una línea corta, que no compite con el texto. */
.nube-mini { font-size: 12.5px; color: var(--muted); }
/* El manual, detrás de un desplegable: va al final del panel y lo único que
   enseña cerrado es su pregunta. La página no explica; el botón hace. */
.nube-ayuda { border-top: 1px dashed var(--line); padding-top: 8px; }
.nube-ayuda > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.nube-ayuda p { margin: 8px 0 0; font-size: 12.5px; }
.nube-casos { display: grid; gap: 6px; }
.nube-manual { border-top: 1px dashed var(--line); padding-top: 8px; grid-column: 1 / -1; }
.nube-manual > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
/* El enlace que abre la parte técnica: texto subrayado, sin caja de botón, para
   que se lea como una salida de emergencia y no como un paso más del camino. */
.nube-enlace {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.nube-enlace:hover { color: var(--ink); }
.nube-pasos { margin: 6px 0 0 18px; padding: 0; font-size: 12.5px; color: var(--muted); }
.nube-pasos li { margin-bottom: 6px; }
.nube-caso {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  margin-top: 8px;
}
.nube-caso p { margin: 0; font-size: 13px; }
.seg-filtros { display: flex; gap: 10px; margin-bottom: 14px; }
.seg-filtros select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  font: inherit; font-size: 13.5px;
  outline: none;
}
.reg-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.proxima { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.proxima svg { width: 14px; height: 14px; }
.registro.pendiente .proxima { color: var(--red); font-weight: 600; }
.registro.pendiente .proxima::after { content: "●"; animation: pulse 1.4s ease infinite; font-size: 12px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.estado-presentada { background: var(--blue-soft); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.estado-en-tramite { background: var(--gold-soft); color: var(--gold-2, var(--gold)); border-color: var(--gold-line); }
.estado-sin-respuesta, .estado-derivada-a-penal { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.estado-archivada { background: var(--surface-3); color: var(--muted); border-color: var(--line); }
.estado-contestada, .estado-incoado-expediente, .estado-resuelta { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.estado-incompetencia-alegada, .estado-resolucion-sin-firmar, .estado-notificacion-defectuosa, .estado-resolucion-extemporanea, .estado-sobreseida, .estado-perfecto-despacho { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.estado-contestada-por-atencion-al-ciudadano, .estado-subsanacion-requerida { background: var(--gold-soft); color: var(--gold-2, var(--gold)); border-color: var(--gold-line); }
.estado-diligencias-abiertas { background: var(--blue-soft); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }

/* ---------- Vacío ---------- */
.vacio {
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 44px 24px;
  font-size: 14px;
  background: var(--surface);
}

/* ---------- Aviso legal ---------- */
.legal-note {
  border-left: 3px solid var(--gold);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 26px;
  box-shadow: var(--shadow);
  line-height: 1.6;
}
.legal-note strong { color: var(--ink); }
.aviso-registro { border-left-color: var(--red); background: var(--surface); }
.aviso-registro strong { color: var(--red); }
.aviso-registro em { color: var(--gold-2, var(--gold)); font-style: normal; font-weight: 600; }

/* ---------- Modal de recursos ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 20px 20px;
  overflow: auto;
}
.modal {
  width: min(720px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.25s ease both;
  max-height: 84vh;
  display: flex; flex-direction: column;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  z-index: 1;
}
.modal-ruta { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ruta-item {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer;
  font: inherit; transition: all 0.15s;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ruta-item:hover { border-color: var(--gold-line); color: var(--gold); }
.ruta-item:last-child { color: var(--gold); border-color: var(--gold-line); background: var(--gold-soft); font-weight: 600; }
.ruta-sep { color: var(--faint); }
.modal-close {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; cursor: pointer; font-size: 14px;
  transition: all 0.15s;
}
.modal-close:hover { color: var(--red); border-color: var(--red); }
.modal-body { padding: 22px 26px 26px; overflow: auto; }
.modal-titulo { font-family: var(--serif); font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.modal-desc { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; line-height: 1.6; }
.modal-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; }
body.modal-open { overflow: hidden; }

/* Chips de recursos */
.recursos { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.rec-grupo { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 9px; flex-wrap: wrap; }
.rec-label {
  font-size: 12px; font-weight: 600;
  color: var(--muted); min-width: 76px; padding-top: 5px;
}
.rec-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-recurso {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.chip-recurso:hover { border-color: var(--gold-line); color: var(--gold-2, var(--gold)); background: var(--gold-soft); }
.chip-recurso.plano { cursor: default; color: var(--muted); font-style: italic; }
.chip-recurso.plano:hover { border-color: var(--line); color: var(--muted); background: var(--surface-2); transform: none; }

/* ---------- Flash ---------- */
#flash {
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 200;
}
#flash.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Aviso de actualización PWA ---------- */
#aviso-actualizacion {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 210;
  max-width: min(92vw, 520px);
}
#aviso-actualizacion .aviso-acciones { display: flex; gap: 8px; }
#aviso-actualizacion .btn-mini { white-space: nowrap; }

@media (max-width: 640px) {
  #aviso-actualizacion { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    width: 280px;
    transform: translateX(-105%);
    transition: transform 0.28s ease;
    box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open::after { content: ""; position: fixed; inset: 0; background: rgba(12, 16, 26, 0.45); z-index: 55; }
  .menu-toggle { display: grid; }
  .topbar { padding: 12px 18px; }
  main { padding: 22px 18px 40px; }
  .buscador-wrap { min-width: 0; flex: 1; }
}
@media (max-width: 560px) {
  .topbar-title { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .escrito-paper { padding: 24px 20px; }
}

/* ---------- Incrustado dentro de la web (?embed=1) ----------
   Cuando Denuncias se abre en la pestaña «Expedientes» de la web, no
   repite lo que ya está fuera (su marca, su barra y su pie) y se ajusta
   al hueco que le da la web: un solo scroll y ninguna barra doble. */
html.embed, html.embed body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html.embed .layout { height: 100%; min-height: 0; }
html.embed .sidebar-note,
html.embed footer { display: none; }
/* La barra se queda (ahí vive el botón de menú del móvil: sin ella, en
   pantalla pequeña no habría forma de abrir la navegación), pero deja de
   pegajosa y pierde el título, porque la web ya ha dicho dónde estamos. */
html.embed .topbar { position: static; padding: 12px 22px; }
html.embed .topbar-title { display: none; }
html.embed .main-wrap { height: 100%; overflow-y: auto; }
html.embed main { padding: 20px 22px 36px; }
html.embed .section-title { font-size: 19px; }
/* En pantalla ancha la columna del menú se estrecha; en estrecha se deja el
   comportamiento de siempre (menú lateral desplegable), que es el único
   que funciona en un móvil. */
@media (min-width: 981px) {
  html.embed .layout { grid-template-columns: 218px 1fr; }
  html.embed .sidebar { padding: 16px 10px; }
  html.embed .nav-link { padding: 9px 10px; gap: 9px; font-size: 13.5px; }
  html.embed main { padding: 18px 20px 34px; max-width: 1500px; }
}

/* ---------- Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .layout { display: block; }
  .sidebar, .topbar, .caso-bar, .stats, .chips, .form-panel, footer, .acciones,
  #flash, .paper-actions, .legal-note, .menu-toggle, .buscador-wrap,
  .mod-workshop, .escrito-aviso,
  .section-title, .section-sub { display: none !important; }
  main { padding: 0; max-width: none; }
  .escrito-paper { box-shadow: none; border: none; padding: 0; background: #fff; color: #000; }
  .escrito-paper pre { font-size: 12pt; line-height: 1.65; color: #000; }
}

/* ---------- Organigrama visual (3 niveles) ---------- */
.org-miga { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; font-size: 14px; }
.miga-item {
  border: 0; background: transparent; color: var(--gold-2, var(--gold)); font-weight: 700;
  cursor: pointer; padding: 5px 9px; border-radius: 8px; font-family: var(--sans); font-size: 14px;
}
.miga-item:hover { background: var(--gold-soft); text-decoration: none; }
.miga-sep { color: var(--faint); }
.miga-actual { font-weight: 700; color: var(--ink); padding: 5px 9px; }

#organismos-list { display: grid; gap: 14px; }
#organismos-list.nivel-ambitos { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
#organismos-list.nivel-categorias { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
#organismos-list.nivel-organismos { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.ambito-card {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; cursor: pointer; font-family: var(--sans);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  animation: dike-rise 0.35s ease both;
}
.ambito-card:hover { box-shadow: var(--shadow); border-color: var(--gold-line); }
.ambito-ico { display: none; }
.ambito-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ambito-txt strong { font-size: 15px; color: var(--ink); }
.ambito-txt small { color: var(--muted); font-size: 12.5px; }
.ambito-count {
  background: var(--gold-soft); color: var(--gold-2, var(--gold)); border: 1px solid var(--gold-line);
  border-radius: 999px; padding: 4px 13px; font-size: 13px; font-weight: 800;
}

.cat-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; cursor: pointer; font-family: var(--sans);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  animation: dike-rise 0.35s ease both;
}
.cat-card:hover { box-shadow: var(--shadow); border-color: var(--gold-line); }
.cat-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cat-txt strong { font-size: 15.5px; color: var(--ink); }
.cat-txt small { color: var(--muted); font-size: 12px; }
.cat-go { font-size: 15px; color: var(--gold-2, var(--gold)); font-weight: 700; }

.org-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; animation: dike-rise 0.35s ease both; }
.org-head { display: flex; flex-direction: column; gap: 8px; }
.org-head h3 { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.3; }
.org-quien { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.org-quien strong { color: var(--ink-2); }
.org-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto;
  padding-top: 12px; border-top: 1px dashed var(--line);
}
.org-actions .btn { padding: 9px 14px; font-size: 13.5px; }

.base-legal { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.base-legal summary {
  cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink-2);
  padding: 10px 14px; list-style: none; display: flex; align-items: center; gap: 8px;
}
.base-legal summary::before { content: "▸"; color: var(--gold); transition: transform var(--trans); }
.base-legal[open] summary::before { transform: rotate(90deg); }
.base-legal ul { padding: 2px 14px 12px 32px; font-size: 13px; color: var(--muted); }
.base-legal li { margin-bottom: 6px; }

@keyframes dike-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Rama del destino (condicional del base) ---------- */
.rama-sec {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.rama-titulo { font-weight: 700; font-size: 13px; color: var(--ink-2); margin-bottom: 3px; }
.rama-hint { font-size: 12px; color: var(--muted); margin: 0 0 8px; line-height: 1.45; }
.rama-opciones { display: grid; gap: 6px; }
.rama-opt {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 8px 10px; cursor: pointer;
  transition: border-color var(--trans), background var(--trans), transform 0.12s ease;
}
.rama-opt:hover { border-color: var(--gold-line); background: var(--gold-soft); transform: translateX(2px); }
.rama-opt:active { transform: scale(0.99); }
.rama-opt.activa {
  border-color: var(--gold); background: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold-line) inset;
}
.rama-opt input { accent-color: var(--gold); margin-top: 3px; flex: none; }
.rama-opt-cuerpo { display: grid; gap: 2px; min-width: 0; }
.rama-opt-cuerpo strong { font-size: 13px; color: var(--ink); line-height: 1.35; }
.rama-opt-cuerpo small { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ---------- Selector de recurso contra la resolución (acento azul) ---------- */
.recurso-sec {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.recurso-sec.vacio { border: 1px dashed var(--line-2); border-radius: var(--radius-s); padding: 10px; font-size: 12.5px; color: var(--muted); }
.recurso-titulo { font-weight: 700; font-size: 13px; color: var(--blue); margin-bottom: 3px; }
.recurso-hint { font-size: 12px; color: var(--muted); margin: 0 0 8px; line-height: 1.45; }
.recurso-opciones { display: grid; gap: 6px; }
.recurso-opt {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 8px 10px; cursor: pointer;
  transition: border-color var(--trans), background var(--trans), transform 0.12s ease;
}
.recurso-opt:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateX(2px); }
.recurso-opt:active { transform: scale(0.99); }
.recurso-opt.activa {
  border-color: var(--blue); background: var(--blue-soft);
  box-shadow: 0 0 0 1px var(--blue-soft) inset;
}
.recurso-opt input { accent-color: var(--blue); margin-top: 3px; flex: none; }
.recurso-opt-cuerpo { display: grid; gap: 2px; min-width: 0; }
.recurso-opt-cuerpo strong { font-size: 13px; color: var(--ink); line-height: 1.35; }
.recurso-opt-cuerpo small { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Botón «Generar recurso» en el modal */
.btn-recurso {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--blue); color: var(--blue); background: transparent;
  border-radius: var(--radius-s); padding: 8px 14px; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background var(--trans), color var(--trans), transform 0.12s ease;
}
.btn-recurso:hover { background: var(--blue-soft); }
.btn-recurso:active { transform: scale(0.98); }
.btn-recurso svg { width: 15px; height: 15px; }

/* ---------- Plazos legales rápidos y Alertas de Silencio ---------- */
.calc-plazos-rapidos {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chips-plazos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.btn-plazo {
  font-size: 12px;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--trans);
}
.btn-plazo:hover {
  background: var(--gold-soft);
  border-color: var(--gold-line);
  color: var(--gold-2, var(--gold));
}

.reg-alerta-silencio {
  margin: 10px 0 6px;
  padding: 10px 14px;
  background: var(--red-soft);
  border-left: 3px solid var(--red, #c0534f);
  border-radius: var(--radius-s);
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reg-alerta-silencio strong {
  color: var(--red, #c0534f);
  font-weight: 700;
}
/* Dentro de la alerta de silencio, el encuadre es una línea más: sin caja
   propia ni borde, para que la alerta se lea como un aviso y no como tres. */
.reg-alerta-silencio .reg-encuadre {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Encuadre estratégico: favorable (verde) / hostil (rojo) / neutro (gris) */
.reg-encuadre {
  margin: 8px 0 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--muted, #8a8a8a);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-s);
  font-size: 12.5px;
}
.reg-encuadre strong {
  font-weight: 700;
}
.reg-encuadre ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.reg-encuadre em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}
html[data-theme="dark"] .reg-encuadre {
  background: rgba(255, 255, 255, 0.05);
}
/* Escalado internacional (guía): tarjetas de TEDH / UE / ONU */
.internacional-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 10px 0;
}
.internacional-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface-2, var(--surface));
}
.internacional-item p { font-size: 0.88rem; margin: 6px 0; }
.internacional-item a { font-size: 0.85rem; }
.internacional-aviso {
  font-size: 0.85rem;
  color: var(--muted, inherit);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

/* Matriz de constancia por tipo de registro (guía) */
.matriz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.matriz-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-2, var(--surface));
}
.matriz-item h4 { font-size: 0.92rem; margin: 0 0 6px; color: var(--gold-2, var(--gold)); }
.matriz-item ul { margin: 4px 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.matriz-item li { font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); }
.matriz-cuando { font-size: 0.84rem; margin: 0 0 8px; color: var(--ink-2); }
.matriz-seccion { font-size: 0.84rem; margin: 8px 0 2px; }

.reg-escape {
  margin: 8px 0 4px;
  padding: 8px 12px;
  background: rgba(120, 130, 150, 0.07);
  border-left: 3px solid var(--muted, #788296);
  border-radius: var(--radius-s);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim, inherit);
}
.reg-actuar-silencio {
  align-self: flex-start;
  background: var(--red);
  color: var(--bg);
  border: none;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: opacity var(--trans), transform 0.1s ease;
}
.reg-actuar-silencio:hover {
  opacity: 0.9;
}

.reg-timeline {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}
.reg-timeline-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.reg-timeline-step.vencido {
  color: var(--red, #c0534f);
  background: var(--red-soft);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
  font-weight: 600;
}

/* ---------- Vinculación procesal en bloque ---------- */
.mod-vinculo-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-2);
  margin: 6px 0;
  width: fit-content;
}
.mod-vinculo-ico {
  font-size: 12px;
}
.mod-vinculo-txt strong {
  color: var(--gold-2, var(--gold));
  font-weight: 700;
}
.mod-chip-bloque {
  font-size: 12px;
  color: var(--gold-2, var(--gold));
  margin-right: 2px;
}
.mod-desequipar-bloque {
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red, #c0534f);
}
.mod-desequipar-bloque:hover {
  background: var(--red-soft);
  border-color: var(--red, #c0534f);
}

/* ============================================================
   TECNOLOGÍA · Paleta de comandos, autoguardado, PWA, resaltado
   ============================================================ */

mark {
  background: var(--gold-soft);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 1px;
}

/* ---------- Botón topbar + teclas ---------- */
.btn-cmdk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--sans);
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.btn-cmdk svg { width: 14px; height: 14px; }
.btn-cmdk:hover { border-color: var(--gold-line); color: var(--ink); background: var(--gold-soft); }
kbd {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 5px;
  background: var(--surface-2);
  color: var(--muted);
}
@media (max-width: 760px) {
  .btn-cmdk kbd { display: none; }
}

/* ---------- Paleta de comandos ---------- */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 16, 28, 0.45);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: start center;
  padding: 11vh 16px 16px;
}
.cmdk-panel {
  width: min(660px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.cmdk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.cmdk-head svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cmdk-head input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  min-width: 0;
}
.cmdk-list { overflow: auto; padding: 6px; flex: 1; }
.cmdk-grupo {
  font-size: 12px;
  color: var(--faint);
  padding: 10px 10px 4px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--sans);
}
.cmdk-item.sel {
  background: var(--gold-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.cmdk-ico { flex: none; width: 22px; text-align: center; }
.cmdk-txt { display: grid; min-width: 0; gap: 1px; }
.cmdk-txt strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-vacio { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.cmdk-foot {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Autoguardado del borrador ---------- */
.borrador-aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--blue-soft);
  border: 1px solid var(--blue);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.borrador-acciones { display: inline-flex; gap: 6px; }

/* ---------- Botón instalar (PWA) ---------- */
.btn-instalar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--green);
  color: var(--green);
  background: var(--green-soft);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: all var(--trans);
}
.btn-instalar:hover { }

/* ---------- Escudo anti-evasión ---------- */
.btn-blindar {
  margin-left: 8px;
  border-color: var(--green);
  color: var(--green);
}
.btn-blindar:hover { background: var(--green-soft); }

/* ---------- Respuestas rápidas del seguimiento ---------- */
.reg-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 2px;
}
.reg-rapida {
  border-color: var(--gold-line);
  color: var(--gold-2, var(--gold));
  font-weight: 600;
}
.reg-rapida:hover { background: var(--gold-soft); }


/* ---------- Accesibilidad: foco visible en toda la app ----------
   Navegación por teclado consistente: cualquier elemento interactivo
   recibe un anillo dorado visible (solo con foco por teclado). */
.btn:focus-visible,
.btn-mini:focus-visible,
.btn-instalar:focus-visible,
.theme-toggle:focus-visible,
.nav-link:focus-visible,
.menu-toggle:focus-visible,
.btn-cmdk:focus-visible,
.ayuda-boton:focus-visible,
.chip:focus-visible,
.mod-toggle:focus-visible,
.reg-rapida:focus-visible,
.reg-actuar-silencio:focus-visible,
.reg-ics:focus-visible,
.reg-editar:focus-visible,
.reg-borrar:focus-visible,
.chip-recurso:focus-visible,
.packs-grid button:focus-visible,
.mod-card button:focus-visible,
.card button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Documentos ----------
   El cargador: varios PDF a la vez, su lectura y lo que se sabe de cada
   uno. Fichas con datos, no párrafos. */
.doc-drop {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.doc-drop-on { border-color: var(--blue); border-style: solid; background: var(--surface-2); }
.doc-progreso {
  margin-bottom: 14px; font-size: 14px; color: var(--ink);
  background: var(--surface-2); border-radius: var(--radius-s); padding: 10px 14px;
}
.doc-resumen {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 14px;
}
.doc-resumen .stat-inline { color: var(--muted); }
.doc-resumen .stat-inline strong { color: var(--ink); font-size: 15px; }
.doc-filtros { margin-bottom: 12px; }
.doc-filtros select { max-width: 340px; }
.doc-card + .doc-card { margin-top: 12px; }
.doc-card .card-head-static { gap: 8px; flex-wrap: wrap; }
.doc-nombre { margin: 0 0 4px; font-weight: 600; font-size: 14px; word-break: break-word; }
.doc-resumen-linea { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.doc-campos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.doc-campo {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-size: 12px;
}
.doc-falta { margin: 4px 0 0; font-size: 13px; }
.doc-plazo { margin: 12px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-s); }
.doc-plazo-linea { margin: 0; font-size: 14px; }
.doc-fecha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.doc-acciones { flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.doc-select { max-width: 260px; }
.doc-texto {
  margin-top: 12px; max-height: 300px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 12px;
  font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

/* ---------- Cauce y plazos ----------
   Los dos relojes del expediente: el recurso (con su vencimiento) y la
   acción (caducidad o prescripción). Fichas de datos, no párrafos. */
.cauce-cabecera {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 13px;
}
.cauce-ficha + .cauce-ficha { margin-top: 12px; }
.cauce-ficha .card-head-static { gap: 8px; }
.cauce-vencimiento {
  font-size: 16px; margin: 0 0 4px;
}
.cauce-vencimiento strong { font-variant-numeric: tabular-nums; }
.cauce-pendiente, .cauce-aviso, .cauce-ajuste { font-size: 13px; margin: 4px 0 0; }
.cauce-pendiente { color: var(--muted); }
.cauce-aviso { color: var(--red); }
.cauce-norma { margin-top: 10px; }
.cauce-datos { display: grid; gap: 6px; margin: 12px 0 0; }
.cauce-datos > div {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px; align-items: baseline;
}
.cauce-datos dt { color: var(--muted); font-size: 13px; }
.cauce-datos dd { margin: 0; font-size: 14px; }
.cauce-lista { margin: 10px 0 0 18px; font-size: 13px; color: var(--muted); }
.cauce-lista li { margin-bottom: 4px; }
.cauce-ficha .acciones { margin-top: 14px; }

/* Las fichas del Cauce y las tarjetas de documento NO son plegables: su
   cuerpo se enseña siempre. La regla genérica `.card-body { display: none }`
   es solo para las tarjetas del organigrama, que se abren al pulsarlas (y
   añaden la clase `.open`). Sin esto, el cuerpo de la ficha —con el plazo y
   los botones, como «Añadir a mis casos» o «Abrir el escrito en el taller»—
   quedaba oculto. */
.cauce-ficha .card-body,
.doc-card .card-body { display: block; }
@media (max-width: 680px) {
  .cauce-datos > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Penal · medidas cautelares ----------
   La lista de lo que se puede pedir en una denuncia penal, cada una con su
   precepto y con la marca que importa: `de oficio` (el juez puede acordarla
   sin que nadie se la pida) o `a instancia` (hay que pedirla). */
.cautelares-panel,
.cautelares-caso {
  margin: 14px 0 0;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.cautelares-caso { margin: 10px 0 0; }
.cautelares-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cautelares-cab strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.cautelares-cab .muted { font-size: 12.5px; color: var(--muted); }
.cautelares-cab .btn-mini { margin-left: auto; }
.cautelares-lista { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.cautelar-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.caut-nombre { font-weight: 500; color: var(--ink); }
.caut-precepto { font-size: 12px; color: var(--muted); }
.caut-precepto a { color: var(--muted); }
.badge-oficio {
  background: var(--green-soft);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

/* ---------- Arranque: qué quiero hacer ----------
   Va arriba de «Mis casos»: quien no es jurista no sabe si lo suyo es una
   denuncia o una demanda, así que se le pregunta por lo que ha pasado y se
   le abre el escrito que toca. */
.arranque { margin-bottom: 22px; }
.arranque-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.arranque-btn { font-size: 15px; padding: 13px 24px; }
.arranque-btn svg { width: 18px; height: 18px; }
.arranque-panel {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.arranque-grupos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.arranque-grupo { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; background: var(--surface-2); }
.arranque-grupo-titulo { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.arranque-grupo-texto { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.arranque-acciones { display: grid; gap: 8px; }
.arranque-op {
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  transition: border-color var(--trans), background var(--trans), transform 0.12s ease;
}
.arranque-op:hover { border-color: var(--gold-line); background: var(--gold-soft); transform: translateX(2px); }
.arranque-op:active { transform: scale(0.99); }

/* ---------- Accesibilidad: respetar prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* ---------- BUSCADOR DE LA PORTADA ----------
   La puerta de entrada para quien no sabe cómo se llama su trámite: escribe lo
   que le pasa y cada resultado es un botón que lo lleva al punto más avanzado
   que la aplicación alcanza para eso. Vive dentro del bloque de arranque, en la
   vista de inicio, antes del panel de salidas. */
.arranque-buscar { margin-top: 16px; }
.arranque-buscar-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.arranque-buscar input[type="search"] {
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  border: 2px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.arranque-buscar input[type="search"]:focus {
  outline: none;
  border-color: var(--ink);
}
.arranque-resultados {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arranque-res-grupo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-top: 6px;
}
.arranque-res {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.arranque-res:hover,
.arranque-res:focus-visible {
  border-color: var(--ink);
}
.arranque-res-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arranque-res-txt small { opacity: 0.75; font-size: 12.5px; }
.arranque-res-ir { flex: none; opacity: 0.6; }
.arranque-res-vacio {
  padding: 12px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  font-size: 13.5px;
  opacity: 0.85;
}

/* ============================================================
   Contrataque (planes multi-frente) · mudado de la app de
   procedimiento, UNA-SOLA-APP.md §4.3 paso 1
   ============================================================ */
.kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 6px;
}
.datos-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.plan-intro {
  max-width: 74ch;
  margin: 0 0 16px;
  line-height: 1.55;
}
.planes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.planes-frentes {
  margin-top: 22px;
  gap: 10px;
}
.plan-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  font: inherit;
  color: inherit;
}
.plan-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-left-color: var(--navy);
}
.plan-top { display: flex; align-items: center; gap: 10px; }
.plan-ico { font-size: 1.4rem; }
.plan-name { font-size: 1rem; color: var(--ink); }
.plan-frentes { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-frente {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.plan-card-plano {
  border-left-color: var(--line);
  cursor: default;
  box-shadow: none;
}
.plan-card-plano:hover { transform: none; box-shadow: none; border-left-color: var(--line); }
.plan-sub { font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; }
.plan-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.plan-n-act { font-size: 0.72rem; color: var(--faint); }

.plan-detalle {
  margin: 18px 0 8px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.plan-detalle-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan-detalle-head h2 { margin: 2px 0 0; font-size: 1.35rem; }
.plan-bloque { margin-top: 16px; }
.plan-bloque h3 { margin: 0 0 8px; font-size: 1rem; color: var(--navy); }
.plan-bloque ul { margin: 0; padding-left: 20px; }
.plan-bloque li { font-size: 0.86rem; color: var(--ink-2); margin-bottom: 4px; line-height: 1.45; }
.actuaciones { display: grid; gap: 12px; }
.actuacion {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.act-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act-frente {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-2);
  border: 1px solid var(--gold-line);
}
.act-prio { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.act-p0 { background: var(--red-soft); color: var(--red); }
.act-p1 { background: var(--gold-soft); color: var(--gold-2); }
.act-p2, .act-p3 { background: var(--navy-soft); color: var(--navy); }
.act-name { font-size: 0.95rem; color: var(--ink); }
.act-meta { margin-top: 8px; font-size: 0.82rem; color: var(--ink-2); line-height: 1.5; }
.act-meta em { color: var(--muted); font-style: normal; font-weight: 600; }
.act-req ul { margin: 4px 0 0; padding-left: 18px; }
.act-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ============================================================
   El caso, fase a fase · mudado de la app de procedimiento,
   UNA-SOLA-APP.md §4.3 paso 2 (fases-expediente.js + casos-arbol.js)
   ============================================================ */
.exp-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.exp-cabecera .campo { flex: 0 1 380px; margin: 0; }
.exp-cabecera-info { flex: 1 1 240px; min-width: 200px; }
.exp-cabecera-info p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; }
.exp-avance { height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.exp-avance > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--green));
  transition: width var(--trans);
}
.exp-arbol { margin-bottom: 18px; }
.exp-arbol .recorrido-nodo > .recorrido-fila[aria-expanded="true"] .recorrido-label { color: var(--ink); }
.exp-registrar { margin-top: 4px; }
.exp-registrar > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 14px 16px; color: var(--ink); }
.exp-registrar .form-panel { max-width: 520px; }

/* El componente de árbol (casos-arbol.js). Se llama «recorrido» en la
   interfaz para no chocar con el árbol de vías de Mis casos. */
.recorrido-caja { margin-top: 4px; }
.recorrido-controles { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.recorrido { list-style: none; margin: 0; padding: 0; }
.recorrido-nodo { margin: 0; }
.recorrido-hijos {
  list-style: none; margin: 0 0 4px 20px; padding: 0 0 0 14px;
  border-left: 1px solid var(--line);
}
.recorrido-detalle {
  margin: 2px 0 8px 20px; padding: 4px 0 4px 14px;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.recorrido-detalle-fila { display: flex; flex-direction: column; gap: 2px; }
.recorrido-detalle-fila dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.15px;
  font-weight: 700; color: var(--muted);
}
.recorrido-detalle-fila dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.recorrido-detalle-fila ul { margin: 2px 0 0; padding-left: 16px; display: grid; gap: 3px; }
.recorrido-fila {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink); font: inherit; text-align: left;
  cursor: pointer; transition: background var(--trans), color var(--trans);
}
.recorrido-fila:hover { background: var(--surface-2); }
.recorrido-fila:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.recorrido-flecha {
  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--faint); transition: transform var(--trans), color var(--trans);
}
.recorrido-flecha svg { width: 15px; height: 15px; }
.recorrido-flecha.vacia { visibility: hidden; }
.recorrido-fila[aria-expanded="true"] .recorrido-flecha { transform: rotate(90deg); color: var(--gold); }
.recorrido-ico { flex: none; font-size: 15px; line-height: 1; }
.recorrido-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.recorrido-label { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.recorrido-meta { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.recorrido-nota { font-size: 11.5px; font-style: italic; color: var(--faint); line-height: 1.4; }
.recorrido-pill {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.recorrido-pill.resuelve { background: var(--navy-soft); color: var(--ink-2); border-color: var(--line); }
.recorrido-pill.recurso { background: var(--gold-soft); color: var(--gold-2, var(--gold)); }
.recorrido-pill.derivacion { background: var(--blue-soft); color: var(--blue); }
.recorrido-pill.aviso { background: var(--red-soft); color: var(--red); }
.recorrido-pill.ok { background: var(--green-soft); color: var(--green); }
.recorrido-pill.pendiente { background: var(--surface-3); color: var(--muted); }
.recorrido-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--trans); }
.recorrido-fila[aria-expanded="true"] + .recorrido-panel { grid-template-rows: 1fr; }
.recorrido-panel-in { overflow: hidden; min-height: 0; }
.recorrido > .recorrido-nodo > .recorrido-fila .recorrido-label { font-family: var(--serif); font-size: 16.5px; }

/* ============================================================
   Avisos de plazo corto · mudado de la app de procedimiento,
   UNA-SOLA-APP.md §4.3 paso 3 (avisos.js)
   ============================================================ */
.avisos-card { margin: 28px 0 1.4rem; border-left: 3px solid var(--gold); }
.aviso-item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  margin-bottom: .5rem;
  background: var(--surface-2);
}
.aviso-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.aviso-cabeza strong { font-size: .92rem; }
.aviso-estado { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.aviso-fecha { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.aviso-texto { font-size: .84rem; margin-top: .2rem; }
.aviso-detalle, .aviso-fuente { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.aviso-vencido { border-left-color: var(--red); background: var(--red-soft); }
.aviso-vencido .aviso-estado { color: var(--red); }
.aviso-hoy { border-left-color: var(--red); }
.aviso-hoy .aviso-estado { color: var(--red); }
.aviso-urgente { border-left-color: #c98b2e; }
.aviso-urgente .aviso-estado { color: #8a5c10; }
.aviso-proximo { border-left-color: var(--gold); }
.aviso-proximo .aviso-estado, .aviso-holgado .aviso-estado { color: var(--muted); }
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  padding: .05rem .42rem;
  line-height: 1.4;
}
html[data-theme="dark"] .aviso-item { background: var(--surface-3); }
@media print {
  .avisos-card { break-inside: avoid; }
  .aviso-item { border-left-width: 3px; }
}