/* ============================================================
   Wero MX — ProjeX / Dev.Studio — Dashboard ejecutivo
   Scopeado a .dash · Tema oscuro (default) + claro (.dash.light)
   Paleta XY Ventures: azul #1565C0 · verde #7CB342
   ============================================================ */
.dash {
  --xy-blue: #1565C0; --xy-blue-2: #1E88E5; --xy-green: #7CB342; --xy-green-2: #9CCC65;
  --c-violet: #7C5CFC; --c-amber: #F5A623; --c-cyan: #22B8CF; --c-pink: #EC4899;
  --bg: transparent; --surface: var(--xy-bg-panel,#252526); --surface-2: var(--xy-bg-elevated,#2d2d30);
  --stroke: var(--xy-border-dark,#3f3f46); --stroke-2: var(--xy-border-dark,#3f3f46);
  --txt: var(--xy-text-dark,#e1e1e1); --txt-soft: var(--xy-text-dark-muted,#969696); --txt-mute: var(--xy-text-dark-muted,#969696);
  --shadow: 0 18px 40px -18px rgba(0,0,0,.65); --shadow-sm: 0 8px 22px -12px rgba(0,0,0,.55);
  --glass-blur: blur(14px) saturate(140%);
  position: relative; width: 100%; min-height: 100%;
  padding: 26px clamp(16px, 3vw, 34px) 40px; box-sizing: border-box;
  color: var(--txt); font-family: "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background: radial-gradient(1100px 540px at 12% -8%, rgba(21,101,192,.20), transparent 60%),
              radial-gradient(900px 520px at 92% 4%, rgba(124,179,66,.14), transparent 60%), var(--bg);
  -webkit-font-smoothing: antialiased;
}
.dash.light, .xy-desktop[data-xy-theme="light"] .dash {
  --surface: var(--xy-bg-light-0,#fff); --surface-2: var(--xy-bg-light-2,#ececec);
  --stroke: var(--xy-border-light,#e0e0e0); --stroke-2: var(--xy-border-light,#e0e0e0);
  --txt: var(--xy-text-light,#1f1f1f); --txt-soft: var(--xy-text-light-muted,#6b6b6b); --txt-mute: var(--xy-text-light-muted,#6b6b6b);
  --shadow: 0 20px 44px -22px rgba(20,50,100,.20); --shadow-sm: 0 10px 26px -16px rgba(20,50,100,.16);
}
.dash *, .dash *::before, .dash *::after { box-sizing: border-box; }

.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.dash-greeting__hello { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-soft); }
.dash-greeting h1 { margin: 6px 0 4px; font-size: clamp(24px,3.2vw,34px); font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(92deg, var(--txt) 30%, var(--xy-blue-2) 75%, var(--xy-green-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dash-sub { font-weight: 700; } .dash-dot { -webkit-text-fill-color: var(--txt-mute); opacity: .6; }
.dash-greeting__meta { margin: 0; font-size: 13px; color: var(--txt-soft); display: flex; align-items: center; gap: 8px; }
.dash-sep { opacity: .5; } .dash-live { font-size: 8px; color: var(--xy-green); animation: dashPulse 1.8s ease-in-out infinite; }
@keyframes dashPulse { 0%,100%{opacity:.35} 50%{opacity:1} }
.dash-head__actions { display: flex; align-items: center; gap: 12px; }
.dash-chips { display: inline-flex; padding: 4px; gap: 2px; border-radius: 13px; background: var(--surface); border: 1px solid var(--stroke);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.dash-chip { border: 0; cursor: pointer; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--txt-soft);
  background: transparent; transition: color .18s, background .18s; }
.dash-chip:hover { color: var(--txt); }
.dash-chip.is-active { color: #fff; background: linear-gradient(135deg, var(--xy-blue), var(--xy-blue-2)); box-shadow: 0 6px 16px -6px rgba(21,101,192,.7); }
.dash-iconbtn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--surface); color: var(--txt-soft);
  cursor: pointer; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: transform .18s, color .18s, border-color .18s; }
.dash-iconbtn:hover { color: var(--txt); transform: rotate(45deg); border-color: var(--stroke-2); }

.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { position: relative; overflow: hidden; padding: 18px 18px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s; }
.kpi::before { content: ""; position: absolute; top: -40%; right: -30%; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent, var(--xy-blue)), transparent 68%); opacity: .22; pointer-events: none; transition: opacity .25s, transform .25s; }
.kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent, var(--xy-blue)), transparent); opacity: .55; }
.kpi:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--stroke-2); }
.kpi:hover::before { opacity: .34; transform: scale(1.12); }
.kpi--blue { --accent: var(--xy-blue-2); } .kpi--green { --accent: var(--xy-green); } .kpi--violet { --accent: var(--c-violet); }
.kpi--amber { --accent: var(--c-amber); } .kpi--cyan { --accent: var(--c-cyan); } .kpi--pink { --accent: var(--c-pink); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 17px; color: var(--accent, var(--xy-blue));
  background: color-mix(in srgb, var(--accent, var(--xy-blue)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent, var(--xy-blue)) 30%, transparent); }
