/**
 * Login / registro — estética SaaS (glass, mesh, microinteracciones)
 */
@media (prefers-reduced-motion: reduce) {
    .auth-shell,
    .auth-card,
    .auth-bg-blob,
    .auth-filter-shift,
    .auth-alert {
        animation: none !important;
        transition: none !important;
    }
}

.auth-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-bg-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: #0b0f14;
}

.auth-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    animation: authBlobDrift 18s ease-in-out infinite;
}

.auth-bg-blob--1 {
    width: min(42rem, 90vw);
    height: min(42rem, 90vw);
    top: -15%;
    left: -10%;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.35), transparent 55%);
}

.auth-bg-blob--2 {
    width: min(36rem, 85vw);
    height: min(36rem, 85vw);
    bottom: -20%;
    right: -15%;
    background: radial-gradient(circle at 70% 60%, rgba(34, 211, 238, 0.22), transparent 50%);
    animation-delay: -6s;
}

.auth-bg-blob--3 {
    width: min(28rem, 70vw);
    height: min(28rem, 70vw);
    top: 40%;
    left: 35%;
    background: radial-gradient(circle, rgba(113, 113, 122, 0.12), transparent 60%);
    animation-delay: -12s;
}

.auth-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 100%);
    opacity: 0.5;
}

@keyframes authBlobDrift {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(2%, 3%) scale(1.03);
    }
    66% {
        transform: translate(-2%, -2%) scale(0.98);
    }
}

.auth-card {
    position: relative;
    z-index: 1;
    animation: authCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition:
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 200ms ease;
}

.auth-card:hover {
    transform: translateY(-2px) scale(1.004);
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.auth-card:focus-within {
    border-color: rgba(34, 211, 238, 0.15);
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-input {
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}

.auth-input:focus {
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.auth-btn-primary {
    transition:
        transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 180ms ease,
        filter 180ms ease;
}

.auth-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(34, 211, 238, 0.35);
}

.auth-btn-primary:active {
    transform: translateY(0);
}

.auth-alert {
    animation: authAlertIn 0.28s ease-out both;
}

@keyframes authAlertIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-filter-shift {
    animation: authFilterPulse 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes authFilterPulse {
    0% {
        opacity: 1;
    }
    45% {
        opacity: 0.92;
        transform: scale(0.997);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.auth-link {
    transition: color 150ms ease, opacity 150ms ease;
}

.auth-link:hover {
    opacity: 0.95;
}

.auth-brand-logo {
    display: block;
}