/* ============================================================ PELE "PONTO" (modelo 24) sobre o tema do Gelato OS - Override das variáveis do styles.css: neutro total, cor só em status/ação (azul #4657d8, verde/âmbar/vermelho). - Chrome novo (barra de Comando + Abas) e visões do protótipo. ============================================================ */ :root{ --bg:#f9f9fa; --surface:#ffffff; --surface-2:#f4f4f5; --line:#d3d3d9; --line-strong:#b2b2bb; --ink:#2e2e2e; --ink-2:#45454e; --muted:#68686f; --accent:#4657d8; --accent-ink:#ffffff; --accent-soft:#eef0fd; --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--surface)); --accent-line:#c9cdf0; --accent-line:color-mix(in srgb, var(--accent) 30%, var(--surface)); --accent-2:#0f7a3f; --espresso:#1e1e22; --danger:#b83125; --danger-soft:#fdeae8; --warn:#7a5206; --warn-soft:#faf1dc; --warn-line:#e0a020; --warn-ink:#6b5010; --danger-line:#f0b9b2; --ok-line:#cdeedd; --ok:#0e6d38; --ok-soft:#e2f2e9; --info:#33429f; --info-soft:#eef0fd; --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; --shadow-sm:0 1px 2px rgba(20,20,25,.05); --shadow:0 8px 24px -12px rgba(20,20,25,.14); --shadow-lg:0 22px 54px -22px rgba(20,20,25,.22); --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --serif:'Inter',-apple-system,sans-serif; /* Ponto não usa serifa */ --mono:ui-monospace,'SF Mono',Menlo,monospace; } body{background:var(--bg);color:var(--ink);font-family:var(--font)} .page-title{font-weight:800;letter-spacing:-.02em} .card-title,h1,h2,h3{letter-spacing:-.01em} .kpi-value{font-weight:800} /* ===== 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:14.5px;white-space:nowrap} .pbrand span{color:var(--accent)} .pbrand .demo{color:var(--muted);font-size:9.5px;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 24px rgba(70,87,216,.14)} .cmd input{border:none;outline:none;flex:1;font-family:inherit;font-size:13px;background:none;color:var(--ink)} .kbd{font-size:10px;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 18px 44px rgba(0,0,0,.14);padding:7px;z-index:80;max-height:390px;overflow:auto;display:none} .cmddrop.show{display:block} .cmdsec{font-size:9.5px;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:12.5px} .cmditem:hover{background:var(--accent-soft);color:var(--accent);font-weight:600} .cmditem .hint{margin-left:auto;font-size:10px;color:var(--muted);font-weight:400} .ptopstatus{display:flex;gap:14px;align-items:center;white-space:nowrap;font-size:11.5px} /* ===== abas ===== */ .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:11.5px;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:15px} .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} #content>.pview,#content>*{max-width:1220px;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:11px} .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:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)} .pnum{font-variant-numeric:tabular-nums} .pmuted{color:var(--muted)} .pbtn{background:var(--accent);color:var(--accent-ink);border:none;border-radius:9px;padding:8px 14px;font-weight:600;font-size:12px;font-family:inherit;cursor:pointer} .pbtn.ghost{background:var(--surface);color:var(--accent);border:1px solid var(--accent-line)} .pbtn.sm{padding:5px 10px;font-size:11px;border-radius:7px} .pcard{background:var(--surface);border:1px solid var(--line);border-radius:12px} .pvh{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .pvh h1{font-size:19px;font-weight:800;letter-spacing:-.02em} .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:12px;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:26px;margin-top:5px} .bb b.mid{font-size:17px;margin-top:5px} .bb .foot{margin-top:auto;font-size:11.5px} .bb-caixa{grid-row:span 2;border:1.5px solid var(--accent);box-shadow:0 8px 24px rgba(70,87,216,.10)} .bspark{display:flex;align-items:flex-end;gap:5px;height:74px;margin-top:14px} .bspark i{flex:1;background:rgba(70,87,216,.22);border-radius:3px;min-height:3px} .bspark i.hot{background:var(--accent)} .bb-pdv{background:var(--accent);color:var(--accent-ink);border:none;justify-content:center;gap:6px} .brows{display:flex;flex-direction:column;gap:6px;margin-top:8px;font-size:11.5px} .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:11px;overflow:hidden} .cp b.v{font-size:19px;margin-top:2px} .cbars{display:flex;align-items:flex-end;gap:4px;flex:1;margin-top:6px} .cbars i{flex:1;background:rgba(70,87,216,.25);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:10.5px;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:14px;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:9.5px;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:10.5px;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:10px} .calday .v{font-weight:700;font-size:12px} .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:9px} /* ===== 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:11px;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:11px;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:12.5px} .parea .n{font-size:18px;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:9.5px;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 rgba(70,87,216,.16);z-index:2;text-align:center} .ocore b{font-size:19px} .osat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;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:33px} .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:12.5px} .pmed{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10.5px;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:10.5px;color:var(--muted)} .fpost .acts{display:flex;gap:14px;margin-top:6px;font-size:11.5px;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:12px;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:12.5px;display:block} .kcard .sub{font-size:11px;margin-top:3px;display:block} .kcard .adv{display:block;margin-top:8px;font-size:11px;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)} .fit.on{background:var(--accent-soft);border-left:3px solid var(--accent);padding-left:11px} .fit .top{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:12.5px;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:15px;margin-top:2px} .fbars{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:8px} .fbars i{flex:1;background:rgba(70,87,216,.25);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:12px} .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:9px;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:12px;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:12.5px;align-items:center} .trow.h{font-size:10px;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:13px} .mw .del:hover{color:var(--danger)} .mw b.v{font-size:18px;display:block;margin-top:3px} .mghost{border:1.5px dashed var(--accent-line);background:rgba(70,87,216,.03);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:12.5px;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:12.5px;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:.9rem} .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:3.2rem;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:1rem} .bal-plu span{font-size:.78rem;color:var(--ink-2)} .bal-plu em{font-style:normal;font-size:.75rem;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:.82rem;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:.88rem} .bal-total{display:flex;justify-content:space-between;align-items:center;padding:12px 0 2px;font-size:1.05rem} .bal-total b{font-size:1.7rem;font-variant-numeric:tabular-nums;color:var(--accent)} @media (max-width:900px){ .bal-layout{grid-template-columns:1fr} .bal-display{font-size:2.4rem} } /* ===== 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:.8rem;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:1.15rem;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:.68rem;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:.62rem;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:1.02rem;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:.74rem;padding:2.5px 0} .etq-rodape{margin-top:8px;border-top:1.5px dashed #111;padding-top:6px;font-size:.62rem;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:.8rem;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:.68rem;font-weight:700;padding:1px 7px} .pico-selo{background:#b3540a;color:#fff;font-size:.7rem;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:.86rem;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:.88rem} .conc-row.conc-head{font-size:.68rem;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:.82rem;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:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px;text-align:center} .crono-bloco{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:6px 8px;margin-bottom:6px;cursor:grab;font-size:.78rem} .crono-bloco b{display:block;font-size:.8rem;line-height:1.2} .crono-bloco.concluida{border-left-color:var(--ok);opacity:.6;cursor:default} .crono-bloco.em_producao{border-left-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:.85rem;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:rgba(70,87,216,.3);border-radius:4px 4px 0 0} .curva-col.atual i{background:var(--accent)} .curva-col span{font-size:.68rem;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:.8rem;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:.82rem;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:1.5rem;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:1rem;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:.66rem;font-weight:700;color:#fff} .tv-ic em{font-style:normal} .tv-rodape{margin-top:16px;font-size:.75rem;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:1.05rem;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:.72rem;font-weight:700;margin-bottom:6px;text-align:center} .rot-lupa{border:2px solid #111;border-radius:7px;padding:4px 9px;font-size:.72rem;margin-bottom:6px;display:flex;align-items:center;gap:4px;justify-content:center;background:#f5f5f2} .rot-sec{font-size:.72rem;line-height:1.45;margin-bottom:6px} .rot-alerg{font-size:.74rem;font-weight:800;margin-bottom:8px} .rot-tabela{width:100%;border-collapse:collapse;font-size:.72rem;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:.66rem;color:#333;margin-bottom:3px} .rot-lote{font-size:.68rem;font-weight:700} .rot-demo{margin-top:8px;border-top:1.5px dashed #111;padding-top:6px;font-size:.64rem;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:.8rem;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:.9rem;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:1.05rem;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:.74rem;font-weight:600;background:var(--info-soft);color:var(--info);border-radius:6px;padding:2px 7px} .cuba-tec{font-family:var(--mono);font-size:.72rem;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:.72rem;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:.76rem;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:.68rem;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:.7rem;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:1.3rem;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:.86rem;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:.86rem} /* ===== 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:.6rem;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:.8rem} .vitl-legenda{margin-top:10px;font-size:.85rem} .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:1.05rem;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} .foro-resp{border-left:3px solid var(--accent-soft);padding:6px 0 6px 12px} .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:.8rem;cursor:pointer;font-family:inherit} .foro-btn:hover{background:var(--accent-soft)} @media (max-width:900px){ .vit-slot b{font-size:.68rem} } .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:1.8rem;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:.88rem} .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:11px;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:.68rem;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:.82rem;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:9.5px;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:12.5px;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:14px;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:12px;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:10px;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:9.5px;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:11px;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:.95rem;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:.84rem;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:.72rem;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:.95rem} .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:.8rem;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:2px;padding-right:2px} .pdock-it{flex:1 1 0;min-width:0;padding:3px 1px;max-width:100%} .pdock-it span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8.5px} /* 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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .pbrand .demo{flex:none;font-size:9px;padding:1px 5px} .cmdwrap{min-width:0} #pcmd{min-width:0} #pcmd input{min-width:0;width:100%} .kbd{display:none} .ptop{gap:8px} } /* ---- 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:.82rem;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:1.9rem;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:9.5px;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:.84rem;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:.86rem;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; --accent:#7b88ea; --accent-ink:#12121c; --accent-2:#3fbf7b; --espresso:#0e0e12; --danger:#e46a5b; --danger-soft:#342220; --danger-line:#573530; --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) */ .btn-primary,.toast-ok,.chip.active,.pay-chips .pc.active,.nav-item.active{color:var(--accent-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:.82rem;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);box-shadow:0 0 0 1px var(--accent-soft)} .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:1.35rem;font-variant-numeric:tabular-nums} .clima-fator{font-size:.72rem;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:.82rem;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:.86rem;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:9px;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:.68rem;font-weight:700;letter-spacing:.03em;background:var(--surface-2);color:var(--ink-2);border-radius:99px;padding:2px 9px} .fr-titulo{font-size:.95rem;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:1rem;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:.88rem;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:1.02rem} .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:.64rem;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:.64rem;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:12.5px} .brief-linha b{font-size:1.15rem} .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:.84rem;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:.8rem} @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:.76rem;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:.78rem;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:11.5px;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:.87rem;font-weight:650;color:var(--ink)} .vpadrao-dica{font-size:.76rem;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:12px;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