/*
 * CM Núcleo — módulo "Rolar ao topo".
 * As cores e medidas chegam por variáveis CSS geradas pelo plugin; os valores
 * escritos aqui são apenas a reserva usada quando nada foi configurado.
 */

.cmn-topo {
	position: fixed;
	z-index: 9990;
	bottom: var(--cmn-topo-margem, 24px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--cmn-topo-tamanho, 44px);
	height: var(--cmn-topo-tamanho, 44px);
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--cmn-topo-fundo, #1f2937);
	color: var(--cmn-topo-icone, #ffffff);
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	/* Escondido: visibility:hidden também tira o botão da tabulação. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}

.cmn-topo--direita {
	right: var(--cmn-topo-margem, 24px);
	left: auto;
}

.cmn-topo--esquerda {
	left: var(--cmn-topo-margem, 24px);
	right: auto;
}

.cmn-topo--circulo {
	border-radius: 50%;
}

.cmn-topo--quadrado {
	border-radius: 6px;
}

.cmn-topo--visivel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cmn-topo:hover,
.cmn-topo:focus {
	background-color: var(--cmn-topo-fundo-hover, #111827);
}

/* Foco sempre visível, inclusive em navegadores sem :focus-visible. */
.cmn-topo:focus {
	outline: 3px solid var(--cmn-topo-foco, rgba(31, 41, 55, 0.45));
	outline-offset: 3px;
}

.cmn-topo svg {
	width: 55%;
	height: 55%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.cmn-topo {
		transition: none;
	}
}

@media print {
	.cmn-topo {
		display: none;
	}
}