/* Feature tabs — animated previews (Lo que incluye) */

.ftv[data-ftv-demo] {
	position: relative;
	overflow: visible;
}

/* —— Agenda: chips fill day by day —— */
.ftv[data-ftv-demo="agenda"] .ftv__chip-cal {
	transform-origin: bottom center;
	transform: scaleY(0);
	opacity: 0.45;
}

.ftv[data-ftv-demo="agenda"].is-ftv-play .ftv__chip-cal {
	animation: ftv-chip-fill 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: var(--ftv-delay, 0s);
}

@keyframes ftv-chip-fill {
	to {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* —— Equipo: progress bars —— */
.ftv[data-ftv-demo="equipo"] .ftv__fill {
	width: 0;
	transition: none;
}

.ftv[data-ftv-demo="equipo"].is-ftv-play .ftv__fill {
	width: var(--ftv-fill, 50%);
	transition: width 1.05s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--ftv-delay, 0s);
}

/* —— Recordatorios: confirm tap —— */
.ftv--recordatorios .ftv__confirm-btn {
	cursor: default;
	font: inherit;
	font-size: var(--text-xs);
	line-height: 1.5;
	text-align: right;
	transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.2s var(--ease-out);
}

.ftv--recordatorios .ftv__confirm-btn.is-confirmed {
	background: oklch(52% 0.14 145);
	border-color: oklch(45% 0.12 145);
	color: oklch(98% 0.02 145);
	transform: scale(1.02);
}

.ftv--recordatorios .ftv__cursor {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	transition: transform 0.08s ease-out, opacity 0.25s var(--ease-out);
}

.ftv--recordatorios.is-ftv-ready .ftv__cursor {
	opacity: 1;
}

.ftv--recordatorios .ftv__cursor.is-pressing {
	transition: transform 0.06s ease-in;
}

/* —— Fichas: typed dates —— */
.ftv__typed {
	min-width: 4.5rem;
	text-align: right;
}

.ftv__typed::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.85em;
	margin-left: 1px;
	vertical-align: -0.08em;
	background: var(--color-accent);
	opacity: 0;
}

.ftv__typed.is-typing::after {
	opacity: 1;
	animation: ftv-caret 0.85s step-end infinite;
}

@keyframes ftv-caret {
	50% {
		opacity: 0;
	}
}

/* —— Importar —— */
.ftv--import .ftv__import-progress {
	height: 5px;
	margin: var(--space-sm) 0 var(--space-xs);
	border-radius: var(--radius-pill);
	background: var(--color-paper-2);
	overflow: hidden;
}

.ftv--import .ftv__import-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--grad-brand);
}

.ftv--import.is-ftv-play .ftv__import-progress-bar {
	animation: ftv-import-progress 2.75s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

.ftv--import.is-ftv-play .ftv__file {
	animation: ftv-file-glow 2.75s ease-in-out;
}

.ftv--import .ftv__maprow {
	opacity: 0.4;
	transform: translateX(-6px);
}

.ftv--import.is-ftv-play .ftv__maprow {
	animation: ftv-map-row 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: var(--ftv-delay, 0s);
}

.ftv--import .ftv__import-status {
	margin-top: auto;
	margin-bottom: 0;
	min-height: 2.75rem;
	display: grid;
	place-items: center;
	text-align: center;
}

.ftv--import .ftv__import-phase,
.ftv--import .ftv__import-done {
	grid-area: 1 / 1;
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.35;
}

.ftv--import .ftv__import-phase {
	color: var(--color-muted);
	opacity: 0;
}

.ftv--import.is-ftv-play .ftv__import-phase {
	animation: ftv-import-phase 2.75s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

.ftv--import .ftv__import-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-pill);
	background: oklch(52% 0.14 145);
	color: oklch(98% 0.02 145);
	opacity: 0;
	transform: translateY(6px) scale(0.98);
}

.ftv--import .ftv__import-done::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: oklch(45% 0.12 145);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
}

.ftv--import.is-ftv-play .ftv__import-done {
	animation: ftv-import-success 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.75s forwards;
}

@keyframes ftv-import-phase {
	0%,
	12% {
		opacity: 0;
	}
	18%,
	78% {
		opacity: 1;
	}
	88%,
	100% {
		opacity: 0;
	}
}

@keyframes ftv-import-success {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes ftv-import-progress {
	to {
		width: 100%;
	}
}

@keyframes ftv-file-glow {
	0%,
	100% {
		box-shadow: none;
	}
	35%,
	55% {
		box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-accent) 35%, transparent);
	}
}

@keyframes ftv-map-row {
	to {
		opacity: 1;
		transform: translateX(0);
		background: var(--color-accent-soft);
		border-color: color-mix(in oklch, var(--color-accent) 40%, var(--color-rule));
	}
}

/* —— Analíticas: dual bar charts —— */
.ftv--analytics .ftv__chart-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	flex: 1 1;
	align-items: stretch;
	min-height: 7.5rem;
}

.ftv--analytics .ftv__chart-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	min-height: 0;
}

.ftv--analytics .ftv__chart-label {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-muted);
}

.ftv--analytics .ftv__chart {
	min-height: 5.5rem;
	padding-top: var(--space-2xs);
}

.ftv[data-ftv-demo="analiticas"] .ftv__cbar {
	height: 0;
	align-self: flex-end;
	transform-origin: bottom center;
}

.ftv[data-ftv-demo="analiticas"].is-ftv-play .ftv__cbar {
	animation: ftv-cbar-grow 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(0.08s + var(--bar-i, 0) * 0.07s);
}

.ftv__cbar--abs {
	background: color-mix(in oklch, var(--color-amber-deep) 38%, var(--color-paper));
}

.ftv__cbar--abs.is-peak {
	background: var(--color-amber-deep);
}

@keyframes ftv-cbar-grow {
	to {
		height: var(--bar-h, 50%);
	}
}

@media (max-width: 640px) {
	.ftv--analytics .ftv__chart-duo {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ftv[data-ftv-demo="agenda"] .ftv__chip-cal,
	.ftv[data-ftv-demo="agenda"].is-ftv-play .ftv__chip-cal {
		animation: none;
		transform: scaleY(1);
		opacity: 1;
	}

	.ftv[data-ftv-demo="equipo"] .ftv__fill,
	.ftv[data-ftv-demo="equipo"].is-ftv-play .ftv__fill {
		width: var(--ftv-fill, 50%);
		transition: none;
	}

	.ftv--recordatorios .ftv__cursor {
		display: none;
	}

	.ftv--import.is-ftv-play .ftv__import-progress-bar,
	.ftv--import.is-ftv-play .ftv__maprow,
	.ftv--import.is-ftv-play .ftv__file,
	.ftv--import.is-ftv-play .ftv__import-phase,
	.ftv--import.is-ftv-play .ftv__import-done {
		animation: none;
	}

	.ftv--import .ftv__import-phase {
		opacity: 0;
	}

	.ftv--import .ftv__import-done {
		opacity: 1;
		transform: none;
	}

	.ftv--import .ftv__maprow {
		opacity: 1;
		transform: none;
	}

	.ftv--import .ftv__import-progress-bar {
		width: 100%;
	}

	.ftv[data-ftv-demo="analiticas"] .ftv__cbar,
	.ftv[data-ftv-demo="analiticas"].is-ftv-play .ftv__cbar {
		animation: none;
		height: var(--bar-h, 50%);
	}
}