/**
 * Iniciativa y Acción — Directorio (GeoDirectory).
 *
 * GeoDirectory trae su propia hoja de Bootstrap (AyeCode UI). En vez de pelearle
 * con `!important` selector por selector, se remapean sus variables `--bs-*` a
 * los tokens que ya define theme.json. Así el directorio hereda la identidad del
 * sitio y cualquier cambio futuro de paleta se propaga solo.
 */

.iya-directorio {
	--bs-primary: var(--wp--preset--color--primary);
	--bs-primary-rgb: 30, 58, 138;
	--bs-secondary: var(--wp--preset--color--muted);
	--bs-link-color: var(--wp--preset--color--primary);
	--bs-link-hover-color: var(--wp--preset--color--accent);
	--bs-body-color: var(--wp--preset--color--contrast);
	--bs-body-font-family: var(--wp--preset--font-family--body);
	--bs-border-color: var(--wp--preset--color--border);
	--bs-border-radius: 10px;
	--bs-border-radius-lg: 14px;
	--bs-card-border-color: var(--wp--preset--color--border);

	/* Tokens propios del directorio. */
	--iya-dir-sombra: 0 1px 3px rgba(13, 29, 46, .08), 0 1px 2px rgba(13, 29, 46, .04);
	--iya-dir-sombra-hover: 0 10px 28px rgba(13, 29, 46, .12);
	--iya-dir-radio: 12px;
}

/* --------------------------------------------------------------- Encabezado */

.iya-directorio__titulo {
	margin-bottom: 0;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
}

.iya-directorio__bajada {
	max-width: 62ch;
	margin-top: .5rem;
}

/* Los encabezados de archivo/búsqueda/alta y la ficha individual repiten el
   mismo banner azul noche que el resto del sitio (home, Sobre, Sumate,
   Contacto): el bloque ya trae textColor="base" en el HTML, pero el título
   hereda igual el navy de la regla de arriba porque ambas son una sola clase
   con la misma especificidad — acá se la gana por especificidad, no por
   orden. */
.iya-directorio__encabezado .iya-directorio__titulo,
.iya-ficha__encabezado .iya-ficha__titulo {
	color: var(--wp--preset--color--base);
}

.iya-directorio__encabezado .iya-directorio__bajada {
	color: rgba(255, 255, 255, .78);
}

/* ------------------------------------------------------------------ Botones */

.iya-directorio .btn-primary,
.iya-directorio .geodir-search-button,
.iya-directorio button[type="submit"] {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	border-radius: 999px;
	padding-inline: 1.4rem;
	transition: background-color .15s ease, border-color .15s ease;
}

.iya-directorio .btn-primary:hover,
.iya-directorio .btn-primary:focus,
.iya-directorio .geodir-search-button:hover,
.iya-directorio button[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.iya-directorio .btn-outline-primary {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	border-radius: 999px;
}

.iya-directorio .btn-outline-primary:hover {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* --------------------------------------------------------------- Formularios */

.iya-directorio .form-control,
.iya-directorio .form-select,
.iya-directorio input[type="text"],
.iya-directorio input[type="email"],
.iya-directorio input[type="search"],
.iya-directorio select,
.iya-directorio textarea {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--border);
	border-radius: 8px;
}

.iya-directorio .form-control:focus,
.iya-directorio .form-select:focus,
.iya-directorio input:focus,
.iya-directorio select:focus,
.iya-directorio textarea:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(46, 155, 216, .18);
}

.iya-directorio label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* La barra de búsqueda es la puerta de entrada al directorio: se le da peso
   propio en lugar de dejarla como una fila de inputs sueltos. */
.iya-gd-buscador .geodir-listing-search {
	padding: 1rem;
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--iya-dir-radio);
}

/* -------------------------------------------------------------- Categorías */

/* GeoDirectory ya distribuye las categorías con la grilla de Bootstrap
   (.row.row-cols-*), así que acá sólo se las viste: montar encima un grid propio
   duplicaba el layout y peleaba con el suyo.

   Cada categoría es un .card cuyo cuerpo lleva .btn.btn-outline-primary, porque
   Bootstrap lo usa para hacer clickeable la tarjeta entera. Eso la deja al
   alcance de las reglas de botón de más arriba, que son para botones de verdad:
   sin acotarlas, el radio de píldora convierte la tarjeta en una elipse. */
