/* ========================================================================= SMS Masivos — Color tokens & per-theme palettes ------------------------------------------------------------------------- Define las paletas de los 12 temas de marca blanca (UsuarioPanelColor) + reglas de override que aplican esos tokens a componentes específicos del panel (links, botones primary/info, sidebar activo, tabs, pagination, focus rings, table hover, progress bars). Carga: SIEMPRE en view.generalassets.php — el tema activo se resuelve via atributo [data-theme] en renderizado desde main.php / index.php. Estructura: 1. :root + 6 bloques [data-theme=""] con paletas 2. Reglas dark mode universales (bloque [data-theme$="-dark"]) 3. Overrides de componentes que consumen los tokens ========================================================================= */ /* ========================================================================= PALETAS POR TEMA ------------------------------------------------------------------------- Cada tema define 6 variables: - --app-primary : color de marca (CTAs, links, botones primary, focus) - --app-primary-hover : versión más oscura para hover/active - --app-primary-light : versión clara para gradients y accents sutiles - --app-primary-muted : 10% opacity para backgrounds tinted (badges, table hover) - --app-deep : color secundario oscuro (headings, footer, sidebar dark) - --app-deep-dark : versión aún más oscura para gradients Las variantes -dark NO redefinen primary — comparten paleta con su versión light. Solo cambia los backgrounds del sidebar/topbar (ver bloque dark abajo). ========================================================================= */ /* DEFAULT (blue) — paleta de la guía DESIGN.md */ :root, [data-theme=""], [data-theme="blue"], [data-theme="blue-dark"] { --app-primary: #1aa5fc; --app-primary-hover: #0c83d0; --app-primary-light: #47b3ff; --app-primary-muted: rgba(26, 165, 252, 0.10); --app-deep: #14477e; --app-deep-dark: #0d2d50; } /* GREEN */ [data-theme="green"], [data-theme="green-dark"] { --app-primary: #5ab186; --app-primary-hover: #449970; --app-primary-light: #7cc4a0; --app-primary-muted: rgba(90, 177, 134, 0.10); --app-deep: #2c5a43; --app-deep-dark: #1a3d2c; } /* RED */ [data-theme="red"], [data-theme="red-dark"] { --app-primary: #ef5350; --app-primary-hover: #d63d3a; --app-primary-light: #f47572; --app-primary-muted: rgba(239, 83, 80, 0.10); --app-deep: #8c2726; --app-deep-dark: #5e1817; } /* PURPLE */ [data-theme="purple"], [data-theme="purple-dark"] { --app-primary: #7460ee; --app-primary-hover: #5a45d8; --app-primary-light: #927fff; --app-primary-muted: rgba(116, 96, 238, 0.10); --app-deep: #3c2f7c; --app-deep-dark: #251c52; } /* MEGNA (turquesa) */ [data-theme="megna"], [data-theme="megna-dark"] { --app-primary: #00897b; --app-primary-hover: #006d62; --app-primary-light: #1aa294; --app-primary-muted: rgba(0, 137, 123, 0.10); --app-deep: #00564d; --app-deep-dark: #003832; } /* DEFAULT (gris neutro) */ [data-theme="default"], [data-theme="default-dark"] { --app-primary: #99abb4; --app-primary-hover: #7e8f97; --app-primary-light: #b3c1c8; --app-primary-muted: rgba(153, 171, 180, 0.10); --app-deep: #6b7c85; --app-deep-dark: #4a575e; } /* ========================================================================= DARK MODE — overrides para variantes -dark ------------------------------------------------------------------------- El "modo dark" de este panel NO invierte todas las surfaces (no es dark mode real). Solo oscurece sidebar, topbar y elementos de navegación. Las cards, modales y body siguen siendo claros. Replicado del comportamiento de los style-{color}-dark.css legacy. ========================================================================= */ [data-theme$="-dark"] .topbar .top-navbar .navbar-header { background-color: #272c33; } [data-theme$="-dark"] .left-sidebar { background: #272c33; } [data-theme$="-dark"] .sidebar-footer { background: #272c33; } /* Background de scroll-sidebar y sidebar-nav SOLO cuando el sidebar está expandido (sin .mini-sidebar). En mini-sidebar estos wrappers tienen overflow: visible y el hover-projected (260px) sale del .left-sidebar de 60px. Si tuvieran background oscuro, parecería que el sidebar entero se expandió a 280px al hover. */ [data-theme$="-dark"] body:not(.mini-sidebar) .scroll-sidebar, [data-theme$="-dark"] body:not(.mini-sidebar) .sidebar-nav { background: #272c33; } [data-theme$="-dark"] .sidebar-nav ul li a { color: #ffffff; } [data-theme$="-dark"] .sidebar-nav ul li a.active, [data-theme$="-dark"] .sidebar-nav ul li a:hover { background: #2f3133; } [data-theme$="-dark"] .sidebar-nav > ul > li > a.active { background: #242933 !important; } [data-theme$="-dark"] .sidebar-nav > ul > li.active > a { background: #2f3133; } [data-theme$="-dark"] .sidebar-footer a { color: #ffffff; } @media (min-width: 768px) { [data-theme$="-dark"] .mini-sidebar .sidebar-nav #sidebarnav > li > ul { background: #272c33; } /* Hover del item proyectado en mini-sidebar dark. !important para ganar sobre las reglas .active (sidebar item activo tiene background-color tinted que es casi transparente — al hacer hover sobre el active queda sin contraste con el fondo blanco de la página detrás). */ [data-theme$="-dark"] .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a, [data-theme$="-dark"] .mini-sidebar .sidebar-nav #sidebarnav > li.active:hover > a, [data-theme$="-dark"] .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a.active { background: #3a4047 !important; } } /* Mini-sidebar: al desplegar el sub-menú por hover, mostrar los .hide-menu de los sub-items. El legacy aplica display:none a TODOS los .hide-menu cuando .mini-sidebar está activo, y solo restaura el del item hover-directo (> a .hide-menu). Los hijos del sub-menú quedaban con texto oculto. */ @media (min-width: 768px) { .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul .hide-menu, .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul li a .hide-menu { display: inline !important; } } /* ========================================================================= OVERRIDES DE COMPONENTES ------------------------------------------------------------------------- Aplican los tokens primary a elementos del panel. Estas reglas SIEMPRE se ejecutan; lo que cambia entre temas es el VALOR de --app-primary. ========================================================================= */ /* Enlaces */ a { color: var(--app-primary); } a:hover, a:focus { color: var(--app-primary-hover); } /* Buttons primary/info */ .btn-primary, .btn-info { background-color: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; } .btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus { background-color: var(--app-primary-hover) !important; border-color: var(--app-primary-hover) !important; } /* Button outline (secondary action) */ .btn-outline-primary, .btn-default.btn-outline { background-color: transparent !important; border: 1.5px solid var(--app-primary) !important; color: var(--app-primary) !important; } .btn-outline-primary:hover, .btn-default.btn-outline:hover { background-color: var(--app-primary-muted) !important; } /* Button danger (semántico, NO cambia con tema — siempre rojo) */ .btn-danger { background-color: var(--app-error) !important; border-color: var(--app-error) !important; color: #ffffff !important; } /* Badges/labels primary (background tinted, texto color primary) */ .badge-primary, .label-primary { background-color: var(--app-primary-muted) !important; color: var(--app-primary) !important; } /* Text helpers */ .text-primary { color: var(--app-primary) !important; } .text-info { color: var(--app-primary) !important; } /* Form focus ring (border + 3px halo en muted) */ .form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, textarea:focus, select:focus { border-color: var(--app-primary) !important; box-shadow: 0 0 0 3px var(--app-primary-muted) !important; outline: none; } /* Sidebar item activo */ .sidebar .sidebar-nav ul li a.active, .sidebar .sidebar-nav ul li.active > a, .left-sidebar .sidebar-nav ul li a.active { color: var(--app-primary) !important; background-color: var(--app-primary-muted) !important; } /* Tabs activos (underline variant) */ .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-bottom-color: var(--app-primary) !important; } /* Pagination página activa */ .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover { background-color: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #ffffff !important; } /* Row hover en tablas */ .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: var(--app-primary-muted) !important; } /* Progress bar primaria (gradient primary → primary-light) */ .progress-bar-primary, .progress-bar-info { background-color: var(--app-primary) !important; background-image: linear-gradient(90deg, var(--app-primary), var(--app-primary-light)); }