/* ==========================================================================
   Skeleton de página — placeholder mientras carga el contenido principal
   ==========================================================================
   El preloader global cubre el 99% de los casos. Esta hoja solo afecta
   elementos con la clase `.app-skeleton-shimmer` que se quieran mostrar
   "esqueléticos" mientras se cargan datos vía AJAX o lazy.

   Se aplica con un shimmer animado oro suave para mantener consistencia
   con el theme.
   ========================================================================== */

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

.app-skeleton-shimmer {
    background: linear-gradient(
        90deg,
        var(--fl-fondo-sutil) 0%,
        color-mix(in srgb, var(--fl-acento-suave) 35%, var(--fl-fondo-sutil)) 50%,
        var(--fl-fondo-sutil) 100%
    );
    background-size: 200% 100%;
    animation: app-skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--fl-r-md);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
    min-height: 1em;
}

.app-skeleton-shimmer * { visibility: hidden; }

/* Variantes */
.app-skeleton-linea  { height: 1em; max-width: 80%; }
.app-skeleton-lineaCorta { height: 1em; max-width: 40%; }
.app-skeleton-bloque { height: 80px; }
.app-skeleton-circulo {
    border-radius: 50%;
    width: 48px; height: 48px;
}

@media (prefers-reduced-motion: reduce) {
    .app-skeleton-shimmer { animation: none; }
}