/*======================================
EUREKA - TELA DA ROTA
======================================*/

.telaRota{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    animation:fade .35s ease;

}

.tituloSistema{

    font-size:64px;

    color:#2f61ff;

    margin-bottom:5px;

}

.subtituloSistema{

    color:#5f6c86;

    font-size:20px;

    margin-bottom:25px;

}

.linha{

    width:90%;

    height:2px;

    background:#edf1f7;

    margin:20px 0;

}

.bemVindo{

    font-size:42px;

    color:#1d2b45;

}

.avatar{

    width:95px;

    height:95px;

    border-radius:50%;

    background:#2f61ff;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:48px;

    margin-top:20px;

    margin-bottom:20px;

    box-shadow:0 8px 20px rgba(47,97,255,.25);

}

.nomeMotorista{

    width:100%;

    text-align:center;

    font-size:34px;

    font-weight:bold;

    color:#2f61ff;

    letter-spacing:2px;

    margin-bottom:10px;

}

.tituloRota{

    margin-bottom:25px;

    font-size:40px;

    color:#1d2b45;

}

.campoRota{

    width:90%;

    height:65px;

    border:2px solid #dfe7f3;

    border-radius:15px;

    font-size:30px;

    text-align:center;

    outline:none;

    transition:.25s;

}

.campoRota:focus{

    border-color:#2f61ff;

}

.btnPrincipal{

    width:100%;

    height:58px;

    margin-top:24px;

    border:none;

    border-radius:12px;

    background:#2f61ff;

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.btnPrincipal:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(47,97,255,.30);

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

    }

    /* ======================================
   FLASH VERDE DE CONFIRMAÇÃO
====================================== */

#flash-ok{
    position: fixed;
    inset: 0;
    background: #04cc30;
    opacity: 0;
    pointer-events: none;
    z-index: 999999;
}

#flash-ok.ativo{
    animation: flashSucesso 500ms ease-out;
}

@keyframes flashSucesso{

    0%{
        opacity:0;
    }

    25%{
        opacity:.80;
    }

    100%{
        opacity:0;
    }

}  

 

    #flash-erro{
    position: fixed;
    inset: 0;
    background: #ff1f1f;
    opacity: 0;
    pointer-events: none;
    z-index: 999999;
}

#flash-erro.ativo{
    animation: flashErro 450ms ease-out;
}

@keyframes flashErro{

    0%{
        opacity:0;
    }

    20%{
        opacity:.9;
    }

    100%{
        opacity:0;
    }

}

/* ======================================
   FEEDBACK CENTRAL
====================================== */

#feedback{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:220px;

    font-weight:bold;

    opacity:0;

    transform:scale(.3);

    pointer-events:none;

    z-index:1000001;

}

#feedback.sucesso{

    color:#00ff66;

    text-shadow:0 0 35px rgba(0,255,102,.8);

}

#feedback.erro{

    color:#ff3030;

    text-shadow:0 0 35px rgba(255,48,48,.8);

}

#feedback.ativo{

    animation:feedbackAnim .45s ease-out;

}

@keyframes feedbackAnim{

    0%{

        opacity:0;

        transform:scale(.2);

    }

    25%{

        opacity:1;

        transform:scale(1.2);

    }

    80%{

        opacity:1;

        transform:scale(1);

    }

    100%{

        opacity:0;

        transform:scale(.7);

    }

}

/*======================================
LOGIN - NOVO VISUAL
======================================*/

.telaLogin{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding:80px 30px 30px;

    box-sizing:border-box;

    background:#f5f7fb;

}

.loginCabecalho{

    text-align:center;

    margin-bottom:15px;

}

.logoSistema{

    margin:0;

    font-size:44px;

    font-weight:800;

    color:#2f61ff;

    letter-spacing:2px;

}

.subtituloLogin{

    margin-top:10px;

    color:#667085;

    font-size:18px;

    line-height:26px;

}

.cardLogin{

    width:100%;

    max-width:360px;

    background:#fff;

    border-radius:22px;

    padding:28px;

    box-sizing:border-box;

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

}

