.formulario-dynamic {
    display: grid;
    gap: var(--spacing-scale-4x, 1.5rem);
}

.formulario-dynamic__field {
    min-width: 0;
}

/* Grade dos campos: cada campo tem a largura escolhida no builder (layout da
   definição). A grade de 12 colunas depende da largura do próprio formulário
   (container query), não da tela: num bloco estreito do Hotsite ou no celular
   os campos ficam um embaixo do outro, como pede o gov.br. A partir de 30rem
   (480px): o formulário em meia linha do Hotsite (~550px) já mostra as colunas. */
.formulario-dynamic {
    container-type: inline-size;
}

.formulario-dynamic__campos {
    display: grid;
    gap: var(--spacing-scale-4x, 1.5rem);
    min-width: 0;
}

@container (min-width: 30rem) {
    .formulario-dynamic__campos {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .formulario-dynamic__field--inteira {
        grid-column: span 12;
    }

    .formulario-dynamic__field--metade {
        grid-column: span 6;
    }

    .formulario-dynamic__field--terco {
        grid-column: span 4;
    }

    .formulario-dynamic__field--dois_tercos {
        grid-column: span 8;
    }
}

/* "Opções lado a lado": rádios/caixas na mesma linha, quebrando se faltar espaço.
   Com as duas classes para vencer o "display: grid" de .formulario-dynamic__choices,
   que vem depois no arquivo (com uma classe só, o grid ganhava e nada mudava). */
.formulario-dynamic__choices.formulario-dynamic__choices--lado-a-lado {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-2x, 0.75rem) var(--spacing-scale-4x, 1.5rem);
}

/* O gov.br põe margem em cima da opção que vem depois de outra (.br-radio + .br-radio);
   na mesma linha isso desalinha a segunda opção. O espaço fica com o gap acima.
   Duas classes: em telas que carregam o CSS do gov.br depois deste, ele venceria. */
.formulario-dynamic__choices.formulario-dynamic__choices--lado-a-lado > .br-radio,
.formulario-dynamic__choices.formulario-dynamic__choices--lado-a-lado > .br-checkbox {
    margin-top: 0;
}

.formulario-dynamic .br-input,
.formulario-dynamic .br-select,
.formulario-dynamic .br-textarea,
.formulario-dynamic .br-upload {
    max-width: 100%;
}

.formulario-dynamic .br-input input,
.formulario-dynamic .br-select select,
.formulario-dynamic .br-textarea textarea {
    width: 100%;
}

.formulario-dynamic .br-textarea textarea {
    min-height: 8rem;
    resize: vertical;
}

