/* ===========================================================================
   Aviso pos-clique de download -- a seta para a bolha do navegador.
   So aparece em desktop com navegador reconhecido (o JS decide); a seta
   aponta para o canto superior direito, onde Chrome, Edge, Firefox e Safari
   poem o download.
   =========================================================================== */

.c-baixarAviso[hidden] { display: none; }

.c-baixarAviso {
	position: fixed;
	inset: 0;
	z-index: 90;                /* acima de tudo, inclusive da barra (50) */
	background: rgba(6, 6, 8, 0.72);
	animation: c-baixarAviso-entra 200ms ease;
}

@keyframes c-baixarAviso-entra {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* A seta, colada no canto para onde ela aponta. */
.c-baixarAviso__seta {
	position: fixed;
	top: 14px;
	right: 96px;
	color: var(--ouro);
	animation: c-baixarAviso-acena 900ms ease-in-out infinite alternate;
}

@keyframes c-baixarAviso-acena {
	from { transform: translate(0, 6px); }
	to   { transform: translate(6px, -2px); }
}

@media (prefers-reduced-motion: reduce) {
	.c-baixarAviso { animation: none; }
	.c-baixarAviso__seta { animation: none; }
}

/* ---------------------------------------------------------------- cartao ---- */

.c-baixarAviso__cartao {
	position: fixed;
	top: 84px;
	right: 32px;
	width: min(380px, calc(100vw - 64px));
	padding: var(--e-3);
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio);
	background: var(--surface);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.c-baixarAviso__fechar {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--raio-sm);
	background: none;
	color: var(--ink-3);
	cursor: pointer;
}

.c-baixarAviso__fechar:hover { color: var(--ink); background: var(--surface-2); }

/* Um conteudo por navegador; o JS liga o certo via data-navegador na raiz. */
.c-baixarAviso__conteudo { display: none; }

.c-baixarAviso[data-navegador="chrome"]  [data-baixar-para="chrome"],
.c-baixarAviso[data-navegador="edge"]    [data-baixar-para="edge"],
.c-baixarAviso[data-navegador="firefox"] [data-baixar-para="firefox"],
.c-baixarAviso[data-navegador="safari"]  [data-baixar-para="safari"] {
	display: block;
}

.c-baixarAviso__titulo {
	margin-top: var(--e-2);
	color: var(--ink);
	font-size: 1.05rem;
	font-weight: 600;
}

.c-baixarAviso__texto {
	margin-top: var(--e-1);
	color: var(--ink-2);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------- desenho ---- */

.c-baixarAviso__desenho { width: 100%; height: auto; }

.c-baixarAviso__svgBarra    { fill: var(--surface-2); }
.c-baixarAviso__svgEndereco { fill: var(--bg-alt); }
.c-baixarAviso__svgUrl      { fill: var(--ink-3); font: 10px var(--fonte-mono); }
.c-baixarAviso__svgHalo     {
	fill: none;
	stroke: var(--ouro);
	stroke-width: 1.5;
	animation: c-baixarAviso-pulsa 1200ms ease-in-out infinite alternate;
}

@keyframes c-baixarAviso-pulsa {
	from { stroke-opacity: 0.35; }
	to   { stroke-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.c-baixarAviso__svgHalo { animation: none; }
}

.c-baixarAviso__svgIcone   { stroke: var(--ouro); stroke-width: 2; }
.c-baixarAviso__svgPonto   { fill: var(--ink-3); }
.c-baixarAviso__svgPainel  {
	fill: var(--bg-alt);
	stroke: var(--linha-forte);
	stroke-width: 1;
}
.c-baixarAviso__svgArquivo { fill: var(--ink); font: 600 11px var(--fonte); }
.c-baixarAviso__svgBotao   { fill: var(--ouro); }
.c-baixarAviso__svgAcao    { fill: #201a0d; font: 600 10px var(--fonte); }