/* ========================================================================= */
/* 1. VARIÁVEIS DE CORES (MODO CLARO - PADRÃO) */
/* ========================================================================= */
:root {
    /* Tema Foka */
    --primary-color: #FFB703;      /* Amarelo Principal (Ação) */
    --hover-color: #FFCD38;        
    
    /* Cores de Fundo */
    --background-start: #D8DEE9;   /* Degradê Claro - Início */
    --background-end: #BDC3C7;     /* Degradê Claro - Fim */
    --card-background: #FAFAFA;    /* Fundo do Card (Quase Branco) */
    --input-background: #FAFAFA;   /* Fundo padrão do input no Light Mode */

    /* Cores de Texto e Interação */
    --text-color-primary: #1C1E21; /* Texto Principal (Escuro) */
    --text-color-secondary: #4C566A; /* Texto Secundário/Labels */
    --border-color: #C0C5CD;       /* Borda sutil */
    --error-color: #E3342F;        
    --success-color: #38c172;      

    /* Espaçamento Básico */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
}

/* ========================================================================= */
/* 1B. VARIÁVEIS DE CORES (MODO ESCURO - prefers-color-scheme: dark) */
/* ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #DDA800;   /* Amarelo mais escuro para o Dark Mode */
        
        --background-start: #1A1A1A;
        --background-end: #121212;  
        
        --card-background: #1E1E1E; 
        --input-background: #272727; /* Fundo do Input mais escuro */

        --text-color-primary: #EBEBEB;
        --text-color-secondary: #B0B3B8;

        --border-color: #333333; 
        
        --dark-button-bg: #333333;
        --dark-button-bg-hover: #444444;
    }
}


/* ========================================================================= */
/* 2. BASE (RESETS E ESTILO GLOBAL) */
/* ========================================================================= */
body {
    font-family: 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
    
    background: linear-gradient(135deg, var(--background-start) 0%, var(--background-end) 100%);
    color: var(--text-color-primary);
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* ========================================================================= */
/* 3. COMPONENTE: AUTH-CARD (#auth-container) */
/* ========================================================================= */
#auth-container {
    background-color: var(--card-background);
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: 10px;
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); 
    transition: box-shadow 0.3s ease;
    
    width: 100%;
    max-width: 420px;
    text-align: center;
}

#auth-container:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* --- LOGO, TAGLINE, TÍTULO (Permanece o mesmo) --- */

.logo {
    font-size: 3em;
    font-weight: 800;
    margin-bottom: var(--spacing-xs);
    letter-spacing: -1px;
    color: var(--primary-color) !important;
}

.tagline {
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-lg);
    font-size: 1.1em;
    font-weight: 400;
}

.auth-form h2 {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 1.6em;
    font-weight: 600;
    color: var(--text-color-primary);
}

/* --- GRUPOS DE INPUTS --- */
.input-group {
    text-align: left;
    margin-bottom: var(--spacing-md);
}

/* LABEL VISÍVEL */
.input-group label {
    display: block;
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color-secondary);
    transition: color 0.2s;
}

/* REGRA GERAL RESTAURADA PARA TODOS OS INPUTS (inclui date, text, email, password) */
.input-group input {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
    
    /* Fundo padrão do input (usará #272727 no Dark Mode) */
    background-color: var(--input-background); 
    color: var(--text-color-primary); 
}

/* Estilo específico para input[type="date"] */
.input-group input[type="date"] {
    /* Reset Webkit para melhorar a estilização */
    -webkit-appearance: none;
    appearance: none;
    /* Adiciona margem direita para o ícone nativo/pseudo-elemento (opcional) */
    padding-right: 14px; 
}

.input-group input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color); 
    /* No foco, o fundo é o do Card, criando um contraste visual sutil */
    background-color: var(--card-background);
    outline: none;
}

/* ========================================================================= */
/* REGRA DE CORREÇÃO E ESTILO PARA DARK MODE */
/* ========================================================================= */

@media (prefers-color-scheme: dark) {
    /* Aplica a cor do texto do input de data para o modo escuro (necessário em alguns navegadores) */
    .input-group input[type="date"] {
        color: var(--text-color-primary); 
    }
    
    /* Corrigir problema de preenchimento do navegador (autofill) e forçar cores escuras */
    .input-group input {
        background-color: var(--input-background) !important;
        color: var(--text-color-primary) !important;
        caret-color: var(--text-color-primary);
    }
    
    /* Força o background do preenchimento automático a ser escuro */
    .input-group input:-webkit-autofill,
    .input-group input:-webkit-autofill:hover,
    .input-group input:-webkit-autofill:focus,
    .input-group input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px var(--input-background) inset !important;
        -webkit-text-fill-color: var(--text-color-primary) !important;
        border-color: var(--border-color);
    }
}

/* --- BOTÕES, LINKS, NAVEGAÇÃO, UTILITÁRIOS (Permanece o mesmo) --- */

/* ========================================================================= */
/* 4. COMPONENTE: BOTÕES E LINKS */
/* ========================================================================= */

/* --- BOTÃO PRINCIPAL (Amarelo) --- */
.auth-button {
    width: 100%;
    padding: 12px;
    margin-top: 25px;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
    background-color: var(--primary-color);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.auth-button:hover {
    background-color: var(--hover-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- LINKS DE TROCA --- */
.switch-link {
    margin-top: 30px;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    font-size: 1em;
    color: var(--text-color-secondary);
}

.switch-link a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.switch-link a:hover {
    text-decoration: underline;
}

/* ========================================================================= */
/* 5. REGISTRO STEP-BY-STEP (Navegação) */
/* ========================================================================= */

/* --- BOTÕES DE NAVEGAÇÃO DE PASSOS --- */
.step-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-md);
}

.step-navigation .auth-button {
    width: 48%; 
    margin: 0;
    background-color: #E0E0E0 !important;
    color: var(--text-color-primary) !important;
    font-weight: 500;
}

.step-navigation .auth-button:hover {
    background-color: #D3D3D3 !important;
    box-shadow: none;
}

/* Sobrescreve o botão 'Voltar' para o tema escuro */
@media (prefers-color-scheme: dark) {
    .step-navigation .auth-button {
        background-color: var(--dark-button-bg) !important;
        color: var(--text-color-primary) !important;
    }
    .step-navigation .auth-button:hover {
        background-color: var(--dark-button-bg-hover) !important;
    }
}

/* --- INDICADOR DE PASSO (Pontos) --- */
.step-indicator {
    text-align: center;
    margin-top: 30px;
    margin-bottom: -10px;
}

.step-indicator .dot {
    height: 10px;
    width: 10px;
    margin: 0 4px;
    background-color: var(--border-color);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.4s;
}

.step-indicator .dot.active {
    background-color: var(--primary-color);
}

/* ========================================================================= */
/* 6. MENSAGENS E UTILITÁRIOS */
/* ========================================================================= */
.error-message {
    color: var(--error-color);
    margin-top: var(--spacing-sm);
    font-size: 0.9em;
    font-weight: 500;
}

.success-message {
    color: var(--success-color);
    font-weight: 500;
}

.hidden {
    display: none !important;
}