/* =========================================================
   TOPO GLOBAL - CONTROLE DE VIAGENS
   Um unico padrao para todas as paginas
========================================================= */

#topoGlobal{
    width:100%;
    margin:0 0 24px 0;
}

#topoGlobal .tg-topo{
    box-sizing:border-box;

    width:100%;
    min-height:94px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;

    padding:17px 20px;

    background:#ffffff;

    border:1px solid #dbe5ef;
    border-radius:16px;

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


/* =========================================================
   IDENTIDADE
========================================================= */

#topoGlobal .tg-identidade{
    min-width:285px;

    display:flex;
    align-items:center;

    gap:13px;
}

#topoGlobal .tg-icone-principal{
    width:56px;
    height:56px;

    flex:0 0 56px;

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

    border-radius:14px;

    background:#e7f2ff;
    border:1px solid #c8e1ff;

    font-size:27px;

    box-shadow:
        0 4px 10px rgba(37,99,235,.10);
}

#topoGlobal .tg-textos{
    min-width:0;
}

#topoGlobal .tg-titulo{
    margin:0;

    color:#0f172a;

    font-family:inherit;
    font-size:25px;
    line-height:1.1;
    font-weight:800;

    letter-spacing:-.35px;

    white-space:nowrap;
}

#topoGlobal .tg-subtitulo{
    margin-top:5px;

    color:#64748b;

    font-family:inherit;
    font-size:12px;
    line-height:1.3;
    font-weight:500;

    white-space:nowrap;
}


/* =========================================================
   NAVEGACAO
========================================================= */

#topoGlobal .tg-menu{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:6px;

    min-width:0;
}

#topoGlobal .tg-btn{
    box-sizing:border-box;

    height:44px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    margin:0;
    padding:0 11px;

    border:1px solid #e2e8f0;
    border-radius:10px;

    outline:none;

    background:#f8fafc;
    color:#334155;

    font-family:inherit;
    font-size:12px;
    line-height:1;
    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    box-shadow:none;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

#topoGlobal .tg-btn:hover{
    background:#f1f5f9;
    border-color:#cbd5e1;

    transform:translateY(-1px);
}


/* =========================================================
   ICONES DOS MENUS
========================================================= */

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

    flex:0 0 27px;

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

    border-radius:50%;

    font-size:13px;
    line-height:1;
}

#topoGlobal .tg-viagens .tg-menu-icone{
    background:#fee2e2;
}

#topoGlobal .tg-veiculos .tg-menu-icone{
    background:#dcfce7;
}

#topoGlobal .tg-motoristas .tg-menu-icone{
    background:#ede9fe;
}

#topoGlobal .tg-abastecimentos .tg-menu-icone{
    background:#dbeafe;
}

#topoGlobal .tg-despesas .tg-menu-icone{
    background:#fef3c7;
}


/* =========================================================
   PAGINA ATIVA
========================================================= */

#topoGlobal .tg-btn.ativo{
    background:#e6f2ff;
    color:#1d4ed8;

    border-color:#93c5fd;

    box-shadow:
        inset 0 0 0 1px rgba(37,99,235,.05);
}

#topoGlobal .tg-btn.ativo:hover{
    background:#dbeeff;
}


/* =========================================================
   NOVA VIAGEM
========================================================= */

#topoGlobal .tg-nova{
    padding:0 14px;

    background:#16a34a;
    color:#ffffff;

    border-color:#16a34a;

    box-shadow:
        0 4px 10px rgba(22,163,74,.16);
}

#topoGlobal .tg-nova:hover{
    background:#15803d;
    border-color:#15803d;
}

#topoGlobal .tg-mais{
    font-size:19px;
    line-height:1;
    font-weight:800;
}


/* =========================================================
   SAIR
========================================================= */

#topoGlobal .tg-sair{
    padding:0 13px;

    background:#ffffff;
    color:#64748b;

    border-color:#dbe2ea;
}

#topoGlobal .tg-sair:hover{
    background:#fff1f2;
    color:#dc2626;

    border-color:#fecdd3;
}


/* =========================================================
   GARANTE QUE CSS ANTIGO NAO INTERFIRA
========================================================= */

#topoGlobal button{
    min-height:0 !important;
    max-width:none !important;
}

#topoGlobal .tg-btn{
    height:44px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    border-radius:10px !important;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:1180px){

    #topoGlobal .tg-topo{
        align-items:flex-start;
        flex-direction:column;
    }

    #topoGlobal .tg-menu{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}