.formulario-dynamic__choice-group {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.formulario-dynamic__legend {
    color: var(--text-color, #333);
    font-size: var(--font-size-scale-up-01, 1.125rem);
    font-weight: var(--font-weight-semi-bold, 600);
    margin-bottom: var(--spacing-scale-2x, 0.75rem);
}

.formulario-dynamic__choices {
    display: grid;
    gap: var(--spacing-scale-2x, 0.75rem);
}

.formulario-dynamic .br-radio,
.formulario-dynamic .br-checkbox {
    margin: 0;
}

.formulario-dynamic__help {
    color: var(--color-secondary-07, #555);
    font-size: var(--font-size-scale-down-01, 0.875rem);
    line-height: 1.45;
    margin: var(--spacing-scale-half, 0.25rem) 0 0;
}

.formulario-dynamic__error {
    margin-top: var(--spacing-scale-base, 0.5rem);
}

.formulario-dynamic__error .message-title {
    font-weight: var(--font-weight-semi-bold, 600);
}

.formulario-preview {
    padding: var(--spacing-scale-4x, 1.5rem) var(--spacing-scale-5x, 2rem);
}

.formulario-preview__notice {
    margin-bottom: var(--spacing-scale-5x, 2rem);
}

.formulario-preview__header {
    margin-bottom: var(--spacing-scale-5x, 2rem);
    max-width: 50rem;
}

.formulario-preview__title {
    color: var(--text-color, #333);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.15;
    margin: 0 0 var(--spacing-scale-2x, 0.75rem);
}

.formulario-preview__description {
    color: var(--color-secondary-07, #555);
    font-size: var(--font-size-scale-up-01, 1.125rem);
    line-height: 1.55;
    margin: 0;
}

.formulario-preview__form {
    max-width: 46rem;
}

.formulario-preview__actions,
.formulario-preview__navigation {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-2x, 0.75rem);
}

.formulario-preview__actions {
    margin-top: var(--spacing-scale-5x, 2rem);
}

.formulario-preview__navigation {
    border-top: 1px solid var(--color-secondary-04, #ccc);
    margin-top: var(--spacing-scale-5x, 2rem);
    padding-top: var(--spacing-scale-4x, 1.5rem);
}

.formulario-publico {
    background: var(--background-alternative, #f5f5f5);
    color: var(--text-color, #333);
    margin: 0;
    min-height: 100vh;
}

.formulario-publico__main {
    margin: 0 auto;
    max-width: 72rem;
    padding: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 4vw, 3rem);
}

.formulario-publico__surface {
    position: relative;
    max-width: min(var(--fa-largura, 100%), 100%);
    background: var(--fa-fundo, var(--background, #fff));
    border: 1px solid var(--color-secondary-04, #ccc);
    border-radius: var(--fa-raio, var(--surface-rounder-md, 0.5rem));
    box-shadow: var(--fa-sombra, var(--surface-shadow-sm, 0 0.25rem 1rem rgba(0, 0, 0, 0.08)));
    padding: var(--fa-espaco, clamp(1.5rem, 4vw, 3rem));
}

.formulario-publico__header {
    margin-bottom: var(--spacing-scale-5x, 2rem);
    max-width: 52rem;
}

.formulario-publico__title {
    color: var(--text-color, #333);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.15;
    margin: 0 0 var(--spacing-scale-2x, 0.75rem);
}

.formulario-publico__description {
    color: var(--color-secondary-07, #555);
    font-size: var(--font-size-scale-up-01, 1.125rem);
    line-height: 1.55;
    margin: 0;
}

.formulario-publico__message,
.formulario-publico__errors,
.formulario-publico__privacy {
    margin-bottom: var(--spacing-scale-4x, 1.5rem);
}

.formulario-publico__errors ul {
    margin: 0;
    padding-left: var(--spacing-scale-3x, 1rem);
}

.formulario-publico__errors .message-body {
    margin-bottom: 0;
}

.formulario-publico__privacy {
    border-top: 1px solid var(--color-secondary-04, #ccc);
    margin-top: var(--spacing-scale-5x, 2rem);
    padding-top: var(--spacing-scale-4x, 1.5rem);
}

.formulario-publico__actions {
    margin-top: var(--spacing-scale-5x, 2rem);
}

/* Aparência da versão (builder > Aparência). Cores da paleta de Palmas
   (core/css/cores-palmas.css, classe cor-palmas--* no formulário). */
.formulario-publico__title-icone {
    margin-right: var(--spacing-scale-2x, 0.75rem);
    color: var(--bt-cor-forte, var(--interactive, #1351b4));
    font-size: 0.8em;
}

/* Botão na cor escolhida, texto na cor de contraste (mínimo 4,5:1), sem degradê. */
.br-button.primary.formulario-publico__botao--cor {
    color: var(--bt-cor-sobre);
    background-color: var(--bt-cor);
}

.br-button.primary.formulario-publico__botao--cor:not(:disabled):hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
}

.br-button.primary.formulario-publico__botao--cor:not(:disabled):active {
    background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));
}

/* Estilo "Cartão" no formulário dentro da página do Hotsite (a página própria
   do formulário já mostra o cartão). */
.formulario-embedded--slot.formulario-embedded--cartao {
    position: relative;
    max-width: min(var(--fa-largura, 100%), 100%);
    padding: var(--fa-espaco, clamp(1.25rem, 3vw, 2.5rem));
    background: var(--fa-fundo, #fff);
    border: 1px solid #ececec;
    border-radius: var(--fa-raio, 1rem);
    box-shadow: var(--fa-sombra, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1));
}

@media (max-width: 575px) {
    .formulario-preview,
    .formulario-publico__surface {
        padding: var(--spacing-scale-3x, 1rem);
    }

    .formulario-preview__actions,
    .formulario-preview__navigation,
    .formulario-publico__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .formulario-preview__actions .br-button,
    .formulario-preview__navigation .br-button,
    .formulario-publico__actions .br-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .formulario-publico *,
    .formulario-preview * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* A mesma superfície de campos pode ser renderizada dentro de uma coluna do
 * hotsite. As regras ficam no asset compartilhado para não duplicar widgets
 * nem impor largura mínima ao grid da página. */
.formulario-embedded {
    min-width: 0;
    max-width: 100%;
}

.formulario-embedded--slot {
    padding: var(--spacing-scale-3x, 1rem);
}

.formulario-embedded .formulario-publico__header,
.formulario-embedded .formulario-publico__privacy,
.formulario-embedded .formulario-publico__message,
.formulario-embedded .formulario-publico__errors {
    max-width: 100%;
}

.formulario-embedded .formulario-publico__title {
    overflow-wrap: anywhere;
}

.formulario-embedded .formulario-dynamic {
    min-width: 0;
}

.formulario-embedded .formulario-dynamic__field,
.formulario-embedded .br-input,
.formulario-embedded .br-select,
.formulario-embedded .br-textarea,
.formulario-embedded .br-upload {
    min-width: 0;
    max-width: 100%;
}

.formulario-embedded .formulario-publico__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-scale-2x, 0.75rem);
}

.formulario-embedded .formulario-publico__actions .br-button {
    max-width: 100%;
}

.formulario-embedded [disabled] {
    cursor: not-allowed;
}

/* Aparência detalhada (tela "Aparência de formulário"; catálogo em
   formularios/aparencia.py). Sem classe, vale o visual padrão acima.
   Opções do cartão: ficam no próprio cartão (superfície da página do formulário
   ou o formulário no Hotsite com estilo "Cartão") e só ajustam variáveis. */
.formulario-aparencia--cartao-cantos-retos { --fa-raio: 0; }
.formulario-aparencia--cartao-cantos-suaves { --fa-raio: 0.375rem; }

.formulario-aparencia--cartao-sombra-nenhuma { --fa-sombra: none; }
.formulario-aparencia--cartao-sombra-suave { --fa-sombra: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); }
.formulario-aparencia--cartao-sombra-forte { --fa-sombra: 0 0.75rem 2rem rgba(0, 0, 0, 0.16); }

.formulario-aparencia--cartao-largura-estreita { --fa-largura: 36rem; margin-inline: auto; }
.formulario-aparencia--cartao-largura-media { --fa-largura: 48rem; margin-inline: auto; }
.formulario-aparencia--cartao-largura-larga { --fa-largura: 64rem; margin-inline: auto; }

.formulario-aparencia--cartao-espacamento-compacto { --fa-espaco: 1rem; }
.formulario-aparencia--cartao-espacamento-amplo { --fa-espaco: clamp(2rem, 5vw, 3.5rem); }

/* Fundo no tom escolhido (claro, médio ou escuro; cor-palmas--* no próprio cartão).
   O texto do cartão vai para a cor de contraste do tom (--bt-cor-sobre, mínimo 4,5:1);
   os campos continuam brancos. Título com cor própria (__titulo--cor, abaixo) vence. */
.formulario-aparencia__fundo--cor {
    --fa-fundo: var(--bt-cor);
    color: var(--bt-cor-sobre);
}

.formulario-aparencia__fundo--cor .formulario-publico__title,
.formulario-aparencia__fundo--cor .formulario-publico__description,
.formulario-aparencia__fundo--cor .formulario-dynamic label,
.formulario-aparencia__fundo--cor .formulario-dynamic legend,
.formulario-aparencia__fundo--cor .formulario-dynamic__legend,
.formulario-aparencia__fundo--cor .formulario-dynamic__help,
.formulario-aparencia__fundo--cor .br-upload .text {
    color: var(--bt-cor-sobre);
}

/* Botão "Selecione o arquivo" do gov.br é transparente: fundo branco para ler em
   qualquer tom. */
.formulario-aparencia__fundo--cor .br-upload .upload-button {
    background: #fff;
}

/* Faixa de destaque: camada sobre a borda do cartão, com os mesmos cantos. */
.formulario-aparencia__destaque {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    /* Sem cor escolhida: azul gov.br (não herda a cor do cartão). */
    --fa-faixa: var(--interactive, #1351b4);
}

/* Com cor escolhida: o tom escolhido (claro, médio ou escuro). */
.formulario-aparencia__destaque[class*="cor-palmas--"] {
    --fa-faixa: var(--bt-cor);
}

.formulario-aparencia--cartao-destaque-topo > .formulario-aparencia__destaque {
    border-top: 4px solid var(--fa-faixa);
}

.formulario-aparencia--cartao-destaque-esquerda > .formulario-aparencia__destaque {
    border-left: 4px solid var(--fa-faixa);
}

/* Título. */
.formulario-aparencia--titulo-tamanho-p .formulario-publico__title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semi-bold, 600);
}

.formulario-aparencia--titulo-tamanho-m .formulario-publico__title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semi-bold, 600);
}

.formulario-aparencia--titulo-tamanho-g .formulario-publico__title {
    font-size: 2rem;
}

.formulario-aparencia--titulo-alinhamento-centro .formulario-publico__header {
    margin-inline: auto;
    text-align: center;
}

.formulario-publico__title.formulario-aparencia__titulo--cor {
    color: var(--bt-cor-forte);
}

/* Texto dos campos: a escala de fonte do gov.br, só dentro do formulário. */
.formulario-aparencia--texto-tamanho-pequeno .formulario-dynamic,
.formulario-aparencia--texto-tamanho-pequeno .formulario-publico__description {
    --font-size-scale-base: 12.6px;
    --font-size-scale-down-01: 10.5px;
    --font-size-scale-up-01: 14px;
    --font-size-scale-up-02: 16.8px;
}

.formulario-aparencia--texto-tamanho-grande .formulario-dynamic,
.formulario-aparencia--texto-tamanho-grande .formulario-publico__description {
    --font-size-scale-base: 16px;
    --font-size-scale-down-01: 13.33px;
    --font-size-scale-up-01: 19.2px;
    --font-size-scale-up-02: 23px;
}

/* Botão. */
.formulario-aparencia--botao-alinhamento-centro .formulario-publico__actions {
    justify-content: center;
}

.formulario-aparencia--botao-alinhamento-direita .formulario-publico__actions {
    justify-content: flex-end;
}

.formulario-aparencia--botao-largura-total .formulario-publico__actions .br-button {
    justify-content: center;
    width: 100%;
}

/* Campo armadilha (honeypot): fora da tela, mas presente no HTML.
   Não usar display:none, que alguns robôs reconhecem e ignoram. */
.formulario-dynamic__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}