/**
 * Estilos del mapa de corresponsales en el front (shortcode y widget de
 * Elementor). Paleta y tipografía tomadas del sitio real de Cambilex
 * (wp-content/themes/cambilex/dist/styles/main.css), para que el listado de
 * departamentos y las tarjetas de corresponsales se vean igual que en
 * https://cambilex.com.uy/sucursales/ — el mapa en sí es nuevo (Leaflet
 * interactivo en vez de la imagen estática/Google Maps de antes).
 *
 * Todos los colores/tamaños se leen con `var(--cbx-xxx, valor-de-acá)`: el
 * segundo valor es el que se usa siempre que nadie pise esa variable desde
 * afuera. El widget de Elementor (ver `class-elementor-widget.php`) puede
 * pisarlas envolviendo el bloque en un `<div style="--cbx-color-acento:...">`
 * — como son custom properties, se heredan hacia adentro sin tener que
 * tocar este archivo. Si el widget no define ninguna, todo se ve
 * exactamente igual que si esta sección no existiera.
 */

.cbx-mapa-corresponsales {
	font-family: var( --cbx-fuente-texto, "Helvetica Neue", Helvetica, Arial, sans-serif );
	color: var( --cbx-color-texto, #333 );
	margin: 20px 0;
}

/* Botón "Mostrar los más cercanos" + mensaje de geolocalización */

.cbx-geolocalizacion {
	/* --cbx-geo-display: lo pisa el control "Ocultar botón..." del widget
	   de Elementor con `none`; si no se tocó, sigue siendo flex. */
	display: var( --cbx-geo-display, flex );
	margin: 0 0 15px;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.cbx-boton-mas-cercanos {
	cursor: pointer;
	padding: 8px 14px;
	border: 1px solid var( --cbx-color-acento, #d31145 );
	border-radius: 2px;
	background: #fff;
	color: var( --cbx-color-acento, #d31145 );
	font-size: 13px;
	font-weight: bold;
}

.cbx-boton-mas-cercanos:hover,
.cbx-boton-mas-cercanos:focus {
	background: var( --cbx-color-acento, #d31145 );
	color: #fff;
}

.cbx-mensaje-geo {
	font-size: 12px;
	color: #777;
}

/* Layout general: columna angosta de departamentos + columna principal */

.cbx-cuerpo {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.cbx-columna-departamentos {
	flex: 0 0 220px;
	max-width: 100%;
}

.cbx-columna-principal {
	flex: 1 1 480px;
	min-width: 0; /* evita que el mapa desborde el flex item */
}

/* Filtro de departamentos: mismo estilo que `.departamentos-list` original */

.cbx-lista-departamentos {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: auto;
}

.cbx-item-departamento {
	padding: 10px;
	background-color: var( --cbx-color-fondo-item, #f2f0f0 );
	border-bottom: 1px solid var( --cbx-color-borde, #ccc );
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	font-size: 14px;
}

.cbx-item-departamento:hover {
	background-color: #fff;
}

.cbx-item-departamento.cbx-activo {
	background: #fff;
	color: var( --cbx-color-acento, #d31145 );
	font-weight: 700;
}

/* Mapa */

.cbx-mapa {
	/* --cbx-mapa-alto: lo pisa el control "Alto del mapa" del widget. */
	height: var( --cbx-mapa-alto, 420px );
	margin-bottom: 15px;
	z-index:0;
}

/* Encabezado del listado: nombre del departamento + "Corresponsales" */

.cbx-encabezado-listado {
	margin-bottom: 10px;
}

.cbx-titulo-departamento {
	font-family: var( --cbx-fuente-titulos, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif );
	font-weight: 700;
	font-size: 26px;
	margin: 0 0 0;
	color: var( --cbx-color-texto, #333 );
}

.cbx-subtitulo-listado {
	font-family: var( --cbx-fuente-titulos, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif );
	font-weight: 300;
	font-size: 19px;
	margin: 0;
	color: #666;
}

/* Listado de corresponsales: tarjetas en grilla de 2 columnas, igual que
   el sitio original (`col-md-6` por corresponsal) */

.cbx-lista-corresponsales {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* --cbx-columnas-tarjetas: lo pisa el control "Columnas de las
	   tarjetas" del widget (1 o 2). */
	grid-template-columns: repeat( var( --cbx-columnas-tarjetas, 2 ), 1fr );
	gap: 0 20px;
}

.cbx-item-corresponsal {
	border: 1px solid var( --cbx-color-borde, #ccc );
	background: #fff;
	padding: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.cbx-item-corresponsal.cbx-activo {
	background-color: var( --cbx-color-acento, #d31145 );
	border-color: var( --cbx-color-acento, #d31145 );
	color: #fff;
}

.cbx-item-corresponsal.cbx-activo .cbx-direccion-corresponsal,
.cbx-item-corresponsal.cbx-activo .cbx-telefono-corresponsal,
.cbx-item-corresponsal.cbx-activo .cbx-horario-corresponsal,
.cbx-item-corresponsal.cbx-activo .cbx-responsable-corresponsal,
.cbx-item-corresponsal.cbx-activo .cbx-distancia {
	color: #fff;
}

.cbx-item-corresponsal.cbx-sin-ubicacion {
	cursor: not-allowed;
	opacity: 0.6;
}

.cbx-nombre-corresponsal {
	margin: 0;
	font-family: var( --cbx-fuente-titulos, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif );
	font-size: 16px;
	font-weight: 700;
}

.cbx-distancia {
	display: inline-block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: normal;
	color: var( --cbx-color-acento, #d31145 );
}

.cbx-direccion-corresponsal,
.cbx-telefono-corresponsal,
.cbx-horario-corresponsal,
.cbx-responsable-corresponsal {
	margin: 4px 0 0;
	font-size: 13px;
	color: #555;
	white-space: pre-line;
}

.cbx-boton-como-ir {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 2px;
	background: var( --cbx-color-acento, #d31145 );
	color: #fff;
	text-decoration: none;
}

.cbx-boton-como-ir:hover,
.cbx-boton-como-ir:focus {
	background: #a80d37;
	color: #fff;
}

.cbx-item-corresponsal.cbx-activo .cbx-boton-como-ir {
	background: #fff;
	color: var( --cbx-color-acento, #d31145 );
}

.cbx-cargando,
.cbx-lista-vacia,
.cbx-error {
	grid-column: 1 / -1;
	padding: 10px 4px;
	font-size: 13px;
	color: #777;
}

/* Popup del mapa */

.cbx-popup-corresponsal {
	font-family: var( --cbx-fuente-texto, "Helvetica Neue", Helvetica, Arial, sans-serif );
	font-size: 13px;
	line-height: 1.4;
}

/* Responsive: apilar en mobile */

@media ( max-width: 768px ) {
	.cbx-columna-departamentos {
		flex: 1 1 100%;
	}

	.cbx-lista-corresponsales {
		grid-template-columns: 1fr;
	}

	.cbx-mapa {
		height: 320px;
		z-index:0;
	}
}