/**
 * Estilos frontend para Botones Flotantes Laterales.
 *
 * @package Fiscalia
 * @since 1.0.0
 */
/* Variables CSS */
:root {
	--floating-button-size: 70px;
	--floating-button-gap: 15px;
	--floating-button-offset: 20px;
	--floating-button-z-index: 998;
	--floating-button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--floating-tooltip-bg: rgba(0, 0, 0, 0.9);
	--floating-tooltip-width: 200px;
	--govco-back-button-size: 60px;
	--govco-back-button-gap: 20px;
	--button-default-color: #80D4F5;
}
/* Contenedor principal */
.fiscalia-floating-buttons {
	position: fixed;
	top: 75%;
	transform: translateY(-50%);
	z-index: var(--floating-button-z-index);
	padding: var(--floating-button-offset);
}
/* Posición izquierda */
.fiscalia-floating-buttons.position-left {
	left: 0;
}
/* Posición derecha */
.fiscalia-floating-buttons.position-right {
	right: 0;
	padding-bottom: calc(var(--floating-button-offset) + var(--govco-back-button-size) + var(--govco-back-button-gap));
}
/* Lista de botones */
.floating-buttons-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--floating-button-gap);
}
/* Item de botón */
.floating-button-item {
	position: relative;
	margin: 0;
	padding: 0;
	animation: fadeInSlide 0.5s ease-out backwards;
}
/* Enlace del botón */
.floating-button-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--floating-button-size);
	height: var(--floating-button-size);
	background: var(--govcolor-cobalt);
	border-radius: 50%;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.15),
		0 2px 6px rgba(0, 0, 0, 0.1);
	transition: var(--floating-button-transition);
	text-decoration: none;
	position: relative;
	overflow: visible;
}
/* Hover/Focus del botón */
.floating-button-link:hover,
.floating-button-link:focus {
	transform: scale(1.1);
	box-shadow:
		0 6px 20px rgba(0, 0, 0, 0.2),
		0 3px 10px rgba(0, 0, 0, 0.15);
	outline: none;
}
/* Active state */
.floating-button-link:active {
	transform: scale(1.05);
}
/* Focus visible */
.floating-button-link:focus-visible {
	outline: 3px solid #FFD700;
	outline-offset: 4px;
}
/* Ícono del botón */
.button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 14px;
}
.button-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}
.floating-button-link:hover .button-icon img {
	transform: scale(1.1);
}
/* Tooltip */
.button-tooltip {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transition: var(--floating-button-transition);
	pointer-events: none;
	z-index: 1;
}
/* Posición del tooltip */
.position-left .button-tooltip {
	left: calc(100% + 15px);
	top: 50%;
	transform: translateY(-50%) translateX(-10px);
}
.position-right .button-tooltip {
	right: calc(100% + 15px);
	top: 50%;
	transform: translateY(-50%) translateX(10px);
}
/* Mostrar tooltip */
.floating-button-link:hover .button-tooltip,
.floating-button-link:focus .button-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}
/* Contenido del tooltip */
.tooltip-text {
	display: block;
	min-width: var(--floating-tooltip-width);
	max-width: 250px;
	padding: 12px 16px;
	background-color: var(--floating-tooltip-bg);
	color: #fff;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
	word-wrap: break-word;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/* Flecha del tooltip */
.tooltip-text::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 8px solid transparent;
}
.position-left .tooltip-text::before {
	right: 100%;
	border-right-color: var(--floating-tooltip-bg);
}
.position-right .tooltip-text::before {
	left: 100%;
	border-left-color: var(--floating-tooltip-bg);
}
/* Animación de entrada */
@keyframes fadeInSlide {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
/* Responsive: Tablet */
@media (max-width: 1024px) {
	:root {
		--floating-button-size: 65px;
		--floating-button-gap: 12px;
	}
}
/* Responsive: Mobile */
@media (max-width: 768px) {
	:root {
		--floating-button-size: 60px;
		--floating-button-gap: 10px;
		--floating-button-offset: 15px;
	}
	.fiscalia-floating-buttons {
		top: auto;
		bottom: 80px;
		transform: none;
		padding: var(--floating-button-offset);
	}
	.fiscalia-floating-buttons.position-right {
		right: var(--floating-button-offset);
		padding-bottom: var(--floating-button-offset);
	}
	.floating-buttons-list {
		flex-direction: column-reverse;
	}
	.button-tooltip {
		left: 50% !important;
		right: auto !important;
		bottom: calc(100% + 10px);
		top: auto !important;
		transform: translateX(-50%) translateY(10px) !important;
	}
	.floating-button-link:hover .button-tooltip,
	.floating-button-link:focus .button-tooltip {
		transform: translateX(-50%) translateY(0) !important;
	}
	.tooltip-text::before {
		top: 100%;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		border-top-color: var(--floating-tooltip-bg) !important;
		border-right-color: transparent !important;
		border-left-color: transparent !important;
	}
}
/* Responsive: Mobile pequeño */
@media (max-width: 480px) {
	:root {
		--floating-button-size: 55px;
		--floating-tooltip-width: 180px;
	}
	.tooltip-text {
		font-size: 13px;
		padding: 10px 14px;
	}
}
/* Preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.floating-button-link,
	.button-tooltip,
	.button-icon img {
		transition: none;
		animation: none;
	}
	.floating-button-item {
		animation: none;
	}
}
/* High contrast mode */
@media (prefers-contrast: high) {
	.floating-button-link {
		border: 3px solid currentColor;
	}
	.tooltip-text {
		border: 2px solid #fff;
	}
}
/* Modo impresión */
@media print {
	.fiscalia-floating-buttons {
		display: none !important;
	}
}
/* Touch device */
@media (hover: none) and (pointer: coarse) {
	.floating-button-link {
		min-width: 48px;
		min-height: 48px;
	}
	.floating-button-link:active .button-tooltip {
		opacity: 1;
		visibility: visible;
	}
}