:root{
	--bg-color: #f7f5f5;
	--border-color: #cfcece;
	--footer-bg-color: #605c5c;

	--color-alerta: #fa5058;
	--color-aviso: cornflowerblue;
	--color-hover: #f2f2f2;
	--color-good: #185959;

	--txt-color-general: #353535;

	--txt-color-titulo: #253c4a;
	--txt-color-subtitulo: gray;
	--txt-color-descripcion: #5d5d5d;
	--txt-color-link: orange;


	/*--btn-color-activo: #ffb75d;*/
	--btn-color-activo: orange;
	--btn-color-hover: #ae6000;
	--btn-bg-color-accion: #e8eaf6;
	--btn-color-accion-txt: #212b83;
	--btn-bg-color-accion-hover: #838fcf;


	--border-color-good: #28a0a0;
	--bg-color-good: #bbe1e1;
	--border-color-alert: #f08887;
	--bg-color-alert: #f9cbcb;
	--border-color-warning: #fbc76e;
	--bg-color-warning: #feecce;
	--border-color-neutral: #d9d9d9;
	--bg-color-neutral:  #ebebeb;

	--heigh-header: 3.8rem;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Ubuntu', sans-serif;
}

#loading {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

body{
	background-color: var(--bg-color);
	display: flex;
	flex-direction: column;
	align-items: center;
}

header {
	width: 100%;
	background-color: white;
	/*border-bottom: solid 1px var(--border-color);*/
	/*padding: 0 1rem;*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 -1px 3px 0px gray;
	z-index: 0;
	position: fixed;
	height: var(--heigh-header);
}

#header__logo {
	height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 1rem;
}

.header__logo__link{
	height: inherit;
}

footer {
	width: 100%;
	background-color: white;
	color: var(--txt-color-general);
	padding: 1rem;
	box-shadow: 0px 0px 4px -1px gray;
}

footer .row{
	display: flex;	
}

footer .col{
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

footer h5,h6{
	text-align: justify;
}

#footer__container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

header img{
	width: 8rem;
}

.header__item {
	height: 100%;
}

.header__btn {
	color: var(--txt-color-general);
	text-decoration: none;
	padding: 0 1rem;
	display: flex;
	height: inherit;
	justify-content: center;
	align-items: center;
}

.header__btn:hover {

	background-color: var(--bg-color);
}

#wrapper {
	width: 800px;
	/* background-color: white; */
	display: flex;
	/* justify-content: center; */
	flex-direction: column;
	margin-top: var(--heigh-header);
	/* height: 100vh; */
	min-height: 100vh;
	max-height: 100%;
}

#aviso {
	background-color: var(--color-aviso);
	margin: 1rem;
	border-radius: 8px;
	padding: 1rem;
	color: white;
}

#aviso h3{
	margin-top: 1rem;
}

.hero {
	padding: 1rem;
	border-bottom: solid 1px var(--border-color);
	display: flex;
	height: 300px;
	background-color: white;
}

.hero__col {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero__reverse{
	flex-direction: row-reverse;
}

.hero__image{
	width: 100%;
	height: 100%;
}

.hero__image img{
	width: inherit;
	height: inherit;
}

.hero__text h1 {
	color: var(--txt-color-titulo);
}

.hero__text h2 {
	color: gray;
	font-size: 18px;
	margin-bottom: .5rem;
}

.hero__text h3 {
	color: var(--txt-color-descripcion);
	font-size: 16px;
	margin: 1rem 0;
	text-align: justify;
}

.hero__text h4 {
	color: var(--txt-color-subtitulo);
}

.hero__text a {
	color: var(--txt-color-link);
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

.hero__image {
	width: 100%;
	text-align: center;
}

#desktop__section {
	/* margin-top: 1rem; */
	padding: 0 0rem calc(var(--heigh-header) + 1rem);
}

#desktop__reply{
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: center; */
	width: 100%;
	/* margin-top: 1rem; */
	/* height: calc(100vh - var(--heigh-header)); */
	padding: 0 0rem calc(var(--heigh-header) + 1rem);
}

.frm__container {
	/* width: 560px; */
	/* display: flex; */
	/* flex-direction: column; */
	/* align-items: center; */
	margin: 0 1rem;
	background-color: white;
	border-radius: 8px;
}

.frm__container h2 {
	text-align: center; 
	font-weight: normal;
	color: var(--txt-color-titulo);
	/* margin: 0 1rem; */
	padding: 1rem 1rem 0;
}

.frm__container h4 {
	margin-top: 1rem;
	font-weight: normal;
	text-align: justify;
	padding: 0 1rem;
}

.frm__container form {
	display: flex;
	flex-direction: column;
/*	border: solid 1px var(--border-color);*/
	width: inherit;
	padding: 1rem;
	gap: 1rem;
}

form input {
	border: solid 1px #ced4da;
	border-radius: 8px;
	padding: 1rem;
	font-size: 18px;
}

form input.error {
	border-color: red;
	border-width: 2px;
}

form label.error {
	color: red;
	font-size: .8rem;
}

form .btn__secundario {
	background-color: white;
	color: var(--btn-color-activo);
	/*width: max-content;*/
	border: none;
	text-decoration: none;
	text-align: center;
}

form .btn__secundario:hover {
	color: var(--btn-color-hover);
	text-decoration: underline;
}

form .btn__primario {
	background-color: var(--btn-color-activo);
	color: white;
	border-style: solid;
	border-color: var(--btn-color-activo);
	border-radius: 8px;
	padding: .8rem;
	font-size: 18px;
}

form .btn__primario:hover {
	background-color: var(--btn-color-hover);
	border-color: var(--btn-color-hover);
}

/* Es lo mismo que arriba pero se uso para links */

.btn__primario {
	background-color: var(--btn-color-activo);
	color: white;
	border-style: solid;
	border-color: var(--btn-color-activo);
	border-radius: 8px;
	padding: .8rem;
	font-size: 18px;
	text-decoration: none;
}

.btn__primario:hover {
	background-color: var(--btn-color-hover);
	border-color: var(--btn-color-hover);
}

form span{
	text-align: center;
	color: var(--txt-color-general);
}

.parent__style {
	display: contents;
}

.msg{
	border-style: solid;
	border-width: 1px;
	border-radius: 8px;
	text-align: center;
	padding: 1rem;
}

.msg__alerta{
	border-color: var(--color-alerta);
	background-color: var(--color-alerta);
	color: white;
}

#taskbar__footer {
	display: none;
}

.task_bar__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.elemento__oculto{
	display: none;
}

.btn__accion {
	background-color: var(--btn-bg-color-accion);
	border: solid 1px var(--btn-bg-color-accion);
	color: var(--btn-color-accion-txt);
	padding: 1rem;
	border-radius: 8px;
	text-decoration: none;
	margin-right: .25rem;
	user-select: none;
	font-size: 1rem;
	cursor: pointer;
}

.btn__accion:hover{
	background-color: var(--btn-bg-color-accion-hover);
	color: white;
	border: solid 1px var(--btn-color-accion-txt);
}

#taskbar__header {
	display: flex;
	min-width: 300px;
	width: 800px;
	justify-content: space-around;
}

#notificaciones__stream {
	position: fixed;
	top: 61px;
	background-color: white;
	border: solid 1px var(--border-color);
	bottom: unset;
	right: 0;
	box-shadow: -1px 1px 6px 0px var(--border-color);
}

.notificacion {
	border-bottom: solid 1px var(--border-color);
	padding: .5rem;
	list-style: none;
	display: flex;
}

.notificacion__avatar {
	background-color: white;
	width: 2.3rem;
	height: 2.3rem;
	margin-right: .5rem;
	border-radius: 12px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-size: cover;
	border: solid 2px var(--border-color-neutral);
}

.notificacion__contenido {
	width: 100%;
}

.notificacion__negrita {
	font-weight: bold;
}

.notificacion__aula {
	font-size: .9rem;
	color: var(--txt-color-subtitulo);
}

.notificacion__fecha {
	font-size: .85rem;
	color: var(--txt-color-subtitulo);
	text-align: right;
}

.notificacion__link{
	text-decoration: none;
	color: var(--txt-color-titulo);
}

#notificaciones__panel__stream {
	background-color: white;
	margin: 1rem 1rem calc(var(--heigh-header) + 1rem);
}

@media screen and (max-width: 768px){
	#wrapper{
		width: 100%;
	}

	#aviso h2{
		text-align: center;
	}

	#aviso h3{
		text-align: justify;
	}

	.hero{
		flex-direction: column;
		height: 100%;
		padding: 1rem 2rem;
	}

	.hero__col{
		width: 100%;
	}

	.hero__image {
		margin-bottom: 1rem;
	}

	footer .row{
		flex-direction: column;
	}

	footer .col{
		width: 100%;
	}

	#footer__container {
		margin-top: 1rem;
	}

	.frm__container {
		width: -moz-available;
		/* padding: 0 1rem; */
	}

	#taskbar__footer {
		position: fixed;
		bottom: 0;
		box-shadow: 0 1px 3px 0px gray;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		background-color: white;
		height: var(--heigh-header);
	}

	#taskbar__header{
		display: none;
	}

	#notificaciones__stream {
		top: unset;
		bottom: 61px;
		box-shadow: 0px 0px 6px 1px var(--border-color);
	}
}