/* =====================================================================
   COMPONENTE · ícono
   Qué hace:    muestra un ícono del archivo iconos/iconos.svg (Tabler, trazo
                1,5 px). Toma el color del texto, así funciona solo en claro
                y en oscuro.
   Quién lo usa: botones, menús, avisos.
   Depende de:  tokens.css · sitio/iconos/iconos.svg
   Requisitos:  arquitectura.md §4.8
   Uso:         <svg class="icono" aria-hidden="true"><use href="/iconos/iconos.svg#calendario"></use></svg>
                Nunca solo: con texto visible o con aria-label en el botón.
   ===================================================================== */

.icono {
  display: inline-block;
  width: 1.25rem;   /* 20 px: botones y menús */
  height: 1.25rem;
  flex: none;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
}

.icono--chico {
  width: 1rem;      /* 16 px: dentro del texto */
  height: 1rem;
}

.icono--grande {
  width: 1.5rem;    /* 24 px: destacados */
  height: 1.5rem;
}