/**
 * SECTOR: 02 - Autenticación, Registro Categorizado y 2FA
 * URL PLATAFORMA: /assets/css/auth_bg.css
 * DESCRIPCIÓN: Capa de imagen de fondo de las pantallas de autenticación
 *              (assets/images/auth/). Overlay transparente con visibilidad nítida en modo claro y oscuro.
 */

.auth-bg {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: background-image .4s ease-in-out;
  pointer-events: none;
}
.auth-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10, 14, 26, 0.25) 0%, rgba(17, 24, 39, 0.35) 100%);
  transition: background .3s ease;
}
[data-theme="light"] .auth-bg::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(240, 249, 255, 0.35) 100%);
}

.auth-topbar-left { display: flex; align-items: center; gap: 16px; }
.auth-back { display: flex; align-items: center; gap: 4px; }
.auth-brand { display: flex; align-items: center; gap: 8px; }
.auth-brand img { display: block; height: 36px; width: 36px; border-radius: 50%; }

/* Modo claro: la tarjeta central va translúcida */
[data-theme="light"] .nexo-glass-card.auth-card {
  background: rgba(255, 255, 255, 0.92);
}

/* Modo oscuro: la tarjeta central con glassmorphic oscuro */
[data-theme="dark"] .nexo-glass-card.auth-card {
  background: rgba(26, 31, 53, 0.88);
}

/* Fondo de LOGIN en celular: imagen propia (login_nexo.php.png) sin JS */
@media (max-width: 768px) {
  .auth-bg[data-page="login"] {
    background-image: url('../images/auth/login_nexo.php.png') !important;
  }
}

.auth-bg[data-page="2fa"] {
  background-position: center bottom;
}