@charset "utf-8";

@font-face {
    font-family:	'Material Icons';
    font-style: 	normal;
    font-weight: 	400;
    src: 			url(./../fonts/MaterialIcons-Regular.woff) format('woff');
}

*:focus, button:hover {
	outline: none;
}

button::before, .botonMenuDesp::before, .botonEditTilemap::before, .botonDelTilemap::before {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
	text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: text-top;
    padding-right: 6px;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

html {
	scrollbar-width: thin;
	scrollbar-color: #333 #777;
}

body {
	background:		#ddd;
	font-family:	Arial, Helvetica, sans-serif;
	color:			#333;
	margin:			0;
	min-height: 	100vh;
}

body > h1, body > h2, #avisoBorrar, #avisoBorrarTilemap, #botonBorrar {
	display:	none;
}

img {
	border:		0;
}

a {
	color:			 #000;
	text-decoration: underline;
}

a:hover {
	color:			 #b73;
	text-decoration: none;
}

.link {
	border: 			0;
	background: 		transparent;
	color:			 	#000;
	text-decoration:	underline;
	cursor: 			pointer;
}

.link:hover {
	color:			 #b73;
	text-decoration: none;
}

em, blockquote {
	opacity:	0.8;
	font-size:	0.9em;
}

header {
    width:				100%;
    height:				48px;
	
    margin:				0;
    padding:			0 18px;
	
	background:			linear-gradient(to bottom, rgba(220,220,220,1) 0%, rgba(60,60,60,0.8) 100%);
	backdrop-filter:	blur(2px);
	border-bottom:		rgba(40,40,40,0.9) 1px solid;
	box-shadow: 		rgba(0, 0, 0, 0.2) 0px 2px 0px;
    
	position:			fixed;
    z-index:			9998;
}

header > a {
	height: 	48px;
  	display: 	inline-block;
}

header > a > img {
	border: 	0px;
	width: 		80px;
	clip-path:	polygon(0 5px, 80px 5px, 80px 53px, 0 53px); /* rect(5px 0px 54px 80px); */
	margin-top: -5px;
}

nav {
	float:	right;
	margin:	0 36px 0 0;
}

h1 {
	font-size:	1.2em;
	color: 		rgb(142, 118, 3);
	background:	linear-gradient(90deg, rgba(185,205,80,0.7) 0%,rgba(185,205,80,0.1) 100%);
	padding:	2px 6px;
}

h2 {
	font-size:		1em;
	font-weight:	normal;
	text-align:		justify;
	color:			rgba(255, 0, 0, 0.8);
	
	background:		rgba(255, 0, 0, 0.1);
	border:			rgba(255, 0, 0, 0.3) 1px solid;
	
	padding:		3px;
}

h3 {
	display: 		block;
	border-top:		#999 2px dotted;
	
	font-size:		1em;
	color:			#730;
	
	padding-top:	24px;
	margin: 		30px 0 20px 0;
}

.botonMenu {
	display:			inline-block;
	padding-top:		10px;
	
	width:				180px;
	height:				38px;
	
	font-size:			1.2em;
	color:				#fff;
	text-shadow:		1px 2px 1px #000;
	text-align:			center;
	text-decoration:	none;
	
	transition:			all 0.5s ease;
}

.botonMenu:hover {
	background-color:	rgba(255, 190, 0, 0.4);
	cursor:				pointer;
	color:				#fff;
}

.opcionesPRG {
	text-align:	right;
	margin:		2px 0 2px 0;
	color:		#666;
}

.opcionesPRG div {
	display: inline-block;
}

.opcionesPRG #file {
	display:	none;
}

.opcionListado {
	float: 		left;
	margin:		2px 0 0 0;
	padding: 	2px 4px;
	width: 		210px;
	height: 	22px;
	
	text-align:	left;
	color:		#741;
	
	border: 	1px solid #999;
	background: rgb(255, 230, 205);
}

.opcionesFormulario {
	margin-top:	2px;
	text-align:	right;
	color:		#666;
}

.opcionesCompilador {
	margin-top:	1px;
}

.opcionesCompilador div {
	display: inline-block;
}

.opcionesEmpaquetador {
	display:		none;
	width:			360px;
		
	border: 		1px solid #ccc;
	background: 	#eee;
	
	padding: 		10px;
	margin: 		10px 10px 10px 50%;
	
	color: 			#555;
	font-size: 		0.9em;
	text-align: 	left;
}

.opcionRecuperaID {
	margin-top:	3px;
	display:	none;
	font-size:	0.8em;
	color:		#555;
}

#URLcode {
	width:	280px;
}

#volverArriba {
	position:	fixed;
	bottom:		30px;
	right:		20px;
	transition:	all 0.3s ease;
}

/* para la animacion de carga */
.preloader {
    position:		relative;
    width:			20px;
    height:			20px;
	
	margin:			40px auto 0 auto;
	
    background:		rgba(128, 128, 0, 0.1);
    border-radius:	50px;
    border-top:		5px solid rgba(235, 120, 20, 0.2);
    border-bottom:	5px solid rgba(235, 120, 20, 0.2);
    border-left:	5px solid rgba(235, 120, 20, 1);
    border-right:	5px solid rgba(235, 120, 20, 1);
    
	animation:		preloader_animation 1.5s infinite linear;
}

.preloader:after {
    position:		absolute;
	top:			-25px;
    left:			-25px;
    width:			50px;
    height:			50px;
	
	background:		rgba(128, 128, 0, 0.1);
	border-radius:	50px;
    border-top:		10px solid rgba(235, 120, 20, 1);
    border-bottom:	10px solid rgba(235, 120, 20, 1);
    border-left:	10px solid rgba(235, 120, 20, 0.2);
    border-right:	10px solid rgba(235, 120, 20, 0.2);
	
    content:		'';
}

@keyframes preloader_animation {
    0%		{ transform: rotate(0deg); }
    50%		{ transform: rotate(180deg); }
    100%	{ transform: rotate(360deg); }
}

/* para la carga de la home */
#generalLoader {
	position: 	fixed;
	width: 		100%;
	height: 	100%;
	
	background:	rgba(60, 60, 60, 1);
	
	z-index:	9990;
	opacity:	1;
}

#generalLoader.ocultar {
	z-index:	0;
	opacity: 	0;
	animation: 	fadeOut 0.5s linear;
}

#generalLoader > .preloader {
	margin-top: 40vh;

	width:		80px;
    height:		80px;
}

#generalLoader > .preloader:after {
	top:		5px;
    left:		5px;
} 

#generalLoader > .avisoLoader {
	color:		rgb(240, 150, 50);
	text-align: center;
	padding:	10px;
}

/* para el menu desplegable */
.menu {
	padding:		0; 
	margin:			0; 
	margin-bottom:	0;
	
	color:			#999;
	text-shadow:	1px 1px 1px #000;
	text-align:		center;
	list-style:		none; 
	
	height:			48px;
	position:		relative;
}

.menu li.top { 
	display:	block; 
	
	float:		left;
	position:	relative;
}

.menu li.top:nth-child(4) {
	display:	none; 
}

.menu a:hover {
	visibility:	visible;
}

