/* =========================
   CONFIG GENERAL - MODERNA Y SUAVE
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  height: 100vh;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
  overflow: hidden;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.login-layout {
  display: flex;
  height: 100vh;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
}

/* =========================
   IZQUIERDA (LOGIN) - MÁS COMPACTO
========================= */
.login-left {
  width: 35%; /* Reducido de 40% */
  min-width: 380px; /* Reducido de 420px */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 30px; /* Reducido de 60px 40px */
  box-shadow: 0 8px 30px rgba(135, 206, 235, 0.08);
  z-index: 10;
  border-right: 1px solid #f0f8ff;
}

.login-container {
  width: 100%;
  max-width: 340px; /* Reducido de 380px */
  text-align: center;
  animation: fadeIn 0.8s ease-out;
}

.login-logo img {
  width: 100px; /* Reducido de 120px */
  margin-bottom: 12px; /* Reducido de 15px */
  transition: transform 0.3s ease;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.04));
}

.login-logo img:hover {
  transform: scale(1.05);
}

.welcome-message {
  font-size: 13px; /* Reducido de 14px */
  color: #7b8ab8;
  margin-bottom: 10px; /* Reducido de 12px */
  font-weight: 500;
  letter-spacing: 0.4px;
}

.login-container h2 {
  font-weight: 600;
  margin-bottom: 24px; /* Reducido de 32px */
  color: #2c5282;
  font-size: 24px; /* Reducido de 28px */
  position: relative;
}