.kpi__trend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.kpi__trend--up { color: var(--xy-green); background: color-mix(in srgb, var(--xy-green) 14%, transparent); }
.kpi__trend--down { color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 14%, transparent); }
.kpi__value { font-size: clamp(30px,4vw,40px); font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.kpi__label { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--txt-soft); }
.kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.kpi__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  color: var(--txt-soft); background: var(--surface-2); border: 1px solid var(--stroke); white-space: nowrap; }
.kpi__pill--money { color: var(--xy-green); border-color: color-mix(in srgb, var(--xy-green) 30%, transparent); }
.kpi__pill--alert { color: var(--c-amber); border-color: color-mix(in srgb, var(--c-amber) 30%, transparent); }
.kpi__pill--glow { color: #fff; background: linear-gradient(135deg, var(--c-pink), var(--c-violet)); border-color: transparent; box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--c-pink) 70%, transparent); }
.kpi__spark { flex: 1; max-width: 96px; height: 34px !important; }
.kpi--feature { background: linear-gradient(150deg, color-mix(in srgb, var(--c-pink) 12%, transparent), transparent 55%), var(--surface); }

.dash-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.dash-grid--charts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.panel--wide { grid-column: span 2; }
@media (max-width: 760px) { .panel--wide { grid-column: span 1; } }
.panel { padding: 20px 20px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--stroke); box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: border-color .22s, box-shadow .22s; }
.panel:hover { border-color: var(--stroke-2); box-shadow: var(--shadow); }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.panel__subtitle { margin: 3px 0 0; font-size: 12.5px; color: var(--txt-mute); }
.panel__legend { display: flex; gap: 14px; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--txt-soft); }
.lg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--lg-c, var(--xy-blue)); }
.lg--blue::before { background: var(--xy-blue-2); } .lg--green::before { background: var(--xy-green); }
.lg--cyan::before { background: var(--c-cyan); } .lg--pink::before { background: var(--c-pink); }
.panel__canvas { position: relative; height: 280px; }
.panel__canvas canvas { width: 100% !important; height: 100% !important; }
.panel__canvas--donut { height: 260px; display: grid; place-items: center; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center__num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.donut-center__lbl { font-size: 12px; color: var(--txt-mute); display: block; margin-top: 2px; }

.prio-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 18px; }
.prio { display: grid; grid-template-columns: 12px 78px 1fr 34px; align-items: center; gap: 12px; }
.prio__dot { width: 10px; height: 10px; border-radius: 50%; }
.prio__dot--crit { background: #EF4444; box-shadow: 0 0 0 4px rgba(239,68,68,.16); }
.prio__dot--high { background: var(--c-amber); box-shadow: 0 0 0 4px rgba(245,166,35,.16); }
.prio__dot--mid { background: var(--xy-blue-2); box-shadow: 0 0 0 4px rgba(30,136,229,.16); }
.prio__dot--low { background: var(--xy-green); box-shadow: 0 0 0 4px rgba(124,179,66,.16); }
.prio__name { font-size: 13px; font-weight: 600; color: var(--txt-soft); }
.prio__bar { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--stroke); overflow: hidden; }
.prio__bar i { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2,.7,.3,1); }
.prio:nth-child(1) .prio__bar i { background: linear-gradient(90deg,#EF4444,#F87171); }
.prio:nth-child(2) .prio__bar i { background: linear-gradient(90deg,#D97706,var(--c-amber)); }
.prio:nth-child(3) .prio__bar i { background: linear-gradient(90deg,var(--xy-blue),var(--xy-blue-2)); }
.prio:nth-child(4) .prio__bar i { background: linear-gradient(90deg,#558B2F,var(--xy-green)); }
.prio__val { font-size: 14px; font-weight: 700; text-align: right; }
.dash-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--stroke); font-size: 12.5px; color: var(--txt-mute); }
.dash-foot__ver { margin-left: auto; opacity: .85; }
.dash-foot .sipen-home-startup { color: var(--txt-soft); }
@media (prefers-reduced-motion: reduce) { .dash * { transition: none !important; animation: none !important; } }