/*
 * formulario-publico/estilo.css
 *
 * A folha de estilo da página de cadastro em contrato.vdpag.com.br.
 *
 * MOBILE PRIMEIRO, E NÃO POR MODA: quem preenche este formulário está com o
 * celular na mão, tirando foto da própria CNH. As medidas de toque (48px), o
 * tamanho de fonte dos campos (16px, abaixo disso o iOS dá zoom sozinho ao
 * focar) e o botão de enviar fixo no rodapé saem daí.
 *
 * A cor de destaque vem do esquema (--cor), definida pelo admin. Tudo o que é
 * dourado nesta folha usa a variável — trocar a cor no construtor muda a página
 * inteira, sem publicar nada.
 */

:root {
    --cor: #d4af37;
    --cor-escura: #b8952c;
    --cor-fraca: rgba(212, 175, 55, .12);

    --tinta: #1c1917;
    --tinta-media: #57534e;
    --tinta-fraca: #a8a29e;
    --papel: #ffffff;
    --fundo: #faf9f7;
    --linha: #e7e5e4;

    --erro: #b91c1c;
    --erro-fundo: #fef2f2;
    --ok: #15803d;

    --raio: 14px;
    --sombra: 0 1px 2px rgba(28, 25, 23, .04), 0 8px 24px rgba(28, 25, 23, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

/* Um brilho discreto no topo, na cor da marca. Fica atrás de tudo e não
 * intercepta clique nenhum. */
.fundo {
    position: fixed;
    inset: 0 0 auto 0;
    height: 320px;
    background: radial-gradient(1200px 320px at 50% -120px, var(--cor-fraca), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.pagina {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* ------------------------------------------------------------------ cabeçalho */

.cabecalho { text-align: center; margin-bottom: 24px; }

.logo { max-height: 56px; width: auto; margin-bottom: 16px; }

.cabecalho h1 {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.subtitulo { margin: 0 0 12px; color: var(--tinta-media); font-size: 16px; }

.intro {
    margin: 0 auto;
    max-width: 56ch;
    color: var(--tinta-media);
    font-size: 14.5px;
    white-space: pre-line;   /* o admin digita em linhas; elas são respeitadas */
}

/* ------------------------------------------------------------------ cartões */

.cartao {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
}

.cartao-aviso { text-align: center; padding: 48px 24px; }
.cartao-aviso h1 { font-size: 22px; margin: 16px 0 8px; }
.cartao-aviso p { color: var(--tinta-media); margin: 0 0 8px; }

.emblema {
    width: 56px; height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 28px; font-weight: 700;
}
.emblema-ok   { background: #dcfce7; color: var(--ok); }
.emblema-erro { background: var(--erro-fundo); color: var(--erro); }

.protocolo { font-size: 14px; color: var(--tinta-fraca); margin-top: 16px; }

.girando {
    width: 36px; height: 36px;
    margin: 0 auto 16px;
    border: 3px solid var(--linha);
    border-top-color: var(--cor);
    border-radius: 50%;
    animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ seções */

.secao { margin-bottom: 8px; }

.secao + .secao { margin-top: 32px; }

.secao-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cor-escura);
}
.secao-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--linha);
}

/* A grade de campos: três colunas no computador, uma no celular. A largura
 * escolhida no construtor (1, 2 ou 3) vira quantas colunas o campo ocupa. */
.grade {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px 16px;
}

.campo            { grid-column: span 6; min-width: 0; }
.campo[data-l="2"]{ grid-column: span 3; }
.campo[data-l="3"]{ grid-column: span 2; }

@media (max-width: 640px) {
    /* No celular tudo ocupa a linha inteira. Meia largura num aparelho de 360px
     * dá 160px de campo — não cabe um nome, nem uma data por extenso. */
    .campo, .campo[data-l="2"], .campo[data-l="3"] { grid-column: span 6; }
    .cartao { padding: 20px 16px; }
    .pagina { padding: 16px 12px 40px; }
    .cabecalho h1 { font-size: 22px; }
}

/* ------------------------------------------------------------------ campos */

.rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.obrigatorio { color: var(--erro); margin-left: 2px; }

.ajuda {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--tinta-fraca);
    line-height: 1.45;
}

.entrada,
select.entrada,
textarea.entrada {
    width: 100%;
    min-height: 48px;              /* alvo de toque confortável */
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;               /* abaixo disso o iOS dá zoom ao focar */
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
}

textarea.entrada { min-height: 110px; resize: vertical; line-height: 1.5; }

.entrada:focus {
    outline: none;
    border-color: var(--cor);
    box-shadow: 0 0 0 3px var(--cor-fraca);
}

.entrada::placeholder { color: var(--tinta-fraca); }

select.entrada {
    /* A setinha é desenhada aqui porque o `appearance: none` acima tira a do
     * sistema — sem isto o select fica visualmente idêntico a um campo de texto
     * e ninguém percebe que ele abre uma lista. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2357534e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Campo com erro */
.campo-erro .entrada { border-color: var(--erro); }
.campo-erro .entrada:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .1); }

.mensagem-erro {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--erro);
}

/* ------------------------------------------------------------------ escolhas */

.escolhas { display: grid; gap: 8px; }

.escolha {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--linha);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.escolha:hover { border-color: var(--cor); }
.escolha input { width: 20px; height: 20px; accent-color: var(--cor); flex: none; margin: 0; }
.escolha:has(input:checked) { border-color: var(--cor); background: var(--cor-fraca); }

/* O aceite ("li e concordo") é uma escolha só, e o texto costuma ser longo —
 * alinhar pelo topo evita a caixa flutuando no meio de três linhas. */
.escolha-aceite { align-items: flex-start; }
.escolha-aceite input { margin-top: 2px; }

/* ------------------------------------------------------------------ arquivos */

.arquivo-area {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 14px;
    border: 1.5px dashed var(--linha);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.arquivo-area:hover { border-color: var(--cor); background: var(--cor-fraca); }
.arquivo-area input[type=file] { display: none; }

.arquivo-icone {
    width: 44px; height: 44px; flex: none;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--cor-fraca);
    color: var(--cor-escura);
}

.arquivo-texto { min-width: 0; }
.arquivo-titulo { font-size: 14px; font-weight: 600; }
.arquivo-dica   { font-size: 12.5px; color: var(--tinta-fraca); }

/* O arquivo já enviado */
.arquivo-pronto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-top: 8px;
    border: 1px solid var(--linha);
    border-radius: 10px;
    background: var(--fundo);
}
.arquivo-miniatura {
    width: 44px; height: 44px; flex: none;
    object-fit: cover;
    border-radius: 8px;
    background: var(--linha);
}
.arquivo-nome {
    flex: 1; min-width: 0;
    font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arquivo-peso { font-size: 12px; color: var(--tinta-fraca); }

.arquivo-remover {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--tinta-fraca);
    font-size: 18px;
    cursor: pointer;
}
.arquivo-remover:hover { background: var(--erro-fundo); color: var(--erro); }

