/**
 * ==================================================================================
 * style.css - Estilos Visuais e Temas da "änalitks"
 * ----------------------------------------------------------------------------------
 * Responsabilidades:
 * 1. Definir a paleta de cores e a tipografia.
 * 2. Implementar os temas claro e escuro.
 * 3. Estilizar os componentes da aplicação principal.
 * 4. ATUALIZADO: Estilizar a nova interface de autenticação com estética profissional e minimalista.
 * ==================================================================================
 */

/* --- Importação das Fontes --- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Inter:wght@400;500;700&display=swap');

/* --- Definição dos Temas (Variáveis CSS) --- */
:root {
    --cor-fundo: #f5f5f7;
    --cor-card: #ffffff;
    --cor-texto-primario: #1d1d1f;
    --cor-texto-secundario: #6e6e73;
    --cor-borda: #d2d2d7;
    --cor-primaria: #0071e3;
    --cor-primaria-hover: #0077ed;
    --sombra-card: 0 2px 8px rgba(0, 0, 0, 0.07);
    --sombra-botao: 0 1px 3px rgba(0, 0, 0, 0.1);
    --cor-clt: #6D28D9;
    --cor-pj: #f56c0a;
}

[data-theme='dark'] {
    --cor-fundo: #121212;
    --cor-card: #1d1d1d;
    --cor-texto-primario: #f5f5f7;
    --cor-texto-secundario: #86868b;
    --cor-borda: #424245;
    --cor-primaria: #0a84ff;
    --cor-primaria-hover: #339aff;
    --sombra-card: 0 4px 12px rgba(0, 0, 0, 0.2);
    --sombra-botao: 0 2px 4px rgba(0, 0, 0, 0.3);
    --cor-clt: #8B5CF6;
    --cor-pj: #ff7b29;
}

/* --- Estilos de Base --- */
body {
    background-color: var(--cor-fundo);
    font-family: 'Lora', 'Inter', serif;
    color: var(--cor-texto-primario);
    transition: background-color 0.3s ease;
}

/* --- Estilo "Página Inteira" (mantido) --- */
.calculator-card {
    background-color: transparent;
    padding: 48px 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.modal-overlay .calculator-card {
    background-color: var(--cor-card);
    padding: 32px;
    border-radius: 0;
    box-shadow: var(--sombra-card);
    border: 1px solid var(--cor-borda);
}

/* ===========================================================================
   ATUALIZAÇÃO: NOVA ESTRUTURA VISUAL MINIMALISTA E PROFISSIONAL
   ===========================================================================
*/

/* --- 1. O Cenário: Fundo Limpo e Suave --- */

#auth-background {
    /* ALTERADO: Sai o GIF, entra um gradiente de fundo claro e profissional. */
    background: linear-gradient(180deg, #f7f7f7 0%, #e9e9ef 100%);
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), filter 0.8s ease;
}

/* Efeito de afastar e desfocar a imagem quando um formulário está ativo */
body.form-active #auth-background {
    transform: scale(1.05); /* Afasta um pouco o fundo */
    filter: blur(4px);
}


/* --- 2. O Ator Principal: O Card Minimalista --- */

.auth-card {
    /* ALTERADO: Sai o efeito de vidro, entra um gradiente cinza sutil. */
    background: linear-gradient(to bottom left, #f0f0f0, #e6e6e6);
    
    /* MANTIDO: Bordas arredondadas e sombra suave para profundidade. */
    border-radius: 18px;
    border: 1px solid #ffffff; /* Borda branca para um leve brilho superior */
    box-shadow: 0 10px S30px 0 rgba(0, 0, 0, 0.1);

    /* Espaçamento interno */
    padding: 2rem;
}

/* --- 3. A Ação: Estilização dos Formulários (Vibe Apple) --- */

.auth-form h2 {
    font-family: 'Inter', sans-serif; /* Fonte mais moderna para os títulos */
    font-size: 28px;
    font-weight: 700;
    color: var(--cor-texto-primario); /* Cor de texto padrão */
    text-align: center;
    margin: 0 0 1rem 0;
    text-shadow: none; /* Remove a sombra do texto para um visual mais limpo */
}

/* Efeito de Label Flutuante com cores ajustadas */
.input-wrapper .input-field {
    background-color: #dfdfdf;
    border: 1px solid transparent; /* Borda invisível por padrão */
    border-radius: 10px;
    color: var(--cor-texto-primario);
    font-family: 'Inter', sans-serif;
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.input-wrapper .input-field:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.2); /* Sombra roxa sutil ao focar */
    border-color: var(--cor-clt);
    background-color: #fff;
}

.input-wrapper label {
    font-family: 'Inter', sans-serif;
    color: var(--cor-texto-secundario);
    position: absolute;
    top: 15px;
    left: 15px;
    pointer-events: none;
    transition: all 0.2s ease;
}

