/*
 * Folha de estilo do layout visual do BNDES Garagem, proposto pela Quintessa.
 * Escrita a mao, sem passo de build, sem fonte externa (pilha de sistema).
 * Fonte de referencia: docs/context-base/pagina de inscricoes.pdf
 *
 * Card F2.10 (docs/integracao.md, secao "Tokens de design"): o layout
 * (resources/views/layouts/garagem.blade.php) carrega
 * /wp-content/themes/garagem/assets/css/tokens.css ANTES desta folha, mesma
 * origem do site, gerado a partir de theme.json (repositorio `site`). Todo
 * valor abaixo que hoje coincide com um token vira `var(--wp--..., <valor
 * atual>)`: se o link nao carregar (ambiente sem o tema WordPress, falha de
 * rede), o fallback preserva o MESMO valor que ja estava aqui, contraste do
 * F2.9 incluido (docs/acessibilidade.md). Nenhum valor sem token
 * correspondente foi tocado.
 */

:root {
    --azul-profundo: #0a2d5e;
    --azul-forte: #164a8c;
    --azul-medio: #1f5aa8;
    --azul-claro: #2f6fc4;
    --verde-agua: #57beac;
    --verde-agua-forte: #3f9f8f;
    /* Card F2.9 (achado do axe-core desligado neste ambiente, medido a
       mao: ver docs/acessibilidade.md): --verde-agua-forte da 3.20:1
       contra branco, abaixo dos 4.5:1 exigidos por WCAG 1.4.3 para texto
       pequeno. Serve bem como BORDA (limiar de 3:1, .campo-input etc.),
       mas nao como cor de TEXTO; --verde-agua-texto e so pra isso.
       Escurecido o suficiente pra passar tambem contra o hover
       (#f2fbfa, .botao-solido-claro:hover), nao so contra o branco. */
    --verde-agua-texto: #327e71;
    --passo-concluido: #12213f;
    --tinta: #24272b;
    --tinta-fraca: #63666d;
    /* Idem: #8a8d94 original dava 3.32:1 contra branco, usado so no
       contador de caracteres (.campo-contador). */
    --tinta-suave: #73767d;
    --papel: var(--wp--preset--color--branco, #ffffff);
    --linha: #e2e6ee;
    --linha-forte: #cfd6e3;
    --fundo-campo: #f6faf9;
    --obrigatorio: #c21e3a;
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--fonte);
    line-height: 1.6;
}

a { color: var(--azul-medio); }

/* Cabecalho azul institucional */

.cabecalho {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--azul-claro) 0%, var(--azul-forte) 45%, var(--azul-profundo) 100%);
    padding: 3rem 3rem 5.5rem;
}

.cabecalho-fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}

.cabecalho-fundo svg { width: 100%; height: 100%; display: block; }

.cabecalho-conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 76rem;
    margin: 0 auto;
}

.cabecalho-titulo {
    margin: 0;
    max-width: 34rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--wp--preset--color--branco, #ffffff);
}

/* Botao pilula, usado no logout e na barra de acao */

