/* .contenedor-totales-ventas-pos {
  width: 100%;
  height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
} */



.clave-mask{
-webkit-text-security: disc;
}
.container-grafico-general{

    width:100%;
    height:520px;

    background-color: white!important;

    border-radius:0px;

    padding:25px;

    margin-top:30px;

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

    border:1px solid #edf2f7;

}

.container-grafico-general canvas{

    width:100%!important;
    height:100%!important;

}


.table-analisis .th-left{

    border-radius:5px 100px 0px 5px !important;

}

.table-analisis .th-right{

    border-radius:0px 5px 5px 0px !important;

}


.tituloCierre{
 font-size: 16px;
    font-weight:bold;
     text-align: center;


border-bottom: 1px solid #C2C0C0; 
padding-bottom: 0.1px;
margin-left: 5%;

}


.alerta-certificado{
    background:#ffffff;
    padding:12px;
    border-radius:6px;
    font-weight:bold;
    text-align:center;
    border:2px solid;
}

.parpadeo{
    animation: parpadear 1s infinite;
}




.mesa-card{
  width:100%;
  border:none;
  border-radius:16px;
  padding:15px;
background: linear-gradient(11deg, #bbdefb, #e3f2fd);

    box-shadow:0 6px 15px rgba(0,0,0,.25);
  transition:.25s;
  margin-bottom: 20px!important;
}

.mesa-card:hover{
  transform:scale(1.05);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}

.mesa-numero{
  font-size:40px;
  font-weight:bold;
}

.mesa-salon{
  font-size:14px;
  opacity:.9;
}

.mesa-total{
  margin-top:10px;
  font-size:20px;
  font-weight:bold;
  background:rgba(255,255,255,.2);
  padding:6px;
  border-radius:8px;
}



 .pos-contenedoor{
 /* position: fixed !important;
 */
  position: sticky !important;


  width: 100vw !important;
  height: 100vh !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff;
  left: 0 !important;

 }
 .pos-contenedor-fluido{
  margin: 0;
  padding: 0;
  border-style: none !important;
  outline: 0;
  margin-right: 5px;
  
 }
 .contenedor-productos-ventas{
  width: 100%;
 }
.contenedor-productos-ventas input,
.contenedor-productos-ventas select {
  outline: none !important;
  border-style: none !important;
  border-radius: 8px;
  border: 1px solid #4377C1 !important;
  /* font-size: 1.2em;
  height: 40px; */
}










.productos-pos .productos-pos-venta .btn-mas-menos {
  /* background-color: #3458db; */
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  height: auto;
  min-height: 0;

}
.productos-pos .productos-pos-venta .precio-uni-pos {
  /* background-color: #3458db; */
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100px;
  width: 100%;
}
.productos-pos .productos-pos-venta .formFotoPos {
  background-color: #3458db;
}

.productos-pos {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 90vh;
  padding: 5px;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: flex-start;


}

.productos-pos .productos-pos-venta {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 150px;
  height: 190px;
  margin: 5px;
  border: 1px solid #e7e7e7;
  padding: 0;
  border-radius: 7px;
  overflow: hidden;
  /* Sin seleccion de texto: al hacer clic repetido sobre la tarjeta el
     navegador marcaba los nodos de texto y se veia una raya de seleccion. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* El campo de cantidad si debe poder seleccionarse/editarse. */
.productos-pos .productos-pos-venta input {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Evita el "fantasma" al arrastrar la foto del producto. */
.productos-pos .productos-pos-venta img {
  -webkit-user-drag: none;
  user-drag: none;
}



.pos-col-opciones {
  display: none !important;
}

@media (max-width: 768px) {

  .teclado-container {
    display: none !important;
  }

  .super-contenedor-productos-pos,
  .contenedor-productos-ventas,
  #contenedorPosOp1,
  .row2,
  .productos-pos {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    box-sizing: border-box;
  }

  .pos-col-buscar,
  .pos-col-barras {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .pos-balanza-solo-pc {
    display: none !important;
  }

  .productos-pos {
    justify-content: space-between;
  }

  .productos-pos .productos-pos-venta {
    width: calc(33.333% - 8px) !important;
    height: 165px !important;
    padding: 4px !important;
    margin: 4px 0 !important;
    box-sizing: border-box;
  }

  .productos-pos .productos-pos-venta img{
    width: 100%;
    height: 70%!important;
    border-radius: 4px;
  }

  .productos-pos .productos-pos-venta span{
    font-size: 8px!important; 
  }

 .productos-pos .foto-pos {
    display: none;
  }

  .productos-pos .edit-pos {
    display: none;
  }

  .productos-pos .precio-uni-pos {
    font-size: 0.8em!important;
         margin: 0;
         font-weight: bold!important; 
  padding: 0;
  }

  .productos-pos .descripcion-pos {
    font-size: 0.7em!important;
      margin: 0; 
  padding: 0;
  }


  .productos-pos .mensaje-stock-minimo {
    font-size: 0.6em!important;
  }

 .productos-pos .mensaje-vencimiento{
    font-size: 0.6em!important;
  }



}






.productos-pos .productos-pos-venta img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 120px;
  border-radius: 0;
  object-fit: cover;
  margin: 0;
}
.productos-pos .productos-pos-venta * {
  margin: 2px;
  text-align: center;
}

.productos-pos .productos-pos-venta .precio-unitario {
  
  font-size: 18px;
/*background-image: linear-gradient(105.3deg, rgb(150, 190, 250) 0%, rgb(50, 100, 200) 100%) !important;
color:white;

*/border-radius:  5px;

  font-weight: bold;
 
}
.productos-pos .productos-pos-venta .descripcion-pos {
  text-transform: uppercase;
  font-size: 0.95em;
  font-weight: 600;
  color: #545454;

    line-height: 1.2; /* Ajusta este valor a tu gusto */
  margin: 0; /* Elimina márgenes si hubiera */
  padding: 0 5px; /* Espaciado lateral */
}


.productos-pos .productos-pos-venta .descripcion-pos2 {
  text-transform: uppercase;
  font-size: 0.80em;
  font-weight: 600;
  color: #545454;

    line-height: 1.2; /* Ajusta este valor a tu gusto */
  margin: 0; /* Elimina márgenes si hubiera */
  padding: 0; /
}




.productos-pos .productos-pos-venta input {
  outline: none;
  border-style: none;
  border: 1px solid rgb(67, 94, 214);
  padding: 0px 2px 2px 10px;
  text-align: center;
  font-weight: 700;
  border-radius: 0px !important;
  width: 65px;
  height: 25px;
  margin-left: 0;
  margin-right: 0;
  border-left: 0px;
  border-right: 0px;
}
.productos-pos .productos-pos-venta .fotoPos {
  display: none;
}
.productos-pos .productos-pos-venta span {
  outline: none;
  border-style: none;
  font-size: 1em;
  text-align: center;
  font-weight: 800;
  width: 20px !important;
  cursor: pointer;
  color: #fff;
  margin: 0 !important;
}
.productos-pos .productos-pos-venta .btn-pos-mas {
  background-color: #2b328d;
  border-radius: 0px 20px 20px 0px;
}
.productos-pos .productos-pos-venta .btn-pos-menos {
  background-color: #f65454;
  border-radius: 20px 0px 0px 20px;

}




/*comanda*/

.productos-pos .productos-pos-ventaComanda .btn-mas-menos{
  /* background-color: #3458db; */
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 340px;

}
.productos-pos.productos-pos-ventaComanda .precio-uni-pos {
  /* background-color: #3458db; */
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100px;
  width: 100%;
}
.productos-pos .productos-pos-ventaComanda .formFotoPos{
  background-color: #3458db;
}

.productos-posComanda {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 82220vh;
  padding: 10px;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;


}

.productos-pos .productos-pos-ventaComanda {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  width: 105px;
  height: 125px;
  margin: 1px;
  margin-right: 10px;
  border: 1px solid #e7e7e7;
  padding: 2px;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .productos-pos .productos-pos-ventaComanda {
    width: calc(33.333% - 8px) !important;
    height: 140px !important;
    margin: 4px 0 !important;
    box-sizing: border-box;
  }
}
.productos-pos .productos-pos-ventaComanda img {
  width: 100%; /* La imagen ocupará todo el ancho del contenedor */
  height: 70%; /* Mantiene la proporción original de la imagen */
  border-radius: 10px; /* Opcional, si quieres bordes redondeados */
  object-fit: cover; /* Ajusta la imagen si necesitas cubrir el espacio completo */
}
.productos-pos .productos-pos-ventaComanda * {
  margin: 0px;
  text-align: center;
}

.productos-pos .productos-pos-ventaComanda .precio-unitario {
  
  font-size: 12px;
/*background-image: linear-gradient(105.3deg, rgb(150, 190, 250) 0%, rgb(50, 100, 200) 100%) !important;
color:white;
*/
  border-radius:  10px;

  font-weight: bold;
 
}
.productos-pos .productos-pos-ventaComanda .descripcion-pos{
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 500;
  color: #545454;

  line-height: 1.0; /* Ajusta este valor a tu gusto */
  margin: 0; /* Elimina márgenes si hubiera */
  padding: 0; /
}
.productos-pos .productos-pos-ventaComanda input {
  outline: none;
  border-style: none;
  border: 1px solid rgb(67, 94, 214);
  padding: 0px 2px 2px 10px;
  text-align: center;
  font-weight: 700;
  border-radius: 0px !important;
  width: 65px;
  height: 25px;
  margin-left: 0;
  margin-right: 0;
  border-left: 0px;
  border-right: 0px;
}
.productos-pos .productos-pos-ventaComanda .fotoPos{
  display: none;
}
.productos-pos .productos-pos-ventaComanda  span {
  outline: none;
  border-style: none;
  font-size: 1em;
  text-align: center;
  font-weight: 800;
  width: 20px !important;
  cursor: pointer;
  color: #fff;
  margin: 0 !important;
}
.productos-pos .productos-pos-ventaComanda .btn-pos-mas {
  background-color: #2b328d;
  border-radius: 0px 20px 20px 0px;
}
.productos-pos .productos-pos-ventaComanda .btn-pos-menos {
  background-color: #f65454;
  border-radius: 20px 0px 0px 20px;

}












.form-group.btn-mas-menos {
  display: flex;
  justify-content: center;
  margin: 0px 0; /* Espaciado para separar del resto de elementos */
}


/* Botón - (menos) */
.input-group .btn-pos-menos {
  background-color: #f65454; /* Rojo llamativo */
  color: #fff;
  font-size: 14px;
  padding: 8px 12px; /* Ajusta el tamaño del botón */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s; /* Transiciones suaves */
}

.input-group .btn-pos-menos:hover {
  background-color: #d34343; /* Rojo más oscuro al pasar el mouse */
  transform: scale(1.1); /* Ligera ampliación al hacer hover */
}

/* Botón + (más) */
.input-group .btn-pos-mas {
  background-color: #2b328d; /* Azul oscuro */
  color: #fff;
  font-size: 12px;
  padding: 0px 0px; /* Ajusta el tamaño del botón */
  cursor: pointer;
  transition: background-color 0.0s, transform 0.0s; /* Transiciones suaves */
}

.input-group .btn-pos-mas:hover {
  background-color: #1d2464; /* Azul más oscuro al pasar el mouse */
  transform: scale(1.1); /* Ligera ampliación al hacer hover */
}

/* Campo de entrada */
.input-group .cantidad-number {
  width: 50px; /* Tamaño ajustado */
  text-align: center; /* Centrar el número */
  border: none; /* Sin borde para mantener limpieza */
  outline: none; /* Elimina contorno al enfocar */
  font-size: 16px; /* Tamaño de texto */
  font-weight: bold;
  color: #333;
  appearance: none; /* Quita las flechas en navegadores modernos */
}

.input-group .cantidad-number:focus {
  background-color: #f9f9f9; /* Color de fondo al enfocar */
}
.paginador-pos {
  width: 100%;
}
.productos-pos {
  scrollbar-width: auto;
  scrollbar-color: rgb(80, 150, 230) rgb(255, 255, 255);
}

/* Works on Chrome, Edge, and Safari */
.productos-pos::-webkit-scrollbar {
  width: 20px;
}

.productos-pos::-webkit-scrollbar-track {
  background: rgb(220, 220, 220);
}

.productos-pos::-webkit-scrollbar-thumb {
  background-color: rgb(80, 150, 230) !important;
  border-radius: 20px;
  border: 0;
}

.super-contenedor-formulario-pos{
  scrollbar-width: thin;
  scrollbar-color: rgb(202, 202, 202) rgb(255, 255, 255);
}
/* Works on Chrome, Edge, and Safari */
.super-contenedor-formulario-pos::-webkit-scrollbar {
  width: 30px;
}

.super-contenedor-formulario-pos::-webkit-scrollbar-track {
  background: rgb(248, 248, 248);
}

.super-contenedor-formulario-pos::-webkit-scrollbar-thumb {
  background-color: #bcbcbc;
  border-radius: 10px;
  border: 6px solid transparent;
  background-clip: content-box;
}


.contenedor-menu-pos {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0;
  right: -16px;
  z-index: 1;
  background-color: #36363600;
  padding: 3px;
  border-radius: 18px;
  height: 70px;
}
.productos-pos .foto-pos {
  display: none;
}
.productos-pos .edit-pos {
  display: none;
}
.productos-pos .edit-posComanda {
  font-size: 0.7em!important;
  color: #3458db;
  cursor: pointer;
  padding: 5px;
  


}
.productos-pos .foto-posComanda {
  font-size: 0em;
  color: #4871C1;
  cursor: pointer;
  margin-bottom: 0px;

  padding: 5px;
  border-radius: 90%;
 
}
.contenedor-icbper-linea {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.contenedor-icbper-linea input {
  margin-left: 5px;
}

.descripcion-de-items {
  padding: 10px;
        text-align: center;
        font-size: 1.5em;
        color: #2C3E50; 
        font-weight: 600; 
        background-color: #ECF0F1; 
        border-left: 5px solid #3498DB; /
        border-radius: 5px;/
        text-transform: uppercase; 
        letter-spacing: 1px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}


.infoProductoPos {
    padding: 10px;
    font-size: 13px;
    color: #2C3E50;
    background-color: #F4F6F6;
    border-radius: 5px;
    margin-left: 10px;
    width: 96% !important;
         white-space: normal; /* Permite saltos de línea */
    text-align: justify;
    text-justify: inter-word;
}

.tablaInfoProducto {
    width: 100%;
    border-collapse: collapse;
   white-space: normal; /* Permite saltos de línea */
    text-align: justify;
    text-justify: inter-word;
    
}

.tablaInfoProducto td {
    padding: 4px 6px;
    vertical-align: top;
}

.tablaInfoProducto .titulo {
    font-weight: bold;
    width: 150px; /* ancho fijo para alinear */
    white-space: nowrap;
}

.tablaInfoProducto .valor {
    font-weight: normal;
}
.form-items-pos .form-group {
  margin: 3px;
}
.form-items-pos .col-md-6 {
  padding: 2px;
}
#formVentaPos .form-group {
  margin: 3px;
  width: 100%;
}
#formVentaPos legend {
  margin: 3px;
}
#formVentaPos .col-md-6 {
  padding: 2px;
}
#formVentaPos .tabla-descuentos legend {
  border-style: none !important;
}
#formVentaPos #docIdentidad,
#formVentaPos #email {
  z-index: 0;
}
.contenedor-totales-ventas-pos .col-md-5,
.contenedor-totales-ventas-pos .col-md-7 {
  padding: 0;
}

