:root {
  --fundo: #fbfaf8;
  --superficie: #ffffff;
  --borda: #e3dfd8;
  --texto: #1d1b18;
  --texto-fraco: #6a6459;
  --destaque: #8a4b2a;
  --selo-fundo: #f1ece4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #15140f;
    --superficie: #1e1c17;
    --borda: #332f27;
    --texto: #f0ece4;
    --texto-fraco: #a39b8c;
    --destaque: #d99b6c;
    --selo-fundo: #2a271f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topo {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: 1.1rem 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
.marca { font-weight: 650; letter-spacing: -.01em; color: var(--texto); text-decoration: none; }
.marca-sufixo { color: var(--texto-fraco); font-size: .82rem; }

.conteudo { max-width: 56rem; margin: 0 auto; padding: 2rem 16px 3rem; }

h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .4rem; }
h2 { font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
     color: var(--texto-fraco); margin: 2.2rem 0 .8rem; }
.chamada { color: var(--texto-fraco); margin: 0 0 1.5rem; }
a { color: var(--destaque); }

.grade { list-style: none; padding: 0; margin: 0;
         display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cartao { background: var(--superficie); border: 1px solid var(--borda);
          border-radius: 10px; padding: .9rem 1rem; }
.cartao a { font-weight: 600; text-decoration: none; }
.cartao a:hover { text-decoration: underline; }
.apoio { color: var(--texto-fraco); font-size: .87rem; margin: .35rem 0 .6rem; }
.selo { display: inline-block; background: var(--selo-fundo); color: var(--texto-fraco);
        border-radius: 999px; padding: .1rem .55rem; font-size: .76rem; }

.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: .8rem 0; border-bottom: 1px solid var(--borda); }
.lista a { font-weight: 600; text-decoration: none; }
.lista a:hover { text-decoration: underline; }
.meta { display: block; color: var(--texto-fraco); font-size: .85rem; margin-top: .15rem; }

.vazio, .nota { color: var(--texto-fraco); background: var(--superficie);
                border: 1px dashed var(--borda); border-radius: 10px; padding: 1rem; }

.fichas { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
          margin: 1.5rem 0; padding: 0; }
.fichas div { background: var(--superficie); border: 1px solid var(--borda);
              border-radius: 10px; padding: .7rem .9rem; }
.fichas dt { color: var(--texto-fraco); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.fichas dd { margin: .2rem 0 0; font-size: 1.1rem; font-weight: 600; }

.migalha { color: var(--texto-fraco); font-size: .85rem; margin-bottom: 1rem; }
.erro-codigo { font-size: 3rem; }

.rodape { border-top: 1px solid var(--borda); padding: 1.2rem 16px;
          color: var(--texto-fraco); font-size: .85rem; }
.rodape p { max-width: 56rem; margin: 0 auto; }

/* ------------------------------------------------------------- questionário */
.progresso { margin: 0 0 1.5rem; }
.progresso-barra { height: 6px; background: var(--selo-fundo); border-radius: 999px; overflow: hidden; }
.progresso-barra span { display: block; height: 100%; background: var(--destaque); transition: width .2s; }
.progresso-texto { margin: .4rem 0 0; color: var(--texto-fraco); font-size: .82rem; }

.pergunta {
  border: 1px solid var(--borda);
  background: var(--superficie);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 0 0 1rem;
}
.pergunta legend {
  font-weight: 600;
  padding: 0 .3rem;
  line-height: 1.4;
}
.codigo {
  display: inline-block;
  background: var(--selo-fundo);
  color: var(--texto-fraco);
  border-radius: 5px;
  padding: 0 .35rem;
  font-size: .78rem;
  font-weight: 600;
  margin-right: .35rem;
}
.obrigatoria { color: var(--destaque); text-decoration: none; border: 0; margin-left: .2rem; }
.ajuda { color: var(--texto-fraco); font-size: .85rem; margin: .4rem 0 0; }

.opcoes, .ranking { list-style: none; padding: 0; margin: .8rem 0 0; }
.opcoes li, .ranking li { margin: 0 0 .1rem; }
.opcoes label, .ranking label, .nsnr {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: 7px;
  cursor: pointer;
}
.opcoes label:hover, .ranking label:hover, .nsnr:hover { background: var(--selo-fundo); }
.opcoes input, .nsnr input { margin: 0; accent-color: var(--destaque); flex: none; }

.escala { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .8rem 0 0; }
.escala label {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  padding: .45rem .3rem;
  border: 1px solid var(--borda);
  border-radius: 7px;
  cursor: pointer;
}
.escala label:hover { border-color: var(--destaque); }
.escala input { margin: 0 0 .2rem; accent-color: var(--destaque); }

.ranking select {
  font: inherit;
  padding: .3rem .4rem;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
  flex: none;
}

.campo {
  display: block;
  width: 100%;
  margin-top: .8rem;
  font: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: .55rem .7rem;
}
.campo:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }
textarea.campo { resize: vertical; }