.labelLogin{

    display:block;

    margin-bottom:10px;

    font-size:18px;

    font-weight:600;

    color:#344054;

}


.campo{

    width:100%;

    height:52px;

    border:1px solid #d9dee7;

    border-radius:12px;

    padding:0 16px;

    box-sizing:border-box;

    font-size:18px;

    outline:none;

    transition:.25s;

}

.campo:focus{

    border-color:#2f61ff;

    box-shadow:0 0 0 4px rgba(47,97,255,.15);

}



.badgeFilial{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:18px;
    margin-bottom:30px;

}

.badgeFilial span{

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

    padding:10px 22px;

    border-radius:999px;

    background:#eef3ff;

    color:#2f61ff;

    font-size:18px;

    font-weight:800;

    border:1px solid #d8e3ff;

    box-shadow:0 8px 20px rgba(47,97,255,.08);

}


.motoristaInfo{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

    font-size:22px;

    font-weight:700;

    color:#2f61ff;

}

/* ===========================
   TELA DE BIPAGEM
=========================== */

.telaBipagem{

    min-height:100vh;

    background:#f5f7fb;

    padding:30px 20px 40px;

    box-sizing:border-box;

}

.cardLogin{

    max-width:430px;

    margin:0 auto;

}

.motoristaInfo{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

    color:#344054;

    margin-top:10px;

}

.rotaInfo{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:8px;

    margin-bottom:25px;

    font-size:20px;

    font-weight:700;

    color:#2f61ff;

}

.scannerTitulo{

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#344054;

    margin-bottom:15px;

}

/* ===========================
   CAMERA
=========================== */

.cameraArea{

    width:100%;

    min-height:240px;

    border:2px dashed #d0d5dd;

    border-radius:18px;

    background:#fafafa;

    display:block;

    overflow:hidden;

    margin-bottom:20px;

    transition:.25s;

    position:relative;

}

.cameraArea:not(.ativa):not(:has(video)){

    min-height:0;

    height:0;

    padding:0;

    margin:0;

    border:none;

    overflow:hidden;

}

/* quando a câmera abrir */

.cameraArea.ativa,
.cameraArea:has(video){

    min-height:280px;

    height:auto;

    margin-bottom:20px;

    border:2px solid #2f61ff;

    background:#000;

}

.cameraArea video{

    width:100% !important;

    max-width:100%;

    height:auto !important;

    object-fit:cover;

    display:block;

}

.cameraArea #reader__scan_region{

    min-height:260px;

}

.cameraArea #reader__scan_region video{

    border-radius:12px;

}

@media (max-width:768px){

    .cameraArea.ativa,
    .cameraArea:has(video){

        min-height:min(72vw, 420px);

    }

    .cameraArea #reader__scan_region{

        min-height:min(68vw, 380px);

    }

    .telaBipagem{

        padding:20px 12px 32px;

    }

    .telaBipagem .cardLogin{

        max-width:100%;

    }

}

/* ===========================
   ÁREA DE LEITURA (SCANNER)
=========================== */

.cameraArea #reader__scan_region{
    position:relative;
}

.cameraArea #qr-shaded-region > div{
    display:none;
}

.eurekaScanOverlay{
    position:absolute;
    z-index:5;
    pointer-events:none;
    box-sizing:border-box;
}

.eurekaScanFrame{
    position:absolute;
    inset:0;
    background:transparent;
    border:none;
    pointer-events:auto;
    touch-action:none;
    cursor:move;
}

.eurekaScanCanto{
    position:absolute;
    width:44px;
    height:44px;
    pointer-events:auto;
    touch-action:none;
    z-index:2;
}

.eurekaScanCanto::before{
    content:"";
    position:absolute;
    width:26px;
    height:26px;
    border-color:#ffb020;
    border-style:solid;
    border-width:0;
    box-shadow:0 0 4px rgba(0,0,0,0.55);
    pointer-events:none;
}

.eurekaScanCanto-nw{
    top:-10px;
    left:-10px;
    cursor:nwse-resize;
}

.eurekaScanCanto-nw::before{
    top:10px;
    left:10px;
    border-top-width:4px;
    border-left-width:4px;
}

