/* ════════════════════════════════════════════════════════════════════ WhasaaS — Theme system: Light / Dark / Auto ──────────────────────────────────────────────────────────────────── Cómo funciona: - El elemento recibe `data-theme="light"`, "dark", o "auto" - El usuario elige desde el toggle en el FAB; se guarda en localStorage - Auto sigue prefers-color-scheme del SO - Las variables se aplican a TODAS las vistas que usan var(--bg-app), etc. - Para vistas con hex hardcoded, override por selector específico abajo ════════════════════════════════════════════════════════════════════ */ /* ─── DARK (default — sin override; usa los valores de app.css) ─── */ /* ─── LIGHT mode ─── */ :root[data-theme="light"] { --green: #00A884; --green-dark: #008C70; --green-light: #25D366; --blue-tick: #34B7F1; --bg-app: #EFEAE2; /* fondo papel tapiz WA Web light */ --bg-panel: #FFFFFF; --bg-teal: #F0F2F5; --bg-hover: #F5F6F6; --bg-input: #FFFFFF; --bg-search: #F0F2F5; --bg-msg-out: #D9FDD3; /* verde clarito WA */ --bg-msg-in: #FFFFFF; --text: #111B21; --text-2: #54656F; --text-3: #8696A0; --border: rgba(11,20,26,.10); --shadow: 0 1px 3px rgba(11,20,26,.13); /* SuperAdmin shell tokens (sa-*) — usan --bg, --surface, etc en algunas vistas */ --bg: #F6F8FA; --surface: #FFFFFF; --surface2: #F6F8FA; --border2: #E1E4E8; --accent: #7C3AED; --accent-h: #6D28D9; --accent-bg: rgba(124,58,237,0.10); --accent-bd: rgba(124,58,237,0.25); } /* ─── AUTO mode → sigue el sistema operativo ─── */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --green: #00A884; --green-dark: #008C70; --green-light: #25D366; --blue-tick: #34B7F1; --bg-app: #EFEAE2; --bg-panel: #FFFFFF; --bg-teal: #F0F2F5; --bg-hover: #F5F6F6; --bg-input: #FFFFFF; --bg-search: #F0F2F5; --bg-msg-out: #D9FDD3; --bg-msg-in: #FFFFFF; --text: #111B21; --text-2: #54656F; --text-3: #8696A0; --border: rgba(11,20,26,.10); --shadow: 0 1px 3px rgba(11,20,26,.13); --bg: #F6F8FA; --surface: #FFFFFF; --surface2: #F6F8FA; --border2: #E1E4E8; } } /* ════════════════════════════════════════════════════════════════════ Overrides para vistas con HEX hardcoded (no usan variables CSS) Muchas vistas admin/sa tienen background:#0d1117, #161b22, etc inline. Los reemplazamos solo cuando data-theme="light" esté activo. ════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] body, :root[data-theme="light"] .admin-shell, :root[data-theme="light"] .sa-shell { background-color: #F6F8FA !important; color: #1F2328 !important; } /* Sidebars (admin-nav, sa-nav, settings-sidebar) — todas con #161b22 dark */ :root[data-theme="light"] .admin-nav, :root[data-theme="light"] .sa-nav, :root[data-theme="light"] .settings-sidebar { background-color: #FFFFFF !important; border-right-color: #E1E4E8 !important; } :root[data-theme="light"] .admin-nav .nav-item, :root[data-theme="light"] .sa-nav .sa-nav-item, :root[data-theme="light"] .settings-sidebar a { color: #57606A !important; } :root[data-theme="light"] .admin-nav .nav-item:hover, :root[data-theme="light"] .sa-nav .sa-nav-item:hover, :root[data-theme="light"] .settings-sidebar a:hover { background: rgba(0,0,0,0.05) !important; color: #1F2328 !important; } :root[data-theme="light"] .admin-nav .nav-item.active, :root[data-theme="light"] .sa-nav .sa-nav-item.active, :root[data-theme="light"] .settings-sidebar a.active { background: rgba(0,168,132,0.12) !important; color: #007a62 !important; } :root[data-theme="light"] .nav-section-title, :root[data-theme="light"] .sa-nav-section, :root[data-theme="light"] .s-title { color: #8B949E !important; } :root[data-theme="light"] .admin-brand, :root[data-theme="light"] .sa-brand { border-bottom-color: #E1E4E8 !important; } :root[data-theme="light"] .admin-brand-name, :root[data-theme="light"] .sa-brand-name { color: #1F2328 !important; } /* Topbars */ :root[data-theme="light"] .admin-topbar, :root[data-theme="light"] .sa-topbar { background-color: #FFFFFF !important; border-bottom-color: #E1E4E8 !important; color: #1F2328 !important; } :root[data-theme="light"] .admin-topbar-title, :root[data-theme="light"] .sa-topbar-title { color: #1F2328 !important; } /* Content area + cards */ :root[data-theme="light"] .admin-content, :root[data-theme="light"] .sa-content, :root[data-theme="light"] .settings-main { background-color: #F6F8FA !important; color: #1F2328 !important; } :root[data-theme="light"] .card, :root[data-theme="light"] .panel, :root[data-theme="light"] .metric-card, :root[data-theme="light"] .form-card { background-color: #FFFFFF !important; border-color: #E1E4E8 !important; color: #1F2328 !important; } :root[data-theme="light"] .metric-value { color: #1F2328 !important; } :root[data-theme="light"] .metric-label, :root[data-theme="light"] .metric-sub { color: #57606A !important; } /* Form elements: dark hex inputs → light */ :root[data-theme="light"] .form-input, :root[data-theme="light"] .form-control, :root[data-theme="light"] .form-control-builder, :root[data-theme="light"] .input-field, :root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="email"], :root[data-theme="light"] input[type="password"], :root[data-theme="light"] input[type="number"], :root[data-theme="light"] input[type="tel"], :root[data-theme="light"] input[type="search"], :root[data-theme="light"] input[type="url"], :root[data-theme="light"] input[type="date"], :root[data-theme="light"] input[type="time"], :root[data-theme="light"] select, :root[data-theme="light"] textarea { background-color: #F6F8FA !important; border-color: #D0D7DE !important; color: #1F2328 !important; } :root[data-theme="light"] .form-input::placeholder, :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: #8B949E !important; } :root[data-theme="light"] .form-input:focus, :root[data-theme="light"] input:focus, :root[data-theme="light"] textarea:focus, :root[data-theme="light"] select:focus { border-color: #00A884 !important; box-shadow: 0 0 0 3px rgba(0,168,132,0.18) !important; } /* Tablas */ :root[data-theme="light"] table { color: #1F2328 !important; } :root[data-theme="light"] th { background-color: #F6F8FA !important; color: #57606A !important; border-bottom-color: #E1E4E8 !important; } :root[data-theme="light"] td { border-bottom-color: rgba(0,0,0,0.06) !important; } :root[data-theme="light"] tr:hover { background-color: #F6F8FA !important; } /* Modales (genérico) */ :root[data-theme="light"] .modal-content, :root[data-theme="light"] .custom-modal-content, :root[data-theme="light"] .qr-box, :root[data-theme="light"] .modal-dialog, :root[data-theme="light"] .dialog { background-color: #FFFFFF !important; color: #1F2328 !important; border-color: #E1E4E8 !important; } :root[data-theme="light"] .modal-backdrop, :root[data-theme="light"] .custom-modal { background-color: rgba(0,0,0,0.35) !important; } /* Botones genéricos: btn-ghost, btn-outline */ :root[data-theme="light"] .btn-ghost { background-color: #F6F8FA !important; color: #57606A !important; border-color: #D0D7DE !important; } :root[data-theme="light"] .btn-ghost:hover { background-color: #EFF1F4 !important; color: #1F2328 !important; } /* Chat — overrides especiales para que se vea bien sobre el fondo claro */ :root[data-theme="light"] .wa-sidebar { background-color: #FFFFFF !important; border-right-color: #E1E4E8 !important; } :root[data-theme="light"] .wa-sidebar-hdr { background-color: #F0F2F5 !important; } :root[data-theme="light"] .wa-chat-hdr { background-color: #F0F2F5 !important; border-bottom-color: #E1E4E8 !important; } :root[data-theme="light"] .wa-search-wrap { background-color: #FFFFFF !important; } :root[data-theme="light"] .wa-search-inner { background-color: #F0F2F5 !important; } :root[data-theme="light"] .wa-item:hover { background-color: #F5F6F6 !important; } :root[data-theme="light"] .wa-item.active { background-color: #F0F2F5 !important; } :root[data-theme="light"] .wa-bubble.out { background-color: #D9FDD3 !important; color: #111B21 !important; } :root[data-theme="light"] .wa-bubble.in { background-color: #FFFFFF !important; color: #111B21 !important; border: 1px solid rgba(0,0,0,0.04); } :root[data-theme="light"] .wa-bubble__time { color: #667781 !important; } :root[data-theme="light"] .wa-input-wrap, :root[data-theme="light"] .wa-input-field { background-color: #FFFFFF !important; color: #111B21 !important; } :root[data-theme="light"] .wa-input-container { background-color: #F0F2F5 !important; border-top: 1px solid #E1E4E8 !important; } /* CRM panel side */ :root[data-theme="light"] .crm-panel { background-color: #FFFFFF !important; border-left-color: #E1E4E8 !important; } /* Hamburger button — invertir para que se vea bien en fondo claro */ :root[data-theme="light"] .wh-hamburger { background: rgba(255,255,255,0.95) !important; color: #1F2328 !important; border-color: rgba(0,0,0,0.1) !important; } /* ════════════════════════════════════════════════════════════════════ Theme toggle UI (botón sol/luna) ════════════════════════════════════════════════════════════════════ */ .wh-theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: inherit; width: 36px; height: 36px; border-radius: 50%; transition: background .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; } .wh-theme-toggle:hover { background: rgba(127,127,127,0.15); } .wh-theme-toggle:active { transform: scale(.92); } .wh-theme-toggle svg { width: 20px; height: 20px; fill: currentColor; transition: transform .35s cubic-bezier(.34,1.56,.64,1); } /* Animación rotativa al cambiar */ .wh-theme-toggle.is-switching svg { transform: rotate(180deg); } /* En FAB radial — usa el color del FAB existente */ .wh-fab__item.wh-fab__item--theme { background: linear-gradient(135deg, #6366f1, #4338ca); } /* Animación suave al cambiar theme */ html { transition: background-color .3s ease, color .3s ease; } body { transition: background-color .3s ease, color .3s ease; }