/*
  pej-bridge.css
  Camada de integração visual com o index.html
*/
html{
  --pej-tab-height:72px;
  --tab-height:72px;
  scroll-padding-top:calc(var(--note-height) + 1rem);
  scroll-padding-bottom:calc(var(--pej-tab-height) + 1rem);
}

html[data-theme] body{
  font-family:var(--ui-font)!important;
  background-color:var(--bg)!important;
  background-image:var(--texture)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  color:var(--text)!important;
  min-height:100dvh;
  padding:calc(var(--note-height) + .45rem) 0 calc(var(--pej-tab-height) + 1rem + env(safe-area-inset-bottom,0px))!important;
  overflow-x:hidden!important;
  text-align:start!important;
  touch-action:manipulation;
}

html[data-theme] body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:url('sunflower-bg-tile.svg')!important;
  background-color:transparent!important;
  background-blend-mode:normal!important;
  background-repeat:repeat!important;
  background-size:104px 104px!important;
  background-position:top left!important;
  mix-blend-mode:normal;
  filter:none;
  opacity:.92;
}

.sf-bg{display:none!important}
.skip-link{z-index:9999!important}
.note-header{z-index:300!important;min-block-size:var(--note-height)!important}
.note-header .note-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Fluxo mobile-first: navegação/filtros primeiro, apresentação compacta depois. */
.pej-app{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  gap:.72rem!important;
  max-inline-size:1180px!important;
  margin-inline:auto!important;
  padding-inline:0!important;
  outline:none!important;
  text-align:start!important;
}
.pej-app > .rp{order:1!important}
.pej-app > .ctrl{order:2!important}
.pej-app > .qf-bar{order:3!important}
.pej-app > .res-bar{order:4!important}
.pej-app > .hdr{order:5!important}
.pej-app > .grid{order:6!important}

/* Região e chips: acessíveis sem comer a tela inteira. */
.rp,.qf-bar,.ctrl,.res-bar,.grid,.hdr{
  position:relative!important;
  z-index:1!important;
  max-inline-size:1180px!important;
  margin-inline:auto!important;
  min-inline-size:0!important;
}
.rp{inline-size:100%!important;padding:.2rem .95rem 0!important}
.rbc{display:flex!important;align-items:center!important;gap:.35rem!important;margin:0 0 .42rem!important;font-size:.78rem!important;color:var(--muted)!important;min-inline-size:0!important}
.rbc-cur{font-weight:800!important;color:var(--text)!important}
.rchips{display:flex!important;gap:.45rem!important;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;scrollbar-width:none!important;padding-block:.1rem .22rem!important;min-inline-size:0!important}
.rchips::-webkit-scrollbar,.qf-bar::-webkit-scrollbar{display:none!important}
.rc,.qf{
  flex:0 0 auto!important;
  min-block-size:var(--tap)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.4rem!important;
  padding:.72rem .96rem!important;
  border-radius:var(--button-radius)!important;
  border:var(--button-border-width) var(--button-border-style) color-mix(in srgb,var(--button-border) 24%,var(--line))!important;
  background:var(--surf)!important;
  background-image:var(--button-texture)!important;
  color:var(--muted)!important;
  font-family:var(--button-font)!important;
  font-size:.88rem!important;
  font-weight:750!important;
  letter-spacing:var(--button-letter-spacing)!important;
  box-shadow:var(--button-shadow)!important;
  white-space:nowrap!important;
  max-inline-size:min(82vw,24rem)!important;
}
.rc.on,.qf.on{
  background:var(--button-bg)!important;
  background-image:var(--button-texture)!important;
  border-color:var(--button-border)!important;
  color:var(--button-text)!important;
}
.rc.hk::after{content:'›';opacity:.72;margin-inline-start:.1rem}.rdot{inline-size:.55rem!important;block-size:.55rem!important}

