:root{
    /* --color0: #000000; */
    /* --color0: #4e8f4b; */
    /* --color0: #3a4e48; */
    /* --color0: #495a52; */
    /* --color0: #a1d49c; */
    --color0: #464646;

    --color1: #40BFFF;
    --color2: #53D1B6;
    --color3: #FFC833;
    --color4: #f07c33;
    --color5: #4db04a;
    --separacionx1: 10px;
    --separacionx2: 16px;

    --font-size-x1: 0.8rem;
    --font-size-x2: 0.9rem;
    --font-size-x3: 1rem;
    --font-size-x4: 1.2rem;
    --font-size-x5: 1.4rem;
    --font-size-x6: 2rem;

    --font-color: rgb(65, 61, 61);
    --input-disabled-back: #fff;
    --input-disabled-color: rgb(161, 155, 155);

    --input-normal-border-color: rgb(161, 155, 155);
}

.punto-venta{
    font-size:var(--font-size-x3);
    color: var(--font-color);
    padding-inline:8px;
}




.modal-puntoventa .modal-dialog{
    max-width: 72%;
    min-width: 72%;
} 

/* --------------------------------------------------------------------------- */
/* SETEOS DE TODOS LOS INPUTS DEL PUNTO DE VENTA*/
/* --------------------------------------------------------------------------- */
.punto-venta input , .punto-venta select , .punto-venta textarea{
    border: 1px solid lightgray;
    
    border-radius: 4px;
    margin-block:4px;
    margin-inline:2px;
    outline:none;
    padding-inline:12px;
    padding-block:2px;
}

.punto-venta input:disabled , .punto-venta select:disabled , .punto-venta textarea:disabled{
    background-color:var(--input-disabled-back);
    color:var(--input-disabled-color);
}

.punto-venta input:focus , .punto-venta select:focus , .punto-venta textarea:focus{
    outline:none;
}





.input-money{
    text-align: right;
}

/* --------------------------------------------------------------------------- */
/* SECCION SUPERIOR DE BOTONES DEL INPUT */
/* --------------------------------------------------------------------------- */

.punto-venta-top{
    padding-bottom: 16px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}

.punto-venta-top a{
    text-decoration: none;
    cursor:pointer;
}

.punto-venta-top a:hover{
    background-color:azure;
}

.punto-venta-top a span:first-child{
    color: var(--color1);
    margin-inline-end:6px;
}

.punto-venta-top a span:last-child{
    color: var(--color0);
}

/* --------------------------------------------------------------------------- */
/* SETEOS DE LA 2FILA O SECCION    */
/* --------------------------------------------------------------------------- */
.punto-venta .punto-venta-second{
    display:grid;
    grid-template-columns: 34% 30% 34%;
    grid-gap: var(--separacionx1);
}

.punto-venta .punto-venta-second > div{
    min-height: 100px;
}

.seccion{
    border-radius:7px;
    padding:16px;
    margin-block-end:var(--separacionx1);
}



/* --------------------------------------------------------------------------- */
/* SECCION DATOS CLIENTE */
/* --------------------------------------------------------------------------- */

.punto-venta .punto-venta-second .punto-venta-second__cliente{
    background-color: var(--color2);
}

.punto-venta .puntoventa_row{
    display:flex;
}



.punto-venta .puntoventa_row > div:first-of-type {
    width: 25%;    
    display:flex;  
    align-items: center;
}

.punto-venta .puntoventa_row > div:last-of-type {
    width: 73%;  
    display:flex;  
    align-items: center;
}


.codigo_cliente{
    width:25%;
}

.nombre_cliente{
    width:75%;
}

.direccion_cliente{
    width: 100%;
}

.localidad_cliente{
   width:35%;
}

.texto_tipo_cliente{
    width:25%
}

.tipo_cliente{
    width:40%;
} 


/* --------------------------------------------------------------------------- */
/* SECCION DATOS DE LA OPERACION */
/* --------------------------------------------------------------------------- */

.punto-venta .punto-venta-second .punto-venta-second__operacion{
    background-color: var(--color1);
}


.punto-venta .punto-venta-second .punto-venta-second__operacion select{
    width: 100%;
}


/* --------------------------------------------------------------------------- */
/* SECCION DESCUENTO O RECARGO */
/* --------------------------------------------------------------------------- */
.punto-venta .punto-venta-second .punto-venta-second__descuento{
    background-color: var(--color2); 
}

.puntoventa_recargo_descuento  .form-check-input{
    background-color:var(--color2);
    border-color:var(--color2);
}

.puntoventa_recargo_descuento  .form-check-input:checked[type=checkbox]{
    background-color:var(--color1);
    border-color:var(--color1);
}

.puntoventa_recargo_descuento{
    display:grid;
    grid-template-columns: 45% 45%;
    grid-gap: var(--separacionx2);
}

.puntoventa_recargo_descuento  .titulo{
    background-color: #d5e7e3;
}

.puntoventa_recargo_descuento  .titulo a{
    color: var(--font-color);
    text-decoration-color: var(--font-color);
    font-size: var(--font-size-x2);
}


.puntoventa_recargo_descuento  .pie{
    color:var(--font-color);
    font-size: var(--font-size-x2);
}


