/**
 * telaov3 — bloco inferior (ticker) sobre o fundo do body (estilo.css).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--font-body: "Be Vietnam Pro", sans-serif;
	--ticker-h: clamp(44px, 6vh, 62px);
	--card-gap: clamp(0.5rem, 1.2vw, 1rem);
	--side-pad: clamp(0.75rem, 2vw, 1.5rem);
}

.ov3-shell {
	width: 100%;
	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* ══════════════════════════════════════════════════════════
   Header — Figma nodes 692:791 · 692:796 · 692:814 · 692:907 · 692:908
   Ocupa o espaço que era o ov3-spacer (flex: 1 1 0).
   ══════════════════════════════════════════════════════════ */
.ov3-header {
	/* Substitui o antigo ov3-spacer */
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(0.35rem, 0.9vh, 0.7rem);
	padding: clamp(0.6rem, 1.5vh, 1.1rem) var(--side-pad)
		clamp(0.4rem, 0.8vh, 0.6rem);
	position: relative;
}

/* ── Pills row: Ao Vivo + Date alinhados às bordas ── */
.ov3-header__top-row {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-shrink: 0;
	position: relative;
}

/* Ao Vivo (692:791) — imagem pronta */
.ov3-header__aovivo-pill {
	display: block;
	height: auto;
	align-self: stretch;
	width: auto;
	object-fit: contain;
}

/* Data (692:814) — pill dinâmica */
.ov3-header__date-pill {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.45rem, 0.9vw, 0.85rem);
	background: rgba(77, 77, 77, 0.22);
	border-radius: 112px;
	padding: clamp(0.5rem, 1vh, 1rem) clamp(1rem, 1.6vw, 1.6rem);
	white-space: nowrap;
	flex-shrink: 0;
}

.ov3-header__date-main,
.ov3-header__date-year {
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: clamp(12px, 1.24vw, 24px);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1;
}

/* Separador vertical fino entre data e ano */
.ov3-header__date-sep {
	display: inline-block;
	width: 1px;
	height: clamp(12px, 1.6vh, 22px);
	background: rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}

/* ── QR Code promo (742:1211) ── */
.ov3-header__qrcode-card {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 0px;

	width: 140px;
	padding: 15px;
	border: px solid #333;
	border-radius: 16px;
	background: rgba(77, 77, 77, 0.22);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	z-index: 3;
}

.ov3-header__qrcode-title {
	margin: 0;
	width: 100%;
	font-family: "Special Gothic Condensed One";

	color: #ccc;
	text-align: center;
	font-size: 26px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	text-transform: uppercase;
}

.ov3-header__qrcode-sub {
	margin: 0;
	width: 100%;
	font-family: "Bahnschrift", "Be Vietnam Pro", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.1;
	color: rgba(255, 255, 255, 0.7);
	text-align: left;
	margin-top: 5px;
}

.ov3-header__qrcode-image-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	overflow: hidden;
	margin-top: 10px;
	background-color: #fff;
}

.ov3-header__qrcode-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 3px;
}

/* ── Logo NOC BETA (692:796) ── */
.ov3-header__logo-row {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-30px);
}

.ov3-header__logo {
	display: block;
	height: clamp(32px, 3.8vh, 52px);
	width: auto;
	object-fit: contain;
}

/* ── Tagline (692:907 + 692:908) ── */
.ov3-header__tagline-row {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.182rem, 0.484vh, 0.424rem);
	text-align: center;
	margin-top: clamp(0.35rem, 0.9vh, 0.7rem);
	transform: translateY(-30px);
}

