/*
 * Metron — os componentes.
 *
 * Quarto arquivo da cascata. As peças que mais de uma tela usa, agrupadas por
 * assunto e em ordem de importância: a lista e a linha primeiro, porque são o
 * app inteiro.
 *
 * Antes este arquivo tinha 1515 linhas e crescia por acréscimo — cada fase
 * anexava uma seção no rodapé. O resultado é que `.mtr-lista` e `.mtr-item`,
 * os componentes mais fundamentais do app, moravam na linha 1047, depois do
 * onboarding e do campo de arquivo; `.mtr-folha` estava declarada em dois
 * pedaços a 380 linhas de distância; e `.mtr-grafico` em três lugares com
 * alturas que se contradiziam.
 */

/* ── Listas e itens ──────────────────────────────────────────────────────── */

/* Vieram do app.css. São componente, não tela: as quatro telas e quase toda
   folha desenham com eles. */

/* A lista é PAUTA, não caixa: dois fios fechando o bloco e um fio entre
   linha e linha. É o que um livro-caixa faz, e tira do app o aninhamento de
   superfícies que fazia a Hoje empilhar cinco fundos diferentes. */
.mtr-lista {
	border-top: 1px solid var(--mtr-pauta-forte);
	border-bottom: 1px solid var(--mtr-pauta-forte);
}

/* Sem recuo lateral: o conteúdo da linha alinha com a margem da página, e o
   valor cai numa coluna à direita que é a mesma em todas as listas. É essa
   coluna que deixa somar de cabeça sem somar. */
.mtr-item {
	display: flex;
	align-items: center;
	gap: var(--mtr-e-3);
	width: 100%;
	min-height: var(--mtr-toque);
	padding: var(--mtr-e-3) 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--mtr-pauta);
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color var(--mtr-rapido) var(--mtr-curva);
}

.mtr-item:first-child {
	border-top: 0;
}

/* O toque responde. Antes não respondia: a linha de lista é o alvo mais
   tocado do app e não tinha `:active` nem `:hover`, e o `-webkit-tap-
   highlight-color: transparent` do body tinha tirado o realce nativo. O dedo
   batia e nada acontecia até a folha subir. */
.mtr-item:active {
	background: var(--mtr-papel-fundo);
}

@media (hover: hover) {
	.mtr-item:hover {
		background: var(--mtr-papel-fundo);
	}
}

/* Conta que não entra no caixa (investimento, vale): esmaecida, porque o
   dinheiro existe mas não paga a luz de amanhã sem resgate. */
.mtr-item--apagado .mtr-item__titulo,
.mtr-item--apagado .mtr-item__valor {
	color: var(--mtr-tinta-2);
}

/* Linha que não é botão. Eram oito `style="cursor:default"` desfazendo à mão
   o `cursor: pointer` que a classe traz. */
.mtr-item--estatico {
	cursor: default;
}

.mtr-item--estatico:active,
.mtr-item--estatico:hover {
	background: none;
}

/* ── As quatro variantes de linha ────────────────────────────────────────── */

/* `.mtr-item` era UMA forma para tudo: 100 chamadas desenhando conta
   bancária, lançamento, previsão, linha de resumo e item de menu com a mesma
   geometria — título 15px, meta 13px, valor 17px médio, fio de 1px. Com uma
   forma só, toda tela lê como a mesma tela, e a seção "Ajustes" da Hoje (cinco
   linhas que só abrem folhas) saía idêntica à lista de contas logo acima, que
   é dinheiro.
   
   A regra: a GEOMETRIA diz de que tipo a linha é antes de ela ser lida. */

/* 1. Transação — um fato de dinheiro. É o padrão e não precisa de classe;
      existe nomeada para o espécime poder mostrá-la ao lado das outras. */
.mtr-item--transacao {
	padding: var(--mtr-e-3) 0;
}

/* 2. Navegação — leva a algum lugar, não carrega valor. Mais apertada e com o
      ícone sem caixa: um menu não tem o peso de um livro-caixa. */
.mtr-item--navegacao {
	padding: var(--mtr-e-2) 0;
}

.mtr-item--navegacao .mtr-item__icone {
	width: var(--mtr-icone);
	height: var(--mtr-icone);
	background: none;
	border-radius: 0;
	color: var(--mtr-tinta-3);
}

/* 3. Resumo — rótulo e número. O rótulo recua para a tinta de apoio porque
      quem responde é o número; sem isso os dois empatam e a linha não tem
      assunto. */
