/* ---------------------------------------------------------------------------
   Fora da dobra da página de ferramenta. Carregado de forma assíncrona.
   Nada aqui pode afetar o layout do painel, senão o CLS deixa de ser zero.
   ------------------------------------------------------------------------ */

/* Relacionadas -------------------------------------------------------------- */

.relacionadas { margin-top: var(--e7); }

/* No celular, a lista de sempre: só os títulos, um por linha. Do tablet
   para cima, cada título num cartão simples (22/09/2026): borda, o nome e
   nada mais. */
.relacionadas ul {
	margin: var(--e4) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--e3) var(--e5);
}

.relacionadas a { text-decoration: none; }

@media (hover: hover) {
	.relacionadas a:hover { text-decoration: underline; }
}

@media (min-width: 601px) {
	.relacionadas ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--e4);
	}

	.relacionadas a {
		display: flex;
		align-items: center;
		height: 100%;
		min-height: 64px;
		padding: var(--e3) var(--e4);
		font-weight: 600;
		line-height: 1.35;
		background: var(--papel);
		border: 1px solid var(--linha);
		border-radius: var(--raio-painel);
	}
}

@media (min-width: 601px) and (hover: hover) {
	.relacionadas a:hover { border-color: var(--azul-link); }
}

@media (min-width: 601px) and (max-width: 900px) {
	.relacionadas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hub de categoria ---------------------------------------------------------- */

.hub { padding-block: var(--e4) var(--e8); }

/* A abertura é o texto da página, e não uma legenda: vai na tinta principal,
   de 18:1, e não no cinza secundário de 6:1. O cinza passa na norma e mesmo
   assim faz a leitura parecer apagada quando carrega o conteúdo em vez de
   acompanhá-lo. */
.hub__intro {
	margin-top: var(--e3);
	color: var(--tinta);
	text-align: justify;
	hyphens: auto;
}

/* A grade e o recuo dos itens saíram daqui para o crítico: eles definem a
   altura da lista, e chegando pelo assíncrono a lista encolhia de uma coluna
   para três com a página já na tela — CLS de 0,075 no hub, medido. O que fica
   aqui é o que não mexe em altura. */
.lista-ferramentas a {
	font-weight: 500;
	text-decoration: none;
}

.lista-ferramentas a:hover { text-decoration: underline; }

/* O TAMANHO FICA EM 0,8125rem. Esta folha é assíncrona e o parágrafo está
   preso em duas linhas por `line-clamp`: subir o corpo subiria a altura de
   cada cartão com a página já na tela, que é CLS. A cor, essa sim, muda — o
   resumo do cartão é o que a pessoa lê para escolher a ferramenta. */
.lista-ferramentas p {
	margin-top: var(--e1);
	font-size: 0.8125rem;
	color: var(--tinta);
	/* O resumo é escrito para a SERP, com 150 a 160 caracteres. No card ele
	   entra como apoio e para em duas linhas, senão cada item vira um bloco de
	   texto e a grade perde a função de varredura rápida. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Título de seção que também é link para o hub: peso de heading, não de link. */
.bloco > h2 > a {
	color: inherit;
	text-decoration: none;
}

.bloco > h2 > a:hover { text-decoration: underline; }

/* Evolução: gráfico e tabela ------------------------------------------------- */

/* As cores por série, nomeadas pela série e não por ordem: assim ligar e
   desligar na legenda não troca a cor de ninguém. Azul é o dinheiro que a
   pessoa pôs, amarelo é o que o juro somou — o mesmo amarelo do visor. */
:root {
	--grafico-total_investido: #0057CC;
	--grafico-total_juros:     #FFC400;
	--grafico-acumulado:       #14171C;
}

.grafico { margin: 0; }  /* o position:relative fica no critico, junto das reservas */

/* Botão, não rótulo: cada chave liga e desliga a própria série. */
.grafico__chave {
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	padding: var(--e1) var(--e2);
	font: inherit;
	font-size: 0.8125rem;
	color: var(--tinta);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--raio-controle);
	cursor: pointer;
}

.grafico__chave:hover { border-color: var(--linha-forte); }

.grafico__chave:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 1px;
}