.botao-pilula {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    border-radius: var(--wp--custom--raio--botao, 999px);
    font-family: var(--fonte);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.botao-contorno-claro {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--wp--preset--color--branco, #ffffff);
}

/* Card F2.9 (medido a mao, ver docs/acessibilidade.md): 0.12 clareava
   demais o azul-claro do cabecalho no hover, texto branco caia pra
   4.01:1 (abaixo dos 4.5:1 exigidos). 0.05 mede 4.56:1. */
.botao-contorno-claro:hover { background: rgba(255, 255, 255, 0.05); }

/*
 * Card F2.9 (achado serio, medido a mao: color-contrast fica desligado
 * no axe-core/jsdom, ver docs/acessibilidade.md): esta classe tinha
 * texto e borda BRANCOS pensados so pra `.barra-acao` (fundo
 * --verde-agua), mas tambem e usada em 3 lugares com fundo BRANCO
 * (resources/views/candidato/auth/verificar-email.blade.php "Sair",
 * resources/views/formulario/parciais/resumo-revisao.blade.php "Editar",
 * resources/views/formulario/componentes/campo-grupo-repetivel.blade.php
 * "Adicionar/Remover item"), onde o botao ficava efetivamente INVISIVEL
 * (texto branco sobre fundo branco, ~1:1). --tinta passa em qualquer um
 * dos dois fundos (6.69:1 sobre --verde-agua, 15:1 sobre branco), tanto
 * pra texto quanto pra borda (minimo de 3:1 para elemento de UI).
 */
.botao-contorno-escuro {
    background: transparent;
    border-color: var(--tinta);
    color: var(--tinta);
}

.botao-contorno-escuro:hover { background: rgba(36, 39, 43, 0.08); }

.botao-solido-claro {
    background: var(--wp--preset--color--branco, #ffffff);
    color: var(--verde-agua-texto);
}

.botao-solido-claro:hover { background: #f2fbfa; }

.botao-desabilitado {
    opacity: 0.45;
    pointer-events: none;
}

/* Cartao branco avancando sobre o azul */

.cartao-wrap {
    max-width: 76rem;
    margin: -3.5rem auto 0;
    padding: 0 3rem 3rem;
}

.cartao {
    /* Achado real (diagnostico da barra de progresso, 16/09/2026):
       `.cabecalho` usa `position: relative` (pra ancorar o padrao SVG
       decorativo, `.cabecalho-fundo`). Por regra de empilhamento do CSS,
       um elemento posicionado (mesmo com z-index:auto) sempre pinta ACIMA
       de um elemento nao-posicionado, INDEPENDENTE da ordem no DOM. Como
       `.cartao-wrap` sobe `-3.5rem` (margin negativo) por cima do rodape
       do cabecalho mas continua `position: static`, os primeiros ~56px
       deste cartao ficavam pintados POR BAIXO do fundo azul do cabecalho,
       nao por cima dele. Era exatamente a faixa onde
       `.progresso-formulario` renderiza (primeiro conteudo do card, sem
       padding-top proprio antes desta correcao): o `<progress>` nativo
       ficava com pixels 100% cobertos pelo cabecalho, INVISIVEL em
       qualquer largura, mesmo com value/max corretos no DOM (confirmado
       via `elementsFromPoint`, que devolvia `.cabecalho` antes do
       `.progresso-barra` naquele ponto). `position: relative` aqui poe
       `.cartao` na MESMA camada de empilhamento "posicionado" do
       cabecalho; como `.cartao` vem depois no DOM, volta a pintar por
       cima, restaurando a regra normal de sobreposicao do cartao sobre o
       degrade azul. */
    position: relative;
    background: var(--papel);
    border-radius: 1.75rem 1.75rem 0.5rem 0.5rem;
    box-shadow: 0 20px 45px rgba(10, 45, 94, 0.16);
    overflow: hidden;
}

/* Card F3.2: a tarja de erro geral (`.aviso-erro-geral`, tanto a do
   servidor quanto o resumo que resources/js/formulario/validacao.js
   insere) e o primeiro filho direto de `.cartao` quando existe erro,
   flush com o raio de 1.75rem do topo do cartao (sem padding proprio
   neste nivel). Sem margem, o retangulo praticamente reto da tarja
   cortava visualmente a curva. Um respiro do mesmo tamanho do padding
   horizontal do resto do cartao resolve sem alterar o componente. */
.cartao > .aviso-erro-geral:first-child {
    margin: 1.5rem 3rem 0;
}

@media (max-width: 860px) {
    .cartao > .aviso-erro-geral:first-child {
        margin: 1.25rem 1.25rem 0;
    }
}

.cartao-painel { display: none; }
.cartao-painel.esta-visivel { display: block; }

.cartao-trilha {
    padding: 2.5rem 3rem 1.5rem;
}

.cartao-conteudo {
    padding: 0.5rem 3rem 2rem;
}

.cartao-acoes { padding: 0 3rem 3rem; }

/* Trilha de etapas */

.trilha {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.trilha-linha {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: var(--linha-forte);
    z-index: 0;
}

.trilha-passo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.trilha-circulo {
    width: 2rem;
    height: 2rem;
    border-radius: var(--wp--custom--raio--botao, 999px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wp--preset--color--branco, #ffffff);
    background: var(--verde-agua);
}

.trilha-passo.esta-concluido .trilha-circulo { background: var(--passo-concluido); }
.trilha-passo.esta-atual .trilha-circulo { background: var(--azul-medio); }

.trilha-rotulo {
    font-size: 0.78rem;
    text-align: center;
    color: var(--tinta-fraca);
    max-width: 9rem;
    line-height: 1.35;
}

.trilha-passo.esta-atual .trilha-rotulo { color: var(--tinta); font-weight: 600; }

.trilha-dica {
    position: absolute;
    bottom: calc(100% + 0.6rem);
    right: 0;
    width: max-content;
    max-width: min(9rem, 40vw);
    background: var(--fundo-campo);
    border: 1px solid var(--linha);
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.7rem;
    color: var(--tinta-fraca);
    line-height: 1.3;
    z-index: 2;
}

/* Card F3.2: a dica aparecia cortada (viewport 1440 e 390) porque
   `right: -0.5rem` a empurrava pra fora da area visivel de `.trilha` e
   `.cartao` corta overflow (raio arredondado do topo do cartao, F2.9).
   Em telas estreitas o passo fica curto demais pra ancorar a largura
   maxima da dica pela direita; centralizar sobre o passo, com largura
   limitada pelo proprio viewport, mantem a dica inteira visivel em vez
   de so escondida (como era antes). */
@media (max-width: 860px) {
    .trilha-dica {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        max-width: min(9rem, calc(100vw - 2.5rem));
    }
}

/* Barra de progresso do preenchimento (F2.3, formulario.parciais.progresso).
   Ate esta correcao o `<progress>` nao tinha NENHUMA regra propria: virava
   o controle nativo do navegador (~160x16px fixo), sem relacao com a
   largura do card nem com os tokens de cor do tema. `appearance: none` +
   as pseudo-classes de trilha/preenchimento abaixo cobrem Chrome/Edge/
   Safari (`::-webkit-progress-*`) e Firefox (`::-moz-progress-bar`);
   `accent-color` fica de fallback pra qualquer motor que ignore as duas
   pseudo-classes. Mesmo padding horizontal de `.cartao-conteudo`, pra
   alinhar com o titulo/campos da secao logo abaixo. */
.progresso-formulario {
    padding: 1.75rem 3rem 0;
}

.progresso-barra {
    display: block;
    width: 100%;
    height: 0.6rem;
    appearance: none;
    border: none;
    border-radius: 999px;
    accent-color: var(--verde-agua-forte);
}

.progresso-barra::-webkit-progress-bar {
    background: var(--linha);
    border-radius: 999px;
}

.progresso-barra::-webkit-progress-value {
    background: var(--verde-agua-forte);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.progresso-barra::-moz-progress-bar {
    background: var(--verde-agua-forte);
    border-radius: 999px;
}

.progresso-texto {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--tinta-fraca);
}

/* Conteudo da etapa */

.etapa-titulo {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0.5rem 0 1rem;
    color: var(--tinta);
}

.etapa-texto {
    margin: 0 0 1.1rem;
    color: var(--tinta);
    max-width: 52rem;
}

.etapa-texto:last-of-type { margin-bottom: 1.75rem; }

.etapa-lista {
    margin: 0 0 1.1rem;
    padding-left: 1.3rem;
    max-width: 52rem;
}

.etapa-lista li { margin-bottom: 0.35rem; }
.etapa-lista ul { margin-top: 0.35rem; }

/* Campos de formulario */

.campo {
    margin-bottom: 1.75rem;
    max-width: 52rem;
}

.campo-rotulo {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 0.3rem;
}

.campo-obrigatorio { color: var(--obrigatorio); margin-left: 0.15rem; }

.campo-ajuda {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: var(--tinta-fraca);
    line-height: 1.45;
}

.campo-input,
.campo-textarea,
.campo-select {
    width: 100%;
    font-family: var(--fonte);
    font-size: 0.95rem;
    color: var(--tinta);
    background: var(--fundo-campo);
    border: 1px solid var(--verde-agua-forte);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.campo-input:focus,
.campo-textarea:focus,
.campo-select:focus {
    outline: 2px solid var(--azul-claro);
    outline-offset: 1px;
}

.campo-textarea { resize: vertical; min-height: 6.5rem; }

/* Card F3.2: `.campo-invalido` ja existia na marcacao (servidor e agora
   tambem resources/js/formulario/validacao.js), mas sem nenhuma regra
   visual: o erro so aparecia como texto, sem destaque no campo. */
.campo-invalido .campo-input,
.campo-invalido .campo-textarea,
.campo-invalido .campo-select {
    border-color: var(--obrigatorio);
}

/* QA F3 r2, achado (h): "Nao Temos Site" dispensava o campo Website sem
   nenhuma pista visual (mesma aparencia antes/depois de marcar). O JS
   (resources/js/formulario/condicionais.js) ja desabilita o input; esta
   classe so torna esse estado visivel. */
.campo-dispensado {
    opacity: 0.5;
}

.campo-dispensado .campo-input,
.campo-dispensado .campo-textarea,
.campo-dispensado .campo-select {
    cursor: not-allowed;
}

.campo-contador {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--tinta-suave);
}

.campo-contador-aviso { color: var(--verde-agua-texto); font-weight: 600; }

/* Card F3.2: `input[type="date"]` nao herdava nenhum ajuste alem das
   regras genericas de `.campo-input` (compartilhadas com texto/select);
   o combo nativo do Chrome ainda ficava com o icone de calendario cru,
   sem cursor de ponteiro nem estado de hover, deslocado dos demais
   campos. */
input[type="date"].campo-input {
    line-height: 1.3;
    color-scheme: light;
}

input[type="date"].campo-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    padding: 0.2rem;
    border-radius: 0.35rem;
}

input[type="date"].campo-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--linha);
}

.campo-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--tinta-fraca) 50%),
        linear-gradient(135deg, var(--tinta-fraca) 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) center, calc(100% - 1rem) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

