/* =========================================================
   RC TRANSPORTES - LAYOUT MOBILE DAS TELAS INTERNAS
   Desktop permanece intacto
========================================================= */

.rc-mobile-voltar{
    display:none;
}


@media (max-width:700px){

    html{
        overflow-x:hidden;
    }

    body{
        margin:0 !important;
        overflow-x:hidden !important;
        background:#f1f5f9 !important;
    }


    /* =====================================================
       CONTAINER
    ===================================================== */

    .container{
        width:100% !important;
        max-width:none !important;

        margin:0 !important;

        padding:
            12px
            12px
            28px !important;
    }


    /* =====================================================
       CABEÇALHO
    ===================================================== */

    .topo{
        display:flex !important;

        min-height:auto !important;

        margin:0 0 14px !important;
        padding:13px 14px !important;

        align-items:center !important;
        justify-content:space-between !important;

        gap:10px !important;

        border-radius:14px !important;

        background:
            linear-gradient(
                135deg,
                #0f172a,
                #172554
            ) !important;

        box-shadow:
            0 6px 18px
            rgba(15,23,42,.16) !important;
    }


    .topo > div:first-child,
    .topo .titulo{
        min-width:0 !important;
    }


    .topo h1,
    .titulo h1{
        margin:0 !important;

        color:#fff !important;

        font-size:18px !important;
        line-height:1.15 !important;
    }


    .topo .subtitulo,
    .titulo .subtitulo,
    .subtitulo{
        margin-top:3px !important;

        color:#94a3b8 !important;

        font-size:10px !important;
        line-height:1.2 !important;
    }


    /*
       Menu desktop some SOMENTE no celular.
       A navegação mobile será pela Home.
    */

    .topo .menu-global{
        display:none !important;
    }


    /* BOTÃO HOME */

    .rc-mobile-voltar{
        display:flex;

        width:43px;
        height:43px;

        flex:0 0 43px;

        padding:0;

        align-items:center;
        justify-content:center;

        border:0;
        border-radius:13px;

        background:#2563eb;

        color:#fff;

        box-shadow:
            0 5px 13px
            rgba(37,99,235,.28);

        font-size:21px;

        cursor:pointer;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .cards{
        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:9px !important;

        margin-bottom:14px !important;
    }


    .card{
        min-width:0 !important;
        min-height:84px !important;

        padding:13px !important;

        border-radius:13px !important;

        background:#fff !important;

        box-shadow:
            0 2px 8px
            rgba(15,23,42,.04);
    }


    .card small{
        font-size:9px !important;
        line-height:1.15 !important;
    }


    .card strong{
        margin-top:6px !important;

        font-size:18px !important;
        line-height:1.15 !important;

        word-break:break-word;
    }


    /* =====================================================
       PAINÉIS
    ===================================================== */

    .painel,
    .box{
        width:100% !important;

        margin-bottom:13px !important;

        border-radius:13px !important;

        overflow:hidden !important;

        background:#fff !important;
    }


    .painel-topo,
    .box-titulo{
        padding:13px !important;
    }


    .painel-topo{
        display:flex !important;

        align-items:center !important;
        justify-content:space-between !important;

        gap:8px !important;
    }


    .painel-topo h2,
    .box-titulo{
        font-size:15px !important;
    }


    .painel-corpo{
        padding:13px !important;
    }


    /* =====================================================
       FORMULÁRIOS
    ===================================================== */

    .grade,
    .grid{
        display:grid !important;

        grid-template-columns:
            1fr !important;

        gap:12px !important;
    }


    .campo{
        width:100% !important;
        min-width:0 !important;

        gap:5px !important;
    }


    .campo label{
        font-size:11px !important;
    }


    input,
    select,
    textarea{
        width:100% !important;
        max-width:100% !important;

        min-height:43px;

        padding:10px 11px !important;

        border-radius:9px !important;

        font-size:16px !important;

        box-sizing:border-box !important;
    }


    textarea{
        min-height:80px !important;
    }


    /* =====================================================
       BOTÕES
    ===================================================== */

    button,
    .btn-novo,
    .btn-salvar,
    .btn-cancelar{
        min-height:40px;

        border-radius:9px !important;

        font-size:11px !important;
    }


    .btn-novo,
    .btn-salvar{
        padding:9px 13px !important;
    }


    /* =====================================================
       TABELAS
       Mantém todas as informações sem esmagar colunas.
    ===================================================== */

    .tabela,
    .tabela-wrap,
    .table-wrap,
    .table-responsive{
        width:100% !important;
        max-width:100% !important;

        overflow-x:auto !important;

        -webkit-overflow-scrolling:touch;
    }


    table{
        width:max-content !important;
        min-width:100% !important;
    }


    th,
    td{
        padding:10px 9px !important;

        font-size:10px !important;

        white-space:nowrap;
    }


    th{
        font-size:9px !important;
    }


    /* =====================================================
       MODAIS
    ===================================================== */

    .modal-fundo{
        padding:8px !important;

        align-items:flex-end !important;
    }


    .modal{
        width:100% !important;
        max-width:none !important;

        max-height:94vh !important;

        overflow-y:auto !important;

        border-radius:
            18px 18px 8px 8px !important;
    }


    .modal-topo{
        position:sticky;
        top:0;

        z-index:5;

        padding:14px !important;

        background:#fff;
    }


    .modal-topo h2{
        font-size:16px !important;
    }


    .formulario{
        padding:14px !important;
    }


    /* =====================================================
       FILTROS
    ===================================================== */

    .filtro-competencia{
        width:100% !important;

        margin:0 0 13px !important;

        padding:12px !important;

        border-radius:12px !important;
    }


    /* =====================================================
       EVITA QUALQUER ESTOURO HORIZONTAL
    ===================================================== */

    img,
    canvas,
    svg{
        max-width:100%;
    }

}


/* =========================================================
   CORRECAO DEFINITIVA DO TOPO MOBILE
   Usa o mesmo topo global do sistema.
   NAO ALTERA DESKTOP.
========================================================= */

@media(max-width:700px){

    /*
     * O CSS mobile antigo escondia o menu.
     * Agora o menu global permanece visivel.
     */

    #topoGlobal .tg-menu{
        display:grid !important;

        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;

        width:100% !important;

        gap:5px !important;

        margin:0 !important;
        padding:0 !important;

        background:transparent !important;

        border:0 !important;

        box-shadow:none !important;
    }


    /*
     * Topo compacto.
     * Mantem as cores definidas no topo-global.css.
     */

    #topoGlobal .tg-topo{
        width:100% !important;

        height:auto !important;
        min-height:0 !important;

        display:block !important;

        padding:9px !important;

        margin:0 !important;

        box-sizing:border-box !important;
    }


    /*
     * Identidade
     */

    #topoGlobal .tg-identidade{
        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        align-items:center !important;

        gap:8px !important;

        margin:0 0 8px 0 !important;
        padding:0 2px !important;
    }


    #topoGlobal .tg-icone-principal{
        width:36px !important;
        height:36px !important;

        min-width:36px !important;
        max-width:36px !important;

        flex:0 0 36px !important;

        font-size:18px !important;
    }


    #topoGlobal .tg-titulo{
        margin:0 !important;

        font-size:16px !important;
        line-height:18px !important;

        white-space:nowrap !important;
    }


    #topoGlobal .tg-subtitulo{
        margin-top:2px !important;

        font-size:8px !important;
        line-height:10px !important;

        white-space:normal !important;
    }


    /*
     * Botoes das funcoes
     */

    #topoGlobal .tg-menu .tg-btn{
        width:100% !important;

        height:32px !important;
        min-height:32px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        gap:5px !important;

        margin:0 !important;
        padding:0 7px !important;

        font-size:8px !important;

        box-sizing:border-box !important;
    }


    #topoGlobal .tg-menu .tg-menu-icone{
        width:18px !important;
        height:18px !important;

        min-width:18px !important;
        max-width:18px !important;

        flex:0 0 18px !important;

        font-size:9px !important;
    }


    /*
     * Sair ocupa sua propria celula.
     */

    #topoGlobal .tg-menu .tg-sair{
        margin-left:0 !important;
    }


    /*
     * O botao HOME antigo nao sera mais usado.
     */

    .rc-mobile-voltar{
        display:none !important;
    }

}


