/* components/states.css */

/* ============================================================
   components.css — piezas reutilizables (cards, botones, nav)
   ============================================================ */

/* Estados generales
   ============================================================ */

  .loading {
  display: block;
  min-height: 100vh;
  padding-top: 40px;
  color: var(--text-muted);
  font-family: var(--font-body);
}

/* Imagen sin una extensión válida
   ============================================================ */

.img-broken {
  min-height: 120px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--surface-elevated),
      var(--surface-elevated) 10px,
      var(--surface-card) 10px,
      var(--surface-card) 20px
    );
}