/* ============================================================
   VARIANT A — Bento Glass Dark · taronja
   ============================================================ */

.v-a{
  --bg-0: #0a0a0c;
  --bg-1: #111114;
  --glass: rgba(255,255,255,.04);
  --glass-2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --fg: #ffffff;
  --fg-2: rgba(255,255,255,.72);
  --fg-3: rgba(255,255,255,.50);
  --fg-4: rgba(255,255,255,.46); /* 4.66:1 vs --bg-0, meets WCAG AA for the informational labels (kpi-foot, table/column headers) that use this token */
  --accent: #FF6B35;
  --accent-soft: rgba(255,107,53,.16);
  --green: #34d399;
  --red:   #f87171;
  --amber: #fbbf24;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  background: var(--bg-0);
  color: var(--fg);
  min-height: 100vh;
  position: relative;
}
/* ambient color blobs in the background — glassmorphism vibe */
.v-a::before, .v-a::after{
  content:""; position: fixed; pointer-events:none; z-index:0;
  filter: blur(120px); opacity:.55; border-radius:50%;
}
.v-a::before{
  width:520px; height:520px; left:-120px; top:-160px;
  background: radial-gradient(circle, #FF6B35 0%, transparent 70%);
}
.v-a::after{
  width:600px; height:600px; right:-160px; bottom:-180px;
  background: radial-gradient(circle, #6c5ce7 0%, transparent 70%);
  opacity:.35;
}
.v-a > *{ position: relative; z-index:1; }

/* === layout: sidebar + main ============================== */
.v-a .app{
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

/* === Sidebar ============================================= */
.v-a .sidebar{
  padding: 20px 14px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:flex; flex-direction:column; gap:6px;
  position: sticky; top:0; height:100vh; overflow:auto;
}
.v-a .brand{
  display:flex; align-items:center; gap:10px;
  padding: 8px 10px 18px; border-bottom:1px solid var(--border);
  margin-bottom: 8px;
}
.v-a .brand .logo{
  width:32px; height:32px; border-radius:10px;
  background: linear-gradient(135deg, var(--accent), #FFB199);
  display:grid; place-items:center; color:#111;
  font-weight:800; font-size:14px;
  box-shadow: 0 6px 20px rgba(255,107,53,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.v-a .brand .name{ font-size:14px; font-weight:700; letter-spacing:-.01em; }
.v-a .brand .name span{ color: var(--fg-3); font-weight:500; }

.v-a .nav-section{ font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color: var(--fg-4); padding: 16px 10px 6px; }
.v-a .nav a{
  display:flex; align-items:center; gap:10px;
  padding: 9px 10px; border-radius: 10px;
  font-size: 13px; color: var(--fg-2); font-weight:500;
  transition: all .15s;
}
.v-a .nav a:hover{ background: var(--glass); color: var(--fg); }
.v-a .nav a.active{
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255,107,53,.25);
}
.v-a .nav a.sub{ padding-left: 30px; font-size: 12.5px; color: var(--fg-3); }
.v-a .nav a.sub .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.6; }
.v-a .nav-bottom{ margin-top:auto; padding-top:16px; border-top:1px solid var(--border); }

/* === Topbar ============================================== */
.v-a .topbar{
  display:flex; align-items:center; gap: 12px;
  padding: 16px 28px;
  position: sticky; top: 0; z-index:5;
  background: rgba(10,10,12,.6);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.v-a .crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--fg-3); }
.v-a .crumb b{ color: var(--fg); font-weight:600; }
.v-a .search{
  display:flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--glass); border:1px solid var(--border);
  min-width: 280px; color: var(--fg-3); font-size:12.5px;
}
.v-a .search kbd{
  font-family: inherit; font-size: 10px; padding: 2px 5px;
  border-radius: 4px; background: rgba(255,255,255,.08); color: var(--fg-3);
  border:1px solid var(--border);
}
.v-a .iconbtn{
  width:34px; height:34px; border-radius:10px;
  background: var(--glass); border:1px solid var(--border);
  color: var(--fg-2); display:grid; place-items:center; transition: all .15s;
}
.v-a .iconbtn:hover{ background: var(--glass-2); color: var(--fg); }
.v-a .avatar{
  width:32px; height:32px; border-radius:50%;
  background: linear-gradient(135deg,#FF6B35,#ffd166);
  display:grid; place-items:center; font-weight:700; font-size:12px; color:#1a0a05;
  border: 2px solid rgba(255,255,255,.1);
}

/* === Page header ========================================= */
.v-a .page{ padding: 24px 28px 60px; }
.v-a .page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: 22px; gap: 16px; flex-wrap: wrap;
}
.v-a .page-head h1{
  margin:0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
}
.v-a .page-head .sub{ font-size: 13px; color: var(--fg-3); margin-top: 4px; }
.v-a .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 14px; border-radius: 10px; border:1px solid var(--border);
  background: var(--glass); color: var(--fg); font-size: 13px; font-weight: 500;
  transition: all .15s;
}
.v-a .btn:hover{ background: var(--glass-2); }
.v-a .btn.primary{
  background: var(--accent); border-color: transparent; color:#1a0a05;
  box-shadow: 0 6px 24px rgba(255,107,53,.35);
}
.v-a .btn.primary:hover{ background: #ff8050; box-shadow: 0 8px 28px rgba(255,107,53,.45); }
.v-a .btn.ghost{ background: transparent; }

/* === Glass card ========================================== */
.v-a .card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  position: relative;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 32px rgba(0,0,0,.25);
}
.v-a .card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 18px;
}
.v-a .card-head h3{
  margin:0; font-size: 13px; font-weight: 600; color: var(--fg-2);
  letter-spacing: -.005em;
  display:flex; align-items:center; gap:8px;
}