.menu ul {
	position:	absolute; 
	right:		-40px; 
	top:		48px;
	
	width:		0; 
	height:		0;
	max-height:	0;
	
	margin:		0;
	padding:	0;
	list-style:	none;
	overflow:	hidden;
	
	transition:	max-height 0.5s ease;
}

.menu :hover ul.sub {
	background:			rgba(60,60,60,0.9);
	backdrop-filter:	blur(2px);
	border-left:		rgba(40,40,40,0.9) 1px solid;
	border-right:		rgba(40,40,40,0.9) 1px solid;
	border-bottom:		rgba(40,40,40,0.9) 1px solid;

	width:				260px;
	height:				auto;
	max-height:			700px;
	
	padding:			0;
}

.menu :hover ul.sub li.subheader {
	margin-top: 4px;
	box-shadow: 0 1px rgba(90, 90, 90, 0.9);
}

.menu .scrollMenu {
	max-height: 		148px;
	overflow: 			auto;
	scrollbar-width: 	thin;
	scrollbar-color: 	#333 #777;
}

.botonMenuDesp {
	display:			block;
	
	box-sizing: 		border-box;
	padding:			4px 0;
	margin-top:			1px;
	
	width:				100%;
	height:				36px;
	
	color:				#fff;
	font-size:			1.2em;
	text-shadow:		1px 2px 1px #000;
	text-align:			center;
	text-decoration:	none;
	
	cursor:				pointer;

	background-color:	rgba(255, 190, 0, 0);
	transition:			background-color 0.5s ease;
}

button.botonMenuDesp {
	border: 		0;
	vertical-align: -4px;
	text-overflow: 	ellipsis;
	overflow: 		hidden;
	white-space: 	nowrap;
	padding: 		0 4px;
}

.botonMenuDesp.dos {
	display:	inline-block;
	margin:		1px -1px 0 -1px;
	width:		calc(50% - 2px);
}

.botonMenuDesp.tres {
	display:	inline-block;
	margin:		1px -1px 0 -1px;
	width:		calc(33.3% - 2px);
}

.botonMenuDesp.tutorial {
	display:	inline-block;
	margin:		1px -1px 0 -1px;
	width:		30px;
}

.botonMenuDesp:hover {
	background-color: 	rgba(255, 190, 0, 0.4);
	color:				#fff;
}
/* Hasta aqui menu desplegable */

/* input range */
input[type='range'] {
    box-sizing:			border-box;
    overflow:			visible;
    appearance:			none;
    height:				1em;
    padding:			0 0.2em;
    transform: 			translate(0, -1px);
    background: 		transparent;
    font-size: 			1em;
    cursor: 			pointer;
}

input[type='range']::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	margin-top: 		0.1em;
    z-index:			-1;
    border: 			#444 1px solid;
    height: 			6px;
    border-radius: 		3px;
    background: 		#999;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: 		-0.4em;
    z-index: 			1;
    border: 			#333 1px solid;
    width: 				1.1em;
    height: 			1.1em;
    border-radius: 		50%;
    background:			#fff;
}

input[type='range']::-moz-range-track {
    border: 			#444 1px solid;
    height: 			4px;
    border-radius: 		3px;
    background: 		#999;
}

input[type='range']::-moz-range-thumb {
    border: 			#333 1px solid;
    border-radius: 		50%;
    background:			#fff;
}

input[type='range']::-ms-track {
    z-index:		-1;
    margin-top: 	0.1em;
    border: 		#444 1px solid;
    height: 		4px;
    border-radius: 	3px;
    transform: 		translateY(-1px);
    background: 	#999;
    color: 			transparent;
}

input[type='range']::-ms-thumb {
    z-index: 		1;
    border: 		#333 1px solid;
    width: 			1em;
    height: 		1em;
    border-radius:	50%;
    background:		#fff;
}

input[type='range']::-ms-fill-lower {
    background: transparent;
}

input[type='range']::-ms-fill-upper {
    background: transparent;
}

input[type='range']::-ms-tooltip {
    display: none;
}

input[type='range']:focus {
    outline: none;
}
/* hasta aqui el input range */

.infoMenu {
	display:		 inline-block;
	padding-top:	 10px;
	width:			 240px;
	height:			 38px;
	font-size:		 1.2em;
	color:			 #888;
	text-shadow:	 1px 2px 1px #000;
	text-align:		 center;
	text-decoration: none;
}

section {
	text-align:		center;
	margin: 		auto;
	padding-top:	52px;
	padding-bottom:	32px;
	padding-right:  213px;
	min-height: 	calc(-118px + 100vh);
}

section:not(#areaTrabajo) {
	padding-right: 0;
}

#resultadoCompilador {
	opacity:	0;
	padding:	52px 0 30px 0;
}

#resultadoCompilador > b {
	display: inline-block;
	padding: 0 0 8px;
}

.visor {
	display:	inline-block;
	position:	relative;
}

divgo-screen {
	border:		1px solid #bbb;
	background: url(./../images/ruido.png) repeat 0 0;
	animation:	tv_effect 0.1s infinite linear alternate;
}

divgo-screen[start] {
	background: transparent;
	animation: 	none;
}

divgo-screen::part(screen) {
	background: transparent;
}

.avisoScreen {
	z-index:		9300;
	position: 		absolute;
	margin: 		0px 50%;
	padding:		5px 10px 5px 10px;
	width:			400px;
	overflow:		hidden;
	border-radius:	3px;
	background:		rgba(255,255,255,0.6);
	color:			#333;
	transform: 		translate(-50%, -40px);
	transition:		opacity 0.5s ease;
}

.visor:has(divgo-screen:hover) .avisoScreen {
	opacity:	0.6;
	transition:	opacity 0.5s ease;
}

.visor:has(divgo-screen:focus) .avisoScreen {
	opacity:			0;
	z-index:			-100;
	transition:			opacity 0.5s ease, z-index 0s;
	transition-delay:	0s, 0.5s;
}

#DivGO_services {
	position: 			absolute;
	top: 				1px;
	right: 				-50px;
	border: 			1px solid #777;
	background-color:	rgba(184, 184, 184, 0.9);
}

#DivGO_services:not(.active) {
	opacity: 	0.4;
	cursor:		not-allowed;
}

#DivGO_services > button {
	display:	block;
	border: 	1px solid #777;
	width:		32px;
	height:		32px;
	margin: 	5px;
	cursor:		pointer;
	transition:	all 0.1s ease;
}

#DivGO_services:not(.active) > button {
    pointer-events: none;
}

#DivGO_services > #servicePause {
	background: 		url(./../images/services/pause.png) no-repeat 50%, linear-gradient(to bottom, rgba(220, 220, 220, 1), rgba(60, 60, 60, 0.8)), rgba(255, 190, 0, 0);
	background-size:	16px;
}

#DivGO_services > #servicePause:hover {
	background:			url(./../images/services/pause.png) no-repeat 50%, linear-gradient(to bottom, rgba(220, 220, 220, 0.8), rgba(60, 60, 60, 0.6)), rgba(255, 190, 0, 0.9);
	background-size:	24px;
}

