/* ===========================================================================
   overdata-dashboards · dashboard.css
   Mockups de tableros con "look" de Power BI, en HTML/CSS (nítidos, responsive).
   Identidad OverData (azul) + paleta categórica tipo BI. Autocontenido:
   define sus propios tokens, no depende de landing.css.
   Uso: <div class="pbi"> ... </div>  (ver SKILL.md y examples/).
   =========================================================================== */
.pbi{
  --pbi-bg:#eef1f6; --pbi-card:#ffffff; --pbi-line:#e2e7ef; --pbi-ink:#1f2733;
  --pbi-mut:#6a7686; --pbi-blue:#0a74c4; --pbi-blue2:#005ca8;
  --c1:#118dff; --c2:#0a74c4; --c3:#3aa6b9; --c4:#5aa454; --c5:#e0a21a;
  --c6:#e4682f; --c7:#c0392b; --c8:#6b4ec2; --c9:#9aa6b6;
  background:var(--pbi-bg); border:1px solid var(--pbi-line); border-radius:14px;
  overflow:hidden; font-family:'Segoe UI','Segoe UI Web (West European)',-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--pbi-ink); box-shadow:0 26px 60px -34px rgba(1,69,125,.5);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum" 1;
}
.pbi *{box-sizing:border-box}

/* --- barra superior: título + logo + slicers --- */
.pbi__top{display:flex;align-items:center;gap:14px;padding:12px 16px;background:linear-gradient(90deg,var(--pbi-blue2),var(--pbi-blue));color:#fff;flex-wrap:wrap}
.pbi__top .ttl{font-weight:700;font-size:1rem;line-height:1.1;letter-spacing:.2px}
.pbi__top .sub{font-size:.72rem;opacity:.85}
.pbi__top .sp{margin-left:auto}
.pbi__slicers{display:flex;gap:8px;flex-wrap:wrap}
.slicer{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;background:rgba(255,255,255,.16);color:#fff;border-radius:6px;padding:.32em .7em;white-space:nowrap}
.slicer.on{background:#fff;color:var(--pbi-blue2)}
.slicer::after{content:"▾";font-size:.7em;opacity:.8}
.slicer.nofx::after{content:""}

/* --- grilla de visuales (12 columnas) --- */
.pbi__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;padding:12px}
.viz{grid-column:span 4;background:var(--pbi-card);border:1px solid var(--pbi-line);border-radius:8px;padding:12px 13px;min-width:0;box-shadow:0 1px 2px rgba(16,32,60,.05)}
.viz--2{grid-column:span 2}.viz--3{grid-column:span 3}.viz--4{grid-column:span 4}
.viz--5{grid-column:span 5}.viz--6{grid-column:span 6}.viz--7{grid-column:span 7}
.viz--8{grid-column:span 8}.viz--12{grid-column:span 12}
.viz__t{font-size:.82rem;font-weight:600;color:#3a4553;letter-spacing:0;margin:0 0 10px}

/* --- tarjeta KPI --- */
.kpi{display:flex;flex-direction:column;justify-content:center}
.kpi .v{font-size:1.9rem;font-weight:700;line-height:1;color:var(--pbi-ink);letter-spacing:-.01em}
.kpi .l{font-size:.74rem;color:var(--pbi-mut);margin-top:5px;font-weight:600}
.kpi .d{font-size:.72rem;margin-top:4px;font-weight:700}
.kpi .d.up{color:#3f9c4a}.kpi .d.down{color:#c0392b}
.kpi--accent{border-top:3px solid var(--c1)}

/* --- barras verticales --- */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.bars .cv{font-size:.68rem;font-weight:700;margin-bottom:5px;color:var(--pbi-ink)}
.bars .cb{width:100%;border-radius:5px 5px 0 0;background:var(--c1)}
.bars .cl{font-size:.64rem;color:var(--pbi-mut);margin-top:6px;text-align:center;line-height:1.15}

/* --- barras horizontales (ranking) --- */
.hbars{display:grid;gap:9px}
.hbars .r{display:grid;grid-template-columns:96px 1fr auto;gap:9px;align-items:center;font-size:.76rem}
.hbars .n{color:var(--pbi-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbars .t{height:11px;background:#eaf0f8;border-radius:6px;overflow:hidden}
.hbars .t i{display:block;height:100%;background:linear-gradient(90deg,var(--c1),var(--c2));border-radius:6px}
.hbars .v{color:var(--pbi-mut);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}

/* --- dona (SVG via clase utilitaria) + leyenda --- */
.donutwrap{display:flex;align-items:center;gap:16px}
.donut{flex:none}
.legend{display:grid;gap:7px;font-size:.74rem}
.legend span{display:inline-flex;align-items:center;gap:7px;color:var(--pbi-ink)}
.legend i{width:11px;height:11px;border-radius:3px;flex:none}

/* --- línea / sparkline (SVG) --- */
.linechart{width:100%;height:auto;display:block}

/* --- tabla / matriz --- */
.pbi-table{overflow-x:auto}
table.pbt{width:100%;border-collapse:collapse;font-size:.76rem;min-width:420px}
.pbt th{text-align:right;color:var(--pbi-mut);font-weight:700;font-size:.66rem;text-transform:uppercase;padding:7px 9px;border-bottom:1px solid var(--pbi-line);white-space:nowrap}
.pbt th:first-child,.pbt td:first-child{text-align:left}
.pbt td{text-align:right;padding:7px 9px;border-bottom:1px solid #f0f3f8;font-variant-numeric:tabular-nums}
.pbt tbody tr:nth-child(even){background:#f7f9fc}
.pbt tbody tr:hover{background:#eef4fb}
.pbt td.k{font-weight:700;color:var(--pbi-ink)}
.pbt .warn{color:#b9770e}.pbt .bad{color:#c0392b;font-weight:700}
.pbt tr.tot td{font-weight:800;border-top:2px solid var(--pbi-line);background:#eef2f7}

/* --- chip de estado / badge --- */
.pbb{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:.72rem;padding:.14em .5em;border-radius:5px}
.pbb.g{color:#1f8a4c;background:#e7f6ec}.pbb.a{color:#b9770e;background:#fdf3e2}.pbb.r{color:#c0392b;background:#fdecea}

/* --- responsive --- */
@media(max-width:820px){
  .pbi__grid{grid-template-columns:repeat(6,1fr)}
  .viz,.viz--3,.viz--4,.viz--5,.viz--7,.viz--8{grid-column:span 6}
  .viz--2{grid-column:span 3}
}
@media(max-width:520px){
  .pbi__grid{grid-template-columns:1fr}
  .viz,.viz--2,.viz--3,.viz--4,.viz--5,.viz--6,.viz--7,.viz--8,.viz--12{grid-column:span 1}
}