.mtr-item--resumo .mtr-item__titulo {
	color: var(--mtr-tinta-2);
}

.mtr-item--resumo .mtr-item__valor {
	font-size: var(--mtr-t-medio);
}

/* 4. Destaque — a linha que é, ela própria, a resposta do bloco. O número sobe
      para o degrau de 22px, que existe exatamente para isto: ser o herói de um
      bloco sem competir com o título da tela. */
.mtr-item--destaque {
	padding: var(--mtr-e-4) 0;
}

.mtr-item--destaque .mtr-item__titulo {
	color: var(--mtr-tinta-2);
}

.mtr-item--destaque .mtr-item__valor {
	font-family: var(--mtr-fonte-titulo);
	font-size: var(--mtr-t-numero);
	font-weight: var(--mtr-peso-medio);
	line-height: var(--mtr-lh-apertada);
	letter-spacing: var(--mtr-ls-titulo);
	font-variant-numeric: tabular-nums;
}

.mtr-item__ponto {
	width: 10px;
	height: 10px;
	border-radius: var(--mtr-raio-cheio);
	flex: none;
	background: var(--mtr-pauta-forte);
}

.mtr-item__corpo {
	flex: 1;
	min-width: 0;
}

.mtr-item__titulo {
	display: block;
	font-size: var(--mtr-t-base);
	line-height: var(--mtr-lh-titulo);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mtr-item__meta {
	display: block;
	font-size: var(--mtr-t-mini);
	line-height: var(--mtr-lh-titulo);
	color: var(--mtr-tinta-3);
}

.mtr-item__valor {
	font-weight: var(--mtr-peso-medio);
	flex: none;
}

/* Previsto é visualmente distinto de realizado: contorno em vez de preenchido.
   O usuário precisa saber, de relance, o que é fato e o que é expectativa. */
.mtr-item--previsto .mtr-item__ponto {
	background: transparent;
	border: 2px solid var(--mtr-pauta-forte);
}

.mtr-item--previsto .mtr-item__valor {
	color: var(--mtr-tinta-2);
}


/* ── Item previsto ───────────────────────────────────────────────────────── */

/* Previsto tem contorno em vez de preenchido: a pessoa precisa distinguir
   fato de expectativa num relance, sem ler. */
.mtr-item--previsto .mtr-item__titulo {
	color: var(--mtr-tinta-2);
}


/* ── Linha de rótulo e valor ─────────────────────────────────────────────── */

/* "Nome à esquerda, número à direita" aparecia quatro vezes como
   `style="display:flex;justify-content:space-between;gap:…"`. */
.mtr-categoria__linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mtr-e-3);
}


/* ── Remover um item de lista ────────────────────────────────────────────── */

/* Usava `.mtr-folha__fechar` — o MESMO ✕ redondo que fecha a folha. Numa tela
   de recorrências havia quatro ✕ idênticos: um fechava a folha e três
   apagavam um registro. Agora apagar tem a forma de apagar. */
.mtr-item__remover {
	width: var(--mtr-toque);
	height: var(--mtr-toque);
	display: grid;
	place-items: center;
	flex: none;
	border: 0;
	border-radius: var(--mtr-raio-cheio);
	background: transparent;
	color: var(--mtr-tinta-3);
	cursor: pointer;
	touch-action: manipulation;
	transition: color var(--mtr-rapido) var(--mtr-curva);
}

.mtr-item__remover:active {
	color: var(--mtr-saida);
	background: var(--mtr-papel-fundo);
}

@media (hover: hover) {
	.mtr-item__remover:hover {
		color: var(--mtr-saida);
	}
}


/* ── Linha de ajuste ─────────────────────────────────────────────────────── */

/* Ícone à esquerda, seta à direita: a mesma gramática do resto das listas do
   app. Substituiu uma grade de botões cinza na Hoje. */
.mtr-item__icone {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: var(--mtr-raio-1);
	background: var(--mtr-papel-fundo);
	color: var(--mtr-tinta-2);
}

.mtr-item__seta {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--mtr-tinta-3);
}

.mtr-item__seta .mtr-icone {
	width: var(--mtr-icone-mini);
	height: var(--mtr-icone-mini);
}

/* ── Botão dentro de linha ───────────────────────────────────────────────── */