.ov3-header__tagline {
	margin: 0;
	font-family: "Special Gothic Condensed One", sans-serif;
	font-size: clamp(22px, 3.1vw, 60px);
	font-weight: 400;
	color: #aeaeae;
	text-align: center;
	line-height: 1.07;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.ov3-header__tagline-hl {
	color: #4ebc2a;
}

.ov3-header__sub {
	margin: 0;
	font-family: "Bahnschrift", "Be Vietnam Pro", sans-serif;
	font-size: clamp(12px, 1.46vw, 28px);
	font-weight: 300;
	color: #aeaeae;
	text-align: center;
	white-space: nowrap;
	line-height: 1.2;
}

/* ── Palco: 3 cards — altura ≈ 64 vh (70 % − ticker) ── */
.ov3-palco {
	flex: none;
	height: clamp(200px, 58vh, 800px);
	display: flex;
	gap: var(--card-gap);
	padding: 0 var(--side-pad) var(--card-gap);
}

.ov3-card {
	background: #000;
	border: 0.98px solid #333;
	border-radius: clamp(18px, 2vw, 30px);
	overflow: hidden;
	position: relative;
	min-width: 0;
}

.ov3-card--a {
	flex: 438;
	--ov3-inner-gap: clamp(15px, 1.75vw, 18px);
}
.ov3-card--b {
	flex: 440;
}
.ov3-card--c {
	flex: 867;
}

/**
 * Cards com sub-boxes internos (coluna):
 *   cada .ov3-subbox com flex: 1 1 0 divide a altura em partes iguais (2 ou 4, etc.)
 */
.ov3-card--split {
	--ov3-inner-pad: clamp(5px, 0.85vw, 8px);
	--ov3-inner-gap: clamp(4px, 0.65vw, 7px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
	padding: var(--ov3-inner-pad);
	gap: var(--ov3-inner-gap);
	overflow: hidden;
}

/* Estilo base compartilhado pelos sub-boxes internos */
.ov3-subbox {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	position: relative;
	background: rgba(51, 51, 51, 0.2);
}

/**
 * Sub-box SUPERIOR — Figma 692:518
 *   radius: 20.339px · sem glow
 */
.ov3-subbox--top {
	border-radius: 20.339px;
}

/**
 * Sub-box INFERIOR — Figma 692:407
 *   radius: 19.554px · glow radial no canto inferior-esquerdo
 */
.ov3-subbox--bot {
	border-radius: 19.554px;
}

.ov3-subbox--bot::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		ellipse 70% 65% at 0% 100%,
		rgba(210, 210, 210, 0.14) 0%,
		rgba(160, 160, 160, 0.05) 45%,
		transparent 70%
	);
	pointer-events: none;
}

/**
 * Terceiro card: grade 2×2 (2 em cima, 2 em baixo).
 * Mesmos --ov3-inner-pad / --ov3-inner-gap que .ov3-card--split (margens proporcionais).
 */
