/*
  leaflet-overrides.css — Overrides del CSS de Leaflet y sus plugins (sidebar,
  control de zoom, atribución). Estas reglas NO se pueden migrar a Tailwind
  porque Leaflet y sus plugins cargan su CSS sin @layer, lo que les da mayor
  especificidad que las utilities de Tailwind (@layer utilities). Para pisar esos
  estilos necesitamos estar en el mismo nivel "plano" de cascada.

  También incluye el layout del mapa (#visor, .sidebar) y comportamientos
  JS-driven (.layer-container, .layer-btn.active, .fa-caret-left) que por el
  mismo motivo de cascada no pueden resolverse solo con clases de Tailwind.
*/

/* Quita el borde feo que Leaflet le pone por default al control de capas */
.leaflet-touch .leaflet-control-layers {
	border: none !important;
}

/* ── Controles del mapa: zoom, pantalla completa y burbuja de capas ──────────────
   Óvalos blancos de 52x36 con el contenido en verde institucional, separados entre sí.
   Los cuatro miden igual para que se lean como una sola familia.

   Los TRES controles son propios (ver index.html): el zoom de Leaflet está desactivado
   con zoomControl:false y reemplazado por L.Control.Zoom2. Se hizo así porque el de
   Leaflet trae reglas .leaflet-bar y .leaflet-touch más específicas que las nuestras, que
   fijan ancho, alto y bordes; cada ajuste de estilo obligaba a escribir otro override para
   vencerlas. Con todo propio, este bloque es el único lugar que define cómo se ven.

   Va sin @layer a propósito: el CSS de Leaflet también carga sin capa, y las reglas sin
   capa le ganan a las utilities de Tailwind (@layer utilities) sin importar el orden de
   los archivos. Por eso no se puede resolver con clases sueltas en el HTML. */
