/**
 * Sistema de Alertas de Cliente - Estilos CSS
 * 
 * Cores por nível:
 * - Nível 1 (Simples): Azul #5bc0de
 * - Nível 2 (Médio): Amarelo #f0ad4e  
 * - Nível 3 (Alto): Laranja #e67e22
 * - Nível 4 (Crítico): Vermelho #d9534f
 */

/* =========================================
   BASE: Ícone de alerta sem background
   ========================================= */
.alerta-badge-icon {
	display: inline-block;
	margin-left: 4px;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.alerta-badge-icon:hover {
	transform: scale(1.2);
}

/* =========================================
   ANIMAÇÕES: Blink para diferentes níveis
   ========================================= */

/* Animação base de blink */
@keyframes alertaBlink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.4;
	}
}

/* Animação de shake (mais agressiva) */
@keyframes alertaShake {
	0%,
	100% {
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-2px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(2px);
	}
}

/* Animação de pulse (destaque suave) */
@keyframes alertaPulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.9;
	}
}

/* Nível 2: Blink lento (2.5s) - Sem vibração */
.alerta-blink-lento {
	animation: alertaBlink 2.5s ease-in-out infinite;
}

/* Nível 3: Blink médio (1.5s) - Com leve pulse */
.alerta-blink-medio {
	animation: alertaBlink 1.5s ease-in-out infinite,
		alertaPulse 3s ease-in-out infinite;
}

/* Nível 4: Blink rápido (0.8s) - Intenso */
.alerta-blink-rapido {
	animation: alertaBlink 0.8s ease-in-out infinite,
		alertaPulse 1.5s ease-in-out infinite;
}

/* Alternativa: Shake extremo para nível 4 */
.alerta-shake {
	animation: alertaShake 0.5s ease-in-out infinite;
}

/* =========================================
   POPOVERS: Estilização do conteúdo
   ========================================= */
.popover-alerta {
	font-family: 'Segoe UI', Tahoma, sans-serif;
}

.popover-alerta table {
	border-collapse: collapse;
}

.popover-alerta table td {
	padding: 4px 0;
}

.popover-alerta table td i {
	margin-right: 6px;
	width: 14px;
	text-align: center;
}

/* =========================================
   BADGES: Estilos legado (com background)
   ========================================= */
.alerta-badge {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 3px;
	margin-left: 4px;
	cursor: pointer;
	font-size: 11px;
}

.alerta-badge.nivel-1 {
	background: #5bc0de;
	color: #fff;
}

.alerta-badge.nivel-2 {
	background: #f0ad4e;
	color: #fff;
}

.alerta-badge.nivel-3 {
	background: #e67e22;
	color: #fff;
}

.alerta-badge.nivel-4 {
	background: #d9534f;
	color: #fff;
}

/* Vibrações para badges com background */
.vibrar-suave {
	animation: alertaBlink 2.5s ease-in-out 1;
}

.vibrar-media {
	animation: alertaBlink 1.5s ease-in-out 2;
}

.vibrar-intensa {
	animation: alertaPulse 1s infinite;
}

/* =========================================
   RESPONSIVIDADE: Ajustes para mobile
   ========================================= */
@media (max-width: 768px) {
	.alerta-badge-icon {
		margin-left: 2px;
	}

	.alerta-badge-icon i {
		font-size: 12px;
	}
}