:root{
  --k-purple:#330072; --k-purple-soft:#685BC7;
  --k-teal:#003A3E; --k-green:#43B02A; --k-orange:#F06400;
  --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);
  --shadow-lift:0 2px 4px rgba(26,27,33,.04),0 10px 24px rgba(26,27,33,.07);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13.5px; color:var(--n-800); background:var(--n-050);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--k-purple-soft); text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit; font-size:inherit; cursor:pointer}

/* ---------- Estructura general: barra lateral + contenido ---------- */
.app{display:flex; min-height:100vh}

.sidebar{
  width:248px; flex:none; background:var(--n-000); border-right:var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side-brand{padding:20px 18px 16px; border-bottom:var(--line)}
.side-dots{display:flex; gap:5px; margin-bottom:14px}
.side-dots i{width:9px;height:9px;border-radius:2px;display:block}
.side-dots i:nth-child(1){background:var(--k-orange)}
.side-dots i:nth-child(2){background:var(--k-green)}
.side-dots i:nth-child(3){background:var(--k-purple)}
.side-dots i:nth-child(4){background:var(--k-purple-soft)}
.side-title{display:block; font-size:17px; font-weight:300; letter-spacing:-.4px; color:var(--n-900)}
.side-title strong{font-weight:700}
.side-sub{display:block; margin-top:3px; font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--n-500)}

.side-nav{padding:14px 12px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; flex:1}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:10px 12px; border:0; border-radius:9px; background:none;
  color:var(--n-600); font-size:13px; font-weight:600; line-height:1.3;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.nav-item:hover{background:var(--n-050); color:var(--n-900)}
.nav-item .ni-ico{flex:none; display:flex; color:var(--n-400)}
.nav-item[aria-current="true"]{background:var(--k-purple); color:#fff}
.nav-item[aria-current="true"] .ni-ico{color:#fff}
.nav-item[data-estado="pendiente"]{color:var(--n-400)}
.nav-item[data-estado="pendiente"] .ni-ico{color:var(--n-300)}
.nav-item[data-estado="pendiente"][aria-current="true"]{background:var(--n-100); color:var(--n-800)}
.nav-item[data-estado="pendiente"][aria-current="true"] .ni-ico{color:var(--n-500)}
.ni-txt{flex:1; min-width:0}
.ni-lock{flex:none; display:flex; color:currentColor; opacity:.55}
.nav-grupo{
  padding:16px 12px 6px; font-size:9.5px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--n-400);
}

.side-foot{padding:14px 14px 16px; border-top:var(--line)}
.side-foot label{display:block; font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--n-500); margin-bottom:6px}
.side-foot select{width:100%; min-width:0; font-size:12.5px}
.side-diag{
  margin-top:10px; width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:8px; border:var(--line); border-radius:8px; background:var(--n-000);
  color:var(--n-600); font-size:12px; font-weight:600;
}
.side-diag:hover{background:var(--n-050); color:var(--n-900)}

.contenido{flex:1; min-width:0; display:flex; flex-direction:column}
.barra{
  display:flex; align-items:center; gap:12px; padding:16px 32px 0;
  position:sticky; top:0; z-index:30; background:var(--n-050);
}
.barra-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.pill{
  display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px;
  border:var(--line); background:var(--n-000); font-size:12px; color:var(--n-600); white-space:nowrap;
}
.pill strong{color:var(--n-800); font-weight:600}
.menu-btn{display:none; border:var(--line); background:var(--n-000); border-radius:8px; padding:7px; color:var(--n-600)}

main{padding:20px 32px 64px; flex:1}

@media(max-width:900px){
  .sidebar{position:fixed; z-index:50; transform:translateX(-100%); transition:transform .22s var(--ease)}
  .sidebar.abierta{transform:none; box-shadow:var(--shadow-lift)}
  .menu-btn{display:inline-flex}
  .barra{padding:14px 18px 0}
  main{padding:18px 18px 56px}
}
@media(max-width:640px){
  .barra{flex-wrap:wrap; row-gap:8px}
  .barra-right{margin-left:auto; flex-wrap:wrap; justify-content:flex-end; row-gap:8px}
  .barra-right .pill{white-space:normal; padding:6px 10px}
  .barra-right .btn{white-space:normal; text-align:center}
}

.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px;
  border:var(--line); background:var(--n-000); color:var(--n-800); font-weight:600; font-size:12.5px;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover{background:var(--n-050); border-color:var(--n-300)}
.btn-primary{background:var(--k-purple); border-color:var(--k-purple); color:#fff}
.btn-primary:hover{background:#2a005e; border-color:#2a005e}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- Estructura de página ---------- */
.kicker{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--n-500);margin:0 0 6px}
h1.page{font-size:30px;font-weight:300;letter-spacing:-.6px;color:var(--k-purple);margin:0 0 8px}
h1.page strong{font-weight:700}
.bajada{font-size:15.5px;color:var(--n-600);line-height:1.65;max-width:660px;margin:0 0 24px}
h2.sec{font-size:18px;font-weight:300;letter-spacing:-.3px;color:var(--n-900);margin:34px 0 14px}
h2.sec strong{font-weight:700}
.nota{font-size:12px;color:var(--n-500);border-top:var(--line);padding-top:12px;margin-top:26px;line-height:1.6}

/* ---------- Tarjetas ---------- */
.grid{display:grid; gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g4,.g3,.g2{grid-template-columns:1fr}}

.card{
  background:var(--n-000); border:var(--line); border-radius:10px; padding:16px 18px;
  box-shadow:var(--shadow-soft); border-top:3px solid var(--k-purple);
}
.card.acc-green{border-top-color:var(--k-green)}
.card.acc-orange{border-top-color:var(--k-orange)}
.card.acc-teal{border-top-color:var(--k-teal)}
.card.acc-soft{border-top-color:var(--k-purple-soft)}
.card.plain{border-top:var(--line)}

.kpi-head{display:flex; align-items:center; gap:9px; margin-bottom:10px}
.kpi-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none}
.kpi-label{font-size:11px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--n-500)}
.kpi-val{font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1.1}
.kpi-sub{font-size:12px;color:var(--n-600);margin-top:5px;line-height:1.5}
.kpi-nd{font-size:19px;font-weight:600;color:var(--n-400);letter-spacing:-.3px}

.c-purple{color:var(--k-purple)} .c-soft{color:var(--k-purple-soft)}
.c-green{color:var(--k-green)} .c-orange{color:var(--k-orange)} .c-teal{color:var(--k-teal)}
.bg-purple{background:rgba(51,0,114,.10)} .bg-soft{background:rgba(104,91,199,.12)}
.bg-green{background:rgba(67,176,42,.12)} .bg-orange{background:rgba(240,100,0,.12)}
.bg-teal{background:rgba(0,58,62,.10)}

