/* Presentación de plan estratégico · Experiencia de Aliados · Kurios Education
   Lee la misma fuente que el portal y se arma en el navegador. Las gráficas son
   las del portal, importadas tal cual desde lib/graficos.mjs. */

:root{
  --k-purple:#330072; --k-purple-soft:#685BC7;
  --k-teal:#003A3E; --k-green:#43B02A; --k-orange:#F06400; --k-blue:#00A3E0;
  --k-red:#C1272D; --k-red-bg:rgba(193,39,45,.10);
  --n-000:#FFFFFF; --n-050:#F7F8FA; --n-100:#F1F2F5; --n-200:#E7E8ED;
  --n-300:#D3D5DE; --n-400:#B9BCC8; --n-500:#8A8C9B; --n-600:#6B6D7C;
  --n-800:#2E3038; --n-900:#1A1B21;
  --line:1px solid var(--n-200);
  --shadow-soft:0 1px 2px rgba(26,27,33,.04),0 1px 3px rgba(26,27,33,.03);
  --ease:cubic-bezier(.4,0,.2,1);
  --t-purple:#F1EEF8; --t-blue:#E6F6FC; --t-green:#EDF7EA; --t-orange:#FDF0E6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13.5px; color:var(--n-800); background:#15161B;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font-family:inherit;font-size:inherit;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Escenario: una lámina de 1280 × 720 escalada al viewport ---------- */
.escenario{position:fixed; inset:0 0 52px 0; display:flex; align-items:center; justify-content:center}
.escenario .pila{position:relative; width:1280px; height:720px; transform-origin:center center}
.lamina{
  width:1280px; height:720px; background:var(--n-000); position:relative;
  transform-origin:center center; box-shadow:0 20px 60px rgba(0,0,0,.45);
  overflow:hidden; display:none;
}
.lamina.on{display:block}
.lamina::after{content:""; position:absolute; left:0; right:0; top:0; height:4px; display:block;
  background:linear-gradient(90deg,var(--k-purple-soft) 0 25%,var(--k-blue) 25% 50%,var(--k-green) 50% 75%,var(--k-orange) 75% 100%)}
.lamina.portada::after{display:none}

.sl{position:absolute; inset:0; padding:40px 56px 26px; display:flex; flex-direction:column}
.sl-k{margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--n-500)}
.sl-t{margin:0 0 4px; font-size:34px; font-weight:300; letter-spacing:-.9px; color:var(--k-purple); line-height:1.15}
.sl-t strong{font-weight:700}
.sl-sub{margin:0 0 6px; font-size:13.5px; color:var(--n-600); line-height:1.6; max-width:900px}
.sl-cuerpo{flex:1; min-height:0; margin-top:14px; display:flex; flex-direction:column; gap:14px}
.sl-pie{margin:14px 0 0; font-size:10.5px; color:var(--n-400); line-height:1.5; border-top:var(--line); padding-top:9px}
/* El logo que tenemos es el de negativo (blanco), así que en las láminas
   blancas va sobre un chip morado, que es como lo pide el manual. Si la imagen
   no carga, el chip se quita y queda la palabra, nunca un rectángulo vacío. */
.sl-marca{position:absolute; right:56px; top:36px; display:inline-flex; align-items:center;
  background:var(--k-purple); border-radius:6px; padding:6px 11px}
.sl-marca img{display:block; height:14px; width:auto}
.sl-marca.sin-logo{background:none; padding:0}
.sl-marca.sin-logo::after{content:'kurios'; font-size:20px; font-weight:700; letter-spacing:-1px; color:var(--n-200)}