@media(max-width:700px){

    #topoGlobal .tg-topo{
        padding:14px;
    }

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

    #topoGlobal .tg-icone-principal{
        width:50px;
        height:50px;

        flex-basis:50px;

        font-size:24px;
    }

    #topoGlobal .tg-titulo{
        font-size:22px;
    }

    #topoGlobal .tg-subtitulo{
        white-space:normal;
    }

    #topoGlobal .tg-menu{
        display:grid;
        grid-template-columns:1fr 1fr;

        gap:7px;
    }

    #topoGlobal .tg-btn{
        width:100%;
    }
}


@media(max-width:420px){

    #topoGlobal .tg-menu{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   PADRONIZACAO DEFINITIVA DO LAYOUT
   Todas as telas principais usam a mesma largura externa
========================================================= */

html,
body{
    width:100%;
}

body > .container{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:1400px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:20px !important;
    padding-right:20px !important;
}


/* =========================================================
   TOPO GLOBAL - DIMENSOES FIXAS
========================================================= */

#topoGlobal{
    box-sizing:border-box !important;

    display:block !important;

    width:100% !important;
    max-width:none !important;

    margin:0 0 24px 0 !important;
    padding:0 !important;
}

#topoGlobal .tg-topo{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:none !important;

    min-height:92px !important;

    margin:0 !important;
    padding:17px 20px !important;

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

    gap:20px !important;

    background:#ffffff !important;

    border:1px solid #dbe5ef !important;
    border-radius:16px !important;

    box-shadow:
        0 8px 24px rgba(15,23,42,.08) !important;
}


/* =========================================================
   BLOCO ESQUERDO
========================================================= */

#topoGlobal .tg-identidade{
    box-sizing:border-box !important;

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

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

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

    gap:13px !important;
}

#topoGlobal .tg-icone-principal{
    box-sizing:border-box !important;

    width:56px !important;
    height:56px !important;

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

    flex:0 0 56px !important;

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

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

    border-radius:14px !important;

    background:#e7f2ff !important;
    border:1px solid #c8e1ff !important;

    font-size:27px !important;
    line-height:1 !important;
}

#topoGlobal .tg-textos{
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
}

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

    font-size:24px !important;
    line-height:27px !important;
    font-weight:800 !important;

    color:#0f172a !important;

    white-space:nowrap !important;
}

#topoGlobal .tg-subtitulo{
    margin:5px 0 0 0 !important;
    padding:0 !important;

    font-size:12px !important;
    line-height:16px !important;
    font-weight:500 !important;

    color:#64748b !important;

    white-space:nowrap !important;
}


/* =========================================================
   MENU DIREITO
========================================================= */

#topoGlobal .tg-menu{
    box-sizing:border-box !important;

    flex:1 1 auto !important;

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

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

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

    flex-wrap:nowrap !important;

    gap:6px !important;
}


/* =========================================================
   TODOS OS BOTOES EXATAMENTE IGUAIS
========================================================= */

#topoGlobal .tg-menu .tg-btn{
    box-sizing:border-box !important;

    width:auto !important;

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

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

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

    gap:6px !important;

    border-width:1px !important;
    border-style:solid !important;
    border-color:#e2e8f0 !important;

    border-radius:10px !important;

    background:#f8fafc !important;
    color:#334155 !important;

    font-family:inherit !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    box-shadow:none !important;

    cursor:pointer !important;

    transform:none;
}


/* ICONE */

#topoGlobal .tg-menu .tg-menu-icone{
    box-sizing:border-box !important;

    width:27px !important;
    height:27px !important;

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

    flex:0 0 27px !important;

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

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

    border-radius:50% !important;

    font-size:13px !important;
    line-height:1 !important;
}


/* CORES DOS ICONES */

#topoGlobal .tg-viagens .tg-menu-icone{
    background:#fee2e2 !important;
}

#topoGlobal .tg-veiculos .tg-menu-icone{
    background:#dcfce7 !important;
}

#topoGlobal .tg-motoristas .tg-menu-icone{
    background:#ede9fe !important;
}

#topoGlobal .tg-abastecimentos .tg-menu-icone{
    background:#dbeafe !important;
}

#topoGlobal .tg-despesas .tg-menu-icone{
    background:#fef3c7 !important;
}


/* ATIVO */

#topoGlobal .tg-menu .tg-btn.ativo{
    background:#e6f2ff !important;
    color:#1d4ed8 !important;

    border-color:#93c5fd !important;
}


