/* ══════════════════════════════════════════════════════════════════════════
   cd-esqueletos.css — ESTADO DE CARGA
   ──────────────────────────────────────────────────────────────────────────
   Auditoría: no había un solo esqueleto en todo el proyecto. Con la red lenta
   —la de un móvil en mitad de un directo, que es el caso real— las listas se
   quedaban simplemente vacías. El usuario no puede distinguir "esto está
   cargando" de "aquí no hay nada", y esa duda es lo que hace que una interfaz
   se sienta rota aunque funcione perfectamente.

   Un esqueleto no es decoración: es una respuesta. Dice "te he oído, viene en
   camino" y además adelanta la FORMA de lo que va a llegar, así que cuando el
   contenido aparece no da un salto.

   Reglas que sigue este sistema:
     · el brillo va de izquierda a derecha, como la lectura;
     · nunca supera el escalón de superficie: un esqueleto no debe llamar más
       la atención que el contenido real;
     · con `prefers-reduced-motion` se queda quieto pero visible — quien pide
       menos movimiento sigue necesitando saber que algo está cargando.
   ══════════════════════════════════════════════════════════════════════════ */

.cd-esq{
  position:relative;overflow:hidden;
  background:var(--n-plano,var(--n-plano,#17172a));
  border-radius:var(--r-sm,8px);
  /* El contenido de dentro no se lee: el esqueleto es una silueta. */
  color:transparent !important;
  user-select:none;pointer-events:none;
}
.cd-esq::after{
  content:'';position:absolute;inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.055) 45%,
    rgba(255,255,255,.085) 55%,
    transparent 100%);
  animation:cdEsqBrillo 1.25s ease-in-out infinite;
}
@keyframes cdEsqBrillo{ to{ transform:translateX(100%) } }

/* ── Piezas ─────────────────────────────────────────────────────────────── */
.cd-esq-linea{height:11px;margin:7px 0;border-radius:var(--r-full,999px)}
.cd-esq-linea.corta{width:42%}
.cd-esq-linea.media{width:68%}
.cd-esq-linea.larga{width:88%}
.cd-esq-circ{border-radius:50%;flex:0 0 auto}

/* ── Composiciones listas para usar ─────────────────────────────────────── */
/* Fila con avatar: conversaciones, espectadores, resultados de búsqueda. */
.cd-esq-fila{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--r-md,14px);
}
.cd-esq-fila .cd-esq-circ{width:40px;height:40px}
.cd-esq-fila .cd-esq-txt{flex:1;min-width:0}

/* Rejilla de tarjetas: regalos, sonidos, catálogos. */
.cd-esq-rejilla{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;padding:4px 0;
}
.cd-esq-tarjeta{border-radius:var(--r-md,14px);aspect-ratio:1/1}
.cd-esq-tarjeta + .cd-esq-linea{margin-top:8px}

/* El grupo entero se desvanece al llegar el contenido, en vez de saltar. */
.cd-esq-grupo{animation:cdEsqEntra .2s ease both}
.cd-esq-grupo.cd-esq-fuera{animation:cdEsqSale .18s ease forwards}
@keyframes cdEsqEntra{ from{opacity:0} to{opacity:1} }
@keyframes cdEsqSale{ to{opacity:0} }

@media (prefers-reduced-motion:reduce){
  /* Sin barrido, pero el esqueleto SIGUE visible: quien pide menos movimiento
     necesita igualmente saber que hay algo en camino. */
  .cd-esq::after{animation:none;background:rgba(255,255,255,.05)}
  .cd-esq-grupo,.cd-esq-grupo.cd-esq-fuera{animation:none}
}