@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

@import "variables.css";

@import "login.css";


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: none;
	background-color: none;
}

article,body,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,img{
  display: block;
}

a{
	text-decoration: none;
}

html{
  margin:0 auto;
  font-family: var(--fuente2);
  font-size: 16px;
  width: 100%;
  scroll-behavior: smooth;
  background: linear-gradient(120deg,var(--colFondo1), var(--colFondo2));
}

html::-webkit-scrollbar{
  width: .6rem;
}

::-webkit-scrollbar-track{
  border-radius: 0;
  background: var(--colFondoScroll)
}

html::-webkit-scrollbar-thumb{
  border-radius: 5px;
  background:var(--colScroll);
}

main{
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100vh;
}

#errorResolucion{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top:0;
  left: 0;
  background: white;
  width: 100%;
  height: 100%;
  z-index: 1300;
  visibility: hidden;
  opacity: 0;
}

#errorResolucion img{
  width: 80%;
}

#errorResolucion p{
  font-size: 1.25rem;
  line-height: 1.75rem;
  padding: 2rem 3rem;
  text-align: center;
}

img {
  width: 100%;
  height: auto;
  border:none;
}

/* Header con menu */
.encabezado{
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: var(--color1);
	height: 4rem;
	padding: .5rem 1.5rem .5rem 1.5rem;
	align-items: center;
	border-radius: .75rem;
	margin-top: 1.25rem;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 1);
	width: 95%;
}

.logo{
	padding: .25rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.logo img{
	height: 2.75rem;
	width: auto;
}

.menuNav{
	display: flex;
	flex-direction: row;
	bottom: 0;
	height: 4rem;
}

.menuNav li {
  display: inline-block;
  /*padding: 0 .75rem;*/
}

.menuNav a {
	line-height: 4rem;
  color: var(--colBlanco);
  transition: width 0.25s ease-out;
  /*padding: 0rem .65rem;*/
  margin-right: 1.5rem;
  text-decoration: none;
}

.menuNav a:hover{
	cursor: pointer;
}

.submenu {
		visibility: hidden;
   	position: absolute;
   	width: auto;
    top: 100%; /* Mueve el submenú justo debajo del elemento padre */
    left: 0; /* Alinea el submenú con el borde izquierdo del elemento padre */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1);
    z-index: 1;
}

/* Estilos para los submenús dentro de los elementos del menú */
.menuNav li {
    position: relative; /* Establece el contexto de posición para los submenús */
}

/* Estilos para mostrar el submenú al pasar el mouse */
.menuNav li:hover .submenu {
	visibility: visible;
}

/* Estilos para los enlaces del submenú */

.submenu li {
	width: 100%;
	display: inline-block;
}

.submenu a {
    display: block;
    width: 100%;
    color: var(--colNegro);
    padding: 0 .75rem;
    text-decoration: none;
    font-size: .8rem;
}

.submenu a:hover {
    background-color: var(--color1);
    width: 100%;
    color: var(--colBlanco);
    box-sizing: border-box;
}

/*  DashBoard */
.dashboard{
	width: 95%;
	margin: 2rem auto;
	display: flex;
	flex-direction: column;
	background: var(--colBlanco);
	border-radius: .5rem;
	padding: 2rem;
	border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.5);
}

.deudas{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1rem;
	border: 1px solid var(--colGris);
	margin-bottom: 1rem;
}

h3{
	display: block;
	font-size: 1.75rem;
	margin: 0 0 1.5rem 0;
	padding-left: .5rem;
	line-height: 2.5rem;
	color: var(--colBlanco);
	background: var(--colGris);
	width: 100%;
	}

.oculto{
	display: none;
}

.infoPedidos{
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
	width: 100%;
	padding: 1rem;
	border: 1px solid var(--colGris);
}

.infoPedidos1Linea{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	margin-bottom: 2rem;
	width: 100%;
	gap: 1rem;
}

.infoPedidosFicha{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 20%;
	height: 9.5rem;
	border: 1px solid var(--colGris);
}

.infoPedidosGrafico{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 40%;
	height: 14rem;
	border: 1px solid var(--colGris);
	padding: .5rem;
}

canvas.graficoBarras{
	width: 95%;
	height: 95%;
	margin: 0	auto;
}

canvas.graficoPie{
	width: 95%;
	height: 13rem;
	margin: 0	auto;	
}

.cantidadPedidos{
	display: block;
	width: 100%;
	font-size: 5rem;
	line-height: 6rem;
	text-align: right;
	font-weight: 800;
	padding-right: 1rem;
	z-index: 1;
}

.nombreMes {
	display: block;
	width: 100%;
	margin: 0 auto;
	margin-top: .25rem;
	font-size: 1.25rem;
	line-height: 1.5rem;
	text-align: center;
}

.resumenAnterior{
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: space-between;	
	margin-bottom: .25rem;
}

.resumenAnterior span{
	display: block;
	margin: 0 auto;
	font-size: .7rem;
	line-height: 1.5rem;
	text-align: center;
}