.super-contenedor-herramientas-pos {
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 3;
  right: -35px;
  top: 0px;
  width: 40px;
  height: 40px;
  background-color: rgba(240, 230, 140, 0);
}
.contenedor-herramientas-pos {
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 1;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: all 0.2s;
}
#btnMenuHerramientas {
  display: none;
}

.super-contenedor-herramientas-pos .btn-h-pos {
  width: 25px;
  height: 25px;
  background-color: #00000000 !important;
  position: absolute;
  top: 0px;
  left: -22px;
  z-index: 2;
  cursor: pointer;
  border-radius: 50%;
  padding: 3px;
  padding-left: 5px;
  color: #fbfbfb;
  font-size: 1.2em;
}
.super-contenedor-herramientas-pos .btn-h-pos i {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #494949 !important;
  padding: 7px;
  border-radius: 50%;
  right: 0px;
  top: 0;
}
#btnMenuHerramientas:checked ~ .contenedor-herramientas-pos {
  transform: translateX(0%);
}

.contenedor-herramientas-pos label:nth-of-type(1) {
  border-radius: 7px 0px 0px 0px !important;
}
.contenedor-herramientas-pos label:nth-of-type(7) {
  border-radius: 0px 0px 0px 7px !important;
  text-align: center;
  background-color: #3f3f3f;
  display: flex;
  justify-content: space-around;
}
.contenedor-herramientas-pos label,
.contenedor-herramientas-pos button {
  padding: 10px;
  background-color: #343434;
  z-index: 1;
  color: #f5f5f5;
  font-weight: 600;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #4e4e4e;
  letter-spacing: 1px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  /* font-family: Arial, Helvetica, sans-serif; */
}
.contenedor-herramientas-pos button.conectada {
  background-color: #1a9e4a !important;
}
.contenedor-herramientas-pos label:hover,
.contenedor-herramientas-pos button:hover {
  color: #e2e2e2;
  background-color: #3a3a3a;
}
.contenedor-herramientas-pos .herramientas_pos {
  display: none;
}
.activar-envio-sunat {
  background-color: #52a422 !important;
}
/* .seccion-fechas-moneda-correlativo {
  box-sizing: border-box;
  position: absolute;
  z-index: 999;
  background-color: #383838;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.seccion-coreo-cuotas {
  color: #ffffff;
  box-sizing: border-box;
  position: fixed;
  z-index: 999;
  background-color: #383838;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.seccion-observacion {
  color: #ffffff;
  box-sizing: border-box;
  position: fixed;
  z-index: 999;
  background-color: #383838;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  top: 200px;
} */
/* @media (min-width: 992px) {
  .col-md-5 {
    padding: 0 !important;
  }
} */

