/* Mapa de RutaConecta (map/directions.php). Se apoya en los tokens de home.css. */

[hidden]{display:none!important}
body.map-page{overflow:hidden;padding-bottom:0}

.map-app{--nav-h:62px;--panel-w:410px;position:relative;isolation:isolate;display:grid;grid-template-columns:var(--panel-w) minmax(0,1fr);height:calc(100dvh - var(--nav-h));background:var(--bg)}
.map-app[data-state="nav"]{grid-template-columns:minmax(0,1fr)}
.map-app[data-state="nav"] .map-panel{display:none}

/* ---------- panel ---------- */
.map-panel{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg);border-right:1px solid var(--stroke);z-index:2}
.sheet-handle{display:none}
.view{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;padding:1rem 1rem 0;overflow:hidden}
.view-place,.view-route{overflow-y:auto;overflow-x:hidden;padding-bottom:1.2rem}
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;color:var(--muted);font:600 14px var(--f-body);cursor:pointer;padding:.2rem .1rem;margin-bottom:.6rem}
.back:hover{color:var(--brand)}
.back .material-icons{font-size:18px}

.searchbox{position:relative;display:flex;align-items:center;gap:.5rem;background:var(--elev);border:1px solid var(--stroke);border-radius:14px;padding:.2rem .8rem}
.searchbox:focus-within{border-color:var(--brand)}
.searchbox .material-icons{color:var(--muted)}
.searchbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:500 15px var(--f-body);padding:.7rem 0}
.searchbox input::placeholder{color:var(--muted)}
.geo-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;background:var(--elev);border:1px solid var(--stroke);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden}
.geo-title{padding:.5rem .9rem .2rem;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.geo-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .9rem;background:none;border:0;color:var(--text);text-align:left;font:inherit;cursor:pointer}
.geo-item:hover,.geo-item:focus-visible{background:var(--brand-soft)}
.geo-item .material-icons{color:var(--brand);font-size:20px}
.geo-item small{display:block;color:var(--muted)}