/* O "Confirmar" da pendência, o "Pagar" da fatura, o "Desfazer" do lote e o
   "Copiar link" do convite eram quatro cópias do mesmo
   `style="min-height:34px;font-size:…;flex:none"` — 34px, dez abaixo do piso
   de toque que o botão declara. */
.mtr-botao--mini {
	min-height: var(--mtr-toque-mini);
	padding: 0 var(--mtr-e-3);
	font-size: var(--mtr-t-mini);
	flex: none;
}


/* ── Selo ────────────────────────────────────────────────────────────────── */

/* "2/12" ao lado do valor. Saiu da cadeia de metadados, onde era o terceiro
   de cinco fatos unidos por ponto médio e ninguém lia. */
.mtr-selo {
	display: inline-block;
	margin-left: var(--mtr-e-2);
	padding: 1px var(--mtr-e-1);
	border: 1px solid var(--mtr-pauta-forte);
	border-radius: var(--mtr-raio-1);
	font-size: var(--mtr-t-micro);
	font-weight: var(--mtr-peso-normal);
	color: var(--mtr-tinta-3);
	vertical-align: 1px;
}


/* ── Cartão ──────────────────────────────────────────────────────────────── */

/* Cartão agora é EXCEÇÃO: só onde a coisa é mesmo um objeto à parte — o
   gráfico e o alarme. Antes era o contêiner padrão, e a Hoje chegava a
   empilhar cinco superfícies aninhadas em três níveis.

   Sem sombra: nesta paleta a profundidade vem do fio. Sombra ficou para as
   três peças que de fato flutuam sobre o conteúdo (FAB, folha, toast). */
.mtr-cartao {
	background: var(--mtr-papel-alto);
	border: 1px solid var(--mtr-pauta);
	border-radius: var(--mtr-raio-3);
	padding: var(--mtr-e-4);
}

.mtr-cartao + .mtr-cartao {
	margin-top: var(--mtr-e-3);
}


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

.mtr-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mtr-e-2);
	/* O piso de toque, em token. Havia sete alturas diferentes para esta
	   mesma intenção, e cinco delas abaixo do que este comentário defendia. */
	min-height: var(--mtr-toque);
	padding: 0 var(--mtr-e-4);
	border: 1px solid transparent;
	border-radius: var(--mtr-raio-2);
	background: var(--mtr-papel-fundo);
	color: var(--mtr-tinta);
	font-size: var(--mtr-t-base);
	font-weight: var(--mtr-peso-medio);
	cursor: pointer;
	user-select: none;
	/* Sem o atraso de 300ms do clique no celular. */
	touch-action: manipulation;
	transition: transform var(--mtr-rapido) var(--mtr-curva),
		background-color var(--mtr-rapido) var(--mtr-curva);
}

.mtr-botao:active {
	transform: scale(0.97);
}

/* Hover só onde existe mouse. No celular, :hover fica grudado depois do
   toque e o botão parece travado. */
@media (hover: hover) {
	.mtr-botao:hover {
		background: var(--mtr-pauta);
	}
}

.mtr-botao--principal {
	background: var(--mtr-destaque);
	color: var(--mtr-destaque-texto);
}

@media (hover: hover) {
	.mtr-botao--principal:hover {
		filter: brightness(1.08);
		background: var(--mtr-destaque);
	}
}

.mtr-botao--largo {
	width: 100%;
}

/* O `:hover` do bloco dá fundo sólido, que é exatamente o que este
   modificador existe para evitar — `--principal` já tinha precisado do mesmo
   conserto. */
.mtr-botao--fantasma {
	background: transparent;
	color: var(--mtr-tinta-2);
}

@media (hover: hover) {
	.mtr-botao--fantasma:hover {
		background: transparent;
		color: var(--mtr-tinta);
	}
}



/* O único botão vermelho do app, e o único destrutivo sem desfazer. */
.mtr-botao--perigo {
	color: var(--mtr-saida);
	margin-top: var(--mtr-e-3);
}

/* ── Campos ──────────────────────────────────────────────────────────────── */

.mtr-campo {
	display: block;
	margin-bottom: var(--mtr-e-3);
}

.mtr-campo__rotulo {
	display: block;
	font-size: var(--mtr-t-mini);
	font-weight: var(--mtr-peso-medio);
	color: var(--mtr-tinta-2);
	margin-bottom: var(--mtr-e-1);
}

