/* Sistema visual Mapcalhas: painel escuro (lavanda/lima/ambar sobre grafite), com alternância para claro via [data-tema] no . Os nomes de variável antigos (--texto, --linha, --card...) continuam existindo como apelidos dos tokens novos, para não reescrever cada seletor do arquivo. As fontes vem do Google Fonts; sem internet a fabrica cai no fallback local. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap"); :root { --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-move: cubic-bezier(.22, .61, .36, 1); /* Mola amortecida: passa 4% do ponto e assenta. Mesma curva que MOLA no app.js. */ --ease-mola: linear(0, 0.023 2.5%, 0.082 5%, 0.183 8%, 0.301 11%, 0.465 15%, 0.618 19%, 0.778 24%, 0.914 30%, 1.004 37%, 1.043 45%, 1.041 55%, 1.021 66%, 1.003 80%, 1); --ink: #101018; color-scheme: dark; /* ---- tokens do novo painel (escuro = padrão) ---- */ --bg: radial-gradient(120% 90% at 88% 4%, #2D2649 0%, #221C38 32%, #191921 68%); --bg-flat: #191921; --panel: linear-gradient(180deg, #272733 0%, #232030 45%, #1E1E2C 100%); --panel-card: linear-gradient(165deg, #2E2E3C 0%, #282836 45%, #22222E 100%); --panel-alt: linear-gradient(170deg, #2A2A38 0%, #24242F 45%, #1F1F2A 100%); --col-bg: rgba(255,255,255,0.03); --bd: rgba(255,255,255,0.07); --bd-strong: rgba(255,255,255,0.10); --chip: rgba(255,255,255,0.06); --chip-hover: rgba(255,255,255,0.10); --field: rgba(255,255,255,0.04); --track: rgba(255,255,255,0.10); --tx: #FFFFFF; --tx2: #A8A8B8; --tx3: #888898; --tx4: #7A7A8D; --lav: #C9BCFA; --lav-bg: rgba(201,188,250,0.14); --lav-bd: rgba(201,188,250,0.32); --lav-nav: linear-gradient(120deg, rgba(201,188,250,0.24) 0%, rgba(170,150,245,0.16) 45%, rgba(139,123,232,0.10) 100%); --lima: #B8F04A; --lima-bg: rgba(184,240,74,0.14); --lima-bd: rgba(184,240,74,0.26); --lima-tx: #C8EF95; --lar: #F0A93B; --lar-bg: rgba(240,169,59,0.14); --lar-bd: rgba(240,169,59,0.30); --lar-tx: #E8B268; --lar-panel: linear-gradient(120deg, #3A2A12 0%, #1A1520 55%, #14141C 100%); --lar-card: linear-gradient(160deg, #2E2314 0%, #17141C 100%); --verm: #FF6B6B; --verm-bg: rgba(255,107,107,0.14); --verm-bd: rgba(255,107,107,0.30); --verm-tx: #FF9E9E; --resumo: linear-gradient(160deg, #2A2350 0%, #16141F 58%, #101017 100%); --fone-shell: #232332; --fone-tela: #14141E; --fone-topo: linear-gradient(180deg, #272341 0%, #14141E 100%); --sombra: 0 1px 2px rgba(0,0,0,.35); --sombra-alta: 0 20px 44px rgba(0,0,0,.55); --vidro-camada: rgba(31,30,44,.78); --vidro-dialogo: rgba(38,37,52,.88); --vidro-borda: rgba(255,255,255,.12); --vidro-sombra: 0 18px 42px rgba(7,6,14,.38); /* ---- apelidos: nomes antigos usados no resto do css/js, apontando pros tokens de cima ---- */ --texto: var(--ink); --fraco: var(--tx3); --medio: var(--tx2); --escuro-fraco: var(--tx4); --linha: var(--bd); --card: var(--panel-card); --card2: var(--field); --cinza-bg: var(--col-bg); --verde: var(--lima); --verde-bg: var(--lima-bg); --laranja: var(--lar); --laranja-forte: var(--lar); --laranja-bg: var(--lar-bg); --laranja-texto: var(--lar-tx); --vermelho: var(--verm); --vermelho-bg: var(--verm-bg); --atrasada: var(--verm); --areia: var(--chip); --grafite: var(--tx2); --amarelo-selo: var(--lar); --cinza-ponto: var(--tx4); --linha-ok: var(--col-bg); --linha-baixa: var(--lar-bg); --linha-critica: var(--verm-bg); --azul: var(--lima); --amarelo: var(--lar); } html[data-tema="claro"] { color-scheme: light; --bg: radial-gradient(120% 90% at 88% 4%, #ECE7FB 0%, #F0EFF7 34%, #F3F3F6 68%); --bg-flat: #F3F3F6; --panel: linear-gradient(180deg, #FFFFFF 0%, #FDFDFE 45%, #FBFBFD 100%); --panel-card: linear-gradient(165deg, #FFFFFF 0%, #FCFCFD 45%, #F8F8FB 100%); --panel-alt: linear-gradient(170deg, #FFFFFF 0%, #FCFCFD 45%, #F8F8FB 100%); --col-bg: rgba(17,17,26,0.035); --bd: rgba(17,17,26,0.09); --bd-strong: rgba(17,17,26,0.14); --chip: rgba(17,17,26,0.05); --chip-hover: rgba(17,17,26,0.08); --field: #FFFFFF; --track: rgba(17,17,26,0.10); --tx: #12121A; --tx2: #5E5E70; --tx3: #7A7A8C; --tx4: #9A9AAC; --lav: #6B4FD8; --lav-bg: rgba(107,79,216,0.10); --lav-bd: rgba(107,79,216,0.26); --lav-nav: linear-gradient(120deg, rgba(107,79,216,0.16) 0%, rgba(120,95,225,0.10) 45%, rgba(139,123,232,0.06) 100%); --lima: #4E8C0B; --lima-bg: rgba(120,200,40,0.16); --lima-bd: rgba(120,200,40,0.34); --lima-tx: #3F7A0A; --lar: #B9740A; --lar-bg: rgba(240,169,59,0.18); --lar-bd: rgba(200,130,20,0.34); --lar-tx: #96600A; --lar-panel: linear-gradient(120deg, #FFF1DA 0%, #FFF8EE 60%, #FFFFFF 100%); --lar-card: linear-gradient(160deg, #FFF4E3 0%, #FFFDFA 100%); --verm: #D33B4E; --verm-bg: rgba(211,59,78,0.10); --verm-bd: rgba(211,59,78,0.28); --verm-tx: #A82B3D; --resumo: linear-gradient(160deg, #EFEAFF 0%, #FBFAFF 58%, #FFFFFF 100%); --fone-shell: #E4E2EE; --fone-tela: #F5F5F8; --fone-topo: linear-gradient(180deg, #EDE8FB 0%, #F5F5F8 100%); --sombra: 0 1px 2px rgba(17,17,26,.06); --sombra-alta: 0 16px 40px rgba(17,17,26,.14); --vidro-camada: rgba(255,255,255,.76); --vidro-dialogo: rgba(255,255,255,.88); --vidro-borda: rgba(255,255,255,.72); --vidro-sombra: 0 18px 42px rgba(42,34,76,.12); } * { box-sizing: border-box; } /* overflow-x so no body nao basta: no mobile o e o elemento que rola, entao qualquer conteudo 1px mais largo que a tela faz o navegador deixar "sambar" o site pros lados junto com o scroll vertical (rubber-band). */ html { overflow-x: hidden; width: 100%; } /* O atributo hidden perde para qualquer classe que defina display - .linha e flex, por exemplo, e o campo continuava na tela. Uma regra global resolve em vez de um [hidden] por seletor. */ [hidden] { display: none !important; } body { margin: 0; font: 15px/1.5 var(--sans); background: var(--bg-flat); color: var(--tx); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* A troca de tema, que e rara, usa o proprio botao como origem da revelacao. Durante ela nenhuma transition roda: com o "depois" sendo uma imagem viva, cada cor em transicao repintava a pagina inteira a cada quadro (travava). */ html.mudando-tema *, html.mudando-tema *::before, html.mudando-tema *::after { transition: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.mudando-tema::view-transition-new(root) { animation: tema-revelar 320ms var(--ease-out); } @keyframes tema-revelar { from { clip-path: circle(0 at var(--tema-x) var(--tema-y)); } to { clip-path: circle(150vmax at var(--tema-x) var(--tema-y)); } } ::selection { background: var(--lav-bg); color: var(--tx); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--bd-strong); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; border-radius: 10px; background: var(--lima); color: var(--ink); font-weight: 700; transform: translateY(-150%); transition: transform 160ms var(--ease-out); } .skip-link:focus { transform: translateY(0); } .mono, .selo, .cod, code, .kpi b { font-family: var(--mono); } /* ------------------------------------------------------------------ moldura */ /* 100vh fica preso ao tamanho maior da tela e sobra vao no rodape quando a barra do Safari/ilha flutuante encolhe; 100dvh acompanha o viewport real. */ .app { display: flex; align-items: stretch; min-height: 100vh; min-height: 100dvh; gap: 14px; padding: 14px; box-sizing: border-box; background: var(--bg); } .lateral { width: 216px; flex-shrink: 0; background: var(--panel); color: var(--tx); border: 1px solid var(--bd); border-radius: 26px; padding: 18px 12px; display: flex; flex-direction: column; position: sticky; top: 14px; align-self: flex-start; height: calc(100vh - 28px); } .marca { display: flex; align-items: center; gap: 11px; padding: 2px 4px 20px; } .marca .logo { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; } .marca b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: .025em; } .marca small { display: block; font-size: 11px; color: var(--tx3); letter-spacing: .04em; } .recolher-nav { position: absolute; top: 24px; right: -12px; z-index: 5; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--bd-strong); background: var(--bg-flat); color: var(--tx2); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); transition: transform 180ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .recolher-nav svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .recolher-nav:hover { background: var(--chip-hover); color: var(--tx); border-color: var(--lav-bd); } .recolher-nav:focus-visible { outline: 3px solid var(--lav); outline-offset: 2px; } .recolher-nav:active { transform: scale(.88); } .lateral.recolhida .recolher-nav { transform: rotate(180deg); } .lateral.recolhida .recolher-nav:active { transform: rotate(180deg) scale(.88); } nav { display: flex; flex-direction: column; gap: 5px; } nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: auto; padding: 11px 12px; border: 1px solid transparent; border-radius: 15px; cursor: pointer; background: transparent; color: var(--tx2); font: 500 13.5px var(--sans); text-align: left; transition: background .15s ease; white-space: nowrap; overflow: hidden; } nav button i { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--tx3); font-style: normal; } nav button i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } nav button i circle[r=".8"] { fill: currentColor; stroke: none; } nav button.ativo { background: var(--lav-nav); color: var(--tx); font-weight: 600; border-color: var(--lav-bd); } nav button.ativo i { color: var(--lima); } .sair-mobile { margin-top: auto; } /* sidebar recolhida: só o essencial em coluna fina */ .lateral.recolhida { width: 72px; padding: 18px 10px; } .lateral.recolhida .marca { justify-content: center; gap: 0; } .lateral.recolhida .marca > div { display: none; } .lateral.recolhida nav button { justify-content: center; gap: 0; padding: 11px 0; } .lateral.recolhida nav button span { display: none; } main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } section { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; min-height: 0; } /* --------------------------------------------------------- titulo de pagina */ .topo-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding: 2px 0 16px; border-bottom: 1px solid var(--linha); } h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; } h1 b { font-weight: 700; } .topo-pagina .sub { font-size: 14px; color: var(--fraco); margin-top: 10px; } .topo-pagina .acoes { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; max-width: 100%; } @media (max-width: 700px) { h1 { font-size: 28px; } } /* ------------------------------------------------------------------ cartoes */ .cartao { background: var(--card); border: 1px solid var(--linha); border-radius: 24px; padding: 24px; box-shadow: var(--sombra); } h2 { font: 700 17px/1.2 var(--sans); margin: 0 0 16px; letter-spacing: -.02em; } h3 { font: 500 12.5px/1 var(--sans); margin: 0 0 10px; color: var(--fraco); } /* ---------------------------------------------------------------------- KPI */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .kpi { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--linha); border-radius: 22px; padding: 18px 20px; box-shadow: var(--sombra); } .kpi::after { display: none; } .kpi span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fraco); } .kpi span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fraco); flex-shrink: 0; } .kpi.neutro span::before { display: none; } .kpi .valor { display: flex; align-items: flex-end; gap: 10px; margin-top: 6px; } .kpi b { font-size: 42px; font-weight: 600; letter-spacing: -.04em; line-height: 1; } .kpi em { font-style: normal; font-size: 13px; color: var(--fraco); padding-bottom: 6px; } /* card de destaque: "Em produção agora" ganha o tratamento de herói do design */ .kpi.neutro { display: flex; flex-direction: column; background: linear-gradient(115deg, #B8F04A 0%, #7FE87F 46%, #59D9A6 100%); color: var(--ink); border: none; } .kpi.neutro::before { content: ""; position: absolute; right: -40px; top: -30px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.16); pointer-events: none; } .kpi.neutro span, .kpi.neutro em { color: rgba(14,22,7,.72); } .kpi.neutro b { color: var(--ink); } .kpi-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; } .kpi-acoes span { border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 600; } /* Especificidade extra pra vencer ".kpi.neutro span" (2 classes + 1 tipo), que senao pinta os chips do mesmo tom apagado do rotulo por cima deles. */ .kpi.neutro .kpi-acoes .chip-escuro { background: #101408; color: #FFF; } .kpi.neutro .kpi-acoes .chip-claro { background: rgba(255,255,255,.85); color: #101408; } .kpi.bom span::before { background: var(--verde); } .kpi.bom b { color: var(--verde); } .kpi.bom::after { background: var(--verde); } .kpi.alerta { background: var(--laranja-bg); } .kpi.alerta span, .kpi.alerta em { color: var(--laranja-texto); } .kpi.alerta span::before { background: var(--laranja-forte); } .kpi.alerta b { color: var(--laranja); } .kpi.alerta::after { background: var(--laranja-forte); } .kpi.ruim { background: var(--verm-bg); border: 1px solid var(--verm-bd); color: var(--tx); } .kpi.ruim span, .kpi.ruim em { color: var(--verm-tx); } .kpi.ruim span::before { background: var(--verm); } .kpi.ruim b { color: var(--verm); } .kpi.volume { background: var(--lima-bg); border: 1px solid var(--lima-bd); color: var(--tx); } .kpi.volume span, .kpi.volume em { color: var(--lima-tx); } .kpi.volume span::before { background: var(--lima); } .kpi.volume b { color: var(--lima); } .kpi.despacho { background: var(--lav-bg); border: 1px solid var(--lav-bd); } .kpi.despacho span::before { background: var(--lav); } .kpi.despacho b { color: var(--lav); } /* -------------------------------------------------------------------- pills */ .pill { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 15px; border: 1px solid var(--bd-strong); border-radius: 999px; background: var(--chip); color: var(--tx); font: 600 14px var(--sans); cursor: pointer; box-shadow: none; } .pill.escura { background: linear-gradient(120deg, var(--lima) 0%, #6FE39B 100%); border-color: transparent; color: var(--ink); padding: 0 22px 0 7px; } .pill .bolinha { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--lima); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .pill.data { padding: 0 18px; font-size: 13.5px; color: var(--medio); cursor: default; } .pill .tela-icone { width: 22px; height: 15px; border-radius: 4px; border: 2px solid currentColor; flex-shrink: 0; } select.pill { width: auto; flex: 0 0 auto; appearance: none; font-size: 13.5px; color: var(--medio); padding: 0 50px 0 18px; border: 0; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 7px center; } .segmentado { display: inline-flex; gap: 3px; background: var(--cinza-bg); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; } .segmentado button { border: 0; background: transparent; color: var(--medio); border-radius: 999px; min-height: 36px; padding: 7px 16px; font: 600 13px var(--sans); cursor: pointer; } .segmentado button.ativo { background: var(--tx); color: var(--bg-flat); } /* ------------------------------------------------------------- painel/kanban */ /* O painel de ordens fica aberto o dia inteiro, entao ele cabe na janela em vez de rolar: titulo, KPIs e acoes sempre no lugar, e a rolagem acontece dentro da coluna. Em tela cheia (F11) a altura que sobra vai toda para o quadro. As outras abas sao formulario e relatorio longos - essas rolam a pagina. */ #painel { max-height: calc(100vh - 32px); } .painel-corpo { flex: 1; display: flex; gap: 12px; min-height: 0; align-items: stretch; } .painel-corpo > .quadro { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* Janela baixa demais para a moldura: o quadro sobraria em uma faixa de nada. Volta a rolar a pagina, que e o comportamento util nesse tamanho. */ @media (max-height: 700px) { #painel { max-height: none; } } @media (max-width: 1480px) { /* Empilhado tambem nao cabe na janela: mesma saida. */ #painel { max-height: none; } .painel-corpo { flex-direction: column; align-items: stretch; } .feed-cartao { width: auto; } #feed { max-height: 260px; } } .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 10px; overflow-x: auto; align-items: stretch; padding-bottom: 4px; flex: 1; min-height: 0; } .coluna { background: var(--cinza-bg); border: 1px solid var(--linha); border-radius: 20px; padding: 0 7px 7px; min-width: 160px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } /* Gruda no topo da coluna: com a rolagem por dentro, perder de vista em qual etapa a ordem esta e perder o unico rotulo do quadro. */ .coluna > h3 { position: sticky; top: 0; z-index: 1; background: var(--cinza-bg); display: flex; align-items: center; gap: 9px; padding: 20px 14px 12px; margin: 0; color: var(--tx); font-weight: 600; font-size: 13.5px; } /* Sem esta esmaecida o card passa cortado rente ao rotulo e parece defeito de tela; assim o corte se le como "tem mais coisa acima". */ .coluna > h3::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(var(--cinza-bg), transparent); pointer-events: none; } .coluna > h3 .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--fraco); flex-shrink: 0; } .coluna > h3 .qtd { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--medio); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .coluna .vazio { color: var(--fraco); font-size: 13px; padding: 0 14px 12px; margin: 0; } .card-op { background: var(--card); border: 1px solid var(--linha); border-radius: 20px; padding: 15px; margin-bottom: 7px; box-shadow: var(--sombra); transition: transform 240ms var(--ease-out), border-color 200ms ease; position: relative; isolation: isolate; } /* Sombra alta pronta numa camada propria: o hover so acende a opacidade (roda no compositor) em vez de repintar um box-shadow de 44px a cada quadro. */ .card-op::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: var(--sombra-alta); opacity: 0; transition: opacity 240ms var(--ease-out); } .card-op:last-child { margin-bottom: 0; } .card-op .topo { display: flex; align-items: center; gap: 8px; } .card-op .cod { font: 500 13px var(--mono); color: var(--fraco); white-space: nowrap; } .card-op .mat { font-size: 15.5px; font-weight: 600; margin-top: 10px; line-height: 1.25; letter-spacing: -.015em; } .card-op .meta { font: 400 13px var(--mono); color: var(--fraco); margin-top: 4px; } .card-op .rodape { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; font-size: 12.5px; color: var(--fraco); } .card-op .rodape > span:first-child { flex: 1 1 auto; min-width: 0; line-height: 1.3; } .card-op .rodape .prazo { margin-left: auto; font-weight: 600; white-space: nowrap; } .card-op.p-atencao .rodape .prazo { color: var(--laranja); } .card-op.p-atrasada .rodape .prazo { color: var(--atrasada); } .card-op.p-pronta .rodape .prazo { color: rgba(14,22,7,.85); } .card-op.atrasada { background: linear-gradient(150deg, #FF6B6B 0%, #D8425F 58%, #A32F53 100%); border-color: rgba(211,59,78,.55); color: #FFFFFF; } .card-op.atrasada .cod, .card-op.atrasada .meta, .card-op.atrasada .rodape { color: rgba(255,255,255,.82); } .card-op.atrasada .rodape .prazo { color: #FFFFFF; } .card-op.p-pronta { background: linear-gradient(125deg, #B8F04A 0%, #7FE87F 52%, #59D9A6 100%); border-color: rgba(120,200,40,.5); color: #0E1607; } .card-op.p-pronta .cod, .card-op.p-pronta .meta, .card-op.p-pronta .rodape { color: rgba(14,22,7,.68); } .card-op.p-pronta .topo .selo.pronta { background: rgba(255,255,255,.55); color: #0E1607; } /* barras de etapa dentro do card */ .card-op { --atual: var(--tx2); } .card-op.p-atencao { --atual: var(--laranja-forte); } .barras { display: flex; align-items: center; gap: 5px; margin-top: 14px; } .barras span { flex: 1; height: 5px; border-radius: 999px; background: var(--linha); } .barras span.feita { background: var(--verde); } .barras span.atual { background: var(--atual); } .card-op.atrasada .barras span { background: rgba(14,22,7,.22); } .card-op.atrasada .barras span.feita, .card-op.atrasada .barras span.atual { background: rgba(14,22,7,.75); } .card-op.p-pronta .barras span { background: rgba(14,22,7,.22); } .card-op.p-pronta .barras span.feita, .card-op.p-pronta .barras span.atual { background: rgba(14,22,7,.75); } /* --------------------------------------------------------------------- feed */ .feed-cartao { width: 280px; flex-shrink: 0; background: var(--card); border: 1px solid var(--linha); border-radius: 24px; box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; } .feed-cartao .cabeca { padding: 16px 18px; display: flex; align-items: center; gap: 10px; background: var(--card2); border-bottom: 1px solid var(--linha); } .feed-cartao .cabeca b { font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; } .feed-cartao .cabeca .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--lima-bg); } #conexao { margin-left: auto; font-size: 12px; color: var(--fraco); background: var(--cinza-bg); border-radius: 999px; padding: 4px 10px; } #feed { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 0 12px 14px; } #feed > div { padding: 12px; border-radius: 18px; display: flex; gap: 12px; align-items: flex-start; transition: background .15s ease; } #feed .ponto { width: 9px; height: 9px; margin-top: 5px; flex-shrink: 0; border-radius: 50%; background: var(--cinza-ponto); } #feed .ponto.inicio { background: var(--laranja-forte); } #feed .ponto.fim { background: var(--verde); } #feed .ponto.nova { background: var(--lav); } #feed .texto { min-width: 0; font-size: 13.5px; line-height: 1.4; } #feed .texto .op { font: 500 13.5px var(--mono); } #feed .quem { font-size: 12px; color: var(--fraco); margin-top: 3px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------ estoque: banner+grade */ .banner-preto { background: var(--lar-panel); border: 1px solid var(--lar-bd); color: var(--tx); border-radius: 22px; padding: 20px 24px; display: flex; align-items: center; gap: 18px; } .banner-preto .bang { width: 40px; height: 40px; border-radius: 50%; background: var(--lar); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; } .banner-preto b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; } .banner-preto small { display: block; font-size: 13.5px; color: var(--lar-tx); margin-top: 3px; } /* No painel o banner concorre com o quadro pela altura, entao ele e mais baixo que o do estoque - e clicavel, porque o conserto e sempre na aba de estoque. */ .banner-preto.negativo { padding: 12px 16px; gap: 12px; margin-bottom: 12px; } .banner-preto.negativo > button { margin-left: auto; flex-shrink: 0; } .banner-preto.negativo .bang { width: 30px; height: 30px; font-size: 16px; } .banner-preto.negativo b { font-size: 14.5px; } .banner-preto.negativo small { font-size: 12.5px; } /* ---------------------------------------------------- pedido de compra */ .item-pedido { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--card2); margin-bottom: 8px; cursor: pointer; } .item-pedido .nome { min-width: 0; flex: 1; } .item-pedido .nome b { display: block; font-weight: 600; } .item-pedido .nome small { color: var(--fraco); font-size: 12.5px; } .item-pedido .qtd-pedido { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .item-pedido .qtd-pedido input { width: 8.5ch; text-align: right; } .item-pedido .qtd-pedido em { color: var(--fraco); font-style: normal; font-size: 13px; } /* Abaixo de ~560px o nome e a quantidade nao cabem lado a lado. */ @media (max-width: 560px) { .item-pedido { flex-wrap: wrap; } .item-pedido .qtd-pedido { margin-left: auto; } } /* A lista de compra e feita para sair no papel: some tudo que nao e ela, e as cores viram tinta preta em fundo branco em vez de um retangulo escuro. */ @media print { .lateral, .topo-pagina .acoes, .modal, #banner-negativo { display: none !important; } .app, main { display: block; padding: 0; } #pedido-cartao, .item-pedido { background: #fff; border: 1px solid #ccc; box-shadow: none; } .item-pedido input[type="checkbox"] { display: none; } /* Item desmarcado nao vai para o papel. Onde :has() nao existir a linha imprime do mesmo jeito - degrada para "lista completa", nao para erro. */ .item-pedido:has(input[type="checkbox"]:not(:checked)) { display: none; } * { color: #000 !important; } /* O campo editavel vira texto: borda de formulario no papel e ruido. */ .qtd-pedido input { border: 0 !important; background: none !important; width: auto; } } .grade { background: var(--card); border: 1px solid var(--linha); border-radius: 24px; padding: 10px 12px 14px; box-shadow: var(--sombra); } .grade .cabecalho, .grade .item { display: grid; grid-template-columns: 2.4fr 1fr 1.2fr 1.1fr 1.1fr .9fr auto; gap: 12px; align-items: center; } .grade .cabecalho { padding: 12px 18px; font-size: 12.5px; font-weight: 600; color: var(--medio); background: var(--cinza-bg); border-bottom: 1px solid var(--linha); } .grade .item { padding: 16px 18px; border-radius: 16px; background: var(--linha-ok); transition: box-shadow .15s ease; } .grade .item.baixo { background: var(--linha-baixa); } .grade .item.critico { background: var(--linha-critica); } .grade .nome { display: flex; align-items: center; gap: 12px; } .grade .nome .barra-cor { width: 10px; height: 36px; border-radius: 999px; flex-shrink: 0; } .grade .nome b { font-size: 15px; font-weight: 600; letter-spacing: -.015em; } .grade .nome small { display: block; font-size: 12px; color: var(--fraco); margin-top: 2px; font-family: var(--mono); } .grade .qtd { font: 500 17px var(--mono); } .grade .sec { font: 400 14px var(--mono); color: var(--fraco); } .grade .minimo { font-size: 13px; color: var(--medio); } .grade .minimo small { display: block; color: var(--escuro-fraco); font-size: 13px; } .grade .acoes-linha { display: flex; gap: 6px; justify-content: flex-end; } .grade .vazio { padding: 18px; color: var(--fraco); font-size: 14px; } @media (max-width: 1100px) { .grade .cabecalho { display: none; } .grade .item { grid-template-columns: 1fr 1fr; } } #lista-ordens { flex: 1; min-height: 0; overflow-y: auto; } /* ------------------------------------------------------------------ tabelas */ table { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: 14px; } th { text-align: left; font: 600 12px var(--sans); color: var(--medio); padding: 11px 16px; position: sticky; top: 0; z-index: 1; background: var(--cinza-bg); border-bottom: 1px solid var(--linha); } td { padding: 14px 16px; background: var(--card); vertical-align: middle; } td:first-child { border-radius: 14px 0 0 14px; } td:last-child { border-radius: 0 14px 14px 0; } tr.atrasada td { background: var(--verm-bg); } /* -------------------------------------------------------------- formularios */ label { display: block; font-size: 13px; color: var(--fraco); margin-bottom: 9px; } input, select, textarea { width: 100%; min-height: 48px; padding: 13px 15px; border: 1px solid var(--linha); border-radius: 16px; font: 400 16px var(--sans); background: var(--card2); color: var(--tx); } input, select, textarea { transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--lav); background: var(--field); box-shadow: 0 0 0 3px var(--lav-bg); } input[type="checkbox"] { width: auto; accent-color: var(--verde); } .linha { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; } .linha > div { flex: 1 1 180px; } .campo-grande { font: 500 22px var(--mono) !important; } /* Opcao booleana de formulario (ex: pre-pintado) como um switch, nao um checkbox pelado. */ .opcao-toggle { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-size: 14px; color: var(--tx); user-select: none; } .opcao-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .opcao-toggle-trilho { flex-shrink: 0; width: 42px; height: 25px; border-radius: 999px; background: var(--card2); border: 1px solid var(--linha); position: relative; transition: background-color 160ms ease, border-color 160ms ease; } .opcao-toggle-bola { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--fraco); transition: transform 420ms var(--ease-mola), background-color 160ms ease; } .opcao-toggle input:checked ~ .opcao-toggle-trilho { background: var(--lav); border-color: var(--lav); } .opcao-toggle input:checked ~ .opcao-toggle-trilho .opcao-toggle-bola { transform: translateX(17px); background: var(--ink); } .opcao-toggle input:focus-visible ~ .opcao-toggle-trilho { outline: 3px solid var(--lav); outline-offset: 2px; } /* Etapas: uma pequena linha de producao, nao uma lista generica de checks. */ .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .chips label { position: relative; min-height: 94px; margin: 0; padding: 13px 14px 15px; border: 1px solid var(--linha); border-radius: 16px; background: var(--card2); color: var(--escuro-fraco); cursor: pointer; overflow: hidden; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 8px; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .chips label::after { content: ""; position: absolute; right: 14px; bottom: 0; left: 14px; height: 3px; border-radius: 3px 3px 0 0; background: var(--lav); transform: scaleX(0); transform-origin: left; transition: transform .15s ease; } .chips input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .etapa-numero { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--fraco); } .etapa-nome { align-self: end; grid-column: 1 / -1; font-size: 15px; font-weight: 600; line-height: 1.15; } .etapa-marca { width: 23px; height: 23px; border: 1px solid var(--cinza-ponto); border-radius: 50%; color: transparent; display: grid; place-items: center; font-size: 13px; font-weight: 700; transition: transform 420ms var(--ease-mola), background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .chips label:has(input:focus-visible) { outline: 3px solid var(--lav); outline-offset: 2px; } .chips label:has(input:checked) { background: var(--lav-bg); border-color: var(--lav-bd); color: var(--tx); } .chips label:has(input:checked)::after { transform: scaleX(1); } .chips label:has(input:checked) .etapa-numero { color: var(--lav); } .chips label:has(input:checked) .etapa-marca { border-color: var(--lav); background: var(--lav); color: var(--ink); transform: scale(1.06); } .chips label:active { transform: scale(.98); } @media (max-width: 760px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* a conta em texto, embaixo da quantidade (canvas: formulaTxt) */ .formula { background: var(--cinza-bg); border: 1px solid var(--linha); border-radius: 16px; padding: 14px 18px; font-size: 13.5px; color: var(--grafite); } .info-campo { font-size: 13px; color: var(--fraco); margin-top: 9px; } /* caixa de destaque (conversao kg -> metros) */ .caixa-preta { background: linear-gradient(120deg, var(--lima) 0%, #6FE39B 100%); color: #0E1607; border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; } .caixa-preta span { font-size: 13px; color: rgba(14,22,7,.7); } .caixa-preta b { font: 500 26px var(--mono); letter-spacing: -.02em; margin-top: 2px; color: #0E1607; } /* aside de resumo */ .resumo { width: 350px; flex-shrink: 0; background: var(--resumo); color: var(--tx); border: 1px solid var(--lav-bd); border-radius: 26px; padding: 26px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--sombra-alta); } .resumo .rotulo { font-size: 13px; color: var(--tx2); } .resumo .titulo { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; margin-top: 8px; } .resumo .linhas { display: flex; flex-direction: column; gap: 13px; border-top: 1px solid var(--bd-strong); padding-top: 18px; } .resumo .linhas div { display: flex; align-items: baseline; gap: 12px; font-size: 14px; } .resumo .linhas span { color: var(--tx2); } .resumo .linhas b { margin-left: auto; font: 500 14px var(--mono); } .resumo .linhas b.destaque { color: var(--lima); } .resumo .linhas b.apagado { color: var(--tx4); } .resumo .cabeca { display: flex; align-items: center; gap: 10px; } .resumo .cabeca .mais { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tx2); } .resumo .nota { border-radius: 20px; background: var(--lima-bg); padding: 16px 18px; font-size: 13.5px; line-height: 1.5; color: var(--lima-tx); } .resumo .nota.alerta { background: var(--lar-bg); color: var(--lar-tx); } .resumo .nota.erro { background: var(--verm-bg); color: var(--verm-tx); } /* --------------------------------------------------------------- relatorios */ .rel-filtros { align-items: flex-end !important; } .rel-campo-data { margin: 0; } .rel-campo-data span { display: block; padding: 0 0 6px 8px; font-size: 12px; color: var(--fraco); } .rel-campo-data input { width: 158px; height: 46px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--card); box-shadow: none; font: 500 13px var(--mono); } .rel-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 14px; align-items: start; } .rel-painel { background: var(--card); border: 1px solid var(--linha); border-radius: 24px; padding: 24px; box-shadow: var(--sombra); min-width: 0; } .rel-materiais { grid-column: 1 / -1; } .rel-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; } .rel-cabecalho h2 { margin: 0; } .rel-cabecalho p { margin: 5px 0 0; color: var(--fraco); font-size: 13px; } .rel-cabecalho > span { font: 500 12px var(--mono); color: var(--medio); white-space: nowrap; } .rel-vazio { padding: 28px 16px; text-align: center; color: var(--fraco); font-size: 13.5px; } .rel-dias { display: flex; flex-direction: column; gap: 7px; } .rel-dia { display: grid; grid-template-columns: 58px minmax(80px, 1fr) 86px 90px; align-items: center; gap: 14px; min-height: 42px; padding: 5px 8px; } .rel-dia > b { font: 500 13px var(--mono); } .rel-dia > span { color: var(--fraco); font-size: 12.5px; text-align: right; } .rel-dia > strong { font: 600 13px var(--mono); text-align: right; } .rel-trilho, .rel-mini-trilho { height: 8px; border-radius: 999px; background: var(--cinza-bg); overflow: hidden; } .rel-trilho span, .rel-mini-trilho i { display: block; width: var(--largura); height: 100%; border-radius: inherit; background: var(--verde); transform: scaleX(1); transform-origin: left; transition: transform 900ms var(--ease-out) calc(var(--i, 0) * 45ms + 200ms); } /* Linhas do relatorio entram em fila (--i vem do template) e cada barra cresce logo depois da sua linha: da para ler a "corrida" de cima para baixo. */ .rel-dias > *, #rel-funcionarios > * { animation: entrar 520ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); } @starting-style { .rel-trilho span, .rel-mini-trilho i { transform: scaleX(.04); } } .rel-funcionario { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 6px; border-bottom: 1px solid var(--linha); } .rel-funcionario:last-child { border-bottom: 0; } .rel-funcionario .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--lima) 0%, #A6E86E 45%, #6FE39B 100%); color: var(--ink); font: 600 12px var(--mono); } .rel-funcionario > div { min-width: 0; } .rel-funcionario > div > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .rel-funcionario > div > span { display: block; color: var(--fraco); font-size: 12px; margin-top: 2px; } .rel-mini-trilho { height: 4px; margin-top: 8px; } .rel-mini-trilho i { background: var(--laranja-forte); } .rel-funcionario > strong { font: 600 20px var(--mono); text-align: right; } .rel-funcionario > strong small { display: block; font: 400 10px var(--sans); color: var(--fraco); } .rel-tabela-wrap { overflow-x: auto; } .rel-materiais table { min-width: 620px; } .rel-materiais td { background: var(--card2); } .rel-materiais td:nth-child(2), .rel-materiais th:nth-child(2) { width: 100px; text-align: center; } .rel-materiais td:nth-child(3), .rel-materiais th:nth-child(3) { width: 150px; text-align: right; } .rel-materiais td:nth-child(4), .rel-materiais th:nth-child(4) { width: 240px; } .rel-participacao { display: flex; align-items: center; gap: 12px; } .rel-participacao > span { flex: 1; height: 7px; border-radius: 999px; background: linear-gradient(to right, var(--laranja-forte) var(--largura), var(--cinza-bg) var(--largura)); } .rel-participacao > b { min-width: 48px; text-align: right; font: 500 12px var(--mono); } .rel-etapas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* nome de etapa e mais longo que a data curta do .rel-dia - so a 1a coluna muda */ .rel-etapa { grid-template-columns: 150px minmax(60px, 1fr) 86px 78px !important; } @media (max-width: 640px) { .rel-etapas-grid { grid-template-columns: 1fr; } } @media (max-width: 980px) { .rel-layout { grid-template-columns: 1fr; } .rel-materiais { grid-column: auto; } } @media (max-width: 700px) { .rel-filtros { width: 100%; justify-content: flex-start !important; } .rel-campo-data { flex: 1 1 140px; } .rel-campo-data input { width: 100%; } .rel-dia { grid-template-columns: 52px minmax(70px, 1fr) 78px; gap: 9px; } .rel-dia > span { display: none; } } /* ------------------------------------------------------------------ botoes */ button.acao { background: linear-gradient(120deg, var(--lima) 0%, #A6E86E 45%, #6FE39B 100%); color: #101408; border: none; border-radius: 999px; padding: 0 22px; min-height: 48px; font: 600 14.5px var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 12px; } button.secundaria { background: var(--chip); color: var(--medio); border: 1px solid var(--bd-strong); } button.perigo { background: transparent; color: var(--vermelho); border: 1px solid var(--verm-bd); } button.mini { height: 36px; padding: 0 16px; font-size: 13px; } button.acao.grande { height: 56px; padding: 0 30px 0 8px; font-size: 15.5px; gap: 14px; } button.acao.grande .bolinha { width: 40px; height: 40px; font-size: 18px; } button.secundaria.grande { height: 56px; padding: 0 26px; font-size: 15px; } .acao .bolinha { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--lima); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } /* ------------------------------------------------------------------- selos */ .selo { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 11px var(--sans); letter-spacing: .01em; white-space: nowrap; } .selo.espera { background: var(--areia); color: var(--grafite); } .selo.andando { background: var(--areia); color: var(--grafite); } .selo.pronta { background: var(--verde-bg); color: var(--verde); } .selo.cancelada { background: var(--vermelho); color: #FFF; } .selo.atrasada { background: var(--atrasada); color: var(--texto); } .selo.atencao { background: var(--amarelo-selo); color: var(--texto); } .selo.baixo { background: var(--amarelo-selo); color: var(--texto); } .selo.critico { background: var(--vermelho); color: #FFF; } .selo.ok { background: var(--verde-bg); color: var(--verde); } .card-op .topo .selo { margin-left: auto; } .card-op.atrasada .selo.espera { background: rgba(20,10,16,.42); color: rgba(255,255,255,.72); } /* --------------------------------------------------------- trilha de etapas */ .trilha { display: flex; gap: 4px; margin-top: 8px; } .trilha span { flex: 1; font: 400 11px var(--mono); text-align: center; padding: 5px 4px; border-radius: 999px; background: var(--cinza-bg); color: var(--fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trilha span.feita { background: var(--verde-bg); color: var(--verde); } .trilha span.atual { background: var(--verde); color: #FFF; } /* ----------------------------------------------------------------- avisos */ .aviso { padding: 14px 18px; border: 1px solid currentColor; border-radius: 12px; font-size: 14px; margin-bottom: 16px; } .aviso.erro { background: var(--vermelho-bg); color: var(--vermelho); } .aviso.ok { background: var(--verde-bg); color: var(--verde); } .aviso.alerta { background: var(--laranja-bg); color: var(--laranja-texto); } .dica { color: var(--fraco); font-size: 13px; margin-top: 9px; } /* ---------------------------------------------------------- integracao ERP */ .integracao-layout { display: grid; grid-template-columns: minmax(360px, .8fr) minmax(540px, 1.2fr); gap: 14px; align-items: start; } .integracao-form { min-width: 0; } .integracao-lista { min-width: 0; } .integracao-lista-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .integracao-lista-cabeca h2 { margin-bottom: 4px; } .integracao-lista-cabeca .dica { margin: 0; } .integracao-tabela { max-height: 620px; overflow: auto; margin: 12px -8px -8px; } .integracao-tabela td:first-child { min-width: 190px; } .integracao-tabela td:nth-child(3) { min-width: 180px; } .map-item-nome { display: block; margin-top: 3px; color: var(--fraco); font-size: 12px; } .map-destino { font-weight: 600; } .map-destino small { display: block; margin-top: 3px; color: var(--fraco); font-weight: 400; } @media (max-width: 1250px) { .integracao-layout { grid-template-columns: 1fr; } .integracao-form { max-width: 860px; } } /* -------------------------------------------------------- equipe e acessos */ .equipe-cartao { width: 100%; max-width: 820px; } .func-item { display: grid; grid-template-columns: 38px minmax(150px, 1fr) auto; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--linha); } .func-item:last-child { border-bottom: 0; } .func-avatar { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(140deg, var(--lima) 0%, #A6E86E 45%, #6FE39B 100%); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; } .func-identidade b { display: block; font-weight: 600; } .func-identidade small { display: block; color: var(--medio); font-size: 12.5px; margin-top: 2px; } .func-acoes { grid-column: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .pin-revelado { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; background: var(--lav-bg); border: 1px solid var(--lav-bd); border-radius: 14px; padding: 10px 12px; } .pin-revelado span { color: var(--medio); font-size: 12px; } .pin-revelado strong, .pin-entrega strong { font: 600 24px/1 var(--mono); letter-spacing: .16em; color: var(--tx); } .pin-revelado button { margin-left: auto; } .pin-entrega { display: flex; align-items: center; gap: 14px; } .pin-entrega span { flex: 1; } @media (max-width: 700px) { .func-item { grid-template-columns: 38px minmax(0, 1fr); } .func-acoes, .pin-revelado { grid-column: 1 / -1; justify-content: flex-start; } .pin-entrega { align-items: flex-start; flex-wrap: wrap; } } /* --------------------------------------------------- tela de scan (linha) */ .app-scan { flex-direction: column; } .app-scan main { align-items: stretch; } .app-scan .topo-pagina .acoes select.pill { min-width: 220px; } /* moldura do celular do design, usada tambem no monitor da linha */ .celular { width: 420px; max-width: 100%; align-self: center; background: var(--fone-shell); border: 1px solid var(--bd-strong); border-radius: 34px; padding: 8px; box-shadow: var(--sombra-alta); } .celular .tela { background: var(--fone-tela); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; } .cabeca-scan { background: var(--fone-topo); color: var(--tx); padding: 12px 22px 18px; display: flex; align-items: center; gap: 11px; } .cabeca-scan .avatar { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(140deg, var(--lima) 0%, #A6E86E 45%, #6FE39B 100%); color: var(--ink); display: flex; align-items: center; justify-content: center; font: 600 13px var(--sans); flex-shrink: 0; } .cabeca-scan b { display: block; font-size: 15px; font-weight: 600; } .cabeca-scan small { display: block; font-size: 12.5px; color: var(--tx2); } .cabeca-scan .online { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--lima-tx); background: var(--lima-bg); border-radius: 999px; padding: 7px 13px; } .cabeca-scan .online .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); } .cabeca-scan .online.caiu { color: var(--verm-tx); background: var(--verm-bg); } .cabeca-scan .online.caiu .ponto { background: var(--verm); } .corpo-scan { padding: 16px; display: flex; flex-direction: column; gap: 14px; } /* faixa grande de confirmacao: alvo de 100px do design */ .faixa-scan { border-radius: 18px; min-height: 100px; padding: 18px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 15px; background: var(--cinza-bg); color: var(--medio); } .faixa-scan[hidden] { display: none; } .faixa-scan b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; } /* "andando" = etapa em curso (perto de fechar), "pronta" = etapa fechada neste scan, seguindo para a proxima - cores emprestadas dos estados rodando/feito do design novo. */ .faixa-scan.andando { background: linear-gradient(140deg, var(--lima) 0%, #8FE070 40%, #59D9A6 100%); color: #0E1607; } .faixa-scan.pronta { background: linear-gradient(140deg, #C9BCFA 0%, #8B7BE8 100%); color: #141020; } .faixa-scan.alerta { background: var(--amarelo-selo); color: var(--texto); } .faixa-scan.erro { background: var(--vermelho); color: #FFF; } /* ------------------------------------------------------------------ modo TV */ /* O mesmo quadro do kanban em tamanho de parede, agora em tela cheia de verdade (Fullscreen API). Todo tamanho sai de --u, entao o quadro inteiro acompanha o monitor da mesa ou o painel de 65" do galpao sem outro layout. --u = 1px na tela de referencia (1600x900); a menor das duas medidas manda, porque coluna estreita nao pode receber texto de tela larga. O modo TV e sempre escuro, mesmo com o resto do sistema em tema claro. */ .tv { --u: clamp(.7px, min(calc(100vh / 900), calc(100vw / 1600)), 2.2px); position: fixed; inset: 0; z-index: 60; background: #071521; color: #FFF; display: flex; flex-direction: column; gap: calc(26 * var(--u)); padding: calc(32 * var(--u)) calc(34 * var(--u)); } .tv[hidden] { display: none; } .tv > header { display: flex; align-items: center; gap: calc(28 * var(--u)); } .tv > header img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); object-fit: contain; flex-shrink: 0; } .tv > header b { display: block; font-size: calc(38 * var(--u)); font-weight: 600; letter-spacing: -.03em; line-height: 1; } .tv > header small { display: block; font-size: calc(20 * var(--u)); color: #9A968E; margin-top: calc(6 * var(--u)); } .tv-kpis { margin-left: auto; display: flex; align-items: center; gap: calc(16 * var(--u)); } .tv-kpis .bloco { background: linear-gradient(120deg, var(--lima) 0%, #6FE39B 100%); color: #0E1607; border-radius: calc(22 * var(--u)); padding: calc(16 * var(--u)) calc(26 * var(--u)); text-align: center; } .tv-kpis .bloco span { font-size: calc(16 * var(--u)); color: rgba(14,22,7,.72); letter-spacing: .04em; } .tv-kpis .bloco b { display: block; font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.05; } .tv-kpis .prazo { background: #16161F; border: calc(1 * var(--u)) solid rgba(255,255,255,.08); } .tv-kpis .prazo span { color: #8A8A9C; } .tv-kpis .prazo b { color: #FFF; } .tv-kpis .atencao { background: linear-gradient(160deg, #3A2A12 0%, #1A1520 100%); border: calc(1 * var(--u)) solid rgba(240,169,59,.4); color: #F0A93B; } .tv-kpis .atencao span { color: #E8B268; } .tv-kpis .atrasadas { background: linear-gradient(150deg, #FF6B6B 0%, #C93A5B 100%); } .tv-kpis .atencao b, .tv-kpis .atrasadas b { font-weight: 700; } .tv-kpis .fechar { border: 0; background: #1A1A1A; color: #9A968E; border-radius: 999px; width: calc(56 * var(--u)); height: calc(56 * var(--u)); font-size: calc(22 * var(--u)); cursor: pointer; } .tv-kpis .fechar:hover { background: #2A2A2A; } .tv-quadro { flex: 1; min-height: 0; display: grid; gap: calc(18 * var(--u)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .coluna-tv { display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-height: 0; } .coluna-tv > h3 { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: 0; padding: 0 calc(6 * var(--u)) calc(14 * var(--u)); border-bottom: calc(3 * var(--u)) solid #262626; color: #FFF; font: 600 calc(26 * var(--u))/1.1 var(--sans); letter-spacing: -.02em; text-transform: uppercase; } .coluna-tv > h3 .ponto { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; flex-shrink: 0; } .coluna-tv > h3 .qtd { margin-left: auto; font: 600 calc(26 * var(--u)) var(--mono); color: #9A968E; } /* Quantas ordens a coluna nao teve altura para mostrar. Cor de moldura, nao de estado: nao e alerta, e o quadro dizendo o que esta escondendo. */ .coluna-tv > h3 .resto { flex-shrink: 0; padding: 0 calc(10 * var(--u)); border-radius: 999px; background: #262626; color: #9A968E; white-space: nowrap; font: 600 calc(20 * var(--u)) var(--mono); text-transform: none; } .coluna-tv .cards { display: flex; flex-direction: column; gap: calc(14 * var(--u)); overflow: hidden; } .card-tv { background: linear-gradient(160deg, #1C1C28 0%, #12121A 100%); border: calc(1 * var(--u)) solid rgba(255,255,255,.09); color: #FFFFFF; border-radius: calc(22 * var(--u)); padding: calc(20 * var(--u)) calc(22 * var(--u)); } .card-tv .topo { display: flex; align-items: center; gap: calc(12 * var(--u)); min-width: 0; } .card-tv .cod { font: 600 calc(30 * var(--u)) var(--mono); letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-tv .selo { margin-left: auto; flex-shrink: 0; font-size: calc(17 * var(--u)); font-weight: 700; padding: calc(7 * var(--u)) calc(16 * var(--u)); text-transform: uppercase; letter-spacing: .03em; } .card-tv .mat { font-size: calc(25 * var(--u)); font-weight: 600; margin-top: calc(12 * var(--u)); line-height: 1.2; letter-spacing: -.02em; } .card-tv .meta { font: 400 calc(21 * var(--u)) var(--mono); color: #8A8A9C; margin-top: calc(8 * var(--u)); } /* Cliente e prazo dividem a linha; quando nao cabem, o prazo cai para a linha de baixo em vez de espremer o nome do cliente ate virar "M...". */ .card-tv .rodape { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4 * var(--u)) calc(16 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(20 * var(--u)); color: #8A8A9C; } .card-tv .rodape > span:first-child { flex: 1 1 10em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-tv .rodape .prazo { margin-left: auto; font-size: calc(22 * var(--u)); font-weight: 700; white-space: nowrap; } .card-tv.p-atencao .rodape .prazo { color: #F0A93B; } .card-tv.p-pronta .rodape .prazo { color: rgba(14,22,7,.9); } /* Atrasada toma o card inteiro em vermelho: e o unico estado que precisa ser lido do outro lado do galpao. */ .card-tv.p-atrasada { background: linear-gradient(150deg, #FF6B6B 0%, #C93A5B 100%); color: #FFF; } .card-tv.p-atrasada .meta, .card-tv.p-atrasada .rodape { color: rgba(255, 255, 255, .82); } .card-tv.p-atrasada .rodape .prazo { color: #FFF; } .card-tv.p-atrasada .selo { background: rgba(20,10,16,.45); color: #FFFFFF; } .card-tv.p-pronta { background: linear-gradient(125deg, #B8F04A 0%, #59D9A6 100%); border-color: rgba(184,240,74,.5); color: #0E1607; } .card-tv.p-pronta .meta, .card-tv.p-pronta .rodape { color: rgba(14,22,7,.7); } .card-tv.p-pronta .selo { background: rgba(255,255,255,.55); color: #0E1607; } .card-tv .selo.atencao { background: var(--amarelo-selo); color: var(--texto); } .card-tv .selo.andando, .card-tv .selo.espera { background: rgba(255,255,255,.10); color: #FFFFFF; } .tv > footer { display: flex; align-items: center; gap: calc(20 * var(--u)); min-width: 0; background: #1A1A1A; border-radius: calc(22 * var(--u)); padding: calc(18 * var(--u)) calc(26 * var(--u)); } .tv > footer .ponto { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #3FA968; flex-shrink: 0; } .tv > footer .rotulo { font-size: calc(19 * var(--u)); color: #9A968E; flex-shrink: 0; } #tv-feed { display: flex; gap: calc(20 * var(--u)); min-width: 0; overflow: hidden; } #tv-feed .item { font-size: calc(21 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tv-feed .item b { font: 600 calc(21 * var(--u)) var(--mono); color: var(--cinza-ponto); } #tv-feed .item b.inicio { color: var(--laranja-forte); } #tv-feed .item b.fim { color: var(--verde); } #tv-feed .item em { font-style: normal; color: #9A968E; } #tv-feed .vazio { font-size: calc(21 * var(--u)); color: #9A968E; } /* -------------------------------------------------------------- login */ /* Acesso direto, no mesmo registro visual das ferramentas corporativas. */ .login { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 20px; background: var(--bg); } .login .cartao { width: 100%; min-width: 0; max-width: 430px; padding: 36px 38px 32px; border: 1px solid var(--linha); box-shadow: var(--sombra-alta); } .login .marca b { color: var(--tx); } .login .marca small { color: var(--fraco); } .login h1 { font-size: 33px; letter-spacing: -.035em; } /* O risco que o chapeiro passa antes de cortar: a unica animacao da tela. */ .login .marcacao { width: 62px; height: 2px; border-radius: 2px; background: var(--lima); margin: 15px 0 0; transform-origin: left center; animation: risco 700ms var(--ease-out) 420ms both; } @keyframes risco { from { transform: scaleX(0); } } .tema-toggle { border: 1px solid var(--bd-strong); background: var(--chip); color: var(--tx); width: 42px; height: 42px; border-radius: 50%; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease; } .tema-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .tema-toggle:hover { background: var(--chip-hover); } .tema-toggle:active { transform: scale(.93) rotate(12deg); } .login .tema-toggle { position: absolute; top: 22px; right: 22px; } .login { position: relative; } @media (max-width: 420px) { .login .cartao { padding: 28px 24px 26px; } .login h1 { font-size: 29px; } } /* ---- login da producao: escolher perfil (nome) e depois digitar o PIN */ .login .segmentado { margin-top: 18px; width: 100%; } .login .segmentado button { flex: 1; justify-content: center; } .perfil-grade { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; max-height: 46vh; overflow-y: auto; } .perfil-setor { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--medio); margin: 14px 0 -2px; padding-left: 2px; } .perfil-setor:first-child { margin-top: 0; } .perfil-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 0 16px; background: var(--chip); border: 1px solid var(--bd-strong); border-radius: 16px; cursor: pointer; font: 600 15.5px var(--sans); color: var(--tx); text-align: left; } .perfil-item .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, var(--lima) 0%, #A6E86E 45%, #6FE39B 100%); color: var(--ink); display: flex; align-items: center; justify-content: center; font: 700 13px var(--sans); flex-shrink: 0; } .pin-tela { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 22px; } .pin-voltar { align-self: flex-start; background: none; border: none; color: var(--fraco); font: 500 14px var(--sans); cursor: pointer; padding: 4px 0; } .pin-quem { text-align: center; color: var(--fraco); font-size: 14.5px; } .pin-pontos { display: flex; gap: 12px; } .pin-pontos span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bd-strong); } .pin-pontos span.cheio { background: var(--tx); border-color: var(--tx); } .teclado-pin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; } .teclado-pin button { height: 64px; border-radius: 16px; border: 1px solid var(--bd-strong); background: var(--chip); color: var(--tx); font: 600 22px var(--mono); cursor: pointer; } .teclado-pin button.apagar { display: inline-flex; align-items: center; justify-content: center; } .teclado-pin button.apagar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* --------------------------------------- detalhe da ordem (historico + saida) */ .card-op.clicavel { cursor: pointer; } td.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; } .modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.6); backdrop-filter: blur(5px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; } .modal[hidden] { display: none; } .modal-caixa { position: relative; width: 100%; max-width: 640px; background: var(--card); border: 1px solid var(--bd-strong); border-radius: 26px; padding: 28px 30px 30px; box-shadow: var(--sombra-alta); } .modal-caixa h2 { font-size: 13px; font-weight: 600; color: var(--fraco); letter-spacing: .06em; text-transform: uppercase; margin: 26px 0 12px; } .fechar-modal { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--cinza-bg); color: var(--medio); font-size: 20px; line-height: 1; cursor: pointer; } /* Glassmorphism so nas camadas que flutuam sobre a interface. Conteudo de trabalho (cards, tabelas, formularios e KPIs) permanece opaco e legivel. Sem suporte a backdrop-filter, os fundos solidos definidos acima continuam. */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .lateral, .login .cartao { background: var(--vidro-camada); border-color: var(--vidro-borda); box-shadow: var(--vidro-sombra); } /* O desfoque so entra onde passa conteudo por baixo: a barra de abas do celular. No computador a lateral e o login ficam sobre o fundo liso, onde o blur nao mudava nada na tela mas era recalculado a cada quadro de rolagem e de animacao. O dialogo ja tem o fundo do .modal desfocado atras dele. */ @media (max-width: 900px) { .lateral { -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); } } } .titulo-modal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 40px; } .titulo-modal .cod { font: 500 24px var(--mono); letter-spacing: -.02em; } /* Ficha do formulario de papel: rotulo a esquerda, valor a direita. */ .ficha { margin-top: 18px; border-top: 1px solid var(--linha); } .ficha > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; } .ficha span { color: var(--fraco); flex-shrink: 0; } .ficha b { font-weight: 600; text-align: right; } .evento-hist { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card2); margin-bottom: 6px; font-size: 14px; } .evento-hist .hora { font: 400 13px var(--mono); color: var(--fraco); flex-shrink: 0; } .evento-hist b { font-weight: 600; } .evento-hist .quem { margin-left: auto; color: var(--fraco); font-size: 13px; } /* Scan desfeito continua legivel - e historico, nao lixo -, mas recuado do que ainda vale. Sem depender so da cor: o selo escrito "desfeito" carrega a informacao, e o risco no nome da etapa reforca. */ .evento-hist.estornado { opacity: .62; } .evento-hist.estornado b { text-decoration: line-through; } .evento-hist button[data-estornar] { flex-shrink: 0; } /* Confirmacoes recentes na tela da linha: o lugar de desfazer o scan errado. Fica abaixo da lista de ordens porque e excecao, nao o trabalho normal. */ #recentes { margin-top: 22px; border-top: 1px solid var(--bd); padding-top: 14px; } .titulo-recentes { font-size: 14px; font-weight: 600; margin: 0 0 2px; } .card-recente { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card2); margin-top: 8px; } .card-recente small { display: block; color: var(--fraco); font-size: 12px; margin-top: 2px; } .card-recente button { flex-shrink: 0; margin-left: auto; } /* --------------------------------------------------- camada de interacao */ /* Movimento curto so quando confirma uma acao ou preserva contexto espacial. */ button.acao, button.pill, nav button, .segmentado button, .fechar-modal, .teclado-pin button { transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms var(--ease-out); touch-action: manipulation; } button.acao:not(:disabled):active, button.pill:not(:disabled):active, nav button:not(:disabled):active, .segmentado button:not(:disabled):active, .fechar-modal:not(:disabled):active { transform: scale(.97); } .teclado-pin button:active { transform: scale(.92); background: var(--chip-hover); } .fechar-modal { transition-duration: 260ms; } /* Brilho que atravessa o botao de destaque no hover (fica atras do texto). */ button.acao:not(.secundaria):not(.perigo), .pill.escura { position: relative; overflow: hidden; isolation: isolate; } button.acao:not(.secundaria):not(.perigo)::after, .pill.escura::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); } .acao .bolinha, .pill .bolinha { transition: transform 460ms var(--ease-mola); } nav button i { transition: transform 220ms var(--ease-out), color 200ms ease; } .perfil-item { transition: transform 220ms var(--ease-out), border-color 160ms ease; } .perfil-item:active { transform: scale(.98); } .perfil-item .avatar { transition: transform 460ms var(--ease-mola); } button:focus-visible, [role="button"]:focus-visible, .coluna:focus-visible { outline: 3px solid var(--lav); outline-offset: 3px; } button:disabled { cursor: not-allowed; opacity: .55; } button[data-carregando] { cursor: progress; } button[data-carregando]::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: girar 620ms linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } @media (hover: hover) and (pointer: fine) { nav button:hover { background: var(--chip-hover); } nav button.ativo:hover { background: var(--chip-hover); } nav button:hover i { transform: translateX(2px); } /* .escura fora: o fundo cinza de hover apagava o degrade verde do botao. */ .pill:not(.data):not(.escura):hover { background: var(--chip-hover); box-shadow: var(--sombra-alta); transform: translateY(-1px); } .pill.escura:hover { filter: brightness(1.08); box-shadow: var(--sombra-alta); transform: translateY(-1px); } .pill.escura:hover .bolinha { transform: rotate(90deg); } select.pill:hover { background-color: var(--chip-hover); } .segmentado button:hover { background: var(--chip-hover); } .segmentado button.ativo:hover { filter: brightness(.95); } button.acao:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--sombra-alta); } button.acao.grande:hover .bolinha { transform: translate(2px, -2px) scale(1.08); } button.acao:not(.secundaria):not(.perigo):not(:disabled):hover::after, .pill.escura:hover::after { transform: translateX(120%); transition: transform 820ms var(--ease-out); } button.secundaria:hover { background: var(--chip-hover); } button.perigo:hover { background: var(--vermelho-bg); } .card-op.clicavel:hover { transform: translateY(-3px); border-color: var(--lav-bd); } .card-op.clicavel:hover::before { opacity: 1; } .grade .item:hover { box-shadow: 0 5px 16px rgba(0, 0, 0, .3); transform: translateY(-1px); } #feed > div:hover { background: var(--cinza-bg); } .chips label:hover { border-color: var(--lav-bd); transform: translateY(-1px); } .fechar-modal:hover { background: var(--chip-hover); transform: rotate(90deg); } .perfil-item:hover { border-color: var(--lav-bd); transform: translateX(4px); } .perfil-item:hover .avatar { transform: scale(1.1) rotate(-8deg); } } .grade .item, #feed > div { transition: transform 180ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms ease; } .aviso:not([hidden]) { opacity: 1; transform: translateY(0); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); } @starting-style { .aviso:not([hidden]) { opacity: 0; transform: translateY(6px); } } #campo-tinta:not([hidden]), #campo-cor:not([hidden]), #etapa-datas-custom:not([hidden]), .pin-revelado:not([hidden]), .banner-preto:not([hidden]) { opacity: 1; transform: translateY(0); transition: opacity 180ms var(--ease-out), transform 200ms var(--ease-out); } @starting-style { #campo-tinta:not([hidden]), #campo-cor:not([hidden]), #etapa-datas-custom:not([hidden]), .pin-revelado:not([hidden]), .banner-preto:not([hidden]) { opacity: 0; transform: translateY(7px); } } /* ----------------------------------------------------- camada de movimento */ /* Regras da casa: so transform e opacity se movem (compositor, sem layout); entrada com --ease-out, o que assenta no lugar com --ease-mola. O JS que dispara os efeitos de lista mora no app.js (animarLista, marcar). Telas: cada aba entra em cascata - titulo, KPIs um a um, depois os blocos. Keyframe, e nao transition, porque o [hidden] liga e desliga o display e o keyframe recomeca toda vez que a aba aparece. fill "backwards" nao prende o transform depois, entao hover e :active continuam valendo. Sem suporte a sibling-index() tudo entra junto, so sem a cascata. */ @keyframes entrar { from { opacity: 0; transform: translateY(18px); } } @keyframes entrar-lado { from { opacity: 0; transform: translateX(-22px); } } @keyframes entrar-direita { from { opacity: 0; transform: translateX(26px); } } @keyframes entrar-kpi { from { opacity: 0; transform: translateY(24px) scale(.94); } } @keyframes rotulo { from { opacity: 0; transform: translateX(-6px); } } main > section > :not(.kpis, .painel-corpo, .rel-layout, .integracao-layout), .app-scan main > *, .login .cartao > :not(h1, .marcacao) { animation: entrar 560ms var(--ease-out) backwards; animation-delay: calc((sibling-index() - 1) * 70ms); } .rel-layout > *, .integracao-layout > * { animation: entrar 600ms var(--ease-out) backwards; animation-delay: calc(140ms + sibling-index() * 70ms); } .kpis > .kpi { animation: entrar-kpi 680ms var(--ease-mola) backwards; animation-delay: calc(40ms + sibling-index() * 70ms); } .painel-corpo > .quadro { animation: entrar 600ms var(--ease-out) 200ms backwards; } .painel-corpo > .feed-cartao { animation: entrar-direita 640ms var(--ease-out) 320ms backwards; } /* Menu: a lateral desliza, os itens descem em fila, o rotulo volta ao expandir. */ .lateral { z-index: 2; animation: entrar-lado 620ms var(--ease-out) backwards; } nav > button { animation: entrar 480ms var(--ease-out) backwards; animation-delay: calc(80ms + sibling-index() * 40ms); } .lateral:not(.recolhida) .marca > div, .lateral:not(.recolhida) nav button span { animation: rotulo 380ms var(--ease-out) 60ms backwards; } @media (max-width: 900px) { .lateral { animation-name: entrar; } } /* Pilula do item ativo (indicadorDeslizante no app.js): no menu e nos segmentados ela desliza ate o novo item com mola, em vez de pular. */ nav, .segmentado { position: relative; } nav button, .segmentado button { position: relative; z-index: 1; } .pilula { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 15px; transition: transform 560ms var(--ease-mola), width 560ms var(--ease-mola), height 560ms var(--ease-mola), opacity 160ms ease; } /* No menu todos os itens tem a mesma largura: so o transform anima (compositor). Largura animada recalculava layout a cada quadro ao recolher a lateral. */ nav > .pilula { background: var(--lav-nav); border: 1px solid var(--lav-bd); transition-property: transform, opacity; } .segmentado > .pilula { background: var(--tx); border-radius: 999px; } nav:has(> .pilula) button.ativo { background: transparent; border-color: transparent; } .segmentado:has(> .pilula) button.ativo { background: transparent; } nav button.ativo i { animation: icone-ativo 640ms var(--ease-mola); } @keyframes icone-ativo { from { transform: scale(.55) rotate(-16deg); } } /* Itens de lista redesenhados por animarLista(): .chegou na entrada (em fila, --atraso vem do JS), .mudou acende um contorno quando o conteudo muda, e o .fantasma e a copia que atravessa colunas ou sai da lista. */ [data-chave] { position: relative; } .chegou { animation: chegou 580ms var(--ease-out) var(--atraso, 0ms) backwards; } @keyframes chegou { from { opacity: 0; transform: translateY(16px) scale(.95); } } [data-chave].mudou::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px var(--lav), 0 0 26px 2px var(--lav-bd); animation: mudou 1600ms var(--ease-out) both; } @keyframes mudou { 0% { opacity: 0; transform: scale(1.06); } 14% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } } .fantasma { position: fixed !important; margin: 0 !important; z-index: 5; pointer-events: none; box-shadow: var(--sombra-alta); } .coluna > h3 .qtd.mudou { animation: mudou-qtd 600ms var(--ease-mola); } .coluna > h3 .qtd.mudou::after { display: none; } @keyframes mudou-qtd { from { transform: scale(1.6); } } /* Scan novo no feed: entra pelo .chegou e o fundo acende e apaga devagar. */ #feed > div { isolation: isolate; } #feed > .pisca::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--lav-bg); animation: pisca 2600ms ease-out both; } @keyframes pisca { to { opacity: 0; } } /* Batimento do "ao vivo": o ponto pulsa quando a conexao abre e a cada evento que chega. Nada de laco infinito: ele mantinha a GPU desenhando quadros o dia inteiro, mesmo com a tela parada (medido no PC e pesa mais no celular). */ .pulso { position: relative; } .pulso::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; pointer-events: none; animation: pulso 1400ms var(--ease-out) 2; } @keyframes pulso { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } } .tv:not([hidden]) { animation: tv 480ms var(--ease-out); } @keyframes tv { from { opacity: 0; transform: scale(1.03); } } /* Login: o cartao sobe, a marca gira para o lugar, o titulo sai de baixo de uma mascara e o risco e passado por ultimo. */ .login .cartao { animation: entrar-cartao 720ms var(--ease-out) backwards; } @keyframes entrar-cartao { from { opacity: 0; transform: translateY(28px) scale(.96); } } .login .logo { animation: logo 800ms var(--ease-mola) 160ms backwards; } @keyframes logo { from { opacity: 0; transform: scale(.4) rotate(-30deg); } } .login h1 { overflow: hidden; padding-bottom: .08em; } .login h1 > span { display: inline-block; animation: revelar 780ms var(--ease-out) 240ms backwards; } @keyframes revelar { from { transform: translateY(110%); } } .pin-pontos span { transition: background-color 160ms ease, border-color 160ms ease; } .pin-pontos span.cheio { animation: ponto 440ms var(--ease-mola); } @keyframes ponto { from { transform: scale(.3); } } .pin-pontos.errado span { background: var(--verm); border-color: var(--verm); } /* Navegacao e conteudo compactos sem perder nenhuma acao em telas menores; abaixo de 900px a lateral vira uma barra de abas fixa no rodape (padrao mobile), em vez do menu de botoes empilhado em cima do conteudo. */ @media (max-width: 900px) { .app:not(.app-scan) { flex-direction: column; } /* viewport-fit=cover deixa a pagina ir ate a borda real (passando da ilha flutuante do iPhone); sem o inset-top o conteudo ficaria por baixo dela. */ .app { padding: calc(10px + env(safe-area-inset-top)) 10px 10px; padding-bottom: calc(78px + env(safe-area-inset-bottom)); gap: 10px; } .lateral { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; z-index: 40; width: auto; height: auto; padding: 5px; border: 1px solid var(--bd); border-radius: 22px; box-shadow: var(--sombra-alta); } .lateral.recolhida { width: auto; } .recolher-nav, .lateral .marca { display: none; } .lateral nav { flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; } .lateral nav::-webkit-scrollbar { display: none; } .lateral nav button { width: auto; flex: 0 0 auto; min-width: 66px; flex-direction: column; gap: 3px; padding: 7px 11px 6px; white-space: nowrap; text-align: center; } .lateral nav button span { font-size: 10.5px; } .topo-pagina { align-items: flex-start; padding: 0 0 14px; } .topo-pagina .acoes { width: 100%; margin-left: 0; justify-content: flex-start; } .pill { min-height: 42px; } select.pill { flex: 0 1 auto; min-width: 0; max-width: 100%; } .kpis { grid-template-columns: repeat(2, minmax(145px, 1fr)); gap: 10px; } .kpi { padding: 18px; } .kpi b { font-size: 36px; } .cartao, .rel-painel { padding: 20px; border-radius: 18px; } .resumo { width: 100%; } #painel { max-height: none; } #lista-ordens { overflow-x: auto; } #lista-ordens table { min-width: 760px; } /* No aparelho real a moldura do "celular" do design vira redundante: bezel, padding e o cabecalho grande roubam altura de uma tela ja pequena, e o app-scan nao tem barra de abas embaixo (so o scan.html usa essa classe), entao o padding-bottom reservado pra ela e espaco morto. Sem moldura e esticando ate a borda, a area util some do topo ao rodape do aparelho. */ .app-scan { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } .app-scan .topo-pagina { padding-bottom: 8px; } .app-scan .topo-pagina .sub { display: none; } .celular { width: 100%; flex: 1; display: flex; flex-direction: column; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .celular .tela { flex: 1; min-height: 0; border-radius: 0; } .corpo-scan { flex: 1; min-height: 0; } #ordens-scan { flex: 1; min-height: 0; overflow-y: auto; } /* A pagina inteira ja cabe numa tela so (com #ordens-scan rolando por dentro). Se o documento tambem pudesse rolar, o gesto de rolagem faz o Safari recolher a barra/ilha flutuante e o dvh recalcula no meio do gesto - e e esse recalculo que deixa aquela sobra sem preencher antes da ilha. Travando o scroll do documento, o gesto so acontece dentro da lista e o Safari nunca mexe no proprio chrome. */ body:has(.app-scan) { overflow: hidden; height: 100dvh; } } /* Lista de ordens (Painel) e modal de detalhe: tabela e caixa flutuante pedem largura de mesa. No celular a tabela vira cards (mesmo , so o data-label do
faz o rotulo) e o modal gruda no rodape como bottom sheet, os dois padroes uteis com a mao no aparelho. */ @media (max-width: 700px) { #lista-ordens { overflow-x: visible; } #lista-ordens table, #lista-ordens tbody, #lista-ordens tr, #lista-ordens td { display: block; width: 100%; min-width: 0; } #lista-ordens thead { display: none; } #lista-ordens table { border-spacing: 0; } #lista-ordens tr { background: var(--card); border: 1px solid var(--linha); border-radius: 18px; padding: 4px 14px; margin-bottom: 10px; box-shadow: var(--sombra); } #lista-ordens tr.atrasada { background: var(--verm-bg); } #lista-ordens td { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; padding: 11px 0; border-bottom: 1px solid var(--linha); border-radius: 0; text-align: right; } #lista-ordens td:last-child { border-bottom: 0; } #lista-ordens td::before { content: attr(data-label); flex-shrink: 0; font: 600 12px var(--sans); color: var(--fraco); text-align: left; } /* .v e um elemento de verdade (nao a caixa anonima que o flex gera pro resto do conteudo) - so assim min-width:0 pega e o texto longo quebra em vez de vazar da tela. */ #lista-ordens td > .v { min-width: 0; overflow-wrap: break-word; } #lista-ordens td.acoes-linha { justify-content: flex-end; padding-top: 12px; } #lista-ordens td.acoes-linha::before { display: none; } /* Situacao carrega a trilha de etapas, que e um bloco proprio - nao cabe ao lado do rotulo na mesma linha como as outras celulas. */ #lista-ordens td[data-label="Situação"] { display: block; text-align: left; } #lista-ordens td[data-label="Situação"]::before { display: block; margin-bottom: 8px; } .modal { align-items: flex-end; padding: 0; } .modal-caixa { width: 100%; max-width: none; max-height: 90vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); } } @media (max-width: 560px) { .lateral nav button { gap: 7px; padding-inline: 7px; font-size: 12px; } .lateral nav button i { width: 22px; height: 22px; } .lateral nav button span { min-width: 0; line-height: 1.2; white-space: normal; } h1 { font-size: 28px; } .topo-pagina .sub { font-size: 13px; } .topo-pagina .acoes { gap: 8px; } .segmentado { order: -1; } .kpi .valor { align-items: flex-start; flex-direction: column; gap: 4px; } .kpi em { padding-bottom: 0; } /* Estoque no celular: a grade de 7 colunas nao cabe, entao o cabecalho some e cada item vira um cartao com rotulo/valor por linha (mesmo padrao do data-label do #lista-ordens, so que em
em vez de
). */ .grade { background: none; border: none; padding: 0; box-shadow: none; } .grade .cabecalho { display: none; } .grade .item { grid-template-columns: 1fr; gap: 0; padding: 4px 16px; border: 1px solid var(--linha); box-shadow: var(--sombra); margin-bottom: 10px; } .grade .item > div { padding: 11px 0; border-bottom: 1px solid var(--bd); } .grade .item .nome { padding-top: 13px; } .grade .item > div:last-child { border-bottom: 0; } .grade .item > div[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right; } .grade .item > div[data-label]::before { content: attr(data-label); flex-shrink: 0; font: 600 12px var(--sans); color: var(--fraco); text-align: left; } .grade .acoes-linha { justify-content: flex-end; padding-top: 13px; } .linha { gap: 12px; margin-bottom: 16px; } .login { padding: 12px; } .login .cartao { padding: 28px 24px 26px; border-radius: 22px; } .login form, .login input { min-width: 0; } .corpo-scan { padding: 12px; } .rel-dia, .rel-etapa { grid-template-columns: 50px minmax(60px, 1fr) 68px !important; gap: 8px; } } @media (prefers-reduced-motion: reduce) { /* Sem atraso de cascata e sem laco infinito: a 1ms um laco viraria pisca-pisca. */ *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; transition-delay: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 1ms !important; } button.acao:not(:disabled):active, button.pill:not(:disabled):active, nav button:not(:disabled):active, .segmentado button:not(:disabled):active, .fechar-modal:not(:disabled):active, .teclado-pin button:active, .perfil-item:active, .tema-toggle:active, .chips label:active { transform: none; } }