/* ==========================================
   ESTIMEI — style.css
   Tipografia e geometria atualizadas em 25/07/2026 — cor institucional
   (navy + ouro) mantida de propósito (única decisão de marca não-genérica
   do projeto, ver pesquisa/DIRECAO-DESIGN.md). O que muda é a execução:
   raio reduzido, zero sombra decorativa, hover nunca move o elemento.
   ========================================== */

/* --- 1. Variáveis de Tema --- */
:root {
    --primary:        #0b2545;
    --accent:         #adbdcc;
    --ouro:           #8F6207;   /* texto/ícone — 4,92:1 de contraste no papel */
    --ouro-luz:       #F0C040;   /* filete/realce — nunca texto */
    --success:        #16a34a;
    --error:          #d9534f;

    /* Tipografia — três papéis fixos, nenhum default do sistema */
    --font-ui:    'Archivo', -apple-system, sans-serif;      /* interface, rótulo, corpo */
    --font-num:   'IBM Plex Mono', ui-monospace, monospace;  /* todo valor monetário/percentual */
    --font-voz:   'IBM Plex Serif', Georgia, serif;          /* metodologia, base legal */

    /* Geometria — raio contido, sem sombra decorativa */
    --r-sm: 2px;   /* botão */
    --r-md: 3px;   /* card, input, caixa de resultado */

    /* Tema claro (padrão) */
    --bg-body:        #F7F5F0;   /* off-white quente — nunca branco puro */
    --bg-card:        #ffffff;
    --bg-input:       #ffffff;
    --bg-section:     #F7F5F0;
    --bg-destaque:    #f8f9fa;
    --text-primary:   #1c2530;
    --text-secondary: #5C6B82;
    --border-color:   #C7CEDA;
    --shadow-color:   rgba(0, 0, 0, 0.1);

    /* Escala "tinta" — texto/metadado do selo de procedência (pesquisa/DIRECAO-DESIGN.md §3.2) */
    --tinta-900: #0B2545;
    --tinta-700: #274060;
    --tinta-500: #5C6B82;
    --tinta-200: #C7CEDA;
    --tinta-100: #E3E7EE;
    --dado:      #FFFFFF;   /* superfície do bloco de resultado — distinta do card */

    /* Verticais — só filete de 3px e rótulo, nunca preenchimento/fundo pastel */
    --v-reforma:  #8C3A12;
    --v-imoveis:  #1D4E4A;
    --v-financas: #4B3A66;
    --v-leiloes:  #7A4A05;

    /* Semântica rígida — uma família, um significado, nunca reaproveitado */
    --risco: #A32020;   /* passivo, débito, dívida acima da avaliação */
    --ganho: #1E6B4F;   /* economia, desconto, ROI positivo */
    --prazo: #8A5A00;   /* urgência, carrego, defasagem de competência */
}

/* Tema escuro */
[data-theme="dark"] {
    --bg-body:        #0E1626;
    --bg-card:        #141F33;
    --bg-input:       #1B2740;
    --bg-section:     #0E1626;
    --bg-destaque:    #1B2740;
    --text-primary:   #EEF1F6;
    --text-secondary: #8E9CB2;
    --border-color:   #2C3A52;
    --shadow-color:   rgba(0, 0, 0, 0.5);
    --dado:           #141F33;
    --tinta-100:      #1B2740;
}

/* --- 2. Base e Reset --- */
*  { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100% !important; overflow-x: hidden !important; margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-ui);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-body);
    transition: background-color 0.3s, color 0.3s;
    width: 100%;
}

/* --- 3. Navbar --- */
.navbar {
    background: var(--primary);
    padding: 0.4rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(173, 189, 204, 0.15);
}

.navbar-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 18px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    border-bottom: 3px solid #f0c040;
    transition: background 0.3s, transform 0.3s, border-color 0.3s;
}

.navbar-brand:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.02);
    border-bottom-color: #ffd700;
}

