/**
 * Material Symbols — autoalojada y recortada.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * POR QUÉ EXISTE ESTE ARCHIVO
 * ─────────────────────────────────────────────────────────────────────────
 * Antes los íconos venían de Google, y para que apareciera uno solo había que
 * completar CUATRO pasos en serie:
 *
 *     HTML → CSS de fonts.googleapis.com (bloqueante)
 *          → parsear y descubrir la URL de la fuente
 *          → DNS + TLS contra fonts.gstatic.com (un host nuevo)
 *          → recién ahí, descargar la fuente
 *
 * Y lo que se descargaba era la familia variable COMPLETA de Material
 * Symbols, con todos sus ejes:
 *
 *     antes ....... 3.874 KB
 *     ahora ..........  30 KB     (128 veces más liviana)
 *
 * El sitio usa 25 íconos de los ~3.000 que trae la familia. Esta fuente es el
 * subconjunto exacto de esos 25, generado con el parámetro `icon_names` de la
 * API de Google y guardado en assets/fonts/.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * LOS 25 ÍCONOS QUE CONTIENE
 * ─────────────────────────────────────────────────────────────────────────
 * add · add_location_alt · arrow_back · arrow_forward · arrow_left_alt ·
 * badge · credit_card · eco · edit · error · history · home · info ·
 * local_drink · local_fire_department · local_pizza · location_on · lock ·
 * login · mail · person · person_add · refresh · shopping_cart · store
 *
 * SI HACE FALTA UN ÍCONO NUEVO hay que regenerar la fuente — no basta con
 * escribir el nombre en el HTML, porque el glifo no está adentro. El
 * procedimiento está en docs/14-fuentes-e-iconos-locales.md.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * POR QUÉ font-display: block Y NO swap
 * ─────────────────────────────────────────────────────────────────────────
 * Estos íconos se escriben como texto: <span class="material-symbols-outlined">
 * local_pizza</span>. Con `swap` el navegador muestra ese texto con una fuente
 * cualquiera mientras carga la definitiva, así que el usuario alcanza a leer
 * "local_pizza" en pantalla antes de ver la pizza. `block` deja el espacio en
 * blanco hasta que la fuente está lista, que es lo correcto para íconos.
 *
 * Con 30 KB servidos desde el mismo dominio, esa espera es imperceptible.
 */

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('../assets/fonts/material-symbols-subset.woff2') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}