/*
 * sumario.css — Sistema visual de El Sumario.
 *
 * Registro editorial documental: papel claro, tipografía de lectura,
 * filetes en lugar de sombras. La credibilidad es el requisito de diseño;
 * nada de dramatismo, degradados ni alarma cromática (ver EL_SUMARIO.md § 3 y § 5).
 *
 * Cubre las tres plantillas de la sección: portada (index.html),
 * fichas de caso (<slug>/index.html, generadas) y metodología.
 */

:root {
  /* Papel y tinta */
  --paper: #fbfaf7;
  --paper-alt: #f4f1e8;
  --surface: #ffffff;

  --rule: #e4e0d6;
  --rule-strong: #c9c5b6;

  --ink: #16181c;
  --ink-prose: #33352f;
  --ink-soft: #4a4943;
  --muted: #6b6a63;
  --muted-soft: #8a887f;

  /* Acentos: misma familia cromática, se distinguen por tono */
  --accent: #1f4f52;
  --accent-hover: #0f2f31;

  /* Semántica procesal. Nunca rojo de alarma: oxblood sobrio para la condena. */
  --condena-fg: #8c2f20;
  --condena-bg: #f7e9e6;
  --condena-border: #e6c4bc;

  --vivo-fg: #2c5478;
  --vivo-bg: #eaf0f6;
  --vivo-border: #c6d6e6;

  --archivo-fg: #1f5f3a;
  --archivo-bg: #e9f1ec;
  --archivo-border: #c2dccc;

  --aviso-fg: #8a6f1e;
  --aviso-bg: #faf3dc;
  --aviso-border: #d9c88a;

  --neutro-fg: #5c5b55;
  --neutro-bg: #f0eee6;
  --neutro-border: #d9d5c8;

  --surface-alt: #faf9f5;
  --aviso-prose: #6b5615;

  --font-serif: Spectral, "Iowan Old Style", Charter, Georgia, serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max-width: 1296px;
  --gutter: 4.5rem;
}

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

html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button, input, select { font: inherit; color: inherit; }

/* =========================================================
   Cabecera común
   ========================================================= */

.sumario-header { border-bottom: 1px solid var(--rule); background: var(--paper); }

.sumario-topbar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.sumario-topbar a { color: var(--muted); display: inline-flex; align-items: center; gap: 0.5rem; }
.sumario-topbar a:hover { color: var(--ink); }
.sumario-topbar > div { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* =========================================================
   Portada — cabecera editorial
   ========================================================= */

.sumario-hero-wrapper { border-bottom: 1px solid var(--rule); background: var(--paper); }

.sumario-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem var(--gutter) 2.5rem;
}

.hero-eyebrow,
.sumario-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aviso-fg);
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-border);
  padding: 0.3rem 0.65rem;
  margin-bottom: 1.1rem;
}

.sumario-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin-bottom: 1rem;
}

.sumario-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-prose);
  max-width: 60ch;
}

.sumario-subtitle strong { font-weight: 600; }

/* En las páginas de prosa (metodología, fichas) la cabecera se alinea con la
   columna de lectura, no con la rejilla ancha de la portada. */
.sumario-hero.doc-hero { max-width: calc(68rem + var(--gutter) * 2); }

/* Cifras de cabecera: recuentos verificables, nunca agregados de importes */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--rule);
  background: var(--surface);
  margin-top: 2.25rem;
}

.metric-card { padding: 1.15rem 1.4rem; border-right: 1px solid var(--rule); }
.metric-card:last-child { border-right: 0; }

.metric-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.metric-card.is-condena .metric-value { color: var(--condena-fg); }
.metric-card.is-archivo .metric-value { color: var(--archivo-fg); }

.metric-title { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }

/* =========================================================
   Cómo leer este archivo
   ========================================================= */

.lectura-band { background: var(--paper-alt); border-bottom: 1px solid var(--rule); }

.lectura-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.75rem var(--gutter);
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 1.35rem;
}

.lectura-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; }

.lectura-grid h3 {
  font-family: var(--font-serif);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.55rem;
}

.lectura-grid p { font-size: 0.92rem; line-height: 1.65; color: var(--ink-soft); }

/* =========================================================
   Contenedor principal
   ========================================================= */

.sumario-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

/* =========================================================
   Radiografía por formación
   ========================================================= */

.dataviz-section { padding: 3rem 0 2.75rem; border-bottom: 1px solid var(--rule); }

.dataviz-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.dataviz-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.metric-switch { display: flex; border: 1px solid var(--rule-strong); flex-wrap: wrap; }