#DivGO_services > #serviceContinue {
	display:			none;
	background: 		url(./../images/services/play.png) no-repeat 50%, linear-gradient(to bottom, rgba(220, 220, 220, 1), rgba(60, 60, 60, 0.8)), rgba(255, 190, 0, 0);
	background-size:	16px;
}

#DivGO_services > #serviceContinue:hover {
	background:			url(./../images/services/play.png) no-repeat 50%, linear-gradient(to bottom, rgba(220, 220, 220, 0.8), rgba(60, 60, 60, 0.6)), rgba(255, 190, 0, 0.9);
	background-size:	24px;
}

#DivGO_services > #serviceRestart {
	background: 		url(./../images/services/replay.png) no-repeat 50%, linear-gradient(to bottom, rgba(220, 220, 220, 1), rgba(60, 60, 60, 0.8)), rgba(255, 190, 0, 0);
	background-size:	16px;
}

#DivGO_services > #serviceRestart:hover {
	background:			url(./../images/services/replay.png) no-repeat 50%, linear-gradient(to bottom, rgba(220, 220, 220, 0.8), rgba(60, 60, 60, 0.6)), rgba(255, 190, 0, 0.9);
	background-size:	24px;
}

@keyframes tv_effect {
	0%   { background-position: 25% 100%; }
	20%  { background-position: 0 25%; }
	40%  { background-position: 100% 75%; }
	60%  { background-position: 50% 50%; }
	80%  { background-position: 25% 100%; }
	100% { background-position: 75% 25%; }
}

/* recurso lateral: graficos, lista procesos activos */
aside {
	z-index:		9500;
	text-align:		center;
	position:		fixed;
	top:			0;
	right:			0;
	width:			200px;
	height:			100%;
	padding:		53px 7px 0 5px;
	border-left:	1px solid #777;
	background:		rgba(184, 184, 184, 0.9);
	overflow: 		hidden;
}

.verRecursos {
	width:				24px;
	height:				20px;
	border: 			1px solid #777;
	background-color:	#777;
	display:			none;
	position: 			absolute;
	margin-bottom: 		5px;
	padding:			2px 8px 0 0;
	color:				#fff;
	font-size:			0.8em;
	text-shadow:		1px 1px 1px #333;
	text-decoration:	none;
	text-align:			right;
	z-index: 			100;
}

.verRecursos:hover {
	color:	#d95;
	cursor:	pointer;
}

.ocultarRecursos {
	width:				190px;
	height:				20px;
	border: 			1px solid #777;
	background-color: 	#777;
	margin-bottom: 		5px;
	padding:			2px 10px 0 0;
	color:				#fff;
	font-size:			0.8em;
	text-shadow:		1px 1px 1px #333;
	text-decoration:	none;
	text-align:			right;
	position: 			sticky;
	bottom: 			78px;
	box-shadow: 		0px 1px 0px 3px rgb(188, 188, 188);
	z-index: 			9560;
}

.ocultarRecursos:hover {
	color:	#d95;
	cursor:	pointer;
}

.cerrarRecursos {
	width: 200px;
}

.abrirRecursos {
	width: 32px;
}

.cerrarRecursos #estadoRecursos {
	opacity: 	1;
	visibility: visible;
	transition: all 0.5s ease-in;
}

.abrirRecursos #estadoRecursos {
	opacity: 	0;
	visibility: hidden;
	transition: all 0.2s ease-out;
}

.cabeceraRecurso {
	border:				1px solid #777;
	width:				100%;
	height:				20px;
	position:			relative;
	background-color:	#777;
	font-size:			0.9em;
	color:				#fff;
	text-shadow:		1px 2px 1px #333;
}

.contenidoRecurso {
	border: 			1px solid #777;
	border-bottom: 		0;
	
	background-color:	#ccc;
	width:				100%;
	height:				260px;
	max-height:			110px;
	overflow: 			auto;

	font-size:			1em;
	color:				#444;
	transition: 		height 0.2s ease;

	scrollbar-width: 	thin;
	scrollbar-color: 	#333 #777;
}

.pieRecurso {
	background-color:	rgb(255, 230, 205);
	border:				1px solid #777;
	border-top: 		1px solid #999;
	
	width:				100%;
	height:				20px;
	
	position:			relative;

	margin-bottom:		5px;
	
	font-size:			0.9em;
	color:				#950;
}

.pieRecurso span {
	text-align:	center;
}

.botonPause {
	display:			none;
	
	font-size:			0.9em;
	color:				#620;
	text-decoration:	none;
	text-align:			right;
	
	cursor:				pointer;
	position:			absolute;
	margin-top:			2px;
	right:				12px;
}

.botonPause:hover {
	color:	#950;
}

.botonPause#botonAnalizar {
	left:		12px;
	right:		auto;
}

.botonAddGraph {
	font-size:			0.9em;
	color:				#620;
	text-decoration:	none;
	text-align:			right;
	
	cursor:				pointer;
	position:			absolute;
	margin-top:			2px;
	right:				12px;
}

.botonAddGraph:hover {
	color:	#950;
}

.botonEditTilemap, .botonDelTilemap {
	font-size:	 0;
	margin-left: 4px;
}

.botonEditTilemap::before {
	content:	'edit';
	font-size:	16px;
	padding:	0 3px;
}

.botonDelTilemap::before {
	content: 	'delete';
	font-size:	16px;
	padding:	0 3px;
}

.notificacion {
	width:				202px;
	height:				auto;
	margin-bottom:		5px;
}

.notificacion a {
	display:			block;
	border:				#aaa 1px solid;
	background-color:	#dadada;
	width:				100%;
	height:				100%;
	padding:			5px;
	font-size:			0.8em;
	color:				#444;
	text-align:			left;
	text-decoration:	none;
	box-sizing: 		border-box;
	transition:			all 0.5s ease;
}

.notificacion a:hover {
	border:				#999 1px solid;
	background-color:	#eee;
	color:				#b73;
	cursor:				pointer;
}

.notificacion img {
	float:			left;
	margin:			0 4px 3px 0;
	width:			52px;
	border-radius: 	5px;
}

.notificacion strong {
	font-size: 		1.1em;
	display: 		block;
	margin-bottom: 	4px;
	text-overflow:	ellipsis;
	overflow: 		hidden;
	white-space: 	nowrap;
}

.notificacion em {
	display: 	block;
	margin-top: 2px;
}

.areaCompleta {
	padding-right: 45px;
}

.areaReducida {
	padding-right: 213px;
}

.editor {
	clear:	both;
	margin: auto;
	width: 	100%;
}

.listadoProcesos {
	float:				left;
	
	border: 			1px solid #025;
	border-right: 		1px solid #037;
	background-color:	#258;
	
	width:				25%;
	min-width: 			180px;
	max-width:			280px;

	height:				380px;
	min-height: 		210px;
	
	font-family:		monospace;
	font-size:			1em;
	text-align:			left;

	overflow: 			auto;
	scrollbar-width: 	thin;
	scrollbar-color: 	#258 #025;
}

.buscarRemplazar {
	display:			none;
	clear: 				both;
	float: 				left;
	
	background-color:	rgb(0, 68, 119);
	
	width: 				277px;
	height: 			68px;
	padding:			0 2px;
	
	border: 			1px solid #025;
	border-top: 		0;
	border-right: 		0;
}