/* A barra de progresso do upload. Existe porque a foto de uma CNH tem vários
 * megabytes e, sem ela, a página parece travada por dez segundos. */
.progresso {
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--linha);
    overflow: hidden;
}
.progresso-barra {
    height: 100%;
    width: 0;
    background: var(--cor);
    transition: width .2s;
}

/* ------------------------------------------------------------------ avisos */

.alerta {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    margin-top: 20px;
}
.alerta-erro {
    background: var(--erro-fundo);
    border: 1px solid rgba(185, 28, 28, .2);
    color: var(--erro);
}
.alerta ul { margin: 8px 0 0; padding-left: 20px; }
.alerta li { margin-bottom: 4px; }

/* ------------------------------------------------------------------ botões */

.rodape-form { margin-top: 28px; }

.revisao {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--tinta-fraca);
    text-align: center;
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 24px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, transform .05s, opacity .15s;
}
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .6; cursor: default; }

.botao-principal { background: var(--cor); color: #1c1917; }
.botao-principal:hover:not([disabled]) { background: var(--cor-escura); }

.botao-fantasma {
    background: transparent;
    border: 1px solid var(--linha);
    color: var(--tinta-media);
    width: auto;
    margin-top: 16px;
}

.botao-girando {
    width: 18px; height: 18px;
    border: 2px solid rgba(28, 25, 23, .3);
    border-top-color: #1c1917;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

/* ------------------------------------------------------------------ armadilha */

/*
 * Fora da tela, mas NÃO com `display:none`.
 *
 * Robô bom ignora campo escondido com display:none justamente por saber que é
 * armadilha. Empurrar para fora da área visível mantém o campo "real" aos olhos
 * dele e invisível aos olhos de gente.
 */
.armadilha {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ modo escuro */

/*
 * O sistema operacional manda. Não há botão de tema aqui: é uma página que a
 * pessoa abre uma vez na vida, e um controle a mais na tela é um controle a
 * mais para ela decidir antes de fazer o que veio fazer.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #f5f5f4;
        --tinta-media: #d6d3d1;
        --tinta-fraca: #a8a29e;
        --papel: #1c1917;
        --fundo: #0c0a09;
        --linha: #292524;
        --erro: #fca5a5;
        --erro-fundo: rgba(185, 28, 28, .15);
        --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
    }
    .botao-principal { color: #1c1917; }
    .emblema-ok { background: rgba(21, 128, 61, .2); color: #86efac; }
    select.entrada {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d6d3d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    }
}

/* Quem pediu menos movimento não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}