.container-comprobants-pos {
  display: flex;
  flex-flow: row;
  justify-content: stretch;
  width: 250px;
  z-index: 1;
  margin: 0 auto;
  background-color: #ECEAEA;
 
  border-radius: 0px 0px 8px 8px;
  height: 28px;

}
.container-comprobants-pos .tipo_comprobante {
  display: none;
  
}
.container-comprobants-pos label {
  flex: 1;
  font-size: 0.9em;
  margin: 0 auto;


  height: 28px;
  font-weight: 700;
  border-radius: 1px 0px 8px 8px;
  letter-spacing: 1px;
}

.factura {

  border-radius: 0px 0px 0px 8px !important;
}
.boleta {

}
.nota {

  border-radius: 0px 0px 8px 0px !important;
}



   .container-comprobants-pos input[type="radio"] {
        display: none; /* Oculta los radio buttons */
         transform: scale(1.2);
    }

    .container-comprobants-pos input[type="radio"]:checked + label {
  background: rgb(80, 150, 230);

   
    }








/* @media (max-width: 545px){
    .rounded-pos{
        margin-top: 50px;
    }
  } */
@media (max-width: 400px) {
  .productos-pos {
    z-index: 0;
    height: 75vh;
    align-content: flex-start; 
  }
}




#formVentaPos .cantidaditempos {
  outline: none !important;
  border-style: none !important;
  padding: 0px 0px 0px 0px !important;
  text-align: center !important;
  width: 60px;
  height: 20px !important;
  border: 1px solid rgba(22, 81, 147, 0.7) !important;
}


