/* =====================================================================
   Plataforma de infraestructura de crédito — Volcom

   Sobrio y claro. Azul institucional sobre blanco, tipografía de sistema,
   nada decorativo. Las decisiones se toman leyendo tablas y fichas densas
   durante horas: lo que importa es que se lea rápido y no que llame la
   atención.

   Fondo claro siempre. No hay modo oscuro a propósito: la aplicación se
   usa junto a planillas y expedientes en papel, y cambiar de fondo entre
   ventanas cansa más de lo que ayuda.

   Dos cosas que se conservan de la iteración anterior porque eran
   arreglos y no estilo: las cifras van en cifras tabulares, y ningún
   conteo se escribe a mano —ni columnas de grilla, ni número de etapas—.
   ===================================================================== */

:root {
  --navy:      #173a73;
  --navy-2:    #0f2c59;
  --ink:       #243247;
  --muted:     #6c7889;
  --faint:     #8b98aa;
  --line:      #dce2ea;
  --line-2:    #cbd3df;
  --surface:   #ffffff;
  --surface-2: #f8f9fb;
  --canvas:    #f4f6f9;

  --green: #137a58;  --green-bg: #e8f5ef;
  --amber: #a2610a;  --amber-bg: #fff4dd;
  --red:   #b13a34;  --red-bg:   #fdecea;
  --blue-bg: #eaf1fb;
  --neutral: #59677a; --neutral-bg: #edf0f4;
  --violet: #66518c; --violet-bg: #f1eef8;

  --r-sm: 7px;
  --r:    10px;
  --r-lg: 14px;

  /* Alto de la barra superior. Token porque lo usan la barra y el
     `scroll-margin-top` de las anclas del recorrido. */
  --topbar-h: 60px;

  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
strong, td, th, dd { font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; color: var(--navy-2); }
h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-2); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--r-sm); }

/* --- Cáscara ----------------------------------------------------------- */

.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
/* Sin sesión no se dibuja el sidebar, así que la grilla no puede seguir
   reservándole su columna: el contenido se apretaba en lo que sobraba. */
.app-shell.is-anon { grid-template-columns: 1fr; }
/* Plegado, el panel se encoge a una franja y le devuelve 200px a la tabla. La
   de mora dura tiene once columnas y en un portátil no cabe.

   Se encoge y no desaparece porque la flecha vive adentro: escondiendo el panel
   entero, el único modo de traerlo de vuelta se iría con él. */
.menu-plegado .app-shell { grid-template-columns: 44px minmax(0, 1fr); }
.menu-plegado .side-nav { padding-left: 0; padding-right: 0; overflow: hidden; }
/* Queda la flecha y nada más: los enlaces no se recortan a la mitad, se van. */
.menu-plegado .side-nav > *:not(.brand-row),
.menu-plegado .brand { display: none; }
.menu-plegado .brand-row { justify-content: center; padding: 0; border-bottom: 0; }

.app-main { min-width: 0; display: flex; flex-direction: column; }

/* La fila de la marca: el logo a la izquierda y la flecha pegada al borde
   derecho del panel, que es donde uno va a buscarla para cerrarlo. */
.brand-row { display: flex; align-items: flex-start; gap: 8px; }
.brand-row .brand { flex: 1; min-width: 0; }

/* Una flecha, no un botón: lo que se pide acá es esconder un panel, y una caja
   con borde pesa más que la acción que representa. */
.menu-toggle {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  margin: 2px 12px 0 0; padding: 0;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  transition: color .15s, transform .15s;
}
.menu-toggle:hover { color: var(--navy); }
/* Plegado apunta al otro lado: la misma flecha dice «lo escondí» y «acá vuelve». */
.menu-plegado .menu-toggle { transform: rotate(180deg); }
/* El atributo `hidden` lo pierde contra `display: grid`, que tiene más peso:
   sin esto el botón se vería igual sin JavaScript, que es justo lo que no
   queremos. */
.menu-toggle[hidden] { display: none; }

.side-nav {
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 18px 0 28px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 18px 16px; color: var(--ink); border-bottom: 1px solid var(--line); }
.brand-mark { width: 36px; height: 36px; flex: none; border-radius: var(--r); background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: .04em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; font-weight: 700; }
.brand small { color: var(--muted); font-size: 12px; }

.nav-single { display: block; padding: 0 18px; color: var(--muted); font-size: 13px; }
.nav-single:hover { color: var(--navy); }
.nav-single.active { color: var(--navy); font-weight: 700; }
.nav-section { margin: 0; padding: 0 18px; color: var(--muted); font-size: 12px; font-weight: 700; }
.nav-items { display: flex; flex-direction: column; }
.nav-items a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 18px; color: var(--ink); font-size: 14px;
  border-left: 3px solid transparent;
}
.nav-items a:hover { background: var(--surface-2); }
.nav-items a.active { border-left-color: var(--navy); background: var(--blue-bg); color: var(--navy); font-weight: 700; }
.nav-state { color: var(--muted); font-size: 11px; white-space: nowrap; }