.infoPedidosFichaImg {
	position: absolute;
	left: .25rem;
	top: 1.65rem;
	width: 6.5rem;
}

.infoUsuariosFichaImg {
	position: absolute;
	left: 1rem;
	top: 1.65rem;
	width: 5.5rem;
}

.estadosPedidos{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-evenly;
	gap: 1rem;
}

.PedPendientes{
	border: 1px solid var(--colGris);
	padding: .7rem;
	width: 32%;
}

.detallePedido{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	font-size: .7rem;
	line-height: 1rem;
}

.tituloEncabezado{ 
	font-weight: bold;
	font-size: .9rem;
	line-height: 1.15rem;
	margin-bottom: .5rem;
}

.NombrePedido {
	display: inline-block;
	white-space: nowrap; /* Evita que el texto se divida en líneas */
	overflow: hidden; /* Oculta cualquier contenido que se desborde */
	text-overflow: ellipsis;
	width: 70%;
}

.vend{
	display: inline-block;
	white-space: nowrap; /* Evita que el texto se divida en líneas */
	overflow: hidden; /* Oculta cualquier contenido que se desborde */
	text-overflow: ellipsis;
	width: 20%;
}

.fechaIng{
	width: 30$;
}

.CantPedidos{
	display: inline-block;
	width: 10%;
	text-align: right;
}

.CantidadProductos{
	display: inline-block;
	width: 20%;
	text-align: right;
}

.tableroPrincipal{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.tablero{
	width: 20%;
	padding: 1rem;
	background: var(--color5);
	border: 1px solid var(--color4);
	display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
	gap: .5rem;
}

.linea1{
	color: var(--colGris);
	text-align: center;
	font-size: .7rem;
}

.linea2{
	color: var(--colMenu);
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
}

.filtrado{
	display: flex;
	flex-direction: 	row;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--colGris);
	width: 90%;
}

.bloqueFiltro{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 30%;
	gap: .25rem 0;
}

.bloqueFiltro .lbl{
	padding: 0 .5rem;
}

.bloqueFiltro select{
	height: 1.75rem;
 line-height: 1.75rem;
 width: 100%;
 border: 1px solid var(--color4);
 background: none;
 outline: none;
 color: var(--color2);  
 font-size: .9rem;
 cursor:pointer;
 appearance: none;
 transition: all 2s ease;
 font-family: var(--fuente);
 background-color: none;
 border-radius: .875rem;
 padding: 0 .5rem;
 z-index: 1;
}

.bloqueFiltro img{
	position: absolute;
 top: 1.7rem;
 right: 0.8rem;
 width: 0.8rem;
 background: none;
 z-index: 0;
}

.topDeuda{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1rem;
	border: 1px solid var(--colGris);
	margin-bottom: 1rem;
	width: 100%;
}

.topDeuda #content{
	width: 80%;
}

.deudor{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-content: center;
	justify-content: space-between;
	gap: .3rem 0;
}

.nombreDeudor{
	width: 70%;
	line-height: 1.3rem;
	font-size: .85rem;
	display: block;
}

.importeDeudor{
	width: 25%;
	line-height: 1.3rem;
	font-size: .85rem;
	text-align: right;
}

.collapsible{
	width: 1.3rem;
	height: 1.3rem;
	line-height: 1.3rem;
	font-size: .75rem;
	margin: 0 auto;
	text-align: center;
}

.collapsible i:hover{
	cursor: pointer;
}

.topCte{
	margin: 0 2rem;
	background: var(--color5);
	line-height: 1.5rem;
	font-size: 1rem;
	border: 1px solid var(--color4);
}

.detalleCpte {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
 color: var(--colMenu);
 padding: 0 2rem;
 margin-bottom: 1rem;
 line-height: 1.3rem;
 font-size: .85rem;
 max-height: 0;
 width: 100%;
 overflow: hidden;
 transition: max-height 1.5s ease-out;
 background-color: var(--color5);
}

.detalleCarrito {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
 	color: var(--colMenu);
	padding: 0 .2rem;
 	margin-bottom: .2rem;
 	line-height: 1.3rem;
 	font-size: .6rem;
 	max-height: 0;
 	width: 100%;
 	overflow: hidden;
 	transition: max-height 1.5s ease-out;
 	background-color: var(--color5);
}

.fechaFac{
	display: block;
	text-align: left;
	width: 15%;
	border-bottom: 1px solid var(--color4);
}

.detFac{
	display: block;
	text-align: left;
	width: 25%;
	border-bottom: 1px solid var(--color4);
}

.ImporCredito{
	display: block;
	text-align: right;
	width: 18%;
	border-bottom: 1px solid var(--color4);
}

.ImporFac{
	display: block;
	text-align: right;
	width: 18%;
	border-bottom: 1px solid var(--color4);
}

.Saldo{
	display: block;
	text-align: right;
	width: 24%;
	border-bottom: 1px solid var(--color4);
}