.buscarRemplazar input[type='text'] {
	width:	142px;
}

.buscarRemplazar button[type='button'] {
	width:	128px;
	margin: 4px 0 0;
}

.avisoFPG {
	font-size:	0.75em;
	padding: 	5px;
}

#verFPGs {
	border:		#ba9 1px solid;
	
	font-size:	0.8em;
	
	margin:		1px 95px 0 0;
	padding:	1px;
	
	width: 		70px;
	height: 	18px;
	
	overflow: 	hidden;
}

#contadorProcesos {
	text-align:	left;
	max-height:	210px;
}

#contadorProcesos dt {
	padding-left:	2px;
	font-size:		0.9em;
	white-space:	nowrap;
	text-overflow:	ellipsis;
	overflow:		hidden;
}

#contadorProcesos dd {
	background:		#bbb;
	border-bottom:	#aaa 1px solid;
	margin-left:	0;
	padding-left:	12px;
	font-size:		0.6em;
}

#verFuentes div {
	border:		#fff 1px solid;
	margin:		2px;
	padding:	4px;
	color:		#000;
	font-size:	1em;
	overflow:	hidden;
}

#verFuentes div > span {
	width: 		max-content;
	display: 	inline-block;
}

#verSonidos div {
    background-color:   #222;
    border:             #000 1px solid;
	margin:             2px;
	overflow: 			hidden;
}

#verSonidos div div {
    padding:    	2px 1px 3px;
    border:     	0;
    margin:     	1px;
    font-size:  	0.7em;
    color:      	rgb(200, 200, 200);
	white-space: 	nowrap;
	text-overflow: 	ellipsis;
	direction:		rtl;
}

#verSonidos audio {
	width:				104%; 
	height:				40px;
	background-color:	#26a;
	filter:     		contrast(100%) invert(20%) hue-rotate(184deg);
	margin:     		0 -4px -4px;
	outline:			none;
}

/* Compatible Chrome */
#verSonidos audio::-webkit-media-controls,
#verSonidos audio::-webkit-media-controls-panel,
#verSonidos audio::-webkit-media-controls-play-button,
#verSonidos audio::-webkit-media-controls-timeline-container,
#verSonidos audio::-webkit-media-controls-current-time-display,
#verSonidos audio::-webkit-media-controls-time-remaining-display,
#verSonidos audio::-webkit-media-controls-seek-back-button,
#verSonidos audio::-webkit-media-controls-seek-forward-button,
#verSonidos audio::-webkit-media-controls-rewind-button,
#verSonidos audio::-webkit-media-controls-return-to-realtime-button,
#verSonidos audio::-webkit-media-controls-toggle-closed-captions-button,
#verSonidos audio::-webkit-media-controls-enclosure {
	background-color: 	#234;
	margin-left:  		-1px;
	color: 				#fff;
}

#verSonidos audio::-webkit-media-controls-mute-button,
#verSonidos audio::-webkit-media-controls-play-button,
#verSonidos audio::-webkit-media-controls-timeline,
#verSonidos audio::-webkit-media-controls-volume-slider-container,
#verSonidos audio::-webkit-media-controls-volume-slider {
	filter: 			invert(100%);
	background-color: rgba(0, 0, 0, 0);
}

#verSonidos audio::-webkit-media-controls-time-remaining-display {
	font-size: 0;
}

#verTiles div {
	border: 	1px solid #777;
	margin: 	2px;
	padding: 	6px 14px;
	background: #aaa;
	text-align: left;
	color: 		#333;
	font-size: 	0.9em;
}

#verTiles div a {
	float: right;
}

a.proceso {
	display:		block;
	padding: 		1px 4px 1px 4px;
	
	color:			#ff0;
	text-decoration:none;
	white-space:	nowrap;
}

a.proceso:hover {
	color:				#e70;
	text-decoration:	underline;
}

a.funcion {
	display:			block;
	padding: 			1px 4px 1px 4px;
	color:				#ff9;
	text-decoration:	none;
	white-space:		nowrap;
}

a.funcion:hover {
	color:				#f94;
	text-decoration:	underline;
}

select {
	border:	#888 1px solid;
}

select option:nth-child(even) { 
	background: #eee;
}

select option:nth-child(odd) { 
	background: #fff;
}

#areaTrabajo, #ventanaRecursos {
	opacity: 0;
	transition: all 0.3s ease;
}

#areaTrabajo.activo, #ventanaRecursos.activo, #resultadoCompilador.activo {
	opacity: 	1;
	animation:	fadeIn 0.6s linear;
}

@keyframes fadeIn {
	0%     	{ opacity: 0; }
	50%     { opacity: 0; }
    100%    { opacity: 1; }
}

@keyframes fadeOut {
	0%     	{ opacity: 1; }
	50%     { opacity: 1; }
    100%	{ opacity: 0; }
}

.formulario {
	min-width:	720px;
	min-height:	260px;
	margin:		auto;
	padding:	0 10px 0 10px;
	position:	relative;
}

.botonFormulario {
	position:			relative;
	height: 			28px;
	color: 				#fff;
	font-size:  		16px;
    background: 		linear-gradient(rgb(255, 136, 60), rgb(170, 85, 0));
	background-size: 	2px 28px;
    border: 			1px solid rgb(170, 85, 0);
}

.botonFormulario:enabled:hover {
	background: rgb(255, 136, 60);
}

.botonFormulario:disabled {
	filter: grayscale(0.3);
	opacity: 0.8;
}

.inputGrupo {
	overflow-wrap: anywhere;
	margin: 2px 0px;
}

input[type='text'] {
	border:	#888 1px solid;
	color:	#333;
	width:	140px;
    font-size: 14px;
    vertical-align: bottom;
    background: linear-gradient(#fff 30%, #ddd 80%);
}

input[type='text']:disabled {
	opacity: 0.7;
}

.formulario input[type='text'] {
	height: 		24px;
	margin-right: 	-6px;
}

.campoVacio {
	border:		#b44 1px solid !important;
	background: #d88;
	color:		#933 !important;
}

/* pestañas del formulario */
.pestanyas {
	position:		absolute;
	left:			240px;
	margin-top:		2px;
	width: 			calc(100% - 418px);
	height: 		35px;
	white-space: 	nowrap;
	text-align: 	left;
	overflow: 		auto hidden;
}

.pestanyas {
	display: 			inline-flex;
	gap: 				2px;
	scrollbar-width: 	thin;
	scrollbar-color: 	#333 #777;
}

.pestanya {
	display: 	inline-flex;
	font-size:	0.9em;
	color:		#fff;
}

.pestanya label {
	background:		linear-gradient(to bottom, #bbb 0%,#888 100%);
	height: 		18px;
	padding:		4px;
	border:			#777 1px solid;
	position:		relative;
	float: 			left;
}

.pestanya span {
	display: 		inline-block;
	background: 	#777;
	height: 		18px;
	padding: 		4px 6px;
	border: 		1px solid #777;
	border-left: 	0;
}

.pestanya label:hover, .pestanya span:hover {
	background:	#fda;
	color:		#a50;
	cursor:		pointer;
}

.pestanya input[type=radio]{
	display:	none;
}

#pestMas {
	vertical-align: top;
}

[type=radio]:checked ~ label {
	background:		#fff;
	color:			#222;
	z-index:		2;
	cursor:			default;
}
/* hasta aqui las pestañas del formulario */

#listadoGraficos > .graficos {
	position: 		relative;
	padding-bottom: 15px;
}

