/* Next Gen Dashboards — steel theme (Construction). Add class="ngd-steel" to <html> and load after ngd.css.
   Zoe (18-oct): "un estilo de gray, como de steel". The chrome is steel gray (header, board, cards, KPI tiles);
   the data accent is a steel blue, because a pure gray fails the palette's chroma floor and would read as the
   gray we use for last year / context. Validated: light #336fa8, dark #4f8bc6. */

.ngd-steel .ngd-main, .ngd-steel .ngd-timebar {
  --accent: #336fa8; --accent-soft: rgba(51, 111, 168, .11); --accent-soft-2: rgba(51, 111, 168, .2);
  --seq-100: #e3ebf3; --seq-200: #c3d3e3; --seq-300: #93afcb; --seq-400: #5f8ab4; --seq-500: #336fa8; --seq-600: #24527f; --seq-700: #173756;
  --div-pos: #336fa8; --spark-line: #4c6278; --spark-fill: rgba(76, 98, 120, .16); --series-1: #336fa8;
}
@media (prefers-color-scheme: dark) {
  :root.ngd-steel:not([data-theme="light"]) .ngd-main, :root.ngd-steel:not([data-theme="light"]) .ngd-timebar {
    --accent: #4f8bc6; --accent-soft: rgba(79, 139, 198, .18); --accent-soft-2: rgba(79, 139, 198, .3);
    --seq-100: #141c25; --seq-200: #1f2d3c; --seq-300: #2c4258; --seq-400: #3d6185; --seq-500: #4f8bc6; --seq-600: #8bb3da; --seq-700: #c7dbee;
    --div-pos: #4f8bc6; --spark-line: #8fa3b6; --spark-fill: rgba(143, 163, 182, .2); --series-1: #4f8bc6;
  }
}
:root.ngd-steel[data-theme="dark"] .ngd-main, :root.ngd-steel[data-theme="dark"] .ngd-timebar {
  --accent: #4f8bc6; --accent-soft: rgba(79, 139, 198, .18); --accent-soft-2: rgba(79, 139, 198, .3);
  --seq-100: #141c25; --seq-200: #1f2d3c; --seq-300: #2c4258; --seq-400: #3d6185; --seq-500: #4f8bc6; --seq-600: #8bb3da; --seq-700: #c7dbee;
  --div-pos: #4f8bc6; --spark-line: #8fa3b6; --spark-fill: rgba(143, 163, 182, .2); --series-1: #4f8bc6;
}

/* board: brushed-steel gray */
.ngd-steel .ngd-content {
  background: radial-gradient(60% 45% at 85% 12%, rgba(255, 255, 255, .65) 0%, transparent 70%),
    linear-gradient(180deg, #e3e7eb 0%, #eef1f4 55%, #f4f6f8 100%);
}
@media (prefers-color-scheme: dark) {
  :root.ngd-steel:not([data-theme="light"]) .ngd-content { background: radial-gradient(60% 45% at 85% 12%, rgba(143, 163, 182, .1) 0%, transparent 70%), linear-gradient(180deg, #111418 0%, #0d1013 100%); }
}
:root.ngd-steel[data-theme="dark"] .ngd-content { background: radial-gradient(60% 45% at 85% 12%, rgba(143, 163, 182, .1) 0%, transparent 70%), linear-gradient(180deg, #111418 0%, #0d1013 100%); }
.ngd-steel .ngd-main .ngd-card, .ngd-steel .ngd-main .ngd-hero { border-color: rgba(76, 98, 120, .2); box-shadow: 0 6px 22px rgba(30, 40, 52, .07); }
.ngd-steel .ngd-card--domain { border-top-color: #4c6278; }

/* header: graphite → steel */
.ngd-steel .ngd-head {
  background: radial-gradient(60% 150% at 92% -20%, rgba(220, 230, 240, .28) 0%, transparent 60%), linear-gradient(110deg, #1f262e 0%, #37434f 55%, #56677a 100%);
  box-shadow: 0 10px 30px rgba(20, 26, 34, .25);
}
.ngd-steel .ngd-head__blue .ngd-pick, .ngd-steel .ngd-head__blue .ngd-btn, .ngd-steel .ngd-head__blue .ngd-chip { background: rgba(10, 14, 18, .35); border-color: rgba(220, 230, 240, .22); }
.ngd-steel .ngd-head .ngd-tab[aria-selected="true"] { border-bottom-color: #c9d4de; }
.ngd-steel .ngd-head .ngd-timebar { background: var(--timebar-bg, linear-gradient(90deg, #f7f8fa 0%, #e9edf1 100%)); }
.ngd-steel .ngd-head__sector svg { background: rgba(220, 230, 240, .16); }

/* KPI tiles: steel family (white text ≥ 3:1 on every stop) */
.ngd-steel .ngd-kpis > .ngd-kpi { box-shadow: 0 8px 22px rgba(20, 26, 34, .16); }
.ngd-steel .ngd-kpis > .ngd-kpi:nth-child(5n+1) { background: linear-gradient(135deg, #2b3540 0%, #4c5c6c 100%); }
.ngd-steel .ngd-kpis > .ngd-kpi:nth-child(5n+2) { background: linear-gradient(135deg, #24476b 0%, #336fa8 100%); }
.ngd-steel .ngd-kpis > .ngd-kpi:nth-child(5n+3) { background: linear-gradient(135deg, #3b4652 0%, #5f6f80 100%); }
.ngd-steel .ngd-kpis > .ngd-kpi:nth-child(5n+4) { background: linear-gradient(135deg, #34404c 0%, #536779 100%); }
.ngd-steel .ngd-kpis > .ngd-kpi:nth-child(5n+5) { background: linear-gradient(135deg, #1f2a35 0%, #3d5266 100%); }
.ngd-steel .ngd-ctx button:hover, .ngd-steel .ngd-ctx button:focus-visible { background: rgba(51, 111, 168, .12); color: #24527f; }