.g-herramienta_layerSwitcher {
  /* Scoped variables for base layer selector styling */
  --bl-bg: #f9f9f9;
  --bl-border: #ddd;
  --bl-accent: #0078d4;
  --bl-radius: 6px;
  --bl-color: #222;
  --bl-heading: #333;
  --bl-gap: 0.5em;
  --bl-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.g-herramienta_selectorCapa .m-tools:before {
  /* Icono de pila de capas (estilo QGIS/Leaflet): tres rombos apilados.
     Se usa como MÁSCARA (mask-image) en lugar de content:url() para que
     el icono herede el color configurable (color2 / --g-plugin-icon-color)
     mediante background-color. Si fuera un data-uri con stroke fijo no
     podría cambiar el color. */
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--g-plugin-icon-color, #ffffff);
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><path d='M12 2 L21 7 L12 12 L3 7 Z'/><path d='M3 12 L12 17 L21 12'/><path d='M3 17 L12 22 L21 17'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'><path d='M12 2 L21 7 L12 12 L3 7 Z'/><path d='M3 12 L12 17 L21 12'/><path d='M3 17 L12 22 L21 17'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}


/* Abrir y cerrar panel */
.m-panel.m-plugin-herramienta.collapsed {
  height: 40px;
}


.opened .g-cartografia-flecha-izquierda {
  position: absolute !important;
  right: -40px !important;

  /* La flechita desplegada coincide con el color del icono activo (color3). */
  color: var(--g-plugin-icon-color-active, #71a7d3) !important;
  background-color: #fff !important;
}


/* Contenedor del plugin */
.m-control.m-container.m-herramienta {
  /* Ancho dinámico: el panel se ajusta al mayor texto de sus filas en lugar
     de quedar fijo en 250px. max-content deja crecer el panel hasta el ancho
     del texto más largo; max-width impide que desborde la pantalla (los
     nombres largos entonces se recortan con elipsis en .ls-nombre). */
  width: max-content;
  max-width: min(420px, 90vw);
  display: flex !important;
  flex-direction: column;
}


/* Título (fondo y color vienen del bloque con variables color1/color2) */
.m-herramienta-header {
  display: block;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  padding: 0 5px;
  text-align: center;
  width: 100%;
}

/* Zona de la lista de capas: cuando hay muchas capas, el panel no debe crecer
   indefinidamente hacia abajo. Se define una altura máxima y un scroll
   vertical interno, de modo que la cabecera y el botón del panel quedan fijos
   y solo la lista de capas se desplaza si se desborda. */
.m-herramienta-previews.layerSwitcher,
.m-herramienta-previews {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Cabecera del panel: fondo (color1), borde (color2), icono (color3).
   El BOTÓN del panel lo estilan las reglas genéricas (ver abajo). */
.g-herramienta_selectorCapa .m-herramienta-header {
  background-color: var(--g-plugin-bg-color, orangered) !important;
  color: var(--g-plugin-icon-color, #ffffff) !important;
  border-color: var(--g-plugin-border-color, #ffffff) !important;
}

/* Panel abierto (opened) = estado activo: se aplican los colores "-active".
   El BOTÓN lo estiliza la regla genérica de botón (ver abajo). */
.m-areas>div.m-area>div.m-panel.g-herramienta_selectorCapa.opened .m-herramienta-header {
  background-color: var(--g-plugin-bg-color-active, #ffffff) !important;
  color: var(--g-plugin-icon-color-active, #71A7D3) !important;
  border-color: var(--g-plugin-border-color-active, #71A7D3) !important;
}

/* BOTÓN del panel — GENÉRICO para todos los plugins.
   Base (cerrado):
     - fondo  = color1.deactive (--g-plugin-bg-color)
     - texto  = color3.deactive (--g-plugin-icon-color)
     - borde  = color2.deactive (--g-plugin-border-color)
   Abierto (opened) — mayor especificidad gana sobre base:
     - fondo  = color1.active  (--g-plugin-bg-color-active)
     - texto  = color2.active  (--g-plugin-border-color-active)
     - borde  = color2.active  (--g-plugin-border-color-active) */
.m-areas>div.m-area>div.m-panel>button.m-panel-btn {
  background-color: var(--g-plugin-bg-color, orangered) !important;
  color: var(--g-plugin-icon-color, #fff) !important;
  border-color: var(--g-plugin-border-color, #fff) !important;
}

.m-areas>div.m-area>div.m-panel.opened>button.m-panel-btn {
  background-color: var(--g-plugin-bg-color-active, #ffffff) !important;
  color: var(--g-plugin-border-color-active, #71A7D3) !important;
  border-color: var(--g-plugin-border-color-active, #71A7D3) !important;
}


.overlay-layer-selector {
  padding: 0.5em;
  background-color: #f9f9f9;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-family: sans-serif;
}

.overlay-layer-selector h3 {
  margin-top: 0;
  font-size: 1.1em;
  color: #333;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.3em;
}

.overlay-layer-selector ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.overlay-layer-selector li {
  /* Elimina cualquier viñeta/marcador heredado (list-style) que Mapea o los
     estilos del navegador puedan inyectar a la izquierda de cada fila. */
  list-style: none;
  list-style-type: none;
  margin: 0.5em 0;
}

.overlay-layer-selector .ls-row {
  cursor: default;
  font-size: 1.1em;
  color: #222;
  display: flex;
  align-items: center;
}

/* Nombre de la capa: ocupa el espacio sobrante, alineado a la izquierda.
   Es un boton: al hacer clic alterna la visibilidad de la capa (igual que el
   ojito), asi que se resetean los estilos por defecto de <button> y se marca
   como clicable. */
.overlay-layer-selector .ls-nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.overlay-layer-selector .ls-nombre:hover {
  color: #0078d4;
}

/* ── Ojito de visibilidad por capa ────────────────────────────────── */
/* Botón que muestra si la capa esta visible (abierto) u oculta (cerrado)
   y permite alternarla. Colocado al final de cada fila. */
.overlay-layer-selector .ls-eye {
  flex-shrink: 0;
  margin-left: 0.4em;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  /* Color del trazo del SVG del ojo (stroke=currentColor). */
  color: #444;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.1s;
}

.overlay-layer-selector .ls-eye:hover {
  background: rgba(0, 0, 0, 0.08);
}

.overlay-layer-selector .ls-eye:active {
  transform: scale(0.9);
}

/* Capa visible: ojito azul claro (relacionado con el estado activo) */
.overlay-layer-selector .ls-eye-on {
  background: #eaf3fc;
  border: 1px solid #d3e4f5;
}

/* Capa oculta: el ojo se atenúa para señalar que no se ve */
.overlay-layer-selector .ls-eye-off {
  opacity: 0.55;
  background: transparent;
}

/* ── Botón de opciones (desplegable) ─────────────────────────────── */
/* Chevron/flecha hacia abajo: abre el panel de opciones de la capa. */
.overlay-layer-selector .ls-options {
  flex-shrink: 0;
  margin-left: 0.15em;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s, color 0.2s;
}

.overlay-layer-selector .ls-options:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}

/* Estado abierto: flecha rotada y resaltada */
.overlay-layer-selector .ls-options-open {
  transform: rotate(180deg);
  color: #0078d4;
  background: #eaf3fc;
}

/* ── Panel desplegable de opciones de la capa ────────────────────── */
/* Colapsado por defecto (altura 0, oculto); con .open se expande. */
.overlay-layer-selector .ls-options-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
  margin-left: 1.6em;
}

.overlay-layer-selector .ls-options-panel.open {
  max-height: 220px;
  opacity: 1;
  margin-top: 0.15em;
  margin-bottom: 0.15em;
}

/* Fila de opcion (slider + etiqueta + valor) */
.overlay-layer-selector .ls-option-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: #f7f9fc;
  border: 1px solid #e3e9f2;
  border-radius: 6px;
  padding: 6px 8px;
}

.overlay-layer-selector .ls-option-label {
  font-size: 0.85em;
  color: #444;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Slider de transparencia: ocupa el espacio disponible.
   Para que el control se vea SIEMPRE relleno (incluido al 0% de opacidad,
   donde el accent-color nativo dejaba el riel vacio hasta ~50%), se pinta
   el track con un gradiente lineal que refleja el valor actual y que el
   JS actualiza en cada uso (ver setLayerOpacity / fill del render). */
.overlay-layer-selector .ls-opacity-slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: #0078d4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  height: 7px;
  border-radius: 6px;
  /* gradiente por defecto (0%): el JS lo sobrescribe con el valor real */
  background: linear-gradient(to right, #0078d4 0%, #0078d4 0%, #d7dde7 0%, #d7dde7 100%);
}

/* "Rellena" visualmente el track del slider con el valor (llamado por JS). */
.overlay-layer-selector .ls-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0078d4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
}

.overlay-layer-selector .ls-opacity-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0078d4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
}

.overlay-layer-selector .ls-opacity-slider::-moz-range-track {
  background: transparent;
  height: 7px;
}

.overlay-layer-selector .ls-option-value {
  font-size: 0.8em;
  color: #0078d4;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 34px;
  text-align: right;
}

/* ── Fila de acciones por capa (tabla / borrar) ──────────────────────
   Aparece bajo el slider de transparencia dentro del desplegable. */
.overlay-layer-selector .ls-actions-row {
  display: flex;
  gap: 0.4em;
  margin-top: 0.4em;
}

.overlay-layer-selector .ls-action {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s;
}

.overlay-layer-selector .ls-action:hover {
  background: rgba(0,0,0,0.08);
  color: #1a1a1a;
}

.overlay-layer-selector .ls-action-info:hover {
  background: #eef6fd;
  color: #0078d4;
}

/* Botón de borrar: tono rojo al pasar el ratón para advertir del efecto */
.overlay-layer-selector .ls-action-delete:hover {
  color: #d9534f;
  background: #fdf0ef;
}

.overlay-layer-selector .ls-action:active {
  transform: scale(0.9);
}

/* ── Panel inferior (bottom sheet) de informacion / tabla de atributos ──
   Anclado a la parte baja de la pantalla, ocupa TODO el ancho y se despliega
   hacia arriba (tipo "sidenav" horizontal desde abajo). El mapa queda
   interactivo (el overlay NO bloquea el raton): se puede mover el mapa y
   pulsar entidades, y hay sincronia bidireccional tabla <-> mapa:
   - pulsar una fila de la tabla localiza/resalta el feature en el mapa;
   - pulsar un feature en el mapa resalta la fila correspondiente. */
.ls-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  /* Transparente y transparente a los eventos: NO bloquea el raton, asi el
     mapa sigue siendo interactivo mientras el panel esta abierto. */
  background: transparent;
  pointer-events: none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  display: flex;
  align-items: flex-end;      /* panel anclado abajo */
  justify-content: center;
}

/* Caja del panel: ocupa EL 100% del ancho. Solo el propio panel recibe
   eventos de raton (pointer-events auto) para no tapar el mapa. Oculta
   (translada hacia abajo) hasta que se aplica .ls-sheet--open y sube. */
.ls-sheet {
  background: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 60vh;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(102%);
  transition: transform 0.35s ease;
}

.ls-sheet--open {
  transform: translateY(0);
}

/* Tirador para arrastrar: ademas de sugerir el gesto, permite REDIMENSIONAR
   el panel (arrastrar arriba/abajo para hacerlo mas alto o mas bajo). */
.ls-sheet__handle {
  height: 16px;
  width: 100%;
  background: transparent;
  margin: 0;
  flex-shrink: 0;
  cursor: ns-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Barrita visual centrada dentro del area de agarre del tirador */
.ls-sheet__handle::before {
  content: '';
  height: 4px;
  width: 48px;
  border-radius: 4px;
  background: #ccd3dd;
}

.ls-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 8px 16px 10px;
  font-size: 1.05em;
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
}

/* Contenedor izquierdo del header: agrupa el dropdown de capas (sidenav) y
   el titulo para que el boton de cerrar quede a la derecha. */
.ls-sheet-header-left {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  flex: 1 1 auto;
}

/* Drop-down de capas en el sidenav de la tabla de atributos: permite cambiar
   de capa sin cerrar el panel. Mas estrecho y discreto que el titulo. */
.ls-sheet-layer-picker {
  flex-shrink: 0;
  max-width: 45%;
  padding: 4px 6px;
  font-size: 0.85em;
  font-weight: 500;
  color: #222;
  background: #fff;
  border: 1px solid #c9d2e0;
  border-radius: 6px;
  cursor: pointer;
}

.ls-sheet-layer-picker:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: -1px;
  border-color: #0078d4;
}

.ls-sheet-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.ls-sheet-close {
  border: none;
  background: transparent;
  color: #333;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
}

.ls-sheet-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

.ls-sheet-body {
  padding: 0 16px 16px;
  overflow: auto;
}

.ls-sheet-note {
  font-size: 0.82em;
  color: #666;
  margin: 0.4em 0 0.6em;
}

/* Lista de estadisticas (ráster) */
.ls-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ls-stat-list li {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 6px 4px;
  border-bottom: 1px solid #f0f2f6;
  font-size: 0.9em;
}

.ls-stat-label {
  color: #555;
  font-weight: 500;
}

.ls-stat-value {
  color: #222;
  font-weight: 600;
  text-align: right;
}

/* Tabla de atributos (vectorial).
   Las filas son clicables: al pulsar una se localiza y resalta el
   feature correspondiente en el mapa (ver .ls-row-active). */
.ls-attr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8em;
}

.ls-attr-table thead th {
  position: sticky;
  top: 0;
  background: #f3f6fa;
  color: #333;
  font-weight: 600;
  text-align: left;
  padding: 7px 8px;
  border-bottom: 2px solid #dbe3ee;
}

.ls-attr-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-attr-table tbody tr:nth-child(even) {
  background: #fafbfd;
}

/* Filas clicables: cursor de mano y hover mas evidente */
.ls-attr-table tbody tr.ls-clickable {
  cursor: pointer;
}

.ls-attr-table tbody tr:hover {
  background: #eef6fd;
}

/* Fila seleccionada (feature localizado en el mapa) */
.ls-attr-table tbody tr.ls-row-active {
  background: #d6ecfe;
  outline: 2px solid #0078d4;
  outline-offset: -2px;
}

/* ── Dropdown secundario de sub-capas en el sidenav ─────────────────
   Aparece junto al dropdown de capas cuando la capa activa expone
   sub-capas (p.ej. BTN via MapLibre). Se inserta dinámicamente en el
   header-left antes del título. */
.ls-sheet-sublayer-picker {
  flex-shrink: 0;
  max-width: 35%;
  padding: 4px 6px;
  font-size: 0.82em;
  font-weight: 500;
  color: #222;
  background: #fff;
  border: 1px solid #c9d2e0;
  border-radius: 6px;
  cursor: pointer;
}

.ls-sheet-sublayer-picker:focus-visible {
  outline: 2px solid #0078d4;
  outline-offset: -1px;
  border-color: #0078d4;
}

.ls-sheet-sublayer-picker:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Grupos de capas (arbol) ─────────────────────────────────────────
   Un grupo (IDEE.layer.LayerGroup) se muestra como nodo padre con sus
   capas hijas (y subgrupos) indentadas debajo. Se conserva el estado
   colapsado/expandido entre re-renders. */
.overlay-layer-selector li.ls-group > .ls-row {
  font-weight: 600;
  color: #1a3a5c;
}

/* Boton chevron: colapsa/expande el grupo. Misma linea de base que el
   ojito, sin fondo. */
.overlay-layer-selector .ls-group-chevron {
  flex-shrink: 0;
  margin-right: 0.15em;
  width: 24px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  color: #1a3a5c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
}

.overlay-layer-selector .ls-group-chevron:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Lista de hijas de un grupo: indentada respecto a la fila del padre. */
.overlay-layer-selector .ls-children {
  list-style: none;
  padding: 0;
  margin: 0.25em 0 0 0.9em;
  border-left: 2px solid #dfe6ee;
  padding-left: 0.7em;
}

/* Estado colapsado: los hijos quedan ocultos hasta expandir el grupo. */
.overlay-layer-selector .ls-collapsed {
  display: none;
}

/* Las filas hijas se atenuan ligeramente frente al nombre del grupo. */
.overlay-layer-selector .ls-children li .ls-row .ls-nombre {
  font-weight: 400;
}

/* ── Botón de renombrar (lápiz) ──────────────────────────────────────
   Edita el nombre de la capa/grupo en linea: al pulsarlo, el nombre deja
   paso a un input. Enter/blur guarda; Escape cancela. Vive en el panel de
   opciones (junto a tabla de atributos y borrado), no en la fila. */
.overlay-layer-selector .ls-action-rename {
  width: 24px;
  height: 26px;
  margin-left: 0.15em;
}

.overlay-layer-selector .ls-action-rename:hover {
  color: #0078d4;
  background: #eef6fd;
}

/* Input de renombrado en linea: ocupa el ancho del nombre y lo sustituye. */
.overlay-layer-selector .ls-rename-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.95em;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #0078d4;
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}

.overlay-layer-selector .ls-rename-input.error {
  border-color: #d9534f;
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.2);
}

/* ── Drag & drop para reordenar capas ────────────────────────────────
   Las filas arrastrables muestran cursor de "agarrar". Durante el arrastre
   la fila fuente se atenua y se marca el punto exacto de inserción con una
   linea (el elemento sobre el que se suelta). */
.overlay-layer-selector li[draggable='true'] {
  cursor: grab;
}

.overlay-layer-selector li[draggable='true']:active {
  cursor: grabbing;
}

/* Asa de arrastre: el unico punto desde el que se inicia el drag. Visible
   al pasar el raton (y siempre en pantallas tactiles) para indicar que la
   fila se puede reordenar. */
.overlay-layer-selector .ls-drag-handle {
  flex-shrink: 0;
  width: 20px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b0bdcd;
  cursor: grab;
  border-radius: 4px;
  opacity: 0.45;
  transition: opacity 0.2s, color 0.2s, background 0.2s;
  touch-action: none;
}

.overlay-layer-selector li:hover .ls-drag-handle {
  opacity: 1;
  color: #5a6b7e;
}

.overlay-layer-selector .ls-drag-handle:active {
  cursor: grabbing;
  background: rgba(0, 0, 0, 0.08);
}

/* Fila que se está arrastrando: atenuada para indicar que "está cogida". */
.overlay-layer-selector li.ls-dragging {
  opacity: 0.45;
  border: 1px dashed #b0c4d8;
  border-radius: 6px;
}

/* Zona de inserción: la fila sobre la que se suelta se resalta con una
   linea azul en la parte superior (la capa soltada quedará por encima) o
   inferior (quedará por debajo), segun la mitad de la fila recorrida. */
.overlay-layer-selector li.ls-drop-above {
  box-shadow: 0 -3px 0 0 #0078d4;
}

.overlay-layer-selector li.ls-drop-below {
  box-shadow: 0 3px 0 0 #0078d4;
}

.overlay-layer-selector li.ls-drop-above.ls-drop-below {
  box-shadow: 0 -3px 0 0 #0078d4, 0 3px 0 0 #0078d4;
}

/* Zona "meter dentro de un grupo": se suelta sobre la mitad inferior de la
   cabecera del grupo. Se resalta la cabecera y el area de hijos con un fondo
   azulado y una linea de insercion en el borde superior del bloque, indicando
   que la capa entrara como hija (arriba del resto de hijas del grupo). */
.overlay-layer-selector li.ls-group.ls-drop-into-group > .ls-row {
  background: #eef6fd;
  box-shadow: inset 3px 0 0 0 #0078d4;
}

.overlay-layer-selector li.ls-group.ls-drop-into-group > .ls-children {
  box-shadow: inset 0 3px 0 0 #0078d4;
}

/* Mientras se arrastra, se desactiva la interaccion con botones. */
.overlay-layer-selector.ls-dragging-active .ls-eye,
.overlay-layer-selector.ls-dragging-active .ls-options,
.overlay-layer-selector.ls-dragging-active .ls-action,
.overlay-layer-selector.ls-dragging-active .ls-group-chevron {
  pointer-events: none;
}