/* ============================================================
   JD-SKELETONS v1.0 — Esqueletos de carga
   Uso: pinta esqueletos mientras el JS del módulo hace su primer
   fetch/polling, y quítalos añadiendo .jd-skel-done al contenedor.

   Patrón en plantilla:
     <div class="jd-skel-host">
       <div class="jd-skel-card">
         <div class="jd-skel jd-skel-avatar"></div>
         <div class="jd-skel-lines">
           <div class="jd-skel jd-skel-line w60"></div>
           <div class="jd-skel jd-skel-line w90"></div>
           <div class="jd-skel jd-skel-line w40"></div>
         </div>
       </div>
     </div>

   Patrón en JS (al terminar la primera carga):
     document.querySelectorAll('.jd-skel-host').forEach(function(h){
       h.classList.add('jd-skel-done');
     });
   ============================================================ */
.jd-skel {
  position: relative;
  overflow: hidden;
  background: rgba(115, 103, 240, .08);
  border-radius: 6px;
}

.jd-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245, 200, 66, .10) 45%,
    rgba(0, 210, 255, .12) 55%,
    transparent 100%);
  animation: jd-skel-shimmer 1.4s infinite;
}

@keyframes jd-skel-shimmer {
  100% { transform: translateX(100%); }
}

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

/* ---- Piezas ---- */
.jd-skel-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(115, 103, 240, .18);
  border-radius: 12px;
  background: rgba(20, 14, 32, .5);
  margin-bottom: 14px;
}

.jd-skel-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jd-skel-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

.jd-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.jd-skel-line {
  height: 12px;
}

.jd-skel-line.w40 { width: 40%; }
.jd-skel-line.w60 { width: 60%; }
.jd-skel-line.w90 { width: 90%; }

.jd-skel-btn {
  width: 110px;
  height: 34px;
  border-radius: 8px;
}

/* Grid para tarjetas de clanes / servidores */
.jd-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.jd-skel-tile {
  height: 150px;
  border-radius: 12px;
}

/* ---- Estado terminado: los esqueletos desaparecen ---- */
.jd-skel-host.jd-skel-done .jd-skel-card,
.jd-skel-host.jd-skel-done .jd-skel-grid,
.jd-skel-host.jd-skel-done > .jd-skel {
  display: none;
}