/* ---------- Barras de distribución ---------- */
.dist{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.dist-row{display:grid; grid-template-columns:118px 1fr 42px; align-items:center; gap:10px; font-size:12.5px}
.dist-bar{display:block; height:7px; background:var(--n-100); border-radius:4px; overflow:hidden}
.dist-fill{display:block; height:100%; min-width:2px; border-radius:4px}
.dist-n{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}

/* ---------- Tablas ---------- */
table.t{width:100%; border-collapse:collapse; font-size:12.5px}
table.t th{
  text-align:left; font-size:10.5px; letter-spacing:.9px; text-transform:uppercase;
  color:var(--n-500); font-weight:700; padding:8px 10px; border-bottom:var(--line); white-space:nowrap;
}
table.t td{padding:9px 10px; border-bottom:1px solid var(--n-100); vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t td.num, table.t th.num{text-align:right; font-variant-numeric:tabular-nums}
.tbl-wrap{background:var(--n-000); border:var(--line); border-radius:10px; overflow:auto; box-shadow:var(--shadow-soft)}

/* ---------- Filtros ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 18px}
.field{display:flex; flex-direction:column; gap:4px}
.field label{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--n-500)}
select,input[type=search]{
  font-family:inherit; font-size:13px; padding:8px 11px; border:var(--line); border-radius:8px;
  background:var(--n-000); color:var(--n-800); min-width:210px;
}
select:focus,input:focus{outline:2px solid var(--k-purple-soft); outline-offset:1px}

/* ---------- Tarjeta de colegio ---------- */
/* Tarjetas más chicas: con 213 colegios lo que importa es cuántos caben de una
   vez, no cuánto dice cada uno. El detalle completo está a un clic, en la ficha. */
.colegios{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px}
.col-card{
  background:var(--n-000); border:var(--line); border-left:3px solid var(--n-300); border-radius:10px;
  padding:11px 12px; text-align:left; box-shadow:var(--shadow-soft); width:100%;
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
.col-card:hover{box-shadow:var(--shadow-lift); transform:translateY(-1px)}
.col-card.riesgo{border-left-color:var(--k-orange)}
.col-card.sano{border-left-color:var(--k-green)}
.col-card.neutro{border-left-color:var(--k-purple-soft)}
.col-top{display:flex; gap:9px; align-items:center}
.logo{width:32px;height:32px;border-radius:8px;object-fit:contain;background:var(--n-050);border:var(--line);flex:none}
.logo-ph{width:32px;height:32px;border-radius:8px;background:var(--n-100);display:flex;align-items:center;justify-content:center;color:var(--n-400);flex:none;font-size:10px;font-weight:700}
.col-name{font-size:12.5px;font-weight:700;line-height:1.3;color:var(--n-900);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col-meta{font-size:10.5px;color:var(--n-500);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:9px; padding-top:8px; border-top:1px solid var(--n-100)}
.col-stat{min-width:0}
.col-stat .v{font-size:14px;font-weight:700;letter-spacing:-.3px;line-height:1.2}
.col-stat .l{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--n-500);margin-top:3px;line-height:1.25}

/* ---------- Badges ---------- */
.badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:5px;white-space:nowrap}
.b-green{background:rgba(67,176,42,.12); color:#2c7a1c}
.b-orange{background:rgba(240,100,0,.12); color:#b34a00}
.b-orange-solid{background:var(--k-orange); color:#fff}
.b-purple{background:rgba(51,0,114,.09); color:var(--k-purple)}
.b-grey{background:var(--n-100); color:var(--n-600)}

/* ---------- Panel de detalle ---------- */
.overlay{position:fixed; inset:0; background:rgba(26,27,33,.42); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s var(--ease)}
.overlay.open{opacity:1; pointer-events:auto}
.panel{
  position:fixed; inset:0; width:100%; height:100%; background:var(--n-050);
  z-index:61; transform:translateX(100%); transition:transform .26s var(--ease);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lift);
}
.panel.open{transform:none}
.panel-head{background:var(--n-000); border-bottom:var(--line); padding:18px 0; position:sticky; top:0; z-index:2}
.panel-head-in{max-width:1560px; margin:0 auto; padding:0 32px; display:flex; gap:16px; align-items:flex-start}
.panel-body{overflow:auto; padding:22px 32px 72px; flex:1}
/* Multicolumna en vez de rejilla: los bloques se empaquetan por altura real y no
   dejan huecos. Los marcados como "ancho" cortan el flujo y ocupan todo el ancho. */
.panel-grid{max-width:1560px; margin:0 auto; columns:3; column-gap:16px}
.panel-grid .blk{break-inside:avoid; margin-bottom:16px}
.blk.ancho{column-span:all; break-inside:auto}
@media(max-width:1500px){ .panel-grid{columns:2} }
@media(max-width:1000px){ .panel-grid{columns:1} }
@media(max-width:900px){
  .panel-body{padding:18px 16px 56px}
  .panel-head-in{padding:0 16px}
}
.panel-title{font-size:21px;font-weight:300;letter-spacing:-.5px;color:var(--n-900);line-height:1.25}
.panel-title strong{font-weight:700}
.panel-meta{font-size:12px;color:var(--n-500);margin-top:5px}
.close{margin-left:auto; border:0; background:var(--n-100); width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--n-600);flex:none}
.close:hover{background:var(--n-200)}

.blk{background:var(--n-000); border:var(--line); border-radius:10px; box-shadow:var(--shadow-soft); overflow:hidden}
.blk-head{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:var(--line)}
.blk-head .kpi-ico{width:26px;height:26px}
.blk-title{font-size:13.5px;font-weight:700;letter-spacing:-.1px}
.blk-badge{margin-left:auto; display:flex; gap:8px; align-items:center}
.blk-body{padding:14px 16px}
.blk-body.tight{padding:0}

.pares{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 20px}
.par .l{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--n-500)}
.par .v{font-size:13.5px;margin-top:2px;line-height:1.45}
.par .v.nd{color:var(--n-400)}

.ind{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px}
.ind-item{background:var(--n-050); border:var(--line); border-radius:8px; padding:10px 12px}
.ind-item .l{display:block; font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--n-500)}
.ind-item .v{font-size:20px;font-weight:700;letter-spacing:-.6px;margin-top:3px}

.lista{list-style:none;margin:0;padding:0}
.lista li{padding:13px 16px; border-bottom:1px solid var(--n-100)}
.lista li:last-child{border-bottom:0}
.li-top{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.li-fecha{font-size:11.5px;font-weight:700;color:var(--n-500);font-variant-numeric:tabular-nums}
.li-tit{font-size:13px;font-weight:600}
.li-txt{font-size:12.5px;color:var(--n-600);line-height:1.6;margin-top:6px;white-space:pre-wrap}
.li-sub{font-size:11.5px;color:var(--n-500);margin-top:4px}

.vacio{padding:18px 16px; font-size:12.5px; color:var(--n-600); line-height:1.6; background:var(--n-050)}
.vacio strong{color:var(--n-800)}

details.mas>summary{
  list-style:none; cursor:pointer; padding:10px 16px; font-size:12px; font-weight:700;
  color:var(--k-purple-soft); border-top:var(--line); display:flex; align-items:center; gap:7px;
}
details.mas>summary::-webkit-details-marker{display:none}
details.mas[open]>summary{color:var(--n-600)}

.msg{background:var(--n-000);border:var(--line);border-left:3px solid var(--k-orange);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow-soft);line-height:1.65}
.msg h3{margin:0 0 6px;font-size:14px;font-weight:700}
.msg p{margin:0 0 8px;color:var(--n-600);font-size:13px}
.msg code{background:var(--n-100);padding:1px 5px;border-radius:4px;font-size:12px}

.skeleton{background:var(--n-100); border-radius:8px; height:96px; animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.hidden{display:none !important}

/* ---------- Estado de sección pendiente ---------- */
.pendiente{
  display:flex; gap:16px; align-items:flex-start; max-width:760px;
  background:var(--n-000); border:var(--line); border-left:3px solid var(--k-purple-soft);
  border-radius:10px; padding:20px 22px; box-shadow:var(--shadow-soft);
}
.pendiente-ico{
  width:38px;height:38px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(104,91,199,.12); color:var(--k-purple-soft);
}
.pendiente h3{margin:0 0 8px; font-size:15px; font-weight:700; letter-spacing:-.2px}
.pendiente p{margin:0 0 10px; font-size:13.5px; color:var(--n-600); line-height:1.65}
.pendiente .btn{margin-top:4px}

/* ---------- Saludo y tarjetas de atención ---------- */
.saludo{font-size:32px; font-weight:300; letter-spacing:-.9px; color:var(--k-purple); margin:6px 0 10px}
.saludo strong{font-weight:700}
.saludo-sub{font-size:15.5px; color:var(--n-600); line-height:1.65; max-width:760px; margin:0 0 26px}
.saludo-sub strong{color:var(--n-800); font-weight:700}

.atencion{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.at-card{
  background:var(--n-000); border:var(--line); border-left:3px solid var(--k-purple-soft);
  border-radius:10px; padding:18px 20px; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; gap:10px;
}
.at-card.acc-orange{border-left-color:var(--k-orange)}
.at-card.acc-green{border-left-color:var(--k-green)}
.at-card.acc-teal{border-left-color:var(--k-teal)}
.at-card h3{margin:0; font-size:15px; font-weight:300; line-height:1.4; letter-spacing:-.2px; color:var(--n-900)}
.at-card h3 strong{font-weight:700}
.at-card p{margin:0; font-size:13px; color:var(--n-600); line-height:1.65}
.at-card .at-btn{
  align-self:flex-start; margin-top:2px; border:var(--line); background:var(--n-000);
  border-radius:8px; padding:7px 13px; font-size:12px; font-weight:700; color:var(--k-purple-soft);
}
.at-card .at-btn:hover{background:var(--n-050)}
.at-fuente{font-size:11px; color:var(--n-400); border-top:1px solid var(--n-100); padding-top:8px}

/* ---------- Gráficos y bloques de Reuniones y Estrategias ---------- */
.grafico{margin:0}
/* El SVG lleva su ancho real en el atributo width: no se estira para llenar el
   contenedor, porque estirarlo agranda también el texto y las barras hasta un
   tamaño que el contenido no justifica. Solo se encoge si no cabe. */
.grafico svg{display:block; max-width:100%; height:auto}
.grafico{overflow-x:auto}
g.barra-clic{cursor:pointer}
g.barra-clic:hover rect:last-of-type{opacity:.78}
g.barra-clic:focus{outline:none}
g.barra-clic:focus-visible{outline:2px solid var(--k-purple); outline-offset:2px}
g.barra-clic.sel text{font-weight:700}

.bar-detalle{margin-top:12px}
.bar-panel{border:var(--line); border-left:3px solid var(--k-purple-soft);
  border-radius:8px; padding:11px 13px; background:var(--n-050)}
.bar-panel-tit{font-size:12.5px; font-weight:700; color:var(--n-900); margin-bottom:8px;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.bar-panel-tit span{font-size:11.5px; font-weight:400; color:var(--n-500)}
.chip-col.chip-plano{cursor:default; border-color:var(--n-300); background:var(--n-100); color:var(--n-600)}
.grafico figcaption{font-size:11.5px; color:var(--n-500); line-height:1.6; margin-top:10px}

.leyenda{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px}
.leyenda span{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--n-600)}
.leyenda i{width:11px; height:11px; border-radius:3px; display:inline-block; flex:0 0 auto}

details.tabla-alterna{margin-top:12px; border-top:var(--line); padding-top:10px}
details.tabla-alterna>summary{
  cursor:pointer; list-style:none; font-size:11.5px; font-weight:700;
  color:var(--k-purple-soft); display:inline-flex; align-items:center; gap:6px;
}
details.tabla-alterna>summary::-webkit-details-marker{display:none}
details.tabla-alterna>summary::before{content:'+'; font-weight:700}
details.tabla-alterna[open]>summary{color:var(--n-600)}
details.tabla-alterna[open]>summary::before{content:'−'}
details.tabla-alterna .tbl-wrap{margin-top:10px; border:var(--line)}

ul.cobertura{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px}
ul.cobertura li{font-size:11.5px; color:var(--n-500)}
ul.cobertura strong{color:var(--n-700); font-weight:600}

ul.lista-simple{margin:10px 0 0; padding:0 0 0 18px; columns:3; column-gap:22px}
ul.lista-simple li{font-size:12px; color:var(--n-700); line-height:1.8; break-inside:avoid}
@media (max-width:1100px){ ul.lista-simple{columns:2} }
@media (max-width:700px){ ul.lista-simple{columns:1} }

.comparativa{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px}
.comp-lado{text-align:center}
.comp-lbl{font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--n-500); margin-bottom:6px}
.comp-val{font-size:30px; font-weight:300; letter-spacing:-1px; color:var(--n-700)}
.comp-centro{display:flex; justify-content:center}

.kpi-detalle{margin-top:10px; border-top:1px solid var(--n-100); padding-top:8px; font-size:11.5px; color:var(--n-500)}

/* Rejilla de la sección Reuniones y Estrategias. Dos columnas como máximo:
   los gráficos de barras horizontales necesitan ancho para que las etiquetas
   de los colegios y los especialistas se lean sin recortarse. */
.rg{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start}
.rg .blk.ancho{grid-column:1 / -1}
@media(max-width:1100px){ .rg{grid-template-columns:1fr} }
.grafico-nota{font-size:11px; color:var(--n-400); margin:0 0 10px}

/* Rojo del semáforo. ÚNICA excepción documentada al manual de marca Kurios, que
   no tiene rojo: lo pidió Experiencia de Aliados el 20/10/2026 porque un estado
   llamado "Rojo" pintado de morado se lee mal en una reunión de directiva.
   Se usa solo para ese estado, nunca como color de serie en un gráfico. */
:root{ --k-red:#C1272D; --k-red-bg:rgba(193,39,45,.10); }
.c-red{color:var(--k-red)}
.bg-red{background:var(--k-red-bg)}
.card.acc-red{border-top-color:var(--k-red)}
.badge.b-red{background:var(--k-red-bg); color:var(--k-red)}
.card.acc-purple{border-top-color:var(--k-purple)}
.card.grupo .kpi-val{font-size:34px}
.card.grupo .kpi-detalle:last-child{color:var(--n-400)}

/* Conciliación entre la cifra del portal y la que se ve filtrando en Google. */
details.conciliacion{
  background:var(--n-050); border:var(--line); border-left:3px solid var(--k-orange);
  border-radius:10px; padding:14px 18px; margin:18px 0;
}
details.conciliacion>summary{
  cursor:pointer; list-style:none; font-size:13.5px; font-weight:700; color:var(--k-purple);
}
details.conciliacion>summary::-webkit-details-marker{display:none}
details.conciliacion p{font-size:12.5px; color:var(--n-600); line-height:1.7; margin:10px 0 0}
details.conciliacion .conc-tit{font-weight:700; color:var(--n-800); margin-top:14px}
details.conciliacion ul{margin:6px 0 0; padding-left:20px}
details.conciliacion li{font-size:12.5px; color:var(--n-600); line-height:1.7}

/* ---------- Sección Salud ---------- */
/* Rampa secuencial de un solo tono, derivada del morado institucional. Un solo
   tono y no un arcoíris porque lo que codifica es magnitud, no categoría. */
:root{
  --ramp-0:#F4F2F8; --ramp-1:#E3DEEF; --ramp-2:#C9C0E2;
  --ramp-3:#A79ACF; --ramp-4:#7F6DB8; --ramp-5:#57429C; --ramp-6:#330072;
}

.mz-ejes{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:8px; flex-wrap:wrap}
.mz-eje-y, .mz-eje-x{font-size:11px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--n-500)}
.mz-eje-x{display:inline-flex; align-items:center; gap:6px}

.matriz-wrap{overflow-x:auto}
table.matriz{border-collapse:separate; border-spacing:3px; font-size:12.5px; min-width:620px}
table.matriz th{font-weight:600; color:var(--n-600); font-size:10.5px; letter-spacing:.7px;
  text-transform:uppercase; padding:6px 8px; text-align:center; vertical-align:bottom}
table.matriz th.fila{text-align:right; text-transform:none; letter-spacing:0; font-size:12.5px;
  color:var(--n-800); white-space:nowrap; font-weight:700}
table.matriz th.col-sd{color:var(--n-400)}
table.matriz td{text-align:center; padding:0; border-radius:4px; width:96px; height:58px; cursor:pointer}
table.matriz td:hover{outline:2px solid var(--k-purple-soft); outline-offset:-2px}
table.matriz td.sel{outline:2px solid var(--k-purple); outline-offset:-2px}
table.matriz td.foco{outline:2px solid var(--k-orange); outline-offset:-2px}
table.matriz td.sana{outline:2px solid var(--k-green); outline-offset:-2px}
table.matriz td.col-sd{opacity:.55}
table.matriz td .mz-n{font-size:20px; font-weight:300; letter-spacing:-.4px; display:block; line-height:1}
table.matriz td .mz-p{font-size:10.5px; display:block; margin-top:3px; opacity:.85}

.mz-leyenda{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 20px; margin-top:16px}
.mz-lg{font-size:11.5px; color:var(--n-600); line-height:1.6; padding-left:20px; position:relative}
.mz-lg strong{display:block; color:var(--n-900); font-weight:700; font-size:12px}
.mz-lg .sw{position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:3px; background:var(--n-100)}
.mz-lg .sw.foco{border:2px solid var(--k-orange)}
.mz-lg .sw.sana{border:2px solid var(--k-green)}
.mz-lg .sw.sd{border:2px solid var(--n-300); opacity:.55}

.umbrales{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px 24px;
  margin-top:16px; padding-top:14px; border-top:var(--line); font-size:12px; color:var(--n-600); line-height:1.7}
.umbrales .u-t{display:block; font-size:10.5px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--n-500); margin-bottom:2px}
.umbrales strong{color:var(--n-900)}

.matriz-detalle{margin-top:16px; border:var(--line); border-radius:10px; background:var(--n-050); padding:14px 16px}
.mzd-tit{font-size:13px; font-weight:700; color:var(--n-900); margin-bottom:10px}
.mzd-tit span{font-weight:400; color:var(--n-500); margin-left:6px}

/* Fila de colegio clicable: abre la ficha completa en el Portal de colegios. */
.fila-col{
  display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 13px; border:0; border-bottom:1px solid var(--n-100); background:var(--n-000);
  font-family:inherit; font-size:12px; color:var(--n-800); text-align:left; cursor:pointer;
}
.fila-col:last-child{border-bottom:0}
.fila-col:hover{background:var(--n-050); color:var(--k-purple)}
.fc-nom{min-width:0; line-height:1.35}
.fc-nom small{display:block; color:var(--n-500); font-size:10.5px}
.fc-val{font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto; font-size:11.5px}

.bandas-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; align-items:start}
.banda-card{background:var(--n-000); border:var(--line); border-top:3px solid var(--k-purple);
  border-radius:10px; box-shadow:var(--shadow-soft); overflow:hidden}
