/* Contenedor principal para los items del esqueleto */
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Espacio entre los items del esqueleto */
}

/* Estilo base para cada barra del esqueleto */
.skeleton-item {
    background-color: linear-gradient(90deg, #0106CB 0px, #0106CB 40px, #0106CB 80px); /* Color base del esqueleto (gris claro) */
    border-radius: 4px;      /* Bordes redondeados */
    position: relative;        /* Necesario para la animación del brillo */
    overflow: hidden;          /* Oculta el brillo cuando se sale del contenedor */

    /* Define el tamaño del esqueleto. ¡Ajusta esto a tu contenido! */
    height: 20px;
    width: 100%;
}

/* Puedes crear variaciones para simular diferentes tipos de contenido */
.skeleton-item.title {
    height: 30px;
    width: 100%;
    margin-bottom: 0.5rem;
}

.skeleton-item.text {
    height: 15px;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Animación de brillo (shimmer) */
.skeleton-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* El gradiente crea el efecto de brillo */
    background: linear-gradient(90deg, 
        transparent, 
        rgba(1, 4, 172, 0.7), 
        transparent
    );
    
    /* Animación: nombre, duración, tipo de curva, iteración */
    animation: shimmer 1.5s infinite linear;
}

/* Definición de la animación @keyframes */
@keyframes shimmer {
    0% {
        /* Inicia fuera de la vista a la izquierda */
        transform: translateX(-100%);
    }
    100% {
        /* Termina fuera de la vista a la derecha */
        transform: translateX(100%);
    }
}