/* ==========================================================
   PAGE-LISTADO.CSS (Arquitectura v2)
   ==========================================================
   
   Contiene estilos ÚNICAMENTE para las páginas de LISTADO
   (productos.php, recetas.php, productores.php, rutas.php, etc.)
   
   Todas las reglas están aisladas (scoped) con las
   clases ".page-listado" (para estilos comunes) o
   ".page-productos", ".page-recetas", etc. (para estilos específicos).
   
   Contenido migrado desde el antiguo "pages.css".
   
 ========================================================== */

/* -------------------- ESTILOS COMUNES A LISTADOS -------------------- */

/* Descripción de sección común (usada en recetas.php) */
.page-listado .section-desc {
  text-align: center;
  color: var(--color-text-dim);
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Título de sección común (usado en productos.php, recetas.php) */
.page-listado .productores-listado h2,
.page-listado .restaurantes-listado h2,
.page-listado .productos-listado h2,
.page-listado .recetas-listado h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--color-text-main);
  border-bottom: 1px solid var(--color-border-dim);
  padding-bottom: .75rem;
}

/* Contenedor del mapa común */
.page-listado .mapa-productores-section,
.page-listado .mapa-restaurantes-section,
.page-listado .mapa-productos-section,
.page-listado .mapa-recetas-section {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: var(--color-text-main);
}

/* Título del mapa común */
.page-listado .mapa-productores-section h2,
.page-listado .mapa-restaurantes-section h2,
.page-listado .mapa-productos-section h2,
.page-listado .mapa-recetas-section h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Contenedor del mapa común */
.page-listado .mapa-productores,
.page-listado .mapa-restaurantes,
.page-listado .mapa-productos,
.page-listado #mapRecetas.mapa-recetas {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-dim);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

/* -------------------- LISTADO PRODUCTOS (page-productos) -------------------- */

.page-productos .hero-productos {
  background-size: cover;
  background-position: center;
  padding: 5rem 1rem;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid var(--color-accent);
}
.page-productos .hero-productos h1 {
  font-size: 2.2rem;
  margin-bottom: .5rem;
  color: var(--color-accent);
}
.page-productos .hero-productos p {
  font-size: 1.1rem;
  color: var(--color-text-dim);
  max-width: 800px;
  margin: 0 auto;
}

/* Estilos de relaciones en tarjeta (listado productos) */
.page-productos .item-relaciones {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.page-productos .mini-list span {
  font-size: .85rem;
  color: var(--color-accent);
  font-weight: 600;
}
.page-productos .mini-list ul {
  list-style: none;
  margin: .25rem 0 .5rem .75rem;
  padding: 0;
  max-height: 80px;
  overflow-y: auto;
}
.page-productos .mini-list li a {
  font-size: .85rem;
  color: var(--color-text-main);
  text-decoration: none;
}
.page-productos .mini-list li a:hover {
  color: var(--color-accent);
}


/* -------------------- LISTADO PRODUCTORES (page-productores) -------------------- */

.page-productores .hero-productores {
  background-size: cover;
  background-position: center;
  padding: 5rem 1rem;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid var(--color-accent);
}
.page-productores .hero-productores h1 {
  font-size: 2.2rem;
  margin-bottom: .5rem;
  color: var(--color-accent);
}
.page-productores .hero-productores p {
  font-size: 1.1rem;
  color: var(--color-text-dim);
  max-width: 800px;
  margin: 0 auto;
}

/* Estilos de Contacto en tarjeta (listado productores/restaurantes) */
.page-productores .item-contacto p,
.page-restaurantes .item-contacto p {
  margin: .2rem 0;
  font-size: .9rem;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.page-productores .item-contacto a,
.page-restaurantes .item-contacto a {
  color: var(--color-accent);
  text-decoration: none;
}
.page-productores .item-contacto a:hover,
.page-restaurantes .item-contacto a:hover {
  text-decoration: underline;
}


/* -------------------- LISTADO RESTAURANTES (page-restaurantes) -------------------- */

.page-restaurantes .hero-restaurantes {
  background-size: cover;
  background-position: center;
  padding: 5rem 1rem;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid var(--color-accent);
}
.page-restaurantes .hero-restaurantes h1 {
  font-size: 2.2rem;
  margin-bottom: .5rem;
  color: var(--color-accent);
}
.page-restaurantes .hero-restaurantes p {
  font-size: 1.1rem;
  color: var(--color-text-dim);
  max-width: 800px;
  margin: 0 auto;
}


/* ==========================================================
   SECCIÓN RECETAS (FUSIONADA Y CORREGIDA)
   ========================================================== */

/* --- HERO RECETAS (Con Fix Z-Index y Luminosidad) --- */
.page-recetas .hero.hero-recetas {
  background-size: cover;
  background-position: center;
  padding: 5rem 1rem;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid var(--color-accent);
  position: relative;
  z-index: 1; 
}

/* OVERLAY (Aclarado a 0.6) */
.page-recetas .hero.hero-recetas::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.3) 100%);
  z-index: 2;
}

