/* ===========================================================================
   Business Intelligence — panel de control de cuenta
   Los estilos viven dentro de .bi-wrap para no pisar los del resto del sistema
   (el sidebar, las tarjetas y las tablas de los demás módulos son otra cosa).
   =========================================================================== */
#bi-app .bi-wrap {
  --plane:var(--navy); --surface:var(--navy-light); --ink:var(--white); --ink2:var(--g300);
  --muted:var(--g500); --grid:var(--navy-mid); --base:#2b4166; --ring:var(--navy-mid);
  --s1:var(--orange); --s2:#38bdf8; --s3:#22c55e; --chip:var(--navy-mid); --chipOn:var(--orange);
  display:flex; flex-direction:column; gap:18px; font-size:14px; line-height:1.5; color:var(--ink);
}
#bi-app .bi-wrap h1 { font-size:25px; font-weight:700; letter-spacing:-.015em; margin:0; }
#bi-app .bi-wrap h2 { font-size:15px; font-weight:600; margin:0; }
#bi-app .bi-wrap .eyebrow { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600; }
#bi-app .bi-wrap .sub { font-size:12.5px; color:var(--muted); margin-top:3px; }
#bi-app .bi-wrap .card { background:var(--surface); border:1px solid var(--ring); border-radius:10px; padding:18px 20px; }
#bi-app .bi-wrap .bi-head { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:flex-end; }
#bi-app .bi-wrap .stamp { font-size:12px; color:var(--ink2); text-align:right; }
#bi-app .bi-wrap .stamp b { color:var(--ink); }

/* Pestañas del panel (no confundir con el sidebar del módulo) */
#bi-app .bi-tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--ring); }
#bi-app .bi-tabs button { font:inherit; font-size:13.5px; font-weight:500; padding:10px 16px; border:0;
  background:transparent; color:var(--ink2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
#bi-app .bi-tabs button:hover { color:var(--ink); }
#bi-app .bi-tabs button[aria-selected="true"] { color:var(--s1); border-bottom-color:var(--s1); font-weight:600; }
#bi-app .bi-tabs button:focus-visible { outline:2px solid var(--s1); outline-offset:-2px; }

#bi-app .bi-wrap .filters { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:12px 16px; }
#bi-app .bi-wrap .flabel { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-right:4px; }
#bi-app .bi-wrap .chip { font:inherit; font-size:13px; font-weight:500; padding:6px 13px; border-radius:999px;
  cursor:pointer; background:var(--chip); color:var(--ink2); border:1px solid var(--ring); }
#bi-app .bi-wrap .chip:hover { border-color:var(--base); color:var(--ink); }
#bi-app .bi-wrap .chip[aria-pressed="true"] { background:var(--chipOn); border-color:var(--chipOn); color:#fff; }
#bi-app .bi-wrap .chip:focus-visible { outline:2px solid var(--s1); outline-offset:2px; }

#bi-app .bi-wrap .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; }
#bi-app .bi-wrap .kpi { background:var(--surface); border:1px solid var(--ring); border-radius:10px; padding:14px 16px; }
#bi-app .bi-wrap .kpi .l { font-size:12px; color:var(--ink2); margin-bottom:5px; }
#bi-app .bi-wrap .kpi .v { font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-family:'Outfit',sans-serif; }
#bi-app .bi-wrap .kpi .s { font-size:11.5px; color:var(--muted); margin-top:5px; }

#bi-app .bi-wrap .two { display:grid; grid-template-columns:1.5fr 1fr; gap:14px; }
@media (max-width:1100px) { #bi-app .bi-wrap .two { grid-template-columns:1fr; } }
#bi-app .bi-wrap .chead { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; }
#bi-app .bi-wrap .toggle { display:flex; gap:4px; background:var(--plane); border:1px solid var(--ring); border-radius:8px; padding:3px; }
#bi-app .bi-wrap .toggle button { font:inherit; font-size:12.5px; font-weight:500; padding:5px 11px; border:0;
  border-radius:6px; background:transparent; color:var(--ink2); cursor:pointer; }
#bi-app .bi-wrap .toggle button[aria-pressed="true"] { background:var(--navy-hover); color:var(--ink); }

#bi-app .bi-wrap svg { display:block; width:100%; height:auto; overflow:visible; margin-top:12px; }
#bi-app .bi-wrap .tick { font-size:11px; fill:var(--muted); font-variant-numeric:tabular-nums; }
#bi-app .bi-wrap .axlbl { font-size:12px; fill:var(--ink2); }
#bi-app .bi-wrap .vlbl { font-size:11.5px; font-weight:600; fill:var(--ink); font-variant-numeric:tabular-nums; }
#bi-app .bi-wrap .grid line { stroke:var(--grid); stroke-width:1; }
#bi-app .bi-wrap .baseline { stroke:var(--base); stroke-width:1; }
#bi-app .bi-wrap .hit { fill:transparent; cursor:pointer; }
#bi-app .bi-wrap .legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink2); margin-top:12px; }
#bi-app .bi-wrap .legend span { display:flex; align-items:center; }
#bi-app .bi-wrap .dot { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; }

