/* ---------------------------------------------------------------------------
   ecosystem-chips.css — las píldoras del directorio del ecosistema.

   Nacieron dentro del <style> de ecosistema.html; se extrajeron aquí para que el
   PERFIL (proyecto y financiador) muestre la industria y el "busca a corto plazo"
   con el MISMO color e ilustración que el directorio. Una sola definición: si se
   cambia el color de una industria, cambia en los dos lados.

   Vocabulario:
     .chip-row            fila de píldoras (wrap)
     .chip-row--inds      variante un punto más grande para las de industria
     .ind-chip            píldora verde (industria / vertical de impacto)
     .ind-chip--icon      la misma con ilustración a la izquierda
     .ind-ico             la ilustración: SVG de assets/category-icons/<alias>.svg
                          pintado por CSS mask (por eso toma el color de la marca
                          y no el del archivo). El alias lo pone quien renderiza,
                          vía -webkit-mask-image/mask-image inline.
     .busca-chip          píldora naranja ("busca a corto plazo")
--------------------------------------------------------------------------- */

.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }

.ind-chip {
  font: 600 11px/1 var(--font-sans);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--refi-green-50);
  color: var(--refi-green-900);
}

.ind-chip--icon { display: inline-flex; align-items: center; gap: 6px; }

.ind-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: var(--refi-green-700);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.chip-row--inds .ind-chip { font-size: 12px; padding: 6px 11px; }

.busca-chip {
  font: 600 11px/1 var(--font-sans);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--refi-orange-50, #FBF0E3);
  color: var(--refi-orange-900, #8A4E00);
}