.metric-switch button {
  padding: 0.5rem 0.95rem;
  font-size: 0.82rem;
  background: var(--surface);
  color: var(--neutro-fg);
  border: 0;
  border-left: 1px solid var(--rule-strong);
  cursor: pointer;
}

.metric-switch button:first-child { border-left: 0; }
.metric-switch button:hover { background: var(--paper-alt); }
.metric-switch button.active { background: var(--ink); color: var(--paper); }

.chart-disclaimer {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 72ch;
  margin: 0 0 1.75rem;
}

.chart-rows { display: flex; flex-direction: column; gap: 0.7rem; }

/* La nota va pegada a la barra, no al borde de la página: el ancho de la
   pista se limita para que el ojo enlace cifra y explicación. */
.chart-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 24rem) auto;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 0.15rem 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.chart-row:hover .chart-row-name { color: var(--accent); }
.chart-row.is-active .chart-row-name { color: var(--accent); font-weight: 700; }

.chart-row-name { font-size: 0.88rem; font-weight: 600; text-align: right; }

.chart-row-track { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }

.chart-row-bar {
  height: 1.55rem;
  min-width: 2px;
  background: var(--party-ink, var(--party, var(--rule-strong)));
  transition: width 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.chart-row-value { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; }

.chart-row-note { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

.chart-tail { font-size: 0.85rem; color: var(--muted); padding-top: 0.5rem; line-height: 1.6; }

/* =========================================================
   Buscador y filtros
   ========================================================= */

.controls-panel { padding: 2.25rem 0 1.5rem; }

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: 0 1.1rem;
  margin-bottom: 1.25rem;
}

.search-icon { color: var(--muted-soft); flex-shrink: 0; }

.search-input {
  flex: 1;
  border: 0;
  background: none;
  padding: 0.9rem 0;
  font-size: 1rem;
  outline: none;
  min-width: 0;
}

.search-input::placeholder { color: var(--muted-soft); }

.filters-group { display: flex; flex-direction: column; gap: 0.85rem; }

.filter-row { display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap; }

.filter-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-soft);
  flex-shrink: 0;
  padding-top: 0.4rem;
}

.filter-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  font-size: 0.83rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.chip-btn:hover { background: var(--paper-alt); }
.chip-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-btn.active .party-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }

.party-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  background: var(--party-ink, var(--party, var(--muted)));
}

.filter-selects { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.select-control {
  padding: 0.42rem 0.7rem;
  font-size: 0.83rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  cursor: pointer;
}

/* =========================================================
   Vistas
   ========================================================= */

.view-modes-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
}

.view-tabs { display: flex; border: 1px solid var(--rule-strong); flex-wrap: wrap; }

.view-tab-btn {
  padding: 0.55rem 1.05rem;
  font-size: 0.86rem;
  background: var(--surface);
  border: 0;
  border-left: 1px solid var(--rule-strong);
  color: var(--neutro-fg);
  cursor: pointer;
}

.view-tab-btn:first-child { border-left: 0; }
.view-tab-btn:hover { background: var(--paper-alt); }
.view-tab-btn.active { background: var(--paper-alt); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }

.cases-count-badge { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }

.view-container { padding: 1.5rem 0 3.5rem; }

/* =========================================================
   Fichas de la portada
   ========================================================= */

.cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.25rem; }

.case-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--party-ink, var(--party, var(--rule-strong)));
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  animation: card-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.case-card:hover { border-color: var(--rule-strong); }

@keyframes card-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-card { animation: none; }
  .chart-row-bar { transition: none; }
}

.case-card-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--neutro-fg);
  margin-bottom: 0.85rem;
}

.case-card-kicker .sep { color: var(--rule-strong); }
.case-card-kicker .spacer { flex: 1; }

.case-card-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.24;
  margin-bottom: 0.55rem;
}

.case-card-title a { color: var(--ink); }
.case-card-title a:hover { color: var(--accent); }

.case-card-summary { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 1rem; }

.case-card-foot {
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.case-personas { font-size: 0.85rem; color: var(--ink-soft); }
.case-personas strong { font-weight: 600; }
.case-personas .n-firme { color: var(--condena-fg); font-weight: 600; }
.case-personas .n-archivo { color: var(--archivo-fg); font-weight: 600; }

.case-nota-inocencia {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--aviso-fg);
}

.case-fuente-line { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-soft); }

.empty-state {
  grid-column: 1 / -1;
  padding: 4rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--rule-strong);
  background: var(--surface);
}

.empty-state p { color: var(--muted); }
.empty-state p:first-child { font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); margin-bottom: 0.4rem; }

