/* Identidade Moratta: verde oliva escuro #22372B, creme #F3EEE3, dourado #C2A15E
Tipografia de documento oficial (PLT/POP/INT/REG/MAN): Playfair Display (titulo) + Inter (corpo).
Fonte da regra: 03 Projects/moratta-gastronomia/identidade-visual/aplicacao-identidade-visual-documentos-oficiais.md
Fontes servidas localmente, nunca por CDN: o CSS do Google bloqueia a renderizacao
e entrega o IP do morador a um terceiro. Os dois arquivos sao variaveis, um por familia.
Inter - SIL Open Font License 1.1, Copyright 2020 The Inter Project Authors
Playfair - SIL Open Font License 1.1, Copyright 2017 The Playfair Display Project Authors,
with Reserved Font Name "Playfair Display"
Texto integral das duas licencas em assets/fonts/OFL-*.txt */
@font-face{
font-family:'Inter';
src:url('/assets/fonts/inter-var-6585.woff2') format('woff2');
font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Playfair Display';
src:url('/assets/fonts/playfair-var-6da2.woff2') format('woff2');
font-weight:500 700; font-style:normal; font-display:swap;
}
/* Fallback calibrado, uma face por peso. O line-height do portal e numerico (1.5),
entao o que desloca o layout e a LARGURA do texto, nao a metrica vertical: o
size-adjust sai da razao entre a largura da mesma frase nas duas fontes, medida
em canvas a 100px. Sem declarar o peso, uma face so cobre 400 e o navegador
sintetiza o negrito do corte regular, o que erra a largura em 14%.
ascent/descent-override escalados pelo mesmo fator, para o baseline nao andar. */
@font-face{ font-family:'Inter Fallback'; font-weight:400;
src:local('Arial'), local('Helvetica'), local('Liberation Sans');
size-adjust:106.7%; ascent-override:90.9%; descent-override:22.5%; line-gap-override:0%; }
@font-face{ font-family:'Inter Fallback'; font-weight:600 700;
src:local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold');
size-adjust:101.9%; ascent-override:95.2%; descent-override:23.5%; line-gap-override:0%; }
@font-face{ font-family:'Playfair Fallback'; font-weight:500;
src:local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust:102.1%; ascent-override:105.8%; descent-override:24.5%; line-gap-override:0%; }
@font-face{ font-family:'Playfair Fallback'; font-weight:600;
src:local('Georgia Bold'), local('Times New Roman Bold'), local('Liberation Serif Bold');
size-adjust:88.3%; ascent-override:122.3%; descent-override:28.3%; line-gap-override:0%; }
@font-face{ font-family:'Playfair Fallback'; font-weight:700;
src:local('Georgia Bold'), local('Times New Roman Bold'), local('Liberation Serif Bold');
size-adjust:89.0%; ascent-override:121.4%; descent-override:28.1%; line-gap-override:0%; }
@font-face{
font-family:'Playfair Fallback';
src:local('Georgia'), local('Times New Roman'), local('Liberation Serif');
size-adjust:89.0%; ascent-override:121.4%; descent-override:28.1%; line-gap-override:0%;
}
:root{
/* ---- Camada 1: tintas. Unico lugar do arquivo com valor hexadecimal. ----
As oito primeiras sao a paleta de documento oficial da Moratta, documentada em
identidade-visual/aplicacao-identidade-visual-documentos-oficiais.md no vault.
Verde Oliva Escuro e Dourado sao cores de MARCA, nao invencao do padrao de documento. */
--moratta-verde-oliva:#22372B; /* Verde Oliva Escuro, cor de marca */
--moratta-creme:#F3EEE3;
--moratta-areia:#EAE2CE;
--moratta-dourado:#C2A15E; /* Dourado, cor de marca */
--moratta-oliva:#8f9d81;
--moratta-terracota:#CC6B49; /* Terracota Suave, cor de apoio */
--moratta-marrom:#8a7d5e;
--moratta-linha:#ded4bd;
/* Estas cinco NAO estao na paleta documentada: nasceram aqui no portal.
Se a marca publicar valores oficiais para estes papeis, e aqui que se troca. */
--local-branco:#ffffff; /* fundo de cartao, tabela e indicador */
--local-verde-hover:#2c4636; /* botao pressionavel, so no hover */
--local-pedra:#cfc7b4; /* etiqueta de lote encerrado */
--local-terracota-fraca:#f6e2db; /* fundo do aviso de erro */
--local-oliva-fraca:#e6ebe1; /* fundo do aviso de sucesso */
--local-verde-mov:#4e623e; /* Verde Sage #87A96B a 58%: 6,69:1 no branco, 5,18:1 na areia */
--local-vermelho-mov:#934d35; /* Terracota Suave escurecido ate passar em contraste */
/* ---- Camada 2: papel na interface. Toda regra deste arquivo usa SO estes. ----
Definidos em pares superficie/conteudo: o token base e o fundo, o -foreground e a
cor de texto e de icone validada para ficar sobre ele. Convencao do shadcn/ui.
A razao ao lado de cada par foi medida em 30/08/2026, nao conferida no olho.
Validar aqui, uma vez, torna impossivel a combinacao errada la na frente. */
--background:var(--moratta-creme); --foreground:var(--moratta-verde-oliva); /* 11,00:1 ok */
--card:var(--local-branco); --card-foreground:var(--moratta-verde-oliva); /* 12,73:1 ok */
--primary:var(--moratta-verde-oliva); --primary-foreground:var(--moratta-creme); /* 11,00:1 ok */
--primary-hover:var(--local-verde-hover); /* 8,91:1 ok */
--accent:var(--moratta-dourado); --accent-foreground:var(--moratta-verde-oliva); /* 5,19:1 ok */
--neutral:var(--local-pedra); --neutral-foreground:var(--moratta-verde-oliva);/* 7,57:1 ok */
/* Os quatro pares abaixo reprovam no minimo de 4,5:1 e ficam assim POR DECISAO
do Gabriel em 30/08/2026: sao a paleta Moratta, e trocar a tinta diverge do
padrao de documento. Revisao adiada, nao esquecida. Nao reabrir sem decisao nova. */
--muted:var(--moratta-areia); --muted-foreground:var(--moratta-marrom); /* 3,51:1 sobre background · 4,06:1 sobre card · 3,14:1 sobre muted REPROVA */
--success:var(--moratta-oliva); --success-foreground:var(--local-branco); /* 2,87:1 REPROVA */
--destructive:var(--moratta-terracota); --destructive-foreground:var(--local-branco); /* 3,64:1 REPROVA */
/* Fundos fracos de aviso: o texto sobre eles e o --foreground, nao um -foreground proprio */
--success-subtle:var(--local-oliva-fraca); /* 10,51:1 ok */
--destructive-subtle:var(--local-terracota-fraca); /* 10,20:1 ok */
--border:var(--moratta-linha); /* divisor decorativo: o minimo de 3:1 vale para componente de interface, nao para ornamento */
--input:var(--moratta-marrom); /* contorno de campo, que E componente de interface: 4,06:1 ok */
--entrada:var(--local-verde-mov); /* + no extrato: 6,69:1 no branco, 5,18:1 na areia */
--saida:var(--local-vermelho-mov); /* - no extrato: Terracota a 72% 6,26:1 no branco, 4,85:1 na areia */
--ring:var(--moratta-verde-oliva);
--radius:8px; --radius-sm:6px; --radius-lg:10px; --radius-pill:20px;
--fonte-corpo:'Inter','Inter Fallback',sans-serif;
--fonte-titulo:'Playfair Display','Playfair Fallback',Georgia,serif;
/* ---- Cores de grafico ----
A paleta de documento e terrosa de proposito, e por isso reprova como paleta
categorica: o verde oliva e o dourado ficam abaixo do piso de croma e leem como
cinza em marca pequena. Estes dois sao o MESMO verde e o MESMO dourado da marca
com saturacao suficiente, e so existem no grafico. Validados em 13/09/2026 com
o validador da skill de visualizacao, sobre o branco do cartao: faixa de
luminosidade, piso de croma, separacao para daltonismo (protan 10,1) e
contraste, todos aprovados. Verde e sempre o que ENTROU; dourado, o que foi
CONSUMIDO, em qualquer grafico do painel. */
--local-grafico-verde:#2b7a4f;
--local-grafico-dourado:#b8862f;
--serie-entrada:var(--local-grafico-verde);
--serie-consumo:var(--local-grafico-dourado);
}
/* ---- Tema escuro · so o backoffice liga ----
Os MESMOS tokens de papel, redefinidos. Nenhuma regra do arquivo muda: todas ja
usam so a camada 2, conferido em 13/09/2026 (zero tinta de camada 1 e zero hex
fora do :root). E a convencao do shadcn/ui, que sobrescreve os tokens dentro de
.dark em vez de escrever regra nova por componente.
O fundo e o verde oliva da marca escurecido, e nao preto: preto sobre creme
parece outra empresa. Texto e botao primario sao o creme da marca; o dourado vira
o anel de foco, que no tema claro reprova sobre toda superficie clara.
Razoes medidas em 13/09/2026 pela formula WCAG, cada par contra a superficie onde
aparece. Os quatro pares que reprovam no tema claro por decisao de marca (texto
secundario, etiqueta de ativo e de vencimento) PASSAM aqui, porque no escuro nao
houve paleta anterior a respeitar. */
:root[data-tema="escuro"]{
color-scheme:dark;
--local-escuro-fundo:#141E18;
--local-escuro-cartao:#1B2821;
--local-escuro-campo:#25352B;
--local-escuro-linha:#34473A;
--local-escuro-pedra:#4A5A4F;
--local-escuro-texto2:#BDB49D;
--local-escuro-oliva:#9DB08A;
--local-escuro-terracota:#E0876A;
--local-escuro-oliva-fraca:#213428;
--local-escuro-terracota-fraca:#3B2620;
--local-escuro-borda-campo:#8A8069;
--local-escuro-verde-mov:#9FC28A;
--local-escuro-vermelho-mov:#E79A7F;
--background:var(--local-escuro-fundo); --foreground:var(--moratta-creme); /* 14,77:1 ok */
--card:var(--local-escuro-cartao); --card-foreground:var(--moratta-creme); /* 13,23:1 ok */
--primary:var(--moratta-creme); --primary-foreground:var(--moratta-verde-oliva); /* 11,00:1 ok */
--primary-hover:var(--moratta-areia); /* 9,86:1 ok */
--accent:var(--moratta-dourado); --accent-foreground:var(--local-escuro-fundo); /* 6,96:1 ok · 6,23:1 no cartao */
--neutral:var(--local-escuro-pedra); --neutral-foreground:var(--moratta-creme); /* 6,33:1 ok */
--muted:var(--local-escuro-campo); --muted-foreground:var(--local-escuro-texto2); /* 7,42 cartao · 8,28 fundo · 6,27 campo */
--success:var(--local-escuro-oliva); --success-foreground:var(--local-escuro-fundo); /* 7,33:1 ok */
--destructive:var(--local-escuro-terracota); --destructive-foreground:var(--local-escuro-fundo); /* 6,38:1 ok */
--success-subtle:var(--local-escuro-oliva-fraca); /* 11,44:1 ok */
--destructive-subtle:var(--local-escuro-terracota-fraca); /* 12,23:1 ok */
--border:var(--local-escuro-linha); /* 1,54:1 linha recessiva */
--input:var(--local-escuro-borda-campo); /* 3,92:1 ok, nao texto */
--entrada:var(--local-escuro-verde-mov); /* 7,69:1 ok */
--saida:var(--local-escuro-vermelho-mov); /* 6,80:1 ok */
--ring:var(--moratta-dourado); /* 6,23 cartao · 6,96 fundo */
/* Grafico no escuro: passos proprios, validados contra o cartao escuro, e nao
os do claro invertidos. Todas as checagens aprovadas, protan 9,5. */
--local-grafico-verde:#2a8155;
--local-grafico-dourado:#be892d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--background);color:var(--foreground);
font-family:var(--fonte-corpo);font-size:16px;line-height:1.5}
/* 14px de respiro, o mesmo do .topo-centro: as duas barras, a da entrada e a do
portal, ficam com 68px e a passagem de uma para a outra nao pula. */
.topo{background:var(--primary);color:var(--primary-foreground);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.marca{display:flex;align-items:center}
/* Logo servido como MASCARA, nao como . SVG carregado por e documento
isolado e nao herda currentColor, entao sairia preto sobre o verde. Como mascara,
o arquivo vira recorte e a cor vem do background-color: um arquivo so, cacheavel,
servindo o cabecalho escuro e o fundo claro.
O nome do arquivo carrega o hash do conteudo, que e o que torna seguro o
Cache-Control immutable do .htaccess.
Marca de uma linha desde 15/09/2026, a que o empreendimento usa hoje: a caixa
passou de 1860x838 para 1150x361, proporcao 3,184. O arquivo e a versao preta
do lockup, nao a currentColor: SVG em mask e documento isolado, e preto opaco
deixa o recorte explicito em vez de depender do valor inicial de color.
115px de LARGURA e o que preserva a legibilidade da assinatura, nao os 52px de
altura de antes: o bloco "by MORATTA GASTRONOMIA" e a mesma peca ancorada em
1150, entao o tamanho dele na tela sai da largura do logo e nao da altura.
Medido nos dois arquivos renderizados a 1150px: assinatura de 33px no antigo e
34px no novo. Mantendo a largura, a altura cai para 36px. */
.logo-garden{-webkit-mask:url("/assets/marca/the-garden-3236.svg") no-repeat center/contain;
mask:url("/assets/marca/the-garden-3236.svg") no-repeat center/contain;
background-color:currentColor;display:block;flex:0 0 auto;height:36px;width:115px}
/* Marca-mae, so na barra da tela de entrada. Recortada do "Ativo de Marca 02" do
conjunto oficial (a versao limpa, sem as ondas), que vinha numa tela de 9375px
com o desenho perdido no meio: recortado no bbox e reduzido a 1200px de largura.
Vale como mascara pelo mesmo motivo do The Garden: o PNG e off-white sobre
transparencia, entao o que a mascara usa e o canal alfa, e a cor vem do CSS.
40px e onde "GASTRONOMIA" ainda se le. Medido em 30, 40 e 52px; a variante com
as ondas so funciona a partir de 52 e ali competiria com o The Garden acima. */
.logo-moratta{-webkit-mask:url("/assets/marca/moratta-c1fe.png") no-repeat center/contain;
mask:url("/assets/marca/moratta-c1fe.png") no-repeat center/contain;
background-color:currentColor;display:block;flex:0 0 auto;height:40px;width:169px}
.topo-centro{justify-content:center;padding:14px 20px}
/* The Garden acima do cartao de entrada: ali ele e o assunto da tela, nao um
acessorio. O logo tem tamanho proprio e nao acompanha mais a largura do cartao. Acompanhando,
ele saia com 384px na entrada e 600px no cadastro, 56% maior, e as duas telas da
mesma marca pareciam de projetos diferentes quando vistas uma depois da outra.
384px e a medida da entrada, que e a tela que o morador ve primeiro. */
.entrada-marca{display:block;width:100%;max-width:384px;aspect-ratio:1150/361;height:auto;
margin:0 auto 24px;color:var(--primary)}
/* logo de um lado, acoes do outro. O space-between vive na declaracao base do .topo
la em cima: aqui embaixo ele venceria o .topo-centro da tela de entrada por ordem
de arquivo, e a marca voltaria para a esquerda. */
.topo nav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.topo .acoes{display:flex;align-items:center;gap:14px;margin-left:auto}
.topo .acoes nav{margin-left:0}
.topo nav a{color:var(--primary-foreground);text-decoration:none;font-size:14px;opacity:.85;border-bottom:1px solid transparent;padding-bottom:2px}
.topo nav a:hover{opacity:1;border-color:var(--accent)}
.topo .sair{color:var(--accent);flex:0 0 auto}
main{max-width:960px;margin:0 auto;padding:24px 20px 60px}
h1{font-family:var(--fonte-titulo);font-weight:700;font-size:26px;letter-spacing:.5px;margin:8px 0 4px}
h2{font-family:var(--fonte-titulo);font-weight:600;font-size:19px;margin:26px 0 8px;letter-spacing:.3px}
.sub{color:var(--muted-foreground);margin:0 0 18px;font-size:14px}
footer{border-top:1px solid var(--border);color:var(--muted-foreground);font-size:12px;text-align:center;padding:16px}
.cartao{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:0 0 16px}
.saldo{background:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-lg);padding:24px;margin-bottom:18px}
/* a margem de baixo do ultimo paragrafo nao colapsa contra o padding do cartao:
somava 13px aos 24, e o vazio embaixo do valor ficava maior que o de cima */
.saldo>:last-child{margin-bottom:0}
.saldo .rotulo{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.saldo .valor{font-family:var(--fonte-titulo);font-weight:500;font-size:40px;line-height:1.1;margin-top:6px}
.saldo .nota{font-size:13px;opacity:.8;margin-top:8px}
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card)}
/* Conteudo e titulos de coluna centralizados. Duas excecoes, e as duas tem motivo:
.num continua a direita, porque valor alinhado pela virgula e o que permite
comparar um com o outro de relance; e .esq fica a esquerda onde a celula carrega
uma etiqueta ao lado do dado, que empurraria o dado para fora do centro. */
th{background:var(--primary);color:var(--primary-foreground);text-align:center;padding:8px 10px;font-weight:600;font-size:13px}
td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:center}
th.esq,td.esq{text-align:left}
/* titulo de coluna sempre centralizado, inclusive o das colunas de dinheiro: o
numero continua a direita, mas o rotulo centraliza sobre a coluna */
/* O titulo da coluna de dinheiro centraliza sobre a CAIXA do valor, nao sobre a
celula: a caixa vai de ponta a ponta com o R$ na esquerda e o numero na direita,
e o padding da celula desloca o centro dela. Com a mesma caixa flex no
, o
rotulo assenta exatamente sobre o conteudo que ele nomeia. */
th.num{text-align:center;padding:0}
th.num>span{display:flex;width:100%;align-items:center;justify-content:center;
padding:8px 10px;box-sizing:border-box}
/* entrada e saida no extrato. Verde e vermelho derivados da propria paleta, nao
cores de semaforo genericas: Verde Sage a 64% e Terracota Suave a 72%, os dois
escurecidos ate passar em contraste sobre o branco E sobre a faixa areia. */
/* ---- Dinheiro empilhado ----
O simbolo ancora na esquerda da celula e o numero na direita, entao numa coluna
os R$ ficam todos na mesma vertical e os valores tambem. Com "R$ 100,00" e
"R$ 57,50" numa string so, alinhar a direita casa os numeros e faz o R$ dancar.
O tabular-nums e o espaco entre digitos existem para o empilhamento: sem eles,
unidade, dezena e centena nao se distinguem de uma linha para a outra. */
/* A caixa ocupa a CELULA INTEIRA, nao um minimo. Com min-width, "R$ 100,00"
estourava a largura e "R$ 57,50" nao, entao as caixas ficavam de tamanhos
diferentes e o R$ dancava de linha para linha. Ocupando a celula, todas as
caixas da coluna tem a mesma largura: o R$ ancora na esquerda e o valor na
direita, e os dois alinham verticalmente sozinhos. */
/* Tres colunas de largura previsivel: sinal, simbolo e numero. O sinal reserva o
proprio espaco mesmo quando esta vazio, entao "+ R$ 118,00" e "R$ 257,50"
alinham o R$ na mesma vertical. O numero cresce para a esquerda a partir da
direita, entao unidade, dezena e centena tambem se empilham. */
.mo{display:flex;width:100%;max-width:132px;margin-left:auto;align-items:baseline;
gap:5px;font-variant-numeric:tabular-nums}
.mo-sinal{flex:0 0 9px;text-align:right}
.mo-s{flex:0 0 auto;opacity:.72;font-size:.92em}
.mo-v{flex:1 1 auto;text-align:right;letter-spacing:.055em}
.cartao-mobile .mo{width:auto;gap:6px}
td.entrada{color:var(--entrada);font-weight:600}
td.saida{color:var(--saida);font-weight:600}
/* Larguras de coluna da tabela de creditos: sem isso o navegador aperta as duas
primeiras e sobra folga nas de dinheiro. */
.t-creditos{table-layout:fixed}
/* A etiqueta de vencimento tem COLUNA PROPRIA. Dentro da celula da data ela
empurrava a data e as datas deixavam de empilhar uma sobre a outra; posicionada
por cima, cobria a data, porque a coluna nao tem largura para as duas coisas.
Numa coluna so dela, a data centraliza limpa e a etiqueta fica ao lado. */
.t-creditos th:nth-child(1),.t-creditos td:nth-child(1){width:16%}
.t-creditos th:nth-child(2),.t-creditos td:nth-child(2){width:18%}
.t-creditos th:nth-child(3),.t-creditos td:nth-child(3){width:19%}
.t-creditos th:nth-child(4),.t-creditos td:nth-child(4){width:13%;padding-left:0;padding-right:0}
.t-creditos th:nth-child(5),.t-creditos td:nth-child(5){width:15%}
.t-creditos th:nth-child(6),.t-creditos td:nth-child(6){width:16%}
.col-aviso{text-align:left}
/* Extrato: a descricao leva a folga, as datas e o dinheiro tem largura propria. */
.t-extrato{table-layout:fixed}
/* As colunas de dinheiro sao estreitas de proposito: com a caixa ocupando a celula
inteira, coluna larga afasta o R$ do numero e "+ R$ 118,00" deixa de ler
como um valor so. O alinhamento vertical se mantem; o que muda e a distancia. */
.t-extrato th:nth-child(1),.t-extrato td:nth-child(1){width:24%}
.t-extrato th:nth-child(3),.t-extrato td:nth-child(3){width:15%}
.t-extrato th:nth-child(4),.t-extrato td:nth-child(4){width:16%}
tr:nth-child(even) td{background:var(--muted)}
/* A tabela ja estava dentro de um contêiner com overflow-x:auto, mas table{width:100%}
impedia que ela passasse da largura dele, entao a rolagem nunca disparava e as
celulas quebravam. Medido a 390px: os creditos pedem 541px e o extrato 685px.
max-content evita numero magico e se ajusta ao conteudo real. */
.tabela-rolavel{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.tabela-rolavel table{min-width:max-content}
/* A regiao rolavel e alcancavel por teclado (tabindex no markup) e o anel de foco
nao pode ficar escondido pelo overflow. */
.tabela-rolavel:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
label{display:block;font-size:13px;color:var(--muted-foreground);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.5px}
input,select{width:100%;padding:11px 12px;border:1px solid var(--input);border-radius:var(--radius-sm);font-size:16px;background:var(--card);color:var(--card-foreground)}
/* Foco de teclado. Medido em 30/08/2026: o dourado reprova em toda superficie
clara (2,46:1 sobre o branco, 2,12:1 sobre o creme, 1,90:1 sobre a areia),
abaixo do minimo de 3:1 para elemento de interface, e so passa sobre o verde
(5,19:1), que e onde ele nao estava sendo usado. O verde da marca passa em tudo
que e claro (12,7 / 11,0 / 9,9) e o creme passa sobre o verde (11,0).
Botao e link nao tinham regra nenhuma: ficavam com o outline padrao do
navegador, invisivel sobre o cabeçalho verde. Nenhum hex novo entra. */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
.topo a:focus-visible,.saldo a:focus-visible{outline-color:var(--primary-foreground)}
input:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
/* O botao dimensiona pelo conteudo. Largura total e padrao de celular: num cartao
de 918px, "Filtrar" atravessando a tela inteira nao e enfase, e desequilibrio. */
button{margin-top:18px;width:auto;min-width:200px;padding:13px 28px;border:0;border-radius:var(--radius-sm);
background:linear-gradient(to bottom, var(--primary), color-mix(in srgb, var(--primary) 82%, var(--card)));
color:var(--primary-foreground);font-size:15px;letter-spacing:.5px;cursor:pointer;
transition:background .18s}
/* Onde o proprio contêiner ja e estreito, ocupar tudo e o certo: o formulario de
login tem 420px e cada coluna de acao da ficha do lote tem 240px. */
form.estreito button,.linha-campos button{width:100%}
button:hover{background:linear-gradient(to bottom, var(--primary-hover), color-mix(in srgb, var(--primary) 90%, var(--card)))}
button.secundario{background:transparent;color:var(--primary);border:1px solid var(--primary)}
form.estreito{max-width:420px}
/* Os campos alinham pela BASE, nao pelo topo.
Antes era so flex com wrap, e a altura de cada coluna dependia do rotulo dela:
"CPF de quem esta transferindo" quebrava em duas linhas e empurrava o proprio
campo um degrau para baixo dos vizinhos, desenquadrando a linha inteira. Pendurar
o campo no fim da coluna resolve na estrutura, e nao encurtando rotulo: rotulo
volta a crescer na proxima tela, e em 400px todos eles quebram. */
.linha-campos{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.linha-campos>div{flex:1 1 200px;display:flex;flex-direction:column;min-width:0}
.linha-campos>div>label{flex:0 0 auto}
.linha-campos>div>.campo-ico{margin-top:auto}
/* Busca do caixa: campo e botao na mesma linha.
O Buscar estava centralizado embaixo, dentro de .acoes-form, e abria uma faixa
morta de cada lado do cartao. Ao lado do campo ele fecha o bloco em uma linha so
e a ficha do lote sobe para dentro da primeira tela do balcao.
As duas caixas ficam em 52px, que e a altura de botao pill do resto do sistema:
o input cresce ate ela em vez de o botao encolher, para nao criar um segundo
tamanho de botao. */
.busca-linha{display:flex;align-items:stretch;gap:12px}
.busca-linha .campo-ico{flex:1 1 auto;margin-bottom:0;min-width:0}
.busca-linha .campo-ico input{height:52px;padding-top:0;padding-bottom:0}
.busca-linha .btn-pill{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
margin:0;height:52px;width:172px;min-width:0;padding:0 22px;
border:2px solid transparent;border-radius:26px;cursor:pointer;
font-family:var(--fonte-corpo);font-size:15px;font-weight:600;letter-spacing:0;
background:linear-gradient(to bottom, var(--primary), color-mix(in srgb, var(--primary) 82%, var(--card)));
color:var(--primary-foreground);transition:background .18s}
.busca-linha .btn-pill:hover{background:linear-gradient(to bottom, var(--primary-hover),
color-mix(in srgb, var(--primary) 90%, var(--card)))}
/* No celular o botao passa a ocupar a linha inteira embaixo: lado a lado, os dois
ficariam estreitos demais para o dedo e o placeholder do lote sumiria. */
@media (max-width:560px){
.busca-linha{flex-wrap:wrap}
.busca-linha .campo-ico{flex:1 1 100%}
.busca-linha .btn-pill{width:100%}
}
/* O select usa a mesma caixa dos inputs com icone. A regra existente so alcancava
input, entao ele nascia branco e sem o recuo do icone.
O appearance:none e o que conserta de verdade: sem ele o seletor nativo do macOS
ignora o padding-esquerdo e escreve o texto POR CIMA do icone, e ainda desenha a
propria seta dupla, que nao pertence a familia Phosphor. */
.campo-ico select{appearance:none;-webkit-appearance:none;
background:var(--muted);border-color:transparent;
padding-left:40px;padding-right:38px;cursor:pointer}
.campo-ico select:focus-visible{border-color:var(--ring)}
/* A seta e um