@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
/* /Components/Layout/CookiesBanner.razor.rz.scp.css */
/* Banner de consentimento de cookies (LGPD), leva 60. Mesma caixa visual
do (roxo escuro, cantos, sombra) — a posição na
tela (fixed, embaixo) é do wrapper ".banners-flutuantes" em
MainLayout.razor.css, que empilha este banner com o de instalar app
quando os dois aparecem juntos. */
.cookies-banner[b-9mn1cpby9o] {
display: flex;
align-items: center;
gap: var(--espaco-3);
flex-wrap: wrap;
background-color: var(--ep-roxo-escuro);
border-radius: var(--canto-card);
padding: var(--espaco-3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.cookies-texto[b-9mn1cpby9o] {
flex: 1;
min-width: 200px;
font-family: var(--fonte-corpo);
font-weight: normal;
font-size: var(--legenda-2);
color: var(--ep-branco);
margin: 0;
}
.cookies-botoes[b-9mn1cpby9o] {
display: flex;
gap: var(--espaco-2);
flex-shrink: 0;
}
.cookies-botao-aceitar[b-9mn1cpby9o] {
height: 36px;
padding: 0 var(--espaco-4);
background-color: var(--ep-verde);
color: var(--ep-roxo-escuro);
border: none;
border-radius: var(--canto-botao);
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
cursor: pointer;
white-space: nowrap;
}
.cookies-botao-recusar[b-9mn1cpby9o] {
height: 36px;
padding: 0 var(--espaco-4);
background-color: transparent;
color: var(--ep-branco);
border: 1px solid var(--ep-branco);
border-radius: var(--canto-botao);
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
cursor: pointer;
white-space: nowrap;
}
/* /Components/Layout/Header.razor.rz.scp.css */
.page[b-9cydjgcipl] {
position: relative;
display: flex;
flex-direction: column;
}
main[b-9cydjgcipl] {
flex: 1;
}
.sidebar[b-9cydjgcipl] {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, var(--ep-roxo-quase-preto) 70%);
}
.top-row[b-9cydjgcipl] {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.8rem;
display: flex;
align-items: center;
}
.top-row[b-9cydjgcipl] a, .top-row[b-9cydjgcipl] .btn-link {
white-space: nowrap;
margin-left: 1.5rem;
text-decoration: none;
}
.top-row[b-9cydjgcipl] a:hover, .top-row[b-9cydjgcipl] .btn-link:hover {
text-decoration: underline;
}
.top-row[b-9cydjgcipl] a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row[b-9cydjgcipl] {
justify-content: space-between;
}
.top-row[b-9cydjgcipl] a, .top-row[b-9cydjgcipl] .btn-link {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page[b-9cydjgcipl] {
flex-direction: row;
}
.sidebar[b-9cydjgcipl] {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row[b-9cydjgcipl] {
position: sticky;
top: 0;
z-index: 1;
}
.top-row.auth[b-9cydjgcipl] a:first-child {
flex: 1;
text-align: right;
width: 0;
}
.top-row[b-9cydjgcipl], article[b-9cydjgcipl] {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}
#blazor-error-ui[b-9cydjgcipl] {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss[b-9cydjgcipl] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* ============================================================================
BARRA DE NAVEGAÇÃO — NOVO VISUAL (leva 5, 2026)
----------------------------------------------------------------------------
Todos os números saíram de medição na Home do Figma, comparando o arquivo
de componentes (1x) com a tela (2x). A altura de 62px bateu igual nos dois,
o que confirma a escala.
Celular (390) Computador (1440)
Largura da barra 310 1216
Margem lateral 40 110
Distância do topo 59 24
Altura 62 62
O QUE MUDOU EM RELAÇÃO AO ANTIGO: o cabeçalho era uma faixa verde de
ponta a ponta, com 80px de altura. Agora é uma PÍLULA FLUTUANTE de 62px,
com margem em volta. Toda tela do site vai ter o topo um pouco diferente —
é esperado, e é justamente o que esta leva serve para você conferir.
========================================================================== */
/* A área em volta da barra. É ela que segura as margens e a área segura
do notch; a pílula em si só se preocupa com o próprio conteúdo. */
.ep-navbar-area[b-9cydjgcipl] {
/* ====================================================================
BARRA FIXA — 2ª tentativa, 28/07/2026 (leva 5c-c)
A PRIMEIRA TENTATIVA USOU "sticky" E NÃO FUNCIONOU. Vale registrar
por quê, porque a lição serve para o resto do projeto.
O "sticky" é o modo educado de fixar: a barra continua ocupando
lugar na página e só "gruda" quando você rola. É mais simples e não
mexe no layout de ninguém — por isso foi a primeira escolha.
Só que o "sticky" depende do que está ACIMA dele na árvore da
página. Se qualquer bloco que contém a barra tiver recorte de
conteúdo, ela deixa de grudar — sem erro, sem aviso, simplesmente
rola embora. Li todo o CSS do site atrás desse recorte e não achei;
mas o navegador mostrou que ele existe em algum lugar que não dá
para ver por leitura. (Foi o mesmo tipo de impasse da pendência 12
do briefing.)
O "fixed" abaixo NÃO tem essa dependência: ele se prende à janela,
e nada acima dele pode impedir isso.
O PREÇO DO "fixed": a barra deixa de ocupar lugar na página, e o
conteúdo das 41 telas subiria uns 100px, ficando escondido atrás
dela. Por isso existe o ".ep-navbar-espaco" mais abaixo — um bloco
invisível com a altura exata da barra, que guarda o lugar que ela
deixou. Resultado final igual ao do "sticky", só que sem depender
de ninguém.
POR QUE O DESFOQUE TAMBÉM PARECIA QUEBRADO: era o mesmo problema.
Com a barra rolando embora, ela saía da tela — e não dá para ver o
desfoque de uma coisa que não está mais à vista.
==================================================================== */
position: fixed;
top: 0;
left: 0;
right: 0;
/* ORDEM DE EMPILHAMENTO — quem fica na frente de quem.
30 não é um número escolhido no chute. As imagens de produto do
carrossel da Home estão em 10; se a barra ficasse abaixo disso, os
produtos passariam POR CIMA da pílula ao rolar. Os menus laterais
estão em 1000, então continuam cobrindo a barra quando abrem — que
é o comportamento de hoje.
(Os dois menus do visitante estavam em 10 e 20, abaixo da barra.
Subi os dois para 1000 no SidebarAnonymous.razor.css, para ficarem
iguais aos do cliente logado. Está explicado lá.) */
z-index: 30;
/* O DESFOQUE ATRÁS DA PÍLULA — refeito em 28/07/2026 (primeiro teste).
POR QUE EXISTE: rolando, o conteúdo da página passa pelas folgas em
volta da pílula (40px de cada lado, 24px embaixo). Sem tratamento,
dá para ver produto e texto deslizando ali.
O QUE ESTAVA ERRADO NA PRIMEIRA TENTATIVA: o desfoque ficava ligado
SEMPRE, mesmo com a página parada no topo. Aí ele borrava a divisa
entre o fundo branco da página e o bloco roxo da tela — foi o
"quadrado" com transição dura que você viu no print. Além disso, o
desfoque corta rente na borda do elemento, o que deixa uma emenda
visível.
DUAS CORREÇÕES:
1. Parado no topo, o desfoque é ZERO — a tela fica idêntica à leva
5b. Ele só aparece quando a página sai do topo, e entra e sai
suavemente (é o transition abaixo). Quem avisa "saiu do topo" é
o arquivo wwwroot/js/barra.js, que põe a marca "ep-rolando" na
página. A regra que liga o desfoque está logo depois deste bloco.
2. A emenda dura sumiu: a máscara abaixo faz o desfoque se dissolver
nos últimos 24px, que é exatamente a folga entre a pílula e o
conteúdo. A pílula em si não é tocada — ela termina onde a
dissolução começa.
SE AINDA ACHAR FORTE: baixe o 10px da regra .ep-rolando. Se achar
fraco, suba. */
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
transition: backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
padding-left: var(--margem-lateral); /* 40px no celular */
padding-right: var(--margem-lateral);
/* DISTÂNCIA DO TOPO NO CELULAR — 59px no desenho.
Esse 59 não é um número solto: é exatamente a altura da Ilha
Dinâmica / notch. Você desenhou a barra respeitando a área segura.
Por isso aqui não uso 59 fixo, e sim o valor que o próprio aparelho
informa:
· site instalado como app num iPhone com Ilha Dinâmica -> 59px
· site instalado num iPhone com notch ................. -> 47px
· site aberto no navegador normal ..................... -> 0px,
e aí vale o mínimo de 16px, senão a barra encostaria no topo.
IMPORTANTE: isso só funciona porque o App.razor ganhou o
"viewport-fit=cover" nesta mesma leva. Sem ele, o aparelho responde
zero e a barra sobe para os 16px mesmo instalado. */
padding-top: max(16px, env(safe-area-inset-top, 0px));
padding-bottom: var(--espaco-4); /* 24px até o conteúdo */
}
/* DESFOQUE LIGADO — só quando a página saiu do topo.
A marca "ep-rolando" é posta e tirada pelo wwwroot/js/barra.js. Com a
página parada no topo ela não existe, esta regra não vale, e a barra
fica sem desfoque nenhum — igualzinha à leva 5b.
Detalhe do Blazor, para quem for mexer: o CSS deste arquivo só vale
para o que está escrito no Header.razor. Escrever "body.ep-rolando"
antes do nome funciona porque o carimbo do Blazor cai no ÚLTIMO
elemento do endereço, que continua sendo a barra. */
/* O BLOCO QUE GUARDA O LUGAR DA BARRA.
Como a barra agora é "fixed", ela não ocupa mais espaço na página. Este
bloco invisível fica no lugar dela, com a MESMA altura, para que o
conteúdo de todas as telas continue começando exatamente onde começava.
A conta é a soma das três partes da barra, na ordem:
folga do topo (o notch, ou 16px no navegador comum)
+ altura da pílula (62px, medida no Figma)
+ folga até o conteúdo (24px)
SE O CONTEÚDO ENCOSTAR NA BARRA OU SOBRAR UM VÃO: é este número que
está fora de sintonia com o padding da .ep-navbar-area, algumas linhas
acima. Os dois têm que andar juntos. */
.ep-navbar-espaco[b-9cydjgcipl] {
height: calc(max(16px, env(safe-area-inset-top, 0px)) + 62px + var(--espaco-4));
}
body.ep-rolando .ep-navbar-area[b-9cydjgcipl] {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.ep-navbar[b-9cydjgcipl] {
position: relative; /* âncora para centralizar o logo */
display: flex;
align-items: center;
height: 62px; /* medido */
box-sizing: border-box;
padding-left: var(--espaco-5); /* 32px — leva 21: pedido do dono */
padding-right: var(--espaco-5); /* 32px — leva 21: era 28px, pedido do dono */
background-color: var(--ep-verde);
border-radius: var(--canto-botao); /* pílula: 999px */
}
/* Caixa da logo — leva 21 (04/08/2026). No celular ela CORTA a imagem em
44×44 (mesma área de toque dos outros ícones — ver o media query mais
abaixo). No computador só existe pra herdar a centralização por
posição absoluta que a logo já tinha; não corta nada lá. */
.ep-nav-logo-caixa[b-9cydjgcipl] {
cursor: pointer;
}
/* Logo. No celular fica à esquerda, no fluxo normal.
Altura medida: 46px (bateu no celular e no computador) — no celular o
tamanho de exibição muda pro media query abaixo (57×44, cortado). */
.ep-nav-logo[b-9cydjgcipl] {
height: 46px;
width: auto;
display: block;
}
/* Os botões da direita NO COMPUTADOR. O "margin-left: auto" é o que
empurra o grupo para a ponta direita da barra, sobrando o vazio do
meio. No celular isso é desligado — ver o media query abaixo. */
.ep-nav-acoes[b-9cydjgcipl] {
margin-left: auto;
display: flex;
align-items: center;
gap: 28px; /* medido entre os ícones */
}
.ep-nav-botao[b-9cydjgcipl] {
/* Área de toque de 44px, que é o mínimo do guia — mesmo o ícone
tendo 24px. Abaixo disso o dedo erra. O botão não tem fundo nem
borda: quem se vê é só o ícone. */
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: var(--ep-roxo); /* roxo da marca sobre o verde */
font-size: 24px; /* mesmo tamanho de ícone de antes */
line-height: 1;
}
.ep-nav-botao:hover[b-9cydjgcipl] {
color: var(--ep-roxo-escuro);
}
/* Bolinha de notificação da sacola — leva 6c (2026). Só o botão do
carrinho ganha "position: relative": os outros dois (menu e pessoa) não
precisam de âncora para nada. */
.ep-nav-sacola[b-9cydjgcipl] {
position: relative;
}
.ep-nav-bolinha[b-9cydjgcipl] {
position: absolute;
top: 4px;
right: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--ep-erro); /* mesmo vermelho do "×" de remover do checkout, no Figma */
border: 1.5px solid var(--ep-verde); /* separa a bolinha do fundo verde da barra */
}
/* Os 44px de área de toque são maiores que os 24px do ícone, e isso sobra
para os lados. Estes ajustes puxam o primeiro e o último botão de volta
para a margem medida, para o ícone ficar onde está no desenho. */
.ep-nav-acoes .ep-nav-botao:last-child[b-9cydjgcipl] {
margin-right: -10px;
}
/* ---------- Busca (leva 51, 08/08/2026, 2ª versão) ----------
Sem desenho no Figma — recurso novo. DUAS peças separadas de propósito
(achado na 1ª tentativa): o ".ep-navbar-area" tem uma mask-image (ver
comentário mais acima, "O DESFOQUE ATRÁS DA PÍLULA") que desbota
qualquer coisa que vaze pra fora da altura da barra — um painel de
resultado ali dentro simplesmente não aparecia. Por isso:
1. O CAMPO cresce AQUI DENTRO da pílula (".ep-nav-busca"/".ep-busca-
campo") — cabe dentro da altura da barra, a máscara não pega.
2. A LISTA de resultados (".ep-busca-resultados", mais abaixo neste
arquivo) é renderizada FORA do no .razor, com posição
própria — não depende de nenhum ancestral, escapa da máscara. */
.ep-nav-busca[b-9cydjgcipl] {
display: flex;
align-items: center;
}
.ep-busca-campo[b-9cydjgcipl] {
/* Cresce de 0 até a largura cheia quando abre — é o "a barra em si
crescendo, o input ficando na própria barra" pedido. Fica DENTRO
da pílula verde, por isso o fundo branco pra destacar. */
width: 0;
overflow: hidden;
border-radius: var(--canto-campo);
background-color: var(--ep-branco);
transition: width 0.25s ease;
}
.ep-busca-campo--aberto[b-9cydjgcipl] {
width: 180px;
margin-left: var(--espaco-2);
}
.ep-busca-campo input[b-9cydjgcipl] {
width: 180px; /* mesma largura do aberto — não encolhe com o container fechando */
height: 32px;
box-sizing: border-box;
border: none;
outline: none;
background: none;
padding: 0 var(--espaco-3);
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
color: var(--ep-roxo-escuro);
}
/* Busca em tela cheia do celular (leva 51, 6ª rodada) — escondida por
padrão (computador nunca mostra; celular só mostra quando a busca está
ativa, ver ".ep-navbar--busca-ativa" na media query de celular mais
abaixo). Pedido do dono: em vez de espremer um campo entre 4 ícones
que já eram medida exata do Figma, a busca vira a barra inteira. */
.ep-busca-mobile-completa[b-9cydjgcipl] {
display: none;
}
.ep-busca-campo-mobile[b-9cydjgcipl] {
flex: 1;
display: flex;
align-items: center;
gap: var(--espaco-2);
height: 44px;
border-radius: var(--canto-campo);
background-color: var(--ep-branco);
padding: 0 var(--espaco-3);
box-sizing: border-box;
}
.ep-busca-campo-mobile i[b-9cydjgcipl] {
color: var(--ep-roxo-escuro);
opacity: 0.6;
font-size: 18px;
flex-shrink: 0;
}
.ep-busca-campo-mobile input[b-9cydjgcipl] {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: none;
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
color: var(--ep-roxo-escuro);
}
/* Lista de resultados — vive FORA do , ver Header.razor.
"position: fixed" própria (não herda containing block de nada, já que
não é mais descendente do ".ep-navbar-area"). z-index 40: acima da
barra (30), abaixo dos menus grandes (1000). */
.ep-busca-resultados[b-9cydjgcipl] {
position: fixed;
top: calc(max(16px, env(safe-area-inset-top, 0px)) + 62px + var(--espaco-2));
right: var(--margem-lateral);
z-index: 40;
width: 320px;
max-width: calc(100vw - 32px);
background-color: var(--ep-branco);
border-radius: var(--canto-card);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
padding: var(--espaco-3);
box-sizing: border-box;
}
.ep-busca-mensagem[b-9cydjgcipl] {
margin-top: var(--espaco-2);
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
color: var(--ep-roxo-escuro);
opacity: 0.6;
text-align: center;
padding: var(--espaco-2) 0;
}
.ep-busca-lista[b-9cydjgcipl] {
margin-top: var(--espaco-2);
max-height: 320px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--espaco-1);
}
.ep-busca-item[b-9cydjgcipl] {
display: flex;
align-items: center;
gap: var(--espaco-2);
padding: var(--espaco-1);
border-radius: var(--canto-botao);
cursor: pointer;
}
.ep-busca-item:hover[b-9cydjgcipl] {
background-color: var(--ep-cinza-100);
}
.ep-busca-item img[b-9cydjgcipl] {
width: 36px;
height: 36px;
object-fit: contain;
flex-shrink: 0;
}
.ep-busca-item-nome[b-9cydjgcipl] {
flex: 1;
min-width: 0;
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
color: var(--ep-roxo-escuro);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ep-busca-item-preco[b-9cydjgcipl] {
flex-shrink: 0;
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
color: var(--ep-sucesso);
}
.ep-busca-item--indisponivel[b-9cydjgcipl] {
cursor: default;
opacity: 0.5;
}
.ep-busca-item--indisponivel .ep-busca-item-preco[b-9cydjgcipl] {
color: var(--ep-roxo-escuro);
}
.ep-busca-vertodos[b-9cydjgcipl] {
display: block;
margin-top: var(--espaco-2);
text-align: center;
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
color: var(--ep-roxo);
text-decoration: none;
}
.ep-busca-vertodos:hover[b-9cydjgcipl] {
text-decoration: underline;
}
/* ---------- CELULAR (leva 21, 04/08/2026) ----------
Novo desenho do Figma: 4 ícones (hambúrguer, logo, sacola, pessoa) com
ESPAÇAMENTO IGUAL entre eles (space-between), não mais hambúrguer+logo
colados à esquerda e sacola+pessoa agrupados à direita. Medido no
componente do Figma: caixa de 44×44 por ícone, `space-between`, padding
24px dos dois lados (por isso o padding-right da regra base virou 24,
igual ao esquerdo — antes era 28, medido pro desenho antigo). */
@media (max-width: 999.98px) {
.ep-navbar[b-9cydjgcipl] {
justify-content: space-between;
}
/* Caixa que CORTA a logo em 44×44 — mesma área de toque dos outros
ícones, igual ao frame do componente no Figma (a imagem de dentro,
57×44, é maior que o frame, que corta as sobras dos dois lados). */
.ep-nav-logo-caixa[b-9cydjgcipl] {
width: 44px;
height: 44px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Tamanho medido no Figma: 57×44 — a regra base (height:46px, width:
auto) rendeiava ~59×46 (proporção da imagem nativa, 1289×1000),
maior que o desenho novo pede. "flex-shrink: 0" evita que a caixa
acima espreme a imagem pra caber — ela deve ficar cortada, não
encolhida. */
.ep-nav-logo[b-9cydjgcipl] {
width: 57px;
height: 44px;
flex-shrink: 0;
}
/* "display: contents" faz a caixa do .ep-nav-acoes desaparecer do
layout — sacola e pessoa passam a ser filhos diretos do .ep-navbar,
na mesma fileira do hambúrguer e da logo, para o space-between
acima distribuir os 4 igualmente. Sem isso, sacola+pessoa
continuariam coladas uma na outra (gap de 28px fixo), formando um
terceiro "bloco" em vez de dois ícones independentes. Mesma técnica
já usada no MyOrders.razor (ai/LESSONS.md não documenta esta, mas
o padrão é o mesmo: o wrapper só existe para o computador). */
.ep-nav-acoes[b-9cydjgcipl] {
display: contents;
}
/* Mesmo ajuste do ":last-child" acima, espelhado pro primeiro ícone —
agora que o hambúrguer é quem encosta na borda esquerda. */
.ep-nav-menu-cel[b-9cydjgcipl] {
margin-left: -10px;
}
/* Busca em tela cheia no celular (leva 51, 6ª/7ª rodada) — troca a
rodada anterior (campo encolhido pra 120px do lado dos outros
ícones): o dono pediu pra busca virar a barra inteira em vez de
espremer, COM animação (pedido explícito na 7ª rodada — "display:
none/flex" não anima, é tudo-ou-nada; por isso aqui é só
opacity/transform, "display: flex" fica ligado o tempo todo dos
dois lados). Ícones normais continuam ocupando o lugar deles (não
dá pulo de layout), só ficam invisíveis e sem clique. */
.ep-nav-menu-cel[b-9cydjgcipl],
.ep-nav-logo-caixa[b-9cydjgcipl],
.ep-nav-acoes > *[b-9cydjgcipl] {
transition: opacity 0.2s ease;
}
.ep-navbar--busca-ativa .ep-nav-menu-cel[b-9cydjgcipl],
.ep-navbar--busca-ativa .ep-nav-logo-caixa[b-9cydjgcipl],
.ep-navbar--busca-ativa .ep-nav-acoes > *[b-9cydjgcipl] {
opacity: 0;
pointer-events: none;
}
/* Cobre a barra inteira por cima (absolute — ".ep-navbar" já tem
"position: relative", ver regra base). Some com opacity 0 +
"pointer-events: none" (não é clicável escondida), nunca com
"display: none" — é isso que deixa a transição acontecer. */
.ep-busca-mobile-completa[b-9cydjgcipl] {
display: flex;
align-items: center;
gap: var(--espaco-2);
position: absolute;
top: 0;
bottom: 0;
/* --espaco-5 (32px) era o mesmo recuo padrão da pílula — ficava
uma sobra visível nas pontas, meio "boiando" dentro da barra.
--espaco-3 (16px) aproxima das bordas, completando a barra de
verdade, ainda com respiro claro (não é 0, não fica colado). */
left: var(--espaco-3);
right: var(--espaco-3);
opacity: 0;
transform: scale(0.96);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.ep-navbar--busca-ativa .ep-busca-mobile-completa[b-9cydjgcipl] {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
/* Lista de resultados no celular: "right" ancorado na margem (regra
base, pensada pro computador) pode não bater com onde a lupa cai
no space-between. Mais simples e sem risco: trava nas duas margens
da tela, ignorando a posição exata do ícone. */
.ep-busca-resultados[b-9cydjgcipl] {
left: 16px;
right: 16px;
width: auto;
max-width: none;
}
}
/* No celular o hambúrguer da esquerda não existe. */
.ep-nav-menu-desk[b-9cydjgcipl] {
display: none;
}
/* ---------- COMPUTADOR ----------
O corte em 1000px é o mesmo já usado na tela de login, para o site não
ter dois pontos de virada diferentes. */
@media (min-width: 1000px) {
.ep-navbar-area[b-9cydjgcipl] {
/* MUDOU NA LEVA 5c — e o resultado na tela é EXATAMENTE o mesmo.
Antes: a área tinha largura máxima de 1440px e ficava centralizada
(max-width + margin: 0 auto). Isso bastava enquanto a barra não
era fixa.
Problema que apareceu com o desfoque: numa tela maior que 1440px,
a área parava nos 1440 e o conteúdo que rolasse fora dessa faixa
passava SEM desfoque, pelas beiradas. Ficava um retângulo borrado
no meio e a página nítida dos lados.
Agora a área ocupa a tela inteira (é ela que desfoca de ponta a
ponta) e a margem é que cresce, mantendo a pílula do mesmo
tamanho de antes. A conta do max() é: "110px de margem, ou o
tanto que sobrar de cada lado dos 1440 do desenho — o que for
maior". Em 1440 dá 110px; em 1900 dá 340px e a pílula continua
com os mesmos 1220px, centralizada. */
padding-left: max(var(--margem-lateral-desktop),
calc((100% - var(--largura-frame-desktop)) / 2
+ var(--margem-lateral-desktop)));
padding-right: max(var(--margem-lateral-desktop),
calc((100% - var(--largura-frame-desktop)) / 2
+ var(--margem-lateral-desktop)));
padding-top: var(--espaco-4); /* 24px — medido */
}
/* No computador a folga do topo é 24px em vez do notch, então o bloco
que guarda o lugar muda junto: 24 + 62 + 24. */
.ep-navbar-espaco[b-9cydjgcipl] {
height: calc(var(--espaco-4) + 62px + var(--espaco-4));
}
.ep-navbar[b-9cydjgcipl] {
padding-left: var(--espaco-5); /* 32px — medido */
padding-right: var(--espaco-5);
}
/* No computador o logo fica no CENTRO da barra, e não à esquerda.
Centralizo por posição absoluta em vez de espaçamento porque o lado
esquerdo (um botão) e o direito (dois botões) têm larguras
diferentes — dividir o espaço deixaria o logo levemente torto.
Leva 21: a posição absoluta migrou da img pra caixa que a envolve
(.ep-nav-logo-caixa) — mesmo efeito, só muda quem é o âncora. */
.ep-nav-logo-caixa[b-9cydjgcipl] {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* Troca de lugar: aparece o hambúrguer da esquerda, some o da direita */
.ep-nav-menu-desk[b-9cydjgcipl] {
display: inline-flex;
}
.ep-nav-menu-cel[b-9cydjgcipl] {
display: none;
}
.ep-nav-acoes[b-9cydjgcipl] {
gap: var(--espaco-4); /* 24px — medido no computador */
}
}
.sidebar-s[b-9cydjgcipl] {
height: 100%;
width: 250px;
position: fixed !important;
z-index: 1;
top: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
border-radius: 0 25px 25px 0;
}
.right-sidebar[b-9cydjgcipl] {
right: 0;
background-color: var(--ep-roxo);
border-radius: 25px 0 0 25px;
color: var(--ep-verde);
}
.sidebar.right-sidebar a[b-9cydjgcipl] {
padding: 32px 32px 8px 32px;
text-decoration: none;
font-size: 16px;
color: var(--ep-verde);
display: block;
gap: 10px;
transition: 0.3s;
}
.sidebar.right-sidebar a:hover[b-9cydjgcipl] {
color: var(--ep-azul-claro);
}
/* As regras .header-logo e .bi-list/.bi-person-fill saíram na leva 5:
o logo agora é .ep-nav-logo e os ícones viraram Phosphor dentro de
botões de verdade. Nenhuma outra tela usava essas classes — conferi
antes de apagar. */
.sidebar-closed[b-9cydjgcipl] {
width: 0;
}
.sidebar-open[b-9cydjgcipl] {
width: 250px;
}
@media (max-width: 375px) {
.top-row[b-9cydjgcipl] {
width: 90% !important;
}
}
/* /Components/Layout/HeaderComponent.razor.rz.scp.css */
.page-header[b-hlpuwx2oth] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: var(--ep-branco);
/* border-bottom: 2px solid var(--ep-roxo);*/
}
.header-right span[b-hlpuwx2oth], .header-left a[b-hlpuwx2oth], .header-right i[b-hlpuwx2oth] {
color: var(--ep-roxo);
font-size: 1.5rem;
text-decoration: none;
}
.header-left a:hover[b-hlpuwx2oth] {
text-decoration: underline;
}
.header-right i[b-hlpuwx2oth] {
cursor: pointer;
}
@media (max-width: 768px) {
span.back[b-hlpuwx2oth] {
display: none !important;
}
}
/* /Components/Layout/InstalarAppBanner.razor.rz.scp.css */
/* Banner de "instalar como app" (08/08/2026). A posição na tela (fixed,
embaixo, acima do conteúdo mas abaixo dos painéis de menu) mudou pro
wrapper ".banners-flutuantes" em MainLayout.razor.css na leva 60 —
ele empilha este banner com o de cookies em vez de sobrepor, quando os
dois aparecem juntos. Aqui fica só a aparência. */
.instalar-app-banner[b-96pz6c90x5] {
display: flex;
align-items: center;
gap: var(--espaco-3);
background-color: var(--ep-roxo-escuro);
border-radius: var(--canto-card);
padding: var(--espaco-3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.instalar-app-conteudo[b-96pz6c90x5] {
flex: 1;
display: flex;
align-items: center;
gap: var(--espaco-3);
flex-wrap: wrap;
}
.instalar-app-texto[b-96pz6c90x5] {
font-family: var(--fonte-corpo);
font-weight: normal;
font-size: var(--legenda-2);
color: var(--ep-branco);
margin: 0;
}
.instalar-app-texto i[b-96pz6c90x5] {
vertical-align: -2px;
}
.instalar-app-botao[b-96pz6c90x5] {
height: 36px;
padding: 0 var(--espaco-4);
background-color: var(--ep-verde);
color: var(--ep-roxo-escuro);
border: none;
border-radius: var(--canto-botao);
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
cursor: pointer;
white-space: nowrap;
}
.instalar-app-fechar[b-96pz6c90x5] {
background: none;
border: none;
color: var(--ep-branco);
font-size: 20px;
line-height: 1;
padding: var(--espaco-1);
cursor: pointer;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-y6ro8sj9qs] {
position: relative;
display: flex;
flex-direction: column;
}
main[b-y6ro8sj9qs] {
flex: 1;
}
.sidebar[b-y6ro8sj9qs] {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, var(--ep-roxo-quase-preto) 70%);
}
.top-row[b-y6ro8sj9qs], article[b-y6ro8sj9qs] {
padding-left: 0 !important;
padding-right: 0 !important;
}
@media (min-width: 641px) {
.top-row[b-y6ro8sj9qs], article[b-y6ro8sj9qs] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.top-row[b-y6ro8sj9qs] {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
.top-row[b-y6ro8sj9qs] a, .top-row[b-y6ro8sj9qs] .btn-link {
white-space: nowrap;
margin-left: 1.5rem;
text-decoration: none;
}
.top-row[b-y6ro8sj9qs] a:hover, .top-row[b-y6ro8sj9qs] .btn-link:hover {
text-decoration: underline;
}
.top-row[b-y6ro8sj9qs] a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row[b-y6ro8sj9qs] {
justify-content: space-between;
}
.top-row[b-y6ro8sj9qs] a, .top-row[b-y6ro8sj9qs] .btn-link {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page[b-y6ro8sj9qs] {
flex-direction: row;
}
.sidebar[b-y6ro8sj9qs] {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row[b-y6ro8sj9qs] {
position: sticky;
top: 0;
z-index: 1;
}
.top-row.auth[b-y6ro8sj9qs] a:first-child {
flex: 1;
text-align: right;
width: 0;
}
.top-row[b-y6ro8sj9qs], article[b-y6ro8sj9qs] {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}
#blazor-error-ui[b-y6ro8sj9qs] {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss[b-y6ro8sj9qs] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.green-header[b-y6ro8sj9qs] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: var(--ep-verde);
position: relative;
transition: padding 0.5s;
}
.sidebar-s[b-y6ro8sj9qs] {
height: 100%;
width: 250px;
position: fixed !important;
z-index: 1;
top: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
border-radius: 0 25px 25px 0;
}
.right-sidebar[b-y6ro8sj9qs] {
right: 0;
background-color: var(--ep-roxo);
border-radius: 25px 0 0 25px;
color: var(--ep-azul-medio);
}
.sidebar.right-sidebar a[b-y6ro8sj9qs] {
padding: 32px 32px 8px 32px;
text-decoration: none;
font-size: 16px;
color: var(--ep-azul-medio);
display: block;
gap: 10px;
transition: 0.3s;
}
.sidebar.right-sidebar a:hover[b-y6ro8sj9qs] {
color: var(--ep-azul-claro);
}
.header-logo[b-y6ro8sj9qs] {
width: 100px;
position: absolute;
top: -0%;
left: 50%;
transform: translateX(-40%);
}
.bi-list[b-y6ro8sj9qs], .bi-person-fill[b-y6ro8sj9qs] {
cursor: pointer;
z-index: 1;
}
.sidebar-closed[b-y6ro8sj9qs] {
width: 0;
}
.sidebar-open[b-y6ro8sj9qs] {
width: 250px;
}
@media (max-width: 768px) {
.header-logo[b-y6ro8sj9qs] {
width: 80px;
}
}
/* Empilha os banners flutuantes (instalar app + cookies) em vez de
sobrepor — os dois podem aparecer juntos pra um visitante novo que
ainda não decidiu nenhum dos dois. Cada banner cuida só da própria
aparência; aqui é só "onde na tela" — leva 60. */
.banners-flutuantes[b-y6ro8sj9qs] {
position: fixed;
left: var(--espaco-3);
right: var(--espaco-3);
bottom: calc(var(--espaco-3) + env(safe-area-inset-bottom));
z-index: 900;
display: flex;
flex-direction: column;
gap: var(--espaco-3);
}
@media (min-width: 1000px) {
.banners-flutuantes[b-y6ro8sj9qs] {
left: auto;
max-width: 420px;
}
}
/* /Components/Layout/NotificacaoPushBanner.razor.rz.scp.css */
/* Banner de permissão de Web Push (Sprint 14, item 2). Mesma aparência do
— CSS duplicado aqui porque o escopo de CSS do
Blazor não atravessa arquivo (ai/LESSONS.md item 1). Posição na tela
(fixed, dentro de ".banners-flutuantes") vem do MainLayout.razor.css. */
.notificacao-push-banner[b-1eeev173n3] {
display: flex;
align-items: center;
gap: var(--espaco-3);
background-color: var(--ep-roxo-escuro);
border-radius: var(--canto-card);
padding: var(--espaco-3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.notificacao-push-conteudo[b-1eeev173n3] {
flex: 1;
display: flex;
align-items: center;
gap: var(--espaco-3);
flex-wrap: wrap;
}
.notificacao-push-texto[b-1eeev173n3] {
font-family: var(--fonte-corpo);
font-weight: normal;
font-size: var(--legenda-2);
color: var(--ep-branco);
margin: 0;
}
.notificacao-push-botao[b-1eeev173n3] {
height: 36px;
padding: 0 var(--espaco-4);
background-color: var(--ep-verde);
color: var(--ep-roxo-escuro);
border: none;
border-radius: var(--canto-botao);
font-family: var(--fonte-corpo);
font-size: var(--legenda-2);
cursor: pointer;
white-space: nowrap;
}
.notificacao-push-fechar[b-1eeev173n3] {
background: none;
border: none;
color: var(--ep-branco);
font-size: 20px;
line-height: 1;
padding: var(--espaco-1);
cursor: pointer;
}
/* /Components/Layout/ResetPassword.razor.rz.scp.css */
/* Visual novo (leva 34) — sem desenho no Figma pra esta modal, mesma
receita das outras modais de cadastro do admin (Categoria/Marca/Modelo/
Sabor, leva 31): classes "cadastro-modal-*", campo com a receita oficial
do site (AddressComponent.razor.css). */
.cadastro-modal[b-054phmwttn] {
display: flex;
flex-direction: column;
gap: var(--espaco-4);
padding: var(--espaco-5);
}
.cadastro-modal-cabecalho[b-054phmwttn] {
display: flex;
flex-direction: column;
gap: var(--espaco-1);
}
.cadastro-modal-titulo[b-054phmwttn] {
font-family: var(--fonte-titulo);
font-size: var(--subtitulo);
font-weight: bold;
color: var(--ep-roxo-escuro);
}
.cadastro-modal-descricao[b-054phmwttn] {
font-family: var(--fonte-corpo);
font-size: var(--legenda);
color: var(--ds-cinza-50);
}
.cadastro-modal-campo[b-054phmwttn] {
display: flex;
flex-direction: column;
gap: var(--espaco-2);
}
.cadastro-modal-rotulo[b-054phmwttn] {
font-family: var(--fonte-corpo);
font-size: var(--legenda);
color: var(--ds-cinza-75);
}
/* Mesma receita de campo já usada no resto do site (leva 13c,
AddressComponent.razor.css) — pílula com contorno roxo, sombra interna
sutil e contorno verde no foco. */
.cadastro-modal-input[b-054phmwttn] {
height: var(--altura-campo);
width: 100%;
padding: 0 var(--espaco-4);
border-radius: var(--canto-campo);
border: 1px solid var(--ep-roxo);
box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
background-color: var(--ep-branco);
font-family: var(--fonte-corpo);
font-size: var(--legenda);
color: var(--ep-roxo-escuro);
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
}
.cadastro-modal-input[b-054phmwttn]::placeholder {
color: var(--ep-roxo-escuro);
opacity: 1;
}
.cadastro-modal-input:focus[b-054phmwttn] {
outline: 2px solid var(--ep-verde);
outline-offset: 2px;
}
/* Campo de busca + botão redondo lado a lado. */
.cadastro-modal-busca-linha[b-054phmwttn] {
display: flex;
align-items: center;
gap: var(--espaco-2);
}
.cadastro-modal-busca-linha .cadastro-modal-input[b-054phmwttn] {
flex: 1;
}
.cadastro-modal-icone-busca[b-054phmwttn] {
width: var(--altura-campo);
height: var(--altura-campo);
flex-shrink: 0;
border-radius: var(--canto-redondo);
border: none;
background-color: var(--ep-verde);
color: var(--ep-roxo-escuro);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: filter .15s;
}
.cadastro-modal-icone-busca:hover[b-054phmwttn] {
filter: brightness(0.92);
}
/* Linha fina de separação — mesma receita das outras modais de cadastro. */
.cadastro-modal-divisor[b-054phmwttn] {
height: 0.5px;
background-color: rgba(0, 0, 0, 0.25);
}
.cadastro-modal-usuario-info[b-054phmwttn] {
display: flex;
flex-direction: column;
gap: var(--espaco-1);
}
.cadastro-modal-usuario-info p[b-054phmwttn] {
margin: 0;
font-family: var(--fonte-corpo);
font-size: var(--legenda);
color: var(--ds-cinza-75);
}
.cadastro-modal-usuario-info strong[b-054phmwttn] {
color: var(--ep-roxo-escuro);
}
.cadastro-modal-botao-salvar[b-054phmwttn] {
height: 44px;
width: 100%;
border-radius: var(--canto-botao);
background-color: var(--ep-verde);
color: var(--ep-roxo-escuro);
border: none;
font-family: var(--fonte-corpo);
font-size: var(--legenda);
cursor: pointer;
transition: filter .15s;
}
.cadastro-modal-botao-salvar:hover[b-054phmwttn] {
filter: brightness(0.92);
}
/* /Components/Layout/SidebarAdmin.razor.rz.scp.css */
/* =============================================================================
SidebarAdmin.razor.css — ESVAZIADO NA LEVA 6b (2026)
=============================================================================
TODO o visual deste painel passou para o "wwwroot/app.css", na seção
"PAINÉIS DE MENU". Lá as regras são escritas UMA vez e valem para os cinco
painéis do site; aqui elas eram a quinta cópia da mesma coisa.
POR QUE ESVAZIAR, E NÃO SÓ DEIXAR PARADO: o CSS de escopo do Blazor tem
força MAIOR que o global, porque o compilador acrescenta um seletor de
atributo a cada regra daqui. Se estas linhas ficassem, elas venceriam o
app.css. E duas delas quebrariam o desenho novo em silêncio:
.nav-link, #text, a, span, strong { color: var(--ep-verde) !important; }
strong { font-size: 0.6rem !important; }
A primeira pintaria de verde TODO link e TODO span do painel — inclusive os
itens, que no desenho são brancos. A segunda encolheria textos para 0.6rem.
O que havia aqui além disso era código morto: cabeçalho verde antigo
(.green-header), logo do cabeçalho antigo (.header-logo), a faixa .top-row
do modelo original do Blazor e ícones desenhados em SVG dentro do CSS que
nenhum elemento deste arquivo chamava.
O arquivo fica no lugar, vazio de regras, para deixar claro que o visual
mudou de casa — e não que alguém esqueceu de criá-lo.
============================================================================= */
/* /Components/Layout/SidebarAnonymous.razor.rz.scp.css */
/* =============================================================================
SidebarAnonymous.razor.css — ESVAZIADO NA LEVA 6b (2026)
=============================================================================
TODO o visual deste painel passou para o "wwwroot/app.css", na seção
"PAINÉIS DE MENU". Lá as regras são escritas UMA vez e valem para os cinco
painéis do site; aqui elas eram a quinta cópia da mesma coisa.
POR QUE ESVAZIAR, E NÃO SÓ DEIXAR PARADO: o CSS de escopo do Blazor tem
força MAIOR que o global, porque o compilador acrescenta um seletor de
atributo a cada regra daqui. Se estas linhas ficassem, elas venceriam o
app.css. E duas delas quebrariam o desenho novo em silêncio:
.nav-link, #text, a, span, strong { color: var(--ep-verde) !important; }
strong { font-size: 0.6rem !important; }
A primeira pintaria de verde TODO link e TODO span do painel — inclusive os
itens, que no desenho são brancos. A segunda encolheria textos para 0.6rem.
O que havia aqui além disso era código morto: cabeçalho verde antigo
(.green-header), logo do cabeçalho antigo (.header-logo), a faixa .top-row
do modelo original do Blazor e ícones desenhados em SVG dentro do CSS que
nenhum elemento deste arquivo chamava.
O arquivo fica no lugar, vazio de regras, para deixar claro que o visual
mudou de casa — e não que alguém esqueceu de criá-lo.
============================================================================= */
/* /Components/Layout/SidebarCategories.razor.rz.scp.css */
/* =============================================================================
SidebarCategories.razor.css — ESVAZIADO NA LEVA 6b (2026)
=============================================================================
TODO o visual deste painel passou para o "wwwroot/app.css", na seção
"PAINÉIS DE MENU". Lá as regras são escritas UMA vez e valem para os cinco
painéis do site; aqui elas eram a quinta cópia da mesma coisa.
POR QUE ESVAZIAR, E NÃO SÓ DEIXAR PARADO: o CSS de escopo do Blazor tem
força MAIOR que o global, porque o compilador acrescenta um seletor de
atributo a cada regra daqui. Se estas linhas ficassem, elas venceriam o
app.css. E duas delas quebrariam o desenho novo em silêncio:
.nav-link, #text, a, span, strong { color: var(--ep-verde) !important; }
strong { font-size: 0.6rem !important; }
A primeira pintaria de verde TODO link e TODO span do painel — inclusive os
itens, que no desenho são brancos. A segunda encolheria textos para 0.6rem.
O que havia aqui além disso era código morto: cabeçalho verde antigo
(.green-header), logo do cabeçalho antigo (.header-logo), a faixa .top-row
do modelo original do Blazor e ícones desenhados em SVG dentro do CSS que
nenhum elemento deste arquivo chamava.
O arquivo fica no lugar, vazio de regras, para deixar claro que o visual
mudou de casa — e não que alguém esqueceu de criá-lo.
============================================================================= */
/* /Components/Layout/SidebarClient.razor.rz.scp.css */
/* =============================================================================
SidebarClient.razor.css — ESVAZIADO NA LEVA 6b (2026)
=============================================================================
TODO o visual deste painel passou para o "wwwroot/app.css", na seção
"PAINÉIS DE MENU". Lá as regras são escritas UMA vez e valem para os cinco
painéis do site; aqui elas eram a quinta cópia da mesma coisa.
POR QUE ESVAZIAR, E NÃO SÓ DEIXAR PARADO: o CSS de escopo do Blazor tem
força MAIOR que o global, porque o compilador acrescenta um seletor de
atributo a cada regra daqui. Se estas linhas ficassem, elas venceriam o
app.css. E duas delas quebrariam o desenho novo em silêncio:
.nav-link, #text, a, span, strong { color: var(--ep-verde) !important; }
strong { font-size: 0.6rem !important; }
A primeira pintaria de verde TODO link e TODO span do painel — inclusive os
itens, que no desenho são brancos. A segunda encolheria textos para 0.6rem.
O que havia aqui além disso era código morto: cabeçalho verde antigo
(.green-header), logo do cabeçalho antigo (.header-logo), a faixa .top-row
do modelo original do Blazor e ícones desenhados em SVG dentro do CSS que
nenhum elemento deste arquivo chamava.
O arquivo fica no lugar, vazio de regras, para deixar claro que o visual
mudou de casa — e não que alguém esqueceu de criá-lo.
============================================================================= */
/* /Components/Layout/SidebarDelivery.razor.rz.scp.css */
/* =============================================================================
SidebarDelivery.razor.css — ESVAZIADO NA LEVA 6b (2026)
=============================================================================
TODO o visual deste painel passou para o "wwwroot/app.css", na seção
"PAINÉIS DE MENU". Lá as regras são escritas UMA vez e valem para os cinco
painéis do site; aqui elas eram a quinta cópia da mesma coisa.
POR QUE ESVAZIAR, E NÃO SÓ DEIXAR PARADO: o CSS de escopo do Blazor tem
força MAIOR que o global, porque o compilador acrescenta um seletor de
atributo a cada regra daqui. Se estas linhas ficassem, elas venceriam o
app.css. E duas delas quebrariam o desenho novo em silêncio:
.nav-link, #text, a, span, strong { color: var(--ep-verde) !important; }
strong { font-size: 0.6rem !important; }
A primeira pintaria de verde TODO link e TODO span do painel — inclusive os
itens, que no desenho são brancos. A segunda encolheria textos para 0.6rem.
O que havia aqui além disso era código morto: cabeçalho verde antigo
(.green-header), logo do cabeçalho antigo (.header-logo), a faixa .top-row
do modelo original do Blazor e ícones desenhados em SVG dentro do CSS que
nenhum elemento deste arquivo chamava.
O arquivo fica no lugar, vazio de regras, para deixar claro que o visual
mudou de casa — e não que alguém esqueceu de criá-lo.
============================================================================= */
/* /Components/Pages/Configuracao/Config.razor.rz.scp.css */
/* ============================================================================
VISUAL NOVO — /config (leva 33), a partir do grupo Figma "REDESIGN —
Configurações (Config + ConfigPainel)" (arquivo EUPHORIA, página
"02 - Telas"). Mesma casca de /inventory — ver ai/DESIGN_SYSTEM.md,
"Banner do título". Único breakpoint do site: 1000px.
Campo de texto usa a receita oficial do site (fundo branco, borda
roxa, sombra interna, contorno verde no foco — AddressComponent.razor.css)
em vez da borda cinza que este frame específico do Figma desenha —
mesma decisão já tomada na leva 31 pra manter o admin consistente.
========================================================================== */
.config-pagina[b-hw3c7jupzo] {
background-color: var(--ep-cinza-100);
min-height: 100vh;
padding-left: var(--margem-lateral);
padding-right: var(--margem-lateral);
padding-bottom: var(--espaco-6);
}
/* ---------- Banner do título ---------- */
.config-hero[b-hw3c7jupzo] {
background-color: var(--ep-roxo);
border-radius: 0 0 56px 56px;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-bottom: var(--espaco-4);
padding-left: var(--margem-lateral);
padding-right: var(--margem-lateral);
padding-bottom: var(--espaco-5);
display: flex;
flex-direction: column;
align-items: center;
margin-top: calc(-1 * (max(16px, env(safe-area-inset-top, 0px)) + 62px + var(--espaco-4)));
padding-top: calc(max(16px, env(safe-area-inset-top, 0px)) + 62px + var(--espaco-4) + var(--espaco-3));
}
.config-caminho[b-hw3c7jupzo] {
display: block;
align-self: flex-start;
color: var(--ep-branco);
font-family: var(--fonte-corpo);
font-size: var(--legenda);
margin-bottom: var(--espaco-2);
padding-left: var(--espaco-4);
}
.config-caminho a[b-hw3c7jupzo] {
color: var(--ep-branco);
text-decoration: none;
}
.config-caminho a:hover[b-hw3c7jupzo] {
text-decoration: underline;
}
.config-titulo[b-hw3c7jupzo] {
font-family: var(--fonte-titulo);
font-weight: bold;
font-size: var(--titulo-5);
line-height: var(--entrelinha);
color: var(--ep-branco);
text-align: center;
margin: 0;
}
/* ---------- Card branco de conteúdo ---------- */
.config-card[b-hw3c7jupzo] {
background-color: var(--ep-branco);
border-radius: var(--canto-card);
padding: var(--espaco-4);
}
/* ::deep é obrigatório aqui: o