/* Barsan: formulários, do contato e do painel. Carregado depois do site.css,
 * que tem os tokens. */

.formulario {
    display: grid;
    gap: 1.25rem;
    max-width: 40rem;
    margin-top: 1.5rem;
}

.campo {
    display: grid;
    gap: 0.375rem;
}

/* Dois campos lado a lado a partir do tablet (no painel: categoria e local,
 * situação e ano). */
.formulario__par {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 40em) {
    .formulario__par {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.campo__rotulo {
    font-weight: 600;
}

.campo__opcional {
    color: var(--cinza);
    font-weight: 400;
}

/* Explicação curta embaixo do rótulo, ligada ao campo por aria-describedby. */
.campo__dica {
    color: var(--cinza);
    font-size: var(--texto-p);
}

/* Campo de número curto (ano), que não precisa da largura toda. */
.campo--curto .campo__entrada {
    max-width: 8rem;
}

/* Borda em cinza escuro: o contorno do campo precisa de 3:1 contra o fundo
 * para quem enxerga pouco achar onde escrever. */
.campo__entrada {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cinza);
    border-radius: 0;
    background: var(--branco);
    color: var(--grafite);
    font: inherit;
}

.campo__entrada:hover {
    border-color: var(--grafite);
}

.campo__entrada--texto {
    min-height: 10rem;
    resize: vertical;
}

/* Lista de escolha: sem o desenho do sistema (que no Safari ignora a altura
 * e a borda), com a seta feita de dois triângulos na cor do texto. */
.campo__entrada--escolha {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--grafite) 50%),
        linear-gradient(135deg, var(--grafite) 50%, transparent 50%);
    background-position:
        right 1.25rem center,
        right 0.875rem center;
    background-size: 0.375rem 0.375rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

.campo__entrada[aria-invalid="true"] {
    border-color: var(--erro);
    box-shadow: inset 0 0 0 1px var(--erro);
}

/* Escolha de arquivo: o botão do navegador, no tamanho dos outros campos. */
.campo__arquivo {
    max-width: 100%;
    font: inherit;
}

.campo__arquivo::file-selector-button {
    min-height: 2.75rem;
    margin-right: 0.75rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--grafite);
    background: var(--branco);
    color: var(--grafite);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Grupo de opções (rádio): o fieldset sem a moldura do navegador. */
.grupo {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.grupo .campo__rotulo {
    margin-bottom: 0.25rem;
    padding: 0;
}

/* Opções do grupo uma ao lado da outra, quebrando linha se não couberem. */
.grupo__opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

/* Rádio ou caixa de marcar com o texto ao lado, todo clicável. */
.opcao {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    cursor: pointer;
}

/* Desenhada aqui, e não pelo sistema, para ter a mesma cara em todo
 * navegador: borda cinza (3:1 contra o branco), laranja do botão quando
 * marcada. O teclado e o foco continuam os do campo de verdade. */
.opcao__marca {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 2px solid var(--cinza);
    background: var(--branco);
    cursor: pointer;
}

.opcao__marca:hover {
    border-color: var(--grafite);
}

.opcao__marca:checked {
    border-color: var(--laranja-botao);
    background: var(--laranja-botao);
}

/* Caixa marcada: o visto branco, feito com duas bordas giradas. */
.opcao__marca::before {
    content: "";
    width: 0.375rem;
    height: 0.6875rem;
    margin-top: -0.1875rem;
    border: solid var(--branco);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    visibility: hidden;
}

.opcao__marca:checked::before {
    visibility: visible;
}

/* Rádio marcado: redondo, com um anel branco por dentro. */
.opcao__marca[type="radio"] {
    border-radius: 50%;
}

.opcao__marca[type="radio"]::before {
    content: none;
}

.opcao__marca[type="radio"]:checked {
    box-shadow: inset 0 0 0 0.1875rem var(--branco);
}

/* Com as cores forçadas do sistema (alto contraste), o desenho próprio
 * some: volta o controle do sistema. */
@media (forced-colors: active) {
    .opcao__marca {
        -webkit-appearance: auto;
        appearance: auto;
    }
}

/* Opção que decide algo grande (mostrar a obra no site): numa caixa branca,
 * com a explicação embaixo do nome. */
.opcao--destaque {
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border: 1px solid var(--linha);
    background: var(--branco);
}

.opcao--destaque .opcao__marca {
    margin-top: 0.1875rem;
}

.opcao__texto {
    display: grid;
    gap: 0.125rem;
}

.opcao__nome {
    font-weight: 600;
}

.campo__erro {
    color: var(--erro);
    font-size: var(--texto-p);
    font-weight: 600;
}

/* Campo-isca contra robô: some da tela e do leitor de tela, mas continua no
 * HTML para o robô preencher. */
.formulario__isca {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.formulario__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.5rem;
}

.formulario__nota {
    color: var(--cinza);
    font-size: var(--texto-p);
}

/* Aviso depois do envio: deu certo, faltou algo ou não foi possível enviar.
 * A cor do texto é dele, para o aviso servir também dentro da placa. */
.aviso {
    max-width: 40rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--grafite);
    background: var(--branco);
    color: var(--grafite);
}

.aviso--sucesso {
    border-left-color: var(--sucesso);
}

.aviso--erro {
    border-left-color: var(--erro);
}

.aviso__titulo {
    font-weight: 700;
}

.aviso__texto {
    margin-top: 0.25rem;
}

.aviso__lista {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    list-style: disc;
}