/* ===================================================================== * KRELATORIO — SO O QUE O PRODUTO ACRESCENTA * * Ordem de carga (declarada no index.html): * 1. krigs-tokens.css tokens oficiais da plataforma (nao alterar) * 2. krigs-componentes.css componentes oficiais (nao alterar) * 3. krelatorio-tokens.css tokens de navegacao do produto * 4. krelatorio.css ESTE arquivo: a moldura * * Aqui vive somente o que o Design System nao entrega pronto: a moldura * (menu lateral, barra superior, area de conteudo), a tela de entrada e * a lampada do Assistente. Botao, campo, tabela, cartao, indicador, * selo, alerta, estado vazio, aviso temporario, modal, responsividade e * impressao ja vem dos componentes oficiais — reescrever qualquer um * deles aqui seria a segunda implementacao do mesmo problema. * * NENHUMA COR LITERAL. Toda cor vem de token (Documento 04 secao 2.1). * ===================================================================== */ /* ===================================================================== * TELA DE ENTRADA — componente oficial, referencia KEPI (secao 21). * Os valores sao os do Documento 05 secao 3.1: cartao de 380px, raio de * 14px, respiro de 34/30 e a sombra propria da entrada. Nao ha * alternador de tema aqui: a entrada e sempre o gradiente. * ===================================================================== */ #tela-entrada{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--grad-entrada); padding:20px; overflow-y:auto; } /* Sessao guardada: a entrada nao chega a ser pintada (ver o script do * ). Sem isto, quem ja esta dentro ve a tela de entrada piscar a * cada F5 — um round-trip inteiro depois. */ html.com-sessao #tela-entrada{ display:none } .entrada-cartao{ background:var(--branco); color:var(--texto); border-radius:14px; box-shadow:var(--entrada-sombra); padding:34px 30px; width:100%; max-width:380px; } .entrada-marca{ text-align:center; margin-bottom:22px } .entrada-marca .placa{ display:inline-flex; align-items:center; justify-content:center; min-width:84px; max-width:290px; min-height:66px; padding:16px 24px; border-radius:18px; background:var(--grad-placa); } /* A marca sobre fundo escuro e SEMPRE a versao branca * (`logo-krigs-login.png`). Nunca `logo-krigs-white.png`: esse arquivo e * byte a byte igual ao navy, e a placa azul-marinho sobre azul-marinho * faz a marca desaparecer. Documento 04 secao 6.1. */ .entrada-marca .placa img{ max-width:100%; max-height:56px; width:auto; display:block } .entrada-marca h1{ font-size:20px; margin:14px 0 2px } .entrada-marca p{ color:var(--cinza); margin:0; font-size:14px } /* Erro da entrada vai NO CARTAO, nao em aviso temporario: a tela de * entrada nao tem a area de avisos montada (Documento 05 secao 3.1). */ .entrada-erro{ color:var(--vermelho); font-size:13px; margin-top:10px; min-height:18px } .entrada-links{ text-align:center; margin-top:14px; font-size:13px } .entrada-links a[aria-disabled="true"]{ color:var(--cinza); pointer-events:none; text-decoration:none } .entrada-rodape{ text-align:center; color:var(--entrada-rodape); font-size:12px; margin:0 } /* A mensagem boa (codigo reenviado, senha redefinida) nao sai em vermelho: * vermelho diz "deu errado" a quem acabou de acertar. */ .entrada-erro.ok{ color:var(--verde, #15803d) } .entrada-ajuda{ text-align:center; color:var(--cinza); font-size:12px; line-height:1.45; margin:12px 0 0 } /* O codigo se le em blocos: letra grande, espacada e centralizada, como * aparece no e-mail. No celular o teclado numerico abre sozinho * (inputmode=numeric). */ .entrada-codigo{ text-align:center; font-size:22px !important; letter-spacing:8px; font-variant-numeric:tabular-nums } /* ===================================================================== * MOLDURA — menu lateral, barra superior e conteudo. * * Componente OFICIAL da plataforma: a referencia de layout e o KFROTA * (Constituicao secao 20). Muda o que a secao 20 autoriza — quais * modulos existem, quem ve cada um e em que categoria ficam. Estrutura, * largura, espacamento, tipografia, cor, selecao, hover, rolagem, * responsividade e comportamento de gaveta sao COPIA, nao aproximacao. * ===================================================================== */ #app{ display:grid; /* minmax(0, ...) e nao 1fr solto: `1fr` quer dizer `minmax(auto, 1fr)`, e esse `auto` de minimo faz a faixa se recusar a ficar menor que o conteudo mais largo que tem dentro. Uma tabela de oito colunas empurrava a faixa para 685px dentro de um telefone de 374px, e a pagina inteira passava a rolar de lado, com menu e cabecalho junto. Vai em par com o min-width:0 do #conteudo: um sem o outro nao resolve. */ grid-template-columns:var(--nav-w) minmax(0, 1fr); grid-template-rows:60px 1fr; height:100vh; } #app[hidden]{ display:none } .sidebar{ grid-row:1/3; background:linear-gradient(180deg,var(--nav-fundo-1),var(--nav-fundo-2)); color:var(--nav-texto); display:flex; flex-direction:column; padding:16px 12px; overflow-y:auto; } .sidebar .marca{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:6px 8px 18px; border-bottom:1px solid var(--nav-linha); margin-bottom:12px; } .sidebar .marca img{ width:100%; max-width:176px; height:auto; display:block } .sidebar .marca .empresa{ display:block; font-size:11px; font-weight:700; letter-spacing:2px; color:var(--nav-suave); text-transform:uppercase; padding-left:2px; } .sidebar .marca .empresa:empty{ display:none } .nav-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--nav-texto); font-weight:500; font-size:14px; margin-bottom:3px; cursor:pointer; transition:.12s; background:none; border:0; width:100%; text-align:left; font-family:inherit; } .nav-item .ic{ width:18px; height:18px; display:grid; place-items:center; opacity:.9; flex:none } .nav-item:hover{ background:var(--nav-hover); color:var(--branco); text-decoration:none } .nav-item.ativo{ background:var(--azul); color:var(--branco); box-shadow:0 4px 12px var(--nav-sombra-ativo); } /* Categoria e SO um titulo: nao abre, nao fecha e nao esconde nada. */ .nav-sep{ font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--nav-rotulo); padding:14px 12px 6px; } .sidebar .rodape{ margin-top:auto; font-size:10.5px; color:var(--nav-rotulo); padding:12px 8px 4px; border-top:1px solid var(--nav-linha); } .sidebar .rodape b{ color:var(--nav-suave); letter-spacing:.4px } .topbar{ grid-column:2; display:flex; align-items:center; justify-content:space-between; background:var(--branco); border-bottom:1px solid var(--linha); padding:0 22px; box-shadow:var(--sombra); } .topbar h2{ font-size:17px; font-weight:700 } .topbar .direita{ display:flex; align-items:center; gap:14px } .empresa-switch{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--cinza) } .empresa-switch select{ padding:6px 9px; border:1px solid var(--linha); border-radius:var(--raio-sm); font-family:inherit; font-size:13px; background:var(--branco); color:var(--texto); } /* Cabecalho do usuario (`user-chip`): avatar, nome e — obrigatorio — o * E-MAIL da conta em uso. Responde a pergunta "com qual conta eu estou?", * comum em quem administra varias empresas (Documento 05 secao 3.4). */ .user-chip{ display:flex; align-items:center; gap:10px } .user-chip .avatar{ width:34px; height:34px; border-radius:50%; background:var(--azul-900); color:var(--branco); display:grid; place-items:center; font-weight:700; font-size:13px; } .user-chip .quem{ line-height:1.2; min-width:0 } .user-chip .nome{ font-weight:600; font-size:13px } .user-chip .email{ font-size:11px; color:var(--cinza); max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .btn-icone{ background:var(--branco); color:var(--texto); border:1px solid var(--linha); border-radius:var(--raio-sm); padding:7px 9px; cursor:pointer; display:inline-flex; align-items:center; /* Alvo de toque minimo de 40x40 no celular (Documento 04 secao 12). */ min-width:40px; min-height:36px; justify-content:center; } .btn-icone:hover{ background:var(--azul-claro) } /* A area de conteudo. * * O `width:100%` NAO e redundante, e a falta dele foi um defeito real * visto no navegador: `.conteudo` dos componentes oficiais traz * `max-width:1100px; margin:0 auto`, e margem automatica num ITEM DE * GRADE nao centraliza, ela encolhe o item para a largura do conteudo. * O painel abria com os indicadores empilhados numa coluna de 240px, no * meio da tela. Com a largura explicita, a margem automatica volta a * fazer o que se espera dela: centralizar dentro do limite de 1100px. * * E o motivo de nao consertar isso no arquivo oficial: ele e copia da * plataforma e nao se altera. O ajuste pertence a quem monta a moldura. */ #conteudo{ grid-column:2; overflow-y:auto; width:100%; /* min-width:0 E O QUE FAZ O SISTEMA CABER NO CELULAR, e a falta dele era defeito de tela INTEIRA, e nao de uma tabela. #app e uma grade, e item de grade nasce com min-width:auto: ele se recusa a encolher abaixo do conteudo mais largo que tem dentro. Uma tabela de oito colunas media 616px de conteudo minimo, entao a coluna da grade inchava para 685px dentro de um telefone de 374px, e a PAGINA INTEIRA passava a rolar de lado: o menu, a barra do topo e o cabecalho junto. Medido no navegador, num quadro de 390px: #app com 359px e #conteudo com 685px dentro dele. Com min-width:0 a coluna encolhe, e quem rola passa a ser a tabela dentro do proprio .tabela-wrap, que ja tem overflow-x:auto para isso. A pagina para de andar de lado e o cabecalho volta a caber. */ min-width:0; } /* COLISAO DE CLASSE nos componentes oficiais, corrigida aqui. * * O arquivo oficial usa `.num` para duas coisas diferentes: a coluna * NUMERICA de tabela, que e alinhada a direita, e o NUMERO do indicador * do painel, que nao tem alinhamento declarado no Documento 04. As duas * regras casam no mesmo elemento, e o numero do indicador saia colado na * direita do cartao, longe do rotulo dele. Foi visto no navegador, nao * deduzido. * * O arquivo oficial nao se altera, entao o desempate mora aqui. Esta * divergencia vale para TODO produto que usar os dois componentes na * mesma tela: registrada no TODO para subir ao dono da plataforma. */ .stat .num{ text-align:left } /* Cabecalho de pagina: titulo e subtitulo a esquerda, UM botao primario * a direita (Documento 05 secao 3.6). */ .pagina-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; } .pagina-cab .acoes{ display:flex; gap:10px; flex-wrap:wrap } .filtros{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px } .filtros input,.filtros select{ padding:9px 11px; border:1px solid var(--linha); border-radius:var(--raio-sm); font-family:inherit; font-size:14px; background:var(--branco); color:var(--texto); } .filtros input{ min-width:240px } .aviso-limite{ font-size:12px; color:var(--cinza-2); margin-top:8px } /* Bloco de duas colunas que vira uma no notebook (escada oficial). */ .cards-2{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px } /* ===================================================================== * TELA DE CAM — o esqueleto que o NUCLEO preenche. * * A navegacao, a permissao e a chamada de API destas telas funcionam de * verdade; o desenho (editor de geometria, previa do nesting, simulacao * do percurso) e escrito por quem faz o nucleo CAM. O palco existe aqui * para que a moldura nao precise mudar quando o conteudo chegar. * ===================================================================== */ .palco-cam{ border:1px dashed var(--linha); border-radius:var(--raio); background:var(--branco); min-height:320px; display:grid; place-items:center; text-align:center; padding:32px 20px; color:var(--cinza-2); } .palco-cam h3{ color:var(--texto); margin-bottom:6px } .palco-cam p{ max-width:52ch; margin:0 auto } /* ===================================================================== * ASSISTENTE KRIGS — lampada flutuante e painel lateral. * Constituicao secao 22: uma lampada no canto inferior direito, dentro * do sistema, NUNCA na tela de entrada, e nenhuma entrada de menu. * ===================================================================== */ .ak-botao{ position:fixed; right:20px; bottom:20px; z-index:90; width:52px; height:52px; border-radius:50%; background:var(--azul-2); color:var(--branco); border:0; cursor:pointer; display:grid; place-items:center; box-shadow:var(--sombra-lg); } .ak-botao:hover{ background:var(--azul) } .ak-botao[hidden]{ display:none } .ak-painel{ position:fixed; top:0; right:0; bottom:0; z-index:95; width:420px; max-width:100vw; background:var(--branco); color:var(--texto); border-left:1px solid var(--linha); box-shadow:var(--sombra-lg); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease; } .ak-painel.aberto{ transform:none } .ak-painel[hidden]{ display:none } .ak-painel .ak-cab{ background:var(--grad-institucional); color:var(--branco); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; } .ak-painel .ak-cab b{ font-size:15px } .ak-painel .ak-cab button{ background:none; border:0; color:var(--branco); cursor:pointer } .ak-painel .ak-busca{ padding:14px 18px; border-bottom:1px solid var(--linha) } .ak-painel .ak-busca input{ width:100%; padding:10px 12px; border:1px solid var(--linha); border-radius:var(--raio-sm); font-family:inherit; font-size:15px; background:var(--branco); color:var(--texto); } /* Rolagem CONTIDA: nao "vaza" para a pagina (Documento 05 secao 3.14). */ .ak-painel .ak-corpo{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 18px } .ak-artigo{ border-bottom:1px solid var(--linha); padding:12px 0 } .ak-artigo:last-child{ border-bottom:0 } .ak-artigo h4{ font-size:14px; margin-bottom:4px } .ak-artigo .disciplina{ font-size:11px; color:var(--cinza-2); text-transform:uppercase } .ak-artigo ol{ margin:8px 0 0 18px; font-size:13.5px; color:var(--cinza) } .ak-artigo ol li{ margin-bottom:4px } /* A classe que TRAVA a rolagem do fundo com o painel aberto. Ela existe * na folha de estilo de proposito: um sistema da plataforma aplicou esta * classe pelo JavaScript durante duas versoes sem que houvesse regra * nenhuma para ela, e o efeito simplesmente nao acontecia. Classe escrita * e contrato, e um teste de convencao confere que a regra existe. */ body.sem-rolagem{ overflow:hidden } /* Cobertura da gaveta no celular. */ .cobertura{ position:fixed; inset:0; z-index:40; background:var(--cobertura); border:0; padding:0; } .cobertura[hidden]{ display:none } /* Botao de gaveta: some no desktop. */ .hamburguer{ display:none } /* ===================================================================== * RESPONSIVIDADE — a escada oficial. O produto so trata os degraus da * MOLDURA; tabela, formulario, campo e indicador ja sao tratados pelos * componentes oficiais. * ===================================================================== */ @media (max-width:1100px){ .cards-2{ grid-template-columns:1fr } } @media (max-width:860px){ #app{ grid-template-columns:1fr } .sidebar{ position:fixed; top:0; left:0; bottom:0; width:min(82vw,var(--nav-w)); z-index:50; transform:translateX(-100%); transition:transform .22s ease; } .sidebar.aberta{ transform:none; box-shadow:var(--sombra-lg) } .topbar,#conteudo{ grid-column:1 } /* Uma coluna so, e ela encolhe. Sem o minmax, a faixa unica herdaria o mesmo minimo de conteudo e o telefone continuaria rolando de lado. */ #app{ grid-template-columns:minmax(0, 1fr) } .hamburguer{ display:inline-flex } .user-chip .quem{ display:none } .ak-painel{ width:100vw } } @media (max-width:560px){ .topbar{ padding:8px 12px; gap:8px; /* A BARRA QUEBRA EM DUAS LINHAS em vez de empurrar a pagina. Medido: o lado direito tinha 572px num telefone de 374px. */ flex-wrap:wrap; min-width:0; } /* A altura da faixa deixa de ser fixa, senao a segunda linha e cortada pela grade de 60px. */ #app{ grid-template-rows:auto 1fr } .topbar h2{ font-size:15px } /* A QUEBRA TEM DE SER AQUI, e nao so na `.topbar`: o seletor de empresa e filho de `.direita`, entao e `.direita` que precisa deixar quebrar. Com a quebra so na barra, o seletor ia para o fim da MESMA linha e a barra inteira passava a rolar de lado, cortando "Minha Conta" pela esquerda. */ .topbar .direita{ /* Base ZERO, e nao `auto`: com base automatica a caixa reivindica a largura do conteudo dela ANTES de quebrar por dentro, e o seletor de empresa inteiro entrava nessa conta. A barra quebrava logo na primeira linha e o titulo ficava sozinho numa faixa inteira. */ min-width:0; flex:1 1 0; justify-content:flex-end; gap:8px; flex-wrap:wrap; row-gap:6px; } /* O SELETOR DE EMPRESA VAI PARA A SEGUNDA LINHA, inteiro. Disputando espaco na mesma linha que os botoes ele perdia: os botoes nao encolhem e o com "JOB_1699 · EXPANSAO LAMINACAO" dentro esticaria a faixa e empurraria a linha inteira para o lado. Com o minimo em zero quem encolhe e a caixa, que ja tem width:100%. */ grid-template-columns:repeat(12,minmax(0,1fr)); /* Cada campo fica na altura do proprio conteudo, e nao esticado ate a altura do vizinho mais alto. Hoje isso nao se ve, porque o campo nao tem fundo nem borda; no dia em que tiver, a caixa esticada apareceria como um retangulo alto sem motivo ao lado de um campo baixo. */ align-items:start; } /* As doze larguras. E so isto que a classe faz. */ .campo.l-1 { grid-column:span 1 } .campo.l-2 { grid-column:span 2 } .campo.l-3 { grid-column:span 3 } .campo.l-4 { grid-column:span 4 } .campo.l-5 { grid-column:span 5 } .campo.l-6 { grid-column:span 6 } .campo.l-7 { grid-column:span 7 } .campo.l-8 { grid-column:span 8 } .campo.l-9 { grid-column:span 9 } .campo.l-10{ grid-column:span 10 } .campo.l-11{ grid-column:span 11 } .campo.l-12{ grid-column:span 12 } /* ---- ALTURA PREVISIVEL DA FAIXA: o rotulo --------------------------- Numa faixa estreita o rotulo quebra em duas linhas ("Torque especificado (N·m)" nao cabe nos 159px de um campo de largura 2) e empurra a caixa dele para baixo: uma faixa inteira desalinha por causa de um rotulo. Reservar DUAS linhas de rotulo para todos custa 16px por faixa e devolve a caixa sempre na mesma altura. `2.5em` com entrelinha `1.25` sao exatamente duas linhas do proprio rotulo: se o tamanho da fonte mudar um dia, a reserva acompanha sozinha, sem numero de pixel escrito a mao. NAO se usou `subgrid`, que alinharia sem reserva nenhuma: ele daria DOIS resultados visuais conforme o navegador do aparelho, e um sistema com dez anos de manutencao pela frente nao pode ter duas telas. -------------------------------------------------------------------- */ .form-grid > .campo > label, .grade-linha > .campo > label{ line-height:1.25; min-height:2.5em } /* ---- ALTURA PREVISIVEL DA FAIXA: a mensagem de erro ----------------- A reserva de 16px que vem do componente oficial FICA, e por dois motivos. Primeiro: o servidor recusa varios campos de uma vez, e sem a reserva cada mensagem que aparece empurra tudo que esta abaixo, ou seja, o formulario pula debaixo do dedo de quem esta lendo. Segundo: a reserva faz toda caixa terminar na mesma altura, e e isso que fecha a faixa alinhada. O que muda aqui e so a entrelinha. Texto de 12px com a entrelinha do corpo (1.45) ocupa 17.4px e estoura os 16px reservados, deslocando a pagina em 1.4px por campo com erro. Com 16px cravados, a primeira linha de erro cabe EXATAMENTE na reserva e nada se move. -------------------------------------------------------------------- */ .form-grid .msg-erro{ line-height:16px } /* ---- O GRUPO DO CABECALHO ------------------------------------------ "Horario de trabalho", "Condicoes do tempo". Era um

