/* ============================================================================= Emboxia — línea gráfica del panel ============================================================================= Los mismos tokens que emboxia.com (ver src/styles/global.css de la landing): índigo de marca, naranja de acento, superficies y tipografías. Es una CAPA DE SUPERPOSICIÓN: se carga después de app.css (223 KB) y de dark.css, y solo redefine color, tipografía, radios y sombras. No toca la maquetación, así que no puede romper pantallas que no se hayan revisado. Modo claro y oscuro se eligen con la clase que el layout ya pone en : `mode-light` / `mode-dark`, guardada en el perfil (Mi cuenta → Modo del tema). ========================================================================== */ :root, body.mode-light { /* Marca (idénticos a la landing) */ --emb-brand-50: #eef1ff; --emb-brand-100: #dfe4ff; --emb-brand-200: #c4ccff; --emb-brand-300: #9da8ff; --emb-brand-400: #6f7bfb; --emb-brand-500: #3d4cf5; --emb-brand-600: #1c2be3; --emb-brand-700: #0e1bbd; --emb-brand-800: #0b1594; --emb-brand-900: #0a126e; --emb-accent-100: #ffe5d3; --emb-accent-300: #ffa66b; --emb-accent-400: #ff7d2e; --emb-accent-500: #fa5901; --emb-accent-600: #d94900; /* Superficies — modo claro */ --emb-bg: #fffcf8; --emb-bg-alt: #f3f5ff; --emb-surface: #ffffff; --emb-surface-2: #f7f8fe; --emb-fg: #0c1136; --emb-muted: #515a82; --emb-line: #e3e6f6; --emb-heading: #0e1bbd; /* Barra lateral — índigo profundo, como el pie de la landing */ --emb-nav-bg: #ffffff; --emb-nav-bg-2: #f7f8fe; --emb-nav-fg: #515a82; --emb-nav-fg-strong: #0c1136; --emb-nav-active-bg: rgb(61 76 245 / 0.1); --emb-nav-hover-bg: rgb(61 76 245 / 0.06); /* Velos para lo que se dibuja encima de la barra (botones de herramientas, submenú abierto). En claro tienen que oscurecer, no aclarar. */ --emb-nav-veil: rgb(12 17 54 / 0.05); --emb-nav-veil-strong: rgb(12 17 54 / 0.09); --emb-nav-line: rgb(12 17 54 / 0.09); --emb-ok: #16a34a; --emb-warn: #d97706; --emb-danger: #dc2626; --emb-radius: 12px; --emb-radius-sm: 8px; --emb-shadow: 0 1px 2px rgb(12 17 54 / 0.04), 0 8px 24px -12px rgb(12 17 54 / 0.12); --emb-shadow-lg: 0 2px 4px rgb(12 17 54 / 0.04), 0 18px 40px -16px rgb(12 17 54 / 0.2); --emb-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --emb-font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif; } body.mode-dark { --emb-bg: #04061c; --emb-bg-alt: #080b2b; --emb-surface: #0c113a; --emb-surface-2: #10164a; --emb-fg: #eef0ff; --emb-muted: #a5acd6; --emb-line: #1c2359; --emb-heading: #ffffff; --emb-nav-bg: #05083d; --emb-nav-bg-2: #04061c; --emb-nav-fg: #a5acd6; --emb-nav-fg-strong: #ffffff; --emb-nav-active-bg: rgba(157, 168, 255, 0.14); --emb-nav-hover-bg: rgba(157, 168, 255, 0.08); --emb-nav-veil: rgb(255 255 255 / 0.06); --emb-nav-veil-strong: rgb(255 255 255 / 0.13); --emb-nav-line: rgb(255 255 255 / 0.1); --emb-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.6); --emb-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 18px 40px -16px rgb(0 0 0 / 0.7); } /* -------------------------------------------------------------------------- Tipografía -------------------------------------------------------------------------- */ body { font-family: var(--emb-font); background-color: var(--emb-bg); color: var(--emb-fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .page-title h1, .plan-name { font-family: var(--emb-font-display); letter-spacing: -0.015em; color: var(--emb-fg); } .page-title h1 { font-weight: 700; } .text-muted, .text-muted2 { color: var(--emb-muted) !important; } a { color: var(--emb-brand-600); } a:hover { color: var(--emb-brand-700); } body.mode-dark a { color: var(--emb-brand-300); } body.mode-dark a:hover { color: var(--emb-brand-200); } /* -------------------------------------------------------------------------- Barra lateral -------------------------------------------------------------------------- */ .navbar.navbar-main { background: linear-gradient(180deg, var(--emb-nav-bg) 0%, var(--emb-nav-bg-2) 100%) !important; /* En modo claro la barra y la página son las dos claras: sin una línea no se sabe dónde acaba una y empieza la otra. */ border-right: 1px solid var(--emb-nav-line); border-right: 1px solid var(--emb-nav-veil); box-shadow: var(--emb-shadow); } .navbar.navbar-main .navbar-brand { padding: 18px 14px; } .navbar.navbar-main .nav-link { color: var(--emb-nav-fg) !important; font-weight: 500; font-size: 0.9rem; border-radius: var(--emb-radius-sm); margin: 1px 8px; padding-left: 10px !important; padding-right: 10px !important; transition: background-color 0.15s ease, color 0.15s ease; } .navbar.navbar-main .nav-link:hover, .navbar.navbar-main .nav-link:focus { background-color: var(--emb-nav-hover-bg); color: var(--emb-nav-fg-strong) !important; } .navbar.navbar-main .nav-item.active > .nav-link, .navbar.navbar-main .nav-link.active { background-color: var(--emb-nav-active-bg); color: var(--emb-nav-fg-strong) !important; font-weight: 600; } /* Marca a la izquierda del elemento activo, como en la landing */ .navbar.navbar-main .nav-item.active > .nav-link::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--emb-accent-500); } .navbar.navbar-main .nav-link { position: relative; } /* Los iconos venían con el color incrustado en el SVG (#f2f2f2, aqua, lime): se unifican al color del texto y el detalle toma el naranja de la marca. */ /* Los iconos del menu son monocromos y siguen el color del texto. Se deja fuera lo marcado como 'navbar-icon-marca': son logos con su color propio (el de WhatsApp, por ejemplo), y teñirlos rellenaba hasta el rectangulo transparente del fondo, que salia como un cuadrado blanco. */ .navbar.navbar-main .navbar-icon:not(.navbar-icon-marca) svg path, .navbar.navbar-main .navbar-icon:not(.navbar-icon-marca) svg polygon, .navbar.navbar-main .navbar-icon:not(.navbar-icon-marca) svg rect, .navbar.navbar-main .navbar-icon:not(.navbar-icon-marca) svg circle { fill: currentColor !important; } .navbar.navbar-main .navbar-icon svg .color-badge, .navbar.navbar-main .navbar-icon svg [style*='aqua'], .navbar.navbar-main .navbar-icon svg [style*='lime'] { fill: var(--emb-accent-400) !important; } .navbar.navbar-main .navbar-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; opacity: 0.95; } .navbar.navbar-main .navbar-icon svg { width: 100%; height: 100%; } /* Submenús */ .navbar.navbar-main .dropdown-menu { background-color: transparent; border: 0; box-shadow: none; padding-left: 14px; } .navbar.navbar-main .dropdown-menu .dropdown-item { color: var(--emb-nav-fg) !important; font-size: 0.85rem; border-radius: var(--emb-radius-sm); padding: 7px 10px; margin: 1px 4px; } .navbar.navbar-main .dropdown-menu .dropdown-item:hover { background-color: var(--emb-nav-hover-bg); color: var(--emb-nav-fg-strong) !important; } .navbar.navbar-main .dropdown-menu .nav-item.active > .dropdown-item { background-color: var(--emb-nav-active-bg); color: var(--emb-nav-fg-strong) !important; font-weight: 600; } /* Etiquetas largas: antes se cortaban («Planes de créditos de env») */ .navbar.navbar-main .nav-link > span, .navbar.navbar-main .dropdown-item { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; } /* -------------------------------------------------------------------------- Superficies -------------------------------------------------------------------------- */ .page-container, main.page-container { background-color: transparent; } .card, .panel, .box, .new-price-item, .empty-list { background-color: var(--emb-surface); border: 1px solid var(--emb-line); border-radius: var(--emb-radius); box-shadow: var(--emb-shadow); color: var(--emb-fg); } .empty-list { color: var(--emb-muted); } .empty-list .material-symbols-rounded { color: var(--emb-brand-300); } /* -------------------------------------------------------------------------- Botones -------------------------------------------------------------------------- */ .btn { border-radius: var(--emb-radius-sm); font-weight: 600; } .btn-primary, .btn-secondary, .btn-plan-buy { background-color: var(--emb-brand-600) !important; border-color: var(--emb-brand-600) !important; color: #fff !important; box-shadow: 0 1px 2px rgb(14 27 189 / 0.2); } .btn-primary:hover, .btn-secondary:hover, .btn-plan-buy:hover, .btn-primary:focus, .btn-secondary:focus { background-color: var(--emb-brand-700) !important; border-color: var(--emb-brand-700) !important; } .btn-light { background-color: var(--emb-surface-2) !important; border-color: var(--emb-line) !important; color: var(--emb-fg) !important; } .btn-light:hover { background-color: var(--emb-bg-alt) !important; } .btn-danger { background-color: var(--emb-danger) !important; border-color: var(--emb-danger) !important; } .btn-success { background-color: var(--emb-ok) !important; border-color: var(--emb-ok) !important; } /* Acción destacada (crear) en el naranja de la marca */ .btn-accent, a[href*='create']:not(.dropdown-item).btn-secondary { background-color: var(--emb-accent-500) !important; border-color: var(--emb-accent-500) !important; } .btn-accent:hover, a[href*='create']:not(.dropdown-item).btn-secondary:hover { background-color: var(--emb-accent-600) !important; border-color: var(--emb-accent-600) !important; } /* -------------------------------------------------------------------------- Formularios -------------------------------------------------------------------------- */ .form-control, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, textarea.form-control { background-color: var(--emb-surface); border: 1px solid var(--emb-line); border-radius: var(--emb-radius-sm); color: var(--emb-fg); } .form-control:focus { border-color: var(--emb-brand-400); box-shadow: 0 0 0 3px rgb(61 76 245 / 0.14); } .form-control::placeholder { color: var(--emb-muted); opacity: 0.75; } label, .form-group > label { color: var(--emb-fg); font-weight: 600; font-size: 0.875rem; } /* -------------------------------------------------------------------------- Tablas y listados -------------------------------------------------------------------------- */ .table, .pml-table { color: var(--emb-fg); } .table > :not(caption) > * > * { background-color: transparent; } .pml-table > tbody > tr, .table-box > tbody > tr { border-bottom: 1px solid var(--emb-line); } .pml-table > tbody > tr:hover { background-color: var(--emb-bg-alt); } body.mode-dark .pml-table > tbody > tr:hover { background-color: var(--emb-surface-2); } .top-list-controls, .filter-box { color: var(--emb-muted); } /* -------------------------------------------------------------------------- Estados y avisos -------------------------------------------------------------------------- */ .badge, .label { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; } .alert { border-radius: var(--emb-radius); border: 1px solid var(--emb-line); background-color: var(--emb-surface-2); color: var(--emb-fg); } .alert-success { border-color: rgb(22 163 74 / 0.3); background-color: rgb(22 163 74 / 0.08); } .alert-danger { border-color: rgb(220 38 38 / 0.3); background-color: rgb(220 38 38 / 0.08); } .alert-warning { border-color: rgb(217 119 6 / 0.3); background-color: rgb(217 119 6 / 0.08); } .alert-info { border-color: rgb(61 76 245 / 0.3); background-color: rgb(61 76 245 / 0.08); } /* -------------------------------------------------------------------------- Barra superior -------------------------------------------------------------------------- */ .headbar, .top-bar, .navbar-top { background-color: var(--emb-surface); border-bottom: 1px solid var(--emb-line); } /* -------------------------------------------------------------------------- Modo oscuro: lo que dark.css dejaba en blanco -------------------------------------------------------------------------- */ body.mode-dark, body.mode-dark .page-container { background-color: var(--emb-bg); color: var(--emb-fg); } body.mode-dark .card, body.mode-dark .panel, body.mode-dark .box, body.mode-dark .new-price-item, body.mode-dark .empty-list, body.mode-dark .modal-content, body.mode-dark .dropdown-menu:not(.navbar-main .dropdown-menu) { background-color: var(--emb-surface); border-color: var(--emb-line); color: var(--emb-fg); } body.mode-dark .form-control, body.mode-dark .select2-container--default .select2-selection--single { background-color: var(--emb-surface-2); border-color: var(--emb-line); color: var(--emb-fg); } body.mode-dark h1, body.mode-dark h2, body.mode-dark h3, body.mode-dark h4, body.mode-dark h5, body.mode-dark h6 { color: var(--emb-fg); } /* -------------------------------------------------------------------------- Detalles -------------------------------------------------------------------------- */ hr { border-color: var(--emb-line); opacity: 1; } ::selection { background: var(--emb-brand-200); color: var(--emb-brand-900); } body.mode-dark ::selection { background: var(--emb-brand-700); color: #fff; } /* Barras de desplazamiento discretas, como en la landing */ * { scrollbar-width: thin; scrollbar-color: var(--emb-line) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--emb-line); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--emb-brand-300); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- Tarjetas de plan (pantalla donde el cliente elige o cambia de plan) -------------------------------------------------------------------------- Venían en azul sólido con el nombre del plan en azul oscuro encima: apenas se leía. Y la altura fija de 480 px recortaba la lista de características. Se pasan a la superficie de la landing, con borde y altura que crece. Hace falta !important porque la vista trae sus propias reglas con !important. -------------------------------------------------------------------------- */ .plans-grouped-container .plan-card-modern, .new-price-item.plan-card-modern { background: var(--emb-surface) !important; border: 1px solid var(--emb-line) !important; color: var(--emb-fg) !important; box-shadow: var(--emb-shadow) !important; height: auto !important; min-height: 460px !important; overflow: visible !important; } .plans-grouped-container .plan-card-modern:hover { border-color: var(--emb-brand-300) !important; box-shadow: var(--emb-shadow-lg) !important; transform: translateY(-2px); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .plan-card-modern .plan-name { color: var(--emb-fg) !important; font-weight: 700 !important; } .plan-card-modern .plan-description, .plan-card-modern .plan-frequency, .plan-card-modern .feature-item { color: var(--emb-muted) !important; } .plan-card-modern .plan-price-amount, .plan-card-modern .plan-currency-symbol { color: var(--emb-heading) !important; } .plan-card-modern .plan-currency-code { color: var(--emb-muted) !important; } .plan-card-modern .plan-divider { border-color: var(--emb-line) !important; opacity: 1; } .plan-card-modern .plan-description-list li { color: var(--emb-fg) !important; } .plan-card-modern .plan-description-list li:before { color: var(--emb-accent-500) !important; } .plan-card-modern .plan-features { background: var(--emb-bg-alt) !important; border-radius: var(--emb-radius-sm); padding: 10px 12px; margin-top: auto; } body.mode-dark .plan-card-modern .plan-features { background: var(--emb-surface-2) !important; } .plan-card-modern .plan-desc-toggle { background: transparent !important; border: 0 !important; color: var(--emb-brand-600) !important; font-weight: 600; padding: 4px 0 !important; } body.mode-dark .plan-card-modern .plan-desc-toggle { color: var(--emb-brand-300) !important; } .plan-card-modern .btn-plan-buy { background-color: var(--emb-accent-500) !important; border-color: var(--emb-accent-500) !important; color: #fff !important; } .plan-card-modern .btn-plan-buy:hover { background-color: var(--emb-accent-600) !important; border-color: var(--emb-accent-600) !important; } /* Pestañas de agrupación */ .plan-tab-btn { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; color: var(--emb-muted) !important; font-weight: 600; border-radius: 0 !important; } .plan-tab-btn.active { color: var(--emb-heading) !important; border-bottom-color: var(--emb-brand-500) !important; } .plan-count-badge { background: var(--emb-brand-100) !important; color: var(--emb-brand-700) !important; border-radius: 999px; padding: 1px 8px; font-size: 0.75rem; margin-left: 6px; } body.mode-dark .plan-count-badge { background: var(--emb-brand-800) !important; color: var(--emb-brand-200) !important; } /* El texto de las caracteristicas usa el color del tema */ .plan-card-modern .plan-desc-label, .plan-card-modern .plan-desc-value { color: var(--emb-fg) !important; } /* En modo oscuro, dark.css pinta la tarjeta de azul brillante con más especificidad. Se la lleva a la superficie oscura de la landing. */ body.mode-dark .plans-grouped-container .plan-card-modern, body.mode-dark .new-price-item.plan-card-modern, body.mode-dark .plan-item.plan-card-modern { background: var(--emb-surface) !important; background-image: none !important; border-color: var(--emb-line) !important; } body.mode-dark .plan-card-modern .plan-price-amount, body.mode-dark .plan-card-modern .plan-currency-symbol { color: #fff !important; } body.mode-dark .plan-card-modern .plan-name { color: var(--emb-fg) !important; } body.mode-dark .plan-card-modern .plan-desc-label, body.mode-dark .plan-card-modern .plan-description-list li { color: var(--emb-fg) !important; } body.mode-dark .plan-card-modern .plan-description, body.mode-dark .plan-card-modern .plan-frequency { color: var(--emb-muted) !important; } /* -------------------------------------------------------------------------- Modo oscuro: legibilidad -------------------------------------------------------------------------- Medido en producción con el perfil en modo oscuro: los títulos salían a 1.16:1 de contraste (azul marino sobre fondo casi negro). Venían de reglas de app.css pensadas para fondo claro, con más especificidad que la capa de tema. Aquí se fuerzan, pero solo el texto que hereda: los enlaces, las etiquetas de estado y los botones conservan su color. -------------------------------------------------------------------------- */ body.mode-dark h1, body.mode-dark h2, body.mode-dark h3, body.mode-dark h4, body.mode-dark h5, body.mode-dark h6, body.mode-dark .page-title h1, body.mode-dark .dashboard-welcome-custom, body.mode-dark .plan-section-title { color: var(--emb-fg) !important; } body.mode-dark p, body.mode-dark li, body.mode-dark td, body.mode-dark label, body.mode-dark .form-group > label { color: var(--emb-fg); } body.mode-dark .text-muted, body.mode-dark .text-muted2, body.mode-dark .plan-section-description, body.mode-dark small { color: var(--emb-muted) !important; } /* Enlaces dentro de párrafos: legibles pero distinguibles del texto */ /* Enlaces del contenido en modo oscuro. El pie queda fuera: no es contenido de la página y tiene sus propios colores (la píldora del idioma activo va en blanco sobre el azul de marca, y esta regla la dejaba en azul claro). */ body.mode-dark .page-container a:not(.btn):not(.dropdown-item):not(.nav-link):not([class*='app-footer']) { color: var(--emb-brand-300) !important; } /* Iconos que heredaban un azul marino invisible */ body.mode-dark .page-container .material-symbols-rounded, body.mode-dark .page-container .material-icons-outlined { color: inherit; } /* Barra superior: en modo oscuro tenía iconos blancos sobre fondo blanco */ body.mode-dark .headbar, body.mode-dark .top-bar, body.mode-dark .navbar-top, body.mode-dark .middle-bar { background-color: var(--emb-surface) !important; border-bottom: 1px solid var(--emb-line); } body.mode-dark .headbar .material-symbols-rounded, body.mode-dark .top-bar .material-symbols-rounded, body.mode-dark .middle-bar .material-symbols-rounded { color: var(--emb-fg) !important; } /* Tarjetas de gráficos del panel de inicio */ body.mode-dark .chart-container, body.mode-dark .echart-box { background-color: var(--emb-surface) !important; } /* ========================================================================== Maquetación: hueco entre la barra lateral y el contenido ========================================================================== La barra mide 230 px y el contenido arrancaba con 305 px de relleno: quedaban 75 px muertos. Encima, `.middle-bar` (el panel deslizante de actividad) pinta en modo oscuro un velo `rgba(0,0,0,.3)` con desenfoque que se veía como una franja rara aunque el panel estuviera cerrado. ========================================================================== */ body.leftbar main.page-container { padding-left: 246px !important; } body.leftbar-closed main.page-container, body.state-closed main.page-container { padding-left: 76px !important; } /* Sin barra superior, el contenido puede empezar arriba del todo */ main.page-container { padding-top: 18px !important; } /* El panel deslizante no pinta nada mientras está cerrado */ body:not(.middle-bar-open) .middle-bar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none; } body.middle-bar-open .middle-bar { background: var(--emb-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-right: 1px solid var(--emb-line); } @media (max-width: 991px) { body.leftbar main.page-container, body.leftbar-closed main.page-container, body.state-closed main.page-container { padding-left: 16px !important; } } /* ========================================================================== Herramientas de la barra lateral (buscador y modo claro/oscuro) ========================================================================== */ .sidebar-tools { padding: 6px 8px 10px; } .sidebar-tools-row { display: flex; gap: 8px; align-items: center; } .sidebar-tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--emb-radius-sm); border: 1px solid var(--emb-nav-veil-strong); background: var(--emb-nav-veil); color: var(--emb-nav-fg) !important; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sidebar-tool-btn:hover { background: var(--emb-nav-veil-strong); color: var(--emb-nav-fg-strong) !important; border-color: var(--emb-nav-line); } .sidebar-tool-btn .material-symbols-rounded { font-size: 20px; line-height: 1; } /* Solo se ve el icono del modo activo */ .but-change-theme-mode .icon-mode { display: none; } .but-change-theme-mode[data-mode='light'] .icon-mode.light, .but-change-theme-mode[data-mode='dark'] .icon-mode.dark, .but-change-theme-mode[data-mode='auto'] .icon-mode.auto { display: inline-flex; } .sidebar-search-container { margin-top: 8px; } .sidebar-search-container:empty { margin-top: 0; } /* Con la barra plegada solo caben los iconos, en columna */ body.leftbar-closed .sidebar-tools-row, body.state-closed .sidebar-tools-row { flex-direction: column; } /* ========================================================================== Ventanas emergentes, modales y menús: los dos modos ========================================================================== Varias llevaban `style="background:#ffffff"` incrustado en el HTML, así que en modo oscuro salía un recuadro blanco. El atributo gana a cualquier hoja salvo con !important, de ahí la insistencia. ========================================================================== */ .modal-content, .popup-content, .popup .content, .dropdown-menu:not(.navbar-main .dropdown-menu), .top-user-menus, .tooltipster-sidetip .tooltipster-box, .select2-dropdown, .select2-container--default .select2-results__options, .daterangepicker, .datepicker, .ui-autocomplete, .swal2-popup, .top-search-result, .search-result-box { background-color: var(--emb-surface) !important; border: 1px solid var(--emb-line) !important; color: var(--emb-fg) !important; box-shadow: var(--emb-shadow-lg) !important; } /* Cabeceras, cuerpos y pies de modal */ .modal-header, .modal-body, .modal-footer, .popup-head, .popup-body, .popup-foot { background-color: transparent !important; border-color: var(--emb-line) !important; color: var(--emb-fg) !important; } .modal-title, .popup-title { color: var(--emb-fg) !important; } /* Elementos de menú y de listas desplegables */ .dropdown-menu:not(.navbar-main .dropdown-menu) .dropdown-item, .top-user-menus .dropdown-item, .top-user-menus a:not(.btn) { color: var(--emb-fg) !important; border-radius: var(--emb-radius-sm); } .dropdown-menu:not(.navbar-main .dropdown-menu) .dropdown-item:hover, .top-user-menus .dropdown-item:hover, .top-user-menus a:not(.btn):hover { background-color: var(--emb-bg-alt) !important; color: var(--emb-heading) !important; } body.mode-dark .dropdown-menu:not(.navbar-main .dropdown-menu) .dropdown-item:hover, body.mode-dark .top-user-menus .dropdown-item:hover, body.mode-dark .top-user-menus a:not(.btn):hover { background-color: var(--emb-surface-2) !important; color: #fff !important; } /* Los

con fondo blanco incrustado dentro del menú de usuario */ .top-user-menus li[style*='background'], .top-user-menus > li, .dropdown-menu li[style*='background'] { background: transparent !important; } /* Separadores y textos secundarios dentro de los menús */ .dropdown-divider { border-color: var(--emb-line) !important; } .top-user-menus .text-muted, .dropdown-menu .text-muted { color: var(--emb-muted) !important; } /* Fondo que oscurece detrás de un modal */ .modal-backdrop, .popup-backdrop { background-color: #04061c !important; } .modal-backdrop.show, .popup-backdrop.show { opacity: 0.65 !important; } /* Avisos flotantes */ .toast, .notification-box, .alert-float { background-color: var(--emb-surface) !important; border: 1px solid var(--emb-line) !important; color: var(--emb-fg) !important; } /* El buscador pinta su propio botón; se le da el mismo aspecto que al de tema */ .sidebar-tools .top-search-container .search-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 !important; border-radius: var(--emb-radius-sm); border: 1px solid var(--emb-nav-veil-strong); background: var(--emb-nav-veil) !important; color: var(--emb-nav-fg) !important; font-size: 20px; cursor: pointer; } .sidebar-tools .top-search-container .search-icon:hover { background: var(--emb-nav-veil-strong) !important; color: var(--emb-nav-fg-strong) !important; } .sidebar-tools .top-search-container { display: inline-flex; } /* El desplegable de resultados no cabe dentro de la barra: se saca por encima */ .sidebar-tools .top-search-box, .sidebar-tools .search-results-box { position: fixed !important; left: 250px !important; bottom: 16px !important; z-index: 20000; width: min(560px, calc(100vw - 280px)) !important; background: var(--emb-surface) !important; border: 1px solid var(--emb-line) !important; border-radius: var(--emb-radius) !important; box-shadow: var(--emb-shadow-lg) !important; color: var(--emb-fg) !important; } body.leftbar-closed .sidebar-tools .top-search-box, body.state-closed .sidebar-tools .search-results-box { left: 80px !important; } /* --------------------------------------------------------------------------- Textos que el barrido de contraste encontró por debajo de 3:1 --------------------------------------------------------------------------- */ /* La lupa del filtro de las tablas venía en #aaa sobre blanco (2.3:1), y en modo oscuro quedaba igual de perdida. Pasa al gris del tema, que sí llega. */ [name=keyword] + [class^="material-"], .keyword_search_button { color: var(--emb-muted) !important; background: transparent !important; } /* Texto de aviso de los desplegables: #999 sobre #ddd daba 2.1:1. */ .select2-container--default .select2-selection__placeholder, .form-control::placeholder, .form-control::-webkit-input-placeholder { color: var(--emb-muted) !important; opacity: 1 !important; } /* Pantallas de suscripción y de pago: app.css las fija en #000666, un azul casi negro que sobre el fondo oscuro da 1.16:1 (invisible). */ body.mode-dark .subscription-main-title, body.mode-dark .subscription-description, body.mode-dark .step-title, body.mode-dark .step-card-body label, body.mode-dark .order-summary-title, body.mode-dark .order-summary-description, body.mode-dark .order-item-label, body.mode-dark .order-item-description, body.mode-dark .order-item-price, body.mode-dark .order-total-label, body.mode-dark .order-total-charge-info, body.mode-dark .order-total-amount { color: var(--emb-fg) !important; } /* La flecha de los desplegables de ajustes va dibujada en el propio CSS con el mismo azul casi negro: en modo oscuro no se veía. */ body.mode-dark select.form-control, body.mode-dark select.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23eef0ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important; } /* Pestañas: app.css las deja en #333 y #111, que en oscuro no se leen. */ body.mode-dark .nav-tabs > li > a, body.mode-dark .nav-tabs .nav-link { color: var(--emb-muted) !important; } body.mode-dark .nav-tabs > li.active > a, body.mode-dark .nav-tabs .nav-link.active { color: var(--emb-fg) !important; } /* --------------------------------------------------------------------------- Segunda pasada del barrido: panel del cliente --------------------------------------------------------------------------- */ /* En oscuro se estaba tiñendo TODO enlace, botones incluidos, y un botón de fondo claro acababa con letra celeste sobre verde pálido (1.2:1). */ body.mode-dark a.btn, body.mode-dark a[class*='btn-'] { color: inherit; } body.mode-dark .btn-success, body.mode-dark .btn-primary, body.mode-dark .btn-danger, body.mode-dark .btn-warning { color: #ffffff !important; } /* .btn-info es menta pálida en los dos modos: con letra blanca daba 1.8:1. Lleva texto oscuro, que sobre ese fondo se lee de sobra. */ .btn-info, .btn-info:hover, .btn-info *, body.mode-dark .btn-info, body.mode-dark .btn-info * { color: #0c1136 !important; } /* Los avisos flotantes: dark.css les da fondo oscuro pero el enlace de dentro se quedaba en el naranja original (2.5:1). */ body.mode-dark .alert, body.mode-dark .alert-warning, body.mode-dark .alert-danger, body.mode-dark .alert-success, body.mode-dark .alert-info { color: var(--emb-fg) !important; } body.mode-dark .alert a, body.mode-dark .alert .alert-link, body.mode-dark #anotify .alert a { color: #ffd9a8 !important; text-decoration: underline; } body.mode-dark .alert-info a, body.mode-dark #anotify .alert-info a { color: var(--emb-brand-300) !important; } /* Icono de las pantallas vacías: el tono claro de marca solo funciona sobre fondo oscuro; en modo claro quedaba en 2.2:1 sobre blanco. */ .empty-list .material-symbols-rounded { color: var(--emb-brand-500); } body.mode-dark .empty-list .material-symbols-rounded { color: var(--emb-brand-300); } /* Rojo y ámbar de aviso: app.css los fija en tonos que no llegan en ninguno de los dos modos (rojo oscuro sobre fondo oscuro, ámbar claro sobre blanco). */ .text-danger, .text-danger * { color: #c1121f !important; } .text-warning, .text-warning * { color: #a85b00 !important; } body.mode-dark .text-danger, body.mode-dark .text-danger * { color: #ff8f8f !important; } body.mode-dark .text-warning, body.mode-dark .text-warning * { color: #ffc861 !important; } /* Contador de cuota del panel: el separador y el máximo iban en gris muy claro sobre blanco (1.5:1 y 2.3:1). */ .quota-separator, .quota-max { color: var(--emb-muted) !important; } /* Paleta de etiquetas de app.css: todas llevan letra blanca encima, y la mitad no llegaban ni a 3:1. Se bajan de tono manteniendo el color. */ .bg-color1 { background-color: #8e453f !important; border-color: #8e453f !important; } .bg-color2 { background-color: #4b5590 !important; border-color: #4b5590 !important; } .bg-color3 { background-color: #4c7a59 !important; border-color: #4c7a59 !important; } .bg-color4 { background-color: #5f4590 !important; border-color: #5f4590 !important; } .bg-color5 { background-color: #8e5340 !important; border-color: #8e5340 !important; } .bg-color6 { background-color: #2d7d7d !important; border-color: #2d7d7d !important; } .bg-color7 { background-color: #8e405c !important; border-color: #8e405c !important; } .bg-color8 { background-color: #6f7532 !important; border-color: #6f7532 !important; } /* Etiquetas de aviso e información: app.css las deja en cian y naranja claros con letra blanca encima (2.3:1 y 2.9:1). Se bajan de tono. */ .badge-info, .bg-info-800, .bg-info { background-color: #04707e !important; border-color: #04707e !important; color: #ffffff !important; } .badge-warning { background-color: #b23c15 !important; border-color: #b23c15 !important; color: #ffffff !important; }