/* ============================================================
   REVENUE AUDIT · HUB DE EXPEDIENTE
   Sistema de interacción sobre el sistema de marca DealTunnel.
   Este archivo no cambia entre clientes. Solo cambia audit.json.
   ============================================================ */

/* --- 0. FUENTES AUTOALOJADAS ---------------------------------- */
/* Cuatro archivos, 82 KB, peso variable. El expediente se abre sin red:
   un documento que depende de un CDN para componerse no es un documento. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- 1. TOKENS ------------------------------------------------ */
:root{
  --canvas:#FFFFFF;
  --surface:#F6F7F5;
  --text:#101112;
  --grey:#6B6F6B;
  --hairline:rgba(16,17,18,.14);
  --hairline-soft:rgba(16,17,18,.07);
  --acc-text:#067647;   /* medido y trazable */
  --acc-fill:#05DF72;   /* solo fill */
  --hl-bg:#05DF72;
  --hl-text:#101112;
  --dot-off:#E1E4E1;
  --sans:'Geist',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,Menlo,monospace;

  /* escala tipográfica: siete valores, base 16, razón 1.25 */
  --f-d1:clamp(34px,5vw,49px);
  --f-h1:31px;
  --f-n1:25px;
  --f-h2:20px;
  --f-b1:16px;
  --lh-b1:24px;
  --f-m1:13px;
  --f-l1:10px;

  /* grid */
  --grid:1120px;
  --gutter:24px;
  --margen:48px;
  --ritmo:96px;
  --fila-bloq:56px;   /* 48px cierra el bloque 01 sobre el pliegue en pantallas de 900px reales */
}
html[data-theme="dark"]{
  --canvas:#0C0C0E;
  --surface:#131316;
  --text:#E8E4DC;
  --grey:#9A9690;
  --hairline:rgba(232,228,220,.14);
  --hairline-soft:rgba(232,228,220,.08);
  --acc-text:#05DF72;
  --acc-fill:#05DF72;
  --hl-bg:transparent;
  --hl-text:#05DF72;
  --dot-off:#222228;
}
/* escala de proyección: un peldaño arriba, mismo grid, mismo layout */
@media (min-width:1600px){
  :root{
    --f-d1:clamp(42px,5vw,61px); --f-h1:39px; --f-n1:31px; --f-h2:25px;
    --f-b1:20px; --lh-b1:32px; --f-m1:16px; --f-l1:12px;
  }
}
html[data-vista="sala"]{
  --f-d1:clamp(42px,5vw,61px); --f-h1:39px; --f-n1:31px; --f-h2:25px;
  --f-b1:20px; --lh-b1:32px; --f-m1:16px; --f-l1:12px;
}
html[data-vista="base"]{
  --f-d1:clamp(34px,5vw,49px); --f-h1:31px; --f-n1:25px; --f-h2:20px;
  --f-b1:16px; --lh-b1:24px; --f-m1:13px; --f-l1:10px;
}

/* --- 2. BASE -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--canvas);color:var(--text);
  font-family:var(--sans);font-size:var(--f-b1);line-height:var(--lh-b1);
  font-weight:400;-webkit-font-smoothing:antialiased;
}
/* grain 3% */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--acc-fill);color:#101112}

/* foco: siempre visible, nunca removido */
:focus-visible{outline:2px solid var(--acc-text);outline-offset:2px}

/* --- 3. TIPOGRAFÍA -------------------------------------------- */
.l1{font-family:var(--mono);font-size:var(--f-l1);font-weight:500;line-height:16px;
    text-transform:uppercase;letter-spacing:.15em;color:var(--grey)}
.m1{font-family:var(--mono);font-size:var(--f-m1);font-weight:400;line-height:24px;
    font-variant-numeric:tabular-nums}