/* =========================================================
   Distintivos
   ========================================================= */

.case-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }

.badge-party {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  background: var(--neutro-bg);
  border: 1px solid var(--neutro-border);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* El color de identidad va en el punto, no en el fondo: el texto debe
   mantener contraste con formaciones de color claro (CC, ERC, Vox). */
.badge-party::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--party-ink, var(--party, currentColor));
  flex-shrink: 0;
}

.badge-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  background: var(--neutro-bg);
  border: 1px solid var(--neutro-border);
  color: var(--neutro-fg);
  white-space: nowrap;
}

.badge-status.firme,
.badge-status.indultado { background: var(--condena-bg); border-color: var(--condena-border); color: var(--condena-fg); }

.badge-status.investigado,
.badge-status.procesado,
.badge-status.acusado,
.badge-status.juicio,
.badge-status.condena-no-firme { background: var(--vivo-bg); border-color: var(--vivo-border); color: var(--vivo-fg); }

.badge-status.absuelto,
.badge-status.archivado,
.badge-status.prescrito,
.badge-status.extinguida { background: var(--archivo-bg); border-color: var(--archivo-border); color: var(--archivo-fg); }

.badge-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  color: var(--muted);
  white-space: nowrap;
}

/* Estado de verificación documental (ver EL_SUMARIO.md § 3.6) */
.badge-verif {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border: 1px solid;
  white-space: nowrap;
}

.badge-verif.verificado { background: var(--archivo-bg); border-color: var(--archivo-border); color: var(--archivo-fg); }
.badge-verif.pendiente { background: var(--aviso-bg); border-color: var(--aviso-border); color: var(--aviso-fg); }

/* =========================================================
   Cronología (portada)
   ========================================================= */

.decade-block { margin-bottom: 2.75rem; }

.decade-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

.decade-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; }

.timeline-items-list { display: flex; flex-direction: column; }

.timeline-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

.timeline-row-main { flex: 1; min-width: 16rem; }

.timeline-row-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-block;
  margin: 0.35rem 0 0.2rem;
}

.timeline-row-title:hover { color: var(--accent); }

.timeline-row p { font-size: 0.87rem; color: var(--ink-soft); }

/* =========================================================
   Tablas
   ========================================================= */

.data-table-wrapper { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }

.sumario-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }

/* Por debajo de este ancho las columnas se estrechan tanto que los nombres
   se parten palabra a palabra; es preferible que el contenedor haga scroll. */
.data-table-wrapper .sumario-table { min-width: 48rem; }

.sumario-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 500;
  padding: 0.85rem 0.9rem;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

.sumario-table td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.sumario-table tbody tr:nth-child(even) { background: var(--surface-alt); }
.sumario-table tbody tr:hover { background: var(--paper-alt); }
.sumario-table td strong { font-weight: 600; }

.cell-cause { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; }

.cell-num { font-family: var(--font-mono); color: var(--muted-soft); }

/* =========================================================
   Fichas de caso y metodología
   ========================================================= */

.dossier-container { max-width: 68rem; margin: 0 auto; padding: 2.5rem var(--gutter) 4rem; }

.dossier-header { border-bottom: 1px solid var(--rule); padding-bottom: 1.75rem; margin-bottom: 2.25rem; }

.dossier-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.85rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.9rem 0 0.6rem;
}

.dossier-section { margin-bottom: 2.5rem; }

.dossier-section-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 1.1rem;
}

.dossier-prose { font-size: 1.02rem; line-height: 1.75; color: var(--ink-prose); }
.dossier-prose p { margin-bottom: 1rem; max-width: 68ch; }
.dossier-prose ul, .dossier-prose ol { margin: 0 0 1rem 1.15rem; }
.dossier-prose li { margin-bottom: 0.5rem; max-width: 66ch; }

.ficha-tecnica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.ficha-tecnica > div { background: var(--surface); padding: 0.9rem 1.1rem; }

.meta-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 0.3rem;
}

.meta-val { font-size: 0.92rem; color: var(--ink-soft); }

/* Aviso de presunción de inocencia en fichas de causas vivas */
.aviso-inocencia {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-border);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--aviso-prose);
  margin-bottom: 2rem;
}

.aviso-inocencia svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--aviso-fg); }

.nota-importes {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 0.75rem;
  max-width: 68ch;
}

.timeline { border-left: 1px solid var(--rule-strong); padding-left: 1.35rem; margin-left: 0.35rem; }

.timeline-item { position: relative; padding-bottom: 1.35rem; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.72rem;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--ink);
}

