/* Telas em PHP do Canal de Pesquisas.
 *
 * Os valores NÃO são novos: são os mesmos de `frontend/src/styles/` traduzidos
 * de Tailwind para CSS puro — a paleta primária vem de theme.css, e card, btn,
 * tab e input dos arquivos de mesmo nome. Migração em que o usuário percebe uma
 * troca de design é migração que chama atenção para si mesma.
 *
 * Onde o valor veio de uma classe do Tailwind, o comentário diz qual. */

:root {
    /* theme.css — a escala primária inteira do projeto */
    --primaria-100: #99c8ed;
    --primaria-400: #0076d1;   /* hover dos botões */
    --primaria-500: #0063ae;   /* a cor da marca */
    --primaria-600: #005ea7;   /* início do gradiente do login */
    --primaria-700: #00477d;
    --primaria-800: #002f54;   /* fim do gradiente do login */

    /* Pedido do dono em 28/08/2026: o fundo cinza estava pesado. Subiu um
       degrau na MESMA escala do Tailwind — gray-200 -> gray-100. O gray-50 foi
       medido junto e recusado: com ele o cartao branco e a linha branca da
       tabela so se distinguem do fundo pela sombra, e a estrutura da tela
       inteira passa a depender dela. Registrado no 15-design.md. */
    --papel: #f3f4f6;          /* bg-gray-100 */
    --papel-alto: #ffffff;
    /* O degrau que o fundo deixou. Nao e decoracao: e a superficie REBAIXADA
       do sistema — selo, circulo da pergunta, hover sobre branco e o quadrado
       de nota. Todos precisam ficar um passo abaixo do cartao, e com o fundo
       em gray-100 eles sumiriam dentro dele. */
    --papel-baixo: #e5e7eb;    /* bg-gray-200, o fundo antigo */
    --tinta: #1f2937;          /* text-gray-800 */
    /* gray-600, não gray-500: sobre o fundo da página o 500 dava 3,90:1 e a
       WCAG AA pede 4,5:1 — e é justamente ali que este cinza mais aparece
       (`.dica`, `.nota`, `.vazio`). O 600 dava 6,10:1 no fundo antigo; com o
       gray-100 de 28/08/2026 dá **6,86:1**, 7,56:1 no branco e 6,10:1 no
       cabeçalho de tabela, que herdou o cinza que o fundo deixou. */
    --tinta-fraca: #4b5563;    /* text-gray-600 */
    --borda: #64748b;          /* border-slate-500, dos inputs */
    --borda-fraca: #d1d5db;    /* gray-300 */
    --azul-claro: #dbeafe;     /* blue-100, o selecionado do grades-input */
    /* O TEXTO de cima do `--azul-claro`. O `--primaria-400` dava 3,81:1 ali —
       e é o número que a pessoa acabou de escolher, o de menor contraste da
       tela. O 700 dá 7,79:1 no mesmo fundo, e já era o que o
       `.marca-situacao--aberta` usava. Fundo e borda não mudam. */
    --tinta-selecionada: #00477d;  /* primary-700 */
    /* red-700 pelo mesmo motivo: "Excluir" e "Bloquear" são texto sem fundo
       sobre `--papel`, e o red-600 dava os mesmos 3,90:1. O 700 dá 5,23:1. */
    --perigo: #b91c1c;         /* red-700 */
    --ok-fundo: #dcfce7;       /* green-100 */
    --ok-tinta: #166534;       /* green-800 */
    --erro-fundo: #fee2e2;     /* red-100 */
    --erro-tinta: #991b1b;     /* red-800 */

    --raio-card: 0.75rem;      /* rounded-xl */
    --raio-btn: 0.375rem;      /* rounded-md */
    --raio-input: 0.25rem;     /* rounded-sm */

    --sombra-card: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);   /* shadow-md */
    --sombra-alta: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%); /* shadow-lg */
}

* { box-sizing: border-box; }

/* `hidden` e atributo do HTML, e o navegador o aplica com `display: none` numa
   regra de especificidade ZERO — qualquer classe nossa ganha dela. O
   `[hidden]` de um `.btn` ficava visivel do mesmo jeito, e foi assim que o
   "Aplicar" do filtro de celular continuou na tela depois de o `telas.js`
   escondê-lo. Isto vale para todo `hidden` do sistema, nao so para aquele. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--tinta);
    background: var(--papel);
    overflow-x: hidden;
}

main {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* O `tabindex="-1"` do <main> existe para o alvo do link abaixo receber foco de
   verdade; sem isto o navegador rola até lá e o foco continua no cabeçalho. */
main:focus { outline: 0; }

/* Fora da tela até receber foco — some para o mouse, existe para o teclado.
   `clip`/`width: 1px` esconderia do leitor de tela também; sair pela esquerda
   mantém o link anunciável. */
.pular {
    position: absolute;
    left: -100vw;
    z-index: 60;
    padding: 0.75rem 1.25rem;
    background: var(--papel-alto);
    color: var(--primaria-500);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--sombra-alta);
}

.pular:focus { left: 0.5rem; top: 0.5rem; }

:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- topo: o Navbar.tsx, sticky e com sombra ---------- */

.topo {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    /* Quebra em qualquer largura, não só no `@media` de 40rem. Marca + cinco
       abas + nome medem ~830px: em 375px o `nav` saía 225px para fora e o
       `overflow-x: hidden` do body tirava a rolagem junto — "Relatórios" e
       "Usuários" ficavam desenhadas fora da barra e inalcançáveis. Em 768px
       era o nome de quem está logado que saía. Um breakpoint a mais resolveria
       cada faixa; deixar a régua quebrar resolve todas. */
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--papel-alto);
    box-shadow: var(--sombra-alta);
}

.marca {
    font-size: 1.5rem;      /* text-2xl */
    font-weight: 600;
    color: var(--tinta);
    text-decoration: none;
}

.topo nav { display: flex; flex-wrap: wrap; gap: 1rem; }

/* home.css: a aba ativa ganha um traço embaixo, não um fundo */
.topo nav a, .filtros a {
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: var(--raio-btn);
    font-weight: 600;
    color: var(--tinta);
    text-decoration: none;
}

.topo nav a::after, .filtros a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--primaria-500);
    transition: height 100ms;
}

.topo nav a:hover, .filtros a:hover { color: var(--primaria-500); }

.topo nav a.atual, .filtros a.atual { color: var(--primaria-500); }
.topo nav a.atual::after, .filtros a.atual::after { height: 3px; }

/* ---------- menu de conta: o botao no canto e o que ele abre ----------
 *
 * Decisao do dono, 28/08/2026. Antes eram dois links soltos na barra —
 * "Trocar senha" e "Sair", cinza e sublinhados —, e eles destoavam: no resto
 * do sistema tudo e aba ou botao. Viraram um botao de perfil com menu.
 * Registrado no 15-design.md.
 *
 * O menu reusa o dropdown que o "Novo" do React ja tinha documentado la:
 * fundo branco, `shadow-md`, `rounded-md`, itens alinhados a esquerda e
 * separados por `1px solid` do cinza fraco, e 300ms ease-out para abrir.
 * Nenhum valor novo. */

.conta { position: relative; margin-left: auto; }

/* `list-item` e o padrao do `<summary>`, e com ele vem o triangulo. Aqui o
   triangulo e desenhado pelo `::after` do proprio botao, que aponta para
   baixo e vira ao abrir — por isso o marcador nativo sai. */