#formVentaPos .observa1itempos {
  outline: none !important;
  border-style: none !important;
  padding: 0px 0px 0px 0px !important;
  text-align: center !important;
  width: 60px;
  height: 24px !important;
  border: 1px solid rgba(22, 81, 147, 0.7) !important;
}

#formVentaPos .preciounitariopos {
  outline: none !important;
  border-style: none !important;
  padding: 0px 0px 0px 0px !important;
  text-align: center !important;
  width: 70px;
  height: 20px !important;
  border: 1px solid rgba(22, 81, 147, 0.7) !important;
}
#formVentaPos #descuentoGlobalpos,
#formVentaPos #descuentoGlobalPpos {
  border-radius: 0px 5px 5px 0px !important;
}
#formVentaPos .tabla-items thead {
  font-size: 0.85em !important;
}



#formVentaPos .tabla-totales tbody tr td:nth-child(1) {
  width: 60% !important;
  font-size: 1em;
  padding-bottom: 0;
}
.super-contenedor-formulario-pos .tabla-totales tbody tr td:nth-child(2) {
  width: 40% !important;
  font-size: 1.2em;
  padding-bottom: 0 !important;
}
.super-contenedor-productos-pos {
  padding-right: 5px !important;
}
.super-contenedor-formulario-pos {
  padding-left: 15px;
  height: 98vh;
  overflow-y: auto;
  margin-left: 0;
  overflow-x: hidden;
  border-left: 1px solid #d0d0d0;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
}
.contenedor-productos-ventas .col-md-2,
.contenedor-productos-ventas .col-md-3,
.contenedor-productos-ventas .col-md-7 {
  padding: 5px !important;
}
@media (max-width: 992px) {
  .pos-contenedor-fluido{
    height: 100vh !important;
    overflow-y: auto !important;
  }
  .super-contenedor-formulario-pos {
    padding: 20px !important;
  }
  .contenedor-productos-ventas .form-group {
    margin: 5px !important;
  }
  .contenedor-productos-ventas .col-md-2,
  .contenedor-productos-ventas .col-md-3,
  .contenedor-productos-ventas .col-md-7 {
    padding: 0 !important;
  }
}
.btn-agregar-ps-pos {
  position: absolute;
  width: 100%;
  background-color: #2b328d99;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}

/* El menú del producto debe quedar por encima del overlay. */
.productos-pos .productos-pos-venta .contenedor-menu-pos {
  position: absolute;
  z-index: 2;
}

.btn-agregar-ps-pos {
  position: absolute;
  width: 100%;
  background-color: #2b328d99;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}

/* El menú del producto debe quedar por encima del overlay. */
.productos-pos .productos-pos-venta .contenedor-menu-pos {
  position: absolute;
  z-index: 2;
}

.ocultar-canasta {
  position: absolute;
  width: 100%;
  background-color: #2b328d00;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ver-canasta {
  position: absolute;
  width: 100%;
  background-color: #2b328d00;
  top: 0;
  height: 150px;
  display: flex;
  opacity: 1;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.btn-agregar-ps-pos i {
  text-align: center;
  width: 50px;
  height: 25px;
  font-size: 1.8em;
  padding-top: 17px;
  background-color: #3c3cbed8;
  border-radius: 50%;
  color: #f9f9f9;
  cursor: pointer;
}

.radio-envio-pos #no {
  display: none;
}
.inicio-pos {
  outline: none;
  border-style: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding-right: 6px;
  text-align: center;
  background-color: #323232d8;
}


.detalle-pos {
  outline: none;
  border-style: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 40%;
  padding-left: 0px;
  text-align: center;
  background-color: transparent;
  color:#499159;
  font-size: 24px;
  cursor: pointer;
}


.detalle-pos i {
  color: #499159;!important;
}


.detalle-regresar {
  outline: none;
  border-style: none;
  position: fixed;
  bottom: 20px;          /* abajo */
  left: 50%;             /* centro horizontal */
  transform: translateX(-50%); /* centrado exacto */
  z-index: 999;

  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;

  background-color: transparent;
  color: #499159;
  font-size: 24px;
  cursor: pointer;
}

.detalle-regresar i {
  color: #499159 !important;
}



.inicio-pos i {
  color: #ffffff !important;
}
.super-contenedor-formulario-pos .nuevoProducto {
  padding: 2px !important;
}
.super-contenedor-formulario-pos {
  overflow-x: auto;
}
.contenedor-cuotas {
  display: none;
}

.contenedor-productos-ventas
  .select2-container--default
  .select2-selection--single,
.contenedor-productos-ventas .select2-selection .select2-selection--single {
  border: 1px solid rgba(170, 160, 255, 0.7) !important;
  padding: 8px 12px;
  height: 33px;
  border-radius: 5px;
  cursor: pointer;
}



.list-categorias {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 10px;

    flex-wrap: wrap;  /* Esto permite que las categorías se acomoden en varias filas si es necesario */
    justify-content: start;


    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 5 columnas por defecto */
    gap: 5px; /* Espacio entre las columnas */
}
.categoria-item {
    border-radius: 10px;
    margin: 5px;
    padding: 6px 8px;
/*  background-image: linear-gradient(105.3deg, rgb(225, 240, 250) 0%, rgb(160, 200, 220) 100%) !important;
*/
    background-image: linear-gradient(105deg, #e0f2fe 0%, #7db7f5 100%);
    border: 1px solid #dbeafe;

    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12);

    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;

    width: 100%;
    height: 38px;

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

    cursor: pointer;
    transition: all 0.15s ease;
}


.categoria-item:hover {

 background-image: linear-gradient(105deg, #e0f2fe 0%, #7db7f5 100%);
   transform: scale(1.2);

}






.row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.row2 .col-2 {
    flex: 0 0 auto;
}

.row2 .col-8 {
    flex: 1;
    justify-content: flex-start !important;
    padding-left: 0;
    padding-right: 5px;
}

@media (max-width: 768px) {
    .list-categorias {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas para tablets */
    }
}

@media (max-width: 480px) {
    .row2 {
        display: flex;
        align-items: center; /* Asegurar alineación vertical */
        justify-content: space-between; /* Mantener elementos en línea */
    }

    .list-categorias {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en móviles */
    }

    .categoria-item {
        font-size: 11px; /* Reducir el texto */
        width: 85px; /* Ancho menor */
        height: 27px; /* Altura menor */
    }

    .btn-paginacion {
        font-size: 40px; /* Reducir tamaño de las flechas */
        width: 35px;
        height: 35px;

    }
}
.list-categorias-container {
    flex: 1; /* Tomar el espacio disponible */
    text-align: center; /* Centrar las categorías horizontalmente */
}



/* Diseño para dispositivos pequeños */
@media (max-width: 768px) {
    .list-categorias {
        flex-direction: column;  /* En pantallas pequeñas, cambia a una columna */
    }
}

.btn-paginacion {
    

   padding: 5px; /* Espaciado interno */
    margin: 10px;
  
 background-color: white;!important;
    border: none!important; /* Borde visible */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer;
  color:#255494;
    font-weight: bold; /* Hace el texto más grueso */
    display: flex; /* Centrar contenido horizontal y verticalmente */
    justify-content: center;
    align-items: center;
    width: 20px; /* Ancho fijo para el botón */
    height: 20px; /* Alto fijo para el botón */
    transition: all 0.3s ease; /* Transición para el hover */

    font-family: 'Poppins', sans-serif; /* Fuente moderna */
   font-size: 50px; /* Tamaño para las flechas */
}


.paginacion-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;  /* Espacio entre los elementos */
        flex: 0 0 auto; /* Evitar que crezca */

}

.paginacion-container button {
    padding: 0px 0px;
    font-size: 16px;
    cursor: pointer;
}



 .table-precios {
        width: 100%;
     height: 10%!important;
        margin-top: 5px;
        font-size: 16px;

     

    }


   .table-precios th{
     background-color:#5B80C6;

        
    }


    .table-precios th, .table-precios td {
     padding: 6px 6px; /* 6px arriba/abajo, 10px izquierda/derecha */
    text-align: center;
    border: none;

    }

    .table-precios th {
    
        color: white;
    }

    .table-precios tr:hover {
        background-color: #F3F2F2; /* Color al pasar el mouse sobre la fila */
    }

.table-precios thead tr th:first-child{
border-radius: 5px 0px 0px 5px;
}
.table-precios thead tr th:last-child{
    border-radius: 0px 5px 5px 0px;
}

.BtnSinFondo{
   background-color: transparent!important;
   border-style: none!important;

}


.btnSeleccionado,
.btnSeleccionadoRecibo,
.btnSeleccionadoCobranza  {
 border: none !important;  /* Elimina cualquier borde */
    transition: all 0.2s ease-in-out;
      position: relative;
       background-color: #EFF1B0!important;
       color:black!important;

}

.btnSeleccionado.active,
.btnSeleccionadoRecibo.active,
.btnSeleccionadoCobranza.active, 
  {
   box-shadow: 0px 0px 25px rgba(100, 123, 255, 1), 0px 0px 35px rgba(100, 123, 255, 0.8);
    border: 3px solid #007bff !important;
     background-color: #EFF1B0!important;
    color:black;
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
  }


.btnSeleccionado .checkmark,
.btnSeleccionadoRecibo .checkmark,
.btnSeleccionadoCobranza .checkmark
 {
  position: absolute;
  right: 0px; /* Pegado al borde derecho */
  top: 12%;
  transform: translateY(-50%);
  font-size: 29px;
  color: #255494;
  display: none;
  pointer-events: none;
 

}

.btnSeleccionado.active .checkmark,
.btnSeleccionadoRecibo.active .checkmark,
.btnSeleccionadoCobranza.active .checkmark
 {
  display: inline;


}

.btnSeleccionado.active .checkmark::before,
.btnSeleccionadoRecibo.active .checkmark::before,
.btnSeleccionadoCobranza.active .checkmark::before

 {
  content: '✔';
}



.tablexxx {
    border-radius: 8px;
    overflow: hidden;
}

/* Estilo para los inputs */
.importeMultipago {
    font-size: 16px;
    padding: 8px;
    border: 2px solid #86949C;
    border-radius: 5px;
    transition: 0.3s;
}

.importeMultipago:focus {
    border-color: #133A84;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

/* Estilo de los totales */
.totales-container {
    margin-top: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.total-box {
    padding: 12px 20px;
    border-radius: 8px;
    background-color: #e3f2fd;
    font-size: 18px;
    font-weight: bold;
}

.total-box.restante {
    background-color: #e3f2fd;
}

.total-monto {
    font-size: 20px;
    color: #007bff;
}



.icono-regresar {
    font-size: 26px;
    color: red;
    text-decoration: none;
    font-weight: bold;
}


.icono-regresar i {
    margin-right: 0px;
}


.estadoDocSunat {
  
    font-size: 13px;
}

.estadoDocSunat {
    font-weight: bold;
}

.estadoDocSunat span {
    color: white;
    padding: 2px 5px;
    border-radius: 4px;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.estadoDocSunat-aceptado span {
    background-color: #1C4697;
}

.estadoDocSunat-pendiente span {
    background-color: #CE9734; 
}

.estadoDocSunat-error span {
       background-color: #6F42C1; 
}

.estadoDocSunat-baja span {
    background-color: #17A2B8; 
}

.estadoDocSunat-rechazado span {

        background-color: #DC3545; 
}

.select-sede {
    margin-right: 5px; 
}

.text-AnuladosCierre {
  color: #E55010;
  font-weight: bold; 
}


.teclado-container {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  gap: 4px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.pantalla {
  flex: 0 0 70px; /* Reducir aún más el tamaño de la pantalla */
  font-size: 20px;
  padding: 5px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
    color: #3556A2;
    font-weight: BOLD;
}

.pantallaComanda {
  flex: 0 0 70px; /* Reducir aún más el tamaño de la pantalla */
  font-size: 20px;
  padding: 5px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
    color: #3556A2;
    font-weight: BOLD;
}



.teclado {
  display: flex;
  flex-wrap: wrap;
  gap: 1px; /* Reducir espacio entre botones */
  justify-content: center;
  flex: 1;
  max-width: 100%;

}

.teclado button {
  flex: 0 0 14%; /* Reducir más el ancho de los botones */
  min-width: 0;
  padding: 2px;

  border: none;
  border-radius: 6px;
  background-color: #eee;
  cursor: pointer;
  transition: background-color 0.2s;
  height: 28px; /* Reducir la altura de los botones */
font-size: 16px;
    font-weight: bold;


}

.teclado button:hover {
  background-color: #ddd;
}

.btn-borrar {
  background-color: #f88;
  flex: 0 0 28%!important;
}

.btn-borrar:hover {
  background-color: #f55;
}

/* === SOLO EN PC: pantalla + teclado horizontal === */

@media (min-width: 768px) {
  .teclado-container {
    flex-direction: row;
  }

  .pantalla {
    width: 100%;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 0;
    color: #3556A2;
  }
  .pantalla {
    width: 100%;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 0;
    color: #3556A2;
  }

   .teclado {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .teclado button {
    flex: 0 0 auto;
    min-width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
  }
  .btn-borrar {
 background-color: #f88;
  flex: 0 0 14%!important;
}

}



.btn-agregar-ps-posXYZ{
color:#199446;cursor:pointer;
font-size: 13px!important;

}

.pos-col-barras {
  padding-left: 0;
}

.pos-fila-barras {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pos-search-wrap {
  position: relative;
  flex: 1;
}

.pos-search-wrap .form-control {
  height: 38px;
  padding-left: 34px;
  font-weight: normal !important;
  box-sizing: border-box;
}

.pos-search-wrap .form-control::placeholder {
  font-weight: normal;
}

.pos-search-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 38px;
  color: #9aa0ac;
  font-size: 15px;
  pointer-events: none;
}


.pos-form-group-buscar {
  position: relative;
}

.pos-toggle-buscar-barras {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-30%);
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #143DD4 0%, #0f2a9e 100%);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  box-sizing: border-box;
}

.pos-toggle-ajustado {
  top: 0;
  transform: none;
}

@media (max-width: 768px) {
  .pos-fila-barras {
    display: none;
  }

  .pos-fila-barras.pos-mostrar {
    display: flex;
  }

  .pos-form-group-buscar .pos-search-wrap {
    margin-right: 46px;
  }

  .pos-form-group-buscar-balanza .pos-search-wrap {
    margin-right: 170px;
  }

  .pos-form-group-buscar .pos-search-icono {
    margin-top: 4px;
  }

  .pos-form-group-buscar-balanza .pos-toggle-buscar-barras {
    right: 115px;
  }

  .pos-balanza-inline-movil {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    white-space: nowrap;
  }

  .pos-balanza-inline-movil .pos-balanza-peso {
    font-size: 18px;
    padding: 2px 6px;
  }

  .pos-toggle-buscar-barras {
    display: inline-flex;
  }
}

@media (min-width: 769px) {
  .pos-balanza-solo-movil,
  .pos-balanza-inline-movil {
    display: none !important;
  }

  .pos-balanza-solo-pc .pos-fila-balanza {
    padding: 0;
    height: 38px;
    justify-content: flex-start;
  }

  .pos-form-group-buscar-balanza .pos-search-wrap .form-control {
    font-size: 12px;
  }
}

.tk-peso-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.swal2-container {
  z-index: 100000 !important;
}

.tk-peso-overlay.activo {
  display: flex;
}

.tk-peso-modal {
  background: #fff;
  border-radius: 12px;
  width: 320px;
  max-width: 92vw;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tk-peso-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tk-peso-titulo {
  font-weight: bold;
  font-size: 15px;
  color: #14161f;
  text-transform: uppercase;
}

.tk-peso-cerrar {
  border: none;
  background: none;
  font-size: 18px;
  color: #9aa0ac;
  cursor: pointer;
  line-height: 1;
}

.tk-peso-precio {
  color: #3556A2;
  font-weight: bold;
  font-size: 14px;
  margin-top: 4px;
}

.tk-peso-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}

.tk-peso-campo label {
  font-weight: bold;
  color: #3556A2;
  margin: 0;
  white-space: nowrap;
}

.tk-peso-valor {
  flex: 1;
  min-height: 40px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  font-size: 24px;
  font-weight: bold;
  color: #143DD4;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
}

.tk-peso-valor-activo {
  border-color: #143DD4;
  border-width: 2px;
  background-color: #eef1ff;
}

.tk-peso-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.tk-peso-teclado button {
  border: none;
  border-radius: 50%;
  background-color: #eee;
  width: 66px;
  height: 66px;
  aspect-ratio: 1;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
  justify-self: center;
}

.tk-peso-teclado button:hover {
  background-color: #ddd;
}

.tk-peso-borrar {
 width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 61, 212, 0.3);

  background-color: #f55 !important;
}

.tk-peso-borrar:hover {
  background-color: #f55 !important;
}

.tk-peso-confirmar {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #143DD4 0%, #0f2a9e 100%);
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 61, 212, 0.3);
}

.tk-peso-confirmar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 61, 212, 0.5);
}

.pos-fila-balanza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
}

.pos-balanza-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  flex-shrink: 0;
}

