/*
 * Barra do topo no celular — regra única para todas as telas que usam
 * `.topbar` / `.topbar-marca` (cada tela tem o próprio <style>, este arquivo
 * vem depois e só age abaixo de 640px).
 *
 * Linha 1: botão de voltar só com a seta, logo menor e o título com até 2
 * linhas (nunca cortado no meio da palavra quando cabe). Linha 2: botões e
 * filtros numa faixa que rola de lado. A bolinha da conta fica fixa no canto
 * direito, por isso a barra reserva espaço para ela.
 */
@media (max-width: 640px) {
    .topbar { padding: 10px 62px 10px 12px !important; gap: 8px !important; }
    .topbar-marca { width: 100%; min-width: 0; flex-wrap: nowrap !important; gap: 8px !important; }

    /* Voltar: só a seta, centralizada num círculo de 38 px, igual em toda
       tela. Vale para qualquer botão de voltar da barra do topo (dentro ou
       fora do bloco da logo). Sem espaço entre a seta e o texto escondido:
       era o que deslocava a seta em algumas telas. O texto continua para
       leitor de tela. */
    .topbar a.btn-pill:has(> .fa-arrow-left) {
        position: relative; flex: 0 0 38px; width: 38px; min-width: 38px; height: 38px;
        padding: 0 !important; gap: 0 !important; margin: 0;
        display: inline-flex !important; align-items: center; justify-content: center;
        line-height: 1; font-size: 0 !important; overflow: hidden; color: var(--tinta, #222);
    }
    .topbar a.btn-pill:has(> .fa-arrow-left) > :not(i) { display: none; }
    .topbar a.btn-pill:has(> .fa-arrow-left) > i { font-size: 1rem; margin: 0 !important; width: 1em; text-align: center; }

    .topbar-marca .marca-logo { flex: 0 0 auto; height: 34px !important; max-width: 100px !important; }
    .topbar-marca .marca-separador { display: none; }

    .topbar-marca h4, .topbar-marca h5, .topbar-marca .topbar-titulo {
        flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem !important; line-height: 1.2;
        white-space: normal !important; overflow: hidden; text-overflow: ellipsis;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    }

    /* Ações e filtros: faixa rolável de largura cheia. */
    .topbar > .d-flex, .topbar > .topbar-acoes, .topbar > form {
        width: 100%; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .topbar > .d-flex::-webkit-scrollbar, .topbar > .topbar-acoes::-webkit-scrollbar { display: none; }
    .topbar .btn-pill { flex-shrink: 0; }

    /* Espaço no fim da página para o link de rodapé e o botão "Instalar app"
       não taparem o último conteúdo. */
    body { padding-bottom: 56px; }
}

/*
 * Faixa de ações em QUALQUER largura (16/10/2026): com muitos botões a faixa
 * passava da tela no computador e os últimos ficavam escondidos. Agora ela
 * rola de lado (barra fina visível, roda do mouse e arrastar — ver
 * barra_rolavel.js) e mostra um esmaecido no lado que ainda tem botões.
 */
.topbar-acoes,
.topbar > .d-flex:has(> .btn-pill ~ .btn-pill):not(.topbar-marca) {
    min-width: 0; max-width: 100%;
    flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; scrollbar-color: #b5bdc4 transparent;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    padding-bottom: 4px;
}
.topbar-acoes > *,
.topbar > .d-flex:has(> .btn-pill ~ .btn-pill):not(.topbar-marca) > * { flex: 0 0 auto; }
.topbar-acoes::-webkit-scrollbar { height: 5px; }
.topbar-acoes::-webkit-scrollbar-thumb { background: #b5bdc4; border-radius: 3px; }
.topbar-acoes.rola-dir { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.topbar-acoes.rola-esq { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.topbar-acoes.rola-esq.rola-dir { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
@media (max-width: 640px) {
    .topbar-acoes { scrollbar-width: none; }
    .topbar-acoes::-webkit-scrollbar { display: none; }
}