.conta > summary { list-style: none; }
.conta > summary::-webkit-details-marker { display: none; }

.conta__botao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border: 1px solid var(--borda-fraca);
    border-radius: 999px;
    color: var(--tinta);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 200ms linear;
}

.conta__botao:hover { background: var(--papel-baixo); }
.conta[open] > .conta__botao { background: var(--papel-baixo); border-color: var(--borda); }

/* As iniciais no lugar do icone: a regra 3 do 15-design proibe biblioteca de
   icone, e o par `--azul-claro` / `--tinta-selecionada` ja e o "selecionado"
   do sistema — 7,79:1, o mesmo que o selo "Aberta" usa. */
.conta__iniciais {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--azul-claro);
    color: var(--tinta-selecionada);
    font-size: 0.8rem;
    font-weight: 600;
}

.conta__nome { font-weight: 600; }

.conta__papel {
    background: var(--papel-baixo);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
    color: var(--tinta-fraca);
}

/* A seta e decorativa: quem anuncia "fechado/aberto" e o proprio `<summary>`,
   que o navegador expoe como botao com estado. */
.conta__botao::after {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.15rem;
    border-right: 2px solid var(--tinta-fraca);
    border-bottom: 2px solid var(--tinta-fraca);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 200ms linear;
}

.conta[open] .conta__botao::after { transform: rotate(-135deg) translate(-1px, -1px); }

.conta__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 60;
    min-width: 14rem;
    background: var(--papel-alto);
    border-radius: var(--raio-btn);      /* rounded-md, como o dropdown "Novo" */
    box-shadow: var(--sombra-card);      /* shadow-md, idem */
    overflow: hidden;
    animation: conta-abre 300ms ease-out;
}

@keyframes conta-abre {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to   { opacity: 1; transform: none; }
}

/* O nome completo mora aqui: no celular o botao mostra so as iniciais. */
.conta__quem {
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--borda-fraca);
    color: var(--tinta-fraca);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* 0.75rem e nao 0.7: 0.7rem da 11.2px, e a bateria da auditoria 21 recusa
   texto abaixo de 12px. E o mesmo tamanho do selo do botao. */
.conta__quem small {
    margin-left: 0.4rem;
    background: var(--papel-baixo);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
}

.conta__menu form { margin: 0; }

/* Um link e um botao de POST, e os dois tem de parecer a mesma coisa —
   alinhados a esquerda, largura inteira, separados por regua, como o
   dropdown do React. */
.conta__menu a, .conta__menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--borda-fraca);
    background: none;
    color: var(--tinta);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.conta__menu > :last-child a,
.conta__menu > :last-child button,
.conta__menu > a:last-child { border-bottom: 0; }

.conta__menu a:hover, .conta__menu button:hover { background: var(--papel-baixo); color: var(--primaria-500); }

/* ---------- estrutura ---------- */

.cabecalho { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.cabecalho h1 { font-size: 1.5rem; font-weight: 600; margin: 0; }
.cabecalho .btn { margin-left: auto; }

/* `align-items: center` estava só no `.filtros--secundario`, e por isso em
   Usuários o "Situação:" alinhava com as abas e o "Papel:" NÃO — o rótulo da
   fileira primária ficava 9,5px acima do texto das abas. Sem ele o `align-items`
   é `normal`, que estica o `<span>` na altura da linha e deixa o texto no topo;
   as abas têm `padding: 0.5rem 1rem` e o texto delas cai no meio. Sobe para cá,
   que é onde as duas fileiras passam. Apontado pelo dono em 31/08/2026. */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }

/* Os mesmos filtros em `<select>`, so no celular — o bloco de <= 40rem inverte
   as duas visibilidades. Acima disso quem vale e a fileira de abas. */
.filtros-celular { display: none; }

/* AD-07: em Usuarios o cartao "Novo usuario" encosta na primeira fileira de
   filtros — vao zero, onde o resto da tela respira 1.5rem. O cartao nao tem
   margem de baixo e a fileira nao tem de cima. */
.cartao + .filtros { margin-top: 1.5rem; }

.vazio, .nota { color: var(--tinta-fraca); }
.nota { margin-top: 2.5rem; font-size: 0.9rem; }
.nota a, .erros a { color: var(--primaria-500); }

/* ---------- cartões: o .card do cards.css ---------- */

