/* ============================================================
   TRACEHOLD — Mundo Ejecutivo (Reporting)
   Aireado, colorido, KPIs grandes.
   Se activa con .world-exec en .kl-content
   ============================================================ */

.world-exec{padding:0 0 64px;}
.world-exec .exec-inner{padding:0 30px;max-width:1320px;margin:0 auto;}

.exec-hero{
  position:relative;overflow:hidden;
  padding:30px 30px 26px;
  background:
    radial-gradient(900px 360px at 88% -40%,rgba(var(--accent-rgb),.18),transparent 60%),
    radial-gradient(700px 320px at 8% 120%,rgba(36,56,97,.18),transparent 55%),
    linear-gradient(180deg,var(--surface),var(--surface-2));
  border-bottom:1px solid var(--border);
}
[data-theme="dark"] .exec-hero{
  background:
    radial-gradient(900px 360px at 88% -40%,rgba(var(--accent-rgb),.18),transparent 60%),
    radial-gradient(700px 320px at 8% 120%,rgba(36,56,97,.35),transparent 55%),
    linear-gradient(180deg,#0d1830,var(--surface-2));
}
.exec-hero-inner{max-width:1320px;margin:0 auto;position:relative;z-index:1;}
.exec-hero .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.exec-hero .eyebrow .tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);}
.exec-hero h1{font-size:var(--fs-4xl);letter-spacing:-.03em;}
.exec-hero .sub{margin-top:8px;font-size:var(--fs-lg);color:var(--text-muted);max-width:60ch;}
.exec-hero .hero-actions{position:absolute;top:0;right:0;display:flex;gap:9px;}

.exec-filters{
  position:sticky;top:56px;z-index:25;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--border);
  padding:12px 30px;
}
.exec-filters-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.exec-filters .seg-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);margin-right:2px;}

.exec-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0;}
.exec-kpi{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:22px 22px 20px;box-shadow:var(--sh-sm);
  transition:transform .2s var(--ease-out),box-shadow .2s;
}
.exec-kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);}
.exec-kpi .ek-top,.exec-kpi .ek-value,.exec-kpi .ek-foot{position:relative;z-index:1;}
.exec-kpi.kpi-clickable{cursor:pointer;}
.exec-kpi .ek-top{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.exec-kpi .ek-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;}
.exec-kpi .ek-label{font-size:13px;font-weight:600;color:var(--text-muted);}
.exec-kpi .ek-value{font-size:var(--fs-5xl);font-weight:650;letter-spacing:-.035em;color:var(--text-strong);line-height:1;font-variant-numeric:tabular-nums;}
.exec-kpi .ek-foot{margin-top:13px;display:flex;align-items:center;gap:9px;font-size:13px;}
.exec-kpi .ek-delta{display:inline-flex;align-items:center;gap:4px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);}
.exec-kpi .ek-delta.up{background:var(--ok-soft);color:var(--ok-fg);}
.exec-kpi .ek-delta.down{background:var(--danger-soft);color:var(--danger-fg);}
.exec-kpi .ek-delta.good-down{background:var(--ok-soft);color:var(--ok-fg);}
.exec-kpi .ek-since{color:var(--text-subtle);}
/* Tendencia como gráfico de FONDO de la tarjeta (detrás del contenido vía z-index). */
.exec-kpi .ek-spark{position:absolute;right:0;bottom:0;left:0;height:64px;opacity:.55;pointer-events:none;z-index:0;}
[data-theme="dark"] .exec-kpi .ek-spark{opacity:.66;}
.exec-kpi .ek-accent{position:absolute;top:0;left:0;right:0;height:4px;z-index:1;}

