/* =====================================================================
   Plataforma de Seguimiento de Cartera · Triple Impacto
   Sistema de Diseño v2 · identidad corporativa vigente.

   Los colores y la tipografía vienen de `identidad-marca-triple-impacto/`,
   que es la fuente única de la marca. No se inventan tonos aquí: si hace
   falta uno nuevo, se agrega allá y se refleja acá.

   REGLAS DURAS que este archivo debe respetar siempre:
     · Texto blanco solo sobre magenta o pizarra. Sobre azul o verde,
       únicamente en texto grande en negrita. Nunca cuerpo.
     · Texto de color sobre blanco: siempre las variantes *-sombra.
     · Sobre tintes claros o el panel gris: texto oscuro, nunca blanco.
     · Títulos en sentence case. Los epígrafes sí van en mayúsculas.

   DIVERGENCIA REPORTADA (06-08-2026): `tokens.css` define el encabezado de
   tabla con fondo azul y texto blanco, pero un encabezado es texto chico y
   el manual lo prohíbe (contraste 3,7:1). Manda el manual: los encabezados
   van en pizarra, que da 8,9:1 y el propio manual §5.6 admite.
   ===================================================================== */

:root{
  /* --- Marca --- */
  --ti-azul:#418CBE; --ti-verde:#3BA236; --ti-magenta:#A42A85; --ti-pizarra:#4C494A;

  /* Único color admitido para texto de color sobre blanco */
  --ti-azul-sombra:#2F6589; --ti-verde-sombra:#2A7527; --ti-magenta-sombra:#761E60;
  --ti-azul-profundo:#24506D;   /* hover de superficies con texto blanco */

  /* Tintes suaves: fondos que SIEMPRE llevan texto oscuro encima */
  --ti-azul-tinte:#E8F1F7; --ti-verde-tinte:#E7F4E7;
  --ti-magenta-tinte:#F4E5F0; --ti-neutro-tinte:#EDEDED;

  /* Neutros.
     El manual ofrece dos grises secundarios: #777777 y #595959. Sobre blanco
     el primero da 4,48:1 —justo bajo el mínimo de 4,5 para texto chico— así
     que el secundario de interfaz es #595959 (7,0:1). El #777777 queda para
     texto grande, donde el umbral es 3:1 y sí cumple. */
  --ti-texto:#4A4A4A;
  --ti-texto-2:#595959;
  --ti-texto-3:#777777;
  --ti-panel:#F2F2F2; --ti-linea:#E3E3E3; --ti-blanco:#FFFFFF;

  /* Texto sobre la cabecera pizarra. El gris azulado anterior daba 3,67:1;
     este llega a 6,8:1 sin encandilar como el blanco puro. */
  --ti-sobre-oscuro:#DCDADB;

  /* --- Semánticos de estado ---
     No son colores de marca (§1.5 del manual): un semáforo necesita rojo y
     ámbar, que la paleta no tiene. Se eligen tonos que conviven con ella y
     se usan SOLO para estado, nunca como acento decorativo. El verde sí es
     el de marca, para que el semáforo hable el idioma de la casa. */
  --estado-ok:#2A7527; --estado-ok-tinte:#E7F4E7;
  --estado-atencion:#8A6410; --estado-atencion-tinte:#FBF0D8;
  --estado-riesgo:#A32C1E; --estado-riesgo-tinte:#F8E7E4;
  --estado-neutro:#5A5A5A; --estado-neutro-tinte:#EDEDED;

  /* --- Alias de compatibilidad ---
     El código y las plantillas existentes nombran los colores del lenguaje
     anterior. Se mantienen los nombres y se les cambia el valor, para que
     todo el sistema hable la identidad nueva sin reescribir cada regla. */
  --teal:var(--ti-azul);
  --teal-osc:var(--ti-azul-sombra);
  --navy:var(--ti-pizarra);
  --naranja:var(--ti-magenta);
  --lima:var(--ti-verde);
  --gris:var(--ti-texto-2);
  --gris-cl:var(--ti-neutro-tinte);
  --borde:var(--ti-linea);
  --papel:#F7F7F7;
  --blanco:var(--ti-blanco);
  --verde:var(--estado-ok);
  --ambar:var(--estado-atencion);
  --rojo:var(--estado-riesgo);

  --sombra:0 1px 2px rgba(76,73,74,.06), 0 4px 14px rgba(76,73,74,.07);
  --radio:8px;
  --ti-font:Calibri,"Segoe UI",system-ui,Arial,sans-serif;

  /* Alto real de la cabecera. app.js lo mide y lo reescribe: la cabecera es
     sticky y su menú se parte en dos filas cuando no cabe. */
  --alto-cabecera:58px;
  --riel-ancho:250px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ti-font);
  background:var(--papel); color:var(--ti-texto);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ti-azul-sombra)}
a:hover{color:var(--ti-magenta-sombra)}

/* Títulos en sentence case y gris pizarra: el manual prohíbe titulares en
   mayúsculas y reserva el color para los epígrafes. */
h1,h2,h3{margin:0 0 .4em; line-height:1.2; font-weight:700; color:var(--ti-texto)}
h1{font-size:1.55rem; letter-spacing:-.01em}
h2{font-size:1.12rem}
h3{font-size:.95rem}

/* Epígrafe: mayúsculas, tracking amplio, en color de marca. Es el único
   lugar donde el texto va en caja alta. */
.eyebrow{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ti-magenta-sombra); font-weight:700; margin:0 0 .35em;
}
.microcopy{font-size:.82rem; color:var(--ti-texto-2); margin:.3em 0}

/* ---------- estructura ---------- */
header.top{
  position:sticky; top:0; z-index:40; background:var(--ti-pizarra); color:#fff;
  display:flex; align-items:center; gap:20px; padding:0 20px; min-height:58px;
  box-shadow:0 1px 0 rgba(0,0,0,.12), 0 4px 16px rgba(76,73,74,.16);
}
/* El isotipo conserva siempre sus tres colores y su proporción nativa
   (250×265, no es cuadrado): el alto se fija y el ancho se calcula. */
