@charset "utf-8";
/* CSS Document */

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	/* [disabled]-moz-box-sizing: border-box; */
	box-sizing: border-box;
}
div.centraTabla{
text-align: center;
}
div.centraTabla table {
margin: 0 auto;
text-align: left;
}
h1 {
    margin: 1px 0; /* Aumenta el margen superior e inferior */
}
h2 {
    margin: 1px 0; /* Aumenta el margen superior e inferior */
}
h3 {
    margin: 5px 0; /* Aumenta el margen superior e inferior */
}
/* Estilo base del input */
input[type="date"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
    padding: 2px;
    border: 2px solid #828282;
    border-radius: 4px;
    transition: box-shadow 0.3s ease; /* Transición suave al cambiar el shadow */
}
/* Estilo cuando el input está activo o enfocado */
input[type="date"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
    outline: none; /* Remover el borde por defecto */
    border-color: #66afe9; /* Cambiar el color del borde al enfocar */
    box-shadow: 0 0 8px 2px rgba(102, 175, 233, 0.6); /* Agregar sombra azul clara */
}
input[type="submit"] {
    border-radius: 5px; /* Curva en las esquinas para los botones de envío de formularios */
	padding: 1px 10px; /* Espacio entre el borde y el texto / 1 píxeles arriba y abajo y 10 píxeles a la izquierda y derecha entre el borde y el contenido del botón */
}
input[type="submit"]:hover {
    color: #600; /* Cambia el color de la letra cuando el mouse está sobre el botón */
	background-color: #FFF8D8;
	cursor: pointer;
}
input[type="submit"]:active {
    background-color: white; /* Cambia el fondo a blanco cuando el botón está activo (cuando se hace clic en él) */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra al hacer clic */
	transform: scale(0.95); /* Reducción del tamaño al hacer clic */
	cursor: pointer;
}
input[type="reset"] {
    border-radius: 5px; /* Curva en las esquinas para los botones de envío de formularios */
	padding: 1px 10px; /* Espacio entre el borde y el texto / 1 píxeles arriba y abajo y 10 píxeles a la izquierda y derecha entre el borde y el contenido del botón */
}
input[type="reset"]:hover {
    color: #600; /* Cambia el color de la letra cuando el mouse está sobre el botón */
	background-color: #FFF8D8;
	cursor: pointer;
}
input[type="reset"]:active {
    background-color: white; /* Cambia el fondo a blanco cuando el botón está activo (cuando se hace clic en él) */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra al hacer clic */
	transform: scale(0.95); /* Reducción del tamaño al hacer clic */
	cursor: pointer;
}
body {
			background:#066;
			front-family:Cambria;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
	font-weight: normal;
}
.columna-ancho-que {
  min-width: 20vw; /* 20% del ancho de la ventana del navegador */
}
.columna-ancho-fecha {
  min-width: 3vw;
}
.columna-ancho-donde {
  min-width: 10vw; 
}
.ajuste-ancho {
  width: 100%; /* Establece el ancho al 100% */
  min-width: 100%; /* Establece el ancho mínimo al 100% */
  max-width: none; /* Establece el ancho máximo a "none" para permitir que el ancho se ajuste al contenido */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
  background-color: #FFFFF4; /* amarillo claro */
  padding: 3px;
  font-weight: bold;
  font-size: medium;
}
.ajuste-ancho-fecha {
  width: 100%; /* Establece el ancho al 100% */
  min-width: 100%; /* Establece el ancho mínimo al 100% */
  max-width: none; /* Establece el ancho máximo a "none" para permitir que el ancho se ajuste al contenido */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
  padding: 3px;
  font-weight: bold;
  font-size: large;
  text-align: center; /* alinea el texto al centro*/
}
.ajuste-ancho-centrado {
  width: 100%; /* Establece el ancho al 100% */
  min-width: 100%; /* Establece el ancho mínimo al 100% */
  max-width: none; /* Establece el ancho máximo a "none" para permitir que el ancho se ajuste al contenido */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
  background-color: #FFFFF4; /* amarillo claro */
  padding: 3px;
  font-weight: bold;
  font-size: medium;
  text-align: center; /* alinea el texto al centro*/
}
/* Diseño de menú vertical */
.titulosmenuizquierda {
	font-family: "Cambria", sans-serif;
	color: #750202;
	font-size: large;
	font-weight: bold;
	line-height: 1.8em;
	background-color: #FFF8D8;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	text-align:center;
	word-spacing: normal;
	border-style: solid;
	border-color: #000;
	border-radius: 1px;
	border-width: 0.2em;
	margin: 0px;
	padding: 0px;
	padding-left: 10px;
	list-style:none
}
.vinculosmenuizquierda {
	font-family: "Cambria", sans-serif;
	color: #FFF;
	background-color: #066;
	text-decoration: none;
	font-size: large;
	font-weight: bold;
	line-height: 1.4em;
	cursor: pointer;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	word-spacing: normal;
	border-style: solid;
	border-color: #003C13;
	border-radius: 1px;
	border-width: 0.1em;
	margin: 0px;
	padding: 1px;
	padding-left: 10px;
	list-style:none
}
.vinculosmenuizquierda a {
	color: #FFF;
	display: block; /* Hace que pueda dar click en cualquier lugar del rectángulo del menú de la izquierda */
}	
.vinculosmenuizquierda:hover {
	background-color: #FFF;
	font-size: large;
}
.vinculosmenuizquierda:hover a {
	color: #066;
}
.juegos {
	font-family: "Cambria", sans-serif;
	color: #FFF;
	background-color: #01068a;
	text-decoration: none;
	font-size: large;
	font-weight: bold;
	line-height: 1.8em;
	cursor: pointer;
	letter-spacing: normal;
	vertical-align: center;
	word-spacing: normal;
	border-style: solid;
	border-color: #003C13;
	border-radius: 1px;
	border-width: 0.1em;
	margin: 0px;
	padding: 3px 10px; /* Simplificado */
	list-style: none;
}

