/* ═══ skeleton.css — Loaders con efecto shimmer ═══ */

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-muted) 0%,
        var(--bg-hover) 50%,
        var(--bg-muted) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    min-height: 16px;
    animation: skeleton-shimmer 1.5s linear infinite;
    pointer-events: none;
    user-select: none;
}

.skeleton-text   { height: 14px; margin: 6px 0; }
.skeleton-title  { height: 24px; width: 60%; margin-bottom: 12px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card   { height: 120px; }
.skeleton-row    { height: 48px; margin: 8px 0; }
.skeleton-chip   { height: 22px; width: 80px; display: inline-block; margin-right: 6px; border-radius: var(--radius-full); }
.skeleton-btn    { height: 36px; width: 120px; }

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Contenedor opaco mientras los skeletons son visibles */
.skeleton-container { opacity: 1; transition: opacity 0.2s ease; }
.skeleton-container.loaded { opacity: 1; }