@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');
@import url('tokens.css');

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--fs-base);
  line-height:1.6;color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.2;font-weight:700;margin:0 0 var(--sp-3)}
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-xl)}
a{color:var(--color-info);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:6px}

/* Layout app: sidebar + contenido */
.layout{display:flex;min-height:100dvh}
.sidebar{
  width:248px;background:var(--color-primary);color:#CBD5E1;
  display:flex;flex-direction:column;padding:var(--sp-4);
  position:sticky;top:0;height:100dvh;transition:transform var(--transition);
}
.sidebar .brand{display:flex;align-items:center;gap:var(--sp-2);
  color:#fff;font-weight:700;font-size:var(--fs-lg);margin-bottom:var(--sp-5)}
.sidebar a.navlink{
  display:flex;align-items:center;gap:var(--sp-3);color:#CBD5E1;
  padding:.6rem .75rem;border-radius:var(--radius-sm);text-decoration:none;
  font-size:var(--fs-sm);transition:background var(--transition),color var(--transition)}
.sidebar a.navlink:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar a.navlink.active{background:var(--color-accent);color:#1A1206}
.sidebar .navlink svg{width:20px;height:20px;flex:0 0 20px}
.content{flex:1;display:flex;flex-direction:column;min-width:0}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.topbar .menu-btn{display:none;background:none;border:0;cursor:pointer;color:var(--fg)}
.main{padding:var(--sp-5);max-width:1200px;width:100%;margin:0 auto}

/* Componentes */
.card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:var(--sp-5)}
.grid{display:grid;gap:var(--sp-4)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}

.btn{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  font:inherit;font-weight:500;font-size:var(--fs-sm);padding:.65rem 1.1rem;
  border-radius:var(--radius-sm);border:1px solid transparent;
  transition:background var(--transition),transform var(--transition)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-600)}
.btn-accent{background:var(--color-accent);color:#1A1206}
.btn-accent:hover{background:var(--color-accent-600)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--fg)}
.btn-block{width:100%;justify-content:center}

.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:500;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .85rem;font:inherit;color:var(--fg);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  transition:border-color var(--transition),box-shadow var(--transition)}
.field input:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(37,99,235,.15);outline:none}
.helper{font-size:var(--fs-xs);color:var(--fg-subtle);margin-top:4px}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);
  font-weight:600;padding:.2rem .6rem;border-radius:999px}
.badge-success{background:#ECFDF5;color:#047857}
.badge-info{background:#EFF6FF;color:#1D4ED8}
.badge-warn{background:#FFFBEB;color:#B45309}

.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th,.table td{text-align:left;padding:.75rem;border-bottom:1px solid var(--border)}
.table th{color:var(--fg-subtle);font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
.table-wrap{overflow-x:auto}

.flash{padding:.8rem 1rem;border-radius:var(--radius-sm);margin-bottom:var(--sp-4);font-size:var(--fs-sm)}
.flash-error{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}
.flash-success{background:#ECFDF5;color:#047857;border:1px solid #A7F3D0}
.flash-warning{background:#FFFBEB;color:#B45309;border:1px solid #FDE68A}

.stat{display:flex;flex-direction:column;gap:4px}
.stat .num{font-size:var(--fs-2xl);font-weight:700;font-variant-numeric:tabular-nums}
.stat .lbl{font-size:var(--fs-sm);color:var(--fg-subtle)}

.muted{color:var(--fg-muted)}
.center-screen{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-4)}
.auth-card{width:100%;max-width:400px}

/* Responsivo */
@media (max-width:980px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .topbar .menu-btn{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}