solto entre duas grades de campos, e titulo solto nao diz onde o assunto comeca nem onde termina: lido de cima, parecia titulo do resto da pagina. Vira bloco, com a MESMA cara da grade e do bloco de fotos (mesma borda, mesmo raio, mesmo respiro, titulo em azul de 14px), para o formulario ser uma pilha de caixas iguais e nao tres desenhos diferentes na mesma tela. -------------------------------------------------------------------- */ .grupo{ border:1px solid var(--linha); border-radius:var(--raio); padding:12px 14px; margin:16px 0; background:var(--branco) } .grupo-titulo{ margin:0 0 10px; font-size:14px; color:var(--azul) } /* A explicacao do grupo inteiro, quando existe, fica entre o titulo e os campos. `> .dica` e filho DIRETO de proposito: a dica de dentro do campo e outra coisa e nao pode receber este respiro. */ .grupo > .dica{ display:block; margin:0 0 10px } /* ===================================================================== GRADES E FOTOS - o miolo dos relatorios da casa. A grade e a parte que se repete: efetivo por funcao no RDO, ponto de torque no RTOR, participante no RDDS. Ela e desenhada pelo motor de formulario a partir da declaracao do modulo, e nao escrita por tipo. ===================================================================== */ .grade{ border:1px solid var(--linha); border-radius:var(--raio); padding:12px 14px; margin:16px 0; background:var(--branco) } .grade-cab{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px } .grade-cab h3{ margin:0; font-size:14px; color:var(--azul); flex:1 } /* A LINHA DA GRADE USA A MESMA GRADE DE DOZE do formulario, e por isso a coluna tambem honra `largura`: "Efetivo", de um digito, deixa de ocupar o mesmo espaco de "Nome". O que havia era `repeat(auto-fit,minmax(150px,1fr))`: toda coluna com a mesma largura minima de 150px e, pior, o NUMERO de faixas decidido pela largura da tela e nao pela declaracao. Uma grade de onze colunas ganhava seis faixas e transbordava para uma segunda faixa implicita que nao coincidia com a da linha de cima. Com doze colunas fixas todo registro quebra no MESMO ponto, e a coluna de um registro fica exatamente em cima da coluna do outro. A faixa de 40px do botao saiu junto. Ela existia porque `auto-fit` nao aceita faixa de tamanho `auto` ao lado (o navegador descartava a declaracao inteira, calado, e a grade virava uma coluna so, defeito real pego na prova de navegador). Sem `auto-fit` o problema deixa de existir, e o botao passa a ficar SEMPRE no mesmo lugar, o canto superior direito da linha, com 48px reservados no respiro da direita: 40 do alvo minimo de toque mais os 8 do vao da grade. */ .grade-linha{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; align-items:start; position:relative; padding:10px 48px 10px 0; border-top:1px dashed var(--linha) } .grade-linha:first-child{ border-top:none } .grade-linha .campo{ margin:0 } .grade-linha .btn-icone.remove{ position:absolute; top:10px; right:0; color:var(--vermelho) } /* A AJUDA da coluna aparece SO NA PRIMEIRA LINHA. Ela explica a COLUNA e nao o registro: repetida nas cinquenta linhas de um relatorio de torque vira ruido, e ainda muda a altura de cada linha conforme o texto quebra. Na primeira linha ela continua inteira, e a primeira linha e onde a pessoa olha ao comecar a preencher. */ .grade-linha:not(:first-child) .campo .dica{ display:none } /* A RESERVA DE ERRO NAO EXISTE DENTRO DA GRADE, ao contrario do formulario. Aqui ela seria espaco gasto com o que nao pode acontecer: o servidor devolve erro por NOME DE CAMPO (`erros[c.nome]`, em src/api/rotas.js) e a celula de grade se chama `g_pontos_3_torque_aplicado`, endereco que nenhuma mensagem tem. Vazia ela some, e o vao de 8px some junto; com texto dentro, ela volta. */ .grade-linha .msg-erro:empty{ display:none } .grade-total{ margin:10px 0 0; padding-top:8px; border-top:2px solid var(--azul); font-size:13px; text-align:right } .bloco-fotos{ border:1px solid var(--linha); border-radius:var(--raio); padding:12px 14px; margin:16px 0; background:var(--branco) } .fotos-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-top:10px } .foto{ border:1px solid var(--linha); border-radius:var(--raio-sm); padding:8px; display:flex; flex-direction:column; gap:6px } /* A foto do campo e retrato com frequencia. `contain` mostra a foto inteira; `cover` cortaria justamente a solda que o relatorio prova. */ .foto img{ width:100%; height:150px; object-fit:contain; background:#f1f3f6; border-radius:var(--raio-sm) } .foto .foto-legenda, .foto .foto-etapa{ width:100%; padding:6px 8px; font-size:13px; border:1px solid var(--linha); border-radius:var(--raio-sm) } /* ===================================================================== RESPONSIVIDADE DO FORMULARIO - dois degraus, e so dois. TABLET, abaixo de 1000px: SEIS colunas, e a largura declarada vale METADE, com piso em 2. Nao e uma segunda tabela de larguras: e a mesma declaracao lida pela metade, entao ninguem precisa declarar largura duas vezes e nao ha como as duas discordarem. CELULAR, abaixo de 760px: UMA coluna, tudo inteiro. E regra do padrao KRIGS, e vale para as duas grades: a do formulario e a que se repete. ATENCAO A UMA DIVERGENCIA DELIBERADA. Os componentes oficiais quebram o `.form-grid` em uma coluna aos 860px (krigs-componentes.css, linha 189). Aqui a quebra e aos 760px, com um degrau de seis colunas antes. O arquivo oficial NAO foi tocado: esta folha carrega depois dele e so sobrepoe `grid-template-columns`. Entre 760px e 860px, portanto, o K-RELATORIO mostra seis colunas onde o padrao mostraria uma. Fica registrado aqui porque divergencia que entra calada fica anos. ===================================================================== */ /* ===================================================================== O TABLET CONTINUA COM DOZE COLUNAS, e isto foi decidido com conta. Existia aqui uma faixa intermediaria que remapeava para seis colunas, com a largura pela metade arredondada para cima e piso em 2. A intencao estava certa e a aritmetica nao fechava: metade com arredondamento e piso NAO preserva a soma. A linha "Horario de trabalho", que e 3+3+3+3=12, virava 2+2+2+2=8, e o quarto campo caia sozinho na linha seguinte. Medido nas declaracoes reais: 44 das 93 linhas do sistema deixavam de fechar entre 760px e 1000px. Ou seja, o degrau que o dono recusou voltava no tablet, que e justamente onde ele disse que o sistema vai ser usado. O custo de manter doze colunas ate 760px cai sobre TRES celulas em todo o sistema: matricula no RDDS, e diferenca e diferenca_percentual no RTOR. As tres sao de leitura ou codigo curto. Nenhum campo de DIGITAR fica abaixo de 2, que nessa faixa da de 109px a 127px e cabe seletor com seta e caixa de hora. O campo de data ja foi resolvido na declaracao: todo campo de data esta em 3 e nao no 2 do padrao, porque o seletor nativo corta o ano abaixo de uns 140px. ===================================================================== */ @media (max-width:760px){ /* `minmax(0,1fr)` e nao `1fr` tambem aqui, e no celular isto pesa mais que no computador: a faixa de `1fr` tem minimo `auto`, ou seja, o conteudo mais largo de dentro. Um