.login-container h2::after {
  content: '';
  position: absolute;
  bottom: -8px; /* Reducido de 10px */
  left: 50%;
  transform: translateX(-50%);
  width: 50px; /* Reducido de 60px */
  height: 2px; /* Reducido de 3px */
  background: linear-gradient(to right, #4299e1, #63b3ed);
  border-radius: 2px;
}

/* =========================
   INPUTS - MÁS COMPACTOS Y FINOS
========================= */
.input-group {
  position: relative;
  margin-bottom: 18px; /* Reducido de 24px */
}

.input-group i {
  position: absolute;
  top: 50%;
  left: 14px; /* Reducido de 16px */
  transform: translateY(-50%);
  color: #90cdf4;
  z-index: 2;
  transition: all 0.2s ease;
  font-size: 14px; /* Añadido para hacer más fino */
}

.input-group input {
  width: 100%;
  padding: 14px 42px 14px 40px; /* Reducido de 16px 48px 16px 45px */
  border-radius: 10px; /* Reducido de 12px */
  border: 1.5px solid #e6f2ff; /* Reducido de 2px */
  outline: none;
  font-size: 14px; /* Reducido de 15px */
  font-weight: 500;
  color: #2d3748;
  background: #f7faff;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-group input:focus {
  border-color: #63b3ed;
  background: #ffffff;
  box-shadow: 0 3px 15px rgba(99, 179, 237, 0.12); /* Reducido de 20px */
}

.input-group input:focus + i {
  color: #4299e1;
}

/* Password toggle - INTEGRADO EN EL FORMULARIO */
.password-group .toggle-password {
  position: absolute;
  right: 35px; /* Reducido de 16px */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #90cdf4;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3;
  opacity: 0.8;
  padding: 4px; /* Añadido para hacer más fino */
  font-size: 14px; /* Añadido para hacer más fino */
}

.password-group .toggle-password:hover {
  color: #4299e1;
  opacity: 1;
  background: rgba(99, 179, 237, 0.08); /* Fondo sutil al hover */
  border-radius: 4px;
}

/* =========================
   BOTÓN LOGIN - MÁS COMPACTO
========================= */
.btn-login {
  width: 100%;
  padding: 14px; /* Reducido de 16px */
  margin-top: 6px; /* Reducido de 8px */
  background: linear-gradient(135deg, #4299e1 0%, #63b3ed 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px; /* Reducido de 12px */
  font-weight: 600;
  font-size: 15px; /* Reducido de 16px */
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.4px;
  box-shadow: 0 3px 12px rgba(66, 153, 225, 0.2); /* Reducido de 15px */
}

.btn-login:hover {
  background: linear-gradient(135deg, #3182ce 0%, #4299e1 100%);
  transform: translateY(-1px); /* Reducido de 2px */
  box-shadow: 0 6px 20px rgba(66, 153, 225, 0.3); /* Reducido de 25px */
}

.btn-login:active {
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(66, 153, 225, 0.2);
}

/* Cámara QR - MÁS COMPACTO */
.btn-login + img {
  display: block;
  margin: 16px auto 0; /* Reducido de 20px */
  transition: all 0.2s ease;
  filter: drop-shadow(0 1px 3px rgba(66, 153, 225, 0.15)); /* Reducido de 4px */
  width: 1.6rem; /* Reducido de 1.9rem */
}

.btn-login + img:hover {
  transform: scale(1.08); /* Reducido de 1.1 */
  filter: drop-shadow(0 3px 6px rgba(66, 153, 225, 0.25)); /* Reducido de 8px */
}

/* =========================
   INSCRIPCIÓN ONLINE - MÁS COMPACTO
========================= */
.online-registration {
  margin-top: 32px; /* Reducido de 40px */
  padding-top: 24px; /* Reducido de 30px */
  border-top: 1px solid #e6f2ff;
}

.online-registration h2 {
  font-size: 14px; /* Reducido de 15px */
  margin-bottom: 14px; /* Reducido de 16px */
  color: #4a5568;
  font-weight: 600;
}

.btn-registration {
  background: #ffffff;
  color: #4299e1;
  border: 1.5px solid #c6e0ff; /* Reducido de 2px */
  padding: 10px 24px; /* Reducido de 12px 28px */
  border-radius: 20px; /* Reducido de 25px */
  font-size: 14px; /* Reducido de 15px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Reducido de 10px */
  box-shadow: 0 1px 8px rgba(198, 224, 255, 0.4); /* Reducido de 10px */
}

.btn-registration:hover {
  background: linear-gradient(135deg, #4299e1 0%, #63b3ed 100%);
  color: #ffffff;
  transform: translateY(-1px); /* Reducido de 2px */
  box-shadow: 0 6px 16px rgba(66, 153, 225, 0.25); /* Reducido de 20px */
  border-color: #4299e1;
}

.btn-registration i {
  font-size: 13px; /* Reducido de 14px */
}

/* =========================
   DERECHA (CAROUSEL) - MÁS GRANDE
========================= */
.login-right {
  width: 65%; /* Aumentado de 60% */
  position: relative;
  overflow: hidden;
}

.login-right img {
  height: 100vh;
  object-fit: cover;
  width: 100%;
  filter: brightness(0.95) saturate(1.1);
  transition: transform 12s ease; /* Aumentado de 10s */
}

#loginCarousel {
  height: 100vh;
}

#loginCarousel .carousel-inner {
  position: relative;
  height: 100%;
}

#loginCarousel .carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

#loginCarousel .carousel-item.active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

.login-right:hover img {
  transform: scale(1.04); /* Aumentado de 1.03 */
}

/* =========================
   MODALES AUTH / QR - MÁS COMPACTOS
========================= */
.closeButton {
  position: absolute;
  top: 10px; /* Reducido de 12px */
  right: 14px; /* Reducido de 16px */
  background: none;
  border: none;
  font-size: 24px; /* Reducido de 28px */
  color: #90cdf4;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 32px; /* Reducido de 36px */
  height: 32px; /* Reducido de 36px */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.closeButton:hover {
  color: #4299e1;
  background: #f0f8ff;
}

.input-auth {
  width: 100%;
  padding: 12px; /* Reducido de 14px */
  border-radius: 8px; /* Reducido de 10px */
  border: 1.5px solid #e6f2ff; /* Reducido de 2px */
  margin-bottom: 14px; /* Reducido de 16px */
  font-size: 14px; /* Reducido de 15px */
  transition: all 0.2s ease;
  background: #f7faff;
}

.input-auth:focus {
  border-color: #63b3ed;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(99, 179, 237, 0.12); /* Reducido de 15px */
}

.btn-auth {
  width: 100%;
  padding: 12px; /* Reducido de 14px */
  background: linear-gradient(135deg, #4299e1 0%, #63b3ed 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px; /* Reducido de 10px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px; /* Reducido de 15px */
}

.btn-auth:hover {
  background: linear-gradient(135deg, #3182ce 0%, #4299e1 100%);
  transform: translateY(-1px); /* Reducido de 2px */
  box-shadow: 0 5px 16px rgba(66, 153, 225, 0.25); /* Reducido de 20px */
}

.error-message {
  margin-top: 10px; /* Reducido de 12px */
  font-size: 12px; /* Reducido de 13px */
  color: #e53e3e;
  font-weight: 500;
  text-align: center;
}

/* =========================
   ANIMACIONES SUAVES
========================= */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px); /* Reducido de 20px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px); /* Reducido de 10px */
  }
}

/* =========================
   RESPONSIVE - MEJORADO
========================= */
@media (max-width: 992px) {
  .login-layout {
    background: #ffffff;
  }
  
  .login-right {
    display: none;
  }

  .login-left {
    width: 100%;
    min-width: unset;
    padding: 35px 24px; /* Reducido de 40px */
    box-shadow: none;
    border-right: none;
  }

  .login-container {
    max-width: 100%;
  }

  body {
    overflow: auto;
    background: #f7faff;
  }
  
  .login-container h2 {
    font-size: 22px; /* Reducido de 24px */
  }
  
  .badge-aniversario {
    display: none;
  }
}

@media (max-width: 480px) {
  .login-left {
    padding: 25px 20px; /* Reducido de 30px */
    min-width: 0;
  }
  
  .input-group input {
    padding: 12px 38px 12px 38px; /* Reducido de 14px */
    font-size: 16px;
  }
  
  .input-group i {
    left: 12px;
    font-size: 13px;
  }
  
  .password-group .toggle-password {
    right: 35px;
    font-size: 13px;
  }
  
  .btn-login {
    padding: 12px; /* Reducido de 14px */
    font-size: 15px;
  }
  
  .btn-registration {
    padding: 8px 20px; /* Reducido de 10px */
    font-size: 13px;
  }
  
  .login-container h2 {
    font-size: 20px;
  }
}

/* Clases de mensajes */
.success {
  color: #38a169 !important;
  font-weight: 600;
  font-size: 12px; /* Añadido para ser más fino */
}

.error {
  color: #e53e3e !important;
  font-weight: 600;
  font-size: 12px; /* Añadido para ser más fino */
}

/* Efectos de brillo sutil - MÁS SUAVE */
.login-container::before {
  content: '';
  position: absolute;
  top: -40px; /* Reducido de 50px */
  left: -40px; /* Reducido de 50px */
  width: 160px; /* Reducido de 200px */
  height: 160px; /* Reducido de 200px */
  background: radial-gradient(circle, rgba(99, 179, 237, 0.08) 0%, rgba(99, 179, 237, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

/* Estilos para el formulario más compacto */
#loginForm {
  margin-top: 8px; /* Reducido espacio interno del formulario */
}

/* Mejoras para hacer todo más fino */
.input-group,
.password-group,
.btn-login,
.btn-registration {
  font-weight: 500; /* Más fino que 600 */
}

/* Ajuste específico para el icono del ojo dentro del input */
.password-group input {
  padding-right: 45px; /* Asegura espacio para el ojo dentro del input */
}