/**
 * Iconos de línea en lugar de emojis, compartido V3/V4 (pruebas,
 * 21-oct-2026). Los pone js/wa-iconos.js.
 */

/* ---------------------------------------------------------------------
 * 9. ICONOS DE LÍNEA (los pone js/estilo-definitiva.js en lugar de los
 *    emojis). Un color, sin relleno, del tamaño del texto.
 * ------------------------------------------------------------------- */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .df-ico {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  vertical-align: -.28em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-emo, .wa-bono__ico, .wa-news__ico, .reco-wz__opt-ic).df-hecho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--df-azul);
  font-size: inherit;
  line-height: 1;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .reco-wz__opt-ic.df-hecho .df-ico {
  width: 28px;
  height: 28px;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-bono__ico.df-hecho .df-ico,
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-news__ico.df-hecho .df-ico {
  width: 26px;
  height: 26px;
}

/* V3 (suave, con esquinas redondeadas): trazo con puntas redondas, a juego. */
html.estilo-acento[data-estilo="suave-emil"] .df-ico {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Un poco de aire entre el icono y el texto. */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-emo.df-hecho {
  margin-right: 2px;
}

/* Tamaño fijo (el texto de las fichas es pequeño y el icono se perdía). */
html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] .wa-emo.df-hecho .df-ico {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

html:is(.estilo-acento, .estilo-def)[data-estilo="suave-emil"] :is(.wa-chip, .wa-juegos > span) .wa-emo.df-hecho .df-ico {
  width: 18px;
  height: 18px;
}