/* Animación de Carga Tecnológica - Creatoria */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
}

.loading-container {
    text-align: center;
    color: white;
}

.loading-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(45deg, #00d4ff, #ff6b6b, #4ecdc4, #45b7d1);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

.loading-subtitle {
    font-size: 1.2rem;
    color: #b8b8d1;
    margin-bottom: 3rem;
    font-weight: 300;
}

/* Contenedor de los 5 cuadros */
.loading-boxes {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.loading-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(45deg, #00d4ff, #4ecdc4);
    position: relative;
    animation: boxFloat 2s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3);
}

.loading-box:nth-child(1) { animation-delay: 0s; }
.loading-box:nth-child(2) { animation-delay: 0.2s; }
.loading-box:nth-child(3) { animation-delay: 0.4s; }
.loading-box:nth-child(4) { animation-delay: 0.6s; }
.loading-box:nth-child(5) { animation-delay: 0.8s; }

/* Iconos dentro de los cuadros */
.loading-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
}

.loading-box:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2M21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.11 3.89 23 5 23H19C20.11 23 21 22.11 21 21V9M19 9H14V4H5V21H19V9Z'/%3E%3C/svg%3E");
}

.loading-box:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20A8 8 0 0 1 4 12A8 8 0 0 1 12 4M12 6A6 6 0 0 0 6 12A6 6 0 0 0 12 18A6 6 0 0 0 18 12A6 6 0 0 0 12 6M12 8A4 4 0 0 1 16 12A4 4 0 0 1 12 16A4 4 0 0 1 8 12A4 4 0 0 1 12 8Z'/%3E%3C/svg%3E");
}

.loading-box:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z'/%3E%3C/svg%3E");
}

.loading-box:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 6C9.79 6 8 7.79 8 10C8 12.21 9.79 14 12 14C14.21 14 16 12.21 16 10C16 7.79 14.21 6 12 6ZM12 12C10.9 12 10 11.1 10 10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10C14 11.1 13.1 12 12 12Z'/%3E%3C/svg%3E");
}

.loading-box:nth-child(5)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z'/%3E%3C/svg%3E");
}

/* Barra de progreso */
.progress-bar {
    width: 300px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #4ecdc4, #ff6b6b);
    border-radius: 3px;
    width: 0%;
    animation: progressFill 3s ease-in-out infinite;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

/* Partículas flotantes */
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00d4ff;
    border-radius: 50%;
    animation: particleFloat 6s linear infinite;
    opacity: 0.6;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; }
.particle:nth-child(4) { left: 40%; animation-delay: 3s; }
.particle:nth-child(5) { left: 50%; animation-delay: 4s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; }
.particle:nth-child(7) { left: 70%; animation-delay: 0s; }
.particle:nth-child(8) { left: 80%; animation-delay: 1s; }
.particle:nth-child(9) { left: 90%; animation-delay: 2s; }

/* Mensajes de estado */
.status-message {
    font-size: 1.1rem;
    color: #ffffff;
    margin-top: 1rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    animation: messageFade 0.8s ease-out forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    position: relative;
}

/* Animaciones */
@keyframes boxFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3);
    }
    50% {
        transform: translateY(-20px) scale(1.1);
        box-shadow: 0 20px 40px rgba(0, 212, 255, 0.5);
    }
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes progressFill {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes messageFade {
    0% { 
        opacity: 0; 
        transform: translateY(20px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Mensajes específicos - ahora se controlan desde JavaScript */

/* Responsive */
@media (max-width: 768px) {
    .loading-title {
        font-size: 2rem;
    }
    
    .loading-boxes {
        gap: 0.5rem;
    }
    
    .loading-box {
        width: 50px;
        height: 50px;
    }
    
    .progress-bar {
        width: 250px;
    }
}

/* Efecto de entrada */
.loading-overlay {
    animation: fadeIn 0.5s ease-out;
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(10px);
        transform: scale(1);
    }
}

/* Efecto de salida */
.loading-overlay.fade-out {
    animation: fadeOut 0.5s ease-in forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        backdrop-filter: blur(10px);
        transform: scale(1);
    }
    to {
        opacity: 0;
        backdrop-filter: blur(0px);
        transform: scale(0.95);
    }
}