@charset "UTF-8";
@import url('base.css');
@import url('header.css');

main {
	display: flex;
}

header .nav-abajo .eventos {
	background: #1bb9ea;
}

header .nav-abajo .agenda {
	background: #00cfff;
}

section {
	flex: 1;
	margin-bottom: 1.250rem;
}

section .calendario {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	padding-bottom: 0.938rem;
}

section .calendario .fila {
	display: flex;
	justify-content: center;
	margin-top: 0.938rem;
}

section .calendario .fila h1 {
	font-size: 2rem;
	color: #26a9e0;
	font-family: 'Comfortaa', sans-serif;
}

section .calendario .fila a {
	width: 2.750rem;
	height: 2.750rem;
	background-color: #d6d6d6;
	margin: 0 0.031rem;
	border-radius: 0.625rem;
	color: white;
	font-weight: 700;

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

section .calendario .fila .seleccionado {
	background-color: #26a9e0;
}

section .evento {
	border-bottom: 1pt solid rgba(227,93,82,0.25);
	margin: 0 0.789rem;
	padding: 1.65rem 0.789rem;

	display: flex;
	align-items: center;
}

section .evento .detalles {
	margin-left: 0.789rem;
}

section .evento .detalles h1 {
	color: #26a9e0;
}

section .evento .detalles .equipos {
	font-weight: 700;
}

section .evento .detalles .evento-vacio{
	font-weight: 300;
	font-style: italic;
	font-size: 1.25rem;
	color: grey;
}

section .vacio {
	height: 3.406rem;
	margin-left: 3.078rem;
	font-weight: 300;
	font-style: italic;

	display: flex;
	align-items: center;
}

section .vacio a {
	margin-top: 1.875rem;
	padding: 0.938rem;
	background-color: #26a9e0;
	border-radius: 1.875rem;
	font-style: normal;
	color: white;
}

.fab {
	background-color: #fcc367;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 3rem;
	box-shadow: 0 0 0.938rem 0 rgba(0,0,0,0.4);

	position: fixed;
	bottom: 1.250rem;
	right: 2.75rem;

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

.fab img {
	width: 1.875rem;
	height: 1.875rem;
}

.barra-lateral {
	width: 2rem;
	padding: 0.6rem 0 0.6rem 0;
	box-shadow: 0 0 0.938rem 0 rgba(0,0,0,0.4);

	display: flex;
	flex-direction: column;
	align-items: center;
}

.barra-lateral img {
	width: 1rem;
	height: auto;
}

.barra-lateral > * {
	padding: 0.25rem 0 0.25rem 0; 
}