.input-wrapper .input-field:focus ~ label,
.input-wrapper .input-field:not(:placeholder-shown) ~ label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    background-color: #e8e8e8; /* Cor de fundo para a label, combinando com o card */
    padding: 0 5px;
    border-radius: 4px;
    color: var(--cor-clt); /* Cor roxa para a label ativa */
}

/* Botão com Estilo Profissional */
.auth-card .btn-primary {
    background: var(--cor-clt); /* Cor roxa sólida e forte */
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 700;
    padding: 16px; /* Botão mais "tocável" */
    text-shadow: none;
    box-shadow: 0 4px 15px rgba(109, 40, 217, 0.3); /* Sombra colorida sutil */
    transition: all 0.2s ease;
}

.auth-card .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(109, 40, 217, 0.4);
}

.auth-card .btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(109, 40, 217, 0.3);
}

/* Links para trocar de formulário */
.switch-form-links p {
    color: var(--cor-texto-secundario);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.switch-form-links a {
    color: var(--cor-clt);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

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

/* --- 4. Responsividade --- */
@media (max-width: 768px) {
    #auth-container {
        align-items: flex-start;
        padding-top: 5vh;
    }

    .auth-card {
        width: 90%;
        padding: 1.5rem;
    }

    .auth-form h2 {
        font-size: 24px;
    }

    .main-logo {
        max-width: 100px;
    }
}


/* --- O RESTO DO FICHEIRO ESTÁ 100% INTOCADO --- */

/* --- Tipografia --- */
h1 { font-family: 'Lora', serif; font-size: 36px; margin: 0; color: var(--cor-texto-primario); }
h2 { font-family: 'Lora', serif; font-size: 22px; margin-top: 1.5rem; color: var(--cor-texto-primario); border-bottom: 1px solid var(--cor-borda); padding-bottom: 0.5rem; }
h3 { font-family: 'Lora', serif; font-size: 1.25rem; color: var(--cor-texto-primario); margin: 0; font-weight: 700; letter-spacing: 0.5px; }
p { margin: 0; color: var(--cor-texto-secundario); font-size: 16px; line-height: 1.5; }
a { color: var(--cor-primaria); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
a:hover { text-decoration: underline; color: var(--cor-primaria-hover); }

/* --- Estilo dos Formulários --- */
label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--cor-texto-secundario); text-align: right; }
.input-field { width: 100%; padding: 12px; border: 1px solid var(--cor-borda); border-radius: 0; font-size: 16px; background-color: var(--cor-fundo); color: var(--cor-texto-primario); transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; }
.input-field:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.15); }