/* NOVA VIAGEM */

#topoGlobal .tg-menu .tg-nova{
    padding-left:14px !important;
    padding-right:14px !important;

    background:#16a34a !important;
    color:#ffffff !important;

    border-color:#16a34a !important;

    box-shadow:
        0 4px 10px rgba(22,163,74,.16) !important;
}

#topoGlobal .tg-menu .tg-nova:hover{
    background:#15803d !important;
    border-color:#15803d !important;
}

#topoGlobal .tg-mais{
    width:auto !important;
    height:auto !important;

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

    font-size:19px !important;
    line-height:1 !important;
}


/* SAIR */

#topoGlobal .tg-menu .tg-sair{
    padding-left:12px !important;
    padding-right:12px !important;

    background:#ffffff !important;
    color:#64748b !important;

    border-color:#dbe2ea !important;
}

#topoGlobal .tg-menu .tg-sair:hover{
    background:#fff1f2 !important;
    color:#dc2626 !important;

    border-color:#fecdd3 !important;
}


/* HOVER NORMAL */

#topoGlobal .tg-menu .tg-btn:not(.tg-nova):not(.tg-sair):hover{
    background:#f1f5f9 !important;
    border-color:#cbd5e1 !important;
}

#topoGlobal .tg-menu .tg-btn.ativo:hover{
    background:#dbeeff !important;
    border-color:#93c5fd !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1180px){

    body > .container{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    #topoGlobal .tg-topo{
        align-items:flex-start !important;
        flex-direction:column !important;

        min-height:0 !important;
    }

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

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

        justify-content:flex-start !important;
        flex-wrap:wrap !important;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:700px){

    body > .container{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    #topoGlobal .tg-topo{
        padding:14px !important;
    }

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

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

        flex-basis:50px !important;

        font-size:24px !important;
    }

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

    #topoGlobal .tg-subtitulo{
        white-space:normal !important;
    }

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

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

        gap:7px !important;
    }

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


@media(max-width:420px){

    #topoGlobal .tg-menu{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   ACAO DA PAGINA VIAGENS
   Botao localizado abaixo dos cards
========================================================= */

.acoes-viagem-dashboard{
    box-sizing:border-box;

    width:100%;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    margin:-2px 0 18px 0;
    padding:0;
}

.btn-nova-viagem-dashboard{
    box-sizing:border-box;

    min-height:42px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    margin:0;
    padding:0 17px;

    border:1px solid #16a34a;
    border-radius:10px;

    background:#16a34a;
    color:#ffffff;

    font-family:inherit;
    font-size:13px;
    line-height:1;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 4px 10px rgba(22,163,74,.16);

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.btn-nova-viagem-dashboard:hover{
    background:#15803d;
    border-color:#15803d;

    transform:translateY(-1px);
}

.btn-nova-viagem-mais{
    font-size:19px;
    line-height:1;
    font-weight:800;
}

@media(max-width:600px){

    .acoes-viagem-dashboard{
        margin-bottom:15px;
    }

    .btn-nova-viagem-dashboard{
        width:100%;
    }
}


/* =========================================================
   MENU GLOBAL - ESTILO TUBULAR
   Mantem o tema claro do Controle de Viagens
========================================================= */

#topoGlobal .tg-menu{
    box-sizing:border-box !important;

    flex:1 1 auto !important;

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

    gap:4px !important;

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

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

    background:#f1f5f9 !important;

    border:1px solid #dbe4ee !important;
    border-radius:13px !important;

    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.04),
        0 2px 6px rgba(15,23,42,.04) !important;
}


/* =========================================================
   BOTOES DA FAIXA
========================================================= */

#topoGlobal .tg-menu .tg-btn{
    box-sizing:border-box !important;

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

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

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

    gap:6px !important;

    background:transparent !important;
    color:#334155 !important;

    border:1px solid transparent !important;
    border-radius:9px !important;

    font-family:inherit !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    box-shadow:none !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease !important;
}


/* =========================================================
   ICONES COMPACTOS
========================================================= */

#topoGlobal .tg-menu .tg-menu-icone{
    box-sizing:border-box !important;

    width:24px !important;
    height:24px !important;

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

    flex:0 0 24px !important;

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

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

    border-radius:50% !important;

    font-size:12px !important;
    line-height:1 !important;
}


/* CORES DOS ICONES */

#topoGlobal .tg-viagens .tg-menu-icone{
    background:#fee2e2 !important;
}