.codigoCarrito{
	display: block;
	text-align: left;
	width: 15%;
}

.descripcionCarrito{
	display: block;
	text-align: left;
	text-overflow: ellipsis;
	width: 45%;
}

.cantCarrito{
	display: block;
	text-align: right;
	width: 5%;
}

.precioCarrito{
	display: block;
	text-align: right;
	width: 15%;
}

.totalCarrito{
	display: block;
	text-align: right;
	width: 20%;
}

.totalImporteCarrito{
	display: block;
	text-align: right;
	width: 100%;
	font-weight: 800;
}

.usuarioWeb{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1rem;
	border: 1px solid var(--colGris);
	margin-bottom: 1rem;
	width: 100%;
	gap:1 rem;
}

/* Fin DashBoard */

#imagenModal{
  position: fixed;
  top:0;
  left: 0;
  background: rgb(0, 0, 0,.8);
  width: 100%;
  height: 100%;
  z-index: 1005;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s ease;
  opacity: 0;
  visibility: hidden;
}

.fotoMaximizada{
  position: relative;
  height: auto;
  width: auto;
  max-height: 80%;
  padding: .8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fotoMaximizada img{
  height: 80vh;
  object-fit: contain;
}

.ventanaModal{
	position: fixed;
 	top:0;
  left: 0;
  background-color: rgb(0, 0, 0,.8);
  width: 100%;
  height: 100%;
  z-index: 1005;
  border: 1px solid var(--colGris);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s ease;
  opacity: 0;
  visibility: hidden;
}

.spanmodal{
  position: absolute;
  display: block;
  font-size: 1.2rem;
  width: 2rem;
  text-align: center;
  line-height: 2rem;
  border-radius: 1rem;
  color:#fff;
  left:2rem;
  top:2rem;
}

.botonFlotante{
	position: fixed;
	bottom: 3rem;
	right: 3rem;
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
	font-size: 2.5rem;
	color: var(--colBlanco);
	background: var(--colMenu);
	border-radius: 1.5rem;
	text-align: center;
}

.botonFlotante:hover{
	cursor: pointer;
	background: rgb(0,0,0,1);
}

.botonFlotante:hover::before {
  content: "NUEVO";
  position: absolute;
  font-size: 1rem;
  font-weight: bolder;
  color: var(--colNegro);
  text-align: center;
  width: 100%; /* Hace que el texto ocupe el ancho completo del botón flotante */
  top: 50%;
  left: 50%; /* Centra horizontalmente */
  transform: translate(-55%, 30%); /* Centra vertical y horizontalmente */
}

.spanmodal:hover{
  cursor: pointer;
  background: rgb(0,0,0,1);
}

.spanmodal:hover::before {
  content: "CERRAR";
  position: absolute;
  font-size: .8rem;
  color: #fff;
  padding: 5px;
  display: block;
  top: 1.8rem;
  left: -1rem;
}

.lbl{
	display: flex;
	text-align: right;
	line-height: 1rem;
	font-size: .6rem;
	color: var(--colGris);
}

.botonAceptar, .botonCancelar, .botonBuscar{
	width: 6rem;
	padding: .5rem;
	border-radius: .25rem;
	text-decoration: none;
	font-size: .8rem;
	font-weight: 700;
}

.botonAceptar:hover, .botonCancelar:hover, .botonBuscar:hover{
	cursor: pointer;
}

.botonBuscar{
	background: var(--color5);
	border: 1px solid var(--color2);
	color: var(--color2);
}

.botonBuscar:hover{
	background: var(--color2);
	color: var(--color5);
}

.botonAceptar{
	background: var(--color5);
	border: 1px solid var(--color2);
	color: var(--color2);
}

.botonAceptar:hover{
	background: var(--color2);
	color: var(--color5);
}

.botonAceptar:disabled, .botonAceptar:disabled:hover {
	background: var(--color4);
	border: 1px solid var(--colGris);
	color: var(--colGris);
}

.botonCancelar{
	background: var(--color5);
	border: 1px solid var(--color1);
	color: var(--color1);
}

.botonCancelar:hover{
	background: var(--color1);
	color: var(--color5);
}

.botonQr{
	background: var(--color5);
	border: 1px solid var(--color3);
	padding: .25rem;
	height: 4rem;
	width: 4rem;
	cursor: pointer;
	border-radius: .25rem;
	text-decoration: none;
	font-size: .8rem;
	font-weight: 700;
	background-image: url("../img/Qr.webp");
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
	transition: all ease 1.5s;
}

.botonQr:hover{
	background: var(--color6);
	background-image: url("../img/Qr.webp");
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;	
}

.botonImpresora{
	background: var(--color5);
	border: 1px solid var(--color3);
	padding: .25rem;
	height: 4rem;
	width: 4rem;
	cursor: pointer;
	border-radius: .25rem;
	text-decoration: none;
	font-size: .8rem;
	font-weight: 700;
	background-image: url("../img/imprimir.webp");
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
	transition: all ease 1.5s;	
}

.botonImpresora:hover{
	background: var(--color7);
	background-image: url("../img/imprimir.webp");
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;	
}

.botonImprimir, .botonEditar{
	appearance: none;
	display: flex;
  width: 2rem;
  height: 2rem;
  padding:  .3rem;
  cursor: pointer;
  font-size: 1rem;
  border: 1px solid var(--color3);
  border-radius: .5rem;
  background:none;
  transition: all ease 1.5s;
}

.botonImprimir:hover{
	background: var(--color6);	
}

.botonEditar:hover{
	background: var(--color7);
}

/* Estilo para el contenedor del formulario */
    .filtroListado {
        text-align: center; /* Alinea el contenido al centro */
    }

    /* Estilo para el botón del input file */
    .botonArchivo {
        position: relative;
        overflow: hidden;
        padding: 10px; /* Ajusta el espacio interno del botón */
        background-color: #3498db; /* Color de fondo del botón */
        color: #000; /* Color del texto del botón */
        border: none; /* Elimina el borde del botón */
        border-radius: 5px; /* Añade esquinas redondeadas al botón */
        cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    }

    /* Estilo para el texto que muestra el nombre del archivo */
    .nombreArchivo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10px; /* Ajusta el espacio interno del texto */
        box-sizing: border-box;
    }

    /* Estilo para ocultar el input file */
    #archivo_csv {
        display: none;
    }