.banda-card.acc-green{border-top-color:var(--k-green)}
.banda-card.acc-orange{border-top-color:var(--k-orange)}
.banda-card.acc-purple{border-top-color:var(--k-purple)}
.bc-head{padding:13px 15px; border-bottom:var(--line)}
.bc-t{font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--n-500)}
.bc-n{display:block; font-size:28px; font-weight:300; letter-spacing:-.8px; line-height:1.2; margin-top:3px}
.bc-n small{font-size:13px; color:var(--n-400); margin-left:5px; font-weight:400}
.bc-s{display:block; font-size:11.5px; color:var(--n-600); margin-top:2px}
.bc-lista{max-height:260px; overflow-y:auto}

table.t.comp td .sublabel{margin-top:2px}
tr.fila-click{cursor:pointer}
tr.fila-click:hover{background:var(--n-050)}
tr.fila-click:hover td:first-child strong{color:var(--k-purple)}
.pendiente .sub{font-size:12.5px; color:var(--n-500)}


/* ---------- Filtro dentro de una sección ---------- */
.filtro-sec{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 20px}
.filtro-sec label{font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--n-500)}
.filtro-sec select{min-width:230px}
.filtro-aviso{font-size:11.5px; color:var(--k-orange); font-weight:600}

h3.sub-sec{font-size:14px; font-weight:600; color:var(--n-700); margin:26px 0 12px; letter-spacing:-.1px}

