/*
   ==========================================================================
   COMPONENTE: Badges
   Reutilizable dentro de plant-card, hero, category-label, etc.
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-mono);
  padding: 0.3em 0.65em;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
}

.badge-interior { background-color: var(--color-secondary-soft); color: var(--color-primary); }
.badge-exterior { background-color: var(--color-highlight-soft); color: var(--color-warning); }
.badge-suculentas { background-color: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge-huerta { background-color: var(--color-bg-alt); color: var(--color-success); }
.badge-promo {
  position: absolute; top: 0.9rem; left: 0.9rem;
  background-color: var(--color-accent); color: var(--color-text-light);
}

/* Badge de descuento (agregado 2026-09-10, catálogo): mismo posicionamiento
   que .badge-promo pero en rojo/--color-danger para distinguir "rebajado"
   de "recomendado", y en la esquina opuesta cuando conviven con el botón
   de favorito (ver .catalog-item-media en catalog.css). Solo en artículos
   puntuales del catálogo — igual criterio que el selector de color: no
   todos los productos lo tienen. */
.badge-discount {
  position: absolute; top: 0.9rem; left: 0.9rem;
  background-color: var(--color-danger); color: var(--color-text-light);
}
/* La promoción es por maceta: en /catalogo el badge se oculta cuando la
   maceta elegida no tiene descuento (el display de .badge pisaría [hidden]). */
.badge-discount[hidden] { display: none; }