/* ---------- Portada y cierre ---------- */
.portada .sl{padding:0}
.pt{display:grid; grid-template-columns:1.25fr 1fr; height:100%}
.pt-izq{background:var(--k-purple); color:#fff; padding:60px 56px; display:flex; flex-direction:column; justify-content:center}
.pt-marca{margin:0 0 26px}
.pt-marca img{display:block; height:24px; width:auto}
.pt-rule{display:flex; height:6px; margin-bottom:34px; width:220px}
.pt-rule span{flex:1}
.pt-rule span:nth-child(1){background:var(--k-purple-soft)}
.pt-rule span:nth-child(2){background:var(--k-blue)}
.pt-rule span:nth-child(3){background:var(--k-green)}
.pt-rule span:nth-child(4){background:var(--k-orange)}
.pt-k{margin:0 0 14px; font-size:11.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:rgba(255,255,255,.66)}
.pt-t{margin:0; font-size:52px; font-weight:300; letter-spacing:-2px; line-height:1.06}
.pt-t strong{font-weight:700}
.pt-sub{margin:20px 0 0; font-size:15px; color:rgba(255,255,255,.82); line-height:1.65; max-width:520px}
.pt-meta{margin:30px 0 0; display:flex; flex-direction:column; gap:7px; font-size:13px; color:rgba(255,255,255,.78)}
.pt-meta b{color:#fff; font-weight:700}
.pt-der{padding:60px 50px; display:flex; flex-direction:column; justify-content:center; gap:14px; background:var(--n-050)}
.pt-idx{font-size:12.5px; color:var(--n-600); line-height:1.7}
.pt-idx b{display:block; color:var(--k-purple); font-weight:700; font-size:11px; letter-spacing:1.2px;
  text-transform:uppercase; margin-bottom:8px}
.pt-idx ol{margin:0; padding-left:18px}
.pt-idx li{margin-bottom:5px}

/* ---------- Tarjetas de cifra ---------- */
.kpis{display:grid; gap:12px}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{border:var(--line); border-radius:12px; padding:14px 16px 15px; background:var(--n-000);
  box-shadow:var(--shadow-soft); position:relative; overflow:hidden}
.kpi::before{content:""; position:absolute; top:0; left:16px; width:38px; height:3px; border-radius:0 0 3px 3px; background:var(--k-purple)}
.kpi.c-soft::before{background:var(--k-purple-soft)}
.kpi.c-orange::before{background:var(--k-orange)}
.kpi.c-green::before{background:var(--k-green)}
.kpi.c-blue::before{background:var(--k-blue)}
.kpi.c-red::before{background:var(--k-red)}
.kpi-l{font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--n-500)}
.kpi-v{font-size:30px; font-weight:300; letter-spacing:-1.2px; color:var(--k-purple); line-height:1.1; margin-top:5px}
.kpi-v small{font-size:15px; font-weight:400; color:var(--n-500); letter-spacing:0}
.kpi.c-orange .kpi-v{color:var(--k-orange)} .kpi.c-green .kpi-v{color:var(--k-green)}
.kpi.c-red .kpi-v{color:var(--k-red)} .kpi.c-blue .kpi-v{color:var(--k-blue)}
.kpi.c-soft .kpi-v{color:var(--k-purple-soft)}
.kpi-s{font-size:11px; color:var(--n-600); margin-top:5px; line-height:1.45}
.kpi-nd{font-size:19px; font-weight:600; color:var(--n-400)}

/* ---------- Bloques y rejillas ---------- */
.cols{display:grid; gap:16px; min-height:0; align-items:start}
.cols.c2{grid-template-columns:1fr 1fr}
.cols.c21{grid-template-columns:1.35fr 1fr}
.blk{border:var(--line); border-radius:12px; background:var(--n-000); box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; min-height:0}
.blk-h{padding:10px 14px; border-bottom:var(--line); display:flex; align-items:center; gap:8px}
.blk-t{font-size:12px; font-weight:700; letter-spacing:-.1px; color:var(--n-900)}
.blk-b{padding:12px 14px; overflow:auto; min-height:0}
.blk-n{margin:8px 0 0; font-size:10.5px; color:var(--n-500); line-height:1.5}

/* ---------- Gráficas del portal ---------- */
.grafico{margin:0; overflow-x:auto}
.grafico svg{display:block; max-width:100%; height:auto}
.grafico-nota{font-size:10px; color:var(--n-400); margin:0 0 8px}
.grafico figcaption{font-size:10.5px; color:var(--n-500); line-height:1.5; margin-top:8px}
.bar-detalle{margin-top:10px}
.bar-panel{border:var(--line); border-left:3px solid var(--k-purple-soft); border-radius:8px;
  padding:10px 12px; background:var(--n-050)}
.bar-panel-tit{font-size:11.5px; font-weight:700; color:var(--n-900); margin-bottom:7px;
  display:flex; justify-content:space-between; gap:10px}
.bar-panel-tit span{font-size:11px; font-weight:400; color:var(--n-500)}
.esp-lista{display:flex; flex-wrap:wrap; gap:4px}
.chip-col{font-size:10.5px; border:1px solid var(--n-200); background:var(--n-000); color:var(--n-700);
  border-radius:999px; padding:3px 9px}
.chip-col.chip-plano{border-color:var(--n-300); background:var(--n-100); color:var(--n-600)}
.chip-col.pend{border-color:rgba(240,100,0,.35); background:rgba(240,100,0,.08); color:#b34a00}
g.barra-clic{cursor:pointer}
g.barra-clic:focus{outline:none}
g.barra-clic:focus-visible rect:nth-of-type(1){stroke:var(--k-purple-soft); stroke-width:2}
g.barra-clic.sel rect:nth-of-type(1){stroke:var(--k-purple); stroke-width:2}
.vacio{padding:12px 14px; font-size:12px; color:var(--n-600); line-height:1.6; background:var(--n-050); border-radius:8px}
ul.cobertura{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 12px}
ul.cobertura li{font-size:10.5px; color:var(--n-500)}
ul.cobertura strong{color:var(--n-700); font-weight:600}
details.tabla-alterna{display:none}

/* ---------- Matriz de salud ---------- */
table.mz{border-collapse:separate; border-spacing:3px; width:100%}
table.mz th{font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--n-500);
  padding:4px 6px; text-align:center}
table.mz th.y{text-align:right; white-space:nowrap}
table.mz td{background:var(--n-050); border-radius:7px; padding:9px 6px; text-align:center;
  font-size:17px; font-weight:700; color:var(--n-800); border:2px solid transparent}
table.mz td.cero{color:var(--n-300); font-weight:400}
table.mz td.foco{border-color:var(--k-orange); background:rgba(240,100,0,.07)}
table.mz td.sana{border-color:var(--k-green); background:rgba(67,176,42,.07)}
table.mz td.sd{opacity:.5}
.mz-ejes{display:flex; justify-content:space-between; font-size:10px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--n-500); margin-bottom:6px}
.mz-lg{display:grid; grid-template-columns:repeat(2,1fr); gap:6px 16px; margin-top:10px}
.mz-lg div{font-size:10.5px; color:var(--n-600); line-height:1.5; padding-left:18px; position:relative}
.mz-lg b{color:var(--n-900)}
.mz-lg i{position:absolute; left:0; top:3px; width:11px; height:11px; border-radius:3px; background:var(--n-100)}
.mz-lg i.foco{border:2px solid var(--k-orange)}
.mz-lg i.sana{border:2px solid var(--k-green)}

