/* ============================================================================
   SGCP — Páginas de erro (erro/_layout.html.twig, exceções do TwigBundle:
   403, 404, 500). 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.
   ============================================================================ */

.sgcp-erro-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.sgcp-erro-card {
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 480px;
  width: 100%;
}

.sgcp-erro-logo {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--brand-bg);
  color: var(--on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px var(--font);
  margin-bottom: 8px;
}

.sgcp-erro-icone {
  color: var(--border-strong);
}

.sgcp-erro-icone--perigo {
  color: var(--danger);
}

.sgcp-erro-titulo {
  font: 600 18px var(--font);
  color: var(--text-1);
}

.sgcp-erro-texto {
  font: 400 13.5px/1.5 var(--font);
  color: var(--text-3);
  max-width: 420px;
}

.sgcp-erro-acoes {
  display: flex;
  gap: 10px;
}

.sgcp-erro-btn-primario {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--brand-bg);
  color: var(--on-brand);
  font: 600 13px var(--font);
  text-decoration: none;
}

.sgcp-erro-btn-primario:hover {
  background: var(--brand-bg-hover);
}

.sgcp-erro-btn-primario:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.sgcp-erro-btn-secundario {
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-1);
  font: 600 13px var(--font);
  cursor: pointer;
}