/*
	LISTAS.CSS
	Gabriel Gómez Fiori
	Creado 29 Agosto 2020
	Para diseño visual listas de precios Lubricantes PSM
*/


a:link, a:visited, a:active {
    text-decoration: none;
	color: #5020050;
	
}


.TituloListaPrecio {
	/*
	justify-content: center;
	align-items: center;
	flex-direction: row wrap;
	*/
	
	color: #EEE;
	
	font-family: Roboto, Tahoma, Arial, Helvetica;
	font-size: 1.1rem;
	text-align: center;
	padding: .6vmax;
	text-decoration: none;
	
	background: green;
	border: 1px solid gray;
	border-radius: 6px;
	margin-bottom: 10px;
}

.ListaContenedor {
	flex-basis: content;
	display: flex;
	flex-direction: column;
	margin-top: 100px;
	border: 1px solid gray;
	border-radius: 6px;
	/*
	width: 95vw;
	*/
	max-width: 40rem;
	height: auto;
	padding: .6vmax;
	background: white;
}

.ListaRenglon {
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row wrap;
	/* width: 90vw;
	max-width: 640px;
	*/
	text-align: left;
	color: #5020050;
	border-radius: 8px;
	margin: .7vw;
	padding: 6px;
	background: #DEDEDE;
	font-family: Roboto, Tahoma, Arial, Helvetica;
	/*font-size: 1.1vmax;*/
	font-size: 1.1rem;
	margin: 6px;
}

.ContenedorCampos {
	/* width: 100vw; */
	max-width: 90%;
	min-width: 300px;

}

.Logotipo {
	width: 4rem;
	max-width: 4rem;
	min-width: 2.5rem;
	/*
	width: 60px;
	max-width: 80px;
	min-width: 50px;
	max-height: 50px;
	mix-height: 30px;
	*/
	border: 0px; 
	padding-right: 10px;
	margin: 0px:
}

.ListaCampoNumero {
	width: 2vw;
	border-right: 1px solid gray; 
	padding-left: 10px;
	padding-right: 15px;
}

.ListaCampoNombre, a:link, a:visited, a:active {
	padding-left: 0px; 
	wrap: wrap;
	color: navy;
	text-decoration: none;
	/*
	border: 1px solid navy; 
	width: 80%;
	font-size: calc(1em + .5vw);
	padding-right: 15px;
	*/
}

.ListaCampoCargado {
	font-size: calc(.6em + .2vw);
	padding-left: 15px;
	text-align: left;
}

/*
====== FORMULARIO DE ACCESO ======
*/

.ContenedorFormularioAcceso {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 0 auto;
	background-color: #ccc;
	border-radius: 8px;
	
	/*
	width: 25rem;
	width: 65%;
	max-width: 800px;
	min-width: 300px;
	font-size: calc(1em + 1.5vw);
	border: solid 1px #555;
	*/
}

.FormularioAcceso {
	display: flex;
	flex-direction: column;
	color: #555;
	padding: 1vw;
	/* 
	font-family: Roboto, Verdana, Tahoma, Arial;
	font-size: 1em;
	width: 95%;
	border: solid 1px navy; 
	*/
}

.TituloFormulario {
	font-family: Roboto, Verdana, Tahoma, Arial;
	font-size: calc(1em + .4vw);
	margin-top: 1rem;
	margin-bottom: 1vw;
	padding-top: 1vw;
	text-align: center;
}

.TituloCampo {
	font-family: Roboto, Verdana, Tahoma, Arial;
	font-size: calc(1em + .4vw);
	width: 3vw; 
	max-width: 3vw ;
	min-width: .5vw;
	margin-left: 1.5vw;
	margin-top: 1vw;
}

.campo {
	display: flex;
	padding: 10px;
	width: 90%;
	border: solid 1px #ccc;
	border-radius: 8px;
	outline: none;
	font-size: calc(1em + .8vw);
	margin: 1vw;
}

.boton {
  margin-top: 20px;
  border: solid 2px #bbb;
  border-radius: 8px;
  color: #dedede;
  background-color: green;
}

.campo:focus {
	border: solid 2px green;
}

.centrado {
	text-align: center;
}
/*
====== FIN FORMULARIO DE ACCESO ======
*/


.PieDePagina {
	display: flex;
	/*
	flex-basis: content;
	flex-basis: auto;
	*/
	flex-direction: row;
	flex-wrap: wrap;
	color: #555;
	font-family: Roboto, Verdana, Tahoma, Arial;
	/* font-size: calc(12px + 1.5vw); */
	/* font-size: max(1em, 12px); */
	font-size: 1vmax; 
	/* font-size: 2vmin; */
	padding: 1vw;
	width: 95%;
	border:  1px solid gray;
	border-radius: 6px;
	background:#DEDEDE;
}

.copyright {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	color: #555;
	font-family: Roboto, Verdana, Tahoma, Arial;
	font-size: .8vmax; 
	padding: 1vw;
	width: 95%;
	border:  0px solid gray;
}

.proporcional {
	flex: 1 1 auto;
}