/**
 * LOGIN MODAL — Dark premium override
 * NYXIVO · Reemplaza el tema gold/luxury por la paleta brand-blue
 * del diseño principal (mismo lenguaje que carrito y chat).
 */

/* === OVERLAY === */
.login-modal-overlay {
    background: rgba(2, 6, 23, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* === CONTAINER (ventana) === */
.login-modal-container {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #162032 100%) !important;
    border: 1px solid rgba(148, 197, 253, 0.18) !important;
    border-radius: 22px !important;
    box-shadow:
        0 25px 60px -12px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(96, 165, 250, 0.08),
        0 0 60px -20px rgba(59, 130, 246, 0.30) !important;
}

/* === HEADER === */
.login-modal-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-top: 2px solid #3b82f6 !important;
    border-bottom: 1px solid rgba(148, 197, 253, 0.12) !important;
    position: relative;
    overflow: hidden;
}

.login-modal-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(96, 165, 250, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(147, 197, 253, 0.10) 0%, transparent 45%);
    pointer-events: none;
    animation: headerPulse 4s ease-in-out infinite;
}

@keyframes headerPulse {
    0%, 100% { opacity: 0.85; }
    50%       { opacity: 1; }
}

/* === LOGO ICON (fallback) === */
.login-modal-logo-icon {
    box-shadow:
        0 0 20px rgba(96, 165, 250, 0.60),
        0 0 50px rgba(59, 130, 246, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    animation: logoGlow 3s ease-in-out infinite;
}

/* === LOGO IMG (cuando hay logo de la empresa) === */
.login-modal-logo-img {
    display: block;
    max-height: 75px;
    max-width: 210px;
    width: auto;
    margin: 0 auto 16px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 0 18px rgba(96, 165, 250, 0.70))
        drop-shadow(0 0 40px rgba(59, 130, 246, 0.40))
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.50))
        brightness(1.12);
    animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 14px rgba(96, 165, 250, 0.60))
            drop-shadow(0 0 35px rgba(59, 130, 246, 0.35))
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.50))
            brightness(1.10);
    }
    50% {
        filter:
            drop-shadow(0 0 24px rgba(147, 197, 253, 0.85))
            drop-shadow(0 0 55px rgba(96, 165, 250, 0.55))
            drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45))
            brightness(1.18);
    }
}

/* Halo detrás del logo */
.login-modal-logo-img::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.20) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* === LOGO ICON (fallback sin logo) === */
.login-modal-logo-icon {
    width: 58px !important;
    height: 58px !important;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        0 8px 24px -6px rgba(96, 165, 250, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    border-radius: 16px !important;
    color: #fff !important;
    margin: 0 auto 14px !important;
    font-size: 1.5rem !important;
    position: relative;
    z-index: 1;
}

/* === TÍTULO === */
.login-modal-title {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    background: linear-gradient(135deg, #ffffff 0%, #bfdbfe 60%, #93c5fd 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: none !important;
    position: relative;
    z-index: 1;
}

/* === SUBTÍTULO === */
.login-modal-subtitle {
    font-family: 'Inter', system-ui, sans-serif !important;
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    position: relative;
    z-index: 1;
}

/* === BOTÓN CLOSE === */
.login-modal-close {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #94a3b8 !important;
}
.login-modal-close:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #93c5fd !important;
    box-shadow: none !important;
}

/* === BODY DEL MODAL === */
.login-modal-body {
    background: linear-gradient(180deg, #1e293b 0%, #162032 100%) !important;
}

/* === LABELS === */
.login-form-label {
    color: #94a3b8 !important;
}

/* === INPUTS === */
.login-form-input {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(148, 197, 253, 0.18) !important;
    color: #f8fafc !important;
    border-radius: 11px !important;
}
.login-form-input:focus {
    border-color: rgba(96, 165, 250, 0.65) !important;
    background: rgba(59, 130, 246, 0.10) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}
.login-form-input::placeholder {
    color: rgba(148, 197, 253, 0.30) !important;
}

/* === ICONOS DEL FORM === */
.login-form-icon {
    color: #3b82f6 !important;
}
.toggle-password-icon {
    color: #3b82f6 !important;
}
.toggle-password-icon:hover {
    color: #60a5fa !important;
}

/* === BOTÓN SUBMIT === */
.login-form-btn {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 11px !important;
    box-shadow:
        0 4px 16px -4px rgba(96, 165, 250, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.login-form-btn:hover {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 50%, #2563eb 100%) !important;
    box-shadow:
        0 10px 28px -6px rgba(96, 165, 250, 0.70),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.login-form-btn:disabled {
    background: rgba(71, 85, 105, 0.45) !important;
    box-shadow: none !important;
}

/* === DIVIDER === */
.login-divider {
    color: rgba(255, 255, 255, 0.20) !important;
}
.login-divider::before,
.login-divider::after {
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.20), transparent) !important;
}

/* === FORGOT LINK === */
.login-forgot-row { margin-top: -8px; }

/* === FOOTER LINKS === */
.login-footer-text {
    color: #64748b !important;
}
.login-footer-link {
    color: #60a5fa !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
}
.login-footer-link:hover {
    color: #93c5fd !important;
}

/* === FORGOT LINK === */
.login-forgot-link {
    color: #60a5fa !important;
}
.login-forgot-link:hover {
    color: #93c5fd !important;
}

/* === LOADING SPINNER === */
.login-loading {
    border: 3px solid rgba(59, 130, 246, 0.12) !important;
    border-top: 3px solid #3b82f6 !important;
}

/* === ALERTS === */
.login-alert-error {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
    color: #fca5a5 !important;
}
.login-alert-success {
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.30) !important;
    color: #86efac !important;
}