/*
 * Colores: este archivo no lleva colores propios de ninguna web. Usa los
 * huecos de la paleta del tema (--wp--preset--color--titulo, fondo, borde…)
 * y las variables de acento de Kommad Base (--kmd-acento-texto,
 * --kmd-acento-oscuro, --kmd-acento-claro), que cambian solas en la zona
 * turística. Cada uno lleva un color de respaldo por si el tema activo no es
 * Kommad Base.
 *
 * Excepción a propósito, en mapa.css: las marcas del mapa (salida en verde,
 * llegada en negro, bordes blancos) y el aviso amarillo. Son símbolos del
 * mapa y avisos, no color de marca: tienen que verse igual en todas las webs.
 */

/*
 * Kommad Contenidos — listados (rutas, puntos de interés, establecimientos) y tarjeta común.
 * Solo la mecánica; el aspecto fino lo pone el tema.
 */

.kmd-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Filtros, plegados en un botón (<details>). */
.kmd-listado-plegable {
	margin-block: 1.5rem 0.5rem;
}

.kmd-listado-plegable summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1rem;
	border: 2px solid var(--kmd-acento-texto, #1a1a1a);
	border-radius: var(--kmd-radio-pequeno, 4px);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	box-sizing: border-box;
}

.kmd-listado-plegable summary::-webkit-details-marker {
	display: none;
}