.mtr-campo__entrada {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--mtr-e-3);
	background: var(--mtr-papel-alto);
	border: 1px solid var(--mtr-pauta-forte);
	border-radius: var(--mtr-raio-2);
	/* 16px exatos: abaixo disso o Safari do iPhone dá zoom na página ao
	   focar o campo, e o layout quebra na cara do usuário. */
	font-size: 16px;
	transition: border-color var(--mtr-rapido) var(--mtr-curva);
}

.mtr-campo__entrada:focus {
	border-color: var(--mtr-destaque);
	outline: none;
}

.mtr-campo__entrada::placeholder {
	color: var(--mtr-tinta-3);
}


/* ── Linha de dois campos ────────────────────────────────────────────────── */

.mtr-dupla {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mtr-e-3);
}

/* A seta é desenhada com dois gradientes em vez de um SVG, para herdar o
   `currentColor` e trocar de tema sozinha. As três medidas viram variáveis
   porque o select menor da `.mtr-nova-cat` desenha a MESMA seta noutro
   tamanho: eram oito números literais entre as duas regras, e acertar a
   seta num lugar deixava a outra torta. */
select.mtr-campo__entrada {
	--mtr-seta-lado: 5px;
	--mtr-seta-direita: 18px;
	--mtr-seta-topo: 21px;

	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - var(--mtr-seta-direita)) var(--mtr-seta-topo),
		calc(100% - var(--mtr-seta-direita) + var(--mtr-seta-lado)) var(--mtr-seta-topo);
	background-size: var(--mtr-seta-lado) var(--mtr-seta-lado),
		var(--mtr-seta-lado) var(--mtr-seta-lado);
	background-repeat: no-repeat;
	padding-right: var(--mtr-e-6);
}


/* ── Nova categoria ──────────────────────────────────────────────────────── */

.mtr-nova-cat {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: var(--mtr-e-2);
	align-items: center;
}

.mtr-nova-cat .mtr-campo__entrada {
	min-height: var(--mtr-toque);
}

.mtr-nova-cat select.mtr-campo__entrada {
	--mtr-seta-direita: 16px;
	--mtr-seta-topo: 20px;

	width: auto;
	font-size: var(--mtr-t-mini);
}

.mtr-nova-cat .mtr-botao {
	min-height: var(--mtr-toque);
	padding: 0 var(--mtr-e-3);
}

/* Botões de conta lado a lado na Hoje não devem herdar o grid de campos. */
.mtr-tela > .mtr-dupla > .mtr-botao {
	width: 100%;
}


/* ── Campo de arquivo ────────────────────────────────────────────────────── */

input[type="file"].mtr-campo__entrada {
	height: auto;
	min-height: 48px;
	font-size: var(--mtr-t-mini);
	line-height: 1.4;
}

input[type="file"].mtr-campo__entrada::file-selector-button {
	margin-right: var(--mtr-e-3);
	padding: 6px var(--mtr-e-3);
	border: 1px solid var(--mtr-pauta-forte);
	border-radius: var(--mtr-raio-1);
	background: var(--mtr-papel-fundo);
	color: var(--mtr-tinta);
	font: inherit;
	cursor: pointer;
}


/* ── Campo de valor ──────────────────────────────────────────────────────── */

/* Primeiro campo da folha, grande e já focado: digitar o valor é a única
   coisa que a pessoa veio fazer. */
.mtr-valor {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--mtr-e-2);
	padding: var(--mtr-e-3) 0 var(--mtr-e-4);
}

.mtr-valor__moeda {
	font-size: var(--mtr-t-medio);
	color: var(--mtr-tinta-3);
}

.mtr-valor__entrada {
	width: 100%;
	max-width: 280px;
	border: 0;
	background: transparent;
	font-family: var(--mtr-fonte-numero);
	font-variant-numeric: tabular-nums;
	font-size: var(--mtr-t-manchete);
	font-weight: var(--mtr-peso-forte);
	letter-spacing: -0.03em;
	text-align: center;
	padding: 0;
}

/* Antes era `outline: none` e nada no lugar: o campo de valor — o primeiro e
   mais importante da folha de lançar — não tinha indicação de foco nenhuma.
   Um fio embaixo, que é o que um campo de livro-caixa teria. */
.mtr-valor__entrada:focus {
	outline: none;
	box-shadow: 0 2px 0 var(--mtr-destaque);
}

.mtr-valor__entrada::placeholder {
	color: var(--mtr-tinta-3);
}


/* ── Alternador despesa / receita ────────────────────────────────────────── */