/* color tints */
.tint-teal{background:var(--teal-100);color:var(--teal-700);}
.tint-blue{background:var(--blue-100);color:var(--blue-600);}
.tint-violet{background:var(--violet-100);color:var(--violet-600);}
.tint-coral{background:var(--coral-100);color:var(--coral-600);}
.tint-amber{background:var(--amber-100);color:var(--amber-700);}
.tint-green{background:var(--green-100);color:var(--green-700);}
[data-theme="dark"] .tint-teal{background:#0d2e33;color:var(--teal-300);}
[data-theme="dark"] .tint-blue{background:#13243f;color:#9cc2fb;}
[data-theme="dark"] .tint-violet{background:#211a3e;color:#c4aef7;}
[data-theme="dark"] .tint-coral{background:#3a1916;color:#fca99e;}
[data-theme="dark"] .tint-amber{background:#2f2410;color:#f5cb7a;}
[data-theme="dark"] .tint-green{background:#0d2c20;color:#74e0a8;}

.bg-teal{background:var(--teal-500);}
.bg-blue{background:var(--blue-500);}
.bg-violet{background:var(--violet-500);}
.bg-coral{background:var(--coral-500);}
.bg-amber{background:var(--amber-500);}
.bg-green{background:var(--green-500);}

.exec-grid{display:grid;gap:18px;margin-bottom:18px;}
.exec-grid.c2{grid-template-columns:1fr 1fr;}
.exec-grid.c3{grid-template-columns:repeat(3,1fr);}
.exec-grid.s21{grid-template-columns:2fr 1fr;}
.exec-grid.s12{grid-template-columns:1fr 2fr;}

.exec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;box-shadow:var(--sh-sm);}
.exec-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;}
.exec-card-head h3{font-size:var(--fs-lg);}
.exec-card-head .desc{margin-top:3px;font-size:12.5px;color:var(--text-muted);}
.exec-card-head .tools{display:flex;align-items:center;gap:6px;}

.legend{display:flex;flex-wrap:wrap;gap:10px 16px;}
.legend .li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-muted);}
.legend .li .sw{width:11px;height:11px;border-radius:4px;flex-shrink:0;}
.legend .li b{color:var(--text-strong);font-variant-numeric:tabular-nums;}

.donut-wrap{position:relative;display:grid;place-items:center;}
.donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;}
.donut-center .dc-val{font-size:var(--fs-3xl);font-weight:650;color:var(--text-strong);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;}
.donut-center .dc-lbl{font-size:11px;color:var(--text-muted);margin-top:3px;text-transform:uppercase;letter-spacing:.06em;}

.rank{display:flex;flex-direction:column;}
.rank .ri{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--divider);}
.rank .ri:last-child{border-bottom:0;}
.rank .ri .pos{width:22px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text-subtle);text-align:center;}
.rank .ri .who{flex:1;min-width:0;}
.rank .ri .who .n{font-size:13.5px;font-weight:600;color:var(--text-strong);}
.rank .ri .who .m{font-size:11.5px;color:var(--text-muted);}
.rank .ri .rk-bar{width:120px;}
.rank .ri .rk-val{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-strong);min-width:42px;text-align:right;}

.exec-statrow{display:flex;gap:30px;flex-wrap:wrap;}
.exec-statrow .es .v{font-size:var(--fs-2xl);font-weight:650;color:var(--text-strong);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.exec-statrow .es .l{font-size:12px;color:var(--text-muted);margin-top:2px;}

@media(max-width:1100px){
  .exec-kpis{grid-template-columns:1fr 1fr;}
  .exec-grid.c2,.exec-grid.c3,.exec-grid.s21,.exec-grid.s12{grid-template-columns:1fr;}
}

/* Compact KPI variant — panels where stat blocks are secondary metadata, not hero */
.exec-kpis.sm{gap:12px;margin:14px 0;}
.exec-kpis.sm .exec-kpi{padding:11px 16px 13px;border-radius:var(--r-lg);}
.exec-kpis.sm .exec-kpi:hover{transform:translateY(-2px);}
.exec-kpis.sm .exec-kpi .ek-ico{width:28px;height:28px;border-radius:8px;}
.exec-kpis.sm .exec-kpi .ek-top{margin-bottom:7px;gap:8px;}
.exec-kpis.sm .exec-kpi .ek-label{font-size:11.5px;}
.exec-kpis.sm .exec-kpi .ek-value{font-size:var(--fs-3xl);}
.exec-kpis.sm .exec-kpi .ek-foot{margin-top:6px;font-size:11.5px;}
.exec-kpis.sm .exec-kpi .ek-accent{height:3px;}

/* charts */
.apex-host{width:100%;}
.apex-host .apexcharts-tooltip{border:1px solid var(--border) !important;box-shadow:var(--sh-lg) !important;background:var(--surface) !important;border-radius:var(--r) !important;font-family:var(--font-sans) !important;}
.apex-host .apexcharts-tooltip-title{background:var(--surface-2) !important;border-bottom:1px solid var(--border) !important;font-weight:600 !important;}
.apex-host .apexcharts-xaxistooltip,.apex-host .apexcharts-yaxistooltip{background:var(--surface) !important;border-color:var(--border) !important;color:var(--text) !important;}
.apex-host .apexcharts-legend-text{color:var(--text-muted) !important;}
.apex-host .apexcharts-gridline{stroke:var(--border) !important;}

.spark-svg{display:block;width:100%;overflow:visible;}
/* Solo en las franjas de tarjeta el sparkline rellena la altura → gráfico de
   fondo. Los sparklines sueltos conservan su altura intrínseca (height=h). */
.kpi .k-spark .spark-svg,.exec-kpi .ek-spark .spark-svg{height:100%;}
.spark-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.spark-draw{stroke-dasharray:var(--dash);stroke-dashoffset:var(--dash);animation:kl-sweep 1.1s var(--ease-out) forwards;}

.svgbars{display:flex;align-items:flex-end;gap:4px;}
.svgbars .b{background:var(--accent);border-radius:3px 3px 0 0;transform-origin:bottom;animation:kl-bar-rise .7s var(--ease-out) both;position:relative;transition:opacity .15s;flex-shrink:0;}
.svgbars .b:hover{opacity:.8;}

.gauge-track{stroke:var(--surface-sunken);}
.gauge-fill{stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--ease-out);}