/* Estados normales del enlace */
.juegos a {
	color: #FFF; /* Texto blanco */
	text-decoration: none; /* Sin subrayado */
	display: block; /* Hace que pueda dar click en cualquier lugar del rectángulo del menú de la izquierda */
}

/* Efecto hover en el contenedor */
.juegos:hover {
	background-color: #FFF; /* Fondo blanco */
	font-size: large;
	color: #01068a; /* Texto azul oscuro */
}

/* Efecto hover en los enlaces dentro de .juegos */
.juegos:hover a {
	color: #01068a; /* Texto azul oscuro */
	text-decoration: none; /* Sin subrayado */
}
/* Diseño del diseño de la parte superior */
.logo { 
	padding: 2px;
	margin: 2px;
	margin-bottom: 10px;
	border: 2px solid black;
	float: top;
	width: 60px;
}
.logo:hover { 
	box-shadow: 0.4rem 0.4rem 0.6rem rgba(0,0,0,0.4);
}
.imagen-sombras:hover { 
	box-shadow: 0.4rem 0.4rem 0.6rem rgba(0,0,0,0.4);
}
.imagenes { 
	padding: 2px;
	margin: 2px;
	margin-bottom: 10px;
	border: 2px solid black;
	float: top;
	vertical-align: center;
	width: 80px;
}
.imagenes:hover { 
	box-shadow: 0.4rem 0.4rem 0.6rem rgba(0,0,0,0.4);
}
.ingresarregistrarse {
	font-size: medium;
	color: #FFF;
	cursor: pointer;
	font-family: "Cambria", sans-serif;
	background-color: #066;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	word-spacing: normal;
	border-style: solid;
	border-color: #003C13;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 2px;
	margin-top:10px;
	padding: 2px;
}
.ingresarregistrarse:hover {
	color: #066;
	background-color: #FFF;
	font-size: large;
}
.datospersonales {
	font-size: medium;
	text-align: center;
	color: #FFF;
	cursor: pointer;
	font-family: "Cambria", sans-serif;
	background-color: #0101DF;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	word-spacing: normal;
	border-style: solid;
	border-color: #08088A;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 2px;
	margin-top:10px;
	padding: 2px;
}
.datospersonales:hover {
	color: #0101DF;
	background-color: #FFF;
	font-size: medium;
}
.botonsinelefantesblancos {
	font-size: medium;
	text-align: center;
	color: #FFF;
	cursor: pointer;
	font-family: "Cambria", sans-serif;
	background-color: #066;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	word-spacing: normal;
	border-style: solid;
	border-color: #066;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 2px;
	margin-top:10px;
	padding: 2px;
}
.botonsinelefantesblancos:hover {
	color: #066;
	background-color: #FFF;
	font-size: medium;
}
.sinelefantesblancos {
	font-size: 32px;
	color: #000;
	cursor: pointer;
	font-family: "Cambria", sans-serif;
	background-color: #FFF;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: top;
	word-spacing: normal;
	border-style: solid;
	border-color: #0160F4;
	border-radius: 10px;
	border-width: 0.2em;
	margin: 3px;
	margin-top:-3px;
	padding: 3px;
}
.sinelefantesblancos:hover {
	color: #000;
	background-color: #DDEFFF;
	font-size: 34px;
}
.marcaregistrada {
	font-size: 10px;
	font-family: "Cambria", sans-serif;
	vertical-align: top;
}
.contactonombre {
	font-size: small;
	color: #900;
	cursor: pointer;
	font-family: "Cambria", sans-serif;
	background-color: #FFF;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	word-spacing: normal;
	border-style: solid;
	border-color: #003C13;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 1px;
	margin-top:10px;
	margin-bottom:10px;
	padding: 2px;
}
.contactonombre:hover {
	color: #FFF;
	background-color: #900;
	font-size: small;
}
/* Diseño de clases y estilos de palabras. */
.mensajealerta {
	font-family: Cambria;
	font-size: large;
	color: #FF0000;
	background-color: #FFD9D9;
	font-weight: bold;
}
.mensajeatencion {
	font-family: Cambria;
	font-size: x-large;
	color: #000000;
	background-color: #FFFF00;
	font-weight: bold;
}
.mensajeok {
	font-family: Cambria;
	font-size: large;
	color: #003300;
	background-color: #66FF66;
	font-weight: bold;
}
.cuerpo {
	font-family: Cambria;
	font-size: medium;
	color: #000;
	text-align: justify;
	line-height: 1.4em;
}
.chico {
	font-family: Cambria;
	font-size: medium;
	color: #000;
	text-align: left;
}
.posibles {
	font-family: Cambria;
	font-size: large;
	color: #000;
	text-align: justify;
}
.titulodelcuerpo {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: xx-large;
	color: #036;
	text-align: center;
	font-weight: bold;
	background-color: #E9E9E9;
	padding: 3px;
}
.titulousuarios  {
	font-family: Cambria;
	font-size: xx-large;
	color: #000000;
	text-align: center;
	font-weight: bold;
	line-height: 1.2em;
}
.mensajeperfilinversor {
	font-family: Cambria;
	font-size: large;
	color: #000066;
	background-color: #D7F2FF;
	font-weight: bold;
}
.tabla {
	font-family: Cambria;
	font-size: x-large;
	color: #000;
	text-align: center;
	font-weight: bold;
}
.tablanaranja {
	font-family: Cambria;
	font-size: x-large;
	color: #FF6600;
	font-weight: bold;
}
.editar {
	font-size: x-small;
	color: #03C;
	cursor: pointer;
	font-family: "Cambria", sans-serif;
	background-color: #FFF;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	word-spacing: normal;
	border-style: solid;
	border-color: #003C13;
	border-radius: 5px;
	border-width: 0.1em;
	margin-left: 10px;
	padding: 1px;
	padding-top: 4px;
	padding-bottom: 4px;
}
.editar:hover {
	color: #000;
	background-color: #DDEBFF;
	font-size: x-small;
}
.segundosvinculos {
	font-family: Verdana;
	font-size: small;
	text-decoration: blink;
	color: #000000;
	text-transform: capitalize;
	font-weight: bold;
}
.principalesvinculos {
	font-family: Cambria;
	color: #000066;
	font-size: large;
	font-weight: bold;
}
.principalesvinculosblancos {
	font-family: Cambria;
	color: #FFF;
	font-size: large;
	font-weight: bold;
	line-height: 1.8em;
}
.secundariosvinculosblancos {
	font-family: Cambria;
	color: #FFF;
	font-size: medium;
	font-weight: bold;
	line-height: 3.0em;
}
.secundariosvinculosblancos a {   /* Para que el hipervículo funcione en todo el rectángulo, no solo en las palabras */
        display: block; /* Cambia a bloque para ocupar todo el ancho */
        padding: 3px; /* Añade espacio alrededor del enlace */
        text-decoration: none; /* Quita la decoración de subrayado */
}
.superiorparatabla {
	font-family: Cambria;
	font-size: large;
	text-decoration: blink;
	font-weight: bold;
	color: #900;
	background-color: #FFC;
	text-align: center;
	line-height: 1.8em;
}
.renunciaderesponsabilidad {
	font-family: Cambria;
	font-size: large;
	color: #134F5C;
	background-color: #FFF;
	text-align: center;
	font-weight: bold;
	border-style: solid;
	border-color: #000000;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 10px;
	padding: 5px;
}
.renunciaderesponsabilidad a {
    color: inherit; /* Mantiene el color del texto padre */
    text-decoration: none; /* Elimina el subrayado del enlace */
	text-align: center;
}
.renunciaderesponsabilidad:hover {
    color: #000; /* Cambia el color de la letra cuando el mouse está sobre el botón */
	background-color: #DBFFDB;
	border-style: solid;
	border-color: #000000;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 10px;
	padding: 5px;
}
.renunciaderesponsabilidad:active {
	color: #000; 
    background-color: white; /* Cambia el fondo a blanco cuando el botón está activo (cuando se hace clic en él) */
}
.superior {
	text-align: center;
	text-decoration: blink;
	font-family: Cambria;
	font-size: large;
	font-weight: bold;
	color: #900;
	background-color: #FFC;
	border-style: solid;
	border-color: #283747;
	border-radius: 10px;
	border-width: 0.3em;
	margin: 20px;
	padding: 8px;
}
.superior a {
    color: inherit; /* Mantiene el color del texto padre */
    text-decoration: none; /* Elimina el subrayado del enlace */
	text-align: center;
}
.superior:hover {
    color: #000; /* Cambia el color de la letra cuando el mouse está sobre el botón */
	background-color: #F3F3F3;
	border-style: solid;
	border-color: #FF8C00;
	border-radius: 10px;
	border-width: 0.3em;
	margin: 20px;
	padding: 8px;
}
.superior:active {
	color: #000; 
    background-color: white; /* Cambia el fondo a blanco cuando el botón está activo (cuando se hace clic en él) */
}
.superiorparatabla {
	font-family: Cambria;
	font-size: large;
	text-decoration: blink;
	font-weight: bold;
	color: #900;
	background-color: #FFC;
	text-align: center;
	line-height: 1.8em;
}
.favoritos {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #FFC;
	text-decoration: blink;
}
.tablacambiacolor {
	background-color: #000;
	border-color: #d6dbdf;
	border-radius: 5px;
}
.tablacambiacolor:hover {
	background-color: #000;
	border-color: #000;
	border-radius: 5px;
}
.inicio {
	font-family: Cambria, Arial, sans-serif;
	font-size: medium;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #283747;
	border-style: solid;
	border-color: #d6dbdf;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 5px;
	padding: 5px;
	word-wrap: break-word; /* Añadido para ajustar palabras largas */
    line-height: 2.1; /* Añadido para mejorar la legibilidad */
    white-space: normal; /* Asegura que el texto se ajuste al contenedor */
}
.inicio:hover {
    color: #000; /* Cambia el color de la letra cuando el mouse está sobre el botón */
	background-color: #FFF8D8;
	border-style: solid;
	border-color: #FF8C00;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 5px;
	padding: 5px;
}
.inicio:active {
	color: #600; 
	margin: 5px;
    background-color: white; /* Cambia el fondo a blanco cuando el botón está activo (cuando se hace clic en él) */
}
.botonrecomendacion {
	font-family: Cambria;
	font-size: medium;
	color: #000;
	font-weight: bold;
	border-style: solid;
	border-color: #000;
	border-radius: 5px;
	border-width: 0.3em;
	margin: 3px;
	padding: 5px;
	cursor: pointer; /* Cambia la imagen de flecha por una mano */
}
.botonrecomendacion:hover {
	background-color: white; /* Cambia el color de la letra cuando el mouse está sobre el botón */
	border-color: #FF8C00;
}
.botonrecomendacion:active {
	color: #600; /* Cambia el color de la letra cuando el botón está activo */
    background-color: #FFF8D8;
}
.recomendaciones {
	font-family: Cambria;
	font-size: x-large;
	color: #036;
	text-align: center;
	font-weight: bold;
}
.dentrotabla {
	font-family: Cambria;
	font-size: large;
	color: #000;
	text-align: center;
	font-weight: bold;
	line-height: 1.5em;
}
.subtitulocuerpo {
	font-family: "Lucida Bright";
	font-size: large;
	color: #000;
	text-decoration: underline;
	font-weight: bold;
}
.frases {
	font-family: "Times New Roman";
	font-size: large;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
	font-style: italic;
	line-height: 1.8em;
}
.imagenescentradas {
	text-align: center;
}
.segundotitulo {
	font-family: "Times New Roman";
	font-size: xx-large;
	color: #600;
	font-weight: bold;
	line-height: 1.2em;
	text-align: center;
	padding: 3px;
}
.datoscentrados {
	text-align: center;
	color: #000;
}
.mensajeerror {
	font-size: 200%;
	font-family: Cambria;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #003;
	background-color: #FFF;
}
.respuestas {
	font-size: 120%;
	font-family: Cambria;
	color: #000;
}
.cuerpocentradocursiva {
	text-align: center;
	font-style: italic;
}
.aladerecha {
	text-align: right;
}
.sobreimagen {
	overflow: hidden;
	position: relative;
	attachment: fixed;
	size: cover;
	repeat: no-repeat;
	width: 100%;
	height: 100%;
}
.aceptarterminosycondiciones {
	font-size: xx-large;
	font-family: Cambria;
	text-align: left;

}
.saltarpantalla {
	font-family: Cambria;
	font-size: x-large;
	font-weight: bold;
}
/* Creo que esto es el ancho de cada item del menu de escritorio cuando NO tiene enlaces sino submenus. */
.menu {
	font-family: Cambria;
	color: #000066;
	font-size: large;
	font-weight: bold;
}
.submenu {
	font-family: Cambria;
	color: #fff;
	font-size: large;
	font-weight: bold;
}
/* Con este submenurd es el menú cuando tienen enlace los items del menu y submenu */
.submenurd a {
	display: block;
	font-size: large;
	width: 400px;
	color: #FFF;
}	

