/* 
   Login Form Responsive Improvements
   Este archivo proporciona optimizaciones adicionales para asegurar
   que todos los formularios (login, signup, forgot) se ajusten correctamente
*/

/* Asegurar que los selectores personalizados no causen overflow */
.field.focused .psuedo_select .options {
  position: fixed;
  top: auto;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}

/* Optimizar altura de la tarjeta en móvil */
@media (max-width: 768px) {
  .glass-card {
    /* Permitir que la tarjeta use más espacio vertical si es necesario */
    min-height: auto;
  }

  .card-header {
    flex-shrink: 0;
  }

  .login-form {
    flex-grow: 1;
  }
}

/* Asegurar que el signup no sea cortado */
@media (max-width: 480px) and (max-height: 800px) {
  .glass-card {
    max-height: auto;
    overflow-y: auto;
    /* Permitir scroll con margen extra para interactividad */
    padding-bottom: 20px;
  }

  .field {
    margin-top: clamp(6px, 1.5vw, 12px);
  }

  /* Reduce tamaño de texto en formularios largos */
  .form-field label {
    font-size: clamp(0.75rem, 1vw, 0.85rem);
  }

  .card-subtitle {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  }
}

/* Landscape en móvil - optimización extrema */
@media (max-width: 768px) and (max-height: 400px) {
  .card-header {
    margin-bottom: clamp(8px, 1vh, 12px);
  }

  .card-title {
    font-size: clamp(0.95rem, 2vw, 1.2rem);
  }

  .card-subtitle {
    display: none;
  }

  .logo-wrapper img {
    width: clamp(60px, 8vw, 80px);
    margin-bottom: clamp(2px, 0.5vh, 4px);
  }

  .login-form {
    gap: clamp(8px, 1vh, 10px);
  }

  .form-field {
    gap: clamp(2px, 0.5vh, 4px);
  }

  .form-field label {
    font-size: clamp(0.7rem, 1vw, 0.8rem);
  }

  .field-input {
    padding: clamp(8px, 1vh, 10px) clamp(10px, 1.5vw, 12px);
    padding-left: clamp(32px, 5vw, 40px);
    font-size: clamp(0.8rem, 1vw, 0.9rem);
  }

  .btn-primary {
    padding: clamp(8px, 1vh, 10px) clamp(10px, 1.5vw, 12px);
    font-size: clamp(0.8rem, 1vw, 0.9rem);
  }
}

/* Scrollbar personalizado - más visible en formularios largos */
.glass-card::-webkit-scrollbar {
  width: 8px;
}

.glass-card::-webkit-scrollbar-track {
  background: rgba(24, 24, 27, 0.5);
  border-radius: 4px;
}

.glass-card::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.4);
  border-radius: 4px;
}

.glass-card::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.6);
}

/* Firefox scrollbar */
.glass-card {
  scrollbar-color: rgba(59, 130, 246, 0.4) rgba(24, 24, 27, 0.5);
  scrollbar-width: thin;
}

/* Asegurar que los dividers no causen overflow en layouts estrechos */
@media (max-width: 360px) {
  .divider {
    gap: clamp(4px, 1vw, 8px);
  }

  .divider-line {
    min-width: clamp(10px, 1vw, 20px);
  }
}

/* Prevenir que los links se corten */
.link-muted,
.link-accent {
  display: inline;
  word-break: break-word;
}

/* Form meta responsiva */
.form-meta {
  flex-wrap: wrap;
  gap: clamp(8px, 2vw, 16px);
}

.form-meta--split {
  justify-content: space-between;
}

@media (max-width: 480px) {
  .form-meta--split {
    flex-direction: column;
    gap: clamp(6px, 1vw, 10px);
  }

  .form-meta a {
    font-size: clamp(0.75rem, 1vw, 0.85rem);
  }
}

/* Signup text responsive */
.signup-text {
  line-height: 1.4;
  padding: clamp(8px, 1vw, 12px) 0;
}

@media (max-width: 360px) {
  .signup-text {
    font-size: clamp(0.75rem, 1.2vw, 0.85rem);
  }

  .signup-text a {
    display: block;
    margin-top: clamp(4px, 0.8vw, 8px);
  }
}

/* Asegurar que ChangePwd en forgot password se ajuste bien */
#ChangePwd {
  width: 100%;
  min-width: 0;
}

#ChangePwd .form-field {
  width: 100%;
  min-width: 0;
}

/* Soporte para muy alto zoom (200%+) */
@media (min-width: 1024px) {
  .login-page {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .login-container {
    max-width: clamp(300px, 90vw, 1120px);
  }
}