.nsnr { margin-top: .7rem; color: var(--texto-fraco); font-size: .9rem; }

.erros {
  border: 1px solid var(--destaque);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  margin: 0 0 1.2rem;
  background: var(--superficie);
}
.erros p { margin: 0 0 .4rem; font-weight: 600; }
.erros ul { margin: 0; padding-left: 1.2rem; }

.acoes { display: flex; gap: .6rem; align-items: center; margin-top: 1.5rem; }
.botao, .botao-fraco {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  padding: .6rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
}
.botao { background: var(--destaque); color: #fff; }
.botao:hover { filter: brightness(1.08); }
.botao-fraco { background: transparent; color: var(--texto-fraco); border-color: var(--borda); }
.botao-fraco:hover { background: var(--selo-fundo); }

/* ------------------------------------------------------------------ painel */
.admin { --largura: 64rem; }
.admin .conteudo { max-width: var(--largura); }
.topo-admin { position: relative; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.quem { color: var(--texto-fraco); font-size: .82rem; }
.em-linha { display: inline; }

.cabeca { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.cabeca h1 { margin: 0; }
.cabeca .botao { margin-left: auto; }

.recado {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--destaque);
  background: var(--superficie);
  border-radius: 8px;
  padding: .7rem 1rem;
  margin: 0 0 1.2rem;
}
.nota.aviso { border-style: solid; border-left: 3px solid var(--destaque); }

.caixa-login { max-width: 23rem; margin: 3rem auto; }

.tabela { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.tabela th, .tabela td {
  text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borda); vertical-align: top;
}
.tabela th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-fraco); font-weight: 600;
}
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela a { font-weight: 600; text-decoration: none; }
.tabela a:hover { text-decoration: underline; }