/* Esto es para hacer el menú desplegado en la página cuando se mira con pc de escritorio. */
#menuprincipal { 
	padding: 0px;
}
#menuprincipal ul { 
	list-style: none;
}
#menuprincipal, li ul {
	width: "100%";
	padding: 3px;
	font-family: Cambria;
	font-size: large;  /* Creo que cambié este para el tamaño de letras del submenú en el desplegable */
	text-decoration: blink;
	font-weight: bold;
	text-align: center;
}
/* Items que no tienen submenu y sin poner el cursor encima. */
#titulos {
	width: 100%;
	margin: 0;
	color: #FFF; /* Color de las letras del menú */
	padding: 3px;
	font-weight: bold;
	background: #000000;
}
/* Este no sé */
#titulos a {
	text-decoration: none;
	color: #FFF; /* Color de las letras del menú cuando tienen vínculos */
	padding: 0px 3px;/* Creo que no cambiò nada */
	font-weight: bold;
}
/* Esto es lo que pasa cuando pongo el cursor sobre el item menu o submenu */
#titulos li:hover {
	background: #900900; /* Color bordó */
	padding: 0px 0px; /* Esto es lo que pasa con alto del submenu cuando pongo el cursor arriba */
	font-weight: bold;
}
#titulos li:active {
	font-size: large;
}
#titulos > li {
	display: inline-block; /* Posicionamiento de los bloques, si es en línea. */
	padding: 0px 0px; /*Es el alto del menu de escritorio cuando NO tiene enlaces sino submenus. */
	color: #fff;
	width: 140px;
	border-style: solid;
	border-color: #FFF;
	border-radius: 1px;
	border-width: 0.1em;
	text-align:center;
}
/* Creo que esto es el ancho de cada item del menu de escritorio cuando tiene un enlace y no submenus. */
#titulos > li > a {
	display: block;
	padding: 0px 3px;
	color: #fff;
	width: 140px;
	text-align:center;
}
/* Esto es submenu sin tener el cursor arriba. */
li:hover ul {
	display: block;
}
li ul {
	position: absolute;
	font-size: medium;
	display: none;
	color: #fff;
	background: #212121;/* Color gris oscuro del submenu desplegable en el menu de escritorio. */
	width: 300px; /* ancho del submenu desplegable, si pongo padding para el alto me cambia el submenu del menu desplegable, además del de escritorio. */
}

