/* Estilos generales */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotateX(0deg);
    }
    50% {
        transform: translateY(-10px) rotateX(2deg);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-12deg);
    }
    100% {
        transform: translateX(200%) skewX(-12deg);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px #00000040;
    }
    50% {
        box-shadow: 0 0 40px #00000080, 0 0 60px #00000040;
    }
}

@keyframes mega-pulse {
    0%, 100% {
        box-shadow: 0 0 30px #00000060, 0 0 60px #00000040, 0 0 90px #00000020;
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 50px #00000080, 0 0 100px #00000060, 0 0 150px #00000040;
        transform: scale(1.02);
    }
}

@keyframes progress-glow {
    0%, 100% {
        box-shadow: 0 0 10px #00000080, inset 0 0 10px #00000040;
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 20px #000000ff, inset 0 0 20px #00000080;
        filter: brightness(1.3);
    }
}

@keyframes progress-advance {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes progress-flash {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}

.animate-mega-pulse {
    animation: mega-pulse 1.5s infinite;
}

.animate-progress-glow {
    animation: progress-glow 1.5s ease-in-out infinite;
}

.animate-progress-advance {
    animation: progress-advance 2s linear infinite;
}

.animate-progress-flash {
    animation: progress-flash 1s ease-in-out infinite;
}

/* Estilos para notificaciones */
#notificationsContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
}

.notification {
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

.notification.hide {
    transform: translateX(120%);
    opacity: 0;
}

/* Estilos para botones de números */
.number-button {
    transition: all 0.2s ease-in-out;
}

.number-button:hover {
    transform: scale(1.05);
}

.number-button.sold {
    background-color: #ef4444 !important;
    color: white !important;
    opacity: 0.7;
    cursor: not-allowed;
}

.number-button.reserved {
    background-color: #f59e0b !important;
    color: white !important;
    opacity: 0.8;
    cursor: not-allowed;
}

/* Estilos para modales */
.modal-content {
    transition: all 0.3s ease-in-out;
}

/* Estilos para paginación */
.progress-updated {
    animation: pulse-glow 0.5s ease-in-out;
}

.bg-pattern::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.05;
    background-image: url('../img/pattern.svg');
    background-space: space;
    background-position: 300px 70px;
    background-size: 300px;
}