/* Busca é o foco operacional. Ordenação/listas/tipos são movidos para o menu global por JS. */
.ctrl{
  inline-size:100%!important;
  display:block!important;
  padding:0 .95rem!important;
  margin:0!important;
  background:transparent!important;
}
.ctrl .sw{
  position:relative!important;
  inline-size:100%!important;
  min-inline-size:0!important;
}
.ctrl .sw svg{left:.95rem!important;width:1.05rem!important;height:1.05rem!important;z-index:2!important}
.ctrl .sw input{
  inline-size:100%!important;
  min-block-size:var(--tap-lg)!important;
  padding:.95rem 1rem .95rem 2.8rem!important;
  border:1px solid var(--line)!important;
  border-radius:calc(var(--card-radius) * .55)!important;
  background:color-mix(in srgb,var(--surf) 92%,transparent)!important;
  color:var(--text)!important;
  font-family:var(--ui-font)!important;
  font-size:1rem!important;
  box-shadow:var(--shadow)!important;
  outline:none!important;
  text-align:start!important;
}
.ctrl .sw input:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent),var(--shadow)!important}
.ctrl .sw input::placeholder{color:color-mix(in srgb,var(--muted) 65%,transparent)!important}

.qf-bar{
  inline-size:100%!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain!important;
  gap:.45rem!important;
  padding:0 .95rem .05rem!important;
  margin:0!important;
}
.res-bar{
  inline-size:100%!important;
  padding:0 .95rem!important;
  margin:0!important;
  color:var(--muted)!important;
  font-size:.88rem!important;
  text-align:center!important;
}