/* El menú no se mostrará en la versión de escritorio. */	
.menu_bar {
	display:none;
}

/* Header es la cabecera, acá está para la versión de escritorio */
header {
			background:#000000;
			margin: 0px 0;
			width: 100%;
        }
header h1 {
			color:#345345;
			padding:20px 0;
			text-align:center;
}
header nav {
	background:#000000;
	z-index:1000;
	max-width: 1000px;
	width:95%;
	margin:20px auto;
}
 
header nav ul {
	list-style:none;
}
 
header nav ul li {
	display:inline-block;
	position: relative;
}

/* Este es el color del submenú cuando me paro arriba con el cursor. */
header nav ul li:hover {
	background:#A80000;
}
 
header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding: 20px;
}
 
header nav ul li a span {
	margin-right:10px;
}
 
header nav ul li:hover .children {
	display:block;
}
header nav ul li .children {
	display: none;
	background:#001b2b;
	position: absolute;
	width: 200%; /* Esto el tamaño del submenú desplegado horizonal. */	
	z-index:1000;
}
header nav ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
}
header nav ul li .children li a {
	display: block;
}
header nav ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:10px;
}
header nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
}

/* El contentedor es todo, está el header, el aside y el footer */
contenedor {
			widht:100%;
			margin:0 auto;
			overflow:hidden;
			box-sizing: border-box;
        }
