/*
 * Painel de Tráfego · Zufall
 * Direção: painel de sinalização. Uma faixa escura (a "fascia") com a contagem em semáforo, cartões claros
 * de triagem embaixo. Uma família só, Archivo, trabalhando na largura: números condensados (62–70%),
 * rótulos expandidos (125%) em caixa-alta. Acento índigo só para interação; vermelho/âmbar/verde só para
 * situação, sempre com texto.
 */

:root {
	color-scheme: light dark;
	--bg: #e3e6ea;
	--sup: #f8f9fa;
	--sup-2: #eef0f3;
	--tinta: #12151b;
	--tinta-2: #4b5263;
	--linha: #d0d5dc;
	--linha-forte: #848c99; /* borda de campo: 3,2:1 sobre --sup (WCAG 1.4.11) */
	--acento: #3a2fd0;
	--acento-tinta: #ffffff;
	--acento-suave: #e6e4fb;

	--fascia: #15181e;
	--fascia-2: #1f232b;
	--fascia-linha: #2e333d;
	--fascia-tinta: #f1f2f4;
	--fascia-tinta-2: #a6adbb;
	--fascia-acento: #aca6ff;

	/* situação: ponto (lâmpada), texto e fundo — texto ≥ 4,5:1 sobre o próprio fundo */
	--ruim: #d1301f; --ruim-tinta: #a3200f; --ruim-fundo: #fbe3df;
	--mediano: #e39a00; --mediano-tinta: #7a4900; --mediano-fundo: #fcefd0;
	--bom: #1f9d55; --bom-tinta: #0c5e31; --bom-fundo: #dcf1e4;
	--parado: #7a8294; --parado-tinta: #3e4555; --parado-fundo: #e2e5ea;
	--neutro: #9aa1af; --neutro-tinta: #4b5263; --neutro-fundo: #eaecef;
	--futuro: #6d63e8; --futuro-tinta: #3a2fd0; --futuro-fundo: #e6e4fb;
	--erro: #c2185b; --erro-tinta: #8e1149; --erro-fundo: #f8e0ea;

	/* lâmpadas sobre a fascia escura */
	--lamp-ruim: #ff6a55;
	--lamp-mediano: #ffb73a;
	--lamp-bom: #3ccf7e;
	--lamp-parado: #8c94a6;
	--lamp-neutro: #626a7b;
	--lamp-futuro: #aca6ff;
	--lamp-erro: #ff6fa8;

	--barra: #838b98; /* 3,3:1 sobre --sup */
	--raio: 12px;
	--raio-p: 8px;
	--largura: 1280px;
	--calha: 16px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0d0f13;
		--sup: #161920;
		--sup-2: #1d2129;
		--tinta: #eceef2;
		--tinta-2: #a0a7b6;
		--linha: #2a2f39;
		--linha-forte: #646c7d; /* 3,3:1 sobre --sup */
		--acento: #aca6ff;
		--acento-tinta: #15123f;
		--acento-suave: #24214a;

		--fascia: #1a1e26;
		--fascia-2: #232832;
		--fascia-linha: #333946;

		--ruim-tinta: #ff9b8e; --ruim-fundo: #3a1612;
		--mediano-tinta: #ffcb6b; --mediano-fundo: #36280a;
		--bom-tinta: #71dda0; --bom-fundo: #0f2e1d;
		--parado-tinta: #b8bfcc; --parado-fundo: #262b34;
		--neutro-tinta: #a0a7b6; --neutro-fundo: #20242c;
		--futuro-tinta: #c3beff; --futuro-fundo: #25224a;
		--erro-tinta: #ff9cc5; --erro-fundo: #3a1426;
		--ruim: #ff6a55; --mediano: #ffb73a; --bom: #3ccf7e; --parado: #8c94a6; --neutro: #626a7b; --futuro: #aca6ff; --erro: #ff6fa8;

		--barra: #6b7385; /* 3,7:1 sobre --sup */
	}
}

