@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"] {
	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 {
    display: flow-root;
    margin: 0;
    padding: 0;
    width: 100%;
	background:#066;
}
a:link {
	text-decoration: none;
}
.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 */
ul {
    margin: 0;
    padding: 0;
}
.titulosmenuizquierda {
    font-family: "Georgia", serif;
    color: #D4AF37;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    background-color: #0B3D2B;
    border-bottom: 3px solid rgba(253, 199, 69, 1);
    list-style: none;
    user-select: none;
}
.titulosmenuizquierda:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.vinculosmenuizquierda {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vinculosmenuizquierda a {
    font-family: "Cambria", sans-serif;
    color: #F8F9FA;
    text-decoration: none;
    display: block;
    transition: background 0.2s;
}
.vinculosmenuizquierda:hover a {
    color: #D4AF37;
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #FFD54F;
    padding-left: 20px !important;
    font-weight: bold;
}
.juegos {
    list-style: none;
    margin: 0;
    padding: 0;
}
.juegos a {
    font-family: "Cambria", sans-serif;
    color: #066;
    background-color: #D4AF37;
    text-align: center;
    text-decoration: none;
    display: block;
    font-weight: bold;
    border-radius: 3px;
}
.juegos a:hover {
    background-color: #FFD54F;
    color: #000;
    transform: translateY(-2px);
}
@media screen and (min-width: 769px) and (max-width: 1365px) {
	.sinelefantesblancos {
	font-size: 20px;
}
    .titulosmenuizquierda {
        font-size: 11px;
        margin: 3px 0 1px 0;
        padding: 4px 3px;
    }
    .vinculosmenuizquierda a {
        font-size: 11px;
        padding: 3px 8px;
    }
    .juegos {
        margin: 5px;
    }
    .juegos a {
        font-size: 11px;
        padding: 5px;
    }
}

/* 2. Notebooks Estándar (15.6" - Resolución 1366x768)*/
@media screen and (min-width: 1366px) and (max-width: 1599px) {
	.sinelefantesblancos {
	font-size: 20px;
}
    .titulosmenuizquierda {
        font-size: 12px; 
        margin: 4px 0 0 0;
        padding: 5px 5px;
        line-height: 1.2;
    }
    .vinculosmenuizquierda a {
        font-size: 12px;
        padding: 2px 5px;
    }
    .juegos {
        margin: 6px 5px;
    }
    .juegos a {
        font-size: 12px;
        padding: 5px;
    }
}

/* 3. Monitores Grandes (Full HD 24" y superiores)*/
@media screen and (min-width: 1600px) {
	.sinelefantesblancos {
	font-size: 30px;
}
    .titulosmenuizquierda {
        font-size: 15px;
        margin: 5px 0 5px 0;
        padding: 5px 7px;
    }
    .vinculosmenuizquierda a {
        font-size: 14px;
        padding: 4px 7px;
    }
    .juegos {
        margin: 15px 8px;
    }
    .juegos a {
        font-size: 15px;
        padding: 10px;
    }
}


/* 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 { 
	margin: 2px;
	margin-bottom: 10px;
	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 {
	color: #000;
	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: #0160F4;
	border-radius: 10px;
	border-width: 0.2em;
	margin: 3px;
	margin-top:15px;
	padding: 8px 15px;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	max-width: 100%;
}
.sinelefantesblancos:hover {
	color: #000;
	background-color: #DDEFFF;
	font-size: 34px;
}
.marcaregistrada {
	font-size: 10px;
	font-family: "Cambria", sans-serif;
	vertical-align: top;
}
.contactonombre {
    display: inline-block;
    
    font-size: small;
    color: #900;
    cursor: pointer;
    font-family: "Cambria", sans-serif;
    background-color: #FFF;
    font-weight: bold;
    letter-spacing: normal;
    word-spacing: normal;
    border-style: solid;
    border-color: #003C13;
    border-radius: 5px;
    border-width: 0.1em;
    margin: 5px;
	margin-top: 15px;
	margin-bottom: 5px;
    padding: 4px 8px;
    text-decoration: none;
}
.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;
}
.calcular {
  background-color: #0555b0;
  color: #ffffff;
  border: 2px solid #05274f;
  border-radius: 5px;
  padding: 8px 16px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-size: 20px;
  transition: all 0.2s ease-in-out;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.calcular:hover {
  background-color: #2178db;
  border-color: #05274f;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.calcular:active {
  transform: translate(1px, 1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.programaafiliado {
    background-color: #ffe600;
    color: #2d3277;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    font-family: sans-serif;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}
.programaafiliado:hover {
    background-color: #fff159;
    box-shadow: 0 6px 8px rgba(0,0,0,0.4);
}
.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;
        }	
cuerpoizquierda {
    display: block;
    float: left;
    width: 20%;
    position: sticky;
    position: -webkit-sticky; 
    top: 0; 
    padding: 20px;
    box-sizing: border-box;
    background-color: #066;
    color: #FFF;
    border: solid #000 5px;
    
    /* Altura */
    height: 100vh; 
    overflow-y: auto;
}

