/* =========================================================
   COMPONENTS — piezas reutilizables pequeñas
   (botones, tarjetas y estados ya viven en main.css;
   aquí solo lo que es puramente "componente aislado")
   ========================================================= */

.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

/* Carrusel simple con scroll-snap (para uso futuro en Contenido/tarjetas) */
.carousel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}
.carousel > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* Etiqueta "Próximamente" reutilizable */
.pill-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-tag);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 12px;
}
.pill-soon::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
}