#topoGlobal .tg-veiculos .tg-menu-icone{
    background:#dcfce7 !important;
}

#topoGlobal .tg-motoristas .tg-menu-icone{
    background:#ede9fe !important;
}

#topoGlobal .tg-abastecimentos .tg-menu-icone{
    background:#dbeafe !important;
}

#topoGlobal .tg-despesas .tg-menu-icone{
    background:#fef3c7 !important;
}


/* =========================================================
   HOVER
========================================================= */

#topoGlobal .tg-menu .tg-btn:not(.tg-sair):hover{
    background:#ffffff !important;

    border-color:#d5dee9 !important;

    box-shadow:
        0 2px 5px rgba(15,23,42,.07) !important;

    transform:translateY(-1px) !important;
}


/* =========================================================
   PAGINA ATIVA
========================================================= */

#topoGlobal .tg-menu .tg-btn.ativo{
    background:#ffffff !important;
    color:#1d4ed8 !important;

    border-color:#93c5fd !important;

    box-shadow:
        0 2px 6px rgba(37,99,235,.12) !important;
}

#topoGlobal .tg-menu .tg-btn.ativo:hover{
    background:#ffffff !important;
    border-color:#60a5fa !important;
}


/* =========================================================
   SAIR
========================================================= */

#topoGlobal .tg-menu .tg-sair{
    height:36px !important;
    min-height:36px !important;

    margin-left:3px !important;
    padding:0 10px !important;

    background:#ffffff !important;
    color:#64748b !important;

    border:1px solid #d8e0e9 !important;
    border-radius:9px !important;
}

#topoGlobal .tg-menu .tg-sair:hover{
    background:#fff1f2 !important;
    color:#dc2626 !important;

    border-color:#fecdd3 !important;

    transform:translateY(-1px) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1180px){

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

        justify-content:flex-start !important;

        flex-wrap:wrap !important;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:700px){

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

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

        gap:5px !important;

        padding:6px !important;
    }

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

        justify-content:flex-start !important;

        padding-left:9px !important;
        padding-right:9px !important;
    }

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


@media(max-width:420px){

    #topoGlobal .tg-menu{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   CORRECAO MENU TUBULAR
   Barra ocupa somente o espaco dos botoes
========================================================= */

@media(min-width:1181px){

    #topoGlobal .tg-topo{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        gap:24px !important;
    }

    #topoGlobal .tg-identidade{
        flex:0 0 285px !important;

        width:285px !important;
        min-width:285px !important;
        max-width:285px !important;
    }

    #topoGlobal .tg-menu{
        flex:0 0 auto !important;

        width:auto !important;
        min-width:0 !important;
        max-width:none !important;

        margin-left:auto !important;

        padding:5px !important;

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

        gap:4px !important;

        background:#f1f5f9 !important;

        border:1px solid #dbe4ee !important;
        border-radius:13px !important;

        box-shadow:
            inset 0 1px 2px rgba(15,23,42,.04),
            0 2px 6px rgba(15,23,42,.04) !important;
    }

}


/* =========================================================
   FAIXA TUBULAR DO TOPO INTEIRO
   Referencia: barra superior do CSP Manager

   IMPORTANTE:
   tubular = TG-TOPO INTEIRO
   nao o menu interno
========================================================= */