.ov3-card--split-2x2 {
	--ov3-inner-pad: clamp(5px, 0.85vw, 8px);
	--ov3-inner-gap: clamp(4px, 0.65vw, 7px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
	padding: var(--ov3-inner-pad);
	gap: var(--ov3-inner-gap);
	overflow: hidden;
}

.ov3-split-row {
	display: flex;
	flex-direction: row;
	flex: 1 1 0;
	align-items: stretch;
	min-height: 0;
	min-width: 0;
	gap: var(--ov3-inner-gap);
}

.ov3-card--split-2x2 .ov3-subbox {
	flex: 1 1 0;
	min-width: 0;
}

/* ── Bottom: ticker — mesmo padding lateral dos cards ── */
.ov3-bottom {
	flex-shrink: 0;
	padding: 0 var(--side-pad) clamp(0.5rem, 1.5vh, 1rem);
}

.ov3-ticker {
	background: rgba(51, 51, 51, 0.2);
	border-radius: 42px;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
	height: var(--ticker-h);
	min-height: var(--ticker-h);
}

.noc-weather-ticker__track {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

.noc-weather-ticker__inner {
	display: inline-flex;
	white-space: nowrap;
	animation: noc-ticker-scroll 70s linear infinite;
	will-change: transform;
}

.noc-weather-ticker__segment {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: clamp(12px, 1.3vw, 18px);
	font-weight: 300;
	color: #b3b3b3;
	line-height: 1;
	padding: 0 !important;
}

.noc-weather-ticker__segment b {
	color: #ffffff;
	font-weight: 400;
}

@keyframes noc-ticker-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.noc-ticker__sep {
	display: inline-block;
	width: 1px;
	height: 36px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(255, 255, 255, 0.18) 25%,
		rgba(255, 255, 255, 0.28) 50%,
		rgba(255, 255, 255, 0.18) 75%,
		transparent 100%
	);
	vertical-align: middle;
	margin: 0 2rem;
	flex-shrink: 0;
}

.noc-ticker__dot {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	vertical-align: middle;
	margin-right: 0.45em;
	display: inline-block;
}

/* ── Alerta meteorológico (card A, sub-box superior) ──
   Mesmo layout visual telaov2, compactado para metade da coluna A. */
.ov3-card--a .ov3-subbox--top {
	--noc-header-top: clamp(0.2rem, 0.4vw, 0.38rem);
	--noc-header-band-height: clamp(1.3rem, 2.2vh, 1.8rem);
	--noc-gap-pill-to-content: calc(clamp(0.12rem, 0.3vh, 0.28rem) + 10px);
	--noc-content-inset-top: calc(
		var(--noc-header-top) + var(--noc-header-band-height) +
			var(--noc-gap-pill-to-content)
	);
}

.ov3-card--a .ov3-subbox--top > .noc-stage__card {
	width: 100%;
	height: 100%;
	min-height: 0;
	border-radius: inherit;
	background: rgba(51, 51, 51, 0.2);
	border: none;
}

.ov3-card--a .ov3-subbox--top .noc-stage__card-pill-icon {
	width: 30px !important;
	height: 30px !important;
}

.ov3-card--a .ov3-subbox--top .noc-stage__card-pill-text {
	font-size: clamp(10px, 1.1vh, 13px) !important;
}

.ov3-card--a .ov3-subbox--top .noc-stage__card-title {
	font-size: clamp(12px, 1.4vh, 16px) !important;
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: #cccccc !important;
}

.ov3-card--a .ov3-subbox--top .noc-stage__card-header {
	left: clamp(0.35rem, 0.7vw, 0.55rem);
	right: clamp(0.35rem, 0.7vw, 0.55rem);
}

.ov3-card--a .ov3-subbox--top .noc-stage__alert-content {
	left: clamp(0.3rem, 0.55vw, 0.5rem);
	right: clamp(0.3rem, 0.55vw, 0.5rem);
	bottom: clamp(0.2rem, 0.45vh, 0.4rem);
	grid-template-columns: clamp(88px, 33%, 143px) minmax(0, 1fr);
	gap: 15px;
}

.ov3-card--a
	.ov3-subbox--top
	.noc-stage__card--first
	.noc-stage__alert-flag-image {
	bottom: clamp(-22px, -2.5vh, -12px);
	height: clamp(72%, 12vh, 88%);
}

.ov3-card--a .ov3-subbox--top .noc-stage__alert-flag-base {
	height: clamp(14px, 2.2vh, 26px);
	min-height: 12px;
}

.ov3-card--a .ov3-subbox--top .noc-stage__alert-panel {
	gap: calc(clamp(1px, 0.35vh, 4px) + 10px);
	padding: clamp(2px, 0.35vh, 4px) clamp(3px, 0.45vw, 5px)
		clamp(3px, 0.45vh, 6px);
}

.ov3-card--a .ov3-subbox--top .noc-stage__alert-banner {
	padding: clamp(3px, 0.55vh, 8px) clamp(5px, 0.75vw, 10px);
	gap: clamp(4px, 0.6vh, 10px);
}

.ov3-card--a .ov3-subbox--top .noc-stage__alert-banner-title {
	font-size: clamp(11px, 1.1vw, 15px) !important;
	line-height: 1.15;
}

.ov3-card--a
	.ov3-subbox--top
	.noc-stage__card--first.is-yellow
	.noc-stage__alert-banner,
.ov3-card--a
	.ov3-subbox--top
	.noc-stage__card--first.is-orange
	.noc-stage__alert-banner,
.ov3-card--a
	.ov3-subbox--top
	.noc-stage__card--first.is-red
	.noc-stage__alert-banner {
	min-height: clamp(26px, 3.8vh, 42px);
}

.ov3-card--a
	.ov3-subbox--top
	.noc-stage__card--first.is-yellow
	.noc-stage__alert-description,
.ov3-card--a
	.ov3-subbox--top
	.noc-stage__card--first.is-orange
	.noc-stage__alert-description,
.ov3-card--a
	.ov3-subbox--top
	.noc-stage__card--first.is-red
	.noc-stage__alert-description {
	min-height: 0;
}

.ov3-card--a .ov3-subbox--top .noc-stage__alert-description {
	font-size: clamp(10px, 1vw, 13px) !important;
	line-height: 1.2;
	padding: clamp(3px, 0.45vh, 6px) clamp(5px, 0.55vw, 9px);
}

.ov3-card--a .ov3-subbox--top .noc-stage__alert-validity {
	font-size: clamp(9px, 0.85vw, 11px) !important;
	height: auto;
	min-height: 0;
	line-height: 1.2;
}

.ov3-card--a .ov3-subbox--top .noc-alert-carousel-btn {
	width: 18px;
	height: 18px;
	font-size: 0.85rem;
}

.ov3-card--a .ov3-subbox--top .noc-alert-time {
	font-size: clamp(0.45rem, 0.65vw, 0.55rem);
	text-align: left !important;
	padding-right: 0 !important;
}

/* ── Temperatura / timeline (card A, sub-box inferior) — mesmo componente telaov2 ── */
.ov3-card--a .ov3-subbox--bot {
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.ov3-card--a .ov3-subbox--bot > .noc-stage__card--bottom-strip {
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	border: none;
	overflow: hidden;
}

/*
 * Fundo transparente: o subbox já tem background semi-transparente próprio.
 * A imagem fundo_temp.svg herdada do stage.css (relativa ao telaov2/css/) continua
 * a funcionar porque stage.css é servido a partir do seu próprio diretório.
 * Escala visual (como #v2StripCard): reduz o layout para caber na metade inferior.
 */
#ov3TempStripCard {
	background-color: transparent !important;
	zoom: 0.56;
}

@media (min-width: 1400px) {
	#ov3TempStripCard {
		zoom: 0.62;
	}
}

/* ── Fluxo de Trânsito (card B, sub-box superior) ── */
.ov3-card--b .ov3-subbox--top {
	--noc-header-top: clamp(0.2rem, 0.4vw, 0.38rem);
	--noc-header-band-height: clamp(1.3rem, 2.2vh, 1.8rem);
	--noc-gap-pill-to-content: clamp(0.15rem, 0.35vh, 0.3rem);
	--noc-content-inset-top: calc(
		var(--noc-header-top) + var(--noc-header-band-height) +
			var(--noc-gap-pill-to-content)
	);
}

.ov3-card--b .ov3-subbox--top > .noc-stage__card {
	width: 100%;
	height: 100%;
	min-height: 0;
	border-radius: inherit;
	background: rgba(51, 51, 51, 0.2);
	border: none;
}

.ov3-card--b .ov3-subbox--top .noc-stage__card-pill-icon {
	width: 30px !important;
	height: 30px !important;
}

.ov3-card--b .ov3-subbox--top .noc-stage__card-pill-text {
	font-size: clamp(10px, 1.1vh, 13px) !important;
}

.ov3-card--b .ov3-subbox--top .noc-stage__card-title {
	font-size: clamp(12px, 1.4vh, 16px) !important;
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: #cccccc !important;
}

.ov3-card--b .ov3-subbox--top .noc-stage__card-header {
	left: clamp(0.35rem, 0.7vw, 0.55rem);
	right: clamp(0.35rem, 0.7vw, 0.55rem);
}

/* ── Fluxo de Trânsito: fontes das rotas = noc-lencol__month (Fevereiro) ── */
.ov3-card--b .ov3-subbox--top .noc-stage__alert-banner-label {
	font-family: Bahnschrift, "Be Vietnam Pro", sans-serif !important;
	font-size: clamp(11px, 1.15vh, 14px) !important;
	font-weight: 400 !important;
	color: #808080 !important;
}

.ov3-card--b .ov3-subbox--top .noc-stage__alert-banner-time {
	font-family: Bahnschrift, "Be Vietnam Pro", sans-serif !important;
	font-size: clamp(11px, 1.15vh, 14px) !important;
	font-weight: 400 !important;
}

.ov3-card--b .ov3-subbox--top .noc-stage__alert-banner--status {
	min-height: 0;
	padding: clamp(3px, 0.4vh, 6px) clamp(6px, 0.7vw, 10px);
}

/* ── Widget overrides: noc-v3-quad-block inside ov3-subbox ── */

/* Inherit the header/content spacing variables from noc-stage context */
.ov3-card--c .ov3-subbox {
	--noc-header-top: clamp(0.2rem, 0.4vw, 0.38rem);
	--noc-header-band-height: clamp(1.3rem, 2.2vh, 1.8rem);
	--noc-gap-pill-to-content: clamp(0.15rem, 0.35vh, 0.3rem);
	--noc-content-inset-top: calc(
		var(--noc-header-top) + var(--noc-header-band-height) +
			var(--noc-gap-pill-to-content)
	);
	--hyd-ok: #2aa6bc;
	--hyd-ok-soft: rgba(42, 166, 188, 0.45);
	--hyd-warn: #f28c3f;
	--hyd-warn-soft: rgba(242, 140, 63, 0.22);
	--hyd-danger: #e53935;
	--hyd-danger-soft: rgba(229, 57, 53, 0.25);
}