cuerpocentro {
    display: block;
    float: left;
    width: 55%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border: solid #093C00 5px;
}

cuerpoparaindexcuarenta, aside {
    display: block;
    float: right;            /* Se van a la derecha */
    clear: right;            /* <--- EL TRUCO: Fuerza a que se apilen uno bajo otro */
    width: 25%;              /* El ancho restante (20+55+25 = 100) */
    
    /* Estilos visuales generales */
    box-sizing: border-box;
    margin-bottom: 3px;     /* Un poco de aire entre bloques */
}
cuerpoderecha {
    display: block;
    float: right;            /* Se van a la derecha */
    clear: right;            /* <--- EL TRUCO: Fuerza a que se apilen uno bajo otro */
    width: 100%;              /* El ancho restante (20+55+25 = 100) */
    
    /* Estilos visuales generales */
    box-sizing: border-box;
    margin-bottom: 3px;     /* Un poco de aire entre bloques */
}

cuerpoderecha {
    background: #066;
    padding: 20px;
 /* border: solid #000 5px;  */
}

cuerpocentrosinfrases, cuerpoparaindexochenta {
    display: block;
    float: left;
    width: 80%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border: solid #093C00 5px;
}

cuerpologin {
    display: block;
    float: left;
    width: 58.325%;
    background: #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
    border: solid #000000 5px;
}

cuerpoparaindexcincuenta {
    display: block;
	float: left;
    width: 50%;
    background: #f7feff;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,.5);
    margin-bottom: 10px;
    border: solid #000000 5px;
}

cuerpoparaindexcuarenta {
	float: left;
    width: 50%; /* porque columna-derecha es el 80% */
    background: #99FF99;
    padding: 20px;
    box-sizing: border-box; 
    border-bottom: 1px solid rgba(255,255,255,.5);
    margin-bottom: 10px;
    min-height: 350px;
    border: solid #003C13 5px;
    clear: none;
}

cuerpoparaindextreinta {
    display: block;
    float: left;
    width: 41.66%; /* porque columna-derecha es el 80%, así queda 25% */
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border: solid #093C00 5px;
}

aside {
    display: block;
    width: 25%;
    min-width: 100px;
    padding: 20px;
    box-sizing: border-box;
    background: #066;
}

.publicidadderecha {
    display: block;
    width: 25%;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    background: #066;
    border: solid #093C00 5px;
}
	
comoasideparatitulo {
			width:33.333%;
			height:130px;
			box-sizing: border-box;
			background:#fff;
			float: left;
			text-align:center;
        }
superiorizquierda, superiorcentro, superiorderecha {
    display: block;
    float: left;
    width: 33.333%;
    height: 130px;
    box-sizing: border-box;
    background: #fff;
    text-align: center;
    margin-top: 1px;
    border: solid #003C13 5px;
	padding-top: 8px;
}
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;
        }

cuento, peliculas, libros, footer {
    display: block;
    float: right; 
    clear: right; 
    
    width: 55%;  
    margin-right: 25%;
    
    /* Estilos visuales */
    box-sizing: border-box;
    margin-top: 8px;
    padding: 20px;
    text-align: center;
}