header.top .marca{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.01em; white-space:nowrap;
}
header.top .marca img{height:26px; width:auto; display:block}
header.top .marca span{color:var(--ti-sobre-oscuro); opacity:.55}
nav.rutas{display:flex; gap:2px; flex:1; flex-wrap:wrap}
nav.rutas a{
  background:transparent; border:0; color:var(--ti-sobre-oscuro); padding:8px 13px;
  border-radius:7px; cursor:pointer; font-size:.87rem; font-family:inherit;
  text-decoration:none; display:inline-block;
}
nav.rutas a:hover{background:rgba(255,255,255,.09); color:#fff}
nav.rutas a[aria-current="page"]{
  background:var(--ti-azul-sombra); color:#fff; font-weight:700;
}
/* Blanco, no azul: sobre la cabecera pizarra el azul da 1,9:1 y un
   indicador de foco necesita al menos 3:1 para verse. */
nav.rutas a:focus-visible,
.selector-org select:focus-visible,
#btn-admin:focus-visible,
#btn-salir:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* Selector de cliente en la cabecera. */
.selector-org select{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:7px; padding:5px 9px; font-family:inherit; font-size:.82rem;
  cursor:pointer; max-width:190px;
}
.selector-org select option{background:var(--navy); color:#fff}
.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* Menú de administración. Se despliega bajo su botón; el resto de la
   cabecera no se mueve. */
.menu-admin{position:relative}
.menu-admin .desplegable{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40;
  background:var(--blanco); border:1px solid var(--borde); border-radius:9px;
  box-shadow:var(--sombra); min-width:210px; padding:5px; text-align:left;
}
.menu-admin .desplegable button{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:9px 11px; border-radius:6px; cursor:pointer;
  font-family:inherit; font-size:.85rem; color:var(--navy);
}
.menu-admin .desplegable button:hover{background:var(--gris-cl)}
.menu-admin .desplegable button.peligro{color:var(--rojo)}

.sesion{display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--ti-sobre-oscuro)}
.sesion b{color:#fff; font-weight:600}
.chip-rol{
  background:#6B6869; color:#fff; font-weight:600;
  padding:2px 9px; border-radius:999px;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
}
/* Pegado a la izquierda y no centrado.
   El tope de 1180px con `margin:0 auto` venía de cuando cada pantalla era
   una columna de lectura. Con la sala de control ya no lo es: el riel vive
   en el borde izquierdo, y centrarlo dejaba una banda muerta a cada lado
   —350px por lado en un monitor de 1900— mientras la matriz se apretaba en
   el medio. Ahora arranca en el borde y crece hasta 1720px, que es donde
   una fila de tabla deja de recorrerse con la vista y hay que seguirla con
   el dedo. */
main{max-width:1720px; margin:0; padding:24px 20px 70px}
.vista{display:none} .vista.activa{display:block}

/* El panel que viene servido como documento. Ocupa lo que queda de pantalla
   bajo la cabecera: es una pieza completa con su propia navegación, y
   encajarla en una caja corta obligaría a desplazar dos veces —la página y
   el documento— para leer lo mismo. `--alto-cabecera` lo mide app.js, porque
   la cabecera crece cuando el menú se parte en dos líneas. */
.panel-servido{
  display:block; width:100%; border:0; background:var(--ti-blanco);
  height:calc(100vh - var(--alto-cabecera) - 26px);
  min-height:520px;
}

/* ---------- tarjetas ----------
   Filete de color arriba, no a la izquierda: es la firma de la casa y deja
   la tarjeta alineada con las de las láminas y los informes. */
.card{
  background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-radius:var(--radio); padding:20px 22px;
  box-shadow:var(--sombra); margin-bottom:18px;
}
.card > h2:first-child{margin-top:0}
.grid{display:grid; gap:14px}
.grid.k4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid.k3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.k2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* --- Las dos puertas del portal --------------------------------------
   Superficies grandes y sin adorno: la decisión se toma sin leer, así que
   lo que manda es el rótulo y el resto acompaña.

   El filete de color arriba es la firma de la casa (manual §5.3), y aquí
   además hace el trabajo de distinguir las dos áreas de un vistazo: azul
   para clientes, magenta para lo interno.

   No reutiliza `.card`: una tarjeta es un contenedor de contenido y estas
   son controles. Mezclarlas obligaría a deshacer con `!important` la mitad
   de lo que `.card` aporta. */
.puertas{
  display:grid; gap:16px; margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.puerta{
  display:flex; flex-direction:column; gap:6px;
  padding:22px 22px 18px; text-decoration:none;
  background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-top:4px solid var(--ti-azul); border-radius:var(--radio);
  box-shadow:var(--sombra); color:var(--ti-texto);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.puerta.interna{border-top-color:var(--ti-magenta)}
.puerta-rot{
  font-size:1.35rem; font-weight:700; line-height:1.15;
  color:var(--ti-azul-sombra);
}
.puerta.interna .puerta-rot{color:var(--ti-magenta-sombra)}
.puerta-txt{color:var(--ti-texto-2); max-width:44ch}
.puerta-pie{
  margin-top:auto; padding-top:10px; font-size:.82rem;
  color:var(--ti-texto-3); border-top:1px solid var(--ti-linea);
}
.puerta:hover, .puerta:focus-visible{
  transform:translateY(-2px); border-color:var(--ti-azul);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.puerta.interna:hover, .puerta.interna:focus-visible{border-color:var(--ti-magenta)}
/* El foco de teclado tiene que verse sobre el borde de color, no confundirse
   con él: por eso anillo y no cambio de borde. */
.puerta:focus-visible{outline:3px solid var(--ti-azul); outline-offset:3px}
.puerta.interna:focus-visible{outline-color:var(--ti-magenta)}
@media (prefers-reduced-motion:reduce){
  .puerta{transition:none}
  .puerta:hover, .puerta:focus-visible{transform:none}
}

/* ---------------------------------------------------------------------
   ELECCIÓN DE CARTERA · prefijo cli-
   La puerta del área de Clientes. Dos columnas: los encargos reales y las
   carteras que existen para enseñar la plataforma.

   LAS DOS COLUMNAS NO PESAN IGUAL, y es la decisión de esta pantalla. La de
   clientes va más ancha y sobre tinte azul; la de demostraciones va más
   angosta, sobre gris y con borde discontinuo —el mismo gesto que en el
   resto del sistema marca lo que todavía no es firme—.

   Con las dos iguales, la pantalla obliga a leer los rótulos para saber cuál
   es cuál. Con la jerarquía puesta se sabe antes de leer, y de paso que una
   columna tenga cinco entradas y la otra dos deja de parecer un descuido.

   Prefijo `cli-` a propósito: `estilo.css` es uno solo para las cinco áreas,
   y sin prefijo el nombre siguiente que alguien invente choca con uno de
   estos. Ya pasó con `.barra`.
   --------------------------------------------------------------------- */
.cli-dos{
  display:grid; gap:20px; margin-top:22px;
  grid-template-columns:1.35fr 1fr;
}
/* Un elemento de rejilla vale `min-width:auto` por omisión, o sea «al menos
   lo que mida mi contenido». Sin esto, una fila con nombre largo ensancha su
   columna y empuja la página entera. */
.cli-dos > *{min-width:0}
@media (max-width:720px){ .cli-dos{grid-template-columns:1fr} }

.cli-panel{border-radius:var(--radio); padding:18px 18px 14px}
.cli-panel.real{background:var(--ti-azul-tinte); border:1px solid #CBDDEA}
.cli-panel.demo{background:var(--ti-neutro-tinte); border:1px dashed #C9C6C1}

.cli-cab{
  display:flex; align-items:baseline; gap:9px;
  margin:0 0 12px; padding-bottom:9px;
  border-bottom:2px solid rgba(0,0,0,.09);
}
.cli-cab h2{margin:0; font-size:1.05rem; color:var(--ti-pizarra)}
.cli-n{
  font-size:.72rem; font-weight:700; color:var(--ti-texto-2);
  background:var(--ti-blanco); border-radius:999px; padding:2px 9px;
}
.cli-sub{margin-left:auto; font-size:.74rem; color:var(--ti-texto-3)}

.cli-lista{display:flex; flex-direction:column; gap:9px}
.cli-fila{
  display:flex; align-items:center; gap:12px; min-width:0;
  text-decoration:none; color:var(--ti-texto);
  background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-radius:9px; padding:12px 14px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cli-panel.demo .cli-fila{background:rgba(255,255,255,.75)}
.cli-txt{min-width:0; flex:1; display:block}
/* En bloque los dos, y no es adorno: `overflow:hidden` no recorta un
   elemento en línea, así que con estos como `span` el nombre formal largo
   ignoraba los puntos suspensivos y se salía de la fila. */
.cli-nom{
  display:block; font-weight:700; color:var(--ti-pizarra); line-height:1.2;
}
.cli-desc{
  display:block; font-size:.79rem; color:var(--ti-texto-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cli-marca{
  display:inline-block; margin-left:8px; vertical-align:1px;
  font-size:.66rem; font-weight:700; letter-spacing:.02em;
  padding:1px 8px; border-radius:999px;
  background:var(--ti-azul-tinte); color:var(--ti-azul-sombra);
}
.cli-der{
  text-align:right; white-space:nowrap;
  font-size:.74rem; color:var(--ti-texto-3);
}
.cli-der b{
  display:block; font-size:1.05rem; color:var(--ti-pizarra);
  font-variant-numeric:tabular-nums; line-height:1.15;
}

.cli-nota{
  margin:12px 0 0; font-size:.76rem; color:var(--ti-texto-3); line-height:1.4;
}
.cli-vacio{margin:0; font-size:.84rem; color:var(--ti-texto-3)}

/* La fila del cliente que se está mirando no se esconde ni se saca de la
   lista: sigue siendo elegible —volver a ella es una acción válida— y solo
   se marca, para que el ojo sepa de dónde viene. */
.cli-fila.actual{border-color:var(--ti-azul); box-shadow:inset 3px 0 0 var(--ti-azul)}

.cli-fila:hover, .cli-fila:focus-visible{
  transform:translateY(-1px); border-color:var(--ti-azul);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
/* Anillo y no cambio de borde: el borde ya cambia al pasar por encima, y el
   foco de teclado tiene que distinguirse de eso, no confundirse. */
.cli-fila:focus-visible{outline:3px solid var(--ti-azul); outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .cli-fila{transition:none}
  .cli-fila:hover, .cli-fila:focus-visible{transform:none}
}

/* Cifra destacada sobre panel gris, como el stat callout de la casa. */
.kpi{
  background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-top:4px solid var(--ti-linea);
  border-radius:var(--radio); padding:15px 17px;
}
.kpi .rotulo{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ti-texto-2); font-weight:700;
}
.kpi .cifra{
  font-size:1.7rem; font-weight:700; margin-top:6px;
  letter-spacing:-.02em; color:var(--ti-pizarra);
  font-variant-numeric:tabular-nums;
}
.kpi .nota{font-size:.78rem; color:var(--ti-texto-2); margin-top:4px}
.kpi.acento{border-top-color:var(--ti-azul)}
.kpi.acento .cifra{color:var(--ti-azul-sombra)}
.kpi.aviso{border-top-color:var(--ti-magenta)}
.kpi.aviso .cifra{color:var(--ti-magenta-sombra)}

/* ---------- tablas ----------
   Encabezado en pizarra, no en azul: es texto chico y blanco sobre azul no
   alcanza el contraste que exige el manual. En mayúsculas con tracking,
   como los encabezados de la casa. */
table{width:100%; border-collapse:collapse; font-size:.87rem}
th{
  background:var(--ti-pizarra); color:var(--ti-blanco); text-align:left;
  padding:10px 12px; font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
  position:sticky; top:0; z-index:2;
}
td{padding:10px 12px; border-bottom:1px solid var(--ti-linea); vertical-align:top}
/* La primera columna en negrita: ancla la lectura de la fila. */
tbody td:first-child{font-weight:600; color:var(--ti-texto)}
tbody tr:nth-child(even){background:var(--ti-panel)}
tbody tr:hover{background:var(--ti-azul-tinte)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.tabla-envoltura{
  overflow:auto; max-height:60vh;
  border:1px solid var(--ti-linea); border-radius:var(--radio);
}

/* ---------- píldoras de estado ----------
   Fondo en tinte suave y texto en la sombra correspondiente: es la única
   combinación que el manual admite para color sobre claro. */
.pill{
  display:inline-block; padding:3px 11px; border-radius:999px;
  font-size:.73rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.pill.verde{background:var(--estado-ok-tinte); color:var(--estado-ok)}
.pill.ambar{background:var(--estado-atencion-tinte); color:var(--estado-atencion)}
.pill.rojo{background:var(--estado-riesgo-tinte); color:var(--estado-riesgo)}
.pill.gris{background:var(--estado-neutro-tinte); color:var(--estado-neutro)}
.pill.teal{background:var(--ti-azul-tinte); color:var(--ti-azul-sombra)}
.pill.naranja{background:var(--ti-magenta-tinte); color:var(--ti-magenta-sombra)}

/* Un estado sin registro no se lee igual que uno evaluado: va en línea
   punteada, para que se vea que la casilla está vacía y no en calma. */
.pill.gris{border:1px dashed var(--ti-linea)}

/* ---------- formularios ---------- */
.campo{margin-bottom:15px}
.campo label{display:block; font-weight:600; font-size:.85rem; margin-bottom:4px}
.campo .obligatorio{color:var(--naranja); margin-left:3px}
.campo .ayuda{font-size:.77rem; color:var(--gris); margin:0 0 5px}
input,select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--borde); border-radius:7px;
  font-family:inherit; font-size:.88rem; background:#fff; color:var(--navy);
}
/* El defecto original decia `input:focus, select, textarea:focus`: al del
   medio le faltaba `:focus`, asi que todos los desplegables llevaban
   contorno permanente y ninguno indicaba el foco. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline:2px solid var(--ti-azul-sombra); outline-offset:1px}
textarea{min-height:82px; resize:vertical}
input[type=checkbox]{width:auto; margin-right:6px}
.opciones-multiples{display:flex; flex-wrap:wrap; gap:6px 16px}
.opciones-multiples label{font-weight:400; font-size:.85rem; display:flex; align-items:center}
.error-campo{color:var(--rojo); font-size:.78rem; margin-top:3px; font-weight:600}
.campo.con-error input,.campo.con-error select,.campo.con-error textarea{border-color:var(--rojo)}
fieldset.seccion{
  border:1px solid var(--borde); border-radius:var(--radio); padding:16px 18px; margin:0 0 16px;
}
fieldset.seccion > legend{
  font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--teal-osc); padding:0 8px;
}

/* ---------- bloque repetible ---------- */
.repetible{border:1px dashed var(--ti-linea); border-radius:var(--radio); padding:12px; background:var(--ti-panel)}
.fila-rep{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  align-items:end; padding:10px; border-bottom:1px solid var(--borde);
}
.fila-rep:last-of-type{border-bottom:0}
.fila-rep .campo{margin-bottom:0}

/* ---------- botones ----------
   El primario va en azul con texto blanco en negrita: el manual lo admite
   por ser texto grande en negrita, que es exactamente el caso de un chip. */
button.btn{
  background:var(--ti-azul-sombra); color:var(--ti-blanco); border:0;
  padding:9px 18px; border-radius:var(--radio);
  font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer;
  transition:background-color .15s ease;
}
button.btn:hover{background:var(--ti-azul-profundo)}
button.btn:focus-visible{outline:2px solid var(--ti-azul-sombra); outline-offset:2px}
button.btn.sec{
  background:var(--ti-blanco); color:var(--ti-texto);
  border:1px solid var(--ti-linea); font-weight:600;
}
button.btn.sec:hover{background:var(--ti-panel); border-color:var(--ti-texto-2)}
button.btn.peligro{background:var(--estado-riesgo)}
button.btn.peligro:hover{background:#8A2418}
button.btn.mini{padding:6px 12px; font-size:.79rem}
button.btn:disabled{opacity:.45; cursor:not-allowed}
.acciones{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:14px}

/* ---------- avisos ---------- */
.aviso{
  padding:12px 16px; border-radius:var(--radio); font-size:.86rem; margin:0 0 15px;
  border-left:4px solid var(--ti-azul); background:var(--ti-azul-tinte);
  color:var(--ti-texto);
}
.aviso.error{border-color:var(--estado-riesgo); background:var(--estado-riesgo-tinte)}
.aviso.ok{border-color:var(--estado-ok); background:var(--estado-ok-tinte)}
.aviso.alerta{border-color:var(--ti-magenta); background:var(--ti-magenta-tinte)}

/* ---------- barras ---------- */
.barra{
  height:8px; background:var(--ti-neutro-tinte); border-radius:999px;
  overflow:hidden; min-width:60px;
}
.barra i{
  display:block; height:100%; background:var(--ti-azul); border-radius:999px;
  /* Sin transicion sobre `width`: animar una propiedad de maquetacion
     obliga al navegador a recalcular la disposicion en cada cuadro. El
     detector de diseno lo marca y tiene razon. */
}
/* Sin nada validado la barra queda vacía: se marca con línea para que se
   distinga de una barra que aún no cargó. */
.barra:has(i[style*="width:0%"]),
.barra:has(i[style*="width: 0%"]){border:1px solid var(--ti-linea)}

/* ---------- acceso ---------- */
.pantalla-acceso{
  /* 100vh cuenta la barra de direcciones del navegador móvil aunque esté
     visible, así que la caja queda parcialmente bajo ella. `dvh` mide el
     alto que de verdad se ve. Se deja `vh` antes como respaldo para los
     navegadores que no conocen la unidad nueva. */
  min-height:100vh;
  min-height:100dvh;
  display:grid; place-items:center;
  padding:20px calc(20px + env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(155deg,var(--ti-pizarra) 0%,#3A3839 100%);
}
.caja-acceso{
  background:#fff; border-radius:12px; padding:34px 32px; width:min(420px,100%);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
/* Solo se fija el ancho: el alto lo calcula el navegador con la proporción
   nativa del archivo, que es la regla que evita el logo deformado. */
.caja-acceso .logo-acceso{
  width:172px; height:auto; display:block; margin:0 0 22px;
}
.caja-acceso h1{font-size:1.22rem; margin-bottom:.5em}

/* ---------- utilidades ---------- */
.fila-flex{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.crece{flex:1; min-width:180px}
.derecha{margin-left:auto}
.oculto{display:none !important}
.cargando{color:var(--gris); font-style:italic; padding:20px; text-align:center}
.vacio{color:var(--gris); padding:26px; text-align:center; font-size:.9rem}
code{background:var(--gris-cl); padding:1px 6px; border-radius:4px; font-size:.85em}

/* ---------- ficha de programa evaluado ---------- */
/* Los títulos de sección de una ficha caían en la regla global `h3` a
   14,25px, más chicos que el cuerpo de 15px: el título pesaba menos que el
   texto que encabezaba. Se tratan como epígrafes, igual que en la ficha de
   programa evaluado. */
#ficha-proyecto h3{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ti-azul-sombra); margin:20px 0 8px;
}

/* La fila entera abre la ficha, pero el camino accesible es el enlace del
   código: cuando ese enlace recibe el foco, la fila completa lo acusa. */
tr.fila-proy:focus-within{
  background:var(--ti-azul-tinte);
  outline:2px solid var(--ti-azul-sombra); outline-offset:-2px;
}
.enlace-proyecto{
  font-family:inherit; font-weight:700; color:var(--ti-azul-sombra);
  text-decoration:none; border-bottom:1px dotted currentColor;
}
.enlace-proyecto:hover{color:var(--ti-magenta-sombra)}
.enlace-proyecto:focus-visible{
  outline:2px solid var(--ti-azul-sombra); outline-offset:2px; border-bottom-color:transparent;
}

#ficha-programa h3{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--teal-osc); margin:18px 0 6px;
}
#ficha-programa ul{margin:0 0 4px; padding-left:20px}
#ficha-programa li{margin-bottom:4px; font-size:.9rem}
#ficha-programa p{font-size:.92rem}
tr.fila-prog:hover{background:var(--ti-azul-tinte)}

/* Lista de entregables: sin viñetas, cada fila con su acción a la derecha.
   Los que no tienen archivo se muestran igual, atenuados, porque la brecha
   documental es parte de la información. */
ul.entregables{list-style:none; padding-left:0; margin:2px 0 4px}
ul.entregables li{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:9px 12px; margin-bottom:6px;
  background:var(--papel); border:1px solid var(--borde); border-radius:8px;
}
ul.entregables li .crece{
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; min-width:180px;
}
ul.entregables li .microcopy{margin:0}
ul.entregables li:has(.pill.gris){opacity:.62}
ul.entregables .btn{flex:none}

/* =====================================================================
   PANTALLAS CHICAS
   La plataforma se usa en terreno: una contraparte revisa un compromiso
   desde el celular, en una faena, con una mano. Todo lo de abajo sale de
   probar la aplicación a 375px de ancho.
   ===================================================================== */

/* Evita el zoom por doble toque y el destello gris de Android al tocar. */
a, button, select, input, label, summary, [role="menuitem"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,169,157,.15);
}

@media (max-width:820px){
  /* La cabecera medía 300px de alto: el menú de seis secciones se apilaba
     en cuatro filas y se comía más de un tercio de la pantalla antes de
     mostrar un solo dato. Pasa a ser una sola fila que se desplaza. */
  header.top{
    flex-wrap:wrap; gap:8px; padding:10px 14px;
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  .marca{font-size:.92rem}

  nav.rutas{
    order:3; width:100%; flex:none; flex-wrap:nowrap;
    overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:2px;
  }
  nav.rutas::-webkit-scrollbar{display:none}
  nav.rutas a{
    white-space:nowrap; flex:none;
    padding:10px 14px;              /* área táctil cómoda */
  }

  .sesion{gap:8px; margin-left:auto}
  .sesion #quien{
    max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .chip-rol{display:none}           /* el rol ya se sabe; el nombre importa más */
  .selector-org select{max-width:120px}

  main{padding:16px 14px calc(60px + env(safe-area-inset-bottom))}
  h1{font-size:1.35rem}
  h2{font-size:1.05rem}

  /* Una tabla encerrada en 60vh deja una ventanita inservible en un
     teléfono. Se suelta el alto y se conserva el desplazamiento lateral,
     que es la forma honesta de mostrar una tabla ancha en poco espacio. */
  .tabla-envoltura{max-height:none; overscroll-behavior-x:contain}
  table{font-size:.82rem}
  th, td{padding:8px 9px}

  .grid.k2{grid-template-columns:1fr}
  .fila-flex{gap:8px}

  /* El menú de administración se despliega ocupando el ancho disponible,
     no una columna angosta pegada al borde. */
  .menu-admin .desplegable{
    min-width:0; width:min(260px, calc(100vw - 28px));
  }
  .menu-admin .desplegable button{padding:12px 12px}

  .barra-simulacion{padding:8px 14px}
}

@media (max-width:480px){
  .grid.k4, .grid.k3{grid-template-columns:1fr}
  .kpi .cifra{font-size:1.3rem}
  .card{padding:14px}
  main{padding:12px 12px calc(56px + env(safe-area-inset-bottom))}
  .sesion #quien{max-width:96px}
}

/* En cualquier pantalla táctil, no solo en las chicas: un dedo necesita
   más blanco que un puntero. 44px es el mínimo que recomienda Apple y que
   recogen las pautas de accesibilidad. */
@media (pointer:coarse){
  .btn, .btn.mini, nav.rutas a, .menu-admin .desplegable button{
    min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  }
  .menu-admin .desplegable button{justify-content:flex-start}

  /* iOS acerca la pantalla al enfocar cualquier campo bajo 16px. El salto
     descoloca y obliga a volver a alejar a mano en cada pregunta del
     formulario mensual, que tiene veintiocho. */
  input, select, textarea{font-size:16px}
  /* El selector de cliente tiene su propia regla con mas especificidad
     (.selector-org select), asi que la generica de arriba no lo alcanzaba y
     se quedaba en 13px: suficiente para que iOS acerque la pantalla. */
  .selector-org select{font-size:16px}
  .campo label{font-size:.9rem}
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* =====================================================================
   IMPRESIÓN
   No hay librería de PDF: el diálogo del navegador ya ofrece "Guardar como
   PDF". Añadir una obligaría a un paso de compilación por algo resuelto.

   La idea es simple: al imprimir se oculta todo salvo la ficha marcada, y
   se muestran los encabezados que en pantalla sobran porque el contexto ya
   está a la vista, pero que en un papel suelto hacen falta.
   ===================================================================== */

.solo-impresion{display:none}

/* ---------- cartera · sala de control ----------
   Panel operativo para quien trabaja la cartera todos los días. Su idea
   central es la matriz de formalización: cuatro compuertas por proyecto
   que se leen de un vistazo, para que el problema de la cartera aparezca
   como patrón y no como catorce filas que hay que leer una por una.

   Todo va scopeado bajo `.sala-control` para no alterar las tablas y
   tarjetas del resto del sistema, que siguen igual. */

.sala-control{display:grid; grid-template-columns:250px 1fr; gap:0; align-items:start}

/* El fondo pizarra lo pinta la reja y no el riel: como el riel es sticky,
   su alto es el de su contenido y dejaba media columna en blanco al bajar. */
.sala-control{background:linear-gradient(to right, var(--ti-pizarra) 0 250px, transparent 250px);
  border-radius:var(--radio); overflow:hidden; border:1px solid var(--ti-linea)}

.riel{background:var(--ti-pizarra); color:var(--ti-sobre-oscuro); padding:18px 16px 28px}
.riel h3{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ti-blanco);
  margin:0 0 10px; font-weight:700; opacity:.75;
}
/* El segundo título va después del grupo de filtros del primero, no
   inmediatamente después del otro título: `h3 + h3` no llega a aplicarse y
   los dos bloques quedaban pegados. */
.riel .grupo-filtro + h3{margin-top:24px}
.riel .grupo-filtro{display:flex; flex-direction:column; gap:2px}
.riel .pie{
  font-size:.76rem; line-height:1.45; opacity:.62; margin:22px 0 0;
  border-top:1px solid rgba(255,255,255,.16); padding-top:14px;
}
.filtro{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:none; border:0; color:var(--ti-sobre-oscuro); font:inherit; font-size:.84rem;
  padding:7px 10px; border-radius:6px; cursor:pointer; text-align:left; width:100%;
}
.filtro:hover{background:rgba(255,255,255,.1); color:var(--ti-blanco)}
/* Azul sombra y no azul de marca: sobre el riel oscuro el blanco necesita
   la variante profunda para separarse del fondo sin perder contraste. */
.filtro[aria-pressed="true"]{background:var(--ti-azul-sombra); color:var(--ti-blanco); font-weight:700}
.filtro .n{font-variant-numeric:tabular-nums; opacity:.75; font-weight:400}
.riel .busca{position:relative; margin-bottom:20px}
.riel .busca input{
  width:100%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:6px; color:var(--ti-blanco); font:inherit; font-size:.84rem;
  padding:8px 10px; caret-color:var(--ti-blanco);
}
.riel .busca input::placeholder{color:rgba(220,218,219,.75)}
.riel .busca input:focus{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45)}
.riel :focus-visible{outline:2px solid var(--ti-blanco); outline-offset:1px}

.lienzo{padding:18px 18px 22px; min-width:0; background:var(--ti-blanco)}

/* Tira de cifras: compacta y en línea. Reemplaza a los cuatro KPI en caja,
   que la crítica marcó como agrupación genérica de cualquier panel. */
.tira{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--ti-linea);
  border-radius:var(--radio); overflow:hidden; margin:0 0 16px;
}
.tira > div{padding:11px 16px; flex:1; min-width:140px; border-right:1px solid var(--ti-linea)}
.tira > div:last-child{border-right:0}
.tira dt{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ti-texto-2); font-weight:700; margin-bottom:3px;
}
.tira dd{
  margin:0; font-size:1.25rem; font-weight:700; color:var(--ti-pizarra);
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.tira dd.nulo{color:var(--ti-texto-3)}
.tira dd small{display:block; font-size:.74rem; font-weight:400; color:var(--ti-texto-2); margin-top:2px}

/* --- Matriz de formalización --- */
.matriz-envoltura{overflow:auto; border:1px solid var(--ti-linea); border-radius:var(--radio)}
.matriz{width:100%; border-collapse:collapse; font-size:.84rem}
.matriz thead th{padding:0; white-space:nowrap; z-index:3}
.matriz thead th .rot, .matriz thead th button{
  display:block; width:100%; text-align:inherit; padding:9px 11px; font:inherit;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--ti-blanco); background:none; border:0;
}
.matriz thead th button{cursor:pointer}
.matriz thead th button:hover{background:rgba(255,255,255,.12)}
.matriz thead th button .flecha{opacity:0; margin-left:5px}
.matriz thead th[aria-sort] button .flecha{opacity:1}
/* La segunda fila se fija bajo la primera: con ambas en top:0 se superponen
   apenas hay desplazamiento vertical. */
.matriz thead tr:nth-child(2) th{top:31px; z-index:2}
.matriz th.centro, .matriz td.centro{text-align:center}
.matriz td{padding:8px 11px; border-bottom:1px solid var(--ti-linea); vertical-align:middle}
.matriz tbody tr{cursor:pointer}
.matriz tbody tr:nth-child(even){background:transparent}
.matriz tbody tr:hover{background:var(--ti-azul-tinte)}
.matriz tbody tr:focus-visible{outline:2px solid var(--ti-azul-sombra); outline-offset:-2px}
.matriz tbody tr.activa{background:var(--ti-azul-tinte); box-shadow:inset 3px 0 0 var(--ti-azul-sombra)}
.matriz .cod{font-weight:700; color:var(--ti-pizarra); font-size:.77rem; letter-spacing:.03em; white-space:nowrap}
.matriz .nom{font-weight:600; color:var(--ti-texto)}
.matriz .eje{font-size:.76rem; color:var(--ti-texto-3)}
/* Primera columna congelada: sin esto la matriz se lee a ciegas al deslizar
   en horizontal, que es como se mira desde un teléfono en faena. */
.matriz thead th:first-child{z-index:4}
.matriz tbody td:first-child{
  position:sticky; left:0; background:var(--ti-blanco); z-index:1;
  box-shadow:1px 0 0 var(--ti-linea); font-weight:400;
}
.matriz tbody tr:hover td:first-child,
.matriz tbody tr.activa td:first-child{background:var(--ti-azul-tinte)}
.matriz td.grupo{background:#FCFCFB}
.matriz thead th.grupo{background:#3E3B3C}

/* --- El riel como barra lateral de la pantalla ---
   Sobre 821px deja de ser una columna del contenido y pasa a ocupar el
   costado completo, desde la cabecera hasta el pie. Va después de la reja
   a propósito: con la misma especificidad manda la última regla, y puesto
   antes el `display:block` no llegaba a aplicarse. El riel salía del flujo
   igual, la reja seguía reservando su primera columna de 250px y el lienzo
   se metía ahí: la tabla quedaba de 250px con la página en blanco al lado. */
@media (min-width:821px){
  .sala-control{
    display:block; background:none; border:0; border-radius:0; overflow:visible;
  }
  .riel{
    position:fixed; left:0; top:var(--alto-cabecera); bottom:0;
    width:var(--riel-ancho); overflow:auto; z-index:30; border-radius:0;
  }
  .lienzo{padding:0; background:none}
  /* El contenido arranca después del riel y usa todo lo que queda. */
  main:has(.sala-control){padding-left:calc(var(--riel-ancho) + 26px)}
}

/* Compuertas. El vacío se dibuja, no se deja en blanco: una casilla vacía
   se confunde con un componente que no cargó. */
.compuerta{
  display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:6px; font-weight:700; font-size:.8rem;
}
.compuerta.si{background:var(--estado-ok-tinte); color:var(--estado-ok)}
.compuerta.no{background:none; color:var(--ti-texto-3); border:1px dashed #BFBDBE}

/* Un dato que la fuente no publica se marca; no se deja la casilla en
   blanco. Una celda vacía se lee como que la pantalla no cargó, y en estas
   carteras la ausencia ES el hallazgo: hay que verla. */
.matriz .nulo{color:var(--ti-texto-3); font-variant-numeric:tabular-nums}

/* La procedencia de cada cifra, en la ficha. Va en cuerpo chico porque
   acompaña al dato, no compite con él, pero va: en una cartera autodeclarada
   la fuente es la mitad del dato. */
ul.fuentes{margin:.3em 0 0; padding-left:18px}
ul.fuentes li{font-size:.78rem; color:var(--ti-texto-2); margin-bottom:3px}

/* El nombre del proyecto es la columna que se lee primero; con seis o siete
   columnas al lado se quedaba sin ancho y partía en cinco líneas. */
.matriz td:first-child, .matriz th:first-child{min-width:210px}
@media (max-width:900px){ .matriz td:first-child, .matriz th:first-child{min-width:160px} }

.matriz-vacia{padding:38px 20px; text-align:center; color:var(--ti-texto-2)}
.matriz-vacia b{display:block; color:var(--ti-texto); font-size:1rem; margin-bottom:4px}

/* --- Cajón lateral de la ficha --- */
.velo-cajon{
  position:fixed; inset:0; background:rgba(40,38,39,.34); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.velo-cajon.visible{opacity:1; pointer-events:auto}
.cajon-proyecto{
  position:fixed; top:0; right:0; bottom:0; width:min(720px,96vw); z-index:61;
  background:var(--ti-blanco); box-shadow:-18px 0 46px rgba(76,73,74,.22);
  transform:translateX(101%); transition:transform .34s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
.cajon-proyecto.abierto{transform:none}
.cajon-cab{
  background:var(--ti-pizarra); color:var(--ti-blanco); padding:14px 18px;
  display:flex; align-items:flex-start; gap:12px; flex:none;
}
.cajon-cab .cod-cajon{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  opacity:.75; font-weight:700;
}
.cajon-cab h2{margin:2px 0 0; font-size:1.1rem; color:var(--ti-blanco)}
.cajon-cerrar{
  margin-left:auto; background:rgba(255,255,255,.12); border:0; color:var(--ti-blanco);
  width:32px; height:32px; border-radius:7px; cursor:pointer; flex:none;
  font-size:1.1rem; line-height:1;
}
.cajon-cerrar:hover{background:rgba(255,255,255,.24)}
.cajon-cerrar:focus-visible{outline:2px solid var(--ti-blanco)}
.cajon-cuerpo{padding:16px 18px 28px; overflow:auto; flex:1}
.compuertas-chips{display:flex; gap:7px; flex-wrap:wrap; margin:0 0 4px}
.chip-compuerta{
  font-size:.76rem; font-weight:700; padding:4px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:5px;
}
.chip-compuerta.si{background:var(--estado-ok-tinte); color:var(--estado-ok)}
.chip-compuerta.no{background:none; color:var(--ti-texto-2); border:1px dashed #BFBDBE}

/* El cajón se ensancha para la Teoría del Cambio: cinco columnas en 720px
   obligarían a deslizar de lado para leer una sola tarjeta. Vuelve a su
   ancho al cerrar o al volver a la ficha. */
.cajon-proyecto.ancho{width:min(1180px,98vw)}

/* --- Pestañas del cajón --- */
.pestanas{
  display:flex; gap:2px; border-bottom:1px solid var(--ti-linea);
  margin:-16px -18px 16px; padding:0 18px; background:var(--ti-panel);
}
.pestanas [role=tab]{
  font:inherit; font-size:.86rem; font-weight:700; color:var(--ti-texto-2);
  background:none; border:0; border-bottom:3px solid transparent;
  padding:11px 14px; cursor:pointer; margin-bottom:-1px;
}
.pestanas [role=tab]:hover{color:var(--ti-texto)}
.pestanas [role=tab][aria-selected=true]{
  color:var(--ti-azul-sombra); border-bottom-color:var(--ti-azul);
  background:var(--ti-blanco);
}
.pestanas [role=tab]:focus-visible{outline:2px solid var(--ti-azul); outline-offset:-3px}

/* --- Teoría del Cambio + SROI --- */
/*
   El panel se lee de arriba abajo y cada tramo deja su cabecera pegada al
   borde. Cuando el tramo siguiente llega, su cabecera empuja a la anterior:
   por eso los botones y los títulos de las columnas se van solos al salir de
   la cadena, sin apagarlos con JavaScript.

   `--alto-cab-cadena` lo mide `app.js` y lo escribe aquí, porque el texto de
   la cabecera se parte en más líneas según el ancho del cajón.
*/
.cadena-panel{--alto-cab-cadena:96px}
.cadena-cabecera{
  position:sticky; top:0; z-index:8;
  background:var(--ti-blanco); padding:2px 0 10px;
  border-bottom:1px solid var(--ti-linea);
}
.cabecera-tramo{
  position:sticky; top:var(--alto-cab-cadena); z-index:6;
  background:var(--ti-blanco); padding-top:10px;
}
.tramo{margin-top:6px}
.titulo-tramo{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ti-magenta-sombra); margin:0 0 8px; padding-top:4px;
}

.mando-cadena{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 10px}
.mando-cadena .paso-rot{font-size:.82rem; color:var(--ti-texto-2); font-weight:700}
.mando-cadena .btn:disabled{opacity:.4; cursor:not-allowed}

/* Los títulos de las columnas viven fuera de la caja que desliza —dentro no
   podrían quedarse fijos— y se mueven en horizontal por JavaScript para
   seguir estando encima de su columna. */
.cadena-titulos-marco{overflow:hidden}
.cadena-titulos{
  display:grid; grid-template-columns:repeat(5,minmax(180px,1fr));
  gap:0 10px; min-width:940px;
}

/* La rejilla tiene un ancho mínimo propio: por debajo de eso las tarjetas
   dejan de ser legibles y es preferible deslizar dentro de la caja antes que
   apretar cinco columnas contra el borde. El desborde se queda aquí y no lo
   hereda la página. */
.cadena-envoltura{overflow-x:auto; padding-bottom:6px}
/* Una sola rejilla: las cinco tarjetas de una cadena son cinco celdas de la
   misma fila, así que se estiran a la altura de la más alta y la cadena se
   lee de izquierda a derecha. Con una columna independiente por paso, la
   tarjeta larga de arriba desalineaba todo lo de abajo. */
.cadena-rejilla{
  display:grid; grid-template-columns:repeat(5,minmax(180px,1fr));
  gap:9px 10px; min-width:940px; align-items:stretch;
}
.col-tit{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--ti-magenta-sombra); padding-bottom:7px; margin-bottom:9px;
  border-bottom:2px solid var(--ti-linea);
  opacity:0; transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease;
}
.col-tit.on{opacity:1; transform:none}
.tarjeta-cadena{
  background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-left:3px solid var(--ti-azul); border-radius:7px;
  padding:8px 10px; font-size:.79rem; line-height:1.42;
  opacity:0; transform:translateX(-14px) scale(.97);
  transition:opacity .45s ease, transform .45s ease;
}
.tarjeta-cadena.on{opacity:1; transform:none}
.tarjeta-cadena .rot{display:block; font-weight:700; color:var(--ti-texto); margin-bottom:2px}
.tarjeta-cadena .f{
  display:block; font-size:.73rem; color:var(--ti-texto-2);
  font-variant-numeric:tabular-nums;
}
.tarjeta-cadena .cifra{
  display:block; font-weight:700; color:var(--ti-azul-sombra);
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.tarjeta-cadena.res{border-left-color:var(--ti-verde)}
.tarjeta-cadena.res.final{border-left-color:var(--ti-magenta)}
.tarjeta-cadena.prox{border-left-color:var(--ti-magenta-sombra); background:#FDFCFD}

/* El bloque de cierre aparece con la última etapa. Anima SOLO la opacidad: un
   ancestro con `transform` se convierte en el marco de referencia de sus
   descendientes y les rompe el `position:sticky`, así que un `translateY` de
   adorno aquí desactivaría la cabecera fija de este tramo. */
.cadena-cierre, #tramo-supuestos{opacity:0; transition:opacity .5s ease}
.cadena-cierre.on, #tramo-supuestos.on{opacity:1}
/* `barra-anio` y no `barra`: la segunda ya está tomada por la barra de
   progreso de los compromisos —8px de alto y `overflow:hidden`— y reutilizar
   el nombre dejaba este gráfico recortado a esos ocho píxeles. */
.cadena-barras{display:flex; align-items:flex-end; gap:9px; height:230px; padding-top:8px}
.cadena-barras .barra-anio{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:4px; font-size:.73rem;
}
/* `flex:none` impide que la columna se encoja para hacerle sitio a su propio
   rótulo: sin esto, la más alta termina en cero. */
.cadena-barras .col-anio{
  flex:none; width:100%; background:linear-gradient(180deg,#9BC1DC,#5E90B4);
  border-radius:5px 5px 0 0; height:0; transition:height .7s ease;
}
.cadena-barras .v{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ti-texto)}
.cadena-barras .a{color:var(--ti-texto-3)}
/* Una diferencia respecto del caso base se lee de un vistazo por el color;
   el signo del rótulo la dice igual para quien no distingue estos dos. */
.cadena-cierre .cifra.sube{color:var(--estado-ok)}
.cadena-cierre .cifra.baja{color:var(--estado-riesgo)}

/* --- Panel de supuestos --- */
.cabecera-supuestos{padding-bottom:10px; border-bottom:1px solid var(--ti-linea)}
.cabecera-supuestos .grid.k4{gap:8px}
.cabecera-supuestos .kpi{padding:8px 12px}
.cabecera-supuestos .kpi .cifra{font-size:1.15rem}

.supuestos{
  margin-top:14px; background:var(--ti-pizarra); color:var(--ti-sobre-oscuro);
  border-radius:var(--radio); padding:15px 17px;
}
.supuestos h3{color:var(--ti-blanco); margin-bottom:4px}
.supuestos h4{
  color:var(--ti-blanco); font-size:.76rem; margin:0 0 8px; font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:5px;
}
.aviso-supuestos{font-size:.79rem; opacity:.82; margin:0 0 13px}
.grupos-supuestos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px;
  margin-bottom:12px;
}
.supuestos .ctrl{margin-bottom:10px}
.supuestos .ctrl label{
  display:flex; justify-content:space-between; gap:10px;
  font-size:.78rem; margin-bottom:2px;
}
.supuestos .ctrl .val{color:var(--ti-blanco); font-weight:700; font-variant-numeric:tabular-nums}
.supuestos .ctrl .base{font-size:.7rem; opacity:.62}
.supuestos .ctrl .ayuda{display:block; font-size:.71rem; opacity:.6; margin-top:1px}
.supuestos .ctrl input[type=range]{width:100%; accent-color:var(--ti-azul); margin:2px 0 0}
.supuestos .ctrl input[type=range]:focus-visible{outline:2px solid var(--ti-blanco); outline-offset:3px}
/* Lo que se apartó del caso base queda señalado: sin esto, a los cinco
   minutos de mover deslizadores nadie sabe qué sigue siendo el modelo. */
.supuestos .ctrl.movido label > span:first-child{color:#FFD9F1}
.supuestos .btn.sec{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:var(--ti-blanco)}
.supuestos .btn.sec:hover{background:rgba(255,255,255,.2); border-color:var(--ti-blanco)}

@media (max-width:820px){
  .pestanas{margin:-16px -12px 14px; padding:0 12px}
  .cadena-barras{height:180px}
}

/* Entre 821 y 1080 el riel de 250px le come demasiado al lienzo y la matriz
   queda con nueve columnas en un ancho de tableta. Se estrecha antes de
   apilarse, que es un paso menos brusco que pasar de dos columnas a una. */
@media (max-width:1080px) and (min-width:821px){
  .sala-control{grid-template-columns:198px 1fr;
    background:linear-gradient(to right, var(--ti-pizarra) 0 198px, transparent 198px)}
  .riel{padding:16px 12px 22px}
  .filtro{font-size:.8rem; padding:6px 8px}
}

@media (max-width:820px){
  /* En una columna la banda de la reja sobra: el riel trae su propio fondo. */
  .sala-control{grid-template-columns:1fr; background:none}
  .riel .grupo-filtro{flex-direction:row; flex-wrap:wrap}
  .filtro{width:auto}
  .lienzo{padding:14px 12px 18px}
  .cajon-proyecto{width:100vw}
  /* Dos por fila en vez de una tira que obliga a deslizar: cinco cifras en
     columna dejan la matriz fuera de la primera pantalla. */
  .tira > div{min-width:0; flex:1 1 46%}
  .tira dd{font-size:1.1rem}
}

@media (max-width:480px){
  .tira > div{flex:1 1 100%; border-right:0; border-bottom:1px solid var(--ti-linea)}
  .tira > div:last-child{border-bottom:0}
  .lienzo{padding:12px 8px 16px}
  .riel{padding:14px 12px 20px}
  .matriz td{padding:7px 8px}
  .matriz thead th .rot, .matriz thead th button{padding:8px 8px}
  /* El cajón a pantalla completa y sin sombra lateral, que a este ancho no
     separa nada porque no queda nada detrás que separar. */
  .cajon-proyecto{box-shadow:none}
  .cajon-cuerpo{padding:12px 12px 24px}
}

/* Quien pidió menos movimiento no debería recibir un panel que entra
   deslizándose por el costado. */
@media (prefers-reduced-motion:reduce){
  .cajon-proyecto, .velo-cajon{transition:none}
}

/* =====================================================================
   SISTEMA INTERNO · tablero de entregables

   Prefijo `si-`, comprobado que no existía ninguna clase con él. Es la
   trampa del `.barra` de ocho pixeles, que dejo un grafico recortado con
   las cifras correctas al lado.

   Cada frente conserva su forma —matriz, lista, linea de tiempo— y lo que
   se mantiene igual es el vocabulario. Por eso aqui no hay colores nuevos:
   los estados usan las pastillas que ya define este archivo.
   ===================================================================== */
.si-tabs{display:flex; gap:4px; flex-wrap:wrap; margin:20px 0 4px;
  border-bottom:1px solid var(--ti-linea)}
.si-tab{border:none; background:none; font:inherit; cursor:pointer;
  padding:10px 16px; color:var(--ti-texto-2); border-bottom:3px solid transparent;
  margin-bottom:-1px}
.si-tab:hover{color:var(--ti-texto)}
.si-tab[aria-selected=true]{color:var(--ti-azul-sombra);
  border-bottom-color:var(--ti-azul); font-weight:700}
.si-tab .n{display:inline-block; margin-left:7px; font-size:.75rem; font-weight:700;
  background:var(--ti-panel); border-radius:999px; padding:1px 8px; color:var(--ti-texto-2)}
.si-tab[aria-selected=true] .n{background:var(--ti-azul-tinte); color:var(--ti-azul-sombra)}

.si-matriz{width:100%; border-collapse:separate; border-spacing:0}
.si-matriz thead th{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ti-sobre-oscuro); background:var(--ti-pizarra); padding:10px 12px;
  font-weight:600; text-align:left; vertical-align:bottom}
.si-matriz thead th:first-child{width:25%}
.si-prog{padding:11px 12px; border-bottom:1px solid var(--ti-linea); vertical-align:middle}
.si-prog b{display:block; line-height:1.25}
.si-prog span{font-size:.77rem; color:var(--ti-texto-3)}
.si-celda{border-bottom:1px solid var(--ti-linea); border-left:1px solid var(--ti-linea);
  padding:7px; vertical-align:middle}
.si-cel{width:100%; display:block; text-align:left; cursor:pointer;
  border:1px solid transparent; border-radius:8px; padding:7px 9px;
  background:none; font:inherit; color:inherit}
.si-cel:hover{background:var(--ti-panel); border-color:var(--ti-linea)}
.si-cel:focus-visible, .si-nada:focus-visible, .si-item:focus-visible{
  outline:3px solid var(--ti-azul); outline-offset:2px}
.si-et{display:block; font-size:.74rem; color:var(--ti-texto-3); margin-top:4px}
/* El vacio se dibuja. Una casilla en blanco se lee como que la pantalla se
   rompio; un punteado dice que ahi no hay nada y que se sabe. */
.si-nada{display:block; width:100%; border:1px dashed #CFCDCE; border-radius:8px;
  padding:9px; text-align:center; color:var(--ti-texto-3); font-size:.79rem;
  background:none; font-family:inherit; cursor:pointer}
.si-nada:hover{border-color:var(--ti-azul); color:var(--ti-azul-sombra)}
.si-vacia .si-prog{background:#FAFAFA}
.si-leyenda{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}

.si-lista{list-style:none; padding:0; margin:0}
.si-lista li{margin-bottom:8px}
.si-item{display:flex; gap:13px; align-items:flex-start; width:100%; text-align:left;
  padding:13px 14px; border:1px solid var(--ti-linea); border-radius:8px;
  background:var(--ti-blanco); font:inherit; color:inherit; cursor:pointer}
.si-item:hover{border-color:#C9C7C8}
.si-cod{flex:0 0 auto; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  color:var(--ti-texto-3); background:var(--ti-panel); border-radius:6px; padding:3px 8px}
.si-cuerpo{flex:1; min-width:0}
.si-cuerpo b{display:block; line-height:1.3}
.si-sub{display:block; font-size:.78rem; color:var(--ti-texto-3); margin-top:2px}
.si-der{flex:0 0 auto; text-align:right}
.si-nat{font-size:.75rem; color:var(--ti-texto-3)}
/* Las dos cadencias van una sobre otra y con rotulo, nunca fundidas en una
   frase: son cosas distintas —un tope y un ritmo— y elegir cual mostrar
   seria decidir contra que se mide el cumplimiento. */
.si-cad{display:flex; gap:18px; flex-wrap:wrap; margin-top:7px; font-size:.78rem}
.si-cad > span{min-width:0; color:var(--ti-texto-2)}
.si-cad i{display:block; font-style:normal; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ti-texto-3)}
.si-cad .difiere{color:var(--ti-magenta-sombra); font-weight:600}
.si-mes{flex:0 0 54px; text-align:center; border-radius:8px; padding:6px 4px;
  background:var(--ti-panel); color:var(--ti-texto)}
.si-mes.listo{background:var(--estado-ok-tinte)}
.si-mes.listo b{color:var(--estado-ok)}

.si-panel{position:fixed; top:0; right:0; bottom:0; width:min(430px,100%);
  background:var(--ti-blanco); border-left:1px solid var(--ti-linea);
  box-shadow:-8px 0 24px rgba(0,0,0,.12); padding:22px; overflow:auto; z-index:50}
@media (max-width:820px){
  .si-matriz thead th{font-size:.66rem; padding:8px 5px}
  .si-matriz thead th:first-child{width:auto}
  .si-celda{padding:4px}
  .si-cel{padding:6px}
  .si-item{flex-wrap:wrap}
  .si-der{text-align:left}
}

/* --- Sistema Interno · repartir el trabajo --------------------------- */
.si-suelto{border-style:dashed}
.si-suelto:hover{border-style:solid; border-color:var(--ti-azul)}
.si-carga{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px}
.si-persona{background:var(--ti-panel); border-radius:8px; padding:8px 12px; font-size:.82rem}
.si-persona b{display:block}
.si-persona span{color:var(--ti-texto-3); font-size:.78rem}

.si-paso{border:1px solid var(--ti-linea); border-radius:8px; padding:12px 13px;
  margin-bottom:9px; background:var(--ti-blanco)}
.si-paso.opcional{border-style:dashed}
.si-paso-cab{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.si-paso-cab .n{flex:0 0 22px; height:22px; border-radius:50%; display:grid;
  place-items:center; font-size:.71rem; font-weight:700;
  background:var(--ti-pizarra); color:#fff}
.si-paso-cab b{flex:1; min-width:0; line-height:1.2}
.si-paso-cab .rol{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ti-texto-3); background:var(--ti-panel); border-radius:5px; padding:2px 7px}
.si-campo{margin-bottom:8px}
.si-campo label{display:block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ti-texto-3); margin-bottom:3px}
.si-campo select, .si-campo input, .si-campo textarea{width:100%; font:inherit;
  font-size:.86rem; padding:6px 9px; border:1px solid var(--ti-linea);
  border-radius:7px; background:var(--ti-blanco)}
.si-campo textarea{min-height:52px; resize:vertical}
/* La regla de cuatro ojos se ve en el propio selector, no en una ayuda al
   pie: una regla que solo vive en la validacion se descubre cuando ya se
   rompio. */
.si-veto{font-size:.74rem; color:var(--ti-magenta-sombra); margin:3px 0 0}
.si-bloqueado{font-size:.78rem; color:var(--ti-texto-2); background:var(--ti-panel);
  border-radius:7px; padding:8px 10px}

.si-circuito{list-style:none; padding:0; margin:8px 0 0}
.si-circuito li{display:flex; gap:10px; align-items:flex-start; padding:9px 0;
  border-bottom:1px solid var(--ti-linea)}
.si-circuito li:last-child{border-bottom:none}
.si-num{flex:0 0 22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:700; background:var(--ti-panel); color:var(--ti-texto-2)}
.si-num.ok{background:var(--ti-verde); color:#fff}
.si-num.on{background:var(--ti-azul); color:#fff}
/* La instruccion se muestra donde se cumple, no en una nota general que
   nadie relee. */
.si-instr{display:block; margin-top:5px; padding:7px 9px; font-size:.8rem;
  background:var(--ti-panel); border-radius:7px; color:var(--ti-texto-2)}

/* La previsualizacion del circuito. Un desplegable que hay que memorizar
   esta mal resuelto: aqui se ve la secuencia antes de aplicarla. Las etapas
   opcionales van punteadas, porque saltarlas es legitimo y hay que verlo
   antes de repartir, no despues. */
.si-previa{display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin-top:8px; padding:9px 10px; background:var(--ti-panel); border-radius:8px}
.si-previa-paso{font-size:.75rem; background:var(--ti-blanco);
  border:1px solid var(--ti-linea); border-radius:10px; padding:4px 11px;
  color:var(--ti-texto-2); white-space:nowrap; line-height:1.25}
/* El rol va debajo y visible. Estaba en un title, y un tooltip no se puede
   leer siempre: hay que ir a buscarlo con el raton y no existe en el movil. */
.si-previa-paso i{display:block; font-style:normal; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ti-texto-3)}
.si-previa-paso.opcional{border-style:dashed; color:var(--ti-texto-3)}
.si-previa-flecha{color:var(--ti-texto-3); font-size:.8rem}
.si-previa-cuando{flex:1 0 100%; margin:0 0 3px; font-size:.78rem;
  color:var(--ti-texto-2)}

/* La tabla de referencia de los cinco circuitos. Vive en la pestana donde
   se reparte, que es donde se decide como se va a trabajar cada cosa. Sus
   etapas salen de la base: una tabla de referencia escrita a mano deja de
   ser referencia el dia que alguien toca lo que describe. */
.si-circuitos{width:100%; border-collapse:separate; border-spacing:0}
.si-circuitos thead th{font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ti-sobre-oscuro); background:var(--ti-pizarra);
  padding:9px 12px; font-weight:600; text-align:left}
.si-circuitos td{padding:11px 12px; border-bottom:1px solid var(--ti-linea);
  vertical-align:top}
.si-circuitos tr:last-child td{border-bottom:none}
.si-circuitos td b{display:block; line-height:1.25}
.si-clave{white-space:nowrap; font-weight:700; color:var(--ti-azul-sombra)}
.si-clave span{display:block; font-weight:400; font-size:.72rem;
  color:var(--ti-texto-3)}
@media (max-width:820px){
  .si-circuitos td:nth-child(3){min-width:280px}
}

/* =====================================================================
   PANEL DE CONTROL · la pantalla de entrada de un cliente

   Prefijo `pc-`. Reutiliza `.card`, `.kpi`, `.matriz` y `.pill` del
   sistema: aqui solo esta lo que esas piezas no cubren.

   LA INFORMACION LARGA VIVE EN EL CURSOR. Un panel se mira de un vistazo y
   se interroga despues, asi que el detalle de cada dimension y de cada
   programa aparece al pasar por encima. Todo lo que el raton revela es
   alcanzable con el tabulador: por eso hay `:focus-visible` al lado de cada
   `:hover`, y no al reves.
   ===================================================================== */
.pc-h2{
  font-size:1rem; margin:30px 0 4px; color:var(--ti-pizarra);
  padding-top:16px; border-top:2px solid var(--ti-linea);
}
.pc-h2 small{font-weight:400; color:var(--ti-texto-3); font-size:.78rem; margin-left:8px}
/* El texto que hay que leer si o si, en una medida corta. Un parrafo de
   mas de unos 75 caracteres por linea obliga al ojo a buscar el principio
   del renglon siguiente. */
/* A todo el ancho, y no a 74ch: en un panel el texto acompaña a un cuadro
   que ocupa la pantalla entera, y una columna estrecha al lado de una tabla
   ancha se lee como una nota al margen en vez de como la entrada. */
.pc-lead{margin:0 0 14px; line-height:1.55}
.pc-fuente{
  margin:26px 0 0; padding-top:12px;
  border-top:1px solid var(--ti-linea);
}
.pc-pista{
  display:block; margin-top:4px; font-size:.76rem; color:var(--ti-texto-3);
  font-style:italic;
}

/* ---- la rejilla: radar grande a la izquierda ---- */
/* Las dos cajas a la misma altura. Con `start` el radar quedaba corto
   contra una tabla que crecio, y dos cuadros desalineados al lado uno del
   otro se leen como si al de la izquierda le faltara algo. */
.pc-dos{
  display:grid; gap:18px; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:stretch; margin-top:14px;
}
@media (max-width:980px){ .pc-dos{grid-template-columns:1fr} }
.pc-lienzo{margin-bottom:0; padding:10px 12px 14px; display:flex; flex-direction:column; justify-content:center}
.pc-tabla{margin-bottom:0}
/* Las tablas del panel se muestran enteras a lo alto. `.tabla-envoltura`
   recorta a 60vh y saca su propia barra, que aqui sobra: son siete filas y
   nueve, y una barra vertical esconde justo el total —la fila que cierra la
   cuenta— detras de un desplazamiento que nadie adivina que existe.

   Se quita SOLO el `max-height`. La version anterior ponia ademas
   `overflow:visible`, y eso apagaba tambien el desplazamiento HORIZONTAL:
   la tabla de programas, de 797px, dejaba de deslizarse dentro de su
   tarjeta y empujaba la pagina entera —422px de desborde en un telefono—,
   ademas de desactivar la columna congelada, que necesita un contenedor
   con desplazamiento al que pegarse. Sin `max-height` no hay nada que
   recortar a lo alto, asi que `overflow:auto` no saca barra vertical: se
   consigue lo que se buscaba sin romper lo otro. */
.pc .tabla-envoltura{max-height:none}
.pc-radar{width:100%; height:auto; display:block}
.pc-leyenda{
  display:flex; gap:16px; justify-content:center; margin-top:2px;
  font-size:.78rem; color:var(--ti-texto-2);
}
.pc-leyenda span{display:inline-flex; align-items:center; gap:6px}
.pc-leyenda i{width:13px; height:3px; border-radius:2px; display:inline-block}
/* Con una sola serie, la leyenda dejo de nombrar dos areas y pasa a explicar
   una escala de color. Los puntos van redondos y no en tira: son vertices,
   no lineas, y la leyenda tiene que parecerse a lo que hay en el dibujo. */
.pc-leyenda i{width:11px; height:11px; border-radius:50%}
.pc-leyenda-rot{
  margin:8px auto 0; max-width:46ch; text-align:center;
  font-size:.78rem; color:var(--ti-texto-3); line-height:1.4;
}
/* La razon escrita junto a su vertice. Tabular para que las seis cifras
   caigan alineadas y no bailen segun lleven un 1 o un 2. */
.pc-razon{
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  pointer-events:none; transition:opacity .12s ease;
}

/* ---- lo que reacciona en el radar ---- */
.pc-eje{
  font-size:11.5px; fill:var(--ti-texto-2); font-weight:600;
  pointer-events:none; transition:fill .12s ease;
}
.pc-escala{font-size:9.5px; fill:var(--ti-texto-3); pointer-events:none}
.pc-vertice{transition:r .12s ease, opacity .12s ease; pointer-events:none}
/* La zona sensible es invisible y grande: apuntar a un texto de once
   pixeles con el raton es un ejercicio de punteria, no una interfaz. */
.pc-zona{fill:transparent; cursor:pointer}
.pc-zona:focus-visible{outline:3px solid var(--ti-azul); outline-offset:2px}
.pc-serie{transition:fill-opacity .12s ease}
/* Al resaltar una dimension, las demas bajan pero NO desaparecen: se sigue
   viendo la forma del conjunto, que es lo que da sentido a la que se mira. */
.pc-apagado{opacity:.3; transition:opacity .12s ease}
.pc-vivo{opacity:1}
circle.pc-vivo{r:7}
text.pc-vivo{fill:var(--ti-azul-sombra)}
tr.pc-vivo{background:var(--ti-azul-tinte)}

/* ---- la tabla de dimensiones ----
   Cuatro columnas y no cinco: la barra de cada serie vive DEBAJO de su
   propia cifra, en vez de en una columna aparte. Separarlas obligaba a la
   tabla a repartir el ancho entre cinco y los importes se partian en dos
   lineas, que es la forma mas rapida de que una cifra se lea mal. */
/* El relleno de un encabezado de `.matriz` no vive en el `th` sino en el
   `span.rot` de dentro, y las tablas del panel escriben el rotulo suelto.
   Sin esto el `padding:0` del th deja dos titulos pegados: se leian como
   una sola palabra «RAZONPERFIL POR DIMENSION», y lo mismo en la tabla de
   escenarios. Va sobre todas las tablas del panel y no sobre las dos que
   se vieron mal: la siguiente que se agregue nace con el mismo defecto. */
.pc .matriz thead th{padding:9px 11px}
.pc-dim td, .pc-prog td{padding:9px 11px}
.pc-dim th:first-child{width:36%}
.pc-dim td:first-child b{line-height:1.25}
.pc-dim td:first-child .microcopy{display:block; margin-top:1px}
.pc-conbarra{min-width:104px}
.pc-conbarra .b{
  height:5px; border-radius:3px; background:var(--ti-panel);
  overflow:hidden; margin-top:5px;
}
.pc-conbarra .b i{display:block; height:100%}
.pc-dim tbody tr{cursor:pointer; transition:background .12s ease}
.pc-dim tbody tr:hover{background:var(--ti-panel)}
.pc-dim tbody tr:focus-visible{outline:2px solid var(--ti-azul); outline-offset:-2px}
.pc-punto{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:7px; vertical-align:baseline;
}
.pc-total td{background:var(--ti-panel); font-weight:700}
.pc-total .microcopy{font-weight:400}

/* ---- el perfil de un programa: aqui SI se apila, porque las seis partes
        son porciones del mismo valor social ---- */
.pc-prog tbody tr{transition:background .12s ease}
.pc-prog tbody tr:hover{background:var(--ti-panel)}
.pc-prog tbody tr:focus-visible{outline:2px solid var(--ti-azul); outline-offset:-2px}
.pc-barrita{
  height:10px; border-radius:5px; background:var(--ti-panel);
  overflow:hidden; display:flex; min-width:110px;
}
.pc-barrita i{display:block; height:100%; transition:opacity .12s ease}

/* ---- lo tocable en el texto ---- */
.pc-tocable{cursor:help}
.pc-tocable:focus-visible{outline:2px solid var(--ti-azul); outline-offset:2px; border-radius:6px}
/* La fila de lo que ningun proxy alcanza. Va en gris y con el borde
   punteado porque no es una dimension mas: es la parte de la inversion que
   no llego a medirse, y pintarla igual que las otras seis la haria pasar
   por un resultado.

   El gris es `--ti-texto-2` y no `--ti-texto-3`. El tercero da 4,48:1 sobre
   blanco, por debajo del 4,5:1 que exige el texto chico, y aqui carga una
   cifra de $88 millones. El propio encabezado de este archivo lo dice: el
   tercero queda para texto grande. */
.pc-sinasignar td,
/* La primera celda necesita su propia regla: `tbody td:first-child` pinta
   toda primera columna en `--ti-texto` con especificidad 0-1-2, y le ganaba
   a `.pc-sinasignar td` (0-1-1). El resultado medido era que justo la
   etiqueta de esta fila salia del mismo tono que una dimension de verdad,
   que es lo que este bloque existe para evitar. */
.pc-sinasignar td:first-child{
  color:var(--ti-texto-2); font-weight:400; font-style:italic;
  border-top:1px dashed var(--ti-linea);
}
.pc-sinasignar td:first-child b{font-style:normal}
/* Cada programa viaja pegado a su cifra: si la linea se parte, que se parta
   entre los dos y no dejando un nombre huerfano de su monto. */
.pc-par{white-space:nowrap}
.pc-sinasignar .microcopy{display:block; margin-top:1px; font-style:normal}

/* ---- el globo ---- */
.pc-globo{
  position:fixed; z-index:200; max-width:330px; pointer-events:none;
  background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.14);
  padding:11px 13px; font-size:.8rem; color:var(--ti-texto-2); line-height:1.45;
}
.pc-globo b{color:var(--ti-pizarra); font-size:.86rem}
.pc-globo p{margin:6px 0 0}
.pc-globo .pc-cod{
  display:inline-block; margin-left:7px; font-size:.66rem; font-weight:700;
  letter-spacing:.05em; color:var(--ti-texto-3); background:var(--ti-panel);
  border-radius:4px; padding:1px 6px;
}
.pc-globo .pc-sub{margin-top:7px; padding-top:7px; border-top:1px solid var(--ti-linea);
  font-size:.74rem; color:var(--ti-texto-3)}
.pc-mini{width:100%; border-collapse:collapse; margin-top:7px; font-size:.78rem}
.pc-mini td{padding:3px 0; border:none; vertical-align:top}
.pc-mini td:nth-child(2), .pc-mini td:nth-child(3){
  text-align:right; white-space:nowrap; padding-left:10px;
  font-variant-numeric:tabular-nums;
}
.pc-mini td:first-child{color:var(--ti-texto-3)}

@media (prefers-reduced-motion:reduce){
  .pc-eje, .pc-vertice, .pc-serie, .pc-apagado, .pc-barrita i,
  .pc-dim tbody tr, .pc-prog tbody tr{transition:none}
}

@media print{
  @page{margin:16mm 14mm}

  body{background:#fff; color:#000; font-size:10.5pt}
  header.top, nav.rutas, .no-imprimir, .btn{display:none !important}

  /* Solo la ficha que se mandó a imprimir. Sin esto saldría también la
     tabla de la cartera completa, que ya ocupa varias hojas por sí sola.
     La ficha de proyecto vive dentro del cajón lateral, así que la
     excepción es el cajón y no la ficha: si aquí dijera `#ficha-proyecto`
     —como decía antes de que existiera el cajón— se ocultaría su
     contenedor y el PDF saldría en blanco. */
  body.imprimiendo .vista.activa > *:not(.cajon-proyecto):not(#ficha-programa){display:none !important}
  body.imprimiendo .velo-cajon{display:none !important}
  body.imprimiendo #ficha-proyecto > *:not(.imprimiendo-esta),
  body.imprimiendo #ficha-programa > *:not(.imprimiendo-esta){display:none !important}

  /* En papel el cajón deja de ser un panel flotante y vuelve a ser un
     documento: sin esto, `position:fixed` imprime una sola hoja recortada
     a la altura de la pantalla y el resto de la ficha se pierde. */
  .cajon-proyecto{
    position:static !important; width:auto !important; max-width:none !important;
    transform:none !important; box-shadow:none !important; overflow:visible !important;
    display:block !important;
  }
  .cajon-cuerpo{overflow:visible !important; padding:0 !important}
  /* La cabecera del cajón sobra: la ficha ya trae su propio encabezado de
     impresión, con el nombre del proyecto y el filete de marca. */
  .cajon-cab{display:none !important}

  /* Encabezado del documento: en pantalla sobra porque el contexto está a
     la vista; en una hoja suelta que llega a la contraparte, hace falta. */
  .solo-impresion{display:block}
  .solo-impresion .eyebrow{
    font-size:8pt; text-transform:uppercase; letter-spacing:.12em;
    color:#555; margin:0 0 2pt;
  }
  .solo-impresion h2{
    margin:.1em 0 .5em; font-size:17pt; line-height:1.15;
    padding-bottom:6pt; border-bottom:2px solid #418CBE;
  }

  .card{
    border:none; box-shadow:none; padding:0; margin:0;
    break-inside:auto;
  }

  /* Que un compromiso no quede partido entre dos hojas. */
  tr, li, .kpi{break-inside:avoid}

  /* Un título nunca se queda solo al pie de una hoja, y un párrafo no deja
     una línea suelta arriba ni abajo. Es lo que produce esas hojas a medio
     llenar que se ven descuidadas en un documento que va al cliente. */
  h2, h3{break-after:avoid; page-break-after:avoid}
  h3{margin-top:14pt}
  p, li{orphans:3; widows:3}
  p{margin:.35em 0}
  ul{margin:.2em 0 .6em; padding-left:16pt}

  /* La descarga de entregables no va al papel: son botones que no se pueden
     apretar en una hoja impresa. El documento es la ficha del programa, no
     el inventario de archivos. */
  #entregables-programa{display:none !important}

  .grid.k4, .grid.k3{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
  .kpi{border:1px solid #ccc; padding:6px 8px}
  .kpi .cifra{font-size:12pt !important}

  table{width:100%; border-collapse:collapse; font-size:9pt}
  th, td{border:1px solid #bbb; padding:4px 6px}
  thead{display:table-header-group}          /* repetir cabecera por hoja */
  .tabla-envoltura{overflow:visible}

  .pill{border:1px solid #999; background:none !important; color:#000 !important}
  a{text-decoration:none; color:#000}

  .pie-impresion{
    margin-top:14pt; padding-top:6pt; border-top:1px solid #bbb;
    font-size:8pt; color:#444;
  }

  /* --- Teoría del Cambio + SROI en papel ---
     El PDF tiene que parecerse a la pantalla, gráficos incluidos. Eso obliga
     a deshacer cuatro cosas que en pantalla están bien y en una hoja no. */

  /* 1 · Nada pegado arriba. Un `sticky` al imprimir repite la cabecera sobre
        el contenido o lo tapa, según el navegador. */
  .cadena-cabecera, .cabecera-tramo{
    position:static !important; border-bottom:none;
  }

  /* 2 · La rejilla desliza en pantalla y en papel tiene que caber entera. Los
        títulos de las columnas viven fuera de ella, así que se imprimen como
        una fila propia justo encima. */
  .cadena-envoltura, .cadena-titulos-marco{overflow:visible !important}
  .cadena-rejilla, .cadena-titulos{min-width:0 !important; gap:0 6pt; font-size:8pt}
  .cadena-titulos{margin-bottom:4pt; break-after:avoid}

  /* 3 · Las tarjetas y el cierre empiezan invisibles porque se animan. */
  .col-tit, .tarjeta-cadena, .cadena-cierre{
    opacity:1 !important; transform:none !important;
  }
  .tarjeta-cadena{
    font-size:7.6pt; padding:4pt 5pt;
    border:1px solid #ccc; border-left:2pt solid #418CBE; break-inside:avoid;
  }
  .tarjeta-cadena.res{border-left-color:#3BA236}
  .tarjeta-cadena.res.final, .tarjeta-cadena.prox{border-left-color:#A42A85}

  /* 4 · Los fondos. Por omisión el navegador los descarta al imprimir, y sin
        ellos el gráfico de barras sale como cinco huecos. `print-color-adjust`
        se lo prohíbe, y se aplica SOLO donde el color es el dato —las barras y
        las etiquetas de estado— y no a los paneles decorativos. */
  .cadena-barras, .cadena-barras *, .kpi, .pill{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .cadena-barras{height:150pt; break-inside:avoid}
  .cadena-barras .col-anio{background:#9BC1DC !important; border:1px solid #5E90B4}
  .pill{border:1px solid #999; color:#000 !important}

  /* El panel de supuestos va oscuro en pantalla; en papel eso son dos hojas
     de tinta negra. Se imprime en blanco, y los deslizadores se reemplazan
     por sus valores, que es lo único que documenta el escenario. */
  .supuestos{
    background:none !important; color:#000 !important;
    border:1px solid #bbb; padding:8pt; break-inside:avoid;
  }
  .supuestos h3, .supuestos h4, .supuestos .val{color:#000 !important}
  .supuestos .ctrl input[type=range]{display:none !important}
  .supuestos .ctrl{margin-bottom:3pt}
  .aviso-supuestos{display:none}
  .cabecera-supuestos{border-bottom:none}

  /* Que un tramo no se parta justo después de su título. */
  .titulo-tramo{break-after:avoid; color:#761E60 !important}
}

/* ---------- CRM comercial · el tablero del embudo ----------
   Columnas que se deslizan en horizontal DENTRO de su caja, no empujando la
   pagina: son diez etapas y en un portatil no caben. Es la misma leccion
   que dejo la tabla de programas del panel. */
.crm-tablero{
  display:flex; gap:12px; overflow-x:auto; padding:4px 2px 12px;
  scroll-snap-type:x proximity;
}
.crm-columna{
  flex:0 0 220px; scroll-snap-align:start;
  background:var(--ti-panel); border-radius:var(--radio); padding:10px 10px 12px;
}
.crm-columna h3{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ti-texto-2); margin:0 0 2px; display:flex; gap:6px;
  align-items:center; justify-content:space-between;
}
.crm-columna > .microcopy{margin:0 0 8px}
.crm-tarjeta{
  display:block; background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-radius:7px; padding:9px 10px; margin-top:7px;
}
.crm-tarjeta b{display:block; font-size:.84rem; line-height:1.3}
.crm-tarjeta .microcopy{display:block; margin-top:2px}
.crm-tarjeta .pill{margin-top:6px}
@media (max-width:700px){ .crm-columna{flex-basis:78vw} }

/* ---------- CRM comercial · mando, ficha y asistente ---------- */
.crm-mando{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  justify-content:space-between; margin:22px 0 12px;
}
.crm-pestanas{display:flex; gap:6px}
.crm-pestanas .btn.activo{
  background:var(--ti-azul); color:var(--ti-blanco); border-color:var(--ti-azul);
}
.crm-filtros{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.crm-lista tbody tr{cursor:pointer}
.crm-lista td .microcopy{display:block}

/* La ficha, dentro del cajon que ya usan las carteras. */
.crm-h3{
  font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ti-texto-2); margin:22px 0 8px; padding-top:12px;
  border-top:1px solid var(--ti-linea); display:flex; gap:8px; align-items:center;
}
.crm-ficha .campo{margin-bottom:10px}
.crm-ficha textarea{width:100%; font:inherit; padding:8px 10px;
  border:1px solid var(--ti-linea); border-radius:6px; resize:vertical}

/* Las ocho dimensiones del score, en dos columnas: en una sola el bloque
   ocupa toda la pantalla y obliga a desplazarse para verlo entero. */
.crm-dims{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:620px){ .crm-dims{grid-template-columns:1fr} }
.crm-dim label{display:block; font-size:.8rem; font-weight:600; margin-bottom:2px}
.crm-dim select{width:100%}
.crm-dim .microcopy{display:block; margin-top:2px; font-size:.72rem}

.crm-ia h4{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ti-texto-2); margin:14px 0 4px;
}
.crm-ia h4:first-child{margin-top:0}
.crm-lista-ia{margin:0 0 0 18px; font-size:.84rem; color:var(--ti-texto-2)}
.crm-lista-ia li{margin:3px 0}

/* --- Biblioteca de Proxies ------------------------------------------
   Cinco clases propias, con prefijo propio. Todo lo demas que usa esa
   pantalla —.si-tabs, .si-tab, .si-matriz, .si-celda, .si-prog, .si-vacia,
   .si-lista, .si-et y .si-panel— esta tomado prestado del Sistema Interno
   a proposito: son retícula y pestañas genericas, y duplicarlas seria
   mantener dos copias del mismo dibujo.

   Queda anotado aqui porque la biblioteca esta pensada para mudarse a su
   propio subdominio: el dia que eso pase, esta lista es exactamente lo que
   hay que llevarse del CSS, y no hay que ir a buscarlo. */

.bib-panel-cab{display:flex; gap:12px; align-items:flex-start;
  justify-content:space-between; border-bottom:1px solid var(--ti-linea);
  padding-bottom:14px}

/* Un item de lista que NO es un boton. Los `.si-item` del Sistema Interno se
   pulsan y por eso tienen borde y cursor; estos solo se leen, y darles
   aspecto de boton prometeria un clic que no existe. */
.bib-item{padding:9px 0; border-bottom:1px solid var(--ti-linea);
  font-size:.86rem; line-height:1.45}
.bib-item:last-child{border-bottom:none}

.bib-dl{display:grid; grid-template-columns:minmax(130px,32%) 1fr;
  gap:2px 16px; margin:0; font-size:.86rem}
.bib-dl dt{font-weight:600; color:var(--ti-texto-2);
  padding:7px 0; border-top:1px solid var(--ti-linea)}
.bib-dl dd{margin:0; padding:7px 0; border-top:1px solid var(--ti-linea)}
.bib-dl dt:first-of-type, .bib-dl dd:first-of-type{border-top:none}

.bib-filtros{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.bib-campo{display:flex; flex-direction:column; gap:4px; min-width:150px; flex:1 1 150px}
.bib-campo span{font-size:.78rem; font-weight:600; color:var(--ti-texto-2)}

@media (max-width:820px){
  /* La ficha ocupa la pantalla entera en el movil: 430px de cajon sobre una
     pantalla de 390 dejaria el contenido cortado por el borde. */
  .bib-dl{grid-template-columns:1fr; gap:0}
  .bib-dl dd{padding-top:0; border-top:none}
  .bib-campo{flex:1 1 100%}
}

/* --- Biblioteca de Proxies · Documentos (21-09-2026) --------------------
   La pestaña que lee los Word de la biblioteca completos y recoge la
   revision de pares. Todo con prefijo `bib-doc-`; lo generico (.si-tabs,
   .pill, .btn, .card, .bib-campo) se toma prestado como en el resto del
   area. Es parte de lo que se lleva la biblioteca el dia que se mude. */

.bib-doc-barra{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
  margin:14px 0 12px}
/* Tres columnas, como el explorador: familias · métodos y fichas · detalle.
   Las dos primeras son listas fijas que se desplazan solas; la tercera es
   la que lee. */
.bib-doc-cuerpo{display:grid; grid-template-columns:230px 300px minmax(0,1fr); gap:16px;
  align-items:start}
.bib-doc-col{border:1px solid var(--ti-linea); border-radius:var(--radio);
  background:var(--ti-blanco); max-height:calc(100vh - 220px); overflow:auto;
  position:sticky; top:calc(var(--alto-cabecera, 64px) + 12px)}
.bib-doc-colcab{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ti-texto-2); padding:10px 12px 8px; background:var(--ti-panel);
  border-bottom:1px solid var(--ti-linea); position:sticky; top:0; z-index:1;
  display:flex; justify-content:space-between; gap:8px}
.bib-doc-colcab span{font-weight:400; color:var(--ti-texto-3)}
.bib-doc-famitem{grid-template-columns:minmax(0,1fr) auto}
.bib-doc-famitem .bib-doc-tit{font-weight:600}
.bib-doc-chips{display:flex; gap:4px; padding:8px 10px; border-bottom:1px solid var(--ti-linea);
  background:var(--ti-blanco); position:sticky; top:33px; z-index:1}
.bib-doc-chip{font:inherit; font-size:.76rem; font-weight:600; padding:3px 10px; border-radius:999px;
  border:1px solid transparent; background:transparent; color:var(--ti-texto-2); cursor:pointer}
.bib-doc-chip[aria-pressed=true]{background:var(--ti-pizarra); color:var(--ti-blanco)}
.bib-doc-chip:hover:not([aria-pressed=true]){background:var(--ti-panel)}
.bib-doc-tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:14px 0 0}
.bib-doc-tarjeta{display:flex; flex-direction:column; gap:3px; text-align:left; padding:12px 14px;
  border:1px solid var(--ti-linea); border-left:4px solid var(--ti-azul); border-radius:var(--radio);
  background:var(--ti-blanco); font:inherit; color:var(--ti-texto); cursor:pointer}
.bib-doc-tarjeta:hover{border-color:var(--ti-azul); background:var(--ti-azul-tinte)}
.bib-doc-tarjeta b{font-size:.95rem; line-height:1.25}
.bib-doc-tarjeta small{font-size:.76rem; color:var(--ti-texto-3)}
.bib-doc-fila{cursor:pointer} .bib-doc-fila:hover td{background:var(--ti-azul-tinte)}
.bib-doc-tabla code{font-size:.8rem}
.bib-doc-sub{font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ti-texto-3); padding:8px 12px 3px}
.bib-doc-item{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px;
  align-items:center; width:100%; text-align:left; padding:8px 12px; border:0;
  border-left:3px solid transparent; background:none; font:inherit; font-size:.84rem;
  color:var(--ti-texto); cursor:pointer; border-bottom:1px solid var(--ti-linea)}
.bib-doc-item:hover{background:var(--ti-panel)}
.bib-doc-item.activo{background:var(--ti-azul-tinte); border-left-color:var(--ti-azul-sombra)}
.bib-doc-item:focus-visible{outline:2px solid var(--ti-azul-sombra); outline-offset:-2px}
.bib-doc-cod{font-family:Consolas,"Courier New",monospace; font-size:.76rem;
  color:var(--ti-texto-2); min-width:38px}
.bib-doc-tit{line-height:1.3; overflow:hidden}
.bib-doc-tit small{display:block; font-size:.74rem; color:var(--ti-texto-3)}
.bib-doc-marca{display:flex; flex-direction:column; align-items:flex-end; gap:3px}
.bib-doc-n{font-size:.7rem; font-weight:700; background:var(--ti-neutro-tinte);
  color:var(--ti-texto-2); border-radius:999px; padding:0 6px; line-height:17px}
.bib-doc-n.abierto{background:var(--estado-atencion-tinte); color:var(--estado-atencion)}
.bib-doc-punto{width:8px; height:8px; border-radius:50%; border:1px solid var(--ti-linea);
  background:transparent}
.bib-doc-punto.en_revision{background:var(--ti-azul); border-color:var(--ti-azul)}
.bib-doc-punto.con_observaciones{background:var(--estado-atencion); border-color:var(--estado-atencion)}
.bib-doc-punto.aprobado{background:var(--estado-ok); border-color:var(--estado-ok)}
.bib-doc-btexto{display:block; width:calc(100% - 16px); margin:8px; text-align:left}
.bib-doc-enlace{background:none; border:0; padding:0; font:inherit; font-size:inherit;
  color:var(--ti-azul-sombra); cursor:pointer; text-align:left}
.bib-doc-enlace:hover{text-decoration:underline}

.bib-doc-lector{min-width:0}
.bib-doc-cab{display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; border-bottom:1px solid var(--ti-linea); padding-bottom:12px}
.bib-doc-acciones{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.bib-doc-doble{display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:28px;
  align-items:start; margin-top:14px}
.bib-doc-indice{position:sticky; top:calc(var(--alto-cabecera, 64px) + 12px);
  max-height:calc(100vh - 140px); overflow:auto; font-size:.8rem;
  border-left:1px solid var(--ti-linea); padding-left:12px}
.bib-doc-indice a{display:block; color:var(--ti-texto-2); text-decoration:none;
  padding:3px 0; line-height:1.35}
.bib-doc-indice a.l2{padding-left:12px; font-size:.75rem; color:var(--ti-texto-3)}
.bib-doc-indice a:hover{color:var(--ti-azul-sombra)}

/* El documento. Se lee: texto un poco mas grande y con aire, ancho de
   lectura acotado, y nada que compita con el. */
.bib-doc-texto{font-size:1rem; line-height:1.68; max-width:74ch; color:var(--ti-texto)}
.bib-doc-texto p{margin:0 0 1em}
.bib-doc-texto h1{font-size:1.35rem; margin:2em 0 .6em; line-height:1.3; position:relative;
  scroll-margin-top:calc(var(--alto-cabecera, 64px) + 16px)}
.bib-doc-texto h1:first-child{margin-top:.4em}
.bib-doc-texto h2{font-size:1.1rem; margin:1.7em 0 .5em; position:relative;
  scroll-margin-top:calc(var(--alto-cabecera, 64px) + 16px)}
.bib-doc-texto h3{font-size:.98rem; margin:1.3em 0 .4em}
.bib-doc-texto ul,.bib-doc-texto ol{padding-left:1.4em; margin:0 0 1em}
.bib-doc-texto li{margin:.25em 0}
.bib-doc-texto .tabla-ancha{overflow-x:auto; margin:8px 0 18px; border:1px solid var(--ti-linea);
  border-radius:var(--radio)}
.bib-doc-texto table{border-collapse:collapse; width:100%; font-size:.84rem; line-height:1.45}
.bib-doc-texto td{padding:7px 10px; border-bottom:1px solid var(--ti-linea); vertical-align:top}
.bib-doc-texto td p{margin:0}
.bib-doc-texto tr:first-child td{background:var(--ti-panel); font-weight:600}
.bib-doc-texto a{color:var(--ti-azul-sombra)}
.bib-doc-texto sup{font-size:.72rem; line-height:0; vertical-align:.45em}
.bib-doc-texto sup a{text-decoration:none; padding:0 1px}
.bib-doc-texto img{max-width:100%; height:auto; border:1px solid var(--ti-linea);
  border-radius:var(--radio); margin:6px 0}
.bib-doc-texto mark{background:var(--estado-atencion-tinte); color:inherit; padding:0 1px}
.bib-doc-texto .resaltado{background:var(--ti-azul-tinte); border-radius:4px}
.bib-doc-texto .notas{margin-top:3em; padding-top:1em; border-top:1px solid var(--ti-linea);
  font-size:.86rem; line-height:1.5; color:var(--ti-texto-2)}
.bib-doc-texto .notas li{margin:.45em 0; scroll-margin-top:calc(var(--alto-cabecera, 64px) + 16px)}
.bib-doc-texto .notas li p{margin:0}
.bib-doc-texto .notas a{word-break:break-all}
.bib-doc-sc{position:absolute; right:-36px; top:.25em; min-width:26px; height:22px;
  border-radius:6px; border:1px solid var(--ti-linea); background:var(--ti-blanco);
  color:var(--ti-texto-3); font-size:.72rem; cursor:pointer; opacity:0; padding:0 5px}
.bib-doc-texto h1:hover .bib-doc-sc,.bib-doc-texto h2:hover .bib-doc-sc,.bib-doc-sc.con{opacity:1}
.bib-doc-sc.con{color:var(--estado-atencion); border-color:var(--estado-atencion)}
.bib-doc-pop{position:fixed; z-index:60; max-width:420px; background:var(--ti-blanco);
  border:1px solid var(--ti-linea); border-radius:var(--radio); box-shadow:var(--sombra);
  padding:10px 12px; font-size:.84rem; line-height:1.5; display:none}
.bib-doc-pop.visible{display:block}
.bib-doc-pop p{margin:0}
.bib-doc-pop a{color:var(--ti-azul-sombra); word-break:break-all}
.bib-doc-hitsbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.82rem;
  background:var(--ti-panel); border-radius:var(--radio); padding:6px 10px; margin-top:12px}
.bib-doc-snip{padding:10px 0; border-bottom:1px solid var(--ti-linea)}
.bib-doc-frag{font-size:.86rem; color:var(--ti-texto-2); margin:4px 0 0}
.bib-doc-frag mark{background:var(--estado-atencion-tinte); color:var(--ti-texto)}

/* Comentarios */
.bib-doc-estado{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:14px 0 6px}
.bib-doc-estado button.pill{border:1px solid transparent; cursor:pointer; opacity:.55}
.bib-doc-estado button.pill.activo{opacity:1; border-color:currentColor}
.bib-doc-estado button.pill:hover{opacity:1}
.bib-doc-com{padding:12px 0; border-bottom:1px solid var(--ti-linea); font-size:.9rem}
.bib-doc-com.respuesta{margin-left:28px; border-bottom:0; padding:8px 0 0}
.bib-doc-com.resuelto{opacity:.65}
.bib-doc-com-cab{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.bib-doc-com p{margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; max-width:74ch}
.bib-doc-com-acc{display:flex; gap:12px; margin-top:5px}
.bib-doc-com-acc button{background:none; border:0; padding:0; font:inherit; font-size:.78rem;
  color:var(--ti-texto-3); cursor:pointer}
.bib-doc-com-acc button:hover{color:var(--ti-azul-sombra)}
.bib-doc-sec{background:var(--ti-azul-tinte); color:var(--ti-azul-sombra); border:0;
  border-radius:4px; padding:1px 7px; font:inherit; font-size:.74rem; cursor:pointer}
.bib-doc-resp textarea{margin-top:8px; min-height:60px}
.bib-doc-nuevo{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; padding:14px;
  background:var(--ti-panel); border-radius:var(--radio)}

@media (max-width:1100px){
  .bib-doc-cuerpo{grid-template-columns:200px 260px minmax(0,1fr)}
}
@media (max-width:920px){
  /* En pantalla angosta las tres columnas se apilan: familias, luego la
     lista de la familia elegida, luego el detalle. */
  .bib-doc-cuerpo{grid-template-columns:1fr}
  .bib-doc-col{position:static; max-height:240px}
  .bib-doc-cuerpo.con-doc .bib-doc-col{max-height:160px}
  .bib-doc-doble{grid-template-columns:1fr}
  .bib-doc-indice{display:none}
  .bib-doc-sc{position:static; opacity:1; margin-left:8px; vertical-align:middle}
}

/* =====================================================================
   SISTEMA DE EVALUACIÓN
   Todas las clases llevan prefijo `ev-`, y no es manía de orden: `.barra`
   ya existía como barra de progreso de ocho píxeles con `overflow:hidden`,
   y reutilizarla para otro gráfico lo dejó recortado a esos ocho píxeles
   con las cifras correctas al lado. Un choque de estilos se lee como un
   dato en cero. El prefijo hace imposible ese error.
   ================================================================== */

/* --- El avance del expediente, en la tabla de la cartera ---
   Nueve marcas, una por estado. Las de compuerta se distinguen: no son un
   paso más, son un sitio donde alguien tiene que decidir. */
.ev-avance{display:inline-flex; gap:3px; align-items:center}
.ev-avance i{
  width:9px; height:9px; border-radius:2px; display:block;
  background:var(--ti-linea);
}
.ev-avance i.on{background:var(--ti-azul)}
.ev-avance i.gate{background:var(--ti-magenta)}

/* --- El expediente: espina a la izquierda, paso a la derecha --- */
.ev-exp{display:grid; grid-template-columns:266px 1fr; gap:18px; margin-top:12px}
.ev-espina{
  background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-radius:10px; padding:14px 12px; align-self:start;
  position:sticky; top:calc(var(--alto-cabecera, 64px) + 12px);
}
.ev-nombre{display:block; font-size:.95rem; line-height:1.3; margin-bottom:.7rem}
.ev-grupo{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gris); margin:.8rem 0 .3rem; font-weight:700;
}
.ev-grupo:first-of-type{margin-top:.2rem}

.ev-paso{
  display:flex; gap:9px; align-items:flex-start; width:100%; text-align:left;
  background:none; border:none; padding:6px 7px; border-radius:7px;
  cursor:pointer; font:inherit; color:var(--ti-texto);
}
.ev-paso:hover{background:var(--ti-azul-tinte)}
.ev-paso.actual{background:var(--ti-azul-tinte); font-weight:600}
.ev-paso .ev-bolita{
  flex:0 0 auto; width:21px; height:21px; border-radius:50%;
  border:1.5px solid var(--ti-linea); background:var(--ti-blanco);
  font-size:.7rem; font-weight:700; color:var(--gris);
  display:flex; align-items:center; justify-content:center;
}
.ev-paso.hecho .ev-bolita{
  background:var(--ti-azul); border-color:var(--ti-azul); color:#fff;
}
.ev-paso.actual .ev-bolita{border-color:var(--ti-azul); color:var(--ti-azul)}
.ev-paso .ev-txt{font-size:.84rem; line-height:1.28}
.ev-paso .ev-txt small{display:block; font-size:.71rem; color:var(--gris); font-weight:400}
.ev-gate{
  display:inline-block; font-size:.62rem; font-weight:700; padding:1px 6px;
  border-radius:999px; background:var(--ti-magenta-tinte);
  color:var(--ti-magenta-sombra); text-transform:uppercase; letter-spacing:.04em;
}

/* --- El cuestionario --- */
.ev-barra-cue{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  padding:10px 0 4px; font-size:.83rem; color:var(--ti-texto-2);
  border-bottom:1px solid var(--ti-linea); margin-bottom:12px;
}
.ev-barra-cue b{color:var(--ti-texto); font-size:1rem}

.ev-sesiones{display:flex; flex-wrap:wrap; gap:.4rem; margin:14px 0 10px}
.ev-sesiones button{
  border:1px solid var(--ti-linea); background:var(--ti-blanco);
  border-radius:7px; padding:.42rem .8rem; cursor:pointer;
  font:inherit; font-size:.83rem; font-weight:600; color:var(--ti-texto);
}
.ev-sesiones button.on{
  background:var(--ti-azul); color:#fff; border-color:var(--ti-azul);
}
.ev-sesiones button small{display:block; font-size:.7rem; opacity:.75; font-weight:400}

/* En pantalla estrecha la espina deja de ser un riel lateral: pasa arriba y
   se convierte en una tira que se desplaza en horizontal. Mantenerla en 266px
   dejaría al panel con menos de 130px de ancho útil en un teléfono. */
@media (max-width:820px){
  .ev-exp{grid-template-columns:1fr}
  .ev-espina{position:static; display:flex; gap:8px; overflow-x:auto; padding:12px}
  .ev-espina .eyebrow, .ev-nombre, .ev-grupo{display:none}
  .ev-paso{width:auto; flex:0 0 auto; max-width:190px}
}

/* Los botones de un documento del expediente. El de subir es un `label` con
   el `input file` dentro: un input de archivo no se puede estilar y el
   navegador dibuja el suyo, que no se parece a ningún otro botón de la
   plataforma. El input va escondido pero PRESENTE —no con `display:none`
   sobre el label— para que el clic en el label siga abriéndolo. */
.ev-acciones-doc{display:flex; gap:6px; flex-wrap:wrap}
.ev-acciones-doc .ev-subir{cursor:pointer; display:inline-flex; align-items:center}
.ev-acciones-doc .ev-subir input[type=file]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}

/* --- Los seis componentes de la Teoría del Cambio --- */
.ev-comps{display:grid; gap:10px; margin-top:14px}
.ev-comp{
  border:1px solid var(--ti-linea); border-radius:9px; padding:12px 14px;
  background:var(--ti-blanco);
}
.ev-comp header{display:flex; gap:10px; align-items:center; margin-bottom:6px}
.ev-comp header .pill{flex:0 0 auto}
.ev-comp-txt{
  margin:0 0 8px; font-size:.86rem; line-height:1.45; color:var(--ti-texto-2);
}
.ev-comp footer{display:flex; gap:10px; align-items:center; justify-content:space-between}

/* La compuerta se distingue de una acción cualquiera: es un sitio donde
   alguien decide y firma, no un botón más al pie del formulario. */
.ev-compuerta{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-top:16px; padding:14px; border-radius:9px;
  border:1px dashed var(--ti-magenta); background:var(--ti-magenta-tinte);
}
.ev-compuerta.lista{border-style:solid; border-color:var(--estado-ok);
  background:var(--estado-ok-tinte)}

/* El texto del modelo va plegado y en otro tono: se consulta, no se lee cada
   vez, y sobre todo no se edita. */
.ev-generado{
  margin-top:12px; border-left:3px solid var(--ti-linea);
  padding:2px 0 2px 12px; background:transparent;
}
.ev-generado summary{cursor:pointer; font-size:.83rem; color:var(--gris)}
.ev-generado p{font-size:.86rem; line-height:1.5; color:var(--ti-texto-2)}

.ev-elementos{margin-top:16px}
.ev-elemento{display:flex; gap:8px; align-items:flex-start; margin-bottom:8px}
.ev-elemento-n{
  flex:0 0 auto; width:20px; height:20px; margin-top:7px; border-radius:50%;
  background:var(--ti-azul-tinte); color:var(--ti-azul-sombra);
  font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.ev-elemento input{margin-bottom:4px}
.ev-elemento .ev-quitar{margin-top:4px}

.ev-citas ul{margin:.3rem 0 0; padding-left:1.1rem}
.ev-citas li{margin-bottom:.5rem; font-size:.86rem}

/* Los dos parámetros del modelo, juntos y al principio: sin ellos la
   pantalla no muestra ningún número, así que son lo primero que hay que
   poder ver y corregir. */
.ev-parametros{
  display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
  margin-top:14px; padding:12px 14px; border-radius:9px;
  background:var(--ti-gris-claro, #f4f6f8); border:1px solid var(--ti-linea);
}
.ev-parametros .campo{margin-bottom:0; min-width:150px}
.ev-parametros button{margin-top:22px}

/* --- El esquema de la Teoría del Cambio ---
   Reusa `col-tit` y `tarjeta-cadena` del mapa de impacto a propósito: es el
   mismo objeto visual que ya se mira en Cartera 2025, y aprenderlo dos veces
   no le sirve a nadie. Lo propio es solo la retícula, porque aquí las filas
   NO se corresponden entre columnas: cada columna es su propia lista. */
.ev-tdc{margin:14px 0 4px}
.ev-tdc-proposito{
  border-left:3px solid var(--ti-magenta); background:var(--ti-magenta-tinte);
  border-radius:7px; padding:10px 13px; margin-bottom:12px;
}
.ev-tdc-rot{
  display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; color:var(--ti-magenta-sombra); margin-bottom:3px;
}
.ev-tdc-proposito p{margin:0; font-size:.85rem; line-height:1.5}
.ev-tdc-cols{
  display:grid; grid-template-columns:repeat(5,minmax(180px,1fr));
  gap:0 10px; min-width:940px; align-items:start;
}
.ev-tdc-col{display:flex; flex-direction:column; gap:8px}

/* --- La tabla de descuentos --- */
.ev-tabla-descuentos input{
  width:70px; text-align:right; padding:4px 6px; font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
/* Lo que queda bajo el piso de la convención se marca en el propio campo:
   verlo al lado del número es lo que convierte el aviso en una decisión. */
.ev-bajo-piso{
  background:var(--estado-atencion-tinte) !important;
  border-color:var(--estado-atencion) !important;
  color:var(--estado-atencion) !important; font-weight:700;
}

/* --- Los proxies --- */
.ev-proxies{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ev-proxy{
  border:1px solid var(--ti-linea); border-left:3px solid var(--ti-magenta-sombra);
  border-radius:8px; padding:11px 13px; background:#FDFCFD;
}
.ev-proxy header{display:flex; gap:8px; align-items:center; margin-bottom:5px}
.ev-proxy p{margin:0 0 3px}
.ev-sin-fuente{color:var(--estado-riesgo); font-weight:600}
.ev-proxy-cita{margin-top:8px}
.ev-proxy-cita label{
  display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gris); font-weight:700; margin-bottom:3px;
}
.ev-proxy-cita input{width:100%; font-size:.82rem; padding:4px 7px}

/* --- La profundización, que todavía es una maqueta ---
   La banda tiene que verse antes que el contenido: una maqueta que no se
   declara se convierte en una promesa a los dos días. */
.ev-maqueta{
  margin:14px 0; padding:11px 14px; border-radius:8px;
  border:1px dashed var(--ti-magenta); background:var(--ti-magenta-tinte);
  color:var(--ti-magenta-sombra); font-size:.84rem; line-height:1.5;
}
.ev-repreguntas{display:grid; gap:10px; margin-top:12px}
.ev-repregunta{
  border:1px solid var(--ti-linea); border-radius:8px; padding:11px 13px;
  background:var(--ti-blanco);
}
.ev-repregunta header{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.ev-repregunta-txt{margin:0 0 4px; font-size:.86rem; line-height:1.45}
.ev-repregunta-pie{
  display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap;
  border-top:1px solid var(--ti-linea); margin-top:8px; padding-top:6px;
}

@media (max-width:820px){
  .ev-tabla-descuentos input{width:56px}
}

/* El panel del expediente es una celda de rejilla, y una celda de rejilla NO
   se encoge por debajo de su contenido a menos que se le diga: su `min-width`
   por omisión es `auto`. Sin esta línea, el esquema de la Teoría del Cambio
   —que tiene 940px de ancho mínimo propio— empujaba la rejilla entera y
   desbordaba la PÁGINA en vez de deslizarse dentro de su caja. Medido: 1.373px
   de página en un escritorio de 1.280 y 1.000px en un móvil de 390.
   El desborde tiene que quedarse dentro de `.cadena-envoltura`, que para eso
   lleva su `overflow-x`. */
.ev-exp > section{min-width:0}
.ev-exp .cadena-envoltura{max-width:100%}

/* La necesidad es la única de las cinco columnas que describe un PROBLEMA y
   no algo que hace el programa. Con el mismo azul que las demás se leía como
   un paso más de la cadena, cuando es lo que la justifica: si esta columna
   está floja, todo lo que sigue resuelve algo que nadie demostró que
   existiera. Va en el ámbar de atención, que es el color con el que este
   sistema ya nombra «esto pide mirada». */
.tarjeta-cadena.nec{
  border-left-color:var(--estado-atencion);
  background:var(--estado-atencion-tinte);
}
.tarjeta-cadena.nec .rot{color:var(--estado-atencion)}
/* El detalle de cada tarjeta separado del enunciado: en las necesidades hay
   dos o tres líneas por tarjeta y sin aire se leen como un párrafo continuo. */
.tarjeta-cadena .f + .f{margin-top:3px}
.tarjeta-cadena .f b{font-weight:700}

/* La Teoría del Cambio con el dibujo de Cartera 2025, pero en CUATRO
   columnas: aquí se corta antes del proxy, porque la Teoría del Cambio
   explica el cambio y no lo monetiza. La rejilla de allá es de cinco y está
   fijada en su propia clase, así que esta necesita la suya. */
.ev-tdc4{
  display:grid; grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:9px 10px; min-width:760px; align-items:stretch;
}
.ev-tdc4.titulos{gap:0 10px}
.ev-tdc-cartera{margin:14px 0 4px}
/* El dibujo por componentes queda como segunda mirada, plegado: es un
   inventario por columnas y sirve para revisar que no falte nada, pero no es
   la cadena causal. */
.ev-otro-dibujo{margin:14px 0}
.ev-otro-dibujo summary{
  cursor:pointer; font-size:.83rem; color:var(--ti-texto-2); font-weight:600;
}

/* El filtro de la lista de expedientes. Va sobre la tabla y no en una barra
   lateral: con sesenta filas es lo primero que se busca. */
.ev-filtro{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:0 18px 12px;
}
.ev-filtro label{font-size:.8rem; font-weight:700; color:var(--ti-texto-2)}
.ev-filtro select{min-width:230px}


/* --- Las tres puertas del área de Evaluación --- */
.ev-puertas{
  display:grid; gap:14px; margin-top:18px;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
}
.ev-puerta{
  text-align:left; font:inherit; color:var(--ti-texto); cursor:pointer;
  background:var(--ti-blanco); border:1px solid var(--ti-linea);
  border-radius:12px; padding:20px 22px; display:flex; flex-direction:column; gap:8px;
}
.ev-puerta:hover{border-color:var(--ti-azul); background:var(--ti-azul-tinte)}
.ev-puerta h2{margin:0; font-size:1.08rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ev-puerta p{margin:0; font-size:.88rem; color:var(--ti-texto-2); line-height:1.45; flex:1}
.ev-puerta-ir{font-size:.85rem; font-weight:600; color:var(--ti-azul)}


/* ═══ AUTOEVALUACIÓN · CSS del prototipo, acotado a su sección ═══ */
#v-evaluacion .av-modulo{--blue:#2f6589;--blue-bright:#418cbe;--green:#2a7527;--magenta:#a42a85;--ink:#242c33;--muted:#586570;--line:#dbe3e8;--bg:#f4f7fa;--white:#fff;--soft:#e8f1f7;--rose:#f4e5f0;--success:#e7f4e7;--radius:12px}#v-evaluacion .av-modulo *{box-sizing:border-box}#v-evaluacion .av-modulo{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Segoe UI",Arial,sans-serif}#v-evaluacion .av-modulo button,#v-evaluacion .av-modulo input,#v-evaluacion .av-modulo select,#v-evaluacion .av-modulo textarea{font:inherit}#v-evaluacion .av-modulo button,#v-evaluacion .av-modulo a,#v-evaluacion .av-modulo input,#v-evaluacion .av-modulo select,#v-evaluacion .av-modulo textarea{touch-action:manipulation}#v-evaluacion .av-modulo a{color:var(--blue)}#v-evaluacion .av-modulo button,#v-evaluacion .av-modulo a{ -webkit-tap-highlight-color:transparent}#v-evaluacion .av-modulo button{cursor:pointer}#v-evaluacion .av-modulo button:disabled{cursor:wait;opacity:.7}#v-evaluacion .av-modulo a{text-decoration:none}#v-evaluacion .av-modulo a:hover{text-decoration:underline}#v-evaluacion .av-modulo button:focus-visible,#v-evaluacion .av-modulo a:focus-visible,#v-evaluacion .av-modulo input:focus-visible,#v-evaluacion .av-modulo select:focus-visible,#v-evaluacion .av-modulo textarea:focus-visible,#v-evaluacion .av-modulo summary:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}#v-evaluacion .av-modulo button,#v-evaluacion .av-modulo input,#v-evaluacion .av-modulo select{min-height:44px}#v-evaluacion .av-modulo button{border:1px solid var(--line);border-radius:7px;padding:9px 15px;background:white;color:var(--ink);font-weight:600}#v-evaluacion .av-modulo button:hover{background:var(--soft)}#v-evaluacion .av-modulo button.primary,#v-evaluacion .av-modulo .primary{background:var(--blue);color:white;border-color:var(--blue)}#v-evaluacion .av-modulo button.primary:hover{background:#245272}#v-evaluacion .av-modulo button.ghost{background:transparent;border-color:transparent;padding:6px 10px}#v-evaluacion .av-modulo button.small{padding:5px 11px;font-size:.875rem}#v-evaluacion .av-modulo input,#v-evaluacion .av-modulo select,#v-evaluacion .av-modulo textarea{width:100%;border:1px solid #b9c7d1;border-radius:7px;padding:10px 12px;background:#fff;color:var(--ink)}#v-evaluacion .av-modulo textarea{min-height:102px;resize:vertical}#v-evaluacion .av-modulo label{display:block;font-size:.9rem;font-weight:600;margin-bottom:7px}#v-evaluacion .av-modulo input[type=checkbox]{width:19px;min-height:19px;height:19px;accent-color:var(--blue);flex-shrink:0}#v-evaluacion .av-modulo input[type=range]{padding:0;accent-color:var(--blue)}#v-evaluacion .av-modulo .check{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;font-weight:400}#v-evaluacion .av-modulo .check input{margin-top:4px}#v-evaluacion .av-modulo h1,#v-evaluacion .av-modulo h2,#v-evaluacion .av-modulo h3,#v-evaluacion .av-modulo p{margin-top:0}#v-evaluacion .av-modulo h1{font-size:clamp(1.85rem,3vw,2.65rem);line-height:1.17;letter-spacing:-.035em;margin-bottom:12px;font-weight:650}#v-evaluacion .av-modulo h2{font-size:1.25rem;line-height:1.35;margin-bottom:14px;letter-spacing:-.02em}#v-evaluacion .av-modulo h3{font-size:1.04rem;margin-bottom:8px}#v-evaluacion .av-modulo p{margin-bottom:14px}#v-evaluacion .av-modulo small,#v-evaluacion .av-modulo .meta{font-size:.81rem;color:var(--muted)}#v-evaluacion .av-modulo .muted{color:var(--muted)}#v-evaluacion .av-modulo .eyebrow{font-size:.77rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:12px}#v-evaluacion .av-modulo .skip{position:fixed;top:-80px;left:20px;background:white;padding:12px;z-index:100}#v-evaluacion .av-modulo .skip:focus{top:10px}#v-evaluacion .av-modulo .sidebar{position:fixed;width:246px;top:0;left:0;bottom:0;background:#fff;border-right:1px solid var(--line);padding:29px 18px 18px;display:flex;flex-direction:column;z-index:10}#v-evaluacion .av-modulo .brand{width:177px;height:auto;display:block;margin:0 auto 26px}#v-evaluacion .av-modulo .workspace-label{padding:0 12px 15px;border-bottom:1px solid var(--line);margin-bottom:14px}#v-evaluacion .av-modulo .workspace-label strong{display:block;font-size:.94rem}#v-evaluacion .av-modulo .workspace-label span{font-size:.79rem;color:var(--muted)}#v-evaluacion .av-modulo nav{overflow:auto;flex:1;padding-right:4px}#v-evaluacion .av-modulo nav .group{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#707d88;margin:18px 12px 6px;font-weight:700}#v-evaluacion .av-modulo nav a{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.875rem;min-height:42px;padding:7px 10px;border-radius:6px;margin:3px 0}#v-evaluacion .av-modulo nav a:hover{background:var(--bg);text-decoration:none}#v-evaluacion .av-modulo nav a.active{background:var(--soft);color:var(--blue);font-weight:700}#v-evaluacion .av-modulo nav .number{font-size:.72rem;width:21px;flex-shrink:0;font-variant-numeric:tabular-nums}#v-evaluacion .av-modulo nav .done{color:var(--green)}#v-evaluacion .av-modulo .side-foot{border-top:1px solid var(--line);padding:15px 10px 0;font-size:.75rem;color:var(--muted)}#v-evaluacion .av-modulo .app{margin-left:246px}#v-evaluacion .av-modulo .topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);padding:0 34px;display:flex;align-items:center;justify-content:space-between;gap:14px}#v-evaluacion .av-modulo .crumb{font-size:.875rem;color:var(--muted)}#v-evaluacion .av-modulo .user{display:flex;align-items:center;gap:10px;font-size:.82rem}#v-evaluacion .av-modulo .avatar{display:grid;place-items:center;width:35px;height:35px;background:var(--soft);color:var(--blue);font-weight:700;border-radius:50%}#v-evaluacion .av-modulo .demo-bar{padding:9px 34px;background:#edf3f7;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);font-size:.79rem;color:#455a69}#v-evaluacion .av-modulo .demo-bar strong{color:var(--blue)}#v-evaluacion .av-modulo main{padding:34px;max-width:1720px;margin:auto}#v-evaluacion .av-modulo .page-head{display:flex;gap:25px;justify-content:space-between;align-items:flex-start;margin-bottom:26px}#v-evaluacion .av-modulo .page-head p{max-width:780px;color:var(--muted);margin-bottom:0}#v-evaluacion .av-modulo .page-head .step-tag{padding-top:8px;white-space:nowrap}#v-evaluacion .av-modulo .layout{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:24px}#v-evaluacion .av-modulo .layout.wide{display:block}#v-evaluacion .av-modulo .panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:22px;min-width:0}#v-evaluacion .av-modulo .panel.soft{background:var(--soft);border-color:transparent}#v-evaluacion .av-modulo .panel .panel{box-shadow:none}#v-evaluacion .av-modulo .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}#v-evaluacion .av-modulo .between{justify-content:space-between}#v-evaluacion .av-modulo .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}#v-evaluacion .av-modulo .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}#v-evaluacion .av-modulo .field{margin-bottom:17px}#v-evaluacion .av-modulo .field:last-child{margin-bottom:0}#v-evaluacion .av-modulo .helper{font-size:.83rem;color:var(--muted);margin-top:7px;margin-bottom:0}#v-evaluacion .av-modulo .badge{display:inline-flex;align-items:center;padding:4px 9px;font-size:.74rem;border-radius:5px;background:var(--soft);color:var(--blue);font-weight:650;line-height:1.4}#v-evaluacion .av-modulo .badge.green{background:var(--success);color:var(--green)}#v-evaluacion .av-modulo .badge.rose{background:var(--rose);color:#761e60}#v-evaluacion .av-modulo .badge.gray{background:#eef1f4;color:#536370}#v-evaluacion .av-modulo .note{padding:15px 17px;border-left:3px solid var(--blue-bright);background:#f1f6fa;font-size:.9rem;margin:18px 0}#v-evaluacion .av-modulo .note.rose{border-color:var(--magenta);background:#faf2f8}#v-evaluacion .av-modulo .note p:last-child{margin:0}#v-evaluacion .av-modulo .kpi{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:650;letter-spacing:-.04em;line-height:1.25;margin:7px 0}#v-evaluacion .av-modulo .kpi-label{font-size:.8rem;color:var(--muted)}#v-evaluacion .av-modulo .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px}#v-evaluacion .av-modulo .kpis>div{background:#fff;padding:20px}#v-evaluacion .av-modulo .kpis .kpi{font-size:1.65rem}#v-evaluacion .av-modulo .progress{width:100%;height:6px;background:#e1e8ed;border-radius:3px;overflow:hidden}#v-evaluacion .av-modulo .progress>span{height:100%;background:var(--blue-bright);display:block}#v-evaluacion .av-modulo .journey-card{display:block;color:var(--ink);border:1px solid var(--line);padding:22px;background:#fff;border-radius:10px}#v-evaluacion .av-modulo .journey-card:hover{border-color:var(--blue);text-decoration:none}#v-evaluacion .av-modulo .journey-card .big-num{font-size:2.4rem;font-weight:300;color:var(--blue);margin-bottom:14px}#v-evaluacion .av-modulo .journey-card:nth-child(2) .big-num{color:var(--green)}#v-evaluacion .av-modulo .journey-card:nth-child(3) .big-num{color:var(--magenta)}#v-evaluacion .av-modulo .ai-panel{position:sticky;top:20px;align-self:start;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}#v-evaluacion .av-modulo .ai-top{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}#v-evaluacion .av-modulo .spark{width:31px;height:31px;border-radius:8px;display:grid;place-items:center;background:var(--rose);color:#761e60;font-size:1.2rem}#v-evaluacion .av-modulo .ai-body{padding:18px;font-size:.875rem}#v-evaluacion .av-modulo .ai-body h3{font-size:.94rem}#v-evaluacion .av-modulo .ai-body button{font-size:.82rem}#v-evaluacion .av-modulo .ai-answer{background:#f2f6f9;border-radius:8px;padding:14px;margin-bottom:14px}#v-evaluacion .av-modulo .ai-actions{display:grid;gap:7px}#v-evaluacion .av-modulo .ai-body textarea{min-height:78px;font-size:.9rem}#v-evaluacion .av-modulo .actions{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin:8px 0 28px;flex-wrap:wrap}#v-evaluacion .av-modulo .item{padding:17px 0;border-bottom:1px solid var(--line)}#v-evaluacion .av-modulo .item:first-child{padding-top:0}#v-evaluacion .av-modulo .item:last-child{border-bottom:0;padding-bottom:0}#v-evaluacion .av-modulo .item-title{font-weight:600;font-size:.95rem;margin:0 0 4px}#v-evaluacion .av-modulo .file-icon{width:42px;height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;color:var(--blue);font-size:.69rem;font-weight:700;flex-shrink:0}#v-evaluacion .av-modulo .file-row{display:flex;gap:13px;align-items:flex-start}#v-evaluacion .av-modulo .file-row>div:nth-child(2){flex:1;min-width:0}#v-evaluacion .av-modulo .upload{border:1.5px dashed #a7bbc9;border-radius:10px;padding:23px;text-align:center;background:#f8fbfd;margin-bottom:22px}#v-evaluacion .av-modulo .upload input{margin-top:12px;font-size:.85rem}#v-evaluacion .av-modulo .chain{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr;align-items:stretch;gap:7px}#v-evaluacion .av-modulo .chain-node{padding:15px;border:1px solid var(--line);border-top:3px solid var(--blue-bright);border-radius:7px;background:white;font-size:.9rem}#v-evaluacion .av-modulo .chain-node.output{border-top-color:var(--green)}#v-evaluacion .av-modulo .chain-node.outcome{border-top-color:var(--magenta)}#v-evaluacion .av-modulo .chain-arrow{align-self:center;color:var(--muted);text-align:center}#v-evaluacion .av-modulo .chain-node small{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;margin-bottom:8px}#v-evaluacion .av-modulo .table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px;max-width:100%}#v-evaluacion .av-modulo table{border-collapse:collapse;width:100%;font-size:.875rem}#v-evaluacion .av-modulo th,#v-evaluacion .av-modulo td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}#v-evaluacion .av-modulo th{background:#edf3f7;color:#314d60;font-size:.78rem;font-weight:700}#v-evaluacion .av-modulo tbody tr:last-child td{border-bottom:0}#v-evaluacion .av-modulo tbody tr:nth-child(even){background:#fafcfd}#v-evaluacion .av-modulo .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}#v-evaluacion .av-modulo .nowrap{white-space:nowrap}#v-evaluacion .av-modulo .table-wide{min-width:1220px}#v-evaluacion .av-modulo .table-wide td{min-width:140px}#v-evaluacion .av-modulo .table-wide th{position:sticky;top:0}#v-evaluacion .av-modulo .tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:20px;overflow-x:auto}#v-evaluacion .av-modulo .tabs a{padding:8px 13px;border-radius:6px;font-size:.86rem;color:var(--muted);white-space:nowrap}#v-evaluacion .av-modulo .tabs a.current{background:var(--blue);color:white}#v-evaluacion .av-modulo .outcome-card{padding:19px 0;border-bottom:1px solid var(--line)}#v-evaluacion .av-modulo .outcome-card:last-child{border-bottom:0}#v-evaluacion .av-modulo .bar-row{display:grid;grid-template-columns:180px minmax(40px,1fr) 110px;gap:12px;align-items:center;margin:14px 0;font-size:.84rem}#v-evaluacion .av-modulo .bar-track{height:14px;background:#edf2f6;border-radius:3px}#v-evaluacion .av-modulo .bar-fill{height:100%;background:var(--blue-bright);border-radius:3px}#v-evaluacion .av-modulo .map-shell{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px}#v-evaluacion .av-modulo .map-intro{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:24px}#v-evaluacion .av-modulo .map-title{font-size:1.8rem;margin-bottom:8px}#v-evaluacion .av-modulo .report-cover{background:#fff;border-left:6px solid var(--magenta);padding:35px;margin-bottom:24px}#v-evaluacion .av-modulo .report-cover h2{font-size:2.7rem;letter-spacing:-.04em;line-height:1.13;max-width:700px}#v-evaluacion .av-modulo .report-body{max-width:900px;margin:auto}#v-evaluacion .av-modulo .report-section{background:#fff;padding:29px;border:1px solid var(--line);border-radius:10px;margin-bottom:20px}#v-evaluacion .av-modulo .report-section h2{display:flex;gap:15px}#v-evaluacion .av-modulo .report-section h2 span{color:var(--blue-bright);font-weight:400}#v-evaluacion .av-modulo .report-section p{line-height:1.75}#v-evaluacion .av-modulo .pill-list{display:flex;flex-wrap:wrap;gap:8px}#v-evaluacion .av-modulo .timeline{border-left:2px solid var(--line);padding-left:20px;margin-left:7px}#v-evaluacion .av-modulo .timeline .item{position:relative}#v-evaluacion .av-modulo .timeline .item:before{position:absolute;left:-27px;top:24px;content:"";width:12px;height:12px;background:var(--blue-bright);border:3px solid white;border-radius:50%}#v-evaluacion .av-modulo .timeline .item:first-child:before{top:7px}#v-evaluacion .av-modulo .empty{padding:30px 15px;text-align:center;color:var(--muted)}#v-evaluacion .av-modulo .error{color:#a12543;font-size:.875rem;margin-top:8px}#v-evaluacion .av-modulo .sr-only{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}#v-evaluacion .av-modulo #toast{position:fixed;bottom:22px;right:24px;max-width:460px;z-index:80;background:#253e50;color:white;border-radius:9px;padding:14px 20px;box-shadow:0 8px 30px #142a3c22;display:none}#v-evaluacion .av-modulo #toast.show{display:block}#v-evaluacion .av-modulo dialog{border:1px solid var(--line);border-radius:14px;width:min(650px,calc(100% - 30px));max-height:88vh;padding:0;color:var(--ink);box-shadow:0 20px 90px #15273833;overscroll-behavior:contain}#v-evaluacion .av-modulo dialog::backdrop{background:#172d3f77}#v-evaluacion .av-modulo .dialog-head{display:flex;justify-content:space-between;align-items:center;padding:18px 23px;border-bottom:1px solid var(--line);position:sticky;top:0;background:white;z-index:1}#v-evaluacion .av-modulo .dialog-head h2{margin:0}#v-evaluacion .av-modulo .dialog-body{padding:24px}#v-evaluacion .av-modulo .mobile-menu{display:none}#v-evaluacion .av-modulo .source{overflow-wrap:anywhere}#v-evaluacion .av-modulo .metric-change{font-size:1.02rem;font-weight:650;color:var(--blue)}#v-evaluacion .av-modulo details{border:1px solid var(--line);border-radius:8px;margin:13px 0}#v-evaluacion .av-modulo summary{cursor:pointer;padding:13px 16px;font-size:.9rem;font-weight:600}#v-evaluacion .av-modulo details>div{padding:0 16px 16px}#v-evaluacion .av-modulo .footer-note{font-size:.8rem;color:var(--muted);margin-top:25px}#v-evaluacion .av-modulo .tick{color:var(--green)}#v-evaluacion .av-modulo .export-header{display:none}@media(max-width:1180px){#v-evaluacion .av-modulo .layout{grid-template-columns:minmax(0,1fr) 245px}#v-evaluacion .av-modulo .sidebar{width:217px}#v-evaluacion .av-modulo .app{margin-left:217px}#v-evaluacion .av-modulo main{padding:26px}#v-evaluacion .av-modulo .topbar,#v-evaluacion .av-modulo .demo-bar{padding-left:26px;padding-right:26px}#v-evaluacion .av-modulo .grid3{grid-template-columns:1fr}#v-evaluacion .av-modulo .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}#v-evaluacion .av-modulo .kpi{font-size:1.7rem}#v-evaluacion .av-modulo .report-cover h2{font-size:2.2rem}}@media(max-width:930px){#v-evaluacion .av-modulo .layout{display:block}#v-evaluacion .av-modulo .ai-panel{position:static;margin:25px 0}#v-evaluacion .av-modulo .sidebar{width:205px}#v-evaluacion .av-modulo .app{margin-left:205px}#v-evaluacion .av-modulo .grid2{grid-template-columns:1fr}#v-evaluacion .av-modulo .page-head{display:block}#v-evaluacion .av-modulo .step-tag{margin-top:12px}#v-evaluacion .av-modulo .bar-row{grid-template-columns:140px minmax(30px,1fr) 100px}#v-evaluacion .av-modulo .chain{grid-template-columns:1fr}#v-evaluacion .av-modulo .chain-arrow{transform:rotate(90deg)}#v-evaluacion .av-modulo .map-intro{display:block}}@media(max-width:680px){#v-evaluacion .av-modulo .sidebar{transform:translateX(-100%);width:270px;box-shadow:10px 0 40px #172d3f33}#v-evaluacion .av-modulo .sidebar.open{transform:translateX(0)}#v-evaluacion .av-modulo .app{margin:0}#v-evaluacion .av-modulo .mobile-menu{display:inline-flex}#v-evaluacion .av-modulo .topbar{padding:10px 17px;height:auto;min-height:65px}#v-evaluacion .av-modulo .crumb{display:none}#v-evaluacion .av-modulo .demo-bar{padding:10px 17px}#v-evaluacion .av-modulo .demo-bar span:last-child{display:none}#v-evaluacion .av-modulo main{padding:23px 17px}#v-evaluacion .av-modulo .panel,#v-evaluacion .av-modulo .map-shell,#v-evaluacion .av-modulo .report-section{padding:19px}#v-evaluacion .av-modulo .kpis{grid-template-columns:1fr 1fr}#v-evaluacion .av-modulo .kpis>div{padding:15px}#v-evaluacion .av-modulo .kpis .kpi{font-size:1.32rem}#v-evaluacion .av-modulo .map-title{font-size:1.55rem}#v-evaluacion .av-modulo .report-cover{padding:24px}#v-evaluacion .av-modulo .report-cover h2{font-size:2rem}#v-evaluacion .av-modulo .bar-row{grid-template-columns:1fr 75px}#v-evaluacion .av-modulo .bar-row .bar-track{grid-column:1 / 3;grid-row:2}#v-evaluacion .av-modulo .bar-row .num{grid-column:2;grid-row:1}#v-evaluacion .av-modulo .actions>div{width:100%}#v-evaluacion .av-modulo .actions .primary{width:100%}#v-evaluacion .av-modulo input,#v-evaluacion .av-modulo textarea,#v-evaluacion .av-modulo select{font-size:16px}#v-evaluacion .av-modulo .map-shell .table-wrap{margin-left:-4px;margin-right:-4px}#v-evaluacion .av-modulo .brand{margin-bottom:17px}#v-evaluacion .av-modulo #toast{left:17px;right:17px;bottom:17px}#v-evaluacion .av-modulo .user .role{display:none}}@media(prefers-reduced-motion:reduce){#v-evaluacion .av-modulo *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media print{#v-evaluacion .av-modulo{background:white;font-size:10pt}#v-evaluacion .av-modulo .sidebar,#v-evaluacion .av-modulo .topbar,#v-evaluacion .av-modulo .demo-bar,#v-evaluacion .av-modulo .ai-panel,#v-evaluacion .av-modulo .actions,#v-evaluacion .av-modulo .tabs,#v-evaluacion .av-modulo .no-print,#v-evaluacion .av-modulo #toast{display:none!important}#v-evaluacion .av-modulo .app{margin:0}#v-evaluacion .av-modulo main{padding:0}#v-evaluacion .av-modulo .layout{display:block}#v-evaluacion .av-modulo .panel,#v-evaluacion .av-modulo .report-section,#v-evaluacion .av-modulo .map-shell{border:none;box-shadow:none;padding:10px 0;break-inside:avoid}#v-evaluacion .av-modulo .page-head{margin-bottom:15px}#v-evaluacion .av-modulo h1{font-size:24pt}#v-evaluacion .av-modulo h2{break-after:avoid}#v-evaluacion .av-modulo .table-wrap{overflow:visible;border:0}#v-evaluacion .av-modulo .table-wide{min-width:0;font-size:7pt}#v-evaluacion .av-modulo .table-wide td{min-width:0}#v-evaluacion .av-modulo th,#v-evaluacion .av-modulo td{padding:5px}#v-evaluacion .av-modulo .kpis{break-inside:avoid}#v-evaluacion .av-modulo .export-header{display:block}#v-evaluacion .av-modulo .report-cover{padding:18px}#v-evaluacion .av-modulo .note{break-inside:avoid}#v-evaluacion .av-modulo a{color:inherit}#v-evaluacion .av-modulo .grid2{display:block}}
/* Dentro de la plataforma el prototipo no es dueño de la página: la barra
   lateral pasa de position:fixed a una columna pegajosa bajo la cabecera, y
   .app deja de compensar con margen. En móvil (<680px) el prototipo la saca
   fuera de pantalla con transform, y eso se conserva. */
#v-evaluacion .av-modulo{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:60vh}
#v-evaluacion .av-modulo .sidebar{position:sticky;top:calc(var(--alto-cabecera,64px) + 12px);left:auto;bottom:auto;height:calc(100vh - var(--alto-cabecera,64px) - 24px);overflow-y:auto;z-index:1}
#v-evaluacion .av-modulo .app{margin-left:0;min-width:0}
@media(max-width:1180px){ #v-evaluacion .av-modulo{grid-template-columns:217px minmax(0,1fr)} }
@media(max-width:930px){ #v-evaluacion .av-modulo{grid-template-columns:205px minmax(0,1fr)} }
@media(max-width:680px){
  #v-evaluacion .av-modulo{grid-template-columns:minmax(0,1fr)}
  #v-evaluacion .av-modulo .sidebar{position:fixed;top:var(--alto-cabecera,64px);left:0;bottom:0;height:auto}
}