/* =============================================================================
   TEMA ESCURO — arquivo único do sistema
   =============================================================================

   Todas as cores do modo escuro moram aqui, do Hub ao CRM. Antes elas estavam
   espalhadas: um bloco no css-src/style.css, outro dentro do <style> do
   crm.html e mais um punhado de regras soltas em cada página. Mudar um tom
   significava caçar o mesmo hex em quatro lugares — e sobrava sempre um.

   Como usar
   ---------
   Ligue a classe `tema-escuro` no <html> (js/app.js faz isso a partir da
   preferência do usuário). Nada mais é preciso: as regras abaixo reescrevem as
   utilitárias do Tailwind e os componentes próprios de cada tela.

   Ao criar tela nova, use os tokens (var(--t-…)) em vez de hex. Se precisar de
   um tom que não existe aqui, acrescente-o na seção de tokens — nunca no HTML
   da página.

   Escala de superfícies (nunca preto absoluto — #000 no OLED "cola" o texto e
   cansa a vista; a base é o mesmo slate-900 da identidade do Hub):

     --t-bg        fundo da aplicação      (o mais fundo)
     --t-surface   cartão, nav, modal
     --t-surface-2 elevação: hover, cabeçalho de tabela
     --t-surface-3 controle sobre cartão: chip, aba, botão neutro
     --t-input     campo de formulário (afunda em relação ao cartão)

   Texto: --t-txt (principal) › --t-txt-2 (secundário) › --t-txt-3 (auxiliar) ›
   --t-txt-4 (placeholder/desabilitado). Todos ≥ 4.5:1 sobre o cartão.
   ========================================================================== */

html.tema-escuro {
  /* Faz o navegador desenhar barra de rolagem, calendário nativo, lista de
     <select> e autofill na versão escura. Uma linha resolve o que seria
     impossível estilizar à mão. */
  color-scheme: dark;

  /* ---- superfícies ---- */
  --t-bg: #0f172a;
  --t-surface: #1e293b;
  --t-surface-2: #273449;
  --t-surface-3: #334155;
  --t-input: #131b2c;
  --t-overlay: rgba(2, 6, 23, 0.8);

  /* ---- texto (contraste sobre --t-surface) ---- */
  --t-txt: #f1f5f9;      /* 13.4:1 */
  --t-txt-2: #cbd5e1;    /*  9.9:1 */
  --t-txt-3: #a1aec2;    /*  6.5:1 no cartão e 4.6:1 sobre o cinza de chip */
  --t-txt-4: #8695ad;    /*  4.8:1 — placeholder e desabilitado */

  /* ---- linhas ---- */
  --t-line: #334155;        /* divisória discreta dentro do cartão */
  --t-line-2: #475569;      /* borda de cartão/painel */
  --t-line-forte: #64748b;  /* contorno de controle (3:1, WCAG 1.4.11) */

  /* ---- marca ---- */
  --t-accent: #60a5fa;
  --t-accent-2: #93c5fd;
  --t-accent-solido: #1d4ed8;
  --t-accent-bg: #10263f;
  --t-foco: #60a5fa;

  /* ---- semânticas: texto / fundo tonal / borda ----
     Mesma família de cor do tema claro — sucesso verde, erro vermelho, aviso
     âmbar, informação azul —, só que na versão que sobrevive ao fundo escuro. */
  --t-ok: #4ade80;        --t-ok-2: #86efac;    --t-ok-bg: #06301c;    --t-ok-linha: #166534;   --t-ok-solido: #15803d;
  --t-aviso: #fbbf24;     --t-aviso-2: #fcd34d; --t-aviso-bg: #2e2205; --t-aviso-linha: #78350f; --t-aviso-solido: #b45309;
  --t-erro: #f87171;      --t-erro-2: #fca5a5;  --t-erro-bg: #3a1414;  --t-erro-linha: #7f1d1d; --t-erro-solido: #dc2626;
  --t-info: #60a5fa;      --t-info-2: #93c5fd;  --t-info-bg: #10263f;  --t-info-linha: #1e40af; --t-info-solido: #1d4ed8;
  --t-roxo: #c084fc;      --t-roxo-2: #d8b4fe;  --t-roxo-bg: #2a1a4d;  --t-roxo-linha: #5b21b6; --t-roxo-solido: #6d28d9;
  --t-teal: #2dd4bf;      --t-teal-2: #5eead4;  --t-teal-bg: #06302e;  --t-teal-linha: #115e59; --t-teal-solido: #0f766e;
  --t-laranja: #fb923c;   --t-laranja-2: #fdba74; --t-laranja-bg: #3a2408; --t-laranja-linha: #9a3412; --t-laranja-solido: #c2410c;
  --t-rosa: #f472b6;      --t-rosa-2: #f9a8d4;  --t-rosa-bg: #3d0f28;  --t-rosa-linha: #9d174d; --t-rosa-solido: #be185d;
  --t-indigo: #818cf8;    --t-indigo-2: #a5b4fc; --t-indigo-bg: #1e1b4b; --t-indigo-linha: #3730a3; --t-indigo-solido: #4338ca;
  --t-ciano: #22d3ee;     --t-ciano-bg: #083344;

  /* ---- sombras ---- */
  --t-sombra-s: 0 1px 2px rgba(0, 0, 0, .45);
  --t-sombra-m: 0 4px 14px rgba(0, 0, 0, .5);
  --t-sombra-g: 0 12px 34px rgba(0, 0, 0, .6);
}

