/* ── MAPA ──────────────────────────────────────────────────────────────────
   El mapa ocupa la pantalla entera del módulo y todo lo demás flota encima.
   Es lo contrario del resto de AURORA (barra de filtros arriba, contenido
   debajo) y es deliberado: en un mapa, la superficie ES el contenido; una barra
   fija le robaría la parte de arriba justo donde se está mirando.

   LOS COLORES DEL MAPA NO ESTÁN AQUÍ. El lienzo se dibuja en WebGL, fuera del
   CSS, así que su paleta vive en aurora/mapa_estilo.py. Aquí está solo lo que
   es HTML de verdad: los pines, los paneles flotantes y el lateral. Eso sí usa
   los tokens de siempre y cambia de tema solo. */

.mp-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mp-wrap > .mod-head { padding: 18px 24px 16px; margin-bottom: 0; }

.mp-body { flex: 1; display: flex; min-height: 0; }
.mp-lienzo { position: relative; flex: 1; min-width: 0; }
#mp-mapa { position: absolute; inset: 0; background: var(--bg0); }

/* Los controles de serie de MapLibre (zoom, brújula) se ocultan: traen su
   propio lenguaje visual y ya tenemos botones nuestros en .mp-mandos.
   LA ATRIBUCIÓN NO SE OCULTA — es la condición de usar OpenStreetMap—, solo se
   viste para que no desentone. */
.maplibregl-ctrl-top-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-bottom-left { display: none; }
.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--bg1) 82%, transparent) !important;
  color: var(--text2) !important;
  font-family: var(--font-ui) !important;
  font-size: 1rem !important;
  border-radius: var(--radius) 0 0 0;
}
.maplibregl-ctrl-attrib a { color: var(--text1) !important; }

/* ── Paneles flotantes ──
   Comparten la misma receta: fondo semitransparente con desenfoque detrás, para
   que se lea el panel sin perder del todo el mapa que tapa. */
.mp-buscador, .mp-capas, .mp-mandos, .mp-aviso {
  position: absolute; z-index: 5;
  background: color-mix(in srgb, var(--bg1) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border2); border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .55);
}

/* Buscador, arriba a la izquierda */
.mp-buscador { top: 14px; left: 14px; width: min(340px, calc(100% - 28px)); padding: 0; }
.mp-busca-caja { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.mp-busca-caja > i { color: var(--text2); font-size: 1.5rem; flex: none; }
.mp-busca-caja .finput {
  flex: 1; min-width: 0; border: none; background: none; padding: 4px 0;
}
.mp-busca-caja .finput:focus { outline: none; box-shadow: none; }
.mp-busca-x {
  background: none; border: none; color: var(--text2); cursor: pointer;
  padding: 2px 4px; font-size: 1.4rem; display: none;
}
.mp-buscador.tiene-texto .mp-busca-x { display: block; }
.mp-busca-x:hover { color: var(--text0); }

.mp-busca-res { border-top: 1px solid var(--border); max-height: 320px; overflow-y: auto; }
.mp-busca-item {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 11px; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: 1.15rem; line-height: 1.35; color: var(--text1);
}
.mp-busca-item:last-child { border-bottom: none; }
.mp-busca-item:hover { background: var(--bg2); color: var(--text0); }
.mp-busca-item i { color: var(--blue); font-size: 1.4rem; margin-top: 1px; flex: none; }
.mp-busca-item b { color: var(--text0); font-weight: 500; display: block; }
.mp-busca-item small { color: var(--text2); }
.mp-busca-vacio { padding: 12px; font-size: 1.15rem; color: var(--text2); text-align: center; }

/* Capas, arriba a la derecha */
.mp-capas { top: 14px; right: 14px; padding: 8px; width: 218px; }
.mp-capa {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: var(--radius); cursor: pointer;
  font-size: 1.15rem; color: var(--text1);
}
.mp-capa:hover { background: var(--bg2); color: var(--text0); }
.mp-capa i { color: var(--text2); font-size: 1.5rem; }
.mp-capa span { flex: 1; }
.mp-capa b { font-weight: 500; color: var(--text2); font-size: 1.05rem; }
.mp-capa input { accent-color: var(--blue); cursor: pointer; }
.mp-capa-sub { padding: 4px 8px 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.mp-capa-sub .finput { width: 100%; font-size: 1.1rem; padding: 6px 8px; }
.mp-despl-tot { margin-top: 7px; font-size: 1.05rem; color: var(--text2); line-height: 1.5; }
.mp-despl-tot b { color: var(--text0); font-weight: 500; }

/* Mandos de zoom, abajo a la derecha (encima de la atribución) */
.mp-mandos { right: 14px; bottom: 34px; padding: 4px; display: flex; flex-direction: column; }
.mp-mandos button {
  background: none; border: none; color: var(--text1); cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.mp-mandos button:hover { background: var(--bg2); color: var(--blue); }

/* Aviso (sin internet, sin permiso de ubicación, nada que enseñar…) */
.mp-aviso {
  left: 50%; bottom: 20px; transform: translateX(-50%);
  padding: 10px 16px; font-size: 1.15rem; color: var(--text1);
  max-width: min(520px, calc(100% - 40px)); text-align: center;
}
.mp-aviso.malo { color: var(--red); border-color: var(--red); }

/* ── Los pines ──
   Un punto, no una chincheta de globo: a nivel de país hay decenas juntas y las
   chinchetas se tapan entre sí. El anillo exterior es lo que los despega del
   mapa tanto en tema claro como en oscuro. */
.mp-pin {
  width: 15px; height: 15px; border-radius: 50%; cursor: pointer;
  background: var(--text1);
  border: 2.5px solid var(--bg0);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text1) 55%, transparent),
              0 2px 6px rgba(0, 0, 0, .45);
  transition: transform .12s;
}
.mp-pin:hover { transform: scale(1.35); }
/* SAT prioritario en el naranja de marca: es el color de lo que importa. */
.mp-pin.sat-prio { background: var(--blue);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 55%, transparent),
              0 2px 6px rgba(0, 0, 0, .45); }
