/* Transformación Digital › Capacidades › 01 Business Intelligence (docs/lib/bi-dashboard.cjs + td-bi.js).
   Panel: introduction in two columns (.sw-intro, same rules as 04 Desarrollo de Software in td-software.css), then the
   interactive board at the full width of the page container. Look of the approved design
   (dashboard_fuentes_actualizado.html): colors, borders, gradients, charts and selection states.
   The board adapts with container queries on its own width (1200 px on desktop, ~930–1000 on laptops, ~700 on tablets,
   ~350 on phones), not on the screen width. All classes use the bi- prefix; nothing global is touched. */
.cap-bi.cap-resource{width:100%;max-width:none;margin:40px 0 0}
/* The right column (description, concepts, descriptor) is taller than the headline: both start at the top. */
.sw-intro.bi-intro{align-items:start}
.bi-board{--bi-line:rgba(70,130,210,.22);--bi-line2:rgba(70,130,210,.12);--bi-text:#e8eef9;--bi-muted:#8798b4;--bi-dim:#5d6f8e;--bi-accent:#1ea7ff;--bi-accent2:#2bb4ff;--bi-violet:#8b5cf6;--bi-magenta:#d946ef;--bi-ok:#22c993;--bi-warn:#f5a524;--bi-crit:#f4476b;
  container:bi-board/inline-size;border:1px solid var(--bi-line);border-radius:14px;background:linear-gradient(180deg,#06112c,#050d22);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);color:var(--bi-text);font-family:Poppins,"Segoe UI",system-ui,sans-serif;text-align:left}
.bi-board p{margin:0}
.bi-hdr{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--bi-line)}
.bi-hdr svg{width:16px;height:16px;flex:none}
.bi-hdr-title{font-weight:500;font-size:15px}
.bi-body{display:grid;grid-template-columns:204px minmax(0,1fr)}
.bi-lab{font-size:10.5px;font-weight:600;letter-spacing:.14em;line-height:1.5;color:var(--bi-accent2);text-transform:uppercase}
/* 01 · Fuentes */
.bi-src{min-width:0;border-right:1px solid var(--bi-line);padding:22px 12px 18px 14px}
.bi-src>.bi-lab{margin-bottom:12px;padding-left:4px}
.bi-nav{display:flex;flex-direction:column}
.bi-s{position:relative;display:flex;align-items:center;gap:9px;width:100%;min-height:42px;margin:0;padding:9px 8px 9px 12px;border:0;border-bottom:1px solid var(--bi-line2);border-radius:6px;background:none;color:#c6d2e6;font:inherit;font-size:12.5px;line-height:1.35;text-align:left;cursor:pointer;transition:background .2s,color .2s}
.bi-s svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--bi-dim);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.bi-s:hover{background:rgba(30,167,255,.05)}
.bi-s.on{background:linear-gradient(90deg,rgba(30,167,255,.14),rgba(30,167,255,0));border-bottom-color:transparent;color:#fff;font-weight:500}
.bi-s.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--bi-accent),var(--bi-magenta))}
.bi-s.on svg{stroke:var(--bi-accent)}
.bi-s:focus-visible{outline:2px solid #00b0d1;outline-offset:-2px}
/* 02 · Experiencia */
.bi-exp{container:bi-exp/inline-size;min-width:0;padding:22px 20px 22px}
.bi-exp-content.is-arriving{animation:cap-arrive .32s ease-out}
.bi-th{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:10px 0 16px}
.bi-th-title{font-size:19px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--bi-text)}
.bi-th-sub{font-size:11.5px;line-height:1.5;color:var(--bi-muted);margin-top:3px}
.bi-bar{flex:none;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--bi-violet),var(--bi-magenta));margin-top:12px}
.bi-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.bi-k{container:bi-k/inline-size;position:relative;min-width:0;overflow:hidden;border:1px solid var(--bi-line);border-radius:10px;padding:12px 14px;background:rgba(10,28,64,.45)}
.bi-kl{font-size:10.5px;line-height:1.4;color:var(--bi-muted)}
.bi-kv{font-size:22px;font-weight:600;line-height:1.3;margin-top:4px;letter-spacing:-.01em;white-space:nowrap}
.bi-kv small{font-size:12px;color:var(--bi-muted);font-weight:400;margin-left:3px}
.bi-kd{font-size:10.5px;line-height:1.4;margin-top:3px}
.bi-sp{position:absolute;right:14px;top:34px;width:64px;height:24px}
.bi-up{color:var(--bi-ok)}.bi-dn{color:var(--bi-crit)}.bi-nt{color:var(--bi-muted)}.bi-wr{color:var(--bi-warn)}
.bi-panel{min-width:0;border:1px solid var(--bi-line);border-radius:10px;padding:14px 16px;background:rgba(8,22,52,.4)}
.bi-ph{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px}
.bi-ph .bi-lab{font-size:10px}
.bi-lg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:10.5px;color:var(--bi-muted)}
.bi-lg span{display:flex;align-items:center;gap:6px}
.bi-lg i{width:10px;height:3px;border-radius:2px;display:inline-block}
.bi-lg i.bi-d{background:none;border-top:2px dashed currentColor;height:0}
.bi-lg i.bi-b{height:8px;width:8px;border-radius:2px}
.bi-plot{display:block;max-width:100%;overflow:visible}
.bi-board svg text{font-family:Poppins,"Segoe UI",sans-serif}
/* Main chart + the two side panels (bars/funnel and alerts). */
.bi-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.bi-grid>.bi-panel:not(.bi-main){container:bi-panel/inline-size}
.bi-hb{display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:11px;line-height:1.35;margin:7px 0;color:#c6d2e6}
.bi-tr{height:7px;border-radius:4px;background:rgba(120,160,220,.12);overflow:hidden}
.bi-fl{height:100%;border-radius:4px}
.bi-v{text-align:right;color:var(--bi-text);font-weight:500;white-space:nowrap}
.bi-foot{font-size:10.5px;line-height:1.5;color:var(--bi-dim);margin-top:10px!important}
.bi-foot b{color:var(--bi-text);font-weight:600}.bi-foot b.bi-wr{color:var(--bi-warn)}
.bi-al{list-style:none;margin:0;padding:0}
.bi-al li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:8px;align-items:start;font-size:11.2px;padding:8px 0;border-bottom:1px solid var(--bi-line2);color:#cfd9ea;line-height:1.4}
.bi-al li:last-child{border-bottom:none}
.bi-al li i{width:8px;height:8px;border-radius:50%;margin-top:5px}
.bi-al li em{font-style:normal;color:var(--bi-dim);font-size:10px;white-space:nowrap}
.bi-fn{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:4px}
.bi-fn div{height:22px;min-width:max-content;border-radius:5px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;font-size:10.5px;color:#fff}
.bi-net{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center}
.bi-donut{text-align:center}.bi-donut svg{display:inline-block}
.bi-tbl-wrap{min-width:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#275575 transparent}
.bi-tbl{width:100%;border-collapse:collapse;font-size:11px}
.bi-tbl th{font-weight:500;color:var(--bi-dim);text-align:left;font-size:10px;padding:0 6px 6px;border-bottom:1px solid var(--bi-line);vertical-align:bottom}
.bi-tbl td{padding:6px;border-bottom:1px solid var(--bi-line2);color:#cfd9ea;white-space:nowrap}
/* Type and site may wrap to a second line when the panel is narrow; ids, states and figures never do. */
.bi-tbl td:nth-child(2),.bi-tbl td:nth-child(3){white-space:normal}
.bi-tbl .r{text-align:right}
.bi-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:500}
.bi-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bi-p-ok{color:var(--bi-ok);background:rgba(34,201,147,.12)}.bi-p-wr{color:var(--bi-warn);background:rgba(245,165,36,.12)}.bi-p-cr{color:var(--bi-crit);background:rgba(244,71,107,.13)}

/* KPI card too narrow for value + trend line side by side: the trend line goes below the value. */
@container bi-k (max-width:169px){.bi-kv{font-size:19px}.bi-sp{position:static;display:block;width:100%;height:22px;margin-top:8px}}
/* Medium experience area: KPIs in one row; main chart on top, the two panels below side by side. */
@container bi-exp (min-width:440px){.bi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bi-grid>.bi-main{grid-column:1/-1}.bi-grid>.bi-panel:not(.bi-main){min-height:186px}}
@container bi-exp (min-width:640px){.bi-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
@container bi-exp (min-width:700px){.bi-net{grid-template-columns:180px minmax(0,1fr);gap:20px}}
/* Wide experience area (desktop): main chart and both panels in one row, as in the approved layout; equipos-red keeps
   its device table at full width. Larger type for reading at this size. */
@container bi-exp (min-width:860px){
  .bi-grid:not(.is-wide-main){grid-template-columns:minmax(0,2.15fr) minmax(0,1fr) minmax(0,1fr)}
  .bi-grid:not(.is-wide-main)>.bi-main{grid-column:auto}
  .bi-th{align-items:center;margin:8px 0 18px}
  .bi-th>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
  .bi-th-title{font-size:22px}
  .bi-th-sub{font-size:12px;margin:0}
  .bi-bar{margin-top:0}
  .bi-kpis{gap:14px;margin-bottom:14px}
  .bi-k{padding:14px 16px}
  .bi-kl{font-size:12px}
  .bi-kv{font-size:26px}.bi-kv small{font-size:14px}
  .bi-kd{font-size:11.5px}
  .bi-sp{right:16px;top:38px;width:64px;height:28px}
  .bi-panel{padding:16px 18px}
  .bi-ph .bi-lab{font-size:10.5px}
  .bi-lg{font-size:11.5px}
  .bi-hb{font-size:12px}
  .bi-al li{font-size:12px}.bi-al li em{font-size:11px}
  .bi-fn div{height:24px;font-size:11.5px}
  .bi-foot{font-size:11.5px}
  .bi-tbl{font-size:12px}.bi-tbl th{font-size:11px}.bi-pill{font-size:11px}
}
/* Narrow side panel: each bar goes under its label at full width, so it stays readable (label and value above). */
@container bi-panel (max-width:300px){.bi-hb{grid-template-columns:minmax(0,1fr) auto;row-gap:5px;margin:6px 0 10px}.bi-hb .bi-tr{grid-column:1/-1;grid-row:2}}
/* Device table under its donut: tighter cells so its six columns fit the panel. */
@container bi-exp (max-width:699px){.bi-tbl{font-size:10.5px}.bi-tbl th,.bi-tbl td{padding-left:4px;padding-right:4px}.bi-tbl th:first-child,.bi-tbl td:first-child{padding-left:0}.bi-tbl th:last-child,.bi-tbl td:last-child{padding-right:0}}
@container bi-exp (max-width:420px){.bi-hb{grid-template-columns:minmax(0,96px) minmax(0,1fr) auto;gap:8px}.bi-th-title{font-size:17px}}
/* Desktop board: wider Fuentes column (names on one line), roomier header and experience area. */
@container bi-board (min-width:1000px){
  .bi-hdr{padding:20px 26px}.bi-hdr svg{width:18px;height:18px}.bi-hdr-title{font-size:17px}
  .bi-body{grid-template-columns:228px minmax(0,1fr)}
  .bi-src{padding:24px 14px 22px 18px}
  .bi-s{min-height:44px;font-size:13.5px;padding:10px 10px 10px 14px}
  .bi-exp{padding:24px 26px 26px}
}
/* Tablet and phone: sources above the dashboard as a list in columns — all nine visible, same selection state — so the
   dashboard keeps the full width. Three columns when they fit, two on phones. */
@container bi-board (max-width:759px){
  .bi-hdr{padding:14px 16px}
  .bi-body{grid-template-columns:minmax(0,1fr)}
  .bi-src{border-right:0;border-bottom:1px solid var(--bi-line);padding:16px 12px 12px}
  .bi-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px}
  .bi-s{min-height:44px;font-size:12px;padding:8px 6px 8px 12px}
  .bi-exp{padding:16px 14px 16px}
}
@container bi-board (min-width:480px) and (max-width:759px){.bi-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container bi-board (max-width:479px){.bi-s{font-size:11.5px}}
@media (max-width:600px){.cap-bi.cap-resource{margin-top:28px}}