.ctrl-mapa {
	border: none;
	box-shadow: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ctrl-mapa > * {
	/* Ancho fijo para que los cuatro midan igual: el de capas lleva ícono + número y sin
	   esto quedaría más ancho que el resto. 52x36 con radio completo da el óvalo. */
	width: 52px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: 999px;
	border: none;
	background-color: #fff;
	color: #205c40;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
	transition:
		background-color 0.15s,
		transform 0.15s;
	cursor: pointer;
	text-decoration: none;
	padding: 0;
}

/* Leaflet pinta de celeste todos los links del mapa (.leaflet-container a, pensado para
   la atribución). El botón de pantalla completa es un <a>, así que se lo comía y se veía
   azul. Este selector le empata en especificidad y gana por orden de carga. */
.leaflet-container .ctrl-mapa a,
.leaflet-container .ctrl-mapa a:hover {
	color: #205c40;
}

/* .ctrl-mapa define display:flex y vive fuera de @layer, así que le gana a la utilidad
   `hidden` de Tailwind (que está en @layer utilities). Sin esta regla la burbuja de capas
   no se puede ocultar nunca y queda a la vista incluso con 0 capas activas. */
.ctrl-mapa.hidden {
	display: none;
}

.ctrl-mapa > *:hover,
.ctrl-mapa > *:focus {
	background-color: #f0fdf4;
	color: #205c40;
}

.ctrl-mapa > *:active {
	transform: scale(0.94);
}

/* Zoom al tope o al piso: el botón que ya no hace nada queda apagado.
   La clase la pone L.Control.Zoom2 escuchando el zoom del mapa. */
.ctrl-mapa > .ctrl-mapa__off,
.ctrl-mapa > .ctrl-mapa__off:hover {
	color: #c3cfc8;
	background-color: #fff;
	cursor: default;
	transform: none;
}

/* Saludito de la burbuja de capas activas.
   Lo dispara saludarBurbuja() en index.html, una sola vez: cuando el usuario cierra el
   panel y este reaparece como burbuja en la esquina. El panel se va de golpe del medio de
   la pantalla y vuelve como un botón chico a un costado; sin nada que una las dos cosas,
   es fácil creer que se perdió.

   Son dos animaciones a la vez:
     · el saludo, una rotación de ida y vuelta que se va apagando, con el pivote abajo
       (transform-origin 50% 85%) para que se lea como una manito y no como un trompo
     · un anillo que se expande una vez y se desvanece, para atraer la mirada al rincón

   Gira el <button> y no el contenedor de Leaflet: así el control conserva su caja y no
   empuja al zoom que tiene arriba. */
@keyframes burbuja-saluda {
	0%,
	100% {
		transform: rotate(0);
	}
	12% {
		transform: rotate(-13deg);
	}
	26% {
		transform: rotate(11deg);
	}
	40% {
		transform: rotate(-8deg);
	}
	54% {
		transform: rotate(6deg);
	}
	68% {
		transform: rotate(-3deg);
	}
}

@keyframes burbuja-anillo {
	from {
		box-shadow: 0 0 0 0 rgba(32, 92, 64, 0.32);
	}
	to {
		box-shadow: 0 0 0 16px rgba(32, 92, 64, 0);
	}
}

.burbuja-saluda {
	transform-origin: 50% 85%;
	animation:
		burbuja-saluda 1.3s ease-in-out,
		burbuja-anillo 1.3s ease-out;
}

/* Con "reducir movimiento" no se apaga el aviso, se cambia por uno quieto: se va la
   rotación —que es el movimiento propiamente dicho— y queda un resplandor que aparece y
   se desvanece sin cambiar de tamaño. Misma decisión que en el pulso de los tooltips:
   apagarlo del todo dejaría sin ninguna señal a quien tiene la preferencia puesta. */
@keyframes burbuja-anillo-quieto {
	0%,
	100% {
		box-shadow: 0 0 12px 2px rgba(32, 92, 64, 0);
	}
	35% {
		box-shadow: 0 0 12px 2px rgba(32, 92, 64, 0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.burbuja-saluda {
		animation: burbuja-anillo-quieto 1.4s ease-in-out;
	}
}

/* Atribución (Leaflet | © OpenStreetMap contributors), esquina inferior derecha del mapa */
.leaflet-control-attribution {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 10px;
}

/* Lista de sugerencias del buscador de capas: tamaño/borde ya son clases de Tailwind en el
   HTML (#CapasFiltradas no se renombra, pero ya no necesita reglas propias acá) */

.sugerencia {
	padding: 8px;
	cursor: pointer;
}

.sugerencia:hover {
	background-color: #f0f0f0;
}

/* Separador visual entre capas y resultado de dirección */
.sugerencias-separador {
	border-top: 1px solid #e5e7eb;
	margin: 4px 0;
}

/* Fila "Buscar como dirección" — diferenciada visualmente */
.sugerencia-direccion {
	color: #1d4ed8;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.sugerencia-direccion i {
	font-size: 14px;
	flex-shrink: 0;
}

/* Layout base de la página: ocupa toda la pantalla, sin scroll */
html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

/* Sidebar de capas */
.sidebar {
	position: absolute;
	display: flex;
	top: 64px;
	/* 64px = altura del nuevo MapNavbar (Fase 1, h-16). El borde inferior de 2px
	   no suma porque Tailwind preflight pone box-sizing:border-box en todo. */
	bottom: 0;
	z-index: 900;
	left: 0%;
	width: 25%;
	/* Antes 22% (≈300px Figma a 1440px); subido a 25% para que los nombres de capa más largos
	   no se trunquen tan pronto con el símbolo de leyenda al lado (≈+6 chars en desktop). */
	background-color: #fff;
	transition: width 0.2s ease;
}

/* El plugin (leaflet-sidebar.css) deja .sidebar.collapsed en 55px de ancho: ese ancho es el
   "riel" de iconos que antes se veía con el sidebar cerrado. Como en Fase 2 escondimos esa tira
   de tabs (.sidebar-tabs, ver abajo) y el abrir/cerrar quedó 100% a cargo del botón hamburguesa
   del navbar, cerrado tiene que ser 0px (que no quede ninguna franja blanca, ver
   PLAN-DISENO-UX-UI.md). Toggle real en toggleSidebar(), index.html. */
.sidebar.collapsed {
	width: 0;
}

/* Mismo motivo: .sidebar-left .sidebar-content arranca en left:55px (el ancho del riel de
   tabs), aunque la tira esté oculta. Con esto el contenido ("Capas", filas de grupos) arranca
   pegado al borde izquierdo, como cualquier sidebar sin esa tira. */
.sidebar-left .sidebar-content {
	left: 0;
}

/* El plugin tiene `.sidebar-pane.active { display: block }` en CSS sin @layer, lo que le
   gana a nuestro `flex` de Tailwind (que vive en @layer utilities). Resultado: #layers
   nunca es flex, el flex-1 de .agrupaciones no expande y el footer queda pegado al
   contenido en vez de al fondo del sidebar. Lo revertimos acá (legacy.css también está
   sin @layer, y carga después del plugin → gana por orden de fuente). */
.sidebar-pane.active {
	display: flex;
	flex-direction: column;
}

/* #home/#layers/.sidebar-tabs NO se borran del DOM (el plugin los necesita), solo se ocultan
   visualmente — el sidebar se abre/cierra únicamente con el botón hamburguesa del navbar. */
.sidebar-tabs {
	display: none;
}

/* El plugin (leaflet-sidebar.css) le pone tamaño/color de fondo grandes a .sidebar-header y
   posiciona .sidebar-close en una hoja sin @layer de Tailwind, así que le gana en cascada a
   nuestras utilities aunque carguen después (las reglas sin @layer siempre ganan). Lo resvolvemos
   a piso acá, en una hoja igual de "plana". El Figma tampoco tiene un botón de cerrar en el
   header de "Capas" (se cierra desde el navbar), por eso .sidebar-close queda oculto. */
.sidebar-header {
	margin: 0;
	height: auto;
	width: auto;
	padding: 0;
	line-height: normal;
	font-size: inherit;
	color: inherit;
	background-color: transparent;
	position: static;
}

.sidebar-close {
	display: none;
}

/* Contenedor donde el JS inyecta los grupos de capas (NO renombrar, ver PLAN-DISENO-UX-UI.md).
   El layout (flex/padding/gap) ya quedó como clases de Tailwind en el HTML; acá no queda nada. */

/* Clase que el JS agrega a cada grupo armado dinámicamente (NO renombrar). El fondo/borde de
   cada fila ya son clases de Tailwind puestas en el JS (ver index.html); acá no queda nada. */

/* Contenedor del mapa Leaflet (NO renombrar) */
#visor {
	width: 100%;
	height: calc(100% - 64px);
	/* 64px = altura del nuevo MapNavbar (h-16). El border-b-2 no suma porque
	   queda dentro del box (box-sizing:border-box, preflight de Tailwind). */
	position: absolute;
	top: 64px;
	/* Empieza justo después del header */
	left: 0;
	z-index: 0;
}

/* En mobile el navbar pasa a 2 filas ("flex-wrap md:flex-nowrap" en index.html) y queda más
   alto (~96px en vez de 64px) — por eso #visor/.sidebar necesitan otro top-offset. También el
   sidebar pasa a full-width (overlay sobre el mapa). Mismo breakpoint md que Tailwind. */
@media (min-width: 768px) and (max-width: 1024px) {
	.sidebar {
		width: 38%;
	}
}

@media (max-width: 767px) {
	/* El sidebar deja de ser full-width y pasa a ser una hoja sobre el mapa: 81% del ancho
	   (320 de 393 en el Figma). La franja de mapa que queda a la derecha no es decorativa —
	   es lo que le dice al usuario que el mapa sigue ahí y que tocándola vuelve
	   (ver cerrarSidebarAlTocarMapa en index.html). */
	.sidebar {
		top: 96px;
		width: 81%;
	}

	#visor {
		top: 96px;
		height: calc(100% - 96px);
	}

	/* Lo que no va en mobile.

	   El panel flotante de capas activas no tiene lugar en una pantalla de 393px, y su
	   contenido se reemplaza por la tira de pills dentro del sidebar. Con el panel se van
	   también su burbuja de reapertura y el botón de ayuda: el modal de onboarding explica
	   arrastrar filas y regular opacidad, que en mobile no existen, así que enseñarlo sería
	   enseñar funciones que no están. Quedan el zoom y el pantalla completa. */
	#panel-capas-flotante,
	.ctrl-mapa--ayuda,
	.ctrl-mapa--burbuja {
		display: none !important;
	}

	/* "MAPA / Interactivo" y su línea divisoria: se ocultan en mobile porque ahí el
	   ancho lo necesita la barra de búsqueda (así lo definió diseño). De tablet en
	   adelante se muestran.

	   Va acá y no con las utilidades hidden/md:block de Tailwind porque esas se
	   generan con @media anidado dentro de la clase, y esa anidación depende del
	   soporte de CSS Nesting del navegador. Con media query plana anda en todos. */
	.header-marca {
		display: none;
	}
}

/* ── Botón "Capas" del mapa (solo mobile) ──────────────────────────────────
   Puerta de entrada al catálogo cuando el mapa abre entero. Existe además de la
   hamburguesa del navbar porque es lo primero que ve alguien que entró a mirar el mapa:
   la hamburguesa está arriba, es chica y compite con el buscador.

   Oculto de tablet para arriba (768px+), donde el catálogo ya está abierto. */
.ctrl-capas-mobile {
	display: none;
}

@media (max-width: 767px) {
	/* El selector va con las dos clases de la esquina a propósito. Leaflet define
	       .leaflet-left .leaflet-control   { margin-left: 10px }
	       .leaflet-bottom .leaflet-control { margin-bottom: 10px }
	   con dos clases de especificidad, así que un `.ctrl-capas-mobile` suelto no les gana
	   y los márgenes de acá no se aplicarían. Es la misma pelea que con los botones del
	   zoom; la salida es siempre subir la especificidad, no repetir la propiedad.

	   margin-left 8px: más pegado al borde que los 16 del Figma, como pidió diseño.

	   margin-bottom 28px: alinea el botón con la fila de botones redondos de la derecha.
	   Esa columna no arranca en el piso — la empuja hacia arriba la línea de atribución de
	   Leaflet ("© OpenStreetMap contributors"), que ocupa unos 18px abajo a la derecha. Los
	   10px del margen de Leaflet más esos 18 dan los 28. */
	/* leaflet-sidebar corre TODA la esquina inferior izquierda 55px a la derecha:
	       .sidebar-left.collapsed ~ .sidebar-map .leaflet-left { left: 55px }
	   Es el hueco para su barra de pestañas colapsada, que en mobile no se muestra — ahí
	   el mapa va de borde a borde. Sin esto el botón "Capas" queda a 55px del margen que
	   le pongamos, o sea flotando en el medio, mientras el zoom de la derecha está a 10.
	   Mismo selector que la regla original para igualar especificidad; nuestra hoja carga
	   después, así que gana. */
	.sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
		left: 0;
	}

	.leaflet-bottom.leaflet-left .ctrl-capas-mobile {
		display: block;
		/* 10px a la izquierda = el mismo margen que Leaflet le da al zoom sobre el borde
		   derecho, así los dos quedan a la misma distancia de su borde. */
		margin: 0 0 28px 10px;
	}

	/* La clase la pone y la saca el JS al abrir/cerrar el catálogo (mostrarBotonCapas).
	   Va con la misma especificidad que la regla de arriba para poder ganarle. */
	.leaflet-bottom.leaflet-left .ctrl-capas-mobile.oculto {
		display: none;
	}
}

