/* Paleta de Cores Sugerida */
:root {
    --primary-color: #0056b3; /* Azul mais escuro para header padrão */
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107; /* Amarelo para texto do header */
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --white-color: #fff;
    --section-bg: rgba(238, 247, 255, 0.8); /* Fundo suave p/ seções c/ transparência */
    --border-color: #dee2e6;
    --footer-bg: #343a40; /* Cinza escuro para footer */
    --footer-text: #adb5bd; /* Cinza claro para texto do footer */
    --footer-link: #f8f9fa; /* Branco para links do footer */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0; /* Removido padding geral */
    /* Imagem de fundo */
    background-image: url('simulador-renda-fixa.jpg'); /* Coloque a imagem na mesma pasta */
    background-size: cover; /* Cobrir toda a tela */
    background-position: center center; /* Centralizar */
    background-attachment: fixed; /* Manter fixa ao rolar */
    color: var(--dark-color);
}

.container {
    max-width: 533px; /* Largura 2/3 */
    margin: 30px auto; /* Margem superior/inferior aumentada */
    background: rgba(255, 255, 255, 0.65); /* EFEITO VIDRO: Fundo branco semi-transparente */
    backdrop-filter: blur(8px); /* EFEITO VIDRO: Desfoque do fundo */
    -webkit-backdrop-filter: blur(8px); /* EFEITO VIDRO: Para Safari */
    padding: 0;
    border-radius: 15px; /* Bordas mais arredondadas */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18); /* Borda sutil para efeito vidro */
}

/* ================================= */
/* ESTILOS DO HEADER PADRÃO (NOVO) */
/* ================================= */
.header-compact {
    background-color: var(--primary-color); /* Azul definido na paleta */
    color: var(--white-color);
    padding: 10px 20px; /* Padding interno */
    width: 100%;
    box-sizing: border-box; /* Inclui padding na largura */
}

.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza horizontalmente */
    flex-wrap: wrap; /* Permite quebra em telas pequenas */
    gap: 15px; /* Espaço entre logo e texto */
    text-align: center; /* Centraliza texto caso quebre */
}

.header-logo {
    height: 40px; /* Ajuste a altura do logo conforme necessário */
    width: auto; /* Mantém proporção */
    display: block; /* Remove espaço extra abaixo */
}

.header-compact-text h1 {
    margin: 0;
    font-size: 1.5em; /* Ajuste tamanho */
    color: var(--white-color); /* Cor da linha 1: Branca */
    font-weight: 600;
    line-height: 1.2;
}

.header-compact-text p {
    margin: 0;
    font-size: 0.9em; /* Ajuste tamanho */
    color: var(--warning-color); /* Cor da linha 2: Amarela */
    font-weight: 500;
}

/* Título específico da ferramenta (Opcional) */
.tool-title-section {
    text-align: center;
    padding: 15px 20px;
    background-color: rgba(255, 255, 255, 0.1); /* Fundo muito sutil */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.tool-title-section h2 {
    margin: 0 0 5px 0;
    color: var(--primary-color);
    font-size: 1.6em;
    border: none; /* Remove borda padrão */
    display: block; /* Para ocupar linha toda */
}
.tool-title-section p {
    margin: 0;
    color: var(--secondary-color);
    font-size: 1em;
}
/* =============================== */
/* FIM ESTILOS HEADER              */
/* =============================== */


/* Estilo das Seções (Passos) */
.step {
    padding: 20px 25px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Borda mais sutil */
}
.step:last-child {
    border-bottom: none;
}

/* Fundo alternado suave para melhor distinção visual */
#step-type { background-color: transparent; } /* Remove cor p/ efeito vidro */
#step-inputs { background-color: var(--section-bg); } /* Usa cor com transparência */
#step-results { background-color: transparent; } /* Remove cor p/ efeito vidro */


.step h3 { /* Usando H3 agora para passos */
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--info-color);
    padding-bottom: 5px;
    display: inline-block;
    font-size: 1.3em; /* Ajustado */
}
.step h4 { font-size: 1.05em; color: var(--secondary-color); border-bottom: none; margin-bottom: 10px;}


