/* GeoSales - Theme Layer (Claro / Oscuro) ------------------------------------------------------------ - Default: se mantiene el tema actual (Claro) sin modificaciones. - Oscuro: se activa cuando tiene la clase .gs-theme-dark - Incluye estilos del switcher de tema junto al nombre de usuario. */ /* ============================== Switcher (botones pequeños) ============================== */ .profile-info .gs-user-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .profile-info .gs-user-row .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-info .gs-user-row2 { line-height: 1.15; } .gs-theme-toggle { display: inline-flex; align-items: center; gap: 4px; } .gs-theme-btn { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(15, 23, 42, 0.18); background: rgba(255, 255, 255, 0.55); color: #0f172a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; } .gs-theme-btn i { font-size: 12px; line-height: 1; } .gs-theme-btn:hover { filter: brightness(0.98); } .gs-theme-btn:active { filter: brightness(0.95); } .gs-theme-btn.is-active { background: rgba(13, 110, 253, 0.22); border-color: rgba(13, 110, 253, 0.55); } /* ============================== Corporate Theme (Claro + morado Mondelez) ------------------------------ - Activo cuando o tiene la clase .gs-theme-corporativo - Es un modo claro (no oscuro) con acentos morados. ============================== */ html.gs-theme-corporativo, body.gs-theme-corporativo { color-scheme: light; /* Brand (morado Mondelez aproximado) */ --gs-brand-900: #3a135d; --gs-brand-800: #502172; --gs-brand-700: #5a2a82; --gs-brand-600: #6a33a0; --gs-brand-500: #8553a9; /* Light palette */ --gs-bg: #fbfafc; --gs-surface: #ffffff; --gs-surface-2: #f6f2f8; --gs-border: rgba(58, 19, 93, 0.14); --gs-text: #0f172a; --gs-muted: rgba(15, 23, 42, 0.72); --gs-link: var(--gs-brand-700); --gs-link-hover: var(--gs-brand-800); /* Accents */ --gs-accent: var(--gs-brand-700); --gs-accent-soft: rgba(90, 42, 130, 0.14); --gs-accent-soft-2: rgba(90, 42, 130, 0.22); /* Re-map "blue soft" vars usados en theme-custom.css (para que se vean en morado) */ --geosales-blue-soft: rgba(90, 42, 130, 0.10); --geosales-blue-soft-2: rgba(90, 42, 130, 0.16); --geosales-blue-soft-border: rgba(90, 42, 130, 0.28); --geosales-blue-focus: rgba(90, 42, 130, 0.35); /* Re-map base "blue" vars (usados por DataTables / favoritos / varios componentes) */ --geosales-blue: var(--gs-brand-700); --geosales-blue-hover: var(--gs-brand-800); --geosales-blue-active: var(--gs-brand-900); /* Bootstrap-ish vars */ --bs-body-bg: var(--gs-bg); --bs-body-color: var(--gs-text); --bs-link-color: var(--gs-link); --bs-link-hover-color: var(--gs-link-hover); } /* Switcher: en corporativo va sobre una topbar morada => contraste alto */ html.gs-theme-corporativo .gs-theme-btn, body.gs-theme-corporativo .gs-theme-btn { border-color: rgba(255,255,255,0.38); background: rgba(255,255,255,0.18); color: #ffffff; } html.gs-theme-corporativo .gs-theme-btn:hover, body.gs-theme-corporativo .gs-theme-btn:hover { background: rgba(255,255,255,0.26); } html.gs-theme-corporativo .gs-theme-btn.is-active, body.gs-theme-corporativo .gs-theme-btn.is-active { background: rgba(255,255,255,0.34); border-color: rgba(255,255,255,0.65); } /* Topbar / Menú principal: morado corporativo */ body.gs-theme-corporativo .FrameSuperior { background-color: var(--gs-brand-800) !important; } /* Nombre de usuario y fecha en topbar (evitar texto oscuro sobre morado) */ html.gs-theme-corporativo .userbox .name, body.gs-theme-corporativo .userbox .name { color: rgba(255,255,255,0.98) !important; } html.gs-theme-corporativo #lblFecha, html.gs-theme-corporativo #lblHora, body.gs-theme-corporativo #lblFecha, body.gs-theme-corporativo #lblHora { color: rgba(255,255,255,0.78) !important; } body.gs-theme-corporativo .bar-dir { background-color: var(--gs-brand-700) !important; } /* Breadcrumbs + Dock (Workspaces/Paneles) en barra superior (bar-dir) */ body.gs-theme-corporativo .bar-dir .mind-breadcrumb-wrap, body.gs-theme-corporativo .bar-dir #mindBreadcrumbs { color: rgba(255,255,255,0.92) !important; } body.gs-theme-corporativo .bar-dir .mind-breadcrumb-wrap i { color: rgba(255,255,255,0.92) !important; } body.gs-theme-corporativo .bar-dir .mind-bc-sep { color: rgba(255,255,255,0.70) !important; padding: 0 6px; } body.gs-theme-corporativo .bar-dir .mind-bc-link { color: rgba(255,255,255,0.96) !important; text-decoration: none !important; font-weight: 700; padding: 2px 8px; border-radius: 10px; } body.gs-theme-corporativo .bar-dir .mind-bc-link:hover { background: rgba(255,255,255,0.18) !important; color: #ffffff !important; } body.gs-theme-corporativo .bar-dir .mind-bc-current { color: rgba(255,255,255,0.98) !important; font-weight: 800; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.14); } /* Dock superior (botones Workspaces/Paneles y lista de ventanas) */ body.gs-theme-corporativo #gsWinDock.gs-dock--top { border-left-color: rgba(255,255,255,0.22) !important; } body.gs-theme-corporativo #gsWinDock.gs-dock--top .gs-dock__btn { border-color: rgba(255,255,255,0.32) !important; background: rgba(255,255,255,0.16) !important; color: #ffffff !important; } body.gs-theme-corporativo #gsWinDock.gs-dock--top .gs-dock__btn:hover { background: rgba(255,255,255,0.24) !important; border-color: rgba(255,255,255,0.46) !important; } body.gs-theme-corporativo #gsWinDock.gs-dock--top .gs-dock__btn:active { background: rgba(255,255,255,0.30) !important; } body.gs-theme-corporativo #gsWinDock.gs-dock--top .gs-dock-item { border-color: rgba(255,255,255,0.32) !important; background: rgba(255,255,255,0.16) !important; color: #ffffff !important; } body.gs-theme-corporativo #gsWinDock.gs-dock--top .gs-dock-item:hover { background: rgba(255,255,255,0.24) !important; border-color: rgba(255,255,255,0.46) !important; } body.gs-theme-corporativo #gsWinDock.gs-dock--top .gs-dock-item.is-active { background: rgba(255,255,255,0.30) !important; border-color: rgba(255,255,255,0.62) !important; } body.gs-theme-corporativo .menu-tab, body.gs-theme-corporativo .menu-tab-opciones { background-color: var(--gs-brand-700) !important; border-color: var(--gs-brand-800) !important; } body.gs-theme-corporativo .menu-tab:hover, body.gs-theme-corporativo .menu-tab:focus, body.gs-theme-corporativo .menu-tab-opciones:hover, body.gs-theme-corporativo .menu-tab-opciones:focus { background-color: var(--gs-brand-800) !important; } body.gs-theme-corporativo .navbar-nav .dropdown-menu { border-color: var(--gs-brand-800) !important; } /* Bootstrap buttons (mantener look general pero en morado) */ body.gs-theme-corporativo .btn-primary, body.gs-theme-corporativo .btn-primary:visited { background-color: var(--gs-brand-700) !important; border-color: var(--gs-brand-700) !important; } body.gs-theme-corporativo .btn-primary:hover, body.gs-theme-corporativo .btn-primary:focus { background-color: var(--gs-brand-800) !important; border-color: var(--gs-brand-800) !important; } body.gs-theme-corporativo .btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(90, 42, 130, 0.25) !important; } body.gs-theme-corporativo .text-primary { color: var(--gs-brand-700) !important; } body.gs-theme-corporativo .bg-primary { background-color: var(--gs-brand-700) !important; } /* ============================== Dark Theme (overrides) ============================== */ html.gs-theme-dark, body.gs-theme-dark { color-scheme: dark; /* Palette */ --gs-bg: #0b1220; --gs-surface: #0f172a; --gs-surface-2: #111827; --gs-border: rgba(255, 255, 255, 0.12); --gs-text: #e5e7eb; --gs-muted: #9ca3af; --gs-link: #93c5fd; --gs-link-hover: #bfdbfe; /* Accents */ --gs-accent: #3b82f6; --gs-accent-soft: rgba(59, 130, 246, 0.18); --gs-accent-soft-2: rgba(59, 130, 246, 0.26); --gs-danger: #ef4444; --gs-success: #22c55e; --gs-warning: #f59e0b; --gs-info: #38bdf8; /* Re-map existing GeoSales "soft" vars to dark-friendly values */ --geosales-blue-soft: rgba(59, 130, 246, 0.14); --geosales-blue-soft-2: rgba(59, 130, 246, 0.22); --geosales-blue-soft-border: rgba(59, 130, 246, 0.30); --geosales-blue-focus: rgba(59, 130, 246, 0.35); /* Report surfaces (theme-custom.css already usa estos vars) */ --report-surface: var(--gs-surface); --report-surface-2: rgba(255,255,255,0.04); --report-border: var(--gs-border); --report-border-soft: rgba(255,255,255,0.08); --report-text: var(--gs-text); --report-muted: var(--gs-muted); --report-row-hover: rgba(59,130,246,0.12); --report-shadow: 0 1px 2px rgba(0,0,0,0.45); /* Dashboard V2 vars (dashboard-v2.css usa estos) */ --gsdb-bg: var(--gs-bg); --gsdb-card-bg: var(--gs-surface); --gsdb-border: rgba(255,255,255,0.12); --gsdb-title: var(--gs-text); --gsdb-muted: var(--gs-muted); --gsdb-shadow: 0 10px 28px rgba(0,0,0,0.55); --gsdb-focus: rgba(59,130,246,0.55); /* Bootstrap-ish vars (v5.1.x) */ --bs-body-bg: var(--gs-bg); --bs-body-color: var(--gs-text); --bs-border-color: var(--gs-border); --bs-secondary-color: var(--gs-muted); } html.gs-theme-dark body, html.gs-theme-dark #content_todo, html.gs-theme-dark .content-body { background: var(--gs-bg) !important; color: var(--gs-text) !important; } html.gs-theme-dark a { color: var(--gs-link); } html.gs-theme-dark a:hover { color: var(--gs-link-hover); } /* Topbar + breadcrumb bar */ html.gs-theme-dark .FrameSuperior { background: var(--gs-bg) !important; } html.gs-theme-dark .bar-dir { background: var(--gs-surface) !important; border-bottom: 1px solid var(--gs-border); } html.gs-theme-dark .mind-breadcrumb-wrap { color: var(--gs-text) !important; } /* Offcanvas menus */ html.gs-theme-dark .offcanvas, html.gs-theme-dark .mind-offcanvas-menu { background: var(--gs-surface) !important; color: var(--gs-text) !important; } /* ============================== Menú lateral izquierdo (Offcanvas) ============================== */ html.gs-theme-dark .mind-offcanvas-menu{ border-right: 1px solid var(--gs-border) !important; } html.gs-theme-dark .mind-offcanvas-menu .offcanvas-header{ background-color: var(--gs-surface) !important; color: var(--gs-text) !important; border-bottom: 1px solid var(--gs-border) !important; } html.gs-theme-dark .mind-offcanvas-menu .offcanvas-body{ background-color: var(--gs-surface) !important; color: var(--gs-text) !important; } html.gs-theme-dark .mind-offcanvas-menu .btn-close{ /* Bootstrap usa SVG negro, invertimos para que sea visible */ filter: invert(1) grayscale(1); opacity: 0.85; } html.gs-theme-dark .mind-offcanvas-menu .btn-close:hover{ opacity: 1; } html.gs-theme-dark .mind-offcanvas-menu .mind-sidebar-search{ background-color: #0f172a !important; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(229, 231, 235, 0.18) !important; } /* Resaltado de búsqueda (match) */ html.gs-theme-dark .mind-match{ background-color: rgba(255, 255, 255, 0.22) !important; color: #d2c993 !important; } /* Links del árbol */ html.gs-theme-dark .mind-nav-main > li{ border-bottom: 1px solid rgba(255,255,255,0.08) !important; } html.gs-theme-dark .mind-nav-main li > a{ color: var(--gs-text) !important; } html.gs-theme-dark .mind-nav-main li > a:hover, html.gs-theme-dark .mind-nav-main li > a:focus{ background-color: var(--gs-accent-soft) !important; color: var(--gs-text) !important; } html.gs-theme-dark .mind-nav-main li i{ color: #93c5fd !important; } /* Botón hamburguesa */ html.gs-theme-dark .mind-menu-btn{ background-color: rgba(255,255,255,0.06) !important; border-color: var(--gs-border) !important; color: var(--gs-text) !important; } html.gs-theme-dark .mind-menu-btn:hover, html.gs-theme-dark .mind-menu-btn:focus{ background-color: var(--gs-accent-soft) !important; border-color: rgba(59,130,246,0.35) !important; color: var(--gs-text) !important; } html.gs-theme-dark .mind-sidebar-search input, html.gs-theme-dark .form-control, html.gs-theme-dark .form-select, html.gs-theme-dark input[type="text"], html.gs-theme-dark input[type="search"], html.gs-theme-dark input[type="number"], html.gs-theme-dark input[type="date"], html.gs-theme-dark select, html.gs-theme-dark textarea { background-color: rgba(255,255,255,0.06) !important; color: var(--gs-text) !important; border-color: var(--gs-border) !important; } html.gs-theme-dark .form-control::placeholder, html.gs-theme-dark input::placeholder, html.gs-theme-dark textarea::placeholder { color: rgba(229,231,235,0.55) !important; } html.gs-theme-dark .input-group-text { background: rgba(255,255,255,0.06) !important; border-color: var(--gs-border) !important; color: var(--gs-text) !important; } /* Dropdowns */ html.gs-theme-dark .dropdown-menu { background: var(--gs-surface-2) !important; border-color: var(--gs-border) !important; color: var(--gs-text) !important; } html.gs-theme-dark .dropdown-item { color: var(--gs-text) !important; } html.gs-theme-dark .dropdown-item:hover, html.gs-theme-dark .dropdown-item:focus { background: rgba(59, 130, 246, 0.18) !important; color: var(--gs-text) !important; } html.gs-theme-dark .dropdown-divider { border-top-color: var(--gs-border) !important; } /* Dropdown usuario (menú debajo del nombre) */ html.gs-theme-dark .mind-user-dropdown .mind-user-menu{ background: var(--gs-surface-2) !important; border-color: var(--gs-border) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important; } html.gs-theme-dark .mind-user-dropdown .mind-user-menu .dropdown-item{ color: var(--gs-text) !important; } html.gs-theme-dark .mind-user-dropdown .mind-user-menu .dropdown-item i{ color: #93c5fd !important; } /* Cards / Modals */ html.gs-theme-dark .card, html.gs-theme-dark .modal-content { background: var(--gs-surface) !important; border-color: var(--gs-border) !important; color: var(--gs-text) !important; } html.gs-theme-dark .modal-header, html.gs-theme-dark .modal-footer{ background: #3f6cca !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } html.gs-theme-dark .modal-header .btn-close{ filter: invert(1) grayscale(1); opacity: 0.85; } html.gs-theme-dark .modal-header .btn-close:hover{ opacity: 1; } html.gs-theme-dark .modal-title{ color: var(--gs-text) !important; } /* ============================== Favoritos (topbar / dropdown / modal) ============================== */ html.gs-theme-dark .mind-fav-card{ background: rgba(255,255,255,0.06) !important; border-color: var(--gs-border) !important; color: var(--gs-text) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.45) !important; } html.gs-theme-dark .mind-fav-card:hover{ background: var(--gs-accent-soft) !important; border-color: rgba(59,130,246,0.35) !important; color: var(--gs-text) !important; } html.gs-theme-dark .mind-fav-text{ color: var(--gs-text) !important; } html.gs-theme-dark .mind-fav-icon{ color: #93c5fd !important; } html.gs-theme-dark .mind-favs-mobile-btn{ background: rgba(255,255,255,0.06) !important; border-color: var(--gs-border) !important; color: var(--gs-text) !important; } html.gs-theme-dark .mind-favs-mobile-btn:hover, html.gs-theme-dark .mind-favs-mobile-btn:focus{ background: var(--gs-accent-soft) !important; border-color: rgba(59,130,246,0.35) !important; color: var(--gs-text) !important; } html.gs-theme-dark .mind-fav-dd-text, html.gs-theme-dark .mind-fav-dd-item, html.gs-theme-dark .mind-fav-selected-text, html.gs-theme-dark .mind-fav-search-text, html.gs-theme-dark .mind-fav-tree-text{ color: var(--gs-text) !important; } html.gs-theme-dark .mind-fav-dd-empty, html.gs-theme-dark .mind-fav-selected-empty, html.gs-theme-dark .mind-fav-search-empty, html.gs-theme-dark .mind-fav-edit-subtitle{ color: var(--gs-muted) !important; } html.gs-theme-dark .mind-fav-dd-item:hover, html.gs-theme-dark .mind-fav-search-item:hover, html.gs-theme-dark .mind-fav-tree-row:hover, html.gs-theme-dark .mind-fav-selected-item:hover{ background: var(--gs-accent-soft) !important; } html.gs-theme-dark .mind-fav-selected-item, html.gs-theme-dark .mind-fav-search-item, html.gs-theme-dark .mind-fav-tree-row{ border-color: rgba(255,255,255,0.10) !important; } /* ============================== Reportes: filtros + DataTables (usa vars --report-*) ============================== */ html.gs-theme-dark .filters, html.gs-theme-dark .dataTables_wrapper{ color: var(--report-text) !important; } html.gs-theme-dark .dataTables_wrapper .dataTables_length label, html.gs-theme-dark .dataTables_wrapper .dataTables_filter label, html.gs-theme-dark .dataTables_wrapper .dataTables_info{ color: var(--report-muted) !important; } html.gs-theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-link{ background: rgba(255,255,255,0.06) !important; border-color: var(--report-border) !important; color: var(--report-text) !important; } html.gs-theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-link:hover{ background: var(--gs-accent-soft) !important; border-color: rgba(59,130,246,0.35) !important; color: var(--report-text) !important; } html.gs-theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link{ background: rgba(59,130,246,0.70) !important; border-color: rgba(59,130,246,0.70) !important; color: #fff !important; } html.gs-theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link{ background: rgba(255,255,255,0.03) !important; border-color: var(--report-border) !important; color: rgba(229,231,235,0.35) !important; } /* ========================================= DataTables (TABLA) en reportes (modo oscuro) - Debe verse igual que tablas del Dashboard ========================================= */ html.gs-theme-dark .dataTables_wrapper table.dataTable, html.gs-theme-dark table.dataTable{ background: var(--gs-surface) !important; color: var(--gs-text) !important; border-color: var(--gs-border) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable.no-footer, html.gs-theme-dark table.dataTable.no-footer{ border-bottom: 1px solid var(--gs-border) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable thead th, html.gs-theme-dark .dataTables_wrapper table.dataTable thead td, html.gs-theme-dark table.dataTable thead th, html.gs-theme-dark table.dataTable thead td{ background: rgba(25, 64, 128, 0.95) !important; /* similar al dashboard */ color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.14) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 0.3px; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr{ background: var(--gs-surface) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd{ background: var(--gs-surface) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even{ background: rgba(255,255,255,0.02) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody td{ color: var(--gs-text) !important; border-top: 1px solid rgba(255,255,255,0.06) !important; font-size: 12px !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr:hover{ background: rgba(59,130,246,0.18) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr:hover td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr:hover td *{ color: #ffffff !important; } /* Sorting icons */ html.gs-theme-dark table.dataTable thead .sorting:before, html.gs-theme-dark table.dataTable thead .sorting:after, html.gs-theme-dark table.dataTable thead .sorting_asc:before, html.gs-theme-dark table.dataTable thead .sorting_asc:after, html.gs-theme-dark table.dataTable thead .sorting_desc:before, html.gs-theme-dark table.dataTable thead .sorting_desc:after{ color: rgba(255,255,255,0.70) !important; } html.gs-theme-dark .table{ --bs-table-color: var(--gs-text); --bs-table-bg: transparent; --bs-table-border-color: var(--gs-border); --bs-table-striped-bg: rgba(255,255,255,0.04); --bs-table-striped-color: var(--gs-text); --bs-table-hover-bg: rgba(59,130,246,0.10); --bs-table-hover-color: var(--gs-text); } /* ============================== Dashboard V2 (usa vars --gsdb-*) ============================== */ html.gs-theme-dark .gsdb{ background: var(--gsdb-bg) !important; } html.gs-theme-dark .gsdb__h1, html.gs-theme-dark .gsdb__sub, html.gs-theme-dark .gsdb__label, html.gs-theme-dark .gsdb__help{ color: var(--gsdb-title) !important; } html.gs-theme-dark .gsdb__sub, html.gs-theme-dark .gsdb__help, html.gs-theme-dark .gsdb__label, html.gs-theme-dark .gsdb-card__sub, html.gs-theme-dark .gsdb-kpi__meta{ color: var(--gsdb-muted) !important; } /* Tables */ html.gs-theme-dark .table { color: var(--gs-text) !important; } html.gs-theme-dark .table, html.gs-theme-dark .table th, html.gs-theme-dark .table td { border-color: var(--gs-border) !important; } /* Window Manager: frame + dock */ html.gs-theme-dark #gsWinDock.gs-dock--top { border-left-color: rgba(255,255,255,0.10); } html.gs-theme-dark #gsWinDock.gs-dock--top .gs-dock__btn, html.gs-theme-dark #gsWinDock.gs-dock--top .gs-dock-item { border-color: rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.06) !important; color: #f0f5ff !important; } html.gs-theme-dark #gsWinDock.gs-dock--top .gs-dock__btn:hover, html.gs-theme-dark #gsWinDock.gs-dock--top .gs-dock-item:hover { background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.32) !important; } html.gs-theme-dark .gs-win { background: var(--gs-surface) !important; border-color: rgba(255,255,255,0.14) !important; } html.gs-theme-dark .gs-win__body, html.gs-theme-dark .gs-win__content { background: var(--gs-surface) !important; } html.gs-theme-dark .gs-win__iframe { background: var(--gs-surface) !important; } /* Switch buttons in dark */ html.gs-theme-dark .gs-theme-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--gs-text); } html.gs-theme-dark .gs-theme-btn.is-active { background: rgba(59,130,246,0.22); border-color: rgba(59,130,246,0.55); } /* Scrollbars (webkit) */ html.gs-theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.gs-theme-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; } html.gs-theme-dark ::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); } /* ============================== Logos (Claro / Oscuro) - Agrega la clase .gs-logo-light y .gs-logo-dark a - En claro se muestra .gs-logo-light - En oscuro se muestra .gs-logo-dark ============================== */ .gs-logo-dark { display: none !important; } html.gs-theme-dark .gs-logo-light { display: none !important; } html.gs-theme-dark .gs-logo-dark { display: inline-block !important; } /* Corporativo */ .gs-logo-corporativo { display: none !important; } html.gs-theme-corporativo .gs-logo-light, html.gs-theme-corporativo .gs-logo-dark { display: none !important; } html.gs-theme-corporativo .gs-logo-corporativo { display: inline-block !important; } /* ============================== Ajustes de contraste global ============================== */ html.gs-theme-dark .profile-info .name { color: var(--gs-text) !important; } html.gs-theme-dark #lblFecha, html.gs-theme-dark #lblHora { color: var(--gs-muted) !important; } /* ============================== Menú superior (Tabs / Favoritos) ============================== */ html.gs-theme-dark .bg-dark-submenu { background: var(--gs-bg) !important; border-bottom: 1px solid var(--gs-border) !important; } html.gs-theme-dark a.menu-tab, html.gs-theme-dark .menu-tab { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--gs-text) !important; } html.gs-theme-dark .menu-tab:hover, html.gs-theme-dark .menu-tab:focus, html.gs-theme-dark .menu-tab:active, html.gs-theme-dark .menu-tab.menu-tab-activa{ background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.32) !important; color: var(--gs-text) !important; } html.gs-theme-dark .menu-tab-opciones{ background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--gs-text) !important; } html.gs-theme-dark .menu-tab-opciones:hover, html.gs-theme-dark .menu-tab-opciones:focus{ background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.32) !important; color: var(--gs-text) !important; } html.gs-theme-dark .navbar-nav .dropdown-menu, html.gs-theme-dark .dropdown-menu, html.gs-theme-dark .dropdown-menu.mega-content, html.gs-theme-dark .dropdown-menu.mega-content-opciones{ background: var(--gs-surface) !important; border-color: var(--gs-border) !important; } html.gs-theme-dark .dropdown-item, html.gs-theme-dark .dropdown-menu .item-menu{ color: var(--gs-text) !important; } html.gs-theme-dark .dropdown-item:hover, html.gs-theme-dark .dropdown-item:focus{ background: rgba(59,130,246,0.18) !important; color: var(--gs-text) !important; } /* Offcanvas general (header/body) */ html.gs-theme-dark .offcanvas-header, html.gs-theme-dark .offcanvas-body{ background: var(--gs-surface) !important; color: var(--gs-text) !important; border-color: var(--gs-border) !important; } /* ============================== Select2 (usado en filtros) ============================== */ html.gs-theme-dark .select2-container--default .select2-selection--single, html.gs-theme-dark .select2-container--default .select2-selection--multiple{ background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--gs-text) !important; } html.gs-theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered{ color: var(--gs-text) !important; } html.gs-theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice{ background: rgba(59,130,246,0.22) !important; border-color: rgba(59,130,246,0.35) !important; color: var(--gs-text) !important; } html.gs-theme-dark .select2-dropdown{ background: var(--gs-surface) !important; border-color: var(--gs-border) !important; color: var(--gs-text) !important; } html.gs-theme-dark .select2-results__option{ color: var(--gs-text) !important; } html.gs-theme-dark .select2-results__option--highlighted.select2-results__option--selectable{ background: rgba(59,130,246,0.18) !important; color: var(--gs-text) !important; } /* ============================== DataTables (tablas de reportes) ============================== */ html.gs-theme-dark table.dataTable, html.gs-theme-dark table.dataTable tbody{ background: transparent !important; color: var(--gs-text) !important; } html.gs-theme-dark table.dataTable thead th, html.gs-theme-dark table.dataTable thead td{ background: rgba(28,69,138,0.55) !important; color: var(--gs-text) !important; border-bottom: 1px solid var(--gs-border) !important; } html.gs-theme-dark table.dataTable tbody td{ color: var(--gs-text) !important; border-top-color: rgba(255,255,255,0.06) !important; } html.gs-theme-dark table.dataTable tbody tr:hover td{ background: rgba(59,130,246,0.12) !important; } html.gs-theme-dark table.dataTable.no-footer{ border-bottom-color: var(--gs-border) !important; } html.gs-theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button{ background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: var(--gs-text) !important; border-radius: 10px !important; margin: 0 2px !important; } html.gs-theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.30) !important; color: var(--gs-text) !important; } html.gs-theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current, html.gs-theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background: rgba(59,130,246,0.28) !important; border-color: rgba(59,130,246,0.45) !important; color: #ffffff !important; } /* ============================== Dashboard V2 (gsdb) - correcciones por colores hardcoded ============================== */ html.gs-theme-dark .gsdb-table tbody td{ color: var(--gs-text) !important; border-bottom-color: rgba(255,255,255,0.10) !important; } html.gs-theme-dark .gsdb-table tbody tr:hover td{ background: rgba(59,130,246,0.14) !important; } html.gs-theme-dark .gsdb-pill{ border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark .gsdb-pill--up{ background: rgba(34,197,94,0.20) !important; color: #86efac !important; } html.gs-theme-dark .gsdb-pill--down{ background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; } html.gs-theme-dark .gsdb-pill--neutral{ background: rgba(148,163,184,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark .gsdb-status{ border-color: rgba(255,255,255,0.14) !important; } html.gs-theme-dark .gsdb-status--ok{ background: rgba(34,197,94,0.18) !important; color: #86efac !important; } html.gs-theme-dark .gsdb-status--warn{ background: rgba(245,158,11,0.20) !important; color: #fcd34d !important; } html.gs-theme-dark .gsdb-status--bad{ background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; } html.gs-theme-dark .gsdb-tree__toggle{ background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark .gsdb-favitem:hover{ background: rgba(255,255,255,0.06) !important; } /* Botones del dashboard: filtros + configurar favoritos */ html.gs-theme-dark .gsdb__actions .btn.btn-light{ background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark .gsdb__actions .btn.btn-light:hover{ background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.30) !important; } html.gs-theme-dark #gsdbBtnFavs{ background: rgba(59,130,246,0.14) !important; border-color: rgba(59,130,246,0.45) !important; color: #bfdbfe !important; } html.gs-theme-dark #gsdbBtnFavs:hover{ background: rgba(59,130,246,0.20) !important; border-color: rgba(59,130,246,0.55) !important; color: #e0f2fe !important; } /* ============================== Workspaces / Paneles (ventanas internas) ============================== */ html.gs-theme-dark .gs-win[data-gswin-type="workspace-manager"] .gs-win__titlebar, html.gs-theme-dark .gs-win[data-gswin-type="tile-manager"] .gs-win__titlebar{ background: var(--gs-surface) !important; color: var(--gs-text) !important; border-bottom: 1px solid var(--gs-border) !important; } html.gs-theme-dark .gs-win[data-gswin-type="workspace-manager"] .gs-win__btn, html.gs-theme-dark .gs-win[data-gswin-type="tile-manager"] .gs-win__btn{ background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark .gs-wsm, html.gs-theme-dark .gs-tm{ color: var(--gs-text) !important; } html.gs-theme-dark .gs-wsm__label, html.gs-theme-dark .gs-tm__label, html.gs-theme-dark .gs-tm__panel-title{ color: rgba(229,231,235,0.72) !important; } html.gs-theme-dark .gs-wsm__input, html.gs-theme-dark .gs-tm__select{ background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--gs-text) !important; } html.gs-theme-dark .gs-wsm__input::placeholder{ color: rgba(229,231,235,0.45) !important; } html.gs-theme-dark .gs-wsm__btn, html.gs-theme-dark .gs-tm__btn{ background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--gs-text) !important; } html.gs-theme-dark .gs-wsm__btn:hover:not(:disabled), html.gs-theme-dark .gs-tm__btn:hover:not(:disabled){ background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.30) !important; } html.gs-theme-dark .gs-tm__panel{ background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.10) !important; } html.gs-theme-dark .gs-wsm__item:hover{ background: rgba(255,255,255,0.06) !important; } html.gs-theme-dark .gs-wsm__item-meta, html.gs-theme-dark .gs-wsm__empty, html.gs-theme-dark .gs-wsm__hint, html.gs-theme-dark .gs-tm__hint, html.gs-theme-dark .gs-tm__empty{ color: rgba(229,231,235,0.70) !important; } /* ============================== Bootstrap: utilidades "light" en modo oscuro ============================== */ html.gs-theme-dark .btn.btn-light, html.gs-theme-dark .btn.btn-outline-light { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark .btn.btn-light:hover, html.gs-theme-dark .btn.btn-outline-light:hover { background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.30) !important; } html.gs-theme-dark .bg-light { background-color: var(--gs-surface) !important; } html.gs-theme-dark .text-dark { color: var(--gs-text) !important; } /* ========================================= Dashboard (modo oscuro): hover en filas - Mantener contraste texto vs fondo hover ========================================= */ html.gs-theme-dark .gsdb table tbody tr:hover, html.gs-theme-dark .gsdb .table-hover tbody tr:hover{ color: #ffffff !important; } html.gs-theme-dark .gsdb table tbody tr:hover td, html.gs-theme-dark .gsdb table tbody tr:hover th, html.gs-theme-dark .gsdb .table-hover tbody tr:hover > *{ color: #ffffff !important; } html.gs-theme-dark .gsdb table tbody tr:hover td.text-muted, html.gs-theme-dark .gsdb table tbody tr:hover th.text-muted{ color: #ffffff !important; } html.gs-theme-dark .gsdb table tbody tr:hover a{ color: #ffffff !important; text-decoration-color: rgba(255,255,255,0.65) !important; } /* === v24 dark-mode fixes (DataTables + OffcanvasRight) === */ /* --------------------------------------------------------- 1) Reportes: DataTables (modo oscuro) - Arregla reglas heredadas con background-color: transparent - Mejora selección (doble click) y hover persistente --------------------------------------------------------- */ /* Header consistente (tipo Dashboard) */ html.gs-theme-dark .dataTables_wrapper table.dataTable thead th, html.gs-theme-dark .dataTables_wrapper table.dataTable thead td, html.gs-theme-dark .dataTables_wrapper table.table thead th, html.gs-theme-dark .dataTables_wrapper table.table thead td { background: rgba(25, 64, 128, 0.95) !important; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.14) !important; font-weight: 700 !important; font-size: 12px !important; } /* Tabla / cuerpo */ html.gs-theme-dark .dataTables_wrapper table.dataTable, html.gs-theme-dark .dataTables_wrapper table.table, html.gs-theme-dark table.dataTable { background: var(--gs-surface) !important; color: var(--gs-text) !important; border-color: var(--gs-border) !important; } /* Odd/Even: aplicar en TD/TH (evita transparencias) */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd > th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd > th { background-color: var(--gs-surface) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even > th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even > th { background-color: rgba(255,255,255,0.02) !important; } /* Texto por defecto en celdas */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody td, html.gs-theme-dark .dataTables_wrapper table.table tbody td { color: var(--gs-text) !important; } /* Hover consistente */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr:hover > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr:hover > td { background-color: rgba(59,130,246,0.18) !important; color: #ffffff !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr:hover > td *, html.gs-theme-dark .dataTables_wrapper table.table tbody tr:hover > td * { color: #ffffff !important; } /* Selección persistente (doble click / DataTables Select / clases comunes) */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.selected > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.row_selected > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.table-active > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.active > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.ui-state-highlight > td { background-color: rgba(59,130,246,0.32) !important; color: #ffffff !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > td *, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.selected > td *, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.row_selected > td *, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.table-active > td *, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.active > td *, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.ui-state-highlight > td * { color: #ffffff !important; } /* Selección + hover (mantiene contraste) */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected:hover > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected:hover > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.selected:hover > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.row_selected:hover > td { background-color: rgba(59,130,246,0.36) !important; color: #ffffff !important; } /* --------------------------------------------------------- 2) Dashboard: hover de tablas igual al de reportes --------------------------------------------------------- */ html.gs-theme-dark .gsdb-table tbody tr:hover > td { background: rgba(59,130,246,0.18) !important; color: #ffffff !important; } html.gs-theme-dark .gsdb-table tbody tr:hover > td *, html.gs-theme-dark .gsdb-table tbody tr:hover > td a { color: #ffffff !important; } /* --------------------------------------------------------- 3) Offcanvas derecho (#offcanvasRight) - contraste en búsqueda y selección --------------------------------------------------------- */ /* Caja y textbox de búsqueda */ html.gs-theme-dark #offcanvasRight .mind-sidebar-search { background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; } html.gs-theme-dark #offcanvasRight .mind-sidebar-search input, html.gs-theme-dark #offcanvasRight input[type="search"], html.gs-theme-dark #offcanvasRight input[type="text"] { background-color: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark #offcanvasRight .mind-sidebar-search input::placeholder, html.gs-theme-dark #offcanvasRight input::placeholder { color: rgba(229,231,235,0.55) !important; } /* Opciones padre del menú: estado activo/expandido con contraste */ html.gs-theme-dark #offcanvasRight .menu-tab-opciones.active, html.gs-theme-dark #offcanvasRight a.menu-tab-opciones.active, html.gs-theme-dark #offcanvasRight .menu-tab-opciones[aria-expanded="true"] { background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.32) !important; color: var(--gs-text) !important; } html.gs-theme-dark #offcanvasRight .menu-tab-opciones.active i, html.gs-theme-dark #offcanvasRight .menu-tab-opciones[aria-expanded="true"] i { color: #bfdbfe !important; } /* Resaltado de coincidencias (texto marcado) */ html.gs-theme-dark #offcanvasRight mark, html.gs-theme-dark #offcanvasRight .mind-match { background-color: rgba(255, 255, 255, 0.22) !important; color: #d2c993 !important; border-radius: 4px; padding: 0 2px; } /* ========================================================= Ajustes extra solicitados (Tema Oscuro) ========================================================= */ /* Reportes: mejor contraste en labels de filtros */ html.gs-theme-dark .label, html.gs-theme-dark .control-label{ color: rgba(240,245,255,0.92) !important; } html.gs-theme-dark .filters .form-label, html.gs-theme-dark .filters label{ color: rgba(240,245,255,0.92) !important; } /* Reportes: selección de fila (DataTables) más visible */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td, html.gs-theme-dark table.dataTable tbody tr.selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected td, html.gs-theme-dark table.dataTable tbody tr.row_selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active td, html.gs-theme-dark table.dataTable tbody tr.table-active td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active td, html.gs-theme-dark table.dataTable tbody tr.active td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight td, html.gs-theme-dark table.dataTable tbody tr.ui-state-highlight td{ background-color: rgba(59,130,246,0.38) !important; color: #ffffff !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td *, html.gs-theme-dark table.dataTable tbody tr.selected td *{ color: #ffffff !important; } /* Offcanvas menú: caja de búsqueda + textbox (mejor contraste) */ html.gs-theme-dark .mind-offcanvas-menu .mind-sidebar-search input{ background-color: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.18) !important; color: #f0f5ff !important; } /* Offcanvas menú: evita fondos claros cuando un padre está abierto (búsqueda / navegación) */ html.gs-theme-dark .mind-menu-item.is-open > .mind-menu-link{ background-color: rgba(59,130,246,0.18) !important; color: #ffffff !important; } html.gs-theme-dark .mind-menu-item.is-open > .mind-menu-link .mind-menu-link-icon i, html.gs-theme-dark .mind-menu-item.is-open > .mind-menu-link .mind-menu-chevron i{ color: #bfdbfe !important; } /* Offcanvas menú: links base (si una hoja de estilo anterior los deja muy claros) */ html.gs-theme-dark .mind-offcanvas-menu .mind-menu-link{ background-color: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--gs-text) !important; } html.gs-theme-dark .mind-offcanvas-menu .mind-menu-link:hover, html.gs-theme-dark .mind-offcanvas-menu .mind-menu-link:focus{ background-color: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.32) !important; color: #ffffff !important; } /* Dashboard / tablas: hover con contraste correcto en oscuro (override de hardcoded #eef2ff) */ html.gs-theme-dark table.table-hover tbody tr:hover, html.gs-theme-dark table.dataTable tbody tr:hover{ background-color: rgba(59,130,246,0.18) !important; } html.gs-theme-dark table.table-hover tbody tr:hover td, html.gs-theme-dark table.dataTable tbody tr:hover td, html.gs-theme-dark table.table-hover tbody tr:hover th, html.gs-theme-dark table.dataTable tbody tr:hover th{ color: #ffffff !important; } /* Favoritos (menú) + favoritos (indicadores dashboard): contenedores y filas */ html.gs-theme-dark .mind-fav-modal .mind-fav-edit-section-title, html.gs-theme-dark #gsdbFavEditModal .mind-fav-edit-section-title{ color: #f0f5ff !important; } html.gs-theme-dark .mind-fav-modal .mind-fav-edit-subtitle, html.gs-theme-dark #gsdbFavEditModal .mind-fav-edit-subtitle, html.gs-theme-dark .mind-fav-selected-hint, html.gs-theme-dark .mind-fav-search-hint{ color: rgba(240,245,255,0.72) !important; } html.gs-theme-dark .mind-fav-selected-item{ background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: var(--gs-text) !important; border-radius: 12px; } html.gs-theme-dark .mind-fav-selected-item:hover{ background: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.32) !important; } html.gs-theme-dark .mind-fav-selected-key{ background: rgba(59,130,246,0.22) !important; border: 1px solid rgba(59,130,246,0.35) !important; color: #f0f5ff !important; } html.gs-theme-dark .mind-fav-search-results, html.gs-theme-dark .mind-fav-tree{ background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 14px; } html.gs-theme-dark .mind-fav-tree-row:hover{ background: rgba(59,130,246,0.14) !important; } /* Botones Bootstrap: hacerlos consistentes y legibles en oscuro (sin afectar tema claro) */ html.gs-theme-dark .btn.btn-light{ background-color: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: #f0f5ff !important; } html.gs-theme-dark .btn.btn-light:hover, html.gs-theme-dark .btn.btn-light:focus{ background-color: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } html.gs-theme-dark .btn.btn-outline-primary{ color: #93c5fd !important; border-color: rgba(147,197,253,0.45) !important; } html.gs-theme-dark .btn.btn-outline-primary:hover, html.gs-theme-dark .btn.btn-outline-primary:focus{ background-color: rgba(59,130,246,0.18) !important; border-color: rgba(59,130,246,0.35) !important; color: #ffffff !important; } /* ========================================================= v26 - Subventanas (iframes) + Modals: labels por tema - En oscuro, labels/control-label deben contrastar. - Aplica también dentro de modal dialogs. ========================================================= */ html.gs-theme-dark label, body.gs-theme-dark label, html.gs-theme-dark .control-label, body.gs-theme-dark .control-label, html.gs-theme-dark .col-form-label, body.gs-theme-dark .col-form-label, html.gs-theme-dark .form-label, body.gs-theme-dark .form-label, html.gs-theme-dark .label, body.gs-theme-dark .label { color: rgba(240,245,255,0.92) !important; } html.gs-theme-dark .modal-body, body.gs-theme-dark .modal-body { color: var(--gs-text) !important; } html.gs-theme-dark .modal-body label, body.gs-theme-dark .modal-body label { color: rgba(240,245,255,0.92) !important; } /* jQuery UI dialog (algunos reportes) */ html.gs-theme-dark .ui-dialog, body.gs-theme-dark .ui-dialog { background: var(--gs-surface-2) !important; border: 1px solid var(--gs-border) !important; color: var(--gs-text) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-titlebar, body.gs-theme-dark .ui-dialog .ui-dialog-titlebar { background: #3f6cca !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } html.gs-theme-dark .ui-dialog .ui-dialog-title, body.gs-theme-dark .ui-dialog .ui-dialog-title { color: #ffffff !important; } html.gs-theme-dark .ui-dialog .ui-dialog-content, body.gs-theme-dark .ui-dialog .ui-dialog-content { background: var(--gs-surface) !important; color: var(--gs-text) !important; } /* ========================================================= v26 - Botones Guardar/Cancelar (Favoritos / Indicadores) - Mejor contraste en oscuro. ========================================================= */ html.gs-theme-dark .modal-footer .btn, body.gs-theme-dark .modal-footer .btn { box-shadow: none !important; } html.gs-theme-dark .modal-footer .btn.btn-secondary, html.gs-theme-dark .modal-footer .btn-secondary, html.gs-theme-dark .modal-footer .btn.btn-light, html.gs-theme-dark .modal-footer .btn-light, body.gs-theme-dark .modal-footer .btn.btn-secondary, body.gs-theme-dark .modal-footer .btn-secondary, body.gs-theme-dark .modal-footer .btn.btn-light, body.gs-theme-dark .modal-footer .btn-light { background-color: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.22) !important; color: #f0f5ff !important; } html.gs-theme-dark .modal-footer .btn.btn-secondary:hover, html.gs-theme-dark .modal-footer .btn-secondary:hover, html.gs-theme-dark .modal-footer .btn.btn-light:hover, html.gs-theme-dark .modal-footer .btn-light:hover, body.gs-theme-dark .modal-footer .btn.btn-secondary:hover, body.gs-theme-dark .modal-footer .btn-secondary:hover, body.gs-theme-dark .modal-footer .btn.btn-light:hover, body.gs-theme-dark .modal-footer .btn-light:hover { background-color: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.28) !important; } html.gs-theme-dark .modal-footer .btn.btn-primary, html.gs-theme-dark .modal-footer .btn-primary, body.gs-theme-dark .modal-footer .btn.btn-primary, body.gs-theme-dark .modal-footer .btn-primary { background-color: #2563eb !important; border-color: #1d4ed8 !important; color: #ffffff !important; } html.gs-theme-dark .modal-footer .btn.btn-primary:hover, html.gs-theme-dark .modal-footer .btn-primary:hover, body.gs-theme-dark .modal-footer .btn.btn-primary:hover, body.gs-theme-dark .modal-footer .btn-primary:hover { background-color: #1d4ed8 !important; border-color: #1e40af !important; } /* ========================================================= v27 - Sticky Header + Calendarios por tema + DataTables selección (Oscuro) (Mantiene todo lo anterior; agrega overrides al final) ========================================================= */ /* (Claro y Oscuro) Mantener visible la barra superior (topbar + breadcrumbs) al hacer scroll */ .FrameSuperior{ position: sticky; top: 0; z-index: 1020; /* encima del contenido, debajo de modals (1050+) y ventanas (>=5000) */ } /* ========================================================= DataTables (modo oscuro) - selección de fila más notoria ========================================================= */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > th, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > th, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > th, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > th, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.selected > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.selected > th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.row_selected > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.row_selected > th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.table-active > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.table-active > th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.active > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.active > th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.ui-state-highlight > td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.ui-state-highlight > th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > th { background-color: rgba(63, 108, 202, 0.62) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.58); } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td:first-child, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td:first-child, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td:first-child, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td:first-child, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > td:first-child, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td:first-child, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td:first-child, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td:first-child, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td:first-child, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > td:first-child { box-shadow: inset 3px 0 0 rgba(191, 219, 254, 0.95), inset 0 0 0 1px rgba(191, 219, 254, 0.58); } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > td *, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td *, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td *, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td *, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td *, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight > td * { color: #ffffff !important; } /* ========================================================= Calendarios / Datepickers (modo oscuro) - Se aplican dentro del layout principal y dentro de iframes (reportes gswin=1) ========================================================= */ /* Base (varias librerías) */ html.gs-theme-dark .ui-datepicker, body.gs-theme-dark .ui-datepicker, html.gs-theme-dark .datepicker, body.gs-theme-dark .datepicker, html.gs-theme-dark .datepicker-dropdown, body.gs-theme-dark .datepicker-dropdown, html.gs-theme-dark .bootstrap-datetimepicker-widget, body.gs-theme-dark .bootstrap-datetimepicker-widget, html.gs-theme-dark .daterangepicker, body.gs-theme-dark .daterangepicker, html.gs-theme-dark .flatpickr-calendar, body.gs-theme-dark .flatpickr-calendar { background-color: var(--gs-surface) !important; border: 1px solid var(--gs-border) !important; color: var(--gs-text) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.55) !important; } /* ---- jQuery UI Datepicker (.ui-datepicker) ---- */ html.gs-theme-dark .ui-datepicker .ui-datepicker-header, body.gs-theme-dark .ui-datepicker .ui-datepicker-header { background: #3f6cca !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #ffffff !important; } html.gs-theme-dark .ui-datepicker th, body.gs-theme-dark .ui-datepicker th { color: rgba(240,245,255,0.88) !important; } html.gs-theme-dark .ui-datepicker td a, html.gs-theme-dark .ui-datepicker td span, body.gs-theme-dark .ui-datepicker td a, body.gs-theme-dark .ui-datepicker td span { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.06) !important; color: var(--gs-text) !important; border-radius: 6px; } html.gs-theme-dark .ui-datepicker td a:hover, body.gs-theme-dark .ui-datepicker td a:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .ui-datepicker td a.ui-state-active, html.gs-theme-dark .ui-datepicker td a.ui-state-highlight, body.gs-theme-dark .ui-datepicker td a.ui-state-active, body.gs-theme-dark .ui-datepicker td a.ui-state-highlight { background: rgba(63,108,202,0.85) !important; border-color: rgba(191,219,254,0.80) !important; color: #ffffff !important; } /* ---- Bootstrap Datepicker (.datepicker) ---- */ html.gs-theme-dark .datepicker table tr th, html.gs-theme-dark .datepicker table tr td, body.gs-theme-dark .datepicker table tr th, body.gs-theme-dark .datepicker table tr td { color: var(--gs-text) !important; } html.gs-theme-dark .datepicker table tr td.old, html.gs-theme-dark .datepicker table tr td.new, body.gs-theme-dark .datepicker table tr td.old, body.gs-theme-dark .datepicker table tr td.new { color: rgba(229,231,235,0.55) !important; } html.gs-theme-dark .datepicker table tr td.day:hover, body.gs-theme-dark .datepicker table tr td.day:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .datepicker table tr td.active, html.gs-theme-dark .datepicker table tr td.active:hover, body.gs-theme-dark .datepicker table tr td.active, body.gs-theme-dark .datepicker table tr td.active:hover { background: #3f6cca !important; border-color: rgba(191,219,254,0.80) !important; color: #ffffff !important; } html.gs-theme-dark .datepicker table tr td.today, body.gs-theme-dark .datepicker table tr td.today { background: rgba(59,130,246,0.18) !important; color: #ffffff !important; } /* ---- Daterangepicker ---- */ html.gs-theme-dark .daterangepicker .calendar-table, body.gs-theme-dark .daterangepicker .calendar-table { background: var(--gs-surface) !important; border: 1px solid var(--gs-border) !important; } html.gs-theme-dark .daterangepicker td.available:hover, body.gs-theme-dark .daterangepicker td.available:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .daterangepicker td.active, html.gs-theme-dark .daterangepicker td.active:hover, body.gs-theme-dark .daterangepicker td.active, body.gs-theme-dark .daterangepicker td.active:hover { background: #3f6cca !important; color: #ffffff !important; } /* ---- Flatpickr ---- */ html.gs-theme-dark .flatpickr-months, body.gs-theme-dark .flatpickr-months { background: #3f6cca !important; color: #ffffff !important; } html.gs-theme-dark .flatpickr-day:hover, body.gs-theme-dark .flatpickr-day:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .flatpickr-day.selected, html.gs-theme-dark .flatpickr-day.selected:hover, html.gs-theme-dark .flatpickr-day.startRange, html.gs-theme-dark .flatpickr-day.endRange, body.gs-theme-dark .flatpickr-day.selected, body.gs-theme-dark .flatpickr-day.selected:hover, body.gs-theme-dark .flatpickr-day.startRange, body.gs-theme-dark .flatpickr-day.endRange { background: #3f6cca !important; border-color: rgba(191,219,254,0.80) !important; color: #ffffff !important; } /* ========================================================= v28 FIXES - DataTables odd/even (modo oscuro) - Calendarios por tema (dashboard + reportes) - Alertas / notificaciones por tema - Eliminar scroll horizontal fantasma - Breadcrumbs hover/visited por tema ========================================================= */ /* -------- 1) DataTables en modo oscuro: asegurar fondo en TD (odd/even) (algunos CSS previos dejaban transparent en td) -------- */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd th, html.gs-theme-dark table.dataTable tbody tr.odd td, html.gs-theme-dark table.dataTable tbody tr.odd th { background-color: var(--gs-surface) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even th, html.gs-theme-dark table.dataTable tbody tr.even td, html.gs-theme-dark table.dataTable tbody tr.even th { background-color: rgba(255,255,255,0.02) !important; } /* Selección aún más visible (incluye odd/even) */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.selected td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.row_selected td, html.gs-theme-dark table.dataTable tbody tr.selected td, html.gs-theme-dark table.dataTable tbody tr.row_selected td { background-color: rgba(63,108,202,0.55) !important; box-shadow: inset 0 0 0 1px rgba(191,219,254,0.55) !important; color: #ffffff !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td:first-child, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.selected td:first-child, html.gs-theme-dark table.dataTable tbody tr.selected td:first-child { box-shadow: inset 4px 0 0 rgba(191,219,254,0.85), inset 0 0 0 1px rgba(191,219,254,0.55) !important; } /* -------- 2) Calendarios por tema - Bootstrap Datepicker / Datetimepicker / jQuery UI / DateRangePicker / Flatpickr - Incluye días (primera fila) y título -------- */ /* === Bootstrap Datepicker === */ html.gs-theme-dark .datepicker, html.gs-theme-dark .datepicker-dropdown, html.gs-theme-dark .datepicker.datepicker-dropdown { background: var(--gs-surface-2) !important; border-color: rgba(255,255,255,0.18) !important; color: var(--gs-text) !important; box-shadow: 0 14px 40px rgba(0,0,0,0.55) !important; } html.gs-theme-dark .datepicker table tr th, html.gs-theme-dark .datepicker table tr td { color: var(--gs-text) !important; } /* header/título */ html.gs-theme-dark .datepicker table thead tr:first-child th, html.gs-theme-dark .datepicker .datepicker-switch, html.gs-theme-dark .datepicker .prev, html.gs-theme-dark .datepicker .next { background: #3f6cca !important; color: #ffffff !important; } /* fila de días (Lu Ma Mi...) */ html.gs-theme-dark .datepicker table thead tr:nth-child(2) th, html.gs-theme-dark .datepicker table thead tr:nth-child(2) th.dow { background: rgba(255,255,255,0.06) !important; color: rgba(240,245,255,0.92) !important; } html.gs-theme-dark .datepicker table tbody tr td.day { background: transparent !important; } html.gs-theme-dark .datepicker table tbody tr td.day:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .datepicker table tbody tr td.active, html.gs-theme-dark .datepicker table tbody tr td.active:hover, html.gs-theme-dark .datepicker table tbody tr td.today, html.gs-theme-dark .datepicker table tbody tr td.today:hover { background: rgba(63,108,202,0.80) !important; color: #ffffff !important; } /* Light theme (sin tocar el resto del site): hace que el datepicker no se vea "default" - En modo corporativo NO queremos el azul del tema claro. */ html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker, html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker-dropdown, html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker.datepicker-dropdown { background: #ffffff !important; border-color: rgba(2, 15, 43, 0.14) !important; color: #0f172a !important; box-shadow: 0 14px 34px rgba(2, 15, 43, 0.18) !important; } html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker table thead tr:first-child th, html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker .datepicker-switch, html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker .prev, html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker .next { background: rgba(25, 64, 128, 0.95) !important; color: #ffffff !important; } html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker table thead tr:nth-child(2) th, html:not(.gs-theme-dark):not(.gs-theme-corporativo) .datepicker table thead tr:nth-child(2) th.dow { background: rgba(15, 23, 42, 0.04) !important; color: #0f172a !important; } /* ========================================================= v29 FIX - Calendario del Dashboard fuera de tema - La UI observada corresponde típicamente a Flatpickr. - Se definen estilos completos para claro/oscuro con alta prioridad. ========================================================= */ /* -------- Flatpickr (DARK) -------- */ html.gs-theme-dark .flatpickr-calendar, body.gs-theme-dark .flatpickr-calendar { background: var(--gs-surface-2) !important; border-color: rgba(255,255,255,0.18) !important; color: var(--gs-text) !important; } html.gs-theme-dark .flatpickr-months, body.gs-theme-dark .flatpickr-months { background: #3f6cca !important; } html.gs-theme-dark .flatpickr-current-month, html.gs-theme-dark .flatpickr-current-month .cur-month, html.gs-theme-dark .flatpickr-current-month .cur-year, html.gs-theme-dark .flatpickr-current-month input.cur-year, body.gs-theme-dark .flatpickr-current-month, body.gs-theme-dark .flatpickr-current-month .cur-month, body.gs-theme-dark .flatpickr-current-month .cur-year, body.gs-theme-dark .flatpickr-current-month input.cur-year { color: #ffffff !important; } html.gs-theme-dark .flatpickr-monthDropdown-months, body.gs-theme-dark .flatpickr-monthDropdown-months { background: rgba(255,255,255,0.14) !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 8px !important; color: #ffffff !important; padding: 2px 8px !important; } html.gs-theme-dark .flatpickr-prev-month, html.gs-theme-dark .flatpickr-next-month, body.gs-theme-dark .flatpickr-prev-month, body.gs-theme-dark .flatpickr-next-month { color: #ffffff !important; } html.gs-theme-dark .flatpickr-prev-month svg, html.gs-theme-dark .flatpickr-next-month svg, body.gs-theme-dark .flatpickr-prev-month svg, body.gs-theme-dark .flatpickr-next-month svg { fill: #ffffff !important; } html.gs-theme-dark .flatpickr-weekdays, body.gs-theme-dark .flatpickr-weekdays { background: rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; } html.gs-theme-dark span.flatpickr-weekday, body.gs-theme-dark span.flatpickr-weekday { color: rgba(240,245,255,0.92) !important; font-weight: 600; } html.gs-theme-dark .flatpickr-day, body.gs-theme-dark .flatpickr-day { background: transparent !important; border: 1px solid transparent !important; color: var(--gs-text) !important; } html.gs-theme-dark .flatpickr-day.prevMonthDay, html.gs-theme-dark .flatpickr-day.nextMonthDay, body.gs-theme-dark .flatpickr-day.prevMonthDay, body.gs-theme-dark .flatpickr-day.nextMonthDay { color: rgba(229,231,235,0.45) !important; } html.gs-theme-dark .flatpickr-day.flatpickr-disabled, body.gs-theme-dark .flatpickr-day.flatpickr-disabled { color: rgba(229,231,235,0.25) !important; } html.gs-theme-dark .flatpickr-day:hover, body.gs-theme-dark .flatpickr-day:hover { background: rgba(59,130,246,0.22) !important; border-color: rgba(191,219,254,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .flatpickr-day.today, body.gs-theme-dark .flatpickr-day.today { border-color: rgba(191,219,254,0.65) !important; } html.gs-theme-dark .flatpickr-day.selected, html.gs-theme-dark .flatpickr-day.selected:hover, html.gs-theme-dark .flatpickr-day.startRange, html.gs-theme-dark .flatpickr-day.endRange, body.gs-theme-dark .flatpickr-day.selected, body.gs-theme-dark .flatpickr-day.selected:hover, body.gs-theme-dark .flatpickr-day.startRange, body.gs-theme-dark .flatpickr-day.endRange { background: rgba(63,108,202,0.92) !important; border-color: rgba(191,219,254,0.85) !important; color: #ffffff !important; } /* Botón "Limpiar" u otros botones internos del calendario */ html.gs-theme-dark .flatpickr-calendar button, body.gs-theme-dark .flatpickr-calendar button { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #ffffff !important; border-radius: 10px; } html.gs-theme-dark .flatpickr-calendar button:hover, body.gs-theme-dark .flatpickr-calendar button:hover { background: rgba(255,255,255,0.12) !important; } /* -------- Flatpickr (LIGHT) -------- */ html:not(.gs-theme-dark) .flatpickr-calendar { background: #ffffff !important; border: 1px solid rgba(2, 15, 43, 0.14) !important; color: #0f172a !important; box-shadow: 0 14px 34px rgba(2, 15, 43, 0.18) !important; } html:not(.gs-theme-dark) .flatpickr-months { background: rgba(25, 64, 128, 0.95) !important; } html:not(.gs-theme-dark) .flatpickr-current-month, html:not(.gs-theme-dark) .flatpickr-current-month .cur-month, html:not(.gs-theme-dark) .flatpickr-current-month .cur-year, html:not(.gs-theme-dark) .flatpickr-current-month input.cur-year { color: #ffffff !important; } html:not(.gs-theme-dark) .flatpickr-monthDropdown-months { background: rgba(255,255,255,0.18) !important; border: 1px solid rgba(255,255,255,0.28) !important; border-radius: 8px !important; color: #ffffff !important; padding: 2px 8px !important; } html:not(.gs-theme-dark) .flatpickr-prev-month svg, html:not(.gs-theme-dark) .flatpickr-next-month svg { fill: #ffffff !important; } html:not(.gs-theme-dark) .flatpickr-weekdays { background: rgba(15, 23, 42, 0.04) !important; border-bottom: 1px solid rgba(2, 15, 43, 0.10) !important; } html:not(.gs-theme-dark) span.flatpickr-weekday { color: #0f172a !important; font-weight: 600; } html:not(.gs-theme-dark) .flatpickr-day { color: #0f172a !important; } html:not(.gs-theme-dark) .flatpickr-day:hover { background: rgba(59,130,246,0.14) !important; color: #0f172a !important; } html:not(.gs-theme-dark) .flatpickr-day.selected, html:not(.gs-theme-dark) .flatpickr-day.selected:hover, html:not(.gs-theme-dark) .flatpickr-day.startRange, html:not(.gs-theme-dark) .flatpickr-day.endRange { background: rgba(25, 64, 128, 0.95) !important; border-color: rgba(25, 64, 128, 0.95) !important; color: #ffffff !important; } html:not(.gs-theme-dark) .flatpickr-calendar button { background: rgba(15,23,42,0.04) !important; border: 1px solid rgba(2,15,43,0.14) !important; color: #0f172a !important; border-radius: 10px; } html:not(.gs-theme-dark) .flatpickr-calendar button:hover { background: rgba(15,23,42,0.06) !important; } /* === jQuery UI Datepicker === */ html.gs-theme-dark .ui-datepicker { background: var(--gs-surface-2) !important; border-color: rgba(255,255,255,0.18) !important; color: var(--gs-text) !important; box-shadow: 0 14px 40px rgba(0,0,0,0.55) !important; } html.gs-theme-dark .ui-datepicker .ui-datepicker-header { background: #3f6cca !important; border: 0 !important; } html.gs-theme-dark .ui-datepicker .ui-datepicker-title, html.gs-theme-dark .ui-datepicker .ui-datepicker-title span { color: #ffffff !important; font-weight: 700 !important; } html.gs-theme-dark .ui-datepicker th { background: rgba(255,255,255,0.06) !important; color: rgba(240,245,255,0.92) !important; } html.gs-theme-dark .ui-datepicker td a, html.gs-theme-dark .ui-datepicker td span { color: var(--gs-text) !important; } html.gs-theme-dark .ui-datepicker td a:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .ui-datepicker .ui-state-active, html.gs-theme-dark .ui-datepicker .ui-state-highlight { background: rgba(63,108,202,0.80) !important; border-color: rgba(191,219,254,0.70) !important; color: #ffffff !important; } /* Light theme for jQuery UI datepicker - En modo corporativo NO queremos el header azul del tema claro. Por eso excluimos .gs-theme-corporativo. */ html:not(.gs-theme-dark):not(.gs-theme-corporativo) .ui-datepicker { background: #ffffff !important; border-color: rgba(2, 15, 43, 0.14) !important; color: #0f172a !important; box-shadow: 0 14px 34px rgba(2, 15, 43, 0.18) !important; } html:not(.gs-theme-dark):not(.gs-theme-corporativo) .ui-datepicker .ui-datepicker-header { background: rgba(25, 64, 128, 0.95) !important; border: 0 !important; } html:not(.gs-theme-dark):not(.gs-theme-corporativo) .ui-datepicker .ui-datepicker-title, html:not(.gs-theme-dark):not(.gs-theme-corporativo) .ui-datepicker .ui-datepicker-title span { color: #ffffff !important; font-weight: 700 !important; } html:not(.gs-theme-dark):not(.gs-theme-corporativo) .ui-datepicker th { background: rgba(15, 23, 42, 0.04) !important; color: #0f172a !important; } /* -------- 3) Alertas / notificaciones / errores - Bootstrap modals + jQuery UI dialogs + SweetAlert2 + jConfirm -------- */ /* Bootstrap Modals: en claro dejamos el look actual, pero aseguramos contraste en footer */ html:not(.gs-theme-dark) .modal-footer { /* background: rgba(25, 64, 128, 0.10) !important;*/ } html:not(.gs-theme-dark) .modal-footer .btn { box-shadow: 0 1px 0 rgba(2,15,43,0.08); } /* En oscuro: modal ya usa #3f6cca en header/footer, forzamos contraste de botones */ html.gs-theme-dark .modal-footer .btn.btn-primary { background: rgba(15,23,42,0.85) !important; border-color: rgba(15,23,42,0.85) !important; color: #ffffff !important; } html.gs-theme-dark .modal-footer .btn.btn-primary:hover { filter: brightness(1.05); } html.gs-theme-dark .modal-footer .btn.btn-light, html.gs-theme-dark .modal-footer .btn.btn-secondary { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.22) !important; color: #ffffff !important; } /* jQuery UI Dialog */ html.gs-theme-dark .ui-dialog { background: var(--gs-surface) !important; border-color: rgba(255,255,255,0.18) !important; box-shadow: 0 18px 50px rgba(0,0,0,0.60) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-titlebar { background: #3f6cca !important; border: 0 !important; color: #ffffff !important; } html.gs-theme-dark .ui-dialog .ui-dialog-title { color: #ffffff !important; } html.gs-theme-dark .ui-dialog .ui-dialog-content { background: var(--gs-surface) !important; color: var(--gs-text) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-buttonpane { background: #3f6cca !important; border-top: 1px solid rgba(255,255,255,0.18) !important; } /* SweetAlert2 */ html.gs-theme-dark .swal2-popup { background: var(--gs-surface) !important; color: var(--gs-text) !important; } html.gs-theme-dark .swal2-title, html.gs-theme-dark .swal2-html-container { color: var(--gs-text) !important; } /* jConfirm */ html.gs-theme-dark .jconfirm .jconfirm-box { background: var(--gs-surface) !important; color: var(--gs-text) !important; } html.gs-theme-dark .jconfirm .jconfirm-box .jconfirm-title-c { background: #3f6cca !important; color: #ffffff !important; } html.gs-theme-dark .jconfirm .jconfirm-buttons button { background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.22) !important; color: #ffffff !important; } /* -------- 4) Eliminar scroll horizontal fantasma (layout) -------- */ html, body { max-width: 100%; overflow-x: hidden; } #content_todo, .FrameSuperior, .content-body, .mind-offcanvas-menu, .offcanvas { max-width: 100%; } /* Permitir scroll horizontal donde sí se necesita (tablas grandes) */ .dataTables_wrapper, .table-responsive { overflow-x: auto; } /* -------- 5) Breadcrumbs hover/visited por tema -------- */ /* Claro */ html:not(.gs-theme-dark) .bar-dir a, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a { color: rgba(15, 23, 42, 0.85); } html:not(.gs-theme-dark) .bar-dir a:visited, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:visited { color: rgba(15, 23, 42, 0.78); } html:not(.gs-theme-dark) .bar-dir a:hover, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:hover { color: rgba(25, 64, 128, 0.95); text-decoration-color: rgba(25, 64, 128, 0.55); } /* Oscuro */ html.gs-theme-dark .bar-dir a, html.gs-theme-dark .mind-breadcrumb-wrap a { color: rgba(240,245,255,0.92) !important; } html.gs-theme-dark .bar-dir a:visited, html.gs-theme-dark .mind-breadcrumb-wrap a:visited { color: rgba(191,219,254,0.90) !important; } html.gs-theme-dark .bar-dir a:hover, html.gs-theme-dark .mind-breadcrumb-wrap a:hover { color: #ffffff !important; text-decoration-color: rgba(255,255,255,0.65) !important; } /* ========================================================= v28 FIXES ========================================================= */ /* --------------------------------------------------------- 1) DataTables en modo oscuro: asegurar fondos en ODD/EVEN (algunos CSS previos fuerzan td a transparent) --------------------------------------------------------- */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd th, html.gs-theme-dark table.dataTable tbody tr.odd td, html.gs-theme-dark table.dataTable tbody tr.odd th { background-color: var(--gs-surface) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even th, html.gs-theme-dark table.dataTable tbody tr.even td, html.gs-theme-dark table.dataTable tbody tr.even th { background-color: rgba(255,255,255,0.02) !important; } /* Selección persistente (más contraste) */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active td, html.gs-theme-dark table.dataTable tbody tr.selected td, html.gs-theme-dark table.dataTable tbody tr.row_selected td, html.gs-theme-dark table.dataTable tbody tr.table-active td, html.gs-theme-dark table.dataTable tbody tr.active td { background-color: rgba(63,108,202,0.58) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(191,219,254,0.75) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td:first-child, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected td:first-child, html.gs-theme-dark table.dataTable tbody tr.selected td:first-child, html.gs-theme-dark table.dataTable tbody tr.row_selected td:first-child { box-shadow: inset 3px 0 0 0 rgba(191,219,254,0.95), inset 0 0 0 1px rgba(191,219,254,0.75) !important; } /* --------------------------------------------------------- 2) Calendarios por tema - En dashboard y reportes suele haber bootstrap-datepicker / jquery-ui. - El calendario nativo del navegador (input type=date) no siempre es tematizable. --------------------------------------------------------- */ /* === Light theme (no dark class) === */ html:not(.gs-theme-dark) .ui-datepicker, html:not(.gs-theme-dark) .datepicker, html:not(.gs-theme-dark) .datepicker-dropdown, html:not(.gs-theme-dark) .bootstrap-datetimepicker-widget, html:not(.gs-theme-dark) .daterangepicker, html:not(.gs-theme-dark) .flatpickr-calendar { color: #0f172a; } html:not(.gs-theme-dark) .ui-datepicker .ui-datepicker-header, html:not(.gs-theme-dark) .datepicker-days thead tr:first-child th, html:not(.gs-theme-dark) .datepicker-months thead tr:first-child th, html:not(.gs-theme-dark) .datepicker-years thead tr:first-child th, html:not(.gs-theme-dark) .bootstrap-datetimepicker-widget .picker-switch, html:not(.gs-theme-dark) .daterangepicker .drp-calendar .calendar-table thead tr:first-child th, html:not(.gs-theme-dark) .flatpickr-months { background: #1b4e86 !important; color: #ffffff !important; } html:not(.gs-theme-dark) .ui-datepicker th, html:not(.gs-theme-dark) .datepicker-days thead tr:nth-child(2) th, html:not(.gs-theme-dark) .datepicker table thead th.dow, html:not(.gs-theme-dark) .daterangepicker .calendar-table thead tr:nth-child(2) th { background: rgba(15,23,42,0.04) !important; color: #0f172a !important; } /* === Dark theme === */ html.gs-theme-dark .ui-datepicker, html.gs-theme-dark .datepicker, html.gs-theme-dark .datepicker-dropdown, html.gs-theme-dark .bootstrap-datetimepicker-widget, html.gs-theme-dark .daterangepicker, html.gs-theme-dark .flatpickr-calendar { background: var(--gs-surface-2) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.55) !important; } /* Header / title row */ html.gs-theme-dark .ui-datepicker .ui-datepicker-header, html.gs-theme-dark .ui-datepicker .ui-datepicker-title, html.gs-theme-dark .datepicker-days thead tr:first-child th, html.gs-theme-dark .datepicker-months thead tr:first-child th, html.gs-theme-dark .datepicker-years thead tr:first-child th, html.gs-theme-dark .bootstrap-datetimepicker-widget .picker-switch, html.gs-theme-dark .daterangepicker .drp-calendar .calendar-table thead tr:first-child th, html.gs-theme-dark .flatpickr-months { background: #3f6cca !important; color: #ffffff !important; } /* Days-of-week row (lo que faltaba en reportes) */ html.gs-theme-dark .ui-datepicker th, html.gs-theme-dark .ui-datepicker .ui-datepicker-calendar thead th, html.gs-theme-dark .datepicker-days thead tr:nth-child(2) th, html.gs-theme-dark .datepicker table thead th.dow, html.gs-theme-dark .daterangepicker .calendar-table thead tr:nth-child(2) th { background: rgba(255,255,255,0.06) !important; color: rgba(240,245,255,0.92) !important; border-color: rgba(255,255,255,0.10) !important; } /* Day cells */ html.gs-theme-dark .ui-datepicker td a, html.gs-theme-dark .ui-datepicker td span, html.gs-theme-dark .datepicker table tr td, html.gs-theme-dark .datepicker table tr td span, html.gs-theme-dark .bootstrap-datetimepicker-widget table td, html.gs-theme-dark .daterangepicker td.available, html.gs-theme-dark .flatpickr-day { color: var(--gs-text) !important; } html.gs-theme-dark .ui-datepicker td a:hover, html.gs-theme-dark .datepicker table tr td:hover, html.gs-theme-dark .bootstrap-datetimepicker-widget table td:hover, html.gs-theme-dark .daterangepicker td.available:hover, html.gs-theme-dark .flatpickr-day:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .ui-datepicker td.ui-datepicker-current-day a, html.gs-theme-dark .ui-datepicker td.ui-datepicker-today a, html.gs-theme-dark .datepicker table tr td.active, html.gs-theme-dark .datepicker table tr td.active:hover, html.gs-theme-dark .bootstrap-datetimepicker-widget table td.active, html.gs-theme-dark .bootstrap-datetimepicker-widget table td.active:hover, html.gs-theme-dark .daterangepicker td.active, html.gs-theme-dark .daterangepicker td.active:hover, html.gs-theme-dark .flatpickr-day.selected, html.gs-theme-dark .flatpickr-day.selected:hover, html.gs-theme-dark .flatpickr-day.startRange, html.gs-theme-dark .flatpickr-day.endRange { background: #3f6cca !important; color: #ffffff !important; border-color: rgba(191,219,254,0.80) !important; } /* --------------------------------------------------------- 3) Alertas / notificaciones (Bootstrap / jQuery UI / SweetAlert2 / jConfirm) --------------------------------------------------------- */ /* Bootstrap modal (alertas/errores) - claro: mantener legible */ html:not(.gs-theme-dark) .modal-content { color: #0f172a; } /* Bootstrap modal - oscuro: coherente con el resto */ html.gs-theme-dark .modal-content { background: var(--gs-surface) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark .modal-body { color: var(--gs-text) !important; } /* jQuery UI dialog */ html.gs-theme-dark .ui-dialog { background: var(--gs-surface) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-titlebar { background: #3f6cca !important; border: 0 !important; color: #ffffff !important; } html.gs-theme-dark .ui-dialog .ui-dialog-title { color: #ffffff !important; } html.gs-theme-dark .ui-dialog .ui-dialog-content { background: var(--gs-surface) !important; color: var(--gs-text) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-buttonpane { background: rgba(63,108,202,0.85) !important; border-top: 1px solid rgba(255,255,255,0.14) !important; } /* SweetAlert2 */ html.gs-theme-dark .swal2-popup { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1px solid rgba(255,255,255,0.14) !important; } html.gs-theme-dark .swal2-title, html.gs-theme-dark .swal2-html-container { color: var(--gs-text) !important; } /* jConfirm */ html.gs-theme-dark .jconfirm .jconfirm-box { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1px solid rgba(255,255,255,0.14) !important; } html.gs-theme-dark .jconfirm .jconfirm-box .jconfirm-title { color: var(--gs-text) !important; } /* --------------------------------------------------------- 4) Eliminar scroll horizontal fantasma (layout) - Sin bloquear scroll horizontal propio de DataTables --------------------------------------------------------- */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /* Permitir scroll horizontal donde se necesita (tablas) */ .dataTables_wrapper { overflow-x: auto; } /* --------------------------------------------------------- 5) Breadcrumbs: hover/visited por tema --------------------------------------------------------- */ /* Claro */ html:not(.gs-theme-dark) .bar-dir a, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a { color: rgba(255,255,255,0.92); } html:not(.gs-theme-dark) .bar-dir a:visited, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:visited { color: rgba(255,255,255,0.85); } html:not(.gs-theme-dark) .bar-dir a:hover, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:hover { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.70); } /* Oscuro */ html.gs-theme-dark .bar-dir a, html.gs-theme-dark .mind-breadcrumb-wrap a { color: rgba(191,219,254,0.92) !important; } html.gs-theme-dark .bar-dir a:visited, html.gs-theme-dark .mind-breadcrumb-wrap a:visited { color: rgba(147,197,253,0.85) !important; } html.gs-theme-dark .bar-dir a:hover, html.gs-theme-dark .mind-breadcrumb-wrap a:hover { color: #ffffff !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.70); } /* ========================================================= v28 FIXES ========================================================= */ /* --------------------------------------------------------- 1) DataTables (modo oscuro) - ODD/EVEN + selección visible --------------------------------------------------------- */ /* Forzar fondo en TD (no solo TR) para vencer reglas transparentes */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd th, html.gs-theme-dark table.dataTable tbody tr.odd td, html.gs-theme-dark table.dataTable tbody tr.odd th { background-color: var(--gs-surface) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even th, html.gs-theme-dark table.dataTable tbody tr.even td, html.gs-theme-dark table.dataTable tbody tr.even th { background-color: rgba(255,255,255,0.02) !important; } /* Selección persistente (mucho más notoria) */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td, html.gs-theme-dark table.dataTable tbody tr.selected > td, html.gs-theme-dark table.dataTable tbody tr.row_selected > td { background-color: rgba(63,108,202,0.55) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 rgba(191,219,254,0.95), inset 0 0 0 1px rgba(191,219,254,0.22); } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active > td *, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active > td *, html.gs-theme-dark table.dataTable tbody tr.selected > td *, html.gs-theme-dark table.dataTable tbody tr.row_selected > td * { color: #ffffff !important; } /* --------------------------------------------------------- 2) Calendarios por tema (Dashboard + Reportes) - Soporta: jQuery UI, Bootstrap Datepicker, DateRangePicker, Flatpickr --------------------------------------------------------- */ /* ===== Tema CLARO (sin modificar el resto del tema) ===== */ html:not(.gs-theme-dark) .ui-datepicker, html:not(.gs-theme-dark) .datepicker, html:not(.gs-theme-dark) .datepicker-dropdown, html:not(.gs-theme-dark) .daterangepicker, html:not(.gs-theme-dark) .flatpickr-calendar, html:not(.gs-theme-dark) .bootstrap-datetimepicker-widget { color: #0f172a; } /* jQuery UI - claro */ html:not(.gs-theme-dark) .ui-datepicker { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.18) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important; } html:not(.gs-theme-dark) .ui-datepicker .ui-datepicker-header { background: rgba(25, 64, 128, 0.95) !important; border: 0 !important; color: #ffffff !important; } html:not(.gs-theme-dark) .ui-datepicker .ui-datepicker-title, html:not(.gs-theme-dark) .ui-datepicker .ui-datepicker-prev, html:not(.gs-theme-dark) .ui-datepicker .ui-datepicker-next { color: #ffffff !important; } html:not(.gs-theme-dark) .ui-datepicker th { background: #f1f5f9 !important; color: #0f172a !important; font-weight: 700; } html:not(.gs-theme-dark) .ui-datepicker td a { color: #0f172a !important; } html:not(.gs-theme-dark) .ui-datepicker td a:hover { background: rgba(59,130,246,0.16) !important; } html:not(.gs-theme-dark) .ui-datepicker .ui-state-active, html:not(.gs-theme-dark) .ui-datepicker .ui-state-active:hover { background: #3f6cca !important; border-color: rgba(63,108,202,0.55) !important; color: #ffffff !important; } /* Bootstrap Datepicker - claro */ html:not(.gs-theme-dark) .datepicker-dropdown, html:not(.gs-theme-dark) .datepicker { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.18) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important; } html:not(.gs-theme-dark) .datepicker table thead tr:first-child th { background: rgba(25, 64, 128, 0.95) !important; color: #ffffff !important; } html:not(.gs-theme-dark) .datepicker table thead tr:nth-child(2) th, html:not(.gs-theme-dark) .datepicker table thead tr:nth-child(2) th.dow { background: #f1f5f9 !important; color: #0f172a !important; font-weight: 700; } html:not(.gs-theme-dark) .datepicker table tbody td, html:not(.gs-theme-dark) .datepicker table tbody td.day { color: #0f172a !important; } html:not(.gs-theme-dark) .datepicker table tbody td:hover, html:not(.gs-theme-dark) .datepicker table tbody td.day:hover { background: rgba(59,130,246,0.16) !important; } html:not(.gs-theme-dark) .datepicker table tbody td.active, html:not(.gs-theme-dark) .datepicker table tbody td.active:hover, html:not(.gs-theme-dark) .datepicker table tbody td.day.active, html:not(.gs-theme-dark) .datepicker table tbody td.day.active:hover { background: #3f6cca !important; color: #ffffff !important; } /* ===== Tema OSCURO ===== */ /* jQuery UI - oscuro */ html.gs-theme-dark .ui-datepicker, body.gs-theme-dark .ui-datepicker { background: var(--gs-surface) !important; border: 1px solid var(--gs-border) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.60) !important; } html.gs-theme-dark .ui-datepicker .ui-datepicker-header, body.gs-theme-dark .ui-datepicker .ui-datepicker-header { background: #3f6cca !important; border: 0 !important; } html.gs-theme-dark .ui-datepicker .ui-datepicker-title, html.gs-theme-dark .ui-datepicker .ui-datepicker-prev, html.gs-theme-dark .ui-datepicker .ui-datepicker-next, body.gs-theme-dark .ui-datepicker .ui-datepicker-title, body.gs-theme-dark .ui-datepicker .ui-datepicker-prev, body.gs-theme-dark .ui-datepicker .ui-datepicker-next { color: #ffffff !important; } /* Primera fila (días Lu..Do) y título */ html.gs-theme-dark .ui-datepicker th, body.gs-theme-dark .ui-datepicker th { background: rgba(255,255,255,0.06) !important; color: rgba(240,245,255,0.92) !important; font-weight: 700; } html.gs-theme-dark .ui-datepicker td a, body.gs-theme-dark .ui-datepicker td a { color: var(--gs-text) !important; } html.gs-theme-dark .ui-datepicker td a:hover, body.gs-theme-dark .ui-datepicker td a:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .ui-datepicker .ui-state-active, html.gs-theme-dark .ui-datepicker .ui-state-active:hover, body.gs-theme-dark .ui-datepicker .ui-state-active, body.gs-theme-dark .ui-datepicker .ui-state-active:hover { background: #3f6cca !important; border-color: rgba(191,219,254,0.80) !important; color: #ffffff !important; } /* Bootstrap Datepicker - oscuro */ html.gs-theme-dark .datepicker-dropdown, html.gs-theme-dark .datepicker, body.gs-theme-dark .datepicker-dropdown, body.gs-theme-dark .datepicker { background: var(--gs-surface) !important; border: 1px solid var(--gs-border) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.60) !important; } /* Título / navegación */ html.gs-theme-dark .datepicker table thead tr:first-child th, body.gs-theme-dark .datepicker table thead tr:first-child th { background: #3f6cca !important; color: #ffffff !important; } /* Primera fila de días */ html.gs-theme-dark .datepicker table thead tr:nth-child(2) th, html.gs-theme-dark .datepicker table thead tr:nth-child(2) th.dow, body.gs-theme-dark .datepicker table thead tr:nth-child(2) th, body.gs-theme-dark .datepicker table thead tr:nth-child(2) th.dow { background: rgba(255,255,255,0.06) !important; color: rgba(240,245,255,0.92) !important; font-weight: 700; } html.gs-theme-dark .datepicker table tbody td, html.gs-theme-dark .datepicker table tbody td.day, body.gs-theme-dark .datepicker table tbody td, body.gs-theme-dark .datepicker table tbody td.day { color: var(--gs-text) !important; } html.gs-theme-dark .datepicker table tbody td:hover, html.gs-theme-dark .datepicker table tbody td.day:hover, body.gs-theme-dark .datepicker table tbody td:hover, body.gs-theme-dark .datepicker table tbody td.day:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark .datepicker table tbody td.active, html.gs-theme-dark .datepicker table tbody td.active:hover, html.gs-theme-dark .datepicker table tbody td.day.active, html.gs-theme-dark .datepicker table tbody td.day.active:hover, body.gs-theme-dark .datepicker table tbody td.active, body.gs-theme-dark .datepicker table tbody td.active:hover, body.gs-theme-dark .datepicker table tbody td.day.active, body.gs-theme-dark .datepicker table tbody td.day.active:hover { background: #3f6cca !important; color: #ffffff !important; } /* --------------------------------------------------------- 3) Alertas / Notificaciones / Diálogos (claro y oscuro) - Cubre Bootstrap modal, jQuery UI dialog y jConfirm/sweetalert2 --------------------------------------------------------- */ /* Bootstrap modals (claro) - mantener coherencia sin alterar el sitio */ html:not(.gs-theme-dark) .modal-content { border-color: rgba(15,23,42,0.18); } /* Bootstrap modals (oscuro) */ html.gs-theme-dark .modal-content, body.gs-theme-dark .modal-content { background: var(--gs-surface) !important; border-color: var(--gs-border) !important; color: var(--gs-text) !important; } html.gs-theme-dark .modal-body, body.gs-theme-dark .modal-body { color: var(--gs-text) !important; } html.gs-theme-dark .modal-footer .btn, body.gs-theme-dark .modal-footer .btn { filter: none; } /* jQuery UI Dialog (alertas antiguas) */ .ui-dialog { border-radius: 12px; overflow: hidden; } html.gs-theme-dark .ui-dialog, body.gs-theme-dark .ui-dialog { background: var(--gs-surface) !important; border: 1px solid var(--gs-border) !important; color: var(--gs-text) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.60) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-titlebar, body.gs-theme-dark .ui-dialog .ui-dialog-titlebar { background: #3f6cca !important; border: 0 !important; color: #ffffff !important; } html.gs-theme-dark .ui-dialog .ui-dialog-title, body.gs-theme-dark .ui-dialog .ui-dialog-title { color: #ffffff !important; } html.gs-theme-dark .ui-dialog .ui-dialog-content, body.gs-theme-dark .ui-dialog .ui-dialog-content { background: var(--gs-surface) !important; color: var(--gs-text) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-buttonpane, body.gs-theme-dark .ui-dialog .ui-dialog-buttonpane { background: rgba(63,108,202,0.35) !important; border-top: 1px solid rgba(255,255,255,0.12) !important; } /* SweetAlert2 */ html.gs-theme-dark .swal2-popup, body.gs-theme-dark .swal2-popup { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1px solid var(--gs-border) !important; } html.gs-theme-dark .swal2-title, html.gs-theme-dark .swal2-html-container, body.gs-theme-dark .swal2-title, body.gs-theme-dark .swal2-html-container { color: var(--gs-text) !important; } /* jConfirm */ html.gs-theme-dark .jconfirm .jconfirm-box, body.gs-theme-dark .jconfirm .jconfirm-box { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1px solid var(--gs-border) !important; } html.gs-theme-dark .jconfirm .jconfirm-title, body.gs-theme-dark .jconfirm .jconfirm-title { color: var(--gs-text) !important; } /* --------------------------------------------------------- 4) Scroll horizontal fantasma (layout) - Evitar scroll-x global, manteniendo scroll-x en tablas --------------------------------------------------------- */ html, body { max-width: 100%; overflow-x: hidden; } #content_todo, .content-body, .FrameSuperior, .bar-dir { max-width: 100%; overflow-x: hidden; } /* Mantener scroll horizontal donde sí es necesario (tablas) */ .dataTables_wrapper, .table-responsive { overflow-x: auto; } /* --------------------------------------------------------- 5) Breadcrumbs: hover/visited coherentes por tema --------------------------------------------------------- */ /* Claro */ html:not(.gs-theme-dark) .bar-dir a, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a { color: rgba(255,255,255,0.92); text-decoration: none; } html:not(.gs-theme-dark) .bar-dir a:visited, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:visited { color: rgba(255,255,255,0.85); } html:not(.gs-theme-dark) .bar-dir a:hover, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:hover { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.65); } /* Oscuro */ html.gs-theme-dark .bar-dir a, html.gs-theme-dark .mind-breadcrumb-wrap a { color: #bfdbfe; text-decoration: none; } html.gs-theme-dark .bar-dir a:visited, html.gs-theme-dark .mind-breadcrumb-wrap a:visited { color: rgba(191,219,254,0.88); } html.gs-theme-dark .bar-dir a:hover, html.gs-theme-dark .mind-breadcrumb-wrap a:hover { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.55); } /* ========================================================= v28 FIXES ========================================================= */ /* --------------------------------------------------------- 1) DataTables (modo oscuro) - ODD/EVEN + selección visible --------------------------------------------------------- */ /* Forzar fondo en TD (no solo TR) para vencer reglas transparentes */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd th, html.gs-theme-dark table.dataTable tbody tr.odd td, html.gs-theme-dark table.dataTable tbody tr.odd th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd th, body.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd td, body.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd th, body.gs-theme-dark table.dataTable tbody tr.odd td, body.gs-theme-dark table.dataTable tbody tr.odd th { background-color: var(--gs-surface) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even th, html.gs-theme-dark table.dataTable tbody tr.even td, html.gs-theme-dark table.dataTable tbody tr.even th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even th, body.gs-theme-dark .dataTables_wrapper table.table tbody tr.even td, body.gs-theme-dark .dataTables_wrapper table.table tbody tr.even th, body.gs-theme-dark table.dataTable tbody tr.even td, body.gs-theme-dark table.dataTable tbody tr.even th { background-color: rgba(255,255,255,0.02) !important; } /* Selección: más contraste y claramente perceptible */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight td, html.gs-theme-dark table.dataTable tbody tr.selected td, html.gs-theme-dark table.dataTable tbody tr.row_selected td, html.gs-theme-dark table.dataTable tbody tr.table-active td, html.gs-theme-dark table.dataTable tbody tr.active td, html.gs-theme-dark table.dataTable tbody tr.ui-state-highlight td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.ui-state-highlight td, body.gs-theme-dark table.dataTable tbody tr.selected td, body.gs-theme-dark table.dataTable tbody tr.row_selected td, body.gs-theme-dark table.dataTable tbody tr.table-active td, body.gs-theme-dark table.dataTable tbody tr.active td, body.gs-theme-dark table.dataTable tbody tr.ui-state-highlight td { background-color: rgba(63,108,202,0.55) !important; color: #ffffff !important; box-shadow: inset 3px 0 0 rgba(191,219,254,0.95), inset 0 0 0 1px rgba(191,219,254,0.22) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td *, html.gs-theme-dark table.dataTable tbody tr.selected td *, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td *, body.gs-theme-dark table.dataTable tbody tr.selected td * { color: #ffffff !important; } /* --------------------------------------------------------- 2) Calendarios / DatePickers (CLARO y OSCURO) - jQuery UI Datepicker (.ui-datepicker) - Bootstrap Datepicker (.datepicker / .datepicker-dropdown) --------------------------------------------------------- */ /* ====== CLARO ====== */ html:not(.gs-theme-dark) .ui-datepicker, html:not(.gs-theme-dark) .datepicker, html:not(.gs-theme-dark) .datepicker-dropdown { background: #ffffff !important; color: #0f172a !important; border: 1px solid rgba(15,23,42,0.18) !important; box-shadow: 0 14px 34px rgba(2,6,23,0.18) !important; border-radius: 10px; } html:not(.gs-theme-dark) .ui-datepicker .ui-datepicker-header, html:not(.gs-theme-dark) .datepicker table thead tr:first-child th, html:not(.gs-theme-dark) .datepicker-days thead tr:first-child th { background: #114b77 !important; color: #ffffff !important; border-bottom: 1px solid rgba(15,23,42,0.14) !important; } html:not(.gs-theme-dark) .ui-datepicker .ui-datepicker-title, html:not(.gs-theme-dark) .ui-datepicker th, html:not(.gs-theme-dark) .datepicker table thead tr:nth-child(2) th, html:not(.gs-theme-dark) .datepicker-days thead tr:nth-child(2) th { color: #0f172a !important; } html:not(.gs-theme-dark) .ui-datepicker td a, html:not(.gs-theme-dark) .ui-datepicker td span, html:not(.gs-theme-dark) .datepicker table tbody td, html:not(.gs-theme-dark) .datepicker table tbody td.day { color: #0f172a !important; } html:not(.gs-theme-dark) .ui-datepicker td a:hover, html:not(.gs-theme-dark) .datepicker table tbody td:hover, html:not(.gs-theme-dark) .datepicker table tbody td.day:hover { background: rgba(63,108,202,0.12) !important; } html:not(.gs-theme-dark) .ui-datepicker td.ui-datepicker-current-day a, html:not(.gs-theme-dark) .ui-datepicker td.ui-state-active a, html:not(.gs-theme-dark) .datepicker table tbody td.active, html:not(.gs-theme-dark) .datepicker table tbody td.active:hover { background: #3f6cca !important; color: #ffffff !important; } /* ====== OSCURO ====== */ html.gs-theme-dark .ui-datepicker, body.gs-theme-dark .ui-datepicker, html.gs-theme-dark .datepicker, body.gs-theme-dark .datepicker, html.gs-theme-dark .datepicker-dropdown, body.gs-theme-dark .datepicker-dropdown { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.60) !important; border-radius: 10px; } /* Título/encabezado del calendario */ html.gs-theme-dark .ui-datepicker .ui-datepicker-header, body.gs-theme-dark .ui-datepicker .ui-datepicker-header, html.gs-theme-dark .datepicker table thead tr:first-child th, body.gs-theme-dark .datepicker table thead tr:first-child th, html.gs-theme-dark .datepicker-days thead tr:first-child th, body.gs-theme-dark .datepicker-days thead tr:first-child th { background: #3f6cca !important; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.18) !important; } /* Fila de días (Lu Ma Mi...) + título (Diciembre 2025) */ html.gs-theme-dark .ui-datepicker .ui-datepicker-title, body.gs-theme-dark .ui-datepicker .ui-datepicker-title { color: #ffffff !important; } html.gs-theme-dark .ui-datepicker th, body.gs-theme-dark .ui-datepicker th, html.gs-theme-dark .datepicker table thead tr:nth-child(2) th, body.gs-theme-dark .datepicker table thead tr:nth-child(2) th, html.gs-theme-dark .datepicker-days thead tr:nth-child(2) th, body.gs-theme-dark .datepicker-days thead tr:nth-child(2) th { background: rgba(255,255,255,0.06) !important; color: rgba(240,245,255,0.92) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; } /* Días */ html.gs-theme-dark .ui-datepicker td a, html.gs-theme-dark .ui-datepicker td span, body.gs-theme-dark .ui-datepicker td a, body.gs-theme-dark .ui-datepicker td span, html.gs-theme-dark .datepicker table tbody td, body.gs-theme-dark .datepicker table tbody td, html.gs-theme-dark .datepicker table tbody td.day, body.gs-theme-dark .datepicker table tbody td.day { color: var(--gs-text) !important; background: transparent !important; } html.gs-theme-dark .ui-datepicker td a:hover, body.gs-theme-dark .ui-datepicker td a:hover, html.gs-theme-dark .datepicker table tbody td:hover, body.gs-theme-dark .datepicker table tbody td:hover, html.gs-theme-dark .datepicker table tbody td.day:hover, body.gs-theme-dark .datepicker table tbody td.day:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } /* Día activo/seleccionado */ html.gs-theme-dark .ui-datepicker td.ui-datepicker-current-day a, html.gs-theme-dark .ui-datepicker td.ui-state-active a, body.gs-theme-dark .ui-datepicker td.ui-datepicker-current-day a, body.gs-theme-dark .ui-datepicker td.ui-state-active a, html.gs-theme-dark .datepicker table tbody td.active, html.gs-theme-dark .datepicker table tbody td.active:hover, body.gs-theme-dark .datepicker table tbody td.active, body.gs-theme-dark .datepicker table tbody td.active:hover { background: #3f6cca !important; color: #ffffff !important; } /* --------------------------------------------------------- 3) Alertas / Notificaciones / Errores (claro y oscuro) - Bootstrap modals - jQuery UI dialogs - jConfirm / SweetAlert2 (si aplica) --------------------------------------------------------- */ /* Bootstrap modal (base) - asegurar contraste en ambos */ .modal-content { border-radius: 12px; } html.gs-theme-dark .modal-content, body.gs-theme-dark .modal-content { background: var(--gs-surface) !important; color: var(--gs-text) !important; border-color: rgba(255,255,255,0.14) !important; } html.gs-theme-dark .modal-body, body.gs-theme-dark .modal-body { color: var(--gs-text) !important; } html:not(.gs-theme-dark) .modal-body { color: #0f172a; } /* jQuery UI dialog */ html.gs-theme-dark .ui-dialog, body.gs-theme-dark .ui-dialog { background: var(--gs-surface) !important; border: 1px solid rgba(255,255,255,0.14) !important; color: var(--gs-text) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.60) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-titlebar, body.gs-theme-dark .ui-dialog .ui-dialog-titlebar { background: #3f6cca !important; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.18) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-content, body.gs-theme-dark .ui-dialog .ui-dialog-content { background: var(--gs-surface) !important; color: var(--gs-text) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-buttonpane, body.gs-theme-dark .ui-dialog .ui-dialog-buttonpane { background: #3f6cca !important; border-top: 1px solid rgba(255,255,255,0.18) !important; } html.gs-theme-dark .ui-dialog .ui-dialog-buttonpane button, body.gs-theme-dark .ui-dialog .ui-dialog-buttonpane button { background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #ffffff !important; border-radius: 10px; } html.gs-theme-dark .ui-dialog .ui-dialog-buttonpane button:hover, body.gs-theme-dark .ui-dialog .ui-dialog-buttonpane button:hover { background: rgba(255,255,255,0.16) !important; } /* SweetAlert2 */ html.gs-theme-dark .swal2-popup, body.gs-theme-dark .swal2-popup { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1px solid rgba(255,255,255,0.14) !important; } html.gs-theme-dark .swal2-title, html.gs-theme-dark .swal2-html-container, body.gs-theme-dark .swal2-title, body.gs-theme-dark .swal2-html-container { color: var(--gs-text) !important; } /* jConfirm */ html.gs-theme-dark .jconfirm .jconfirm-box, body.gs-theme-dark .jconfirm .jconfirm-box { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1px solid rgba(255,255,255,0.14) !important; } html.gs-theme-dark .jconfirm .jconfirm-title, body.gs-theme-dark .jconfirm .jconfirm-title { color: #ffffff !important; } /* --------------------------------------------------------- 4) Eliminar scroll horizontal fantasma (layout) --------------------------------------------------------- */ html, body { max-width: 100%; } body { overflow-x: hidden; /* evita scroll horizontal global */ } #content_todo, .FrameSuperior, .content-body, .mind-offcanvas-menu, .offcanvas { max-width: 100%; } /* Mantener scroll horizontal donde sí corresponde (tablas) */ .dataTables_wrapper { overflow-x: auto; } /* --------------------------------------------------------- 5) Breadcrumbs - hover/visited consistente (claro/oscuro) --------------------------------------------------------- */ /* CLARO */ html:not(.gs-theme-dark) .bar-dir a, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a { color: rgba(240,245,255,0.92); text-decoration: none; } html:not(.gs-theme-dark) .bar-dir a:visited, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:visited { color: rgba(240,245,255,0.92); } html:not(.gs-theme-dark) .bar-dir a:hover, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:hover { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.65); } /* OSCURO */ html.gs-theme-dark .bar-dir a, html.gs-theme-dark .mind-breadcrumb-wrap a, body.gs-theme-dark .bar-dir a, body.gs-theme-dark .mind-breadcrumb-wrap a { color: rgba(191,219,254,0.92) !important; text-decoration: none; } html.gs-theme-dark .bar-dir a:visited, html.gs-theme-dark .mind-breadcrumb-wrap a:visited, body.gs-theme-dark .bar-dir a:visited, body.gs-theme-dark .mind-breadcrumb-wrap a:visited { color: rgba(191,219,254,0.92) !important; } html.gs-theme-dark .bar-dir a:hover, html.gs-theme-dark .mind-breadcrumb-wrap a:hover, body.gs-theme-dark .bar-dir a:hover, body.gs-theme-dark .mind-breadcrumb-wrap a:hover { color: #ffffff !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.70); } /* ========================================================= v28b FINAL OVERRIDES (para que gane sobre reglas previas) ========================================================= */ /* ------------------ DataTables ODD/EVEN (dark): cubrir TODAS las variantes ------------------ */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd th, html.gs-theme-dark table.dataTable tbody tr.odd td, html.gs-theme-dark table.dataTable tbody tr.odd th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.odd th, body.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd td, body.gs-theme-dark .dataTables_wrapper table.table tbody tr.odd th, body.gs-theme-dark table.dataTable tbody tr.odd td, body.gs-theme-dark table.dataTable tbody tr.odd th { background-color: var(--gs-surface) !important; } html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even th, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even td, html.gs-theme-dark .dataTables_wrapper table.table tbody tr.even th, html.gs-theme-dark table.dataTable tbody tr.even td, html.gs-theme-dark table.dataTable tbody tr.even th, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.even th, body.gs-theme-dark .dataTables_wrapper table.table tbody tr.even td, body.gs-theme-dark .dataTables_wrapper table.table tbody tr.even th, body.gs-theme-dark table.dataTable tbody tr.even td, body.gs-theme-dark table.dataTable tbody tr.even th { background-color: rgba(255,255,255,0.02) !important; } /* Selección visible (dark) */ html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active td, html.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.selected td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.row_selected td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.table-active td, body.gs-theme-dark .dataTables_wrapper table.dataTable tbody tr.active td { background-color: rgba(63,108,202,0.62) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(191,219,254,0.85) !important; } /* ------------------ Calendarios: cubrir #ui-datepicker-div + dropdowns ------------------ */ /* jQuery UI Datepicker usa #ui-datepicker-div */ html.gs-theme-dark #ui-datepicker-div, body.gs-theme-dark #ui-datepicker-div { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.60) !important; border-radius: 10px !important; } html.gs-theme-dark #ui-datepicker-div .ui-datepicker-header, body.gs-theme-dark #ui-datepicker-div .ui-datepicker-header { background: #3f6cca !important; color: #ffffff !important; border: 0 !important; } html.gs-theme-dark #ui-datepicker-div .ui-datepicker-title, body.gs-theme-dark #ui-datepicker-div .ui-datepicker-title { color: #ffffff !important; } html.gs-theme-dark #ui-datepicker-div .ui-datepicker-calendar thead th, body.gs-theme-dark #ui-datepicker-div .ui-datepicker-calendar thead th { background: rgba(255,255,255,0.06) !important; color: rgba(240,245,255,0.92) !important; } html.gs-theme-dark #ui-datepicker-div td a, html.gs-theme-dark #ui-datepicker-div td span, body.gs-theme-dark #ui-datepicker-div td a, body.gs-theme-dark #ui-datepicker-div td span { color: var(--gs-text) !important; } html.gs-theme-dark #ui-datepicker-div td a:hover, body.gs-theme-dark #ui-datepicker-div td a:hover { background: rgba(59,130,246,0.22) !important; color: #ffffff !important; } html.gs-theme-dark #ui-datepicker-div td.ui-datepicker-current-day a, html.gs-theme-dark #ui-datepicker-div td.ui-state-active a, body.gs-theme-dark #ui-datepicker-div td.ui-datepicker-current-day a, body.gs-theme-dark #ui-datepicker-div td.ui-state-active a { background: #3f6cca !important; color: #ffffff !important; } /* Claro: #ui-datepicker-div - En modo corporativo NO queremos el header azul del claro. */ html:not(.gs-theme-dark):not(.gs-theme-corporativo) #ui-datepicker-div { background: #ffffff !important; color: #0f172a !important; border: 1px solid rgba(2,6,23,0.18) !important; box-shadow: 0 14px 34px rgba(2,6,23,0.18) !important; border-radius: 10px !important; } html:not(.gs-theme-dark):not(.gs-theme-corporativo) #ui-datepicker-div .ui-datepicker-header { background: #114b77 !important; color: #ffffff !important; } html:not(.gs-theme-dark):not(.gs-theme-corporativo) #ui-datepicker-div .ui-datepicker-title { color: #ffffff !important; } html:not(.gs-theme-dark):not(.gs-theme-corporativo) #ui-datepicker-div .ui-datepicker-calendar thead th { background: rgba(15,23,42,0.04) !important; color: #0f172a !important; } /* Bootstrap Datepicker: suele venir como .datepicker-dropdown.dropdown-menu */ html.gs-theme-dark .datepicker-dropdown.dropdown-menu, body.gs-theme-dark .datepicker-dropdown.dropdown-menu { background: var(--gs-surface-2) !important; border-color: rgba(255,255,255,0.18) !important; color: var(--gs-text) !important; } html.gs-theme-dark .datepicker-dropdown.dropdown-menu table thead tr:first-child th, body.gs-theme-dark .datepicker-dropdown.dropdown-menu table thead tr:first-child th { background: #3f6cca !important; color: #ffffff !important; } html.gs-theme-dark .datepicker-dropdown.dropdown-menu table thead tr:nth-child(2) th, body.gs-theme-dark .datepicker-dropdown.dropdown-menu table thead tr:nth-child(2) th { background: rgba(255,255,255,0.06) !important; color: rgba(240,245,255,0.92) !important; } /* ------------------ Alertas / Notificaciones: texto legible en ambos temas ------------------ */ /* Bootstrap modal: asegurar texto del body en oscuro */ html.gs-theme-dark .modal-body, html.gs-theme-dark .modal-body p, html.gs-theme-dark .modal-body span, html.gs-theme-dark .modal-body strong, html.gs-theme-dark .modal-body div, body.gs-theme-dark .modal-body, body.gs-theme-dark .modal-body p, body.gs-theme-dark .modal-body span, body.gs-theme-dark .modal-body strong, body.gs-theme-dark .modal-body div { color: rgba(240,245,255,0.94) !important; } html.gs-theme-dark .modal-body .text-muted, body.gs-theme-dark .modal-body .text-muted { color: rgba(240,245,255,0.70) !important; } /* jConfirm y SweetAlert: texto */ html.gs-theme-dark .jconfirm .jconfirm-content, body.gs-theme-dark .jconfirm .jconfirm-content, html.gs-theme-dark .swal2-html-container, body.gs-theme-dark .swal2-html-container { color: rgba(240,245,255,0.92) !important; } /* ------------------ Layout: eliminar scroll horizontal fantasma ------------------ */ html, body { overflow-x: hidden !important; } #content_todo, .content-body, .FrameSuperior, .mind-offcanvas-menu, .gs-win-layer { overflow-x: hidden; max-width: 100% !important; } /* Mantener scroll horizontal solo donde aplica */ .dataTables_wrapper, .table-responsive { overflow-x: auto; } /* ------------------ Breadcrumbs: hover + visited coherentes (ambos temas) ------------------ */ /* CLARO: fondo suele ser claro, links oscuros */ html:not(.gs-theme-dark) .bar-dir a, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a { color: rgba(15,23,42,0.86) !important; } html:not(.gs-theme-dark) .bar-dir a:visited, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:visited { color: rgba(15,23,42,0.80) !important; } html:not(.gs-theme-dark) .bar-dir a:hover, html:not(.gs-theme-dark) .mind-breadcrumb-wrap a:hover { color: rgba(25,64,128,0.98) !important; text-decoration: underline; text-decoration-color: rgba(25,64,128,0.55); } /* OSCURO: links claros */ html.gs-theme-dark .bar-dir a, html.gs-theme-dark .mind-breadcrumb-wrap a, body.gs-theme-dark .bar-dir a, body.gs-theme-dark .mind-breadcrumb-wrap a { color: rgba(240,245,255,0.92) !important; } html.gs-theme-dark .bar-dir a:visited, html.gs-theme-dark .mind-breadcrumb-wrap a:visited, body.gs-theme-dark .bar-dir a:visited, body.gs-theme-dark .mind-breadcrumb-wrap a:visited { color: rgba(191,219,254,0.92) !important; } html.gs-theme-dark .bar-dir a:hover, html.gs-theme-dark .mind-breadcrumb-wrap a:hover, body.gs-theme-dark .bar-dir a:hover, body.gs-theme-dark .mind-breadcrumb-wrap a:hover { color: #ffffff !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.70); } /* ========================================================= v31 Breadcrumbs - coherencia hover/visited (final) - Evita morado por :visited - Mantiene contraste según el color base del contenedor ========================================================= */ /* CLARO: respeta el color del contenedor y evita combinaciones raras */ html:not(.gs-theme-dark) .FrameSuperior .bar-dir a, html:not(.gs-theme-dark) .FrameSuperior .mind-breadcrumb-wrap a { color: inherit !important; text-decoration: none; } html:not(.gs-theme-dark) .FrameSuperior .bar-dir a:visited, html:not(.gs-theme-dark) .FrameSuperior .mind-breadcrumb-wrap a:visited { color: inherit !important; } html:not(.gs-theme-dark) .FrameSuperior .bar-dir a:hover, html:not(.gs-theme-dark) .FrameSuperior .mind-breadcrumb-wrap a:hover { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; text-decoration-color: currentColor; } html:not(.gs-theme-dark) .FrameSuperior .bar-dir a:focus-visible, html:not(.gs-theme-dark) .FrameSuperior .mind-breadcrumb-wrap a:focus-visible { outline: 2px solid rgba(63,108,202,0.45); outline-offset: 2px; border-radius: 4px; } /* OSCURO: color consistente y :visited sin perder contraste */ html.gs-theme-dark .FrameSuperior .bar-dir a, html.gs-theme-dark .FrameSuperior .mind-breadcrumb-wrap a, body.gs-theme-dark .FrameSuperior .bar-dir a, body.gs-theme-dark .FrameSuperior .mind-breadcrumb-wrap a { color: rgba(240,245,255,0.92) !important; text-decoration: none; } html.gs-theme-dark .FrameSuperior .bar-dir a:visited, html.gs-theme-dark .FrameSuperior .mind-breadcrumb-wrap a:visited, body.gs-theme-dark .FrameSuperior .bar-dir a:visited, body.gs-theme-dark .FrameSuperior .mind-breadcrumb-wrap a:visited { color: rgba(191,219,254,0.92) !important; } html.gs-theme-dark .FrameSuperior .bar-dir a:hover, html.gs-theme-dark .FrameSuperior .mind-breadcrumb-wrap a:hover, body.gs-theme-dark .FrameSuperior .bar-dir a:hover, body.gs-theme-dark .FrameSuperior .mind-breadcrumb-wrap a:hover { color: #ffffff !important; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; text-decoration-color: rgba(255,255,255,0.70); } html.gs-theme-dark .FrameSuperior .bar-dir a:focus-visible, html.gs-theme-dark .FrameSuperior .mind-breadcrumb-wrap a:focus-visible, body.gs-theme-dark .FrameSuperior .bar-dir a:focus-visible, body.gs-theme-dark .FrameSuperior .mind-breadcrumb-wrap a:focus-visible { outline: 2px solid rgba(191,219,254,0.55); outline-offset: 2px; border-radius: 4px; } /* ========================================================= Breadcrumbs (#mindBreadcrumbs): coherencia Claro/Oscuro (override final solicitado) ========================================================= */ /* CLARO: fuentes oscuras */ html:not(.gs-theme-dark) #mindBreadcrumbs a, html:not(.gs-theme-dark) #mindBreadcrumbs a:visited, body:not(.gs-theme-dark) #mindBreadcrumbs a, body:not(.gs-theme-dark) #mindBreadcrumbs a:visited{ color: #0f2f5a !important; text-decoration: none !important; } html:not(.gs-theme-dark) #mindBreadcrumbs a:hover, body:not(.gs-theme-dark) #mindBreadcrumbs a:hover{ color: #0b4ea2 !important; text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 2px; } /* OSCURO: fuentes muy claras */ html.gs-theme-dark #mindBreadcrumbs a, html.gs-theme-dark #mindBreadcrumbs a:visited, body.gs-theme-dark #mindBreadcrumbs a, body.gs-theme-dark #mindBreadcrumbs a:visited{ color: #f0f5ff !important; text-decoration: none !important; } html.gs-theme-dark #mindBreadcrumbs a:visited, body.gs-theme-dark #mindBreadcrumbs a:visited{ color: rgba(191, 219, 254, 0.95) !important; } html.gs-theme-dark #mindBreadcrumbs a:hover, body.gs-theme-dark #mindBreadcrumbs a:hover{ color: #ffffff !important; text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 2px; text-decoration-color: rgba(255,255,255,0.75); } #mindBreadcrumbs a:focus-visible{ outline: 2px solid rgba(63, 108, 202, 0.85); outline-offset: 2px; border-radius: 6px; } /* ========================================================= Breadcrumb current item (.mind-bc-current) ========================================================= */ /* CLARO: resaltado sutil pero legible */ html:not(.gs-theme-dark) #mindBreadcrumbs .mind-bc-current, html:not(.gs-theme-dark) #mindBreadcrumbs .mind-bc-current a, html:not(.gs-theme-dark) #mindBreadcrumbs a.mind-bc-current, body:not(.gs-theme-dark) #mindBreadcrumbs .mind-bc-current, body:not(.gs-theme-dark) #mindBreadcrumbs .mind-bc-current a, body:not(.gs-theme-dark) #mindBreadcrumbs a.mind-bc-current{ color: #0b4ea2 !important; font-weight: 800 !important; background: rgba(63, 108, 202, 0.14) !important; border: 1px solid rgba(63, 108, 202, 0.20) !important; border-radius: 8px; padding: 2px 8px; } html:not(.gs-theme-dark) #mindBreadcrumbs .mind-bc-current:hover, html:not(.gs-theme-dark) #mindBreadcrumbs a.mind-bc-current:hover, body:not(.gs-theme-dark) #mindBreadcrumbs .mind-bc-current:hover, body:not(.gs-theme-dark) #mindBreadcrumbs a.mind-bc-current:hover{ color: #0b4ea2 !important; text-decoration: none !important; } /* OSCURO: resaltado claro (alto contraste) */ html.gs-theme-dark #mindBreadcrumbs .mind-bc-current, html.gs-theme-dark #mindBreadcrumbs .mind-bc-current a, html.gs-theme-dark #mindBreadcrumbs a.mind-bc-current, body.gs-theme-dark #mindBreadcrumbs .mind-bc-current, body.gs-theme-dark #mindBreadcrumbs .mind-bc-current a, body.gs-theme-dark #mindBreadcrumbs a.mind-bc-current{ color: #ffffff !important; font-weight: 800 !important; background: rgba(63, 108, 202, 0.34) !important; border: 1px solid rgba(191, 219, 254, 0.32) !important; border-radius: 8px; padding: 2px 8px; } html.gs-theme-dark #mindBreadcrumbs .mind-bc-current:hover, html.gs-theme-dark #mindBreadcrumbs a.mind-bc-current:hover, body.gs-theme-dark #mindBreadcrumbs .mind-bc-current:hover, body.gs-theme-dark #mindBreadcrumbs a.mind-bc-current:hover{ color: #ffffff !important; text-decoration: none !important; } /* ========================================================= User menu (nombre de usuario): siempre encima de ventanas/objetos - Desktop: dropdown (portal a body vía JS) - Mobile: offcanvasRight ========================================================= */ :root{ --gs-z-user-menu: 1000000; } .gs-user-menu-portal{ position: fixed !important; z-index: var(--gs-z-user-menu) !important; will-change: top,left; /* Popper puede dejar transform/inset; neutralizar para evitar que en móvil quede fuera de pantalla */ transform: none !important; inset: auto !important; } /* Mejor respuesta en móviles (evita delay y asegura click) */ .gs-theme-btn{ touch-action: manipulation; } /* Por si el dropdown NO se porta a body (fallback) */ .navbar .dropdown-menu.user-menu, .navbar .dropdown-menu.dropdown-menu-end, .navbar .dropdown-menu{ z-index: var(--gs-z-user-menu) !important; } /* Offcanvas derecho (mobile / user menu) por encima de ventanas */ #offcanvasRight.offcanvas{ z-index: calc(var(--gs-z-user-menu) - 1) !important; } .offcanvas-backdrop{ z-index: calc(var(--gs-z-user-menu) - 2) !important; } /* ========================================================= Fix v36: asegurar interacción en móvil (tema + menú usuario) ========================================================= */ .gs-theme-toggle{ display: inline-flex !important; pointer-events: auto !important; } .gs-theme-btn{ pointer-events: auto !important; } /* OffcanvasRight (menú usuario) siempre por encima de ventanas */ :root{ --gs-z-user-menu: 1000000; } #offcanvasRight.offcanvas{ z-index: calc(var(--gs-z-user-menu) - 1) !important; } .offcanvas-backdrop{ z-index: calc(var(--gs-z-user-menu) - 2) !important; } /* ========================================================= Corporate - Ajustes UI solicitados - Favoritos: hover con buen contraste en topbar morada - Ventanas emergentes (Window Manager): título morado - Calendarios (bootstrap-datepicker / jQuery UI / Flatpickr) - DataTables: encabezados y selección en morado ========================================================= */ /* ---- Favoritos (Topbar) ---- */ html.gs-theme-corporativo .mind-fav-card, body.gs-theme-corporativo .mind-fav-card { background: rgba(255,255,255,0.92) !important; border-color: rgba(255,255,255,0.55) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important; } html.gs-theme-corporativo .mind-fav-card:hover, body.gs-theme-corporativo .mind-fav-card:hover { background: rgba(255,255,255,0.98) !important; border-color: rgba(255,255,255,0.85) !important; color: #0f172a !important; } /* ---- Menú lateral (offcanvas) - quitar azul y dejar franja morada ---- */ html.gs-theme-corporativo #offcanvasMenu .offcanvas-header, body.gs-theme-corporativo #offcanvasMenu .offcanvas-header { background: #ffffff !important; color: var(--gs-brand-800) !important; position: relative; } html.gs-theme-corporativo #offcanvasMenu .offcanvas-header::before, body.gs-theme-corporativo #offcanvasMenu .offcanvas-header::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gs-brand-800); } /* ---- Window Manager (ventanas emergentes) ---- */ html.gs-theme-corporativo .gs-win__titlebar, body.gs-theme-corporativo .gs-win__titlebar { background: var(--gs-brand-800) !important; } html.gs-theme-corporativo .gs-win.is-focused, body.gs-theme-corporativo .gs-win.is-focused { border-color: rgba(90, 42, 130, 0.65) !important; } /* Ventanas de sistema mantienen titlebar blanca */ html.gs-theme-corporativo .gs-win[data-gswin-type="workspace-manager"] .gs-win__titlebar, html.gs-theme-corporativo .gs-win[data-gswin-type="tile-manager"] .gs-win__titlebar, body.gs-theme-corporativo .gs-win[data-gswin-type="workspace-manager"] .gs-win__titlebar, body.gs-theme-corporativo .gs-win[data-gswin-type="tile-manager"] .gs-win__titlebar { background: #ffffff !important; color: #0f172a !important; } /* jQuery UI Dialog (ventana emergente clásica) */ html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar { background: var(--gs-brand-800) !important; border: 0 !important; } html.gs-theme-corporativo .ui-dialog .ui-dialog-title, body.gs-theme-corporativo .ui-dialog .ui-dialog-title { color: #ffffff !important; } /* ---- Calendarios: Bootstrap Datepicker ---- */ html.gs-theme-corporativo .datepicker table thead tr:first-child th, html.gs-theme-corporativo .datepicker .datepicker-switch, html.gs-theme-corporativo .datepicker .prev, html.gs-theme-corporativo .datepicker .next, body.gs-theme-corporativo .datepicker table thead tr:first-child th, body.gs-theme-corporativo .datepicker .datepicker-switch, body.gs-theme-corporativo .datepicker .prev, body.gs-theme-corporativo .datepicker .next { background: var(--gs-brand-800) !important; color: #ffffff !important; } html.gs-theme-corporativo .datepicker table thead tr:nth-child(2) th, html.gs-theme-corporativo .datepicker table thead tr:nth-child(2) th.dow, body.gs-theme-corporativo .datepicker table thead tr:nth-child(2) th, body.gs-theme-corporativo .datepicker table thead tr:nth-child(2) th.dow { background: rgba(90, 42, 130, 0.08) !important; color: #0f172a !important; } html.gs-theme-corporativo .datepicker table tbody tr td.day:hover, body.gs-theme-corporativo .datepicker table tbody tr td.day:hover { background: rgba(90, 42, 130, 0.16) !important; color: #0f172a !important; } html.gs-theme-corporativo .datepicker table tbody tr td.active, html.gs-theme-corporativo .datepicker table tbody tr td.active:hover, body.gs-theme-corporativo .datepicker table tbody tr td.active, body.gs-theme-corporativo .datepicker table tbody tr td.active:hover { background: var(--gs-brand-700) !important; color: #ffffff !important; } /* ---- Calendarios: jQuery UI Datepicker ---- */ html.gs-theme-corporativo .ui-datepicker .ui-datepicker-header, body.gs-theme-corporativo .ui-datepicker .ui-datepicker-header { background: var(--gs-brand-800) !important; border: 0 !important; color: #ffffff !important; } /* Dashboard: jQuery UI Datepicker se renderiza como #ui-datepicker-div (usa combos Mes/Año + Today/Done) - Los estilos "claro" del sistema usan azul; en corporativo forzamos morado + lavandas. */ html.gs-theme-corporativo #ui-datepicker-div.ui-datepicker, body.gs-theme-corporativo #ui-datepicker-div.ui-datepicker { background: #ffffff !important; border: 1px solid rgba(90, 42, 130, 0.22) !important; border-radius: 12px !important; box-shadow: 0 14px 34px rgba(2, 6, 23, 0.18) !important; padding: 8px !important; } html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-header, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-header { background: var(--gs-brand-800) !important; border: 0 !important; border-radius: 10px !important; padding: 6px 8px !important; } html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-prev, html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-next, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-prev, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-next { border-radius: 10px !important; } html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-prev:hover, html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-next:hover, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-prev:hover, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-next:hover { background: rgba(255, 255, 255, 0.18) !important; } html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-title, html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-title select, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-title, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-title select { color: #ffffff !important; font-weight: 800 !important; } /* Combos Mes/Año (changeMonth/changeYear) */ html.gs-theme-corporativo #ui-datepicker-div select.ui-datepicker-month, html.gs-theme-corporativo #ui-datepicker-div select.ui-datepicker-year, body.gs-theme-corporativo #ui-datepicker-div select.ui-datepicker-month, body.gs-theme-corporativo #ui-datepicker-div select.ui-datepicker-year { background: rgba(255,255,255,0.14) !important; border: 1px solid rgba(255,255,255,0.25) !important; color: #ffffff !important; border-radius: 9px !important; padding: 2px 6px !important; } /* Días de semana */ html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-calendar thead th, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-calendar thead th { background: rgba(90, 42, 130, 0.08) !important; color: #0f172a !important; border-radius: 8px !important; } /* Celdas */ html.gs-theme-corporativo #ui-datepicker-div td a, html.gs-theme-corporativo #ui-datepicker-div td span, body.gs-theme-corporativo #ui-datepicker-div td a, body.gs-theme-corporativo #ui-datepicker-div td span { border-radius: 8px !important; border: 1px solid transparent !important; background: #ffffff !important; color: #0f172a !important; } html.gs-theme-corporativo #ui-datepicker-div td a:hover, body.gs-theme-corporativo #ui-datepicker-div td a:hover { background: rgba(90, 42, 130, 0.16) !important; color: #0f172a !important; } /* Día seleccionado */ html.gs-theme-corporativo #ui-datepicker-div td.ui-datepicker-current-day a, html.gs-theme-corporativo #ui-datepicker-div td a.ui-state-active, body.gs-theme-corporativo #ui-datepicker-div td.ui-datepicker-current-day a, body.gs-theme-corporativo #ui-datepicker-div td a.ui-state-active { background: var(--gs-brand-700) !important; color: #ffffff !important; border-color: rgba(0,0,0,0) !important; } /* Hoy */ html.gs-theme-corporativo #ui-datepicker-div td a.ui-state-highlight, body.gs-theme-corporativo #ui-datepicker-div td a.ui-state-highlight { background: rgba(90, 42, 130, 0.10) !important; color: var(--gs-brand-800) !important; border-color: rgba(90, 42, 130, 0.22) !important; } /* Panel de botones (Today / Done) */ html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-buttonpane, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-buttonpane { border-top: 1px solid rgba(90, 42, 130, 0.14) !important; margin-top: 8px !important; } html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-buttonpane button, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-buttonpane button { border-radius: 10px !important; border: 1px solid rgba(90, 42, 130, 0.24) !important; background: rgba(90, 42, 130, 0.08) !important; color: var(--gs-brand-800) !important; font-weight: 700 !important; } html.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close, body.gs-theme-corporativo #ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close { background: var(--gs-brand-800) !important; border-color: var(--gs-brand-800) !important; color: #ffffff !important; } html.gs-theme-corporativo .ui-datepicker .ui-datepicker-title, html.gs-theme-corporativo .ui-datepicker .ui-datepicker-title span, body.gs-theme-corporativo .ui-datepicker .ui-datepicker-title, body.gs-theme-corporativo .ui-datepicker .ui-datepicker-title span { color: #ffffff !important; } /* Iconos prev/next de jQuery UI (normalmente sprite oscuro) => invertir para header morado */ html.gs-theme-corporativo .ui-datepicker .ui-datepicker-prev span, html.gs-theme-corporativo .ui-datepicker .ui-datepicker-next span, body.gs-theme-corporativo .ui-datepicker .ui-datepicker-prev span, body.gs-theme-corporativo .ui-datepicker .ui-datepicker-next span { filter: brightness(0) invert(1) !important; } html.gs-theme-corporativo .ui-datepicker td a.ui-state-active, html.gs-theme-corporativo .ui-datepicker td a.ui-state-highlight, body.gs-theme-corporativo .ui-datepicker td a.ui-state-active, body.gs-theme-corporativo .ui-datepicker td a.ui-state-highlight { background: var(--gs-brand-700) !important; color: #ffffff !important; border-color: rgba(0,0,0,0) !important; } /* ---- Calendarios: Flatpickr ---- */ html.gs-theme-corporativo .flatpickr-calendar, body.gs-theme-corporativo .flatpickr-calendar { border-color: rgba(90, 42, 130, 0.22) !important; box-shadow: 0 14px 34px rgba(2, 15, 43, 0.18) !important; } html.gs-theme-corporativo .flatpickr-months, body.gs-theme-corporativo .flatpickr-months { background: var(--gs-brand-800) !important; } html.gs-theme-corporativo .flatpickr-prev-month svg, html.gs-theme-corporativo .flatpickr-next-month svg, body.gs-theme-corporativo .flatpickr-prev-month svg, body.gs-theme-corporativo .flatpickr-next-month svg { fill: #ffffff !important; } html.gs-theme-corporativo .flatpickr-months .flatpickr-month, html.gs-theme-corporativo .flatpickr-current-month, html.gs-theme-corporativo .flatpickr-monthDropdown-months, body.gs-theme-corporativo .flatpickr-months .flatpickr-month, body.gs-theme-corporativo .flatpickr-current-month, body.gs-theme-corporativo .flatpickr-monthDropdown-months { color: #ffffff !important; } html.gs-theme-corporativo .flatpickr-weekdays, body.gs-theme-corporativo .flatpickr-weekdays { background: rgba(90, 42, 130, 0.08) !important; } html.gs-theme-corporativo .flatpickr-day.selected, html.gs-theme-corporativo .flatpickr-day.startRange, html.gs-theme-corporativo .flatpickr-day.endRange, body.gs-theme-corporativo .flatpickr-day.selected, body.gs-theme-corporativo .flatpickr-day.startRange, body.gs-theme-corporativo .flatpickr-day.endRange { background: var(--gs-brand-700) !important; border-color: var(--gs-brand-700) !important; color: #ffffff !important; } html.gs-theme-corporativo .flatpickr-day:hover, body.gs-theme-corporativo .flatpickr-day:hover { background: rgba(90, 42, 130, 0.16) !important; } /* ---- DataTables: barra superior (controles) + selección ---- */ html.gs-theme-corporativo .dataTables_wrapper > .row:first-child, body.gs-theme-corporativo .dataTables_wrapper > .row:first-child { background: rgba(90, 42, 130, 0.06) !important; border: 1px solid rgba(90, 42, 130, 0.14) !important; border-radius: 10px !important; padding: 6px 8px !important; margin: 0 0 6px 0 !important; } html.gs-theme-corporativo .dataTables_wrapper table.dataTable tbody tr.gs-row-selected > td, html.gs-theme-corporativo .dataTables_wrapper table.table tbody tr.gs-row-selected > td, body.gs-theme-corporativo .dataTables_wrapper table.dataTable tbody tr.gs-row-selected > td, body.gs-theme-corporativo .dataTables_wrapper table.table tbody tr.gs-row-selected > td { background-color: rgba(90, 42, 130, 0.14) !important; } html.gs-theme-corporativo .dataTables_wrapper table.dataTable tbody tr.gs-row-selected > td:first-child, html.gs-theme-corporativo .dataTables_wrapper table.table tbody tr.gs-row-selected > td:first-child, body.gs-theme-corporativo .dataTables_wrapper table.dataTable tbody tr.gs-row-selected > td:first-child, body.gs-theme-corporativo .dataTables_wrapper table.table tbody tr.gs-row-selected > td:first-child { box-shadow: inset 3px 0 0 rgba(90, 42, 130, 0.65) !important; } /* ============================================================ CORPORATIVO - Fixes adicionales solicitados - Breadcrumbs (visited) visibles sobre topbar morada - Dashboard: bordes de cards coherentes con el tema - DataTables: barra/títulos (thead + head de card) corporativo ============================================================ */ /* Breadcrumbs: asegurar visibilidad cuando el link está :visited */ html.gs-theme-corporativo body .bar-dir #mindBreadcrumbs a:visited, body.gs-theme-corporativo .bar-dir #mindBreadcrumbs a:visited, body.gs-theme-corporativo .bar-dir .mind-bc-link:visited { color: rgba(255,255,255,0.96) !important; } body.gs-theme-corporativo .bar-dir #mindBreadcrumbs a:visited:hover, body.gs-theme-corporativo .bar-dir .mind-bc-link:visited:hover { background: rgba(255,255,255,0.18) !important; color: #ffffff !important; } /* Dashboard V2 (gsdb): bordes de cards y foco en morado */ html.gs-theme-corporativo .gsdb, body.gs-theme-corporativo .gsdb { --gsdb-border: var(--geosales-blue-soft-border); --gsdb-focus: var(--geosales-blue-focus); --gsdb-shadow: 0 12px 30px rgba(58, 19, 93, 0.12); } html.gs-theme-corporativo .gsdb .gsdb-card, html.gs-theme-corporativo .gsdb .gsdb-kpi, html.gs-theme-corporativo .gsdb .gsdb__filters, html.gs-theme-corporativo .gsdb .card, body.gs-theme-corporativo .gsdb .gsdb-card, body.gs-theme-corporativo .gsdb .gsdb-kpi, body.gs-theme-corporativo .gsdb .gsdb__filters, body.gs-theme-corporativo .gsdb .card { border-color: var(--geosales-blue-soft-border) !important; } html.gs-theme-corporativo .gsdb .gsdb-card:hover, html.gs-theme-corporativo .gsdb .gsdb-kpi:hover, body.gs-theme-corporativo .gsdb .gsdb-card:hover, body.gs-theme-corporativo .gsdb .gsdb-kpi:hover { border-color: rgba(90, 42, 130, 0.45) !important; box-shadow: 0 12px 32px rgba(58, 19, 93, 0.16) !important; } /* Si el dashboard marca un item como active/selected, evitar outline azul */ html.gs-theme-corporativo .gsdb .active, html.gs-theme-corporativo .gsdb .is-active, html.gs-theme-corporativo .gsdb .selected, body.gs-theme-corporativo .gsdb .active, body.gs-theme-corporativo .gsdb .is-active, body.gs-theme-corporativo .gsdb .selected { outline-color: var(--geosales-blue) !important; } /* Barra de títulos (head) sobre tablas del dashboard ("Ventas por canal", etc.) */ html.gs-theme-corporativo .gsdb-card__head--table, body.gs-theme-corporativo .gsdb-card__head--table { position: relative; background: linear-gradient(180deg, rgba(90, 42, 130, 0.10), rgba(90, 42, 130, 0.06)) !important; border-bottom: 1px solid var(--geosales-blue-soft-border) !important; } html.gs-theme-corporativo .gsdb-card__head--table::before, body.gs-theme-corporativo .gsdb-card__head--table::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--geosales-blue); border-top-left-radius: 14px; border-bottom-left-radius: 14px; opacity: 0.9; } /* DataTables: thead + controles superiores en corporativo */ html.gs-theme-corporativo .dataTables_wrapper, body.gs-theme-corporativo .dataTables_wrapper { color: var(--gs-text); } html.gs-theme-corporativo .dataTables_wrapper table.dataTable thead th, html.gs-theme-corporativo .dataTables_wrapper table.dataTable thead td, html.gs-theme-corporativo .dataTables_wrapper table.table thead th, html.gs-theme-corporativo .dataTables_wrapper table.table thead td, body.gs-theme-corporativo .dataTables_wrapper table.dataTable thead th, body.gs-theme-corporativo .dataTables_wrapper table.dataTable thead td, body.gs-theme-corporativo .dataTables_wrapper table.table thead th, body.gs-theme-corporativo .dataTables_wrapper table.table thead td { background: linear-gradient(180deg, var(--geosales-blue), var(--geosales-blue-hover)) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.18) !important; } html.gs-theme-corporativo .dataTables_wrapper table.dataTable, html.gs-theme-corporativo .dataTables_wrapper table.table, body.gs-theme-corporativo .dataTables_wrapper table.dataTable, body.gs-theme-corporativo .dataTables_wrapper table.table { border-color: var(--geosales-blue-soft-border) !important; } html.gs-theme-corporativo .dataTables_wrapper table.dataTable tbody tr:hover > td, html.gs-theme-corporativo .dataTables_wrapper table.table tbody tr:hover > td, body.gs-theme-corporativo .dataTables_wrapper table.dataTable tbody tr:hover > td, body.gs-theme-corporativo .dataTables_wrapper table.table tbody tr:hover > td { background: var(--geosales-blue-soft) !important; } html.gs-theme-corporativo .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link, body.gs-theme-corporativo .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link { background: var(--geosales-blue) !important; border-color: var(--geosales-blue) !important; color: #fff !important; } html.gs-theme-corporativo .dataTables_wrapper .dataTables_paginate .pagination .page-link:hover, body.gs-theme-corporativo .dataTables_wrapper .dataTables_paginate .pagination .page-link:hover { background: var(--geosales-blue-soft-2) !important; border-color: var(--geosales-blue-soft-border) !important; } /* Dashboard V2 (gsdb): KPI top accent corporativo */ html.gs-theme-corporativo .gsdb .gsdb-kpi::before, body.gs-theme-corporativo .gsdb .gsdb-kpi::before { background: linear-gradient(90deg, rgba(80, 33, 114, 0.95), rgba(80, 33, 114, 0.28)) !important; opacity: 0.9 !important; } html.gs-theme-corporativo .gsdb .gsdb-kpi.is-active, body.gs-theme-corporativo .gsdb .gsdb-kpi.is-active { border-color: rgba(80, 33, 114, 0.55) !important; box-shadow: 0 14px 34px rgba(58, 19, 93, 0.16) !important; } html.gs-theme-corporativo .gsdb .gsdb-kpi__icon, body.gs-theme-corporativo .gsdb .gsdb-kpi__icon { background: rgba(80, 33, 114, 0.10) !important; color: rgba(80, 33, 114, 0.95) !important; } html.gs-theme-corporativo .gsdb .gsdb-kpi__menu:hover, body.gs-theme-corporativo .gsdb .gsdb-kpi__menu:hover { background: rgba(80, 33, 114, 0.10) !important; color: rgba(80, 33, 114, 0.95) !important; } /* ============================================================ CORPORATIVO - Ventanas internas (legacy) - Algunos módulos usan Bootstrap modal/panels o jQuery UI genérico (.ui-widget-header) - Se fuerza el título a morado para evitar barras azules. ============================================================ */ /* jQuery UI genérico: headers azules heredados */ html.gs-theme-corporativo .ui-widget-header, body.gs-theme-corporativo .ui-widget-header { background: var(--gs-brand-800) !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } /* jQuery UI Dialog: botón cerrar visible */ html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close { border-radius: 8px !important; } html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close:hover, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close:hover { background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.28) !important; } html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close span, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close span { filter: brightness(0) invert(1) !important; } /* Bootstrap Modal (BS3/BS5): header morado */ html.gs-theme-corporativo .modal-header, body.gs-theme-corporativo .modal-header { background: var(--gs-brand-800) !important; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.18) !important; } html.gs-theme-corporativo .modal-header .modal-title, body.gs-theme-corporativo .modal-header .modal-title { color: #ffffff !important; } /* Close (BS3) */ html.gs-theme-corporativo .modal-header .close, body.gs-theme-corporativo .modal-header .close { color: #ffffff !important; opacity: 0.9 !important; text-shadow: none !important; } html.gs-theme-corporativo .modal-header .close:hover, body.gs-theme-corporativo .modal-header .close:hover { opacity: 1 !important; } /* Close (BS5) */ html.gs-theme-corporativo .modal-header .btn-close, body.gs-theme-corporativo .modal-header .btn-close { filter: invert(1) grayscale(1); opacity: 0.85; } html.gs-theme-corporativo .modal-header .btn-close:hover, body.gs-theme-corporativo .modal-header .btn-close:hover { opacity: 1; } html.gs-theme-corporativo .modal-content, body.gs-theme-corporativo .modal-content { border-color: rgba(90, 42, 130, 0.35) !important; } html.gs-theme-corporativo .modal-footer, body.gs-theme-corporativo .modal-footer { background: rgba(90, 42, 130, 0.06) !important; border-top: 1px solid rgba(90, 42, 130, 0.14) !important; } /* Panels (Bootstrap legacy) dentro de ventanas: heading corporativo */ html.gs-theme-corporativo .panel-primary > .panel-heading, body.gs-theme-corporativo .panel-primary > .panel-heading, html.gs-theme-corporativo .panel-heading.bg-primary, body.gs-theme-corporativo .panel-heading.bg-primary { background: var(--gs-brand-800) !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } html.gs-theme-corporativo .panel-primary > .panel-heading .panel-title, body.gs-theme-corporativo .panel-primary > .panel-heading .panel-title, html.gs-theme-corporativo .panel-heading .panel-title, body.gs-theme-corporativo .panel-heading .panel-title { color: #ffffff !important; } /* Algunos módulos usan .panel-body con fondo celeste; lo llevamos a superficie clara */ html.gs-theme-corporativo .modal-body, body.gs-theme-corporativo .modal-body, html.gs-theme-corporativo .ui-dialog .ui-dialog-content, body.gs-theme-corporativo .ui-dialog .ui-dialog-content { background: #ffffff !important; } /* ============================================================ CORPORATIVO - Ventanas internas (legacy) - Algunos módulos usan Bootstrap modal/panels o jQuery UI genérico (.ui-widget-header) - Se fuerza el título a morado para evitar barras azules. ============================================================ */ /* jQuery UI genérico: headers (muchos componentes usan .ui-widget-header) */ html.gs-theme-corporativo .ui-widget-header, body.gs-theme-corporativo .ui-widget-header { background: var(--gs-brand-800) !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } /* Botón cerrar jQuery UI (si aparece en ventanas legacy) */ html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close { border-radius: 8px !important; border-color: rgba(255,255,255,0.28) !important; } html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close:hover, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close:hover { background: rgba(255,255,255,0.18) !important; } html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close .ui-icon, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close .ui-icon { filter: brightness(0) invert(1) !important; } /* Bootstrap Modal (BS3/BS4/BS5): forzar header morado */ html.gs-theme-corporativo .modal-header, body.gs-theme-corporativo .modal-header { background: var(--gs-brand-800) !important; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,0.18) !important; } html.gs-theme-corporativo .modal-header .modal-title, body.gs-theme-corporativo .modal-header .modal-title { color: #ffffff !important; font-weight: 800; } /* Close button: BS5 (.btn-close) y BS3/4 (.close) */ html.gs-theme-corporativo .modal-header .btn-close, body.gs-theme-corporativo .modal-header .btn-close { filter: invert(1) grayscale(1); opacity: 0.85; } html.gs-theme-corporativo .modal-header .btn-close:hover, body.gs-theme-corporativo .modal-header .btn-close:hover { opacity: 1; } html.gs-theme-corporativo .modal-header .close, body.gs-theme-corporativo .modal-header .close { color: #ffffff !important; opacity: 0.9 !important; text-shadow: none !important; } html.gs-theme-corporativo .modal-header .close:hover, body.gs-theme-corporativo .modal-header .close:hover { opacity: 1 !important; } html.gs-theme-corporativo .modal-content, body.gs-theme-corporativo .modal-content { border-color: rgba(90, 42, 130, 0.40) !important; } html.gs-theme-corporativo .modal-footer, body.gs-theme-corporativo .modal-footer { background: rgba(90, 42, 130, 0.06) !important; border-top: 1px solid rgba(90, 42, 130, 0.14) !important; } /* Bootstrap Panels (legacy): barras azules -> morado Nota: lo limitamos a panel headings típicos para evitar afectar layouts modernos. */ html.gs-theme-corporativo .panel-primary > .panel-heading, body.gs-theme-corporativo .panel-primary > .panel-heading, html.gs-theme-corporativo .panel-heading.bg-primary, body.gs-theme-corporativo .panel-heading.bg-primary { background: var(--gs-brand-800) !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } html.gs-theme-corporativo .panel-primary > .panel-heading a, body.gs-theme-corporativo .panel-primary > .panel-heading a, html.gs-theme-corporativo .panel-heading.bg-primary a, body.gs-theme-corporativo .panel-heading.bg-primary a { color: #ffffff !important; } /* Toolbars azules heredados (caso frecuente en formularios legacy) */ html.gs-theme-corporativo .bg-info, body.gs-theme-corporativo .bg-info { background-color: rgba(90, 42, 130, 0.10) !important; color: var(--gs-brand-800) !important; } /* ============================================================ CORPORATIVO - Ventanas internas (legacy) - Algunos módulos usan Bootstrap modal/panels o jQuery UI genérico (.ui-widget-header) - Se fuerza el título a morado para evitar barras azules. ============================================================ */ /* jQuery UI genérico: headers (muchos componentes usan .ui-widget-header además del titlebar) */ html.gs-theme-corporativo .ui-widget-header, body.gs-theme-corporativo .ui-widget-header { background: var(--gs-brand-800) !important; border-color: rgba(255,255,255,0.18) !important; color: #ffffff !important; } /* Botón cerrar de jQuery UI (si el sprite se ve oscuro) */ html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close { border-radius: 10px !important; } html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close:hover, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close:hover { background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.22) !important; } html.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close span, body.gs-theme-corporativo .ui-dialog .ui-dialog-titlebar-close span { filter: brightness(0) invert(1) !important; } /* Bootstrap Modal (Bootstrap 3/4/5) */ html.gs-theme-corporativo .modal-header, body.gs-theme-corporativo .modal-header { background: var(--gs-brand-800) !important; border-bottom: 1px solid rgba(255,255,255,0.18) !important; color: #ffffff !important; } html.gs-theme-corporativo .modal-title, body.gs-theme-corporativo .modal-title { color: #ffffff !important; } /* Close button Bootstrap 3 (.close) */ html.gs-theme-corporativo .modal-header .close, body.gs-theme-corporativo .modal-header .close { color: #ffffff !important; opacity: 0.92 !important; text-shadow: none !important; } html.gs-theme-corporativo .modal-header .close:hover, body.gs-theme-corporativo .modal-header .close:hover { opacity: 1 !important; } /* Close button Bootstrap 5 (.btn-close) */ html.gs-theme-corporativo .modal-header .btn-close, body.gs-theme-corporativo .modal-header .btn-close { filter: invert(1) grayscale(1) !important; opacity: 0.86; } html.gs-theme-corporativo .modal-header .btn-close:hover, body.gs-theme-corporativo .modal-header .btn-close:hover { opacity: 1; } html.gs-theme-corporativo .modal-content, body.gs-theme-corporativo .modal-content { border-color: rgba(90, 42, 130, 0.35) !important; } html.gs-theme-corporativo .modal-footer, body.gs-theme-corporativo .modal-footer { background: rgba(90, 42, 130, 0.06) !important; border-top: 1px solid rgba(90, 42, 130, 0.14) !important; } /* Bootstrap Panels (legacy) - solo cuando son encabezados/títulos */ html.gs-theme-corporativo .panel-heading, body.gs-theme-corporativo .panel-heading { background: var(--gs-brand-800) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.18) !important; } html.gs-theme-corporativo .panel-heading .panel-title, body.gs-theme-corporativo .panel-heading .panel-title { color: #ffffff !important; } /* Panel primario (por si usa .panel-primary) */ html.gs-theme-corporativo .panel-primary > .panel-heading, body.gs-theme-corporativo .panel-primary > .panel-heading { background: var(--gs-brand-800) !important; border-color: rgba(255,255,255,0.18) !important; } /* Fondo de cuerpo en ventanas legacy (evita fondos azulados) */ html.gs-theme-corporativo .modal-body, body.gs-theme-corporativo .modal-body, html.gs-theme-corporativo .ui-dialog .ui-dialog-content, body.gs-theme-corporativo .ui-dialog .ui-dialog-content { background: #ffffff !important; color: var(--gs-text) !important; }