/* ─────────────────────────────────────────────────────────
   La Grata — Mapa de zonas de envío
   Todos los selectores van prefijados con .lgme- para evitar
   colisiones con Avada y otros temas.
   Mobile-first: layout apilado por defecto, side-by-side ≥860px.
   ───────────────────────────────────────────────────────── */

.lgme-root {
	--lgme-cacao:       #70442D;
	--lgme-cacao-deep:  #4F2F1F;
	--lgme-crema:       #FAF6EC;
	--lgme-crema-deep:  #F3EAD1;
	--lgme-blanco:      #FFFFFF;
	--lgme-linea:       #E6DCC8;
	--lgme-carbon:      #2B1F18;
	--lgme-carbon-md:   #5C4C42;
	--lgme-gris:        #8A7E75;
	--lgme-dorado:      #D4A536;
	--lgme-display:     'Fraunces', Georgia, 'Times New Roman', serif;
	--lgme-body:        'Inter', system-ui, -apple-system, Arial, sans-serif;

	font-family: var(--lgme-body);
	color: var(--lgme-carbon);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}
.lgme-root *, .lgme-root *::before, .lgme-root *::after { box-sizing: border-box; }
.lgme-root img { max-width: 100%; height: auto; display: block; }

/* ── Shell ───────────────────────────────────────────── */
.lgme-shell {
	background: var(--lgme-blanco);
	border: 1px solid var(--lgme-linea);
	border-radius: 20px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	box-shadow: 0 20px 40px -32px rgba(80,50,30,0.20);
}

/* ── Mapa canvas ─────────────────────────────────────── */
.lgme-canvas {
	position: relative;
	background:
		radial-gradient(rgba(112,68,45,0.08) 1px, transparent 1px) 0 0 / 22px 22px,
		var(--lgme-crema);
	min-height: 420px;
	height: clamp(420px, 65vh, 720px);
}
.lgme-map { position: absolute; inset: 0; background: transparent; }
.lgme-canvas .leaflet-container { background: transparent !important; font-family: var(--lgme-body); }
.lgme-canvas .leaflet-control-zoom { border: none !important; box-shadow: 0 8px 24px -16px rgba(80,50,30,0.30) !important; }
.lgme-canvas .leaflet-control-zoom a {
	background: var(--lgme-blanco) !important;
	color: var(--lgme-cacao) !important;
	border: 1px solid var(--lgme-linea) !important;
	width: 32px !important; height: 32px !important; line-height: 30px !important;
	font-family: var(--lgme-display) !important;
}
.lgme-canvas .leaflet-control-zoom a:hover { background: var(--lgme-crema) !important; }
.lgme-canvas .leaflet-control-attribution {
	background: rgba(255,255,255,0.7) !important;
	font-size: 10px !important;
	color: var(--lgme-gris) !important;
	padding: 2px 8px !important;
}
.lgme-canvas .leaflet-control-attribution a { color: var(--lgme-cacao) !important; }

/* ── Estado (cargando / error) ───────────────────────── */
.lgme-state {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
	z-index: 600;
}
.lgme-pill {
	background: var(--lgme-blanco);
	border: 1px solid var(--lgme-linea);
	border-radius: 50px;
	padding: 10px 18px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--lgme-cacao);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 14px 28px -18px rgba(80,50,30,0.30);
}
.lgme-spinner {
	width: 13px; height: 13px;
	border: 2px solid var(--lgme-linea);
	border-top-color: var(--lgme-cacao);
	border-radius: 50%;
	animation: lgme-spin 0.9s linear infinite;
}
@keyframes lgme-spin { to { transform: rotate(360deg); } }
.lgme-state.is-error .lgme-pill { background: oklch(0.97 0.02 60); border-color: oklch(0.78 0.14 60); }
.lgme-state.is-error .lgme-spinner { border: none; width: 8px; height: 8px; border-radius: 50%; background: oklch(0.65 0.20 30); animation: none; }

