/* Panel de control. Dominantes: violeta #3D22CF, degradado #653CF8 → #3D22CF e índigo #180A65 (medidos en el sitio de referencia);
   acentos corporativos del logo (azul #0450FA, turquesa #04ACAC) en gráficos e indicadores; fondos pastel suaves. */
:root, [data-theme="light"] {
  --ch-in: #0450FA; --ch-in-2: #6F9BFB; --ch-ai: #653CF8; --ch-human: #04ACAC; --ch-none: #E5484D; --ch-warn: #E3A008;
  --ch-muted: #9AA3BD; --ch-muted-2: #CBD1E2;
  --tint-blue: #E8EFFF; --tint-teal: #EDFBF9; --tint-violet: #EEEBFC; --tint-red: #FFF2F2; --tint-amber: #FAF8DF; --tint-green: #EDFBF9;
  --ink-blue: #0340C8; --ink-teal: #057A7A; --ink-violet: #3D22CF; --ink-red: #C22530; --ink-amber: #8A5A00; --ink-green: #057A7A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ch-in: #4F86FF; --ch-in-2: #86AAFF; --ch-ai: #9A7BFF; --ch-human: #2CCFCF; --ch-none: #FF7A80; --ch-warn: #F3C067; --ch-muted: #7C88A8; --ch-muted-2: #3A4766;
    --tint-blue: #172B55; --tint-teal: #0F3A3A; --tint-violet: #241C55; --tint-red: #431C1F; --tint-amber: #392A0F; --tint-green: #0F3A3A;
    --ink-blue: #8DB4FF; --ink-teal: #5EE0DA; --ink-violet: #B7A3FF; --ink-red: #FF8C8C; --ink-amber: #F3C067; --ink-green: #5EE0DA;
  }
}
[data-theme="dark"] {
  --ch-in: #4F86FF; --ch-in-2: #86AAFF; --ch-ai: #9A7BFF; --ch-human: #2CCFCF; --ch-none: #FF7A80; --ch-warn: #F3C067; --ch-muted: #7C88A8; --ch-muted-2: #3A4766;
  --tint-blue: #172B55; --tint-teal: #0F3A3A; --tint-violet: #241C55; --tint-red: #431C1F; --tint-amber: #392A0F; --tint-green: #0F3A3A;
  --ink-blue: #8DB4FF; --ink-teal: #5EE0DA; --ink-violet: #B7A3FF; --ink-red: #FF8C8C; --ink-amber: #F3C067; --ink-green: #5EE0DA;
}

.dash { display: flex; flex-direction: column; gap: var(--s-5); max-width: 1480px; margin: 0 auto; width: 100%; }

