/* === TEMA GLOBAL: MAPES EN LÍNIA === */

:root {
  /* Paleta cromàtica */
  --color-fons-app: #F7F7F8;
  --color-panell: #FFFFFF;
  --color-text-principal: #1F2937;
  --color-text-secundari: #4B5563;
  --color-borde: #E5E7EB;
  --color-accent: #2563EB;
  --color-accent-secundari: #0EA5E9;

  /* Propietats comunes */
  --radius-suau: 8px;
  --ombra-suau: 0 4px 16px rgba(0,0,0,0.08);
  --font-base: "Inter", "Source Sans 3", sans-serif;
  --font-mida-base: 15px;
  --font-mida-titol: 17px;
}

/* === ESTIL GENERAL DEL MAPA === */
html, body, #map {
  font-family: var(--font-base);
  font-size: var(--font-mida-base);
  background-color: var(--color-fons-app);
  color: var(--color-text-principal);
}

/* === BOTONS === */
.ol-control button,
.custom-control button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  background: var(--color-panell);
  color: var(--color-text-principal);
  box-shadow: var(--ombra-suau);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

/* Efecte al passar el ratolí */
.ol-control button:hover {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
}

/* Elimina fondo y transparencias de todos los controles OpenLayers */
.ol-control {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Asegura que los botones individuales sean los únicos visibles */
.ol-control > button,
.ol-control > div > button {
  background-color: var(--color-panell) !important;
  border: 1px solid var(--color-borde) !important;
  box-shadow: var(--ombra-suau) !important;
  opacity: 1 !important;
}



/* === QUADRES DE MISSATGE / POPUPS === */
.custom-panel, .info-message {
  background: var(--color-panell);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-suau);
  box-shadow: var(--ombra-suau);
  color: var(--color-text-principal);
  font-size: 0.95rem;
  padding: 12px 16px;
}

/* === TEXTOS === */
strong {
  color: var(--color-accent);
  font-weight: 600;
}

/* === LIMPIEZA FINAL DE CONTENEDORES OL === */
.ol-overlaycontainer-stopevent,
.ol-overlaycontainer {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Refresca el agrupador de controles */
.ol-zoom, .ol-rotate, .ol-scale-line, .ol-overviewmap, .ol-attribution {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Forzar opacidad total y eliminar overlay */
.ol-control, .ol-control * {
  opacity: 1 !important;
}




/* === BLOQUE DEFINITIVO: eliminar fondo translúcido de todos los controles OL y QGIS2WEB === */

/* 1. Contenedor de controles principal */
.ol-unselectable.ol-control {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. Subcontenedores generados por qgis2web (zoom, medida, búsqueda, etc.) */
.ol-zoom,
.ol-zoomslider,
.ol-rotate,
.ol-overviewmap,
.ol-attribution,
.ol-layerswitcher,
.ol-scale-line {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3. Elementos hijos (botones) */
.ol-control > *,
.ol-control > div,
.ol-control button,
.ol-control div button {
  background: var(--color-panell) !important;
  border: 1px solid var(--color-borde) !important;
  border-radius: 6px !important;
  box-shadow: var(--ombra-suau) !important;
  padding: 0 !important;
  opacity: 1 !important;
}

/* === OCULTAR CONTROLES NATIVOS DE OPENLAYERS (QGIS2WEB) === */
/* Zoom, rotación, escala, atribución y mapa de vista previa */
.ol-zoom,
.ol-zoomslider,
.ol-rotate,
.ol-scale-line,
.ol-attribution,
.ol-overviewmap {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* === OCULTAR CONTROLES DE MEDICIÓN Y GEOLOCALIZACIÓN (QGIS2WEB) === */
/* Controles añadidos automáticamente por Qgis2web */
.ol-control.measure-control,
.ol-control.ol-measure,
.ol-control.locate-control,
.ol-control.ol-locate,
.ol-control.ol-control-geolocation,
.ol-control.ol-geolocation,
.ol-control.ol-myposition,
.ol-control.myposition-control,
.ol-control.locate,
.ol-unselectable.ol-control.geolocate,
.ol-control.geolocate,
.geolocate-button.fa-map-marker {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}