/**
 * Focel — Tema escuro (por enquanto só na página inicial)
 * ---------------------------------------------------------------------------
 * Ativado por <html data-theme="dark">. O script no <head> do index.html
 * segue a configuração do computador/celular do visitante, a menos que ele
 * tenha escolhido um tema no botão sol/lua (guardado em localStorage).
 * Carregado por último para vencer os utilitários do Tailwind.
 * ---------------------------------------------------------------------------
 */

html[data-theme="dark"] {
  color-scheme: dark;

  /* Camada landing */
  --lp-canvas:        #050B16;
  --lp-canvas-deep:   #0C1B31;
  --lp-surface:       #15283F;
  --lp-ink-surface:   #0B2447;
  --lp-ink:           #F1F5FB;
  --lp-ink-soft:      #CBD6E6;
  --lp-ink-muted:     #9FB0C8;
  --lp-ink-faint:     #71839E;
  --lp-line:          rgba(255, 255, 255, 0.12);
  --lp-line-strong:   rgba(255, 255, 255, 0.22);
  --lp-shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.3);
  --lp-shadow-sm:     0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --lp-shadow-md:     0 12px 28px -12px rgba(0, 0, 0, 0.6);
  --lp-shadow-lg:     0 32px 64px -28px rgba(0, 0, 0, 0.7);

  /* Design system base */
  --color-primary:        #1E90E6;
  --color-primary-light:  #4FB3FF;
  --color-background:     #15283F;
  --color-surface:        #15283F;
  --color-surface-subtle: #0C1B31;
  --color-surface-card:   #15283F;
  --color-surface-muted:  #1B3150;
  --color-border:         rgba(255, 255, 255, 0.10);
  --color-border-active:  rgba(255, 255, 255, 0.18);
  --color-text-title:     #F1F5FB;
  --color-text-body:      #CBD6E6;
  --color-text-muted:     #9FB0C8;
  --color-text-light:     #71839E;
}

html[data-theme="dark"],
html[data-theme="dark"] body { background-color: var(--lp-canvas); }

