/* af-escuro-20260925.css — revisão geral do modo escuro (legibilidade)
   Só age com html.dark. Rollback: remover a tag link deste arquivo no index.html. */

/* ---------- 1. Etiquetas / pílulas com fundo claro do Tailwind sem variante dark ---------- */
html.dark .bg-slate-100, html.dark .bg-gray-100, html.dark .bg-\[\#f3f4f6\] {
  background-color: hsl(219 20% 20%) !important;
  color: hsl(219 20% 86%) !important;
}
html.dark .bg-slate-100.border-slate-200, html.dark .bg-gray-100.border-gray-200,
html.dark .aff-celula.bg-slate-100, html.dark .aff-etiqueta.bg-slate-100 {
  border-color: hsl(219 18% 32%) !important;
}
html.dark .bg-cyan-50   { background-color: rgba(6,182,212,.14) !important; }
html.dark .bg-teal-50   { background-color: rgba(20,184,166,.14) !important; }
html.dark .bg-lime-50   { background-color: rgba(132,204,22,.14) !important; }
html.dark .bg-violet-50 { background-color: rgba(139,92,246,.16) !important; }
html.dark .bg-purple-100 { background-color: rgba(168,85,247,.18) !important; }
html.dark .bg-purple-100.text-purple-800, html.dark .bg-purple-100 .text-purple-800 { color: #d8b4fe !important; }
html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.2) !important; }

