/* Estilos para la pantalla de carga */
:root {
    --primary: #1B3463; /* Azul marino */
    --secondary: #4A90B0; /* Azul claro */
    --text-dark: #666666; /* Gris oscuro */
    --white: #FFFFFF; /* Blanco */
    --black: #000000; /* Negro */
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background);
    z-index: 1;
}

.loader-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.loader-logo {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
}

/* Nuevo contenedor para la animación del snake */
.snake-container {
    position: absolute;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    top: 30px;
    left: 30px;
    overflow: hidden;
}

/* Un solo segmento de Snake que se mueve por los bordes */
.snake-segment {
    position: absolute;
    background-color: var(--white);
    border-radius: 2px;
    animation: snakeMovement 6s linear infinite;
}

/* Animación unificada para el movimiento del Snake */
@keyframes snakeMovement {
    /* Arriba, moviéndose de izquierda a derecha */
    0% {
        width: 0;
        height: 4px;
        top: 0;
        left: 0;
    }
    20% {
        width: 100%;
        height: 4px;
        top: 0;
        left: 0;
    }
    
    /* Derecha, moviéndose de arriba a abajo */
    25% {
        width: 4px;
        height: 0;
        top: 0;
        left: calc(100% - 4px);
    }
    45% {
        width: 4px;
        height: 100%;
        top: 0;
        left: calc(100% - 4px);
    }
    
    /* Abajo, moviéndose de derecha a izquierda */
    50% {
        width: 0;
        height: 4px;
        top: calc(100% - 4px);
        left: 100%;
    }
    70% {
        width: 100%;
        height: 4px;
        top: calc(100% - 4px);
        left: 0;
    }
    
    /* Izquierda, moviéndose de abajo a arriba */
    75% {
        width: 4px;
        height: 0;
        top: 100%;
        left: 0;
    }
    95% {
        width: 4px;
        height: 100%;
        top: 0;
        left: 0;
    }
    
    /* Volver al inicio */
    100% {
        width: 0;
        height: 4px;
        top: 0;
        left: 0;
    }
}

.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 768px) {
    .loader-logo {
        width: 120px;
    }
    
    .snake-container {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        top: 20px;
        left: 20px;
    }
}

@media (max-width: 480px) {
    .loader-logo {
        width: 100px;
    }
    
    .snake-container {
        width: calc(100% - 30px);
        height: calc(100% - 30px);
        top: 15px;
        left: 15px;
    }
    
    .snake-segment {
        height: 3px;
    }
    
    @keyframes snakeMovement {
        /* Mismo keyframes pero ajustado para la altura de 3px */
        0% {
            width: 0;
            height: 3px;
            top: 0;
            left: 0;
        }
        20% {
            width: 100%;
            height: 3px;
            top: 0;
            left: 0;
        }
        
        25% {
            width: 3px;
            height: 0;
            top: 0;
            left: calc(100% - 3px);
        }
        45% {
            width: 3px;
            height: 100%;
            top: 0;
            left: calc(100% - 3px);
        }
        
        50% {
            width: 0;
            height: 3px;
            top: calc(100% - 3px);
            left: 100%;
        }
        70% {
            width: 100%;
            height: 3px;
            top: calc(100% - 3px);
            left: 0;
        }
        
        75% {
            width: 3px;
            height: 0;
            top: 100%;
            left: 0;
        }
        95% {
            width: 3px;
            height: 100%;
            top: 0;
            left: 0;
        }
        
        100% {
            width: 0;
            height: 3px;
            top: 0;
            left: 0;
        }
    }
}