/* O hero é um micro-dashboard. */
.hdr{
  inline-size:calc(100% - 1.9rem)!important;
  margin:0 .95rem!important;
  padding:.65rem!important;
  border:1px solid var(--line)!important;
  border-radius:var(--card-radius)!important;
  background:color-mix(in srgb,var(--surf) 88%,transparent)!important;
  background-image:none!important;
  color:var(--text)!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden!important;
}
.hdr::before{display:none!important}
.hdr-in{position:relative!important;display:block!important;min-inline-size:0!important}
.hdr .eyebrow,.hdr h1,.hdr .hdr-sub,.hdr .hdr-acts{display:none!important}
.stat-bar{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:.42rem!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  min-inline-size:0!important;
}
.stat-item{
  min-inline-size:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.12rem!important;
  padding:.48rem .22rem!important;
  border:1px solid var(--line)!important;
  border-radius:calc(var(--card-radius) * .45)!important;
  background:var(--surf-2)!important;
  text-align:center!important;
}
.stat-num{font-family:var(--display-font)!important;font-size:clamp(1.05rem,5vw,1.5rem)!important;line-height:1!important;color:var(--brand)!important;font-weight:800!important}
.stat-label{font-size:.62rem!important;color:var(--muted)!important;letter-spacing:.04em!important;line-height:1.1!important;max-inline-size:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* Cards/lista */
.grid{
  inline-size:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:.85rem!important;
  padding:0 .95rem calc(var(--pej-tab-height) + 1.25rem + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
}
.card{
  border-radius:var(--card-radius)!important;
  box-shadow:var(--shadow)!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  text-align:start!important;
  background:color-mix(in srgb,var(--surf) 94%,transparent)!important;
  border-color:var(--line)!important;
  overflow:hidden!important;
}
.card *,.modal *,.ovmsheet *,.bksheet *,.global-menu *{min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere}
.ctitle,.mdesc,.mloc,#mid,.cdesc{overflow-wrap:anywhere;word-break:normal}
.hide-poi{min-inline-size:2.35rem!important;min-block-size:2.35rem!important;line-height:2.35rem!important;display:grid!important;place-items:center!important}
.hdiv-btn{font-family:var(--button-font)!important;border-radius:var(--button-radius)!important;min-block-size:var(--tap)!important}

/* Filtros avançados no menu global. */
.pej-menu-control{display:grid!important;gap:.45rem!important}
.pej-menu-control label,.pej-menu-note{font-size:.75rem!important;line-height:1.35!important;color:var(--muted)!important;font-weight:750!important;text-align:start!important}
.global-menu .sort-sel{
  inline-size:100%!important;
  min-block-size:var(--tap)!important;
  padding:.72rem .85rem!important;
  border-radius:var(--button-radius)!important;
  border:1px solid var(--line)!important;
  background:var(--surf)!important;
  color:var(--text)!important;
  font-family:var(--button-font)!important;
  font-weight:750!important;
  font-size:.92rem!important;
  text-align:start!important;
}
.global-menu .type-filters{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:.45rem!important;
  font-size:.92rem!important;
  color:var(--text)!important;
}
.global-menu .type-filters label{
  display:flex!important;
  align-items:center!important;
  gap:.55rem!important;
  min-block-size:var(--tap)!important;
  padding:.62rem .78rem!important;
  border:1px solid var(--line)!important;
  border-radius:var(--button-radius)!important;
  background:var(--surf-2)!important;
  color:var(--text)!important;
  font-family:var(--button-font)!important;
  font-weight:750!important;
  cursor:pointer!important;
}
.global-menu .type-filters input[type="checkbox"]{inline-size:1.15rem!important;block-size:1.15rem!important;accent-color:var(--brand)!important}

/* Modais contidos na viewport real. */
.mbg,.ovmbg,.bkbg{
  inset-block-start:var(--note-height)!important;
  inset-block-end:calc(var(--pej-tab-height) + env(safe-area-inset-bottom,0px))!important;
  inset-inline:0!important;
  height:auto!important;
  padding:.65rem!important;
  z-index:900!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overscroll-behavior:contain!important;
  overflow:hidden!important;
}
.ovmbg{z-index:910!important}.bkbg{z-index:920!important}
.modal,.ovmsheet,.bksheet{
  inline-size:min(100%,760px)!important;
  max-inline-size:calc(100dvw - 1.3rem)!important;
  max-block-size:calc(100dvh - var(--note-height) - var(--pej-tab-height) - 1.6rem - env(safe-area-inset-bottom,0px))!important;
  border-radius:var(--card-radius)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  background:var(--surf)!important;
  box-shadow:var(--deep-shadow)!important;
}
.ovmsheet{height:calc(100dvh - var(--note-height) - var(--pej-tab-height) - 1.6rem - env(safe-area-inset-bottom,0px))!important}
.bksheet{padding-block-end:1.2rem!important}
.mhero{max-inline-size:100%!important;overflow:hidden!important}
#poi-map,#ovm-map{max-inline-size:100%!important;min-block-size:220px!important}.leaflet-container{font-family:var(--ui-font)!important}
.bktxt{min-block-size:9rem!important;inline-size:100%!important;overflow:auto!important;white-space:pre-wrap!important;word-break:break-all!important}

/* Barra e 3-dot com alvo grande para polegar humano. */
.footer.universal-global-tab{
  position:fixed!important;
  z-index:850!important;
  inset-inline:0!important;
  inset-block-end:0!important;
  min-block-size:calc(var(--pej-tab-height) + env(safe-area-inset-bottom,0px))!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  gap:.5rem!important;
  padding:.48rem .55rem max(.48rem,env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  clear:none!important;
  background:var(--bar-bg)!important;
  color:var(--bar-text)!important;
  backdrop-filter:var(--bar-backdrop)!important;
  border-block-start:2px solid color-mix(in srgb,var(--bar-bg) 72%,#fff)!important;
  border-radius:var(--tab-radius) var(--tab-radius) 0 0!important;
  box-shadow:var(--deep-shadow)!important;
  text-align:right!important;
}
.ugt-main{
  flex:1 1 auto!important;
  min-inline-size:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  padding:.35rem .65rem!important;
}
.ugt-kicker{font-size:.68rem!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--bar-muted)!important;font-weight:800!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-inline-size:100%!important}
.ugt-title{font-family:var(--display-font)!important;font-size:clamp(1.22rem,5.8vw,1.95rem)!important;line-height:1.05!important;font-weight:800!important;color:var(--bar-text)!important;max-inline-size:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.dot-menu{
  flex:0 0 var(--pej-tab-height)!important;
  inline-size:var(--pej-tab-height)!important;
  min-inline-size:var(--pej-tab-height)!important;
  block-size:calc(var(--pej-tab-height) - .96rem)!important;
  min-block-size:calc(var(--pej-tab-height) - .96rem)!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  border:2px solid color-mix(in srgb,var(--bar-bg) 58%,#fff)!important;
  border-radius:calc(var(--tab-radius) - 4px)!important;
  background:color-mix(in srgb,var(--bar-bg) 82%,#fff)!important;
  background-image:var(--button-texture)!important;
  color:var(--bar-text)!important;
  font-family:var(--button-font)!important;
  box-shadow:var(--button-inset)!important;
  font-size:2.75rem!important;
  line-height:1!important;
  padding:0!important;
}
.dot-menu span{transform:translateY(-2px)!important;display:block!important;line-height:1!important}
.dot-menu[aria-expanded="true"]{background:var(--button-bg)!important;color:var(--button-text)!important;filter:brightness(1.05)!important}

.global-menu{
  z-index:860!important;
  inset-inline-end:max(.55rem,env(safe-area-inset-right,0px))!important;
  inset-block-end:calc(var(--pej-tab-height) + .72rem + env(safe-area-inset-bottom,0px))!important;
  inline-size:min(26rem,calc(100dvw - 1.1rem))!important;
  max-block-size:calc(100dvh - var(--note-height) - var(--pej-tab-height) - 2.1rem - env(safe-area-inset-bottom,0px))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  display:grid!important;
  gap:.62rem!important;
  padding:.72rem!important;
  background:var(--menu-bg)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--menu-radius)!important;
  box-shadow:var(--deep-shadow)!important;
  backdrop-filter:var(--bar-backdrop)!important;
  text-align:right!important;
}
.global-menu[hidden]{display:none!important}
.menu-block{min-inline-size:0!important;display:grid!important;gap:.5rem!important;padding:.62rem!important;border:1px solid var(--line)!important;border-radius:var(--rs)!important;background:color-mix(in srgb,var(--surf) 78%,transparent)!important;backdrop-filter:var(--card-backdrop)!important}
.menu-title,.menu-label{font-size:.68rem!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.14em!important;color:var(--muted)!important}
.menu-action{
  inline-size:100%!important;
  min-block-size:var(--tap)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.5rem!important;
  padding:.72rem .88rem!important;
  border-radius:var(--button-radius)!important;
  background:var(--button-bg)!important;
  background-image:var(--button-texture)!important;
  border:var(--button-border-width) var(--button-border-style) var(--button-border)!important;
  color:var(--button-text)!important;
  font-family:var(--button-font)!important;
  letter-spacing:var(--button-letter-spacing)!important;
  text-transform:var(--button-case)!important;
  box-shadow:var(--button-shadow)!important;
  font-size:.96rem!important;
  font-weight:800!important;
  text-align:right!important;
}
.settings-block summary,.settings-subblock summary{text-align:right!important}
.theme-trigger{min-block-size:var(--tap)!important}
.segmented{justify-content:flex-end!important}.seg-btn{min-block-size:var(--tap)!important}

html[data-hand="Canhoto"] .footer.universal-global-tab{flex-direction:row-reverse!important;text-align:left!important}
html[data-hand="Canhoto"] .ugt-main{align-items:flex-start!important}
html[data-hand="Canhoto"] .global-menu{inset-inline-start:max(.55rem,env(safe-area-inset-left,0px))!important;inset-inline-end:auto!important;text-align:left!important}
html[data-hand="Canhoto"] .menu-action{justify-content:flex-start!important;text-align:left!important}
html[data-hand="Canhoto"] .settings-block summary,html[data-hand="Canhoto"] .settings-subblock summary{text-align:left!important}
html[data-hand="Canhoto"] .segmented{justify-content:flex-start!important}
html[data-hand="Canhoto"] .theme-trigger,html[data-hand="Canhoto"] .theme-option{justify-content:flex-start!important;text-align:left!important}

#sf-pop{z-index:9999!important}.hint{font-size:.78rem!important;line-height:1.5!important;color:var(--muted)!important;text-align:start!important}

@media(min-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-inline:1.2rem!important}
  .rp,.ctrl,.qf-bar,.res-bar{padding-inline:1.2rem!important}
  .hdr{inline-size:calc(100% - 2.4rem)!important;margin-inline:1.2rem!important}
}
@media(min-width:1040px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pej-app > .hdr{order:0!important}
  .hdr .eyebrow,.hdr h1,.hdr .hdr-sub{display:block!important}
  .hdr{padding:1rem 1.15rem!important}
  .hdr h1{font-family:var(--display-font)!important;font-size:clamp(1.5rem,3vw,2.2rem)!important;color:var(--text)!important;margin:.2rem 0!important}
  .hdr h1 em{color:var(--brand)!important}
  .hdr-sub{color:var(--muted)!important}
  .eyebrow{color:var(--muted)!important}
}
@media(max-width:520px){
  .stat-bar{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .stat-item:nth-child(4),.stat-item:nth-child(5){display:none!important}
  .modal,.ovmsheet,.bksheet{inline-size:100%!important;max-inline-size:100%!important}
  .mbg,.ovmbg,.bkbg{padding:.5rem!important;align-items:flex-end!important}
  .global-menu{inline-size:calc(100dvw - .9rem)!important;inset-inline-end:.45rem!important}
}

/* precisa seguir o fluxo esperado do index.html: workflow ancorado de baixo para cima.
   */
html{
  --pej-tab-height:88px;
  --tab-height:88px;
}
html[data-theme] body{
  overflow:hidden!important;
  padding:calc(var(--note-height) + .45rem) 0 calc(var(--pej-tab-height) + env(safe-area-inset-bottom,0px))!important;
}
.pej-app{
  display:flex!important;
  flex-direction:column-reverse!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:.72rem!important;
  block-size:calc(100dvh - var(--note-height) - var(--pej-tab-height) - .95rem - env(safe-area-inset-bottom,0px))!important;
  min-block-size:18rem!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable both-edges!important;
  scroll-padding-block:1rem!important;
  padding-block:.45rem .1rem!important;
  padding-inline:0!important;
}
/* Ordem operacional em column-reverse: order menor fica mais perto da barra global.
   A lista é o workflow primário. Os filtros sobem acima dela. */
.pej-app > .grid{order:1!important}
.pej-app > .hdr{order:2!important}
.pej-app > .res-bar{order:3!important}
.pej-app > .qf-bar{order:4!important}
.pej-app > .ctrl{order:5!important}
.pej-app > .rp{order:6!important}

/* Em mobile, a lista também lê de baixo para cima. O primeiro lugar da ordenação fica
   junto da área operacional inferior, não perdido no topo do documento. */
.grid{
  display:flex!important;
  flex-direction:column-reverse!important;
  gap:.85rem!important;
  padding:0 .95rem .75rem!important;
  margin:0!important;
}
.grid > *{flex:0 0 auto!important}
.hdr{margin-block:.05rem!important}
.res-bar{padding-block:.15rem!important}
.ctrl{padding-block:.05rem!important}
.rp{padding-block:.1rem 0!important}

/* Título global com a mesma intenção visual do hero. */
.footer.universal-global-tab{
  min-block-size:calc(var(--pej-tab-height) + env(safe-area-inset-bottom,0px))!important;
}
.ugt-main{
  justify-content:center!important;
  gap:.08rem!important;
  padding:.35rem .55rem!important;
}
#globalTitle.ugt-title,
.ugt-title#globalTitle{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1!important;
  max-inline-size:100%!important;
  text-align:right!important;
}
.pej-global-title-main{
  display:block!important;
  font-family:var(--display-font)!important;
  font-size:clamp(.95rem,4.25vw,1.42rem)!important;
  line-height:.98!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  color:var(--bar-text)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.15)!important;
}
.pej-global-title-sub{
  display:block!important;
  font-family:var(--display-font)!important;
  font-size:clamp(.82rem,3.85vw,1.22rem)!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.035em!important;
  color:color-mix(in srgb,var(--bar-text) 88%,transparent)!important;
}
.pej-global-title-names{
  font-style:italic!important;
  color:#9ffcff!important;
  text-shadow:0 0 14px rgba(159,252,255,.42)!important;
}
#globalKicker.ugt-kicker,
.ugt-kicker#globalKicker{
  font-size:clamp(.56rem,2.65vw,.72rem)!important;
  letter-spacing:.18em!important;
  line-height:1.05!important;
  max-inline-size:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
html[data-hand="Canhoto"] #globalTitle.ugt-title,
html[data-hand="Canhoto"] .ugt-title#globalTitle{
  align-items:flex-start!important;
  text-align:left!important;
}

@media(min-width:720px){
  html[data-theme] body{overflow:auto!important}
  .pej-app{
    block-size:auto!important;
    min-block-size:0!important;
    overflow:visible!important;
    flex-direction:column!important;
    padding-block:.6rem!important;
  }
  .pej-app > .hdr{order:1!important}
  .pej-app > .rp{order:2!important}
  .pej-app > .ctrl{order:3!important}
  .pej-app > .qf-bar{order:4!important}
  .pej-app > .res-bar{order:5!important}
  .pej-app > .grid{order:6!important}
  .grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.85rem!important;
    padding:0 1.2rem calc(var(--pej-tab-height) + 1.25rem + env(safe-area-inset-bottom,0px))!important;
  }
}
@media(min-width:1040px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pej-app > .hdr{order:1!important}
}
@media(max-width:420px){
  .pej-global-title-main{font-size:clamp(.86rem,4vw,1.05rem)!important}
  .pej-global-title-sub{font-size:clamp(.74rem,3.55vw,.96rem)!important}
  .dot-menu{flex-basis:72px!important;inline-size:72px!important;min-inline-size:72px!important}
}

/* lista em cima, dock operacional fixo embaixo.
   Primeiro POI fica imediatamente acima de busca/contadores/filtros, como a base-main pede.
   */
@media(max-width:719.98px){
  html{
    --pej-tab-height:88px;
    --tab-height:88px;
    scroll-padding-bottom:calc(var(--pej-tab-height) + .75rem);
  }
  html[data-theme] body{
    overflow:hidden!important;
    padding:calc(var(--note-height) + .35rem) 0 calc(var(--pej-tab-height) + env(safe-area-inset-bottom,0px))!important;
  }

  .pej-app{
    display:flex!important;
    flex-direction:column!important;
    justify-content:stretch!important;
    align-items:stretch!important;
    gap:.55rem!important;
    block-size:calc(var(--vvh, 100dvh) - var(--note-height) - var(--pej-tab-height) - .75rem - env(safe-area-inset-bottom,0px))!important;
    min-block-size:20rem!important;
    overflow:hidden!important;
    padding:.35rem 0 .45rem!important;
    margin:0 auto!important;
  }

  .pej-dock{
    order:2!important;
    flex:0 0 auto!important;
    position:relative!important;
    z-index:20!important;
    inline-size:calc(100% - 1.1rem)!important;
    max-inline-size:1180px!important;
    margin:0 .55rem!important;
    padding:.5rem!important;
    display:grid!important;
    gap:.45rem!important;
    border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line))!important;
    border-radius:calc(var(--card-radius) * .72)!important;
    background:color-mix(in srgb,var(--surf) 86%,transparent)!important;
    background-image:var(--card-texture)!important;
    box-shadow:0 -12px 30px rgba(43,8,69,.12), var(--shadow)!important;
    backdrop-filter:var(--card-backdrop)!important;
    overflow:hidden!important;
    min-inline-size:0!important;
    max-block-size:min(46dvh, 22rem)!important;
  }

  .pej-dock-core{
    display:grid!important;
    gap:.42rem!important;
    min-inline-size:0!important;
  }
  .pej-dock-filters{
    display:grid!important;
    gap:.38rem!important;
    min-inline-size:0!important;
  }

  .pej-dock .res-bar{
    order:1!important;
    inline-size:100%!important;
    padding:0!important;
    margin:0!important;
    text-align:center!important;
    font-size:.74rem!important;
    line-height:1.15!important;
    color:var(--muted)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .pej-dock .hdr{
    order:2!important;
    inline-size:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .pej-dock .hdr-in{display:block!important}
  .pej-dock .hdr .eyebrow,
  .pej-dock .hdr h1,
  .pej-dock .hdr .hdr-sub,
  .pej-dock .hdr .hdr-acts{display:none!important}

  .pej-dock .stat-bar{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:.32rem!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .pej-dock .stat-item,
  .pej-dock .stat-item:nth-child(4),
  .pej-dock .stat-item:nth-child(5){
    display:flex!important;
    min-inline-size:0!important;
    min-block-size:2.65rem!important;
    padding:.34rem .12rem!important;
    border-radius:calc(var(--card-radius) * .38)!important;
    background:color-mix(in srgb,var(--surf-2) 82%,transparent)!important;
    border:1px solid var(--line)!important;
  }
  .pej-dock .stat-num{
    font-size:clamp(1rem,4.7vw,1.34rem)!important;
    line-height:.96!important;
  }
  .pej-dock .stat-label{
    font-size:clamp(.48rem,2.15vw,.58rem)!important;
    line-height:1.05!important;
    letter-spacing:.02em!important;
  }

  .pej-dock .ctrl{
    order:3!important;
    inline-size:100%!important;
    padding:0!important;
    margin:0!important;
  }
  .pej-dock .ctrl .sw input{
    min-block-size:2.95rem!important;
    border-radius:calc(var(--card-radius) * .52)!important;
    box-shadow:0 5px 16px rgba(43,8,69,.08)!important;
    background:color-mix(in srgb,var(--surf) 94%,transparent)!important;
  }

  .pej-dock .qf-bar{
    order:1!important;
    inline-size:100%!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:.38rem!important;
    scrollbar-width:none!important;
  }
  .pej-dock .qf-bar::-webkit-scrollbar{display:none!important}
  .pej-dock .qf{
    min-block-size:2.55rem!important;
    padding:.58rem .78rem!important;
    font-size:.78rem!important;
  }

  .pej-dock .rp{
    order:2!important;
    inline-size:100%!important;
    padding:0!important;
    margin:0!important;
  }
  .pej-dock .rbc{
    display:none!important;
  }
  .pej-dock .rchips{
    padding:0!important;
    gap:.38rem!important;
  }
  .pej-dock .rc{
    min-block-size:2.55rem!important;
    padding:.58rem .78rem!important;
    font-size:.78rem!important;
  }

  .pej-app > .grid,
  .grid{
    order:1!important;
    flex:1 1 auto!important;
    min-block-size:0!important;
    inline-size:100%!important;
    display:flex!important;
    flex-direction:column-reverse!important;
    gap:.78rem!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable both-edges!important;
    padding:.15rem .95rem .1rem!important;
    margin:0!important;
    scroll-padding-block:.75rem!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .grid > *{flex:0 0 auto!important}
  .grid:focus{outline:none!important}

  .card{
    border-radius:calc(var(--card-radius) * .68)!important;
  }
}

@media(min-width:720px){
  .pej-app{
    display:flex!important;
    flex-direction:column!important;
    block-size:auto!important;
    min-block-size:0!important;
    overflow:visible!important;
    padding-block:.6rem!important;
  }
  .pej-dock{
    order:1!important;
    inline-size:calc(100% - 2.4rem)!important;
    max-inline-size:1180px!important;
    margin:0 auto .85rem!important;
    padding:.85rem!important;
    display:grid!important;
    gap:.65rem!important;
    border:1px solid var(--line)!important;
    border-radius:var(--card-radius)!important;
    background:color-mix(in srgb,var(--surf) 86%,transparent)!important;
    box-shadow:var(--shadow)!important;
    backdrop-filter:var(--card-backdrop)!important;
  }
  .pej-dock-core,
  .pej-dock-filters{display:grid!important;gap:.6rem!important;min-inline-size:0!important}
  .pej-dock .hdr{inline-size:100%!important;margin:0!important}
  .pej-dock .qf-bar,
  .pej-dock .rp,
  .pej-dock .ctrl,
  .pej-dock .res-bar{padding-inline:0!important;margin-inline:0!important;inline-size:100%!important}
  .pej-app > .grid,
  .grid{
    order:2!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.85rem!important;
    overflow:visible!important;
    padding:0 1.2rem calc(var(--pej-tab-height) + 1.25rem + env(safe-area-inset-bottom,0px))!important;
  }
}
@media(min-width:1040px){
  .pej-app > .grid,
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}