/* ---------- Tablas ---------- */
table.t{width:100%; border-collapse:collapse; font-size:11.5px}
table.t th{background:var(--k-purple); color:#fff; font-weight:700; font-size:10px; letter-spacing:.7px;
  text-transform:uppercase; padding:8px 10px; text-align:left}
table.t th.num, table.t td.num{text-align:right; font-variant-numeric:tabular-nums}
table.t td{padding:7px 10px; border-bottom:1px solid var(--n-100)}
table.t tr:last-child td{border-bottom:0}

/* ---------- Bloques de análisis editables ---------- */
.analisis{display:grid; grid-template-columns:repeat(2,1fr); gap:13px; align-content:start; min-height:0}
.analisis.una{grid-template-columns:1fr}
.an{border:var(--line); border-left:3px solid var(--k-purple-soft); border-radius:10px;
  background:var(--n-000); padding:14px 18px; position:relative}
.an:nth-child(4n+2){border-left-color:var(--k-blue)}
.an:nth-child(4n+3){border-left-color:var(--k-orange)}
.an:nth-child(4n+4){border-left-color:var(--k-green)}
.an p{margin:0; font-size:13px; line-height:1.65; color:var(--n-800)}
.an p+p{margin-top:9px}
.an[contenteditable="true"]:hover{background:var(--n-050)}
.an[contenteditable="true"]:focus{outline:2px solid var(--k-purple-soft); outline-offset:2px; background:var(--n-000)}
.an.editado::after{content:"editado"; position:absolute; top:7px; right:10px; font-size:9px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:var(--k-green)}
.an-aviso{font-size:10.5px; color:var(--n-500); margin:0}