/* Main es el cuerpo, está entre el header y el footer */	
.main {
			width:70%;
			background:#000000;
			padding:20px;
			float:left;
			box-sizing: border-box;
        }


    /* Contenedor principal con flex de 3 columnas, para que baje menú izquierda */
    .header { overflow: auto; }
    superiorizquierda,
    superiorcentro,
    superiorderecha {
      display: block;
      float: left;
      width: 33.333%;
      height: 130px;
      margin-top: 5px;
      box-sizing: border-box;
      background: #fff;
      border: solid #003C13 5px;
      text-align: center;
      padding-top: 5px;
    }
        /* Contenedor principal con flex de 3 columnas */
        .content {
            display: flex;
            align-items: flex-start; /* Alinea los elementos al inicio (arriba) */
            flex-wrap: nowrap; /* Evita que las columnas principales se envuelvan */
        }
		
		
        /* Sidebar izquierdo sticky */
        .cuerpo-izquierda {
    display: block;
    position: sticky;
    top: 0;
    flex: 0 0 20%; /* No crece, no se encoge, base 20% */
    padding: 20px;
    box-sizing: border-box;
    background-color: #066;
    color: #FFF;
    border: solid #000 5px;
    height: 100vh; /* Para que sea sticky a lo largo de toda la altura de la ventana */
    overflow-y: auto; /* ¡Aquí está la clave! Permite el scroll vertical si el contenido es largo. */
}

        .cuerpo-centro {
            flex: 0 0 55%; /* No crece, no se encoge, base 55% */
            background: #fff;
            padding: 20px;
            box-sizing: border-box;
            border: solid #093C00 5px;
        }

        /* Contenedor para las columnas derechas, las apila verticalmente */
        .contenedor-derecho {
            flex: 0 0 25%; /* No crece, no se encoge, base 25% */
            display: flex;
            flex-direction: column; /* Apila los elementos de la derecha verticalmente */
            box-sizing: border-box; /* Para que el padding y border se incluyan en el ancho */
        }

        .cuerpo-derecha {
            background: #fff;
            padding: 20px;
            margin-bottom: 10px; /* Espacio entre los bloques de la derecha */
            box-sizing: border-box;
            border: solid #093C00 5px;
        }

        /* Estilo para el div "cuento" */
        .cuento {
            background: #eee;
            padding: 20px;
            margin-top: 20px; /* Espacio superior */
            border: solid #555 2px;
        }
/* Diseño de menú vertical */
.titulosmenuizquierda {
	font-family: "Cambria", sans-serif;
	color: #750202;
	font-size: large;
	font-weight: bold;
	line-height: 1.8em;
	background-color: #FFF8D8;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	text-align:center;
	word-spacing: normal;
	border-style: solid;
	border-color: #000;
	border-radius: 1px;
	border-width: 0.2em;
	margin: 0px;
	padding: 0px;
	padding-left: 10px;
	list-style:none
}
.vinculosmenuizquierda {
	font-family: "Cambria", sans-serif;
	color: #FFF;
	background-color: #066;
	text-decoration: none;
	font-size: medium;
	font-weight: bold;
	line-height: 1.4em;
	cursor: pointer;
	font-weight: bold;
	letter-spacing: normal;
	vertical-align: center;
	word-spacing: normal;
	border-style: solid;
	border-color: #003C13;
	border-radius: 1px;
	border-width: 0.1em;
	margin: 0px;
	padding: 1px;
	padding-left: 10px;
	list-style:none
}
.vinculosmenuizquierda a {
	color: #FFF;
	display: block; /* Hace que pueda dar click en cualquier lugar del rectángulo del menú de la izquierda */
}	
.vinculosmenuizquierda:hover {
	background-color: #FFF;
	font-size: large;
}
.vinculosmenuizquierda:hover a {
	color: #066;
}

