/* Autentiva — páginas internas: verificação manual (/verificar) e painel (/painel).
   Reaproveita tokens.css e o visual do site. NÃO editar site.css.
   Conteúdo interno usa fonte de sistema; o logo (lockup) mantém a Manrope. */

/* ---------- Barra superior (índigo, marca da plataforma) ---------- */
.topo { background: var(--autentiva-primaria); color: #fff; }
.topo__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0; flex-wrap: wrap;
}
.topo .lockup, .topo .lockup__nome { color: #fff; }
.topo__acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Página de verificação — cartão central ---------- */
.verificar-area {
  display: flex; justify-content: center;
  padding: clamp(32px, 7vw, 80px) 0;
  background: var(--fundo); min-height: 68vh;
  font-family: var(--fonte);
}
.cartao {
  width: min(100%, 480px);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-gra);
  box-shadow: var(--sombra-2);
  padding: clamp(24px, 5vw, 40px);
}
.cartao h1 { font-size: var(--t-h1); margin: 0 0 8px; letter-spacing: -0.02em; }
.cartao .ajuda { color: var(--texto-suave); margin: 0 0 var(--e-6); }

.rotulo {
  display: block; font-size: var(--t-rotulo);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); margin: 0 0 8px;
}
.campo-codigo {
  width: 100%; min-height: 56px; font-size: 18px;
  padding: 0 16px; border: 1px solid var(--borda);
  border-radius: var(--r-med);
  background: var(--superficie); color: var(--texto);
  font-family: var(--fonte-mono); letter-spacing: .04em;
}
.campo-codigo::placeholder { color: var(--texto-suave); letter-spacing: .04em; }
.campo-codigo:focus-visible { outline: 3px solid var(--autentiva-primaria); outline-offset: 1px; }

.erro { color: var(--status-invalido); margin: 12px 0 0; font-weight: 600; }

.btn-verificar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; margin-top: 16px;
  border: 1px solid transparent; border-radius: var(--r-med);
  background: var(--autentiva-primaria); color: #fff;
  font-family: var(--fonte); font-weight: 700; font-size: var(--t-h3);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.btn-verificar:hover { background: var(--autentiva-primaria-escura); transform: translateY(-1px); }

/* ---------- Painel interno ---------- */
.painel {
  padding: clamp(32px, 6vw, 64px) 0;
  background: var(--fundo); min-height: 60vh;
  font-family: var(--fonte);
}
.painel h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 12px 0 0; letter-spacing: -0.02em; }

.metricas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e-5); margin-top: var(--e-8);
}
.metrica {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-gra); padding: var(--e-6);
  border-top: 3px solid var(--autentiva-primaria);
}
.metrica__label {
  font-size: var(--t-rotulo); text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-suave); margin: 0;
}
.metrica__valor {
  font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800;
  letter-spacing: -0.02em; margin: 8px 0 0; color: var(--texto);
}

/* Barra de cota de leituras */
.cota {
  margin-top: var(--e-8);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-gra); padding: var(--e-6);
}
.cota__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cota__titulo { font-weight: 700; margin: 0; }
.cota__num { color: var(--texto-suave); font-size: var(--t-peq); }
.cota__barra {
  margin-top: 12px; height: 12px; border-radius: var(--r-pill);
  background: var(--n-50); overflow: hidden;
}
.cota__preenchida { height: 100%; background: var(--autentiva-primaria); border-radius: var(--r-pill); }
.cota--estourada .cota__preenchida { background: var(--status-suspeito-forte); }

.painel__acoes { margin-top: var(--e-8); }

@media (max-width: 900px) {
  .metricas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .metricas { grid-template-columns: 1fr; }
}