/* =====================================================================
   AUTH (Login / Registro) — mismo lenguaje visual del home.
   Todo aislado bajo .auth-v2 para no colisionar con Bootstrap
   (cargado globalmente en base.html) ni con estilo.css del sistema.
   OJO: "btn-mayor" del estilo.css global se usa en los avisos del
   sistema (base.html) — aquí no se toca ni se reutiliza, se usan
   clases propias (btn-primario) para no romper esos avisos.
   ===================================================================== */
.auth-v2 {
  --au-white: #ffffff;
  --au-surface: #F6F8FC;
  --au-line: #E4E9F2;
  --au-ink: #0F1B33;
  --au-ink-soft: #5B6B85;
  --au-blue-deep: #13286B;
  --au-blue: #2447D6;
  --au-blue-pale: #EAF0FF;
  --au-red: #C0392B;
  --au-font-display: 'Fraunces', serif;
  --au-font-body: 'Inter', sans-serif;

  font-family: var(--au-font-body);
  color: var(--au-ink);
  background: var(--au-white);
}
.auth-v2 * { box-sizing: border-box; }
.auth-v2 a { text-decoration: none; }

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.auth-panel-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.auth-form-inner { width: 100%; max-width: 400px; }

.auth-logo {
  font-family: var(--au-font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--au-blue-deep);
  display: inline-block;
  margin-bottom: 2.5rem;
}
.auth-form-inner h1 {
  font-family: var(--au-font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--au-ink);
  margin: 0 0 0.5rem;
}
.auth-subtitulo { color: var(--au-ink-soft); font-size: 0.95rem; margin: 0 0 1.75rem; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  border: 1px solid var(--au-line);
  border-radius: 9px;
  padding: 0.75rem;
  background: #fff;
  color: var(--au-ink);
  font-weight: 600;
  font-size: 0.9rem;
  transition: 0.15s;
}
.btn-google:hover { border-color: var(--au-blue); background: var(--au-surface); }

.auth-separador {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--au-ink-soft);
  font-size: 0.8rem;
}
.auth-separador::before, .auth-separador::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }

.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--au-ink); margin-bottom: 0.4rem; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--au-line);
  border-radius: 8px;
  font-family: var(--au-font-body);
  font-size: 0.92rem;
  color: var(--au-ink);
  background: var(--au-surface);
  transition: 0.15s;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--au-blue);
  background: #fff;
  box-shadow: 0 0 0 3px var(--au-blue-pale);
}
.campo-error { color: var(--au-red); font-size: 0.8rem; margin-top: 0.35rem; }
.campo-ayuda { color: var(--au-ink-soft); font-size: 0.78rem; margin-top: 0.35rem; line-height: 1.4; }

.auth-icono-check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E7F6EE;
  color: #1C8A5B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.btn-primario {
  width: 100%;
  background: var(--au-blue);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 0.85rem;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--au-font-body);
  cursor: pointer;
  transition: 0.15s;
}
.btn-primario:hover { background: var(--au-blue-deep); }

.auth-pie { margin-top: 1.75rem; text-align: center; font-size: 0.88rem; color: var(--au-ink-soft); }
.auth-pie a { color: var(--au-blue); font-weight: 600; }
.auth-pie a:hover { text-decoration: underline; }

.auth-panel-marca {
  background: linear-gradient(135deg, var(--au-blue-deep) 0%, var(--au-blue) 100%);
  display: flex;
  align-items: center;
  padding: 4rem;
  position: relative;
  overflow: hidden;
}
.auth-panel-marca::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.auth-panel-marca-contenido { position: relative; max-width: 420px; }
.auth-panel-marca-contenido h2 {
  font-family: var(--au-font-display);
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 2rem;
}
.auth-beneficios { list-style: none; margin: 0; padding: 0; }
.auth-beneficios li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.94rem;
  padding: 0.7rem 0 0.7rem 1.75rem;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.auth-beneficios li:last-child { border-bottom: none; }
.auth-beneficios li::before { content: "✓"; position: absolute; left: 0; color: #B9C7FF; font-weight: 700; }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-panel-marca { display: none; }
}