.ctrl-capas-mobile button {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: #205c40;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.ctrl-capas-mobile button i {
	font-size: 16px;
}

/* Con el catálogo cerrado, este número es la única señal de que hay capas prendidas */
.ctrl-capas-mobile__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	font-size: 12px;
	font-weight: 700;
}

.ctrl-capas-mobile__badge[hidden] {
	display: none;
}

/* ── Tira de capas visibles (solo mobile) ──────────────────────────────────
   Reemplaza al panel flotante: las capas que se van prendiendo aparecen como pills
   dentro del sidebar, en UNA línea con scroll horizontal.

   La línea horizontal es a propósito: apiladas, ocho capas empujarían el catálogo
   fuera de la pantalla justo cuando el usuario está eligiendo. Acá el bloque siempre
   mide lo mismo, prenda una capa o quince.

   No hay reordenamiento por arrastre. En una tira que scrollea, arrastrar el dedo al
   costado ya significa "scrollear" y no puede significar además "mover la pill"; el
   orden por defecto va a venir de la BD (columna orden_dibujo). */
.tira-pills {
	/* Sin esto las pills se desbordan del recuadro verde en vez de scrollear: las demás
	   propiedades de acá abajo configuran un scroll que no existiría. */
	overflow-x: auto;
	/* El scroll horizontal se queda con el gesto y no se lo pasa al mapa ni al scroll
	   vertical del catálogo, que es lo que pidió diseño. */
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tira-pills::-webkit-scrollbar {
	display: none;
}

.tira-pills > * {
	scroll-snap-align: start;
}

/* Una tira que scrollea sin avisar se lee como "hay dos capas" cuando hay ocho: nadie
   desliza algo que no parece deslizable. Por eso el degradado y la flecha, que aparecen
   solo cuando sobra contenido y desaparecen al llegar al final
   (ver actualizarDesbordePills en index.html). */
.tira-pills-wrap {
	position: relative;
}

.tira-pills-wrap::after {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 44px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
	/* Arranca en transparente y termina en el verde del recuadro, para que el degradado
	   se funda con el fondo en vez de dibujar una banda. */
	background: linear-gradient(to right, rgba(240, 253, 244, 0), #f0fdf4 70%);
}

.tira-pills-wrap .tira-pills-flecha {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
	color: #15803d;
	font-size: 14px;
	line-height: 1;
}

.tira-pills-wrap.hay-mas::after,
.tira-pills-wrap.hay-mas .tira-pills-flecha {
	opacity: 1;
}

/* Agarradera para arrastrar el card de capas activas.
   Se dibuja con CSS y no con un ícono de Phosphor porque el proyecto solo carga los
   pesos `regular` y `duotone`; el `bold` que pedía diseño obligaría a sumar otra hoja
   y otra fuente completa del CDN (~100 KB) para un único ícono.

   Son 6 puntos en 2 columnas x 3 filas: la caja mide 12x18 y el fondo se repite cada
   6px, así que entran 2 a lo ancho y 3 a lo alto. El radial-gradient pinta un punto de
   3px de diámetro (radio 1.5px) centrado en cada celda de 6x6.

   Para agrandarlos: subir width/height y background-size manteniendo la proporción
   (ancho = 2 celdas, alto = 3 celdas). Para engrosarlos: subir el radio del gradiente. */
.panel-grip {
	width: 12px;
	height: 18px;
	background-image: radial-gradient(
		circle,
		currentColor 1.5px,
		transparent 1.6px
	);
	background-size: 6px 6px;
	/* Gris oscuro en vez del verde anterior: diseño lo pidió más visible */
	color: #374151;
}

/* Barra de opacidad de cada capa activa: se llena de azul a medida que sube el valor.
   El JS setea dos variables en el elemento (ver pintarSlider en index.html):

     --pct      hasta dónde llega el relleno (ej: "70%")
     --relleno  el color, que se intensifica al llegar al 100%

   Los var() llevan respaldo porque si la variable no estuviera definida, toda la
   declaración sería inválida y el navegador volvería a su barra gris por defecto.

   OJO con dónde va el degradado: el riel NO es el fondo del <input>. Cada motor lo
   dibuja en un pseudo-elemento propio que tapa lo que haya atrás:

     WebKit (Safari/Chrome) → ::-webkit-slider-runnable-track
     Firefox                → ::-moz-range-track

   Por eso el degradado va repetido en los dos, y no en .slider-opacidad. Poner el
   background en el elemento no funciona: queda debajo del riel nativo. */
.slider-opacidad {
	-webkit-appearance: none;
	appearance: none;
	/* Alto total del control: tiene que entrar el thumb de 14px, no solo el riel de 6px */
	height: 13px;
	background: transparent;
	outline: none;
}

/* ── WebKit (Safari, Chrome) ── */
.slider-opacidad::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--relleno, #9ca3af) 0%,
		var(--relleno, #9ca3af) var(--pct, 0%),
		#e5e7eb var(--pct, 0%),
		#e5e7eb 100%
	);
}

.slider-opacidad::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--relleno, #9ca3af);
	border: none;
	cursor: pointer;
	/* Sin esto el thumb se apoya en el borde superior del riel en vez de quedar centrado.
	   El cálculo es (alto del riel - alto del thumb) / 2 = (6 - 13) / 2 */
	margin-top: -3.5px;
}