.opcoes-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.opcoes-grupo.opcoes-linha {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.opcao-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: var(--tinta);
}

.opcao-item input[type="radio"],
.opcao-item input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--azul-medio);
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.opcao-titulo { font-weight: 600; }
.opcao-descricao { color: var(--tinta-fraca); font-weight: 400; }

/* Barra de acao do rodape do cartao */

.barra-acao {
    background: var(--verde-agua);
    border-radius: 1rem;
    padding: 1.1rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.barra-acao-centro { flex: 1; display: flex; justify-content: center; }

/* Rodape institucional */

.rodape {
    background: linear-gradient(160deg, var(--azul-forte) 0%, var(--azul-profundo) 100%);
    color: #dce6f5;
    padding: 3.5rem 3rem 0;
}

.rodape-conteudo {
    max-width: 76rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.rodape-marca {
    /* Logotipo do BNDES Garagem aplicado (public/images/marca). Logotipo da
       Quintessa segue reservado: nenhum arquivo de marca foi fornecido ate o
       momento desta entrega; substituir o bloco .marca-espaco abaixo pelo
       arquivo de imagem oficial assim que estiver disponivel. */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.marca-logo {
    display: block;
    align-self: flex-start;
    flex: none;
    height: 48px;
    width: auto;
    max-width: none;
    object-fit: contain;
}

.marca-espaco {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--wp--preset--color--branco, #ffffff);
    font-weight: 700;
    font-size: 1.05rem;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    width: fit-content;
}

.marca-espaco small {
    font-weight: 400;
    font-size: 0.68rem;
    color: #b9cbe8;
    letter-spacing: 0.03em;
}

.rodape-titulo-coluna {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wp--preset--color--branco, #ffffff);
}

.rodape-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.9rem;
}

.rodape-lista a { color: #dce6f5; text-decoration: none; }
.rodape-lista a:hover { text-decoration: underline; }

.rodape-contato-nome { color: var(--wp--preset--color--branco, #ffffff); font-weight: 600; margin: 0 0 0.15rem; }
.rodape-contato-bloco { margin: 0 0 1.1rem; font-size: 0.9rem; }

.rodape-compartilhe {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: #b9cbe8;
    margin: 0 0 0.75rem;
}

.rodape-redes {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.rodape-redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--wp--custom--raio--botao, 999px);
    background: rgba(255, 255, 255, 0.14);
    color: var(--wp--preset--color--branco, #ffffff);
    text-decoration: none;
    font-size: 0.85rem;
}

.rodape-direitos {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: #b9cbe8;
    padding: 1.1rem 0;
}

@media (max-width: 860px) {
    .cabecalho, .cartao-wrap, .rodape { padding-left: 1.25rem; padding-right: 1.25rem; }
    .cartao-trilha, .cartao-conteudo, .cartao-acoes, .progresso-formulario { padding-left: 1.25rem; padding-right: 1.25rem; }
    .cabecalho-conteudo { flex-direction: column; }
    .trilha-rotulo { display: none; }
    .rodape-conteudo { grid-template-columns: 1fr; }
    .barra-acao { flex-wrap: wrap; }
    .autosave-status { padding-left: 1.25rem; padding-right: 1.25rem; }
    .marca-logo { height: 40px; }
}

/* Indicador de auto-save (card F2.4, sem estilo proprio ate o F3.2:
   "Salvo as 22:55" aparecia cru, sem alinhamento com o resto do cartao).
   Icone de check desenhado so em CSS (duas bordas rotacionadas), sem
   imagem nem fonte de icone; so aparece quando ha texto (`:not(:empty)`),
   pra nao ocupar espaco vazio antes do primeiro auto-save. */
.autosave-status {
    min-height: 1.1rem;
    margin: 0;
    padding: 0.6rem 3rem 0;
    font-size: 0.78rem;
    color: var(--tinta-suave);
    text-align: right;
}

.autosave-status:not(:empty) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
}

.autosave-status:not(:empty):not(.autosave-erro)::before {
    content: '';
    width: 0.5rem;
    height: 0.85rem;
    border-right: 2px solid var(--verde-agua-texto);
    border-bottom: 2px solid var(--verde-agua-texto);
    transform: rotate(45deg) translateY(-0.1rem);
    flex-shrink: 0;
}

.autosave-status.autosave-erro {
    color: var(--obrigatorio);
    font-weight: 600;
}

/* Grupo repetivel (card F3.2): o fieldset de cada item nao tinha
   nenhuma borda/espacamento proprio (so o UA style cru do navegador), e
   "Remover item" ficava empilhado ABAIXO dos campos, longe do titulo. O
   botao volta pro cabecalho do item (`position: absolute`, o `<legend>`
   continua sendo o PRIMEIRO filho de verdade do fieldset, exigencia do
   HTML pra manter o nome acessivel do grupo). */
.campo-grupo-repetivel-item {
    position: relative;
    border: 1px solid var(--linha);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.campo-grupo-repetivel-item > legend {
    max-width: calc(100% - 8rem);
}

.campo-grupo-repetivel-item .botao-remover-item {
    position: absolute;
    top: 1.1rem;
    right: 1.25rem;
}

.botao-pequeno {
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
}

.campo-grupo-repetivel > [data-acao="adicionar-item-grupo"] {
    margin-top: 0.5rem;
}

/* Card ST3/F2b: acima de 860px o grupo repetivel se le como tabela de
   produtos (coluna = subcampo, linha = item), via CSS grid no proprio
   `.campo-grupo-repetivel-item`. Nao muda nenhuma classe ou hierarquia
   de contrato (e2e/support/preencherSecao.ts e
   resources/js/formulario/grupo-repetivel.js continuam encontrando
   `.campo-grupo-repetivel-item` e `> .campo` do mesmo jeito); so a
   apresentacao visual muda por breakpoint, o mesmo usado no resto do
   arquivo. Abaixo de 860px o grupo continua empilhado, como sempre foi. */
.campo-grupo-repetivel--tabela .tabela-produtos-cabecalho {
    display: none;
}

@media (min-width: 861px) {
    .campo-grupo-repetivel--tabela .tabela-produtos-cabecalho {
        display: grid;
        grid-template-columns: repeat(var(--colunas-produtos), minmax(9rem, 1fr));
        gap: 0 1rem;
        padding: 0 1.25rem;
        margin-bottom: 0.5rem;
    }

    .campo-grupo-repetivel--tabela .tabela-produtos-coluna {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--tinta-fraca);
    }

    /* O <legend> do fieldset de item nao e um item de grid comum (regra
       de renderizacao propria de fieldset), entao ele nao participa das
       colunas: a antiga faixa `minmax(6rem, auto)` reservada pra ele
       sobrava pro primeiro campo e empurrava os demais uma coluna.
       Solucao: grid so com as colunas de subcampo, e o titulo "Item N"
       escondido visualmente (leitor de tela continua lendo, mesma
       tecnica de clip do `.campo-rotulo` abaixo). */
    .campo-grupo-repetivel--tabela .campo-grupo-repetivel-item {
        display: grid;
        grid-template-columns: repeat(var(--colunas-produtos), minmax(9rem, 1fr));
        align-items: start;
        gap: 0 1rem;
    }

    .campo-grupo-repetivel--tabela .campo-grupo-repetivel-item > .opcao-titulo,
    .campo-grupo-repetivel--tabela .campo-grupo-repetivel-item .campo-rotulo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .campo-grupo-repetivel--tabela .campo-grupo-repetivel-item > .campo {
        min-width: 0;
    }

    .campo-grupo-repetivel--tabela .campo-grupo-repetivel-item textarea {
        box-sizing: border-box;
        width: 100%;
    }

    /* Card ST3 (fix pos-QA): a regra global `.botao-remover-item`
       (position: absolute, linha 721) cobria o input da ultima coluna
       no modo tabela, porque o botao ficava fixado no canto do
       fieldset em vez de seguir o fluxo de grid. No ramo tabela o
       botao ja e o ultimo filho do fieldset, entao ele vira uma linha
       propria ocupando todas as colunas. */
    .campo-grupo-repetivel--tabela .campo-grupo-repetivel-item .botao-remover-item {
        position: static;
        grid-column: 1 / -1;
        justify-self: end;
        margin-top: 0.5rem;
    }
}

/* Entrega 5: situacao da leitura de anexo (candidato e analista). Mesmo
   desenho do selo de status do admin (pilula de contorno, cor via
   currentColor), com as cores ja existentes: neutro, informativo,
   sucesso e atencao (vermelho de obrigatorio). */
.situacao-leitura {
    margin-top: 0.35rem;
}

.selo-leitura {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tinta-fraca, #63666d);
}

.selo-leitura--em_analise { color: var(--azul-medio, #1f5aa8); border-style: dashed; }
.selo-leitura--lido { color: var(--verde-agua-texto, #327e71); }
.selo-leitura--revisao_humana { color: var(--azul-medio, #1f5aa8); }
.selo-leitura--falha_permanente { color: var(--obrigatorio, #c21e3a); }

.situacao-leitura-detalhe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.4rem 1.25rem;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

.situacao-leitura-detalhe dt {
    color: var(--tinta-fraca, #63666d);
    font-weight: 600;
}

.situacao-leitura-detalhe dd {
    margin: 0;
    color: var(--tinta, #24272b);
    overflow-wrap: anywhere;
}