:root {
  color-scheme: light;
  --verde-petroleo: #004C45;
  --verde-folha: #43B02A;
  --verde-vivo: #00AD50;
  --verde-mata: #173F35;
  --verde-escuro: #00491E;
  --fundo: #EEF3F1;
  --superficie: #FFFFFF;
  --texto: #14241F;
  --texto-suave: #4E625B;
  --borda: #C9D6D1;
  --destaque: var(--verde-petroleo);
  --destaque-texto: #FFFFFF;
  --erro: #B42318;
  --erro-fundo: #FDECEA;
  --ok: #0B6B3A;
  --foco: #00AD50;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #0E1C18;
    --superficie: #162823;
    --texto: #E4EEEA;
    --texto-suave: #A3B8B0;
    --borda: #2C463E;
    --destaque: #00AD50;
    --destaque-texto: #06130F;
    --erro: #FF9B8F;
    --erro-fundo: #3A1714;
    --ok: #6FD49A;
    --foco: #43B02A;
  }
}

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

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

[hidden] { display: none !important; }

.faixa { display: flex; height: 6px; }
.faixa span { flex: 1; }
.faixa span:nth-child(1) { background: var(--verde-petroleo); }
.faixa span:nth-child(2) { background: var(--verde-folha); }
.faixa span:nth-child(3) { background: var(--verde-vivo); }
.faixa span:nth-child(4) { background: var(--verde-mata); }
.faixa span:nth-child(5) { background: var(--verde-escuro); }

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

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 2rem;
}

.cartao-centro {
  max-width: 420px;
  margin: 8vh auto 0;
}

.cartao h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.marca {
  border-left: 4px solid var(--verde-vivo);
  padding-left: 0.9rem;
  margin-bottom: 1.75rem;
}

.marca h1 { margin: 0.1rem 0; font-size: 1.75rem; color: var(--destaque); }
.marca-orgao, .marca-setor { margin: 0; color: var(--texto-suave); font-size: 0.95rem; }

form { display: flex; flex-direction: column; }

label { font-weight: 600; margin: 0.9rem 0 0.35rem; }

input {
  font: inherit;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo);
  color: var(--texto);
}

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

#mfa-codigo, #mfa-cadastro-codigo {
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  text-align: center;
}

.botao {
  font: inherit;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.botao:disabled { opacity: 0.55; cursor: not-allowed; }

.botao-principal {
  margin-top: 1.5rem;
  background: var(--destaque);
  color: var(--destaque-texto);
}

.botao-principal:hover:not(:disabled) { filter: brightness(1.1); }

.botao-secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--borda);
}

.botao-secundario:hover { border-color: var(--destaque); }

.botao-discreto {
  margin-top: 1rem;
  width: 100%;
  background: transparent;
  color: var(--texto-suave);
}

.mensagem { min-height: 1.5rem; margin: 0.75rem 0 0; font-size: 0.95rem; }
.mensagem-erro { color: var(--erro); }
.mensagem-ok { color: var(--ok); }

.aguarde { margin: 0; color: var(--texto-suave); text-align: center; }

.qr {
  display: block;
  margin: 1.25rem auto;
  background: #FFFFFF;
  padding: 8px;
  border-radius: 6px;
}

.segredo-rotulo { margin: 0; font-size: 0.9rem; color: var(--texto-suave); }

.segredo {
  margin: 0.25rem 0 0;
  font-family: Consolas, "Courier New", monospace;
  word-break: break-all;
  user-select: all;
}

.painel-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--destaque);
  margin-bottom: 1.5rem;
}

.painel-titulo { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--destaque); }
.painel-usuario { margin: 0.2rem 0 0; color: var(--texto-suave); }

.selo {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--verde-folha);
  color: #06130F;
  font-size: 0.8rem;
  font-weight: 600;
}

.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.bloco h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }

.bloco-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.vazio { margin: 0; color: var(--texto-suave); }

.tabela-rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }

th, td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

th { color: var(--texto-suave); font-weight: 600; }

@media (max-width: 520px) {
  .cartao { padding: 1.5rem 1.25rem; }
  .cartao-centro { margin-top: 3vh; }
  .painel-topo { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}