.botonArchivo{
	appearance: none;
	display: flex;
  width: auto;
  max-width: 95%;
  height: 4rem;
  padding:  .5rem;
  cursor: pointer;
  font-size: 1rem;
  border: 1px solid var(--color3);
  border-radius: .5rem;
  background:none;
  transition: all ease 1.5s;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.titulo{
	width: 100%;
	background: var(--color1);
	color: var(--colBlanco);
	height: 2.5rem;
	font-size: 1.5rem;
	line-height: 2.5rem;
	text-align: center;
}

.formProducto{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	width: 80%;
	max-width: 760px;
	margin: 0 auto;
	height: auto;
	background: #fff;
	border-radius: 	1rem;
	padding: 	1.25rem 1rem;
	gap: .3rem 5%;
}

.bloqueBotones{
	display: flex;
	width: 60%;
	margin: 1rem auto;
	flex-direction: row;
	justify-content: space-evenly;
}

.contenido{
	display: flex;
	width: 95%;
	margin: 0 auto;
	margin-top: 2rem;
	background: rgba(255,255,255,0.9);
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.5);
  padding: 1.5rem 0;
  flex-direction: column;
  margin-bottom: 4rem;
}

.contenido h4{
	text-align: center;
	padding: 1.75rem 0;
}

.actualizacionPrecios{
	flex-direction: row;
	justify-content: space-around;
}

.bloque1, .bloque2{
	display: flex;
	flex-direction: column;
	text-align: center;	
	border: 1px solid rgba(0,0,0,.5);
	border-radius: 1rem;
	padding: 1rem;
}

.filtros{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 1.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	gap: 1rem;
}

.filtro{
	position: relative;
	width: auto;	
}

.filtro:nth-child(1){
	width: 100%;
}

.grupoFiltro, .busqueda{
	display: flex;
	flex-direction: row;
	gap: .1rem;
}

.grupoFiltro{
	position: relative;
	width: 11rem;
	border: 1px solid var(--color4);
	border-radius:1rem;
	height: 1.75rem;
	padding: 0 1rem 0 .5rem;
	transition: all 2s ease;
}

.form-select, .form-control, .form-text, .form-fechas{
	display: flex;
	position: relative;
  height: 1.75rem;
  line-height: 1.75rem;
  width: 3.5rem;
  border: 1px solid var(--color4);
  background: none;
  outline: none;
  color: var(--color2);  
  font-size: .9rem;
  cursor:pointer;
  appearance: none;
  transition: all 2s ease;
  font-family: var(--fuente);
  background-color: none;
}

.form-select {
	border-radius: .25rem;
	padding: 0 1rem;
	z-index: 1;
	width: 100%;
	text-align: left;
}

.form-fechas{
	padding: 0 1rem;
	border-radius: 1rem;
	z-index: 1;
	width: 100%;
	text-align: left;
}

.form-text:focus-visible, .form-control:focus-visible, .form-select:focus-visible{
	background: var(--color6);
}

label{
	font-size: .9rem;
	color: var(--colGris);
}

.label{
	position: absolute;
	left: 1rem;
	top: .35rem;
}

.cantidad{
	width: 3.5rem;
	border:none;
}

.selrubro{
	border-radius: 1rem;
	padding: 0 0.3rem 0 4.2rem;
	text-align: left;
	width: 20rem;
}

.selvendedor{
	border-radius: 1rem;
	padding: 0 0.3rem 0 5.5rem;
	text-align: left;
	width: 20rem;
}

