/* =====================================================================
   TEMAS VISUAIS
   - Portal SÓ da Lead Hub: o tema já vale desde o login.
   - O app.js coloca no <html>:
       data-tema="leadhub"   → identidade da Lead Hub
       data-modo="dia"   | "noite"     → escolha da pessoa (botão ☀/🌙)
   - As cores ficam em variáveis; o resto do site só usa as variáveis.
   ===================================================================== */

/* ---------- Padrão (base, antes do JavaScript carregar) ---------- */
:root {
  /* Paleta principal no formato "R G B" (usada pelo Tailwind como navy-xxx) */
  --c-950: 10 18 32;  --c-900: 15 27 45;  --c-800: 22 38 63;
  --c-700: 30 52 86;  --c-600: 39 68 114; --c-500: 51 90 148;

  --pagina: #f1f5f9;        /* fundo da página */
  --superficie: #ffffff;    /* cards */
  --superficie-2: #f8fafc;  /* áreas internas, hover */
  --borda: #e2e8f0;
  --borda-forte: #cbd5e1;
  --texto: #1e293b;
  --texto-suave: #64748b;
  --titulo: rgb(var(--c-900));
  --btn: rgb(var(--c-900));  /* botões principais e ícones */
  --btn-texto: #ffffff;
  --logo-fundo: rgb(var(--c-600));
  --logo-texto: #ffffff;
  --rotulo-hero: rgb(191 219 254 / .8);
  --fonte-titulo: 'Inter', system-ui, sans-serif;
}

/* ---------- Lead Hub · Dia ----------
   Escritório jurídico: grafite profundo, marfim e dourado. */
