/* v1.27 Panel bento dinámico. Las animaciones van en tarjetas y gráficas; las ventanas de detalle viven en <body>. */
.nxb{margin:18px 0 22px;--nxb-ink:#17354F;--nxb-muted:#6B7A8C;--nxb-line:#E5EAF0;--nxb-base:#2B4C7E}
.nxb-title h2{margin:2px 0 4px;font-size:24px;color:var(--nxb-ink);text-wrap:balance}
.nxb-title p{margin:0 0 14px;color:var(--nxb-muted);font-size:13px}
.nxb-over{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7B8BA0}
.nxb-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.nxb-card{background:#fff;border:1px solid var(--nxb-line);border-radius:22px;padding:18px 18px 14px;box-shadow:0 10px 28px rgba(20,43,67,.06);min-width:0;text-align:left;color:var(--nxb-ink);font:inherit}
.nxb-kpi{grid-column:span 3;display:flex;flex-direction:column;gap:4px;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,border-color .25s}
.nxb-kpi:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(20,43,67,.12);border-color:#C9D6E6}
.nxb-kpi:focus-visible,.nxb-row:focus-visible,.nxb-prow:focus-visible,.nxb-leg:focus-visible,.nxb-link:focus-visible{outline:3px solid #8FB3E8;outline-offset:2px}
.nxb-label{font-size:12px;font-weight:700;color:var(--nxb-muted)}
.nxb-num{font-size:38px;line-height:1.05;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--nxb-ink)}
.nxb-kpi small{font-size:12px;color:var(--nxb-muted)}
.nxb-mini{display:block;height:6px;border-radius:6px;background:#EEF2F6;overflow:hidden;margin-top:8px}
.nxb-mini i{display:block;height:100%;width:0;border-radius:6px}
.nxb-go{margin-top:8px;font-size:12px;font-weight:700;color:var(--nxb-base);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.nxb-kpi:hover .nxb-go,.nxb-kpi:focus-visible .nxb-go{opacity:1;transform:none}
.nxb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.nxb-head h3{margin:2px 0 0;font-size:16px;color:var(--nxb-ink)}
.nxb-link{border:1px solid var(--nxb-line);background:#F7F9FB;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--nxb-base);cursor:pointer;white-space:nowrap;transition:background .25s cubic-bezier(.22,1,.36,1)}
.nxb-link:hover{background:#EAF0F8}
.nxb-ring{grid-column:span 4}
.nxb-bars{grid-column:span 8}
.nxb-pareto{grid-column:span 7}
.nxb-proc{grid-column:span 5}
/* Anillo */
.nxb-ringwrap{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:14px;align-items:center}
.nxb-ringsvg{width:100%;height:auto;overflow:visible}
.nxb-arc{cursor:pointer;transition:stroke-width .2s ease,opacity .2s ease}
.nxb-arc:hover,.nxb-arc.on{stroke-width:21}
.nxb-ringsvg.dim .nxb-arc:not(.on){opacity:.35}
.nxb-ringnum{font-size:30px;font-weight:800;fill:var(--nxb-ink);font-variant-numeric:tabular-nums}
.nxb-ringlbl{font-size:10px;fill:var(--nxb-muted);font-weight:700}
.nxb-legend{display:grid;gap:6px}
.nxb-leg{display:grid;grid-template-columns:12px 1fr auto auto;gap:8px;align-items:center;border:1px solid transparent;background:transparent;border-radius:12px;padding:7px 8px;cursor:pointer;font:inherit;color:var(--nxb-ink);text-align:left;transition:background .2s,border-color .2s}
.nxb-leg:hover{background:#F4F7FA;border-color:var(--nxb-line)}
.nxb-leg i{width:12px;height:12px;border-radius:4px}
.nxb-leg span{font-size:13px;font-weight:600}
.nxb-leg b{font-variant-numeric:tabular-nums}
.nxb-leg em{font-style:normal;font-size:12px;color:var(--nxb-muted);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
/* Barras por alumno */
.nxb-rows{display:grid;gap:4px}
.nxb-row,.nxb-prow{will-change:transform;display:grid;grid-template-columns:minmax(90px,170px) 1fr 52px;gap:10px;align-items:center;border:0;background:transparent;border-radius:10px;padding:5px 6px;cursor:pointer;font:inherit;color:var(--nxb-ink);text-align:left;transition:background .25s cubic-bezier(.22,1,.36,1)}
.nxb-row:hover,.nxb-prow:hover{background:#F2F6FA}
.nxb-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxb-track{height:12px;border-radius:8px;background:#EEF2F6;overflow:hidden}
.nxb-track i{display:block;height:100%;width:0;border-radius:8px;position:relative;overflow:hidden;will-change:width}
.nxb-track i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 10%,rgba(255,255,255,.6) 45%,transparent 75%);transform:translateX(-130%)}
.nxb-row:hover .nxb-track i{filter:brightness(1.08) saturate(1.15)}
.nxb-pct{font-size:13px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.nxb-scale{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11.5px;color:var(--nxb-muted)}
.nxb-scale span{display:inline-flex;align-items:center;gap:6px}
.nxb-scale i{display:inline-block;width:12px;height:8px;border-radius:3px}
/* Pareto */
.nxb-paretosvg{width:100%;height:auto;overflow:visible}
.nxb-ax{font-size:11px;fill:#8392A5;font-variant-numeric:tabular-nums}
.nxb-cl{font-weight:700;fill:var(--nxb-ink)}
.nxb-80t{fill:#C8283A;font-weight:800}
.nxb-pbar{cursor:pointer}
.nxb-pbar rect{transition:filter .2s,opacity .2s}
.nxb-pbar:hover rect{filter:brightness(1.18)}
.nxb-paretosvg:hover .nxb-pbar:not(:hover) rect{opacity:.55}
.nxb-empty{display:grid;gap:6px;place-content:center;min-height:200px;padding:20px;border:1px dashed #D5DEE8;border-radius:16px;background:#FAFCFD;color:var(--nxb-muted);font-size:13px;text-align:center}
.nxb-empty b{color:var(--nxb-ink);font-size:14px}
/* Cumplimiento por proceso */
.nxb-pname{display:grid;font-size:12.5px;font-weight:700;min-width:0}
.nxb-pname small{font-size:11px;font-weight:500;color:var(--nxb-muted)}
.nxb-stack{display:flex;height:14px;border-radius:8px;background:#E6ECF2;overflow:hidden}
.nxb-stack i{display:block;height:100%;width:0}
.nxb-stack .g{background:#1E9160}.nxb-stack .r{background:#C8283A}.nxb-stack .a{background:#9AA9BA}
/* Detalle */
.nxb-src{margin:10px 0 0;font-size:12px;color:var(--nxb-muted)}
.nxb-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.nxb-kv div{border:1px solid var(--nxb-line);border-radius:14px;padding:10px 12px;display:grid;gap:2px}
.nxb-kv small{font-size:11px;color:var(--nxb-muted)}
.nxb-kv b{font-size:22px}
.nxb-click{cursor:pointer}.nxb-click:hover{background:#F2F6FA}
.nxb-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.nxb-chip.nc{background:#FBE7EA;color:#A11E2E}.nxb-chip.om{background:#FFF4DC;color:#8A6110}
.nxb-tip{position:fixed;z-index:3000;pointer-events:none;background:#14263B;color:#fff;font-size:12px;line-height:1.4;padding:8px 10px;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.2);opacity:0;transition:opacity .12s;max-width:260px}
@media (prefers-reduced-motion: no-preference){
  .nxb-card{animation:nxbIn .4s cubic-bezier(.22,1,.36,1) var(--d,0ms) backwards}
  .nxb-row,.nxb-prow{animation:nxbSlide .35s cubic-bezier(.22,1,.36,1) var(--d,0ms) backwards}
  .nxb-track i::after{animation:nxbShine 5s ease-in-out 1.2s infinite}
  .nxb-dot{animation:nxbPop .35s cubic-bezier(.34,1.56,.64,1) var(--d,0ms) backwards;transform-box:fill-box;transform-origin:center}
  .nxb-80,.nxb-80t{animation:nxbFade .4s ease .9s backwards}
  .nxb-leg i{animation:nxbPulse 2s ease-in-out 1s 2}
}
@keyframes nxbIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes nxbSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes nxbShine{0%{transform:translateX(-130%)}25%,100%{transform:translateX(130%)}}
@keyframes nxbPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes nxbFade{from{opacity:0}to{opacity:1}}
@keyframes nxbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@media (max-width:1100px){.nxb-kpi{grid-column:span 6}.nxb-ring,.nxb-bars,.nxb-pareto,.nxb-proc{grid-column:span 12}}
@media (max-width:560px){.nxb-kpi{grid-column:span 6;padding:14px}.nxb-kpi small{font-size:11px}.nxb-go{display:none}.nxb-ringwrap{grid-template-columns:1fr}.nxb-ringsvg{max-width:180px;margin:0 auto}.nxb-row,.nxb-prow{grid-template-columns:minmax(70px,110px) 1fr 44px}.nxb-kv{grid-template-columns:1fr}.nxb-num{font-size:28px}}
.nxb-rescols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (max-width:760px){.nxb-rescols{grid-template-columns:1fr}}