/* Desligada: o quadrado esvazia e o texto risca. Só apagar a cor deixaria
   ambíguo se a série sumiu ou se é só um estilo diferente. */
.grafico__chave[aria-pressed="false"] {
	color: var(--tinta-2);
	text-decoration: line-through;
}

.grafico__chave[aria-pressed="false"] .grafico__cor {
	background: transparent !important;
	box-shadow: inset 0 0 0 1px var(--linha-forte);
}

.grafico__cor {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

.grafico__rosca svg { display: block; }

.rosca__fatia,
.grafico__barra { cursor: default; }

/* A proporção é a mesma do viewBox. Reservada aqui, e não deduzida do conteúdo,
   para a altura existir antes do SVG e a revelação da seção não deslocar nada
   do que vem depois. */
.grafico__alvo { cursor: default; }

.grafico__tela svg { display: block; }

.tabela-rolagem:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 2px;
}

/* Moldura fechada: sem a borda externa a tabela some no branco da página e as
   linhas ficam soltas. A cor é a linha forte, não a clara. */
.tabela-evolucao {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--linha-forte);
	font-size: var(--corpo-controle);
	font-variant-numeric: tabular-nums lining-nums;
}

.tabela-evolucao__legenda {
	margin-bottom: var(--e3);
	font-size: 0.8125rem;
	color: var(--tinta-2);
	text-align: left;
}

.tabela-evolucao th,
.tabela-evolucao td {
	padding: var(--e2) var(--e3);
	border: 1px solid var(--linha);
	white-space: nowrap;
	text-align: left;
	color: var(--tinta);
}

.tabela-evolucao thead th {
	font-weight: 500;
	background: var(--papel-2);
	border-color: var(--linha-forte);
}

.tabela-evolucao tbody th { font-weight: 400; }

.tabela-evolucao .numero { text-align: right; }

.tabela-evolucao tbody tr:nth-child(even) { background: var(--papel-2); }

/* A coluna do acumulado é a resposta da linha: fundo cinza contínuo, por cima
   da alternância, para o olho descer por ela sem procurar. */
.tabela-evolucao tbody td:last-child,
.tabela-evolucao thead th:last-child {
	background: var(--cinza-coluna);
}


/* Rodapé (refeito em 21/09/2026: colunas de widgets, inc/rodape.php) ------ */

.rodape {
	/* O azul do site, no degrau escuro (pedido do dono, 21/09/2026). O
	   `--azul-link` dos botões daria 4,06:1 com o amarelo dos títulos, abaixo
	   dos 4,5 da WCAG para texto pequeno; o `--azul-fundo` dá 5,8:1 com o
	   amarelo e 9,2:1 com o branco. */
	--rodape-fundo: var(--azul-fundo);
	--rodape-texto: #FFFFFF;
	--rodape-titulo: var(--amarelo);
	--rodape-linha: rgb(255 255 255 / 0.2);

	/* Um respiro curto entre o conteúdo e o azul (pedido do dono, 22/09/2026;
	   antes era zero). */
	margin-top: var(--e5);
	padding: var(--e7) 0 var(--e5);
	color: var(--rodape-texto);
	background: var(--rodape-fundo);
}

.rodape a:focus-visible {
	outline: 2px solid var(--rodape-titulo);
	outline-offset: 2px;
}

/* A primeira coluna, a da marca, é mais larga: ela tem texto corrido, e as
   outras, listas curtas. Quatro colunas no computador, duas no tablet, uma no
   celular; com menos áreas preenchidas, a grade se ajusta sozinha. */
.rodape__colunas {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: var(--e6) var(--e5);
}

/* No desktop o rodapé usa a largura da janela, e não a das páginas (1080px):
   as quatro colunas ficavam espremidas no meio de uma faixa azul que já vai
   de ponta a ponta (pedido do dono, 22/09/2026). O recuo lateral cresce com a
   tela, de 24 a 80px. */
