/* * Identicore — Sistema de temas * ============================== * Tema oscuro (default) + tema claro via [data-theme="light"] en . * Los modulos heredan via var(--*). Esta hoja se carga en dashboard, * modulo_frame, login, y se inyecta en los iframes de modulo_frame. */ /* ═══════════════ TEMA CLARO ═══════════════ * Paleta azulada coordinada — bajo contraste, profesional. * Inspirada en GitHub light + tonos slate. */ html[data-theme="light"] { --bg: #d8e1ec; /* fondo azul-gris suave (no blanco) */ --surface: #e8eef6; /* superficies de paneles */ --surface2: #c9d4e2; /* superficie secundaria, más profunda */ --border: #b3c0d2; /* divisores principales */ --border2: #8d9db4; /* bordes de inputs y elementos */ --accent: #1565a0; /* azul saturado, no demasiado brillante */ --accent2: #2c7a5f; /* verde forense calmado */ --warn: #9b5a00; /* ámbar profundo */ --danger: #ad2e4d; /* rojo coral apagado */ --text: #1f2a3d; /* slate oscuro (no negro puro) */ --text2: #4a5a72; /* slate medio */ --text3: #74849c; /* slate claro para hints */ --purple: #6347b8; --orange: #c2622a; /* ── Alias que declaran los módulos y esta hoja no conocía ────────────── * * Cada módulo define su propia paleta en `:root`. Los nombres estándar de * arriba ya los sobrescribe este bloque —`html[data-theme="light"]` gana en * especificidad a `:root`— pero los alias propios de cada módulo se * quedaban con su valor OSCURO en tema claro: paneles negros y acentos * cian sobre un fondo azul-gris. * * Se resuelven aquí, en un solo sitio, y no en cada módulo: son 24 de 26 * los que traen alias sin mapear, y el módulo número 27 heredaría el mismo * problema. `tests/unit/test_tema_claro.py` comprueba que ningún módulo * declare una variable que este bloque no cubra. */ /* Superficies: alias de --surface / --surface2 */ --bg2: #e8eef6; --bg3: #c9d4e2; --surface3: #dde5ef; /* Acentos primarios: alias de --accent / --accent2 */ --teal: #1565a0; --teal2: #2c7a5f; /* Acentos decorativos. Mismo criterio que la paleta de arriba: saturados * pero profundos, para que se lean sobre el fondo claro en vez de brillar. */ --violet: #6347b8; --indigo: #4a4fa8; --sky: #0f6c8c; --emerald: #2c7a5f; --amber: #9b5a00; --rose: #ad2e4d; --pink: #a83a6b; /* Realce al pasar el ratón. Tinte translúcido del acento en vez de un color * sólido: funciona igual sobre una fila normal, una alterna o una * seleccionada, sin tapar el texto. En tema oscuro los módulos conservan su * valor propio vía `var(--hover, #1e2d44)`. */ --hover: rgba(21, 101, 160, .10); } /* body y grid background */ html[data-theme="light"] body { background: var(--bg); color: var(--text); } /* El grid de fondo (el ::before con líneas) en claro debe ser sutil */ html[data-theme="light"] body::before { opacity: 0.12 !important; } /* Watermarks y overlays oscuros en claro deben ajustarse */ html[data-theme="light"] .doc-watermark { color: rgba(200, 0, 0, 0.08) !important; } /* Inputs con bg oscuro forzado → usar var */ html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="date"], html[data-theme="light"] input[type="search"], html[data-theme="light"] select, html[data-theme="light"] textarea { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border2) !important; } /* Tags y chips que usan rgba con transparencia siguen funcionando */ /* ═══════════════ SWITCH UI ═══════════════ */ .theme-switch-wrap { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--border); font-family: 'Courier New', monospace; font-size: 10px; color: var(--text2); letter-spacing: 1px; text-transform: uppercase; } .theme-switch { position: relative; display: inline-block; width: 38px; height: 20px; flex-shrink: 0; } .theme-switch input { opacity: 0; width: 0; height: 0; } .theme-switch .slider { position: absolute; cursor: pointer; inset: 0; background: #2a3f5f; border-radius: 20px; transition: background 0.2s; } .theme-switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.2s; } .theme-switch input:checked + .slider { background: var(--accent); } .theme-switch input:checked + .slider::before { transform: translateX(18px); }