/* Sacaria Cimsal CONTRASTE: medido, não achado. O cinza claro de antes (#98a2b3) dava 2,58:1 sobre branco, longe dos 4,5:1 do mínimo, e era a cor do CÓDIGO do produto, da unidade e da data. Num galpão com reflexo, isso desaparece. Agora --fraco é #6b7280 (4,83:1 sobre branco, 4,51:1 sobre o fundo). Azul e forma da Folha de Produção, mas com acabamento próprio: - ESCALA DE PESO DA FOLHA DE PRODUÇÃO (400 a 800). A minha primeira versão vivia entre 500 e 700: o corpo já entrava pesado e o título mal subia, então nada recuava e a tela inteira parecia do mesmo peso. Agora: 400 texto secundário, descrição, frase de apoio (a maior parte) 500 rótulo de campo, código, título de seção, nota pequena 600 nome do item, botão, selo, título de cartão, negrito em frase 700 SÓ NÚMERO: quantidade, saldo, o que a pessoa foi ali conferir 800 título de tela e saudação O degrau de cima é ESCASSO de propósito. Não adianta a escala ser larga se meia tela mora no topo dela: numa versão anterior cinco coisas diferentes disputavam o 700 na mesma tela e nada se destacava de nada. É um campo leve com poucas âncoras pesadas, não um bloco médio uniforme. - SEM SOMBRA (ele não gosta). Superfícies planas, separadas só pela borda de 1px. Sem sombra a borda precisa segurar a forma, então ela é um tom mais firme do que seria com elevação. - ritmo de espaço em múltiplos de 4, com respiro maior entre blocos. - azul só onde há ação ou destaque. Nada de tapete azul. Os alvos de toque continuam grandes: é chão de fábrica, de luva e com pressa. */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter-var.woff2') format('woff2'); } :root{ --azul:#105CC6; --azul-escuro:#0d3f8a; --azul-claro:#eef4ff; --azul-borda:#d6e4fb; /* Neutros da Folha de Produção. Peso de fonte não era a história toda: o meu preto era MAIS PRETO que o dela (17,8:1 contra 16,3:1) e o meu cinza de apoio mais escuro (5,8:1 contra 4,8:1). Texto quase preto lê pesado mesmo em 400, e isso valia para TODA palavra da tela. ⚠️ O terceiro cinza é o único que NÃO copiei. A Folha usa #9ca3af, que dá 2,54:1 sobre branco: é a mesma falha de contraste que eu já corrigi aqui (era #98a2b3). Ele veste o CÓDIGO do item, a unidade e a data, e num galpão com reflexo some. Fica em #6b7280, 4,83:1. */ --ink:#1F2024; --muted:#6b7280; --fraco:#6b7280; --linha:#e5e7eb; --bg:#f9fafb; --card:#fff; --toque:#f2f5fb; --ok:#0e9f6e; --ok-bg:#e8f7f1; --alerta:#b54708; --alerta-bg:#fff8ef; --alerta-borda:#fde4c8; --erro:#d92d20; --erro-bg:#fef3f2; --r:10px; --r-btn:10px; --pill:99px; --foco:0 0 0 4px rgba(16,92,198,.12); --fonte:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; --tab:"tnum" 1, "lnum" 1; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--fonte);background:var(--bg);color:var(--ink); font-size:15px;line-height:1.45; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} button{font-family:inherit;color:inherit;font-weight:inherit} /* aviso de protótipo, não existe no app real */ .proto{background:#111318;color:#cbd2dd;font-size:12px;font-weight:400; padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px} .proto button{background:none;border:1px solid #3b414d;color:#cbd2dd;border-radius:var(--pill); padding:5px 12px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap} /* Barra de atualização. Aparece quando existe versão nova e não dá para recarregar sozinho (no meio de um pedido, ou com envio na fila). Fica acima do topo, empurrando a tela: um aviso que some sozinho não seria visto por quem olha o celular de relance. */ .barra-versao{background:var(--azul-claro);border-bottom:1px solid var(--azul-borda); color:var(--azul-escuro);font-size:13px;font-weight:500; padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px} .barra-versao[hidden]{display:none} .barra-versao button{background:var(--azul);border:none;color:#fff;border-radius:var(--pill); padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap} /* ───────── topo ───────── */ .topo{position:sticky;top:0;z-index:10;background:var(--azul);color:#fff;padding:15px 16px} .topo-row{display:flex;align-items:center;gap:12px;min-height:38px} .topo .voltar{background:rgba(255,255,255,.16);border:none;width:38px;height:38px;flex:none; border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center} .topo .voltar:active{background:rgba(255,255,255,.28)} .topo .tit{font-size:17px;font-weight:800;letter-spacing:-.15px;flex:1;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Chip do usuário, no padrão da Folha de Produção: 11px/700 e teto de 96px. Ele é CONFERÊNCIA ("sou eu mesmo nesse celular"), não informação de leitura, então é pequeno de propósito. O meu estava em 13px/600 e com teto de 46% da largura, o que num celular de 375 dava 155px: o nome ficava do tamanho do título da tela e disputava atenção com ele. O teto em pixel, e não em porcentagem, é o que impede um nome comprido de empurrar o título; passando disso, ganha reticências. */ .topo .chip{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:96px; background:rgba(255,255,255,.16);border:none;border-radius:var(--pill); padding:5px 10px;font-size:11px;font-weight:700;color:#fff;cursor:pointer} .topo .chip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ponto{width:8px;height:8px;border-radius:50%;flex:none;background:#4ade80} /* ───────── tela ───────── */ .tela{max-width:520px;margin:0 auto;padding:22px 16px 0;animation:entra .2s ease} @keyframes entra{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .pad-rodape{padding-bottom:136px} .ola{font-size:27px;font-weight:800;letter-spacing:-.6px;margin:0 0 5px;line-height:1.15} .data{font-size:14px;font-weight:400;color:var(--fraco);margin:0 0 24px} .h1{font-size:23px;font-weight:800;letter-spacing:-.5px;margin:0 0 6px;line-height:1.2} .sub{font-size:14px;font-weight:400;color:var(--muted);margin:0 0 24px;line-height:1.5} .sub b{font-weight:600;color:var(--ink)} /* contexto: uma linha só, com fundo próprio para não se confundir com os cartões brancos do conteúdo */ .onde{display:flex;align-items:center;gap:10px;width:100%; background:var(--azul-claro);border:1px solid var(--azul-borda); border-radius:var(--r-btn);padding:13px 14px;margin:0 0 26px; font-size:14px;font-weight:400;color:var(--azul-escuro);cursor:pointer;text-align:left} .onde:active{background:#e2ecfd} .onde b{font-weight:600} .onde .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .onde .seta{flex:none;color:var(--azul);opacity:.65} /* rótulo de seção: caixa baixa, discreto */ .secao{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:500; color:var(--fraco);margin:0 0 12px} .secao .n{font-variant-numeric:var(--tab);font-weight:600} /* ───────── item ───────── */ .item{display:flex;align-items:center;gap:16px;width:100%;text-align:left; background:var(--card);border:1px solid var(--linha);border-radius:var(--r); padding:16px;margin-bottom:8px;min-height:72px} button.item{cursor:pointer;transition:background .12s ease} button.item:active{background:var(--toque)} button.item:disabled{opacity:.55;cursor:default} .item .corpo{flex:1;min-width:0} .cod{font-size:12px;font-weight:500;color:var(--fraco);font-variant-numeric:var(--tab); letter-spacing:.3px;margin-bottom:3px} .nome{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.1px} .sob{font-size:13px;font-weight:400;color:var(--muted);margin-top:6px; font-variant-numeric:var(--tab)} .sob b{color:var(--ink);font-weight:600} .sob.destaque{color:var(--azul);font-weight:500} .sob.erro{color:var(--erro);font-weight:500} .qtd{flex:none;text-align:right;font-variant-numeric:var(--tab)} .qtd .n{font-size:20px;font-weight:700;letter-spacing:-.5px;line-height:1.1} .qtd .u{font-size:12px;font-weight:400;color:var(--fraco);margin-top:3px} .seta{flex:none;color:#8a94a6} /* NOME DO ITEM EM MAIÚSCULA. É como o nome aparece na etiqueta do fardo e no Protheus, então bate com o que a pessoa está vendo na mão. A caixa alta é feita na tela, não no dado: o nome curto continua em caixa mista na planilha, que é onde alguém edita à mão, e quem digitar minúscula novo item aparece certo do mesmo jeito. O entrelinhamento negativo do texto normal não serve aqui: maiúscula não tem perna que encaixe, precisa de um fio a mais de respiro para não borrar. */ .nome-item{text-transform:uppercase;letter-spacing:.3px;text-wrap:balance} /* ───────── campo de número: o herói ───────── */ .numero{margin-top:16px} .numero label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px} .numero .caixa{display:flex;align-items:center;gap:12px} .numero input{flex:1;min-width:0;height:58px;padding:0 16px;text-align:right; font-family:inherit;font-size:23px;font-weight:700;font-variant-numeric:var(--tab); letter-spacing:-.4px;color:var(--ink);background:var(--bg); border:1px solid var(--linha);border-radius:var(--r-btn); -webkit-appearance:none;appearance:none;transition:border-color .12s, box-shadow .12s, background .12s} .numero input::placeholder{color:#9aa3b2;font-weight:400} .numero input:focus{outline:none;background:var(--card);border-color:var(--azul);box-shadow:var(--foco)} .numero .un{flex:none;width:72px;font-size:14px;font-weight:500;color:var(--muted)} /* ───────── campos comuns ───────── */ .campo{margin-bottom:18px} .campo label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px} select{width:100%;height:52px;padding:0 16px;font-size:15px;font-weight:500;font-family:inherit; color:var(--ink);background:var(--card);border:1px solid var(--linha);border-radius:var(--r-btn); -webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 16px center;padding-right:42px} select:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)} .campo[hidden]{display:none} /* ───────── botões ───────── */ .btn{display:block;width:100%;height:54px;border:none;border-radius:var(--r-btn); font-size:16px;font-weight:600;letter-spacing:-.1px;cursor:pointer;margin-top:10px; transition:filter .12s ease} .btn:active{filter:brightness(.96)} .btn-ok{background:var(--azul);color:#fff} .btn-ok:disabled{background:#e4e7ec;color:#98a2b3;cursor:default;filter:none} .btn-off{background:var(--card);border:1px solid var(--linha);color:var(--muted)} .btn-perigo{background:none;border:none;color:var(--erro);font-size:14px;font-weight:600; height:auto;padding:8px 0;cursor:pointer;margin:0} .rodape{position:fixed;left:0;right:0;bottom:0;z-index:5; background:rgba(255,255,255,.94);backdrop-filter:blur(12px); border-top:1px solid var(--linha); padding:14px 16px calc(14px + env(safe-area-inset-bottom))} .rodape:empty{display:none} .rodape>div{max-width:520px;margin:0 auto} .rodape .btn:first-child{margin-top:0} .conta{font-size:13px;font-weight:400;color:var(--muted);text-align:center;margin-bottom:10px} .conta b{color:var(--ink);font-weight:600;font-variant-numeric:var(--tab)} /* ───────── avisos ───────── */ .dica{display:flex;gap:10px;align-items:flex-start;background:var(--azul-claro); color:var(--azul-escuro);font-size:13px;font-weight:400;line-height:1.45; padding:13px 14px;border-radius:var(--r-btn);margin:20px 0} .dica svg{flex:none;margin-top:1px;opacity:.75} .dica b{font-weight:600} .vazio{background:var(--card);border:1px dashed #dfe3ea;border-radius:var(--r); padding:28px 20px;text-align:center;color:var(--muted);font-size:14px; font-weight:400;line-height:1.5;margin-bottom:10px} .faixa{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer; background:var(--card);border:1px solid var(--linha);border-radius:var(--r); padding:15px 16px;margin-bottom:26px;font-size:14px;font-weight:500;color:var(--ink)} .faixa:active{background:var(--toque)} .faixa .bolha{width:8px;height:8px;border-radius:50%;flex:none;background:var(--alerta)} .faixa .seta{margin-left:auto} .selo{display:inline-flex;align-items:center;font-size:12px;font-weight:600; border-radius:var(--pill);padding:3px 10px;letter-spacing:-.05px} .selo-espera{background:#f2f4f7;color:var(--muted)} .selo-ok{background:var(--ok-bg);color:var(--ok)} .selo-parcial{background:var(--alerta-bg);color:var(--alerta)} .selo-nao{background:var(--erro-bg);color:var(--erro)} /* ───────── folha (confirmar e trocar turno) ───────── */ .folha{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end} .folha[hidden],.snack[hidden]{display:none} .folha .fundo{position:absolute;inset:0;background:rgba(16,24,40,.5)} .folha .corpo{position:relative;width:100%;max-width:520px;margin:0 auto;max-height:88vh; overflow-y:auto;background:var(--card);border-radius:14px 14px 0 0; padding:26px 20px calc(22px + env(safe-area-inset-bottom)); animation:sobe .22s cubic-bezier(.2,.8,.3,1)} @keyframes sobe{from{transform:translateY(14px)}to{transform:none}} .folha h2{font-size:21px;font-weight:800;letter-spacing:-.45px;margin:0 0 7px} .folha p{color:var(--muted);font-size:14px;font-weight:400;margin:0 0 22px;line-height:1.5} .res{display:flex;justify-content:space-between;gap:16px;padding:14px 0; border-bottom:1px solid var(--linha)} .res:last-of-type{border-bottom:none} /* A mesma linha serve para ROTULO (perfil: "Setor", "Centro de custo") e para NOME DE ITEM (folhas de confirmação). Rótulo é apoio e fica leve; o nome do item é âncora e pesa, marcado pela própria classe que o põe em maiúscula. */ .res .nm{font-size:15px;font-weight:500;line-height:1.3} .res .nm.nome-item{font-weight:600} .res .qt{font-size:16px;font-weight:700;font-variant-numeric:var(--tab);white-space:nowrap; letter-spacing:-.2px} .res .qt.zero{color:var(--fraco);font-size:13px;font-weight:500;letter-spacing:0} .res .lot{font-size:12px;font-weight:400;color:var(--fraco); font-variant-numeric:var(--tab);margin-top:3px} .snack{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:calc(100% - 32px); max-width:488px;background:#16181d;color:#fff;padding:15px 16px;border-radius:var(--r-btn); font-size:14px;font-weight:400;z-index:60} /* ───────── bloco: cartão que EMPILHA conteúdo (≠ .item, que é uma linha) ───────── Antes eu montava isso com style inline e uma variável de cor que já não existia, então os divisores não apareciam e tudo colava. Agora a hierarquia é explícita: cabeçalho > divisor > itens separados > ação, com respiro entre cada nível. */ .bloco{background:var(--card);border:1px solid var(--linha);border-radius:var(--r); padding:18px 16px;margin-bottom:10px} .bloco > .cod:first-child{margin-bottom:4px} .ped-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding-bottom:16px;border-bottom:1px solid var(--linha)} .ped-nome{font-size:17px;font-weight:600;letter-spacing:-.25px;line-height:1.25} .ped-quem{font-size:13px;font-weight:400;color:var(--fraco);margin-top:4px} .ped-hora{font-size:13px;font-weight:500;color:var(--fraco);flex:none; font-variant-numeric:var(--tab);padding-top:2px} .ped-item{display:flex;align-items:center;gap:16px;padding:16px 0; border-bottom:1px solid var(--linha)} .ped-item:last-of-type{border-bottom:none;padding-bottom:2px} .ped-item .corpo{flex:1;min-width:0} .bloco .btn{margin-top:18px} .bloco .numero + .sob{margin-top:14px} /* O que ainda não foi enviado. Fica no rodapé, junto das ações, porque é informação sobre o que a pessoa acabou de fazer. */ .fila{font-size:13px;font-weight:500;color:var(--muted);text-align:center;margin-bottom:10px}