.view{position:relative}
.filters-row{display:flex;align-items:center;gap:.5rem;margin-top:.7rem}
.cat-btn{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;background:var(--elev);border:1px solid var(--stroke);border-radius:12px;padding:.55rem .75rem;color:var(--text);font:600 14px var(--f-body);cursor:pointer;text-align:left}
.cat-btn:hover,.cat-btn[aria-expanded="true"]{border-color:var(--brand)}
.cat-btn .material-icons{font-size:20px;color:var(--brand);flex:none}
.cat-btn .cat-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-btn .caret{color:var(--muted);transition:transform .15s}
.cat-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.filters-row select{flex:none;max-width:44%;background:var(--elev);color:var(--text);border:1px solid var(--stroke);border-radius:12px;padding:.55rem .6rem;font:600 13px var(--f-body)}
.filters-wrap{position:relative}
.cat-menu{position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:.4rem;max-height:min(55vh,380px);overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;padding:.5rem;background:var(--elev);border:1px solid var(--stroke);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.cat-opt{display:flex;align-items:center;gap:.5rem;min-width:0;padding:.55rem .6rem;border:0;border-radius:10px;background:none;color:var(--text);font:600 13.5px var(--f-body);cursor:pointer;text-align:left}
.cat-opt:hover{background:var(--brand-soft)}
.cat-opt.is-active{background:var(--brand-soft);color:var(--brand)}
.cat-opt .material-icons{font-size:18px;color:var(--brand);flex:none}
.cat-opt .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-opt small{color:var(--muted);font-weight:500}
.count-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.6rem 0 .4rem}
.check{display:inline-flex;align-items:center;gap:.4rem;font-size:13.5px;color:var(--muted);cursor:pointer;flex:none}
.check input{accent-color:var(--brand);width:16px;height:16px}
.count{margin:0;color:var(--muted);font-size:12.5px;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.map-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -1rem;padding:0 1rem 1rem;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;gap:.6rem}
.item{display:flex;flex:none;min-width:0;overflow:hidden;gap:.8rem;padding:.65rem;border:1px solid var(--stroke);border-radius:14px;background:var(--elev);cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%;transition:border-color .15s}
.item:hover,.item.is-active{border-color:var(--brand)}
.item .thumb{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#1f6f3a,#0f3d24);display:grid;place-items:center;color:rgba(255,255,255,.85)}
.item .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.item .info{min-width:0;flex:1;display:flex;flex-direction:column;gap:.15rem}
.item .name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .sub{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .row{display:flex;align-items:center;gap:.5rem;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.item .row .star{color:var(--gold)}
.tag-open{color:#6ee26a;font-weight:600}
.tag-closed{color:var(--muted)}
.empty-list{color:var(--muted);text-align:center;padding:2rem 1rem;border:1px dashed var(--stroke);border-radius:14px}

/* ---------- ficha del negocio / lugar ---------- */
.place-photo{height:150px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#1f6f3a,#0f3d24);display:grid;place-items:center;color:rgba(255,255,255,.85);margin-bottom:.9rem}
.place-photo img{width:100%;height:100%;object-fit:cover;display:block}
.place-photo .material-icons{font-size:48px}
.place-name{font:700 1.3rem var(--f-display);margin:0 0 .2rem}
.place-meta{margin-bottom:.9rem}
.place-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
.place-meta .star{color:var(--gold)}
.place-addr{display:flex;gap:.4rem;align-items:flex-start;color:var(--muted);margin:1rem 0 .4rem;font-size:14px}
.place-addr .material-icons{font-size:18px;color:var(--brand);flex:none}
.place-actions{display:grid;gap:.5rem}
.place-actions .btn{width:100%;justify-content:center;padding:.75rem 1rem}
.place-actions .row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.btn-success{background:#1c8a06;border-color:#1c8a06;color:#fff}
.btn-danger{background:#dc2626;border-color:#dc2626;color:#fff}
.btn-big{font-size:15px;padding:.85rem 1rem}

/* ---------- ruta ---------- */
.route-head{display:flex;flex-direction:column}
.route-dest{display:flex;align-items:center;gap:.7rem;padding:.7rem;border:1px solid var(--stroke);border-radius:14px;background:var(--elev);margin-bottom:.8rem}
.route-dest .material-icons{color:var(--brand)}
.route-dest strong{display:block}
.route-dest small{color:var(--muted)}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.9rem}
.mode{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.55rem .3rem;border-radius:12px;border:1px solid var(--stroke);background:var(--elev);font:600 12px var(--f-body);color:var(--muted);cursor:pointer}
.mode .material-icons{font-size:22px}
.mode.is-active{border-color:var(--brand);color:var(--text);background:var(--brand-soft)}
.route-loading{display:flex;align-items:center;gap:.7rem;color:var(--muted);padding:1rem 0}
.spinner{width:20px;height:20px;border-radius:50%;border:3px solid var(--stroke);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.route-error{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.08);color:#fecaca;border-radius:12px;padding:.8rem 1rem;margin-bottom:.8rem}
.route-error .btn{margin-top:.6rem}
.summary{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.2rem}
.summary .time{font:700 2rem var(--f-display);color:var(--brand)}
.summary .dist{font-size:1.05rem;font-weight:600}
.arrival{color:var(--muted);font-size:13.5px;margin-bottom:.8rem}
.alts{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.alt{padding:.35rem .75rem;border-radius:999px;border:1px solid var(--stroke);background:var(--elev);color:var(--text);font:600 13px var(--f-body);cursor:pointer}
.alt.is-active{border-color:var(--brand);background:var(--brand-soft)}
.route-actions{display:grid;gap:.5rem;margin-bottom:1rem}
.route-actions .btn{width:100%;justify-content:center}
.steps-toggle{display:flex;align-items:center;gap:.3rem;background:none;border:0;color:var(--brand);font:600 14px var(--f-body);cursor:pointer;padding:.3rem 0}
.steps{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.1rem}
.steps li{display:flex;align-items:center;gap:.7rem;padding:.55rem .2rem;border-top:1px solid var(--stroke);font-size:14px}
.steps li:first-child{border-top:0}
.steps .ico{flex:none;width:30px;height:30px;border-radius:50%;background:var(--elev2);display:grid;place-items:center}
.steps .ico svg{width:18px;height:18px;fill:var(--brand)}
.steps .txt{flex:1;min-width:0}
.steps .d{color:var(--muted);font-size:12.5px;white-space:nowrap}
.hint{color:var(--muted);font-size:13px;margin-top:.5rem}

/* ---------- mapa ---------- */
.map-stage{position:relative;min-width:0;min-height:0}
#dir-map{position:absolute;inset:0;background:#e5e3df}
.map-tools{position:absolute;top:12px;right:12px;z-index:1000;display:grid;gap:.5rem}
.tool{width:44px;height:44px;border-radius:50%;border:1px solid var(--stroke);background:var(--elev);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.tool:hover{border-color:var(--brand);color:var(--brand)}
.tool.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.leaflet-control-attribution{font-size:11px}

.pin{position:relative;width:36px;height:36px;border-radius:50%;background:var(--c,#21a607);border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.4);display:grid;place-items:center;color:#fff;transition:transform .15s}
.pin::after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--c,#21a607);border-bottom:0}
.pin .material-icons{font-size:19px}
.pin.is-sel{transform:scale(1.3);transform-origin:50% 100%}
.pin.is-dest{--c:#dc2626}
.me{position:relative;width:22px;height:22px}
.me .dot{position:absolute;inset:3px;border-radius:50%;background:#2563eb;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.me .pulse{position:absolute;inset:-8px;border-radius:50%;background:rgba(37,99,235,.25);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.4);opacity:0}}
.me-arrow{width:44px;height:44px;display:grid;place-items:center;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.me-arrow svg{width:44px;height:44px;transition:transform .3s linear}
.start-pin{width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid #2563eb;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.pick-pin{width:28px;height:28px;border-radius:50%;background:#f59e0b;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.lbl{background:#fff;color:#111827;border:0;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.25);font:600 12px var(--f-body);padding:.15rem .5rem}
.lbl::before{display:none}
@media (prefers-reduced-motion:reduce){.me .pulse{animation:none}.spinner{animation-duration:2s}}

/* ---------- navegación guiada ---------- */
.nav-top{position:absolute;z-index:1100;top:12px;left:12px;right:12px;max-width:560px;display:flex;align-items:center;gap:1rem;background:#0b3d02;color:#fff;border-radius:18px;padding:.8rem 1rem;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.nav-icon{flex:none;width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.nav-icon svg{width:38px;height:38px;fill:#fff}
.nav-dist{font:700 1.6rem/1.1 var(--f-display)}
.nav-instr{font-size:1.02rem;opacity:.95;margin-top:.1rem}
.nav-then{position:absolute;z-index:1090;top:calc(12px + 82px);left:24px;background:#145a05;color:#fff;border-radius:0 0 12px 12px;padding:.3rem .8rem;font-size:13px;display:flex;align-items:center;gap:.4rem}
.nav-then svg{width:16px;height:16px;fill:#fff}
.nav-bottom{position:absolute;z-index:1100;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;background:var(--elev);border:1px solid var(--stroke);border-radius:18px;padding:.8rem 1rem;box-shadow:0 14px 34px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.nav-stats{display:flex;gap:1.2rem}
.nav-stats div{display:flex;flex-direction:column}
.nav-stats strong{font:700 1.15rem var(--f-display)}
.nav-stats span{color:var(--muted);font-size:12px}
.guide-actions{display:flex;gap:.5rem;align-items:center}
.guide-actions .btn{padding:.6rem .9rem}
#navVoice[aria-pressed="false"]{opacity:.55}

.arrive{position:absolute;inset:0;z-index:1200;display:grid;place-items:center;background:rgba(0,0,0,.55);padding:1rem}
.arrive-card{width:min(380px,100%);background:var(--elev);border:1px solid var(--stroke);border-radius:22px;padding:1.6rem 1.4rem;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.arrive-ico{font-size:52px;color:var(--brand)}
.arrive-card h2{font-size:1.5rem;margin:.2rem 0}
.arrive-card p{color:var(--muted);margin:0 0 1.1rem}
.arrive-actions{display:grid;gap:.5rem;margin-bottom:.6rem}
.arrive-actions .btn{width:100%;justify-content:center}

.map-toast{position:absolute;z-index:1300;left:50%;bottom:90px;transform:translateX(-50%);max-width:min(440px,calc(100% - 24px));background:#111827;color:#fff;border-radius:12px;padding:.7rem 1rem;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.45);text-align:center}

/* ---------- celular: hoja inferior ---------- */
@media (max-width:860px){
  .map-app{grid-template-columns:minmax(0,1fr);--peek:176px}
  .map-stage{position:absolute;inset:0}
  .map-panel{position:absolute;left:0;right:0;bottom:0;z-index:1200;height:var(--sheet-h,var(--peek));border-right:0;border-top:1px solid var(--stroke);border-radius:22px 22px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.45);transition:height .25s ease}
  .map-panel.is-dragging{transition:none}
  .map-panel[data-sheet="half"]{--sheet-h:52%}
  .map-panel[data-sheet="full"]{--sheet-h:calc(100% - 8px)}
  .sheet-handle{display:grid;place-items:center;width:100%;height:26px;flex:none;background:none;border:0;cursor:grab;touch-action:none}
  .sheet-handle span{width:44px;height:5px;border-radius:999px;background:var(--stroke)}
  .view{padding-top:.2rem}
  .place-photo{height:84px;margin-bottom:.6rem}
  .place-photo .material-icons{font-size:36px}
  .map-tools{top:10px}
  .leaflet-control-zoom{display:none}
  .nav-top{max-width:none}
  .nav-then{left:24px}
  .map-toast{bottom:calc(var(--peek) + 16px)}
  .map-app[data-state="nav"] .map-toast{bottom:110px}
}
@media (prefers-reduced-motion:reduce){.map-panel{transition:none}}

/* ---------- negocios muy juntos: grupo con número y texto ---------- */
.rc-cluster-wrap{background:transparent;border:0;overflow:visible}
.rc-cluster{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#2bd13a,var(--brand));color:#fff;border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.4);display:grid;place-items:center;font-weight:800;font-size:15px;transition:transform .16s ease-out}
.rc-cluster:hover{transform:scale(1.06)}
.rc-cluster-label{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;pointer-events:none;background:#fff;color:#111827;border-radius:8px;padding:3px 8px;font:700 12px/1.3 var(--f-body);box-shadow:0 3px 10px rgba(0,0,0,.28)}
.rc-cluster-label::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#fff}
.leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{transition:transform .25s cubic-bezier(.23,1,.32,1),opacity .25s}
@media (prefers-reduced-motion:reduce){.leaflet-cluster-anim .leaflet-marker-icon{transition:none}.rc-cluster{transition:none}}

/* ---------- herramienta de coordenadas (solo negocios) ---------- */
.coords-pop{min-width:210px;color:#111827;font:14px var(--f-body)}
.coords-pop .coord-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.45rem 0;padding:.4rem .55rem;border:1px solid #e5e7eb;border-radius:10px;background:#f9fafb}
.coords-pop .coord-label{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}
.coords-pop code{font:700 13.5px ui-monospace,Menlo,Consolas,monospace;color:#111827}
.coords-pop .btn{padding:.4rem .7rem;font-size:13px;color:#111827;background:#fff;border-color:#d1d5db}
.coords-pop .coord-both{width:100%;margin-top:.2rem;color:#fff;background:var(--brand);border-color:var(--brand)}