/* ============================================================
   DARK MODE — CENECTION
   Para mudar as cores do modo escuro, edite as variáveis abaixo:
   --dark-bg-primary   → fundo das seções brancas / form panel
   --dark-bg-secondary → fundo do body e seções cinza-claro
   --dark-surface      → cards, caixas, painéis
   --dark-border       → bordas
   --dark-input-bg     → fundo dos campos de input
   --dark-text         → texto principal
   --dark-muted        → texto secundário / placeholder
============================================================ */

:root {
    --dark-bg-primary:   #2c2032;
    --dark-bg-secondary: #33223f;
    --dark-surface:      #4B2E83;
    --dark-border:       rgba(255, 255, 255, 0.12);
    --dark-input-bg:     #3a2550;
    --dark-text:         #e8e8f0;
    --dark-muted:        #b0a8c0;
}

/* ===== HOMEPAGE ===== */
[data-theme="dark"] body {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text);
}

[data-theme="dark"] .features-section,
[data-theme="dark"] .faq-section {
    background-color: var(--dark-bg-primary);
}

[data-theme="dark"] .about-section,
[data-theme="dark"] .plans-section {
    background-color: var(--dark-bg-secondary);
}

[data-theme="dark"] .about-highlight,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .faq-item {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

[data-theme="dark"] .faq-item {
    border-color: rgba(106, 62, 167, 0.4);
}

[data-theme="dark"] .feature-title,
[data-theme="dark"] .about-highlight h4,
[data-theme="dark"] .faq-question,
[data-theme="dark"] .section-title,
[data-theme="dark"] .about-story-content h3,
[data-theme="dark"] .about-quote p {
    color: var(--dark-text);
}

/* No modo escuro, o título principal deixa de usar o gradiente roxo
   para manter contraste e leitura confortável. */
[data-theme="dark"] .hero-title-gradient,
[data-theme="dark"] .hero-section h1 {
    background: none;
    -webkit-text-fill-color: var(--dark-text);
    color: var(--dark-text);
    animation: none;
}

[data-theme="dark"] .about-eyebrow {
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
}

[data-theme="dark"] .about-quote {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.06));
    border-left-color: #a78bfa;
}

[data-theme="dark"] .about-quote-mark {
    color: #c4b5fd;
}

[data-theme="dark"] .about-carousel {
    background: var(--dark-surface);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] .about-carousel-btn {
    background: rgba(42, 30, 50, 0.82);
    color: #e9ddff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .about-carousel-btn:hover {
    background: #4B2E83;
}


[data-theme="dark"] .about-highlight p,
[data-theme="dark"] .faq-answer p,
[data-theme="dark"] .about-text {
    color: var(--dark-muted);
}

[data-theme="dark"] .soon-badge {
    background: var(--dark-surface);
}