.graficos {
	display:		inline-block;
	vertical-align:	top;
	
	border:			#fff 1px solid;
	margin:			2px 0 2px 0;
	width:			80px;
	
	font-size:		0.95em;
}

.sinEdicion {
	border: #f94 1px solid;
}

.graficos img {
	min-width:	10px;
	max-width:	80px;
	
	min-height:	10px;
	max-height:	80px;
}

.graficos .sinGrafico {
	min-width:	32px;
	max-width:	80px;
	
	min-height:	32px;
	max-height:	80px;

	border: 	1px solid #000;
	margin: 	1px 20px;
}

.graficos div {
	background: #fff;
	position: 	absolute;
	bottom: 	0px;
	width: 		100%;
}

.sinEdicion div {
	background: #f94;
	position: 	absolute;
	bottom: 	0px;
	width: 		100%;
}

#listadoGraficos .graficos img:hover, #verFuentes div {
	cursor:	zoom-in;
}

#verGrafico, #incluirGrafico, #verFuente, #incluirFuente, 
#verTilemap, #analizarPrograma, #avisoError {
	z-index:		9700;
	display:		none;
	position:		fixed;
	background:		rgba(0, 0, 0, 0.8);
	width:			100%;
	height:			100%;
	top:			0;
	left:			0;
	margin:			0;
	text-align:		center;
	padding-top:	70px;
}

#avisoError {
	z-index:		9800;
	background:		rgba(200, 50, 0, 0.3);
}

#avisoError > div {
	position:	relative;
	border: 	#000 1px solid;
	background:	#ddd;
	width: 		40%;
	min-width: 	240px;
	padding: 	10px;
	margin: 	10px auto;
}

#avisoError > div p {
	color: #410;
	font-size: 0.9em;
}

#avisoError > div h4 {
	color: #a00;
}

#nuevoGrafico, #borrarCambios, #exportarGrafico, #exportarFuente, #exportarTilemap {
	display:	inline-block;
	padding:	9px 0 0px 36px;
	margin:		6px;
	height:		32px;
	opacity:	0.7;
	color:		#fff;
}

#exportarGraficoTip {
	position: 			absolute;
	background: 		rgba(0, 0, 0, 0.5);
	backdrop-filter: 	blur(2px);
	border: 			1px solid #000;
	top: 				47px;
  	left: 				5px;
	display:			none;
	z-index: 			10;
}

#cerrarGraficoTip, #cerrarFuenteTip, #cerrarTilemapTip {
	position: 			absolute;
	background: 		rgba(0, 0, 0, 0.5);
	backdrop-filter: 	blur(2px);
	border: 			1px solid #000;
	top: 				47px;
	right: 				-1px;
	display:			none;
	z-index: 			10;
}

#exportarGraficoTip div, #cerrarGraficoTip div, #cerrarFuenteTip div, #cerrarTilemapTip div {
	color: 		#fff;
	padding:	14px 16px 14px 46px;
	opacity:	0.7;
	text-align: left;
}

#exportarGraficoTip div {
	min-width:	160px;
}

#nuevoGrafico {	
	background: url(./../images/nuevo.png) no-repeat;
}

#borrarCambios { 
	background: url(./../images/borrar.png) no-repeat;
}

#exportarGrafico, #exportarFuente, #exportarTilemap { 
	background: url(./../images/exportar.png) no-repeat;
}

#exportarGraficoOp0 { 
	background: url(./../images/exportar-png.png) no-repeat 8px 6px;
}

#exportarGraficoOp1 { 
	background: url(./../images/exportar-map.png) no-repeat 8px 6px;
}

#cerrarGraficoOp0, #cerrarFuenteOp0, #cerrarTilemapOp0 { 
	background: url(./../images/guardar.png) no-repeat 8px 4px;
}

#cerrarGraficoOp1, #cerrarFuenteOp1, #cerrarTilemapOp1 { 
	background: url(./../images/salir.png) no-repeat 8px 4px;
}

#cerrarGrafico, #cerrarGrafico2, #cerrarFuente, #cerrarFuente2, #cerrarTilemap, #cerrarAnalizador, #cerrarError {
	background:	url(./../images/cerrar.png);
	width:		32px;
	height:		32px;
	display: 	inline-block;
	margin:		7px;
	opacity:	0.7;
}

#cerrarError {
	position:	absolute;
	top: 		auto;
	right: 		10px;
	filter: 	invert(0.6) sepia(1) hue-rotate(340deg) saturate(1000%);
}

.cerrarRecurso {
	z-index:	9550;
	position:	absolute;
	background:	url(./../images/reducir.png);
	width:		16px;
	height:		16px;
	margin:		3px 3px 3px 182px;
	opacity:	0.7;
}

.verRecurso {
	z-index:	9550;
	position:	absolute;
	display:	none;
	background:	url(./../images/ampliar.png);
	width:		16px;
	height:		16px;
	margin:		3px 3px 3px 182px;
	opacity:	0.7;
}

#cerrarGrafico:hover, #cerrarGrafico2:hover, #cerrarFuente:hover, #cerrarFuente2:hover, 
#cerrarTilemap:hover, #cerrarAnalizador:hover, #cerrarError:hover, .cerrarRecurso:hover, 
.verRecurso:hover, #nuevoGrafico:hover, #borrarCambios:hover, #exportarGrafico:hover, 
#exportarFuente:hover, #exportarTilemap:hover, #exportarGraficoTip div:hover, 
#cerrarGraficoTip div:hover, #cerrarFuenteTip div:hover, #cerrarTilemapTip div:hover {
	cursor:		pointer;
	opacity:	1;
	animation:  btn_size 0.1s ease;
}

@keyframes btn_size {
	from {
		transform: scale(1.1);
	} to {
		transform: scale(1);
	}
}

.editorGrafico {
	background:				rgba(0, 0, 0, 0.4);
	backdrop-filter:		blur(2px);
	border:					#000 1px solid;

	margin:					0 20px 0 20px;
	color:					#fff;
	vertical-align:			top;
	height: 				47px;
	
	display: 				grid;
  	grid-template-columns: 	minmax(150px, 0.7fr) minmax(320px, 1.6fr) minmax(150px, 0.7fr);
	align-items: 			center;

	position: 				relative;
	z-index: 				90;
}

.editorGrafico > div:nth-child(1) {
	text-align: left;
}

.editorGrafico > div:nth-child(2) > div {
	display: 	inline-block;
	margin: 	0 12px;
}

.editorGrafico > div:nth-child(3) {
	text-align: right;
}

#panelGrafico, #panelFuente, #panelTilemap {
	display:			inline-block;
	border:				#fff 1px solid;
	margin:				20px;
	width:				auto;
	overflow:			auto;
	scrollbar-width: 	thin;
    scrollbar-color: 	#555 #111;
	position: 			relative;
  	z-index: 			50;
}

