/* src/tablero/tablero.css — el tablero de RESOLVE, EN FONDO BLANCO.
 *
 * DIVERGENCIA DECLARADA (decisión del fundador, 23-ago · adenda de R7). El prototipo heredado
 * docs/resolve_vigia_prototipo.html sigue siendo oscuro y ahí se queda: es el spec del ARCO y
 * del ORDEN de las secciones, que no cambian. Lo que se invierte es el lienzo, no la estructura.
 *
 * LO QUE NO SE TOCA: mismo arco, mismo orden (fuentes · detección · cartas · match · ruta ·
 * borradores · eventos), border-radius 0, sin sombras, Outfit como única familia, SEMÁFORO SIN
 * VERDE, y toda la disciplina de honestidad — chips, vintage, dueños, null pintado como su chip.
 *
 * UNA SOLA FUENTE DE VERDAD: todos los colores viven aquí abajo, en :root. Fuera de este bloque
 * no hay un solo hexadecimal, y la suite lo verifica — un literal suelto es un color que nadie
 * puede cambiar de un sitio, y el que se olvida cuando la paleta se mueve.
 *
 * POR QUÉ DOS VARIANTES POR COLOR. Sobre blanco, el magenta de marca da 3,60:1 y el azul 3,46:1:
 * los dos REPRUEBAN el mínimo de 4,5:1 para texto. Las variantes `-t` lo pasan (4,58 y 4,54) con
 * el mismo hue. La marca no se pierde: los tonos originales siguen vivos donde son FORMA —
 * filetes, bordes, bloques— y ceden solo donde son LETRA. El contraste lo mide el test, no el ojo.
 */

:root{
  /* lienzo y tinta */
  --fondo:#FFFFFF;
  --fondo-alt:#F4F4F4;
  --tinta:#0A0A0A;
  --tinta-2:#767676;
  --linea:#D6D6D6;

  /* marca — el par sin sufijo es FORMA; el `-t` es LETRA */
  --magenta:#FF2D6B;
  --magenta-t:#EA0045;
  --azul:#0193CE;
  --azul-t:#017EB1;

  /* fondo del hueco del borrador, y su tinta propia: sobre el tinte, `--magenta-t` cae a
     3,94:1 y reprobaría el mínimo. Este tono más oscuro da 5,30:1 sobre ese mismo tinte. */
  --hueco-fondo:#FFE8EF;
  --hueco-tinta:#C4003A;

  /* ── R10 · LA JERARQUÍA DE PROFUNDIDAD (adenda del look C2X) ──────────────
   * El fondo dice el NIVEL, y se aclara al bajar; nunca dos niveles seguidos iguales. Esto es
   * lo que arreglaba la crítica del fundador a R9: la información estaba bien, pero plana.
   * L1 header · L2 pestañas · L3 encabezado de bloque · L5 sub-bloque · L6 cuerpo. */
  --l1:#0A0A0A;
  --l2:#000000E6;
  --l3:#2E2E2E;
  --l5:#EEEEEE;
  --l6:#FFFFFF;

  /* grises aprobados. `--gris` #888888 es el rótulo de C2X, pero da 3,54:1 sobre blanco y
     REPRUEBA el mínimo de 4,5:1 para texto pequeño: aquí es FORMA (bullets, rieles) y quien
     pone la letra es `--gris-medio`. Misma disciplina que R7 con el magenta y el azul: la
     marca no se pierde, cede solo donde es letra, y el contraste lo mide el test. */
  --gris:#888888;
  --gris-medio:#555555;
  --gris-claro:#AAAAAA;
  --linea-2:#CCCCCC;
  --gris-suave:#F5F5F5;
  --carbon-2:#1A1A1A;

  /* R15 - los colores del coctel, uno por naturaleza. Todos salen de la paleta ya aprobada:
     azul de marca, indigo, gris, carbon y gris claro. El FALTANTE es el unico acento en magenta
     -- el hueco es la alerta, no un adorno, y por eso se lleva el color que en este sistema
     significa "mira aqui". */
  /* R16/G3 · los colores de los segmentos de anillo, decisión del fundador del 26-ago. Se
   * separaron para que se distingan de verdad: azules y grises juntos hacían un anillo que había
   * que leer en la tabla para entenderlo. Siguen viviendo SOLO en segmentos de anillo. */
  --nat-publica:#00C3FF;
  --nat-desarrollo:#000000;
  --nat-privada:#2D2D8F;
  --nat-cooperacion:#888888;
  --nat-faltante:#FF2D6B;
  /* R15b - el verde mango del fundador. USO EXCLUSIVO en segmentos de anillo (CLAUDE.md §6):
     un anillo de composicion no dice que algo este bien, dice de que esta hecho. */
  --verde-mango:#3DFF6E;
  /* R16/G3 · negro puro, para los filetes de 3px que enmarcan objetivo, línea y cifras. No es el
   * carbón `--l1` (#0A0A0A) del fondo: el marco pedido es negro, y tenerlos separados evita que
   * alguien "unifique" los dos y cambie un fondo creyendo que retoca un borde. */
  --negro:#000000;

  /* medidas */
  --filete:3px;
}

*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html,body{
  background:var(--fondo);
  color:var(--tinta);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* R15 - base 20px: la vista se mira en una sala, no a 40 cm de la pantalla. */
  font-size:20px;
  font-weight:400;
  line-height:1.55;
}
a{color:var(--azul-t);text-decoration:none;border-bottom:1px solid var(--linea)}
a:hover{color:var(--magenta-t);border-bottom-color:var(--magenta)}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
::selection{background:var(--hueco-fondo);color:var(--tinta)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--fondo-alt)}
::-webkit-scrollbar-thumb{background:var(--linea)}

/* ── cabecera ─────────────────────────────────────────────────────────────── */
header{display:flex;align-items:center;gap:18px;padding:18px 24px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.logo{font-weight:600;font-size:22px;letter-spacing:-.01em}
.logo span{color:var(--magenta-t)}
.hsep{width:1px;height:24px;background:var(--linea)}
.hprod{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.hsub{font-size:13px;color:var(--tinta-2);line-height:1.45}
.hchips{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── chips de honestidad ──────────────────────────────────────────────────── */
.chip{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--linea);color:var(--tinta);background:var(--fondo);
}
.chip.azul{border-color:var(--azul-t);color:var(--azul-t)}
.chip.demo{background:var(--l1);border-color:var(--l1);color:var(--l6)}
.chip.validado{background:var(--azul-t);border-color:var(--azul-t);color:var(--l6)}
.chip.punteado{border-style:dashed;border-color:var(--linea-2);color:var(--tinta)}
.chip.investigar{background:var(--magenta-t);border-color:var(--magenta-t);color:var(--fondo)}
.chip.blanco{border-color:var(--tinta);color:var(--tinta)}

/* ── barra de infraestructura ─────────────────────────────────────────────── */
.infra{display:flex;align-items:center;gap:8px;padding:10px 24px;border-bottom:1px solid var(--linea);overflow-x:auto;white-space:nowrap;background:var(--fondo-alt)}
.infra .lbl{font-size:11px;letter-spacing:.08em;color:var(--tinta);text-transform:uppercase;font-weight:600}
.tag{font-size:12px;font-weight:400;padding:3px 8px;border:1px solid var(--linea);color:var(--tinta);background:var(--fondo)}
.tag.nuevo{border-color:var(--azul-t);color:var(--azul-t)}
.tag .mini{font-size:10px;letter-spacing:.06em;color:var(--tinta-2);margin-left:6px}

/* ── rejilla: el DOM sigue el orden del spec; la rejilla lo coloca ────────── */
.grid{
  display:grid;
  grid-template-columns:330px minmax(0,1fr) 350px;
  grid-template-areas:
    "fuentes deteccion cartas"
    "fuentes match     cartas"
    "fuentes ruta      eventos"
    "fuentes borradores eventos";
  align-items:start;
}
#seccion-fuentes{grid-area:fuentes}
#seccion-deteccion{grid-area:deteccion}
#seccion-cartas{grid-area:cartas}
#seccion-match{grid-area:match}
#seccion-ruta{grid-area:ruta}
#seccion-borradores{grid-area:borradores}
#seccion-eventos{grid-area:eventos}

section{padding:20px 22px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);min-width:0}
h2{font-size:20px;font-weight:600;color:var(--tinta);margin-bottom:14px;line-height:1.25}
h2 em{font-style:normal;color:var(--tinta-2);font-weight:400;font-size:13px;display:block;margin-top:2px}
h3{font-size:17px;font-weight:600;margin-bottom:8px}

.cargando{color:var(--tinta-2);font-size:13px;padding:22px 0;text-align:center}
.vacio{color:var(--tinta-2);font-size:13px;padding:10px 0;border-top:1px solid var(--linea)}
.err{border-left:var(--filete) solid var(--magenta);border-top:1px solid var(--linea);border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);color:var(--magenta-t);padding:10px 12px;font-size:13px;line-height:1.5;margin-bottom:10px}

/* ── tarjeta genérica ─────────────────────────────────────────────────────── */
.tarjeta{border:1px solid var(--linea);background:var(--fondo);padding:12px 14px;margin-bottom:10px}
.tarjeta .n{font-weight:600;font-size:15px;color:var(--tinta)}
.tarjeta .d{font-size:14px;color:var(--tinta);margin-top:4px;line-height:1.5}
.tarjeta .s{font-size:13px;color:var(--tinta-2);margin-top:5px;font-family:inherit;line-height:1.45}
.vintage{font-size:13px;color:var(--tinta-2);margin-top:5px;line-height:1.45;font-variant-numeric:tabular-nums}

/* ── semáforo · SIN VERDE · invertido para fondo claro ────────────────────
 * Ningún estado se codifica SOLO por color: cada uno lleva su rótulo en texto y su filete, para
 * que se lea en escala de grises y en un video comprimido. El filete de POR VERIFICAR usa
 * --tinta-2 y no --linea: la adenda pedía --linea, pero ese gris da 1,45:1 y reprobaría su
 * propio mínimo de 3:1 para un borde portador de estado. Se honró la regla medible. */
