/* Youpi v141c · layout do rodapé e trava horizontal. Carregar por último no ; só regras aditivas. * 1. Logotipo na faixa de rodapé (abaixo do menu inferior), à esquerda, na mesma linha da atribuição do mapa. * 2. Nada rola nem desliza de lado: painéis só rolam na vertical, barras de rolagem escondidas no celular. */ /* ---------- 1. Logotipo no rodapé ---------- */ /* Faixa de rodapé = do fim da tela (acima da área segura) até o menu inferior: var(--shell-footer) + 8px de altura. * A atribuição (MapLibre, canto inferior direito) fica centrada a 16px do fim; o logotipo usa o mesmo centro. */ html body.map-shell { --l360-foot-h: 16px; /* altura do logotipo */ --l360-foot-left: max(var(--shell-gap), env(safe-area-inset-left, 0px)); --l360-foot-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px - var(--l360-foot-h) / 2); --l360-foot-logo-w: calc(var(--l360-foot-h) * 4.82); /* proporção do luna360-logo.svg (1444 × 300) */ /* Espaço que a atribuição deixa livre à esquerda: margem + logotipo + respiro + margem direita da atribuição. */ --l360-foot-reserve: calc(var(--l360-foot-left) + var(--l360-foot-logo-w) + 10px + 6px); } @media (min-width: 1024px) { html body.map-shell { --l360-foot-h: 18px; } } /* Posição: sempre na faixa inferior esquerda, em todos os estados do mapa (menu recolhido, gaveta aberta, * busca, "Embarquei", guia). Nada mais ocupa essa faixa, então não há sobreposição. */ html body.map-shell.map-shell-ready .map-shell-brand.brand, html body.map-shell.map-shell-ready.map-shell-dock-collapsed .map-shell-brand.brand, html body.map-shell.map-shell-ready:is(.map-shell-planner-open, .map-shell-arrivals-open, .travel-active, .journey-navigation-active, .origin-picking, .map-shell-menu-open) .map-shell-brand.brand { position: fixed; top: auto; right: auto; left: var(--l360-foot-left); bottom: var(--l360-foot-bottom); z-index: 5; display: flex; align-items: center; width: auto; height: var(--l360-foot-h); min-height: 0; margin: 0; padding: 0; border-radius: 4px; background: transparent; opacity: 1; visibility: visible; transform: none; } html body.map-shell.map-shell-ready .map-shell-brand.brand .brand-lockup { display: flex; align-items: center; gap: 0; height: 100%; } html body.map-shell.map-shell-ready .map-shell-brand.brand .brand-logo { width: auto; max-width: none; height: var(--l360-foot-h); opacity: 1; } html body.map-shell.map-shell-ready .map-shell-brand.brand small { display: none; } html body.map-shell.map-shell-ready .map-shell-brand.brand:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; } /* Viagem no tema escuro: o mapa volta às cores claras e o logotipo usa a versão para fundo claro * (brand-luna360.css); o halo acompanha, claro, em vez do halo escuro que borrava o "LunaGo". */ :root[data-theme=dark] body.map-shell.map-shell-ready.travel-active .map-shell-brand.brand .brand-logo { filter: drop-shadow(0 0 1px #f4f6fb) drop-shadow(0 0 3px #f4f6fb) !important; } /* A faixa tem 32px: não cabe um alvo de toque de 44px sem invadir o menu. No toque o logotipo é só assinatura * (o "Mapa" do menu faz o mesmo papel); com mouse e teclado continua levando ao início. */ @media (pointer: coarse) { html body.map-shell.map-shell-ready .map-shell-brand.brand { pointer-events: none; } } /* Telas de conteúdo que rolam (Comunidade, Perfil, Histórico) em celular e tablet: sem mapa nem atribuição, * o logotipo ficaria sobre o texto; o cabeçalho próprio de cada tela já identifica o app (como antes). */ @media (max-width: 1023px) { html body.map-shell.map-shell-ready[data-map-shell-view]:not([data-map-shell-view="transport"]) .map-shell-brand.brand { visibility: hidden; } } /* Tablet (601–1023): a legenda também mora na faixa; ela passa para a direita do logotipo. */ @media (min-width: 601px) and (max-width: 1023px) { html body.map-shell .map-legend, html body.map-shell.map-shell-dock-collapsed .map-legend { left: calc(var(--l360-foot-left) + var(--l360-foot-logo-w) + 12px); } } /* Atribuição: nunca por baixo do logotipo. Onde a linha única não cabe ao lado dele (celulares até 419px e * tablets estreitos 601–659px), o texto quebra em duas linhas equilibradas, no mesmo tamanho (10px). */ html body.map-shell .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact-show { max-width: calc(100vw - var(--l360-foot-reserve) - 36px); /* 36px = padding da caixa compacta (content-box) */ } /* Com a fonte do sistema ampliada (Android), os créditos inflavam e a primeira linha ia para baixo do menu; * ficam nos 10px definidos, sempre inteiros na faixa. */ html body.map-shell .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (max-width: 419px), (min-width: 601px) and (max-width: 659px) { html body.map-shell .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 1px 28px 1px 8px; border-radius: 9px; line-height: 11.5px; } html body.map-shell .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { max-width: 16.5em; text-align: right; text-wrap: balance; } } /* ---------- 2. Sem barra lateral nem deslize horizontal ---------- */ /* Página: o gesto horizontal no fim de uma faixa não arrasta a tela nem dispara o "voltar" do Chrome. */ html, body { overscroll-behavior-x: none; } /* Painéis e gavetas do mapa rolam só na vertical. Eram overflow: auto nos dois eixos, então qualquer texto * sem ponto de quebra (sentido "TERM.PRINC.ISABEL…", distância, linha) tornava a gaveta rolável de lado. */ html body.map-shell :is(#arrival-drawer, #journey-guide, #origin-map-picker, #mobile-nav, .app-shell .control-panel) { overflow-x: hidden; overscroll-behavior-x: none; } html body.map-shell :is(.travel-destination-body, .favorites-dialog-body, .city-info-body, .ta-body, .reading-dialog-body, .rail-body, .artesp-body, .circle-sheet-body) { overflow-x: hidden; } /* Causa do estouro nos cartões da gaveta: itens de grade/flex com min-width: auto e textos longos sem quebra. */ html body.map-shell #arrival-drawer :is(.arrival-list > *, .arrival-card, .arrival-card > :not(.arrival-time), .arrival-vehicle > span, .drawer-head > div:first-child, .drawer-foot, .itinerary-stop-row, .itinerary-stop, .arrival-line-badge) { min-width: 0; max-width: 100%; } html body.map-shell #arrival-drawer :is(#drawer-kicker, #drawer-distance, .arrival-destination, .arrival-live-note, .arrival-vehicle :is(strong, small), .arrival-time > span, .arrival-section-head > span, .drawer-foot, .itinerary-stop :is(strong, small), .vehicle-itinerary-summary :is(span, small, strong), #boarding-direction-label, .arrival-line-badge) { overflow-wrap: anywhere; } /* Barra vertical da gaveta e dos painéis: invisível no celular e em telas de toque (a rolagem por toque, * roda e teclado continua); no desktop, fina e discreta. */ @media (max-width: 600px), (pointer: coarse) { html body.map-shell :is(#arrival-drawer, #journey-guide, #origin-map-picker, #mobile-nav, .app-shell .control-panel) { scrollbar-width: none; } html body.map-shell :is(#arrival-drawer, #journey-guide, #origin-map-picker, #mobile-nav, .app-shell .control-panel)::-webkit-scrollbar { display: none; width: 0; height: 0; } } @media (min-width: 601px) and (pointer: fine) { html body.map-shell :is(#arrival-drawer, #journey-guide, #origin-map-picker, #mobile-nav, .app-shell .control-panel) { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 38%, transparent) transparent; } } /* Faixas horizontais intencionais (pontos próximos, linhas do ponto, filtros e atalhos): deslizam, sem barra, * e o gesto termina nelas em vez de passar para a gaveta ou para a página. */ html body :is(.nearby-stop-list, .stop-line-options, .pp-chips, .pp-quick) { scrollbar-width: none; overscroll-behavior-x: contain; } html body :is(.nearby-stop-list, .stop-line-options, .pp-chips, .pp-quick)::-webkit-scrollbar { display: none; width: 0; height: 0; } html body :is(.pp-seg, .circle-switch) { overscroll-behavior-x: contain; } @media (max-width: 600px), (pointer: coarse) { html body :is(.pp-seg, .circle-switch) { scrollbar-width: none; } html body :is(.pp-seg, .circle-switch)::-webkit-scrollbar { display: none; width: 0; height: 0; } }