.pos-balanza-punto.conectado {
  background-color: #1a9e4a;
}

.pos-balanza-estado {
  font-size: 12px;
  color: #545454;
}

.pos-balanza-peso {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: bold;
  color: #143DD4;
  font-size: 18px;
}

.stock-verde {
  color: green; /* fondo verde claro */

  border-radius: 4px;

  text-align: center;
  width:  60%;
}

.stock-rojo {
color: red; /* fondo rojo claro */

  border-radius: 4px;
  
  text-align: center;
    width: 60%;
}



.mensaje-stock-minimo,
.mensaje-vencimiento {
   color: red;
   font-weight: bold;
   font-size: 14px;
   line-height: 0.8;
   display: block;
   margin: 1px 0;
  

}
.mensaje-stock-minimoComanda,
.mensaje-vencimientoComanda {
   color: red;
   font-weight: bold;
   font-size: 10px;
   line-height: 0.9;
   display: block;
   margin: 1px 0;
   padding-top:3px;
  

}


.modal-custom-content {
    background: #fff;
    border: 2px solid #4a90e2;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3);
    padding: 1.5rem;
}


.texto-verde {
    color: green;
}
#contenedorSalonesYMesas {
    display: none;
}
#contenedorSalonesYMesas.activo {
    display: block;
}





