* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Restaura fonte do Font Awesome (o * acima sobrescreve e quebra ícones) */ .fa, .fas, .far, .fal, .fab, .fad, i.fa, i.fas, i.far, i.fal, i.fab, i.fad, [class^="fa-"], [class*=" fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } .fas, i.fas, .fa-solid { font-weight: 900 !important; } .far, i.far, .fa-regular { font-weight: 400 !important; } .fab, i.fab, .fa-brands { font-weight: 400 !important; } :root { /* Tokens alinhados ao design system WA (cf. skill wa-disparador-frontend §4.1): wa.bg/panel = #111111, wa.chat = #0b141a (doodle base), wa.in-msg = #202c33, wa.out-msg = #005C4B, wa.active = #262626, wa.text = #FFFFFF, wa.muted = #9E9E9E, wa.border = #222222, wa.accent = #25D366 */ --bg-body: #111111; --bg-sidebar: #111111; --bg-chat: #0b141a; --bg-header: #111111; --bg-input: #111111; --bg-bubble-in: #202c33; --bg-bubble-out: #005c4b; --bg-hover: #262626; --text-primary: #FFFFFF; --text-secondary: #9E9E9E; --icon-color: #9E9E9E; --border-color: #222222; --green: #25D366; --blue-tick: #53bdeb; /* Tokens auxiliares: usados onde rgba(255,255,255,a) não traduz pra fundo claro */ --border-soft: rgba(255, 255, 255, 0.06); --surface-hover: rgba(255, 255, 255, 0.06); /* Ticks ✓/✓✓ (enviado/entregue) e textos apagados DENTRO do balão. Branco 45% funciona no dark, mas some no balão verde claro do light. */ --tick-muted: rgba(255, 255, 255, 0.45); --nav-accent: #00E676; --shadow-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4); /* Acentos verdes — no dark mantêm os 3 tons; no light viram #0D856F */ --accent-solid: #00C853; /* botão primary bg */ --accent-strong: #00E676; /* hover/active highlight */ --accent-on-tint: #7BE7AF; /* texto sobre fundo verde com alpha */ --accent-deep: #008f6f; /* hover do botão primary */ /* ── Superfícies compartilhadas (cards/modais/inputs fora do chat) ── */ --bg-surface: #1C1C1E; /* card/modal elevado */ --bg-inset: #262626; /* input/select dentro de card */ --overlay: rgba(0, 0, 0, 0.55);/* backdrop de modal */ --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6); --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.5); /* Texto/elemento sobre o verde sólido (--green/--accent-solid). No dark o verde é claro (#25D366) e pede texto escuro; no light vira teal escuro e pede branco. */ --on-accent: #111b21; /* ── Cores semânticas de status ── Cada uma tem: cor forte (ícone/dot/borda), texto-sobre-tint (badges/pills) e tint (fundo alpha). NUNCA usar o hex pastel direto (#FF8A82, #7CB3FF…): pastel só funciona em fundo escuro. */ --danger: #FF453A; --danger-soft: #FF8A82; /* texto sobre --danger-tint */ --danger-tint: rgba(255, 69, 58, 0.12); --danger-border: rgba(255, 69, 58, 0.45); --warn: #FF9F0A; /* âmbar (atenção) */ --warn-soft: #FFCE7A; /* texto sobre --warn-tint */ --warn-strong: #FFD60A; /* amarelo (KPI/SLA) */ --warn-tint: rgba(255, 159, 10, 0.15); --info: #0A84FF; --info-soft: #7CB3FF; /* texto sobre --info-tint */ --info-tint: rgba(10, 132, 255, 0.15); --ok-soft: #66bb6a; /* texto "concluído" sobre tint */ --ok-tint: rgba(37, 211, 102, 0.15); --fup: #f96900; /* laranja de follow-up/disparo */ --fup-tint: rgba(249, 105, 0, 0.14); --teal: #00a884; /* teal WA (botões pegar-lead, switches) */ } /* === LIGHT THEME === Aplicado quando . Override só os tokens — o resto do CSS continua usando var(--…) e troca automaticamente. */ :root[data-theme="light"] { --bg-body: #FFFFFF; --bg-sidebar: #FDFDFD; --bg-chat: #EFEAE2; --bg-header: #FDFDFD; --bg-input: #FFFFFF; --bg-bubble-in: #FFFFFF; --bg-bubble-out: #D9FDD3; --bg-hover: #E9EDEF; --text-primary: #111B21; --text-secondary: #667781; --icon-color: #54656F; --border-color: #D1D7DB; /* --green e --blue-tick não mudam (brand-stable) */ --border-soft: rgba(17, 27, 33, 0.08); --surface-hover: rgba(17, 27, 33, 0.05); --tick-muted: #667781; /* cinza do WhatsApp light: legível no balão verde claro */ --nav-accent: #0D856F; --shadow-elev-1: 0 1px 2px rgba(0, 0, 0, 0.08); /* Light mode: todos os acentos verdes viram o teal solicitado */ --accent-solid: #0D856F; --accent-strong: #0D856F; --accent-on-tint: #0D856F; --accent-deep: #0D856F; --green: #0D856F; /* brand verde também adapta no light */ /* Superfícies compartilhadas */ --bg-surface: #FFFFFF; --bg-inset: #FFFFFF; --overlay: rgba(17, 27, 33, 0.45); --shadow-modal: 0 24px 80px rgba(17, 27, 33, 0.18); --shadow-pop: 0 12px 40px rgba(17, 27, 33, 0.16); --on-accent: #FFFFFF; /* texto branco sobre o teal */ /* Semânticas de status — versões escuras, legíveis em fundo claro */ --danger: #D3382C; --danger-soft: #B3261E; --danger-tint: rgba(211, 56, 44, 0.10); --danger-border: rgba(211, 56, 44, 0.40); --warn: #B45309; --warn-soft: #8A5A00; --warn-strong: #9A6700; --warn-tint: rgba(180, 83, 9, 0.12); --info: #0B57D0; --info-soft: #0B57D0; --info-tint: rgba(11, 87, 208, 0.10); --ok-soft: #1E7E34; --ok-tint: rgba(13, 133, 111, 0.12); --fup: #C2410C; --fup-tint: rgba(194, 65, 12, 0.12); --teal: #0D856F; } html, body { height: 100%; width: 100%; background-color: var(--bg-body); color: var(--text-primary); overflow: hidden; } /* === BOTÕES (padrão do app) === Mesmas regras que modelos/, listas/, master/ e campanhas.css já repetem inline. Aqui elas viram o padrão pra quem só carrega este arquivo (chat/ e equipe/, que usavam as classes sem nunca defini-las e caíam no botão nativo do browser). Quem define inline continua vencendo — o