.listado{
	padding: 0 .75rem 0 .75rem;
}

.form-control{
	border-radius: 1rem;
	width: 20rem;
  padding: 0 0 0 2rem;
  text-align: left;
}

.form-text{
	border-radius: .25rem;
	padding: 0 .4rem;
	width: 100%;
}

.sombra:hover{
	box-shadow: 0px 2px 2px 1px var(--colSombra);
	background-color: none;
}

.sombre:disabled:hover{
	box-shadow: none;
}

.form-label{
	height: 1.75rem;
  width: 3rem;
  line-height: 1.75rem;
  color: var(--color2);  
  font-size: .9rem;
  font-family: var(--fuente);
}

.imgselprod{
	position: absolute;
  top: 1.4rem;
  right: .45rem;
  width: .8rem;
  background: none;
  z-index: 0;
}

.imgselregistros{
  position: absolute;
  bottom: .5rem;
  right: 4.3rem;
  width: .8rem;
  background: none;
  z-index: 0;
}

.imgselrubro{
	position: absolute;
  bottom: .5rem;
  right: 1rem;
  width: .8rem;
  background: none;
  z-index: 0;
}

.busqueda{
	width: 20rem;
	position:relative;
}

.busqueda img{
  position:absolute;
  top:.2rem;
  left: .2rem;
  width: 1.5rem;
  background: none;
}

.formCliente{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: auto;
	max-width: 80%;
	height: auto;
	background: var(--colBlanco);
	border-radius: 	1rem;
	padding: 	1.25rem 1rem;
	gap: 0.3rem 5%;
}

.fila{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
	width: 95%;
	gap: 5%;
	margin: 0 auto; 
	justify-content: space-between;
}

.grupo{
	display: flex;
	width: auto;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
}

.Buscar{
	width: 21.25%;
}

.ancho475{
	width: 47.5%;
}

.ancho20{
	width: 20%;
}

.ancho35{
	width: 35%;
}

.ancho60{
	width: 60%;
}

.grupo label{
  color: var(--gris-oscuro);
  font-size: .5rem;
  pointer-events: none;
  transition: 1s;
}

.mensaje-error{
  display:  block;
  font-size:  .5rem;
  padding:  .2rem;
  line-height:  .9rem;
  height: .9rem;
}

.codigo{
	width: 6rem;
	text-align: center;
}

.texto{
	width: 100%;
	text-align: left;
	padding: 0 .5rem;
} 

.descripcion{
		width: 25rem;
}

.rubro{
	text-align: left;
	width: 100%;
	padding: 0 .5rem;
}

.familia, .subfamilia{
	text-align: left;
	width: 100%;
	padding: 0 .5rem;
}

.existencia{
	text-align: center;
	width: 3rem;
	padding: 0 .5rem;
} 

.precio{
	text-align: right;
	padding: 0 .5rem;
}

.textolargo{
	padding: 0 .5rem;
	width: 100%;
	margin: 0;
	text-align: left;
}

.textomedio{
	padding: 0 .5rem;
	width: 100%;
	margin: 0 5%;
	text-align: left;
}

.codpostal{
	text-align: left;
	width: 100%;
	padding: 0 .5rem;
}

.telefono{
	text-align: left;
	width: 100%;
	padding: 0 .5rem;
}

.provincia{
	text-align: left;
	width: 100%;
	padding: 0 .5rem;
}

.cuit{
	text-align: left;
	width: 8rem;
}

.categoria{
	text-align: left;
	width: 11rem;
	padding: 0 .5rem;
}

.porcentaje{
	width: 4rem;
}

.orden, .cuit, .cajas{
	text-align: right;
	padding: 0 .5rem;
}

.orden{
	width: 5.8rem;
}

.cuit{
	width: 7.2rem;
}

.cajas{
	width: 5rem;
}

.operarios{
	width: 10rem;
	text-align: left;
	padding: 0 .5rem;
}

.comisionistas{
	width: 12rem;
	text-align: left;
	padding: 0 .5rem;
}

.fecha{
	text-align: left;
	width: 8rem;
	padding: 0 .5rem;
}

.tablaProductos, .tablaClientes, .tablaPedidos, .tablaCtaCte, .tablaEnvios, .tablaComprobantes, .tablaTransportes{
	margin: 0 auto;
	border: 1px solid var(--color3);
	border-collapse: collapse;
	font-size: .8rem;
	font-family: var(--fuente2);
}

.tablaProductos, .tablaClientes, .tablaPedidos, .tablaEnvios, .tablaTransportes{
	width: 95%;
}

.tablaCtaCte, .tablaComprobantes{
	width: 80%;
}


.alinear-centro{
  text-align: center;
}

.alinear-derecha{
  text-align: right;
}

.alinear-izquierda{
  text-align: left;
}

