/* ========================================================================= SMS Masivos — Modo oscuro (eje de modo) ------------------------------------------------------------------------- Capa SEMÁNTICA de superficies/texto/bordes + overrides de modo oscuro. Eje ORTOGONAL al acento (UsuarioPanelColor / [data-theme]). El acento (--app-primary, #1aa5fc etc.) NO cambia entre modos — solo cambian las superficies neutras. Por eso no hace falta crear blue-dark/green-dark…: son ~12 tokens redefinidos UNA vez bajo [data-mode="dark"]. Activación: atributo data-mode="light|dark" en , aplicado por un script inline blocking en view.general.php (anti-flash, igual que data-theme). La preferencia se decide SERVER-SIDE: se persiste por usuario en usuarioConf.UsuarioConfColorMode, se hidrata en $_SESSION["UsuarioColorMode"] (Sessions::updateUserSession) y PHP la hornea en el HTML. localStorage queda como espejo para feedback inmediato del toggle. Default light. Carga: view.generalassets.php::loadCSS(), DESPUÉS de smsmasivos-design-tokens-color.css y del chrome legacy (style-base, general.style, panel, menu) ⇒ gana por orden de cascada. Paleta dark armonizada con el modo oscuro de la documentación de la API. IMPORTANTE: todas las reglas de dark viven bajo [data-mode="dark"]. En light el selector no matchea ⇒ el modo claro queda IDÉNTICO (aditivo). ========================================================================= */ /* ========================================================================= 1. TOKENS SEMÁNTICOS — light (= valores neutrals actuales, sin regresión) ------------------------------------------------------------------------- Cualquier override de [data-mode="dark"] consume estos tokens; en light resuelven a los mismos valores que el panel ya usa. ========================================================================= */ :root { --app-bg: var(--app-neutral-100); /* #f8fafc — fondo de página */ --app-surface: var(--app-neutral-white); /* #ffffff — cards, modales, inputs */ --app-surface-2: var(--app-neutral-200); /* #f1f5f9 — sidebar, topbar, thead */ --app-surface-3: var(--app-neutral-300); /* #e2e8f0 — hover de filas/items, code */ --app-text: var(--app-neutral-800); /* #1e293b — texto principal */ --app-text-strong: var(--app-neutral-700); /* #334155 — headings */ --app-text-muted: var(--app-neutral-600); /* #64748b — captions, .text-muted */ --app-text-disabled: var(--app-neutral-500); /* #94a3b8 — disabled */ --app-border: var(--app-neutral-300); /* #e2e8f0 — bordes/dividers */ --app-border-strong: var(--app-neutral-400); /* #cbd5e1 — bordes hover/focus */ --app-shadow-color: rgba(0, 0, 0, 0.10); --app-overlay: rgba(15, 23, 42, 0.5); } /* ========================================================================= 2. TOKENS SEMÁNTICOS — dark (paleta armonizada con la documentación API) ========================================================================= */ [data-mode="dark"] { color-scheme: dark; /* Paleta "Graphite" — gris neutro-cálido (familia Tailwind zinc), inspirada en Vercel / Linear / shadcn / Material. Reemplaza el slate frío azulado anterior por un gris neutro; el accent de marca (--app-primary) queda intacto sobre el lienzo neutro (combo superficies-neutras + accent-de-color, muy usado en sitios modernos). Ganadora del banco de paletas (de feature/dark-palette-experiments). */ --app-bg: #18181b; /* canvas: página + sidebar + topbar (zinc-900) */ /* Variante "surface-darker" (v2, casi fusionado con --app-bg): la primera pasada (#232326) seguía leyendo con demasiado contraste. Se pide expresamente BAJO contraste vs --app-bg — casi imperceptible, apoyándose en que .card/.modal-content ya se delimitan por border-color, no por el fill. #1b1b1e mantiene el orden de elevación bg < surface < surface-2 < surface-3 (afecta TODOS los consumidores de --app-surface: cards, modales, dropdowns, tablas, dropify, .screen-wrap...). */ --app-surface: #1b1b1e; /* cards, modales, dropdowns, .screen-wrap */ --app-surface-2: #1f1f23; /* secundaria: thead, striped, addons */ --app-surface-3: #323238; /* hover / activo */ --app-slate: #2f3d4a; /* slate de acento dark: burbuja SMS, tarjeta/badge seleccionado, divisores del wizard, bordes de datasource */ --app-text: #d4d4d8; /* zinc-300 */ --app-text-strong: #fafafa; /* zinc-50 */ --app-text-muted: #a1a1aa; /* zinc-400 */ --app-text-disabled: #71717a; /* zinc-500 */ --app-border: #2e2e33; --app-border-strong: #3f3f46; /* zinc-700 */ --app-shadow-color: rgba(0, 0, 0, 0.45); --app-overlay: rgba(0, 0, 0, 0.65); /* Acento atenuado (reemplaza --app-primary ENTERO en dark, no solo el menú): el vívido original --app-primary-base "no convencía" repetido en todo el panel (menú, botones, links, badges, focus rings...) sin variación. Se deriva de --app-primary-base (nunca de --app-primary mismo — auto-referencia = ciclo inválido en CSS) mezclado con --app-text-muted, theme-agnostic. Con esto TODO consumidor existente de var(--app-primary) hereda el mismo tono suavizado de forma automática y consistente (sin tokens dedicados por componente). Contraste vs --app-bg ~6.4-6.5:1 en los 6 temas (pasa AA/AAA). */ --app-primary: color-mix(in srgb, var(--app-primary-base) 55%, var(--app-text-muted)); /* hover/light recalculados a partir del --app-primary YA atenuado (no del base) para conservar la relación "un paso más oscuro/claro" del botón; si quedaran fijos en el valor vívido original, el hover se vería más saturado que el propio botón en reposo — la misma inconsistencia que se está corrigiendo. */ --app-primary-hover: color-mix(in srgb, var(--app-primary) 82%, black); --app-primary-light: color-mix(in srgb, var(--app-primary) 75%, white); /* Accent tinteado (R1): el --app-primary-muted base es 10% (afinado para fondo claro) y casi no se ve sobre oscuro. color-mix lo deriva del --app-primary del tema activo ⇒ theme-agnostic. Variante "surface-highlight": el tinte azul (1.43:1 vs --app-bg, no pasa SC 1.4.11 3:1) se reemplaza por la superficie neutra elevada — el acento queda solo en texto/ícono/borde del ítem activo, desacoplando los dos requisitos de contraste que competían por ser el mismo hue. */ --app-primary-muted: var(--app-surface-3); /* Navy adaptado (R3): --app-deep (#14477e en blue) es ilegible sobre oscuro; se mapea al accent del tema (ya atenuado arriba) para que cualquier consumidor de var(--app-deep) se adapte solo (sustituye los parches manuales caso-por-caso del resto del archivo). Esto incluye los íconos/encabezados del menú (style-base.css:6744,6764) — ya no hacen falta overrides dedicados: heredan el mismo --app-primary atenuado que el resto del panel. */ --app-deep: var(--app-primary); /* Estados (R2): el background tinted sube a 0.18 (contraste sobre superficie oscura) y el FG se aclara al nivel 400 — los 500/600 afinados para claro "vibran" en dark. */ --app-success: #34d399; --app-error: #f87171; --app-warning: #fbbf24; --app-info: #60a5fa; --app-success-muted: rgba(16, 185, 129, 0.18); --app-error-muted: rgba(239, 68, 68, 0.18); --app-warning-muted: rgba(245, 158, 11, 0.18); --app-info-muted: rgba(59, 130, 246, 0.18); /* Tokens namespaced de subaccountDetails.css: se usan SIEMPRE con fallback (var(--sad-x, )) y NUNCA se definen ⇒ al darles valor aquí se adaptan de una vez sus 15 usos: bordes de tarjetas de permisos/ajustes, fondo del header de "Otros", textos secundarios y acento de las tabs del modal de edición. Namespaced ⇒ sin colisión con otras vistas. */ --sad-border-color: var(--app-border); --sad-text-light: var(--app-text-muted); --sad-bg-light: var(--app-surface-2); --sad-primary: var(--app-primary); } /* ========================================================================= 3. BASE — html / body / scrollbars ========================================================================= */ /* data-mode vive EN el , por eso el propio se selecciona con html[data-mode="dark"] (no con el combinador descendente, que buscaría un anidado e inexistente). El sí es descendiente. */ html[data-mode="dark"], [data-mode="dark"] body { background: var(--app-bg) !important; color: var(--app-text); } [data-mode="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-mode="dark"] ::-webkit-scrollbar-track { background: var(--app-surface-2); } [data-mode="dark"] ::-webkit-scrollbar-thumb { background: var(--app-border-strong); border-radius: var(--app-radius-full); border: 3px solid var(--app-surface-2); } [data-mode="dark"] { scrollbar-color: var(--app-border-strong) var(--app-surface-2); } /* Selección de texto (R5): por defecto el navegador usa su azul; la tematizamos con un tinte del accent del tema para coherencia en dark. */ [data-mode="dark"] ::selection { background: color-mix(in srgb, var(--app-primary) 32%, transparent); color: var(--app-text-strong); } /* ========================================================================= 4. SHELL — topbar, page-wrapper, sidebar ========================================================================= */ [data-mode="dark"] .page-wrapper, [data-mode="dark"] .container-fluid { background: var(--app-bg) !important; } /* Barra de encabezado de página (.page-titles): style-default.css:2483 la pinta #ffffff con borde inferior #cccccc. En dark se mimetiza con el fondo de página (#1b1d23, ~--app-bg) en vez de quedar como barra elevada — los títulos no deben resaltar sobre el contenido. */ [data-mode="dark"] .page-titles { background: var(--app-bg) !important; border-bottom-color: var(--app-border) !important; } /* Excepción: loadModalLayout (view.general.php:726) inyecta la barra .page-titles DENTRO de .modal-content > .modal-body. Ahí el #1b1d23 (color de página) rompe la unificación con la superficie del modal (--app-surface). Scoped al modal → transparente para mimetizarse con la superficie. Cubre todos los modales armados con el helper. */ [data-mode="dark"] .modal-content .page-titles { background: transparent !important; } [data-mode="dark"] .topbar { background: var(--app-bg) !important; border-bottom: 1px solid var(--app-border) !important; } [data-mode="dark"] .topbar .top-navbar .navbar-nav > .nav-item > .nav-link, [data-mode="dark"] .topbar .nav-link { color: var(--app-text); } [data-mode="dark"] .left-sidebar, [data-mode="dark"] .sidebar-footer { background: var(--app-bg) !important; } /* Fondo de scroll-sidebar y sidebar-nav SOLO en sidebar expandido. En mini-sidebar estos wrappers tienen overflow:visible y el proyectado en hover (260px) sale del rail de 60px; si tuvieran fondo oscuro parecería que el sidebar entero se expandió. Mismo guard que el legacy -color.css:114-120 (el data-theme$="-dark" legacy no aplica en este eje data-mode). */ [data-mode="dark"] body:not(.mini-sidebar) .scroll-sidebar, [data-mode="dark"] body:not(.mini-sidebar) .sidebar-nav { background: var(--app-bg) !important; } /* El borde derecho del sidebar es #14477e (deep blue) en style-base.css. Se adapta al borde neutro del modo oscuro. */ [data-mode="dark"] .left-sidebar { border-right-color: var(--app-border) !important; } /* Menú "cortado" en compacto: el body es `fix-sidebar mini-sidebar`, y el template revierte el sidebar a `position:absolute` SOLO en mini-sidebar (.mini-sidebar.fix-sidebar .left-sidebar{position:absolute}). Como #main-wrapper no tiene altura, el height:100% del sidebar no llega al fondo del documento y queda a la altura de su contenido ⇒ debajo asoma la página (#1a1d23). En full el sidebar ya es fixed (no se corta); en mini no. Forzamos fixed + 100vh (lo mismo que hace fix-sidebar en modo full) para que el fondo cubra la ventana completa en cualquier scroll. Solo-dark; el scroll del menú lo maneja el .scroll-sidebar interno (slimscroll). */ [data-mode="dark"] .left-sidebar { position: fixed !important; height: 100vh !important; } [data-mode="dark"] .sidebar-nav ul li a { color: var(--app-text); } [data-mode="dark"] .sidebar-nav ul li a:hover { background: var(--app-surface-3); } [data-mode="dark"] .sidebar-footer a { color: var(--app-text-muted); } /* Ícono top-level en reposo (style-base.css:6764, .sidebar-nav>ul>li>a i) y encabezado de sección (style-base.css:6744, .sidebar-nav ul li.nav-small-cap) heredan --app-deep, que arriba ya se redefine como el --app-primary atenuado ⇒ no hace falta ningún override dedicado aquí: quedan en el mismo tono suave que el resto del panel (antes: azul vívido, indistinguible del ítem activo). */ /* Sub-menú flotante en mini-sidebar — flota SOBRE el contenido ⇒ elevación (surface), no el bg del riel, para que se lea como panel emergente y no como extensión del rail. */ [data-mode="dark"] .mini-sidebar .sidebar-nav #sidebarnav > li > ul { background: var(--app-surface); } /* Ítem proyectado en hover (mini-sidebar). El sale del rail oscuro; le damos una superficie elevada (--app-border-strong #3a4047, por encima del rail --app-surface-2 y del hover genérico --app-surface-3) para leer como "tab". !important para ganar sobre el tinte de los ítems .active (que sí aplica aquí porque viene del acento data-theme). Espejo de -color.css:128-139. */ @media (min-width: 768px) { [data-mode="dark"] .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a, [data-mode="dark"] .mini-sidebar .sidebar-nav #sidebarnav > li.active:hover > a, [data-mode="dark"] .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a.active { background: var(--app-border-strong) !important; } } /* ========================================================================= 5. TIPOGRAFÍA — headings, texto principal, muted ------------------------------------------------------------------------- Los links/acentos quedan intactos (vienen de --app-primary). Aquí solo se invierten los neutros de texto que en light son oscuros. ========================================================================= */ [data-mode="dark"] h1, [data-mode="dark"] h2, [data-mode="dark"] h3, [data-mode="dark"] h4, [data-mode="dark"] h5, [data-mode="dark"] .page-titles h3, [data-mode="dark"] .card-title, [data-mode="dark"] .modal-title { color: var(--app-text-strong); } [data-mode="dark"] p, [data-mode="dark"] label, [data-mode="dark"] .control-label, [data-mode="dark"] li, [data-mode="dark"] span:not(.badge):not(.label), [data-mode="dark"] dt, [data-mode="dark"] dd { color: inherit; } [data-mode="dark"] small:not(.label), [data-mode="dark"] .text-muted, [data-mode="dark"] .card-subtitle { color: var(--app-text-muted) !important; } [data-mode="dark"] .text-dark { color: var(--app-text) !important; } /* Acento como TEXTO: el template hardcodea `html body .text-primary { color:#14477e !important }` (navy, specificity 0,1,2) que GANA al token `.text-primary{color:var(--app-primary)}` (0,1,0). Ese navy es legible en light (sobre blanco) pero se pierde sobre superficies dark. Restauramos el acento del panel (var(--app-primary), brillante y adaptado por tema). Selector (0,2,1) + !important vence al template (0,1,2). Va `body` y NO `html` por el eje data-mode (gotcha #1). */ [data-mode="dark"] body .text-primary { color: var(--app-primary) !important; } [data-mode="dark"] hr { border-color: var(--app-border); } /* ========================================================================= 6. COMPONENTES — cards, modales, dropdowns, forms, tablas, botones, etc. ========================================================================= */ /* Cards / cajas blancas / wells */ [data-mode="dark"] .card, [data-mode="dark"] .white-box, [data-mode="dark"] .card-radius { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text); } [data-mode="dark"] .well { background: var(--app-surface-2); border-color: var(--app-border); } /* Encabezado de card / acordeón (.card-header — Bootstrap 4, bootstrap.css:4488): usa rgba(0,0,0,0.03) + borde rgba(0,0,0,0.125), que sobre superficie oscura casi no se ven. Lo pasamos a un tinte blanco translúcido (mismo "ligeramente distinto" que en claro, pero adaptado a oscuro) + borde neutro. */ [data-mode="dark"] .card-header { background-color: rgba(255, 255, 255, 0.03); border-bottom-color: var(--app-border); color: var(--app-text); } /* Modales */ [data-mode="dark"] .modal-content { background: var(--app-surface) !important; color: var(--app-text); /* R4: en dark la sombra (rgba negro) es invisible; un borde 1px define el modal (el .modal-content base trae border:none). */ border: 1px solid var(--app-border) !important; } [data-mode="dark"] .modal-header { border-bottom-color: var(--app-border); } [data-mode="dark"] .modal-footer { border-top-color: var(--app-border); } [data-mode="dark"] .modal-backdrop.in { opacity: 0.7; } [data-mode="dark"] .close { color: var(--app-text); text-shadow: none; opacity: 0.7; } /* Dropdowns */ [data-mode="dark"] .dropdown-menu { background: var(--app-surface) !important; border-color: var(--app-border) !important; } [data-mode="dark"] .dropdown-menu > li > a, [data-mode="dark"] .dropdown-item { color: var(--app-text); } [data-mode="dark"] .dropdown-menu > li > a:hover, [data-mode="dark"] .dropdown-menu > li > a:focus, [data-mode="dark"] .dropdown-item:hover { background: var(--app-surface-3); color: var(--app-text); } [data-mode="dark"] .dropdown-divider, [data-mode="dark"] .dropdown-menu .divider { background-color: var(--app-border); } /* Dropdown de perfil en la topbar (.dropdown-menu.scale-up): sus items van dentro de , así que el selector genérico .dropdown-menu > li > a (hijo directo) NO los alcanza. style-default.css:2422 les fija color #6b7c85 y hover #EFF1F3, por eso en dark se veían distintos al resto del menú. Los alineamos al color de los items del menú principal (sidebar → --app-text). */ [data-mode="dark"] .topbar ul.dropdown-user li a { color: var(--app-text); } [data-mode="dark"] .topbar ul.dropdown-user li a:hover, [data-mode="dark"] .topbar ul.dropdown-user li a:hover i, [data-mode="dark"] .topbar ul.dropdown-user li a:active, [data-mode="dark"] .topbar ul.dropdown-user li a:active i { background: var(--app-surface-3); color: var(--app-text); } [data-mode="dark"] .topbar ul.dropdown-user li.divider { background-color: var(--app-border); } /* Inputs / forms */ [data-mode="dark"] .form-control, [data-mode="dark"] input[type="text"], [data-mode="dark"] input[type="email"], [data-mode="dark"] input[type="password"], [data-mode="dark"] input[type="number"], [data-mode="dark"] input[type="tel"], [data-mode="dark"] input[type="url"], [data-mode="dark"] input[type="search"], [data-mode="dark"] input[type="date"], [data-mode="dark"] input[type="time"], [data-mode="dark"] input[type="datetime-local"], [data-mode="dark"] textarea, [data-mode="dark"] select { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } [data-mode="dark"] .form-control::placeholder { color: var(--app-text-muted); } [data-mode="dark"] .form-control:disabled, [data-mode="dark"] .form-control[readonly] { background: var(--app-surface-2) !important; color: var(--app-text-disabled) !important; } [data-mode="dark"] .input-group-addon { background: var(--app-surface-2); border-color: var(--app-border); color: var(--app-text-muted); } /* Tablas */ [data-mode="dark"] .table, [data-mode="dark"] table.dataTable { color: var(--app-text); } [data-mode="dark"] .table td, [data-mode="dark"] .table th { border-color: var(--app-border) !important; color: var(--app-text); } [data-mode="dark"] .table thead th, [data-mode="dark"] table.dataTable thead th { color: var(--app-text-strong); border-bottom-color: var(--app-border) !important; } [data-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd), [data-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--app-surface-2); } /* DataTables core pinta las filas en #ffffff y la fila seleccionada en #B0BED9. Esto cubre TODAS las DataTables del panel (agendas, reportes, contactos…). */ [data-mode="dark"] table.dataTable tbody tr { background-color: var(--app-surface) !important; } [data-mode="dark"] table.dataTable tbody td { color: var(--app-text); border-color: var(--app-border) !important; } [data-mode="dark"] table.dataTable tbody tr.selected, [data-mode="dark"] table.dataTable tbody tr.selected td { background-color: var(--app-surface-3) !important; } /* Botones secundarios (los primary/info/danger vienen del acento — intactos). .btn-light no está definido (clase de BS4/5; este template es BS3) ⇒ queda como .btn base transparente y se veía blanco sobre el modal. .modalcancelar = cancelar de modales. .btn-secondary (cancelar gris) solo dentro de modales, para NO tocar los toggles .btn-group label.btn-secondary. */ [data-mode="dark"] .btn-default, [data-mode="dark"] .btn-white, [data-mode="dark"] .btn-white.disabled, [data-mode="dark"] .btn-light, [data-mode="dark"] .modalcancelar, [data-mode="dark"] .modal-content .btn-secondary, [data-mode="dark"] .btn-outline-secondary { background: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border-strong) !important; } [data-mode="dark"] .btn-default:hover, [data-mode="dark"] .btn-white:hover, [data-mode="dark"] .btn-light:hover, [data-mode="dark"] .modalcancelar:hover, [data-mode="dark"] .modal-content .btn-secondary:hover, [data-mode="dark"] .btn-outline-secondary:hover { background: var(--app-surface-3) !important; } /* El chevron del perfil usa .btn-outline-secondary como ícono — solo color */ [data-mode="dark"] .profile-account-icon.btn-outline-secondary { background: transparent !important; border: none !important; color: var(--app-text-muted) !important; } /* .btn-danger: en light es rojo sólido (--app-error, color.css:193). En dark lo pasamos a relleno rojo translúcido (#ef44441f ≈ 12% sobre la superficie) con borde rojo, para que pese menos visualmente sin perder la semántica. No hay estados :hover/:focus propios ⇒ esta regla base cubre todo. */ [data-mode="dark"] .btn-danger { background-color: #ef44441f !important; border-color: var(--app-error) !important; color: #ffffff !important; } /* .btn-success: mismo problema que .btn-danger tenía — en light es verde menta sólido hardcoded (#49DA96, style-base.css:1356-1384, NI SIQUIERA usa el token --app-success) + texto blanco. Mismo criterio: relleno translúcido (reusa --app-success-muted, ya definido) + borde --app-success, en vez del fill sólido que cansaba la vista. */ [data-mode="dark"] .btn-success { background-color: var(--app-success-muted) !important; border-color: var(--app-success) !important; color: #ffffff !important; } /* Tabs */ [data-mode="dark"] .nav-tabs { border-bottom-color: var(--app-border); } [data-mode="dark"] .nav-tabs > li > a { color: var(--app-text-muted); } [data-mode="dark"] .nav-tabs > li.active > a, [data-mode="dark"] .nav-tabs > li.active > a:focus, [data-mode="dark"] .nav-tabs > li.active > a:hover { color: var(--app-text) !important; } /* Tab activo estilo Bootstrap 4 (.nav-link.active — mycampaigns, reports, etc.): bootstrap.css:3889 lo pinta background-color:#fff con bordes claros, y la regla BS3 de arriba NO lo alcanza (aquí el .active va en el , no en el

). Lo hacemos transparente para que se mimetice con el fondo. NO tocamos border-bottom- color → el subrayado activo de .customtab (#99abb4) se conserva. */ [data-mode="dark"] .nav-tabs .nav-link.active, [data-mode="dark"] .nav-tabs .nav-item.show .nav-link { color: var(--app-text); background-color: var(--app-surface-3); border-top-color: var(--app-border); border-left-color: var(--app-border); border-right-color: var(--app-border); } /* Tabs verticales (.vtabs.customvtab .tabs-vertical — cuenta/myaccount; style-default.css:4757,4778): items inactivos en #263238 (invisible sobre el fondo oscuro) → muted legible; activo/hover/focus con fondo blanco + texto/borde #99abb4 → caja oscura elevada + acento (selected). Se quita el outline punteado del focus (el border-right + bg ya indican el estado). */ [data-mode="dark"] .vtabs .tabs-vertical li .nav-link { color: var(--app-text-muted) !important; } [data-mode="dark"] .customvtab .tabs-vertical li .nav-link.active, [data-mode="dark"] .customvtab .tabs-vertical li .nav-link:focus, [data-mode="dark"] .customvtab .tabs-vertical li .nav-link:hover { background: var(--app-surface-3) !important; color: var(--app-primary) !important; border-right-color: var(--app-primary) !important; outline: none !important; } /* Relleno completo con var(--app-primary) sólido + texto blanco cansaba la vista (glare: fondo saturado + texto blanco apilados). Combo de reemplazo (dado por el user): background var(--app-slate), border var(--app-primary), texto #e3f2fd fijo (mismo valor que .label-light-primary, no deriva por tema). Bg y borde SÍ son theme-adaptive (reusan tokens existentes), solo el texto es literal. General para TODO .btn-primary/.btn-info (CTAs como Siguiente/Comprar mensajes, y los toggles que reusan la misma clase para marcar selección — campaignType, paginate-business, btn-filter-time — quedan cubiertos por el selector base, sin necesidad de listarlos aparte) + los estados "seleccionado/ activo" de plugins que no son botones (pagination, select2, DataTables, daterangepicker). Las progress bars NO se tocan (no llevan texto encima). */ [data-mode="dark"] .btn-primary, [data-mode="dark"] .btn-info, [data-mode="dark"] .pagination > .active > a, [data-mode="dark"] .pagination > .active > span, [data-mode="dark"] .pagination > .active > a:hover, [data-mode="dark"] .pagination > .active > span:hover, [data-mode="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], [data-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, [data-mode="dark"] .daterangepicker td.active, [data-mode="dark"] .daterangepicker td.active:hover, [data-mode="dark"] .daterangepicker .ranges li.active { background-color: var(--app-slate) !important; border-color: var(--app-primary) !important; color: #e3f2fd !important; } /* Solo :hover (feedback pasajero de mouse, termina al sacar el cursor). :focus NO se toca acá — al hacer click, el botón (ej. .campaignType) queda enfocado Y seleccionado a la vez; si :focus tuviera un look distinto del estado "seleccionado" en reposo (arriba), se ve un parpadeo/discrepancia de color apenas se hace click, y persiste igual mientras el botón conserva el foco. */ [data-mode="dark"] .btn-primary:hover, [data-mode="dark"] .btn-info:hover { background-color: var(--app-border-strong) !important; border-color: var(--app-primary) !important; color: #e3f2fd !important; } /* bootstrap.min.css:6 define el anillo de foco con azul fijo sin adaptar (.btn:focus → rgba(0,123,255,.25)) — se ve como un resplandor azul desalineado con la paleta. Se retinta con --app-primary. Excluye .btn-primary/.btn-info (mismo motivo que arriba: no debe divergir del estado "seleccionado"). */ [data-mode="dark"] .btn.focus, [data-mode="dark"] .btn:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 25%, transparent) !important; } [data-mode="dark"] .btn-primary.focus, [data-mode="dark"] .btn-primary:focus, [data-mode="dark"] .btn-info.focus, [data-mode="dark"] .btn-info:focus { box-shadow: none !important; } /* Paginación (la página activa se pinta arriba) */ [data-mode="dark"] .pagination > li > a, [data-mode="dark"] .pagination > li > span { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text-strong); } [data-mode="dark"] .pagination > li > a:hover { background: var(--app-surface-3); } /* Code / pre / kbd */ [data-mode="dark"] code, [data-mode="dark"] kbd, [data-mode="dark"] pre, [data-mode="dark"] samp { background: var(--app-surface-3) !important; color: var(--app-text); border-color: var(--app-border); } /* Alerts — el texto de hue oscuro hardcodeado (#065f46…) no contrasta en dark; lo subimos al color claro del propio estado. El background usa el muted ya engrosado arriba. */ [data-mode="dark"] .alert-success { color: var(--app-success); } [data-mode="dark"] .alert-danger { color: var(--app-error); } [data-mode="dark"] .alert-warning { color: var(--app-warning); } [data-mode="dark"] .alert-info { color: var(--app-info); } /* .alert-primary: bootstrap la define hardcoded (#cce5ff/#004085/#b8daff) y NO usa token como las demás alert-*. Sin relleno: transparent (no se puede solo OMITIR el background, porque entonces se asoma el #cce5ff azul-claro de bootstrap). Solo borde + texto acento. */ [data-mode="dark"] .alert-primary { background: transparent !important; border-color: var(--app-border) !important; color: var(--app-primary) !important; } /* Bordes/cabeceras de paneles y list-groups genéricos */ [data-mode="dark"] .panel, [data-mode="dark"] .list-group-item { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } [data-mode="dark"] .panel-heading, [data-mode="dark"] .panel-footer { background: var(--app-surface-2); border-color: var(--app-border); } /* Utilidades de fondo claro repartidas por todo el panel — mapearlas a la superficie evita el "whack-a-mole" de cajas blancas en cada vista. */ [data-mode="dark"] .bg-white, [data-mode="dark"] .bg-light, [data-mode="dark"] .white-bg, [data-mode="dark"] .box { background: var(--app-bg) !important; color: var(--app-text); } /* Datasource (body.datasource-view): sus cajas usan un gris ligeramente más claro (#1e2228, ~--app-surface) que el #1b1d23 global. Scope por la clase del ⇒ especificidad (0,3,0) gana sobre la regla global (0,2,0). */ [data-mode="dark"] .datasource-view .bg-white, [data-mode="dark"] .datasource-view .bg-light, [data-mode="dark"] .datasource-view .white-bg, [data-mode="dark"] .datasource-view .box { background: var(--app-surface) !important; color: var(--app-text); } /* Tarjetas de fuentes de datos / Google contacts / Google sheet (datasource y sendby): el borde fuente es #E5E5E5 (gris claro, sendbymain.css:69). En dark pasa a slate #2f3d4a. La especificidad (0,2,0) gana sobre la fuente (0,1,0). */ [data-mode="dark"] .googlecontacts-wrapper, [data-mode="dark"] .carddatasources-wrapper, [data-mode="dark"] .googlesheet-wrapper { border-color: var(--app-slate); } /* Hover: la animación de barras diagonales usa #F6F6F6 (claro, sendbymain.css:78) que en dark se ve mal. Mismo patrón pero con un shimmer translúcido claro, sutil sobre el fondo oscuro. Solo se cambia el color del gradient; la animación "stripes" (que mueve background-position) se conserva. */ [data-mode="dark"] .googlecontacts-wrapper:hover, [data-mode="dark"] .carddatasources-wrapper:hover, [data-mode="dark"] .googlesheet-wrapper:hover { background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent); } /* ========================================================================= 7. PLUGINS GLOBALES (Select2, nice-select, DataTables, Dropify, SweetAlert, Toastr, Datepicker, x-editable). Solo wrappers visibles. ========================================================================= */ /* Select2 */ [data-mode="dark"] .select2-container--default .select2-selection--single, [data-mode="dark"] .select2-container--default .select2-selection--multiple { background: var(--app-surface) !important; border-color: var(--app-border) !important; } [data-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--app-text); } [data-mode="dark"] .select2-dropdown { background: var(--app-surface); border-color: var(--app-border); } [data-mode="dark"] .select2-results__option { color: var(--app-text); } /* .select2-results__option--highlighted[aria-selected]: ver bloque "seleccionado/ activo" (slate+borde primary+texto claro) más arriba en este archivo. */ [data-mode="dark"] .select2-search--dropdown .select2-search__field { background: var(--app-surface-2); color: var(--app-text); border-color: var(--app-border); } [data-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--app-surface-3); border-color: var(--app-border); color: var(--app-text); } /* nice-select */ [data-mode="dark"] .nice-select { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } [data-mode="dark"] .nice-select .list { background: var(--app-surface); border-color: var(--app-border); } [data-mode="dark"] .nice-select .option { color: var(--app-text); } [data-mode="dark"] .nice-select .option:hover, [data-mode="dark"] .nice-select .option.focus, [data-mode="dark"] .nice-select .option.selected.focus { background: var(--app-surface-3); } /* country-select (selector de país con bandera — countrySelect.css). Plugin global (autorespuesta/automatizaciones, whatsappinstancia, restapi, etc.) → se tematiza una vez. El base no lleva type → la regla global input[type=text] no lo alcanza; aquí se cubre vía .country-select input. El dropdown .country-list era blanco con borde #ccc. */ [data-mode="dark"] .country-select input, [data-mode="dark"] .country-select input[type=text] { background-color: var(--app-surface) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } [data-mode="dark"] .country-select .country-list { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text); } [data-mode="dark"] .country-select .country-list .divider { border-bottom-color: var(--app-border) !important; } [data-mode="dark"] .country-select .country-list .country.highlight { background-color: rgba(255, 255, 255, 0.06) !important; } [data-mode="dark"] .country-select.inside .flag-dropdown:hover .selected-flag { background-color: rgba(255, 255, 255, 0.06) !important; } [data-mode="dark"] .country-select .selected-flag .arrow { border-top-color: var(--app-text-muted) !important; } [data-mode="dark"] .country-select .selected-flag .arrow.up { border-bottom-color: var(--app-text-muted) !important; } /* DataTables — controles (la tabla en sí hereda de .table) */ [data-mode="dark"] .dataTables_wrapper, [data-mode="dark"] .dataTables_info, [data-mode="dark"] .dataTables_length, [data-mode="dark"] .dataTables_filter { color: var(--app-text-muted); } [data-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--app-text) !important; background: var(--app-surface); border-color: var(--app-border); } /* .paginate_button.current: ver bloque "seleccionado/activo" más arriba en este archivo (slate+borde primary+texto claro). */ /* Overlay "Procesando" al recargar la tabla: jquery.dataTables.min.css:372 lo pinta con un gradient blanco (rgba(255,255,255,0.9)) + color #333. El core carga después de dark.css ⇒ !important. Replicamos el gradient con la superficie oscura (rgb(30,34,41) = #1e2229 = --app-surface) para que el difuminado sea dark. */ [data-mode="dark"] .dataTables_wrapper .dataTables_processing { color: var(--app-text) !important; background-color: var(--app-surface) !important; background: linear-gradient(to right, rgba(30, 34, 41, 0) 0%, rgba(30, 34, 41, 0.92) 25%, rgba(30, 34, 41, 0.92) 75%, rgba(30, 34, 41, 0) 100%) !important; } /* Dropify */ [data-mode="dark"] .dropify-wrapper { background: var(--app-surface-2); color: var(--app-text-muted); border-color: var(--app-border); } [data-mode="dark"] .dropify-wrapper .dropify-message span.file-icon { color: var(--app-text-muted); } /* Estado con archivo cargado: el plugin pinta el preview/render en #FFF (dropify.css:136,153) → caja blanca al cargar un archivo. (.dropify-wrapper input es opacity:0, no es lo visible.) El overlay .dropify-infos ya es rgba(0,0,0,.7) con texto blanco, se respeta. */ [data-mode="dark"] .dropify-wrapper .dropify-preview { background-color: var(--app-surface-2) !important; } [data-mode="dark"] .dropify-wrapper .dropify-preview .dropify-render img { background-color: var(--app-surface-2) !important; } [data-mode="dark"] .dropify-wrapper .dropify-preview .dropify-render i { color: var(--app-text-muted) !important; } /* SweetAlert (v1 .sweet-alert y v2 .swal2-popup) */ [data-mode="dark"] .sweet-alert, [data-mode="dark"] .swal2-popup { background: var(--app-surface) !important; color: var(--app-text) !important; border: 1px solid var(--app-border) !important; /* R4: definición sin depender de sombra */ } [data-mode="dark"] .sweet-alert h2, [data-mode="dark"] .sweet-alert p, [data-mode="dark"] .swal2-title, [data-mode="dark"] .swal2-html-container { color: var(--app-text) !important; } /* Toastr — mantiene los colores de estado; solo asegura texto legible */ [data-mode="dark"] #toast-container > div { box-shadow: 0 0 12px var(--app-shadow-color); } /* Bootstrap Datepicker */ [data-mode="dark"] .datepicker, [data-mode="dark"] .datepicker-dropdown { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } [data-mode="dark"] .datepicker table tr td, [data-mode="dark"] .datepicker table tr th { color: var(--app-text); } [data-mode="dark"] .datepicker table tr td.day:hover, [data-mode="dark"] .datepicker table tr td.focused { background: var(--app-surface-3); } [data-mode="dark"] .datepicker table tr td.old, [data-mode="dark"] .datepicker table tr td.new { color: var(--app-text-disabled); } /* x-editable popover */ [data-mode="dark"] .editable-container.popover, [data-mode="dark"] .popover { background: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } [data-mode="dark"] .popover-title { background: var(--app-surface-2); color: var(--app-text-strong); border-bottom-color: var(--app-border); } [data-mode="dark"] .popover.bottom > .arrow:after { border-bottom-color: var(--app-surface); } [data-mode="dark"] .popover.top > .arrow:after { border-top-color: var(--app-surface); } /* Popover Bootstrap 4 (markup .popover-header/.popover-body + flechas .bs-popover-*): el plugin los pinta claros — header #f7f7f7, body texto #212529 (invisible en dark), arrow ::after #fff. El BS3 (.popover-title/.top>.arrow) ya está arriba; esto cubre el BS4. */ [data-mode="dark"] .popover-header { background-color: var(--app-surface-2) !important; color: var(--app-text-strong) !important; border-bottom-color: var(--app-border) !important; } [data-mode="dark"] .popover-body { color: var(--app-text) !important; } /* Flecha: ::after = fondo del popover (era #fff), ::before = borde (era rgba(0,0,0,.25)) */ [data-mode="dark"] .popover.bs-popover-top .arrow::after, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="top"] .arrow::after { border-top-color: var(--app-surface) !important; } [data-mode="dark"] .popover.bs-popover-bottom .arrow::after, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="bottom"] .arrow::after { border-bottom-color: var(--app-surface) !important; } [data-mode="dark"] .popover.bs-popover-left .arrow::after, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="left"] .arrow::after { border-left-color: var(--app-surface) !important; } [data-mode="dark"] .popover.bs-popover-right .arrow::after, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="right"] .arrow::after { border-right-color: var(--app-surface) !important; } [data-mode="dark"] .popover.bs-popover-top .arrow::before, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="top"] .arrow::before { border-top-color: var(--app-border) !important; } [data-mode="dark"] .popover.bs-popover-bottom .arrow::before, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--app-border) !important; } [data-mode="dark"] .popover.bs-popover-left .arrow::before, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="left"] .arrow::before { border-left-color: var(--app-border) !important; } [data-mode="dark"] .popover.bs-popover-right .arrow::before, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="right"] .arrow::before { border-right-color: var(--app-border) !important; } /* Conector del header en placement bottom (era #f7f7f7) */ [data-mode="dark"] .popover.bs-popover-bottom .popover-header::before, [data-mode="dark"] .popover.bs-popover-auto[x-placement^="bottom"] .popover-header::before { border-bottom-color: var(--app-surface-2) !important; } /* ========================================================================= 8. ENVÍOS — smart-wizard "Crea tu campaña" + previsualización de teléfono ------------------------------------------------------------------------- El wizard es componente compartido (varios flujos multi-paso). Sus CSS (smart_wizard*.css, sendbygeneral.css, sendbymain.css) pintan blanco hardcodeado y cargan DESPUÉS de este archivo ⇒ override con !important. Criterio de unificación: los paneles ESTRUCTURALES del wizard van a ras de la página (--app-bg, sin costura entre panel y fondo); el mockup del teléfono se unifica como pantalla oscura cohesiva (la burbuja azul del SMS se mantiene; el bisel .screen-preview es un gradiente gris y se respeta). ========================================================================= */ /* Paneles estructurales del wizard → mismo color que la página (unificado) */ [data-mode="dark"] .sw-theme-dots, [data-mode="dark"] .sw-theme-default, [data-mode="dark"] .sw-theme-dots .sw-container, [data-mode="dark"] .sw-theme-dots .step-content, [data-mode="dark"] .sw-theme-default .step-content, [data-mode="dark"] .sw-theme-dots .sw-toolbar, [data-mode="dark"] .sw-theme-default .sw-toolbar, [data-mode="dark"] .sw-toolbar-bottom { background: var(--app-bg) !important; color: var(--app-text); } [data-mode="dark"] .sw-theme-dots > ul.step-anchor { background: transparent !important; } [data-mode="dark"] .sw-toolbar { border-top-color: var(--app-border) !important; } /* El plugin (smart_wizard.css:66,70 y smart_wizard_theme_dots.css:36,40) define su PROPIO border #ddd !important en .sw-toolbar-top/.sw-toolbar-bottom con la misma especificidad que la regla de arriba (2 clases) — ganaba por orden de carga, dejando un borde gris claro "colgado" arriba del botón Siguiente (mucho más visible en dark). Se iguala el selector exacto del plugin para ganar por especificidad (3 clases), sin depender del orden de carga. */ [data-mode="dark"] .sw-theme-dots .sw-toolbar-top, [data-mode="dark"] .sw-theme-default .sw-toolbar-top { border-bottom-color: var(--app-border) !important; } [data-mode="dark"] .sw-theme-dots .sw-toolbar-bottom, [data-mode="dark"] .sw-theme-default .sw-toolbar-bottom { border-top-color: var(--app-border) !important; border-bottom-color: var(--app-border) !important; } /* Excepción: el wizard de automatizaciones vive dentro del modal #automations-details (view.automatizaciones.php:127), no full-page como el de envíos. Ahí el --app-bg de la regla anterior no se funde con la superficie del modal (.modal-content = --app-surface). Scope al id del modal → #1e2228 (≈ --app-surface) para que el wizard se mimetice con el resto del modal. El id (1,x,0) gana en especificidad a la regla global (0,x,0). */ [data-mode="dark"] #automations-details .sw-theme-dots, [data-mode="dark"] #automations-details .sw-theme-default, [data-mode="dark"] #automations-details .sw-theme-dots .sw-container, [data-mode="dark"] #automations-details .sw-theme-dots .step-content, [data-mode="dark"] #automations-details .sw-theme-default .step-content, [data-mode="dark"] #automations-details .sw-theme-dots .sw-toolbar, [data-mode="dark"] #automations-details .sw-theme-default .sw-toolbar, [data-mode="dark"] #automations-details .sw-toolbar-bottom { background: var(--app-surface) !important; color: var(--app-text); } /* Divisores que el smart-wizard inyecta por JS con #e5e5e5 (claro): el de abajo de los pasos (#smartwizard-container-steps) y el de arriba de la barra de botones (.sw-btn-group). El