/* Marcador del mapa por situación — Mascotas Perdidas (v3.17.0)
 *
 * Listeo mete el icono del término dentro de .marker-container .face (maps.js
 * ~792 y listeo.leaflet.js ~608). El filtro get_term_metadata le añade al <i>
 * la clase pp-mp-perdida / pp-mp-encontrada; aquí se colorea la cara y la
 * flecha del marcador. Colores tomados de PataMap:
 *   rojo  rgb(211,47,47)  = se busca
 *   verde rgb(67,160,71)  = encontrada
 * :has() está en todos los navegadores actuales (Chrome 105+, Safari 15.4+,
 * Firefox 121+). Donde no exista, el marcador se ve como siempre — sin romper.
 */

.marker-container:has(.pp-mp-perdida) .marker-card .face,
.map-marker-container:has(.pp-mp-perdida) .marker-card .face {
	background: #D32F2F !important;
	color: #fff !important;
}
.marker-container:has(.pp-mp-perdida) .marker-arrow,
.map-marker-container:has(.pp-mp-perdida) .marker-arrow {
	border-color: #D32F2F transparent transparent !important;
}
.marker-container:has(.pp-mp-encontrada) .marker-card .face,
.map-marker-container:has(.pp-mp-encontrada) .marker-card .face {
	background: #43A047 !important;
	color: #fff !important;
}
.marker-container:has(.pp-mp-encontrada) .marker-arrow,
.map-marker-container:has(.pp-mp-encontrada) .marker-arrow {
	border-color: #43A047 transparent transparent !important;
}
.marker-container .face .pp-mp-marca { color: #fff; }

/* Marcador del mapa de la FICHA (single): mismo criterio. */
#singleListingMap .marker-container:has(.pp-mp-perdida) .face { background: #D32F2F !important; }
#singleListingMap .marker-container:has(.pp-mp-encontrada) .face { background: #43A047 !important; }

/* ─────────────────────────────────────────────────────────────────────────
 * La PATA con color de situación, en todas partes (v3.18.0)
 *
 * Los dos términos comparten ahora el mismo icono (`fas fa-paw`): lo que los
 * distingue es el COLOR. Rojo = se busca, verde = encontrada. Miguel,
 * 2026-08-18.
 *
 * Funciona porque `pp_mp_icono_marcador()` añade al icono del término las
 * clases `pp-mp-marca pp-mp-perdida|encontrada`, y ese mismo icono lo pintan
 * TRES sitios: la barra superior de filtros (#categorySlider), la ficha y el
 * marcador del mapa. Un solo gancho para los tres.
 * ───────────────────────────────────────────────────────────────────────── */

/* 1) Uso general del icono (ficha, listados…). */
.pp-mp-marca.pp-mp-perdida { color: #D32F2F; }
.pp-mp-marca.pp-mp-encontrada { color: #43A047; }

/* 2) Barra superior de filtros.
 * ⚠️ El tema hijo pinta TODOS los iconos del carrusel de turquesa con
 * !important:
 *     .category-slider .category-item i:not(.listeo-svg-icon-box-grid)
 *       { color: var(--teal-parche, #79C8D0) !important; }
 * Para ganarle hace falta !important Y más especificidad: por eso se usa el
 * id #categorySlider y se apunta al propio <i>. Sin el id, la regla del tema
 * gana y la pata sigue turquesa (medido). */
#categorySlider .category-item i.pp-mp-perdida { color: #D32F2F !important; }
#categorySlider .category-item i.pp-mp-encontrada { color: #43A047 !important; }
#categorySlider .category-item.active i.pp-mp-perdida,
#categorySlider .category-item:hover i.pp-mp-perdida { color: #B71C1C !important; }
#categorySlider .category-item.active i.pp-mp-encontrada,
#categorySlider .category-item:hover i.pp-mp-encontrada { color: #2E7D32 !important; }
#categorySlider .category-item.active:has(i.pp-mp-perdida) .category-name { color: #D32F2F !important; }
#categorySlider .category-item.active:has(i.pp-mp-encontrada) .category-name { color: #43A047 !important; }
/* Sin recuadro alrededor de la pata (Miguel, 2026-08-18): el color del icono
   ya lo dice todo. Se anula tambien el fondo/borde que Listeo pone al
   .icon-container y al chip activo, para que quede la pata limpia. */
#categorySlider .category-item .icon-container,
#categorySlider .category-item.active .icon-container,
#categorySlider .category-item:hover .icon-container {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
#categorySlider .category-item.active,
#categorySlider .category-item:hover { background: transparent !important; box-shadow: none !important; }
/* La pata crece un poco al estar activa, en vez de encerrarse en un cuadro */
#categorySlider .category-item.active i.pp-mp-perdida,
#categorySlider .category-item.active i.pp-mp-encontrada { transform: scale(1.12); }

/* 3) ⚠️ En el MARCADOR del mapa la pata va en BLANCO: ahí el color lo lleva
 *    el fondo del marcador (rojo/verde), y una pata roja sobre fondo rojo no
 *    se vería. Esta regla debe ir DESPUÉS de las de arriba para ganar. */
.marker-container .face .pp-mp-marca,
.map-marker-container .face .pp-mp-marca,
.marker-container .face .pp-mp-perdida,
.marker-container .face .pp-mp-encontrada { color: #fff !important; }