.eurekaScanCanto-ne{
    top:-10px;
    right:-10px;
    cursor:nesw-resize;
}

.eurekaScanCanto-ne::before{
    top:10px;
    right:10px;
    border-top-width:4px;
    border-right-width:4px;
}

.eurekaScanCanto-sw{
    bottom:-10px;
    left:-10px;
    cursor:nesw-resize;
}

.eurekaScanCanto-sw::before{
    bottom:10px;
    left:10px;
    border-bottom-width:4px;
    border-left-width:4px;
}

.eurekaScanCanto-se{
    bottom:-10px;
    right:-10px;
    cursor:nwse-resize;
}

.eurekaScanCanto-se::before{
    bottom:10px;
    right:10px;
    border-bottom-width:4px;
    border-right-width:4px;
}

body.eurekaScanInteragindo,
body.eurekaScanInteragindo .cameraArea,
body.eurekaScanInteragindo .telaBipagem{
    touch-action:none;
    overscroll-behavior:none;
    user-select:none;
    -webkit-user-select:none;
}

@media (max-width:768px){

    .eurekaScanCanto{
        width:52px;
        height:52px;
    }

    .eurekaScanCanto::before{
        width:30px;
        height:30px;
        border-width:0;
    }

    .eurekaScanCanto-nw::before{
        border-top-width:5px;
        border-left-width:5px;
    }

    .eurekaScanCanto-ne::before{
        border-top-width:5px;
        border-right-width:5px;
    }

    .eurekaScanCanto-sw::before{
        border-bottom-width:5px;
        border-left-width:5px;
    }

    .eurekaScanCanto-se::before{
        border-bottom-width:5px;
        border-right-width:5px;
    }

}

/* ===========================
   INPUT
=========================== */

.campo{

    margin-top:10px;

}

/* ===========================
   CONTADOR
=========================== */

.painelContador{

    margin-top:25px;

    margin-bottom:25px;

    background:#eef3ff;

    border-radius:18px;

    padding:18px;

    text-align:center;

}

.painelContador span{

    display:block;

    color:#667085;

    font-size:16px;

}

.painelContador strong{

    display:block;

    margin-top:8px;

    font-size:44px;

    font-weight:800;

    color:#2f61ff;

}

/* ===========================
   ÚLTIMOS IDS
=========================== */

.lista{

    background:#fafafa;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:18px;

    margin-top:20px;

    margin-bottom:25px;

}

.lista h3{

    margin:0 0 15px;

    text-align:center;

    color:#344054;

}

.itemId{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 0;

    border-bottom:1px solid #ececec;

    font-size:16px;

}

.itemId:last-child{

    border-bottom:none;

}

.check{

    font-size:18px;

}

.telaResultado{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:600px;

    animation:fade .35s;

}

.telaResultado .icone{

    font-size:90px;

    margin-bottom:20px;

}

.telaResultado h1{

    font-size:48px;

    margin-bottom:15px;

}

.telaResultado p{

    font-size:22px;

    max-width:420px;

}

.telaResultado.sucesso{

    color:#22c55e;

}

.telaResultado.erro{

    color:#ef4444;

}

.cards-dispatcher{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin:20px 0;
}

.card-dispatcher{

    flex:1;
    min-width:180px;

    background:#ffffff;

    border-radius:12px;

    padding:18px;

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

    border-left:6px solid #2f61ff;

    transition:.25s;

}

.card-dispatcher:hover{

    transform:translateY(-2px);

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

}

.card-dispatcher .titulo{

    font-size:14px;

    color:#666;

}

.card-dispatcher .valor{

    margin-top:8px;

    font-size:32px;

    font-weight:bold;

    color:#2f61ff;

}