cuerpocentrosinfrases {
			width:75%;
			background:#fff;
			padding:20px;
			float:left;
			box-sizing: border-box;
			border: solid #093C00 5px;
        }
cuerpoparaindexochenta {
			width:80%;
			background:#fff;
			padding:20px;
			float:right;
			box-sizing: border-box;
			border-bottom: 15px solid rgba(255,255,255,.5);
			text-align: center;
			margin-bottom:10px;
			border: solid #000000 5px;
        }
cuerpologin {
			width:50%;
			background:#FFFFFF;
			padding:20px;
			float:left;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255,255,255,.5);
			margin-bottom:10px;
			border: solid #000000 5px;
        }
cuerpoparaindexcincuenta {
			width:50%;
			background:#f7feff;
			padding:20px;
			float:left;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255,255,255,.5);
			margin-bottom:10px;
			border: solid #000000 5px;
        }
cuerpoparaindexcuarenta {
			width:40%;
			background:#99FF99;
			padding:20px;
			float:right;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255,255,255,.5);
			margin-bottom:10px;
			min-height:350px;
			border: solid #003C13 5px;
        }
cuerpoparaindextreinta {
			width:30%;
			background:#FFCC66;
			padding:20px;
			float:left;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255,255,255,.5);
			margin-bottom:10px;
			border: solid #CE5300 5px;
        }	
/* Aside es lo que está a la derecha del Main, es donde pongo las frases en la versión de escritorio */	
aside {
			widht:25%;
			min-widht:100px;
			padding:20px;
			box-sizing: border-box;
			background:#066;
        }
.publicidadderecha {
    position: fixed; /* Mantiene el elemento fijo al hacer scroll */
    top: 200px;             /* Fija el elemento a 200px desde la parte superior de la ventana */
    right: 0;                /* Fija el elemento al lado izquierdo de la ventana */
    width: 25%;             /* Ajusta el ancho según lo deseado */
    box-sizing: border-box;
    background: #066;
    padding: 10px;
    z-index: 999;           /* Asegura que esté sobre otros elementos si es necesario */
}
/* Este lo inventé yo para meter dentro del header */	
comoasideparatitulo {
			width:33.333%;
			height:130px;
			box-sizing: border-box;
			background:#fff;
			float: left;
			text-align:center;
        }
superiorcentromovil {
			width:33.333%;
			padding-top:15px;
			height:130px;
			box-sizing: border-box;
			background:#fff;
			float: left;
			text-align:center;
			margin-top:15px;
			border: solid #003C13 5px;
        }
/* Footer es el pie de página. */
paracuerpototal {
			width:100%;
			padding:20px;
			box-sizing: border-box;
			background:#fff;
			float: left;
			border: solid #000000 5px;
        }
/* Footer es el pie de página. */
cuento {
	clear: both;
	float: left;
	margin-top: 5px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	background: #CCFFFF;
	text-align: center;
	border: solid #4aa1a1 5px;
        }
peliculas {
	clear: both;
	float: left;
	margin-top: 5px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	background: #00CCFF;
	text-align: center;
	border: solid #00C 5px;
        }
libros {
	clear: both;
	float: left;
	margin-top: 5px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	background: #CBFF9A;
	text-align: center;
	border: solid #009933 5px;
}
footer {
	clear: both;
	float: left;
	margin-top: 5px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	background: #fffc9e;
	text-align: center;
	border: solid #7a794b 5px;
}
.botonrecomendacion:hover {
        background-color: inherit;  /* O el valor que desees */
        border-color: inherit;  /* O el valor que desees */
}
.botonrecomendacion:active {
	background-color: white; /* Cambia el color de la letra cuando el mouse está sobre el botón */
	border-color: #FF8C00;
}
.datoscalculador {
	font-family: Cambria;
	color: #FFF;
	font-size: large;
	font-weight: bold;
}

@media screen and (max-width: 1600px) {
cuerpoparaindexcincuenta {
			width:100%;
			margin-top: 7px; 	/* antes también tenía margin-top:30px; */
} 
.superiorparatabla {
	font-size: medium;
}
}

@media screen and (max-width: 1000px) {
.sinelefantesblancos {
	font-size: 18px;
}
.sinelefantesblancos:hover {
	font-size: 20px;
}
.vinculosmenuizquierda {
	font-size: medium;
}
.vinculosmenuizquierda a {
	color: #FFF;
}	
.vinculosmenuizquierda:hover {
	font-size: medium;
}
.vinculosmenuizquierda:hover a {
	color: #066;
}
.chico {
	font-size: small;
}
.cuerpo-izquierda {
			padding:5px;
}
}

							/* Hasta acá es el diseño escritorio. */

							/* Debajo el diseño tableta: de 481 px a 768 px. */

