/* =========================================================
   AIDO BUTTON
   ========================================================= */

.aido-button-wrap {
	display: flex;
	width: 100%;
}

.aido-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	padding: 10px 15px;
	border: 0;
	outline: 0;
	background-color: transparent;
	color: rgba(255,255,255,.92);
	text-decoration: none;
	line-height: 1.1;
	cursor: pointer;
	transition: color .22s ease, background-color .22s ease, box-shadow .22s ease, filter .22s ease;
}

.aido-button:hover,
.aido-button:focus-visible,
.aido-button:active,
.aido-button.is-active {
	color: #fff;
	text-decoration: none;
}

/*
 * Glow exterior del botón.
 *
 * El botón original de Alto Energy no dependía sólo del text-shadow:
 * también aplicaba dos drop-shadows al elemento completo. Esa segunda
 * capa es la que genera la iluminación azul amplia y suave alrededor
 * del texto, icono y esquinas sin desenfocar el contenido original.
 */
.aido-button.aido-fx--glow-soft:hover,
.aido-button.aido-fx--glow-soft:focus-visible,
.aido-button.aido-fx--glow-soft:active,
.aido-button.aido-fx--glow-soft.is-active {
	filter: drop-shadow(0 0 4px rgba(255,255,255,.28)) drop-shadow(0 0 12px rgba(70,135,255,.52));
	-webkit-filter: drop-shadow(0 0 4px rgba(255,255,255,.28)) drop-shadow(0 0 12px rgba(70,135,255,.52));
}

.aido-button.aido-fx--glow-medium:hover,
.aido-button.aido-fx--glow-medium:focus-visible,
.aido-button.aido-fx--glow-medium:active,
.aido-button.aido-fx--glow-medium.is-active {
	filter: drop-shadow(0 0 7px rgba(255,255,255,.45)) drop-shadow(0 0 18px rgba(70,135,255,.80));
	-webkit-filter: drop-shadow(0 0 7px rgba(255,255,255,.45)) drop-shadow(0 0 18px rgba(70,135,255,.80));
}

.aido-button.aido-fx--glow-strong:hover,
.aido-button.aido-fx--glow-strong:focus-visible,
.aido-button.aido-fx--glow-strong:active,
.aido-button.aido-fx--glow-strong.is-active {
	filter: drop-shadow(0 0 9px rgba(255,255,255,.55)) drop-shadow(0 0 24px rgba(70,135,255,.92));
	-webkit-filter: drop-shadow(0 0 9px rgba(255,255,255,.55)) drop-shadow(0 0 24px rgba(70,135,255,.92));
}

.aido-button__text {
	position: relative;
	z-index: 1;
	text-shadow: 0 0 2px rgba(255,255,255,.38), 0 0 7px rgba(70,135,255,.28);
	transition: text-shadow .22s ease;
}

.aido-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	line-height: 1;
}

.aido-button__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	transition: filter .22s ease;
}

.aido-button__icon i {
	line-height: 1;
	transition: text-shadow .22s ease;
}

/* Texto: mismo concepto lumínico del menú aprobado. */
.aido-button.aido-fx--glow-soft:hover .aido-button__text,
.aido-button.aido-fx--glow-soft:focus-visible .aido-button__text,
.aido-button.aido-fx--glow-soft:active .aido-button__text,
.aido-button.aido-fx--glow-soft.is-active .aido-button__text {
	text-shadow: 0 0 1px rgba(255,255,255,1), 0 0 5px rgba(255,255,255,.75), 0 0 12px rgba(70,135,255,.68), 0 0 22px rgba(70,135,255,.42);
}

.aido-button.aido-fx--glow-medium:hover .aido-button__text,
.aido-button.aido-fx--glow-medium:focus-visible .aido-button__text,
.aido-button.aido-fx--glow-medium:active .aido-button__text,
.aido-button.aido-fx--glow-medium.is-active .aido-button__text {
	text-shadow: 0 0 2px rgba(255,255,255,1), 0 0 8px rgba(255,255,255,.90), 0 0 18px rgba(70,135,255,.95), 0 0 34px rgba(70,135,255,.75);
}