.topbar {
  height: var(--topbar-h); padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.global-search { flex: 1; max-width: 440px; }
.global-search input { width: 100%; }
.alert-bell { display: inline-flex; align-items: center; color: var(--muted); padding: 7px; border-radius: var(--r-sm); }
.alert-bell:hover { color: var(--navy); background: var(--surface-2); }

.page-shell { width: min(1440px, 100%); margin: 0 auto; padding: 28px 26px 64px; }

/* --- Encabezados -------------------------------------------------------- */

.hero, .page-heading { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; margin-bottom: 22px; }
.hero h1, .page-heading h1 { margin: 5px 0 7px; }
.hero p, .page-heading p { margin: 0; max-width: 72ch; color: var(--muted); }
.eyebrow { display: block; text-transform: uppercase; color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.heading-actions { display: flex; gap: 10px; align-items: center; }

/* --- Métricas ----------------------------------------------------------- */

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; }
.metric { min-height: 118px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.metric span { color: var(--muted); font-size: 13px; font-weight: 600; }
.metric strong { font-size: 32px; color: var(--navy-2); line-height: 1.05; font-weight: 700; }
.metric small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.metric .text-value { font-size: 19px; line-height: 1.25; }
.metric.success { border-top: 3px solid var(--green); }
.metric.warning { border-top: 3px solid var(--amber); }
.metric.danger  { border-top: 3px solid var(--red); }
.metric.target  { border-top: 3px solid var(--navy); background: var(--blue-bg); }
.metric.neutral { border-top: 3px solid var(--faint); }

/* --- Paneles ------------------------------------------------------------ */

.two-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; margin-bottom: 18px; }
.three-column { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; margin-bottom: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin-bottom: 18px; }
.panel h2 { margin: 3px 0 16px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.panel-heading > a { font-weight: 700; font-size: 14px; }
.field-note { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* --- Sellos -------------------------------------------------------------- */

.severity, .status-pill {
  display: inline-flex; width: fit-content; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--blue-bg); color: var(--navy);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.status-pill.large { padding: 7px 12px; font-size: 11px; }
.severity-error, .severity-blocking, .severity-critical { background: var(--red-bg); color: var(--red); }
.severity-warning, .status-pill.warning { background: var(--amber-bg); color: var(--amber); }
.severity-info, .status-pill.neutral { background: var(--neutral-bg); color: var(--neutral); }
.status-pill.success { background: var(--green-bg); color: var(--green); }
.status-open, .status-requested { background: var(--amber-bg); color: var(--amber); }
.status-received, .status-in_review { background: var(--blue-bg); color: var(--navy); }
.status-resolved, .status-verified { background: var(--green-bg); color: var(--green); }
.status-accepted, .status-rejected, .status-expired { background: var(--neutral-bg); color: var(--neutral); }
.priority { display: inline-flex; width: fit-content; min-width: 36px; justify-content: center; padding: 4px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 700; }
.priority-p0 { background: var(--red-bg); color: var(--red); }
.priority-p1 { background: var(--amber-bg); color: var(--amber); }
.priority-p2 { background: var(--neutral-bg); color: var(--neutral); }
.readiness-con_faltantes { background: var(--red-bg); color: var(--red); }
.readiness-requiere_revision { background: var(--amber-bg); color: var(--amber); }
.readiness-preparada_para_revision { background: var(--green-bg); color: var(--green); }
.badge-stack { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* --- Listas -------------------------------------------------------------- */

.issue-list, .operation-list, .lineage-list { display: grid; }
.issue-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.issue-row small, .operation-list small, .lineage-list small { display: block; color: var(--muted); font-size: 13px; }
.operation-list a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink); }
.operation-list a:hover { background: var(--surface-2); }
.record-list > div { padding: 11px 0; border-top: 1px solid var(--line); }

/* --- Controles ----------------------------------------------------------- */

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 16px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.filter-bar label, .form-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.filter-bar label.check { display: flex; flex-direction: row; align-items: center; gap: 7px; min-height: 38px; }
input, select, textarea, button {
  min-height: 38px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 7px 10px; background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: 14px;
}
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
button, .button-link {
  background: var(--navy); color: #fff; border-color: var(--navy);
  padding-inline: 18px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .button-link:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.clear, .inline-action { min-height: 38px; display: inline-flex; align-items: center; padding: 0 8px; font-weight: 700; font-size: 14px; }
.compact-button { min-height: 30px; padding: 4px 10px; font-size: 13px; }

/* --- Tablas -------------------------------------------------------------- */

/* La tabla se desplaza dentro de su panel; la página nunca se corre de lado.
   No hay cabecera pegajosa: se probó, y para que funcione a nivel de página la
   tabla no puede tener su propio desplazamiento, lo que obligaba a que la
   página entera se corriera en horizontal. Entre las dos, se prefiere que la
   página quede quieta. */
.table-panel { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th {
  text-align: left; color: var(--muted); background: var(--surface-2);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
th, td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { border-bottom-color: var(--line-2); }
tbody tr:hover td { background: var(--surface-2); }
td small { display: block; color: var(--muted); font-size: 13px; }
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; color: var(--muted); font-size: 13px; }
.pagination div { display: flex; gap: 14px; }

/* Números de página, no solo «anterior/siguiente»: con once páginas, llegar a
   la séptima costaba seis clics. */
.pagination-range { font-variant-numeric: tabular-nums; }
.pagination-pages { display: flex; align-items: center; gap: 4px; }

.pagination-page, .pagination-step {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 7px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

a.pagination-page:hover, a.pagination-step:hover,
a.pagination-page:focus-visible, a.pagination-step:focus-visible { border-color: var(--line-2); }

.pagination-page.is-current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* El extremo de la lista deja el control en su sitio, apagado: quitarlo mueve
   los números de lugar justo cuando se está haciendo clic en ellos. */
.pagination-step.is-off { color: var(--line-2); }
.pagination-gap { padding: 0 2px; color: var(--muted); }
.compact-table th, .compact-table td { padding: 8px 12px; font-size: 13px; }

/* --- Definiciones -------------------------------------------------------- */

.definition-list { margin: 0; display: grid; }
.definition-list div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; padding: 10px 0; border-top: 1px solid var(--line); }
.definition-list div:first-child { border-top: 0; }
.definition-list dt { color: var(--muted); font-size: 14px; }
.definition-list dd { margin: 0; font-weight: 700; text-align: right; font-size: 14px; }

/* --- Recorrido de la operación ------------------------------------------- */

.journey-overview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px 8px; margin-bottom: 18px; }
.journey-overview-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 16px; }
.journey-cutoff { text-align: right; font-size: 12px; color: var(--muted); }
.journey-cutoff strong { display: block; font-size: 15px; color: var(--ink); }
/* El número de etapas no se escribe acá: agregar una no debe pedir tocar el
   CSS. Se reparten las que haya y, si no caben, se desplaza. */
.journey-stage-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); gap: 8px; overflow-x: auto; padding: 2px 2px 14px; }
.journey-stage {
  min-height: 190px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 14px; border: 1px solid var(--line); border-top: 4px solid var(--faint);
  border-radius: var(--r); background: var(--surface); color: var(--ink); position: relative;
}
.journey-stage:hover { border-color: var(--line-2); background: var(--surface-2); }
.journey-stage-available { border-top-color: var(--green); }
.journey-stage-partial { border-top-color: var(--amber); }
.journey-stage-pending { border-top-color: var(--faint); }
.journey-stage-not-applicable { border-top-color: var(--violet); background: var(--surface-2); }
.journey-stage-sequence { position: absolute; top: 11px; right: 12px; color: var(--faint); font-size: 18px; font-weight: 700; }
.journey-stage > strong { max-width: 100%; min-height: 38px; color: var(--navy-2); font-size: 14px; font-weight: 700; line-height: 1.25; }
.journey-stage > span:not(.status-pill):not(.journey-stage-sequence) { color: var(--ink); font-size: 13px; line-height: 1.35; font-weight: 600; }
.journey-stage > small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.journey-status-available { background: var(--green-bg); color: var(--green); }
.journey-status-partial { background: var(--amber-bg); color: var(--amber); }
.journey-status-pending { background: var(--neutral-bg); color: var(--neutral); }
.journey-status-not-applicable { background: var(--violet-bg); color: var(--violet); }

/* Los grupos de etapa de la ficha: la pertenencia queda declarada acá y no
   se deduce del orden en que están escritas las secciones. */