.TituloModal {
  padding: 10px;
        text-align: center;
        font-size: 1.5em;
        color: #2C3E50; 
        font-weight: 600; 
        background-color: #ECF0F1; 
        border-left: 5px solid #3498DB; /
        border-radius: 5px;/
        text-transform: uppercase; 
        letter-spacing: 1px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

.TituloModal2 {
  padding: 10px;
        text-align: center;
        font-size: 1.2em;
        color: green; 
        font-weight: 600; 
        background-color: #ECF0F1; 
        border-left: 5px solid #3498DB; /
        border-radius: 5px;/
        text-transform: uppercase; 
        letter-spacing: 1px; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}


#modalComentario .modal-content {
  border: 0px solid transparent;   
  border-radius: 10px;      
}

.comentario-btn {
  background-color: #455a64;     
  border: 1px solid #ccc;      
  border-radius: 10px;        
  padding: 8px 8px;           
  font-size: 14px!important;             
  color: white; 
  font-weight: bold;               
  display: inline-flex;        
  align-items: center;
  gap: 6px;                   
  cursor: pointer;            
  transition: all 0.2s ease-in-out;

  line-height: 1.4;  
    white-space: normal;
  text-align: left;
    margin: 0.5rem 0.5rem; 

background-image: linear-gradient(105.3deg, rgb(200, 225, 250) 0%, rgb(100, 160, 220) 100%) !important;

color:black;
}