/* ── Firefox ──
   Va en reglas separadas y no combinado con las de WebKit: si un motor no entiende uno
   de los selectores, descarta la regla entera. */
.slider-opacidad::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--relleno, #9ca3af) 0%,
		var(--relleno, #9ca3af) var(--pct, 0%),
		#e5e7eb var(--pct, 0%),
		#e5e7eb 100%
	);
}

.slider-opacidad::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--relleno, #9ca3af);
	border: none;
	cursor: pointer;
}

/* Engrosa apenas el trazo de un ícono de Phosphor, sin llegar al peso `bold`.
   El proyecto carga solo los pesos `regular` y `duotone`; usar `ph-bold` obligaría a
   sumar otra hoja y otra fuente completa del CDN por un único ícono.

   text-stroke dibuja un contorno del mismo color encima del glifo, lo que lo engorda de
   forma pareja. Con 0.4px alcanza para que se note sin que parezca otro peso tipográfico.
   Subir ese valor lo engrosa más; pasando de ~0.8px los ángulos empiezan a redondearse. */
.icono-semi {
	-webkit-text-stroke: 0.4px currentColor;
	text-stroke: 0.4px currentColor;
	/* paint-order evita que el contorno se coma los huecos internos del glifo */
	paint-order: stroke fill;
}