@media (min-width: 901px) {
	.rodape > .container {
		max-width: none;
		padding-inline: clamp(24px, 5vw, 80px);
	}

	.rodape__colunas { column-gap: var(--e7); }
}

.rodape__area > .rodape__widget + .rodape__widget { margin-top: var(--e5); }

.rodape__titulo {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--rodape-titulo);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rodape ul {
	margin: var(--e3) 0 0;
	padding: 0;
	list-style: none;
}

.rodape li + li { margin-top: var(--e2); }

.rodape a {
	font-size: 0.9375rem;
	color: var(--rodape-texto);
	text-decoration: none;
}

.rodape a:hover { color: var(--rodape-texto); text-decoration: underline; }

.rodape__marca,
.rodape a.rodape__marca {
	display: inline-block;
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--rodape-texto);
	text-decoration: none;
}

.rodape__logo {
	display: block;
	width: auto;
	max-width: 220px;
	height: auto;
	max-height: 48px;
}

.rodape__resumo {
	max-width: 30rem;
	margin: var(--e3) 0 0;
	font-size: 0.9375rem;
	color: var(--rodape-texto);
}

.rodape .rodape__redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2);
	margin-top: var(--e4);
}

.rodape .rodape__redes li + li { margin-top: 0; }

.rodape__redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--rodape-texto);
	background: transparent;
	border: 1px solid rgb(255 255 255 / 0.5);
	border-radius: 50%;
}

/* No hover, o círculo se enche de amarelo e o ícone fica no azul escuro do
   rodapé, 5,8:1 sobre o amarelo (pedido do dono, 22/09/2026; o branco dava
   1,6:1). O ícone é desenhado com currentColor, então basta a cor do link. O
   foco pelo teclado ganha o mesmo destaque. */
.rodape__redes a:hover,
.rodape__redes a:focus-visible {
	color: var(--rodape-fundo);
	background: var(--rodape-titulo);
	border-color: var(--rodape-titulo);
}

.rodape__redes .icone { width: 16px; height: 16px; }

/* O aviso legal: faixa própria, centralizada, com o alerta no título. */
.rodape__aviso {
	margin-top: var(--e7);
	padding-top: var(--e5);
	border-top: 1px solid var(--rodape-linha);
	text-align: center;
}

.rodape__aviso-titulo {
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--rodape-titulo);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.rodape__aviso-titulo .icone {
	width: 16px;
	height: 16px;
	color: var(--rodape-titulo);
}

.rodape__aviso-texto {
	max-width: 52rem;
	margin: var(--e2) auto 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--rodape-texto);
}

.rodape__aviso-texto a {
	font-size: inherit;
	text-decoration: underline;
}

.rodape__final {
	margin-top: var(--e5);
	padding-top: var(--e4);
	border-top: 1px solid var(--rodape-linha);
	text-align: center;
}

.rodape__assinatura {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--rodape-texto);
}

@media (max-width: 900px) {
	.rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.rodape__area--rodape-1 { grid-column: 1 / -1; }
}

/* Duas colunas até no celular: as listas são curtas, e uma coluna só dobrava
   a altura do rodapé. Uma coluna apenas abaixo de 340px. */
@media (max-width: 480px) {
	.rodape__colunas { gap: var(--e5) var(--e4); }
}

@media (max-width: 340px) {
	.rodape__colunas { grid-template-columns: minmax(0, 1fr); }
}

/* Impressão ----------------------------------------------------------------- */

