/* Telas de login e cadastro — mesma identidade da landing (landing nova, 2026-10-23):
   títulos em Archivo, textos em Inter, marinho com brilho azul e grade técnica no painel lateral. */
:root {
  --titulo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio-g: 18px;
  --sombra-g: 0 1px 2px rgba(10,31,68,.06), 0 12px 32px -8px rgba(10,31,68,.16), 0 32px 64px -24px rgba(10,31,68,.18);
}
body {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: radial-gradient(700px 420px at 100% 0%, rgba(79,163,247,.12), transparent 70%), linear-gradient(#f5f9ff, #fff);
  font-family: var(--fonte); font-size: 1.0625rem;
}
h1, h2 { color: var(--azul-900); font-family: var(--titulo); }
.logo { font-family: var(--titulo); font-stretch: 112%; }
.btn { min-height: 50px; font-weight: 600; }
.btn-primario { background: var(--azul-700); box-shadow: 0 1px 2px rgba(10,31,68,.2), 0 8px 20px -6px rgba(18,64,138,.55); }
.btn-primario:hover { background: var(--azul-900); }

/* Painel lateral */
.lado {
  position: relative; overflow: hidden; color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  background: var(--azul-900);
  background-image: radial-gradient(600px 400px at 100% 0%, rgba(79,163,247,.3), transparent 70%), radial-gradient(700px 400px at 0% 110%, rgba(43,125,233,.25), transparent 70%);
}
.lado::before { /* grade técnica bem leve, igual ao topo da landing */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(140,200,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(140,200,255,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 70% 30%, #000 20%, transparent 75%);
}
.lado > * { position: relative; }
.lado .logo { color: #fff; }
.lado .logo b { color: var(--azul-300); }
.lado .logo small { color: var(--azul-300); }
.lado .lado-titulo { color: #fff; font-family: var(--titulo); font-weight: 800; font-stretch: 116%; font-size: clamp(2.2rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.035em; max-width: 460px; margin: 0 0 20px; }
.lado p { color: #c9d8ef; max-width: 440px; margin: 0; line-height: 1.6; }
.lado small { color: #c9d8ef; font-size: .95rem; }
.lado a { color: #fff; font-weight: 600; }
.lado-itens { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; max-width: 440px; }
.lado-itens li { position: relative; padding-left: 30px; color: #fff; }
.lado-itens li::before { position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: rgba(140,200,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238cc8ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.etapas { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; max-width: 440px; }
.etapas li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; padding: 16px; border: 1px solid rgba(140,200,255,.2); border-radius: 14px; background: rgba(255,255,255,.04); color: #c9d8ef; }
.etapas span { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(140,200,255,.16); font-family: var(--titulo); font-weight: 800; font-size: 1.15rem; color: var(--azul-300); }
.etapas strong { color: #fff; }

/* Formulário */
.area { display: grid; place-items: center; padding: 48px 24px; }
form { width: 100%; max-width: 440px; padding: 40px; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-g); }
form.largo { max-width: 580px; }
form h1 { font-weight: 800; font-stretch: 114%; font-size: 2.25rem; line-height: 1.05; letter-spacing: -.025em; margin: 0 0 8px; }
form p.sub { color: var(--texto-suave); margin: 0 0 28px; }
form p.sub a { color: var(--azul-700); font-weight: 600; }
label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 1.1rem; color: var(--texto); }
label small { font-weight: 400; color: var(--texto-suave); }
input {
  display: block; width: 100%; margin-top: .4em; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid #76849a; border-radius: 10px; font: inherit; font-weight: 400; background: #fff; color: var(--texto);
  transition: border-color .15s;
}
input:hover { border-color: var(--azul-700); }
input:focus { border-color: var(--azul-700); }
/* Foco visível (WCAG 1.4.11 / 2.4.7): azul escuro nos fundos claros, azul claro nos escuros */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--azul-700); outline-offset: 2px;
}
.lado a:focus-visible { outline-color: var(--azul-300); }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: end; }
fieldset.tipo { border: 0; padding: 0; margin: 0 0 1.1rem; display: flex; gap: 10px; }
fieldset.tipo legend { font-weight: 600; font-size: .95rem; margin-bottom: .5em; color: var(--texto); }
fieldset.tipo label { flex: 1; display: flex; align-items: center; gap: .6em; margin: 0; min-height: 48px; padding: .7em 1em; border: 1.5px solid #c9d4e3; border-radius: 12px; background: #fff; cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s; }
fieldset.tipo label:hover { border-color: var(--azul-700); }
fieldset.tipo label:has(input:checked) { border-color: var(--azul-700); background: #e9f1fc; color: var(--azul-900); }
fieldset.tipo input { width: auto; min-height: 0; margin: 0; accent-color: var(--azul-700); }
fieldset.modo label { align-items: flex-start; }
fieldset.modo label span { display: grid; gap: 2px; }
fieldset.modo small { font-weight: 400; color: var(--texto-suave); font-size: .875rem; }
fieldset.modo input { margin-top: 4px; }
.btn { width: 100%; margin-top: .5rem; }
.erro { background: #fdecec; color: #a12626; padding: .8em 1em; border-radius: 10px; font-size: .95rem; margin-bottom: 1.1rem; }
.voltar { display: inline-block; margin-top: 1.5rem; font-size: .95rem; color: var(--azul-700); }
.logo-mobile b, .logo-mobile small { color: var(--azul-600); }
.logo-mobile { display: none; color: var(--azul-900); margin-bottom: 2rem; }
.armadilha { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .lado { display: none; }
  .logo-mobile { display: inline-flex; }
  .area { place-items: start center; padding: 32px 16px; }
}
@media (max-width: 480px) {
  form { padding: 24px 18px; }
  .duas { grid-template-columns: 1fr; }
  fieldset.tipo { flex-direction: column; }
  form h1 { font-size: 1.9rem; }
}

/* Esqueci minha senha (4.38) */
.ok { background: #e8f6ee; color: #1d6b3f; padding: .9em 1em; border-radius: 10px; font-size: .95rem; line-height: 1.55; margin-bottom: 1.1rem; }
.ok strong { display: block; margin-bottom: .25em; }
.esqueci { display: block; width: fit-content; margin: -.4rem 0 1.1rem auto; font-size: .92rem; color: var(--azul-700); font-weight: 600; }
#entrar { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
#entrar[hidden] { display: none; }