.brand-logo {
    content: url("/assets/img/Estimei-wordmark-branco.png");
    max-height: 80px;
    height: auto;
    max-width: 100%;
    width: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s;
}

.brand-logo:hover { transform: scale(1.05); }

.brand-text {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: bold;
    font-family: 'Georgia', serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Menu Desktop */
.navbar-menu {
    display: flex;
    list-style: none;
    gap: 20px;
}

.navbar-menu a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    transition: color 0.3s, background 0.3s;
}

.navbar-menu a:hover {
    color: #fff;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.08);
}

.navbar-menu a.active {
    color: #fff;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.12);
    border-bottom: 2px solid #f0c040;
    padding-bottom: 3px;
}

/* Botão Hambúrguer */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 28px;
    color: white;
    background: none;
    border: none;
    padding: 5px 10px;
    order: 2;
}

/* Label do pilar ativo — visível só no mobile */
#pilar-ativo-label {
    display: none;
    color: rgba(255,255,255,0.75);  /* branco discreto — igual aos links do menu */
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    order: 3;                   /* após o hambúrguer (logo=1, ham=2, label=3) */
    padding-left: 6px;
    border-left: 2px solid #f0c040;  /* traço dourado como referência visual */
}

/* --- 4. Botão de Tema (modo escuro) --- */
.theme-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 999;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover  { transform: scale(1.1);  box-shadow: 0 6px 25px rgba(0,0,0,0.4); }
.theme-toggle:active { transform: scale(0.95); }

/* --- 5. Layout de Seções --- */
.main-wrapper { width: 100%; }

.tool-section {
    padding: 40px 20px;
    display: none; /* JS controla exibição */
    flex-direction: column;
    align-items: center;
    background: var(--bg-section);
    color: var(--text-primary);
}

.tool-section.active { display: flex; }

/* --- 6. Grid de Calculadoras --- */
.calculators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 450px));
    gap: 30px;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
}

/* --- 7. Cards --- */
.calculator-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: var(--r-md);
    box-shadow: none;
    border: 1px solid var(--border-color);
    width: 100%;
    transition: border-color 0.15s;
}

.calculator-card h3 {
    text-align: center;
    margin-bottom: 8px;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 600;
}

.calculator-card p {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-secondary);
}

/* Grupos de seção dentro dos cards (substituindo style inline) */
.card-section {
    margin-bottom: 15px;
    background: var(--bg-destaque);
    padding: 12px;
    border-radius: var(--r-md);
}

.card-section-title {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.95rem;
}

/* --- 8. Formulários --- */
.input-group { margin-bottom: 10px; }

.input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 16px; /* evita zoom iOS */
    font-family: var(--font-ui);
    transition: border-color 0.15s;
}

.input-group input:focus,
.input-group select:focus {
    border-color: var(--primary);
    outline: 2px solid var(--ouro-luz);
    outline-offset: 1px;
}

/* Validação visual */
.input-group input:invalid:not(:placeholder-shown) {
    border-color: var(--error);
}

.input-group input.input-error {
    border-color: var(--error);
    background-color: #fef2f2;
}

[data-theme="dark"] .input-group input.input-error {
    background-color: #2d1a1a;
}

.input-group .field-error {
    display: block;
    color: var(--error);
    font-size: 0.78rem;
    margin-top: 3px;
}

.input-group small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 3px;
}

/* Select padrão (substituindo style="width:100%;padding:12px..." inline) */
.input-group select {
    appearance: auto;
    cursor: pointer;
}

/* --- 9. Botões --- */
button {
    width: 100%;
    padding: 14px;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    font-family: var(--font-ui);
    transition: background-color 0.15s;
}

button:hover    { background-color: #143a6b; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
    background-color: #6b7280;
    margin-top: 10px;
}

