/* ============================================================================
   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; }

/* ------------------------------------------------------------- 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; } }

/* --------------------------------------------------------------- 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; }

/* -------------------------------------------------------------- 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); }

/* --------------------------------------------------------------- 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; }

/* -------------------------------------------------------------- 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); }

.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; }

/* ----------------------------------------------------------------- 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); }
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; }

/* ------------------------------------------------------------- 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; }

/* --------------------------------------------------------------- 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;
}