/* ESTILO PARA LOS ICONOS DE BOCINAS */
.speakerAcc {
	font-size: 24px;
	cursor: pointer;
	margin-left: 10px;
	color: #2196f3;
	display: inline-block;
}
.speakerAcc:hover {
	color: #0b7dda;
}
/* Animación de fade in/out para la bocina activa */
@keyframes fade {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}
.speakerAcc-anim {
	animation: fade 1s infinite;
}
/* ESTILOS PARA BOTÓN FLOTANTE */
.btn-accFlotante {
	position: fixed;
	bottom: 70px;
	right: 10px;
	background-color: #ffffff85;
	border: none;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s;
	width: 52px;
	height: 52px;
}
.iconoAcc {
	width: 52px;
	height: 52px;
}
.btn-accFlotante:hover {
	/* background-color: rgba(0, 0, 0, 0.1); */
	background-color: rgb(217 104 38 / 50%);
}

/* ESTILOS PARA OPCIONES DE MENÚ */
.menuAcc {
	position: fixed;
	bottom: 110px; /* Ajustar según la altura del botón flotante */
	right: 10px;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	padding: 10px 20px;
	z-index: 10;
}
.menuAcc ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.menuAcc ul li {
	margin: 10px 0;
}
/* Agrupar controles de tamaño en una sola línea */
#controlTamano {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Estilos para los botones A+ y A- */
#controlTamano button.opcion {
	background: transparent;
	border: 0px solid #333;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	transition: all 0.2s ease;
	padding: 8px 12px;
	cursor: pointer;
}
#controlTamano button.opcion:hover {
	border-color: #007bff;
}
#controlTamano button.opcion:active {
	transform: translateY(2px);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Estilo para el botón Reset (icono) */
.resetAcc-btn {
	background: transparent;
	border: 0px solid #333;
	font-size: 22px;
	/* Se elimina el padding para que la sombra se ajuste solo al icono */
	padding: 0;
	cursor: pointer;
	/* Se reemplaza box-shadow por drop-shadow */
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
	transition: all 0.2s ease;
}
.resetAcc-btn:hover {
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}
.resetAcc-btn:active {
	transform: translateY(2px);
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

/* Estilos para Toggle Switch */
.switchAcc-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 0;
}
.switchAcc-container label {
	margin-left: 15px;
}
.switchAcc {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 24px;
}
.switchAcc input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slideAcc {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 34px;
}
.slideAcc:before {
	position: absolute;
	content: '';
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}
input:checked + .slideAcc {
	background-color: #2196f3;
}
input:checked + .slideAcc:before {
	transform: translateX(11px);
}
@keyframes parpadeo {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}
@-webkit-keyframes parpadeo {
	/* Safari y Chrome */
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@-moz-keyframes parpadeo {
	/* Firefox */
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@-o-keyframes parpadeo {
	/* Opera */
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

#btnAccesibilidad {
	-webkit-animation: parpadeo 0.5s ease-in-out 4;
	-moz-animation: parpadeo 0.5s ease-in-out 4;
	-o-animation: parpadeo 0.5s ease-in-out 4;
	animation: parpadeo 0.5s ease-in-out 4;
}

#access rect,
#access ellipse {
	fill: #fff !important;
}
#access circle {
	fill: #dc620f !important; /* Color de las figuras */
}