/* ==========================================================================
   Mapa de selección de zonas (mapa.html)
   --------------------------------------------------------------------------
   Tres piezas: la barra de arriba con el buscador, el panel de zonas elegidas
   a la izquierda y el lienzo del mapa. Todo el color sale de tokens.css; la
   única excepción es el magenta de la selección, que es el color propio de la
   cartografía y no pertenece a la paleta de marca.
   ========================================================================== */

.pagina-mapa {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------- barra ---- */
.mz-barra {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 10px var(--s-5);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  z-index: 30;
}
.mz-titulo {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
  white-space: nowrap;
}
.mz-cancelar {
  margin-left: auto;
  color: var(--c-brand-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.mz-cancelar:hover { text-decoration: underline; }

/* ------------------------------------------------------------- buscador ---- */
.mz-buscador {
  position: relative;
  flex: 0 1 520px;
  margin-inline: auto;
}
.mz-buscador__lupa {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-ink-400);
  pointer-events: none;
}
.mz-buscador input {
  width: 100%;
  height: 40px;
  padding: 0 var(--s-4) 0 38px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink-900);
}
.mz-buscador input::placeholder { color: var(--c-ink-400); }
.mz-buscador input:focus {
  outline: none;
  border-color: var(--c-brand-400);
  box-shadow: 0 0 0 3px var(--c-brand-100);
}
.mz-buscador input::-webkit-search-cancel-button { display: none; }

.mz-sugerencias {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md, 0 10px 30px rgba(20,24,27,.14));
  max-height: 340px;
  overflow-y: auto;
  z-index: 40;
}
.mz-sugerencias li { margin: 0; }
.mz-sugerencias button {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--c-ink-900);
  text-align: left;
  cursor: pointer;
}
.mz-sugerencias button:hover,
.mz-sugerencias button[aria-selected="true"] { background: var(--c-brand-050); }
.mz-sugerencias b { font-weight: 600; }
.mz-sugerencias small { color: var(--c-ink-500); font-size: var(--fs-xs); }
.mz-sugerencias .mz-yaesta { margin-left: auto; color: var(--c-brand-700); font-size: var(--fs-xs); }

/* --------------------------------------------------------------- cuerpo ---- */
.mz-cuerpo { display: flex; flex: 1; min-height: 0; }
.mz-lienzo { position: relative; flex: 1; min-width: 0; }
.mz-mapa { position: absolute; inset: 0; }
.mz-mapa .maplibregl-canvas { cursor: default; }
.mz-mapa.mz-dedo .maplibregl-canvas { cursor: pointer; }
.mz-mapa.mz-lapiz .maplibregl-canvas { cursor: crosshair; }
.maplibregl-ctrl-attrib { font-size: 11px; }

/* ---------------------------------------------------------------- panel ---- */
.mz-panel {
  width: 340px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-right: 1px solid var(--c-line);
  z-index: 10;
}
.mz-panel__cabecera {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
}
.mz-panel__cabecera h2 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink-900);
}
.mz-panel__cabecera svg { color: var(--c-ink-500); }
.mz-enlace {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-brand-700);
  cursor: pointer;
}
.mz-enlace:hover { text-decoration: underline; }

.mz-lista {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: var(--s-2) 0;
  list-style: none;
}
.mz-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
}
.mz-item__nombre { font-weight: 600; color: var(--c-ink-900); }
.mz-item__ambito {
  color: var(--c-ink-500);
  font-weight: 400;
  font-size: var(--fs-xs);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mz-item__salvedad {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-warn);
  white-space: nowrap;
}
.mz-item__quitar {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--c-ink-400);
  cursor: pointer;
}
.mz-item__salvedad + .mz-item__quitar { margin-left: var(--s-2); }
.mz-item__quitar:hover { background: var(--c-accent-soft); color: var(--c-accent); }