@media screen and (max-width: 769px) {

body {
	padding-top: 70px;   /*Para que el menú desplegable no tape todo.*/
}
.main {
	width: 100%;
}
.chico {
	font-size: 10px;
}
.recomendaciones {
	font-size: medium;
}
.dentrotabla {
	font-size: medium;
}
.inicio {
	font-size: small;
	border-radius: 2px;
	margin: 2px;
	padding: 2px;
}
.inicio:hover {
    font-size: small;
	border-radius: 2px;
	margin: 2px;
	padding: 2px;
}
.inicio:active {
	margin: 2px;
}
comoasideparatitulo {
			height:120px;
        }
		
/* Contenedor principal con flex de 3 columnas, para que baje menú izquierda */
.header { overflow: auto; }
    superiorizquierda,
    superiorcentro,
    superiorderecha {
		height:100px;
		margin-top:0px;
    }
	
superiorcentromovil {
			display:none;
        }
paneltitulos {
			width:100%;
			   }
panelafectivos {
			width:100%;
			   }
panelsalud {
			width:100%;
			   }
panelactividadfisica {
			width:100%;
			   }
panelestetica {
			width:100%;
			   }
panelahorro {
			width:100%;
			   }
panelcrecimiento {
			width:100%;
			   }
panelestudio {
			width:100%;
			   }
paneltramites {
			width:100%;
			   }
panelcompras {
			width:100%;
			   }
panelfechas {
			width:100%;
			   }
cuerpologin {
			width:100%;
			margin-top: 7px; 	/* antes también tenía margin-top:30px; */
} 
cuerpoizquierdausuarios {
			display: none;
        }	
cuerpoparaindexochenta {
			width:100%;
        }
cuerpoparaindexcuarenta {
			width:100%;
        }
cuerpoparaindextreinta {
			width:100%;
        }	
aside {
	width: 100%;
}

/* 1. Modificar el contenedor padre (Asumiendo que tienes una clase contenedora) */
    /* IMPORTANTE: Cambia ".contenedor-principal" por el nombre de la clase 
       que envuelve a tus 3 columnas en el HTML */
    .content { 
        flex-direction: column; /* Esto hace que se apilen uno abajo del otro */
    }

    /* 2. Hacer desaparecer la izquierda */
    .cuerpo-izquierda {
        display: none; /* Lo oculta totalmente */
    }

    /* 3. Ajustar el centro para que ocupe todo el ancho */
    .cuerpo-centro {
        flex: 0 0 100%;  /* Fuerza el ancho al 100% del espacio flexible */
        width: 100%;     /* Asegura el ancho */
        margin: 0;       /* Resetea márgenes si los hubiera */
        border-left: 0;  /* Opcional: quita bordes laterales si molestan en móvil */
        border-right: 0;
    }

    /* 4. Ajustar el contenedor derecho para que vaya abajo y ocupe todo */
    .contenedor-derecho {
        flex: 0 0 100%; /* Fuerza el ancho al 100% */
        width: 100%;
        margin-top: 20px; /* Un poco de aire entre el centro y este bloque */
    }
    
    /* Opcional: Ajustar los bloques internos de la derecha */
    .cuerpo-derecha {
        width: 100%;
    }
	
	
cuerpocentrosinfrases {
			width:100%;
			margin-top:5px;
			/* padding:10px; */
        }	

.publicidadderecha {
        position: static; /* Cambia la posición a estática */
        width: 100%;      /* Cambia el ancho a 100% */
        top: auto;        /* Restablece la posición superior */
        left: auto;       /* Restablece la posición izquierda */
    }
/* Header es la cabecera */
/* Este menu_bar es el menú desde un dispositivo móvil y/o tableta */
.menu_bar {
		display:block;
		width:100%;
		position: fixed;
		top:0;
		background:#FFD700;
	}
.menu_bar .bt-menu {
		display: block;
		padding: 20px;
		color: #000000;
		overflow: hidden;
		font-size: 20px; /* Tamaño de la letra del menu desplegable, donde dice Menú */
		font-weight: bold;
		text-decoration: none;
	}
.menu_bar span {
		float: right;
		font-size: 20px;
		font-weight: bold;
	}
/* Este header desde un dispositivo móvil y/o tableta */
 header nav {
		width: 70%;
		height: calc(100% - 80px);
		position: fixed;
		right:100%;
		margin: 0;
		overflow: scroll;
	}
header nav ul li {
		display: block;
		border-bottom:1px solid rgba(255,255,255,.5);
	}
header nav ul li a {
		display: block;
	}
header nav ul li:hover .children {
		display: none;
	}
header nav ul li .children {
		width: 100%;
		position: relative;
	}
/* Esto es el submenú que tan corrido a la derecha está. */	
header nav ul li .children li a {
		margin-left:5px;
	}
header nav ul li .caret {
		float: right;
	}
.ingresarregistrarse {
	font-size: x-small;
	border-width: 0.3em;
	margin: 0.8px;
	padding: 0.8px;
	margin-top: 10px;
}
.ingresarregistrarse:hover {
	font-size: small;
	color: #066;
	background-color: #FFF;
}
.sinelefantesblancos {
	font-size: 20px;
	border-width: 0.1em;
	margin: 1px;
	margin-top:-1px;
	padding: 1px;
}
.sinelefantesblancos:hover {
	font-size: 20px;
	color: #FFF;
	background-color: #900;
}
.marcaregistrada {
	font-size: 10px;
	font-family: "Cambria", sans-serif;
	vertical-align: top;
}
.contactonombre {
	font-size: medium;
	border-width: 0.1em;
	margin: 0.8px;
	margin-top:1px;
	margin-bottom:1px;
	padding: 0.8px;
}
.contactonombre:hover {
	color: #FFF;
	background-color: #900;
}
.datospersonales {
	font-size: small;
	border-width: 0.3em;
	margin: 10px;
	padding: 0.8px;
	margin-top:10px;
	margin-bottom: 10px;
}
.datospersonales:hover {
	font-size: small;
}
.botonsinelefantesblancos {
	font-size: small;
	border-width: 0.3em;
	margin: 10px;
	padding: 0.8px;
	margin-top:10px;
	margin-bottom: 10px;
}
.botonsinelefantesblancos:hover {
	font-size: small;
}
.logo { 
	padding: 0.2px;
	margin: 0.2px;
	margin-bottom: 2px;
	border: 1px solid black;
	width: 40px;
}
.logo:hover { 
	box-shadow: 0.4rem 0.4rem 0.6rem rgba(0,0,0,0.4);
}
.imagenes { 
	padding: 5px;
	margin: 5px;
	margin-bottom: 2px;
	border: 1px solid black;
	vertical-align: center;
	width: 60px;
}
.imagenes:hover { 
	box-shadow: 0.4rem 0.4rem 0.6rem rgba(0,0,0,0.4);
}
.datoscalculador {
	font-family: Cambria;
	color: #FFF;
	font-size: medium;
}
}
                                              /* Diseño tableta: de 481 px a 768 px. */