@media(min-width:1181px){

    /* -----------------------------------------------------
       TUBO EXTERNO COMPLETO
    ----------------------------------------------------- */

    #topoGlobal .tg-topo{
        box-sizing:border-box !important;

        width:100% !important;
        min-height:70px !important;
        height:70px !important;

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

        gap:22px !important;

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

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f8fafc 48%,
                #eef3f8 100%
            ) !important;

        border:1px solid #d7e1eb !important;

        /*
         * Aqui esta o formato tubular:
         * raio grande no CONTAINER INTEIRO.
         */
        border-radius:35px !important;

        overflow:hidden !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            inset 0 -1px 2px rgba(15,23,42,.04),
            0 7px 16px rgba(15,23,42,.10) !important;
    }


    /* -----------------------------------------------------
       IDENTIDADE DENTRO DO TUBO
    ----------------------------------------------------- */

    #topoGlobal .tg-identidade{
        box-sizing:border-box !important;

        flex:0 0 auto !important;

        width:auto !important;
        min-width:285px !important;
        max-width:none !important;

        height:56px !important;

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

        gap:12px !important;

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


    #topoGlobal .tg-icone-principal{
        box-sizing:border-box !important;

        width:48px !important;
        height:48px !important;

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

        flex:0 0 48px !important;

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

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

        background:#e7f2ff !important;

        border:1px solid #bfdbfe !important;
        border-radius:50% !important;

        font-size:23px !important;

        box-shadow:
            0 2px 6px rgba(37,99,235,.10) !important;
    }


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

        font-size:21px !important;
        line-height:24px !important;
        font-weight:800 !important;

        color:#0f172a !important;

        white-space:nowrap !important;
    }


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

        font-size:11px !important;
        line-height:14px !important;

        color:#64748b !important;

        white-space:nowrap !important;
    }


    /* -----------------------------------------------------
       MENU DENTRO DA FAIXA
       SEM OUTRO TUBO AO REDOR
    ----------------------------------------------------- */

    #topoGlobal .tg-menu{
        box-sizing:border-box !important;

        flex:0 0 auto !important;

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

        height:auto !important;

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

        gap:5px !important;

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

        /*
         * Remove a faixa tubular que fizemos
         * ERRADAMENTE ao redor dos botoes.
         */
        background:transparent !important;

        border:0 !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }


    /* -----------------------------------------------------
       BOTOES NORMAIS DENTRO DO TUBO
    ----------------------------------------------------- */

    #topoGlobal .tg-menu .tg-btn{
        box-sizing:border-box !important;

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

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

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

        gap:6px !important;

        background:rgba(255,255,255,.55) !important;
        color:#334155 !important;

        border:1px solid #dbe4ee !important;
        border-radius:9px !important;

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

        box-shadow:
            0 1px 2px rgba(15,23,42,.035) !important;

        white-space:nowrap !important;
    }


    #topoGlobal .tg-menu .tg-btn:hover{
        background:#ffffff !important;

        border-color:#cbd5e1 !important;

        transform:translateY(-1px) !important;

        box-shadow:
            0 3px 7px rgba(15,23,42,.08) !important;
    }


    /* -----------------------------------------------------
       ATIVO
    ----------------------------------------------------- */

    #topoGlobal .tg-menu .tg-btn.ativo{
        background:#ffffff !important;
        color:#1d4ed8 !important;

        border-color:#93c5fd !important;

        box-shadow:
            0 2px 6px rgba(37,99,235,.13) !important;
    }


    /* -----------------------------------------------------
       ICONES
    ----------------------------------------------------- */

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

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

        flex:0 0 24px !important;

        border-radius:50% !important;

        font-size:12px !important;
    }


    /* -----------------------------------------------------
       SAIR
    ----------------------------------------------------- */

    #topoGlobal .tg-menu .tg-sair{
        height:38px !important;
        min-height:38px !important;

        margin-left:4px !important;
        padding:0 13px !important;

        background:#ffffff !important;
        color:#64748b !important;

        border:1px solid #d7e0e9 !important;
        border-radius:9px !important;

        box-shadow:
            0 1px 3px rgba(15,23,42,.05) !important;
    }


    #topoGlobal .tg-menu .tg-sair:hover{
        background:#fff1f2 !important;
        color:#dc2626 !important;

        border-color:#fecdd3 !important;
    }
}


/* =========================================================
   VOLUME TUBULAR REAL - TOPO INTEIRO
   Mantem estrutura atual; altera somente profundidade visual
========================================================= */

