/**
 * Estilos específicos para iconos de Material Icons en dispositivos móviles
 *
 * Este archivo contiene ajustes responsive para mejorar la visualización
 * de los iconos de Material Icons en dispositivos móviles, evitando que se muestren
 * como texto y asegurando que se rendericen correctamente.
 */

/* Estilos básicos para todos los iconos de Material Icons - aplicados globalmente */
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone,
.material-icons-mobile {
  /* Propiedades esenciales de la fuente */
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px !important; /* Tamaño predeterminado */
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  
  /* Propiedades de visualización */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  
  /* Propiedades críticas para renderizado de iconos */
  -webkit-font-feature-settings: 'liga' !important;
  -moz-font-feature-settings: 'liga' !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  vertical-align: middle !important;
  
  /* Asegurar que no se aplican transformaciones de texto */
  text-transform: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  
  /* Evitar problemas de overflow */
  overflow: hidden !important;
}

/* Ajustes generales para iconos en móviles */
@media (max-width: 768px) {
  /* Ajustes específicos para móviles */
  .material-icons,
  .material-icons-outlined,
  .material-icons-round,
  .material-icons-sharp,
  .material-icons-two-tone,
  .material-icons-mobile {
    /* Reforzar los estilos para móviles */
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    /* Asegurar que se aplican las ligaduras */
    -webkit-font-feature-settings: 'liga' !important;
    font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* Estilos para iconos dentro de títulos de secciones */
  .section-title-h2 .material-icons,
  .section-title-h3 .material-icons {
    margin-right: 0.5rem !important;
    font-size: 1.25rem !important;
  }

  /* Estilos para iconos dentro de cuadros informativos */
  .wp-block-group .material-icons {
    margin-right: 0.5rem !important;
    font-size: 1.25rem !important;
  }

  /* Estilos para iconos en el menú de navegación */
  nav .material-icons {
    margin-right: 0.5rem !important;
    font-size: 1rem !important;
  }
}

/* Ajustes específicos para dispositivos muy pequeños */
@media (max-width: 480px) {
  .material-icons,
  .material-icons-mobile {
    font-size: 20px !important;
  }

  .section-title-h2 .material-icons,
  .section-title-h3 .material-icons {
    font-size: 1.1rem !important;
  }
}