/* === Sidebar toggle (mobile off-canvas + desktop collapse) === */
.v-a .menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background: var(--glass); border:1px solid var(--border);
  color: var(--fg-2); cursor:pointer; transition: all .15s;
}
.v-a .menu-toggle:hover{ background: var(--glass-2); color: var(--fg); }
.v-a .sidebar-backdrop{ display:none; }

/* Desktop: collapse sidebar to free up width */
.v-a .app{ transition: grid-template-columns .2s ease; }
.v-a .sidebar{ transition: opacity .15s ease; }
.v-a .app.desktop-nav-hidden{ grid-template-columns: 0 1fr; }
.v-a .app.desktop-nav-hidden .sidebar{
  padding-left:0; padding-right:0; opacity:0; overflow:hidden; pointer-events:none;
}

/* Mobile: sidebar becomes an off-canvas panel, closed by default */
@media (max-width: 900px){
  .v-a .app{ display:block; }
  .v-a .app.desktop-nav-hidden{ grid-template-columns: unset; }
  .v-a .sidebar{
    position: fixed; top:0; left:0; height:100vh; width:248px; max-width:82vw;
    transform: translateX(-100%); transition: transform .25s ease;
    z-index:50; box-shadow: 0 0 40px rgba(0,0,0,.5); opacity:1;
  }
  .v-a .app.mobile-nav-open .sidebar{ transform: translateX(0); }
  .v-a .app.mobile-nav-open .sidebar-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40;
  }
  .v-a .topbar{ padding: 14px 16px; gap:10px; }
  .v-a .crumb{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .v-a .page{ padding: 16px 14px 40px; }
  .v-a .page-head{ align-items:flex-start; }
  .v-a .page-head h1{ font-size:22px; }
  .v-a{ overflow-x:hidden; }

  /* Collapse card/KPI grids to a single column */
  .v-a .bento{ grid-template-columns: 1fr; }
  .v-a .bento > .span-3, .v-a .bento > .span-4, .v-a .bento > .span-5,
  .v-a .bento > .span-6, .v-a .bento > .span-7, .v-a .bento > .span-8,
  .v-a .bento > .span-12{ grid-column: 1 / -1; }
  .v-a .tariff-grid{ grid-template-columns: 1fr; }
  .v-a .roster{ grid-template-columns: 1fr; }

  /* .div-row ("Resum per divisió") is a fixed 6-column grid that doesn't
     fit ~375-414px even before content renders; stack it like every other
     grid per the One-Column Floor Rule. Header row's uppercase labels are
     hidden since a stacked row without a table body reads as noise. */
  .v-a .div-row{ grid-template-columns: 1fr; gap:4px; padding:10px 0; }
  .v-a .div-row .num{ text-align:left; }
  .v-a .div-row .open{ margin-top:4px; }
  .v-a .div-row .col{ display:none; }
}
.v-a .card-head .pill{
  font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:999px;
  background: var(--accent-soft); color: var(--accent);
  letter-spacing:.04em; text-transform: uppercase;
}
.v-a .card-link{ font-size:12px; color: var(--fg-3); display:flex; align-items:center; gap:4px; }
.v-a .card-link:hover{ color: var(--accent); }