.mtr-alternador {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mtr-e-1);
	padding: var(--mtr-e-1);
	background: var(--mtr-papel-fundo);
	border-radius: var(--mtr-raio-2);
	margin-bottom: var(--mtr-e-4);
}

.mtr-alternador__botao {
	min-height: var(--mtr-toque);
	border: 0;
	border-radius: var(--mtr-raio-1);
	background: transparent;
	color: var(--mtr-tinta-2);
	font-size: var(--mtr-t-mini);
	font-weight: var(--mtr-peso-medio);
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color var(--mtr-rapido) var(--mtr-curva);
}

.mtr-alternador__botao[aria-pressed="true"] {
	background: var(--mtr-papel-alto);
	color: var(--mtr-tinta);
	box-shadow: var(--mtr-sombra-1);
}


/* ── Alternador de três ──────────────────────────────────────────────────── */

.mtr-alternador--tres {
	grid-template-columns: repeat(3, 1fr);
}

.mtr-alternador__botao:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}


/* ── Fichas de categoria ─────────────────────────────────────────────────── */

/* Uma linha com rolagem horizontal e encaixe: um toque para escolher. Lista
   vertical obrigaria a rolar, e aí os 5 segundos viram 15. */
.mtr-fichas {
	display: flex;
	gap: var(--mtr-e-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: var(--mtr-e-1) var(--mtr-gutter);
	margin: 0 calc(-1 * var(--mtr-gutter)) var(--mtr-e-3);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;

	/* O encaixe respeita o respiro da página, senão a ficha encaixada fica
	   rente ao limite da tela — e aí ela parece cortada, que é exatamente o
	   problema que o trilho tinha. */
	scroll-padding-inline: var(--mtr-gutter);
}

.mtr-fichas::-webkit-scrollbar {
	display: none;
}

.mtr-ficha {
	display: inline-flex;
	align-items: center;
	gap: var(--mtr-e-2);
	flex: none;
	scroll-snap-align: start;
	min-height: var(--mtr-toque);
	padding: 0 var(--mtr-e-3);
	border: 1px solid var(--mtr-pauta-forte);
	border-radius: var(--mtr-raio-cheio);
	background: var(--mtr-papel-alto);
	color: var(--mtr-tinta-2);
	font-size: var(--mtr-t-mini);
	font-weight: var(--mtr-peso-medio);
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	transition: border-color var(--mtr-rapido) var(--mtr-curva),
		color var(--mtr-rapido) var(--mtr-curva);
}

.mtr-ficha[aria-pressed="true"] {
	border-color: var(--mtr-destaque);
	color: var(--mtr-tinta);
	background: var(--mtr-destaque-fraco);
}

.mtr-ficha__ponto {
	width: 8px;
	height: 8px;
	border-radius: var(--mtr-raio-cheio);
	background: var(--mtr-pauta-forte);
	flex: none;
}


/* ── Trilhos que rolam de lado ───────────────────────────────────────────── */

/* O degradê aparece SÓ do lado em que há mais conteúdo, e some ao chegar na
   ponta. A máscara estática que havia antes apagava a borda direita mesmo com
   o conteúdo todo à vista, e deixava o último item desbotado depois de rolar
   até o fim — num <select> isso faz o texto parecer danificado, não rolável.

   Os atributos vêm de `ligarTrilhos()`, no boot.js. */
.mtr-trilho[data-mais-direita] {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.mtr-trilho[data-mais-esquerda] {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}

.mtr-trilho[data-mais-esquerda][data-mais-direita] {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 32px,
		#000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 32px,
		#000 calc(100% - 32px), transparent);
}


/* ── Folha (sheet) ───────────────────────────────────────────────────────── */

/* Sobe de baixo, como num app nativo. O <dialog> dá fechamento por Esc, foco
   preso dentro e backdrop de graça — nada disso precisa de JS. */
.mtr-folha {
	width: 100%;
	max-width: var(--mtr-largura);
	margin: auto auto 0;
	padding: 0;
	border: 0;
	border-radius: var(--mtr-raio-3) var(--mtr-raio-3) 0 0;
	background: var(--mtr-papel-alto);
	color: var(--mtr-tinta);
	box-shadow: var(--mtr-sombra-3);
}

.mtr-folha::backdrop {
	background: var(--mtr-veu);
}

.mtr-folha[open] {
	animation: mtr-subir var(--mtr-normal) var(--mtr-entrada-curva);
}

@keyframes mtr-subir {
	from { transform: translateY(var(--mtr-e-4)); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

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

.mtr-folha__corpo {
	padding: var(--mtr-e-4) var(--mtr-gutter);
	padding-bottom: calc(var(--mtr-e-4) + var(--mtr-safe-baixo));
}

.mtr-folha__cabeca {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mtr-e-3);
	margin-bottom: var(--mtr-e-4);
}

.mtr-folha__titulo {
	font-size: var(--mtr-t-medio);
	font-weight: var(--mtr-peso-forte);
}

.mtr-folha__fechar {
	width: var(--mtr-toque-mini);
	height: var(--mtr-toque-mini);
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--mtr-raio-cheio);
	background: var(--mtr-papel-fundo);
	color: var(--mtr-tinta-2);
	cursor: pointer;
	touch-action: manipulation;
}


/* ── Folha longa ─────────────────────────────────────────────────────────── */

/* A folha de categorias cresce com a lista. Sem teto ela empurra o conteúdo
   para fora da tela no celular e o botão de criar some. */
.mtr-folha {
	max-height: 86svh;
	overflow-y: auto;
	overscroll-behavior: contain;
}


/* ── Erro dentro da folha ────────────────────────────────────────────────── */

.mtr-folha__erro {
	margin-bottom: var(--mtr-e-3);
	padding: var(--mtr-e-2) var(--mtr-e-3);
	border-radius: var(--mtr-raio-1);
	background: var(--mtr-alerta-fraco);
	border: 1px solid var(--mtr-alerta);
	font-size: var(--mtr-t-mini);
}


/* ── Torradinha ──────────────────────────────────────────────────────────── */

.mtr-toast {
	/* O navegador da a todo [popover] borda, padding, fundo, `inset: 0` e
	   `margin: auto`. Tudo isso e desfeito aqui. */
	position: fixed;
	inset: auto;
	/* `max-content` e nao `auto`: com `left: 50%` e sem `right`, um elemento
	   fixo de largura automatica so pode usar a METADE direita da tela — eram
	   188px num aparelho de 375, e por isso "Remover esta recorrencia?"
	   quebrava em tres linhas. */
	width: max-content;
	height: auto;
	overflow: visible;
	border: 0;
	margin: 0;
	left: 50%;
	/* Acima do FAB, nao na mesma linha dele: os dois partiam da mesma
	   coordenada e o botao cobria o texto do aviso, que entao quebrava em
	   tres linhas para escapar. */
	bottom: calc(var(--mtr-nav-altura) + var(--mtr-safe-baixo) + var(--mtr-e-4) + var(--mtr-fab) + var(--mtr-e-3));
	transform: translateX(-50%) translateY(var(--mtr-e-2));
	z-index: var(--mtr-z-toast);
	display: flex;
	align-items: center;
	gap: var(--mtr-e-3);
	max-width: calc(100vw - 2 * var(--mtr-gutter));
	padding: var(--mtr-e-3) var(--mtr-e-4);
	border-radius: var(--mtr-raio-2);
	background: var(--mtr-tinta);
	color: var(--mtr-papel);
	font-size: var(--mtr-t-mini);
	box-shadow: var(--mtr-sombra-2);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mtr-normal) var(--mtr-curva),
		transform var(--mtr-normal) var(--mtr-curva);
}

.mtr-toast[data-visivel] {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.mtr-toast__acao {
	background: none;
	border: 0;
	color: inherit;
	font-weight: var(--mtr-peso-forte);
	text-decoration: underline;
	cursor: pointer;
	flex: none;
}


/* ── Aviso ───────────────────────────────────────────────────────────────── */

.mtr-aviso {
	display: flex;
	gap: var(--mtr-e-2);
	padding: var(--mtr-e-3);
	background: var(--mtr-alerta-fraco);
	border: 1px solid var(--mtr-alerta);
	border-radius: var(--mtr-raio-2);
	color: var(--mtr-tinta);
	font-size: var(--mtr-t-mini);
	margin-bottom: var(--mtr-e-4);
}


/* ── Alarme da projeção ──────────────────────────────────────────────────── */

/* Quando há risco, o risco toma o lugar do número grande. Mostrar "pode
   gastar R$ 0,00" para quem vai furar o colchão é correto e inútil: o que a
   pessoa precisa é a data e o motivo. */
.mtr-alarme {
	padding: var(--mtr-e-4);
	border: 1px solid var(--mtr-alerta);
	border-radius: var(--mtr-raio-3);
	background: var(--mtr-alerta-fraco);
	margin-bottom: var(--mtr-e-3);
}

.mtr-alarme--critico {
	border-color: var(--mtr-saida);
}

/* Flex porque o título carrega o ícone de alerta: assim o ícone fica na
   primeira linha e o texto quebra ao lado dele, não embaixo. */
.mtr-alarme__titulo {
	display: flex;
	align-items: flex-start;
	gap: var(--mtr-e-2);
	font-size: var(--mtr-t-medio);
	font-weight: var(--mtr-peso-forte);
	line-height: var(--mtr-lh-titulo);
	margin-bottom: var(--mtr-e-2);
}

.mtr-alarme__titulo .mtr-icone {
	margin-top: 1px;
}

.mtr-alarme p {
	font-size: var(--mtr-t-mini);
	color: var(--mtr-tinta-2);
}

.mtr-alarme__titulo + p {
	color: var(--mtr-tinta);
}


/* ── Seletor de mês ──────────────────────────────────────────────────────── */

/* O par de setas, agora junto do título em vez de nos extremos opostos da
   tela — onde o `justify-content: space-between` as deixava a ~311px uma da
   outra num aparelho de 375px. */
.mtr-mes {
	display: flex;
	align-items: center;
	gap: var(--mtr-e-1);
	flex: none;
	padding: 2px;
	background: var(--mtr-papel-fundo);
	border-radius: var(--mtr-raio-2);
}

.mtr-mes__seta {
	width: var(--mtr-toque);
	height: var(--mtr-toque);
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--mtr-raio-1);
	background: transparent;
	color: var(--mtr-tinta-2);
	cursor: pointer;
	touch-action: manipulation;
}

/* O título é o botão que abre o seletor de 12 meses. Herda a tipografia do
   .mtr-titulo-tela que o embrulha, para o mês parecer um título e não um
   controle. */
.mtr-mes__abrir {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: clamp(1.25rem, 5.2vw, var(--mtr-t-tela));
	gap: var(--mtr-e-2);
	min-height: var(--mtr-toque);
	margin-left: calc(var(--mtr-e-2) * -1);
	padding: 0 var(--mtr-e-2);
	border: 0;
	border-radius: var(--mtr-raio-1);
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
}

.mtr-mes__abrir:active {
	background: var(--mtr-papel-fundo);
}

.mtr-mes__chevron {
	width: var(--mtr-icone-mini);
	height: var(--mtr-icone-mini);
	color: var(--mtr-tinta-3);
}


/* ── Grade de meses ──────────────────────────────────────────────────────── */

.mtr-meses {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mtr-e-2);
}

