/* Validador de Certificados — CSS próprio, mobile first, contraste AA. */

:root {
  --fundo: #f3f5f4;
  --superficie: #ffffff;
  --texto: #1b2420;
  --texto-suave: #4a5651;
  --borda: #cfd6d2;
  --primaria: #0b5d4b;
  --primaria-escura: #08473a;
  --foco: #1a56db;

  --valido-fundo: #e5f3ea;
  --valido-borda: #2e7a4d;
  --valido-texto: #12462a;
  --revogado-fundo: #fff2d4;
  --revogado-borda: #a8701a;
  --revogado-texto: #573a00;
  --invalido-fundo: #fce9e8;
  --invalido-borda: #b3261e;
  --invalido-texto: #761a14;

  --raio: 10px;
  --sombra: 0 1px 2px rgb(16 24 20 / 6%), 0 4px 16px rgb(16 24 20 / 6%);
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a {
  color: var(--primaria);
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Link "pular para o conteúdo": visível só ao receber foco pelo teclado. */
.pular {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--superficie);
  border-radius: var(--raio);
}
.pular:focus {
  top: 0.5rem;
}

/* Cabeçalho */
.topo {
  background: var(--primaria);
  color: #fff;
}
.topo__interno {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.marca__icone {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentcolor;
}

/* Conteúdo */
.conteudo {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}
.conteudo:focus {
  outline: none;
}

h1,
h2 {
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.1875rem;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem 1rem;
  margin-bottom: 1rem;
}
.cartao--secundario {
  box-shadow: none;
}

.apoio {
  color: var(--texto-suave);
  margin: 0 0 1rem;
}

/* Formulários */
.formulario {
  display: grid;
  gap: 0.5rem;
}
.rotulo {
  font-weight: 600;
}
.campo {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 2px solid #8a9690;
  border-radius: var(--raio);
  padding: 0.75rem 0.875rem;
}
.campo--codigo {
  font-size: 1.375rem;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.campo--codigo::placeholder {
  color: #6b7671;
  letter-spacing: 0.08em;
}
.campo--arquivo {
  padding: 0.625rem;
  font-size: 1rem;
}
.campo:focus-visible {
  border-color: var(--foco);
}
.ajuda {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.botao {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  margin-top: 0.5rem;
  font: inherit;
  font-weight: 650;
  color: #fff;
  background: var(--primaria);
  border: 2px solid var(--primaria);
  border-radius: var(--raio);
  cursor: pointer;
  text-decoration: none;
}
.botao:hover {
  background: var(--primaria-escura);
  border-color: var(--primaria-escura);
}
.botao:disabled {
  opacity: 0.65;
  cursor: progress;
}
.botao--secundario {
  color: var(--primaria);
  background: var(--superficie);
}
.botao--secundario:hover {
  color: #fff;
}

/* Resultado */
.area-resultado:not(:empty) {
  margin-top: 1.25rem;
}

.resultado {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid;
  border-radius: var(--raio);
}
.resultado__icone {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  fill: currentcolor;
}
.resultado__corpo {
  min-width: 0;
  flex: 1;
}
.resultado__corpo p {
  margin: 0 0 0.5rem;
}
.resultado__titulo {
  font-size: 1.25rem;
  margin: 0.15rem 0 0.25rem;
}

.resultado--valido {
  background: var(--valido-fundo);
  border-color: var(--valido-borda);
  color: var(--valido-texto);
}
.resultado--revogado {
  background: var(--revogado-fundo);
  border-color: var(--revogado-borda);
  color: var(--revogado-texto);
}
.resultado--invalido {
  background: var(--invalido-fundo);
  border-color: var(--invalido-borda);
  color: var(--invalido-texto);
}

.dados {
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.5rem;
  color: var(--texto);
}
.dados div {
  background: rgb(255 255 255 / 70%);
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
}
.dados dt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.dados dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.dados--revogacao {
  margin-bottom: 0.75rem;
}
.lista-modulos {
  margin: 0;
  padding-left: 1.125rem;
}
.codigo {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
}

.voltar {
  margin: 1.25rem 0 0;
}

/* Rodapé */
.rodape {
  color: var(--texto-suave);
  font-size: 0.9375rem;
  padding: 0 0 2rem;
}
.rodape p {
  margin: 0 0 0.25rem;
}

/* Telas maiores */
@media (min-width: 40rem) {
  h1 {
    font-size: 1.75rem;
  }
  .cartao {
    padding: 1.75rem 1.75rem;
  }
  .formulario {
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
  }
  .formulario .rotulo,
  .formulario .ajuda {
    grid-column: 1 / -1;
  }
  .formulario .ajuda {
    grid-row: 3;
  }
  .formulario .botao {
    margin-top: 0;
    grid-row: 2;
    grid-column: 2;
  }
  .dados {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .botao {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
}

/* ---------------------------------------------------------------------------
   Painel administrativo
   --------------------------------------------------------------------------- */

.container--largo {
  max-width: 72rem;
}

.topo__painel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}
.menu a,
.menu .link-botao {
  color: #fff;
  font-weight: 600;
}
.menu__sair {
  margin: 0;
}

.link-botao {
  padding: 0.25rem 0;
  font: inherit;
  color: var(--primaria);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  background: none;
  border: 0;
  cursor: pointer;
}

.identidade {
  margin: 0 0 0.75rem;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

.cartao--estreito {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* Formulário em coluna única (sobrepõe o layout do campo de código em telas largas). */
@media (min-width: 40rem) {
  .formulario--empilhado {
    grid-template-columns: 1fr;
  }
  .formulario--empilhado .botao,
  .formulario--empilhado .ajuda,
  .formulario--empilhado .rotulo {
    grid-row: auto;
    grid-column: auto;
  }
  .formulario--empilhado .botao {
    margin-top: 0.75rem;
    justify-self: start;
  }
}
.formulario--empilhado .rotulo:not(:first-of-type) {
  margin-top: 0.5rem;
}

.aviso {
  padding: 0.75rem 1rem;
  border: 2px solid;
  border-radius: var(--raio);
  margin: 0 0 1rem;
}
.aviso--erro {
  background: var(--invalido-fundo);
  border-color: var(--invalido-borda);
  color: var(--invalido-texto);
}
.aviso--sucesso {
  background: var(--valido-fundo);
  border-color: var(--valido-borda);
  color: var(--valido-texto);
}

.passos {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}
.passos li {
  margin-bottom: 0.75rem;
}
.qr {
  display: block;
  width: 15rem;
  max-width: 100%;
  height: auto;
  margin: 0.75rem 0;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.segredo {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.filtro .rotulo {
  width: 100%;
}
.filtro .campo {
  width: auto;
  min-width: 14rem;
  padding: 0.5rem 0.75rem;
}
.filtro .botao {
  margin-top: 0;
  min-height: 2.75rem;
}

.tabela-rolagem {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.tabela th,
.tabela td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borda);
}
.tabela thead th {
  background: var(--fundo);
  font-weight: 650;
  white-space: nowrap;
}
.tabela tbody tr:last-child td {
  border-bottom: 0;
}
.tabela form {
  margin: 0;
}
.quebra {
  overflow-wrap: anywhere;
  max-width: 22rem;
}

.paginacao {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Certificados no painel */

.cartao--medio {
  max-width: 48rem;
}
.cartao--perigo {
  border-color: var(--invalido-borda);
}

.cabecalho-secao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.cabecalho-secao h1 {
  margin: 0;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.75rem 0;
}
.acoes .botao {
  margin-top: 0;
}
.acoes form {
  margin: 0;
}
.acoes--rodape {
  margin-top: 1.25rem;
}

.trilha {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.selo {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 1.5px solid;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.selo--valido {
  background: var(--valido-fundo);
  border-color: var(--valido-borda);
  color: var(--valido-texto);
}
.selo--revogado {
  background: var(--revogado-fundo);
  border-color: var(--revogado-borda);
  color: var(--revogado-texto);
}

.campo--erro {
  border-color: var(--invalido-borda);
}
.erro-campo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--invalido-texto);
}
.campo--link {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: 0.9375rem;
}
textarea.campo {
  resize: vertical;
}

.dados--painel div {
  background: var(--fundo);
}

.botao--perigo {
  background: var(--invalido-borda);
  border-color: var(--invalido-borda);
}
.botao--perigo:hover {
  background: var(--invalido-texto);
  border-color: var(--invalido-texto);
}

.lista-erros {
  margin: 0;
  padding-left: 1.1rem;
}

/* Modelos de certificado */

.grupo-campo {
  display: grid;
  gap: 0.375rem;
}
.grupo {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem 1rem;
  border: 1px solid #c9d2cd;
  border-radius: var(--raio);
}
.grupo legend {
  padding: 0 0.375rem;
  font-weight: 650;
}
.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1rem;
}
.caixa {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
  font-weight: 600;
}
.caixa input {
  width: 1.25rem;
  height: 1.25rem;
}
.lista-campos,
.lista-guias {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.25rem;
}
.lista-campos code,
.ajuda code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
}