/* ==========================================================
   GAIOLA PEDIDO PERFEITO
   Release 2.0
   style.css
   ========================================================== */

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#66BB6A;

    color:#2C3E50;

    min-height:100vh;

    line-height:1.4;

}

/* ==========================================================
   VARIÁVEIS
========================================================== */

:root{

    --verde:#5DBB2F;
    --verde-hover:#4AA122;

    --azul:#3498DB;

    --amarelo:#F1C40F;

    --vermelho:#E74C3C;

    --cinza:#95A5A6;

    --branco:#FFFFFF;

    --texto:#2C3E50;

    --borda:#E2E8F0;

    --fundo:#F4F6F9;

    --radius:12px;

    --shadow:
        0 4px 18px rgba(0,0,0,.08);

    --transition:.25s;

}

/* ==========================================================
   LAYOUT
========================================================== */

.container{

    width:100%;

    max-width:1600px;

    margin:auto;

    padding:20px;

}

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mb-20{

    margin-bottom:20px;

}

/* ==========================================================
   HEADER
========================================================== */

header{

    background:var(--branco);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:20px 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:25px;

}

.header-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.logo{

    width:70px;

    height:70px;

    object-fit:contain;

}

.titulo{

    display:flex;

    flex-direction:column;

}

.titulo h1{

    font-size:24px;

    color:var(--verde);

    font-weight:bold;

}

.titulo span{

    color:#7F8C8D;

    margin-top:4px;

    font-size:14px;

}

.header-right{

    text-align:right;

}

.header-right small{

    display:block;

    color:#7F8C8D;

    margin-bottom:6px;

}

#sync{

    font-size:14px;

    font-weight:bold;

}

/* ==========================================================
   BOTÕES
========================================================== */

.btn{

    border:none;

    cursor:pointer;

    border-radius:8px;

    padding:10px 18px;

    font-size:14px;

    font-weight:600;

    transition:all var(--transition);

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

.btn:hover{

    transform:translateY(-2px);

}

.btn-primary{

    background:var(--verde);

    color:#FFF;

}

.btn-primary:hover{

    background:var(--verde-hover);

}

.btn-secondary{

    background:#BDC3C7;

    color:#2C3E50;

}

.btn-secondary:hover{

    background:#AAB2B5;

}

.btn-warning{

    background:var(--amarelo);

    color:#2C3E50;

}

.btn-warning:hover{

    background:#D4AC0D;

}

.btn-danger{

    background:var(--vermelho);

    color:#FFF;

}

.btn-danger:hover{

    background:#C0392B;

}

.btn-icon{

    width:38px;

    height:38px;

    padding:0;

}

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

.dashboard-status{

    display:grid;

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

    gap:12px;

    margin-bottom:40px;

}




/* ==========================================================
   DASHBOARD
========================================================== */

.dashboard{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.dashboard-status .card{

    min-width:0;

}

.dashboard-status{

    display:grid;

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

    gap:12px;

}

/* ==========================================================
   CARDS
========================================================== */

.card{

    background:var(--branco);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:16px;

    position:relative;

    overflow:hidden;

    transition:all .25s ease;

    cursor:pointer;

}

.dashboard-status .card{

    min-height:110px;

    }
    
.dashboard-status .card .valor{

    font-size:26px;

    font-weight:700;

    margin:14px 0;

}
    
.card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.12);

}

.card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

}

/* ==========================================================
   CARD TOTAL
========================================================== */

.card.total{

    grid-column:1 / -1;

    min-height:180px;

}

.card.total h3{

    color:var(--azul);

}

/* ==========================================================
   CARD NO PRAZO
========================================================== */

.card.no-prazo::before{

    background:var(--verde);

}

.card.no-prazo h3{

    color:var(--verde);

}

/* ==========================================================
   CARD ATENÇÃO
========================================================== */

.card.atencao::before{

    background:#3498DB;


}

.card.atencao h3{

    color:#3498DB;

}

/* ==========================================================
   CARD CRÍTICO
========================================================== */

.card.critico::before{

    background:var(--amarelo);

}

.card.critico h3{

    color:#D68910;

}

/* ==========================================================
   CARD URGENTE
========================================================== */

.card.urgente::before{

    background:var(--vermelho);

}

.card.urgente h3{

    color:var(--vermelho);

}

/* ==========================================================
   TÍTULO
========================================================== */

.card h3{

    font-size:12px;

    font-weight:700;

    margin-bottom:14px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/* ==========================================================
   VALOR
========================================================== */

#kpiTotal{

    font-size:76px;

    font-weight:700;

    line-height:1;

}

/* ==========================================================
   BARRA DE PROGRESSO
========================================================== */

.progress{

    width:100%;

    height:8px;

    background:#ECF0F1;

    border-radius:20px;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    border-radius:20px;

    transition:width .35s ease;

}

.total .progress-bar{

    background:var(--azul);

}

.no-prazo .progress-bar{

    background:var(--verde);

}

.atencao .progress-bar{

    background:#3498DB;

}

.critico .progress-bar{

    background:var(--amarelo);

}

.urgente .progress-bar{

    background:var(--vermelho);

}

/* ==========================================================
   EFEITO AO PASSAR O MOUSE
========================================================== */

.card:hover .valor{

    transform:scale(1.05);

    transition:.25s;

}

/* ==========================================================
   BADGE OPCIONAL
========================================================== */

.card-badge{

    position:absolute;

    right:18px;

    top:18px;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    color:#FFF;

}

.total .card-badge{

    background:var(--azul);

}

.no-prazo .card-badge{

    background:var(--verde);

}

.atencao .card-badge{

    background:#3498DB;

}

.critico .card-badge{

    background:var(--amarelo);

}

.urgente .card-badge{

    background:var(--vermelho);

}




/* ==========================================================
   BARRA DE AÇÕES
========================================================== */

.actions-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

    flex-wrap:wrap;

}

.actions-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.actions-right{

    display:flex;

    align-items:center;

    gap:12px;

    margin-left:auto;

}

/* ==========================================================
   PESQUISA
========================================================== */

.search-box{

    position:relative;

    width:340px;

}

.search-box input{

    width:100%;

    height:44px;

    border:1px solid var(--borda);

    border-radius:10px;

    padding:0 15px;

    font-size:14px;

    outline:none;

    transition:.25s;

    background:#FFF;

}

.search-box input:focus{

    border-color:var(--verde);

    box-shadow:0 0 0 3px rgba(93,187,47,.15);

}

.search-box input::placeholder{

    color:#95A5A6;

}

/* ==========================================================
   TOP 10
========================================================== */

.top10{

    background:#F4A3A3;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

    margin-bottom:25px;

}

.top10-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-bottom:1px solid var(--borda);

}

.top10-header h2{

    color: #B71C1C;

    font-size: 16px;

}

.top10-header span{

    color:#7F8C8D;

    font-size:13px;

}

/* ==========================================================
   TABELA TOP 10
========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    table-layout:auto;

}

.top10 thead{

    background:#FDECEC;

}

.top10 th{

    padding:14px;

    text-align:center !important;

    font-size:13px;

    color:#5C0000;

    border-bottom:1px solid var(--borda);

    text-transform:uppercase;

    letter-spacing:.5px;

}

.top10 td{

    padding:14px;

    border-bottom:1px solid #EDF2F7;

    font-size:14px;

}

.top10 tbody tr{

    transition:.20s;

}

.top10 tbody tr:hover{

    background:#F8D7DA;

}

.top10 tbody tr:last-child td{

    border-bottom:none;

}

/* ==========================================================
   STATUS BADGE
========================================================== */

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:6px 12px;

    border-radius:20px;

    color:#FFF;

    font-size:12px;

    font-weight:bold;

}

/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state{

    padding:40px;

    text-align:center;

    color:#95A5A6;

    font-size:15px;

}

.empty-state strong{

    display:block;

    margin-bottom:10px;

    color:#7F8C8D;

    font-size:17px;

}




    /* ==========================================================
       TABELA DE PEDIDOS
    ========================================================== */
    
    .table-container{
    
        background:var(--branco);
    
        border-radius:var(--radius);
    
        box-shadow:var(--shadow);
    
        overflow:hidden;
    
    }
    
    
    .table-responsive{

    width:100%;

    overflow-x:hidden;

    }
    
    
    table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

}
    
    /* ==========================================================
       CABEÇALHO
    ========================================================== */
    
    thead{
    
        background:#F8F9FA;
    
    }
    
    thead th{

    padding:10px 8px;

    text-align:center;

    font-size:10px;

    color:#7F8C8D;

    text-transform:uppercase;

    letter-spacing:.5px;

    border-bottom:1px solid var(--borda);

    white-space:nowrap;

    }
    
    thead th:first-child{
    
        padding-left:20px;
    
    }
    
    thead th:last-child{
    
        text-align:center;
    
    }
    
    /* ==========================================================
       CORPO DA TABELA
    ========================================================== */
    
    tbody td{
    
        padding:15px 14px;
    
        border-bottom:1px solid #EDF2F7;
    
        font-size:11px;
    
        color:var(--texto);
    
        vertical-align:middle;
    
    }
    
    tbody td:first-child{
    
        padding-left:20px;
    
    }
    
    tbody tr{
    
        transition:.20s;
    
    }
    
    tbody tr:hover{
    
        background:#F8FBFD;
    
    }
    
    tbody tr:last-child td{
    
        border-bottom:none;
    
    }
    
    /* ==========================================================
       COLUNAS
    ========================================================== */
    
.col-data{
    width:12%;
}

.col-pedido{
    width:10%;
    font-weight:bold;
}

.col-endereco{
    width:10%;
}

.col-dias{
    width:6%;
    text-align:center;
    font-weight:bold;
}

.col-volumes{
    width:6%;
    text-align:center;
}

.col-usuario{
    width:8%;
}

.col-observacao{
    width:24%;
}

.col-status{
    width:10%;
    text-align:center;
}

.col-acoes{
    width:12%;
    text-align:center;
}
    
    /* ==========================================================
       OBSERVAÇÃO
    ========================================================== */
    
    .observacao{
    
        max-width:280px;
    
        overflow:hidden;
    
        text-overflow:ellipsis;
    
        white-space:nowrap;
    
        cursor:default;
    
    }
    
    /* ==========================================================
       AÇÕES
    ========================================================== */
    
    .acoes{
    
        display:flex;
    
        justify-content:center;
    
        align-items:center;
    
        gap:8px;
    
    }
    
    .acoes button{
    
        width:38px;
    
        height:38px;
    
        border:none;
    
        border-radius:8px;
    
        cursor:pointer;
    
        transition:.20s;
    
        display:flex;
    
        align-items:center;
    
        justify-content:center;
    
        font-size:14px;
    
    }
    
    .acoes button:hover{
    
        transform:translateY(-2px);
    
    }

/* ==========================================================
   BOTÃO EDITAR
========================================================== */

.btn-editar{

    background:#3498DB;

    color:#FFF;

}

.btn-editar:hover{

    background:#2D89C6;

}

/* ==========================================================
   BOTÃO RETIRAR
========================================================== */

.btn-retirar{

    background:#F1C40F;

    color:#2C3E50;

}

.btn-retirar:hover{

    background:#D4AC0D;

}

/* ==========================================================
   BOTÃO EXCLUIR
========================================================== */

.btn-excluir{

    background:#E74C3C;

    color:#FFF;

}

.btn-excluir:hover{

    background:#C0392B;

}

/* ==========================================================
   TOOLTIP
========================================================== */

[title]{

    position:relative;

}

/* ==========================================================
   LINHAS POR CRITICIDADE
========================================================== */

.linha-no-prazo{

    border-left:5px solid var(--verde);

}

.linha-atencao{

    border-left:5px solid var(--azul);

}

.linha-critico{

    border-left:5px solid var(--amarelo);

}

.linha-urgente{

    border-left:5px solid var(--vermelho);

}

/* ==========================================================
   MENSAGEM SEM DADOS
========================================================== */

.sem-registros{

    padding:45px;

    text-align:center;

    color:#95A5A6;

    font-size:15px;

    font-weight:600;

}




/* ==========================================================
   MODAL
========================================================== */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:9999;

    animation:fadeIn .20s ease;

}

.modal.hidden{

    display:none;

}

.modal-content{

    width:100%;

    max-width:720px;

    background:var(--branco);

    border-radius:16px;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    overflow:hidden;

    animation:modalOpen .25s ease;

}

/* ==========================================================
   HEADER
========================================================== */

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 24px;

    background:var(--verde);

    color:#FFF;

}

.modal-header h2{

    font-size:18px;

    font-weight:700;

}

.btn-close{

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:#FFF;

    font-size:20px;

    cursor:pointer;

    transition:.20s;

}

.btn-close:hover{

    background:rgba(255,255,255,.30);

    transform:rotate(90deg);

}

/* ==========================================================
   BODY
========================================================== */

.modal-body{

    padding:24px;

}

/* ==========================================================
   GRID DO FORMULÁRIO
========================================================== */

.form-grid{

    display:grid;

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

    gap:18px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group.full{

    grid-column:1 / -1;

}

/* ==========================================================
   LABEL
========================================================== */

.form-group label{

    font-size:13px;

    font-weight:700;

    color:#34495E;

    margin-bottom:6px;

}

/* ==========================================================
   INPUTS
========================================================== */

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    padding:11px 14px;

    border:1px solid var(--borda);

    border-radius:10px;

    background:#FFF;

    color:var(--texto);

    font-size:14px;

    transition:.20s;

    outline:none;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:var(--verde);

    box-shadow:0 0 0 3px rgba(93,187,47,.18);

}

.form-group input:disabled{

    background:#F3F4F6;

    cursor:not-allowed;

}

/* ==========================================================
   TEXTAREA
========================================================== */

textarea{

    resize:vertical;

    min-height:110px;

    max-height:240px;

}

/* ==========================================================
   RODAPÉ
========================================================== */

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:20px 24px;

    border-top:1px solid var(--borda);

    background:#FAFBFC;

}

/* ==========================================================
   CAMPOS OBRIGATÓRIOS
========================================================== */

.required::after{

    content:" *";

    color:var(--vermelho);

}

/* ==========================================================
   ERRO DE VALIDAÇÃO
========================================================== */

.input-error{

    border-color:var(--vermelho) !important;

    box-shadow:0 0 0 3px rgba(231,76,60,.15);

}

.validation-message{

    color:var(--vermelho);

    font-size:12px;

    margin-top:5px;

}

/* ==========================================================
   LOADING DO BOTÃO
========================================================== */

.btn-loading{

    opacity:.7;

    pointer-events:none;

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes modalOpen{

    from{

        opacity:0;

        transform:translateY(-20px) scale(.98);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}




/* ==========================================================
   TOAST
========================================================== */

.toast{

    position:fixed;

    right:25px;

    bottom:25px;

    min-width:320px;

    max-width:420px;

    padding:16px 18px;

    border-radius:12px;

    color:#FFF;

    display:flex;

    align-items:center;

    gap:14px;

    box-shadow:0 15px 35px rgba(0,0,0,.20);

    z-index:99999;

    opacity:0;

    transform:translateY(30px);

    transition:.30s;

}

.toast.show{

    opacity:1;

    transform:translateY(0);

}

.toast-icon{

    font-size:22px;

}

.toast-content{

    flex:1;

}

.toast-title{

    font-size:15px;

    font-weight:bold;

    margin-bottom:3px;

}

.toast-message{

    font-size:13px;

    line-height:1.4;

}

.toast-success{

    background:#2ECC71;

}

.toast-warning{

    background:#F39C12;

}

.toast-error{

    background:#E74C3C;

}

.toast-info{

    background:#3498DB;

}

/* ==========================================================
   LOADING
========================================================== */

.loading{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99998;

}

.loading.hidden{

    display:none;

}

/* ==========================================================
   SPINNER
========================================================== */

.spinner{

    width:60px;

    height:60px;

    border:6px solid #EAECEF;

    border-top:6px solid var(--verde);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

.badge-success{

    background:#2ECC71;

    color:#FFF;

}

.badge-info{

    background:#3498DB;

    color:#FFF;

}

.badge-warning{

    background:#F1C40F;

    color:#2C3E50;

}

.badge-danger{

    background:#E74C3C;

    color:#FFF;

}

/* ==========================================================
   CHIPS
========================================================== */

.chip{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    background:#EEF3F6;

    font-size:13px;

    color:#34495E;

}

/* ==========================================================
   INDICADORES
========================================================== */

.indicator{

    display:flex;

    align-items:center;

    gap:10px;

}

.indicator-dot{

    width:12px;

    height:12px;

    border-radius:50%;

}

.dot-success{

    background:var(--verde);

}

.dot-info{

    background:#3498DB;

}

.dot-warning{

    background:#F1C40F;

}

.dot-danger{

    background:#E74C3C;

}

/* ==========================================================
   CARDS AUXILIARES
========================================================== */

.info-card{

    background:#FFF;

    border-radius:12px;

    padding:18px;

    box-shadow:var(--shadow);

}

.info-card h4{

    margin-bottom:10px;

    color:var(--verde);

}

.info-card p{

    color:#7F8C8D;

    font-size:14px;

    line-height:1.5;

}

/* ==========================================================
   DIVISORES
========================================================== */

.divider{

    width:100%;

    height:1px;

    background:#E5E7EB;

    margin:20px 0;

}

/* ==========================================================
   SOMBRAS
========================================================== */

.shadow-sm{

    box-shadow:0 2px 6px rgba(0,0,0,.08);

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-lg{

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}

/* ==========================================================
   ANIMAÇÕES
========================================================== */

.fade-in{

    animation:fadeElement .30s ease;

}

@keyframes fadeElement{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}




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

/* ==========================================================
   NOTEBOOK
========================================================== */

@media (max-width:1400px){

    .container{

        max-width:100%;

        padding:18px;

    }

    .dashboard{

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

    }

}

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

@media (max-width:992px){

    header{

        flex-direction:column;

        align-items:flex-start;

    }

    .header-right{

        width:100%;

        text-align:center;

    }

    .dashboard{

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

    }

    .actions-bar{

        flex-direction:column;

        align-items:stretch;

    }

    .actions-left,

    .actions-right{

        width:100%;

    }

    .search-box{

        width:100%;

    }

    .search-box input{

        width:100%;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .modal-content{

        max-width:95%;

    }

}

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

@media (max-width:768px){

    body{

        font-size:14px;

    }

    .container{

        padding:12px;

    }

    header{

        padding:18px;

    }

    .header-left{

        flex-direction:column;

        align-items:flex-start;

    }

    .logo{

        width:58px;

        height:58px;

    }

    .titulo h1{

        font-size:18px;

    }

    .dashboard{

        grid-template-columns:1fr;

    }

    .card{

        padding:12px;

    }

    .card .valor{

    font-size:52px;

    font-weight:bold;

    color:var(--texto);

    margin-bottom:18px;

}

    }

    .top10-header{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .table-responsive{

    width:100%;

    overflow-x:hidden;

    }


        
    table th,
    table td{

    text-align:center;

    vertical-align:middle;

    padding:10px 6px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    }

    .modal{

        padding:10px;

    }

    .modal-content{

        max-width:100%;

        border-radius:12px;

    }

    .modal-header{

        padding:16px;

    }

    .modal-body{

        padding:16px;

    }

    .modal-footer{

        padding:16px;

        flex-direction:column-reverse;

    }

    .modal-footer .btn{

        width:100%;

    }

    .toast{

        left:10px;

        right:10px;

        bottom:10px;

        min-width:auto;

        max-width:none;

        width:auto;

    }



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

@media (max-width:480px){

    .titulo h1{

        font-size:15px;

    }

    .titulo span{

        font-size:12px;

    }

    .btn{

        width:100%;

    }

    .btn-icon{

        width:36px;

        height:36px;

    }

    .card{

        padding:16px;

    }

    .card h3{

        font-size:10px;

    }

    .card .valor{

    font-size:52px;

    font-weight:bold;

    color:var(--texto);

    margin-bottom:18px;


    }

    .top10 th,

    .top10 td,

    thead th,

    tbody td{

        padding:12px 10px;

        font-size:13px;
        
        text-align:center;

    }

}

/* ==========================================================
   PWA
========================================================== */

@media (display-mode:standalone){

    body{

        padding-top:env(safe-area-inset-top);

        padding-bottom:env(safe-area-inset-bottom);

    }

}

/* ==========================================================
   IMPRESSÃO
========================================================== */

@media print{

    body{

        background:#FFF;

    }

    header{

        box-shadow:none;

        border:1px solid #CCC;

    }

    .btn,

    .actions-bar,

    .toast,

    .modal{

        display:none !important;

    }

    .dashboard{

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

    }

    .card{

        box-shadow:none;

        border:1px solid #DDD;

    }

    .table-container{

        box-shadow:none;

    }

}




/* ==========================================================
   UTILITÁRIOS
========================================================== */

.w-100{

    width:100%;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

.gap-5{

    gap:5px;

}

.gap-10{

    gap:10px;

}

.gap-15{

    gap:15px;

}

.gap-20{

    gap:20px;

}

.hidden{

    display:none !important;

}

.visible{

    display:block;

}

/* ==========================================================
   ESTADOS
========================================================== */

.disabled,

button:disabled,

input:disabled,

textarea:disabled,

select:disabled{

    opacity:.60;

    cursor:not-allowed;

}

.loading{

    pointer-events:none;

    user-select:none;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#ECF0F1;

}

::-webkit-scrollbar-thumb{

    background:#BDC3C7;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#95A5A6;

}

/* Firefox */

*{

    scrollbar-width:thin;

    scrollbar-color:#BDC3C7 #ECF0F1;

}

/* ==========================================================
   SELEÇÃO DE TEXTO
========================================================== */

::selection{

    background:rgba(93,187,47,.25);

    color:#2C3E50;

}

/* ==========================================================
   FOCUS PADRÃO
========================================================== */

button:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible,

a:focus-visible{

    outline:3px solid rgba(93,187,47,.25);

    outline-offset:2px;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:var(--verde);

    text-decoration:none;

    transition:.20s;

}

a:hover{

    color:var(--verde-hover);

}

/* ==========================================================
   IMAGENS
========================================================== */

img{

    max-width:100%;

    display:block;

}

/* ==========================================================
   TRANSIÇÕES GLOBAIS
========================================================== */

button,

input,

textarea,

select,

.card,

.panel,

#pagina-retirados .panel{

    background:#F7FCF5;

}

.modal-content{

    transition:

        background .20s ease,

        border-color .20s ease,

        color .20s ease,

        box-shadow .20s ease,

        transform .20s ease,

        opacity .20s ease;

}

/* ==========================================================
   CLASSES DE APOIO
========================================================== */

.success{

    color:var(--verde);

}

.info{

    color:var(--azul);

}

.warning{

    color:#D68910;

}

.danger{

    color:var(--vermelho);

}

.bg-success{

    background:var(--verde);

    color:#FFF;

}

.bg-info{

    background:var(--azul);

    color:#FFF;

}

.bg-warning{

    background:var(--amarelo);

    color:#2C3E50;

}

.bg-danger{

    background:var(--vermelho);

    color:#FFF;

}

/* ==========================================================
   RODAPÉ
========================================================== */

footer{

    margin-top:30px;

    padding:18px;

    text-align:center;

    color:#95A5A6;

    font-size:13px;

}

/* ==========================================================
   FIM DO ARQUIVO
========================================================== */




/* ==========================================================
   COMPATIBILIDADE RELEASE 2.1
========================================================== */

.linha{

    display:flex;

    gap:18px;

    margin-bottom:18px;

}

.campo{

    flex:1;

    display:flex;

    flex-direction:column;

}

.campo label{

    font-size:13px;

    font-weight:700;

    color:#34495E;

    margin-bottom:6px;

}

.campo input,

.campo textarea{

    width:100%;

    padding:7px 9px;

    border:1px solid var(--borda);

    border-radius:10px;

    font-size:14px;

    outline:none;

}

.campo input:focus,

.campo textarea:focus{

    border-color:var(--verde);

    box-shadow:0 0 0 3px rgba(93,187,47,.18);

}







/* ==========================================================
   LAYOUT
========================================================== */

.layout{

    display:flex;

    min-height:100vh;

    background:#F5F7FA;

}

.sidebar{

    width:220px;

    background:#2E7D32;

    color:#FFF;

    display:flex;

    flex-direction:column;

    flex-shrink:0;

    box-shadow:3px 0 12px rgba(0,0,0,.15);

    position:fixed;

    top:0;

    left:0;

    height:100vh;

    overflow-y:auto;

    z-index:1000;

}

.sidebar-header{

    width:100%;

    padding:24px 16px 20px;

    border-bottom:1px solid rgba(255,255,255,.15);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.sidebar-logo{

    width:90px;

    height:90px;

    object-fit:contain;

    display:block;

    margin:0 auto 12px;

}

.sidebar-header h2{

    width:100%;

    color:#FFF;

    font-size:18px;

    line-height:1.25;

    font-weight:700;

    text-align:center;

    margin:0;

}

.sidebar-criador{

    width:100%;

    color:rgba(255,255,255,.82);

    font-size:11px;

    line-height:1.4;

    text-align:center;

    margin:8px 0 0;

    font-style:italic;

}

.sidebar-menu{

    display:flex;

    flex-direction:column;

    padding:18px;

    gap:8px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#FFF;

    text-decoration:none;

    padding:10px 14px;

    border-radius:10px;

    transition:.2s;

    font-weight:600;

}

.sidebar-menu a:hover{

    background:#43A047;

}

.sidebar-menu a.ativo{

    background:#66BB6A;

}

.main-content{
    
    margin-left: 220px;

    flex:1;

    overflow:auto;

    background:#A5D6A7;

    padding:14px;

}



.card-total-conteudo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin:20px 0;

}

.total-info{

    flex:1;

}

.total-grafico{

    width:220px;

    height:220px;

}

.total-grafico canvas{

    width:100%!important;

    height:100%!important;

}



/* ==========================================================
   MODAL PEDIDO - LAYOUT COMPACTO
========================================================== */

#modalPedido .modal-content{

    width:min(920px, 94vw);

    max-height:90vh;

    overflow-y:auto;

    padding:0;

    border-radius:16px;

}

#modalPedido .modal-body{

    padding:20px 22px;

}

#modalPedido .form-grid{

    display:grid;

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

    gap:14px 18px;

    align-items:end;

}

#modalPedido .form-group{

    margin:0;

}

#modalPedido .form-group label{

    display:block;

    margin-bottom:6px;

    font-size:12px;

    font-weight:700;

    color:#34495E;

}

#modalPedido input,
#modalPedido select,
#modalPedido textarea{

    width:100%;

    min-height:40px;

    padding:8px 12px;

    font-size:13px;

    border-radius:9px;

}

#modalPedido textarea{

    min-height:85px;

    resize:vertical;

}

/* CAMPOS QUE DEVEM OCUPAR A LINHA TODA */

#modalPedido .campo-largo{

    grid-column:1 / -1;

}

/* ENDEREÇOS EM BLOCO VISUAL */

#modalPedido .grupo-enderecos{

    grid-column:1 / -1;

    display:grid;

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

    gap:14px;

    padding:14px;

    background:#F7FAF7;

    border:1px solid #DDE8DD;

    border-radius:12px;

}

/* RESPONSÁVEL E OBSERVAÇÃO */

#modalPedido #armazenadoPor{

    min-height:40px;

}

#modalPedido .modal-footer{

    padding:14px 22px;

    position:sticky;

    bottom:0;

    background:#FFFFFF;

    border-top:1px solid #E6ECE6;

}

#modalPedido #btnSalvarPedido{

    width:100%;

    min-height:40px;

    font-size:13px;

    font-weight:700;

}

/* TELAS MENORES */

@media (max-width:768px){

    #modalPedido .modal-content{

        width:96vw;

        max-height:94vh;

    }

    #modalPedido .form-grid{

        grid-template-columns:1fr;

    }

    #modalPedido .grupo-enderecos{

        grid-template-columns:1fr;

    }

}



/* ==========================================================
   BLOCO DE ENDEREÇOS DO PEDIDO
========================================================== */

#modalPedido .grupo-enderecos{

    grid-column:1 / -1;

    display:grid;

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

    gap:12px;

    padding:14px;

    background:#F7FAF7;

    border:1px solid #DCE8DC;

    border-radius:12px;

    position:relative;

    margin-top:4px;

}

#modalPedido .grupo-enderecos-titulo{

    grid-column:1 / -1;

    font-size:12px;

    font-weight:700;

    color:#2E7D32;

    margin-bottom:2px;

}

#modalPedido .grupo-enderecos .endereco-item{

    margin:0;

    padding:0;

}

#modalPedido .grupo-enderecos .endereco-item label{

    display:block;

    margin-bottom:5px;

    font-size:11px;

    font-weight:700;

    color:#34495E;

}

#modalPedido .grupo-enderecos select{

    width:100%;

    min-height:38px;

    font-size:12px;

    border-radius:8px;

}

@media (max-width:768px){

    #modalPedido .grupo-enderecos{

        grid-template-columns:1fr;

    }
    
    
    .sidebar-menu a[data-page="pagina-movimentacoes"]{

    white-space:nowrap;

    font-size:13px;

}

}


/* ==========================================================
   PADRONIZAÇÃO DAS FONTES DO MENU LATERAL
   ========================================================== */

.sidebar-menu a {
    font-size: 13px !important;
    white-space: nowrap;
}

.sidebar-menu a span {
    font-size: 13px !important;
    
    
    
/* ==========================================================
   PÁGINA PROCESSOS
========================================================== */

.processos-page{
    width:100%;
    color:#2C3E50;
}

.processos-header{
    background:#2E7D32;
    color:#FFF;
    border-radius:14px;
    padding:20px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
    box-shadow:0 5px 18px rgba(0,0,0,.10);
}

.processos-header h2{
    margin:0;
    color:#FFF;
    font-size:20px;
}

.processos-header p{
    margin:5px 0 0;
    color:rgba(255,255,255,.85);
    font-size:12px;
}

.processos-download{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:#5DBB2F;
    color:#FFF !important;
    text-decoration:none;
    padding:10px 16px;
    border-radius:9px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    transition:.2s;
}

.processos-download:hover{
    background:#4DA625;
    transform:translateY(-1px);
}

.processos-alerta{
    background:#FFF7D6;
    border-left:5px solid #F1C40F;
    border-radius:10px;
    padding:15px 18px;
    margin-bottom:18px;
}

.processos-alerta strong{
    color:#B9770E;
    font-size:13px;
}

.processos-alerta p{
    margin:5px 0 0;
    font-size:12px;
    line-height:1.5;
}

.processos-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}

.processo-card{
    background:#FFF;
    border-radius:12px;
    padding:17px;
    box-shadow:0 4px 14px rgba(0,0,0,.07);
    border-left:5px solid #2E7D32;
}

.processo-card h3{
    margin:0 0 8px;
    font-size:14px;
}

.processo-card p,
.processo-card li{
    font-size:12px;
    line-height:1.5;
}

.processo-card ul{
    margin:0;
    padding-left:18px;
}

.processo-verde{
    border-left-color:#5DBB2F;
}

.processo-azul{
    border-left-color:#3498DB;
}

.processo-amarelo{
    border-left-color:#F1C40F;
}

.processo-bloco{
    background:#FFF;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:18px;
    box-shadow:0 4px 16px rgba(0,0,0,.07);
}

.processo-bloco-titulo{
    background:#2E7D32;
    color:#FFF;
    padding:13px 18px;
    font-size:14px;
    font-weight:700;
}

.processo-etapas{
    padding:16px;
    display:grid;
    gap:11px;
}

.processo-etapa{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:#F8FBF8;
    border:1px solid #E4ECE4;
    border-radius:10px;
    padding:13px;
}

.processo-numero{
    min-width:34px;
    height:34px;
    border-radius:50%;
    background:#5DBB2F;
    color:#FFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:13px;
}

.processo-etapa h4{
    margin:1px 0 5px;
    color:#2E7D32;
    font-size:13px;
}

.processo-etapa p,
.processo-etapa li{
    margin:0;
    font-size:12px;
    line-height:1.5;
}

.processo-etapa ul{
    margin:5px 0 0;
    padding-left:18px;
}

.processo-etapa-alerta{
    background:#FFF3F3;
    border-color:#F5C6CB;
}

.processo-etapa-alerta .processo-numero{
    background:#E74C3C;
}

.processo-etapa-alerta h4{
    color:#E74C3C;
}

.processo-conteudo-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    padding:18px;
}

.processo-conteudo-grid h4{
    margin:0 0 8px;
    color:#2E7D32;
    font-size:13px;
}

.processo-conteudo-grid ul{
    margin:0;
    padding-left:18px;
}

.processo-conteudo-grid li,
.processo-conteudo-grid p{
    font-size:12px;
    line-height:1.55;
}

.processo-atencao{
    background:#FFF3CD;
    border:1px solid #FFE69C;
    border-radius:10px;
    padding:14px;
}

.processo-atencao strong{
    color:#B9770E;
}

.processo-glossario{
    padding:16px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.processo-glossario div{
    background:#F8FBF8;
    border:1px solid #E4ECE4;
    border-radius:9px;
    padding:11px 13px;
}

.processo-glossario strong{
    display:block;
    color:#2E7D32;
    font-size:12px;
    margin-bottom:3px;
}

.processo-glossario span{
    font-size:11px;
    color:#5D6D7E;
}

.processos-footer-download{
    display:flex;
    justify-content:center;
    padding:5px 0 25px;
}

@media (max-width:900px){

    .processos-grid,
    .processo-conteudo-grid,
    .processo-glossario{
        grid-template-columns:1fr;
    }

    .processos-header{
        flex-direction:column;
        align-items:flex-start;
    }

}