/* CONTENEDOR (Z-Index alto para estar sobre el overlay) */
.page-recetas .hero.hero-recetas .container {
  position: relative;
  z-index: 10;
  width: 100%;
}

.page-recetas .hero-content {
  text-align: center;
  color: var(--color-text-main);
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
  position: relative;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  z-index: 100; /* Asegura que el texto esté por encima de todo */
}

.page-recetas .hero-content h1 {
  color: var(--color-accent);
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
    z-index: 100; /* Asegura que el texto esté por encima de todo */
}
.page-recetas .hero-content p {
  font-size: 1.2rem;
  color: var(--color-text-dim);
  line-height: 1.6;
  z-index: 100; /* Asegura que el texto esté por encima de todo */
}

/* --- TARJETAS DE RECETAS (Migrado de recetas_cards.css) --- */
/* Se aplica a .page-recetas para no romper otros listados si comparten clase */

.page-recetas .item-card {
    background-color: var(--color-bg-section);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex; 
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-recetas .item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-color: var(--color-accent);
}

.page-recetas .item-card-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.page-recetas .item-card-tag {
    position: absolute;
    top: 10px; left: 10px;
    background-color: var(--color-accent);
    color: var(--color-bg-main);
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 10;
}

.page-recetas .item-card-content {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.page-recetas .item-card-content strong a {
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--color-text-main);
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
}

.page-recetas .item-desc {
    font-size: 0.9rem;
    color: var(--color-text-dim);
    line-height: 1.5;
}

/* --- Relaciones (Ingredientes/Restaurantes) COMPACTAS --- */
.page-recetas .item-relaciones {
    margin-top: auto; /* Empuja hacia abajo */
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.page-recetas .mini-list {
    font-size: 0.8rem; /* Texto base pequeño */
    line-height: 1.3;
}

.page-recetas .mini-list span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.75rem; /* Título minúsculo */
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    letter-spacing: 0.5px;
}

.page-recetas .mini-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.page-recetas .mini-list li { display: inline; }

.page-recetas .mini-list li a {
    color: var(--color-text-dim);
    text-decoration: none;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.page-recetas .mini-list li a:hover {
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.1);
}

.page-recetas .btn-ver-item {
    margin-top: 0.5rem;
    align-self: flex-start;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}


/* ==========================================================
   PANEL DE FILTROS (Común para todos los listados)
   ========================================================== */