/* ── Buscador flotante ──────────────────────────────── */
.lgme-search {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 500;
	background: var(--lgme-blanco);
	border: 1px solid var(--lgme-linea);
	border-radius: 50px;
	padding: 4px 4px 4px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 18px 36px -22px rgba(80,50,30,0.30);
	width: calc(100% - 28px);
	max-width: 320px;
}
.lgme-search svg { width: 14px; height: 14px; color: var(--lgme-cacao); flex-shrink: 0; }
.lgme-search input {
	border: none; outline: none; background: transparent;
	flex: 1;
	font-family: var(--lgme-body);
	font-size: 13px;
	padding: 9px 4px;
	color: var(--lgme-carbon);
	min-width: 0;
}
.lgme-search input::placeholder { color: var(--lgme-gris); }
.lgme-count {
	font-size: 11px;
	color: var(--lgme-cacao);
	background: var(--lgme-crema);
	border-radius: 50px;
	padding: 6px 12px;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

/* ── Leyenda flotante (solo móvil) ────────────────── */
.lgme-legend {
	position: absolute;
	left: 12px; bottom: 12px;
	z-index: 500;
	background: var(--lgme-blanco);
	border: 1px solid var(--lgme-linea);
	border-radius: 14px;
	padding: 12px 14px;
	display: grid;
	gap: 8px;
	box-shadow: 0 18px 36px -22px rgba(80,50,30,0.30);
	min-width: 160px;
}
.lgme-lg-row {
	display: grid;
	grid-template-columns: 12px 1fr auto;
	gap: 10px;
	align-items: center;
	font-size: 12px;
	color: var(--lgme-carbon);
}
.lgme-lg-row .lgme-sw { width: 12px; height: 12px; border-radius: 3px; }
.lgme-lg-row .lgme-pr { font-family: var(--lgme-display); font-weight: 500; color: var(--lgme-cacao); }

/* ── Panel lateral ───────────────────────────────────── */
.lgme-side {
	padding: 28px 24px;
	background: var(--lgme-blanco);
	border-top: 1px solid var(--lgme-linea);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.lgme-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lgme-cacao);
}
.lgme-side h3 {
	font-family: var(--lgme-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--lgme-carbon);
	margin: 0;
}
.lgme-side h3 em { font-style: italic; font-weight: 300; color: var(--lgme-cacao); }
.lgme-sub { font-size: 13px; line-height: 1.6; color: var(--lgme-carbon-md); margin: 0; }

.lgme-selected {
	background: var(--lgme-crema);
	border: 1px solid var(--lgme-linea);
	border-radius: 16px;
	padding: 20px 20px 16px;
	position: relative;
	overflow: hidden;
}
.lgme-selected::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 4px; height: 100%;
	background: var(--lgme-linea);
	transition: background 0.2s;
}
.lgme-selected.is-z1::before { background: oklch(0.62 0.20 142); }
.lgme-selected.is-z2::before { background: oklch(0.72 0.17 92); }
.lgme-selected.is-z3::before { background: oklch(0.65 0.16 50); }

.lgme-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lgme-gris);
	margin-bottom: 6px;
}
.lgme-tag .lgme-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lgme-linea); }
.lgme-selected.is-z1 .lgme-tag .lgme-dot { background: oklch(0.62 0.20 142); }
.lgme-selected.is-z2 .lgme-tag .lgme-dot { background: oklch(0.72 0.17 92); }
.lgme-selected.is-z3 .lgme-tag .lgme-dot { background: oklch(0.65 0.16 50); }

.lgme-sel-name {
	font-family: var(--lgme-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--lgme-carbon);
	line-height: 1.05;
}
.lgme-selected.lgme-empty .lgme-sel-name { color: var(--lgme-gris); font-style: italic; font-size: 17px; }

.lgme-sel-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 14px;
}
.lgme-sel-info { min-width: 0; flex: 1; }
.lgme-sel-price {
	font-family: var(--lgme-display);
	font-size: 40px;
	font-weight: 400;
	color: var(--lgme-cacao-deep);
	letter-spacing: -0.02em;
	line-height: 0.95;
	flex-shrink: 0;
	white-space: nowrap;
}
.lgme-selected.lgme-empty .lgme-sel-price { color: var(--lgme-gris); font-size: 28px; }