@media screen and (max-width: 481px) {
h1 {
    margin: 0px 0; /* Aumenta el margen superior e inferior */
}
h2 {
    margin: 0px 0; /* Aumenta el margen superior e inferior */
}
h3 {
    margin: 3px 0; /* Aumenta el margen superior e inferior */
}
td {
  padding: 3px;
}
.columna-ancho-que {
  min-width: 10vw; /* 20% del ancho de la ventana del navegador */
}
.columna-ancho-fecha {
  min-width: 5vw;
}
.columna-ancho-donde {
  min-width: 5vw; 
}
.ajuste-ancho {
  font-size: small;
}
.ajuste-ancho-fecha {
  font-size: small;
}
.ajuste-ancho-derecha {
  font-size: small;
}
.contenedor {
	width: 100%;
}
#titulos > li {
	width: 90px;
}
/* Creo que esto es el ancho de cada item del menu de escritorio cuando tiene un enlace y no submenus. */
#titulos > li > a {
	width: 90px;
}
li ul {
	width: 200px; /* ancho del submenu desplegable, si pongo padding para el alto me cambia el submenu del menu desplegable, además del de escritorio. */
}
comoasideparatitulo {
			height:90px;
        }
    superiorizquierda,
    superiorcentro,
    superiorderecha {
		height:90px;
		margin-top:0px;
    }
superiorcentromovil {
			display: none;
        }
aside {
	display: none;
}
cuerpoizquierdausuarios {
			display: none;
        }
.cuerpo-izquierda {
			display: none;
        }	
.cuerpo-centro {
			width:100%;
			margin-top:5px;
        }
.cuerpo-derecha {
			width:100%;
        }

cuerpocentrosinfrases {
			width:100%;
			margin-top:5px;	
			padding:10px;
		/*	padding-top:20px;
			padding-bottom:20px; */
        }
.publicidadderecha {
        position: static; /* Cambia la posición a estática */
        width: 100%;      /* Cambia el ancho a 100% */
        top: auto;        /* Restablece la posición superior */
        left: auto;       /* Restablece la posición izquierda */
    }
.superiorparatabla {
	font-size: small;
}
.mensajealerta {
	font-size: small;
}
.mensajeatencion {
	font-size: large;
}
.mensajeok {
	font-size: small;
}
.chico {
	font-size: x-small;
}
.secundariosvinculosblancos {
	font-size: smaller;
	line-height: 2.0em;
}
.secundariosvinculosblancos a {   /* Para que el hipervículo funcione en todo el rectángulo, no solo en las palabras */
        padding: 7px; /* Añade espacio alrededor del enlace */
}
.dentrotabla {
	font-size: small;
}
.contactonombre {
	margin-top:8px;
}
.ingresarregistrarse {
	font-size: x-small;
	border-width: 0.1em;
	margin: 0.8px;
	padding: 0.8px;
	margin-top:1px;
}
.ingresarregistrarse:hover {
	font-size: x-small;
	color: #066;
	background-color: #FFF;
}
.datospersonales {
	font-size: small;
	border-width: 0.3em;
	margin: 3px;
	padding: 0.8px;
	margin-top:3px;
}
.datospersonales:hover {
	font-size: small;
}
.botonsinelefantesblancos {
	font-size: small;
	border-width: 0.3em;
	margin: 3px;
	padding: 0.8px;
	margin-top:3px;
}
.botonsinelefantesblancos:hover {
	font-size: small;
}
sharethis {
			display: none;
        }
.datoscalculador {
	font-size: small;
}
}
@media screen and (min-width: 770px) {
header {
	display:none;
		}
superiorcentromovil {
			display:none;
        }
/* Si lo pongo no se puede ver en pantalla completa
superiorizquierda {
			display:none;
        }
superiorcentro {
			display:none;
        }
superiorcentromovil {
			display:none;
        }
superiorderecha {
			display:none;
        } */
}