@media (min-width: 720px) {
	:root { --calha: 24px; }
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--tinta);
	font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	font-stretch: 100%;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
img { max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: var(--acento); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.fascia :focus-visible, .login :focus-visible, .caixa :focus-visible { outline-color: var(--fascia-acento); }

.sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.sem-js { padding: 24px var(--calha); }

.abertura { min-height: 100vh; background: var(--fascia); }

/* Rótulo: expandido, caixa-alta, pequeno — é a "voz de placa" do painel. */
.rotulo {
	font-size: 10.5px;
	font-stretch: 125%;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tinta-2);
}

/* ─── Botões ───────────────────────────────────────────────────────────────── */

.btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: none;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.btn[aria-disabled='true'], .btn:disabled { cursor: progress; opacity: .75; }
.btn-fascia { color: var(--fascia-tinta); border-color: var(--fascia-linha); }
.btn-fascia:hover { background: var(--fascia-2); }
.btn-primario { background: var(--fascia-acento); color: #15123f; }
.btn-primario:hover { filter: brightness(1.06); }
.btn-linha { background: var(--sup); color: var(--tinta); border-color: var(--linha-forte); }
.btn-linha:hover { border-color: var(--tinta-2); }
.btn-largo { width: 100%; min-height: 48px; font-size: 15px; }
.btn-icone { display: inline-block; font-size: 16px; line-height: 1; }
.girando .btn-icone { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.btn-texto {
	appearance: none;
	border: 0;
	background: none;
	padding: 4px 2px;
	color: var(--acento);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.campo {
	width: 100%;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--linha-forte);
	border-radius: 10px;
	background: var(--sup);
	color: var(--tinta);
	font-size: 16px; /* 16px evita o zoom automático do iOS */
}
.campo::placeholder { color: var(--tinta-2); opacity: 1; }

/* ─── Fascia (faixa escura do topo) ────────────────────────────────────────── */

.fascia {
	background: var(--fascia);
	color: var(--fascia-tinta);
	border-bottom: 1px solid var(--fascia-linha);
}
.fascia-in {
	max-width: var(--largura);
	margin: 0 auto;
	padding: 12px var(--calha) 18px;
}
.fascia-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
}
.acoes { display: flex; gap: 6px; }

.marca {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fascia-tinta-2);
}
.sinal { flex: none; }
.sinal-caixa { fill: #0b0d11; stroke: var(--fascia-linha); }
.sinal-r { fill: var(--lamp-ruim); }
.sinal-a { fill: var(--lamp-mediano); }
.sinal-v { fill: var(--lamp-bom); }

.titulo {
	margin-top: 14px;
	font-size: clamp(34px, 9vw, 56px);
	font-stretch: 64%;
	font-weight: 750;
	line-height: .95;
	letter-spacing: -.005em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
/* recebe foco só por programa (tabindex=-1) na troca de tela, para o leitor de tela anunciar */
.titulo:focus, .titulo:focus-visible { outline: none; }

.carimbo {
	margin-top: 8px;
	font-size: 13px;
	color: var(--fascia-tinta-2);
	font-variant-numeric: tabular-nums;
}
.demo {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border: 1px dashed var(--fascia-tinta-2);
	border-radius: 999px;
	font-size: 11px;
}

/* A faixa-semáforo */
.faixa { margin-top: 18px; }
.faixa-barra {
	display: flex;
	gap: 2px;
	height: 8px;
	margin-bottom: 10px;
}
.seg {
	flex: var(--n) 1 0;
	min-width: 4px;
	border-radius: 2px;
	background: var(--lamp);
}
.seg:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.seg:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.faixa-chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}
@media (min-width: 720px) {
	.faixa-filtros { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
	.faixa-chips { grid-template-columns: repeat(4, minmax(118px, auto)); }
}
.faixa-demais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (min-width: 720px) { .faixa-demais { margin-top: 0; } }

.chip {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
	min-height: 44px;
	padding: 8px 10px 9px;
	border: 1px solid var(--fascia-linha);
	border-radius: 10px;
	background: var(--fascia-2);
	color: var(--fascia-tinta);
	text-align: left;
	cursor: pointer;
}
.chip:hover { border-color: var(--fascia-tinta-2); }
.chip[aria-pressed='true'] {
	border-color: var(--fascia-acento);
	box-shadow: inset 0 0 0 1px var(--fascia-acento);
	background: #25234a;
}
.chip-n {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 36px;
	font-stretch: 62%;
	font-weight: 700;
	line-height: .95;
	font-variant-numeric: tabular-nums;
}
.chip-rotulo {
	font-size: 10px;
	font-stretch: 125%;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fascia-tinta-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
@media (max-width: 419px) {
	.chip { padding-inline: 8px; }
	.chip-rotulo { font-stretch: 108%; letter-spacing: .03em; }
}
.chip .lampada { width: 9px; height: 9px; background: var(--lamp); box-shadow: 0 0 10px var(--lamp); }
.chip[data-zero] .lampada { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lamp-neutro); }
.chip[data-zero] .chip-n { color: var(--fascia-tinta-2); }
.chip-p { flex-direction: row; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; }
.chip-p .chip-n { font-size: 22px; }

/* ─── Tons (situação e status) ─────────────────────────────────────────────── */

.tom-ruim { --lamp: var(--lamp-ruim); --ponto: var(--ruim); --t: var(--ruim-tinta); --f: var(--ruim-fundo); }
.tom-mediano { --lamp: var(--lamp-mediano); --ponto: var(--mediano); --t: var(--mediano-tinta); --f: var(--mediano-fundo); }
.tom-bom { --lamp: var(--lamp-bom); --ponto: var(--bom); --t: var(--bom-tinta); --f: var(--bom-fundo); }
.tom-parado { --lamp: var(--lamp-parado); --ponto: var(--parado); --t: var(--parado-tinta); --f: var(--parado-fundo); }
.tom-neutro { --lamp: var(--lamp-neutro); --ponto: var(--neutro); --t: var(--neutro-tinta); --f: var(--neutro-fundo); }
.tom-futuro { --lamp: var(--lamp-futuro); --ponto: var(--futuro); --t: var(--futuro-tinta); --f: var(--futuro-fundo); }
.tom-erro { --lamp: var(--lamp-erro); --ponto: var(--erro); --t: var(--erro-tinta); --f: var(--erro-fundo); }

.lampada {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ponto);
}

.selo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 3px 9px 3px 8px;
	border-radius: 999px;
	background: var(--f);
	color: var(--t);
	font-size: 11px;
	font-stretch: 112%;
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.selo-status { padding-left: 9px; }

/* ─── Página ───────────────────────────────────────────────────────────────── */

.pagina {
	max-width: var(--largura);
	margin: 0 auto;
	padding: 16px var(--calha) 56px;
}

.status-geral:empty { display: none; }

.ferramentas {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 4px;
}
@media (min-width: 720px) {
	.ferramentas { flex-direction: row; align-items: center; gap: 16px; }
	.campo-busca { max-width: 340px; }
}
.contagem {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--tinta-2);
	font-variant-numeric: tabular-nums;
}

