/* =================================================================== */
/* ARQUIVO CSS COMPLETO E ESTÁVEL (ESTILO6.css)                        */
/* VERSÃO: 26.5 - Corrigida especificidade do botão desabilitado.      */
/* =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@700;900&display=swap');

/* --- 1. VARIÁVEIS GLOBAIS --- */
:root {
    --cor-azul-principal: #061C70;
    --cor-laranja-acento: #FF6600;
    --cor-amarelo-acento: #FAD126;
    --cor-branco-fundo: #F1EFEF;
    --cor-branco-puro: #FFFFFF;
    --cor-fundo-app: #F7F9FA;
    --cor-fundo-card: var(--cor-branco-puro);
    --cor-borda-geral: #E0E5EB;
    --cor-texto-principal: #333333;
    --cor-texto-secundario: #555555;
    --cor-sombra: rgba(0, 0, 0, 0.08);
    --borda-radius: 12px;
}

/* --- 2. ESTILOS DE BASE E LAYOUT --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--cor-fundo-app);
    color: var(--cor-texto-principal);
    line-height: 1.6;
}
.app-container {
    max-width: 1080px;
    margin: 40px auto;
    padding: 0 20px;
}
.card {
    background: var(--cor-fundo-card);
    border-radius: var(--borda-radius);
    padding: 35px;
    box-shadow: 0 5px 20px var(--cor-sombra);
    margin-bottom: 30px;
}

/* --- 3. LAYOUT PRINCIPAL DE DUAS COLUNAS --- */
.layout-container {
    display: flex;
    gap: 30px;
    align-items: stretch;
    margin-bottom: 30px;
}

.image-section {
    flex: 1 1 55%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-section img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.form-section {
    flex: 1 1 45%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#formCalculadora {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.lgpd-trigger-container {
    margin-top: auto;
    padding-top: 20px;
}


/* --- 4. FORMULÁRIO --- */
.form-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    color: var(--cor-azul-principal);
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    text-transform: uppercase;
}
.input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.input-group {
    flex: 1;
}
.input-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--cor-azul-principal);
}
.input-group input,
.input-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cor-borda-geral);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* === SEÇÃO DE ESTILOS DOS BOTÕES CORRIGIDA === */

/* 1. Estilos COMUNS a todos os botões */
.btn-calcular {
    width: 100%;
    padding: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.4s ease;
    border: 2px solid transparent; 
}

/* 2. Estilo específico do botão "CALCULAR" QUANDO HABILITADO */
#calcularBtn:not(:disabled) {
    color: var(--cor-branco-fundo);
    background-image: linear-gradient(to right, var(--cor-laranja-acento), var(--cor-amarelo-acento), var(--cor-laranja-acento));
    background-size: 200% auto;
    border-color: transparent;
}

#calcularBtn:not(:disabled):hover {
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

/* 3. Estilo específico do botão "REFAZER" */
.btn-refazer {
    margin-top: 30px;
    color: var(--cor-azul-principal);
    background-color: var(--cor-branco-puro);
    border-color: var(--cor-azul-principal);
}

