/* ============================================================
   BASE — tokens & resets compartits per les 3 variants
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* numbers tabular by default in tables/kpis */
.tnum, .kpi-value, td.num, th.num { font-variant-numeric: tabular-nums; }

/* === layout-a.js: hide body until mounted ================ */
body[data-page]:not(.mounted) { visibility: hidden; }

/* small util */
.row { display: flex; align-items: center; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.spacer { flex: 1 1 auto; }

/* === Variant switcher (preview only) ====================== */
.variant-bar{
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display:flex; gap:4px; padding:4px;
  background: rgba(20,20,22,.72); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 999px; z-index:100;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  font-size: 12px; color: rgba(255,255,255,.7);
}
.variant-bar button{
  background: transparent; border:0; color: inherit;
  padding: 8px 14px; border-radius: 999px; font-weight:500;
  display:flex; align-items:center; gap:8px; transition: all .2s ease;
}
.variant-bar button:hover{ color:#fff; }
.variant-bar button.active{
  background: rgba(255,255,255,.10); color:#fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.variant-bar .dot{ width:8px; height:8px; border-radius:50%; }
.variant-bar .dot.a{ background:#ff6b35; }
.variant-bar .dot.b{ background:#0f172a; }
.variant-bar .dot.c{ background:#d4ff3a; }

.variant-stage > section{ display:none; }
.variant-stage > section.active{ display:block; }

/* sub-nav inside each variant */
.subnav{
  display:flex; gap:2px; padding:4px;
  border-radius: 12px; align-self:flex-start;
}
.subnav button{
  background:transparent; border:0; padding:8px 12px; border-radius:8px;
  font-size:12px; font-weight:500; opacity:.6; transition: all .15s;
}
.subnav button.active{ opacity:1; }
.subnav button:hover{ opacity:1; }