/* Equipaments a prop: mapa a pantalla completa; plafó sota el mapa al mòbil i a la dreta a pantalla ampla. Sense estils en línia. */
:root {
  --text: #1a1a1a;
  --suau: #4a4a4a;
  --fons: #ffffff;
  --linia: #c9ced6;
  --accent: #0b3d6b;
  --accent-fons: #e6eef7;
  --focus: #0b3d6b;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--fons); }
a { color: var(--accent); }
h1 { font-size: 1.25rem; margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#mapa:focus-visible { outline-offset: -3px; }

.salta { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--accent); color: #fff; padding: 12px 16px; border-radius: 4px; }
.salta:focus { top: 8px; }

.sr-nomes, .sr-etiqueta, .ajuda-mapa {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app { display: flex; flex-direction: column; height: 100dvh; }
.mapa-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
#mapa { position: absolute; inset: 0; background: #e8ecef; }

.atribucio {
  position: absolute; left: 0; bottom: 0; z-index: 800; margin: 0; padding: 2px 8px; font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.9); color: var(--text);
}
.avis-mapa {
  position: absolute; bottom: 28px; left: 8px; right: 8px; z-index: 900; margin: 0; padding: 8px 12px; font-size: 0.875rem;
  background: #fff4cc; border: 1px solid #8a6d00; border-radius: 4px;
}

/* La barra de cerca (PRD-03): germana de #mapa, a dalt, a la dreta dels controls de zoom; per sobre dels 1000 de Leaflet */
.barra {
  position: absolute; top: 8px; left: 64px; right: 8px; z-index: 1100; padding: 4px; background: #fff;
  border: 1px solid var(--linia); border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.barra-fila { display: flex; gap: 6px; }
.camp {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--text);
  background: #fff; border: 1px solid #5a6270; border-radius: 6px;
}
.boto-ubicacio { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; }
.ico-ubicacio { width: 22px; height: 22px; background: url(../icones/ubicacio.svg) center / contain no-repeat; }
.suggeriments {
  list-style: none; margin: 4px 0 0; padding: 0; max-height: 45dvh; overflow-y: auto;
}
.opcio-sug {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; cursor: pointer; border-radius: 6px;
}
.opcio-sug:hover { background: var(--accent-fons); }
.opcio-sug.activa { background: var(--accent-fons); outline: 3px solid var(--focus); outline-offset: -3px; }
.sug-mes, .sug-buit { margin: 4px 4px 2px; font-size: 0.875rem; color: var(--suau); }
.barra .missatge { margin: 4px 0 0; font-size: 0.875rem; }
.avis-ubicacio { margin: 4px 4px 2px; font-size: 0.8125rem; line-height: 1.3; color: var(--suau); }

/* La identificació de la web de prova (PRD-00 A-11): sempre a la vista, també amb el plafó tancat */
.peu-titular { flex: none; margin: 0; padding: 0 12px 4px; font-size: 0.8125rem; }
.peu-titular a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 479px) {
  .bt-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .boto-ubicacio { min-width: 44px; justify-content: center; }
}

/* Els controls de zoom de Leaflet, a 44 px */
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
.leaflet-touch .leaflet-bar a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.leaflet-control-zoom a { font-size: 22px; }

.plafo { flex: 0 0 auto; display: flex; flex-direction: column; background: var(--fons); border-top: 1px solid var(--linia); max-height: 62dvh; }
.plafo-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.resum { margin: 0; font-size: 0.875rem; color: var(--suau); }
.alterna {
  min-height: 44px; min-width: 44px; padding: 0 12px; font: inherit; font-size: 0.875rem; color: var(--accent);
  background: var(--accent-fons); border: 1px solid var(--accent); border-radius: 6px; cursor: pointer;
}

.cos { display: none; overflow-y: auto; padding: 0 12px 12px; }
.plafo-obert .cos { display: block; }

.indicacio { margin: 0 0 12px; font-size: 0.9375rem; }
.grup { border: 0; margin: 0 0 12px; padding: 0; }
.grup legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.opcions { display: flex; flex-wrap: wrap; gap: 6px; }
.opcio {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--linia);
  border-radius: 6px; cursor: pointer; background: #fff;
}
.opcio input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.opcio:has(input:checked) { border-color: var(--accent); background: var(--accent-fons); }
.opcio:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Les icones de cada tipus (PRD-01 A-9): un fitxer per tipus a /icones/, el CSS només en tria un */
.t-biblioteca { --icona: url(../icones/biblioteca.svg); }
.t-centre_civic { --icona: url(../icones/centre_civic.svg); }
.t-cap { --icona: url(../icones/cap.svg); }
.t-poliesportiu { --icona: url(../icones/poliesportiu.svg); }
.t-escola_bressol { --icona: url(../icones/escola_bressol.svg); }
.mostra, .marcador::after { background: var(--icona) center / contain no-repeat; }
.mostra { flex: none; width: 22px; height: 22px; }

