/* 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}
/* Isologotipo en morado sobre la lámina blanca, con el aire que pide el manual.
   Si la imagen no carga queda la palabra, nunca un hueco. */
.sl-marca{position:absolute; right:56px; top:34px; display:inline-flex; align-items:center}
.sl-marca img{display:block; height:22px; width:auto}
.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}