


/*
	Esquema CSS
	
	Por Javier Martínez
	
	http://javim.000webhostapp.com
	
	Versión: 19.10


	Estilo con lineamientos genéricos para el modelado de páginas con diseño responsable.

	
	
	Fuentes:
	
		Ubuntu: http://font.ubuntu.com/
	
		Comfortaa: http://aajohan.deviantart.com/
	
	
	
	Basado en:
	
		siimple
			https://www.siimple.xyz/
			
		milligram
			https://milligram.io/
			
		Flusk
			https://github.com/technext/Flusk
	
*/


	
	@font-face {
	 font-family: Comfortaa-Light;
	 src:url("recursos/fuentes/Comfortaa-Light.ttf") format("truetype");
	}
		
	@font-face {
	 font-family: UbuntuMono-R;
	 src:url("recursos/fuentes/UbuntuMono-R.ttf") format("truetype");
	}
		
	@font-face {
	 font-family: Ubuntu-L;
	 src:url("recursos/fuentes/Ubuntu-L.ttf") format("truetype");
	}
	





/*
	Elementos
*/

html * {  
  font-family: 'Comfortaa-Light', 'Ubuntu-L', 'roboto';
  font-smooth: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  max-width: 100%;
}


body {
  margin : 0px;
  padding: 0px;
  letter-spacing: .01em;  
}




input [disabled] {
  cursor: default;
  opacity: .5;
}


*       { 
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
 }
*       { 
-webkit-transition: all 2s ease;
   -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
     -o-transition: all 2s ease;
        transition: all 2s ease;
 }
*:hover { 
-webkit-transition: all 0.2s ease;
   -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
     -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
 }




img { max-width: 100%;}

h1, h2, h3, h4, h5, h6 {	padding: .2em 0px;	}

header { font-size: larger; }

/*
	Clases
*/

.redondeado:not(.conjunto),
.conjunto.redondeado * {     
	
-webkit-border-radius: 0.3em;
   -moz-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
     -o-border-radius: 0.3em;
        border-radius: 0.3em;
 
}



.fijo { position: fixed; }

.derecho   { right:  1em; }
.superior  { top:    1em; }
.izquierdo { left:   1em; }
.inferior  { bottom: 1em; }

.centrado_unico > *,
.izquierda:not(.posicion)    { text-align: left;  }
.derecha:not(.posicion)      { text-align: right; }
.conjunto.centrado *,
.centrado_unico,
.centrado     { text-align: center;	}
.centrado_unico > * {
	margin-left : auto;
	margin-right: auto;	
}

.relleno { padding: 1em; }
.margen  { margin : 1em; }

.frase   { white-space:nowrap; }


.conjunto.grande *,
.grande  { font-size: large;   }
.conjunto.xgrande *,
.xgrande { font-size: x-large; }

.conjunto.mini *,
.mini  { font-size: small;   }
.conjunto.xmini *,
.xmini { font-size: x-small; }


.ancho { width: 100%; }










	
/*
	Esquema de colores
*/
  


.menu nav.negro a,
.negro:not(.conjunto) {
  color: #fff; 
  border-color: #000;
  background-color: #000;
}

.menu nav.blanco a,
.blanco:not(.conjunto) {
  color: #000; 
  border-color: #000;
  background-color: #fff;
}


.menu nav.trasparente a,
.transparente:not(.conjunto) { background-color: transparent; }

.menu nav.claro a,
.claro:not(.conjunto) {    
	color: #ddd;
	border-color: #ddd;
}

.menu nav.oscuro a,
.oscuro:not(.conjunto) {    
	color: #444;
	border-color: #444;
}