.puntoventa_recargo_descuento .img-container{
    background-color: #d5e7e3;
    border-radius: 50%;
    margin-block: 4px;
}

.puntoventa_recargo_descuento img{
    height: 75px;
    width: auto;
    border-radius: 50%;
    padding:8px;
}



/* --------------------------------------------------------------------------- */
/* CARGA DE PRODUCTOS */
/* --------------------------------------------------------------------------- */

/* la tercer fila del pv */
.punto-venta .punto-venta-inputs{
    display:grid;
    grid-template-columns: 55% 45%;
    padding-bottom:0;
}


.codigo_articulo{
    width:100px;
}


.punto-venta-inputs .punto-venta-inputs__carga{
    background-color: var(--color3);
    margin-inline-end: var(--separacionx1);
}

.punto-venta-inputs__carga__row{
    display:grid;
    grid-template-columns: 10% 30% 10% 43%;
    grid-column-gap: var(--separacionx1);
    align-items:center;
}

.punto-venta-inputs .punto-venta-inputs__total{
    background-color: var(--color1);;
}

.punto-venta-inputs .btn-buscar-articulo span{
    position:relative;
    top:4px;
    margin-inline-start: 8px;
    padding:4px;

}

.punto-venta-inputs .btn-buscar-articulo span:hover{
    border-radius: 50%;
    background-color:#fff;
    color: var(--color1);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


/* --------------------------------------------------------------------------- */
/* SECCION DEL TOTAL */
/* --------------------------------------------------------------------------- */
.titulo__total{
    height: 50px;
    background-color: #fff;
    
    
    border-left-width: 4px;
    border-left-color:#209bd9;
    
    border-left-style: solid;

    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

    align-items: center;
    font-size: var(--font-size-x6);
    justify-content: space-between;
    display: flex;
    padding-inline: var(--separacionx1);
    /* color:var(--color2); */
    color:#209bd9;
    font-weight:500;
    /* margin-block-end: var(--separacionx2); */
    margin-block-end: 0;
    
}

p.venta_total{
    font-size:4.5rem;
    color: #fff;
    font-weight: bold;
    text-align: right;
    padding-bottom: 0;
    margin-bottom: 0;
}




/* --------------------------------------------------------------------------- */
/* SECCION LISTA DE PRODUCTOS */
/* --------------------------------------------------------------------------- */

.punto-venta table {
    border-collapse: collapse;
    width: 100%;
}

.punto-venta  th,.punto-venta  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.punto-venta tr:hover {
    background-color: var(--color2);
}

/* .puntoventa .selected {
    background-color: #a6c6e1;
} */

/* Media Query para dispositivos con ancho menor o igual a 678 píxeles */
@media (max-width: 678px) {
    .punto-venta th, .punto-venta td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Otras reglas de estilo para mejorar la presentación en dispositivos pequeños */
    /* Puedes personalizar según tus necesidades */
    .punto-venta table thead {
        display: none; /* Oculta el encabezado en dispositivos pequeños */
    }

    .punto-venta tr {
        margin-bottom: 10px;
        display: block;
    }
}

/* --------------------------------------------------------------------------- */
/* PUNTO DE VENTA - BUSCADOR DE PRODUCTOS */
/* --------------------------------------------------------------------------- */


.buscador-producto__input{
    padding: var(--separacionx1);
    padding-left: 8px;
    background-color: var(--color1);
    color: #fff;
}

.buscador-producto__input input{
    padding: var(--separacionx1);
    font-size: var(--font-size-x3);
    font-weight: 500;
    width: 60%;
    margin-right: var(--separacionx2);
}


.buscador-producto__input button{
    padding-bottom: 0;
    border: none;
    border-radius:4px;
    padding-top: 0;
    padding-right: 8px;
    height: 46px;    

    display: flex;
    flex-direction: row;
    align-items: center;    
}

.buscador-producto__input button > *{
    margin-right: 4px;
}

.buscador-producto table.table-productos{
    width: 100%;
    height:350px;
    overflow-y:scroll !important;
}

.punto-venta .punto-venta-items{
    /* height:150px;
    overflow-y:scroll !important; */
}


.modal-puntoventa-checkout .modal-dialog{
    max-width: 40%;
    min-width: 40%;
} 

.modal-puntoventa-checkout .modal-body > div{
    display:flex; 
    flex-direction:row;
    margin-bottom:var(--separacionx2);
}

.modal-puntoventa-checkout .modal-body > div > div{
    display:grid; 
    grid-template-columns: 120px auto;
    margin-right: var(--separacionx1);
}

.modal-puntoventa-checkout .modal-body > div  a{
    margin-right: var(--separacionx1);
    /* padding: 6px; */
}


.modal-puntoventa-checkout .modal-body > div  a:hover{
    background-color:lightblue;
}

/* .modal-puntoventa-checkout input , .punto-venta select , .punto-venta textarea{
    border: 1px solid lightslategray;
}
 */
.modal-puntoventa-checkout input:focus , .punto-venta select:focus , .punto-venta textarea:focus{
    outline-color: var(--color1);
}


.modal-puntoventa-cheques .modal-dialog{
    max-width: 60%;
    min-width: 60%;
} 


.puntoventa-cargar-tarjeta ,  .puntoventa-cargar-cheque{
    padding: 2rem;
}