/* ============================================================ PELE "PONTO" (modelo 24) sobre o tema do Cellos Gelato - Override das variáveis do styles.css: a cor de ação é o LARANJA da marca (#ff6b00 e o tom de tinta #b5410a); o resto é neutro, com verde/âmbar/vermelho/azul só em status. - Chrome novo (barra de Comando + Abas) e visões do protótipo. ============================================================ */ /* ===== voz de exibição: Vollkorn, arquivo local ===== Georgia é fonte de sistema: serve de reserva, não de marca. Vollkorn é open source (SIL OFL), uma serifa larga e redonda de padaria, que é o parente gráfico mais próximo de um letreiro de gelateria artesanal: calorosa sem ser brinquedo, e com algarismo firme, que é o que o dinheiro pede. Fraunces e Instrument Serif ficaram de fora de propósito: o detector do piso lista as duas como fonte gasta de interface gerada por IA. Dois pesos, 27 KB cada, sem rede: font-display:swap mostra o texto em Georgia enquanto chega. */ @font-face{ font-family:'Vollkorn'; font-style:normal; font-weight:600; font-display:swap; src:url('brand/fontes/vollkorn-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Vollkorn'; font-style:normal; font-weight:700; font-display:swap; src:url('brand/fontes/vollkorn-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ --bg:#f9f9fa; --surface:#ffffff; --surface-2:#f4f4f5; --line:#d3d3d9; --line-strong:#b2b2bb; --ink:#2e2e2e; --ink-2:#45454e; --muted:#68686f; /* ===== o laranja da marca entra no lugar do índigo (21/08) ===== O acento era #4657d8, o azul de painel de qualquer SaaS, e o laranja #ff6b00 da marca não aparecia em lugar nenhum do sistema. São dois papéis, não duas cores soltas: --brand laranja puro. Só em superfície grande com tinta ESCURA por cima (botão primário, seleção de texto) ou em área pequena. Branco sobre ele mede 2,86:1 e reprova em texto; a tinta escura --brand-ink mede 6,33:1 e passa com folga. --accent o mesmo laranja um degrau mais fechado, para o que precisa ser LIDO: link, chip ligado, foco, número em destaque. 5,36:1 sobre o fundo da página, 5,64:1 preenchido com texto branco. */ --brand:#ff6b00; --brand-2:#ff8a33; --brand-ink:#231208; --accent:#b5410a; --accent-forte:#8f3406; --accent-ink:#ffffff; --accent-soft:#f8ece6; --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--surface)); --accent-line:#e8c6b5; --accent-line:color-mix(in srgb, var(--accent) 30%, var(--surface)); --accent-2:#0f7a3f; --espresso:#1e1e22; --danger:#b02236; --danger-soft:#fbe9ec; --warn:#7a5206; --warn-soft:#faf1dc; --warn-line:#e0a020; --warn-ink:#6b5010; --danger-line:#eeb5bf; --ok-line:#cdeedd; --ok:#0e6d38; --ok-soft:#e2f2e9; /* azul de informação e de "editar" do vigia: era o mesmo índigo do acento, o que fazia informação e ação parecerem a mesma coisa. Agora é um azul de tinta próprio (6,83:1 no branco), família separada do laranja. */ --info:#1f5f8c; --info-soft:#e7f0f6; --tabbar:#ececee; --tab:#e0e0e3; --tab-x:#d5d5da; --grid-line:#f6f6f6; --surface-t:rgba(255,255,255,.92); --bg-2:#f4f4f5; --radius:12px; --radius-sm:9px; /* sombra puxada pro marrom da casa, não pro cinza azulado de painel */ --shadow-sm:0 1px 2px rgba(58,32,14,.07); --shadow:0 10px 26px -14px rgba(58,32,14,.20); --shadow-lg:0 24px 56px -22px rgba(58,32,14,.28); --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* o dinheiro tem voz própria: Vollkorn vem do arquivo local em brand/fontes, Georgia fica de reserva enquanto o arquivo carrega */ --serif:'Vollkorn','Georgia','Times New Roman',serif; --mono:ui-monospace,'SF Mono',Menlo,monospace; /* ===== ESCALA DE LETRA: 8 degraus (21/08) ===== Eram 23 tamanhos em px e uns 30 em rem, com vizinhos a meio pixel de distância: isso não é hierarquia, é ruído. Agora são 8 degraus declarados, em rem (respeita a letra que a pessoa escolheu no navegador), e nada funcional abaixo de 11 px. Tamanho novo na tela sai daqui, não do olho. */ --t-1:.6875rem; /* 11px selo, rótulo do menu de baixo, legenda */ --t-2:.75rem; /* 12px metadado, chip, etiqueta */ --t-3:.8125rem; /* 13px rótulo de campo, tabela densa, botão pequeno */ --t-4:.875rem; /* 14px corpo */ --t-5:1rem; /* 16px destaque, campo de formulário */ --t-6:1.25rem; /* 20px título de cartão e de janela */ --t-7:1.625rem; /* 26px título de tela e número de KPI */ --t-8:2.125rem; /* 34px dinheiro grande e visor da balança */ } body{background:var(--bg);color:var(--ink);font-family:var(--font)} /* O conjunto de ícones é duotone: traço em currentColor e uma sombra sólida por baixo que vinha com fill="#4657d8" escrito na marcação (o índigo antigo, em TODO ícone do sistema). Atributo de apresentação perde para a folha de estilo, então a sombra passa a ser o laranja da marca sem tocar no shell. Dentro de botão laranja ela acompanha a tinta, senão sumiria no fundo. */ svg.duo > g:first-child{fill:var(--brand)} .pbtn svg.duo > g:first-child,.btn-primary svg.duo > g:first-child, .bb-pdv svg.duo > g:first-child,.chip.active svg.duo > g:first-child{fill:currentColor} /* ===== as superfícies que o navegador desenha sozinho (21/08) ===== Seleção, cursor de texto, barra de rolagem e anel de foco vinham com o padrão do navegador, que não é de projeto nenhum. Agora são da casa. */ ::selection{background:var(--brand);color:var(--brand-ink)} html{caret-color:var(--accent);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box} /* anel de foco único: laranja, 2px, afastado 2px do elemento. Só no teclado (:focus-visible), então o mouse não vê anel nenhum. */ :where(a,button,input,select,textarea,summary,[tabindex],[role="button"],[contenteditable]):focus-visible{ outline:2px solid var(--accent);outline-offset:2px} a[href]{text-underline-offset:3px;text-decoration-thickness:1px} /* número em coluna alinha por baixo: dinheiro, KPI e tabela com largura fixa de algarismo, senão a vírgula dança de linha em linha */ .kpi-value,.ct-val,.bal-total b,.split-val,.money,td.ta-right,td.ta-center, .cp b.v,.bb b.big,.bb b.mid,.fk b,.mw b.v,.parea .n,.ocore b,.bigring b{ font-variant-numeric:lining-nums tabular-nums} .page-title{font-weight:700;letter-spacing:-.02em} .card-title,h1,h2,h3{letter-spacing:-.01em} .kpi-value{font-weight:700} /* a serifa da marca fica onde a voz importa: título da tela, número de KPI e dinheiro grande. Texto corrido, rótulo e botão seguem no Inter. */ .pvh h1,.bb b.big,.bigring b,.bal-total b,.eco-hero b.v,.ocore b{font-family:var(--serif);font-weight:700} /* ===== moldura Ponto: topo (Comando) ===== */ .ptop{background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:5px 16px;flex:none;position:relative;z-index:50} .pbrand{font-weight:800;font-size:var(--t-4);white-space:nowrap} .pbrand span{color:var(--accent)} .pbrand .demo{color:var(--muted);font-size:var(--t-1);font-weight:700;letter-spacing:.06em;margin-left:6px} /* loja de verdade: o selo deixa de ser aviso e passa a ser confirmação */ .pbrand .demo.real{color:var(--ok,#2f7d32)} .cmdwrap{flex:1;max-width:560px;margin:0 auto;position:relative} .cmd{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line-strong);border-radius:9px;padding:5px 12px;color:var(--muted);cursor:text;background:var(--surface-2)} .cmd:hover{border-color:var(--accent-line)} .cmd.open{border-color:var(--accent);background:var(--surface);box-shadow:0 6px 18px -8px rgba(0,0,0,.45)} .cmd input{border:none;outline:none;flex:1;font-family:inherit;font-size:var(--t-3);background:none;color:var(--ink)} .kbd{font-size:var(--t-1);border:1px solid var(--line-strong);border-radius:5px;padding:1px 7px;color:var(--muted)} .cmddrop{position:absolute;top:112%;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 28px -12px rgba(58,32,14,.34);padding:7px;z-index:80;max-height:390px;overflow:auto;display:none} .cmddrop.show{display:block} .cmdsec{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:8px 10px 3px} .cmditem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:var(--t-3)} .cmditem:hover{background:var(--accent-soft);color:var(--accent);font-weight:600} .cmditem .hint{margin-left:auto;font-size:var(--t-1);color:var(--muted);font-weight:400} .ptopstatus{display:flex;gap:14px;align-items:center;white-space:nowrap;font-size:var(--t-2)} /* ===== abas ===== */ /* Faixa do que NAO subiu pro servidor (19/08): fica em toda tela enquanto existir lancamento recusado. Vermelha de proposito: e dinheiro/controle que a pessoa acha que salvou. Some sozinha quando a lista zera. */ .precusa-faixa{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--danger-soft,#fdeae8);border-bottom:1px solid var(--danger,#b83125); color:var(--danger,#b83125);padding:9px 14px;font-size:var(--t-3);line-height:1.45} .precusa-txt{flex:1 1 260px;min-width:0} .precusa-txt b{font-weight:800} .precusa-bt{flex:none;min-height:36px;background:var(--danger,#b83125);color:#fff;border:0; border-radius:8px;padding:8px 14px;font:inherit;font-size:var(--t-3);font-weight:700;cursor:pointer} .precusa-bt:hover{filter:brightness(1.08)} @media (max-width:480px){.precusa-faixa{padding:8px 11px;font-size:var(--t-2)} .precusa-bt{width:100%;justify-content:center}} .ptabs{background:var(--tabbar);display:flex;align-items:flex-end;gap:3px;padding:3px 12px 0;flex:none;overflow-x:auto;scrollbar-width:thin} .ptab{display:flex;align-items:center;gap:7px;background:var(--tab);border-radius:8px 8px 0 0;padding:5px 11px;font-size:var(--t-2);font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;border:1px solid transparent;border-bottom:none;flex:none} .ptab.on{background:var(--bg);color:var(--ink);border-color:var(--line-strong)} .ptab .x{color:var(--muted);font-weight:400;padding:0 3px;border-radius:4px} .ptab .x:hover{background:var(--tab-x);color:var(--ink-2)} .ptab.plus{background:none;color:var(--muted);padding:8px 10px;font-size:var(--t-5)} .ptab .tdot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none} /* conteúdo */ #content{flex:1;overflow:auto;padding:20px 22px 46px} /* 20/08 (pedido do Felipe: "essa margem está muito grande, quero usar mais espaço pra dar mais zoom e visibilidade"): o teto de 1220px sobrava margem vazia dos dois lados em monitor grande. Agora o conteúdo usa a tela e só para em 1720px, largura em que uma linha ainda se lê sem perder o começo. */ #content>.pview,#content>*{max-width:min(1720px,100%);margin-left:auto;margin-right:auto} /* 100vh no celular NAO e a tela que a pessoa esta vendo: e a tela como se a barra do navegador estivesse recolhida. Como o corpo e overflow:hidden e o menu de baixo (#pdock) e o ultimo filho desta coluna, a borda de baixo dele ficava em 100vh, fora da area visivel, e nao havia como rolar ate la. O menu principal do celular era inalcancavel. 100dvh e a tela de verdade. A linha de 100vh fica primeiro como reserva: navegador que nao conhece dvh descarta a segunda e segue como estava. */ body.ponto{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden} /* ===== utilidades Ponto ===== */ .pst{font-weight:600;display:inline-flex;align-items:center;gap:5px;font-size:var(--t-1)} .pst i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none} .pok{color:var(--ok)}.pok i{background:var(--ok)} .pwarn{color:var(--warn)}.pwarn i{background:var(--warn-line)} .pbad{color:var(--danger)}.pbad i{background:var(--danger)} .pinfo{color:var(--accent)}.pinfo i{background:var(--accent)} /* "vendo como ": é a única porta de volta quando o cargo esconde as Configurações, então tem fundo e não passa por enfeite */ .pcargo{color:var(--accent-ink);background:var(--accent);padding:3px 9px;border-radius:20px} .pcargo i{background:var(--accent-ink);opacity:.85} .peyebrow{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)} .pnum{font-variant-numeric:tabular-nums} .pmuted{color:var(--muted)} /* O botão primário é o lugar de mostrar a marca: laranja puro com tinta escura por cima (6,33:1). Branco sobre este laranja mediria 2,86:1. */ .pbtn{background:var(--brand);color:var(--brand-ink);border:none;border-radius:9px;padding:8px 14px;font-weight:700;font-size:var(--t-2);font-family:inherit;cursor:pointer;transition:filter .15s,box-shadow .15s} .pbtn:hover{filter:brightness(1.04);box-shadow:0 5px 14px -8px rgba(58,32,14,.55)} .pbtn.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--accent-line);font-weight:600} .pbtn.ghost:hover{border-color:var(--accent);background:var(--accent-soft);box-shadow:none} .pbtn.sm{padding:5px 10px;font-size:var(--t-1);border-radius:7px} .pcard{background:var(--surface);border:1px solid var(--line);border-radius:12px} /* respiro: o título recebe mais espaço em cima do que embaixo, senão ele parece pertencer ao bloco anterior */ .pvh{display:flex;align-items:center;gap:12px;margin:6px 0 18px;flex-wrap:wrap} .pvh h1{font-size:var(--t-7);font-weight:700;letter-spacing:-.015em} .pvh .sp{flex:1} .duo{flex:none;vertical-align:middle} .parow{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:8px 0;font-size:var(--t-2);gap:8px} /* ===== Início (bento) ===== */ .bento{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.15fr;grid-auto-rows:150px;gap:12px} .bb{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;position:relative;cursor:pointer;transition:box-shadow .15s,transform .15s} .bb:hover{box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-1px)} .bb .ic{position:absolute;top:13px;right:13px} .bb b.big{font-size:var(--t-7);margin-top:5px} .bb b.mid{font-size:var(--t-5);margin-top:5px} .bb .foot{margin-top:auto;font-size:var(--t-2)} .bb-caixa{grid-row:span 2;border:1.5px solid var(--accent);box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent)} .bspark{display:flex;align-items:flex-end;gap:5px;height:74px;margin-top:14px} .bspark i{flex:1;background:color-mix(in srgb, var(--accent) 24%, transparent);border-radius:3px;min-height:3px} .bspark i.hot{background:var(--accent)} .bb-pdv{background:var(--brand);color:var(--brand-ink);border:none;justify-content:center;gap:6px} .bb-pdv .peyebrow{color:var(--brand-ink)!important;opacity:.82} .brows{display:flex;flex-direction:column;gap:6px;margin-top:8px;font-size:var(--t-2)} .brows .r{display:flex;justify-content:space-between} /* ===== Cockpit ===== */ .cock{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:10px} .cp{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;font-size:var(--t-1);overflow:hidden} .cp b.v{font-size:var(--t-6);margin-top:2px} .cbars{display:flex;align-items:flex-end;gap:4px;flex:1;margin-top:6px} .cbars i{flex:1;background:color-mix(in srgb, var(--accent) 26%, transparent);border-radius:2px;min-height:2px} .cbars i.hot{background:var(--accent)} .cmini{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:4px 0;font-size:var(--t-1);gap:6px} .cmini span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pring{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:auto} .pring i{width:62px;height:62px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--t-4);font-style:normal} /* ===== Calendário ===== */ .callay{display:grid;grid-template-columns:1.9fr 1fr;gap:14px} .calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .calwd{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;padding-bottom:2px} .calday{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 8px;font-size:var(--t-1);display:flex;flex-direction:column;gap:2px;min-height:72px;cursor:pointer} .calday:hover{border-color:var(--accent-line)} .calday .n{font-weight:600;color:var(--muted);font-size:var(--t-1)} .calday .v{font-weight:700;font-size:var(--t-2)} .calday.on{border:1.5px solid var(--accent);background:var(--accent-soft)} .calday.fut{background:var(--surface-2);color:var(--muted)} .calday.vazio{border:none;background:none;cursor:default} .calev{font-size:var(--t-1)} /* ===== Meu dia ===== */ .tl{position:relative;max-width:660px} .tl::before{content:"";position:absolute;left:64px;top:6px;bottom:6px;width:2px;background:var(--line)} .tle{display:flex;align-items:flex-start;margin-bottom:12px;position:relative} .tlh{width:48px;flex:none;text-align:right;padding-right:12px;font-weight:600;color:var(--muted);font-size:var(--t-1);padding-top:9px} .tld{width:11px;height:11px;border-radius:50%;flex:none;margin:10px 12px 0 -4.5px;border:2.5px solid var(--bg);z-index:1} .tlc{flex:1;border:1px solid var(--line);border-radius:11px;padding:10px 13px;background:var(--surface);display:flex;align-items:center;gap:10px} .tlc.hot{border-color:var(--warn-line);background:var(--warn-soft)} .tlc.done{opacity:.55} .tlc .cta{margin-left:auto;font-size:var(--t-1);font-weight:700;color:var(--accent);cursor:pointer;white-space:nowrap} /* ===== Planta ===== */ .planta{display:grid;grid-template-columns:1.7fr 1fr;gap:14px} .mapgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-auto-rows:132px;gap:10px;padding:14px;border-radius:12px;border:1px solid var(--line);background: var(--surface) linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/100% 24px, var(--surface) linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/24px 100%} .parea{border:1.5px dashed var(--line-strong);border-radius:11px;background:var(--surface-t);padding:11px 13px;display:flex;flex-direction:column;position:relative;cursor:pointer} .parea:hover{border-style:solid;border-color:var(--accent-line)} .parea b{font-size:var(--t-3)} .parea .n{font-size:var(--t-6);font-weight:700;margin-top:2px} .parea .foot{margin-top:auto} .parea.alert{border:1.5px solid var(--warn-line);background:var(--warn-soft)} .parea.on{border:1.5px solid var(--accent);background:var(--accent-soft)} .pabadge{position:absolute;top:-8px;right:12px;background:var(--warn-line);color:#fff;font-size:var(--t-1);font-weight:700;border-radius:99px;padding:2px 9px} /* ===== Órbita ===== */ .orb{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:stretch} .orbfield{position:relative;min-height:430px;background:var(--surface);border:1px solid var(--line);border-radius:14px} .ocore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:var(--surface);border:1.5px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 38px color-mix(in srgb, var(--accent) 18%, transparent);z-index:2;text-align:center} .ocore b{font-size:var(--t-6)} .osat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:var(--t-1);font-weight:600;color:var(--ink);z-index:2;cursor:pointer;width:76px;margin-left:-38px;margin-top:-33px;text-align:center} .osat .b{width:52px;height:52px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.07);position:relative;transition:transform .15s} .osat:hover .b{transform:scale(1.1);border-color:var(--accent-line)} .osat.on .b{border:1.5px solid var(--accent)} .osat .b em{position:absolute;top:-1px;right:-1px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--surface)} .oline{position:absolute;background:var(--line-strong);height:1.5px;transform-origin:0 50%;z-index:1} /* ===== Placar ===== */ .placar{display:grid;grid-template-columns:auto 1fr 1fr;gap:16px;align-items:start} .bigring{width:210px;height:210px;border-radius:50%;display:flex;align-items:center;justify-content:center} .bigring>div{width:168px;height:168px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .bigring b{font-size:var(--t-8)} .pgoal{padding:12px 15px} .gbar{height:9px;border-radius:99px;background:var(--surface-2);margin-top:8px;overflow:hidden} .gbar i{display:block;height:100%;border-radius:99px;background:var(--accent)} .rrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-3)} .pmed{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:var(--t-1);font-weight:700;flex:none} /* ===== Feed ===== */ .feedlay{display:grid;grid-template-columns:1.6fr 1fr;gap:14px} .fpost{display:flex;gap:12px;align-items:flex-start;padding:12px 15px} .fav{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex:none} .fpost .t{font-size:var(--t-1);color:var(--muted)} .fpost .acts{display:flex;gap:14px;margin-top:6px;font-size:var(--t-2);font-weight:700;color:var(--accent)} .fpost .acts span{cursor:pointer} /* ===== Kanban ===== */ .kb{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start} .kcol{background:var(--surface-2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:220px} .kch{display:flex;justify-content:space-between;font-weight:700;font-size:var(--t-2);padding:0 4px} .kcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.05)} .kcard b{font-size:var(--t-3);display:block} .kcard .sub{font-size:var(--t-1);margin-top:3px;display:block} .kcard .adv{display:block;margin-top:8px;font-size:var(--t-1);font-weight:700;color:var(--accent);cursor:pointer} /* ===== Pendências (fila) ===== */ .fila{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);min-height:430px} .flist{border-right:1px solid var(--line);overflow:auto} .fit{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:3px} .fit:hover{background:var(--surface-2)} /* sem faixa na lateral (21/08): o item escolhido se anuncia pela tinta de fundo e pelo peso do texto, que é o que a pessoa lê primeiro */ .fit.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)} .fit.on .top{color:var(--accent);font-weight:700} .fit .top{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--t-3);gap:8px} .fdet{padding:16px 20px;display:flex;flex-direction:column;gap:12px} .fkpis{display:grid;grid-template-columns:1fr 1fr;gap:10px} .fk{border:1px solid var(--line);border-radius:10px;padding:10px 13px} .fk b{display:block;font-size:var(--t-5);margin-top:2px} .fbars{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:8px} .fbars i{flex:1;background:color-mix(in srgb, var(--accent) 26%, transparent);border-radius:3px;min-height:3px} .fbars i.hot{background:var(--accent)} /* ===== Explorador ===== */ .expl{display:grid;grid-template-columns:250px 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);min-height:430px} .ptree{border-right:1px solid var(--line);background:var(--surface-2);padding:12px 10px;font-size:var(--t-2)} .tn{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:7px;cursor:pointer;color:var(--ink)} .tn:hover{background:var(--surface-2)} .tn .ar{color:var(--muted);font-size:var(--t-1);width:9px} .tn.l1{padding-left:26px}.tn.l2{padding-left:43px} .tn.on{background:var(--accent-soft);color:var(--accent);font-weight:600} .pcrumb{padding:11px 16px;border-bottom:1px solid var(--line);font-size:var(--t-2);color:var(--muted)} .pcrumb b{color:var(--ink)} .trow{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;padding:9px 16px;border-bottom:1px solid var(--line);font-size:var(--t-3);align-items:center} .trow.h{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);background:var(--surface-2)} /* ===== Meu painel ===== */ .monte{display:grid;grid-template-columns:1.8fr 1fr;gap:14px} .mcanvas{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:140px;gap:11px;padding:14px;border-radius:12px;border:1px solid var(--line);background: var(--surface) linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/100% 26px, var(--surface) linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/26px 100%} .mw{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 14px;position:relative} .mw .del{position:absolute;top:9px;right:11px;color:var(--muted);cursor:pointer;font-size:var(--t-3)} .mw .del:hover{color:var(--danger)} .mw b.v{font-size:var(--t-6);display:block;margin-top:3px} .mghost{border:1.5px dashed var(--accent-line);background:color-mix(in srgb, var(--accent) 4%, transparent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:600;border-radius:12px} .mlib .li{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 13px;margin-top:8px;font-size:var(--t-3);font-weight:600;cursor:pointer} .mlib .li:hover{border-color:var(--accent);color:var(--accent)} .mlib .li .add{margin-left:auto;color:var(--accent);font-weight:800} /* toasts Ponto (reaproveita id do core se preciso) */ /* O aviso nascia a 18 px do fim da tela. No celular isso e ATRAS da barra de baixo (51,8 px medidos) e, no iPhone com entalhe, ainda atras da faixa do gesto de voltar pra casa: o aviso existia e ninguem via. Agora ele sobe a barra inteira mais a faixa de seguranca do aparelho. 78 px = 60 da barra (item de 48 px depois do patch de toque) + 18 px de folga. Quando nao ha barra de baixo, so a faixa de seguranca. */ #ptoasts{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:120} body.nav-baixo #ptoasts{bottom:calc(78px + env(safe-area-inset-bottom,0px))} @media (max-width:900px){ #ptoasts{bottom:calc(78px + env(safe-area-inset-bottom,0px))} } .ptoast{background:#2e2e2e;color:#fff;border-radius:10px;padding:10px 16px;font-size:var(--t-3);font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:all .25s} .ptoast.show{opacity:1;transform:none} .ptoast b{color:#8fe0b0} /* ===== Balança (função paga) ===== */ .bal-status{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:var(--t-4)} .bal-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(24,154,82,.15);flex:none;animation:balpulse 2s infinite} @keyframes balpulse{0%,100%{box-shadow:0 0 0 4px rgba(24,154,82,.15)}50%{box-shadow:0 0 0 7px rgba(24,154,82,.07)}} .bal-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;margin-bottom:16px} .bal-display{font-family:var(--mono);font-size:var(--t-8);font-weight:600;text-align:center;background:#17181b;color:#9adfb6;border-radius:12px;padding:22px 10px;letter-spacing:.02em;font-variant-numeric:tabular-nums} .bal-display.bal-estavel{color:#7ef0a8;text-shadow:0 0 18px rgba(126,240,168,.35)} .bal-plus{display:flex;gap:8px;flex-wrap:wrap} .bal-plu{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;cursor:pointer;font-family:inherit;min-width:120px} .bal-plu b{font-family:var(--mono);font-size:var(--t-5)} .bal-plu span{font-size:var(--t-2);color:var(--ink-2)} .bal-plu em{font-style:normal;font-size:var(--t-2);color:var(--muted)} .bal-plu.on{border-color:var(--accent);background:var(--accent-soft)} .bal-plu.on b{color:var(--accent)} .bal-forma{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 13px;cursor:pointer;font-family:inherit;font-size:var(--t-3);font-weight:600;color:var(--ink-2)} .bal-forma.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .bal-resumo{display:flex;flex-direction:column;margin:6px 0 12px} .bal-linha{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--t-4)} .bal-total{display:flex;justify-content:space-between;align-items:center;padding:12px 0 2px;font-size:var(--t-5)} .bal-total b{font-size:var(--t-7);font-variant-numeric:tabular-nums;color:var(--accent)} @media (max-width:900px){ .bal-layout{grid-template-columns:1fr} .bal-display{font-size:var(--t-7)} } /* ===== Caixa: assinatura, checklist, maquininha, split ===== */ .assin-canvas{width:100%;max-width:360px;height:130px;border:1.5px dashed var(--line-strong);border-radius:10px;background:var(--surface);touch-action:none;cursor:crosshair;display:block} .assin-view{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)} .assin-view img{display:block;max-width:280px;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface);margin-top:6px} .chk-linha{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer} .chk-linha input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent)} .chk-linha.feito{opacity:.65;background:var(--surface-2)} .chk-linha>div{flex:1} .maq-link{display:block;width:100%;text-align:center;background:none;border:none;color:var(--warn);font-weight:600;font-size:var(--t-3);cursor:pointer;font-family:inherit;padding:7px 0 2px;text-decoration:underline;text-underline-offset:3px} .split-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .split-card{border:1px solid var(--line);border-radius:11px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface);text-align:center} .split-val{font-size:var(--t-6);font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)} .split-qr svg{display:block;border:1px solid var(--line);border-radius:6px} /* ===== ORDEM 2: lotes, FEFO, etiquetas, impressora, pico, conciliação ===== */ .fefo-lote{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px;cursor:pointer;font-family:inherit;text-align:left;margin-bottom:7px;flex-wrap:wrap} .fefo-lote>div{flex:1;min-width:140px} .fefo-lote.rec{border-color:var(--ok)} .fefo-lote.on{border-color:var(--accent);background:var(--accent-soft)} .fefo-tag{font-size:var(--t-1);font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--ok-soft);color:var(--ok);border-radius:99px;padding:2px 8px} .inv-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .inv-row>span:first-child,.inv-row>b:first-child{flex:1;min-width:140px} .etq{border:2px solid #111;border-radius:6px;padding:12px 14px;background:#fff;max-width:320px;margin:0 auto;font-family:var(--mono)} .etq-titulo{font-size:var(--t-1);font-weight:700;letter-spacing:.08em;text-align:center;border-bottom:1.5px solid #111;padding-bottom:6px;margin-bottom:8px} .etq-prod{font-size:var(--t-5);font-weight:800;text-align:center;margin-bottom:8px;font-family:var(--font)} .etq-linha{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-2);padding:2.5px 0} .etq-rodape{margin-top:8px;border-top:1.5px dashed #111;padding-top:6px;font-size:var(--t-1);font-weight:700;text-align:center;letter-spacing:.05em} @media print{ body.print-etq *{visibility:hidden} body.print-etq .etq-area,body.print-etq .etq-area *{visibility:visible} body.print-etq .etq-area{position:fixed;left:0;top:0;width:100%} } .imp-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);border-radius:99px;padding:6px 12px;font-weight:600;font-size:var(--t-3);cursor:pointer;font-family:inherit;color:var(--ink-2)} .imp-dot{width:9px;height:9px;border-radius:50%;flex:none} .imp-dot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(24,154,82,.18)} .imp-dot.off{background:var(--danger);box-shadow:0 0 0 3px rgba(224,82,66,.18);animation:balpulse 1.2s infinite} .imp-fila{background:var(--danger);color:#fff;border-radius:99px;font-size:var(--t-1);font-weight:700;padding:1px 7px} .pico-selo{background:#b3540a;color:#fff;font-size:var(--t-1);font-weight:800;letter-spacing:.08em;border-radius:7px;padding:6px 11px;align-self:center} .offline-banner{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);border:1.5px solid var(--warn-line);border-radius:11px;padding:11px 14px;margin-bottom:14px;font-size:var(--t-4);color:var(--warn-ink)} .conc-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-4)} .conc-row.conc-head{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line)} .conc-row input[type=number]{width:110px;padding:7px 9px;border:1px solid var(--line-strong);border-radius:8px;font-family:inherit;text-align:right;justify-self:start} .conc-motivo input{width:100%;padding:7px 10px;border:1px solid var(--danger-line);background:var(--danger-soft);border-radius:8px;font-family:inherit;font-size:var(--t-3);margin:2px 0 6px} @media (max-width:700px){ .conc-row{grid-template-columns:1fr 1fr;row-gap:4px} } /* ===== ORDEM 3: qualidade, alergênicos, rótulos ===== */ .cuba-qual{margin-top:2px} .cuba-qual-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;gap:6px} .crono-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} .crono-col{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:7px;min-height:120px} .crono-col.hoje{border-color:var(--accent);background:var(--accent-soft)} .crono-col.drag-over{border:1.5px dashed var(--accent);background:var(--accent-soft)} .crono-head{font-size:var(--t-1);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px;text-align:center} /* o estado do bloco vira fundo e borda inteira, não faixa de um lado só */ .crono-bloco{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:8px;padding:6px 8px;margin-bottom:6px;cursor:grab;font-size:var(--t-2)} .crono-bloco b{display:block;font-size:var(--t-3);line-height:1.2;font-weight:700} .crono-bloco.concluida{background:var(--ok-soft);border-color:var(--ok-line);opacity:.6;cursor:default} .crono-bloco.em_producao{background:var(--warn-soft);border-color:var(--warn-line)} .causa-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)} .causa-nome{width:150px;flex:none;font-size:var(--t-4);font-weight:600} .causa-bar{flex:1;height:12px;background:var(--surface-2);border-radius:99px;overflow:hidden} .causa-bar i{display:block;height:100%;background:var(--warn);border-radius:99px} .curva-bar{display:flex;align-items:flex-end;gap:10px;height:90px} .curva-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px} .curva-col i{width:100%;max-width:56px;background:color-mix(in srgb, var(--accent) 32%, transparent);border-radius:4px 4px 0 0} .curva-col.atual i{background:var(--accent)} .curva-col span{font-size:var(--t-1);color:var(--muted);font-variant-numeric:tabular-nums} .alerg-selo{background:var(--warn-soft);border:1.5px solid var(--warn-line);border-radius:10px;padding:9px 13px;font-size:var(--t-3);color:var(--warn-ink);margin-bottom:12px} .alerg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px} .alerg-chk{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:var(--t-3);cursor:pointer} .alerg-chk input{accent-color:var(--danger)} .zap-card{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--ok-soft)} .tv-wrap{background:#141412;border-radius:14px;padding:22px 26px;color:#f2f0e8} .tv-titulo{font-size:var(--t-7);font-weight:800;margin-bottom:16px;letter-spacing:-.01em} .tv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .tv-sabor{display:flex;align-items:center;gap:11px;background:#1e1e1b;border-radius:11px;padding:12px 14px} .tv-sabor b{font-size:var(--t-5);color:#fff} .tv-cor{width:20px;height:20px;border-radius:50%;flex:none;border:2px solid rgba(255,255,255,.25)} .tv-icones{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end} .tv-ic{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:3px 8px;font-size:var(--t-1);font-weight:700;color:#fff} .tv-ic em{font-style:normal} .tv-rodape{margin-top:16px;font-size:var(--t-2);color:#8f8d82;text-align:center} .rotulo{border:2px solid #111;border-radius:8px;background:#fff;max-width:420px;margin:0 auto;padding:14px 16px;font-family:var(--font)} .rot-nome{font-weight:800;font-size:var(--t-5);text-align:center;border-bottom:2px solid #111;padding-bottom:6px;margin-bottom:8px} .rot-comp{background:var(--ok-soft);border:1px solid var(--ok);color:#14532d;border-radius:7px;padding:5px 9px;font-size:var(--t-2);font-weight:700;margin-bottom:6px;text-align:center} .rot-lupa{border:2px solid #111;border-radius:7px;padding:4px 9px;font-size:var(--t-2);margin-bottom:6px;display:flex;align-items:center;gap:4px;justify-content:center;background:#f5f5f2} .rot-sec{font-size:var(--t-2);line-height:1.45;margin-bottom:6px} .rot-alerg{font-size:var(--t-2);font-weight:800;margin-bottom:8px} .rot-tabela{width:100%;border-collapse:collapse;font-size:var(--t-2);margin-bottom:8px} .rot-tabela th,.rot-tabela td{border:1px solid #111;padding:3px 7px;text-align:left} .rot-tabela td:last-child{text-align:right;font-variant-numeric:tabular-nums} .rot-fab{font-size:var(--t-1);color:#333;margin-bottom:3px} .rot-lote{font-size:var(--t-1);font-weight:700} .rot-demo{margin-top:8px;border-top:1.5px dashed #111;padding-top:6px;font-size:var(--t-1);font-weight:700;text-align:center;letter-spacing:.05em;color:#8a3b2e} .restr-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px} .utensil-aviso{border:2px solid;border-radius:9px;padding:7px 11px;font-size:var(--t-3);margin-top:7px;text-align:center} @media (max-width:900px){ .crono-grid{grid-template-columns:repeat(2,1fr)} .tv-grid{grid-template-columns:1fr} } /* ===== Labor / Cubas ===== */ .cuba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px} .cuba-card{border:1px solid var(--line);border-radius:11px;padding:11px 13px;display:flex;flex-direction:column;gap:7px;background:var(--surface)} .cuba-top{display:flex;align-items:center;gap:8px} .cuba-top b{font-size:var(--t-4);flex:1;line-height:1.2} .cuba-cor{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:none;display:inline-block} .cuba-kg b{font-size:var(--t-5);font-variant-numeric:tabular-nums} .cuba-bar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden} .cuba-bar i{display:block;height:100%;border-radius:99px} .cuba-tags{display:flex;gap:6px;flex-wrap:wrap} .cuba-temp{font-family:var(--mono);font-size:var(--t-2);font-weight:600;background:var(--info-soft);color:var(--info);border-radius:6px;padding:2px 7px} .cuba-tec{font-family:var(--mono);font-size:var(--t-2);color:var(--muted);background:var(--surface-2);border-radius:6px;padding:2px 7px} .cuba-acts{display:flex;gap:5px;justify-content:flex-end;margin-top:auto} /* ===== Gerador de Vitrines ===== */ .vit-case{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:16px;padding:16px 18px;margin-bottom:16px;box-shadow:inset 0 2px 10px rgba(0,0,0,.06)} .vit-label{font-size:var(--t-2);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:center;margin:4px 0 8px} .vit-label.vit-cliente{margin:10px 0 0;color:var(--accent)} .vit-row{display:flex;gap:8px;margin-bottom:8px} .vit-slot{flex:1;min-height:74px;border-radius:10px;border:1px solid rgba(0,0,0,.14);cursor:pointer;font-family:inherit;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;box-shadow:inset 0 -8px 14px rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.12)} .vit-slot b{font-size:var(--t-2);color:#2a2620;text-shadow:0 1px 0 rgba(255,255,255,.4);line-height:1.15;text-align:center} .vit-slot .vit-temp{font-family:var(--mono);font-size:var(--t-1);background:rgba(255,255,255,.75);border-radius:5px;padding:1px 5px;color:#333} .vit-slot .vit-flags{position:absolute;top:4px;right:6px;font-size:var(--t-1);font-weight:800;color:#3b3630;text-shadow:0 1px 0 rgba(255,255,255,.5)} .vit-slot.vazio{background:var(--surface-2);border-style:dashed;color:var(--muted);font-size:var(--t-6);font-weight:700;box-shadow:none} .vit-slot:hover{filter:brightness(1.05)} .vit-dica{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-4);color:var(--ink-2);padding:6px 0;border-bottom:1px solid var(--line)} .vit-dica:last-child{border-bottom:none} .vit-escolha{display:flex;align-items:center;gap:9px;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 12px;cursor:pointer;font-family:inherit;text-align:left} .vit-escolha:hover{border-color:var(--accent)} .vit-escolha b{flex:1;font-size:var(--t-4)} /* ===== Vitrines da loja (mapa físico dentro de Cubas, ponto143) ===== A vitrine rola DENTRO da própria caixa em qualquer tamanho: vitrine de 24 cubas não pode esmagar os vãos nem empurrar a página de lado. */ .vit-case{overflow-x:auto;-webkit-overflow-scrolling:touch} .vit-row{min-width:max-content} .vit-slot{flex:1 0 84px;min-width:84px} .vitl-bloco{margin-bottom:6px} .vitl-head{display:flex;align-items:center;gap:8px;margin:2px 2px 6px;flex-wrap:wrap} .vitl-head .vitl-acts{margin-left:auto;display:flex;gap:4px} .vit-slot.vit-sug{border-style:dashed;box-shadow:none;background:var(--surface)} .vit-slot.vit-sug b{color:var(--ink-2);opacity:.85} html[data-tema="escuro"] .vit-slot.vit-sug b{color:var(--ink-2)} .vit-sug-tag{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:700} .vit-escolha-sug{border-color:var(--accent)} .vitl-fila{display:flex;flex-wrap:wrap;gap:6px} .vitl-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:var(--t-3)} .vitl-legenda{margin-top:10px;font-size:var(--t-4)} .vitl-legenda summary{cursor:pointer;color:var(--ink-2);font-weight:600} /* ===== Dúvidas & Ensinamentos ===== */ .glo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:11px} .glo-card{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--surface)} .ebk-capa{height:130px;border-radius:0;display:flex;align-items:flex-end;padding:14px} .ebk-capa b{color:#fff;font-size:var(--t-5);line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.25)} .foro-post{padding:13px 16px} .foro-resps{display:flex;flex-direction:column;gap:8px} /* resposta do fórum: o recuo e a tinta de fundo dizem "isto é resposta", sem barra colorida na lateral */ .foro-resp{background:var(--surface-2);border-radius:0 10px 10px 0;padding:8px 12px;margin-left:10px} .foro-btn{border:1px solid var(--accent-line);background:var(--surface);color:var(--accent);border-radius:8px;padding:5px 12px;font-weight:600;font-size:var(--t-3);cursor:pointer;font-family:inherit} .foro-btn:hover{background:var(--accent-soft)} @media (max-width:900px){ .vit-slot b{font-size:var(--t-1)} } .perfil-card{border:1.5px solid var(--line)} .perfil-card.on{border-color:var(--accent);background:var(--accent-soft)} .cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px} .cfg-linha{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;cursor:pointer;background:var(--surface)} .cfg-linha input{width:16px;height:16px;accent-color:var(--accent)} .cfg-linha.off{opacity:.55;background:var(--surface-2)} .eco-hero{display:flex;align-items:center;gap:16px;background:var(--ok-soft);border:1.5px solid var(--ok);border-radius:14px;padding:16px 20px;margin-bottom:16px;flex-wrap:wrap} .eco-hero b.v{font-size:var(--t-7);color:var(--ok);font-variant-numeric:tabular-nums} .eco-fonte{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--t-4)} .eco-fonte b.val{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ok)} /* ===== corpo com barra lateral ===== */ #pmain{flex:1;display:flex;overflow:hidden;min-height:0} #pmain #content{flex:1;overflow:auto} /* ===== trilha de pastas (embaixo das abas) ===== */ .pcrumbbar{background:var(--surface-2);border-bottom:1px solid var(--line);padding:3px 18px;font-size:var(--t-1);color:var(--muted);display:flex;align-items:center;gap:6px;flex:none} .pcrumbbar b{color:var(--ink);font-weight:600} .pcrumbbar .seg{cursor:pointer} .pcrumbbar .seg:hover{color:var(--accent)} .pcrumbbar .sep{color:var(--muted)} .pcrumbbar .seg-muted{color:var(--muted)} .todos-sec{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin:14px 0 7px} .todos-sec:first-child{margin-top:0} .todos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px} .todos-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 11px;cursor:pointer;font-family:inherit;font-size:var(--t-3);font-weight:600;color:var(--ink);text-align:left} .todos-item:hover{border-color:var(--accent);color:var(--accent)} /* ===== barra LATERAL (todos os módulos e visões sempre visíveis) ===== */ #pnav{width:212px;flex:none;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;padding:10px 8px 20px} .pnav-sec{font-size:var(--t-1);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:12px 10px 4px} .pnav-it{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:var(--t-3);font-weight:500;color:var(--ink)} /* ramificação do menu (11/08): setinha abre as telas do grupo */ .pnav-seta{margin-left:auto;padding:1px 7px;border-radius:6px;color:var(--muted);font-size:var(--t-4);line-height:1.3;transition:transform .15s;flex:none} .pnav-seta:hover{background:var(--surface-2);color:var(--ink)} .pnav-it.sub-aberto .pnav-seta{transform:rotate(90deg)} .pnav-it .nbadge{margin-left:auto} .pnav-it .nbadge + .pnav-seta{margin-left:6px} .pnav-sub{display:none;padding:1px 0 4px 26px} .pnav-sub.aberto{display:block} .pnav-subit{padding:5px 10px;border-radius:7px;cursor:pointer;font-size:var(--t-2);color:var(--ink-2)} .pnav-subit:hover{background:var(--surface-2);color:var(--ink)} .pnav-subit.on{color:var(--accent);font-weight:600} .pnav-it:hover{background:var(--surface-2)} .pnav-it.on{background:var(--accent-soft);color:var(--accent);font-weight:600} .pnav-it .nbadge{margin-left:auto;font-size:var(--t-1);font-weight:700;background:var(--warn-soft);color:var(--warn);border-radius:99px;padding:1px 7px} /* ===== barra EMBAIXO (dock) ===== */ /* env() sem valor de reserva derruba a declaracao INTEIRA em navegador que nao conhece a funcao, e a barra perdia ate o espacamento de 6 px. */ #pdock{display:flex;justify-content:space-around;align-items:center;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));flex:none} .pdock-it{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:var(--t-1);font-weight:600;color:var(--muted);cursor:pointer;padding:3px 8px;border-radius:9px;position:relative} .pdock-it:hover{background:var(--surface-2)} .pdock-it.on{color:var(--accent)} .pdock-it .nbadge{position:absolute;top:-2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--warn-line)} /* alternância lado ⇄ baixo */ body.nav-baixo #pnav{display:none} body.nav-lado #pdock{display:none} .pnavtoggle{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:8px;padding:6px 10px;font-size:var(--t-1);font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit;white-space:nowrap} .pnavtoggle:hover{border-color:var(--accent-line);color:var(--accent)} @media (max-width:900px){ #pnav{display:none!important} body.nav-lado #pdock{display:flex} .pnavtoggle{display:none} .pcrumbbar{padding:5px 12px} } @media (max-width:900px){ .bento{grid-template-columns:1fr 1fr} .cock{grid-template-columns:1fr 1fr} .callay,.planta,.orb,.feedlay,.monte{grid-template-columns:1fr} .kb{grid-template-columns:1fr} .fila{grid-template-columns:1fr}.flist{max-height:220px} .expl{grid-template-columns:1fr}.ptree{display:flex;overflow-x:auto;padding:8px} .placar{grid-template-columns:1fr} /* O bloco de status sumia INTEIRO no celular e levava junto o chip "vendo como · voltar", que e a UNICA saida do Ver como: o cargo simulado pode ter trancado as Configuracoes, entao nao existia volta e a pessoa ficava presa no cargo de atendente ate limpar o navegador. Agora o bloco fica, mas so com o chip do cargo; caixa aberto/fechado e a contagem de pendencias continuam de fora, que era o motivo legitimo da regra original: espaco. */ /* CONSERTO 30/07: o selo "N esperando internet" estava caindo nesta regra e sumindo no celular. O motivo original da regra era ESPACO, e vale pra selo informativo: caixa aberto, contagem de pendencias, coisas que a pessoa consulta quando quer. Nao vale pra AVISO de dado que ainda nao subiu, que e a unica coisa entre o dono e perder o dia inteiro se o aparelho quebrar. E justamente no celular, que e onde a internet cai, ele era escondido. Agora ficam de pe: o chip do cargo (a porta de volta do "Ver como") e o selo da fila. */ /* NADA DE TRANSBORDAR A 375 px (03/08): com flex:none o bloco nao encolhia, empurrava o "?" (Ajuda) pra fora da tela e nao havia rolagem pra voltar. */ .ptopstatus{display:flex;flex:0 1 auto;min-width:0;gap:6px;max-width:calc(100vw - 190px);overflow:hidden} .ptopstatus > .pst:not(.pcargo):not(#stfila){display:none} .ptopstatus > .pcargo{max-width:40vw;overflow:hidden} .ptopstatus > #stfila{max-width:44vw;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto} #content{padding:14px 12px 40px} } /* ---- Academia: leitor de e-books ---- */ .ebk-leitura{display:grid;grid-template-columns:290px 1fr;gap:14px;align-items:start} .ebk-mini-capa{border-radius:10px;padding:14px;display:flex;align-items:flex-end;min-height:86px} .ebk-mini-capa b{color:#fff;font-size:var(--t-5);line-height:1.25;text-shadow:0 1px 2px rgba(0,0,0,.25)} .ebk-cap-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 9px;border:0;background:none;border-radius:8px;cursor:pointer;font:inherit;font-size:var(--t-3);color:var(--ink);text-align:left} .ebk-cap-btn:hover{background:var(--bg-2)} .ebk-cap-btn.on{background:var(--accent-soft);font-weight:600} .ebk-cap-btn.lido{color:var(--ink-2)} .ebk-cap-num{width:20px;height:20px;border-radius:50%;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:var(--t-2);font-weight:600;flex:none} .ebk-cap-btn.on .ebk-cap-num{background:var(--accent);color:var(--accent-ink)} .ebk-pagina{padding:22px 26px;max-width:760px} .ebk-par{line-height:1.75;margin:0 0 14px;color:var(--ink);font-size:var(--t-5)} .ebk-progress{height:5px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin-top:10px} .ebk-progress-fill{height:100%;background:var(--ok);border-radius:3px} /* ---- Balanceador ---- */ .bd-layout{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:14px;align-items:start} .bd-medidor{padding:2px 0} .bd-trilho{position:relative;height:12px;background:var(--bg-2);border-radius:6px;margin:6px 0 2px} .bd-faixa{position:absolute;top:0;height:100%;background:var(--ok-line);border-radius:6px} .bd-pino{position:absolute;top:-3px;width:4px;height:18px;background:var(--ok);border-radius:2px;transform:translateX(-50%)} .bd-pino.fora{background:var(--danger)} /* ---- Central de Economia ---- */ .eco-num{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--t-3);flex:none} /* ---- tabelas largas roláveis ---- */ .table-scroll{overflow-x:auto} .table-scroll table{min-width:640px} @media (max-width:760px){ .ebk-leitura{grid-template-columns:1fr} .bd-layout{grid-template-columns:1fr} .ebk-pagina{padding:16px} } /* ---- mobile: nada estica a página na horizontal ---- */ @media (max-width:480px){ /* 7 itens + Mais cabem inteiros na tela do celular, sem rolagem lateral */ #pdock{justify-content:space-between;gap:0;padding-left:0;padding-right:0} .pdock-it{flex:1 1 0;min-width:0;padding:3px 0;max-width:100%} .pdock-it span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-1);letter-spacing:-.015em} /* O SELO DEMONSTRACAO / SUA LOJA FICA (03/08): escondido no celular, ninguem sabia se estava mexendo na demo ou na loja de verdade. Quem encolhe e o nome da marca, nao o aviso. */ .pbrand{min-width:0;overflow:hidden} .pbrand > b{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--t-3)} /* com o seletor de loja da rede no topo, o palmo fica curto: o selo continua visível SEMPRE, mas aprende reticências em vez de ser cortado seco; em loja real o selo é "SUA LOJA" (curto) e cabe inteiro */ /* o selo nunca encolhe nem ganha reticências (aviso); quem cede é a marca */ .pbrand .demo{flex:0 0 auto;min-width:0;overflow:visible;white-space:nowrap;font-size:var(--t-1);letter-spacing:0;padding:1px 2px;margin-left:3px} /* quando o seletor da rede (#prede) está do lado, não cabe marca + selo: quem sai é o NOME DA MARCA (decoração), nunca o aviso de demo/loja real. Navegador sem :has() só perde este refinamento (os dois ficam apertados). */ .pbrand:has(+ #prede) > b{display:none} .pbrand:has(+ #prede) .demo{flex:none;min-width:0;max-width:none;margin-left:0;letter-spacing:0;font-size:var(--t-1)} /* .ptop na frente pra ganhar do estilo que o shell injeta em runtime (130px) */ .ptop #prede>button{max-width:112px} .cmdwrap{min-width:0} #pcmd{min-width:0} #pcmd input{min-width:0;width:100%} .kbd{display:none} .ptop{gap:8px} /* selo e chip "vendo como" disputavam o mesmo palmo no 375 (17/08): o chip encostava por cima do "SUA LOJA". O selo NUNCA some (regra de 03/08, tem prova de guarda): os dois aprendem a encolher com reticências, cada um no seu palmo, sem sobreposição. */ .pbrand{display:flex;align-items:center} .pcargo{flex:0 1 auto;min-width:0;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* A BUSCA EXISTE NO CELULAR (18/08): antes o campo era espremido até 0px e o tour ensinava uma busca que não dava pra tocar. No telefone ela vira uma lupa de 34px; o toque abre o campo fixo no topo com a lista em tela cheia. */ .cmdwrap{flex:0 0 auto;margin-left:auto} #pcmd{padding:7px;min-width:34px;min-height:34px;justify-content:center;cursor:pointer} #pcmd input{display:none} #pcmd.open{position:fixed;top:8px;left:8px;right:8px;z-index:1200;justify-content:flex-start;padding:9px 12px} #pcmd.open input{display:block;width:100%} .cmddrop{position:fixed;top:54px;left:8px;right:8px;max-height:70vh} } /* ---- Loja de funções: exemplos ao vivo ---- */ .fx-ver-exemplo{display:flex;align-items:center;gap:6px;background:none;border:1px dashed var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:var(--t-3);font-weight:600;color:var(--accent);cursor:pointer;width:100%;justify-content:center} .fx-ver-exemplo:hover{background:var(--accent-soft);border-color:var(--accent)} .fx-mock{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px} .fx-display{font-size:var(--t-8);font-weight:800;font-variant-numeric:tabular-nums;text-align:center;background:#1c1c22;color:#7ee08a;border-radius:8px;padding:10px;letter-spacing:.04em} .fx-display.ok{color:#9df0a7} .fx-cuba{display:flex;flex-direction:column;gap:3px} .fx-barra{height:9px;background:var(--bg-2);border-radius:5px;overflow:hidden} .fx-barra-fill{height:100%;border-radius:5px} .fx-perda{display:flex;align-items:center;gap:7px;background:var(--danger-soft);border:1px solid var(--danger-line);border-radius:8px;padding:7px 9px} .fx-vitrine-fila{display:flex;gap:5px;margin:3px 0 6px} .fx-cubinha{flex:1;height:44px;border-radius:7px;display:flex;align-items:flex-end;justify-content:center;padding:3px;border:1px solid rgba(0,0,0,.12)} .fx-cubinha span{font-size:var(--t-1);font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)} .fx-cupom{font-variant-numeric:tabular-nums;max-width:300px;margin:0 auto;border-style:dashed} .fx-linha{display:flex;justify-content:space-between;font-size:var(--t-3);gap:12px} .fx-qr{width:64px;height:64px;margin:6px auto 0;border-radius:6px;background: repeating-conic-gradient(#1c1c22 0% 25%, #fff 0% 50%) 0 0/16px 16px;border:4px solid #fff;outline:1px solid var(--line)} .fx-chat{background:var(--surface-2)} .fx-msg{border-radius:10px;padding:7px 10px;max-width:88%} .fx-msg.deles{background:var(--surface);border:1px solid var(--line);align-self:flex-start} .fx-msg.nosso{background:var(--ok-soft);border:1px solid var(--ok-line);align-self:flex-end} .fx-msg p{margin:2px 0 0} .fx-pedido{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 11px} .fx-passos{margin:0 0 0 18px;padding:0;font-size:var(--t-4);color:var(--ink-2)} .fx-passos li{margin-bottom:5px;line-height:1.5} /* ============================================================ TEMAS (Aparência nas Configurações) claro = :root acima · suave = branco reduzido · escuro = noturno A cor da loja entra como --accent inline no (vence tudo); --accent-soft/--accent-line seguem via color-mix. ============================================================ */ html[data-tema="suave"]{ --bg:#f0ede6; --surface:#faf8f2; --surface-2:#efece3; --line:#c9c3b0; --line-strong:#aaa38e; --ink:#34312b; --ink-2:#4a463e; --muted:#67635a; --tabbar:#e6e2d6; --tab:#dbd6c8; --tab-x:#ccc7b8; --grid-line:#ebe8df; --surface-t:rgba(250,248,242,.92); --bg-2:#efece3; } html[data-tema="escuro"]{ color-scheme:dark; --bg:#101014; --surface:#1e1e26; --surface-2:#2a2a34; --line:#474754; --line-strong:#5e5e70; --ink:#f0f0f4; --ink-2:#d2d2dc; --muted:#a8a8b6; /* no escuro o laranja abre (o fechado some no fundo): #ff8a33 mede 7,04:1 no cartão e 8,08:1 no fundo da página, e a tinta por cima dele é escura */ --brand:#ff8a33; --brand-2:#ffa366; --brand-ink:#1b0f06; --accent:#ff8a33; --accent-forte:#ffa366; --accent-ink:#1b0f06; --accent-2:#3fbf7b; --espresso:#0e0e12; --danger:#f0687f; --danger-soft:#34212a; --danger-line:#5a3540; --warn:#d9a83f; --warn-soft:#2f2818; --warn-line:#96761f; --warn-ink:#e3c27a; --ok:#3fbf7b; --ok-soft:#1c2f24; --ok-line:#2c4d3a; --info:#6f9fd8; --info-soft:#1e2836; --tabbar:#0e0e13; --tab:#17171d; --tab-x:#2b2b34; --grid-line:#1f1f27; --surface-t:rgba(27,27,34,.92); --bg-2:#24242c; --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow:0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 22px 54px -22px rgba(0,0,0,.7); } /* campos nativos sem cor definida no CSS antigo seguem o tema */ html[data-tema="escuro"] input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]), html[data-tema="escuro"] select, html[data-tema="escuro"] textarea{background:var(--surface);color:var(--ink);border-color:var(--line-strong)} /* textos que usavam a cor "espresso" (marrom escuro) somem no fundo escuro */ html[data-tema="escuro"] .mk-gate h3, html[data-tema="escuro"] .mk-nome, html[data-tema="escuro"] .ud-store, html[data-tema="escuro"] .empty-store-card h3{color:var(--ink)} /* peças que são "papel impresso" ou vidro escuro: legíveis nos 2 temas */ html[data-tema="escuro"] .etq, html[data-tema="escuro"] .rotulo{color:#111} html[data-tema="escuro"] .etq .etq-prod,html[data-tema="escuro"] .rotulo b{color:#111} html[data-tema="escuro"] .modal-overlay{background:rgba(0,0,0,.6)} html[data-tema="escuro"] .cmd.open{box-shadow:0 6px 24px rgba(0,0,0,.5)} html[data-tema="escuro"] .ocore{box-shadow:0 12px 38px rgba(0,0,0,.5)} html[data-tema="escuro"] .vit-slot b{color:#2a2620} /* texto sobre a cor de destaque (segue o contraste da cor escolhida) */ .toast-ok,.chip.active,.pay-chips .pc.active,.nav-item.active{color:var(--accent-ink)} /* o botão primário é laranja PURO, e sobre laranja puro a tinta é escura: branco daria 2,86:1, a tinta escura dá 6,33:1 */ .btn-primary{background:var(--brand);color:var(--brand-ink)} /* ===== Configurações: bloco Aparência ===== */ .apar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px} .apar-card{border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;background:var(--surface)} .apar-card:hover{border-color:var(--accent-line)} .apar-card.on{border-color:var(--accent);background:var(--accent-soft)} .apar-mini{height:44px;border-radius:8px;border:1px solid var(--line);margin-bottom:8px;overflow:hidden;display:flex;flex-direction:column} .apar-mini i{display:block} .cor-grid{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .cor-bola{width:34px;height:34px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;padding:0;flex:none;box-shadow:inset 0 0 0 2px var(--surface)} .cor-bola.on{border-color:var(--ink)} .cor-bola:hover{transform:scale(1.1)} .cor-custom{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--line-strong);border-radius:99px;padding:5px 12px 5px 6px;font-size:var(--t-3);font-weight:600;color:var(--ink-2);cursor:pointer} .cor-custom input[type=color]{width:26px;height:26px;border:none;background:none;padding:0;cursor:pointer;border-radius:50%} /* ===== Clima & Produção ===== */ .clima-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .clima-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 13px;display:flex;flex-direction:column;gap:6px} .clima-card.hoje{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 6px 16px -10px rgba(58,32,14,.45)} .clima-topo{display:flex;justify-content:space-between;align-items:baseline;gap:6px} .clima-ic{color:var(--accent);display:flex} .clima-temp b{font-size:var(--t-6);font-variant-numeric:tabular-nums} .clima-fator{font-size:var(--t-2);font-weight:700;border-radius:99px;padding:2px 9px;align-self:flex-start;background:var(--surface-2);color:var(--ink-2)} .clima-fator.quente{background:var(--warn-soft);color:var(--warn)} .clima-fator.frio{background:var(--info-soft);color:var(--info)} .clima-sug{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:7px;margin-top:auto;gap:8px} .clima-sug b{font-variant-numeric:tabular-nums} /* ===== Fórum da comunidade (estilo Reddit) ===== */ .fr-banner{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:14px 18px;margin-bottom:14px} .fr-banner b{display:block;margin-bottom:3px} .fr-banner p{margin:0;max-width:640px;color:var(--ink-2)} .fr-controles{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px} .fr-abas{display:flex;gap:2px;background:var(--surface-2);border-radius:9px;padding:3px} .fr-aba{border:none;background:none;border-radius:7px;padding:6px 14px;font:inherit;font-size:var(--t-3);font-weight:600;color:var(--ink-2);cursor:pointer} .fr-aba.on{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)} .fr-cats{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px} .fr-layout{display:grid;grid-template-columns:1fr 290px;gap:14px;align-items:start} .fr-post{display:flex;gap:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:11px 13px;cursor:pointer} .fr-post:hover{border-color:var(--accent-line)} .fr-post.aberto{border-color:var(--accent);cursor:default} .fr-votos{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;width:34px} .fr-votos b{font-size:var(--t-4);font-variant-numeric:tabular-nums} .fr-seta{border:none;background:var(--surface-2);color:var(--muted);border-radius:6px;width:26px;height:22px;font-size:var(--t-1);cursor:pointer;display:flex;align-items:center;justify-content:center} .fr-seta:hover{color:var(--accent);background:var(--accent-soft)} .fr-seta.on{color:var(--accent-ink);background:var(--accent)} .fr-seta.baixo:hover{color:var(--danger);background:var(--danger-soft)} .fr-seta.baixo.on{color:#fff;background:var(--danger)} .fr-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .fr-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fr-flair{font-size:var(--t-1);font-weight:700;letter-spacing:.03em;background:var(--surface-2);color:var(--ink-2);border-radius:99px;padding:2px 9px} .fr-titulo{font-size:var(--t-5);line-height:1.3} .fr-resumo{margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .fr-det{margin-top:8px;border-top:1px solid var(--line);padding-top:10px} .fr-respostas{display:flex;flex-direction:column;gap:8px} .fr-top{display:flex;gap:10px;align-items:flex-start;cursor:pointer;border-radius:8px;padding:4px} .fr-top:hover{background:var(--surface-2)} .fr-top-n{color:var(--accent);font-size:var(--t-5);width:18px;flex:none;text-align:center} @media (max-width:900px){ .fr-layout{grid-template-columns:1fr} } /* input dentro de search-box sempre limpo (fora do .filters também) */ .search-box input{border:none;outline:none;background:none;font-family:inherit;font-size:var(--t-4);width:100%;color:var(--ink)} /* ===== Panorama da Minha Loja: linhas alinhadas + comparativo ===== */ .ml-row{display:grid;grid-template-columns:88px 1fr 96px;gap:10px;align-items:center} .ml-rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ml-trilho{height:10px;background:var(--bg-2);border-radius:5px;overflow:hidden} .ml-fill{height:100%;border-radius:5px} .ml-val{text-align:right;font-variant-numeric:tabular-nums} .ml-camp{display:grid;grid-template-columns:1fr 58px 96px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)} .ml-camp:last-child{border-bottom:none} .ml-camp-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ml-camp-un{text-align:right;font-variant-numeric:tabular-nums} .ml-camp-rs{text-align:right;font-variant-numeric:tabular-nums} .ml-comp{display:grid;grid-template-columns:1.4fr .8fr .9fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)} .ml-comp:last-child{border-bottom:none} .ml-comp-meu,.ml-comp-ref{display:flex;flex-direction:column} .ml-comp-meu b{font-variant-numeric:tabular-nums;font-size:var(--t-5)} .ml-comp-linha{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)} .ml-comp-linha:last-child{border-bottom:none} .ml-comp-linha b{font-variant-numeric:tabular-nums} @media (max-width:700px){ .ml-comp{grid-template-columns:1fr 1fr;row-gap:4px} .ml-comp-nome{grid-column:1/-1} .ml-comp-selo{grid-column:1/-1} } /* fórum: chips de reputação */ .fr-autor-chips{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap} .fr-nivel{font-size:var(--t-1);font-weight:700;letter-spacing:.03em;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-strong);border-radius:99px;padding:1px 8px;white-space:nowrap} .fr-selo{font-size:var(--t-1);font-weight:800;letter-spacing:.04em;border-radius:99px;padding:1.5px 8px;white-space:nowrap} .fr-selo.esp{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)} .fr-selo.tec{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)} /* ===== Briefing Bom dia, dono (Início) ===== */ .brief{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:14px} .brief-col{display:flex;flex-direction:column;gap:7px} .brief-linha{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:var(--t-3)} .brief-linha b{font-size:var(--t-6)} .brief-acoes{display:flex;flex-direction:column;gap:6px} .brief-acao{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:7px 12px;font:inherit;font-size:var(--t-3);font-weight:600;color:var(--ink);cursor:pointer;text-align:left} .brief-acao:hover{border-color:var(--accent);color:var(--accent)} .brief-acao::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none} @media (max-width:700px){ .brief{grid-template-columns:1fr} } /* upsell no carrinho do PDV */ .up-chip{display:flex;align-items:center;gap:5px;width:100%;justify-content:center;border:1.5px dashed var(--accent-line);background:var(--accent-soft);border-radius:9px;padding:7px 10px;font:inherit;cursor:pointer;margin-bottom:8px;flex-wrap:wrap} .up-chip:hover{border-style:solid;border-color:var(--accent)} .up-chip b{color:var(--accent)} /* ===== Início enxuto: 5 blocos (Ontem · Hoje · Plano do dia · Estoque · Vender) ===== */ .bento.bento5{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(158px,auto)} .bento.bento5 > .bb{grid-column:span 2;grid-row:auto} .bento.bento5 > .bb.wide{grid-column:span 3} .bb-destaque{border:1.5px solid var(--accent)} .bb-plano{cursor:default} .bb-plano .brief-acoes{margin-top:8px;gap:5px;overflow:auto} .bb-plano .brief-acao{padding:6px 10px;font-size:var(--t-3)} @media (max-width:900px){ .bento.bento5{grid-template-columns:1fr;grid-auto-rows:auto} .bento.bento5 > .bb,.bento.bento5 > .bb.wide{grid-column:auto} } /* ===== gaveta "Mais": nota do bloco Avançado ===== */ .todos-nota{font-size:var(--t-2);color:var(--muted);margin:-2px 0 8px;line-height:1.45} /* ===== avisos que NÃO travam a tela (nada é obrigatório pra vender) ===== */ .alert-banner.aviso-leve{background:var(--surface-2);border:1px solid var(--line-strong);align-items:flex-start} .alert-banner.aviso-leve .ab-ic{color:var(--ink-2)} .alert-banner.aviso-leve .ab-txt{color:var(--ink-2)} .alert-banner.aviso-leve .ab-txt b{color:var(--ink)} .aviso-x{border:0;background:none;color:var(--ink-2);font:inherit;font-size:var(--t-2);font-weight:600;cursor:pointer;padding:6px 9px;border-radius:8px;flex:none;white-space:nowrap} .aviso-x:hover{color:var(--ink);background:var(--bg-2)} @media (max-width:600px){ .alert-banner.aviso-leve{flex-wrap:wrap;gap:8px} .alert-banner.aviso-leve .ab-txt{flex:1 1 100%} } /* ============================================================ VISÃO: interruptor "Rápido | Completo" Motor: ui.vistaSwitch(moduloId) no core.js. Cara: 2 chips sóbrios dentro de uma calha; o ativo é o que parece "levantado" (fundo de superfície + fio + sombra fina). Sem degradê, sem emoji, sem cor de destaque gritando: quem manda na atenção é o conteúdo da tela, não o interruptor. ============================================================ */ .vswitch{display:inline-flex;align-items:center;gap:2px;flex:none;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px} .vswitch-b{-webkit-appearance:none;appearance:none;margin:0;border:1px solid transparent;background:none;color:var(--muted);font-family:inherit;font-size:var(--t-2);font-weight:600;line-height:1;letter-spacing:.01em;padding:0 12px;min-height:28px;border-radius:7px;cursor:pointer;white-space:nowrap} .vswitch-b:hover{color:var(--ink-2)} .vswitch-b.on{background:var(--surface);border-color:var(--line-strong);color:var(--ink);box-shadow:var(--shadow-sm)} .vswitch-b.on:hover{color:var(--ink)} .vswitch-b:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* dentro do cabeçalho da página o interruptor alinha com os botões */ .page-actions .vswitch{align-self:center} /* Bloco que só existe no Completo. NÃO ganha etiqueta nem moldura de propósito: no Completo ele é um bloco igual aos outros (no Rápido ele nem chega a ser montado). A classe fica só como gancho de busca. */ .so-completo{} /* linha "abrir sempre no Completo" (Configurações) */ .vpadrao-linha{align-items:flex-start;gap:11px} .vpadrao-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .vpadrao-txt b{font-size:var(--t-4);font-weight:650;color:var(--ink)} .vpadrao-dica{font-size:var(--t-2);color:var(--muted);line-height:1.45} /* celular: chip mais alto (dedo) e o interruptor na frente dos botões de ação, pra ficar logo embaixo do título quando o cabeçalho vira coluna */ @media (max-width:560px){ .vswitch-b{min-height:34px;font-size:var(--t-2);padding:0 10px} .page-actions .vswitch{order:-1} } /* ============================================================ PORTAO C3: CELULAR USAVEL, alvo de dedo de 44 px Entra so em aparelho de toque. Computador com mouse e pointer:fine e nao dispara nada daqui, entao o desktop fica identico ao que ja era. O que cresce e a ALTURA; cor, largura e desenho continuam os mesmos. Medidas de antes, feitas sobre este mesmo CSS: X da aba 17,3 px, chip do cargo 22,5 px, botao pequeno 26,5 px, interruptor de visao 28,0 px, aba 29,3 px, item do menu de baixo 39,8 px. ============================================================ */ @media (pointer: coarse){ .pbtn,.pbtn.sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center} .pnavtoggle,.aviso-x,.cmditem{min-height:44px} .vswitch-b{min-height:44px;display:inline-flex;align-items:center;justify-content:center} /* o "?" do topo nasce com 30 px por um