/* =============================================================================
   Projesun — Surgical CSS Fix v2
   Carregado APÓS o bundle. Cobertura ampliada para dark mode.
   =============================================================================
   Contexto: o bundle React usa as seguintes classes (grep 2026-07-18):
     - dark:bg-slate-800/50 (2x)
     - dark:bg-slate-800 (70x)
     - dark:bg-slate-900 (49x)
     - dark:bg-slate-700 (8x)
     - dark:bg-stone-800 (2x)
     - dark:bg-stone-900 (4x)
     - bg-stone-900/40 (1x) — card empty state dark
     - bg-stone-900/60 (1x) — banner Consórcio dark
   Bug original: eu usei `.dark .bg-slate-900/50` que não existia no bundle.
   Esta v2 cobre TODOS os painéis translúcidos/sólidos.
   ============================================================================= */

/* ── Mudança 1: Texto destaque do hero (mantém da v1) ─────────────────── */
.text-4xl > .text-emerald-400,
.text-4xl > span.text-emerald-400 {
  color: #047857; /* emerald-700 */
}

/* ── Mudança 2: Borda em TODOS os painéis escuros (slate/stone 800-900) ── */
.dark .bg-slate-800,
.dark .bg-slate-900,
.dark .bg-slate-800\/50,
.dark .bg-slate-900\/50,
.dark .bg-stone-800,
.dark .bg-stone-900,
.dark .bg-stone-900\/40,
.dark .bg-stone-900\/50,
.dark .bg-stone-900\/60,
.dark .bg-stone-900\/5 {
  border: 1px solid rgb(51 65 85); /* slate-700 sólido (Opção B) */
}

/* ── Mudança 3 (BONUS): Cor `stone-850` que o React usa mas o Tailwind v4 não define */
:root {
  --color-stone-850: #1f1c1a; /* tom entre stone-800 e stone-900 */
}
.bg-stone-850 {
  background-color: var(--color-stone-850);
}
.border-stone-850 {
  border-color: var(--color-stone-850);
}

/* ── Mudança 4: Logo "projesun" no HEADER → imagem PNG oficial
   Mostra /assets/logo-projesun-oficial.png (2433x829, aspect 2.93).
   Logo maior e mais próxima do "Inicial" (margin-left/right negativos). */
.text-2xl.md\:text-3xl.font-black.text-slate-900.dark\:text-white.tracking-tighter.m-0.flex.items-center {
  font-size: 0 !important;            /* esconde "proje" */
  color: transparent !important;       /* garante invisibilidade */
  text-indent: -9999px !important;     /* fallback pra screen readers */
  background-image: url('/assets/logo-projesun-oficial.png') !important;
  background-repeat: no-repeat !important;
  background-size: auto 64px !important;  /* 64px de altura, largura proporcional (2433:829 = 2.93 → 188px) */
  background-position: left center !important;
  width: 200px !important;             /* maior que antes (era 130px) */
  height: 64px !important;            /* maior que antes (era 48px) */
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: -8px !important;        /* puxa pra esquerda (esconde gap) */
  margin-right: -16px !important;      /* puxa pra perto do "Inicial" */
}
.text-2xl.md\:text-3xl.font-black.text-slate-900.dark\:text-white.tracking-tighter.m-0.flex.items-center > span {
  font-size: 0 !important;            /* esconde "sun" também */
  display: none !important;
}

/* ── Mudança 5: Logo "projesun" no FOOTER (mesmo padrão, mas classe diferente)
   Logo ainda maior no footer porque tem mais espaço. */
.text-2xl.md\:text-3xl.font-black.text-white.tracking-tighter.m-0.flex.items-center {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  background-image: url('/assets/logo-projesun-oficial.png') !important;
  background-repeat: no-repeat !important;
  background-size: auto 80px !important;  /* ainda maior no footer */
  background-position: left center !important;
  width: 250px !important;             /* maior no footer */
  height: 80px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.text-2xl.md\:text-3xl.font-black.text-white.tracking-tighter.m-0.flex.items-center > span {
  font-size: 0 !important;
  display: none !important;
}

/* ── Mudança 6: Simulador Solar — card "branco" que não escurece
   O card principal do simulador (lg:col-span-5 bg-white) e os cards
   internos (bg-white dark:bg-slate-800) têm cores hardcoded sem variante
   dark: em alguns lugares. Aplica só dentro do simulador pra não
   quebrar outros cards brancos do site. */
.dark .lg\:col-span-5.bg-white {
  background-color: var(--color-slate-800, #1e293b) !important;
  border-color: var(--color-slate-700, #334155) !important;
}
/* Textos dentro do simulador card principal */
.dark .lg\:col-span-5.bg-white .text-slate-900 {
  color: var(--color-slate-100, #f1f5f9) !important;
}
.dark .lg\:col-span-5.bg-white .text-slate-500,
.dark .lg\:col-span-5.bg-white .text-slate-400 {
  color: var(--color-slate-400, #94a3b8) !important;
}

/* Cards internos (GERAÇÃO, PLACAS, RETORNO) — eles JÁ têm dark:bg-slate-800
   mas o texto (text-slate-900) é hardcoded e some no fundo escuro */
.dark .bg-white.dark\:bg-slate-800 .text-slate-900 {
  color: var(--color-slate-100, #f1f5f9) !important;
}
.dark .bg-white.dark\:bg-slate-800 .text-slate-500,
.dark .bg-white.dark\:bg-slate-800 .text-slate-400 {
  color: var(--color-slate-400, #94a3b8) !important;
}
.dark .bg-white.dark\:bg-slate-800 .border-slate-200 {
  border-color: var(--color-slate-700, #334155) !important;
}

/* ── Mudança 7: Página /#projetos-condominios
   - Card "Agendar pré-vistoria" (bg-slate-900 text-white): intencional
     dark em qualquer modo (é callout de destaque, mantém OK)
   - FAQ items do Síndicos (bg-white dark:bg-slate-800 button.text-slate-800):
     texto some no dark mode */
.dark #booking_sindico_form .bg-slate-900.text-white,
.dark #booking_sindico_form .bg-slate-900 {
  /* Mantém escuro (intencional) */
}
.dark .bg-white.dark\:bg-slate-800 button.text-slate-800,
.dark .bg-white.dark\:bg-slate-800 .text-slate-800 {
  color: var(--color-slate-100, #f1f5f9) !important;
}