.tablaProductos caption, .tablaProductos td, 
.tablaClientes caption, .tablaClientes td, 
.tablaPedidos caption, .tablaPedidos td,
.tablaEnvios caption, .tablaEnvios td,
.tablaCtaCte caption, .tablaCtaCte td,
.tablaComprobantes caption, .tablaComprobantes td,
.tablaTransportes caption, .tablaTransportes td{
   padding: 0.25rem .25rem;
}

.tablaProductos th, .tablaClientes th, .tablaPedidos th, .tablaCtaCte th, .tablaEnvios th, .tablaComprobantes th, .tablaTransportes th{
	padding: 0.5rem .25rem;
	background: var(--color1);
	color: var(--color5);
}

.tablaProductos th:hover, .tablaClientes th:hover, .tablaPedidos th:hover, .tablaCtaCte th:hover, .tablaEnvios th:hover, .tablaComprobantes th:hover, .tablaProductos th:hover{
	cursor: pointer;
}

.tablaProductos th:nth-child(6):hover, .tablaProductos th:nth-child(7):hover, .tablaTransportes th:nth-child(4):hover, .tablaTransportes th:nth-child(5):hover{
	cursor: default;
}

.tablaProductos th:nth-child(6), .tablaProductos th:nth-child(7), .tablaClientes th:nth-child(6), .tablaTransportes th:nth-child(5) {
	border-right: none;
}

.tablaProductos th:nth-child(7), .tablaProductos th:nth-child(8), .tablaClientes th:nth-child(7), .tablaTransportes th:nth-child(6) {
	border-left: none;
}

.tablaProductos th, .tablaProductos td,
.tablaClientes th, .tablaClientes td,
.tablaPedidos th, .tablaPedidos td,
.tablaCtaCte th, .tablaCtaCte td,
.tablaEnvios th, .tablaEnvios td,
.tablaComprobantes th, .tablaComprobantes td,
.tablaTransportes th, .tablaTransportes td{
   border: 1px solid var(--color3);
}

.tablaClientes td:nth-child(1), .tablaClientes td:nth-child(3), .tablaProductos td:nth-child(1), .tablaProductos td:nth-child(4), .tablaProductos td:nth-child(5), 
.tablaProductos td:nth-child(6), .tablaCtaCte td:nth-child(1), .tablaCtaCte td:nth-child(3) {
	text-align: center;
}

.tablaClientes tbody tr:nth-child(even){
	background: var(--colTablaFondo);
}

.tablaClientes th:nth-child(3){
	width: 6.5rem;
}

.tablaClientes th:nth-child(6), .tablaClientes th:nth-child(7) {
	width: 2rem;
}

.tablaCtaCte td:nth-child(2), .tablaCtaCte td:nth-child(4), .tablaTransportes td:nth-child(2), .tablaTransportes td:nth-child(3){
	text-align: left;
}

.tablaProductos td:nth-child(5), .tablaTransportes td:nth-child(1), .tablaCtaCte td:nth-child(5), .tablaCtaCte td:nth-child(6){
	text-align: right;
}

.tablaProductos td:nth-child(6), .tablaProductos td:nth-child(7), .tablaClientes td:nth-child(6), .tablaTransportes td:nth-child(5) {
	border-right: none;
}

.tablaProductos td:nth-child(7), .tablaProductos td:nth-child(8), .tablaClientes td:nth-child(7), .tablaTransportes td:nth-child(6){
	border-left: none;
}

.tablaProductos tbody tr:nth-child(even){
	background: var(--colTablaFondo);
}

.tablaProductos tfoot th, .tablaProductos tfoot td {
   border-bottom: 0;
   text-align: center;
}

.tablaProductos th:nth-child(1){
   width: 10%;
}

.tablaProductos th:nth-child(2){
   width: 45%;
}

.tablaProductos th:nth-child(3){
   width: 25%;
}

.tablaProductos th:nth-child(4) {
	/*width: 8%;*/
}

.tablaProductos th:nth-child(5){
	width: 15%;
}

.tablaProductos th:nth-child(6), .tablaProductos th:nth-child(7), .tablaProductos th:nth-child(8){
	width: 2rem;
}

th.asc::after {
    content: '\25B2'; /* Representa una flecha hacia arriba con el código unicode */
    float: right; /* Alinea a la derecha del texto en el encabezado de la columna */
}

th.desc::after {
    content: '\25BC'; /* Representa una flecha hacia abajo con el código unicode */
    float: right;
}

.tablaPedidos th:nth-child(1), .tablaPedidos th:nth-child(3){
	width: 5%;
}

.tablaPedidos th:nth-child(2), .tablaPedidos th:nth-child(6), .tablaPedidos th:nth-child(8){
	width: 6%;
}

.tablaPedidos th:nth-child(4){
	width: 29%;
}

.tablaPedidos th:nth-child(6){
	/*width: 15%;*/
}

.tablaPedidos th:nth-child(9){
	border-right: none;
	width: 2rem;
}

.tablaPedidos th:nth-child(10){
	border-left: none;
	width: 2rem;
}

