/* Toolbar superior: acciones (zoom/descarga) + leyenda */
.li-mapa-loteo__toolbar {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 16px;
}
.li-mapa-loteo__acciones {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.li-zoom-btn {
	width: 38px;
	height: 38px;
	border-radius: 6px;
	border: 1px solid #ddd;
	background: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.li-zoom-btn:hover { background: #f5f5f5; }

.li-descargar-plano {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 14px;
	border-radius: 6px;
	border: 1px solid #ddd;
	background: #fff;
	color: #111;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.li-descargar-plano:hover { background: #f5f5f5; color: #111; }

.li-mapa-loteo__leyenda {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 38px;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 0 16px;
	font-size: 13px;
	white-space: nowrap;
}
.li-mapa-loteo__leyenda-titulo {
	font-weight: 700;
}
.li-leyenda-item { display: flex; align-items: center; gap: 8px; }
.li-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.li-dot--disponible { background: #2D3582; }
.li-dot--reservado  { background: #E0A800; }
.li-dot--vendido    { background: #DC0044; }

/* Layout de dos columnas: mapa + panel */
.li-mapa-loteo__grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 24px;
	align-items: start;
}
.li-mapa-loteo__mapa-col {
	min-width: 0; /* evita que el grid empuje el ancho */
}
.li-mapa-loteo__svg-wrap {
	position: relative;
	overflow: auto;
}
.li-mapa-loteo__svg {
	transition: transform .15s ease;
}
.li-mapa-loteo__svg svg {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Colores por estado en el mapa */
.li-mapa-loteo [data-lot].li-lote--disponible { fill: #2D3582; transition: filter .2s ease; }
.li-mapa-loteo [data-lot].li-lote--reservado  { fill: #E0A800; }
.li-mapa-loteo [data-lot].li-lote--vendido    { fill: #DC0044; }
.li-mapa-loteo [data-lot].li-lote--sin-datos  { fill: #CCCCCC; }
.li-mapa-loteo svg path[fill="#AFB7BD"] { fill: #FAFAFA; }

/* Panel lateral */
.li-mapa-loteo__panel {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 24px;
	position: sticky;
	top: 16px;
}
.li-panel__resumen h3 {
	margin-top: 0;
	text-align: center;
}
.li-panel__ayuda {
	color: #777;
	font-size: 14px;
	text-align: center;
	margin-bottom: 24px;
}
.li-panel__stat {
	border-top: 1px solid #eee;
	padding: 12px 0;
}
.li-panel__stat-titulo {
	font-weight: 700;
	margin-bottom: 4px;
}
.li-panel__stat-valor {
	color: #555;
	font-size: 14px;
}

.li-panel__volver {
	background: none;
	border: none;
	color: #555;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	margin-bottom: 16px;
}
.li-panel__volver:hover { text-decoration: underline; }

.li-panel__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.li-panel__header h3 { margin: 0; }

.li-badge {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.li-badge--disponible { background: #DFF5E1; color: #1E7B34; }
.li-badge--reservado  { background: #FFF3CD; color: #8A6500; }
.li-badge--vendido    { background: #FBD7DE; color: #B3002D; }

.li-panel__fila {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.li-panel__icono {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #F0F0F0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.li-panel__label {
	display: block;
	font-size: 12px;
	color: #777;
}
.li-panel__detalle hr {
	border: none;
	border-top: 1px solid #eee;
	margin: 16px 0;
}
.li-panel__detalle h4 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 10px;
}
.li-panel__pago-mensual {
	font-size: 24px;
	font-weight: 700;
	margin: 4px 0 0;
}
.li-panel__pago-mensual-sufijo {
	font-size: 14px;
	font-weight: 400;
	color: #777;
}
.li-panel__cta {
	display: block;
	text-align: center;
	background: #111;
	color: #fff;
	text-decoration: none;
	padding: 14px;
	border-radius: 6px;
	margin-top: 20px;
	font-weight: 600;
}
.li-panel__cta:hover { background: #333; color: #fff; }
.li-panel__nota {
	text-align: center;
	color: #777;
	font-size: 14px;
	margin-top: 16px;
}

/* Mobile: el panel pasa a estar debajo del mapa, en una sola columna */
@media (max-width: 900px) {
	.li-mapa-loteo__grid {
		grid-template-columns: 1fr;
	}
	.li-mapa-loteo__panel {
		position: static;
	}
}

@media (max-width: 600px) {
	.li-panel__detalle h4 { font-size: 12.5px; }
	.li-panel__header h3 { font-size: 18px; }
	.li-panel__pago-mensual { font-size: 20px; }
	.li-mapa-loteo__toolbar { flex-direction: column; align-items: flex-start; }
	.li-mapa-loteo__leyenda {
		height: auto;
		flex-wrap: wrap;
		padding: 8px 14px;
		width: 100%;
		box-sizing: border-box;
	}
}