/*
 * Skeleton screens: siluetas grises con un brillo que avanza mientras llega el contenido real.
 * Las arman esqueletos-scripts.js (contenido que llega por AJAX) y parciales/esqueleto_*.php (estado inicial).
 * Medidas copiadas de las tarjetas reales para que la página no salte al reemplazarlas.
 */
:root {
    --esqueleto-base: #e6e9ef;
    --esqueleto-brillo: #f4f6f9;
}

.esqueleto {
    display: block;
    background: linear-gradient(90deg, var(--esqueleto-base) 25%, var(--esqueleto-brillo) 37%, var(--esqueleto-base) 63%);
    background-size: 400% 100%;
    border-radius: .375rem;
    animation: esqueleto-brillo 1.4s ease infinite;
}

@keyframes esqueleto-brillo {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

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

.esqueleto-linea { height: .85rem; margin-bottom: .6rem; }
.esqueleto-linea--titulo { height: 1.15rem; width: 80%; }
.esqueleto-linea--corta { width: 45%; }
.esqueleto-linea--media { width: 65%; }
.esqueleto-boton { height: 1.9rem; width: 7rem; margin: 0 auto; }
.esqueleto-texto { display: inline-block; height: 1em; width: 3.5em; vertical-align: middle; }

.esqueleto-tarjeta { pointer-events: none; }
.esqueleto-tarjeta .esqueleto-imagen { height: 13.35rem; border-radius: .375rem .375rem 0 0; }
.esqueleto-tarjeta--hotel .card-body { min-height: 212px; }
.esqueleto-tarjeta--evento .esqueleto-imagen { height: 12rem; }

.esqueleto-pais { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0 .9rem 1rem; }
.esqueleto-pais .esqueleto-bandera { width: 4.5rem; height: 3rem; }
.esqueleto-pais .esqueleto-linea { width: 4.5rem; margin: 0; }

.esqueleto-galeria { width: 25rem; max-width: 100%; height: 16rem; margin: 0 auto; }