/*Se inicializa*/
* { 
	border:0;
	margin: 0; 
	padding: 0; 
}

/*Cuerpo de toda la página*/
body{
	/*background: #EFECEC;*/
	color: #000000;
	font-size:  16px;
	font-family:"Times New Roman";
	
}

/*encabezado*/
header{
	background:#EFECEC;
	margin: 0 auto;
	padding: 0.5em 0.5em 0em 0.5em;
	text-align: center;
}


/*Propiedades de la imagen del logo*/
.imglogo{
	max-width: 100%;
	border-radius: 0.5em;
}



/*       menu          */
/*---------------------------------------------*/
/*Para una lista desordenada*/
#menulista{
	list-style: none;
	margin:0.5em; /*Por seguridada para que funcione en todos los navegadores*/
	padding: 0; /*Por seguridada para que funcione en todos los navegadores*/
}

/*Para los elementos de la lista*/
#menulista li {
	margin-bottom: 5px;
	display: inline-block;
}

#menulista li a {
	color: gray;
	border: 1px solid gray;
	border-radius: 0.5em;
	box-shadow: 5px 5px 5px #888888;
	text-decoration: none; 
	display:block;
	text-align: center;
	/*width: 100px;*/
}

#menulista li a:hover{
	background: white;
	color: blue;
}

#a_id_ubica{
	text-decoration: none; 
}

#a_id_ubica:hover{
	background: white;
	color: blue;; 
}



/*section de el formulario*/
/*---------------------------------------------*/
.contenedorformulario{
	background:#EFECEC;
	margin: 5px;
	text-align: center;
}

/*margen de el formulario*/
fieldset{
	border: 0.1em solid red;
	border-radius: 0.5em;
}


/*Etiqueta del formulario (fieldset) */
legend{
	color:red;
	font-weight: bold;
}


/*Etiqueta de los campos del formulario*/
.etiqueta{
	
	color:#1E500B;
	font-weight: bold;
}

/*Camos del formulario*/
.caja{
	font-weight: bold;
	border: 0.1em solid green;
	border-radius: 0.5em;
	width: 8em;
}



/*Consulta trae datos tabla*/
/*-----------------------------------------------*/
.precio{
	color:green;
	font-weight: bold;
	font-size: 20px;
}

.descripcion{
	color:blue;
	font-weight: bold;
}

.presentacion{
	font-weight: bold;
}


.presentacion,.precio{
	display: inline-block;
}

.inventario,.inventario_neg{
	text-align: center;
	border-radius: 30%;
	width: 2em;
	float: right;
	font-weight: bold;
	color: white;
	background: #E2DEDE;

}
.inventario_neg{
	color: red;
	font-size: 3em;
}



.minmaxubica{
		color:#CECBCB;
		font-weight: bold;
		/*color: white;
		background: #E2DEDE;*/	
}

.minmaxubica{
		color:#CECBCB;
		font-weight: bold;
		/*color: white;
		background: #E2DEDE;*/	
}

.a_minmaxubica{
		color:#CECBCB;
		font-weight: bold;
		/*color: white;
		background: #E2DEDE;*/	
}


/*  presentacion de la suma de operaciones */
/* ----------------------------------------*/

#contenedorOperaciones{
	/*background:gray;*/
	margin: 5px auto;
	padding-left: 5px;
	text-align: right;
	width: 60%;
	border: 0.1em solid red;
	border-radius: 0.5em;
		
}

.concepto5{
	font-size: 3em;
	color: green;
	font-weight: bold;
	background:white;
	border-radius: 0.25em;
	box-shadow: 5px 5px 5px #888888;
}

.concepto6{
	font-size: 1.5em;

}


.concepto8{
	border: 0.1em solid blue;
	display: inline-block;
	font-size: 3em;
	width: 80%;
}

.concepto9{
	display: inline-block;
	width: 15%;
}


.concepto10,.concepto11{ /*La llave de la venta y el indice no se muestran*/
	color: green;
	display: none;
	
}
.concepto35{
	display: none;
}


#infoventa,#idmenuventas,#idconsuope,#id_revisado{
	display: none;;
}

.nomostrar{
	display: none;
}


.colubica{
	margin: 5px;
	text-align: center;
	/*vertical-align: top;*/ /*coloca las celdas en medio del elemento padre*/
}
	.imgprodubica{
		max-width: 95%; /*ancho máximo de la imagen 100 px*/
	    text-align: center;
	    border-radius:10px;
	    
	    margin:10px;
	}

.ubicolorNARANJA{
	background: #FF6633;
	font-size:3em;
	font-weight: bold;
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
}

.ubicolorAMARILLO{
	background: #FFFF00;
	font-size:3em;
	font-weight: bold;
	border-radius: 5px;
}

.ubicolorAZUL{
	background: #A6FAF2;
	font-size:3em;
	font-weight: bold;
	border-radius: 5px;
}

.ubicolorVERDE{
	background: #00923F;
	font-size:3em;
	font-weight: bold;
	border-radius: 5px;
}


.ubicolorMORADO{
	background:#CFB8E6;*/
	font-size:3em;
	font-weight: bold;
	border-radius: 5px;
}

.ubicolorROSA{
	background: #FF99BE;*/
	font-size:3em;
	font-weight: bold;
	border-radius: 5px;
}

