/* ================================================================
   theme.css — Design tokens compartidos (Prime Express)
   Basado en el diseño de referencia a.html.
   Incluir UNA SOLA VEZ por página, antes de sidebar.css / topbar.css /
   dashboard.css / login.css.
   ================================================================ */

:root{
  --surface:#f7f9fb;
  --surface-bright:#f7f9fb;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f2f4f6;
  --surface-container:#eceef0;
  --surface-container-high:#e6e8ea;
  --on-surface:#191c1e;
  --on-surface-variant:#64748b;
  --outline:#747686;
  --outline-variant:#c4c5d7;
  --primary:#002b92;
  --primary-container:#003ec7;
  --on-primary:#ffffff;
  --on-primary-container:#adbcff;
  --secondary:#5d5e63;
  --secondary-container:#e2e2e8;
  --tertiary-container:#005a3c;
  --on-tertiary-fixed-variant:#005236;
  --error:#ba1a1a;
  --error-container:#ffdad6;
  --on-error-container:#93000a;
  --background:#f7f9fb;
  --border-subtle:#e2e8f0;
  --sidebar-bg: var(--surface-container-lowest);
  --sidebar-fg: var(--on-surface);
  --sidebar-muted:#94a3b8;
  --sidebar-border: var(--border-subtle);
  --success-green:#10b981;
  --alert-red:#ef4444;
  --warning-amber:#f59e0b;
  --surface-white:#ffffff;
  --card-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --card-shadow-hover: 0 12px 28px rgba(15,23,42,0.10), 0 4px 10px rgba(15,23,42,0.06);
  --primary-glow: 0 8px 20px rgba(0,62,199,0.25);
  --mesh: linear-gradient(135deg, #1d4ed8 0%, #2563eb 35%, #5b21b6 75%, #4c1d95 100%);
}

[data-theme="dark"]{
  --surface:#0b0d10;
  --surface-bright:#0b0d10;
  --surface-container-lowest:#15171b;
  --surface-container-low:#15171b;
  --surface-container:#1a1d22;
  --surface-container-high:#21242a;
  --on-surface:#eef1f5;
  --on-surface-variant:#9aa4b2;
  --outline:#3a3e46;
  --outline-variant:#2a2d33;
  --primary:#7c9aff;
  --primary-container:#3b5bdb;
  --on-primary:#0b1230;
  --background:#0b0d10;
  --border-subtle: rgba(99,132,255,0.55);
  --sidebar-bg:#0F1115;
  --sidebar-fg:#eef1f5;
  --sidebar-muted:#6b7280;
  --sidebar-border: rgba(99,132,255,0.50);
  --surface-white:#15171b;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,132,255,0.35);
  --card-shadow-hover: 0 16px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(99,132,255,0.55), 0 0 16px rgba(99,132,255,0.15);
  --mesh: linear-gradient(135deg, #2563eb 0%, #4338ca 45%, #6d28d9 80%, #581c87 100%);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--background);
  color:var(--on-surface);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}

.app{
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* Tarjeta base reutilizable en todo el sistema */
.card{
  background:var(--surface-white);
  border:1px solid var(--border-subtle);
  border-radius:1rem;
  box-shadow:var(--card-shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }