/* =====================================================
   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: #6f786b;

    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(122,147,96,.13);

    color: #53673f;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


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


.btn-link-motorista {
    border: none;

    padding: 8px 11px;

    border-radius: 8px;

    background: #17263a;

    color: #566254;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


.btn-link-motorista:hover {
    background: #2f3b2a;
}


.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 #243024;
}


.comprovacao-resumo span {
    display: block;

    margin-bottom: 5px;

    color: #6f786b;

    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 #243024;
}


.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 #243024;

    color: #243024;

    text-decoration: none;

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


.comprovante-arquivo:hover {
    background: rgba(122,147,96,.10);

    border-color: #a7ba8d;

    transform:
        translateY(-1px);
}


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


.comprovante-icone {
    width: 42px;

    height: 42px;

    flex:
        0 0 42px;

    border-radius: 10px;

    background: rgba(122,147,96,.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: #6f786b;

    font-size: 11px;
}


.comprovante-abrir {
    margin-left: auto;

    color: #657b4e;

    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: #6f786b;

    font-size: 11px;
}


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

    color: #566254;

    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%;
    }
}
/* =====================================================
   FRETE+PRO 4.3.3.9
   PADRAO VISUAL ATUAL - COMPROVANTES DA ENTREGA
   Remove azul legado e aplica paleta Feno Visual/FRETE+PRO
===================================================== */

.comprovacao-resumo > div {
    background: #fbfaf6;
    border: 1px solid #ddd9cf;
    box-shadow: none;
}

.comprovacao-resumo span {
    color: #53673f;
}

.comprovacao-resumo strong {
    color: #232823;
}

.comprovante-arquivo {
    background: #fbfaf6;
    border: 1px solid #ddd9cf;
    color: #232823;
    box-shadow: none;
}

.comprovante-arquivo:hover {
    background: #f2f1ea;
    border-color: #53673f;
    transform: translateY(-1px);
}

.comprovante-icone {
    background: #e7eadf;
    color: #53673f;
}

.comprovante-arquivo strong {
    color: #232823;
}

.comprovante-arquivo span {
    color: #6f756a;
}

.comprovante-abrir {
    color: #53673f;
}

.btn-comprovante {
    background: #e7eadf;
    color: #475838;
    border: 1px solid #cfd5c3;
}

.btn-comprovante:hover {
    background: #dce2d1;
    border-color: #53673f;
}

.btn-link-motorista {
    background: #53673f;
    color: #ffffff;
}

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