/* ============================================================================
   Koopono · design system dos painéis
   Folha própria, sem framework. Referência de estrutura: apps de banco digital
   (nav com ícone, ladrilhos tingidos, pílulas, chevron de entrada).
   ============================================================================ */

/* ---------------------------------------------------------------- tokens -- */
:root {
	/* neutros frios, para o verde não brigar */
	--n-0:  #ffffff;
	--n-25: #f7f9fc;
	--n-50: #f2f4f8;
	--n-100:#e9edf3;
	--n-200:#dce2ea;
	--n-300:#c2cad6;
	--n-400:#94a0b0;
	--n-500:#616e7e;
	--n-600:#4c5765;
	--n-700:#363f4d;
	--n-800:#212936;
	--n-900:#131922;

	--marca:       #57BE16;
	--marca-forte: #479d10;
	--marca-escura:#37790c;
	--marca-tenue: #eef8e6;

	--alta:  #0b8049;
	--baixa: #cd2d23;
	--aviso: #9b6108;
	--aviso-tenue: #fdf4e3;
	--grave-tenue: #fdecea;
	--info-tenue:  #e8f0fe;
	--info:        #1a56db;

	--fundo:       var(--n-50);
	--superficie:  var(--n-0);
	--borda:       var(--n-200);
	--borda-tenue: var(--n-100);
	--texto:       var(--n-900);
	--texto-2:     var(--n-600);
	--texto-3:     var(--n-500);

	--e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
	--e-5: 24px; --e-6: 32px; --e-7: 48px;

	--r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

	--sombra:   0 1px 2px rgba(19,25,34,.05), 0 2px 8px rgba(19,25,34,.05);
	--sombra-2: 0 4px 12px rgba(19,25,34,.07), 0 12px 32px rgba(19,25,34,.07);

	--fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: var(--fonte);
	font-size: 14.5px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.ic { flex: none; }

/* -------------------------------------------------------------- cabeçalho -- */
/*
 * Cabeçalho preso no topo: em lista longa a pessoa rola centenas de linhas e
 * perde a navegação. Dois andares — logo e conta em cima, abas embaixo —
 * porque as abas precisam do rótulo junto do ícone.
 */
.cabecalho {
	position: sticky; top: 0; z-index: 30;
	background: var(--superficie); border-bottom: 1px solid var(--borda-tenue);
	transition: box-shadow .15s;
}
.cabecalho.rolado { box-shadow: 0 2px 14px rgba(19, 25, 34, .08); }
.cabecalho-topo {
	display: flex; align-items: center; gap: var(--e-5);
	max-width: 1200px; margin: 0 auto; padding: var(--e-5) var(--e-5) var(--e-4);
}
.marca { display: flex; align-items: center; gap: 9px; }
.marca img { height: 26px; width: auto; display: block; }
/* fallback textual, para onde a imagem não serve */
.marca .escrito { font-size: 17px; font-weight: 680; letter-spacing: -.02em; }
.marca .ponto {
	width: 10px; height: 10px; border-radius: 50%; background: var(--marca);
	box-shadow: 0 0 0 3.5px var(--marca-tenue);
}
.cabecalho-topo .direita { margin-left: auto; display: flex; align-items: center; gap: var(--e-4); font-size: 13.5px; color: var(--texto-2); }

.nav-icones {
	display: flex; gap: var(--e-2); justify-content: center;
	max-width: 1200px; margin: 0 auto; padding: 0 var(--e-5);
	overflow-x: auto; scrollbar-width: none;
}
/* quando não cabe e vira rolagem, centralizar cortaria o primeiro item */
@media (max-width: 640px) { .nav-icones { justify-content: flex-start; } }
.nav-icones::-webkit-scrollbar { display: none; }
.nav-icones a {
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 10px 22px 12px; min-width: 96px;
	color: var(--texto-2); font-size: 13.5px; font-weight: 550;
	border-bottom: 3px solid transparent; white-space: nowrap;
	transition: color .12s, border-color .12s;
}
.nav-icones a:hover { color: var(--texto); }
.nav-icones a.ativo { color: var(--marca-escura); border-bottom-color: var(--marca); font-weight: 620; }

/*
 * Contador na aba: quantos itens esperam alguém ali dentro.
 *
 * Existe para dispensar a visita. Sem ele a pessoa abre a aba todo dia para
 * descobrir que não há nada — e no dia em que houver, ela não vai saber.
 */
.nav-icones .conta {
	display: inline-grid; place-items: center; min-width: 18px; height: 18px;
	padding: 0 5px; margin-left: 6px; border-radius: var(--r-pill);
	background: var(--baixa); color: #fff;
	font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- estrutura -- */
.pagina { max-width: 1200px; margin: 0 auto; padding: var(--e-6) var(--e-5) var(--e-7); }
.titulo-pagina { margin: 0 0 3px; font-size: 24px; font-weight: 680; letter-spacing: -.025em; }
.sub-pagina { margin: 0 0 var(--e-5); color: var(--texto-3); font-size: 14px; }
.secao { margin: 0 0 var(--e-3); font-size: 16px; font-weight: 650; letter-spacing: -.015em; }

.grade { display: grid; gap: var(--e-4); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .g-4, .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .g-4, .g-3, .g-2 { grid-template-columns: 1fr; } }

/*
 * Cabeçalho de página: o título à esquerda, o que se faz com ela à direita.
 *
 * `align-items: flex-end` e não center: o título tem duas linhas (nome e
 * explicação) e os controles têm uma. Alinhados pelo centro, os controles
 * flutuam no meio do bloco de texto; pela base, eles assentam na linha da
 * explicação, que é onde o olho espera.
 */
.cabecalho-pagina {
	display: flex; align-items: flex-end; gap: var(--e-4);
	flex-wrap: wrap; margin-bottom: var(--e-5);
}
/*
 * Fila de controles: busca, filtros, botões — o que fica lado a lado.
 *
 * Vale SOZINHA, e não só dentro do cabeçalho. Ela nasceu escopada em
 * `.cabecalho-pagina`, e quando a barra da listagem a usou fora dali não herdou
 * nada: o formulário e as pílulas empilharam como blocos, cada um na sua linha.
 * Classe que só funciona num pai é armadilha para quem a reusa.
 */
.acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }

/* dentro do cabeçalho ela ainda empurra para a direita */
.cabecalho-pagina .acoes { margin-left: auto; }

/*
 * O outro lado do cabeçalho quando o que vai ali não é botão.
 *
 * Nem todo cabeçalho termina em ação: no detalhe de uma métrica o que fica à
 * direita é o TOTAL, que é o número de onde a pessoa clicou. Sem uma classe
 * para isso, a tela escreve `style="margin-left:auto"` — e a próxima escreve
 * de novo, um pixel diferente.
 */
.cabecalho-pagina > .direita { margin-left: auto; text-align: right; }

/* ----------------------------------------------------------------- abas -- */
/*
 * Sublinhado embaixo da aba ativa, e não pílula: a pílula já é o filtro rápido
 * das listagens (`.pilula`), e usar a mesma forma para "em que tela estou" e
 * "que filtro apliquei" faz as duas se confundirem na mesma página — que é
 * exatamente onde as duas aparecem juntas.
 */
.abas {
	display: flex; gap: var(--e-1); flex-wrap: wrap;
	border-bottom: 1px solid var(--borda); margin-bottom: var(--e-5);
}
.abas a {
	display: inline-flex; align-items: center; gap: var(--e-2);
	padding: 10px var(--e-4); margin-bottom: -1px;
	border-bottom: 2.5px solid transparent;
	color: var(--texto-2); font-size: 14.5px; font-weight: 560;
	white-space: nowrap;
}
.abas a:hover { color: var(--texto); }
.abas a.aqui { color: var(--texto); border-bottom-color: var(--marca); font-weight: 640; }
.abas a b {
	min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill);
	background: var(--marca-tenue); color: var(--marca-escura);
	font-size: 12px; font-weight: 680; text-align: center;
	font-variant-numeric: tabular-nums;
}
.abas a b.vazia { background: var(--n-100); color: var(--texto-3); }