/* ============================ base ======================================== */
html.tema-escuro body {
  background-color: var(--t-bg) !important;
  color: var(--t-txt-2);
}
html.tema-escuro ::selection { background: #29406b; color: #fff; }
html.tema-escuro hr { border-color: var(--t-line); }
html.tema-escuro ::-webkit-scrollbar { width: 12px; height: 12px; }
html.tema-escuro ::-webkit-scrollbar-track { background: var(--t-bg); }
html.tema-escuro ::-webkit-scrollbar-thumb {
  background: #3d4b63; border-radius: 8px; border: 3px solid var(--t-bg);
}
html.tema-escuro ::-webkit-scrollbar-thumb:hover { background: #4d5d78; }

/* ====================== superfícies (fundos) ============================== */
html.tema-escuro .bg-white,
html.tema-escuro .bg-gray-50,
html.tema-escuro .bg-slate-50,
html.tema-escuro .bg-slate-100,
html.tema-escuro .modal-box              { background-color: var(--t-surface) !important; }
html.tema-escuro .bg-gray-100            { background-color: var(--t-bg) !important; }
html.tema-escuro .bg-gray-200            { background-color: var(--t-surface-2) !important; }
html.tema-escuro .bg-gray-300            { background-color: #475569 !important; }
html.tema-escuro .bg-gray-700            { background-color: var(--t-surface-2) !important; }
html.tema-escuro .modal-bg               { background-color: var(--t-overlay) !important; }

/* Fundos tonais — mesma leitura do tema claro (verde = ok, vermelho = erro),
   escurecidos até ficarem um degrau acima do cartão. */
html.tema-escuro .bg-blue-50,
html.tema-escuro .bg-blue-100,
html.tema-escuro .bg-blue-200,
html.tema-escuro .bg-sky-50,
html.tema-escuro .bg-sky-100             { background-color: var(--t-info-bg) !important; }
html.tema-escuro .bg-green-50,
html.tema-escuro .bg-green-100,
html.tema-escuro .bg-green-200,
html.tema-escuro .bg-emerald-50,
html.tema-escuro .bg-emerald-100,
html.tema-escuro .bg-lime-100            { background-color: var(--t-ok-bg) !important; }
html.tema-escuro .bg-yellow-50,
html.tema-escuro .bg-yellow-100,
html.tema-escuro .bg-yellow-200,
html.tema-escuro .bg-amber-50,
html.tema-escuro .bg-amber-100,
html.tema-escuro .bg-amber-200           { background-color: var(--t-aviso-bg) !important; }
html.tema-escuro .bg-red-50,
html.tema-escuro .bg-red-100,
html.tema-escuro .bg-red-200,
html.tema-escuro .bg-rose-50,
html.tema-escuro .bg-rose-100            { background-color: var(--t-erro-bg) !important; }
html.tema-escuro .bg-red-300             { background-color: #4b1a1a !important; }
html.tema-escuro .bg-orange-50,
html.tema-escuro .bg-orange-100,
html.tema-escuro .bg-orange-200          { background-color: var(--t-laranja-bg) !important; }
html.tema-escuro .bg-orange-300          { background-color: #55320c !important; }
html.tema-escuro .bg-teal-50,
html.tema-escuro .bg-teal-100            { background-color: var(--t-teal-bg) !important; }
html.tema-escuro .bg-cyan-50,
html.tema-escuro .bg-cyan-100            { background-color: var(--t-ciano-bg) !important; }
html.tema-escuro .bg-purple-50,
html.tema-escuro .bg-purple-100,
html.tema-escuro .bg-violet-50,
html.tema-escuro .bg-violet-100,
html.tema-escuro .bg-fuchsia-100         { background-color: var(--t-roxo-bg) !important; }
html.tema-escuro .bg-purple-200,
html.tema-escuro .bg-violet-200          { background-color: #35215e !important; }
html.tema-escuro .bg-indigo-50,
html.tema-escuro .bg-indigo-100          { background-color: var(--t-indigo-bg) !important; }
html.tema-escuro .bg-pink-50,
html.tema-escuro .bg-pink-100            { background-color: var(--t-rosa-bg) !important; }

/* ============================ texto ======================================= */
html.tema-escuro .text-gray-900,
html.tema-escuro .text-gray-800,
html.tema-escuro .text-slate-900,
html.tema-escuro .text-slate-800,
html.tema-escuro .text-black             { color: var(--t-txt) !important; }
html.tema-escuro .text-gray-700,
html.tema-escuro .text-slate-700         { color: var(--t-txt-2) !important; }
html.tema-escuro .text-gray-600,
html.tema-escuro .text-slate-600         { color: var(--t-txt-2) !important; }
/* gray-400/500 são o texto auxiliar do sistema inteiro (legendas, "nenhum
   registro", datas). No tom antigo (#64748b) davam 3.07:1 sobre o cartão —
   abaixo do mínimo legível, e era a queixa mais comum do modo escuro. */
html.tema-escuro .text-gray-500,
html.tema-escuro .text-slate-500,
html.tema-escuro .text-gray-400,
html.tema-escuro .text-slate-400         { color: var(--t-txt-3) !important; }
html.tema-escuro .text-gray-300          { color: var(--t-txt-2) !important; }

html.tema-escuro .text-blue-500,
html.tema-escuro .text-blue-600,
html.tema-escuro .text-blue-700,
html.tema-escuro .text-sky-600,
html.tema-escuro .text-sky-700           { color: var(--t-info) !important; }
html.tema-escuro .text-blue-800,
html.tema-escuro .text-blue-900          { color: var(--t-info-2) !important; }
html.tema-escuro .text-green-500,
html.tema-escuro .text-green-600,
html.tema-escuro .text-green-700,
html.tema-escuro .text-lime-600          { color: var(--t-ok) !important; }
html.tema-escuro .text-green-800,
html.tema-escuro .text-green-900         { color: var(--t-ok-2) !important; }
html.tema-escuro .text-emerald-500,
html.tema-escuro .text-emerald-600,
html.tema-escuro .text-emerald-700       { color: #34d399 !important; }
html.tema-escuro .text-emerald-800       { color: #6ee7b7 !important; }
html.tema-escuro .text-red-500,
html.tema-escuro .text-red-600,
html.tema-escuro .text-red-700           { color: var(--t-erro) !important; }
html.tema-escuro .text-red-800,
html.tema-escuro .text-red-900           { color: var(--t-erro-2) !important; }
html.tema-escuro .text-rose-600,
html.tema-escuro .text-rose-700          { color: #fb7185 !important; }
html.tema-escuro .text-yellow-400,
html.tema-escuro .text-yellow-500,
html.tema-escuro .text-yellow-600,
html.tema-escuro .text-yellow-700,
html.tema-escuro .text-amber-500,
html.tema-escuro .text-amber-600,
html.tema-escuro .text-amber-700         { color: var(--t-aviso) !important; }
html.tema-escuro .text-yellow-800,
html.tema-escuro .text-yellow-900,
html.tema-escuro .text-amber-800         { color: var(--t-aviso-2) !important; }
html.tema-escuro .text-orange-400,
html.tema-escuro .text-orange-500,
html.tema-escuro .text-orange-600,
html.tema-escuro .text-orange-700        { color: var(--t-laranja) !important; }
html.tema-escuro .text-orange-800,
html.tema-escuro .text-orange-900        { color: var(--t-laranja-2) !important; }
html.tema-escuro .text-purple-500,
html.tema-escuro .text-purple-600,
html.tema-escuro .text-purple-700,
html.tema-escuro .text-violet-600,
html.tema-escuro .text-violet-700,
html.tema-escuro .text-fuchsia-700       { color: var(--t-roxo) !important; }
html.tema-escuro .text-purple-800,
html.tema-escuro .text-purple-900,
html.tema-escuro .text-violet-800        { color: var(--t-roxo-2) !important; }
html.tema-escuro .text-indigo-500,
html.tema-escuro .text-indigo-600,
html.tema-escuro .text-indigo-700        { color: var(--t-indigo) !important; }
html.tema-escuro .text-indigo-800        { color: var(--t-indigo-2) !important; }
html.tema-escuro .text-teal-500,
html.tema-escuro .text-teal-600,
html.tema-escuro .text-teal-700          { color: var(--t-teal) !important; }
html.tema-escuro .text-teal-800,
html.tema-escuro .text-teal-900          { color: var(--t-teal-2) !important; }
html.tema-escuro .text-cyan-600,
html.tema-escuro .text-cyan-700          { color: var(--t-ciano) !important; }
html.tema-escuro .text-pink-500,
html.tema-escuro .text-pink-600,
html.tema-escuro .text-pink-700          { color: var(--t-rosa) !important; }
html.tema-escuro .text-pink-800          { color: var(--t-rosa-2) !important; }

/* Texto sobre fundo sólido colorido (botões, faixas) permanece branco: nesses
   casos o par foi verificado na seção de botões. */

/* ============================ bordas ====================================== */
html.tema-escuro .border-gray-50,
html.tema-escuro .border-gray-100,
html.tema-escuro .border-gray-200,
html.tema-escuro .border-slate-100,
html.tema-escuro .border-slate-200,
html.tema-escuro .border-b,
html.tema-escuro .border-t,
html.tema-escuro .border-l,
html.tema-escuro .border-r,
html.tema-escuro .border                 { border-color: var(--t-line) !important; }
html.tema-escuro .border-gray-300,
html.tema-escuro .border-gray-400,
html.tema-escuro .border-gray-500,
html.tema-escuro .border-gray-600,
html.tema-escuro .border-gray-700,
html.tema-escuro .border-slate-300       { border-color: var(--t-line-2) !important; }
html.tema-escuro .divide-gray-50 > * + *,
html.tema-escuro .divide-gray-100 > * + *,
html.tema-escuro .divide-gray-200 > * + *,
html.tema-escuro .divide-slate-100 > * + *,
html.tema-escuro .divide-slate-200 > * + * { border-color: var(--t-line) !important; }

/* Bordas coloridas seguem a cor do estado (o card de alerta continua vermelho),
   só que no tom escuro — antes viravam todas cinza e o alerta perdia o sinal. */
html.tema-escuro .border-blue-100,
html.tema-escuro .border-blue-200,
html.tema-escuro .border-blue-300,
html.tema-escuro .border-blue-400,
html.tema-escuro .border-blue-500,
html.tema-escuro .border-blue-700,
html.tema-escuro .border-blue-800,
html.tema-escuro .border-sky-200         { border-color: var(--t-info-linha) !important; }
html.tema-escuro .border-green-200,
html.tema-escuro .border-green-300,
html.tema-escuro .border-green-400,
html.tema-escuro .border-green-500,
html.tema-escuro .border-green-600,
html.tema-escuro .border-emerald-200,
html.tema-escuro .border-emerald-500      { border-color: var(--t-ok-linha) !important; }
html.tema-escuro .border-yellow-100,
html.tema-escuro .border-yellow-200,
html.tema-escuro .border-yellow-300,
html.tema-escuro .border-yellow-400,
html.tema-escuro .border-yellow-500,
html.tema-escuro .border-amber-200,
html.tema-escuro .border-amber-300,
html.tema-escuro .border-amber-400,
html.tema-escuro .border-amber-500        { border-color: var(--t-aviso-linha) !important; }
html.tema-escuro .border-red-100,
html.tema-escuro .border-red-200,
html.tema-escuro .border-red-300,
html.tema-escuro .border-red-400,
html.tema-escuro .border-red-500,
html.tema-escuro .border-rose-500          { border-color: var(--t-erro-linha) !important; }
html.tema-escuro .border-orange-200,
html.tema-escuro .border-orange-300,
html.tema-escuro .border-orange-400        { border-color: var(--t-laranja-linha) !important; }
html.tema-escuro .border-purple-200,
html.tema-escuro .border-purple-300,
html.tema-escuro .border-purple-400,
html.tema-escuro .border-purple-500        { border-color: var(--t-roxo-linha) !important; }
html.tema-escuro .border-indigo-200,
html.tema-escuro .border-indigo-300,
html.tema-escuro .border-indigo-400,
html.tema-escuro .border-indigo-500        { border-color: var(--t-indigo-linha) !important; }
html.tema-escuro .border-teal-300,
html.tema-escuro .border-teal-400,
html.tema-escuro .border-teal-500          { border-color: var(--t-teal-linha) !important; }
html.tema-escuro .border-pink-400          { border-color: var(--t-rosa-linha) !important; }

/* ======================== formulários ===================================== */
/* O fundo do campo só é imposto quando a tela NÃO pediu um. `bg-transparent`,
   `bg-white`, `bg-gray-50` são escolha de quem desenhou aquele componente — a
   busca do Hub, por exemplo, é um input transparente dentro de uma caixa
   translúcida, e forçar fundo nele desenhava uma tarja preta dentro da caixa.
   Quem tem `bg-white` já é convertido pela regra de superfície lá em cima.
   O CRM ([data-app="crm"]) tem tokens próprios de campo e fica de fora. */
html.tema-escuro:not([data-app="crm"]) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([class*="bg-"]),
html.tema-escuro:not([data-app="crm"]) textarea:not([class*="bg-"]),
html.tema-escuro:not([data-app="crm"]) select:not([class*="bg-"]),
html.tema-escuro:not([data-app="crm"]) .input {
  background-color: var(--t-input) !important;
  color: var(--t-txt) !important;
  border-color: var(--t-line-forte) !important;
}
/* Campo transparente mantém o fundo da caixa que o abriga; o que muda é só a
   cor do texto, para ele não ficar escuro sobre escuro. */
html.tema-escuro input.bg-transparent,
html.tema-escuro textarea.bg-transparent,
html.tema-escuro select.bg-transparent { background-color: transparent !important; color: var(--t-txt) !important; }
/* Placeholder estava em #475569 (1.9:1) — praticamente invisível. */
html.tema-escuro input::placeholder,
html.tema-escuro textarea::placeholder    { color: var(--t-txt-4) !important; opacity: 1; }
html.tema-escuro input:focus,
html.tema-escuro textarea:focus,
html.tema-escuro select:focus,
html.tema-escuro .input:focus {
  border-color: var(--t-foco) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .25) !important;
  outline: none;
}
html.tema-escuro input:disabled,
html.tema-escuro textarea:disabled,
html.tema-escuro select:disabled {
  background-color: #101827 !important; color: var(--t-txt-4) !important;
}
html.tema-escuro:not([data-app="crm"]) option { background-color: var(--t-surface); color: var(--t-txt); }
html.tema-escuro input[type="checkbox"],
html.tema-escuro input[type="radio"]      { accent-color: var(--t-accent); }
html.tema-escuro input[type="file"]       { color: var(--t-txt-2); }
html.tema-escuro label                    { color: inherit; }
/* Autofill do Chrome pintava o campo de amarelo claro com texto preto. */
html.tema-escuro input:-webkit-autofill,
html.tema-escuro input:-webkit-autofill:hover,
html.tema-escuro input:-webkit-autofill:focus,
html.tema-escuro textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--t-txt) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--t-input) inset !important;
  caret-color: var(--t-txt);
}
/* Ícone do seletor de data nativo é preto e some no escuro. */
html.tema-escuro input[type="date"]::-webkit-calendar-picker-indicator,
html.tema-escuro input[type="time"]::-webkit-calendar-picker-indicator,
html.tema-escuro input[type="month"]::-webkit-calendar-picker-indicator,
html.tema-escuro input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6); opacity: .75; cursor: pointer;
}
html.tema-escuro input[type="search"]::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }

/* Anel de foco das utilitárias focus:ring-* — o mesmo azul para tudo, para o
   foco ser reconhecível na navegação por teclado. */
html.tema-escuro .focus\:ring-blue-400:focus,
html.tema-escuro .focus\:ring-blue-500:focus,
html.tema-escuro .focus\:ring-purple-400:focus,
html.tema-escuro .focus\:ring-green-400:focus,
html.tema-escuro .focus\:ring-emerald-400:focus,
html.tema-escuro .focus\:ring-indigo-400:focus,
html.tema-escuro .focus\:ring-amber-400:focus,
html.tema-escuro .focus\:ring-red-400:focus {
  --tw-ring-color: rgba(96, 165, 250, .55) !important;
}
html.tema-escuro .focus\:border-blue-400:focus,
html.tema-escuro .focus\:border-blue-500:focus { border-color: var(--t-foco) !important; }
html.tema-escuro :focus-visible { outline-color: var(--t-foco); }

/* ========================== tabelas ======================================= */
html.tema-escuro:not([data-app="crm"]) table { color: var(--t-txt-2); }
html.tema-escuro table thead tr,
html.tema-escuro table thead th           { background-color: var(--t-surface-2) !important; }
html.tema-escuro table thead th           { color: var(--t-txt-3) !important; border-color: var(--t-line) !important; }
html.tema-escuro table tbody tr,
html.tema-escuro table tbody td,
html.tema-escuro table tfoot td,
html.tema-escuro table tfoot th           { border-color: var(--t-line) !important; }
/* Zebra e hover precisam ser distinguíveis entre si: o hover é um degrau acima
   da linha alternada, senão passar o mouse não muda nada visível. */
html.tema-escuro table tbody tr:nth-child(even),
html.tema-escuro .odd\:bg-gray-50:nth-child(odd),
html.tema-escuro .even\:bg-gray-50:nth-child(even) { background-color: rgba(255, 255, 255, .022); }
html.tema-escuro table tbody tr:hover,
html.tema-escuro .hover\:bg-gray-50:hover  { background-color: var(--t-surface-2) !important; }
html.tema-escuro tr.selecionada,
html.tema-escuro tr.selected               { background-color: var(--t-accent-bg) !important; }

/* ====================== estados de hover ================================== */
html.tema-escuro .hover\:bg-gray-100:hover,
html.tema-escuro .hover\:bg-gray-200:hover,
html.tema-escuro .hover\:bg-slate-100:hover { background-color: var(--t-surface-3) !important; }
html.tema-escuro .hover\:bg-blue-50:hover,
html.tema-escuro .hover\:bg-blue-100:hover,
html.tema-escuro .hover\:bg-blue-200:hover,
html.tema-escuro .hover\:bg-sky-50:hover    { background-color: #17355a !important; }
html.tema-escuro .hover\:bg-green-50:hover,
html.tema-escuro .hover\:bg-green-100:hover,
html.tema-escuro .hover\:bg-green-200:hover,
html.tema-escuro .hover\:bg-emerald-100:hover { background-color: #0a4429 !important; }
html.tema-escuro .hover\:bg-yellow-50:hover,
html.tema-escuro .hover\:bg-yellow-100:hover,
html.tema-escuro .hover\:bg-yellow-200:hover,
html.tema-escuro .hover\:bg-amber-50:hover,
html.tema-escuro .hover\:bg-amber-100:hover,
html.tema-escuro .hover\:bg-amber-200:hover  { background-color: #43320a !important; }
html.tema-escuro .hover\:bg-red-50:hover,
html.tema-escuro .hover\:bg-red-100:hover,
html.tema-escuro .hover\:bg-red-200:hover,
html.tema-escuro .hover\:bg-red-300:hover    { background-color: #501d1d !important; }
html.tema-escuro .hover\:bg-orange-100:hover,
html.tema-escuro .hover\:bg-orange-300:hover { background-color: #55320c !important; }
html.tema-escuro .hover\:bg-purple-50:hover,
html.tema-escuro .hover\:bg-purple-100:hover,
html.tema-escuro .hover\:bg-purple-200:hover { background-color: #35215e !important; }
html.tema-escuro .hover\:bg-indigo-100:hover { background-color: #272361 !important; }
html.tema-escuro .hover\:bg-teal-50:hover,
html.tema-escuro .hover\:bg-teal-100:hover   { background-color: #0a4440 !important; }
html.tema-escuro .hover\:text-gray-600:hover,
html.tema-escuro .hover\:text-gray-700:hover,
html.tema-escuro .hover\:text-gray-900:hover { color: var(--t-txt) !important; }
html.tema-escuro .hover\:text-blue-600:hover,
html.tema-escuro .hover\:text-blue-700:hover,
html.tema-escuro .hover\:text-blue-800:hover { color: var(--t-info-2) !important; }
html.tema-escuro .hover\:text-red-500:hover,
html.tema-escuro .hover\:text-red-600:hover,
html.tema-escuro .hover\:text-red-700:hover  { color: var(--t-erro-2) !important; }
html.tema-escuro .hover\:text-green-700:hover  { color: var(--t-ok-2) !important; }
html.tema-escuro .hover\:text-orange-700:hover { color: var(--t-laranja-2) !important; }
html.tema-escuro .hover\:text-purple-600:hover,
html.tema-escuro .hover\:text-purple-700:hover { color: var(--t-roxo-2) !important; }
html.tema-escuro [class*="hover\:border-"]:hover { border-color: var(--t-line-forte) !important; }

/* ========================== botões ========================================
   Botão sólido claro (âmbar, amarelo, lima) com texto branco dava 2.1:1 — o
   rótulo sumia. Nesses a tinta passa a ser escura, como fazem Stripe e Linear;
   nos escuros o branco fica, com o fundo um degrau mais fundo para chegar a
   4.5:1. */
html.tema-escuro .bg-blue-600,
html.tema-escuro .bg-blue-700,
html.tema-escuro .hover\:bg-blue-700:hover  { background-color: var(--t-accent-solido) !important; color: #fff !important; }
html.tema-escuro .bg-blue-800,
html.tema-escuro .hover\:bg-blue-800:hover  { background-color: #1e40af !important; color: #fff !important; }
html.tema-escuro .bg-blue-500               { background-color: #2563eb !important; color: #fff !important; }
html.tema-escuro .bg-green-500,
html.tema-escuro .bg-green-600,
html.tema-escuro .bg-emerald-600,
html.tema-escuro .hover\:bg-green-700:hover { background-color: var(--t-ok-solido) !important; color: #fff !important; }
html.tema-escuro .bg-green-700              { background-color: #166534 !important; color: #fff !important; }
html.tema-escuro .bg-red-500,
html.tema-escuro .bg-red-600,
html.tema-escuro .bg-red-400,
html.tema-escuro .hover\:bg-red-600:hover   { background-color: var(--t-erro-solido) !important; color: #fff !important; }
html.tema-escuro .bg-red-700                { background-color: #b91c1c !important; color: #fff !important; }
html.tema-escuro .bg-purple-600,
html.tema-escuro .bg-violet-600,
html.tema-escuro .hover\:bg-purple-700:hover { background-color: var(--t-roxo-solido) !important; color: #fff !important; }
html.tema-escuro .bg-indigo-600             { background-color: var(--t-indigo-solido) !important; color: #fff !important; }
html.tema-escuro .bg-teal-600               { background-color: var(--t-teal-solido) !important; color: #fff !important; }
html.tema-escuro .bg-amber-500,
html.tema-escuro .bg-amber-400,
html.tema-escuro .bg-yellow-400,
html.tema-escuro .bg-yellow-500,
html.tema-escuro .bg-lime-500               { background-color: #f59e0b !important; color: #0f172a !important; }
html.tema-escuro .bg-amber-500 *,
html.tema-escuro .bg-yellow-400 *,
html.tema-escuro .bg-yellow-500 *           { color: inherit !important; }
html.tema-escuro .hover\:bg-amber-600:hover { background-color: #d97706 !important; color: #0f172a !important; }
html.tema-escuro .bg-orange-500,
html.tema-escuro .bg-orange-600             { background-color: var(--t-laranja-solido) !important; color: #fff !important; }
/* Os botões nomeados (.btn-success/.btn-danger) vêm do style.css com o verde e
   o vermelho do tema claro: com texto branco davam 3.3:1. Aqui recebem o mesmo
   tom sólido das utilitárias equivalentes. */
html.tema-escuro .btn-success               { background-color: var(--t-ok-solido) !important; color: #fff !important; }
html.tema-escuro .btn-success:hover         { background-color: #166534 !important; }
html.tema-escuro .btn-danger                { background-color: var(--t-erro-solido) !important; color: #fff !important; }
html.tema-escuro .btn-danger:hover          { background-color: #b91c1c !important; }
html.tema-escuro .btn-secondary             { background-color: var(--t-surface-3) !important; color: var(--t-txt) !important; }
html.tema-escuro .btn-secondary:hover       { background-color: #41506a !important; }
html.tema-escuro button:disabled,
html.tema-escuro .btn-primary:disabled,
html.tema-escuro [disabled]                 { opacity: .55; }

/* ==================== barra de navegação (topo) ===========================
   A nav usa azul-900 sólido nos dois temas — é a identidade do Hub. No escuro
   ela apenas encorpa e ganha uma linha inferior para separar do conteúdo. */
html.tema-escuro nav.bg-blue-900,
html.tema-escuro .bg-blue-900               { background-color: #16233f !important; }
html.tema-escuro nav .bg-blue-800,
html.tema-escuro nav.bg-blue-900 .bg-blue-800 { background-color: #1e2c4d !important; }
html.tema-escuro nav.bg-blue-900            { border-bottom: 1px solid #263352; }
html.tema-escuro nav .text-blue-100,
html.tema-escuro nav .text-blue-200,
html.tema-escuro nav .text-blue-300         { color: #b9c8e8 !important; }
html.tema-escuro nav .hover\:text-blue-300:hover,
html.tema-escuro nav .hover\:text-white:hover { color: #ffffff !important; }
html.tema-escuro nav .hover\:bg-blue-800:hover { background-color: #26365c !important; }

/* ================== fundo gradiente do Hub e do login =====================
   O degradê azul vivo é a assinatura do tema claro. No escuro ele iluminava a
   tela inteira por trás de cartões escuros — o contrário do que se espera de um
   modo noturno. Aqui ele continua existindo, na versão profunda: mantém a
   identidade sem clarear a página. A regra repete com [data-cor] para empatar
   em especificidade com as paletas do escritório e vencer por vir depois. */
html.tema-escuro body.bg-gradient-to-br,
html.tema-escuro[data-cor] body.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #0b1120, #16233f) !important;
}
html.tema-escuro[data-cor="verde"] body.bg-gradient-to-br   { background-image: linear-gradient(to bottom right, #0a1a14, #0d3b2c) !important; }
html.tema-escuro[data-cor="roxo"] body.bg-gradient-to-br    { background-image: linear-gradient(to bottom right, #150f28, #2a1a4d) !important; }
html.tema-escuro[data-cor="laranja"] body.bg-gradient-to-br { background-image: linear-gradient(to bottom right, #1a1208, #3a2408) !important; }
html.tema-escuro[data-cor="grafite"] body.bg-gradient-to-br { background-image: linear-gradient(to bottom right, #0b1120, #1e293b) !important; }
/* Cartão de módulo do Hub e o cartão do login ficam sobre esse degradê: sem uma
   borda eles se dissolvem no fundo. */
html.tema-escuro .bg-white\/5,
html.tema-escuro .bg-white\/10  { background-color: rgba(255, 255, 255, .06) !important; }

/* ===================== sombras e cartões ================================== */
html.tema-escuro .shadow,
html.tema-escuro .shadow-sm   { box-shadow: var(--t-sombra-s) !important; }
html.tema-escuro .shadow-md,
html.tema-escuro .shadow-lg   { box-shadow: var(--t-sombra-m) !important; }
html.tema-escuro .shadow-xl,
html.tema-escuro .shadow-2xl  { box-shadow: var(--t-sombra-g) !important; }
/* Sombra some no escuro; o que separa o cartão do fundo é a borda. */
html.tema-escuro .bg-white.shadow,
html.tema-escuro .bg-white.shadow-sm,
html.tema-escuro .bg-white.shadow-md,
html.tema-escuro .bg-white.shadow-lg,
html.tema-escuro .bg-white.rounded-xl,
html.tema-escuro .bg-white.rounded-lg,
html.tema-escuro .modal-box { border: 1px solid var(--t-line); }

/* Fundo branco escrito direto no atributo style (herança de telas antigas). */
html.tema-escuro [style*="background-color: white"],
html.tema-escuro [style*="background: white"],
html.tema-escuro [style*="background:#fff"],
html.tema-escuro [style*="background: #fff"],
html.tema-escuro [style*="background-color:#fff"],
html.tema-escuro [style*="background-color: #fff"] {
  background-color: var(--t-surface) !important;
  background: var(--t-surface) !important;
}

/* ==================== componentes próprios das telas ======================
   Cada um destes vivia com hex fixo no <style> da própria página e continuava
   claro no tema escuro. */

/* abas (comissões, financeiro, vendas, inadimplentes…) */
html.tema-escuro .tab-btn                   { color: var(--t-txt-2) !important; }
/* aba ativa: o fundo é sólido, então a tinta é branca — sem isto a regra da aba
   (que vem depois) devolvia o cinza por cima do azul e o rótulo sumia. */
html.tema-escuro .tab-btn.active,
html.tema-escuro .tab-btn.bg-blue-600,
html.tema-escuro .tab-btn.bg-blue-700,
html.tema-escuro .tab-btn.bg-blue-800,
html.tema-escuro .tab-btn.btn-primary       { color: #fff !important; }
html.tema-escuro .tab-btn:hover             { background-color: var(--t-surface-2) !important; color: var(--t-txt) !important; }
html.tema-escuro .tab-btn.active            { background-color: var(--t-accent-solido) !important; color: #fff !important; }
/* aba do admin: no claro a ativa é branca sobre a faixa cinza (mais clara que o
   trilho). No escuro ela também sobe um degrau, senão a selecionada parecia a
   apagada. */
html.tema-escuro .tab-active                { background-color: #41506a !important; color: #fff !important; box-shadow: none !important; }

/* filtros em pílula (agendamentos) */
html.tema-escuro .filtro-btn                { background-color: var(--t-surface-2) !important; color: var(--t-txt-2) !important; border-color: var(--t-line-2) !important; }
html.tema-escuro .filtro-btn:hover          { background-color: var(--t-surface-3) !important; }
html.tema-escuro .filtro-btn.ativo          { background-color: var(--t-info-bg) !important; color: var(--t-info-2) !important; border-color: var(--t-info-linha) !important; }

/* menu de colunas e chips de filtro (clientes, vendas) */
html.tema-escuro .col-dropdown              { background-color: var(--t-surface-2) !important; border-color: var(--t-line-2) !important; box-shadow: var(--t-sombra-g) !important; }
html.tema-escuro .col-dropdown button       { color: var(--t-txt-2) !important; }
html.tema-escuro .col-dropdown button:hover { background-color: var(--t-surface-3) !important; }
html.tema-escuro .col-dropdown button.ativo { background-color: var(--t-accent-bg) !important; color: var(--t-accent-2) !important; }
html.tema-escuro .col-dropdown hr           { border-color: var(--t-line) !important; }
html.tema-escuro .filter-chip               { background-color: var(--t-surface-3) !important; color: var(--t-txt-3) !important; }
html.tema-escuro th.filterable:hover        { background-color: var(--t-surface-3) !important; }
html.tema-escuro th.filterable:hover .filter-chip { background-color: var(--t-info-linha) !important; color: #fff !important; }
html.tema-escuro th.filterable.ativo        { background-color: var(--t-accent-bg) !important; }
html.tema-escuro th.filterable.ativo .filter-chip { background-color: var(--t-accent-solido) !important; color: #fff !important; }
html.tema-escuro .col-resize-handle:hover,
html.tema-escuro .col-resize-handle.resizing { background: rgba(96, 165, 250, .18); }
html.tema-escuro .col-resize-handle::after   { background: rgba(148, 163, 184, .45); }

/* grade de cotas (cotas-vendidas) — as cores dizem o estado da cota, então
   mudam de tom mas não de família. */
html.tema-escuro .cota-cell                 { background: var(--t-surface-2) !important; color: var(--t-txt-3) !important; border-color: var(--t-line-2) !important; }
html.tema-escuro .cota-cell.vendida         { background: var(--t-ok-bg) !important; color: var(--t-ok) !important; border-color: var(--t-ok-linha) !important; }
html.tema-escuro .cota-cell.vendida.clicavel:hover { background: #0a4429 !important; }
html.tema-escuro .cota-cell.reservada       { background: var(--t-roxo-bg) !important; color: var(--t-roxo) !important; border-color: var(--t-roxo-linha) !important; }
html.tema-escuro .cota-cell.sugerida        { background: var(--t-aviso-bg) !important; color: var(--t-aviso) !important; border-color: var(--t-aviso) !important; }
html.tema-escuro .cota-badge                { background: var(--t-erro-solido) !important; color: #fff !important; }

/* filtros dentro do cabeçalho da tabela (financeiro) */
html.tema-escuro .f-filtro                  { background: var(--t-input) !important; color: var(--t-txt) !important; border-color: var(--t-line-forte) !important; }
html.tema-escuro .f-th-sort:hover           { color: var(--t-accent-2) !important; }
html.tema-escuro .btn-novo                  { box-shadow: none !important; }

/* badges de status — pares fundo/texto conferidos um a um */
html.tema-escuro .badge-pendente     { background-color: var(--t-aviso-bg) !important; color: var(--t-aviso) !important; }
html.tema-escuro .badge-enviado,
html.tema-escuro .badge-conectado    { background-color: var(--t-ok-bg) !important; color: var(--t-ok) !important; }
html.tema-escuro .badge-erro         { background-color: var(--t-erro-bg) !important; color: var(--t-erro) !important; }
html.tema-escuro .badge-gerando      { background-color: var(--t-info-bg) !important; color: var(--t-info) !important; }
html.tema-escuro .badge-pago         { background-color: var(--t-teal-bg) !important; color: var(--t-teal) !important; }
html.tema-escuro .badge-bloqueado    { background-color: var(--t-laranja-bg) !important; color: var(--t-laranja) !important; }
html.tema-escuro .badge-hs           { background-color: var(--t-erro-bg) !important; color: var(--t-erro-2) !important; }
html.tema-escuro .badge-serello      { background-color: var(--t-roxo-bg) !important; color: var(--t-roxo) !important; }
html.tema-escuro .badge-desconectado { background-color: var(--t-surface-3) !important; color: var(--t-txt-3) !important; }

/* ===================== paletas alternativas do Hub ========================
   O escritório escolhe a cor da marca; no escuro só a nav e os realces mudam,
   o resto continua na mesma escala de superfícies. */
html[data-cor="verde"].tema-escuro nav.bg-blue-900   { background-color: #0b3b2c !important; }
html[data-cor="verde"].tema-escuro .bg-blue-50       { background-color: #06301c !important; }
html[data-cor="verde"].tema-escuro .text-blue-200,
html[data-cor="verde"].tema-escuro .text-blue-300    { color: #a7f3d0 !important; }
html[data-cor="verde"].tema-escuro .text-blue-400    { color: #6ee7b7 !important; }

html[data-cor="roxo"].tema-escuro nav.bg-blue-900    { background-color: #2a1a4d !important; }
html[data-cor="roxo"].tema-escuro .bg-blue-50        { background-color: #2a1a4d !important; }
html[data-cor="roxo"].tema-escuro .text-blue-200,
html[data-cor="roxo"].tema-escuro .text-blue-300     { color: #ddd6fe !important; }
html[data-cor="roxo"].tema-escuro .text-blue-400     { color: #c4b5fd !important; }

html[data-cor="laranja"].tema-escuro nav.bg-blue-900 { background-color: #3a2408 !important; }
html[data-cor="laranja"].tema-escuro .bg-blue-50     { background-color: #3a2408 !important; }
html[data-cor="laranja"].tema-escuro .text-blue-200,
html[data-cor="laranja"].tema-escuro .text-blue-300  { color: #fed7aa !important; }
html[data-cor="laranja"].tema-escuro .text-blue-400  { color: #fdba74 !important; }

/* No claro a paleta grafite pinta os realces de cinza-médio (#64748b). Sobre o
   fundo escuro isso dá 3.7:1 e some — aqui ela clareia. */
html[data-cor="grafite"].tema-escuro nav.bg-blue-900 { background-color: #111827 !important; }
html[data-cor="grafite"].tema-escuro .bg-blue-50     { background-color: var(--t-surface-2) !important; }
html[data-cor="grafite"].tema-escuro .text-blue-200,
html[data-cor="grafite"].tema-escuro .text-blue-300  { color: #e2e8f0 !important; }
html[data-cor="grafite"].tema-escuro .text-blue-400  { color: #cbd5e1 !important; }

/* =============================================================================
   CRM (crm.html) — a tela do CRM tem o próprio conjunto de tokens, herdado do
   layout dela. Os valores do modo escuro moram aqui, junto com o resto, e são
   os mesmos tons da escala acima.
   ========================================================================== */
html[data-theme="dark"], html.tema-escuro {
  --page: #0f172a;
  --surface: #1e293b;
  --surface-sunken: #273449;
  --ink: #f1f5f9;
  --ink-2: #cbd5e1;
  --ink-muted: #94a3b8;
  --hairline: #334155;
  --border: rgba(241, 245, 249, 0.16);
  --accent: #60a5fa;
  /* Fundo sólido de botão primário: azul mais fundo, para o texto branco chegar
     a 5.2:1. O --accent claro fica para texto, ícone e borda. */
  --accent-fill: #2563eb;
  --accent-dark: #93c5fd;
  --accent-tint: #17355a;
  --accent-2: #c084fc;
  --good: #4ade80;
  --good-text: #86efac;
  --good-tint: #06301c;
  --warning: #fbbf24;
  --warning-text: #fcd34d;
  --warning-tint: #2e2205;
  --serious: #fb923c;
  --critical: #f87171;
  --critical-tint: #3a1414;
  --violet: #c084fc;
  --violet-tint: #2a1a4d;
  --teal: #2dd4bf;
  --teal-text: #5eead4;
  --teal-tint: #06302e;
  --rose: #f472b6;
  --rose-tint: #3d0f28;
  --chrome: #16233f;
  /* Paleta dos gráficos: mesmas famílias do tema claro, clareadas para o fundo
     escuro. Sem isto o roxo (#7b3fa0) dava 2.1:1 e o KPI não se lia. */
  --rpt-roxo:#c084fc; --rpt-indigo:#818cf8; --rpt-azul:#7aa7f0; --rpt-teal:#4ecdc4;
  --rpt-ouro:#e8c766; --rpt-rosa:#f0728a; --rpt-verde:#5cd48a; --rpt-caramelo:#e0b184;
  --rpt-ceu:#8cc0ef; --rpt-lilas:#b18ce8; --rpt-cinza:#a1aec2;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-pop: 0 12px 34px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
}

/* ---- acabamentos do CRM que não vinham de token ---- */
/* Atalho "⌘K" dentro da busca: era branco a 10% com opacidade 0.75 sobre a nav
   escura — 2.6:1. */
html.tema-escuro .cmdk-kbd { background: rgba(255, 255, 255, .14) !important; color: #dbe3f5 !important; opacity: 1 !important; }
html.tema-escuro .btn-primary:hover { background: #1d4ed8 !important; }
/* Faixa lateral do WhatsApp e blocos que herdaram branco fixo do tema claro. */
html.tema-escuro .qa-card-head { color: #fff !important; }
/* Coluna do funil: no claro ela é um trilho cinza com os cartões brancos por
   cima. No escuro o trilho precisa ficar MAIS FUNDO que o cartão, senão a
   hierarquia inverte e os cartões parecem buracos. */
html.tema-escuro .col { background: #172032 !important; }
html.tema-escuro .deal-card { background: var(--surface); border-color: var(--hairline); }

/* Espelho escuro do ajuste de contraste feito no tema claro (css-src/style.css,
   seção “Legibilidade do tema claro”). Precisa existir: lá o seletor é
   `html .bg-red-50.text-red-500`, mais específico que a regra de cor deste
   arquivo — sem este espelho o vermelho escuro do tema claro vazava para o
   fundo escuro e o botão “Remover” ficava em 2.5:1. */
html.tema-escuro .bg-red-100.text-red-600,
html.tema-escuro .bg-red-50.text-red-400,
html.tema-escuro .bg-red-50.text-red-500,
html.tema-escuro .bg-red-50.text-red-600 { color: var(--t-erro) !important; }
html.tema-escuro .bg-amber-100.text-amber-600,
html.tema-escuro .bg-amber-100.text-amber-700,
html.tema-escuro .bg-amber-50.text-amber-600,
html.tema-escuro .bg-yellow-100.text-yellow-600,
html.tema-escuro .bg-yellow-100.text-yellow-700,
html.tema-escuro .bg-yellow-50.text-yellow-600 { color: var(--t-aviso) !important; }
html.tema-escuro .bg-emerald-50.text-emerald-600,
html.tema-escuro .bg-green-100.text-green-600,
html.tema-escuro .bg-green-50.text-green-600 { color: var(--t-ok) !important; }
html.tema-escuro .bg-orange-100.text-orange-600,
html.tema-escuro .bg-orange-50.text-orange-500,
html.tema-escuro .bg-orange-50.text-orange-600 { color: var(--t-laranja) !important; }
html.tema-escuro .bg-blue-100.text-blue-600,
html.tema-escuro .bg-blue-50.text-blue-500 { color: var(--t-info) !important; }
html.tema-escuro .bg-purple-100.text-purple-600,
html.tema-escuro .bg-purple-50.text-purple-600 { color: var(--t-roxo) !important; }
html.tema-escuro .bg-indigo-50.text-indigo-600 { color: var(--t-indigo) !important; }
html.tema-escuro .bg-teal-100.text-teal-600 { color: var(--t-teal) !important; }
html.tema-escuro .bg-pink-100.text-pink-600 { color: var(--t-rosa) !important; }