/* ---------- Con qué colegios, por especialista ---------- */
.esp-detalle{margin-top:10px; display:flex; flex-direction:column; gap:12px}
.esp-bloque{border:var(--line); border-radius:10px; padding:12px 14px; background:var(--n-000)}
.esp-nom{font-size:13px; font-weight:700; color:var(--n-900); margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.esp-nom span{font-size:11.5px; font-weight:400; color:var(--n-500)}
.esp-col{margin-bottom:10px}
.esp-col:last-child{margin-bottom:0}
.esp-tit{font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; margin-bottom:6px}
.esp-lista{display:flex; flex-wrap:wrap; gap:5px}
.esp-vacio{font-size:11.5px; color:var(--n-500); margin:0}
.chip-col{
  font-family:inherit; font-size:11px; padding:4px 9px; border-radius:20px; cursor:pointer;
  border:1px solid rgba(67,176,42,.35); background:rgba(67,176,42,.08); color:#2c7a1c;
}
.chip-col:hover{border-color:var(--k-green)}
.chip-col.pend{border-color:rgba(240,100,0,.35); background:rgba(240,100,0,.08); color:#b34a00}
.chip-col.pend:hover{border-color:var(--k-orange)}

/* ---------- Bloque gerencial de Salud ---------- */
.gerencial{
  background:linear-gradient(180deg,var(--n-000),var(--n-050));
  border:var(--line); border-top:3px solid var(--k-purple); border-radius:12px;
  padding:22px 24px; margin-bottom:22px; box-shadow:var(--shadow-soft);
}
.ger-tit{font-size:11px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--n-500); margin-bottom:14px}
.ger-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px}
.ger-u{border-left:3px solid var(--n-200); padding-left:13px}
.ger-u.alerta{border-left-color:var(--k-orange)}
.ger-u.grave{border-left-color:var(--k-red)}
.ger-u.bien{border-left-color:var(--k-green)}
.ger-k{font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--n-500)}
.ger-v{font-size:34px; font-weight:200; letter-spacing:-1.3px; line-height:1.1; color:var(--n-900); margin-top:4px}
.ger-v small{font-size:14px; color:var(--n-400); font-weight:400; margin-left:4px}
.ger-d{font-size:11.5px; color:var(--n-600); line-height:1.5; margin-top:5px}
.ger-pie{font-size:12px; color:var(--n-600); line-height:1.65; margin:16px 0 0; padding-top:14px; border-top:var(--line)}


