/* ============================================================ 4DataFlow — Design tokens (basados en 4DataSuite) ------------------------------------------------------------ Modo claro/oscuro: el tema se aplica con `data-theme="light|dark"` en . El default (sin atributo) es dark, y `[data-theme="light"]` más abajo redefine los tokens visuales sin cambiar nombres — toda la UI sigue refiriéndose a las mismas variables (`--dark-card`, `--text-primary`, etc.) y resuelve a colores claros u oscuros según el atributo. Los tokens *brand* (teal/cyan) son comunes a ambos modos. ============================================================ */ :root { /* Brand (compartido entre temas) */ --brand-teal: #009E8E; --brand-teal-light: #00C4B0; --brand-cyan: #00E5FF; --brand-slate: #516180; --gradient-brand: linear-gradient(135deg, #009E8E 0%, #00E5FF 100%); --gradient-brand-btn: linear-gradient(135deg, #00665C 0%, #0098B0 100%); --shadow-teal: 0 0 40px rgba(0, 158, 142, 0.30); --navbar-height: 64px; --sidemenu-width: 240px; /* ── Tokens dark (default) ──────────────────────────── */ --dark-900: #060A10; --dark-800: #0B1120; --dark-700: #101827; --dark-card: #111827; --dark-card-2: #1A2540; --border: rgba(0, 158, 142, 0.18); --border-subtle: rgba(255, 255, 255, 0.06); --text-primary: #F0F6FF; --text-secondary: #94A3B8; --text-muted: #4B5A6E; --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.40); /* Superficies "elevadas" sobre cards. En dark se logran con overlays blancos translúcidos; en light con grises sutiles. */ --surface-soft: rgba(255, 255, 255, 0.025); --surface-soft-strong: rgba(255, 255, 255, 0.04); --surface-raised: rgba(255, 255, 255, 0.06); --surface-hover: rgba(255, 255, 255, 0.05); /* Inputs / selects / textareas */ --input-bg: var(--dark-card-2); --input-bg-soft: rgba(255, 255, 255, 0.04); --input-border: rgba(255, 255, 255, 0.18); /* Fondo del dropdown nativo de un