/* ===========================================================================
   Ordesa Sobrarbe — sistema del mapa general
   ---------------------------------------------------------------------------
   Una sola capa. Sustituye a las tres generaciones apiladas (base, V2.1
   «controles flotantes» y V2.2 «identidad editorial»), que declaraban unos
   veinte selectores por triplicado y dejaban código muerto.

   Escalas del sistema, sin excepciones fuera de las documentadas:
   - Sombras: 3 (--os-map-shadow-sm | -md | -lg), un único foco de luz cenital.
   - Radios:  3 (--os-map-r-sm 8px | -md 12px | -pill 999px).
   - Pesos:   3 (400 lectura | 600 interfaz | 800 titulares).
   - Sustrato: claro y único (blanco, crema, arena). Nada de superficies
     oscuras: eran residuo de la iteración tipo panel de control, descartada.

   Excepciones deliberadas, decididas por dirección de arte:
   - «Cerca de mí» es un CTA circular (registro central §14, V2.2).
   - El distintivo de la cabecera es una gota, no un círculo: comparte
     silueta con los pines del mapa.

   Scope estricto: la interfaz vive bajo .os-map-app. Los estilos genéricos de
   popup se conservan para los mapas embebidos en fichas.
   ========================================================================== */

:root {
	--os-map-action: #BF4B0A;
	--os-map-action-deep: #7B3007;
	--os-map-ink: #1A1A1A;
	--os-map-muted: #6B6B5E;
	--os-map-line: #E8E4DA;
	--os-map-surface: #FFFFFF;
	--os-map-sand: #F5F3EE;

	--os-map-r-sm: 8px;
	--os-map-r-md: 12px;
	--os-map-r-pill: 999px;
	/* Radio concéntrico para elementos anidados dentro de otro con -r-sm. */
	--os-map-r-inner: calc(var(--os-map-r-sm) - 2px);

	--os-map-shadow-sm: 0 1px 2px rgba(26, 26, 26, .08);
	--os-map-shadow-md: 0 6px 20px rgba(26, 26, 26, .10);
	--os-map-shadow-lg: 0 16px 40px rgba(26, 26, 26, .16);

	--os-map-ease-out: cubic-bezier(.22, 1, .36, 1);
	--os-map-ease-drawer: cubic-bezier(.32, .72, 0, 1);
	--os-map-press: 140ms;
	--os-map-control: 180ms;
	--os-map-drawer: 240ms;
}

/* ---------------------------------------------------------------------------
   1. Popup genérico — mapas embebidos fuera de la página general
   ------------------------------------------------------------------------ */

.wpgmza-infowindow,
.leaflet-popup-content .wpgmza-infowindow,
.leaflet-popup-content {
	font-family: 'Source Serif 4', Georgia, serif;
	color: var(--color-antracita, #333333);
	line-height: 1.4;
}

.leaflet-popup-content-wrapper,
.wpgmza-infowindow {
	border-radius: var(--os-map-r-md) !important;
	overflow: hidden;
	box-shadow: var(--os-map-shadow-lg);
}

.leaflet-popup-content {
	margin: 0 !important;
	width: 250px !important;
	padding: 0 !important;
}

.wpgmza-infowindow img,
.wpgmza_infowindow_image img,
.leaflet-popup-content img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	margin: 0 0 10px;
	background: var(--os-map-sand);
}

.wpgmza_infowindow_title,
.wpgmza-infowindow-title,
.wpgmza-infowindow .wpgmza-infowindow__title,
.leaflet-popup-content .wpgmza_infowindow_title {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.2;
	color: var(--os-map-ink);
	padding: 0 12px;
	margin: 0 0 6px;
}

.wpgmza_infowindow_description,
.wpgmza-infowindow .wpgmza-infowindow__description { padding: 0 12px; }

.os-mappop-tag {
	display: inline-block;
	margin: 0 12px 8px;
	padding: 3px 10px;
	border-radius: var(--os-map-r-pill);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #FFF;
}

