/*
 * 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, num círculo. O texto continua para leitor de tela. */
    .topbar-marca > a.btn-pill:has(> .fa-arrow-left) {
        position: relative; flex: 0 0 38px; width: 38px; height: 38px; padding: 0 !important;
        justify-content: center; font-size: 0; overflow: hidden; color: var(--tinta, #222);
    }
    .topbar-marca > a.btn-pill:has(> .fa-arrow-left) > i { font-size: 1rem; margin: 0; }

    .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 {
        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; }
}