/**
 * Directorio de Distribuidores — [mycar_distribuidores]
 * Mobile-first. Breakpoints: 768px (tablet) / 1024px (desktop, layout en fila).
 * Paleta LAUNCH (misma que el resto de cnlaunchlatin.com).
 *
 * Rediseño 2026-08-12: la v1 apilaba cada dato (nombre, país, dirección,
 * botón de mapa, cada contacto, cada link) en su propio bloque con su
 * propio margen — una tarjeta con 2 contactos y 3 links terminaba
 * ocupando media pantalla. Esta versión sigue una escala de densidad de
 * dashboard (espaciado 4/6/8/12px, no 16/24/32) y junta teléfonos + mapa +
 * redes en UNA sola fila de chips compactos.
 */

.mycar-directory {
	--mdir-red: #c41230;
	--mdir-red-deep: #a00e28;
	--mdir-ink: #14161c;
	--mdir-muted: #6b7280;
	--mdir-surface: #ffffff;
	--mdir-surface-2: #f7f7fa;
	--mdir-line: #e6e7ee;
	--mdir-radius: 14px;
	--mdir-radius-sm: 9px;
	--mdir-radius-xs: 6px;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--mdir-ink);
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}

.mycar-directory *,
.mycar-directory *::before,
.mycar-directory *::after {
	box-sizing: border-box;
}

.mycar-directory--error {
	padding: 24px;
	border: 1px solid var(--mdir-line);
	border-radius: var(--mdir-radius);
	color: var(--mdir-muted);
	text-align: center;
}

/* ---------- Iconos inline (reemplazan los emoji de la v1) ---------- */

.mdir-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}

.mdir-icon svg {
	display: block;
}

/* ---------- Tabs (mobile/tablet) ---------- */

.mycar-directory__tabs {
	display: flex;
	gap: 8px;
	padding: 4px;
	margin: 0 0 10px;
	background: var(--mdir-surface-2);
	border: 1px solid var(--mdir-line);
	border-radius: 999px;
}

.mycar-directory__tab {
	flex: 1;
	appearance: none;
	border: 0;
	background: transparent;
	padding: 10px 16px;
	font: 700 13px/1 'Arial Black', Arial, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mdir-muted);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.mycar-directory__tab.is-active {
	background: var(--mdir-red);
	color: #fff;
}

.mycar-directory__tab:focus-visible {
	outline: 2px solid var(--mdir-red);
	outline-offset: 2px;
}

/* ---------- Body: panel + mapa ---------- */

.mycar-directory__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mycar-directory__panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--mdir-surface);
	border: 1px solid var(--mdir-line);
	border-radius: var(--mdir-radius);
	padding: 14px;
	min-height: 0;
	overflow-y: auto; /* red de seguridad: si algo no cabe, scrollea el panel entero en vez de romper el layout */
}

.mycar-directory__mapwrap {
	position: relative;
	border-radius: var(--mdir-radius);
	overflow: hidden;
	border: 1px solid var(--mdir-line);
	box-shadow: 0 8px 24px rgba(20, 22, 28, 0.08);
	height: 65vh;
	min-height: 360px;
}

.mycar-directory__map {
	width: 100%;
	height: 100%;
}

.mycar-directory[data-view='list'] .mycar-directory__mapwrap {
	display: none;
}

.mycar-directory[data-view='map'] .mycar-directory__panel {
	display: none;
}

/* ---------- Buscador ---------- */

.mycar-directory__search input {
	width: 100%;
	appearance: none;
	border: 1px solid var(--mdir-line);
	background: var(--mdir-surface-2)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='15' height='15' fill='none' stroke='%239aa0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
		no-repeat 12px center;
	border-radius: var(--mdir-radius-sm);
	padding: 10px 14px 10px 34px;
	font: 400 13.5px/1.3 'Inter', sans-serif;
	color: var(--mdir-ink);
}

.mycar-directory__search input::placeholder {
	color: var(--mdir-muted);
}

.mycar-directory__search input:focus {
	outline: none;
	border-color: var(--mdir-red);
	box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12);
}

/* ---------- Chips de país ---------- */

.mycar-directory__categories-label {
	font: 700 10.5px/1 'Arial Black', Arial, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mdir-muted);
}

.mycar-directory__chips {
	display: flex;
	flex: 0 0 auto; /* nunca se estira a costa de la lista de resultados */
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}

.mycar-directory__chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	appearance: none;
	background: var(--mdir-surface-2);
	border: 1px solid var(--mdir-line);
	color: var(--mdir-ink);
	font: 600 12px/1 'Inter', sans-serif;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mycar-directory__chip:hover {
	border-color: var(--mdir-red);
}

.mycar-directory__chip.is-active {
	background: var(--mdir-red);
	border-color: var(--mdir-red);
	color: #fff;
}

/* ---------- Resultados ---------- */

.mycar-directory__count {
	font: 400 11.5px/1 'Inter', sans-serif;
	color: var(--mdir-muted);
}