/* --- Estilo dos Botões com Animações --- */
.btn { width: 100%; padding: 12px; border-radius: 0; border: none; font-size: 16px; font-weight: 700; cursor: pointer; box-sizing: border-box; transition: transform 0.15s ease, background-color 0.15s ease; box-shadow: var(--sombra-botao); text-transform: uppercase; letter-spacing: 1px; }
.btn-primary { background-color: var(--cor-primaria); color: #ffffff; }
.btn:hover { transform: translateY(-3px); }
.btn-primary:hover { background-color: var(--cor-primaria-hover); }
.btn:active { transform: translateY(1px) scale(0.99); box-shadow: none; }
.btn-secondary { background-color: var(--cor-fundo); color: var(--cor-primaria); border: 1px solid var(--cor-borda); }
.btn-secondary:hover { background-color: var(--cor-primaria); border-color: var(--cor-primaria); color: #ffffff; }

/* --- ESTILOS PARA OS CARTÕES INTERATIVOS (FLIP CARDS) --- */
.card-container { background-color: transparent; min-height: 180px; perspective: 1000px; cursor: pointer; }
.flipping-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1); transform-style: preserve-3d; }
.card-container.is-flipped .flipping-card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 0; box-shadow: var(--sombra-card); border: 1px solid var(--cor-borda); padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.card-back { transform: rotateY(180deg); gap: 15px; }
.card-clt { background-color: var(--cor-card); border-left: 4px solid var(--cor-clt); }
.card-clt h3 { color: var(--cor-texto-primario); }
.card-clt p { color: var(--cor-texto-secundario); font-family: 'Inter', sans-serif; }
.card-clt .btn-primary { background-color: var(--cor-clt); }
[data-theme='dark'] .card-clt .btn-primary:hover { background-color: #A78BFA; }
[data-theme='light'] .card-clt .btn-primary:hover { background-color: #5B21B6; }
.card-pj { background-color: var(--cor-card); border-left: 4px solid var(--cor-pj); }
.card-pj h3 { color: var(--cor-texto-primario); }
.card-pj p { color: var(--cor-texto-secundario); font-family: 'Inter', sans-serif; }
.card-pj .btn-primary { background-color: var(--cor-pj); }
[data-theme='dark'] .card-pj .btn-primary:hover { background-color: #ff9859; }
[data-theme='light'] .card-pj .btn-primary:hover { background-color: #d15b09; }

/* --- Estilos para Resultados e Classes Utilitárias --- */
.results-section { border-top: 1px solid var(--cor-borda); margin-top: 20px; padding-top: 30px; }
hr { border: none; border-top: 1px solid var(--cor-borda); margin: 15px 0; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.explanation-text { font-family: 'Inter', sans-serif; font-size: 14px; font-style: italic; margin-top: 8px !important; }

/* --- Estilo do Botão de Tema --- */
.theme-toggle-btn { background-color: var(--cor-card); color: var(--cor-texto-primario); border: 1px solid var(--cor-borda); padding: 8px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; box-shadow: var(--sombra-card); transition: transform 0.2s ease; }
.theme-toggle-btn:hover { transform: scale(1.1) rotate(15deg); }

/* --- ESTILOS DO MODAL --- */
.modal-overlay { background-color: rgba(0, 0, 0, 0.6); }
/* .modal-overlay .calculator-card { max-width: 500px; border-radius: 0; } */
.close-btn { background: none; border: none; font-size: 2rem; font-weight: 300; line-height: 1; cursor: pointer; color: var(--cor-texto-secundario); transition: color 0.2s ease; }
.close-btn:hover { color: var(--cor-texto-primario); }
.brasao { font-style: italic; text-align: center; color: var(--cor-texto-secundario); margin-bottom: 1.5rem; padding: 0.5rem; background-color: var(--cor-fundo); border-radius: 0; }
.modal-overlay ul { list-style: none; padding: 0; margin-top: 0.5rem; }
.modal-overlay li { margin-bottom: 0.5rem; }

/* --- ESTILOS DA TELA DE RELATÓRIOS --- */
.reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.chart-container { background-color: var(--cor-card); padding: 24px; border-radius: 0; box-shadow: var(--sombra-card); border: 1px solid var(--cor-borda); position: relative; height: 350px; }
.chart-container canvas { max-width: 100%; max-height: 100%; }
.summary-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.summary-card { background-color: var(--cor-card); padding: 24px; border-radius: 0; box-shadow: var(--sombra-card); border: 1px solid var(--cor-borda); text-align: center; }
.summary-card p { font-size: 28px; color: var(--cor-texto-primario); margin: 0; }

@media (max-width: 768px) {
    .reports-grid, .summary-cards-grid { grid-template-columns: 1fr; }
}

/* ATUALIZAÇÃO: Ajusta o alinhamento das labels em telas pequenas */
@media (max-width: 640px) {
    label { text-align: left; margin-bottom: 2px; }
}

/* --- ESTILOS DO MODAL (continuação) --- */
.modal-overlay .calculator-card { max-width: 720px; border-radius: 0; max-height: 90vh; overflow-y: auto; }
.close-btn { background: none; border: none; font-size: 2rem; font-weight: 300; line-height: 1; cursor: pointer; color: var(--cor-texto-secundario); transition: color 0.2s ease; }
.close-btn:hover { color: var(--cor-texto-primario); }
.brasao { font-style: italic; text-align: center; color: var(--cor-texto-secundario); margin-bottom: 1.5rem; padding: 0.5rem; background-color: var(--cor-fundo); border-radius: 0; }
.modal-overlay ul { list-style: none; padding: 0; margin-top: 0.5rem; }
.modal-overlay li { margin-bottom: 0.5rem; }
.param-chart { display: flex; flex-direction: column; gap: 6px; margin-top: 1rem; font-family: 'Inter', sans-serif; font-size: 12px; }
.chart-bar { padding: 8px 12px; border-radius: 0; color: var(--cor-texto-primario); display: flex; justify-content: space-between; font-weight: 500; border: 1px solid var(--cor-borda); background-color: var(--cor-fundo); }
.dashboard-footer .btn { width: auto; padding-left: 28px; padding-right: 28px; }
.chart-bar span:last-child { font-weight: 700; }

/* Cores para as barras */
.inss-bar-1 { background-color: rgba(109, 40, 217, 0.1); }
.inss-bar-2 { background-color: rgba(109, 40, 217, 0.2); }
.inss-bar-3 { background-color: rgba(109, 40, 217, 0.3); }
.inss-bar-4 { background-color: rgba(109, 40, 217, 0.4); }
.irrf-bar-1 { background-color: rgba(109, 40, 217, 0.05); }
.irrf-bar-2 { background-color: rgba(109, 40, 217, 0.15); }
.irrf-bar-3 { background-color: rgba(109, 40, 217, 0.25); }
.irrf-bar-4 { background-color: rgba(109, 40, 217, 0.35); }
.irrf-bar-5 { background-color: rgba(109, 40, 217, 0.45); }