.tablaPedidos th, .tablaPedidos td {
   border: 1px solid var(--color3);
}

.tablaPedidos td:nth-child(1), .tablaPedidos td:nth-child(2), .tablaPedidos td:nth-child(3), .tablaPedidos td:nth-child(6), .tablaPedidos td:nth-child(8){
	text-align: center;
}

.tablaPedidos td:nth-child(4), .tablaPedidos td:nth-child(5), .tablaPedidos td:nth-child(7){
	text-align: left;
}

.tablaPedidos td:nth-child(9){
	border-right: none;
}

.tablaPedidos td:nth-child(10){
	border-left: none;
}

.tablaPedidos tbody tr:nth-child(even){
	background: var(--colTablaFondo);
}

.tablaPedidos tfoot th, .tablaPedidos tfoot td {
   border-bottom: 0;
   text-align: center;
}

.tablaPedidos th:nth-child(9):hover, .tablaPedidos th:nth-child(10):hover{
	cursor: default;
}

/* Tabla Comprobantes */
.tablaComprobantes tbody tr:nth-child(even){
	background: var(--colTablaFondo);
}

.tablaComprobantes th:nth-child(6){
	cursor: default;
}

.tablaComprobantes th:nth-child(1), .tablaComprobantes th:nth-child(2), .tablaComprobantes th:nth-child(4){
	width: 10%;
}

.tablaComprobantes th:nth-child(3){
	width: 32%;
}

.tablaComprobantes th:nth-child(5), .tablaComprobantes th:nth-child(6){
	width: 12%;
}

.tablaComprobantes th:nth-child(7){
	width: 14%;
}

.tablaTransportes tbody tr:nth-child(even){
	background: var(--colTablaFondo);
}

.tablaTransportes th:nth-child(1){
	width: 5%;
}

.tablaTransportes th:nth-child(2){
	width: 40%;
}

.tablaTransportes th:nth-child(3){
	width: 25%;
}

.tablaTransportes th:nth-child(4){
	width: 25%;
}

.tablaTransportes th:nth-child(5), .tablaTransportes th:nth-child(6){
	width: 2rem;
}

.muestraResultados{
	display: flex;
	align-items: center;
}

.img1{
	width: auto;
	height: 2rem;
	vertical-align: middle;
	display: inline-block;
	padding: .25rem;
}

.sinResultados{
	vertical-align: middle;
}

.tablaCtaCte th:nth-child(1), .tablaCtaCte th:nth-child(3), .tablaCtaCte th:nth-child(5), .tablaCtaCte th:nth-child(6){
	width: 10%;
}

.tablaCtaCte th:nth-child(2){
	width: 40%;
}

.tablaCtaCte th:nth-child(4){
	width: 20%;
}

/* Tabla Envios */

.tablaEnvios tbody tr:nth-child(even){
	background: var(--colTablaFondo);
}

.tablaEnvios th:nth-child(1){
	width: 8%;
}

.tablaEnvios th:nth-child(2), .tablaEnvios th:nth-child(3){
	width: 5%;
}

.tablaEnvios th:nth-child(4){
	width: 27%;
}

.tablaEnvios th:nth-child(5){
	width: 10%;
}

.tablaEnvios th:nth-child(7){
	width: 4%;
}

.tablaEnvios th:nth-child(9){
	border-right: none;
	width: 2rem;
}

.tablaEnvios th:nth-child(10){
	border-left: none;
	width: 2rem;
}

.tablaEnvios td:nth-child(1), .tablaEnvios td:nth-child(3){ 
	text-align: center;
}

.tablaEnvios td:nth-child(2){ 
	text-align: right;
}

.tablaEnvios td:nth-child(4), .tablaEnvios td:nth-child(5), .tablaEnvios td:nth-child(6), .tablaEnvios td:nth-child(8){ 
	text-align: left;
}

.tablaEnvios td:nth-child(7){ 
	text-align: right;
}

.tablaEnvios td:nth-child(9){
	border-right: none;
}

.tablaEnvios td:nth-child(10){ 
	border-left: none;
}

.paginacion{
  display: flex;
  width: 100%;
  margin-top: 1rem;
  flex-direction: column;
  justify-content: space-evenly;
  align-content: center;
}

.lbl-total{
  text-align: center;
  display: block;
  margin-top: .5rem;
}

.nav-paginacion{
  display: flex;
  flex-wrap: wrap;
  margin-top: .6rem;
  justify-content: space-evenly;
  width: 100%;
  padding: 0;
}

.pagination{
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  height: 2.5rem;
  padding: .25rem 1.2rem;
  text-decoration: none;
  list-style: none;
}

.page-item a:hover{
  /*border: 1px solid var(--colPaginacionBorde);*/
  color: var(--color1);
}

.active a{
  /*border-radius: 1px solid var(--colPaginacionBorde);*/
  color: var(--colBlanco);
  background: var(--colGrisMedio);
  font-weight: 700;
}

