/* Reseller Express — login.
 *
 * Dos columnas en desktop: marca a la izquierda, formulario a la derecha. Es
 * lo que hace que el login se lea como continuación del homepage y no como un
 * cuadro de acceso genérico. En móvil la marca se compacta arriba en vez de
 * desaparecer, para que la identidad siga presente en la pantalla pequeña.
 */

.rx-login-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
  background-image:
    radial-gradient(760px 420px at 30% -10%, rgba(34, 195, 245, .13), transparent 62%),
    radial-gradient(620px 380px at 105% 110%, rgba(91, 212, 255, .08), transparent 60%);
}

.rx-login-shell {
  display: grid; grid-template-columns: 1fr; gap: 30px;
  width: 100%; max-width: 1020px; align-items: center;
}
@media (min-width: 900px) {
  .rx-login-shell { grid-template-columns: 1.05fr .95fr; gap: 64px; }
}

/* ── Columna de marca ──────────────────────────────────────────────────── */
.rx-login-brand { display: flex; flex-direction: column; gap: 18px; }
.rx-login-headline {
  margin: 0; font-size: clamp(1.5rem, 4.2vw, 2.4rem); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.14; max-width: 18ch; text-wrap: balance;
}
@media (max-width: 899px) {
  /* En móvil la marca acompaña, no compite con el formulario. */
  .rx-login-headline { font-size: 1.3rem; max-width: none; }
  .rx-login-benefits { display: none; }
}
.rx-login-benefits {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.rx-login-benefits li {
  position: relative; padding-left: 26px;
  color: var(--rx-text-muted); font-size: .95rem;
}
.rx-login-benefits li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rx-primary); box-shadow: 0 0 12px -1px rgba(34, 195, 245, .8);
}
.rx-login-back {
  margin-top: 6px; font-size: .88rem; color: var(--rx-text-muted);
  text-decoration: none; align-self: flex-start;
}
.rx-login-back:hover { color: var(--rx-primary); }

/* ── Tarjeta del formulario ───────────────────────────────────────────── */
.rx-login-card {
  background: var(--rx-surface); border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-lg); padding: 30px 24px;
  box-shadow: var(--rx-shadow); width: 100%;
}
@media (min-width: 480px) { .rx-login-card { padding: 38px 34px; } }

.rx-login-title {
  margin: 0 0 6px; font-size: 1.25rem; font-weight: 650; letter-spacing: -.018em;
}
.rx-login-card .rx-tagline { margin: 0 0 24px; color: var(--rx-text-muted); font-size: .92rem; }

.rx-login-card .rx-btn { width: 100%; margin-top: 8px; }

.rx-login-new-here {
  margin: 18px 0 0; text-align: center; font-size: .88rem; color: var(--rx-text-muted);
}
.rx-login-new-here a { color: var(--rx-primary); text-decoration: none; font-weight: 600; margin-left: 4px; }
.rx-login-new-here a:hover { text-decoration: underline; }

/* Google: superficie neutra y sin halo — no debe competir con la acción
   propia de la marca, solo estar igual de disponible. */
.rx-btn-google {
  background: var(--rx-surface-elevated); color: var(--rx-text);
  border-color: var(--rx-border-strong); text-decoration: none;
  margin-top: 0; box-shadow: none;
}
.rx-btn-google:hover {
  background: rgba(34, 195, 245, .08); border-color: var(--rx-primary);
  color: var(--rx-text); box-shadow: 0 0 0 1px rgba(34, 195, 245, .22);
}
.rx-btn-google:hover::after { animation: none; }
.rx-google-mark { font-size: 1.05rem; font-weight: 700; color: #78a9ff; }

.rx-divider {
  display: flex; align-items: center; gap: 12px; color: var(--rx-text-muted);
  font-size: .74rem; margin: 22px 0 16px;
  text-transform: uppercase; letter-spacing: .07em;
}
.rx-divider::before, .rx-divider::after {
  content: ""; height: 1px; flex: 1; background: var(--rx-border);
}

.rx-login-card .rx-form-error { margin-top: 12px; }

/* Selector de idioma: sin topbar en esta página (a diferencia de las 5
   privadas con nav), flota arriba a la derecha -- patrón estándar de
   páginas de login, siempre visible sin importar el scroll. */
.rx-login-lang-switch { position: fixed; top: 16px; right: 16px; z-index: 5; }