/* ---------- Buscador pegado a la cuadrícula de colegios ---------- */
.colegios-head{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:34px 0 14px}
.colegios-head h2.sec{margin:0}
.buscador{position:relative; flex:0 1 340px; min-width:230px}
.buscador input{
  width:100%; padding:9px 34px 9px 34px; font-size:13px; font-family:inherit;
  border:var(--line); border-radius:20px; background:var(--n-000); color:var(--n-800);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.buscador input::placeholder{color:var(--n-400)}
.buscador input:focus{outline:none; border-color:var(--k-purple-soft);
  box-shadow:0 0 0 3px rgba(104,91,199,.12)}
.buscador input::-webkit-search-cancel-button{display:none}
.busc-ico{position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--n-400); display:flex; pointer-events:none}
.busc-x{position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:0; background:var(--n-100); color:var(--n-600); border-radius:50%;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center; cursor:pointer}
.busc-x:hover{background:var(--n-200); color:var(--n-800)}
@media(max-width:700px){ .buscador{flex:1 1 100%} }


/* =========================== Feedback 360 ===========================
   Mismo formato del portal interno de Feedback 360 que ya corre en Apps
   Script: portada morada, barra de momento, tres indicadores y el panorama
   en rejilla de dos columnas. Todo va bajo .fb360 porque varios nombres de
   clase de esa aplicación (card, grid, pill, chip) también existen en el
   portal y chocarían entre sí. */
.fb360{ --t-purple:#F1EEF8; --t-blue:#E6F6FC; --t-green:#EDF7EA; --t-orange:#FDF0E6;
  --k-blue:#00A3E0; }
.fb-sprite{position:absolute;width:0;height:0;overflow:hidden}
.fb-deck{max-width:1000px;margin:0 auto}

.fb-volver{display:inline-flex;align-items:center;gap:8px;background:var(--n-000);
  border:var(--line);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600;
  color:var(--n-600);margin:0 0 18px}
.fb-volver:hover{border-color:var(--n-300);color:var(--k-purple)}
.fb-volver svg{transform:rotate(180deg)}

/* ---------- Portada ---------- */
.fb-cover{position:relative;overflow:hidden;background:var(--k-purple);color:var(--n-000);border-radius:18px}
.fb-cover__rule{display:flex;height:5px}
.fb-cover__rule span{flex:1}
.fb-cover__rule span:nth-child(1){background:var(--k-purple-soft)}
.fb-cover__rule span:nth-child(2){background:var(--k-blue)}
.fb-cover__rule span:nth-child(3){background:var(--k-green)}
.fb-cover__rule span:nth-child(4){background:var(--k-orange)}
.fb-cover__body{padding:30px 36px 34px}
.fb-cover__top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.2)}
.fb-brand{font-size:30px;font-weight:700;letter-spacing:-1.5px;line-height:1}
.fb-brand img{display:block;height:80px;width:auto;margin:-16px 0}
.fb-cover__sep{width:1px;height:42px;background:rgba(255,255,255,.24);flex-shrink:0}
.fb-school{background:var(--n-000);border-radius:12px;padding:9px 11px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:78px;min-height:78px;flex-shrink:0}
.fb-school img{height:62px;width:auto;max-width:150px;display:block;object-fit:contain}
.fb-school__ph{font-size:9.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  color:var(--n-400);text-align:center;line-height:1.35;padding:0 4px}
.fb-cover__sname{font-size:20px;font-weight:600;letter-spacing:-.3px;line-height:1.2;margin:0;min-width:0}
.fb-cover__sname em{display:block;font-style:normal;font-size:12.5px;font-weight:400;
  color:rgba(255,255,255,.62);margin-top:3px}
.fb-cover__pill{margin-left:auto;white-space:nowrap;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 16px;
  font-size:12px;font-weight:600;letter-spacing:.3px}
.fb-cover__eyebrow{font-size:13.5px;color:rgba(255,255,255,.72);margin:0 0 10px;max-width:620px;line-height:1.55}
.fb-cover__title{font-size:44px;font-weight:300;letter-spacing:-1.2px;line-height:1.08;
  margin:0 0 18px;white-space:nowrap}
.fb-cover__title strong{font-weight:600}
.fb-cover__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;
  font-size:13.5px;color:rgba(255,255,255,.8)}
.fb-cover__meta span{display:inline-flex;align-items:center;gap:8px}

/* ---------- Barra de momento ---------- */
.fb-momentbar{margin-top:14px;background:var(--n-000);border:var(--line);border-radius:14px;
  box-shadow:var(--shadow-soft);padding:14px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.fb-momentbar__label{display:inline-flex;align-items:center;gap:9px;font-size:11px;
  font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--n-500)}
.fb-pills{display:flex;gap:8px;flex-wrap:wrap}
.fb-pill{font-size:12px;font-weight:600;padding:7px 16px;border-radius:999px;
  border:1px solid var(--n-200);background:var(--n-000);color:var(--n-500);font-family:inherit}
.fb-pill:hover{border-color:var(--n-300);color:var(--n-800)}
.fb-pill--on{background:var(--k-purple);border-color:var(--k-purple);color:var(--n-000)}
.fb-pill--on:hover{color:var(--n-000)}

