/* =====================================================
   Login Glassmorphism — Manual Hermandia (v2)
   ===================================================== */

/* Overlay oscurecedor sobre el fondo + flex centrado */
.login {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.login::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 30, 60, .55), rgba(0, 0, 0, .45));
  pointer-events: none;
  z-index: 0;
}
.login > * { position: relative; z-index: 1; }

/* Card centrado glass — altura natural según contenido */
.login-sd {
  position: relative !important;
  inset: auto !important;
  margin: 24px !important;
  background-color: rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 20px !important;
  width: min(420px, calc(100% - 32px)) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .50),
    0 0 0 1px rgba(255, 255, 255, .08) inset;
  color: #fff !important;
  padding: 20px 20px 18px !important;
}
.no-backdropfilter .login-sd {
  background-color: rgba(20, 30, 50, .88) !important;
}
@media screen and (max-width: 480px) {
  .login-sd { width: calc(100% - 24px) !important; border-radius: 14px !important; padding: 16px !important; }
}

/* Header: apilar logo + título centrados (era horizontal con .d-flex) */
.login-sd > .d-flex.mb-5 {
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 4px 0 14px !important;
}

/* Logo: caja transparente, avatar grande centrado */
.login-logo {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  justify-content: center !important;
}
.login-logo .v-avatar {
  width: 84px !important;
  height: 84px !important;
  border-radius: 16px !important;
  overflow: hidden;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
}
.login-logo .v-image,
.login-logo .v-responsive {
  border-radius: 16px !important;
}

/* Título: blanco, centrado, sobrescribe grey--text.text--darken-4 */
.login-title {
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  text-shadow: none !important;
}
.login-title *,
.login-title .text-h6,
.login-title .grey--text,
.login-title .grey--text.text--darken-4 {
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* Subtítulos ("Seleccione el proveedor", "Ingrese sus credenciales") */
.login-subtitle {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
  color: rgba(255, 255, 255, .85) !important;
  text-shadow: none !important;
  padding: 12px 4px 10px !important;
  font-weight: 500;
  font-size: 13.5px;
  text-align: center !important;
}
.login-subtitle * { color: rgba(255, 255, 255, .85) !important; text-shadow: none !important; }

/* Info / Form / List: cajas transparentes con separador sutil */
.login-info,
.login-form,
.login-list {
  border-top: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
  color: #fff !important;
}
.login-info { color: rgba(255, 255, 255, .75) !important; }

/* === Lista de strategies (anula theme--light del v-list) === */
.login-list .v-list,
.login-list .theme--light.v-list,
.login-list .v-list.elevation-1 {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 0 !important;
}
.login-list .v-list-item,
.login-list .theme--light.v-list-item {
  background: rgba(255, 255, 255, .08) !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  min-height: 48px !important;
  color: #fff !important;
}
.login-list .v-list-item:last-child { margin-bottom: 0 !important; }
.login-list .v-list-item--active,
.login-list .v-list-item--active::before,
.login-list .v-list-item:hover {
  background: rgba(78, 160, 255, .22) !important;
}
.login-list .v-list-item span,
.login-list .v-list-item .text-none,
.login-list .v-list-item .v-list-item__title {
  color: #fff !important;
}
.login-list .v-list-item .v-avatar {
  background: transparent !important;
}
.login-list .v-list-item .v-avatar svg,
.login-list .v-list-item .v-avatar svg path { fill: #fff !important; }
.login-list .v-list-item .v-icon { color: #fff !important; }

/* Inputs Vuetify sobre glass */
.login-form .v-text-field input,
.login-form .v-input input,
.login-form input,
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  color: #fff !important;
  caret-color: #fff !important;
}
.login-form .v-text-field input::placeholder,
.login-form input::placeholder {
  color: rgba(255, 255, 255, .55) !important;
}
.login-form .v-label,
.login-form .v-text-field label,
.login-form .v-text-field .v-label,
.login-form .v-input .v-label,
.login-form .v-input label,
.login-form .theme--light.v-label,
.login-form .theme--light .v-label,
.login-form .theme--dark.v-label,
.login-form .theme--dark .v-label,
.login-form .v-text-field--outlined .v-label,
.login-form .v-text-field--filled .v-label,
.login-form .v-text-field--solo .v-label {
  color: rgba(255, 255, 255, .80) !important;
}
.login-form .v-label--active,
.login-form .v-text-field .v-label--active {
  color: rgba(255, 255, 255, .95) !important;
}
.login-form .v-text-field--filled .v-input__slot,
.login-form .v-text-field--solo .v-input__slot,
.login-form .v-input__slot {
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
}
.login-form .v-input--is-focused .v-input__slot {
  background: rgba(255, 255, 255, .14) !important;
}
.login-form .v-text-field--outlined fieldset {
  border-color: rgba(255, 255, 255, .25) !important;
}
.login-form .v-text-field--outlined.v-input--is-focused fieldset,
.login-form .v-input--is-focused fieldset {
  border-color: #4ea0ff !important;
}
.login-form .v-icon,
.login-form .v-input__icon .v-icon,
.login-form .v-input__prepend-inner .v-icon,
.login-form .v-input__prepend-outer .v-icon,
.login-form .v-input__append-inner .v-icon,
.login-form .v-input__append-outer .v-icon,
.login-form .v-text-field .v-icon,
.login-form .theme--light.v-icon,
.login-form .theme--dark.v-icon {
  color: rgba(255, 255, 255, .75) !important;
  caret-color: rgba(255, 255, 255, .75) !important;
}
.login-form .v-text-field__details,
.login-form .v-messages,
.login-form .v-messages__message {
  color: rgba(255, 255, 255, .55) !important;
}

/* Botón principal "Iniciar Sesión" */
.login-form .v-btn.primary,
.login-form .v-btn--has-bg.primary,
.login-form .v-btn.v-btn--depressed.primary {
  background: linear-gradient(135deg, #1976d2, #1565c0) !important;
  box-shadow: 0 8px 24px rgba(25, 118, 210, .45) !important;
  border-radius: 10px !important;
  height: 44px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  text-transform: none;
  color: #fff !important;
}
.login-form .v-btn.primary .v-btn__content { color: #fff !important; }
.login-form .v-btn.primary:hover { filter: brightness(1.10); }

/* Enlaces (¿olvidaste tu contraseña?, etc.) */
.login a,
.login a.primary--text {
  color: #82baff !important;
  text-decoration: none;
}
.login a:hover { color: #b3d4ff !important; text-decoration: underline; }

/* TFA */
.login-tfa {
  background-color: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .25) !important;
  color: #fff !important;
}
.login-tfa-field input { color: #fff !important; }

/* Footer "Powered by G-Carma" */
.login-footer {
  position: fixed;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  letter-spacing: .2px;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.login-footer a {
  color: #b3d4ff;
  text-decoration: none;
  font-weight: 500;
  pointer-events: auto;
}
.login-footer a:hover {
  color: #fff;
  text-decoration: underline;
}