.st{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;display:inline-block;padding:2px 0}
.sem-activa{color:var(--azul-t)}
.sem-gestion{color:var(--tinta);background:var(--fondo-alt);padding:2px 6px}
.sem-alerta{color:var(--magenta-t)}
.sem-verificar{color:var(--tinta-2)}
.b-activa{border-left:var(--filete) solid var(--azul)}
.b-gestion{border-left:var(--filete) solid var(--tinta)}
.b-alerta{border-left:var(--filete) solid var(--magenta)}
.b-verificar{border-left:var(--filete) solid var(--tinta-2)}

/* ── fuentes ──────────────────────────────────────────────────────────────── */
.fuente .conteo{font-size:14px;color:var(--tinta);margin-top:5px}
.fuente .errtx{font-size:13px;color:var(--magenta-t);margin-top:6px;line-height:1.5}

/* ── feed de detección / eventos ──────────────────────────────────────────── */
.evlog{font-size:13px;line-height:1.6;color:var(--tinta);max-height:440px;overflow-y:auto;border:1px solid var(--linea);background:var(--fondo);padding:10px 12px;font-variant-numeric:tabular-nums}
.ev{display:block;border-bottom:1px solid var(--linea);padding:5px 0}
.ev .h{color:var(--tinta-2)}
.ev .n{color:var(--tinta);font-weight:600}
.ev.azul .n{color:var(--azul-t)}
.ev.mag .n{color:var(--magenta-t)}
.ev .det{color:var(--tinta-2)}

/* ── match, requisito por requisito ───────────────────────────────────────── */
.match-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.match-head .p{font-weight:600;font-size:18px}
.score{margin-left:auto;font-size:20px;font-weight:500;color:var(--azul-t);font-variant-numeric:tabular-nums}
.req{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--linea);font-size:14px;color:var(--tinta)}
.req .ic{flex:none;width:16px;font-weight:600}
.req.cumple .ic{color:var(--azul-t)}
.req.pendiente .ic{color:var(--magenta-t)}
.req.no_verificable .ic{color:var(--tinta-2)}
.req .src{display:block;font-size:13px;color:var(--tinta-2);margin-top:4px;line-height:1.45}
.req .own{display:block;font-size:13px;color:var(--tinta);margin-top:4px}
.req .own b{color:var(--magenta-t);font-weight:600}

/* ── ruta ─────────────────────────────────────────────────────────────────── */
.paso{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--linea);font-size:14px}
.paso .num{flex:none;width:22px;height:22px;border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums}
.paso .tx{color:var(--tinta)}
.paso .tx b{color:var(--tinta);font-weight:600}
.paso .eta{margin-left:auto;font-size:13px;color:var(--tinta-2);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.veredicto{margin-top:12px;padding:10px 12px;border:1px solid var(--linea);border-left:var(--filete) solid var(--azul);font-size:14px;color:var(--azul-t);font-weight:600}
.veredicto.alerta{border-left-color:var(--magenta);color:var(--magenta-t)}
.veredicto.gestion{border-left-color:var(--tinta);color:var(--tinta);background:var(--fondo-alt)}
.veredicto.verificar{border-left-color:var(--tinta-2);color:var(--tinta-2)}
.veredicto .razon{display:block;font-weight:400;color:var(--tinta);margin-top:5px;font-size:13px}

/* ── borradores ───────────────────────────────────────────────────────────── */
.encabezado-borrador{border:1px solid var(--tinta);color:var(--tinta);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;margin-bottom:12px;line-height:1.5}
.doc{font-size:15px;line-height:1.6;color:var(--tinta);border-top:1px solid var(--linea);padding-top:14px;white-space:pre-wrap}
.doc b{font-weight:600}
.hueco{background:var(--hueco-fondo);color:var(--hueco-tinta);border-left:var(--filete) solid var(--magenta);padding:3px 8px;font-size:14px;display:inline-block;margin:3px 0;line-height:1.5}
.hueco b{color:var(--hueco-tinta);font-weight:600}
.firma{font-size:13px;color:var(--tinta);margin-top:12px;border-top:1px solid var(--linea);padding-top:10px}
.acciones{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{border:1px solid var(--magenta-t);color:var(--magenta-t);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;background:var(--fondo)}
.btn:hover{background:var(--magenta-t);color:var(--fondo)}
.btn.sec{border-color:var(--linea);color:var(--tinta)}
.btn.sec:hover{background:var(--fondo-alt);color:var(--tinta)}

/* ── alertas ──────────────────────────────────────────────────────────────── */
.alerta-reg{border:1px solid var(--linea);background:var(--fondo);padding:11px 13px;margin-bottom:10px;font-size:14px}
.alerta-reg .canal{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--tinta)}
.alerta-reg .texto{color:var(--tinta);margin-top:6px;white-space:pre-wrap;font-size:13px;line-height:1.5}

/* ── R8 · sello demo y banda de sesión ────────────────────────────────────
 * El sello es lo primero que se ve y no se va con el scroll: la página reproduce la FORMA de un
 * documento de C2X, y confundirla con la plataforma real sería el peor malentendido posible
 * con el repositorio congelado en judging (CLAUDE.md §1). */
.sello{
  background:var(--hueco-fondo);color:var(--hueco-tinta);
  border-bottom:var(--filete) solid var(--magenta);
  padding:10px 24px;font-size:13px;font-weight:600;line-height:1.45;
}
.banda-sesion{
  background:var(--fondo-alt);color:var(--tinta);border-bottom:1px solid var(--linea);
  padding:8px 24px;font-size:12px;letter-spacing:.04em;
}

/* ── R8 · rejilla del documento y tabla de Financiación ───────────────────── */
.grid-doc{display:grid;grid-template-columns:360px minmax(0,1fr);align-items:start}
#seccion-documento{border-right:1px solid var(--linea)}
.tabla-fin{border:1px solid var(--linea);margin-top:8px}
.fila-fin{display:grid;grid-template-columns:1.4fr 1.2fr 1.2fr .9fr;border-bottom:1px solid var(--linea)}
.fila-fin:last-child{border-bottom:none}
.fila-fin.cabecera{background:var(--fondo-alt);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.fila-fin .cel{padding:12px 14px;border-right:1px solid var(--linea);min-width:0;font-size:14px}
.fila-fin .cel:last-child{border-right:none}
.fila-fin .cel .src{display:block;font-size:13px;color:var(--tinta-2);margin-top:4px;line-height:1.45;text-transform:none;letter-spacing:0;font-weight:400}
.fila-fin .cel .own{display:block;font-size:13px;color:var(--tinta);margin-top:4px}
.fila-fin .cel .own b{color:var(--magenta-t);font-weight:600}
.fila-fin .cel .tx{font-weight:600}

/* ── R8 · pestañas del motor ──────────────────────────────────────────────── */
.pestanas{display:flex;gap:0;border-bottom:1px solid var(--linea);padding:0 24px;background:var(--fondo)}
.pestana{
  padding:12px 18px;font-size:14px;font-weight:600;color:var(--tinta-2);
  border:1px solid transparent;border-bottom:var(--filete) solid transparent;background:none;
}
.pestana:hover{color:var(--tinta)}
.pestana[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--magenta)}
.pestana:focus-visible{outline:2px solid var(--azul-t);outline-offset:-2px}
.panel[hidden]{display:none}
.proxima{
  border:1px solid var(--linea);border-left:var(--filete) solid var(--azul);
  padding:10px 12px;margin-bottom:12px;font-size:14px;font-variant-numeric:tabular-nums;
}
.proxima b{font-weight:600}
.ev.nuevo{background:var(--hueco-fondo)}

/* ── R9 · diseño en dos capas ─────────────────────────────────────────────
 * Capa 1 a la vista, capa 2 a un clic. El botón "i" es el mismo patrón que ya usa la
 * plataforma anfitriona junto a cada dato, así que al usuario no le resulta nuevo. */
.dato{display:inline-block;margin:2px 0}
.dato .et{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.dato .capa1{font-size:15px}
.dato .dueno b{color:var(--magenta-t);font-weight:600}
.ver{
  display:inline-block;width:18px;height:18px;line-height:16px;text-align:center;
  border:1px solid var(--linea);color:var(--tinta-2);font-size:11px;font-weight:600;
  margin-left:6px;vertical-align:middle;background:var(--fondo);
}
.ver:hover{border-color:var(--azul-t);color:var(--azul-t)}
.ver:focus-visible{outline:2px solid var(--azul-t);outline-offset:1px}
.ver[aria-expanded="true"]{background:var(--fondo-alt);color:var(--tinta);border-color:var(--tinta)}
/* R15 - la capa 2 ya no se despliega en su sitio: su contenido lo lee el modal. La regla
   incondicional esta al final del archivo, con el resto del tablero de seis pestanas. */
.capa2 .pl{display:block}
.capa2 .pl b{font-weight:600}

/* ── R9 · la plataforma anfitriona ────────────────────────────────────────── */
.host-header{background:var(--tinta);color:var(--fondo);display:flex;align-items:center;gap:16px;padding:14px 24px;flex-wrap:wrap}
.host-header .marca{font-weight:600;font-size:18px}
.host-header .marca span{color:var(--magenta)}
.host-header nav{display:flex;gap:18px}
.host-header nav a{color:var(--linea);font-size:13px;border:none}
.host-header nav a:hover{color:var(--fondo);border-bottom:1px solid var(--magenta)}
.host-header .usuario{margin-left:auto;font-size:12px;color:var(--linea)}
.host-header .ctx{font-size:13px;line-height:1.35}
.host-header .ctx b{font-weight:600}
.host-header .ctx .sub{color:var(--linea);font-size:12px}
.host-header .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.host-header .inerte{border:1px solid var(--tinta-2);color:var(--fondo);padding:6px 10px;font-size:12px;background:none}
.banda-modo{background:var(--magenta);color:var(--fondo);padding:8px 24px;font-weight:600;font-size:13px;letter-spacing:.1em}
.doc{max-width:900px;margin:0 auto;padding:28px 24px 40px}
.kicker{color:var(--magenta-t);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.doc h1{font-size:34px;font-weight:600;line-height:1.15;margin:8px 0 12px}
.doc .intro{font-size:16px;line-height:1.6;color:var(--tinta)}
.seccion-num{display:flex;align-items:center;gap:12px;margin:32px 0 4px}
.seccion-num .n{
  width:26px;height:26px;background:var(--magenta);color:var(--fondo);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none;
}
.seccion-num h2{margin:0;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.regla{border-bottom:1px solid var(--tinta);margin-bottom:14px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0}
.tarjeta-dato{border:1px solid var(--linea);padding:12px 14px}
.tarjeta-dato .et{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.tarjeta-dato .cifra{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2}

/* ── R9 · el plugin dentro de la anfitriona ───────────────────────────────── */
.plugin{border:1px solid var(--linea);border-left:var(--filete) solid var(--azul);margin-top:12px}
.plugin .rotulo{background:var(--fondo-alt);padding:10px 14px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--linea)}
.plugin .rotulo b{color:var(--azul-t)}
.fila-inst{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;border-bottom:1px solid var(--linea)}
.fila-inst:last-of-type{border-bottom:none}
.fila-inst.cabecera{background:var(--fondo-alt);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.fila-inst .cel{padding:11px 14px;border-right:1px solid var(--linea);min-width:0;font-size:14px}
.fila-inst .cel:last-child{border-right:none}
.cta{
  display:inline-block;margin:16px 0 0;padding:14px 22px;background:var(--magenta-t);color:var(--fondo);
  font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--magenta-t);
}
.cta:hover{background:var(--fondo);color:var(--magenta-t);border-bottom-color:var(--magenta-t)}

/* ── R9 · maestro-detalle de instrumentos ─────────────────────────────────── */
.host-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;align-items:start}
.doc .seccion{margin-bottom:26px}
.no-recreado{border-left:var(--filete) solid var(--linea);padding-left:12px;margin-top:26px}

/* El panel de cobertura va oscuro y pegajoso: es el marcador del documento anfitrión, y tiene
   que seguir visible mientras se baja hasta la financiación. */
.cobertura{position:sticky;top:0;background:var(--tinta);color:var(--fondo);padding:20px 18px;margin:28px 24px 40px 0}
.cobertura .ct{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--linea)}
.cobertura .cn{font-size:46px;font-weight:500;line-height:1.05;margin:6px 0 2px;color:var(--magenta)}
.cobertura .cl{font-size:13px;color:var(--linea);margin-bottom:14px}
.cobertura .cfila{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--tinta-2);font-size:13px}
.cobertura .cfila b{font-weight:600;font-variant-numeric:tabular-nums}
.cobertura .cpie{margin-top:14px;font-size:12px;line-height:1.5;color:var(--linea)}

/* La cabecera de RESOLVE, mínima: marca, pestañas y las tres advertencias que la regla de dos
   capas prohíbe esconder. Todo lo demás vive en el pie. */
header.minima{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid var(--tinta)}
header.minima .logo{font-size:20px;font-weight:600;border:none}
header.minima .avisos{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}
header.minima .avisos .ley{max-width:340px;line-height:1.4}
.volver{display:inline-block;padding:10px 24px 0;font-size:13px}

.maestro-detalle{display:grid;grid-template-columns:340px minmax(0,1fr);align-items:start}
.maestro{border-right:1px solid var(--linea)}
.maestro h2,.detalle-col h2{margin:0}
.detalle-col{padding:0 24px 40px}
.agregado{padding:14px 16px;border-bottom:1px solid var(--linea);background:var(--fondo-alt)}
.agregado .capa1 b{font-size:22px;font-variant-numeric:tabular-nums}
.lista-inst{border-right:none}
.item-inst{display:block;width:100%;text-align:left;padding:12px 16px;border:none;border-bottom:1px solid var(--linea);background:none;cursor:pointer}
.item-inst:hover{background:var(--fondo-alt)}
.item-inst[aria-current="true"]{background:var(--fondo-alt);border-left:var(--filete) solid var(--magenta)}
.item-inst .n{font-size:14px;font-weight:600;display:block;line-height:1.35}
.item-inst .st{display:inline-block;margin:5px 8px 5px 0;font-size:11px}
.item-inst .pr{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--tinta-2)}
.item-inst:focus-visible{outline:2px solid var(--azul-t);outline-offset:-2px}

