/* Botón Volver Arriba — fijo, aparece al bajar y sube al inicio.
   Todo el "look" son variables CSS con valor por defecto propio; los controles de Estilo del
   widget las pisan por instancia. Ver indexdesign-elementos.md §Botón Volver Arriba. */

.idx-va {
	position: fixed;
	bottom: var(--idx-va-y, 28px);
	z-index: var(--idx-va-z, 55);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--idx-va-in, 400ms) ease,
		transform var(--idx-va-in, 400ms) cubic-bezier(.22, .9, .3, 1),
		visibility 0s linear var(--idx-va-in, 400ms);
}

.idx-va--left {
	left: var(--idx-va-x, 28px);
	--idx-va-dir: -1;
}

.idx-va--right {
	right: var(--idx-va-x, 28px);
	--idx-va-dir: 1;
}

/* ── Entrada: estado oculto de cada efecto ─────────────────────── */
.idx-va--fx-slide-up:not(.is-visible) { transform: translateY(28px); }
.idx-va--fx-slide-side:not(.is-visible) { transform: translateX(calc(var(--idx-va-dir, -1) * 36px)); }
.idx-va--fx-zoom:not(.is-visible) { transform: scale(.4); }
.idx-va--fx-bounce:not(.is-visible) { transform: translateY(22px) scale(.7); }

.idx-va--fx-bounce {
	transition:
		opacity var(--idx-va-in, 400ms) ease,
		transform var(--idx-va-in, 400ms) cubic-bezier(.34, 1.56, .64, 1),
		visibility 0s linear var(--idx-va-in, 400ms);
}

.idx-va--fx-none { transition: none; }

.idx-va.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* ── Botón ─────────────────────────────────────────────────────── */
.idx-va__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--idx-va-gap, 8px);
	box-sizing: border-box;
	width: var(--idx-va-size, 48px);
	height: var(--idx-va-size, 48px);
	padding: 0;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	color: #4A6269;
	background-color: rgba(252, 253, 254, .92);
	border: 1px solid #DFE9EC;
	border-radius: 50%;
	box-shadow: 0 12px 24px -14px rgba(25, 45, 52, .35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition:
		transform var(--idx-va-hv, 250ms) ease,
		box-shadow var(--idx-va-hv, 250ms) ease,
		background-color var(--idx-va-hv, 250ms) ease,
		border-color var(--idx-va-hv, 250ms) ease,
		color var(--idx-va-hv, 250ms) ease;
}

/* Con texto, el botón crece a lo ancho y el alto sigue siendo el tamaño elegido. */
.idx-va__btn--text {
	width: auto;
	min-width: var(--idx-va-size, 48px);
	padding-inline: calc(var(--idx-va-size, 48px) * .35);
}

/* Los estilos por defecto del tema pintan los enlaces en :hover/:focus; se repiten acá
   los colores base para que el rollover del widget gane siempre. */
.idx-va__btn:hover,
.idx-va__btn:focus-visible {
	color: #fff;
	background-color: #1FBCEE;
	border-color: #1FBCEE;
	text-decoration: none;
	box-shadow: 0 16px 28px -12px rgba(31, 188, 238, .5);
}

.idx-va__btn:focus-visible {
	outline: 2px solid #0E8BB3;
	outline-offset: 3px;
}

.idx-va__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--idx-va-icon, 18px);
	line-height: 1;
	transition: transform var(--idx-va-hv, 250ms) ease;
}

.idx-va__icon i,
.idx-va__icon svg {
	width: 1em;
	height: 1em;
	font-size: 1em;
	fill: currentColor;
}

.idx-va__icon svg.idx-va__svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.idx-va__text {
	font-size: .9rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ── Rollover: efectos ─────────────────────────────────────────── */
.idx-va--hv-lift .idx-va__btn:hover,
.idx-va--hv-lift .idx-va__btn:focus-visible { transform: translateY(-4px); }

.idx-va--hv-grow .idx-va__btn:hover,
.idx-va--hv-grow .idx-va__btn:focus-visible { transform: scale(1.12); }

.idx-va--hv-arrow .idx-va__btn:hover .idx-va__icon,
.idx-va--hv-arrow .idx-va__btn:focus-visible .idx-va__icon { transform: translateY(-3px); }

.idx-va--hv-pulse .idx-va__btn:hover::after,
.idx-va--hv-pulse .idx-va__btn:focus-visible::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	animation: idxVaPulse 1.2s ease-out infinite;
}

@keyframes idxVaPulse {
	0%   { box-shadow: 0 0 0 0 rgba(31, 188, 238, .45); }
	100% { box-shadow: 0 0 0 14px rgba(31, 188, 238, 0); }
}

/* ── Accesibilidad e impresión ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.idx-va,
	.idx-va__btn,
	.idx-va__icon { transition: none !important; }
	.idx-va__btn::after { animation: none !important; }
}

@media print {
	.idx-va { display: none; }
}