/*Css para el boton arriba flotante*/
.boton-arriba {
	position: fixed;
	bottom: 20px;
/* Distancia desde la parte inferior */
	right: 20px;
/* Distancia desde el lado derecho */
	z-index: 1000;
/* Asegura que esté por encima de otros elementos */
}

/* CSS para el botón "izquierda" flotante */
.boton-izquierda {
	position: fixed;
	bottom: 20px;
/* Alineado en la misma altura que el botón "arriba" */
	right: 70px;
/* Más a la izquierda del botón "arriba" */
	z-index: 1000;
/* Mantiene el mismo z-index para estar al mismo nivel */
}

/*CSS para el hidden del indice colapsado*/
.hidden {
	display: none;
}

/* css del logo como boton flotante */
.boton-logo {
	position: fixed;
	bottom: 20px;
/* Distancia desde la parte inferior */
	left: 20px;
/* Distancia desde el lado izquierdo */
	z-index: 1000;
/* Asegura que esté por encima de otros elementos */
	cursor: pointer;
	border-radius: 50%;
/* Hace que la imagen sea completamente redonda */
	width: 50px;
/* Ancho de la imagen */
	height: 50px;
/* Alto de la imagen */
}

/* css para cuadro emergente de definiciones */
.tooltip {
	position: relative;
	display: inline;
	cursor: pointer;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: auto;
/* Asegura que el ancho se ajuste automáticamente */
	min-width: 250px;
/* Define un ancho mínimo para evitar que se haga demasiado pequeño */
	max-width: 400px;
/* Define el ancho máximo para limitar lo horizontal */
	height: auto;
/*min-height: 150px;*/
	max-height: 300px;
/* Limita la altura máxima */
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 10px;
	position: absolute;
	z-index: 1;
	top: 100%;
/* Coloca el tooltip debajo de la palabra */
	left: 50%;
	transform: translateX(-50%);
	margin-top: 10px;
	opacity: 0;
	transition: opacity .3s;
	white-space: normal;
/* Permite que el texto se ajuste en varias líneas */
	word-wrap: break-word;
/* Asegura que el texto largo se divida en líneas */
	overflow-y: auto;
/* Añade scroll vertical si el contenido es muy largo */
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}