/* ===============================================
   Header Band (Topbar dentro do header de menu)
   Isolado deste site para testes em index.html
   =============================================== */

:root {
	--hb-fg: #ffffff;
	--hb-primary: #990000;
	--hb-accent: #ffeb3b;
	--hb-accent-dark: #b38f00;
	--hb-shadow: rgba(0, 0, 0, 0.25);
	--hb-height: 56px;
}

/* Wrapper do header do site (apenas no index.html de teste) */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	background: #000000;
	color: var(--hb-fg);
}

/* Faixa superior com degradê (conteúdo de monitoramento) */
.header-band {
	display: grid;
	grid-template-columns: 1fr 3.6fr 1fr;
	align-items: center;
	gap: 12px;
	min-height: var(--hb-height);
	padding: 8px 24px;
	color: var(--hb-fg);
	font-size: 0.95rem;
	line-height: 1.2;
	background: linear-gradient(90deg, #000000 0%, #000000 55%, color-mix(in srgb, var(--hb-primary) 55%, #000000) 85%, #000000 100%);
	box-shadow: 0 2px 12px var(--hb-shadow);
	position: relative;
}

.header-band::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, #000000, transparent);
	filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
}

/* Divisor moderno opcional */
.header-band.divider-modern::after {
	height: 2px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hb-accent) 85%, transparent), transparent);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hb-accent-dark) 70%, transparent));
}

.header-band.divider-modern::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 6px;
	background: repeating-linear-gradient(90deg,
		color-mix(in srgb, var(--hb-accent-dark) 35%, transparent) 0 12px,
		transparent 12px 24px);
	opacity: 0.35;
	pointer-events: none;
}

.header-band a { color: inherit; text-decoration: none; }

.header-band__left,
.header-band__center,
.header-band__right { min-width: 0; }

.header-band__left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	white-space: nowrap;
	font-weight: 600;
	padding-left: 24px;
}

.header-band__label { color: var(--hb-primary); opacity: 0.95; }

.header-band__left::after {
	content: "»";
	display: inline-block;
	margin-left: 6px;
	color: var(--hb-accent-dark);
	opacity: 0.95;
	text-shadow: 0 0 6px color-mix(in srgb, var(--hb-accent-dark) 70%, transparent);
	font-size: 1.25rem;
	line-height: 1;
}

.header-band__ip {
	margin-left: 10px;
	opacity: 0.9;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.header-band__center {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: left;
	/* Garante que texto e botão fiquem na mesma linha */
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	/* Força alinhamento horizontal perfeito */
	height: auto;
	min-height: 0;
	/* Garante que todos os elementos fiquem na mesma linha */
	overflow: visible;
	white-space: nowrap;
}

.header-band__ticker { position: relative; overflow: hidden; white-space: nowrap; }

.header-band__ticker-inner {
	display: inline-block;
	padding-left: 0;
	animation: header-band-ticker 28s linear infinite;
}

.header-band__ticker-inner span { margin-right: 18px; opacity: 0.95; }

@keyframes header-band-ticker {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.header-band__ticker-inner { animation: none; }
}

.header-band__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 1.1rem;
	padding-right: 24px;
}

.header-band__datetime {
	letter-spacing: 0.2px;
	position: relative;
}

.header-band__datetime::before {
	content: "«";
	display: inline-block;
	margin-right: 6px;
	color: var(--hb-accent-dark);
	opacity: 0.95;
	text-shadow: 0 0 6px color-mix(in srgb, var(--hb-accent-dark) 70%, transparent);
	font-size: 1.25rem;
	line-height: 1;
}

/* Badges ONLINE/OFFLINE */
.status-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--hb-accent);
	background: transparent;
	border: 1px solid var(--hb-accent);
	position: relative;
	z-index: 10;
	box-shadow: 0 0 8px var(--hb-accent);
	text-shadow: 0 0 4px var(--hb-accent);
}

/* Badge ONLINE específico */
.status-badge.is-online {
	color: #ffff00; /* Amarelo mais vibrante */
	background: rgba(255, 255, 0, 0.15);
	border: 1px solid #ffff00;
	box-shadow: 0 0 8px rgba(255, 255, 0, 0.7);
	text-shadow: 0 0 4px rgba(255, 255, 0, 0.9);
}

/* Badge OFFLINE específico */
.status-badge.is-offline {
	color: #dc3545; /* Vermelho */
	background: rgba(220, 53, 69, 0.1);
	border: 1px solid #dc3545;
	box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
	text-shadow: 0 0 4px rgba(220, 53, 69, 0.8);
}

/* Efeito de pulso para badges ONLINE */
.status-badge.is-online {
	animation: pulse-online 2s ease-in-out infinite;
}

@keyframes pulse-online {
	0%, 100% {
		box-shadow: 0 0 8px rgba(255, 255, 0, 0.7);
	}
	50% {
		box-shadow: 0 0 12px rgba(255, 255, 0, 0.9), 0 0 20px rgba(255, 255, 0, 0.5);
	}
}

