/* ═══════════════════════════════════════════════════════════════════════════ TEMA.CSS — Sistema de diseño minimalista + tema claro/oscuro ─────────────────────────────────────────────────────────────────────────── Se carga DESPUÉS de cascade.css y elegante.css: es la capa que manda. Estrategia: 1. Define tokens semánticos (--t-*) que cambian según el tema. 2. RE-MAPEA las variables que ya usan cascade.css/elegante.css (--eg-*, --login-*, --light-gray…) hacia esos tokens → tematiza casi todo el sistema sin reescribir miles de reglas. 3. Puentea las variables de Bootstrap 5.3 (--bs-*) a nuestra paleta, para que tablas, modales, dropdowns y formularios sigan el tema nativamente. El tema lo fija scripts/tema.js sobre : data-tema="light|dark" y data-bs-theme="light|dark" ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── 1. TOKENS — TEMA CLARO (por defecto) ─────────────────────────────────────────────────────────────────────────── */ :root, [data-tema="light"] { /* Superficies */ --t-bg: #f4f6f8; /* fondo de página */ --t-surface: #ffffff; /* tarjetas, contenedores */ --t-surface-2: #f7f8fa; /* cabeceras de tabla, paneles sutiles */ --t-surface-3: #eef0f3; /* hover de filas, zonas hundidas */ /* Bordes */ --t-border: #e3e6ea; --t-border-subtle: #eef0f2; --t-border-strong: #d3d8de; /* Texto */ --t-text: #16202c; --t-text-muted: #66707c; --t-text-faint: #97a0aa; --t-text-invert: #ffffff; /* Marca / acento (se conserva el ámbar de la identidad) */ --t-accent: #d98207; --t-accent-hover: #b96c04; --t-accent-contrast: #ffffff; --t-accent-soft: rgba(217, 130, 7, 0.10); /* Primario de acción (azul de la identidad) */ --t-primary: #2563eb; --t-primary-hover: #1d4ed8; --t-primary-contrast: #ffffff; --t-primary-soft: rgba(37, 99, 235, 0.08); /* Semánticos */ --t-success: #0f8a5f; --t-success-soft: rgba(15, 138, 95, 0.10); --t-danger: #d92d20; --t-danger-soft: rgba(217, 45, 32, 0.10); --t-warning: #b25e09; --t-warning-soft: rgba(178, 94, 9, 0.10); --t-info: #0b6bcb; --t-info-soft: rgba(11, 107, 203, 0.10); /* Navbar (slate profundo: mantiene la identidad de marca) */ --t-nav-bg: #131a24; --t-nav-bg-2: #1b2431; --t-nav-text: rgba(255, 255, 255, 0.82); --t-nav-text-on: #ffffff; --t-nav-border: var(--t-accent); /* Sombras — discretas (minimalismo) */ --t-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --t-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.05); --t-shadow-lg: 0 8px 28px rgba(16, 24, 40, 0.10), 0 2px 8px rgba(16, 24, 40, 0.05); /* Forma */ --t-radius-sm: 6px; --t-radius: 10px; --t-radius-lg: 14px; --t-ring: 0 0 0 3px rgba(37, 99, 235, 0.22); --t-transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); } /* ─────────────────────────────────────────────────────────────────────────── 2. TOKENS — TEMA OSCURO ─────────────────────────────────────────────────────────────────────────── */ [data-tema="dark"] { --t-bg: #0e1116; --t-surface: #161b22; --t-surface-2: #1c222c; --t-surface-3: #232a35; --t-border: #2a323d; --t-border-subtle: #222933; --t-border-strong: #3a434f; --t-text: #e6e9ed; --t-text-muted: #9aa4b1; --t-text-faint: #6e7887; --t-text-invert: #0e1116; /* Acento aclarado para conservar contraste sobre fondo oscuro */ --t-accent: #f0a63c; --t-accent-hover: #f7bc63; --t-accent-contrast: #17120a; --t-accent-soft: rgba(240, 166, 60, 0.14); --t-primary: #5c93f7; --t-primary-hover: #7dabff; --t-primary-contrast: #0b1220; --t-primary-soft: rgba(92, 147, 247, 0.14); --t-success: #3ac08a; --t-success-soft: rgba(58, 192, 138, 0.14); --t-danger: #f2705f; --t-danger-soft: rgba(242, 112, 95, 0.14); --t-warning: #e5a04a; --t-warning-soft: rgba(229, 160, 74, 0.14); --t-info: #58a6ff; --t-info-soft: rgba(88, 166, 255, 0.14); --t-nav-bg: #0b0e13; --t-nav-bg-2: #12171f; --t-nav-text: rgba(255, 255, 255, 0.78); --t-nav-text-on: #ffffff; /* En oscuro las sombras pesan más y se apoyan en el borde */ --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --t-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45); --t-shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.55); --t-ring: 0 0 0 3px rgba(92, 147, 247, 0.30); color-scheme: dark; /* scrollbars y controles nativos en oscuro */ } /* ─────────────────────────────────────────────────────────────────────────── 3. RE-MAPEO de las variables existentes → tokens (aquí es donde cascade.css y elegante.css se vuelven theme-aware) ─────────────────────────────────────────────────────────────────────────── */ :root, [data-tema="light"], [data-tema="dark"] { /* elegante.css */ --eg-bg: var(--t-bg); --eg-surface: var(--t-surface); --eg-border: var(--t-border); --eg-border-subtle: var(--t-border-subtle); --eg-shadow-sm: var(--t-shadow-sm); --eg-shadow-md: var(--t-shadow-md); --eg-shadow-lg: var(--t-shadow-lg); --eg-shadow-nav: var(--t-shadow-md); --eg-shadow-dropdown: var(--t-shadow-lg); --eg-transition: var(--t-transition); /* cascade.css — semánticos seguros de remapear */ --light-gray: var(--t-border); --border-radius: var(--t-radius); --border-radius-large: var(--t-radius-lg); --transition: var(--t-transition); --shadow-soft: var(--t-shadow-sm); --shadow-hover: var(--t-shadow-md); --shadow-primary: var(--t-shadow-md); --primary-color: var(--t-primary); --primary-dark: var(--t-primary-hover); --error-color: var(--t-danger); --warning-color: var(--t-warning); --success-color: var(--t-success); --accent-color: var(--t-accent); /* Alias de marca */ --aa-dorado: var(--t-accent); --aa-dorado-light: var(--t-accent-hover); --aa-rojo: var(--t-primary); --aa-gris-oscuro: var(--t-nav-bg); --aa-gris-dark: var(--t-nav-bg); /* login (cascade.css) */ --login-white: var(--t-surface); --login-glass: var(--t-surface); --login-border: var(--t-border); --login-text-dark: var(--t-text); --login-text-light: var(--t-text-muted); --login-primary: var(--t-primary); --login-accent: var(--t-accent); --login-shadow-sm: var(--t-shadow-sm); --login-shadow-md: var(--t-shadow-md); } /* Texto: en oscuro estas dos deben invertirse (se usan como color de texto sobre superficies) — se remapean solo en oscuro para no romper el claro. */ [data-tema="dark"] { --text-dark: var(--t-text); --secondary-color: var(--t-text); } /* ─────────────────────────────────────────────────────────────────────────── 4. PUENTE CON BOOTSTRAP 5.3 (modo oscuro nativo con NUESTRA paleta) ─────────────────────────────────────────────────────────────────────────── */ [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--t-bg); --bs-body-color: var(--t-text); --bs-emphasis-color: var(--t-text); --bs-secondary-color: var(--t-text-muted); --bs-secondary-bg: var(--t-surface-2); --bs-tertiary-bg: var(--t-surface-3); --bs-tertiary-color: var(--t-text-faint); --bs-border-color: var(--t-border); --bs-border-color-translucent: var(--t-border); --bs-border-radius: var(--t-radius); --bs-border-radius-sm: var(--t-radius-sm); --bs-border-radius-lg: var(--t-radius-lg); --bs-link-color: var(--t-primary); --bs-link-hover-color: var(--t-primary-hover); --bs-primary: var(--t-primary); --bs-heading-color: var(--t-text); --bs-box-shadow-sm: var(--t-shadow-sm); --bs-box-shadow: var(--t-shadow-md); --bs-box-shadow-lg: var(--t-shadow-lg); } /* ─────────────────────────────────────────────────────────────────────────── 5. BASE ─────────────────────────────────────────────────────────────────────────── */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, body.pagina { background: var(--t-bg) !important; color: var(--t-text) !important; transition: background-color 0.2s ease, color 0.2s ease; } /* Que el texto genérico herede el color del tema (elegante.css lo fija oscuro) */ [data-tema="dark"] p, [data-tema="dark"] span, [data-tema="dark"] li, [data-tema="dark"] label, [data-tema="dark"] td, [data-tema="dark"] th, [data-tema="dark"] h1, [data-tema="dark"] h2, [data-tema="dark"] h3, [data-tema="dark"] h4, [data-tema="dark"] h5, [data-tema="dark"] h6 { color: var(--t-text); } [data-tema="dark"] .text-muted { color: var(--t-text-muted) !important; } [data-tema="dark"] .text-dark { color: var(--t-text) !important; } ::selection { background: var(--t-accent-soft); color: var(--t-text); } /* Barras de desplazamiento discretas */ * { scrollbar-width: thin; scrollbar-color: var(--t-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--t-border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--t-text-faint); } /* Foco visible y consistente (accesibilidad) */ :focus-visible { outline: none !important; box-shadow: var(--t-ring) !important; border-radius: var(--t-radius-sm); } /* ─────────────────────────────────────────────────────────────────────────── 6. CONTENEDORES / TARJETAS ─────────────────────────────────────────────────────────────────────────── */ .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-spacing, .fondo-container { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-radius-lg) !important; box-shadow: var(--t-shadow-sm) !important; color: var(--t-text) !important; } /* El contenedor del navbar no debe verse como tarjeta */ .navegador-superior .container, .navegador-superior .container-fluid { background: transparent !important; border: none !important; box-shadow: none !important; } .card { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow-sm) !important; color: var(--t-text) !important; } .card-header { background: var(--t-surface-2) !important; border-bottom: 1px solid var(--t-border) !important; color: var(--t-text) !important; } .card-footer { background: var(--t-surface-2) !important; border-top: 1px solid var(--t-border) !important; } /* Encabezado de sección de página */ .page-section-header { border-bottom: 1px solid var(--t-border) !important; color: var(--t-text) !important; } .page-section-header h2, .page-section-header h4 { color: var(--t-text) !important; } .page-section-icon { background: var(--t-accent-soft) !important; color: var(--t-accent) !important; border-radius: var(--t-radius) !important; } /* Pie de página */ .leyenda-tabla { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-radius) !important; color: var(--t-text-muted) !important; box-shadow: none !important; } .leyenda-tabla p { color: var(--t-text-muted) !important; margin-bottom: 0 !important; } /* ─────────────────────────────────────────────────────────────────────────── 7. NAVBAR ─────────────────────────────────────────────────────────────────────────── */ .navegador-superior { background: var(--t-nav-bg) !important; background-image: linear-gradient(180deg, var(--t-nav-bg-2) 0%, var(--t-nav-bg) 100%) !important; border-bottom: 1px solid var(--t-border) !important; box-shadow: var(--t-shadow-sm) !important; } .navegador-superior .navbar-brand { color: var(--t-accent) !important; letter-spacing: 0.4px !important; } .navegador-superior .navbar-brand:hover { color: var(--t-accent-hover) !important; } .palabras-menu { color: var(--t-nav-text) !important; border-radius: var(--t-radius-sm) !important; transition: var(--t-transition) !important; } .palabras-menu:hover, .palabras-menu:focus { color: var(--t-nav-text-on) !important; background: rgba(255, 255, 255, 0.07) !important; } .palabras-menu.active, .palabras-menu[aria-expanded="true"] { color: var(--t-accent) !important; background: var(--t-accent-soft) !important; } /* Menús desplegables del navbar */ .navegador-superior .dropdown-menu { background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-top: 2px solid var(--t-accent) !important; border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow-lg) !important; } .palabras-menu-oscuro { color: var(--t-text) !important; border-radius: var(--t-radius-sm) !important; } .palabras-menu-oscuro:hover, .palabras-menu-oscuro:focus { background: var(--t-primary-soft) !important; color: var(--t-primary) !important; transform: none !important; /* minimalismo: sin desplazamiento */ } .navegador-superior .dropdown-divider { border-top-color: var(--t-border) !important; } /* ─────────────────────────────────────────────────────────────────────────── 8. SELECTOR DE TEMA (navbar) ─────────────────────────────────────────────────────────────────────────── */ #tema-boton { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: var(--t-nav-text) !important; border-radius: var(--t-radius-sm) !important; padding: 0.28rem 0.5rem !important; line-height: 1 !important; transition: var(--t-transition) !important; } #tema-boton:hover, #tema-boton[aria-expanded="true"] { color: var(--t-accent) !important; border-color: var(--t-accent) !important; background: rgba(255, 255, 255, 0.06) !important; } #tema-menu { min-width: 11rem; background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow-lg) !important; padding: 0.3rem !important; } #tema-menu .dropdown-item { display: flex !important; align-items: center !important; gap: 0.5rem !important; color: var(--t-text) !important; border-radius: var(--t-radius-sm) !important; font-size: 0.85rem !important; padding: 0.45rem 0.6rem !important; cursor: pointer; } #tema-menu .dropdown-item:hover { background: var(--t-primary-soft) !important; color: var(--t-primary) !important; } #tema-menu .dropdown-item.active { background: var(--t-accent-soft) !important; color: var(--t-accent) !important; font-weight: 600 !important; } #tema-menu .tema-check { margin-left: auto; } /* ─────────────────────────────────────────────────────────────────────────── 9. UTILIDADES DE SUPERFICIE (usadas por varias vistas) ─────────────────────────────────────────────────────────────────────────── */ .bg-light { background-color: var(--t-surface-2) !important; color: var(--t-text) !important; } .bg-white { background-color: var(--t-surface) !important; } .border { border-color: var(--t-border) !important; } .border-top, .border-bottom, .border-start, .border-end { border-color: var(--t-border) !important; } hr { border-color: var(--t-border) !important; opacity: 1 !important; } /* Alertas: versión sobria basada en tokens */ .alert { border-radius: var(--t-radius) !important; border-width: 1px !important; } .alert-info { background: var(--t-info-soft) !important; border-color: var(--t-info) !important; color: var(--t-info) !important; } .alert-warning { background: var(--t-warning-soft) !important; border-color: var(--t-warning) !important; color: var(--t-warning) !important; } .alert-danger { background: var(--t-danger-soft) !important; border-color: var(--t-danger) !important; color: var(--t-danger) !important; } .alert-success { background: var(--t-success-soft) !important; border-color: var(--t-success) !important; color: var(--t-success) !important; } .alert-secondary { background: var(--t-surface-2) !important; border-color: var(--t-border) !important; color: var(--t-text-muted) !important; }