/* La barra solo existe cuando hay pasos que contar. `.barra.sin` no dibuja nada: dice por qué. */
.barra{height:12px;background:var(--fondo-alt);border:1px solid var(--linea);position:relative;margin-top:6px}
.barra-pct{display:block;height:100%;background:var(--azul)}
.barra-tx{display:block;font-size:11px;color:var(--tinta-2);font-variant-numeric:tabular-nums;margin-top:3px}
.barra.sin{height:auto;background:none;border:none;border-left:var(--filete) solid var(--linea);padding-left:10px;margin-top:8px}

.detalle{padding-top:18px}
.det-head{border-bottom:1px solid var(--tinta);padding-bottom:14px;margin-bottom:6px}
.det-head h3{font-size:22px;font-weight:600;margin:0 0 10px}
.det-head .dato{margin-right:22px}
.detalle h4{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:26px 0 8px;border-bottom:1px solid var(--linea);padding-bottom:6px}
.detalle h4 em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--tinta-2)}
button.exportar{cursor:pointer}

.req-fila{display:grid;grid-template-columns:150px minmax(0,1fr) 170px;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--linea)}
.ruta-toggle{border:1px solid var(--linea);padding:6px 10px;font-size:12px;font-weight:600;background:var(--fondo)}
.ruta-toggle:hover{border-color:var(--azul-t);color:var(--azul-t)}
.ruta-toggle:focus-visible{outline:2px solid var(--azul-t);outline-offset:1px}

/* Las propuestas van SEPARADAS de las fuentes vigiladas, y se ven distintas a propósito. */
.propuestas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:12px}
.tarjeta.propuesta{border-left:var(--filete) dashed var(--tinta-2)}
form.campo{border:none;padding:0;max-width:520px;display:block}
form.campo label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);margin:10px 0 4px}
form.campo input{border:1px solid var(--linea);padding:9px 11px;font-family:inherit;font-size:14px;background:var(--fondo);color:var(--tinta);width:100%}
form.campo input:focus-visible{outline:2px solid var(--azul-t);outline-offset:-1px}
form.campo .cta{margin-top:14px;cursor:pointer}

/* El pie carga la meta que antes ocupaba la cabecera (P4). */
footer.meta .mfila{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
footer.meta .mfila span:last-child{margin-left:auto}

@media(max-width:1000px){
  .host-cuerpo{grid-template-columns:1fr}
  .cobertura{position:static;margin:0 24px 28px}
  .maestro-detalle{grid-template-columns:1fr}
  .maestro{border-right:none;border-bottom:1px solid var(--tinta)}
  .detalle-col{padding-top:0}
}

footer{padding:18px 24px;font-size:13px;color:var(--tinta);line-height:1.6;border-top:1px solid var(--linea);background:var(--fondo-alt)}
footer b{font-weight:600}
.ley{color:var(--tinta-2)}
.disclosure{margin-top:10px;padding:10px 12px;border:1px solid var(--linea);background:var(--fondo);font-size:13px;color:var(--tinta);line-height:1.5}
.disclosure b{color:var(--azul-t);font-weight:600}

/* ═════════════════════════════════════════════════════════════════════════
 * R10 · EL LOOK C2X, COMPLETO (adenda del 24-ago · herencia de diseño declarada)
 *
 * LA CRÍTICA QUE ESTE BLOQUE ATIENDE: en R9 la estructura era correcta y la información salía
 * PLANA — todo al mismo nivel, sin nada que dijera qué contiene a qué. Lo que falta no es
 * decoración: es PROFUNDIDAD. El fondo declara el nivel y se aclara al bajar, así que un
 * encabezado de bloque nunca se confunde con su contenido ni con el sub-bloque de al lado.
 *
 * HOVER MAGENTA GLOBAL. El azul es ESTADO (activo, enlace, progreso); el magenta es
 * INTERACCIÓN. Separarlos evita el equívoco de R9, donde un elemento azul parecía pulsable y
 * uno pulsable parecía informativo.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── L1 · header ──────────────────────────────────────────────────────────── */
.l1{background:var(--l1);color:var(--l6);display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 24px}
.l1 .logo{font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--l6);border:none}
.l1 .logo span{color:var(--magenta)}
.l1 .ctx{font-size:12px;color:var(--gris-claro);line-height:1.4;border-left:1px solid var(--gris-medio);padding-left:20px}
.l1 .ctx b{color:var(--l6);font-weight:600}
.l1 .avisos{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}
.l1 .avisos .ley{max-width:330px;line-height:1.4;color:var(--gris-claro)}
.l1 .avisos .ley b{color:var(--l6);font-weight:600}

/* ── L2 · pestañas ────────────────────────────────────────────────────────
 * R15b/C1 · la barra pasa a BLANCO. Era una franja negra de página entera para seis botones, y
 * competía con el tablero que había debajo. Quien distingue la activa sigue siendo el filete
 * magenta —no la opacidad del texto—, que fue la lección de R10; lo que cambia es que sobre
 * blanco la inactiva va en `--tinta-2` y la activa en carbón. A 20px, como toda la vista. */
.l2{background:var(--l6);display:flex;gap:0;padding:0 24px;overflow-x:auto;border-bottom:1px solid var(--linea)}
.l2 .pestana{
  padding:14px 22px;font-size:20px;font-weight:600;color:var(--tinta-2);background:none;
  border:none;border-bottom:var(--filete) solid transparent;white-space:nowrap;
}
.l2 .pestana:hover{border-bottom-color:var(--magenta);color:var(--tinta)}
.l2 .pestana[aria-selected="true"]{border-bottom-color:var(--magenta);color:var(--tinta)}
.l2 .pestana:focus-visible{outline:2px solid var(--azul-t);outline-offset:-3px}

/* ── L3 · encabezado de bloque mayor ──────────────────────────────────────── */
.l3{background:var(--l3);color:var(--l6);padding:12px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.l3 .caret{color:var(--azul);font-size:18px;font-weight:800;line-height:1}
.l3 h3{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0;color:var(--l6)}
.l3 .der{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gris-claro)}