.mycar-directory__results {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 46vh;
	overflow-y: auto;
	padding-right: 2px;
	border-top: 1px solid var(--mdir-line);
	padding-top: 8px;
}

.mycar-directory__row {
	background: var(--mdir-surface-2);
	border: 1px solid var(--mdir-line);
	border-radius: var(--mdir-radius-sm);
	padding: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.mycar-directory__row:hover,
.mycar-directory__row.is-active {
	border-color: var(--mdir-red);
	background: #fff;
}

/* Header de la tarjeta: avatar + nombre/dirección + bandera, todo en una
   franja — reemplaza 3 líneas separadas (título, país, dirección) de la v1. */
.mycar-directory__row-top {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.mdir-avatar {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var(--mdir-red);
	color: #fff;
	font: 700 11px/26px 'Inter', sans-serif;
	text-align: center;
}

.mycar-directory__row-heading {
	flex: 1;
	min-width: 0;
}

.mycar-directory__row-title {
	font: 700 13px/1.3 'Inter', sans-serif;
	color: var(--mdir-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mycar-directory__row-address {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	font: 400 11.5px/1.3 'Inter', sans-serif;
	color: var(--mdir-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mycar-directory__row-address .mdir-icon {
	opacity: 0.55;
}

.mycar-directory__row-flag {
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
	margin-top: 1px;
}

/* Fila de acciones: mapa + teléfonos + redes, todo junto (antes eran 3
   bloques separados con su propio margin-top cada uno). */
.mycar-directory__row-actions,
.mycar-directory__popup-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.mdir-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid var(--mdir-line);
	background: #fff;
	font: 600 11px/1 'Inter', sans-serif;
	color: var(--mdir-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.mdir-chip:hover {
	border-color: var(--mdir-red);
	color: var(--mdir-red);
}

.mdir-chip--whatsapp {
	color: #1a8a63;
	border-color: rgba(26, 138, 99, 0.25);
}

.mdir-chip--whatsapp:hover {
	border-color: #1a8a63;
	color: #1a8a63;
}

/* El botón de mapa es la única acción "destacada" — todo lo demás queda
   neutro a propósito (ver Skill de UI: gastar el acento de marca en un
   solo lugar, no repartirlo en cada elemento). */
.mdir-chip--maps {
	color: var(--mdir-red);
	border-color: rgba(196, 18, 48, 0.3);
	background: rgba(196, 18, 48, 0.05);
	font-weight: 700;
}

.mdir-chip--maps:hover {
	background: rgba(196, 18, 48, 0.1);
	border-color: var(--mdir-red);
}

.mdir-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: var(--mdir-radius-xs);
	border: 1px solid var(--mdir-line);
	background: #fff;
	font: 700 9px/1 'Inter', sans-serif;
	letter-spacing: 0.01em;
	color: var(--mdir-muted);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.mdir-badge:hover {
	border-color: var(--mdir-red);
	color: var(--mdir-red);
}

.mdir-badge--whatsapp:hover {
	border-color: #1a8a63;
	color: #1a8a63;
}

.mycar-directory__popup-specialties {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--mdir-line);
	font: 400 11px/1.4 'Inter', sans-serif;
	color: var(--mdir-muted);
}

.mycar-directory__empty {
	color: var(--mdir-muted);
	font-size: 13px;
	text-align: center;
	padding: 24px 0;
}

/* Scrollbars finos y discretos dentro del panel (los nativos de Windows
   se ven pesados y le agregan ruido visual a una columna angosta) */
.mycar-directory__panel,
.mycar-directory__chips,
.mycar-directory__results {
	scrollbar-width: thin;
	scrollbar-color: #d3d5e0 transparent;
}

.mycar-directory__panel::-webkit-scrollbar,
.mycar-directory__chips::-webkit-scrollbar,
.mycar-directory__results::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.mycar-directory__panel::-webkit-scrollbar-track,
.mycar-directory__chips::-webkit-scrollbar-track,
.mycar-directory__results::-webkit-scrollbar-track {
	background: transparent;
}

.mycar-directory__panel::-webkit-scrollbar-thumb,
.mycar-directory__chips::-webkit-scrollbar-thumb,
.mycar-directory__results::-webkit-scrollbar-thumb {
	background: #d3d5e0;
	border-radius: 999px;
}

.mycar-directory__panel::-webkit-scrollbar-thumb:hover,
.mycar-directory__chips::-webkit-scrollbar-thumb:hover,
.mycar-directory__results::-webkit-scrollbar-thumb:hover {
	background: #b9bcca;
}

/* ---------- Popup del mapa (OpenLayers overlay) ---------- */

.mycar-directory__popup {
	position: relative;
	background: var(--mdir-surface);
	border-radius: var(--mdir-radius-sm);
	box-shadow: 0 8px 24px rgba(20, 22, 28, 0.18);
	padding: 12px 14px;
	min-width: 220px;
	max-width: 280px;
	font-family: 'Inter', sans-serif;
}

/* Flecha del popup: se ubica según data-placement (lo setea el JS en función
   del espacio disponible), siempre apuntando al pin. */
.mycar-directory__popup::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	background: var(--mdir-surface);
	transform: rotate(45deg);
}

/* Popup ARRIBA del pin -> flecha abajo */
.mycar-directory__popup[data-placement^='bottom']::after {
	bottom: -7px;
	box-shadow: 3px 3px 4px rgba(20, 22, 28, 0.06);
}

/* Popup ABAJO del pin -> flecha arriba */
.mycar-directory__popup[data-placement^='top']::after {
	top: -7px;
	box-shadow: -3px -3px 4px rgba(20, 22, 28, 0.06);
}

/* Alineación horizontal de la flecha, para que caiga sobre el pin */
.mycar-directory__popup[data-placement$='center']::after {
	left: 50%;
	margin-left: -7px;
}

.mycar-directory__popup[data-placement$='left']::after {
	left: 15px;
}

.mycar-directory__popup[data-placement$='right']::after {
	right: 15px;
}

.mycar-directory__popup-close {
	position: absolute;
	top: 6px;
	right: 8px;
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 1;
	color: var(--mdir-muted);
	cursor: pointer;
	padding: 4px;
}

.mycar-directory__popup-title {
	font: 700 13.5px/1.3 'Inter', sans-serif;
	color: var(--mdir-ink);
	margin: 0 20px 4px 0;
}

.mycar-directory__popup-address {
	display: flex;
	align-items: center;
	gap: 4px;
	font: 400 11.5px/1.4 'Inter', sans-serif;
	color: var(--mdir-muted);
}

.mycar-directory__popup-address .mdir-icon {
	opacity: 0.55;
}

.mycar-directory__popup-approx {
	margin-top: 6px;
	padding: 6px 8px;
	background: #f4f5f8;
	border-left: 3px solid #9aa0b0;
	border-radius: 4px;
	font: 400 11px/1.4 'Inter', sans-serif;
	color: var(--mdir-muted);
}

/* =====================================================================
   Tablet (≥768px)
   ===================================================================== */
@media (min-width: 768px) {
	.mycar-directory__panel {
		padding: 18px;
	}

	.mycar-directory__chips {
		flex-wrap: wrap;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 84px; /* ~2 filas de chips visibles; el resto queda a un scroll, no se come el espacio de la lista */
	}

	.mycar-directory__mapwrap {
		height: 60vh;
	}
}

/* =====================================================================
   Desktop (≥1024px): layout en fila, panel + mapa siempre visibles
   ===================================================================== */
@media (min-width: 1024px) {
	.mycar-directory__tabs {
		display: none;
	}

	.mycar-directory__body {
		flex-direction: row;
		align-items: stretch;
		height: min(72vh, 720px);
	}

	.mycar-directory__panel,
	.mycar-directory__mapwrap {
		display: flex !important;
	}

	/* Proporción 35% panel / 65% mapa (el contenedor ya está topeado en
	   1400px, así que en pantallas muy anchas no se desborda). */
	.mycar-directory__panel {
		flex: 0 0 35%;
		width: 35%;
		height: 100%;
		padding: 12px;
		gap: 8px;
	}

	.mycar-directory__mapwrap {
		flex: 1 1 65%;
		height: 100%;
	}

	.mycar-directory__results {
		max-height: none;
		flex: 1;
		min-height: 0;
		gap: 5px;
		padding-top: 6px;
	}

	/* ---- Escala compacta en desktop ----
	   En mobile los tamaños quedan más grandes a propósito (targets táctiles);
	   acá se prioriza densidad para no comerle espacio al mapa. */
	.mycar-directory__search input {
		padding: 8px 12px 8px 30px;
		background-position: 10px center;
		font-size: 12.5px;
	}

	.mycar-directory__categories-label {
		font-size: 10px;
	}

	.mycar-directory__chips {
		gap: 5px;
		max-height: 72px;
	}

	.mycar-directory__chip {
		font-size: 11px;
		padding: 5px 10px;
		gap: 4px;
	}

	.mycar-directory__count {
		font-size: 10.5px;
	}

	.mycar-directory__row {
		padding: 8px;
	}

	.mdir-avatar {
		width: 22px;
		height: 22px;
		font-size: 10px;
		line-height: 22px;
		border-radius: 6px;
	}

	.mycar-directory__row-title {
		font-size: 12px;
	}

	.mycar-directory__row-address {
		font-size: 11px;
	}

	.mycar-directory__row-actions,
	.mycar-directory__popup-actions {
		gap: 5px;
		margin-top: 6px;
	}

	.mdir-chip {
		height: 23px;
		padding: 0 8px;
		font-size: 10px;
	}

	.mdir-badge {
		width: 23px;
		height: 23px;
		font-size: 8.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mycar-directory__tab,
	.mycar-directory__chip,
	.mycar-directory__row,
	.mdir-chip,
	.mdir-badge {
		transition: none;
	}
}