/* ─── Grade de clientes ────────────────────────────────────────────────────── */

.grade-clientes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: 12px;
	align-items: start;
}

.grupo {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--linha);
	font-size: 11.5px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta);
}
.grupo-n {
	margin-left: auto;
	font-size: 20px;
	font-stretch: 62%;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--tinta-2);
}

.cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 14px 16px 16px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--sup);
	transition: border-color .15s;
}
.cartao:hover { border-color: var(--linha-forte); }
.cartao-topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.cartao-nome {
	min-width: 0;
	font-size: 15px;
	font-stretch: 112%;
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: .01em;
	overflow-wrap: anywhere;
}
.cartao-nome a { color: inherit; text-decoration: none; }
.cartao:hover .cartao-nome a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* o link do nome cobre o cartão inteiro; botões de miniatura ficam por cima */
.esticado::after { content: ''; position: absolute; inset: 0; border-radius: var(--raio); }
.esticado:focus-visible { outline: none; }
.esticado:focus-visible::after { outline: 2px solid var(--acento); outline-offset: 2px; }

.cartao-msg { font-size: 14px; color: var(--tinta-2); }
.cartao-msg.tom-erro { color: var(--t); }
.cartao-futuro .cartao-msg { font-size: 22px; font-stretch: 70%; font-weight: 650; color: var(--tinta); }
.cartao-alerta { font-size: 12.5px; color: var(--erro-tinta); }

