.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #25d366;
  background-color:#fff;
}

.my-float{
	margin-top:16px;
}

/* Botón flotante Pedidos Web */
.float-web{
	position:fixed;
	width:60px;
	height:60px;
	bottom:110px;
	right:40px;
	background-color:#2196F3;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:30px;
	box-shadow: 2px 2px 3px #999;
	z-index:100;
	display:none; /* Solo visible en movil */
}
.float-web:hover {
	text-decoration: none;
	color: #2196F3;
	background-color:#fff;
}
.float-web-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: #ff5722;
	color: #fff;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 12px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.float-web-alert {
	position: fixed;
	bottom: 180px;
	right: 40px;
	background: #fff;
	border-left: 4px solid #2196F3;
	color: #333;
	padding: 14px 18px;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
	z-index: 99;
	max-width: 280px;
	font-family: 'Segoe UI', Arial, sans-serif;
	animation: slideInAlert 0.4s ease;
}
.float-web-alert strong {
	font-size: 14px;
	color: #2196F3;
	display: block;
	margin-bottom: 4px;
}
.float-web-alert p {
	font-size: 12px;
	margin: 0;
	color: #555;
}
@keyframes slideInAlert {
	from { transform: translateX(100px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

/* ====== MAPERO DE MESA (boton flotante) ====== */
.float-mesas{
	position:fixed;
	width:60px;
	height:60px;
	bottom:180px;
	right:40px;
	background-color:#8e44ad;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:28px;
	box-shadow: 2px 2px 3px #999;
	z-index:100;
}
.float-mesas:hover {
	text-decoration: none;
	color: #8e44ad;
	background-color:#fff;
}

/* ====== MONITOR DE IMPRESION (QZ TRAY) ====== */
.float-print{
	position:fixed;
	width:60px;
	height:60px;
	bottom:110px;
	right:40px;
	background-color:#2980b9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:28px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float-print:hover {
	text-decoration: none;
	color: #2980b9;
  background-color:#fff;
}

.float-print-badge {
	position: absolute;
	bottom: -6px;
	right: -6px;
	background: #e74c3c;
	color: #fff;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 12px;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
	z-index: 101;
	display: none;
}
.float-print-badge.visible {
	display: block;
	animation: badgePop 0.3s ease;
}
@keyframes badgePop {
	0%   { transform: scale(0.5); }
	60%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* Card alerta impresion flotante */
.print-alert-card {
	position: fixed;
	bottom: 118px;
	right: 110px;
	background: #fff;
	border-radius: 12px;
	padding: 14px 18px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
	display: none;
	align-items: center;
	gap: 12px;
	z-index: 99;
	min-width: 260px;
	border-left: 5px solid #e74c3c;
	font-family: 'Segoe UI', Arial, sans-serif;
	animation: slideInCard 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.print-alert-card.visible {
	display: flex;
}
.print-alert-card .print-alert-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #ffebee;
	color: #c62828;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
	animation: pulseIcon 2s infinite;
}
.print-alert-card .print-alert-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.print-alert-card .print-alert-title {
	font-size: 13px;
	font-weight: 700;
	color: #c62828;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.print-alert-card .print-alert-text {
	font-size: 13px;
	color: #555;
	font-weight: 500;
}
.print-alert-card.verde {
	border-left-color: #2e7d32;
}
.print-alert-card.verde .print-alert-icon {
	background: #e8f5e9;
	color: #2e7d32;
	animation: none;
}
.print-alert-card.verde .print-alert-title {
	color: #2e7d32;
}
@keyframes slideInCard {
	from { opacity: 0; transform: translateX(30px) scale(0.95); }
	to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pulseIcon {
	0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
	70%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}
.print-alert-card::after {
	content: '';
	position: absolute;
	right: -10px;
	bottom: 20px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #fff;
	filter: drop-shadow(2px 0 2px rgba(0,0,0,0.1));
}

/* ====== BOTÓN FLOTANTE DELIVERY ====== */
.float-delivery{
	position:fixed;
	width:60px;
	height:60px;
	bottom:250px;
	right:40px;
	background-color:#ec407a;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:28px;
	box-shadow: 2px 2px 3px #999;
	z-index:100;
}
.float-delivery:hover {
	text-decoration: none;
	color: #ec407a;
	background-color:#fff;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.float, .float-print, .float-mesas, .float-delivery, .float-web {
		right: 15px !important;
	}
	.float {
		bottom: 15px !important;
		width: 50px !important;
		height: 50px !important;
		font-size: 24px !important;
	}
	.float-print {
		bottom: 75px !important;
		width: 50px !important;
		height: 50px !important;
		font-size: 22px !important;
	}
	.float-mesas {
		bottom: 140px !important;
		width: 50px !important;
		height: 50px !important;
		font-size: 22px !important;
	}
	.float-delivery {
		bottom: 205px !important;
		width: 50px !important;
		height: 50px !important;
		font-size: 22px !important;
	}
	.float-web {
		display:flex !important;
		bottom: 270px !important;
		width: 50px !important;
		height: 50px !important;
		font-size: 22px !important;
		align-items:center;
		justify-content:center;
	}
	.float-web .my-float {
		margin-top: 0 !important;
	}
	.float-web-alert {
		bottom: 330px !important;
		right: 15px !important;
		max-width: 220px !important;
	}
	.my-float {
		margin-top: 13px !important;
	}
	.print-alert-card {
		right: 75px !important;
		bottom: 80px !important;
		min-width: 180px !important;
		padding: 10px 12px !important;
	}
	.print-alert-card::after {
		bottom: 14px !important;
	}
}