/* Inicio de sesión y verificación por correo */

/* ================================================================ login */
.auth { min-height: calc(100vh / var(--zoom, 1)); display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 64px clamp(32px, 6vw, 96px);
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(124, 124, 255, .35), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, rgba(236, 72, 153, .25), transparent 60%),
    #11121c;
  color: #fff;
}
.auth-logo {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; background: var(--accent); color: var(--accent-text); box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 50%, transparent); overflow: hidden;
}
.auth-logo .icon { width: 26px; height: 26px; }
.auth-brand h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -.02em; }
.auth-brand p { max-width: 420px; color: #b9bdd6; font-size: 16px; }
.auth-brand ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.auth-brand li { display: flex; align-items: center; gap: 12px; color: #dfe1ef; }
.auth-brand li .icon { color: #a5a5ff; }
.auth-panel { display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 400px; display: grid; gap: 16px; }
.auth-card h2 { font-size: 24px; margin-top: 8px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 10px; background: var(--surface-3); }
.auth-tabs button { height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; }
.auth-tabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ================================================================ verificación por correo (login) */
.auth-notice { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); font-size: 13px; font-weight: 600; }
.auth-notice .icon { width: 16px; height: 16px; flex-shrink: 0; }
.verify-card { text-align: center; justify-items: center; }
.verify-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.verify-icon .icon { width: 30px; height: 30px; }
.verify-email { font: 600 15px var(--mono); letter-spacing: .02em; padding: 8px 14px; border-radius: 9px; background: var(--surface-3); overflow-wrap: anywhere; }
.verify-code { display: flex; gap: 8px; width: 100%; }
.verify-code input { flex: 1; text-align: center; font: 600 22px var(--mono); letter-spacing: 8px; }
.verify-wait { display: flex; align-items: center; gap: 8px; justify-content: center; }
.verify-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-forgot { justify-self: center; margin-top: 2px; }

/* Login: colores de Nexora y una red de nodos que flota despacio */
.auth-brand {
  background:
    radial-gradient(800px 420px at 0% 0%, color-mix(in srgb, #84cc16 22%, transparent), transparent 60%),
    radial-gradient(640px 420px at 100% 100%, rgba(99, 102, 241, .28), transparent 60%),
    #11121c;
}
.auth-brand li .icon { color: #a3e635; }
.auth-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.auth-net g { animation: net-float 14s ease-in-out infinite alternate; transform-origin: center; }
.auth-net g:nth-child(2) { animation-duration: 18s; animation-direction: alternate-reverse; }
.auth-brand > :not(.auth-net) { position: relative; z-index: 1; }
@keyframes net-float { to { transform: translate(18px, -14px); } }

.auth-brand h1 .version-tag { margin-left: 6px; border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .75); vertical-align: 4px; }
.auth-brand h1 .version-tag.is-dev { color: #fbbf24; }