.timeline-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-bottom: 0.2rem; }

.timeline-text { font-size: 0.95rem; line-height: 1.6; color: var(--ink-prose); max-width: 62ch; }

.fuentes-list { list-style: none; }

.fuentes-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.fuentes-list li:last-child { border-bottom: 0; }

.fuente-meta { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }

.fuente-aviso { font-size: 0.82rem; color: var(--aviso-fg); margin-top: 0.2rem; }

/* =========================================================
   Pie
   ========================================================= */

.sumario-footer { border-top: 1px solid var(--rule); background: var(--paper-alt); margin-top: 2rem; }

.footer-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.75rem var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

.footer-col h4 { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 600; margin-bottom: 0.6rem; }

.footer-col p { font-size: 0.88rem; line-height: 1.65; color: var(--ink-soft); max-width: 54ch; }


/* =========================================================
   Índice de personas
   ========================================================= */

.personas-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 1.25rem;
  padding: 1.5rem 0 3.5rem;
}

.persona-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1.35rem 1.4rem;
  animation: card-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .persona-card { animation: none; }
}

.persona-cab { border-bottom: 1px solid var(--rule); padding-bottom: 0.8rem; margin-bottom: 0.85rem; }

.persona-nombre {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.55rem;
}

.persona-aviso {
  font-size: 0.82rem;
  color: var(--aviso-prose);
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-border);
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.85rem;
}

.apariciones { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }

.aparicion { border-left: 2px solid var(--rule-strong); padding-left: 0.85rem; }

.aparicion-cab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.aparicion-cab a { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--ink); }
.aparicion-cab a:hover { color: var(--accent); }

.aparicion-anios { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted-soft); }

.aparicion-cargo { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }

.aparicion-delitos { font-size: 0.83rem; color: var(--muted); line-height: 1.5; margin-top: 0.25rem; }

.aparicion-pena { font-size: 0.83rem; color: var(--ink-soft); margin-top: 0.25rem; font-weight: 500; }

@media (max-width: 560px) {
  .personas-lista { grid-template-columns: 1fr; }
}

/* Trayectorias y secciones dentro de una ficha de persona o de sociedad.
   Las causas y la trayectoria van en secciones separadas a propósito: es la
   diferencia entre documentar un circuito y acusar por vecindad. */

.persona-seccion { margin-top: 1rem; }

.persona-seccion-tit {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 0.6rem;
}

.persona-seccion.es-privado {
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}

.persona-sin-causa {
  font-size: 0.86rem;
  color: var(--archivo-fg);
  background: var(--archivo-bg);
  border: 1px solid var(--archivo-border);
  padding: 0.45rem 0.65rem;
  margin-top: 0.5rem;
}

.trayectoria { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }

.trayectoria li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.tray-anios {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted-soft);
  padding-top: 0.1rem;
}

.tray-cargo { color: var(--ink-soft); font-weight: 500; }
.tray-donde { grid-column: 2; color: var(--muted); font-size: 0.82rem; }

.tray-nota {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 0.6rem;
  font-style: italic;
}

@media (max-width: 560px) {
  .trayectoria li { grid-template-columns: 1fr; }
  .tray-donde { grid-column: 1; }
}

