/**
 * md3-iconos.css — Fuente de iconos Material Symbols, servida LOCALMENTE.
 *
 * Por qué local y no desde Google Fonts:
 *
 * Los Material Symbols dibujan cada icono como una LIGADURA: el <span>
 * contiene literalmente el texto "calendar_month" y la fuente lo sustituye por
 * el glifo. Si la fuente no está disponible en el instante del pintado, el
 * navegador muestra ese texto crudo — el fallo de los "iconos con guiones
 * bajos".
 *
 * Cargándola desde fonts.googleapis.com hacían falta DOS viajes de red en
 * serie (primero el CSS, que recién ahí revela la URL del .woff2) contra un
 * tercer dominio, más allá de todo control. Cualquier intento de taparlo desde
 * JavaScript era una carrera: los iconos aparecían o no según la red, la caché
 * y el momento, y por eso Ctrl+Shift+R "lo arreglaba" (con todo ya en disco la
 * ventana era imperceptible).
 *
 * Sirviendo el .woff2 desde el propio dominio el problema desaparece de raíz:
 *   - un solo viaje, mismo origen, sin DNS ni TLS extra;
 *   - font-display: block, que es lo correcto para una fuente de iconos: el
 *     navegador reserva el hueco y NUNCA pinta el texto de respaldo;
 *   - funciona sin conexión y sin depender de que Google responda.
 *
 * Con font-display: block ya no hace falta ningún JavaScript que oculte y
 * destape iconos. Este archivo lo resuelve entero.
 *
 * Para actualizar la fuente, ver assets/fonts/LEEME.md
 */

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  /* block: el texto de respaldo NO se pinta nunca. El navegador deja el hueco
     invisible hasta que la fuente llega (y con la fuente en el propio dominio
     eso es prácticamente inmediato). Es justo el comportamiento que se quería
     y que 'swap' —el que traía la URL de Google— hacía imposible: swap pinta
     el respaldo, que en una fuente de iconos es el nombre del icono. */
  font-display: block;
  src: url('../fonts/material-symbols-rounded.woff2') format('woff2');
}

/* Ambos nombres de clase apuntan a la misma familia: el proyecto usa
   .material-symbols-rounded casi siempre, y quedan unos pocos
   .material-symbols-outlined heredados. */
.material-symbols-rounded,
.material-symbols-outlined {
  font-family: 'Material Symbols Rounded';
  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;
  vertical-align: middle;
  user-select: none;

  /* Las ligaduras son lo que convierte "calendar_month" en un dibujo.
     Google solo declara la propiedad con prefijo -webkit-, que Chrome en
     Android ya no aplica; por eso se declaran también las estándar. */
  font-feature-settings: 'liga' 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  -webkit-font-feature-settings: 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Ejes variables. FILL es el único que el sistema anima (.md-icon-filled). */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Icono relleno (ítem de menú activo, estados seleccionados). */
.md-icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Tamaños */
.md-icon-18 { font-size: 18px; }
.md-icon-20 { font-size: 20px; }
.md-icon-24 { font-size: 24px; }
.md-icon-32 { font-size: 32px; }
.md-icon-40 { font-size: 40px; }
.md-icon-48 { font-size: 48px; }