.mtr-meses__item {
	position: relative;
	display: grid;
	place-items: center;
	gap: var(--mtr-e-1);
	min-height: var(--mtr-toque);
	padding: var(--mtr-e-2) 0;
	border: 1px solid var(--mtr-pauta);
	border-radius: var(--mtr-raio-1);
	background: transparent;
	color: var(--mtr-tinta-2);
	font: inherit;
	font-size: var(--mtr-t-base);
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color var(--mtr-rapido) var(--mtr-curva);
}

.mtr-meses__item:active {
	background: var(--mtr-papel-fundo);
}

.mtr-meses__item[aria-pressed="true"] {
	border-color: var(--mtr-destaque);
	background: var(--mtr-destaque);
	color: var(--mtr-destaque-texto);
}

.mtr-meses__item:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* O ponto que diz "este mês tem alguma coisa". É a informação que faz o
   seletor valer a pena: tocar num mês vazio é um toque jogado fora. */
.mtr-meses__marca {
	width: 4px;
	height: 4px;
	border-radius: var(--mtr-raio-cheio);
	background: var(--mtr-tinta-3);
}

.mtr-meses__item[aria-pressed="true"] .mtr-meses__marca {
	background: var(--mtr-destaque-texto);
}


/* ── Botão de filtrar ────────────────────────────────────────────────────── */

