<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link rel="icon" type="image/png" href="libreria/imagenes/favicon.png" sizes="64x64">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Inicio de sesión</title>
	<link rel="stylesheet" type="text/css" href="libreria/css/jquery-ui.css">
	<script language="JavaScript" type="text/javascript" src="libreria/js/jquery.min.js"></script>
	<script language="JavaScript" type="text/javascript" src="libreria/js/jquery-ui.js"></script>
</head>
<style>
/* https://www.svgrepo.com/collection/solar-broken-line-icons/ */
@font-face {
  font-family: 'casaseguridad_font';
  src: url('libreria/css/NunitoSans.woff2') format('woff2'); 
  /* Puedes proporcionar múltiples fuentes y formatos compatibles para mayor compatibilidad de navegadores */
  /* src: url('ruta/a/mi-fuente.woff') format('woff'),
          url('ruta/a/mi-fuente.ttf') format('truetype'); */
}
html{
	margin: 0px;
	padding: 0px;
	border: 0px;
	width:100%;
	height:100%;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background: linear-gradient(135deg,  #edfcff 0%,#9ee8fa 100%);
	font-family:casaseguridad_font;
	font-size: 12px;
	background-image: url( 'libreria/imagenes/background.svg' );
}
body{
	width: 100%;
	height:100%;
	margin: 0px;
	padding: 0px;
	border: 0px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: flex-start;
	overflow: auto;
}
.box_sesion{
	width: 90%;
	height: 350px;
	max-width: 300px;
	max-height: 450px;
	backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	border: 3px solid #ffffff;
}
.box_sesion .header{
	width:80%;
	padding: 20px 5px;
	margin: auto;
	margin-top: -20px;
	background-color: #01baf0;
	text-align: center;
	font-size:18px;
	text-transform: uppercase;
	font-weight: bold;
	color: #ffffff;
	user-select: none;
}
.box_sesion .image_user{
	width:100%;
	height: 150px;
	text-align: center;
}
.box_sesion .image_user svg{
	height: 100%;
}
.box_sesion .image_user svg circle, .box_sesion .image_user svg path{
	stroke: #BFBFBF;
}
.box_sesion .input_text{
	width: 80%;
	height: 35px;
	margin: auto;
	padding: 0px 5px;
	border: 1px solid #cccccc;
	border-radius: 10px;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
}
.box_sesion .input_text svg{
	width: 30px;
	height: 30px;
}
.box_sesion .input_text div{
	width: 2px;
	height: 20px;
	margin: 0px 5px;
	background-color: rgb(28, 39, 76);
}
.box_sesion .input_text input{
	flex:1;
	height: 80%;
	margin: 0px;
	padding: 0px;
	border: 0px;
	color: rgb(28, 39, 76);
	font-size: 16px;
}
.box_sesion .input_text input:focus{
	outline: none;
}
.box_sesion .input_text:focus-within{
	border:1px solid rgb(28, 39, 76);
}
.box_sesion .btn_element{
	width: 80%;
	margin: auto;
	padding: 10px 5px;
	border-radius: 10px;
	background-color: #01baf0;
	color: #ffffff;
	text-align: center;
	font-size:18px;
	cursor: pointer;
	text-align: center;
}
/** WINDOW DIALOG **/
.background_window{
	z-index: 9000;
	width: 100%;
	height: 100%;
	position: fixed;
	display: none;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	overflow: auto;
	backdrop-filter: blur(5px);
}
.background_window .window{
	width:80%;
	height: 80%;
	max-width:80%;
	max-height: 80%;
	border: 1px solid #999999;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	background-color:rgba(255,255,255,0.7);
}
.background_window .window .window_title{
	padding: 0px 5px;
	height: 30px;
	background-color:rgba(255,255,255,0.7);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	user-select: none;
}
.background_window .window .window_title .btn_close{
	cursor:pointer;
}
.background_window .window .window_body{
	width:99%;
	margin: auto;
	flex: 1;
	overflow: auto;
}
.background_window .window .window_body .subtitle{
	text-align: center;
	font-weight: bold;
	padding: 5px 0px;
}
.background_window .window .window_buttons{
	padding: 0px 5px;
	border-top: 1px solid #dddddd;
	height: 30px;
	background-color:#F6F5F4;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	user-select: none;
}
.background_window .window .window_buttons div, .background_window .window .window_buttons select{
	min-width: 100px;
	height: 25px;
	background: #cccccc;
	margin: 0px 5px;
	cursor:pointer;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 0px;
	border: 0px;
}
.background_window .window .window_buttons div:focus, .background_window .window .window_buttons select:focus{
	outline: none;
}
.background_window .window .window_buttons div:hover, .background_window .window .window_buttons select:hover{
	background: #dddddd;
}
#_dialogo_alert .window{
	max-width:350px;
	max-height:140px;
}
#_dialogo_alert .window .window_body{
	padding: 15px;
}
</style>
<body>
	<div class="background_window" id="_dialogo_alert">
		<div class="window">
			<div class="window_title">
				<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 17V11" stroke="#a2c200" stroke-width="1.5" stroke-linecap="round"></path> <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#a2c200"></circle> <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#a2c200" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
				<div>Alerta</div>
				<span style="width:25px;"></span>
			</div>
			<div class="window_body">
			</div>
			<div class="window_buttons">
				<span style="flex:1;"></span>
				<div class="btn_close">Cerrar</div>
			</div>
		</div>
	</div>
	<section class="box_sesion">
		<div class="header">Iniciar Sesión</div>
		<div class="image_user">
			<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="9" r="3" stroke="#1C274C" stroke-width="1.5"></circle> <path d="M17.9691 20C17.81 17.1085 16.9247 15 11.9999 15C7.07521 15 6.18991 17.1085 6.03076 20" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
		</div>
		<div class="input_text">
			<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="6" r="4" stroke="#1C274C" stroke-width="1.5"></circle> <path d="M19.9975 18C20 17.8358 20 17.669 20 17.5C20 15.0147 16.4183 13 12 13C7.58172 13 4 15.0147 4 17.5C4 19.9853 4 22 12 22C14.231 22 15.8398 21.8433 17 21.5634" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
			<div></div>
			<input type="text" id="txt_username" name="txt_username" />
		</div>
		<div style="height:10px;"></div>
		<div class="input_text">
			<svg id="btn_password" style="cursor:pointer;" width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M9 16C9 16.5523 8.55228 17 8 17C7.44772 17 7 16.5523 7 16C7 15.4477 7.44772 15 8 15C8.55228 15 9 15.4477 9 16Z" fill="#1C274C"></path> <path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z" fill="#1C274C"></path> <path d="M17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16Z" fill="#1C274C"></path> <path d="M6 10V8C6 7.65929 6.0284 7.32521 6.08296 7M18 10V8C18 4.68629 15.3137 2 12 2C10.208 2 8.59942 2.78563 7.5 4.03126" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M11 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.75736 10 5.17157 10 8 10H16C18.8284 10 20.2426 10 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>
			<div></div>
			<input type="password" id="txt_password" name="txt_password" />
		</div>
		<div style="height:10px;"></div>
		<div class="btn_element" id="btn_ingresar">Ingresar</div>
	</section>
</body>
<script>
function open_dialog_message(mensaje){
	let max_height = $("#_dialogo_alert .window").innerHeight();
	let title_height = $("#_dialogo_alert .window .window_title").outerHeight();
	let buttons_height = $("#_dialogo_alert .window .window_buttons").outerHeight();
	$("#_dialogo_alert .window .window_body").height(max_height-(title_height+buttons_height));
	$("#_dialogo_alert .window_title").children().first().html('<g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M16 2H8C4 2 2 4 2 8V21C2 21.55 2.45 22 3 22H16C20 22 22 20 22 16V8C22 4 20 2 16 2ZM14 15.25H7C6.59 15.25 6.25 14.91 6.25 14.5C6.25 14.09 6.59 13.75 7 13.75H14C14.41 13.75 14.75 14.09 14.75 14.5C14.75 14.91 14.41 15.25 14 15.25ZM17 10.25H7C6.59 10.25 6.25 9.91 6.25 9.5C6.25 9.09 6.59 8.75 7 8.75H17C17.41 8.75 17.75 9.09 17.75 9.5C17.75 9.91 17.41 10.25 17 10.25Z" fill="#00ff00"></path> </g>');
	$("#_dialogo_alert .window_title div").html("Mensaje");
	$("#_dialogo_alert .window_body").html(mensaje);
	$("#_dialogo_alert").css("display", "flex");
}
function open_dialog_alert(mensaje){
	let max_height = $("#_dialogo_alert .window").innerHeight();
	let title_height = $("#_dialogo_alert .window .window_title").outerHeight();
	let buttons_height = $("#_dialogo_alert .window .window_buttons").outerHeight();
	$("#_dialogo_alert .window .window_body").height(max_height-(title_height+buttons_height));
	$("#_dialogo_alert .window_title").children().first().html('<g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g clip-path="url(#clip0_949_22799)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.82664 2.22902C10.7938 0.590326 13.2063 0.590325 14.1735 2.22902L23.6599 18.3024C24.6578 19.9933 23.3638 22 21.4865 22H2.51362C0.63634 22 -0.657696 19.9933 0.340215 18.3024L9.82664 2.22902ZM10.0586 7.05547C10.0268 6.48227 10.483 6 11.0571 6H12.9429C13.517 6 13.9732 6.48227 13.9414 7.05547L13.5525 14.0555C13.523 14.5854 13.0847 15 12.554 15H11.446C10.9153 15 10.477 14.5854 10.4475 14.0555L10.0586 7.05547ZM14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18Z" fill="#ffff00"></path> </g> <defs> <clipPath id="clip0_949_22799"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </g>');
	$("#_dialogo_alert .window_title div").html("Alerta");
	$("#_dialogo_alert .window_body").html(mensaje);
	$("#_dialogo_alert").css("display", "flex");
}
$(document).ready(function() {
	$("#_dialogo_alert .btn_close").click(function (){
		$("#_dialogo_alert").css("display", "none");
		$("#_dialogo_alert .window_body").html("");
	});
	$("#btn_password").click(function(){
		if ($("#txt_password").attr("type") == "password"){
			$("#txt_password").attr("type", "text");
		} else {
			$("#txt_password").attr("type", "password");
		}
	});
	$("#txt_username, #txt_password").keyup(function(e){
		if(e.keyCode == 13){
			$("#btn_ingresar").click();
		}
	});
	$("#btn_ingresar").click(function(){
		let txt_username = $("#txt_username").val().trim();
		let txt_password = $("#txt_password").val().trim();
		$("#dv_mensaje").html("");
		$.ajax({
			type: 'POST',
			dataType: "json",
			url: "control/ctrl_sesion.php",
			data: {
				accion: "iniciar_sesion",
				txt_username: txt_username,
				txt_password: txt_password,
			},
			success: function (datos) {
				if (datos.estado == "ok") {
					window.location = datos.datos;
				} else if (datos.estado == "error") {
					open_dialog_alert(datos.mensaje);
				} else {
					open_dialog_alert("Ocurrio un error inesperado.");
				}
			},
			error: function (){
				open_dialog_alert("Ocurrio un error inesperado.");
			}
		});
	});
});
</script>
</html>
