/* * GiNovaCal EMS — Normalización global de temas * Se carga al final desde views/layouts/header.php. * Solo modifica la presentación en pantalla; no altera impresión ni lógica. */ /* * Variables de tema vinculadas a la clase del . * Esta capa evita que reglas antiguas o caché de hojas externas mantengan el guinda. */ body.tema-guinda { --guinda: #7a1732; --guinda-oscuro: #571022; --guinda-claro: #f7e9ee; --gris-fondo: #f3f5f7; --gris-borde: #d7dce1; --gris-texto: #5b6570; --blanco: #ffffff; } body.tema-azul_ejecutivo { --guinda: #1f5f99; --guinda-oscuro: #123b61; --guinda-claro: #e8f1f8; --gris-fondo: #f2f6fb; --gris-borde: #cbd8e6; --gris-texto: #4f6275; --blanco: #ffffff; } body.tema-grafito_gris { --guinda: #5f6872; --guinda-oscuro: #343a40; --guinda-claro: #eceff1; --gris-fondo: #f4f5f6; --gris-borde: #d3d7db; --gris-texto: #59616a; --blanco: #ffffff; } body.tema-oscuro { --guinda: #3f8cff; --guinda-oscuro: #172235; --guinda-claro: #26354a; --gris-fondo: #15181d; --gris-borde: #3b4350; --gris-texto: #b8c1cc; --blanco: #22272e; } @media screen { :root { --tema-primario: var(--guinda, #7a1732); --tema-primario-oscuro: var(--guinda-oscuro, #571022); --tema-primario-claro: var(--guinda-claro, #f7e9ee); --tema-fondo: var(--gris-fondo, #f4f6f8); --tema-superficie: var(--blanco, #ffffff); --tema-borde: var(--gris-borde, var(--borde, #d8dee7)); --tema-texto: var(--texto-principal, #102a43); --tema-texto-secundario: var(--gris-texto, #5f6b7a); } /* Estructura principal: evita que estilos históricos vuelvan a imponer guinda. */ body.dashboard-body, .dashboard-body, .dashboard-contenido, .contenido-principal, .contenedor-principal, .main-content { background-color: var(--tema-fondo) !important; } .menu-lateral, .menu-pie { background: var(--tema-primario-oscuro) !important; background-color: var(--tema-primario-oscuro) !important; } .menu-enlace:hover, .menu-enlace.activo, .menu-enlace.active { background: color-mix(in srgb, var(--tema-primario) 42%, transparent) !important; background-color: color-mix(in srgb, var(--tema-primario) 42%, transparent) !important; } .barra-superior { background: var(--tema-superficie) !important; border-bottom-color: var(--tema-borde) !important; } .usuario-avatar { background: var(--tema-primario) !important; background-color: var(--tema-primario) !important; } /* Dashboard. */ .bienvenida-panel { background: linear-gradient(135deg, var(--tema-primario), var(--tema-primario-oscuro)) !important; } .tarjeta-icono { background: var(--tema-primario-claro) !important; } .tarjeta-estadistica strong, .panel-estado h2, .panel-estado h3 { color: var(--tema-primario-oscuro) !important; } /* Encabezados y títulos de todos los módulos. */ .barra-superior h1, .encabezado-modulo h1, .encabezado-modulo h2, .panel-titulo h1, .panel-titulo h2, .titulo-bloque h1, .titulo-bloque h2, .hc-panel h2, .historial-titulo, .cap-extra h1, .ce-head h1, .extra-head h1, .kx-wrap h1, .promocion-contenido > h1, .egreso-contenido > h1, .texto-primario, .color-primario { color: var(--tema-primario-oscuro) !important; } /* Botones primarios generales. */ .boton-principal, .boton-principal-modulo, .boton-primario, .boton-guardar, .boton-actualizar, .boton-importar, .boton-nuevo-grupo, .boton-buscar-grupos, .boleta-boton, .boleta-boton-imprimir, .hc-btn, .kx-btn, .ce-btn:not(.sec), .extra-btn:not(.sec):not(.ok):not(.warn), .cap-btn:not(.sec):not(.ok):not(.warn), .btn-principal, .btn.btn-principal, .boton.boton-primario, .boton:not(.boton-secundario):not(.boton-eliminar):not(.boton-cancelar):not(.boton-peligro), .acciones-configuracion .boton-principal-modulo, .acciones-formulario .btn-principal, .acciones-formulario-importacion .boton-principal-modulo, form button[type="submit"]:not(.boton-secundario):not(.btn-secundario):not(.sec):not(.ok):not(.warn):not(.boton-eliminar):not(.boton-cancelar):not(.boton-peligro), form input[type="submit"]:not(.boton-secundario):not(.btn-secundario) { background: var(--tema-primario) !important; background-color: var(--tema-primario) !important; border-color: var(--tema-primario) !important; color: #ffffff !important; } .boton-principal:hover, .boton-principal-modulo:hover, .boton-primario:hover, .boton-guardar:hover, .boton-actualizar:hover, .boton-importar:hover, .boton-nuevo-grupo:hover, .boton-buscar-grupos:hover, .boleta-boton:hover, .boleta-boton-imprimir:hover, .hc-btn:hover, .kx-btn:hover, .ce-btn:not(.sec):hover, .extra-btn:not(.sec):not(.ok):not(.warn):hover, .cap-btn:not(.sec):not(.ok):not(.warn):hover, .btn-principal:hover, .btn.btn-principal:hover, .boton.boton-primario:hover, .boton:not(.boton-secundario):not(.boton-eliminar):not(.boton-cancelar):not(.boton-peligro):hover, form button[type="submit"]:not(.boton-secundario):not(.btn-secundario):not(.sec):not(.ok):not(.warn):not(.boton-eliminar):not(.boton-cancelar):not(.boton-peligro):hover, form input[type="submit"]:not(.boton-secundario):not(.btn-secundario):hover { background: var(--tema-primario-oscuro) !important; background-color: var(--tema-primario-oscuro) !important; border-color: var(--tema-primario-oscuro) !important; } /* Pestañas activas: extraordinarios, promoción, egreso y módulos similares. */ .cap-tab.active, .cap-tab.activa, .pestana.activa, .pestana.active, .tab.activo, .tab.active, .tabs a.active, .tabs a.activo, .auditoria-pestana.activa, .modo-activo, .boton-modo.activo, .nav-modo .activo, [aria-selected="true"] { background: var(--tema-primario) !important; background-color: var(--tema-primario) !important; border-color: var(--tema-primario) !important; color: #ffffff !important; } /* Acentos y avisos antes codificados en guinda. */ .enlace-accion, .pestanas-configuracion a, .regla-oficial strong { color: var(--tema-primario) !important; } .hc-intro, .mensaje-informativo, .aviso-modulo, .cap-note, .ce-note, .extra-note { border-left-color: var(--tema-primario) !important; } input:focus, select:focus, textarea:focus { border-color: var(--tema-primario) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tema-primario) 18%, transparent) !important; outline: none !important; } /* Modo oscuro: superficies y textos de módulos con CSS embebido propio. */ body.tema-oscuro, body.tema-oscuro .dashboard-contenido, body.tema-oscuro .contenido-principal, body.tema-oscuro .contenedor-principal, body.tema-oscuro .main-content { background: var(--tema-fondo) !important; color: #edf1f5 !important; } body.tema-oscuro .barra-superior, body.tema-oscuro .tarjeta-estadistica, body.tema-oscuro .panel-estado, body.tema-oscuro .panel, body.tema-oscuro .panel-tabla, body.tema-oscuro .tarjeta-resumen, body.tema-oscuro .panel-configuracion, body.tema-oscuro .bloque-configuracion, body.tema-oscuro .tarjeta-logo, body.tema-oscuro .tarjeta-tema, body.tema-oscuro .grupos-formulario-tarjeta, body.tema-oscuro .regla-oficial, body.tema-oscuro .hc-panel, body.tema-oscuro .hc-expediente, body.tema-oscuro .hc-materia, body.tema-oscuro .hc-etapa, body.tema-oscuro .hc-dato, body.tema-oscuro .hc-resumen-general div, body.tema-oscuro .kx-panel, body.tema-oscuro .kx-doc, body.tema-oscuro .kx-resumen div, body.tema-oscuro .cap-card, body.tema-oscuro .cap-panel, body.tema-oscuro .ce-card, body.tema-oscuro .ce-summary-item, body.tema-oscuro .extra-filtros, body.tema-oscuro .extra-card, body.tema-oscuro .boleta-panel, body.tema-oscuro .tabla-responsive, body.tema-oscuro .contenedor-tabla, body.tema-oscuro .contenedor-tabla-grupos, body.tema-oscuro .panel-formulario, body.tema-oscuro .formulario-contenedor, body.tema-oscuro .tarjeta, body.tema-oscuro .card, body.tema-oscuro section { background-color: var(--tema-superficie) !important; color: #edf1f5 !important; border-color: var(--tema-borde) !important; } body.tema-oscuro input, body.tema-oscuro select, body.tema-oscuro textarea, body.tema-oscuro .campo input, body.tema-oscuro .campo select, body.tema-oscuro .cap-field select, body.tema-oscuro .cap-field input, body.tema-oscuro .cap-field textarea, body.tema-oscuro .ce-field select, body.tema-oscuro .extra-field select, body.tema-oscuro .extra-field input, body.tema-oscuro .extra-field textarea { background: #1d2026 !important; color: #f3f6f9 !important; border-color: var(--tema-borde) !important; } body.tema-oscuro .tabla-datos th, body.tema-oscuro .tabla th, body.tema-oscuro .cap-table th, body.tema-oscuro .ce-table th, body.tema-oscuro .hc-tabla th, body.tema-oscuro .panel-titulo, body.tema-oscuro .barra-tabla { background: #20242a !important; color: #e6ebf0 !important; border-color: var(--tema-borde) !important; } body.tema-oscuro .tabla-datos td, body.tema-oscuro .tabla td, body.tema-oscuro .cap-table td, body.tema-oscuro .ce-table td, body.tema-oscuro .hc-tabla td { color: #edf1f5 !important; border-color: var(--tema-borde) !important; } body.tema-oscuro .hc-materias, body.tema-oscuro .hc-materia-cabecera, body.tema-oscuro .hc-ciclo-resumen, body.tema-oscuro .hc-ciclo-resumen div, body.tema-oscuro .hc-parcial, body.tema-oscuro .hc-resultado, body.tema-oscuro .hc-extra, body.tema-oscuro .cap-meta div, body.tema-oscuro .kx-meta, body.tema-oscuro .kx-promedio-ciclo { background: #20242a !important; color: #edf1f5 !important; border-color: var(--tema-borde) !important; } body.tema-oscuro p, body.tema-oscuro small, body.tema-oscuro .subtitulo, body.tema-oscuro .hc-panel p, body.tema-oscuro .hc-dato span, body.tema-oscuro .hc-parcial span, body.tema-oscuro .hc-resultado span, body.tema-oscuro .hc-extra span, body.tema-oscuro .hc-extra small, body.tema-oscuro .kx-fecha-generacion, body.tema-oscuro .ce-summary-label { color: #b8c0ca !important; } body.tema-oscuro h1, body.tema-oscuro h2, body.tema-oscuro h3, body.tema-oscuro h4, body.tema-oscuro label, body.tema-oscuro strong, body.tema-oscuro .hc-dato strong, body.tema-oscuro .hc-nombre, body.tema-oscuro .hc-parcial strong, body.tema-oscuro .hc-resultado strong, body.tema-oscuro .hc-resumen-general strong, body.tema-oscuro .ce-summary-value { color: #f3f6f9 !important; } }