/* =========================================================
   Tema oscuro
   -----------------------------------------------------------------
   Mismo sistema, otra tinta: papel de carbón cálido, no azulado, para
   que siga leyéndose como la misma publicación. Los tokens semánticos
   conservan su significado (oxblood = condena firme, azul = causa viva,
   verde = exoneración, ámbar = aviso), sólo suben de luminosidad.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1917;
    --paper-alt: #221f1c;
    --surface: #201e1b;
    --surface-alt: #262320;

    --rule: #35322d;
    --rule-strong: #4d4941;

    --ink: #f4f1e9;
    --ink-prose: #ddd8cc;
    --ink-soft: #c6c0b3;
    --muted: #9b958a;
    --muted-soft: #837d73;

    --accent: #74bcbe;
    --accent-hover: #9ad3d4;

    --condena-fg: #e9917c;
    --condena-bg: #2f1b16;
    --condena-border: #5d3428;

    --vivo-fg: #8dbde9;
    --vivo-bg: #15202d;
    --vivo-border: #2b4359;

    --archivo-fg: #7ac89b;
    --archivo-bg: #142520;
    --archivo-border: #2a4a3a;

    --aviso-fg: #ddb763;
    --aviso-bg: #2b2413;
    --aviso-border: #524324;
    --aviso-prose: #e0c07a;

    --neutro-fg: #a49d92;
    --neutro-bg: #272420;
    --neutro-border: #423e37;
  }
}

:root[data-theme="dark"] {
  --paper: #1a1917;
  --paper-alt: #221f1c;
  --surface: #201e1b;
  --surface-alt: #262320;

  --rule: #35322d;
  --rule-strong: #4d4941;

  --ink: #f4f1e9;
  --ink-prose: #ddd8cc;
  --ink-soft: #c6c0b3;
  --muted: #9b958a;
  --muted-soft: #837d73;

  --accent: #74bcbe;
  --accent-hover: #9ad3d4;

  --condena-fg: #e9917c;
  --condena-bg: #2f1b16;
  --condena-border: #5d3428;

  --vivo-fg: #8dbde9;
  --vivo-bg: #15202d;
  --vivo-border: #2b4359;

  --archivo-fg: #7ac89b;
  --archivo-bg: #142520;
  --archivo-border: #2a4a3a;

  --aviso-fg: #ddb763;
  --aviso-bg: #2b2413;
  --aviso-border: #524324;
  --aviso-prose: #e0c07a;

  --neutro-fg: #a49d92;
  --neutro-bg: #272420;
  --neutro-border: #423e37;
}

/* -----------------------------------------------------------------
   Colores de partido
   -----------------------------------------------------------------
   Son colores de identidad y no se pueden cambiar sin volver ilegible
   el gráfico para un lector español, pero varios son muy oscuros (GIL
   #2C3E50, UM #1B4D3E, AP #0A4A82) y sobre carbón desaparecen. En tema
   oscuro se aclaran manteniendo el tono; el `var(--party)` de reserva
   deja el color crudo si el navegador no soporta color-mix.
   ----------------------------------------------------------------- */

:is(.chart-row, .chip-btn, .badge-party, .case-card) { --party-ink: var(--party); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.chart-row, .chip-btn, .badge-party, .case-card) {
    --party-ink: color-mix(in oklab, var(--party) 66%, #fdfbf5);
  }
}

:root[data-theme="dark"] :is(.chart-row, .chip-btn, .badge-party, .case-card) {
  --party-ink: color-mix(in oklab, var(--party) 66%, #fdfbf5);
}

/* -----------------------------------------------------------------
   Conmutador de tema
   ----------------------------------------------------------------- */

.tema-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  background: none;
  border: 1px solid var(--rule);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
}

.tema-toggle:hover { color: var(--ink); border-color: var(--rule-strong); }
.tema-toggle svg { flex-shrink: 0; }
.tema-toggle .icono-sol { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-toggle .icono-luna { display: none; }
  :root:not([data-theme="light"]) .tema-toggle .icono-sol { display: block; }
}

:root[data-theme="dark"] .tema-toggle .icono-luna { display: none; }
:root[data-theme="dark"] .tema-toggle .icono-sol { display: block; }
:root[data-theme="light"] .tema-toggle .icono-luna { display: block; }
:root[data-theme="light"] .tema-toggle .icono-sol { display: none; }

/* -----------------------------------------------------------------
   Formaciones sin ninguna causa en el archivo
   ----------------------------------------------------------------- */

.chart-tail p { margin-bottom: 0.55rem; }
.chart-tail p:last-child { margin-bottom: 0; }

.chart-ausentes {
  border-left: 3px solid var(--aviso-border);
  background: var(--aviso-bg);
  color: var(--aviso-prose);
  padding: 0.7rem 0.95rem;
  max-width: 78ch;
}

.chart-ausentes strong { color: var(--aviso-fg); font-weight: 600; }
.chart-ausentes a { color: inherit; border-bottom: 1px solid currentColor; }

/* =========================================================
   Adaptación a pantallas estrechas
   ========================================================= */

@media (max-width: 900px) {
  :root { --gutter: 1.5rem; }

  .metric-card { border-right: 0; border-bottom: 1px solid var(--rule); }
  .metric-card:last-child { border-bottom: 0; }

  .chart-row { grid-template-columns: 5.5rem minmax(0, 1fr); row-gap: 0.25rem; }
  .chart-row-note { grid-column: 2; white-space: normal; }

  .view-modes-nav { align-items: flex-start; }
  .view-tabs { width: 100%; }
  .view-tab-btn { flex: 1; }

  .filter-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .filter-label { padding-top: 0; }
}

@media (max-width: 560px) {
  .cases-grid { grid-template-columns: 1fr; }
  .sumario-hero { padding: 2.5rem var(--gutter) 2rem; }
}

@media print {
  body { background: #fff; }
  .controls-panel, .view-modes-nav, .metric-switch { display: none; }
}