/* ═══ La moneda de la plataforma ═══════════════════════════════════════════
   Una moneda de oro con la cabeza de la perrovaquita grabada en relieve. Sustituye
   al glifo bi-coin de Bootstrap Icons en todos los sitios donde se habla de monedas
   Akcadmia.

   ES UN <span> VACÍO CON FONDO, NO UN <img>. Muchas monedas las pinta el
   JavaScript —tablas, modales, la erupción de la billetera—, y con un <img> cada
   módulo tendría que conocer la ruta del archivo: una ruta escrita en el frontend
   que se rompe en silencio el día que la imagen se mueva. Así la ruta vive solo
   aquí y el JS escribe una clase, igual que hacía con el icono.

   DOS DIBUJOS, según el tamaño al que se ve:
     · moneda-mini.svg  el de siempre. Cabeza, orejas, cuernos, ojos y nariz: a
                        16-24 px las pestañas, las cejas y las manchas pequeñas se
                        empastan y ensucian la cara.
     · moneda.svg       .edu-moneda--grande. El dibujo completo, para cuando la
                        moneda es protagonista: el saldo de la billetera, la que
                        vuela en la erupción y la de la portada.

   MIDE EN em para comportarse como el icono al que reemplaza: toma el cuerpo de
   letra de donde cae, así que la misma clase sirve en una celda compacta, en la
   píldora de la barra y en un campo grande sin una regla por sitio. Quien necesite
   otra proporción —el saldo de la billetera— cambia el ancho y el alto en su hoja.

   SIN VARIANTE POR TEMA a propósito: es un metal, como el oro de metales.css, y un
   metal no cambia porque cambie la paleta. Su borde oscuro lo separa del fondo claro
   y su brillo del oscuro, así que se lee igual en los dos.

   DECORATIVA: cada uso lleva aria-hidden, porque la cifra o el texto de al lado ya
   dicen "monedas". Donde la moneda va sola y es lo único que da sentido —una
   cabecera de columna— el marcado lleva role="img" y su aria-label.
   ═══════════════════════════════════════════════════════════════════════════ */

.edu-moneda {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    /* Baja la moneda hasta el centro óptico de las cifras: alineada a la línea
       base quedaría montada sobre el renglón. Dentro de un contenedor flex —la
       píldora, el saldo— no hace nada y manda su align-items. */
    vertical-align: -.2em;
    /* En una fila flex estrecha no debe encogerse: una moneda aplastada se lee
       como un óvalo, no como una moneda. */
    flex-shrink: 0;
    background: url("../../images/moneda-mini.svg") center / contain no-repeat;
}

.edu-moneda--grande {
    background-image: url("../../images/moneda.svg");
}