.iya-gd-categorias .card-body.btn {
	padding: .9rem 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--border);
	border-radius: var(--iya-dir-radio);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.iya-gd-categorias .card-body.btn:hover,
.iya-gd-categorias .card-body.btn:focus {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
	box-shadow: var(--iya-dir-sombra);
}

/* El nombre va dentro de un a.stretched-link, que Bootstrap estira sobre toda la
   tarjeta con un ::after posicionado. Sólo se le toca la tipografía: darle caja
   propia (display, fondo, borde) rompía ese mecanismo y dibujaba un recuadro
   suelto adentro de la tarjeta. */
/* El !important no es capricho: la clase .text-uppercase que trae la plantilla
   de GeoDirectory es una utilidad de Bootstrap, y todas llevan !important. */
.iya-gd-categorias .gd-cptcat-cat-right.text-uppercase {
	text-transform: none !important;
}

.iya-gd-categorias .gd-cptcat-cat-right a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: .95rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.iya-gd-categorias .gd-cptcat-icon {
	color: var(--wp--preset--color--accent);
}

.iya-gd-categorias .gd-cptcat-count {
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	font-weight: 600;
}

/* ------------------------------------------------------- Tarjeta de la ficha */

/* La tarjeta es el .card: .geodir-post es la columna de la grilla que lo
   envuelve, así que vestir las dos dibujaba un doble marco. Tampoco se recorta
   el desborde: GeoDirectory monta a propósito las chapas (categoría, favorito,
   destacado) y el avatar sobre el borde superior de la tarjeta, y un
   overflow:hidden se los comía. */
.iya-gd-listado .card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--iya-dir-radio);
	box-shadow: var(--iya-dir-sombra);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.iya-gd-listado .card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--iya-dir-sombra-hover);
}

.iya-gd-listado .geodir-post-title,
.iya-gd-listado .geodir-entry-title,
.iya-gd-listado .card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: .35rem;
}

.iya-gd-listado .geodir-post-title a,
.iya-gd-listado .geodir-entry-title a,
.iya-gd-listado .card-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.iya-gd-listado .geodir-post-title a:hover,
.iya-gd-listado .geodir-entry-title a:hover,
.iya-gd-listado .card-title a:hover {
	color: var(--wp--preset--color--primary);
}

.iya-gd-listado .geodir-post-content,
.iya-gd-listado .card-text {
	font-size: .925rem;
	color: var(--wp--preset--color--muted);
}

/* GeoDirectory sube el avatar con un margen negativo para que monte sobre la
   imagen de portada de la ficha. Mientras las fichas no tengan portada no hay
   nada arriba contra qué montarlo y ese tirón lo dejaba flotando por encima del
   borde de la tarjeta. El !important es porque el margen viene de una utilidad
   de Bootstrap (.mt-n5), y todas llevan !important. */
.iya-gd-listado .card img.rounded-circle {
	margin-top: 0 !important;
}

/* Los datos de contacto son lo que la gente vino a buscar: se destacan sobre el
   resto del texto de la tarjeta. */
.iya-gd-listado .geodir_post_meta a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}

.iya-gd-listado .geodir_post_meta a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.iya-gd-listado .geodir_post_meta i,
.iya-ficha .geodir_post_meta i {
	color: var(--wp--preset--color--accent);
}

/* Estrellas de reseña en el amarillo de la marca.
   GeoDirectory pinta las estrellas con iconos dentro de .gd-rating-output, y su
   color se hereda del contenedor: alcanza con teñir el wrapper. */
.iya-directorio .gd-list-rating-stars,
.iya-directorio .gd-rating-output,
.iya-directorio .gd-rating-wrap,
.iya-directorio .geodir-post-rating .gd-rating,
.iya-directorio .gd-rating-foreground {
	color: var(--wp--preset--color--highlight);
}

.iya-directorio .gd-rating-output i,
.iya-directorio .gd-rating-output svg,
.iya-directorio .gd-list-rating-stars i,
.iya-directorio .gd-list-rating-stars svg {
	color: inherit;
	fill: currentColor;
}