/* ---------- Indicadores ---------- */
.fb-kpis{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fb-kpi{background:var(--n-000);border:var(--line);border-radius:14px;box-shadow:var(--shadow-soft);
  padding:20px 22px 22px;position:relative;overflow:hidden}
.fb-kpi::before{content:"";position:absolute;top:0;left:22px;width:44px;height:3px;border-radius:0 0 3px 3px}
.fb-kpi--purple::before{background:var(--k-purple)}
.fb-kpi--blue::before{background:var(--k-blue)}
.fb-kpi--green::before{background:var(--k-green)}
.fb-kpi__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fb-tile{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.fb-tile--sm{width:34px;height:34px;border-radius:10px}
.fb-tile--purple{background:var(--t-purple);color:var(--k-purple)}
.fb-tile--blue{background:var(--t-blue);color:var(--k-blue)}
.fb-tile--green{background:var(--t-green);color:var(--k-green)}
.fb-tile--orange{background:var(--t-orange);color:var(--k-orange)}
.fb-kpi__name{font-size:13.5px;font-weight:600;color:var(--n-800)}
.fb-kpi__value{font-size:34px;font-weight:300;letter-spacing:-1px;color:var(--k-purple);line-height:1;margin:0}
.fb-kpi__value small{font-size:16px;font-weight:400;color:var(--n-500);letter-spacing:0}
.fb-kpi__note{font-size:12px;color:var(--n-500);margin:10px 0 0}
.fb-kpi__lee,.fb-card__lee{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--n-600);
  line-height:1.6;margin:14px 0 0;padding-top:12px;border-top:var(--line)}
.fb-card__lee{margin:0 0 18px;padding-top:0;border-top:none}
.fb-kpi__lee svg,.fb-card__lee svg{flex:none;margin-top:2px;color:var(--n-400)}
.fb-kpi__estado{font-size:11.5px;font-weight:600;margin:8px 0 0}
.fb-kpi__meta{font-size:12px;color:var(--n-600);margin:16px 0 0;padding:11px 13px;
  background:var(--n-050);border:var(--line);border-radius:10px;line-height:1.5}
.fb-kpi__meta b{color:var(--k-purple);font-weight:600}
.fb-kpi__meta span{display:block;color:var(--n-500);margin-top:3px}
.fb-kpi__split{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.fb-kpi__chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--n-800);border:1px solid var(--n-200);border-radius:999px;padding:5px 12px;white-space:nowrap}
.fb-kpi__chip svg{color:var(--k-purple-soft);display:block}
.fb-kpi__chip b{color:var(--k-purple)}
.fb-ring{display:flex;align-items:center;gap:16px}
.fb-ring svg{display:block;flex-shrink:0}
.fb-ring__track{stroke:var(--n-200)}
.fb-ring__bar{stroke:var(--k-blue);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}

/* Niveles de avance frente a la meta del lapso */
.fb360 .niv--bien{color:var(--k-green)}
.fb360 .niv--camino{color:var(--k-blue)}
.fb360 .niv--nd{color:var(--n-400)}
.fb360 .niv--atencion{color:var(--k-orange)}
.fb360 circle.niv--bien{stroke:var(--k-green)}
.fb360 circle.niv--camino{stroke:var(--k-blue)}
.fb360 circle.niv--nd{stroke:var(--n-300)}
.fb360 circle.niv--atencion{stroke:var(--k-orange)}
.fb-bar__fill.niv--bien{background:var(--k-green)}
.fb-bar__fill.niv--camino{background:var(--k-blue)}
.fb-bar__fill.niv--nd{background:var(--n-300)}
.fb-bar__fill.niv--atencion{background:var(--k-orange)}

/* ---------- Secciones y tarjetas ---------- */
.fb-section-head{margin:40px 0 18px}
.fb-section-title{font-size:30px;font-weight:300;letter-spacing:-.6px;color:var(--k-purple);
  margin:0 0 10px;line-height:1.2}
.fb-section-title strong{font-weight:600}
.fb-lede{font-size:15.5px;color:var(--n-600);line-height:1.65;max-width:660px;margin:0}
.fb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.fb-card{background:var(--n-000);border:var(--line);border-radius:14px;box-shadow:var(--shadow-soft);
  padding:24px 26px;transition:box-shadow .25s var(--ease)}
.fb-card:hover{box-shadow:var(--shadow-lift)}
.fb-card--wide{grid-column:1 / -1}
.fb-card__head{display:flex;align-items:center;gap:11px;padding-bottom:14px;margin-bottom:18px;
  border-bottom:var(--line)}
.fb-card__title{font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--n-900);margin:0;line-height:1.3}
.fb-card__sub{font-size:12px;color:var(--n-500);margin:-8px 0 18px}
.fb-card__pie{font-size:11.5px;color:var(--n-500);line-height:1.6;margin:14px 0 0;
  padding-top:12px;border-top:var(--line)}