@media print {
	.cab,
	.rodape,
	.painel__acoes,
	.resultado__acoes,
	.evolucao__acoes,
	.pular { display: none; }

	/* No papel não há botão para expandir: a tabela sai inteira, e o que estava
	   escondido atrás do "ver as outras linhas" vem junto. */
	/* Precisa do !important para vencer o [hidden] global, que também o tem. */
	.tabela-evolucao [data-extra][hidden] { display: table-row !important; }

	.tabela-rolagem { overflow: visible; }

	.tabela-evolucao thead { display: table-header-group; }

	.tabela-evolucao tr { break-inside: avoid; }

	.painel { border-color: #000; }

	.visor {
		background: none;
		color: #000;
		border: 2px solid #000;
	}
}

/* ---------------------------------------------------------------------------
 * A gaveta das categorias no celular (templates/parts/header.php). <dialog>
 * preso à esquerda, na altura toda, entrando de lado.
 * ------------------------------------------------------------------------ */

.gaveta {
	inset: 0 auto 0 0;
	width: min(330px, 86vw);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	color: var(--tinta);
	background: var(--papel);
	border: 0;
	box-shadow: 0 8px 30px rgb(0 0 0 / 0.18);
}

.gaveta[open] { animation: gaveta-entra 0.2s ease-out; }

@keyframes gaveta-entra {
	from { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.gaveta[open] { animation: none; }
}

.gaveta::backdrop { background: rgb(0 0 0 / 0.45); }

.gaveta__caixa { padding: var(--e3) 0 var(--e5); }

.gaveta__fechar {
	display: inline-flex;
	margin-left: var(--e3);
}

.gaveta__titulo {
	margin: var(--e3) var(--e5) var(--e2);
	font-size: 1.125rem;
	font-weight: 600;
}

.gaveta__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gaveta__lista a {
	display: flex;
	align-items: center;
	gap: var(--e4);
	padding: var(--e3) var(--e5);
	font-size: 1rem;
	color: var(--tinta);
	text-decoration: none;
}

.gaveta,
.gaveta__lista a { -webkit-tap-highlight-color: transparent; }

/* O <dialog> recebe foco ao abrir, e alguns navegadores desenham o anel dele. */
.gaveta:focus,
.gaveta:focus-visible { outline: none; }

@media (hover: hover) {
	.gaveta__lista a:hover { background: var(--papel-2); }
}

/* As mais acessadas, abaixo das categorias: separadas por uma linha, com o
   número da posição no lugar do ícone. */
.gaveta__secao {
	margin-top: var(--e3);
	padding-top: var(--e2);
	border-top: 1px solid var(--linha);
}

.gaveta__lista--top { counter-reset: gaveta-top; }

.gaveta__lista--top li { counter-increment: gaveta-top; }

.gaveta__lista--top a::before {
	content: counter(gaveta-top);
	flex: none;
	width: 22px;
	font-weight: 600;
	text-align: center;
	color: var(--azul-link);
	font-variant-numeric: tabular-nums;
}

.gaveta__lista a[aria-current="page"] {
	font-weight: 600;
	background: var(--azul-tinta);
}

.gaveta__lista .icone {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--azul-link);
}

/* ---------------------------------------------------------------------------
 * Os modais da barra de interação: compartilhar, opinião e "O que aconteceu?"
 * (inc/interacao.php). Na folha assíncrona pela mesma razão do de formato:
 * nascem fechados e não reservam altura na primeira pintura.
 * ------------------------------------------------------------------------ */

.dialogo {
	margin: auto;
	width: min(36rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linha);
	border-radius: var(--raio-painel);
}

.dialogo::backdrop { background: rgb(0 0 0 / 0.45); }

.dialogo__caixa { padding: var(--e5); }

.dialogo__cabeca {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--e3);
	margin-bottom: var(--e4);
}

.dialogo__titulo {
	margin: 0;
	font-size: var(--corpo-destaque);
}

.dialogo__sub {
	margin: var(--e1) 0 0;
	font-size: var(--corpo-menor);
	color: var(--tinta-2);
}

.dialogo__fechar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--tinta);
	background: transparent;
	border: 0;
	border-radius: var(--raio-controle);
	cursor: pointer;
}

.dialogo__fechar:hover { background: var(--papel-2); }

.dialogo__fechar .icone { width: 22px; height: 22px; }