.os-mappop-tag--lugar { background: #2E6B3A; }
.os-mappop-tag--negocio { background: #BF4B0A; }
.os-mappop-tag--territorio { background: #8A6832; }

.os-mappop-btn {
	display: block;
	margin: 0 12px 12px;
	padding: 10px 14px;
	border-radius: var(--os-map-r-sm);
	background: var(--os-map-action);
	color: #FFF;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 600;
	font-size: .9rem;
	text-align: center;
	text-decoration: none;
}

.os-mappop-btn:hover,
.os-mappop-btn:focus { background: var(--os-map-action-deep); color: #FFF; }
.os-mappop-btn:focus-visible { outline: 3px solid var(--os-map-action); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   2. Página del mapa — el lienzo recupera el ancho completo
   ---------------------------------------------------------------------------
   Divi 5 ya no envuelve el contenido en `.container`: la anchura la imponen
   `.et_pb_row` (max-width 1080px) y el relleno vertical de `.et_pb_section`.
   Por eso el bloque anterior, que apuntaba a `#main-content .container`, había
   dejado de tener efecto y el mapa perdía entre el 20 % y el 29 % del ancho.
   Se neutraliza solo en esta página; revertir es borrar este bloque.
   ------------------------------------------------------------------------ */

body.page-id-32215 { overflow-x: clip; }

body.page-id-32215 #main-content .container {
	width: 100%;
	max-width: none;
	padding: 0;
}
body.page-id-32215 #main-content .container::before { display: none; }
body.page-id-32215 #left-area { float: none; width: 100%; padding: 0; }
body.page-id-32215 article.page { margin: 0; padding: 0; }
body.page-id-32215 article.page > .entry-title { display: none; }
body.page-id-32215 article.page .entry-content { padding: 0; }

body.page-id-32215.et-db #et-boc .et-l--post .et_pb_section { padding-block: 0; }

/* El preset `.preset--module--divi-row--default` fija `padding: 2em` con
   !important, asi que hay que responder con !important y mas especificidad;
   si no, queda una franja blanca de 36 px sobre la cabecera del mapa.
   IMPRESCINDIBLE acotar a `.et-l--post`: `.et-l` a secas alcanza tambien los
   layouts de cabecera y pie del Theme Builder, que viven bajo el mismo
   `#et-boc`, y les aplicaria estos rellenos. */
body.page-id-32215.et-db #et-boc .et-l--post .et_pb_row {
	width: 100%;
	max-width: none;
	padding-block: 0 !important;
	margin-inline: 0;
}
/* Solo se anula el relleno SUPERIOR: el inferior es la separacion con el pie
   de pagina y debe existir. Anular ambos dejaba el mapa pegado al footer. */
body.page-id-32215.et-db #et-boc .et-l--post .et_pb_section {
	padding-block-start: 0 !important;
	padding-block-end: clamp(40px, 5vw, 72px) !important;
	margin-block: 0 !important;
}
body.page-id-32215.et-db #et-boc .et-l--post .et_pb_column,
body.page-id-32215.et-db #et-boc .et-l--post .et_pb_module {
	padding-block: 0 !important;
	margin-block: 0 !important;
}

/* ---------------------------------------------------------------------------
   3. Carcasa de la aplicación
   ------------------------------------------------------------------------ */

.os-map-app {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--os-map-surface);
	color: var(--os-map-ink);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	isolation: isolate;
}

/* El bloque cierra con la misma escala de seis capas con la que abre: el
   mapa queda delimitado arriba y abajo, no derramandose sobre el pie. */
.os-map-app::after {
	content: '';
	display: block;
	height: 4px;
	background: linear-gradient(
		90deg,
		#BF4B0A 0 16.667%,
		#2E6B3A 0 33.334%,
		#8A6832 0 50%,
		#276477 0 66.667%,
		#6E4F7D 0 83.334%,
		#A73D3A 0 100%
	);
}

.os-map-app *,
.os-map-app *::before,
.os-map-app *::after { box-sizing: border-box; }
.os-map-app button,
.os-map-app input { font: inherit; }
.os-map-app button { cursor: pointer; }
/* Divi aplica `padding-bottom: 1em` a los parrafos del contenido; dentro de
   la interfaz del mapa el espaciado lo fija cada componente. */
.os-map-app p { padding-bottom: 0; }
.os-map-app :focus-visible {
	outline: 3px solid var(--os-map-action);
	outline-offset: 3px;
}

.os-map-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   4. Cabecera editorial
   ------------------------------------------------------------------------ */

.os-map-toolbar {
	position: relative;
	z-index: 2;
	display: block;
	padding: 0;
	background: var(--os-map-sand);
}

/* La firma de la pagina es su propio sistema de seis capas, no un adorno
   inventado: el borde inferior es la escala de color del contenido. */
.os-map-toolbar::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 4px;
	background: linear-gradient(
		90deg,
		#BF4B0A 0 16.667%,
		#2E6B3A 0 33.334%,
		#8A6832 0 50%,
		#276477 0 66.667%,
		#6E4F7D 0 83.334%,
		#A73D3A 0 100%
	);
}

