/* ================= seccion de municipio (munipage.py) =================
   Sobrio a proposito: la gente tiene que ver una lista de precios creible,
   no un tablero de mandos. Sin cristales, sin resplandores y sin semaforo:
   el unico color es el naranja de la mas barata. */
.mu{margin-top:4px;}
/* Las pestanas de carburante (.fuel-tabs) no son de esta seccion, pero
   el rotulo que separa los cuatro de siempre de los otros siete si:
   flex:0 0 100% le hace empezar renglon, asi que los siete caen
   debajo en vez de mezclarse. */
.fuel-sep{flex:0 0 100%;margin:10px 0 0;font:600 10.5px/1 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.mu [hidden]{display:none!important;}
.mu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.mu-head{margin-bottom:16px;}
.mu-head .h2{margin-bottom:6px;}
.mu-head .lede{max-width:62ch;}
.mu-fuente{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0;font-size:12.5px;color:var(--dim);}
.mu-fuente svg{color:var(--accent-soft);flex:none;}
.mu-fuente a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.mu-fuente a:hover{color:var(--accent-soft);}

/* ---------- mapa y lista, uno al lado del otro ---------- */
.mu-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;height:clamp(520px,44vw,600px);}
.mu-mapa{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#14110f;}
/* el z-index encierra las chinchetas en el mapa: si no, se dibujan por
   encima de la ficha y de los botones */
.mu-mapa .mu-map{position:absolute;inset:0;z-index:1;}
.mu-mapa.activo{border-color:rgba(249,115,22,.5);}
.mu-carga{
  position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:13.5px;color:var(--dim);background:#14110f;
}
.mu-carga.err{color:var(--muted);}
.mu-spin{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--accent);animation:muGira 1s linear infinite;}
.mu-carga.err .mu-spin{display:none;}
@keyframes muGira{to{transform:rotate(360deg);}}

/* ---------- la lista ---------- */
/* align-self:start para que en un pueblo de cinco gasolineras la tarjeta mida
   lo que mide la lista y no se quede medio palmo de hueco dentro */
