/* Tablero de Visitas de Acompañamiento · Kurios Education
   Comparte los tokens y las gráficas del portal. */

: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);
}
*{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}
button,select{font-family:inherit; font-size:inherit}
.oculto{display:none !important}

/* ---------- Cabecera y filtros ---------- */
.cab{background:var(--n-000); border-bottom:var(--line); position:sticky; top:0; z-index:20}
.cab-in{max-width:1480px; margin:0 auto; padding:16px 26px 0; display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap}
.cab-marca{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.cab-dots{display:flex; gap:4px; align-self:center}
.cab-dots i{width:9px;height:9px;border-radius:2px;display:block}
.cab-dots i:nth-child(1){background:var(--k-purple-soft)}
.cab-dots i:nth-child(2){background:var(--k-blue)}
.cab-dots i:nth-child(3){background:var(--k-green)}
.cab-dots i:nth-child(4){background:var(--k-orange)}
.cab-t{font-size:21px; font-weight:300; letter-spacing:-.6px; color:var(--k-purple)}
.cab-t strong{font-weight:700}
.cab-s{font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--n-500)}
.cab-der{display:flex; align-items:center; gap:14px}
.sello{font-size:11px; color:var(--n-500); white-space:nowrap}
.btn-link{font-size:12px; font-weight:600; color:var(--k-purple); text-decoration:none;
  border:var(--line); border-radius:8px; padding:7px 13px}
.btn-link:hover{border-color:var(--k-purple-soft); background:var(--n-050)}

.filtros{max-width:1480px; margin:0 auto; padding:14px 26px 16px; display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.campo{display:flex; flex-direction:column; gap:5px; min-width:150px}
.campo.ancho{min-width:280px; flex:1}
.campo label{font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--n-500)}
.campo select{width:100%; background:var(--n-050); border:var(--line); border-radius:8px; padding:9px 11px;
  font-size:12.5px; font-weight:600; color:var(--n-800)}
.campo select:focus{outline:none; border-color:var(--k-purple-soft); box-shadow:0 0 0 3px rgba(104,91,199,.14)}
.btn-limpiar{border:var(--line); background:var(--n-000); border-radius:8px; padding:9px 15px;
  font-size:12px; font-weight:600; color:var(--n-600)}
.btn-limpiar:hover{border-color:var(--k-purple-soft); color:var(--k-purple)}

/* ---------- Página ---------- */
.pagina{max-width:1480px; margin:0 auto; padding:24px 26px 60px}
.sec{margin-bottom:30px}
.sec-t{font-size:23px; font-weight:300; letter-spacing:-.6px; color:var(--k-purple); margin:0 0 14px}
.sec-t strong{font-weight:700}
.estado{background:var(--n-000); border:var(--line); border-radius:12px; padding:30px 32px; max-width:720px;
  margin:40px auto; box-shadow:var(--shadow-soft)}
.estado.error{border-left:3px solid var(--k-orange)}
.estado-t{margin:0 0 8px; font-size:20px; font-weight:300; color:var(--k-purple); letter-spacing:-.5px}
.estado-t strong{font-weight:700}
.estado-p{margin:0 0 8px; font-size:13px; color:var(--n-600); line-height:1.65}
.aviso{margin:14px 0 0; font-size:12px; color:var(--n-600); line-height:1.6;
  background:rgba(240,100,0,.07); border-left:3px solid var(--k-orange); border-radius:8px; padding:11px 14px}

/* ---------- Tarjetas y bloques ---------- */
.kpis{display:grid; gap:13px; margin-bottom:16px}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.kpis.k4,.kpis.k3{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--n-000); border:var(--line); border-radius:12px; padding:15px 17px 16px;
  box-shadow:var(--shadow-soft); position:relative; overflow:hidden}
.kpi::before{content:""; position:absolute; top:0; left:17px; 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-blue::before{background:var(--k-blue)}
.kpi.c-green::before{background:var(--k-green)} .kpi.c-orange::before{background:var(--k-orange)}
.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-soft .kpi-v{color:var(--k-purple-soft)} .kpi.c-blue .kpi-v{color:var(--k-blue)}
.kpi.c-green .kpi-v{color:var(--k-green)} .kpi.c-orange .kpi-v{color:var(--k-orange)}
.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)}

