/* =================================================================
 * 🌙 DARK MODE - PÁGINA PESQUISA ELEITORAL
 * Estilos consolidados para a versão escura.
 * ================================================================= */

/* --- 1. FUNDO E TEXTO BASE --- */
html.dark-mode body.pesquisa-eleitoral-page {
  background-color: #192125 !important;
  color: #e0e0e0 !important;
}

html.dark-mode .plataforma-section,
html.dark-mode .app-section,
html.dark-mode .beneficios-section,
html.dark-mode .seguranca-section,
html.dark-mode .tecnologias-section,
html.dark-mode #depoimentos,
html.dark-mode .section-solution,
html.dark-mode #relatorios {
  background: #263238 !important;
  color: #e0e0e0 !important;
}

/* TÍTULOS E SUBTÍTULOS */
html.dark-mode .title,
html.dark-mode .subtitle,
html.dark-mode .section-title,
html.dark-mode .lead,
html.dark-mode h2,
html.dark-mode h4,
html.dark-mode h5 {
  color: #fff !important;
}

html.dark-mode .section-label span {
  color: #00aaff !important;
  border-left-color: #00aaff !important;
}

html.dark-mode p,
html.dark-mode small {
  color: #bbb !important;
}

/* --- 2. CARDS --- */
html.dark-mode .plataforma-section .card,
html.dark-mode .solution-card,
html.dark-mode .info-card,
html.dark-mode .benefit-card,
html.dark-mode .seg-card,
html.dark-mode .tecnologia-card,
html.dark-mode .depoimento-card,
html.dark-mode .card-desenvolvimento,
html.dark-mode .custom-card {
  background-color: #37474f !important;
  color: #e0e0e0 !important;
  box-shadow: 0 6px 25px rgba(255, 255, 255, 0.05) !important;
  border: none !important;
}

/* Títulos e textos dentro dos cards */
html.dark-mode .card h4,
html.dark-mode .solution-card h4,
html.dark-mode .info-card h5,
html.dark-mode .benefit-card h4,
html.dark-mode .seg-card h4,
html.dark-mode .tecnologia-card h4,
html.dark-mode .depoimento-card .autor strong,
html.dark-mode .custom-card h5 {
  color: #fff !important;
}

html.dark-mode .card p,
html.dark-mode .solution-card p,
html.dark-mode .info-card p,
html.dark-mode .benefit-card small,
html.dark-mode .seg-card p,
html.dark-mode .tecnologia-card p,
html.dark-mode .depoimento-card p,
html.dark-mode .custom-card p {
  color: #bbb !important;
}

/* --- 3. CORES E ÍCONES ESPECÍFICOS --- */

/* SEÇÃO INICIAL */
html.dark-mode .inicio-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}
html.dark-mode .inicio-icons span i {
  color: #00aaff !important;
}

