/* ========================================================================== PSG - Modo nocturno: paleta base (tokens) -------------------------------------------------------------------------- Todo el modo oscuro se activa con (lo pone static/js/psg-theme.js). Los demás archivos de static/css/dark/ usan SIEMPRE estas variables en vez de colores sueltos, para que la paleta se ajuste desde un solo lugar. Orden de carga (base.html, al final del ): psg-dark-tokens.css -> psg-dark-core.css -> psg-dark-components.css -> psg-dark-tabulator.css -> apps/psg-dark-apps-{a,b,c}.css ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; /* Fondos (de más profundo a más elevado) */ --psg-bg: #0f141a; /* fondo de página */ --psg-surface: #161d26; /* cards, tablas, modales */ --psg-surface-2: #1c2530; /* headers de card/tabla, zebra */ --psg-surface-3: #243041; /* hover, elementos elevados */ --psg-input-bg: #111820; /* inputs, selects, textareas */ --psg-overlay: rgba(5, 8, 12, 0.72); /* Bordes */ --psg-border: #2a3646; --psg-border-strong: #3a4a5e; /* Texto */ --psg-text: #e2e8f0; --psg-text-muted: #a0acbd; --psg-text-subtle: #6f7d90; --psg-text-inverse: #0f141a; /* Marca (turquesa PSG) */ --psg-primary: #00A99A; --psg-primary-hover: #1cc4b3; --psg-primary-soft: rgba(0, 169, 154, 0.16); --psg-link: #3fd0c1; /* Estados */ --psg-success: #34c77b; --psg-success-soft: rgba(52, 199, 123, 0.15); --psg-danger: #f0616d; --psg-danger-soft: rgba(240, 97, 109, 0.15); --psg-warning: #f5b945; --psg-warning-soft: rgba(245, 185, 69, 0.15); --psg-info: #4cb3f0; --psg-info-soft: rgba(76, 179, 240, 0.15); /* Interacción */ --psg-hover: rgba(255, 255, 255, 0.04); --psg-active: rgba(0, 169, 154, 0.22); --psg-focus-ring: 0 0 0 0.2rem rgba(0, 169, 154, 0.35); /* Sombras */ --psg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --psg-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --psg-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); } /* Transición suave SOLO mientras se cambia de tema (psg-theme.js agrega la clase por ~300ms); así no se ralentiza el resto de la app. */ html.psg-theme-transition, html.psg-theme-transition *, html.psg-theme-transition *::before, html.psg-theme-transition *::after { transition: background-color .25s ease, border-color .25s ease, color .15s ease !important; } /* Botón de cambio de tema en la navbar (visible en ambos modos) */ /* Mismo ritmo que los .dropdown de la navbar (campana/perfil): margen izquierdo de 15px, sin borde fijo (el círculo aparece solo en hover) y el ícono centrado como bloque para que no se desplace por la línea base. */ .psg-theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0; margin: 0 0 0 15px; border: 0; border-radius: 50%; background: transparent; color: #596882; line-height: 0; cursor: pointer; transition: background-color .2s, color .2s; } .psg-theme-toggle:hover { color: #00A99A; background: rgba(0, 169, 154, .1); } .psg-theme-toggle:focus { outline: none; } .psg-theme-toggle:focus-visible { box-shadow: 0 0 0 .2rem rgba(0, 169, 154, .3); } .psg-theme-toggle svg { display: block; width: 20px; height: 20px; } .psg-theme-toggle .psg-theme-icon-sun { display: none; } html[data-theme="dark"] .psg-theme-toggle { color: var(--psg-warning); } html[data-theme="dark"] .psg-theme-toggle:hover { background: var(--psg-surface-3); } html[data-theme="dark"] .psg-theme-toggle .psg-theme-icon-sun { display: inline; } html[data-theme="dark"] .psg-theme-toggle .psg-theme-icon-moon { display: none; }