/* =====================================================
   FRETE+ - RELATÓRIOS
   ARQUIVO COMPLETO
===================================================== */


/* =====================================================
   PÁGINA
===================================================== */

.relatorios-page {
    width: 100%;
}


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

.relatorios-filtros {
    background: #15243a;

    border: 1px solid #263950;
    border-radius: 14px;

    padding: 22px;

    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 25px;

    box-shadow:
        0 2px 10px
        rgba(15, 23, 42, 0.05);
}


.filtro-grupo {
    display: flex;
    flex-direction: column;

    gap: 7px;

    min-width: 210px;
}


.filtro-grupo label {
    font-size: 13px;
    font-weight: 700;

    color: #cbd5e1;
}


.filtro-grupo input {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid #31455f;
    border-radius: 9px;

    font-size: 14px;

    color: #f4f7fb;
    background: #15243a;
}


.filtro-grupo input:focus {
    outline: none;

    border-color: #0b8fd3;

    box-shadow:
        0 0 0 3px
        rgba(11, 143, 211, 0.10);
}


/* =====================================================
   BOTÕES DOS FILTROS
===================================================== */

.relatorios-filtros .btn-primary,
.relatorios-filtros .btn-secondary {
    min-height: 46px;

    padding: 0 22px;

    border-radius: 9px;

    font-weight: 700;
    font-size: 14px;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}


.relatorios-filtros .btn-primary {
    border: none;

    background: #078dca;
    color: #ffffff;
}


.relatorios-filtros .btn-primary:hover {
    filter: brightness(0.95);
}


.relatorios-filtros .btn-secondary {
    border: none;

    background: #17263a;
    color: #cbd5e1;
}


.relatorios-filtros .btn-secondary:hover {
    background: #21344b;
}


.relatorios-filtros button:active {
    transform: scale(0.98);
}


/* =====================================================
   CARDS DOS INDICADORES
===================================================== */

.relatorios-cards {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-bottom: 25px;
}


.relatorio-card {
    min-width: 0;
    min-height: 120px;

    padding: 22px;

    display: flex;
    align-items: center;

    gap: 16px;

    background: #15243a;

    border: 1px solid #263950;
    border-radius: 14px;

    box-shadow:
        0 2px 10px
        rgba(15, 23, 42, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.relatorio-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 22px
        rgba(15, 23, 42, 0.08);
}


.relatorio-card-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    border-radius: 12px;

    background: rgba(56,189,248,.13);

    font-size: 27px;
}


.relatorio-card p {
    margin: 0 0 6px;

    color: #94a3b8;

    font-size: 14px;
}


.relatorio-card h2 {
    margin: 0;

    color: #f4f7fb;

    font-size: 25px;
    line-height: 1.15;
}


/* =====================================================
   GRID DOS RELATÓRIOS
===================================================== */

.relatorios-grid {
    display: grid;

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

    gap: 20px;
}


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

.relatorio-painel {
    min-width: 0;
    min-height: 300px;

    padding: 24px;

    background: #15243a;

    border: 1px solid #263950;
    border-radius: 14px;

    box-shadow:
        0 2px 10px
        rgba(15, 23, 42, 0.05);
}


/* =====================================================
   TÍTULO DOS PAINÉIS
===================================================== */

.relatorio-painel .painel-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 17px;
    margin-bottom: 20px;

    border-bottom: 1px solid #263950;
}


.relatorio-painel .painel-titulo h2 {
    margin: 0;

    color: #f4f7fb;

    font-size: 18px;
    font-weight: 700;
}


.relatorio-painel .painel-titulo p {
    margin: 0;

    color: #94a3b8;

    font-size: 13px;

    text-align: right;
}


/* =====================================================
   RANKING VAZIO
===================================================== */

.ranking-vazio {
    min-height: 170px;

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

    padding: 20px;

    text-align: center;

    color: #94a3b8;

    font-size: 14px;

    background: #101c2d;

    border-radius: 10px;
}


/* =====================================================
   LISTA DO RANKING
===================================================== */

