/* ========================================
   CONSULTA DE PROTOCOLO
======================================== */


/* ========================================
   ÁREA PRINCIPAL
======================================== */

.pagina-consulta{

    padding:0px 0;

}


/* ========================================
   CAIXA DE CONSULTA
======================================== */

.consulta-box{

    width:100%;

    max-width:850px;

    margin:40px auto 0;

    padding:35px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.07);

    box-sizing:border-box;

}


/* ========================================
   CAMPOS
======================================== */

.consulta-campos{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}


.campo-formulario{

    min-width:0;

}


.campo-formulario label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#333;

}


/* ========================================
   CAMPO COM ÍCONE
======================================== */

.campo-com-icone{

    position:relative;

    display:flex;

    align-items:center;

}


.campo-com-icone i{

    position:absolute;

    left:16px;

    z-index:2;

    color:#0A4D8F;

    font-size:17px;

    pointer-events:none;

}


.campo-com-icone input{

    width:100%;

    height:54px;

    padding:0 15px 0 48px;

    border:1px solid #D9DDE3;

    border-radius:8px;

    background:#FFFFFF;

    color:#333;

    font-size:16px;

    outline:none;

    box-sizing:border-box;

    transition:.2s;

}


.campo-com-icone input:focus{

    border-color:#0A4D8F;

    box-shadow:
        0 0 0 3px
        rgba(10,77,143,.10);

}


.campo-com-icone input::placeholder{

    color:#9CA3AF;

}


/* ========================================
   TEXTO DE AJUDA
======================================== */

.campo-formulario small{

    display:block;

    margin-top:7px;

    font-size:12px;

    color:#6B7280;

}


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

.consulta-acoes{

    width:100%;

    margin-top:5px;

}


.consulta-acoes .btn{

    width:100%;

    min-height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border:none;

    cursor:pointer;

    box-sizing:border-box;

}


/* ========================================
   MENSAGEM DE ERRO
======================================== */

.erro-consulta{

    display:flex;

    align-items:center;

    gap:15px;

    width:100%;

    max-width:850px;

    margin:30px auto 0;

    padding:16px 18px;

    box-sizing:border-box;

    background:#FDECEC;

    border:1px solid #F5C2C2;

    border-left:5px solid #C0392B;

    border-radius:10px;

    color:#7F1D1D;

}


.erro-consulta > i{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:38px;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#C0392B;

    color:#FFFFFF;

    font-size:18px;

}


.erro-consulta strong{

    display:block;

    margin-bottom:3px;

    font-size:15px;

    color:#991B1B;

}


.erro-consulta p{

    margin:0;

    font-size:14px;

    line-height:1.5;

    color:#7F1D1D;

}


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

@media (max-width:900px){

    .consulta-campos{

        grid-template-columns:1fr 1fr;

        gap:20px;

    }

}


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

@media (max-width:700px){

    .pagina-consulta{

        padding:60px 0;

    }


    .consulta-box{

        margin-top:30px;

        padding:25px 20px;

    }


    .consulta-campos{

        grid-template-columns:1fr;

        gap:20px;

    }


    .campo-com-icone input{

        height:50px;

    }


    .consulta-acoes{

        margin-top:25px;

    }


    .consulta-acoes .btn{

        min-height:50px;

    }


    .erro-consulta{

        align-items:flex-start;

        margin-top:25px;

        padding:14px;

    }


    .erro-consulta > i{

        min-width:34px;

        width:34px;

        height:34px;

        font-size:15px;

    }

}