.cartoes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.cartao {
    background: var(--papel-alto);
    border-radius: var(--raio-card);
    padding: 1.5rem;
    box-shadow: var(--sombra-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: box-shadow 200ms;
}

.cartao:hover { box-shadow: var(--sombra-alta); }
.cartao h2 { font-size: 1.125rem; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.cartao--excluido { opacity: 0.7; }

/* Cartao que dobra — hoje so o "Novo usuario". `<details>` nativo: o estado
   fica no navegador, sem JS e sem classe para sincronizar. O `<h2>` volta a
   inline porque bloco dentro do `<summary>` cai embaixo do triangulo. */
.cartao > details > summary { cursor: pointer; padding: 0.25rem 0; }
.cartao > details > summary h2 { display: inline; }
.cartao > details[open] > summary { margin-bottom: 0.5rem; }
.meta { margin: 0; color: var(--tinta-fraca); font-size: 0.875rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; padding-top: 1rem; }
.acoes form { margin: 0; }
.dica { color: var(--tinta-fraca); font-size: 0.875rem; }

/* Linha própria embaixo da marca, em vez de coladinha ao lado dela.
 *
 * O motivo da anulação vai até 255 caracteres, e sem os três limites abaixo ele
 * destrói a tabela: `max-width` impede que estique a coluna Situação a 1440px,
 * `min-width` impede o contrário no celular (coluna estreita quebrando o texto
 * em duas palavras por linha, 20 linhas de altura), e o clamp de 2 linhas é o
 * teto de altura da célula.
 *
 * ponytail: o que passar de 2 linhas fica no `title` (só aparece no hover, não
 * no toque) e na auditoria, que é onde o motivo tem valor legal. Se alguém
 * precisar do texto inteiro na tela, o lugar é a tela da pesquisa, não a lista.
 */
.dica--bloco {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 18rem;
    min-width: 10rem;
    margin-top: 0.25rem;
}

/* ---------- botões: o .btn do buttons.css ---------- */

.btn {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--raio-btn);
    background: var(--primaria-500);
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    transition: all 200ms linear;
}

.btn:hover { background: var(--primaria-400); }

/* Ações secundárias eram ícone sem fundo na tela antiga; aqui viram botão de
   contorno, porque texto sem fundo numa fileira de botões some. */
.btn--secundario {
    background: transparent;
    color: var(--tinta);
    border: 1px solid var(--borda-fraca);
}

.btn--secundario:hover { background: var(--papel-baixo); color: var(--primaria-500); }

.btn--perigo { background: transparent; color: var(--perigo); border: 1px solid var(--borda-fraca); }
.btn--perigo:hover { background: var(--erro-fundo); color: var(--perigo); }

.btn--primario { padding: 0.5rem 1.25rem; font-weight: 600; }

.btn:focus-visible, a:focus-visible, input:focus-visible,
button:focus-visible, select:focus-visible, textarea:focus-visible,
.tabela-rolavel:focus-visible {
    outline: 2px solid var(--primaria-400);
    outline-offset: 2px;
}

/* ---------- formulário: o inputs.css ---------- */

.campo { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1.5rem; }
.campo label { font-weight: 600; font-size: 0.9rem; }
.campo small { color: var(--tinta-fraca); font-size: 0.8rem; }

/* `min-height` igual no input e no select: sem ele, na mesma fileira, um
   `select` fecha em 41px, um `input[type=text]` em 42 e um `input[type=date]`
   em 44 — o ícone nativo do calendário estica o terceiro. Na tela de
   Relatórios, que põe os três lado a lado, o degrau de 3px aparecia no campo e
   no rótulo. 2.75rem é a mesma altura que o `pointer: coarse` já pedia. */
input:not([type="radio"]):not([type="checkbox"]) {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem;
    font: inherit;
    color: var(--tinta);
    background: var(--papel-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio-input);
    outline: 0;
}

.recado {
    max-width: 80rem;
    margin: 1.5rem auto 0;
    padding: 0.75rem 1.25rem;
    border-radius: var(--raio-card);
    background: var(--ok-fundo);
    color: var(--ok-tinta);
}

.recado--erro { background: var(--erro-fundo); color: var(--erro-tinta); }

/* A tarja da prévia do modelo (S4). Azul e não verde: verde é "deu certo", e
   aqui nada aconteceu — é um estado da tela, não o resultado de um ato. Os
   tokens são os do `--azul-claro`, que já carregam 7,79:1 de contraste. */
.recado--aviso { background: var(--azul-claro); color: var(--tinta-selecionada); }

/* O texto e o "Voltar" na mesma linha, e o botão à direita — a tarja é fina, e
   empilhá-los empurraria o formulário para baixo sem ganhar nada. */
.aviso-previa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.aviso-previa p { margin: 0; }

.erros {
    background: var(--erro-fundo);
    color: var(--erro-tinta);
    border-radius: var(--raio-card);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.erros p { margin: 0 0 0.35rem; }
.erros ul { margin: 0; padding-left: 1.25rem; }

/* ---------- entrada: o Login.tsx, gradiente na página inteira ---------- */

body.fundo-entrada {
    /* `dvh` com `vh` de reserva: no celular o `vh` conta a barra do navegador
       como se ela não existisse, e sobra uma faixa de rolagem sem conteúdo. */
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(to bottom right, var(--primaria-600), var(--primaria-800));
}

.fundo-entrada .topo { background: transparent; box-shadow: none; }
.fundo-entrada .marca { color: #fff; }

.entrada {
    max-width: 28rem;      /* max-w-md */
    margin: 2rem auto;
    background: var(--papel-alto);
    border-radius: var(--raio-card);
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);   /* shadow-2xl */
}

.entrada h1 { margin: 0 0 1.5rem; font-size: 1.5rem; font-weight: 600; }
.entrada .btn { width: 100%; padding: 0.6rem; font-weight: 600; }
.entrada .recado, .entrada .erros { margin: 0 0 1.25rem; }
.entrada .nota { margin-bottom: 0; }

/* ---------- construtor: o editor.css ---------- */

.campos { display: flex; flex-direction: column; gap: 1.25rem; }

.campo-editor {
    background: var(--papel-alto);
    border-radius: var(--raio-card);
    padding: 1.5rem;
    box-shadow: var(--sombra-card);
}

/* `wrap`: a linha tem número, pergunta, tipo, a caixa "obrigatória" e o
   Remover. Em 375px isso não cabe — a pergunta encolhe até o mínimo e o resto
   sai pela direita. O `min-width` no input impede que ele vire um risco de
   dois centímetros antes de a linha decidir quebrar. */
.campo-editor__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.campo-editor__topo > input[type="text"] { flex: 1 1 12rem; min-width: 0; }

.campo-editor__posicao {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--papel-baixo);
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    color: var(--tinta-fraca);
}

/* `min-width`: o rótulo do tipo fica ENTRE o enunciado e os controles, então a
   largura dele decide onde o `input` termina — "Nota" e "Múltiplas opções"
   davam 42px de degrau entre duas perguntas do mesmo modelo. 8.5rem é o maior
   dos quatro rótulos. */
.campo-editor__tipo {
    color: var(--tinta-fraca);
    font-size: 0.875rem;
    white-space: nowrap;
    min-width: 8.5rem;
}

.campo-editor__exigir {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--tinta-fraca);
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}

.campo-editor__exigir input { accent-color: var(--primaria-500); cursor: pointer; }

/* Subir, descer, duplicar e remover andam juntos, e encostados na direita.
   Soltos na linha, o "Remover" descia sozinho na quebra de 375px e ficava
   colado na pergunta de baixo — parecia botão da errada. */
.campo-editor__acoes { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

/* A seta é um caractere só: com o padding do `.btn` o botão sai com ~24px de
   largura, no limite de 24x24 da WCAG 2.2. O `ch` acompanha a fonte. */
.campo-editor__mover { min-width: 2.25ch; text-align: center; line-height: 1.4; }
.campo-editor__props { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.25rem; }
.campo-editor__props label { font-size: 0.875rem; color: var(--tinta-fraca); display: grid; gap: 0.25rem; }
.campo-editor__props input { width: 8rem; }

.opcoes { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.25rem; }
.opcao { display: flex; gap: 0.5rem; align-items: center; }
.opcoes > .btn { align-self: flex-start; }

/* inputs.css .grades-input, incluindo o estado selecionado */
.notas { display: flex; gap: 1.25rem; margin-top: 1.25rem; }

.notas .btn {
    padding: 1rem 2.5rem;
    background: var(--papel-alto);
    color: var(--tinta);
    border: 1px solid var(--tinta-fraca);
    transition: all 100ms linear;
}

.notas .btn:hover {
    background: var(--azul-claro);
    border-color: var(--primaria-400);
    color: var(--tinta-selecionada);
    transform: translateY(-2px);
}

.notas .selecionada {
    background: var(--azul-claro);
    border-color: var(--primaria-400);
    color: var(--tinta-selecionada);
}

.novo-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.5rem 0; }
.novo-campo span { color: var(--tinta-fraca); font-size: 0.9rem; }

.rodape-form {
    position: sticky;
    bottom: 0;
    /* 2.5rem em cima, não 1.5: o gradiente só fica opaco a 40% da altura, e
       com 1.5rem o botão caía dentro da parte translúcida — o cartão branco
       que passava por baixo aparecia através dele. Agora a faixa que desbota
       é espaço vazio, e o botão fica sempre sobre fundo cheio. */
    padding: 2.5rem 0 1.5rem;
    background: linear-gradient(transparent, var(--papel) 40%);
    /* A faixa que desbota é INVISÍVEL e capturava o toque: quem clicasse num
       campo debaixo dela acertava esta div, e nada acontecia. Foi medido na
       tela de responder — que hoje não usa mais esta classe (o rodapé de lá
       rola junto) —, mas vale igual no construtor, onde há campo sob a faixa.
       O ponteiro passa direto pelo vazio; o que é botão volta a recebê-lo. */
    pointer-events: none;
}

.rodape-form > * { pointer-events: auto; }

/* ---------- listagem de pesquisas: a tabela do SurveyList.tsx ---------- */

.filtros--secundario { margin-top: -0.75rem; }

/* `.filtros span`, não `.filtros--secundario span`: em Usuários o "Papel:" está
   na fileira PRIMÁRIA e o "Situação:" na secundária, e estilizar só uma das
   duas foi o que fez as abas começarem em x diferentes. `min-width` porque o
   rótulo empurra a primeira aba: sem ele, "Papel:" e "Situação:" (ou
   "Resposta:" e "Ordem:", em Pesquisas) desalinham a fileira inteira. 5rem cabe
   o maior dos quatro. */