.active a:hover{
  color: var(--colBlanco);
  cursor:default;
}

.page-link {
  display: inline-block;
  text-decoration: none;
 	padding: 0 0rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 1.2rem;
  color: var(--colNegro);  
  border-right: 1px solid var(--colGrisMedio);
}

.Ultimo {
	border-right: none;
}

.areaCarga{
	margin: 0 auto;
	width: 60%;
	border: 2px dashed gray; 
	padding: 20px;
	text-align: center;
}

.cargando{
	display: none;
	position: fixed;
	margin: 0 auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
	z-index: 1000;
}

.loader {
	position: absolute;
  width: 5rem;
  height: 5rem;
  top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
}

.loader::before {
 content: "";
 box-sizing: border-box;
 position: absolute;
 width: 5rem;
 height: 5rem;
 border-radius: 50%;
 border-top: 2px solid var(--colBlanco);
 border-right: 2px solid transparent;
 animation: spinner8217 0.8s linear infinite;
}

#content{
	position: relative;
	height: auto;
	min-height: 6rem;
}

.loader2 {
	position: absolute;
  width: 5rem;
  height: 5rem;
  top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
}

.loader2::before {
 content: "";
 box-sizing: border-box;
 position: absolute;
 width: 5rem;
 height: 5rem;
 border-radius: 50%;
 border-top: 2px solid var(--colGris);
 border-right: 2px solid transparent;
 animation: spinner8217 0.8s linear infinite;
}

@keyframes spinner8217 {
 to {
  transform: rotate(360deg);
 }
}

.filtroListado{
  margin: 0 auto;
  width: 20rem;
  margin-bottom: 1rem;
}

#descarga{
  display: flex;
  display: 60%;
  margin: 0 auto;
  flex-direction: row;
  justify-content:space-around;
}

.descarga{
  appearance: none;
  width: 6rem;
  height: auto;
  margin: 2rem;
  padding:  1rem;
  cursor: pointer;
  font-size: 1rem;
  border: 1px solid var(--color3);
  border-radius: .5rem;
  background:none;
  transition: all ease 1.5s;
}

.descarga:hover{
  box-shadow: 0rem .2rem .3rem var(--colSombra);
}

.descarga:disabled{
	background: var(--colGris);
}

.descarga:disabled:hover{
	cursor: default;
	box-shadow: none;
}

.col{
	display: flex;
	flex-direction: column;
	align-content: center;
}

.botones{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-content: space-around;
}

.dataPedido{
	display: flex;
	line-height: 1.25rem;
	text-align: left;
	margin: .5rem 10%;
	width: 80%;
	padding: .5rem;
}

.grupoOperario{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-content: space-around;
}

/* Estilos para el botón cuando está deshabilitado */
input:disabled {
  color: var(--colGrisMedio);
  background-color: var(--colGris); /* Cambia el color de fondo cuando el botón está deshabilitado */
}

/* Estilos para el botón cuando no está deshabilitado y el cursor está sobre él (hover) */
input:disabled:hover {
  background-color: var(--colGris); 
  color: var(--colGrisMedio);
}

input:disabled:hover, select:disabled:hover {
	cursor: default;
}

select:disabled{
	color: var(--colGrisMedio);
	background: var(--colGris);
}

input.valido, select.valido{
  border: 1px solid var(--verde);
}

input.invalido, select.invalido{
  border: 1px solid var(--rojo);
}

input.invalido:disabled, select.invalido:disabled{
	border: 1px solid var(--colGris);
}

.filtrados{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	width: 40%;
	max-width: 350px;
	gap: 2rem 1rem;
	border: 1.5px solid var(--colGrisMedio);
	border-radius: .75rem;
	padding-bottom: 2rem;
	margin-bottom: 1rem;
	overflow: hidden;
}

.grupofiltrados{
	position: relative;
	margin: 0;
	flex-direction: column;
}

.fondocol{
	width: 100%;
	background-color: var(--colGrisMedio);
	-webkit-text-stroke: .5px var(--colBlanco);
	color: transparent;
	text-align: center;
	line-height: 5rem;
}

@media screen and (max-width: 1100px){
	html{
		font-size: 14px;
	}
}

@media screen and (max-width: 800px){
	html{
		font-size: 13px;
	}

	.cantidadPedidos{
		padding: 0;
		text-align: center;
	}

	.PedPendientes{
		width: 45%;
	}
}

@media screen and (max-width: 700px){
	.tablero{
		width: 40%;
	}

	.infoPedidosFicha{
		width: 33%;
	}
	.infoPedidosGrafico{
		order: 2;
		width: 65%;
	}

	.cantidadPedidos{
		padding-right: 1rem;
		text-align: right;
	}
}

@media screen and (max-width: 600px){
	html{
		font-size: 12px;
	}

	.nombreDeudor{
		width: 60%;
	}
}

@media screen and (max-width: 560px){
	html{
		font-size: 11px;
	}

	.PedPendientes{
		width: 85%;
	}
}