@import "fonts.css";
@import "floating-message.css";

:root {
	--white-c: #ffffff;
	--gray-c: #C3C3C3;
	--darkblue-c: #150b5b;
	--mediumblue-c: #24149f;
	--lightblue-c: #321BD9;
	--opacityblack-c: rgba(0,0,0,.9);
	--opacityblue-c: rgba(21, 11, 91, .7);
	--error-c: #FF0033;
	--success-c: #28a745;
	--trans-timing: .2s;
	--fze-title: 1.6rem;
	--fze-subtitle: 1.4rem;
	--fze-big: 1.2rem;
	--fze-common: 1rem;
	--fze-little: 0.8rem;
	--border-radius: 5px;
	--bordershadow-c: 0 0 #000;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 15px;
	line-height: 1.5;
	font-family: "Ubuntu";
	color: var(--darkblue-c);
}
html button, html input, html textarea, html label {
	font-size: inherit;
	font-family: inherit;
	color: inherit;
}
body {
	/*background: rgb(0,15,36);
	background: linear-gradient(0deg, rgba(0,15,36,1) 0%, rgba(45,83,122,1) 75%);*/
	background: rgb(0,15,36);
	background: linear-gradient(0deg, rgba(0,15,36,1) 0%, rgba(50,27,217,1) 100%); 
	min-height: 100dvh;
}
.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
main {
	width: 75%;
	margin: 40px auto;
}
#favDialog {
    top: 50%;
    left: 50%;
	transform:translate(-50%,-50%);
}
.principal-buttons {
	grid-template-columns: repeat(3, 1fr);
}
.inside-content {
	text-align: center;
}

/*
	
	CABECERA

 */

	header {
		height: 150px;
	}
	.header-wrapper {
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.header-wrapper .logo-wrapper {
		align-items: center;
		background: var(--white-c); 
		border: 5px solid var(--gray-c);
		border-radius: 50%;
		height: 100%;
		justify-content: center;
		padding: 10px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 150px;
		box-shadow: 0 0 5px 5px rgba(0,0,0,.1);
	}
	.header-wrapper .logo-wrapper.ucla img {
		display: block;
		height: 80%;
	}
	.header-wrapper .logo-wrapper.vrac img {
		display: block;
		width: 100%;
	}
	.header-wrapper .logo-wrapper.ucla {
		left: 0;
	}
	.header-wrapper .logo-wrapper.vrac {
		right: 0;
	}
	.header-wrapper .text-wrapper {
		align-content: center;
		background-color: var(--white-c);
		border: 5px solid rgba(0,0,0,.2);
		min-height: calc(100% - 10px - 10px);
		justify-content: center;
		width: calc(100% - 150px);
		padding: 0 80px;
	}
	.header-wrapper .text-wrapper p {
		font-weight: bold;
		text-align: center;
		width: 100%;
		line-height: 1.2;
	}
	.header-wrapper .system-name {
		font-size: var(--fze-subtitle);
		margin-bottom: 10px;
	}
	.header-wrapper .area-name {
		font-size: var(--fze-common);
		text-transform: uppercase;
	}


/*
	
	CONTENIDO 

 */

	.content-overflow {
		justify-content: space-between;
		margin-top: 20px;
		position: relative;
	}

	/* MENU LATERAL */

	
	.page-menu-wrapper {
		align-content: space-between;
		background-color: var(--white-c);
		border-right: 2px solid var(--darkblue-c);
		padding: 20px;
		width: 200px;
	}
	.content-overflow.no-menu .page-menu-wrapper {
		display: none;
	}
	.page-menu {
		width: 100%;
	}
	.page-menu .sub-page-menu-wrapper:not(:first-child) {
		margin-top: 20px;
	}
	.page-menu .btn-open-sub-page-menu {
		align-items: center;
		background-color: transparent;
		border: none;
		font-weight: 500;
		justify-content: space-between;
		margin-bottom: 15px;
		outline: none;
		width: 100%;
	}
	.page-menu .btn-open-sub-page-menu span {
		text-align: left;
		width: calc(100% - 15px);
	}
	.page-menu .btn-open-sub-page-menu i {
		width: 15px;
	}
	.page-menu .options-menu {
		display: none;
		height: auto;
		opacity: 0;
		overflow: hidden;
		transition: all var(--trans-timing) ease;
	}
	.page-menu .options-menu.display {
		display: block;
	}
	.page-menu .options-menu.show {
		opacity: 1;
	}
	.page-menu ul li {
		list-style: none;
	}
	.page-menu ul li:not(:last-child) {
		margin-bottom: 10px;
	}
	.page-menu ul li a {
		background-color: var(--gray-c);/*var(--darkblue-c);*/
		border-radius: var(--border-radius);
		color: var(--darkblue-c);/*var(--white-c);*/
		display: block;
		font-size: var(--fze-little);
		letter-spacing: 0.5px;
		padding: 10px;
		text-align: center;
		text-decoration: none;
		transition: background var(--trans-timing) ease;
	}
	.page-menu ul li a:hover,
	.page-menu ul li a.current {
		background-color: var(--lightblue-c);
		color: var(--white-c);
	}
	.page-menu form {
		display: block;
		margin-top: 20px;
		position: relative;
	}
	.page-menu form::after {
		background: var(--darkblue-c);
		top: -11px;
		content: "";
		height: 1px;
		left: 50%;
		position: absolute;
		transform: translateX(-50%);
		width: 100%;
	}
	.page-menu .box {
		margin-bottom: 10px;
	}
	.page-menu input,
	.page-menu button {
		font-size: 15px;
	}
	.page-menu .box label {
		margin-bottom: 5px;
	}
	.page-menu .box input {
		border: 2px solid var(--gray-c);
		padding: 5px;
		border-radius: var(--border-radius);
		outline: none;
		transition: all var(--trans-timing) ease;
	}
	.page-menu .box input:focus {
		border-color: var(--darkblue-c);
	}
	.page-menu .box button {
		cursor: pointer;
		display: block;
		margin: 0 auto;
		padding: 5px 10px;
		width: max-content;
	}
	.role-wrapper {
		width: 100%;
		margin-top: 20px;
	}
	.role-wrapper p {
		text-align: center;
		font-size: var(--fze-little);
	}
	.role-wrapper .role {
		font-weight: bold;
	}
	.role-wrapper .other,
	.role-wrapper .admin-unit {
		font-weight: bold;
		font-size: 0.5rem;
	}

	/* CONTENIDO PRINCIPAL */

	.content-wrapper-in {
		background-image: url("../images/background.png");
		background-size: 70% auto;
		background-repeat: no-repeat;
		background-position: center;
		background-color: var(--white-c);
		min-height: 500px;
		padding: 20px;
		position: relative;
	}
	.content-overflow:not(.no-menu) .content-wrapper-in {
		width: calc(100% - 200px);		
	}
	.content-overflow.no-menu .content-wrapper-in {
		width: 100%;
	}

	.page-modal {
		background-color: var(--opacityblack-c);
		display: none;
		left: 0;
		min-height: 100%;
		opacity: 0;
		padding: 20px;
		position: absolute;
		top: 0;
		width: 100%;
		transition: all var(--trans-timing) ease;
	}
	.page-modal.display {
		display: block;
	}
	.page-modal.show {
		opacity: 1;
	}
	.page-modal .button-wrapper {
		flex-direction: row-reverse;
		margin-bottom: 20px;
	}
	.page-modal .btn-modal-exit {
		background-color: var(--lightblue-c);
		border: 2px solid var(--white-c);
		border-radius: var(--border-radius);
		cursor: pointer;
		display: block;
		height: 6px;
		outline: none;
		width: 30px;
	}
	.page-modal .modal-content {
		background-color: var(--white-c);
		border-radius: var(--border-radius);
		padding: 20px;
	}

	h1, h2, h3 {
		font-weight: bold;
		text-align: center;
	}
	h1 {
		font-size: var(--fze-subtitle);
		margin-bottom: 30px;
		margin-top: 10px;
	}
	h2 {
		font-size: var(--fze-big);
		margin-top: 15px;
		text-decoration: underline;
	}
	h3 {
		font-size: var(--fze-common);
	}
	.principal-buttons {
		display: grid;
		grid-gap: 15px;
		margin-bottom: 30px;
	}
	.principal-buttons button, .button-principal  {
		background-color: transparent;
		border: 2px solid var(--darkblue-c);
		border-radius: var(--border-radius);
		color: var(--darkblue-c);
		cursor: pointer;
		display: block;
		font-weight: bold;
		outline: none;
		padding: 10px;
		transition: all var(--trans-timing) ease;
	}
	.button-principal {
		display: inline;
	}
	.principal-buttons button:hover, .button-principal:hover  {
		background-color: var(--darkblue-c);
		color: var(--white-c);
	}
	.first-step {
		margin-bottom: 20px;
	}
	.notice-wrapper {
		background-color: var(--gray-c);
		border-radius: 5px;
		display: none;
		margin-top: 20px;
		padding: 10px;
	}
	.notice-title {
		color: var(--darkblue-c);
		font-weight: bold;
		text-align: center;
	}
	.notice-body {
		color: var(--darkblue-c);
		text-align: center;
	}
	.subcontent .pre-notice {
		display: block;
		font-weight: bold;
		text-align: center;
	}
	.subcontent .reafirm-button {
		background-color: var(--darkblue-c);
		border: 2px solid var(--darkblue-c);
		border-radius: var(--border-radius);
		color: var(--white-c);
		cursor: pointer;
		display: block;
		font-weight: bold;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 20px;
		outline: none;
		padding: 10px 20px;
		transition: all var(--trans-timing) ease;
	}
	/*Theme the Tabulator element*/
	.filter-wrapper {
		margin-bottom: 5px;
	}
	.tabulator {
		border-radius: 10px;
	}
	.tabulator-filters {
		margin-bottom: 20px;
	}
	.tabulator-filters h5,
	.tabulator-title {
		color: var(--mediumblue-c);
		font-size: var(--fze-big);
		font-weight: bold;
		margin-bottom: 10px;
		text-transform: uppercase;
		text-align: center;
	}

/*

	PIE DE PÁGINA

 */

	footer {
		background-color: var(--white-c);
		padding: 20px;
		border-top: 2px solid var(--darkblue-c);		
	}
	footer p {
		font-size: var(--fze-common);
		text-align: center;
	}


@media (max-width: 1100px) {
	main {
		width: 100%;
		margin: 0;
		padding: 40px;
	}

	.content-overflow {
		min-width: calc(600px - 40px * 2);
	}
}

@media (max-width: 800px) {
/*

	CABECERA

*/

	header {
		height: 120px;
	}
	.header-wrapper .logo-wrapper {
		height: 100%;
		width: 120px;
	}
	.header-wrapper .text-wrapper {
		min-height: calc(100% - 10px - 10px);
		width: calc(100% - 90px);
	}
	.header-wrapper .system-name {
		margin-bottom: 5px;
	}
}

@media (max-width: 740px) {
/*

	CABECERA

*/

	header {
		height: auto;
	}
	.header-wrapper .logo-wrapper {
		height: 50px;
		padding: 5px;
		position: absolute;
		top: -25px !important;
		width: 50px;
	}
	.header-wrapper .logo-wrapper.ucla {
		left: calc(50% - 25px - 5px);
		transform: translate(-50%, 0) !important;
	}
	.header-wrapper .logo-wrapper.vrac {
		right: calc(50% - 25px - 5px);
		transform: translate(50%, 0) !important;
	}
	.header-wrapper .text-wrapper {
		min-height: auto;
		padding: 30px 20px 20px 20px;
		width: 100%;
	}
	.header-wrapper .system-name {
		margin-bottom: 10px;
	}
}

@media (max-width: 500px) {
	main {
		padding: 30px;
	}

	.content-overflow {
		min-width: calc(600px - 30px * 2);
	}
}