:root{
  --bg:#0b0c0f; --card:#12151a; --text:#e7e9ee; --muted:#a9b0be;
  --brand:#7dd3fc; --brand-2:#60a5fa; --border:#1f2430;
  --success:#34d399; --warning:#f59e0b; --danger:#f87171;
  --shadow:0 10px 30px rgba(0,0,0,.45); --radius:16px;

  /* NUEVO */
  --container-max: 1600px;
  --gutter: 20px;
}
[data-theme="light"]{
  --bg:#f7f8fb; --card:#fff; --text:#0b1020; --muted:#515b6b;
  --brand:#0ea5e9; --brand-2:#2563eb; --border:#e8ebf1;
  --shadow:0 8px 24px rgba(12,18,32,.08);
}

/* Base */
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans"
}
/* ↓ NUEVO: contenedor mucho más ancho con gutters fluidos */
.container{
  width: min(var(--container-max), 98vw);
  margin-inline: auto;
  padding-inline: clamp(10px, 1.2vw, 24px);
  padding-block: var(--gutter);
}
.visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px)}

/* Topbar */
.topbar{position:sticky; top:0; z-index:20; backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--border)}
.topbar-inner{display:flex; align-items:center; gap:16px; padding:12px 24px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px}
.logo{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow)}
.spacer{flex:1}
.nav{display:flex; gap:8px; flex-wrap:wrap}
.nav a{text-decoration:none; color:var(--text); padding:8px 12px; border-radius:10px; border:1px solid transparent}
.nav a[aria-current="page"], .nav a:hover{border-color:var(--border); background:color-mix(in srgb, var(--card) 80%, transparent)}

/* Toggles */
.toggle{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--card)}
.toggle button{all:unset; cursor:pointer; padding:6px 8px; border-radius:8px}
.toggle button.active{background: color-mix(in srgb, var(--brand) 20%, transparent)}

/* Grid & Cards */
.grid{display:grid; gap:16px; grid-template-columns:repeat(12, 1fr); margin-top:18px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px; font-size:15px; letter-spacing:.2px; color:var(--muted)}
.col-4{grid-column:span 4} .col-8{grid-column:span 8} .col-6{grid-column:span 6} .col-12{grid-column:span 12}
.placeholder{height:240px; border:1px dashed var(--border); border-radius:12px; display:grid; place-items:center; color:var(--muted)}

/* Hero */
.hero{margin-top:18px; padding:24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card);
  display:grid; grid-template-columns:1.4fr .8fr; gap:20px; box-shadow:var(--shadow)}
.hero h1{margin:.2rem 0 8px; font-size:clamp(22px, 3vw, 34px)}
.hero p{margin:0; color:var(--muted)}
.cta{display:flex; gap:12px; margin-top:14px}
.btn{appearance:none; border:1px solid var(--border); padding:10px 14px; border-radius:12px; cursor:pointer; color:var(--text);
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 85%, transparent), var(--card))}
.btn.primary{border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; font-weight:600}
.kpi-badges{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.kpi{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card)}
.dot{width:10px; height:10px; border-radius:999px; background:var(--brand)}

/* Footer */
footer{opacity:.8; color:var(--muted); font-size:13px; padding:24px 0}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .col-8,.col-4,.col-6{grid-column:span 12}
  .nav{display:none}
}
@media (max-width:560px){
  .container{padding:16px}
  .hero{padding:18px}
  .card{padding:14px}
}

/* (Opcional) Si quieres aún más ancho en monitores grandes */
@media (min-width:1800px){
  :root{ --container-max: 1720px; }
}