*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: EncodeSans, sans-serif;
    tap-highlight-color: rgba(0,0,0,0); 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    user-select: none;
    --background-color: #F2F2F2;
}
html{
    aspect-ratio: 16/9;
}

.button-hidden{
    position: fixed;
    z-index: 2 !important;
}

img{
    width: 100%;
}
section#pago-exitoso img, section#qr img, section#pagar-qr img, section#comprobante img, section#detalle-movimiento img{
    position: fixed;
}
section#inicio img#middle{
    position: relative;
}
.pagar-qr-inputs{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 4;
}

body{
    background-color: #F2F2F2;
    --c-text: #4e4e4e;
    --c-principal: #279D2E ;
    -youbkit-touch-callout: none;
    -youbkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hidden{
    display: none !important;
}

img.buttonQR{
    width: 40%;
    position: fixed;
    bottom: 10%;
    right: 10%;
    z-index: 100;
}

#video-container {
    height: 41%;
    width: 80%; /* Establece el ancho al 80% del contenedor */
    position: absolute; /* Cambia a relativo para ajustar el video dentro */
    top: 34%;
    left: 10%;
    overflow: hidden; /* Oculta cualquier parte del video que sobresalga del contenedor */
    border-radius: 10px;
    z-index: 3;
}

    video {
        width: 140%;
        object-fit: cover;
    }

/* LISTA DE PRECIOS */      /* LISTA DE PRECIOS */      /* LISTA DE PRECIOS */      
section#lista-de-movimientos{
    position: absolute;
    top: 92vh;
    width: 100%;
}
div.fecha-precio {
    margin: 1.8vh 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}
p{
    color: var(--c-text);
}
p.fecha{
    font-size: 4vw;
    font-family: EncodeSans;
}
p.precio{
    font-size: 4.6vw;
    font-family: EncodeSans-SemiBold;
}
p.metodo{
    font-size: 4vw;
    font-family: EncodeSans-Medium;
}
div.price p {
    display: contents;
}
div.time-comercio{
    font-size: 4vw;

}
p.time{
    font-size: 3.8vw;
    color: var(--c-text);
    opacity: .8;
}
p.comercio-title{
    font-size: 4vw;
    width: 43vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.time-comercio p {
    margin-bottom: 8px;
}

/*PAGAR QR */   /*PAGAR QR */   /*PAGAR QR */   /*PAGAR QR */   /*PAGAR QR */   
    p#nombre-local{
        position: absolute;
        padding-left: 4vw !important;
        color: var(--c-principal) !important;
        font-family: EncodeSans-Bold;
        font-size: 5vw !important;
        top: 20vh;
        left: 6vw;
    }
    input#monto{
        position: absolute;
        width: 100vw;
        height: 8vh;
        top: 33vh;
        right: 0vw;
        background-color: #ffffff00;
        border: none;
        font-size: 6vw;
        text-align: center;
    }
    input#monto:focus-visible{
        outline: none;
    }
    button.avanzar{
        position: absolute;
        background-color: #ffffff00;
        border: none;
        width: 50vw;
        height: 10vh;
        bottom: 0vh;
        right: 0vw;
    }


/*PAGO EXITOSO */   /*PAGO EXITOSO */   /*PAGO EXITOSO */   /*PAGO EXITOSO */   
    .pago-exitoso-item {
        position: fixed;
        top: 0;
        margin-top: 26.5vh;
        margin-left: 6vw;
    }
    .pago-exitoso-item p {
        padding-bottom: 11vh;
        color: var(--c-text);
    }
    .pagoexitoso-comercio{
        padding-left: 4vw !important;
        color: var(--c-principal) !important;
        font-family: EncodeSans-Bold;
        font-size: 5vw !important;
    }
    .pagoexitoso-importe{
        padding-bottom: 8vh !important;
        font-size: 6.5vw;

    }
    .pagoexitoso-id{
        font-size: 4.2vw;
    }

/*COMPROBANTE */   /*COMPROBANTE */   /*COMPROBANTE */   /*COMPROBANTE */   

    p.comprobante-comercio{
        padding-bottom: 10vh !important;
    }
    p.comprobante-importe{
        padding-bottom: 8vh !important;
    }
    p.comprobante-importe, span.price{
        font-family: EncodeSans-Medium !important;
    }
    p.comprobante-fecha{
        padding-bottom: 8vh !important;
    }
    p.comprobante-identificacion-pago{
        padding-bottom: 8vh !important;
    }

/*FONT */   /*FONT */   /*FONT */   /*FONT */   /*FONT */   /*FONT */
.bold{
    font-family: EncodeSans-SemiBold;
    color: var(--c-text);
}

@font-face {
    font-family: EncodeSans;
    src: url(public/font/EncodeSans-Regular.ttf);
}
@font-face {
    font-family: EncodeSans-Light;
    src: url(public/font/EncodeSans-Light.ttf);
    font-weight: 300;
}
@font-face {
    font-family: EncodeSans-Medium;
    src: url(public/font/EncodeSans-Medium.ttf);
    font-weight: 500;
}
@font-face {
    font-family: EncodeSans-SemiBold;
    src: url(public/font/EncodeSans-SemiBold.ttf);
    font-weight: 600;
}
@font-face {
    font-family: EncodeSans-Bold;
    src: url(public/font/EncodeSans-Bold.ttf);
    font-weight: 700;
}

.panel-top-fixed{
    width: 100%;
    height: 5.7rem;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    background: linear-gradient(270deg, #26b4bd 0%, #3daa35 100%);
    position: relative;
}
    .panel-top-fixed p{
        text-align: center;
        padding-top: 2rem;
        color: white;
        font-size: 1.6rem;
    }
    .panel-top-fixed svg{
        scale: 0.3;
        left: -13rem;
        position: absolute;
    }
    .panel-2-top{
        
        height: 5.7rem;
        display: flex;
        
    }
    .panel-2-top div{
        width: 50%;
        border-bottom: 2px solid rgb(155, 155, 155);
        height: 100%;
        color: gray;
        font-size: 1.35rem;
    }
    .panel-2-top div.active-panel{
        border-bottom: 3px solid #3daa35;
        color: #3daa35;
    }
    .panel-2-top div p{
        text-align: center;
        padding-top: 2rem;
        font-family: EncodeSans-Medium;
        
    }
    .panel-center{
        
        opacity: 1;
    }
    .panel-center p{
        text-align: center;
        font-size: 1.6rem;
        font-family: EncodeSans-Semibold;
        padding-top: 4rem;
        color: rgb(82, 82, 82);
    }