/* Efeito de piscada para badges OFFLINE */
.status-badge.is-offline {
	animation: blink-offline 1.5s ease-in-out infinite;
}

@keyframes blink-offline {
	0%, 50% {
		opacity: 1;
	}
	25%, 75% {
		opacity: 0.7;
	}
}

/* Área abaixo: barra de menu (demonstrativa no index.html) */
.header-nav { padding: 12px 24px; background: #000000; }
.header-nav .placeholder { font-weight: 600; opacity: 0.85; }

/* Mobile */
@media (max-width: 768px) {
	.header-band { grid-template-columns: 1fr auto; gap: 10px; }
	.header-band__left { display: none; }
	.header-band__center { display: none; }
	.header-band__right { justify-self: end; }
}

/* Integração com header do index.php: força layout em coluna e coloca a faixa acima do nav */
#header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: auto !important;
}

#header .header-band { width: 100%; order: 0; }
#header .container-fluid { width: 100%; order: 1; }

/* Ajuste do hero para manter o menu totalmente visível (compensa altura do header + faixa) */
#hero { margin-bottom: calc(-70px - var(--hb-height)); }
@media (max-width: 992px) {
	#hero { margin-bottom: calc(-60px - var(--hb-height)); }
}

/* =======================================================
 * 🎯 CENTRO COM TEXTO SIMPLES
 * ======================================================= */

/* Texto centralizado simples */
.center-text {
	font-size: 14px;
	font-weight: 600;
	color: #ffeb3b;
	text-align: center;
	white-space: nowrap;
	position: relative;
	z-index: 1000;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
	/* Força alinhamento horizontal */
	line-height: 1.2;
	vertical-align: baseline;
	display: inline-block;
	height: fit-content;
	margin-top: 0;
	margin-bottom: 0;
}

/* Botão de referência dos serviços Brasil - PADRÃO HIGHLIGHT-CTA */
#ref-servicos-brasil {
	margin-left: 10px;
	padding: 8px 16px !important;
	font-size: 12px !important;
	/* Usa o estilo highlight-cta existente */
	position: relative;
	z-index: 1001;
	/* Ajustes para alinhamento perfeito na mesma linha */
	line-height: 1.2;
	vertical-align: baseline;
	/* Garante que fique na mesma linha */
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	/* Força alinhamento horizontal */
	height: fit-content;
	margin-top: 0;
	margin-bottom: 0;
}

/* Botão de referência dos serviços United States - PADRÃO HIGHLIGHT-CTA */
#ref-united-states {
	margin-left: 10px;
	padding: 8px 16px !important;
	font-size: 12px !important;
	/* Usa o estilo highlight-cta existente */
	position: relative;
	z-index: 1001;
	/* Ajustes para alinhamento perfeito na mesma linha */
	line-height: 1.2;
	vertical-align: baseline;
	/* Garante que fique na mesma linha */
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	/* Força alinhamento horizontal */
	height: fit-content;
	margin-top: 0;
	margin-bottom: 0;
}

/* Botão de referência dos serviços SOC 24/5 - PADRÃO HIGHLIGHT-CTA */
#ref-soc-24-5 {
	margin-left: 10px;
	padding: 8px 16px !important;
	font-size: 12px !important;
	/* Usa o estilo highlight-cta existente */
	position: relative;
	z-index: 1001;
	/* Ajustes para alinhamento perfeito na mesma linha */
	line-height: 1.2;
	vertical-align: baseline;
	/* Garante que fique na mesma linha */
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	/* Força alinhamento horizontal */
	height: fit-content;
	margin-top: 0;
	margin-bottom: 0;
}

/* Botão de referência dos serviços SUPORTE - PADRÃO HIGHLIGHT-CTA */
#ref-suporte {
	margin-left: 10px;
	padding: 8px 16px !important;
	font-size: 12px !important;
	/* Usa o estilo highlight-cta existente */
	position: relative;
	z-index: 1001;
	/* Ajustes para alinhamento perfeito na mesma linha */
	line-height: 1.2;
	vertical-align: baseline;
	/* Garante que fique na mesma linha */
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	/* Força alinhamento horizontal */
	height: fit-content;
	margin-top: 0;
	margin-bottom: 0;
}

/* Status da API dentro do botão */
#status-brasil-api {
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* Status da API United States dentro do botão */
#status-us-api {
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* Status da API SOC 24/5 dentro do botão */
#status-soc-api {
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* Status da API SUPORTE dentro do botão */
#status-sup-api {
	font-weight: 600;
	letter-spacing: 0.5px;
}

@media (max-width: 768px) {
	.header-band {
		grid-template-columns: 1fr auto;
		gap: 10px;
	}
	.header-band__left { display: none; }
	.header-band__center { display: none; }
	.header-band__right { justify-self: end; }
}