.control-panel-wrapper {
    background-color: var(--color-bg-section);
    padding: 1.5rem;
    border-radius: var(--radius-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-form {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.filter-group { flex-grow: 1; min-width: 200px; }

.filter-input, .filter-select {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-dim);
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s ease;
}
.filter-input:focus, .filter-select:focus { border-color: var(--color-accent); }

.btn-filter {
    background-color: var(--color-accent);
    color: var(--color-bg-main);
    font-weight: 600;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}
.btn-filter:hover { transform: translateY(-2px); filter: brightness(1.1); }

.btn-reset {
    color: var(--color-text-dim); text-decoration: underline; font-size: 0.9rem; background: none; border: none; cursor: pointer;
}
.btn-reset:hover { color: var(--color-accent); }

/* Checkboxes de filtro */
.filter-checkbox-group {
    display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.5rem;
}
.filter-check-label {
    display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem;
    color: var(--color-text-dim); cursor: pointer; background: rgba(255,255,255,0.05);
    padding: 0.4rem 0.8rem; border-radius: 4px; border: 1px solid transparent; transition: all 0.2s;
}
.filter-check-label:hover, .filter-check-label:has(input:checked) {
    background: rgba(255,255,255,0.1); border-color: var(--color-accent); color: var(--color-text-main);
}
.filter-check-label input { accent-color: var(--color-accent); }

@media (max-width: 768px) {
    .filter-form { flex-direction: column; align-items: stretch; }
    .btn-filter { width: 100%; }
}


/* ==========================================================
   BADGES DE ALÉRGENOS (Estilos Globales)
   ========================================================== */
.recipe-badges {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; min-height: 28px;
}
.meta-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; font-size: 0.85rem; color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.2s ease;
}
.meta-badge:hover { transform: scale(1.15) rotate(5deg); z-index: 2; }

/* Paleta de Colores Alérgenos */
.badge-gluten       { background-color: #d97706; }
.badge-gluten-free  { background-color: #10b981; }
.badge-lactosa      { background-color: #3b82f6; }
.badge-huevo        { background-color: #eab308; color: #333; }
.badge-marisco      { background-color: #ef4444; }
.badge-pescado      { background-color: #0ea5e9; }
.badge-frutos-secos { background-color: #78350f; }
.badge-soja         { background-color: #65a30d; }
.badge-vegano       { background-color: #22c55e; border: 1px solid #fff; }
.badge-vegetariano  { background-color: #8bc34a; }
.badge-picante      { background-color: #dc2626; }
.badge-default      { background-color: #64748b; }


/* -------------------- LISTADO RUTAS (page-rutas) -------------------- */
.page-rutas .hero.hero-rutas {
  background-size: cover;
  background-position: center;
  padding: 5rem 1rem;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid var(--color-accent);
  position: relative;
}
.page-rutas .hero.hero-rutas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.4) 100%);
  z-index: 1;
}
.page-rutas .hero.hero-rutas .container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.page-rutas .hero-content {
  text-align: center;
  color: var(--color-text-main);
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.page-rutas .hero-content h1 {
  color: var(--color-accent);
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.page-rutas .hero-content p {
  font-size: 1.2rem;
  color: var(--color-text-dim);
  line-height: 1.6;
}

/* ==========================================================
   AÑADIDO: Estilos para Listado POIs (CORREGIDO)
   ========================================================== */

/* -------------------- LISTADO POIS (page-puntos_de_interes) -------------------- */

.page-listado.page-puntos_de_interes .hero.hero-puntos_de_interes {
  background-size: cover;
  background-position: center;
  
  /* Esta es la variable de altura para TODOS los listados */
  height: var(--hero-listado-height, 350px);
  
  /* Flexbox para centrar el contenido */
  display: flex;
  align-items: center;
  justify-content: center;
  
  text-align: center;
  color: #fff;
  border-bottom: 3px solid var(--color-accent);
  position: relative;
}
.page-listado.page-puntos_de_interes .hero.hero-puntos_de_interes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hero-overlay-color, linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.4) 100%));
  z-index: 1;
}
.page-listado.page-puntos_de_interes .hero.hero-puntos_de_interes .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.page-puntos_de_interes .hero-content {
  text-align: center;
  color: var(--color-text-main);
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.page-puntos_de_interes .hero-content h1 {
  font-family: var(--hero-title-font, 'Poppins', sans-serif);
  color: var(--hero-title-color, #FFFFFF);
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.page-puntos_de_interes .hero-content p {
  font-family: var(--hero-subtitle-font, 'Inter', sans-serif);
  color: var(--hero-subtitle-color, var(--color-text-dim));
  font-size: 1.2rem;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.page-puntos_de_interes .mapa-pois {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border-dim);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  background: var(--color-bg-section);
}

.page-puntos_de_interes .mapa-pois-section h2,
.page-puntos_de_interes .pois-listado h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--color-text-main);
  border-bottom: 1px solid var(--color-border-dim);
  padding-bottom: .75rem;
}
/* -------------------- RESPONSIVIDAD (Listados) -------------------- */

@media (max-width: 768px) {
  /* Heroes de Listado */
  .page-productos .hero-productos,
  .page-restaurantes .hero-restaurantes,
  .page-productores .hero-productores {
    padding: 3rem 1rem;
  }
  
  /* Mapas */
  .page-listado .mapa-productores,
  .page-listado .mapa-restaurantes,
  .page-listado .mapa-productos {
    height: 300px;
  }

  /* Tarjetas */
  .page-recetas .recipe-body {
    padding: 1rem;
  }

  /* Hero Recetas y Rutas */
  .page-recetas .hero-content,
  .page-rutas .hero-content {
    padding: 1rem;
  }
  .page-recetas .hero-content h1,
  .page-rutas .hero-content h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 480px) {
  /* Hero Recetas */
  .page-recetas .hero.hero-recetas {
    height: 300px;
  }
  .page-recetas .hero-content h1 {
    font-size: 1.6rem;
  }

  /* Hero Rutas */
  .page-rutas .hero.hero-rutas {
    padding: 3rem 1rem;
  }
  .page-rutas .hero-content h1 {
     font-size: 2rem;
  }
}

/* =========================================
   ESTILOS PARA EL POPUP DEL MAPA (LEAFLET) - TEMA PREMIUM COMPACTO
   ========================================= */

/* --- Wrapper principal del Popup --- */
#mapa-productos .leaflet-popup-content-wrapper {
    background-color: var(--color-bg-section); /* Color de fondo de las tarjetas */
    color: var(--color-text-main);
    border-radius: 8px;
    border: 1px solid var(--color-accent); /* Borde dorado */
    box-shadow: 0 8px 25px rgba(0,0,0,0.6); 
    padding: 0;
    overflow: hidden;
}

/* Pico del popup */
#mapa-productos .leaflet-popup-tip {
    background-color: var(--color-bg-section);
    border: 1px solid var(--color-accent);
    border-top-color: transparent;
    border-left-color: transparent;
}

/* Ancho contenido y compacto */
#mapa-productos .leaflet-popup-content {
    margin: 0;
    width: 250px !important; /* Mucho más estrecho para encajar en el mapa */
}

/* Botón 'X' de cerrar */
#mapa-productos .leaflet-popup-close-button {
    color: var(--color-accent) !important;
    font-size: 1.2rem !important;
    top: 6px !important;
    right: 8px !important;
    transition: transform 0.2s;
}
#mapa-productos .leaflet-popup-close-button:hover {
    color: #ffffff !important;
    transform: scale(1.1);
}

/* --- Contenido Interno de la Tarjeta --- */
.map-popup-negocio {
    padding: 20px 15px 15px 15px; /* Paddings reducidos */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Cabecera: Icono, Título y Tipo */
.map-popup-negocio .popup-header {
    text-align: center;
}

.map-popup-negocio .popup-icon {
    font-size: 1.8rem; /* Tamaño adecuado */
    color: var(--color-accent);
    margin-bottom: 6px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.map-popup-negocio .popup-title {
    margin: 0 0 2px 0;
    font-size: 1.1rem; /* Título compacto */
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-main); /* Dorado de texto principal */
}

.map-popup-negocio .popup-subtitle {
    margin: 0;
    font-size: 0.75rem; /* Subtítulo pequeño y limpio */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-dim); /* Blanco / Secundario */
}

/* Caja de lista de productos */
.map-popup-negocio .popup-products-box {
    background-color: rgba(255, 255, 255, 0.05); /* Ligerísimo contraste */
    border-radius: 6px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.map-popup-negocio .products-header {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--color-text-dim);
}

.map-popup-negocio .products-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 110px; /* Scroll controlado y no muy alto */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) rgba(255,255,255,0.05);
}

/* Estilos scrollbar Webkit */
.map-popup-negocio .products-list::-webkit-scrollbar { width: 4px; }
.map-popup-negocio .products-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 2px;}
.map-popup-negocio .products-list::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 2px; }