.aido-button.aido-fx--glow-strong:hover .aido-button__text,
.aido-button.aido-fx--glow-strong:focus-visible .aido-button__text,
.aido-button.aido-fx--glow-strong:active .aido-button__text,
.aido-button.aido-fx--glow-strong.is-active .aido-button__text {
	text-shadow: 0 0 2px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,.95), 0 0 23px rgba(70,135,255,1), 0 0 42px rgba(70,135,255,.82);
}

/* Iconos del botón: el glow exterior se aplica al botón completo.
 * El SVG/i permanece nítido y participa naturalmente del halo del padre. */
.aido-button.aido-fx--glow:hover .aido-button__icon svg,
.aido-button.aido-fx--glow:focus-visible .aido-button__icon svg,
.aido-button.aido-fx--glow:active .aido-button__icon svg,
.aido-button.aido-fx--glow.is-active .aido-button__icon svg {
	filter: none;
}

.aido-button.aido-fx--glow:hover .aido-button__icon i,
.aido-button.aido-fx--glow:focus-visible .aido-button__icon i,
.aido-button.aido-fx--glow:active .aido-button__icon i,
.aido-button.aido-fx--glow.is-active .aido-button__icon i {
	text-shadow: none;
}


/* =========================================================
   ENCUADRE EXTERIOR DEL BOTÓN

   Cuando el switch está activo, conserva SIEMPRE visibles
   las mismas dos esquinas que aparecen en el hover del efecto
   AIDO (superior izquierda + inferior derecha), pero en estado
   normal no añade glow ni sombra exterior.

   El hover/focus/active sólo intensifica el color de esas líneas.
   ========================================================= */

.aido-button.aido-fx--frame {
	box-shadow: none;
	background-image:
		linear-gradient(90deg, color-mix(in srgb, var(--aido-fx-light) 78%, transparent), color-mix(in srgb, var(--aido-fx-accent) 58%, transparent)),
		linear-gradient(180deg, color-mix(in srgb, var(--aido-fx-light) 78%, transparent), color-mix(in srgb, var(--aido-fx-accent) 58%, transparent)),
		radial-gradient(circle at 6px 6px, transparent 4.7px, color-mix(in srgb, var(--aido-fx-light) 78%, transparent) 5px, color-mix(in srgb, var(--aido-fx-accent) 58%, transparent) 6px, transparent 6.3px),
		linear-gradient(270deg, color-mix(in srgb, var(--aido-fx-light) 78%, transparent), color-mix(in srgb, var(--aido-fx-accent) 58%, transparent)),
		linear-gradient(0deg, color-mix(in srgb, var(--aido-fx-light) 78%, transparent), color-mix(in srgb, var(--aido-fx-accent) 58%, transparent)),
		radial-gradient(circle at 0 0, transparent 4.7px, color-mix(in srgb, var(--aido-fx-light) 78%, transparent) 5px, color-mix(in srgb, var(--aido-fx-accent) 58%, transparent) 6px, transparent 6.3px);
	background-repeat: no-repeat;
	background-position: left 6px top 0, left 0 top 6px, left top, right 6px bottom 0, right 0 bottom 6px, right bottom;
	background-size: 8px 1px, 1px 8px, 6px 6px, 8px 1px, 1px 8px, 6px 6px;
}

.aido-button.aido-fx--frame:hover,
.aido-button.aido-fx--frame:focus-visible,
.aido-button.aido-fx--frame:active,
.aido-button.aido-fx--frame.is-active {
	box-shadow: none;
	/* Si también está activo “Esquinas luminosas”, evitamos que
	   el keyframe vuelva a ocultar el encuadre al entrar en hover. */
	animation: none;
	background-size: 8px 1px, 1px 8px, 6px 6px, 8px 1px, 1px 8px, 6px 6px;
	background-image:
		linear-gradient(90deg, var(--aido-fx-light), var(--aido-fx-accent)),
		linear-gradient(180deg, var(--aido-fx-light), var(--aido-fx-accent)),
		radial-gradient(circle at 6px 6px, transparent 4.7px, var(--aido-fx-light) 5px, var(--aido-fx-accent) 6px, transparent 6.3px),
		linear-gradient(270deg, var(--aido-fx-light), var(--aido-fx-accent)),
		linear-gradient(0deg, var(--aido-fx-light), var(--aido-fx-accent)),
		radial-gradient(circle at 0 0, transparent 4.7px, var(--aido-fx-light) 5px, var(--aido-fx-accent) 6px, transparent 6.3px);
}