/* Make the quad-block fill its ov3-subbox parent completely */
.ov3-card--c .ov3-subbox > .noc-v3-quad-block {
	width: 100%;
	height: 100%;
	border-radius: 0;
	border: none;
}

/* Compact pill icon size for the tighter sub-boxes */
.ov3-card--c .noc-stage__card-pill-icon {
	width: 28px !important;
	height: 28px !important;
}

/* Compact pill text size */
.ov3-card--c .noc-stage__card-pill-text {
	font-size: clamp(10px, 1.1vh, 13px) !important;
}

/* Card title — matches noc-aereo title: plain text, no badge */
.ov3-card--c .noc-stage__card-title {
	font-size: clamp(11px, 1.25vh, 14px) !important;
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: #cccccc !important;
	white-space: normal;
	line-height: 1.2;
}

/* Header compact for sub-boxes */
.ov3-card--c .noc-stage__card-header {
	left: clamp(0.35rem, 0.7vw, 0.55rem);
	right: clamp(0.35rem, 0.7vw, 0.55rem);
}

/* Guaíba compact status label */
.ov3-card--c .noc-guaiba__status-label {
	font-size: clamp(14px, 1.4vw, 20px) !important;
}

/* Lencol row compact */
.ov3-card--c .noc-lencol__rows {
	gap: clamp(0.03rem, 0.12vh, 0.07rem) !important;
}
.ov3-card--c .noc-lencol__row {
	padding-top: clamp(0.04rem, 0.15vh, 0.1rem) !important;
	padding-bottom: clamp(0.04rem, 0.15vh, 0.1rem) !important;
}
.ov3-card--c .noc-lencol__gauge-svg {
	width: clamp(22px, 5vw, 30px) !important;
}

/* ══════════════════════════════════════════════════════════
   Trânsito Aéreo (card B, sub-box inferior)
   Figma nodes: 692:820 … 692:1096
   ══════════════════════════════════════════════════════════ */

.noc-aereo {
	--aereo-font: "Bahnschrift", "Segoe UI", sans-serif;
	--aereo-title-size: clamp(13px, 1.55vh, 17.655px);
	--aereo-pill-size: clamp(12px, 1.5vh, 17.434px);
	--aereo-label-size: clamp(10px, 1.2vh, 13px);
	--aereo-head-size: clamp(10px, 1.2vh, 13px);
	--aereo-row-size: 13.411px;
	--aereo-row-radius: 11.495px;
	--aereo-row-bg: rgba(77, 77, 77, 0.2);
	--aereo-color-text: #aeaeae;
	--aereo-color-head: #666666;
	--aereo-color-title: #cccccc;
	--aereo-color-pill-text: #787878;
	--aereo-color-pill-bg: #1f1f1f;
	--aereo-status-orange: #ff8b2c;
	--aereo-status-yellow: #f4d627;
	--aereo-status-green: #4ebc2a;
	--aereo-status-red: #ff1744;
	--aereo-col-gap: clamp(8px, 0.9vw, 14px);
	--aereo-table-pad-x: clamp(12px, 1.4vw, 22px);
	--aereo-grid-cols: minmax(0, 0.9fr) minmax(0, 1.12fr) minmax(0, 1.08fr)
		minmax(0, 0.84fr) minmax(0, 1.96fr);

	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	font-family: var(--aereo-font);
	font-style: normal;
	font-weight: 400;
	overflow: hidden;
	/* More padding on top (title area) than bottom so rows reach the edge */
	padding: clamp(8px, 1.2vh, 16px) clamp(12px, 1.5vw, 22px)
		clamp(4px, 0.6vh, 8px);
	position: relative;
	z-index: 1;
}

/* ── Header: title + Fraport pill ── */

.noc-aereo__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	/* Gap below header consumed by body flex — no margin needed */
	padding-bottom: clamp(3px, 0.5vh, 7px);
}

.noc-aereo__title {
	font-size: var(--aereo-title-size);
	color: var(--aereo-color-title);
	line-height: 1;
	white-space: nowrap;
}

