/* ===========================================================================
   /ficha-locatario  —  porte do <style> que está dentro de form-locatario.php
   no site no ar. Os seletores são os mesmos porque o HTML e o JS são os
   mesmos (abas, toggles, caixas de upload).

   ⚠ OS CAMPOS AQUI NÃO SÃO OS DAS OUTRAS PÁGINAS: 65 de altura, borda 2px
   #9d9d9d e 30 de margem embaixo — a ficha tem desenho próprio no legado.
   ======================================================================== */

.ficha {
    padding-bottom: 120px;
    /* Contexto herdado da referência (o texto de apoio depende dele). */
    font-size: 16px;
    line-height: 1.8;
}

/* A CAIXA BRANCA — os mesmos números da .cartao-contato da /contato, porque na
   referência é literalmente o mesmo componente (`.ltn__form-box
   contact-form-box box-shadow white-bg`). */
.cartao-ficha {
    padding: 40px 50px 50px;
    border: 0;
    border-radius: 0;
    background: var(--cor-branco);
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}

/* Título com a barrinha azul (`.title-2`), igual ao da /contato. */
.cartao-ficha .contato-form__titulo {
    margin: 0 0 30px;
    border-left: 2px solid var(--cor-primaria);
    padding-left: 10px;
    font-family: var(--fonte-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cor-escura);
}

/* --- Abas Pessoa Física / Jurídica ---------------------------------------- */
.tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tab-btn,
.toggle-btn {
    /* ⚠ HERDA o corpo da seção (16 no desktop, 14 abaixo de 992) e a
       entrelinha 1.8 — é o degrau que faz a aba medir 50,8 e depois 47,2.
       Cravar 16px aqui deixava a aba alta demais no celular. */
    font-size: inherit;
    line-height: 1.8;
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}

.tab-btn.active,
.toggle-btn.active {
    background: #f7f7f7;
    border-color: #cfcfcf;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.toggle-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 18px;
}

/* `hidden` é a classe que o script liga/desliga nos blocos condicionais. */
.hidden { display: none !important; }

/* ⚠ 35px. O <style> da ficha só define margem e peso; o TAMANHO vem do
   `.section-title` do tema, e sem ele cada um dos seis títulos ficava 16,7
   mais baixo — o formulário inteiro subia. */
.section-title {
    margin: 22px 0 10px;
    /* ⚠ SEM `font-family`: ele HERDA (Arial, como todo texto herdado do
       legado). Com Poppins, em 35px, a quebra de linha muda — o título ganhava
       uma linha a mais em 480 e 360 e empurrava o formulário 45,5 para baixo. */
    font-size: 35px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-escura);
}

.helper-text {
    margin-top: -8px;
    margin-bottom: 14px;
    font-size: 13px;
    opacity: .8;
}

