/* ============================================
   Softland ERP - Skeleton Loader
   Loading placeholder animado para el sidebar
   ============================================ */

.skeleton-loader {
    padding: 1rem 0.5rem;
}

.skeleton-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: #FFFFFF;
    border-radius: 6px;
}

.skeleton-icon {
    width: 1rem;
    height: 1rem;
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    flex-shrink: 0;
}

.skeleton-text {
    height: 0.75rem;
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    flex: 1;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

.skeleton-text.long {
    width: 100%;
}

/* Skeleton para el botón hamburguesa */
.skeleton-hamburger {
    width: 1.5rem;
    height: 1.5rem;
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin: 0.5rem auto 1rem;
}

/* Skeleton para el input de búsqueda */
.skeleton-search {
    height: 2rem;
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
    margin-bottom: 1rem;
}

/* Animación shimmer */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton cuando está colapsado */
.content-menu:not(.open-menu) .skeleton-loader {
    padding: 0.75rem 0.25rem;
}

.content-menu:not(.open-menu) .skeleton-item {
    padding: 0.75rem;
    justify-content: center;
}

.content-menu:not(.open-menu) .skeleton-text {
    display: none;
}

.content-menu:not(.open-menu) .skeleton-icon {
    margin: 0 auto;
}

/* Variación de delays para efecto más natural */
.skeleton-item:nth-child(1) .skeleton-icon,
.skeleton-item:nth-child(1) .skeleton-text {
    animation-delay: 0s;
}

.skeleton-item:nth-child(2) .skeleton-icon,
.skeleton-item:nth-child(2) .skeleton-text {
    animation-delay: 0.1s;
}

.skeleton-item:nth-child(3) .skeleton-icon,
.skeleton-item:nth-child(3) .skeleton-text {
    animation-delay: 0.2s;
}

.skeleton-item:nth-child(4) .skeleton-icon,
.skeleton-item:nth-child(4) .skeleton-text {
    animation-delay: 0.3s;
}

.skeleton-item:nth-child(5) .skeleton-icon,
.skeleton-item:nth-child(5) .skeleton-text {
    animation-delay: 0.4s;
}

.skeleton-item:nth-child(6) .skeleton-icon,
.skeleton-item:nth-child(6) .skeleton-text {
    animation-delay: 0.5s;
}

.skeleton-item:nth-child(7) .skeleton-icon,
.skeleton-item:nth-child(7) .skeleton-text {
    animation-delay: 0.6s;
}

.skeleton-item:nth-child(8) .skeleton-icon,
.skeleton-item:nth-child(8) .skeleton-text {
    animation-delay: 0.7s;
}

/* Fade out suave cuando termina de cargar */
.skeleton-loader.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}