.mtr-filtrar {
	margin-bottom: var(--mtr-e-4);
}

.mtr-filtrar--ativo {
	border-color: var(--mtr-destaque);
	color: var(--mtr-tinta);
}


/* ── Barra de categoria no resumo ────────────────────────────────────────── */

.mtr-barra {
	margin-top: var(--mtr-e-1);
	height: 6px;
	border-radius: var(--mtr-raio-cheio);
	background: var(--mtr-papel-fundo);
	overflow: hidden;
}

.mtr-barra__preenchimento {
	height: 100%;
	border-radius: var(--mtr-raio-cheio);
	background: var(--mtr-destaque);
}


/* ── Cenário conservador ─────────────────────────────────────────────────── */

.mtr-conservador {
	display: flex;
	align-items: flex-start;
	gap: var(--mtr-e-3);
	margin-top: var(--mtr-e-5);
	padding: var(--mtr-e-3);
	border: 1px solid var(--mtr-pauta);
	border-radius: var(--mtr-raio-2);
	background: var(--mtr-papel-alto);
	font-size: var(--mtr-t-mini);
	cursor: pointer;
}

.mtr-conservador input {
	width: 20px;
	height: 20px;
	flex: none;
	margin: 0;
	accent-color: var(--mtr-destaque);
}


