/* v275t map-sheet filter pills: thin white idle, thick white + lift when selected */
html body #mapKinds button{border:1px solid rgba(255,255,255,.55)!important;background:#2B3037!important;color:#fff!important;box-shadow:none!important;transform:translateY(0) scale(1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,border-width .18s ease}
html body #mapKinds button.active{border:3px solid #fff!important;transform:translateY(-3px) scale(1.05);box-shadow:0 6px 14px rgba(0,0,0,.45)!important;font-weight:800}
html body[data-mode="day"] #mapKinds button{border-color:#858A92!important;background:#fff!important;color:#2B3037!important}
html body[data-mode="day"] #mapKinds button.active{border-color:#2B3037!important;box-shadow:0 6px 14px rgba(43,48,55,.28)!important}
/* !important needed: mapsheet.css sets padding with !important */
html body:not(#_r):not(#_s):not(#_t) .map-home #bottomSheet .sheet-kinds #mapKinds#mapKinds{padding-top:6px!important;padding-bottom:4px!important}
#mapKinds button.pill-pop{animation:pillPop .26s ease}
@keyframes pillPop{0%{transform:translateY(-3px) scale(1.05)}45%{transform:translateY(-4px) scale(1.12)}100%{transform:translateY(-3px) scale(1.05)}}
@media (prefers-reduced-motion:reduce){#mapKinds button{transition:none}#mapKinds button.pill-pop{animation:none}}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #mapKinds button.kind-truck.active{background:#2B3037!important;border-color:#fff!important;box-shadow:0 6px 14px rgba(0,0,0,.45)!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t) #mapKinds button.kind-truck.active,html body[data-mode]:not(#_r):not(#_s):not(#_t) #mapKinds button.kind-truck.active *{color:#fff!important}
html body[data-mode="day"]:not(#_r):not(#_s):not(#_t) #mapKinds button.kind-truck.active{background:#fff!important;border-color:#2B3037!important;box-shadow:0 6px 14px rgba(43,48,55,.28)!important}
html body[data-mode="day"]:not(#_r):not(#_s):not(#_t) #mapKinds button.kind-truck.active,html body[data-mode="day"]:not(#_r):not(#_s):not(#_t) #mapKinds button.kind-truck.active *{color:#2B3037!important}
/* v278m10: Food trucks selected = same as Shops/Benefit (light fill + green ring Night; dark fill + green ring Day), map + List */
html body[data-mode]:not(#_r):not(#_s):not(#_t):not(#_u):not(#_v) .kind-chips button.kind-truck.active{background:#F4F6F8!important;background-image:none!important;border-color:#F4F6F8!important;color:#0B0B0B!important;box-shadow:0 0 0 2px #22c55e,0 0 10px rgba(34,197,94,.45)!important}
html body[data-mode="day"]:not(#_r):not(#_s):not(#_t):not(#_u):not(#_v) .kind-chips button.kind-truck.active{background:#0B0B0B!important;border-color:#0B0B0B!important;color:#fff!important}
html body[data-mode]:not(#_r):not(#_s):not(#_t):not(#_u):not(#_v) .kind-chips button.kind-truck.active *{color:inherit!important}
/* v278m10: pill rows scroll like native: momentum, no snap, contained, horizontal-only gestures */
html body #mapKinds,html body #listKinds{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:none!important;touch-action:pan-x pan-y;scroll-behavior:auto!important}
html body #mapKinds>*,html body #listKinds>*{scroll-snap-align:none!important}
html body #mapKinds,html body #mapKinds>*{touch-action:pan-x!important}
html body .kc-arrow{touch-action:none} /* v278m14 */
/* v278m15: arrows live in their own 40px gutters beside the pill row; they never cover a pill, so every drag on the row scrolls it */
@media (max-width:899px){
  html body:not(#_r):not(#_s):not(#_t) .kc-wrap{position:relative!important;padding-left:40px!important;padding-right:40px!important;box-sizing:border-box}
  html body:not(#_r):not(#_s):not(#_t) .kc-wrap>#mapKinds,html body:not(#_r):not(#_s):not(#_t) .kc-wrap>#listKinds,html body:not(#_r):not(#_s):not(#_t) .kc-wrap .kind-chips{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
  html body:not(#_r):not(#_s):not(#_t) .kc-wrap .kc-arrow:not([hidden]){width:40px!important;background:none!important;justify-content:center!important}
  html body:not(#_r):not(#_s):not(#_t) .kc-wrap .kc-l{left:0!important}
  html body:not(#_r):not(#_s):not(#_t) .kc-wrap .kc-r{right:0!important}
}
.ft-card[hidden],.sheet-card[hidden]{display:none!important}
/* v278n14: map-sheet row: the side gutters are part of the native scroller (row padding), so a touch anywhere on the row, gaps and empty gutters included, scrolls it natively. Arrows overlay the edges, tap-only. */
@media (max-width:899px){
  html body:not(#_r):not(#_s):not(#_t):not(#_u) .map-home #bottomSheet .sheet-kinds.kc-wrap{padding-left:0!important;padding-right:0!important;touch-action:pan-x!important}
  html body:not(#_r):not(#_s):not(#_t):not(#_u) .map-home #bottomSheet .sheet-kinds.kc-wrap>#mapKinds{padding-left:40px!important;padding-right:40px!important;scroll-padding-inline:40px;overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x!important;overscroll-behavior:contain!important;scroll-behavior:auto!important}
}
/* v278n16: Profile (signed out) — the in-app Back bar already clears the top bar; drop the header's extra top spacing under it */
html:not(.ls-map) body:not(#_r):not(#_s):not(#_t):not(#_u):not(#_v) .screen > .b4u-backbar + .screen-head{padding-top:6px!important;min-height:0!important}
html body .screen > .b4u-backbar + .screen-head > h1{margin-top:4px!important}
/* v278n16: ‹ / › sit in a solid-to-clear fade over the 40px gutter so a pill sliding under never looks clipped by the arrow */
@media (max-width:899px){
  html body:not(#_r):not(#_s):not(#_t):not(#_u) .kc-wrap .kc-arrow:not([hidden]){width:44px!important;z-index:31!important}
  html body:not(#_r):not(#_s):not(#_t):not(#_u):not([data-mode="night"]) .map-home #bottomSheet .kc-wrap .kc-l{background:linear-gradient(90deg,#F5F0E8 62%,rgba(245,240,232,0))!important}
  html body:not(#_r):not(#_s):not(#_t):not(#_u):not([data-mode="night"]) .map-home #bottomSheet .kc-wrap .kc-r{background:linear-gradient(270deg,#F5F0E8 62%,rgba(245,240,232,0))!important}
  html body[data-mode="night"]:not(#_r):not(#_s):not(#_t):not(#_u) .map-home #bottomSheet .kc-wrap .kc-l{background:linear-gradient(90deg,#0c1016 62%,rgba(12,16,22,0))!important}
  html body[data-mode="night"]:not(#_r):not(#_s):not(#_t):not(#_u) .map-home #bottomSheet .kc-wrap .kc-r{background:linear-gradient(270deg,#0c1016 62%,rgba(12,16,22,0))!important}
  html body:not(#_r):not(#_s):not(#_t):not(#_u) .list-kinds.kc-wrap .kc-l{background:linear-gradient(90deg,var(--bg) 62%,transparent)!important}
  html body:not(#_r):not(#_s):not(#_t):not(#_u) .list-kinds.kc-wrap .kc-r{background:linear-gradient(270deg,var(--bg) 62%,transparent)!important}
}
/* v278n16: real gutter — while an arrow shows, the row's content is masked out under it (the gutter stays draggable) */
@media (max-width:899px){
  html body .kc-wrap.kc-al > .kc-row, html body .kc-wrap.kc-al > #mapKinds, html body .kc-wrap.kc-al > #listKinds{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 40px,#000 52px);mask-image:linear-gradient(90deg,transparent 0,transparent 40px,#000 52px)}
  html body .kc-wrap.kc-ar > #mapKinds, html body .kc-wrap.kc-ar > #listKinds{-webkit-mask-image:linear-gradient(270deg,transparent 0,transparent 40px,#000 52px);mask-image:linear-gradient(270deg,transparent 0,transparent 40px,#000 52px)}
  html body .kc-wrap.kc-al.kc-ar > #mapKinds, html body .kc-wrap.kc-al.kc-ar > #listKinds{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 40px,#000 52px,#000 calc(100% - 52px),transparent calc(100% - 40px));mask-image:linear-gradient(90deg,transparent 0,transparent 40px,#000 52px,#000 calc(100% - 52px),transparent calc(100% - 40px))}
}
html body #app .screen > nav.fx-links{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box} /* v278n18: Alertas / Mi ruta cards get normal side padding */