/* ============================================================
   mapa.css — #/mapa: puntos de venta (Leaflet + circleMarker).
   Contrato: docs/design/direcciones/mapa-a.html (desktop) +
   mapa-a-mobile.html (mobile 375px), aprobado por Fernando.
   No redefine el ritmo de `.view`/`.stack` — esta vista NO usa
   `.view` (es full-bleed, position:fixed, dueña de su propio
   layout) a propósito: un mapa necesita alto real, no el flujo
   normal de scroll de columna que usan el resto de las pantallas.
   ============================================================ */

:root {
  /* Paleta de vendedores — SOLO para dots/chips/checkboxes DEL DOM (nunca texto). Los círculos
     del mapa (canvas) resuelven estos mismos valores en runtime vía getComputedStyle (mapa.js
     #cssVar) porque CanvasRenderingContext2D no entiende `var(--x)`. Fuente única: acá. */
  --v1: #0071e3; --v2: #34c759; --v3: #ff9500;
  --v4: #af52de; --v5: #ff2d55; --v6: #5ac8fa;
  --vn: #aeaeb2; /* "Sin asignar" — gris CON identidad, distinto del gris de "sin dato" (--text-4) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --v1: #2997ff; --v2: #30d158; --v3: #ff9f0a;
    --v4: #bf5af2; --v5: #ff375f; --v6: #64d2ff;
    --vn: #636366;
  }
  /* Cartografía nocturna (contrato de diseño: mapa-a.html define océano/tierra oscuros). Los
     tiles de OSM solo existen en claro; el tratamiento es el filtro clásico de dark-map:
     invertir + rotar el matiz para que el agua vuelva a ser azulada y las etiquetas queden
     legibles. Solo el pane de tiles — puntos, popup y controles ya tienen su propio dark. */
  .view-mapa .leaflet-tile-pane {
    filter: brightness(.6) invert(1) contrast(3.2) hue-rotate(200deg) saturate(.35) brightness(.65);
  }
}

/* ============ Shell full-bleed ============ */
.view-mapa {
  position: fixed; top: 0; right: 0; left: 0; bottom: calc(var(--nav-h) + var(--safe-b));
  z-index: var(--z-content);
  display: flex; flex-direction: column;
  background: var(--bg-app);
}
@media (min-width: 900px) {
  .view-mapa { left: var(--sidebar-w); bottom: 0; }
}
.mapa-loading { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ============ Appbar ============ */
.mapa-appbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: calc(var(--sp-2) + var(--safe-t)) var(--sp-4) var(--sp-2);
  background: var(--mat-appbar);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: 0 .5px 0 var(--hairline);
}
.mapa-appbar-left { min-width: 0; }
.mapa-appbar-sub { font-size: var(--fs-chip); color: var(--text-3); margin-top: 2px; }
.mapa-appbar-right { flex-shrink: 0; }
@media (min-width: 900px) {
  .mapa-appbar {
    position: static; flex-shrink: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 18px var(--pad-desk) 14px;
  }
  .mapa-appbar-sub { font-size: 12.5px; }
}

/* ============ Body: panel de filtros + canvas ============ */
.mapa-body { flex: 1; min-height: 0; display: flex; position: relative; }

/* ---- Panel de filtros (desktop, siempre visible — 260px, no colapsable) ---- */
.mapa-filters {
  width: 260px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
  padding-bottom: var(--sp-4);
}
.mapa-fp-sec { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.mapa-fp-sec + .mapa-fp-sec { border-top: .5px solid var(--hairline); }
.mapa-fp-hd {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--sp-2);
}
.mapa-fp-sec-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 6px; }
.mapa-fp-sec-row .mapa-fp-hd { margin: 0; }
.mapa-fp-clear {
  font-size: 12px; font-weight: 600; color: var(--blue-text);
  background: none; border: none; padding: 2px 0; cursor: pointer;
}
.mapa-fp-clear:disabled { color: var(--text-4); cursor: not-allowed; }

.mapa-active-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mapa-chip-active {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--blue-text); border: 1px solid var(--blue-border);
  cursor: pointer;
}
.mapa-chip-active-x { opacity: .7; font-size: 12px; line-height: 1; }

