/*==================================================
SISTEMA CUENTAS DE COBRO
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

.cc-fondo{

    width:100%;
    min-height:100vh;

    background:url('../img/fondo.jpg') center center;
    background-size:cover;
    background-repeat:no-repeat;

}

.cc-overlay{

    width:100%;
    min-height:100vh;

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:40px;

    padding:60px 20px;

}

.upload-box,
.consulta-box{

    width:850px;

    max-width:95%;

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

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.30);

    border-radius:25px;

    padding:40px;

    text-align:center;

    color:#ffffff;

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

    transition:.35s;

}

.upload-box:hover,
.consulta-box:hover{

    transform:translateY(-5px);

}

.upload-box h2,
.consulta-box h2{

    font-size:40px;

    margin-bottom:15px;

}

.upload-box p,
.consulta-box p{

    font-size:18px;

    margin-bottom:25px;

}

/*==================================
DROP ZONE
==================================*/

.drop-zone{

    width:100%;

    min-height:180px;

    border:3px dashed rgba(255,255,255,.70);

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    cursor:pointer;

    transition:.30s;

}

.drop-zone:hover{

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

}

.drop-zone input{

    position:absolute;

    width:100%;
    height:100%;

    opacity:0;

    cursor:pointer;

}

.drop-text{

    font-size:22px;

    font-weight:bold;

}

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

#codigoCuenta{

    width:80%;

    max-width:500px;

    padding:16px;

    border:none;

    border-radius:12px;

    font-size:18px;

    text-align:center;

    outline:none;

    margin-bottom:20px;

}

/*==================================
BOTONES
==================================*/

.upload-box button,
.consulta-box button{

    background:#1565c0;

    color:white;

    border:none;

    padding:16px 45px;

    border-radius:12px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    transition:.30s;

}

.upload-box button:hover,
.consulta-box button:hover{

    background:#0d47a1;

    transform:scale(1.05);

}

/*==================================
POPUP
==================================*/

.popup-exito{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.popup-contenido{

    width:340px;

    background:white;

    border-radius:20px;

    padding:35px;

    text-align:center;

    animation:popup .35s;

}

.check{

    width:80px;

    height:80px;

    background:#2ecc71;

    border-radius:50%;

    margin:auto;

    color:white;

    font-size:45px;

    line-height:80px;

    margin-bottom:20px;

}

.popup-contenido h3{

    color:#2c3e50;

    margin-bottom:10px;

}

.popup-contenido p{

    color:#666;

    line-height:24px;

}

@keyframes popup{

    from{

        transform:scale(.75);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:768px){

.upload-box,
.consulta-box{

    padding:25px;

}

.upload-box h2,
.consulta-box h2{

    font-size:28px;

}

.drop-zone{

    min-height:140px;

}

.drop-text{

    font-size:18px;

}

#codigoCuenta{

    width:100%;

}

}