/* ==========================================================================
   Iconos SVG (.icono)
   --------------------------------------------------------------------------
   Sustituye a la fuente Material Symbols, que se elimino del proyecto.

   Un iPhone real con Firefox iOS demostro por que: el woff2 llegaba con HTTP
   200 y 13.864 bytes, pero al usarlo como tipografia daba "A network error
   occurred". Los bloqueadores de contenido de iOS filtran por TIPO de recurso
   y descartan las peticiones de fuente; tampoco cargaba Inter. Con la fuente
   caida, cada icono mostraba su NOMBRE en texto ("shopping_cart", "search")
   por toda la pantalla. Ningun cambio de servidor podia arreglarlo.

   Un SVG es marcado, no un recurso de tipo fuente: ningun bloqueador lo filtra
   y no depende de JavaScript. El SVG se genera en PHP con icono(), definida en
   includes/iconos.php.

   Los iconos salen con width/height en 1em y fill=currentColor, asi que
   heredan tamano y color del texto igual que hacia la fuente: las clases de
   tamano (text-sm, text-xl...) y de color siguen funcionando sin cambios.
   ========================================================================== */
.icono {
  display: inline-block;
  /* La fuente se apoyaba en la linea base; un SVG en linea queda alto y
     descolocado respecto al texto contiguo. Este ajuste lo centra. */
  vertical-align: -0.15em;
  flex: none;
  /* que no se aplaste dentro de contenedores flex estrechos */
  min-width: 1em;
}

/* dentro de un boton o enlace en flex, no debe estirarse */
button > .icono,
a > .icono {
  align-self: center;
}