.lgme-sel-meta {
	list-style: none;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--lgme-linea);
	display: grid;
	gap: 8px;
}
.lgme-sel-meta li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--lgme-carbon-md);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.lgme-sel-meta li::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--lgme-cacao);
	flex-shrink: 0;
}

.lgme-notes { display: grid; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--lgme-carbon-md); }
.lgme-note { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.lgme-note .lgme-ic {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--lgme-crema);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lgme-note .lgme-ic svg { width: 12px; height: 12px; color: var(--lgme-cacao); }
.lgme-note b {
	font-family: var(--lgme-display);
	font-weight: 500;
	color: var(--lgme-carbon);
	display: block;
	font-size: 14px;
	margin-bottom: 2px;
}

/* ── Tarjeta de tarifas por zona (panel) ─────────── */
.lgme-zones {
	background: var(--lgme-blanco);
	border: 1px solid var(--lgme-linea);
	border-radius: 16px;
	padding: 20px 22px;
	display: grid;
	gap: 14px;
}
.lgme-zone-row {
	display: grid;
	grid-template-columns: 14px 1fr auto;
	gap: 16px;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--lgme-linea);
}
.lgme-zone-row:last-child { border-bottom: none; padding-bottom: 0; }
.lgme-swatch {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--lgme-c, var(--lgme-cacao));
	box-shadow: 0 0 0 4px color-mix(in oklch, var(--lgme-c, var(--lgme-cacao)) 22%, transparent);
}
.lgme-zone-name {
	font-family: var(--lgme-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lgme-carbon);
	line-height: 1.2;
}
.lgme-zone-name small {
	display: block;
	font-family: var(--lgme-body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--lgme-gris);
	margin-top: 4px;
	line-height: 1.35;
}
.lgme-zone-price {
	font-family: var(--lgme-display);
	font-size: 26px;
	font-weight: 500;
	color: var(--lgme-cacao);
	letter-spacing: -0.01em;
}

/* ── Tooltip leaflet ─────────────────────────────────── */
.leaflet-tooltip.lgme-tip {
	background: var(--lgme-cacao-deep);
	color: var(--lgme-crema);
	border: none;
	border-radius: 50px;
	padding: 7px 14px;
	font-family: var(--lgme-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	box-shadow: 0 12px 24px -14px rgba(40,20,10,0.5);
	white-space: nowrap;
}
.leaflet-tooltip.lgme-tip::before { display: none; }
.leaflet-tooltip.lgme-tip .lgme-tip-price {
	display: inline-block;
	margin-left: 8px;
	padding-left: 8px;
	border-left: 1px solid rgba(243,234,209,0.25);
	color: var(--lgme-dorado);
	font-family: var(--lgme-display);
	font-style: italic;
	font-weight: 500;
}

/* ── Layout side-by-side (≥860px) ────────────────────── */
@media (min-width: 860px) {
	.lgme-root.lgme-layout-side .lgme-shell {
		grid-template-columns: 1fr 320px;
	}
	.lgme-root.lgme-layout-side .lgme-canvas {
		height: var(--lgme-h, 600px);
		min-height: 480px;
		border-right: 1px solid var(--lgme-linea);
	}
	.lgme-root.lgme-layout-side .lgme-side {
		border-top: none;
		padding: 32px 28px;
		background: linear-gradient(180deg, var(--lgme-crema) 0%, var(--lgme-blanco) 100%);
	}
	.lgme-search { top: 18px; left: 18px; }
	/* La leyenda flotante es redundante en desktop — ya está la tabla del panel */
	.lgme-legend { display: none; }
}

/* ── Móvil: ocultar la tabla de zonas del panel (queda la del mapa) ── */
@media (max-width: 859px) {
	.lgme-zones { display: none !important; }
}

/* ── Refuerzos para temas que inyectan estilos (Avada) ── */
.lgme-root h3, .lgme-root h6, .lgme-root p, .lgme-root small, .lgme-root b, .lgme-root input {
	margin: 0;
}
.lgme-root .lgme-shell, .lgme-root .lgme-shell * { box-sizing: border-box; }
.lgme-root input[type="text"] {
	height: auto;
	line-height: normal;
	background: transparent;
	box-shadow: none;
}