/* =====================================================
   FRETE+
   COMPROVAÇÕES - PAINEL ADMINISTRATIVO
===================================================== */


/* =====================================================
   STATUS DA COMPROVAÇÃO
===================================================== */

.comprovacao-status-box {
    margin-top: 12px;

    padding: 12px 14px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.comprovacao-status-box.comprovada {
    background: rgba(34,197,94,.11);

    border:
        1px solid #bbf7d0;
}


.comprovacao-status-box.pendente {
    background: rgba(245,158,11,.11);

    border:
        1px solid #fde68a;
}


.comprovacao-status-principal {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.comprovacao-status-principal strong {
    font-size: 13px;
}


.comprovacao-status-principal span {
    color: #94a3b8;

    font-size: 12px;
}


.comprovacao-status-box.comprovada
.comprovacao-status-principal strong {
    color: #15803d;
}


.comprovacao-status-box.pendente
.comprovacao-status-principal strong {
    color: #b45309;
}


/* =====================================================
   AÇÕES DA ENTREGA
===================================================== */

.entrega-central-acoes {
    margin-top: 12px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.btn-comprovante {
    border: none;

    padding: 8px 11px;

    border-radius: 8px;

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

    color: #0369a1;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.btn-comprovante:hover {
    background: #bae6fd;
}


.btn-link-motorista {
    border: none;

    padding: 8px 11px;

    border-radius: 8px;

    background: #17263a;

    color: #cbd5e1;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.btn-link-motorista:hover {
    background: #21344b;
}


.btn-whatsapp-entrega {
    border: none;

    padding: 8px 11px;

    border-radius: 8px;

    background: #dcfce7;

    color: #15803d;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.btn-whatsapp-entrega:hover {
    background: #bbf7d0;
}


/* =====================================================
   ALERTA DE PROBLEMA
===================================================== */

.entrega-problema-badge {
    margin-top: 10px;

    padding: 9px 11px;

    border-radius: 8px;

    background: rgba(249,115,22,.12);

    border:
        1px solid #fed7aa;

    color: #c2410c;

    font-size: 12px;

    font-weight: 700;
}


/* =====================================================
   MODAL DE COMPROVANTES
===================================================== */

.comprovacao-resumo {
    display: grid;

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

    gap: 12px;

    margin-bottom: 22px;
}


.comprovacao-resumo > div {
    padding: 14px;

    border-radius: 10px;

    background: #101c2d;

    border:
        1px solid #e2e8f0;
}


.comprovacao-resumo span {
    display: block;

    margin-bottom: 5px;

    color: #94a3b8;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;
}


.comprovacao-resumo strong {
    font-size: 14px;
}


.comprovacao-ok {
    color: #15803d;
}


.comprovacao-pendente-texto {
    color: #b45309;
}


/* =====================================================
   AÇÕES DO MODAL
===================================================== */

.comprovantes-acoes {
    margin-bottom: 26px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.btn-whatsapp-admin {
    border: none;

    padding: 11px 18px;

    border-radius: 8px;

    background: #25d366;

    color: white;

    font-weight: 700;

    cursor: pointer;
}


.btn-whatsapp-admin:hover {
    background: #20bd5a;
}


/* =====================================================
   SEÇÕES
===================================================== */

.comprovantes-secao {
    margin-top: 25px;

    padding-top: 22px;

    border-top:
        1px solid #e2e8f0;
}


.comprovantes-secao h3 {
    margin-bottom: 15px;

    font-size: 16px;
}


/* =====================================================
   ARQUIVOS
===================================================== */

.comprovantes-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


.comprovante-arquivo {
    min-height: 95px;

    padding: 14px;

    display: flex;

    align-items: center;

    gap: 11px;

    border-radius: 11px;

    background: #101c2d;

    border:
        1px solid #e2e8f0;

    color: #f4f7fb;

    text-decoration: none;

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


.comprovante-arquivo:hover {
    background: rgba(14,165,233,.10);

    border-color: #7dd3fc;

    transform:
        translateY(-1px);
}


.comprovante-arquivo.indisponivel {
    opacity: .6;
}


.comprovante-icone {
    width: 42px;

    height: 42px;

    flex:
        0 0 42px;

    border-radius: 10px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;
}


.comprovante-arquivo strong {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
}


.comprovante-arquivo span {
    color: #94a3b8;

    font-size: 11px;
}


.comprovante-abrir {
    margin-left: auto;

    color: #0284c7;

    font-size: 18px;
}


/* =====================================================
   PENDÊNCIAS
===================================================== */

.comprovacao-pendente {
    padding: 16px;

    border-radius: 10px;

    background: rgba(245,158,11,.11);

    border:
        1px solid #fde68a;

    color: #92400e;

    font-size: 13px;
}


.comprovacao-sem-problema {
    padding: 16px;

    border-radius: 10px;

    background: rgba(34,197,94,.11);

    border:
        1px solid #bbf7d0;

    color: #166534;

    font-size: 13px;
}


/* =====================================================
   PROBLEMAS
===================================================== */

.ocorrencia-admin {
    margin-bottom: 12px;

    padding: 15px;

    border-radius: 10px;

    background: rgba(249,115,22,.12);

    border:
        1px solid #fed7aa;
}


.ocorrencia-admin-topo {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 9px;
}


.ocorrencia-admin-topo strong {
    color: #c2410c;

    font-size: 13px;
}


.ocorrencia-admin-topo span {
    color: #94a3b8;

    font-size: 11px;
}


.ocorrencia-admin p {
    margin:
        0 0 12px;

    color: #cbd5e1;

    font-size: 13px;

    line-height: 1.5;
}


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

@media
(max-width: 700px) {

    .comprovacao-resumo {
        grid-template-columns:
            1fr;
    }


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


    .comprovantes-acoes {
        flex-direction: column;
    }


    .comprovantes-acoes button {
        width: 100%;
    }


    .entrega-central-acoes {
        flex-direction: column;
    }


    .entrega-central-acoes button {
        width: 100%;
    }
}