.custo-linha {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin-top: 3px;
}
.custo-valor {
	font-size: 38px;
	font-stretch: 64%;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.custo-sem { font-size: 26px; color: var(--tinta-2); }
.custo-janela { font-size: 13px; color: var(--tinta-2); }
.custo-base {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: 4px;
	font-size: 13px;
	color: var(--tinta-2);
	font-variant-numeric: tabular-nums;
}
.moeda-simbolo { font-size: .5em; font-stretch: 100%; font-weight: 600; margin-right: .08em; }
.delta {
	padding: 1px 7px;
	border-radius: 6px;
	background: var(--f);
	color: var(--t);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.curtos {
	display: grid;
	gap: 4px;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}
.curtos > div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; }
.curtos dt {
	font-size: 10.5px;
	font-stretch: 125%;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tinta-2);
}

.verba-barra {
	position: relative;
	height: 10px;
	border: 1px solid var(--linha);
	border-radius: 5px;
	background: var(--sup-2);
}
.verba-gasto {
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--gasto) * 100%);
	border-radius: 4px;
	background: var(--tinta-2);
}
.verba-barra.acima .verba-gasto { background: var(--mediano); }
.verba-barra.cheia .verba-gasto { background: var(--ruim); }
.verba-ideal {
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: calc(var(--ideal) * 100%);
	width: 2px;
	margin-left: -1px;
	border-radius: 1px;
	background: var(--acento);
}
.verba-texto {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 10px;
	margin-top: 7px;
	font-size: 12.5px;
	color: var(--tinta-2);
	font-variant-numeric: tabular-nums;
}
.verba-ritmo { display: inline-flex; align-items: center; gap: 5px; }
.marca-ideal { display: inline-block; width: 2px; height: 11px; border-radius: 1px; background: var(--acento); }

/* ─── Recomendações ────────────────────────────────────────────────────────── */

.recs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.recs-cartao { padding-top: 12px; border-top: 1px solid var(--linha); }
.rec { display: flex; align-items: flex-start; gap: 10px; }
.rec-texto { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.rec-seta {
	flex: none;
	width: 48px;
	text-align: center;
	color: var(--acento);
	font-weight: 700;
}
.recs-cartao .rec-seta { width: 18px; text-align: left; }
.mini-criativo {
	position: relative;
	z-index: 1;
	flex: none;
	width: 48px;
	aspect-ratio: 4 / 5;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: 6px;
	background: var(--sup-2);
	cursor: zoom-in;
}
.mini-criativo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini-criativo:hover { border-color: var(--acento); }
.recs-grande .mini-criativo { width: 64px; }
.recs-grande .rec-seta { width: 64px; }
.recs-grande .rec-texto { font-size: 14.5px; padding-top: 2px; }
.painel-recs {
	padding: 14px 16px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--sup);
}

/* ─── Tela do cliente ──────────────────────────────────────────────────────── */

.voltar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding-right: 8px;
	color: var(--fascia-tinta);
	font-weight: 600;
	text-decoration: none;
}
.voltar:hover { text-decoration: underline; text-underline-offset: 3px; }

.titulo-linha {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 10px;
}
.titulo-linha .titulo { margin-top: 0; }
.titulo-cliente { font-size: clamp(32px, 8vw, 52px); }