.btn-refazer:not(:disabled):hover {
    color: var(--cor-branco-fundo);
    border-color: transparent;
    background-image: linear-gradient(to right, var(--cor-laranja-acento), var(--cor-amarelo-acento), var(--cor-laranja-acento));
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

/* 4. Estilo GERAL para botões desabilitados */
.btn-calcular:disabled {
    background-image: none;
    background-color: #ccc;
    cursor: not-allowed;
    color: #888;
    border-color: #ccc;
    box-shadow: none;
    transform: none;
}
/* =============================================== */


/* Estilo para campos com erro de validação */
.input-group input.campo-invalido,
.input-group select.campo-invalido {
    border-color: #E53E3E;
    background-color: #FFF5F5;
    box-shadow: 0 0 0 1px #E53E3E;
}

/* --- SEÇÕES RESTANTES (Animação, Resultados, Modais, etc.) --- */
.animation-section {padding: 40px 20px; text-align: center;}
.solar-animation-container{display:flex;justify-content:center;align-items:center;gap:30px;margin-bottom:25px;position:relative;height:100px}.solar-icon{font-size:3.5rem}.sun{color:var(--cor-amarelo-acento);text-shadow:0 0 15px var(--cor-amarelo-acento);animation:pulse-sun 2s infinite ease-in-out}.panel-grid{width:60px;height:60px;background-size:20px 20px;background-image:linear-gradient(to right,var(--cor-azul-principal) 1px,transparent 1px),linear-gradient(to bottom,var(--cor-azul-principal) 1px,transparent 1px);border:2px solid var(--cor-azul-principal)}.solar-rays{position:absolute;left:40%;width:20%;height:5px;background:linear-gradient(to right,var(--cor-amarelo-acento),transparent);animation:shoot-ray 1.5s infinite;opacity:0}.battery{width:80px;height:40px;border:3px solid var(--cor-azul-principal);border-radius:6px;position:relative;padding:3px}.battery-level{height:100%;width:0%;background:linear-gradient(to right,var(--cor-amarelo-acento),var(--cor-laranja-acento));border-radius:3px;animation:fill-battery 4s linear forwards}.animation-text{font-family:'Montserrat',sans-serif;font-size:1.4rem;font-weight:700;color:var(--cor-azul-principal)}

.resultado-section{
    display: none;
    background-color: transparent;
    padding: 0;
    border: none;
    margin-bottom: 30px;
    flex-direction: column;
}

#resultadoConteudo{
    width:100%;
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px;
    align-items: stretch;
}
.resultado-coluna-esquerda,.resultado-coluna-direita{
    display: grid; 
    gap: 20px;
}
.resultado-coluna-esquerda {
    grid-template-rows: repeat(3, 1fr); 
}
.resultado-coluna-direita {
    grid-template-rows: repeat(4, 1fr); 
}

