/* =====================================================================
   Apollo — modo aplicativo (PWA) e celular no padrão do Bridge
   ---------------------------------------------------------------------
   Carregado por último (depois do responsivo-mobile.css e do tema-agrocp.css).
   Tudo que mexe em layout fica dentro de @media de celular/tablet, então o
   desktop não muda. Fora das media queries só entram as áreas seguras do
   iPhone (env(safe-area-inset-*), que valem 0 no desktop e no Android) e o
   .celula-valor, que no desktop não existe para o layout.
   Referência de teste: iPhone 16 (393 x 852), instalado e no Safari.
   ===================================================================== */


/* =====================================================================
   1. BASE
   ===================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* No app instalado não existe "tela cheia" do navegador */
.app-instalado .nav-item-fullscreen {
    display: none !important;
}

/* Wrapper do valor da célula (responsivo-mobile.js, só no celular) */
.celula-valor {
    display: contents;
}


/* =====================================================================
   2. ÁREAS SEGURAS (notch / Dynamic Island / barra de gestos)
   ===================================================================== */

.app-header {
    padding-top: calc(var(--bs-navbar-padding-y, .5rem) + env(safe-area-inset-top, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.app-main {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.app-sidebar {
    padding-top: env(safe-area-inset-top, 0px);
}

.modal-fullscreen .modal-header {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

.modal-fullscreen .modal-footer {
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}

#toast-container.toast-top-right,
#toast-container.toast-top-center,
#toast-container.toast-top-full-width {
    top: calc(12px + env(safe-area-inset-top, 0px));
}


/* =====================================================================
   3. TABLET E CELULAR (< 992px): menu lateral sobreposto
   ===================================================================== */

@media (max-width: 991.98px) {

    /* Topo fixo como em app; o conteúdo rola por baixo */
    .app-header {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    /* 100vh no iOS conta a área atrás das barras do Safari */
    .sidebar-expand-lg .app-sidebar {
        max-height: 100dvh;
    }

        .sidebar-expand-lg .app-sidebar .sidebar-wrapper {
            height: calc(100dvh - 3.5rem - 1px - env(safe-area-inset-top, 0px));
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

    /* Itens do menu lateral com área de toque maior */
    .app-sidebar .sidebar-menu .nav-link {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    /* Menu fechado fica fora da tela, mas a sombra vazava na borda esquerda */
    body:not(.sidebar-open) .app-sidebar {
        box-shadow: none !important;
    }
}


/* =====================================================================
   4. CELULAR (< 768px)
   ===================================================================== */

@media (max-width: 767.98px) {

    /* ---------- Rodapé: sai do fixo e libera a tela ---------- */
    .fixed-footer .app-footer {
        position: static;
        min-height: 0;
        padding-top: .75rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        font-size: .75rem;
        text-align: center;
    }

    /* ---------- Topo ---------- */
    .app-header .container-fluid {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .app-header .navbar-nav .nav-link {
        padding-left: .45rem;
        padding-right: .45rem;
    }

    /* "Opções" vira o avatar com as iniciais; a setinha não precisa */
    .app-header .user-menu > .dropdown-toggle::after {
        display: none;
    }

    .navbar .user-menu > .dropdown-menu {
        width: min(300px, calc(100vw - 1rem));
    }

    .app-header .notif-painel {
        width: min(360px, calc(100vw - 1rem));
    }

    /* ---------- Espaçamento das telas ---------- */
    .app-content > .container-fluid,
    .app-content-header > .container-fluid {
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .app-main .card-body {
        padding: .85rem;
    }

    .app-main .card-header {
        padding: .75rem .85rem;
    }

    .app-content .card-title {
        font-size: 1rem;
        font-weight: 600;
    }

    /* ---------- Filtros ---------- */
    /* Campos curtos em pares (filtros-recolhiveis.js marca .filtro-meia); o resto ocupa a linha inteira */
    .row.filtros > .filtro-meia {
        flex: 0 0 auto;
        width: 50%;
    }

    .row.filtros > [class*="col"]:not(.filtro-meia) {
        flex: 0 0 auto;
        width: 100%;
        margin-left: 0;
    }

    .row.filtros:not([class*="mb-"]) {
        margin-bottom: 1rem;
    }

    .row.filtros .btn {
        min-height: 2.75rem;
    }

    /* No celular os filtros empilham, então o rótulo vazio só ocupa espaço */
    .filtros .filtro-espacador {
        display: none;
    }

    /* ---------- Tabelas em cartão (tabela-mobile) no visual do Bridge ----------
       Rótulo pequeno à esquerda, valor à direita; o cartão tem cantos arredondados
       e o fundo do estado (cancelado, concluído...) preenche o cartão inteiro. */
    table.tabela-mobile > tbody > tr,
    table.tabela-mobile > tfoot > tr {
        padding: 0;
        margin-bottom: .75rem;
        border: 1px solid #e3e7e5;
        border-radius: var(--tema-raio, 10px);
        background-color: var(--bs-body-bg);
        box-shadow: 0 1px 3px rgba(16, 24, 20, .06);
        overflow: hidden;
    }

    table.tabela-mobile > tfoot > tr {
        border-color: var(--tema-verde-borda, #a6cdb4);
        background-color: var(--tema-verde-suave, #e6f2ea);
    }

        table.tabela-mobile > tbody > tr > td,
        table.tabela-mobile > tfoot > tr > td {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: .75rem;
            padding: .55rem .9rem;
            border-bottom: 1px solid #f0f2f1;
        }

            table.tabela-mobile > tbody > tr > td[data-th]:not([data-th=""])::before,
            table.tabela-mobile > tfoot > tr > td[data-th]:not([data-th=""])::before {
                flex: 0 0 auto;
                max-width: 42%;
                margin: 0;
                font-size: .72rem;
                font-weight: 600;
                letter-spacing: .02em;
                line-height: 1.25;
                opacity: 1;
                color: var(--bs-secondary-color);
            }

    /* O valor ocupa o resto e pode encolher/quebrar (badges, nomes longos) */
    table.tabela-mobile td > .celula-valor {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }

        table.tabela-mobile td > .celula-valor .badge {
            white-space: normal;
        }

        /* Grupos de badges/botões quebram linha e vão para a direita (os utilitários do Bootstrap têm !important) */
        table.tabela-mobile td > .celula-valor .d-flex:not(.flex-column),
        table.tabela-mobile td > .celula-valor .btn-group {
            justify-content: flex-end !important;
            flex-wrap: wrap !important;
        }

        table.tabela-mobile td > .celula-valor .d-flex.flex-column {
            align-items: flex-end !important;
        }

    /* Célula sem rótulo (botões, totais, "nenhum registro") centraliza */
    table.tabela-mobile > tbody > tr > td[data-th=""],
    table.tabela-mobile > tfoot > tr > td[data-th=""] {
        justify-content: center;
    }

        table.tabela-mobile > tbody > tr > td[data-th=""] > .celula-valor,
        table.tabela-mobile > tfoot > tr > td[data-th=""] > .celula-valor {
            text-align: center;
        }

    /* text-nowrap da tabela de desktop estoura o cartão no celular */
    table.tabela-mobile.text-nowrap,
    table.tabela-mobile.text-nowrap td,
    table.tabela-mobile td.text-nowrap,
    table.tabela-mobile td .text-nowrap {
        white-space: normal !important;
    }

    /* Borda do table-bordered não faz sentido dentro do cartão */
    table.tabela-mobile.table-bordered > :not(caption) > * > * {
        border-width: 0;
    }

    /* Cabeçalho interativo (ordenação, selecionar todos) vira chips no tom da marca */
    table.tabela-mobile.thead-interativo > thead {
        background-color: transparent;
    }

        table.tabela-mobile.thead-interativo > thead > tr > th {
            --bs-table-bg: transparent;
            border-color: var(--tema-verde-borda, #a6cdb4);
            background-color: var(--tema-verde-suave, #e6f2ea) !important;
            color: var(--tema-verde-escuro, #0c4f29) !important;
            text-transform: none;
            letter-spacing: 0;
        }

            table.tabela-mobile.thead-interativo > thead > tr > th a {
                color: inherit;
            }

            table.tabela-mobile.thead-interativo > thead > tr > th.th-titulo-mobile {
                background-color: transparent !important;
            }

    /* ---------- Cartão com título (.tabela-mobile-titulo nas listagens) ----------
       A primeira célula (nº do chamado, da compra...) vira o título do cartão,
       sem rótulo e alinhada à esquerda; linha clicável ganha a setinha de "abrir". */
    table.tabela-mobile-titulo > tbody > tr > td:first-child:not([colspan]) {
        align-items: center;
        padding-top: .7rem;
        padding-bottom: .7rem;
        border-bottom: 1px solid #e3e7e5;
        font-size: 1rem;
        font-weight: 600;
    }

        table.tabela-mobile-titulo > tbody > tr > td:first-child:not([colspan])::before {
            display: none;
        }

        table.tabela-mobile-titulo > tbody > tr > td:first-child:not([colspan]) > .celula-valor {
            text-align: left;
        }

            table.tabela-mobile-titulo > tbody > tr > td:first-child:not([colspan]) > .celula-valor .d-flex:not(.flex-column) {
                justify-content: flex-start !important;
            }

    table.tabela-mobile-titulo > tbody > tr.linha-abre-modal > td:first-child:not([colspan])::after {
        content: "\f054";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: .8rem;
        color: #9aa5a0;
    }

    table.tabela-mobile > tbody > tr.linha-abre-modal:active {
        transform: scale(.99);
    }

    /* ---------- Listagem sem "cartão dentro de cartão" ----------
       O card que envolve a listagem perde a moldura; os itens já são cartões */
    .app-content .card:has(> .card-body .tabela-mobile-titulo) {
        border: 0;
        background-color: transparent;
        box-shadow: none;
    }

        .app-content .card:has(> .card-body .tabela-mobile-titulo) > .card-body {
            padding: .25rem 0 0;
        }

    /* ---------- Cabeçalho do card: título e botões na mesma linha quando cabem ---------- */
    .card-header > .d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }

        .card-header > .d-flex > .card-title {
            flex: 1 1 auto;
            min-width: 0;
        }

        .card-header > .d-flex > .d-flex {
            flex-wrap: wrap;
            margin-left: auto;
            justify-content: flex-end !important;
            gap: .35rem;
        }

    .card-header .btn {
        white-space: nowrap;
    }

    /* ---------- Paginação ---------- */
    .pagination {
        justify-content: center !important;
        gap: .25rem;
    }

        .pagination .page-item:not(:first-child) .page-link {
            margin-left: 0;
        }

        .pagination .page-link {
            padding: .3rem .6rem;
            border-radius: .3rem;
        }

    /* ---------- Botões e toques ---------- */
    .btn-icon {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .modal-footer {
        gap: .5rem;
    }

    /* ---------- Login ---------- */
    .login-moderno-conteudo {
        padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
}


/* =====================================================================
   5. CELULAR PEQUENO (< 576px)
   ===================================================================== */

@media (max-width: 575.98px) {

    .app-header .navbar-nav .nav-link {
        padding-left: .3rem;
        padding-right: .3rem;
    }

    /* O menu lateral já mostra onde está; o caminho só ocupava uma linha */
    .app-content-header .breadcrumb,
    .card-header .breadcrumb {
        display: none;
    }
}


/* =====================================================================
   6. iOS: sem zoom automático ao tocar no campo
   ---------------------------------------------------------------------
   O Safari dá zoom em campo com fonte menor que 16px e não volta.
   -webkit-touch-callout só existe no Safari do iOS/iPadOS.
   ===================================================================== */

@supports (-webkit-touch-callout: none) {

    @media (max-width: 991.98px) {

        input.form-control,
        select.form-select,
        select.form-control,
        textarea.form-control,
        .select2-container .select2-search__field,
        .select2-container .select2-selection {
            font-size: 16px;
        }
    }

    /* Campo de data vazio no iOS fica mais baixo que os outros e com o texto centralizado */
    input[type="date"].form-control {
        -webkit-appearance: none;
        appearance: none;
        min-height: calc(1.5em + .75rem + 2px);
    }

        input[type="date"].form-control::-webkit-date-and-time-value {
            text-align: left;
        }
}

/* =====================================================================
   7. MODAIS QUE VIRAM TELA CHEIA SÓ NO CELULAR
   ---------------------------------------------------------------------
   O .modal-fullscreen já respeita as áreas seguras (seção 2). Estes são a
   maioria dos modais: sem isto, o rodapé ficava sob a barra de gestos do iPhone.
   ===================================================================== */

@media (max-width: 991.98px) {

    .modal-fullscreen-lg-down .modal-footer {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 767.98px) {

    .modal-fullscreen-md-down .modal-header {
        padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
    }

    .modal-fullscreen-md-down .modal-footer {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    }

    .modal-fullscreen-md-down .modal-body:last-child {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 575.98px) {

    .modal-fullscreen-sm-down .modal-footer,
    .modal-dialog.modal-lg .modal-footer,
    .modal-dialog.modal-xl .modal-footer {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* 100vh no Safari conta a área atrás das barras e escondia o rodapé */
    .modal-dialog.modal-lg .modal-content,
    .modal-dialog.modal-xl .modal-content {
        min-height: 100dvh;
    }
}


/* =====================================================================
   8. COMPRA E ORÇAMENTO NO CELULAR
   ===================================================================== */

@media (max-width: 767.98px) {

    /* Detalhes do card: as tabelas de layout empilham, e selos e botões longos quebram linha.
       Antes alargavam a tabela e ficavam cortados */
    .compra-detalhe table,
    .compra-detalhe tbody,
    .compra-detalhe tr,
    .compra-detalhe td {
        display: block;
        width: 100%;
    }

    .compra-detalhe .badge,
    .compra-detalhe .btn,
    .compra-detalhe .text-nowrap {
        max-width: 100%;
        white-space: normal !important;
        text-align: left;
    }

    .compra-detalhe td {
        overflow-wrap: anywhere;
    }

    /* A tabela da lista de orçamentos é nowrap; o conteúdo do cartão precisa quebrar */
    .card:has(> .orcamento-cabecalho) {
        white-space: normal;
    }

    .card:has(> .orcamento-cabecalho) h5.float-start {
        float: none !important;
    }

    /* Título, alertas e totais do orçamento empilham, sem flutuar um sobre o outro */
    .orcamento-cabecalho .card-title {
        float: none;
        display: block;
        margin-left: 0 !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .orcamento-cabecalho .orcamento-ferramentas {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: .35rem 0 0;
    }

    .orcamento_itens .orcamento-item-acoes {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }
}


/* =====================================================================
   9. AJUSTES GERAIS DO CELULAR
   ===================================================================== */

@media (max-width: 767.98px) {

    /* Mensagem do dia e Fala CP na Home: a mensagem longa empurrava o link para fora */
    .alerta-acao:has(.falacp-link) {
        flex-wrap: wrap;
    }

    .alerta-acao:has(.falacp-link) > .flex-grow-1 {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .falacp-link {
        margin-left: auto;
    }

    /* Botões lado a lado com texto longo (ex.: Firebird Monitor) e de anexar quebram linha */
    .btn.flex-fill,
    .btn.btn-file {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
    }

    header.ov-topo {
        flex-wrap: wrap;
    }

    /* Telas sem container (ex.: erro do Space): a margem negativa da row criava rolagem lateral */
    body > .row {
        margin-left: 0;
        margin-right: 0;
    }
}


/* =====================================================================
   10. ÁREA DE TOQUE (celular com dedo; mouse não muda)
   ===================================================================== */

@media (max-width: 767.98px) and (pointer: coarse) {

    .pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .btn-close {
        padding: .65rem;
    }

    .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }

    .oi-editar-valor {
        min-height: 2.25rem;
    }

    .oi-campo-valor {
        height: 2.25rem;
    }
}


/* =====================================================================
   11. APOLLO STUDY EM TELA CHEIA NO TABLET E NO CELULAR
   ---------------------------------------------------------------------
   hover: none + pointer: coarse = toque como entrada principal. Pega iPad,
   que se apresenta como computador, e não pega janela pequena no computador
   nem notebook com tela de toque. Vale nas telas com .study-tela-cheia.
   ===================================================================== */

@media (hover: none) and (pointer: coarse) {

    body:has(.study-tela-cheia) .app-header,
    body:has(.study-tela-cheia) .app-sidebar,
    body:has(.study-tela-cheia) .app-footer,
    body:has(.study-tela-cheia) .sidebar-overlay {
        display: none !important;
    }

    /* Sem as colunas do menu, o conteúdo ocupa a tela toda */
    body:has(.study-tela-cheia) .app-wrapper {
        display: block !important;
        min-height: 100dvh;
    }

    body:has(.study-tela-cheia) .app-main {
        min-height: 100dvh;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* =====================================================================
   12. LISTAGENS E COMPRA NO CELULAR: paginação, botões, cartões e faixas
   ===================================================================== */

@media (max-width: 767.98px) {

    /* ---------- Paginação numa linha só: primeira, anterior, vizinhas da atual, próxima e última.
       Só no paginador do PagedList; os números de fora ficam no HTML para o computador ---------- */
    .pagination-container .pagination {
        flex-wrap: nowrap;
    }

    .pagination-container .page-item:not([class*="PagedList-skip"]):not(.active):not(:has(+ .active)):not(.active + .page-item),
    .pagination-container .PagedList-ellipses {
        display: none;
    }

    /* Com paginador embaixo da lista, o de cima só empurra os itens para baixo */
    .paginacao-topo-repetida {
        display: none;
    }

    /* ---------- Botões do cabeçalho da listagem: cada linha ocupa a largura toda ---------- */
    .app-content .card-header > .d-flex > .d-flex:has(> .btn):not(.modal *) {
        width: 100%;
        margin-left: 0;
        gap: .5rem;
    }

        .app-content .card-header > .d-flex > .d-flex:has(> .btn):not(.modal *) > .btn {
            flex: 1 1 auto;
        }

    /* ---------- Cartões das listagens ----------
       "anywhere" partia palavras no meio mesmo com espaço para quebrar entre elas */
    table.tabela-mobile td > .celula-valor {
        overflow-wrap: break-word;
    }

    /* Célula com texto longo e chips: rótulo em cima e conteúdo na largura toda, à esquerda */
    table.tabela-mobile > tbody > tr > td:not(:first-child):has(> .celula-valor .admin-nome, > .celula-valor .chips-linha) {
        flex-direction: column;
        align-items: stretch;
        gap: .3rem;
    }

        table.tabela-mobile > tbody > tr > td:not(:first-child):has(> .celula-valor .admin-nome, > .celula-valor .chips-linha)::before {
            max-width: none;
        }

        table.tabela-mobile > tbody > tr > td:not(:first-child):has(> .celula-valor .admin-nome, > .celula-valor .chips-linha) > .celula-valor {
            flex: none;
            text-align: left;
        }

    /* Sistema e projeto não partem no meio da linha do tipo */
    table.tabela-mobile .admin-sub > span.ms-2 {
        display: inline-block;
        margin-left: 0 !important;
        margin-right: .6rem;
    }

    /* Avatar e nome do atendente na mesma linha */
    table.tabela-mobile td > .celula-valor:has(> .avatares-atendentes) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: .25rem .5rem;
    }

        table.tabela-mobile td > .celula-valor:has(> .avatares-atendentes) > .admin-sub {
            margin-top: 0 !important;
        }

        table.tabela-mobile td > .celula-valor:has(> .avatares-atendentes) > div:not(.avatares-atendentes):not(.admin-sub) {
            flex-basis: 100%;
        }

    /* Badge longo quebra com o ícone alinhado */
    table.tabela-mobile td > .celula-valor .badge {
        line-height: 1.3;
    }

    /* ---------- Card da compra: progresso, próxima ação e ações dois por linha ---------- */
    .compra-fluxo-faixa:has(.compra-progresso) .compra-etapas {
        display: none;
    }

    .compra-detalhe-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compra-detalhe-largo {
        grid-column: 1 / -1;
    }

    .compra-proxima {
        flex-direction: column;
        align-items: stretch;
    }

    .compra-proxima-acoes > .btn {
        flex: 1 1 100%;
    }

    .compra-acoes-barra {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .4rem;
    }

        .compra-acoes-barra > div {
            display: contents;
        }

        .compra-acoes-barra .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            width: 100%;
            min-height: 2.5rem;
            white-space: nowrap;
        }

        .compra-acoes-barra #modificar_apollo_buy {
            grid-column: 1 / -1;
            order: -1;
        }

    /* ---------- Ações do chamado: as mesmas da compra, no cartão e no rodapé do modal ---------- */
    table.tabela-mobile > tbody > tr > td[data-th]:not([data-th=""]):has(.chamado-acoes)::before {
        display: none;
    }

    table.tabela-mobile td > .celula-valor .chamado-acoes {
        gap: .4rem;
    }

    .chamado-acoes > .btn,
    .chamado-rodape > .btn {
        display: inline-flex;
        flex: 1 1 calc(50% - .25rem);
        align-items: center;
        justify-content: center;
        gap: .4rem;
        min-width: 0;
        margin: 0 !important;
        white-space: nowrap;
    }

    .chamado-rodape {
        gap: .4rem;
    }

        .chamado-rodape > .btn {
            padding: .4rem .5rem;
            font-size: .85rem;
        }

    /* Rodapé do Modificar: Salvar e "Mais ações", que abre os demais botões */
    .chamado-rodape:not(.aberto):has(.chamado-mais) > .btn:not(.chamado-principal):not(.chamado-mais) {
        display: none;
    }

    /* ---------- Modificar e Detalhes do chamado com jeito de app ---------- */
    .chamado-tela #parcial_atividade_cabecalho {
        position: relative;
        padding: .6rem .75rem;
    }

        .chamado-tela #parcial_atividade_cabecalho .modal-title {
            padding-right: 2.25rem;
            white-space: nowrap;
        }

            .chamado-tela #parcial_atividade_cabecalho .modal-title .fs-4 {
                font-size: 1.1rem !important;
            }

        /* Cada informação fica inteira: a quebra só acontece entre uma e outra */
        .chamado-tela #parcial_atividade_cabecalho .small > span {
            white-space: nowrap;
        }

    .chamado-tela .cabecalho-acoes {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        width: 100%;
    }

        .chamado-tela .cabecalho-acoes .btn-close {
            position: absolute;
            top: .55rem;
            right: .55rem;
        }

    /* Atalhos das seções, presos no topo enquanto a tela rola */
    .chamado-secoes {
        position: sticky;
        top: -1rem;
        z-index: 5;
        display: flex;
        gap: .4rem;
        margin: -1rem -1rem .75rem;
        padding: .5rem .75rem;
        overflow-x: auto;
        border-bottom: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
        scrollbar-width: none;
    }

        .chamado-secoes::-webkit-scrollbar {
            display: none;
        }

        .chamado-secoes > button {
            flex: 0 0 auto;
            min-height: 2.25rem;
            padding: 0 .8rem;
            border: 1px solid var(--tema-verde-borda, #a6cdb4);
            border-radius: 999px;
            background: transparent;
            color: var(--tema-verde-escuro, #0c4f29);
            font-size: .85rem;
            font-weight: 600;
        }

            .chamado-secoes > button.ativa {
                border-color: var(--tema-verde, #0f6b3a);
                background: var(--tema-verde, #0f6b3a);
                color: #fff;
            }

    .chamado-tela #div_informacao_basica,
    .chamado-tela [id^="parcial_atividade_"]:not(#parcial_atividade_cabecalho):not(#parcial_atividade_rodape) {
        scroll-margin-top: 3.25rem;
    }

    /* Os atalhos substituem o retrair; o bloco de dados fica sempre aberto */
    .chamado-tela .mb-2.text-end:has(#btn_expandir_retrair_info) {
        display: none;
    }

    .chamado-tela #div_informacao_basica {
        display: block !important;
    }

    /* Seções: título e botão na mesma linha; lista vazia não deixa corpo em branco */
    .chamado-tela .card-header > .d-flex {
        flex-wrap: nowrap;
        align-items: center;
    }

        .chamado-tela .card-header > .d-flex > .card-title {
            font-size: 1rem;
        }

        .chamado-tela .card-header > .d-flex > .btn {
            flex-shrink: 0;
            padding: .3rem .65rem;
            font-size: .85rem;
        }

    .chamado-tela .card-body:has(> table):not(:has(tbody tr)) {
        display: none;
    }

    /* Ordenação das listas numa linha só, rolando de lado */
    table.tabela-mobile.thead-interativo > thead > tr:not(:has(.th-titulo-mobile)) {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        table.tabela-mobile.thead-interativo > thead > tr:not(:has(.th-titulo-mobile))::-webkit-scrollbar {
            display: none;
        }

        table.tabela-mobile.thead-interativo > thead > tr:not(:has(.th-titulo-mobile)) > th {
            flex: 0 0 auto;
            white-space: nowrap;
        }

    /* ---------- Faixas que rolam de lado: o dedo já rola, a barra só ocupa espaço ---------- */
    .nav-tabs:not(.flex-column),
    .modal-header .compra-etapas,
    .modal-header .apv-trilha {
        scrollbar-width: none;
    }

        .nav-tabs:not(.flex-column)::-webkit-scrollbar,
        .modal-header .compra-etapas::-webkit-scrollbar,
        .modal-header .apv-trilha::-webkit-scrollbar {
            display: none;
        }

    /* Título da compra numa linha, sem disputar espaço com os ícones */
    #parcial_buyapollo_cabecalho .modal-title > strong.fs-4 {
        font-size: 1.05rem !important;
    }

    /* ---------- Orçamentos da compra ---------- */
    /* Título em cima; embaixo, visualização à esquerda e retrair à direita */
    .card-header:has(#btn_expandir_retrair_orcamentos) {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

        .card-header:has(#btn_expandir_retrair_orcamentos)::after {
            display: none;
        }

        .card-header:has(#btn_expandir_retrair_orcamentos) > .d-flex:first-child {
            display: contents !important;
        }

        .card-header:has(#btn_expandir_retrair_orcamentos) > .d-flex:first-child > .card-title {
            grid-column: 1 / -1;
        }

    #parcial_orcamento_modelo_view {
        margin-left: 0 !important;
    }

    /* Título vazio e as quebras antes do fornecedor deixavam um buraco no cartão */
    .card-header > h3.card-title.ms-2:not(:has(*)) {
        display: none;
    }

    .orcamento-ferramentas ~ br:nth-of-type(-n+2) {
        display: none;
    }

    .orcamento-ferramentas {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .15rem .4rem;
        float: none !important;
        width: 100%;
        margin-top: .35rem;
    }

        .orcamento-ferramentas .btn-tool {
            margin: 0;
            padding: 0 .25rem;
        }

        .orcamento-ferramentas .btn-expandir-retratir {
            margin-left: auto;
        }

    /* Rolagem dentro de rolagem prende o dedo: no celular o cartão cresce e a tela rola */
    #lista_compra_orcamentos .card .card-body.p-0 {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* Recebimento de envios no celular: uma coluna e a confirmação em destaque */
@media (max-width: 767.98px) {
    .recebimento-campos {
        grid-template-columns: minmax(0, 1fr);
    }

    .recebimento-rodape {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

        .recebimento-rodape > .btn {
            width: 100%;
            margin: 0;
        }

        .recebimento-rodape > .recebimento-principal {
            grid-column: 1 / -1;
            order: -1;
        }

        .recebimento-rodape > .btn:only-child {
            grid-column: 1 / -1;
        }
}