/* Cores escritas direto no HTML (utilitários do Tailwind) */
html[data-theme="dark"] .text-\[\#0A2247\] { color: var(--lp-ink); }
html[data-theme="dark"] .text-\[\#47597A\] { color: var(--lp-ink-soft); }
html[data-theme="dark"] .text-\[\#7C8CA6\] { color: var(--lp-ink-muted); }
html[data-theme="dark"] .text-\[\#005F99\] { color: #4FB3FF; }
html[data-theme="dark"] .text-\[\#4A8FCC\] { color: #6CC0FF; }
html[data-theme="dark"] .bg-white { background-color: var(--lp-surface); }
html[data-theme="dark"] .bg-\[\#F4F7FB\],
html[data-theme="dark"] .hover\:bg-\[\#F4F7FB\]:hover { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .border-\[rgba\(12\2c 48\2c 97\2c 0\.10\)\] { border-color: var(--lp-line); }
html[data-theme="dark"] [style*="rgba(12,48,97,0.10)"] { border-color: var(--lp-line) !important; }

/* ---------- Botão sol/lua ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--lp-line-strong);
  background: transparent;
  color: var(--lp-ink);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.theme-toggle:hover { background: rgba(127, 160, 200, 0.12); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }

/* ---------- Logo: versão branca no tema escuro ---------- */
.logo-escuro { display: none; width: auto; aspect-ratio: 623 / 170; object-fit: cover; object-position: top; }
html[data-theme="dark"] .logo-claro { display: none; }
html[data-theme="dark"] .logo-escuro { display: block; }

/* ---------- Cabeçalho e menu mobile ---------- */
html[data-theme="dark"] .navbar-sticky { background-color: rgba(7, 17, 31, 0.72); }
html[data-theme="dark"] .navbar-sticky.navbar-scrolled {
  background-color: rgba(7, 17, 31, 0.9);
  box-shadow: 0 8px 28px -22px rgba(0, 0, 0, 0.8);
}
html[data-theme="dark"] .mobile-drawer { background-color: var(--lp-canvas); }

/* ---------- Componentes com branco fixo no CSS ---------- */
html[data-theme="dark"] .lp-panel-bar { background: linear-gradient(180deg, var(--lp-surface), var(--lp-canvas)); }
html[data-theme="dark"] .in-vitrine-foot {
  background: linear-gradient(180deg, var(--lp-canvas), var(--lp-surface));
  color: #4FB3FF;
}
html[data-theme="dark"] .lp-strip-item span { color: var(--lp-ink-soft); }
html[data-theme="dark"] .lp-chip--ok { background: rgba(52, 211, 153, 0.12); color: #6EE7B7; }

/* Etiquetas coloridas (consultoria, treinamento, software, estrutura) em tons claros */
html[data-theme="dark"] .in-kind--consultoria { color: #4FB3FF; border-color: rgba(79, 179, 255, 0.35); background: rgba(79, 179, 255, 0.10); }
html[data-theme="dark"] .in-kind--treinamento { color: #C4B5FD; border-color: rgba(196, 181, 253, 0.35); background: rgba(196, 181, 253, 0.10); }
html[data-theme="dark"] .in-kind--software    { color: #6EE7B7; border-color: rgba(110, 231, 183, 0.35); background: rgba(110, 231, 183, 0.10); }
html[data-theme="dark"] .in-kind--estrutura   { color: #FCD34D; border-color: rgba(252, 211, 77, 0.35); background: rgba(252, 211, 77, 0.10); }

/* Etiquetas das peças 3D do hero: vidro escuro em vez de branco */
html[data-theme="dark"] .fh-tag:not(.is-active):not(.fh-tag--result) {
  background: rgba(14, 28, 49, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}

/* Logos de clientes: muitos são escuros, então o cartão fica claro */
html[data-theme="dark"] .in-logo {
  background: #E9EEF5;
  border-color: transparent;
}

/* Menu "Serviços" */
html[data-theme="dark"] .nav-dropdown-menu { background-color: var(--lp-surface); }
html[data-theme="dark"] .lp-mega-tag--free { color: #6EE7B7; border-color: rgba(110, 231, 183, 0.35); }
/* As logos são JPG com fundo branco: "multiply" faz o branco assumir a cor
   do cartão, e o quadrado da imagem desaparece. */
html[data-theme="dark"] .in-logo img { mix-blend-mode: multiply; }

/* Seções: "branca" vira um azul intermediário, alternando com o fundo mais
   escuro (canvas); os cartões (surface) ficam um degrau acima das duas. */
html[data-theme="dark"] .lp-bg-white { background-color: #0B1628; }
html[data-theme="dark"] .lp-strip,
html[data-theme="dark"] .lp-strip-item { background-color: #0B1628; }

/* Transição suave entre seções: cada seção começa e termina no mesmo tom
   intermediário (--tema-divisa) e chega à sua cor própria em ~160px.
   Assim, na divisa entre duas seções, os dois lados têm a mesma cor. */
html[data-theme="dark"] { --tema-divisa: #08111F; }
html[data-theme="dark"] .lp-section.lp-bg-canvas,
html[data-theme="dark"] .lp-section.lp-bg-white,
html[data-theme="dark"] .lp-section.lp-bg-deep {
  --tema-secao: var(--lp-canvas);
  background-color: var(--tema-secao);
  background-image: linear-gradient(180deg,
    var(--tema-divisa) 0,
    var(--tema-secao) 160px,
    var(--tema-secao) calc(100% - 160px),
    var(--tema-divisa) 100%);
  border-top-color: transparent !important;
}
html[data-theme="dark"] .lp-section.lp-bg-white { --tema-secao: #0B1628; }
html[data-theme="dark"] .lp-section.lp-bg-deep  { --tema-secao: var(--lp-canvas-deep); }

/* ---------- Utilitários do Tailwind usados nas outras páginas ---------- */
html[data-theme="dark"] .text-\[\#0C3061\],
html[data-theme="dark"] .text-slate-800 { color: var(--lp-ink); }
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600 { color: var(--lp-ink-soft); }
html[data-theme="dark"] .text-slate-500 { color: var(--lp-ink-muted); }

html[data-theme="dark"] .bg-slate-50 { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-200\/60,
html[data-theme="dark"] .border-slate-200\/80 { border-color: var(--lp-line); }

/* Tons coloridos claros viram fundos translúcidos e textos claros */
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-blue-50\/70   { background-color: rgba(79, 179, 255, 0.10); }
html[data-theme="dark"] .bg-blue-100      { background-color: rgba(79, 179, 255, 0.16); }
html[data-theme="dark"] .bg-emerald-50    { background-color: rgba(110, 231, 183, 0.10); }
html[data-theme="dark"] .bg-emerald-100   { background-color: rgba(110, 231, 183, 0.16); }
html[data-theme="dark"] .bg-amber-50\/70  { background-color: rgba(252, 211, 77, 0.10); }
html[data-theme="dark"] .bg-orange-50     { background-color: rgba(253, 186, 116, 0.10); }
html[data-theme="dark"] .bg-rose-50       { background-color: rgba(253, 164, 175, 0.10); }
html[data-theme="dark"] .bg-purple-100    { background-color: rgba(196, 181, 253, 0.16); }

html[data-theme="dark"] .border-blue-100,
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .hover\:border-blue-200:hover { border-color: rgba(79, 179, 255, 0.35); }
html[data-theme="dark"] .border-emerald-200 { border-color: rgba(110, 231, 183, 0.35); }
html[data-theme="dark"] .border-amber-200   { border-color: rgba(252, 211, 77, 0.35); }

html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800\/80 { color: #7CC4FF; }
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-900 { color: #6EE7B7; }
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-900   { color: #FCD34D; }
html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-orange-700  { color: #FDBA74; }
html[data-theme="dark"] .text-rose-600    { color: #FDA4AF; }
html[data-theme="dark"] .text-purple-700  { color: #C4B5FD; }
/* Mensagem de erro dos formulários (vermelho escuro fica ilegível no escuro) */
html[data-theme="dark"] [style*="#B91C1C"] { color: #FCA5A5 !important; }

/* ---------- Páginas internas ---------- */
/* Hero das páginas internas: o degradê começava em branco */
html[data-theme="dark"] .lp-hero {
  background: linear-gradient(180deg, #0B1628 0%, var(--lp-canvas) 62%, var(--lp-canvas) 100%);
}

/* Planos: coluna em destaque e observações verdes */
html[data-theme="dark"] .in-plan-table .is-featured { background: rgba(79, 179, 255, 0.08); }
html[data-theme="dark"] .in-plan-table tbody tr:hover .is-featured { background: rgba(79, 179, 255, 0.14); }
html[data-theme="dark"] .in-plan-table thead .is-featured { color: #4FB3FF; }
html[data-theme="dark"] .in-plan-options em,
html[data-theme="dark"] .in-gfh-rank b { color: #6EE7B7; }

/* Níveis (1, 2, 3) */
html[data-theme="dark"] .in-level.in-level--1 { color: #FCD34D; background: rgba(252, 211, 77, 0.10); border-color: rgba(252, 211, 77, 0.35); }
html[data-theme="dark"] .in-level.in-level--2 { color: #4FB3FF; background: rgba(79, 179, 255, 0.10); border-color: rgba(79, 179, 255, 0.35); }
html[data-theme="dark"] .in-level.in-level--3 { color: #6EE7B7; background: rgba(110, 231, 183, 0.10); border-color: rgba(110, 231, 183, 0.35); }

/* Links azuis escuros */
html[data-theme="dark"] .in-legal a,
html[data-theme="dark"] .in-dl-file,
html[data-theme="dark"] .in-dl-file svg { color: #4FB3FF; }
html[data-theme="dark"] .in-dl-file:hover { border-color: #4FB3FF; }

/* Ilustração de aparelhos (tecnologia.html): representa telas de sistema,
   então mantém sempre as cores claras originais. */
html[data-theme="dark"] .in-dev {
  --lp-canvas:        #FAFBFD;
  --lp-canvas-deep:   #F4F7FB;
  --lp-surface:       #FFFFFF;
  --lp-ink:           #0A2247;
  --lp-ink-soft:      #47597A;
  --lp-ink-muted:     #7C8CA6;
  --lp-ink-faint:     #A6B3C7;
  --lp-line:          rgba(12, 48, 97, 0.10);
  --lp-line-strong:   rgba(12, 48, 97, 0.16);
  --color-primary:        #005F99;
  --color-primary-light:  #4A8FCC;
  color-scheme: light;
}

/* Produção acadêmica (sobre.html) */
html[data-theme="dark"] .in-pub-year { background: rgba(79, 179, 255, 0.12); color: #4FB3FF; }
html[data-theme="dark"] .in-pub-stat b { color: #4FB3FF; }
html[data-theme="dark"] .in-book-cover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 28px -10px rgba(0, 0, 0, 0.75); }

/* INPI */
html[data-theme="dark"] .in-inpi-selo { color: #6EE7B7; border-color: rgba(110, 231, 183, 0.35); background: rgba(110, 231, 183, 0.10); }
html[data-theme="dark"] .in-inpi-top .lp-icon { color: #6EE7B7; background: rgba(110, 231, 183, 0.10); border-color: rgba(110, 231, 183, 0.25); }