.justified-text {
	line-height: 1.6;
	margin: 10px 0;
}

.sugerencia.seleccionada {
	background-color: #205c40;
	color: white;
}

/* Punto + switch de cada fila de capa (NO renombrar .layer-btn/.active, ver PLAN-DISENO-UX-UI.md).
   El layout base ya son clases de Tailwind puestas en el JS; acá solo el estado "activo",
   que depende de la clase .active y no se puede resolver con utilities sueltas.
   Antes este verde era var(--accent-grupo) (el color de GRUPO_ESTILO, por grupo). Se volvió a
   un verde neutro fijo a propósito (charla del 2026-06-29): la simbología REAL de cada capa
   (color/forma que tenga en GeoServer) ahora se muestra al lado del nombre, vía
   obtenerLeyendaCapa() en index.html — el toggle en sí queda neutro para no competir
   visualmente con ese swatch. --accent-grupo sigue viva para el punto del header del grupo
   (no se tocó esa parte, solo esta). */
.layer-btn.active .layer-btn__switch {
	background-color: var(--accent-grupo);
}

.layer-btn.active .layer-btn__switch>span {
	transform: translateX(16px);
}

/* Texto en negrita cuando la capa está activa */
.layer-btn.active .layer-btn__label {
	font-weight: 600;
	color: #111928;
}