.periodos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	margin-top: 16px;
	padding: 4px;
	border: 1px solid var(--fascia-linha);
	border-radius: 11px;
	background: var(--fascia-2);
}
@media (min-width: 640px) {
	.periodos { display: inline-grid; grid-template-columns: repeat(6, auto); }
}
.periodo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 8px;
	color: var(--fascia-tinta-2);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.periodo:hover { color: var(--fascia-tinta); background: var(--fascia); }
.periodo[aria-current] { background: var(--fascia-tinta); color: var(--fascia); }

.corpo-cliente > .banner:first-child { margin-top: 0; }

.banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--t) 30%, transparent);
	border-radius: 10px;
	background: var(--f);
	color: var(--t);
	font-size: 14px;
}
.banner-icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--t);
	color: var(--f);
	font-size: 13px;
	font-weight: 800;
}

.numeros {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--linha);
}
@media (min-width: 760px) {
	.numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.numero { min-width: 0; padding: 12px 14px 14px; background: var(--sup); }
/* 7 células: a última cobre o buraco (col. 1–2 na grade de 2, col. 3–4 na de 4) */
.numero:last-child:nth-child(odd) { grid-column: span 2; }
.numero-valor {
	margin-top: 4px;
	font-size: 32px;
	font-stretch: 64%;
	font-weight: 700;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.numero-unid { font-size: 13px; font-stretch: 100%; font-weight: 500; color: var(--tinta-2); }
.numero-sub { margin-top: 3px; font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

.secao { margin-top: 28px; }
.secao-numeros { margin-top: 0; }
.secao-topo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 10px;
}
.secao-topo h2 {
	font-size: 12px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.secao-nota { font-size: 12.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* gráfico */
.grafico {
	padding: 14px 14px 8px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--sup);
}
.grafico-area { position: relative; }
.grafico-svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; border-radius: 6px; cursor: crosshair; }
.grafico-svg:focus-visible { outline-offset: 6px; }
.g-titulo { fill: var(--tinta-2); font-size: 10px; font-stretch: 125%; font-weight: 600; letter-spacing: .08em; }
.g-texto { fill: var(--tinta-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.g-grade { stroke: var(--linha); stroke-width: 1; }
.g-base { stroke: var(--linha-forte); stroke-width: 1; }
.g-barra { fill: var(--barra); }
.g-barra.ativa { fill: var(--acento); }
.g-linha { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-ponto { fill: var(--tinta); stroke: var(--sup); stroke-width: 2; }
.g-ponto-ativo { fill: var(--acento); stroke: var(--sup); stroke-width: 2.5; }
.g-cursor { stroke: var(--tinta-2); stroke-width: 1; stroke-dasharray: 3 3; }

.grafico-dica {
	position: absolute;
	top: 0;
	left: var(--x, 0);
	z-index: 2;
	display: grid;
	gap: 2px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--tinta);
	color: var(--sup);
	font-size: 12.5px;
	line-height: 1.35;
	white-space: nowrap;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}
.grafico-dica strong { font-stretch: 112%; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.grafico-dica span { display: flex; align-items: center; gap: 6px; }
.leg-barra, .leg-linha { display: inline-block; flex: none; width: 10px; }
.leg-barra { height: 10px; border-radius: 2px; background: var(--barra); }
.leg-linha { height: 2px; background: var(--sup); }

/* campanhas: tabela no desktop, lista de cartões no celular */
.alternar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	min-height: 36px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.alternar input { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }

/* relative: recorta o caption.sr e o span.sr do cabeçalho (absolute), que antes vazavam e rolavam a página */
.tabela-caixa {
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--sup);
}
.tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}
.tabela th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--linha);
	background: var(--sup-2);
	font-size: 10px;
	font-stretch: 125%;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tinta-2);
	text-align: left;
	white-space: nowrap;
}
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela tr.sel td { background: var(--acento-suave); }
.tabela tbody tr:hover td { background: var(--sup-2); }
.tabela tr.sel:hover td { background: var(--acento-suave); }
.c-link { text-align: right; white-space: nowrap; }