/* === Bento grid ========================================== */
.v-a .bento{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.v-a .span-3{ grid-column: span 3; }
.v-a .span-4{ grid-column: span 4; }
.v-a .span-5{ grid-column: span 5; }
.v-a .span-6{ grid-column: span 6; }
.v-a .span-7{ grid-column: span 7; }
.v-a .span-8{ grid-column: span 8; }
.v-a .span-12{ grid-column: span 12; }

/* === KPI cards =========================================== */
.v-a .kpi{ padding: 20px; }
.v-a .kpi-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
.v-a .kpi-icon{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background: var(--glass-2); color: var(--fg-2);
  border:1px solid var(--border);
}
.v-a .kpi-icon.accent{ background: var(--accent-soft); color: var(--accent); border-color: rgba(255,107,53,.25); }
.v-a .kpi-icon.green{ background: rgba(52,211,153,.14); color: var(--green); border-color: rgba(52,211,153,.25); }
.v-a .kpi-icon.amber{ background: rgba(251,191,36,.14); color: var(--amber); border-color: rgba(251,191,36,.25); }
.v-a .kpi-icon.red{ background: rgba(248,113,113,.14); color: var(--red); border-color: rgba(248,113,113,.25); }
.v-a .trend{ font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; display:inline-flex; align-items:center; gap:3px; }
.v-a .trend.up{ background: rgba(52,211,153,.14); color: var(--green); }
.v-a .trend.down{ background: rgba(248,113,113,.14); color: var(--red); }
.v-a .trend.flat{ background: var(--glass-2); color: var(--fg-3); }
.v-a .kpi-label{ font-size:12.5px; color: var(--fg-3); font-weight:500; margin-bottom: 6px; }
.v-a .kpi-value{ font-family:'Space Grotesk','Inter',sans-serif; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-bottom: 14px; }
.v-a a.kpi{ display:block; text-decoration:none; cursor:pointer; transition: all .15s ease; }
.v-a a.kpi:hover{ border-color: var(--border-strong); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); transform: translateY(-2px); }
.v-a .kpi-foot{ display:flex; align-items:center; justify-content:space-between; font-size: 11.5px; color: var(--fg-4); }

/* sparkline */
.v-a .spark{ width: 100%; height: 36px; }