.comentario-btn:hover {
  color: black; 
 background: linear-gradient(115deg, rgb(210, 230, 240) 0%, rgb(140, 180, 200) 100%) !important;
  transform: scale(1.1);
}


.botonera {
  display: flex;
  gap: 150px; /* Espacio entre botones */
}


.hover-effect {
    transition: all 0.2s ease-in-out;
  }
  .hover-effect:hover {
    background-color: #e9f2ff;
    transform: scale(1.02);
    border-color: #0d6efd;
  }
  .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
  }


  

.input-group .input-group-text {
  border-radius: 6px !important;
  margin-right: 8px; /* 👈 separa un poco del input */
}


/*=====================================
  PANEL DE DATOS DE QUESOS (POS)

  Grilla propia en vez de columnas Bootstrap: las etiquetas largas se
  parten en dos lineas y con col-md-* desalinean los inputs. Con grid +
  flex todas las cajas de una fila miden igual y los inputs quedan a la
  misma altura sin importar el largo del texto.

  Paleta neutra (negro/gris) a pedido del usuario: el azul de marca se
  reserva para el resto del sistema, este panel usa solo escala de grises
  para no competir visualmente. Los campos calculados se distinguen por
  fondo gris claro y cursor bloqueado, no por color.
======================================*/

.quesos-titulo {
  margin: 0 0 10px 0 !important;
  padding-bottom: 6px;
  font-size: 1.3em;
  letter-spacing: 0.2px;
  font-weight: bold !important;
  color: #1a202c;
  border-bottom: 2px solid #1a202c;
}

.quesos-titulo #quesosProductoNombre {
  color: #1a202c;
}

.quesos-grid {
  display: grid;
  gap: 8px 12px;
}

.quesos-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quesos-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Cada caja se estira a la altura de su fila y ancla el input abajo,
   asi los inputs de una misma fila siempre quedan alineados. */
.quesos-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

/* TOTAL TARA y SUBTOTAL PESO NETO: siguen calculandose y enviandose al
   guardar la venta (van a la tabla detalle para reportes), solo se
   ocultan de la vista para no saturar el panel. */
.quesos-oculto {
  display: none;
}

