/* ================================================================
   Integrapps — components/skeletons.css
   Loading states: shimmer, loading rows, skeleton variants.
   ================================================================ */

/* ── Shimmer base ───────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-100) 25%,
        var(--gray-50)  50%,
        var(--gray-100) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* ── Variantes ──────────────────────────────────────────────────── */
.skeleton-text  { height: 14px; margin: 4px 0; }
.skeleton-label { height: 11px; width: 60%; }
.skeleton-badge {
    height: 22px;
    width: 80px;
    border-radius: var(--radius-full);
}
.skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.skeleton-stat-card {
    height: 90px;
    border-radius: var(--radius-lg);
}
.skeleton-title { height: 20px; width: 40%; margin-bottom: var(--space-2); }
.skeleton-line  { height: 14px; margin-bottom: var(--space-1); }
.skeleton-line:last-child { width: 70%; }

/* ── Fila de tabla skeleton ─────────────────────────────────────── */
.skeleton-row {
    border-bottom: 1px solid var(--gray-100);
}
.skeleton-row td {
    padding: var(--cell-py) var(--cell-px);
    vertical-align: middle;
}

/* ── Card skeleton ──────────────────────────────────────────────── */
.skeleton-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
}