/* ============================================================================
   login.css — estilos exclusivos da tela de login
   ============================================================================ */

/* Painel ilustrativo (lado esquerdo no desktop) com malha de gradiente azul */
.login-aside {
  background-color: var(--color-primary-700);
  background-image:
    radial-gradient(at 18% 12%, rgba(77, 166, 255, .55) 0px, transparent 55%),
    radial-gradient(at 82% 8%, rgba(0, 102, 204, .65) 0px, transparent 50%),
    radial-gradient(at 70% 92%, rgba(0, 82, 163, .85) 0px, transparent 55%),
    radial-gradient(at 25% 88%, rgba(0, 121, 230, .50) 0px, transparent 50%);
  position: relative;
  overflow: hidden;
}

/* Grade sutil sobre o painel */
.login-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 40%, #000 60%, transparent 100%);
}

.login-aside>* {
  position: relative;
  z-index: 1;
}

/* Fundo do lado do formulário no tema escuro recebe leve textura */
.login-form-side {
  background:
    radial-gradient(at 100% 0%, rgba(0, 121, 230, .06) 0px, transparent 40%),
    var(--bg-app);
}

/* Aumenta a área clicável do botão de mostrar/ocultar senha */
.toggle-password {
  cursor: pointer;
}

/* ===== Logo do painel lateral ===== */
.brand-logo {
  width: 240px;
  margin: 0 auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* ===== Ícone dentro do input ===== */
.input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 1rem;
  pointer-events: none;
  z-index: 10;
  transition: color 0.2s ease;
}

.dark .input-icon {
  color: #6b7280;
}

.peer:focus~.input-icon {
  color: var(--color-primary-600);
}

.dark .peer:focus~.input-icon {
  color: var(--color-primary-400);
}

/* ===== Botão login - spinner ===== */
#btnlogin {
  position: relative;
  overflow: hidden;
}

#btnlogin.loading {
  pointer-events: none;
}

#btnlogin.loading .btn-text {
  opacity: 0;
}

#btnlogin .btn-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: login-spin 1s linear infinite !important;
}

#btnlogin .btn-spinner svg {
  width: 22px;
  height: 22px;
}

#btnlogin .btn-spinner svg .spinner-track {
  fill: #ffffff;
  fill-opacity: 0.3;
}

#btnlogin .btn-spinner svg .spinner-head {
  fill: #ffffff;
}

@keyframes login-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

#btnlogin.loading .btn-spinner {
  display: block;
}