/* =================================================================
   iad-finder.css — Vistas 20-21 (Figma "23-Finder-Lists-Desktop" node 3266:13383 y
   "24-Finder-Details-Desktop" node 3316:12412, archivo BdUd1g6K6cuVm4036Z5p6p).
   Se encola SOLO en la página con la plantilla "IAD Finder" o en is_singular('store_item')
   (iad-finder/inc/enqueue.php). Depende de dia-base (tokens de dia-theme-2026/assets/css/base.css)
   — no redefine --dia-color-*, los reusa literal (ya coinciden 1:1 con el Figma).

   Sidebar+mapa SIEMPRE lado a lado (2 columnas), en cualquier ancho de viewport — a diferencia
   del legacy Angular (nett-locator), acá NO se apilan en una sola columna en mobile: el sidebar
   se angosta (--iad-sidebar-width) pero sigue apareciendo a la izquierda del mapa. Bug real
   (2026-07-17): la primera versión sí apilaba en columna bajo 64rem, pedido explícito de que NO
   pase eso.
   ================================================================= */

@layer views {

	.iad-finder {
		display: flex;
		flex-direction: row;
		height: 100vh;
	}

	.iad-finder__sidebar {
		/* 2 anchos fijos, no fluido: 300px mobile, 400px de tablet para arriba (ver el
		   @media de abajo) — variable compartida con .iad-finder-sidebar (contenido interno) y el
		   cálculo del slide de collapse de más abajo, para que los 3 escalen juntos. */
		--iad-sidebar-width: 300px;
		width: var(--iad-sidebar-width);
		flex-shrink: 0;
		border-right: 1px solid var(--dia-color-border-subtle, #e5e5e5);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: var(--dia-color-bg-subtle, #fafbfb);
		transition: width .2s ease;
	}

	@media (width >= 40rem) {
		.iad-finder__sidebar {
			--iad-sidebar-width: 400px;
		}
	}

	/* Colapsado: el ancho anima a 54px (mismo ancho del botón de collapse) — el borde derecho del
	   sidebar se desliza hacia la izquierda mientras el mapa gana ese espacio. Solo el brand se
	   oculta vía x-show (parts/finder-sidebar.php); body/footer quedan visibles y se recortan por
	   overflow:hidden, dando el efecto "peek" de un fragmento real del sidebar. */
	.iad-finder__sidebar.iad-finder__sidebar--collapsed {
		width: 54px;
	}

	.iad-finder__map {
		position: relative;
		flex: 1;
	}

	.iad-finder-map {
		position: absolute;
		inset: 0;
	}

	/* ---- Sidebar ---- */
	/* Ancho = --iad-sidebar-width (variable de .iad-finder__sidebar, heredada) — FIJO, no 100%
	   del padre: si el contenido se achicara junto con .iad-finder__sidebar se vería "aplastado"
	   en vez de desplazado. Con ancho fijo + transform de abajo, es el propio contenido el que se
	   desliza hacia la izquierda al colapsar (la caja exterior recorta con overflow:hidden), no un
	   reflow. El botón de collapse, anclado al borde derecho de este bloque, termina calzando
	   justo en la ventana visible de 54px una vez colapsado. */
	.iad-finder-sidebar {
		position: relative; /* ancla el tab de collapse, ver .iad-finder-sidebar__collapse */
		display: flex;
		flex-direction: column;
		width: var(--iad-sidebar-width);
		flex-shrink: 0;
		height: 100%;
		transition: transform .2s ease;
	}

	.iad-finder__sidebar--collapsed .iad-finder-sidebar {
		transform: translateX(calc(-1 * (var(--iad-sidebar-width) - 54px)));
	}

	.iad-finder-sidebar__header {
		position: relative; /* ancla .iad-finder-sidebar__collapse, que ocupa su alto completo */
		/* Alto FIJO (no derivado de padding+contenido): con height implícito, el header medía
		   distinto según el brand estuviera visible u oculto (x-show), y el botón de collapse
		   —anclado a top:0 dentro de esta caja— se corría/recortaba al colapsar (el sidebar
		   colapsado tiene overflow:hidden). Fijar el alto evita ambos problemas. */
		height: 54px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-s) var(--space-m);
		padding-left: 0; /* el espacio a la izquierda lo da .iad-finder-sidebar__brand, no el header —
		                    así queda en 0 tanto colapsado como expandido, sin necesitar una clase extra */
		padding-right: 54px; /* deja espacio al botón de collapse (54px de ancho) */
		border-bottom: 1px solid var(--dia-color-border-subtle, #eff1f3);
		background: #fff;
	}

	.iad-finder-sidebar__brand {
		display: flex;
		align-items: center;
		gap: var(--space-s);
		padding-left: 24px; /* el espacio a la izquierda que antes daba el header, ver arriba */
	}

	.iad-finder-sidebar__brand a {
		display: flex;
		align-items: center;
		line-height: 0; /* evita espacio fantasma bajo el <img>, es el único contenido del link */
	}

	.iad-finder-sidebar__divider {
		width: 1px;
		height: 20px;
		background: var(--dia-color-border-subtle, #e5e5e5);
	}

	.iad-finder-sidebar__title {
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}

	/* Botón de collapse: 54x54 fijo, pegado a la esquina superior derecha, esquinas cuadradas
	   (parte del propio borde del header, no un botón flotante con radio). Vive dentro de
	   .iad-finder-sidebar__header (ver parts/finder-sidebar.php), que queda siempre visible aunque
	   el resto del sidebar colapse — por eso sigue visible cuando el sidebar colapsa a
	   .iad-finder__sidebar--collapsed (ancho = al de este botón, 54px). */
	.iad-finder-sidebar__collapse {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 54px;
		height: 54px;
		border: none;
		border-radius: 0;
		background: linear-gradient(80.98deg, rgb(45, 84, 128) 3.29%, rgb(34, 64, 97) 65.54%, rgb(31, 66, 73) 95.89%);
		background-size: 220% 220%;
		color: #fdfdfd;
		cursor: pointer;
		z-index: 1;
	}

	/* Hover: 2 capas (overlay diagonal + el degradado base) sobre un lienzo más grande
	   (background-size 220%) para que @keyframes pueda desplazar background-position — un
	   background-image no se puede animar directo con `transition` (no es interpolable entre dos
	   gradientes), por eso la animación explícita en vez de solo cambiar el valor en :hover. */
	.iad-finder-sidebar__collapse:hover {
		background-image: linear-gradient(105deg, rgba(0, 0, 0, .2) 1.83%, rgba(62, 131, 145, .2) 60.47%), linear-gradient(81deg, #2d5480 3.29%, #224061 65.54%, #1f4249 95.89%);
		background-size: 220% 220%;
		animation: iad-finder-collapse-sheen 1.1s ease forwards;
	}

	@keyframes iad-finder-collapse-sheen {
		0% {
			background-position: 0% 50%;
		}
		100% {
			background-position: 100% 50%;
		}
	}

	.iad-finder-sidebar__collapse svg {
		transition: transform .2s ease, opacity .2s ease;
	}

	.iad-finder-sidebar__collapse:hover svg {
		opacity: .6;
	}

	/* Colapsado: la flecha (ícono 'back', apunta a la izquierda por defecto) rota para apuntar a
	   la derecha — reabre el sidebar. */
	.iad-finder-sidebar__collapse.is-collapsed svg {
		transform: rotate(180deg);
	}

	.iad-finder-sidebar__search {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding: var(--space-m);
		border-bottom: 1px solid var(--dia-color-border-subtle, #e5e5e5);
	}

	.iad-finder-sidebar__search-icon {
		color: var(--dia-color-text-secondary, #767778);
		display: inline-flex;
	}

	.iad-finder-sidebar__search-input {
		flex: 1;
		border: none;
		background-color: #fafafb;
		font-family: var(--font-sans);
		font-size: 1rem;
		color: var(--dia-color-text-primary, #121212);
	}

	.iad-finder-sidebar__search-input::placeholder {
		color: var(--dia-color-text-secondary, #767778);
	}

	.iad-finder-sidebar__search-input:focus {
		outline: none;
	}

	.iad-finder-sidebar__filters {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-xs);
		padding: var(--space-m);
		border-bottom: 1px solid var(--dia-color-border-subtle, #e5e5e5);
	}

	/* Sin flex-wrap: Country/Type se reparten el espacio disponible (flex:1 en
	   .iad-finder-dropdown) y se comprimen si hace falta, en vez de mandar a Nearby a una segunda
	   fila cuando no caben los 3 juntos. El ellipsis de .iad-finder-dropdown__label es la red de
	   seguridad para textos largos ("Bahamas", "Educational") en este layout de fila. En mobile
	   (<40rem) esto cambia a columna, ver el @media más abajo. */
	.iad-finder-sidebar__dropdowns {
		display: flex;
		flex: 1;
		gap: var(--space-xs);
		min-width: 0;
	}

	.iad-finder-sidebar__nearby {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		flex-shrink: 0;
		border: 1px solid var(--dia-color-brand-primary, #2d5480);
		background: var(--dia-color-brand-primary, #2d5480);
		color: #fff;
		border-radius: var(--dia-radius-sm, 4px);
		cursor: pointer;
	}

	.iad-finder-sidebar__nearby:disabled {
		opacity: .6;
		cursor: progress;
	}

	.iad-finder-sidebar__nearby-error {
		margin: 0;
		padding: var(--space-xs) var(--space-m) 0;
		color: #b3261e;
		font-size: .875rem;
	}

	/* Desktop/tablet: el selector de idioma se achica a su contenido (ícono + "EN" + chevron) en
	   vez de ocupar todo el ancho del footer — bug real reportado 2026-07-22, el <div> de
	   .iad-finder-dropdown es block por default y llenaba el footer completo a CUALQUIER ancho,
	   incluso a 1024px (un intento anterior solo agregaba un width:100% redundante dentro del
	   `<40rem` de abajo, sin achicarlo antes acá — nunca cambiaba nada en el resto de los tamaños).
	   inline-block + width:fit-content para que el ancho lo den el contenido real del botón de
	   adentro, no el footer. DEBE ir antes del `<40rem` de abajo en el archivo: misma
	   especificidad en los 2, así que el que gana en cada rango es el que aparece último en el
	   orden de cascada — este primero, para que el `width:100%` de mobile (después) lo pise ahí. */
	.iad-finder-sidebar__footer .iad-finder-dropdown {
		display: inline-block;
		width: fit-content;
	}

	/* Mobile SOLO (pedido explícito, no aplica en tablet/desktop): Country/Type apilados en
	   columna, mismo ancho completo, en vez de compartir una fila angosta — el pill quedaba muy
	   apretado para textos largos ("Bahamas", "Educational") incluso con el ellipsis de
	   .iad-finder-dropdown__label. Nearby se queda en su tamaño y proporción original (40x40
	   cuadrado, NO estirado a la altura combinada de los 2 pills apilados) — align-self:flex-start
	   evita que .iad-finder-sidebar__filters (align-items:center) lo centre verticalmente contra
	   toda la columna. */
	@media (width < 40rem) {
		.iad-finder-sidebar__filters {
			align-items: flex-start;
		}

		.iad-finder-sidebar__dropdowns {
			flex-direction: column;
		}

		.iad-finder-sidebar__dropdowns .iad-finder-dropdown {
			flex: none;
			width: 100%;
		}

		.iad-finder-sidebar__nearby {
			align-self: flex-start;
		}

		/* Selector de idioma (footer) — SOLO en mobile ocupa el 100% del ancho. Necesita el
		   `display: inline-block`/`width: fit-content` de la regla de ARRIBA (antes de este media
		   query, misma especificidad — el orden en el archivo es lo que decide quién gana en cada
		   rango) para que haya algo que pisar acá. */
		.iad-finder-sidebar__footer .iad-finder-dropdown {
			display: block;
			width: 100%;
		}
	}

	.iad-finder-sidebar__list {
		padding: var(--space-xs);
		overflow-y: auto;
		background: #fafbfb;
	}

	.iad-finder-sidebar__empty {
		padding: var(--space-m);
		color: var(--dia-color-text-secondary, #767778);
		text-align: center;
	}

	.iad-finder-sidebar__back-row {
		border-bottom: 1px solid var(--dia-color-border-subtle, #e5e5e5);
	}

	.iad-finder-sidebar__back {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		padding: var(--space-m);
		background: none;
		border: none;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
		cursor: pointer;
		text-decoration: none;
	}

	.iad-finder-sidebar__footer {
		padding: var(--space-s) var(--space-m);
		border-top: 1px solid var(--dia-color-border-subtle, #e5e5e5);
		background: #ffffff;
	}

	/* ---- Item de la lista ---- */
	.iad-finder-item {
		display: flex;
		align-items: flex-start;
		gap: var(--space-s);
		width: 100%;
		padding: var(--space-s);
		border: none;
		background: none;
		text-align: left;
		border-radius: var(--dia-radius-md, 6px);
		cursor: pointer;
	}

	.iad-finder-item:hover {
		background: #f5f5f1;
		border-radius: 12px;
	}

	.iad-finder-item__image {
		width: 80px;
		height: 80px;
		flex-shrink: 0;
		border-radius: 6px;
		overflow: hidden;
		border: 1px solid #c5d6e9;
		background: #e8f0f2;
	}

	.iad-finder-item:hover .iad-finder-item__image {
		border-color: #2d5480;
	}

	.iad-finder-item__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Instituciones sin `imagen_portada` (Figma node "img" 3293:10668): caja de acento en vez de
	   foto, con el ícono 'institution' (inc/icons.php) centrado a 16x16 — color/borde de la caja ya
	   vienen del estado base de .iad-finder-item__image de arriba (unificado con la caja CON foto),
	   acá solo queda el layout de centrado. .iad-finder-detail__image--fallback (vista de detalle,
	   caja más grande) SÍ necesita su propio color porque su base normal usa otro fondo. */
	.iad-finder-item__image--fallback,
	.iad-finder-detail__image--fallback {
		display: flex;
		padding: 6px;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	.iad-finder-detail__image--fallback {
		background: #e8f0f2;
		border: 1px solid #c5d6e9;
	}

	.iad-finder-item__image--fallback svg,
	.iad-finder-detail__image--fallback svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.iad-finder-item__info {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}

	.iad-finder-item__name {
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 1rem;
		color: var(--dia-color-text-primary, #121212);
	}

	.iad-finder-item__address {
		font-size: .875rem;
		color: var(--dia-color-text-secondary, #767778);
	}

	/* ---- Responsive del listado (vista 20) ----
	   Mobile: sin miniatura (menos ancho disponible, prioriza nombre/dirección) y letras más
	   chicas. Tablet: tamaño intermedio entre mobile y desktop (sin spec de Figma para este rango,
	   criterio propio) — la miniatura SÍ se mantiene, hay espacio de sobra. Desktop (>=64rem,
	   implícito por ausencia de override) usa los valores base de arriba (1rem/.875rem). */
	@media (width < 40rem) {
		.iad-finder-item__image {
			display: none;
		}

		.iad-finder-item__name {
			font-size: 12px;
			line-height: 16px;
		}

		.iad-finder-item__address {
			font-size: 12px;
			line-height: 16px;
		}
	}

	@media (40rem <= width < 64rem) {
		.iad-finder-item__name {
			font-size: 15px;
			line-height: 22px;
		}

		.iad-finder-item__address {
			font-size: 13px;
			line-height: 18px;
		}
	}

	/* ---- Dropdown genérico (País/Tipo/idioma) ----
	   flex:1/min-width:0 solo tienen efecto real dentro de .iad-finder-sidebar__dropdowns (flex
	   row) — el dropdown de idioma en el footer no es un contenedor flex, así que ahí no cambia
	   nada. */
	.iad-finder-dropdown {
		position: relative;
		flex: 1;
		min-width: 0;
	}

	.iad-finder-dropdown__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-xs);
		width: 100%;
		min-width: 0;
		padding: 10px var(--space-s);
		border: 1px solid var(--dia-color-border-subtle, #cacaca);
		border-radius: var(--dia-radius-sm, 4px);
		background: #fafafb;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
		cursor: pointer;
	}

	/* Bug real: con .iad-finder-dropdown en flex:1/min-width:0, la CAJA sí se comprime, pero sin
	   esto el TEXTO no — un país/tipo seleccionado con nombre largo ("Anguilla", "Educational")
	   se desbordaba visualmente fuera del pill, empujando/tapando el botón de Nearby. No es el
	   "trimming" que se dejó pendiente (eso era sobre qué tan agresivo truncar) — esto es
	   contención mínima para que el layout no se vea roto. */
	.iad-finder-dropdown__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	/* Mobile: pill más compacta (menos padding/letter-spacing) — libera el ancho que Country/Type
	   necesitan para caber junto con Nearby en una sola fila a 300px sin desbordar (ver
	   .iad-finder-sidebar__dropdowns, sin flex-wrap). Los valores de texto largo (nombre de país/
	   tipo seleccionado) pueden verse apretados en este ancho — pendiente aparte, no es el
	   problema que resuelve este cambio. */
	@media (width < 40rem) {
		.iad-finder-dropdown__toggle {
			padding: 8px 10px;
			font-size: 11px;
			letter-spacing: 1px;
		}
	}

	.iad-finder-dropdown__chevron {
		display: inline-flex;
		transition: transform .15s ease;
	}

	.iad-finder-dropdown.is-open .iad-finder-dropdown__chevron {
		transform: rotate(180deg);
	}

	.iad-finder-dropdown__menu {
		display: none;
		position: absolute;
		z-index: 10;
		top: calc(100% + 4px);
		left: 0;
		min-width: 100%;
		max-height: 16rem;
		overflow-y: auto;
		margin: 0;
		padding: var(--space-xs) 0;
		list-style: none;
		background: #fff;
		border: 1px solid var(--dia-color-border-subtle, #e5e5e5);
		border-radius: var(--dia-radius-sm, 4px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	}

	.iad-finder-dropdown.is-open .iad-finder-dropdown__menu {
		display: block;
	}

	/* El dropdown de idioma vive en el footer, al fondo del sidebar — abrir hacia abajo (default de
	   arriba) lo saca del viewport/lo deja invisible. Abre hacia ARRIBA en su lugar. */
	.iad-finder-sidebar__footer .iad-finder-dropdown__menu {
		top: auto;
		bottom: calc(100% + 4px);
	}

	.iad-finder-dropdown__menu button,
	.iad-finder-dropdown__menu a {
		display: block;
		width: 100%;
		padding: var(--space-xs) var(--space-s);
		border: none;
		background: none;
		text-align: left;
		font-family: var(--font-sans);
		font-size: .875rem;
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
		cursor: pointer;
		white-space: nowrap;
	}

	.iad-finder-dropdown__menu button:hover,
	.iad-finder-dropdown__menu a:hover {
		background: var(--dia-color-border-subtle, #eff1f3);
	}

	.iad-finder-dropdown__menu [aria-current="true"] {
		font-weight: 700;
	}

	/* ---- Marcadores del mapa (AdvancedMarkerElement) ---- */
	.iad-finder-marker {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: var(--dia-color-brand-secondary, #3e8391);
		border: 1px solid rgba(255, 255, 255, .3);
		box-shadow: 0 4px 20px rgba(62, 131, 145, .4), 0 16px 40px rgba(62, 131, 145, .2);
	}

	.iad-finder-marker--selected {
		width: 48px;
		height: 48px;
		background: var(--dia-color-brand-secondary, #3e8391);
		border-color: #87b2bb;
	}

	/* ---- Clusters (@googlemaps/markerclusterer, ver init() en iad-finder-map.js) ----
	   El centro sólido SIEMPRE es --dia-color-brand-secondary (#3e8391, mismo color del pin) sin
	   importar el tamaño — small/medium/large (small <5, medium 5-19, large 20+, ver
	   clusterSizeTier() en el JS) solo cambian el TAMAÑO del círculo y el tono de los halos.
	   Círculos concéntricos: los 2 halos son un tono alrededor de #3e8391 (más claro en small, más
	   oscuro en large) a baja opacidad, vía box-shadow (0 0 0 Npx = spread sin blur, dibuja un aro
	   sólido); el ancho de cada halo es ~10%/20% del ancho del propio círculo, misma proporción en
	   los 3 tamaños (no valores sueltos que se vean más gruesos en un tamaño que en otro). */
	.iad-finder-cluster {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, .3);
		font-family: var(--font-sans);
		font-weight: 700;
		color: #fdfdfd;
	}

	.iad-finder-cluster--small {
		width: 40px;
		height: 40px;
		font-size: 14px;
		background: #3e8391;
		box-shadow: 0 0 0 4px rgba(120, 168, 178, .35), 0 0 0 8px rgba(120, 168, 178, .18), 0 4px 20px rgba(43, 92, 102, .3);
	}

	.iad-finder-cluster--medium {
		width: 48px;
		height: 48px;
		font-size: 15px;
		background: #3e8391;
		box-shadow: 0 0 0 5px rgba(62, 131, 145, .3), 0 0 0 10px rgba(62, 131, 145, .15), 0 4px 20px rgba(43, 92, 102, .3);
	}

	.iad-finder-cluster--large {
		width: 56px;
		height: 56px;
		font-size: 16px;
		background: #3e8391;
		border-color: #87b2bb;
		box-shadow: 0 0 0 6px rgba(43, 92, 102, .25), 0 0 0 11px rgba(43, 92, 102, .12), 0 4px 20px rgba(43, 92, 102, .3);
	}

	/* ---- Tarjeta de detalle (vista 21) ---- */
	.iad-finder-detail {
		padding: var(--space-m);
		display: flex;
		flex-direction: column;
		gap: var(--space-l);
	}

	.iad-finder-detail__head {
		display: flex;
		gap: var(--space-m);
		align-items: flex-start;
	}

	.iad-finder-detail__image {
		width: 80px;
		height: 80px;
		flex-shrink: 0;
		border-radius: var(--dia-radius-md, 6px);
		overflow: hidden;
		background: var(--dia-color-border-subtle, #eff1f3);
	}

	.iad-finder-detail__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.iad-finder-detail__title {
		flex: 1;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 1.5rem;
		line-height: 2rem;
		letter-spacing: -.5px;
		color: var(--dia-color-bg-dark, #121212);
		margin: 0;
	}

	/* Mobile: la cabecera del detalle pasa de fila (foto+nombre lado a lado) a columna, con el
	   NOMBRE primero (order) y la foto después, a todo el ancho del sidebar (sin el padding lateral
	   de .iad-finder-detail — de ahí el margen negativo). Sin spec de tablet para esto: en tablet
	   se queda como desktop (foto 80x80 al lado del nombre). */
	@media (width < 40rem) {
		.iad-finder-detail__head {
			flex-direction: column;
		}

		.iad-finder-detail__title {
			order: 1;
			font-size: 16px;
			line-height: 22px;
		}

		.iad-finder-detail__image,
		.iad-finder-detail__image--fallback {
			order: 2;
			width: calc(100% + 2 * var(--space-m));
			height: auto;
			aspect-ratio: 16 / 9;
			margin-inline: calc(-1 * var(--space-m));
			border-radius: 0;
			/* border:0 — a este ancho (full-bleed, pegado a los bordes del sidebar) el borde
			   #c5d6e9 de --fallback quedaba corriendo por fuera del padding, sin las esquinas
			   redondeadas que lo hacían ver "contenido" en desktop (bug real reportado). */
			border: 0;
		}
	}

	.iad-finder-detail__info {
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
	}

	.iad-finder-detail__row {
		display: flex;
		align-items: flex-start;
		gap: var(--space-s);
	}
	/* Teléfono/email/web son de una sola línea — centrados contra el ícono en vez de flex-start.
	   Dirección/horario se quedan arriba (pueden ocupar varias líneas, con <br>/<b> por día). */
	.iad-finder-detail__row--center { align-items: center; }

	.iad-finder-detail__row p {
		margin: 0;
		flex: 1;
		min-width: 0; /* default de un flex item es min-width:auto (= ancho mínimo de su contenido) —
			un link largo sin espacios (la URL de "web") no tiene dónde cortar línea, así que ese
			ancho mínimo intrínseco es enorme y empujaba fuera de la card en mobile (bug real
			reportado) en vez de encogerse con el resto de la fila. */
		font-size: 1rem;
		color: var(--dia-color-text-secondary, #767778);
	}

	.iad-finder-detail__row a {
		color: var(--dia-color-brand-secondary, #3e8391);
		text-decoration: underline;
		overflow-wrap: anywhere; /* con min-width:0 el contenedor ya puede encogerse, pero el texto
			seguía desbordando igual sin esto — ahora la URL larga corta a una 2da línea dentro del
			ancho disponible en vez de seguir de largo. */
	}

	/* Solo el link de "web" (campo ACF facebook, ver finder-detail-card.php) se trunca a una sola
	   línea con ellipsis — pedido puntual, autorizado. Clase aparte y no `.iad-finder-detail__row a`
	   general porque el email (mailto) sigue con el wrap de arriba. */
	.iad-finder-detail__link--truncate {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.iad-finder-detail__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		flex-shrink: 0;
		border: 1px solid var(--dia-color-border-subtle, #e5e5e5);
		border-radius: var(--dia-radius-md, 6px);
		color: #537397;
	}

	.iad-finder-detail__directions {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		width: 100%;
		padding: 17px var(--space-m);
		border: 1px solid var(--dia-color-border-strong, #232323);
		border-radius: var(--dia-radius-sm, 4px);
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
	}

	.iad-finder-detail__directions:hover {
		border-radius: 4px;
		background: linear-gradient(180deg, #f3f5f9 0%, #eff1f4 100%);
		box-shadow: 0 16px 9px 0 rgba(0, 0, 0, .01), 0 8px 8px 0 rgba(0, 0, 0, .03), 0 2px 4px 0 rgba(0, 0, 0, .10);
	}

	.iad-finder-sidebar__body {
		flex: 1;
		overflow-y: auto;
	}

}