/* Skeleton Loader Styles */
.skeleton-loader {
    position: relative;
    overflow: hidden;
    background-color: #f2f2f2;
    border-radius: 4px;
}

.skeleton-loader::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

/* Animación de onda */
.skeleton-loader.wave::after {
    animation: skeleton-loading 1.5s infinite;
}

/* Animación de pulso */
.skeleton-loader.pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-loader.pulse::after {
    display: none;
}

/* Sin animación */
.skeleton-loader.none::after {
    display: none;
}

.skeleton-loader.none {
    animation: none;
}

/* Tipos específicos de skeleton */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 70%;
    margin-bottom: 0;
}

.skeleton-text:nth-child(even) {
    width: 85%;
}

.skeleton-image {
    width: 100%;
    border-radius: 8px;
}

.skeleton-card {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skeleton-card-header {
    height: 20px;
    margin-bottom: 15px;
    border-radius: 4px;
    width: 60%;
}

.skeleton-card-content {
    height: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-card-content:last-child {
    width: 80%;
}

/* Contenedor de skeleton */
.skeleton-container {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.skeleton-container.loaded {
    opacity: 0;
    pointer-events: none;
}

/* El contenido real se oculta inicialmente */
.elementor-widget-container.skeleton-loading > *:not(.skeleton-container) {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.elementor-widget-container.skeleton-loaded > *:not(.skeleton-container) {
    opacity: 1;
}

.elementor-widget-container.skeleton-loaded .skeleton-container {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .skeleton-card {
        padding: 15px;
    }
    
    .skeleton-text {
        height: 14px;
    }
}

/* Keyframes para animaciones */
@keyframes skeleton-loading {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* Variaciones de colores para diferentes temas */
.elementor-widget-container[data-skeleton-theme="dark"] .skeleton-loader {
    background-color: #2c2c2c;
}

.elementor-widget-container[data-skeleton-theme="dark"] .skeleton-loader::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
}

/* Estilos para diferentes anchos de skeleton */
.skeleton-text.width-100 { width: 100%; }
.skeleton-text.width-90 { width: 90%; }
.skeleton-text.width-80 { width: 80%; }
.skeleton-text.width-70 { width: 70%; }
.skeleton-text.width-60 { width: 60%; }
.skeleton-text.width-50 { width: 50%; }