/* --------------------------------------------------------------- cartões -- */
.cartao {
	background: var(--superficie);
	border: 1px solid var(--borda-tenue);
	border-radius: var(--r-lg);
	box-shadow: var(--sombra);
}
.cartao-corpo { padding: var(--e-5); }
.cartao-topo {
	display: flex; align-items: center; gap: var(--e-3);
	padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borda-tenue);
}
.cartao-titulo { font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; }
.cartao-rodape { padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borda-tenue); }

/* --------------------------------------------------------------- números -- */
.rotulo { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.numero { margin-top: var(--e-2); font-size: 30px; font-weight: 660; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.numero.m { font-size: 22px; }
.numero.p { font-size: 18px; }
.nota { margin-top: 7px; font-size: 13px; color: var(--texto-3); }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 620; font-size: 13px; }
.delta.sobe  { color: var(--alta); }
.delta.desce { color: var(--baixa); }
.delta.igual { color: var(--texto-3); }
.delta .ic { width: 14px; height: 14px; stroke-width: 2.4; }

/*
 * Faixa de indicadores: os números que respondem "como estamos" numa linha só.
 *
 * A separação é FIO, não espaço entre cartões. Quatro cartões soltos leem-se
 * como quatro coisas; uma faixa dividida lê-se como um painel, que é o que ela
 * é. O fio sai do `gap` sobre um fundo da cor da borda — sem borda em cada
 * célula, que dobraria a espessura nos encontros.
 *
 * Dentro de cada célula vão os átomos que já existem: .rotulo, .numero.m e
 * .nota. Não há classe nova para o texto — se houvesse, o indicador começaria
 * a divergir do resto do sistema na primeira vez que alguém mudasse um tamanho.
 */
.indicadores {
	display: grid; gap: 1px; background: var(--borda);
	border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.indicador { background: var(--superficie); padding: var(--e-4) var(--e-4) var(--e-3); }
.indicador .numero { margin-top: 6px; }
.indicador .numero a { color: inherit; }
.indicador .numero a:hover { color: var(--marca-forte); }

/*
 * O tom diz o que o número é, não o quanto ele é bonito.
 *
 * O prefixo `tom-` não é enfeite. `marca`, `aviso` e `grave` são COMPONENTES
 * deste arquivo — a marca do cabeçalho é `display:flex`, o aviso é uma caixa
 * com ladrilho. Usá-los como modificador aqui faria `.indicador.marca` herdar
 * o flex da marca e deitar o rótulo, o número e a nota lado a lado. Aconteceu,
 * e levou uma tela para ser notado.
 *
 * Regra: modificador cujo nome já é um componente precisa de prefixo.
 */
.indicador.tom-marca .numero { color: var(--marca-escura); }
.indicador.tom-aviso .numero { color: var(--aviso); }
.indicador.tom-grave .numero { color: var(--baixa); }

/*
 * Medidor: proporção em barra.
 *
 * `.barra` já existe no gráfico, como retângulo de SVG — reusar o nome faria
 * um seletor valer para os dois e ninguém entenderia por quê.
 */
.medidor { height: 6px; border-radius: var(--r-pill); background: var(--n-100); overflow: hidden; }
.medidor > i { display: block; height: 100%; background: var(--marca); border-radius: inherit; }
.medidor.tom-aviso > i { background: var(--aviso); }
.medidor.tom-grave > i { background: var(--baixa); }

/*
 * A ajuda de um número: o "?" ao lado do rótulo.
 *
 * <details> nativo, e não popover de biblioteca: funciona sem JavaScript, o
 * texto fica no HTML — então quem procura com Ctrl+F acha — e não entra uma
 * dependência para exibir um parágrafo.
 */
.ajuda { display: inline; }
.ajuda summary {
	display: inline-grid; place-items: center; width: 15px; height: 15px;
	border: 1px solid var(--borda); border-radius: 50%;
	font-size: 10px; font-weight: 700; color: var(--texto-3);
	cursor: pointer; list-style: none; vertical-align: middle;
}
.ajuda summary::-webkit-details-marker { display: none; }
.ajuda summary:hover { border-color: var(--n-400); color: var(--texto-2); }
.ajuda[open] summary { background: var(--texto); border-color: var(--texto); color: var(--n-0); }
.ajuda .corpo {
	position: absolute; z-index: 30; margin-top: 6px; max-width: 340px;
	padding: var(--e-4); border: 1px solid var(--borda); border-radius: var(--r);
	background: var(--superficie); box-shadow: var(--sombra-2);
	font-size: 13px; line-height: 1.5; color: var(--texto-2);
	text-transform: none; letter-spacing: 0; font-weight: 400;
}
.ajuda .corpo p { margin: 0 0 8px; }
.ajuda .corpo p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- ladrilho -- */
/* quadrado arredondado com fundo tingido — o átomo visual da referência */
.ladrilho {
	width: 46px; height: 46px; border-radius: var(--r);
	display: grid; place-items: center; flex: none;
	background: var(--marca-tenue); color: var(--marca-escura);
}
.ladrilho.g { width: 56px; height: 56px; border-radius: var(--r-lg); }
.ladrilho.aviso { background: var(--aviso-tenue); color: var(--aviso); }
.ladrilho.grave { background: var(--grave-tenue); color: var(--baixa); }
.ladrilho.info  { background: var(--info-tenue);  color: var(--info); }
.ladrilho.neutro{ background: var(--n-100);       color: var(--texto-2); }

/* atalho: ladrilho + rótulo, em grade */
.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
@media (max-width: 720px) { .atalhos { grid-template-columns: repeat(2, 1fr); } }
.atalho {
	display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
	padding: var(--e-4) var(--e-2); border-radius: var(--r);
	text-align: center; font-size: 13.5px; font-weight: 550; color: var(--texto-2);
	transition: background .12s;
}
.atalho:hover { background: var(--n-25); color: var(--texto); }

/* --------------------------------------------------------------- botões -- */
.botao {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 10px 18px; border: 1.5px solid transparent; border-radius: var(--r-pill);
	font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}
/* texto escuro sobre o verde da marca: branco dá 2.39:1 e reprova em AA,
   enquanto #131922 dá 7.38:1 — mantém a cor exata da marca e passa com folga */
.botao.principal { background: var(--marca); color: var(--n-900); }
.botao.principal:hover { background: var(--marca-forte); color: #fff; }
.botao.contorno { background: transparent; border-color: var(--borda); color: var(--texto); }
.botao.contorno:hover { border-color: var(--n-300); background: var(--n-25); }
.botao.discreto { background: transparent; color: var(--texto-2); }
.botao.discreto:hover { background: var(--n-100); color: var(--texto); }
.botao.perigo { background: var(--baixa); color: #fff; }
.botao.p { padding: 6px 13px; font-size: 13px; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

/* grupo de pílulas, tipo Entradas/Saídas */
.pilulas { display: inline-flex; gap: var(--e-2); }
.pilulas a, .pilulas button {
	padding: 7px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--borda);
	background: transparent; color: var(--texto-2);
	font-family: inherit; font-size: 13.5px; font-weight: 560; cursor: pointer;
}
.pilulas a.ativo, .pilulas button.ativo {
	border-color: var(--marca); background: var(--marca-tenue); color: var(--marca-escura); font-weight: 620;
}

/* -------------------------------------------------------------- etiqueta -- */
.etiqueta {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 11px; border-radius: var(--r-pill);
	font-size: 12.5px; font-weight: 570;
	background: var(--n-100); color: var(--texto-2);
}
.etiqueta.viva   { background: var(--marca-tenue); color: var(--marca-escura); }
.etiqueta.parada { background: var(--n-100);       color: var(--texto-3); }
.etiqueta.aviso  { background: var(--aviso-tenue); color: var(--aviso); }
.etiqueta.grave  { background: var(--grave-tenue); color: var(--baixa); }

/* --------------------------------------------------------------- avisos -- */
.aviso {
	display: flex; align-items: center; gap: var(--e-3);
	padding: var(--e-3) var(--e-4); margin-bottom: var(--e-3);
	border-radius: var(--r); font-size: 14px; background: var(--superficie);
	border: 1px solid var(--borda-tenue);
}
.aviso .texto { flex: 1; }
.aviso.atencao { background: var(--aviso-tenue); border-color: transparent; color: var(--aviso); }
.aviso.grave   { background: var(--grave-tenue); border-color: transparent; color: var(--baixa); }
.aviso a { font-weight: 620; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- linhas -- */
/* item de lista com chevron: a afordância de "entrar" da referência */
.linha {
	display: flex; align-items: center; gap: var(--e-3);
	padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borda-tenue);
}
.linha:last-child { border-bottom: 0; }
a.linha:hover { background: var(--n-25); }
.linha .conteudo { flex: 1; min-width: 0; }
.linha .principal { font-weight: 570; }
.linha .secundario { font-size: 13px; color: var(--texto-3); }
.linha .chevron { color: var(--n-300); }
a.linha:hover .chevron { color: var(--texto-2); }

/*
 * Ranking: nome, valor e a barra que compara um com o outro.
 *
 * A barra existe porque a lista de números sozinha obriga a pessoa a fazer a
 * divisão de cabeça para saber se o primeiro é o dobro ou 5% maior que o
 * segundo. A largura responde essa pergunta antes da leitura.
 */
.ranking { display: grid; gap: var(--e-3); }
.ranking .item .topo {
	display: flex; justify-content: space-between; gap: var(--e-3);
	font-size: 13.5px; margin-bottom: 5px;
}
.ranking .item .topo b { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }

/* --------------------------------------------------------------- tabela -- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
	text-align: left; padding: var(--e-3) var(--e-5);
	font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--texto-3); border-bottom: 1px solid var(--borda-tenue);
}
.tabela td { padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borda-tenue); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--n-25); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/*
 * Duas linhas numa célula: o nome e o que o identifica embaixo.
 *
 * `.linha` já tem `.principal` e `.secundario`, mas escopados nela — e a
 * tabela não é uma lista de `.linha`. Os mesmos nomes aqui dentro, para quem
 * escreve a tela não precisar lembrar de qual componente veio.
 */
.tabela .principal  { font-weight: 600; }
.tabela .secundario { font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/*
 * O tom de um número na tabela.
 *
 * `zerado` em cinza porque zero não é notícia: se todos os valores tiverem o
 * mesmo peso, quem varre a coluna para achar o que falta pagar tem que ler
 * cada um. `devendo` puxa o olho para os que exigem ação.
 */
.num.devendo { color: var(--aviso); font-weight: 600; }
/* o mesmo tom vale para o número grande: dívida é dívida em qualquer tamanho */
.numero.devendo { color: var(--aviso); }
.num.zerado  { color: var(--texto-3); }

/* -------------------------------------------------------------- entidade -- */
.entidade { display: flex; align-items: center; gap: var(--e-3); }
.entidade .selo {
	width: 38px; height: 38px; flex: none; border-radius: var(--r-sm);
	display: grid; place-items: center;
	font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.02em;
}
.entidade .nome { font-weight: 580; }
.entidade .id { font-size: 12.5px; color: var(--texto-3); font-family: var(--mono); }

/* -------------------------------------------------------------- gráfico -- */
.grafico { width: 100%; height: 210px; display: block; }
.grafico .barra { fill: var(--marca); opacity: .9; }
.grafico .barra:hover { opacity: 1; }
.grafico .eixo { stroke: var(--borda-tenue); stroke-width: 1; }
.grafico .rotulo-eixo { fill: var(--texto-3); font-size: 10.5px; font-family: var(--fonte); }

/* --------------------------------------------------------------- campos -- */
.campo { display: block; margin-bottom: var(--e-4); }
.campo > span { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 570; color: var(--texto-2); }
.campo input, .campo select, .campo textarea {
	width: 100%; padding: 11px 14px;
	border: 1.5px solid var(--borda); border-radius: var(--r-sm);
	background: var(--superficie); color: var(--texto);
	font-family: inherit; font-size: 14.5px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
	outline: none; border-color: var(--marca);
	box-shadow: 0 0 0 3.5px var(--marca-tenue);
}
.campo .ajuda { margin-top: 5px; font-size: 12.5px; color: var(--texto-3); }

/*
 * Marcadores: caixa e redondo.
 *
 * Estavam sem estilo nenhum — nativos, azuis de sistema, do tamanho que o
 * navegador quisesse. Apareciam em três telas (permissões, seleção de vendas,
 * filtros) e em cada uma alguém ia acabar remendando local; é componente, e
 * componente mora aqui.
 *
 * `accent-color` faz o navegador desenhar o controle nativo na cor da marca,
 * mantendo o comportamento e a acessibilidade que ele já tem. Estilizar por
 * fora, com ::before e `appearance: none`, custa o estado indeterminado, o
 * foco do sistema e o suporte a leitor de tela — troca ruim para o que se
 * ganha.
 */
input[type="checkbox"], input[type="radio"] {
	width: 17px; height: 17px; margin: 0;
	accent-color: var(--marca);
	cursor: pointer;
	vertical-align: middle;
	flex: none;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; opacity: .5; }

/*
 * A caixa dentro de tabela ganha área de clique maior que ela mesma. Numa
 * grade de 48 marcadores, errar a célula é a diferença entre dar e negar uma
 * permissão.
 */
.tabela td > input[type="checkbox"], .tabela th > input[type="checkbox"] { padding: 10px; }

/*
 * `.marcador`: caixa de marcar com texto ao lado, no par certo.
 *
 * Escrito como <label class="marcador"><input type="checkbox"> texto</label>, o
 * clique no texto também marca — que é o que se espera e o que não acontece
 * quando a caixa e o texto são elementos irmãos soltos.
 *
 * ELE JÁ SE CHAMOU `.caixa`, E ISSO DERRUBOU A TELA DE LOGIN. `.caixa` é a
 * caixa branca do formulário da porta de entrada, definida lá embaixo como
 * `.porta-forma .caixa`; declarar `.caixa { display: inline-flex }` aqui em
 * cima transformou aquele bloco numa linha, e logo, título, campo e botão
 * ficaram lado a lado, espremidos.
 *
 * É a terceira vez que um nome novo pisa num que já existia — antes foram
 * `.destaque` e `.marca`/`.aviso`/`.grave` como modificadores. A regra que já
 * estava escrita neste arquivo valia só para modificador; vale para tudo:
 * ANTES DE CRIAR UMA CLASSE, PROCURE O NOME NESTE ARQUIVO. Um `grep` de dez
 * segundos contra uma tela de login quebrada em produção.
 */
.marcador {
	display: inline-flex; align-items: center; gap: var(--e-2);
	font-size: 14px; color: var(--texto); cursor: pointer;
	padding: 4px 0;
}
.marcador.p { font-size: 13px; }
.marcador .secundario { color: var(--texto-3); }

.vazio { padding: var(--e-7) var(--e-5); text-align: center; color: var(--texto-3); font-size: 14px; }
.divisor { height: 1px; background: var(--borda-tenue); margin: var(--e-5) 0; }

/*
 * Busca: o campo redondo que fica no cabeçalho da listagem.
 *
 * Não é `.campo`: aquele é campo de formulário, com rótulo em cima e largura
 * total. Este mora numa barra ao lado de botões, e a forma de pílula é o que o
 * faz parecer um controle da barra em vez de um formulário perdido ali.
 */
.busca { display: flex; gap: var(--e-2); }
.busca input {
	width: 260px; max-width: 100%; padding: 8px 14px;
	border: 1.5px solid var(--borda); border-radius: var(--r-pill);
	background: var(--superficie); color: var(--texto);
	font-family: inherit; font-size: 14px;
}
.busca input:focus { outline: none; border-color: var(--marca); }
@media (max-width: 520px) { .busca input { width: 100%; } }

/* ----------------------------------------------------------------- foco -- */
/*
 * :focus-visible, não :focus — o anel só aparece para quem navega por teclado,
 * e não pisca a cada clique de mouse. Anel de 2px com afastamento, para ficar
 * visível também sobre fundo tingido.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--marca-escura);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}
.nav-icones a:focus-visible { outline-offset: -3px; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
	outline: none; /* já tem anel próprio via box-shadow */
}
/* quem esconde o foco esconde a navegação de quem depende dele */
:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------- modal -- */
/* <dialog> nativo: abre com .showModal(), fecha com Esc, sem biblioteca */
dialog.modal {
	padding: 0; border: 0; border-radius: var(--r-lg);
	background: var(--superficie); color: var(--texto);
	box-shadow: var(--sombra-2);
	width: min(520px, calc(100vw - var(--e-5) * 2));
}
dialog.modal::backdrop { background: rgba(19, 25, 34, .45); }

/*
 * Modal largo: o que carrega tabela.
 *
 * 520px serve para uma pergunta com dois botoes. Uma tabela nao cabe ali — o
 * nome da pessoa quebra em duas linhas, o do estabelecimento em duas, e a
 * conferencia que o modal existe para permitir vira leitura de coluna
 * espremida.
 */
dialog.modal.largo { width: min(1000px, calc(100vw - var(--e-5) * 2)); }
dialog.modal .modal-topo {
	display: flex; align-items: center; gap: var(--e-3);
	padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--borda-tenue);
}
dialog.modal .modal-titulo { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
dialog.modal .modal-corpo { padding: var(--e-5); }
dialog.modal .modal-rodape {
	display: flex; justify-content: flex-end; gap: var(--e-2);
	padding: var(--e-4) var(--e-5); border-top: 1px solid var(--borda-tenue);
	background: var(--n-25); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
dialog.modal .fechar {
	margin-left: auto; background: none; border: 0; cursor: pointer;
	color: var(--texto-3); padding: 4px; border-radius: var(--r-sm); display: grid; place-items: center;
}
dialog.modal .fechar:hover { background: var(--n-100); color: var(--texto); }

/* ----------------------------------------------------------- paginação -- */
.paginacao { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.paginacao a, .paginacao span {
	min-width: 36px; height: 36px; padding: 0 10px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--borda); border-radius: var(--r-sm);
	font-size: 13.5px; font-weight: 560; color: var(--texto-2);
	font-variant-numeric: tabular-nums;
}
.paginacao a:hover { border-color: var(--n-300); background: var(--n-25); color: var(--texto); }
.paginacao .atual { border-color: var(--marca); background: var(--marca-tenue); color: var(--marca-escura); font-weight: 640; }
.paginacao .reticencias { border: 0; color: var(--texto-3); min-width: 20px; padding: 0; }
.paginacao .inerte { opacity: .45; pointer-events: none; }
.paginacao .anterior svg { transform: rotate(180deg); }
.paginacao .contagem { margin-left: auto; border: 0; color: var(--texto-3); font-size: 13px; padding: 0; }

/* --------------------------------------------------------------- datas -- */
/* input nativo: o seletor do sistema já é acessível e localizado */
.campo input[type="date"], .campo input[type="datetime-local"] { font-family: inherit; }
.campo input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer; opacity: .55; padding: 2px;
}
.campo input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.periodo { display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; }
.periodo .campo { margin-bottom: 0; flex: 1 1 160px; }
.periodo .ate { padding-bottom: 12px; color: var(--texto-3); font-size: 13.5px; }

/* ------------------------------------------------------------ utilidades -- */
/* some em tela estreita — no celular o nome do parceiro compete com o "sair" */
@media (max-width: 560px) { .so-largo { display: none; } }

/* --------------------------------------------- tabela que vira lista -- */
/*
 * Em tela estreita a tabela vaza pela direita e corta justo a coluna do
 * dinheiro — que é a que a pessoa abriu o painel para ver. Rolagem lateral
 * resolve no papel e não na mão: ninguém descobre que precisa arrastar.
 *
 * Com .empilha, cada linha vira um bloco e cada célula ganha o rótulo do
 * cabeçalho ao lado, lido de data-rotulo. Sem o atributo a célula aparece
 * sem rótulo, que é degradação aceitável — nada some.
 */
@media (max-width: 620px) {
	.tabela.empilha thead { display: none; }
	.tabela.empilha tr {
		display: block; padding: var(--e-4) var(--e-5);
		border-bottom: 1px solid var(--borda-tenue);
	}
	.tabela.empilha tr:last-child { border-bottom: 0; }
	.tabela.empilha td {
		display: flex; align-items: baseline; justify-content: space-between;
		gap: var(--e-4); padding: 3px 0; border: 0; text-align: right;
	}
	.tabela.empilha td::before {
		content: attr(data-rotulo);
		color: var(--texto-3); font-size: 12.5px; text-align: left; flex: none;
	}
	/*
	 * Quem é o assunto da linha muda por tabela — numa é o cliente, noutra é a
	 * data. Marcar .titulo na célula certa vira o cabeçalho do bloco; sem
	 * marcar, todas viram par rótulo/valor, que também lê bem.
	 */
	.tabela.empilha td.titulo {
		display: block; text-align: left; font-weight: 600; padding-bottom: 6px;
	}
	.tabela.empilha td.titulo::before { content: none; }
}

/*
 * Colisão de nomes: `aviso`, `grave` e `info` nomeiam tanto variantes de cor
 * quanto o bloco de alerta. Como `.aviso` declara display:flex e é declarado
 * DEPOIS de `.etiqueta`, uma etiqueta com essa classe herdava o flex e
 * esticava até preencher a célula da tabela.
 *
 * O certo seria não reusar o nome; enquanto não vale a troca em todas as
 * telas, isto devolve o display à etiqueta.
 */
.etiqueta.aviso, .etiqueta.grave, .etiqueta.info {
	display: inline-flex;
	/*
	 * O remendo original devolvia só o `display`, e a etiqueta continuava com o
	 * PADDING da caixa de alerta — 16px onde o certo são 4px. Passava
	 * despercebido porque a etiqueta ficava só um pouco mais alta que as
	 * vizinhas, e ninguém compara altura de etiqueta.
	 *
	 * `.aviso` e `.etiqueta` têm a MESMA especificidade (0,1,0); quem vence é a
	 * ordem no arquivo, e `.aviso` vem depois. Por isso é preciso repetir aqui
	 * tudo que a caixa sobrescreve, e não só o que se notou primeiro.
	 */
	padding: 4px 11px; font-size: 12.5px; font-weight: 570;
	border: 0; gap: 5px;
}

/*
 * Menu de ações de uma linha: o "⋯" que abre a lista do que dá para fazer.
 *
 * <details> outra vez, pelo mesmo motivo da .ajuda: sem biblioteca, sem
 * JavaScript obrigatório, e fecha ao clicar fora porque o `summary` recebe
 * foco. Não é `<select>` — select não abre link, e a metade das ações aqui é
 * navegação.
 *
 * Não abre para cima quando a linha é a última da tabela. É a limitação
 * conhecida de posicionar sem JS; com 25 linhas por página e rolagem, o custo
 * é uma rolagem a mais, e não vale uma dependência.
 */
.menu { position: relative; display: inline-block; }
.menu > summary {
	list-style: none; cursor: pointer; user-select: none;
	display: grid; place-items: center; width: 32px; height: 32px;
	border-radius: var(--r-sm); color: var(--texto-3);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--n-100); color: var(--texto); }
.menu[open] > summary { background: var(--n-100); color: var(--texto); }
.menu .itens {
	position: absolute; right: 0; z-index: 40; min-width: 210px;
	margin-top: 4px; padding: 6px;
	background: var(--superficie); border: 1px solid var(--borda);
	border-radius: var(--r); box-shadow: var(--sombra-2);
	display: flex; flex-direction: column; gap: 1px;
}
.menu .itens a, .menu .itens button {
	display: flex; align-items: center; gap: var(--e-3);
	padding: 8px 10px; border: 0; border-radius: var(--r-sm);
	background: transparent; color: var(--texto);
	font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
	white-space: nowrap;
}
.menu .itens a:hover, .menu .itens button:hover { background: var(--n-50); }
.menu .itens .risco { color: var(--baixa); }
.menu .itens .risco:hover { background: var(--grave-tenue); }
.menu .itens hr { border: 0; border-top: 1px solid var(--borda-tenue); margin: 5px 2px; }
.menu .itens svg { flex: none; color: var(--texto-3); }

/*
 * Campo que busca enquanto se digita.
 *
 * A lista de opcoes e um <div> posicionado, e nao um <datalist>: o nativo nao
 * deixa guardar o token junto do nome, e aqui o que vai para o formulario e o
 * token — o nome so serve para a pessoa reconhecer quem escolheu.
 *
 * O `position: relative` no envolvente e o que prende a lista ao campo; sem
 * ele ela ancora na pagina e fica no lugar errado assim que algo rola.
 */
.autocompletar { position: relative; }
/*
 * O campo de digitar do autocompletar se veste sozinho.
 *
 * Ele dependia de estar dentro de um `.campo` para herdar borda, altura e
 * fonte. Nas listagens estava; no primeiro formulário que o usou solto,
 * apareceu como input cru do navegador no meio de uma tela inteira estilizada.
 * Componente que só funciona dentro de outro é armadilha.
 */
.autocompletar > input[type="text"] {
	width: 100%; padding: 11px 14px;
	border: 1.5px solid var(--borda); border-radius: var(--r-sm);
	background: var(--superficie); color: var(--texto);
	font-family: inherit; font-size: 14.5px;
}
.autocompletar > input[type="text"]:focus {
	outline: none; border-color: var(--marca);
	box-shadow: 0 0 0 3.5px var(--marca-tenue);
}
.autocompletar .opcoes {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
	max-height: 260px; overflow: auto; display: none;
	background: var(--superficie); border: 1px solid var(--borda);
	border-radius: var(--r); box-shadow: var(--sombra-2); padding: 6px;
}
.autocompletar .opcoes a {
	display: block; padding: 8px 10px; border-radius: var(--r-sm);
	color: var(--texto); font-size: 14px; cursor: pointer; white-space: normal;
}
.autocompletar .opcoes a:hover { background: var(--n-50); }
.autocompletar .limpar {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	background: none; border: 0; cursor: pointer; color: var(--texto-3);
	display: none; padding: 4px; line-height: 0;
}
.autocompletar.escolhido .limpar { display: block; }
.autocompletar.escolhido input[type="text"] { padding-right: 34px; border-color: var(--marca); }

/*
 * Modo lista: as escolhidas viram fichas abaixo do campo.
 *
 * Abaixo, e não dentro do campo como faz o select2: com 30 pessoas escolhidas
 * — que é um crédito comum aqui — as fichas dentro empurram o campo de digitar
 * para fora da tela e ninguém mais acha onde escrever.
 */
.autocompletar .escolhidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e-2); }
.autocompletar .escolhidos:empty { margin-top: 0; }
.ficha {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 6px 5px 11px; border-radius: var(--r-pill);
	background: var(--marca-tenue); border: 1px solid var(--marca);
	color: var(--marca-escura); font-size: 13px; font-weight: 550;
}
.ficha button {
	border: 0; background: none; cursor: pointer; padding: 0;
	width: 18px; height: 18px; border-radius: 50%; line-height: 1;
	color: var(--marca-escura); font-size: 15px;
}
.ficha button:hover { background: var(--marca); color: #fff; }
.escolhidos-conta { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- dropzone -- */
/*
 * Área de anexo. É <label> envolvendo um <input type=file> escondido: assim
 * clicar, tabular e apertar espaço funcionam sem uma linha de JS, e o leitor
 * de tela anuncia como campo de arquivo.
 */
.solta {
	display: block; text-align: center; cursor: pointer;
	padding: var(--e-6) var(--e-5);
	border: 1.5px dashed var(--borda); border-radius: var(--r-md);
	background: var(--n-25); transition: border-color .12s, background .12s;
}
.solta:hover, .solta.sobre { border-color: var(--marca); background: var(--marca-tenue); }
.solta .icone { color: var(--texto-3); display: block; margin: 0 auto var(--e-3); }
.solta .titulo { font-weight: 620; font-size: 14.5px; word-break: break-word; }
.solta .ajuda  { color: var(--texto-3); font-size: 12.5px; margin-top: 3px; }
.solta.ok    { border-color: var(--marca); border-style: solid; background: var(--marca-tenue); }
.solta.ok .icone { color: var(--marca-escura); }
.solta.ruim  { border-color: var(--baixa); border-style: solid; background: var(--grave-tenue); }
.solta.ruim .icone { color: var(--baixa); }
.solta:focus-within { outline: 2px solid var(--marca-escura); outline-offset: 2px; }
.solta .icone svg { display: block; }

/*
 * O "?" que abre a explicação de uma linha.
 *
 * Fica ao lado da etiqueta, e não no lugar dela: a etiqueta diz O QUE houve em
 * duas palavras — que é o que se lê varrendo 400 linhas — e o "?" guarda o
 * como resolver, que é parágrafo e só interessa para a linha em que se parou.
 */
.ajuda-linha {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; padding: 0; margin-left: 5px;
	border: 1px solid currentColor; border-radius: 50%; background: none;
	color: var(--texto-3); font-size: 11px; font-weight: 700; line-height: 1;
	cursor: pointer; vertical-align: middle;
}
.ajuda-linha:hover, .ajuda-linha:focus { color: var(--marca-escura); }

/* --------------------------------------------------------------- passos -- */
.passos { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-5); }
.passos .passo { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto-3); }
.passos .bola {
	width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
	background: var(--n-100); color: var(--texto-3); font-size: 12px; font-weight: 650; flex: none;
}
.passos .passo.feito { color: var(--texto-2); }
.passos .passo.feito .bola { background: var(--marca-tenue); color: var(--marca-escura); }
.passos .passo.atual { color: var(--texto); font-weight: 620; }
.passos .passo.atual .bola { background: var(--marca); color: var(--n-900); }
.passos .seta { color: var(--n-300); }

/* ---------------------------------------------------------------- porta -- */
/*
 * A tela de entrada. É a primeira coisa que todo mundo vê — beneficiário, dono
 * de restaurante e equipe do patrocinador — e a única do sistema sem menu, sem
 * dado e sem tarefa. Ganha mais cuidado visual justamente por isso.
 *
 * Duas colunas no monitor, uma no celular. A da esquerda é imagem; a da
 * direita, branca, tem o logo em cima e o formulário no meio.
 */
.porta {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/*
 * Coluna da imagem.
 *
 * Sem foto, o degradê da marca é o estado normal — não é "faltando", é uma
 * capa sóbria. Quando existir app/ds/entrada.jpg, o PHP acrescenta .com-foto e
 * a foto entra por cima, com um véu escuro embaixo para o texto continuar
 * legível seja qual for a imagem.
 */
.porta-capa {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: var(--e-7) var(--e-6);
	background: linear-gradient(155deg, var(--n-900) 0%, #10321a 62%, var(--marca-escura) 100%);
	color: #fff;
}
.porta-capa::after {
	content: ""; position: absolute; right: -34%; bottom: -46%;
	width: 92%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, rgba(87,190,22,.22), transparent 58%);
	pointer-events: none;
}
.porta-capa.com-foto {
	background-image:
		linear-gradient(to top, rgba(10,16,12,.82) 0%, rgba(10,16,12,.30) 45%, rgba(10,16,12,.10) 100%),
		var(--porta-foto);
	background-size: cover; background-position: center;
}
.porta-capa.com-foto::after { content: none; }

.porta-capa .frase {
	position: relative; z-index: 1; margin: 0;
	font-size: 25px; font-weight: 650; line-height: 1.3; letter-spacing: -.022em;
	max-width: 20ch; text-shadow: 0 1px 24px rgba(0,0,0,.35);
}
.porta-capa .apoio {
	position: relative; z-index: 1; margin: var(--e-3) 0 0;
	color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; max-width: 36ch;
}

/*
 * Coluna do formulário: branca, com logo e formulário no mesmo bloco
 * centralizado. O logo preso no topo deixava um vão grande entre ele e o
 * campo; junto, os dois leem como uma coisa só.
 */
.porta-forma {
	background: var(--superficie);
	display: grid; place-items: center;
	padding: var(--e-6) var(--e-5);
}
.porta-forma .caixa { width: 100%; max-width: 344px; }
.porta-forma .topo { display: flex; justify-content: center; margin-bottom: 76px; }
.porta-forma .topo img { height: 32px; width: auto; display: block; }

@media (max-width: 860px) {
	.porta { grid-template-columns: 1fr; min-height: 100dvh; }
	.porta-capa { display: none; }
	.porta-forma { padding: var(--e-6) var(--e-5); }
}

/* -------------------------------------------------------------- destaque -- */
/*
 * O cartão que carrega a ação principal da tela.
 *
 * Existe porque no painel do parceiro havia um número grande (quanto há a
 * faturar) e, separado dele, um botão discreto para agir. Quem abre aquela
 * tela vem fazer uma coisa só — o valor e o botão têm que ser o mesmo objeto.
 *
 * O destaque vem do tamanho, da posição no topo e de ser o único botão cheio
 * da tela — não de enfeite. Listra colorida e cor chapada de fundo ficariam
 * fora do tom do resto, que é sóbrio de propósito.
 */
.destaque {
	background: var(--superficie);
	border: 1px solid var(--borda-tenue);
	border-radius: var(--r-lg);
	box-shadow: var(--sombra);
	padding: var(--e-6) var(--e-7);
	display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap;
}
.destaque .valor {
	font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.destaque .dizer { flex: 1 1 260px; min-width: 0; }
.destaque .dizer .rotulo { margin-bottom: 6px; }
.destaque .acao { flex: none; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.destaque .acao .botao { padding: 12px 26px; font-size: 14.5px; }

/* quando não há nada a fazer, o mesmo cartão fica calmo em vez de sumir */
.destaque.calmo .valor { font-size: 22px; font-weight: 650; color: var(--texto-2); }

@media (max-width: 620px) {
	.destaque { padding: var(--e-5); gap: var(--e-4); }
	.destaque .acao { width: 100%; }
	.destaque .acao .botao { width: 100%; }
}

/*
 * A arte do destaque. Some antes do texto e do botão quando o espaço aperta —
 * ela ajuda a ler o cartão, mas quem resolve o problema são os outros dois.
 */
.destaque .arte { flex: none; color: var(--texto-3); line-height: 0; }
@media (max-width: 760px) { .destaque .arte { display: none; } }

/* ============================================================== carteira == */
/*
 * O front do beneficiário. Celular primeiro — e "primeiro" literalmente: quem
 * usa está no balcão do restaurante, com uma mão, pagando. Daí a barra de
 * navegação embaixo, ao alcance do polegar, e alvos de toque nunca abaixo de
 * 44px.
 */
body.app {
	background: var(--superficie);
	/* espaço para a barra e para a área de gestos do aparelho */
	padding-bottom: calc(76px + env(safe-area-inset-bottom));
	max-width: 560px; margin: 0 auto;
	min-height: 100dvh;
}

.app-topo {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; gap: var(--e-3);
	padding: var(--e-5) var(--e-5) var(--e-4);
	background: var(--superficie);
}
.app-topo h1 { margin: 0; font-size: 21px; font-weight: 680; letter-spacing: -.025em; }
.app-topo .voltar {
	display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px;
	border-radius: 50%; color: var(--texto); flex: none;
}
.app-topo .voltar svg { transform: rotate(180deg); }
.app-topo .voltar:hover { background: var(--n-50); }

.app-corpo { padding: 0 var(--e-5) var(--e-6); }

/* barra de abas */
.app-abas {
	position: fixed; left: 50%; transform: translateX(-50%);
	bottom: calc(12px + env(safe-area-inset-bottom));
	width: calc(100% - 32px); max-width: 528px;
	display: grid; grid-template-columns: repeat(4, 1fr);
	background: var(--superficie);
	border: 1px solid var(--borda-tenue); border-radius: var(--r-pill);
	box-shadow: var(--sombra-2);
	z-index: 30;
}
.app-abas a {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 10px 4px; min-height: 56px; justify-content: center;
	color: var(--texto-3); font-size: 11.5px; font-weight: 560;
}
.app-abas a.ativo { color: var(--marca-escura); }
.app-abas a:focus-visible { outline-offset: -4px; }

/* lançamentos do extrato */
.extrato-dia {
	font-size: 12px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase;
	color: var(--texto-3); margin: var(--e-5) 0 var(--e-2);
}
.extrato-dia:first-child { margin-top: 0; }

.lanc {
	display: flex; align-items: center; gap: var(--e-4);
	padding: var(--e-3) 0; border-bottom: 1px solid var(--borda-tenue);
}
.lanc:last-child { border-bottom: 0; }
.lanc .selo {
	flex: none; width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--n-100); color: var(--texto-2);
	font-size: 13px; font-weight: 650;
}
.lanc .quem { flex: 1; min-width: 0; }
.lanc .tipo { font-size: 12px; color: var(--texto-3); }
.lanc .nome {
	font-size: 15px; font-weight: 600; letter-spacing: -.01em;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lanc .hora { font-size: 12px; color: var(--texto-3); margin-top: 1px; }
.lanc .grana {
	flex: none; font-size: 15px; font-weight: 680; white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* o sinal já diz a direção; a cor confirma sem ser o único indício */
.lanc .grana.entra { color: var(--alta); }
.lanc .grana.sai   { color: var(--texto); }

/* o cartão de uma carteira, na lista do beneficiário */
.cartao-benef {
	border: 1px solid var(--borda); border-radius: var(--r-lg);
	background: var(--superficie); box-shadow: var(--sombra);
	padding: var(--e-5); margin-bottom: var(--e-4);
}
.cartao-benef.inativa { opacity: .6; }
.cartao-benef .cabeca { display: flex; align-items: center; justify-content: space-between; }
.cartao-benef .marca-conta {
	width: 46px; height: 46px; border-radius: var(--r-md);
	display: grid; place-items: center;
	color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
}
.cartao-benef .nome {
	margin-top: var(--e-4); font-size: 17px; font-weight: 680; letter-spacing: -.02em;
}
.cartao-benef .apelido { font-size: 13px; color: var(--texto-3); margin-top: 2px; }
.cartao-benef .rodape {
	margin-top: var(--e-4); display: flex; align-items: flex-end; justify-content: space-between;
}
.cartao-benef .saldo {
	font-size: 26px; font-weight: 700; letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}
.cartao-benef .ko { color: var(--marca); line-height: 0; }

/* início da carteira */
.app-saudacao {
	display: flex; align-items: center; gap: var(--e-3);
	padding: var(--e-5) 0 var(--e-6);
}
.app-saudacao .avatar {
	width: 40px; height: 40px; border-radius: 50%; flex: none;
	display: grid; place-items: center;
	background: var(--n-100); color: var(--texto-2); font-size: 13px; font-weight: 650;
}
.app-saudacao .quem { font-size: 15px; font-weight: 600; }
.app-saudacao .marca { height: 22px; width: auto; margin-left: auto; display: block; }

/*
 * A bolha do saldo. Redonda como no desenho, mas com o valor como texto de
 * verdade — não centralizado no olho: precisa caber "R$ 12.345,67" sem
 * transbordar do círculo.
 */
.saldo-bolha {
	aspect-ratio: 1; width: min(74vw, 268px); margin: 0 auto;
	border-radius: 50%;
	background: var(--marca);
	display: grid; place-content: center; text-align: center; gap: 4px;
	box-shadow: 0 10px 30px rgba(87,190,22,.30);
}
/* preto sobre o verde da marca dá 8,8:1 — o rótulo é o texto pequeno, é ele
   que precisa do contraste bom */
.saldo-bolha .rotulo {
	color: rgba(0,0,0,.78); font-size: 13.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
}
.saldo-bolha .valor {
	color: #fff; font-weight: 760; letter-spacing: -.02em;
	font-size: clamp(26px, 9vw, 40px); line-height: 1.1;
}

.saldo-divisao { display: flex; gap: var(--e-3); justify-content: center; flex-wrap: wrap; margin-top: var(--e-5); }
.saldo-divisao .parte {
	display: flex; flex-direction: column; gap: 2px; align-items: center;
	padding: 10px 16px; border: 1px solid var(--borda); border-radius: var(--r-md);
	color: var(--texto); min-width: 120px;
}
.saldo-divisao .parte:hover { border-color: var(--n-300); background: var(--n-25); }
.saldo-divisao .onde { font-size: 12px; color: var(--texto-3); }
.saldo-divisao .quanto { font-size: 16px; font-weight: 680; font-variant-numeric: tabular-nums; }

.enviar { margin-top: var(--e-7); }
.enviar .rotulo-linha {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 14px; font-weight: 620; color: var(--texto-2); margin-bottom: 10px;
}
/*
 * Centralizado e estreito. A chave é celular com DDD ou CNPJ — 11 a 14
 * dígitos; um campo da largura toda promete um texto longo que nunca vem, e
 * encostado na esquerda ele briga com a bolha, que é o eixo da tela.
 */
.enviar .linha-campo { display: flex; gap: 10px; max-width: 300px; margin: 0 auto; }
.enviar .linha-campo input {
	flex: 1; min-width: 0;
	padding: 14px 16px; font-size: 16px; /* 16px evita o zoom automático do iOS */
	border: 1.5px solid var(--borda); border-radius: var(--r-pill);
	background: var(--superficie); color: var(--texto); font-family: inherit;
}
.enviar .linha-campo input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tenue); }
.enviar .ir {
	flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--marca); color: var(--n-900);
	display: grid; place-items: center;
}
.enviar .ir:hover { background: var(--marca-forte); color: #fff; }

/* lista da aba Mais */
.lista-mais {
	border: 1px solid var(--borda-tenue); border-radius: var(--r-lg);
	overflow: hidden; background: var(--superficie);
}
.lista-mais a {
	display: flex; align-items: center; gap: var(--e-4);
	padding: 15px var(--e-5); min-height: 56px;
	border-bottom: 1px solid var(--borda-tenue); color: var(--texto);
}
.lista-mais a:last-child { border-bottom: 0; }
.lista-mais a:hover { background: var(--n-25); }
.lista-mais .ic { color: var(--texto-3); line-height: 0; flex: none; }
.lista-mais .rot { flex: 1; font-size: 15px; font-weight: 560; }
.lista-mais .seta { color: var(--n-300); line-height: 0; flex: none; }
.lista-mais a.sair .ic, .lista-mais a.sair .rot { color: var(--baixa); }

/* ------------------------------------------------- ocultar os valores -- */
/*
 * O olho de app de banco. Esconde só o dinheiro — nome do estabelecimento,
 * data e tipo do lançamento continuam visíveis, senão a lista perde o sentido
 * e a pessoa precisa reexibir tudo para achar o que procura.
 *
 * Não é segurança contra quem tem o aparelho na mão; é contra o olho de quem
 * está ao lado na fila.
 */
.olho {
	background: none; border: 0; cursor: pointer; padding: 8px; margin: -8px;
	color: var(--texto-3); border-radius: 50%;
	display: grid; place-items: center; line-height: 0;
	min-width: 40px; min-height: 40px;
}
.olho:hover { background: var(--n-50); color: var(--texto-2); }
.olho .quando-oculto { display: none; }
.valores-ocultos .olho .quando-visivel { display: none; }
.valores-ocultos .olho .quando-oculto  { display: grid; }

/*
 * Bolinhas no lugar do número, não borrão: o borrão mantém a silhueta do valor
 * — dá para ver se é de dois ou de quatro dígitos. A bolinha não conta nada.
 *
 * visibility:hidden em vez de display/font-size:0 porque a caixa do valor
 * precisa continuar ocupando o mesmo espaço: se ela encolhe, o "SALDO
 * DISPONÍVEL" sobe e desce a cada toque no olho. O ::after volta a ficar
 * visível e herda cor e tamanho de quem o esconde.
 */
.valores-ocultos .saldo-bolha .valor,
.valores-ocultos .saldo-divisao .quanto,
.valores-ocultos .cartao-benef .saldo,
.valores-ocultos .lanc .grana,
.valores-ocultos .oculta-valor {
	visibility: hidden; position: relative; user-select: none;
}
.valores-ocultos .oculta-valor { display: inline-block; }
.valores-ocultos .saldo-bolha .valor::after,
.valores-ocultos .saldo-divisao .quanto::after,
.valores-ocultos .cartao-benef .saldo::after,
.valores-ocultos .lanc .grana::after,
.valores-ocultos .oculta-valor::after {
	content: "\2022\2022\2022\2022";
	visibility: visible; position: absolute; inset: 0;
	display: grid; place-items: center; letter-spacing: .1em;
}