/* ==========================================================================
   NOX BOT — Páginas de cuenta (login, registro, recuperar, restablecer)
   Usa los tokens, cabecera, footer y botones de inicio.css.
   ========================================================================== */

.auth-main {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 64px);
  padding: 64px 24px 96px;
}

.access-section { width: 100%; }

.login-module {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px;
  background: linear-gradient(180deg, rgba(107, 30, 255, .16) 0%, var(--panel) 28%);
  border-radius: var(--radius-panel);
  box-shadow: 0 0 0 1px var(--ring);
}
.access-section.wide .login-module { max-width: 640px; }

.login-head {
  margin-bottom: 12px;
  color: var(--brand-text);
  font-size: 13px;
  font-weight: 600;
}
.login-head i { display: none; }

.login-module h3 {
  color: var(--white);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.login-module > p {
  margin-top: 8px;
  font-size: 15px;
}

.alert {
  margin-top: 20px;
  padding: 10px 12px;
  background: rgba(251, 132, 142, .1);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(251, 132, 142, .35);
  color: #FDA4AF;
  font-size: 14px;
}

.login-module form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.login-module label {
  display: grid;
  gap: 6px;
  color: var(--frost);
  font-size: 14px;
  font-weight: 500;
}

.login-module input,
.login-module select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: var(--bg);
  border: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--ring-2);
  color: var(--white);
  color-scheme: dark;
  font: inherit;
  font-size: 15px;
  transition: box-shadow .15s;
}
.login-module input::placeholder { color: var(--muted); }
.login-module input:focus,
.login-module select:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--brand-text), 0 0 0 3px var(--brand-soft);
}

.form-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 560px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}

.password-field { position: relative; }
.password-field input { padding-right: 44px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  color: var(--muted);
  transform: translateY(-50%);
  transition: color .15s;
}
.password-toggle:hover { color: var(--frost); }
.password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hint { font-size: 13px; }

.login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 4px;
  background: var(--brand);
  border-radius: var(--radius);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  transition: background-color .15s;
}
.login-submit:hover { background: var(--brand-hover); }

.forgot-link {
  margin-top: 16px;
  font-size: 14px;
}
.forgot-link a,
.login-foot a {
  color: var(--brand-text);
  font-weight: 600;
}

.login-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ring);
  font-size: 14px;
}

@media (max-width: 480px) {
  .login-module { padding: 24px 20px; }
}

/* Botón con carga: spinner de 12 aspas (basado en uiverse.io/mrhyddenn/black-bullfrog-16) */
.login-submit { position: relative; }
.login-submit.is-loading {
  color: transparent;
  pointer-events: none;
  cursor: progress;
}
.login-submit.is-loading > iconify-icon { visibility: hidden; }
.login-submit .spinner {
  position: absolute;
  inset: 0;
  display: none;
  width: 1em;
  height: 1em;
  margin: auto;
  font-size: 22px;
}
.login-submit.is-loading .spinner { display: block; }
.spinner-blade {
  position: absolute;
  left: 0.4629em;
  bottom: 0;
  width: 0.074em;
  height: 0.2777em;
  border-radius: 0.0555em;
  background-color: transparent;
  transform-origin: center -0.2222em;
  animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) { animation-delay: 0.000s; transform: rotate(0deg); }
.spinner-blade:nth-child(2) { animation-delay: 0.083s; transform: rotate(30deg); }
.spinner-blade:nth-child(3) { animation-delay: 0.166s; transform: rotate(60deg); }
.spinner-blade:nth-child(4) { animation-delay: 0.249s; transform: rotate(90deg); }
.spinner-blade:nth-child(5) { animation-delay: 0.332s; transform: rotate(120deg); }
.spinner-blade:nth-child(6) { animation-delay: 0.415s; transform: rotate(150deg); }
.spinner-blade:nth-child(7) { animation-delay: 0.498s; transform: rotate(180deg); }
.spinner-blade:nth-child(8) { animation-delay: 0.581s; transform: rotate(210deg); }
.spinner-blade:nth-child(9) { animation-delay: 0.664s; transform: rotate(240deg); }
.spinner-blade:nth-child(10) { animation-delay: 0.747s; transform: rotate(270deg); }
.spinner-blade:nth-child(11) { animation-delay: 0.830s; transform: rotate(300deg); }
.spinner-blade:nth-child(12) { animation-delay: 0.913s; transform: rotate(330deg); }
@keyframes spinner-fade {
  0% { background-color: #fff; }
  100% { background-color: transparent; }
}