.map-popup-negocio .products-list li {
    margin-bottom: 4px;
    display: flex; 
    align-items: flex-start;
    line-height: 1.3;
}

.map-popup-negocio .products-list li i {
    color: var(--color-accent);
    margin-right: 6px; 
    font-size: 0.7rem;
    margin-top: 3px;
}

.map-popup-negocio .products-list a {
    text-decoration: none;
    color: var(--color-text-dim); /* Texto blanco/secundario para los enlaces */
    font-size: 0.85rem; /* Texto pequeño para que quepa bien */
    display: block;
    transition: all 0.2s ease;
}

.map-popup-negocio .products-list a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
}

/* Footer y Botón de acción */
.map-popup-negocio .popup-footer {
    margin-top: 2px;
}

.map-popup-negocio .btn-popup-action {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 8px 10px; /* Botón de tamaño normal */
    background-color: var(--color-accent);
    color: #ffffff; /* Este color fijo para que contraste siempre con el botón dorado */
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700; 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.map-popup-negocio .btn-popup-action:hover {
    background-color: #ffffff;
    color: var(--color-accent);
}

.map-popup-negocio .btn-popup-action:active { transform: scale(0.98); }
.map-popup-negocio .btn-popup-action i { margin-left: 6px; font-size: 1em; }

/* =======================================================
   FIX: NITIDEZ DE TEXTOS (MODO OSCURO) Y COLORES DE POPUP
   ======================================================= */

/* 1. Suavizado de fuentes: Evita el efecto "sangrado" o borroso en letras claras sobre fondo oscuro */
body, .item-card, .map-popup-negocio, .custom-popup-ficha {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 2. Corregir el grosor de las tarjetas para que sean 100% nítidas */
.item-card-content strong,
.item-card-content strong a,
.map-popup-negocio .popup-title {
    text-shadow: none !important; /* Mata cualquier sombra fantasma heredada */
    font-weight: 600 !important;  /* 600 (Semibold) se renderiza mucho más nítido que 700 o bold en fondos oscuros */
    letter-spacing: 0.3px;        /* Un mínimo de aire mejora la lectura */
}

/* 3. Forzar los colores correctos en el Popup del mapa de la ficha del Productor 
      (Esto sobrescribe el color oscuro #0f172a y #64748b que inyectaba el JS) */
.custom-popup-ficha h3 {
    color: var(--color-accent) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

.custom-popup-ficha span {
    color: var(--color-text-dim) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}