/* .contenedor-totales-ventas-pos {
  width: 100%;
  height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
} */
 .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: 340px;

}
.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: left;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: flex-start; 


}

.productos-pos .productos-pos-venta {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  width: 150px;
  height: 250px;
  margin: 5px;
  border: 1px solid #e7e7e7;
  padding: 5px;
  border-radius: 7px;
}
.productos-pos .productos-pos-venta img {
  width: 100%; /* La imagen ocupará todo el ancho del contenedor */
  height: auto; /* Mantiene la proporción original de la imagen */
  border-radius: 5px; /* Opcional, si quieres bordes redondeados */
  object-fit: cover; /* Ajusta la imagen si necesitas cubrir el espacio completo */
}
.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; /
}
.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: 80px;
  height: 140px;
  margin: 1px;
  border: 1px solid #e7e7e7;
  padding: 5px;
  border-radius: 5px;
}
.productos-pos .productos-pos-ventaComanda img {
  width: 100%; /* La imagen ocupará todo el ancho del contenedor */
  height: auto; /* 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.9em;
  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: thin;
  scrollbar-color: rgb(225, 225, 225) rgb(255, 255, 255);
}

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

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

.productos-pos::-webkit-scrollbar-thumb {
  background-color: rgb(225, 225, 225);
  border-radius: 20px;
  border: 3px solid rgb(255, 255, 255);
}

.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 {
  font-size: 1em;
  color: #4871C1;
  cursor: pointer;
  margin-bottom: 0px;

  padding: 5px;
  border-radius: 90%;
 
}
.productos-pos .edit-pos {
  font-size: 1.3em;
  color: #3458db;
  cursor: pointer;
  padding: 5px;


}
.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 {
  padding: 10px;
  background-color: #343434;
  z-index: 1;
  color: #f5f5f5;
  font-weight: 600;
  border-radius: 0;
  border-bottom: 1px solid #4e4e4e;
  letter-spacing: 1px;
  /* font-family: Arial, Helvetica, sans-serif; */
}
.contenedor-herramientas-pos label: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: 24px !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: 24px !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: 0 !important;
  height: 98vh;
  overflow-y: auto;
  margin-left: 0;
  overflow-x: hidden;
}
.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;
  height: 150px;
  display: flex;
  opacity: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

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

.ocultar-canasta {
  position: absolute;
  width: 100%;
  background-color: #2b328d00;
  top: 0;
  height: 150px;
  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: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding-left: 2px;
  text-align: center;
  background-color: transparent;
  color:green;
  font-size: 20px;
  cursor: pointer;
}


.detalle-pos i {
  color: green;!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;
  
    flex-wrap: wrap;  /* Esto permite que las categorías se acomoden en varias filas si es necesario */
    justify-content: center;


    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 5 columnas por defecto */
    gap: 5px; /* Espacio entre las columnas */
}
.categoria-item {


 
    border: 1px solid white;
    border-radius: 13px!important;
    margin: 5px; 
    text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);

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



    padding: 7px 5px;
   
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    font-weight: bold;


    width: 100%;  /* Ancho fijo para las categorías */
    height: 40px;  /* Altura fija para las categorías */
    display: inline-block;
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
    line-height: 1.2;  /* Ajuste para centrar el texto verticalmente */
    text-align: center; /* Asegura que el texto se alinee correctamente */
         /* Centrado de texto */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}



.categoria-item:hover {

 background: linear-gradient(115deg, rgb(210, 230, 240) 0%, rgb(140, 180, 200) 100%) !important;
  transform: scale(1.2);

}






.row2 {
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: space-between; /* Espacia los elementos horizontalmente */
}

@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;

}

.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); 
}


#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;
  }