/* ── Subcapas ─────────────────────────────────────────────────────────────
   Todo el CSS de subcapas vive acá (no en Tailwind) porque los elementos los
   crea el JS dinámicamente — Tailwind solo escanea en build time y no garantiza
   que clases nuevas en strings JS queden en output.css.
   ──────────────────────────────────────────────────────────────────────────── */

/* Lista de subcapas: oculta por defecto, visible con clase .open */
.subcapas-lista {
	display: none;
	flex-direction: column;
	gap: 2px;
	/* Sangría que alinea el contenido debajo del label del parent
	   (22px ≈ ícono leyenda 20px + padding izq 2px del parent) */
	margin-left: 22px;
	padding-left: 10px;
	padding-bottom: 6px;
	padding-top: 2px;
	/* Línea vertical que conecta las subcapas entre sí */
	border-left: 2px solid #e5e7eb;
}

.subcapas-lista.open {
	display: flex;
}

/* Fila de cada subcapa */
.subcapa-btn {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 8px;
	/* padding-right: 8px iguala el borde derecho al del parent (layer-btn tiene px-2 = 8px) */
	padding: 4px 8px 4px 6px;
	border-radius: 8px;
	cursor: pointer;
}

.subcapa-btn:hover {
	background-color: #fafafa;
}

/* Punto de color de la subcapa (el color lo pone el JS via style.backgroundColor) */
.subcapa-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Nombre de la subcapa */
.subcapa-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: #6b7280;
}

/* Switch: más pequeño que el del parent (28×16px vs 36×20px).
   Thumb de 12×12px → translateX(12px) para llegar al otro extremo. */
.subcapa-btn__switch {
	position: relative;
	flex-shrink: 0;
	width: 28px;
	height: 16px;
	border-radius: 999px;
	background-color: #d1d5db;
	transition: background-color 0.2s;
}

.subcapa-btn__switch > span {
	position: absolute;
	left: 2px;
	top: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: white;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s;
}

