/**
 * Estilos de Login - Luua
 * Identidad Visual LUUA - "Caos Creativo"
 * Empowering Purposeful Play
 */

/* ========== CONFIGURACIÓN BASE ========== */

body.login-page {
  font-family: 'Kollektif', 'Open Sans', sans-serif;
  font-weight: 400;
  background: var(--luua-gradient-turquoise-violet);
  background-attachment: fixed;
  min-height: 100vh;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Optimizar para móviles - ajustar centrado vertical */
@media (max-width: 767.98px) {
  body.login-page {
    padding: 1rem 0.5rem;
    align-items: flex-start;
    padding-top: 2rem;
  }
}

/* Fondo con textura artística LUUA */
body.login-page {
  position: relative;
}

/* ========== CONTENEDOR PRINCIPAL ========== */

body.login-page .login-container {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
}

/* ========== SELECTOR DE IDIOMA ========== */

.login-form .btn-group,
.registro-form .btn-group {
  box-shadow: var(--shadow-sm);
}

.login-form .btn-group .btn.active,
.registro-form .btn-group .btn.active {
  background: var(--luua-turquoise);
  color: var(--luua-canvas);
  border-color: var(--luua-turquoise);
}

/* ========== TARJETA DE LOGIN ========== */

.login-form, .login-card {
  padding: 3rem 2.5rem;
  position: relative;
  background-image: url('/img/fondos/17.webp');
  background-repeat: round;
}

/* Optimizar padding para móviles */
@media (max-width: 767.98px) {
  .login-form, .login-card {
    padding: 2rem 1.5rem;
    border-radius: var(--luua-radius-lg);
    margin-bottom: 1rem;
  }
}

/* Efecto de brillo sutil en la tarjeta */
.login-form::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  transform: rotate(45deg);
  animation: luua-float 4s ease-in-out infinite;
  pointer-events: none;
}

/* ========== HEADER DEL LOGIN ========== */

.login-header {
  text-align: center;
  position: relative;
  z-index: 2;
}

.login-logo {
  max-width: 180px;
  margin-bottom: 1.5rem;
  /* Efectos hover removidos según directrices de identidad visual - No añadir efectos al logo */
}

/* Logo optimizado para móviles */
@media (max-width: 767.98px) {
  .login-logo {
    max-width: 120px;
    margin-bottom: 1rem;
  }
}

/* ========== FORMULARIO ========== */

.login-form {
  position: relative;
  z-index: 2;
}

.login-form label {
  color: var(--luua-black);
  font-family: 'Kollektif', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Estilos LUUA minimalistas para formularios - solo colores */
.login-form .form-control:focus {
  border-color: var(--luua-turquoise);
  box-shadow: 0 0 0 0.25rem var(--luua-turquoise-20);
}

.login-form .input-group-text {
  background: var(--luua-gradient-lime-turquoise);
  color: var(--luua-canvas);
  border-color: var(--luua-turquoise);
}

/* ========== ESTILOS ESPECÍFICOS PARA LOGIN ========== */

/* Botones en formularios de login usan fuente Kollektif y mayúsculas */
.login-form .btn {
  font-family: 'Kollektif', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Ajustes específicos para botones en login si son necesarios */
/* El sistema unificado de shared.css ya maneja los colores y efectos */

/* Estilos de alertas heredados de shared.css */

/* Estilos de password-toggle heredados de shared.css */

/* ========== ANIMACIONES ========== */

.login-form, .login-card {
  animation: luua-fadeInUp 0.8s ease-out;
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablets y móviles grandes */
@media (max-width: 991.98px) {
  .login-container {
    max-width: 450px;
  }

  .login-form, .login-card {
    padding: 2.5rem 2rem;
  }

  .login-logo {
    max-width: 160px;
  }
}

/* Móviles estándar */
@media (max-width: 767.98px) {
  .login-container {
    max-width: 100%;
    padding: 0 1rem;
  }

  .login-form, .login-card {
    padding: 1.5rem 1.25rem;
    border-radius: var(--luua-radius-lg);
  }

  .login-logo {
    max-width: 110px;
    margin-bottom: 0.75rem;
  }

  .login-form label {
    font-size: 0.9rem;
  }

  .login-form .form-control {
    font-size: 1rem;
    padding: 0.75rem;
  }

  .login-form .btn-primary {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
  }

  /* Optimizar espaciado en móviles */
  .login-form .mb-3 {
    margin-bottom: 1rem;
  }

  .login-form .mb-4 {
    margin-bottom: 1.5rem;
  }
}

/* Móviles pequeños */
@media (max-width: 575.98px) {
  body.login-page {
    padding: 0.5rem;
  }

  .login-container {
    padding: 0;
  }

  .login-form, .login-card {
    padding: 1.25rem 1rem;
  }

  .login-logo {
    max-width: 100px;
    margin-bottom: 0.5rem;
  }

  .login-form .form-control {
    font-size: 0.95rem;
    padding: 0.625rem;
  }

  .login-form .btn-primary {
    padding: 0.75rem;
    font-size: 0.95rem;
  }
}

/* ========== MODO OSCURO (FUTURO) ========== */

@media (prefers-color-scheme: dark) {
  /* Preparado para futuras implementaciones de modo oscuro */
  /* manteniendo la identidad visual LUUA */
}