.req { color: #b00020; font-weight: 700; }

/* --- Caixas de documento -------------------------------------------------- */
.upload-box {
    margin-top: 8px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px dashed #cfcfcf;
    border-radius: 8px;
    background: #fafafa;
}

.upload-note {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
    opacity: .85;
}

.upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.upload-item label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.upload-item input[type="file"] { width: 100%; }

.multi-upload-item {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.multi-upload-item > label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}

.multi-upload-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.multi-upload-slot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.multi-upload-slot label.slot-label {
    min-width: 60px;
    font-size: 12px;
    font-weight: normal;
    color: #6b7280;
}

.multi-upload-slot input[type="file"] {
    flex: 1;
    font-size: 12px;
}

/* --- Campos --------------------------------------------------------------- */
.ficha input[type="text"],
.ficha input[type="date"],
.ficha input[type="email"],
.ficha textarea,
.ficha select {
    width: 100%;
    height: 65px;
    margin-bottom: 30px;
    padding-inline: 20px;
    border: 2px solid #9d9d9d;
    border-radius: 0;
    background: var(--cor-branco);
    box-shadow: none;
    font-size: 16px;
}

/* ⚠ A COR CINZA É SÓ DOS CAMPOS DE TEXTO. O <style> da ficha pinta
   input/textarea com #9d9d9d e NÃO toca no select — por isso o "Finalidade"
   fica preto lá. */
.ficha input[type="text"],
.ficha input[type="date"],
.ficha input[type="email"],
.ficha textarea {
    color: #9d9d9d;
}

/* O select fica PRETO: o <style> da ficha não o pinta, e o nosso reset global
   (`button, input, select, textarea { color: inherit }`) o deixaria com a cor
   do corpo. */
.ficha select {
    color: #000;
}

.ficha textarea {
    height: auto;
    min-height: 120px;
    padding-block: 15px;
}

.ficha input::placeholder,
.ficha textarea::placeholder {
    color: #000;
}

/* Retorno visual de CPF/CNPJ/referência — o script põe e tira as classes. */
.ficha input.field-invalid { border-color: #e53e3e !important; }
.ficha input.field-valid   { border-color: #38a169 !important; }

/* --- Grade do legado (row/col) -------------------------------------------- */
.ficha .row {
    display: flex;
    flex-wrap: wrap;
    /* ⚠ -15 (a margem do `.row` do Bootstrap) com 10 de respiro na coluna: é
       essa mistura que faz o campo medir 530 e não 525. O <style> da ficha
       redefine só o padding da coluna; a margem da linha continua sendo a do
       tema. */
    margin-inline: -15px;
}

.ficha [class*="col-"] {
    position: relative;
    padding-inline: 10px;
    width: 100%;
}

@media (min-width: 768px) {
    .ficha .col-md-6 { width: 50%; }
    .ficha .col-md-4 { width: 33.333333%; }
    .ficha .col-md-3 { width: 25%; }
}

/* --- Termo de responsabilidade -------------------------------------------- */
.termo-box {
    margin: 10px 0;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}

.termo-box strong {
    display: block;
    margin-bottom: 8px;
}

/* --- Botão ---------------------------------------------------------------- */
/* ⚠ A CAIXA DO DESAFIO É 78 COM 48 EMBAIXO — as do reCAPTCHA da referência
   (`mb-5`). O Turnstile desenha 74,8; o que se iguala é a CAIXA, para o botão
   cair no mesmo lugar. Mesma nota da /contato. */
.ficha__turnstile {
    min-height: 78px;
    margin-bottom: 48px;
}

/* ⚠ SEM MARGEM NENHUMA: o `.btn-wrapper mt-0` da referência mede 0. Um
   `margin-top` aqui empurrava o botão 10px. */
.ficha .btn-wrapper { margin: 0; }

.ficha button[type="submit"] {
    /* ⚠ PESO 400. O `.btn` do projeto deixa o botão em 700; lá ele é normal, e
       isso muda a largura (150 contra 158 no celular). */
    font-weight: 400;
    padding: 17px 40px;
    border: 1px solid #198754;
    border-radius: 0;
    background: #198754;
    color: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: 16px;
    line-height: 1.5;
    text-transform: uppercase;
    cursor: pointer;
}

.ficha button[type="submit"]:hover {
    background: #157347;
    border-color: #146c43;
}

@media (max-width: 991.98px) {
    /* O corpo do site desce para 14 abaixo de 992, e a ficha acompanha — é o
       que faz a aba, os rótulos e o termo encolherem junto. */
    .ficha {
        font-size: 14px;
    }

    .ficha button[type="submit"] {
        padding: 15px 30px;
    }
}

@media (max-width: 767.98px) {
    /* ⚠ A GRADE NÃO MUDA NO CELULAR. `repeat(auto-fill, minmax(350px, 1fr))`
       vale em toda largura: numa caixa de 252 a coluna continua 350 e
       TRANSBORDA — é o que o site no ar faz. Eu tinha posto `1fr` aqui, que
       dava 332 e deixava o bloco 31 mais alto que o dela. Replicado como está,
       inclusive o transbordo. */

    /* ⚠ 25 DE RESPIRO LATERAL, não 50 — igual à .cartao-contato. Sem isto o
       formulário ficava 50 mais estreito que o dela. */
    .cartao-ficha {
        padding: 40px 25px 50px;
    }

    .ficha button[type="submit"] {
        padding: 12px 30px;
        font-size: 14px;
    }
}

/* ⚠ O BOTÃO DENTRO DO CAMPO DE ARQUIVO PRECISA HERDAR A ENTRELINHA.
   Sem isto ele fica com `line-height: normal` e mede 20 em vez de 27,59 —
   6px a menos em CADA um dos 35 anexos, o que encurtava o formulário inteiro. */
/* ⚠ ALTURA DO CAMPO DE ARQUIVO CRAVADA NO PRÓPRIO CAMPO.
   Lá o reboot do Bootstrap faz `::file-selector-button { font: inherit }` e o
   botão herda a entrelinha 1.8, o que dá 27,59 de altura (12px) e 34,8 (16px).
   Aqui nenhuma forma de estilizar a pseudo venceu o estilo do navegador — nem
   `line-height: inherit`, nem o atalho `font`, nem valor cravado —, então a
   altura vai no campo: `1.8em` sobre o corpo dele mais os 6 de respiro e borda
   do botão resolve os DOIS tamanhos com uma regra só.
   Sem isto cada um dos 35 anexos ficava 5 a 6px mais baixo. */
.ficha input[type="file"] {
    height: calc(1.8em + 6px);
}