.btn-secondary:hover { background-color: #4b5563; }

/* --- 10. Caixa de Resultado --- */
.resultado-box {
    margin-top: 20px;
    padding: 15px;
    border-radius: var(--r-md);
    display: none;
    border-left: 3px solid var(--primary);
    background: var(--bg-card);
    color: var(--text-primary);
}

.resultado-box.show { display: block; }

/* Estado de erro */
.resultado-box.error {
    display: block;
    background-color: #fbeaea;
    border: 1px solid var(--error);
    border-left: 3px solid var(--error);
    color: #8a2020;
    padding: 15px;
    border-radius: var(--r-md);
}

.resultado-box.error * { color: #8a2020; }

[data-theme="dark"] .resultado-box.error {
    background-color: #2d1a1a;
    border-color: #8b2a2a;
    color: #ff6b6b;
}

[data-theme="dark"] .resultado-box.error * { color: #ff6b6b; }

/* Blocos coloridos dentro dos resultados — CORRIGIDO 25/07/2026: os
   pasteis anteriores (#eff6ff/#f0fdf4/#fef3c7) são a assinatura literal
   do Tailwind default, catalogada como "AI slop" na pesquisa do projeto
   (pesquisa/PADROES-UX.md). Substituídos por tons derivados da própria
   paleta institucional (navy/ouro/verde-ganho), nunca de biblioteca. */
.resultado-bloco {
    background: var(--bg-destaque);
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 8px;
}

.resultado-bloco.verde  { background: #EAF3EC; }
.resultado-bloco.azul   { background: #E7ECF3; }
.resultado-bloco.amarelo{ background: #FBF1DD; }
.resultado-bloco.cinza  { background: var(--bg-destaque); }

[data-theme="dark"] .resultado-bloco.verde   { background: #12281c; }
[data-theme="dark"] .resultado-bloco.azul    { background: #16223a; }
[data-theme="dark"] .resultado-bloco.amarelo { background: #2b2210; }
[data-theme="dark"] .resultado-bloco hr      { border-color: #2C3A52; }

/* Cores semânticas em texto de resultado */
.color-green   { color: #1E6B4F; }
.color-primary { color: var(--primary); }
.color-error   { color: var(--error); }

[data-theme="dark"] .color-green   { color: #4FB98A; }
[data-theme="dark"] .color-primary { color: #93c5fd; }

/* --- 11. Seção Início — Pilares --- */
.intro-pilares {
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-card);
    border-bottom: 2px solid var(--border-color);
}

.intro-pilares h1 {
    margin-bottom: 10px;
    color: var(--primary);
}

[data-theme="dark"] .intro-pilares h1 { color: #ffffff; }

.intro-pilares p { color: var(--text-secondary); }

.pilares-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 30px auto 0;
}

.pilar-card {
    background: var(--primary);
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.3s, background 0.3s;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.pilar-card:hover {
    transform: translateY(-5px);
    background: #003366;
}

.pilar-card h3 { margin-bottom: 5px; font-size: 1.2rem; }

.pilar-card p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 10px;
}

.pilar-card .calculadoras-lista {
    font-size: 0.75rem;
    opacity: 0.8;
    text-align: left;
    line-height: 1.6;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    flex: 1;
}

/* --- 12. Títulos de Seção --- */
.section-title {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 20px 0 30px;
    text-align: left;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    max-width: 1200px;
}

.section-title::after { content: none; }

[data-theme="dark"] .section-title { color: var(--text-primary); }

/* --- 13. Gráficos --- */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 15px auto;
    padding: 10px;
    background: var(--bg-card);
    border-radius: var(--r-md);
    border: 1px solid var(--border-color);
}

.chart-container canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 250px;
}

/* --- 14. Responsivo — Tablet (≤768px) --- */
@media (max-width: 768px) {
    .hamburger { display: block; }
    #pilar-ativo-label { display: block; }

    .navbar-brand { padding: 4px 12px; gap: 0; justify-content: center; }
    .brand-logo   { max-height: 54px; width: auto; }
    .brand-text   { font-size: 0.9rem; }

    .navbar-menu {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--primary);
        flex-direction: column;
        gap: 0;
        z-index: 1000;
        padding: 10px 0;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    .navbar-menu.active { display: flex; }

    .navbar-menu li {
        text-align: center;
        padding: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
    }

    .navbar-menu li:last-child { border-bottom: none; }

    .navbar-menu a {
        display: block;
        font-size: 1.1rem;
        padding: 5px 0;
    }

    .calculators-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 10px;
    }

    .calculator-card { padding: 15px; }
    .calculator-card h3 { font-size: 1.1rem; }

    .tool-section { padding: 20px 10px; }

    .section-title {
        font-size: 1.5rem;
        padding: 15px 10px;
    }

    .pilares-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 0 10px;
    }

    .pilar-card { padding: 15px 10px; }
    .pilar-card h3 { font-size: 1rem; }
    .pilar-card p  { font-size: 0.85rem; }

    .intro-pilares { padding: 20px 15px; }
    .intro-pilares h1 { font-size: 1.5rem; }
    .intro-pilares p  { font-size: 0.95rem; }

    .resultado-box { padding: 12px; font-size: 0.95rem; }

    button { padding: 12px; font-size: 1rem; }

    small { font-size: 0.7rem; }
}

/* --- 15. Responsivo — Mobile pequeno (≤480px) --- */
@media (max-width: 480px) {
    .navbar-menu { top: 55px; }
    .navbar-menu a { font-size: 1rem; }
    .brand-logo { max-height: 54px; width: auto; max-width: 100%; }

    .pilares-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pilar-card { padding: 12px 8px; }
    .pilar-card h3 { font-size: 0.9rem; }
    .pilar-card p  { font-size: 0.75rem; }

    .section-title { font-size: 1.3rem; }

    .calculator-card { padding: 12px; }
    .calculator-card h3 { font-size: 1rem; }

    .input-group input,
    .input-group select { padding: 8px; font-size: 14px; }

    button { padding: 10px; font-size: 0.9rem; }

    .intro-pilares h1 { font-size: 1.3rem; }
}

/* --- 16. Responsivo — Mobile muito pequeno (≤360px) --- */
@media (max-width: 360px) {
    .pilares-grid { grid-template-columns: 1fr; }
    .brand-logo { max-height: 54px; width: auto; max-width: 100%; }
    .navbar-menu { top: 50px; }
    .calculator-card { padding: 10px; }
}

/* ─── Banner de Indicadores Financeiros ─── */
.indicadores-bar {
    background: var(--primary);
    color: rgba(255,255,255,0.92);
    font-size: 0.78rem;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    letter-spacing: 0.02em;
    position: sticky;
    top: 60px; /* abaixo da navbar */
    z-index: 99;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.ind-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ind-label {
    opacity: 0.75;
    font-weight: 400;
}

.ind-valor {
    font-weight: 700;
    color: #fff;
}

.ind-sep {
    opacity: 0.35;
    font-size: 0.7rem;
}

.ind-fonte {
    margin-left: 8px;
    opacity: 0.55;
    font-size: 0.7rem;
    font-style: italic;
}

@media (max-width: 480px) {
    .indicadores-bar {
        font-size: 0.72rem;
        padding: 5px 12px;
        top: 56px;
    }
    .ind-sep { display: none; }
}

/* ─── AUDITORIA DE OVERFLOW — Corrigir containers com width fixa ─── */
/* Garantir que nenhum container ultrapasse 100% de largura em mobile */
@media (max-width: 480px) {
    .tool-section { width: 100% !important; max-width: 100% !important; padding: 20px 8px; }
    .calculators-grid { width: 100% !important; max-width: 100% !important; }
    .section-title { width: 100% !important; max-width: 100% !important; padding: 0 8px; }
    .pilares-grid { width: 100% !important; max-width: 100% !important; }
    .intro-pilares { width: 100% !important; max-width: 100% !important; }
    .resultado-box { width: 100% !important; max-width: 100% !important; }
    .chart-container { width: 100% !important; max-width: 100% !important; }
    .navbar-container { max-width: 100% !important; padding: 0 8px !important; }
}