/* Marcadors del mapa: .marcador és la zona de clic (transparent) i ::after el disc visible */
.marcador { --z: 30px; --d: 30px; width: var(--z); height: var(--z); margin: calc(var(--z) / -2) 0 0 calc(var(--z) / -2); }
.marcador::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
}
@media (pointer: coarse) { .marcador { --z: 44px; } }
.mapa-dens .marcador { --z: 24px; --d: 24px; }
.marcador.sel { --d: 38px; }
.mapa-dens .marcador.sel { --d: 32px; }
.leaflet-punter-pane { z-index: 640; pointer-events: none; }
.tt-nom, .tt-tipus { display: block; }
.tt-tipus { font-size: 0.75rem; color: var(--suau); }

.missatge { margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid var(--accent); background: var(--accent-fons); }
.missatge p { margin: 0 0 8px; }
.missatge[role="alert"] { border-left-color: #a40000; background: #fdecec; }
.boto {
  min-height: 44px; padding: 0 16px; font: inherit; color: #fff; background: var(--accent); border: 0; border-radius: 6px; cursor: pointer;
}

.llista { list-style: none; margin: 0 0 12px; padding: 0; }
.llista li + li { margin-top: 4px; }
.item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; font: inherit; text-align: left;
  color: var(--text); background: #fff; border: 1px solid var(--linia); border-radius: 6px; cursor: pointer;
}
.item:hover, .item.sel { background: var(--accent-fons); border-color: var(--accent); }
.item-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.item-nom { font-weight: 600; overflow-wrap: anywhere; }
.item-tipus { font-size: 0.8125rem; color: var(--suau); }
.item-dist { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }

/* La fitxa (PRD-02): <dialog> natiu; a pantalla estreta, tota la pantalla */
.fitxa {
  width: min(560px, 92vw); max-height: 90dvh; margin: auto; padding: 0 16px 16px; overflow-y: auto;
  color: var(--text); background: #fff; border: 1px solid var(--linia); border-radius: 8px;
}
.fitxa::backdrop { background: rgba(0, 0, 0, 0.5); }
.tanca {
  position: sticky; top: 0; display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; margin: 0 0 0 auto;
  padding: 0 12px; font: inherit; color: var(--accent); background: #fff; border: 1px solid var(--accent); border-radius: 6px; cursor: pointer;
}
.tanca [aria-hidden] { font-size: 1.5rem; line-height: 1; }
.fitxa h2 { margin: 8px 0 12px; font-size: 1.25rem; overflow-wrap: anywhere; }
.fitxa-nom, .fitxa-tipus { display: block; }
.fitxa-tipus { font-size: 0.875rem; font-weight: 400; color: var(--suau); }
.fitxa section { margin: 0 0 16px; }
.fitxa h3 { margin: 0 0 6px; font-size: 1rem; }
.fitxa h4 { margin: 8px 0 4px; font-size: 0.9375rem; }
.fitxa p { margin: 0 0 6px; }
.adreca { margin: 0; }
.adreca div { display: flex; gap: 8px; }
.adreca dt { flex: 0 0 7rem; color: var(--suau); }
.adreca dd { margin: 0; overflow-wrap: anywhere; }
.files, .telefons { list-style: none; margin: 0; padding: 0; }
.files li { margin: 0 0 8px; }
.files .dies { font-weight: 600; }
.files .dies:not(:empty)::after { content: ": "; }
.files .obs { display: block; font-size: 0.875rem; color: var(--suau); }
.telefons a, .fitxa section p a { display: inline-block; padding: 10px 0; min-height: 44px; }
.fitxa .boto { display: inline-flex; align-items: center; padding: 0 16px; color: #fff; text-decoration: none; }
.nota { font-size: 0.8125rem; color: var(--suau); }

@media (max-width: 899px) {
  .fitxa { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
}

.peu { font-size: 0.8125rem; color: var(--suau); }
.peu p { margin: 0 0 4px; }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .plafo { flex: 0 0 400px; width: 400px; max-height: none; height: 100%; border-top: 0; border-left: 1px solid var(--linia); }
  .alterna { display: none; }
  .cos { display: block; flex: 1 1 auto; }
  .avis-mapa { left: 60px; right: auto; max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .leaflet-zoom-anim .leaflet-zoom-animated, .leaflet-fade-anim .leaflet-tile { transition: none; }
}