/* ============================================================ Element Plus — Capa de modo oscuro para Avatar Cargo Se activa solo cuando tiene data-color*="dark" (toggle de foco en el nav). Mapea variables --el-* a las variables del tema del tenant (--foreground, --body, etc.). No afecta al modo claro. Carga despues de index.css/styles.css. ============================================================ */ html[data-color*="dark"] { color-scheme: dark; /* ============================================================ MODO OSCURO — Refuerzo de contraste e impacto (aditivo) Sobrescribe las variables de superficie/texto/borde que las paletas dark-* de styles.css dejan demasiado planas. Solo aplica con data-color*="dark"; modo claro intacto. Carga despues de styles.css, gana por orden de cascada. Jerarquia: page (mas oscuro) < nav < cards < inputs (mas claro) ============================================================ */ /* Superficies con jerarquia clara de 4 niveles */ --background: #0d0e11; --foreground: #1c1f26; --background-theme: #14161b; --background-light: #282c34; --background-navcolor-dark: #14161b; /* Texto legible y con jerarquia — pasa WCAG AA/AAA sobre #0d0e11 */ --body: #d4d7dd; --alternate: #9ca3ad; --muted: #828a94; --light-text: #f9fafb; /* Bordes visibles — cards/tablas/inputs con definicion real */ --separator: #3a3e48; --separator-light: #262a32; --separator-darker: #2a2e36; /* Sombras mas profundas para modo oscuro — impacto visual */ --menu-shadow: 0px 6px 20px rgba(0, 0, 0, 0.5); --menu-shadow-navcolor: 0px 4px 16px rgba(0, 0, 0, 0.55); /* Color primario hereda del tema del tenant. !importante para ganar sobre el :root de myspin.css que fuerza --el-color-primary: #7c3aed en todos los modos. */ --el-color-primary: var(--primary) !important; --el-color-primary-light-3: color-mix(in srgb, var(--primary) 70%, #fff) !important; --el-color-primary-light-5: color-mix(in srgb, var(--primary) 50%, #fff) !important; --el-color-primary-light-7: color-mix(in srgb, var(--primary) 30%, #fff) !important; --el-color-primary-light-8: color-mix(in srgb, var(--primary) 20%, #fff) !important; --el-color-primary-light-9: color-mix(in srgb, var(--primary) 12%, transparent) !important; --el-color-primary-dark-2: var(--primary-darker) !important; /* Estados (success/warning/danger/info) heredan del tenant */ --el-color-success: var(--success); --el-color-success-light-3: color-mix(in srgb, var(--success) 70%, #fff); --el-color-success-light-5: color-mix(in srgb, var(--success) 50%, #fff); --el-color-success-light-7: color-mix(in srgb, var(--success) 30%, #fff); --el-color-success-light-8: color-mix(in srgb, var(--success) 20%, #fff); --el-color-success-light-9: color-mix(in srgb, var(--success) 12%, transparent); --el-color-success-dark-2: var(--success-darker); --el-color-warning: var(--warning); --el-color-warning-light-3: color-mix(in srgb, var(--warning) 70%, #fff); --el-color-warning-light-5: color-mix(in srgb, var(--warning) 50%, #fff); --el-color-warning-light-7: color-mix(in srgb, var(--warning) 30%, #fff); --el-color-warning-light-8: color-mix(in srgb, var(--warning) 20%, #fff); --el-color-warning-light-9: color-mix(in srgb, var(--warning) 12%, transparent); --el-color-warning-dark-2: var(--warning-darker); --el-color-danger: var(--danger); --el-color-danger-light-3: color-mix(in srgb, var(--danger) 70%, #fff); --el-color-danger-light-5: color-mix(in srgb, var(--danger) 50%, #fff); --el-color-danger-light-7: color-mix(in srgb, var(--danger) 30%, #fff); --el-color-danger-light-8: color-mix(in srgb, var(--danger) 20%, #fff); --el-color-danger-light-9: color-mix(in srgb, var(--danger) 12%, transparent); --el-color-danger-dark-2: var(--danger-darker); --el-color-error: var(--danger); --el-color-info: var(--info); --el-color-info-light-3: color-mix(in srgb, var(--info) 70%, #fff); --el-color-info-light-5: color-mix(in srgb, var(--info) 50%, #fff); --el-color-info-light-7: color-mix(in srgb, var(--info) 30%, #fff); --el-color-info-light-8: color-mix(in srgb, var(--info) 20%, #fff); --el-color-info-light-9: color-mix(in srgb, var(--info) 12%, transparent); --el-color-info-dark-2: var(--info-darker); /* Fondos */ --el-bg-color: var(--foreground); --el-bg-color-page: var(--background); --el-bg-color-overlay: var(--foreground); --el-fill-color: var(--background-light); --el-fill-color-light: var(--background-light); --el-fill-color-lighter: color-mix(in srgb, var(--foreground) 90%, transparent); --el-fill-color-extra-light: color-mix(in srgb, var(--foreground) 80%, transparent); --el-fill-color-dark: color-mix(in srgb, #000 14%, var(--foreground)); --el-fill-color-darker: color-mix(in srgb, #000 22%, var(--foreground)); --el-fill-color-blank: var(--foreground); /* Texto */ --el-text-color-primary: var(--light-text); --el-text-color-regular: var(--body); --el-text-color-secondary: var(--alternate); --el-text-color-placeholder: var(--muted); --el-text-color-disabled: color-mix(in srgb, var(--muted) 60%, transparent); /* Bordes */ --el-border-color: var(--separator); --el-border-color-light: var(--separator); --el-border-color-lighter: var(--separator-light); --el-border-color-extra-light: var(--separator-light); --el-border-color-dark: color-mix(in srgb, #000 18%, var(--separator)); --el-border-color-darker: color-mix(in srgb, #000 26%, var(--separator)); /* Sombras mas profundas para modo oscuro */ --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.5), 0px 8px 20px rgba(0, 0, 0, 0.4); --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.4); --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.4); --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.5), 0px 12px 32px rgba(0, 0, 0, 0.45); --el-disabled-bg-color: var(--background-light); --el-disabled-text-color: var(--muted); --el-disabled-border-color: var(--separator); --el-mask-color: rgba(0, 0, 0, 0.7); --el-overlay-color: rgba(0, 0, 0, 0.8); --el-overlay-color-light: rgba(0, 0, 0, 0.7); --el-overlay-color-lighter: rgba(0, 0, 0, 0.6); } /* ===== Tablas ===== */ html[data-color*="dark"] .el-table { --el-table-bg-color: var(--foreground); --el-table-tr-bg-color: var(--foreground); --el-table-row-hover-bg-color: color-mix(in srgb, var(--primary) 12%, var(--foreground)); --el-table-current-row-bg-color: color-mix(in srgb, var(--primary) 16%, var(--foreground)); --el-table-header-bg-color: color-mix(in srgb, var(--primary) 8%, var(--foreground)); --el-table-header-text-color: var(--alternate); --el-table-border-color: var(--separator); --el-table-border: 1px solid var(--separator); --el-table-text-color: var(--body); --el-table-fixed-box-shadow: -10px 0 12px 0 rgba(0, 0, 0, 0.4); color: var(--body); } html[data-color*="dark"] .el-table th.el-table__cell { background-color: color-mix(in srgb, var(--primary) 8%, var(--foreground)) !important; border-bottom-color: var(--separator) !important; } html[data-color*="dark"] .el-table tr { background-color: var(--foreground) !important; } html[data-color*="dark"] .el-table--border .el-table__cell { border-right-color: var(--separator) !important; } html[data-color*="dark"] .el-table__body tr.hover-row > td.el-table__cell, html[data-color*="dark"] .el-table__body tr:hover > td.el-table__cell { background-color: color-mix(in srgb, var(--primary) 12%, var(--foreground)) !important; } html[data-color*="dark"] .el-table__empty-block { background-color: var(--foreground); } html[data-color*="dark"] .el-table__empty-text { color: var(--muted); } /* ===== Inputs / Selects / Textarea / Input-number ===== */ html[data-color*="dark"] .el-input__wrapper, html[data-color*="dark"] .el-textarea__inner, html[data-color*="dark"] .el-select__wrapper, html[data-color*="dark"] .el-input-number { background-color: color-mix(in srgb, #000 12%, var(--foreground)) !important; box-shadow: 0 0 0 1px var(--separator) inset !important; } html[data-color*="dark"] .el-input__wrapper:hover, html[data-color*="dark"] .el-select__wrapper:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent) inset !important; } html[data-color*="dark"] .el-input__wrapper.is-focus, html[data-color*="dark"] .el-select__wrapper.is-focus { box-shadow: 0 0 0 1px var(--primary) inset !important; } html[data-color*="dark"] .el-input__inner, html[data-color*="dark"] .el-textarea__inner { color: var(--light-text) !important; } html[data-color*="dark"] .el-input__inner::placeholder, html[data-color*="dark"] .el-textarea__inner::placeholder { color: var(--muted) !important; } html[data-color*="dark"] .el-input-number__decrease, html[data-color*="dark"] .el-input-number__increase { background-color: var(--background-light); color: var(--alternate); border-color: var(--separator); } html[data-color*="dark"] .el-input-number__decrease:hover, html[data-color*="dark"] .el-input-number__increase:hover { color: var(--primary); } /* ===== Botones ===== */ html[data-color*="dark"] .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) { background-color: color-mix(in srgb, #000 12%, var(--foreground)); border-color: var(--separator); color: var(--light-text); } html[data-color*="dark"] .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):hover { background-color: color-mix(in srgb, var(--primary) 16%, var(--foreground)); border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); } html[data-color*="dark"] .el-button.is-disabled, html[data-color*="dark"] .el-button.is-disabled:hover { background-color: var(--background-light); color: var(--muted); border-color: var(--separator); } /* ===== Dropdowns / Popovers / Select menu ===== */ html[data-color*="dark"] .el-popper.is-light { background: var(--foreground) !important; border-color: var(--separator) !important; color: var(--light-text); } html[data-color*="dark"] .el-popper.is-light > .el-popper__arrow::before { background: var(--foreground) !important; border-color: var(--separator) !important; } html[data-color*="dark"] .el-select-dropdown__item { color: var(--body); } html[data-color*="dark"] .el-select-dropdown__item.is-hovering, html[data-color*="dark"] .el-select-dropdown__item:hover { background-color: color-mix(in srgb, var(--primary) 14%, var(--foreground)); color: var(--light-text); } html[data-color*="dark"] .el-select-dropdown__item.is-selected { color: var(--primary); font-weight: 700; background-color: color-mix(in srgb, var(--primary) 12%, var(--foreground)); } html[data-color*="dark"] .el-select__placeholder { color: var(--muted); } /* ===== Tabs ===== */ html[data-color*="dark"] .el-tabs__nav-wrap::after { background-color: var(--separator-light) !important; } html[data-color*="dark"] .el-tabs__item { color: var(--alternate); } html[data-color*="dark"] .el-tabs__item:hover { color: var(--primary); } html[data-color*="dark"] .el-tabs__item.is-active { color: var(--primary); } /* ===== Tags / Badges ===== */ html[data-color*="dark"] .el-tag { background-color: color-mix(in srgb, var(--background-light) 70%, transparent); border-color: var(--separator); color: var(--body); } html[data-color*="dark"] .el-tag--success { background-color: color-mix(in srgb, var(--success) 18%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: color-mix(in srgb, var(--success) 85%, #fff); } html[data-color*="dark"] .el-tag--warning { background-color: color-mix(in srgb, var(--warning) 18%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: color-mix(in srgb, var(--warning) 85%, #fff); } html[data-color*="dark"] .el-tag--danger { background-color: color-mix(in srgb, var(--danger) 18%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: color-mix(in srgb, var(--danger) 85%, #fff); } html[data-color*="dark"] .el-tag--info { background-color: color-mix(in srgb, var(--info) 18%, transparent); border-color: color-mix(in srgb, var(--info) 40%, transparent); color: color-mix(in srgb, var(--info) 85%, #fff); } html[data-color*="dark"] .el-tag--primary { background-color: color-mix(in srgb, var(--primary) 18%, transparent); border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: color-mix(in srgb, var(--primary) 85%, #fff); } /* ===== Form item labels / Checkbox / Radio ===== */ html[data-color*="dark"] .el-form-item__label { color: var(--alternate) !important; } html[data-color*="dark"] .el-checkbox__label, html[data-color*="dark"] .el-radio__label { color: var(--body) !important; } html[data-color*="dark"] .el-checkbox__inner { background-color: color-mix(in srgb, #000 12%, var(--foreground)); border-color: var(--separator); } html[data-color*="dark"] .el-checkbox__input.is-checked .el-checkbox__inner { background-color: var(--primary); border-color: var(--primary); } html[data-color*="dark"] .el-radio__inner { background-color: color-mix(in srgb, #000 12%, var(--foreground)); border-color: var(--separator); } /* ===== Divider ===== */ html[data-color*="dark"] .el-divider { background-color: var(--separator-light); } html[data-color*="dark"] .el-divider__text { background-color: var(--foreground); color: var(--alternate); } /* ===== Alert ===== */ html[data-color*="dark"] .el-alert--warning { background-color: color-mix(in srgb, var(--warning) 14%, var(--foreground)); border-color: color-mix(in srgb, var(--warning) 30%, transparent); } html[data-color*="dark"] .el-alert--warning .el-alert__title { color: color-mix(in srgb, var(--warning) 90%, #fff); } html[data-color*="dark"] .el-alert--info { background-color: color-mix(in srgb, var(--info) 14%, var(--foreground)); } html[data-color*="dark"] .el-alert--success { background-color: color-mix(in srgb, var(--success) 14%, var(--foreground)); } html[data-color*="dark"] .el-alert--error { background-color: color-mix(in srgb, var(--danger) 14%, var(--foreground)); } /* ===== DatePicker / Calendar ===== */ html[data-color*="dark"] .el-date-editor .el-range-input { color: var(--light-text); background-color: transparent; } html[data-color*="dark"] .el-date-table th { color: var(--alternate); border-bottom-color: var(--separator); } html[data-color*="dark"] .el-date-table td .el-date-table-cell__text { color: var(--body); } html[data-color*="dark"] .el-date-table td.next-mon .el-date-table-cell__text, html[data-color*="dark"] .el-date-table td.prev-mon .el-date-table-cell__text { color: var(--muted); } html[data-color*="dark"] .el-picker-panel, html[data-color*="dark"] .el-time-panel { background-color: var(--foreground); border-color: var(--separator); color: var(--body); } html[data-color*="dark"] .el-picker-panel__icon-btn { color: var(--alternate); } html[data-color*="dark"] .el-date-table td.in-range .el-date-table-cell, html[data-color*="dark"] .el-date-table td.in-range:hover .el-date-table-cell { background-color: color-mix(in srgb, var(--primary) 14%, var(--foreground)); } /* ===== Paginacion ===== */ html[data-color*="dark"] .el-pagination { --el-pagination-bg-color: var(--background-light); --el-pagination-hover-color: var(--primary); color: var(--body); } html[data-color*="dark"] .el-pagination button { background-color: var(--background-light) !important; color: var(--body); } html[data-color*="dark"] .el-pager li { background-color: var(--background-light); color: var(--body); } html[data-color*="dark"] .el-pager li.is-active { color: #fff; background-color: var(--primary); } /* ===== Scrollbar del overlay de Element ===== */ html[data-color*="dark"] .el-scrollbar__bar .el-scrollbar__thumb { background-color: color-mix(in srgb, var(--muted) 50%, transparent); } /* ===== Card / Panel generico ===== */ html[data-color*="dark"] .el-card { --el-card-bg-color: var(--foreground); border-color: var(--separator); color: var(--body); } /* ===== Message / Notification (popovers flotantes) ===== */ html[data-color*="dark"] .el-message { background-color: var(--foreground) !important; border-color: var(--separator) !important; color: var(--light-text) !important; box-shadow: var(--el-box-shadow-light) !important; } html[data-color*="dark"] .el-notification { background-color: var(--foreground) !important; border-color: var(--separator) !important; } /* ===== Loading ===== */ html[data-color*="dark"] .el-loading-mask { background-color: rgba(0, 0, 0, 0.7); } /* ===== Tooltip ===== */ html[data-color*="dark"] .el-popper.is-dark { background: var(--background-light) !important; color: var(--light-text) !important; border: 1px solid var(--separator); } html[data-color*="dark"] .el-popper.is-dark > .el-popper__arrow::before { background: var(--background-light) !important; border-color: var(--separator) !important; } /* ============================================================ MODO OSCURO — Menu / Nav lateral El toggle de foco cambia data-color pero NO data-navcolor, que por defecto es "light" y deja el menu en blanco (#fff). Estas reglas fuerzan el nav a fondo oscuro y texto claro cuando el color es dark, sin tocar el JS ni settings. Solo aplican en modo oscuro; modo claro queda intacto. ============================================================ */ /* Fondo del nav: oscuro en modo dark sin importar el navcolor */ html[data-color*="dark"] .nav-container { background: var(--background-navcolor-dark) !important; } /* Links del menu: texto claro */ html[data-color*="dark"] .nav-container .menu-container .menu a, html[data-color*="dark"] .nav-container .menu-container .menu > li > a { color: var(--light-text) !important; } html[data-color*="dark"] .nav-container .menu-container .menu a:hover, html[data-color*="dark"] .nav-container .menu-container .menu > li > a:hover, html[data-color*="dark"] .nav-container .menu-container .menu a.active { background: rgba(255, 255, 255, 0.06) !important; color: var(--primary) !important; } /* Iconos del menu: mantienen el primario del tenant */ html[data-color*="dark"] .nav-container .menu-container .menu a .icon, html[data-color*="dark"] .nav-container .menu-container .menu > li > a .icon, html[data-color*="dark"] .nav-container .menu-container .menu > li .icon { color: var(--primary) !important; } /* Labels de submenu */ html[data-color*="dark"] .nav-container .nav-content .menu-container .menu ul a, html[data-color*="dark"] .nav-container .menu-container .menu li a .label { color: var(--alternate); } /* Indicador activo del label */ html[data-color*="dark"] .nav-container .menu-container .menu a.active .label::after { background: var(--primary); } /* Flechas de collapse/dropdown */ html[data-color*="dark"] .menu a[data-bs-toggle='collapse']::before, html[data-color*="dark"] .menu a.dropdown-toggle::before { border-color: var(--alternate); } /* Iconos del nav (foco, pin, campana) */ html[data-color*="dark"] .nav-container .menu-icons > li > a { color: var(--light-text) !important; } html[data-color*="dark"] .nav-container .menu-icons > li > a:hover { background: rgba(255, 255, 255, 0.06) !important; } /* User container */ html[data-color*="dark"] .nav-container .user-container .user .name { color: var(--light-text); } html[data-color*="dark"] .nav-container .user-container .user:hover { background: rgba(255, 255, 255, 0.06) !important; } /* Mobile buttons */ html[data-color*="dark"] .nav-container .mobile-buttons-container > a { color: var(--light-text) !important; } html[data-color*="dark"] .nav-container .mobile-buttons-container > a:hover { background: rgba(255, 255, 255, 0.06) !important; } /* Sombra del nav acorde al modo oscuro */ html[data-color*="dark"] .nav-shadow { box-shadow: var(--menu-shadow-navcolor) !important; } /* ============================================================ MODO OSCURO — Logo del nav con letras blancas (aditivo) En modo oscuro el nav tiene fondo oscuro, pero data-navcolor queda en "light" y el logo carga logo-*-light.svg (letras oscuras, ilegibles). Aqui forzamos el logo dark (letras blancas) sin importar el data-navcolor. Modo claro intacto. ============================================================ */ html[data-color='dark-blue'] .logo .img { background-image: url(../img/logo/logo-blue-dark.svg) !important; } html[data-color='dark-green'] .logo .img { background-image: url(../img/logo/logo-green-dark.svg) !important; } html[data-color='dark-red'] .logo .img { background-image: url(../img/logo/logo-red-dark.svg) !important; } html[data-color='dark-purple'] .logo .img { background-image: url(../img/logo/logo-purple-dark.svg) !important; } html[data-color='dark-pink'] .logo .img { background-image: url(../img/logo/logo-pink-dark.svg) !important; } html[data-color='dark-teal'] .logo .img { background-image: url(../img/logo/logo-teal-dark.svg) !important; } html[data-color='dark-lime'] .logo .img { background-image: url(../img/logo/logo-lime-dark.svg) !important; } html[data-color='dark-sky'] .logo .img { background-image: url(../img/logo/logo-sky-dark.svg) !important; } /* ============================================================ MODO OSCURO — Primarios mas vivos por paleta (aditivo) Sobre superficies mas oscuras, el primario original se ve apagado. Estos valores son ~10-15% mas saturados/luminosos. Solo aplica a la paleta dark correspondiente; light intacto. ============================================================ */ html[data-color='dark-blue'] { --primary: #3aaee6; --primary-darker: #1b98d0; } html[data-color='dark-green'] { --primary: #34a85a; --primary-darker: #199254; } html[data-color='dark-red'] { --primary: #e56060; --primary-darker: #d44f4f; } html[data-color='dark-purple'] { --primary: #b274d6; --primary-darker: #9e62c7; } html[data-color='dark-pink'] { --primary: #e4708b; --primary-darker: #d65d7c; } html[data-color='dark-teal'] { --primary: #1ec7cd; --primary-darker: #0db0b6; } html[data-color='dark-lime'] { --primary: #7ba83d; --primary-darker: #6a9a33; } html[data-color='dark-sky'] { --primary: #22c8ec; --primary-darker: #09bcde; } /* ============================================================ MODO OSCURO — Terciarios mas luminosos por paleta (aditivo) --tertiary en las paletas dark-* tiene valores apagados (#985398 en dark-purple, #384be1 en dark-teal, #2fa729 en dark-lime) que sobre fondo oscuro (#1c1f26) dan ratio ~2.8:1, por debajo de WCAG AA (4.5:1). Se sobrescriben con versiones mas luminosas que mantienen la identidad del color pero pasan AA. Solo aplica en modo dark; modo claro intacto. ============================================================ */ html[data-color='dark-blue'] { --tertiary: #7ee3ce; --tertiary-darker: #54cdb4; } html[data-color='dark-green'] { --tertiary: #c4e366; --tertiary-darker: #a0cc36; } html[data-color='dark-red'] { --tertiary: #f5b26a; --tertiary-darker: #e19042; } html[data-color='dark-purple'] { --tertiary: #c98ac9; --tertiary-darker: #985398; } html[data-color='dark-pink'] { --tertiary: #f57889; --tertiary-darker: #df4459; } html[data-color='dark-teal'] { --tertiary: #7a8af5; --tertiary-darker: #384be1; } html[data-color='dark-lime'] { --tertiary: #5cd452; --tertiary-darker: #2fa729; } html[data-color='dark-sky'] { --tertiary: #8ae8db; --tertiary-darker: #60d7ca; } /* ============================================================ LOGIN — Validation summary sin fondo en AMBOS modos (aditivo) Bootstrap pinta .alert-primary con background-color:#cfe2ff. Esto anula el fondo del validation-summary para que se integre con el fondo de la pagina. Sin borde, sin box-shadow, sin color. Aplica en modo claro y oscuro (el login es pagina publica). ============================================================ */ .login-validation-summary, .login-validation-summary.alert, .login-validation-summary.alert-primary, .login-validation-summary.validation-summary-valid { background: transparent !important; background-color: transparent !important; border: 0 !important; border-color: transparent !important; box-shadow: none !important; --bs-primary: transparent !important; --bs-primary-rgb: 0, 0, 0 !important; --bs-primary-bg-subtle: transparent !important; --bs-primary-border-subtle: transparent !important; --bs-primary-text-subtle: inherit !important; --bs-alert-bg: transparent !important; --bs-alert-border-color: transparent !important; --bs-alert-color: inherit !important; } /* ============================================================ MODO OSCURO — Impacto visual en surfaces (aditivo) Elevacion, bordes-brillo y gradientes sutiles para que cards/modals/tables "salten" sobre el fondo oscuro. ============================================================ */ /* Cards: borde superior con tinte del primario + sombra profunda */ html[data-color*="dark"] .card { border: 1px solid var(--separator) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 0 var(--separator-light) inset !important; } html[data-color*="dark"] .card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--separator)) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent) !important; } /* Modal: borde-brillo del primario + sombra dramatica */ html[data-color*="dark"] .modal-content { background: var(--foreground) !important; border: 1px solid var(--separator) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent) !important; } html[data-color*="dark"] .modal-header { border-bottom: 1px solid var(--separator) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--foreground)) 0%, var(--foreground) 100%) !important; } html[data-color*="dark"] .modal-footer { border-top: 1px solid var(--separator) !important; background: var(--foreground) !important; } /* Modal backdrop mas oscuro para que el modal "flote" */ html[data-color*="dark"] .modal-backdrop.show { opacity: 0.75; background: #000; } /* Tablas: header con tinte primario + zebra sutil */ html[data-color*="dark"] table thead th { background: color-mix(in srgb, var(--primary) 10%, var(--foreground)) !important; border-bottom: 2px solid color-mix(in srgb, var(--primary) 30%, var(--separator)) !important; color: var(--light-text) !important; } html[data-color*="dark"] table tbody tr:nth-child(even) { background: color-mix(in srgb, #000 10%, var(--foreground)) !important; } html[data-color*="dark"] table tbody tr:hover { background: color-mix(in srgb, var(--primary) 12%, var(--foreground)) !important; } /* Inputs: borde foco brillante */ html[data-color*="dark"] .form-control:focus, html[data-color*="dark"] .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent) !important; background: color-mix(in srgb, #000 8%, var(--foreground)) !important; color: var(--light-text) !important; } html[data-color*="dark"] .form-control, html[data-color*="dark"] .form-select { background: color-mix(in srgb, #000 14%, var(--foreground)) !important; border-color: var(--separator) !important; color: var(--light-text) !important; } /* Botones primarios con brillo sutil */ html[data-color*="dark"] .btn-primary { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-darker) 100%) !important; border-color: var(--primary-darker) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent) !important; } html[data-color*="dark"] .btn-primary:hover { filter: brightness(1.12) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent) !important; } /* Dropdowns con sombra flotante y borde brillante */ html[data-color*="dark"] .dropdown-menu { background: var(--foreground) !important; border: 1px solid var(--separator) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent) !important; } html[data-color*="dark"] .dropdown-item { color: var(--body) !important; } html[data-color*="dark"] .dropdown-item:hover, html[data-color*="dark"] .dropdown-item:focus { background: color-mix(in srgb, var(--primary) 14%, var(--foreground)) !important; color: var(--light-text) !important; } /* Page body con sutil gradient para profundidad */ html[data-color*="dark"] body, html[data-color*="dark"] .page, html[data-color*="dark"] #content { background: linear-gradient(180deg, var(--background) 0%, var(--background-theme) 100%) !important; } /* Breadcrumb con texto mas legible */ html[data-color*="dark"] .breadcrumb a { color: var(--alternate) !important; } html[data-color*="dark"] .breadcrumb a:hover { color: var(--primary) !important; } html[data-color*="dark"] .breadcrumb-item.active { color: var(--body) !important; } /* Badge/Pill con mas contraste */ html[data-color*="dark"] .badge { border: 1px solid var(--separator); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } /* Scrollbar del contenido con tinte */ html[data-color*="dark"] ::-webkit-scrollbar-thumb { background: var(--separator); border-radius: 4px; } html[data-color*="dark"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 30%, var(--separator)); } html[data-color*="dark"] ::-webkit-scrollbar-track { background: var(--background-theme); } /* Links con sutil brillo en hover */ html[data-color*="dark"] a:not(.btn):not(.nav-link):not(.menu a) { color: color-mix(in srgb, var(--primary) 80%, #fff); transition: color 0.15s ease; } html[data-color*="dark"] a:not(.btn):not(.nav-link):not(.menu a):hover { color: #fff; text-decoration: underline; } /* Separadores HR visibles */ html[data-color*="dark"] hr { border-color: var(--separator); opacity: 0.7; } /* Sombra extra en contenedores principales para profundidad */ html[data-color*="dark"] .content, html[data-color*="dark"] #content > .container-fluid { background: var(--background-theme); } /* Header de pagina con tinte sutil */ html[data-color*="dark"] .page-title, html[data-color*="dark"] h1, html[data-color*="dark"] h2, html[data-color*="dark"] h3, html[data-color*="dark"] h4, html[data-color*="dark"] h5 { color: var(--light-text) !important; } /* ============================================================ MODO OSCURO — Ajuste quirurgico para vista Products (aditivo) El header de la tabla usaba var(--primary) solido (purpura llamativo). En modo oscuro se ve como un bloque de color que resalta demasiado. Se cambia por un degradado oscuro con tinte purpura sutil, mas integrado e impactante. El titulo con degradado se intensifica para que se note sobre fondo oscuro. Solo aplica en modo oscuro; modo claro intacto. ============================================================ */ /* Header de la tabla: degradado oscuro con tinte purpura, no solido */ html[data-color*="dark"] .table-header-actions { background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 22%, var(--foreground)) 0%, color-mix(in srgb, #3b82f6 18%, var(--foreground)) 100%) !important; border-bottom: 1px solid color-mix(in srgb, #7c3aed 35%, var(--separator)) !important; box-shadow: 0 2px 12px rgba(124, 58, 237, 0.15) !important; } /* Botones del header: hover con brillo purpura */ html[data-color*="dark"] .action-btn:hover { background-color: color-mix(in srgb, #7c3aed 35%, transparent) !important; border-color: color-mix(in srgb, #7c3aed 50%, transparent) !important; } html[data-color*="dark"] .action-btn:focus-visible { outline-color: #a78bfa !important; } /* Indicador de paginacion mas legible */ html[data-color*="dark"] .pagination-indicator { color: var(--light-text) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* Titulo con degradado: colores mas vivos para modo oscuro */ html[data-color*="dark"] .modern-gradient-text { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 40%, #60a5fa 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.3)); } /* Stat cards: bordes y sombras adaptados a modo oscuro */ html[data-color*="dark"] .stat-card-compact-new { background: color-mix(in srgb, #7c3aed 8%, var(--foreground)) !important; border-color: color-mix(in srgb, #7c3aed 30%, var(--separator)) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } html[data-color*="dark"] .stat-card-compact-new:hover { background: color-mix(in srgb, #7c3aed 14%, var(--foreground)) !important; border-color: color-mix(in srgb, #7c3aed 50%, var(--separator)) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2) !important; } /* Iconos de los stat cards con gradientes mas vivos */ html[data-color*="dark"] .bg-info-gradient { background: linear-gradient(135deg, rgba(32, 156, 238, 0.15), rgba(32, 156, 238, 0.3)) !important; border-color: rgba(32, 156, 238, 0.45) !important; } html[data-color*="dark"] .bg-gray-gradient { background: linear-gradient(135deg, rgba(160, 174, 192, 0.12), rgba(160, 174, 192, 0.25)) !important; border-color: rgba(160, 174, 192, 0.4) !important; } /* Campo de busqueda del header en modo oscuro */ html[data-color*="dark"] .header-search .el-input__wrapper { background: color-mix(in srgb, #000 18%, var(--foreground)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, #7c3aed 25%, var(--separator)) inset !important; } html[data-color*="dark"] .header-search .el-input__wrapper.is-focus { box-shadow: 0 0 0 1px #7c3aed inset !important; } html[data-color*="dark"] .header-search .el-input__inner { color: var(--light-text) !important; } html[data-color*="dark"] .header-search .el-input__inner::placeholder { color: var(--muted) !important; } /* ============================================================ MODO OSCURO — Correccion de contraste para textos morados myspin.css fuerza color: #7c3aed !important en muchos elementos (selects, tabs, checkboxes, tree nodes). Sobre fondo oscuro (#1c1f26) ese purpura medio tiene ratio ~3:1, por debajo de WCAG AA (4.5:1). Aqui se sobrescribe con un purpura mas luminoso (#a78bfa) que alcanza ~7:1. Solo aplica en modo oscuro; modo claro intacto. ============================================================ */ /* Selects/dropdowns: item seleccionado/hover */ html[data-color*="dark"] .el-select-dropdown__item.selected, html[data-color*="dark"] .el-select-dropdown__item.hover, html[data-color*="dark"] .el-cascader-node.is-active, html[data-color*="dark"] .el-cascader-node:hover, html[data-color*="dark"] .el-dropdown-menu__item:focus, html[data-color*="dark"] .el-dropdown-menu__item:not(.is-disabled):hover { color: #a78bfa !important; background-color: color-mix(in srgb, #7c3aed 16%, var(--foreground)) !important; } /* Checkbox/radio label cuando esta seleccionado */ html[data-color*="dark"] .el-checkbox__input.is-checked + .el-checkbox__label, html[data-color*="dark"] .el-radio__input.is-checked + .el-radio__label { color: #a78bfa !important; } /* Tabs activos */ html[data-color*="dark"] .el-tabs__item.is-active { color: #a78bfa !important; } html[data-color*="dark"] .el-tabs__active-bar { background-color: #a78bfa !important; } /* Tree/menu current */ html[data-color*="dark"] .el-tree-node.is-current > .el-tree-node__content, html[data-color*="dark"] .el-menu-item.is-active { color: #a78bfa !important; } /* Iconos de sort de tablas */ html[data-color*="dark"] .el-table .sort-caret.ascending, html[data-color*="dark"] .el-table .sort-caret.descending { color: #a78bfa !important; } /* Filter icon de cabecera */ html[data-color*="dark"] .filter-icon { color: #a78bfa !important; } html[data-color*="dark"] .filter-icon:focus-visible { outline-color: #a78bfa !important; } /* Action icon link */ html[data-color*="dark"] .action-icon { color: #a78bfa !important; } html[data-color*="dark"] .action-icon:hover { color: #c4b5fd !important; } /* Invalid feedback (errores de form en popovers) */ html[data-color*="dark"] .responsive-item-popover .invalid-feedback { color: #f87171 !important; } /* Boton primario de Element Plus: hereda primario del tenant */ html[data-color*="dark"] .el-button--primary { background-color: var(--primary) !important; border-color: var(--primary) !important; } html[data-color*="dark"] .el-button--primary:hover, html[data-color*="dark"] .el-button--primary:focus { background-color: var(--primary-darker) !important; border-color: var(--primary-darker) !important; } /* Switch/checkbox/radio primario */ html[data-color*="dark"] .el-switch.is-checked .el-switch__core { border-color: var(--primary) !important; background-color: var(--primary) !important; } html[data-color*="dark"] .el-checkbox__input.is-checked .el-checkbox__inner, html[data-color*="dark"] .el-radio__input.is-checked .el-radio__inner { background-color: var(--primary) !important; border-color: var(--primary) !important; } /* Paginacion activa */ html[data-color*="dark"] .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: var(--primary) !important; } /* Slider */ html[data-color*="dark"] .el-slider__bar { background-color: var(--primary) !important; } html[data-color*="dark"] .el-slider__button { border-color: var(--primary) !important; } /* Celdas de tabla con texto primario (waybill, branch, consignee) Element Plus usa --el-color-primary para texto destacado. Con el --el-color-primary ya corregido arriba, estas celdas heredan el primario del tenant. Pero por si acaso, forzamos color legible en celdas con clase text-primary de Element. */ html[data-color*="dark"] .el-table .cell .text-primary, html[data-color*="dark"] .el-table td .cell[style*="color"], html[data-color*="dark"] .el-table .el-link--primary { color: var(--primary) !important; } /* Links dentro de tablas */ html[data-color*="dark"] .el-table a.el-link { color: var(--primary) !important; } html[data-color*="dark"] .el-table a.el-link:hover { color: color-mix(in srgb, var(--primary) 80%, #fff) !important; }