.cols{display:grid; gap:14px; align-items:start}
.cols.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.cols.c2{grid-template-columns:1fr}}
.blk{background:var(--n-000); border:var(--line); border-radius:12px; box-shadow:var(--shadow-soft);
  overflow:hidden; margin-bottom:14px}
.blk-h{padding:11px 15px; border-bottom:var(--line); display:flex; align-items:center; gap:10px}
.blk-t{font-size:12.5px; font-weight:700; color:var(--n-900)}
.blk-b{padding:13px 15px}
.blk-b.tabla{padding:0}
.blk-b.alta{max-height:460px; overflow:auto}
.blk-n{margin:9px 0 0; font-size:10.5px; color:var(--n-500); line-height:1.5}
.blk-lec{border-top:var(--line); background:var(--n-050); padding:10px 12px}
.blk-lec .an{border-left:3px solid var(--k-purple-soft); border-radius:7px; background:var(--n-000); padding:10px 13px}
.blk-lec .an p{margin:0; font-size:12px; line-height:1.65; color:var(--n-800)}
.btn-copiar{margin-left:auto; border:var(--line); background:var(--n-000); border-radius:7px;
  padding:5px 11px; font-size:11px; font-weight:700; color:var(--k-purple)}
.btn-copiar:hover{border-color:var(--k-purple-soft); background:var(--n-050)}
.btn-copiar.ok{background:rgba(67,176,42,.12); border-color:#CDE8C6; color:#2c7a1c}
.vacio{margin:0; padding:14px 15px; font-size:12.5px; color:var(--n-600); line-height:1.6; background:var(--n-050); border-radius:8px}

/* ---------- 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)}
g.barra-clic{cursor:pointer}
g.barra-clic:focus{outline:none}
g.barra-clic.sel rect:nth-of-type(1){stroke:var(--k-purple); stroke-width:2}
details.tabla-alterna{display:none}
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)}

/* ---------- Tablas ---------- */
table.t{width:100%; border-collapse:collapse; font-size:12px}
table.t th{background:var(--k-purple); color:#fff; font-weight:700; font-size:10px; letter-spacing:.7px;
  text-transform:uppercase; padding:9px 12px; text-align:left; position:sticky; top:0; z-index:2}
table.t th.num, table.t td.num{text-align:right; font-variant-numeric:tabular-nums}
table.t td{padding:8px 12px; border-bottom:1px solid var(--n-100); vertical-align:top}
table.t td.lbl{font-weight:700; color:var(--n-900)}
table.t td.fuerte{font-weight:700; color:var(--k-purple)}
table.t tr.sub td{background:var(--n-050); font-weight:700; font-size:11px; color:var(--n-600)}
table.t tr.gran td{background:var(--n-100); font-weight:700; color:var(--n-900); border-top:2px solid var(--n-300)}
.tag{display:inline-block; margin-left:7px; font-size:9.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:#b34a00; background:rgba(240,100,0,.10); border:1px solid rgba(240,100,0,.3);
  border-radius:999px; padding:2px 8px; vertical-align:middle}

table.mz{border-collapse:separate; border-spacing:3px; width:100%; font-size:12px}
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 td{background:var(--n-050); border-radius:7px; padding:9px 6px; text-align:center;
  font-size:15px; font-weight:700; color:var(--n-800)}
table.mz td.lbl{text-align:left; font-size:11.5px; font-weight:700; color:var(--n-900); background:transparent}
table.mz td.cero{color:var(--n-300); font-weight:400}
table.mz td.tot{background:rgba(51,0,114,.07); color:var(--k-purple); font-size:13px}
table.mz tr.gran td{background:var(--n-100); font-size:13px}

.pie{border-top:var(--line); padding-top:16px; margin-top:34px; font-size:11.5px; color:var(--n-500); line-height:1.65}
.pie p{margin:0 0 7px} .pie strong{color:var(--n-700)}