/* ==========================================================================
   Optimización de Fuentes de Iconos con font-display: swap
   ========================================================================== */

/**
 * Este archivo override las fuentes de iconos para agregar font-display: swap
 * Esto garantiza que el texto sea visible mientras se cargan los iconos
 * 
 * IMPORTANTE: Los CDNs externos no permiten modificar sus @font-face
 * Esta es una solución temporal. Para máxima optimización, descarga las fuentes
 * y álojales localmente con estas reglas @font-face.
 */

/* ==========================================================================
   Font Metric Overrides para Bootstrap Icons
   ========================================================================== */
@font-face {
  font-family: 'Bootstrap Icons';
  src: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff') format('woff');
  font-display: swap; /* ← Texto visible inmediatamente */
  font-weight: normal;
  font-style: normal;
  /* Font metric overrides para evitar layout shift */
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* ==========================================================================
   Font Metric Overrides para Font Awesome Solid
   ========================================================================== */
@font-face {
  font-family: 'Font Awesome 6 Free';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/webfonts/fa-solid-900.woff2') format('woff2');
  font-display: swap; /* ← Texto visible inmediatamente */
  font-weight: 900;
  font-style: normal;
  /* Font metric overrides */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* ==========================================================================
   Font Metric Overrides para Font Awesome Brands
   ========================================================================== */
@font-face {
  font-family: 'Font Awesome 6 Brands';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/webfonts/fa-brands-400.woff2') format('woff2');
  font-display: swap; /* ← Texto visible inmediatamente */
  font-weight: 400;
  font-style: normal;
  /* Font metric overrides */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* ==========================================================================
   Fallback para iconos (evitar cuadros vacíos durante carga)
   ========================================================================== */

/* Durante la carga, usar color transparente para que no se vean cuadros */
.bi::before,
.fa::before,
.fas::before,
.far::before,
.fab::before {
  /* Mientras carga, el texto de fallback será invisible */
  color: inherit;
  opacity: 1;
}

/* ==========================================================================
   NOTA IMPORTANTE: Solución definitiva
   ========================================================================== */

/**
 * Para máxima optimización, considera:
 * 
 * 1. Descargar las fuentes woff2 y alojarlas en /fonts/
 * 2. Generar subsets solo con los iconos usados
 * 3. Usar IcoMoon o Fontello para crear fuentes personalizadas
 * 4. Reemplazar con SVG sprites para iconos críticos
 * 
 * Ejemplo de fuentes locales:
 * 
 * @font-face {
 *   font-family: 'Bootstrap Icons';
 *   src: url('../fonts/bootstrap-icons.woff2') format('woff2');
 *   font-display: swap;
 * }
 * 
 * Esto eliminaría completamente la dependencia de CDNs externos
 * y mejoraría LCP, FCP y CLS significativamente.
 */