<?php
header('Content-type: text/css');




$formulario_activo = false;
$color_activo = true;
$menu_activo = true;
$tabla_activo = true;






$activar = '';
$desactivar = '';

if (isset ($_GET['activar']))
	$activar = $_GET['activar'];

if (isset ($_GET['desactivar']))
	$desactivar = $_GET['desactivar'];


if (is_integer (strpos ($activar, 'formulario')))
	$formulario_activo = true;

if (is_integer (strpos ($activar, 'color')))
	$color_activo = true;

if (is_integer (strpos ($activar, 'tabla')))
	$tabla_activo = true;

if (is_integer (strpos ($activar, 'menu')))
	$menu_activo = true;


if (is_integer (strpos ($desactivar, 'formulario')))
	$formulario_activo = false;

if (is_integer (strpos ($desactivar, 'color')))
	$color_activo = false;

if (is_integer (strpos ($desactivar, 'tabla')))
	$tabla_activo = false;

if (is_integer (strpos ($desactivar, 'menu')))
	$menu_activo = false;



?>




/*
	Esquema PHP
	
	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
	
*/

<?php

/* <?=$variable ?> */



// -------------------------- //







	$css_ENCABEZADOS = array (
		'-webkit-', 
		'   -moz-', 
		'    -ms-', 
		'     -o-', 
		'        ');

	
	
	$css_PROPIEDADES = array (
		'animation',
		'animation-timing-function',
		'animation-fill-mode',	
		'animation-delay',	
		'appearance',
		'box-shadow',
		'box-sizing',
		'border-radius',
		'transition',
		'transform',
		'background-size'
	);







// FUNCIONES //

function instalarFuente ($nombre) {
	echo "	
	@font-face {
	 font-family: " . $nombre . ";
	 src:url(\"recursos/fuentes/" . $nombre . ".ttf\") format(\"truetype\");
	}
	";
}





		$css_buscar = array();
		$css_reemplazar = array();
		
		foreach ($css_PROPIEDADES as $propiedad)
			$css_buscar[] = '/' . $propiedad . '(\s*?):(.*?);/';

		foreach ($css_PROPIEDADES as $propiedad) {
			$reemplazo = PHP_EOL;
			foreach ($css_ENCABEZADOS as $encabezado) {
				 $reemplazo = $reemplazo . $encabezado . $propiedad . ': $2;' . PHP_EOL;
			}
			$css_reemplazar[] = $reemplazo;
		}
				


// crea propiedades compatibles con navegadores
function css ($codigo = '') {
	echo PHP_EOL;	 
	global $css_buscar;
	global $css_reemplazar;
				
	return preg_replace ($css_buscar, $css_reemplazar, $codigo);
}




/*
function reemplazar ($cadena, ...$valores) {
	$contador = 0;
	$respuesta = $cadena;
	foreach ($valores as $valor) {
		$contador ++;		 
		$respuesta = str_replace ('{{c' . $contador . '}}', $valor, $respuesta);
	}
	return $respuesta;
}


*/



function color ($nombre, $color, $colorClaro, $colorLetra) {
		
	$cadena = "
	.{{nombre}}:not(.conjunto) {
		color: {{color}};
		border-color: {{color}};
		background-color: {{colorClaro}};
	}

	.conjunto.boton.{{nombre}} a:not(.boton),
	.boton.{{nombre}}:not(.conjunto),
	.menu nav.{{nombre}} a,
	.{{nombre}}fondo {
	  border-color: {{color}};
	  background-color: {{color}};
	  color: {{colorLetra}};
	}
	";

	
	$busqueda  = array ('{{nombre}}', '{{color}}', '{{colorClaro}}', '{{colorLetra}}');
	$reemplazo = array ($nombre, $color, $colorClaro, $colorLetra);

	echo str_replace ($busqueda, $reemplazo, $cadena);

}




const MODO_SIN_CLASE = false;

function sin_clase ($selector) {
	if (MODO_SIN_CLASE == false)
		echo $selector;
}
















?>







<?php








$fuente_normal        = 'Ubuntu-L';
$fuente_elegante      = 'Comfortaa-Light';
$fuente_monoespaciada = 'UbuntuMono-R';

instalarFuente ($fuente_elegante);
instalarFuente ($fuente_monoespaciada);
instalarFuente ($fuente_normal);





?>






/*
	Elementos
*/




html * {  
  font-family: '<?=$fuente_elegante ?>', '<?=$fuente_normal ?>', 'roboto';  
  text-rendering: optimizeLegibility;
  max-width: 100%;
}



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




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


<?=css ("
*       { box-sizing: border-box;     }
*       { transition: all 2s ease;    }
*:hover { transition: all 0.2s ease;  }
") ?>



img { max-width: 100%;}

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

header { font-size: larger;}

/*
	Clases
*/



<?=css ("
.redondeado:not(.conjunto),
.conjunto.redondeado * {     
	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
*/
  



<?php 
if ($color_activo == true) {
			echo css ("


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

		"); 

		// Colores

		$blanco = '#fff';
		$negro  = '#000';

		$azul = '#35a';
		$azulclaro = '#cdf';

		$verde = '#295';
		$verdeClaro = '#dfd';

		$lila = '#95d';
		$lilaClaro = '#ece';

		$rojo = '#d33';
		$rojoClaro = '#fcc';

		$amarillo = '#c85';
		$amarilloClaro = '#ffd';




			


		echo color ('verde', $verde, $verdeClaro, $blanco);
		echo color ('rojo', $rojo, $rojoClaro, $blanco);
		echo color ('amarillo', $amarillo, $amarilloClaro, $blanco);
		echo color ('lila', $lila, $lilaClaro, $blanco);
		echo color ('azul', $azul, $azulclaro, $blanco);

	}

?>









/* 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;	}




/*
	Etiqueta <TABLE>
*/


<?php 
if ($tabla_activo == true)
	echo css ("



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

.conjunto.tabla table th,
table.tabla th {
  color: #fff;
  background-color: #777;
  padding: 1em;
    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
*/

<?=css ("

.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]) { 

	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 { 	
	box-shadow: inset 1px 1px 3px #000;
	}

") ?>


<?=css ("


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

") ?>







/*
	Fondo
*/

<?=css ("

.fondofijo {

	background-size: 'cover');
	
	background:transparent no-repeat center center fixed;
}

") ?>













/*
  Enlaces
*/

<?=css ("

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ú
*/


<?php 
if ($menu_activo == true)
	echo css ("


.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 {			
	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 
*/





	


<?php 
if ($formulario_activo == true)
	echo css ("


.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] {
	  appearance: none; 
           
 background-color: transparent;
           border: none;
          display: inline-block;	 	    
   vertical-align: middle;

	 
 }

.formulario input[type=checkbox]:after { 	
	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;
		
	border-radius: 2em; 
}

.formulario input[type=checkbox].interruptor:checked {
	background-color: #295;
}
.formulario input[type=checkbox].interruptor:after { 
	content: ' ';	
	border: solid 1px #000;
	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 * { 	
	border-radius: 0.25em; 

}

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

") ?>





/* 
	varios
*/

<?=css ("

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

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

.cita { font-style   : italic;}



.nota {
	font-size  : 0.6em;
	margin     : 0em 1em;		
}
") ?>








/* animación */


<?=css ("

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


") ?>

/* Mensaje ocultable */

<?=css ("


.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 
*/


<?=css ("

@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 { 
		
		
	}
}

") ?>