/* === Recent activity ===================================== */
.v-a .activity{ display:flex; flex-direction:column; gap: 10px; }
.v-a .activity-item{
  display:grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items:center;
  padding: 10px; border-radius: 12px;
  border:1px solid transparent; transition: all .15s;
}
.v-a .activity-item:hover{ background: var(--glass); border-color: var(--border); }
.v-a .activity-avatar{
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, rgba(255,107,53,.4), rgba(108,92,231,.4));
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px;
  border:1px solid var(--border);
}
.v-a .activity-name{ font-size: 13px; font-weight: 600; color: var(--fg); }
.v-a .activity-meta{ font-size: 11.5px; color: var(--fg-3); margin-top: 2px; display:flex; gap:8px; align-items:center; }
.v-a .activity-meta .dot{ width:3px; height:3px; border-radius:50%; background: var(--fg-4); }
.v-a .status{
  font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px;
  letter-spacing:.04em; text-transform: uppercase;
}
.v-a .status.pendent{ background: rgba(248,113,113,.14); color: var(--red); border:1px solid rgba(248,113,113,.25); }
.v-a .status.pagat{ background: rgba(52,211,153,.14); color: var(--green); border:1px solid rgba(52,211,153,.25); }
.v-a .status.dot{ display:inline-flex; align-items:center; gap:6px; padding-left:6px; }
.v-a .status.dot::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* === Donut + legend ====================================== */
.v-a .donut-wrap{ display:grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.v-a .donut{ position: relative; width: 200px; height: 200px; }
.v-a .donut-center{
  position: absolute; inset: 0; display:grid; place-items:center; text-align:center;
}
.v-a .donut-center .v{ font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.v-a .donut-center .l{ font-size: 11px; color: var(--fg-3); margin-top: 4px; text-transform: uppercase; letter-spacing:.08em; }
.v-a .legend{ display:flex; flex-direction:column; gap: 8px; }
.v-a .legend-row{ display:grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items:center; font-size: 12.5px; }
.v-a .legend-row .sw{ width:10px; height:10px; border-radius: 3px; }
.v-a .legend-row .name{ color: var(--fg-2); font-weight:500; }
.v-a .legend-row .equips{ font-variant-numeric: tabular-nums; color: var(--fg); font-weight:600; }
.v-a .legend-row .pct{ font-size:11px; color: var(--fg-4); font-variant-numeric: tabular-nums; }

/* === Line chart card ===================================== */
.v-a .chart-wrap{ width: 100%; }
.v-a .chart-stats{ display:flex; gap: 28px; margin-bottom: 12px; }
.v-a .chart-stats .s-v{ font-size: 28px; font-weight: 700; line-height: 1; }
.v-a .chart-stats .s-l{ font-size: 11.5px; color: var(--fg-3); margin-top: 4px; display:flex; align-items:center; gap:6px; }
.v-a .chart-stats .swatch{ width:8px; height:8px; border-radius:50%; }
.v-a .chart-legend{
  display:flex; gap:10px; align-items:center; padding: 4px 10px; border-radius:8px;
  background: var(--glass); border:1px solid var(--border); font-size:11px; color: var(--fg-3);
}

/* === Table =============================================== */
.v-a .table-card{ padding: 0; overflow: hidden; }
.v-a .table-head{
  display:flex; align-items:center; gap:12px; padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.v-a .table-head h3{ margin:0; font-size:14px; font-weight:600; }
.v-a .table-head .chips{ display:flex; gap:6px; flex-wrap:wrap; }
.v-a .chip{
  padding: 6px 10px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border);
  font-size: 11.5px; color: var(--fg-2); font-weight:500;
}
.v-a .chip.active{ background: var(--glass-2); color: var(--fg); border-color: var(--border-strong); }
.v-a table.data{ width: 100%; }
.v-a table.data thead th{
  text-align: left; padding: 12px 22px; font-size: 11px; font-weight: 600;
  color: var(--fg-4); text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015);
}
.v-a table.data thead th.num{ text-align:right; }
.v-a table.data tbody td{
  padding: 14px 22px; font-size: 13px; color: var(--fg-2);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.v-a table.data tbody tr:hover td{ background: rgba(255,255,255,.025); color: var(--fg); }
.v-a table.data tbody tr:last-child td{ border-bottom: 0; }
.v-a table.data td.team{ color: var(--fg); font-weight: 600; }
.v-a table.data td.num{ text-align: right; font-variant-numeric: tabular-nums; }
.v-a .team-cell{ display:flex; align-items:center; gap: 12px; }
.v-a .team-avatar{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-weight:700; font-size:12.5px; color:#fff;
  background: linear-gradient(135deg, #ff8050, #ff5722);
  border:1px solid rgba(255,255,255,.1);
}
.v-a .team-avatar.b{ background: linear-gradient(135deg, #8b5cf6, #6c5ce7); }
.v-a .team-avatar.c{ background: linear-gradient(135deg, #34d399, #06b6d4); }
.v-a .team-avatar.d{ background: linear-gradient(135deg, #f43f5e, #e94b86); }
.v-a .team-avatar.e{ background: linear-gradient(135deg, #fbbf24, #fb923c); }
.v-a .team-sub{ font-size: 11px; color: var(--fg-3); margin-top: 1px; font-weight:500; }
.v-a .iconlink{ color: var(--fg-3); font-size: 12px; display:inline-flex; align-items:center; gap:4px; }
.v-a .iconlink:hover{ color: var(--accent); }

/* === Progress bar ======================================== */
.v-a .progress{
  height: 6px; border-radius: 999px; background: var(--glass-2);
  overflow: hidden; margin-top: 10px;
}
.v-a .progress > i{ display:block; height:100%; background: linear-gradient(90deg, var(--accent), #FFB199); border-radius:999px; }

/* === Divisió list ======================================== */
.v-a .div-row{
  display:grid; grid-template-columns: 28px 1fr 80px 80px 120px 60px; gap: 14px;
  align-items:center; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.v-a .div-row:last-child{ border-bottom:0; }
.v-a .div-row .col{ font-size: 12.5px; color: var(--fg-2); }
.v-a .div-row .num{ font-variant-numeric: tabular-nums; text-align:right; color: var(--fg); font-weight:600; }
.v-a .div-row .sw{ width:14px; height:14px; border-radius:5px; }
.v-a .div-row .name{ font-weight:600; color: var(--fg); font-size:13px; }
.v-a .div-row .pct-bar{ height: 6px; border-radius:999px; background: var(--glass-2); overflow:hidden; }
.v-a .div-row .pct-bar > i{ display:block; height:100%; }
.v-a .div-row .open{
  background: var(--glass); border:1px solid var(--border);
  padding: 5px 10px; border-radius: 8px; font-size: 11px; color: var(--fg-2);
}
.v-a .div-row .open:hover{ color: var(--accent); }

/* === heatmap / mini calendar ============================ */
.v-a .heat{ display:grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.v-a .heat .cell{
  aspect-ratio: 1; border-radius: 4px; background: var(--glass);
  border:1px solid var(--border);
}
.v-a .heat .cell.l1{ background: rgba(255,107,53,.18); border-color: rgba(255,107,53,.25); }
.v-a .heat .cell.l2{ background: rgba(255,107,53,.36); border-color: rgba(255,107,53,.4); }
.v-a .heat .cell.l3{ background: rgba(255,107,53,.6);  border-color: rgba(255,107,53,.6); }
.v-a .heat .cell.l4{ background: rgba(255,107,53,.9);  border-color: rgba(255,107,53,.9); }

/* === Player roster (equip detail) ======================== */
.v-a .roster{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-a .player{
  display:grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items:center;
  padding: 10px 12px; border-radius: 12px;
  background: var(--glass); border:1px solid var(--border);
}
.v-a .player .num{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background: rgba(255,107,53,.14); color: var(--accent); font-weight:700; font-size:14px;
  border:1px solid rgba(255,107,53,.25); font-variant-numeric: tabular-nums;
}
.v-a .player .n{ font-size:13px; font-weight:600; }
.v-a .player .m{ font-size:11px; color: var(--fg-3); margin-top:2px; }

/* === Tariff cards ======================================== */
.v-a .tariff-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-a .tariff{
  padding: 22px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);
}
.v-a .tariff.featured{
  background: linear-gradient(180deg, rgba(255,107,53,.18), rgba(255,107,53,.04));
  border-color: rgba(255,107,53,.35);
  box-shadow: 0 10px 40px rgba(255,107,53,.15);
}
.v-a .tariff h4{ margin:0; font-size:13px; color: var(--fg-3); text-transform: uppercase; letter-spacing:.08em; }
.v-a .tariff .price{ font-size:36px; font-weight:700; letter-spacing:-0.02em; margin: 10px 0 6px; }
.v-a .tariff .price small{ font-size:14px; font-weight:500; color: var(--fg-3); }
.v-a .tariff ul{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; font-size:12.5px; color: var(--fg-2); }
.v-a .tariff li{ display:flex; align-items:center; gap:8px; }
.v-a .tariff li .ck{
  width:16px; height:16px; border-radius:50%; background: rgba(52,211,153,.2); color: var(--green);
  display:grid; place-items:center; font-size:9px;
}