#panelFuente {
	background: 		rgba(0, 0, 0, 0.5);
	backdrop-filter:	blur(2px);
	padding: 			10px;
}

#panelFuente canvas {
	border:		rgba(0, 0, 0, 0.7) 1px solid;
	background:	rgba(0, 0, 0, 0.5);
	margin:		0 2px;
}

#panelTilemap {
	background: 		rgba(0, 0, 0, 0.2);
	backdrop-filter:	blur(2px);
}

.editorOpciones {
	background:			rgba(0, 0, 0, 0.4);
	backdrop-filter:	blur(2px);
	border:				#000 1px solid;
	position:			fixed;
	bottom:				60px;
	width:				840px;
	margin:				15px 30px;
	padding:			5px;
	z-index: 			80;
}

#FPGrange, #FNTrange, #TEXTcode {
	display:		inline-block;
	vertical-align:	middle;
	width:			80px;
}

#PAINTrange, #ANGLErange, #SIZErange, #SHAXrange, #SHAYrange, #BLURrange {
	vertical-align:	middle;
	width:			114px;
	margin-left:	10px;
}

#PALetas, #PALetasFNT {
	border:	#fff 1px solid;
	margin:	10px;	
}

#FPGgraph, #tilemap {
	margin-bottom: -4px;	
}

#FPGgraph, #PALetas, #PALetasFNT, #tilemap {
	display: inline-block;
}

#FPGgraph:hover, #PALetas:hover, #PALetasFNT:hover, #tilemap:hover {
	cursor: crosshair;
}

#opcionSeleccionada, #opcionSeleccionFNT {
	float: 				left;
	width: 				128px;
	height: 			128px;
	background: 		url(./../images/editor/001.png);
	background-repeat:	no-repeat;
}

#opcionSeleccionFNT {
	background: 		url(./../images/editor/021.png);
}

.editorPunta {
	position:	absolute;
	padding:	0;
	left:		126px;
	bottom:		114px;
}

#grosorPunta, #verAngulo, #verSize, #verShadowX, #verShadowY, #verBlur {
	display: 	inline;
	font-size:	0.9em;
	color:		#fff;
}

.editorColores {
	margin-top:	28px;
}

.editorColores div {
	float:			left;
	height:			32px;
	margin-left:	4px;
}

#editorColor1, #FNTeditorColor1 {
	border:				1px solid #fff;
	background-color:	#000;
	width:				30px;
}

#editorColorOp, #FNTeditorColorOp {
	background:			url(./../images/editor/100.png) bottom;
	background-size:	100%;
	background-repeat:	no-repeat;
	width:				40px;
	opacity:			0.5;
	transition:			all 0.5s ease;
}

#editorColorOp:hover, #FNTeditorColorOp:hover {
	opacity:	1;
	cursor:		pointer;
}

#editorColor2, #FNTeditorColor2 {
	border:				1px solid #fff;
	background-color:	#fff;
	width:				30px;
}

#editorColor1:hover, #editorColor2:hover, #FNTeditorColor1:hover, #FNTeditorColor2:hover {
	cursor:	pointer;
}

#editorPaletas, #editorPaletasFNT {
	display:	none;
	position:	absolute;
	background:	rgba(0, 0, 0, 0.6);
	border:		#000 1px solid;
	left:		137px;
	bottom:		110px;
}

#editorPaletas div, #editorPaletasFNT div {
	color: 			#fff;
	font-size:		1em;
	margin-bottom:	10px;
}

#editorPaletas div > input[type='text'], #editorPaletasFNT div > input[type='text'] {
	width: 55px;
}

.editorSize {
	float:	left;
	margin:	12px 0 0 70px;
	color:	#fff;
}

.editorSize.fnt {
	margin: 	-9px 0px 0px 30px;
	text-align: right;
}

.editorSize.fnt p {
	margin: 1px 0;
}

.editorSize input {
	width: 		64px;
	text-align: center;
}

.editorHerramientas {
	margin-top:	68px;	
}

.editorHerramientas div {
	float:			left;
	width:			56px;
	height:			56px;
	margin-left:	3px;
	opacity:		0.5;
	transition:		all 0.5s ease;
}

.editorHerramientas div:hover {
	opacity:	1;
	cursor:		pointer;
}

#editorHerr01 {
	background:	url(./../images/editor/001.png);
}

#editorHerr02 {
	background:	url(./../images/editor/002.png);
}

#editorHerr03 {
	background:	url(./../images/editor/003.png);
}

#editorHerr04 {
	background:	url(./../images/editor/004.png);
}

#editorHerr05 {
	background:	url(./../images/editor/005.png);
}

#editorHerr06 {
	background:	url(./../images/editor/006.png);
}

#editorHerr07 {
	background:	url(./../images/editor/007.png);
}

#editorHerr08 {
	background:	url(./../images/editor/008.png);
}

#editorHerr09 {
	background:	url(./../images/editor/009.png);
}

#editorHerr10 {
	background:	url(./../images/editor/010.png);
}

#editorHerr11 {
	background:	url(./../images/editor/011.png);
}

#editorHerr21 {
	background:	url(./../images/editor/021.png);
}

#editorHerr22 {
	background:	url(./../images/editor/022.png);
}

#editorHerr23 {
	background:	url(./../images/editor/023.png);
}

#editorHerr24 {
	background:	url(./../images/editor/024.png);
}

#editorHerr25 {
	background:	url(./../images/editor/025.png);
}

.editorHistory {
	position: 	absolute;
	top: 		5px;	
	right:		5px;
}

.editorHistory div {
	display: 	block;
	float:		left;
	width:		32px;
	height:		28px;
	margin:		2px;
	opacity:	0.5;
	transition:	all 0.5s ease;
}

.editorHistory div:hover {
	opacity: 	1;
	cursor:		pointer;
}

#editorUndo, #tilemapUndo {
	background:			url(./../images/editor/101.png);
	background-size:	100%;
}

#editorRedo, #tilemapRedo {
	background:			url(./../images/editor/102.png);
	background-size:	100%;
}

#editorHerr01, #editorHerr02, #editorHerr03, #editorHerr04, #editorHerr05, 
#editorHerr06, #editorHerr07, #editorHerr08, #editorHerr09, #editorHerr10, 
#editorHerr11, #editorHerr12, #editorHerr21, #editorHerr22, #editorHerr23,
#editorHerr24, #editorHerr25 {
	background-size:	56px 56px;
	background-repeat:	no-repeat;
}

#INFOgraph, #INFOtilemap {
	position:			fixed;
	background:			rgba(0, 0, 0, 0.4);
	backdrop-filter:	blur(2px);
	border-top:			#000 1px solid;
	color:				#fff;
	text-align:			left;
	bottom:				21px;
	padding:			8px;
	width:				100%;
	min-width:			860px;
}

.infoColor {
	display:		inline-block;
	width:			20px; 
	height:			20px; 
	margin-bottom:	-4px; 
	border:			#fff 1px solid;	
}

.infoColor div {
	width:	100%;
	height:	100%;	
}

#FPGincluir, #FNTincluir {
	display:			inline-block;
	
	border:				3px dashed #ddd;
	background:			rgba(0, 0, 0, 0.5);
	backdrop-filter:	blur(2px);
	
	width:				480px;
	height:				72px;
	margin:				20px;
	padding:			40px;
	
	color:				#fff;
	font-size:			0.8em;
}

#FPGincluir label, #FNTincluir label {
	cursor: 		 pointer;
	line-height: 	 normal;
	text-decoration: underline;
	font-weight: 	 bold;
}

#FPGincluir label:hover, #FNTincluir label:hover {
	color: 			#b72;
	text-decoration: none;
}

#FPGincluir.dragGRAPH, #FNTincluir.dragGRAPH {
	border-color:	rgb(240, 150, 50);
	background:		rgba(240, 150, 50, 0.1);
}

#FPGincluir .preloader, #FNTincluir .preloader {
	margin-top:	10px;	
}

#incluirGRAPH, #incluirFNT, #avisoFPG {
	display:	none;
}

.selectorTiles {
	margin:	45px 10px 0;	
}

#fpgTilemapList {
	width: 				100%;
	height: 			auto;
	max-height: 		128px;
	min-height: 		32px;

	border: 			1px solid #000;
	background: 		#000;

	white-space: 		nowrap;
	display: 			flex;
	align-items: 		baseline;

	overflow: 			auto hidden;
	scrollbar-width: 	thin;
    scrollbar-color: 	#555 #111;
}

#fpgTilemapList .preloader {
	margin-bottom: 40px;
}

#fpgTilemapList > .graficos {
	margin: 		0 2px;
	position: 		relative;
	padding-bottom: 15px;
	min-width:		80px;
}

#fpgTilemapList .graficos img:hover {
	cursor: pointer;
}

#fpgTilemapList .graficos.select {
	border-color: #f00;
}

#fpgTilemapList .graficos.select > div {
	background:	#f00;
	color:		#fff;
}

#listaProcesos, #informacionProceso {
	display:			inline-block;
	overflow:			auto;
	position:			relative;
	
	background:			rgba(0, 0, 0, 0.5);
	backdrop-filter:	blur(2px);
	border: 			1px solid #000;
	
	height: 			calc(100% - 280px);
	min-height: 		230px;
	margin-top:			10px;
	
	color:				#fff;
	font-size:			0.9em;
	text-align:			left;

	scrollbar-width: 	thin;
    scrollbar-color: 	#555 #111;
}

#listaProcesos {
	width: 		30%;
	min-width:	220px;
}

#informacionProceso {
	width: 		30%;
	min-width:	320px;
}

#listaProcesos i {
	width:		30px;
	display: 	inline-block;
	text-align: right;
	padding:	0 5px;
	color:		#bbb;
}

#listaProcesos b {
	display: 	inline-block;
	padding:	0 5px;
	color:		#ca8;
}

#listaProcesos button {
	color:				#ccc;
	font-size: 			1em;
	text-decoration: 	underline;
	border:				0;
	background: 		transparent;
	padding: 			0;
}

#listaProcesos button:hover {
	color: 				rgb(187, 119, 51);
	text-decoration:	none;
	cursor: 			pointer;
}

#listaProcesos button.activate {
	color: 			rgb(187, 119, 51);
	font-weight: 	bold;
	letter-spacing: 1px;
}

#informacionProceso div {
	border: 		1px solid #777;
	border-radius: 	2px;
	margin: 		10px 2px 0; 
	padding: 		3px; 
}

#informacionProceso small {
	color: 			#aaa; 
	position:		absolute; 
	text-shadow:	rgb(0, 0, 0) -1px 0 1px, rgb(0, 0, 0) 1px 0 1px; 
	margin: 		2px 8px;
}

#informacionProceso i {
	width:		140px;
	display: 	inline-block;
	padding:	0 5px;
	color:		#bbb;
}

#informacionProceso input {
	border:		#000 1px solid;
	background:	#ddd;
	color:		#000;
	width:		calc(100% - 160px);
	max-width:  100%;
	min-width:	130px;
}

#informacionProceso input:focus {
	background:	#fff;
}

#informacionProceso input[readonly]{
	background:	#ca8;
	color:		#420;
	cursor:		not-allowed;
}

#verGraficoProceso {
	display:			inline-block;
	overflow:			hidden;
	
	background:			rgba(0, 0, 0, 0.5);
	backdrop-filter:	blur(2px);
	border: 			1px solid #000;
	
	width: 				240px;
	height: 			240px;
	
	margin-top:			10px;
	vertical-align:		top;
	text-align:			center;
}

#siguienteFrame {
	position:	absolute;
	margin: 	258px 0px 0px -242px;
}

.documentacion {
	width:		1020px;
	margin:		auto;
	text-align:	left;
	padding:	10px 30px 40px 30px;
}

.documentacion > img {
	display: 		block;
	width:			100%;
    min-width:		200px;
	max-width:		400px;
	margin: 		auto;
}

.documentacion blockquote > span {
	display: inline-block;
}

.documentacion hr {
	border: 		0;
	border-bottom:	1px solid;
	margin: 		32px;
}

.documentacion > article div[data-name] {
	max-height: 600px;
	overflow: 	hidden;
	transition:	all 0.3s ease-in-out;
}

.documentacion > article div[data-name].not-found {
	max-height: 0px;
}

.ejemplo {
	margin:		0 0 0 20px;
	padding:	2px;
	border:		#bbb 1px solid;
	font-size:	0.8em;
	background:	#eee;
}

.ejemplo a {
	color:				#048;
	text-decoration:	none;
}

.ejemplo a:hover {
	color:	#840;
}

.listadoJuegos {
	display: 				grid;
	grid-template-columns:	1fr 1fr 1fr;
	gap: 					4px;
}

.juego {
	display:			inline-block;
	width:				100%;
	height:				auto;
}

.juego a {
	display:			block;
	border:				#bbb 1px solid;
	background-color:	#ccc;
	width:				100%;
	height:				100%;
	font-size:			0.8em;
	color:				#444;
	text-align:			left;
	text-decoration:	none;
	box-sizing: 		border-box;
	transition:			all 0.5s ease;
}

.juego a:hover {
	border:				#ddd 1px solid;
	background-color:	#eee;
	color:				#b73;
	cursor:				pointer;
}

.juego img {
	float:			left;
	margin:			5px 5px 7px;
	width:			64px;
	border-radius: 	5px;
}

.juego strong {
	font-size: 		1.2em;
	display: 		block;
	margin: 		4px 0 12px;
	text-overflow:	ellipsis;
	overflow: 		hidden;
	white-space: 	nowrap;
}

.juego em {
	display: 	block;
	margin-top: 2px;
}

a.opcion {
	display:			block;
	margin-right:		10px;
	
	font-weight:		bold;
	text-decoration:	none;
	color:				#504f7b;
}

a.opcionPeq, .opcionEmpaquetado {
	display:			inline-block;
	margin:				2px;
	
	font-weight:		normal;
	text-decoration:	none;
	color:				#504f7b;
}

a.opcion:hover, a.opcionPeq:hover, .opcionEmpaquetado:hover, #listaProcesos a:hover {
	color:				#b73;
	text-decoration:	none;
	
	cursor:				pointer;
}

