:root {
  --tinta: #123830;
  --tinta-escura: #0C2620;
  --papel: #FAF7F0;
  --folha: #FFFFFF;
  --grafite: #21201B;
  --cinza: #6E6A5E;
  --linha: #E3DDCE;
  --brass: #B98A2F;
  --brass-claro: #E9D9B4;
  --verde-ok: #2F7D4F;
  --vermelho: #A23B2E;
  --neutro: #6B7280;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: var(--grafite);
  background: var(--papel);
  line-height: 1.5;
}
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 650; color: var(--tinta); margin: 0 0 .35rem; }
h1 { font-size: 1.7rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; }
a { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.4rem;
  background: var(--tinta); color: var(--papel);
  border-bottom: 3px solid var(--brass);
}
.marca { display: flex; align-items: center; gap: .7rem; color: var(--papel); text-decoration: none; }
.marca strong { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; display: block; line-height: 1.15; }
.marca em { font-style: normal; font-size: .72rem; opacity: .75; display: block; }
.topo nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.topo nav a { color: var(--papel); text-decoration: none; font-size: .88rem; opacity: .9; }
.topo nav a:hover { opacity: 1; text-decoration: underline; }
.topo nav .sair { border: 1px solid rgba(250,247,240,.4); padding: .25rem .7rem; border-radius: 3px; }

main { max-width: 1080px; margin: 0 auto; padding: 1.6rem 1.4rem 3rem; }
main.centrado { display: grid; place-items: center; min-height: 78vh; }
.rodape { text-align: center; font-size: .75rem; color: var(--cinza); padding: 1rem; border-top: 1px solid var(--linha); }

