/* ============================================================================
   SGCP — Páginas de verificação interna (rotas /_verificacao/*, não fazem
   parte do produto — conferência manual de paridade visual com o protótipo).
   Extraído de style="" inline colado na portagem do protótipo — mesmas
   declarações, sem mudança visual. Cores/raios/sombras sempre via tokens
   (tokens.css). Convenção BEM igual à de shell.css/componentes.css/auth.css.
   ============================================================================ */

/* ---- componentes.html.twig ---- */
.sgcp-verif-linha {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.sgcp-verif-bloco {
  margin-bottom: 20px;
}

.sgcp-verif-bloco--mb-14 {
  margin-bottom: 14px;
}

.sgcp-verif-bloco--estreito {
  max-width: 420px;
}

.sgcp-verif-td {
  padding: 10px 12px;
}

/* ---- fundacao.html.twig ---- */
.sgcp-verif-tokens-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sgcp-verif-swatch {
  border-radius: var(--r-md);
  padding: 16px;
}

.sgcp-verif-swatch--surface {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}

.sgcp-verif-swatch--brand {
  background: var(--brand-bg);
  color: var(--on-brand);
}

.sgcp-verif-swatch--critico {
  background: var(--sem-crit-bg);
  color: var(--sem-crit-fg);
  border: 1px solid var(--sem-crit-bd);
}

.sgcp-verif-swatch--atencao {
  background: var(--sem-aten-bg);
  color: var(--sem-aten-fg);
  border: 1px solid var(--sem-aten-bd);
}

.sgcp-verif-swatch--monitorar {
  background: var(--sem-mon-bg);
  color: var(--sem-mon-fg);
  border: 1px solid var(--sem-mon-bd);
}

.sgcp-verif-swatch--confortavel {
  background: var(--sem-conf-bg);
  color: var(--sem-conf-fg);
  border: 1px solid var(--sem-conf-bd);
}

.sgcp-verif-mt-16 {
  margin-top: 16px;
}

.sgcp-verif-btn {
  margin-top: 16px;
  background: var(--surface);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}

.sgcp-verif-btn-brand {
  background: var(--brand-bg);
  color: var(--on-brand);
  border: none;
  border-radius: var(--r-md);
  padding: 8px 16px;
  cursor: pointer;
}

.sgcp-verif-modal-texto {
  margin: 0 0 12px;
  color: var(--text-2);
  font: 400 13.5px/1.5 var(--font);
}

.sgcp-verif-modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Duplica sgcp-processos-btn-modal (processos.css) de propósito — evita
   acoplar esta página de verificação a uma classe nomeada por outro
   domínio. Candidato a virar um par de classes genéricas em paginas.css
   (ex.: sgcp-btn-modal/--primario/--secundario), já que o rodapé
   Cancelar/Confirmar de modal se repete em vários domínios. */
.sgcp-verif-btn-modal {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  font: 600 13px var(--font);
  cursor: pointer;
}

.sgcp-verif-btn-modal--secundario {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-1);
}

.sgcp-verif-btn-modal--primario {
  border: none;
  background: var(--brand-bg);
  color: var(--on-brand);
}