/* SEÇÃO PLATAFORMA */
html.dark-mode .plataforma-section .card .icon {
  background: linear-gradient(135deg, #0984e3, #29b6f6) !important;
}
html.dark-mode .plataforma-section .card .icon i {
  color: #fff !important; /* Garante que o ícone seja branco */
}
html.dark-mode .plataforma-section .card .icon {
  background: linear-gradient(135deg, #007bff, #00b0ff) !important;
}

/* SEÇÃO SOLUÇÃO */

html.dark-mode .section-solution .card-data-driven {
  /* Fundo e Borda (Consistente com o seu padrão de cards escuros: #37474f) */
  background-color: #37474f !important;
  border: none !important;

  /* Sombra (Consistente com o seu padrão de cards escuros) */
  box-shadow: 0 6px 25px rgba(255, 255, 255, 0.05) !important;

  /* Borda Superior (Mantendo o efeito degradê de destaque ciano/azul) */
  background-image: linear-gradient(to right, #00aaff, #29b6f6) !important;
  background-size: 100% 5px !important;
  background-repeat: no-repeat !important;
  background-position: top !important;

  /* Garante que as transições funcionem no dark mode */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- TEXTOS INTERNOS --- */

/* Títulos (h4) */
html.dark-mode .section-solution .card-data-driven .card-title {
  color: #fff !important; /* Branco puro para destaque (Consistente com o seu padrão) */
}

/* Descrição (p) */
html.dark-mode .section-solution .card-data-driven .card-description {
  color: #bbb !important; /* Cinza claro para o corpo do texto (Consistente com o seu padrão) */
}

/* --- EFEITOS HOVER --- */

html.dark-mode .section-solution .card-data-driven:hover {
  /* Mantém o efeito de subida */
  transform: translateY(-5px) !important;

  /* Aumenta a sombra no hover (Dá o efeito de "elevação" no Dark Mode) */
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1) !important;
}

/* --- ÍCONES (IMAGEM) --- */

/* Se o seu ícone for uma imagem que precisa de ajuste de brilho no Dark Mode: */
html.dark-mode .section-solution .card-data-driven .card-icon-container img {
  /* Exemplo: Inverte as cores para clarear ícones pretos em PNG/JPG (pode não ser necessário) */
  /* filter: invert(1); */
  /* Se for SVG, ele provavelmente já está claro ou tem a cor definida pelo CSS */
}

/* SEÇÃO APP */
html.dark-mode .info-card .icon {
  background: rgba(0, 170, 255, 0.1) !important;
}
html.dark-mode .info-card .icon svg path {
  stroke: #00aaff !important;
}
html.dark-mode .card-desenvolvimento {
  background: #262628 !important;
  color: #bbb !important;
}
html.dark-mode .card-desenvolvimento svg {
  color: #00aaff !important;
}

/* SEÇÃO BENEFÍCIOS */
html.dark-mode .benefit-card .label {
  background: rgba(0, 170, 255, 0.2) !important;
  color: #00aaff !important;
}
html.dark-mode .benefit-card:hover .label {
  background-color: #00aaff !important;
  color: #192125 !important;
}

/* SEÇÃO SEGURANÇA */
html.dark-mode .selo {
  border: 1px solid transparent !important;
}
html.dark-mode .selo.green {
  background: #00b89433 !important;
  color: #00b894 !important;
}
html.dark-mode .selo.blue {
  background: #0984e333 !important;
  color: #0984e3 !important;
}
html.dark-mode .selo.purple {
  background: #9b59b633 !important;
  color: #9b59b6 !important;
}

/* SEÇÃO TECNOLOGIAS */
html.dark-mode .tecnologia-card .icon-wrapper {
  background: rgba(255, 255, 255, 0.05) !important;
}
html.dark-mode .btn-detalhes.blue {
  background: linear-gradient(90deg, #007bff, #00b0ff) !important;
  color: #fff !important;
}
html.dark-mode .btn-detalhes.purple {
  background: linear-gradient(90deg, #a546ff, #e046ff) !important;
  color: #fff !important;
}
html.dark-mode .btn-detalhes.orange {
  background: linear-gradient(90deg, #ff7a00, #ff4500) !important;
  color: #fff !important;
}
html.dark-mode .btn-detalhes.teal {
  background: linear-gradient(90deg, #00b59c, #00e0b0) !important;
  color: #fff !important;
}

/* SEÇÃO DEPOIMENTOS */
html.dark-mode .depoimento-card::before {
  height: 4px !important;
}
html.dark-mode .depoimento-card.green::before,
html.dark-mode .depoimento-card.green .quote-icon,
html.dark-mode .depoimento-card.green .avatar {
  background: #06c270 !important;
}
html.dark-mode .depoimento-card.blue::before,
html.dark-mode .depoimento-card.blue .quote-icon,
html.dark-mode .depoimento-card.blue .avatar {
  background: #007bff !important;
}
html.dark-mode .depoimento-card.purple::before,
html.dark-mode .depoimento-card.purple .quote-icon,
html.dark-mode .depoimento-card.purple .avatar {
  background: #c44dff !important;
}
html.dark-mode .quote-icon svg path {
  stroke: #fff !important;
}

/* SEÇÃO RELATÓRIOS */
html.dark-mode .feature-card .icon i {
  color: #00aaff !important;
}

/* --- 4. BOTÕES GERAIS --- */
html.dark-mode .btn-primary,
html.dark-mode .btn-outline-light {
  color: #fff !important;
  border-color: #00aaff !important;
}
html.dark-mode .btn-primary {
  background-color: #00aaff !important;
}
html.dark-mode .btn-primary:hover {
  background-color: #055a89 !important;
  border-color: #055a89 !important;
}
html.dark-mode .btn-outline-light:hover {
  background-color: rgba(0, 170, 255, 0.1) !important;
}

html.dark-mode .app-buttons .btn-play:hover,
html.dark-mode .app-buttons .btn-store:hover {
  background: #055a89 !important;
}