.b1{font-size:var(--f-b1);line-height:var(--lh-b1)}
.h2{font-size:var(--f-h2);font-weight:600;line-height:32px;letter-spacing:-.02em}
.h1{font-size:var(--f-h1);font-weight:600;line-height:40px;letter-spacing:-.03em}
.n1{font-family:var(--mono);font-size:var(--f-n1);font-weight:500;line-height:32px;
    font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* d1 es el único line-height sin rejilla: escala con vw y fijarlo rompería el clamp */
.d1{font-size:var(--f-d1);font-weight:600;line-height:1.08;letter-spacing:-.03em}
/* utilidad tipográfica, acotada: .der es la alineación, no una escala */
span.num{font-family:var(--mono);font-size:.94em;font-weight:400;font-variant-numeric:tabular-nums}
.gris{color:var(--grey)}
.verde{color:var(--acc-text)}
/* highlight: único mecanismo de énfasis */
.hl{background:var(--hl-bg);color:var(--hl-text);padding:0 .16em}

/* enlaces de prosa y de fuente */
a{color:var(--acc-text);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:var(--acc-text)}
a:active{opacity:.7}
/* la referencia interna no gasta acento: el acento es de lo verificado */
a.ref-bloq{color:inherit;border-bottom-color:var(--hairline)}
a.ref-bloq:hover{border-bottom-color:currentColor}
a.sigla{color:var(--acc-text)}

/* --- 4. GRID Y RITMO ------------------------------------------ */
.wrap{width:100%;max-width:calc(var(--grid) + var(--margen)*2);
      margin-inline:auto;padding-inline:var(--margen)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.prosa{grid-column:1 / span 8;max-width:720px}
.prosa p + p{margin-top:24px}
.plena{grid-column:1 / -1}

.bloque{padding-block:var(--ritmo);border-top:1px solid var(--hairline);scroll-margin-top:56px}
.bloque:first-of-type{border-top:0;padding-top:32px}
.bloque-cabeza{margin-bottom:32px}
.bloque-cabeza .l1{display:block;margin-bottom:8px}
.bloque-cabeza .h1{margin-bottom:24px}
.scanline{width:60px;height:2px;background:var(--acc-fill)}
.asercion{grid-column:1 / span 8;max-width:720px;margin-bottom:32px}
.sub{margin-top:64px}
.sub > .h2{margin-bottom:24px}

/* --- 5. CABECERA DE EXPEDIENTE (chrome) ----------------------- */
.expediente{
  position:sticky;top:0;z-index:40;height:48px;
  background:var(--canvas);border-bottom:1px solid var(--hairline);
}
.expediente .wrap{height:100%;display:flex;align-items:center;gap:24px}
.exp-izq{flex:0 0 auto}
.exp-centro{flex:1 1 auto;text-align:center;min-width:0}
.exp-der{flex:0 0 auto;display:flex;align-items:center;gap:16px}
.exp-pos{font-family:var(--mono);font-size:var(--f-l1);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;color:var(--acc-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}
.exp-cliente{font-family:var(--mono);font-size:var(--f-l1);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;color:var(--grey);white-space:nowrap}
.exp-cliente b{font-weight:500;color:var(--text)}

.ctrl{
  background:none;border:1px solid var(--hairline);border-radius:0;
  height:24px;padding:0 8px;cursor:pointer;
  font-family:var(--mono);font-size:var(--f-l1);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;color:var(--grey);
}
.ctrl:hover{color:var(--text);border-color:var(--text)}
.ctrl[aria-pressed="true"]{color:var(--acc-text);border-color:var(--acc-text)}

/* --- 6. BLOQUE DE VEREDICTO ----------------------------------- */
.veredicto{
  grid-column:1 / -1;background:var(--surface);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding-block:48px;padding-inline:0;
}
.vered-lab{display:block;margin-bottom:24px}
.vered-cual{margin-bottom:32px;color:var(--text);
  text-transform:uppercase;letter-spacing:.15em}
.vered-aser,.bloq-cab p{max-width:720px}
.vered-aser{margin-bottom:32px}
.bloq-cab{padding-bottom:16px}
.bloq-cab .l1{display:block;margin-bottom:8px}
/* Medidor: una sola mecánica en pantalla, en papel y en blanco y negro.
   La gradación de la escala la hace la altura de la celda, no el color.
   El acento solo entra si la posición vigente significa camino abierto. */
.medidor{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;margin-bottom:24px}
.medidor-celda{
  display:flex;align-items:flex-start;justify-content:center;padding-top:8px;
  border:1px solid var(--hairline);background:var(--dot-off);color:var(--text);
  font-family:var(--mono);font-size:var(--f-l1);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;
}
.medidor-celda + .medidor-celda{border-left:0}
.medidor-celda:nth-child(1){height:40px}
.medidor-celda:nth-child(2){height:32px}
.medidor-celda:nth-child(3){height:24px}
.medidor-celda[data-vigente]{
  background:var(--canvas);color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
.medidor-celda[data-vigente="abierto"]{
  color:var(--acc-text);box-shadow:inset 0 0 0 2px var(--acc-text)}

.estado{margin-bottom:8px;color:var(--text)}

/* ficha de bloqueante */
.bloqueantes{border-top:1px solid var(--hairline)}
.bloqueante{
  display:grid;grid-template-columns:32px 1fr 176px 104px;
  align-items:baseline;gap:16px;min-height:var(--fila-bloq);padding:8px 0 8px 16px;
  border-bottom:1px solid var(--hairline);
  border-left:1px solid var(--hairline);scroll-margin-top:56px;
}
/* el estado lo carga el borde izquierdo, con el mecanismo de .comite-fila */
.bloqueante[data-estado="ATENDIDO"]{border-left-color:var(--text)}
.bloqueante[data-estado="RESUELTO"]{border-left-color:var(--acc-text)}
.bloqueante:target{background:var(--surface)}
.bloqueante:target{box-shadow:inset 2px 0 0 var(--acc-text)}
.bloq-i{font-family:var(--mono);font-size:var(--f-m1);font-weight:400;color:var(--acc-text);
  font-variant-numeric:tabular-nums}
.bloq-c{display:block}
.bloq-t{display:block;font-size:var(--f-b1);font-weight:600;line-height:24px;color:var(--text)}
.bloq-f{display:block;margin-top:8px;color:var(--grey);text-transform:none;letter-spacing:0}
.bloq-d,.bloq-e{font-family:var(--mono);font-size:var(--f-m1);color:var(--grey);
  text-transform:uppercase;letter-spacing:.04em}
.bloqueante[data-estado="ATENDIDO"] .bloq-e{color:var(--text)}
.bloqueante[data-estado="RESUELTO"] .bloq-e{color:var(--acc-text)}

/* --- 7. CIFRA TRAZADA ----------------------------------------- */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter) var(--gutter);
  grid-column:1 / -1}
.cifras[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
/* El eje se lee por densidad de tinta y por tamaño, nunca por matiz.
   El verde no es el color del número: es el color de la sigla que lo respalda,
   que es lo único que significa trazable. Pasa el test de blanco y negro. */
.cifra{border-top:1px solid var(--hairline);padding-top:16px}
.cifra-n{display:block;color:var(--text)}                      /* medida */
.cifra[data-eje="estimada"] .cifra-n{color:var(--grey)}        /* calculada */
.cifra[data-eje="sin-dato"] .cifra-n{
  color:var(--grey);font-size:var(--f-m1);line-height:32px;letter-spacing:.15em;text-transform:uppercase}
.cifra-q{display:block;margin-top:8px;color:var(--text)}
.cifra[data-eje="sin-dato"] .cifra-q{color:var(--grey)}
.cifra-f{display:block;margin-top:8px;color:var(--grey);text-transform:uppercase;letter-spacing:.04em}
.cifra-f .seg{white-space:nowrap}
/* el supuesto es prosa, y la prosa no va en versalita */
.cifra-s{display:block;margin-top:8px;color:var(--grey);text-transform:none;letter-spacing:0}
/* las celdas sin dato tienen rejilla propia: el contraste entre las dos es el argumento */
.cifras[data-vacia]{gap:32px var(--gutter)}
.cifras[data-vacia] .cifra{border-top:1px dashed var(--hairline);padding-top:24px}

/* --- 8. FICHA DE REGISTRO ------------------------------------- */
.ficha{border:1px solid var(--hairline);padding:24px;background:var(--canvas)}
.ficha-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--hairline);margin-bottom:8px}
.ficha-logo{height:20px;width:auto;display:block;filter:grayscale(1) brightness(0);opacity:.9}
html[data-theme="dark"] .ficha-logo{filter:grayscale(1) brightness(0) invert(1);opacity:.85}
.ficha-campo{display:flex;align-items:baseline;gap:8px;padding-block:8px}
.ficha-campo + .ficha-campo{border-top:1px dashed var(--hairline-soft)}
.ficha-k{flex:0 0 112px;color:var(--grey);text-transform:uppercase;letter-spacing:.04em;
  font-family:var(--mono);font-size:var(--f-m1)}
.ficha-v{font-family:var(--mono);font-size:var(--f-m1);color:var(--text);
  font-variant-numeric:tabular-nums}
.ficha-v[data-clave]{color:var(--acc-text)}
/* una amenaza del competidor no es un dato verificado nuestro: va en tinta */
.ficha[data-tinta] .ficha-v{color:var(--grey)}
.ficha[data-tinta] .ficha-v[data-clave]{color:var(--text)}

/* --- 9. SELLO DE VERIFICACIÓN (uno por hub) ------------------- */
.sello{
  width:120px;height:120px;flex:0 0 120px;border-radius:50%;
  border:1px solid var(--acc-text);box-shadow:inset 0 0 0 3px var(--canvas),inset 0 0 0 4px var(--acc-text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transform:rotate(-7deg);padding:12px;
}
.sello span{display:block;font-family:var(--mono);font-size:var(--f-l1);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--acc-text);line-height:16px}
.sello .sello-f{margin-top:8px;letter-spacing:.04em;color:var(--grey)}

/* --- 10. PADRÓN (tabla de cuentas) ---------------------------- */
.padron-ctrl{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:16px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{color:var(--grey)}
.campo input{
  height:32px;width:280px;max-width:100%;background:var(--canvas);color:var(--text);
  border:1px solid var(--hairline);border-radius:0;padding:0 8px;
  font-family:var(--mono);font-size:var(--f-m1);
}
.campo input:hover{border-color:var(--text)}
.campo input:focus{outline:2px solid var(--acc-text);outline-offset:-1px;border-color:var(--acc-text)}
.conteo{font-family:var(--mono);font-size:var(--f-m1);color:var(--grey);
  text-transform:uppercase;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.conteo b{font-weight:400;color:var(--acc-text)}

.padron-scroll{overflow-x:auto}
table.padron{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-size:var(--f-m1);font-variant-numeric:tabular-nums}
table.padron th,table.padron td{
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--hairline-soft);
  white-space:nowrap;vertical-align:middle}
table.padron thead th{
  position:sticky;top:48px;z-index:10;background:var(--canvas);
  border-bottom:1px solid var(--hairline);padding:0}
table.padron th button{
  width:100%;height:40px;display:flex;align-items:center;gap:6px;
  background:none;border:0;border-radius:0;cursor:pointer;padding:0 10px;
  font-family:var(--mono);font-size:var(--f-l1);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;color:var(--grey);
}
table.padron th button:hover{color:var(--text)}
table.padron th button[aria-sort="ascending"],
table.padron th button[aria-sort="descending"]{color:var(--acc-text)}
table.padron th button .ord{color:var(--grey)}
table.padron th button[aria-sort="ascending"] .ord,
table.padron th button[aria-sort="descending"] .ord{color:var(--acc-text)}
table.padron th.der button,table.padron td.der{text-align:right;justify-content:flex-end}
table.padron tbody tr:hover{background:var(--surface)}
table.padron .nom{white-space:normal;min-width:240px;color:var(--text)}
table.padron .sec{color:var(--grey)}
table.padron td.ac{color:var(--acc-text)}
.padron-pie{padding-top:16px;color:var(--grey);text-transform:uppercase;letter-spacing:.04em}
.vacio{padding:24px 0;color:var(--grey)}

/* --- 11. FILA DE COMITÉ --------------------------------------- */
.comite{border-top:1px solid var(--hairline)}
.comite-fila{
  display:grid;grid-template-columns:104px 1fr 240px;align-items:baseline;gap:16px;
  min-height:56px;padding:16px 0 16px 16px;border-bottom:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.comite-fila[data-firma]{border-left-color:var(--acc-text)}
.comite-rol{color:var(--grey);text-transform:uppercase;letter-spacing:.15em;
  font-family:var(--mono);font-size:var(--f-l1);font-weight:500}
.comite-cargo{font-size:var(--f-b1);line-height:24px;color:var(--text)}
.comite-area{font-family:var(--mono);font-size:var(--f-m1);color:var(--grey)}

/* --- 12. TABLAS DE REGISTRO (hipótesis, ventana, fuentes) ----- */
table.reg{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-size:var(--f-m1);font-variant-numeric:tabular-nums}
table.reg th{
  text-align:left;padding:0 12px 8px;border-bottom:1px solid var(--hairline);
  font-size:var(--f-l1);font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--grey)}
table.reg td{padding:12px;border-bottom:1px solid var(--hairline-soft);vertical-align:top}
table.reg td.txt{font-family:var(--sans);font-size:var(--f-b1);line-height:24px;white-space:normal}
table.reg td.der{text-align:right}
table.reg th.der{text-align:right}
table.reg .id{color:var(--acc-text)}
table.reg tr:target td{background:var(--surface)}
table.reg tr:target td:first-child{box-shadow:inset 2px 0 0 var(--acc-text)}

/* --- 13. IDEA MADRE ------------------------------------------- */
.idea{grid-column:1 / -1;background:var(--surface);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding-block:48px;padding-inline:0}
.idea .h2{margin-bottom:16px}
.idea .b1{max-width:720px;color:var(--text)}

/* --- 14. DECISIONES Y FIRMA ----------------------------------- */
.decisiones{border-top:1px solid var(--hairline)}
.decision{
  display:grid;grid-template-columns:32px 1fr 176px 136px;gap:16px;
  padding:24px 0;border-bottom:1px solid var(--hairline);align-items:start}
.decision-i{font-family:var(--mono);font-size:var(--f-m1);color:var(--acc-text)}
.decision-q{font-size:var(--f-b1);font-weight:600;line-height:24px;margin-bottom:8px}
.decision-o{font-family:var(--mono);font-size:var(--f-m1);color:var(--grey)}
.decision-d,.decision-f{font-family:var(--mono);font-size:var(--f-m1);color:var(--grey);
  text-transform:uppercase;letter-spacing:.04em}

.btn{
  display:inline-flex;align-items:center;height:56px;padding:0 32px;border:0;border-radius:0;
  background:var(--acc-fill);color:#101112;cursor:pointer;
  font-family:var(--sans);font-size:var(--f-h2);font-weight:600;letter-spacing:-.02em;
}
.btn:hover{box-shadow:inset 0 0 0 2px #101112}
.btn:focus-visible{outline:2px solid var(--acc-text);outline-offset:2px}
.btn:active{opacity:.85}
.btn[aria-disabled="true"]{background:var(--dot-off);color:var(--grey);cursor:not-allowed;pointer-events:none}
.btn-nota{margin-top:8px;color:var(--grey);text-transform:uppercase;letter-spacing:.04em}
.btn-nota .dir{text-transform:none;letter-spacing:0;color:var(--text)}

.firmas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter);margin-top:48px}
.firma-caja{padding-top:56px;border-bottom:1px solid var(--text)}
.firma-caja + .firma-caja{border-bottom-color:var(--text)}
.firma-pie{padding-top:8px;color:var(--grey)}

/* --- 15. PIE DE EMISIÓN --------------------------------------- */
.emision{border-top:1px solid var(--hairline);padding-block:48px;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lockup{font-size:var(--f-h2);font-weight:600;letter-spacing:-.02em;color:var(--text)}
.lockup span{color:var(--acc-text)}

/* --- 16. ECOSISTEMA ACTIVO (fondo, bloque 2) ------------------ */
.eco-host{position:relative}
.eco{position:absolute;inset:0 0 auto 0;height:100%;width:100%;
  pointer-events:none;z-index:0}
.eco-host > *:not(.eco){position:relative;z-index:1}

/* --- 17. ÍNDICE DEL EXPEDIENTE (TOC) -------------------------- */
.toc{border-top:1px solid var(--hairline)}
.toc a{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--hairline-soft);border-left:0;color:var(--text)}
.toc a:hover{border-bottom-color:var(--hairline)}
.toc a:hover .toc-t{color:var(--acc-text)}
.toc-i{font-family:var(--mono);font-size:var(--f-m1);color:var(--acc-text)}
.toc-t{font-size:var(--f-b1);font-weight:600;line-height:24px}
.toc-p{font-family:var(--mono);font-size:var(--f-m1);color:var(--grey);display:block;margin-top:4px}

/* --- 18. RESPONSIVE ------------------------------------------- */
@media (max-width:1279px){
  .exp-centro{text-align:left}
}
@media (max-width:959px){
  :root{--margen:32px;--ritmo:64px}
  .prosa,.asercion{grid-column:1 / -1}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .exp-centro{display:none}
  .veredicto,.idea{padding-block:32px}
  .bloqueante{grid-template-columns:32px 1fr;grid-template-areas:
    'i c' '. d' '. e';row-gap:8px}
  .bloqueante .bloq-i{grid-area:i}
  .bloqueante .bloq-c{grid-area:c}
  .bloqueante .bloq-d{grid-area:d}
  .bloqueante .bloq-e{grid-area:e}
  .comite-fila{grid-template-columns:104px 1fr;row-gap:4px}
  .comite-area{grid-column:2}
  .decision{grid-template-columns:32px 1fr;row-gap:8px}
  .decision-d,.decision-f{grid-column:2}
  table.padron .nom{position:sticky;left:0;background:var(--canvas);z-index:5}
  table.padron tbody tr:hover .nom{background:var(--surface)}
}
@media (max-width:639px){
  :root{--margen:20px}
  .cifras,.cifras[data-cols="2"]{grid-template-columns:1fr}
  .firmas{grid-template-columns:1fr}
  .ctrl[data-ctrl="escala"]{display:none}
  .veredicto,.idea{padding-block:32px}
  .sello{width:96px;height:96px;flex-basis:96px}
  .h1{line-height:36px}
}

/* --- 19. MOTION ----------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .bloque{animation:aparece .4s ease-out both}
}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* --- 20. IMPRESIÓN -------------------------------------------- */
@media print{
  :root{
    --canvas:#FFFFFF;--surface:#FFFFFF;--text:#000000;--grey:#444444;
    --hairline:rgba(0,0,0,.3);--hairline-soft:rgba(0,0,0,.18);
    --acc-text:#0A5C38;--dot-off:#FFFFFF;--margen:0;--ritmo:32px;
  }
  html[data-theme="dark"]{color-scheme:light}
  body::after{display:none}
  .expediente{position:static;border-bottom:1px solid var(--hairline)}
  .ctrl,.padron-ctrl .campo,.eco{display:none}
  table.padron thead th{position:static}
  table.padron th button{color:#000;height:auto;padding:0 12px 8px}
  .hl{background:transparent;box-shadow:inset 0 -.5em 0 rgba(0,0,0,.12)}
  .btn{display:none}
  .bloque,.bloqueante,.decision,.comite-fila,table.padron tr,table.reg tr{
    break-inside:avoid;page-break-inside:avoid}
  .bloque{border-top:1px solid var(--hairline)}
  #fuentes a[href^="http"]::after{content:' ' attr(href);font-size:11px;color:#444;word-break:break-all}
  .firma-caja{border-bottom:1px solid #000}
}

/* --- 21. UTILIDADES DE COMPOSICIÓN ---------------------------- */
/* ritmo vertical: cinco valores y ninguno más. Un margen que no está
   en esta escala no se puede escribir, porque no existe la clase. */
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.conector{font-family:var(--sans);font-weight:400;color:var(--grey)}
.col-a{grid-column:1 / span 5}
.col-b{grid-column:6 / -1}
.exp-corta{display:none}
.padron-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;margin-bottom:32px}
.padron-cab .h2{margin-bottom:8px}
.padron-cab p{max-width:560px;color:var(--grey)}
.cita{border-left:1px solid var(--acc-text);padding-left:24px;margin:24px 0}
.nota{margin-top:16px;color:var(--grey)}
.ficha + .ficha{margin-top:var(--gutter)}
.amenazas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
.amenazas .ficha + .ficha{margin-top:0}
@media (max-width:959px){
  .col-a,.col-b{grid-column:1 / -1}
  .amenazas{grid-template-columns:1fr}
  .padron-cab{flex-direction:column;gap:24px}
}
@media (max-width:639px){
  .exp-corta{display:inline}
  .exp-larga{display:none}
  .cita{padding-left:16px}
}

.tabla-w{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
.tabla-w>table{margin:0}

/* --- 18b. CHROME EN MOVIL ------------------------------------- */
/* El bloque derecho no envolvia y empujaba el ancho del documento. */
@media (max-width:859px){
  .expediente .wrap{flex-wrap:nowrap;gap:8px;min-width:0}
  .exp-izq{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .exp-der{flex:0 1 auto;min-width:0;gap:8px}
  .exp-cliente{display:none}
}
@media (max-width:479px){
  :root{--margen:16px}
  .exp-der .ctrl{padding:5px 7px;letter-spacing:.06em}
}
/* Toda tabla ancha vive dentro de su propio scroll, nunca del documento. */
.tabla-w,.padron-w{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{min-width:0}

/* etiqueta de columna sin JavaScript: el boton de orden la reemplaza */
.solo-sin-js{display:block;padding:12px 12px 8px}
table.padron th.der .solo-sin-js{text-align:right}