/**
 * ==========================================================
 * Calendario de Funciones y Eventos
 * ==========================================================
 */


/**
 * ==========================================================
 * Contenedor principal
 * ==========================================================
 */

.calendario-funciones-eventos {
	width: 100%;
	max-width: 300px !important;
	margin-left: auto;
	margin-right: auto;
}

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

	.calendario-funciones-eventos {
		max-width: 100% !important;
	}

}

/**
 * ==========================================================
 * Encabezado
 * ==========================================================
 */

.calendario-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}


/**
 * Contenedor central del título y botón
 */

.calendario-header-centro {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}


/**
 * Título del mes
 */

.calendario-titulo {
	margin: 0;
	text-align: center;
}


/**
 * Botón "Ir al mes actual"
 */

.calendario-hoy {
	margin-top: 20px;
  	margin-bottom: 20px;
	padding: 4px 10px;

	border: 0;
	/*
  	background: transparent;
  	*/

	cursor: pointer;

	font-size: 14px;
	line-height: 1.2;
}


/**
 * Hover del botón "Ir al mes actual"
 */

.calendario-hoy:hover {
	text-decoration: underline;
}


/**
 * Botones de navegación
 */

.calendario-nav {
	border: 0;
	background: #fece5b;

	cursor: pointer;

	font-size: 28px;
	line-height: 1;

	padding: 5px 10px;
}


/**
 * ==========================================================
 * Encabezado de los días de la semana
 * ==========================================================
 */

.calendario-semana {
	display: grid;
	grid-template-columns: repeat(7, 1fr);

	text-align: center;

	font-weight: 600;
}


/**
 * ==========================================================
 * Retícula de días
 * ==========================================================
 */

.calendario-dias {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}


/**
 * ==========================================================
 * Celda de día
 * ==========================================================
 */

.calendario-dia {
	aspect-ratio: 1 / 1;

	border: 1px solid #181918;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	position: relative;

	box-sizing: border-box;
}


/**
 * ==========================================================
 * Días anteriores al inicio del mes
 * ==========================================================
 *
 * Estas celdas son solamente espacios de relleno.
 */

.calendario-dia-vacio {
	background: transparent;
	border: none;

	pointer-events: none;
}


/**
 * ==========================================================
 * Días con actividades
 * ==========================================================
 */

.calendario-dia-con-actividades {
	background: #89bd47;

	cursor: pointer;
}


/**
 * Hover de días con actividades
 */

.calendario-dia-con-actividades:hover {
	background: #fece5b;
	color: #181918;
}


/**
 * ==========================================================
 * Indicadores
 * ==========================================================
 *
 * Los indicadores anteriores (puntos) ya no son necesarios
 * porque la actividad se representa mediante el color de
 * fondo de la celda.
 */

.calendario-indicadores {
	display: none;
}


/**
 * ==========================================================
 * Mensaje de mes sin actividades
 * ==========================================================
 */

.calendario-mensaje-vacio {
	margin-top: 20px;

	padding: 20px;

	text-align: center;

	font-size: 16px;
}


/**
 * ==========================================================
 * Detalle de actividades
 * ==========================================================
 */

.calendario-detalle {
	margin-top: 25px;
}

/**
 * Contenido del detalle
 */

.calendario-detalle-contenido {
	padding: 20px;

	border: 1px solid #181918;
}


/**
 * Encabezado de fecha
 */

.calendario-detalle-contenido h4 {
	margin-top: 0;
  	margin-bottom: 35px;
}


/**
 * Títulos de categorías
 */

.calendario-detalle-contenido h5 {
	margin-bottom: 8px;
}


/**
 * Listas de actividades
 */

.calendario-detalle-contenido ul {
	margin-top: 0;
	margin-bottom: 20px;
}