 <br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /srv/disk23/3527020/www/javierpc.atwebpages.com/esquema.php:1) in <b>/srv/disk23/3527020/www/javierpc.atwebpages.com/esquema.php</b> on line <b>17</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /srv/disk23/3527020/www/javierpc.atwebpages.com/esquema.php:1) in <b>/srv/disk23/3527020/www/javierpc.atwebpages.com/esquema.php</b> on line <b>20</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /srv/disk23/3527020/www/javierpc.atwebpages.com/esquema.php:1) in <b>/srv/disk23/3527020/www/javierpc.atwebpages.com/esquema.php</b> on line <b>21</b><br />


/*
	Esquema PHP

	Por Javier Martínez

	http://javim.000webhostapp.com

	Versión: 20.2


	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("fuentes/Comfortaa-Light.ttf") format("truetype");
	}
	
	@font-face {
	 font-family: UbuntuMono-R;
	 src:url("fuentes/UbuntuMono-R.ttf") format("truetype");
	}
	
	@font-face {
	 font-family: Ubuntu-L;
	 src:url("fuentes/Ubuntu-L.ttf") format("truetype");
	}
	

/*
	Elementos
*/


html * {
  font-family: 'Comfortaa-Light', 'Ubuntu-L', 'roboto';
  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;}
.absoluto { position: absolute;}

.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 *: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;	}


/*
	Etiqueta <TABLE>
*/


.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;

}


/*
	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;
		
-webkit-background-size:  0% 0px;
   -moz-background-size:  0% 0px;
    -ms-background-size:  0% 0px;
     -o-background-size:  0% 0px;
        background-size:  0% 0px;

		
-webkit-transition:  background-size 0.5s;
   -moz-transition:  background-size 0.5s;
    -ms-transition:  background-size 0.5s;
     -o-transition:  background-size 0.5s;
        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 {
    
-webkit-background-size:  100% 2px;
   -moz-background-size:  100% 2px;
    -ms-background-size:  100% 2px;
     -o-background-size:  100% 2px;
        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;
	
-webkit-background-size:  2em;
   -moz-background-size:  2em;
    -ms-background-size:  2em;
     -o-background-size:  2em;
        background-size:  2em;

	background-position: center;
}

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

}

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


/*

.menu.desplegable:before {
	transition: all 1s ease;
	content: 'Menú';

}

*/

/*  S V G */

.panel *:first-child svg,
.panel *:first-child img,
.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: ' '
}


.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;}


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


/* 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 
	Muestra un cartel que se oculta automáticamente.
*/


.cartel {

	z-index: 9999;
	width: 100%;
	top: 40vh;
	min-height: 3em;
	
-webkit-animation:  cerrar 2s 1 ;
   -moz-animation:  cerrar 2s 1 ;
    -ms-animation:  cerrar 2s 1 ;
     -o-animation:  cerrar 2s 1 ;
        animation:  cerrar 2s 1 ;

	
-webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;

	
-webkit-animation-delay:  15s;
   -moz-animation-delay:  15s;
    -ms-animation-delay:  15s;
     -o-animation-delay:  15s;
        animation-delay:  15s;

	
-webkit-transition:  all 2s;
   -moz-transition:  all 2s;
    -ms-transition:  all 2s;
     -o-transition:  all 2s;
        transition:  all 2s;


}


@keyframes cerrar {
	
-webkit-transition:  all 2s;
   -moz-transition:  all 2s;
    -ms-transition:  all 2s;
     -o-transition:  all 2s;
        transition:  all 2s;

	0%, 100% {
	 top: 0px;
	  
-webkit-transform:  scale(0) ;
   -moz-transform:  scale(0) ;
    -ms-transform:  scale(0) ;
     -o-transform:  scale(0) ;
        transform:  scale(0) ;

		
-webkit-transform:  rotatex(-90deg);
   -moz-transform:  rotatex(-90deg);
    -ms-transform:  rotatex(-90deg);
     -o-transform:  rotatex(-90deg);
        transform:  rotatex(-90deg);

		opacity: 0;
		height: 0px;
		min-height: 0px;
	}
	100% {
	  top: 0px;
	  
-webkit-transform:  scale(0) ;
   -moz-transform:  scale(0) ;
    -ms-transform:  scale(0) ;
     -o-transform:  scale(0) ;
        transform:  scale(0) ;

		
-webkit-transform:  rotatex(-90deg);
   -moz-transform:  rotatex(-90deg);
    -ms-transform:  rotatex(-90deg);
     -o-transform:  rotatex(-90deg);
        transform:  rotatex(-90deg);

		opacity: 0;
		height: 0px;
		min-height: 0px;
		}
}


/*
	Ventanas / Dialogos
	Ocupa toda la pantalla visible
*/


.ventana {
  background-color: #eefe;
  position: fixed;
  top: 2em;
  left: 2em;
  right: 2em;
  bottom: 2em;
  padding: 2em;  
}


/*
   Diseño Móvil
*/


@media (max-width: 750px) {


	.horizontal:not(.siempre) > *,
	.fila:not(.siempre),
	.columna:not(.siempre),
	.tabla:not(table):not(.conjunto):not(.siempre),
	.tabla:not(table):not(.conjunto):not(.siempre) > *,
	.tabla:not(table):not(.conjunto):not(.siempre) > * > *
	{	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 {


	}
	
	
	.ventana {
		top: 0px;
		left: 0px;
		right:0px;
		bottom: 0px;
		
-webkit-border-radius:  0px;
   -moz-border-radius:  0px;
    -ms-border-radius:  0px;
     -o-border-radius:  0px;
        border-radius:  0px;

	  }

	  
}