/*
 * El mapa de OpenStreetMap con el aire de la app (mapa.js, docs/negocios.md): la caja, sus botones, las chinchetas y el
 * globo de cada punto. La cargan el socio y la Junta, detrás de vendor/leaflet.css, que no se toca.
 */

/* #region La caja */
.mapa-caja {
    /* Leaflet usa capas muy altas: que se queden dentro y no pisen la cabecera ni las ventanas. */
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radio-xl);
    background: var(--rs-superficie-2);
}

.mapa-caja.leaflet-container {
    font-family: var(--fuente-ui);
    font-size: var(--texto-etiqueta);
}

/* En oscuro, el mismo mapa en negativo: sin un proveedor aparte. */
:root:not([data-theme="light"]) .mapa-caja .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7);
}

:root[data-theme="light"] .mapa-caja .leaflet-tile-pane {
    filter: saturate(0.75);
}

.mapa-caja .leaflet-bar {
    border: 0;
    border-radius: var(--radio-md);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.3);
}

.mapa-caja .leaflet-bar a {
    border-color: var(--rs-borde-sutil);
    background: var(--rs-fondo);
    color: var(--rs-texto);
}

.mapa-caja .leaflet-bar a:hover {
    background: var(--rs-hover);
}

.mapa-caja .leaflet-control-attribution {
    background: color-mix(in srgb, var(--rs-fondo) 78%, transparent);
    color: var(--rs-texto-secundario);
    font-size: 11px;
}

.mapa-caja .leaflet-control-attribution a {
    color: inherit;
}
/* #endregion */

/* #region Cada punto: una chincheta con su logo o sus iniciales */
.mapa-pin {
    border: 0;
    background: none;
}

.mapa-pin__cabeza {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 3px solid var(--tono-pin, var(--marca-acento));
    border-radius: 50%;
    background: var(--rs-fondo);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.35);
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: 13px;
    font-weight: 700;
    transition: transform var(--duracion-hover) var(--curva);
    transform-origin: 50% 120%;
}

/* Más concreto que vendor/leaflet.css, que deja las imágenes de esta capa a su tamaño. */
.leaflet-container .mapa-pin .mapa-pin__cabeza img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* La punta, en el mismo color del borde. */
.mapa-pin__cabeza::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 11px solid var(--tono-pin, var(--marca-acento));
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    transform: translate(-50%, 1px);
}

.mapa-pin:hover .mapa-pin__cabeza,
.mapa-pin--activo .mapa-pin__cabeza {
    transform: scale(1.18);
}
/* #endregion */

/* #region El globo de un punto: su nombre, de qué es, dónde y cómo llegar */
.mapa-globo .leaflet-popup-content-wrapper,
.mapa-globo .leaflet-popup-tip {
    background: var(--rs-fondo);
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.4);
    color: var(--rs-texto);
}

.mapa-globo .leaflet-popup-content-wrapper {
    border-radius: var(--radio-lg);
}

.mapa-globo .leaflet-popup-content {
    display: grid;
    gap: 3px;
    margin: var(--espacio-3) var(--espacio-4);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.35;
}

.mapa-globo .leaflet-popup-content strong {
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    line-height: 1.2;
}

/* Su nombre y, arriba a la derecha, lo que se puede hacer: solo iconos. */
.mapa-globo__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.mapa-globo__acciones {
    display: flex;
    flex: none;
    gap: 2px;
    margin: -6px -8px 0 0;
}

.mapa-globo .leaflet-popup-content .mapa-globo__accion {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--marca-acento);
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

.mapa-globo .leaflet-popup-content .mapa-globo__accion:hover {
    background: var(--rs-hover);
}

.mapa-globo__accion .icono {
    width: 18px;
    height: 18px;
}
/* #endregion */