@media(min-width:1181px){

    #topoGlobal .tg-topo{
        position:relative !important;

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

        /*
         * Menos "capsula", mais faixa tubular.
         */
        border-radius:22px !important;

        /*
         * Curvatura visual:
         * bordas mais sombreadas e centro iluminado.
         */
        background:
            linear-gradient(
                180deg,
                #e8eef5 0%,
                #f8fafc 14%,
                #ffffff 43%,
                #ffffff 57%,
                #f5f8fb 78%,
                #dce5ee 100%
            ) !important;

        border:1px solid #cbd6e2 !important;

        /*
         * Volume interno + sombra externa inferior.
         */
        box-shadow:
            inset 0 2px 2px rgba(255,255,255,1),
            inset 0 7px 12px rgba(255,255,255,.58),
            inset 0 -5px 9px rgba(100,116,139,.13),
            0 3px 3px rgba(15,23,42,.06),
            0 10px 18px rgba(15,23,42,.12) !important;

        overflow:hidden !important;
    }


    /*
     * Brilho longitudinal na metade superior.
     * Ajuda a criar a curvatura do "tubo".
     */

    #topoGlobal .tg-topo::before{
        content:"" !important;

        position:absolute !important;

        left:18px !important;
        right:18px !important;
        top:3px !important;

        height:26px !important;

        border-radius:18px 18px 50% 50% !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.78) 0%,
                rgba(255,255,255,.28) 65%,
                rgba(255,255,255,0) 100%
            ) !important;

        pointer-events:none !important;

        z-index:0 !important;
    }


    /*
     * Sombra curva na parte inferior.
     */

    #topoGlobal .tg-topo::after{
        content:"" !important;

        position:absolute !important;

        left:22px !important;
        right:22px !important;
        bottom:-7px !important;

        height:20px !important;

        border-radius:50% !important;

        background:
            radial-gradient(
                ellipse at center,
                rgba(71,85,105,.15) 0%,
                rgba(71,85,105,.07) 48%,
                rgba(71,85,105,0) 75%
            ) !important;

        pointer-events:none !important;

        z-index:0 !important;
    }


    /*
     * Conteudo fica acima dos efeitos.
     */

    #topoGlobal .tg-identidade,
    #topoGlobal .tg-menu{
        position:relative !important;
        z-index:2 !important;
    }

}


/* =========================================================
   TOPO MOBILE COMPACTO
   SOMENTE CELULAR
   Desktop permanece exatamente como estava antes do V11
========================================================= */

@media(max-width:700px){

    #topoGlobal{
        margin-bottom:14px !important;
    }


    /* -----------------------------------------------------
       FAIXA PRINCIPAL
       Mantem as cores claras existentes
    ----------------------------------------------------- */

    #topoGlobal .tg-topo{
        box-sizing:border-box !important;

        width:100% !important;

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

        display:block !important;

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

        border-radius:13px !important;

        overflow:hidden !important;
    }


    /* -----------------------------------------------------
       TITULO COMPACTO NO TOPO
    ----------------------------------------------------- */

    #topoGlobal .tg-identidade{
        box-sizing:border-box !important;

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

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

        gap:8px !important;

        margin:0 0 7px 0 !important;
        padding:1px 3px 6px 3px !important;
    }


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

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

        flex:0 0 34px !important;

        font-size:17px !important;

        border-radius:8px !important;
    }


    #topoGlobal .tg-textos{
        min-width:0 !important;
    }


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

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

        white-space:nowrap !important;
    }


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

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

        white-space:normal !important;
    }


    /* -----------------------------------------------------
       MENU MOBILE
       Igual ao CONCEITO do CSP:
       compacto em grade, nao lista vertical
    ----------------------------------------------------- */

    #topoGlobal .tg-menu{
        box-sizing:border-box !important;

        width:100% !important;

        display:grid !important;

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

        gap:4px !important;

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

        background:transparent !important;

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


    /* -----------------------------------------------------
       BOTOES COMPACTOS
       Mantem as cores que ja tinhamos
    ----------------------------------------------------- */

    #topoGlobal .tg-menu .tg-btn{
        box-sizing:border-box !important;

        width:100% !important;

        height:30px !important;
        min-height:30px !important;
        max-height:30px !important;

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

        gap:4px !important;

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

        border-radius:7px !important;

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

        white-space:nowrap !important;
    }


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

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

        flex:0 0 17px !important;

        font-size:8px !important;
    }


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

}


/* celulares muito estreitos */

@media(max-width:390px){

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

}

/* =========================================================
   DASHBOARD - OCULTA IDENTIFICACAO DUPLICADA DO TOPO
   O botao Dashboard do menu permanece normalmente.
========================================================= */

body.pagina-dashboard .tg-identidade,
body.pagina-dashboard .tg-brand,
body.pagina-dashboard .tg-titulo-area {
    display: none !important;
}


/* DASHBOARD - remove somente titulo/icone da esquerda do topo */
body.pagina-dashboard .tg-identidade,
body.pagina-dashboard .tg-brand,
body.pagina-dashboard .tg-titulo-area,
body.pagina-dashboard .topo-identidade,
body.pagina-dashboard .topo-info {
    display: none !important;
}


/* =========================================================
   DASHBOARD CLICAVEL - IDENTIDADE ESQUERDA
   ========================================================= */

.tg-dashboard-link {
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}

.tg-dashboard-link:hover {
    opacity: .82;
}

.tg-dashboard-link:active {
    transform: scale(.98);
}

.tg-dashboard-link * {
    cursor: pointer;
}