#bi-app .bi-wrap .tbox { overflow-x:auto; margin-top:12px; border-top:1px solid var(--ring); max-height:620px; }
#bi-app .bi-wrap table { border-collapse:collapse; width:100%; min-width:820px; font-size:13px; }
#bi-app .bi-wrap th { text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:10px; border-bottom:1px solid var(--ring); white-space:nowrap; cursor:pointer;
  user-select:none; position:sticky; top:0; background:var(--surface); z-index:1; }
#bi-app .bi-wrap th:hover { color:var(--ink); }
#bi-app .bi-wrap th .ar { opacity:.35; font-size:9px; margin-left:3px; }
#bi-app .bi-wrap th[aria-sort] .ar { opacity:1; color:var(--s1); }
#bi-app .bi-wrap td { padding:8px 10px; border-bottom:1px solid var(--ring); font-variant-numeric:tabular-nums; white-space:nowrap; }
#bi-app .bi-wrap td.num, #bi-app .bi-wrap th.num { text-align:right; }
#bi-app .bi-wrap td.de { font-size:11.5px; color:var(--ink2); }

#bi-app .bi-wrap .bi-bar { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  background:var(--surface); border:1px solid var(--ring); border-radius:10px; padding:11px 16px; }
#bi-app .bi-wrap .bi-bar label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
#bi-app .bi-wrap .bi-bar select { font:inherit; font-size:13.5px; font-weight:500; color:var(--ink); background:var(--plane);
  border:1px solid var(--ring); border-radius:8px; padding:6px 11px; cursor:pointer; }
#bi-app .bi-wrap .bi-bar .grp { display:flex; align-items:center; gap:9px; }
#bi-app .bi-wrap .bi-foot { font-size:12px; color:var(--muted); border-top:1px solid var(--ring); padding-top:14px; line-height:1.6; }
#bi-app .bi-wrap [hidden] { display:none !important; }
#bi-app .bi-wrap .bi-aviso { border-radius:10px; padding:14px 16px; font-size:13px; border:1px solid var(--ring); background:var(--surface); }
#bi-app .bi-wrap .bi-aviso.err { border-color:var(--red); color:#fca5a5; }
#bi-app .bi-wrap .bi-aviso.ok { border-color:var(--green); color:#86efac; }
#bi-app .bi-wrap .bi-drop { border:1px dashed var(--base); border-radius:10px; padding:18px; text-align:center; color:var(--ink2); font-size:13px; }
#bi-app .bi-wrap .bi-drop.listo { border-color:var(--green); color:#86efac; }
#bi-app .bi-wrap .bi-campos { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
#bi-app .bi-wrap .bi-campos .label { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:6px; }
#bi-app .bi-wrap .bi-campos input { width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--plane);
  border:1px solid var(--ring); border-radius:8px; padding:10px 12px; }
#bi-app .bi-wrap .bi-campos input:focus { outline:none; border-color:var(--s1); }
#bi-app .bi-wrap pre.bi-fmt { background:var(--plane); border:1px solid var(--ring); border-radius:8px; padding:12px 14px;
  font-size:12px; color:var(--ink2); overflow-x:auto; margin-top:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* La ayuda flotante de las gráficas cuelga del body, fuera de .bi-wrap */
.bi-tip { position:fixed; pointer-events:none; opacity:0; transition:opacity .1s; z-index:9999;
  background:var(--navy-light); border:1px solid var(--navy-mid); border-radius:8px; padding:9px 12px;
  box-shadow:0 6px 20px rgba(0,0,0,.45); font-size:12.5px; max-width:250px; color:var(--white);
  font-family:'DM Sans',sans-serif; }
.bi-tip b { display:block; font-size:13px; margin-bottom:3px; }
.bi-tip .tv { font-variant-numeric:tabular-nums; font-weight:700; font-size:15px; }
.bi-tip .tm { color:var(--g500); font-size:11.5px; margin-top:2px; font-variant-numeric:tabular-nums; }

/* Candado del módulo: la contraseña propia del panel */
#bi-app .bi-wrap .bi-candado { max-width:440px; margin:8vh auto 0; background:var(--surface); border:1px solid var(--ring);
  border-radius:12px; padding:32px 30px; text-align:center; }
#bi-app .bi-wrap .bi-candado-icono { width:52px; height:52px; margin:0 auto 18px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; background:rgba(232,120,58,0.14); color:var(--s1); }
#bi-app .bi-wrap .bi-candado h1 { font-size:20px; margin-bottom:8px; }
#bi-app .bi-wrap .bi-candado .sub { margin:0 auto; max-width:38ch; }
#bi-app .bi-wrap .bi-candado-campos { display:flex; flex-direction:column; gap:10px; margin:20px 0 16px; }
#bi-app .bi-wrap .bi-candado input { width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--plane);
  border:1px solid var(--ring); border-radius:8px; padding:11px 13px; text-align:center; letter-spacing:.06em; }
#bi-app .bi-wrap .bi-candado input:focus { outline:none; border-color:var(--s1); }
#bi-app .bi-wrap .bi-candado .btn { width:100%; }