/* Iconos del producto — Material Symbols Rounded, AUTO-HOSPEDADO.
 *
 * La fuente es un SUBSET (~10KB) con SOLO los glifos que usamos: la lista de nombres
 * vive en app/scripts/fetch-icon-font.sh (fuente única). Para agregar un ícono nuevo:
 * sumarlo a esa lista, correr el script y usar <span class="ms">nombre_del_icono</span>.
 * Un nombre que no esté en el subset se ve como TEXTO — señal de que falta re-generar.
 *
 * Auto-hospedado a propósito (decisión 2026-07-03, plan iconos-material-symbols):
 * la CSP bloquea orígenes externos (§9.6), es más rápido (sin viaje a Google) y no
 * expone a los visitantes a un tercero. NUNCA cargar de fonts.googleapis.com en runtime.
 *
 * font-display: block — en un icon font, "swap" mostraría el nombre del glifo como
 * texto durante la carga (flash feo); block lo oculta esos ms. */
@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/material-symbols-rounded.woff2') format('woff2');
}

/* Uso: <span class="ms" aria-hidden="true">storefront</span> — la ligadura convierte
 * el nombre en el glifo. aria-hidden porque el ícono es decorativo (el texto del
 * botón/label ya comunica); si el control no tiene texto visible, aria-label va en él. */
.ms {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;            /* escala con el texto que acompaña */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: -0.25em;      /* asienta el glifo sobre la baseline del texto */
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

/* Tamaños utilitarios (el default 1.25em acompaña al texto). */
.ms--sm { font-size: 1em; }
.ms--lg { font-size: 1.5em; }
.ms--xl { font-size: 2em; }