:root {
  --petroleo: #09212C; --azul: #2A78A7; --dourado: #EABA60; --areia: #F4F3EE; --faixa: #CAE8F5;
  --verde: #4B5726; --verde-fundo: #E6ECD6; --vermelho: #D63D26; --vermelho-fundo: #F8E1DC;
  --cinza: #6B7378; --linha: #E1E0D7; --branco: #FFFFFF;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--areia); color: var(--petroleo); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
a { color: var(--azul); }
code { font-family: Consolas, "Courier New", monospace; font-size: .9em; background: var(--branco); padding: 0 .25em; border-radius: 3px; }
h1 { font-size: 1.6rem; margin: 0; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }

.topo { background: var(--petroleo); border-bottom: 4px solid var(--dourado); color: var(--branco); }
.topo-in { max-width: 1120px; margin: 0 auto; padding: .8rem 1rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.marca { color: var(--branco); text-decoration: none; font-weight: 700; font-size: 1.1rem; display: flex; flex-direction: column; }
.marca span { font-weight: 400; font-size: .75rem; color: var(--faixa); }
.abas { display: flex; gap: .25rem; flex-wrap: wrap; }
.abas a { color: var(--faixa); text-decoration: none; padding: .45rem .8rem; border-radius: 6px; }
.abas a.ativa { background: var(--azul); color: var(--branco); }
.sair { margin-left: auto; display: flex; gap: .6rem; align-items: center; font-size: .9rem; }
.sair button { background: transparent; color: var(--branco); border: 1px solid var(--faixa); border-radius: 6px; padding: .3rem .7rem; cursor: pointer; }

.pagina { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; padding: 1.2rem 1.4rem; margin: 1rem 0; }
.cartao h2 { margin-top: 0; }
.apoio { color: var(--cinza); margin: .2rem 0 1rem; }
.botao { display: inline-block; background: var(--azul); color: var(--branco); border: 0; border-radius: 8px; padding: .65rem 1.2rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.botao:disabled { opacity: .6; cursor: wait; }
.aviso { background: var(--faixa); border-left: 4px solid var(--dourado); padding: .7rem 1rem; border-radius: 6px; }
.aviso.ruim { background: var(--vermelho-fundo); border-left-color: var(--vermelho); }

.entrar { max-width: 420px; margin: 3rem auto; }
.entrar label { display: block; margin-bottom: .9rem; font-weight: 600; }
.entrar input { display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: inherit; border: 1px solid var(--linha); border-radius: 6px; }

.cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sobre { margin: 0; color: var(--azul); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.periodo { display: flex; flex-direction: column; font-size: .85rem; color: var(--cinza); }
.periodo select { font: inherit; padding: .45rem .6rem; border-radius: 6px; border: 1px solid var(--linha); margin-top: .2rem; color: var(--petroleo); }

.progresso { margin: 1.2rem 0; }
.progresso .numero { margin-bottom: .35rem; }
.progresso strong { font-size: 1.4rem; }
.barra { height: 10px; background: var(--linha); border-radius: 5px; overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; background: var(--verde); }

.solta { display: block; border: 2px dashed var(--azul); border-radius: 10px; padding: 1.6rem 1rem; text-align: center; cursor: pointer;
  background: #F7FBFD; margin-bottom: 1rem; }
.solta.sobre-ela { background: var(--faixa); }
.solta input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.solta-texto { font-size: 1.05rem; }
.solta-lista { display: block; margin-top: .6rem; color: var(--cinza); font-size: .9rem; }

.itens, .resultados { list-style: none; padding: 0; margin: 0; }
.item { background: var(--branco); border: 1px solid var(--linha); border-left: 5px solid var(--linha); border-radius: 8px; padding: .8rem 1rem; margin-bottom: .6rem; }
.item.aprovado { border-left-color: var(--verde); }
.item.reprovado { border-left-color: var(--vermelho); }
.item-topo { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.cod { font-weight: 700; color: var(--azul); min-width: 4.2rem; }
.info { flex: 1; min-width: 220px; }
.chip { font-size: .8rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: var(--linha); color: var(--petroleo); }
.chip.aprovado { background: var(--verde-fundo); color: var(--verde); }
.chip.reprovado { background: var(--vermelho-fundo); color: var(--vermelho); }
.prova, .motivo { margin: .45rem 0 0 5rem; font-size: .9rem; }
.motivo { color: var(--vermelho); }
details { margin: .45rem 0 0 5rem; font-size: .9rem; }
summary { cursor: pointer; color: var(--azul); }
dl { display: grid; grid-template-columns: 8rem 1fr; gap: .3rem .8rem; margin: .6rem 0 0; }
dt { font-weight: 600; color: var(--cinza); }
dd { margin: 0; }
.checagens { list-style: none; padding: 0; margin: .5rem 0 0 5rem; font-size: .9rem; }
.checagens li { margin: .15rem 0; }
.checagens .falha { color: var(--vermelho); }
.marca-checagem { display: inline-block; width: 1.1rem; font-weight: 700; }
.checagens .ok .marca-checagem { color: var(--verde); }
.simples { margin: 0; padding-left: 1.2rem; }

.rodape { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linha); color: var(--cinza); font-size: .85rem; }
.tabela { overflow-x: auto; background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; margin-top: 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { background: var(--petroleo); color: var(--branco); font-weight: 600; }
tr.reprovado td:nth-child(5) { color: var(--vermelho); font-weight: 600; }
tr.aprovado td:nth-child(5) { color: var(--verde); font-weight: 600; }

@media (max-width: 640px) {
  .prova, .motivo, details, .checagens { margin-left: 0; }
  .sair { margin-left: 0; }
  dl { grid-template-columns: 1fr; }
}