/* 11-iconos.css
   ICONOS. El tamano y el color de un icono, en un solo lugar.

   POR QUE EXISTE ESTE ARCHIVO, Y POR QUE LLEGA TARDE (2026-09-22)
   ---------------------------------------------------------------------
   `.icono` estaba en el DICCIONARIO.md desde el principio, con sus medidas,
   pero NINGUNA hoja la implementaba (medido 2026-09-22). Ya esta implementada:
   estas son sus reglas.

   O sea: el kit prometia una clase y no la entregaba. Cada sitio tenia que
   escribirla a mano, y el que no lo hacia se encontraba con iconos enormes.

   MEDIDO EN UN SITIO REAL ANTES DE ESTE ARCHIVO
   Un <svg> NO trae tamano propio. Sin width/height ocupa lo que le deje su
   contenedor, y el CSS aplicado queda en `width:auto; height:auto`. Resultado
   en la portada de salida/inversion:

       .icono--grande   463 x 150 px
       .icono           300 x 150 px
       .icono--chico    300 x 150 px

   Se ve como iconos gigantes comiendose el texto. Y no falla nada: el HTML
   esta bien, las rutas resuelven, el verificador dice OK.

   EL TAMANO VA EN `em`, NO EN `px`
   Para que el icono siga al texto que acompana. Un icono de 16px junto a un
   texto de 14px se ve bien; el mismo de 16px junto a un titular de 40px se ve
   diminuto. En `em` crece solo y no hay que tocar nada.

   COMO SE USA
     <svg class="icono" aria-hidden="true">
       <use href="kit/iconos/sprite.svg#casa"></use>
     </svg>
   El COLOR no se pone aca: se hereda del contenedor con `currentColor`. Por
   eso un icono obedece al tema sin pintarlo a mano. */

.icono {
  width: 1.25em;
  height: 1.25em;
  /* hereda el color del texto donde este: eso es lo que hace que el icono
     obedezca al tema sin pintarlo */
  color: inherit;
  /* Un svg en linea se apoya en la linea base y baja respecto del texto:
     sin esto, cada icono desalinea su renglon. */
  vertical-align: -0.22em;
  /* Dentro de un contenedor flex el svg se aplasta si no se le dice que no. */
  flex: none;
  transition: color var(--t-normal) var(--ease-salida);
}

.icono--chico  { width: 1em;   height: 1em; }
.icono--grande { width: 1.6em; height: 1.6em; }
.icono--enorme { width: 2.2em; height: 2.2em; }

/* Un icono solo, como bloque centrado (por ejemplo arriba de un titular).
   No cambia el tamano: solo deja de ser parte de una linea de texto. */
.icono--suelto {
  display: block;
  vertical-align: baseline;
}