.filtros span {
    color: var(--tinta-fraca);
    font-size: 0.9rem;
    min-width: 5rem;
}

/* A tabela rola sozinha em vez de esticar a página (overflow-x-auto) */
.tabela-rolavel { overflow-x: auto; }

.tabela { width: 100%; border-collapse: collapse; }

.tabela th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 700;
    /* Herdou o cinza que o fundo da pagina deixou em 28/08/2026: com os dois
       em gray-100 o cabecalho sumia dentro da pagina. */
    background: var(--papel-baixo);               /* bg-gray-200 */
    border-bottom: 2px solid var(--borda-fraca);
    white-space: nowrap;
}

/* M2: o cabeçalho que ordena. O link recebe o padding da célula, então o alvo é
   o cabeçalho inteiro e não só as letras. A seta é decorativa: quem anuncia o
   estado é o `aria-sort` do `<th>`, e repeti-lo em texto o faria dizer duas
   vezes. Em ≤ 40rem o `thead` some no cartão, e ali quem ordena é a fileira
   "Ordem:" — é por isso que ela continua existindo. */
.tabela th:has(.th-ordem) { padding: 0; }

.th-ordem {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
}

.th-ordem:hover { text-decoration: underline; }
.th-ordem__seta { color: var(--tinta-fraca); font-size: 0.8em; }

.tabela td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--borda-fraca); }

/* O `width: 100%` do input obedece à coluna, e a coluna se ajusta ao cabeçalho:
   "E-mail" é curto, então o campo saía com 168px e cortava o valor — 6 dos 104
   campos da tela não mostravam o que guardavam. O `min-width` empurra a coluna
   até caber um e-mail de verdade; em ≤ 40rem o cartão manda e isto não vale. */
.tabela input[type="email"] { min-width: 17rem; }
.tabela input[type="text"] { min-width: 9rem; }
.tabela tbody tr:hover { background: #f9fafb; }   /* hover:bg-gray-50 */
.tabela .acoes { padding: 0; margin: 0; flex-wrap: nowrap; }

/* Rótulo de botão não quebra linha: numa fileira de ações, "Copiar link" em
   duas linhas deforma a altura da linha inteira da tabela. */
.tabela .acoes .btn, .tabela .acoes button { white-space: nowrap; }

.linha--excluida { opacity: 0.7; }

/* A linha de Usuários com alteração por salvar — o mesmo destaque da linha
   recém-criada. Quem acende o botão é o `telas.js`, tirando dele a classe
   `.btn--secundario`: uma regra de CSS mais específica também derrubaria o
   `:hover` do próprio botão que a pessoa precisa clicar. */
.linha--suja td { background: var(--azul-claro); }

/* A pesquisa recém-criada. É o passo 4 do modal antigo — "aqui está o link" —
   resolvido na tela que já sabe copiar link. */
.linha--nova td { background: var(--azul-claro); }
.linha--nova td:first-child { box-shadow: inset 3px 0 0 var(--primaria-500); }

/* ---------- relatórios: o CreateReportModal, mostrando os números ---------- */

/* O filtro é uma linha só: modelo, de, até, botão. */
.filtro-periodo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    max-width: none;
    margin-bottom: 2rem;
}

.filtro-periodo .campo { margin: 0; flex: 1 1 12rem; }
.filtro-periodo .campo:first-child { flex: 2 1 18rem; }
.filtro-periodo input { width: 100%; }
.filtro-periodo .btn { padding: 0.5rem 1.25rem; font-weight: 600; }

.secao { margin: 2.5rem 0 1rem; font-size: 1.125rem; }

/* Número em tabela alinha à direita — com duas linhas a diferença de grandeza
   já se vê sem ler. O "de 5" fica embaixo, não ao lado, para a média continuar
   sendo a primeira coisa que se lê. */
.tabela .col-numero { text-align: right; white-space: nowrap; }
.tabela .col-numero .dica { display: block; font-size: 0.75rem; }

/* Nome de pessoa em CAIXA ALTA no relatório inteiro, por decisão do dono
   (20/08/2026): a API da SERRAF já devolve assim, e metade em caixa alta com
   metade capitalizada é pior que as duas formas. Feito no CSS, não no PHP —
   `text-transform` não toca no texto do documento, então o leitor de tela
   continua recebendo o nome como está gravado, em vez de soletrar letra por
   letra. E "SERRAF" continua sendo SERRAF. */
.notas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.notas-lista li { font-size: 0.875rem; text-transform: uppercase; }

.notas-lista .marca-situacao { margin-right: 0.5rem; background: var(--azul-claro); color: var(--primaria-700); }