.selo-em_campo  { background: #1f7a4d; color: #fff; }
.selo-rascunho  { background: var(--selo-fundo); color: var(--texto-fraco); }
.selo-pausada   { background: #8a6a1f; color: #fff; }
.selo-encerrada { background: #6a3030; color: #fff; }
.selo-arquivada { background: var(--selo-fundo); color: var(--texto-fraco); }

.secao {
  border: 1px solid var(--borda); background: var(--superficie);
  border-radius: 10px; padding: .4rem 1.1rem; margin: 0 0 1rem;
}
.secao > summary { cursor: pointer; padding: .6rem 0; }
.secao > summary h2, .secao > summary h3 { display: inline; margin: 0; }
.secao[open] > summary { border-bottom: 1px solid var(--borda); margin-bottom: 1rem; }

.sub {
  border-top: 1px dashed var(--borda); margin-top: .6rem; padding-top: .4rem;
}
.sub > summary {
  cursor: pointer; color: var(--texto-fraco); font-size: .85rem; padding: .3rem 0;
}

.bloco {
  border: 1px solid var(--borda); background: var(--superficie);
  border-radius: 10px; padding: 1rem 1.1rem; margin: 0 0 1rem;
}
.bloco-cabeca { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bloco-cabeca h3 { margin: 0; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--texto); }
.bloco-acoes { margin-left: auto; display: flex; gap: .3rem; align-items: center; }

.perguntas-lista { margin: .8rem 0 0; padding-left: 1.4rem; }
.perguntas-lista > li { padding: .7rem 0; border-top: 1px solid var(--borda); }
.q-cabeca { display: flex; gap: .8rem; align-items: baseline; }
.q-tipo { margin-left: auto; color: var(--texto-fraco); font-size: .78rem; white-space: nowrap; }
.q-flags { margin: .2rem 0 0; font-size: .8rem; }
.q-acoes { display: flex; gap: .3rem; margin-top: .5rem; }

.opcoes-admin { list-style: none; padding: 0; margin: .5rem 0 0; }
.opcoes-admin li {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem .4rem; border-radius: 6px; font-size: .9rem;
}
.opcoes-admin li:hover { background: var(--selo-fundo); }
.opcoes-admin code { font-size: .78rem; color: var(--texto-fraco); }
.o-acoes { margin-left: auto; display: flex; gap: .2rem; }

.grade-campos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grade-campos.adicionar { align-items: start; }

.rotulo { display: block; margin: 0 0 .8rem; font-size: .85rem; color: var(--texto-fraco); }
.rotulo .campo { margin-top: .25rem; }
.rotulo small { display: block; margin-top: .25rem; }
.campo.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.campo[readonly], .campo[disabled] { opacity: .6; cursor: not-allowed; }

.caixas { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .8rem; }
.caixa { display: flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; }
.caixa input { accent-color: var(--destaque); margin: 0; }

.barra-status { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; }

.botao.pequeno, .botao-fraco.pequeno { padding: .35rem .7rem; font-size: .85rem; }
.botao-fraco.mini { padding: .1rem .4rem; font-size: .8rem; line-height: 1.3; }
.perigo { color: #b3402f; border-color: #b3402f55; }
.perigo:hover { background: #b3402f14; }
.vazio.pequeno { padding: .6rem .8rem; font-size: .88rem; margin: .6rem 0 0; }

h3 { font-size: .92rem; text-transform: uppercase; letter-spacing: .03em;
     color: var(--texto-fraco); margin: 1.6rem 0 .6rem; }

/* -------------------------------------------------------------- resultados */
.apagado { opacity: .62; }
.apagado td { font-style: italic; }

.barra {
  height: 4px; background: var(--selo-fundo); border-radius: 999px;
  overflow: hidden; margin-top: .3rem; max-width: 18rem;
}
.barra span { display: block; height: 100%; background: var(--destaque); }

.tabela td .meta { display: block; font-size: .72rem; }
.tabela-cruzamento th:first-child, .tabela-cruzamento td:first-child { min-width: 9rem; }
.tabela-cruzamento td.num strong { display: block; }

.abertas { list-style: none; padding: 0; margin: .8rem 0 0; }
.abertas li {
  padding: .5rem .7rem; border-left: 2px solid var(--borda);
  margin-bottom: .35rem; color: var(--texto); background: var(--fundo);
  border-radius: 0 6px 6px 0; font-size: .92rem;
}
.o-linha { display: flex; align-items: center; gap: .5rem; width: 100%; }
.opcoes-admin li { display: block; }

/* --------------------------------------------- divulgação de resultados */

/* Ficha técnica: lista de pares, não grade de cartões. É texto para ler
   linha por linha, inclusive por quem precisa conferir o registro. */
.ficha-tecnica { margin: 0 0 1.4rem; border: 1px solid var(--borda);
  border-radius: 10px; overflow: hidden; background: var(--superficie); }
.ficha-tecnica div { display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  padding: .55rem .9rem; border-bottom: 1px solid var(--borda); }
.ficha-tecnica div:last-child { border-bottom: 0; }
.ficha-tecnica dt { flex: 0 0 14rem; color: var(--texto-fraco); font-size: .88rem; }
.ficha-tecnica dd { margin: 0; font-weight: 600; }

.como-ler .explicacao { margin: .2rem 0 0; padding-left: 1.2rem; }
.como-ler .explicacao li { margin-bottom: .5rem; line-height: 1.5; }

.resultado { margin-bottom: 1.6rem; }
.q-publica { margin: 0 0 .15rem; font-size: 1.05rem; line-height: 1.4; }
.q-publica .codigo { margin-right: .35rem; }

/* A coluna que se cita é a de válidos: fica em negrito e as outras recuam. */
.tabela-publica td.num { font-variant-numeric: tabular-nums; }
.tabela-publica th:first-child { width: 45%; }
.tabela-publica tbody tr:last-child td { border-bottom: 0; }

.lista-marcar { list-style: none; padding: 0; margin: .3rem 0 0; }
.lista-marcar > li { padding: .45rem 0; border-bottom: 1px solid var(--borda); }
.lista-marcar label { display: flex; align-items: flex-start; gap: .5rem;
  cursor: pointer; line-height: 1.4; }
.lista-marcar input { margin-top: .25rem; }
.lista-marcar .meta { margin-left: 1.6rem; }

@media (max-width: 34rem) {
  .ficha-tecnica dt { flex-basis: 100%; }
  .tabela-publica th:first-child { width: auto; }
}