/* Design system — §4.2 e §9 do plano.
   Regras de acessibilidade tratadas como requisito: corpo ≥16px, contraste AA,
   foco sempre visível, nenhuma informação transmitida só por cor. */
:root {
  --fg: #16202a; --fg-fraco: #5a6b7a; --bg: #f4f7f9; --card: #ffffff;
  --borda: #cfd9e2; --borda-forte: #9fb0c0;
  --acento: #15597f; --acento-claro: #e8f1f7;
  --ok: #1a6b45; --alerta: #8a5a00; --erro: #9b2c2c;
  --raio: 10px; --sombra: 0 1px 3px rgba(20,40,60,.09);
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--fg); background: var(--bg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.25rem; background: var(--card); border-bottom: 1px solid var(--borda);
}
.topo .marca { font-weight: 700; color: var(--fg); text-decoration: none; }
.topo .marca span { color: var(--acento); }
.topo .secao { color: var(--fg-fraco); }
.topo .usuario { color: var(--fg-fraco); font-size: .9rem; }
.topo form { margin: 0; }
.status { margin-left: auto; font-size: .9rem; min-height: 1.2em; }
.status.ok { color: var(--ok); }
.status.salvando { color: var(--fg-fraco); }
.status.pendente { color: var(--alerta); font-weight: 600; }
.status.erro { color: var(--erro); font-weight: 600; }

main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

/* ---------- blocos ---------- */
.painel, .ficha {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.5rem;
}
.painel.centralizado { text-align: center; }
.painel.estreito { max-width: 22rem; margin: 3rem auto; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }

/* ---------- painel do revisor ---------- */
.filas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.filas li { border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; }
.fila-cabecalho, .fila-rodape { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fila-rodape { margin-top: .75rem; font-size: .9rem; color: var(--fg-fraco); }
.concluido { color: var(--ok); font-weight: 600; }
.barra { height: 10px; background: var(--acento-claro); border-radius: 999px; overflow: hidden; margin: .6rem 0 0; }
.barra.fina { height: 6px; width: 14rem; }
.barra span { display: block; height: 100%; background: var(--acento); }

/* ---------- ficha ---------- */
.ficha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.contador { font-size: .85rem; color: var(--fg-fraco); }
.impacto { font-size: .9rem; color: var(--alerta); background: #fdf6e7;
           border: 1px solid #edd9a8; border-radius: 999px; padding: .25rem .7rem; white-space: nowrap; }
.nucleo { background: var(--acento-claro); border-left: 4px solid var(--acento);
          padding: .75rem 1rem; border-radius: 6px; margin: 0 0 1.25rem; }
.nucleo .rotulo { display: block; font-size: .75rem; text-transform: uppercase;
                  letter-spacing: .04em; color: var(--acento); }
.nucleo strong { font-size: 1.1rem; }
.nucleo .contagem { color: var(--fg-fraco); font-size: .9rem; margin-left: .5rem; }

.variantes { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.variantes th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
                color: var(--fg-fraco); text-align: center; padding: .35rem .3rem; font-weight: 600; }
.variantes th:nth-child(4) { text-align: left; }
.variantes td { padding: .55rem .3rem; border-top: 1px solid var(--borda); text-align: center; }
.variantes td.grafia { text-align: left; word-break: break-word; }
.variantes td.numero { text-align: right; color: var(--fg-fraco); font-variant-numeric: tabular-nums; }
.variantes tr.linha-ativa { background: var(--acento-claro); }
.variantes tr.linha-ativa td.grafia { font-weight: 600; }
.variantes input[type=radio] { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.acoes-lote { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.sem-variantes { color: var(--fg-fraco); margin: 0 0 1.25rem; }

/* ---------- nome canônico ---------- */
.nomes { border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; margin: 0 0 1.25rem; }
.nomes legend { font-weight: 600; padding: 0 .4rem; }
.opcao-nome { display: flex; align-items: center; gap: .6rem; padding: .45rem .2rem;
              flex-wrap: wrap; cursor: pointer; }
.opcao-nome:hover { background: var(--acento-claro); border-radius: 6px; }
.opcao-nome .valor { font-weight: 600; }
.opcao-nome .motivo { color: var(--fg-fraco); font-size: .85rem; }
.opcao-nome kbd { margin-left: auto; }
.campo-nome { flex: 1 1 16rem; padding: .45rem .6rem; font-size: 1rem;
              border: 1px solid var(--borda-forte); border-radius: 6px; }
.nota { color: var(--fg-fraco); font-size: .85rem; margin: .75rem 0 0; }

.contexto { margin-bottom: 1.25rem; }
.contexto summary { cursor: pointer; color: var(--acento); }
.contexto ul { color: var(--fg-fraco); font-size: .9rem; }
.comentario { display: block; margin-bottom: .75rem; }
.comentario textarea { width: 100%; margin-top: .3rem; padding: .5rem; font: inherit;
                       border: 1px solid var(--borda-forte); border-radius: 6px; }
.checkbox { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.ficha-rodape { display: flex; justify-content: space-between; align-items: center;
                gap: 1rem; border-top: 1px solid var(--borda); padding-top: 1rem; }

/* ---------- controles ---------- */
.botao { display: inline-block; padding: .6rem 1.1rem; border-radius: 8px; font: inherit;
         border: 1px solid var(--borda-forte); background: var(--card); color: var(--fg);
         text-decoration: none; cursor: pointer; }
.botao.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.botao:hover { filter: brightness(.96); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--acento);
        text-decoration: underline; cursor: pointer; }
a { color: var(--acento); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
kbd { font: .8rem/1 ui-monospace, monospace; background: #eef3f7; border: 1px solid var(--borda);
      border-bottom-width: 2px; border-radius: 4px; padding: .2rem .4rem; color: var(--fg-fraco); }
label { display: block; margin-bottom: .3rem; }
.painel.estreito input[type=text], .painel.estreito input[type=password] {
  width: 100%; padding: .5rem; font: inherit; margin-bottom: .9rem;
  border: 1px solid var(--borda-forte); border-radius: 6px;
}
.erro { color: var(--erro); font-weight: 600; }

/* ---------- avisos ---------- */
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
         background: var(--fg); color: #fff; padding: .7rem 1.1rem; border-radius: 8px;
         display: flex; gap: .9rem; align-items: center; box-shadow: var(--sombra); z-index: 20; }
.toast .link { color: #9fd0ef; }
dialog { border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.5rem; max-width: 28rem; }
dialog::backdrop { background: rgba(20,32,42,.45); }
dialog dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: center; }
dialog dt { text-align: right; }
dialog dd { margin: 0; }

/* ---------- telas estreitas ---------- */
@media (max-width: 640px) {
  main { padding: 1rem .75rem 3rem; }
  .painel, .ficha { padding: 1rem; }
  .variantes th:nth-child(-n+3) { font-size: .65rem; }
  .ficha-rodape { flex-direction: column-reverse; align-items: stretch; }
  .ficha-rodape .botao { text-align: center; }
}