html[data-tema="leadhub"] {
  --c-950: 13 17 23;  --c-900: 26 31 39;  --c-800: 35 42 52;
  --c-700: 46 55 67;  --c-600: 160 125 53; --c-500: 201 165 90;

  --pagina: #f6f4ef;
  --superficie: #ffffff;
  --superficie-2: #faf8f3;
  --borda: #e7e1d3;
  --borda-forte: #d6ccb6;
  --texto: #2b2b2b;
  --texto-suave: #6f685c;
  --titulo: #1a1f27;
  --btn: #1a1f27;
  --btn-texto: #ecd9a3;
  --logo-fundo: linear-gradient(135deg, #d9bb72, #a98535);
  --logo-texto: #1a1f27;
  --rotulo-hero: #d4b469;
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --ouro: linear-gradient(90deg, #8f6d27, #e2c77e 50%, #8f6d27);
}

/* ---------- Lead Hub · Noite ---------- */
html[data-tema="leadhub"][data-modo="noite"] {
  --pagina: #0c0f13;
  --superficie: #151a21;
  --superficie-2: #1b2129;
  --borda: #2a313b;
  --borda-forte: #38414d;
  --texto: #e6e1d5;
  --texto-suave: #a39c8e;
  --titulo: #e2c77e;
  --btn: #c9a55a;
  --btn-texto: #151a21;
}

/* =====================================================================
   APLICAÇÃO DAS VARIÁVEIS (quando há data-tema)
   ===================================================================== */
html[data-tema] body.bg-slate-100 { background-color: var(--pagina); color: var(--texto); transition: background-color .25s, color .25s; }

html[data-tema] .bg-white { background-color: var(--superficie); }
html[data-tema] .bg-slate-50,
html[data-tema] .bg-slate-100,
html[data-tema] .hover\:bg-slate-50:hover { background-color: var(--superficie-2); }
html[data-tema] .border-slate-200 { border-color: var(--borda); }
html[data-tema] .border-slate-300 { border-color: var(--borda-forte); }
html[data-tema] .text-slate-800,
html[data-tema] .text-slate-700 { color: var(--texto); }
html[data-tema] .text-slate-600,
html[data-tema] .text-slate-500,
html[data-tema] .text-slate-400 { color: var(--texto-suave); }
html[data-tema] .text-navy-900 { color: var(--titulo); }

/* Botões principais e quadradinhos de ícone */
html[data-tema] .bg-navy-900.text-white,
html[data-tema] .peer:checked ~ .peer-checked\:bg-navy-900 { background-color: var(--btn); color: var(--btn-texto); }
html[data-tema] .bg-navy-900.text-white:hover { filter: brightness(1.12); }

/* Títulos com a fonte da empresa */
html[data-tema] :is(#tela-painel, #modal-informe) :is(h2, h3) { font-family: var(--fonte-titulo); }
html[data-tema="leadhub"] :is(#tela-painel, #modal-informe) :is(h2, h3) { font-weight: 700; letter-spacing: .01em; }
html[data-tema="leadhub"] #painel-titulo { font-weight: 600; }

/* Cabeçalho do painel */
#painel-empresa { color: var(--rotulo-hero); }
.marca-logo { background: var(--logo-fundo); color: var(--logo-texto); }
#painel-deco { position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); width: 18rem; height: 18rem; opacity: .07; pointer-events: none; color: #fff; }
#painel-deco svg { width: 100%; height: 100%; }
html[data-tema="leadhub"] #painel-deco { color: #e2c77e; opacity: .09; }

/* Faixa abaixo do cabeçalho: filete dourado */
.faixa-tema { height: 0; }
html[data-tema="leadhub"] .faixa-tema { height: 3px; background: var(--ouro); }
html[data-tema="leadhub"] #tela-painel > header { border-bottom: 1px solid rgb(201 165 90 / .35); }

/* Botão Dia/Noite */
.btn-modo { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgb(255 255 255 / .08); color: #fff; transition: background-color .15s; }
.btn-modo:hover { background: rgb(255 255 255 / .16); }
.btn-modo:focus-visible { outline: 2px solid rgb(var(--c-500)); outline-offset: 2px; }
html[data-tema="leadhub"] .btn-modo { color: #e2c77e; }

/* =====================================================================
   MODO NOITE: campos e cores de aviso
   ===================================================================== */
html[data-modo="noite"] :is(input, textarea, select) { background-color: var(--superficie-2); color: var(--texto); }
html[data-modo="noite"] :is(input, textarea)::placeholder { color: var(--texto-suave); opacity: .8; }
html[data-modo="noite"] { color-scheme: dark; }

html[data-modo="noite"] .bg-red-50     { background-color: rgb(239 68 68 / .14); }
html[data-modo="noite"] .bg-amber-50   { background-color: rgb(245 158 11 / .14); }
html[data-modo="noite"] .bg-emerald-50 { background-color: rgb(16 185 129 / .14); }
html[data-modo="noite"] .bg-blue-50    { background-color: rgb(59 130 246 / .16); }
html[data-modo="noite"] .bg-violet-50  { background-color: rgb(139 92 246 / .16); }
html[data-modo="noite"] :is(.text-red-600, .text-red-700)       { color: #fca5a5; }
html[data-modo="noite"] :is(.text-amber-700, .text-amber-800)   { color: #fcd34d; }
html[data-modo="noite"] .text-emerald-700 { color: #6ee7b7; }
html[data-modo="noite"] .text-blue-700    { color: #93c5fd; }
html[data-modo="noite"] .text-violet-700  { color: #c4b5fd; }
html[data-modo="noite"] .border-red-200     { border-color: rgb(239 68 68 / .35); }
html[data-modo="noite"] .border-amber-200   { border-color: rgb(245 158 11 / .35); }
html[data-modo="noite"] .border-emerald-200 { border-color: rgb(16 185 129 / .35); }
html[data-modo="noite"] .border-blue-200    { border-color: rgb(59 130 246 / .35); }
html[data-modo="noite"] .border-violet-200  { border-color: rgb(139 92 246 / .35); }

/* Botões de urgência selecionados */
html[data-modo="noite"] .peer:checked ~ .peer-checked\:bg-slate-100 { background-color: var(--superficie-2); color: var(--texto); border-color: var(--borda-forte); }
html[data-modo="noite"] .peer:checked ~ .peer-checked\:bg-amber-50  { background-color: rgb(245 158 11 / .16); color: #fcd34d; border-color: rgb(245 158 11 / .5); }
html[data-modo="noite"] .peer:checked ~ .peer-checked\:bg-red-50    { background-color: rgb(239 68 68 / .16); color: #fca5a5; border-color: rgb(239 68 68 / .5); }

/* Etiquetas de categoria e de PDF em dourado (visual sóbrio, sem várias cores) */
html[data-tema="leadhub"] :is(.selo-categoria, .selo-pdf) { background-color: rgb(201 165 90 / .12); color: #8a6a26; border-color: rgb(201 165 90 / .45); }
html[data-tema="leadhub"][data-modo="noite"] :is(.selo-categoria, .selo-pdf) { background-color: rgb(201 165 90 / .14); color: #e2c77e; }