/* ==========================================================================
   Login — estilos específicos de la pantalla de inicio de sesión.
   Los componentes de formulario (.form-field, .form-input, .btn-primary, etc.)
   están en base.css porque se comparten con el resto del admin.
   Depende de tokens.css y base.css (cargados antes en el HTML).
   ========================================================================== */

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

/* --- Contenedor: sin card, sin borde, el contenido flota directo sobre el fondo --- */

.login-container {
  width: 100%;
  max-width: var(--card-max-width);
}

/* --- Encabezado: logo + título --- */

.login-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.login-logo {
  width: 40px;
  height: auto;
}

.login-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

/* --- Formulario --- */

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.login-form .btn-primary {
  margin-top: var(--space-2);
}

/* --- Campo de contraseña: input + botón de mostrar/ocultar superpuesto --- */

.form-input--password {
  position: relative;
}

.form-input--password .form-input {
  padding-right: 56px; /* deja lugar al botón de mostrar/ocultar (44px) sin tapar el texto */
}

.btn-toggle-password {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;  /* tamaño táctil mínimo recomendado (44x44) */
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.btn-toggle-password:hover {
  color: var(--color-text);
}

.btn-toggle-password:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-toggle-password svg {
  width: 20px;
  height: 20px;
}