/* estilos/esqueleto.css — componentes/esqueleto.js (mxEsqueleto.html).
   Solo tokens. El brillo es un degradado que se desplaza: dos tonos neutros del tema. */

.mx-esq { display: flex; flex-direction: column; gap: 8px; }
.mx-esq-fila {
  padding: 14px; border-radius: 8px;
  background: var(--navy-3); border: 1px solid var(--border);
}
.mx-esq-compacto .mx-esq-fila { padding: 10px 12px; background: transparent; border-color: transparent; }
.mx-esq-b {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--border) 25%, var(--border-2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: mxEsqBrillo 1.4s linear infinite;
}
.mx-esq-tit { height: 13px; margin-bottom: 9px; }
.mx-esq-sub { height: 10px; }
/* Texto solo para lector de pantalla. */
.mx-esq-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@keyframes mxEsqBrillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Con «reducir movimiento» las barras quedan quietas: el brillo es decoración, no progreso. */
@media (prefers-reduced-motion: reduce) {
  .mx-esq-b { animation: none; }
}