/* Variables de diseño. El tema OSCURO es el predeterminado; el claro se activa con <html data-theme="light"> (ver theme.js). */
:root {
  --bg: #0c1016; --surface: rgba(24,30,40,.72); --surface-solid: #171d27;
  --text: #e8edf4; --muted: #8e9bb0; --border: rgba(255,255,255,.09); --field: #222a37;
  --accent: #5b9bff; --accent-text: #06122b; --danger: #f87171; --ok: #16a34a; --warn: #fbbf24;
  --radius: 20px; --nav-h: 64px;
  --shadow: 0 8px 28px rgba(0,0,0,.55);
  --c-operativo: #dc2626;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff; --surface: rgba(255,255,255,.82); --surface-solid: #ffffff;
  --text: #14181f; --muted: #667085; --border: rgba(20,24,31,.08); --field: #f2f4f7;
  --accent: #2563eb; --accent-text: #ffffff; --danger: #dc2626; --warn: #b45309; --shadow: 0 8px 24px rgba(0,0,0,.18);
  color-scheme: light;
}