/* =========================================================
   UI TAGS / DATA PILLS – SeguroInteligente
   Versión refinada editorial
========================================================= */

/* CONTENEDOR */
.ui-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
}

/* BASE TAG */
.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;

  padding: 4px 0;
  border-radius: 0;

  background: transparent;
  border: none;

  transition: opacity 0.2s ease;
  cursor: default;
}

/* ICONO */
.ui-tag i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  opacity: 0.85;
}

/* =========================================================
   VARIANTE AZUL
========================================================= */

.ui-tag-blue {
  color: var(--si-blue);
}

.ui-tag-blue i {
  color: var(--si-blue);
}

/* =========================================================
   VARIANTE VERDE
========================================================= */

.ui-tag-green {
  color: var(--si-green);
}

.ui-tag-green i {
  color: var(--si-green);
}

/* =========================================================
   VARIANTE GLASS (sobre fondos oscuros)
========================================================= */

.ui-tag-glass {
  color: #ffffff;
}

.ui-tag-glass i {
  color: #ffffff;
  opacity: 0.9;
}

/* =========================================================
   MICRO-INTERACCIÓN SUAVE
========================================================= */

.ui-tag:hover {
  opacity: 0.8;
}

.ui-tag:hover i {
  transform: scale(1.05);
}