.mu-panel{display:flex;flex-direction:column;align-self:start;max-height:100%;min-height:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);}
.mu-panel-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:14px 16px 12px;border-bottom:1px solid var(--line);}
.mu-panel-h b{font-size:14px;font-weight:700;}
.mu-panel-h span{font-size:12.5px;color:var(--dim);}
.mu-lista{list-style:none;margin:0;padding:4px;overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}
.mu-it{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;
  padding:11px 12px;border-radius:10px;background:none;border:1px solid transparent;
  color:inherit;text-align:left;font:inherit;cursor:pointer;
}
.mu-it + .mu-it{box-shadow:none;}
.mu-lista li + li .mu-it{border-top:1px solid var(--line-soft);border-radius:10px;}
.mu-it:hover{background:rgba(255,255,255,.04);}
.mu-it.on{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.4);}
.mu-it b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mu-it small{grid-column:1;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mu-it small em{font-style:normal;color:var(--muted);}
.mu-pr{grid-row:1 / 3;grid-column:2;justify-self:end;align-self:center;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mu-it.barata .mu-pr{color:var(--accent);}
.mu-eti{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:100px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-weight:700;vertical-align:1px;}
.mu-mas{margin:4px 12px 12px;padding:12px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:none;color:var(--text);font:600 13.5px/1 var(--sans);cursor:pointer;}
.mu-mas:hover{border-color:rgba(249,115,22,.5);}
.mu-lista.corta li:nth-child(n+7){display:none;}
.mu-pie{margin:0;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);}
.mu-pie b{color:var(--text);font-variant-numeric:tabular-nums;}

/* ---------- botones del mapa ---------- */
.mu-ctl{position:absolute;z-index:5;right:10px;top:10px;display:flex;flex-direction:column;gap:8px;}
.mu-ctl button{
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;cursor:pointer;color:#e9e2d8;
  background:rgba(16,13,11,.9);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 16px -10px #000;
}
.mu-ctl button:hover{color:#fff;background:rgba(26,21,17,.95);}
.mu-grupo{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 16px -10px #000;}
.mu-grupo button{border:0;border-radius:0;box-shadow:none;}
.mu-grupo button + button{border-top:1px solid rgba(255,255,255,.1);}
.mu-ctl button.buscando{color:var(--accent);}
/* El recuadro de precios, calcado de PriceLegend.tsx de la app: quien entre
   aqui ve exactamente lo que se va a encontrar en el movil. */
.mu-caja{
  position:absolute;z-index:5;left:10px;top:10px;padding:9px 11px;border-radius:8px;
  background:rgba(0,0,0,.9);box-shadow:0 6px 16px -10px #000;font-size:12px;line-height:1.2;
}
.mu-caja p{margin:0 0 7px;font-weight:700;color:#e5e7eb;}
.mu-caja ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.mu-caja li{display:flex;align-items:center;gap:8px;color:#d1d5db;}
.mu-caja li::before{content:"";width:12px;height:12px;flex:none;border-radius:50%;border:1px solid #fff;background:var(--c);}
.mu-caja .baja{--c:#22c55e;}
.mu-caja .media{--c:#eab308;}
.mu-caja .alta{--c:#ef4444;}

/* sobra: el mapa es el de la app y la app solo tiene uno */
.mu-aviso{
  position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;max-width:78%;
  padding:11px 18px;border-radius:12px;background:rgba(0,0,0,.82);color:#fff;font-size:13.5px;font-weight:600;
  pointer-events:none;text-align:center;
}

/* ---------- chinchetas ----------
   Puntos de color, como en la app: el mapa se lee de un golpe y no hay
   treinta precios pisandose. El precio sale al pasar el raton por encima
   --o por su fila de la lista-- y, en el movil, al tocar, que abre la ficha.
   Los tres colores y la linea blanca son los de priceColor() de la app. */
.mu-pin{
  --pin:#f3ede5;--tinta:#14110e;--tx:6px;--ty:7px;
  position:relative;display:flex;align-items:stretch;margin:0 0 9px;padding:0;border:0;
  width:14px;height:14px;border-radius:50%;background:var(--pin);color:var(--tinta);
  cursor:pointer;transform:translate(var(--tx),var(--ty));
  font:700 12.5px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;
  box-shadow:0 0 0 2px #fff,0 2px 6px -2px rgba(0,0,0,.65);transition:transform .12s ease;
}
.mu-pin::after,.mu-pin .mu-pin-i,.mu-pin .mu-pin-p{display:none;}
.mu-pin.t-baja{--pin:#22c55e;--tinta:#08160d;}
.mu-pin.t-media{--pin:#eab308;--tinta:#1a1403;}
.mu-pin.t-alta{--pin:#ef4444;--tinta:#230a0a;}
/* la que no vende ese carburante: gris, el mismo de la app */
.mu-pin.muda{--pin:#6b7280;--tinta:#fff;}
/* la mas barata, un poco mas grande; la elegida, con el aro azul de la app */
.mu-pin.barata{width:18px;height:18px;--tx:4px;--ty:9px;box-shadow:0 0 0 2.5px #fff,0 3px 8px -2px #000;}
.mu-pin.on{box-shadow:0 0 0 3px #1d4ed8,0 3px 8px -2px #000;}

/* al pasar por encima, el punto se abre y ensena su precio */
.mu-pin:hover,.mu-pin.hover{
  width:auto;height:auto;border-radius:8px;--tx:0px;--ty:0px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.92),0 4px 12px -4px #000;
}
.mu-pin:hover::after,.mu-pin.hover::after{
  content:"";display:block;position:absolute;left:13px;top:100%;margin-left:-5px;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--pin);
}
.mu-pin:hover .mu-pin-i,.mu-pin.hover .mu-pin-i{
  display:grid;place-items:center;flex:none;width:26px;height:26px;
  background:rgba(0,0,0,.17);border-radius:8px 0 0 8px;
}
.mu-pin:hover .mu-pin-p,.mu-pin.hover .mu-pin-p{display:flex;align-items:center;height:26px;padding:0 9px 0 7px;}
.mu-pin-i svg{display:block;width:15px;height:15px;}
.mu-yo-mk i{display:block;width:15px;height:15px;border-radius:50%;background:#3b82f6;border:3px solid #fff;box-shadow:0 0 0 6px rgba(59,130,246,.2);}

/* ---------- ficha de la gasolinera ---------- */
.mu-ficha{
  position:absolute;z-index:6;left:12px;right:12px;bottom:12px;padding:14px 16px 13px;border-radius:14px;
  background:#14100d;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 46px -26px #000;
}
.mu-ficha-c{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;}
.mu-ficha-c b{display:block;font-size:16.5px;font-weight:800;}
.mu-ficha-c small{display:block;margin-top:3px;font-size:12.5px;color:var(--dim);}
.mu-ficha-x{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);border:0;color:var(--muted);font:19px/1 var(--sans);cursor:pointer;}
.mu-ficha-x:hover{background:rgba(255,255,255,.13);color:var(--text);}
.mu-ficha-m{margin:8px 0 11px;font-size:12.5px;line-height:1.45;color:var(--muted);}
.mu-ficha-p{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;margin-bottom:12px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.mu-ficha-p > div{display:grid;grid-template-rows:1fr auto;gap:5px;padding:9px 10px 8px;background:var(--surface-2);}
.mu-ficha-p span{font-size:11px;line-height:1.2;color:var(--dim);}
.mu-ficha-p b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);}
.mu-ficha-p .on b{color:var(--accent);}
.mu-ficha-no{margin:-3px 0 12px;font-size:12.5px;line-height:1.4;color:var(--dim);}
.mu-ficha-a{display:flex;flex-wrap:wrap;gap:8px;}
.mu-ficha-a a{display:inline-flex;align-items:center;gap:6px;font:700 12.5px/1 var(--sans);padding:11px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.2);color:var(--text);}
.mu-ficha-a a:first-child{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.mu-ficha-a a:hover{border-color:rgba(255,255,255,.45);}
.mu-ficha-a a:first-child:hover{border-color:var(--accent-soft);}

.mu-map .maplibregl-ctrl-attrib{background:rgba(10,8,6,.8);color:var(--dim);font-size:11px;}
.mu-map .maplibregl-ctrl-attrib a{color:var(--muted);}
.mu-map .maplibregl-ctrl-attrib-button{filter:invert(1);background-color:transparent;}
.mu-map .maplibregl-ctrl-bottom-right{z-index:3;}
/* la reglita de la esquina: ayuda a situarse y a creerse el mapa */
.mu-map .maplibregl-ctrl-bottom-left{z-index:3;}
.mu-map .maplibregl-ctrl-bottom-left .maplibregl-ctrl{margin:0 0 12px 12px;}
.mu-map .maplibregl-ctrl-scale{
  background:rgba(16,13,11,.78);border:1px solid rgba(255,255,255,.22);border-top:0;
  color:#d8d0c5;font:600 10.5px/1.6 var(--sans);padding:0 6px 1px;border-radius:0 0 5px 5px;
}

/* a pantalla completa el mapa se lo queda todo */
.mu-mapa:fullscreen{width:100%;height:100%;border:0;border-radius:0;}
.mu-mapa:fullscreen .mu-ficha{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 24px));}

/* ---------- que quiere decir cada color ---------- */
.mu-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 0 0;font-size:12.5px;}
.mu-lg-t{color:var(--dim);}

/* ---------- buscador ---------- */
.mu-busca{
  position:relative;z-index:8;margin-top:14px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:16px 32px;align-items:center;padding:clamp(20px,3vw,26px);border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
}
.mu-busca h3{font-size:clamp(19px,2.2vw,23px);font-weight:800;margin:0 0 6px;}
.mu-busca-t p{margin:0;color:var(--muted);font-size:14px;}
.mu-campo{position:relative;}
.mu-campo > svg{position:absolute;left:18px;top:26px;transform:translateY(-50%);color:var(--dim);pointer-events:none;}
.mu-campo input{
  width:100%;height:52px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:#0a0706;
  color:var(--text);font:500 16px/1 var(--sans);padding:0 22px 0 48px;-webkit-appearance:none;appearance:none;
}
.mu-campo input::placeholder{color:var(--dim);}
.mu-campo input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(249,115,22,.16);}
.mu-campo input::-webkit-search-cancel-button{filter:invert(1);opacity:.5;}
.mu-res{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:50;list-style:none;margin:0;padding:6px;
  border-radius:14px;background:#120d09;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 30px 60px -20px #000;max-height:380px;overflow-y:auto;
}
.mu-res a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;align-items:center;padding:10px 12px;border-radius:10px;}
.mu-res b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mu-res small{grid-column:1;color:var(--dim);font-size:12px;}
.mu-res .tag{grid-row:1 / 3;grid-column:2;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--accent-soft);white-space:nowrap;}
.mu-res .tag.aqui{color:var(--dim);}
.mu-res li[aria-selected="true"] a,.mu-res a:hover{background:rgba(255,255,255,.06);}
.mu-res .vacio{padding:12px;color:var(--dim);font-size:13.5px;}
.mu-prov{grid-column:1 / -1;display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--line);}
.mu-chips{display:flex;flex-wrap:wrap;gap:8px;}
.mu-chip{
  display:inline-flex;align-items:center;padding:9px 15px;border-radius:100px;font-size:13.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);color:var(--text);
}
.mu-chip:hover{border-color:rgba(249,115,22,.5);color:var(--accent-soft);}
.mu .btn-row{margin-top:20px;}

@media (max-width:900px){
  .mu-stage{grid-template-columns:minmax(0,1fr);height:auto;}
  .mu-mapa{height:430px;}
  .mu-lista{overflow:visible;}
  .mu-busca{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  .mu-mapa{height:390px;}
  .mu-ctl button{width:36px;height:36px;}
  .mu-caja{padding:8px 10px;font-size:11.5px;}
  .mu-leyenda{gap:6px 12px;font-size:12px;}
  /* la ficha no puede comerse el mapa */
  .mu-ficha{left:10px;right:10px;bottom:10px;padding:12px;}
  .mu-ficha-c b{font-size:15.5px;}
  .mu-ficha-m{margin:7px 0 9px;font-size:12px;}
  .mu-ficha-p{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));margin-bottom:10px;}
  .mu-ficha-p > div{padding:7px 7px 6px;gap:4px;}
  .mu-ficha-p span{font-size:9.5px;}
  .mu-ficha-p b{font-size:13px;}
  .mu-ficha-a a{padding:10px 12px;}
  .mu-busca{padding:18px;gap:14px;}
  .mu-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-18px;padding:2px 18px 6px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .mu-chips::-webkit-scrollbar{display:none;}
  .mu-chip{flex:none;scroll-snap-align:start;}
}
@media (prefers-reduced-motion:reduce){
  .mu-spin{animation-duration:2.4s;}
}