/* Cabecera */
.dhero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(900px 260px at 100% -40%, color-mix(in srgb, var(--dh-glow, #653CF8) 60%, transparent), transparent 60%), radial-gradient(600px 240px at 0% 130%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 60%), linear-gradient(135deg, var(--dh-from, #180A65) 0%, var(--dh-to, #3D22CF) 100%); box-shadow: var(--shadow-2); }
.dhero-kicker { margin: 0 0 4px; font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase; color: #C9BCFF; font-weight: 600; }
.dhero-title { margin: 0; font-size: 28px; line-height: 1.15; color: #fff !important; letter-spacing: -.02em; }
.dhero-sub { margin: 6px 0 0; color: #DAD2FA; font-size: var(--fs-base); }
.dhero-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); }
.dhero-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.chip-ok svg { color: #5EE0DA; } .chip-warn { background: rgba(227,160,8,.22); border-color: rgba(243,192,103,.5); } .chip-ai svg { color: #C2B1FF; }
.seg-group { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.seg { border: 0; background: transparent; color: #DCE6FF; height: 28px; padding: 0 14px; border-radius: var(--r-pill); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.seg:hover { color: #fff; } .seg.on { background: #fff; color: var(--dh-from, #180A65); }
.dhero-skel { height: 128px; background: var(--surface-3); box-shadow: none; }

/* Indicadores */
.dgroup { display: flex; flex-direction: column; gap: var(--s-2); }
.dgroup-title { margin: 0; font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3) !important; font-weight: 650; }
.dstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-3); }
.stat { padding: var(--s-4); display: flex; flex-direction: column; gap: 6px; min-width: 0; border-radius: var(--r-lg); transition: box-shadow .15s, transform .15s; }
.stat:hover { box-shadow: var(--shadow-2); }
.stat-top { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.stat-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; flex: none; background: var(--tint-violet); color: var(--ink-violet); }
.stat-blue .stat-ic { background: var(--tint-blue); color: var(--ink-blue); }
.stat-teal .stat-ic { background: var(--tint-teal); color: var(--ink-teal); } .stat-green .stat-ic { background: var(--tint-green); color: var(--ink-green); }
.stat-violet .stat-ic { background: var(--tint-violet); color: var(--ink-violet); } .stat-red .stat-ic { background: var(--tint-red); color: var(--ink-red); } .stat-amber .stat-ic { background: var(--tint-amber); color: var(--ink-amber); }
.stat-label { font-size: var(--fs-sm); color: var(--text-3); font-weight: 560; line-height: 1.25; }
.stat-value { font-size: 28px; font-weight: 720; letter-spacing: -.02em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value small { font-size: 14px; font-weight: 560; color: var(--text-3); letter-spacing: 0; }
.stat-sub { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.35; }
.stat-alert { box-shadow: inset 3px 0 0 var(--ch-none), var(--shadow-1); } .stat-alert .stat-value { color: var(--ink-red); }
.stat-amber.stat-alert { box-shadow: inset 3px 0 0 var(--ch-warn), var(--shadow-1); } .stat-amber.stat-alert .stat-value { color: var(--ink-amber); }

/* Tarjetas de análisis */
.dgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-3); }
.dc-8 { grid-column: span 8; } .dc-6 { grid-column: span 6; } .dc-4 { grid-column: span 4; }
.dcard { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); }
.dcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) 0; }
.dcard-title { margin: 0; font-size: var(--fs-md); font-weight: 680; letter-spacing: -.01em; }
.dcard-sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-3); }
.dcard-body { padding: var(--s-3) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; flex: 1; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .axis { fill: var(--text-3); font-size: 10.5px; font-family: var(--font); }
.donut-wrap { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.donut { width: 140px; height: 140px; } .donut-track { stroke: var(--surface-3); }
.donut-n { font-size: 24px; font-weight: 720; fill: var(--text); font-family: var(--font); } .donut-l { font-size: 9.5px; fill: var(--text-3); font-family: var(--font); }
.kv { display: flex; flex-direction: column; } .kv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.kv-row:last-child { border-bottom: 0; } .kv-l { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); min-width: 0; }
.kv-l i, .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; } .kv small { color: var(--text-3); font-weight: 500; }
.stackbar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; background: var(--surface-3); }
.stackbar span { min-width: 4px; }
.dsep { border-top: 1px solid var(--border); padding-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); } .dsub { font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; }
.row.wrap { flex-wrap: wrap; }
.dep { display: flex; flex-direction: column; gap: 5px; } .dep-head { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--text-2); }
.hbar-fill { background: linear-gradient(90deg, var(--dh-glow, #653CF8), var(--dh-to, #3D22CF)); }
.dtable th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.alist { display: flex; flex-direction: column; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 6px; margin: 0 -6px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.arow:last-child { border-bottom: 0; } .arow:hover { background: var(--surface-2); }
.arow-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .arow-main small { color: var(--text-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow-side { display: flex; align-items: center; gap: var(--s-2); flex: none; font-size: var(--fs-sm); }
.wait { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink-amber); } .wait-hot { color: var(--ink-red); }
.amore { padding: 8px 0 0; font-size: var(--fs-sm); } .dfoot { padding-top: var(--s-3); }
.dnote { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--tint-violet); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.dnote svg { flex: none; margin-top: 2px; color: var(--ink-violet); }
.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: dskel 1.4s linear infinite; border: 0; box-shadow: none; }
.stat.skel { height: 104px; }
@keyframes dskel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } .stat { transition: none; } }

@media (max-width: 1100px) { .dc-8, .dc-6, .dc-4 { grid-column: span 6; } .dc-8 { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .dgrid { grid-template-columns: minmax(0, 1fr); } .dc-8, .dc-6, .dc-4 { grid-column: 1 / -1; }
  .dhero { padding: var(--s-4); align-items: flex-start; } .dhero-side { align-items: flex-start; width: 100%; } .dhero-chips { justify-content: flex-start; }
  .dhero-title { font-size: 22px; } .dstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } .stat { padding: var(--s-3); } .stat-value { font-size: 22px; }
  .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .donut-wrap .kv { width: 100%; }
}
@media (max-width: 340px) { .dstats { grid-template-columns: minmax(0, 1fr); } }