:root {
    --skeleton-base: var(--bs-secondary-bg, #e9ecef);
    --skeleton-brillo: var(--bs-body-bg, #fff);
    --skeleton-radio: 6px;
    --skeleton-velocidad: 1.4s;
}

:root[data-bs-theme="dark"] {
    --skeleton-base: var(--bs-tertiary-bg, #2b3035);
    --skeleton-brillo: var(--bs-secondary-bg, #3a4046);
}

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

.skeleton {
    display: block;
    height: 12px;
    border-radius: var(--skeleton-radio);
    background-color: var(--skeleton-base);
    background-image: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-brillo) 50%,
        var(--skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer var(--skeleton-velocidad) ease-in-out infinite;
}

.skeleton-text  { height: 12px; }
.skeleton-title { height: 24px; border-radius: 8px; }
.skeleton-badge { height: 20px; width: 64px; border-radius: 999px; }

.skeleton-w-25  { width: 25%; }
.skeleton-w-50  { width: 50%; }
.skeleton-w-75  { width: 75%; }
.skeleton-w-100 { width: 100%; }

.skeleton + .skeleton { margin-top: 10px; }

.skeleton-screen {
    padding: 8px 0 4px;
}

.skeleton-screen__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.skeleton-screen__actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.skeleton-screen__cards {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.skeleton-screen__card {
    flex: 1 1 200px;
    min-width: 180px;
    height: 76px;
    border-radius: 10px;
}

.skeleton-table {
    width: 100%;
    padding: 4px 0;
}

.skeleton-table__row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 4px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.skeleton-table__row--head {
    border-bottom-width: 2px;
}

.skeleton-table__cell {
    flex: 1 1 0;
    min-width: 0;
}

.skeleton-table__row--head .skeleton-table__cell .skeleton {
    height: 10px;
}

.skeleton-table__row:nth-child(2) .skeleton { animation-delay: .08s; }
.skeleton-table__row:nth-child(3) .skeleton { animation-delay: .16s; }
.skeleton-table__row:nth-child(4) .skeleton { animation-delay: .24s; }
.skeleton-table__row:nth-child(5) .skeleton { animation-delay: .32s; }
.skeleton-table__row:nth-child(6) .skeleton { animation-delay: .40s; }
.skeleton-table__row:nth-child(7) .skeleton { animation-delay: .48s; }

@media (max-width: 767.98px) {
    .skeleton-table__row .skeleton-table__cell:nth-child(n+5) { display: none; }
}

/* ── Accesibilidad ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        background-image: none;
        animation: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Estados vacios: que un listado sin datos explique que pasa y como seguir,
   en vez de dejar un panel en blanco o tirar un alert de error (no encontrar
   resultados no es un error).
   ────────────────────────────────────────────────────────────────────── */

.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 460px;
    margin: 0 auto;
    padding: 56px 24px;
    text-align: center;
}

.estado-vacio__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 34px;
    line-height: 1;
}

.estado-vacio__titulo {
    margin: 0 0 8px;
    color: var(--bs-body-color, #212529);
    font-size: 1.05rem;
    font-weight: 600;
}

.estado-vacio__texto {
    margin: 0;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .9rem;
    line-height: 1.5;
}

.estado-vacio__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

/* Variante para cuando la consulta no trajo nada: el icono toma el color de
   aviso, sin llegar al rojo de error. */
.estado-vacio--sin-resultados .estado-vacio__icono {
    background: rgba(var(--bs-warning-rgb, 255, 193, 7), .14);
    color: var(--bs-warning-text-emphasis, #997404);
}