.camp-btn {
	appearance: none;
	display: flex;
	flex-direction: column;
	gap: 1px;
	width: 100%;
	min-height: 40px;
	padding: 2px 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}
.camp-nome { font-weight: 650; overflow-wrap: anywhere; }
.camp-btn:hover .camp-nome { text-decoration: underline; text-underline-offset: 3px; }
.camp-btn[aria-pressed='true'] .camp-nome { color: var(--acento); }
.camp-btn[aria-pressed='true'] .camp-nome::before { content: '● '; }
.camp-obj { font-size: 12px; color: var(--tinta-2); }

.link-ext {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--acento);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.link-ext:hover { text-decoration: underline; text-underline-offset: 3px; }

/* a tabela precisa de ~940–965px; abaixo de 1080px vira lista de cartões (iPad em pé e deitado incluídos) */
@media (max-width: 1079px) {
	.tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tabela, .tabela tbody { display: block; }
	.tabela tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 12px;
		padding: 12px 14px 14px;
		border-bottom: 1px solid var(--linha);
	}
	.tabela tbody tr:last-child { border-bottom: 0; }
	.tabela td { display: block; padding: 0; border: 0; background: none !important; }
	.tabela tr.sel { background: var(--acento-suave); }
	.tabela .n { text-align: left; white-space: normal; }
	.tabela td.c-status { order: -3; align-self: center; }
	.tabela td.c-link { order: -2; align-self: center; }
	.tabela td.c-nome { order: -1; grid-column: 1 / -1; }
	.tabela td[data-rotulo]::before {
		content: attr(data-rotulo);
		display: block;
		font-size: 10px;
		font-stretch: 125%;
		font-weight: 600;
		letter-spacing: .07em;
		text-transform: uppercase;
		color: var(--tinta-2);
	}
}