/* ── L5 · encabezado de sub-bloque ────────────────────────────────────────── */
.l5{background:var(--l5);color:var(--tinta);border-bottom:1px solid var(--linea-2);padding:9px 18px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.l5 .der{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:400;font-size:12px;color:var(--gris-medio)}

/* ── STAT-CARD (c2x-07) ───────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;border:1px solid var(--linea)}
.stat{padding:16px 18px;border-right:1px solid var(--linea);min-width:0}
.stat:last-child{border-right:none}
.stat .cifra{font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block}
.stat .uni{font-size:13px;font-weight:400;color:var(--gris-medio);margin-left:6px}
.stat.clave .uni{color:var(--gris-claro)}
.stat .rot{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-medio);display:block;margin-top:6px}
.stat .pie{font-size:12px;color:var(--gris-medio);display:block;margin-top:8px;line-height:1.45}
/* La tarjeta clave se invierte, como la de DÉFICIT TOTAL en c2x-07. */
.stat.clave{background:var(--l1);color:var(--l6)}
.stat.clave .cifra{color:var(--magenta)}
.stat.clave .rot,.stat.clave .pie{color:var(--gris-claro)}
.stat.clave .chip{border-color:var(--gris-medio);color:var(--l6);background:none}

/* ── NOTA DE PÁGINA (c2x-07): el patrón de las advertencias de capa 1 ─────── */
.nota{background:var(--gris-suave);border:1px solid var(--linea-2);padding:10px 14px;margin:12px 0;font-size:13px;line-height:1.5;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.nota .tx{flex:1;min-width:220px}

/* ── FILA DE INSTRUMENTO (c2x-11): bullet + nombre + "N/M requisitos" ──────
 * SIN columna de avance, por decisión del fundador: el avance vive en el detalle. Un % en la
 * lista invita a comparar instrumentos que no son comparables. */
/* El filete de selección nace transparente en TODAS las filas: pintarlo solo en la activa
   desplazaría el texto al seleccionar, y una lista que salta al hacer clic se siente rota. */
.inst{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:13px 18px 13px 15px;border:none;border-left:var(--filete) solid transparent;border-bottom:1px solid var(--linea);background:none}
.inst .bullet{flex:none;width:8px;height:8px;margin-top:7px;background:var(--gris)}
.inst .bullet.sem-activa{background:var(--azul)}
.inst .bullet.sem-alerta{background:var(--magenta)}
.inst .bullet.sem-gestion{background:var(--tinta)}
.inst .bullet.sem-verificar{background:var(--gris)}
.inst .cuerpo{min-width:0;flex:1}
.inst .nom{font-size:14px;font-weight:600;line-height:1.35;display:block;color:var(--tinta)}
.inst .sub{font-size:12px;color:var(--gris-medio);display:block;margin-top:3px}
.inst .der{flex:none;text-align:right;font-size:12px;color:var(--gris-medio)}
.inst:hover{background:var(--gris-suave)}
.inst:hover .nom{color:var(--magenta-t)}
.inst[aria-current="true"]{background:var(--gris-suave);border-left-color:var(--magenta)}
.inst:focus-visible{outline:2px solid var(--azul-t);outline-offset:-2px}

/* ── BARRA DE PROGRESO · AZUL sobre riel L5 (regla de la adenda: azul = progreso) ──
 * DIVERGENCIA MEDIDA, como la de R7. La adenda pide relleno `--azul` #0193CE sobre riel
 * #EEEEEE: ese par da 2,98:1 y reprueba por poco el mínimo de 3:1 que exige un elemento
 * NO textual cuyo tamaño ES el dato. `--azul-t` es el mismo azul un paso más oscuro y pasa.
 * El relleno de una barra no es adorno: si no se distingue del riel, el dato desaparece. */
.pbar{display:block;height:8px;background:var(--l5);border:none;position:relative;min-width:80px}
.pbar i{display:block;height:100%;background:var(--azul-t)}
.pbar-tx{font-size:12px;font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums;margin-left:8px}
.pbar-sin{font-size:12px;color:var(--gris-medio);line-height:1.45}

/* ── FILTROS de la pestaña de instrumentos ────────────────────────────────── */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 18px;border-bottom:1px solid var(--linea)}
.filtro{
  border:1px solid var(--linea-2);background:var(--l6);color:var(--tinta);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;
}
.filtro .n{color:var(--gris-medio);margin-left:6px;font-variant-numeric:tabular-nums}
.filtro:hover{border-color:var(--magenta);color:var(--magenta-t)}
.filtro[aria-pressed="true"]{background:var(--l1);color:var(--l6);border-color:var(--l1)}
.filtro[aria-pressed="true"] .n{color:var(--gris-claro)}
.filtro:focus-visible{outline:2px solid var(--azul-t);outline-offset:1px}

/* ── TABLA DE REQUISITOS: requisito · estado · barra · hoja de ruta ───────── */
.reqs{border:1px solid var(--linea);border-top:none}
.req-r{display:grid;grid-template-columns:minmax(0,1fr) 130px 150px 130px;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--linea)}
.req-r:last-child{border-bottom:none}
.req-r .rn{font-size:14px;font-weight:600;line-height:1.35}
.req-r .re{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-medio)}
.req-r .re.completado{color:var(--azul-t)}
.req-r .re.en-progreso{color:var(--tinta)}
.req-r .re.en-ceros{color:var(--gris-medio)}
.req-r .rb{display:flex;align-items:center}
.btn-ruta{border:1px solid var(--linea-2);background:var(--l6);color:var(--tinta);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;width:100%}
.btn-ruta:hover{background:var(--magenta);border-color:var(--magenta);color:var(--l6)}
.btn-ruta:focus-visible{outline:2px solid var(--azul-t);outline-offset:1px}
.btn-ruta[disabled]{border-style:dashed;color:var(--gris-medio);cursor:default}
.btn-ruta[disabled]:hover{background:var(--l6);border-color:var(--linea-2);color:var(--gris-medio)}

/* ── MODAL "HOJA DE RUTA" · componente propio, NUNCA un diálogo del navegador
 * Un alert() del navegador rompe el sistema de diseño y, peor, no puede llevar chips ni citas:
 * la procedencia se perdería justo donde hace falta. */
.overlay{position:fixed;inset:0;background:var(--l2);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;z-index:50}
.overlay[hidden]{display:none}
.modal{background:var(--l6);width:100%;max-width:720px;border:1px solid var(--l1)}
.modal .l3{justify-content:space-between}
.modal .cerrar{color:var(--gris-claro);font-size:18px;font-weight:600;line-height:1;padding:4px 8px;background:none;border:none}
.modal .cerrar:hover{color:var(--magenta)}
.modal .cerrar:focus-visible{outline:2px solid var(--magenta);outline-offset:1px}
.modal .cuerpo{padding:18px}
/* Wizard C2X: una fila de segmentos, cumplido magenta, pendiente #EEEEEE. */
.prog{display:flex;gap:4px;margin-bottom:6px}
.prog i{flex:1;height:4px;background:var(--l5)}
.prog i.ok{background:var(--magenta)}
.prog-rot{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio);margin-bottom:16px;display:block}
.mpaso{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--linea)}
.mpaso .num{width:26px;height:26px;border:1px solid var(--linea-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.mpaso.ok .num{background:var(--magenta);border-color:var(--magenta);color:var(--l6)}
.mpaso .tt{font-size:14px;font-weight:600;line-height:1.35}
.mpaso .li{font-size:13px;color:var(--tinta);margin-top:4px;line-height:1.5}
.mpaso .li b{font-weight:600}
.mpaso .mu{font-size:12px;color:var(--gris-medio);margin-top:4px;line-height:1.45}

/* ── HOVER MAGENTA GLOBAL (adenda): el magenta es interacción, el azul es estado ──
 * Va al final, después de los componentes, para que ninguno se quede sin él por orden de
 * cascada; los que necesitan otro hover ya lo declararon arriba con la misma especificidad. */
button:hover{color:var(--magenta-t)}

/* ═════════════════════════════════════════════════════════════════════════
 * R11 · EL PLAN DE FINANCIACIÓN
 * ═════════════════════════════════════════════════════════════════════════ */

/* LA BANDA DE META VA PEGADA ARRIBA. No es un capricho de maquetación: la meta, el horizonte y
 * la cobertura son la única respuesta que quien formula necesita tener a la vista mientras
 * recorre las fases y la to-do list. Si se va con el scroll, la pantalla vuelve a ser una lista
 * de trámites. `top:0` porque la barra de pestañas no es pegajosa: nada la tapa. */
.banda-meta{
  position:sticky;top:0;z-index:20;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:1px solid var(--linea);border-bottom:var(--filete) solid var(--l1);
  background:var(--l6);
}
.banda-meta .stat{border-right:1px solid var(--linea);padding:18px}
.banda-meta .stat:last-child{border-right:none}
.banda-meta .cifra{font-size:40px}

/* Las perillas: controles del usuario, con el recordatorio de que mover la meta no la vuelve
 * cierta. */
.perillas{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--linea)}
.perillas label{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio);margin-bottom:5px}
.perillas label .uni{text-transform:none;letter-spacing:0;color:var(--gris-medio)}
.perillas input{border:1px solid var(--linea-2);padding:9px 11px;font-family:inherit;font-size:15px;background:var(--l6);color:var(--tinta);min-width:170px;font-variant-numeric:tabular-nums}
.perillas input:focus-visible{outline:2px solid var(--azul-t);outline-offset:-1px}
.nota-perilla{font-size:12px;color:var(--gris-medio);line-height:1.4;max-width:340px}

/* Las fases: qué se gestiona primero, con su meta acumulada y su fecha. */
.fases{border:1px solid var(--linea);border-top:none}
.fase{display:grid;grid-template-columns:52px minmax(0,1fr) 150px;gap:12px;align-items:start;padding:14px 18px;border-bottom:1px solid var(--linea)}
.fase:last-child{border-bottom:none}
.fase .fn{font-size:18px;font-weight:800;color:var(--magenta-t);font-variant-numeric:tabular-nums}
.fase .ft{font-size:15px;font-weight:600;line-height:1.35}
.fase .fm{font-size:13px;color:var(--gris-medio);margin-top:5px;font-variant-numeric:tabular-nums}
.fase .fm b{color:var(--tinta);font-weight:600}
.fase .fm.alerta{color:var(--magenta-t)}
.fase .fd{text-align:right}

