:root {
  --void:#07080c;--base:#0c1018;--card:#111822;--card-h:#16212e;--surface:#1c2a3c;
  --a:#00e5a0;--a-dim:rgba(0,229,160,.10);--a-glow:rgba(0,229,160,.22);--a-border:rgba(0,229,160,.25);
  --amber:#f59e0b;--amber-dim:rgba(245,158,11,.12);
  --red:#ff4d5e;--red-dim:rgba(255,77,94,.12);
  --blue:#4f8fff;--blue-dim:rgba(79,143,255,.12);
  --violet:#9f7aea;--violet-dim:rgba(159,122,234,.12);
  --t1:#dfe8f5;--t2:#6a7f96;--t3:#3a4b5e;
  --border:#192435;--radius:16px;--r-sm:10px;--r-xs:7px;
  --grad-head:linear-gradient(135deg,#0a2e22 0%,#0f3d2e 45%,#082218 100%);
  --teal:#2dd4bf;--teal-dim:rgba(45,212,191,.12);
  --cyan:#22d3ee;--cyan-dim:rgba(34,211,238,.12);--slate:#64748b;
  --sem-green:#22c55e;--sem-yellow:#eab308;--sem-red:#ef4444;
  --sem-green-dim:rgba(34,197,94,.14);--sem-yellow-dim:rgba(234,179,8,.14);--sem-red-dim:rgba(239,68,68,.14);
  --chart-grid:rgba(255,255,255,.04);--chart-label:#6a7f96;--chart-tooltip:rgba(12,16,24,.95);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',sans-serif;
  background:var(--void);
  color:var(--t1);
  min-height:100vh;
  overflow-x:hidden;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
  z-index:0;
}
:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:4px}

/* ── App shell ── mobile-first ── */
.app{max-width:430px;margin:0 auto;min-height:100vh;position:relative;background:var(--void)}

/* ── Desktop layout (≥ 768px) ── */
@media(min-width:768px){
  /* Ampliar contenedor principal */
  .app{max-width:100% !important}

  /* Sidebar siempre visible — fijo a la izquierda */
  .drawer{
    left:0 !important;
    width:260px !important;
    transform:none !important;
    transition:none !important;
    z-index:10;
  }
  .drawer-close{display:none}
  .overlay{display:none !important}

  /* Topbar, filter-bar y contenido desplazados a la derecha del sidebar */
  .top-bar{
    left:260px;
    width:calc(100% - 260px);
  }
  .filter-bar{
    margin-left:260px;
  }
  .content{
    margin-left:260px;
    padding:0 28px 40px;
  }

  /* Bottom nav — oculto en desktop */
  .bnav{display:none}

  /* Toast ajuste */
  .toast{bottom:24px}

  /* Modal — centrado en desktop en lugar de bottom-sheet */
  .modal{align-items:center}
  .modal-box{
    border-radius:var(--radius) !important;
    border-bottom:1px solid var(--border) !important;
    max-width:520px;
    max-height:85vh;
    transform:scale(.94) !important;
    opacity:0;
    transition:transform .25s var(--ease-out-expo), opacity .2s !important;
  }
  .modal.open .modal-box{transform:scale(1) !important;opacity:1}
  .modal-drag{display:none}

  /* Cards y grids más anchos */
  .g8{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
  .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .field-row{grid-template-columns:1fr 1fr 1fr}

  /* Tabs — scroll horizontal sin overflow visible */
  .tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;white-space:nowrap;padding:7px 14px}
}

@media(min-width:1280px){
  .drawer{width:280px !important}
  .top-bar{left:280px;width:calc(100% - 280px)}
  .filter-bar{margin-left:280px}
  .content{margin-left:280px;max-width:none}
}