.mp-pin.sat-no { background: var(--text1); }
.mp-pin.sin-sat { background: var(--text2); opacity: .75; }
/* Con IFAs abiertas: aro rojo alrededor. Se ve a cualquier zoom sin añadir otro
   elemento que colocar. */
.mp-pin.abiertas { box-shadow: 0 0 0 2px var(--red), 0 2px 6px rgba(0, 0, 0, .45); }
.mp-pin.sel { transform: scale(1.45); box-shadow: 0 0 0 3px var(--blue), 0 2px 8px rgba(0,0,0,.5); }
/* El pin que se está colocando a mano: hueco y pulsante, para que se distinga
   de los que ya están puestos. */
.mp-pin.editando {
  background: none; border: 3px solid var(--blue); width: 20px; height: 20px;
  cursor: grab; animation: mp-lat 1.6s ease-in-out infinite;
}
@keyframes mp-lat { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 55%, transparent); }
                    50%     { box-shadow: 0 0 0 9px transparent; } }

/* Marcador del resultado de una búsqueda: temporal, no es un cliente. */
.mp-pin.busqueda { background: var(--nav-sec); border-color: var(--bg0); }

/* ── Panel lateral (ficha / edición) ── */
.mp-lateral {
  position: relative; width: 340px; flex: none;
  border-left: 1px solid var(--border); background: var(--bg1);
  overflow-y: auto; padding: 16px 18px 24px;
}
.mp-lateral-x {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; color: var(--text2);
  cursor: pointer; font-size: 1.6rem; line-height: 1;
}
.mp-lateral-x:hover { color: var(--text0); }

.mp-ficha-tit { font-size: 1.7rem; font-weight: 500; color: var(--text0);
                margin: 0 26px 2px 0; line-height: 1.3; }
.mp-ficha-sub { font-size: 1.15rem; color: var(--text2); margin: 0 0 14px; }
.mp-ficha-dir { font-size: 1.15rem; color: var(--text1); line-height: 1.5;
                margin: 0 0 14px; }

.mp-etq { display: inline-flex; align-items: center; gap: 5px;
          padding: 3px 9px; border-radius: 999px; font-size: 1.05rem;
          border: 1px solid var(--border2); color: var(--text1); margin: 0 5px 5px 0; }
.mp-etq.prio { color: var(--blue); border-color: var(--blue-dim); background: var(--blue-bg); }
.mp-etq.roja { color: var(--red); border-color: var(--red); background: var(--red-bg); }

.mp-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.mp-dato { background: var(--bg2); border: 1px solid var(--border);
           border-radius: var(--radius); padding: 9px 11px; }
.mp-dato b { display: block; font-size: 1.9rem; font-weight: 500; color: var(--text0);
             font-family: var(--font-mono); line-height: 1.2; }
.mp-dato span { font-size: 1.05rem; color: var(--text2); }

.mp-sec { font-size: 1.05rem; color: var(--text2); text-transform: uppercase;
          letter-spacing: .1em; margin: 18px 0 8px; }
.mp-lista-vacia { font-size: 1.15rem; color: var(--text2); }

.mp-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Formulario de ubicar (solo admin) */
.mp-form label { display: block; font-size: 1.1rem; color: var(--text1); margin: 12px 0 5px; }
.mp-form .finput { width: 100%; }
.mp-form .mp-coords { font-family: var(--font-mono); font-size: 1.15rem;
                      color: var(--text1); background: var(--bg2);
                      border: 1px solid var(--border); border-radius: var(--radius);
                      padding: 8px 10px; margin-top: 6px; }
.mp-pista { font-size: 1.05rem; color: var(--text2); line-height: 1.5; margin: 8px 0 0; }

.mp-pend { max-height: 260px; overflow-y: auto; margin-top: 6px;
           border: 1px solid var(--border); border-radius: var(--radius); }
.mp-pend-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
                border-bottom: 1px solid var(--border); cursor: pointer;
                font-size: 1.15rem; color: var(--text1); }
.mp-pend-item:last-child { border-bottom: none; }
.mp-pend-item:hover { background: var(--bg2); color: var(--text0); }
.mp-pend-item b { flex: 1; font-weight: 400; }
.mp-pend-item small { color: var(--text2); font-size: 1rem; }

/* ── Estrecho ──
   Por debajo de 900 px el lateral no cabe al lado del mapa sin dejar el mapa en
   una rendija: pasa a ocupar la mitad de abajo. */
@media (max-width: 900px) {
  .mp-body { flex-direction: column; }
  .mp-lateral { width: auto; max-height: 46%; border-left: none;
                border-top: 1px solid var(--border); }
  .mp-capas { width: 190px; }
}