.form-group { margin-bottom: 15px; }
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #444; /* Texto um pouco mais escuro p/ contraste */
    font-size: 0.95em;
}
.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc; /* Borda um pouco mais visível */
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 0.95em;
    background-color: rgba(255, 255, 255, 0.8); /* Fundo levemente transparente p/ inputs */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.form-group input[type="number"]:focus,
.form-group select:focus {
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 1); /* Fundo opaco no foco */
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.25); /* Sombra foco ajustada */
}

/* Grupo de Taxa */
.taxa-input-group { display: flex; align-items: center; gap: 10px; }
.taxa-input-group input[type="number"] { flex-grow: 1; }
.taxa-tipo { display: flex; gap: 8px; white-space: nowrap; }
.taxa-tipo label { margin-bottom: 0; font-weight: normal; cursor: pointer; display: flex; align-items: center; gap: 3px; font-size: 0.9em;}
.taxa-tipo input[type="radio"] { cursor: pointer; margin-right: 2px; }

/* Grupo de Radios */
.radio-group label { font-weight: normal; display: block; margin-bottom: 6px; cursor: pointer; padding-left: 5px; font-size: 0.95em; }
.radio-group input[type="radio"] { margin-right: 6px; cursor: pointer; vertical-align: middle; }

.form-group small { display: block; margin-top: 5px; font-size: 0.85em; color: #555; }
#modoReceberInfo { background-color: rgba(255, 243, 205, 0.8); padding: 8px; border-radius: 4px; border: 1px solid rgba(255, 238, 186, 0.9); font-size: 0.85em; line-height: 1.4; }

/* Botão */
button#simulateBtn { display: block; width: 100%; padding: 12px; background: linear-gradient(45deg, var(--success-color), #218838); color: white; border: none; border-radius: 5px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin-top: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
button#simulateBtn:hover { background: linear-gradient(45deg, #218838, var(--success-color)); box-shadow: 0 4px 8px rgba(0,0,0,0.15); transform: translateY(-2px); }

/* Caixa de Informações */
.info-box { background-color: rgba(23, 162, 184, 0.8); /* Info color com transparência */ color: var(--white-color); padding: 12px; border-radius: 5px; margin-top: 12px; font-size: 0.9em; }
.info-box strong { font-weight: bold; }
.info-box ul { padding-left: 18px; margin-top: 8px; margin-bottom: 4px;}
.info-box li { margin-bottom: 4px;}


/* Resultados */
.resultado-container { margin-top: 15px; padding: 0; }

#result-summary p { margin-bottom: 10px; font-size: 1em; border-bottom: 1px dashed rgba(0, 0, 0, 0.15); padding-bottom: 8px; display: flex; justify-content: space-between; flex-wrap: wrap; }
#result-summary p:last-of-type { border-bottom: none; padding-bottom: 0; }
#result-summary > p > strong:first-child { color: var(--primary-color); margin-right: 8px; flex-shrink: 0; }
#result-summary > p > span,
#result-summary > p > strong:not(:first-child) { text-align: right; font-weight: bold; color: var(--dark-color); font-size: 1em; }

/* Box de Renda Estimada */
.income-box { background-color: rgba(230, 247, 255, 0.85); border: 1px solid rgba(145, 213, 255, 0.8); border-left: 4px solid var(--info-color); padding: 12px 15px; margin: 15px 0; border-radius: 5px; }
.income-box h4 { color: var(--info-color); margin-top: 0; margin-bottom: 8px; font-size: 1.1em; border-bottom: none; display: block; }
.income-box p { margin-bottom: 6px; font-size: 0.95em; border-bottom: none; padding-bottom: 0; display: block; text-align: center; }
.income-box p.estimated-value { margin-top: 8px; margin-bottom: 8px; }
.income-box p.estimated-value strong { font-size: 1.6em; color: var(--success-color); display: block; }
.income-box small { display: block; text-align: center; font-size: 0.8em; color: #555; margin-top: 8px; display: block; }
.income-box strong { color: var(--dark-color); font-weight: 600; }

/* Destaque valores finais */
#resPrincipalFinal,
#resTotalRecebidoLiquido { font-weight: bold; font-size: 1.2em; color: var(--success-color); }

hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 20px 0; }

/* Observações */
#result-observacoes { margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
#result-observacoes h4 { display: block; border-bottom: none; margin-bottom: 12px; font-size: 1.1em; color: var(--secondary-color); }
#result-observacoes ul { list-style: none; padding-left: 0; font-size: 0.85em; color: #444; }
#result-observacoes li { margin-bottom: 8px; padding-left: 22px; position: relative; line-height: 1.5; }
#result-observacoes li::before { content: "💡"; font-weight: bold; position: absolute; left: 0; top: 1px; font-size: 1.1em; }
#result-observacoes li strong { color: var(--dark-color); font-weight: 600; background-color: rgba(255, 249, 196, 0.7); padding: 1px 3px; border-radius: 3px; }


/* ================================= */
/* ESTILOS DO FOOTER (NOVO)          */
/* ================================= */
.tool-footer {
    background-color: var(--footer-bg); /* Cinza escuro */
    color: var(--footer-text); /* Cinza claro */
    padding: 15px 20px;
    text-align: center;
    font-size: 0.85em;
    margin-top: 0; /* Remove margem superior se houver */
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória sutil */
}

.tool-footer-content {
    /* Pode usar para limitar largura do conteúdo do footer se necessário */
}

.tool-footer-links {
    margin-bottom: 8px;
}

.tool-footer-links a {
    color: var(--footer-link); /* Branco */
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s ease;
}

.tool-footer-links a:hover {
    color: var(--warning-color); /* Amarelo no hover */
    text-decoration: underline;
}
/* =============================== */
/* FIM ESTILOS FOOTER              */
/* =============================== */


/* Responsividade */
@media (max-width: 550px) { /* Ajustado breakpoint */
    body { padding: 0; background-image: none; background-color: var(--light-color); } /* Remove imagem em tela pequena */
    .container {
        max-width: 100%; /* Ocupa toda largura */
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        border: none; /* Remove borda vidro */
         background: var(--white-color); /* Fundo opaco em mobile */
         backdrop-filter: none; /* Remove desfoque */
        -webkit-backdrop-filter: none;
    }

    .header-compact { padding: 8px 15px; }
    .header-logo { height: 30px; }
    .header-compact-text h1 { font-size: 1.3em; }
    .header-compact-text p { font-size: 0.8em; }
    .header-compact-content { gap: 10px; }

    .tool-title-section { padding: 10px 15px; }
    .tool-title-section h2 { font-size: 1.4em; }
    .tool-title-section p { font-size: 0.9em; }

    .step { padding: 15px; }
    .step h3 { font-size: 1.2em; }

    .form-group input[type="number"], .form-group select { padding: 9px; font-size: 0.9em;}
    button#simulateBtn { font-size: 1em; padding: 11px;}

    #result-summary p { font-size: 0.95em; flex-direction: column; align-items: flex-start; }
    #result-summary > p > span,
    #result-summary > p > strong:not(:first-child) { text-align: left; margin-top: 2px; }

    .income-box { padding: 10px 12px; }
    .income-box h4 { font-size: 1em; }
    .income-box p { font-size: 0.9em;}
    .income-box p.estimated-value strong { font-size: 1.5em; }
    .income-box small { font-size: 0.75em;}

    #result-observacoes li { font-size: 0.8em; }
    #result-observacoes li::before { font-size: 1em; top: 2px;}

    .tool-footer { padding: 10px 15px; font-size: 0.8em; }
    .tool-footer-links a { margin: 0 3px;}
}