/* Estado activo */
.subcapa-btn.active .subcapa-btn__switch {
	background-color: var(--accent-grupo);
}

.subcapa-btn.active .subcapa-btn__switch > span {
	transform: translateX(12px);
}

/* Texto en negrita cuando la subcapa está activa */
.subcapa-btn.active .subcapa-label {
	font-weight: 600;
	color: #374151;
}

/* Chevron que abre/cierra la lista: pill con cantidad + flecha */
.subcapas-chevron {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 3px;
	background: none;
	border: none;
	padding: 2px 2px;
	cursor: pointer;
	transition: opacity 0.15s;
}

.subcapas-chevron:hover {
	opacity: 0.7;
}

/* Pill con la cantidad de subcapas — usa el color de acento del grupo */
.subcapas-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background-color: #e5e7eb;
	color: var(--accent-grupo);
}

/* Flecha del chevron */
.subcapas-chevron i {
	font-size: 13px;
	color: #6b7280;
	transition: transform 0.2s;
	display: block;
}

.subcapas-chevron.open i {
	transform: rotate(180deg);
}

/* Chevron de cada grupo: por defecto (colapsado) apunta para abajo; al expandir, mostrarCapas()/
   AbrirSidebar() (ver index.html) le agregan la clase .fa-rotate-270 y pasa a apuntar para
   arriba. El ícono base (fa-caret-left) apunta naturalmente para la izquierda, por eso ambos
   estados necesitan su propia rotación, no alcanza con "sumar" un giro a la clase sola.
   Escapado a .grupos para no afectar el ícono de .sidebar-close (oculto, ver más arriba) que
   reusa la misma clase fa-caret-left para otra cosa. */
.grupos .fa-caret-left {
	transform: rotate(-90deg);
}

.grupos .fa-caret-left.fa-rotate-270 {
	transform: rotate(90deg);
}

/* Lista colapsable de capas dentro de un grupo (NO renombrar) */
.layer-container.expandido {
	max-height: max-content;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	/* Valor suficiente para el contenido */
}

@media (max-width: 900px) {
	.layer-container.expandido {
		width: 100% !important;
	}
}

.layer-container {
	max-height: 0;
	overflow: hidden;
	transition: all 0.3s ease;
}

/* Pill siendo arrastrada: se vuelve semitransparente para indicar origen */
.pill-arrastrando {
	opacity: 0.35;
	cursor: grabbing !important;
}

/* Cursor de arrastre en las filas del panel de capas activas.
   Acá vivía un tooltip negro hecho con ::after ("Arrastrá para reordenar") que cubría
   toda la fila. Se quitó: ahora el aviso lo da el tooltip ilustrado de la agarradera
   (tooltips.js), y tener los dos hacía que al pasar por el medio de la fila saltara un
   cartel distinto al de los puntitos. */
[data-layer-key] {
	cursor: grab;
}

[data-layer-key]:active {
	cursor: grabbing;
}

/* Mientras se arrastra cualquier pill, ocultar todos los tooltips del contenedor */
#capas-visibles-lista:has(.pill-arrastrando) [data-layer-key]::after {
	opacity: 0;
}

/* Popup card: Leaflet wrapper reset + card layout */
.popup-styled .leaflet-popup-content-wrapper {
	border-radius: 12px;
	padding: 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
	overflow: hidden;
}

.popup-styled .leaflet-popup-content {
	margin: 0;
}

.popup-styled .leaflet-popup-tip {
	box-shadow: none;
}

.popup-card + .popup-card {
	border-top: 1px solid #f3f4f6;
}

.popup-card__body {
	padding: 12px 16px 14px;
	font-family: "Plus Jakarta Sans", sans-serif;
	min-width: 220px;
}

/* Fila: punto de color + nombre del grupo en gris neutro */
.popup-card__header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.popup-card__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.popup-card__grupo {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	color: #6b7280;
}

/* Línea del color de la sección */
.popup-card__divider {
	height: 2px;
	border-radius: 1px;
	margin-bottom: 10px;
}

.popup-card__title {
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 10px;
	line-height: 1.3;
}

.popup-card__props {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.popup-prop {
	display: flex;
	gap: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: #374151;
}

.popup-prop__key {
	color: #6b7280;
	font-weight: 600;
	white-space: nowrap;
}

.popup-prop__key::after {
	content: ":";
}