[data-theme="dark"] .plan-super {
    background-image: linear-gradient(var(--dark-surface), var(--dark-surface)),
                      linear-gradient(var(--angulo, 45deg), #6640d1, #ffd700);
}

/* A regra genérica de .plan-card acima (border-color: var(--dark-border))
   apaga a cor de borda de cada plano no escuro. Devolvendo a cor própria
   de cada um — mesmo esquema do modo claro (grátis = roxo, premium =
   dourado; super já resolve sozinho via gradiente acima). */
[data-theme="dark"] .plan-free {
    border-color: var(--primary, #8b5fc7);
}

[data-theme="dark"] .plan-premium {
    border-color: #FFD700;
}

/* ===== LOGIN / CADASTRO / CÓDIGO / CONFIRMAÇÃO / REDEFINIR ===== */
[data-theme="dark"] .login-wrapper,
[data-theme="dark"] .signup-wrapper {
    background: var(--dark-bg-primary);
}

[data-theme="dark"] .form-panel {
    background-color: var(--dark-bg-primary);
}

[data-theme="dark"] .form-header h1,
[data-theme="dark"] .form-header p strong,
[data-theme="dark"] .input-group label,
[data-theme="dark"] .step-labels span.active,
[data-theme="dark"] .checkbox-label {
    color: var(--dark-text);
}

[data-theme="dark"] .form-header p,
[data-theme="dark"] .resend-note,
[data-theme="dark"] .step-labels span {
    color: var(--dark-muted);
}

[data-theme="dark"] .input-wrapper input,
[data-theme="dark"] .otp-input {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

[data-theme="dark"] .input-wrapper input::placeholder,
[data-theme="dark"] .otp-input::placeholder {
    color: var(--dark-muted);
}

[data-theme="dark"] .input-wrapper input:focus,
[data-theme="dark"] .otp-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18);
}

[data-theme="dark"] .otp-input.filled {
    background-color: rgba(106, 62, 167, 0.3);
    border-color: #8b5cf6;
    color: #d4b8ff;
}

[data-theme="dark"] .input-icon,
[data-theme="dark"] .toggle-password {
    color: var(--dark-muted);
}

[data-theme="dark"] .divider-line::before,
[data-theme="dark"] .divider-line::after {
    border-bottom-color: var(--dark-border);
}

[data-theme="dark"] .divider-line span {
    color: var(--dark-muted);
}

[data-theme="dark"] .btn-social {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

[data-theme="dark"] .btn-social:hover {
    border-color: #8b5cf6;
}

[data-theme="dark"] .strength-bar,
[data-theme="dark"] .step-line {
    background: var(--dark-border);
}

[data-theme="dark"] .step {
    background: var(--dark-input-bg);
    color: var(--dark-muted);
}

/* O passo ativo (roxo) e o concluído (verde) devem se destacar
   igualmente nos dois temas — não usam as cores neutras do modo escuro. */
[data-theme="dark"] .step.active {
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.5);
}
[data-theme="dark"] .step.done {
    background: var(--success);
    color: #ffffff;
}

[data-theme="dark"] .info-box {
    background: rgba(106, 62, 167, 0.2);
    border-color: rgba(139, 92, 246, 0.3);
}

/* ===== GUIA DE POSTURA ===== */
[data-theme="dark"] .card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .feature-card {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

[data-theme="dark"] .card h2,
[data-theme="dark"] .step-card h4,
[data-theme="dark"] .feature-card h4,
[data-theme="dark"] .hero-section h1,
[data-theme="dark"] .info-section h3 {
    color: var(--dark-text);
}

[data-theme="dark"] .card-description,
[data-theme="dark"] .hero-section p,
[data-theme="dark"] .step-card p,
[data-theme="dark"] .feature-card p,
[data-theme="dark"] #status,
[data-theme="dark"] .processing-text {
    color: var(--dark-muted);
}

[data-theme="dark"] .upload-zone {
    border-color: var(--dark-border);
    background: var(--dark-input-bg);
}

[data-theme="dark"] .upload-zone:hover {
    border-color: #8b5cf6;
    background: rgba(106, 62, 167, 0.2);
}

[data-theme="dark"] .upload-text {
    color: var(--dark-text);
}

[data-theme="dark"] .resultado-content {
    background: var(--dark-input-bg);
    border-left-color: #8b5cf6;
}

[data-theme="dark"] .resultado-content pre {
    color: var(--dark-text);
}

[data-theme="dark"] .diagnostico-box {
    background: var(--dark-input-bg);
    border-color: var(--dark-border);
}

[data-theme="dark"] .diag-obs li {
    color: var(--dark-text);
    border-bottom-color: var(--dark-border);
}

[data-theme="dark"] .diag-sub {
    color: var(--dark-muted);
}

[data-theme="dark"] .ia-comentario-box {
    background: rgba(106, 62, 167, 0.2);
    border-color: rgba(139, 92, 246, 0.35);
}

[data-theme="dark"] .ia-comentario-texto {
    color: var(--dark-text);
}

[data-theme="dark"] .progress-bar {
    background: var(--dark-border);
}

[data-theme="dark"] .btn-secondary {
    background: var(--dark-input-bg);
    color: #c4b5fd;
    border-color: #8b5cf6;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #6a3ea7;
    color: white;
}

[data-theme="dark"] .btn-remove {
    background: var(--dark-input-bg);
}

/* ===== GUIA DE VOCABULÁRIO ===== */
[data-theme="dark"] .prompt-card {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

[data-theme="dark"] .prompt-card:hover {
    background-color: rgba(106, 62, 167, 0.5);
}

[data-theme="dark"] .prompt-content p,
[data-theme="dark"] .prompt-card div p {
    color: var(--dark-text);
}

[data-theme="dark"] .message.ai .message-bubble {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

[data-theme="dark"] .input-area {
    background-color: var(--dark-bg-primary);
    border-top-color: var(--dark-border);
}

[data-theme="dark"] .message-input {
    background-color: var(--dark-input-bg);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

[data-theme="dark"] .message-input::placeholder {
    color: var(--dark-muted);
}

[data-theme="dark"] .input-label {
    color: var(--dark-muted);
}

[data-theme="dark"] .history-sidebar {
    background-color: var(--dark-bg-primary);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .history-header {
    background-color: var(--dark-bg-secondary);
    border-bottom-color: var(--dark-border);
}

[data-theme="dark"] .history-header h3 {
    color: var(--dark-text);
}

[data-theme="dark"] .history-item {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

[data-theme="dark"] .history-item:hover {
    background-color: rgba(106, 62, 167, 0.4);
}

[data-theme="dark"] .history-item.active {
    background-color: rgba(106, 62, 167, 0.5);
    border-color: #8b5cf6;
}

[data-theme="dark"] .history-item-title {
    color: var(--dark-text);
}

[data-theme="dark"] .history-item-date {
    color: var(--dark-muted);
}

[data-theme="dark"] .prompt-card.selected {
    background-color: rgba(106, 62, 167, 0.35);
    border-color: #8b5cf6;
}

[data-theme="dark"] .title,
[data-theme="dark"] .subtitle {
    color: var(--dark-text);
}

[data-theme="dark"] .hero-subtitle {
    color: #ffd700;
}

/* No modo escuro o H1 da home fica branco sólido em vez do
   gradiente roxo, para combinar melhor com o fundo escuro. */
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-title-gradient {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    animation: none;
}

/* ===== BOTÃO MODO ESCURO (todas as páginas) ===== */
.dark-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.dark-mode-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.dark-mode-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#darkModeBtn {
    width: 42px;
}

/* ===== GUIA DE VOZ ===== */
[data-theme="dark"] .main-container {
    color: var(--dark-text);
}

[data-theme="dark"] .hero-section h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .info-section h3,
[data-theme="dark"] .step-card h4,
[data-theme="dark"] .feature-card h4 {
    color: var(--dark-text);
}

[data-theme="dark"] .hero-section p,
[data-theme="dark"] .card-description,
[data-theme="dark"] .step-card p,
[data-theme="dark"] .feature-card p,
[data-theme="dark"] .mic-hint {
    color: var(--dark-muted);
}

[data-theme="dark"] .card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .feature-card {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

[data-theme="dark"] .volume-labels,
[data-theme="dark"] .volume-status {
    color: var(--dark-muted);
}

[data-theme="dark"] .diagnostico-box,
[data-theme="dark"] .volume-breakdown {
    color: var(--dark-text);
}

[data-theme="dark"] .btn-secondary {
    background: var(--dark-input-bg);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

[data-theme="dark"] .btn-secondary:hover {
    background: #4B2E83;
}

[data-theme="dark"] .triangle-1,
[data-theme="dark"] .triangle-2,
[data-theme="dark"] .triangle-3,
[data-theme="dark"] .triangle-4 {
    opacity: 0.11;
}


/* ===== AJUSTES DE CONTRASTE — HOMEPAGE =====
   No modo escuro, títulos e informações principais ficam claros.
   Textos secundários continuam levemente suavizados para preservar a hierarquia visual. */
[data-theme="dark"] .section-title,
[data-theme="dark"] .about-story-content h3,
[data-theme="dark"] .about-quote p,
[data-theme="dark"] .about-highlight h4,
[data-theme="dark"] .feature-title,
[data-theme="dark"] .plan-title,
[data-theme="dark"] .plan-price .price,
[data-theme="dark"] .plan-features li span,
[data-theme="dark"] .faq-question {
    color: #ffffff;
}

[data-theme="dark"] .about-text,
[data-theme="dark"] .about-highlight p,
[data-theme="dark"] .plan-subtitle,
[data-theme="dark"] .plan-price .period,
[data-theme="dark"] .faq-answer p {
    color: #d7d3df;
}

[data-theme="dark"] .about-eyebrow {
    color: #ffffff;
}

[data-theme="dark"] .about-section .section-title::after,
[data-theme="dark"] .plans-section .section-title::after,
[data-theme="dark"] .features-section .section-title::after,
[data-theme="dark"] .faq-section .section-title::after {
    background: #ffffff;
}