*{box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:#EEF2F7;color:#0F172A;overflow:hidden}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:3px}
.gc{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);border:1px solid #E2E8F0}
.ni{cursor:pointer;transition:all .15s;margin:1px 6px;padding:5px 10px;border-radius:5px;display:flex;align-items:center;font-size:.76rem;color:#cbd5e1}
.ni:hover{background:rgba(255,255,255,.12);color:#fff}
.ni.active{background:#0EA5E9;color:#fff;border-left:3px solid #F59E0B;padding-left:8px}
.nc{font-size:.58rem;color:#64748b;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:0 10px;margin-top:12px;margin-bottom:2px}
.oi{border:1px solid #CBD5E1;padding:.3rem .45rem;font-size:.78rem;width:100%;outline:none;background:#fff;border-radius:4px;transition:border .15s;color:#0F172A}
.oi:focus{border-color:#1E3A8A;box-shadow:0 0 0 2px rgba(30,58,138,.1)}
.sh{font-size:.65rem;font-weight:800;text-transform:uppercase;padding:.2rem .5rem;background:#E2E8F0;border-left:3px solid #1E3A8A;margin:.5rem 0 .25rem;color:#1E3A8A;border-radius:0 3px 3px 0}
.tab-c{display:none}
.tab-c.active{display:block}
#tab-mapa.active{display:flex;flex-direction:column}
.kpi{background:#fff;border-radius:6px;border:1px solid #E2E8F0;padding:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.mo{position:fixed;inset:0;background:rgba(15,23,42,.78);backdrop-filter:blur(3px);z-index:8000;overflow-y:auto;padding:1rem;display:flex;align-items:flex-start;justify-content:center}
.mo-box{background:#fff;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative;margin:auto}
#toast{position:fixed;bottom:20px;right:20px;transform:translateY(200%);transition:transform .25s;z-index:99999;border-radius:8px;padding:10px 16px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,.2)}
#toast.show{transform:translateY(0)}
.badge-ab{background:#FEE2E2;color:#991B1B;padding:1px 7px;border-radius:3px;font-size:.65rem;font-weight:700}
.badge-seg{background:#FEF3C7;color:#92400E;padding:1px 7px;border-radius:3px;font-size:.65rem;font-weight:700}
.badge-cer{background:#D1FAE5;color:#065F46;padding:1px 7px;border-radius:3px;font-size:.65rem;font-weight:700}
.se-b{background:#1E3A8A;color:#fff;border-radius:3px;padding:1px 5px;font-size:.6rem;font-weight:700}
input[type=checkbox],input[type=radio]{accent-color:#1E3A8A}

/* ══════════════════════════════════════════════
   TUTORIAL — SPOTLIGHT SYSTEM
══════════════════════════════════════════════ */
#tut-spotlight{
  position:fixed;z-index:9997;pointer-events:none;
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(10,20,60,.85),
             0 0 0 3px #38BDF8,
             0 0 24px 6px rgba(56,189,248,.45);
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
#tut-card{
  position:fixed;z-index:9999;
  background:#fff;border-radius:16px;
  box-shadow:0 24px 64px rgba(0,0,0,.38);
  width:420px;max-width:calc(100vw - 24px);padding:0;overflow:hidden;
  max-height:85vh;overflow-y:auto;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.tut-card-head{
  background:linear-gradient(135deg,#1E3A8A,#0EA5E9);
  padding:18px 20px 14px;color:#fff;
}
.tut-card-head .tut-step-label{
  font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;opacity:.75;margin-bottom:4px;
}
.tut-card-head h3{font-size:1.05rem;font-weight:900;line-height:1.2;margin:0}
.tut-card-body{padding:16px 20px}
.tut-card-body p{font-size:.88rem;color:#334155;line-height:1.6;margin:0}
.tut-card-foot{
  padding:12px 20px 16px;display:flex;
  justify-content:space-between;align-items:center;
  border-top:1px solid #E2E8F0;
}
.tut-dots{display:flex;gap:5px}
.tut-dot{
  width:7px;height:7px;border-radius:50%;
  background:#CBD5E1;transition:all .2s;
}
.tut-dot.active{background:#1E3A8A;width:20px;border-radius:4px}
.tut-btn-nav{
  background:#1E3A8A;color:#fff;border:none;cursor:pointer;
  padding:8px 18px;border-radius:8px;font-size:.8rem;
  font-weight:700;transition:all .15s;display:flex;align-items:center;gap:5px;
}
.tut-btn-nav:hover{background:#0EA5E9;transform:translateY(-1px)}
.tut-btn-nav.sec{background:#fff;color:#1E3A8A;border:2px solid #1E3A8A}
.tut-btn-nav.sec:hover{background:#EFF6FF}
.tut-btn-skip{
  background:none;border:none;cursor:pointer;
  color:#94A3B8;font-size:.72rem;padding:4px 8px;
  border-radius:4px;transition:color .15s;font-weight:600;
}
.tut-btn-skip:hover{color:#EF4444}
.tut-illustration{
  font-size:3.5rem;text-align:center;
  padding:16px 0 8px;line-height:1;
}
#tut-backdrop{
  position:fixed;inset:0;z-index:9995;
  background:transparent;pointer-events:none;
}

/* ══════════════════════════════════════════════
   PANEL DE AYUDA CONTEXTUAL
══════════════════════════════════════════════ */
#help-panel{
  position:fixed;top:48px;right:0;
  width:300px;height:calc(100vh - 48px);
  background:#fff;z-index:7000;
  border-left:3px solid #1E3A8A;
  box-shadow:-6px 0 24px rgba(0,0,0,.13);
  transform:translateX(310px);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
#help-panel.open{transform:translateX(0)}
#help-panel-head{
  background:linear-gradient(135deg,#1E3A8A,#0EA5E9);
  padding:14px 16px;color:#fff;flex-shrink:0;
}
#help-panel-head h3{font-size:.9rem;font-weight:900;margin:0}
#help-panel-head p{font-size:.65rem;opacity:.75;margin:2px 0 0}
#help-panel-body{flex:1;overflow-y:auto;padding:14px 14px 20px}
.help-section{margin-bottom:14px}
.help-section h4{
  font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:#1E3A8A;
  border-bottom:1px solid #E2E8F0;padding-bottom:4px;margin-bottom:6px;
}
.help-section p,.help-section li{
  font-size:.8rem;color:#475569;line-height:1.55;
}
.help-section ul{padding-left:14px;margin:4px 0}
.help-tip{
  background:#FFF7ED;border:1px solid #FED7AA;
  border-radius:6px;padding:8px 10px;margin-top:8px;
  font-size:.75rem;color:#92400E;line-height:1.5;
}
.help-tip::before{content:'💡 ';font-style:normal}
#help-close-btn{
  display:flex;align-items:center;gap:4px;
  width:100%;padding:10px 16px;border:none;
  background:#F1F5F9;color:#64748B;cursor:pointer;
  font-size:.78rem;font-weight:700;
  border-top:1px solid #E2E8F0;flex-shrink:0;
  transition:background .15s;
}
#help-close-btn:hover{background:#E2E8F0}

/* ══════════════════════════════════════════════
   MODO SENCILLO
══════════════════════════════════════════════ */
body.modo-sencillo .oi{
  font-size:.95rem!important;
  padding:.42rem .6rem!important;
  min-height:38px;
}
body.modo-sencillo .ni{
  font-size:.88rem!important;padding:9px 12px!important;
}
body.modo-sencillo .nc{font-size:.7rem!important}
body.modo-sencillo .sh{font-size:.78rem!important}
body.modo-sencillo .kpi h3{font-size:2.4rem!important}
body.modo-sencillo button:not(.tut-btn-nav):not(.tut-btn-skip):not(#help-close-btn){
  min-height:38px!important;font-size:.82rem!important;
}
body.modo-sencillo label{font-size:.85rem!important}
body.modo-sencillo td,body.modo-sencillo th{font-size:.82rem!important}
body.modo-sencillo [class*="text-xs"]{font-size:.82rem!important}
body.modo-sencillo [class*="text-[9px]"],[class*="text-[10px]"]{font-size:.72rem!important}
body.modo-sencillo header h1{font-size:1rem!important}
/* Modo sencillo: ocultar módulos avanzados en sidebar */
body.modo-sencillo .ni-avanzado{display:none!important}

/* ══════════════════════════════════════════════
   WIZARD — FORMULARIO POR PASOS
══════════════════════════════════════════════ */
.wiz-bar{
  position:sticky;top:0;z-index:10;
  background:#fff;border-bottom:2px solid #E2E8F0;
  padding:10px 20px 10px;margin:-24px -24px 16px;
}
.wiz-steps-row{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin-bottom:8px;
}
.wiz-step-pill{
  display:flex;align-items:center;gap:0;
}
.wiz-step-num{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:900;
  background:#E2E8F0;color:#94A3B8;
  transition:all .25s;flex-shrink:0;
}
.wiz-step-num.done{background:#10B981;color:#fff}
.wiz-step-num.current{background:#1E3A8A;color:#fff;
  box-shadow:0 0 0 3px rgba(30,58,138,.2)}
.wiz-step-label-txt{
  font-size:.65rem;font-weight:700;color:#94A3B8;
  display:none;
}
.wiz-step-num.current + .wiz-step-label-txt{
  display:block;color:#1E3A8A;margin-left:6px;
}
.wiz-connector{
  width:32px;height:2px;background:#E2E8F0;
  flex-shrink:0;transition:background .3s;
}
.wiz-connector.done{background:#10B981}
.wiz-prog-bar{
  height:3px;background:#E2E8F0;border-radius:2px;overflow:hidden;
}
.wiz-prog-fill{
  height:100%;background:linear-gradient(90deg,#1E3A8A,#0EA5E9);
  border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1);
}
.wiz-group{display:none}
.wiz-group.active{display:block}
.wiz-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;padding-top:12px;border-top:1px solid #E2E8F0;
}
.wiz-hint{
  background:#EFF6FF;border:1px solid #BFDBFE;
  border-radius:8px;padding:8px 12px;
  font-size:.78rem;color:#1E40AF;margin-bottom:12px;
  display:flex;align-items:flex-start;gap:6px;
}
.wiz-hint-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
/* Botón replay en sidebar */
#btn-replay-tut{
  width:100%;text-align:left;background:transparent;border:none;
  color:#7DD3FC;font-size:.72rem;padding:6px 10px;cursor:pointer;
  display:flex;align-items:center;gap:6px;border-radius:5px;
  margin:2px 6px;transition:background .15s;
  font-weight:600;
}
#btn-replay-tut:hover{background:rgba(255,255,255,.1);color:#fff}