.mapa-opt {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px;
  cursor: pointer; min-height: 34px;
  transition: background var(--t-fast) var(--ease);
}
.mapa-opt:hover { background: var(--surface-2); }
.mapa-opt.active { background: var(--blue-soft); }
.mapa-opt-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mapa-opt-label { flex: 1; min-width: 0; font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-opt.active .mapa-opt-label { color: var(--blue-text); font-weight: 600; }
.mapa-opt-count { font-size: 11.5px; font-weight: 600; color: var(--text-3); flex-shrink: 0; }
.mapa-opt.active .mapa-opt-count { color: var(--blue-text); }
/* Blanco táctil ≥44px en pantallas coarse, sin agrandar la fila visual (mismo patrón que el resto
   del sistema — .avatar/.opt en app.css). */
.mapa-opt { position: relative; }
@media (pointer: coarse) { .mapa-opt::after { content: ""; position: absolute; inset: -5px 0; } }

.mapa-axis-seg { width: 100%; }
.mapa-axis-seg button { flex: 1; }

/* ---- Drawer de filtros mobile: reusa .sheet/.sheet-backdrop (app.css) — sin CSS propio salvo
   el techo de alto, porque el contenido (7 secciones) es más largo que "Anotar". ---- */
.mapa-filters-sheet { max-height: calc(100dvh - 80px); }
.mapa-filters-sheet .sheet-body { gap: 0; }

/* ============ Canvas del mapa ============ */
.mapa-canvas-wrap { flex: 1; min-width: 0; position: relative; overflow: hidden; background: var(--surface-2); }
/* `isolation: isolate` + z-index 0: los panes internos de Leaflet llevan z-index 200-800 y sin
   aislar su stacking context PINTAN ENCIMA de la appbar, la leyenda y el status (z 4-6) aunque
   la geometría diga que están "visibles" — medido 2026-08-30: la UI flotante existía y no se
   veía. Aislado, esos 200-800 compiten solo entre sí, adentro del mapa. */
.mapa-leaflet { width: 100%; height: 100%; position: relative; z-index: 0; isolation: isolate; }
.mapa-empty-inline, .mapa-empty-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
}
.mapa-empty-overlay { background: rgba(242, 242, 247, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (prefers-color-scheme: dark) { .mapa-empty-overlay { background: rgba(28, 28, 30, .82); } }

/* ---- Tira de chips mobile (siempre visible, scroll horizontal — nunca tapa el mapa entero) ---- */
.mapa-topstrip {
  position: absolute; top: calc(var(--safe-t) + 50px); left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mapa-topstrip::-webkit-scrollbar { display: none; }
.mapa-chip-filtros, .mapa-chip-axis {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  box-shadow: var(--sh-1); padding: 6px 12px; min-height: 30px;
  font-size: 12px; font-weight: 600; color: var(--text-1); white-space: nowrap; cursor: pointer;
  position: relative;
}
.mapa-chip-f {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; padding: 6px 10px; border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--blue-text); border: 1px solid var(--blue-border);
  cursor: pointer; white-space: nowrap; min-height: 30px; position: relative;
}
.mapa-chip-f-x { font-size: 13px; line-height: 1; opacity: .7; }
/* Blanco táctil ≥44px en coarse sin agrandar el chip visual (mismo patrón que .mapa-opt/.opt). */
@media (pointer: coarse) {
  .mapa-chip-filtros::after, .mapa-chip-axis::after, .mapa-chip-f::after { content: ""; position: absolute; inset: -7px; }
}

/* ============ Leyenda flotante ============ */
.mapa-legend {
  position: absolute; left: 12px; bottom: 44px; z-index: 4;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 12px 14px; min-width: 168px; max-width: 220px;
}
.mapa-legend-hd {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.mapa-legend-item { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; min-height: 18px; }
.mapa-legend-item:last-child { margin-bottom: 0; }

/* Toggle de la leyenda: en desktop es un header quieto (el chevron ni se muestra y el click no
   hace falta); en el celular la leyenda completa tapaba media pantalla del mapa (382px medidos),
   así que nace colapsada y el header la abre/cierra. */
.mapa-legend-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: none; padding: 0; cursor: default; font: inherit; text-align: left;
  color: inherit;
}
.mapa-legend-chev { display: none; color: var(--text-3); }
@media (max-width: 900px) {
  .mapa-legend-toggle { cursor: pointer; min-height: 28px; }
  .mapa-legend-chev { display: inline; }
  .mapa-legend.collapsed .mapa-legend-body { display: none; }
}

/* Blancos táctiles que la pasada del 2026-08-30 midió cortos: el link "N sin ubicar" (22px) y
   los botones de zoom de Leaflet (30px). Mismo criterio de 44px del resto del sistema. */
@media (pointer: coarse) {
  .mapa-status a, .mapa-status button, .mapa-legend-toggle { position: relative; }
  .mapa-status a::after, .mapa-status button::after { content: ""; position: absolute; inset: -11px -6px; }
  .mapa-legend-toggle::after { content: ""; position: absolute; inset: -8px 0; }
  .view-mapa .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
}
/* En el teléfono los botones de zoom no van (patrón Apple/Google Maps: pinch + doble tap).
   Además quedaban debajo de la appbar absoluta. En desktop y tablets con mouse, se quedan. */
@media (pointer: coarse) and (max-width: 900px) {
  .view-mapa .leaflet-control-zoom { display: none; }
}
.mapa-lg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mapa-lg-dot.approx { border: 1.5px dashed; border-style: dashed; }
.mapa-lg-label { font-size: 12px; color: var(--text-2); }
.mapa-lg-label strong { font-weight: 600; color: var(--text-1); }
.mapa-legend-div { height: .5px; background: var(--hairline); margin: 7px 0; }
.mapa-size-guide { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.mapa-sz-dot { display: inline-block; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.mapa-sz-lbl { font-size: 10.5px; color: var(--text-3); }
@media (max-width: 899.98px) {
  .mapa-legend { max-width: 160px; padding: 9px 11px; bottom: 46px; }
  .mapa-legend-item { min-height: 16px; }
}

/* ============ Barra de estado ============ */
.mapa-status {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 var(--sp-4);
  background: var(--mat-appbar);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border-top: .5px solid var(--hairline);
  font-size: 12.5px; color: var(--text-2); overflow: hidden; white-space: nowrap;
}
.mapa-status-count { font-weight: 700; color: var(--text-1); }
.mapa-status-sep { color: var(--text-4); }
.mapa-chip-unlocated {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--orange-soft); color: var(--orange-text); border: 1px solid var(--orange-border);
  text-decoration: none; white-space: nowrap;
}

/* ============ Mini-ficha (popup de Leaflet) ============ */
.mapa-mf-popup .leaflet-popup-content-wrapper {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 0;
}
.mapa-mf-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.mapa-mf-popup .leaflet-popup-tip { background: var(--surface); }
.mapa-mf { width: 228px; font-family: var(--font); }
.mapa-mf-hd { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; }
.mapa-mf-hd-txt { flex: 1; min-width: 0; }
.mapa-mf-name {
  font-size: 14px; font-weight: 700; color: var(--text-1); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mapa-mf-loc { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.mapa-mf-close {
  flex-shrink: 0; background: var(--gray-soft); border: none; border-radius: 50%;
  width: 24px; height: 24px; min-height: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 14px;
  position: relative;
}
.mapa-mf-close::after { content: ""; position: absolute; inset: -10px; }
.mapa-mf-body { border-top: .5px solid var(--hairline); padding: 6px 12px; }
.mapa-mf-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--text-2); }
.mapa-mf-row + .mapa-mf-row { border-top: .5px solid var(--hairline); }
.mapa-mf-row .k { font-weight: 500; flex-shrink: 0; }
.mapa-mf-row .v { font-weight: 600; color: var(--text-1); text-align: right; min-width: 0; }
.mapa-mf-vend { display: inline-flex; align-items: center; gap: 5px; }
.mapa-mf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mapa-mf-sit { display: inline-flex; align-items: center; gap: 6px; }
.mapa-mf-monto { font-weight: 700; }
.mapa-mf-ft { padding: 10px 12px; border-top: .5px solid var(--hairline); }

/* ============ Buscador del mapa (Variante B, 2026-09-06) ============
   docs/contrato-buscador-mapa.md + mapa-buscador-2026-09-B(.html/-mobile.html). Control flotante
   HERMANO de `.mapa-leaflet` dentro de `.mapa-canvas-wrap` (mismo `isolation: isolate` que ya
   protege appbar/leyenda/status de los panes de Leaflet — ver el comentario de `.mapa-leaflet`
   arriba: la geometría "visible" no alcanza, hay que aislar el stacking context). */
.mapa-search {
  position: absolute; top: 10px; left: 10px; z-index: 8; width: 300px; max-width: calc(100% - 20px);
}
/* Zoom de Leaflet arriba a la derecha (ver mapa.js); la atribución de OSM queda abajo, bajo el status bar. */
.view-mapa .leaflet-top.leaflet-right { top: 10px; right: 10px; }
.mapa-search-box {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  box-shadow: var(--sh-3); height: 38px; padding: 0 8px 0 12px;
}
.mapa-search-box .ico { color: var(--text-3); flex-shrink: 0; display: flex; }
/* Selector con el input ADENTRO a propósito: la regla global `input[type="text"]` de app.css (0,1,1)
   le ganaba a `.mapa-search-input` (0,1,0) y dibujaba una segunda caja con fondo, borde y radio
   dentro de la píldora (reporte de Fernando, 2026-09-06: "algo superpuesto arriba a la izquierda"). */
.mapa-search-box input.mapa-search-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none; font: inherit;
  font-size: 13px; color: var(--text-1); height: 100%; min-height: 0; padding: 0;
  border-radius: 0; box-shadow: none;
}
.mapa-search-box input.mapa-search-input:focus-visible { border: none; box-shadow: none; }
.mapa-search-input::placeholder { color: var(--text-3); }
.mapa-search-clear {
  flex-shrink: 0; background: none; border: none; padding: 0; margin: 0; min-height: 0;
  color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; position: relative;
}
.mapa-search-clear:hover { background: var(--surface-2); color: var(--text-1); }
@media (pointer: coarse) { .mapa-search-clear::after { content: ""; position: absolute; inset: -11px; } }

/* Botón "Buscar dirección" y mensajes bajo el campo (sugerencias las pinta el propio
   `loc-ac-list` global — este bloque es SOLO lo que agrega el buscador del mapa: la acción
   explícita, el "cargando", "El sistema entendió" y "No se encontró"). */
.mapa-search-action {
  margin-top: 4px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-2); padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--blue-text);
  cursor: pointer; min-height: 36px;
}
.mapa-search-action:hover { background: var(--blue-soft); }
.mapa-search-msg {
  margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-2); padding: 8px 12px; font-size: 12px; color: var(--text-2); line-height: 1.4;
}
.mapa-search-msg .ok { color: var(--green); }
.mapa-search-msg .warn { color: var(--red, #ff3b30); }
.mapa-search-msg strong { font-weight: 600; color: var(--text-1); }

/* Pin de la dirección/localidad buscada — distinto de los circleMarker de cuentas (decisión 1 del
   header del JS: nunca confundir "lo que busqué" con "un cliente"). */
.mapa-pin-busqueda { pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

/* ---- Panel "Quién cubre esta zona" ---- */
.mapa-cobertura {
  position: absolute; z-index: 8; width: 280px; max-width: calc(100% - 20px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 14px;
}
.mapa-cob-conector {
  /* Línea HORIZONTAL del panel al pin: el JS fija `left`/`width`/`top`; la altura es 0 y la línea
     es el borde superior (medido 2026-09-06: con `border-left` + width en JS rendía 20×0 → invisible). */
  position: absolute; height: 0; border-top: 2px dashed var(--blue); pointer-events: none;
}
.mapa-cob-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.mapa-cob-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
.mapa-cob-close {
  flex-shrink: 0; background: none; border: none; padding: 0; margin: 0; min-height: 0;
  color: var(--text-2); cursor: pointer; font-size: 16px; line-height: 1; position: relative;
}
@media (pointer: coarse) { .mapa-cob-close::after { content: ""; position: absolute; inset: -14px; } } /* 16+28 = 44 */
.mapa-cob-sub { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.mapa-cob-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: .5px solid var(--hairline);
}
.mapa-cob-row:last-of-type { border-bottom: none; }
.mapa-cob-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mapa-cob-info { flex: 1; min-width: 0; }
.mapa-cob-nombre {
  font-size: 13px; font-weight: 600; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mapa-cob-detalle { font-size: 11px; color: var(--text-2); }
.mapa-cob-ver { flex-shrink: 0; position: relative; }
@media (pointer: coarse) { .mapa-cob-ver::after { content: ""; position: absolute; inset: -13px -4px; } } /* 19+26 = 45 */
.mapa-cob-empty { text-align: center; padding: 16px 0; }
.mapa-cob-empty-ico { font-size: 28px; margin-bottom: 8px; }
.mapa-cob-empty-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.mapa-cob-empty-sub { font-size: 12px; color: var(--text-2); }
.mapa-cob-foot { font-size: 11px; color: var(--text-2); margin-top: 8px; padding-top: 4px; }

/* ---- Mobile: buscador full-width sobre el canvas, panel como tarjeta sobre el status bar ---- */
@media (max-width: 899.98px) {
  /* Debajo del topstrip (chips de filtro): `top: calc(var(--safe-t) + 50px)` + su propia altura
     (~46px de padding+chip) — mismo cálculo que ya usa `.mapa-topstrip` arriba. */
  .mapa-search {
    top: calc(var(--safe-t) + 96px); left: 12px; right: 12px; width: auto; max-width: none;
  }
  .mapa-search-box { height: 44px; }
  .mapa-cobertura {
    position: absolute; left: 12px; right: 12px; bottom: 44px; top: auto !important; width: auto; max-width: none;
  }
  .mapa-cob-conector { display: none; }
}

/* ============ Desktop ≥900px ============ */
@media (min-width: 900px) {
  .mapa-legend { bottom: 44px; }
  .mapa-status { padding: 0 var(--pad-desk); }
}