/* Páginas do servidor de autorização (login e senha).
   Identidade visual: docs/imagens-referencias/identidade_visual.txt (mesmos tokens do app em
   srecruiter-web/src/styles.scss). Interface neutra, azul só para ação. Segue o tema do sistema. */
:root {
  color-scheme: light dark;
  --sr-primaria: light-dark(#2563eb, #60a5fa);
  --sr-primaria-hover: light-dark(#1d4ed8, #93c5fd);
  --sr-sobre-primaria: light-dark(#ffffff, #0b1120);
  --sr-foco: light-dark(rgb(37 99 235 / 18%), rgb(96 165 250 / 25%));
  --sr-sucesso: light-dark(#15803d, #4ade80);
  --sr-sucesso-tonal: light-dark(#f0fdf4, rgb(74 222 128 / 12%));
  --sr-erro: light-dark(#dc2626, #f87171);
  --sr-erro-tonal: light-dark(#fef2f2, rgb(248 113 113 / 12%));
  --sr-texto: light-dark(#0f172a, #f8fafc);
  --sr-texto-suave: light-dark(#64748b, #94a3b8);
  --sr-fundo: light-dark(#f8fafc, #0b1120);
  --sr-superficie: light-dark(#ffffff, #111827);
  --sr-borda: light-dark(#e2e8f0, #1e293b);
  --sr-borda-2: light-dark(#cbd5e1, #334155);
  --sr-raio: 10px;
  --sr-fonte: 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--sr-fundo);
  color: var(--sr-texto);
  font-family: var(--sr-fonte);
  font-size: 15px;
}

.tela {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100%;
}

.marca {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Painel institucional: superfície escura neutra (não colorida), marca com o "s" em azul. */
.destaque {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 72px 64px;
  background: #0f172a;
  color: #f8fafc;
}

.destaque .marca-s { color: #60a5fa; }

.destaque h2 {
  margin: 0 0 16px;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.destaque p {
  max-width: 440px;
  margin: 0;
  color: #94a3b8;
  font-size: 1.05rem;
  line-height: 1.5;
}

.painel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.formulario {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
}

.marca-compacta { display: none; }

h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.subtitulo {
  margin: 8px 0 28px;
  color: var(--sr-texto-suave);
  line-height: 1.5;
}

.alerta {
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-left: 3px solid var(--sr-erro);
  border-radius: var(--sr-raio);
  background: var(--sr-erro-tonal);
  color: var(--sr-erro);
  font-weight: 600;
}

.alerta p { margin: 0; }

.alerta p + p { margin-top: 6px; }

.alerta.sucesso {
  border-left-color: var(--sr-sucesso);
  background: var(--sr-sucesso-tonal);
  color: var(--sr-sucesso);
}

label {
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.campo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 0 14px;
  border: 1px solid var(--sr-borda-2);
  border-radius: var(--sr-raio);
  background: var(--sr-superficie);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campo:focus-within {
  border-color: var(--sr-primaria);
  box-shadow: 0 0 0 3px var(--sr-foco);
}

.campo svg { width: 20px; height: 20px; flex: none; color: var(--sr-texto-suave); }

.campo input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sr-texto);
  font: inherit;
}

.mostrar {
  display: grid;
  place-items: center;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sr-texto-suave);
  cursor: pointer;
}

.mostrar:focus-visible { outline: 2px solid var(--sr-primaria); }

.esqueci {
  align-self: flex-start;
  margin: -6px 0 28px;
  color: var(--sr-primaria);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.esqueci:hover { text-decoration: underline; }

.entrar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border: 0;
  border-radius: var(--sr-raio);
  background: var(--sr-primaria);
  color: var(--sr-sobre-primaria);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.entrar svg { width: 20px; height: 20px; }

a.entrar { text-decoration: none; }

.entrar:hover { background: var(--sr-primaria-hover); }

.entrar:focus-visible { outline: 3px solid var(--sr-foco); outline-offset: 2px; }

.voltar {
  align-self: center;
  margin-top: 20px;
  color: var(--sr-texto-suave);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.voltar:hover { color: var(--sr-texto); text-decoration: underline; }

@media (max-width: 860px) {
  .tela { grid-template-columns: 1fr; }
  .destaque { display: none; }
  .marca-compacta { display: block; margin-bottom: 24px; font-size: 2rem; }
  .marca-compacta .marca-s { color: var(--sr-primaria); }
}