/* LA TO-DO LIST: estado · acción · responsable · fecha · instrumento. */
.todo{border:1px solid var(--linea);border-top:none}
.todo-r{display:grid;grid-template-columns:110px minmax(0,1fr) 150px 120px 220px;gap:12px;align-items:start;padding:11px 18px;border-bottom:1px solid var(--linea)}
.todo-r:last-child{border-bottom:none}
.todo-r.cabecera{background:var(--l5);border:1px solid var(--linea);border-bottom:1px solid var(--linea-2);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio)}
.todo-r .te{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--tinta)}
.todo-r.hecha .te{color:var(--azul-t)}
.todo-r.hecha .ta{color:var(--gris-medio)}
.todo-r .ta{font-size:14px;line-height:1.4;min-width:0}
.todo-r .tf{font-size:13px;color:var(--tinta);font-variant-numeric:tabular-nums}
.todo-r .ti{min-width:0}
.resp{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;padding:3px 8px;border:1px solid var(--linea-2)}
.resp.r-resolve{background:var(--l1);border-color:var(--l1);color:var(--l6)}
.resp.r-mixto{border-color:var(--azul-t);color:var(--azul-t)}
.enlace-inst{font-size:13px;color:var(--azul-t);text-align:left;background:none;border:none;border-bottom:1px solid var(--linea);padding:0;line-height:1.35}
.enlace-inst:hover{color:var(--magenta-t);border-bottom-color:var(--magenta)}
.enlace-inst:focus-visible{outline:2px solid var(--azul-t);outline-offset:2px}
.sel-inst{border:1px solid var(--linea-2);background:var(--l6);color:var(--tinta);font-family:inherit;font-size:12px;padding:7px 10px}
.sel-inst:focus-visible{outline:2px solid var(--azul-t);outline-offset:1px}

/* La bandeja de novedades del watchdog. */
.novedades{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin:12px 0}
.novedad{border:1px solid var(--linea);border-left:var(--filete) solid var(--magenta);padding:14px 16px}
.novedad .nn{font-size:15px;font-weight:600;line-height:1.3}
.novedad .nf{font-size:12px;color:var(--gris-medio);margin-top:4px}
.novedad .nd{font-size:13px;margin-top:7px;line-height:1.45}
.novedad .nb{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.novedad .nb .cta{margin:0;padding:9px 14px}
.descartados{border:1px dashed var(--linea-2);padding:10px 14px;margin-top:10px;font-size:13px;color:var(--gris-medio)}
.descartados .btn{margin-left:6px;padding:6px 10px}

/* El selector de persona, en L1. Mismo producto, otro sector. */
.personas-wrap{display:flex}
.personas{display:flex;gap:8px}
.persona{border:1px solid var(--gris-medio);background:none;color:var(--l6);padding:7px 12px;text-align:left;line-height:1.2}
.persona .pn{display:block;font-size:13px;font-weight:600}
.persona .ps{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-claro)}
.persona:hover{border-color:var(--magenta);color:var(--l6)}
.persona[aria-pressed="true"]{background:var(--l6);border-color:var(--l6);color:var(--tinta)}
.persona[aria-pressed="true"] .ps{color:var(--gris-medio)}
.persona:focus-visible{outline:2px solid var(--magenta);outline-offset:1px}

/* Una persona sin motor detrás se ve distinta: la advertencia no puede parecer decorativa. */
.nota.sin-motor{border-left:var(--filete) solid var(--magenta);background:var(--hueco-fondo)}

@media(max-width:1100px){
  .todo-r{grid-template-columns:90px minmax(0,1fr) 130px;grid-auto-rows:auto}
  .todo-r .tf,.todo-r .ti{grid-column:2 / -1}
}

@media(max-width:1180px){
  .grid{grid-template-columns:1fr;grid-template-areas:"fuentes" "deteccion" "cartas" "match" "ruta" "borradores" "eventos"}
  section{border-right:none}
}

/* ── R9 · la fila de requisito: barra · nombre · estado ───────────────────── */
.req-cab{display:grid;grid-template-columns:150px minmax(0,1fr) 170px;gap:12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);padding-bottom:6px}
.req-fila .cel-barra{padding-top:2px}
.req-fila .cel-nom .dato{display:block}
.req-fila .cel-est .pr{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--tinta-2)}
.req-fila .capa2 .req{border:none;padding:0}

/* ── R12 · el marcador del guardián ───────────────────────────────────────
 * Va al tope de la pestaña del motor: antes de enseñar lo que el agente encontró, se enseña lo
 * que el agente se rechazó a sí mismo. La cifra del panel es texto ("14/14 · PANEL VERDE"), así
 * que necesita un cuerpo menor que un número suelto. */
.stats.marcador{margin-bottom:18px}
.stats.marcador .cifra{font-size:34px}
.stats.marcador .stat:last-child .cifra{font-size:22px;line-height:1.25}

/* ── R13 · el cierre financiero y su mezcla ───────────────────────────────
 * Las barras de la mezcla usan el riel L5 y relleno CARBÓN, no azul: el azul es progreso, y una
 * naturaleza no es un avance. Pintarla del color del progreso le daría un significado que no
 * tiene. Ningún color nuevo entra a la paleta por esta fila. */
.subtitulo-plan{padding:14px 18px 0;font-size:20px;font-weight:600;line-height:1.25}
.subtitulo-plan .d{display:block;font-size:13px;font-weight:400;color:var(--gris-medio);margin-top:4px;max-width:820px}
.mezcla{border:1px solid var(--linea);border-top:none}
.mix-r{display:grid;grid-template-columns:150px minmax(0,1fr) 150px 110px;gap:12px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--linea)}
.mix-r .mx-b .pbar i{background:var(--l1)}
.mix-r .mx-v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.mix-r .mx-p{display:block;font-size:12px;font-weight:400;color:var(--gris-medio)}
.mix-r .mx-d{text-align:right}
.mix-pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 18px;background:var(--gris-suave)}
.chip.nat{border-color:var(--tinta);color:var(--tinta);letter-spacing:.06em}

/* ── R14 · la balanza y el documento leído con visión ─────────────────────
 * Sin librería de gráficos y sin colores nuevos: las barras usan el riel L5 de siempre y el lado
 * dominante se marca en magenta, que ya es el color de la interacción en este sistema. */
.balanza-kpis{margin:12px 0}
.balanza{border:1px solid var(--linea);padding:14px 18px;margin-bottom:12px}
.bz-r{display:grid;grid-template-columns:90px minmax(0,1fr) 220px;gap:12px;align-items:center;padding:7px 0}
.bz-r .bz-n{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio)}
.bz-r .bz-b .pbar{height:14px}
.bz-r .bz-b .pbar i{background:var(--tinta)}
.bz-r .bz-b .pbar i.domina{background:var(--magenta)}
.bz-r .bz-v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.bz-r .bz-u{display:block;font-size:11px;font-weight:400;color:var(--gris-medio)}

.antes-despues{border:1px solid var(--linea);margin-bottom:12px}
.ad-r{display:grid;grid-template-columns:130px 1fr 30px 1fr 120px;gap:10px;align-items:center;padding:9px 18px;border-bottom:1px solid var(--linea);font-size:14px;font-variant-numeric:tabular-nums}
.ad-r:last-child{border-bottom:none}
.ad-r.cabecera{background:var(--l5);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio)}
.ad-r .ad-n{font-weight:600}
.ad-r .ad-a{color:var(--gris-medio)}
.ad-r .ad-f{color:var(--gris-medio);text-align:center}
.ad-r .ad-x{color:var(--magenta-t);font-size:13px;text-align:right}

.veredicto-bz{border:1px solid var(--linea);border-left:var(--filete) solid var(--tinta);padding:14px 18px}
.veredicto-bz .vb-t{font-size:22px;font-weight:800;letter-spacing:-.01em}
.veredicto-bz .vb-r{font-size:13px;color:var(--gris-medio);margin-top:5px;line-height:1.5;max-width:760px}
.veredicto-bz .vb-f{font-size:14px;margin-top:8px;line-height:1.5}
.veredicto-bz.v-alto,.veredicto-bz.v-vale{border-left-color:var(--azul)}
.veredicto-bz.v-alto .vb-t,.veredicto-bz.v-vale .vb-t{color:var(--azul-t)}
.veredicto-bz.v-costoso,.veredicto-bz.v-nosuma{border-left-color:var(--gris)}
.veredicto-bz.v-costoso .vb-t,.veredicto-bz.v-nosuma .vb-t{color:var(--gris-medio)}
.veredicto-bz.v-retrasa{border-left-color:var(--magenta)}
.veredicto-bz.v-retrasa .vb-t{color:var(--magenta-t)}

.docs-visuales{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;margin-top:12px}
.doc-visual{border-left:var(--filete) solid var(--azul)}
.doc-visual.rechazada{border-left-color:var(--magenta)}
.cita-visual{border-left:var(--filete) solid var(--linea-2);background:var(--gris-suave);padding:10px 14px;margin:9px 0;font-size:14px;line-height:1.5}

/* ═════════════════════════════════════════════════════════════════════════
 * R15 · EL TABLERO DE SEIS PESTAÑAS, EN LIENZO CLARO Y A 20 px
 * ═════════════════════════════════════════════════════════════════════════ */

/* CAPA 2 = SOLO MODALES. El nodo sigue en el DOM —es lo que hace auditable la regla de dos
 * capas— pero NO se despliega jamás en su sitio: su contenido lo lee el modal. */
.capa2{display:none}
.capa2-modal .pl{display:block;margin-bottom:10px;line-height:1.5;font-size:16px}
.capa2-modal .pl b{font-weight:600}

.claro header.minima{border-bottom:1px solid var(--linea)}
.volver-proyecto{margin-left:auto;white-space:nowrap}

/* ── franjas del tablero ─────────────────────────────────────────────────── */
.franja-alta{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:24px;padding:22px 24px 0}
.franja-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:22px 24px 0;align-items:start}
#stats-plan{padding:22px 24px 30px}

/* ── monto objetivo y su perilla ─────────────────────────────────────────── */
.obj{border:1px solid var(--linea);border-left:var(--filete) solid var(--l1);padding:18px 20px}
.obj-rot{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-medio)}
.obj-cifra{font-size:44px;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:6px 0 4px}
.obj-cifra .obj-u{font-size:20px;font-weight:400;color:var(--gris-medio);margin-left:6px}
.obj-pie{font-size:13px;color:var(--gris-medio);line-height:1.4;margin-top:6px}
.slider{width:100%;margin-top:10px;accent-color:var(--magenta-t)}
.slider-fecha{border:1px solid var(--linea-2);padding:8px 10px;font-family:inherit;font-size:15px;background:var(--l6);color:var(--tinta)}
.slider:focus-visible,.slider-fecha:focus-visible{outline:2px solid var(--azul-t);outline-offset:2px}