.resultado-item,.resultado-item-principal{
    background:var(--cor-branco-puro);
    padding: 20px;
    border-radius:var(--borda-radius);
    box-shadow:0 5px 15px var(--cor-sombra);
    text-align:center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.resultado-item-principal{
    background-color:var(--cor-azul-principal);
    color:var(--cor-branco-puro);
}
.label,.label-destaque{display:block;font-weight:500;margin-bottom:8px;text-transform:uppercase}
.resultado-item .label{color:var(--cor-azul-principal)}
.resultado-item-principal .label-destaque{
    color:var(--cor-branco-fundo);
    font-size: 1rem;
}
.valor-destaque-grande{
    font-family:'Montserrat',sans-serif;
    font-size:3.0rem; 
    font-weight:900;
    color:var(--cor-amarelo-acento);
    display:block;
    line-height:1.2;
    margin: 8px 0;
}
.resultado-item-principal p {
    font-size: 1.05rem;
    line-height: 1.5;
    padding: 0 10px;
    opacity: 0.9;
}
.valor-destaque-media{font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:700;color:var(--cor-texto-principal);display:block}
.resultado-item-principal .valor-destaque-media{
    color:var(--cor-amarelo-acento);
    font-size: 1.8rem;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.aviso-investimento {
    font-size: 0.75rem; /* 12px */
    font-style: italic;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 10px;
    padding: 0 15px !important; /* !important para garantir a sobreposição */
    line-height: 1.4;
    color: var(--cor-branco-fundo);
}

.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(6,28,112,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;justify-content:center;align-items:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .3s ease}.modal-overlay.visible{visibility:visible;opacity:1}.modal-container{background:var(--cor-branco-puro);border-radius:var(--borda-radius);box-shadow:0 10px 30px rgba(0,0,0,.2);width:100%;max-width:650px;padding:30px 40px;position:relative;max-height:90vh;overflow-y:auto;transform:translateY(20px);transition:transform .3s ease-out}.modal-overlay.visible .modal-container{transform:translateY(0)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--cor-borda-geral);padding-bottom:15px;margin-bottom:25px;text-align:left}.modal-header h3{font-family:'Montserrat',sans-serif;color:var(--cor-azul-principal);font-size:1.6rem;font-weight:700}.modal-close{position:absolute;top:10px;right:15px;background:transparent;border:none;font-size:2.5rem;font-weight:300;line-height:1;cursor:pointer;color:var(--cor-texto-secundario);transition:color .3s ease,transform .3s ease}.modal-close:hover{color:var(--cor-laranja-acento);transform:rotate(90deg)}.modal-content p{margin-bottom:1.5em;line-height:1.7;color:var(--cor-texto-secundario)}
.modal-content p > strong{
    display: block;
    color: var(--cor-azul-principal);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.modal-content strong{color:var(--cor-texto-principal);font-weight:600}
.whatsapp-modal-container{border-top:8px solid var(--cor-laranja-acento);text-align:center}.whatsapp-modal-container .modal-header h3{font-size:1.5rem;text-align:center;width:100%}.whatsapp-modal-content p{color:var(--cor-texto-secundario);font-size:0.95rem;margin:10px 0}
.whatsapp-modal-content .nowrap strong {
    color: var(--cor-azul-principal);
    display: inline;
    margin: 0;
    font-size: inherit;
}
.oferta-limitada{font-size:.8rem!important;font-style:italic;opacity:.8;margin-top:15px}
.timer-oferta {background-color: #fff3e0; border: 1px solid var(--cor-laranja-acento); border-radius: 8px; padding: 8px 12px; margin: 15px auto 20px auto; font-size: 1rem; font-weight: 700; color: var(--cor-texto-principal); max-width: 320px;}.timer-oferta span {color: var(--cor-laranja-acento);font-family: 'Montserrat', sans-serif;}
.btn-whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px; 
    background-color:#25D366;
    color:var(--cor-branco-puro);
    border:none;
    border-radius:50px;
    padding:12px 25px; 
    font-family:'Montserrat',sans-serif;
    font-size:1rem; 
    text-decoration:none;
    margin-top:15px;
    transition:transform .2s ease,box-shadow .2s ease;
    white-space: nowrap;
}
.btn-whatsapp:hover{transform:translateY(-3px);box-shadow:0 4px 15px rgba(37,211,102,.4)}
.btn-whatsapp img {
    height: 20px;
}
.nowrap {
    white-space: nowrap;
}

/* Estilos da barra de notificação para ocupar a tela inteira */
.lembrete-oferta-fixo {
    position: fixed;
    top: -100px;
    left: 0; 
    transform: none;
    width: 100%;
    background-image: linear-gradient(to right, var(--cor-azul-principal), #0a288a);
    color: var(--cor-branco-puro);
    padding: 12px 20px;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    cursor: pointer;
    transition: top 0.5s ease-in-out;
    display: none;
}
.lembrete-oferta-fixo.visible {
    display: block;
    top: 0;
}
.lembrete-conteudo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}
.lembreteTimer {
    background-color: var(--cor-laranja-acento);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

@keyframes pulse-sun{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes fill-battery{from{width:0%}to{width:100%}}@keyframes shoot-ray{0%,100%{transform:translateX(50px);opacity:0}50%{opacity:1}}

/* --- RESPONSIVIDADE --- */
@media (max-width: 880px) {
    .layout-container {
        flex-direction: column;
        gap: 20px;
    }
    .image-section {
        order: -1;
    }
    #resultadoConteudo {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .input-row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 15px;
    }
    .card { padding: 25px 20px; }
    .form-section h2 { font-size: 1.4rem; margin-bottom: 20px; }
    .input-group label { margin-bottom: 5px; font-size: .9rem; }
    .input-group input, .input-group select { padding: 10px; }
    .btn-calcular { padding: 14px; font-size: 1rem; margin-top: 10px; }
    .lgpd-trigger-container { margin-top: 10px; }
    .solar-animation-container {
        flex-direction: row; 
        height: auto;
        gap: 20px;
        transform: scale(0.8);
    }
    .modal-container { padding: 25px 20px; }
    .modal-header h3 { font-size: 1.3rem; }
    .lembrete-oferta-fixo {
        width: 100%;
        border-radius: 0;
    }
}

/* --- RODAPÉ --- */
.app-footer {
    text-align: center;
    margin-top: 30px;
    padding: 15px;
    color: var(--cor-texto-secundario);
}

/* --- BOTÃO FLUTUANTE --- */
.btn-flutuante {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: none; /* Começa escondido */
    opacity: 0;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: transform 0.2s ease-in-out, opacity 0.3s ease;
}

.btn-flutuante.visible {
    display: flex;
    opacity: 1;
}

.btn-flutuante:hover {
    transform: scale(1.1);
}

.btn-flutuante img {
    width: 32px;
    height: 32px;
}