:root{
  --brand:#21a607; --accent:#21a607;
  --bg:#0f1115; --elev:#141823; --stroke:#242a2e; --text:#e6ebf5;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}

/* Layout */
.container{width:min(1200px,92%);margin:0 auto}
.directions-wrap{padding:1.6rem 0 2rem}
.section-title{font-weight:800;margin:.2rem 0 .2rem}
.section-sub{color:#9aa4ac;margin:0 0 1rem}
.dir-layout{display:grid;grid-template-columns:360px 1fr;gap:1rem;align-items:start}
#dir-panel{background:var(--elev);border:1px solid var(--stroke);border-radius:14px;padding:.8rem;position:relative}
#dir-map{height:520px;border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.18);position:relative;z-index:0}
.dir-controls{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;margin-bottom:.6rem}
#dir-search,#dir-order{border:1px solid var(--stroke);background:#0f1214;color:#e8ecef;border-radius:12px;padding:.55rem .7rem;outline:none}
.dir-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.chip{border:1px solid var(--stroke);background:#0f1214;color:#e8ecef;border-radius:999px;padding:.35rem .6rem;font-size:.85rem;cursor:pointer;white-space:nowrap}
.chip.is-active{border-color:#2bd13a;background:linear-gradient(180deg,rgba(33,166,7,.25),rgba(33,166,7,.14))}
#dir-list{display:grid;gap:.6rem;max-height:60vh;overflow:auto}
.dir-item{display:block;width:100%;text-align:left;border:1px solid var(--stroke);background:#0f1214;color:#e8ecef;border-radius:12px;overflow:hidden;cursor:pointer}
.dir-thumb{width:100%;aspect-ratio:16/6;background:#1b2028}
.dir-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dir-item__body{padding:.65rem .75rem .75rem}
.dir-item__title{font-weight:800;line-height:1.2}
.dir-item__meta{display:flex;gap:.4rem;flex-wrap:wrap;font-size:.85rem;color:#a8b0b6;margin-top:.25rem}
.dir-dot{width:.75rem;height:.75rem;border-radius:999px;display:inline-block;margin-right:.35rem}

/* Popup compacto blanco */
.leaflet-popup-content-wrapper.lbpp{border-radius:12px;padding:0;border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 20px rgba(0,0,0,.25);background:#fff;overflow:hidden}
.lbp{--pin:#16a34a;padding:8px 10px 7px;max-width:220px;font:500 11px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#111827;position:relative}
.lbp::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--pin)}
.lbp__head{display:flex;gap:.4rem;align-items:flex-start;margin-bottom:.3rem}
.lbp__ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:#e8f6ec;color:var(--pin);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.lbp__ico i{font-size:16px}
.lbp__title{margin:0;font-size:12px;font-weight:800;color:#111827;line-height:1.2}
.lbp__cat{font-size:10px;color:#6b7280}
.lbp__img{width:100%;height:90px;border-radius:8px;background:#eef0f2;color:#6b7280;display:grid;place-items:center;overflow:hidden;margin:.2rem 0 .4rem;border:1px solid #edf0f2}
.lbp__img img{width:100%;height:100%;object-fit:cover;display:block}
.lbp__addr{margin:.3rem 0 .4rem;color:#374151;font-size:10px}
.lbp__stars{color:#f59e0b;letter-spacing:.08rem;font-size:11px}
.lbp__stars small{color:#6b7280;margin-left:.2rem}
.lbp__actions{display:flex;gap:.35rem;align-items:center;justify-content:center;margin-top:.15rem}
.lbp__btn{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .5rem;border-radius:7px;border:1px solid #e5e7eb;background:#fff;color:#111827;text-decoration:none;font-weight:700;font-size:10px}
.lbp__btn-primary{background:#16a34a;border-color:#0f7b2e;color:#fff}
.lbp__btn i{font-size:14px;line-height:1}
.lbp__wa-wrap{display:flex;justify-content:center;margin-top:.35rem}
.lbp__btn-wa{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:8px;border:1px solid #e5e7eb;background:#f5f6f7;color:#111;font-weight:800;font-size:10px;width:88%;justify-content:center}

/* Tooltips fijos */
.leaflet-tooltip.biz-label{font-size:11px;line-height:1.1;padding:2px 6px;border-radius:6px;font-weight:600;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Ocultar panel instrucciones LRM */
.leaflet-routing-container{display:none !important}

/* Buscador local dentro del mapa */
.geo-search{
  position:absolute; z-index:1000; top:12px; left:64px;
  width:min(360px, 75vw); background:#fff; color:#111;
  border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.08); overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}
#geo-input{width:100%;padding:10px 12px;border:0;outline:none;font-size:14px;color:#111}
.geo-results{max-height:280px;overflow:auto;display:none;border-top:1px solid rgba(0,0,0,.08);background:#fff}
.geo-item{padding:10px 12px;font-size:14px;cursor:pointer;line-height:1.2;display:flex;gap:8px;align-items:flex-start;background:#fff}
.geo-item:hover,.geo-item.active{background:#f0f2f5}
.geo-item .mi{font-family:'Material Icons';font-size:18px;opacity:.6;margin-top:1px}
.geo-item .g-name{font-weight:600;color:#111}
.geo-item .g-sub{font-size:12px;opacity:.75;color:#333}

/* FAB móvil */
.mobile-fab{display:none}

/* Errores */
#js-error{position:fixed;left:10px;bottom:10px;z-index:99999;background:#c0392b;color:#fff;padding:.6rem .8rem;border-radius:8px;font-size:.85rem;display:none;max-width:92%}
#js-error b{font-weight:800}

/* ===== MÓVIL ===== */
@media (max-width:980px){
  .directions-wrap{padding:0}
  .section-title,.section-sub{display:none}
  .dir-layout{display:block;position:relative;height:100vh}
  #dir-map{position:fixed !important;top:0;left:0;right:0;bottom:0;z-index:1;height:100vh !important;border-radius:0 !important}
  #dir-panel{
    position:fixed;left:0;right:0;bottom:0;z-index:1000;max-height:90vh;border-radius:16px 16px 0 0 !important;border:none !important;
    box-shadow:0 -8px 32px rgba(0,0,0,.3) !important;transform:translateY(var(--sheet-y,0px));
    transition:transform 260ms cubic-bezier(.2,.8,.2,1);will-change:transform;overflow:hidden;display:flex;flex-direction:column
  }

  /* handle */
  #dir-panel .mobile-handle-hit{position:absolute;left:0;right:0;top:0;height:28px;background:transparent;display:block;z-index:1002}
  #dir-panel .mobile-handle{
    position:absolute;left:50%;top:4px;transform:translateX(-50%);
    width:260px;height:16px;border-radius:9999px;background:#21a607;box-shadow:0 6px 18px rgba(33,166,7,.28),inset 0 0 0 1px rgba(255,255,255,.35);
    display:flex;align-items:center;justify-content:center;z-index:1003
  }
  #dir-panel .mobile-handle .handle-arrow{
    width:14px;height:14px;border-right:2px solid rgba(255,255,255,.95);border-bottom:2px solid rgba(255,255,255,.95);
    transform:rotate(-135deg);transition:transform .18s ease;pointer-events:none
  }
  #dir-panel.is-full .mobile-handle .handle-arrow{transform:rotate(45deg)}

  .mobile-content{flex:1;overflow:hidden;display:flex;flex-direction:column;margin-top:34px}
  .dir-chips{display:flex;flex-wrap:nowrap;gap:.4rem;margin:.6rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dir-chips::-webkit-scrollbar{display:none}
  #dir-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:8px;margin-right:-8px}

  .mobile-fab{display:block;position:fixed;right:16px;bottom:240px;z-index:2001;width:56px;height:56px;border-radius:50%;
    background:var(--accent);color:#fff;border:none;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer}

  /* botón Inicio bajo el FAB (alineados) */
  .back-home{position:fixed;right:16px;bottom:172px;width:56px;height:56px;padding:0;border-radius:9999px;display:flex;align-items:center;justify-content:center}
  .back-home .label{display:none}
  .back-home .material-icons{font-size:24px}

  /* mover zoom Leaflet */
  #dir-map .leaflet-top.leaflet-left{top:72px !important;left:8px !important}

  /* buscador a la derecha */
  .geo-search{left:auto !important;right:10px !important;top:10px !important;width:min(92vw,360px) !important;z-index:1500 !important}
}

/* ===== DESKTOP ===== */
@media (min-width:981px){
  #dir-panel .mobile-handle-hit, #dir-panel .mobile-handle{display:none !important}
  .geo-search{left:64px !important}
  #dir-panel{transform:none !important;transition:none !important}
  .back-home{top:12px;right:12px;left:auto}
}

/* Enlaces OSM */
.osm-attrib{font-size:12px;opacity:.75;margin:6px 0 0 0}
.osm-attrib a{color:#9ad6ff;text-decoration:underline}

/* Botón Inicio (apariencia) */
.back-home{
  position:fixed;z-index:2001;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9999px;
  background:rgba(15,17,21,.85);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 20px rgba(0,0,0,.22);backdrop-filter:saturate(120%) blur(2px);-webkit-backdrop-filter:saturate(120%) blur(2px)
}
.back-home .material-icons{font-size:18px;line-height:1}
.back-home .label{font-weight:700;letter-spacing:.2px;font-size:13px}
@media (hover:hover){.back-home:hover{filter:brightness(1.08)}.back-home:active{transform:translateY(1px)}}

/* Botón negro coord picker (solo desktop) */
.leaflet-control-coordpicker{
  background:#0b0e10;color:#fff;border:1px solid #242a2e;border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  padding:6px 8px;display:flex;align-items:center;gap:.45rem;font:700 12px system-ui,-apple-system,Segoe UI,Roboto,Arial;cursor:pointer;user-select:none
}
.leaflet-control-coordpicker .dot{width:8px;height:8px;border-radius:999px;background:#ef4444;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.leaflet-control-coordpicker.is-on .dot{background:#22c55e}
.leaflet-control-coordpicker .label{letter-spacing:.3px}
@media (max-width:980px){.leaflet-control-coordpicker{display:none !important}}

/* ==== Ajustes móviles: FAB Ubicación + Regresar alineados abajo ==== */
@media (max-width:980px){
  /* FAB ubicación (mantener 56x56) */
  .mobile-fab{
    right:16px !important;
    bottom:16px !important;
    width:56px !important;
    height:56px !important;
  }

  /* Botón Regresar: mismo tamaño y alineado abajo, separado a la izquierda del FAB */
  .back-home{
    right:88px !important;  /* 56px del FAB + 16px de gap + 16px margen */
    bottom:16px !important;
    width:56px !important;
    height:56px !important;
    border-radius:50% !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    /* opcional: si quieres que se vea como el FAB verde, descomenta: */
    /* background: var(--accent) !important; color:#fff !important; border:none !important; */
  }
  .back-home .label{ display:none !important; }
  .back-home .material-icons{ font-size:24px !important; line-height:1 !important; }
}

/* ==== Popups: “Ver perfil” en blanco (texto + icono) ==== */
.lbp__btn-primary,
.lbp__btn-primary i{
  color:#fff !important;
}

/* ==== Popups: WhatsApp con misma altura/estilo que otros, verde WhatsApp ==== */
/* Tu CSS actual hacía este botón más ancho (width:88%) y alto; lo igualamos. */
.lbp__wa-wrap{ justify-content:center !important; }
.lbp__btn-wa{
  display:inline-flex !important;
  align-items:center !important;
  gap:.35rem !important;
  padding:.3rem .5rem !important;       /* igual que .lbp__btn */
  border-radius:7px !important;          /* igual que .lbp__btn */
  font-size:10px !important;             /* igual que .lbp__btn */
  font-weight:800 !important;
  width:auto !important;                 /* quitar 88% */
  background:#25D366 !important;         /* verde WhatsApp */
  border:1px solid #1DA955 !important;   /* borde más oscuro */
  color:#111 !important;                 /* texto negro */
}
.lbp__btn-wa svg{ width:14px; height:14px; display:block; }

/* ==== Popup: “Ver perfil” = color del pin dinámico ==== */
.lbp { /* ya recibe --pin desde el JS */ }
.lbp__btn-primary,
.lbp__btn-primary i {
  background: var(--pin) !important;
  color: #fff !important;
  border-color: var(--pin) !important; /* fallback */
}
/* Borde un poco más oscuro si el navegador soporta color-mix */
@supports (color: color-mix(in srgb, #000, #fff)) {
  .lbp__btn-primary {
    border-color: color-mix(in srgb, var(--pin) 80%, #000 20%) !important;
  }
}

/* ==== Popup: WhatsApp siempre verde WhatsApp, icono + texto negro ==== */
.lbp__wa-wrap { justify-content: center !important; }
.lbp__btn-wa{
  display:inline-flex !important;
  align-items:center !important;
  gap:.35rem !important;
  padding:.3rem .5rem !important;      /* igual altura que otros */
  border-radius:7px !important;
  font-size:10px !important;
  font-weight:800 !important;
  width:auto !important;                /* quitar 88% si existía */
  background:#25D366 !important;        /* Verde WhatsApp */
  border:1px solid #1DA955 !important;
  color:#111 !important;                /* texto negro */
}
.lbp__btn-wa i,
.lbp__btn-wa svg { color: #111 !important; }
.lbp__btn-wa svg path { fill: currentColor !important; } /* por si el SVG no viene en negro */

/* ==== Móvil: FABs verticales por encima del panel de administración ==== */
@media (max-width: 980px){
  :root{
    /* Ajusta esta altura al alto real de tu panel de administración/bottom sheet */
    --admin-panel-height: 112px;
    --fab-size: 56px;
    --fab-gap: 12px;
    --fab-margin: 16px;
  }

  /* Estilo base para ambos FABs (ubicación y retroceder) */
  .mobile-fab, #mobile-location-btn,
  .back-home, #back-home-btn{
    position: fixed !important;
    right: var(--fab-margin) !important;
    width: var(--fab-size) !important;
    height: var(--fab-size) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 1200 !important; /* por encima del panel */
    /* respeta el área segura en iOS */
  }

  /* Inferior: MI UBICACIÓN (el más cercano al borde) */
  .mobile-fab, #mobile-location-btn{
    bottom: calc(var(--admin-panel-height) + var(--fab-margin) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Superior: RETROCEDER (apilado encima del de ubicación) */
  .back-home, #back-home-btn{
    bottom: calc(
      var(--admin-panel-height) + var(--fab-margin) + env(safe-area-inset-bottom, 0px)
      + var(--fab-size) + var(--fab-gap)
    ) !important;
  }

  /* Si tu botón "retroceder" tiene texto/label, ocúltalo en FAB */
  .back-home .label, #back-home-btn .label{
    display: none !important;
  }

  /* Tamaño de íconos dentro de los FABs */
  .mobile-fab .material-icons, #mobile-location-btn .material-icons,
  .back-home .material-icons, #back-home-btn .material-icons{
    font-size: 24px !important;
    line-height: 1 !important;
  }
}

/* ==== Elevar FABs unos px adicionales sobre el panel ==== */
@media (max-width: 980px){
  :root{
    /* Ajusta este valor a tu gusto (p. ej., 24px, 36px, 48px) */
    --fab-lift: 36px;
  }

  /* Mi ubicación (abajo) */
  .mobile-fab, #mobile-location-btn{
    bottom: calc(
      var(--admin-panel-height) + var(--fab-margin) + env(safe-area-inset-bottom, 0px)
      + var(--fab-lift)
    ) !important;
  }

  /* Retroceder (encima) */
  .back-home, #back-home-btn{
    bottom: calc(
      var(--admin-panel-height) + var(--fab-margin) + env(safe-area-inset-bottom, 0px)
      + var(--fab-lift) + var(--fab-size) + var(--fab-gap)
    ) !important;
  }
}

/* === Colores editables === */
:root{
  --me-color:#2563eb;        /* Mi ubicación (azul) */
  --search-color:#7c3aed;    /* Resultado de búsqueda (morado) */
  --pick-color:#ea580c;      /* Punto elegido / obtener coords (naranja) */
}

/* Base para los pines tipo divIcon (no afecta a tus pines de negocios si no usan estas clases) */
.lb-pin{
  width:44px; height:44px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 6px 20px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.lb-pin svg{ width:22px; height:22px; fill:#fff; opacity:.95; }

/* Pulso genérico (lo reutilizamos) */
.lb-pin::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  animation: lb-pulse 1.8s infinite ease-out;
  border:2px solid rgba(255,255,255,.45);   /* se sobreescribe por color de cada pin */
}

/* Mi ubicación = azul con pulso (igual que te gustaba) */
.lb-pin.me{ background:var(--me-color); }
.lb-pin.me::after{ border-color: color-mix(in oklab, var(--me-color), transparent 50%); }

/* Resultado de búsqueda = morado con pulso */
.lb-pin.search{ background:var(--search-color); }
.lb-pin.search::after{ border-color: color-mix(in oklab, var(--search-color), transparent 50%); }

/* Punto elegido / Obtener coordenadas = naranja con pulso */
.lb-pin.pick{ background:var(--pick-color); }
.lb-pin.pick::after{ border-color: color-mix(in oklab, var(--pick-color), transparent 50%); }

@keyframes lb-pulse{
  0%{ transform:scale(.8); opacity:.7; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ opacity:0; }
}

/* Tooltip un poco separado del pin */
.leaflet-tooltip.lb-top{
  margin-top:-8px; padding:.25rem .5rem; border-radius:8px; font-size:.83rem;
}

/* Quitar aro/pulso en general */
.lb-pin{ border:0 !important; box-shadow:none !important; }
.lb-pin::after{ content:none !important; }

/* Conservar en MI UBICACIÓN */
.lb-pin.me{
  border:2px solid #fff !important;
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
}
.lb-pin.me::after{
  content:"" !important;
  position:absolute; inset:-10px; border-radius:50%;
  animation: lb-pulse 1.8s infinite ease-out;
  border:2px solid color-mix(in oklab, var(--me-color), transparent 50%);
}

/* Re-activar pulso SOLO para el pin de BÚSQUEDA */
.lb-pin.search{
  background: var(--search-color) !important;
}
.lb-pin.search::after{
  content:"" !important;
  position:absolute; inset:-10px; border-radius:50%;
  animation: lb-pulse 1.8s infinite ease-out;
  border:2px solid color-mix(in oklab, var(--search-color), transparent 50%);
}

/* Color del pin de búsqueda = ROJO */
:root{
  --search-color:#ef4444; /* rojo */
}

/* Todos sin aro/pulso por defecto */
.lb-pin{ border:0 !important; box-shadow:none !important; }
.lb-pin::after{ content:none !important; }

/* Mantener Mi ubicación con aro + pulso */
.lb-pin.me{
  border:2px solid #fff !important;
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
  background: var(--me-color) !important;
}
.lb-pin.me::after{
  content:"" !important;
  position:absolute; inset:-10px; border-radius:50%;
  animation: lb-pulse 1.8s infinite ease-out;
  border:2px solid color-mix(in oklab, var(--me-color), transparent 50%);
}

/* === BÚSQUEDA: idéntico a Mi ubicación pero ROJO === */
.lb-pin.search{
  background: var(--search-color) !important;
  border:2px solid #fff !important;
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
}
.lb-pin.search::after{
  content:"" !important;
  position:absolute; inset:-10px; border-radius:50%;
  animation: lb-pulse 1.8s infinite ease-out;
  border:2px solid color-mix(in oklab, var(--search-color), transparent 50%);
}

:root{ --search-color:#ef4444; }  /* rojo del pin de búsqueda */

/* por defecto sin aro/pulso */
.lb-pin{ border:0 !important; box-shadow:none !important; }
.lb-pin::after{ content:none !important; }

/* Mi ubicación (azul con pulso) — se mantiene */
.lb-pin.me{
  background: var(--me-color) !important;
  border:2px solid #fff !important;
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
}
.lb-pin.me::after{
  content:"" !important;
  position:absolute; inset:-10px; border-radius:50%;
  animation: lb-pulse 1.8s infinite ease-out;
  border:2px solid color-mix(in oklab, var(--me-color), transparent 50%);
}

/* BÚSQUEDA = igual a “me”, pero ROJO */
.lb-pin.search{
  background: var(--search-color) !important;
  border:2px solid #fff !important;
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
}
.lb-pin.search::after{
  content:"" !important;
  position:absolute; inset:-10px; border-radius:50%;
  animation: lb-pulse 1.8s infinite ease-out;
  border:2px solid color-mix(in oklab, var(--search-color), transparent 50%);
}

/* estrella blanca dentro del pin */
.lb-pin svg{ width:22px; height:22px; fill:#fff; opacity:.95; }