/**
 * Skeleton Loader — placeholders animados que aparecem enquanto dados/imagens
 * carregam, dando feedback de "algo está a chegar" em vez de espaços vazios.
 *
 * Usado pela secretaria (admin staff) em:
 *   - Listagens DataTables (substitui rows enquanto AJAX corre)
 *   - Imagens de documentos lazy-loaded (blur-up placeholder)
 *   - Cards e detail panes que esperam fetch
 *
 * Animação: gradient shimmer @ 1.4s loop. `prefers-reduced-motion` desliga.
 *
 * Class tree:
 *   .skel              — base, gradient + shimmer
 *   .skel-text         — line de texto (1em altura)
 *   .skel-text-sm      — variante mais fina
 *   .skel-line         — utilitário largura/altura via inline
 *   .skel-circle       — avatar/ícone redondo
 *   .skel-rect         — rectângulo flexível (use width/height inline)
 *   .skel-img          — imagem em loading (16:9 default)
 *   .skel-card         — card placeholder com 3 linhas
 *   .skel-row          — table row placeholder
 *
 * Modificadores:
 *   .skel-w-25 / 50 / 75 / 100   — width %
 *   .skel-rounded                — border-radius pill
 *   .skel-square                 — border-radius 4px (default)
 *
 * Wrap util:
 *   .skel-wrap         — grupo de skel children com vertical spacing
 *
 * Lazy image:
 *   .img-lazy          — fade-in transition quando carrega
 *   .img-lazy-loaded   — added pelo JS quando img completa
 */

.skel,
.skel-text,
.skel-text-sm,
.skel-line,
.skel-circle,
.skel-rect,
.skel-img,
.skel-row,
.skel-card {
  position: relative;
  overflow: hidden;
  background-color: #e5e7eb;
  border-radius: 4px;
  display: inline-block;
}

.skel::after,
.skel-text::after,
.skel-text-sm::after,
.skel-line::after,
.skel-circle::after,
.skel-rect::after,
.skel-img::after,
.skel-row::after,
.skel-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: skel-shimmer 1.4s infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .skel::after, .skel-text::after, .skel-text-sm::after, .skel-line::after,
  .skel-circle::after, .skel-rect::after, .skel-img::after, .skel-row::after,
  .skel-card::after {
    animation: none;
    background: rgba(255, 255, 255, 0.4);
    transform: none;
  }
}

/* ─── shapes ────────────────────────────────────────────────────────── */

.skel-text {
  height: 0.95em;
  width: 100%;
  border-radius: 3px;
  margin: 0.18em 0;
  display: block;
}

.skel-text-sm { height: 0.7em; }

.skel-line {
  display: block;
  border-radius: 3px;
}

.skel-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.skel-rect {
  border-radius: 6px;
  display: block;
}

.skel-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  display: block;
}

.skel-row {
  display: block;
  height: 38px;
  width: 100%;
  margin-bottom: 4px;
  border-radius: 4px;
}

.skel-card {
  display: block;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  height: auto;
  min-height: 120px;
}
.skel-card::after { display: none; } /* card é container, shimmer fica nos children */

/* ─── width modifiers ───────────────────────────────────────────────── */

.skel-w-25  { width: 25%; }
.skel-w-30  { width: 30%; }
.skel-w-40  { width: 40%; }
.skel-w-50  { width: 50%; }
.skel-w-60  { width: 60%; }
.skel-w-70  { width: 70%; }
.skel-w-75  { width: 75%; }
.skel-w-80  { width: 80%; }
.skel-w-90  { width: 90%; }
.skel-w-100 { width: 100%; }

.skel-rounded { border-radius: 999px !important; }
.skel-square  { border-radius: 4px !important; }

/* ─── wrap utility — grupo de skeletons com gap ─────────────────────── */

.skel-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── lazy image fade-in ────────────────────────────────────────────── */

img.img-lazy {
  opacity: 0;
  transition: opacity 250ms ease-in;
  background: #f1f5f9;
}
img.img-lazy.img-lazy-loaded {
  opacity: 1;
}
img.img-lazy[data-blurhash] {
  /* Quando temos hash inline (futuro), aplica como background. Hoje só fade. */
  background-size: cover;
  background-position: center;
}

/* ─── overlay para skeletons que substituem temporariamente conteúdo ── */

.skel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 200ms;
}
.skel-overlay.fade-out { opacity: 0; }