.respostas-texto { list-style: none; margin: 0; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.respostas-texto li { border-left: 3px solid var(--borda-fraca); padding-left: 1rem; }
.respostas-texto p { margin: 0; }
.respostas-texto .meta { font-weight: 600; color: var(--tinta-fraca); font-size: 0.8rem; text-transform: uppercase; }

/* ---------- criar pesquisa: o CreateSurveyModal, sem modal ---------- */

.formulario { max-width: 48rem; }

/* Global, como o `input` lá em cima. Enquanto isto era `.formulario select`, o
   select de papel da tabela de usuários — que mora numa `<td>`, fora de
   qualquer `.formulario` — saía com 52x19px do estilo do sistema operacional,
   ao lado de campos de texto de 40px. A largura fica só no formulário: numa
   célula de tabela, 100% estica a coluna sem motivo. */
select {
    min-height: 2.75rem;
    padding: 0.5rem;
    /* O select nativo usa `line-height: normal`; sem isto o texto dele fica
       colado no topo depois do `min-height`. */
    line-height: 1.5;
    font: inherit;
    color: var(--tinta);
    background: var(--papel-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio-input);
}

.formulario select, .filtro-periodo select { width: 100%; }

.pares { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* O botão é filho direto do flex e, sem isto, `stretch` o estica até a altura
   da linha em que caiu — no celular o "Criar" de Usuários saía com 93px de
   altura. As caixas `.par` continuam esticando, que ali a altura igual é o
   desenho. */
.pares > .btn { align-self: flex-start; }

/* O par filial → pessoa vinha numa caixa de contorno no modal */
.par {
    flex: 1 1 18rem;
    border: 1px solid var(--borda-fraca);
    border-radius: var(--raio-btn);
    padding: 1.25rem;
    margin: 0 0 1.5rem;
}

.par legend { font-weight: 600; padding: 0 0.35rem; }
.par .campo:last-child { margin-bottom: 0; }

.erro-campo { color: var(--perigo); }

.marca-situacao {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    background: var(--papel-baixo);
    color: var(--tinta-fraca);
    font-size: 0.8rem;
    white-space: nowrap;
}

.marca-situacao--ok { background: var(--ok-fundo); color: var(--ok-tinta); }
.marca-situacao--aberta { background: var(--azul-claro); color: var(--primaria-700); }
/* Anulada fica ao LADO de "Respondida", nunca no lugar dela: são duas
   dimensões, e a pesquisa continua respondida. Os tokens são os do `.recado--erro`
   que já estão no design — nenhuma cor nova entra aqui. */
.marca-situacao--anulada { background: var(--erro-fundo); color: var(--erro-tinta); }

.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.paginacao__pagina { color: var(--tinta-fraca); font-size: 0.875rem; }

/* Quantas linhas o filtro tem ao todo (S6), acima da tabela. */
.contagem { margin-bottom: 0.5rem; color: var(--tinta-fraca); font-size: 0.875rem; }

/* Texto que só o leitor de tela recebe. Diferente do `.pular`, que precisa
   VOLTAR a ser visível ao receber foco — este nunca volta. */
.u-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Botão que já foi clicado e está esperando o servidor (gerar PDF na hora). */
.btn--ocupado { opacity: 0.6; pointer-events: none; }

/* ---------- responder: o ViewForm.tsx + os *Preview.tsx ---------- */

/* O título ficava num cartão estreito sobreposto ao topo da página
   (`w-[40%] absolute -top-10`). Aqui ele é um cartão normal: a sobreposição
   dependia de um container com padding fixo que não sobrevive ao responsivo. */
.cartao-titulo, .cartao-dados, .pergunta {
    background: var(--papel-alto);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-card);
    margin-bottom: 1.5rem;
}

.cartao-titulo { padding: 1.5rem; }

/* `overflow-wrap: anywhere` porque o título é digitado por gente e vale até 50
   caracteres — 50 SEM espaço nenhum (um código, uma URL colada) esticavam a
   página em 393px e traziam a rolagem lateral de volta, na única tela que um
   estranho abre. Achado na passada de QA de 26/08/2026. `anywhere` e não
   `break-word`: o segundo só quebra depois de tentar caber, e a palavra sozinha
   já não cabe. Vale para a prévia do modelo pelo mesmo elemento. */
.cartao-titulo h1 { margin: 0; font-size: 1.5rem; font-weight: 700; overflow-wrap: anywhere; }

.selo-ok {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    /* O `--ok-tinta` que o sistema já tem, em vez de um verde novo: o
       green-600 do React dava 3,30:1 sobre branco, e este selo é a única coisa
       na tela que confirma o envio. O green-800 do token dá 7,13:1. */
    color: var(--ok-tinta);
    font-size: 0.875rem;
    font-weight: 600;
}

.cartao-dados { padding: 0; overflow: hidden; }

/* A faixa em gradiente do topo do cartão, igual à do modal (15-design). O h4 é
   a mesma faixa nas seções que vêm depois de um h3 — a tag muda para a ordem de
   títulos fechar, o desenho não. */
.cartao-dados h2, .cartao-dados h4 {
    margin: 0;
    padding: 1.25rem;
    background: linear-gradient(to left, var(--primaria-500), var(--primaria-700));
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.cartao-dados dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem 2.5rem;
    margin: 0;
    padding: 1.25rem;
}

.cartao-dados dt { font-weight: 600; }
.cartao-dados dd { margin: 0; }

/* `.preview`: rótulo em 1.125rem, número antes em 700 e na cor da marca */
.pergunta { padding: 1.5rem 2rem; border: 0; }
/* 0,9 e não 0,75: o desbotado ainda se vê ao lado do fundo cinza, e a 0,75 a
   nota escolhida ficava em 4,35:1 — abaixo do mínimo AA, na tela em que se
   confere a resposta. */
.pergunta--lida { opacity: 0.9; background: var(--papel-baixo); }  /* pelo mesmo motivo do thead */

/* As duas opacidades se MULTIPLICAVAM: o fieldset respondido é `disabled`, e
   cada campo dentro dele casa com o `:disabled` lá de cima. 0,75 × 0,5 = 0,375,
   e a resposta gravada saía com 2,19:1 de contraste — ilegível justamente na
   tela em que se confere o que foi enviado. O cinza do cartão já diz "só
   leitura" sozinho. */
.pergunta--lida :disabled { opacity: 1; }

/* Devolver a opacidade tirou o ÚNICO sinal de "isto não se digita": o
   `input` global já força fundo branco e borda, então o cinza nativo do
   `:disabled` nunca aparecia, e o campo da resposta gravada ficava idêntico a
   um editável que recusa a digitação em silêncio. Sem fundo e com a borda
   fraca, ele volta a ler como texto impresso — e o contraste continua o da
   correção. */
/* `input:disabled`, não ` :disabled`: a regra global de input é
   `input:not([type=radio]):not([type=checkbox])`, que vale (0,2,1) porque
   `:not()` carrega a especificidade do que está dentro. O descendente sozinho
   dava (0,2,0) e perdia em silêncio. */
.pergunta--lida input:disabled,
.pergunta--lida textarea:disabled {
    background: transparent;
    border-color: var(--borda-fraca);
}

/* Menos o radio da nota, que é invisível de propósito — quem mostra o estado
   ali é o `span` ao lado dele. A regra acima é mais específica que o
   `opacity: 0` lá de baixo e o trazia de volta como um ponto de 1px. */
.pergunta--lida .notas-resposta input { opacity: 0; }
.pergunta--erro { box-shadow: 0 0 0 2px var(--perigo), var(--sombra-card); }

/* `legend` é ancorada na BORDA do fieldset, não no conteúdo: sem o `float` o
   rótulo da pergunta aparece flutuando acima do cartão. E com o `float` sozinho
   a fileira de notas fica sem largura e quebra uma por linha — daí o `clear`
   em tudo que vem depois. Os dois andam juntos. */
.pergunta legend {
    float: left;
    width: 100%;
    padding: 0 0 1.25rem;
    font-size: 1.125rem;
}

.pergunta > :not(legend) { clear: both; }

.pergunta__num { font-weight: 700; color: var(--primaria-500); }

/* S10: "de 12" ao lado do número. Apagado de propósito — quem está
   respondendo procura o enunciado, não a conta. */
.pergunta__de { color: var(--tinta-fraca); font-weight: 400; margin-right: 0.5rem; }
.pergunta legend small { color: var(--tinta-fraca); font-weight: 400; }
.pergunta__erro { margin: 0 0 1rem; color: var(--perigo); font-size: 0.875rem; }

.pergunta textarea {
    width: 100%;
    padding: 0.5rem;
    font: inherit;
    color: var(--tinta);
    background: var(--papel-alto);
    border: 1px solid var(--borda);
    border-radius: var(--raio-input);
    outline: 0;
    resize: vertical;
}

.opcoes-resposta { display: flex; flex-direction: column; gap: 0.5rem; }
.opcoes-resposta label { display: flex; gap: 0.5rem; width: fit-content; cursor: pointer; }

input[type="radio"] { accent-color: var(--primaria-500); }

/* `.scale-inputs`: a mesma ideia do `.grades-input` do editor, em quadrado.
   O radio é o que guarda o estado — só some de vista, senão o teclado perde a
   navegação e o `required` do navegador não teria onde se apoiar. */
/* `flex-start`, nao `center` — decisao do dono em 31/08/2026. Do React veio
   centralizado, e num cartao de 1232px isso deixava ~440px de vazio entre o
   rotulo da pergunta e o primeiro numero: o olho atravessava meio cartao para
   achar onde responder. Encostado a esquerda ele sai do rotulo direto para o 1.
   No celular nao muda nada — cinco quadrados de 3.25rem com gap de 0.5rem dao
   292px nos ~303px uteis, entao centralizar ou nao da no mesmo. Registrado no
   15-design. */
.notas-resposta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.75rem; }

/* `relative` porque o radio abaixo é `absolute`: sem um ancestral posicionado
   ele se ancorava no DOCUMENTO — funcionava por acaso, e qualquer mudança de
   layout o mandaria para o canto da página. */
