/**
 * FIX PARA ICONOS/EMOJIS QUE NO SE VEN BIEN
 * Este CSS soluciona el problema donde los emojis (🏠, 👤, etc.) 
 * solo son visibles cuando se pasa el mouse sobre ellos
 */

/* Asegurar que los emojis/iconos siempre sean visibles */
.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-md, 1rem);
  font-size: 0.9375rem;
  gap: var(--space-sm, 0.75rem);
  line-height: 1.5;
}

/* Aumentar tamaño y mejorar visibilidad de los emojis */
.info-row > div {
  opacity: 1 !important;
  font-size: 1rem !important;
}

/* Emojis específicos - hacer más grandes y visibles */
.info-row div:not(.info-label):not(.badge) {
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  color: var(--neutral-900, #1e293b) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Asegurar que los emojis no sean transparentes */
.card .info-row *:not(.info-label):not(.badge) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mejorar contraste general en las tarjetas */
.card {
  color: var(--neutral-900, #1e293b);
}

/* Asegurar que el texto y emojis sean siempre visibles */
.card * {
  opacity: 1;
}

/* Fix específico para los recursos (🛏️ y 🏖️) */
.res-row {
  opacity: 1 !important;
}

.res-tag {
  opacity: 1 !important;
  font-size: 1rem !important;
}

/* Asegurar que todos los emojis en la página sean visibles */
body {
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Si el problema persiste, aumentar aún más el tamaño de los emojis */
.info-row > div:first-child + div {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
}