/* anúncios */
.filtro-camp {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--acento);
	border-radius: 999px;
	background: var(--acento-suave);
	color: var(--tinta);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.filtro-camp-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: 12px;
}
@media (max-width: 479px) {
	.ads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.ad {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--sup);
}
.ad-midia { position: relative; aspect-ratio: 4 / 5; background: var(--sup-2); }
.ad-ampliar { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ad-ampliar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-ampliar:focus-visible { outline-offset: -3px; }
.ad-sem-imagem {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16px;
	background: repeating-linear-gradient(135deg, var(--sup-2) 0 10px, var(--sup) 10px 20px);
	color: var(--tinta-2);
	font-size: 12px;
	font-stretch: 112%;
	text-align: center;
}
.ad-selo { position: absolute; top: 8px; left: 8px; box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.ad-corpo { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 10px 12px 10px; }
.ad-nome {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1.3;
	overflow-wrap: anywhere;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ad-conjunto { overflow: hidden; font-size: 12px; color: var(--tinta-2); text-overflow: ellipsis; white-space: nowrap; }
/* ficha técnica: rótulo à esquerda, valor à direita, uma linha por número */
.ad-numeros { display: grid; margin-top: 2px; }
.ad-numeros > div {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 8px;
	padding: 3px 0;
	border-top: 1px solid var(--linha);
}
.ad-numeros dt { font-size: 9.5px; font-stretch: 100%; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.ad-numeros dd { margin-left: auto; font-size: 15px; font-stretch: 76%; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ad .link-ext { margin-top: auto; }

/* estados */
.vazio, .falha {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 28px 16px;
	border: 1px dashed var(--linha-forte);
	border-radius: var(--raio);
	color: var(--tinta-2);
	font-size: 14px;
	text-align: center;
}
.grade-clientes > .vazio, .grade-clientes > .falha { grid-column: 1 / -1; margin-top: 12px; }
.falha { border-style: solid; border-color: var(--erro); color: var(--tinta); }

.esq {
	border-radius: 6px;
	background: linear-gradient(90deg, var(--sup-2) 0, var(--linha) 50%, var(--sup-2) 100%);
	background-size: 200% 100%;
	animation: brilho 1.4s ease-in-out infinite;
}
.fascia .esq { background-image: linear-gradient(90deg, var(--fascia-2) 0, var(--fascia-linha) 50%, var(--fascia-2) 100%); }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.esq-faixa { height: 70px; border-radius: 10px; }
.cartao-esq { gap: 10px; margin-top: 18px; }
.esq-l1 { width: 55%; height: 16px; }
.esq-l2 { width: 40%; height: 34px; }
.esq-l3 { width: 80%; height: 12px; }
.esq-l4 { width: 100%; height: 10px; }
.esq-l5 { width: 90%; height: 12px; }
.numero .esq-l1 { width: 50%; height: 10px; }
.numero .esq-l2 { width: 70%; height: 28px; margin-top: 8px; }
.esq-grafico { height: 260px; margin-top: 28px; border-radius: var(--raio); }
.esq-tabela { height: 180px; margin-top: 28px; border-radius: var(--raio); }

/* ─── Login ────────────────────────────────────────────────────────────────── */

.login {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px var(--calha);
	background: var(--fascia);
	color: var(--fascia-tinta);
}
.login-caixa { width: min(100%, 380px); }
.login-sub { margin-top: 8px; color: var(--fascia-tinta-2); font-size: 14px; }
.login-form { display: grid; gap: 8px; margin-top: 28px; }
.login-form .rotulo { color: var(--fascia-tinta-2); }
.login .campo { background: var(--fascia-2); border-color: #737b8d; /* 3,5:1 ou mais sobre a fascia */ color: var(--fascia-tinta); }
.login .campo:focus-visible { border-color: var(--fascia-acento); }
.login-erro { min-height: 20px; color: var(--lamp-ruim); font-size: 13.5px; }
.login-erro:empty { min-height: 4px; }
.login .falha { margin-top: 24px; color: var(--fascia-tinta); border-color: var(--lamp-erro); }

/* ─── Criativo ampliado ────────────────────────────────────────────────────── */

.caixa {
	max-width: min(92vw, 520px);
	max-height: 94vh;
	padding: 0;
	overflow: auto; /* celular deitado: a legenda rola em vez de sumir; o fechar é fixed */
	border: 0;
	background: transparent;
	color: #eceef2;
}
.caixa::backdrop { background: rgb(8 10 14 / .86); }
.caixa-corpo { padding: 10px 10px 14px; border: 1px solid #333946; border-radius: 16px; background: #15181e; }
.caixa-corpo img {
	display: block;
	max-width: 100%;
	max-height: 76vh;
	margin: 0 auto;
	border-radius: 10px;
	background: #1d2129;
	object-fit: contain;
}
@media (max-height: 520px) { .caixa-corpo img { max-height: 55vh; } }
.caixa-sem {
	display: grid;
	place-items: center;
	width: min(80vw, 360px);
	aspect-ratio: 4 / 5;
	max-height: 55vh;
	margin: 0 auto;
	border-radius: 10px;
	background: repeating-linear-gradient(135deg, #1d2129 0 10px, #15181e 10px 20px);
	color: #c3c8d2;
	font-size: 13px;
}
.caixa-corpo figcaption { display: grid; gap: 4px; margin-top: 12px; padding: 0 4px; font-size: 14px; line-height: 1.4; }
.caixa-titulo { font-stretch: 112%; font-weight: 700; }
.caixa-legenda { color: #c3c8d2; }
.caixa-fechar {
	position: fixed;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid #434a58;
	border-radius: 50%;
	background: #1a1e26;
	color: #eceef2;
	font-size: 18px;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Troca do token da Meta (dialog sobre a caixa escura do criativo ampliado) */
.token-form { display: grid; gap: 10px; padding: 18px; min-width: min(86vw, 420px); }
.token-form label { font-size: .85rem; font-weight: 600; }
.token-form .campo { width: 100%; background: #1d2129; color: #eceef2; border-color: #737b8d; }
.token-form .campo:focus-visible { border-color: var(--fascia-acento); }
.token-msg { min-height: 1.4em; margin: 0; font-size: .9rem; }