.listadoCodigo {
	margin: 	20px auto 10px auto;
	text-align:	left;
	width:		80%;
}

.consejos {
	margin:		20px auto 20px auto;
	padding:	10px;
	
	border:		1px solid #bbb;
	background:	#ccc;
	
	text-align:	left;
	color:		#333;
	font-size:	0.7em;
	
	width:		70%;
	min-width:	860px;
}

.consejos h1 {
	color:		#555;
	background:	none;
	
	margin:		0;
	padding:	0;
}

.consejos div {
	margin-top:	10px;
}

footer {
	clear:				both;
	position:			fixed;
	z-index:			9999;
	bottom:				0;
	
	width:				100%;
	min-width:			780px;
	height:				18px;

	background-color:	rgb(255, 230, 205);
	border-top:			1px solid #777;
	
	font-size:			0.8em;
	color:				#000;
	
	margin:				0;
	padding:			2px 0;
}

footer div {
	float:	left;
	margin:	0 10px;
}

footer span {
	float: right;
	margin:	0 10px;
}

footer div select {
	color:		#444;
	font-size:	11px;
	appearance: none;
	background-image: url('data:image/svg+xml;utf-8, <svg xmlns="http://www.w3.org/2000/svg" width="293" height="293"><path fill="rgb(187, 102, 0)" d="M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z" /></svg>');
	background-repeat: no-repeat, repeat;
	background-position: right 0.5em top 50%, 0px 0px;
	background-size: 0.65em, 100%;
	border: 1px solid #999;
	border-radius: 2px;
	padding-left: 3px;
	padding-right: 24px;
	height: 17px;
}

/* Botones */
button[data-name='fullcode']::before {
	content: 'fullscreen';
}

button[data-name='sizecode']::before {
	content: 'fullscreen_exit';
}

button[data-name='guardar']::before {
	content: 'file_download';
}

button[data-name='examinar']::before {
	content: 'description';
}

button[data-name='obtener_codigo']::before {
	content: 'cloud_upload';
}

button[data-name='recuperar']::before {
	content: 'cloud_download';
}

button[data-name='buscar']::before {
	content: 'search';
}

button[data-name='remplazar']::before {
	content: 'find_replace';
}

button[data-name='compilar']::before {
	content: 'bug_report';
}

button[data-name='compilando']::before {
	content: 		'rotate_right';

	padding-right: 	0;
	margin-right: 	6px;
	
	animation: 		preloader_animation 1s infinite linear;
}

button[data-name='ejecutar']::before {
	content: 'play_arrow';
}

button[data-name='proyector']::before {
	content: 'ondemand_video';
}

button[data-name='empaquetar']::before {
	content: 'archive';
}

button[data-name='volver']::before {
	content: 'arrow_back';
}

button[data-name='siguiente_frame']::before {
	content: 'skip_next';
}

[data-tip] {
	position: relative;
}

[data-tip]:before {
	content:		'';
	display:		none;
	border-left: 	5px solid transparent;
	border-right: 	5px solid transparent;
	border-bottom: 	5px solid #ccc;
	position:		absolute;
	top:			20px;
	left:			35px;
	z-index:		99;
	font-size:		0;
	line-height:	0;
}

[data-tip]:after {
	display:		none;
	content:		attr(data-tip);
	position:		absolute;
	top:			25px;
	left:			0px;
	padding:		5px 8px;
	background:		#ccc;
	color:			#222;
	z-index:		99;
	font-size: 		0.75em;
	line-height:	18px;
	border-radius: 	3px;
	white-space:	nowrap;
	word-wrap:		normal;
}

@media screen and (max-width: 1090px) {
	.botonMenu {		
		width: 140px;
	}
	
	.menu ul {
		right: -60px;
	}

	.listadoProcesos {	
		width: 193px !important;
	}

	.buscarRemplazar {			
		width: 190px;
	}

	.buscarRemplazar input[type='text'] {
		width: 140px;
	}

	.buscarRemplazar button[type='button'] {
		width:		40px;
		font-size: 	0;
	}

	.buscarRemplazar button[type='button']::before {
		vertical-align: initial;
	}

	#borrarCambios, #exportarGrafico, #exportarTilemap {
		font-size: 0;
	}

	.documentacion {
		width:	auto;
	}
}

@media screen and (max-width: 768px) {
	body {
		overflow-x:	hidden;
	}

	section, .visor, .formulario, footer {
		min-width:	260px;
	}
	
	section {
		padding-bottom:	10px;
	}

	divgo-screen::part(screen) {
		width: 		100%;
		min-width:	280px;
	}
	
	.areaReducida, .areaCompleta {
		width:			100%;
		padding-right:	0;
		overflow: 		hidden;
	}

	.botonMenu {
		width:		110px;	
	}
	
	aside, .opcionesPRG span, .listadoProcesos, .buscarRemplazar, .opcionListado, .menu > li:nth-child(-n+3), .opcionesCompilador span, .opcionesEmpaquetador {
		display:	none !important;
	}

	.menu li.top:nth-child(4) {
		display:	inline-block;
	}

	.menu ul {
		right:		-75px;
	}

	.menu :hover ul.sub {	
		width:		260px;
		height:		auto;
		max-height:	700px;
	}
	
	.botonMenuDesp {
		padding-top: 	1px;
		margin-bottom:  1px;
		width:			260px;
		height:			28px;
	}

	.pestanyas {
		left:		auto;
		width: 		100%;
		position:	relative;
	}

	.opcionesFormulario {
		text-align:	center;
		margin-top:	10px;
	}

	.botonFormulario:not([data-name^='compila']) {
		font-size: 0;
	}

	button:not([data-name^='compila'])::before {
		padding: 0;
		font-size: 24px;
    }

	.consejos, .listadoCodigo {
		min-width: 290px;
	}
	
	.listadoJuegos {
		grid-template-columns: 1fr 1fr;
	}

	.juego img {
		width: 54px;
	}

	#volverArriba {
		bottom:		40px;
	}

	footer {
		z-index:	9900;
		position:	relative;
		overflow:	hidden;
		height:		auto;
		text-align:	center
	}
	
	footer div {
		float:			none;
		display:		inline-block;
		margin-bottom:	4px;
	}

	footer div:nth-child(4) { /* oculta el div del selector de borrado de cache */
		display:	none;
	}

	footer span {
		float:		none;
		display:	block;
		margin:		4px 0px 6px 30px
	}
}

@media screen and (max-width: 480px) {	
	.menu > li:nth-child(5) {
		display: none;
	}

	.menu ul {
		right:		-10px;
	}

	.avisoScreen {
		width:		260px;
		font-size:	0.8em;
	}

	nav {
		margin-right: 26px;
	}

	blockquote {
		margin: 8px 16px;
	}

	.infoMenu {
		width: 			210px;
		margin-right: 	-20px;
	}

	.opcionesFormulario {
		clear:	both;
	}

	.listadoJuegos {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 360px) {
	.infoMenu {
		display: none;
	}

	.consejos {
		min-width: 100%;
		margin: 20px 0 20px -11px;
	}
}