/* Estilos generales */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: #000000 url(escudonse.png) no-repeat fixed bottom right;
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column; /* Cambiamos a columna para apilar el menú arriba y el contenido abajo */
	height: 100vh;
	align-items: center;
	scrollbar-face-color: #00FF00; 
	scrollbar-shadow-color: #111111;
	scrollbar-highlight-color: #111111; 
	scrollbar-3dlight-color: #999999;
	scrollbar-darkshadow-color: #505050; 
	scrollbar-track-color: #ddddde;
	scrollbar-arrow-color: #111111;
}

/* Contenedor principal que envuelve todo */
.contenedor-principal {
	display: flex;
	flex-direction: column; /* Apila los elementos verticalmente: cabecera, medio, pie */   
	max-width: 900px;
	margin: 10px;
	padding: 10px;
	background: #009900;
	border: 0px solid #ccc; /* Opcional: para visualizar los límites */
	justify-content: center; /* Centra horizontalmente */
	align-items: center;    /* Centra verticalmente */
}
.contenedor-principal a:link { color: 000000 ; background-color:none ; text-decoration:underline ; } /* enlace no visitado*/
.contenedor-principal a:visited { color: 000000 ; background-color:none ; text-decoration:underline ; } /* enlace visitado */
.contenedor-principal a:active { color: 000000 ; background-color:none ; text-decoration:underline ; } /* enlace activo (pulsado) */
.contenedor-principal a:hover { color: #FFD700 ; background-color: 000000 ; text-decoration:none ; } /* ratón en el enlace, sin pulsar. */

/* Cabecera: Ocupa todo el ancho */
.cabecera {
	width: 100%;
	max-width: 900px;
	background-color: #00FF00;
	border: 3px solid black;
	padding: 0px;
	margin: 0px;
	align-items: center;
	text-align: center;
}

/* Sección intermedia que contiene el lateral y el contenido principal */
.cuerpo-medio {
	display: flex;          /* Coloca el lateral y el principal lado a lado */
	flex-direction: row;    
	width: 100%;
	max-width: 900px;
	border: 3px solid black;
	border-top: 0px;
	background-color: #00FF00;
	padding: 0px;
	margin: 0px;
}

/* Div lateral estrecho */
.lateral {
	width: 25%;             /* Ancho ajustable para que sea estrecho */
	padding: 5px;
	max-width: 200px;
	justify-content: center; /* Centra horizontalmente */
	align-items: center;    /* Centra verticalmente */
	border-right: 3px solid black;
	text-align: center;
}
.lista-lateral {
	/* Quita la decoración por defecto (puntos/viñetas) */
	list-style: none;
	padding: 0;
	margin: 0;
}
.lateral img{
	width: 100%;
}
.lista-lateral > li:nth-child(10) > font:nth-child(1) > br:nth-child(1) {
	content: "";
	display: block;
	margin-top: -30px;
}
.images{
	height: 100%;
	align-content: center;
	line-height: 3;
}
.images a:link { color: #00FF00 ; background-color:none ; text-decoration:underline ; } /* enlace no visitado*/
.images a:visited img { border: 2px solid #00FF00 ; background-color:none ; text-decoration:underline ; } /* imagen-enlace visitado */
.images a:active { color: #00FF00 ; background-color:none ; text-decoration:underline ; } /* enlace activo (pulsado) */
.images a:hover { color: #00FF00 ; background-color: 000000 ; text-decoration:none ; } /* ratón en el enlace, sin pulsar. */
.images a:link img { border: 2px solid #00FF00 ; background-color:none ; text-decoration:none ; } /* imagen-enlace no visitado */

/* Div principal (ocupa el resto del ancho) */
.contenido-principal {
	width: 75%;             /* Completa el 100% junto con el lateral (25% + 75%) */
	background-color: #ffffff;
	padding: 0px;
}

/* Menú Apaisado (Horizontal) */
nav {
	background-color: #009900;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between; /* Separa el título de los enlaces */
	padding: 10px 5px;
	width: 100%;
	text-align: center;
}
nav ul {
	list-style: none;
	display: flex; /* Coloca los elementos uno al lado del otro */
	gap: 0px;    /* Espacio entre los botones del menú */
	justify-content: space-between;
	width: 100%;
}
nav ul li a {
	color: #FFD700!important;
	text-decoration: none!important;
	display: block;
	padding: 8px 10px;
	border-radius: 4px;
	transition: background 0.3s;
}
nav ul li a:hover {
	background-color: #00FF00!important;
	color: #000000!important;
}

/* Contenido principal (Iframe) */
main {
	flex: 1; /* Ocupa el resto de la altura de la pantalla */
	display: flex;
	flex-direction: column;
	padding: 5px;
	height: 500px;
	background-color: #00FF00;
}
.iframe-container {
	flex: 1;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	overflow: hidden;
	display: flex;
}
iframe {
	width: 100%;
	height: 100%;
	border: none;
}
.pagina-hija {
	background-color: #00FF00;
	padding: 10px;
	text-align: justify;
}
.pagina-hija p {
	margin-bottom: 4px;
}
.imagen-hija {
	text-align: center;
	padding-bottom: 10px;
}

/* Piecera: Ocupa todo el ancho en la parte inferior */
.piecera {
	width: 100%;
	max-width: 900px;
	background-color: #009900;
	padding: 0px;
	margin: 0px;
	border: 0px solid black;
	display: flex;
	flex-direction: row;
}
.piecera > form:nth-child(1) {
	display: flex;
	width: 100%;
}

/* Próximos cumpleaños */
.proximos{
	width: 25%;
	max-width: 160px;
	min-width: 95px;
	border: 0px solid black;
	background: #009900;
	padding: 0px;
	margin: 0px;
	align-items: center;
	font-family: "Times New Roman", Times, serif;
	size: 3; /* O puedes usar em/rem: font-size: 0.8125rem; */
	color: #FFFFFF;
	text-align: center;
}
.mostrar{
		display: none;
}
.cumples{
	width: 75%;
	border: 0px solid black;
	/*background: #009900;*/
	padding: 0px;
	margin: 0px;
	align-items: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 13px; /* O puedes usar em/rem: font-size: 0.8125rem; */
	color: #FFFF00;
	display: flex;
	flex-direction: row;
	flex: 1;
}
.marquesina-contenedor {
	width: 100%;
	max-width: 80vw;        /* Evita el desbordamiento horizontal del diseño general */
	overflow: hidden;
	background: #009900;
	padding: 0px 0;
	box-sizing: border-box;
}
.marquesina-texto {
	display: inline-block;
	white-space: nowrap;	/* Mantiene el texto en una línea para el efecto de scroll */
	padding-left: 100%;      /* Hace que el texto empiece justo fuera de la pantalla por la derecha */
	animation: moverMarquesina 55s linear infinite;
}
.marquesina-texto span {
	display: inline-flex;
}
/* Detiene la animación al pasar el ratón por encima */
.marquesina-contenedor:hover .marquesina-texto {
    animation-play-state: paused;
}
/* Animación del movimiento */
@keyframes moverMarquesina {
    0% { transform: translate3d(0%, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}
		
/* Responsividad */		
@media screen and (max-width: 700px) {
	nav {
		padding: 5px 10px; /*10px 20px;*/
	}
	nav ul {
		gap: 5px;    /*10px Espacio entre los botones del menú */
	}
	nav ul li a {
		padding: 4px 5px; /*8px 15px;*/
	}
	.lateral{
		display: none;
	}
	.ocultar{
		display: none;
	}
	.mostrar{
		display: block;
	}
	.proximos{
		width: 15%;
	}
	.marquesina-contenedor {
		max-width: 80vw;        /* Evita el desbordamiento horizontal del diseño general */
	}
}
@media screen and (max-width: 450px) {
	.marquesina-contenedor {
		max-width: 65vw;        /* Evita el desbordamiento horizontal del diseño general */
	}
}
@media screen and (max-width: 260px) {
	.marquesina-contenedor {
		max-width: 50vw;        /* Evita el desbordamiento horizontal del diseño general */
	}
}