/* Gran Canaria - Tiendas por Municipio | Frontend */

.gct-app {
	--gct-bg-1: #7a1626;
	--gct-bg-2: #c2401d;
	--gct-accent: #f2a93b;
	--gct-text: #fff5ee;
	--gct-muted: #f6d2b8;
	--gct-region: rgba(255, 245, 238, 0.16);
	--gct-region-hover: rgba(255, 245, 238, 0.92);
	--gct-stroke: rgba(255, 245, 238, 0.55);
	--gct-radius: 16px;

	box-sizing: border-box;
	width: auto;
	margin: clamp(16px, 4vw, 40px);
	color: var(--gct-text);
	font-family: inherit;
	background: radial-gradient(120% 120% at 12% 0%, var(--gct-bg-2) 0%, var(--gct-bg-1) 62%);
	border-radius: var(--gct-radius);
	overflow: hidden;
}

.gct-app *,
.gct-app *::before,
.gct-app *::after {
	box-sizing: border-box;
}

.gct-layout {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(16px, 4vw, 40px);
}

/* ---------- Map ---------- */
.gct-map-wrap {
	min-width: 0;
}

.gct-title {
	margin: 0;
	font-size: clamp(1.5rem, 3.5vw, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--gct-text);
	text-wrap: balance;
}

.gct-subtitle {
	margin: 8px 0 0;
	max-width: 46ch;
	color: var(--gct-muted);
	line-height: 1.5;
}

.gct-map {
	margin-top: 18px;
}

.gct-map svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* Todos los municipios interactivos */
.gct-map svg path.gct-region {
	fill: var(--gct-region);
	stroke: var(--gct-stroke);
	stroke-width: 0.9;
	cursor: pointer;
	transition: fill 0.18s ease, transform 0.18s ease;
}

.gct-map svg path.gct-region:hover,
.gct-map svg path.gct-region:focus-visible {
	fill: var(--gct-region-hover);
	outline: none;
}

.gct-map svg path.gct-region.is-selected {
	fill: var(--gct-accent);
}

/* Municipios con al menos una tienda: un punto de color más vivo */
.gct-map svg path.gct-region.has-stores {
	fill: rgba(242, 169, 59, 0.42);
}
.gct-map svg path.gct-region.has-stores:hover {
	fill: var(--gct-region-hover);
}
.gct-map svg path.gct-region.has-stores.is-selected {
	fill: var(--gct-accent);
}

/* Contorno / isla base no interactivo */
.gct-map svg path.gct-outline {
	fill: none;
	stroke: var(--gct-stroke);
	stroke-width: 1.2;
	pointer-events: none;
}

/* ---------- Selector móvil ---------- */
.gct-select-mobile {
	display: none;
	margin-top: 16px;
}

.gct-mobile-select {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--gct-stroke);
	background: rgba(0, 0, 0, 0.18);
	color: var(--gct-text);
	font-size: 1rem;
}
.gct-mobile-select option {
	color: #1a1a1a;
}

/* ---------- Panel ---------- */
.gct-panel {
	min-width: 0;
}

.gct-panel-inner {
	background: rgba(20, 6, 8, 0.34);
	border: 1px solid rgba(255, 245, 238, 0.16);
	border-radius: 14px;
	padding: clamp(16px, 2.5vw, 24px);
	backdrop-filter: blur(4px);
}

.gct-panel-empty h3,
.gct-panel-header h3 {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--gct-text);
}

.gct-panel-empty p {
	margin: 8px 0 0;
	color: var(--gct-muted);
	line-height: 1.5;
}

.gct-panel-eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gct-accent);
	font-weight: 700;
}

.gct-panel-header {
	border-bottom: 1px solid rgba(255, 245, 238, 0.16);
	padding-bottom: 14px;
	margin-bottom: 14px;
}
.gct-panel-header h3 {
	margin: 4px 0 2px;
}
.gct-panel-count {
	font-size: 0.85rem;
	color: var(--gct-muted);
}

.gct-store-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 420px;
	overflow-y: auto;
}

.gct-store {
	background: rgba(255, 245, 238, 0.06);
	border: 1px solid rgba(255, 245, 238, 0.12);
	border-radius: 12px;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.gct-store:hover {
	background: rgba(255, 245, 238, 0.12);
	border-color: var(--gct-accent);
	transform: translateY(-1px);
}

.gct-store-link {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
}

.gct-store-link:focus-visible {
	outline: 2px solid var(--gct-accent);
	outline-offset: 2px;
	border-radius: 12px;
}

.gct-store-arrow {
	margin-left: auto;
	align-self: center;
	font-size: 1.2rem;
	color: var(--gct-accent);
	flex: 0 0 auto;
}

.gct-store-logo {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.9);
}

.gct-store-body {
	min-width: 0;
}

.gct-store-name {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--gct-text);
}

.gct-store-meta {
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: var(--gct-muted);
	line-height: 1.45;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gct-store-meta a {
	color: var(--gct-accent);
	text-decoration: none;
	font-weight: 600;
}
.gct-store-meta a:hover {
	text-decoration: underline;
}

.gct-empty-zone {
	margin: 0;
	color: var(--gct-muted);
	line-height: 1.5;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Escritorio: mapa + panel lado a lado ---------- */
@media (min-width: 900px) {
	.gct-layout {
		flex-direction: row;
		align-items: stretch;
		gap: 32px;
	}
	.gct-map-wrap {
		flex: 1 1 58%;
	}
	.gct-panel {
		flex: 1 1 42%;
		max-width: 460px;
	}
	.gct-panel-inner {
		position: sticky;
		top: 24px;
	}
}

/* ---------- Móvil: mostrar el selector, el mapa sigue siendo táctil ---------- */
@media (max-width: 640px) {
	.gct-select-mobile {
		display: block;
	}
}