/* Estilos exclusivos da pagina Almoxarifado — so o que css/styles.css nao cobre genericamente (select/textarea dentro de .auth-field, que so tinha regra pra input; e alguns arranjos proprios das tabelas/telas daqui). Nao redefine nada que ja existe em styles.css. */ /* Convencao backdrop-filter (mesma de css/styles.css): so usar sobre fundo translucido de verdade (alpha < 1 em toda parada/camada do background, inclusive a de baixo — ex.: .almox-modal .pf-modal-card abaixo termina em var(--panel) solido, entao o composto final e opaco e NAO deve levar backdrop-filter). Sobre fundo opaco o backdrop-filter nao tem efeito visual e ja causou bug real de texto borrado em WebView Android (ver .auth-submit em styles.css). Este arquivo nao tem nenhum backdrop-filter hoje — confirme a translucidez do background antes de adicionar um. */ /* .pf-modal-card (vindo de styles.css) e branco por padrao — mesmo card que os modais do GPD usam, entao a troca fica so nos modais desta pagina (classe .almox-modal), sem mexer no visual dos modais do GPD. */ .almox-modal .pf-modal-card{ background: radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.14), rgba(255,255,255,0) 52%), linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%), var(--panel); border:1px solid rgba(255,255,255,0.12); } .almox-modal .pf-modal-title{ color:var(--text); } .almox-modal .pf-modal-sub{ color:var(--text-dim); } .almox-modal .pf-modal-close{ background:var(--panel-2); color:var(--text); border:1px solid var(--line); } .almox-modal .pf-modal-close:hover{ background:var(--panel); color:var(--accent); } .auth-field select, .auth-field textarea{ width:100%; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); padding:12px 14px; font-size:14px; font-family:'Inter', sans-serif; outline:none; } .auth-field textarea{ resize:vertical; } /* input[type=file] ignora background/border customizados sem appearance:none (visto ao vivo no Chrome Android — saia com o visual nativo branco, sem nenhum estilo do .auth-field genérico aplicado, mesmo estando dentro de .auth-field). Sem ícone aqui, então também reduz o padding-left de 44px (reservado pro ícone dos campos com .auth-input-wrap) pro padrão de 14px. */ .auth-field input[type="file"]{ appearance:none; -webkit-appearance:none; width:100%; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text-dim); padding:10px 14px; font-size:13px; font-family:'Inter', sans-serif; outline:none; } .auth-field input[type="file"]::file-selector-button{ margin-right:12px; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; transition:border-color .15s ease, color .15s ease; } .auth-field input[type="file"]::file-selector-button:hover{ border-color:var(--accent); color:var(--accent); } .auth-back-btn{ display:block; width:100%; text-align:center; margin-top:10px; box-sizing:border-box; } .auth-field select:focus, .auth-field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,183,5,0.12); } .almox-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .almox-toolbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .almox-filter-select, .almox-filter-input{ border:1px solid var(--line); border-radius:8px; background:var(--panel-2); color:var(--text); padding:7px 10px; font-size:12.5px; font-family:'Inter', sans-serif; outline:none; min-width:150px; } .almox-filter-select:focus, .almox-filter-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,183,5,0.12); } .almox-filter-input::placeholder{ color:var(--text-faint); } /* Cabeçalho + faixa de KPIs + barra de busca/filtros + cabeçalho de coluna travados ao rolar a tela pra baixo (pedido do usuário, 2026-09-18). Header e faixa de KPI (fora de .card) já travaram sem problema num navegador real. A barra de busca/filtros e o cabeçalho de coluna (DENTRO de .card) quebraram de duas formas diferentes em duas tentativas — suspeita forte: .card (styles.css) tem overflow:hidden, que é conhecido por atrapalhar position:sticky em descendentes mesmo sem o card ter altura fixa. 3ª tentativa: neutraliza isso só AQUI (`.panel .card{ overflow:visible }`, só dentro deste breakpoint, só nesta página) e tenta de novo. Se .card ainda cortar algo de propósito (não achei nenhum — o degradê de fundo já é recortado pela própria caixa mesmo sem overflow:hidden, e nenhum filho chega até a borda), isso teria que reaparecer visualmente pra eu saber. `--almox-header-h`/`--almox-kpi-h`/`--almox-toolbar-h` vêm de almoxAtualizarOffsetsSticky em js/almoxarifado.js (medidos de verdade, não chutados — cabeçalho quebra linha em tela estreita, cada aba tem uma barra de tamanho diferente). Só a partir de 901px, mesmo corte da sidebar fixa (ver styles.css). SEM margem negativa em lugar nenhum (a 1ª tentativa usava isso pra "sangrar" até a borda do card e foi o que deixou o vão vazio) — cada camada só com fundo sólido do tamanho normal dela mesma. */ @media (min-width: 901px){ /* 4ª abordagem (18/09/2026, "não está ficando fixo — a parte móvel só embaixo"): em vez de prender 4 camadas ao rolar a PÁGINA (header, KPI, barra de filtros, cabeçalho de coluna — cada uma com seu top calculado, e as linhas vazando pelas frestas entre elas e pela margem do card), a página não rola mais: a tabela mora numa caixa com rolagem própria (.almox-table-scroll, criada em almoxEmbrulharTabelas) que vai até o pé da janela, e só o cabeçalho de coluna gruda — no topo DESSA caixa, onde não tem fresta nenhuma. A altura (--almox-scroll-h) é medida em almoxAtualizarOffsetsSticky: janela − onde a caixa começa − margem. */ .almox-table-scroll{ max-height: var(--almox-scroll-h, none); overflow:auto; border-radius:10px; /* Folga dos lados pra linha "crescer" no hover sem criar barra de rolagem horizontal (ver tbody tr:hover abaixo). No TOPO a folga precisa ser zero (20/09/2026): esses 4px ficavam ACIMA do cabeçalho fixo e ainda faziam parte da área que rola, então a linha de cima aparecia por essa fresta. Sem recuo no topo, o cabeçalho encosta na borda da caixa e não sobra por onde vazar. */ padding:0 10px 10px; } /* Linha em destaque ao passar o mouse (18/09/2026: "ao passar o mouse em cima destacar ele expandindo"): cresce um pouco, ganha fundo mais claro, borda dourada à esquerda e sombra, como se saísse da tabela. Só transform/sombra — nada que mude a altura da linha e empurre as outras. */ .almox-table-scroll tbody tr{ position:relative; transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; } /* Tabelas com clique na linha pra editar/imprimir (ver handlers em js/almoxarifado.js) — cursor avisa disso. No Estoque a foto por cima já tem seu próprio cursor:zoom-in, que prevalece nela. Compra e Movimentações não têm ação nenhuma por linha, então ficam de fora. */ #almoxItensTable tbody tr, #almoxFornTable tbody tr, #almoxEmpresaTable tbody tr, #almoxColabTable tbody tr, #almoxEntregaTable tbody tr, #almoxEntregaMercTable tbody tr, #almoxEntradaTable tbody tr{ cursor:pointer; } .almox-table-scroll tbody tr:hover{ transform: scale(1.012); z-index:2; background: var(--panel-2); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.65), inset 3px 0 0 var(--accent); } .almox-table-scroll tbody tr:hover td{ background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); } @media (prefers-reduced-motion: reduce){ .almox-table-scroll tbody tr:hover{ transform:none; } } /* ÚNICA regra do cabeçalho de coluna fixo no desktop (unificada em 20/09/2026, a pedido do usuário: "sugiro unificar as duas pra resolver"). Antes eram três — esta, uma `.panel.active table thead th` que prendia o cabeçalho na PÁGINA (top = header+KPI+barra) e um bloco de correção no fim do arquivo cheio de !important pra desfazer a do meio. Com a tabela dentro da própria caixa de rolagem (.almox-table-scroll), o certo é só este: prende no topo DA CAIXA. Se precisar mexer no cabeçalho fixo, é aqui — não crie outra regra. - fundo SÓLIDO (var(--panel)): degradê deixava a linha aparecer por trás; - z-index acima da linha em hover (que usa 2) e da barra de filtros; - a faixa sólida de 24px PRA CIMA fecha a fresta acima do cabeçalho: a caixa tem padding-top e, com a página rolada, o que sobra acima do thead ainda faz parte da área rolável, e a linha de cima aparecia ali. Pintar demais não faz mal — a caixa tem overflow:auto e recorta. */ .almox-table-scroll table thead th{ position:sticky; top:0; z-index:60; background:var(--panel); box-shadow: 0 -24px 0 0 var(--panel), 0 6px 14px -6px rgba(0,0,0,0.5); } /* A sidebar já era sticky com top:24px fixo (ver styles.css) — soma só a altura do header (a faixa de KPI fica dentro de .almox-main, ao lado da sidebar, não empilhada com ela). */ .almox-sidebar{ top: calc(var(--almox-header-h, 0px) + 24px); } .almox-main .kpi-strip{ position:sticky; top: var(--almox-header-h, 0px); z-index:45; /* Os cards .kpi já são opacos (background:var(--panel) próprio) — só os traços de 1px entre eles (o "gap" do grid) usam o fundo do -strip em si, então aqui só precisa cobrir essas frestas. Mesmo degradê do header.top (var(--bg-2)->var(--bg)) em vez de cor lisa — fundo chapado destoava do resto do app, que usa degradê sutil até em componente opaco (.seller-panel/.access-banner, ver design-system-agent.md) — pedido do usuário, "mal feito". */ background: linear-gradient(180deg, var(--bg-2), var(--bg)); } /* .card normalmente tem borda 1px nos 4 lados + overflow:hidden (que a abre pra a sticky funcionar, ver acima). Sem altura fixa, o card desta tela agora chega a ter as 66 linhas do Estoque dentro — rolando no meio dele, só as bordas ESQUERDA/DIREITA continuam à vista o tempo todo (nunca chega no topo/base do card pra elas fecharem visualmente), e virou uma "caixa" reta acompanhando a rolagem inteira, com aparência de painel colado por cima da página em vez de fazer parte dela (pedido do usuário, "tudo separado por linhas, não se conecta com o fundo", 2026-09-18). Tira só os dois lados — topo/base do card continuam com borda normal, que é onde ela faz sentido (início/fim de verdade da lista). */ .panel .card{ overflow:visible; border-left:none; border-right:none; } .panel.active .almox-toolbar{ position:sticky; top: calc(var(--almox-header-h, 0px) + var(--almox-kpi-h, 0px)); z-index:40; /* Mesmo raciocínio do kpi-strip acima — degradê sutil em vez de var(--panel) chapado, pra não destoar do resto do app (.card, que fica por baixo rolando, tem gradiente+brilho; aqui não dá pra usar backdrop-filter — fundo é opaco de propósito — mas o degradê sozinho já tira o "chapado"). */ background: linear-gradient(180deg, var(--panel-2), var(--panel)); } /* (Aqui existia uma 2ª regra de thead sticky, `.panel.active table thead th`, que prendia o cabeçalho na PÁGINA somando header+KPI+barra de filtros. Removida na unificação de 20/09/2026: ela disputava com a regra da caixa de rolagem — mais específica, vinha depois e ganhava — e era a origem do cabeçalho parar no pé da caixa e da fresta com a linha aparecendo por cima. O cabeçalho agora é só o de lá de cima.) */ } /* Calendario customizado (.almox-date-input + .almox-datepicker) -- input[ type=date] nativo foi abandonado de proposito: o calendario que abre ao clicar nele e renderizado pelo SO/navegador, FORA do DOM da pagina, entao nao existe seletor CSS que alcance o dia selecionado la dentro (so da pra pedir uma paleta escura genérica via color-scheme, sem controle de verdade sobre o visual). Pedido explicito do usuario: o dia selecionado precisa ter o mesmo tratamento "vidro 3D" do resto do painel -- por isso viraram input[type=text] com um calendario proprio (JS, almoxDp* em almoxarifado.js) anexado por baixo. NAO sao readonly: o usuario tambem pode digitar a data direto (mascara DD/MM/AAAA via almoxFormatDateBr, ordem brasileira -- pedido explicito do usuario), sem precisar abrir o calendario. A TELA sempre mostra DD/MM/AAAA, mas o valor "de verdade" usado por filtros/salvamento continua em ISO (AAAA-MM-DD, o MESMO que o input[type=date] nativo ja produzia) guardado em input.dataset.iso -- ver almoxDateInputSetIso/GetIso em almoxarifado.js. O card do popup (.almox-datepicker abaixo) NAO foi alterado por essa mudanca -- continua "vidro 3D". IMPORTANTE (ver convencao no topo de styles.css e o historico de bugs documentado la): backdrop-filter NAO é usado aqui de proposito, nem no popup nem em nenhum elemento dele -- 3 recorrências reais desse bug já custaram caro nesse projeto (botão dourado com texto ilegível). O visual "vidro" do dia selecionado abaixo usa só gradiente opaco + sombra, igual ao .auth-submit (botão dourado de login), que é a receita comprovada segura pra esse efeito. */ .almox-date-input{ cursor:text; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C636E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 8px center; background-size:14px 14px; padding-right:28px; } /* Multi-select (mesmo popup "vidro 3D" do calendario logo abaixo, ver .almox-datepicker e almoxMs* em js/almoxarifado.js) -- troca o ficam juntos como se fossem um só campo composto, com "até" no meio; herda o wrap automatico do .almox-toolbar-actions (flex-wrap) em telas estreitas, entao nao precisa de regra propria pro mobile. */ .almox-filter-date-range{ display:flex; align-items:center; gap:6px; } .almox-filter-date-sep{ font-size:12px; color:var(--text-dim); } .almox-row-actions{ display:flex; gap:8px; flex-wrap:wrap; } .almox-row-btn{ border:1px solid var(--line); background:var(--panel-2); color:var(--text-dim); border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; white-space:nowrap; } .almox-row-btn:hover{ color:var(--accent); border-color:var(--accent); } .almox-row-btn.danger:hover{ color:var(--bad); border-color:var(--bad); } .almox-empty{ padding:24px 8px; text-align:center; color:var(--text-faint); font-size:13.5px; } .almox-pedido-linhas{ display:grid; gap:10px; } .almox-pedido-linha{ display:grid; grid-template-columns:1fr 110px auto; gap:8px; align-items:center; } .almox-pedido-add-btn{ justify-self:start; } @media (max-width: 640px){ .almox-pedido-linha{ grid-template-columns:1fr 80px auto; } } .almox-address-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } .almox-address-row > div{ display:flex; flex-direction:column; gap:6px; } .almox-cep-status{ font-size:12px; color:var(--text-faint); margin:-8px 0 2px; min-height:14px; } .almox-cep-status.bad{ color:var(--bad); } .almox-cep-status.good{ color:var(--good); } @media (max-width: 640px){ .almox-address-row{ grid-template-columns:1fr 1fr; } } /* .kpi-strip (de styles.css) reserva uma 1a coluna larga (1.3fr) pro gauge "Meta Mes" do painel principal/GPD — aqui no Almoxarifado nao existe esse gauge, entao com os 4 cards (Itens/Estoque baixo/Movimentacoes/Entregas) sobrava coluna vazia no fim da fileira. Forca 4 colunas iguais. */ #almoxKpiStrip{ grid-template-columns: repeat(4, minmax(0, 1fr)); /* overflow-y:hidden do .kpi-strip base cortava a sombra/elevacao do card verde abaixo — aqui ninguem depende do scroll horizontal do .kpi-strip original (essa pagina nao tem a 1a coluna larga que motivava isso), entao libera pra o card poder "flutuar". */ overflow: visible; } /* Card "Entregas no mes" vira atalho pra aba Entrega EPI — cartao "vidro" verde que se destaca DA fileira (cantos proprios + margem que o separa do hairline compartilhado dos outros .kpi, sombra mais forte pra dar sensacao de elevacao/3D de verdade), em vez de so herdar o mesmo tom flat dos vizinhos. Mesma familia de cor do #panel-telha-eps #epsBox .detail-item, so mais saturada pra ficar visivel dentro da fileira. SEM backdrop-filter: o fundo aqui e a cor solida do body, entao blur nao teria efeito real e reproduziria o bug de texto borrado no Android ja corrigido em .auth-submit — ver nota no topo deste arquivo e em styles.css. */ #almoxKpiStrip .kpi.almox-kpi-entregas{ cursor:pointer; position:relative; z-index:1; margin:-4px 4px -4px 8px; border-radius:14px; border:1px solid rgba(79,174,124,0.5); background:linear-gradient(160deg, rgba(79,174,124,0.32) 0%, rgba(79,174,124,0.14) 55%, rgba(79,174,124,0.06) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(79,174,124,0.22), 0 14px 26px -10px rgba(0,0,0,0.6), 0 0 26px rgba(79,174,124,0.28); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } #almoxKpiStrip .kpi.almox-kpi-entregas:hover, #almoxKpiStrip .kpi.almox-kpi-entregas:focus-visible{ border-color: rgba(79,174,124,0.75); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(79,174,124,0.3), 0 18px 32px -10px rgba(0,0,0,0.65), 0 0 34px rgba(79,174,124,0.4); outline: none; } #almoxKpiStrip .kpi.almox-kpi-entregas .val{ color: var(--good); } /* Linha de item da Entrada de Mercadoria — igual .almox-pedido-linha (select + qtd + remover), mas envolve tudo numa "caixinha" propria com borda porque, ao escolher "+ Novo item" no select, revela um 2o bloco de campos (nome/categoria/tamanho/unidade) pra cadastrar o item ali mesmo — o .almox-pedido-linha original (Entrega EPI/Pedidos) nunca precisou disso porque la os itens ja sempre existem. */ .almox-entrada-linha{ border:1px solid var(--line); border-radius:10px; padding:10px; display:grid; gap:8px; } /* Valor unitário na linha da Entrada (08/10/2026): select + qtd + valor + remover. */ .almox-entrada-linha .almox-pedido-linha{ grid-template-columns:1fr 100px 140px auto; } .almox-entrada-linha .almox-pedido-linha input{ padding-left:12px; padding-right:12px; } @media (max-width: 640px){ .almox-entrada-linha .almox-pedido-linha{ grid-template-columns:1fr 70px 100px; } .almox-entrada-linha .almox-pedido-linha-remove{ grid-column:1 / -1; justify-self:end; } } .almox-entrada-linha-xml-hint{ font-size:12px; color:var(--text-faint); } .almox-entrada-linha-vinc-badge{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; background:rgba(242,183,5,0.16); color:var(--accent); } .almox-entrada-linha-help{ font-size:11px; color:var(--text-faint); } .almox-entrada-novo-item{ display:flex; flex-wrap:wrap; gap:8px; } .almox-entrada-novo-item input{ flex:1 1 140px; min-width:100px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); color:var(--text); padding:8px 10px; font-size:13px; font-family:'Inter', sans-serif; outline:none; } .almox-entrada-novo-item input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,183,5,0.12); } .almox-entrada-novo-item input[data-field="nome"]{ flex:2 1 200px; } /* Lista de cards do Estoque no mobile — a tabela #almoxItensTable tem 10 colunas (Código/Item/Categoria/Tamanho/CA/Unidade/Quantidade/Mínimo/ Status/Ações) e não cabe numa tela de 360-430px sem estourar ou cortar texto. Abaixo de 640px a tabela desktop some e esta lista aparece no lugar, populada a partir dos MESMOS itens já carregados por almoxRenderEstoque (js/almoxarifado.js) — nada de nova chamada ao servidor. Mesmo espírito do GPD (.gpd-clientes-mobile-list em css/gpd.css), adaptado à paleta do Almoxarifado. Tocar em qualquer parte do card (fora dos botões de ação) abre almoxOpenItemModal já preenchido com todos os campos, inclusive Descrição, pra ver/editar. */ .almox-mobile-list{ display:none; flex-direction:column; gap:10px; padding-top:2px; } @media (max-width: 640px){ #almoxItensTable{ display:none; } /* Mesma troca pra Entrega de Mercadoria: 6 colunas (Data/Tipo/Colaborador/ Empresa/Itens/Ações) numa tela de 360-430px sobra ~40px pra coluna "Itens", que quebrava o nome do produto letra a letra. */ #almoxEntregaMercTable{ display:none; } .almox-mobile-list{ display:flex; } } /* Itens da entrega dentro do card mobile: um por linha, com a quantidade discreta ao lado do nome — no lugar do resumo "nome ×2, nome ×1" separado por vírgula, que numa tela estreita vira um parágrafo corrido. */ .almox-entrega-mobile-itens{ list-style:none; margin:0; padding:8px 0 0; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--text-dim); } .almox-entrega-mobile-itens li{ line-height:1.35; /* Nome de produto do almoxarifado às vezes traz código/medida coladinho ("TAM.CZ-10/2R"), que sem isto empurra a largura do card e cria rolagem horizontal na página inteira. */ overflow-wrap:anywhere; } .almox-mobile-row{ display:flex; flex-direction:column; gap:8px; padding:13px 14px; min-height:44px; border-radius:14px; border:1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 60%), var(--panel-2); cursor:pointer; transition: border-color 0.15s ease; } .almox-mobile-row:active{ border-color:var(--accent); } /* Mesma cor da borda dos cards "pendente" do GPD (.gpd-clientes-mobile-row--pending) pra sinalizar estoque baixo sem depender só da pill pra ler o status. */ .almox-mobile-row--baixo{ border-color: rgba(225,89,90,0.35); } /* Nome + pill numa faixa própria (em vez de nome à esquerda/pill+ações à direita, lado a lado) — com nome real de item podendo ter 50+ caracteres (ex.: "Capacete de Segurança com Jugular Classe B..."), a pill e os botões ficavam "flutuando" isolados no topo do card enquanto o nome descia várias linhas do lado oposto. Empilhado, o card cresce de forma previsível independente do tamanho do nome. */ .almox-mobile-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .almox-mobile-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .almox-mobile-name{ font-weight:600; color:var(--text); font-size:14.5px; overflow-wrap:anywhere; } .almox-mobile-head .pill{ flex:none; margin-top:1px; } .almox-mobile-sub{ font-size:12px; color:var(--text-dim); font-family:'JetBrains Mono'; overflow-wrap:anywhere; } .almox-mobile-qty{ font-size:13.5px; color:var(--text); font-family:'JetBrains Mono'; margin-top:2px; } .almox-mobile-qty-min{ color:var(--text-faint); } /* Faixa de ações abaixo do conteúdo, ocupando a largura do card — separada do nome/pill de propósito (ver nota em .almox-mobile-head) pra não competir por espaço horizontal com um nome comprido. */ .almox-mobile-actions{ display:flex; gap:8px; padding-top:2px; border-top:1px solid rgba(255,255,255,0.06); } /* Botões secundários (Movimentar/Excluir) dentro do card — alvo de toque maior que o .almox-row-btn da tabela desktop (que fica pequeno demais pro dedo), cada um ocupando metade da faixa, com gap entre os dois pra não errar o botão errado. */ .almox-mobile-actions .almox-row-btn{ flex:1; justify-content:center; padding:9px 12px; font-size:12px; min-height:38px; display:inline-flex; align-items:center; } /* Tabela de Colaboradores — Empresa e Cidade/UF costumavam quebrar em 2 linhas (nomes de empresa longos tipo "MAJUFER FABRICACAO DE TELHAS LTDA"), dobrando a altura de cada linha à toa. Fonte um pouco menor + nowrap nas colunas problemáticas pra cada colaborador caber numa linha só. */ #almoxColabTable{ font-size:12.5px; } #almoxColabTable thead th, #almoxColabTable tbody td{ padding:8px; white-space:nowrap; } #almoxColabTable tbody td:last-child{ white-space:normal; } /* Restrição por papel (ver almoxApplyRoleRestrictions em js/almoxarifado.js e ALMOX_ROLE_ALLOWED_WRITE_PATHS em server.js): o login "almoxarifado" só grava em Entrega EPI/Entrega de Mercadoria — nas demais abas somem as ações de alterar dado (Editar, Excluir, Movimentar); os dados continuam visíveis nas tabelas normalmente, só sem nenhum botão de mexer neles. No mobile, o card do Estoque ainda abre ao toque (não tem como impedir sem também tirar a visualização da Descrição do item), mas o formulário que abre já vem travado (ver almoxApplyRoleRestrictions), então não dá pra salvar mesmo por ali. */ body.almox-role-locked [data-action="mov"], body.almox-role-locked [data-action="edit-item"], body.almox-role-locked [data-action="del-item"], body.almox-role-locked [data-action="edit-forn"], body.almox-role-locked [data-action="del-forn"], body.almox-role-locked [data-action="edit-empresa"], body.almox-role-locked [data-action="del-empresa"], body.almox-role-locked [data-action="edit-colab"], body.almox-role-locked [data-action="del-colab"], body.almox-role-locked [data-action="del-entrada"]{ display:none; } /* ---------- Botao "Voltar ao painel" do header em vidro 3D vermelho ------ */ /* Mesma receita liquid-glass dos botoes de utilidade do header do GPD (.gpd-header-btn-red em css/gpd.css) e da Producao (.producao-header-btn em css/producao.css): gradiente vertical translucido + backdrop-filter + brilho fino no topo por dentro + sombra externa, no tamanho do .excel-btn. Classe propria, NAO mexe no .excel-btn global. O ".logout-powered-row" no seletor e so pra ganhar da regra de margin-top do styles.css sem !important. So aparece pro login "fernando" (ver almoxApplyAuthMode em js/almoxarifado.js). */ .logout-powered-row .excel-btn.almox-header-btn{ color:var(--text); border-color:rgba(225,89,90,0.35); background:linear-gradient(180deg, rgba(225,89,90,0.20), rgba(225,89,90,0.05)); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 10px rgba(0,0,0,0.2); transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; text-decoration:none; } .logout-powered-row .excel-btn.almox-header-btn:hover{ border-color:rgba(225,89,90,0.5); background:linear-gradient(180deg, rgba(225,89,90,0.28), rgba(225,89,90,0.08)); color:var(--text); transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.26); } /* Obrigatorio com backdrop-filter no proprio elemento: promove o texto pra camada de composicao propria. Sem isto ele fica apagado/ilegivel — bug ja corrigido varias vezes neste projeto (ver css/gpd.css e css/producao.css). */ .almox-header-btn span{ position:relative; z-index:1; } /* KPI "Estoque baixo" clicavel (2026-09-12): clicar no numero abre a aba Estoque ja filtrada nesses itens. Tratamento DE PROPOSITO mais discreto que o .almox-kpi-entregas acima -- este card ja grita em vermelho pelo .val.bad, e envolve-lo numa caixa vermelha cheia faria o strip inteiro competir por atencao. O que muda e so o cursor, a borda e o sublinhado tracejado do numero, que e o que o usuario clica. Sem backdrop-filter, pelo mesmo motivo da nota logo acima. */ #almoxKpiStrip .kpi[data-status="baixo"]{ cursor:pointer; position:relative; z-index:1; border-radius:14px; border:1px solid rgba(225,89,90,0.35); transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } #almoxKpiStrip .kpi[data-status="baixo"] .val{ text-decoration: underline dotted rgba(225,89,90,0.55); text-underline-offset:5px; } #almoxKpiStrip .kpi[data-status="baixo"]:hover, #almoxKpiStrip .kpi[data-status="baixo"]:focus-visible{ border-color: rgba(225,89,90,0.7); background: rgba(225,89,90,0.10); transform: translateY(-2px); outline: none; } /* Foto do item (pedido do usuário, 2026-09-18) — miniatura na tabela/lista de Estoque e no modal de cadastro/edição; clicar na miniatura amplia num overlay (.almox-foto-lightbox, pedido do usuário, 2026-09-18) e ela também sai no PDF (ver almoxExportEstoquePdf em js/almoxarifado.js). */ #almoxItensTable td.name{ display:flex; align-items:center; gap:10px; } .almox-item-thumb{ width:34px; height:34px; flex:none; border-radius:8px; object-fit:cover; border:1px solid var(--line); background:var(--panel-2); cursor:zoom-in; transition: transform 0.12s ease, border-color 0.12s ease; } .almox-item-thumb:hover{ transform:scale(1.08); border-color: var(--accent); } .almox-mobile-head .almox-item-thumb{ width:42px; height:42px; border-radius:10px; } /* Overlay de foto ampliada (elemento criado em JS, ver almoxAbrirFotoLightbox) — mesmo padrão visual dos outros modais do app (backdrop escuro + conteúdo centralizado), mas sem card/borda: só a foto em si, grande, pra não competir visualmente com ela. */ .almox-foto-lightbox{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:32px; background:rgba(6,8,12,0.86); backdrop-filter:blur(2px); cursor:zoom-out; } .almox-foto-lightbox img{ max-width:min(90vw, 900px); max-height:78vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 60px -12px rgba(0,0,0,0.7); cursor:default; } .almox-foto-lightbox-caption{ color:var(--text-2, #cbd2dc); font-size:14px; text-align:center; } .almox-foto-lightbox-close{ position:absolute; top:18px; right:22px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.08); color:#fff; font-size:22px; line-height:1; cursor:pointer; } .almox-foto-lightbox-close:hover{ background:rgba(255,255,255,0.18); } .almox-item-foto-field{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .almox-item-foto-preview{ width:64px; height:64px; border-radius:10px; object-fit:cover; border:1px solid var(--line); background:var(--panel-2); } .almox-item-foto-actions{ display:flex; gap:8px; flex-wrap:wrap; } /* Cabeçalho de coluna DENTRO da caixa de rolagem: prende no topo dela. (20/09/2026: "corrija a tela" — a tabela aparecia cortada com a faixa DATA/FORNECEDOR/NF/ITENS/AÇÕES lá embaixo, por cima das linhas.) Sobrou a regra da 3ª tentativa (`.panel.active table thead th`, que prendia o cabeçalho na PÁGINA, com top = header+KPI+barra); como ela vem depois e tem a mesma especificidade, empurrava o thead esse tanto pra baixo dentro da caixa — que tem só ~260px de altura em janela baixa — e ele ia parar no pé dela. Aqui o thead volta pro topo da caixa, que é o modelo da 4ª tentativa (ver bloco acima). */ /* (Este bloco existia só pra desfazer, com !important, a regra que prendia o cabeçalho na página. Some na unificação de 20/09/2026 — tudo que ele fazia está na regra única lá de cima: top:0, fundo sólido e z-index acima das linhas.) */ /* Ações da linha (Movimentar/Editar/Excluir) numa linha só — no Estoque os três não cabiam e "Movimentar" pulava pra cima, deixando a linha alta e desalinhada (20/09/2026: "deixe em uma linha"). Botões um pouco mais justos pra caberem lado a lado. No celular a tabela vira card e não usa esta regra. */ .almox-row-actions{ flex-wrap:nowrap; white-space:nowrap; } .almox-row-actions .almox-row-btn{ padding:6px 9px; } /* ---- Cards no padrão novo do painel (20/09/2026) ----------------------- Pedido do usuário ("deixe os cards no padrão novo" / "aqui também", com print da faixa de KPI e da aba Empresas): os quatro KPIs deixam de ser uma régua única dividida por fios de 1px e viram cartões separados, com canto grande, borda especular (luz em cima/à esquerda) e sombra funda — o mesmo desenho que o painel comercial ganhou com o tema de vidro. SEM backdrop-filter aqui, de propósito: a faixa e a barra de filtros desta tela são STICKY (a lista rola por baixo), e cartão translúcido deixaria as linhas aparecerem através dele; o brilho vem do degradê sobre um fundo opaco. Mesma razão da nota do .almox-kpi-entregas. */ #almoxKpiStrip{ gap:10px; border:0; border-radius:0; /* Opaco: é o fundo que cobre as frestas entre os cartões enquanto a lista rola por baixo da faixa sticky. */ background:linear-gradient(180deg, var(--bg-2), var(--bg)); } #almoxKpiStrip .kpi{ border-radius:22px; border:1px solid rgba(255,255,255,0.16); background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.05) 100%), var(--panel); box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,0.20), inset -1px -1px 0 rgba(255,255,255,0.05), 0 18px 34px -22px rgba(0,0,0,0.80); } /* Os dois cartões com cor própria (verde "Entrega EPI", vermelho "Estoque baixo") mantêm a cor; só acompanham o canto novo. */ #almoxKpiStrip .kpi.almox-kpi-entregas, #almoxKpiStrip .kpi[data-status="baixo"]{ border-radius:22px; } #almoxKpiStrip .kpi.almox-kpi-entregas{ margin:0; } /* Blocos das abas (Estoque, Empresas, Entrega de Mercadoria…): mesmo canto e mesmo brilho dos KPIs. Borda só na cor — a regra de >900px que tira as laterais (pra lista longa não virar "caixa" rolando) continua valendo. */ .almox-main .card{ border-radius:28px; border-color:rgba(255,255,255,0.16); background: radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.10), rgba(255,255,255,0) 52%), linear-gradient(165deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.013) 45%, rgba(255,255,255,0.018) 100%), var(--panel); box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,0.14), 0 22px 44px -28px rgba(0,0,0,0.80); } /* ---------------- Pedido de Compra (2026-09-25) ---------------- Tabela de itens dentro do modal (fora de .panel, entao nao ganha a caixa .almox-table-scroll das abas) — rolagem propria na horizontal pro celular, inputs pequenos alinhados a direita como os numeros da coluna. */ .almox-pedido-compra-itens{ display:grid; gap:10px; margin:4px 0 14px; } .almox-pedido-compra-legenda{ font-size:12px; line-height:1.5; color:var(--text-faint); } .almox-pedido-compra-legenda b{ color:var(--text-dim); font-weight:600; } .almox-pedido-compra-scroll{ overflow-x:auto; max-height:46vh; overflow-y:auto; border:1px solid var(--line); border-radius:12px; } .almox-pedido-compra-tabela{ width:100%; border-collapse:collapse; font-size:13px; } .almox-pedido-compra-tabela th{ position:sticky; top:0; z-index:1; background:var(--panel-2); color:var(--text-dim); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:9px 10px; white-space:nowrap; border-bottom:1px solid var(--line); } .almox-pedido-compra-tabela td{ padding:7px 10px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:middle; } .almox-pedido-compra-tabela tr:last-child td{ border-bottom:none; } .almox-pedido-compra-tabela .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; } .almox-pedido-compra-tabela td.produto{ min-width:220px; } .almox-pedido-compra-tabela td.produto small{ color:var(--text-faint); } .almox-pedido-compra-tabela input{ width:92px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); padding:6px 8px; font-size:13px; text-align:right; font-family:'Inter', sans-serif; outline:none; } .almox-pedido-compra-tabela input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,183,5,0.12); } .almox-pedido-compra-tabela tr.sem-qtd td{ color:var(--text-faint); } .almox-pedido-compra-tabela tr.sem-qtd td.produto{ opacity:.75; } .almox-pedido-compra-sugestao{ border:none; background:none; padding:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; } .almox-pedido-compra-sugestao:hover{ text-decoration:underline; } .almox-pedido-compra-add{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .almox-pedido-compra-add select{ flex:1 1 240px; min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--text); padding:8px 10px; font-size:13px; font-family:'Inter', sans-serif; } .almox-pedido-compra-total{ margin-left:auto; font-size:14px; color:var(--text-dim); } .almox-pedido-compra-total b{ color:var(--text); font-size:16px; } .almox-pedido-compra-botoes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width: 640px){ .almox-pedido-compra-botoes{ grid-template-columns:1fr; } .almox-pedido-compra-total{ margin-left:0; width:100%; } } /* Botao "Gerar demanda do periodo" no modal do Pedido de Compra — cartao com borda dourada (acao principal da tela antes de salvar), sem o dourado cheio do .auth-submit pra nao competir com os botoes de salvar. */ .almox-pedido-compra-gerar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:-4px 0 6px; } .almox-pedido-gerar-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; border:1px solid rgba(242,183,5,0.55); background:linear-gradient(160deg, rgba(242,183,5,0.18) 0%, rgba(242,183,5,0.06) 100%); color:var(--text); font-family:'Inter', sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease; } .almox-pedido-gerar-btn svg{ width:16px; height:16px; color:var(--accent); flex:none; } .almox-pedido-gerar-btn:hover{ border-color:var(--accent); background:linear-gradient(160deg, rgba(242,183,5,0.28) 0%, rgba(242,183,5,0.1) 100%); } .almox-pedido-gerar-status{ flex:1 1 260px; font-size:12px; color:var(--text-faint); } .almox-pedido-gerar-status.good{ color:var(--good); } .almox-pedido-gerar-status.bad{ color:var(--bad); } #almoxPedidoFornecedorInfo:empty{ display:none; } /* Campos de giro ao lado do "Gerar demanda do periodo". */ .almox-pedido-giro-campo{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-dim); white-space:nowrap; } .almox-pedido-giro-campo input{ width:52px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); padding:7px 8px; font-size:13px; text-align:right; font-family:'Inter', sans-serif; outline:none; } .almox-pedido-giro-campo input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,183,5,0.12); } .almox-pedido-gerar-status{ flex-basis:100%; } /* "+ Novo pedido" em vidro 3D (pedido do usuario, 2026-09-25: "normal vidro 3d"). Tira o visual de .excel-btn (mono 11px, margin-top:10px que o deixava 3px abaixo do "Limpar filtros"): fonte normal, gradiente dourado translucido + brilho no topo por dentro + sombra. SEM backdrop-filter de proposito (borra o texto, ver .almox-header-btn acima). Hover mantem o texto claro — o .excel-btn:hover pintaria de dourado sobre dourado. Vale pros "+ Novo/Nova ..." de TODAS as abas (usuario pediu, mesmo dia); "Exportar PDF" e o resto seguem no .excel-btn. O .hidden global e !important, entao o sumico por papel/somente-leitura continua valendo. justify-content:center: no celular o .excel-btn vira width:100%. */ #almoxItemNewBtn, #almoxMovNewBtn, #almoxFornNewBtn, #almoxEmpresaNewBtn, #almoxColabNewBtn, #almoxEntradaNewBtn, #almoxEntregaNewBtn, #almoxEntregaMercadoriaNewBtn, #almoxPedidoNewBtn{ margin-top:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:12px; border:1px solid rgba(242,183,5,0.45); background:linear-gradient(180deg, rgba(242,183,5,0.24) 0%, rgba(242,183,5,0.07) 100%); color:var(--text); font-family:'Inter', sans-serif; font-size:13px; font-weight:600; letter-spacing:0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.28); transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } #almoxItemNewBtn:hover, #almoxMovNewBtn:hover, #almoxFornNewBtn:hover, #almoxEmpresaNewBtn:hover, #almoxColabNewBtn:hover, #almoxEntradaNewBtn:hover, #almoxEntregaNewBtn:hover, #almoxEntregaMercadoriaNewBtn:hover, #almoxPedidoNewBtn:hover{ color:var(--text); border-color:rgba(242,183,5,0.7); background:linear-gradient(180deg, rgba(242,183,5,0.32) 0%, rgba(242,183,5,0.1) 100%); transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 16px rgba(0,0,0,0.32); } #almoxItemNewBtn:active, #almoxMovNewBtn:active, #almoxFornNewBtn:active, #almoxEmpresaNewBtn:active, #almoxColabNewBtn:active, #almoxEntradaNewBtn:active, #almoxEntregaNewBtn:active, #almoxEntregaMercadoriaNewBtn:active, #almoxPedidoNewBtn:active{ transform:translateY(0); } /* "Incluir item na pesquisa" no modal do Pedido de Compra (pedido do usuario, 2026-09-25), logo abaixo do "Gerar demanda do periodo". Mesmo campo escuro do .almox-pedido-compra-add select. */ .almox-pedido-incluir{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 6px; } .almox-pedido-incluir label{ font-size:12.5px; color:var(--text-dim); white-space:nowrap; } .almox-pedido-incluir input{ flex:1 1 280px; min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--text); padding:8px 10px; font-size:13px; font-family:'Inter', sans-serif; outline:none; } .almox-pedido-incluir input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,183,5,0.12); } .almox-pedido-incluir .almox-pedido-gerar-status{ flex-basis:100%; } .almox-pedido-incluir .almox-pedido-gerar-status:empty{ display:none; } .almox-pedido-manual-tag{ display:inline-block; margin-left:4px; padding:1px 6px; border-radius:999px; border:1px solid rgba(242,183,5,0.4); color:var(--accent); font-size:10.5px; white-space:nowrap; } .almox-pedido-compra-tabela tr.almox-pedido-linha-destaque td{ background:rgba(242,183,5,0.12); transition:background .6s ease; } /* Tabela do Pedido de Compra mais legivel (pedido do usuario, 2026-09-25: "melhore as letras esta dificil de visualizar"). Tres causas: (1) linha com quantidade 0 (.sem-qtd) ia pra --text-faint e o produto ainda levava opacity .75 — quase todas as linhas do "Gerar demanda" ficam assim; agora o --text a 78% (#EDEBE3), sem opacity, e a linha com quantidade fica em --text e negrito no produto pra ainda se destacar. (2) numeros no JetBrains Mono do td.num global (styles.css) — aqui Inter com tabular-nums, mesmo alinhamento. (3) 13px e cabecalho apagado -> 14px, cabecalho em --text. So nesta tabela; o td.num global continua igual nas outras telas. */ .almox-pedido-compra-tabela{ font-size:14px; } .almox-pedido-compra-tabela th{ color:var(--text); font-size:11.5px; } .almox-pedido-compra-tabela td{ padding:8px 10px; line-height:1.35; } .almox-pedido-compra-tabela td.num{ font-family:'Inter', sans-serif; font-variant-numeric:tabular-nums; font-weight:500; } .almox-pedido-compra-tabela td.produto{ font-weight:500; } .almox-pedido-compra-tabela td.produto small{ color:var(--text-dim); font-size:12px; } .almox-pedido-compra-tabela tr.sem-qtd td{ color:rgba(237,235,227,0.78); } .almox-pedido-compra-tabela tr.sem-qtd td.produto{ opacity:1; } .almox-pedido-compra-tabela tr:not(.sem-qtd) td.produto{ font-weight:700; } .almox-pedido-compra-tabela input{ font-size:14px; } .almox-pedido-compra-sugestao{ font-size:14px; } .almox-pedido-compra-legenda{ color:var(--text-dim); font-size:12.5px; } .almox-pedido-compra-legenda b{ color:var(--text); }