/* ---------- botões e formulários ---------- */
.botao {
  display: inline-block; border: 1px solid var(--tinta); background: var(--folha);
  color: var(--tinta); padding: .42rem .9rem; border-radius: 3px;
  font: inherit; font-size: .86rem; cursor: pointer; text-decoration: none;
}
.botao:hover { background: var(--brass-claro); }
.botao.primario { background: var(--tinta); color: var(--papel); }
.botao.primario:hover { background: var(--tinta-escura); }
.botao.perigo { border-color: var(--vermelho); color: var(--vermelho); }
.botao.perigo:hover { background: #F6E4E1; }
.botao.largo { width: 100%; text-align: center; }
label { display: block; font-size: .84rem; font-weight: 600; color: var(--tinta); margin-bottom: .8rem; }
label.inline { display: flex; gap: .5rem; align-items: center; }
input:not([type=radio]):not([type=checkbox]), textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem;
  border: 1px solid var(--linha); border-radius: 3px; background: var(--folha);
  font: inherit; font-size: .9rem;
}
textarea { resize: vertical; }
.alerta { padding: .6rem .8rem; border-radius: 3px; font-size: .87rem; }
.alerta.erro { background: #F6E4E1; color: var(--vermelho); border: 1px solid #E4C3BD; }
.alerta.ok { background: #E4EFE7; color: var(--verde-ok); border: 1px solid #C4DCCB; }

/* ---------- login ---------- */
.cartao-login {
  width: min(380px, 100%); background: var(--folha); padding: 2.2rem 2rem;
  border: 1px solid var(--linha); border-top: 4px solid var(--brass);
  text-align: center; box-shadow: 0 12px 30px rgba(18,56,48,.07);
}
.cartao-login h1 { margin-top: .8rem; }
.cartao-login form { text-align: left; margin-top: 1.4rem; }
.sub { color: var(--cinza); font-size: .87rem; margin: .1rem 0 0; }

/* ---------- lista de avaliações ---------- */
.cabec-pagina { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.vazio { background: var(--folha); border: 1px dashed var(--linha); padding: 2.4rem; text-align: center; color: var(--cinza); }
.grelha-avaliacoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }
.cartao-aval { background: var(--folha); border: 1px solid var(--linha); padding: 1rem 1.1rem; }
.cartao-aval header { display: flex; justify-content: space-between; gap: .6rem; font-size: .74rem; }
.cartao-aval .codigo { color: var(--cinza); text-transform: uppercase; letter-spacing: .04em; }
.estado { font-weight: 600; }
.estado.em_curso { color: var(--brass); }
.estado.concluida { color: var(--verde-ok); }
.cartao-aval h2 { margin: .35rem 0 .6rem; }
.cartao-aval h2 a { text-decoration: none; }
.cartao-aval h2 a:hover { text-decoration: underline; }
.progresso { height: 6px; background: var(--linha); border-radius: 3px; overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--tinta); }
.cartao-aval .meta { font-size: .8rem; color: var(--cinza); margin: .5rem 0 .8rem; }
.cartao-aval footer { display: flex; gap: .5rem; flex-wrap: wrap; }
dialog { border: 1px solid var(--linha); border-top: 4px solid var(--brass); padding: 1.6rem; width: min(460px, 92vw); background: var(--folha); }
dialog::backdrop { background: rgba(18,56,48,.45); }
dialog .acoes { display: flex; justify-content: end; gap: .6rem; margin-top: .4rem; }

/* ---------- formulário de avaliação ---------- */
main.com-rail { display: grid; grid-template-columns: 280px 1fr; gap: 1.6rem; max-width: 1280px; }
.rail { position: sticky; top: 1rem; align-self: start; background: var(--folha); border: 1px solid var(--linha); padding: 1rem; }
.rail-titulo { font-family: "Fraunces", Georgia, serif; font-weight: 650; color: var(--tinta); margin: 0 0 .7rem; font-size: .95rem; }
.rail ol { list-style: none; margin: 0 0 1rem; padding: 0; }
.rail li a { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .45rem; align-items: baseline; padding: .42rem .5rem; text-decoration: none; font-size: .8rem; border-left: 3px solid transparent; }
.rail li a:hover { background: var(--papel); }
.rail li.activo a { border-left-color: var(--brass); background: var(--papel); font-weight: 600; }
.rail li.completo .p { color: var(--verde-ok); }
.rail .n { color: var(--brass); }
.rail .p { font-size: .72rem; color: var(--cinza); }
.folha { min-width: 0; }
.cabec-indicador { margin-bottom: 1.2rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 600; color: var(--brass); margin: 0; }
#estado-gravacao { transition: color .2s; }
#estado-gravacao.gravando { color: var(--brass); }
#estado-gravacao.erro { color: var(--vermelho); font-weight: 600; }

.padrao { background: var(--folha); border: 1px solid var(--linha); margin-bottom: 1.2rem; }
.padrao > header { padding: .9rem 1.1rem; border-bottom: 1px solid var(--linha); background: linear-gradient(to right, var(--papel), var(--folha)); }
.selo-codigo { color: var(--brass); margin-right: .3rem; }
.instrucao { margin: .3rem 0 0; font-size: .82rem; color: var(--cinza); }
.grupo { margin: .9rem 1.1rem 0; font-size: .8rem; font-weight: 600; color: var(--tinta); text-transform: uppercase; letter-spacing: .03em; }
.criterio { padding: .8rem 1.1rem; border-bottom: 1px solid var(--linha); }
.criterio:last-child { border-bottom: 0; }
.criterio-linha { display: flex; gap: 1rem; align-items: start; justify-content: space-between; flex-wrap: wrap; }
.criterio .texto { margin: 0; flex: 1 1 380px; }
.criterio .texto .mono { color: var(--brass); font-size: .82rem; }
.opcoes { display: flex; gap: .35rem; }
.op input { position: absolute; opacity: 0; }
.op span {
  display: inline-block; padding: .3rem .75rem; border: 1px solid var(--linha);
  border-radius: 3px; font-size: .8rem; cursor: pointer; background: var(--folha);
  user-select: none;
}
.op input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 1px; }
.op-1 input:checked + span { background: var(--verde-ok); border-color: var(--verde-ok); color: #fff; }
.op-2 input:checked + span { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.op-3 input:checked + span { background: var(--neutro); border-color: var(--neutro); color: #fff; }
.guia { margin: .5rem 0 0; font-size: .8rem; }
.guia summary { cursor: pointer; color: var(--brass); font-weight: 600; }
.guia p { color: var(--cinza); margin: .35rem 0 0; white-space: pre-line; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.campos textarea { margin-top: 0; font-size: .82rem; min-height: 2.2rem; }
.paginacao { display: flex; justify-content: space-between; margin-top: 1.4rem; }

/* ---------- resultados ---------- */
.cabec-resultados { display: flex; justify-content: space-between; align-items: start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.acoes-resultados { display: flex; gap: .5rem; flex-wrap: wrap; }
.aviso-texto { color: var(--vermelho); }
.selo-bloco { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; align-items: center; background: var(--folha); border: 1px solid var(--linha); border-top: 4px solid var(--brass); padding: 1.6rem; margin-bottom: 1.8rem; }
.selo { margin: 0; text-align: center; }
.selo svg { width: 200px; height: 200px; }
.selo.nivel-A { color: var(--verde-ok); }
.selo.nivel-B { color: var(--brass); }
.selo.nivel-C { color: #C07A18; }
.selo.nivel-D { color: var(--vermelho); }
.selo.nivel-X { color: var(--neutro); }
.selo-valor { font: 600 30px "IBM Plex Mono", monospace; fill: var(--tinta); }
.selo-nivel { font: 600 13px "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; fill: currentColor; }
.selo figcaption { margin-top: .6rem; }
.selo figcaption strong { display: block; font-family: "Fraunces", Georgia, serif; color: var(--tinta); }
.selo figcaption span { font-size: .8rem; color: var(--cinza); }
.escala ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.escala li { display: grid; grid-template-columns: 2rem 5.4rem 14rem 1fr; gap: .8rem; padding: .45rem .6rem; font-size: .84rem; border-left: 3px solid transparent; align-items: baseline; }
.escala li.actual { background: var(--papel); border-left-color: var(--brass); font-weight: 600; }
.escala .nivel { color: var(--brass); }
.escala .acred { color: var(--cinza); font-size: .78rem; }
.titulo-seccao { margin: 1.6rem 0 .8rem; }
.barras { background: var(--folha); border: 1px solid var(--linha); padding: 1rem 1.2rem; }
.barra-linha { display: grid; grid-template-columns: minmax(180px, 320px) 1fr 4.6rem minmax(110px, 200px); gap: .9rem; align-items: center; padding: .4rem 0; font-size: .84rem; }
.barra-linha .rotulo .mono { color: var(--brass); margin-right: .25rem; }
.barra { height: 10px; background: var(--linha); border-radius: 2px; overflow: hidden; }
.barra i { display: block; height: 100%; }
.barra .nivel-A { background: var(--verde-ok); }
.barra .nivel-B { background: var(--brass); }
.barra .nivel-C { background: #C07A18; }
.barra .nivel-D { background: var(--vermelho); }
.barra .nivel-X { background: var(--neutro); }
.barra-linha .valor { text-align: right; }
.barra-linha .classe { color: var(--cinza); font-size: .78rem; }
.tabela { width: 100%; border-collapse: collapse; background: var(--folha); border: 1px solid var(--linha); font-size: .82rem; }
.tabela th { background: var(--tinta); color: var(--papel); text-align: left; padding: .5rem .6rem; font-weight: 600; }
.tabela td { padding: .45rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela td.c { text-align: center; }
.tabela .desc { max-width: 480px; }
.tabela tr.sep td { background: var(--papel); font-weight: 600; color: var(--tinta); font-family: "Fraunces", Georgia, serif; }
.tabela .mau { color: var(--vermelho); font-weight: 600; }
.tabela .pend { color: var(--brass); font-weight: 600; }
.formulario-estreito { max-width: 560px; }
.formulario-estreito h2 { margin-top: 1.6rem; }

@media (max-width: 920px) {
  main.com-rail { grid-template-columns: 1fr; }
  .rail { position: static; }
  .selo-bloco { grid-template-columns: 1fr; }
  .escala li { grid-template-columns: 2rem 5rem 1fr; }
  .escala .acred { grid-column: 2 / -1; }
  .barra-linha { grid-template-columns: 1fr 4.4rem; }
  .barra-linha .rotulo { grid-column: 1 / -1; }
  .barra-linha .classe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}