.kmd-listado-plegable summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.kmd-listado-plegable[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.kmd-listado-plegable summary:hover {
	background: var(--kmd-acento-claro, #f0ece4);
}

.kmd-listado-plegable summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--titulo, #1a1a1a);
	outline-offset: 2px;
}

.kmd-listado-activos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.375rem;
	border-radius: 0.75rem;
	background: var(--kmd-acento-texto, #1a1a1a);
	color: var(--wp--preset--color--fondo, #fff);
	font-size: 0.875rem;
	box-sizing: border-box;
}

.kmd-listado-activos[hidden] {
	display: none;
}

.kmd-listado-filtros {
	margin-top: 0.75rem;
	padding: var(--kmd-esp-tarjeta, 1rem) calc(var(--kmd-esp-tarjeta, 1rem) * 1.25);
	border: var(--kmd-borde-tarjeta, 1px solid var(--wp--preset--color--borde, #c8c8c8));
	border-radius: var(--kmd-radio-medio, 4px);
	background: var(--kmd-fondo-tarjeta, transparent);
}

.kmd-listado-grupos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1rem 1.5rem;
}

.kmd-listado-grupo {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.kmd-listado-grupo legend,
.kmd-listado-grupo--lista label {
	display: block;
	margin-bottom: 0.375rem;
	padding: 0;
	font-weight: 600;
}

.kmd-listado-grupo label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem; /* objetivo táctil */
	cursor: pointer;
}

.kmd-listado-grupo input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	flex: none;
}

.kmd-listado-grupo select {
	width: 100%;
	min-height: 2.75rem;
	font: inherit;
}

.kmd-listado-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1rem 0 0;
}

.kmd-listado-aplicar {
	min-height: 2.75rem;
	padding: 0 1.25rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.kmd-listado-cuenta {
	font-weight: 600;
}

/* Lista */
/* Con caja amplia o fluida, el listado (filtros, mapa y tarjetas) ocupa la
   caja entera; el texto de la página se queda en su medida (content-size).
   Con caja estándar los dos anchos son iguales y no cambia nada. */
.is-layout-constrained > .kmd-listado,
.is-layout-constrained > .kmd-nucleos-listado {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.kmd-listado-lista {
	display: grid;
	/* Tarjetas de 18rem como mínimo y como mucho cuatro por fila: con caja
	   amplia o fluida, más columnas dejarían huecos con pocos resultados. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(18rem, calc((100% - 3 * var(--kmd-esp-rejilla, 1.5rem)) / 4))), 1fr));
	gap: var(--kmd-esp-rejilla, 1.5rem);
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.kmd-listado-lista > li[hidden] {
	display: none;
}

/* Tarjeta */
.kmd-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--kmd-borde-tarjeta, 1px solid var(--wp--preset--color--borde, #d6d6d6));
	border-radius: var(--kmd-radio-medio, 4px);
	box-shadow: var(--kmd-sombra-tarjeta, none);
	overflow: hidden;
	background: var(--kmd-fondo-tarjeta, var(--wp--preset--color--fondo, #fff));
	transition: box-shadow 0.2s ease;
}

/* Al pasar el ratón, la sombra sube un nivel (si la web usa sombras). */
.kmd-tarjeta:hover {
	box-shadow: var(--kmd-sombra-tarjeta-encima, var(--kmd-sombra-tarjeta, none));
}

/* Con movimiento sutil o marcado, la foto se acerca un poco al pasar el
   ratón. Con «reducir movimiento», nada (base.css anula las transiciones). */
:root[data-kmd-movimiento="sutil"] .kmd-tarjeta-foto,
:root[data-kmd-movimiento="marcado"] .kmd-tarjeta-foto {
	transition: transform 0.4s ease;
}

:root[data-kmd-movimiento="sutil"] .kmd-tarjeta:hover .kmd-tarjeta-foto,
:root[data-kmd-movimiento="marcado"] .kmd-tarjeta:hover .kmd-tarjeta-foto {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.kmd-tarjeta:hover .kmd-tarjeta-foto {
		transform: none !important;
	}
}

.kmd-tarjeta-foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kmd-tarjeta-foto--vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--fondo-medio, #e9e4da);
	color: var(--wp--preset--color--texto-suave, #6b6355);
}

.kmd-tarjeta-texto {
	padding: calc(var(--kmd-esp-tarjeta, 1rem) * 0.875) var(--kmd-esp-tarjeta, 1rem) var(--kmd-esp-tarjeta, 1rem);
}

.kmd-tarjeta-nombre {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	line-height: 1.25;
}

/* Toda la tarjeta se pulsa, pero el enlace sigue siendo solo el nombre (un
   único enlace por tarjeta para el lector de pantalla). */
.kmd-tarjeta-nombre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kmd-tarjeta-nombre a:focus-visible {
	outline: none;
}

.kmd-tarjeta:has(.kmd-tarjeta-nombre a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--titulo, #1a1a1a);
	outline-offset: 2px;
}

.kmd-en-espanol {
	font-size: 0.875rem;
	font-weight: 400;
}

.kmd-tarjeta-datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1rem;
	margin: 0;
	font-size: 0.9375rem;
}

.kmd-tarjeta-datos dt {
	font-size: 0.8125rem;
}

.kmd-tarjeta-datos dd {
	margin: 0;
	font-weight: 600;
}

.kmd-listado-mapa {
	margin-block: 1rem;
}

/* Tarjeta sin página propia (establecimientos): no hay enlace que estire. */
.kmd-tarjeta--sin-enlace .kmd-tarjeta-nombre {
	margin-bottom: 0.5rem;
}

.kmd-tarjeta-antetitulo {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Acciones de contacto: enlaces grandes, uno por línea en móvil. */
.kmd-tarjeta-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.kmd-tarjeta-acciones a {
	position: relative;
	z-index: 1; /* por encima del enlace estirado, si lo hubiera */
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 600;
}

.kmd-tarjeta-lista {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.9375rem;
}

/* Tarjeta de establecimiento: dirección, características y contacto. */
.kmd-tarjeta-direccion {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
}

.kmd-tarjeta-caracteristicas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.kmd-tarjeta-caracteristicas li {
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--kmd-acento-claro, #f0ece4);
}

.kmd-tarjeta-contacto {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.kmd-tarjeta-contacto a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	overflow-wrap: anywhere;
}

.kmd-tarjeta .kmd-como-llegar {
	margin-top: 0.5rem;
}

/* Listado de pueblos (kmd/nucleos-listado). */
.kmd-tarjeta-entradilla {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Zona institucional: tarjeta sin foto, más baja. El antetítulo
   («Capital del municipio», «Despoblado») queda encima del nombre. */
.kmd-tarjeta--sin-foto .kmd-tarjeta-texto {
	padding-top: var(--kmd-esp-tarjeta, 1rem);
}

.kmd-tarjeta--sin-foto .kmd-tarjeta-nombre:last-child {
	margin-bottom: 0;
}

.kmd-nucleos-listado .kmd-fuente {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--texto-pequeno, 0.875rem);
	color: var(--wp--preset--color--texto-suave, #6b6355);
}