/* ============================================================ TGAD — camada DESKTOP p/ FEIRANTE + GESTÃO (>=1024px). Os apps são mobile-first (shell .app de coluna única + nav inferior). Feirante (painel da banca) e Gestão (administração da feira) são back-office — gente usa no computador. Esta camada só age onde `html.af-desk` está presente (definido por um script inline no , ver build.mjs) — ou seja, nas áreas comerciante / gestao / cadastro-feirante / perfil-feirante. ⚠️ Consumidor e Entregador NÃO são afetados (não recebem .af-desk). ⚠️ Mobile/tablet (<=1023px) fica IDÊNTICO — tudo aqui é @media >=1024. ============================================================ */ /* marca da sidebar (injetada na nav pelo app.js): escondida por padrão, só aparece no trilho lateral do desktop */ .bottomnav__brand{display:none} .bottomnav__secao{display:none} @media (min-width:1024px){ html.af-desk{ --af-rail:256px; --af-content:1180px; } html.af-desk, html.af-desk body{ height:100%; overflow:hidden; background:var(--surface); } /* ───────────── SIDEBAR — a bottomnav vira trilho lateral fixo ───────────── */ html.af-desk .bottomnav{ top:0; bottom:0; left:0; right:auto; width:var(--af-rail); height:100dvh; max-width:none; margin:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; padding:18px 14px; border-top:0; border-right:1px solid var(--outline); box-shadow:none; background:var(--card); overflow-y:auto; } html.af-desk .bottomnav__brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 16px; margin-bottom:6px; border-bottom:1px solid var(--surface-2); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink); } html.af-desk .bottomnav__brand img{ width:32px; height:32px; border-radius:9px; flex:0 0 auto; } html.af-desk .bottomnav a{ flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:14px; padding:11px 14px; border-radius:12px; font-size:14.5px; font-weight:600; color:var(--on-surface-variant); white-space:nowrap; transition:background .15s,color .15s; } html.af-desk .bottomnav a .material-symbols-outlined{ font-size:23px; } html.af-desk .bottomnav a:hover{ background:var(--surface-2); color:var(--on-surface); } html.af-desk .bottomnav a.is-active{ background:var(--secondary-container); color:var(--primary); } html.af-desk .bottomnav a.is-active .material-symbols-outlined{ font-variation-settings:'FILL' 1; } html.af-desk .bottomnav__cart{ position:static; margin-left:auto; top:auto; right:auto; transform:none; } /* ───────────── telas com nav (painel): sidebar + conteúdo largo ───────────── .app é flex-column. Centralizar cada filho com margin:0 auto NÃO funciona (margin auto em flex-item absorve a folga e encolhe o item à largura do conteúdo). Em vez disso: align-items:center centraliza no eixo cruzado e cada filho direto recebe width:100% + max-width → vira uma coluna de leitura larga e centrada, com o conteúdo (grids/cards) esticando junto. */ html.af-desk body[data-nav] .app{ max-width:none; margin:0 0 0 var(--af-rail); padding-bottom:96px; align-items:center; /* 96: o FAB do assistente (56px a 20px do fundo) nao cobre o ultimo botao */ } html.af-desk body[data-nav] .app > *{ width:100%; max-width:var(--af-content); } html.af-desk body[data-nav] .appbar{ padding:18px 32px; background:var(--surface); } html.af-desk body[data-nav] .container{ padding-left:32px; padding-right:32px; } /* ───────────── telas de fluxo (sem nav): coluna central focada ───────────── */ html.af-desk body:not([data-nav]) .app{ max-width:820px; margin:0 auto; box-shadow:var(--shadow-1); background:var(--surface); } /* cadastro = formulário enxuto */ html.af-desk[data-route="cadastro-produtor"] body:not([data-nav]) .app{ max-width:560px; } html.af-desk[data-route="cadastro-empresa"] body:not([data-nav]) .app{ max-width:560px; } /* ───────────── grids aproveitam a largura ───────────── */ html.af-desk .grid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; } html.af-desk .catgrid{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:14px; } html.af-desk .hscroll>*{ flex:0 0 240px; } /* ───────────── barras fixas (actionbar/savebar/buybar) alinhadas ao conteúdo ───────────── */ html.af-desk body[data-nav] :is(.buybar,.actionbar,.savebar){ left:var(--af-rail); right:0; max-width:var(--af-content); margin:0 auto; } html.af-desk body:not([data-nav]) :is(.buybar,.actionbar,.savebar){ left:0; right:0; max-width:820px; margin:0 auto; } html.af-desk[data-route="cadastro-produtor"] body:not([data-nav]) :is(.buybar,.actionbar,.savebar){ max-width:560px; } /* ───────────── telas de compra do cliente ───────────── */ /* carrinho: o rodapé do total ficava solto no meio da tela; alinha com o conteúdo, no pé, e a lista reserva a altura dele */ html.af-desk body[data-nav] .cartfoot{ left:var(--af-rail); right:0; bottom:0; max-width:var(--af-content); margin:0 auto; } html.af-desk body[data-nav] .app.app--withfoot{ padding-bottom:260px; } /* produto: a foto quadrada ocupava a coluna inteira (~790 px) e empurrava preço e descrição para baixo da dobra */ html.af-desk .prod-img{ aspect-ratio:auto; height:min(46vh,420px); } /* "Carrinho" no menu lateral: o número vai para o fim da linha, depois do nome (ficava entre o ícone e o nome) */ html.af-desk .bottomnav__cart{ order:2; } /* ───────────── sheet inferior vira diálogo central ───────────── */ html.af-desk .sheet{ left:50%; right:auto; bottom:auto; top:50%; width:480px; max-width:92vw; margin:0; border-radius:24px; max-height:84dvh; transform:translate(-50%,-48%); opacity:0; pointer-events:none; transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .2s; box-shadow:var(--shadow-3); } /* sheet fechado fica centralizado e invisível (opacity:0) no desktop; sem isto ele continua sobre o centro da tela e engole cliques de outro sheet aberto */ html.af-desk .sheet.open{ transform:translate(-50%,-50%); opacity:1; pointer-events:auto; } html.af-desk .sheet__grip{ display:none; } html.af-desk .af-cookie{ left:auto; right:24px; bottom:24px; max-width:380px; margin:0; } /* ───────────── hovers (mouse) — feedback que não existe no toque ───────────── */ html.af-desk .pcard{ cursor:pointer; transition:transform .14s,box-shadow .2s; } html.af-desk .pcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); } html.af-desk .fcard{ transition:transform .14s,box-shadow .2s; } html.af-desk .fcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); } html.af-desk .pcard__add:hover, html.af-desk .iconbtn:hover, html.af-desk .btn:hover{ filter:brightness(1.05); } html.af-desk .row:hover{ background:var(--surface-1); } html.af-desk .optrow:hover{ background:var(--surface-2); border-radius:12px; } /* ───────────── ajustes por tela ───────────── */ /* produtos: o FAB flutuante (padrão mobile) fica solto no desktop e já há o CTA "Novo produto" no topo da tela → esconde o flutuante */ html.af-desk .fab{ display:none; } /* novo-produto: o dropzone de foto não precisa ocupar a coluna inteira */ html.af-desk .photo-pick{ max-width:440px; } /* scrollbar discreta (combina com a paleta) */ html.af-desk .app::-webkit-scrollbar, html.af-desk .bottomnav::-webkit-scrollbar{ width:10px; } html.af-desk .app::-webkit-scrollbar-thumb, html.af-desk .bottomnav::-webkit-scrollbar-thumb{ background:var(--outline); border-radius:8px; border:3px solid var(--surface); } html.af-desk .app::-webkit-scrollbar-thumb:hover{ background:var(--outline-strong); } } /* monitores grandes: mais respiro de leitura */ @media (min-width:1500px){ html.af-desk{ --af-content:1320px; } } /* ============================================================ GESTÃO (admin) — casca portada do painel B2B do AIFEIRA (Aifeira-Front-B2B, apps/central: packages/ui/app-shell.tsx e theme.css, estrutura Atlas/Asaas). Cores continuam as da TGAD (as variáveis --primary/--card/--outline já são a marca) — só a FORMA (pílula, borda fina no cartão, cabeçalho sólido) vem de lá. Hoje é a casca do PAINEL ÚNICO da TGAD (data-nav="painel": produção + gestão); "gestao" fica só para a tela antiga servida antes do redirecionamento (o app.js troca o atributo para "painel" ao carregar). */ @media (min-width:1024px){ /* trilho: pílulas com seções tituladas ("Operação"/"Plataforma"), como o app-shell.tsx do central */ html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .bottomnav{ width:268px; padding:20px 14px 16px; gap:2px; background:var(--card); } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .bottomnav__brand{ padding:2px 10px 16px; margin-bottom:8px; border-bottom:1px solid var(--outline); } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .bottomnav__secao{ display:block; padding:14px 16px 6px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); opacity:.75; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .bottomnav__secao:first-of-type{ padding-top:4px; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .bottomnav a{ border-radius:9999px; padding:9px 16px; font-size:13.5px; gap:12px; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .bottomnav a.is-active{ font-weight:700; box-shadow:inset 0 0 0 1px rgba(18,52,84,.08); } /* cabeçalho: sólido, com borda embaixo em vez do blur; flex-shrink:0 pra não encolher dentro do .app (coluna flex) quando a tela tem mais conteúdo que a viewport */ html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .appbar{ flex:0 0 auto; height:68px; padding:0 28px; background:var(--card); backdrop-filter:none; border-bottom:1px solid var(--outline); } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .appbar .muted{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; } /* a serifada é a assinatura da marca (login, landing) — a gestão tinha ficado só em Inter, que é o que dava a cara de template genérico de admin. Título e o número grande do hero puxam pra a mesma família, o resto (grade densa de números) continua em Inter por legibilidade. */ html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .appbar .h2{ font-family:var(--font-display); font-size:20px; font-weight:600; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .kpi-hero__value{ font-family:var(--font-display); font-weight:600; letter-spacing:0; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .appbar .iconbtn{ background:transparent; border:1px solid var(--outline); } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .appbar .iconbtn:hover{ background:var(--surface-2); } /* cartões: borda fina + cantos mais abertos (rounded-xl do Atlas), sombra quase nula */ html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) :is(.panel,.kpi,.lcard){ border:1px solid var(--outline); border-radius:16px; box-shadow:0 1px 2px rgba(11,33,53,.05); transition:box-shadow .15s,transform .15s; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) :is(.panel,.kpi,.lcard):hover{ box-shadow:0 4px 14px rgba(11,33,53,.08); transform:translateY(-1px); } /* o azul genérico de dashboard de IA vira a tinta navy da própria marca (mesma do hero da landing) */ html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .kpi-hero{ border-radius:20px; background:var(--banner); } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .kpi__icon{ border-radius:12px; width:38px; height:38px; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .btn{ border-radius:9999px; font-weight:700; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .row{ border-radius:12px; padding:12px 10px; } html.af-desk body:is([data-nav="gestao"],[data-nav="painel"]) .row:hover{ background:var(--surface-1); } } /* ============================================================ PAINEL ÚNICO (app.js: painelMenu) — o trilho leva o pé da conta, o botão e a gaveta do celular somem; acesso da equipe em duas colunas; impressão sem menu e sem a trava de rolagem. ============================================================ */ @media (min-width:1024px){ /* o trilho da casca tem 268px: o conteúdo e as barras fixas começam depois dele */ html.af-desk body[data-nav="painel"]{ --af-rail:268px; } html.af-desk body[data-nav="painel"] .bottomnav{ display:flex; padding-bottom:0; } html.af-desk body[data-nav="painel"] .bottomnav__brand + .bottomnav__secao{ padding-top:4px; } html.af-desk body[data-nav="painel"] .bottomnav a .material-symbols-outlined{ font-size:21px; } /* o pé fica visível mesmo quando o menu rola (quem tem todos os módulos passa da altura da tela) */ html.af-desk body[data-nav="painel"] .painel-conta{ position:sticky; bottom:0; z-index:1; margin:12px -14px 0; padding:12px 14px 16px; background:var(--card); } html.af-desk body[data-nav="painel"] .bottomnav a.painel-conta__sino{ flex:0 0 auto; width:42px; height:42px; padding:0; gap:0; justify-content:center; border-radius:50%; border:1px solid var(--outline); color:var(--on-surface); font-size:inherit; } html.af-desk .painel-menu, html.af-desk .painel-gaveta{ display:none; } /* "Minha senha" vira diálogo central (regra .sheet acima): fechada some também da árvore de foco */ html.af-desk .sheet.painel-senha{ transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s linear .22s; } html.af-desk .sheet.painel-senha.open{ transition-delay:0s; } /* acesso da equipe: formulário à esquerda, lateral da marca à direita */ html.af-desk:is([data-route="painel-entrar"],[data-route="painel-convite"]) body:not([data-nav]) .app{ max-width:1080px; } html.af-desk .painel-acesso{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } html.af-desk .painel-acesso__lado{ display:flex; flex-direction:column; justify-content:space-between; gap:32px; position:relative; overflow:hidden; margin:16px 16px 16px 0; padding:40px 36px; border-radius:var(--radius-lg); background:var(--banner); color:var(--on-banner); } html.af-desk .painel-acesso__lado::before{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent) 0 1px,transparent 1px 22px); } html.af-desk .painel-acesso__lado > *{ position:relative; } html.af-desk .painel-acesso__lado img{ width:72px; height:72px; } html.af-desk .painel-acesso__lado h2{ margin:0; font-family:var(--font-display); font-weight:600; font-size:32px; line-height:1.15; color:var(--on-banner); } html.af-desk .painel-acesso__lado ul{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px; } html.af-desk .painel-acesso__lado li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; } html.af-desk .painel-acesso__lado li .material-symbols-outlined{ flex:0 0 auto; font-size:22px; color:var(--accent); } html.af-desk .painel-acesso__lado small{ font-size:12.5px; line-height:1.5; } } /* impressão do painel (separação, roteiro do motorista, listas): sem trilho, gaveta, chat nem avisos, e sem a trava de rolagem do layout de tela — sem isso a folha sai só com o pedaço que estava visível */ @media print{ body[data-nav="painel"] :is(.bottomnav,.painel-gaveta,.painel-menu,.afchat-fab,.afchat-panel,.afchat-overlay,.af-cookie,.af-versite,#af-toast-host){ display:none !important; } /* folha fechada e botão flutuante são fixos: no papel sairiam por cima do conteúdo em toda página */ body[data-nav="painel"] :is(.sheet:not(.open),.sheet-back,.fab){ display:none !important; } html:has(body[data-nav="painel"]), body[data-nav="painel"]{ height:auto !important; overflow:visible !important; } body[data-nav="painel"]::before{ display:none !important; } body[data-nav="painel"] .app{ height:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; box-shadow:none !important; animation:none !important; } body[data-nav="painel"] .appbar{ position:static !important; } }