/* ── Passos do onboarding ────────────────────────────────────────────────── */

.mtr-passos {
	display: flex;
	gap: var(--mtr-e-1);
	margin-bottom: var(--mtr-e-4);
}

.mtr-passos__um {
	flex: 1;
	height: 3px;
	border-radius: var(--mtr-raio-cheio);
	background: var(--mtr-pauta);
	transition: background-color var(--mtr-normal) var(--mtr-curva);
}

.mtr-passos__um--feito {
	background: var(--mtr-destaque);
}

/* A folha do onboarding não tem ✕ nem fecha pelo fundo. */
.mtr-folha--firme::backdrop {
	background: var(--mtr-veu-forte);
}


/* ── Ícones ──────────────────────────────────────────────────────────────── */

/* A espessura vem do token, não de um atributo no SVG: assim um ajuste vale
   para os ~30 ícones de uma vez. Antes havia três espessuras no projeto, cada
   uma escrita à mão no lugar onde o ícone foi desenhado. */
.mtr-icone {
	width: var(--mtr-icone);
	height: var(--mtr-icone);
	flex: none;
	stroke-width: var(--mtr-traco);
}

.mtr-icone--forte {
	width: var(--mtr-icone-forte);
	height: var(--mtr-icone-forte);
	stroke-width: var(--mtr-traco-forte);
}

/* Ícone que acompanha texto num botão: alinha com a linha de base ótica e
   recua um pouco, para o par não parecer dois elementos soltos. */
.mtr-botao .mtr-icone {
	width: var(--mtr-icone-mini);
	height: var(--mtr-icone-mini);
	margin-right: calc(var(--mtr-e-1) * -1);
}


/* ── Resposta ao toque ───────────────────────────────────────────────────── */

/* Todo alvo tocável devolve alguma coisa. Antes só o botão, o FAB e o botão
   do cabeçalho tinham `:active` — nav, fichas, setas de mês, ✕ das folhas e
   os dois alternadores ficavam mudos sob o dedo. */
.mtr-nav__item:active,
.mtr-mes__seta:active,
.mtr-folha__fechar:active,
.mtr-alternador__botao:active {
	background: var(--mtr-papel-fundo);
}

.mtr-ficha:active {
	border-color: var(--mtr-destaque);
}


/* ── Tela de entrada ─────────────────────────────────────────────────────── */

.mtr-entrar {
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: var(--mtr-e-5) var(--mtr-gutter);
}

.mtr-entrar__caixa {
	width: 100%;
	max-width: 360px;
}

.mtr-marca {
	display: flex;
	align-items: center;
	gap: var(--mtr-e-3);
	margin-bottom: var(--mtr-e-6);
}

.mtr-marca__glifo {
	width: var(--mtr-toque);
	height: var(--mtr-toque);
	border-radius: var(--mtr-raio-2);
	background: var(--mtr-destaque);
	display: grid;
	place-items: center;
	color: var(--mtr-destaque-texto);
	flex: none;
}

.mtr-marca__glifo svg {
	width: var(--mtr-icone-forte);
	height: var(--mtr-icone-forte);
}

.mtr-marca__nome {
	font-size: var(--mtr-t-tela);
	font-weight: var(--mtr-peso-forte);
	letter-spacing: var(--mtr-ls-manchete);
	line-height: var(--mtr-lh-apertada);
}

.mtr-marca__linha {
	font-size: var(--mtr-t-mini);
	color: var(--mtr-tinta-2);
}

.mtr-entrar__rodape {
	margin-top: var(--mtr-e-4);
	text-align: center;
	font-size: var(--mtr-t-mini);
	color: var(--mtr-tinta-2);
}