/* ── línea de tiempo ─────────────────────────────────────────────────────── */
.linea-tiempo{border:1px solid var(--linea);padding:18px 20px 14px}
.lt-eje{position:relative;height:96px;border-bottom:1px solid var(--tinta);margin-bottom:14px}
.lt-m{position:absolute;bottom:0;transform:translateX(-50%);text-align:center;width:130px}
.lt-f{display:block;width:12px;height:12px;margin:0 auto 4px;background:var(--l1)}
.lt-f.lt-triangulo{width:0;height:0;background:none;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--magenta)}
.lt-r{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-medio)}
.lt-d{display:block;font-size:14px;font-variant-numeric:tabular-nums}
.lt-hueco{font-size:14px;color:var(--gris-medio);padding:6px 0}
.lt-lab{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio);margin-right:8px}

/* ── cóctel: donut SVG, cero librerías ───────────────────────────────────── */
.coctel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;border:1px solid var(--linea);border-top:none;padding:18px 20px;align-items:center}
.donut{position:relative}
.donut svg{width:100%;height:auto;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:18}
.donut .riel{stroke:var(--l5)}
.seg-publica{stroke:var(--nat-publica)}
.seg-banca-desarrollo{stroke:var(--nat-desarrollo)}
.seg-recursos-propios{stroke:var(--verde-mango)}
.seg-banca-privada{stroke:var(--nat-privada)}
.seg-cooperacion{stroke:var(--nat-cooperacion)}
.seg-faltante{stroke:var(--nat-faltante)}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dc-r{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio)}
.dc-v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:2px}
.dc-v.dc-falta{color:var(--magenta-t)}
.leyenda .lg-r{display:grid;grid-template-columns:16px minmax(0,1fr) auto 34px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--linea)}
.leyenda .lg-c{width:14px;height:14px;background:var(--gris)}
.lg-c.seg-publica{background:var(--nat-publica)}
.lg-c.seg-banca-desarrollo{background:var(--nat-desarrollo)}
.lg-c.seg-recursos-propios{background:var(--verde-mango)}
.lg-c.seg-banca-privada{background:var(--nat-privada)}
.lg-c.seg-cooperacion{background:var(--nat-cooperacion)}
.lg-c.seg-faltante{background:var(--nat-faltante)}
.leyenda .lg-n{font-size:14px;font-weight:600}
.leyenda .lg-v{font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.leyenda .lg-p{display:block;font-size:12px;color:var(--gris-medio)}
.lg-pie{font-size:13px;color:var(--gris-medio);padding-top:8px}

/* ── fases sobre una línea ───────────────────────────────────────────────── */
.fases-linea{display:flex;gap:0;border:1px solid var(--linea);border-top:none}
.hito{flex:1;padding:14px 16px;border-right:1px solid var(--linea);border-top:var(--filete) solid var(--linea-2)}
.hito:last-child{border-right:none}
.hito.cierre{border-top-color:var(--magenta);background:var(--gris-suave)}
.hi-n{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta-t)}
.hi-f{font-size:13px;color:var(--gris-medio);margin-top:4px;font-variant-numeric:tabular-nums}
.hi-a{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:4px}
.hi-x{display:block;font-size:13px;line-height:1.4;margin-top:6px;color:var(--tinta)}
.sin-estimar{border:1px dashed var(--linea-2);padding:12px 16px;margin-top:12px}
.se-t{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio)}
.se-i{font-size:14px;margin-top:6px}
.stats-plan{margin-top:0}
.stats-plan .cifra{font-size:34px}

/* ── bandeja en acordeón ─────────────────────────────────────────────────── */
.novedad-ac{border:1px solid var(--linea);margin-bottom:12px}
.nv-cab{display:flex;gap:12px;align-items:center;flex-wrap:wrap;width:100%;text-align:left;padding:14px 18px;background:none;border:none;border-left:var(--filete) solid transparent}
.novedad-ac.abierta .nv-cab{border-left-color:var(--magenta);background:var(--gris-suave)}
.nv-cab:hover{background:var(--gris-suave)}
.nv-cab:focus-visible{outline:2px solid var(--azul-t);outline-offset:-2px}
.nv-n{font-size:17px;font-weight:600}
.nv-f{font-size:13px;color:var(--gris-medio)}
.nv-cuerpo{padding:0 18px 18px}
.nv-kpis{margin-bottom:14px}
.nv-comparar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.mini{border:1px solid var(--linea);padding:12px 14px;text-align:center}
.mini-r{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-medio)}
.mini-d{width:110px;height:110px;transform:rotate(-90deg);margin:8px auto}
.mini-d circle{fill:none;stroke-width:12}
.mini-d .riel{stroke:var(--l5)}
.mini-v,.mini-f{font-size:13px;line-height:1.5}
.mini-f{color:var(--gris-medio)}
.opinion{border:1px solid var(--linea);border-left:var(--filete) solid var(--tinta);padding:14px 18px;margin-bottom:14px}
.opinion .op-r{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-medio)}
.opinion .op-v{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-top:4px}
.opinion.v-alto,.opinion.v-vale{border-left-color:var(--azul)}
.opinion.v-alto .op-v,.opinion.v-vale .op-v{color:var(--azul-t)}
.opinion.v-costoso,.opinion.v-nosuma{border-left-color:var(--gris)}
.opinion.v-costoso .op-v,.opinion.v-nosuma .op-v{color:var(--gris-medio)}
.opinion.v-retrasa{border-left-color:var(--magenta)}
.opinion.v-retrasa .op-v{color:var(--magenta-t)}
.chip.ver-v-alto,.chip.ver-v-vale{border-color:var(--azul-t);color:var(--azul-t)}
.chip.ver-v-costoso,.chip.ver-v-nosuma{border-color:var(--gris-medio);color:var(--gris-medio)}
.chip.ver-v-retrasa{border-color:var(--magenta-t);color:var(--magenta-t)}
.nv-acciones{display:flex;gap:12px;flex-wrap:wrap}
.nv-acciones .cta{margin:0}

/* ── alta manual de tareas ───────────────────────────────────────────────── */
form.campo.alta{display:grid;grid-template-columns:minmax(0,2fr) 180px auto;gap:12px;align-items:end;max-width:100%;padding:18px 24px 0}
form.campo.alta .nota-perilla{grid-column:1 / -1;margin-top:2px}

@media(max-width:1100px){
  .franja-alta,.franja-media,.nv-comparar,.coctel{grid-template-columns:1fr}
  .fases-linea{flex-direction:column}
  .hito{border-right:none;border-bottom:1px solid var(--linea)}
}

/* ═════════════════════════════════════════════════════════════════════════
 * R15b · LAS NUEVE CORRECCIONES DEL FUNDADOR
 * ═════════════════════════════════════════════════════════════════════════ */

/* C1 · la franja negra queda solo para el logo y la salida al proyecto. La barra de pestañas en
 * blanco se define arriba, con el resto del nivel L2: una regla, una verdad. */
header.minima.l1{padding:12px 24px}

/* C2 · el objetivo es heredado: cifra y chips, sin control que lo mueva. */
.obj-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}

/* R17/A1 · LA LÍNEA DE TIEMPO, REHECHA. Todo en cajas: sin SVG estirado, cada forma mide lo que
 * dice medir. Las cotas verticales están declaradas aquí una sola vez —rótulo 0-38, conector
 * 38-56, eje 56-66, conector 66-84, rótulo 84-128— y todo lo demás se cuelga de ellas. */
.lt-lienzo{position:relative;height:128px;margin:0 6px 8px}
.lt-eje{position:absolute;left:0;right:0;top:56px;height:10px;background:var(--l5)}

/* Los tramos, con la paleta del cóctel: negro lo recorrido, azul lo que queda. El de holgura va
 * en riel y el de desborde en magenta — el verde no entra aquí, ver el comentario del render. */
.tr{position:absolute;top:0;height:10px}
.tr-hecho{background:var(--negro)}
.tr-futuro{background:var(--nat-publica)}
.tr-holgura{background:var(--l5)}
.tr-desborde{background:var(--magenta)}

/* Cuatro formas distintas: cuadrado lleno, línea con punta, triángulo y cuadrado hueco. Dos
 * marcas del mismo dibujo pegadas son un borrón — que es lo que se veía en el desplegado. */
.mk{position:absolute;transform:translateX(-50%)}
.mk-formulado{top:0;width:10px;height:10px;background:var(--negro)}
.mk-hoy{top:-8px;width:2px;height:26px;background:var(--negro)}
.mk-hoy::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--negro)}
.mk-cierre{top:-14px;width:0;height:0;border-left:6px solid transparent;
  border-right:6px solid transparent;border-top:12px solid var(--magenta)}
.mk-limite{top:0;width:10px;height:10px;border:2px solid var(--negro);background:var(--l6)}

/* Conectores: verticales de 1px, y en L cuando el rótulo tuvo que apartarse. Jamás en diagonal —
 * una diagonal cruzando el dibujo no dice a qué marca pertenece. */
.cx{position:absolute;background:var(--gris-claro)}
.cx-v{width:1px;transform:translateX(-50%)}
.cx-h{height:1px}
.cx-v.arriba{top:38px;height:18px}
.cx-v.abajo{top:66px;height:18px}
.cx-v.arriba.corto{top:38px;height:9px}
.cx-v.arriba.pie{top:47px;height:9px}
.cx-h.arriba{top:47px}
.cx-v.abajo.pie{top:66px;height:9px}
.cx-v.abajo.corto{top:75px;height:9px}
.cx-h.abajo{top:75px}

.lt-rot{position:absolute;transform:translateX(-50%);width:120px;text-align:center;line-height:1.2}
.lt-rot.arriba{top:0}
.lt-rot.abajo{top:84px}
.lt-rot.mag .lt-r,.lt-rot.mag .lt-d{color:var(--magenta-t)}
.lt-r{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-medio)}
.lt-d{display:block;font-size:14px;font-variant-numeric:tabular-nums}

