proprio — os blocos condicionais do Blaze ficam filhos directos da grelha, e um

extra a volta partia a fila. O .yb-act (app.scss:651) ja trata do botao em si: coluna, largura 100% e icone fixo em 26px que anula o fa-3x do HTML. Aqui so se trata do arranjo. */ .ds-dracts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 14px 0 4px; clear: both; /* os .col-* anteriores deixam floats */ /* meia largura */ /* um terco */ /* largura toda */ /* O .btn do Bootstrap traz margens que descoseriam a grelha. */ } .ds-dracts > .ds-dract-2 { grid-column: span 3; } .ds-dracts > .ds-dract-3 { grid-column: span 2; } .ds-dracts > .ds-dract-6 { grid-column: 1 / -1; } .ds-dracts > .yb-act { margin: 0 !important; min-width: 0; } /* ---- Botoes de icone: centrar o glifo ------------------------------------- O .btn-flat-icon centra o icone com um truque antigo (buttons-extra.scss:65): height 32px + line-height 32px no , com padding 0. So funciona enquanto ninguem lhe acrescentar padding — e a regra das tabelas de guias, aqui em baixo, acrescenta. Com box-sizing: border-box a caixa de conteudo cai para 24px a comecar 4px abaixo, e o continua a exigir uma linha de 32px: o glifo transborda por baixo e o icone aparece encostado ao fundo. Passa a centrar por flexbox, que nao depende de o padding ser zero. Mesma especificidade da regra original e mais abaixo no ficheiro, portanto ganha. */ .btn-flat.btn-flat-icon { display: inline-flex; align-items: center; justify-content: center; } .btn-flat.btn-flat-icon > em { line-height: 1; } /* ---- Assinatura do ponto -------------------------------------------------- Serve os dois lados: o detalhe do ponto no backoffice (points.html) e o ponto aberto do estafeta (myPoints.html). A assinatura e traco escuro sobre fundo transparente, por isso o fundo TEM de ser claro nos dois temas — no escuro, sobre a cor da pagina, era traco preto sobre quase preto. */ .ds-sigrow { margin-top: 10px; } .ds-sigbox { margin-top: 10px; padding: 10px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-s); background-color: #fff; text-align: center; } .ds-sigbox > img { max-width: 100%; max-height: 40vh; display: block; margin: 0 auto 10px; } /* ---- Tipo do ponto: recolha ou entrega (myPoints) ------------------------- As cores vem das variaveis definidas em datatable.scss (.collectionColorBG / .deliveryColorBG). A barra da esquerda existe para quando o cracha ja saiu do ecra: a rolar, continua a dizer-lhe em que tipo de ponto esta. */ .ds-point { border-left: 4px solid var(--pt-cor, transparent); border-radius: 9px; background-color: var(--pt-fundo, transparent); } /* No ponto ja executado a barra vai no .media, que nao tem o .ds-point. */ .media.collectionColorBG, .media.deliveryColorBG { border-left: 4px solid var(--pt-cor, transparent); padding-left: 10px; } .ds-ptbadge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background-color: var(--pt-cor, var(--ds-muted)); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .ds-ptbadge > i { font-size: 14px; } /* O botao que fecha o ponto. Em linha — icone ao lado do texto — para ocupar a largura toda sem ficar alto, e assim distingue-se dos outros a olho. */ .yb-act--wide { flex-direction: row !important; min-height: 58px; gap: 10px; } .yb-act--wide > i, .yb-act--wide > i.fa { margin-bottom: 0 !important; } .yb-act--wide > span { font-size: 14px !important; } /* ---- Barras de rolamento -------------------------------------------------- Nao havia UMA unica regra de scrollbar em todo o projecto. O que se via eram as barras do sistema: 15px de largura, cinzento claro, desenhadas para um fundo branco. No tema escuro chamavam mais a atencao do que o conteudo, e onde apareciam duas lado a lado o efeito duplicava. Finas, sem setas, arredondadas e com a cor a sair da paleta do tema. O truque do `border` transparente com `background-clip: content-box` e o que da a folga a volta do polegar: sem ele a barra fica encostada as margens e volta a parecer uma peca do sistema operativo colada por cima da aplicacao. Deliberadamente GLOBAL: serve a pagina, as tabelas largas, a barra lateral e as caixas de dialogo, porque o incomodo e o mesmo em todas. */ html { scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(123, 135, 148, 0.45) transparent; /* polegar / calha */ } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(123, 135, 148, 0.45); border-radius: 12px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(123, 135, 148, 0.72); } /* Tema escuro: claro sobre escuro, e com menos opacidade — sobre um fundo escuro o mesmo contraste pesa muito mais do que sobre branco. */ body.theme-3 { scrollbar-color: rgba(220, 230, 240, 0.26) transparent; } .theme-3 ::-webkit-scrollbar-thumb { background-color: rgba(220, 230, 240, 0.26); } .theme-3 ::-webkit-scrollbar-thumb:hover { background-color: rgba(220, 230, 240, 0.48); } /* ---- Colunas de accao fixas a direita (tabelas largas) -------------------- Nas tabelas de servicos as accoes vivem nas tres ultimas colunas — motorista e respostas, mapa, editar e cancelar. Com vinte e sete colunas, chegar la obrigava a rolar ate ao fim da tabela para apanhar a barra horizontal, puxar para a direita e voltar a subir a procura da linha certa. As tres passam a acompanhar a margem direita, como a primeira ja acompanha a esquerda. Fixam-se as TRES, e nao so a dos botoes: se fosse so essa, as duas a direita dela ficariam permanentemente escondidas por baixo. O `right` de cada uma depende da largura das que estao a sua direita, e essas larguras so se sabem em execucao. Vem em variaveis que o wideTablePin.js calcula e escreve no contentor — tres propriedades num elemento, e nao um estilo em cada celula de cada linha. SO com a classe .is-x, que o mesmo modulo poe apenas quando a tabela nao cabe na largura visivel. Em ecra grande, onde se ve tudo, nao ha nada a fixar. */ .ds-wide-wrap.is-pin .ds-wide > thead > tr > th.ds-wide-pin-1, .ds-wide-wrap.is-pin .ds-wide > tbody > tr > td.ds-wide-pin-1 { position: sticky; right: var(--pin1, 0px); } .ds-wide-wrap.is-pin .ds-wide > thead > tr > th.ds-wide-pin-2, .ds-wide-wrap.is-pin .ds-wide > tbody > tr > td.ds-wide-pin-2 { position: sticky; right: var(--pin2, 0px); } .ds-wide-wrap.is-pin .ds-wide > thead > tr > th.ds-wide-pin-3, .ds-wide-wrap.is-pin .ds-wide > tbody > tr > td.ds-wide-pin-3 { position: sticky; right: var(--pin3, 0px); } .ds-wide-wrap.is-pin .ds-wide > thead > tr > th[class*="ds-wide-pin-"], .ds-wide-wrap.is-pin .ds-wide > tbody > tr > td[class*="ds-wide-pin-"] { z-index: 2; /* Opaco por obrigacao: e o resto da linha que passa por baixo. Solido e nao var(--ds-card), que no tema escuro e rgba(255,255,255,.03). */ background: #ffffff; } .ds-wide-wrap.is-pin .ds-wide > thead > tr > th[class*="ds-wide-pin-"] { z-index: 3; } .theme-3 .ds-wide-wrap.is-pin .ds-wide > tbody > tr > td[class*="ds-wide-pin-"] { background: #35444c; } .theme-3 .ds-wide-wrap.is-pin .ds-wide.table-striped > tbody > tr:nth-of-type(odd) > td[class*="ds-wide-pin-"] { background: #3b4a51; } .theme-3 .ds-wide-wrap.is-pin .ds-wide > thead > tr > th[class*="ds-wide-pin-"] { background: #35444c; } /* A sombra a esquerda do bloco fixo diz que ha conteudo a passar por baixo — espelho da que a primeira coluna ja tem do lado de dentro. */ .ds-wide-wrap.is-pin .ds-wide > thead > tr > th.ds-wide-pin-1::before, .ds-wide-wrap.is-pin .ds-wide > tbody > tr > td.ds-wide-pin-1::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; transform: translateX(-100%); pointer-events: none; background: linear-gradient(to left, rgba(16, 25, 40, 0.1), rgba(16, 25, 40, 0)); } .theme-3 .ds-wide-wrap.is-pin .ds-wide > thead > tr > th.ds-wide-pin-1::before, .theme-3 .ds-wide-wrap.is-pin .ds-wide > tbody > tr > td.ds-wide-pin-1::before { background: linear-gradient(to left, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); } /* ---- Interruptores no tema escuro ---------------------------------------- O .switch desligado usa $ui-bg-color (#9e9e9e, cinzento claro) na pista e branco puro no botao, com sombra a condizer. Sobre fundo claro le-se como apagado; sobre o fundo escuro sao duas manchas claras a chamar a atencao para o estado que devia ser o discreto. So a COR muda. As medidas ficam onde estao (app.scss:78 para o geral, app.scss:807 para o .trackSwitch do rastreamento): ja tentei mexer-lhes uma vez e o resultado foi pior. O estado LIGADO nao se toca — e o que se quer ver de longe. */ .theme-3 .switch span { background-color: rgba(255, 255, 255, 0.14); } .theme-3 .switch span:after { background-color: #b6c2cd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); } /* Desactivado: mais apagado ainda que o desligado, senao os dois estados inertes ficam iguais. O !important acompanha o da regra original. */ .theme-3 .switch input:disabled + span { background-color: rgba(255, 255, 255, 0.07) !important; } .theme-3 .switch input:disabled + span:after { background-color: #7c8b98 !important; } /* ---- Espera do mapa ------------------------------------------------------- Ver imports/ui/components/maps/mapaEspera.js. A classe entra antes de o mapa ser criado e sai no `tilesloaded`; tudo o que se ve' esta' em ::before e ::after, para nao haver nos nossos dentro do contentor que a API do Google manipula. Os pseudo-elementos ficam POR CIMA dos filhos do mapa (sao gerados por ultimo na ordem do documento) — e' o que se quer enquanto carrega, e por isso e' que isto tem mesmo de sair por JS e nao ficar a espera de ser tapado. */ /* NAO se poe `position: relative` aqui. O contentor do rastreamento (.map-container, google-map.scss:199) e' `position: absolute`, e como o ds.scss carrega depois com a mesma especificidade, esta classe roubava-lhe a posicao e mudava-lhe o encaixe todo. Quem trata disto e' o JS, que so' mexe na posicao quando ela e' `static` — e a repoe ao sair. Ver mapaEspera.js. */ .ds-mapload::before { content: attr(data-mapload); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; /* Empurra o texto para baixo do centro, para o spinner (::after) ficar por cima dele sem os dois se sobreporem. */ padding-top: 44px; background: #eef1f5; color: #7b8794; font-size: 13px; letter-spacing: .01em; } .theme-3 .ds-mapload::before { /* Solido e nao um token: por baixo disto nao ha' cartao nenhum — ha' o mapa, ou nada. Um rgba translucido deixava passar o cinzento do Google. */ background: #1e2933; color: #9dabb9; } .ds-mapload::after { content: ''; position: absolute; z-index: 4; top: 50%; left: 50%; width: 26px; height: 26px; margin: -31px 0 0 -13px; /* -13 = metade da largura; -31 sobe-o do centro */ border-radius: 50%; border: 2px solid rgba(123, 135, 148, 0.28); border-top-color: var(--ds-green); animation: ds-mapload-spin .7s linear infinite; } .theme-3 .ds-mapload::after { border-color: rgba(255, 255, 255, 0.16); border-top-color: var(--ds-green); } @keyframes ds-mapload-spin { to { transform: rotate(360deg); } } /* Mapas pequenos (o cartao "Ver no mapa" tem 300px, mas os ha' mais baixos): abaixo desta altura o texto e o spinner nao cabem sem se pisarem. Fica so' o fundo, que ja' resolve o essencial. */ .ds-mapload.gmap-sm::before { padding-top: 0; font-size: 0; } .ds-mapload.gmap-sm::after { margin-top: -13px; } /* ---- Selectores de data e hora no tema escuro ----------------------------- Sao TRES coisas diferentes, e cada uma precisa da sua resposta: 1. — o calendario e' desenhado pelo BROWSER e nao ha' CSS nosso que lhe chegue. O que o Chromium aceita e' `color-scheme`, que lhe diz em que tema desenhar os controlos nativos. Sao 4 na aplicacao: leadsBoard, hrControl e os dois do mainLayout. 2. bootstrap-datepicker — o calendario do newService/rebuild (o campo Data e' type="text" com plugin). DOM proprio, logo estiliza-se. 3. clockpicker — o relogio redondo do campo Hora. Idem. */ /* 1. Nativos. Muda tambem o icone do calendario dentro do campo, que a` conta do tema claro saia preto sobre fundo escuro. */ .theme-3 input[type="date"], .theme-3 input[type="time"], .theme-3 input[type="datetime-local"], .theme-3 input[type="month"], .theme-3 input[type="week"] { color-scheme: dark; } /* 2. bootstrap-datepicker */ .theme-3 .datepicker { background: #26333f; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); color: var(--ds-ink); } .theme-3 .datepicker table tr td, .theme-3 .datepicker table tr th { color: var(--ds-ink); } .theme-3 .datepicker .datepicker-switch, .theme-3 .datepicker .prev, .theme-3 .datepicker .next { color: var(--ds-ink); } .theme-3 .datepicker table tr td.day:hover, .theme-3 .datepicker table tr td.focused, .theme-3 .datepicker .datepicker-switch:hover, .theme-3 .datepicker .prev:hover, .theme-3 .datepicker .next:hover, .theme-3 .datepicker tfoot tr th:hover { background: rgba(255, 255, 255, 0.1); } /* Dias de fora do mes: presentes mas apagados, como no tema claro. */ .theme-3 .datepicker table tr td.old, .theme-3 .datepicker table tr td.new { color: rgba(255, 255, 255, 0.32); } .theme-3 .datepicker table tr td.active, .theme-3 .datepicker table tr td.active:hover { background: var(--ds-green) !important; color: #1b2b0a !important; /* o lima e' claro: texto escuro por cima */ text-shadow: none; } .theme-3 .datepicker table tr td.today { background: rgba(190, 214, 47, 0.2); color: var(--ds-ink); } /* A seta do balao aponta para o campo e tem de acompanhar o fundo. */ .theme-3 .datepicker.datepicker-dropdown:before { border-bottom-color: rgba(255, 255, 255, 0.18); } .theme-3 .datepicker.datepicker-dropdown:after { border-bottom-color: #26333f; } /* 3. clockpicker */ .theme-3 .clockpicker-popover { background: #26333f; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); } .theme-3 .clockpicker-popover .popover-title { background: #202b35; color: var(--ds-ink); border-bottom-color: rgba(255, 255, 255, 0.1); } .theme-3 .clockpicker-popover .popover-content { background: #26333f; } /* O mostrador. O plate e' o circulo de fundo; os ticks sao os numeros. */ .theme-3 .clockpicker-plate { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); /* vinha #ccc, um anel claro no escuro */ } .theme-3 .clockpicker-tick { color: var(--ds-ink); } .theme-3 .clockpicker-tick:hover { background: rgba(255, 255, 255, 0.14); } .theme-3 .clockpicker-button { background: #202b35; color: var(--ds-ink); border-top-color: rgba(255, 255, 255, 0.1); } .theme-3 .clockpicker-button:hover { background: rgba(255, 255, 255, 0.1); } /* O ponteiro e o alvo. Estas classes estao nos PROPRIOS do SVG, nao em contentores — por isso o `fill` vai directo, sem descendente. A biblioteca pinta-os de azul (rgb(0,149,221)); passam ao lima da marca, que e' o que o resto da aplicacao usa para o que esta' seleccionado. */ .theme-3 .clockpicker-canvas line { stroke: var(--ds-green); } .theme-3 .clockpicker-canvas-fg, .theme-3 .clockpicker-canvas-bearing { fill: var(--ds-green); } .theme-3 .clockpicker-canvas-bg { fill: rgba(190, 214, 47, 0.32); } .theme-3 .clockpicker-canvas-bg-trans { fill: rgba(190, 214, 47, 0.22); } /* O numero por baixo do alvo tem de se ler sobre o lima, que e' claro. */ .theme-3 .clockpicker-tick.active, .theme-3 .clockpicker-tick:active { color: #1b2b0a; } /* ---- Mapas no tema escuro ------------------------------------------------- O mapa do Google e branco e forte; ao lado de uma interface escura o ecra fica com uma mancha luminosa que puxa o olho para o sitio errado. Alvo: o .gm-style, que e a raiz que a API do Google cria em TODAS as paginas com mapa. Os contentores da aplicacao chamam-se cada um a sua maneira — .map-container, .gmap, .ds-geomap, #map-markers — e uma lista desses ficaria desactualizada assim que se acrescentasse um mapa novo. E um atenuador, nao um tema escuro a serio: escurece TAMBEM os marcadores e as etiquetas, porque um filtro nao sabe distinguir camadas. Um tema escuro verdadeiro faz-se com o array `styles` da API, mas isso obriga a tocar em oito ficheiros e a mante-los a par. Para afinar mexe-se so no numero: 1 e o mapa como vem, valores mais baixos escurecem mais. Abaixo de .7 os marcadores comecam a perder-se. */ .theme-3 .gm-style { filter: brightness(0.86) saturate(0.92); } /* Os controlos e as janelas de informacao voltam ao normal: sao interface, nao mapa, e apagados custam a ler. */ .theme-3 .gm-style .gm-control-active, .theme-3 .gm-style .gm-style-iw, .theme-3 .gm-style .gm-style-iw-c, .theme-3 .gm-style .gm-svpc { filter: brightness(1.16) saturate(1.09); } /* ---- Listas de sugestoes no tema escuro ----------------------------------- O menu do typeahead tinha as cores fixas no google-map.scss:52 — fundo #ffffff, texto #333333 e o azul do Bootstrap no realce. Sobre uma pagina escura abria um rectangulo branco no meio do ecra. Fundo SOLIDO (#35444c) e nao var(--ds-card): no tema escuro esse token e rgba(255,255,255,.03), e uma lista que flutua por cima do conteudo tem de tapar o que passa por baixo — com fundo translucido liam-se as sugestoes sobrepostas ao texto da pagina. Sao DUAS familias de caixas de sugestoes no projecto: o typeahead, em 19 paginas, e o select2 no newService, no rebuildService e nas financas. */ /* --- typeahead --- */ .theme-3 span.twitter-typeahead .tt-menu, .theme-3 span.twitter-typeahead .tt-dropdown-menu { background-color: #35444c; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); } .theme-3 span.twitter-typeahead .tt-suggestion { color: var(--ds-text); } .theme-3 span.twitter-typeahead .tt-suggestion.tt-cursor, .theme-3 span.twitter-typeahead .tt-suggestion:hover, .theme-3 span.twitter-typeahead .tt-suggestion:focus { /* O azul do Bootstrap nao pertence a esta paleta. O verde da marca, esbatido, diz o mesmo sem introduzir uma cor que nao existe em mais lado nenhum. */ background-color: rgba(190, 214, 47, 0.18); color: var(--ds-ink); } /* O typeahead envolve em a parte que corresponde ao que se escreveu. */ .theme-3 span.twitter-typeahead .tt-suggestion strong, .theme-3 span.twitter-typeahead .tt-highlight { color: var(--ds-green); font-weight: 700; } /* --- select2 --- */ .theme-3 .select2-dropdown, .theme-3 .select2-container--default .select2-dropdown { background-color: #35444c; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); } .theme-3 .select2-container--default .select2-results__option { background-color: transparent; color: var(--ds-text); } .theme-3 .select2-container--default .select2-results__option[aria-selected="true"], .theme-3 .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: rgba(190, 214, 47, 0.18); color: var(--ds-ink); } /* A caixa de procura que o select2 abre dentro da propria lista. */ .theme-3 .select2-container--default .select2-search--dropdown .select2-search__field { background-color: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.18); color: var(--ds-text); } /* ---- Guardar localizacao (estafeta) --------------------------------------- Pagina usada na rua, num telemovel: uma lista de dez linhas no maximo, com o contador de vagas sempre a vista. */ .ds-mylocs-meter { margin: 14px 0 16px; } .ds-mylocs-meterbar { height: 6px; border-radius: 6px; background: var(--ds-grey); overflow: hidden; } .ds-mylocs-meterbar > span { display: block; height: 100%; background: var(--ds-green); transition: width .25s ease; } .ds-mylocs-metertxt { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12px; color: var(--ds-muted); } .ds-mylocs-metertxt > b { font-size: 15px; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .ds-mylocs-vagas { margin-left: auto; } .ds-mylocs-metertxt .ds-pill { margin-left: auto; } .ds-mylocs-save { width: 100%; min-height: 46px; } .ds-mylocs-save.disabled { opacity: .5; pointer-events: none; } .ds-mylocs-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ds-line); } .ds-mylocs-item:last-child { border-bottom: 0; } .ds-mylocs-when { display: flex; flex-direction: column; min-width: 0; } .ds-mylocs-when > b { font-size: 13.5px; color: var(--ds-ink); } .ds-mylocs-when > span { font-size: 12px; color: var(--ds-muted); font-variant-numeric: tabular-nums; } /* Segundo plano: continuam la para quem precisa, sem competir com a data. */ .ds-mylocs-coords { flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--ds-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ds-mylocs-acts { display: flex; gap: 6px; flex: 0 0 auto; } @media (max-width: 520px) { /* No telemovel as coordenadas passam para baixo, em vez de espremerem os botoes contra a data. */ .ds-mylocs-item { flex-wrap: wrap; } .ds-mylocs-coords { order: 3; flex-basis: 100%; } } /* ---- Caixas de confirmacao ------------------------------------------------- ATENCAO ao que renderiza. Ha TRES bibliotecas de popup neste projecto: sweetalert 1.1.3 npm, carregado como global (nao ha `import` dele em lado nenhum — procurar por import nao o encontra). Classes .sweet-alert / .sa-*. cleandersonlobo:sweetalert2 pacote Meteor. Classes .swal2-*. sweetalert2@11 CDN em client/head.html:12. Classes .swal2-* e variaveis --swal2-* no :root. Quem DESENHA os popups da aplicacao e o PRIMEIRO — confirmado no browser: o elemento tem `class="sweet-alert showSweetAlert visible"`. As outras duas estao carregadas e nao aparecem. As regras .swal2-* aqui em baixo ficam para o caso de alguma chamada usar essas, mas nao sao as que contam. O que NAO se toca: as cores dos botoes de confirmar. Vem em `confirmButtonColor` nas 61 chamadas espalhadas pelo codigo — verde da marca nas accoes construtivas, vermelho nas destrutivas — e o SweetAlert aplica-as como estilo em linha, que ganha a qualquer folha. Alem disso ja estao certas: e a casca que estava mal. Os selectores levam `body.theme-3` a frente para vencerem o CSS injectado sem precisar de !important. */ body.theme-3 { --swal2-background: #35444c; --swal2-color: #dfe5ec; --swal2-backdrop: rgba(0, 0, 0, .58); --swal2-border-radius: 20px; --swal2-input-background: rgba(255, 255, 255, .06); --swal2-input-border: 1px solid rgba(255, 255, 255, .16); --swal2-input-focus-border: 1px solid #bed62f; --swal2-footer-border-color: rgba(255, 255, 255, .12); --swal2-footer-color: #9dabb9; --swal2-close-button-color: #9dabb9; --swal2-validation-message-background: rgba(229, 57, 53, .16); --swal2-validation-message-color: #ffb4b1; } /* Fundo solido e sombra propria: o popup flutua por cima da pagina e tem de tapar o que passa por baixo. */ body.theme-3 .swal2-popup { background: #35444c; color: var(--ds-text); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); } body.theme-3 .swal2-title { color: var(--ds-ink); } body.theme-3 .swal2-html-container { color: var(--ds-text); } /* O botao de cancelar nao leva cor nas chamadas: fica com o cinzento claro do SweetAlert, que sobre o popup escuro se le como o botao principal — ao contrario do que e. Aqui passa a discreto, que e o seu papel. */ body.theme-3 .swal2-cancel { background: rgba(255, 255, 255, 0.08) !important; color: var(--ds-text) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; } body.theme-3 .swal2-cancel:hover { background: rgba(255, 255, 255, 0.14) !important; } /* Nos dois temas: cantos e altura a condizer com o resto da interface, e um foco visivel que o SweetAlert nao da. */ .swal2-popup { border-radius: 20px; } .swal2-styled { border-radius: 13px; min-height: 40px; font-weight: 600; } .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(190, 214, 47, 0.35) !important; } /* A barra do temporizador — varias chamadas usam `timer` — passa a verde da marca em vez do preto translucido, que no escuro nao se via. */ body.theme-3 .swal2-timer-progress-bar { background: rgba(190, 214, 47, 0.55); } /* ---- SweetAlert v1: o que REALMENTE desenha os popups --------------------- Classes .sweet-alert / .sa-*. O popup e filho directo do , que e onde esta o .theme-3, por isso `.theme-3 .sweet-alert` chega — duas classes contra a classe unica da biblioteca. */ .theme-3 .sweet-overlay { background-color: rgba(0, 0, 0, 0.58) !important; } .theme-3 .sweet-alert { background-color: #35444c; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); color: var(--ds-text); } /* Cantos a condizer com os cartoes, nos dois temas. Vinham a 5px. */ .sweet-alert { border-radius: 20px; } .theme-3 .sweet-alert h2 { color: var(--ds-ink); } .theme-3 .sweet-alert p, .theme-3 .sweet-alert .sa-content, .theme-3 .sweet-alert fieldset { color: var(--ds-text); } .theme-3 .sweet-alert input { background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--ds-text); box-shadow: none; } .theme-3 .sweet-alert input:focus { border-color: var(--ds-green); box-shadow: 0 0 0 3px rgba(190, 214, 47, 0.25); } .theme-3 .sweet-alert .sa-input-error::before, .theme-3 .sweet-alert .sa-input-error::after { background-color: #ff7a72; } .theme-3 .sweet-alert .sa-error-container { background-color: rgba(229, 57, 53, 0.16); color: #ffb4b1; } /* O CANCELAR nao leva cor nas chamadas e ficava com o cinzento claro da biblioteca: sobre o popup escuro passava a ser o botao mais claro dos dois, ou seja lia-se como o principal — ao contrario do que e. O !important e obrigatorio: a v1 escreve a cor no estilo em linha. */ .theme-3 .sweet-alert button.cancel { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--ds-text) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; } .theme-3 .sweet-alert button.cancel:hover { background-color: rgba(255, 255, 255, 0.14) !important; } /* O CONFIRMAR nao se toca: as chamadas passam-lhe `confirmButtonColor` — verde da marca nas construtivas, vermelho nas destrutivas — e essa cor carrega significado. Um !important aqui apagava o vermelho dos avisos de apagar. */ /* Cantos e altura dos botoes iguais aos do resto da interface, e um foco visivel, que a biblioteca nao da a quem navega por teclado. */ .sweet-alert button { border-radius: 13px !important; min-height: 40px; font-weight: 600; } .sweet-alert button:focus { box-shadow: 0 0 0 3px rgba(190, 214, 47, 0.35) !important; } /* ---- Explicacoes que abrem e fecham (.ds-help) ----------------------------- Um sumario onde se carrega e um bloco de texto que abre por baixo. Serve as definicoes: sao 91 campos, e explicar cada um por extenso encheria a pagina ate ninguem encontrar nada. Construido sobre
/
do proprio HTML, e nao com JavaScript. Tres razoes: abre e fecha sem uma linha de codigo, e portanto nao pode partir com um redesenho do Blaze; o teclado e os leitores de ecra ja sabem lidar com ele; e o conteudo esta la mesmo quando fechado, por isso a procura do browser (Ctrl+F) encontra-o. */ .ds-help { margin-top: 12px; border-top: 1px solid var(--ds-line); padding-top: 10px; } .ds-help > summary { cursor: pointer; list-style: none; /* o triangulo e desenhado por nos */ display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ds-ink); user-select: none; padding: 2px 0; } .ds-help > summary::-webkit-details-marker { display: none; } /* O triangulo: aponta para a direita fechado, para baixo aberto. Feito com bordas em vez de um caracter, para nao depender da fonte instalada. */ .ds-help > summary::before { content: ''; flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s ease; } .ds-help[open] > summary::before { transform: rotate(90deg) translateX(1px); } .ds-help > summary:hover { color: var(--ds-green-d); } .ds-help > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(190, 214, 47, 0.35); border-radius: 9px; } .ds-help-body { padding: 10px 0 2px 13px; /* alinhado com o texto do sumario */ font-size: 12.5px; line-height: 1.55; color: var(--ds-muted); } .ds-help-body > p { margin: 0 0 9px; } .ds-help-body > p:last-child { margin-bottom: 0; } .ds-help-body b, .ds-help-body strong { color: var(--ds-text); font-weight: 700; } .ds-help-body code { font-family: Menlo, Consolas, monospace; font-size: 11.5px; background: var(--ds-grey); padding: 1px 5px; border-radius: 6px; color: var(--ds-text); } /* A ultima linha de uma explicacao e muitas vezes a ressalva — "estes valores sao indicativos", "so afecta o estafeta". Fica mais apagada de proposito. */ .ds-help-note { color: var(--ds-muted); opacity: .75; font-style: italic; } /* ---- Tabelas aninhadas dentro dos cartoes de definicoes ------------------- Mesma armadilha da tabela das guias: o tema tem `.table .table { background-color: #fff }`, e uma tabela dentro de outra fica branca. A tabela das faixas da agenda de GPS vive dentro da tabela do cartao, e por isso aparecia como um rectangulo branco no meio do tema escuro — com o cabecalho em texto claro por cima, ou seja ilegivel. Fundo transparente em vez de uma cor: assim mostra o do cartao, seja ele qual for, e nao ha um segundo tom a manter a par. */ .theme-3 table.ds-settingstable table.table, .theme-3 table.ds-settingstable table.table > thead > tr > th, .theme-3 table.ds-settingstable table.table > tbody > tr > td, .theme-3 table.ds-settingstable table.table > tbody > tr:nth-of-type(odd) > td { background-color: transparent !important; color: var(--ds-text); } /* O cabecalho e rotulo, nao conteudo: mais pequeno e mais apagado, como nas outras tabelas do design system. */ .theme-3 table.ds-settingstable table.table > thead > tr > th { color: var(--ds-muted) !important; font-size: 11.5px; font-weight: 700; border-bottom-color: var(--ds-line) !important; } .theme-3 table.ds-settingstable table.table > tbody > tr > td { border-top-color: var(--ds-line) !important; } /* ---- Menus suspensos no tema escuro --------------------------------------- O .dropdown-menu do Bootstrap traz fundo branco, texto escuro e rebordo claro. No tema escuro abria um rectangulo branco — o menu da conta, no canto superior direito, era o mais visivel porque e o que se usa todos os dias. A regra e geral e nao so para esse menu: o problema e o mesmo em qualquer suspenso da aplicacao, e uma lista de excepcoes ficaria desactualizada ao primeiro menu novo. Fundo SOLIDO — quarta vez que isto aparece hoje. Um menu flutua por cima do conteudo e tem de o tapar; com o token translucido liam-se as duas camadas sobrepostas. */ .theme-3 .dropdown-menu { background-color: #35444c; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } .theme-3 .dropdown-menu > li > a { color: var(--ds-text); } .theme-3 .dropdown-menu > li > a:hover, .theme-3 .dropdown-menu > li > a:focus { background: rgba(255, 255, 255, 0.07); color: var(--ds-ink); } .theme-3 .dropdown-menu .divider { background-color: rgba(255, 255, 255, 0.1); } .theme-3 .dropdown-menu .dropdown-header { color: var(--ds-muted); } /* Cantos a condizer com os cartoes, nos dois temas. Vinham a 1px, que e praticamente esquadria e destoa de tudo o resto. */ .dropdown-menu { border-radius: 14px; } .dropdown-menu > li:first-child > a { border-radius: 14px 14px 0 0; } .dropdown-menu > li:last-child > a { border-radius: 0 0 14px 14px; } /* Cabecalho do menu da conta: usava as variaveis SCSS do tema claro ($text-color), que nao se invertem. Passa aos tokens, que se invertem. */ .theme-3 .ds-hdrme-name { color: var(--ds-ink); } .theme-3 .ds-hdrme-meta { color: var(--ds-muted); } .theme-3 .ds-hdrme-meta > span { background: rgba(255, 255, 255, 0.1); color: var(--ds-text); } /* ---- Legenda das siglas das colunas --------------------------------------- Vai por cima das tabelas grandes, fechada. Nao tira espaco a tabela enquanto ninguem precisar dela, que era a condicao para poder existir numa pagina de uso diario. */ .ds-collegend { margin: 0 0 10px; border-top: 0; padding-top: 0; } .ds-collegend-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; } .ds-collegend-list > dt { font-weight: 700; color: var(--ds-ink); font-size: 12px; white-space: nowrap; } .ds-collegend-list > dd { margin: 0; color: var(--ds-muted); font-size: 12.5px; line-height: 1.45; } /* Num telemovel duas colunas nao cabem: a sigla passa para cima da descricao. */ @media (max-width: 620px) { .ds-collegend-list { grid-template-columns: minmax(0, 1fr); gap: 1px 0; } .ds-collegend-list > dd { margin-bottom: 8px; } } /* Os baloes das colunas sao os NATIVOS do browser, desenhados a partir do atributo title. Nao ha biblioteca de tooltips neste projecto — nem a do Bootstrap nem a do jQuery UI — e por isso nao ha CSS que lhes toque: em tema escuro e o proprio browser que os desenha escuros. Tentei estiliza-los aqui e retirei; fica a nota para ninguem repetir. */ /* ---- Estado "por atribuir" nos botoes de servico --------------------------- Nove sitios do codigo devolvem `secondary label-outlined` como classe de cor quando a orbita do servico e `notAssigned` — services, finishedServices, os tres detalhes e as paginas de lojas. So que NENHUMA das duas classes existia para botoes: .btn-secondary e do Bootstrap 4; este projecto usa o 3; .label-outlined existe, mas so como `.label.label-outlined` — exige a classe .label, que um

do layout reserva-lhes o espaço. O que estava mal antes não era flutuar: era `top: 90%; right: 10%`, que punha os botões a pairar num ponto arbitrário do MEIO do ecrã, sem fundo próprio e sem nada que impedisse o conteúdo de lhes passar por baixo. Aterravam em cima do que ali estivesse. Há dois padrões de marcação e ambos dão na MESMA faixa, desenhada sempre por um contentor real — nunca por um pseudo-elemento com z-index negativo, que ficava atrás de qualquer fundo que a página tivesse por cima e fazia a faixa parecer transparente numas páginas e opaca noutras: 1. .yb-actionbar — vem dentro do partial {{>goBack}}, e serve as 76 páginas onde o VOLTAR aparece sozinho. 2. .btn-group.feedback — o contentor que as 32 páginas de formulário já tinham no HTML, com VOLTAR + SALVAR. */ .yb-actionbar { position: fixed; left: 0; /* o recuo da barra lateral e dado abaixo, no @media */ right: 0; bottom: 0; z-index: 999; display: flex; justify-content: flex-end; align-items: center; gap: 10px; height: 60px; padding: 0 26px; background: #fff; border-top: 1px solid #e6e9ee; box-shadow: 0 -2px 12px rgba(16, 25, 40, 0.1); } .theme-3 .yb-actionbar { background: #2e3c44; border-top-color: rgba(255, 255, 255, 0.12); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35); } /* Nas 32 paginas de formulario o goBack vem dentro do .btn-group.feedback, que JA e a faixa. Aqui o wrapper deixa de ser barra e passa a ser so um item da barra de fora, para os dois botoes alinharem lado a lado. */ .btn-group.feedback .yb-actionbar { position: static; left: auto; right: auto; bottom: auto; padding: 0; gap: 0; background: none; border: 0; box-shadow: none; } .btn-group.feedback .yb-actionbar .btn { margin: 0; } .btn-group.feedback { /* position/z-index explicitos: vinham da regra base .feedback, que desapareceu quando a faixa do goBack passou a ser o .yb-actionbar. Sem position, o left/right/bottom nao faz nada e a barra caia no fluxo, no fim da pagina — invisivel sem rolar ate ao fundo. */ position: fixed; z-index: 999; left: 0; /* o recuo da barra lateral e dado abaixo, no @media */ right: 0; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; height: 60px; padding: 0 26px; /* Fundo OPACO de propósito: o conteúdo rola por baixo da faixa. Aqui não servem os tokens do design system — --ds-card é rgba(255,255,255,.03) no tema escuro, e via-se o texto a passar através da barra. */ background: #fff; border-top: 1px solid #e6e9ee; box-shadow: 0 -2px 12px rgba(16, 25, 40, 0.1); } /* Tema escuro: fundo do conteúdo é $mdc-blue-grey-800 (#37474F); a faixa fica um tom abaixo para se ler como outro plano. */ .theme-3 .btn-group.feedback { background: #2e3c44; border-top-color: rgba(255, 255, 255, 0.12); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35); } /* O recuo da faixa TEM de seguir o do conteudo. O .main-container so recua $sidebar-wd a partir de $min-desktop (992px); abaixo disso a barra lateral e off-canvas e o conteudo ocupa a largura toda. A regra anterior fixava left:280px e so corrigia .yb-actionbar num @media proprio — o .btn-group.feedback, que e a faixa das 32 paginas de formulario, ficava de fora e mantinha o recuo de 280px sobre conteudo que ja comecava em zero. Mesma variavel e mesmo criterio do layout, para nao voltarem a divergir. */ @media only screen and (min-width: 992px) { .yb-actionbar, .btn-group.feedback { left: 280px; } } /* A FAIXA COME O FIM DO MENU EM JANELAS ESTREITAS. Acima de $min-desktop a faixa recua $sidebar-wd e nunca toca na barra lateral. Abaixo disso passa a `left: 0` e atravessa o ecra todo — e como tem z-index 999 contra os 20 da barra lateral, fica por cima dela e tapa-lhe os ultimos 60px. O ultimo item do menu (Gestao de Memoria) desaparecia, e nao havia maneira de o alcancar: nao e' um problema de scroll, e' de area util. Da-se ao contentor que rola a altura da faixa em espaco livre no fim, para o ultimo item conseguir subir acima dela. Mesma variavel da faixa, para os dois nao voltarem a divergir quando um mudar. Vive aqui e nao no sidebar.scss porque esse e' importado na linha 19, antes de $yb-actionbar-hg existir — e porque a regra so' se percebe ao lado da faixa que a obriga. */ @media (max-width: 991px) { .sidebar-container, .sidebar-header + .sidebar-content { padding-bottom: 60px; } } @media (max-width: 991px) { .yb-actionbar, .btn-group.feedback { padding: 0 16px; } } /* Dentro da faixa os botões voltam ao fluxo. Sem isto ficavam eles próprios fixos — a classe `feedback` está no contentor E em cada botão, e era só a margem do primeiro que os impedia de se sobrepor. */ .btn-group.feedback > .feedback, .btn-group.feedback > .btn { position: static; top: auto; right: auto; bottom: auto; float: none; margin: 0; } /* O conteúdo reserva o espaço da faixa, para nada ficar por baixo dela. ENCURTA-SE A ÁREA ÚTIL, não se calça o conteúdo com padding. O padding só funciona para conteúdo que FLUI: painéis com altura própria e scroll próprio — as duas colunas do servicesBot, a lista ao lado do mapa no tracking — ignoram-no, continuam a ir até ao fundo da janela, e a faixa tapava-lhes o fim e a própria barra de scroll. Ao encurtar o contentor que define a área visível, tudo o que se meça em percentagem dele fica automaticamente acima da faixa: painéis, mapas e conteúdo normal, sem cada página precisar de saber que a faixa existe. Se o browser não souber :has(), a altura fica como era e a faixa sobrepõe — volta-se ao que havia antes, não se parte nada. */ .main-container:has(.yb-actionbar), .main-container:has(.btn-group.feedback) { height: calc(100% - 65px - 60px); } /* ---- Avisos do canto inferior direito ----------------------------------- Dois sistemas aparecem no mesmo canto e ambos ficavam por baixo da faixa de ações: o growl do Bert (Bert.alert com 'growl-bottom-right'/-left) e o toastr das mensagens do cabeçalho (positionClass 'toast-bottom-right'). Um aviso tapado por uma barra é um aviso que ninguém lê. Sobem exatamente a altura da faixa, a partir da mesma variável — se a faixa mudar de altura, os avisos acompanham. !important porque o CSS de origem vem dos pacotes (themeteorchef:bert, flawless:meteor-toastr) e a ordem de carregamento no bundle não é garantida. */ .bert-alert.growl-bottom-left, .bert-alert.growl-bottom-right { bottom: calc(60px + 15px) !important; } #toast-container.toast-bottom-right, #toast-container.toast-bottom-left, #toast-container.toast-bottom-center, #toast-container.toast-bottom-full-width { bottom: calc(60px + 12px) !important; } .feedback a { display: block; width: 70px; padding: 8px 16px; } .btn { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } .textBlink { color: #FFB300; } .textBlink2 { color: #000000; } .takeOutTheRoundedBootstrap { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; border-style: none !important; } .weby-red-300 { color: #E57373; } .weby-pink-300 { color: #F06292; } .weby-blue-grey-300 { color: #90A4AE; } .weby-lime-300 { color: #DCE775; } .weby-blue-gray-600 { color: #546E7A; } .weby-grey-600 { color: #757575; } .weby-indigo-900 { color: #3F51B5; } .width-100 { min-width: 60px !important; display: inline-block !important; } .truncate100 { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sideBarCircle_primary { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #3F51B5; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_teal-900 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #004d40; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_pink-300 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #f06292; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_green-500 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #19c17c; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_blue-grey-300 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #90A4AE; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_warning { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #FFB300; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_info { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #03A9F4; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_primary { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #448AFF; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_Brown500 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #795548; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_lime-300 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #DCE775; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_blue-gray-600 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #546E7A; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_gray-600 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #757575; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .sideBarCircle_indigo-900 { width: 30px; line-height: 30px; border-radius: 50%; text-align: center; font-size: 12px; color: #fff; background: #1a237e; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .bg-teal-900 { background: #004d40; } .bg-pink-300 { color: #fff; background: #f06292; } .bg-blue-grey-300 { color: #fff; background: #90A4AE; } .bg-warning { color: #fff; background: #f59504; } .bg-info { color: #fff; background: #2E9AB2; } .bg-primary { color: #fff; background: #2E5ABD; } .bg-brown500 { color: #fff; background: #795548; } .bg-lime-300 { color: #fff; background: #DCE775; } .bg-blue-gray-600 { color: #fff; background: #546E7A; } .bg-gray-600 { color: #fff; background: #757575; } .text-lime-900 { color: #827717; } .text-brown-500 { color: #795548; } .text-blue-gray-600 { color: #546E7A; } .text-indigo-900 { color: #1A237E; } .animated { -webkit-animation-duration: 200ms; animation-duration: 200ms; } .fieldset1 { padding: 16px; } .label-xsmall { vertical-align: super; font-size: x-small; } .label-small { vertical-align: super; font-size: small; } .label-medium { vertical-align: super; font-size: medium; } .label-large { vertical-align: super; font-size: large; } .label-bs { vertical-align: super; } .backgroundMotoBoy { /* The image used */ background-image: url("/img/animacaoSVG.svg"); background-color: #fff; /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } .boderTopColorInfo { border-top: 5px solid #2E9AB2; } .boderTopColorInverse { border-top: 5px solid #2c2d36; } .boderTopColorSuccess { border-top: 5px solid #BDD52E; } .boderTopColorPink { border-top: 5px solid #f06292; } .boderTopColorDanger { border-top: 5px solid #f04e44; } .boderTopColorBlueGray { border-top: 5px solid #90A4AE; } .boderTopColorWarning { border-top: 5px solid #f59504; } .boderTopColorPrimary { border-top: 5px solid #2E5ABD; } .boderTopColorBrown-600 { border-top: 5px solid #6D4C41; } .boderTopColorLime-800 { border-top: 5px solid #9E9D24; } .boderTopColorIndigo-600 { border-top: 5px solid #3949AB; } .boderTopColorPurple-400 { border-top: 5px solid #bf07bf; } .boderTopColorBlue-400 { border-top: 5px solid #57bae4; } .g-recaptcha { display: inline-block; } .blinkDistanceToPointSuccess { animation-name: blinkDistanceToPointSuccess_name; animation-duration: 0.5s; animation-iteration-count: 3; } @keyframes blinkDistanceToPointSuccess_name { 0% { opacity: 1; } 100% { opacity: 0.2; } } .btn { border-radius: 4px !important; } .btn-sq { border-radius: 100% !important; } .yb-act { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 72px; padding: 8px 6px !important; border-radius: 12px !important; border: 1px solid rgba(0, 0, 0, 0.14) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important; white-space: normal; line-height: 1.15; font-size: 12px; font-weight: 600; overflow: hidden; } .yb-act > i, .yb-act > i.fa { font-size: 26px !important; line-height: 1 !important; margin-bottom: 5px; } .yb-act > br { display: none; } .yb-act > span { font-size: 12px; font-weight: 600; } .yb-choose { display: block; width: 100%; font-size: 16px !important; font-weight: 600; padding: 12px 16px !important; border-radius: 8px !important; margin-top: 6px; } .yb-actbar { display: inline-flex !important; float: none !important; flex-direction: column; align-items: center; justify-content: center; width: 82px; min-height: 74px; margin: 4px !important; padding: 8px 4px !important; border-radius: 12px !important; border: 1px solid rgba(0, 0, 0, 0.14) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important; white-space: normal; line-height: 1.1; font-size: 11px; font-weight: 600; vertical-align: middle; overflow: hidden; } .yb-actbar > i, .yb-actbar > i.fa { font-size: 24px !important; line-height: 1 !important; margin-bottom: 4px; } .yb-actbar > br { display: none; } .yb-track-hd td { background: var(--tk-fundo, var(--ds-grey)); border-top: 2px solid var(--tk-cor, var(--ds-line)); padding: 6px 10px !important; font-size: 12px; letter-spacing: .02em; } .yb-track-hd--on { --tk-cor: #4caf50; --tk-fundo: rgba(76, 175, 80, .12); } .yb-track-hd--off { --tk-cor: #e53935; --tk-fundo: rgba(229, 57, 53, .10); } .yb-track-row { display: flex; align-items: stretch; margin: 0; } .yb-track-row > #ybTrackList { flex: 0 0 var(--yb-list-w, 25%); width: auto; max-width: none; } .yb-track-row > .yb-resizer { flex: 0 0 7px; cursor: col-resize; background: #e6eaee; border-left: 1px solid #d6dde4; border-right: 1px solid #d6dde4; align-self: stretch; } .yb-track-row > .yb-resizer:hover { background: #b8c2cc; } .yb-track-row > #ybTrackMap { flex: 1 1 0; min-width: 0; width: auto; max-width: none; } @media (max-width: 991px) { .yb-track-row { display: block; } .yb-track-row > .yb-resizer { display: none; } .yb-track-row > #ybTrackList, .yb-track-row > #ybTrackMap { width: auto; } } .yb-act, .yb-actbar, .yb-choose { transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; } .yb-act > i, .yb-actbar > i { transition: transform 0.14s ease; } .yb-act:hover, .yb-actbar:hover, .yb-choose:hover { transform: translateY(-3px); box-shadow: 0 7px 16px rgba(0, 0, 0, 0.2) !important; filter: brightness(1.06); } .yb-act:hover > i, .yb-actbar:hover > i { transform: scale(1.15); } .yb-act:active, .yb-actbar:active, .yb-choose:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important; filter: brightness(0.97); } @media (prefers-reduced-motion: reduce) { .yb-act, .yb-actbar, .yb-choose, .yb-act > i, .yb-actbar > i { transition: none; } .yb-act:hover, .yb-actbar:hover, .yb-choose:hover { transform: none; } .yb-act:hover > i, .yb-actbar:hover > i { transform: none; } } .trackSwitch span { width: 50px; height: 20px; } .trackSwitch span:after { top: -5px; height: 29px; width: 29px; } .fieldsetWeby_0_padding_border_margin { padding-bottom: 0px; border-bottom: 0px; margin-bottom: 0px; } .fieldsetWeby_0_border { border-bottom: 0px; } .opacity05 { opacity: 0.5; } .opacity07 { opacity: 0.7; } .opacity02 { opacity: 0.2; } .fade-out-dashboard { opacity: 0; } .fade-out-image { animation: fadeOut 70s; -webkit-animation: fadeOut 70s; -moz-animation: fadeOut 70s; -o-animation: fadeOut 70s; -ms-animation: fadeOut 70s; } @keyframes fadeOut { 0% { opacity: 0.6; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 0.6; } 100% { opacity: 0; } } @-webkit-keyframes fadeOut { 0% { opacity: 0.6; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 0.6; } 100% { opacity: 0; } } @-ms-keyframes fadeOut { 0% { opacity: 0.6; } 100% { opacity: 0; } } lottie-player { margin: 0 auto; } .blinkDistance { -webkit-animation: blink 100ms infinite alternate; -moz-animation: blink 100ms infinite alternate; -o-animation: blink 100ms infinite alternate; animation: blink 100ms infinite alternate; } .textareaGeolocation { background-color: #f59504; color: #f04e44; } .overlink { background-color: #f59504; } .moreHeight { height: 100px; } .palavra-tracada { text-decoration: line-through; text-decoration-color: #F44336; color: #F44336; /* Define a cor do texto como vermelho */ } .bert-alert.success { background: #BDD52E; } .yb-split-row { display: flex; align-items: stretch; margin: 0; } .yb-split-row > .yb-split-side { flex: 0 0 var(--yb-side-w, 33.333%); width: auto; max-width: none; } .yb-split-row > .yb-resizer { flex: 0 0 7px; cursor: col-resize; background: #e6eaee; border-left: 1px solid #d6dde4; border-right: 1px solid #d6dde4; align-self: stretch; } .yb-split-row > .yb-resizer:hover { background: #b8c2cc; } .yb-split-row > .yb-split-map { flex: 1 1 0; min-width: 0; width: auto; max-width: none; } @media (max-width: 991px) { .yb-split-row { display: block; } .yb-split-row > .yb-resizer { display: none; } .yb-split-row > .yb-split-side, .yb-split-row > .yb-split-map { width: auto; } } .ybe .ybe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; } .ybe .ybe-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ybe .ybe-chip { border: 1px solid var(--ds-line); background: var(--ds-card); color: var(--ds-muted); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; line-height: 1.4; cursor: pointer; transition: border-color .15s, color .15s; } .ybe .ybe-chip span { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--ds-muted); opacity: .75; font-variant-numeric: tabular-nums; } .ybe .ybe-chip:hover { color: var(--ds-ink); } .ybe .ybe-chip.is-on { border-color: var(--ds-ink); color: var(--ds-ink); font-weight: 600; } .ybe .ybe-chip.is-on span { opacity: 1; } .ybe .ybe-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; font-weight: 400; color: var(--ds-muted); cursor: pointer; } .ybe .ybe-toggle input { margin: 0; cursor: pointer; } .ybe .ybe-link { margin-left: auto; font-size: 12.5px; color: var(--ds-muted); text-decoration: underline; text-underline-offset: 3px; } .ybe .ybe-link:hover { color: var(--ds-ink); } .ybe .ybe-grupo { margin-bottom: 22px; } .ybe .ybe-conta { margin-left: 9px; font-size: 11.5px; font-weight: 400; color: var(--ds-muted); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; } .ybe .ybe-intro { margin: 0 0 18px; color: var(--ds-muted); font-size: 13.5px; line-height: 1.6; max-width: 78ch; } .ybe .ybe-grelha { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } @media (max-width: 700px) { .ybe .ybe-grelha { grid-template-columns: 1fr; } } .ybe .ybe-item { display: flex; flex-direction: column; min-width: 0; } .ybe .ybe-rot { align-self: flex-start; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--ds-grey); color: var(--ds-muted); } .ybe .ybe-rot--cliente { background: rgba(190, 214, 47, 0.22); color: var(--ds-green-ink); } .ybe .ybe-rot--parceiro { background: rgba(214, 158, 46, 0.16); color: #8a6410; } .ybe .ybe-nome { margin: 9px 0 0; font-size: 15px; font-weight: 600; color: var(--ds-ink); } .ybe .ybe-quando { margin: 3px 0 0; font-size: 13px; color: var(--ds-muted); line-height: 1.5; } .ybe .ybe-meta { margin: 6px 0 0; font-size: 11.5px; color: var(--ds-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; font-family: Menlo, Consolas, monospace; } .ybe .ybe-sep { opacity: .5; } .ybe .ybe-kb { font-variant-numeric: tabular-nums; } .ybe .ybe-nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ds-text); border-left: 2px solid var(--ds-green); padding-left: 10px; } .ybe .ybe-janela { margin-top: 12px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-s); overflow: hidden; background: var(--ds-card); box-shadow: var(--ds-shadow); } .ybe .ybe-barra { display: flex; align-items: center; gap: 6px; padding: 8px 11px; background: var(--ds-grey); border-bottom: 1px solid var(--ds-line); } .ybe .ybe-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-line); } .ybe .ybe-cliente { margin-left: 5px; font-size: 10.5px; letter-spacing: .06em; color: var(--ds-muted); font-family: Menlo, Consolas, monospace; } .ybe .ybe-expandir { margin-left: auto; border: 0; background: none; padding: 0; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted); cursor: pointer; } .ybe .ybe-expandir:hover { color: var(--ds-ink); } .ybe iframe { display: block; width: 100%; height: 470px; border: 0; background: #f4f6f7; } .ybe .ybe-regras-lista { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .ybe .ybe-regra { padding: 16px 0; border-top: 1px solid var(--ds-line); } .ybe .ybe-regra h5 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ds-ink); } .ybe .ybe-regra p { margin: 5px 0 0; font-size: 13px; line-height: 1.6; color: var(--ds-muted); } .ybe .ybe-regra code { font-size: .9em; background: var(--ds-grey); color: var(--ds-text); padding: 1px 5px; border-radius: 4px; border: 0; } @media (min-width: 741px) { .ybe .ybe-regra:nth-child(odd) { padding-right: 30px; } } .ybe .ybe-espera { padding: 34px; text-align: center; color: var(--ds-muted); font-size: 13.5px; } .ybe .ybe-espera--erro { color: #a94442; } .theme-3 .ybe .ybe-rot--cliente { background: rgba(190, 214, 47, 0.16); color: #d2e356; } .theme-3 .ybe .ybe-rot--parceiro { background: rgba(214, 158, 46, 0.16); color: #f0c860; } .theme-3 .ybe .ybe-espera--erro { color: #ff9d94; } .theme-3 .ybe iframe { background: #f4f6f7; } .mp .mp-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 16px; } .mp .mp-grupos, .mp .mp-anos { display: flex; gap: 4px; } .mp .mp-tab { border: 1px solid var(--ds-line); background: var(--ds-card); color: var(--ds-muted); border-radius: 999px; padding: 6px 15px; font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; } .mp .mp-tab:hover { color: var(--ds-ink); } .mp .mp-tab.is-on { border-color: var(--ds-ink); color: var(--ds-ink); font-weight: 600; } .mp .mp-recalc { margin-left: auto; } .mp .mp-stats { margin-bottom: 16px; } .mp .mp-seleccao { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 16px; padding: 14px 18px; } .mp .mp-seleccao-txt { font-size: 14px; color: var(--ds-ink); } .mp .mp-seleccao-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .mp .mp-seleccao-acts label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 400; color: var(--ds-muted); } .mp .mp-num { width: 80px; text-align: center; font-variant-numeric: tabular-nums; } .mp .mp-ano { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); } .mp .mp-mes { padding: 12px 13px 14px; } .mp .mp-mes-nome { display: flex; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--ds-ink); margin-bottom: 9px; } .mp .mp-mes-tot { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--ds-muted); font-variant-numeric: tabular-nums; } .mp .mp-semana, .mp .mp-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .mp .mp-semana { margin-bottom: 4px; } .mp .mp-semana span { text-align: center; font-size: 9.5px; letter-spacing: .04em; color: var(--ds-muted); } .mp .mp-semana .mp-fds { opacity: .55; } .mp .mp-dia { position: relative; border: 1px solid transparent; background: var(--ds-grey); border-radius: 5px; padding: 3px 0 4px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: border-color .12s, transform .08s; } .mp .mp-dia:hover { border-color: var(--ds-ink); } .mp .mp-dia:active { transform: scale(0.94); } .mp .mp-dia:focus-visible { outline: 2px solid var(--ds-green); outline-offset: 1px; } .mp .mp-dia--vazio { background: none; border: 0; cursor: default; } .mp .mp-n { font-size: 9px; line-height: 1; color: var(--ds-muted); } .mp .mp-v { font-size: 12.5px; line-height: 1.15; font-weight: 700; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .mp .mp-nivel-1 { background: rgba(190, 214, 47, 0.14); } .mp .mp-nivel-2 { background: rgba(190, 214, 47, 0.28); } .mp .mp-nivel-3 { background: rgba(190, 214, 47, 0.45); } .mp .mp-nivel-4 { background: rgba(190, 214, 47, 0.66); } .mp .mp-dia--fds .mp-n { opacity: .5; } .mp .mp-dia--fds .mp-v { opacity: .72; } .mp .mp-dia--manual::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; background: var(--ds-ink); border-radius: 2px; } .mp .mp-dia--baixa::before { content: ""; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--ds-muted); } .mp .mp-dia--sem { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(125, 135, 148, 0.16) 3px 6px); } .mp .mp-dia--sem .mp-v { color: var(--ds-muted); font-weight: 400; } .mp .mp-dia--porcalcular { background: var(--ds-grey); } .mp .mp-dia--porcalcular .mp-v { color: var(--ds-muted); opacity: .4; } .mp .mp-dia.is-sel { border-color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink); } .mp .mp-legenda { margin-top: 16px; } .mp .mp-legenda-itens { display: flex; flex-wrap: wrap; gap: 10px 22px; } .mp .mp-leg { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ds-muted); } .mp .mp-amostra { width: 22px; height: 20px; border-radius: 5px; background: var(--ds-grey); display: inline-block; position: relative; flex: 0 0 auto; } .mp .mp-amostra--manual::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 2px; background: var(--ds-ink); border-radius: 2px; } .mp .mp-amostra--baixa::before { content: ""; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--ds-muted); } .mp .mp-amostra--sem { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(125, 135, 148, 0.16) 3px 6px); } .mp .mp-amostra--fds { background: var(--ds-grey); opacity: .55; } .mp .mp-espera, .mp .mp-erro { padding: 30px; text-align: center; font-size: 13.5px; } .mp .mp-espera { color: var(--ds-muted); } .mp .mp-erro { color: #a94442; margin-bottom: 16px; } .mp-gaveta-fundo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10, 16, 24, 0.38); z-index: 1040; } .mp-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: 390px; max-width: 92vw; background: var(--yb-superficie); border-left: 1px solid var(--ds-line); z-index: 1041; overflow-y: auto; padding: 20px 22px 30px; box-shadow: -8px 0 28px rgba(10, 16, 24, 0.14); } @media (prefers-reduced-motion: no-preference) { .mp-gaveta { animation: mpEntra .18s ease-out; } @keyframes mpEntra { from { transform: translateX(14px); opacity: .6; } to { transform: none; opacity: 1; } } } .mp-gaveta-topo { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .mp-gaveta-data { font-size: 15px; font-weight: 600; color: var(--ds-ink); line-height: 1.35; } .mp-gaveta-feriado { font-size: 12.5px; color: var(--ds-muted); margin-top: 2px; } .mp-x { margin-left: auto; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ds-muted); cursor: pointer; padding: 0 2px; } .mp-x:hover { color: var(--ds-ink); } .mp-gaveta-num { text-align: center; padding: 14px 0 18px; border-bottom: 1px solid var(--ds-line); } .mp-grande { font-size: 50px; line-height: 1; font-weight: 700; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .mp-grande-leg { margin-top: 7px; font-size: 12.5px; color: var(--ds-muted); line-height: 1.5; } .mp-conf { display: inline-block; margin-top: 10px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--ds-grey); color: var(--ds-muted); } .mp-conf--alta { background: rgba(190, 214, 47, 0.22); color: var(--ds-green-ink); } .mp-conf--baixa { background: rgba(214, 158, 46, 0.16); color: #8a6410; } .mp-conta { padding: 16px 0; border-bottom: 1px solid var(--ds-line); } .mp-conta-titulo { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); margin-bottom: 10px; } .mp-linha { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 13.5px; } .mp-linha span { color: var(--ds-muted); } .mp-linha b { margin-left: auto; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .mp-linha--sub { padding-left: 12px; font-size: 12.5px; opacity: .85; } .mp-linha--res { border-top: 1px solid var(--ds-line); margin-top: 5px; padding-top: 8px; } .mp-gaveta-nota { margin-top: 16px; } .theme-3 .mp .mp-dia--sem, .theme-3 .mp .mp-amostra--sem { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255, 255, 255, 0.1) 3px 6px); } .theme-3 .mp .mp-nivel-1 { background: rgba(190, 214, 47, 0.1); } .theme-3 .mp .mp-nivel-2 { background: rgba(190, 214, 47, 0.19); } .theme-3 .mp .mp-nivel-3 { background: rgba(190, 214, 47, 0.3); } .theme-3 .mp .mp-nivel-4 { background: rgba(190, 214, 47, 0.44); } .theme-3 .mp .mp-erro { color: #ff9d94; } .theme-3 .mp-conf--alta { background: rgba(190, 214, 47, 0.16); color: #d2e356; } .theme-3 .mp-conf--baixa { background: rgba(214, 158, 46, 0.16); color: #f0c860; } .theme-3 .mp-gaveta-fundo { background: rgba(0, 0, 0, 0.55); } .theme-3 .mp-gaveta { box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45); } .fl .fl-erro { padding: 18px; color: #a94442; margin-bottom: 14px; font-size: 13.5px; } .fl .fl-vazio { color: var(--ds-muted); } .fl .fl-vazio--bloco { padding: 22px 4px; text-align: center; font-size: 13.5px; margin: 0; } .fl .fl-texto { font-size: 13.5px; line-height: 1.6; color: var(--ds-text); } .fl .fl-sub { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-muted); } .fl .fl-mt { margin-top: 18px; } .fl .fl-pre { white-space: pre-wrap; } .fl .fl-barra > .ds-input, .fl .fl-barra > .ds-select, .fl .fl-barra > .ds-btn, .fl .fl-linha-form > .ds-input, .fl .fl-linha-form > .ds-select, .fl .fl-linha-form > .ds-btn, .fl .fl-dia > .ds-input, .fl .fl-dia > .ds-select, .fl .fl-dia > .ds-btn { margin: 0; height: 42px; } .fl .fl-barra > .ds-btn, .fl .fl-linha-form > .ds-btn, .fl .fl-dia > .ds-btn { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } .fl .fl-barra > .fl-check, .fl .fl-linha-form > .fl-check, .fl .fl-dia > .fl-check { margin: 0; } .fl .fl-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .fl .fl-barra .fl-procura { flex: 1 1 240px; min-width: 0; } .fl .fl-barra .ds-select { flex: 0 1 220px; width: auto; } .fl .fl-barra .fl-nova { margin-left: auto; } .fl .fl-regras { margin-bottom: 14px; } .fl .fl-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; color: var(--ds-text); margin: 8px 0; cursor: pointer; } .fl .fl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fl .fl-tabela { min-width: 760px; } .fl .fl-linha { cursor: pointer; } .fl .fl-linha:hover td { background: var(--ds-grey); } .fl .fl-linha--sel td { box-shadow: inset 0 -2px 0 var(--ds-green); } .fl .fl-matricula { font-weight: 700; color: var(--ds-ink); letter-spacing: .03em; white-space: nowrap; font-variant-numeric: tabular-nums; } .fl .fl-prop { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--ds-line); white-space: nowrap; color: var(--ds-text); } .fl .fl-prop--yourbox { border-color: var(--ds-green-d); background: rgba(190, 214, 47, 0.14); } .fl .fl-prop--driver { border-color: var(--ds-ink); } .fl .fl-prop--nc { border-style: dashed; color: var(--ds-muted); } .fl .fl-estado { font-size: 12.5px; white-space: nowrap; } .fl .fl-estado--oficina, .fl .fl-estado--imobilizada { color: #b26a00; font-weight: 600; } .fl .fl-estado--inativa, .fl .fl-estado--vendida { color: var(--ds-muted); } .fl .fl-casa { display: inline-block; padding: 0 6px; margin-left: 4px; border-radius: 4px; font-size: 11px; color: var(--ds-muted); border: 1px solid var(--ds-line); } .fl .fl-ficha-topo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .fl .fl-ficha-matricula { font-size: 26px; font-weight: 700; color: var(--ds-ink); letter-spacing: .04em; line-height: 1.1; } .fl .fl-ficha-desc { color: var(--ds-muted); font-size: 13.5px; margin-top: 2px; } .fl .fl-ficha-acoes { display: flex; gap: 8px; flex-wrap: wrap; } .fl .fl-prazos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .fl .fl-linha-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .fl .fl-linha-form .ds-select { flex: 0 1 200px; width: auto; } .fl .fl-linha-form .ds-input { flex: 1 1 180px; min-width: 0; } .fl .fl-atribuir { margin-top: 10px; padding: 14px; border-radius: var(--ds-radius-s); background: var(--ds-grey); } .fl .fl-atribuir > .ds-input { margin-top: 8px; } .fl .fl-hist { margin-top: 14px; font-size: 13px; color: var(--ds-text); } .fl .fl-hist summary { cursor: pointer; color: var(--ds-muted); } .fl .fl-hist ul { margin: 8px 0 0; padding-left: 18px; } .fl .fl-form textarea.ds-input { min-height: 60px; resize: vertical; } .fl .fl-km-hoje { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; } .fl .fl-km-hoje .fl-km-n { font-size: 28px; font-weight: 700; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .fl .fl-sit { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; border: 1px solid var(--ds-line); } .fl .fl-sit--emFalta { border-color: #b8532f; color: #b8532f; font-weight: 600; } .fl .fl-sit--registada { border-color: var(--ds-green-d); background: rgba(190, 214, 47, 0.14); } .fl .fl-sit--dispensado { border-style: dashed; } .fl .fl-sit--facultativa { color: var(--ds-muted); } .fl .fl-acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; } .fl .fl-mini { border: 1px solid var(--ds-line); background: var(--ds-card); color: var(--ds-text); border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer; } .fl .fl-mini:hover { border-color: var(--ds-ink); color: var(--ds-ink); } .fl .fl-mini-sel { width: auto; padding: 3px 26px 3px 9px; font-size: 12px; height: auto; } .fl .fl-editado { font-size: 11px; color: var(--ds-muted); cursor: help; border-bottom: 1px dotted var(--ds-muted); } .fl .fl-dia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .fl .fl-abas { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--ds-line); overflow-x: auto; -webkit-overflow-scrolling: touch; } .fl .fl-aba { border: 0; background: none; padding: 9px 14px; font-size: 13.5px; white-space: nowrap; color: var(--ds-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; } .fl .fl-aba:hover { color: var(--ds-ink); } .fl .fl-aba:focus-visible { outline: 2px solid var(--ds-green); outline-offset: -2px; } .fl .fl-aba--on { color: var(--ds-ink); font-weight: 600; border-bottom-color: var(--ds-green); } .fl .fl-sec-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; } .fl .fl-sec-topo > .ds-btn, .fl .fl-sec-topo .fl-acoes-linha > .ds-btn { margin: 0; } .fl .fl-parada { border-left: 4px solid #b8532f; } .fl .fl-parada-topo { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; } .fl .fl-reatribuir { padding: 8px 0; border-top: 1px solid var(--ds-line); } .fl .fl-reatribuir-linha { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; } .fl .fl-cand { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 10px; margin-top: 6px; border-radius: var(--ds-radius-s); background: var(--ds-grey); font-size: 13px; } .fl .fl-cand > span:first-child { font-weight: 600; color: var(--ds-ink); } .fl .fl-cand > .fl-mini { margin-left: auto; } .fl .fl-pend { padding: 7px 10px; border-radius: var(--ds-radius-s); font-size: 13px; cursor: pointer; } .fl .fl-pend:hover { background: var(--ds-grey); } .fl .fl-pend--atraso { color: #b8532f; } .fl a.fl-mini { display: inline-block; text-decoration: none; } .fl .fl-dia .ds-input { width: auto; } .km-faixa { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 12px; padding: 10px 16px; border-radius: var(--ds-radius-s); background: #fff4e5; border: 1px solid #f0c27b; color: #6b4300; font-size: 13.5px; } .km-faixa-bt { border: 0; border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 600; background: var(--ds-green); color: var(--ds-green-ink); cursor: pointer; } .km-faixa-bt:hover { background: var(--ds-green-d); } .km-caixa .km-campo { margin-top: 16px; font-size: 22px; font-variant-numeric: tabular-nums; height: auto; padding: 10px 14px; } .km-caixa .km-erro { margin-top: 8px; min-height: 18px; font-size: 13px; color: #b8532f; } .fl .fl-secoes { margin-top: 0; } .fl .fa-adiado td { opacity: .6; } .fl .fa-ensaio-lista { margin: 8px 0; padding-left: 18px; font-size: 13px; } .fl .fa-ligado { font-size: 14px; } .fl .fc-staff { display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .fl .fc-pessoa { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0; padding: 7px 10px; border-radius: var(--ds-radius-s); font-weight: 400; cursor: pointer; min-width: 0; } .fl .fc-pessoa:hover { background: var(--ds-grey); } .fl .fc-pessoa > input { margin: 3px 0 0; } .fl .fc-pessoa > span { display: flex; flex-direction: column; min-width: 0; } .fl .fc-pessoa small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl .fc-pessoa-nome { font-size: 13.5px; color: var(--ds-text); line-height: 1.3; } .fl .fc-kmgrid { display: grid; gap: 12px; align-items: end; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .fl .fc-cfg .ds-grid { align-items: end; } .fl .fc-kmcel { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; } .fl .fc-kmcel .ds-label { line-height: 1.25; } .fl .fc-kmcel .ds-input { width: 100%; margin: 0; } .sn-menu { width: 360px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; padding: 0 !important; } .sn-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ds-line); font-size: 13px; color: var(--ds-ink); } .sn-todas { border: 0; background: none; color: var(--ds-muted); font-size: 12px; cursor: pointer; padding: 0; } .sn-todas:hover { color: var(--ds-ink); text-decoration: underline; } .sn-item { padding: 10px 14px 10px 12px; border-left: 3px solid transparent; border-bottom: 1px solid var(--ds-line); cursor: pointer; white-space: normal; } .sn-item:hover { background: var(--ds-grey); } .sn-item--nova { border-left-color: var(--ds-green); } .sn-item--nova.sn-item--urgente { border-left-color: #b8532f; } .sn-titulo { font-size: 13px; font-weight: 600; color: var(--ds-ink); line-height: 1.35; } .sn-item:not(.sn-item--nova) .sn-titulo { font-weight: 400; color: var(--ds-text); } .sn-texto { font-size: 12.5px; color: var(--ds-muted); line-height: 1.45; margin-top: 2px; } .sn-quando { font-size: 11px; color: var(--ds-muted); margin-top: 4px; } .sn-vazio { padding: 18px 14px; font-size: 13px; color: var(--ds-muted); text-align: center; } .fl-foto-fundo { cursor: zoom-out; } .fl-foto { max-width: 100%; max-height: 100%; border-radius: var(--ds-radius-s); box-shadow: 0 18px 50px rgba(10, 16, 24, 0.4); } .fr .fr-erro, .fr .fr-espera { padding: 28px; text-align: center; font-size: 13.5px; } .fr .fr-espera { color: var(--ds-muted); } .fr .fr-erro { color: #a94442; margin-bottom: 14px; } .fr .fr-trancado { padding: 14px 18px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.6; border-left: 3px solid var(--ds-green); color: var(--ds-text); } .fr .fr-trancado b { color: var(--ds-ink); } .fr .fr-topo { display: grid; gap: 14px; margin-bottom: 16px; grid-template-columns: minmax(220px, 300px) 1fr; } @media (max-width: 780px) { .fr .fr-topo { grid-template-columns: 1fr; } } .fr .fr-saldo { padding: 20px 22px; text-align: center; } .fr .fr-saldo-n { font-size: 52px; line-height: 1; font-weight: 700; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .fr .fr-saldo-leg { margin-top: 6px; font-size: 13px; color: var(--ds-muted); line-height: 1.45; } .fr .fr-saldo-sub { margin-top: 6px; font-size: 12px; color: var(--ds-muted); } .fr .fr-saldo-nota { margin-top: 12px; text-align: left; } .fr .fr-barra { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--ds-grey); overflow: hidden; } .fr .fr-barra span { display: block; height: 100%; background: var(--ds-green); border-radius: 999px; } .fr .fr-avisos-card { padding: 16px 20px; } .fr .fr-regras { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .fr .fr-regras li { font-size: 13px; color: var(--ds-muted); line-height: 1.5; padding-left: 16px; position: relative; } .fr .fr-regras li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-line); } .fr .fr-regras li b { color: var(--ds-ink); font-weight: 600; } .fr .fr-regras .fr-ok::before { background: var(--ds-green); } .fr .fr-regras .fr-pendente::before { background: #d69e2e; } .fr .fr-novo { padding: 18px 20px; margin-bottom: 16px; } .fr .fr-novo-topo { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; } .fr .fr-novo-datas { font-size: 16px; font-weight: 600; color: var(--ds-ink); } .fr .fr-novo-sub { margin-top: 3px; font-size: 12.5px; color: var(--ds-muted); } .fr .fr-novo-topo .ds-btn { margin-left: auto; } .fr .fr-msg { padding: 9px 13px; border-radius: 8px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; border-left: 3px solid transparent; } .fr .fr-msg--erro { background: rgba(169, 68, 66, 0.1); border-left-color: #a94442; color: #7f3230; } .fr .fr-msg--aviso { background: rgba(214, 158, 46, 0.12); border-left-color: #d69e2e; color: #7a5a11; } .fr .fr-cab { margin: 12px 0; } .fr .fr-cab-titulo { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); margin-bottom: 7px; } .fr .fr-cab-linha { display: flex; gap: 12px; font-size: 12.5px; padding: 3px 0; } .fr .fr-cab-linha span { color: var(--ds-muted); font-variant-numeric: tabular-nums; } .fr .fr-cab-linha b { margin-left: auto; font-weight: 600; } .fr .fr-cab--fura b { color: #a94442; } .fr .fr-cab--limite b { color: #8a6410; } .fr .fr-nota-campo { display: block; margin: 12px 0 4px; font-size: 12.5px; font-weight: 400; color: var(--ds-muted); } .fr .fr-nota-campo .ds-input { margin-top: 5px; } .fr .fr-acts { margin-top: 14px; } .fr .fr-ano { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .fr .fr-mes { padding: 11px 12px 13px; } .fr .fr-mes-nome { font-size: 12.5px; font-weight: 600; color: var(--ds-ink); margin-bottom: 8px; } .fr .fr-semana, .fr .fr-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .fr .fr-semana { margin-bottom: 4px; } .fr .fr-semana span { text-align: center; font-size: 9.5px; color: var(--ds-muted); } .fr .fr-semana .fr-fds { opacity: .55; } .fr .fr-dia { position: relative; border: 1px solid transparent; background: var(--ds-grey); border-radius: 5px; padding: 5px 0; cursor: pointer; font-size: 11.5px; line-height: 1; color: var(--ds-ink); font-variant-numeric: tabular-nums; transition: border-color .12s, transform .08s; } .fr .fr-dia:hover { border-color: var(--ds-ink); } .fr .fr-dia:active { transform: scale(0.92); } .fr .fr-dia:focus-visible { outline: 2px solid var(--ds-green); outline-offset: 1px; } .fr .fr-dia--vazio { background: none; border: 0; cursor: default; } .fr .fr-dia--fds { opacity: .6; } .fr .fr-dia--meu-aprovado { background: var(--ds-green); color: var(--ds-green-ink); font-weight: 700; } .fr .fr-dia--meu-submetido { background: repeating-linear-gradient(135deg, rgba(190, 214, 47, 0.55) 0 4px, rgba(190, 214, 47, 0.22) 4px 8px); color: var(--ds-green-ink); font-weight: 600; } .fr .fr-dia--meu-rascunho { background: transparent; border-color: var(--ds-green); font-weight: 600; } .fr .fr-dia--outros::after { content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--ds-muted); } .fr .fr-dia--cheio { background: rgba(169, 68, 66, 0.14); } .fr .fr-dia.is-sel { border-color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink); } .fr .fr-legenda { margin-top: 14px; padding: 12px 16px; } .fr .fr-legenda-itens { display: flex; flex-wrap: wrap; gap: 10px 20px; } .fr .fr-leg { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ds-muted); } .fr .fr-am { width: 20px; height: 18px; border-radius: 5px; background: var(--ds-grey); display: inline-block; position: relative; flex: 0 0 auto; border: 1px solid transparent; } .fr .fr-lista { margin-top: 16px; } .fr .fr-tabela { width: 100%; } .fr .fr-estado { display: inline-block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--ds-grey); color: var(--ds-muted); } .fr .fr-estado--aprovado { background: rgba(190, 214, 47, 0.22); color: var(--ds-green-ink); } .fr .fr-estado--submetido { background: rgba(214, 158, 46, 0.16); color: #8a6410; } .fr .fr-estado--recusado { background: rgba(169, 68, 66, 0.12); color: #a94442; } .fr .fr-trancado-chip { margin-left: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-muted); } .fr .fr-decisao { margin-top: 4px; font-size: 12px; color: var(--ds-muted); line-height: 1.45; } .fr .fr-acoes { white-space: nowrap; text-align: right; } .fr .fr-act { border: 0; background: none; padding: 2px 6px; font-size: 12px; color: var(--ds-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .fr .fr-act:hover { color: var(--ds-ink); } .fr .fr-act--del:hover { color: #a94442; } .fr .fr-sem-acoes { color: var(--ds-muted); opacity: .5; } .fr .fr-vazio { color: var(--ds-muted); font-size: 13.5px; margin: 0; } .mfe .mfe-erro, .mfe .mfe-espera { padding: 28px; text-align: center; font-size: 13.5px; } .mfe .mfe-espera { color: var(--ds-muted); } .mfe .mfe-erro { color: #a94442; margin-bottom: 14px; } .mfe .mfe-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; } .mfe .mfe-anos, .mfe .mfe-grupos { display: flex; gap: 4px; } .mfe .mfe-tab, .mfe .mfe-chip { border: 1px solid var(--ds-line); background: var(--ds-card); color: var(--ds-muted); border-radius: 999px; padding: 5px 14px; font-size: 12.5px; cursor: pointer; } .mfe .mfe-tab:hover, .mfe .mfe-chip:hover { color: var(--ds-ink); } .mfe .mfe-tab.is-on, .mfe .mfe-chip.is-on { border-color: var(--ds-ink); color: var(--ds-ink); font-weight: 600; } .mfe .mfe-trinco { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 20px; margin-bottom: 16px; } .mfe .mfe-trinco--on { border-left: 3px solid #d69e2e; } .mfe .mfe-trinco-txt { display: flex; flex-direction: column; gap: 2px; min-width: 210px; } .mfe .mfe-trinco-txt b { font-size: 14px; color: var(--ds-ink); } .mfe .mfe-trinco-txt span { font-size: 12.5px; color: var(--ds-muted); line-height: 1.5; } .mfe .mfe-trinco-nota { flex: 1 1 220px; min-width: 0; } .mfe .mfe-stats { margin-bottom: 16px; } .mfe .mfe-pedidos { margin-bottom: 16px; } .mfe .mfe-conta { margin-left: 9px; font-size: 11.5px; font-weight: 400; color: var(--ds-muted); letter-spacing: 0; text-transform: none; } .mfe .mfe-filtros { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; } .mfe .mfe-lista { display: grid; gap: 8px; } .mfe .mfe-pedido { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-s); overflow: hidden; } .mfe .mfe-pedido.is-aberto { border-color: var(--ds-ink); } .mfe .mfe-pedido-topo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 11px 14px; cursor: pointer; } .mfe .mfe-pedido-topo:hover { background: var(--ds-grey); } .mfe .mfe-quem { display: flex; align-items: center; gap: 8px; min-width: 170px; } .mfe .mfe-quem b { font-size: 13.5px; color: var(--ds-ink); } .mfe .mfe-grupo-chip, .mfe .mfe-vinculo { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-muted); background: var(--ds-grey); padding: 2px 7px; border-radius: 4px; } .mfe .mfe-datas { font-size: 13px; color: var(--ds-text); font-variant-numeric: tabular-nums; } .mfe .mfe-uteis { font-size: 12.5px; color: var(--ds-muted); } .mfe .mfe-estado { margin-left: auto; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--ds-grey); color: var(--ds-muted); } .mfe .mfe-estado--aprovado { background: rgba(190, 214, 47, 0.22); color: var(--ds-green-ink); } .mfe .mfe-estado--submetido { background: rgba(214, 158, 46, 0.16); color: #8a6410; } .mfe .mfe-estado--recusado { background: rgba(169, 68, 66, 0.12); color: #a94442; } .mfe .mfe-trancado-chip { font-size: 10px; text-transform: uppercase; color: var(--ds-muted); } .mfe .mfe-pedido-corpo { padding: 4px 14px 14px; border-top: 1px solid var(--ds-line); } .mfe .mfe-nota-user { margin: 12px 0; font-size: 13px; color: var(--ds-text); line-height: 1.55; } .mfe .mfe-nota-user span { color: var(--ds-muted); } .mfe .mfe-cobertura { margin: 12px 0; } .mfe .mfe-cob-titulo { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); margin-bottom: 7px; } .mfe .mfe-cob-linha { display: flex; gap: 12px; align-items: baseline; font-size: 12.5px; padding: 3px 0; } .mfe .mfe-cob-linha span { color: var(--ds-muted); font-variant-numeric: tabular-nums; } .mfe .mfe-cob-linha b { margin-left: auto; font-weight: 600; } .mfe .mfe-cob-n { min-width: 80px; } .mfe .mfe-cob--fura b { color: #a94442; } .mfe .mfe-cob--limite b { color: #8a6410; } .mfe .mfe-cob-ok { font-size: 12.5px; color: var(--ds-muted); } .mfe .mfe-saldo-linha { margin-top: 10px; font-size: 12.5px; color: var(--ds-muted); } .mfe .mfe-saldo-linha b { color: var(--ds-ink); } .mfe .mfe-decisao-ant { margin: 10px 0; font-size: 12.5px; color: var(--ds-muted); font-style: italic; } .mfe .mfe-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; } .mfe .mfe-nota { flex: 1 1 200px; min-width: 0; } .mfe .mfe-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 400; color: var(--ds-muted); } .mfe .mfe-check input { margin: 0; } .mfe .mfe-vazio { color: var(--ds-muted); font-size: 13.5px; margin: 0; } .mfe .mfe-intro { font-size: 13px; color: var(--ds-muted); line-height: 1.6; max-width: 74ch; margin: 0 0 18px; } .mfe .mfe-campos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .mfe .mfe-campo { display: flex; flex-direction: column; gap: 5px; margin: 0; font-weight: 400; } .mfe .mfe-campo-nome { font-size: 13px; font-weight: 600; color: var(--ds-ink); } .mfe .mfe-campo-nota { font-size: 11.5px; color: var(--ds-muted); line-height: 1.45; } .mfe .mfe-campo input[type="checkbox"] { align-self: flex-start; margin: 3px 0; } .theme-3 .fr .fr-erro, .theme-3 .mfe .mfe-erro { color: #ff9d94; } .theme-3 .fr .fr-msg--erro { background: rgba(255, 157, 148, 0.12); border-left-color: #ff9d94; color: #ffb3ab; } .theme-3 .fr .fr-msg--aviso { background: rgba(240, 200, 96, 0.12); border-left-color: #f0c860; color: #f0c860; } .theme-3 .fr .fr-cab--fura b, .theme-3 .mfe .mfe-cob--fura b { color: #ff9d94; } .theme-3 .fr .fr-cab--limite b, .theme-3 .mfe .mfe-cob--limite b { color: #f0c860; } .theme-3 .fr .fr-estado--aprovado, .theme-3 .mfe .mfe-estado--aprovado { background: rgba(190, 214, 47, 0.16); color: #d2e356; } .theme-3 .fr .fr-estado--submetido, .theme-3 .mfe .mfe-estado--submetido { background: rgba(214, 158, 46, 0.16); color: #f0c860; } .theme-3 .fr .fr-estado--recusado, .theme-3 .mfe .mfe-estado--recusado { background: rgba(255, 157, 148, 0.14); color: #ff9d94; } .theme-3 .fr .fr-dia--meu-aprovado { background: rgba(190, 214, 47, 0.72); color: #26310a; } .theme-3 .fr .fr-dia--meu-submetido { background: repeating-linear-gradient(135deg, rgba(190, 214, 47, 0.42) 0 4px, rgba(190, 214, 47, 0.16) 4px 8px); color: #d2e356; } .theme-3 .fr .fr-dia--meu-rascunho { color: #d2e356; } .theme-3 .fr .fr-dia--cheio { background: rgba(255, 157, 148, 0.16); } .theme-3 .fr .fr-regras .fr-pendente::before { background: #f0c860; } .theme-3 .mfe .mfe-trinco--on { border-left-color: #f0c860; } .pnf { display: flex; align-items: center; justify-content: center; min-height: 62vh; padding: 30px 20px; } .pnf-caixa { max-width: 520px; width: 100%; text-align: center; background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); padding: 40px 36px 34px; } .pnf-marca { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; } .pnf-barra { width: 34px; height: 3px; border-radius: 2px; background: var(--ds-green); } .pnf-cod { font-size: 12px; letter-spacing: .22em; color: var(--ds-muted); font-variant-numeric: tabular-nums; } .pnf-titulo { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--ds-ink); letter-spacing: -.015em; } .pnf-texto { margin: 14px auto 0; max-width: 42ch; font-size: 14px; line-height: 1.65; color: var(--ds-muted); } .pnf-accoes { margin-top: 26px; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; } .cp .modal-content { border-radius: var(--ds-radius); border: 1px solid var(--ds-line); background: var(--yb-superficie); overflow: hidden; } .cp .cp-topo { padding: 20px 24px 16px; border-bottom: 1px solid var(--ds-line); background: var(--yb-superficie); position: relative; } .cp .cp-fechar { position: absolute; top: 16px; right: 18px; font-size: 19px; color: var(--ds-muted); cursor: pointer; line-height: 1; } .cp .cp-fechar:hover { color: var(--ds-ink); } .cp .cp-titulo { margin: 0; padding-right: 34px; font-size: 17px; font-weight: 700; color: var(--ds-ink); letter-spacing: -.01em; } .cp .cp-sub { margin: 7px 0 0; padding-right: 34px; font-size: 12.5px; line-height: 1.6; color: var(--ds-muted); max-width: 62ch; } .cp .cp-sub b { color: var(--ds-ink); font-weight: 600; } .cp .cp-corpo { padding: 0; background: var(--yb-superficie); } .cp .cp-tabela-fora { overflow-x: auto; max-height: 68vh; overflow-y: auto; } .cp .cp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .cp .cp-tabela thead th { position: sticky; top: 0; z-index: 1; background: var(--ds-grey); color: var(--ds-muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ds-line); } .cp .cp-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--ds-line); color: var(--ds-text); vertical-align: middle; white-space: nowrap; } .cp .cp-tabela tbody tr:last-child td { border-bottom: 0; } .cp .cp-tabela tbody tr:hover td { background: var(--ds-grey); } .cp .cp-num { text-align: right; font-variant-numeric: tabular-nums; } .cp .cp-nr { font-weight: 600; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .cp .cp-data { color: var(--ds-muted); font-variant-numeric: tabular-nums; } .cp .cp-preco { font-weight: 600; color: var(--ds-ink); } .cp .cp-preco--driver { font-weight: 400; color: var(--ds-muted); } .cp .cp-margem { color: var(--ds-muted); font-size: 12px; } .cp .cp-acao { text-align: right; padding-right: 16px !important; } .cp .cp-btn { border: 1px solid var(--ds-line); background: var(--ds-card); color: var(--ds-muted); border-radius: 999px; padding: 4px 13px; font-size: 12px; cursor: pointer; transition: border-color .14s, color .14s, background .14s; } .cp .cp-btn:hover { border-color: var(--ds-ink); color: var(--ds-ink); background: var(--ds-card); } .cp .cp-btn:active { transform: scale(0.96); } .cp .cp-btn:focus-visible { outline: 2px solid var(--ds-green); outline-offset: 2px; } .cp .cp-estado { padding: 44px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; } .cp .cp-estado b { font-size: 14px; color: var(--ds-ink); } .cp .cp-estado span { font-size: 13px; color: var(--ds-muted); max-width: 40ch; line-height: 1.6; } .theme-3 .cp .cp-tabela thead th { background: rgba(255, 255, 255, 0.05); } .theme-3 .cp .cp-tabela tbody tr:hover td { background: rgba(255, 255, 255, 0.04); } .theme-3 .cp .cp-btn:hover { background: rgba(255, 255, 255, 0.05); } .cf-fundo { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10, 16, 24, 0.48); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; } .cf-caixa { background: var(--yb-superficie); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: 0 18px 50px rgba(10, 16, 24, 0.28); max-width: 440px; width: 100%; padding: 26px 28px 22px; max-height: 100%; overflow-y: auto; } .cf-caixa--perigo { border-top: 3px solid #d69e2e; } .cf-titulo { font-size: 17px; font-weight: 700; color: var(--ds-ink); line-height: 1.35; letter-spacing: -.01em; } .cf-texto { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--ds-muted); } .cf-detalhe { margin-top: 12px; padding: 9px 12px; border-radius: 8px; background: var(--ds-grey); font-size: 12.5px; line-height: 1.55; color: var(--ds-text); } .cf-accoes { margin-top: 22px; display: flex; gap: 8px; justify-content: flex-end; } .cf-bt { border-radius: 999px; padding: 8px 18px; font-size: 13.5px; cursor: pointer; border: 1px solid var(--ds-line); background: var(--ds-card); color: var(--ds-text); transition: border-color .14s, background .14s, color .14s; } .cf-bt:hover { border-color: var(--ds-ink); color: var(--ds-ink); } .cf-bt:focus-visible { outline: 2px solid var(--ds-green); outline-offset: 2px; } .cf-bt--ok { background: var(--ds-green); border-color: var(--ds-green); color: var(--ds-green-ink); font-weight: 600; } .cf-bt--ok:hover { background: var(--ds-green-d); border-color: var(--ds-green-d); color: var(--ds-green-ink); } .cf-bt--perigo { background: #b8532f; border-color: #b8532f; color: #fff; } .cf-bt--perigo:hover { background: #9d4527; border-color: #9d4527; color: #fff; } .cf-bt[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; } .cf-lista { margin: 14px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ds-text); } .cf-lista li + li { margin-top: 4px; } .cf-lista-aviso { color: #b7791f; } .cf-seccao { margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--ds-ink); } .cf-opcoes { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .cf-opcao { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--ds-line); border-radius: 8px; font-weight: normal; cursor: pointer; } .cf-opcao input { margin-top: 3px; flex: 0 0 auto; } .cf-opcao:has(input:checked) { border-color: var(--ds-green); } .cf-opcao-corpo { display: flex; flex-direction: column; gap: 2px; } .cf-opcao-titulo { font-size: 13.5px; font-weight: 600; color: var(--ds-ink); } .cf-opcao-texto { font-size: 12.5px; line-height: 1.5; color: var(--ds-muted); } .cf-marca { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--ds-text); font-weight: normal; cursor: pointer; } .cf-marca input { margin-top: 2px; flex: 0 0 auto; } .cf-campo { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--ds-ink); } .cf-campo .ds-input { font-weight: normal; } .mfe .mfe-bar, .fr .fr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ds-line); } .mfe .mfe-bar-rotulo, .fr .fr-bar-rotulo { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-muted); } .mfe .mfe-bar-nota, .fr .fr-bar-nota { font-size: 12.5px; color: var(--ds-muted); margin-left: auto; } .mfe .mfe-anos, .fr .fr-anos { display: inline-flex; border: 1px solid var(--ds-line); border-radius: 10px; overflow: hidden; background: var(--ds-card); } .mfe .mfe-ano, .fr .fr-ano-bt { border: 0; background: none; padding: 7px 17px; font-size: 13.5px; color: var(--ds-muted); cursor: pointer; font-variant-numeric: tabular-nums; border-right: 1px solid var(--ds-line); } .mfe .mfe-ano:last-child, .fr .fr-ano-bt:last-child { border-right: 0; } .mfe .mfe-ano:hover, .fr .fr-ano-bt:hover { color: var(--ds-ink); background: var(--ds-grey); } .mfe .mfe-ano.is-on, .fr .fr-ano-bt.is-on { background: var(--ds-ink); color: var(--ds-card); font-weight: 700; } .mfe .mfe-ano:focus-visible, .fr .fr-ano-bt:focus-visible { outline: 2px solid var(--ds-green); outline-offset: -2px; } .mfe .mfe-filtros { align-items: center; } .mfe .mfe-filtro-rotulo { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ds-muted); margin-right: 2px; } .mfe .mfe-filtro-sep { width: 1px; height: 18px; background: var(--ds-line); margin: 0 6px; display: inline-block; } .fr .fr-situacao { margin-top: 16px; padding: 11px 13px; border-radius: 9px; text-align: left; background: var(--ds-grey); border-left: 3px solid var(--ds-line); display: flex; flex-direction: column; gap: 3px; } .fr .fr-situacao b { font-size: 13px; color: var(--ds-ink); } .fr .fr-situacao span { font-size: 12.5px; line-height: 1.55; color: var(--ds-muted); } .fr .fr-situacao--ok { border-left-color: var(--ds-green); } .fr .fr-situacao--atencao, .fr .fr-situacao--aperta { border-left-color: #d69e2e; } .fr .fr-situacao--passado { border-left-color: var(--ds-line); opacity: .85; } .theme-3 .cf-fundo { background: rgba(0, 0, 0, 0.6); } .theme-3 .cf-caixa { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); } .theme-3 .cf-caixa--perigo { border-top-color: #f0c860; } .theme-3 .cf-bt--perigo { background: #c2603c; border-color: #c2603c; } .theme-3 .cf-lista-aviso { color: #f0c860; } .theme-3 .mfe .mfe-ano.is-on, .theme-3 .fr .fr-ano-bt.is-on { background: var(--ds-green); color: #26310a; } .theme-3 .fr .fr-situacao--atencao, .theme-3 .fr .fr-situacao--aperta { border-left-color: #f0c860; } .fr .fr-dia--passado { cursor: default; opacity: .42; } .fr .fr-dia--passado:hover { border-color: transparent; } .fr .fr-dia--passado:active { transform: none; } .fr .fr-dia--passado.fr-dia--meu-aprovado, .fr .fr-dia--passado.fr-dia--meu-submetido, .fr .fr-dia--passado.fr-dia--meu-rascunho { opacity: .62; } .fr .fr-am.fr-dia--passado { opacity: .42; } .mfe .mfe-demo { margin-top: 16px; border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(125, 135, 148, 0.045) 8px 16px); } .mfe .mfe-demo-estado { margin: 10px 0 4px; font-size: 12.5px; color: var(--ds-muted); } .mfe .mfe-demo-estado b { color: var(--ds-ink); font-variant-numeric: tabular-nums; } .mfe .mfe-demo-acts { margin-top: 12px; } .theme-3 .mfe .mfe-demo { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, 0.04) 8px 16px); } .fr-barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--yb-superficie); border-top: 1px solid var(--ds-line); box-shadow: 0 -6px 22px rgba(10, 16, 24, 0.14); } @media (min-width: 992px) { .fr-barra-fixa { left: 220px; } } .fr-bf-dentro { max-width: 1400px; margin: 0 auto; padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .fr-bf-resumo { min-width: 210px; } .fr-bf-blocos { display: flex; flex-wrap: wrap; gap: 6px; } .fr-bf-bloco { display: inline-flex; align-items: baseline; gap: 7px; background: var(--ds-grey); border: 1px solid var(--ds-line); border-radius: 8px; padding: 4px 10px; font-size: 13px; color: var(--ds-ink); font-variant-numeric: tabular-nums; } .fr-bf-bloco i { font-style: normal; font-size: 11px; color: var(--ds-muted); } .fr-bf-conta { margin-top: 5px; font-size: 12px; color: var(--ds-muted); font-variant-numeric: tabular-nums; } .fr-bf-aviso-blocos { margin-left: 8px; color: var(--ds-ink); font-weight: 600; } .fr-bf-msgs { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; max-height: 88px; overflow-y: auto; } .fr-bf-msgs .fr-msg { margin: 0; padding: 5px 10px; font-size: 12px; } .fr-msg--cab { background: var(--ds-grey); border-left-color: var(--ds-line); color: var(--ds-muted); } .fr-msg--cab.fr-cab--fura { border-left-color: #a94442; color: #7f3230; } .fr-msg--cab.fr-cab--limite { border-left-color: #d69e2e; color: #7a5a11; } .fr-bf-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .fr-bf-nota { width: 230px; max-width: 46vw; } .fr .fr-lista { margin-bottom: 120px; } .fr .fr-comose { margin: 0 0 14px; padding: 10px 14px; border-radius: 9px; background: var(--ds-grey); border-left: 3px solid var(--ds-green); font-size: 12.5px; line-height: 1.6; color: var(--ds-muted); max-width: 88ch; } .fr .fr-comose b { color: var(--ds-ink); } .fr .fr-comose kbd { font-family: Menlo, Consolas, monospace; font-size: 11px; background: var(--ds-card); border: 1px solid var(--ds-line); border-radius: 4px; padding: 1px 5px; color: var(--ds-ink); box-shadow: none; } .theme-3 .fr-barra-fixa { box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45); } .theme-3 .fr-msg--cab.fr-cab--fura { border-left-color: #ff9d94; color: #ffb3ab; } .theme-3 .fr-msg--cab.fr-cab--limite { border-left-color: #f0c860; color: #f0c860; } :root { --yb-superficie: #ffffff; } .theme-3 { --yb-superficie: #33424a; } .yb-grp { pointer-events: auto; cursor: pointer; position: relative; padding-right: 26px !important; user-select: none; -webkit-user-select: none; transition: color .14s ease; } .yb-grp:hover { color: #fff; } .yb-grp:focus-visible { outline: 2px solid var(--ds-green); outline-offset: -2px; } .yb-grp .yb-grp-seta { pointer-events: none; } .yb-grp-seta { position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .55; transform: rotate(45deg); transition: transform .16s ease, opacity .14s ease; } .yb-grp:hover .yb-grp-seta { opacity: .95; } .yb-grp.is-fechado .yb-grp-seta { transform: rotate(-45deg); } .yb-grp.is-fechado { opacity: .62; } .yb-grp.is-fechado:hover { opacity: 1; } .yb-grp.is-aqui::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 12px; margin-top: -6px; background: var(--ds-green); border-radius: 0 2px 2px 0; } .yb-grp-oculto { display: none !important; } .mfe .mfe-funcoes { margin-top: 16px; } .mfe .mfe-proposta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 11px 14px; margin-bottom: 16px; border: 1px dashed var(--ds-line); border-radius: var(--ds-radius-s); } .mfe .mfe-proposta-txt { flex: 1 1 260px; font-size: 12.5px; line-height: 1.7; color: var(--ds-muted); } .mfe .mfe-proposta-txt b { color: var(--ds-ink); } .mfe .mfe-sug { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 5px 0 0; background: var(--ds-grey); border-radius: 6px; padding: 2px 8px; font-size: 12px; color: var(--ds-ink); } .mfe .mfe-sug i { font-style: normal; font-size: 10.5px; color: var(--ds-muted); } .mfe .mfe-tabela-f { width: 100%; margin-bottom: 14px; } .mfe .mfe-min-f { width: 72px; text-align: center; font-variant-numeric: tabular-nums; } .mfe .mfe-acoes-f { text-align: right; white-space: nowrap; } .mfe .mfe-act { border: 0; background: none; padding: 2px 6px; font-size: 12px; color: var(--ds-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .mfe .mfe-act:hover { color: var(--ds-ink); } .mfe .mfe-sem-folga td { background: rgba(214, 158, 46, 0.07); } .mfe .mfe-alerta { margin-left: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #8a6410; background: rgba(214, 158, 46, 0.16); padding: 2px 7px; border-radius: 999px; } .mfe .mfe-nova-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; } .mfe .mfe-nova-f .ds-input { flex: 1 1 240px; min-width: 0; max-width: 380px; } .mfe .mfe-matriz-titulo { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-muted); margin: 4px 0 8px; padding-top: 14px; border-top: 1px solid var(--ds-line); } .mfe .mfe-matriz-fora { overflow-x: auto; } .mfe .mfe-matriz { width: 100%; min-width: 420px; } .mfe .mfe-matriz th, .mfe .mfe-matriz td { white-space: nowrap; } .mfe .mfe-col-f { text-align: center; width: 1%; } .mfe .mfe-col-f input { margin: 0; cursor: pointer; } .mfe .mfe-herdado { margin-left: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-muted); border: 1px dashed var(--ds-line); padding: 1px 6px; border-radius: 999px; } .theme-3 .mfe .mfe-sem-folga td { background: rgba(240, 200, 96, 0.07); } .theme-3 .mfe .mfe-alerta { color: #f0c860; background: rgba(240, 200, 96, 0.16); } .mp .mp-explica { margin: 0 0 14px; padding: 11px 14px; border-radius: 9px; background: var(--ds-grey); border-left: 3px solid var(--ds-green); font-size: 12.5px; line-height: 1.65; color: var(--ds-muted); max-width: 92ch; } .mp .mp-explica b { color: var(--ds-ink); } .mp .mp-sem-funcoes { padding: 20px 22px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 5px; border-left: 3px solid #d69e2e; } .mp .mp-sem-funcoes b { font-size: 14px; color: var(--ds-ink); } .mp .mp-sem-funcoes span { font-size: 13px; line-height: 1.6; color: var(--ds-muted); max-width: 74ch; } .mp .mp-dia--coberto { background: var(--ds-grey); } .mp .mp-dia--limite { background: rgba(214, 158, 46, 0.18); } .mp .mp-dia--limite .mp-v { color: #8a6410; } .mp .mp-dia--descoberto { background: rgba(169, 68, 66, 0.2); } .mp .mp-dia--descoberto .mp-v { color: #a94442; font-weight: 700; } .mp-cob-resumo { padding: 12px 0 14px; border-bottom: 1px solid var(--ds-line); font-size: 13px; color: var(--ds-muted); } .mp-cob-resumo b { color: var(--ds-ink); font-variant-numeric: tabular-nums; } .mp-cob-lista { padding: 14px 0; display: flex; flex-direction: column; gap: 8px; } .mp-cob-f { border: 1px solid var(--ds-line); border-left-width: 3px; border-radius: 9px; padding: 10px 12px; } .mp-cob-f--ok { border-left-color: var(--ds-green); } .mp-cob-f--fina { border-left-color: #d69e2e; } .mp-cob-f--descoberta { border-left-color: #a94442; } .mp-cob-f--sem-ninguem { border-left-color: var(--ds-line); opacity: .7; } .mp-cob-f-topo { display: flex; align-items: baseline; gap: 10px; } .mp-cob-f-topo b { font-size: 13.5px; color: var(--ds-ink); } .mp-cob-n { margin-left: auto; font-size: 12px; color: var(--ds-muted); font-variant-numeric: tabular-nums; } .mp-cob-f-sub { margin-top: 3px; font-size: 12px; color: var(--ds-muted); line-height: 1.5; } .mp-cob-fora { margin-top: 5px; font-size: 12px; color: var(--ds-text); line-height: 1.5; } .theme-3 .mp .mp-dia--limite { background: rgba(240, 200, 96, 0.16); } .theme-3 .mp .mp-dia--limite .mp-v { color: #f0c860; } .theme-3 .mp .mp-dia--descoberto { background: rgba(255, 157, 148, 0.18); } .theme-3 .mp .mp-dia--descoberto .mp-v { color: #ff9d94; } .theme-3 .mp .mp-sem-funcoes { border-left-color: #f0c860; } .theme-3 .mp-cob-f--fina { border-left-color: #f0c860; } .theme-3 .mp-cob-f--descoberta { border-left-color: #ff9d94; } .sk { padding: 6px 2px 14px; } .sk-topo { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--ds-line); } .sk-linha { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--ds-line); } .sk-b { position: relative; height: 11px; border-radius: 4px; background: var(--ds-grey); overflow: hidden; flex: 0 0 auto; } .sk-b::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%); transform: translateX(-180%); animation: skBrilho 1.25s ease-in-out infinite; will-change: transform; } @keyframes skBrilho { from { transform: translateX(-180%); } to { transform: translateX(320%); } } .sk-b--lg { width: 130px; height: 13px; } .sk-b--md { width: 80px; height: 13px; } .sk-b--sm { width: 54px; height: 13px; } .sk-b--nr { width: 42px; } .sk-b--data { width: 86px; } .sk-b--cli { width: 150px; } .sk-b--mor { flex: 1 1 auto; min-width: 80px; } .sk-b--est { width: 70px; } .sk-b--ac { width: 58px; } .sk-nota { padding: 14px 12px 0; font-size: 12.5px; color: var(--ds-muted); } @media (prefers-reduced-motion: reduce) { .sk-b::after { animation: none; opacity: .25; transform: none; width: 100%; } } .theme-3 .sk-b { background: rgba(255, 255, 255, 0.07); } .theme-3 .sk-b::after { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.13) 50%, transparent 100%); } .ds-nr--lig { color: var(--ds-ink); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } .ds-nr--lig:hover, .ds-nr--lig:focus { color: var(--ds-green); text-decoration-style: solid; } .cf-caixa--larga { max-width: 560px; } .cf-caixa--rola { display: flex; flex-direction: column; overflow: hidden; } .cf-rolo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -10px; padding-right: 10px; } .cf-caixa--rola .cf-accoes { flex: 0 0 auto; } .ds-cart-linha { padding: 7px 0; border-top: 1px solid var(--ds-line); } .ds-cart-linha:first-of-type { border-top: 0; padding-top: 2px; } .api-codigo { margin: 10px 0 0; padding: 12px 14px; background: var(--ds-grey); border: 1px solid var(--ds-line); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; color: var(--ds-text); white-space: pre; overflow-x: auto; } .api-linha { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .api-chave-campo { flex: 1 1 auto; font-family: ui-monospace, Menlo, Consolas, monospace; } .api-chave { flex: 1 1 auto; padding: 8px 12px; background: var(--ds-grey); border: 1px solid var(--ds-line); border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--ds-ink); word-break: break-all; } .api-ex-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .api-aviso { margin-top: 10px; padding: 10px 12px; border-radius: 8px; border-left: 3px solid #d69e2e; background: var(--ds-grey); font-size: 12.5px; line-height: 1.55; color: var(--ds-text); } /* ---- leadsBoard.scss.css ---- */ @charset "UTF-8"; /* ============================================================================= CRM de Leads — estilos da página ============================================================================= ATENÇÃO ao alterar este ficheiro: o `app.js` importa o `leadsBoard.js` sem condição nenhuma, e este importa o SCSS. Ou seja, o que aqui estiver entra no ficheiro de estilos global e vale em TODAS as páginas, mesmo que ninguém abra o CRM. A versão anterior redefinia à cabeça `.btn-primary`, `.btn-success`, `.btn-warning`, `.card`, `.card-header`, `.card-body`, `.alert`, `.btn-sm`, `.nav-tabs > li > a` e as scrollbars de `.table-responsive`. Como é carregado depois do app.scss, ganhava: os botões primários da aplicação inteira eram #3498db em vez do #2E5ABD do tema, e os de sucesso #27ae60 em vez de #BDD52E. O fade de todos os cards da aplicação também vinha daqui (`.card{animation}`). Por isso agora TUDO vive dentro de `.leads-scope`, que só existe nesta página e no seu modal. Nada aqui pode escapar para fora. -------------------------------------------------------------------------- */ :root { --variante-a-color: #2E9AB2; --variante-b-color: #9b59b6; --variante-c-color: #F04e44; --variante-d-color: #f39c12; --status-novo: #2E5ABD; --status-contactado: #f39c12; --status-fechado: #7ea300; --status-perdido: #95a5a6; } /* Estas quatro cores foram escolhidas para texto sobre papel branco. No tema escuro o fundo do distintivo passa a ser translúcido sobre ardósia e o azul e o verde deixam de se ler — levantam-se aqui, num sítio só. O mesmo vale para as cores das variantes, que servem de fundo aos gráficos. */ .theme-3 { --status-novo: #7ea8ff; --status-contactado: #ffb547; --status-fechado: #b9d94a; --status-perdido: #aab6c0; --variante-a-color: #4cc0da; --variante-b-color: #bf82d8; --variante-c-color: #ff7a72; --variante-d-color: #ffb547; } .leads-scope { /* ---- Grelhas ------------------------------------------------------- */ /* ---- Cartões de variante ------------------------------------------- */ /* O .ds-kpicard-var traz white-space:nowrap, pensado para "vs mês anterior". Aqui a linha é "N simulações · N leads" e tem de poder quebrar em ecrã estreito. */ /* ---- Mini-gráfico --------------------------------------------------- As alturas das barras são postas pelo JS (onRendered → .mini-chart → [data-value]). Não mexer nos nomes destas quatro classes. */ /* ---- Distintivos de variante e de estado ---------------------------- */ /* ---- Tabelas -------------------------------------------------------- O grosso vem do .ds-salestable. Aqui só o que é próprio das leads. */ /* Destaque temporário da lead que acabou de chegar. A classe é posta e tirada pelo JS (Tracker.afterFlush → addClass/removeClass). */ /* ---- Simulações sem conversão --------------------------------------- */ /* ---- Modal de detalhe ----------------------------------------------- */ /* O .ds-shstate do sistema é uma linha; aqui os estados vazios e de espera têm ícone, título e explicação empilhados. */ } .leads-scope .leads-grid { display: grid; gap: 14px; margin-bottom: 14px; } .leads-scope .leads-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .leads-scope .leads-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .leads-scope .leads-panel { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } .leads-scope .leads-panel--split { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } @media (max-width: 991px) { .leads-scope .leads-grid--2, .leads-scope .leads-grid--3, .leads-scope .leads-panel--split { grid-template-columns: minmax(0, 1fr); } } .leads-scope .leads-vcard { position: relative; overflow: hidden; border-left: 3px solid var(--ds-line); } .leads-scope .leads-vcard--a { border-left-color: var(--variante-a-color); } .leads-scope .leads-vcard--b { border-left-color: var(--variante-b-color); } .leads-scope .leads-vcard--c { border-left-color: var(--variante-c-color); } .leads-scope .leads-vcard--d { border-left-color: var(--variante-d-color); } .leads-scope .ds-kpicard-var { white-space: normal; color: var(--ds-muted); font-weight: 600; } .leads-scope .leads-vcard-foot { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--ds-line); color: var(--ds-muted); } .leads-scope .leads-vcard-foot em { margin-right: 4px; } .leads-scope .leads-skeleton { align-items: center; justify-content: center; min-height: 150px; color: var(--ds-muted); } .leads-scope .leads-skeleton em { font-size: 28px; animation: ds-leads-spin 1.1s linear infinite; } .leads-scope .mini-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 2px; height: 42px; margin: 10px 0 4px; } .leads-scope .chart-bar { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 1px; height: 100%; cursor: default; } .leads-scope .chart-bar:hover { opacity: .75; } .leads-scope .bar-sim, .leads-scope .bar-lead { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; transition: height .3s ease; } .leads-scope .bar-sim { background: var(--ds-line); } .leads-scope .bar-lead { background: var(--ds-green); } .leads-scope .leads-vcard--a .bar-lead { background: var(--variante-a-color); } .leads-scope .leads-vcard--b .bar-lead { background: var(--variante-b-color); } .leads-scope .leads-vcard--c .bar-lead { background: var(--variante-c-color); } .leads-scope .leads-vcard--d .bar-lead { background: var(--variante-d-color); } .leads-scope .badge-variante { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--ds-muted); } .leads-scope .badge-variante-A { background: var(--variante-a-color); } .leads-scope .badge-variante-B { background: var(--variante-b-color); } .leads-scope .badge-variante-C { background: var(--variante-c-color); } .leads-scope .badge-variante-D { background: var(--variante-d-color); } .leads-scope .lead-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid currentColor; background: var(--ds-grey); } .leads-scope .lead-status-novo { color: var(--status-novo); } .leads-scope .lead-status-contactado { color: var(--status-contactado); } .leads-scope .lead-status-fechado { color: var(--status-fechado); } .leads-scope .lead-status-perdido { color: var(--status-perdido); } .leads-scope .lead-type { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--ds-muted); } .leads-scope .lead-type-pedido { background: #d64c3f; } .leads-scope .lead-type-callback { background: #e08a12; } .leads-scope .lead-detail-type { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 8px 12px; border-radius: var(--ds-radius-s); background: var(--ds-grey); border-left: 3px solid var(--ds-muted); } .leads-scope .lead-detail-type strong { font-size: 13px; color: var(--ds-text); } .leads-scope .lead-detail-type small { font-size: 12px; color: var(--ds-muted); } .leads-scope .lead-detail-type.type-pedido { border-left-color: #d64c3f; } .leads-scope .lead-detail-type.type-callback { border-left-color: #e08a12; } .leads-scope .lead-contact, .leads-scope .lead-route { display: flex; flex-direction: column; line-height: 1.35; } .leads-scope .lead-contact strong, .leads-scope .lead-route strong { font-size: 13px; color: var(--ds-text); } .leads-scope .lead-contact small, .leads-scope .lead-route small { font-size: 12px; color: var(--ds-muted); } .leads-scope .lead-route em { font-size: 11px; opacity: .6; } .leads-scope .lead-simflag { color: var(--ds-green-d) !important; font-weight: 600; } .leads-scope .lead-row.new-lead > td { animation: ds-leads-newlead 1.4s ease-in-out 3; } .leads-scope .leads-simcard .simulations-list { max-height: 520px; overflow-y: auto; margin-top: 6px; } .leads-scope .simulation-item { padding: 9px 11px; margin-bottom: 8px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-s); background: var(--ds-grey); } .leads-scope .simulation-item:last-child { margin-bottom: 0; } .leads-scope .simulation-item.sim-old { opacity: .6; } .leads-scope .simulation-item p { margin: 2px 0; } .leads-scope .simulation-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .leads-scope .simulation-header small { color: var(--ds-muted); font-size: 11.5px; } .leads-scope .simulation-route small { color: var(--ds-text); font-size: 12.5px; } .leads-scope .simulation-price { display: flex; align-items: baseline; gap: 8px; } .leads-scope .simulation-price strong { color: var(--ds-ink); font-size: 14px; } .leads-scope .simulation-price span { color: var(--ds-muted); font-size: 12px; } .leads-scope .simulation-urg small { color: var(--status-contactado); font-weight: 600; } .leads-scope .leads-textarea { min-height: 84px; resize: vertical; margin-bottom: 10px; } .leads-scope .leads-kv-meta strong { color: var(--ds-muted); font-weight: 600; } .leads-scope .leads-simlink { border-left: 3px solid var(--ds-green); } .leads-scope .tags-container { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .leads-scope .tag-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ds-text); background: var(--ds-grey); border: 1px solid var(--ds-line); } .leads-scope .tag-item .remove-tag { color: var(--ds-muted); text-decoration: none; line-height: 1; } .leads-scope .tag-item .remove-tag:hover { color: #b3261e; } .leads-scope .comments-list { display: flex; flex-direction: column; gap: 8px; } .leads-scope .comment-item { padding: 9px 11px; border-radius: var(--ds-radius-s); background: var(--ds-grey); border-left: 2px solid var(--ds-line); } .leads-scope .comment-header { display: flex; align-items: baseline; gap: 8px; } .leads-scope .comment-header strong { font-size: 13px; color: var(--ds-text); } .leads-scope .comment-header small { font-size: 11.5px; color: var(--ds-muted); } .leads-scope .comment-text { margin: 4px 0 0; font-size: 13px; color: var(--ds-text); } .leads-scope .history-list { display: flex; flex-direction: column; gap: 6px; } .leads-scope .history-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ds-line); font-size: 12.5px; } .leads-scope .history-item:last-child { border-bottom: 0; } .leads-scope .history-item small { color: var(--ds-muted); } .leads-scope .history-item strong { color: var(--ds-text); } .leads-scope .ds-shstate { flex-direction: column; gap: 6px; text-align: center; } .leads-scope .ds-shstate em { font-size: 34px; opacity: .5; } .leads-scope .ds-shstate strong { font-size: 15px; color: var(--ds-text); } .leads-scope .ds-shstate small { color: var(--ds-muted); } .leads-scope .ds-shstate-spin { animation: ds-leads-spin 1.1s linear infinite; } /* Com as cores levantadas para o fundo escuro, o texto branco por cima delas deixa de contrastar. Nos distintivos cheios inverte-se para tinta escura. */ .theme-3 .leads-scope .badge-variante { color: #101a26; } /* ---- Animações ----------------------------------------------------------- Prefixadas: as anteriores chamavam-se `spin`, `fadeIn`, `pulse` e `slideDown`, nomes que qualquer outro ficheiro da aplicação podia estar a usar — @keyframes é sempre global e o último a ser definido ganha. */ @keyframes ds-leads-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ds-leads-newlead { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(190, 214, 47, 0.22); } } /* Pares rótulo/valor da ficha da lead. O .ds-kv do sistema é só tipografia — não posiciona nada — e aqui os dois / são elementos em linha: colavam-se um ao outro e lia-se "NomeMarcelo". Rótulo à esquerda, valor à direita, com espaço garantido entre os dois. */ .leads-scope .ds-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 7px 0; } .leads-scope .ds-kv > span { flex: 0 0 auto; color: var(--ds-muted); font-size: 12.5px; } .leads-scope .ds-kv > strong { min-width: 0; text-align: right; overflow-wrap: anywhere; } /* ---- manutencaoEnderecos.css ---- */ /* Manutenção de Endereços — só o que é próprio desta página. Tudo o resto (cartão, tabela, botões, estados) vem do design system. O ficheiro anterior pintava as cores à mão: #fff no cartão, #f8fafc nos cabeçalhos, #475569 no texto. Isso funciona em papel branco e desaparece no tema escuro, onde o fundo da página também é escuro — cartão branco com texto quase preto sobre ardósia. Aqui usam-se os tokens --ds-*, que se invertem sozinhos no .theme-3. */ /* Contagem de grupos ao lado do nome do cliente: empurrada para a direita do título, sem a tirar da linha. */ .ds-mant-count { margin-left: auto; flex: 0 0 auto; } /* Cada cliente é um cartão; os grupos dentro dele separam-se por espaço em branco, não por molduras dentro de molduras. */ /* Só ENTRE grupos. Com :first-of-type não resultava: o primeiro filho do cartão é o título, por isso o "primeiro div" nunca é um grupo e a regra nunca pegava — o primeiro grupo ficava afastado do título sem razão. */ .ds-mant-group + .ds-mant-group { margin-top: 18px; } .ds-mant-grouphead { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; margin-bottom: 8px; background: var(--ds-grey); border-radius: var(--ds-radius-s); font-size: 12.5px; font-weight: 700; color: var(--ds-text); } .ds-mant-grouphead span { font-weight: 400; color: var(--ds-muted); } /* A morada é o campo que decide se duas linhas são a mesma porta: precisa de caber inteira. A versão anterior tinha table-layout:fixed com nowrap e ellipsis — cortava exactamente a informação de que se precisa para comparar. */ .ds-mant-addr { min-width: 220px; white-space: normal; overflow-wrap: anywhere; } .ds-mant-coord { font-size: 11px; background: var(--ds-grey); color: var(--ds-muted); padding: 2px 6px; border-radius: 4px; white-space: nowrap; } /* Estados da página: à espera de procurar, a procurar, e nada encontrado. Antes destes três, o ecrã ficava simplesmente vazio — igual a "avariado". */ .ds-mant-msg { display: flex; align-items: center; gap: 14px; color: var(--ds-muted); font-size: 13px; line-height: 1.5; } .ds-mant-msg em { font-size: 26px; flex: 0 0 auto; color: var(--ds-muted); } .ds-mant-msg p { margin: 0; max-width: 70ch; } .ds-mant-msg b { color: var(--ds-text); } .ds-mant-spin { animation: ds-mant-rodar 1s linear infinite; } @keyframes ds-mant-rodar { to { transform: rotate(360deg); } } /* Espaço entre cartões de clientes. */ .ds-mant-client + .ds-mant-client { margin-top: 16px; }

…