/* P13 · Estados de carga (Fase 1, 2026-11-09)
   Solo presentación: no cambia IDs ni contenedores. Los textos "Cargando…" siguen en el DOM
   para lectores de pantalla; visualmente se reemplazan por bloques de carga.
   Vacío (.empty) y error (.error) conservan su aspecto propio y no reciben esta capa.
   Solo tema claro: el panel no tiene modo oscuro (P20 pospuesto).
*/
:root {
    --skeleton-base: rgba(120, 40, 168, .07);
    --skeleton-shine: rgba(255, 255, 255, .65);
}

@keyframes skeleton-shine { from { background-position: -240px 0, 0 0; } to { background-position: calc(100% + 240px) 0, 0 0; } }

/* Tablas y listas: tres renglones de carga en lugar del texto. */
html td.loading,
html div.loading:not(.estado-item) {
    position: relative;
    color: transparent !important;
    min-height: 132px;
    padding: 24px !important;
    background:
        linear-gradient(90deg, transparent, var(--skeleton-shine), transparent) no-repeat,
        linear-gradient(var(--skeleton-base) 0 0) no-repeat 24px 24px / calc(100% - 48px) 14px,
        linear-gradient(var(--skeleton-base) 0 0) no-repeat 24px 58px / calc(78% - 48px) 14px,
        linear-gradient(var(--skeleton-base) 0 0) no-repeat 24px 92px / calc(56% - 48px) 14px;
    background-size: 240px 100%, calc(100% - 48px) 14px, calc(78% - 48px) 14px, calc(56% - 48px) 14px;
    background-position: -240px 0, 24px 24px, 24px 58px, 24px 92px;
    animation: skeleton-shine-rows 1.4s ease-in-out infinite;
}
html td.loading { height: 132px; }
@keyframes skeleton-shine-rows {
    from { background-position: -240px 0, 24px 24px, 24px 58px, 24px 92px; }
    to   { background-position: calc(100% + 240px) 0, 24px 24px, 24px 58px, 24px 92px; }
}

/* Indicadores del Resumen: el valor y la tendencia arrancan vacíos y muestran un bloque hasta tener dato. */
html .card-info p:empty,
html .card-info .trend:empty {
    display: block;
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent, var(--skeleton-shine), transparent) no-repeat,
        var(--skeleton-base);
    background-size: 120px 100%, 100% 100%;
    animation: skeleton-shine 1.4s ease-in-out infinite;
}
html .card-info p:empty { width: 72px; height: 32px; margin: 6px 0; }
html .card-info .trend:empty { width: 96px; height: 12px; }

/* Distribución de estados: chips de carga. */
html .estado-item.loading {
    color: transparent !important;
    min-height: 72px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, transparent, var(--skeleton-shine), transparent) no-repeat,
        var(--skeleton-base);
    background-size: 160px 100%, 100% 100%;
    animation: skeleton-shine 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    html td.loading, html div.loading, html .card-info p:empty, html .card-info .trend:empty, html .estado-item.loading { animation: none; }
}