/* ═══════════════════════════════════════════════════════════════ Portal DTE — Sistema de temas (Claro / Oscuro) Técnica: las variables --jt-* se redefinen dentro del scope de .dte-container. Todos los componentes del portal que ya usan var(--jt-*) en sus .razor.css responden automáticamente al cambio de tema sin ninguna modificación adicional. ═══════════════════════════════════════════════════════════════ */ /* ── Modo CLARO — variables de shell (valores por defecto) ─── */ .dte-container { --dte-bg-body: #f5f7fa; --dte-bg-surface: #ffffff; --dte-scrollbar: #c1c1c1; --dte-scrollbar-hover: #a8a8a8; --top-nav: #F01E29; /* rojo JustTime: igual en ambos modos */ } /* ── Modo OSCURO — overrides de shell y de variables --jt-* ── */ .dte-container[data-dte-theme="dark"] { /* Shell */ --dte-bg-body: #0f1923; --dte-bg-surface: #1a2535; --dte-scrollbar: #2d4259; --dte-scrollbar-hover: #3d566e; /* Variables --jt-* sobreescritas para los componentes del portal. Todos los .razor.css que usan var(--jt-white), var(--jt-gray-*), etc., reciben estos valores automáticamente por herencia CSS. */ --jt-white: #1a2535; /* fondos de cards y secciones */ --jt-gray-bg: #111c2a; /* cabeceras de sección */ --jt-gray-light: #273648; /* bordes */ --jt-gray-mid: #7a9ab8; /* texto secundario */ --jt-gray-dark: #dfe8f0; /* texto primario */ /* El rojo de marca no cambia en modo oscuro */ /* --jt-brand y --jt-brand-dark permanecen inalterados */ /* Variables del menú lateral (site.css las define como blanco/claro) */ --left-nav: #1a2535; --left-nav-depend: #111c2a; --left-nav-text: #dfe8f0; --left-nav-carpet-hover: rgba(255, 255, 255, 0.07); --left-nav-carpet-hover-text: #dfe8f0; color-scheme: dark; } /* ── Scrollbar del contenedor de programas en modo oscuro ──── */ .dte-container[data-dte-theme="dark"] ::-webkit-scrollbar-track { background: var(--dte-bg-body); } .dte-container[data-dte-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dte-scrollbar); } .dte-container[data-dte-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--dte-scrollbar-hover); } /* ═══════════════════════════════════════════════════════════════ CONTEXT MENU — Estilos globales (portales Syncfusion) Los SfContextMenu se renderizan directamente en , fuera de .dte-container. No heredan las variables --jt-* del scope de tema. Se estilan aquí con valores fijos para modo claro, y con .dte-dark (clase puesta en por Main.razor) para oscuro. ═══════════════════════════════════════════════════════════════ */ /* ── Modo CLARO ───────────────────────────────────────────── */ .e-contextmenu-container.e-menu-container, ul.e-contextmenu { background-color: #ffffff !important; border: 1px solid #d8d8d8 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; border-radius: 6px !important; } .e-contextmenu-container .e-menu-item, ul.e-contextmenu .e-menu-item { color: #282828 !important; } .e-contextmenu-container .e-menu-item .e-menu-icon, ul.e-contextmenu .e-menu-item .e-menu-icon { color: #3D3D3D !important; } .e-contextmenu-container .e-menu-item .e-menu-icon::before, ul.e-contextmenu .e-menu-item .e-menu-icon::before { color: #3D3D3D !important; } .e-contextmenu-container .e-menu-item .e-caret::before, ul.e-contextmenu .e-menu-item .e-caret::before { color: #3D3D3D !important; } .e-contextmenu-container .e-menu-item:hover:not(.e-disabled), ul.e-contextmenu .e-menu-item:hover:not(.e-disabled) { background-color: #F8F8F8 !important; color: #282828 !important; } .e-contextmenu-container .e-menu-item:hover .e-menu-icon::before, ul.e-contextmenu .e-menu-item:hover .e-menu-icon::before { color: #F01E29 !important; } .e-contextmenu-container .e-menu-item.e-focused, ul.e-contextmenu .e-menu-item.e-focused { background-color: #F8F8F8 !important; color: #282828 !important; } .e-contextmenu-container .e-separator, ul.e-contextmenu .e-separator { border-color: #D8D8D8 !important; } /* ── Submenús anidados (modo claro) ──────────────────────── */ .e-contextmenu-container .e-ul, ul.e-contextmenu .e-ul { background-color: #ffffff !important; border: 1px solid #d8d8d8 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; border-radius: 6px !important; } /* ── Modo OSCURO — clase .dte-dark en ─────────────── */ body.dte-dark .e-contextmenu-container.e-menu-container, body.dte-dark ul.e-contextmenu { background-color: #1a2535 !important; border: 1px solid #273648 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important; } body.dte-dark .e-contextmenu-container .e-menu-item, body.dte-dark ul.e-contextmenu .e-menu-item { color: #dfe8f0 !important; } body.dte-dark .e-contextmenu-container .e-menu-item .e-menu-icon::before, body.dte-dark ul.e-contextmenu .e-menu-item .e-menu-icon::before { color: #7a9ab8 !important; } body.dte-dark .e-contextmenu-container .e-menu-item .e-caret::before, body.dte-dark ul.e-contextmenu .e-menu-item .e-caret::before { color: #7a9ab8 !important; } body.dte-dark .e-contextmenu-container .e-menu-item:hover:not(.e-disabled), body.dte-dark ul.e-contextmenu .e-menu-item:hover:not(.e-disabled) { background-color: rgba(255, 255, 255, 0.06) !important; color: #dfe8f0 !important; } body.dte-dark .e-contextmenu-container .e-menu-item:hover .e-menu-icon::before, body.dte-dark ul.e-contextmenu .e-menu-item:hover .e-menu-icon::before { color: #F01E29 !important; } body.dte-dark .e-contextmenu-container .e-menu-item.e-focused, body.dte-dark ul.e-contextmenu .e-menu-item.e-focused { background-color: rgba(255, 255, 255, 0.06) !important; } body.dte-dark .e-contextmenu-container .e-separator, body.dte-dark ul.e-contextmenu .e-separator { border-color: #273648 !important; } body.dte-dark .e-contextmenu-container .e-ul, body.dte-dark ul.e-contextmenu .e-ul { background-color: #1a2535 !important; border: 1px solid #273648 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important; } /* ═══════════════════════════════════════════════════════════════ INPUTS SYNCFUSION — Modo oscuro (body.dte-dark) Colores de referencia dark: bg surface : #1a2535 (--jt-white dark) bg deep : #111c2a (--jt-gray-bg dark) border : #273648 (--jt-gray-light dark) text : #dfe8f0 (--jt-gray-dark dark) text-2 : #7a9ab8 (--jt-gray-mid dark) ═══════════════════════════════════════════════════════════════ */ /* ── Input group wrapper ─────────────────────────────────── */ body.dte-dark .e-input-group, body.dte-dark .e-input-group.e-control-wrapper { background-color: #1a2535 !important; border-color: #273648 !important; color: #dfe8f0 !important; } body.dte-dark .e-input-group:not(.e-disabled):hover, body.dte-dark .e-input-group.e-control-wrapper:not(.e-disabled):hover { border-color: #3d566e !important; } body.dte-dark .e-input-group.e-input-focus, body.dte-dark .e-input-group.e-control-wrapper.e-input-focus { border-color: #F01E29 !important; } /* ── Inputs de texto y número ────────────────────────────── */ body.dte-dark input.e-input, body.dte-dark textarea.e-input, body.dte-dark .e-input-group input.e-input, body.dte-dark .e-input-group.e-control-wrapper input.e-input { background-color: #1a2535 !important; color: #dfe8f0 !important; } body.dte-dark input.e-input::placeholder, body.dte-dark textarea.e-input::placeholder { color: #7a9ab8 !important; opacity: 1; } /* ── Íconos dentro de inputs (clear, spin, calendar…) ───── */ body.dte-dark .e-input-group .e-input-group-icon, body.dte-dark .e-input-group.e-control-wrapper .e-input-group-icon { background-color: #1a2535 !important; color: #7a9ab8 !important; border-color: #273648 !important; } body.dte-dark .e-input-group .e-input-group-icon:hover, body.dte-dark .e-input-group.e-control-wrapper .e-input-group-icon:hover { background-color: #273648 !important; color: #dfe8f0 !important; } body.dte-dark .e-input-group .e-input-group-icon::before, body.dte-dark .e-input-group.e-control-wrapper .e-input-group-icon::before { color: #7a9ab8 !important; } /* ── Botones spin del NumericTextBox ─────────────────────── */ body.dte-dark .e-numeric .e-spin-up, body.dte-dark .e-numeric .e-spin-down { background-color: #1a2535 !important; border-color: #273648 !important; color: #7a9ab8 !important; } body.dte-dark .e-numeric .e-spin-up:hover, body.dte-dark .e-numeric .e-spin-down:hover { background-color: #273648 !important; color: #dfe8f0 !important; } /* ── Popup de Dropdown / ComboBox / AutoComplete ─────────── */ body.dte-dark .e-popup.e-ddl-popup, body.dte-dark .e-popup.e-combo-popup, body.dte-dark .e-popup.e-multiselect-popup, body.dte-dark .e-popup.e-auto-complete-popup { background-color: #1a2535 !important; border: 1px solid #273648 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important; } /* ── Lista de items del dropdown ─────────────────────────── */ body.dte-dark .e-dropdownbase .e-list-item, body.dte-dark .e-dropdownbase ul li.e-list-item { background-color: #1a2535 !important; color: #dfe8f0 !important; } body.dte-dark .e-dropdownbase .e-list-item.e-hover, body.dte-dark .e-dropdownbase .e-list-item:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: #dfe8f0 !important; } body.dte-dark .e-dropdownbase .e-list-item.e-active, body.dte-dark .e-dropdownbase .e-list-item.e-item-focus { background-color: rgba(240, 30, 41, 0.18) !important; color: #dfe8f0 !important; } body.dte-dark .e-dropdownbase .e-list-item.e-active.e-hover { background-color: rgba(240, 30, 41, 0.28) !important; } body.dte-dark .e-dropdownbase .e-list-nrt, body.dte-dark .e-dropdownbase .e-nodata { background-color: #1a2535 !important; color: #7a9ab8 !important; } /* ── Filtro de búsqueda dentro de popup dropdown ─────────── */ body.dte-dark .e-popup .e-filter-parent { background-color: #111c2a !important; border-bottom: 1px solid #273648 !important; } body.dte-dark .e-popup .e-filter-parent .e-input-group, body.dte-dark .e-popup .e-filter-parent input.e-input { background-color: #111c2a !important; color: #dfe8f0 !important; border-color: #273648 !important; } /* ── MultiSelect: chips de items seleccionados ───────────── */ body.dte-dark .e-multi-select-wrapper .e-chips { background-color: #273648 !important; color: #dfe8f0 !important; } body.dte-dark .e-multi-select-wrapper .e-chips .e-chipcontent { color: #dfe8f0 !important; } body.dte-dark .e-multi-select-wrapper .e-chips .e-chips-close::before { color: #7a9ab8 !important; } body.dte-dark .e-multi-select-wrapper { background-color: #1a2535 !important; border-color: #273648 !important; } /* ── Switch ──────────────────────────────────────────────── */ body.dte-dark .e-switch-wrapper .e-switch-inner, body.dte-dark .e-switch-wrapper .e-switch-on, body.dte-dark .e-switch-wrapper .e-switch-off { background-color: #273648 !important; } body.dte-dark .e-switch-wrapper .e-switch-handle { background-color: #7a9ab8 !important; } body.dte-dark .e-switch-wrapper.e-switch-active .e-switch-inner { background-color: #F01E29 !important; } body.dte-dark .e-switch-wrapper.e-switch-active .e-switch-handle { background-color: #ffffff !important; } /* ── DatePicker / DateTimePicker popup ───────────────────── */ body.dte-dark .e-datepicker.e-popup, body.dte-dark .e-datetimepicker.e-popup, body.dte-dark .e-daterangepicker.e-popup { background-color: #1a2535 !important; border: 1px solid #273648 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important; } body.dte-dark .e-calendar, body.dte-dark .e-calendar .e-content, body.dte-dark .e-calendar .e-header { background-color: #1a2535 !important; color: #dfe8f0 !important; } body.dte-dark .e-calendar .e-content td span { color: #dfe8f0 !important; } body.dte-dark .e-calendar .e-content td:hover span, body.dte-dark .e-calendar .e-content td.e-focused span { background-color: rgba(255, 255, 255, 0.06) !important; color: #dfe8f0 !important; } body.dte-dark .e-calendar .e-content td.e-today span { border-color: #F01E29 !important; color: #F01E29 !important; } body.dte-dark .e-calendar .e-content td.e-selected span { background-color: #F01E29 !important; color: #ffffff !important; } body.dte-dark .e-calendar .e-header .e-title, body.dte-dark .e-calendar .e-header .e-prev, body.dte-dark .e-calendar .e-header .e-next { color: #dfe8f0 !important; } body.dte-dark .e-calendar .e-content td.e-other-month span { color: #7a9ab8 !important; } /* ── SfButton en modo oscuro ─────────────────────────────── */ body.dte-dark .e-btn:not(.e-primary):not([class*="e-outline"]):not(.filtro-btn-apply) { background-color: #1a2535 !important; color: #dfe8f0 !important; border-color: #273648 !important; } body.dte-dark .e-btn.e-outline { background-color: transparent !important; color: #dfe8f0 !important; border-color: #273648 !important; } body.dte-dark .e-btn.e-outline:hover { background-color: rgba(255, 255, 255, 0.06) !important; border-color: #3d566e !important; } body.dte-dark .e-btn.e-link { background-color: transparent !important; color: #dfe8f0 !important; } body.dte-dark .e-btn:not(.e-primary) .e-btn-icon, body.dte-dark .e-btn:not(.e-primary) .e-icons { color: #7a9ab8 !important; } /* ═══════════════════════════════════════════════════════════════ SfDialog — Modo oscuro (body.dte-dark) Los diálogos Syncfusion también son portales en . ═══════════════════════════════════════════════════════════════ */ /* Overlay */ body.dte-dark .e-dlg-overlay { background-color: rgba(0, 0, 0, 0.65) !important; } /* Contenedor principal del diálogo */ body.dte-dark .e-dialog { background-color: #1a2535 !important; border: 1px solid #273648 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important; color: #dfe8f0 !important; } /* Header */ body.dte-dark .e-dialog .e-dlg-header-content { background-color: #111c2a !important; border-bottom: 1px solid #273648 !important; } body.dte-dark .e-dialog .e-dlg-header, body.dte-dark .e-dialog .e-dlg-header * { color: #dfe8f0 !important; } body.dte-dark .e-dialog .e-dlg-closeicon-btn .e-btn-icon { color: #7a9ab8 !important; } body.dte-dark .e-dialog .e-dlg-closeicon-btn:hover .e-btn-icon { color: #F01E29 !important; } /* Contenido */ body.dte-dark .e-dialog .e-dlg-content { background-color: #1a2535 !important; color: #dfe8f0 !important; } /* Footer */ body.dte-dark .e-dialog .e-footer-content { background-color: #111c2a !important; border-top: 1px solid #273648 !important; } /* Botones del footer (DialogButton de Syncfusion) */ body.dte-dark .e-dialog .e-footer-content .e-btn:not(.e-primary) { background-color: #1a2535 !important; color: #dfe8f0 !important; border-color: #273648 !important; } body.dte-dark .e-dialog .e-footer-content .e-btn:not(.e-primary):hover { background-color: #273648 !important; border-color: #3d566e !important; } body.dte-dark .e-dialog .e-footer-content .e-btn.e-primary { background-color: #F01E29 !important; border-color: #F01E29 !important; color: #fff !important; } body.dte-dark .e-dialog .e-footer-content .e-btn.e-primary:hover { background-color: #c4121e !important; border-color: #c4121e !important; } /* Resize handle */ body.dte-dark .e-dialog .e-south-east { color: #273648 !important; } /* ── Submenú de la TopNav en modo oscuro ───────────────────── */ .dte-container[data-dte-theme="dark"] .submenu { background: #1a2535; border: 1px solid #273648; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .dte-container[data-dte-theme="dark"] .submenu-item { color: #dfe8f0; } .dte-container[data-dte-theme="dark"] .submenu-item:hover { background: rgba(255, 255, 255, 0.06); } /* ── Menú lateral — overrides de colores hardcodeados ───────── */ /* Borde derecho */ .dte-container[data-dte-theme="dark"] .corporate-leftnav { border-right-color: #273648; } /* Nivel 2 — hover con rgba negro → invisible en dark */ .dte-container[data-dte-theme="dark"] .menu-child:hover { background: rgba(255, 255, 255, 0.07) !important; color: #dfe8f0 !important; } /* Nivel 3 — texto y hover hardcodeados en negro */ .dte-container[data-dte-theme="dark"] .menu-grandchild { color: #7a9ab8; } .dte-container[data-dte-theme="dark"] .menu-grandchild:hover { background: rgba(255, 255, 255, 0.07) !important; color: #dfe8f0 !important; } /* Scrollbar */ .dte-container[data-dte-theme="dark"] .corporate-leftnav::-webkit-scrollbar-thumb { background: #273648; } .dte-container[data-dte-theme="dark"] .corporate-leftnav::-webkit-scrollbar-thumb:hover { background: #3d566e; } /* ═══════════════════════════════════════════════════════════════ SfGrid — Modo oscuro (body.dte-dark) Syncfusion usa bootstrap5.css con colores fijos. Se sobreescriben aquí con !important para que la grilla se vea oscura en el portal. ═══════════════════════════════════════════════════════════════ */ /* Contenedor raíz y bordes */ body.dte-dark .e-grid, body.dte-dark .e-grid .e-table { background-color: #1a2535 !important; border-color: #273648 !important; color: #dfe8f0 !important; } /* Cabecera */ body.dte-dark .e-grid .e-gridheader, body.dte-dark .e-grid .e-gridheader table { background-color: #111c2a !important; border-color: #273648 !important; } body.dte-dark .e-grid .e-headercell, body.dte-dark .e-grid .e-detailheadercell, body.dte-dark .e-grid .e-rhandler { background-color: #111c2a !important; border-color: #273648 !important; color: #dfe8f0 !important; } body.dte-dark .e-grid .e-headertext, body.dte-dark .e-grid .e-headercell .e-headercelldiv { color: #dfe8f0 !important; } /* Iconos de sort y filtro en cabecera */ body.dte-dark .e-grid .e-headercell .e-icons, body.dte-dark .e-grid .e-headercell .e-sortfilterdiv { color: #7a9ab8 !important; } body.dte-dark .e-grid .e-sortnumber { background-color: #F01E29 !important; color: #fff !important; } /* Cuerpo de la grilla */ body.dte-dark .e-grid .e-gridcontent, body.dte-dark .e-grid .e-gridcontent table { background-color: #1a2535 !important; } body.dte-dark .e-grid .e-rowcell, body.dte-dark .e-grid .e-detailrowcollapse, body.dte-dark .e-grid .e-detailrowexpand, body.dte-dark .e-grid .e-rowdragdrop { background-color: #1a2535 !important; color: #dfe8f0 !important; border-color: #273648 !important; } /* Fila alterna */ body.dte-dark .e-grid .e-altrow .e-rowcell { background-color: #162030 !important; } /* ── Overrides para .grid-justtime: pisa los colores hardcodeados de style_grid_sync.css (.e-row → whitesmoke, .e-altrow → white, .e-link .e-icons → black !important) que tienen especificidad (0,3,0) y se cuelan por encima de los selectores genéricos. ── */ body.dte-dark .grid-justtime .e-grid .e-row, body.dte-dark .grid-justtime .e-grid .e-row .e-rowcell { background-color: #1a2535 !important; color: #dfe8f0 !important; } body.dte-dark .grid-justtime .e-grid .e-altrow, body.dte-dark .grid-justtime .e-grid .e-altrow .e-rowcell { background-color: #162030 !important; } body.dte-dark .grid-justtime .e-link .e-icons, body.dte-dark .grid-justtime .e-link .oi { color: #7a9ab8 !important; } /* Hover en .grid-justtime — incluye el tr Y la td */ body.dte-dark .grid-justtime .e-grid .e-row:hover, body.dte-dark .grid-justtime .e-grid tr[role="row"]:hover, body.dte-dark .grid-justtime .e-grid tr[role="row"]:hover .e-rowcell { background-color: rgba(255, 255, 255, 0.08) !important; color: #dfe8f0 !important; } /* Hover — fondo Y texto para que ninguno quede invisible */ body.dte-dark .e-grid tr[role="row"]:hover .e-rowcell, body.dte-dark .e-grid.e-gridhover tr[role="row"]:hover .e-rowcell, body.dte-dark .e-grid .e-row:not(.e-selectionbackground):hover .e-rowcell { background-color: rgba(255, 255, 255, 0.07) !important; color: #dfe8f0 !important; } /* Iconos de botones e-link dentro de celdas (edit, usuarios, etc.) */ body.dte-dark .e-grid .e-rowcell .e-btn.e-link, body.dte-dark .e-grid .e-rowcell .e-btn.e-round.e-link { color: #7a9ab8 !important; background-color: transparent !important; } body.dte-dark .e-grid .e-rowcell .e-btn .e-icons, body.dte-dark .e-grid .e-rowcell .e-btn .e-btn-icon { color: #7a9ab8 !important; } body.dte-dark .e-grid .e-rowcell .e-btn:hover .e-icons, body.dte-dark .e-grid .e-rowcell .e-btn:hover .e-btn-icon { color: #dfe8f0 !important; } /* Fila seleccionada */ body.dte-dark .e-grid .e-selectionbackground .e-rowcell, body.dte-dark .e-grid .e-selectionbackground.e-active .e-rowcell { background-color: rgba(240, 30, 41, 0.18) !important; color: #dfe8f0 !important; } /* Grupos (GroupBy) — fila de caption y sus celdas internas */ body.dte-dark .e-grid .e-groupcaptionrow, body.dte-dark .e-grid .e-groupcaptionrow td, body.dte-dark .e-grid .e-groupcaption, body.dte-dark .e-grid .e-recordplusexpand, body.dte-dark .e-grid .e-recordpluscollapse { background-color: #162030 !important; color: #7a9ab8 !important; border-color: #273648 !important; } /* Ícono expand/collapse del grupo */ body.dte-dark .e-grid .e-recordplusexpand .e-icons, body.dte-dark .e-grid .e-recordpluscollapse .e-icons { color: #7a9ab8 !important; } /* Celdas de indentación en filas de datos agrupadas */ body.dte-dark .e-grid .e-indentcell, body.dte-dark .e-grid .e-grouptopleftcell, body.dte-dark .e-grid .e-groupindentcell { background-color: #1a2535 !important; border-color: #273648 !important; } /* Indentación dentro del propio caption row */ body.dte-dark .e-grid .e-groupcaptionrow .e-indentcell { background-color: #162030 !important; } /* Área de arrastre de columnas agrupadas (drop area) */ body.dte-dark .e-grid .e-groupdroparea { background-color: #111c2a !important; color: #7a9ab8 !important; border-color: #273648 !important; } /* Chip de columna agrupada dentro del drop area */ body.dte-dark .e-grid .e-groupdroparea .e-groupheadercell { background-color: #1a2535 !important; border-color: #273648 !important; color: #dfe8f0 !important; } body.dte-dark .e-grid .e-groupdroparea .e-groupheadercell .e-icons { color: #7a9ab8 !important; } /* Barra de filtro */ body.dte-dark .e-grid .e-filterbar .e-filterbarcell, body.dte-dark .e-grid .e-filterbar td { background-color: #111c2a !important; border-color: #273648 !important; } body.dte-dark .e-grid .e-filterbar input.e-input, body.dte-dark .e-grid .e-filterbar .e-input-group { background-color: #111c2a !important; color: #dfe8f0 !important; border-color: #273648 !important; } /* Paginador */ body.dte-dark .e-grid .e-gridpager, body.dte-dark .e-pager { background-color: #111c2a !important; border-color: #273648 !important; color: #7a9ab8 !important; } body.dte-dark .e-pager .e-numericitem { background-color: transparent !important; border-color: #273648 !important; color: #7a9ab8 !important; } body.dte-dark .e-pager .e-currentitem, body.dte-dark .e-pager .e-numericitem.e-currentitem { background-color: #F01E29 !important; border-color: #F01E29 !important; color: #fff !important; } body.dte-dark .e-pager .e-icons, body.dte-dark .e-pager .e-pagercontainer .e-icons { color: #7a9ab8 !important; } /* Checkbox dentro de la grilla */ body.dte-dark .e-grid .e-checkbox-wrapper .e-frame { background-color: #1a2535 !important; border-color: #7a9ab8 !important; } body.dte-dark .e-grid .e-checkbox-wrapper .e-check { color: #fff !important; } body.dte-dark .e-grid .e-checkbox-wrapper.e-checkbox-checked .e-frame, body.dte-dark .e-grid .e-checkbox-wrapper .e-frame.e-check { background-color: #F01E29 !important; border-color: #F01E29 !important; } /* Tooltip dentro de celdas */ body.dte-dark .e-grid .e-tooltip-wrap { background-color: #111c2a !important; border-color: #273648 !important; color: #dfe8f0 !important; } /* Scrollbar del grid */ body.dte-dark .e-grid ::-webkit-scrollbar-track { background: #111c2a !important; } body.dte-dark .e-grid ::-webkit-scrollbar-thumb { background: #273648 !important; } /* ═══════════════════════════════════════════════════════════════ SfListBox — Modo oscuro (body.dte-dark) ═══════════════════════════════════════════════════════════════ */ body.dte-dark .e-listbox-wrapper, body.dte-dark .e-listbox-container { background-color: #1a2535 !important; border-color: #273648 !important; } body.dte-dark .e-listbox-wrapper ul, body.dte-dark .e-listbox-container ul, body.dte-dark .e-listbox-wrapper .e-list-parent, body.dte-dark .e-listbox-container .e-list-parent { background-color: #1a2535 !important; } body.dte-dark .e-listbox-wrapper .e-list-item, body.dte-dark .e-listbox-container .e-list-item { background-color: #1a2535 !important; color: #dfe8f0 !important; border-color: transparent !important; } body.dte-dark .e-listbox-wrapper .e-list-item:hover, body.dte-dark .e-listbox-container .e-list-item:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: #dfe8f0 !important; } body.dte-dark .e-listbox-wrapper .e-list-item.e-selected, body.dte-dark .e-listbox-wrapper .e-list-item.e-active, body.dte-dark .e-listbox-container .e-list-item.e-selected, body.dte-dark .e-listbox-container .e-list-item.e-active { background-color: rgba(240, 30, 41, 0.20) !important; color: #dfe8f0 !important; } body.dte-dark .e-listbox-wrapper .e-list-item.e-selected:hover, body.dte-dark .e-listbox-container .e-list-item.e-selected:hover { background-color: rgba(240, 30, 41, 0.30) !important; } /* Barra de filtro/búsqueda */ body.dte-dark .e-listbox-wrapper .e-filter-parent, body.dte-dark .e-listbox-container .e-filter-parent { background-color: #111c2a !important; border-bottom: 1px solid #273648 !important; } body.dte-dark .e-listbox-wrapper .e-filter-parent .e-input-group, body.dte-dark .e-listbox-container .e-filter-parent .e-input-group { background-color: #111c2a !important; border-color: #273648 !important; } body.dte-dark .e-listbox-wrapper .e-filter-parent input.e-input, body.dte-dark .e-listbox-container .e-filter-parent input.e-input { background-color: #111c2a !important; color: #dfe8f0 !important; }