/* Tokens de color de la app. Las variables se definen en :root (modo claro por defecto) y se sobrescriben en :root[data-theme="dark"]. Cada vista pinta el atributo data-theme en el según la preferencia del usuario (sesión: UserDarkMode), y el resto del CSS sólo necesita usar var(--...) en lugar de los hexadecimales originales. Los colores de marca (azul Fitesa) se mantienen idénticos entre temas — solo cambian los fondos, textos y bordes. */ :root { /* Superficies */ --bg-page: #eef1f6; --bg-surface: #ffffff; --bg-surface-alt: #f3f5f9; --bg-input: #f3f5f9; --bg-input-focus: #ffffff; --bg-input-readonly: #eceff4; /* Texto */ --text-primary: #1b2a41; --text-muted: #6b7a90; --text-muted-soft: #97a3b6; --text-heading: #0c2f63; --text-on-surface: #1b2a41; /* Bordes */ --border-default: #e3e9f2; --border-input: #dde3ec; --border-divider: #eef1f6; /* Marca / acción (idéntico en ambos temas) */ --color-primary: #1f64ad; --color-primary-hover: #1a568f; --color-primary-active: #144372; --color-primary-dark: #0c2f63; --color-primary-darker: #123e7a; /* Gradient del header (en light coincide con el azul corporativo). */ --header-gradient-start: #123e7a; --header-gradient-end: #0c2f63; /* Estados — fondo + texto pareados */ --alert-success-bg: #e7f6ec; --alert-success-border: #b6e0c4; --alert-success-text: #1b7a3d; --alert-danger-bg: #fdecec; --alert-danger-border: #f3bcbc; --alert-danger-text: #b3261e; /* Badges */ --badge-default-bg: #e9f0fb; --badge-default-bg-hover: #dce8f8; --badge-default-text: #1f64ad; /* Botones secundarios (ghost / cancelar) */ --btn-ghost-bg: #eef1f6; --btn-ghost-bg-hover: #e2e7ef; --btn-ghost-text: #1b2a41; /* Botones destructivos */ --color-danger: #e0473d; --color-danger-hover: #c93a31; /* Sombras */ --shadow-card: 0 6px 16px rgba(12, 47, 99, 0.06); --shadow-fab: 0 8px 20px rgba(12, 47, 99, 0.35); --shadow-modal: 0 18px 42px rgba(0, 0, 0, 0.4); --shadow-tooltip: 0 6px 16px rgba(8, 23, 56, 0.28); /* Overlays */ --overlay-modal: rgba(8, 23, 56, 0.72); /* Resaltado de búsqueda */ --highlight-bg: #fff4a3; /* Scrollbar dentro de modales */ --scrollbar-thumb: rgba(12, 47, 99, 0.28); --scrollbar-thumb-hover: rgba(12, 47, 99, 0.45); /* Tooltip (azul oscuro corporativo siempre) */ --tooltip-bg: #0c2f63; --tooltip-text: #ffffff; } /* Modo oscuro: solo reasignamos los tokens que cambian. */ :root[data-theme="dark"] { --bg-page: #0f1721; --bg-surface: #18222e; --bg-surface-alt: #1f2a37; --bg-input: #1f2a37; --bg-input-focus: #232f3d; --bg-input-readonly: #161d27; --text-primary: #e8ecf2; --text-muted: #9aabc2; --text-muted-soft: #6b7a90; --text-heading: #c8dcff; --text-on-surface: #e8ecf2; --border-default: #2a3645; --border-input: #36465a; --border-divider: #232f3d; --alert-success-bg: #122b1d; --alert-success-border: #1f5333; --alert-success-text: #75d495; --alert-danger-bg: #2d1414; --alert-danger-border: #5a2424; --alert-danger-text: #f29089; --badge-default-bg: #1d3354; --badge-default-bg-hover: #25416b; --badge-default-text: #9bc1ec; --btn-ghost-bg: #232f3d; --btn-ghost-bg-hover: #2c3a4b; --btn-ghost-text: #e8ecf2; --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.4); --shadow-fab: 0 8px 20px rgba(0, 0, 0, 0.55); --shadow-modal: 0 18px 42px rgba(0, 0, 0, 0.7); --shadow-tooltip: 0 6px 16px rgba(0, 0, 0, 0.55); --overlay-modal: rgba(0, 0, 0, 0.78); --highlight-bg: #6b5e00; --scrollbar-thumb: rgba(200, 220, 255, 0.18); --scrollbar-thumb-hover: rgba(200, 220, 255, 0.36); /* En dark el header es un azul medio-oscuro: lo bastante claro para destacar sobre --bg-page (#0f1721) y --bg-surface (#18222e), pero sin caer en el azul brillante del modo claro. */ --header-gradient-start: #2c4470; --header-gradient-end: #1d2e52; } /* Smooth transition al cambiar de tema. Limitado a propiedades de color para no afectar a animaciones de layout. */ html, body, .module, .module-card, .module-modal__dialog, .module-input, .module-select, .module-textarea, .module-alert, .module-badge, .module-empty, .settings-module { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }