/* Hacemos que body ocupe toda la pantalla */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center;    /* centra vertical */
    background-color: #f0f0f0; /* color de fondo opcional */
    /* background-image: url('/images/under_construction.png'); /* imagen de fondo */
    /* background-repeat: no-repeat;
    /* background-position: center;
    /* background-size: 30% auto; /* reduce la imagen a la mitad del ancho */
}

/* Barra de menú superior */
.menu-superior {
	position: fixed; /* siempre visible en la parte superior */
	top: 0;
	left: 0;
	width: 100%;
	background-color: #333;
	color: white;
	display: flex;
	justify-content: center;
	padding: 10px 0;
	z-index: 1000;
}

.menu-superior a {
	color: white;
	text-decoration: none;
	margin: 0 15px;
}

.menu-superior a:hover {
	text-decoration: underline;
}

/* Barra de menú inferior */
.menu-inferior {
	position: fixed; /* siempre visible en la parte inferior */
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #333;
	color: white;
	display: flex;
	justify-content: center;
	padding: 10px 0;
	z-index: 1000;
}

.menu-inferior a {
	color: white;
	text-decoration: none;
	margin: 0 15px;
}

.menu-inferior a:hover {
	text-decoration: underline;
}

/* Separación del contenido principal de las barras */
.contenido {
	padding-top: 60px; /* espacio para la barra superior */
	padding-bottom: 60px; /* espacio para la barra inferior */
	text-align: center;
}