@media(max-width:390px){

    #topoGlobal .tg-menu{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

}


/* =========================================================
   MOBILE V3 - CORRECAO VISUAL
   SOMENTE CELULAR
   NAO ALTERA DESKTOP
========================================================= */

@media(max-width:700px){

    /* -----------------------------------------------------
       TOPO
       Mantem o topo visivel e legivel
    ----------------------------------------------------- */

    #topoGlobal .tg-topo{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        display:block !important;

        padding:12px !important;

        border-radius:14px !important;
        box-sizing:border-box !important;
    }

    #topoGlobal .tg-identidade{
        width:100% !important;

        display:flex !important;
        align-items:center !important;

        gap:9px !important;

        margin:0 0 10px 0 !important;
        padding:0 2px 8px 2px !important;
    }

    #topoGlobal .tg-icone-principal{
        width:40px !important;
        height:40px !important;

        min-width:40px !important;
        max-width:40px !important;

        flex:0 0 40px !important;

        font-size:20px !important;
    }

    #topoGlobal .tg-titulo{
        margin:0 !important;

        font-size:17px !important;
        line-height:20px !important;

        white-space:nowrap !important;
    }

    #topoGlobal .tg-subtitulo{
        margin-top:2px !important;

        font-size:9px !important;
        line-height:11px !important;
    }


    /* -----------------------------------------------------
       MENU DO TOPO
       3 botoes por linha, maiores e legiveis
    ----------------------------------------------------- */

    #topoGlobal .tg-menu{
        display:grid !important;

        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;

        width:100% !important;

        gap:6px !important;

        margin:0 !important;
        padding:0 !important;

        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    #topoGlobal .tg-menu .tg-btn{
        width:100% !important;

        height:38px !important;
        min-height:38px !important;
        max-height:none !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        gap:6px !important;

        padding:0 8px !important;
        margin:0 !important;

        font-size:10px !important;
        line-height:1 !important;

        border-radius:9px !important;

        box-sizing:border-box !important;

        white-space:nowrap !important;
        overflow:hidden !important;
    }

    #topoGlobal .tg-menu .tg-menu-icone{
        width:22px !important;
        height:22px !important;

        min-width:22px !important;
        max-width:22px !important;

        flex:0 0 22px !important;

        font-size:11px !important;
    }

    #topoGlobal .tg-menu .tg-sair{
        margin-left:0 !important;
    }


    /* -----------------------------------------------------
       CARDS DO DASHBOARD
       Corrige texto embaralhado
    ----------------------------------------------------- */

    .cards{
        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:8px !important;

        width:100% !important;
    }

    .cards > .card{
        box-sizing:border-box !important;

        width:100% !important;
        min-width:0 !important;

        min-height:104px !important;
        height:auto !important;

        padding:14px 12px 14px 54px !important;

        overflow:hidden !important;

        display:block !important;
    }

    .cards > .card small{
        position:relative !important;
        z-index:3 !important;

        display:block !important;

        margin:0 0 6px 0 !important;

        font-size:10px !important;
        line-height:13px !important;

        white-space:normal !important;
        word-break:normal !important;
    }

    .cards > .card strong{
        position:relative !important;
        z-index:3 !important;

        display:block !important;

        margin:0 !important;

        font-size:20px !important;
        line-height:24px !important;

        white-space:normal !important;
        word-break:normal !important;
    }

    .cards > .card::before{
        left:12px !important;
        top:14px !important;

        width:34px !important;
        height:34px !important;

        font-size:16px !important;
    }


    /* -----------------------------------------------------
       CARDS FINANCEIROS
    ----------------------------------------------------- */

    .cards > .card-financeiro{
        min-height:78px !important;

        padding:
            12px
            46px
            12px
            12px !important;
    }

    .cards > .card-financeiro small{
        margin:0 0 4px 0 !important;

        font-size:9px !important;
        line-height:11px !important;
    }

    .cards > .card-financeiro strong{
        margin:0 !important;

        font-size:17px !important;
        line-height:21px !important;

        white-space:nowrap !important;
    }

    .cards > .card-financeiro::before{
        left:auto !important;
        right:10px !important;

        top:50% !important;

        width:28px !important;
        height:28px !important;

        transform:translateY(-50%) !important;

        font-size:13px !important;
    }


    /* -----------------------------------------------------
       CADASTROS / MODAIS
       Nao esconder funcionalidades no mobile
    ----------------------------------------------------- */

    .modal-fundo.ativo{
        display:flex !important;
    }

    #painelCadastro.ativo{
        display:block !important;
    }

    #boxCadastroMotorista,
    #boxCadastroDespesa,
    #boxCadastroOleo{
        max-width:100% !important;
    }

    .modal{
        width:calc(100% - 20px) !important;
        max-width:100% !important;

        max-height:92vh !important;

        overflow-y:auto !important;

        box-sizing:border-box !important;
    }

}