/* verdes/rosas/lilases "hex" usados em badges e avatares */
html.dark .bg-\[\#e8f5e9\], html.dark .bg-\[\#d8f7d0\] {
  background-color: rgba(34,197,94,.16) !important; color: #86efac !important;
  border-color: rgba(34,197,94,.35) !important;
}
html.dark .bg-\[\#fce4ec\] { background-color: rgba(236,72,153,.16) !important; color: #f9a8d4 !important; }
html.dark .bg-\[\#ece8ff\], html.dark .bg-\[\#eef2ff\] {
  background-color: rgba(129,140,248,.2) !important; color: #c7d2fe !important;
}

/* texto escuro que sobrou sem variante dark */
html.dark .text-gray-600, html.dark .text-\[\#4b5563\] { color: hsl(219 12% 72%) !important; }
html.dark .text-gray-800, html.dark .text-slate-800 { color: hsl(220 24% 90%) !important; }
html.dark .text-\[\#6b7280\], html.dark .text-\[\#7a746d\], html.dark .text-\[\#8b8175\] { color: hsl(219 12% 66%) !important; }
html.dark .text-\[\#2d7a6e\], html.dark .text-\[\#2e7d32\] { color: #6ee7b7 !important; }
html.dark .text-\[\#3b82f6\] { color: #93c5fd !important; }
html.dark .text-\[\#c2185b\] { color: #f9a8d4 !important; }
html.dark .text-\[\#c7502f\] { color: #fdba74 !important; }

/* selects dentro das pílulas de Fase/Status (Processos): sem caixa preta por dentro */
html.dark .aff-celula select, html.dark .aff-select,
html.dark .afp-status-celula select, html.dark .afp-status-select {
  background: transparent !important; background-color: transparent !important;
  color: inherit !important; border: 0 !important; box-shadow: none !important;
}
html.dark .aff-seta, html.dark .afp-status-seta { opacity: .8 !important; color: inherit !important; }

/* ---------- 2. Pílulas / cabeçalhos com cor dinâmica e texto branco (etapas do funil) ---------- */
html.dark [style*="background"].text-white,
html.dark [style*="background"] > h3.uppercase,
html.dark [style*="background"] h3.uppercase {
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.4);
}

/* títulos coloridos das colunas de Regimes (cor inline escura demais) */
html.dark .afk-titulo h3[style*="color"] { filter: brightness(1.55) saturate(1.1); }

/* ---------- 3. Dashboard ---------- */
html.dark .afdp-data { color: #f87171 !important; }
html.dark .afl-hoje  { background: rgba(245,158,11,.16) !important; color: #fcd34d !important; }
html.dark .afl-perto { background: rgba(245,158,11,.12) !important; color: #fcd34d !important; }
html.dark .afl-chip-on.afl-chip-sucesso { background: rgba(34,197,94,.18) !important; color: #86efac !important; }
html.dark .afl-chip-on.afl-chip-sem     { background: hsl(219 20% 20%) !important; color: hsl(219 20% 86%) !important; }
html.dark .afl-chip.afe-chip-sim { background: rgba(34,197,94,.18) !important; color: #86efac !important; }
html.dark .afl-chip.afe-chip-nao { background: rgba(239,68,68,.16) !important; color: #fca5a5 !important; }
html.dark .afs-prazo-bt { background: hsl(219 20% 17%) !important; color: hsl(220 24% 90%) !important; border-color: hsl(219 18% 28%) !important; }
html.dark .afs-prazo-bt:hover { background: hsl(217 26% 22%) !important; }

/* ---------- 4. Conversas (WhatsApp) ---------- */
/* balão recebido: escuro como no WhatsApp */
html:root.dark .bg-\[\#fffefa\][class] {
  background-color: hsl(219 22% 17%) !important;
  border-color: hsl(219 18% 26%) !important;
  color: hsl(220 24% 92%) !important;
}
html:root.dark .bg-\[\#fffefa\][class] .text-\[\#1f2937\], html:root.dark .bg-\[\#fffefa\][class] p { color: hsl(220 24% 92%) !important; }
html:root.dark .bg-\[\#fffefa\][class] .text-\[\#6b7280\] { color: hsl(219 12% 64%) !important; }
/* caixa do áudio / anexos dentro do balão */
html:root.dark .bg-\[\#f0ede8\][class] { background-color: rgba(255,255,255,.06) !important; color: hsl(220 24% 92%) !important; }
html.dark .afa-caixa .afa-btn {
  background: hsl(214 25% 63%) !important; color: hsl(222 32% 8%) !important;
}
html.dark .afa-caixa .afa-vel { color: hsl(220 24% 88%) !important; border-color: hsl(219 18% 34%) !important; }
/* botão enviar desabilitado */
html.dark .disabled\:bg-\[\#d1d5db\]:disabled { background-color: hsl(219 18% 24%) !important; color: hsl(219 12% 60%) !important; }
/* painel Nova conversa */
html.dark #af-nc-painel { background: hsl(221 26% 9%) !important; color: hsl(220 24% 92%) !important; border-color: hsl(219 18% 24%) !important; }
html.dark .af-nc-topo { border-color: hsl(219 18% 24%) !important; }
html.dark .af-nc-voltar { color: hsl(220 24% 92%) !important; }
html.dark .af-nc-voltar:hover, html.dark .af-nc-item:hover { background: hsl(217 26% 19%) !important; }
html.dark .af-nc-campos input { background: hsl(222 28% 6%) !important; color: hsl(220 24% 94%) !important; border-color: hsl(219 18% 28%) !important; }
html.dark .af-nc-ini { background: rgba(129,140,248,.2) !important; color: #c7d2fe !important; }

/* ---------- 5. Calculadora — caixa "Ferramentas de cálculo" ---------- */
html.dark .afc { background: hsl(221 23% 10%) !important; color: hsl(220 24% 94%) !important; border-color: hsl(219 18% 24%) !important; }
html.dark .afc h3 { color: hsl(220 24% 94%) !important; }
html.dark .afc label, html.dark .afc .afc-ck { color: hsl(219 14% 80%) !important; }
html.dark .afc p, html.dark .afc small { color: hsl(219 12% 68%) !important; }
html.dark .afc-hd, html.dark .afc-abas { border-color: hsl(219 18% 24%) !important; }
html.dark .afc-aba { background: hsl(219 20% 15%) !important; color: hsl(219 14% 78%) !important; border-color: hsl(219 18% 26%) !important; }
html.dark .afc-aba:hover { background: hsl(217 26% 19%) !important; }
html.dark .afc-aba[aria-selected="true"], html.dark .afc-aba.on, html.dark .afc-aba.ativa, html.dark .afc-aba.ativo, html.dark .afc-aba.sel {
  background: hsl(214 25% 63%) !important; color: hsl(222 32% 8%) !important; border-color: hsl(214 25% 63%) !important;
}
html.dark .afc [class*="res"], html.dark .afc [class*="saida"] { border-color: hsl(219 18% 26%) !important; }

/* ---------- 6. Rateio (janela do Financeiro) ---------- */
html.dark .afr-win { background: hsl(221 23% 10%) !important; color: hsl(220 24% 94%) !important; }
html.dark .afr-top, html.dark .afr-tbl th, html.dark .afr-tbl td, html.dark .afr-card, html.dark .afr-box { border-color: hsl(219 18% 24%) !important; }
html.dark .afr-top small, html.dark .afr-card span, html.dark .afr-tbl th, html.dark .afr-f label, html.dark .afr-empty { color: hsl(219 12% 70%) !important; }
html.dark .afr-x { background: hsl(219 20% 17%) !important; color: hsl(220 24% 90%) !important; }
html.dark .afr-x:hover, html.dark .afr-btn:hover { background: hsl(217 26% 22%) !important; }
html.dark .afr-btn { background: hsl(219 20% 15%) !important; color: hsl(220 24% 92%) !important; border-color: hsl(219 18% 30%) !important; }
html.dark .afr-btn.p, html.dark .afr-fab { background: hsl(214 25% 63%) !important; color: hsl(222 32% 8%) !important; border-color: hsl(214 25% 63%) !important; }
html.dark .afr-tbl tr:hover td { background: hsl(219 20% 14%) !important; }
html.dark .afr-tot td, html.dark .afr-note { background: hsl(219 20% 14%) !important; color: hsl(220 24% 90%) !important; }
html.dark .afr-card.hi { background: hsl(217 26% 16%) !important; border-color: hsl(214 25% 50%) !important; }
html.dark .afr-tag { background: hsl(219 20% 20%) !important; color: hsl(219 20% 86%) !important; }
html.dark .afr-tag.ok { background: rgba(34,197,94,.18) !important; color: #86efac !important; }
html.dark .afr-tag.wait { background: rgba(245,158,11,.16) !important; color: #fcd34d !important; }
html.dark .afr-err { background: rgba(239,68,68,.14) !important; color: #fca5a5 !important; }
html.dark .afr-f input, html.dark .afr-f select, html.dark .afr-f textarea {
  background: hsl(222 28% 6%) !important; color: hsl(220 24% 94%) !important; border-color: hsl(219 18% 28%) !important;
}
html.dark .afr-link { color: #93c5fd !important; }
html.dark .afr-del { color: #fca5a5 !important; }
html.dark .afr-del.armado { background: #dc2626 !important; color: #fff !important; }

/* ---------- 7. Cabeçalho: selo "Conectado" e texto do escritório ---------- */
html.dark header .text-\[\#6b7280\], html.dark header .text-\[\#7a746d\] { color: hsl(219 12% 68%) !important; }

/* ---------- 8. Complementos (ferramentas de cálculo, etiquetas do lead, agendamento) ---------- */
html.dark .afc-hd { background: hsl(219 20% 13%) !important; background-image: none !important; }
html.dark .afc-res, html.dark .afc-card { background: hsl(219 20% 13%) !important; color: hsl(220 24% 92%) !important; border-color: hsl(219 18% 26%) !important; }
html.dark .afc-chip { background: hsl(219 20% 17%) !important; color: hsl(220 24% 90%) !important; border-color: hsl(219 18% 30%) !important; }
html.dark .afx-tag:not(.afx-t-outra) {
  background-color: color-mix(in srgb, currentColor 15%, transparent) !important;
  border-color: color-mix(in srgb, currentColor 38%, transparent) !important;
}
html.dark .afx-ag { background: rgba(249,115,22,.14) !important; color: #fdba74 !important; border-color: rgba(249,115,22,.35) !important; }
html.dark .afx-ag-erro { background: rgba(239,68,68,.14) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.35) !important; }
html.dark .bg-\[\#25D366\] { background-color: #128C7E !important; }
html.dark .bg-\[\#25D366\]:hover { background-color: #0e7266 !important; }