/* ============================================================================
   SGCP — Layout de autenticação (painel institucional + formulário).
   Fidelidade visual a reference/prototipo/Login.dc.html.
   --painel/--painel-2 só existem neste fluxo (não fazem parte de tokens.css
   geral) — extraídos 1:1 do <style> embutido em Login.dc.html.
   ============================================================================ */
html {
  --painel: #272E6E;
  --painel-2: #1F2455;
}

html[data-theme="dark"] {
  --painel: #191D45;
  --painel-2: #12152F;
}

.sgcp-auth {
  display: grid;
  grid-template-columns: minmax(340px, 44%) 1fr;
  min-height: 100vh;
}

.sgcp-auth__painel {
  background: linear-gradient(180deg, var(--painel), var(--painel-2));
  color: #EDEFFB;
  display: flex;
  flex-direction: column;
  padding: 44px 48px;
  position: relative;
  overflow: hidden;
}

.sgcp-auth__marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sgcp-auth__logo {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 14px var(--font);
  flex: none;
}

.sgcp-auth__marca-titulo {
  display: block;
  font: 700 16px/1.2 var(--font);
}

.sgcp-auth__marca-sub {
  display: block;
  font: 400 11.5px var(--font);
  opacity: .7;
}

.sgcp-auth__destaque {
  margin: auto 0;
  max-width: 400px;
}

.sgcp-auth__destaque h1 {
  font: 700 30px/1.25 var(--font);
  margin: 0 0 14px;
}

.sgcp-auth__destaque p {
  font: 400 14.5px/1.65 var(--font);
  opacity: .82;
  margin: 0 0 26px;
}

.sgcp-auth__ilustracao {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.sgcp-auth__ilustracao-rotulo {
  display: block;
  font: 600 9.5px var(--font);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .65;
}

.sgcp-auth__ilustracao-valor {
  display: block;
  font: 700 17px var(--font);
  font-variant-numeric: tabular-nums;
}

.sgcp-auth__rodape-nota {
  font: 400 11px var(--font);
  opacity: .55;
}

.sgcp-auth__coluna {
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  min-width: 0;
}

.sgcp-auth__tema {
  display: flex;
  justify-content: flex-end;
}

.sgcp-auth__tema-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-1);
  font: 600 12px var(--font);
  cursor: pointer;
}

.sgcp-auth__tema-btn:hover {
  background: var(--hover-bg);
}

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

.sgcp-auth__conteudo {
  margin: auto;
  width: 400px;
  max-width: 100%;
}

.sgcp-auth__conteudo h2 {
  font: 700 23px/1.25 var(--font);
  margin: 0 0 4px;
}

.sgcp-auth__conteudo--centro {
  text-align: center;
}

.sgcp-auth__sub {
  font: 400 13px/1.5 var(--font);
  color: var(--text-3);
  margin: 0 0 18px;
}

.sgcp-auth__campo-label {
  font: 600 12px var(--font);
  color: var(--text-2);
  display: block;
  margin-bottom: 6px;
}

.sgcp-auth__input {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-1);
  font: 400 14px var(--font);
}

.sgcp-auth__input:focus {
  border-color: var(--brand-bg);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}

.sgcp-auth__input--erro {
  border-color: var(--danger);
}

.sgcp-auth__botao {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--brand-bg);
  color: var(--on-brand);
  font: 600 13.5px var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  box-sizing: border-box;
}

.sgcp-auth__botao:hover {
  background: var(--brand-bg-hover);
}

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

.sgcp-auth__botao:disabled {
  background: var(--dis-bg);
  color: var(--dis-text);
  cursor: not-allowed;
}

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

.sgcp-auth__botao--secundario:hover {
  background: var(--hover-bg);
}

.sgcp-auth__botao--secundario:disabled {
  background: var(--surface);
  color: var(--text-3);
  border-color: var(--border);
  cursor: not-allowed;
}

.sgcp-auth__sso-nota {
  font: 400 11.5px/1.4 var(--font);
  color: var(--text-3);
  text-align: center;
  margin: 6px 0 0;
}

.sgcp-auth__link-btn {
  border: none;
  background: none;
  color: var(--brand-text);
  font: 600 12.5px var(--font);
  cursor: pointer;
  padding: 2px;
  text-decoration: none;
}

.sgcp-auth__link-btn:hover {
  text-decoration: underline;
}

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

.sgcp-auth__separador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font: 400 11px var(--font);
  color: var(--text-3);
}

.sgcp-auth__separador::before,
.sgcp-auth__separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sgcp-auth__alerta {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border-radius: var(--r-sm);
  padding: 9px 12px;
  margin-bottom: 12px;
  font: 400 12.5px/1.5 var(--font);
}

.sgcp-auth__alerta--erro {
  background: var(--danger-soft);
  color: var(--danger-text);
}

.sgcp-auth__alerta--sucesso {
  background: var(--success-soft);
  color: var(--success-text);
}