.cabecalho-dispatcher{

    background:linear-gradient(135deg,#2f61ff,#1845d8);

    color:#fff;

    padding:22px;

    border-radius:14px;

    margin-bottom:20px;

    box-shadow:0 8px 20px rgba(47,97,255,.25);

}

.cabecalho-dispatcher h2{

    margin:0;

    font-size:32px;

}

.cabecalho-dispatcher p{

    margin-top:6px;

    opacity:.9;

    font-size:15px;

}

.filtros-dispatcher{

    display:flex;

    gap:12px;

    align-items:center;

    flex-wrap:wrap;

    background:#fff;

    padding:15px;

    border-radius:12px;

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

    margin-bottom:20px;

}

/*==========================
TABELA DISPATCHER
==========================*/

.th-dispatcher{

    position:sticky;

    top:0;

    background:linear-gradient(180deg,#2957f2,#1e3a8a);

    color:#fff;

    padding:14px;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:.5px;

    z-index:10;

}


#tblConferencias tr{

    transition:.20s;

}

#tblConferencias td{

    padding:16px 12px;

    vertical-align:middle;

}

#tblConferencias button{

    border:none;

    border-radius:8px;

    padding:7px 10px;

    cursor:pointer;

    background:#f4f6fb;

    transition:.2s;

    font-size:13px;

}

#tblConferencias button:hover{

    background:#2f61ff;

    color:#fff;

}

.badge-status{

    display:inline-block;

    padding:6px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;

}

.badge-status.finalizada{

    background:#dcfce7;

    color:#166534;

}

.badge-status.conferindo{

    background:#dbeafe;

    color:#1d4ed8;

}

.badge-status.cancelada{

    background:#fee2e2;

    color:#991b1b;

}

.badge-status.divergência{

    background:#fef3c7;

    color:#92400e;

}

/*==========================
BOTÕES DO DISPATCHER
==========================*/

.acoes-dispatcher{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    flex-wrap:wrap;

}

.btn-dispatcher{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:8px;

    background:#f5f7fb;

    cursor:pointer;

    transition:.2s;

    font-size:16px;

}

.btn-dispatcher:hover{

    transform:translateY(-2px);

    background:#2f61ff;

    color:white;

}

.titulo-dispatcher{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.status-sistema{

    text-align:right;

    font-size:15px;

    color:white;

}

.online-dot{

    width:12px;

    height:12px;

    display:inline-block;

    border-radius:50%;

    background:#22c55e;

    margin-right:8px;

    animation:pulse 1.6s infinite;

}

@keyframes pulse{

    0%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.4;
        transform:scale(1.4);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

.painel-detalhes{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    height:100vh;

    background:#fff;

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

    transition:.35s;

    z-index:9999;

    overflow:auto;

}

.painel-detalhes.ativo{

    right:0;

}

/*==============================
EFEITO ZEBRADO
==============================*/

#tblConferencias tbody tr:nth-child(odd){

    background:#ffffff;

}

#tblConferencias tbody tr:nth-child(even){

    background:#fbfcff;

}


.linha-dispatcher{

    transition:.20s;

    cursor:pointer;

}

.linha-dispatcher:hover{

    background:#eef4ff !important;

}

.linha-dispatcher.selecionada{

    background:#e8f2ff !important;

    box-shadow:

        inset 6px 0 #2f61ff,

        0 6px 18px rgba(47,97,255,.12);

}

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

.painel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    border-bottom:1px solid #eee;

}

.painel-titulo{

    font-size:22px;

    font-weight:bold;

    color:#1f3fa8;

}

.btn-fechar{

    border:none;

    background:none;

    font-size:22px;

    cursor:pointer;

}

.painel-card{

    margin:18px;

    padding:18px;

    background:#fff;

    border-radius:12px;

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

}

.card-titulo{

    color:#666;

    font-size:14px;

    margin-bottom:10px;

}

.card-valor{

    font-size:22px;

    font-weight:bold;

}

.linha-info{

    display:flex;

    justify-content:space-between;

    padding:6px 0;

}

.status-painel{

    display:inline-block;

    padding:8px 14px;

    border-radius:20px;

    background:#e8f5e9;

    color:#2e7d32;

    font-weight:bold;

}

.btn-auditoria{

    width:calc(100% - 36px);

    margin:18px;

    padding:16px;

    border:none;

    border-radius:10px;

    background:#2f61ff;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

.btn-auditoria:hover{

    background:#204ed6;

}