/* Mapa grande de chargetips.com: copia del de cuandocargo.es (src/Views/cargadores.php). Si cambia allí, cambiar aquí. */
  /* Mapa a pantalla completa (restyling 2026-10): filtros en pastillas arriba, mapa hasta abajo con la barra flotante encima */
  #mapaWrap{position:relative;width:100vw;left:50%;margin-left:-50vw;margin-top:-20px;height:70vh;background:#F3F6FA;overflow:hidden;display:flex;flex-direction:column}
  #mapa{position:relative;flex:1;min-height:0;background:#ECEFE9}
  /* Velo blanco translúcido mientras carga: no se ve cómo se pinta el mapa, solo la batería; al terminar se desvanece */
  #mapaCargando{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .4s;
    background:rgba(243,246,250,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  html.oscuro #mapaCargando{background:rgba(11,18,32,.88)}
  #mapaCargando.fuera{opacity:0}
  #filtros{position:absolute;left:0;right:0;top:0;display:flex;gap:8px;overflow-x:auto;padding:10px 12px;scrollbar-width:none;z-index:4;pointer-events:none}
  #filtros .chip{pointer-events:auto;box-shadow:0 4px 14px rgba(15,23,42,.14)}
  #filtros::-webkit-scrollbar{display:none}
  .chip{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid #E2E8F0;background:#fff;border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:#334155;white-space:nowrap;cursor:pointer;transition:transform .2s,background .2s,color .2s;animation:chipEntra .45s cubic-bezier(.2,.8,.2,1) both}
  .chip:hover{transform:translateY(-1px)}
  .chip.on{background:#0066CC;border-color:#0066CC;color:#fff}
  .chip[data-osm],.chip[data-osm].on{background:#fff;border-color:#E2E8F0;color:#334155}   /* capa OSM: círculo verde activada, gris desactivada */
  .osm-punto{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;background:#CBD5E1;transition:background .2s} .chip[data-osm].on .osm-punto{background:#00A651}
  #cuenta{color:#64748B;cursor:default}
  @keyframes chipEntra{from{opacity:0;transform:translateX(20px)}}
  /* Filtros de potencia con el color de sus puntos: texto de color sin seleccionar, relleno al seleccionar */
  .chip[data-pot="todas"]{color:#00A651}  .chip[data-pot="todas"].on{background:#00A651;border-color:#00A651;color:#fff}
  .chip[data-pot="rapida"]{color:#0066CC} .chip[data-pot="rapida"].on{background:#0066CC;border-color:#0066CC;color:#fff}
  .chip[data-pot="ultra"]{color:#7c3aed}  .chip[data-pot="ultra"].on{background:#7c3aed;border-color:#7c3aed;color:#fff}
  #abajo{position:absolute;left:12px;bottom:96px;z-index:4;display:flex;align-items:center;gap:8px}
  #abajo button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:0;background:#fff;color:#1E293B;font:inherit;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(15,23,42,.16);cursor:pointer}
  #abajo #cerca{color:#0066CC}
  /* Tu posición («Cerca de mí»): coche rojo con halo, o el logo de tu marca en círculo con borde rojo */
  .cc-yo{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center;pointer-events:none}
  .cc-yo .h{position:absolute;inset:0;border-radius:50%;background:rgba(220,38,38,.22);animation:ccYo 2.4s ease-out infinite}
  .cc-yo .c{position:relative;display:flex;align-items:center;justify-content:center}
  .cc-yo .c svg{width:36px;height:36px;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  .cc-yo.logo .c{width:36px;height:36px;border-radius:50%;background:#fff;border:3px solid #DC2626;box-shadow:0 2px 6px rgba(0,0,0,.3)}
  .cc-yo.logo img{width:20px;height:20px;object-fit:contain} .cc-yo.logo img.ancho{width:27px;height:13px}
  @keyframes ccYo{0%{transform:scale(.55);opacity:.95}100%{transform:scale(1.3);opacity:0}}
  @media (prefers-reduced-motion:reduce){.cc-yo .h{animation:none;transform:scale(1);opacity:.6}}
  #abajo{right:12px}   /* «Cerca de mí» a la izquierda, «Info» (solo icono) a la derecha */
  #abajo #info{margin-left:auto} #abajo #cerca,#abajo #info{padding:0;width:44px;justify-content:center}
  /* Filtro de precio: entre «Cerca de mí» e «Info» */
  #precioFiltro{position:relative;flex:1;min-width:0;max-width:320px;min-height:44px;gap:10px;padding:0 16px 0 8px;cursor:default;animation:none;box-shadow:0 4px 14px rgba(15,23,42,.16);border:0}
  #precioFiltro input{flex:1;min-width:0;accent-color:#0066CC}
  #precioIco{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#F1F5F9;color:#64748B;font-size:15px;font-weight:800}
  #precioFiltro.on #precioIco{background:#0066CC;color:#fff}
  /* Globo con el valor encima del botón del deslizador (se coloca por JS) */
  #precioTxt{position:absolute;bottom:calc(100% + 8px);transform:translateX(-50%);padding:5px 10px;border-radius:10px;background:#1E293B;color:#fff;font-size:12px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;transition:opacity .2s}
  #precioTxt::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#1E293B}
  #precioFiltro.on #precioTxt,#precioFiltro.mueve #precioTxt{opacity:1}
  #panel .f-enlaces .chip{min-height:34px;padding:0 12px;font-size:12px;color:#0066CC;animation:none}
  #panel .f-dir{text-decoration:none} #panel .f-dir:hover span{text-decoration:underline}
  #abajo #cerca.busca svg{animation:cercaLatido 1s ease-in-out infinite} @keyframes cercaLatido{50%{transform:scale(.75);opacity:.5}}
  .maplibregl-ctrl-top-right{top:66px;right:12px}   /* bajo los filtros flotantes */
  .maplibregl-ctrl-group{border-radius:14px !important;box-shadow:0 4px 14px rgba(15,23,42,.16) !important;overflow:hidden}
  .maplibregl-ctrl-group button{width:44px !important;height:44px !important}
  .maplibregl-ctrl-bottom-right{bottom:86px}
  /* Ficha y texto: hoja que sube desde abajo en el móvil; panel lateral en escritorio */
  #panel{position:absolute;left:0;right:0;bottom:0;max-height:62%;overflow-y:auto;background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.18);padding:22px 18px 96px;display:none;z-index:6;animation:hojaSube .55s cubic-bezier(.2,.8,.2,1) both}
  #panel::before{content:'';position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:#CBD5E1}
  @keyframes hojaSube{from{transform:translateY(100%)}}
  @media (min-width:640px){
    #abajo{bottom:24px} .maplibregl-ctrl-bottom-right{bottom:0}
    .maplibregl-ctrl-top-right{top:auto;bottom:80px}   /* en escritorio la ficha va arriba a la derecha: el zoom, abajo */
    #panel{left:auto;right:12px;top:12px;bottom:auto;width:380px;max-height:calc(100% - 24px);border-radius:24px;padding:18px 18px 16px;box-shadow:0 12px 40px rgba(15,23,42,.18);animation:none}
    #panel::before{display:none}
  }
  #panel [data-cerrar]{width:36px;height:36px;border-radius:50%;background:#F1F5F9;color:#475569;font-size:18px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
  #panel p.font-bold{font-size:18px;font-weight:800;line-height:1.25}
  #panel table{border-collapse:separate;border-spacing:0;background:#F8FAFC;border-radius:16px;padding:4px 12px}
  #panel table td{padding:6px 0;border-bottom:1px solid #EEF2F6} #panel table tr:last-child td{border-bottom:0}
  #panel table tr{border-top:0 !important}
  #panel .bg-green-50{border-radius:14px !important;border:1.5px solid #BBF7D0;padding:10px 12px !important;font-size:12px}
  #panel .mt-3.flex.gap-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #panel .f-acciones{grid-template-columns:46px minmax(0,1.3fr) minmax(0,1fr)!important}   /* Compartir · Cómo llegar · Avisar */
  #panel .mt-3.flex.gap-2 > a, #panel .mt-3.flex.gap-2 > button{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:14px !important;font-size:14px;font-weight:800;text-align:center}
  .ley{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
  /* Punto seleccionado (diseño: escala + ondas) */
  .pto-sel{width:22px;height:22px;pointer-events:none}
  .pto-sel span{display:block;width:22px;height:22px;border-radius:50%;border:3px solid #fff;box-sizing:border-box;box-shadow:0 2px 6px rgba(15,23,42,.3);animation:selOnda 1.8s ease-out infinite}
  @keyframes selOnda{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--onda) 60%,transparent),0 2px 6px rgba(15,23,42,.3)}100%{box-shadow:0 0 0 18px transparent,0 2px 6px rgba(15,23,42,.3)}}
  @media (prefers-reduced-motion:reduce){.pto-sel span{animation:none}}
  /* Esta página no tiene scroll en el móvil: el mapa llega hasta abajo */
  @media (max-width:639px){ .main-wrap{padding-bottom:0 !important} }