/* App de Viabilidade - Teutonet Paleta baseada no logo: azul Teutonet #2b8cc4 e azul escuro #2d5468 */ :root{ --azul:#2b8cc4; --azul-escuro:#2d5468; --azul-claro:#eaf4fb; --azul-borda:#bfdff2; --bg:#f4f6f8; --painel:#ffffff; --tinta:#1d2b36; --tinta-suave:#5d6b78; --linha:#e2e8ee; --ok:#1f9d55; --ok-fundo:#e7f8ee; --alerta:#c07800; --alerta-fundo:#fdf3e0; --espera:#6b7783; --espera-fundo:#eef1f4; --perigo:#cf3b3b; --perigo-fundo:#fdecec; --raio:14px; --sombra:0 1px 2px rgba(29,43,54,.05), 0 2px 8px rgba(29,43,54,.04); --altura-barra:calc(29px + env(safe-area-inset-top)); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--tinta); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; } .oculto{display:none !important} /* * O "PUXAR PARA ATUALIZAR" DO CELULAR, DESLIGADO NA TELA DE VIABILIDADE. * * Arrastar a tela para baixo quando ela ja esta no topo e o gesto que o * Android e o iPhone usam para RECARREGAR a pagina. Na tela de viabilidade * isso e um desastre: o tecnico esta na frente do cliente, ja anexou fotos, * video e recado, rola para cima para conferir os dados do pedido, passa do * topo sem querer - e o app recarrega e volta para a lista de pedidos. O * rascunho so existe na memoria, entao tudo o que ele anexou some. * * O overscroll-behavior-y:contain segura o gesto dentro da propria tela: * ela para no topo e nao acontece mais nada. Vale so enquanto a classe * esta no , e o render() a coloca e tira conforme a tela (ver app.js). * Nas outras telas o puxar para atualizar continua funcionando normalmente. */ html.sem-puxar-para-atualizar, html.sem-puxar-para-atualizar body{ overscroll-behavior-y:contain; } /* ------------------------------------------------------------- estrutura */ .tela{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; } .cabecalho{ position:sticky; top:0; z-index:30; background:var(--painel); border-bottom:1px solid var(--linha); padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); display:flex; align-items:center; gap:12px; } .cabecalho .marca{display:flex;align-items:center;gap:10px;min-width:0;flex:1} .cabecalho .titulo{font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cabecalho .sub{font-size:11.5px;color:var(--tinta-suave);line-height:1.2} .cabecalho .voltar{ border:none;background:transparent;color:var(--azul); font-size:22px;line-height:1;padding:4px 6px 4px 0;cursor:pointer;flex-shrink:0; } .cabecalho .inicio{ border:none;background:transparent;padding:0;cursor:pointer;flex-shrink:0; display:flex;align-items:center; } .cabecalho .inicio img{height:26px;width:auto;display:block} .cabecalho .inicio-nome{ font-size:12.5px;font-weight:700;color:var(--azul);margin-left:5px;white-space:nowrap; } /* nome de quem entrou + sair, sempre visíveis no topo (antes ficava só no rodapé da lista, e sumia de vista ao rolar a tela) */ .usuario-cab{display:flex;align-items:center;gap:8px;flex-shrink:0} .usuario-cab-nome{ font-size:12.5px;color:var(--tinta-suave); max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .usuario-cab button{ border:none;background:transparent;color:var(--azul); font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 0; } .conteudo{ flex:1; padding:16px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); max-width:760px; width:100%; margin:0 auto; } /* ------------------------------------------------------------ conexão */ .barra-conexao{ position:fixed;top:0;left:0;right:0;z-index:100; height:var(--altura-barra); padding:7px 12px; padding-top:calc(7px + env(safe-area-inset-top)); font-size:12px;font-weight:700;text-align:center; line-height:1.2; } .barra-conexao.offline{background:var(--alerta-fundo);color:var(--alerta)} .barra-conexao.sincronizando{background:var(--azul-claro);color:var(--azul-escuro)} .barra-conexao.demandas{background:var(--azul);color:#fff} .barra-conexao.demandas button{ border:none;background:rgba(255,255,255,.22);color:#fff; font-weight:800;border-radius:999px;padding:2px 12px;margin-left:4px;cursor:pointer; } /* Com a barra visível, tudo desce para não ficar escondido embaixo dela. */ body.com-barra .tela, body.com-barra .login{padding-top:var(--altura-barra)} body.com-barra .cabecalho{ top:var(--altura-barra); padding-top:10px; /* a barra já cuidou da área segura do topo */ } /* ------------------------------------------------------------- cartões */ .cartao{ background:var(--painel); border:1px solid var(--linha); border-radius:var(--raio); padding:14px; margin-bottom:12px; box-shadow:var(--sombra); } .cartao-clicavel{cursor:pointer;display:block;width:100%;text-align:left;font:inherit;color:inherit} .cartao-clicavel:active{background:#fafbfc} .alerta-opcao{ display:flex;align-items:flex-start;gap:12px;cursor:pointer; } .alerta-opcao input{margin-top:3px;width:18px;height:18px;flex-shrink:0} .alerta-titulo{font-weight:700;font-size:14.5px} .pedido-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} /* a coluna do nome/endereço usa todo o espaço que sobra da etiqueta */ .pedido-topo > div:first-child{flex:1;min-width:0} .pedido-nome{font-weight:700;font-size:15px;word-break:break-word} .pedido-meta{font-size:13px;color:var(--tinta-suave);margin-top:2px;word-break:break-word} .pedido-rodape{ display:flex;justify-content:space-between;align-items:center;gap:8px; font-size:12px;color:var(--tinta-suave); border-top:1px solid var(--linha);margin-top:10px;padding-top:9px; flex-wrap:wrap; } .codigo{ font-size:11.5px;font-weight:800;color:var(--tinta-suave); letter-spacing:.03em; } .etiqueta{ font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;flex-shrink:0; /* nomes longos como "Aguardando viabilidade" quebram em duas linhas em vez de espremer o nome do cliente */ text-align:center;line-height:1.3;max-width:110px; } /* pedido que chegou pelo formulário e ainda espera o comercial conferir */ .etiqueta.conferencia{background:#f0e8fb;color:#6b3fa0} .etiqueta.aguardando{background:var(--espera-fundo);color:var(--espera)} .etiqueta.em_analise{background:var(--alerta-fundo);color:var(--alerta)} .etiqueta.respondido{background:var(--ok-fundo);color:var(--ok)} .etiqueta.cadastrado{background:var(--azul-claro);color:var(--azul-escuro)} .etiqueta.cancelado{background:var(--perigo-fundo);color:var(--perigo)} /* restrição no CPF morreu no comercial, antes da viabilidade: cor de parada, mas diferente do cancelado, que é o fim depois de tudo ter acontecido */ .etiqueta.restricao{background:#f7e9e2;color:#a2542a} .etiqueta.pendente{background:var(--alerta-fundo);color:var(--alerta)} .etiqueta.viavel{background:var(--ok-fundo);color:var(--ok)} .etiqueta.inviavel{background:var(--perigo-fundo);color:var(--perigo)} .etiquetas{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0} /* -------------------------------------------------------------- filtros */ .filtros{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .filtros::-webkit-scrollbar{display:none} /* * No celular a faixa de situações rola com o dedo: são muitos botões para * a largura de um telefone, e arrastar é natural ali. Da largura de um * tablet para cima isso vira armadilha - com mouse não se arrasta a faixa, * e a barra de rolagem está escondida, então o último botão simplesmente * some atrás da borda. Tendo largura, os botões passam a quebrar linha e * ficam todos à vista (v1.31.17 da VM). */ @media (min-width:620px){ .filtros{flex-wrap:wrap;overflow-x:visible} } .filtro{ flex-shrink:0;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px; border:1px solid var(--linha);color:var(--tinta-suave);background:var(--painel);cursor:pointer; } .filtro.ativo{background:var(--azul-escuro);color:#fff;border-color:var(--azul-escuro)} .busca{ width:100%;border:1px solid var(--linha);border-radius:10px;padding:11px 13px; font-size:15px;font-family:inherit;background:var(--painel);margin-bottom:12px; } /* --------------------------------------------------------------- campos */ .secao{ font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:var(--tinta-suave);margin:22px 0 10px; } .secao:first-child{margin-top:0} .campo{margin-bottom:15px} .campo label{display:block;font-size:13px;font-weight:700;margin-bottom:6px} /* A dica vale em qualquer lugar, nao so dentro de um campo: o app sempre usou dica solta (embaixo de botao, em cartao) e ela saia grande e escura. */ .dica{font-size:12px;color:var(--tinta-suave);font-weight:400} .campo .dica{margin-top:5px} .campo input,.campo select,.campo textarea{ width:100%;border:1px solid var(--linha);border-radius:10px;padding:12px 13px; font-size:16px; /* 16px evita o zoom automático do iPhone ao focar */ font-family:inherit;background:#fcfdfd;color:var(--tinta); } .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(43,140,196,.13);background:#fff; } .campo textarea{resize:vertical;min-height:76px} .linha-campos{display:flex;gap:10px} .linha-campos .cresce{flex:1;min-width:0} .linha-campos .estreito{width:96px;flex-shrink:0} .campo.erro input,.campo.erro select,.campo.erro textarea{border-color:var(--perigo);background:#fffafa} .opcoes{display:flex;gap:8px;flex-wrap:wrap} .opcao{ flex:1;min-width:96px;text-align:center;border:1px solid var(--linha);border-radius:10px; padding:11px 8px;font-size:14px;font-weight:600;color:var(--tinta-suave);background:#fcfdfd;cursor:pointer; } .opcao.marcada{border-color:var(--azul);background:var(--azul-claro);color:var(--azul-escuro)} /* --------------------------------------------------------------- botões */ .botao{ display:block;width:100%;text-align:center;padding:14px;border-radius:12px; font-size:15px;font-weight:700;border:none;cursor:pointer;font-family:inherit;margin-top:8px; } .botao:disabled{opacity:.55;cursor:not-allowed} .botao-principal{background:var(--azul);color:#fff} .botao-principal:active:not(:disabled){background:#2680b4} .botao-secundario{background:var(--painel);color:var(--tinta);border:1px solid var(--linha)} .botao-fantasma{background:var(--azul-claro);color:var(--azul-escuro)} .botao-perigo{background:var(--perigo-fundo);color:var(--perigo)} .botao-ok{background:var(--ok);color:#fff} .botao-menor{padding:10px;font-size:13.5px;margin-top:8px} /* linha de plano na tela de configuração */ .linha-plano{display:flex;align-items:center;gap:10px;padding:12px 14px} .linha-plano .nome-plano{flex:1;min-width:0;font-weight:600;font-size:14.5px;word-break:break-word} .acoes-plano{display:flex;gap:6px;flex-shrink:0} .botao-icone{ width:36px;height:36px;border-radius:9px;border:1px solid var(--linha); background:var(--painel);color:var(--tinta-suave);font-size:16px;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit; } .botao-icone:disabled{opacity:.35;cursor:not-allowed} .botao-icone.perigo{color:var(--perigo);border-color:#f0d3d3;background:var(--perigo-fundo)} .botao-linha{display:flex;gap:8px} .botao-linha .botao{margin-top:0} .flutuante{ position:fixed;right:18px; bottom:calc(20px + env(safe-area-inset-bottom)); width:56px;height:56px;border-radius:50%; background:var(--azul);color:#fff;font-size:30px;line-height:1; border:none;cursor:pointer;z-index:40; box-shadow:0 6px 18px rgba(43,140,196,.42); display:flex;align-items:center;justify-content:center; } /* ---------------------------------------------------------------- login */ .login{ min-height:100vh;min-height:100dvh; display:flex;flex-direction:column;justify-content:center; padding:24px;max-width:400px;margin:0 auto;width:100%; } .login .logo{display:block;width:100%;max-width:230px;height:auto;margin:0 auto 8px} .login .subtitulo{text-align:center;font-size:14px;color:var(--tinta-suave);margin-bottom:28px} /* ---------------------------------------------------------------- fotos */ .foto-area{ border:1.5px dashed var(--azul-borda);border-radius:12px;background:#fbfdfe; padding:20px 14px;text-align:center;color:var(--azul-escuro); font-size:14px;font-weight:600;cursor:pointer;display:block; } .foto-area .icone{font-size:26px;display:block;margin-bottom:6px} /* Botão de segurar para gravar. Precisa de aparência própria: o dedo fica em cima dele, então o retorno visual é a única forma de a pessoa saber que está gravando. O user-select evita o celular selecionar o texto e abrir o menu de copiar no meio da gravação. */ /* pan-y e nao none: o botao e grande e fica no meio da janela, entao e nele que o dedo cai na hora de rolar. Segurar parado continua gravando; arrastando, o navegador rola e cancela a gravacao - que e o certo, porque quem arrastou nao queria gravar. */ .gravador{width:100%;font-family:inherit;-webkit-user-select:none;user-select:none; -webkit-touch-callout:none;touch-action:pan-y;transition:background .15s,border-color .15s} .gravador.gravando{background:#fdecec;border-color:#d9534f;border-style:solid;color:#a8322e} .gravador.gravando .icone{animation:pulsa 1s ease-in-out infinite} @keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}} .opcional-rotulo{font-weight:400;color:var(--tinta-suave);font-size:12px} .miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px} .miniatura{position:relative;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:4/3;display:block} .miniatura.clara{background:#f0f3f6;border:1px solid var(--linha)} .miniatura.clara img{object-fit:contain} .miniatura img{width:100%;height:100%;object-fit:cover;display:block} .miniatura button{ position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%; background:rgba(0,0,0,.62);color:#fff;border:none;font-size:15px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; } /* ------------------------------------------------------------------ gps */ .gps{ border:1px solid var(--linha);border-radius:12px;padding:13px;background:#fcfdfd; display:flex;align-items:flex-start;gap:11px;font-size:13.5px; } .gps .ponto{width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:5px} .gps.ok .ponto{background:var(--ok);box-shadow:0 0 0 4px var(--ok-fundo)} .gps.buscando .ponto{background:var(--alerta);box-shadow:0 0 0 4px var(--alerta-fundo)} .gps.falhou .ponto{background:var(--perigo);box-shadow:0 0 0 4px var(--perigo-fundo)} .gps .texto{flex:1;min-width:0} .gps .coord{font-weight:700;word-break:break-all} /* --------------------------------------------------------------- avisos */ .aviso{border-radius:10px;padding:11px 13px;font-size:13px;line-height:1.5;margin-bottom:14px} .aviso.info{background:var(--azul-claro);color:#1e4257} .aviso.atencao{background:var(--alerta-fundo);color:#7d4e00} .aviso.erro{background:var(--perigo-fundo);color:#8f2323} .aviso.sucesso{background:var(--ok-fundo);color:#146c3a} /* ------------------------------------------------------------- links */ .linha-link{margin-bottom:10px} .codigo-link{ display:flex;align-items:center;gap:8px; margin-top:8px;padding:9px 11px; background:var(--azul-claro);border:1px solid var(--azul-borda); border-radius:10px; } .codigo-link input{ flex:1;min-width:0;border:0;background:transparent; font-size:12.5px;color:var(--azul-escuro);font-weight:600;padding:0; } .etiqueta.tipo-vendedor{background:var(--azul-claro);color:var(--azul-escuro)} .etiqueta.tipo-indicacao{background:#f0e8fb;color:#6b3fa0} .etiqueta.tipo-cliente{background:var(--ok-fundo);color:var(--ok)} .link-desligado{opacity:.55} /* aviso de pedido repetido, na conferência */ .parecido{ display:block;width:100%;text-align:left; border:1px solid var(--alerta-fundo);border-radius:10px; background:#fff;padding:9px 11px;margin-top:8px;cursor:pointer; font-size:13px;color:var(--tinta); } .parecido strong{display:block} .parecido span{color:var(--tinta-suave);font-size:12.5px} .vazio{text-align:center;padding:52px 20px;color:var(--tinta-suave)} .vazio .icone{font-size:38px;display:block;margin-bottom:10px;opacity:.5} /* ---------------------------------------------------------------- dados */ .dados{display:grid;gap:11px} .dado{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:14px;align-items:start} .dado dt{color:var(--tinta-suave);font-weight:600} .dado dd{margin:0;word-break:break-word} @media (max-width:420px){ .dado{grid-template-columns:1fr;gap:1px} .dado dt{font-size:12px} } .linha-tempo{border-left:2px solid var(--linha);padding-left:14px;margin-left:4px} .linha-tempo .item{margin-bottom:12px;font-size:13px;position:relative} .linha-tempo .item::before{ content:'';position:absolute;left:-19px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--azul-borda); } .linha-tempo .quando{color:var(--tinta-suave);font-size:12px} /* ---------------------------------------------------------------- toast */ .toast{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(24px + env(safe-area-inset-bottom)); background:var(--azul-escuro);color:#fff;padding:12px 18px;border-radius:11px; font-size:14px;font-weight:600;z-index:200;max-width:88%;text-align:center; box-shadow:0 6px 22px rgba(0,0,0,.24); } .toast.erro{background:var(--perigo)} .toast.sucesso{background:var(--ok)} /* ----------------------------------------------------------------- abas */ /* Com seis abas não cabe tudo na largura do celular, então a faixa rola de lado em vez de espremer ou cortar a última. */ .abas{ display:flex;gap:2px;background:var(--painel);border-bottom:1px solid var(--linha); padding:0 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .abas::-webkit-scrollbar{display:none} .abas button{ flex:0 0 auto;border:none;background:transparent;color:var(--tinta-suave); font-size:13px;font-weight:700;padding:12px 10px;border-bottom:2.5px solid transparent; cursor:pointer;font-family:inherit;white-space:nowrap; } .abas button.ativa{color:var(--azul);border-bottom-color:var(--azul)} .carregando{text-align:center;padding:44px;color:var(--tinta-suave);font-size:14px} .rodape-info{text-align:center;font-size:12px;color:var(--tinta-suave);margin-top:26px;padding-bottom:10px} .rodape-info button{background:none;border:none;color:var(--azul);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline} /* vídeo enviado pelo técnico na viabilidade */ .video-viab{ width:100%;max-height:340px;border-radius:12px;background:#000; margin-top:10px;display:block; } /* escolha de CEP quando a rua tem mais de um */ .opcao-cep{ display:flex;flex-direction:column;align-items:flex-start;gap:2px; width:100%;text-align:left;margin-top:8px;padding:11px 13px; border:1px solid var(--azul-borda);border-radius:10px;background:var(--azul-claro); font-family:inherit;cursor:pointer;color:var(--azul-escuro); } .opcao-cep strong{font-size:14.5px} .opcao-cep span{font-size:12.5px;color:var(--tinta-suave)} .opcao-cep:active{background:#dceefa} /* anexo do Score em PDF */ .anexo-pdf{ display:flex;align-items:center;justify-content:center;text-align:center; text-decoration:none;color:var(--azul-escuro);font-size:12px;font-weight:700;line-height:1.5; } .anexo-pdf span{display:block;font-size:20px;line-height:1.3} /* painel de filtros avançados */ .abrir-filtros{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px; padding:11px 14px;margin-bottom:12px;border-radius:10px;cursor:pointer;font-family:inherit; border:1px solid var(--linha);background:var(--painel); font-size:13.5px;font-weight:600;color:var(--tinta-suave); } .abrir-filtros.com-filtro{ border-color:var(--azul);background:var(--azul-claro);color:var(--azul-escuro); } .painel-filtros{ background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio); padding:14px;margin-bottom:12px;box-shadow:var(--sombra); } .painel-filtros .campo{margin-bottom:12px} .atalhos-data{display:flex;gap:6px;flex-wrap:wrap} .atalhos-data .filtro{cursor:pointer;font-family:inherit} .contagem{ font-size:12.5px;font-weight:700;color:var(--tinta-suave); margin:0 0 10px 2px; } /* relatórios */ .grade-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px} .numero{ background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio); padding:13px 14px;box-shadow:var(--sombra); } .numero b{display:block;font-size:26px;line-height:1.15;color:var(--azul-escuro)} .numero span{display:block;font-size:12px;color:var(--tinta-suave);margin-top:3px;line-height:1.35} .linha-rank{margin-bottom:13px} .linha-rank:last-child{margin-bottom:0} .rank-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px} .rank-nome{font-size:14px;font-weight:600;word-break:break-word} .rank-qtd{font-size:12.5px;color:var(--tinta-suave);font-weight:600;white-space:nowrap;flex-shrink:0} .rank-barra{height:7px;border-radius:999px;background:var(--espera-fundo);overflow:hidden} .rank-barra span{display:block;height:100%;border-radius:999px;background:var(--azul);min-width:3px} /* ------------------------------------------------------------- mapa */ /* O mapa é desenhado à mão (sem biblioteca): uma camada de imagens do mapa e um canvas por cima com a rede da Teutonet. */ .mapa-caixa{ position:relative;height:320px;border:1px solid var(--linha);border-radius:var(--raio); overflow:hidden;background:#e9eff2;touch-action:none;cursor:crosshair;user-select:none; } /* As imagens do mapa não recebem dedo nenhum: quem recebe é a caixa. Não é enfeite. Elas nascem e somem a cada mudança de nível, e o dedo que começou o gesto em cima de uma delas ficava preso a um elemento que saiu da tela no meio do caminho - o resto da pinça não chegava mais ao mapa, que parava de acompanhar os dedos na metade do gesto. A caixa, essa, fica. */ .mapa-tiles,.mapa-tiles img{pointer-events:none} .mapa-tiles{position:absolute;inset:0} .mapa-tiles img{ position:absolute;width:256px;height:256px;-webkit-user-drag:none;user-select:none; } .mapa-tiles img.falhou{opacity:0} .mapa-pintura{position:absolute;inset:0;pointer-events:none} .mapa-credito{ position:absolute;right:0;bottom:0;background:rgba(255,255,255,.82);color:#5a6b75; font-size:10px;padding:2px 6px;border-radius:6px 0 0 0;pointer-events:none; } .mapa-controles{ position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:3; pointer-events:auto; } .botao-mapa{ width:36px;height:36px;border-radius:9px;border:1px solid var(--linha); background:rgba(255,255,255,.96);font-size:19px;font-weight:700;color:var(--azul-escuro); cursor:pointer;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.14); display:flex;align-items:center;justify-content:center; } .mapa-dica{ font-size:12.5px;color:var(--tinta-suave);margin:8px 0 10px;line-height:1.5; } .mapa-dica.atencao{ background:var(--alerta-fundo);color:var(--alerta);border-radius:9px;padding:9px 11px; } .gps.mao .ponto{background:var(--azul);box-shadow:0 0 0 4px var(--azul-claro)} /* CTOs próximas, na tela do técnico */ .cto-perto{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:12px 13px;border:1px solid var(--linha);border-radius:10px;margin-bottom:8px; cursor:pointer;background:var(--painel); } .cto-perto b{color:var(--azul-escuro);font-size:15px} .cto-perto span{color:var(--tinta-suave);font-size:12.5px;text-align:right;white-space:nowrap} .cto-perto.marcada{border-color:var(--azul);background:var(--azul-claro); box-shadow:0 0 0 1px var(--azul)} .marca-aviso{ display:inline-block;background:var(--alerta-fundo);color:var(--alerta);border-radius:6px; padding:2px 7px;font-size:11px;font-weight:700;margin-left:6px;vertical-align:middle; } .linha-cidade{ display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--linha); font-size:14px; } .linha-cidade:last-child{border-bottom:none} .linha-cidade b{color:var(--azul-escuro)} /* ------------------------------------------------- projeto de rede --- * * O app inteiro e estreito (760px) porque nasceu para o celular do * tecnico. A tela de desenho e a excecao da casa: ela e do computador, e * num monitor grande um mapa espremido em 760px joga fora dois tercos da * tela. Por isso a largura maior e o mapa alto valem SO aqui - nada do * resto do app muda. */ .conteudo.largo{max-width:1600px} .projeto-quadro{margin-bottom:0;padding:8px} /* o mapa ocupa o que sobra da altura da janela: desenhar rede pedindo rolagem a cada dois cliques e o caminho para abandonar a ferramenta */ .projeto-quadro .mapa-caixa{height:calc(100vh - 132px);min-height:420px} /* quem so olha o mapa leva a barra de abas junto, e ela come altura */ .projeto-quadro.com-abas .mapa-caixa{height:calc(100vh - 186px)} @media (max-width:900px){ .projeto-quadro .mapa-caixa{height:70vh;min-height:340px} .projeto-quadro.com-abas .mapa-caixa{height:64vh} } /* tudo que flutua sobre o mapa. O criarMapa olha esta classe para saber que um clique aqui nao e um clique no mapa */ .mapa-sobreposto{position:absolute;z-index:4} /* Janela de criacao. O app nao tinha nenhuma ate agora - tudo era tela inteira, que serve no celular. No computador, sair da tela do mapa para digitar dois campos e perder o lugar onde se estava desenhando. */ .janela-fundo{ position:fixed;inset:0;background:rgba(18,56,76,.45);z-index:60; display:flex;align-items:center;justify-content:center;padding:16px; } /* * A janela ROLA POR DENTRO quando nao cabe na tela. * * Sem isto ela crescia para fora do fundo escuro, que e position:fixed e * nao rola: no celular, bastava anexar uma foto na pendencia para a tela * travar - dava para apertar os botoes que sobraram a vista e mais nada. * Valia para qualquer janela alta, nao so a da pendencia. * * O max-height aparece duas vezes de proposito: no celular a barra de * endereco entra e sai e o 100vh mede a tela INTEIRA, escondendo um pedaco * atras dela. O 100dvh mede o que esta visivel agora; quem entende o dvh * usa a segunda linha, quem nao entende fica com a primeira. * * overscroll-behavior:contain para o rolar da janela nao passar para a * tela de tras quando chega no fim. */ .janela{ background:var(--painel);border-radius:var(--raio);border:1px solid var(--linha); box-shadow:0 12px 40px rgba(0,0,0,.22);padding:18px;width:100%;max-width:400px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; } .janela h3{margin:0 0 4px;font-size:17px;color:var(--azul-escuro)} .janela .onde{font-size:13px;color:var(--tinta-suave);margin-bottom:14px} .janela .botao-linha{margin-top:14px} /* Paleta de ferramentas. Sempre a vista, uma por linha - desenhar rede sao centenas de cliques, e um menu que abre e fecha cobraria um clique a mais em cada um. As ferramentas que ainda nao existem ficam apagadas para o caminho ficar claro. */ /* * Barra de ferramentas: faixa fina de icones, que abre com o mouse em cima * e pode ser travada aberta pelo alfinete. * * Foi tentado antes o menu que abre e fecha a cada uso, e nao serve: * desenhar rede sao centenas de cliques e o menu cobraria um a mais em * cada um. Tambem foi tentada a barra grande sempre aberta, e ela come * campo de visao de quem so quer OLHAR a rede pronta. A faixa resolve as * duas: o icone esta sempre a um clique, e o nome aparece so quando * precisa. */ .ferramentas{ left:10px;top:10px;display:flex;flex-direction:column;gap:4px; width:52px;overflow:hidden; background:rgba(255,255,255,.92);backdrop-filter:blur(3px); padding:6px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.18); transition:width .13s ease; } .ferramentas:hover,.ferramentas.fixada{width:180px} .alfinete{ align-self:flex-end;width:26px;height:26px;flex:0 0 auto; display:flex;align-items:center;justify-content:center; border:none;border-radius:7px;background:transparent;cursor:pointer; color:var(--tinta-suave);opacity:0;transition:opacity .13s ease; } /* o alfinete so aparece quando a barra esta aberta: fechada, ele so ocuparia espaco e confundiria com uma ferramenta */ .ferramentas:hover .alfinete,.ferramentas.fixada .alfinete{opacity:1} .alfinete:hover{background:var(--azul-claro);color:var(--azul-escuro)} .alfinete.ativo{background:var(--azul);color:#fff;opacity:1} .ferramenta{ display:flex;align-items:center;gap:10px; padding:8px;border-radius:9px;border:1px solid transparent; background:transparent;color:var(--tinta);font-family:inherit;font-size:14px; font-weight:600;cursor:pointer;text-align:left;white-space:nowrap; } .ferramenta svg{flex:0 0 auto} .ferramenta span{flex:1;opacity:0;transition:opacity .13s ease} .ferramenta em{ font-style:normal;font-size:10.5px;font-weight:600;color:var(--tinta-suave); opacity:0;transition:opacity .13s ease; } .ferramentas:hover .ferramenta span,.ferramentas.fixada .ferramenta span, .ferramentas:hover .ferramenta em,.ferramentas.fixada .ferramenta em{opacity:1} .ferramenta:hover:not(:disabled){border-color:var(--azul);background:var(--azul-claro)} .ferramenta.ativa{ border-color:var(--azul);background:var(--azul);color:#fff; box-shadow:0 2px 8px rgba(43,140,196,.35); } .ferramenta.ativa em{color:rgba(255,255,255,.8)} .ferramenta:disabled{opacity:.45;cursor:not-allowed} /* busca: o jeito de achar a CTO 200 no meio de sete cidades desenhadas */ .mapa-busca{right:10px;top:10px;width:260px} .mapa-busca input{ width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--linha); background:rgba(255,255,255,.95);font-family:inherit;font-size:14px; box-shadow:0 2px 10px rgba(0,0,0,.18); } .achados{ margin-top:6px;background:#fff;border:1px solid var(--linha);border-radius:10px; overflow:hidden;max-height:280px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,.18); } .achado{ display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%; padding:9px 12px;border:none;border-bottom:1px solid var(--linha);background:#fff; font-family:inherit;font-size:14px;font-weight:600;color:var(--tinta); cursor:pointer;text-align:left; } .achado:last-child{border-bottom:none} .achado:hover{background:var(--azul-claro)} .achado em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--tinta-suave)} .achado.vazio{color:var(--tinta-suave);font-weight:600;cursor:default} /* painel de acao do elemento clicado no modo 'ver' (mover / apagar). Fica no topo central para nao brigar nem com a barra de ferramentas (esquerda) nem com a busca (direita). */ .mapa-selecao{ left:50%;top:10px;transform:translateX(-50%); display:flex;align-items:center;gap:8px;white-space:nowrap; background:rgba(255,255,255,.95);padding:8px 10px 8px 14px;border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.18);font-size:13.5px;font-weight:700;color:var(--tinta); } .mapa-selecao button{ width:auto;display:inline-block;margin-top:0;padding:7px 12px; font-size:13px;font-weight:700;border-radius:8px;border:none; cursor:pointer;font-family:inherit; } /* o que o elemento e, para quem so olha o mapa */ .mapa-selecao .selecao-det{ font-style:normal;font-weight:600;font-size:12.5px;color:var(--tinta-suave); max-width:280px;overflow:hidden;text-overflow:ellipsis; } .mapa-selecao .selecao-det:empty{display:none} .mapa-selecao .botao-secundario{background:var(--painel);color:var(--tinta);border:1px solid var(--linha)} .mapa-selecao .botao-perigo{background:var(--perigo-fundo);color:var(--perigo)} /* recado do modo atual, no rodape do mapa para nao tapar o desenho */ .mapa-recado{ left:10px;bottom:10px;max-width:60%;font-size:12.5px;color:var(--tinta-suave); background:rgba(255,255,255,.9);padding:7px 11px;border-radius:9px; box-shadow:0 2px 8px rgba(0,0,0,.14); } /* no celular nao cabem os dois lado a lado: o recado sobe para cima dos botoes em vez de ficar por baixo deles, ilegivel */ @media (max-width:640px){ .mapa-recado{max-width:none;right:10px;bottom:56px;font-size:12px} } /* botoes no rodape direito do mapa (conferencia e cadastros) */ .mapa-rodape-dir{right:10px;bottom:10px;display:flex;gap:8px} .botao-mapa.largo{ width:auto;height:auto;padding:8px 12px;font-size:13px;font-weight:600; gap:7px;white-space:nowrap; } /* ------------------------------------------------------------ pendências */ /* resolvida fica apagada: a fila que importa e a das abertas */ .cartao.pendencia{cursor:pointer} .cartao.pendencia.resolvida{opacity:.62} .cartao.pendencia:hover{border-color:var(--azul)} .pendencia-texto{ margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--tinta);white-space:pre-wrap; } .pendencia-fotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .pendencia-fotos img{ width:104px;height:104px;object-fit:cover;border-radius:10px;border:1px solid var(--linha); } /* o lugar escolhido na nova pendencia */ .np-lugar{ display:flex;flex-direction:column;gap:2px; padding:10px 12px;border-radius:10px;font-size:14px; background:var(--alerta-fundo);color:var(--alerta); } .np-lugar.ok{background:var(--ok-fundo);color:#146c3a} .np-lugar em{font-style:normal;font-size:12px;opacity:.8} .np-foto{position:relative} .np-foto button{ position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%; border:none;background:var(--perigo);color:#fff;font-size:15px;line-height:1; cursor:pointer;font-family:inherit; } /* janela de icones: uma linha por tipo de elemento */ .aparencias{margin-top:4px} .aparencia-linha{ display:flex;align-items:center;gap:10px;padding:9px 0; border-bottom:1px solid var(--linha);font-size:14px; } .aparencia-linha:last-child{border-bottom:none} .aparencia-nome{font-weight:700;flex:0 0 118px} .aparencia-linha select{ flex:1;min-width:0;padding:7px 9px;border-radius:8px;border:1px solid var(--linha); background:var(--painel);font-family:inherit;font-size:13.5px;color:var(--tinta); } .aparencia-linha input[type=color]{ width:38px;height:32px;flex:0 0 auto;padding:2px;cursor:pointer; border:1px solid var(--linha);border-radius:8px;background:var(--painel); } .aparencia-nome-no-mapa{ display:flex;align-items:center;gap:6px;flex:0 0 auto; font-size:13px;font-weight:600;color:var(--tinta-suave);cursor:pointer; } .aparencia-nome-no-mapa input{width:16px;height:16px;cursor:pointer} /* janela do cadastro: mais larga que a de criar CEO, porque tem lista */ .janela.larga{max-width:560px} .tipos{max-height:230px;overflow:auto;margin-top:4px} .tipo-linha{ display:flex;align-items:center;gap:10px;padding:7px 0; border-bottom:1px solid var(--linha);font-size:14px; } .tipo-linha:last-child{border-bottom:none} .tipo-cor{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.18);flex:0 0 auto} .tipo-nome{font-weight:700;min-width:64px} .tipo-det{color:var(--tinta-suave);font-size:12.5px;flex:1} .tipo-linha .botao{display:inline-block;width:auto;margin-top:0;padding:5px 11px;font-size:12.5px} .janela input[type=color]{padding:2px;height:40px} /* cada caixa que o cabo toca vira um blocozinho na janela de criacao */ .parada{ border:1px solid var(--linha);border-radius:10px;padding:10px 12px;margin-top:8px; background:#fbfcfd; } .parada-nome{font-weight:700;font-size:14px;color:var(--azul-escuro)} .parada-nome em{ font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.4px;color:var(--tinta-suave);margin-left:6px; } .parada-det{font-size:12.5px;color:var(--tinta-suave);margin-top:4px;line-height:1.5} .parada-det b{color:var(--alerta)} .parada .campo{margin-top:8px;margin-bottom:0} /* ---------------------------------------- prioridade e mídia da pendência */ /* * A prioridade é para ser lida de longe, com o celular na mão e o sol * batendo na tela: cor cheia, texto curto. Urgente é o único vermelho da * lista - se tudo gritar, nada grita. */ .pend-etiquetas{display:flex;flex-direction:column;align-items:flex-end;gap:5px} .prioridade{ display:inline-block;padding:3px 9px;border-radius:999px; font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px; border:1px solid transparent;font-family:inherit; } .prioridade.urgente{background:var(--perigo-fundo);color:var(--perigo)} .prioridade.normal{background:var(--azul-claro);color:var(--azul-escuro)} .prioridade.baixa{background:#eef0f2;color:#5a6b75} /* na janela, as mesmas etiquetas viram botões de escolha */ .prioridade-escolha{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .prioridade-escolha .prioridade{cursor:pointer;opacity:.55} .prioridade-escolha .prioridade:hover{opacity:.85} .prioridade-escolha .prioridade.ativa{opacity:1;border-color:currentColor} .prioridade.limpar{background:transparent;color:var(--tinta-suave);border-color:var(--linha)} /* vídeo e áudio, na janela de ver e na de abrir */ .pendencia-midia{width:100%;margin-top:12px;border-radius:10px;display:block} video.pendencia-midia{background:#000;max-height:60vh} .np-midia{margin-top:10px} .np-midia video,.np-midia audio{width:100%;border-radius:10px;display:block} .np-midia video{background:#000;max-height:40vh} .np-midia-pe{ display:flex;justify-content:space-between;align-items:center; font-size:12.5px;color:var(--tinta-suave);margin-top:4px; } .np-midia-pe button{ border:none;background:none;color:var(--perigo);font-size:12.5px;font-weight:600; cursor:pointer;font-family:inherit;padding:2px 4px; } /* ------------------------------------ administrativo: grupos e permissões */ /* Mesma linguagem do resto do app: cartão, etiqueta redonda, caixinha de marcar igual à da tela de Avisos. Nada de cor nova - só os tokens. */ .grupo-linha{display:flex;gap:12px;align-items:center} .grupo-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .grupo-titulo{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .grupo-nome{font-weight:700;font-size:15.5px} .grupo-conta{font-size:12.5px;color:var(--tinta-suave)} .grupo-explica{font-size:13px;color:var(--tinta-suave)} .grupo-resumo{display:flex;gap:6px;flex-wrap:wrap} .grupo-resumo span{ font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px; background:var(--azul-claro);color:var(--azul-escuro);border:1px solid var(--azul-borda); } .grupo-resumo span.tudo{background:var(--bg);color:var(--tinta);border-color:var(--linha)} .grupo-resumo span.nada{background:var(--espera-fundo);color:var(--espera);border-color:var(--linha)} .seta{flex-shrink:0;color:#9aa7b2;display:flex} .etiqueta.protegido{background:var(--azul-claro);color:var(--azul-escuro);display:inline-flex;align-items:center;gap:4px} .etiqueta.com-acesso{background:var(--ok-fundo);color:var(--ok)} .etiqueta.sem-acesso{background:var(--espera-fundo);color:var(--espera)} .modulo-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .modulo-nome{font-weight:700;font-size:15.5px} .modulo-fechado{ display:flex;align-items:center;gap:10px;width:100%; background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left; } .modulo-fechado .modulo-nome{flex:1} .modulo-divisa{border-top:1px solid var(--linha);margin:14px 0 12px} .modulo-subtitulo{font-size:13px;font-weight:700;color:var(--tinta-suave);margin-bottom:10px} .permissoes{display:flex;flex-direction:column;gap:12px} .permissao{display:flex;align-items:flex-start;gap:12px;cursor:pointer} .permissao input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--azul)} .permissao.travada{cursor:default} .permissao-titulo{font-weight:700;font-size:14.5px} .permissao-texto{font-size:13px;color:var(--tinta-suave)} .permissao-motivo{font-size:12px;color:var(--azul-escuro);margin-top:4px} .cartao.travado{padding:0;overflow:hidden} .travado-linha{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--linha)} .travado-linha:last-child{border-bottom:none} .travado-linha strong{flex:1;font-size:15px} .travado-linha span{font-size:13px;color:var(--tinta-suave);text-align:right} .aviso.com-icone{display:flex;gap:10px;align-items:flex-start} .aviso.com-icone svg{flex-shrink:0;margin-top:2px} .rotulo-linha{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px} .rotulo-linha label{margin-bottom:0} .link-acao{ border:none;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:700; color:var(--azul);cursor:pointer; } /* ------------------------------------------------ menu lateral (Etapa 4) * * Um elemento só para as duas larguras. No computador (900px ou mais) ele * fica fixo à esquerda e a tela anda para o lado. Abaixo disso vira gaveta: * guardado fora da tela, desliza por cima quando o botão de menu é tocado. */ .menu-lateral{ position:fixed;top:0;bottom:0;left:0;z-index:50;width:248px; padding-top:env(safe-area-inset-top); background:var(--painel);border-right:1px solid var(--linha); display:flex;flex-direction:column; } body.com-barra .menu-lateral{top:var(--altura-barra);padding-top:0} .menu-topo{ flex-shrink:0;height:53px;padding:0 8px 0 16px; display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--linha); } .menu-topo img{height:28px;width:auto;display:block} /* o "t" sozinho: so aparece quando o menu esta recolhido, onde a marca inteira nao cabe na faixa e vazava por cima do cabecalho */ .menu-topo .menu-t{display:none} .menu-hub{ font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--azul-escuro);background:var(--azul-claro);border-radius:999px;padding:3px 8px; } .menu-fechar{ display:none;margin-left:auto;width:44px;height:44px;border:none;border-radius:10px; background:transparent;color:var(--tinta-suave);cursor:pointer; align-items:center;justify-content:center; } .menu-lista{ flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:12px 10px;display:flex;flex-direction:column;gap:8px; } .menu-modulo{display:flex;flex-direction:column;gap:2px} .menu-item,.menu-mod{ display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px; border:none;border-radius:10px;background:transparent;text-align:left; font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;color:var(--tinta); } .menu-item{cursor:pointer} .menu-item:hover{background:var(--bg)} .menu-item:focus-visible,.menu-fechar:focus-visible,.menu-sair:focus-visible,.botao-menu:focus-visible{ outline:2px solid var(--azul);outline-offset:1px; } .menu-icone{width:18px;height:18px;flex-shrink:0;color:var(--tinta-suave)} .menu-mod.aberto .menu-icone,.menu-item.ativa .menu-icone{color:var(--azul)} .menu-sub{padding:7px 10px 7px 38px;font-size:13.5px;color:var(--tinta-suave)} .menu-item.ativa{background:var(--azul-claro);color:var(--azul-escuro);font-weight:700} .menu-pe{ flex-shrink:0;border-top:1px solid var(--linha); padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;gap:4px; } .menu-quem{display:flex;align-items:center;gap:10px;padding:8px 10px} /* o nome é botão (abre "Minha conta"), mas continua com cara de nome: o sublinhado discreto é o que conta que dá para tocar */ .menu-quem-texto{ flex:1;min-width:0;border:none;background:transparent;padding:4px 6px;margin:-4px -6px; border-radius:8px;text-align:left;font-family:inherit;color:inherit;cursor:pointer; } .menu-quem-texto:hover{background:var(--bg)} .menu-quem-texto:hover .menu-quem-nome{text-decoration:underline;text-underline-offset:3px} .menu-quem-texto:focus-visible{outline:2px solid var(--azul);outline-offset:1px} .menu-quem-nome{font-size:13.5px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .menu-quem-grupo{font-size:12px;color:var(--tinta-suave);line-height:1.25} .menu-sair{ flex-shrink:0;display:flex;align-items:center;gap:5px;border:none;background:transparent; padding:6px 0;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--azul);cursor:pointer; } .menu-fundo{display:none} /* o alfinete: só no computador, onde o menu fica à mostra */ .menu-alfinete{ display:none;margin-left:auto;width:32px;height:32px;border:none;border-radius:8px; background:transparent;color:var(--tinta-suave);cursor:pointer; align-items:center;justify-content:center; } .menu-alfinete:hover{background:var(--bg);color:var(--tinta)} body.menu-solto .menu-alfinete{transform:rotate(45deg)} /* margem negativa: o botão tem tamanho de dedo sem engordar o cabeçalho */ .botao-menu{ display:none;flex-shrink:0;width:44px;height:44px;margin:-10px 0 -10px -10px; border:none;border-radius:10px;background:transparent;color:var(--tinta);cursor:pointer; align-items:center;justify-content:center; } /* pedidos de senha nova (v1.40.0): o número no item "Usuários e grupos" e, onde ele não aparece (menu solto, gaveta fechada no celular), um ponto */ .menu-selo{ margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px; background:var(--perigo);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center; } .menu-mod.com-selo,.botao-menu.com-selo{position:relative} .menu-mod.com-selo::after,.botao-menu.com-selo::after{ content:"";position:absolute;width:9px;height:9px;border-radius:50%; background:var(--perigo);box-shadow:0 0 0 2px var(--painel); } .menu-mod.com-selo::after{left:26px;top:8px} .botao-menu.com-selo::after{right:8px;top:9px} .login-link{display:block;margin:18px auto 0;font-size:14px} .login-explica{font-size:14px;color:var(--tinta-suave);margin:0 0 16px;line-height:1.45} .cartao-senhas{border-color:var(--alerta);background:var(--alerta-fundo)} .cartao-senhas > .dica{margin:2px 0 4px} .senha-pedida{border-top:1px solid rgba(192,120,0,.25);margin-top:12px;padding-top:12px} .senha-pedida .botao-linha{margin-top:10px} @media (min-width:900px){ body.com-menu .tela{padding-left:248px} .menu-alfinete{display:flex} .menu-alfinete:focus-visible{outline:2px solid var(--azul);outline-offset:1px} /* MENU SOLTO: faixa de ícones; o menu abre por cima quando o mouse chega. O foco conta só quando é de TECLADO (:focus-visible): com :focus-within, o simples clique no alfinete deixava o foco no botão e o menu não encolhia. */ body.com-menu.menu-solto .tela{padding-left:60px} body.menu-solto .menu-lateral{width:60px;transition:width .18s ease} body.menu-solto .menu-lateral:hover, body.menu-solto .menu-lateral:has(:focus-visible){width:248px;box-shadow:0 10px 40px rgba(29,43,54,.18)} body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-hub, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-alfinete, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-sub, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-quem-texto, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-item span, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-mod span, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-sair span{display:none} body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-topo{padding:0;justify-content:center} body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-logo{display:none} body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-t{display:block;height:26px} body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-lista{padding:12px 6px} body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-item, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-mod, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-quem, body.menu-solto .menu-lateral:not(:hover):not(:has(:focus-visible)) .menu-sair{justify-content:center;padding-left:0;padding-right:0} /* o logotipo do menu já está à vista; o "t" do cabeçalho ficaria repetido */ body.com-menu .cabecalho .inicio{display:none} body.com-menu .cabecalho{min-height:53px} } @media (max-width:899.98px){ /* no celular o menu é gaveta: o alfinete não faz sentido */ .menu-alfinete{display:none !important} .menu-lateral{ width:300px;max-width:86vw;border-right:none; transform:translateX(-102%);visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s; } body.menu-aberto .menu-lateral{ transform:none;visibility:visible;transition:transform .22s ease; box-shadow:0 10px 40px rgba(29,43,54,.25); } body.menu-aberto .menu-fundo{ display:block;position:fixed;inset:0;z-index:45;background:rgba(29,43,54,.45); } .menu-topo{height:65px} .menu-fechar,.botao-menu{display:flex} .menu-lista{padding:10px;gap:6px} .menu-item,.menu-mod{min-height:44px;padding-top:0;padding-bottom:0;font-size:15px} .menu-sub{font-size:14.5px} .menu-icone{width:20px;height:20px} .menu-sair{min-height:44px} } @media (prefers-reduced-motion:reduce){ .menu-lateral{transition:none !important} } /* "sem acesso" (Etapa 4c): o endereço de uma tela que o grupo não tem */ .tela-sem-acesso{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:48px 12px 16px} .tela-sem-acesso-icone{ width:60px;height:60px;border-radius:50%;background:var(--azul-claro);color:var(--azul); display:flex;align-items:center;justify-content:center; } .tela-sem-acesso-titulo{margin:0;font-size:17px;font-weight:700;line-height:1.3;text-wrap:balance} .tela-sem-acesso-texto{margin:0;font-size:14px;line-height:1.5;color:var(--tinta-suave);max-width:320px} .tela-sem-acesso .botao{max-width:360px;margin-top:10px}