/* El rótulo del tramo: los días de holgura o de desborde, con su muestra de color. */
.lt-nota{display:flex;gap:8px;align-items:baseline;font-size:14px;line-height:1.45;margin:8px 0}
.lt-nota.mag{color:var(--magenta-t)}
.lt-sw{display:inline-block;width:16px;height:10px;flex:none;position:relative;top:1px}
.sw-holgura{background:var(--l5);border:1px solid var(--linea)}
.sw-desborde{background:var(--magenta)}
.lt-hueco{font-size:14px;margin:8px 0}
.lt-perilla{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.linea-tiempo.compacta{border:none;padding:0}

/* C4 · el desglose del cóctel, con su bullet cuadrado del color exacto del segmento. */
.leyenda .lg-r.total{border-bottom:none;padding:3px 0;color:var(--gris-medio)}
.leyenda .lg-r.total:first-of-type{border-top:1px solid var(--tinta);margin-top:6px;padding-top:8px}
.leyenda .lg-r.total .lg-n,.leyenda .lg-r.total .lg-v{font-weight:600}
.leyenda .lg-r.total.falta .lg-n,.leyenda .lg-r.total.falta .lg-v{color:var(--magenta-t)}
.lg-c.vacio{background:none}
.seg-sin-naturaleza{stroke:var(--gris-claro)}
.lg-c.seg-sin-naturaleza{background:var(--gris-claro)}

/* C5 · la tarjeta de fase, mínima. */
.hi-d{font-size:13px;color:var(--gris-medio);margin-top:6px}

/* C6 · miniaturas de la pestaña 2: anillo + tabla compacta + fechas. */
.mini-fila{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;margin:8px 0}
.mini-d{position:relative;width:120px}
.mini-d svg{width:100%;height:auto;transform:rotate(-90deg)}
.mini-d circle{fill:none}
.mini-d .riel{stroke:var(--l5)}
.mini-d .donut-c{transform:none}
.mini-d .dc-v{font-size:13px}
.mg-r{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:8px;align-items:center;padding:2px 0;font-size:13px}
.mg-n{text-align:left}
.mg-v{font-variant-numeric:tabular-nums}
.mini-linea svg{width:100%;height:24px}
.mini-f{font-size:13px;line-height:1.5;text-align:left}
.mini-f .mag{color:var(--magenta-t)}
.mini-desb{display:block;font-size:12px;color:var(--magenta-t)}

/* C7 · el alta de tarea, en su modal: label sobre campo, en orden. */
.alta-modal{display:grid;gap:4px;margin-bottom:14px}
.ma-l{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-medio);margin-top:8px}
.ma-i{border:1px solid var(--linea-2);padding:9px 11px;font-family:inherit;font-size:16px;background:var(--l6);color:var(--tinta);width:100%}
.ma-i:focus-visible{outline:2px solid var(--azul-t);outline-offset:-1px}
.alta-modal .cta{margin-top:14px;justify-self:start}
.abrir-alta{margin:18px 24px 0}

/* R17/A5 · el panel vuelve al lienzo claro y SOLO LOS FILTROS van en negro. R15b lo pintó entero
 * de carbón para diferenciarlo del contenido de la derecha, y lo que salió fue media pantalla
 * oscura contra media clara peleándose por la atención. Las píldoras negras bastan para separar
 * el control de la lista, que es lo que había que separar. */
.maestro{background:var(--fondo);border-right:1px solid var(--linea)}
.maestro .aviso-demo{display:flex;gap:8px;align-items:center;padding:16px 16px 8px}
.maestro .filtros{background:var(--l1);padding:8px;gap:8px;border-bottom:1px solid var(--linea)}
.maestro .filtro{background:none;border:1px solid var(--gris-medio);color:var(--gris-claro)}
.maestro .filtro:hover{color:var(--l6);border-color:var(--l6)}
.maestro .filtro[aria-pressed="true"]{background:var(--magenta-t);color:var(--l6);border-color:var(--magenta-t)}
.maestro .filtros .ver{background:none;border-color:var(--gris-medio);color:var(--gris-claro)}
.maestro .inst[aria-current="true"]{background:var(--gris-suave);border-left-color:var(--magenta)}
.maestro .inst:hover .nom{color:var(--magenta-t)}

/* C9 · fuentes vigiladas, compactas: tres caben sin scroll. */
.fuente-c{display:grid;grid-template-columns:minmax(0,2fr) 140px 140px 140px 170px 32px;gap:12px;align-items:center;padding:12px 16px;border:1px solid var(--linea);border-bottom:none;font-size:15px}
.fuente-c:last-of-type{border-bottom:1px solid var(--linea)}
.fuente-c.caida{border-left:var(--filete) solid var(--magenta)}
.fc-n{font-weight:600}
.fc-e{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-t)}
.fuente-c.caida .fc-e{color:var(--magenta-t)}
.fc-d{font-size:13px;color:var(--gris-medio)}
.fc-d b{color:var(--tinta);font-variant-numeric:tabular-nums}
.fc-v{font-size:13px;color:var(--gris-medio);font-variant-numeric:tabular-nums}
.fc-err{grid-column:1 / -1;font-size:13px;color:var(--magenta-t);line-height:1.4}

/* R17/A1 · la guía diagonal de R16 se retira: el conector va en L, y su CSS vive con el resto de
 * la línea de tiempo. Una diagonal cruzando el dibujo no dice a qué marca pertenece. */

/* ═════════════════════════════════════════════════════════════════════════
 * R16/G3 · ESTILO: BORDES, PESTAÑAS Y LA SALIDA AL PROYECTO
 * ═════════════════════════════════════════════════════════════════════════ */

/* Las tres piezas que el fundador quiere ver enmarcadas: el objetivo, la línea de tiempo y las
 * cinco cifras. Un filete de 3px en negro las separa del lienzo sin inventar una sombra. */
.obj{border:3px solid var(--negro);border-left:3px solid var(--negro)}
.linea-tiempo{border:3px solid var(--negro)}
.stats-plan{border:3px solid var(--negro)}
.stats-plan .stat{border-right:1px solid var(--linea)}
.stats-plan .stat:last-child{border-right:none}

/* PESTAÑAS · R17/A2 · 12px, mayúsculas, SIN CAJAS. Las cajas de R16 encerraban seis rótulos en
 * seis rectángulos y la barra pesaba más que el tablero que anuncia. Queda el texto, y la activa
 * se marca con un subrayado magenta de 3px pegado al borde inferior de la barra: es el mismo
 * recurso de R10 —el filete, no la opacidad— sobre el fondo blanco de R15b. */
.l2{padding:0 24px;gap:0;align-items:flex-end;overflow-x:auto}
.l2 .pestana{
  /* R19/C3 · con "Nuevos instrumentos detectados" la barra de seis aprieta: el padding baja a
   * 8px y la barra hace scroll si aún no cabe. El nombre NO se abrevia — una pestaña que dice
   * menos de lo que hay detrás es una pestaña que nadie abre. */
  padding:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-2);background:none;border:none;
  border-bottom:var(--filete) solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.l2 .pestana:hover{color:var(--magenta-t);border-bottom-color:transparent}
.l2 .pestana[aria-selected="true"]{color:var(--tinta);border-bottom-color:var(--magenta)}
.l2 .pestana:focus-visible{outline:2px solid var(--azul-t);outline-offset:-3px}

/* VOLVER AL PROYECTO · con su borde magenta de salida, invertido al pasar por encima. */
.volver-proyecto{border:1px solid var(--magenta-t);color:var(--l6);background:none}
.volver-proyecto:hover{background:var(--magenta-t);color:var(--l6);border-color:var(--magenta-t)}

/* R16/G4 · pestañas y contenido a 8px exactos: la franja de contexto se fue, y con ella el hueco
 * que dejaba. Un tablero empieza donde se acaban sus pestañas. */
.franja-alta{padding:8px 24px 0}
#ctx-persona{margin-left:8px}