.os-map-toolbar__wrap {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	width: min(100%, 1500px);
	align-items: end;
	gap: clamp(20px, 3.6vw, 56px);
	margin-inline: auto;
	padding: clamp(18px, 2.2vw, 28px) clamp(20px, 4vw, 64px) clamp(16px, 1.8vw, 22px);
}

.os-map-toolbar__identity { min-width: 0; }
.os-map-toolbar__heading { min-width: 0; }

.os-map-toolbar__eyebrow {
	margin: 0 0 6px;
	color: var(--color-verde-bosque, #2E6B3A);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}

/* Divi impone `font-size: 50px` desde `.et-db #et-boc .et-l h1`, que gana por
   especificidad de id. Se replica esa cadena para recuperar la escala fluida
   del sistema; sin esto, el titular parte la palabra en movil. */
.os-map-toolbar h1,
.et-db #et-boc .et-l .os-map-toolbar h1 {
	margin: 0;
	color: var(--os-map-ink);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: clamp(2.15rem, 4.6vw, 4rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: .94;
	text-wrap: balance;
}

/* Entradilla en la voz de lectura del canon; dice de que va el mapa, que es
   lo que la cabecera anterior no hacia. */
.os-map-toolbar__lead {
	max-width: 42ch;
	margin: 0 0 4px;
	color: var(--os-map-muted);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: clamp(.98rem, 1.15vw, 1.12rem);
	font-weight: 400;
	line-height: 1.45;
	text-wrap: pretty;
}

.os-map-toolbar p.os-map-toolbar__layer {
	display: grid;
	justify-items: end;
	margin: 0 0 2px;
	padding: 0;
	color: var(--os-map-muted);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.3;
	text-align: right;
	text-transform: uppercase;
}
.os-map-toolbar__layer strong {
	color: var(--os-map-ink);
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   5. Lienzo y controles nativos de Leaflet
   ------------------------------------------------------------------------ */

.os-map-workspace {
	position: relative;
	width: 100%;
	height: clamp(560px, 78dvh, 860px);
	overflow: hidden;
	background: #DDE4DF;
}

.os-map-canvas { position: absolute; inset: 0; }
.os-map-canvas,
.os-map-canvas > .wpgmza_map {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
}
.os-map-canvas .wpgmza_map { background: #DDE4DF; }

/* El plugin sirve sus controles a 30 px; el mínimo del proyecto es 44. Los
   tres controles flotantes se alinean en una columna sobre el borde derecho:
   «Cerca de mí», pantalla completa y zoom. El contenedor del botón de pantalla
   completa no lleva acabado propio —solo su ancla— o se dibuja caja doble. */
.os-map-canvas .leaflet-top.leaflet-right { top: 8px; right: 10px; }
.os-map-canvas .leaflet-control-fullscreen {
	margin-top: 0;
	margin-right: 20px;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.os-map-canvas .leaflet-fullscreen-corner { display: none; }

.os-map-canvas .leaflet-control-zoom {
	margin-top: 12px;
	margin-right: 20px;
	border: 1px solid var(--os-map-line) !important;
	border-radius: var(--os-map-r-sm);
	box-shadow: var(--os-map-shadow-md);
	overflow: hidden;
}
.os-map-canvas a.leaflet-control-button {
	border: 1px solid var(--os-map-line);
	border-radius: var(--os-map-r-sm);
	box-shadow: var(--os-map-shadow-md);
}
.os-map-canvas .leaflet-control-zoom a,
.os-map-canvas a.leaflet-control-button {
	display: grid !important;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	color: var(--os-map-ink);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: 1.3rem;
	line-height: 1;
	background: var(--os-map-surface);
}
.os-map-canvas .leaflet-control-zoom a + a { border-top: 1px solid var(--os-map-line); }
.os-map-canvas .leaflet-control-zoom-in,
.os-map-canvas .leaflet-control-zoom-out { border-radius: 0; }

.os-map-canvas .leaflet-control-attribution {
	padding: 3px 8px;
	background: rgba(255, 255, 255, .88);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: .68rem;
	color: var(--os-map-muted);
}
.os-map-canvas .leaflet-control-attribution a { color: var(--os-map-action-deep); }

/* ---------------------------------------------------------------------------
   6. Panel de capas
   ---------------------------------------------------------------------------
   Regla dura del proyecto: en escritorio y tablet el panel NO tiene scroll
   interno. Las seis capas van en dos columnas para que quepa entero, incluido
   el conmutador de estilo de mapa.
   ------------------------------------------------------------------------ */

.os-map-panel {
	position: absolute;
	z-index: 420;
	top: 18px;
	left: 18px;
	display: flex;
	flex-direction: column;
	width: 310px;
	max-height: calc(100% - 32px);
	padding: 16px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	border: 1px solid var(--os-map-line);
	border-radius: var(--os-map-r-md);
	background: var(--os-map-surface);
	box-shadow: var(--os-map-shadow-lg);
	color: var(--os-map-ink);
	transform: scale(.985);
	transform-origin: top left;
	transition:
		opacity var(--os-map-control) var(--os-map-ease-out),
		transform var(--os-map-control) var(--os-map-ease-out);
}
.os-map-panel.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
}
.os-map-panel.is-dragging { cursor: grabbing; transition: none; user-select: none; }

.os-map-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: -2px -2px 10px;
	padding: 2px 2px 9px;
	border-bottom: 1px solid var(--os-map-line);
	cursor: grab;
	touch-action: none;
}
.os-map-panel__head h2,
.et-db #et-boc .et-l .os-map-panel__head h2 {
	margin: 0;
	color: var(--os-map-muted);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* El recuento es dato, no titular: va debajo de la accion y en pequeno. */
.os-map-panel__count {
	margin: 12px 0 14px;
	color: var(--os-map-muted);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: .76rem;
	font-weight: 400;
	line-height: 1.35;
}
.os-map-panel__count span[data-os-visible-count] {
	font-weight: 600;
	color: var(--os-map-ink);
	font-variant-numeric: tabular-nums;
}

.os-map-panel__toggle {
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--os-map-line);
	border-radius: var(--os-map-r-sm);
	background: var(--os-map-sand);
	color: var(--os-map-ink);
	font-size: 1.4rem;
	line-height: 1;
	transition: background var(--os-map-control) var(--os-map-ease-out);
}

/* ---------------------------------------------------------------------------
   7. Capas de contenido
   ------------------------------------------------------------------------ */

.os-map-layer-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5px;
	padding: 0;
}
.os-map-layer-wrap { display: flex; min-width: 0; flex-direction: column; }

.os-map-layer {
	--layer: var(--os-map-action);
	--layer-deep: var(--os-map-action-deep);
	--layer-soft: #F7E9E0;
	position: relative;
	display: grid;
	/* La cuarta columna es fija para que la marca de selección aparezca y
	   desaparezca sin mover el resto de la fila. */
	grid-template-columns: 22px minmax(0, 1fr) auto 14px;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: var(--os-map-r-sm);
	background: var(--layer-soft);
	color: var(--layer-deep);
	cursor: pointer;
	/* Al marcar cambian fondo y color: deben estar en la transición o el
	   cambio salta de golpe, que es la interacción principal de la página. */
	transition:
		background-color var(--os-map-control) var(--os-map-ease-out),
		color var(--os-map-control) var(--os-map-ease-out),
		border-color var(--os-map-control) var(--os-map-ease-out),
		transform var(--os-map-press) var(--os-map-ease-out);
}

.os-map-layer[data-layer='negocios'] { --layer: #BF4B0A; --layer-deep: #7B3007; --layer-soft: #F7E9E0; }
.os-map-layer[data-layer='lugares'] { --layer: #2E6B3A; --layer-deep: #1F4E29; --layer-soft: #E4EEE6; }
.os-map-layer[data-layer='territorios'] { --layer: #8A6832; --layer-deep: #5C451F; --layer-soft: #F1EBDD; }
.os-map-layer[data-layer='rutas'] { --layer: #276477; --layer-deep: #183F4B; --layer-soft: #E3EEF1; }
.os-map-layer[data-layer='itinerarios'] { --layer: #6E4F7D; --layer-deep: #493455; --layer-soft: #EEE8F1; }
.os-map-layer[data-layer='eventos'] { --layer: #A73D3A; --layer-deep: #6F2927; --layer-soft: #F5E6E5; }

.os-map-layer:has(.os-map-layer__input:checked) {
	background: var(--layer);
	color: #FFF;
}
.os-map-layer:has(.os-map-layer__input:focus-visible) {
	outline: 3px solid var(--os-map-action);
	outline-offset: 2px;
}
.os-map-layer:not(.is-disabled):active { transform: scale(.98); }

.os-map-layer__input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}
.os-map-layer .os-map-icon { color: currentColor; }
.os-map-layer__name {
	min-width: 0;
	color: currentColor;
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.15;
}
.os-map-layer__count {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 24px;
	padding: 0 6px;
	border-radius: var(--os-map-r-pill);
	background: rgba(255, 255, 255, .72);
	color: currentColor;
	font-size: .74rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.os-map-layer:has(.os-map-layer__input:checked) .os-map-layer__count {
	background: rgba(255, 255, 255, .22);
}

/* La marca de selección vuelve a ser visible: el color no puede ser el único
   identificador de estado (WCAG 1.4.1 y canon de las seis capas). */
.os-map-layer__check {
	width: 14px;
	color: #FFF;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	visibility: hidden;
}
.os-map-layer:has(.os-map-layer__input:checked) .os-map-layer__check { visibility: visible; }

.os-map-layer.is-disabled {
	border-color: var(--os-map-line);
	background: var(--os-map-sand);
	color: var(--os-map-muted);
	cursor: not-allowed;
}
.os-map-layer.is-disabled .os-map-icon { color: var(--layer); }

.os-map-layer__note {
	margin: 3px 8px 0 4px;
	color: var(--os-map-muted);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: .72rem;
	font-weight: 400;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   8. Estilo del mapa base
   ------------------------------------------------------------------------ */

.os-map-panel__divider {
	height: 1px;
	margin: 10px 0 9px;
	background: var(--os-map-line);
}

.os-map-base-title {
	margin: 0 0 6px;
	color: var(--os-map-muted);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.os-map-base-switch {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
	padding: 3px;
	background: var(--os-map-sand);
	border-radius: var(--os-map-r-sm);
}
.os-map-base-switch button {
	min-height: 44px;
	padding: 6px;
	border: 0;
	border-radius: var(--os-map-r-inner);
	background: transparent;
	color: var(--os-map-muted);
	font-size: .78rem;
	font-weight: 600;
	/* Antes: `transition: all 0s`, es decir, ningún feedback al conmutar. */
	transition:
		background-color var(--os-map-control) var(--os-map-ease-out),
		color var(--os-map-control) var(--os-map-ease-out),
		box-shadow var(--os-map-control) var(--os-map-ease-out);
}
.os-map-base-switch button[aria-pressed='true'] {
	background: var(--os-map-ink);
	color: #FFF;
	box-shadow: none;
}
.os-map-base-switch button:active { transform: scale(.98); }

/* ---------------------------------------------------------------------------
   9. Acciones flotantes
   ------------------------------------------------------------------------ */

/* Accion principal del panel: ancho completo y con su etiqueta a la vista.
   Antes era un circulo naranja flotando solo sobre el mapa, sin texto. */
.os-map-near {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	margin-top: 14px;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--os-map-r-sm);
	/* Tinta, no naranja: el naranja es el color de la capa Negocios y una
	   accion del sistema no puede vestirse de contenido. */
	background: var(--os-map-ink);
	color: #FFF;
	font-size: .92rem;
	font-weight: 600;
	text-align: center;
	transition:
		background-color var(--os-map-control) var(--os-map-ease-out),
		transform var(--os-map-press) var(--os-map-ease-out);
}
.os-map-near .os-map-icon { width: 20px; height: 20px; }
.os-map-near > span { min-width: 0; }
.os-map-near.is-active { background: var(--color-verde-bosque, #2E6B3A); }
.os-map-near[aria-busy='true'] { background: #3A3A38; cursor: progress; }
.os-map-near:active { transform: scale(.98); }

.os-map-drawer-trigger {
	position: absolute;
	z-index: 417;
	top: 50%;
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 8px 14px 8px 10px;
	transform: translateY(-50%);
	border: 1px solid var(--os-map-line);
	border-left: 0;
	border-radius: 0 var(--os-map-r-sm) var(--os-map-r-sm) 0;
	background: var(--os-map-surface);
	color: var(--os-map-ink);
	box-shadow: var(--os-map-shadow-md);
	font-size: .88rem;
	font-weight: 600;
	white-space: nowrap;
	transition:
		background-color var(--os-map-control) var(--os-map-ease-out),
		transform var(--os-map-press) var(--os-map-ease-out);
}
.os-map-drawer-trigger .os-map-icon { width: 24px; height: 24px; color: var(--os-map-action); }
.os-map-drawer-trigger[hidden] { display: none !important; }
.os-map-drawer-trigger:active { transform: translateY(-50%) scale(.98); }

.os-map-drawer-trigger__count {
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: var(--os-map-r-pill);
	background: var(--os-map-action);
	color: #FFF;
	font-size: .74rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   10. Estados
   ------------------------------------------------------------------------ */

.os-map-state {
	position: absolute;
	z-index: 450;
	top: 50%;
	left: 50%;
	display: grid;
	justify-items: center;
	gap: 12px;
	max-width: min(360px, calc(100% - 40px));
	padding: 22px 26px;
	transform: translate(-50%, -50%);
	border: 1px solid var(--os-map-line);
	border-radius: var(--os-map-r-md);
	background: var(--os-map-surface);
	box-shadow: var(--os-map-shadow-lg);
	text-align: center;
}
.os-map-state[hidden] { display: none; }
.os-map-state strong { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.os-map-state button {
	min-height: 44px;
	padding: 9px 16px;
	border: 0;
	border-radius: var(--os-map-r-sm);
	background: var(--os-map-action);
	color: #FFF;
	font-weight: 600;
	transition: background-color var(--os-map-control) var(--os-map-ease-out);
}
.os-map-state button:active { transform: scale(.98); }
.os-map-state__skeleton {
	width: 40px;
	height: 40px;
	border: 3px solid var(--os-map-line);
	border-top-color: var(--os-map-action);
	border-radius: 50%;
	animation: os-map-spin .8s linear infinite;
}
.os-map-state.is-error .os-map-state__skeleton { display: none; }
@keyframes os-map-spin { to { transform: rotate(360deg); } }

.os-map-scrim { display: none; }

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

.os-map-noscript {
	margin: 0;
	padding: 16px 24px;
	background: var(--os-map-sand);
	color: var(--os-map-ink);
}

/* ---------------------------------------------------------------------------
   11. Popup editorial del mapa general
   ------------------------------------------------------------------------ */

.os-map-app .leaflet-popup { --popup-layer: #BF4B0A; --popup-deep: #7B3007; }
.os-map-app .os-map-popup--lugares { --popup-layer: #2E6B3A; --popup-deep: #1F4E29; }
.os-map-app .os-map-popup--territorios { --popup-layer: #8A6832; --popup-deep: #5C451F; }
.os-map-app .os-map-popup--rutas { --popup-layer: #276477; --popup-deep: #183F4B; }
.os-map-app .os-map-popup--itinerarios { --popup-layer: #6E4F7D; --popup-deep: #493455; }
.os-map-app .os-map-popup--eventos { --popup-layer: #A73D3A; --popup-deep: #6F2927; }

.os-map-app .leaflet-popup-content-wrapper {
	border-radius: var(--os-map-r-md) !important;
	box-shadow: var(--os-map-shadow-lg);
}
/* Sin scroll interno: el boton de la ficha no puede quedar fuera de la caja.
   Leaflet fija una `height` en linea sobre este elemento, de ahi el
   !important; sin el, el contenido se recorta y el CTA desaparece. */
.os-map-app .leaflet-popup-content {
	width: 280px !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
.os-map-app .leaflet-popup-tip { background: var(--popup-deep); }
.os-map-app .leaflet-popup-close-button {
	top: 8px !important;
	right: 8px !important;
	display: grid !important;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba(26, 26, 26, .78) !important;
	color: #FFF !important;
	font: 26px/1 'Bricolage Grotesque', sans-serif !important;
	box-shadow: var(--os-map-shadow-sm);
}
.os-map-app .wpgmza_infowindow_title,
.os-map-app .wpgmza_infowindow_address,
.os-map-app .wpgmza_infowindow_image,
.os-map-app .wpgmza_infowindow_link { display: none !important; }
.os-map-app .wpgmza_infowindow_description { padding: 0 !important; }

.os-map-popup-card {
	overflow: hidden;
	background: var(--os-map-surface);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}
.os-map-popup-card__media { height: 96px; overflow: hidden; background: var(--os-map-sand); }
.os-map-popup-card__media img {
	width: 100%;
	height: 96px;
	aspect-ratio: auto;
	margin: 0;
	object-fit: cover;
}
.os-map-popup-card__body { padding: 12px 14px 14px; border-top: 3px solid var(--popup-layer); }
.os-map-popup-card__type {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 7px;
	color: var(--popup-deep);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .09em;
	line-height: 1.2;
	text-transform: uppercase;
}
/* Este punto sí es semántico: lleva el color de la capa. */
.os-map-popup-card__type span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--popup-layer);
}
.os-map-popup-card__title,
.et-db #et-boc .et-l .os-map-popup-card__title {
	margin: 0;
	color: var(--os-map-ink);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.012em;
	text-wrap: balance;
	/* Dos lineas como maximo: un titulo largo no puede empujar el boton. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.os-map-popup-card__meta {
	margin: 4px 0 0;
	color: var(--os-map-muted);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: .86rem;
	line-height: 1.3;
}
.os-map-popup-card__actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.os-map-popup-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 44px;
	padding: 9px 13px;
	border-radius: var(--os-map-r-sm);
	/* El boton lleva el color de la capa del pin: la ficha y el marcador
	   hablan el mismo idioma. */
	background: var(--popup-deep);
	color: #FFF !important;
	font-size: .86rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none !important;
	transition: background-color var(--os-map-control) var(--os-map-ease-out);
}
.os-map-popup-card__cta:active { transform: scale(.98); }
.os-map-popup-card__actions .os-fav,
.os-map-popup-card__actions .os-favorite,
.os-map-popup-card__actions button {
	flex: 0 0 44px;
	width: 44px;
	min-width: 44px;
	height: 44px;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   12. Diálogo de ubicación
   ------------------------------------------------------------------------ */

.os-map-geo-dialog {
	width: min(440px, calc(100vw - 32px));
	max-width: 440px;
	padding: 28px;
	border: 0;
	border-radius: var(--os-map-r-md);
	background: var(--os-map-surface);
	color: var(--os-map-ink);
	box-shadow: var(--os-map-shadow-lg);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}
.os-map-geo-dialog::backdrop { background: rgba(26, 26, 26, .52); }
.os-map-geo-dialog__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--os-map-r-sm);
	background: transparent;
	color: var(--os-map-muted);
	font-size: 1.6rem;
	transition: background-color var(--os-map-control) var(--os-map-ease-out);
}
.os-map-geo-dialog__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #F7E9E0;
	color: var(--os-map-action-deep);
}
.os-map-geo-dialog h2,
.et-db #et-boc .et-l .os-map-geo-dialog h2 {
	margin: 0 44px 8px 0;
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.15;
	text-wrap: balance;
}
.os-map-geo-dialog p {
	margin: 0;
	color: var(--os-map-muted);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1rem;
	line-height: 1.5;
}
.os-map-geo-dialog__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.os-map-button {
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--os-map-line);
	border-radius: var(--os-map-r-sm);
	background: var(--os-map-surface);
	color: var(--os-map-ink);
	font-weight: 600;
	transition: background-color var(--os-map-control) var(--os-map-ease-out);
}
.os-map-button--primary {
	border-color: var(--os-map-action);
	background: var(--os-map-action);
	color: #FFF;
}
.os-map-button--retry { margin-top: 12px; }
.os-map-button:active { transform: scale(.98); }

.os-map-geo-dialog__spinner {
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 0 18px;
	border: 3px solid var(--os-map-line);
	border-top-color: var(--os-map-action);
	border-radius: 50%;
	animation: os-map-spin .8s linear infinite;
}

.os-map-locality { margin-top: 20px; }
.os-map-locality label { display: block; margin-bottom: 7px; font-size: .86rem; font-weight: 600; }
.os-map-locality__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.os-map-locality input {
	min-width: 0;
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid #928D84;
	border-radius: var(--os-map-r-sm);
	background: var(--os-map-surface);
	color: var(--os-map-ink);
}
.os-map-locality__error {
	margin-top: 8px !important;
	color: #8D2826 !important;
	font-size: .84rem !important;
}

/* ---------------------------------------------------------------------------
   13. Puntero fino
   ------------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
	.os-map-near:hover { background: #3A3A38; }
	.os-map-near.is-active:hover { background: #1F4E29; }
	.os-map-drawer-trigger:hover { background: var(--os-map-sand); }
	.os-map-panel__toggle:hover,
	.os-map-geo-dialog__close:hover { background: var(--os-map-line); }
	.os-map-base-switch button:not([aria-pressed='true']):hover { background: var(--os-map-surface); color: var(--os-map-ink); }
	.os-map-popup-card__cta:hover { background: var(--os-map-ink); color: #FFF; }
	.os-map-button--primary:hover,
	.os-map-state button:hover { background: var(--os-map-action-deep); color: #FFF; }
	/* Sin desplazamiento en las filas de capa: es una lista que se recorre
	   decenas de veces y el movimiento ahí es ruido, no información. */
	.os-map-layer:not(.is-disabled):hover { border-color: var(--layer); }
}

/* ---------------------------------------------------------------------------
   14. Tablet
   ------------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {
	.os-map-toolbar__wrap { padding-inline: 24px; }
	.os-map-workspace { height: clamp(520px, 74dvh, 720px); }
	.os-map-panel { width: 296px; }
}

/* Pantalla ancha pero baja: tablet apaisada y portátiles de 768 px de alto.
   El panel debe seguir cabiendo entero, así que el lienzo gana altura. */
@media (min-width: 1024px) and (max-height: 830px) {
	.os-map-workspace { height: clamp(520px, 86dvh, 860px); }
}

/* ---------------------------------------------------------------------------
   15. Móvil
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	body.page-id-32215 { overflow-x: hidden; }

	.os-map-toolbar__wrap { padding: 20px 16px 18px; }
	.os-map-toolbar__wrap { grid-template-columns: 1fr; align-items: start; gap: 10px; }
	.os-map-toolbar__eyebrow { font-size: .7rem; margin-bottom: 4px; }
	.os-map-toolbar__lead { max-width: none; margin: 0; font-size: .95rem; line-height: 1.4; }
	/* En movil la cifra va en una sola linea: apilada anadia 40 px de alto. */
	.os-map-toolbar p.os-map-toolbar__layer {
		display: flex;
		align-items: baseline;
		gap: 6px;
		margin: 0;
		text-align: left;
	}
	.os-map-toolbar__layer strong { font-size: 1.2rem; }

	.os-map-workspace { height: clamp(480px, 76dvh, 660px); }
	.os-map-canvas .leaflet-container { touch-action: pan-y; }
	.os-map-canvas .leaflet-top.leaflet-right { top: 14px; right: 4px; }
	.os-map-canvas .leaflet-control-fullscreen { margin-top: 0; margin-right: 14px; }
	.os-map-canvas .leaflet-control-zoom { margin-top: 12px; margin-right: 14px; }

	/* El unico control flotante en movil es la pestana que abre el panel. */
	.os-map-drawer-trigger {
		top: auto;
		left: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom));
		min-height: 56px;
		padding: 8px 16px 8px 12px;
		transform: none;
		border: 1px solid var(--os-map-line);
		border-radius: var(--os-map-r-pill);
	}
	.os-map-drawer-trigger:active { transform: scale(.98); }

	.os-map-panel {
		top: 0;
		left: 0;
		right: auto;
		bottom: 0;
		width: min(90vw, 360px);
		height: 100%;
		max-height: none;
		padding: 15px 14px calc(18px + env(safe-area-inset-bottom));
		overflow: auto;
		overscroll-behavior: contain;
		transform: translateX(-100%);
		border-width: 0 1px 0 0;
		border-radius: 0;
		opacity: 1;
		visibility: hidden;
		transition:
			transform var(--os-map-drawer) var(--os-map-ease-drawer),
			visibility 0s linear var(--os-map-drawer);
	}
	.os-map-panel.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--os-map-drawer) var(--os-map-ease-drawer);
	}
	.os-map-panel__head { cursor: default; touch-action: auto; }
	.os-map-panel__move-hint { display: none; }
	.os-map-layer { min-height: 48px; }

	.os-map-scrim {
		position: absolute;
		z-index: 419;
		inset: 0;
		display: block;
		border: 0;
		background: rgba(26, 26, 26, .42);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--os-map-control) var(--os-map-ease-out);
	}
	.os-map-scrim[hidden] { display: none; }
	.os-map-scrim.is-open { opacity: 1; pointer-events: auto; }

	.os-map-state { padding: 19px 20px; }
	.os-map-app .leaflet-popup-content { width: min(272px, calc(100vw - 56px)) !important; }
	/* El lienzo es más alto que la parte visible, así que el globo debe ser
	   más bajo o su acción queda por debajo del borde inferior. */
	.os-map-popup-card__media,
	.os-map-popup-card__media img { height: 88px; }
	.os-map-geo-dialog { padding: 24px 20px calc(22px + env(safe-area-inset-bottom)); }
	.os-map-geo-dialog__actions { display: grid; }
	.os-map-locality__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   16. Movimiento reducido
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.os-map-app *,
	.os-map-app *::before,
	.os-map-app *::after,
	.os-map-geo-dialog,
	.os-map-geo-dialog * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.os-map-panel { transform: none !important; }
	.os-map-panel:not(.is-open) { transform: translateX(-100%) !important; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
	.os-map-panel:not(.is-open) { transform: none !important; }
}