.mz-vacio {
  padding: var(--s-4);
  margin: 0;
  color: var(--c-ink-500);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.mz-panel__pie { padding: var(--s-4); border-top: 1px solid var(--c-line); }

/* ------------------------------------------------------- controles mapa ---- */
.mz-dibujar {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 38px;
  padding-inline: var(--s-4);
  border: 1px solid #E4BBD4;
  border-radius: var(--r-sm);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #8A1B60;
  cursor: pointer;
}
.mz-dibujar:hover { background: #FBEFF6; }
.mz-dibujar[aria-pressed="true"] { background: #8A1B60; border-color: #8A1B60; color: var(--c-white); }

.mz-trazo { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

/* El zoom de MapLibre vive en la esquina superior derecha, que ya ocupa el
   botón de dibujar: se baja para quedar justo debajo de él. */
.mz-lienzo .maplibregl-ctrl-top-right { top: 48px; }

.mz-nivel {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 10;
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-sm);
  font-size: var(--fs-xs);
  color: var(--c-ink-600);
}

.mz-saltos, .mz-vista {
  position: absolute;
  z-index: 10;
  display: flex;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.mz-saltos { left: var(--s-4); bottom: var(--s-6); }
.mz-vista { right: var(--s-4); bottom: var(--s-6); }
.mz-saltos button, .mz-vista button {
  border: 0;
  background: var(--c-white);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-700);
  cursor: pointer;
}
.mz-saltos button + button, .mz-vista button + button { border-left: 1px solid var(--c-line); }
.mz-saltos button:hover, .mz-vista button:hover { background: var(--c-brand-050); color: var(--c-brand-700); }
.mz-vista button[aria-pressed="true"] { background: var(--c-ink-900); color: var(--c-white); }

/* ------------------------------------------------------------ etiquetas ---- */
.mz-etiquetas { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.mz-etiqueta {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800;
  color: var(--c-ink-900);
  white-space: nowrap;
  letter-spacing: -.01em;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.92), 1px -1px 0 rgba(255,255,255,.92),
    -1px 1px 0 rgba(255,255,255,.92), 1px 1px 0 rgba(255,255,255,.92),
    0 0 7px rgba(255,255,255,.95);
}
.mz-etiqueta--provincias { font-size: 15.5px; }
.mz-etiqueta--comarcas { font-size: 13.5px; }
.mz-etiqueta--municipios { font-size: 12.5px; font-weight: 700; }
.mz-etiqueta--barrios, .mz-etiqueta--zonas { font-size: 11.5px; font-weight: 700; }

/* Sobre la ortofoto los nombres van en claro con halo oscuro */
.mz-satelite .mz-etiqueta {
  color: var(--c-white);
  text-shadow:
    -1px -1px 0 rgba(10,14,17,.85), 1px -1px 0 rgba(10,14,17,.85),
    -1px 1px 0 rgba(10,14,17,.85), 1px 1px 0 rgba(10,14,17,.85),
    0 0 7px rgba(10,14,17,.9);
}
.mz-satelite .mz-nivel { background: rgba(20,24,27,.78); border-color: rgba(255,255,255,.25); color: #E9EDF0; }
.mz-satelite .maplibregl-ctrl-attrib { background: rgba(255,255,255,.85); }

/* ---------------------------------------------------------------- móvil ---- */
@media (max-width: 900px) {
  .mz-cuerpo { flex-direction: column-reverse; }
  .mz-panel {
    width: auto;
    max-height: 44vh;
    border-right: 0;
    border-top: 1px solid var(--c-line);
  }
  .mz-barra { flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: 8px var(--s-4); }
  .mz-buscador { order: 3; flex: 1 1 100%; margin: 0; }
  .mz-dibujar span { display: none; }
  .mz-etiqueta--provincias { font-size: 13px; }
  .mz-etiqueta--municipios { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .pagina-mapa * { transition: none !important; }
}

/* --- rótulo del total y salto al listado (vista de mapa) -------------------- */
.mz-total {
  position: absolute;
  top: .8rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(22rem, 40vw);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 20;
  margin: 0;
  padding: .4rem .9rem;
  font-size: .86rem;
  font-weight: 600;
  color: #fff;
  background: rgba(22, 32, 42, .88);
  border-radius: 999px;
  white-space: nowrap;
}
.mz-listado {
  position: absolute;
  top: calc(.8rem + 38px + .5rem);   /* justo debajo de «Dibujar tu zona» */
  right: .8rem;
  z-index: 20;
  padding: .45rem .95rem;
  font-size: .86rem;
  font-weight: 700;
  color: #14649D;
  background: #fff;
  border: 1px solid #C7D9E7;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px -6px rgba(16, 42, 66, .4);
}
.mz-listado:hover { background: #F2F8FD; }

/* ficha emergente de una chincheta */
.chincheta { display: grid; gap: .1rem; text-decoration: none; color: #23303B; min-width: 9rem; }
.chincheta strong { font-size: 1rem; color: #0B4F82; }
.chincheta span { font-size: .82rem; color: #6C7A87; }
.chincheta__donde { font-size: .78rem; color: #14649D; }
.chincheta__donde.es-aproximada { color: #8A7300; font-style: italic; }


/* En pantallas estrechas los dos botones comparten fila abajo, donde no
   estorban al mapa ni se tapan entre sí. */
@media (max-width: 48rem) {
  .mz-listado {
    top: auto;
    bottom: .8rem;
    right: .8rem;
  }
  .mz-total { top: .6rem; font-size: .78rem; padding: .3rem .7rem; }
}


/* --- filtros dentro del mapa ------------------------------------------------- */

@media (max-width: 48rem) {
  .mz-filtros { width: calc(100vw - 1.6rem); }
  .mz-total { top: auto; bottom: 3.6rem; }
}


/* ==========================================================================
   Menús invertidos: los FILTROS ocupan la barra lateral y las ZONAS quedan
   como una pastilla plegable sobre el mapa (al estilo de los portales).
   ========================================================================== */

/* --- filtros en la barra lateral -------------------------------------------- */
.mz-panel--filtros { display: flex; flex-direction: column; min-height: 0; }
.mz-panel--filtros .mz-panel__titulo { margin: 0; font-size: 1rem; }
.mz-panel--filtros .filtros__form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
  border-top: 0;
  padding: .9rem 1rem 1.1rem;
  gap: .8rem;
}
.mz-panel--filtros .campo__etiqueta { font-size: .82rem; }
.mz-panel--filtros .filtro__select,
.mz-panel--filtros .filtro__num { font-size: .9rem; padding: .5rem .6rem; }
.mz-panel--filtros .filtros__pie {
  position: sticky;
  bottom: 0;
  padding-top: .6rem;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 30%);
}

/* --- zonas como pastilla plegable -------------------------------------------- */
.mz-zonas {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 25;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
  background: #fff;
  border: 1px solid #DFE9F2;
  border-radius: 999px;
  box-shadow: 0 6px 20px -10px rgba(16, 42, 66, .45);
  overflow: hidden;
}
.mz-zonas[open] { border-radius: 14px; width: min(20rem, calc(100vw - 2rem)); }
.mz-zonas__boton {
  padding: .5rem 1rem;
  font-size: .87rem;
  font-weight: 700;
  color: #0B4F82;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.mz-zonas__boton::-webkit-details-marker { display: none; }
.mz-zonas__boton::after { content: " ▾"; color: #7C8B99; }
.mz-zonas[open] .mz-zonas__boton::after { content: " ▴"; }
.mz-zonas__cuantas { margin-left: .35rem; color: #14649D; }
.mz-zonas__cuerpo {
  border-top: 1px solid #EDF3F8;
  padding: .5rem .7rem .7rem;
  max-height: min(55vh, 26rem);
  overflow-y: auto;
}
.mz-zonas .mz-lista { margin: 0; padding: 0; list-style: none; }
.mz-zonas .mz-vacio { font-size: .82rem; color: #6C7A87; margin: .3rem 0; }
.mz-zonas .mz-panel__pie { margin-top: .5rem; }

/* el rótulo del total se aparta de la pastilla */
.mz-total { top: .8rem; }

@media (max-width: 48rem) {
  .mz-zonas { max-width: calc(100vw - 1.6rem); }
  .mz-zonas[open] { width: calc(100vw - 1.6rem); }
}


/* --- filtros dentro de la barra lateral del mapa ----------------------------
   Usan las mismas clases que el listado (.filtro, .filtro__casilla…), así que
   basta con ajustar el alto y el desplazamiento dentro del panel.
   -------------------------------------------------------------------------- */
.mz-panel--filtros { display: flex; flex-direction: column; min-height: 0; }
.mz-panel--filtros .filtros__form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 1rem;
  padding: .9rem 1rem 1.1rem;
}
.mz-panel--filtros .filtros__pie {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: .4rem;
  padding: .7rem 0 .2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 30%);
}
.mz-panel--filtros .filtros__pie .boton,
.mz-panel--filtros .filtros__pie .boton-fino { text-align: center; text-decoration: none; }


/* Número de inmuebles de cada zona, en el panel de selección. */
.mz-item__cuantos {
  margin-left: auto;
  padding: .05rem .45rem;
  font-size: .78rem;
  font-weight: 700;
  color: #14649D;
  background: #EAF3FA;
  border-radius: 999px;
}