.dialogo__fechar:focus-visible,
.compartilhar__rede:focus-visible,
.compartilhar__copiar:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 2px;
}

.dialogo__rotulo {
	display: block;
	margin-bottom: var(--e2);
	font-weight: 500;
}

.dialogo__texto {
	display: block;
	width: 100%;
	padding: var(--e3);
	font: inherit;
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio-controle);
	resize: vertical;
}

.dialogo__texto:focus {
	outline: 2px solid var(--azul);
	outline-offset: 0;
}

.dialogo__aviso {
	margin: var(--e2) 0 0;
	font-size: var(--corpo-menor);
	color: var(--tinta-2);
}

.dialogo__erro {
	margin: var(--e3) 0 0;
	font-size: var(--corpo-menor);
	color: var(--negativo);
}

.dialogo__acoes {
	display: flex;
	justify-content: flex-end;
	gap: var(--e3);
	margin-top: var(--e4);
	padding-top: var(--e4);
	border-top: 1px solid var(--linha);
}

.dialogo__acoes .botao { flex: 0 0 auto; }

.dialogo__fim {
	margin: 0;
	padding: var(--e4) 0;
}

/* A barra de progresso das duas etapas do "O que aconteceu?". */
.dialogo__progresso {
	height: 4px;
	margin-bottom: var(--e4);
	background: var(--linha);
	border-radius: 2px;
	overflow: hidden;
}

.dialogo__progresso > span {
	display: block;
	width: 10%;
	height: 100%;
	background: var(--azul-link);
	transition: width 0.2s ease;
}

.dialogo__motivos {
	margin: 0;
	padding: 0;
	border: 0;
}

.dialogo__motivo {
	display: flex;
	align-items: center;
	gap: var(--e3);
	padding: var(--e2) 0;
	cursor: pointer;
}

.dialogo__motivo input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--azul-link);
}

/* O campo-isca: fora da tela, e não `display: none`, que alguns robôs pulam. */
.isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.compartilhar__marcar {
	display: flex;
	align-items: center;
	gap: var(--e3);
	cursor: pointer;
}

.compartilhar__marcar input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: var(--azul-link);
}

.compartilhar__marcar:has(input:disabled) {
	color: var(--tinta-2);
	cursor: default;
}

.compartilhar__nota {
	margin: var(--e2) 0 0;
	font-size: var(--corpo-menor);
	color: var(--tinta-2);
}

/* Quatro colunas iguais, e não flex com quebra: a 375px as quatro cabem na
   mesma linha, e com flex a quarta caía sozinha na de baixo. */
.compartilhar__redes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--e3);
	margin: var(--e5) 0;
	padding: 0;
	list-style: none;
}

.compartilhar__rede {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e2);
	font-size: var(--corpo-menor);
	font-weight: 600;
	color: var(--tinta);
	text-decoration: none;
}

/* Glifo branco centrado num círculo da cor da marca, como no modelo. O
   círculo é do CSS e o glifo é só a letra ou o pássaro (Font Awesome): logo
   que já é redondo ou quadrado, dentro de outro círculo, era o que ficava feio. */
.compartilhar__circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: #FFFFFF;
	border-radius: 50%;
	transition: transform 0.15s ease;
}

.compartilhar__rede:hover .compartilhar__circulo { transform: scale(1.06); }

.compartilhar__circulo .icone {
	width: 22px;
	height: 22px;
}