/* El texto que acompaña a las estrellas (cantidad de reseñas) vuelve al gris
   de lectura: en amarillo sería ilegible sobre blanco. */
.iya-directorio .gd-rating-output-wrap .gd-rating-count,
.iya-directorio .geodir-post-rating a {
	color: var(--wp--preset--color--muted);
}

/* Distintivo de ficha destacada. */
.iya-gd-listado .geodir-featured .card,
.iya-gd-listado .geodir_featured_post .card {
	border-color: var(--wp--preset--color--highlight);
	box-shadow: 0 0 0 1px var(--wp--preset--color--highlight), var(--iya-dir-sombra);
}

/* -------------------------------------------------- Ficha individual */

.iya-ficha__titulo {
	margin-bottom: .35rem;
}

.iya-ficha__categorias a {
	display: inline-block;
	padding: .28rem .8rem;
	margin: 0 .3rem .3rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .82rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
	text-decoration: none;
}

.iya-ficha__categorias a:hover {
	color: #fff;
	background: var(--wp--preset--color--primary);
}

.iya-ficha__galeria img {
	border-radius: var(--iya-dir-radio);
}

.iya-ficha .nav-tabs {
	border-bottom-color: var(--wp--preset--color--border);
}

.iya-ficha .nav-tabs .nav-link {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	border: 0;
	border-bottom: 2px solid transparent;
}

.iya-ficha .nav-tabs .nav-link.active {
	color: var(--wp--preset--color--primary);
	background: transparent;
	border-bottom-color: var(--wp--preset--color--primary);
}

/*
 * Dirección, teléfono, WhatsApp y horarios de la ficha (ver gd-single.html).
 * GeoDirectory imprime la dirección con un <br> entre cada parte -pensado
 * para una columna lateral angosta, no para una franja de ancho completo- y
 * eso la dejaba en cinco líneas apretadas contra el teléfono. Acá se ocultan
 * esos saltos y se unen las partes con comas, como una dirección normal.
 */
.iya-ficha__info .geodir-field-address br {
	display: none;
}

.iya-ficha__info .geodir-field-address [itemprop]:not(:last-of-type)::after {
	content: ", ";
}

.iya-ficha__dato {
	color: var(--wp--preset--color--contrast);
}

.iya-ficha__dato .geodir_post_meta_icon {
	color: var(--wp--preset--color--primary);
	margin-right: .3rem;
}

.iya-ficha__dato a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.iya-ficha__dato a:hover {
	text-decoration: underline;
}

.iya-ficha__contacto {
	gap: .4rem 1.5rem;
}

.iya-ficha__whatsapp a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.iya-ficha__whatsapp a:hover {
	text-decoration: underline;
}

.iya-ficha__whatsapp .fa-whatsapp {
	color: #25d366;
	margin-right: .3rem;
}

/* --------------------------------------------------------------- Paginación */

.iya-gd-paginacion .page-link {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--border);
	border-radius: 8px;
	margin: 0 .15rem;
}

.iya-gd-paginacion .page-item.active .page-link {
	color: #fff;
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------ Vista kanban */

/* La home muestra Profesionales y Comercios como dos columnas de un tablero
   en vez de dos secciones apiladas: cada wp:column es una "columna" de
   kanban con su propia tarjeta de fondo. GeoDirectory reparte categorías y
   fichas según el ancho de pantalla (row-cols-md-*), no el del contenedor,
   así que el layout="1" en el shortcode (una ficha por fila) y el
   row_items="2" en las categorías son los que evitan que se aprieten dentro
   de una columna angosta; esta sección sólo viste el resultado. */
.iya-kanban-col {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--iya-dir-radio);
	padding: var(--wp--preset--spacing--40);
}

.iya-kanban-col--profesionales {
	border-top: 3px solid var(--wp--preset--color--primary);
}

.iya-kanban-col--comercios {
	border-top: 3px solid var(--wp--preset--color--accent);
}

.iya-kanban-col__cabecera {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ Móvil */

@media (max-width: 600px) {
	.iya-gd-categorias .card-body.btn {
		padding: .7rem .8rem;
	}

	.iya-gd-categorias .gd-cptcat-cat-right a {
		font-size: .85rem;
	}

	.iya-gd-buscador .geodir-listing-search {
		padding: .75rem;
	}
}