/* ---------- Avance por línea ---------- */
.fb-lins{display:grid;gap:20px}
.fb-lin__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.fb-lin__name{font-size:13.5px;font-weight:600;color:var(--n-900)}
.fb-lin__name em{display:block;font-style:normal;font-size:12px;font-weight:400;color:var(--n-500);margin-top:2px}
.fb-lin__val{font-size:17px;font-weight:600;white-space:nowrap}
.fb-bar__track{height:8px;border-radius:999px;background:var(--n-100);overflow:hidden}
.fb-bar__fill{height:100%;border-radius:999px;background:var(--k-purple)}
.fb-lin__meta{font-size:12px;color:var(--n-600);margin:8px 0 0}
.fb-lin__meta span{color:var(--n-500);margin-left:6px;padding-left:8px;border-left:1px solid var(--n-300)}
.fb-lin__chips{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.fb-lin__chip{font-size:11px;font-weight:600;color:var(--n-600);background:var(--n-100);
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.fb-lin__chip--on{color:var(--k-green);background:var(--t-green)}
.fb-lin__chip--off{color:var(--k-orange);background:var(--t-orange)}
.fb-lin__chip--wait{color:var(--n-600);background:var(--n-100)}
.fb-lin__det{font-size:11.5px;color:#b34a00;margin:7px 0 0;line-height:1.5}
.fb-alert{display:flex;gap:11px;margin-top:18px;padding:14px 16px;background:var(--t-orange);border-radius:12px}
.fb-alert svg{color:var(--k-orange);flex-shrink:0;margin-top:2px;display:block}
.fb-alert p{margin:0;font-size:12.5px;color:var(--n-600);line-height:1.6}
.fb-alert b{color:var(--k-orange);font-weight:600}

/* ---------- Herramientas ---------- */
.fb-tools{display:grid;grid-template-columns:1fr;gap:12px}
.fb-tool{border:var(--line);border-radius:14px;padding:18px 20px}
.fb-tool--purple{background:var(--t-purple);border-color:transparent}
.fb-tool--blue{background:var(--t-blue);border-color:transparent}
.fb-tool__head{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.fb-tool__name{font-size:15.5px;font-weight:600}
.fb-tool--purple .fb-tool__name{color:var(--k-purple)}
.fb-tool--blue .fb-tool__name{color:var(--k-blue)}
.fb-tool__metrics{display:flex;gap:18px}
.fb-metric{flex:1;min-width:0}
.fb-metric__l{font-size:12px;color:var(--n-600);line-height:1.4;margin:0 0 8px}
.fb-metric__n{font-size:30px;font-weight:300;line-height:1;letter-spacing:-1px;color:var(--k-purple)}
.fb-tool--blue .fb-metric__n{color:var(--k-blue)}

/* ---------- Comunidad ---------- */
.fb-com__top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.fb-com__pos{font-size:44px;font-weight:300;letter-spacing:-1.8px;color:var(--k-purple);line-height:1;margin:0}
.fb-com__pos sup{font-size:19px;font-weight:300;letter-spacing:0}
.fb-com__label{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--n-500);margin:9px 0 0}
.fb-estado{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  border-radius:999px;padding:6px 14px}
.fb-estado--on{background:var(--t-green);color:var(--k-green)}
.fb-estado--off{background:var(--n-100);color:var(--n-500)}
.fb-estado i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.fb-com__note{font-size:12px;color:var(--n-500);margin:16px 0 0;line-height:1.6}
.fb-com__note b{color:var(--k-purple)}
.fb-pts{list-style:none;margin:0;padding:0}
.fb-pts__item{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-top:var(--line)}
.fb-pts__item:first-child{border-top:0}
.fb-pts__name{font-size:13px;color:var(--n-800);min-width:0}
.fb-pts__val{font-size:13px;font-weight:600;color:var(--k-purple);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ---------- Estrategias y observación ---------- */
.fb-estr{list-style:none;margin:0;padding:0}
.fb-estr__item{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:var(--line)}
.fb-estr__item:first-child{border-top:0;padding-top:0}
.fb-estr__item svg{color:var(--k-green);flex-shrink:0;display:block}
.fb-estr__n{font-size:13.5px;color:var(--n-800);flex:1;min-width:0}
.fb-estr__n em{display:block;font-style:normal;font-size:11.5px;color:var(--n-500);margin-top:2px}
.fb-estr__link{font-size:11.5px;font-weight:600;flex:none}
.fb-obs{list-style:none;margin:0;padding:0}
.fb-obs__item{padding:14px 0;border-top:var(--line)}
.fb-obs__item:first-child{border-top:0;padding-top:2px}
.fb-obs__meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.fb-obs__doc{font-size:13.5px;font-weight:600;color:var(--n-900)}
.fb-obs__curso{font-size:11.5px;color:var(--n-500)}
.fb-obs__txt{font-size:12.5px;color:var(--n-600);line-height:1.65;margin:0;white-space:pre-wrap}
.fb-obs__nota{font-size:11.5px;color:var(--n-500);font-style:italic;line-height:1.6;margin:8px 0 0}
.fb-chip{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--n-500);border:1px solid var(--n-200);border-radius:999px;padding:3px 10px;white-space:nowrap}
.fb-chip--done{color:var(--k-green);border-color:#CDE8C6}
.fb-chip--next{color:var(--k-orange);border-color:#F8D9BF}
.fb-vacio{font-size:13px;color:var(--n-500);margin:0;line-height:1.6}

/* ---------- Acordeón ---------- */
.fb-accl{border-top:var(--line);margin-top:18px}
.fb-accl__item{border-bottom:var(--line)}
.fb-accl__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:0;padding:14px 0;cursor:pointer;font-family:inherit;font-size:13.5px;
  font-weight:600;color:var(--n-800);text-align:left;transition:color .2s var(--ease)}
.fb-accl__btn:hover{color:var(--k-purple)}
.fb-accl__btn:focus-visible{outline:2px solid var(--k-purple-soft);outline-offset:3px;border-radius:4px}
.fb-accl__btn[aria-expanded="true"]{color:var(--k-purple)}
.fb-accl__lab{display:inline-flex;align-items:center;gap:10px;min-width:0}
.fb-accl__lab svg{color:var(--k-purple);flex-shrink:0;display:block}
.fb-accl__count{font-size:11px;font-weight:600;color:var(--n-500);border:1px solid var(--n-200);
  border-radius:999px;padding:2px 9px;white-space:nowrap}
.fb-accl__chev{color:var(--n-400);transition:transform .28s var(--ease);flex-shrink:0;display:block}
.fb-accl__btn[aria-expanded="true"] .fb-accl__chev{transform:rotate(180deg)}
.fb-accl__panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.fb-accl__inner{padding:2px 0 16px}
.fb-accl__intro{font-size:13px;color:var(--n-600);margin:0 0 14px;line-height:1.6;max-width:660px}

/* ---------- Índice de colegios ---------- */
.fb-idx{max-width:1000px;margin:0 auto}
.fb-idx__lab{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--n-500);margin:0 0 10px}
.fb-idx__t{font-size:30px;font-weight:300;letter-spacing:-.6px;color:var(--k-purple);margin:0 0 10px}
.fb-idx__t strong{font-weight:600}
.fb-idx__lede{font-size:15.5px;color:var(--n-600);line-height:1.65;max-width:660px;margin:0 0 24px}
.fb-idx__filtros{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end;margin:0 0 20px}
.fb-field{display:flex;flex-direction:column;gap:6px}
.fb-field label{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--n-500)}
.fb-field select{min-width:250px}
.fb-idx__buscar{position:relative;max-width:420px;margin:0 0 16px}
.fb-idx__buscar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--n-500)}
.fb-idx__input{width:100%;box-sizing:border-box;font-family:inherit;font-size:13.5px;color:var(--n-900);
  background:var(--n-000);border:var(--line);border-radius:10px;padding:11px 14px 11px 40px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.fb-idx__input:focus{outline:none;border-color:var(--k-purple-soft);box-shadow:0 0 0 3px rgba(104,91,199,.14)}
.fb-idx__n{font-size:12px;color:var(--n-500);margin:0 0 14px}
.fb-idx__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.fb-idx__a{display:flex;width:100%;text-align:left;align-items:center;gap:12px;background:var(--n-000);
  border:var(--line);border-radius:12px;padding:14px 16px;color:inherit;font-family:inherit;
  box-shadow:var(--shadow-soft);transition:box-shadow .18s var(--ease),border-color .18s var(--ease)}
.fb-idx__a:hover{box-shadow:var(--shadow-lift);border-color:var(--n-300)}
.fb-idx__txt{min-width:0;flex:1}
.fb-idx__nom{display:block;font-size:13.5px;font-weight:600;color:var(--n-900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-idx__ciu{display:block;font-size:12px;color:var(--n-500);margin-top:2px}
.fb-idx__pct{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.fb-idx__a svg{color:var(--n-400);flex:none}

/* ---------- Pie ---------- */
.fb-foot{margin-top:34px;padding-top:16px;border-top:var(--line);font-size:12px;
  color:var(--n-500);line-height:1.65}
.fb-foot p{margin:0 0 6px}
.fb-foot p:last-child{margin-bottom:0}

@media(max-width:1100px){
  .fb-kpis{grid-template-columns:1fr}
  .fb-grid{grid-template-columns:1fr}
  .fb-idx__lista{grid-template-columns:1fr}
  .fb-cover__sep{display:none}
  .fb-cover__pill{margin-left:0}
  .fb-cover__title{font-size:30px;letter-spacing:-.8px;white-space:normal}
  .fb-cover__body{padding:24px 22px 28px}
  .fb-card{padding:20px}
  .fb-section-title{font-size:25px}
}
@media print{
  .fb-accl__panel{max-height:none !important}
  .fb-grid{grid-template-columns:1fr}
  .fb-card{break-inside:avoid;box-shadow:none}
  .fb-momentbar,.fb-volver{display:none}
  .fb-cover{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Dashboards de Apps Script incrustados (Salud y Visitas) */
.contenido.modo-embed{height:100vh; display:flex; flex-direction:column; overflow:hidden}
.contenido.modo-embed main{padding:0; flex:1; min-height:0}
.dash-embed{display:block;width:100%;height:100%;border:0;background:transparent}

/* ---------- Detalle al pulsar: tarjetas, cifras y filas ---------- */
.card.clic{cursor:pointer; transition:transform .15s var(--ease), box-shadow .15s var(--ease)}
.card.clic:hover,.card.clic:focus-visible{transform:translateY(-2px); box-shadow:var(--shadow-lift); outline:none}
.card.clic:focus-visible{outline:2px solid var(--k-purple-soft); outline-offset:2px}
.ver-lista{margin-top:10px; font-size:11.5px; font-weight:700; color:var(--k-purple-soft)}
.card.clic:hover .ver-lista{color:var(--k-purple)}
.link-lista,.num-clic{background:none; border:0; padding:0; font:inherit; color:var(--k-purple-soft); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.link-lista:hover,.num-clic:hover{color:var(--k-purple)}
.cero{color:var(--n-400)}
.nd-txt{color:var(--n-400)}
.fila-clic,.fila-click{cursor:pointer}
.fila-clic:hover td,.fila-click:hover td{background:var(--n-050)}
.dist-row[data-lista],.dist-row[data-ver]{cursor:pointer; border-radius:6px; padding:2px 4px; margin:0 -4px}
.dist-row[data-lista]:hover,.dist-row[data-ver]:hover{background:var(--n-100)}
.ind-item.clic,.par.clic{cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease)}
.ind-item.clic:hover,.ind-item.clic:focus-visible{border-color:var(--k-purple-soft); background:#fff; outline:none}
.ind-item.clic .l::after{content:" \2192"; color:var(--k-purple-soft)}
.par.clic .v{color:var(--k-purple-soft); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.mini-barra{height:6px; background:var(--n-200); border-radius:3px; min-width:70px; overflow:hidden}
.mini-barra span{display:block; height:100%; background:var(--k-green); border-radius:3px}

/* Pestañas del Portal de colegios */
.tabs{display:flex; gap:4px; border-bottom:var(--line); margin:0 0 20px}
.tab{background:none; border:0; border-bottom:3px solid transparent; padding:10px 16px; font:inherit; font-weight:700; color:var(--n-600); cursor:pointer; display:inline-flex; align-items:center; gap:8px; margin-bottom:-1px}
.tab:hover{color:var(--k-purple)}
.tab.on{color:var(--k-purple); border-bottom-color:var(--k-orange)}
.tab-n{background:var(--n-100); color:var(--n-600); border-radius:10px; padding:1px 8px; font-size:11px}
.tab.on .tab-n{background:var(--k-purple); color:#fff}

/* Ficha del colegio: volver, filtro activo y filtros de visitas */
.volver{display:block; margin:0 auto 10px; max-width:1560px; padding:0 32px; background:none; border:0; font:inherit; font-weight:700; color:var(--k-purple-soft); cursor:pointer; text-align:left; width:100%}
.volver:hover{color:var(--k-purple)}
.chip-filtro{display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(104,91,199,.10); color:var(--k-purple); border-radius:8px; padding:8px 12px; margin:0 16px 10px; font-size:12.5px; font-weight:600}
.chip-filtro button,.btn-lim{background:#fff; border:var(--line); border-radius:6px; padding:5px 10px; font:inherit; font-size:12px; font-weight:700; color:var(--k-purple); cursor:pointer}
.vis-filtros{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; padding:12px 16px; background:var(--n-050); border-bottom:var(--line)}
.vf{display:flex; flex-direction:column; gap:3px; font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--n-500)}
.vf select{font:inherit; font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:400; color:var(--n-800); border:var(--line); border-radius:6px; padding:6px 8px; background:#fff; max-width:190px}
.vis-cuenta{margin-left:auto; font-size:12px; font-weight:700; color:var(--n-600)}
[hidden]{display:none!important}
#panel [id^="pn-"],#panel .chip-filtro{scroll-margin-top:150px}

/* Calendario de estrategias */
.cal-bloque{margin:18px 0 8px}
.cal-nav{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.cal-leyenda{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.cal-mes-titulo{font-size:17px; font-weight:700; color:var(--k-purple); margin:0 0 10px}
.cal-mes-n{font-weight:400; color:var(--n-600); font-size:13px}
.cal-sem{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px}
.cal-sem span{text-align:center; font-size:10.5px; font-weight:700; letter-spacing:.7px; color:var(--n-500); text-transform:uppercase}
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.cal-dia{min-width:0; overflow:hidden; min-height:86px; border:var(--line); border-radius:6px; background:var(--n-000); padding:5px 6px; display:flex; flex-direction:column; gap:3px}
.cal-dia.cal-vacia{border:0; background:transparent; min-height:0}
.cal-dia.cal-con{cursor:pointer}
.cal-dia.cal-con:hover{border-color:var(--k-purple-soft)}
.cal-dia.cal-hoy{outline:2px solid var(--k-orange); outline-offset:-2px}
.cal-num{font-size:11.5px; font-weight:700; color:var(--n-600)}
.cal-hoy .cal-num{color:var(--k-orange)}
.cal-chip{font-size:10.5px; font-weight:600; line-height:1.25; padding:2px 5px; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.cal-chip.cal-vig{background:rgba(51,0,114,.09); color:var(--k-purple)}
.cal-chip.cal-ejec{background:rgba(67,176,42,.14); color:#2c7a1c}
.cal-chip.cal-rep{background:rgba(240,100,0,.13); color:#b34a00}
.cal-leyenda .cal-chip{white-space:normal}
.cal-mas{font-size:10px; font-weight:700; color:var(--k-purple-soft)}
.cal-cuenta{display:none}
.cal-puntos{display:inline-flex; gap:2px; align-items:center}
.cal-punto{width:6px; height:6px; border-radius:50%}
.cal-punto.cal-vig{background:var(--k-purple)}
.cal-punto.cal-ejec{background:var(--k-green)}
.cal-punto.cal-rep{background:var(--k-orange)}
@media(max-width:900px){
  .cal-dia{min-height:46px; gap:2px}
  .cal-dia .cal-chip{display:none}
  .cal-dia .cal-mas{display:none}
  .cal-cuenta{display:flex; align-items:baseline; gap:4px; font-size:12px; color:var(--n-800)}
}
@media print{ .cal-nav{display:none} .cal-mes[hidden]{display:block!important; page-break-inside:avoid} }