.compartilhar__rede--facebook .compartilhar__circulo { background: #0866FF; }
.compartilhar__rede--x .compartilhar__circulo        { background: #000000; }
.compartilhar__rede--linkedin .compartilhar__circulo { background: #0A66C2; }
.compartilhar__rede--whatsapp .compartilhar__circulo { background: #25D366; }

.compartilhar__rede--whatsapp .icone { width: 26px; height: 26px; }

.compartilhar__endereco {
	display: flex;
	align-items: center;
	gap: var(--e2);
	padding: var(--e2) var(--e2) var(--e2) var(--e3);
	background: var(--papel-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-controle);
}

.compartilhar__endereco input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	font: inherit;
	font-size: var(--corpo-menor);
	color: var(--tinta);
	background: transparent;
	border: 0;
	text-overflow: ellipsis;
}

.compartilhar__copiar {
	flex: none;
	padding: var(--e2) var(--e3);
	font: inherit;
	font-size: var(--corpo-menor);
	font-weight: 600;
	color: var(--azul-link);
	background: transparent;
	border: 0;
	border-radius: var(--raio-controle);
	cursor: pointer;
}

.compartilhar__copiar:hover { background: var(--azul-tinta); }

/* ---------------------------------------------------------------------------
 * Modal de formato de número
 *
 * Fica na folha assíncrona, e não no crítico: ele nasce fechado e não reserva
 * altura nenhuma na primeira pintura. É a mesma regra que já separa o painel
 * (crítico, reserva altura) do resto.
 * ------------------------------------------------------------------------ */

.formato {
	/* Centrado na tela, e não colado no alto.
	   O `margin: auto` do navegador deveria bastar num <dialog> aberto com
	   showModal(), e não bastava: o topo saía com 16px fixos enquanto a base
	   ficava com o resto — medido em 10/09/2026, 16px contra 440,89px numa
	   janela de 960. Declarar aqui resolve e não depende de qual folha do
	   navegador ganha. */
	margin: auto;
	width: min(24rem, calc(100vw - 2rem));
	padding: 0;
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linha);
	border-radius: var(--raio-painel);
}

.formato::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.formato__caixa {
	padding: var(--e5);
}

.formato__cabeca {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e3);
	margin-bottom: var(--e4);
}

.formato__titulo {
	margin: 0;
	font-size: var(--corpo-destaque);
}

.formato__redefinir {
	padding: var(--e2) var(--e3);
	font: inherit;
	font-size: var(--corpo-menor);
	color: var(--amarelo-tinta);
	background: var(--amarelo);
	border: 0;
	border-radius: var(--raio-controle);
	cursor: pointer;
}

/* A visualização mostra o efeito antes de aplicar. Um seletor chamado
   "Separador de milhar" com as opções "Ponto" e "Vírgula" não diz o que vai
   acontecer; "1.234.567,89" diz. */
.formato__previa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e3);
	margin: 0 0 var(--e4);
	padding: var(--e3);
	background: var(--papel-2);
	border-radius: var(--raio-controle);
}

.formato__previa-rotulo {
	font-size: var(--corpo-menor);
	color: var(--tinta-2);
}

.formato__previa-valor {
	font-variant-numeric: tabular-nums;
	font-size: var(--corpo-destaque);
}

.formato__campo {
	margin: 0 0 var(--e4);
}

.formato__campo label {
	display: block;
	margin-bottom: var(--e2);
	font-size: var(--corpo-descricao);
}

.formato__campo input,
.formato__campo select {
	width: 100%;
	height: 44px;
	padding: 0 var(--e3);
	font: inherit;
	font-size: var(--corpo-descricao);
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linha-forte);
	border-radius: var(--raio-controle);
}

.formato__acoes {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--e5);
}

/* ---------------------------------------------------------------------------
 * Aviso de "copiado"
 *
 * No rodapé da tela, centralizado, por dois segundos. Não reserva altura nem
 * empurra nada: nasce `hidden` e é `position: fixed`. Por isso fica na folha
 * assíncrona — aparecer meio segundo depois do carregamento não custa nada,
 * porque ele só existe depois de um clique.
 * ------------------------------------------------------------------------ */

.aviso-copia {
	position: fixed;
	left: 50%;
	bottom: var(--e6);
	z-index: 60;
	transform: translateX(-50%);
	max-width: min(30rem, calc(100vw - 2rem));
	padding: var(--e3) var(--e5);
	font-size: var(--corpo-descricao);
	color: var(--papel);
	background: var(--tinta);
	border-radius: var(--raio-controle);
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
	text-align: center;
}