.notas-resposta label { cursor: pointer; position: relative; }

.notas-resposta input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.notas-resposta span {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;                  /* h-20 aspect-square */
    background: var(--papel-baixo);   /* o #e5e7eb que o 15-design registra */
    border: 1px solid var(--tinta-fraca);
    border-radius: var(--raio-btn);
    font-size: 1.125rem;
    transition: all 100ms linear;
}

/* `:not([disabled])`: no formulário já respondido o cartão inteiro é um
   fieldset desabilitado, e a nota não deve reagir ao mouse como se desse. */
.pergunta:not([disabled]) .notas-resposta label:hover span {
    background: var(--azul-claro);
    border-color: var(--primaria-400);
    color: var(--tinta-selecionada);
    transform: translateY(-2px);
}

.notas-resposta input:checked + span {
    background: var(--azul-claro);
    border-color: var(--primaria-400);
    color: var(--tinta-selecionada);
}

.notas-resposta input:focus-visible + span {
    outline: 2px solid var(--primaria-400);
    outline-offset: 2px;
}

/* Sozinho, alinha os botões à direita. Com `.rodape-form` junto, também gruda
   no fim da tela — o que só faz sentido em formulário longo, como o construtor
   e o de responder; num curto ele passa por cima do próprio conteúdo. */
.rodape-form--direita {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* O `.btn` tem 34px de altura por desenho (15-design: "é um botão pequeno"), o
   que é confortável com mouse e apertado com o dedo — numa fileira "Usar ·
   Editar · Copiar · Excluir" dentro de um cartão de 343px eles ficam colados.
   `pointer: coarse` cresce o alvo só onde existe dedo: o desenho de desktop
   fica exatamente como está documentado. */
@media (pointer: coarse) {
    .btn, select {
        min-height: 2.75rem;
    }

    /* O `<summary>` do cartao que dobra media 35px no dedo. Cresce por
       `padding`, e nao por `min-height` com `flex`: `display` diferente de
       `list-item` apaga o triangulo nativo, que e a unica pista de que aquilo
       abre. */
    .cartao > details > summary { padding: 0.625rem 0; }

    /* A altura já vem da regra acima; a largura, do texto — e o texto da seta
       é um caractere. Quadrado de 44px, que é o alvo de dedo. */
    .campo-editor__mover { min-width: 2.75rem; }

    /* P13: as abas de filtro mediam 40px de altura no dedo — o A9 cobriu
       `.btn` e `select` e passou por elas. `inline-flex` porque a altura vinha
       do `padding` sobre uma linha de texto, e `min-height` sozinho deixaria o
       rótulo colado no topo. O sublinhado do `::after` acompanha, que é o que
       se quer: ele marca a aba inteira.

       AD-01: o `.topo nav a` entra na MESMA regra. Ele divide a regra de base
       com `.filtros a` desde sempre, mas o P13 corrigiu so um dos dois — e o
       menu, que e o controle mais tocado do sistema, ficou em 40px enquanto as
       abas de filtro foram para 44. */
    .topo nav a, .filtros a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* AD-02: a marca media 36px. Ela e link para a raiz — o alvo de "voltar ao
       inicio" no celular. */
    .marca { display: inline-flex; align-items: center; min-height: 2.75rem; }

    /* AD-03: o rotulo que envolve o checkbox "obrigatoria" media 21px, do lado
       de botoes de 44. O checkbox em si tem 13px e nao cresce sem `transform`;
       quem recebe o dedo e o rotulo, e e ele que passa a medir. */
    .campo-editor__exigir { display: inline-flex; align-items: center; min-height: 2.75rem; }

    /* AD-09, e o pior deles: a opcao de multipla escolha da tela de RESPONDER
       media 24px de altura. E a tela que um estranho abre no proprio celular,
       e a unica que nao tem como pedir "abre no computador". O `width:
       fit-content` fica — o alvo cresce em altura, nao em largura, senao a
       faixa clicavel passaria a atravessar o cartao inteiro sem nada desenhado
       nela. */
    .opcoes-resposta label { align-items: center; min-height: 2.75rem; }

    /* AD-10: o "Voltar para os modelos" da tela de erro media 31px, e e o
       unico controle que existe naquela tela. */
    .nota a { display: inline-flex; align-items: center; min-height: 2.75rem; }

    /* O cabeçalho que ordena, pelo mesmo motivo: com o padding de 0.75rem sobre
       uma linha de texto ele fecha em 42px. */
    .th-ordem { min-height: 2.75rem; }

    /* Link solto de parágrafo (o "Voltar para os modelos" da página de erro,
       o "Criar o primeiro" dos vazios): 20px de altura, na tela em que quem
       chegou já está perdido. */
    /* Sem `inline-block`: em elemento inline o padding vertical cresce a área
       de acerto sem crescer a linha. Com ele, o parágrafo que quebra em 375px
       ganhava ~11px de entrelinha só na linha que carrega o link. */
    .nota a, .vazio a, .erros a { padding: 0.35rem 0; }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.9rem;
    }

    .notas .btn, .btn--primario { min-height: 2.75rem; }
}

/* Grudado no topo só enquanto o cabeçalho é UMA linha.
 *
 * Marca + cinco abas + nome medem ~830px: abaixo disso o `flex-wrap` (que
 * consertou o menu vazando) empilha o topo em três fileiras — 296px em 375px e
 * 224px em 768px. Grudado, isso comia 36% da tela do celular em toda tela
 * interna, e ainda escondia o alvo do "Pular para o conteúdo" atrás de si.
 * Rolando junto com a página, o menu continua inteiro e a tela volta a ser da
 * tela. */
@media (max-width: 56rem) {
    .topo { position: static; }
}

/* O par da regra acima: onde o cabeçalho GRUDA, "Pular para o conteúdo" rolava
   o <main> até o topo do documento e a barra cobria o <h1> da tela — o link de
   acessibilidade levava a um lugar em branco. Abaixo de 56rem não há barra
   grudada, e a margem só deixaria um vazio. */
@media (min-width: 56.0625rem) {
    main { scroll-margin-top: 6rem; }
}

