/* SPINNER ULTRA PRO - SIN INTERFERENCIAS */
#app .ultra-loading-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: linear-gradient(135deg, #2E86AB 0%, #1F5F8B 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

    #app .ultra-loading-container * {
        box-sizing: border-box !important;
    }

    #app .ultra-loading-container .loading-brand {
        margin: 0 0 4rem 0 !important;
        padding: 0 !important;
        text-align: center !important;
        animation: fadeInUp 1s ease-out !important;
    }

    #app .ultra-loading-container .brand-title {
        font-size: 5rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        text-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 40px rgba(255,255,255,0.1) !important;
        letter-spacing: 4px !important;
        animation: glow 2s ease-in-out infinite alternate !important;
        line-height: 1.1 !important;
        font-family: inherit !important;
    }

    #app .ultra-loading-container .brand-subtitle {
        font-size: 1.4rem !important;
        color: rgba(255,255,255,0.95) !important;
        margin: 1.5rem 0 0 0 !important;
        padding: 0 !important;
        font-weight: 300 !important;
        letter-spacing: 2px !important;
        font-family: inherit !important;
    }

    #app .ultra-loading-container .ultra-spinner {
        position: relative !important;
        width: 160px !important;
        height: 160px !important;
        margin: 4rem 0 !important;
    }

    #app .ultra-loading-container .spinner-ring {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }

    #app .ultra-loading-container .ring-segment {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        border: 5px solid transparent !important;
        border-radius: 50% !important;
        top: 0 !important;
        left: 0 !important;
        animation: spinRing 2s linear infinite !important;
    }

        #app .ultra-loading-container .ring-segment:nth-child(1) {
            border-top-color: #ffffff !important;
            animation-delay: 0s !important;
            animation-duration: 2s !important;
        }

        #app .ultra-loading-container .ring-segment:nth-child(2) {
            border-right-color: rgba(255,255,255,0.8) !important;
            animation-delay: 0.5s !important;
            animation-duration: 2.5s !important;
        }

        #app .ultra-loading-container .ring-segment:nth-child(3) {
            border-bottom-color: rgba(255,255,255,0.6) !important;
            animation-delay: 1s !important;
            animation-duration: 3s !important;
        }

        #app .ultra-loading-container .ring-segment:nth-child(4) {
            border-left-color: rgba(255,255,255,0.4) !important;
            animation-delay: 1.5s !important;
            animation-duration: 3.5s !important;
        }

    #app .ultra-loading-container .spinner-pulse {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 30px !important;
        height: 30px !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        transform: translate(-50%, -50%) !important;
        animation: pulseCenter 1.5s ease-in-out infinite !important;
        box-shadow: 0 0 30px rgba(255,255,255,0.8) !important;
    }

    #app .ultra-loading-container .loading-status {
        margin: 4rem 0 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: 400px !important;
        max-width: 90vw !important;
    }

    #app .ultra-loading-container .status-bar {
        width: 100% !important;
        height: 8px !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        margin: 0 0 2rem 0 !important;
        position: relative !important;
    }

    #app .ultra-loading-container .status-progress {
        height: 100% !important;
        background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.8) 50%, #ffffff 100%) !important;
        border-radius: 4px !important;
        animation: progressBar 3s ease-in-out infinite !important;
        width: 0% !important;
    }

    #app .ultra-loading-container .status-text {
        color: rgba(255,255,255,0.95) !important;
        font-size: 1.2rem !important;
        font-weight: 400 !important;
        margin: 0 !important;
        padding: 0 !important;
        animation: textFade 2s ease-in-out infinite !important;
        font-family: inherit !important;
    }

/* ANIMACIONES ÚNICAS */
@keyframes spinRing {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseCenter {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0.4;
    }
}

@keyframes glow {
    0% {
        text-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 40px rgba(255,255,255,0.1);
    }

    100% {
        text-shadow: 0 4px 30px rgba(255,255,255,0.6), 0 0 60px rgba(255,255,255,0.3);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes progressBar {
    0% {
        width: 0%;
    }

    25% {
        width: 30%;
    }

    50% {
        width: 60%;
    }

    75% {
        width: 85%;
    }

    100% {
        width: 100%;
    }
}

@keyframes textFade {
    0%, 100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    #app .ultra-loading-container .brand-title {
        font-size: 3.5rem !important;
        letter-spacing: 2px !important;
    }

    #app .ultra-loading-container .ultra-spinner {
        width: 120px !important;
        height: 120px !important;
    }

    #app .ultra-loading-container .loading-status {
        width: 320px !important;
    }
}

@media (max-width: 480px) {
    #app .ultra-loading-container .brand-title {
        font-size: 2.8rem !important;
    }

    #app .ultra-loading-container .ultra-spinner {
        width: 100px !important;
        height: 100px !important;
    }

    #app .ultra-loading-container .spinner-pulse {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Botón de permisos de notificación */
.btn-outline-primary:hover {
    background-color: var(--primary-color, #3498db) !important;
    border-color: var(--primary-color, #3498db) !important;
    color: #ffffff !important;
}

/* Badge de estado con notificaciones */
.badge:has-text("🔔") {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    animation: pulse-subtle 2s infinite !important;
}

@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Indicadores de estado de conexión mejorados */
.badge {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 1rem !important;
}