.conteo1,.conteo2{
	background:#E3CEF6;
	width:2em;
	font-size:1.5em;
	font-weight: bold;
	color: green;
	text-align:right; 
}

.sumconteo{
	background: #EFECEC;
	width:2em;
	font-size:1.5em;
	font-weight: bold;
	color: blue;
	text-align:right;
	box-shadow: 3px 3px 3px #888888;	
}

.diferencia,.diferencia_nega,.diferencia_posi,.diferencia_cero{
	background: #EFECEC;
	text-align:right;
	width:3em;
	font-weight:bold;
}

.diferencia_nega{
	color: red;
}

.diferencia_posi{
	color: green;
}

.diferencia_cero{
	color: black;
}

.fixocotlan{
	color:green;
	font-size: 3em;
	font-weight: bold; 
}


/*Formato amplio*/
/*-------------------------------------------------*/
/*De 400px en adelante*/
@media(min-width:600px){
	.limenu{
		width: 32%;
		margin: 0 auto;
	}

	/* divs de los datos consultados en tabla */
	/*----------------------------------------*/
	.tipotabla{
		margin: 5px; /*margen*/		
	}

	.tipofilas{
		margin: 2px; /*margen*/
		border: 1px solid blue; /*ancho tipo y color del marco*/			
	}

/*/////////////////////////////////////////////////*/
	.tipotabla2{
		margin: 0em auto;
		width: 50%;*/
	}

	.tipofilas2{
		margin-bottom:1px;
		border: 1px solid blue;
		text-align: center;
	}

	.opsuma{
		display: inline;

	}

/*///////////////////////////////////////////////////*/
	.tipocolumnasX{
		margin: 5px;
		display: inline-block; */ /*despliega las columnas en una sola fial */
		vertical-align: top; /*coloca las celdas en medio del elemento padre*/
	}


	.tipocolumnas{
		display: inline-block;  /*despliega las columnas en una sola fial */
		vertical-align: middle; /*coloca las celdas en medio del elemento padre*/
	}

	#columna1{
		width: 66%; /*ancho del elemento con respecto al padre*/
		margin-left: 3px;
	}

	#columna2{
		width: 14%; /*ancho del elemento con respecto al padre*/
	}

	#columna3{
		width: 17%;/* width:  toma el resto del ancho del elemento padre */  
	}


	#columna21{
		width: 5%;
	}

	#columna22{
		width: 15%;
	}

	#columna23{
		font-weight: bold;
		width: 49%;
	}

	#columna24{
		font-weight: bold;
		color: blue;
		width: 13%;
		text-align: right;
	}	

	#columna25{
		width: 13%;
		text-align: right;
	}



	#columna31{
		width: 56%; /*ancho del elemento con respecto al padre*/
		margin-left: 3px;
	}

	#columna32{
		width: 14%; /*ancho del elemento con respecto al padre*/
	}

	#columna33{
		width: 15%;/* width:  toma el resto del ancho del elemento padre */  
	}

	#columna34{
		color: blue;
		font-weight: bold;
		font-size: 3em;
		width: 8%;/* width:  toma el resto del ancho del elemento padre */  
		text-align: right;
	}



	.mfila0{

	}

	.mfila1{
		/*color: blue;*/
		background:white;
	}


	.div_imgprod{
		text-align: center;
	}

	/*imagen del producto de la consulta*/
	.imgproducto{
	max-width: 100px; /*ancho máximo de la imagen 100 px*/
	border-radius: 1em;	/*borde radio*/
	}


	.conteo1,.conteo2,.sumconteo,.diferencia{
		width:3em;

	}


}
	
/* Formato angosto */
/*-------------------------------------------------------*/
/*Para dispositivos menores a 400 px*/	
@media(max-width:599px){

	#menulista li{

		display: block;
	}



	/* div datos traidos consulta */
	/*---------------------------*/
	.tipotabla{
	background:gray;	
	}


	.tipofilas{
		margin: 2px; /*margen*/
		margin-bottom: 10px;
		background: #EFECEC;
		padding: 0.3em;
		border: 0.2em solid blue; /*ancho tipo y color del marco*/		
		border-radius: 1em;		
	}

	.mfila0,.mfila1{
		margin: 2px; /*margen*/
		margin-bottom: 10px;
		background: #EFECEC;
		padding: 0.3em;
		border: 0.2em solid blue; /*ancho tipo y color del marco*/		
		border-radius: 1em;	
	}


	#columna23{
		font-weight: bold;
	}

	#columna24{
		font-weight: bold;
		color: blue;
	}	


	#columna34{
		color: blue;
		font-weight: bold;
		font-size: 3em;
		text-align: center;
	}



	.imgproducto{
	max-width: 100%; /*ancho maximo imagen todo lo ancho del dispositivo*/
	border-radius: 2em; /*bode radio*/
	}

	.marca, .codigo, .clave, .clasificacion{
		display: inline-block;
		width: 25%;
		text-align: center;
		color: gray;
		margin-top:0.8em;
	}

	.marca{
		text-align: left;
	}

	.clasificacion{
		text-align: right;
	}

	.inventario{
		font-size: 0.7em;
		background: blue;
		/*color: white;*/
	}


	#contenedorOperaciones{
	/*background:gray;*/
		width: 95%;	
	}


}