/* ==========================================================================
   CARGA DE ESQUELETO (reutilizable: no depende de ninguna otra hoja)
   Bloques con la forma del contenido real mientras llegan los datos.
   Para otra pantalla o app: copiar este archivo y esqueleto.js, y ajustar los dos colores.
   ========================================================================== */
:root {
  --esq-base: #E5EAF2;                    /* el gris azulado de los bloques */
  --esq-brillo: rgba(255, 255, 255, .6);  /* la franja de luz que pasa */
}

.esq-pantalla { position: relative; }

.esq {
  position: relative; display: block; overflow: hidden; flex-shrink: 0;
  background: var(--esq-base); border-radius: 6px;
}
/* Una franja de luz que cruza despacio de izquierda a derecha (solo transform: no traba el celular) */
.esq::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, var(--esq-brillo) 50%, transparent 100%);
  animation: esq-brillo 1.8s ease-in-out infinite;
}
/* Una línea de texto: la caja mide lo mismo que una línea real (interlineado 1.45) y la barra gris
   de 1em va adentro. Sin márgenes: así no se "escapan" del contenedor y el alto coincide exacto. */
.esq-linea { height: 1.45em; background: none; overflow: visible; }
.esq-linea::before, .esq-linea::after { top: .225em; bottom: .225em; border-radius: .5em; }
.esq-linea::before { content: ""; position: absolute; left: 0; right: 0; background: var(--esq-base); }
.esq-linea::after { overflow: hidden; }

/* "Esto tarda más de lo normal": aparece arriba del esqueleto solo cuando tiene texto */
.esq-aviso { margin: 4px 4px 14px; font-size: 14px; line-height: 1.45; color: var(--muted, #64748B); text-align: center; animation: esq-aparece .4s ease both; }
.esq-aviso:empty { display: none; }

.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes esq-brillo { to { transform: translateX(100%); } }
@keyframes esq-aparece { from { opacity: 0; } }

/* Con "reducir movimiento" activado: bloques quietos, sin la franja de luz */
@media (prefers-reduced-motion: reduce) {
  .esq::after { animation: none; display: none; }
  .esq-aviso { animation: none; }
}