/* Shared styles for cartography editor: modal, floating buttons, markers */
.floating-controls { position: fixed; right: 14px; bottom: 20px; display: flex; gap: 8px; z-index: 2000; }
.float-btn { background:#fff; border:1px solid rgba(0,0,0,0.08); padding:8px 10px; border-radius:6px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.08); }
.modal.hidden { display:none; }
.modal { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:3000; }
.modal-content { background:#fff; padding:18px; border-radius:8px; width:420px; max-width:95%; box-shadow:0 12px 30px rgba(0,0,0,0.12); }
.modal-field { width:100%; padding:8px; border:1px solid #ddd; border-radius:6px; margin-top:6px; }
.symbols-container label { margin-right:8px; display:inline-flex; align-items:center; gap:6px; }

/* Force readable text colors inside the editor (override page-level color inheritance) */
.modal-content label,
.modal-content .symbols-container label,
.modal-content .descriptors-container label,
.symbols-container label,
.descriptors-container label,
.modal-content input,
.modal-content textarea,
.modal-content .modal-field,
.cartography-desc-input,
#cartographyDescription,
.points-panel .points-list,
.point-btn { color: #072A40 !important; }

.modal-content input::placeholder,
.modal-content textarea::placeholder,
.cartography-desc-input::placeholder { color: #6b6b6b !important; }

/* Ensure text remains dark when typing/focused */
.modal-content input:focus,
.modal-content textarea:focus,
.cartography-desc-input:focus,
#cartographyDescription:focus { color: #072A40 !important; background: #fff !important; }
.point-marker { position:absolute; width:28px; height:28px; transform:translate(-50%,-50%); background:rgba(255,255,255,0.95); border-radius:50%; border:2px solid #333; display:flex; align-items:center; justify-content:center; z-index:1200; }
.point-marker-label { position:absolute; top:34px; left:50%; transform:translateX(-50%); font-size:12px; background:rgba(255,255,255,0.95); padding:4px 6px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.marker-symbols { display:flex; gap:4px; position:absolute; bottom:-6px; right:-6px; }
.descriptor-symbol { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; }
.descriptor-item { margin-bottom:6px; }
.points-panel .points-list { max-height:260px; overflow:auto; }

/* Marker symbol shapes for markers inside the map */
.marker-symbols .sym-circle { width:10px; height:10px; border-radius:50%; background:#333; display:inline-block; }
.marker-symbols span.sym-circle { border-radius:50% !important; display:inline-block !important; }
.marker-symbols .sym-square { width:10px; height:10px; background:#333; display:inline-block; }
.marker-symbols .sym-pin { width:8px; height:12px; background:#333; border-radius:4px; display:inline-block; }
.marker-symbols .sym-star { width:10px; height:10px; background:#f5d76e; display:inline-block; border-radius:2px; }
.marker-symbols .sym-triangle { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:12px solid #333; display:inline-block; }

/* Descriptor symbols color by tejido */
.descriptor-symbol.tejido-social { background:#2E4DA9; color:#2E4DA9; }
.descriptor-symbol.tejido-economico { background:#E4D22A; color:#E4D22A; }
.descriptor-symbol.tejido-ambiental { background:#2EA942; color:#2EA942; }
.descriptor-symbol.tejido-cultural { background:#A9362E; color:#A9362E; }
.descriptor-symbol.tejido-estructural { background:#6A2EA9; color:#6A2EA9; }

/* For triangle descriptor symbol (used in point info), rely on classes */
.descriptor-symbol.sym-triangle { width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:12px solid currentColor; background:transparent; border-radius:0; display:inline-block; }
.descriptor-symbol.sym-star { width:14px; height:14px; background:transparent; display:inline-block; }

/* Ensure marker labels and point buttons have readable text color */
.point-marker-label { color: #111 !important; }
.point-btn { color: #111; background: #fff; border: 1px solid rgba(0,0,0,0.06); padding:6px 10px; border-radius:6px; }

/* Descriptor info small styling */
.point-descriptors { margin-top:8px; }


/* Hide labels by default and show on hover/focus for better UX */
.point-marker-label {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
}
.point-marker:hover .point-marker-label,
.point-marker:focus .point-marker-label,
.point-marker:focus-within .point-marker-label {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* Make marker focus outline visible for keyboard users */
.point-marker:focus {
	outline: 2px solid rgba(230,158,54,0.25);
	outline-offset: 4px;
}

/* Cartography name styled as the same pill as the "Ver Original" toggle button */
.cartography-name {
	position: absolute;
	z-index: 2500;
	display: inline-block;
	padding: 8px 24px;
	border-radius: 24px;
	background: linear-gradient(135deg, #F8AF40 0%, #e69e36 100%);
	color: #ffffff;
	font-weight: 700;
	font-size: clamp(12px, 1.05vw, 24px);
	line-height: 1;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	border: none;
	text-transform: none;
}

.cartography-name.visible {
	opacity: 1;
	transform: translateY(-22px);
	transition: transform 0.6s ease, opacity 0.6s ease;
}