.ranking-lista {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =====================================================
   ITEM DO RANKING
===================================================== */

.ranking-item {
    width: 100%;

    padding: 12px 14px;

    background: #101c2d;

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

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.ranking-item:hover {
    background: #17263a;

    transform: translateX(2px);
}


/* =====================================================
   CABEÇALHO DO ITEM
===================================================== */

.ranking-item-topo {
    display: grid;

    grid-template-columns:
        38px minmax(0, 1fr) auto;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;
}


/* =====================================================
   POSIÇÃO DO RANKING
===================================================== */

.ranking-posicao {
    width: 32px;
    height: 32px;

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

    border-radius: 9px;

    background: #21344b;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 800;
}


/* PRIMEIRO LUGAR */

.ranking-item:nth-child(1) .ranking-posicao {
    background: rgba(245,158,11,.14);

    color: #a16207;
}


/* SEGUNDO LUGAR */

.ranking-item:nth-child(2) .ranking-posicao {
    background: #21344b;

    color: #cbd5e1;
}


/* TERCEIRO LUGAR */

.ranking-item:nth-child(3) .ranking-posicao {
    background: #ffedd5;

    color: #c2410c;
}


/* =====================================================
   NOME
===================================================== */

.ranking-nome {
    min-width: 0;

    color: #f4f7fb;

    font-size: 14px;
    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =====================================================
   QUANTIDADE
===================================================== */

.ranking-quantidade {
    min-width: 42px;

    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(56,189,248,.13);

    color: #0369a1;

    font-size: 12px;
    font-weight: 800;

    text-align: center;
}


/* =====================================================
   BARRA DO RANKING
===================================================== */

.ranking-barra {
    width: 100%;
    height: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #21344b;
}


/* =====================================================
   PREENCHIMENTO DA BARRA
===================================================== */

.ranking-barra-preenchimento {
    height: 100%;

    min-width: 4px;

    border-radius: inherit;

    background: #0ea5e9;

    transition: width 0.35s ease;
}


/* PRIMEIRO LUGAR */

.ranking-item:nth-child(1)
.ranking-barra-preenchimento {
    background: #0284c7;
}


/* SEGUNDO LUGAR */

.ranking-item:nth-child(2)
.ranking-barra-preenchimento {
    background: #38bdf8;
}


/* TERCEIRO LUGAR */

.ranking-item:nth-child(3)
.ranking-barra-preenchimento {
    background: #7dd3fc;
}


/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media (max-width: 1250px) {

    .relatorios-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    .relatorios-grid {
        grid-template-columns: 1fr;
    }


    .relatorios-filtros {
        align-items: stretch;
    }


    .filtro-grupo {
        flex: 1 1 210px;
    }


    .relatorio-painel .painel-titulo {
        align-items: flex-start;
    }

}


@media (max-width: 650px) {

    .relatorios-cards {
        grid-template-columns: 1fr;
    }


    .relatorios-filtros {
        flex-direction: column;
    }


    .filtro-grupo {
        width: 100%;
        min-width: 0;
    }


    .relatorios-filtros button {
        width: 100%;
    }


    .relatorio-card {
        min-height: 105px;

        padding: 18px;
    }


    .relatorio-card-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;

        font-size: 23px;
    }


    .relatorio-card h2 {
        font-size: 21px;
    }


    .relatorio-painel {
        padding: 18px;
    }


    .relatorio-painel .painel-titulo {
        flex-direction: column;

        gap: 5px;
    }


    .relatorio-painel .painel-titulo p {
        text-align: left;
    }


    .ranking-item-topo {
        grid-template-columns:
            34px minmax(0, 1fr) auto;
    }


    .ranking-posicao {
        width: 29px;
        height: 29px;
    }


    .ranking-nome {
        font-size: 13px;
    }

}
/* ======================================================
   FRETE+ 3.0
====================================================== */
.filtros-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end;gap:14px}.filtros-3 .btn-primary,.filtros-3 .btn-secondary{min-height:42px}.relatorio-detalhes{margin-top:22px}.relatorio-detalhes .table-container{margin-top:16px;overflow-x:auto}.dashboard-gerencial-3{margin-top:28px}.cards-gerenciais-3{margin-bottom:22px}.dash-rankings-3{margin-top:10px}@media(max-width:760px){.filtros-3{grid-template-columns:1fr}.relatorio-detalhes{padding:14px}}