/* ---------- Barra de control ---------- */
.ctrl{position:fixed; left:0; right:0; bottom:0; height:52px; background:#1F2027; color:#fff;
  display:flex; align-items:center; gap:14px; padding:0 18px; z-index:20}
.ctrl button{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff;
  border-radius:8px; padding:7px 12px; font-size:12px; font-weight:600}
.ctrl button:hover{background:rgba(255,255,255,.16)}
.ctrl button:disabled{opacity:.35; cursor:not-allowed}
.ctrl .pos{font-size:12px; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; min-width:92px}
.ctrl .tit{font-size:12.5px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:rgba(255,255,255,.88)}
.ctrl select{background:#2A2B33; color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:8px;
  padding:7px 10px; font-size:12px; font-family:inherit; max-width:230px}
.ctrl .sello{font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap}

/* ---------- Índice de láminas ---------- */
.indice{position:fixed; inset:0 0 52px 0; background:rgba(21,22,27,.96); z-index:15; overflow:auto;
  padding:32px; display:none}
.indice.on{display:block}
.indice h2{color:#fff; font-size:23px; font-weight:300; margin:0 0 22px; letter-spacing:-.5px}
.indice h2 strong{font-weight:700}
.ix{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; max-width:1240px}
.ix button{display:flex; gap:13px; align-items:flex-start; text-align:left; width:100%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#fff;
  border-radius:10px; padding:14px 16px}
.ix button:hover{background:rgba(255,255,255,.12)}
.ix button.on{border-color:var(--k-purple-soft); background:rgba(104,91,199,.22)}
.ix .n{font-size:13px; font-weight:700; color:rgba(255,255,255,.45); flex:none; min-width:22px; margin-top:1px}
.ix .t{font-size:15.5px; font-weight:600; line-height:1.35; letter-spacing:-.2px}
.ix .s{display:block; font-size:12.5px; font-weight:400; color:rgba(255,255,255,.55); margin-top:5px; line-height:1.45}

/* ---------- Estados de carga y error ---------- */
.estado{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:40px}
.estado-caja{background:var(--n-000); border-radius:14px; padding:30px 34px; max-width:640px; line-height:1.65}
.estado-caja h1{margin:0 0 10px; font-size:22px; font-weight:300; color:var(--k-purple); letter-spacing:-.5px}
.estado-caja h1 strong{font-weight:700}
.estado-caja p{margin:0 0 9px; font-size:13.5px; color:var(--n-600)}
.estado-caja code{background:var(--n-100); padding:1px 5px; border-radius:4px; font-size:12px}

@media print{
  body{background:#fff; overflow:visible}
  .ctrl,.indice{display:none !important}
  .escenario{position:static; inset:auto; display:block}
  .escenario .pila{transform:none !important; width:auto; height:auto}
  .lamina{display:block !important; transform:none; box-shadow:none; page-break-after:always;
    width:1280px; height:720px; position:relative; margin:0 auto}
}

/* Lista de colegios sin estrategia */
.faltan{display:flex; flex-direction:column; gap:14px; overflow:auto; min-height:0}
.fal-t{font-size:11.5px; color:var(--n-600); margin-bottom:7px}
.fal-t b{color:var(--n-900)}
.faltan .chip-col{font-size:10px; padding:3px 8px}

/* Lectura del gráfico: va pegada abajo del bloque, es editable y se distingue
   de la nota de cómo leerlo. */
.blk-lec{border-top:var(--line); background:var(--n-050); padding:9px 11px}
.blk-lec .an{border:0; border-left:3px solid var(--k-purple-soft); border-radius:7px;
  background:var(--n-000); padding:9px 12px}
.blk-lec .an p{font-size:11.5px; line-height:1.6}
.blk-lec .an.editado::after{top:5px; right:8px}

/* Enlace al tablero de visitas desde la barra de control */
.ctrl-link{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff;
  border-radius:8px; padding:7px 12px; font-size:12px; font-weight:600; text-decoration:none}
.ctrl-link:hover{background:rgba(255,255,255,.16); text-decoration:none}