/* =====================================================================
   El mapa de Orvik · los controles con los tokens de `08`
   =====================================================================
   Dirección, 6-nov 23:58: «controles con tokens de 08». MapLibre trae
   sus propios botones --cuadrados, blancos, con su sombra-- y en una
   pantalla de Orvik se ven prestados. Aquí se les ponen los mismos
   tokens que a todo lo demás: ni un color, radio ni tamaño escrito a
   mano.

   Las medidas salen de la maqueta aprobada
   (`docs/aud/mockups/mapa-sitios/mapa.html`): botones de 40, grupo con
   `--r-control`, borde `--linea`.
   ===================================================================== */

.mapa-caja,
#mapa {
  background: var(--fondo);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  border: 1px solid var(--linea);
}

/* El grupo de botones (acercar y alejar). */
.maplibregl-ctrl-group {
  border-radius: var(--r-control) !important;
  background: var(--superficie) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: var(--sombra-2, 0 4px 14px rgba(15, 23, 42, .12)) !important;
  overflow: hidden;
}
.maplibregl-ctrl-group button {
  width: 40px !important;
  height: 40px !important;
  background: var(--superficie) !important;
}
.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--linea) !important;
}
.maplibregl-ctrl-group button:hover {
  background: var(--superficie-2) !important;
}
/* Los iconos de MapLibre son SVG embebidos en CSS y no siguen tokens.
   En oscuro se invierten para que no queden negros sobre negro: es lo
   único que no puede salir de un token, y se dice. */
:root[data-tema="oscuro"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(1) brightness(1.6);
}

/* El crédito de CARTO y de OpenStreetMap. Va VISIBLE --es condición de
   la licencia-- pero con la letra de nota, no gritando. */
.maplibregl-ctrl-attrib {
  background: var(--superficie) !important;
  color: var(--texto-3) !important;
  font-family: var(--fuente);
  font-size: 11px;
  line-height: 16px;
  border-radius: var(--r-control) 0 0 0;
}
.maplibregl-ctrl-attrib a {
  color: var(--texto-2) !important;
}

/* El pin. El SVG ya viene con `--marca-principal` dentro; aquí sólo se
   coloca, para que la punta caiga en la coordenada y no el centro. */
.lyk-mapa-pin {
  width: 44px;
  height: 56px;
  cursor: grab;
  line-height: 0;
}
.lyk-mapa-pin:active { cursor: grabbing; }