/* AOF Botones Flotantes v1.0 — autocontenido (funciona con o sin aof-retro.css) */
.aof-fl {
	--fl-ink: #14213d;
	--fl-card: #ffffff;
	--fl-taxi: #ffc61a;
	--fl-signal: #ff5a3c;
	--fl-ok: #12b76a;
	--fl-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--fl-display: 'Bungee', 'Arial Black', sans-serif;
	--fl-pop: cubic-bezier(.34, 1.56, .64, 1);

	position: fixed;
	right: 0;
	top: var(--fl-top, 50%);
	translate: 0 -50%;
	z-index: 9996;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	pointer-events: none;
	font-family: var(--fl-body);
}
.aof-fl * { box-sizing: border-box; }
.aof-fl-item { position: relative; pointer-events: auto; }

/* ---------- Botón ---------- */
.aof-fl a.aof-fl-btn,
.aof-fl a.aof-fl-btn:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 9px 16px 9px 11px;
	background: var(--c, var(--fl-taxi));
	color: var(--fl-ink) !important;
	font: 400 .82rem/1.1 var(--fl-display);
	letter-spacing: .02em;
	text-decoration: none !important;
	border: 3px solid var(--fl-ink);
	border-right: 0;
	border-radius: 16px 0 0 16px;
	box-shadow: -4px 4px 0 var(--fl-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: translate .18s var(--fl-pop), box-shadow .15s ease, filter .15s ease;
}
.aof-fl a.aof-fl-btn:hover,
.aof-fl a.aof-fl-btn:focus-visible {
	translate: -6px 0;
	box-shadow: -9px 6px 0 var(--fl-ink);
	filter: brightness(1.05);
	color: var(--fl-ink) !important;
}
.aof-fl a.aof-fl-btn:active {
	translate: 0 3px;
	box-shadow: -1px 1px 0 var(--fl-ink);
}
.aof-fl a.aof-fl-btn:focus-visible { outline: 3px solid #35d0d8; outline-offset: 3px; }

.aof-fl-ico {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: #fff;
	border: 2.5px solid var(--fl-ink);
	border-radius: 50%;
}
.aof-fl-ico svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--fl-ink);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.aof-fl-btn:hover .aof-fl-ico { animation: aof-fl-wiggle .5s ease; }
.aof-fl-btn.is-nudge { animation: aof-fl-nudge .7s var(--fl-pop); }

.aof-fl-label { white-space: nowrap; color: var(--fl-ink); }

/* Punto de disponibilidad */
.aof-fl-dot {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 13px;
	height: 13px;
	background: #9aa8b2;
	border: 2.5px solid var(--fl-ink);
	border-radius: 50%;
}
.aof-fl-dot.is-on { background: var(--fl-ok); animation: aof-fl-ping 1.6s ease-out infinite; }
.aof-fl-dot.is-off { background: var(--fl-signal); }

/* Insignia con número */
.aof-fl-badge {
	position: absolute;
	top: -12px;
	left: -10px;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	display: grid;
	place-items: center;
	background: var(--fl-ink);
	color: var(--fl-taxi);
	font: 400 .8rem/1 var(--fl-display);
	border: 2.5px solid #fff;
	border-radius: 999px;
	box-shadow: 0 0 0 2.5px var(--fl-ink);
	animation: aof-fl-pulse 1.4s ease-in-out infinite;
}
.aof-fl-badge[hidden] { display: none; }