@media (max-width: 40rem) {
    .topo { gap: 0.75rem 1rem; padding: 1rem; }

    /* O botao de conta sobe para a PRIMEIRA fileira, no canto direito da marca,
       e o menu passa a ocupar a linha inteira embaixo.
     *
     * Antes ele caia numa fileira so dele, com o vazio da largura toda a
     * esquerda — e a barra fechava em 258px num aparelho de 393 (30% da tela)
     * e 318px num de 360 (40%). O dono apontou em 28/08/2026.
     *
     * ⚠️ Isto e `order`, entao a ordem VISUAL passa a diferir da ordem do
     * documento: marca, conta, menu na tela; marca, menu, conta no HTML. E de
     * proposito e vale so aqui — quem navega por teclado ou leitor de tela
     * chega ao MENU logo depois da marca, que e o que importa, e a conta fica
     * por ultimo. Acima de 40rem as duas ordens coincidem. */
    .marca { order: 0; }
    .conta { order: 1; }
    .topo nav { order: 2; flex-basis: 100%; }

    /* `0.875rem` e o que o 15-design registra para <= 480px ("botao e aba caem
       para 0.875rem") e que a porta para PHP nunca aplicou ao menu. Ele nao
       mexe no alvo de toque, que continua com os 44px do `pointer: coarse` —
       encolhe a LETRA, e com ela a largura: em 360px o menu deixa de precisar
       de tres fileiras. */
    /* Os cinco itens em UMA fileira so (pedido do dono, 28/08/2026). A grade de
       tres colunas que estava aqui alinhava, mas ainda gastava duas fileiras.
     *
     * `space-between` distribui a sobra entre eles: o primeiro encosta na
     * margem esquerda, o ultimo na direita, e o espaco fica igual no meio. O
     * `flex-wrap` fica como rede de seguranca — abaixo de ~340px nem com a
     * letra no minimo os cinco cabem, e ali e melhor quebrar do que estourar.
     *
     * O alvo de toque nao muda: continua nos 44px do `pointer: coarse`. O que
     * encolhe e a LETRA e o respiro lateral. */
    .topo nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.25rem;
        width: 100%;
    }

    /* Medido item a item, com a fonte real: em 360px os cinco so cabem ate
       13px; em 393px, ate 14px. Um valor fixo teria de ser o menor dos dois em
       toda tela — o `clamp` deixa a letra crescer com a largura e para nos
       `0.875rem`, que e o tamanho que o 15-design registra para <= 480px.
       O piso de `0.75rem` (12px) e o minimo que a bateria da auditoria 21
       aceita. */
    .topo nav a {
        font-size: clamp(0.75rem, 3.5vw, 0.875rem);
        padding: 0.5rem 0.125rem;
    }

    /* AD-04: `.cabecalho` e `display: flex` sem `wrap`, entao titulo e acao
       disputam a mesma linha em qualquer largura. Em /relatorios com dados o
       titulo do modelo e longo e o botao ficava com 96px: "Baixar Excel" saia
       quebrado em duas linhas dentro do proprio botao. Com `wrap` a acao cai
       para a linha de baixo SO quando nao couber — cabecalho curto (Modelos,
       Pesquisas) continua exatamente como esta. O `margin-left: auto` fica: na
       linha propria ele encosta a acao a direita, como o `.rodape-form--direita`
       ja faz nos formularios. */
    .cabecalho { flex-wrap: wrap; }

    /* Aqui o botao de conta encolhe para so as iniciais: com o nome dentro
       dele a barra voltava a ter tres fileiras. O nome nao some — ele e a
       primeira linha do menu, que e onde ja estava indo parar.

       Isto e o que substituiu a FAIXA de conta que existia ate 28/08/2026:
       uma linha inteira com regua, nome a esquerda e dois links a direita.
       Ela custava ~60px em toda tela interna. */
    /* ⚠️ Era `display: none`, e isso deixava o botao de conta SEM NOME NENHUM
       na arvore de acessibilidade — em toda tela com sessao, so no celular.
       As iniciais sao `aria-hidden` de proposito (ler "TC" em voz alta e
       ruido) e o nome era a unica fonte de nome que sobrava; tirando os dois,
       nao sobrava nada. Quem usa leitor de tela ouvia um botao mudo.
       Achado em 31/08/2026 lendo a arvore que o navegador entrega, nao o HTML.

       Escondido do OLHO, presente para o leitor: os mesmos valores do
       `.u-oculto`. `position: absolute` tira do fluxo, entao o botao continua
       medindo o que media — quem encolhe a barra e isto, e nada mudou. */
    .conta__nome, .conta__papel {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .conta__botao { padding: 0.25rem; }

    /* Menu ancorado a direita da barra, e nunca mais largo que a tela. */
    .conta__menu { min-width: 12rem; max-width: calc(100vw - 2rem); }

    /* Pedido do dono em 28/08/2026: no celular, filtro e DROPDOWN. A fileira
       de abas sai de cena inteira — ela e o desenho de mesa — e no lugar entra
       um `<select>` por grupo, que e o que o dedo espera e o que mostra todas
       as opcoes de uma vez sem ocupar a tela.

       As abas continuam no HTML: nada de JS decide isto, e acima de 40rem sao
       elas que valem. */
    .filtros { display: none; }
    .filtros-celular { display: block; margin-bottom: 1rem; }

    /* O vao do AD-07 apontava para `.filtros`, que aqui esta escondida — em
       Usuarios o cartao "Novo usuario" voltou a encostar no primeiro filtro.
       `~` e nao `+` porque entre os dois ficam as fileiras de aba, que
       continuam no HTML. */
    .cartao ~ .filtros-celular { margin-top: 1.5rem; }

    /* Rotulo e `<select>` na MESMA linha: em linha propria cada grupo custaria
       64px, e Pesquisas tem tres deles. Assim cada um fecha nos 44px do alvo
       de toque. As 5rem sao a largura do maior rotulo ("Situação"). */
    .filtros-celular .campo {
        display: grid;
        grid-template-columns: 5rem 1fr;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .filtros-celular label { color: var(--tinta-fraca); font-size: 0.875rem; }

    /* O "Aplicar" e o caminho SEM JS. Com JS o `telas.js` envia na mudanca e
       esconde este botao — quem tem script nao precisa confirmar escolha de
       filtro. */
    .filtros-celular button { margin-top: 0.25rem; }

    /* O `.rodape-form` e sticky, entao ele ocupa o fim da janela enquanto
       houver rolagem — e num editor de UMA pergunta a fileira "Adicionar:"
       cai justamente ali: os quatro botoes aparecem desbotados sob o gradiente
       e o "Salvar" por cima deles. O clique nunca deixou de funcionar (a
       faixa translucida nao captura toque), mas parece botao cortado.
       Este espaco e o que o comentario do `.rodape-form` ja queria: a faixa
       que desbota cai sobre vazio, e rolar ate o fim livra a fileira. */
    .novo-campo { margin-bottom: 7rem; }

    /* Os campos de `.pares` tomam a largura do proprio conteudo, e num cartao
       de 361px isso os deixava com 199 — 130px de sobra a direita, com
       "Papel" e "Criar" subindo para a linha do campo anterior e formando
       uma escada. No celular cada campo fica com a linha inteira; o botao
       continua com o `align-self: flex-start` que ja tinha. */
    .pares > .campo { flex: 1 1 100%; }
    main { padding: 1.5rem 1rem 3rem; }
    .notas { flex-wrap: wrap; }
    .notas .btn { padding: 0.75rem 1.5rem; }
    .pergunta { padding: 1.25rem; }
    .cartao-dados dl { grid-template-columns: 1fr; gap: 0.25rem; }
    .cartao-dados dd { margin-bottom: 0.75rem; }
    /* 5 × 3.25rem + 4 × 0.5rem = 292px, e o cartão tem 303px úteis em 375px:
       com 3.5rem e 0.75rem a quinta nota descia sozinha para a segunda linha,
       centralizada e desalinhada — e caía bem na faixa do rodapé sticky. */
    .notas-resposta { gap: 0.5rem; }
    .notas-resposta span { width: 3.25rem; height: 3.25rem; }

    /* S3 do 16-inspecao-ux: Pesquisas tem 7 colunas e, mesmo com a
       `.tabela-rolavel` funcionando, sobravam 640px para rolar de lado num
       celular. A MESMA <table> vira cartao aqui — nenhum HTML duplicado: o
       rotulo da coluna volta pelo `data-rotulo` do <td>.

       O preco e a semantica de tabela, que o `display: block` derruba na
       arvore de acessibilidade. Em troca cada celula passa a se anunciar com o
       proprio rotulo, que e o que o cartao mostra na tela — e a alternativa
       era uma tabela que so se le arrastando. */
    .tabela--cartao,
    .tabela--cartao tbody,
    .tabela--cartao tr,
    .tabela--cartao td { display: block; }

    .tabela--cartao thead { display: none; }

    /* O container deixa de rolar: `overflow-x: auto` faz o `overflow-y`
       calcular `auto` junto, e ai ele CORTA a sombra dos cartoes. */
    .tabela-rolavel:has(.tabela--cartao) { overflow: visible; }

    .tabela--cartao tr {
        background: var(--papel-alto);
        border-radius: var(--raio-card);
        box-shadow: var(--sombra-card);
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .tabela--cartao tbody tr:hover { background: var(--papel-alto); }

    .tabela--cartao td { border: 0; padding: 0.2rem 0; }

    .tabela--cartao td[data-rotulo]::before {
        content: attr(data-rotulo) ": ";
        color: var(--tinta-fraca);
        font-weight: 600;
    }

    .tabela--cartao .celula-titulo {
        font-size: 1.125rem;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    /* AD-05: no cartao nao ha coluna para alinhar a direita — o numero fica
       colado no rotulo, a esquerda, como todo o resto da celula. */
    .tabela--cartao .col-numero { text-align: left; white-space: normal; }
    .tabela--cartao .col-numero .dica { display: inline; }

    /* O `nowrap` da tabela existia para "Copiar link" em duas linhas nao
       deformar a altura da LINHA; no cartao nao ha linha para deformar. */
    .tabela--cartao .acoes { flex-wrap: wrap; padding-top: 0.75rem; }
    .tabela--cartao .acoes .btn, .tabela--cartao .acoes button { white-space: normal; }

    /* A marca da recem-criada muda de dono: na tabela ela pinta as celulas,
       no cartao pinta o cartao — senao sairia listrada. */
    .tabela--cartao .linha--nova {
        background: var(--azul-claro);
        box-shadow: var(--sombra-card), inset 3px 0 0 var(--primaria-500);
    }

    .tabela--cartao .linha--nova td,
    .tabela--cartao .linha--nova td:first-child { background: none; box-shadow: none; }
}

/* ---------- movimento ---------- */

/* Critério 2.3.3 da WCAG: quem pede menos movimento no sistema operacional não
   deve receber o `translateY` das notas nem a transição das sombras. O que
   some é o MOVIMENTO, não o estado: fundo, borda e cor do selecionado
   continuam iguais, porque são eles que dizem o que está escolhido. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .notas .btn:hover,
    .pergunta:not([disabled]) .notas-resposta label:hover span {
        transform: none;
    }
}

/* ============================================================================
   IMPRESSÃO
 *
 * Ninguém tinha desenhado isto. O PDF da avaliação tem CSS próprio
 * (`assets/pdf/`) e está coberto desde a AV-10; a TELA saía no papel como está
 * na tela — barra de navegação, filtros, botões e o fundo cinza inteiro.
 *
 * E não era só feio: em 31/08/2026, medido com `emulateMedia('print')` numa
 * A4 de 680px úteis, a lista de **Pesquisas perdia 324px do lado direito**. O
 * `.tabela-rolavel` resolve a largura ROLANDO, e papel não rola — o excesso
 * era cortado calado, exatamente a classe do AD-05. Acima de 40rem o cartão
 * não entra, e a A4 útil (680px) é mais larga que os 640px do `@media`, então
 * a tabela ia inteira contra a borda da folha.
 *
 * Quem imprime é o RH entregando um relatório numa reunião. É essa a tela que
 * manda aqui — as outras só não podem sair erradas. */
@media print {
    /* O `@page` dá a margem; o `main` não precisa dar outra por cima. */
    @page { margin: 1.5cm; }

    /* Fora tudo que só existe para CLICAR. O `.filtro-periodo` vai junto: o
       recorte já está escrito no `.meta` do corpo do relatório ("Período de …
       a … · gerado em …"), que nasceu em 20/08/2026 para este caso exato. */
    .pular,
    .topo,
    .filtros,
    .filtros-celular,
    .filtro-periodo,
    .acoes,
    .paginacao,
    .recado,
    .btn,
    button { display: none !important; }

    body { background: #fff; color: #000; }
    main { max-width: none; padding: 0; }

    /* Fundo e sombra não saem na impressora por padrão (`print-color-adjust`),
       então nada pode DEPENDER deles para se distinguir. O cartão passa a ser
       uma borda, e o cabeçalho da tabela fica de pé na régua de 2px que já
       tinha. */
    .cartao,
    .cartao-titulo,
    .cartao-dados,
    .pergunta { box-shadow: none; border: 1px solid var(--borda-fraca); }

    .tabela th { background: none; }

    /* Mesmo motivo: o selo "Anulada" é fundo vermelho claro com texto escuro.
       Sem o fundo ele vira uma palavra solta no meio da linha. */
    .marca-situacao { border: 1px solid currentColor; }

    /* E o caso que quase passou: a faixa do `.cartao-dados` é gradiente azul
       com texto BRANCO, e é ela que diz a que pergunta as respostas de baixo
       pertencem. Sem o fundo impresso seria branco no branco — o relatório
       sairia com os textos das pessoas e nenhuma pergunta. Achado em
       31/08/2026 varrendo o contraste contra o BRANCO do papel, não contra o
       fundo do elemento; a captura não mostra, porque captura pinta fundo. */
    .cartao-dados h2,
    .cartao-dados h4 {
        background: none;
        color: #000;
        border-bottom: 2px solid var(--borda-fraca);
        padding: 0 0 0.35rem;
        margin-bottom: 0.75rem;
    }

    /* Os 330px. O `.tabela-rolavel` resolve a largura ROLANDO — some o clipe,
       senão o excesso sai cortado em vez de aparecer. E o cabeçalho passa a
       quebrar linha, que na tela ele não pode (`nowrap`, para a fileira de
       ordenação não deformar a altura). */
    .tabela-rolavel { overflow: visible !important; }
    .tabela th { white-space: normal; }

    /* Só isso não bastava: sem o `.acoes` a tabela de Pesquisas ainda media
       810px numa folha de 680, e a de Usuários, 880. O que sobrava era medida
       de TELA — 32px de respiro por célula (são seis a sete colunas) e os
       `min-width` que existem para EDITAR o campo, não para lê-lo impresso.
       Medido em 31/08/2026: 810 -> 623px e 880 -> 651px. */
    .tabela { font-size: 0.8rem; }
    .tabela th,
    .tabela td,
    .th-ordem { padding: 0.35rem 0.5rem; }
    /* Repetindo o seletor de tipo de propósito: `.tabela input[type="email"]`
       tem especificidade maior que `.tabela input`, e um `min-width: 0` genérico
       perdia dele em silêncio — a coluna de e-mail continuava com os 17rem de
       edição, 288px numa folha de 680. */
    .tabela input[type="email"],
    .tabela input[type="text"] { min-width: 0; }

    /* Uma tabela que atravessa a folha repete o cabeçalho na página seguinte —
       sem isto a segunda página é uma grade de números sem legenda. */
    thead { display: table-header-group; }

    /* Não partir uma linha, um cartão nem um título do que ele apresenta. */
    tr,
    .cartao,
    .cartao-dados,
    .pergunta,
    .respostas-texto li { break-inside: avoid; }

    h1, h2, h3, h4 { break-after: avoid; }
}