/*========================================================================*/
/*________Modulo: DESPLEGABLES________________________*/
	/*_.dropdown_f_contenedor_*/
		/*_Tipo Dropdown - No necesita especificar id del desplegable_*/
			/*Notas:
				Similar a Dropdown (bootstrap)
				-no necesita especificar id del desplegable.
				-Necesita class de contenedor.
				Estructura:
					.dropdown_f_contenedor.open{									//para que Js interprete que es contenedor de par .desplegable/.desplegador; El open va en el contenedor del grupo.
						a.desplegador{ }
						.desplegable(.despleg_f_lista1){	//.desplegable para ser desplegado por .desplegador; .despleg_f_lista1 si es un 'ul' puede ir en mismo elemento para definir el estilo del ul; 
							li{}
							li.dropdown_f_contenedo{ ... }					//otro grupo desplegable anidado
						}
					}

					.dropdown_f_contenedor.autoCierraResto
						-para que al abrir uno se cierren todos los demas dentro del mismo contenedor general (el que tenga .autoCierraResto), salvo los padres del actualmente seleccionado)
			*/
			/*class para JS: 'dropdown_f_contenedor'*/
			/*_/General_*/
				/*Contenedor*/
					.dropdown_f_contenedor{
						/*overflow: hidden; trae problemas si elementos estan dispuestos de otra forma (flexbox en grilla por ej)*/
					}
					.dropdown_f_contenedor.open{
					}
				/*Desplegador*/
					.dropdown_f_contenedor .desplegador{
						display: block;
						overflow: visible;/*por si algun icono va con marign neg, por un padding de ancestro*/
						cursor: pointer; /*para q tome aunque no tenga href*/
					}
					.dropdown_f_contenedor .desplegador:after{
						content: '';
						clear: both;
						display: block;
					}
				/*Desplegable*/
					.dropdown_f_contenedor .desplegable{/*div*/
						overflow: hidden;
						/*display: none;*/
						height: 0;/*para que inicie cerrado si js tarda. igual js le aplica 0 a altura y a padding vertical si inicia cerrado*/
						/*height: calcular por js para que tenga altura final. por css solo funciona para 1 nivel de anidamiento de desplegables (pq no puede calcular la altura si no sabe cuantos niveles abiertos o cerrados hay dentro). sino usar display block/none*/
						/*Si hay padding, van en .desplegable sin .open. luego js lo toma y lo quita cuando no esta en open y lo devuelve al estar en open*/

						/*transicion*/
						/*lo manejo por evento js
						-moz-transition: height .3s ease-out, width .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
						-webkit-transition: height .3s ease-out, width .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
						transition: height .3s ease-out, width .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
						*/
					}
					.dropdown_f_contenedor.open .desplegador > .ico{
					}
					/*Estilo flechita*/
						.dropdown_f_contenedor .desplegador > .ico{
							/*con imagen (como .despleg_f_lista1)*/
								display: block;
								width: 1rem;
								height: 1rem;
								background-size: contain; 
								background-image: url('../img/listDespl_triangArr.svg');
								background-repeat: no-repeat;
								background-position: 50% 50%;
							/*/*/
						}
						.dropdown_f_contenedor.open > .desplegador > .ico{
							/*con imagen (como .despleg_f_lista1)*/
								background-image: url('../img/listDespl_triangAbj.svg');
						}
					/*/*/
					.dropdown_f_contenedor.open .desplegable{/*quite el > entre .opepn y .desplegable para que admita texto activo o solo icono*/
						/*height: auto;*/
						/*display: block;*/
						height: auto;/*JS la calculara por js para que aplique la transicion al usar un valor fijo en px y no auto*/
						/*Si hay padding, van en .desplegable sin .open. luego js lo toma y lo quita cuando no esta en open y lo devuelve al estar en open*/
					}
			/*_/General_*/
			
			/*_Bloques desplegables - .dropdown_f_contenedor.despleg_f_bloques1_*/
				/*_Estilo grafico de cada bloque tipo_*/
					/*Contenedor*/
						.dropdown_f_contenedor.despleg_f_bloques1{
							border: 1px solid #CFCFCF;
							margin-bottom: 1rem;
						}
					/*Desplegador*/
						.dropdown_f_contenedor.despleg_f_bloques1 .desplegador{
							background-color: #CFCFCF;
							color: white;
							padding: .5em .8em;
						}
						.dropdown_f_contenedor.despleg_f_bloques1 .desplegador > *{
							float: left;
							margin: 0;
						}
						.dropdown_f_contenedor.despleg_f_bloques1 .desplegador > .ico{ /*flecha para abrir*/
							float: right;
						}

						/*Estilo de flechita*/
							/*Ver: General*/
							.dropdown_f_contenedor.despleg_f_bloques1 .desplegador > .ico{
									/*Con imagen: Ver: General*/
									/*con border, sin imagen*/
										/*x content: '';*/
										/*vertical-align: middle;
										display: inline-block;
										border-style: solid;
										border-color: transparent;
										border-top-color: white;
										border-width: .4em .4em 0 .4em;*/
							}
							.dropdown_f_contenedor.despleg_f_bloques1.open > .desplegador > .ico{
								/*Con imagen: Ver: General*/
								/*con border, sin imagen*/
									/*border-top-color: transparent;
									border-bottom-color: white;
									border-width: 0 .4em .4em .4em;*/
							}
						/*/*/
					/*/*/
				/*Desplegable*/
				/*/*/
			/*_/Bloques desplegables - .dropdown_f_contenedor.despleg_f_bloques1_*/
		
			/*_Bloques desplegables - .dropdown_f_contenedor.despleg_f_bloques1b*/
				/*_Estilo grafico de cada bloque tipo_*/
					/*Contenedor*/
						.dropdown_f_contenedor.despleg_f_bloques1b{
							margin-bottom: 1rem;
							padding-left: 2.4rem;/*ancho + padding-right + margin-right de .ico*/
						}
					/*Desplegador*/
						.dropdown_f_contenedor.despleg_f_bloques1b .desplegador{
							/*padding: .5em .8em;*/
							font-family: arial;
							font-weight: bold;
							font-style: normal;
							font-size: 1rem;									
							margin-left: -2.4rem;/*mismo que padding-left de contenedor*/
							margin-bottom: .5rem; /*separa de desplegable*/
						}
						.dropdown_f_contenedor.despleg_f_bloques1b .desplegador > *{
							float: left;
							margin: 0;
						}
						.dropdown_f_contenedor.despleg_f_bloques1b .desplegador .ico{/*.desplegador.ico_interrogacionCuadrito*/
							display: block;
							width: 1.2rem;
							height: 1.2rem;/*incluye .ico dentro, abajo sobresaldra*/
							overflow: visible;
							/*box-sizing: content-box;*/
							padding-right: .5rem;
							margin-right: .5rem;
							border-right: 1px solid gray;
							background-image: url('../img/ico_interrogacionCuadrito.svg');
							background-color: transparent;
							background-repeat: no-repeat;
							background-position: 0 0%;
							background-size: 1.2rem 1.2rem;/*no uso contain pq tomaria padding como parte del area*/
							overflow: visible;
						}
						/*Estilo de flechita*/
							/*Ver: General*/
							.dropdown_f_contenedor.despleg_f_bloques1b .desplegador .ico:before{
								display: block;
								content: '';
								position: relative;
								top: 1.3rem;/*desplaza sin aumentar altura de contenedor*/
								margin-left: auto; margin-right: auto;
								width: 1rem; /*mismo que .ico_interrogacionCuadrito*/
								height: 1rem;
								/*cambia imagen flecha*/
								background-image: url('../img/flechaAngulo-abj-gris.svg');
								background-repeat: no-repeat;
								background-position: 50% 50%;
								background-size: 70%;
							}
							.dropdown_f_contenedor.despleg_f_bloques1b.open .desplegador .ico:before{
								background-image: url('../img/flechaAngulo-arr-gris.svg');
							}
						/*/*/
					.dropdown_f_contenedor.despleg_f_bloques1b .desplegable{
						/*padding-left: calc( 1rem + .5rem );/*ancho + padding-right de .ico*/
						clear: both;
						margin: 0;
					}
					/*/*/
				/*Desplegable*/
				/*/*/
			/*_/Bloques desplegables - .dropdown_f_contenedor.despleg_f_listaIconosYTexto*/

			/*_Lista desplegable - .dropdown_f_contenedor.despleg_f_lista1_*/
				/*Nota:
					.dropdown_f_contenedor va en cada li, para funcionalidad sobre su par .desplegador/.desplegable,
					.despleg_f_lista1 va en los ul, para dar estilo grafico a toda la lista
				*/
				/*Estilo lista (gral, parte no desplegable)*/
					.despleg_f_lista1{/*ul*//*nivel 1*/
						margin: 0;
						padding: 0;
						list-style-type: none;
						list-style-position: outside;
						overflow: hidden;
						clear: both;
					}
						
					.despleg_f_lista1 .despleg_f_lista1{ /*nivel2 en adelante*/
						margin-left: 1.1rem;
						border-left-width: .15rem;
						border-left-style: solid;
						border-left-color: gray;
						overflow: visible;
					}
					.despleg_f_lista1 .despleg_f_lista1 .despleg_f_lista1{ /*niveles de 3 en adelante*/
						margin-left: 2.4rem;
					}	
						
					.despleg_f_lista1 > li{
						margin: 0;
						padding: 0;
						/*padding-bottom: .3em;
						padding-top: .3em;*/
						/*borde se usa en 2do <a> del li*/
						overflow: hidden;
					}
					.despleg_f_lista1 .despleg_f_lista1 > li{ /*niveles de 1 en adelante*/
						margin-left: -.25rem;/*mismo que extra agregado en ul padre, asi superpone el borde izq como linea descendente sobre la que poner los bullets*/
					}
						.despleg_f_lista1 > li,
						.despleg_f_lista1 > li > a{
							color: gray;
							line-height: 1.8; /*si uso pading bottom, al desplegarse el padding se transfiere al final del li, quedando poco espacio entre el texto y el ul hijo*/
						}
						.despleg_f_lista1 .subTitulo{
							padding: 0 .3em;
							background-color: gray;
							color: white;
							line-height: 1.6; margin-top: .2em; margin-bottom: 0em;
							font-family: inherit;
							font-weight: inherit;
						}
						.despleg_f_lista1 > li > a{
							float: left;
						}
					/*1er parte del li*/
						/*Todos los niveles*/
						.despleg_f_lista1 > li > a.desplegador{ /*li > a.desplegador*/
							position: relative;
							height: 1.8rem; /*mismo que line-height de li y a*/
							background-repeat: no-repeat;
							background-position: 0 50%;
							margin-right: .3rem;
						}
							/*icono desplegador*/
							.despleg_f_lista1 > li > a.desplegador > .ico{
								display: block;
								/*content: '';*/
								width: 10px;
								height: 1.8rem; /*mismo que line-height de li y a*/
								position: absolute;
								right: 0; top: 0;
								background-repeat: no-repeat;
								background-position: 0 50%;
								background-image: url('../img/listDespl_circul.svg');
							}
					/*2da parte del li*/
						.despleg_f_lista1 > li > a.linkeador{ /*a.linkeador. es desplegador de ul hijo*/
							padding-left: 1.4rem;
							background-repeat: no-repeat;
							background-position: 0 50%;
							background-image: url('../img/ico_ojo.svg');
						/*line-height aca en vez de en li?*/
							border-bottom: 2px dotted gray;
						}
							.despleg_f_lista1 > li:first-child > a.linkeador{
								border-top: 2px dotted gray;
							}
							.despleg_f_lista1 .despleg_f_lista1 > li:first-child > a.linkeador{
								border-top: none;
							}
				/*Contenedor*/
				/*/*/
				/*Desplegador*/
					/*desplegador open(ex data-togle:collapsed*/
					.despleg_f_lista1 .dropdown_f_contenedor > a.desplegador > .ico{ /*.dropdown_f_contenedor son los que tienen el class para js para desplegar*/
						background-image: url('../img/listDespl_triangDer.svg');
					}
					.despleg_f_lista1 .dropdown_f_contenedor.open > a.desplegador > .ico{
						background-image: url('../img/listDespl_triangAbj.svg');
					}
					/*Nivel1*/
					.despleg_f_lista1 > li > a.desplegador{
						width: 1.5rem;
						background-image: url('../img/listDespl_nodoNivel1.svg');
					}
						.despleg_f_lista1 .subTitulo{
							margin-left: .7rem; /*mismo que a.desplegador*/
						}
					/*NivelN (todos menos nivel1)*/
					.despleg_f_lista1 .despleg_f_lista1 > li > a.desplegador{
						width: 2.7rem;
						background-image: url('../img/listDespl_nodoNivelN.svg');
					}
						.despleg_f_lista1 .despleg_f_lista1 .subTitulo{
							margin-left: 1.9rem; /*mismo que a.desplegador - algo (.8) para flechita*/
						}
				/*Desplegable*/
					.despleg_f_lista1 .dropdown_f_contenedor > .desplegable{
						clear: both;
					}
					.despleg_f_lista1 .dropdown_f_contenedor.open > .desplegable{
					}
			/*_/Lista desplegable - .dropdown_f_contenedor.despleg_f_lista1_*/
		/*_/Tipo Dropdown - No necesita especificar id del desplegable_*/



		/*_Tipo Collapse - Necesita especificar id del desplegable_*/
			/*Nota:
				-Por ahora hace solo con 1 id por desplegador, pero se podria expandir para que tome id o class (varios class iguales que abran/cierren juntos)
				-Pasar a OOP para no repetir variables.
			*/
			/*Notas:
				Similar a Collapse (bootstrap), necesita especificar id del desplegable mediante un parametro en el desplegador.
				Estructura:
					(contenedor cualquiera){
						a collapse_f_target="#idDelDesplegable" open { }  //El open va en el desplegador ya que es comun para todos los desplegables (pero de esa forma no lo identificaria Css para cambiar los desplegables, por eso la funcion los genera dinamicamente en los desplegables a partir de esta  
						.desplegable.collapse_f_desplegable#idDelDesplegable.despleg_f_lista1{ //para ser desplegado por 'collapse_f_target' (puede ir en mismo elemento de otro .despleg_f_lista1 que a su vez contenga un par; .despleg_f_lista1 si es un 'ul' puede ir en mismo elemento para definir el estilo del ul;
					}
			*/
			/*atributo Html para JS: 'collapse_f_target'*/
			/*_/General_*/
				/*Contenedor*/
					/*cualquier cosa*/
				/*Desplegador*/
					.desplegador[collapse_f_target]{
							border: 5px solid green;
						width: 200px;
						height: 30px;
						display: block;
					}
						/*estado: cerrado*/
						.desplegador[collapse_f_target]{
						}
						/*estado: abierto*/
						.desplegador[collapse_f_target].open{
								
						}
				/*Desplegable*/
					.desplegable.collapse_f_desplegable{
					}
						/*estado: cerrado*/
						/*dif entre .desplegable y .collapse_f_desplegable*/
						.desplegable.collapse_f_desplegable{
							display: none;
						}
						/*estado: abierto*/
						.desplegable.collapse_f_desplegable.open{ /*El open se coloca desde el html en el desplegador, pero luego js lo copia en cada desplegable dependiente para poder tomar estos Css*/
							display: block;
						}


				/*/*/

		/*_/Tipo Collapse - Necesita especificar id del desplegable_*/

/*________/Modulo: DESPLEGABLES________________________*/