/* ==========================================================================
   Saltava · Progreso de lectura
   ========================================================================== */

.saltava-rp {
	--saltava-rp-size: 64px;
	margin: 0 !important;
}

.saltava-rp .saltava-rp__bar {
	position: fixed;
	inset: 0 0 auto 0;
	height: 5px;
	z-index: 100000;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	pointer-events: none;
}

.admin-bar .saltava-rp__bar {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.saltava-rp .saltava-rp__fill {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
}

.saltava-rp .saltava-rp__widget {
	position: fixed;
	bottom: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	visibility: hidden;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

.saltava-rp.is-left .saltava-rp__widget {
	right: auto;
	left: clamp(1rem, 3vw, 2rem);
	align-items: flex-start;
}

.saltava-rp.is-visible .saltava-rp__widget {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 200ms ease, transform 200ms ease;
}

.saltava-rp .saltava-rp__toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--saltava-rp-size);
	height: var(--saltava-rp-size);
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--hard);
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.saltava-rp .saltava-rp__toggle:hover {
	transform: translate(-2px, -2px);
	box-shadow: 0 22px 44px -18px rgb(17 17 17 / 0.5);
}

.saltava-rp .saltava-rp__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.saltava-rp .saltava-rp__ring {
	position: absolute;
	inset: 3px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	transform: rotate(-90deg);
}

.saltava-rp .saltava-rp__ring circle {
	fill: none;
	stroke-width: 3;
}

.saltava-rp .saltava-rp__ring-bg {
	stroke: color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

.saltava-rp .saltava-rp__ring-fg {
	stroke: var(--wp--preset--color--accent);
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	stroke-linecap: round;
	transition: stroke-dashoffset 120ms linear;
}

.saltava-rp .saltava-rp__label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	font-family: var(--wp--custom--font--label);
}

.saltava-rp .saltava-rp__min {
	font-size: 1.125rem;
	font-weight: 800;
}

.saltava-rp .saltava-rp__unit {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.saltava-rp.is-done .saltava-rp__toggle {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	border-color: var(--wp--preset--color--accent);
}

.saltava-rp.is-done .saltava-rp__ring-fg {
	stroke: var(--wp--preset--color--on-accent);
}

/* Panel desplegable. */
.saltava-rp .saltava-rp__panel {
	width: min(300px, calc(100vw - 2rem));
	padding: 1rem 1.125rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--hard);
	font-size: var(--wp--preset--font-size--small);
}

.saltava-rp .saltava-rp__panel[hidden] {
	display: none;
}

.saltava-rp .saltava-rp__panel p {
	margin: 0 0 0.5rem;
}

.saltava-rp .saltava-rp__status {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--wp--custom--font--label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--x-small);
}

.saltava-rp .saltava-rp__pct {
	font-family: var(--wp--custom--font--display);
	font-size: 2rem;
	letter-spacing: -0.02em;
	text-transform: none;
}

.saltava-rp .saltava-rp__total {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.saltava-rp .saltava-rp__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.saltava-rp .saltava-rp__action {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.35rem 0.7rem;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	color: inherit;
	font: 700 0.75rem/1 var(--wp--custom--font--label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.saltava-rp .saltava-rp__action:hover,
.saltava-rp .saltava-rp__action:focus-visible,
.saltava-rp .saltava-rp__action.is-copied {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.saltava-rp .saltava-rp__action:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.saltava-rp .saltava-rp__widget,
	.saltava-rp .saltava-rp__toggle,
	.saltava-rp .saltava-rp__ring-fg {
		transition: none;
	}
}

@media print {
	.saltava-rp {
		display: none !important;
	}
}

/* Vista en el editor. */
.saltava-rp-placeholder {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 2px dashed currentColor;
	font-family: var(--wp--custom--font--label);
	font-size: 0.8125rem;
}