/* ============================================================================ K-OS · estilo.css — folha única do sistema A COR vem de `prototipos/kos_sistema_completo.html` — a paleta aço —, e o que aplicar dela está escrito em `docs/handoff-visual.md`. A FORMA continua vindo dos três protótipos que já eram o contrato: · `prototipos/kos_console.html` painel do operador (FLB) — de onde saíram os componentes · `prototipos/kos_cliente.html` dashboard do cliente — mesmo sistema · `prototipos/kos_app_operador.html` app de celular — de onde saiu o mapa Este arquivo é a ÚNICA fonte de verdade do visual: nenhuma tela redefine cor, fonte ou raio. Tela nova importa esta folha e usa o vocabulário abaixo. O protótipo novo é LINGUAGEM VISUAL, não conteúdo: a empresa dele é fictícia e nenhum número dele entra no código (handoff §0). Indicador que passe a mostrar número onde hoje diz "ainda não medimos" é defeito. Os protótipos de julho (kos_prototipo, kos_ecossistema, kos_visao_cliente, kos_visao_time) estão SUPERADOS: system-ui, tema escuro e um azul que não é este. Não servem de referência. REJEITADO e que não volta: tema escuro, pixel art, gradiente berrante, ícone de clipart, visual de banco de imagens. ── Sobre a camada de compatibilidade (seção 1b) ────────────────────────── As telas carregam ~150 atributos `style="color:var(--muted)"` e parentes, herdados de duas convenções de nome diferentes que conviviam no projeto: A (index, inscricao, selecao): --bg --surface --ink --ink2 --muted ... B (mapa, painel, rh, admin): --plane --surface-1 --text-primary ... Em vez de editar atributo por atributo — muita cirurgia em HTML que já funciona, muito risco de quebrar comportamento por acidente — os dois vocabulários viram APELIDO do vocabulário canônico. O HTML antigo continua válido e passa a pintar com a paleta nova. Tela nova NÃO usa apelido. ============================================================================ */ /* ------------------------------------------------------------- 0 · FONTES As três da marca, SERVIDAS PELO PRÓPRIO APLICATIVO (`app/fontes/`). Nada de CDN, e a razão não é preferência: · A PWA do veterano é offline-first por projeto — fila em IndexedDB, casca no service worker. Chão de fábrica é justamente onde não há rede. Com a fonte no Google, o pedido falha exatamente na situação para a qual o aplicativo foi feito, e a tela cai para a fonte de sistema. · O pedido que falha vira ERRO NO CONSOLE, e `tests/e2e_painel.js` exige console limpo. Foi ele que apontou isto, com `ERR_CERT_AUTHORITY_INVALID` num ambiente de rede inspecionada. · Some também o vazamento de IP do operador para um terceiro a cada carga. DUAS fontes, no subset `latin` — que cobre o português inteiro (ã ç õ á é í ó ú â ê ô estão em U+00C0–00FF). Dois arquivos variáveis, 66 KB no total, na casca do service worker. A pilha de reserva continua declarada em `--disp/--ui/--mono` para o caso de o arquivo faltar. ── A Fraunces saiu (fatia 4) ───────────────────────────────────────────── Eram três. A Fraunces era a serifada de display, e sozinha pesava 67 KB — mais que as outras duas juntas. Numa PWA offline-first que carrega a casca inteira no service worker antes do primeiro uso, isso é metade do peso de fonte para o papel de dar um ar diferente a sete títulos. `--disp` NÃO foi apagado: ele continua sendo o token de display e passou a apontar para a Hanken Grotesk. Assim os sete lugares que pedem `var(--disp)` seguem valendo, a distinção de display vira peso e espacejamento em vez de família, e o dia em que uma serifada voltar é uma linha aqui — não uma caçada por `font-family` espalhado nas telas. --------------------------------------------------------------------------- */ @font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fontes/hanken-grotesk.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('fontes/jetbrains-mono.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---------------------------------------------------------------- 1 · TOKENS PALETA AÇO — de `prototipos/kos_sistema_completo.html`, aplicada conforme `docs/handoff-visual.md` §1. Substituiu a paleta de papel e âmbar de julho. Os NOMES continuam os mesmos: `--bg`, `--card`, `--edge`, `--tx`, `--marca`. Trocaram os VALORES, e isso é de propósito — as telas carregam ~150 atributos `style="color:var(--tx3)"` e parentes, e renomear token para trocar de paleta seria cirurgia em HTML que já funciona pelo prazer de renomear. O vocabulário do handoff (`--surf`, `--line`, `--mar`, `--ok`, `--al`) existe na seção 1c, como apelido, para que markup copiado do protótipo pinte certo sem virar uma terceira convenção aqui dentro. O QUE ESTA FOLHA NÃO TRAZ DO PROTÓTIPO (handoff §0): número nenhum. A empresa do protótipo é fictícia. Cor é o que muda aqui; o que a tela DIZ continua vindo do registro de eventos, e onde não houver evento continua dizendo "ainda não medimos" com o motivo. --------------------------------------------------------------------------- */ :root{ color-scheme: light; /* trava o claro: nada de escuro automático */ /* superfície */ --bg:#F6F8FA; /* fundo da página */ --side:#EDF1F6; /* faixas, notas, cabeçalhos, barra lateral */ --card:#FFFFFF; /* cartão, flat, sem sombra */ --edge:#E3E8EF; /* borda suave — o traço padrão */ --edge2:#CDD5DF; /* borda de ênfase, botão de contorno */ --chipbg:#EDF1F6; /* fundo de chip e de trilho */ /* O realce precisa ser MAIS ESCURO que `--side`, e não mais claro: a barra lateral é `--side`, e um hover do tom dela é um hover que não existe — junto com ele sumiria a marca do `aria-current`, que usa o mesmo tom. */ --hover:#DCE3EC; /* tinta */ --tx:#0F1E32; /* primária */ --tx2:#4B5D75; /* secundária */ --tx3:#8496AC; /* terciária */ --ink:#0F1E32; /* fundo cheio escuro: botão, avatar, toast */ --ink2:#3E5372; /* o mesmo, um grau mais claro */ /* semântica — cor NUNCA sozinha: sempre com rótulo, número ou glifo. A paleta aço tem UM verde, UM laranja e UM azul, e a gramática do alerta (handoff §3) reparte assim: crítico = laranja, atenção = azul, pendente = ardósia. É por isso que `--amber` ficou azul: o nome do token guarda o PAPEL — atenção —, não a cor com que o papel foi pintado em julho. Renomear os dois exigiria caçar `var(--amber)` em nove telas. */ --green:#0E8A5F; --green-bg:#E6F5EF; /* positivo */ --jade:#0A6E4C; --jade-bg:#E6F5EF; /* positivo, tinta mais escura */ --amber:#0A5FA0; --amber-bg:#E8F2FC; /* atenção */ --rust:#C2410C; --rust-bg:#FDEDE4; /* crítico, erro, ação destrutiva */ /* TINTA SOBRE FUNDO CHEIO. É cor de TEXTO, não de superfície: `--card` é o branco de um cartão, e usá-lo aqui confundiria os dois papéis para quem for mexer depois. */ --tx-inv:#FFFFFF; /* texto branco sobre preenchimento escuro */ --tx-sobre-marca:#FFFFFF; /* texto sobre a marca — que agora é azul cheio */ --amber-tx:#0A5FA0; /* texto de atenção legível sobre fundo claro */ --amber-tx2:#084D85; /* o mesmo, com mais peso */ --veu:rgba(255,255,255,.55); /* véu claro de hachura sobre cor cheia */ /* marca */ --marca:#0B7FD4; /* acento da marca — losango, caminho, "agora" */ --deep:#3E5372; /* posto sem conhecimento capturado */ /* SÉRIES DE GRÁFICO. São cinco, e são estas: handoff §1 diz que cor fora desta lista não entra em visualização de dado. Quem precisar de uma sexta série tem série demais no gráfico, não falta de cor. */ --c1:#0B7FD4; --c2:#0E8A5F; --c3:#7C3AED; --c4:#C2410C; --c5:#8496AC; /* tipografia — `--disp` é o papel (display), não a família: ver seção 0 */ --disp:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --ui:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* forma */ --r-card:13px; --r-chip:7px; --r-btn:9px; --r-campo:9px; --r-nota:11px; /* alvo de toque mínimo no chão de fábrica — luva, pressa, tela suja */ --toque:48px; } /* -------------------------------------------- 1b · APELIDOS (compatibilidade) */ /* Ler o comentário do cabeçalho antes de mexer. Não usar em tela nova. */ :root{ /* convenção A */ --surface:var(--card); --muted:var(--tx3); --grid:var(--edge); --accent:var(--tx); --good:var(--green); --warn:var(--amber); --rec:var(--rust); /* convenção B */ --plane:var(--bg); --surface-1:var(--card); --surface-2:var(--side); --text-primary:var(--tx); --text-secondary:var(--tx2); --baseline:var(--edge2); --border:var(--edge); --series-1:var(--c1); --series-2:var(--c4); --series-3:var(--c2); --warning:var(--amber); --serious:var(--c4); --critical:var(--rust); /* nomes de série da paleta de julho, agora apontando para as cinco de cima */ --blue:var(--c1); --coral:var(--c4); --sage:var(--c2); --lav:var(--c3); /* O funil é UMA cor em quatro forças, e não quatro cores: cada degrau é o mesmo dado ficando mais raro. São tons de `--c1`, e as pontas são a própria paleta (`--mar-ln` e `--mar-d`). */ --ord-1:#BEDBF3; --ord-2:#7CB4E4; --ord-3:#3B90D6; --ord-4:#0A5FA0; } /* ----------------------------------- 1c · O VOCABULÁRIO DO HANDOFF (apelidos) */ /* Os nomes com que a paleta chegou em `docs/handoff-visual.md` §1 e com que o protótipo está escrito. Existem para que um trecho copiado de lá pinte certo sem trazer junto uma terceira convenção de nome. Tela nova usa a de cima. */ :root{ --surf:var(--card); --line:var(--edge); --line2:var(--edge2); --mar:var(--marca); --mar-d:#0A5FA0; --mar-bg:var(--amber-bg); --mar-ln:#BEDBF3; --ok:var(--green); --ok-bg:var(--green-bg); --ok-ln:#BEE4D4; --al:var(--rust); --al-bg:var(--rust-bg); --al-ln:#F6D2BC; --n-bg:var(--chipbg); --n-ln:var(--hover); } /* ------------------------------------------------------------- 1d · ÍCONES O desenho dos 22 símbolos mora em `app/icones.js`, e só lá. O que mora aqui é como eles se apresentam: TRAÇO, nunca preenchimento, e a cor vem de quem os contém — `currentColor` é o que faz o ícone acompanhar o texto do chip, do item de navegação ou do selo sem ninguém repetir cor nenhuma. Tamanho e espessura são de CONTEXTO (handoff §2): 14px na chamada de seção, 16px no canto do cartão e na barra lateral, 21px na aba do celular. Cada um tem a sua regra onde o componente mora; esta aqui é o piso comum. */ svg.ic{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; flex:0 0 auto} /* Chamada de seção — handoff §2: 14px, traço 2, cor terciária. Fica ANTES do texto do

e nunca sozinho: é reforço de um título que já está escrito, e some sem custo para quem não enxerga o desenho. `vertical-align` em vez de flex no

porque vários títulos carregam um de contagem ao lado, e virar contêiner flex mudaria o desenho deles. */ svg.ics{ width:14px; height:14px; fill:none; stroke:var(--tx3); stroke-width:2; margin-right:7px; vertical-align:-2px; flex:0 0 auto; } /* Canto do cartão de indicador — handoff §2: 16px, cor de série, opacidade .65. Fica no canto de cima à direita, e o rótulo do cartão abre espaço para ele. A COR É DECISÃO DE QUEM MONTA O CARTÃO, escrita na chamada: cor de série rodando sozinha viraria uma paleta automática, e cor que ninguém escolheu é cor que ninguém consegue explicar. */ .ind,.tile{position:relative} svg.ick{ position:absolute; top:15px; right:15px; width:16px; height:16px; fill:none; stroke-width:1.8; opacity:.65; pointer-events:none; } /* o rótulo e o número abrem espaço para o ícone: no cartão do gestor o número vem primeiro, e sem isto ele passaria por baixo do traço */ .ind>.k,.ind>.v,.tile>.k,.tile>.v,.rc>.rl,.rc>.rn{padding-right:26px} /* O sprite injetado por icones.js: fonte dos , nunca desenho na página. */ #kos-icones{display:none} /* ------------------------------------------------------------------ 2 · BASE */ *{margin:0;padding:0;box-sizing:border-box} html,body{min-height:100%} body{ background:var(--bg); color:var(--tx); font-family:var(--ui); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:var(--mar-ln)} img,svg,video{max-width:100%} .hide{display:none!important} /* --------------------------------------------------------------- 3 · LAYOUT */ header{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 22px; background:var(--card); border-bottom:1px solid var(--edge); position:sticky; top:0; z-index:5; } header b{font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-.2px; color:var(--tx)} header .sub{color:var(--tx3); font-size:12.5px} header .right{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap} /* O losango é a marca — azul da paleta aço. Um só por tela, no cabeçalho. */ .marca{width:10px;height:10px;background:var(--marca);border-radius:2px;transform:rotate(45deg);flex:0 0 auto} main{max-width:1180px; width:100%; margin:0 auto; padding:22px} footer{max-width:1180px; margin:0 auto; padding:8px 22px 34px; color:var(--tx3); font-size:11.5px} /* ----------------------------------------------------------- 4 · TIPOGRAFIA */ h1{font-family:var(--disp); font-weight:500; font-size:30px; letter-spacing:-.3px; color:var(--tx)} h2{font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--tx3); font-weight:600; margin-bottom:10px} h3{font-size:15.5px; font-weight:700; color:var(--tx); margin-bottom:6px} p{color:var(--tx2)} .lead{font-family:var(--disp); font-weight:400; font-size:19px; line-height:1.4; color:var(--tx)} .sub{font-size:12.5px; color:var(--tx3); margin-top:4px; line-height:1.45} .mono{font-family:var(--mono); font-size:12px} .num{font-variant-numeric:tabular-nums; font-weight:600; color:var(--tx)} a{color:var(--tx); text-underline-offset:3px} /* ------------------------------------------------------------- 5 · CARTÃO */ .card{ background:var(--card); border:1px solid var(--edge); border-radius:var(--r-card); padding:18px 20px; margin-bottom:14px; } .card:last-child{margin-bottom:0} /* Nota: contexto e ressalva. É onde mora o "ainda não medimos, e por quê". */ .note{ background:var(--side); border:1px solid var(--edge); border-radius:var(--r-nota); padding:13px 16px; font-size:12.5px; color:var(--tx2); line-height:1.55; margin:14px 0; } /* NÃO usar flex aqui. A nota do console tinha ícone + um bloco de texto; as notas destas telas são texto CORRIDO com no meio da frase, e sob flex cada vira uma coluna — a frase do mapa saiu partida em quatro colunas. O ícone fica flutuando, que dá o mesmo alinhamento sem quebrar o texto. */ .note b{color:var(--tx)} /* Nota vazia colapsa: várias telas usam .note como recipiente de erro, que nasce vazio e só ganha texto quando algo falha. Sem isto, cada uma dessas telas mostraria uma caixa cinza permanente que não quer dizer nada. */ .note:empty{display:none} .note .ic{float:left; margin:1px 11px 0 0} /* Estado vazio. Nunca estimar para preencher espaço: dizer que não há. */ .vazio{font-size:13px; color:var(--tx3); padding:8px 0} /* ------------------------------------------------------------- 6 · BOTÕES */ button{font-family:var(--ui); font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; border-radius:var(--r-btn)} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:var(--tx-inv); padding:11px 16px; border-radius:var(--r-btn); transition:background .13s, border-color .13s; } .btn:hover{background:var(--ink2)} .btn.ghost{background:var(--card); border-color:var(--edge2); color:var(--tx)} .btn.ghost:hover{background:var(--hover)} .btn.min{padding:7px 12px; font-size:12.5px} .btn.perigo{background:var(--rust); color:#fff} .btn.perigo:hover{background:#9A330A} .btn:disabled{opacity:.42; cursor:not-allowed} .btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--tx); outline-offset:2px} /* ------------------------------------------------- 7 · CAMPOS DE FORMULÁRIO */ label{display:block; font-size:12.5px; color:var(--tx2); margin:12px 0 5px; font-weight:500} input,select,textarea{ width:100%; font-family:var(--ui); font-size:15px; color:var(--tx); background:var(--card); border:1px solid var(--edge2); border-radius:var(--r-campo); padding:11px 12px; } textarea{min-height:120px; line-height:1.55; resize:vertical} input:focus,select:focus,textarea:focus{outline:none; border-color:var(--tx3); box-shadow:0 0 0 3px rgba(11,127,212,.12)} input::placeholder,textarea::placeholder{color:var(--tx3)} .obrig{color:var(--rust)} .hint{font-size:11.5px; color:var(--tx3); margin-top:5px} /* mensagem de erro — sempre com texto, nunca só a cor */ .err,.erro{color:var(--rust); font-size:12.5px; min-height:18px; margin-top:8px} /* ---------------------------------------------- 8 · CHIP, SELO E INDICADORES */ /* Um só desenho para chip/pill/st/conf/selo/tag: eram cinco nomes para a mesma coisa espalhados pelas telas. */ .chip,.pill,.st,.conf,.selo,.tag{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; border-radius:var(--r-chip); padding:3px 9px; background:var(--chipbg); color:var(--tx2); border:1px solid transparent; white-space:nowrap; } .chip.good,.pill.good,.st.ok,.conf.alta,.chip.jade{background:var(--jade-bg); color:var(--jade)} .chip.green{background:var(--green-bg); color:var(--green)} .chip.warn,.pill.warn,.st.wait,.conf.media,.chip.amber{background:var(--amber-bg); color:var(--amber)} .st.err,.conf.baixa,.chip.crit,.chip.rust,.crit{background:var(--rust-bg); color:var(--rust)} .chip.sel{background:var(--tx); color:#fff; cursor:pointer} .selo.ia{background:var(--amber-bg); color:var(--amber)} .selo.humano{background:var(--jade-bg); color:var(--jade)} /* Ícone DENTRO do selo de estado — handoff §2, 10px e na cor do texto. O traço herda `currentColor`, então ele muda junto com o estado sem uma regra por estado; e traço 2.8 porque a 10px o de 2 some. REFORÇO, NUNCA SUBSTITUTO: a palavra continua escrita ao lado. Cor sozinha já não valia; símbolo sozinho seria a mesma falha com outra roupa. */ .chip svg,.pill svg,.st svg,.conf svg,.selo svg,.tag svg{ width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2.8; flex:0 0 auto; } /* Selo de urgência da linha de exceção (seção 8b). Mono e caixa alta, para não se confundir com o chip de estado que pode viver ao lado dele. O handoff §3 chama esta peça de `.tg`; aqui `.tg` já é a linha de chave liga/desliga do consentimento (seção 11), e dois desenhos com o mesmo nome numa folha só é a divergência de amanhã. Então é o `.chip` que a folha já tem, com um modificador. */ .chip.urg{ font-family:var(--mono); font-size:9.5px; letter-spacing:.3px; text-transform:uppercase; padding:3px 8px; border-color:var(--n-ln); } .chip.urg.crit{border-color:var(--al-ln)} .chip.urg.warn{border-color:var(--mar-ln)} .chip.urg.good{border-color:var(--ok-ln)} /* ponto de estado (online/offline) */ .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto} .dot.off{background:var(--amber)} .net{margin-left:auto; font-size:12px; color:var(--tx2); display:flex; align-items:center; gap:6px} /* ------------------------------------------- 8b · A LINHA DE EXCEÇÃO (.al2) */ /* A gramática do alerta do handoff §3, e ela vale nas TRÊS telas de exceção: painel do gestor, painel do RH e console da FLB. Antes cada uma tinha o seu desenho — `.agir .item` no painel, uma no RH, um `.item` local no console —, três formas para a mesma coisa, e só o console escrevia a gravidade. Quem monta a linha é `alertaLinha()`, em `kos.js`: o vocabulário de estado mora lá, do mesmo jeito que `COBERTURA` e `AGIR`. As quatro peças, NESTA ORDEM — ícone, selo, texto —, que é a do protótipo (`ib → tg → t → c`): tarja de 3px na cor do estado, caixa de ícone com o fundo do estado, o selo com a urgência ESCRITA e o texto em duas linhas. Cor nunca sozinha — é a mesma regra do chip de cobertura e do radar. O SELO VEM ANTES DO TEXTO, e não encostado na direita. A linha se lê da esquerda para a direita: que tipo de coisa é (ícone), quão urgente é (selo) e só então o quê (texto). Com o selo no fim, a urgência só chegava depois de ler o conteúdo inteiro — que é a ordem errada numa lista que existe para dizer o que fazer primeiro. E O TÍTULO É A PRIMEIRA LINHA DE DENTRO (`.t1`), com a evidência embaixo (`.t2`). O painel do gestor punha o nome da categoria num `

` FORA do cartão, e o resultado eram dois blocos soltos: um título flutuando e um cartão que não dizia do que estava falando. DUAS COISAS DO PROTÓTIPO NÃO VIERAM, e as duas de propósito: · A SETA `›`. No protótipo toda linha abre uma tela. Aqui nenhuma abre: não há destino para "3 rascunhos esperando revisão" na porta da empresa, porque `validar.html` é da porta do trabalhador. Seta que não leva a lugar nenhum é promessa falsa, e o dedo aprende rápido a não confiar nela. Volta no dia em que houver para onde ir. · O CURSOR DE MÃO e o `:hover` que vinham com ela, pelo mesmo motivo. */ .al2{ display:flex; align-items:center; gap:13px; background:var(--card); border:1px solid var(--edge); border-radius:12px; padding:13px 15px; margin-bottom:8px; } .al2:last-child{margin-bottom:0} .al2.r{border-left:3px solid var(--rust)} .al2.a{border-left:3px solid var(--marca)} .al2.p{border-left:3px solid var(--ink2)} /* O quarto estado não está no handoff, que só fala de exceção. Ele existe porque o risco TÉCNICO do console mostra o verde também: quem opera precisa saber que backup e âncora rodaram, e não só quando falharam. Lista de exceção nunca usa este estado — item que está bem não é coisa para fazer. */ .al2.ok{border-left:3px solid var(--green)} .al2 .ib{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--chipbg); } .al2 .ib svg{width:17px; height:17px; fill:none; stroke-width:2; stroke:var(--tx2)} .al2.r .ib{background:var(--rust-bg)} .al2.r .ib svg{stroke:var(--rust)} .al2.a .ib{background:var(--amber-bg)} .al2.a .ib svg{stroke:var(--amber-tx)} .al2.p .ib{background:var(--chipbg)} .al2.p .ib svg{stroke:var(--ink2)} .al2.ok .ib{background:var(--green-bg)} .al2.ok .ib svg{stroke:var(--jade)} /* o selo não encosta na direita: fica entre o ícone e o texto, e é o `.t` que toma a sobra */ .al2>.chip{flex:0 0 auto} .al2 .t{flex:1; min-width:0} .al2 .t1{display:block; font-size:13.5px; font-weight:600; color:var(--tx)} .al2 .t2{display:block; font-size:12px; color:var(--tx3); margin-top:2px; line-height:1.45} /* identificador DENTRO do título: idnumber pseudônimo, id de posto, id de problema, seguido do que a linha é. Herda o tamanho da própria linha — `.mono` sozinho encolheria para 12px e o nome da pessoa ficaria menor que o motivo dela estar ali. */ .al2 .t1 .mono{font-size:13.5px; color:var(--tx)} /* O teto da lista, dito por extenso. Cortar em N sem avisar se lê como "é só isto", e é com esse número que o gestor e o RH decidem agenda. Mora aqui porque as três telas cortam, e cada uma tinha a sua linha para dizer isso. */ .resto{font-size:12.5px; color:var(--tx3); font-style:italic; padding:4px 0 2px} /* --------------------------------------------------------------- 9 · TABELA */ table{width:100%; border-collapse:collapse} thead th{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--tx3); font-weight:600; text-align:left; padding:12px 16px; border-bottom:1px solid var(--edge); background:#FBFCFD; } tbody td{padding:13px 16px; border-bottom:1px solid var(--edge); font-size:13.5px; color:var(--tx2)} tbody tr:last-child td{border-bottom:none} td.num,th.num,td.right,th.right{text-align:right; font-variant-numeric:tabular-nums} tbody tr.rowgo{cursor:pointer; transition:background .12s} tbody tr.rowgo:hover{background:var(--bg)} .cellname{font-weight:700; color:var(--tx); font-size:14px; display:flex; align-items:center; gap:9px} /* ------------------------------------------------ 10 · BARRA DE PROGRESSO */ .track{height:6px; background:var(--chipbg); border-radius:4px; overflow:hidden} .track .fill,.fill{display:block; height:100%; border-radius:4px; background:var(--green)} .fill.ia{background:var(--amber)} .fill.humano{background:var(--jade)} .fill.nenhum{background:var(--edge2)} .inbar{display:flex; align-items:center; gap:9px} .inbar .tr{width:74px; height:6px; background:var(--chipbg); border-radius:4px; overflow:hidden} .inbar .tr i{display:block; height:100%; border-radius:4px; background:var(--green)} .inbar .tr i.am{background:var(--amber)} /* ------------------------------------------------------ 11 · ABAS E CHAVES */ .tabs,.abas{display:flex; gap:8px; padding:12px 22px 0; max-width:1180px; margin:0 auto; width:100%} .tab,.aba{ flex:1; min-height:var(--toque); background:var(--card); border:1px solid var(--edge); color:var(--tx2); border-radius:var(--r-btn); padding:10px 12px; font-weight:600; font-size:14px; } .tab.on,.aba.on{background:var(--tx); border-color:var(--tx); color:#fff} .tab .n{display:inline-block; min-width:18px; background:var(--chipbg); color:var(--tx2); border-radius:6px; font-size:11px; margin-left:6px; padding:0 5px} .tab.on .n{background:rgba(255,255,255,.22); color:#fff} /* chave liga/desliga — consentimento. Recusar é um toque, sem atrito. */ .tg{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--edge); font-size:14px; color:var(--tx)} .tg:last-child{border-bottom:none} .sw{position:relative; width:46px; height:27px; flex:none} .sw input{opacity:0; width:0; height:0} .sw i{position:absolute; inset:0; background:var(--edge2); border-radius:999px; cursor:pointer; transition:.15s} .sw i:before{content:""; position:absolute; width:21px; height:21px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.15s} .sw input:checked+i{background:var(--green)} .sw input:checked+i:before{left:22px} .sw input:focus-visible+i{outline:2px solid var(--tx); outline-offset:2px} /* --------------------------------------------------------------- 12 · AVISO */ .aviso,.obs{ border:1px solid var(--amber); background:var(--amber-bg); border-radius:var(--r-nota); padding:12px 14px; font-size:12.5px; color:var(--amber-tx); margin:12px 0; } .aviso b,.obs b{color:var(--amber-tx2)} .offline{background:var(--amber); color:var(--tx-inv); font-size:13px; font-weight:600; padding:9px 22px; text-align:center} /* --------------------------------------------------------------- 13 · TOAST */ #toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:20px; background:var(--tx); color:#fff; padding:11px 18px; border-radius:10px; font-size:13.5px; font-weight:500; opacity:0; transition:opacity .2s; max-width:88%; text-align:center; z-index:40; pointer-events:none; box-shadow:0 8px 24px rgba(15,30,50,.18); } #toast.on{opacity:1} /* ------------------------------------------------------------- 14 · ENTRADA */ /* Telas de login. Sóbrias: o cartão centrado, a marca, e nada mais. Quem chega aqui está no chão de fábrica com o celular na mão. */ #v-login{max-width:400px; margin:8vh auto 0} #v-login .card{padding:26px 24px} #v-login .marcabloco{display:flex; align-items:center; gap:10px; margin-bottom:6px} #v-login h3{font-family:var(--disp); font-weight:600; font-size:22px; letter-spacing:-.2px; margin-bottom:2px} #v-login .sub{margin-bottom:18px} #v-login .btn{width:100%; min-height:var(--toque); margin-top:16px} #v-login input{min-height:var(--toque); font-size:16px} /* 16px trava o zoom no iOS */ /* portão de consentimento */ .gate,.consent{padding:22px 20px} .gate h3{margin:10px 0} /* -------------------------------------------------------------- 15 · GAVETA */ .drawer{ position:fixed; inset:auto 0 0 0; max-height:82vh; overflow-y:auto; background:var(--card); border-top:1px solid var(--edge); border-radius:16px 16px 0 0; padding:20px 22px 30px; z-index:20; box-shadow:0 -16px 40px rgba(15,30,50,.14); } @media (min-width:900px){ .drawer{inset:0 0 0 auto; width:452px; max-height:100vh; border-radius:16px 0 0 16px; border-top:none; border-left:1px solid var(--edge); box-shadow:-16px 0 40px rgba(15,30,50,.10)} } .drawer .fechar{position:absolute; top:14px; right:16px; background:transparent; color:var(--tx3); padding:6px 10px; min-height:auto; font-size:18px; line-height:1} .drawer .fechar:hover{color:var(--tx)} .passo{font-size:14px; color:var(--tx2); margin-bottom:7px; padding-left:18px; text-indent:-18px} .hist{font-size:12.5px; color:var(--tx2); border-bottom:1px solid var(--edge); padding:9px 0} .hist:last-child{border-bottom:none} .hist b{color:var(--tx)} /* ------------------------------------------------------ 16 · MAPA DA FÁBRICA */ /* Segue o app do operador: zonas em blocos claros, máquinas em círculo, caminho tracejado no azul da marca. DOIS EIXOS EM DOIS CANAIS, para que um nunca esconda o outro: PREENCHIMENTO + CONTORNO = progresso DA PESSOA na trilha desta função CAMADA HACHURADA + "!" = cobertura DO POSTO, igual para todo mundo Cor nunca sozinha: número da etapa no centro, glifo fora da trilha, "!" desenhado à parte, e rótulo + contagem em DUAS legendas, uma por eixo. Os estados são distinguíveis também no cinza da impressão e para quem não separa verde de azul. "Sem conhecimento capturado" (hachura) é visualmente distinto de "fora da sua função" (vazio, contorno pontilhado): um é buraco no acervo, o outro não é da sua conta — e "não iniciada" é ainda outra coisa, que é a pessoa não ter começado. Ver `mapaDados()` em `api/server.js`. */ .mapwrap{position:relative; width:100%; overflow-x:auto} svg.mapa{width:100%; min-width:640px; display:block; background:var(--bg); border-radius:10px} .zona rect{fill:var(--card); stroke:var(--edge); stroke-width:.3} .zona text{fill:var(--tx3); font-family:var(--mono); font-size:2px; text-transform:uppercase; letter-spacing:.18px; font-weight:600} /* Halo: o rótulo da máquina e o nome da zona se cruzam quando duas máquinas ficam perto, e no fundo claro um texto por cima do outro fica ilegível. O contorno da cor do fundo, desenhado ANTES do preenchimento, separa um do outro sem mexer em uma linha da geometria, que vem do JS. */ .zona text,.maq .rot{paint-order:stroke fill; stroke:var(--bg); stroke-width:.5px; stroke-linejoin:round} .rota{fill:none; stroke:var(--marca); stroke-width:.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2.2 1.6; opacity:.95} .maq{cursor:pointer} .maq .corpo{stroke-width:.42} .maq:hover .corpo,.maq:focus .corpo{stroke:var(--tx); stroke-width:.75} .maq .rot{font-size:1.85px; fill:var(--tx2); text-anchor:middle; font-weight:600} .maq .gl{font-size:2.6px; text-anchor:middle; dominant-baseline:central; font-weight:700; fill:var(--tx2)} .maq .ord{font-size:1.9px; text-anchor:middle; dominant-baseline:central; font-family:var(--mono); font-weight:700} /* ── DOIS EIXOS, DOIS CANAIS ──────────────────────────────────────────────── O mapa responde duas perguntas de donos diferentes, e cada uma tem o seu canal visual. Nenhuma cobre a outra, e é por isso que são dois: PREENCHIMENTO (`.t-*`) = PROGRESSO DA PESSOA na trilha desta função. Muda de operador para operador no mesmo posto, no mesmo instante. CAMADA POR CIMA (`.e-*`) = COBERTURA DO POSTO. É a mesma para todo mundo que olhar; é o placar do que falta ensinar. Até a fatia 3 os dois disputavam o preenchimento, com a cobertura ganhando por precedência — então um posto sem cobertura sumia do eixo da pessoa. Ver o cabeçalho de `mapaDados()` em `api/server.js`. */ /* PREENCHIMENTO — a pessoa. Cores de `kos_app_operador.html`: verde = feito, azul da marca = andando, branco = ainda não começou, cinza = outra função. Os tons são os da paleta aço; a repartição é a que o app do operador já tinha, e é ela que o teste de estilo cobra. */ .t-concluida .corpo{fill:var(--green)} .t-em_curso .corpo{fill:var(--marca)} .t-nao_iniciada .corpo{fill:var(--card)} .t-fora .corpo{fill:var(--chipbg)} /* CONTORNO — reforça o mesmo eixo da pessoa, para quem não separa cores. */ .t-concluida .corpo{stroke:var(--jade)} .t-em_curso .corpo{stroke:var(--mar-d)} .t-nao_iniciada .corpo{stroke:var(--edge2)} .t-fora .corpo{stroke:var(--hover); stroke-dasharray:.9 .9} /* CAMADA POR CIMA — o posto. Um segundo círculo, hachurado, desenhado sobre o preenchimento: o eixo da pessoa continua legível por baixo, e a hachura é um canal que não depende de cor nenhuma. O `!` ao lado é o terceiro reforço. Posto coberto não desenha camada — ausência é o estado normal. */ .maq .cobre{fill:url(#hachura); opacity:.62; pointer-events:none} .e-coberta .cobre{display:none} /* VOCÊ ESTÁ AQUI — marcador, não estado. É sempre UM posto, e por isso é halo e não cor: cor teria de competir com um dos dois eixos por espaço. */ .maq.aqui .corpo{stroke:var(--mar-d); stroke-width:.7; filter:drop-shadow(0 0 .9px rgba(11,127,212,.85))} /* Rótulo na cor do eixo da pessoa; o posto sem cobertura escurece o nome. */ .t-concluida .rot{fill:var(--jade)} .t-em_curso .rot{fill:var(--mar-d)} .t-nao_iniciada .rot,.t-fora .rot{fill:var(--tx3)} .e-sem_cobertura .rot{fill:var(--deep)} /* O número é branco sobre os dois preenchimentos escuros e tinta sobre os dois claros. Contraste é requisito, não enfeite: é o número que diz a etapa. E ele é desenhado DEPOIS da camada de cobertura, para a hachura não comê-lo. */ .maq .ord{fill:var(--tx-inv)} .t-fora .ord,.t-nao_iniciada .ord{fill:var(--tx)} /* ALVO DE TOQUE DO MAPA. O círculo desenhado tem 2.6 unidades de raio, o que num celular dá cerca de 27px de diâmetro — metade do mínimo. O mapa é a superfície de toque principal do aplicativo, e quem toca nele está de luva, com pressa e com a tela suja. Então a área sensível é OUTRO círculo, maior e invisível, por cima de tudo: 4.6 de raio × 5.4px/unidade (a escala do mapa no celular) ≈ 50px. Aumentar o círculo visível no lugar disto engordaria o desenho inteiro e faria as máquinas vizinhas se tocarem. */ .maq .toque{fill:transparent; stroke:none; pointer-events:all} /* O "!" do posto sem cobertura é o ÚNICO ponto quente do mapa, e é assim de propósito: o eixo da pessoa é verde e azul, e um selo azul em cima de um círculo azul some. Laranja não disputa canal com nenhum dos dois. */ .maq .alerta circle{fill:var(--rust); stroke:var(--bg); stroke-width:.3} .maq .alerta text{font-size:1.7px; font-weight:700; fill:var(--tx-inv); text-anchor:middle; dominant-baseline:central} .legenda{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; margin-bottom:4px} .lg{display:flex; align-items:center; gap:8px; border:1px solid var(--edge); border-radius:999px; padding:7px 13px; font-size:12.5px; color:var(--tx2); background:var(--card)} .lg .sw{width:12px; height:12px; border-radius:3px; flex:none; border:1px solid var(--edge2); position:static} .lg b{color:var(--tx); font-variant-numeric:tabular-nums} /* o motivo de "parcial" não existir, e o "você está aqui": entram na legenda, sem moldura, porque não são um estado a mais — são recado sobre ela */ .lg.vazio{border:none; background:none; color:var(--tx3); font-size:12px; padding-left:2px} .lg .sw.aqui{background:var(--marca); border-color:var(--mar-d); border-radius:50%; box-shadow:0 0 0 2px rgba(11,127,212,.28)} /* o título de cada eixo: são duas perguntas, e o leitor precisa saber qual legenda responde qual antes de olhar as cores */ h3.eixo{font-size:12px; text-transform:uppercase; letter-spacing:.8px; font-weight:600; color:var(--tx3); margin:18px 0 0} /* ------------------------------------------- 16b · COMO ISTO É MEDIDO O parágrafo que explica o produto sai da tela e vira revelação sob demanda: quem abre um painel abre para decidir, não para ler sobre o K-OS. O texto não é jogado fora — some do caminho e continua a um toque, para a primeira vez de cada pessoa e para a auditoria. NÃO entra aqui o "ainda não medimos" com o motivo: aquilo é DADO — é a resposta honesta no lugar de um número inventado —, e dado não se esconde atrás de link. `
` nativo: sem JS, sem estado a sincronizar, e o teclado já sabe abrir. O cabeçalho inteiro é o alvo, que é o que dá tamanho de toque. */ .medida{margin:0 0 12px} .medida>summary{display:flex; align-items:baseline; justify-content:space-between; gap:14px; cursor:pointer; list-style:none; padding:4px 0} .medida>summary::-webkit-details-marker{display:none} .medida>summary>h2{margin-bottom:0} .medida .como{font-size:12.5px; color:var(--jade); white-space:nowrap; text-decoration:underline; text-underline-offset:3px} .medida>summary:hover .como{color:var(--tx)} .medida .como::after{content:" ▾"; text-decoration:none; display:inline-block} .medida[open] .como::after{content:" ▴"} .medida>summary:focus-visible{outline:2px solid var(--tx); outline-offset:2px; border-radius:6px} .medida .note{margin:8px 0 0} /* ------------------------------------------------------- 17 · INDICADORES */ .inds,.tiles,.cols,.grade{display:grid; gap:14px} .inds{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .tiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .ind,.tile{background:var(--card); border:1px solid var(--edge); border-radius:var(--r-card); padding:17px 19px} .ind .k,.tile .k{font-size:13px; font-weight:600; color:var(--tx)} .ind .v,.tile .v{font-size:30px; font-weight:700; letter-spacing:-.6px; margin-top:12px; color:var(--tx); font-variant-numeric:tabular-nums} .ind .u,.tile .d{font-size:12.5px; color:var(--tx3); margin-top:4px} /* "ainda não medimos", com o motivo. Nunca estimar para preencher espaço. */ .ind .naomedido,.naomedido{font-size:13px; color:var(--tx3); margin-top:12px; font-style:italic} .ind .porque,.porque{font-size:12px; color:var(--tx3); margin-top:6px; line-height:1.5} .ind .cmp,.comp{font-size:12.5px; color:var(--tx2); margin-top:10px; padding-top:10px; border-top:1px solid var(--edge)} /* rótulo à esquerda, número à direita: encostados, liam-se como uma palavra só ("Controle41,0dias") e o olho não achava onde o nome acabava */ .ind .cmp>div,.comp>div{display:flex; justify-content:space-between; gap:12px} .ind .cmp b,.comp b{color:var(--tx); font-variant-numeric:tabular-nums} /* ------------------------------------------ 16b · FOTO DE POSTO (handoff §5) */ /* A foto da MÁQUINA, vinda do cadastro. Handoff §5, primeiro dos três lugares onde foto entra — e o único que não envolve pessoa. `aspect-ratio` fixo para a gaveta não pular de altura enquanto a imagem carrega, e `object-fit:cover` porque foto de galpão vem em qualquer proporção. Posto sem foto não ganha imagem de banco nem moldura vazia: o contêiner fica sem conteúdo e some. */ .foto-posto{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-card); border:1px solid var(--edge); background:var(--side); margin:10px 0 4px; } /* O ROSTO — handoff §5, o terceiro lugar de foto e o único que é de PESSOA. Quadrado com o raio do cartão, como o avatar da fila de atestado, e não um círculo: círculo é vocabulário de rede social, e aqui a foto serve para reconhecer alguém no chão de fábrica. Quem não tem rosto não ganha silhueta genérica — a marcação nem chega a ser desenhada. */ .rosto{ display:block; width:96px; height:96px; object-fit:cover; border-radius:var(--r-card); border:1px solid var(--edge); background:var(--side); margin:10px 0 12px; } /* A capa da aula na fila de revisão — um quadro do próprio vídeo. Vazia ela não ocupa nada: `:empty` some, e a linha volta a ser o que era. */ .qitem .capa{flex:0 0 auto} .qitem .capa:empty{display:none} .qitem .capa img{ display:block; width:56px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--edge); background:var(--side); } /* ------------------------------------- 17b · MICRO-GRÁFICO (handoff §4) */ /* Quatro formas, e SÓ essas quatro. · faixa de proporção → `.track` + `.fill`, que a folha JÁ TEM (seção 9b). Parte de um todo, com o denominador escrito ao lado. · barra com opacidade crescente → `.cols`, no painel. · rosca → cobertura. Morava no painel do gestor enquanto ele era o único lugar onde a proporção era o assunto do cartão; o cadastro virou o segundo, e desenho com dois usuários mora na folha, não numa tela. · área com linha → NÃO EXISTE ainda, e é o certo: exige série no tempo, e o log não tem nenhuma que sustente "tempo até autonomia". Inventar a linha seria inventar o dado. AS DUAS REGRAS QUE NÃO SE NEGOCIAM: gráfico só onde há série no log — sem ela o cartão diz "ainda não medimos" e o motivo —, e nunca percentual sem o denominador visível. É por isso que toda peça aqui é acompanhada do "N de M" em texto: a faixa é o reforço do número, não o contrário. */ .proporcao{margin-top:12px} .proporcao .track{height:6px} .proporcao .leg{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--tx3); margin-top:6px} .proporcao .leg b{color:var(--tx2); font-variant-numeric:tabular-nums} /* A LEGENDA de gráfico — quadradinho de cor, rótulo e o "N de M". Estava escrita, idêntica, dentro de `painel.html` e de `rh.html`; o cadastro seria a terceira cópia. Ela é o texto que carrega o dado quando a forma é fina demais para julgar, e por isso vem SEMPRE junto do desenho. */ .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:13px; color:var(--tx2)} .legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:7px; vertical-align:-1px} .legend b{color:var(--tx); font-variant-numeric:tabular-nums} /* A ROSCA da cobertura, ao lado da legenda. Abaixo de 560px a legenda desce: anel de 132px mais duas linhas de placar não cabem lado a lado no celular, e o gestor abre o painel no telefone com a mesma frequência com que abre no desktop. O número vai NO MEIO do anel, como "N de M" — percentual sem denominador visível é proibido, e faixa de largura zero não é "não medimos". */ .cob-duo{display:flex; align-items:center; gap:22px; flex-wrap:wrap} .cob-duo .legend{margin-top:0; flex-direction:column; gap:9px; align-items:flex-start} .rosca{width:132px; height:132px; flex:0 0 auto} .rosca .trilho{fill:none; stroke:var(--chipbg); stroke-width:4} .rosca .arco{fill:none; stroke:var(--good); stroke-width:4} .rosca text{text-anchor:middle; font-family:var(--ui)} .rosca .rn{font-size:9px; font-weight:700; fill:var(--tx)} .rosca .rd{font-size:4px; fill:var(--tx3)} /* --------------------------------------------------------------- 18 · FUNIL */ .funnel .frow{display:grid; grid-template-columns:120px 1fr 54px; gap:12px; align-items:center; margin-bottom:11px; font-size:12.5px} .funnel .fl{color:var(--tx2)} .funnel .fb{height:22px; background:var(--chipbg); border-radius:6px; overflow:hidden} .funnel .fb i{display:block; height:100%; background:var(--blue); border-radius:6px} .funnel .fv{font-weight:700; color:var(--tx); text-align:right; font-variant-numeric:tabular-nums} /* --------------------------------------------------- 19 · REGISTRO E CADEIA */ .feed{font-family:var(--mono); font-size:11.5px; margin-top:12px} .fev{display:flex; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--edge); color:var(--tx2)} .fev:last-child{border-bottom:none} .fev .tm{color:var(--tx3); flex:0 0 auto} .fev .ty{color:var(--amber)} .fev .hs{color:var(--tx3); margin-left:auto; flex:0 0 auto} .cod,.prova{font-family:var(--mono); font-size:11.5px; color:var(--tx2); word-break:break-all} /* -------------------------------------------------------------- 20 · CAPTURA */ video{width:100%; border-radius:12px; background:#111; aspect-ratio:3/4; object-fit:cover} .recbar{display:flex; align-items:center; justify-content:center; gap:20px; margin:16px 0 4px} .recbtn{ width:82px; height:82px; border-radius:50%; background:var(--rust); border:5px solid var(--card); outline:3px solid var(--rust); transition:.15s; padding:0; } .recbtn.on{border-radius:18px; transform:scale(.82); outline-color:var(--tx)} .recbtn:disabled{background:var(--edge2); outline-color:var(--edge2)} .rectime{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:15px; color:var(--tx2); min-width:56px} .qitem{ display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--edge); border-radius:11px; padding:11px 13px; margin-top:8px; font-size:13.5px; } .qitem small{display:block; color:var(--tx3); font-family:var(--mono); font-size:10.5px} /* ------------------------------------------------------------- 20b · HOME A tela que abre o app do trabalhador. Três blocos: quem é, o que espera por você, e o que falta ensinar do seu lado — com gravar como o botão grande do meio, e não como a primeira coisa que a tela faz sozinha. Mora aqui, e não no