/* celular muito estreito */
@media(max-width:390px){

    #topoGlobal .tg-menu{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .cards > .card strong{
        font-size:18px !important;
    }

    .cards > .card-financeiro strong{
        font-size:15px !important;
    }
}



/* =========================================================
   MOBILE V4 - MENU DE FUNCOES REALMENTE LEGIVEL
   SOMENTE CELULAR
========================================================= */

@media(max-width:700px){

    #topoGlobal .tg-identidade{
        margin-bottom:12px !important;
    }

    #topoGlobal .tg-icone-principal{
        width:44px !important;
        height:44px !important;

        min-width:44px !important;
        max-width:44px !important;

        flex:0 0 44px !important;

        font-size:22px !important;
    }

    #topoGlobal .tg-titulo{
        font-size:19px !important;
        line-height:22px !important;
    }

    #topoGlobal .tg-subtitulo{
        font-size:10px !important;
        line-height:13px !important;
    }


    /* 2 FUNCOES POR LINHA */

    #topoGlobal .tg-menu{
        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:7px !important;

        width:100% !important;
    }


    #topoGlobal .tg-menu .tg-btn{
        width:100% !important;

        height:44px !important;
        min-height:44px !important;
        max-height:none !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        gap:8px !important;

        padding:0 10px !important;

        font-size:12px !important;
        line-height:14px !important;
        font-weight:700 !important;

        overflow:visible !important;
        white-space:nowrap !important;

        border-radius:10px !important;
    }


    #topoGlobal .tg-menu .tg-menu-icone{
        width:27px !important;
        height:27px !important;

        min-width:27px !important;
        max-width:27px !important;

        flex:0 0 27px !important;

        font-size:14px !important;
    }


    #topoGlobal .tg-menu .tg-sair{
        margin-left:0 !important;
    }

}