.journey-group { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.panel-solo { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* --- Avisos y vacíos ------------------------------------------------------ */

.source-warning, .raw-warning, .support-warning, .payment-warning,
.schedule-warning, .reported-ledger-warning, .inline-alert {
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--amber-bg); border: 1px solid #e4c37d; border-radius: var(--r);
  color: var(--amber); font-size: 13px; line-height: 1.45;
}
.empty-state { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 48px; text-align: center; color: var(--muted); }
.compact-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); }
.message-stack { display: grid; gap: 8px; margin-bottom: 18px; }
.message { padding: 12px 14px; border: 1px solid #aad7c2; border-radius: var(--r); background: var(--green-bg); color: var(--green); font-weight: 700; font-size: 14px; }
.message.error { border-color: #efb3ae; background: var(--red-bg); color: var(--red); }
.message.warning { border-color: #e4c37d; background: var(--amber-bg); color: var(--amber); }
.field-error, .form-errors { color: var(--red); font-size: 12px; }
.muted { color: var(--muted); }

pre { white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; color: var(--ink); font-family: var(--mono); font-size: 13px; }
code { background: var(--neutral-bg); border-radius: var(--r-sm); padding: 2px 5px; font-family: var(--mono); font-size: .9em; }

.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.table-wrap { width: 100%; overflow-x: auto; }

/* --- Accesibilidad -------------------------------------------------------- */

.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; padding: 8px 14px; background: var(--navy); color: #fff; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; transition: top .15s ease; }
.skip-link:focus { top: 8px; color: #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .side-nav { position: static; height: auto; }
  .page-shell { padding: 20px 16px 52px; }
  /* Acá el menú ya va arriba y en una sola columna: plegarlo sigue sirviendo
     para sacarlo del paso, y el botón es la única forma de traerlo de vuelta. */
}


/* =====================================================================
   Reglas específicas de pantalla, conservadas del sistema anterior con sus
   nombres de clase intactos: ninguna de las 55 plantillas cambia.
   ===================================================================== */

nav { display: flex; gap: 26px; }
nav a { color: var(--muted); font-weight: 600; }
nav a:hover { color: var(--navy); }
.detail-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.comparison-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.action-copy { font-size: 22px; color: var(--navy-2); font-weight: 700; }
.lineage-list > div { padding: 12px 0; border-top: 1px solid var(--line); }
.lineage-list strong { display: inline-block; margin-left: 8px; }
.lineage-list p { margin: 7px 0 0; color: var(--muted); }
.queue-metrics { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.task-link { color: var(--ink); }
.form-grid { display: grid; gap: 14px; }
.form-grid textarea, .form-grid input, .form-grid select { width: 100%; }
.evidence-list { display: grid; gap: 10px; }
.evidence-list > div { border-top: 1px solid var(--line); padding-top: 12px; }
.evidence-list strong { margin-left: 8px; }
.evidence-list p { margin: 7px 0 2px; }
.evidence-list small { color: var(--muted); }
.evidence-form { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.evidence-form summary { color: var(--navy); font-weight: 700; cursor: pointer; margin-bottom: 14px; }
.financial-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.analysis-metrics { grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); }
.coverage-list { display: grid; }
.coverage-list > div { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(100px, 2fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.coverage-list > div:has(> span:first-child + strong:last-child) { grid-template-columns: 1fr auto; }
.coverage-bar { height: 8px; overflow: hidden; border-radius: 999px; background: #edf0f4; }
.coverage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--navy); }
.compact-list { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 0 24px; }
.button-link.secondary { background: white; color: var(--navy); border: 1px solid var(--line); }
.status-pill.danger { background: var(--red-bg); color: var(--red); }
.selection-metrics { grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); }
.compact-form { grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr) auto; align-items: end; }
.record-list { display: grid; gap: 14px; }
.source-record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.source-record-grid details { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.source-record-grid summary, details > summary { cursor: pointer; color: var(--navy); font-weight: 700; }
.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 0 0 22px; }
.timeline-marker { position: relative; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--navy); }
.timeline-marker::after { content: ""; position: absolute; top: 12px; left: 5px; width: 2px; height: calc(100% + 22px); background: var(--line); }
.timeline-item:last-child .timeline-marker::after { display: none; }
.timeline-item p { margin: 7px 0; }
.timeline-item small { color: var(--muted); }
.action-menu, .bulk-action { position: relative; }
.action-menu > summary, .bulk-action > summary { list-style: none; cursor: pointer; }
.action-menu > summary::-webkit-details-marker, .bulk-action > summary::-webkit-details-marker { display: none; }
.action-popover { position: absolute; z-index: 8; top: calc(100% + 10px); right: 0; width: 360px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 50px rgba(15, 44, 89, .16); }
.action-popover small { color: var(--muted); }
.registration-metrics { grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); }
.registration-metrics .metric { min-height: 132px; }
.registration-filters label:first-child { min-width: 220px; flex: 1; }
.registration-workspace { display: grid; gap: 12px; }
.bulk-toolbar { min-height: 76px; display: flex; align-items: center; gap: 18px; padding: 14px 16px; border: 1px solid #cbd8e9; border-radius: 12px; background: #eef3fa; }
.bulk-toolbar > div:first-child { display: grid; margin-right: auto; }
.bulk-toolbar small { color: var(--muted); }
.bulk-toolbar label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.bulk-form-grid { position: absolute; z-index: 7; top: calc(100% + 10px); right: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; width: min(760px, 85vw); padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 50px rgba(15, 44, 89, .18); }
.bulk-form-grid label { display: grid; gap: 5px; }
.bulk-form-grid textarea, .bulk-form-grid input, .bulk-form-grid select { width: 100%; }
.bulk-form-grid button { align-self: end; }
.registration-table-panel { margin-bottom: 0; }
.registration-table { min-width: 1240px; }
/* Con ocho columnas, «rol y tribunal» se estrangula y la fila crece a tres
   líneas. Ancho mínimo y el panel hace scroll, como el resto de las tablas
   anchas. */
/* La escalera como una sola pieza, en dos pisos. Once etapas en una fila las
   deja de 100px y las etiquetas caen en tres líneas; repartidas en dos pisos
   cada una tiene aire y el bloque sigue leyéndose como una secuencia.

   Las líneas interiores son el `gap` de la grilla sobre un fondo gris: cada
   celda pinta su blanco encima y lo que queda entre ellas es la línea. Hubo una
   versión con `box-shadow` a la izquierda y arriba de cada celda; se pisaban
   entre sí y las líneas salían partidas. Así siempre están completas, sin
   depender de cuántas filas o columnas arme la cartera. */
.stage-ladder {
  display: grid;
  grid-template-columns: repeat(var(--ladder-cols, 6), minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: var(--line);
  overflow: hidden;
}

.stage-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  background: #fff;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.stage-step span { display: block; }
.stage-step b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.stage-step:hover, .stage-step:focus-visible { background: var(--neutral-bg); color: var(--ink); }

.stage-step.is-active { background: var(--navy); color: #fff; }
.stage-step.is-active b { color: #fff; }
.stage-step.is-active:hover { background: var(--navy); color: #fff; }

/* Vacía bajo el filtro vigente. Se queda en su sitio apagada: que desaparezca
   movería a las demás de lugar, y «no queda ninguna acá» es una respuesta. */
.stage-step.is-empty { opacity: .4; }

/* Cierra el último piso cuando las etapas no llenan la fila. Sin ella el hueco
   deja ver el fondo gris que dibuja las líneas. */
.stage-filler { background: #fff; }

/* En pantalla angosta el reparto en mitades deja celdas de 90px: ahí manda el
   ancho mínimo y salen las filas que salgan. */
@media (max-width: 900px) {
  .stage-ladder { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
}

/* El contador vive sobre la tabla que cuenta. Colgado del final de la fila de
   filtros se iba solo a una segunda línea y quedaba flotando. */
.table-toolbar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.table-toolbar .filter-count b { color: var(--ink); font-weight: 700; }

/* La nota de la etapa vive en la misma franja que el conteo: las dos hablan
   del filtro puesto, y en franjas separadas la tabla saltaba de lugar cada vez
   que la nota aparecía o se iba. */
.toolbar-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toolbar-note::before { content: "·"; margin-right: 10px; }

/* El conteo va primero —es lo que se lee— y la acción al extremo. El
   `margin-left:auto` que traía `.filter-count` de la barra vieja lo dejaba al
   medio, empujado contra el enlace. */
.table-toolbar .filter-count { margin-left: 0; }
/* «Quitar filtros» y la descarga se van juntos al extremo derecho: el primero
   que aparezca empuja, y el otro queda a su lado sin saltar de lugar según cuál
   de los dos esté visible. */
.table-toolbar .filter-clear { margin-left: auto; }
.table-toolbar .filter-clear + .toolbar-export { margin-left: 0; }
.toolbar-export {
  margin-left: auto;
  font-weight: 600; color: var(--navy); text-decoration: none;
  white-space: nowrap;
}
.toolbar-export:hover, .toolbar-export:focus-visible { text-decoration: underline; }

/* Un encabezado que ordena tiene que verse como algo en lo que se hace clic,
   sin dejar de leerse como encabezado: hereda el estilo del `th` y solo se
   subraya al pasar por encima. */
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover, .sort-link:focus-visible { text-decoration: underline; }
.sort-link.is-sorted { color: var(--navy); }

/* «+3»: hay más causas detrás de la que muestra la fila. Discreto, porque no
   es un dato que se lea, es un aviso de que hay más. */
.role-more {
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--neutral-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

/* Ocho columnas de triaje entran sin scroll; las dos que sobraban —rol y
   tribunal, y «qué falta»— se fueron a la ficha, que sí puede sostenerlas. */
.pipeline-table { min-width: 1080px; }
/* El nombre del deudor es lo que hace reconocible la fila. Sin ancho mínimo la
   columna nueva se lo come y «SANCHEZ CAMPOS FERNANDO PEDRO» cae en cuatro
   líneas, que triplica el alto de la fila. */
.pipeline-table .debtor-cell { min-width: 11rem; }
.registration-table th, .registration-table td { padding: 12px 11px; }
.registration-table tbody tr:hover { background: #f8fafd; }
.registration-table th:first-child, .registration-table td:first-child { width: 44px; padding-right: 0; }
.registration-table input[type="checkbox"] { min-height: 0; width: 16px; height: 16px; padding: 0; }
.operation-key { color: var(--navy-2); font-weight: 800; }
.row-arrow { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-size: 18px; }
.attention-copy { color: var(--amber); max-width: 220px; }
.empty-table { padding: 34px; text-align: center; color: var(--muted); }

.milestone-no_information { background: #edf0f4; color: #59677a; }
.milestone-pending { background: var(--blue-bg); color: var(--navy); }
.milestone-in_progress { background: #e5f1ff; color: #0d5ea8; }
.milestone-completed, .result-applied { background: var(--green-bg); color: var(--green); }
.milestone-observed, .result-unchanged { background: var(--amber-bg); color: var(--amber); }
.milestone-blocked, .result-rejected { background: var(--red-bg); color: var(--red); }
.milestone-not_applicable { background: #f1eef8; color: #66518c; }
.run-completed { background: var(--green-bg); color: var(--green); }
.run-partial { background: var(--amber-bg); color: var(--amber); }
.run-failed { background: var(--red-bg); color: var(--red); }
.registration-detail { padding: 26px; }
.registration-detail-heading { align-items: center; }
.registration-detail-heading h2 { margin-bottom: 3px; }
.registration-detail-heading p { margin: 0; }
.registration-current { min-width: 210px; padding: 14px 16px; border-left: 4px solid var(--navy); border-radius: 8px; background: var(--blue-bg); display: grid; }
.registration-current small, .registration-current span { color: var(--muted); }
.registration-current strong { color: var(--navy-2); font-size: 18px; }
.milestone-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; overflow-x: auto; padding: 8px 2px 18px; }
.milestone-card { position: relative; min-height: 290px; padding: 16px 14px 14px 20px; border: 1px solid var(--line); border-top: 4px solid #a8b2c0; border-radius: 10px; background: #fbfcfd; }
.milestone-card-completed { border-top-color: var(--green); }
.milestone-card-in_progress, .milestone-card-pending { border-top-color: var(--navy); }
.milestone-card-observed { border-top-color: var(--amber); }
.milestone-card-blocked { border-top-color: var(--red); }
.milestone-sequence { position: absolute; top: 15px; right: 12px; color: #a1aaba; font-size: 20px; font-weight: 800; }
.milestone-card h3 { min-height: 42px; margin: 12px 0 10px; color: var(--navy-2); font-size: 16px; line-height: 1.25; }
.milestone-card dl { margin: 0; }
.milestone-card dl div { display: grid; gap: 1px; padding: 6px 0; border-top: 1px solid var(--line); }
.milestone-card dt { color: var(--muted); font-size: 11px; }
.milestone-card dd { margin: 0; font-weight: 700; }
.milestone-note { color: var(--muted); font-size: 12px; }
.milestone-documents { display: grid; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.milestone-documents a, .milestone-documents small { display: grid; color: var(--muted); font-size: 11px; }
.milestone-documents a strong { color: var(--navy); }
.registration-actions { margin: 4px 0 18px; }
.action-card { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd; }
.action-card > summary { cursor: pointer; color: var(--navy); font-weight: 800; }
.action-card[open] > summary { margin-bottom: 16px; }
.event-ledger { padding: 16px; border-top: 1px solid var(--line); }
.event-ledger > summary { cursor: pointer; color: var(--navy); font-weight: 800; }
.event-ledger .timeline { margin-top: 18px; }
.source-context-panel { border-left: 4px solid #8b98aa; }
.source-separation-note { margin: -8px 0 16px; padding: 9px 11px; border: 0; border-radius: 8px; background: #f1f3f6; }
.compact-empty h3 { margin: 0 0 5px; color: var(--navy-2); }
.compact-empty p { margin: 0; color: var(--muted); }
.suggestion-summary { display: flex; align-items: center; gap: 24px; margin: 0 0 20px; padding: 18px 20px; border: 1px solid #cbd8e9; border-left: 5px solid var(--navy); border-radius: 12px; background: white; color: var(--ink); }
.suggestion-summary > div:first-child { display: grid; margin-right: auto; }
.suggestion-summary small { color: var(--muted); }
.suggestion-summary-counts { display: flex; align-items: center; gap: 22px; }
.suggestion-summary-counts span { display: grid; color: var(--muted); font-size: 12px; }
.suggestion-summary-counts span strong { color: var(--navy-2); font-size: 20px; }
.suggestion-summary-counts b { color: var(--navy); }
.suggestion-metrics { grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); }
.table-caption { display: flex; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.table-caption small { color: var(--muted); }
.suggestion-table { min-width: 1180px; }
.suggestion-pending_review { background: var(--amber-bg); color: var(--amber); }
.suggestion-classification_required { background: #edf0f4; color: #59677a; }
.suggestion-approved { background: var(--green-bg); color: var(--green); }
.suggestion-corrected { background: var(--blue-bg); color: var(--navy); }
.suggestion-dismissed { background: #f1eef8; color: #66518c; }
.source-suggestion-section { margin: 22px 0 18px; padding-top: 20px; border-top: 1px solid var(--line); }
.source-suggestion-section h3 { margin: 4px 0 2px; color: var(--navy-2); }
.source-suggestion-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.suggestion-layer { padding: 18px; background: white; }
.suggestion-layer + .suggestion-layer { border-left: 1px solid var(--line); }
.source-layer { background: #f7f8fa; }
.proposal-layer { background: #f5f8fc; }
.decision-layer { background: #fbfcfd; }
.layer-label { color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.suggestion-layer h4 { margin: 8px 0 12px; color: var(--navy-2); font-size: 17px; }
.suggestion-layer dl { margin: 10px 0 0; }
.suggestion-layer dl div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.suggestion-layer dt { color: var(--muted); }
.suggestion-layer dd { margin: 0; font-weight: 700; text-align: right; }
.suggestion-review-form { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.payment-heading { align-items: center; }
.payment-warning .status-pill { margin-left: auto; }
.payment-metrics { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.payment-metrics .metric { min-height: 132px; }
.payment-buckets .panel-heading { align-items: center; }
.payment-buckets .panel-heading h2 { margin-bottom: 4px; }
.bucket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); gap: 10px; }
.bucket-card { min-height: 112px; display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd; color: var(--ink); }
.bucket-card span { color: var(--muted); font-weight: 700; }
.bucket-card strong { margin: auto 0 2px; color: var(--navy-2); font-size: 28px; }
.bucket-card small { color: var(--muted); }
.bucket-card:hover, .bucket-card.active { border-color: var(--navy); background: var(--blue-bg); }
.layer-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; }
.layer-status { min-height: 180px; padding: 20px; border: 1px solid var(--line); border-top: 4px solid #8995a6; border-radius: 12px; background: white; }
.layer-status.available { border-top-color: var(--green); }
.layer-status.pending { border-top-color: var(--amber); }
.layer-status h2 { margin: 7px 0 14px; color: var(--navy-2); font-size: 20px; }
.layer-status strong { display: block; color: var(--ink); }
.layer-status .layer-secondary-value { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.layer-status p { margin: 8px 0 0; color: var(--muted); }
.payment-filters label:first-child { min-width: 180px; flex: 1; }
.payment-table { min-width: 1480px; }
.payment-table tbody tr:hover { background: #f8fafd; }
.payment-table td { padding: 12px 11px; }
.suggestion-review-form > summary { cursor: pointer; color: var(--navy); font-weight: 800; }
.suggestion-review-form[open] > summary { margin-bottom: 14px; }
.journey-entry-panel { border-top: 4px solid var(--navy); }
.journey-entry-heading { align-items: flex-end; }
.journey-entry-heading h2 { margin-bottom: 4px; }
.journey-entry-heading p { margin: 0; }
.journey-search { min-width: min(420px, 100%); }
.journey-search label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.journey-search > div { display: flex; gap: 8px; }
.journey-search input { flex: 1; min-width: 150px; }
.journey-candidate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.journey-candidate { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; min-height: 88px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfd; color: var(--ink); }
.journey-candidate:hover, .journey-candidate:focus-visible { border-color: #9eb0ca; background: var(--blue-bg); outline: none; }
.journey-candidate > span:first-child, .journey-coverage { display: grid; }
.journey-candidate small { color: var(--muted); }
.journey-candidate > span:first-child strong { color: var(--navy-2); font-size: 19px; }
.journey-coverage { text-align: right; }
.journey-coverage b { color: var(--navy); font-size: 18px; }
.journey-overview-heading h2 { margin: 3px 0 4px; color: var(--navy-2); }
.journey-overview-heading p { margin: 0; color: var(--muted); }
.journey-cutoff small, .journey-cutoff span { color: var(--muted); }
.journey-stage-track a { color: var(--ink); }
.journey-stage:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.schedule-heading { align-items: center; }
.schedule-context-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1px; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.schedule-context-strip > div { min-height: 84px; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; background: white; }
.schedule-context-strip span, .schedule-context-strip small { color: var(--muted); font-size: 12px; }
.schedule-context-strip strong { color: var(--navy-2); font-size: 16px; }
.schedule-metrics { grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); }
.schedule-metrics .metric { min-height: 132px; }
.schedule-filters label:first-child { min-width: 185px; flex: 1; }
.schedule-table { min-width: 1480px; }
.schedule-table th, .schedule-table td { padding: 12px 10px; vertical-align: top; }
.schedule-table tbody tr:hover { background: #f8fafd; }
.schedule-issue-stack { min-width: 170px; display: grid; justify-items: start; gap: 5px; }
.schedule-issue-stack small { max-width: 210px; }
.source-data-label, .source-cell small { color: #7a5a24; }
.modeled-data-label, .modeled-cell small { color: var(--navy); }
.source-cell { background: #fffaf0; }
.modeled-cell { background: #f3f7fd; }
.schedule-review_required, .schedule-failed { background: var(--red-bg); color: var(--red); }
.schedule-preliminary_with_issues, .schedule-extended, .schedule-one_month_mismatch { background: var(--amber-bg); color: var(--amber); }
.schedule-preliminary_matched, .schedule-validated, .schedule-tight, .schedule-exact { background: var(--green-bg); color: var(--green); }
.schedule-superseded, .schedule-not_evaluated { background: #edf0f4; color: #59677a; }
.schedule-detail-heading { align-items: center; }
.schedule-comparison-grid { align-items: stretch; }
.schedule-comparison-grid .panel { margin-bottom: 0; }
.source-side { border-top: 4px solid #b88a37; }
.modeled-side { border-top: 4px solid var(--navy); }
.schedule-definition-list { margin: 12px 0 0; }
.schedule-definition-list > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.schedule-definition-list dt { color: var(--muted); }
.schedule-definition-list dd { margin: 0; text-align: right; font-weight: 800; color: var(--ink); }
.formula-panel { border-top: 4px solid var(--navy); }
.formula-copy { max-width: 940px; padding: 13px 15px; border-radius: 9px; background: #f4f7fb; color: #41516a; }
.candidate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-top: 18px; }
.candidate-card { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfd; }
.candidate-card.accepted { border-color: #8bc6ad; box-shadow: inset 4px 0 0 var(--green); background: #f6fbf8; }
.candidate-card > span:first-child { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.candidate-card h3 { margin: 5px 0 14px; color: var(--navy-2); }
.candidate-card dl { margin: 0 0 14px; }
.candidate-card dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.candidate-card dt { color: var(--muted); }
.candidate-card dd { margin: 0; text-align: right; font-weight: 700; }
.schedule-detail-issues { display: grid; gap: 10px; }
.schedule-detail-issues article { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 13px 0; border-top: 1px solid var(--line); }
.schedule-detail-issues p { margin: 4px 0 0; color: var(--muted); }
.installment-table { min-width: 1320px; font-variant-numeric: tabular-nums; }
.installment-table th, .installment-table td { padding: 10px 11px; text-align: right; }
.installment-table th:nth-child(1), .installment-table th:nth-child(2), .installment-table td:nth-child(1), .installment-table td:nth-child(2) { text-align: left; }
.schedule-ledger { border-left: 4px solid var(--navy); }
.payment-layer-detail { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); align-items: stretch; }
.payment-layer-detail .panel { margin-bottom: 0; }
.expected-layer-card { border-top: 4px solid var(--navy); }
.reported-layer-card { border-top: 4px solid var(--green); }
.reconciliation-layer-card { border-top: 4px solid var(--amber); }
.payment-layer-detail .definition-list dd { max-width: 220px; }
.custody-summary-panel { border-left: 4px solid #8b98aa; }
.journey-stage > span:not(.journey-stage-sequence):not(.status-pill) { font-weight: 700; }
.journey-explanation-grid { display: grid; grid-template-columns: 1fr 1fr minmax(190px, .7fr); gap: 14px; }
.journey-explanation-grid > div { min-height: 130px; display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd; }
.journey-explanation-grid small { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.journey-explanation-grid strong { margin-top: 6px; color: var(--navy-2); }
.journey-explanation-grid p { margin: 8px 0 0; color: var(--muted); }
.journey-next-link a { margin-top: auto; font-weight: 800; }
.journey-legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.journey-legal-card { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfd; color: var(--ink); }
.journey-legal-card:hover, .journey-legal-card:focus-visible { border-color: #9eb0ca; background: var(--blue-bg); outline: none; }
.journey-legal-card > strong { color: var(--navy-2); font-size: 17px; }
.journey-legal-card dl { width: 100%; margin: 0; }
.journey-legal-card dl div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.journey-legal-card dt { color: var(--muted); }
.journey-legal-card dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.soft-collection-metrics { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.soft-collection-table { min-width: 1160px; }
.soft-collection-table tbody tr:hover { background: #f8fafd; }
.soft-collection-filters label:first-child { min-width: 190px; flex: 1; }
.overdue-copy { color: var(--red); font-weight: 800; }
.soft-open-layout { align-items: start; }
.source-snapshot-card { border-top: 4px solid var(--amber); }
.soft-detail-metrics { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.soft-summary-grid { align-items: start; }
.soft-actions-panel { border-top: 4px solid var(--navy); }
.soft-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.soft-action-grid .action-card { margin: 0; }
.soft-action-grid .transition-card { border-color: #d7c9aa; background: #fffdf8; }
.soft-workspace-grid { align-items: start; }
.timeline-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timeline-meta small { margin-left: auto; }
.soft-timeline .timeline-item > div p { color: var(--ink); }
.inline-action > summary { cursor: pointer; color: var(--navy); font-weight: 800; }
.form-grid.compact { margin-top: 12px; }
.draft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.draft-card { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfd; }
.draft-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.draft-card h3 { margin: 14px 0 7px; color: var(--navy-2); }
.draft-card > p { color: var(--muted); overflow-wrap: anywhere; }
.inline-form { display: grid; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.inline-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.soft-operation-summary { display: flex; align-items: center; gap: 28px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfd; }
.soft-operation-summary > div { display: grid; gap: 3px; }
.soft-operation-summary > div:first-child { margin-right: auto; }
.soft-operation-summary small { color: var(--muted); }
.soft-status-review_required, .soft-status-contact_in_progress { background: var(--blue-bg); color: var(--navy); }
.soft-status-promise_pending, .soft-status-escalation_review { background: var(--amber-bg); color: var(--amber); }
.soft-status-regularized_reported { background: var(--green-bg); color: var(--green); }
.soft-status-false_positive, .soft-status-cancelled { background: #edf0f4; color: #59677a; }
.soft-draft-approved { background: var(--green-bg); color: var(--green); }
.soft-draft-externally_sent_reported { background: var(--blue-bg); color: var(--navy); }
.soft-promise-active { background: var(--amber-bg); color: var(--amber); }
.soft-promise-fulfilled_reported { background: var(--green-bg); color: var(--green); }
.soft-promise-broken_reported { background: var(--red-bg); color: var(--red); }
.reported-ledger-heading { align-items: center; }
.reported-ledger-heading > div { min-width: 0; }
.reported-ledger-heading h1 { overflow-wrap: anywhere; }
.reported-ledger-warning .status-pill { margin-left: auto; }
.reported-ledger-metrics { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.reported-batch-table { min-width: 1180px; }
.reported-row-table { min-width: 1320px; }
.reported-application-table { min-width: 1040px; }
.reported-ledger-filters label:first-child,
.reported-ledger-filters label:nth-child(2) { min-width: 170px; }
.reported-unit-panel { border-left: 4px solid var(--navy); }
.unit-total-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.unit-total-grid > div { min-width: 190px; display: grid; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfd; }
.unit-total-grid span, .unit-total-grid small { color: var(--muted); }
.unit-total-grid strong { color: var(--navy-2); font-size: 20px; }
.ledger-status-completed, .ledger-status-ready, .ledger-status-linked { background: var(--green-bg); color: var(--green); }
.ledger-status-processing, .ledger-status-review_required, .ledger-status-ambiguous { background: var(--amber-bg); color: var(--amber); }
.ledger-status-failed, .ledger-status-uninterpretable { background: var(--red-bg); color: var(--red); }
.ledger-status-unresolved, .ledger-status-unsupported_vertical { background: #edf0f4; color: #59677a; }
.reported-movement-grid, .reported-evidence-grid { align-items: start; }
.reported-operation-section { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.reported-operation-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.reported-operation-section h3 { margin: 0 0 10px; color: var(--navy-2); font-size: 15px; }
.reported-operation-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.reported-operation-title div { display: grid; }
.reported-operation-title small { color: var(--muted); }
.reported-operation-list { display: grid; gap: 7px; }
.reported-operation-list > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfd; color: var(--ink); }
.reported-operation-list > a:hover { border-color: #9eb0ca; background: var(--blue-bg); }
.reported-operation-list > a > span:first-child { display: grid; }
.reported-operation-list small { color: var(--muted); }
.five-date-list dd { font-variant-numeric: tabular-nums; }
.raw-evidence { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfd; }
.raw-evidence summary { cursor: pointer; padding: 12px 14px; color: var(--navy); font-weight: 800; }
.raw-evidence pre { max-height: 320px; overflow: auto; margin: 0; padding: 14px; border-top: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.compact-timeline { margin-top: 16px; }
.side-nav .brand { margin-bottom: 18px; padding: 0 8px; }
.nav-items a.active .nav-state { color: #ccdaf0; }
.app-main .topbar { min-height: 60px; padding: 0 32px; gap: 18px; }
.app-main .page-shell { width: auto; margin: 0; padding: 28px 32px 60px; }
.table-panel tr.clickable { cursor: pointer; }
.table-panel tr.clickable:hover { background: var(--blue-bg); }
.table-empty { color: var(--muted); padding: 24px 4px; margin: 0; }
.density-compacta td, .density-compacta th { padding: 5px 9px; font-size: 13px; }
.density-normal td, .density-normal th { padding: 10px 12px; }
.density-amplia td, .density-amplia th { padding: 16px 14px; }
.portfolio-header { background: var(--blue-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; }
.portfolio-header summary { cursor: pointer; font-weight: 600; }
.portfolio-header .coverage-list { margin-top: 12px; }
.record-head { margin-bottom: 14px; }
.record-head h1 { margin: 0; font-size: 30px; color: var(--navy-2); }
.record-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.record-tabs a { padding: 9px 16px; border-radius: 8px 8px 0 0; color: var(--ink); text-decoration: none; font-size: 14px; }
.record-tabs a:hover { background: var(--blue-bg); }
.record-tabs a.active { background: var(--navy); color: white; }
.stage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; }
.stage-card { display: grid; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.stage-card:hover { border-color: var(--navy); }
.stage-card.has-missing { border-top: 4px solid var(--amber); }
.stage-card .missing { color: var(--amber); font-weight: 600; }
.decision-block { background: var(--amber-bg); border: 1px solid var(--amber); border-radius: 12px; padding: 18px 22px; margin: 20px 0; }
.decision-eyebrow { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); font-weight: 800; }
.decision-block h3 { margin: 6px 0 12px; }
.decision-block dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 0 0 14px; }
.decision-block dt { color: var(--muted); font-size: 13px; }
.decision-block dt.contra, .decision-block dd.contra { color: var(--red); }
.decision-actions { display: flex; gap: 10px; align-items: center; }
/* Los encabezados que separan bloques dentro de una página no llevan la línea
   ni el peso del encabezado principal: son rótulos de sección, no títulos. */
.page-shell > .page-heading:not(:first-of-type) { margin-top: 34px; margin-bottom: 14px; align-items: flex-start; }
.page-shell > .page-heading:not(:first-of-type) h2 { margin: 3px 0 4px; }
.page-shell > .page-heading:not(:first-of-type) p { font-size: 14px; }
/* El encabezado de un panel que es todo tabla necesita su propio relleno:
   `.table-panel` no tiene padding para que la tabla llegue a los bordes. */
.portfolio-table-heading { padding: 18px 20px 4px; }
/* Aparece solo cuando la pantalla eligió cartera por defecto habiendo otras:
   una cifra sin decir de quién es, es peor que ninguna cifra. */
.scope-chip { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.scope-chip label { color: var(--muted); font-size: 12px; font-weight: 700; }
.scope-chip select { min-height: 30px; padding: 3px 8px; font-size: 13px; font-weight: 700; color: var(--navy); }

/* --------------------------------------------------------------------------
   Barra de filtros sobre una tabla
   --------------------------------------------------------------------------
   Un formulario GET de verdad, no enlaces armados a mano: la pantalla se abre
   por dos rutas y los enlaces perdían la segunda, devolviendo al resumen al
   primer clic.
   -------------------------------------------------------------------------- */
/* `.table-panel` no tiene padding para que la tabla llegue a los bordes, así
   que la barra pone el suyo: 16px horizontales, los mismos de una celda, para
   que la primera etiqueta caiga bajo la primera columna en vez de pegarse al
   borde del panel. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
}

.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.filter-bar select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: 13px;
  max-width: 22rem;
}

/* Empuja el conteo al extremo: es resultado, no control. */
.filter-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.filter-clear { font-size: 13px; }

.filter-note {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 13px;
  color: var(--muted);
}

/* Una etiqueta de etapa partida en dos líneas se lee como dos cosas. */
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Tarjetas que resumen y filtran
   --------------------------------------------------------------------------
   El número que se mira es el que se acciona. Antes el resumen era un bloque
   de métricas que solo se leía y el atajo más usado —ver solo lo que no
   podemos acreditar— vivía escondido en un enlace dentro de una tarjeta.

   Sin cuadrícula de columnas escrita a mano: crecen con las tarjetas que haya.
   -------------------------------------------------------------------------- */
/* Grilla y no flex: con cinco tarjetas, `flex-grow` dejaba la última sola
   ocupando el ancho entero como si fuera un titular. */
/* Cinco tarjetas, y son siempre cinco: `auto-fit` metía cuatro arriba y
   dejaba la quinta sola abajo ocupando todo el ancho, que es justo la que
   pregunta por las 124 en stand by. Se fija el número de columnas para que
   la fila no se parta con una huérfana: 5, 3+2, 2+2+1. */
.filter-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1320px) { .filter-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .filter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.filter-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.filter-card:hover,
.filter-card:focus-visible { border-color: var(--line-2); }

/* La activa se marca con un borde a la izquierda y no con relleno: el bloque
   de color compite con las pastillas de la tabla. */
.filter-card.is-active {
  border-color: var(--navy);
  box-shadow: inset 3px 0 0 var(--navy);
}

/* Una tarjeta que cuenta un problema. El número va en rojo, no la tarjeta
   entera: teñir el bloque la haría competir con la que está activa. */
.filter-card.is-alert strong { color: var(--red); }
.filter-card.is-alert.is-active {
  border-color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}

.filter-card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.filter-card strong {
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.filter-card small { font-size: 12px; color: var(--muted); }


/* --- Entrar -------------------------------------------------------------- */
/* La única pantalla sin sesión. El sidebar de `base.html` queda vacío porque
   todavía no hay a dónde navegar; el bloque se centra en el espacio restante. */
.login-panel {
  max-width: 23rem;
  margin: 8vh auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  padding: 30px 32px 32px;
}

.login-panel h1 { font-size: 26px; margin: 8px 0 10px; letter-spacing: -.02em; }
.login-panel .muted { font-size: 13.5px; line-height: 1.5; margin: 0 0 22px; }

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 5px; }
.login-form span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.login-form input {
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm, 7px);
  font: inherit;
  font-size: 15px;
}
.login-form input:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.login-form button { margin-top: 6px; border: 0; cursor: pointer; font: inherit; text-align: center; }

.login-error {
  padding: 9px 12px;
  margin: 0 0 18px;
  border-radius: var(--r-sm, 7px);
  background: var(--red-bg);
  color: var(--red);
  font-size: 13.5px;
}


/* --- Resumen de cartera --------------------------------------------------- */
/* Primero lo construido, después lo que falta. Antes eran once tarjetas del
   mismo tamaño: como nueve están a medio hacer, la página era una pared de
   advertencias y las dos que funcionan quedaban vacías al medio. */
.section-rule {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.section-rule + * { margin-bottom: 34px; }

/* Una línea por etapa, en el orden del proceso. Lo que falta sigue completo,
   en tono de texto y no de alarma. */
.stage-list { border-top: 1px solid var(--line); }

.stage-row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) 5.5rem;
  gap: 4px 20px;
  align-items: baseline;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}

/* Lo que se puede usar hoy es un enlace y lo dice; lo que falta es texto y no
   pretende llevar a ninguna parte. Antes los dos eran enlaces distinguidos
   solo por una barra azul de 3px: cuatro filas con barra y siete sin ella
   dejaban la lista despareja sin agregar nada que las palabras no dijeran. */
a.stage-row:hover, a.stage-row:focus-visible { background: var(--neutral-bg); }
.stage-row.is-pending .stage-row-name { color: var(--muted); }

.stage-row-name { font-weight: 600; font-size: 15px; }
.stage-row-text { font-size: 14px; line-height: 1.55; color: var(--ink); }
.stage-row-missing { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); }
.stage-row-missing b { font-weight: 600; color: var(--ink); }
.stage-row-open {
  justify-self: end;
  font-size: 13px; font-weight: 600; color: var(--navy);
  white-space: nowrap;
}

.stage-list-note { margin: 14px 2px 0; font-size: 13px; color: var(--muted); }

@media (max-width: 720px) {
  .stage-row { grid-template-columns: 1fr; }
  .stage-row-open { justify-self: start; }
}


/* --- Situación judicial del activo ---------------------------------------- */
/* Lo declarado y lo real enfrentados. Estaban en la misma pantalla, separados
   por cuatro paneles, sin que nada los comparara. */
.judicial-contradiction {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--r-sm, 7px);
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 14px;
  line-height: 1.5;
}

.judicial-versus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  overflow: hidden;
}
.judicial-versus > div { background: #fff; padding: 15px 17px; }
.versus-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.judicial-versus strong { display: block; font-size: 16px; line-height: 1.3; }
.judicial-versus strong.is-stalled { color: var(--red); }
.judicial-versus small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* La causa que da la fecha que muestra mora dura. Sin marcarla, trece filas
   iguales no dicen de cuál salió. */
.compact-table tr.is-leading { background: var(--neutral-bg); }
.compact-table tr.is-leading th[scope="row"] { box-shadow: inset 3px 0 0 var(--navy); }

/* Los trámites de todas las causas en una sola línea, cada uno diciendo de
   cuál viene. */
.story { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.story li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; }
.story time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.story strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.story small { color: var(--muted); font-size: 11.5px; }
.story-role { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.story-rest { margin-top: 14px; }
.story-rest summary { cursor: pointer; font-size: 13px; color: var(--navy); }
.story-rest .story { margin-top: 12px; }

/* La fecha de las fuentes, dicha en la pantalla que las muestra. Discreta pero
   presente: sin ella una tabla congelada se lee como una tabla al día. */
.data-asof { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
/* Se sale de las 72ch de medida de lectura a propósito: es un pie de dato, no
   un párrafo, y partido en dos líneas parecía una frase inconclusa. Lleva la
   clase del contenedor porque `.page-heading p` le gana en especificidad. */
.page-heading .data-asof, .panel-heading .data-asof { max-width: none; }

/* La unidad de lo que se está contando, dicha bajo las cifras. Mora dura cuenta
   activos y cobranza judicial cuenta causas: sin esta línea los dos números se
   leen como una contradicción. */
.cards-unit {
  margin: -6px 2px 18px;
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.cards-unit b { font-weight: 600; color: var(--ink); }

/* Una lista de hechos: etiqueta a la izquierda, dato a la derecha. La usa la
   búsqueda cuando el activo existe en el universo candidato y no en una cartera
   cargada, que es una respuesta y no un vacío. */
.fact-list { display: grid; gap: 1px; margin: 0 0 16px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fact-list > div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 16px; padding: 10px 16px; background: var(--surface); }
.fact-list dt { color: var(--muted); font-size: 13px; }
.fact-list dd { margin: 0; font-size: 14px; font-weight: 600; }
@media (max-width: 620px) { .fact-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* Encontrada / no encontrada en el registro del tribunal. Verde no es «todo
   bien» y rojo no es «error»: son dos hechos distintos sobre una causa que un
   estudio declaró. */
.found-yes, .found-no { display: block; font-weight: 600; font-size: 13px; }
.found-yes { color: var(--green); }
.found-no  { color: var(--red); }

/* Los filtros que no son tarjetas: muchos valores, se eligen en vez de mirarse. */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: end; gap: 14px;
  margin-bottom: 18px;
}
.filter-bar label {
  display: grid; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.filter-bar select {
  min-height: 32px; padding: 4px 8px;
  font-size: 13px; font-weight: 600; color: var(--navy);
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface);
}

/* Una parte del juicio: el RUT identifica y el nombre acompaña. El RUT va en
   mono para que se puedan comparar dos de un vistazo. */
.party-cell strong {
  display: block; font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.party-cell small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }

/* La mora del activo, arriba del bloque judicial: es el hecho que lo mete en
   el artículo 37 y hasta ahora había que salir a mora dura para verlo. */
.arrears-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: 0 0 16px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.arrears-strip > div { background: var(--surface); padding: 12px 16px; }
.arrears-strip dt {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.arrears-strip dd { margin: 0; font-size: 15px; font-weight: 600; }
.arrears-strip dd strong { font-size: 21px; color: var(--red); }
.arrears-strip dd small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.arrears-strip .arrears-note { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--muted); }
@media (max-width: 900px) { .arrears-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* El árbitro de la causa. Entre designar y jurar el juicio no ha empezado, así
   que ese estado se marca: no es un dato de ficha, es una gestión pendiente. */
.arbitrator-box {
  padding: 14px 18px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.arbitrator-box.is-pending { border-color: #e4c37d; background: var(--amber-bg); }
.arbitrator-box > strong { display: block; font-size: 16px; margin: 2px 0 6px; }
.arbitrator-box.is-pending > strong { color: var(--amber); }
.arbitrator-box p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.arbitrator-box .fact-list { margin-bottom: 0; }