/* Gaveta do menu do celular (mc-*) e barra de baixo (barra-*).
   Sairam do <style> do MenuDoCelular e da BarraInferior (05/10/2026) para o SuperAdmin
   desenhar o MESMO menu do ERP no celular sem uma segunda copia do CSS. */

    .mc-fundo, .mc-caixa { display: none; }

    @media (max-width: 991.98px) {
        .mc-fundo { display: block; position: fixed; inset: 0; z-index: 1045; background: rgba(15, 23, 42, .45); }
        .mc-caixa { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: min(330px, 86vw); z-index: 1046; background: var(--bs-body-bg, #fff); box-shadow: 8px 0 30px rgba(0,0,0,.25); }
        .mc-cab { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px 20px; }
        .mc-avatar { width: 40px; height: 40px; border-radius: 20px; background: #1B2559; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none; }
        .mc-empresa { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
        .mc-empresa strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mc-empresa small { font-size: 12px; color: #6E7C87; }
        .mc-fechar { border: 0; width: 36px; height: 36px; border-radius: 10px; background: #F0F2F5; color: #1c2333; font-size: 16px; flex: none; }
        .mc-busca { margin: 0 16px 6px; height: 44px; padding: 0 14px; border-radius: 22px; background: #F0F2F5; display: flex; align-items: center; gap: 10px; color: #6E7C87; }
        .mc-busca input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: #1c2333; }
        .mc-busca button { border: 0; background: transparent; color: #6E7C87; font-size: 14px; }
        .mc-corpo { flex-grow: 1; overflow-y: auto; padding: 4px 0 calc(16px + env(safe-area-inset-bottom)); }
        .mc-sep { height: 1px; background: #E5E7EB; margin: 4px 0 4px 60px; }
        .mc-tela, .mc-modulo { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 52px; padding: 0 22px; border: 0; background: transparent; color: #1c2333; text-decoration: none; font-size: 16px; font-weight: 600; text-align: left; }
        .mc-modulo { font-weight: 700; }
        .mc-tela i, .mc-modulo i { font-size: 22px; width: 24px; text-align: center; flex: none; }
        .mc-rotulo { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .mc-rotulo small { display: block; font-size: 11px; color: #6E7C87; font-weight: 600; }
        .mc-conta { font-size: 13px; color: #6E7C87; flex: none; }
        .mc-seta { font-size: 16px !important; width: 16px !important; color: #9CA3AF; }
        .mc-modulo.aberto { background: #F0F2F5; border-radius: 0 26px 26px 0; margin-right: 12px; width: calc(100% - 12px); font-weight: 800; }
        .mc-telas { display: flex; flex-direction: column; padding-left: 14px; }
        .mc-telas .mc-tela { min-height: 48px; font-size: 15px; }
        .mc-telas .mc-tela i { font-size: 20px; }
        .mc-grupo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6E7C87; padding: 8px 22px 2px; }
        .mc-tela.atual { font-weight: 800; }
        .mc-tela.mc-topo { font-weight: 700; }
        .mc-sair, .mc-sair i { color: #B91C1C; }
        .mc-vazio { padding: 24px 12px; text-align: center; color: #6E7C87; font-size: 14px; }
        body.modal-open .mc-caixa { display: none; }
    }
    [data-theme=dark] .mc-caixa { background: #1F2833; }
    [data-theme=dark] .mc-tela, [data-theme=dark] .mc-modulo, [data-theme=dark] .mc-busca input { color: #E6EAF0; }
    [data-theme=dark] .mc-modulo.aberto, [data-theme=dark] .mc-busca, [data-theme=dark] .mc-fechar { background: #2A3543; }
    [data-theme=dark] .mc-sep { background: #2A3543; }

    .barra-inferior { display: none; }

    /* Mesmo corte de todo o resto do toque: abaixo dele não há barra lateral fixa
       nem faixa no topo, e a navegação precisa morar em algum lugar. */
    @media (max-width: 991.98px) {
        .barra-inferior {
            display: flex;
            position: fixed; left: 0; right: 0; bottom: 0;
            z-index: 1035;              /* acima do conteúdo, abaixo dos modais */
            background: #fff;
            border-top: 1px solid #e6eaed;

            /* O iPhone tem a faixa do gesto de início embaixo: sem isto, o rótulo
               fica escondido atrás dela. */
            padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0 -2px 12px rgba(15,36,54,.06);
        }

        .barra-item {
            flex: 1 1 0; min-width: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 3px;
            padding: 8px 2px 9px;
            font-size: 10.5px; line-height: 1.15;
            color: #6E7C87; text-decoration: none;
            min-height: 52px;
        }

        .barra-item i { font-size: 20px; }

        .barra-item span {
            max-width: 100%;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }

        .barra-item.ativo { color: var(--tenant-cor, #FF6B00); }

        /* O conteúdo não pode terminar embaixo da barra: os últimos cartões ficariam
           inalcançáveis, e no celular é onde costuma estar o total. */
        .page-wrapper { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }

        /* O balão do chat sobe junto, senão fica sentado em cima da barra — e ele tem
           z-index maior, então ganharia a disputa e cobriria um dos destinos. */
        .chat-widget {
            bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        }
    }