.coloreado > *:nth-child(odd)  { background-color: #ddd; }
.coloreado > *:nth-child(even) { background-color: #eee; }






.verde:not(.conjunto) {
	color: #295;
	border-color: #295;
	background-color: #dfd;
}

.conjunto.boton.verde a:not(.boton),
.boton.verde:not(.conjunto),
.menu nav.verde a,
.verdefondo {
  border-color: #295;
  background-color: #295;
  color: #fff;
}

.rojo:not(.conjunto) {
	color: #d33;
	border-color: #d33;
	background-color: #fcc;
}

.conjunto.boton.rojo a:not(.boton),
.boton.rojo:not(.conjunto),
.menu nav.rojo a,
.rojofondo {
  border-color: #d33;
  background-color: #d33;
  color: #fff;
}

.amarillo:not(.conjunto) {
	color: #c85;
	border-color: #c85;
	background-color: #ffd;
}

.conjunto.boton.amarillo a:not(.boton),
.boton.amarillo:not(.conjunto),
.menu nav.amarillo a,
.amarillofondo {
  border-color: #c85;
  background-color: #c85;
  color: #fff;
}

.lila:not(.conjunto) {
	color: #95d;
	border-color: #95d;
	background-color: #ece;
}

.conjunto.boton.lila a:not(.boton),
.boton.lila:not(.conjunto),
.menu nav.lila a,
.lilafondo {
  border-color: #95d;
  background-color: #95d;
  color: #fff;
}

.azul:not(.conjunto) {
	color: #35a;
	border-color: #35a;
	background-color: #cdf;
}

.conjunto.boton.azul a:not(.boton),
.boton.azul:not(.conjunto),
.menu nav.azul a,
.azulfondo {
  border-color: #35a;
  background-color: #35a;
  color: #fff;
}









/* divisores de contenidos */

/*
	Contenidos
*/


.encabezado {
	width: 100%;  
	margin : 0px;
	padding: 1em 2em;
}


.encabezado h1, 
.encabezado h2 {
	vertical-align: middle;	
	margin: 2px
}

.encabezado .icono img,
.encabezado .icono svg {
	height: 3em;
	vertical-align: middle;	
}


.encabezado img+h1,
.encabezado svg+h1 {	
	display: inline-block;	
}







/* Divide secciones en la página */

.cuerpo,
.seccion {
	margin : 0px;		
	line-height : 1.5;	
	padding: 3vw 5vw;		
}



/* Divide el contenido en una sección */

.panel,
.contenido,
.bloque {				
	padding: 1vw;
	margin : 1vw;
}


.articulo {  
  text-align: justify;  
  padding: 2vw 5vw;	
  margin: 2vw 5vw;	  
}





/* Panel */

.panel {
  	
}


.panel p:first-child {
  font-weight:bold;	
}


.panel p {		
	margin: 0px;
	padding: 1em 2em
}

.panel p:not(:first-child) {
  
    
}


.pie {
	padding   : 5vw;
	margin-top: 4vw;
}

.pie svg {
	height: 1.25em;
	vertical-align: middle;
}

.pie p {
    margin: 1vw;
}





/* espaciado básico */
.formulario input[type=button],
.formulario input[type=reset],
.formulario input[type=submit],
.cita,
.codigo,
.mensaje,
.boton:not(.conjunto),
.boton a {
	margin : 0.2em;
	padding: 0.5em 1.5em;		 
} 

.formulario input:not([type=checkbox]):not([type=button]):not([type=submit]):not([type=reset]),
.formulario select, 
.formulario textarea
{
	margin : 0.2em;
	padding: 0.5em 1em;		 
}

.formulario input[type=checkbox]{
	margin : 0.2em;	
}


/* --------------------  */








.formulario input:not([type=checkbox]),
.formulario select, 
.formulario textarea,
.mensaje,
.boton:not(.conjunto),
.boton a  {
	display: inline-block;
	vertical-align: middle;
	font-family: 'Ubuntu-L';
	line-height:1em;	
}








/*
	Organización de contenidos (Grillas)
*/



.tabla:not(table):not(.conjunto) {
	display: table;
	width  : 100%;		
	border-spacing: 2vw;			
}



.fila,
.tabla:not(table):not(.conjunto) > *
{	display: table-row;  }


.columna,
.tabla:not(table):not(.conjunto) > * > *
 {
	display: table-cell;
	vertical-align: top;	
	padding: 1vw;
	margin:  1vw;	
}




.tabla:not(table):not(.conjunto).anchofijo,
.horizontal.anchofijo { table-layout:fixed; }


/* elementos horizontales */


.horizontal  {		
	display:table ;	
	width: 100%;	
	border-spacing: .25em;	
}

.horizontal > * { display: table-cell;vertical-align: top;	}




/*	Elemetos verticales */
.menu nav:not(.horizontal),
.vertical nav {	display: inline-block; }	

.menu nav:not(.horizontal) a,
.vertical a {	display: block;	}



.conjunto.tabla table,
table.tabla {  width: 100%; }

.conjunto.tabla table th,
table.tabla th {
  color: #fff;
  background-color:  #777;
  padding: 1em;  
    
-webkit-border-radius: 0.25em;
   -moz-border-radius: 0.25em;
    -ms-border-radius: 0.25em;
     -o-border-radius: 0.25em;
        border-radius: 0.25em;
 
}

.conjunto.tabla table td,
table.tabla td { padding: 1em; }

.conjunto.tabla table tr:not(:first-child):nth-child(odd),
table.tabla tr:not(:first-child):nth-child(odd)  { background-color: #ddd; }

.conjunto.tabla table tr:not(:first-child):nth-child(even),
table.tabla tr:not(:first-child):nth-child(even) { background-color: #eee; }

.conjunto.tabla table tr:not(:first-child):hover,
table.tabla tr:not(:first-child):hover           { background-color: #fff; }












/*
	Diseño de Botones
*/


.formulario input[type="submit"]:not([disabled]),
.boton:not(.conjunto),
.boton a {	    
  cursor : pointer;  
  text-align : center;
  vertical-align : middle;
  text-decoration: none;  
	white-space:normal;
	border-style:solid;
	border-width: 1px;
}




.boton:not(.conjunto):hover:not([disabled]),
.formulario input[type="submit"]:hover:not([disabled]),
.formulario input[type="button"]:hover:not([disabled]),
.formulario input[type="reset"]:hover:not([disabled]),
.boton a:hover:not([disabled]) { 

	
-webkit-box-shadow: 2px 2px 2px #0008,	inset 1px 1px 2px #eee8;
   -moz-box-shadow: 2px 2px 2px #0008,	inset 1px 1px 2px #eee8;
    -ms-box-shadow: 2px 2px 2px #0008,	inset 1px 1px 2px #eee8;
     -o-box-shadow: 2px 2px 2px #0008,	inset 1px 1px 2px #eee8;
        box-shadow: 2px 2px 2px #0008,	inset 1px 1px 2px #eee8;
	 filter:brightness(1.2);	
 }


.boton:not(.conjunto):active,
.formulario input[type="submit"]:active,
.boton a:active { 	
	
-webkit-box-shadow: inset 1px 1px 3px #000;
   -moz-box-shadow: inset 1px 1px 3px #000;
    -ms-box-shadow: inset 1px 1px 3px #000;
     -o-box-shadow: inset 1px 1px 3px #000;
        box-shadow: inset 1px 1px 3px #000;
	}





.mensaje {			
	background-color: #ffd; 	
	color: #c85;
	border-width: 1px;
	border-style: solid;
	
	
-webkit-border-radius: 0.25em;
   -moz-border-radius: 0.25em;
    -ms-border-radius: 0.25em;
     -o-border-radius: 0.25em;
        border-radius: 0.25em;
 
}






/*
	Etiqueta <TABLE>
*/






/*
	Fondo
*/


.fondofijo {

	
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
	
	background:transparent no-repeat center center fixed;
}















/*
  Enlaces
*/


a.enlace:not(.boton),
.conjunto.enlace a:not(.boton) {
		font-weight:bold;
		text-decoration: none;
		background-image: linear-gradient(currentColor, currentColor);    
		background-position: 50% 100%;
		background-repeat: no-repeat;
		background-size: 0% 0px;
		transition: background-size 0.5s;
		color: inherit;	   
}

.conjunto.enlace a:not(.boton):hover,
.conjunto.enlace a:not(.boton):focus,
a.enlace:not(.boton):hover, 
a.enlace:not(.boton):focus {
    background-size: 100% 2px;  
}








/*
	Menú
*/


.menu {
	max-height: 100vh;
	max-width: 100vw;
	overflow-y: auto; 
	padding: 1px;
	display: inline-block;
}	




.menu nav a  {	
	border: solid 1px #abf0;	
	text-decoration: none;	
	white-space: nowrap;
	padding: .5em 1em;
	margin: 0px;	
	
}


.menu nav a:hover { 	
  border-color: #55ff;
  filter:brightness(1.2);	
}





.menu nav ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}


.menu nav {	
	vertical-align: top;
}



.menu.desplegable:not(:hover) {	
	max-width: 3em !important;
	max-height: 3em !important;
	overflow: hidden !important;	
	display: inline-block;
	vertical-align: middle;	
	background-image: url(recursos/svg/menu.svg)  ;	
	background-repeat: no-repeat;
	background-size: 2em;
	background-position: center;		
}

.menu.desplegable > *:not(:hover)  {
	opacity: 0;		
	
}

.menu.desplegable {  
	overflow: hidden !important;	  
}


/*

.menu.desplegable:before {			
	
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
	
	content: "Menú";	

}

*/

/*  S V G */


.menu nav a img,
.menu nav a svg,
.boton:not(.conjunto) img,
.boton a img,
.boton:not(.conjunto) svg,
.boton a svg {     
	margin : 0px 0.2em ;		
	height: 1.5em;	
	display: inline-block;
	width: 2em;	
	vertical-align: middle;	
}











/*
	formularios 
*/


.formulario * { font-size: inherit; }



form.formulario,
.formulario form {
	display: block;	  
	padding: .5em;  
	margin: 0px;
	border: solid 1px #ddd;		
}




.formulario input:not([type=submit]):not([type=reset]):not([type=button]):not([type=checkbox]),
.formulario select, 
.formulario label,
.formulario textarea {
	width: 100%;
	
	
	
}

.formulario input[type='submit'],
.formulario input[type='reset'],
.formulario input[type='button'],
.formulario input.boton {
	
}


.formulario input,
.formulario select, 
.formulario textarea {		
	border-style:solid;
	border-width: 1px;
}

.formulario input[type='number'] { padding-right: 0px ;	}


.formulario select:focus, 
.formulario input:focus, 
.formulario textarea:focus {
	border-color:#7ba;
}


















.formulario p,
.formulario label,
.formulario legend {  
  
  margin: 0em 0.5em; 
	vertical-align: middle;
}


.formulario legend { padding: .5em 1em;  }


.formulario fieldset { 
	max-width: 30em;
}







 .formulario input[type=checkbox] {
	  
-webkit-appearance: none;
   -moz-appearance: none;
    -ms-appearance: none;
     -o-appearance: none;
        appearance: none;
 
           
 background-color: transparent;
           border: none;
          display: inline-block;	 	    
   vertical-align: middle;

	 
 }

.formulario input[type=checkbox]:after { 	
	
-webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
     -o-transition: all 0.5s;
        transition: all 0.5s;
 
	
	content: "\2714"; 
	text-align: center;
	font-weight:bold;
	color: transparent;
	
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	
	background-color: #fff;
	border: 1px solid #999;
 }

 .formulario input[type=checkbox]:checked:after { 
	color: #090;
 }



.formulario input[type=checkbox]:not(.interruptor) {	
	margin-right: 1em;
}
 
 
 
 


.formulario  input[type=checkbox].interruptor { 	
	background-color: #aaa;
	width: 2.5em;
		
	
-webkit-border-radius: 2em;
   -moz-border-radius: 2em;
    -ms-border-radius: 2em;
     -o-border-radius: 2em;
        border-radius: 2em;
 
}

.formulario input[type=checkbox].interruptor:checked {
	background-color: #295;
}
.formulario input[type=checkbox].interruptor:after { 
	content: " "; 	
	border: solid 1px #000;
	
-webkit-border-radius: 2em;
   -moz-border-radius: 2em;
    -ms-border-radius: 2em;
     -o-border-radius: 2em;
        border-radius: 2em;
 
}

.formulario input[type=checkbox].interruptor:checked:after { 
	 margin-left: 1em;
	content: " "
}




 .nota {		
	
	font-size  : 0.6em;
	margin     : 0em 1em;	
	
}



.formulario .columna {	
	vertical-align: middle;
}



.formulario.redondeado [type="checkbox"]:after,
.formulario.redondeado input,
.formulario.redondeado textarea,
.formulario.redondeado select,
.formulario.redondeado * { 	
	
-webkit-border-radius: 0.25em;
   -moz-border-radius: 0.25em;
    -ms-border-radius: 0.25em;
     -o-border-radius: 0.25em;
        border-radius: 0.25em;
 

}

.formulario.grande  * {  font-size: large; 	}



/* 
	varios
*/

.codigo { font-family: UbuntuMono-R, courier,  consolas, fixedsys; }

.codigo,
.cita {
	border-left  : solid 5px;
	padding-left : 1em;	
	display: block;
	
-webkit-border-radius: 0px;
   -moz-border-radius: 0px;
    -ms-border-radius: 0px;
     -o-border-radius: 0px;
        border-radius: 0px;
 
	
}

.cita { font-style   : italic; }



/* animación */

.rotar {
	
-webkit-animation: rotate 1s infinite;
   -moz-animation: rotate 1s infinite;
    -ms-animation: rotate 1s infinite;
     -o-animation: rotate 1s infinite;
        animation: rotate 1s infinite;
	
-webkit-animation-timing-function: linear;
   -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
     -o-animation-timing-function: linear;
        animation-timing-function: linear;
	
}
@keyframes rotate {
	0%, 100% { 
	
		
-webkit-transform: rotate (360deg);
   -moz-transform: rotate (360deg);
    -ms-transform: rotate (360deg);
     -o-transform: rotate (360deg);
        transform: rotate (360deg);
	}
	100% { 
		
-webkit-transform: rotate (0deg);
   -moz-transform: rotate (0deg);
    -ms-transform: rotate (0deg);
     -o-transform: rotate (0deg);
        transform: rotate (0deg);
		}
}



/* Mensaje ocultable */



.cartel {	
	
	z-index: 9999;
	width: 100%;
	top: 40vh;	
	min-height: 3em;
	animation: cerrar 2s 1 ;
	animation-fill-mode:forwards;
	animation-delay: 15s;
	transition: all 2s;
	
}


@keyframes cerrar {
	transition: all 2s;
	0%, 100% { 
	 top: 0px;	
	  transform: scale(0) ;	
		transform: rotatex(-90deg);
		opacity: 0;
		height: 0px;
		min-height: 0px;
	}
	100% { 	
	  top: 0px;	
	  transform: scale(0) ;	
		transform: rotatex(-90deg);
		opacity: 0;
		height: 0px;
		min-height: 0px;
		}
}





/* 
   Diseño Móvil 
*/


@media (max-width: 750px) { 	
	
	
	.horizontal > *,
	.fila,	
	.columna,
	.tabla:not(table):not(.conjunto),
	.tabla:not(table):not(.conjunto) > *,
	.tabla:not(table):not(.conjunto) > * > *	
	{	display: block;	}
	
	.ocultable  { display: none; }
	
	.movil_centrado_unico > *,
	.movil_centrado  { text-align: center;}
	.movil_izquierda { text-align: left;  }
	.movil_derecha   { text-align: right; }
	
.derecho   { right:  .1em; }
.superior  { top:    .1em; }
.izquierdo { left:   .1em; }
.inferior  { bottom: .1em; }
	
  
	.seccion,
	.cuerpo     { padding  : 1vw;	}
	.encabezado {	font-size: 2vw; }
	
	
	

h1, h2, h3, h4, h5, h6 {	padding: .1em 0px;	}
	


	h1 { font-size: 1.25rem ;}
	h2 { font-size: 1.2rem  ;}
	h3 { font-size: 1.15rem ;}
	h4 { font-size: 1.1rem  ;}
	h5 { font-size: 1.05rem ;}
	h6 { font-size: 1rem    ;}
	
	.menu.desplegable.fijo:active { 
		
		
	}
}