.sgcp-auth__icone-status {
  margin-bottom: 10px;
}

.sgcp-auth__otp {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.sgcp-auth__otp-digito {
  width: 44px;
  height: 52px;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-1);
  font: 700 21px var(--mono);
  box-sizing: border-box;
}

.sgcp-auth__otp-digito:focus {
  border-color: var(--brand-bg);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}

.sgcp-auth__metodos {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.sgcp-auth__metodo {
  flex: 1;
  text-align: center;
  font: 600 11.5px var(--font);
  border-radius: var(--r-full);
  padding: 5px 0;
  background: var(--surface-2);
  color: var(--text-3);
}

.sgcp-auth__metodo--ativo {
  background: var(--brand-soft);
  color: var(--brand-soft-text);
}

.sgcp-auth__forca-barra {
  height: 5px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  margin-top: 8px;
  overflow: hidden;
}

.sgcp-auth__forca-preenchimento {
  height: 100%;
  border-radius: var(--r-full);
  transition: all var(--dur-2) var(--ease);
}

.sgcp-auth__politica {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin: 10px 0 14px;
  font: 400 11.5px var(--font);
}

.sgcp-auth__politica-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sgcp-auth__ilustracao-valor--secundaria {
  opacity: .8;
}

.sgcp-auth__ilustracao-seta {
  opacity: .6;
}

.sgcp-auth__icone-status--danger { color: var(--danger); }
.sgcp-auth__icone-status--sucesso { color: var(--success); }
.sgcp-auth__icone-status--aviso { color: var(--warning); }
.sgcp-auth__icone-status--neutro { color: var(--border-strong); }

.sgcp-auth__botao--auto {
  display: inline-flex;
  width: auto;
}

.sgcp-auth__botao--pad-16 { padding: 0 16px; }
.sgcp-auth__botao--pad-18 { padding: 0 18px; }
.sgcp-auth__botao--pad-20 { padding: 0 20px; }

.sgcp-auth__link-btn--bloco {
  display: block;
  text-align: center;
}

.sgcp-auth__mt-10 { margin-top: 10px; }
.sgcp-auth__mt-12 { margin-top: 12px; }
.sgcp-auth__mt-14 { margin-top: 14px; }
.sgcp-auth__mt-16 { margin-top: 16px; }

.sgcp-auth__campo-label--mt-12 {
  margin-top: 12px;
}

.sgcp-auth__linha-opcoes {
  display: flex;
  align-items: center;
  margin: 12px 0 16px;
}

.sgcp-auth__checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 12.5px var(--font);
  cursor: pointer;
  color: var(--text-2);
}

.sgcp-auth__checkbox {
  accent-color: var(--brand-bg);
}

.sgcp-auth__checkbox--top {
  margin-top: 2px;
}

.sgcp-auth__link-btn--ml-auto {
  margin-left: auto;
}

.sgcp-auth__acao-fim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.sgcp-auth__contador {
  font: 400 12.5px var(--font);
  color: var(--text-3);
}

.sgcp-auth__contador strong {
  font-variant-numeric: tabular-nums;
}

.sgcp-auth__input--codigo {
  text-align: center;
  height: 44px;
  font: 700 17px var(--mono);
}

.sgcp-auth__termos-label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font: 400 12.5px/1.5 var(--font);
  color: var(--text-2);
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  margin-bottom: 14px;
}

.sgcp-auth__forca-rotulo {
  font: 600 11px var(--font);
  margin-top: 4px;
}

.sgcp-auth__politica-icone {
  font: 600 12px var(--font);
}

/* Sem isto, `.sgcp-auth` (grid de 2 colunas, `minmax(340px, 44%)`) nunca
   colapsa em telas pequenas: em 375px de viewport a coluna do formulário
   (`.sgcp-auth__coluna`) fica espremida a ~35px, texto quebra letra a letra e
   o botão "Entrar com conta do TJGO (SSO)" sobrepõe o parágrafo acima dele —
   toda a tela de login (e MFA/esqueci-senha/redefinir-senha, que reusam este
   mesmo layout via auth/_layout.html.twig) fica inutilizável no celular.
   Mesmo breakpoint (`900px`) já usado em dashboard.css/admin.css/ausencias.css
   pra colapsar grids de 2 colunas em 1. O painel institucional decorativo
   (`.sgcp-auth__painel`) é reduzido a uma faixa compacta com só a marca —
   `.sgcp-auth__destaque` (headline/ilustração) e o rodapé competiriam por
   espaço com o formulário de verdade, que é o que importa numa tela pequena. */
@media (max-width: 900px) {
  .sgcp-auth {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sgcp-auth__painel {
    padding: 20px 20px 16px;
  }

  .sgcp-auth__destaque,
  .sgcp-auth__rodape-nota {
    display: none;
  }

  .sgcp-auth__coluna {
    padding: 20px 20px 32px;
  }
}