.quesos-box > label {
  display: block;
  margin: 0 0 4px 0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a202c;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.quesos-box > label small {
  font-size: 9.5px;
  font-weight: 600;
  color: #666;
  text-transform: none;
  letter-spacing: 0;
}

.quesos-input {
  display: flex;
  align-items: stretch;
  border: 1px solid #c4c4c4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.quesos-input:focus-within {
  border-color: #1a202c;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .12);
}

.quesos-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  flex: 0 0 30px;
  background: #fff;
  border-right: 1px solid #c4c4c4;
  color: #1a202c;
  font-size: 12px;
}

.quesos-input > input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #1a202c;
}

/* Campos calculados: no se escriben, se leen. */
.quesos-calc { background: #f0f0f0; border-color: #c4c4c4; }
.quesos-calc .quesos-icono { background: #e4e4e4; border-right-color: #c4c4c4; }
.quesos-calc > input { background: transparent; color: #1a202c; cursor: not-allowed; }

.quesos-calc-fuerte { border-color: #1a202c; }
.quesos-calc-fuerte > input { font-weight: 800; }

/* Bloques CANASTILLA / AZUL */
.quesos-bloque {
  margin-top: 12px;
  padding: 10px 12px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #fafafa;
}

.quesos-bloque-titulo {
  margin-bottom: 8px;
  padding-bottom: 5px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1a202c;
  border-bottom: 1px dashed #cfcfcf;
}

/* Cierre: peso neto total (el que manda la cantidad) + comision */
.quesos-cierre {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid #1a202c;
}

.quesos-total > label {
  color: #1a202c;
  font-size: 12px;
}

.quesos-calc-total {
  border-width: 2px;
  border-color: #1a202c;
  background: #ececec;
}

.quesos-calc-total > input {
  height: 42px;
  font-size: 20px;
  font-weight: 800;
}

.quesos-calc-total .quesos-icono {
  width: 38px;
  flex: 0 0 38px;
  font-size: 15px;
  background: #1a202c;
  color: #fff;
  border-right-color: #1a202c;
}

@media (max-width: 1199px) {
  .quesos-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .quesos-grid-3,
  .quesos-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quesos-cierre { grid-template-columns: 1fr; }
  /* 16px evita que iOS haga zoom al enfocar el campo */
  .quesos-input > input { height: 40px; font-size: 16px; }
}

/* Fila del carrito cargada actualmente en el panel: el cajero necesita
   ver de un vistazo a que producto pertenecen los datos que edita. */
.fila-item-pos {
  cursor: pointer;
}

.fila-item-pos-activa > td {
  background: #eef2ff !important;
  box-shadow: inset 3px 0 0 #143DD4;
}

/*=====================================
  PANEL DATOS DE CLIENTE (POS)

  El bloque vive dentro de la columna de productos, encima de las
  categorias. Se le da contenedor propio porque los addons son etiquetas
  de heading (h3/h5/h7) cuyos margenes por defecto descuadran la altura
  de la fila, y porque los .row de Bootstrap sacan margen negativo que
  recortaba el titulo contra el borde izquierdo.

  .panelDatosCompra (direccion / correo / telefono) arranca oculta y la
  despliega el boton "+" — por eso el espaciado se define por fila y no
  con un margen fijo del contenedor.
  ======================================*/
.panel-cliente-pos {
  padding: 12px 14px 10px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
}

/* Anula el margen negativo de .row: sin esto el contenido se sale del
   contenedor por la izquierda y el titulo se ve cortado. */
.panel-cliente-pos .row {
  margin-left: 0;
  margin-right: 0;
}

.panel-cliente-pos [class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

/* Titulo */
.panel-cliente-pos legend {
  margin: 0 0 10px 0 !important;
  padding: 0 0 6px 0;
  border: 0;
  border-bottom: 2px solid #143DD4;
  font-size: 1.05em !important;
  line-height: 1.2;
}

.panel-cliente-pos legend .textoTitulos {
  display: block;
  margin: 0;
  color: #143DD4;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Los addons son h3/h5/h7 usados como iconos: se les quita el margen de
   heading para que queden a la misma altura que el input.

   Están FUERA del .input-group para no restar espacio al input, alineados
   a la derecha del mismo con margin-left. Color negro/fondo blanco. */
.panel-cliente-pos .input-group-addon {
  margin: 0 !important;
  margin-left: 4px !important;
  padding: 6px 8px !important;
  min-width: 36px;
  text-align: center;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #222 !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: none !important;
  flex-shrink: 0;
}

.panel-cliente-pos .input-group-addon i {
  color: #222 !important;
}

/* Los addons dentro del .input-group (dirección/correo/etc) mantienen el borde gris */
.panel-cliente-pos .input-group .input-group-addon {
  margin-left: 0 !important;
  border: 1px solid #d6dfef !important;
}

/* Botón SUNAT: asegurar que se vea el ícono SVG */
.panel-cliente-pos .buttonSunat {
  background-image: url('../img/svg/sunat.svg') !important;
  background-size: 22px 22px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}

.panel-cliente-pos .form-group {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Contenedor flex para alinear input + botones de acción en la misma linea.
   Los botones salen del .input-group para no restar espacio al input,
   lo que los mantiene alineados entre filas. */
.panel-cliente-pos .input-group-flex {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.panel-cliente-pos .input-group {
  width: 100%;
}

.panel-cliente-pos .form-control {
  height: 36px;
  font-size: 13px;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #333 !important;
}

.panel-cliente-pos .form-control:focus {
  border-color: #ddd !important;
  box-shadow: none !important;
  outline: none !important;
}

/* MERCADO y PUESTO se llenan solos al elegir cliente: se marcan como
   solo lectura para que el cajero no intente escribirlos. */
.panel-cliente-pos .form-control[readonly] {
  background: #f7f9fc;
  color: #5b6b8c;
}

/* El panel plegable no debe dejar hueco cuando esta cerrado. */
.panel-cliente-pos .panelDatosCompra .row:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .panel-cliente-pos {
    padding: 10px;
  }
  .panel-cliente-pos .form-control {
    height: 38px;
    font-size: 14px;
  }
}