/* =============================================================================
   ESD LAB - página login (templates/login.html): formulario de acceso,
   toggle de mostrar/ocultar contraseña, checkbox "recordarme". Movido
   tal cual desde static/styles.css (A7.9), sin cambiar ningún valor ni
   selector. Confirmado con grep contra los 13 templates restantes que
   ninguna de sus clases (incluidas las que no llevan prefijo
   .login-, como .form-check/.password-toggle/.input-wrapper/
   .form-options) la usa otra página. @keyframes slideUp y @keyframes
   spin, aunque vivían físicamente en esta sección del styles.css
   viejo, NO están acá: las consumen otras páginas (dashboard/records/
   users ya migradas, y projects/project_detail/audit todavía en
   styles.css) — viven en static/css/base/index.css junto a
   @keyframes fadeIn, mismo criterio que A7.1 ya estableció.
   ============================================================================= */

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 2rem 1rem;
  animation: fadeIn 0.4s ease;
}

.login-wrapper {
  width: 100%;
  max-width: 440px;
  background: var(--esd-surface-dark-2);
  border: 1px solid var(--esd-border-dark);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.login-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--esd-orange) 0%, var(--esd-orange-light) 100%);
}

/* Header del login */
.login-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.login-logo {
  margin-bottom: 1.5rem;
  animation: slideDown 0.5s ease;
}

.login-logo img {
  height: 60px;
  width: auto;
  max-width: 280px;
  filter: drop-shadow(0 2px 8px rgba(205, 104, 57, 0.15));
}

.login-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--esd-text-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  animation: slideDown 0.5s ease 0.1s both;
}

.login-subtitle {
  color: var(--esd-text-medium);
  font-size: 0.95rem;
  margin: 0;
  animation: slideDown 0.5s ease 0.2s both;
}

/* Formulario */
.login-form {
  animation: slideUp 0.5s ease 0.3s both;
}

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

.login-form .form-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--esd-text-dark);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.login-form .form-label .material-symbols-rounded {
  font-size: 20px;
  color: var(--esd-orange);
}

.input-wrapper {
  position: relative;
}

.login-form .form-control {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--esd-border-dark);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--esd-text-dark);
  transition: all var(--transition-normal);
  box-shadow: 0 2px 4px rgba(35, 27, 22, 0.04);
}

.login-form .form-control:focus {
  outline: none;
  border-color: var(--esd-orange);
  box-shadow: 0 0 0 4px rgba(205, 104, 57, 0.12), 0 4px 12px rgba(35, 27, 22, 0.08);
  background-color: #ffffff;
}

.login-form .form-control::placeholder {
  color: var(--esd-text-light);
  opacity: 0.7;
}

/* Password wrapper con botón toggle */
.password-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--esd-text-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all var(--transition-fast);
  z-index: 1;
}

.password-toggle:hover {
  color: var(--esd-orange);
  background-color: rgba(205, 104, 57, 0.08);
}

.password-toggle:focus {
  outline: 2px solid var(--esd-orange);
  outline-offset: 2px;
}

.password-toggle .material-symbols-rounded {
  font-size: 22px;
  user-select: none;
}

.password-wrapper .form-control {
  padding-right: 3.5rem;
}

/* Opciones del formulario */
.form-options {
  margin-bottom: 1.75rem;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  border: 2px solid var(--esd-border-dark);
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.form-check-input:checked {
  background-color: var(--esd-orange);
  border-color: var(--esd-orange);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(205, 104, 57, 0.15);
}

.form-check-label {
  color: var(--esd-text-medium);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

/* Botón de envío */
.login-submit {
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.login-submit .material-symbols-rounded {
  font-size: 20px;
  transition: transform var(--transition-normal);
}

.login-submit:hover .material-symbols-rounded {
  transform: translateX(4px);
}

.login-submit:active {
  transform: translateY(1px);
}

/* Mensajes */
.login-messages {
  margin-top: 1.5rem;
  animation: slideUp 0.5s ease 0.4s both;
}

.login-messages .alert {
  border-radius: 12px;
  border: none;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
}

/* Animaciones */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Responsive */
@media (max-width: 767.98px) {
  .login-container {
    min-height: 100vh;
    padding: 1rem;
    align-items: flex-start;
    padding-top: 2rem;
  }

  .login-wrapper {
    max-width: 100%;
    width: 100%;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    margin: 0 auto;
  }

  .login-header {
    margin-bottom: 2rem;
  }

  .login-title {
    font-size: 1.875rem;
  }

  .login-subtitle {
    font-size: 1rem;
  }

  .login-logo img {
    height: 65px;
    max-width: 100%;
  }

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

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

  .login-submit {
    padding: 1rem 1.5rem;
    font-size: 1.0625rem;
  }
}

@media (max-width: 575.98px) {
  .login-container {
    padding: 0.75rem;
    padding-top: 1.5rem;
  }

  .login-wrapper {
    padding: 2rem 1.5rem;
    border-radius: 16px;
  }

  .login-header {
    margin-bottom: 1.75rem;
  }

  .login-title {
    font-size: 1.75rem;
  }

  .login-subtitle {
    font-size: 0.95rem;
  }

  .login-logo {
    margin-bottom: 1.25rem;
  }

  .login-logo img {
    height: 55px;
  }

  .login-form .form-group {
    margin-bottom: 1.25rem;
  }

  .login-form .form-label {
    font-size: 0.95rem;
    margin-bottom: 0.625rem;
  }

  .login-form .form-control {
    padding: 0.9375rem 1rem;
    font-size: 1rem;
    border-radius: 10px;
  }

  .login-submit {
    padding: 0.9375rem 1.25rem;
    font-size: 1rem;
    border-radius: 10px;
  }

  .form-options {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 400px) {
  .login-container {
    padding: 0.5rem;
    padding-top: 1rem;
  }

  .login-wrapper {
    padding: 1.75rem 1.25rem;
    border-radius: 14px;
  }

  .login-title {
    font-size: 1.5rem;
  }

  .login-logo img {
    height: 50px;
  }
}

/* Efecto de carga en el botón */
.login-submit.loading {
  pointer-events: none;
  opacity: 0.7;
}

.login-submit.loading .material-symbols-rounded {
  animation: spin 1s linear infinite;
}

/* .password-toggle: vivía suelta en FASE 2 del styles.css viejo
   ("Touch targets, formularios, modales... y tipografía móvil"). */
@media (max-width: 767.98px) {
  .password-toggle {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }
}

/* .login-submit (full-width): vivía en su propio @media dedicado
   ("Submit primario full-width en móvil") en el styles.css viejo. */
@media (max-width: 575.98px) {
  .login-submit {
    width: 100%;
    justify-content: center;
  }
}