/**
 * SWM/OS · Loading skeleton primitives
 *
 * Reemplaza "cargando…" textual y pantallas en blanco con shimmer placeholders.
 * Señal universal de calidad (Linear, Notion, Asana lo usan).
 *
 * Uso · agregar la clase a cualquier div para que se vuelva skeleton:
 *   <div class="swm-skel" style="width:60%;height:14px;"></div>
 *   <div class="swm-skel swm-skel--text" style="width:120px;"></div>     // texto inline
 *   <div class="swm-skel swm-skel--block" style="height:80px;"></div>    // bloque
 *   <div class="swm-skel swm-skel--circle" style="width:40px;height:40px;"></div>
 *
 * Composición típica para una row:
 *   <div class="swm-skel-row">
 *     <div class="swm-skel swm-skel--circle" style="width:40px;height:40px;"></div>
 *     <div style="flex:1;">
 *       <div class="swm-skel" style="width:60%;height:14px;margin-bottom:6px;"></div>
 *       <div class="swm-skel" style="width:80%;height:12px;"></div>
 *     </div>
 *   </div>
 *
 * Respeta prefers-reduced-motion.
 */

.swm-skel{
  display:block;
  background:linear-gradient(90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.05) 100%
  );
  background-size:200% 100%;
  animation:swmSkelShimmer 1.4s ease-in-out infinite;
  border-radius:0;
}

[data-theme="light"] .swm-skel{
  background:linear-gradient(90deg,
    rgba(26,26,26,.05) 0%,
    rgba(26,26,26,.10) 50%,
    rgba(26,26,26,.05) 100%
  );
  background-size:200% 100%;
}

@keyframes swmSkelShimmer{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce){
  .swm-skel{ animation: none; opacity:.6; }
}

.swm-skel--text{ height:13px; display:inline-block; vertical-align:middle; }
.swm-skel--block{ width:100%; }
.swm-skel--circle{ border-radius:50%; }

.swm-skel-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--line, rgba(255,255,255,.06));
}
.swm-skel-row:last-child{ border-bottom:none; }

/* Skeleton "card" (típico para tile/módulo) */
.swm-skel-card{
  background:var(--surface, #171717);
  border:1px solid var(--line, rgba(255,255,255,.06));
  padding:20px;
  display:flex; flex-direction:column; gap:10px;
}