.noc-aereo__pill {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--aereo-color-pill-bg);
	border-radius: 36.32px;
	padding: clamp(4px, 0.5vh, 8px) 14px;
	flex-shrink: 0;
}

.noc-aereo__pill-dot {
	width: 9.63px;
	height: 9.63px;
	flex-shrink: 0;
}

.noc-aereo__pill-text {
	font-family: var(--aereo-font);
	font-size: var(--aereo-pill-size);
	color: var(--aereo-color-pill-text);
	line-height: 1;
	white-space: nowrap;
}

/* ── Body: two equal sections — fills ALL remaining height ── */

.noc-aereo__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	/* Inter-section gap */
	gap: clamp(10px, 1.8vh, 28px);
	overflow: hidden;
}

/* ── Section: PARTIDAS / CHEGADAS — each takes half the body ── */

.noc-aereo__section {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden; /* closes the flex chain */
	gap: clamp(3px, 0.6vh, 9px); /* uniform spacing between all children */
}

/* No margin on children — section gap handles all vertical spacing */
.noc-aereo__section-label-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.noc-aereo__section-label {
	font-size: var(--aereo-label-size);
	color: var(--aereo-color-text);
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
}

.noc-aereo__section-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(
		to right,
		rgba(174, 174, 174, 0.5) 0%,
		rgba(174, 174, 174, 0.08) 100%
	);
}

/* ── Table header (CIA VOO DEST. HORA STATUS) ── */

.noc-aereo__table-head {
	display: grid;
	grid-template-columns: var(--aereo-grid-cols);
	column-gap: var(--aereo-col-gap);
	align-items: center;
	font-size: var(--aereo-head-size);
	color: var(--aereo-color-head);
	line-height: 1;
	padding-left: var(--aereo-table-pad-x);
	padding-right: var(--aereo-table-pad-x);
	flex-shrink: 0;
}

/* ── Data rows container — takes all space below the header ── */

.noc-aereo__rows {
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 1vh, 14px);
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}

/* ── Individual flight row — grows equally to fill rows container ── */

.noc-aereo__row {
	display: grid;
	grid-template-columns: var(--aereo-grid-cols);
	column-gap: var(--aereo-col-gap);
	align-items: center;
	flex: 1 1 0;
	min-height: 0;
	background: var(--aereo-row-bg);
	border-radius: var(--aereo-row-radius);
	padding-left: var(--aereo-table-pad-x);
	padding-right: var(--aereo-table-pad-x);
	font-size: var(--aereo-row-size);
	color: var(--aereo-color-text);
	line-height: normal;
	overflow: hidden;
}

/* ── Columns: percentage-based — fill full row width ── */

.noc-aereo__col {
	min-width: 0;
	font-size: 13.411px;
	color: #aeaeae;
	font-family: Bahnschrift, "Segoe UI", sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.noc-aereo__col--cia {
	grid-column: 1;
}
.noc-aereo__col--voo {
	grid-column: 2;
}
.noc-aereo__col--dest {
	grid-column: 3;
}
.noc-aereo__col--hora {
	grid-column: 4;
}
.noc-aereo__col--status {
	grid-column: 5;
}

.noc-aereo__gate {
	opacity: 0.72;
	font-size: 0.9em;
}

/* ── Status color variants ── */

.noc-aereo__status--orange {
	color: var(--aereo-status-orange);
}
.noc-aereo__status--yellow {
	color: var(--aereo-status-yellow);
}
.noc-aereo__status--green {
	color: var(--aereo-status-green);
}
.noc-aereo__status--red {
	color: var(--aereo-status-red);
}

@media (max-width: 1600px) {
	.noc-aereo {
		--aereo-col-gap: clamp(6px, 0.75vw, 10px);
		--aereo-table-pad-x: clamp(10px, 1.2vw, 16px);
		--aereo-grid-cols: minmax(0, 0.88fr) minmax(0, 1.06fr) minmax(0, 1fr)
			minmax(0, 0.8fr) minmax(0, 1.76fr);
	}
}

@media (max-width: 1366px) {
	.noc-aereo {
		--aereo-col-gap: 6px;
		--aereo-table-pad-x: 10px;
		--aereo-grid-cols: minmax(0, 0.82fr) minmax(0, 1fr) minmax(0, 0.94fr)
			minmax(0, 0.74fr) minmax(0, 1.62fr);
		--aereo-row-size: 12.2px;
		--aereo-head-size: 11.2px;
	}
}