/* Los colores se mantienen igual */
cuento {
    background: #CCFFFF;
    border: solid #4aa1a1 5px;
}
peliculas {
    background: #00CCFF;
    border: solid #00C 5px;
}
libros {
    background: #CBFF9A;
    border: solid #009933 5px;
}
footer {
    background: #fffc9e;
    border: solid #7a794b 5px;
    margin-bottom: 30px;
}

.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;
}
cuerpoizquierda {
			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;
        }
superiorizquierda, superiorcentro, superiorderecha {
			height:90px;
			margin-top:0px;
			padding-top: 5px;
}
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%;
}
cuerpoizquierda {
			display: none;
        }	
cuerpocentro {
			width:100%;
			margin-top:5px;
        }	
cuerpocentrosinfrases {
			width:100%;
			margin-top:5px;
			/* padding:10px; */
        }	
cuerpoderecha {
			width:100%;
        }
.publicidadderecha { 
	position: static;
	width: 100%;
	box-sizing: border-box; 
}
cuento, peliculas, libros, footer {
    width: 100%;  
    margin-right: 0%;
}

/* 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:5px;
	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: small;
	border-width: 0.1em;
	margin: 0.8px;
	margin-top:5px;
	margin-bottom:2px;
	padding: 0.8px;
}
.contactonombre:hover {
	color: #FFF;
	background-color: #900;
	font-size: small;
}
.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-top: 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 { 
	margin: 5px;
	margin-bottom: 2px;
	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;
}

.calcular {
    font-size: 16px;
    padding: 10px 20px;
  }

}
                                              /* 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 {
			padding-top: 3px;
}
superiorcentromovil {
			display: none;
        }
aside {
	display: none;
}
cuerpoizquierdausuarios {
			display: none;
        }
cuerpoizquierda {
			display: none;
        }	
cuerpocentro {
			width:100%;
			margin-top:5px;
        }	
cuerpocentrosinfrases {
			width:100%;
			margin-top:5px;	
			padding:10px;
		/*	padding-top:20px;
			padding-bottom:20px; */
        }
cuerpoderecha {
			width:100%;
        }
.publicidadderecha {
        position: static; /* Cambia la posición a estática */
        width: 100%;      /* Cambia el ancho a 100% */
		box-sizing: border-box;
    }
.superiorparatabla {
	font-size: small;
}
.mensajealerta {
	font-size: small;
}
.mensajeatencion {
	font-size: large;
}
.mensajeok {
	font-size: small;
}
.calcular {
    font-size: 14px;
    padding: 8px 16px;
  }
.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;
}
.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;
        }
}



/* GRÁFICOS */
#cuerpograficos {
  width: 55%;
  float: left;
  background: #333333;
  padding: 20px;
  /* Nota: padding-top no acepta valores negativos, si querés subir el contenido usá margin-top: -10px; */
  padding-top: 0px; 
  box-sizing: border-box;
  border: 5px solid #000000;
  justify-content: center;
  align-items: center;
}

.variable {
  width: 100%;
  background-color: #006400;
  padding:  0px 5px 5px 5px; /* top | right | bottom | left */
  color: #fff;
  font-family: Cambria, serif;
  font-size: x-large;
  font-weight: bold;
  text-align: center;
  margin: 20px 5px 0px 5px;
  box-sizing: border-box;

  border-radius: 15px 15px 0 0;

  border: 5px solid rgba(102, 205, 170, 1);
  border-bottom: 1px;

}

.grafico {
  width: 100%;
  font-family: Cambria, serif;
  font-size: small;
  font-weight: bold;
  text-align: left;
  color: #000000;
  margin: 0px 5px 20px 5px; /* top | right | bottom | left */
  background-color: rgba(211, 211, 211, 1);
  padding: 5px 5px 20px 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;

  border-radius: 0 0 15px 15px;   /* solo esquinas inferiores redondeadas */

  border: 5px solid rgba(102, 205, 170, 1);

}

/* Enlaces dentro de .grafico */
.grafico a:link,
.grafico a:visited {
  color: blue;
  font-weight: bold;
  text-decoration: none;
}

.grafico a:hover,
.grafico a:active {
  color: #ffff00;
  font-weight: bold;
}


@media screen and (max-width: 769px) {
  #cuerpograficos {
    width: 100%;
  }
}