/* ---------- Globo tipo cómic ---------- */
.aof-fl-bubble {
	position: absolute;
	right: calc(100% + 18px);
	top: 50%;
	translate: 0 -50%;
	rotate: -2deg;
	width: max-content;
	max-width: min(270px, 62vw);
	padding: 10px 26px 10px 12px;
	background-color: var(--fl-card);
	background-image: radial-gradient(rgba(20, 33, 61, .13) 1.2px, transparent 1.5px);
	background-size: 7px 7px;
	color: var(--fl-ink);
	border: 3px solid var(--fl-ink);
	border-radius: 18px;
	box-shadow: 4px 4px 0 var(--fl-ink);
	transform-origin: 100% 50%;
	opacity: 0;
	scale: .6;
	pointer-events: none;
	transition: opacity .18s ease, scale .3s var(--fl-pop);
}
.aof-fl-bubble.is-on { opacity: 1; scale: 1; pointer-events: auto; }
.aof-fl-bubble::before,
.aof-fl-bubble::after {
	content: "";
	position: absolute;
	top: 50%;
	border-style: solid;
	border-color: transparent;
}
.aof-fl-bubble::before {
	right: -17px;
	margin-top: -10px;
	border-width: 10px 0 10px 17px;
	border-left-color: var(--fl-ink);
}
.aof-fl-bubble::after {
	right: -12px;
	margin-top: -7px;
	border-width: 7px 0 7px 13px;
	border-left-color: var(--fl-card);
}
.aof-fl-pow {
	display: inline-block;
	margin-right: 7px;
	padding: 2px 6px;
	background: var(--fl-taxi);
	border: 2px solid var(--fl-ink);
	border-radius: 6px;
	rotate: -4deg;
	font: 400 .68rem/1.2 var(--fl-display);
	vertical-align: 1px;
}
.aof-fl-text { font: 700 .9rem/1.35 var(--fl-body); }
.aof-fl-x {
	position: absolute;
	top: -11px;
	left: -11px;
	width: 22px;
	height: 22px;
	padding: 0;
	display: grid;
	place-items: center;
	background: var(--fl-card);
	color: var(--fl-ink);
	border: 2.5px solid var(--fl-ink);
	border-radius: 50%;
	font: 700 .95rem/1 var(--fl-body);
	cursor: pointer;
	box-shadow: none;
}
.aof-fl-x:hover { background: var(--fl-taxi); }

/* ---------- Panel para visitantes ---------- */
.aof-fl-panel {
	position: absolute;
	right: calc(100% + 16px);
	top: 50%;
	translate: 0 -50%;
	width: min(290px, 74vw);
	padding: 16px;
	background: var(--fl-card);
	color: var(--fl-ink);
	border: 3px solid var(--fl-ink);
	border-radius: 18px;
	box-shadow: 6px 6px 0 var(--fl-ink);
	opacity: 0;
	scale: .85;
	pointer-events: none;
	transform-origin: 100% 50%;
	transition: opacity .15s ease, scale .25s var(--fl-pop);
}
.aof-fl-panel.is-open { opacity: 1; scale: 1; pointer-events: auto; }
.aof-fl-panel h3 {
	margin: 0 0 6px;
	font: 400 1.05rem/1.2 var(--fl-display);
	color: var(--fl-ink);
}
.aof-fl-panel p { margin: 0 0 12px; font: 500 .9rem/1.4 var(--fl-body); color: var(--fl-ink); }
.aof-fl-panel-row { display: flex; gap: 8px; flex-wrap: wrap; }
.aof-fl-panel a.aof-fl-go,
.aof-fl-panel a.aof-fl-go:visited {
	flex: 1 1 auto;
	text-align: center;
	padding: 10px 12px;
	background: var(--fl-taxi);
	color: var(--fl-ink) !important;
	font: 400 .78rem/1.1 var(--fl-display);
	text-decoration: none !important;
	border: 2.5px solid var(--fl-ink);
	border-radius: 10px;
	box-shadow: 3px 3px 0 var(--fl-ink);
	transition: translate .12s var(--fl-pop), box-shadow .12s ease;
}
.aof-fl-panel a.aof-fl-go--alt { background: #fff; }
.aof-fl-panel a.aof-fl-go:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--fl-ink); }
.aof-fl-panel a.aof-fl-go:active { translate: 3px 3px; box-shadow: 0 0 0 var(--fl-ink); }

/* ---------- Móvil: solo icono, el globo habla ---------- */
@media (max-width: 767px) {
	.aof-fl { gap: 12px; }
	.aof-fl a.aof-fl-btn { min-height: 50px; padding: 7px 9px 7px 8px; }
	.aof-fl-label { display: none; }
	.aof-fl-bubble { max-width: 58vw; right: calc(100% + 16px); }
	.aof-fl-text { font-size: .82rem; }
}

@media print { .aof-fl { display: none !important; } }

/* ---------- Animaciones ---------- */
@keyframes aof-fl-wiggle {
	25% { rotate: -14deg; }
	50% { rotate: 12deg; }
	75% { rotate: -6deg; }
}
@keyframes aof-fl-nudge {
	0% { translate: 0 0; }
	30% { translate: -14px 0; }
	60% { translate: 2px 0; }
	100% { translate: 0 0; }
}
@keyframes aof-fl-pulse {
	50% { scale: 1.15; }
}
@keyframes aof-fl-ping {
	0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .55); }
	100% { box-shadow: 0 0 0 9px rgba(18, 183, 106, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.aof-fl *, .aof-fl *::before, .aof-fl *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}