/**
 * ==================================================================================
 * main.css - Estilos de Layout e Estrutura da "änalitks"
 * ----------------------------------------------------------------------------------
 * Responsabilidades:
 * 1. Definir o layout principal da página de forma eficiente e centralizada.
 * 2. Gerenciar a visibilidade das "telas".
 * 3. Estruturar os formulários e botões para performance.
 * 4. Adicionar a estrutura de layout para o modal "Sobre".
 * 5. ATUALIZADO: Estruturar o novo layout Frutiger Aero com card central.
 * ==================================================================================
 */

/* --- Configurações Globais de Layout --- */
body {
    margin: 0;
    /* overflow: hidden; previne barras de scroll indesejadas durante as animações. */
    overflow-x: hidden;
    box-sizing: border-box; 
}

.hidden {
    display: none !important; 
}

/* ===========================================================================
   ATUALIZAÇÃO: NOVA ESTRUTURA FRUTIGER AERO
   ===========================================================================
*/

/* O container para a imagem de fundo. Fica fixo e atrás de todo o conteúdo. */
#auth-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Envia para trás */
}

/* O container principal que ocupa toda a tela e centraliza o card. */
#auth-container {
    width: 100vw;
    min-height: 100vh; /* Usa min-height para se adaptar a conteúdos maiores */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
}

/* A estrutura do card de autenticação. */
.auth-card {
    width: 100%;
    max-width: 480px; /* ALTERADO: Aumentado para 480px para um visual mais largo. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* ALTERADO: Diminuído para tornar o card mais compacto verticalmente. */
}

/* O container do logo. */
.logo-container {
    text-align: center;
    margin-bottom: 0.5rem; /* ALTERADO: Diminuído para compactar. */
}

.main-logo {
    max-width: 120px;
    height: auto;
}

/* A estrutura dos formulários dentro do card. */
.auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* O wrapper para o input e label, para o efeito de flutuação. */
.input-wrapper {
    position: relative; /* Essencial para o posicionamento da label. */
}

/* O container dos links para trocar de formulário. */
.switch-form-links {
    text-align: center;
    margin-top: 0.5rem; /* ALTERADO: Diminuído para compactar. */
}


/* --- ESTRUTURAS ANTIGAS (mantidas para outras partes da app) --- */

.calculator-card {
    width: 100%;
    max-width: 960px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card-header {
    text-align: center;
    margin-bottom: 16px;
}

.input-group {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 20px;
    align-items: center;
    max-width: 600px;
    margin: 20px auto 0;
}

/* Em telas menores, os campos ficam um abaixo do outro */
@media (max-width: 640px) {
    .input-group {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.results-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.result-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    width: 100%;
}

.dashboard-footer {
    display: flex;
    flex-wrap: wrap; 
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: center;
}

.theme-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1rem;
    box-sizing: border-box;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}