/* Mapa de sedes. Toma los colores del tema por variables, así que el mismo
   fichero vale para cualquier demo: si el sitio no las define, se usan las de
   reserva. */
.cb-mapa {
    /* `height:100%` con `min-height` de red, y no un alto fijo: cuando el mapa
       vive en una columna que estira al lado de otra más alta —el caso normal
       en una página de contacto, con los datos al lado— llega abajo y la
       sección no queda con un pie blanco de 200 px. Y cuando va solo en su
       fila, el padre tiene alto automático, el 100 % no resuelve nada y manda
       el alto declarado, que es como se comportaba antes. */
    height: 100%;
    min-height: var(--cb-mapa-alto, 420px);
    width: 100%;
    background: #eee;                 /* mientras cargan las teselas */
    border-radius: 4px;
    z-index: 0;                       /* Leaflet usa z-index alto por dentro */
}

/* El pin: un círculo del color de marca con un punto blanco, dibujado con CSS
   para no pedir ninguna imagen (el marcador de Leaflet trae dos PNG). */
.cb-mapa__pin {
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--accent, #752767);
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.cb-mapa__pin::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 9px 0 0 9px;
    border-radius: 50%;
    background: #fff;
}

/* La ficha que sale al pinchar. Hereda la tipografía del tema. */
.cb-mapa .leaflet-popup-content-wrapper {
    border-radius: 4px;
}
.cb-mapa .leaflet-popup-content {
    margin: 14px 16px;
    font-size: 15px;
    line-height: 1.55;
}
.cb-mapa__sede {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 16px;
    color: var(--contrast, #1b1b1b);
}
.cb-mapa__dato {
    margin: 2px 0 0;
}
.cb-mapa__dato a {
    color: var(--accent-2, #5c1e51);
    text-decoration: underline;       /* que no dependa solo del color */
}

/* El aviso de que hay que pulsar para ampliar con la rueda: el mapa no secuestra
   el scroll de la página, que en el móvil es lo que más molesta. */
.cb-mapa .leaflet-control-attribution {
    font-size: 11px;
}

/* Los botones para saltar de una sede a otra (solo salen si hay más de una).
   Con dos sedes a 90 km, encuadrar las dos deja un mapa donde no se lee ninguna
   calle: mejor abrir en la principal y poder cambiar.

   Van arriba a la derecha, que es donde Leaflet pone siempre lo de elegir capa
   y donde no le disputan el sitio a la atribución —abajo a la derecha se leían
   como un control accesorio del tamaño del zoom, cuando cambiar de sede es la
   acción principal de este mapa—. */
.cb-mapa__sedes {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}
.cb-mapa__btn {
    appearance: none;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    color: var(--contrast, #1b1b1b);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    /* El alto sale de aquí: con 12 px arriba y abajo cada botón mide ~41, que es
       lo mínimo que se pulsa bien con el dedo. Ensanchar no vale: en un móvil de
       390 px la barra ya se come una esquina del mapa. */
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
}
.cb-mapa__btn:last-child { border-bottom: 0; }
.cb-mapa__btn:hover,
.cb-mapa__btn:focus-visible {
    background: var(--accent, #752767);
    color: #fff;
}
/* La sede que se está viendo, marcada: así el mapa dice en qué ciudad estás sin
   que haya que reconocer la calle. */
.cb-mapa__btn[aria-pressed="true"] {
    background: var(--accent, #752767);
    color: #fff;
}
.cb-mapa__btn--todas {
    font-weight: 400;
    font-size: 12px;
}

/* Leaflet pinta los controles (z-index 800) por encima de los popups (700): con
   los botones de sede en una esquina, la ficha abierta salía por debajo y perdía
   la última línea. La ficha es lo que se está leyendo: va delante. */
.cb-mapa .leaflet-popup-pane { z-index: 810; }

/* --- RESPALDO: lo que se ve si Leaflet no llega a arrancar ---------------
   JavaScript cortado, un bloqueador que se lleva el script o una red que no
   alcanza las teselas dejaban un recuadro gris y punto: el visitante no sabía
   ni dónde está el negocio. Ahora en ese hueco se lee la dirección y hay un
   enlace al mapa. En cuanto Leaflet arranca, añade `leaflet-container` al div
   y esto desaparece. */
.cb-mapa__respaldo {
    /* El plano estático va AQUÍ, no de fondo del contenedor: si estuviera detrás
       del mapa interactivo se verían los dos a la vez mientras carga, con las
       calles descuadradas. Esto solo aparece cuando Leaflet no arranca. */
    background: var(--cb-mapa-fondo, none) center/cover no-repeat;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: .8rem; height: 100%; min-height: inherit; padding: 24px;
    text-align: center; color: var(--contrast, #222);
}
/* Sobre el plano de respaldo el texto se volvía ilegible: va en una tarjeta,
   como el logotipo sobre una foto oscura. */
.cb-mapa__respaldo > * {
    background: rgba(255, 255, 255, .93);
    padding: .7rem 1.1rem; border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.cb-mapa__respaldo ul { list-style: none; margin: 0; padding: 0; line-height: 1.6; }
.cb-mapa__respaldo li + li { margin-top: .7rem; }
.cb-mapa.leaflet-container .cb-mapa__respaldo { display: none; }


/* «Cómo llegar»: hereda el color del sitio, sin colores propios, para que cada
   web lo vista con lo suyo. */
.cb-mapa__acciones { margin: 1rem 0 0; text-align: center; }
.cb-mapa__ir {
	display: inline-block; padding: 11px 26px;
	border: 1px solid currentColor; border-radius: 2px;
	font-size: .92rem; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; text-decoration: none;
}