/* =========================================================
   PAINEIS DE FUNCAO - PADRAO GLOBAL
   Inspirado nos paineis horizontais do CSP Manager

   NAO altera:
   - cards de resumo
   - cards financeiros
   - topo global
========================================================= */


/* =========================================================
   PAINEL PRINCIPAL
========================================================= */

body > .container > .box,
body > .container > .painel{
    position:relative;

    box-sizing:border-box;

    width:100%;

    margin-bottom:18px;

    background:#ffffff;

    border:1px solid #dce3eb;
    border-top:3px solid #2583f7;

    border-radius:13px;

    overflow:hidden;

    box-shadow:
        0 4px 12px rgba(15,23,42,.055);
}


/* =========================================================
   CORES ALTERNADAS POR PAGINA
========================================================= */

/* VIAGENS */
body.pagina-viagens > .container > .box,
body[data-pagina="viagens"] > .container > .box{
    border-top-color:#2583f7;
}


/* =========================================================
   CABECALHO DO PAINEL
========================================================= */

body > .container > .box > .box-titulo,
body > .container > .painel > .painel-topo{
    box-sizing:border-box;

    min-height:52px;

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

    gap:12px;

    margin:0;
    padding:0 17px;

    background:#ffffff;

    border:0;
    border-bottom:1px solid #e5eaf0;

    color:#172033;

    font-size:15px;
    line-height:1.2;
    font-weight:800;
}


/* H2 usado nos paineis */

body > .container > .painel > h2{
    box-sizing:border-box;

    min-height:52px;

    display:flex;
    align-items:center;

    margin:0;
    padding:0 17px;

    background:#ffffff;

    border-bottom:1px solid #e5eaf0;

    color:#172033;

    font-size:15px;
    line-height:1.2;
    font-weight:800;
}


/* Remove margens do H2 dentro de painel-topo */

body > .container > .painel > .painel-topo h2{
    margin:0;

    color:#172033;

    font-size:15px;
    line-height:1.2;
    font-weight:800;
}


/* =========================================================
   CORPO
========================================================= */

body > .container > .painel > .painel-corpo{
    background:#ffffff;
}


/* =========================================================
   EFEITO "TUBULAR" NOS BLOCOS INTERNOS/LISTAS
========================================================= */

body > .container > .box .lista > *,
body > .container > .painel .lista > *{
    border-radius:10px;
}


/* =========================================================
   TABELAS
========================================================= */

body > .container > .box .tabela,
body > .container > .painel .tabela-wrap{
    background:#ffffff;
}


/* =========================================================
   DESTAQUE ESPECIFICO POR TELA
   linha superior fina como CSP Manager
========================================================= */

body[data-tela="veiculos"] > .container > .painel{
    border-top-color:#16a34a;
}

body[data-tela="motoristas"] > .container > .box{
    border-top-color:#8b5cf6;
}

body[data-tela="abastecimentos"] > .container > .painel{
    border-top-color:#0ea5e9;
}

body[data-tela="despesas"] > .container > .box{
    border-top-color:#f59e0b;
}


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

@media(max-width:700px){

    body > .container > .box,
    body > .container > .painel{
        border-radius:11px;
        margin-bottom:14px;
    }

    body > .container > .box > .box-titulo,
    body > .container > .painel > .painel-topo,
    body > .container > .painel > h2{
        min-height:48px;
        padding-left:14px;
        padding-right:14px;
    }
}