/* R16/G5 · las dos líneas comparativas, a la misma escala. */
.cmp{border:1px solid var(--linea);padding:16px;margin-top:16px}
.cmp-fila{display:grid;grid-template-columns:190px minmax(0,1fr) 110px;gap:16px;align-items:center;margin:8px 0}
.cmp-fila svg{width:100%;height:26px}
.cmp-r{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-medio)}
.cmp-f{font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.cmp-f.mag{color:var(--magenta-t);font-weight:600}
.cmp-pie{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin-top:8px;font-size:13px}
.cmp-d b{font-variant-numeric:tabular-nums}
.cmp-mag{color:var(--magenta-t);font-weight:600}
.cmp-l{color:var(--gris-medio);font-size:12px}
.cmp-l b{color:var(--tinta);font-weight:600}
.mg-r.total{border-top:1px solid var(--linea);margin-top:4px;padding-top:8px;font-weight:600}
.mg-r.total.falta .mg-n,.mg-r.total.falta .mg-v{color:var(--magenta-t)}

/* R16/G6 · la barra de tareas. R17/A4 la parte en dos renglones: estado + alta a la derecha
 * arriba; responsable + instrumento debajo. La lista arranca 8px bajo el último. */
.barra-tareas{padding:8px 24px 0}
.bt-fila{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bt-fila .cta{margin-left:auto}
.bt-fila .sel-inst{margin-left:auto}
.barra-tareas .cta{min-height:40px}
.gr-filtro{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gr-r{display:inline-flex;gap:6px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio)}
.ic-filtro{width:11px;height:11px;fill:var(--gris-medio)}
.barra-tareas .filtro{min-height:40px}
.barra-tareas .sel-inst{min-height:40px}
#panel-todo .todo-r.cabecera{margin-top:8px}

/* R16/G7 · el contador de novedades sin decidir, en su pestaña. Magenta porque es una alerta:
 * hay algo esperando una decisión humana. */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;margin-left:8px;background:var(--magenta-t);color:var(--l6);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.badge[hidden]{display:none}

/* ═════════════════════════════════════════════════════════════════════════
 * R16/G8 · PASADA GENERAL: RITMO, ÁREA DE CLIC Y FOCO
 *
 * Nada decorativo. Tres cosas medibles: el espaciado va en múltiplos de 8, todo control se puede
 * pulsar con un dedo (40px de alto mínimo), y todo control se ve cuando recibe el foco — un
 * control sin foco visible no existe para quien navega con teclado.
 * ═════════════════════════════════════════════════════════════════════════ */
.cta,.btn,.filtro,.sel-inst,.ver,.pestana{min-height:40px}
.ver{min-width:40px}
.cta:focus-visible,.btn:focus-visible,.filtro:focus-visible,.sel-inst:focus-visible,
.ver:focus-visible,.abrir-alta:focus-visible,.nv-cab:focus-visible,.inst:focus-visible,
.acordeon:focus-visible,.recuperar:focus-visible{outline:2px solid var(--azul-t);outline-offset:2px}

/* Las columnas de cifras se alinean a la derecha: leer una columna de números desalineados
 * obliga a comparar cifra a cifra en vez de por su longitud. */
.lg-v,.mg-v,.fc-v,.hi-a,.cmp-f{text-align:right}

/* Ritmo de 8/16/24 en las franjas de la pestaña 1 y en la bandeja. */
.franja-media{padding:24px 24px 0}
.stats-plan{margin:24px 24px 0}
.novedad-ac{margin-bottom:16px}
.cmp{margin-top:16px}

/* R18/B1 · el selector de idioma, en el encabezado. Dos rótulos, cada uno en su idioma. */
.idioma{display:flex;gap:0;margin-left:auto;margin-right:16px}
.lang{min-height:40px;padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.08em;
  background:none;border:1px solid var(--gris-medio);color:var(--gris-claro);white-space:nowrap}
.lang + .lang{border-left:none}
.lang:hover{color:var(--l6);border-color:var(--l6)}
.lang[aria-pressed="true"]{background:var(--l6);color:var(--l1);border-color:var(--l6)}
.lang:focus-visible{outline:2px solid var(--azul-t);outline-offset:2px}
.volver-proyecto{margin-left:0}

/* R18/B3 · la conversión, en segundo nivel: menor jerarquía y tinta secundaria. El monto en su
 * moneda original manda; el dólar acompaña. */
.conv{display:block;font-size:12px;color:var(--tinta-2);font-variant-numeric:tabular-nums;line-height:1.35}
.conv.sin-conv{color:var(--gris-medio)}
.cifra .conv,.obj-cifra .conv,.dc-v .conv{font-size:12px;font-weight:400;letter-spacing:0}
.lg-v .conv,.mg-v .conv,.hi-a .conv{font-weight:400}

/* R19/C2 · las dos filas comparativas, con el dibujante único. El rótulo de fila va en una
 * columna de ancho fijo para que las dos líneas arranquen en la misma x. */
.cmp-fila{display:grid;grid-template-columns:200px minmax(0,1fr) 120px;gap:16px;align-items:center;margin:8px 0}
.cmp-fila .lt-lienzo{height:72px;margin:0}
.cmp-fila .lt-eje{top:32px}
.cmp-fila .lt-rot.arriba{top:0}
.cmp-fila .lt-rot.abajo{top:48px}
.cmp-fila .cx-v.arriba{top:24px;height:8px}
.cmp-fila .cx-v.abajo{top:42px;height:8px}
.cmp-fila .cx-v.arriba.corto,.cmp-fila .cx-v.arriba.pie,
.cmp-fila .cx-v.abajo.corto,.cmp-fila .cx-v.abajo.pie{height:4px}
.cmp-fila .cx-h.arriba{top:28px}
.cmp-fila .cx-h.abajo{top:46px}
.cmp-fila .lt-r{font-size:9px;letter-spacing:.06em}
.cmp-fila .lt-d{font-size:11px}
.cmp-fila .lt-rot{width:96px}

/* El corrimiento: su tramo y su rótulo. Es el mensaje entero del panel.
 *
 * ADENDA R21/D3 · el rótulo YA NO se posiciona aquí. Se colocaba absoluto a `top:-16px` sobre el
 * eje, que en la fila comparativa es exactamente donde vive la fila de arriba de los rótulos de
 * marca: `+20 días` caía encima de FECHA DE CIERRE y de su propio marcador. Ahora lo coloca
 * `rotulos.js`, el mismo repartidor que las marcas, y esta regla solo le pone su tinta. Dos
 * colocadores sobre el mismo lienzo es cómo se fabrica un solape que ningún assert ve. */
.tr-corre{background:var(--magenta)}
.lt-rot.tr-rot .lt-r{font-size:11px;font-weight:700;color:var(--magenta-t);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:0}


/* ═════════════════════════════════════════════════════════════════════════
 * R19/C4 · LAS REGLAS DE LA VISTA, NO SUS PARCHES
 *
 * El síntoma que señaló el fundador —dos "TODOS" arrancando en márgenes distintos— no se
 * arregla moviendo un margen: se arregla teniendo una retícula. Aquí está.
 * ═════════════════════════════════════════════════════════════════════════ */

/* 1 · RETÍCULA DE FILTROS. Rótulo de ancho fijo a la izquierda; los botones arrancan todos en
 * la misma x, mida lo que mida la etiqueta. */
.filtros,.gr-filtro{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:center}
.fl-r{display:inline-flex;gap:8px;align-items:center;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris-medio)}
.fl-g{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.maestro .fl-r{color:var(--gris-claro)}

/* 3 · UNA SOLA ACCIÓN PRIMARIA POR VISTA: el magenta lleno es del `.cta`, y solo hay uno por
 * pantalla. Todo lo demás es neutro con borde — si compiten dos magentas, ninguno manda. */
.btn,.filtro,.sel-inst,.ver,.lang{background:none}

/* 4 · CIFRAS A LA DERECHA Y TABULARES: una columna de dinero se compara por su longitud, y sin
 * cifras tabulares las longitudes mienten. */
.lg-v,.mg-v,.fc-v,.hi-a,.cmp-f,.stat .cifra,.obj-cifra,.dc-v{font-variant-numeric:tabular-nums}

/* 6 · ANCHO DE LECTURA. Ningún bloque de texto corrido pasa de ~75 caracteres: más allá, el ojo
 * pierde el renglón al volver. Aplica también dentro de los modales. */
.pl,.nota .tx,.d,.lt-nota,.cmp-pie,.obj-pie{max-width:75ch}

/* 7 · FOCO VISIBLE en todo control, con el magenta de contraste y 2px. Un control sin foco
 * visible no existe para quien navega con teclado. */
.cta:focus-visible,.btn:focus-visible,.filtro:focus-visible,.sel-inst:focus-visible,
.ver:focus-visible,.lang:focus-visible,.pestana:focus-visible,.ma-i:focus-visible,
.nv-cab:focus-visible,.inst:focus-visible,.slider-fecha:focus-visible{
  outline:2px solid var(--magenta-t);outline-offset:2px}

/* 8 · JERARQUÍA POR TAMAÑO, no por color: una cifra protagonista por tarjeta y el resto en
 * tinta secundaria. */
.stat .rot,.obj-rot,.mini-r,.cmp-r{color:var(--gris-medio)}

/* R19/C6 · la consola de la ronda. Es una traza, así que las columnas tienen que cuadrar para
 * poder leerse en diagonal — pero eso lo hace la retícula, no una segunda tipografía: el sistema
 * de diseño solo admite Outfit, y una consola no es motivo para abrir esa puerta. Las horas van
 * con cifras tabulares, que es lo que de verdad hacía falta. */
.ronda-barra{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:0 24px 8px}
.ronda-barra .d{max-width:75ch}
.cn-espera{font-size:13px;color:var(--magenta-t)}
.cn-estado{margin:0 24px 8px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris-medio)}
.cn-estado.corriendo{color:var(--azul-t)}
.cn-estado.fallida{color:var(--magenta-t)}
.consola{margin:0 24px;border:1px solid var(--linea);background:var(--l1);color:var(--gris-claro);
  padding:16px;font-size:13px;line-height:1.6;max-height:320px;overflow-y:auto}
.consola.vacia{color:var(--gris-medio)}
.cn-l{display:grid;grid-template-columns:72px 120px minmax(0,1fr);gap:8px;align-items:baseline}
.cn-l .cn-d{grid-column:3}
.cn-t{color:var(--gris-medio);font-variant-numeric:tabular-nums}
.cn-f{color:var(--nat-publica)}
.cn-x{color:var(--l6)}
.cn-d{color:var(--gris-claro)}
.cn-caida .cn-x,.cn-error .cn-x{color:var(--magenta)}
.cn-fin .cn-x,.cn-inicio .cn-x{font-weight:700}
.cn-cero{margin:8px 24px 0;font-size:14px;font-weight:600;color:var(--tinta)}

/* R19/C6.3 · el panel de precisión, corrido a demanda. */
.pn-estado{margin:0 24px 8px;font-size:13px;color:var(--azul-t)}
.pn-marcador{margin:0 24px;padding:16px;border:3px solid var(--negro);font-size:24px;
  font-weight:800;font-variant-numeric:tabular-nums;display:flex;gap:16px;align-items:baseline}
.pn-marcador.rojo{border-color:var(--magenta);color:var(--magenta-t)}
.pn-ts{font-size:12px;font-weight:400;color:var(--gris-medio);margin-left:auto}
.pn-flojos{margin:8px 24px 0;padding:8px 16px;border-left:var(--filete) solid var(--magenta);
  font-size:14px;line-height:1.5}
.pn-casos{margin:8px 24px 0;border:1px solid var(--linea);border-bottom:none}
.pn-c{display:grid;grid-template-columns:120px 96px minmax(0,1fr) minmax(0,1fr);gap:16px;
  padding:8px 16px;border-bottom:1px solid var(--linea);font-size:13px;align-items:baseline}
.pn-c.mal{border-left:var(--filete) solid var(--magenta)}
.pn-i{font-weight:600}
.pn-e{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-medio)}
.pn-c.mal .pn-e{color:var(--magenta-t)}
.pn-r{color:var(--gris-medio)}

/* R20 · el centro de notificaciones. Los tres desenlaces con el mismo peso visual: el que se
 * destaca no es el bueno, es el que hay que atender. */
.nt-canal{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 24px 8px}
.nt-tabla{margin:0 24px;border:1px solid var(--linea);border-bottom:none}
.nt-r{display:grid;grid-template-columns:140px minmax(0,1fr) minmax(0,1fr) 200px 40px;gap:16px;
  align-items:baseline;padding:8px 16px;border-bottom:1px solid var(--linea);font-size:13px}
.nt-e{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.nt-ENVIADA .nt-e{color:var(--azul-t)}
.nt-NO-CONFIGURADO .nt-e,.nt-ERROR .nt-e{color:var(--magenta-t)}
.nt-ERROR,.nt-NO-CONFIGURADO{border-left:var(--filete) solid var(--magenta)}
.nt-i{font-weight:600}
.nt-s,.nt-t{color:var(--gris-medio);font-variant-numeric:tabular-nums;text-align:right}