/* ===== Mapa interactiu ===== */
.map-section { padding: 1rem 0 3rem; }
.map-shell { display: flex; gap: 1.25rem; align-items: stretch; }
.map-wrap {
  position: relative; isolation: isolate; z-index: 0; flex: 1 1 auto; min-width: 0;
  border-radius: 1rem; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
#map { width: 100%; height: 72vh; min-height: 420px; background: var(--card-bg); }

.map-status {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  background: var(--dark-blue); color: var(--text-secondary);
  font-weight: 600; z-index: 2;
}
.map-status.is-error { color: #ffd7d0; }
.map-status.is-hidden { display: none; }

.map-legend {
  flex: 0 0 240px; background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem;
  padding: 1.1rem 1.1rem 1.25rem; max-height: 72vh; overflow-y: auto;
}
.map-legend-title {
  margin: 0 0 0.85rem; font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}

.legend-group { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.legend-group:last-child { border-bottom: 0; }
.legend-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; }
.legend-head input {
  accent-color: var(--primary-orange); width: 1.05rem; height: 1.05rem;
  flex: 0 0 auto; cursor: pointer;
}
.legend-swatch {
  width: 0.85rem; height: 0.85rem; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.legend-swatch.is-line { border-radius: 2px; height: 0.35rem; }
.legend-name {
  flex: 1 1 auto; text-align: left; background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 0.95rem; line-height: 1.25;
  color: var(--text-primary); cursor: pointer;
}
.legend-name:hover { color: var(--gold); }
.legend-count { color: var(--text-secondary); font-size: 0.8rem; }
.legend-caret {
  flex: 0 0 auto; color: var(--text-secondary); font-size: 0.85rem;
  cursor: pointer; transition: transform 0.15s ease;
}
.legend-group.is-open .legend-caret { transform: rotate(90deg); }

.legend-sublist {
  list-style: none; margin: 0 0 0.5rem 0.5rem; padding: 0 0 0 0.85rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.legend-subitem {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 0.3rem 0.45rem; border-radius: 0.4rem; font-family: inherit;
  font-size: 0.85rem; line-height: 1.3; color: var(--text-secondary); cursor: pointer;
}
.legend-subitem:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }

/* Finestra d'informació (InfoWindow) */
.map-info { max-width: 260px; color: #14181f; }
.map-info-title { margin: 0 0 0.35rem; font-size: 1rem; color: #0a0a0a; }
.map-info-desc {
  font-size: 0.85rem; line-height: 1.4; max-height: 180px; overflow-y: auto; color: #333;
}
.map-info-desc br { line-height: 1.6; }
.map-info-dir {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem;
  padding: 0.45rem 0.75rem; background: var(--primary-orange); color: #fff;
  text-decoration: none; border-radius: 0.55rem; font-size: 0.82rem; font-weight: 700; line-height: 1;
}
.map-info-dir:hover { filter: brightness(1.07); }

.gm-style .gm-style-iw-c { border-radius: 0.6rem; padding-top: 0.4rem; }

@media (max-width: 860px) {
  .map-shell { flex-direction: column; }
  .map-legend { flex: 1 1 auto; max-height: 45vh; order: 2; }
  .map-wrap { order: 1; }
  #map { height: 60vh; }
}

/* ===== Mode impressió (/mapa?print=1) — export a PDF/PNG A4 ===== */
.print-mode {
  background: #fff;
  color: #14181f;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Amaga el crome de navegació (però MAI el logo/atribució de Google Maps) */
.print-mode .contact-bar,
.print-mode .header,
.print-mode .menu-toggle,
.print-mode .advice-hero,
.print-mode .footer,
.print-mode footer { display: none !important; }

.print-mode main { margin: 0; padding: 0; }
.print-mode .map-section { padding: 0; }

/* Sense llegenda: el mapa ocupa tota la pàgina (a sang) */
.print-mode .map-legend { display: none !important; }

.print-mode .map-shell {
  position: fixed;
  inset: 0;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  max-width: none;
  gap: 0;
  padding: 0;
  margin: 0;
  background: #fff;
}
.print-mode .map-wrap {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.print-mode #map { width: 100%; height: 100vh; border-radius: 0; }

/* Capa d'etiquetes HTML superposada sobre el mapa */
#print-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
#print-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.pdot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-sizing: border-box;
}
.plabel {
  position: absolute;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #1a1a1a;
  border-radius: 3px;
  color: #1a1a1a;
  font-size: 9pt;
  line-height: 1.15;
  padding: 2px 6px;
}

/* Xarxa de seguretat: mai el banner de cookies a l'export */
.print-mode .cookie-banner { display: none !important; }

/* Inserts (recuadros de detall) apilats a la cantonada inferior esquerra */
#print-inserts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.pinsert {
  position: absolute;
  width: 200px;
  height: 140px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}
.pinsert-map {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
/* Capa de badges HTML (amb anti-col·lisió) superposada al mini-mapa de l'insert */
.pinsert-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.pinsert-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.pinsert-name {
  flex: 0 0 auto;
  padding: 6px;
  font-size: 9pt;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
  background: #fff;
  white-space: normal;
  line-height: 1.2;
  min-height: 2.4em; /* reserva espai per a 2 línies a TOTES les targetes */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Dins dels inserts (i NOMÉS aquí) amaga el logo i l'atribució de Google */
.pinsert .gm-style-cc,
.pinsert .gmnoprint,
.pinsert img[alt="Google"],
.pinsert a[href^="https://maps.google.com/maps"] { display: none !important; }

/* Mapa PRINCIPAL en export: amaga els controls interactius de la franja inferior
   (botó "Tecles de drecera" — també desactivat per keyboardShortcuts:false —,
   enllaç "Informeu d'un error al mapa" i "Condicions"), apuntant a aquests
   elements concrets. NO afecta el logotip de Google (esquerra) ni el text
   d'atribució "Dades del mapa ©…", que han de quedar visibles i llegibles. */
.print-mode #map .gm-style-cc button,
.print-mode #map button.gm-control-active,
.print-mode #map a[href*="/maps/@"],
.print-mode #map a[href*="terms_maps"],
.print-mode #map a[href*="google.com/intl"][href*="terms"] { display: none !important; }

/* ===== Variant ?mode=numbers: badges numerats + llegenda estreta a la dreta ===== */
/* El mapa ocupa tota la pàgina (a sang, com .print-mode); la llegenda és una banda
   estreta superposada a la cantonada inferior DRETA, tan ampla com les columnes. */
.print-numbers .map-legend {
  display: block !important;
  position: absolute;
  right: 16px; /* anclada a la dreta amb 16px de marge; el JS fixa el `bottom` */
  bottom: 30px; /* provisional; el JS el recol·loca 8px damunt de l'atribució */
  z-index: 7;
  width: auto; /* creix cap a l'esquerra només el que ocupen les columnes */
  max-width: calc(100vw - 16px);
  height: auto;
  overflow: visible; /* acceptem banda més alta abans que retallar columnes */
  background: rgba(255, 255, 255, 0.94);
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 6px 8px;
}
.print-numbers .map-legend-title { display: none; }

/* Columnes de la banda; cada columna d'amplada fixa (les reparteix el JS). La mida
   de font base la fixa el JS a #map-legend-items (8 / 7,5 / 7pt). */
.nlegend-cols { display: flex; align-items: flex-start; gap: 12px; }
.nlegend-col { flex: 0 0 auto; width: 150px; }
.nlegend-measure { position: absolute; visibility: hidden; }

.nlegend-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: inherit;
  line-height: 1.1;
  margin: 10px 0 1px; /* separació abans de cada grup; el 1r de columna no en porta */
  break-inside: avoid;
}
.nlegend-head:first-child { margin-top: 0; }
.nlegend-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
/* Entrada de llegenda: fins a 2 línies sense retallar. Sagnia colgant: el número
   va absolut a l'esquerra i el text du padding-left = amplada del cercle + separació,
   de manera que la 2a línia s'alinea amb l'inici del TEXT, no sota el número. */
.nlegend-item {
  position: relative;
  margin: 0 0 1px;
  padding-left: 18px; /* 14px cercle + 4px separació */
  font-size: inherit;
  line-height: 1.15;
}
.nlegend-num {
  position: absolute;
  left: 0;
  top: 0;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 7.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.nlegend-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  color: #1a1a1a;
}

/* Brúixola (rosa dels vents) baix-esquerra */
.ncompass {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 3px 6px 4px;
}
.ncompass-n { font-size: 8pt; font-weight: 700; color: #333; line-height: 1; }

/* Franja de títol dels inserts (numbers): fletxa d'orientació + nom + distància */
.pinsert-orient {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 6px;
  font-size: 8pt;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pinsert-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  line-height: 0;
  transform-origin: 50% 50%;
}
.pinsert-zname { color: #1a1a1a; font-weight: 700; }
.pinsert-zkm { color: #999; }

/* Badges numerats sobre el mapa */
.nbadge {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-sizing: border-box;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}