/* ═══════════════════════════════════════════════════════════════════════ VARIABLES DE TEMA — valores por defecto = tema "Azul" (aspecto original) Los presets alternativos (Verde / Morado / Oscuro) se aplican mediante el atributo [data-theme] en , gestionado por applyAppTheme() en main.js. mConfig.js (página de Configuración). ═══════════════════════════════════════════════════════════════════════ */ :root { --color-accent: #175689; --color-accent-btn: #123f66; --color-login-bg-image: url(/img/back-modern.jpg); --color-menu-bg: #e8e9ec; --color-menu-border: #e0e1e4; --color-menu-hover-bg: #ccc; --color-menu-hover-text: black; --color-menu-selected-bg: #175689; --color-menu-selected-text: white; --color-badge-bg: #EB0; --color-badge-text: white; --color-icon-error: #E44; --color-icon-alert: #EB0; --color-icon-alert2: #CCC; --color-icon-ok: #8A4; --color-icon-info-text: #F44; --color-icon-info-bg: #ACE; --color-icon-done-bg: #ACE; --color-icon: #27d; --color-label: #808488; --color-inverse: white; --color-active-bg: #456; --color-active-bg-hover: #27D; --color-highlighted: #CCC; --color-boxhead-bg: #d5dffd; --color-boxhead-border: #c4c5c8; --color-slider-bg: #E8E9EC; --color-slider-border: #C8C9CC; --color-itembox-hover: #eee; --color-itembox-footer-bg: #E5E5E5; --color-highlighted-bg: #D8E4F0; --color-button-bg: #38E; --color-button-border: #27D; --color-button-hover-bg: #27D; --color-menuoption-bg: #e8e9ec; --color-menuoption-text: black; --color-menuoption-border: #e0e1e4; --color-menuoption-hover-bg: #C8D4E0; --color-menuoption-icon: #27D; --color-signaled: #004090; --color-toolbar-border: #888; --color-groupbox-bg: #e8e9ec; --color-groupbox-border: #e0e1e4; --color-framebox-bg: #e8e9ec; --color-formcontainer-text: black; --color-formcontainer-bg: #e8e9ec; --color-formcontainer-border: #e0e1e4; --color-formfield-border: #e0e1e4; --color-formfield-focus-border: #aaa; --color-browserbox-outline: #e0e1e4; --color-browsertable-bg: #E8E9EC; --color-grid-bg: #d5dffd; --color-grid-border: #e0e1e4; --color-popup-bg: white; --color-popup-border: #f8f8f8; --color-popup-shadow: #27d; --color-popup-inner-bg: white; --color-popup-inner-border: white; --color-popup-calendar-active-border: #37E; --color-popup-clockwheel-gradient: #6080B0; --color-precio-manual: #900000; /* ── PageLogin. ──────────────────────────────────── */ --color-surface: white; --color-border: #e0e1e4; --color-text: black; --color-text-3: #808488; --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --radius-lg: 12px; } /* ═══════════════════════════════════════════════════════════════════════ PRESET: Verde ═══════════════════════════════════════════════════════════════════════ */ [data-theme="green"] { --color-accent: #1e7a4a; --color-accent-btn: #155c37; --color-menu-selected-bg: #1e7a4a; --color-icon: #1e7a4a; --color-active-bg: #1e5c3a; --color-active-bg-hover: #1e7a4a; --color-boxhead-bg: #d9f0e1; --color-grid-bg: #d9f0e1; --color-highlighted-bg: #d3ecd9; --color-button-bg: #2fae6c; --color-button-border: #1e7a4a; --color-button-hover-bg: #1e7a4a; --color-menuoption-icon: #1e7a4a; --color-menuoption-hover-bg: #cdeadb; --color-signaled: #0d4a28; --color-popup-shadow: #1e7a4a; --color-popup-calendar-active-border: #2fae6c; } /* ═══════════════════════════════════════════════════════════════════════ PRESET: Morado ═══════════════════════════════════════════════════════════════════════ */ [data-theme="purple"] { --color-accent: #6b3fa0; --color-accent-btn: #55317f; --color-menu-selected-bg: #6b3fa0; --color-icon: #6b3fa0; --color-active-bg: #4a2b70; --color-active-bg-hover: #6b3fa0; --color-boxhead-bg: #ece1f5; --color-grid-bg: #ece1f5; --color-highlighted-bg: #e5d8f0; --color-button-bg: #8a5cc2; --color-button-border: #6b3fa0; --color-button-hover-bg: #6b3fa0; --color-menuoption-icon: #6b3fa0; --color-menuoption-hover-bg: #ddc9ec; --color-signaled: #3a1f5c; --color-popup-shadow: #6b3fa0; --color-popup-calendar-active-border: #8a5cc2; } /* ═══════════════════════════════════════════════════════════════════════ PRESET: Oscuro solo afecta a los componentes cubiertos por theme.css. ═══════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --color-accent: #20242b; --color-accent-btn: #20242b; --color-menu-bg: #ccc; --color-menu-border: #ddd; --color-menu-hover-bg: #33393f; --color-menu-hover-text: #f0f0f0; --color-menu-selected-bg: #20242b; --color-menu-selected-text: #0b0e13; --color-badge-bg: #d9a900; --color-badge-text: #0b0e13; --color-icon-error: #ff6b6b; --color-icon-alert: #d9a900; --color-icon-alert2: #7a7f87; --color-icon-ok: #6fce8f; --color-icon-info-text: #ff8080; --color-icon-info-bg: #2a3a55; --color-icon-done-bg: #2a3a55; --color-icon: #4098e0; --color-label: #20242b; --color-inverse: #12151a; --color-active-bg: #263142; --color-active-bg-hover: #888; --color-highlighted: #33393f; --color-boxhead-bg: #ccc; --color-boxhead-border: #ccc; --color-slider-bg: #20242b; --color-slider-border: #33393f; --color-itembox-hover: #888; --color-itembox-footer-bg: #262b32; --color-highlighted-bg: #1f2c3d; --color-button-bg: #20242b; --color-button-border: #20242b; --color-button-hover-bg: #888; --color-menuoption-bg: #20242b; --color-menuoption-text: #f0f0f0; --color-menuoption-border: #2f343d; --color-menuoption-hover-bg: #888; --color-menuoption-icon: #4098e0; --color-signaled: #78b6ec; --color-toolbar-border: #4a505a; --color-groupbox-bg: #20242b; --color-groupbox-border: #2f343d; --color-framebox-bg: #20242b; --color-formcontainer-text: #2f343d; --color-formcontainer-bg: #ddd; --color-formcontainer-border: #2f343d; --color-formfield-border: #2f343d; --color-formfield-focus-border: #20242b; --color-browserbox-outline: #2f343d; --color-browsertable-bg: #ccc; --color-grid-bg: #ccc; --color-grid-border: #ccc; --color-popup-bg: #888; --color-popup-border: #2f343d; --color-popup-shadow: rgba(0,0,0,0.7); --color-popup-inner-bg: #888; --color-popup-inner-border: #1a1e24; --color-popup-calendar-active-border: #20242b; --color-popup-clockwheel-gradient: #2f5580; --color-precio-manual: #ff8a8a; } /* ═══════════════════════════════════════════════════════════════════════ REGLAS — todas referencian las variables anteriores ═══════════════════════════════════════════════════════════════════════ */ #loginPage { background-color: var(--color-bg, #0b0e13); background-image: var(--color-login-bg-image); background-position: center; background-size: cover; background-repeat: no-repeat; } #mainmenu { background: var(--color-menu-bg); border-right: 1px solid var(--color-menu-border); border-bottom: 1px solid var(--color-menu-border); box-sizing: border-box; } #mainmenu .menuitem:hover, #mainmenu .menuitem:focus { background: var(--color-menu-hover-bg); color: var(--color-menu-hover-text); } .styleMainMenu { background: var(--color-menu-bg); } .styleAuxMenu { background: var(--color-menu-bg); } .menuitem { background: var(--color-menu-bg); } .menuitem:hover, .menuitem:focus { background: var(--color-menu-hover-bg); color: var(--color-menu-hover-text); } .menuitem.selected, .menuitem.selected:hover, .menuitem.selected:focus { background: var(--color-menu-selected-bg); color: var(--color-menu-selected-text); } .menuBadge { background: var(--color-badge-bg); color: var(--color-badge-text); } .itemBadge { background: var(--color-badge-bg); color: var(--color-badge-text); } .styleIconBadge { background: var(--color-badge-bg); color: var(--color-badge-text); } .styleIconError { color: var(--color-icon-error); } .styleIconAlert { color: var(--color-icon-alert); } .styleIconAlert2 { color: var(--color-icon-alert2); } .styleIconOk { color: var(--color-icon-ok); } .styleIconInfo { color: var(--color-icon-info-text); background: var(--color-icon-info-bg); } .styleIconDone { color: #000; background: var(--color-icon-done-bg); } .colorBadge { color: var(--color-badge-bg); } .colorIcon { color: var(--color-icon); } .colorLabel { color: var(--color-label); } .colorInverse { color: var(--color-inverse); } .styleActive { background: var(--color-active-bg) !important; color: white !important; opacity: 1 !important; } .styleActive .colorInverse { color: black; } .styleActive:hover { background: var(--color-active-bg-hover) !important; } .styleHighlighted { background: var(--color-highlighted); color: black; } .styleLabel { font-size: 12px; font-weight: normal; color: var(--color-label); } .styleBoxHead { display: block; background: var(--color-boxhead-bg); border: 1px solid var(--color-boxhead-border); border-radius: 4px; } .dkSliderControlItem { background: var(--color-slider-bg); border: 1px solid var(--color-slider-border); } .dkSliderControlCursor { background: white; border: 1px solid var(--color-slider-border); border-bottom: 0; } .pageitembox:hover, .pageitembox:focus, .pageitembox.dragTarget { background: var(--color-itembox-hover); } .itemboxFooter { background: var(--color-itembox-footer-bg); font-weight: bold; } .highlighted { background: var(--color-highlighted-bg); } .button { background: var(--color-button-bg); border-color: var(--color-button-border); } .button:hover, .button:focus { background: var(--color-button-hover-bg); } .menuoption { background: var(--color-menuoption-bg); color: var(--color-menuoption-text); border: 1px solid var(--color-menuoption-border); } .menuoption:hover, .menuoption:focus { background: var(--color-menuoption-hover-bg); } .menuoption > .icon, .pageitembox > .icon { color: var(--color-menuoption-icon); font-size: 200%; } .signaled { color: var(--color-signaled); } .dkToolbarContainer .dkformfield { border-color: var(--color-toolbar-border); } .groupBox { background: var(--color-groupbox-bg); border: 1px solid var(--color-groupbox-border); } .frameBox { background: var(--color-framebox-bg); } .dkformcontainer { color: var(--color-formcontainer-text); background: var(--color-formcontainer-bg); border: 1px solid var(--color-formcontainer-border); } .dkformfield { border: 1px solid var(--color-formfield-border); } .dkformfield:focus-within { border-color: var(--color-formfield-focus-border); } .dkBrowserBox { outline: 1px solid var(--color-browserbox-outline); } .dkBrowserTable thead th { background: var(--color-browsertable-bg); } .dkBrowserTable tfoot th { background: var(--color-browsertable-bg); } .dkGridContainer { background: var(--color-grid-bg); border: 1px solid var(--color-grid-border); } .dkPopup { background: var(--color-popup-bg); border-color: var(--color-popup-border); box-shadow: 0 0 32px 0 var(--color-popup-shadow); } .dkPopupTitle { font-size: 125%; } .dkPopupClose { top: 6px; right: 8px; } .dkPopupInner { background: var(--color-popup-inner-bg); border-color: var(--color-popup-inner-border); } .dkPopupCalendarCell.dkPopupCalendarCellActive { border: 3px solid var(--color-popup-calendar-active-border); } .dkPopupClockWheelInner { background-image: linear-gradient(to bottom, var(--color-popup-clockwheel-gradient), transparent 6px, transparent 8px); } .dkPrecioManual { color: var(--color-precio-manual); }