/* Estilos próprios do simulador. O resto vem das classes do Tailwind no HTML.
   Cor principal: azul-marinho #002B66 (navy-800). */

:root {
    --navy-900: #001E47;
    --navy-800: #002B66;
    --navy-700: #063474;
    --navy-100: #D8E3F3;
    --navy-50: #EEF3FA;
    --borda: #E2E8F0;
    --texto: #1E293B;
    --texto-2: #64748B;
}

body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: 'Barlow Condensed', 'Inter', sans-serif; }

/* ---------- Barra do topo ---------- */
.nav-link {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #334155;
    padding: 6px 8px;
    border-radius: 8px;
    white-space: nowrap;
    transition: color .15s, background-color .15s;
}
.nav-link:hover { color: var(--navy-800); background: var(--navy-50); }
.nav-link.ativo { color: var(--navy-800); box-shadow: inset 0 -2px 0 var(--navy-800); border-radius: 0; }
@media (max-width: 639px) { .nav-link { font-size: 15px; padding: 6px 6px; } }

/* ---------- Botões ---------- */
.btn-primario, .btn-secundario, .btn-claro {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 14px;
    padding: 10px 16px; border-radius: 10px;
    transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
}
.btn-primario { background: var(--navy-800); color: #fff; }
.btn-primario:hover { background: var(--navy-900); }
.btn-secundario { background: #fff; color: var(--navy-800); border: 1px solid var(--borda); }
.btn-secundario:hover { border-color: var(--navy-800); }
.btn-claro { background: #fff; color: var(--navy-900); }
.btn-claro:hover { background: var(--navy-50); }
.btn-escuro { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 10px; background: var(--navy-900); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.btn-escuro:hover { background: #00132f; }
button:disabled, .btn-primario[disabled], .btn-claro[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Cartões e campos ---------- */
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 16px; padding: 20px; }
@media (min-width: 640px) { .cartao { padding: 24px; } }
.titulo-cartao { font-family: 'Barlow Condensed', 'Inter', sans-serif; font-weight: 700; font-size: 22px; color: var(--navy-800); line-height: 1.1; }
.subtitulo-cartao { font-family: 'Barlow Condensed', 'Inter', sans-serif; font-weight: 600; font-size: 19px; color: var(--navy-800); }
.rotulo { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.campo {
    display: block; width: 100%;
    padding: 10px 12px; font-size: 14px; color: var(--texto);
    background: #fff; border: 1px solid #CBD5E1; border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.campo:focus { outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(0, 43, 102, .12); }

/* Cartão de escolha (Início e Empreendimento) */
.cartao-escolha {
    background: #fff; border: 1px solid var(--borda); border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cartao-escolha:hover { border-color: var(--navy-800); box-shadow: 0 8px 22px rgba(0, 43, 102, .14); }

/* Ilustração usada no lugar da foto (até termos as imagens do empreendimento):
   "planta de loteamento" estilizada em azul-marinho. */
.arte-lote {
    position: relative;
    background-color: var(--navy-800);
    background-image:
        radial-gradient(ellipse at 78% 22%, rgba(127, 159, 210, .55) 0, rgba(127, 159, 210, 0) 42%),
        radial-gradient(ellipse at 12% 90%, rgba(76, 118, 184, .45) 0, rgba(76, 118, 184, 0) 45%),
        linear-gradient(rgba(255,255,255,.14) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.14) 2px, transparent 2px),
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(135deg, #00326F 0%, #001E47 100%);
    background-size: 100% 100%, 100% 100%, 96px 64px, 96px 64px, 24px 16px, 24px 16px, 100% 100%;
}
.arte-lote::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.22) 46% 49%, transparent 49% 100%),
                linear-gradient(20deg, transparent 0 62%, rgba(255,255,255,.16) 62% 64.5%, transparent 64.5% 100%);
}
.arte-lote .selo, .cartao-escolha .selo {
    position: absolute; left: 16px; bottom: 16px; z-index: 1;
    background: rgba(255,255,255,.95); color: var(--navy-900);
    font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px;
}

/* ---------- Etapas (stepper) ---------- */
.passo {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 8px 6px 12px; font-size: 13px; font-weight: 500; color: #94A3B8;
    border-bottom: 2px solid transparent; border-radius: 12px 12px 0 0;
    background: transparent; width: 100%;
}
.passo .icone {
    width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #F1F5F9; color: #94A3B8; font-size: 13px;
}
.passo.feito { color: #475569; cursor: pointer; }
.passo.feito .icone { background: var(--navy-50); color: var(--navy-800); }
.passo.feito:hover { color: var(--navy-800); }
.passo.ativo { color: var(--navy-800); font-weight: 600; border-bottom-color: var(--navy-800); }
.passo.ativo .icone { background: var(--navy-100); color: var(--navy-800); }
.passo.futuro { background: #F8FAFC; cursor: not-allowed; }
@media (max-width: 1023px) {
    .passo { flex-direction: column; gap: 4px; font-size: 12px; padding: 6px 2px 10px; }
}
@media (max-width: 639px) {
    .passo { font-size: 10px; }
    .passo .icone { width: 28px; height: 28px; font-size: 12px; }
}

/* ---------- Botões de escolha (quadra, lote, prazo...) ---------- */
.chip {
    min-width: 56px; padding: 7px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 500; color: #334155;
    background: #F8FAFC; border: 1px solid var(--borda);
    transition: border-color .12s, background-color .12s, color .12s;
}
.chip:hover:not(:disabled) { border-color: var(--navy-800); color: var(--navy-800); }
.chip.ativo { background: var(--navy-50); border-color: var(--navy-800); color: var(--navy-800); font-weight: 600; }
.chip:disabled { opacity: .45; cursor: not-allowed; }
.selo-escolha {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; padding: 3px 10px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    background: var(--navy-50); color: var(--navy-800); border: 1px solid var(--navy-800);
}
.selo-escolha.vazio { background: #fff; color: #94A3B8; border-color: var(--borda); font-weight: 400; }

/* Valores de destaque (cartão da unidade) */
.valor-destaque {
    background: var(--navy-50); color: var(--navy-800);
    border-radius: 10px; padding: 9px 10px; text-align: center; font-size: 14px; font-weight: 500;
}

/* Faixa de informações (Empreendimento | Quadra | Lote...) */
.faixa-info { display: flex; flex-wrap: wrap; gap: 0; }
.faixa-info > div { padding: 2px 16px; border-left: 1px solid var(--borda); }
.faixa-info > div:first-child { padding-left: 0; border-left: 0; }
.faixa-info dt { font-size: 13px; font-weight: 600; color: var(--texto); }
.faixa-info dd { font-size: 13px; color: #475569; margin-top: 2px; }
@media (max-width: 639px) {
    .faixa-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 0; }
    .faixa-info > div { border-left: 0; padding-left: 0; }
}

/* Blocos do plano de pagamento */
.bloco { border: 1px solid var(--borda); border-radius: 14px; padding: 18px; }
@media (min-width: 640px) { .bloco { padding: 20px 22px; } }
.campo-leitura {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; font-size: 14px; color: var(--texto);
    border: 1px solid var(--borda); border-radius: 10px; background: #fff;
}
.campo-leitura.cinza { background: #F1F5F9; color: #475569; }
.campo-leitura i { color: #64748B; }

/* Botões do visualizador do mapa */
.viz-btn {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; transition: background-color .15s;
}
.viz-btn:hover { background: rgba(255,255,255,.14); }
.viz-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 639px) { .viz-btn { width: 36px; height: 36px; font-size: 16px; } }


/* Resumo */
.linha-resumo { display: grid; grid-template-columns: 1fr 1fr 1fr; background: #F1F5F9; border-radius: 12px; }
.linha-resumo > div { padding: 14px 16px; }
.linha-resumo > div + div { border-left: 1px solid #fff; }
.linha-resumo .r { font-size: 13px; font-weight: 600; color: var(--texto); }
.linha-resumo .v { font-size: 13px; color: #475569; margin-top: 2px; }
@media (max-width: 639px) {
    .linha-resumo > div { padding: 10px 10px; }
    .linha-resumo .r, .linha-resumo .v { font-size: 12px; }
}

/* Carta proposta: evitar quebra de página no meio de blocos no PDF */
.avoid-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    display: block;
}

/* Impressão do resumo da simulação */
@media print {
    body { background: #fff !important; }
    .cartao { border-color: #CBD5E1; }
    #pg-simulador .pb-32 { padding-bottom: 0 !important; }
}