/* ══════════════════════════════════════════════════════════════════════
   MAPA MÓVIL v2 · F0+F1 (6-oct-2026 · orden del Fundador: «el buscador tapa
   las bolas, los pines saturan; más minimalista pero con las mismas opciones»)
   Auditoría: _cowork/INFORMES/04_Producto/AUDITORIA_MAPA_MOVIL_2026-10-06.md

   Qué hace este fichero (solo ≤768 px; en escritorio no cambia nada):
   · Header en UNA fila de 56 px: logo pequeño · buscador a ancho completo ·
     usuario. Antes la fila 2 (logo 72, buscador 123, «Crear cuenta») se
     pintaba FUERA del header (68 px declarados, 110 reales) encima de la
     quick-bar de bolas. premium-polish.css (carga la última, async) fija
     #hdr{height:68px} → por eso aquí va !important.
   · La quick-bar recibe (por JS, mobile-map-v2.js) el selector de país al
     principio y el botón Filtros al final: una sola fila de chips, nada encima.
   · Fuera del mapa en móvil: banner de bolas (642 px de ancho en 390), beta
     globe (información para agentes), marca de agua, ticker de sabores, cta
     «Descubre GelatoMaps». Las bolas se explican en el sidebar (Filtros) y en
     /tres-bolas; nada de esto cambia datos.
   · Pines por nivel de zoom (clase gm-zfar / gm-zmid / gm-znear en #map, la
     pone mobile-map-v2.js en zoomend): lejos .55, ciudad .68, calle .9. Se
     escala el wrapper (emblema + badge), no solo la imagen; el iconSize de
     Leaflet (área táctil) no cambia. Sustituye al scale(.78) fijo de mobile.css.
   · FABs y banners se apoyan en --gm-tabbar-h (la pone mobile-tabbar.js v8):
     la tabbar pasó de 2 filas (98 px) a 1 (≈62 px) y antes geoFab y el chat
     se solapaban entre sí y con la barra.
   Regla del codex: sin 100vw; todo en % / px / env().
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1 · Header: una fila ─────────────────────────────────────────── */
  #hdr {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 0 10px !important;
    gap: 8px !important;
    overflow: visible;
  }
  #hdr > picture { display: flex; align-items: center; }
  #hdr .hdr-logo {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    filter: none;
  }
  #hdr .hdr-brand,
  #hdr .hdr-div,
  #hdr .hdr-nav,
  #hdr .hdr-count,
  #hdr .hdr-demo-btn,
  #hdr .hdr-info-btn,
  #hdr .sabor-map-btn { display: none !important; }
  /* El botón geo del header duplica al chip «Cerca» y al FAB de localización. */
  #hdr #geoBtn { display: none !important; }
  /* País y Filtros se mueven a la quick-bar (JS). Si el JS no corriera, se
     quedan en el header pero compactos (fallback). */
  #hdr > #gm-country-switch { transform: scale(.85); transform-origin: left center; }
  #hdr > #btnMob { min-width: 40px; padding: 0 8px; }

  #hdr .hdr-srch {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 40px;
    margin: 0 !important;
    display: flex; align-items: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 0 10px 0 12px;
  }
  #hdr .hdr-srch .hdr-srch-ico { color: #fff; opacity: .7; }
  #hdr #searchInput {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 15px; /* ≥16px evitaría el zoom de iOS; 15 con font-size-adjust ya no lo dispara en iOS 17+ */
    padding: 0 6px;
  }
  #hdr #searchInput::placeholder { color: rgba(255,255,255,.6); }
  #hdr .hdr-user-area { gap: 6px !important; margin-left: 0 !important; }
  /* «Crear cuenta» (99 px) sale de la fila; el icono de usuario abre el mismo modal. */
  #hdr .hdr-register-btn { display: none !important; }
  #hdr .hdr-login-btn,
  #hdr #loginBtn {
    width: 40px; height: 40px; min-width: 40px;
    padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── 2 · Quick-bar: una fila de chips, país primero, Filtros al final ── */
  .gm-quick-bar {
    height: 48px;
    padding: 6px 8px !important;
    gap: 6px !important;
    align-items: center;
    z-index: 2;
  }
  .gqb-chip { min-height: 36px !important; padding: 4px 11px !important; }
  .gm-quick-bar #gm-country-switch {
    flex-shrink: 0;
    margin: 0 !important;
    font-size: 11px;
  }
  .gm-quick-bar #gm-country-switch a { padding: 5px 7px; }
  .gm-quick-bar #gm-country-select {
    height: 36px; border-radius: 18px;
    border: 1px solid rgba(15,23,42,.12); background: #fff;
    font: 700 12px/1 'DM Sans', system-ui, sans-serif; color: var(--navy, #0f1f3d);
    padding: 0 26px 0 10px; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%230f1f3d' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center;
  }
  .gm-quick-bar #btnMob {
    display: inline-flex !important;
    align-items: center; gap: 5px;
    min-height: 36px; min-width: 0;
    padding: 4px 12px; margin-left: auto;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff; color: var(--navy, #0f1f3d);
    font: 600 12px/1 'DM Sans', system-ui, sans-serif;
    flex-shrink: 0;
  }
  .gm-quick-bar #btnMob svg { stroke: currentColor; }

  /* ── 3 · Capas que sobran en 390 px ─────────────────────────────────── */
  /* `html body #id` (1,0,2): index.html lleva un <style> inline POSTERIOR con
     `#betaGlobe{display:flex!important}` (1,0,0) que ganaba por orden y dejaba
     la píldora «Public Rubric v1.8 + Editorial Pipeline» visible en móvil
     (medido en producción el 7-oct a 375 px). Con la especificidad más alta
     da igual el orden de carga. */
  html body #bolasBanner,
  html body #betaGlobe,
  html body #mapWatermark,
  html body #saboresTicker,
  html body #ctaBanner { display: none !important; }

  /* ── 4 · Pines por zoom (clase en #map, ver mobile-map-v2.js) ────────── */
  .gm-marker img, .gm-cluster img { transform: none !important; } /* anula el .78 fijo de mobile.css */
  .gm-marker > div { transform-origin: 50% 100%; transition: transform .18s ease; }
  #map.gm-zfar  .gm-marker > div { transform: scale(.55); }
  #map.gm-zmid  .gm-marker > div { transform: scale(.68); }
  #map.gm-znear .gm-marker > div { transform: scale(.9); }
  /* El pin seleccionado (panel abierto) siempre a tamaño completo. */
  #map .gm-marker.gm-selected > div,
  #map .gm-marker.leaflet-marker-selected > div { transform: scale(1) !important; }
  /* Clúster plano (lo pinta map-core.js en móvil): círculo + número. */
  .gm-cl-flat {
    display: flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 7px; border-radius: 17px;
    color: #fff; font: 700 13px/1 'DM Sans', system-ui, sans-serif;
    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
    box-sizing: border-box;
  }
  .gm-cl-flat.gm-cl-big { min-width: 40px; height: 40px; border-radius: 20px; font-size: 14px; }

  /* ── 5 · Lo que flota abajo se apoya en la tabbar real ──────────────── */
  #geoFab {
    bottom: calc(var(--gm-tabbar-h, 62px) + 72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
  .gm-support-fab {
    bottom: calc(var(--gm-tabbar-h, 62px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
  .gm-support-panel { bottom: calc(var(--gm-tabbar-h, 62px) + 72px + env(safe-area-inset-bottom, 0px)) !important; }
  #campaignSaborBanner {
    bottom: calc(var(--gm-tabbar-h, 62px) + 10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Con el banner de sabores visible (campaign-sabores.js pone gm-cs-banner-on
     en <body> y mide su alto en --gm-cs-banner-h) los FABs suben por encima:
     el banner ocupa de tabbar+10 a tabbar+10+h a lo ancho, y el FAB del chat
     (right 12, 50 px) caía justo sobre la píldora «Votar» (medido a 375×812:
     FAB 313-363 × 693-743, banner 14-361 × 654-743 → tocar «Votar» abría el
     chat). Subida = alto del banner + 9 px (10 de su offset + 11 de hueco
     − 12 de offset base del FAB). Con el chat abierto el FAB vuelve a su sitio
     (el panel ya lo tapa todo por encima). geoFab sube lo mismo para seguir
     10 px por encima del FAB. */
  body.gm-cs-banner-on .gm-support-fab:not(.open) {
    bottom: calc(var(--gm-tabbar-h, 62px) + 12px + var(--gm-cs-banner-h, 89px) + 9px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.gm-cs-banner-on #geoFab {
    bottom: calc(var(--gm-tabbar-h, 62px) + 72px + var(--gm-cs-banner-h, 89px) + 9px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .gm-support-fab { transition: bottom .25s ease, transform .2s, box-shadow .2s; }
  /* Aviso «Toca una heladería…»: salía a top:10px, o sea ENCIMA del buscador
     (header de 56 px, z 3000 < hint 9250) durante 4 s. Va justo bajo la
     quick-bar (56 + 48 = 104). pointer-events:none ya viene de su regla base. */
  .cs-map-hint { top: 112px !important; }
  #betaModal { bottom: calc(var(--gm-tabbar-h, 62px) + 8px + env(safe-area-inset-bottom, 0px)) !important; }
  .leaflet-bottom.leaflet-right { bottom: calc(var(--gm-tabbar-h, 62px) + 4px); }
  /* El toggle del carrusel de heladerías se queda arriba, justo bajo la quick-bar
     (header 56 + quick-bar 48 = 104), pegado a la izquierda y sin tapar pines. */
  #discoToggle { top: 112px !important; left: 10px !important; bottom: auto !important; width: 40px; height: 40px; opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-support-fab { transition: none; }
}