<?php
if (!isset($_SESSION["Usuario"]) || ($_SESSION["Grupo"] != GRUPO_ADMINS && $_SESSION["Grupo"] != GRUPO_SUPERVISORES)) {
    header('Location: /' . RUTA_MAESTRA);
}

$idioma = "es";
if (isset($_COOKIE["idioma"])) {
    $idioma = isset($_COOKIE["idioma"]) ? $_COOKIE["idioma"] : "es";
}

?>
<!DOCTYPE html>
<html translate="no" lang="es">
<!--================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 4.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
  ================================================================================ -->

<!-- Mirrored from pixinvent.com/materialize-material-design-admin-template/html/horizontal-menu/ by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 07 Aug 2018 16:54:03 GMT -->

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">
	<meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">
	<title>
		<?=SITE_NAME;?>
	</title>
	<!-- Favicons-->
	<link rel="icon" href="<?=IMG_ADMIN;?>favicon/icono.png" sizes="64x64">
	<!-- Favicons-->
	<link rel="apple-touch-icon-precomposed" href="<?=IMG_ADMIN;?>favicon/apple-touch-icon-152x152.png">
	<!-- For iPhone -->
	<meta name="msapplication-TileColor" content="#00bcd4">
	<meta name="msapplication-TileImage" content="<?=IMG_ADMIN;?>favicon/mstile-144x144.html">
	<!-- For Windows Phone -->
	<!-- CORE CSS-->
	<link href="<?=CSS_ADMIN;?>themes/horizontal-menu/materialize.css" type="text/css" rel="stylesheet">
	<link href="<?=CSS_ADMIN;?>themes/horizontal-menu/style.css" type="text/css" rel="stylesheet">
	<!-- Custome CSS-->
	<link href="<?=CSS_ADMIN;?>custom/custom.css" type="text/css" rel="stylesheet">
	<!-- CSS style Horizontal Nav-->
	<link href="<?=CSS_ADMIN;?>layouts/style-horizontal.css" type="text/css" rel="stylesheet">
	<!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
	<link href="<?=VENDORS_ADMIN;?>perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet">
	<link href="<?=VENDORS_ADMIN;?>jvectormap/jquery-jvectormap.css" type="text/css" rel="stylesheet">
	<link href="<?=CSS_ADMIN;?>flag-icon.css" type="text/css" rel="stylesheet">
	<link href="<?=CSS_ADMIN;?>plugins/datepicker.css" type="text/css" rel="stylesheet">

	<style>

		[v-cloak] {
			display: none;
		}
		.tooltip {
			pointer-events: none;
		}

		thead th {
			background: #bbdefb;
		}

		tfoot {
			font-weight: bold;
		}

		thead th:first-of-type {
			border-top-left-radius: 10px;
		}

		thead th:last-of-type {
			border-top-right-radius: 10px;
		}

		td {
			padding-top: 0px;
			padding-bottom: 0px;
		}

		.headerMenu {
			width: 80px;
		}

		table.highlight tbody tr:hover {
			background-color: #e0e0e0 !important;
		}

		table.striped>tbody>tr:nth-child(odd) {
			background-color: rgba(231, 231, 231, 0.5);
		}
		.dropdown-content li{
			min-height: 0px;
			max-height: 40px;
		}
		.dropdown-content li a{
			max-height: 40px;
		}
		.dropdown-content li a i{
			font-size: 1.2rem;
		}

		.grad1{

			background: rgba(252,234,187,1);
			background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
			background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(50%, rgba(252,205,77,1)), color-stop(51%, rgba(248,181,0,1)), color-stop(100%, rgba(251,223,147,1)));
			background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
			background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
			background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
		}

		.grad2{

			background: rgba(248,80,50,1);
			background: -moz-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(246,41,12,1) 0%, rgba(241,111,92,1) 50%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
			background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(0%, rgba(246,41,12,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));
			background: -webkit-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(246,41,12,1) 0%, rgba(241,111,92,1) 50%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
			background: -o-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(246,41,12,1) 0%, rgba(241,111,92,1) 50%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
			background: -ms-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(246,41,12,1) 0%, rgba(241,111,92,1) 50%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
			background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(246,41,12,1) 0%, rgba(241,111,92,1) 50%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );
		}

		.grad3{

			background: rgba(210,255,82,1);
			background: -moz-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
			background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,1)), color-stop(100%, rgba(145,232,66,1)));
			background: -webkit-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
			background: -o-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
			background: -ms-linear-gradient(left, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
			background: linear-gradient(to right, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842', GradientType=1 );

		}

		.grad4{

			background: rgba(179,220,237,1);
			background: -moz-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
			background: -webkit-gradient(left top, right top, color-stop(0%, rgba(179,220,237,1)), color-stop(50%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
			background: -webkit-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
			background: -o-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
			background: -ms-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
			background: linear-gradient(to right, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1 );

		}

		.superCenter{

			display: flex;
			align-items: center;
			justify-content: center;
		}

		.superLeft{

			display: flex;
			align-items: center;
			justify-content: left;
		}

		.btnW {
			background-color:#3399cc;
			background-size: 0% 100%;
			border:none;
			border-radius:4px;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW:hover {
			background-color:#6bc3ef;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.bordA{

			border-style: solid;
			border-color: #40c4ff;
			border-radius: 6px;
		}

		.btnW1 {
			background-color:#ef5350;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW1:hover {
			background-color:#e57373 ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW2 {
			background-color:#00bfa5;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW2:hover {
			background-color:#1de9b6;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW3 {
			background-color:#2e7d32 ;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW3:hover {
			background-color:#66bb6a;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW5 {
			background-color:#c0ca33 ;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW5:hover {
			background-color:#d4e157 ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW6 {
			background-color:#ffc107  ;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW6:hover {
			background-color:#ffd54f;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW7 {
			background-color:#6d4c41  ;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW7:hover {
			background-color:#8d6e63  ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW8 {
			background-color:#ff5722  ;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW8:hover {
			background-color:#ff8a65 ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW9 {
			background-color:#9575cd  ;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW9:hover {
			background-color:#b39ddb ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW10 {
			background-color:#283593;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW10:hover {
			background-color:#3949ab ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW11 {
			background-color:#1976d2;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW11:hover {
			background-color:#1e88e5 ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW12 {
			background-color:#ab47bc;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW12:hover {
			background-color:#ba68c8 ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

		.btnW13 {
			background-color:#ec407a ;
			background-size: 0% 100%;
			border:none;
			border-radius:0;
			color:#fff;
			outline:none;
			text-decoration:none;
			transition: background-color .5s;
		}

		.btnW13:hover {
			background-color:#f06292  ;
			background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
			background-repeat:no-repeat;
			background-size: 200% 100%;
			transition:background-size 1s, background-color 1s;
		}

	</style>
	<link href="<?=CSS_ADMIN;?>animate.css" type="text/css" rel="stylesheet">
	<script src="<?=JS_ADMIN;?>smooth-scroll.polyfills.min.js"></script>
	<script src="<?=JS_ADMIN;?>material-dialog.js"></script>
	<script src="<?=JS_ADMIN;?>gettext.js" type="text/javascript"></script>
	<script src="<?=JS_ADMIN;?>traduccion.js?version=<?= md5_file(RUTA_APP . "public/homeAdmin/js/traduccion.js"); ?>" type="text/javascript"></script>
	<script>seleccionarIdioma("<?=$idioma;?>")</script>
</head>


</head>

<body id="layouts-horizontal" class="">
	<!-- Start Page Loading -->
	<!-- End Page Loading -->
	<!-- //////////////////////////////////////////////////////////////////////////// -->
	<!-- START HEADER -->
	<div id="main" v-cloak>
	<header id="header" class="page-topbar">
		<div class="navbar-fixed">
			<!-- Barra superior -->
			<?php require_once UTILS_PATH . "toolBar.php";?>
            <!-- Barra superior -->
            <script>document.getElementById("<?=$idioma;?>").selected=true;</script>
            <!-- Barra que contiene los menus -->
                <?php require_once UTILS_PATH . "navigationBar.php";?>
            <!-- Barra que contiene los menus -->
		</div>
		<script>
			document.addEventListener('DOMContentLoaded', function () {
				//Esconde el switch para mostrar Navbar
				var navigationBarSwitchElement = document.getElementById('navigationBarSwitch');
				navigationBarSwitchElement.style.visibility = "hidden";

				var elems = document.querySelectorAll('.dropdown-trigger');
				var instances = M.Dropdown.init(elems, {
					'hover': true,coverTrigger: false
				});

				
			});
			var white =
				"linear-gradient(to right, #ece9e6, #ffffff)";
			var black =
				"linear-gradient(to right, #000000, #434343)"
			var backSwitch = localStorage.getItem('background');
			if (backSwitch == null) {
				localStorage.setItem('background', 'white');backSwitch='white';
			}
			if (backSwitch == 'white') {
				document.body.style.background = white;
				document.getElementById("backgroundSwitch").checked = true;
			}
			if (backSwitch == 'black') {

				document.body.style.background = black;
				document.getElementById("backgroundSwitch").checked = false;
			}
			document.getElementById("backgroundSwitch").addEventListener("click", switchBack);

			function switchBack() {
				var checkBox = document.getElementById("backgroundSwitch");
				if (localStorage.getItem('background') == "white") {

					localStorage.setItem('background', 'black');
					location.reload();
				} else if (localStorage.getItem('background') == "black") {

					localStorage.setItem('background', 'white')
					location.reload();
				}
			}

			//Comentando esta función porque ya no se necesita
			// function hideBar() {
			// 	var y = document.getElementById('horizontal-nav');
			// 	if (y.style.display === "none") {
			// 		$('#horizontal-nav').removeClass('animated')
			// 		$('#horizontal-nav').removeClass('slideOutUp')
			// 		$('#horizontal-nav').addClass('animated slideInDown faster')
			// 		setTimeout(function () {
			// 			y.style.display = "block";
			// 		}, 500)
			// 	} else {
			// 		$('#horizontal-nav').removeClass('animated')
			// 		$('#horizontal-nav').removeClass('slideInDown')
			// 		$('#horizontal-nav').addClass('animated slideOutUp faster')
			// 		setTimeout(function () {
			// 			y.style.display = "none";
			// 		}, 500)
			// 	}
			// }
		</script>

		<!-- HORIZONTL NAV START-->

	</header>
	<?php require_once UTILS_PATH . 'htmlMenu.php';?>

		<!-- START WRAPPER -->
		<div class="wrapper">
			<!-- START LEFT SIDEBAR NAV-->