/* ============================================================= SOPPHUS — casca de navegação Reaproveita os tokens de sopphus.css (cores, tipos, espaço, raio, alturas --topo-h/--nav-h). NÃO redefinir tokens aqui. Celular: barra inferior FIXA com 4 destinos. >= 768px: a barra some e vira sidebar à esquerda. Painel inicial: GRADE DE CARDS por módulo — decisão do usuário. ============================================================= */ /* ---------- Cor por ÁREA ---------- O roteador (shell.js/irPara) escreve data-area no ; este bloco troca DOIS tokens — --cor-area e o tint --cor-area-fundo — e então o título do topo, o quadradinho do ícone, o foco, o campo em foco e o item ativo da barra falam a mesma cor. Aponta para os MESMOS aliases --aba-* que a barra inferior consome: topo e rodapé não podem dessincronizar. Contrastes do título 18px/600 sobre o topo branco (mínimo 4,5:1): Início 6,46:1 · Precificar 5,41:1 · Financeiro 7,57:1 · Relatórios 8,72:1. As duas primeiras SÃO o rosa e o dourado da marca levados a texto. */ /* TRÊS destinos desde 14-09-26. As cores NÃO mudaram de valor — mudaram de dono, e cada uma herdou a do destino que absorveu, para quem já usava o app não ter de reaprender a paleta: dashboard ← Início (--aba-inicio) producao ← Precificar (--aba-precificar) o dourado da marca caixa ← Financeiro (--aba-financeiro) As chaves antigas continuam listadas porque o roteador reencaminha por hash: entre o clique no link velho e a troca do data-area há um quadro em que o valor antigo ainda está no , e sem a regra ele piscaria sem cor. */ :root[data-area="dashboard"] { --cor-area: var(--aba-inicio); --cor-area-fundo: var(--aba-inicio-fundo); } :root[data-area="producao"] { --cor-area: var(--aba-precificar); --cor-area-fundo: var(--aba-precificar-fundo); } :root[data-area="caixa"] { --cor-area: var(--aba-financeiro); --cor-area-fundo: var(--aba-financeiro-fundo); } :root[data-area="inicio"] { --cor-area: var(--aba-inicio); --cor-area-fundo: var(--aba-inicio-fundo); } :root[data-area="precificar"] { --cor-area: var(--aba-precificar); --cor-area-fundo: var(--aba-precificar-fundo); } :root[data-area="financeiro"] { --cor-area: var(--aba-financeiro); --cor-area-fundo: var(--aba-financeiro-fundo); } :root[data-area="relatorios"] { --cor-area: var(--aba-relatorios); --cor-area-fundo: var(--aba-relatorios-fundo); } :root[data-area="cadastros"] { --cor-area: var(--aba-cadastros); --cor-area-fundo: var(--aba-cadastros-fundo); } /* PEDIDOS virou destino de barra em 15-09-26 e por isso ganhou cor própria: a quinta família (#0E7490), a mesma que o ícone dele acende na navegação. O título do topo e o ícone da barra TÊM de falar a mesma cor — é esse par que faz o cabeçalho e a navegação conversarem, e foi para isso que o data-area existe. */ :root[data-area="pedidos"] { --cor-area: var(--aba-cadastros); --cor-area-fundo: var(--aba-cadastros-fundo); } /* Conta e Vitrine não são destino de barra: ficam no rosa da marca — o neutro do app agora é a cor da casa, não um cinza. */ :root[data-area="conta"] { --cor-area: var(--rosa-texto); --cor-area-fundo: var(--rosa-fundo); } :root[data-area="vitrine"] { --cor-area: var(--rosa-texto); --cor-area-fundo: var(--rosa-fundo); } /* ---------- Casca ---------- */ .app-shell { min-height: 100dvh; display: flex; flex-direction: column; } .app-topo { position: sticky; top: 0; z-index: 20; /* Translúcido com desfoque: o conteúdo passa POR BAIXO do topo em vez de sumir atrás de uma barra opaca — dá profundidade sem custar altura. `color-mix` degrada para o cartão sólido em navegador que não a tem. */ /* Mesma correção da barra inferior: 82% deixava o conteúdo legível através do topo enquanto a página rolava. 94% mantém a profundidade sem o vazamento. */ background: var(--card); background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border-bottom: var(--fio); min-height: var(--topo-h); /* GRID de três colunas, não flex — 05-08-26, pedido do usuário: "logo no meio, tela atual na esquerda". `1fr auto 1fr` é o que põe o símbolo no centro ÓPTICO da barra: as duas colunas laterais recebem a MESMA largura, então o meio cai no meio da tela independentemente de o título ser "Início" ou "Relatórios". Com flexbox o símbolo cairia no meio do espaço que sobra, deslocando a cada troca de área — que é justamente o que se quer evitar num elemento fixo. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--esp-2); padding: 0 var(--esp-4); } .app-topo .titulo-area { font-size: var(--tam-titulo); font-weight: var(--peso-forte); letter-spacing: -0.01em; line-height: var(--ent-titulo); color: var(--cor-area); /* a cor da aba sobe do rodapé para o topo */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* as ações se agrupam à direita da terceira coluna */ .app-topo-acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2); min-width: 0; } /* ============================================================= SINO DE AVISOS — os alertas saíram da primeira dobra do Início Antes eles abriam a tela inicial: com quatro contas vencidas, o saldo do mês e os atalhos nasciam abaixo da linha d'água todo dia. E não existiam em nenhuma outra tela. Aqui alcançam o app inteiro sem empurrar conteúdo. O botão só aparece quando há aviso (`.sino[hidden]` some) — sino permanentemente vazio ensina a ignorar o sino. ============================================================= */ .sino { position: relative; } .sino[hidden] { display: none; } /* O atalho de EDITAR O CARDÁPIO, nas mesmas ferramentas do topo. Sem selo: não é fila, é um caminho — e um `hidden` no HTML precisa de `display: none` aqui porque `.btn-topo` declara `display: grid`, que vence o atributo. */ #atalho-cardapio[hidden] { display: none; } .sino-contador { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--raio-pilula); background: var(--warning); color: var(--card); font-size: 11px; /* exceção: selo numérico, não texto de leitura */ font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; line-height: 1; /* anel na cor do topo separa o selo do ícone por baixo dele */ box-shadow: 0 0 0 2px var(--card); } /* Tem urgente na lista? o selo vai para o vermelho. A cor NÃO carrega o sentido sozinha: o número diz quantos, e cada linha do painel traz ícone próprio e o prazo escrito ("venceu há 5 dias"). */ .sino[data-nivel="urgente"] .sino-contador { background: var(--danger); } /* FIXED, e não absolute. Ancorado ao sino, o painel se alinhava à direita DELE — e o sino fica a ~120px da borda (tema e conta vêm depois). Com 343px de largura, ele vazava 88px para fora da janela num celular de 375. Preso à viewport, ele encosta na margem da tela e cabe sempre. O topo é sticky e não cria contexto de posicionamento, então `fixed` aqui se ancora à janela como se espera. */ .painel-avisos { transform-origin: top right; position: fixed; top: calc(var(--topo-h) + var(--esp-2) + env(safe-area-inset-top)); right: var(--esp-4); z-index: 45; width: min(360px, calc(100vw - var(--esp-4) * 2)); max-height: min(70dvh, 480px); overflow-y: auto; padding: var(--esp-4); background: var(--card); border: var(--fio-cartao); border-radius: var(--raio); box-shadow: var(--sombra-modal); animation: painel-abre var(--dur-curta) var(--curva); } .painel-avisos[hidden] { display: none; } /* O painel nasce sob o sino, no canto superior DIREITO: a origem tem de ser esse canto, senão ele parece brotar do meio da tela. */ @keyframes painel-abre { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } } .painel-avisos-cab { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-4); } .painel-avisos-cab h2 { font-size: var(--tam-titulo); font-weight: var(--peso-forte); line-height: var(--ent-titulo); flex: 1; } .painel-avisos-limpar { background: none; border: 0; padding: var(--esp-2); margin: calc(-1 * var(--esp-2)); min-height: var(--alvo-toque); color: var(--cor-area); font-size: var(--tam-apoio); cursor: pointer; } /* dentro do painel os alertas não precisam de sombra: o painel já flutua */ .painel-avisos .alerta { box-shadow: none; } /* ---------- O símbolo da marca ---------- No celular o topo mostra o SÍMBOLO, não o nome escrito: com título de área, botão de tema e atalho de conta na mesma linha, "SOPPHUS" por extenso em tracking 0,14em consumia ~110px dos 375 e espremia os três. O nome por extenso continua na sidebar (desktop) e na tela de entrada. */ /* O símbolo é a ARTE ORIGINAL do usuário (img/sopphus-icone.png): o "S" rosa com as barras douradas, recortado do PNG que ele mandou e com o fundo branco trocado por transparência. Não leva raio nem fundo — é o desenho solto, e é por ser transparente que ele funciona igual no tema claro e no escuro. */ .marca-simbolo { display: block; width: 32px; height: 32px; flex-shrink: 0; } .marca-simbolo.grande { width: 88px; height: 88px; } /* O símbolo do topo é um link para o Início — no celular ele é o "botão home" que a barra de baixo também oferece; no desktop a sidebar já cumpre o papel e ele sai (a marca por extenso está lá). */ .marca-link { display: grid; place-items: center; flex-shrink: 0; min-height: var(--alvo-toque); /* sem padding lateral: ele está na coluna do MEIO do grid do topo, e qualquer padding assimétrico o tiraria do centro exato (media 2px fora do eixo) */ text-decoration: none; -webkit-tap-highlight-color: transparent; } .marca-nome { font-size: var(--tam-corpo); font-weight: var(--peso-forte); letter-spacing: 0.14em; /* exceção documentada: o tracking largo é da marca */ color: var(--text); white-space: nowrap; } /* ---------- Botões redondos do topo (tema, conta) ---------- */ .btn-topo { display: grid; place-items: center; width: var(--alvo-toque); height: var(--alvo-toque); flex-shrink: 0; border: var(--fio); border-radius: var(--raio-pilula); background: var(--card); color: var(--text-light); text-decoration: none; cursor: pointer; transition: color var(--dur-curta) var(--curva-cor), border-color var(--dur-curta) var(--curva-cor); } .btn-topo svg { width: 19px; height: 19px; } /* Um ícone por tema, trocados pelo CSS: o JS só escreve data-tema no e não precisa saber desenhar sol nem lua. */ .btn-topo .icone-lua { display: none; } :root[data-tema="escuro"] .btn-topo .icone-sol { display: none; } :root[data-tema="escuro"] .btn-topo .icone-lua { display: block; } .app-area { flex: 1; /* A safe-area entra na conta: a barra a soma ao próprio padding, então reservar só `--nav-h` deixaria o fim do conteúdo atrás dela no iPhone. */ padding: var(--esp-4) var(--esp-4) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--esp-5)); max-width: 1400px; width: 100%; margin: 0 auto; } /* A troca de área NÃO tem transição, e isso é escolhido. A auditoria de 05-08-26 já listava "troca de aba sem animação" entre os acertos: é a ação mais repetida do app, e o que se usa o dia inteiro tem de responder no mesmo quadro. Uma entrada com fade chegou a existir em 05-08-26 e saiu no mesmo dia — o dono do produto pediu prioridade para performance. Se um dia voltar: só a ENTRADA deve ser animada. Animar a saída também dobraria o tempo de cada troca, que é o que torna o recurso cansativo. */ /* ---------- Precificar: o quadro é FULL-BLEED ---------- A tela de precificação é o index.html carregado num