/* ============================================================================ O painel da DeixaAI. Isto NÃO é o site. No site alguém passa dois minutos e precisa ser convencido; aqui alguém passa oito horas e precisa enxergar rápido. Por isso nada de degradê de enfeite, nada de sombra em tudo, nada de letra grande gritando. A cor forte fica reservada para uma coisa só: o que precisa de gente agora. A tipografia é uma família só, IBM Plex Sans, desenhada para interface e com acentuação boa em português. A Poppins do logotipo aparece só na marca, que é onde ela tem razão de existir. ========================================================================= */ :root { /* Neutros puxados para o azul da marca: cinza puro parece descuido, cinza com um fio de azul parece escolha. */ --chao: #F4F6FB; --papel: #FFFFFF; --tinta: #101A2E; --fraca: #5C6880; --linha: #DDE2EE; --linha-forte: #C7CFE2; /* A cor do texto que fica EM CIMA de --tinta. Sem ela, o tema escuro colocaria branco sobre um fundo que virou claro, e o rótulo some. */ --sobre-tinta: #FFFFFF; /* A cor do texto EM CIMA do verde do botão que confirma dinheiro. No tema claro o verde é escuro e o texto é branco; no escuro o verde é hortelã, e branco sobre hortelã apaga o rótulo justamente no botão que move dinheiro. */ --sobre-feito: #FFFFFF; --azul: #2E4BDA; /* ação: só botão e link */ --azul-forte: #2540BE; /* o mesmo azul, um passo mais firme, para o hover */ --azul-agua: #EDF1FE; --marca: #0B1220; /* o breu da barra lateral */ /* Semânticas. Não são enfeite: cada uma quer dizer uma coisa só. */ --gente: #C2334A; /* precisa de gente agora */ --gente-fundo:#FCEDEF; --pessoa: #9A6400; /* a conversa está na mão de alguém */ --pessoa-fundo:#FDF3E0; --feito: #12805C; /* resolvido, entregue, no lugar */ --feito-fundo:#E8F6F0; /* As seis cores do gráfico "Evolução, dia a dia" da tela de Qualidade, uma por critério -- ver `qualidade.CORES_DA_EVOLUCAO`. São os encaixes 2 a 7 de uma paleta categórica de oito tons já testada contra daltonismo (deuteranopia/protanopia) e contraste; o azul do encaixe 1 fica fora porque a linha "Passou em tudo" já usa `--azul`. Cor de gráfico muda com o tema como qualquer outra: não existe token que valha só no claro. */ --graf-laranja: #EB6834; --graf-agua: #1BAF7A; --graf-amarelo: #EDA100; --graf-magenta: #E87BA4; --graf-verde: #008300; --graf-violeta: #4A3AA7; --fonte: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --logo: "Poppins", var(--fonte); --e1: 4px; --e2: 8px; --e3: 14px; --e4: 22px; --e5: 34px; --e6: 52px; --canto: 10px; --rail: 236px; } /* ---- o tema escuro ------------------------------------------------------- Quem atende passa o dia inteiro nesta tela, e boa parte desse dia é de noite. O tema escuro não é enfeite: é o que evita a tela branca queimando a vista de madrugada num plantão. Três estados, e a ordem importa. Sem escolha feita, vale o que o sistema operacional da pessoa diz. Com escolha feita, vale a escolha, nos dois sentidos: escuro no sistema e claro escolhido tem que dar claro. Só os tokens mudam. Nenhum componente daqui para baixo sabe que existe tema escuro, e é por isso que o tema não precisa ser refeito toda vez que uma tela nova nasce. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --chao: #0D1220; --papel: #151B2C; --tinta: #E7EBF5; --fraca: #98A3BC; --linha: #26304A; --linha-forte: #3A4665; --sobre-tinta: #101A2E; --sobre-feito: #0B1220; --azul: #7D95FF; --azul-forte: #9AAEFF; --azul-agua: #1B2440; --marca: #080C16; --gente: #FF8095; --gente-fundo:#3A1A22; --pessoa: #E8B04A; --pessoa-fundo:#3A2C13; --feito: #4FD1A5; --feito-fundo:#12312A; --graf-laranja: #D95926; --graf-agua: #199E70; --graf-amarelo: #C98500; --graf-magenta: #D55181; --graf-verde: #008300; --graf-violeta: #9085E9; } } :root[data-tema="escuro"] { --chao: #0D1220; --papel: #151B2C; --tinta: #E7EBF5; --fraca: #98A3BC; --linha: #26304A; --linha-forte: #3A4665; --sobre-tinta: #101A2E; --sobre-feito: #0B1220; --azul: #7D95FF; --azul-forte: #9AAEFF; --azul-agua: #1B2440; --marca: #080C16; --gente: #FF8095; --gente-fundo:#3A1A22; --pessoa: #E8B04A; --pessoa-fundo:#3A2C13; --feito: #4FD1A5; --feito-fundo:#12312A; --graf-laranja: #D95926; --graf-agua: #199E70; --graf-amarelo: #C98500; --graf-magenta: #D55181; --graf-verde: #008300; --graf-violeta: #9085E9; } /* O azul do botão principal clareia no tema escuro, e texto branco em cima de azul claro não se lê. O texto do botão acompanha o fundo. */ :root[data-tema="escuro"] .botao--principal, :root[data-tema="escuro"] .botao--principal:hover { color: #0E1526; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .botao--principal, :root:not([data-tema="claro"]) .botao--principal:hover { color: #0E1526; } } * { box-sizing: border-box; } /* `hidden` tem que ganhar de qualquer regra nossa. Sem o !important, um seletor com classe (`.escrita button { display: grid }`) vence a regra do navegador e o elemento escondido continua na tela: foi assim que o botão de gravar apareceu em aparelho que não sabe gravar, e clicar nele não fazia nada. */ [hidden] { display: none !important; } /* Um ícone é sempre desenhado do mesmo jeito: traço, nunca preenchimento, e o tamanho vem do texto ao lado. Ícone que muda de peso de tela para tela é o que faz um painel parecer feito por três pessoas diferentes. */ .ic { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ic--grande { width: 22px; height: 22px; } html, body { height: 100%; } body { margin: 0; background: var(--chao); color: var(--tinta); font: 15px/1.55 var(--fonte); -webkit-font-smoothing: antialiased; } a { color: var(--azul); } h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 var(--e1); } h2 { font-size: 1.06rem; font-weight: 600; margin: 0 0 var(--e2); } h3 { font-size: .96rem; font-weight: 600; margin: 0 0 var(--e1); } p { margin: 0 0 var(--e2); } .fraca { color: var(--fraca); } .miudo { font-size: .82rem; } .numero { font-variant-numeric: tabular-nums; } /* Valor em coluna e em cartão de número não quebra no meio: no celular o "R$" ia para uma linha e o valor para a outra (Custo de IA, 23/09/2026). */ td.numero, .numeros b.numero { white-space: nowrap; } /* ---- o esqueleto: trilho fixo à esquerda, trabalho à direita ------------- */ /* `minmax(0, 1fr)` e não `1fr`: uma faixa `1fr` tem largura mínima automática, ou seja, ela se recusa a ficar menor que o conteúdo dela. Bastava um seletor com uma opção comprida ("Griffin Rastreamento (demonstração)") para a faixa inteira crescer e a página rolar de lado no celular. Esta é a razão de `minmax(0, ...)` aparecer em toda grade daqui para baixo. */ .tela { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; } .trilho { background: var(--marca); color: #fff; padding: var(--e4) var(--e3); display: flex; flex-direction: column; gap: var(--e4); position: sticky; top: 0; /* O trilho não rola: quem rola é a lista de itens, lá embaixo. Rolando o trilho inteiro, quem trabalha na DeixaAI (que vê o menu completo) perdia o Sair e a escolha de aparência para fora da tela, e não tinha como saber que eles existiam. */ height: 100vh; overflow: hidden; } .trilho__marca { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-family: var(--logo); font-weight: 700; font-size: 1.14rem; letter-spacing: -.03em; } .trilho__marca svg { width: 26px; height: 26px; flex: none; } .trilho__marca .ia { color: #8CA0FF; } .trilho nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; margin-bottom: auto; /* espaço para a barra não passar por cima do texto do item */ padding-right: 6px; margin-right: -4px; /* A barra de rolagem do sistema é clara, e clara sobre o azul escuro do trilho vira um risco branco no meio do menu. Aqui ela é da cor do próprio trilho, um pouco mais clara: aparece quando precisa e não disputa atenção com os itens. */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; } .trilho nav::-webkit-scrollbar { width: 6px; } .trilho nav::-webkit-scrollbar-track { background: transparent; } .trilho nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 99px; } .trilho nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); } .trilho nav a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; color: rgba(255,255,255,.72); text-decoration: none; font-size: .92rem; } .trilho nav a:hover { background: rgba(255,255,255,.07); color: #fff; } .trilho nav a[aria-current="page"] { background: rgba(255,255,255,.13); color: #fff; font-weight: 500; } .trilho nav a .conta { margin-left: auto; background: var(--gente); color: #fff; border-radius: 99px; padding: 0 7px; font-size: .74rem; font-weight: 600; line-height: 18px; } /* Vermelho quer dizer "alguém está esperando". Quantidade de agentes é informação, não urgência: pintar de vermelho ensina o olho a ignorar o vermelho, e aí o número que importa deixa de ser visto. */ .trilho nav a .conta--calma { background: rgba(255,255,255,.16); color: rgba(255,255,255,.9); } .trilho__grupo { font-size: .74rem; color: rgba(255,255,255,.38); padding: 0 11px var(--e1); letter-spacing: .01em; } .trilho__pe { margin-top: auto; font-size: .82rem; color: rgba(255,255,255,.6); } .trilho__pe strong { display: block; color: #fff; font-weight: 500; } .trilho__pe a { color: rgba(255,255,255,.6); } .trilho select { width: 100%; background: rgba(255,255,255,.08); color: #fff; font-family: inherit; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 7px 9px; font-size: .88rem; } .trilho select option { color: #101A2E; } /* A área de trabalho para em 1440px, e não em 1180: numa tela de 1512 sobrava uma faixa de quase cem pixels de nada à direita de toda tela do painel. O teto continua existindo porque texto de ponta a ponta num monitor de 27 polegadas é linha que ninguém termina de ler. */ .obra { padding: var(--e5) var(--e5) var(--e6); max-width: 1440px; } .obra__topo { margin-bottom: var(--e4); } /* ---- superfícies -------------------------------------------------------- Borda e fundo dizem "outro objeto". Sombra é cara: só o que precisa flutuar sobre o resto ganha uma, e quase nada precisa. */ .painel { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--canto); } .painel--pad { padding: var(--e4); } /* ---- lista de conversas -------------------------------------------------- */ .duas-colunas { display: grid; grid-template-columns: 340px 1fr; gap: var(--e3); align-items: start; } /* As variações moram aqui, e não num `style` na página: o estilo escrito na página ganha da regra do celular, e foi assim que Agentes, O que ela sabe e Respostas rápidas passaram da largura da tela até 22/09/2026. */ .duas-colunas--lado { grid-template-columns: minmax(0, 1fr) 340px; } .duas-colunas--lado-largo { grid-template-columns: minmax(0, 1fr) 380px; } .duas-colunas--lado-esquerdo { grid-template-columns: 380px minmax(0, 1fr); } @media (max-width: 900px) { .duas-colunas, .duas-colunas--lado, .duas-colunas--lado-largo, .duas-colunas--lado-esquerdo { grid-template-columns: minmax(0, 1fr); } } /* Campos lado a lado num formulário curto (convidar alguém, comando novo). No computador as colunas vêm de `--colunas`; no celular é um campo por linha, senão cada um fica com três letras de largura. */ .linha-de-campos { display: grid; gap: var(--e3); align-items: end; grid-template-columns: var(--colunas, repeat(auto-fit, minmax(160px, 1fr))); } .linha-de-campos .campo { margin: 0; } @media (max-width: 720px) { .linha-de-campos { grid-template-columns: minmax(0, 1fr); } } /* A conversa e a ficha do cliente lado a lado quando a tela permite: quem atende olha a ficha ANTES de responder, e ficha embaixo da conversa é ficha que ninguém rola para ver. */ .trabalho { display: grid; gap: var(--e3); align-items: start; } @media (min-width: 1240px) { .trabalho { grid-template-columns: 1fr 300px; } .trabalho__largo { grid-column: 1 / -1; } } .fila { list-style: none; margin: 0; padding: 0; } .fila li + li { border-top: 1px solid var(--linha); } .fila a { display: block; padding: var(--e3) var(--e3) var(--e3) calc(var(--e3) + 3px); color: inherit; text-decoration: none; border-left: 3px solid transparent; } .fila a:hover { background: var(--chao); } .fila a[aria-current="true"] { background: var(--azul-agua); border-left-color: var(--azul); } .fila a.chama { border-left-color: var(--gente); } .fila a.humana { border-left-color: var(--pessoa); } .fila__linha { display: flex; align-items: baseline; gap: var(--e2); } .fila__nome { font-weight: 600; } .fila__hora { margin-left: auto; font-size: .78rem; color: var(--fraca); } .fila__pe { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-height: 14px; } /* Os marcadores do canto: um pontinho colorido em vez de uma etiqueta escrita. A etiqueta "esperando gente" por extenso ocupava uma linha inteira em cada contato, e a fila cabia cinco em vez de nove. */ .fila__sinal { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-left: auto; } .fila__sinal--gente { background: var(--gente); box-shadow: 0 0 0 3px var(--gente-fundo); } .fila__sinal--pessoa { background: var(--pessoa); box-shadow: 0 0 0 3px var(--pessoa-fundo); } .fila__assunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fila__origem { display: inline-flex; align-items: center; } .fila__origem .ponto { margin: 0; } .fila__previa { margin: 3px 0 0; color: var(--fraca); font-size: .87rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- etiqueta de estado -------------------------------------------------- */ .etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 500; white-space: nowrap; } .etiqueta--gente { background: var(--gente-fundo); color: var(--gente); } .etiqueta--pessoa { background: var(--pessoa-fundo); color: var(--pessoa); } .etiqueta--feito { background: var(--feito-fundo); color: var(--feito); } .etiqueta--calma { background: var(--azul-agua); color: var(--azul); } .etiqueta--neutra { background: var(--chao); color: var(--fraca); } /* A etiqueta que também é filtro: os números do alto da fila. Clicar mostra só aquelas conversas (pedido do Daniel em 23/09/2026), e a que está valendo ganha contorno da própria cor, para ninguém ler a lista filtrada como se fosse a fila inteira. */ a.etiqueta { text-decoration: none; cursor: pointer; transition: filter .15s; } a.etiqueta:hover { filter: brightness(1.2); } a.etiqueta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } a.etiqueta[aria-current="true"] { box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 600; } /* ---- a conversa ---------------------------------------------------------- */ .conversa { display: flex; flex-direction: column; min-height: 62vh; } .conversa__topo { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); flex-wrap: wrap; flex: none; } .conversa__quem { font-weight: 600; } .conversa__fio { padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2); } .fala { max-width: 74%; padding: 9px 13px; border-radius: 12px; font-size: .95rem; } .fala--cliente { background: var(--chao); border-bottom-left-radius: 3px; } .fala--ia { background: var(--azul-agua); align-self: flex-end; border-bottom-right-radius: 3px; } .fala--humano { background: var(--feito-fundo); align-self: flex-end; border-bottom-right-radius: 3px; } /* Código Pix e link de fatura são palavras de 150 caracteres sem espaço nenhum. Sem quebra forçada, a bolha estoura para fora do balão e a conversa inteira ganha rolagem horizontal -- foi o que aconteceu com o primeiro Pix enviado em produção, em 15/09/2026. `anywhere` quebra só quando não há outro jeito, então texto normal continua quebrando por palavra. */ .fala p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .fala a { overflow-wrap: anywhere; } .fala time { display: block; margin-top: 4px; font-size: .72rem; color: var(--fraca); font-variant-numeric: tabular-nums; } .fala--nao-chegou { box-shadow: inset 0 0 0 1px var(--gente); } /* ---- o volante: o controle mais importante do sistema ------------------- Duas metades, e a que está acesa diz quem responde agora. Ler isso não pode depender de lembrar o que um botão faz. */ .volante { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 99px; overflow: hidden; background: var(--papel); } .volante button { border: 0; background: transparent; font: inherit; font-size: .86rem; cursor: pointer; padding: 6px 14px; color: var(--fraca); display: flex; align-items: center; gap: 6px; transition: background .14s ease, color .14s ease; } .volante button:hover { background: var(--chao); } .volante [data-ativo="sim"] { background: var(--tinta); color: var(--sobre-tinta); font-weight: 500; cursor: default; } .volante [data-ativo="sim"]:hover { background: var(--tinta); } .volante form { margin: 0; display: flex; } /* ---- formulários --------------------------------------------------------- */ label.campo { display: block; margin-bottom: var(--e3); } label.campo > span { display: block; font-size: .84rem; color: var(--fraca); margin-bottom: 4px; } input, textarea, select, .caixa { width: 100%; padding: 9px 11px; border: 1px solid var(--linha-forte); border-radius: 8px; font: inherit; background: var(--papel); color: var(--tinta); } textarea { resize: vertical; } /* O SELETOR DE COR NÃO É UM CAMPO DE TEXTO, e a regra de cima o trata como um. Com `padding: 9px 11px` sobre a altura natural dele, a amostra da cor encolhe até virar um risco fino, e a cor escura de um produto fica indistinguível do fundo: na tela de Produtos as três cores do Sistema Florestal apareciam como três linhas vazias, e quem olhou entendeu "não tem cor cadastrada" sobre um produto que tinha as três. Altura própria e miolo colado na borda: o que se vê é a cor, que é a única coisa que este campo tem para mostrar. */ input[type="color"] { height: 42px; padding: 4px; cursor: pointer; } /* CAIXA DE MARCAR NÃO É CAMPO DE TEXTO, e a regra de cima também a esticava: `width: 100%` num checkbox vira um retângulo azul do tamanho da coluna, que ninguém reconhece como caixa de marcar. Na tela de Aprovações isso pintou um bloco azul gigante ao lado de cada fatura. As telas que precisavam disso já consertavam em casa, uma a uma; a correção mora aqui, onde o defeito nasce. */ input[type="checkbox"], input[type="radio"] { width: auto; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); } .ajuda { display: block; font-size: .8rem; color: var(--fraca); margin-top: 4px; } .botao { display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; } .botao--principal { background: var(--azul); color: #fff; } .botao--principal:hover { background: var(--azul-forte); } /* O verde é do que confirma dinheiro. Ele existia escrito à mão dentro do template (`style="background:var(--feito)"`), e um botão escrito na página é um botão que a próxima tela vai copiar com outro tom. */ .botao--feito { background: var(--feito); color: var(--sobre-feito); } .botao--feito:hover { filter: brightness(.94); } .botao--calmo { background: var(--papel); color: var(--tinta); border: 1px solid var(--linha-forte); } .botao--calmo:hover { background: var(--chao); } .botao--perigo { background: transparent; color: var(--gente); border: 1px solid transparent; padding: 9px 10px; } .botao--perigo:hover { background: var(--gente-fundo); } :focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* ---- tabela de dados ----------------------------------------------------- */ .rolagem { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .92rem; } th, td { padding: 10px var(--e3); text-align: left; border-bottom: 1px solid var(--linha); } th { font-weight: 500; color: var(--fraca); font-size: .82rem; } td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; } tbody tr:last-child td { border-bottom: 0; } tr.destacada td { background: var(--azul-agua); } /* ---- barra de consumo ---------------------------------------------------- */ .barra { height: 7px; background: var(--linha); border-radius: 99px; overflow: hidden; } .barra i { display: block; height: 100%; background: var(--azul); } .barra i.atencao { background: var(--pessoa); } .barra i.estourou { background: var(--gente); } /* ---- estados vazios: convite, não lápide --------------------------------- */ .vazio { padding: var(--e6) var(--e4); text-align: center; color: var(--fraca); display: flex; flex-direction: column; justify-content: center; min-height: 260px; } .vazio strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: var(--e1); } /* ---- recado -------------------------------------------------------------- */ .recado { border: 1px solid var(--linha); border-left: 3px solid var(--azul); background: var(--papel); border-radius: var(--canto); padding: var(--e3) var(--e4); margin-bottom: var(--e4); } .recado--feito { border-left-color: var(--feito); } .recado--gente { border-left-color: var(--gente); } .recado--aviso { border-left-color: var(--gente); } /* Ícone e frase na mesma linha, alinhados pelo topo: recado de duas linhas não pode deixar o ícone flutuando no meio do texto. */ .recado { display: flex; gap: var(--e2); align-items: flex-start; } .recado .ic { flex: none; margin-top: 2px; color: var(--fraca); } .recado--feito .ic { color: var(--feito); } .recado--aviso .ic { color: var(--gente); } .recados { margin-bottom: var(--e4); } .recados .recado { margin-bottom: var(--e2); } /* ---- subir arquivo ------------------------------------------------------- A área de soltar precisa parecer alvo antes de alguém arrastar nada, por isso a borda tracejada e a ilustração. Sem isso, o gestor procura o botão de anexo, não acha, e continua colando texto na mão. */ .coluna-empilhada { display: flex; flex-direction: column; gap: var(--e4); } .soltar__area { display: flex; flex-direction: column; align-items: center; gap: var(--e1); text-align: center; border: 2px dashed var(--linha); border-radius: var(--canto); padding: var(--e4) var(--e3); cursor: pointer; background: var(--fundo); transition: border-color .15s, background .15s; } .soltar__area:hover, .soltar__area:focus-within { border-color: var(--azul); background: var(--papel); } .soltar__area strong { color: var(--tinta); } .soltar__area input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .soltar--mirando .soltar__area { border-color: var(--azul); background: var(--papel); } .soltar__lista { margin: var(--e2) 0 0; color: var(--tinta); } .soltar__lista span { display: block; padding: 2px 0; } /* ---- a porta de entrada -------------------------------------------------- Não é uma tela de login: é a entrada da sala de plantão. A mesma pessoa abre isto trezentas vezes por ano, então manchete de propaganda aqui é decoração que ninguém lê duas vezes. O que ela precisa ver é o relógio: agora, a esta hora, tem alguém atendendo. É a única coisa grande da tela e a única que se move, e é ela que separa "robô de horário comercial" de "colega que virou a noite". A caixa de entrar atravessa a costura de propósito. Duas metades coladas leem como duas páginas; uma caixa que passa por cima da divisa lê como um prédio com uma porta. */ .corpo-da-porta { background: var(--breu-da-sala); } :root { --breu-da-sala: #080C16; --tinta-da-sala: #EEF1F8; /* O verde de "está de pé" do painel (#12805C) não se lê no breu. Este é o mesmo significado, claro o bastante para o fundo escuro. */ --plantao-vivo: #3ED8A0; } .porta { min-height: 100vh; display: grid; grid-template-columns: 1.35fr 1fr; background: var(--chao); } .plantao { position: relative; background: var(--breu-da-sala); color: var(--tinta-da-sala); padding: var(--e6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; overflow: hidden; } /* Duas luzes fracas nas cores da marca, nos cantos. Brilho atrás do logotipo faria ele parecer anúncio; nos cantos, ele só tira o breu de ser chapado. */ .plantao::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 48% at 6% 2%, rgba(46,75,218,.34), transparent 70%), radial-gradient(52% 46% at 94% 98%, rgba(108,76,240,.26), transparent 70%); } .plantao > * { position: relative; } .plantao__marca { margin-bottom: var(--e5); } .marca-porta { width: min(420px, 62vw); height: auto; display: block; overflow: visible; } .plantao__nome { font-family: var(--logo); font-weight: 700; color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); letter-spacing: -.035em; margin: var(--e2) 0 0; line-height: 1; } .plantao__nome span { background: linear-gradient(100deg, #7B92FF, #B79CFF); -webkit-background-clip: text; background-clip: text; color: transparent; } /* O D quase não se move: ele é a casa. Quem se move são as mensagens. O respiro de 1,5% acontece no instante em que elas entram, e é o "recebi" do desenho: sem ele, os traços passam por cima de uma forma morta. */ .marca-porta__d { transform-origin: 34px 32px; transform-box: fill-box; animation: recebeu 4.2s ease-in-out infinite; } @keyframes recebeu { 0%, 48%, 100% { transform: scale(1); } 62% { transform: scale(1.015); } } .risco { opacity: 0; animation: mensagem-chegando 4.2s cubic-bezier(.3,.7,.3,1) infinite; } .risco--2 { animation-delay: .5s; } .risco--3 { animation-delay: 1s; } /* Entra pela esquerda, atravessa e some dentro do D. O sumiço é dentro, e não antes: mensagem que desaparece no meio do caminho conta a história errada. */ @keyframes mensagem-chegando { 0% { transform: translateX(-14px); opacity: 0; } 18% { opacity: 1; } 56% { transform: translateX(26px); opacity: 1; } 70% { transform: translateX(34px); opacity: 0; } 100% { transform: translateX(34px); opacity: 0; } } .plantao__estado { display: inline-flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e4); } .plantao__sinal { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: rgba(238,241,248,.62); } .plantao__sinal i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--plantao-vivo); box-shadow: 0 0 0 4px rgba(62,216,160,.16); } /* O relógio deixou de ser o herói e virou o que sempre foi: a prova de que a frase acima é verdade agora. Tabular para os dígitos não dançarem a cada segundo, que é o defeito que faz relógio na tela irritar. */ .relogio { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; font-size: 1.02rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: rgba(238,241,248,.9); padding-left: var(--e3); border-left: 1px solid rgba(238,241,248,.16); } .plantao__turno { margin: 0 0 var(--e2); font-size: 1.24rem; line-height: 1.45; max-width: 34ch; color: var(--tinta-da-sala); font-weight: 500; } .plantao__data { margin: 0; font-size: .88rem; color: rgba(238,241,248,.45); } .plantao__pe { position: absolute; left: var(--e6); right: var(--e6); bottom: var(--e5); margin: 0; font-size: .9rem; line-height: 1.6; max-width: 52ch; margin-inline: auto; color: rgba(238,241,248,.42); border-top: 1px solid rgba(238,241,248,.1); padding-top: var(--e3); } @media (prefers-reduced-motion: reduce) { /* Sem movimento, as mensagens ficam paradas no lugar delas dentro da marca, e o desenho continua fazendo sentido: um D com três traços. */ .risco { animation: none; opacity: 1; transform: translateX(26px); } .marca-porta__d { animation: none; } } .porta__lado { display: grid; place-items: center; padding: var(--e5) var(--e4); background: var(--chao); } .porta__caixa { width: 100%; max-width: 380px; background: var(--papel); border: 1px solid var(--linha); border-radius: 16px; padding: var(--e5); /* Sombra puxada para o azul da marca, e não o cinza de sempre: a caixa encosta num campo azul-escuro, e sombra cinza ali parece sujeira. */ box-shadow: 0 22px 50px -20px rgba(11,18,32,.55); } .porta__marca { display: flex; align-items: center; gap: 9px; font-family: var(--logo); font-weight: 700; font-size: 1.16rem; letter-spacing: -.03em; color: var(--tinta); margin-bottom: var(--e4); } .porta__marca .ia { color: var(--azul); } .porta__marca svg, .porta__marca .marca-viva { width: 30px; height: 30px; } .porta__pe { margin-top: var(--e4); font-size: .86rem; } .porta__titulo { font-size: 1.3rem; margin: 0 0 var(--e1); } .porta__dica { color: var(--fraca); font-size: .9rem; margin: 0 0 var(--e4); } /* Na porta o recado é a única coisa colorida, e ele fica acima do formulário: embaixo do botão, quem errou a senha não vê e tenta de novo igual. */ .porta__caixa .recado { margin-bottom: var(--e3); padding: 10px var(--e3); } @media (max-width: 980px) { /* No celular a sala vira uma faixa curta em cima: o relógio continua sendo a primeira coisa, e o formulário fica a um polegar de distância. */ .porta { grid-template-columns: minmax(0, 1fr); } .plantao { padding: var(--e5) var(--e4) var(--e6); } .plantao__pe { display: none; } .plantao__marca { margin-bottom: var(--e4); } .marca-porta { width: min(300px, 70vw); } .plantao__turno { font-size: 1.04rem; } .porta__caixa { margin-top: -2.4rem; } /* A marca já está enorme logo acima. Repetir ela dentro do cartão, a dois centímetros de distância, é dizer duas vezes a mesma coisa no lugar em que a tela é mais curta. */ .porta__caixa .porta__marca { display: none; } .porta__lado { padding: 0 var(--e4) var(--e5); align-items: start; } } /* ========================================================================== O CELULAR: gaveta em vez de tira, e barra embaixo para o polegar ========================================================================== Medido em 21/09/2026, na tela do Daniel: o menu virava uma tira deitada com 27 itens, 2931px de largura, com 347px à vista. Alcançar "Integrações" ou "Sair" exigia arrastar 2584 pixels de dedo — sete larguras de tela — numa faixa de um centímetro. Ninguém chegava. Palavras dele: "ficamos sem funções porque não consegue deslizar a tela". Três mudanças, e cada uma resolve uma coisa: 1. O MENU VIRA GAVETA. Ele volta a ser uma lista vertical, com os grupos ("Atendimento", "Dinheiro"), um item por linha, como no computador — só que sai da esquerda quando se pede e some quando não se pede. Achar uma tela passa a ser ler uma lista, e não caçar numa esteira. 2. NASCE A BARRA DE BAIXO. Os quatro destinos do dia a dia ficam fixos onde o polegar alcança sem a mão trocar de posição. Dois toques chegam a qualquer lugar do sistema. 3. O TOPO ENCOLHE. Ele ocupava 170px de TODA tela, um quinto de um iPhone, para mostrar quatro itens de menu. Agora são 56px com a marca e a empresa, e os 114px voltam para o trabalho. ========================================================================== */ @media (max-width: 760px) { .tela { grid-template-columns: minmax(0, 1fr); } /* ---- a gaveta ---- */ .trilho { position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(310px, 86vw); height: 100dvh; padding: var(--e3); display: flex; flex-direction: column; gap: var(--e3); overflow-y: auto; overscroll-behavior: contain; /* fora da tela até alguém pedir. `translate` e não `display:none`: o menu continua existindo para quem lê a tela com o leitor, e o movimento diz de onde ele veio. */ transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 0 100vmax transparent; } .tela--menu-aberto .trilho { transform: translateX(0); } .trilho__marca { font-size: 1.06rem; margin: 0; } /* o seletor de empresa continua no topo da gaveta, onde ele é uma decisão consciente, e não um campo que se esbarra com o dedo ao rolar a página */ .trilho form { margin: 0; min-width: 0; } .trilho select { min-width: 0; width: 100%; } .trilho nav { /* QUEM ROLA É A GAVETA INTEIRA, e não a lista dentro dela. Com a lista rolando por dentro, o nome de quem está logado e o "Sair" ficavam grudados no pé, comendo altura em todo momento, e sobravam quatro itens à vista numa gaveta de tela cheia. */ flex-direction: column; flex-wrap: nowrap; overflow: visible; min-height: 0; gap: 2px; min-width: 0; margin: 0; padding-right: 0; margin-right: 0; } .trilho nav a { white-space: normal; padding: 11px 12px; font-size: .95rem; /* No celular o menu é lido de relance, com o telefone na mão e a rua em volta: o cinza fraco do computador não se lê assim. */ color: rgba(255, 255, 255, .88); } /* OS BLOCOS DA GAVETA NÃO ENCOLHEM, e isto é conserto de defeito com foto: em 21/09/2026 o seletor de aparência e o nome de quem estava logado apareciam DESENHADOS POR CIMA dos últimos itens do menu ("O que ela sabe" e "A empresa" liam-se por trás deles). A causa é a soma de duas coisas normais. A gaveta é um `flex` em coluna com altura de tela, e todo filho de `flex` encolhe por padrão: o `nav` de 27 itens era espremido até a caixa dele caber em 100dvh. Como o `nav` é `overflow: visible` (de propósito: quem rola é a gaveta inteira), o texto não foi cortado — ele transbordou para fora da caixa, e os blocos seguintes foram desenhados em cima. Nenhum erro em lugar nenhum: a caixa coube, o conteúdo é que não. Com `flex: none` a gaveta fica mais alta que a tela, que é justamente o que faz o `overflow-y: auto` dela ter o que rolar. */ .trilho nav, .trilho__opcoes, .trilho__pe { flex: none; } /* O último item não fica debaixo da barrinha do iPhone. */ .trilho { padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom)); } .trilho nav a[aria-current="page"] { color: #fff; } .trilho nav a .ic { display: inline-flex; } /* Não se recolhe o que já é gaveta: ela some inteira ao tocar fora. */ .trilho__recolher { display: none !important; } /* os grupos VOLTAM no celular: eram eles que respondiam "isto é sobre o quê", e sem eles a lista de 27 itens é uma sopa */ .trilho__grupo, .trilho__divisor { display: block; } .trilho__opcoes, .trilho__pe { display: block; } .tema { display: flex; } /* O VÉU. Escurece o que está atrás e fecha ao toque: tocar fora é o gesto que todo mundo tenta primeiro. */ .veu { position: fixed; inset: 0; z-index: 65; background: rgba(2, 8, 23, .5); backdrop-filter: blur(2px); } /* ---- o topo enxuto ---- */ .topo-do-bolso { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); background: var(--marca); color: #fff; min-height: 56px; } .topo-do-bolso .trilho__marca { flex: 1 1 auto; min-width: 0; } .topo-do-bolso__empresa { font-size: .8rem; opacity: .85; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- a barra de baixo ---- */ /* A ALTURA DA BARRA MORA NUMA VARIÁVEL porque duas coisas dependem dela: a própria barra e o convite de instalar, que precisa parar logo acima. Com o número escrito nos dois lugares, mudar o tamanho do alvo do dedo faz o convite cobrir a navegação, e nada avisa. */ :root { --barra-do-bolso: 58px; } .bolso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; min-height: var(--barra-do-bolso); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--papel); border-top: 1px solid var(--linha); /* o tapete do iPhone: sem isto a barra fica debaixo da faixa de gestos */ padding-bottom: env(safe-area-inset-bottom, 0); } .bolso__alvo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px 7px; min-height: 56px; color: var(--fraca); text-decoration: none; font-size: .68rem; font-weight: 600; background: none; border: 0; cursor: pointer; font-family: inherit; /* alvo de toque inteiro, e não só o texto: dedo não acerta 12px */ -webkit-tap-highlight-color: transparent; } .bolso__alvo--aqui { color: var(--marca); } .bolso__icone { position: relative; display: inline-flex; } .bolso__alvo .ic { width: 22px; height: 22px; } .bolso__nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bolso__conta { position: absolute; top: -5px; right: -9px; min-width: 16px; padding: 0 4px; border-radius: 99px; background: var(--gente); color: #fff; font-size: .62rem; line-height: 16px; text-align: center; } /* o conteúdo não fica escondido atrás da barra */ .obra { padding: var(--e3) var(--e3) calc(72px + env(safe-area-inset-bottom, 0px)); max-width: none; } .conversa__topo { flex-wrap: wrap; } .cabeca { flex-wrap: wrap; } .cabeca > div { flex: 1 1 100%; min-width: 0; } .cabeca__marca { width: 34px; height: 34px; } .cabeca h1 { font-size: 1.3rem; } } /* No computador não existe barra de baixo nem véu: o menu inteiro está à vista, e uma barra fixa só comeria altura. */ @media (min-width: 761px) { .bolso, .veu, .topo-do-bolso { display: none; } } /* O jeito de sair não pode sumir junto com o rodapé do trilho. */ /* O "Sair" volta a morar no rodapé da gaveta, que no celular existe de novo: era a tira deitada que o escondia. */ @media (max-width: 760px) { .trilho nav a.sair { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ---- cabeçalho de página ------------------------------------------------- Ícone, nome da tela e, embaixo, uma linha dizendo para que ela serve. À direita, a ação principal daquela tela, sempre no mesmo lugar. */ .cabeca { display: flex; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e4); } .cabeca__marca { width: 42px; height: 42px; border-radius: 11px; background: var(--azul-agua); color: var(--azul); display: grid; place-items: center; flex: none; } .cabeca__marca .ic { width: 22px; height: 22px; } .cabeca h1 { margin: 0; } .cabeca p { margin: 2px 0 0; color: var(--fraca); font-size: .93rem; } /* As etiquetas do topo embrulham em vez de empurrar a página: três selos como "2 esperando gente" somam mais que a largura de um celular, e sem o embrulho eram eles que faziam a tela rolar de lado. */ .cabeca__acoes { margin-left: auto; display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; min-width: 0; } @media (max-width: 700px) { .cabeca__acoes { width: 100%; margin: var(--e2) 0 0; margin-left: 0; } } /* ---- cartões de número --------------------------------------------------- Quatro no máximo, e cada um responde uma pergunta que alguém faz de verdade. Cartão de número que ninguém consulta é enfeite caro. */ /* Quatro colunas fixas, e não `auto-fit`. Com auto-fit, três cartões numa tela e quatro na outra saem de larguras diferentes, e a mesma informação muda de tamanho de página para página. Coluna fixa é o que faz o painel parecer um sistema só. Dentro do cartão, o rodapé é empurrado para baixo por `margin-top:auto`. Sem isso, o cartão que tem rodapé e o que não tem alinham por cima e desalinham por baixo, que é exatamente a quebra que se enxerga numa fila de quatro. */ .numeros { display: grid; gap: var(--e3); margin-bottom: var(--e4); grid-template-columns: repeat(4, minmax(0, 1fr)); } .numeros--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .numeros--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .numeros, .numeros--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .numeros > div { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e3) var(--e4); display: flex; flex-direction: column; min-height: 136px; } .numeros .ic { color: var(--azul); } .numeros b { display: block; font-size: 1.85rem; font-weight: 600; line-height: 1.15; margin: var(--e2) 0 0; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .numeros > div > span { display: block; font-size: .84rem; color: var(--fraca); } .numeros small { display: block; font-size: .78rem; color: var(--fraca); margin-top: auto; padding-top: var(--e2); } /* No celular os números ficam dois a dois, e o que sobrar sozinho ocupa a linha inteira. Até 22/09/2026 era um cartão de 136px por número, um embaixo do outro: quatro números comiam a primeira tela inteira do Chamados. Este bloco mora DEPOIS das regras normais dos cartões: antes delas, a regra normal (mesmo peso, escrita depois) ganhava, e no celular o número seguia grande e o cartão alto. Achado em 23/09/2026, no Custo de IA. */ @media (max-width: 620px) { .numeros, .numeros--3, .numeros--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); } .numeros > div { min-height: 0; padding: var(--e2) var(--e3); } .numeros > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .numeros .ic--grande { width: 18px; height: 18px; } .numeros b { font-size: 1.45rem; margin-top: 4px; } .numeros small { font-size: .74rem; padding-top: 4px; } } /* ---- barra de filtros ---------------------------------------------------- */ .filtros { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; margin-bottom: var(--e3); } .filtros input, .filtros select { width: auto; } /* A busca não come a largura toda: campo de uma linha com 900px de largura parece caixa de texto de artigo, e ninguém digita nome tão comprido. */ .filtros .procura { position: relative; flex: 1 1 420px; min-width: 0; } .filtros .procura .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fraca); } .filtros .procura input { width: 100%; padding-left: 36px; } /* ---- fichas de escolha (chips) ------------------------------------------- */ .fichas { display: flex; gap: var(--e2); flex-wrap: wrap; } .ficha { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; white-space: nowrap; border-radius: 99px; border: 1px solid var(--linha-forte); background: var(--papel); color: var(--fraca); text-decoration: none; font-size: .87rem; cursor: pointer; } .ficha:hover { background: var(--chao); color: var(--tinta); } .ficha[aria-pressed="true"], .ficha--ligada { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); } .ficha .conta { font-variant-numeric: tabular-nums; opacity: .75; } /* ---- quadro (kanban) ----------------------------------------------------- */ .quadro { display: grid; gap: var(--e3); grid-template-columns: repeat(3, minmax(260px, 1fr)); } @media (max-width: 1000px) { .quadro { grid-template-columns: minmax(0, 1fr); } } .coluna { background: var(--chao); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e2); } .coluna__topo { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e2) var(--e3); } .coluna__topo strong { font-size: .93rem; } .coluna__topo .conta { margin-left: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: 99px; padding: 1px 9px; font-size: .8rem; font-variant-numeric: tabular-nums; } .coluna__pilha { display: flex; flex-direction: column; gap: var(--e2); } .cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: var(--e3); display: block; color: inherit; text-decoration: none; } .cartao:hover { border-color: var(--linha-forte); } .cartao__topo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .cartao__codigo { margin-left: auto; font-size: .76rem; color: var(--fraca); font-variant-numeric: tabular-nums; } .cartao h3 { margin: 0 0 4px; font-size: .95rem; } .cartao__diagnostico { margin: 0 0 var(--e2); font-size: .86rem; color: var(--fraca); border-left: 2px solid var(--linha); padding-left: 9px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cartao__pe { display: flex; gap: var(--e2); align-items: center; font-size: .78rem; color: var(--fraca); flex-wrap: wrap; } .cartao__pe .idade { margin-left: auto; } /* ---- blocos de configuração ---------------------------------------------- */ .bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e4); margin-bottom: var(--e3); } .bloco__titulo { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--e4); font-size: 1rem; font-weight: 600; } .bloco__titulo .ic { color: var(--azul); } /* Rótulo em caixa alta some com o acento e obriga a soletrar: "NEGRITO E ITÁLICO" e "PASSAR PARA GENTE QUANDO A MESMA PESSOA MANDAR DEMAIS" são frases que a pessoa lê letra por letra. O que separa rótulo de conteúdo aqui é o peso e a cor, não o berro. */ /* A tela de configuração em duas colunas quando cabe. Ela é uma pilha de seis blocos independentes: numa coluna só, cada bloco usava setenta por cento da linha e a tela virava um rolo de dois metros. As colunas de CSS mantêm cada bloco inteiro (nenhum se parte no meio) e enchem a largura. */ .ajustes { columns: 2; column-gap: var(--e4); } .ajustes > .bloco { break-inside: avoid; margin-bottom: var(--e4); } @media (max-width: 1180px) { .ajustes { columns: 1; } } .rotulo { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .005em; color: var(--fraca); margin-bottom: 6px; } /* ---- escolha em cartão (tom de voz, modo de operação) --------------------- Mostrar um exemplo do que a assistente vai dizer decide melhor que qualquer nome de tom: ninguém sabe o que "técnico" significa até ler a frase. */ .escolhas { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .escolha { border: 1.5px solid var(--linha); border-radius: 10px; padding: var(--e3); cursor: pointer; display: block; background: var(--papel); } .escolha:hover { border-color: var(--linha-forte); } .escolha input { position: absolute; opacity: 0; width: 0; height: 0; } .escolha strong { display: block; font-size: .9rem; letter-spacing: -.005em; } .escolha span { display: block; margin-top: 6px; font-size: .86rem; color: var(--fraca); } .escolha:has(input:checked) { border-color: var(--azul); background: var(--azul-agua); } .escolha:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; } /* ---- chave liga-desliga --------------------------------------------------- */ .chave { display: flex; align-items: center; gap: var(--e3); border: 1px solid var(--linha); border-radius: 10px; padding: var(--e3); } .chave input { position: absolute; opacity: 0; width: 0; height: 0; } .chave__botao { width: 42px; height: 24px; border-radius: 99px; background: var(--linha-forte); position: relative; flex: none; margin-left: auto; transition: background .15s ease; } .chave__botao::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; } .chave:has(input:checked) .chave__botao { background: var(--azul); } .chave:has(input:checked) .chave__botao::after { transform: translateX(18px); } .chave:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; } .chave strong { display: block; font-size: .92rem; } .chave span { display: block; font-size: .82rem; color: var(--fraca); } /* ============================================================================ SEGUNDA CAMADA — o que faltava para o painel virar ferramenta de oito horas. Tudo daqui nasce em /molde, que é a página onde as peças existem sozinhas. Peça inventada direto na tela é peça que só existe naquela tela, e é assim que um painel vira colagem. ========================================================================= */ /* ---- retrato: duas letras no lugar da foto ------------------------------- Cliente de WhatsApp de empresa não tem foto. Duas letras num círculo de cor fixa por nome fazem o que a foto faria: achar a mesma pessoa de relance, sem ler o nome inteiro. A cor não quer dizer nada, e por isso não briga com as cores semânticas do sistema. */ .retrato { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .82rem; letter-spacing: .01em; line-height: 1; font-feature-settings: "kern"; user-select: none; } .retrato--miudo { width: 28px; height: 28px; font-size: .7rem; } .retrato--grande { width: 54px; height: 54px; font-size: 1.1rem; } /* O anel diz o estado sem gastar mais uma etiqueta na linha. */ .retrato--chama { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--gente); } .retrato--humana { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--pessoa); } /* ---- o trilho que recolhe ------------------------------------------------ Numa tela de notebook, 236px de menu é uma coluna de conversa a menos. A escolha fica guardada no navegador de quem trabalha, porque quem recolheu uma vez recolheu para sempre, e reabrir sozinho a cada página é o tipo de coisa que faz a pessoa desistir do botão. */ .tela--fechada { grid-template-columns: 68px 1fr; } .tela--fechada .trilho { padding: var(--e4) 10px; align-items: center; } .tela--fechada .trilho__marca span, .tela--fechada .trilho__grupo, .tela--fechada .trilho__pe, .tela--fechada .trilho form, .tela--fechada .trilho nav a > span:not(.conta) { display: none; } .tela--fechada .trilho nav a { justify-content: center; padding: 11px 0; position: relative; margin: 0 auto; width: 44px; } /* Recolhido não sobra largura para a calha da barra: o respiro que o menu aberto usa para a barra não passar por cima do texto tiraria os ícones do centro da faixa de 68px. */ .tela--fechada .trilho nav { padding-right: 0; margin-right: 0; } /* Recolhido, o item aberto precisa de mais contraste: sem o nome ao lado, um fundo de 13% de branco vira quase nada e a pessoa perde onde está. */ .tela--fechada .trilho nav a[aria-current="page"] { background: rgba(255,255,255,.2); } .tela--fechada .trilho nav a[aria-current="page"] .ic { color: #8CA0FF; } .tela--fechada .trilho nav a .conta { position: absolute; top: 2px; right: 1px; margin: 0; padding: 0 4px; font-size: .64rem; line-height: 14px; border: 2px solid var(--marca); } /* O nome do item vira etiqueta ao lado quando o mouse para em cima: menu de ícone sem nome é adivinhação, e adivinhação em ferramenta de trabalho custa o dia de alguém. A etiqueta é UMA só, presa à janela, e não um `::after` dentro de cada item. Dentro do item ela funcionava e cobrava caro: a lista dos ícones rola, e elemento posicionado dentro de uma lista que rola conta para a largura rolável dela. O menu recolhido tem 44px de caixa e passou a ter 190px de conteúdo, então nascia uma barra de rolagem horizontal no meio dos ícones e eles deslizavam para os lados. Medido em 15/09/2026. */ .trilho__etiqueta { position: fixed; z-index: 60; background: var(--tinta); color: var(--sobre-tinta); font-size: .82rem; padding: 5px 10px; border-radius: 7px; white-space: nowrap; pointer-events: none; transform: translateY(-50%); opacity: 0; transition: opacity .12s ease; box-shadow: 0 6px 18px rgba(0,0,0,.25); } .trilho__etiqueta--vendo { opacity: 1; } /* A lista de ícones nunca rola de lado. A rolagem de cima para baixo continua, que é a que serve para quem tem muitos itens. */ @media (min-width: 761px) { .trilho nav { overflow-x: hidden; } } .trilho__recolher { background: rgba(255,255,255,.07); border: 0; color: rgba(255,255,255,.7); border-radius: 8px; padding: 8px; cursor: pointer; display: flex; align-items: center; gap: 9px; font: inherit; font-size: .84rem; width: 100%; } .trilho__recolher:hover { background: rgba(255,255,255,.13); color: #fff; } .trilho__recolher .ic { transition: transform .18s ease; } .tela--fechada .trilho__recolher { justify-content: center; } .tela--fechada .trilho__recolher span { display: none; } .tela--fechada .trilho__recolher .ic { transform: rotate(180deg); } /* A escolha de aparência mora no pé do trilho, junto do recolher. */ .trilho__opcoes { display: flex; flex-direction: column; gap: 6px; } .tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: rgba(255,255,255,.07); border-radius: 8px; padding: 3px; } .tema button { border: 0; background: transparent; color: rgba(255,255,255,.6); font: inherit; font-size: .74rem; border-radius: 6px; padding: 6px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; } .tema button:hover { color: #fff; background: rgba(255,255,255,.08); } .tema button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: #fff; } .tema .ic { width: 15px; height: 15px; } /* Recolhido não cabem três botões lado a lado com nome. O grupo some, e a escolha continua guardada: quem quiser trocar abre o menu. */ .tela--fechada .tema { display: none; } /* A escolha de aparência cabe na gaveta, que rola. */ /* Com o trilho recolhido o rodapé some, e sair não pode sumir junto. */ .tela--fechada .trilho nav a.sair { display: flex; } /* As opções de quem está sentado aqui ficam no pé da gaveta. */ /* ---- a mesa de atendimento ---------------------------------------------- Três colunas, na ordem em que a pergunta aparece: quem está esperando, o que a pessoa disse, quem é a pessoa. Cada coluna rola por dentro, e o corpo da página não rola: quem atende não pode perder a fila de vista para chegar na caixa de resposta. */ .mesa { display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; gap: var(--e3); align-items: stretch; height: calc(100vh - 148px); min-height: 480px; } .mesa--sem-ficha { grid-template-columns: 320px minmax(0, 1fr); } .mesa > * { min-height: 0; } .mesa__coluna { display: flex; flex-direction: column; overflow: hidden; } .mesa__rolagem { overflow-y: auto; overscroll-behavior: contain; flex: 1; } /* A barra de rolagem da conversa FICA na tela, e não some quando a mão para. No macOS o padrão é barra sobreposta, que só aparece enquanto se rola: quem abria uma conversa via a última mensagem, não via barra nenhuma, e concluía que não havia nada acima. Em 15/09/2026 isso foi relatado assim, com estas palavras: "as mensagens acima ficam perdidas". O truque do `background-clip: content-box` com borda transparente é o que dá respiro ao polegar sem precisar de uma segunda caixa em volta. */ .mesa__rolagem { scrollbar-width: thin; scrollbar-color: var(--linha) transparent; } .mesa__rolagem::-webkit-scrollbar { width: 12px; } .mesa__rolagem::-webkit-scrollbar-track { background: transparent; } .mesa__rolagem::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } .mesa__rolagem::-webkit-scrollbar-thumb:hover { background: var(--fraca); background-clip: content-box; } @media (max-width: 1240px) { .mesa { grid-template-columns: 300px minmax(0, 1fr); } .mesa__ficha { display: none; } } @media (max-width: 900px) { .mesa { grid-template-columns: minmax(0, 1fr); height: auto; } /* No celular quem rola é a PÁGINA, e não cada coluna por dentro. Uma lista com rolagem própria dentro de uma página que também rola é a armadilha em que o dedo empurra a lista achando que está empurrando a tela. */ .mesa__coluna { overflow: visible; } .mesa__rolagem { overflow: visible; } .mesa__fila { max-height: none; } .some-no-celular { display: none; } /* Abrir uma conversa no celular tem que mostrar a CONVERSA. Antes a fila inteira vinha antes dela, e era preciso rolar cinco contatos para chegar na mensagem que a pessoa acabou de tocar. A fila continua a um toque, no botão "Ver a fila inteira" do topo. */ .mesa--conversa-aberta .mesa__fila { display: none; } /* A altura fixa da coluna era o que segurava a caixa de resposta no pé. Com a coluna solta, o `flex: 1 1 0` do fio zerava a altura dele e a caixa passava por cima das mensagens. */ .mesa--conversa-aberta .conversa__fio { flex: none; } .mesa--conversa-aberta .responder { margin-top: 0; } .escrita__pe { display: none; } .escrever__abas { padding: 6px var(--e2) var(--e2); } } /* ---- topo de coluna ------------------------------------------------------ */ .coluna__cabeca { padding: var(--e3); border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: var(--e2); } .coluna__cabeca .fichas { gap: 6px; } .coluna__cabeca .ficha { padding: 4px 10px; font-size: .82rem; } /* Os filtros deslizam numa linha só, como no aparelho. Embrulhando, três fichas viram três linhas e a fila perde noventa pixels de altura logo no alto, que é onde a conversa mais nova aparece. */ /* A tira quebra em duas linhas em vez de esconder ficha atrás da borda. Era `nowrap` com rolagem sem barra: na coluna da fila, "Encerradas" já nascia cortada, e a ficha "Avisos" (22/09/2026) ficava inteira fora da vista. Rolagem que não se anuncia é elemento que não existe para quem olha, e a conta é barata: uma linha a mais de altura, uma vez. */ .fichas--tira { flex-wrap: wrap; overflow-x: visible; scrollbar-width: none; padding-bottom: 1px; } .fichas--tira::-webkit-scrollbar { display: none; } .fichas--tira .ficha { white-space: nowrap; flex: none; } /* ---- fila com retrato ---------------------------------------------------- */ .fila a { display: flex; gap: 11px; align-items: flex-start; } .fila__corpo { min-width: 0; flex: 1; } .fila__nome { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fila__pe { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-height: 14px; } /* Os marcadores do canto: um pontinho colorido em vez de uma etiqueta escrita. A etiqueta "esperando gente" por extenso ocupava uma linha inteira em cada contato, e a fila cabia cinco em vez de nove. */ .fila__sinal { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-left: auto; } .fila__sinal--gente { background: var(--gente); box-shadow: 0 0 0 3px var(--gente-fundo); } .fila__sinal--pessoa { background: var(--pessoa); box-shadow: 0 0 0 3px var(--pessoa-fundo); } .fila__assunto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fila__origem { display: inline-flex; align-items: center; } .fila__origem .ponto { margin: 0; } .fila__previa { -webkit-line-clamp: 1; } .fila__marcas { display: flex; gap: 5px; align-items: center; margin-top: 5px; flex-wrap: wrap; } /* ---- separador de dia ---------------------------------------------------- Sem ele, uma resposta de ontem às 18h e uma pergunta de hoje às 8h ficam coladas e parecem a mesma conversa contínua. */ .separador { display: flex; align-items: center; gap: var(--e3); color: var(--fraca); font-size: .76rem; margin: var(--e3) 0 var(--e2); } .separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linha); } .separador span { font-variant-numeric: tabular-nums; letter-spacing: .04em; } /* ---- os atendimentos do cliente ------------------------------------------- O fio é do cliente, e cada atendimento abre com um divisor que diz qual foi, quando começou e como terminou. A borda da esquerda leva o tom da situação, o mesmo da fila: vermelho esperando gente, âmbar com alguém, verde com a assistente, cinza encerrado. */ .divisor-de-atendimento { margin: var(--e4) 0 var(--e2); padding: var(--e2) var(--e3); background: var(--papel); border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte); border-radius: var(--canto); display: grid; gap: 4px; scroll-margin-top: var(--e3); } .divisor-de-atendimento:first-child { margin-top: 0; } .divisor-de-atendimento--gente { border-left-color: var(--gente); } .divisor-de-atendimento--pessoa { border-left-color: var(--pessoa); } .divisor-de-atendimento--feito { border-left-color: var(--feito); } .divisor-de-atendimento__linha { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; min-width: 0; } .divisor-de-atendimento__linha .ic { color: var(--fraca); flex: none; } .divisor-de-atendimento__linha strong { flex: none; font-variant-numeric: tabular-nums; } .divisor-de-atendimento__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 160px; } .divisor-de-atendimento__desfecho { margin: 0; } /* Chegou pelo seletor: o divisor pisca uma vez, para o olho achar onde parou. */ .divisor-de-atendimento:target { animation: divisor-achado 1.6s ease-out 1; } @keyframes divisor-achado { from { box-shadow: 0 0 0 3px var(--azul-agua), 0 0 0 5px var(--azul); } } @media (prefers-reduced-motion: reduce) { .divisor-de-atendimento:target { animation: none; box-shadow: 0 0 0 2px var(--azul); } } .ver-anteriores { align-self: center; margin-bottom: var(--e2); } /* O seletor mora no topo da conversa e abre por cima do fio, sem empurrar nada: é caminho, e não conteúdo. */ .atendimentos { position: relative; margin-left: auto; flex: none; } .atendimentos summary { display: inline-flex; align-items: center; gap: var(--e2); list-style: none; cursor: pointer; padding: 6px var(--e3); border: 1px solid var(--linha); border-radius: 999px; font-size: .86rem; font-weight: 500; background: var(--papel); } .atendimentos summary::-webkit-details-marker { display: none; } .atendimentos summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border: solid var(--fraca); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); } .atendimentos[open] summary::after { transform: translateY(1px) rotate(-135deg); } .atendimentos summary:hover { border-color: var(--linha-forte); } .atendimentos summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .atendimentos__quantos { color: var(--fraca); font-weight: 400; } .atendimentos__lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--canto); box-shadow: 0 16px 34px -16px rgba(11,18,32,.4); } .atendimentos__lista a { display: grid; grid-template-columns: 3.4em 1fr; gap: 3px var(--e2); padding: 8px var(--e2); border-radius: 8px; color: var(--tinta); text-decoration: none; } .atendimentos__lista a:hover, .atendimentos__lista a:focus-visible { background: var(--azul-agua); } .atendimentos__lista a[aria-current="true"] { background: var(--azul-agua); box-shadow: inset 3px 0 0 var(--azul); } .atendimentos__codigo { color: var(--fraca); font-size: .84rem; padding-top: 1px; } .atendimentos__titulo { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atendimentos__pe { grid-column: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* No celular o seletor não cabe ancorado no botão: a lista ocupa a largura do topo da conversa, logo abaixo dele, com margem dos dois lados. Mora aqui, depois das regras de cima, porque a de baixo é a que vale. */ @media (max-width: 760px) { .conversa__topo { position: relative; } .atendimentos { position: static; } .atendimentos__lista { left: var(--e3); right: var(--e3); width: auto; top: calc(100% - 6px); } } /* ---- balas de fala, agora com dono --------------------------------------- */ .linha-de-fala { display: flex; gap: 9px; align-items: flex-end; } .linha-de-fala--minha { flex-direction: row-reverse; } .linha-de-fala--colada .retrato { visibility: hidden; } .linha-de-fala--colada { margin-top: -6px; } .fala { box-shadow: 0 1px 2px rgba(16,26,46,.05); } .fala__quem { display: block; font-size: .74rem; font-weight: 600; color: var(--fraca); margin-bottom: 2px; } .fala time { display: flex; align-items: center; gap: 5px; } .linha-de-fala--minha .fala time { justify-content: flex-end; } .fala__visto { width: 14px; height: 10px; stroke: var(--feito); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ---- a assistente escrevendo -------------------------------------------- Três pontos que sobem em sequência. É o único movimento contínuo do painel, e ele existe porque diz uma coisa que texto nenhum diz tão rápido: tem resposta pronta esperando você. */ .digitando { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; } .digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--azul); display: block; animation: sobe 1.25s ease-in-out infinite; } .digitando i:nth-child(2) { animation-delay: .16s; } .digitando i:nth-child(3) { animation-delay: .32s; } @keyframes sobe { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } } /* ---- pulso: está acontecendo agora --------------------------------------- */ .pulso { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--feito); flex: none; display: inline-block; } .pulso::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: espalha 2s ease-out infinite; } .pulso--gente { background: var(--gente); } .pulso--pessoa { background: var(--pessoa); } @keyframes espalha { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } } /* ---- ilustração de estado vazio ----------------------------------------- Tela vazia é a primeira tela que todo cliente novo vê. Um desenho e uma frase que diz o que fazer transformam "não tem nada" em "comece por aqui". Nenhuma delas é enfeite: cada uma pertence a uma tela só. */ /* Num painel largo e vazio, 132px de desenho somem. O tamanho acompanha o espaço: dentro de uma coluna estreita fica miúdo, no meio da tela cresce. */ .ilustra { width: 132px; height: 108px; margin: 0 auto var(--e3); display: block; } .mesa__coluna:not(.mesa__fila) > .vazio .ilustra, .painel > .vazio .ilustra { width: 176px; height: 144px; } .ilustra .traco { stroke: var(--linha-forte); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ilustra .cheio { fill: var(--azul-agua); } .ilustra .marca { stroke: var(--azul); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .vazio .botao { margin: var(--e3) auto 0; } .vazio p { max-width: 46ch; margin: 0 auto; } /* ---- abas ---------------------------------------------------------------- Para tela que tem dois olhares sobre o mesmo dado (quadro e lista, 7 e 30 dias). Aba troca o olhar; menu troca de assunto. */ .abas { display: flex; gap: var(--e4); border-bottom: 1px solid var(--linha); margin-bottom: var(--e4); } .abas a { padding: 0 0 10px; color: var(--fraca); text-decoration: none; font-size: .93rem; border-bottom: 2px solid transparent; margin-bottom: -1px; } .abas a:hover { color: var(--tinta); } .abas a[aria-current="page"] { color: var(--tinta); font-weight: 500; border-bottom-color: var(--azul); } /* ---- gráfico de barras por hora ------------------------------------------ */ .horas { display: flex; align-items: flex-end; gap: 3px; height: 120px; } .horas div { flex: 1; background: var(--azul-agua); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; } .horas div[data-pico="sim"] { background: var(--azul); } .horas__eixo { display: flex; justify-content: space-between; font-size: .72rem; color: var(--fraca); margin-top: 6px; font-variant-numeric: tabular-nums; } /* ---- lista de gente / contatos ------------------------------------------- */ .gente { list-style: none; margin: 0; padding: 0; } .gente li { display: flex; gap: var(--e3); align-items: center; padding: var(--e3); border-bottom: 1px solid var(--linha); } .gente li:last-child { border-bottom: 0; } .gente__corpo { min-width: 0; flex: 1; } .gente__corpo strong { display: block; } /* A coluna de ação tem largura fixa: sem isso, uma linha com etiqueta empurra as datas das outras linhas e a lista deixa de ter colunas. */ .gente__acoes { margin-left: auto; display: flex; gap: var(--e2); align-items: center; justify-content: flex-end; flex: none; min-width: 230px; } @media (max-width: 900px) { .gente li { flex-wrap: wrap; } .gente__acoes { min-width: 0; } } /* ---- caixa de arrastar arquivo ------------------------------------------- */ .solta { border: 1.5px dashed var(--linha-forte); border-radius: var(--canto); padding: var(--e5) var(--e4); text-align: center; color: var(--fraca); background: var(--chao); } .solta strong { display: block; color: var(--tinta); margin-bottom: 3px; } /* ---- o movimento dos desenhos -------------------------------------------- Quatro movimentos no sistema inteiro, e cada um só existe onde diz alguma coisa. Movimento espalhado por toda tela é o que faz painel parecer protetor de tela. */ .anima-flutua { animation: flutua 3.6s ease-in-out infinite; transform-origin: center; } @keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .anima-aponta { animation: aponta 1.8s ease-in-out infinite; } @keyframes aponta { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(-5px); opacity: 1; } } /* O risco do certo se desenha uma vez, na chegada: é a confirmação acontecendo, não um enfeite que fica repetindo que está tudo bem. */ .anima-risca { stroke-dasharray: 1; stroke-dashoffset: 1; animation: risca .55s ease-out .25s forwards; } @keyframes risca { to { stroke-dashoffset: 0; } } .anima-ondas circle { transform-origin: 66px 54px; animation: onda 2.8s ease-out infinite; } .anima-ondas circle:nth-child(2) { animation-delay: 1.4s; } @keyframes onda { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } } /* A seta desce dentro da folha a cada ciclo longo: é o convite de "arraste aqui", e ciclo longo é o que separa convite de anúncio. */ .anima-sobe { animation: desce 3.4s ease-in-out infinite; } @keyframes desce { 0%, 70%, 100% { transform: translateY(0); opacity: 1; } 35% { transform: translateY(7px); opacity: .55; } } /* A marca chega em três tempos, uma vez só. */ .marca-viva { width: 28px; height: 28px; flex: none; } .marca-viva > * { animation: chega .5s cubic-bezier(.2,.9,.3,1) backwards; } .marca-viva > path { animation-delay: .05s; } .marca-viva > rect:nth-of-type(1) { animation-delay: .18s; } .marca-viva > rect:nth-of-type(2) { animation-delay: .28s; } @keyframes chega { from { opacity: 0; transform: translateX(-6px); } } @media (prefers-reduced-motion: reduce) { .digitando i, .pulso::after, .anima-flutua, .anima-aponta, .anima-ondas circle, .anima-sobe, .marca-viva > * { animation: none !important; } .anima-risca { stroke-dashoffset: 0; } .pulso::after { display: none; } } /* ---- o placar da supervisão ---------------------------------------------- Um número grande só, e ele responde a pergunta que quem manda faz de manhã: ela deu conta? Mensagem enviada é esforço; conversa resolvida sozinha é o serviço, e por isso é essa que fica grande. */ .placar { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e4) var(--e5); margin-bottom: var(--e3); display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; } .placar__valor { font-size: 3.4rem; font-weight: 600; letter-spacing: -.035em; line-height: 1; color: var(--feito); font-variant-numeric: tabular-nums; } .placar__corpo { flex: 1; min-width: 260px; } .placar__corpo h2 { margin: 0 0 3px; } /* Sem trava de largura: o texto usa o cartão que ele já ocupa. O `max-width: 60ch` que morava aqui parava a frase perto de um terço do cartão e deixava o resto vazio -- num cartão de 1.400 px isso lê como defeito de desenho, e foi lido assim em 15/09/2026. */ .placar__corpo p { margin: 0; color: var(--fraca); } .placar .barra { margin-top: var(--e3); } .placar .barra i { background: var(--feito); } /* A vitrine: o trabalho da assistente no período, na frente de tudo. Nasceu em 22/09/2026 para substituir o placar solto de "resolvido sem gente": dois números grandes (quanto ela resolveu, quantos ela atendeu) e, embaixo, as provas de que ela dá conta da operação -- tempo, madrugada e dinheiro. */ .vitrine { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e4) var(--e5); margin-bottom: var(--e3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e5); } .vitrine__destaque { min-width: 0; } .vitrine__rotulo { display: block; font-weight: 600; margin-bottom: 2px; } .vitrine__numero { display: block; font-size: 3.4rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; color: var(--feito); font-variant-numeric: tabular-nums; } .vitrine__destaque p { margin: var(--e1) 0 0; color: var(--fraca); } .vitrine__destaque .barra { margin-top: var(--e3); } .vitrine__destaque .barra i { background: var(--feito); } .vitrine__provas { grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--e4) 0 0; border-top: 1px solid var(--linha); display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .vitrine__provas li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--e2); align-content: start; } .vitrine__provas .ic { grid-row: 1 / span 3; color: var(--azul); margin-top: 4px; } .vitrine__provas b { font-size: 1.6rem; font-weight: 600; line-height: 1.15; } .vitrine__provas span { font-weight: 500; } .vitrine__provas small { color: var(--fraca); } @media (max-width: 720px) { .vitrine { grid-template-columns: minmax(0, 1fr); padding: var(--e3); } .vitrine__numero { font-size: 2.8rem; } } /* ---- duas caixas lado a lado --------------------------------------------- */ /* Dois painéis lado a lado terminam na mesma linha. `align-items:start` deixava um mais curto que o outro, e duas caixas de alturas diferentes na mesma fila é o que faz a tela parecer montada às pressas. */ /* ---- a comparação com um atendente contratado ---------------------------- Duas barras na mesma escala: a de cima é sempre cheia, porque ela é a régua. Barra que muda de escala entre uma linha e outra não compara nada e ainda passa a impressão de que está inflando o número a nosso favor. */ .contra { margin: var(--e4) 0 0; } .contra__linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); margin: 0 0 4px; font-size: .88rem; color: var(--fraca); } .contra__linha b { color: var(--tinta); font-variant-numeric: tabular-nums; } .contra__trilho { height: 8px; border-radius: 4px; background: var(--chao); overflow: hidden; margin-bottom: var(--e3); } .contra__cheio { display: block; height: 100%; background: var(--linha-forte); border-radius: 4px; } .contra__cheio--nosso { background: var(--feito); } /* O pontinho de cor que identifica o agente. A cor vem do nome, pela mesma conta do retrato: o mesmo agente tem sempre a mesma cor em toda tela, e é isso que permite reconhecer de onde vem a conversa sem ler o nome. */ .ponto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; margin-right: 5px; vertical-align: baseline; } .fichas--agentes { margin-top: var(--e2); } /* ---- os filtros da fila, arrumados (23/09/2026) --------------------------- Com o filtro de atendente a coluna virou uma parede de fichas em quatro linhas tortas, e o nome repetido de duas pessoas aparecia duas vezes igual. "Esteticamente horrível", nas palavras do Daniel. Agora são duas peças: 1. A SITUAÇÃO num bloco de quatro casas do mesmo tamanho. Quatro fichas de largura diferente quebravam em linhas desiguais; a grade não quebra torto porque não depende da largura do texto. 2. O ATENDENTE (e o agente) num seletor de uma linha, que abre a lista só quando alguém pede. A lista de gente cresce com a equipe; a linha não. */ .situacoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-top: var(--e2); border-radius: 12px; background: var(--chao); border: 1px solid var(--linha); } .situacoes a { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border-radius: 9px; color: var(--fraca); font-size: .82rem; text-decoration: none; white-space: nowrap; min-width: 0; } .situacoes a:hover { color: var(--tinta); background: var(--papel); } .situacoes a[aria-current="true"] { background: var(--papel); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 0 0 1px var(--linha); } .situacoes .conta { font-variant-numeric: tabular-nums; font-size: .78rem; opacity: .8; } .situacoes .conta--gente { color: var(--gente); opacity: 1; font-weight: 600; } .situacoes .conta--pessoa { color: var(--pessoa); opacity: 1; font-weight: 600; } /* casa que sobra sozinha na última linha ocupa a linha inteira, em vez de ficar torta pela metade */ .situacoes a:last-child:nth-child(odd) { grid-column: 1 / -1; } .seletores { display: grid; gap: 6px; margin-top: var(--e2); } /* Na tela de chamados os seletores ficam lado a lado, na mesma linha do Quadro/Lista, e empurrados para a direita: é a largura que a tela tem. */ .seletores--linha { display: flex; flex-wrap: wrap; margin: 0 0 0 auto; } .seletores--linha .seletor { width: 230px; } .seletores--linha .seletor__lista { min-width: 260px; left: auto; } @media (max-width: 700px) { .seletores--linha { margin-left: 0; width: 100%; } .seletores--linha .seletor { flex: 1 1 200px; width: auto; } } .seletor { position: relative; } .seletor summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--linha); background: var(--papel); font-size: .84rem; } .seletor summary::-webkit-details-marker { display: none; } .seletor summary:hover { border-color: var(--linha-forte); } .seletor summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .seletor__rotulo { color: var(--fraca); } .seletor__valor { color: var(--tinta); font-weight: 600; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seletor summary .ic { width: 14px; height: 14px; color: var(--fraca); transition: transform .15s; } .seletor[open] summary .ic { transform: rotate(180deg); } /* Filtro ligado se anuncia: com alguém escolhido, a borda fica azul, para ninguém achar que a fila está vazia quando ela só está filtrada. */ .seletor--ligado summary { border-color: var(--azul); background: var(--azul-agua); } .seletor__lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 320px; overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linha-forte); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .45); } .seletor__lista a { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: .85rem; } .seletor__lista a:hover { background: var(--chao); } .seletor__lista a[aria-current="true"] { background: var(--azul-agua); font-weight: 600; } .seletor__lista .conta { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--fraca); font-size: .78rem; } .seletor__lista hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 2px; } .seletor__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Duas pessoas com o mesmo nome se distinguem pelo e-mail, miúdo embaixo: "Daniel Rosendo" duas vezes, igual, é escolher no escuro. */ .seletor__nome small { display: block; color: var(--fraca); font-size: .74rem; font-weight: 400; } /* Quem atende a conversa, na linha da fila: as iniciais num círculo pequeno, com o nome inteiro ao passar o mouse. Escrito por extenso ("com Dan...") ele cortava o motivo e o próprio nome ao meio. */ .retrato--nanico { width: 18px; height: 18px; font-size: .55rem; font-weight: 700; } /* Vai para a direita, junto dos sinais; o motivo fica com o resto da linha. */ .fila__pe .retrato--nanico { margin-left: auto; } .fila__pe .retrato--nanico ~ .fila__origem, .fila__pe .retrato--nanico ~ .fila__sinal { margin-left: 0; } /* Quando a escolha de agente é a navegação da tela inteira, e não um filtro dentro de uma coluna, ela precisa de ar embaixo. */ nav.fichas--agentes { margin: 0 0 var(--e3); } .fila__origem { margin-left: auto; display: inline-flex; align-items: center; white-space: nowrap; } /* O formulário de ligar uma integração. Ele mora no mesmo cartão que mostra o estado dela, e não numa tela separada: quem acabou de ver "não ligado" quer ligar ali, e não procurar onde se liga. */ .chave-forma { display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; } .chave-forma__teste { display: flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--fraca); } .chave-forma .campo { width: 100%; } /* ---- o catálogo de integrações ------------------------------------------- Um cartão por sistema, sempre com a mesma anatomia: quem é, o que muda se ligar, a prova de que responde, e os botões. Repetir a anatomia é o que deixa comparar dois de bater o olho, e é o que faz "não ligada" e "ativa" serem lidos sem ler. */ /* O logotipo do fornecedor, no tamanho do retrato que ele substitui. A moldura clara existe porque marca com fundo branco (SMS Market, Google Agenda) some dentro do cartão branco, e marca escura precisa de um respiro para não parecer colada. O `object-fit: contain` garante que nenhuma marca seja cortada: logotipo de terceiro esticado ou aparado é desrespeito com a marca dele e desleixo com a nossa. */ .logo-da-ferramenta { width: 42px; height: 42px; flex: none; border-radius: 11px; object-fit: contain; background: var(--chao); padding: 4px; border: 1px solid var(--linha); } .secao-titulo { margin: var(--e5) 0 var(--e2); font-size: .84rem; color: var(--fraca); text-transform: none; font-weight: 600; } .canal { margin-bottom: var(--e3); } .canal .botao { align-self: flex-start; } .conector { border-left: 3px solid var(--linha); } /* Ativa ganha a borda verde, e só ela. Cartão inteiro colorido faria a tela virar semáforo e ninguém enxergar o que precisa de atenção. */ .conector--ativa { border-left-color: var(--feito); } .conector__muda { margin: var(--e3) 0; } .conector__prova { display: flex; gap: var(--e2); align-items: flex-start; margin: 0 0 var(--e3); padding: var(--e2) var(--e3); border-radius: var(--canto); background: var(--chao); font-size: .88rem; } .conector__prova .ic { flex: none; margin-top: 2px; color: var(--fraca); } .conector__prova--ok { background: var(--feito-fundo); color: var(--feito); } .conector__prova--ok .ic { color: var(--feito); } .conector__prova--nao { background: var(--gente-fundo); color: var(--gente); } .conector__prova--nao .ic { color: var(--gente); } .conector__prova .fraca { color: inherit; opacity: .75; } .conector__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e2); } /* Três por linha, com contagem fixa em vez de auto-fit: com auto-fit, uma categoria de dois itens espicharia os cartões e eles deixariam de ter o mesmo tamanho dos outros, que é o que torna a lista comparável. */ .catalogo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); align-items: start; } .catalogo > .conector { display: flex; flex-direction: column; height: 100%; } /* O pé desce sozinho: cartões com textos de tamanhos diferentes ficam com os botões na mesma altura, e o olho compara linha por linha. */ .conector__pe { margin-top: auto; } .conector__assunto { margin-bottom: var(--e2); display: inline-block; } @media (max-width: 1180px) { .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .catalogo { grid-template-columns: minmax(0, 1fr); } } .secao-titulo .conta { background: var(--chao); color: var(--fraca); border-radius: 99px; padding: 1px 8px; font-size: .78rem; margin-left: 4px; } .conector__onde { border-left: 2px solid var(--linha); padding-left: var(--e3); margin: 0 0 var(--e3); } /* "Trocar os dados" é link e não botão de propósito: no cartão já preenchido, o que a pessoa faz todo dia é testar e ativar. Três botões do mesmo peso fariam ela reabrir o formulário só porque ele parecia o caminho. */ .conector__trocar { display: inline-block; margin-top: var(--e2); font-size: .86rem; color: var(--azul); text-decoration: none; } .conector__trocar:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- A janela por cima da tela, onde se digita o que é chato de digitar. É `dialog` de verdade: o navegador cuida do fundo escurecido, do Esc e de prender o teclado dentro dela. Janela feita à mão erra a última parte, e quem usa teclado sai andando por trás do escurecido sem ver onde está. --------------------------------------------------------------------------- */ .janela { width: min(560px, calc(100vw - 2 * var(--e4))); max-height: min(86vh, 760px); padding: 0; border: 1px solid var(--linha); border-radius: 16px; background: var(--papel); color: var(--tinta); box-shadow: 0 24px 64px rgba(2, 8, 23, .28); overflow: hidden; } .janela[open] { display: flex; flex-direction: column; } .janela::backdrop { background: rgba(2, 8, 23, .55); } /* A entrada é curta e só na abertura: janela que desliza toda vez cansa quem abre cinco seguidas para preencher cinco integrações. */ @media (prefers-reduced-motion: no-preference) { .janela[open] { animation: janela-entra .16s ease-out; } @keyframes janela-entra { from { opacity: 0; transform: translateY(8px) scale(.99); } } } .janela__cabeca { display: flex; align-items: center; gap: var(--e3); padding: var(--e4); border-bottom: 1px solid var(--linha); } .janela__titulo { flex: 1; min-width: 0; } .janela__titulo h2 { margin: 0; font-size: 1.05rem; } .janela__titulo p { margin: 2px 0 0; } .janela__fechar { flex: none; border: 0; background: none; color: var(--fraca); cursor: pointer; padding: 6px; border-radius: 8px; line-height: 0; } .janela__fechar:hover { background: var(--chao); color: var(--tinta); } /* Só o corpo rola: cabeça e rodapé ficam presos, e o botão de salvar não some de vista num formulário de oito campos. */ .janela__corpo { padding: var(--e4); overflow-y: auto; flex: 1; } .janela__corpo .campo:last-of-type { margin-bottom: 0; } /* O que cada integração pode fazer, uma linha por capacidade. A que age no mundo de fora (dar baixa, marcar, mandar comando) ganha a faixa lateral: quem passa o olho precisa ver a diferença entre ler e agir sem ler tudo. */ .janela__secao { margin: var(--e4) 0 var(--e2); font-size: .95rem; } .permissao { display: flex; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); margin-bottom: var(--e2); border: 1px solid var(--linha); border-radius: var(--canto); } .permissao--escreve { border-left: 3px solid var(--pessoa); } .permissao__corpo { flex: 1; } .permissao__corpo p { margin: 2px 0 0; } .permissao form { margin: 0; flex: none; } .janela__cofre { display: flex; gap: var(--e2); align-items: flex-start; margin: var(--e3) 0 0; padding: var(--e2) var(--e3); border-radius: var(--canto); background: var(--chao); font-size: .84rem; color: var(--fraca); } .janela__cofre .ic { flex: none; margin-top: 2px; } .janela__pe { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; padding: var(--e3) var(--e4); border-top: 1px solid var(--linha); background: var(--chao); } .janela__folga { flex: 1; } @media (max-width: 560px) { /* No celular ela toma a tela inteira: janelinha centralizada com o teclado aberto deixa o campo que está sendo digitado atrás do teclado. */ .janela { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; margin: 0; } .janela__pe .botao { flex: 1; justify-content: center; } } /* A lista de respostas na tela de gerenciar. Cada linha abre no lugar, e não numa tela separada: quem está ajustando o texto de uma quer comparar com o texto da outra logo abaixo. */ .respostas { list-style: none; margin: 0; padding: 0; } .respostas > li { border-bottom: 1px solid var(--linha); } .respostas > li:last-child { border-bottom: 0; } .respostas summary { display: flex; align-items: center; gap: var(--e2); padding: var(--e3) var(--e4); cursor: pointer; list-style: none; } .respostas summary::-webkit-details-marker { display: none; } .respostas summary strong { font-weight: 600; color: var(--tinta); } .respostas__usos { margin-left: auto; white-space: nowrap; } .atalho { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: var(--chao); color: var(--azul); padding: 2px 7px; border-radius: 6px; flex: none; } .respostas__forma { padding: 0 var(--e4) var(--e3); } .respostas__par { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--e3); } .respostas__acoes { display: flex; gap: var(--e2); } @media (max-width: 620px) { .respostas__par { grid-template-columns: minmax(0, 1fr); } } /* ---- o cartão do cliente ------------------------------------------------- Blocos com rótulo, na ordem em que a pergunta aparece: quem é a pessoa, em que pé está a conversa, quem responde, o que a empresa anota, o que já aconteceu. Quem abre esta coluna no meio de um atendimento não está fazendo pesquisa: está decidindo o que fazer agora. */ .cartao-cliente { padding: var(--e4) var(--e3) var(--e4); } .bloco-do-cartao { padding: var(--e3) 0; border-top: 1px solid var(--linha); } .bloco-do-cartao__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); } .bloco-do-cartao .rotulo { margin-bottom: var(--e2); } .botao-de-texto { border: 0; background: none; color: var(--azul); cursor: pointer; font: inherit; padding: 0; } .botao-de-texto:hover { text-decoration: underline; } /* Pausar a assistente é a decisão mais consequente desta coluna: ela muda quem responde o próximo "bom dia" do cliente. Cor de atenção, e não de perigo: não é um erro, é uma escolha. */ .botao--pausa { background: var(--pessoa-fundo); color: var(--pessoa); border: 1px solid var(--pessoa); } .botao--pausa:hover { filter: brightness(.97); } /* A equipe como lista de gente para clicar, e não como caixa de escolher: uma lista mostra quem existe, e a caixa esconde todo mundo atrás de um clique. */ .gente-do-time { list-style: none; margin: var(--e3) 0 0; padding: 0; } .gente-do-time button { display: flex; align-items: center; gap: var(--e2); width: 100%; border: 0; background: none; font: inherit; cursor: pointer; padding: 6px var(--e2); border-radius: 8px; text-align: left; color: var(--tinta); } .gente-do-time button:hover { background: var(--chao); } .gente-do-time .e-o-dono { background: var(--azul-agua); color: var(--azul); font-weight: 500; } .gente-do-time .ic { margin-left: auto; } .dados-do-contato dt { display: flex; align-items: center; gap: 7px; } .dados-do-contato dt .ic { opacity: .55; width: 15px; height: 15px; } /* ---- a barra de escrever ------------------------------------------------- O formato de quem usa isto o dia inteiro: o mais (anexo) à esquerda, a caixa no meio, o enviar e o microfone à direita. Tudo numa linha só, porque cada linha a mais aqui é uma linha a menos de conversa visível. */ /* `flex: none` porque a coluna tem altura fixa: sem isso a barra encolhe junto com o fio da conversa e some pela metade embaixo da tela. */ .escrever { border-top: 1px solid var(--linha); flex: none; } .escrever__abas { padding: var(--e2) var(--e3) var(--e3); position: relative; } .escrever__abas > input { position: absolute; opacity: 0; width: 1px; height: 1px; } .escrever__abas > label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: .84rem; color: var(--fraca); cursor: pointer; border-radius: 8px; } .escrever__abas > label:hover { color: var(--tinta); background: var(--chao); } .escrever__abas > input:checked + label { color: var(--tinta); background: var(--chao); font-weight: 500; } .escrever__abas > input:focus-visible + label { outline: 2px solid var(--azul); outline-offset: 2px; } .escrever__abas > form { display: none; } .escrever__abas > input:nth-of-type(1):checked ~ form:nth-of-type(1), .escrever__abas > input:nth-of-type(2):checked ~ form:nth-of-type(2) { display: block; } /* Chama-se `escrita`, e não `barra`: `barra` já era a barrinha de progresso da supervisão, com sete pixels de altura fixa. A segunda classe com o mesmo nome herdava aqueles sete pixels e a barra de escrever aparecia esmagada, com os botões vazando para fora. Nome de classe repetido é defeito que só aparece na tela, longe do arquivo em que foi escrito. */ .escrita { display: flex; align-items: flex-end; gap: 6px; margin-top: var(--e2); border: 1px solid var(--linha-forte); border-radius: 22px; padding: 5px 6px; background: var(--papel); } .escrita:focus-within { border-color: var(--azul); } .escrita textarea { flex: 1; min-width: 0; border: 0; background: none; resize: none; padding: 8px 4px; font: inherit; font-size: .95rem; color: var(--tinta); max-height: 150px; } .escrita textarea:focus { outline: none; box-shadow: none; } /* Os três botões redondos da barra. Redondos, e não retangulares, porque eles moram DENTRO de um campo arredondado: quadrado dentro de redondo briga. */ .escrita button { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; } .escrita__mais { background: var(--chao); color: var(--fraca); } .escrita__mais:hover { background: var(--azul-agua); color: var(--azul); } .escrita__mandar { background: var(--azul); color: #fff; } .escrita__mandar:hover { background: var(--azul-forte); } .escrita__mandar--nota { background: var(--pessoa); } .escrita__voz { background: var(--feito); color: #fff; position: relative; } .escrita__voz:hover { filter: brightness(1.06); } .escrita__voz:disabled { background: var(--chao); color: var(--fraca); cursor: not-allowed; } /* O relógio da gravação: uma pílula vermelha ao lado do microfone, com o tempo correndo. Fora do botão, porque o botão pulsa e número que pulsa não se lê. */ .escrita { position: relative; } .escrita__contando { flex: none; align-self: center; white-space: nowrap; padding: 4px 10px; border-radius: 14px; background: var(--gente); color: #fff; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; animation: piscar 1.4s ease-in-out infinite; } .escrita__contando::before { content: "●"; margin-right: 6px; font-size: .7em; vertical-align: 1px; } @keyframes piscar { 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .escrita__contando { animation: none; } } .escrita__pe { margin: 6px 0 0; padding-left: 46px; } /* Desistir do recado: cinza e discreto ao lado do microfone vermelho. Ele não compete com o de enviar, mas fica na mão de quem já está olhando para lá. */ .escrita__largar { background: var(--chao); color: var(--fraca); } .escrita__largar:hover { background: var(--gente-fundo); color: var(--gente); } /* Gravando, o botão fica vermelho e pulsa devagar: é o único jeito de a pessoa ter certeza de que o microfone está aberto, e isso importa. */ .escrita__voz.gravando { background: var(--gente); animation: gravando 1.4s ease-in-out infinite; } @keyframes gravando { 50% { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .escrita__voz.gravando { animation: none; } } /* O anexo esperando e os recados do gravador moram na mesma linha, logo abaixo da barra: é onde o olho já está quando a pessoa acabou de escolher. */ .anexos__escolhido { display: flex; align-items: center; gap: var(--e2); margin: 6px 0 0; padding: 0 var(--e3) var(--e3); color: var(--azul); } .anexos__escolhido .ic { flex: none; } .anexos__escolhido > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anexos__escolhido .botao-de-texto { margin-left: auto; color: var(--fraca); } /* A tecla escrita no rodapé da barra. Fundo e borda leves: é referência, não botão, e ninguém deve tentar clicar nela. */ .escrita__tecla { border: 1px solid var(--linha); border-radius: 5px; padding: 0 5px; background: var(--chao); font-size: .78rem; white-space: nowrap; } /* ---- as respostas prontas, pela barra ------------------------------------ Elas sobem POR CIMA da conversa, ancoradas na caixa. Empurrando a conversa para cima, a última mensagem sai da tela justamente enquanto a pessoa escolhe a resposta para ela. */ .prontas { position: absolute; left: var(--e3); right: var(--e3); bottom: 100%; margin-bottom: 6px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--canto); box-shadow: 0 -12px 30px -14px rgba(11,18,32,.35); max-height: 300px; overflow-y: auto; z-index: 5; } .prontas__dica { margin: 0; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: var(--papel); } .prontas ul { list-style: none; margin: 0; padding: 4px; } .prontas li button { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e2); width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 7px var(--e2); border-radius: 8px; cursor: pointer; } .prontas li button:hover, .prontas li button.mirada { background: var(--azul-agua); } .prontas__titulo { color: var(--tinta); font-weight: 500; } .prontas__trecho { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atalho { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; background: var(--chao); color: var(--azul); padding: 1px 6px; border-radius: 5px; align-self: start; } /* O arquivo dentro do balão: nome e clipe, sem promessa de abrir. O arquivo não fica guardado aqui, e um link que não abre é pior que nenhum link. */ .fala__arquivo { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-weight: 500; } .fala__arquivo .ic { flex: none; opacity: .7; } /* ---- a nota interna ------------------------------------------------------- Ela atravessa a conversa inteira, sem lado e sem retrato. Balão com lado é fala de alguém para o cliente; nota é bilhete da equipe para a equipe, e o desenho tem que dizer isso antes de a pessoa ler a primeira palavra. */ .nota { display: flex; gap: var(--e2); align-items: flex-start; margin: var(--e3) 0; padding: var(--e3); border-radius: var(--canto); background: var(--pessoa-fundo); border: 1px dashed var(--pessoa); } .nota .ic { color: var(--pessoa); flex: none; margin-top: 1px; } .nota p { margin: 0 0 3px; white-space: pre-wrap; color: var(--tinta); font-size: .92rem; } /* ---- responder ou anotar -------------------------------------------------- Duas abas de rádio, sem script: o que está marcado aparece. Se o JavaScript não carregar, a caixa de responder continua sendo a que está aberta, que é o trabalho de todo dia. */ .escrever__abas > input { position: absolute; opacity: 0; width: 1px; height: 1px; } .escrever__abas > label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: .86rem; color: var(--fraca); cursor: pointer; border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: 0; } .escrever__abas > label:hover { color: var(--tinta); } .escrever__abas > input:checked + label { color: var(--tinta); background: var(--papel); border-color: var(--linha); font-weight: 500; } .escrever__abas > input:focus-visible + label { outline: 2px solid var(--azul); outline-offset: 2px; } /* Cada formulário aparece só quando a aba dele está marcada. A ordem no HTML é aba, aba, form, form: por isso os dois irmãos gerais com posição. */ .escrever__abas > form { display: none; } .escrever__abas > input:nth-of-type(1):checked ~ form:nth-of-type(1), .escrever__abas > input:nth-of-type(2):checked ~ form:nth-of-type(2) { display: block; } /* `flex: none` porque a coluna tem altura fixa: sem isso a barra encolhe junto com o fio da conversa e some pela metade embaixo da tela. */ .escrever { border-top: 1px solid var(--linha); flex: none; } .responder__pe { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e2); flex-wrap: wrap; } .rascunho-aviso { margin: 0 0 var(--e2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .escrever__abas { padding: var(--e2) var(--e3) 0; } /* ---- a coluna da ficha ---------------------------------------------------- Na ordem em que a pergunta aparece: em que pé está, de quem é, e só depois quem é a pessoa. Quem abre esta coluna no meio de um atendimento não está fazendo pesquisa, está decidindo o que fazer agora. */ .ficha__cara { text-align: center; margin-bottom: var(--e4); } .ficha__cara .retrato { margin: 0 auto var(--e2); } .ficha__cara h2 { margin: 0; } .ficha__cara p { margin: 2px 0 0; } .bloco-lateral { background: var(--chao); border-radius: var(--canto); padding: var(--e3); } .situacao { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--e3); } .botao.largo { width: 100%; justify-content: center; } .dono { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e3); } .escolher-dono { display: flex; gap: var(--e2); } .escolher-dono select { flex: 1; min-width: 0; } /* Grade fixa: rótulo e valor precisam cair na mesma coluna em todas as linhas, senão a lista vira escada e ninguém acha o e-mail de bater o olho. */ .dados-do-contato { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--e3); margin: 0 0 var(--e2); font-size: .9rem; } .dados-do-contato dt { color: var(--fraca); } .dados-do-contato dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; } .anotar { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e2); } .anotar input { flex: 1; min-width: 100px; } .conversa__origem { display: flex; flex-wrap: wrap; gap: 4px var(--e2); align-items: center; } /* ---- os agentes da empresa ------------------------------------------------ Um cartão por agente, com a mesma anatomia sempre: quem é, o movimento dele, o número dele e o que dá para fazer com ele. Repetir a anatomia é o que permite comparar dois agentes de bater o olho, que é o motivo de a tela existir. */ .agente__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); margin: var(--e4) 0; } .agente__numeros > div { background: var(--chao); border-radius: var(--canto); padding: var(--e2) var(--e3); } .agente__numeros b { display: block; font-size: 1.3rem; color: var(--tinta); font-variant-numeric: tabular-nums; } .agente__numeros span { font-size: .78rem; color: var(--fraca); } .agente__linha { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; border-top: 1px solid var(--linha); padding-top: var(--e3); } .agente__estado { display: flex; align-items: center; gap: 7px; margin: 0; flex: 1 1 240px; font-size: .88rem; color: var(--fraca); } .agente__estado .ic { flex: none; } .agente__estado--ok { color: var(--feito); } .agente__estado--fora { color: var(--gente); } .agente__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); } /* Agente desligado continua legível, e só: apagado demais some da tela e alguém passa a semana achando que ele está atendendo. */ .agente--desligado { opacity: .72; } .agente--desligado .retrato { filter: grayscale(1); } /* ---- conectar o WhatsApp -------------------------------------------------- O código de um lado, o passo a passo do outro. Quem faz isso está com o celular na mão e a cabeça no telefone, não na tela: o texto tem que caber num olhar de relance entre um toque e outro. */ .par--conectar { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } .conectar { text-align: center; } .conectar__codigo { display: block; margin: 0 auto var(--e3); border-radius: var(--canto); background: #fff; padding: var(--e2); max-width: 100%; height: auto; } .conectar__digitar { margin: 0 0 var(--e2); font-size: .92rem; } .conectar__digitar b { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .12em; color: var(--tinta); } .conectado { text-align: center; } .conectado h2 { margin-top: var(--e3); } .conectado p { max-width: 56ch; margin: 0 auto var(--e4); } .ilustra--grande { width: 168px; height: auto; } .passos { margin: var(--e3) 0 var(--e4); padding-left: 1.2em; color: var(--fraca); line-height: 1.7; } .passos strong { color: var(--tinta); font-weight: 600; } @media (max-width: 900px) { .par--conectar { grid-template-columns: minmax(0, 1fr); } } /* ---- os gráficos se desenhando ------------------------------------------ Um momento só, no carregamento, e nunca em laço. A curva se desenha da esquerda para a direita porque é assim que o tempo anda nela; as barras crescem de baixo porque é assim que quantidade cresce. Movimento que contradiz o que o desenho significa atrapalha em vez de ajudar. Tudo aqui é enfeite no sentido estrito: se não rodar, o gráfico já está desenhado no lugar certo. Nada depende da animação para ser lido. */ @media (prefers-reduced-motion: no-preference) { /* As colunas sobem do chão, em cascata da esquerda: é assim que quantidade cresce. No fim o desenho é idêntico ao de uma página sem animação nenhuma -- a regra deste bloco inteiro. */ .grafico__parte { transform-origin: bottom; animation: sobe-a-barra .5s cubic-bezier(.2,.8,.3,1) backwards; } @keyframes aparece { to { opacity: 1; } } /* As barras da hora do dia sobem do chão, em cascata da esquerda. */ .horas > div { transform-origin: bottom; animation: sobe-a-barra .5s cubic-bezier(.2,.8,.3,1) backwards; animation-delay: var(--atraso, 0ms); } @keyframes sobe-a-barra { from { transform: scaleY(0); } } /* A fita e as barras de comparação abrem da esquerda, que é de onde a régua começa a contar. */ .fita__parte, .contra__cheio { transform-origin: left; animation: abre-a-faixa .7s cubic-bezier(.2,.8,.3,1) backwards; } .fita__parte:nth-child(2) { animation-delay: .1s; } .fita__parte:nth-child(3) { animation-delay: .2s; } .fita__parte:nth-child(4) { animation-delay: .3s; } .contra__cheio--nosso { animation-delay: .2s; } @keyframes abre-a-faixa { from { transform: scaleX(0); } } /* O placar da supervisão: a barra corre até a marca do período. */ .barra > i { transform-origin: left; animation: abre-a-faixa .9s cubic-bezier(.2,.8,.3,1) .15s backwards; } } /* ---- o gráfico de colunas (`_grafico.html`, conta em `graficos.py`) ----- Uma peça só para toda tela que desenha tempo. Tudo é HTML em percentual, e por isso a letra tem o mesmo tamanho no celular e no monitor. Foi linha até 22/09/2026; com a auditoria rodando em poucos dias, a linha virava tracinho solto no ar, e o Daniel não conseguia ler nada no celular. */ .grafico { position: relative; margin: var(--e3) 0 0; } .grafico__corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--e2); } .grafico__eixo { position: relative; grid-row: 1; grid-column: 1; min-width: 2.2em; font-size: .78rem; color: var(--fraca); font-variant-numeric: tabular-nums; } .grafico__eixo span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; white-space: nowrap; } .grafico__plano { position: relative; grid-row: 1; grid-column: 2; height: 200px; cursor: pointer; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; } .grafico__plano:focus-visible { box-shadow: 0 0 0 2px var(--azul); border-radius: 4px; } .grafico__grade { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--linha); pointer-events: none; } /* o chão é risco inteiro: é olhando para ele que se entende a altura da coluna */ .grafico__grade--chao { border-top: 1px solid var(--linha-forte); } /* A coluna ocupa a faixa do dia inteira para o dedo acertar, mas o desenho fica no meio, com folga dos lados: coluna encostada na vizinha vira um bloco só, e deixa de ser "um dia". */ .grafico__coluna { position: absolute; top: 0; bottom: 0; } .grafico__parte { position: absolute; left: 18%; right: 18%; max-width: 34px; margin: 0 auto; background: var(--azul); border-radius: 3px 3px 0 0; } .grafico__parte + .grafico__parte { border-radius: 3px 3px 0 0; box-shadow: 0 2px 0 var(--papel); } .grafico__parte--feito { background: var(--feito); } .grafico__parte--pessoa { background: var(--pessoa); } .grafico__parte--gente { background: var(--gente); } /* zero medido é diferente de dia sem medida: ganha um risco no chão */ .grafico__zero { position: absolute; bottom: 0; left: 18%; right: 18%; max-width: 34px; margin: 0 auto; height: 2px; background: var(--linha-forte); } .grafico__coluna--foco { background: color-mix(in srgb, var(--azul) 10%, transparent); border-radius: 4px; } .grafico__datas { position: relative; grid-row: 2; grid-column: 2; height: 1.6em; margin-top: 6px; font-size: .78rem; color: var(--fraca); font-variant-numeric: tabular-nums; } .grafico__data { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } /* A dica lê o dia INTEIRO, onde quer que o mouse ou o dedo esteja. A posição é calculada no painel.js e empurrada para dentro da tela pela borda: no celular, a dica dos cartões estreitos saía pela lateral. */ .grafico__dica { position: absolute; top: 4px; left: 0; z-index: 5; pointer-events: none; width: max-content; max-width: min(280px, 80vw); background: var(--papel); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: 8px; padding: 8px 10px; font-size: .84rem; line-height: 1.4; box-shadow: 0 6px 18px rgba(0,0,0,.22); } .grafico__dica b { display: block; margin-bottom: 4px; } .grafico__dica-linha { display: flex; align-items: center; gap: 8px; } .grafico__dica-linha em { font-style: normal; margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: var(--e3); } .grafico__dica-base { display: block; margin-top: 4px; color: var(--fraca); font-size: .78rem; } .grafico__vazio { margin: var(--e3) 0 0; } @media (max-width: 640px) { .grafico__plano { height: 170px; } /* no celular metade das datas sai, e a última sempre fica */ .grafico__data--impar { display: none; } } .legenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin: var(--e2) 0 0; font-size: .82rem; color: var(--fraca); } .legenda__item { display: inline-flex; align-items: center; gap: 6px; } .legenda__marca { width: 14px; height: 3px; border-radius: 2px; display: inline-block; background: var(--azul); flex: none; } .legenda__marca--azul { background: var(--azul); } .legenda__marca--feito { background: var(--feito); } .legenda__marca--gente { background: repeating-linear-gradient(90deg, var(--gente) 0 4px, transparent 4px 7px); } .legenda__bloco { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; background: var(--azul); } .legenda__bloco--feito { background: var(--feito); } .legenda__bloco--pessoa { background: var(--pessoa); } .legenda__bloco--gente { background: var(--gente); } /* A nota de cada critério no período, em barra, com a seta de quanto mudou contra o período anterior. Substituiu em 22/09/2026 os sete gráficos miúdos, que com a auditoria em poucos dias eram sete rabiscos. */ .placar-criterios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); } .criterio-nota { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--e3); align-items: baseline; } .criterio-nota__nome { font-weight: 600; } .criterio-nota__nome small { font-weight: 400; color: var(--fraca); margin-left: 6px; } .criterio-nota__valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .criterio-nota__valor em { font-style: normal; font-weight: 500; font-size: .8rem; margin-left: 6px; } .criterio-nota__valor .sobe { color: var(--feito); } .criterio-nota__valor .desce { color: var(--gente); } .criterio-nota__valor .igual { color: var(--fraca); } .criterio-nota .barra { grid-column: 1 / -1; height: 8px; } .barra i.feito { background: var(--feito); } .barra i.pessoa { background: var(--pessoa); } .barra i.gente { background: var(--gente); } /* A frase de cima da evolução: esta semana contra a anterior, com a seta. */ .tendencia { display: flex; align-items: baseline; gap: var(--e2) var(--e3); flex-wrap: wrap; margin: var(--e2) 0 0; } .tendencia b { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tendencia .sobe { color: var(--feito); } .tendencia .desce { color: var(--gente); } .tendencia .igual { color: var(--fraca); } .feito-texto { color: var(--feito); } .pessoa-texto { color: var(--pessoa); } .gente-texto { color: var(--gente); } /* Some da tela e continua para o leitor de tela: é a tabela do gráfico. */ .so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* O que ela resolveu, por assunto. Mesmo desenho da lista de desfechos ao lado, porque são a mesma pergunta em duas alturas e aprender dois desenhos para a mesma coisa é trabalho jogado fora. */ .assuntos { list-style: none; margin: var(--e3) 0 0; padding: 0; } .assuntos li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--e3); align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linha); } .assuntos li:last-child { border-bottom: 0; } .assuntos strong { display: block; font-weight: 600; } .assuntos .miudo { display: block; } .fita { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--chao); margin: var(--e3) 0 var(--e3); } .fita__parte { display: block; min-width: 3px; } .fita__parte--feito, .fita__marca--feito { background: var(--feito); } .fita__parte--calmo, .fita__marca--calmo { background: var(--azul); } .fita__parte--gente, .fita__marca--gente { background: var(--gente); } .fita__parte--aviso, .fita__marca--aviso { background: var(--pessoa); } .fita__marca { width: 10px; height: 10px; border-radius: 3px; flex: none; } /* Grade fixa em vez de flex: o número e a porcentagem de cada linha precisam cair na mesma coluna, senão a lista vira escada e ninguém compara nada. */ .desfechos { list-style: none; margin: 0; padding: 0; } .desfechos li { display: grid; grid-template-columns: 10px 1fr auto 44px; gap: var(--e2); align-items: center; padding: var(--e2) 0; border-bottom: 1px solid var(--linha); } .desfechos li:last-child { border-bottom: 0; } .desfechos strong { display: block; color: var(--tinta); font-weight: 600; } .desfechos .numero { font-variant-numeric: tabular-nums; text-align: right; } .par { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-bottom: var(--e3); } .par > * { display: flex; flex-direction: column; min-width: 0; } .par--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Cada cartão com a altura do que ele tem dentro. Esticados para a mesma altura, o do gráfico ganhava uma faixa vazia do tamanho de um parágrafo embaixo da legenda, só porque a lista de desfechos ao lado é mais longa. */ .par--desempenho { align-items: start; } @media (max-width: 1100px) { .par--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .par, .par--tres { grid-template-columns: minmax(0, 1fr); } } /* ---- o topo da conversa que não quebra ---------------------------------- Nome comprido é a regra e não a exceção: o WhatsApp entrega "ADRIANE SOUZA DO NASCIMENTO" em maiúscula. Se o nome empurrar o volante para a linha de baixo, o controle mais importante da tela muda de lugar de cliente para cliente. Então o nome corta e o volante fica parado. */ .conversa__nome { min-width: 0; flex: 1 1 220px; overflow: hidden; } .conversa__nome .conversa__quem, .conversa__nome > .miudo { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversa__acoes { margin-left: auto; display: flex; gap: var(--e2); align-items: center; flex: none; } @media (max-width: 1100px) { .conversa__acoes { flex-wrap: wrap; justify-content: flex-end; } } /* ---- a faixa do chamado ------------------------------------------------- Uma linha, e o resumo abre por vontade de quem lê. Card de chamado alto parece importante e custa caro: come justamente a altura em que as mensagens do cliente deveriam estar. */ .faixa-chamado { border-bottom: 1px solid var(--linha); border-left: 3px solid var(--gente); background: var(--gente-fundo); flex: none; } .faixa-chamado summary { display: flex; align-items: center; gap: var(--e2); flex-wrap: nowrap; padding: 10px var(--e4); cursor: pointer; list-style: none; overflow: hidden; } .faixa-chamado summary > strong, .faixa-chamado summary > .etiqueta { flex: none; } .faixa-chamado summary::-webkit-details-marker { display: none; } .faixa-chamado summary::after { content: "detalhes"; font-size: .78rem; flex: none; color: var(--fraca); } .faixa-chamado__meta { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--e2); } .faixa-chamado[open] summary::after { content: "esconder"; } .faixa-chamado summary .ic { color: var(--gente); } .faixa-chamado > p { margin: 0 var(--e4) var(--e2); } .faixa-chamado__acoes { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; padding: 0 var(--e4) var(--e3); } /* Numa coluna de altura fixa, quem cede espaço é a conversa e nunca a caixa de resposta: caixa de resposta cortada pela borda de baixo é o botão de enviar desaparecendo. */ /* As mensagens encostam embaixo, como em qualquer conversa: com poucas falas, elas ficavam no alto e sobrava meia tela de vazio entre a última mensagem e a caixa de resposta, o que fazia a tela parecer quebrada. O empurrão vem de `margin-top: auto` na PRIMEIRA fala, e nunca de `justify-content: flex-end`, que era como estava até 15/09/2026 e escondia a conversa inteira. Numa coluna flex, `flex-end` empurra o que não cabe para FORA pelo topo, e o que sai por cima do topo é território que a rolagem não alcança: o navegador nem considera a caixa rolável. Medido naquele dia, numa conversa de 60 mensagens: a caixa tinha 376 px, o conteúdo tinha 5.752 px, a primeira mensagem estava a 5.695 px acima do topo, e `scrollHeight` era igual a `clientHeight`. Sem barra, sem roda do mouse, sem jeito. Foi relatado assim: "as mensagens acima ficam perdidas". `margin-top: auto` faz a mesma coisa quando sobra espaço e NÃO faz nada quando falta, que é exatamente a diferença que interessa. */ .conversa__fio { flex: 1 1 0; min-height: 0; } .conversa__fio > :first-child { margin-top: auto; } .responder { flex: none; margin: 0; } /* A mesa de atendimento ocupa a tela até embaixo: o rodapé de respiro da página vira, aqui, linha de conversa. */ .obra:has(.mesa) { padding-bottom: var(--e4); } /* ---- A TELA DE ATENDER É A TELA INTEIRA ---------------------------------- Medido em 18/09/2026, lado a lado com outro painel do mesmo tipo: a conversa ficava com pouco mais de um terço da altura do monitor. O resto era enfeite -- cabeçalho grande, subtítulo explicando o que a tela é, faixa de visita e um rodapé de respiro --, e cada um desses pedaços custava mensagens à vista. Numa tela de trabalho, quem lê o subtítulo lê uma vez; quem lê as mensagens lê o dia inteiro. A altura deixa de ser uma conta com número mágico (`100vh - 148px`, que errava sempre que o topo mudava) e passa a ser o que sobra: a obra vira uma coluna da altura da janela, e a mesa ocupa o que ninguém mais ocupou. `100dvh`, e não `100vh`: no celular, `vh` conta a barra do navegador que não está lá, e a caixa de escrever ficava atrás dela. Só vale do tablet para cima; no celular quem rola é a página, e isso não muda. */ /* ---- A CONVERSA NO CELULAR: o fio rola, e responder fica na mão ---------- Medido em 21/09/2026, num iPhone de 844px: a caixa de escrever nascia a 945px do topo — CEM PIXELS ABAIXO DA TELA. Para responder o cliente era preciso rolar a página inteira até o fim, toda vez, e numa conversa de vinte mensagens isso é um gesto longo antes de cada resposta. A ação principal da tela principal estava fora do alcance. Aqui ela vira o que todo aplicativo de mensagem é: o fio rola por dentro, e a caixa de escrever fica presa embaixo. A barra de atalhos sai de cena nesta tela — quem está numa conversa quer responder, e não trocar de seção; o caminho de volta continua sendo o cabeçalho. `100dvh` e não `100vh`: `vh` conta a barra do navegador que não está lá, e a caixa de escrever ficaria atrás dela. */ @media (max-width: 760px) { .obra:has(.mesa) { display: flex; flex-direction: column; /* a janela menos o topo fixo */ height: calc(100dvh - 56px); padding-bottom: 0; padding-top: var(--e2); overflow: hidden; } .obra:has(.mesa) .cabeca { display: none; } /* o nome de quem fala já está no topo da conversa */ .obra:has(.mesa) .mesa { flex: 1 1 auto; min-height: 0; height: auto; } .obra:has(.mesa) .mesa__coluna { min-height: 0; } .obra:has(.mesa) .conversa { min-height: 0; } .obra:has(.mesa) .conversa__fio { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .obra:has(.mesa) .escrever { flex: none; position: sticky; bottom: 0; background: var(--papel); padding-bottom: env(safe-area-inset-bottom, 0); } /* A barra de atalhos daria dois centímetros a menos de conversa, e nesta tela ela não é o que se quer: a volta é pelo cabeçalho. */ .obra:has(.mesa) ~ .bolso { display: none; } } @media (min-width: 901px) { .obra:has(.mesa) { display: flex; flex-direction: column; height: 100dvh; padding-top: var(--e4); padding-bottom: var(--e3); } .obra:has(.mesa) .mesa { flex: 1 1 auto; height: auto; min-height: 0; } /* O cabeçalho encolhe para o tamanho de uma barra: o ícone e o nome bastam para saber onde se está, e os selos continuam à direita. */ .obra:has(.mesa) .cabeca { margin-bottom: var(--e3); align-items: center; } .obra:has(.mesa) .cabeca p { display: none; } .obra:has(.mesa) .cabeca__marca { width: 32px; height: 32px; border-radius: 9px; } .obra:has(.mesa) .cabeca__marca .ic { width: 17px; height: 17px; } .obra:has(.mesa) .cabeca h1 { font-size: 1.15rem; } /* A faixa de visita não sai -- ela existe para evitar escrever na empresa errada --, mas cabe em uma linha fina. */ .obra:has(.mesa) .visita { margin-bottom: var(--e2); padding: 4px var(--e2); font-size: .84rem; } .obra:has(.mesa) .visita button { padding: 3px 10px; font-size: .82rem; } } /* ---- cabeçalho de cartão ------------------------------------------------- Três lugares, sempre os mesmos: sinal à esquerda, nome e explicação no meio, estado à direita. O do meio é o único que encolhe, e corta em vez de quebrar. Sem isto, uma etiqueta um pouco mais comprida joga a explicação para baixo em um cartão e não no vizinho, e a fila inteira desalinha. */ .cabeca-cartao { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); } .cabeca-cartao__corpo { flex: 1; min-width: 0; } .cabeca-cartao__corpo h2, .cabeca-cartao__corpo h3 { margin: 0; font-size: 1rem; } .cabeca-cartao__corpo p { margin: 1px 0 0; font-size: .82rem; color: var(--fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cabeca-cartao > .etiqueta { flex: none; } /* O corpo cresce e o rodapé fica colado embaixo: numa fila de três, o botão de cada cartão precisa estar na mesma altura. */ .cartao-fixo { display: flex; flex-direction: column; height: 100%; } .cartao-fixo__corpo { flex: 1; } .cartao-fixo__pe { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; } /* ---- pares de rótulo e valor -------------------------------------------- Rótulo estreito, valor ocupando o resto. Vale em ficha, integração e em qualquer lugar onde a pergunta é "o que está configurado". */ .dados { display: grid; grid-template-columns: minmax(92px, auto) 1fr; gap: 7px var(--e3); margin: 0; font-size: .9rem; } .dados dt { color: var(--fraca); } .dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* ---- a conta aberta ------------------------------------------------------ Uma linha por parcela e o total embaixo. Serve para qualquer número que precise ser conferido, e não só acreditado. */ .conta-aberta { list-style: none; margin: 0; padding: 0; font-size: .88rem; } .conta-aberta li { display: flex; gap: var(--e3); padding: 7px 0; border-bottom: 1px dashed var(--linha); } .conta-aberta li:last-child { border-bottom: 0; } .conta-aberta span { flex: 1; color: var(--fraca); } .conta-aberta b { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; } .conta-aberta li.total { border-top: 1px solid var(--linha-forte); border-bottom: 0; margin-top: 4px; padding-top: 11px; } .conta-aberta li.total span, .conta-aberta li.total b { color: var(--tinta); font-weight: 600; } /* ---- tabela que não quebra ---------------------------------------------- Coluna de ação encostada à direita e sem quebra de linha; o resto divide o que sobra. Uma tabela em que o botão desce de linha em uma linha só é o que faz a lista parecer torta. */ th.acoes, td.acoes { text-align: right; white-space: nowrap; width: 1%; } td.aperta { white-space: nowrap; width: 1%; } /* Nome de cliente do WhatsApp é comprido de verdade ("ADRIANE SOUZA DO NASCIMENTO"): sem uma largura reservada para ele, a coluna do nome fica com o que sobrou e quebra em três linhas, enquanto o telefone e a data, que têm tamanho fixo, sobram largura. */ table th[style*="width"] { white-space: nowrap; } .gente li strong, td strong { overflow-wrap: anywhere; } /* ---- o preço sugerido, na tela do fabricante ----------------------------- Fundo próprio e não um cartão a mais: é conta nossa dentro do retrato da empresa, e cartão com borda ali dentro faria parecer outro assunto. */ .preco { margin-top: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--canto); background: var(--chao); border-left: 3px solid var(--azul); } .preco__valor { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; } .preco__numero { font-size: 1.5rem; font-weight: 650; color: var(--azul); } .preco__conta { display: flex; gap: var(--e5); flex-wrap: wrap; margin: var(--e3) 0 0; } .preco__conta dt { font-size: .78rem; color: var(--fraca); margin: 0; } .preco__conta dd { margin: 2px 0 0; font-weight: 600; } .preco__conta-fechada { margin: var(--e3) 0 0; max-width: 78ch; } @media (max-width: 700px) { .preco__conta { gap: var(--e3) var(--e4); } } /* ---- prazos -------------------------------------------------------------- Quem está esperando agora abre a tela, e por isso o cartão tem a cor de quem precisa de gente: é o único bloco daqui que pede ação, e não leitura. */ .cabeca__marca--gente { background: var(--gente-fundo); } .cabeca__marca--gente .ic { color: var(--gente); } .atraso { border-left: 3px solid var(--gente); margin-bottom: var(--e4); } .atraso__lista { list-style: none; margin: var(--e3) 0 0; padding: 0; } .atraso__lista > li { display: flex; align-items: center; gap: var(--e3); padding: 9px 0; border-bottom: 1px solid var(--linha); } .atraso__lista > li:last-child { border-bottom: 0; } .atraso__lista a { font-weight: 600; text-decoration: none; } .atraso__lista a:hover { text-decoration: underline; } .atraso__lista > li > span.fraca { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atraso__tempo { color: var(--gente); font-weight: 600; white-space: nowrap; } /* Atraso em vermelho na tabela. Só o número que representa gente esperando: pintar a linha inteira faria a pessoa parecer o problema. */ .numero--ruim { color: var(--gente); font-weight: 600; } .metas { display: flex; gap: var(--e3); align-items: end; flex-wrap: wrap; margin-top: var(--e3); } .metas .campo { margin: 0; } .metas input { width: 12ch; } /* ---- o expediente da empresa --------------------------------------------- Uma linha por dia, com o dia à esquerda e as duas horas à direita. Grade e não flex: assim as horas de todos os dias ficam na mesma coluna, e o olho percorre a semana de cima a baixo em vez de caçar cada campo. */ .semana { display: grid; gap: var(--e2); margin: var(--e3) 0; } .semana__dia { display: grid; grid-template-columns: 160px auto auto auto; gap: var(--e2); align-items: center; } .semana__marca { display: flex; align-items: center; gap: var(--e2); cursor: pointer; } .semana__marca input { width: auto; margin: 0; } /* Dia fechado fica apagado, e não escondido: quem procura "por que domingo não aparece?" precisa achar o domingo para ligar. */ .semana__dia--fechado > :not(.semana__marca) { opacity: .45; } .semana input[type="time"] { width: 8.5ch; } @media (max-width: 620px) { .semana__dia { grid-template-columns: minmax(0, 1fr) auto auto auto; } .semana__dia > .semana__marca { grid-column: 1 / -1; } } /* O rótulo de um grupo de escolhas. Mesmo peso e cor do rótulo de campo, para "Tipo" acima de seis cartões parecer parte do mesmo formulário. */ .campo__rotulo { display: block; font-size: .84rem; color: var(--fraca); margin: var(--e3) 0 6px; } /* ---- a prova, no topo da tela da empresa --------------------------------- Campo de configuração sozinho não diz nada: "endereço: (vazio)" não avisa ninguém do que acontece. A frase que o cliente vai ler diz tudo, e o campo em branco aparece como o que ela realmente faz quando não sabe. */ .prova { background: var(--chao); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e3) var(--e4); margin-bottom: var(--e4); } .prova__rotulo { margin: 0 0 var(--e2); font-size: .78rem; font-weight: 600; color: var(--fraca); } .prova__linhas { display: grid; gap: var(--e3); margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); } .prova__linhas > div { min-width: 0; } .prova__linhas dt { margin: 0 0 3px; font-size: .84rem; color: var(--fraca); } .prova__linhas dd { margin: 0; font-weight: 600; text-wrap: pretty; } .prova__sem { color: var(--pessoa); font-weight: 500; } @media (max-width: 860px) { .prova__linhas { grid-template-columns: minmax(0, 1fr); } } /* Escolhas empilhadas: quando cada opção tem duas linhas de explicação, lado a lado elas ficam com alturas diferentes e o olho não compara. */ .escolhas--empilha { grid-template-columns: minmax(0, 1fr); } .escolhas--par { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 560px) { .escolhas--par { grid-template-columns: minmax(0, 1fr); } } /* ---- o expediente, dia a dia --------------------------------------------- Uma linha por dia, com o nome à esquerda e as horas sempre na mesma coluna: o olho percorre a semana de cima a baixo sem caçar cada campo. */ .semana { display: grid; gap: 6px; margin-top: var(--e3); } .semana__dia { display: grid; grid-template-columns: 22px 1fr auto auto; gap: var(--e2); align-items: center; padding: 5px 8px; border-radius: 8px; cursor: pointer; } .semana__dia:hover { background: var(--chao); } .semana__dia > input[type="checkbox"] { width: auto; margin: 0; } .semana__nome { font-size: .9rem; } .semana__horas { display: flex; align-items: center; gap: 6px; } .semana__horas i { font-style: normal; color: var(--fraca); font-size: .82rem; } /* Largura em ch cortava o campo: o reloginho que o navegador desenha dentro do campo de hora não cabe em 8,5 caracteres, e aparecia "08:0". */ .semana input[type="time"] { width: auto; min-width: 7.5rem; padding: 5px 7px; } .semana__fechado { display: none; font-size: .82rem; color: var(--fraca); } /* Dia fechado esconde as horas e diz "fechado" no lugar: dois campos apagados ao lado de um dia desmarcado davam a impressão de que o horário valia. */ .semana__dia--fechado .semana__horas { display: none; } .semana__dia--fechado .semana__fechado { display: inline; } .semana__dia--fechado .semana__nome { color: var(--fraca); } /* NO CELULAR AS HORAS DESCEM PARA A LINHA DE BAIXO. Dois campos de hora de 120px, mais a caixa de marcar e o nome do dia, somam mais que a largura de um telefone: era esta tela que rolava de lado, e página que rola de lado no celular é página em que o dedo tira o texto da vista sem querer, toda vez que se tenta rolar para baixo. */ @media (max-width: 560px) { .semana__dia { grid-template-columns: 22px minmax(0, 1fr); row-gap: 4px; } .semana__horas, .semana__fechado { grid-column: 2 / -1; } .semana input[type="time"] { min-width: 0; flex: 1 1 0; width: 100%; } } /* AS FICHAS DE FILTRO ("Tudo", "Quadro", "Lista", "Aprovadas") NO CELULAR. Medidas em 21/09/2026: 28px de altura. O dedo médio cobre 45px, então acertar "Lista" sem pegar "Quadro" virava questão de sorte, e errar troca a tela inteira. 40px é o mínimo que se acerta em pé, no ônibus. */ @media (max-width: 760px) { .ficha, .abas a, .abas button { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; } } /* A TABELA DE ALCANCE NO CELULAR. Sete colunas (a pessoa e as seis áreas) não cabem em 390px, e encolher a fonte até caber torna as caixas de marcar impossíveis de acertar com o dedo. Ela rola de lado DENTRO da própria moldura, e a primeira coluna fica presa: sem o nome da pessoa à vista, marcar a terceira coluna da quinta linha é apostar. */ @media (max-width: 760px) { .rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.alcance { min-width: 520px; } table.alcance th:first-child, table.alcance td:first-child { position: sticky; left: 0; z-index: 1; background: var(--papel); } /* alvo de toque de verdade: caixa de 13px é caixa que se erra */ table.alcance input[type="checkbox"] { width: 20px; height: 20px; } .alcance__marca { padding: 10px 8px; } } /* O trecho da conversa dentro da página do chamado: uma lista simples, sem os balões da tela de conversa. Aqui se lê para entender o caso, não para responder. */ .trecho { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); } .trecho__fala { padding: var(--e2) var(--e3); border-radius: 10px; background: var(--fundo-2, rgba(127,127,127,.08)); } .trecho__fala p { margin: 4px 0 0; white-space: pre-wrap; } .trecho__fala--cliente { border-left: 3px solid var(--pessoa); } .trecho__fala--ia { border-left: 3px solid var(--marca, #2E4BDA); } .trecho__fala--humano { border-left: 3px solid var(--feito); } .trecho__fala--nota { border-left: 3px dashed var(--fraca, #888); opacity: .85; } /* Mídia dentro do balão: o áudio com play, a foto que abre, o vídeo que roda. */ /* O balão com mídia tem largura própria. Sem isto ele encolhe até o mínimo do tocador, e o áudio vira uma tira de dois dedos com o play espremido. */ .fala--midia { width: min(400px, 74%); } .fala__midia { display: block; width: 100%; max-width: 100%; margin: 4px 0; } audio.fala__midia { height: 44px; } video.fala__midia { max-height: 320px; border-radius: 10px; } .fala__foto { display: block; margin: 4px 0; } .fala__foto img { display: block; max-width: min(320px, 100%); max-height: 320px; border-radius: 10px; object-fit: cover; } /* Encerrar pede o desfecho: tipo, uma linha, e o botão. */ .encerrar { display: grid; gap: var(--e2); } .encerrar select, .encerrar input { width: 100%; } .fim { margin: 0 0 var(--e3); display: grid; gap: 4px; } .fim__texto { margin: 0; white-space: pre-wrap; } .palavra__titulo { font-size: 1rem; margin: var(--e4) 0 var(--e2); } .desfechos--palavra li { grid-template-columns: 1fr auto auto; } /* A voz do agente: duas colunas de amostras, cada uma com o botão de ouvir fora do rótulo, para "ouvir" não marcar a voz sem querer. */ .vozes { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--e2); } @media (max-width: 700px) { .vozes { grid-template-columns: minmax(0, 1fr); } } .vozes__titulo { font-size: .86rem; color: var(--fraca); margin: 0 0 var(--e1); font-weight: 600; } .voz { display: flex; align-items: center; gap: var(--e2); border: 1.5px solid var(--linha); border-radius: 10px; padding: var(--e2) var(--e3); margin-bottom: var(--e1); } .voz:has(input:checked) { border-color: var(--azul); background: var(--azul-agua); } .voz:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; } .voz__escolha { flex: 1; display: flex; align-items: center; gap: var(--e2); cursor: pointer; } /* o `input { width: 100% }` geral é para campo de texto; num rádio ele empurrava o nome da voz para o meio do cartão */ .voz__escolha input { width: auto; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--azul); } .voz__escolha > span { flex: 1; min-width: 0; } .voz__escolha strong { font-size: .9rem; } .voz__escolha small { display: block; font-size: .82rem; color: var(--fraca); } .voz__ouvir { padding: 4px 10px; font-size: .82rem; white-space: nowrap; min-width: 4.6rem; justify-content: center; } .voz__ouvir[aria-pressed="true"] { background: var(--azul); color: #fff; border-color: var(--azul); } /* A tabela de motores com custo, para quem paga a própria chave. */ .motores__tabela td, .motores__tabela th { white-space: nowrap; } .motores__atual { background: var(--azul-agua); } .motores__tabela input[type=radio] { width: auto; margin: 0; padding: 0; accent-color: var(--azul); } .motores label { cursor: pointer; } /* Qualidade: um medidor por agente (ou por empresa), e o detalhe com o hexágono dos critérios, a evolução e as respostas reprovadas. */ .medidores { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .medidor-cartao { display: block; color: inherit; text-decoration: none; } .medidor-cartao:hover { border-color: var(--linha-forte); } .medidor-cartao__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2); } .medidor-cartao__cabeca h2 { font-size: 1rem; margin: 0; } .medidor-cartao__cabeca .ic { transform: rotate(180deg); flex: 0 0 auto; } .medidor-cartao__pe { text-align: center; margin-top: var(--e1); } /* ---- a ficha de cada mão, embaixo do ponteiro ---------------------------- Quatro números curtos em duas colunas, e o tempo ocupando a linha inteira porque ele é uma frase ("2 h em média · 9 h no pior caso") e não um número. Espremido numa das colunas, ele quebrava em quatro linhas e o cartão da mão ficava mais alto que os vizinhos, que é o que faz uma grade parecer torta. */ .ficha-da-mao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e3); margin: var(--e3) 0 0; border-top: 1px solid var(--linha); padding-top: var(--e3); } .ficha-da-mao dt { font-size: .78rem; color: var(--fraca); margin-bottom: 1px; } .ficha-da-mao dd { margin: 0; font-size: .95rem; } .ficha-da-mao__larga { grid-column: 1 / -1; } /* `margin-top: auto` na ficha encosta todas elas no mesmo pé, para o olho comparar na horizontal em vez de caçar cada número. A LARGURA MÍNIMA CAIU DE 290 PARA 260 PX quando os dois tempos viraram dois campos curtos em vez de uma frase larga: com quatro mãos cadastradas, 290 deixava a quarta sozinha numa segunda fila, com um buraco do lado. */ .medidores--maos { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .medidores--maos .medidor-cartao { display: flex; flex-direction: column; } .medidores--maos .ficha-da-mao { margin-top: auto; } .medidor { width: 100%; max-width: 250px; height: auto; display: block; margin: var(--e2) auto 0; overflow: visible; } .medidor--grande { max-width: 470px; } .medidor__faixa { fill: none; stroke-width: 12; opacity: .85; } .medidor__cheio { fill: none; stroke: var(--azul); stroke-width: 12; stroke-linecap: round; } .medidor__marca { stroke: var(--fraca); stroke-width: 1; opacity: .55; } .medidor__marca--forte { stroke-width: 1.6; opacity: .8; } .medidor__numero { font-size: 7.5px; fill: var(--fraca); font-variant-numeric: tabular-nums; } .medidor__ponteiro path { fill: #E23D5B; } .medidor__ponteiro circle { fill: #E23D5B; stroke: var(--papel); stroke-width: 1.5; } .medidor__valor { font-size: 24px; font-weight: 700; text-anchor: middle; fill: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .medidor--vazio { min-height: 96px; display: flex; align-items: center; justify-content: center; color: var(--fraca); font-size: .86rem; border: 1px dashed var(--linha); border-radius: 10px; margin-top: var(--e2); } /* `start`, e não o esticar de fábrica: os dois cartões guardam desenhos de alturas diferentes, e esticar o mais baixo até a altura do mais alto abria 240 px de vazio embaixo do medidor -- o bastante para o cartão parecer quebrado quando não há avaliação nenhuma (15/09/2026). */ .dois { display: grid; gap: var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-bottom: var(--e4); } @media (max-width: 900px) { .dois { grid-template-columns: minmax(0, 1fr); } } /* Os dois desenhos cresceram em 15/09/2026. Presos em 380 px dentro de cartões de quase 600, eles boiavam no meio de um vazio alto de 240 px, e o cartão da esquerda ficava esticado pela altura do da direita. */ .radar { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; overflow: visible; } /* O traço da cor do papel abre um vão na grade atrás da frase: sem ele as linhas do hexágono passam por dentro das letras e a frase fica ilegível. */ .radar__vazio { font-size: 12px; fill: var(--fraca); stroke: var(--papel); stroke-width: 4; paint-order: stroke fill; } .radar__grade { fill: none; stroke: var(--linha); } .radar__eixo { stroke: var(--linha); } .radar__forma { fill: var(--azul); fill-opacity: .18; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; } .radar__rotulo { font-size: 9.5px; fill: var(--fraca); } /* `minmax(0, 1fr)` e a quebra em qualquer ponto: a resposta pode ter um Pix copia e cola, uma palavra só de 128 letras, e foi ele que empurrou a tela da Qualidade para fora do celular do Daniel em 22/09/2026. */ .falhas { list-style: none; padding: 0; margin: var(--e2) 0 0; display: grid; gap: var(--e2); grid-template-columns: minmax(0, 1fr); } .falha p { overflow-wrap: anywhere; } .falha { border: 1px solid var(--linha); border-radius: 10px; padding: var(--e2) var(--e3); } .falha__topo { display: flex; justify-content: space-between; gap: var(--e2); font-size: .84rem; color: var(--fraca); flex-wrap: wrap; } .falha__resposta { margin: 6px 0; font-size: .9rem; } .falha__motivo { color: var(--gente); font-size: .86rem; margin: 0; } /* O reparo não é vermelho, e isso é a mensagem inteira: este atendimento resolveu o caso do cliente. Pintar os dois da mesma cor era o que fazia a tela dizer "reprovado" para quem entregou o boleto certo e repetiu uma saudação. */ .falha--reparo { border-style: dashed; } .falha__reparo { color: var(--fraca); font-size: .86rem; margin: 0; } .falha__reparo strong { color: var(--tinta); } /* Três colunas, e não `auto-fill`: seis critérios em auto-fill caíam em quatro e sobrava uma fileira de dois, com a explicação espremida em quatro linhas. Em três, são duas fileiras cheias e a frase cabe em duas linhas. */ .criterios { display: grid; gap: var(--e2); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .criterios { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .criterios { grid-template-columns: minmax(0, 1fr); } } .criterio { border: 1px solid var(--linha); border-radius: 10px; padding: var(--e2) var(--e3); } .criterio b { display: flex; justify-content: space-between; gap: var(--e2); font-size: .9rem; } .criterio em { font-style: normal; color: var(--azul); } .criterio span { display: block; font-size: .82rem; color: var(--fraca); margin-top: 4px; } /* "Resolveu" fora da grade e na frente: são sete critérios agora, e sete em três colunas deixa o último sozinho numa fileira. Mas o motivo de verdade não é de encaixe -- é que esta pergunta decide, e as outras seis descrevem. */ .criterio--decide { border-color: var(--azul); margin-bottom: var(--e2); } /* Qual critério derruba a resposta e qual só aponta o que melhorar. Sem isto, a tela mostra seis caixas iguais e quem lê supõe que todas pesam o mesmo. */ .criterio__peso { display: block; font-style: normal; margin-top: 6px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .criterio--grave .criterio__peso { color: var(--gente); } .criterio--reparo .criterio__peso { color: var(--fraca); } .cabeca__acoes.fichas { flex-wrap: nowrap; } /* as três frases do "vale em gente": o que salário não mede */ .vantagens { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; color: var(--fraca); } .vantagens li { padding-left: 18px; position: relative; } .vantagens li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--feito); } .vantagens b { color: var(--tinta); } /* ---- o cadastro de alcance ---------------------------------------------- Uma área por linha e um papel por coluna: a pergunta que a tela responde é "quem vê isto?", e ler isso numa lista de permissões por pessoa seria conferir a mesma coisa quatro vezes. */ .alcance th { text-align: left; } .alcance__papel { text-transform: capitalize; text-align: center; font-weight: 500; } .alcance__marca { text-align: center; vertical-align: middle; } .alcance__marca input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--azul); cursor: pointer; } /* "sempre" no lugar da caixa: caixa desabilitada convida ao clique e não responde, e quem clica conclui que a tela está quebrada. */ .alcance__marca span { font-size: .78rem; color: var(--fraca); } .alcance td { padding: var(--e2) var(--e1); border-top: 1px solid var(--linha); } /* ---- a faixa de quem está na casa de outro ------------------------------ Fica no alto de toda tela enquanto a visita durar. Usa o âmbar de --pessoa, que nesta casa já quer dizer "está na mão de alguém", e não o vermelho: não é defeito nem perigo, é um lembrete de onde você está. Sem borda lateral colorida, que aqui já significa outra coisa, e com as duas cores vindas de token para a faixa não ficar branca no tema escuro. */ .visita { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; background: var(--pessoa-fundo); border: 1px solid var(--pessoa); border-radius: var(--canto); padding: var(--e2) var(--e3); margin: 0 0 var(--e4); font-size: .9rem; color: var(--tinta); } .visita .ic { flex: none; color: var(--pessoa); } .visita span { flex: 1; min-width: 12ch; } .visita button { flex: none; } /* ---- o contrato dentro do cartão do cliente ----------------------------- Um cliente pode ter mais de um produto conosco, e cada um é um contrato com CNPJ próprio. O contorno inteiro, e não uma faixa lateral: nesta tela faixa lateral já quer dizer outra coisa, e duas linguagens na mesma tela é nenhuma. */ .contrato { border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e3); margin-top: var(--e3); background: var(--chao); } .contrato__topo { display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--e2); } /* A ficha é a parte que se confere contra um papel impresso, então ela se lê em coluna e não em parágrafo. Em tela estreita cada item ocupa a linha inteira, senão "Razão social" quebra no meio e deixa de ser lida. */ .contrato__ficha { display: grid; gap: var(--e2) var(--e4); margin: 0 0 var(--e2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .contrato__ficha dt { font-size: .78rem; color: var(--fraca); } .contrato__ficha dd { margin: 0; font-size: .9rem; } /* Os dois formulários grandes desta tela. Eram grades de sete colunas fixas escritas no `style` da tag, e a 400px de largura isso empurrava a tela inteira para o lado. */ .cadastro-de-contrato, .plano-do-motor { display: grid; gap: var(--e2); align-items: end; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .plano-do-motor { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); } .cadastro-de-contrato .campo, .plano-do-motor .campo { margin: 0; min-width: 0; } .cadastro-de-contrato button, .plano-do-motor button { align-self: end; } /* ---- a fila dos chamados do suporte ------------------------------------- Uma linha por chamado, e o código na frente. O código vem primeiro porque é por ele que o cliente cobra, e é ele que quem lê a fila precisa reconhecer para saber que é o mesmo caso de que estavam falando. */ .chamado-linha { display: flex; gap: var(--e3); align-items: center; padding: var(--e3); border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--tinta); flex-wrap: wrap; } .chamado-linha:last-child { border-bottom: none; } .chamado-linha:hover { background: var(--chao); } .chamado-linha__codigo { font-size: .82rem; color: var(--fraca); letter-spacing: .03em; flex: none; } .chamado-linha__corpo { flex: 1; min-width: 12ch; display: flex; flex-direction: column; gap: 2px; } .chamado-linha__quando { flex: none; } /* Cada passo do chamado, no painel. A nota interna fica visualmente separada do que o cliente lê: é a diferença entre as duas que evita alguém escrever no campo errado, e no campo errado quer dizer o cliente lendo o que não era para ele. */ .passo-suporte { padding: var(--e3) 0; border-top: 1px solid var(--linha); } .passo-suporte:first-of-type { border-top: none; } .nota-interna { background: var(--pessoa-fundo); color: var(--tinta); border-radius: var(--canto); padding: 6px var(--e2); display: flex; gap: 6px; align-items: flex-start; } .nota-interna .ic { flex: none; color: var(--pessoa); } /* A chave recém-criada, que aparece uma vez só. Grande, monoespaçada e com quebra em qualquer ponto: ela é para ser selecionada e copiada, e uma chave que estoura a caixa faz a pessoa copiar metade sem perceber. */ .chave-nova { font-size: 1rem; background: var(--chao); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e2) var(--e3); word-break: break-all; user-select: all; margin: var(--e2) 0; } /* Tabela larga em tela estreita rola sozinha, dentro da caixa dela. Sem isto, é a PÁGINA que passa a rolar de lado, e aí o menu e o título saem do lugar junto com a tabela. */ .rola-de-lado { overflow-x: auto; } /* Os dois tempos, média e pior caso, lado a lado e do mesmo tamanho. O pior não é rodapé nem aviso: é número, porque é ele que faz o cliente reclamar. */ .par-de-tempos { display: grid; gap: var(--e3); margin: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .par-de-tempos dt { font-size: .82rem; color: var(--fraca); margin-bottom: 2px; } .par-de-tempos dd { margin: 0; font-size: .95rem; } /* ---- o dia a dia dos chamados ------------------------------------------- Uma coluna por dia, com o que abriu e o que fechou. Barra e não linha: são contagens de dias separados, e linha ligando dois dias sugere um caminho contínuo que não existe entre terça e quarta. */ .dias { display: flex; align-items: flex-end; gap: 2px; height: 90px; margin-bottom: var(--e2); } .dias__um { flex: 1; min-width: 3px; height: 100%; display: flex; align-items: flex-end; gap: 1px; } .dias__um i { flex: 1; border-radius: 2px 2px 0 0; min-height: 1px; display: block; } .dias__abertos { background: var(--gente); } .dias__fechados { background: var(--feito); } .dias__marca { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: baseline; } .dias__marca--abertos { background: var(--gente); } .dias__marca--fechados { background: var(--feito); } /* ---- o que precisa de você ---------------------------------------------- Uma linha por pendência, com o caminho para resolver dentro dela. Aviso sem botão vira paisagem em duas semanas, e aí o aviso que importa some no meio dos que nunca importaram. */ .pendencia { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e3); margin-bottom: var(--e2); } .pendencia--grave { border-color: var(--gente); background: var(--gente-fundo); } .pendencia .ic { flex: none; color: var(--fraca); } .pendencia--grave .ic { color: var(--gente); } .pendencia__corpo { flex: 1; min-width: 14ch; display: flex; flex-direction: column; gap: 2px; } .pendencia .botao { flex: none; } /* NO CELULAR A PENDÊNCIA EMPILHA. Com o botão ao lado, sobravam 150px para o texto: "a DeixaAI não tem chave da Anthropic cadastrada" saía em quatro palavras por linha, seis linhas para uma frase, e a leitura virava uma coluna de jornal estreita. `min-width: 14ch` no corpo permitia esse aperto: 14 caracteres é menos de duas palavras. Empilhado, o texto usa a largura inteira e o botão fica onde o polegar já está — embaixo, e não espremido no canto. */ @media (max-width: 760px) { .pendencia { align-items: flex-start; gap: var(--e2); } .pendencia__corpo { flex: 1 1 100%; min-width: 0; } .pendencia .ic { margin-top: 2px; } .pendencia .botao { width: 100%; justify-content: center; margin-top: var(--e1); } } /* O divisor entre a sala de controle da DeixaAI e a nossa própria operação. É diferente de `trilho__grupo` de propósito: dois títulos iguais colados um no outro fazem o segundo parecer subtítulo do primeiro, e aí "Conversas" passa a parecer conversa de cliente em vez de conversa nossa. */ .trilho__divisor { margin: var(--e5) 11px var(--e2); padding-top: var(--e3); border-top: 1px solid rgba(255,255,255,.12); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); } /* ---- a linha de uma fatura ---------------------------------------------- Quem, quando, quanto, como está, e o que fazer. Nessa ordem porque é a ordem em que a pergunta chega: "a conta de quem?", e só depois "de quanto?". */ .fatura { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; padding: var(--e3); border-bottom: 1px solid var(--linha); } .fatura:last-child { border-bottom: none; } .fatura--atrasada { background: var(--gente-fundo); } .fatura__quem { flex: 1; min-width: 16ch; display: flex; flex-direction: column; gap: 2px; } .fatura__quando { flex: none; text-align: right; font-size: .78rem; line-height: 1.35; } /* O valor alinhado à direita e com largura fixa: é o que permite ler a coluna de cima para baixo sem o olho pular de lado a cada linha. */ .fatura__valor { flex: none; min-width: 9ch; text-align: right; font-weight: 600; } .fatura__estado { flex: none; min-width: 9ch; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .fatura__acoes { flex: none; display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; } @media (max-width: 720px) { .fatura__quando, .fatura__valor { text-align: left; } .fatura__acoes { width: 100%; } } /* A coluna que grita quando tem número. "Voltou" com zero é notícia boa e não precisa de cor; com um é o sinal de qualidade mais honesto da tela. */ .coluna--ruim { color: var(--gente); font-weight: 600; } /* ---- O que a Amanda sabe ------------------------------------------------ O manual dela aparece como ELA o lê: em seções, cada uma fechada. Ver a lista é ver o que ela consegue achar; abrir uma é ver o que ela leria. */ .secoes-do-manual { margin: var(--e2) 0 0; padding-left: 1.4em; } .secoes-do-manual li { margin-bottom: 6px; } .secoes-do-manual summary { cursor: pointer; } /* O trecho sai como está escrito no manual, com as quebras de linha dele: o texto que ela lê tem listas e tabelas, e reflow aqui mostraria uma coisa diferente da que chega nela. */ .trecho-do-manual { white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; font: inherit; font-size: .88rem; line-height: 1.55; color: var(--tinta); background: var(--chao); border-radius: 10px; padding: 10px 12px; max-height: 22em; overflow: auto; } /* ---- o que ela aprendeu -------------------------------------------------- Uma frase por linha, com a origem embaixo e o botão de tirar do ar à direita. A que saiu do ar continua na lista, apagada: sumir com ela faria a mesma lição voltar sozinha na semana seguinte sem ninguém entender por quê. */ .lista-licoes { list-style: none; margin: var(--e3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); } .licao { display: flex; align-items: flex-start; gap: var(--e3); border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e3); } .licao > div { flex: 1; min-width: 0; } .licao__texto { margin: 0 0 4px; font-weight: 600; } .licao form { margin: 0; flex: none; } .licao--fora { opacity: .55; } /* ---- a decisão do pagamento ---------------------------------------------- O bloco em que alguém escolhe a fatura e aprova a baixa. Ele nasceu dentro de `.recado`, e isso o desmontou na tela: `.recado` é `display:flex` de propósito, para pôr ícone e frase lado a lado, e com seis filhos dentro ele empilhou tudo EM COLUNAS — o texto numa, o campo de CPF noutra, as faturas na terceira, os botões na quarta. Ninguém viu erro nenhum, porque não havia: era um recado de uma linha sendo usado como formulário de quatro. Aqui a direção é a de leitura: o que vai acontecer, de quem são as faturas, quais são, e só então o botão que mexe em dinheiro. */ .decisao { border: 1px solid var(--linha); border-left: 3px solid var(--azul); border-radius: var(--canto); background: var(--chao); padding: var(--e3) var(--e4); margin: var(--e3) 0 0; } .decisao--atencao { border-left-color: var(--gente); } .decisao__aviso { margin: 0 0 var(--e3); } .decisao__aviso:last-child { margin-bottom: 0; } .decisao__titulo { display: block; font-size: .82rem; color: var(--fraca); margin: 0 0 var(--e2); } /* A busca por CPF: campo largo e botão colado nele, porque são uma pergunta só. O campo não encolhe abaixo de 22ch, que é o tamanho de um CNPJ escrito com pontuação. */ .decisao__busca { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--e3); } .decisao__busca input { flex: 1 1 22ch; min-width: 0; max-width: 28ch; } .decisao__lista { list-style: none; margin: 0 0 var(--e3); padding: 0; display: flex; flex-direction: column; gap: var(--e2); } /* A linha inteira é o alvo do clique, e não o quadradinho: numa tela de dinheiro, errar a marcação por dois pixels é errar qual fatura vai ser baixada. */ .decisao__fatura { display: flex; align-items: center; gap: var(--e3); padding: 10px var(--e3); border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); cursor: pointer; } /* A fatura que o sistema já sugeriu não se marca: ela não é escolha, é o que vai ser baixado. Mesma linha, sem o convite ao clique. */ .decisao__fatura--fixa { cursor: default; } .decisao__fatura--fixa:hover { border-color: var(--linha); } .decisao__fatura:hover { border-color: var(--linha-forte); } .decisao__fatura:has(input:checked) { border-color: var(--azul); background: var(--azul-agua); } .decisao__fatura:focus-within { outline: 2px solid var(--azul); outline-offset: 1px; } .decisao__fatura input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--azul); } .decisao__quem { flex: 1 1 12ch; min-width: 0; } .decisao__valor { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; } .decisao__prazo { flex: none; min-width: 16ch; text-align: right; font-size: .82rem; color: var(--fraca); } .decisao__prazo--vencida { color: var(--gente); font-weight: 600; } /* A linha dos botões fica separada por um traço: o que está acima se lê, o que está abaixo se executa. Aprovar à esquerda, recusar à direita, longe um do outro pela mesma razão que a tecla de desligar não fica ao lado do enter. */ .decisao__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; border-top: 1px solid var(--linha); padding-top: var(--e3); } .decisao__acoes form { margin: 0; } .decisao__recusa { display: flex; gap: var(--e2); margin-left: auto; flex: 0 1 300px; min-width: 200px; } .decisao__recusa input { flex: 1; min-width: 0; } @media (max-width: 620px) { .decisao { padding: var(--e3); } /* Duas linhas, e não quatro: a caixa de marcar com o nome da fatura em cima, o dinheiro e o prazo embaixo. Cada pedaço numa linha própria transformava uma fatura em meia tela de rolagem, e três faturas em tela e meia. */ .decisao__fatura { flex-wrap: wrap; row-gap: 2px; } .decisao__quem { flex: 1 1 60%; } .decisao__valor { margin-left: calc(18px + var(--e3)); } .decisao__prazo { text-align: right; min-width: 0; margin-left: auto; } /* O botão que mexe em dinheiro ocupa a largura toda, e o de recusar vem abaixo: lado a lado, os dois viram alvos de 40% de tela cada, e o polegar erra qual apertou. */ .decisao__acoes > .botao { width: 100%; justify-content: center; } .decisao__recusa { margin-left: 0; flex-basis: 100%; } } /* ---- o andamento do chamado --------------------------------------------- Tudo que aconteceu, na ordem. Um fio à esquerda e um ponto por passo: é a forma que faz "isto é uma sequência" ser entendida sem legenda. As duas colunas do registro aparecem juntas aqui, e só aqui: o que foi dito ao cliente com o peso do texto normal, a nota da casa embaixo, apagada. Na página pública sai apenas a primeira, e é por isso que elas são campos separados no banco, e não um texto só. */ .andamento { list-style: none; margin: var(--e3) 0 0; padding: 0; } .andamento__passo { position: relative; padding: 0 0 var(--e3) var(--e4); border-left: 2px solid var(--linha); display: flex; flex-direction: column; gap: 2px; } /* O último não continua o fio: linha que segue depois do fim sugere um passo que ainda vem, e o chamado fechado não tem próximo. */ .andamento__passo:last-child { padding-bottom: 0; border-left-color: transparent; } .andamento__passo::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--linha-forte); } .andamento__passo:last-child::before { background: var(--azul); } .andamento__fala { font-weight: 500; } .andamento__nota { white-space: pre-wrap; } .andamento__quem::before { content: "por "; } /* ---- o convite para instalar o aplicativo ------------------------------- Aparece uma vez, embaixo, e sai do caminho ao primeiro toque. Embaixo e não em cima porque é onde o polegar já está, e porque o topo é onde mora a marca e o nome da empresa: convite cobrindo a identidade da tela lê-se como propaganda de terceiro. */ .convite { /* ACIMA DA BARRA DE BAIXO, e não em cima dela. No celular os destinos do dia a dia moram numa barra fixa de 56px no rodapé; um convite colado no fundo da tela cobre justamente os botões que a pessoa ia usar, e o primeiro reflexo dela vira fechar o convite para recuperar a navegação. */ position: fixed; z-index: 80; left: var(--e3); right: var(--e3); bottom: calc(var(--barra-do-bolso, 0px) + var(--e2) + env(safe-area-inset-bottom)); display: flex; gap: var(--e3); align-items: flex-start; background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-left: 3px solid var(--azul); border-radius: var(--canto); padding: var(--e3) var(--e4) var(--e3) var(--e3); box-shadow: 0 10px 34px rgba(2, 8, 23, .22); animation: convite-entra .24s ease both; } @keyframes convite-entra { from { transform: translateY(14px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .convite { animation: none; } } .convite__icone { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--azul-agua); color: var(--azul); } .convite__icone .ic { width: 19px; height: 19px; } .convite__miolo { flex: 1; min-width: 0; } .convite__titulo { display: block; margin-bottom: 2px; } .convite__texto { margin: 0 0 var(--e3); font-size: .88rem; color: var(--fraca); line-height: 1.5; } /* O ícone de compartilhar DENTRO da frase: quem procura no iPhone procura o desenho, e não a palavra. */ .ic--inline { width: 15px; height: 15px; vertical-align: -2px; } .convite__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; } .convite__fechar { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: var(--fraca); cursor: pointer; padding: 6px; border-radius: 7px; line-height: 0; } .convite__fechar:hover { background: var(--chao); color: var(--tinta); } .convite__fechar .ic { width: 15px; height: 15px; } /* No computador ele é um cartão no canto, e não uma faixa de ponta a ponta: numa tela de 1440 a faixa inteira grita, e o que ela pede é pequeno. */ @media (min-width: 761px) { .convite { left: auto; right: var(--e4); bottom: var(--e4); width: 380px; } } /* Na conversa em tela cheia a barra de baixo some, e o convite desce junto: ele se mede pela barra, e não por um número escrito duas vezes. */ @media (max-width: 760px) { /* O convite mora FORA de `.tela`, então quem se pergunta pela conversa é a tela inteira: `.obra ~ .convite` não casa, porque eles não são irmãos. */ .tela:has(.mesa) ~ .convite { bottom: calc(var(--e3) + env(safe-area-inset-bottom)); } } /* O nome de quem está logado é link para a própria conta: é ali que todo mundo procura, e era só um texto. */ .trilho__eu { display: block; color: inherit; text-decoration: none; margin-bottom: 2px; } .trilho__eu:hover strong { text-decoration: underline; } .trilho__eu span { display: block; } /* ---- os avisos e os aparelhos, na tela de conta ------------------------- Uma linha por assunto, com a explicação embaixo do nome: "chamado novo" não diz sozinho se é todo chamado ou só o meu, e chave de aviso que a pessoa não entende é chave que ela deixa como veio. */ .avisos { list-style: none; margin: var(--e2) 0 var(--e3); padding: 0; display: flex; flex-direction: column; gap: var(--e2); } .aviso { display: flex; gap: var(--e3); align-items: flex-start; cursor: pointer; padding: 11px var(--e3); border: 1px solid var(--linha); border-radius: 9px; background: var(--papel); } .aviso:hover { border-color: var(--linha-forte); } .aviso:has(input:checked) { border-color: var(--azul); background: var(--azul-agua); } .aviso:focus-within { outline: 2px solid var(--azul); outline-offset: 1px; } .aviso input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); } /* Em Minha conta, desde 23/09/2026, a lista só mostra o que a empresa escolheu: não é mais para clicar, então não pode parecer que é. */ .aviso--so-ler { cursor: default; } .aviso--so-ler:hover { border-color: var(--linha); } .aviso--so-ler > .ic { flex: none; margin-top: 2px; color: var(--feito); } .aviso--desligado > .ic { color: var(--fraca); } .aviso > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .aparelhos { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); } .aparelho { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; padding: 10px var(--e3); border: 1px solid var(--linha); border-radius: 9px; } .aparelho__nome { display: flex; align-items: center; gap: 7px; font-weight: 500; flex: 1; min-width: 12ch; } .aparelho__nome .ic { width: 17px; height: 17px; color: var(--fraca); } .aparelho form { margin: 0; } /* O estado do sino é escrito pelo script, porque quem decide se este aparelho pode tocar é o sistema operacional, e a resposta muda sem o servidor saber. */ .sino { border: 1px solid var(--linha); border-radius: var(--canto); padding: var(--e3); background: var(--chao); } .sino__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); } .sino__estado strong { display: block; margin-bottom: 2px; } /* ========================================================================== CELULAR: o que vale em toda tela abaixo de 720px -------------------------------------------------------------------------- Juntado em 22/09/2026, quando o Daniel abriu o painel instalado no celular e disse "isso tá horrível". A conferência que pega estes defeitos antes de publicar é `scripts/conferir_no_celular.js`. ========================================================================== */ /* Texto que veio de fora (resposta da assistente, Pix, link, e-mail) quebra onde precisar, e nunca empurra a página. */ .painel p, .painel li, .painel dd, .recado { overflow-wrap: anywhere; } td { overflow-wrap: break-word; } @media (max-width: 720px) { /* O quadradinho do ícone repete o que o menu já diz, e custa uma linha inteira no alto de toda tela. */ .cabeca__marca { display: none; } .cabeca { margin-bottom: var(--e3); } .cabeca h1 { font-size: 1.3rem; } .painel--pad { padding: var(--e3); } /* Tabela de lista vira cartão: uma linha da tabela é um cartão, e cada coluna vira um rótulo pequeno em cima do valor. Tabela de seis colunas num celular é uma tabela de que se vê a primeira e meia. */ .tabela-cartao thead { display: none; } .tabela-cartao, .tabela-cartao tbody, .tabela-cartao tr, .tabela-cartao td { display: block; width: auto; } .tabela-cartao tr { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linha); } .tabela-cartao tr:last-child { border-bottom: 0; } .tabela-cartao td { border: 0; padding: 4px 0; text-align: left; white-space: normal; } /* rótulo e valor na mesma linha: um em cima do outro, cada contato virava um cartão de meia tela */ .tabela-cartao td[data-rotulo] { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: center; column-gap: var(--e2); } .tabela-cartao td[data-rotulo]::before { content: attr(data-rotulo); font-size: .78rem; color: var(--fraca); } .tabela-cartao td:empty { display: none; } .tabela-cartao input, .tabela-cartao select { width: 100%; min-width: 0 !important; } /* A faixa do chamado dentro da conversa: o resumo desce para a linha de baixo em vez de ser cortado na borda, e o "Fechar" ganha a largura toda. */ .faixa-chamado summary { flex-wrap: wrap; row-gap: 2px; } .faixa-chamado__meta { margin-left: 0; flex-basis: 100%; order: 5; } .faixa-chamado__acoes form { min-width: 0 !important; flex-basis: 100% !important; } .faixa-chamado > p { margin: 0 var(--e3) var(--e2); } /* valor em dinheiro não quebra: "R$ 3.049,20" em três linhas não se lê */ .contra__linha b, .conta-aberta b { white-space: nowrap; } .placar { padding: var(--e3); gap: var(--e2) var(--e3); } .placar__valor { font-size: 2.6rem; } } /* ============================================================================ 23/09/2026: a ficha do cliente, a busca rápida e o ranking. ========================================================================= */ /* Blocos empilhados numa coluna, com o mesmo respiro entre todos. */ .pilha { display: grid; gap: var(--e3); align-content: start; min-width: 0; } /* O RANKING: "do que ele mais pede", "quem mais chama o suporte". Nome e número na mesma linha, a barra embaixo, proporcional ao primeiro da lista. A barra é proporcional ao MAIOR, e não ao total: com dez assuntos, a barra do total deixava todas finas demais para comparar. */ .ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .ranking li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: baseline; } .ranking .barra { grid-column: 1 / -1; } .ranking__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .ranking__nome a { color: inherit; } .ranking__conta { font-weight: 600; font-variant-numeric: tabular-nums; } .ranking__conta .etiqueta { margin-left: 6px; font-weight: 500; } .ranking__pe { grid-column: 1 / -1; margin-top: -2px; } .ranking__titulo { font-size: .95rem; margin: var(--e4) 0 var(--e3); } /* A HISTÓRIA: uma linha por acontecimento, a data na margem esquerda. */ .historia { list-style: none; margin: var(--e3) 0 0; padding: 0; } .historia li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--e2); padding: var(--e2) 0; border-top: 1px solid var(--linha); } .historia li:first-child { border-top: 0; padding-top: 0; } .historia__quando { color: var(--fraca); font-size: .8rem; padding-top: 3px; } .historia__texto { margin: 6px 0 2px; } .historia .etiqueta { margin-right: 4px; } .historia p.miudo { margin: 0; } @media (max-width: 560px) { .historia li { grid-template-columns: 1fr; gap: 2px; } } .dados-cliente { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0 0 var(--e3); font-size: .9rem; } .dados-cliente dt { color: var(--fraca); } .dados-cliente dd { margin: 0; overflow-wrap: anywhere; } .bloco__titulo .conta { margin-left: auto; color: var(--fraca); font-size: .85rem; font-weight: 500; } /* A BUSCA RÁPIDA. Janela no alto da tela, como nos programas que já ensinaram o gesto (⌘K): aparece onde o olho está, e não no meio, onde cobriria o que a pessoa estava lendo antes de procurar. */ .busca { width: min(640px, calc(100vw - 2 * var(--e3))); max-height: min(70vh, 620px); margin: 12vh auto auto; padding: 0; border: 1px solid var(--linha-forte); border-radius: 16px; background: var(--papel); color: var(--tinta); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); overflow: hidden; } .busca[open] { display: flex; flex-direction: column; } .busca::backdrop { background: rgba(8, 12, 24, .5); backdrop-filter: blur(2px); } .busca__topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linha); } .busca__topo .ic { color: var(--fraca); flex: none; } .busca__topo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.02rem; color: var(--tinta); padding: 4px 0; } .busca__topo input::-webkit-search-cancel-button { display: none; } .busca__lista { overflow-y: auto; padding: 6px; flex: 1; min-height: 0; } .busca__grupo { margin: 10px 10px 4px; font-size: .74rem; font-weight: 600; color: var(--fraca); letter-spacing: .02em; } .busca__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--tinta); text-decoration: none; } .busca__item:hover, .busca__item[aria-selected="true"] { background: var(--azul-agua); } .busca__icone { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--chao); color: var(--fraca); } .busca__icone--numero { width: auto; min-width: 44px; padding: 0 6px; font-size: .72rem; font-weight: 600; } .busca__texto { min-width: 0; flex: 1; display: flex; flex-direction: column; } .busca__texto strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .busca__texto small { color: var(--fraca); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .busca__vazio { margin: 0; padding: var(--e4) var(--e3); color: var(--fraca); text-align: center; font-size: .9rem; } .busca__pe { margin: 0; padding: 9px 16px; border-top: 1px solid var(--linha); } .busca kbd, .trilho__busca kbd { font: inherit; font-size: .72rem; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--linha-forte); background: var(--chao); color: var(--fraca); } .busca__pe kbd { margin-right: 2px; } @media (max-width: 700px) { .busca { margin-top: var(--e3); max-height: 80dvh; } .busca__pe { display: none; } } /* O botão de busca no menu lateral: quem não conhece o atalho acha aqui, e o atalho vem escrito nele, que é como se ensina um atalho sem manual. */ .trilho__busca { display: flex; align-items: center; gap: 10px; width: 100%; margin: var(--e3) 0 0; padding: 8px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.72); font: inherit; font-size: .9rem; cursor: pointer; text-align: left; } .trilho__busca:hover { background: rgba(255,255,255,.1); color: #fff; } .trilho__busca span { flex: 1; } .trilho__busca kbd { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.6); } .tela--fechada .trilho__busca { width: 44px; justify-content: center; padding: 10px 0; margin-inline: auto; } .tela--fechada .trilho__busca span, .tela--fechada .trilho__busca kbd { display: none; } /* O título que separa um bloco inteiro da Supervisão, acima de dois painéis. */ .secao-da-supervisao { margin: var(--e5) 0 var(--e3); } .par--abaixo { margin-top: var(--e3); } /* ---- aviso na tela: o pop-up que acompanha o som ------------------------- */ /* Pedido do Daniel em 23/09/2026 (pulso.py). Canto de baixo, à direita, acima da barra do celular, como o convite de instalar: aviso que cobre a navegação vira aviso que a pessoa fecha sem ler. A cor é a do assunto, a mesma da fila: vermelho é gente esperando, amarelo é caso na mão de alguém, verde é dinheiro, azul é conversa. */ .flutuantes { position: fixed; z-index: 85; right: var(--e4); bottom: calc(var(--barra-do-bolso, 0px) + var(--e3) + env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 2 * var(--e3))); display: flex; flex-direction: column-reverse; gap: var(--e2); pointer-events: none; } .flutuantes > * { pointer-events: auto; } .flutuantes--vitrine { position: static; width: auto; max-width: 420px; flex-direction: column; pointer-events: auto; } .flutuante { --cor: var(--azul); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "marca corpo fechar" "marca abrir abrir"; gap: 4px var(--e3); align-items: start; background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-left: 4px solid var(--cor); border-radius: var(--canto); padding: var(--e3); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); animation: flutuante-chega .22s ease-out; } .flutuante--mensagem { --cor: var(--azul); } .flutuante--chamado { --cor: var(--pessoa); } .flutuante--aprovacao { --cor: var(--feito); } .flutuante--prazo { --cor: var(--gente); } .flutuante--emergencia { --cor: var(--gente); background: var(--gente-fundo); border-width: 1px 1px 1px 6px; border-color: var(--gente); /* sempre no alto da pilha, chegue quando chegar: é o primeiro aviso que o olho tem de encontrar (a pilha é column-reverse, então a maior ordem fica em cima) */ order: 10; } .flutuante__marca { grid-area: marca; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); } .flutuante--emergencia .flutuante__marca { background: var(--gente); color: #fff; } .flutuante__corpo { grid-area: corpo; min-width: 0; } .flutuante__titulo { display: block; font-size: .9rem; line-height: 1.3; } .flutuante--emergencia .flutuante__titulo, .flutuante--prazo .flutuante__titulo { color: var(--gente); } .flutuante__texto { margin: 2px 0 0; font-size: .82rem; color: var(--fraca); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .flutuante--emergencia .flutuante__texto { color: var(--tinta); } .flutuante__fixo { margin: 4px 0 0; font-size: .74rem; color: var(--gente); font-weight: 600; } .flutuante__abrir { grid-area: abrir; justify-self: start; font-size: .82rem; font-weight: 600; color: var(--azul); text-decoration: none; padding: 2px 0; } .flutuante__abrir:hover { text-decoration: underline; } .flutuante__fechar { grid-area: fechar; border: 0; background: none; color: var(--fraca); cursor: pointer; padding: 2px; border-radius: 6px; line-height: 0; } .flutuante__fechar:hover { color: var(--tinta); background: var(--chao); } .flutuante__fechar:focus-visible, .flutuante__abrir:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .flutuante--sai { animation: flutuante-sai .18s ease-in forwards; } @keyframes flutuante-chega { from { opacity: 0; transform: translateY(10px); } } @keyframes flutuante-sai { to { opacity: 0; transform: translateX(24px); } } @media (max-width: 760px) { .flutuantes { right: var(--e3); left: var(--e3); width: auto; } /* no celular, compacto: título e "Abrir". A tela é pequena demais para três avisos com texto inteiro, e o texto está a um toque, na conversa. */ .flutuante { padding: var(--e2) var(--e3); } .flutuante__texto, .flutuante__fixo { display: none; } } @media (prefers-reduced-motion: reduce) { .flutuante, .flutuante--sai { animation: none; } } .flutuante--som { --cor: var(--pessoa); } .flutuante--versao { --cor: var(--azul); } /* ---- a nota do dia, na faixa do alto -------------------------------------- */ /* Pedido do Daniel em 23/09/2026 (pulso.nota_do_dia). Uma linha só, fina, em toda tela de quem atende: faixa gorda no alto de toda tela vira paisagem, e paisagem ninguém lê. A cor é a da situação, e o número vem primeiro. */ .nota-do-dia { --cor: var(--feito); display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--e2); margin: 0 0 var(--e4); padding: 8px var(--e3); border: 1px solid color-mix(in srgb, var(--cor) 35%, var(--linha)); border-left: 4px solid var(--cor); border-radius: var(--canto); background: color-mix(in srgb, var(--cor) 8%, var(--papel)); font-size: .86rem; } .nota-do-dia .ic { align-self: center; flex: none; color: var(--cor); } .nota-do-dia__titulo { color: var(--tinta); } .nota-do-dia__texto { color: var(--fraca); } .nota-do-dia--perto { --cor: var(--pessoa); } .nota-do-dia--ruim { --cor: var(--gente); } .nota-do-dia--ruim .nota-do-dia__titulo { color: var(--gente); } .nota-do-dia--cedo, .nota-do-dia--neutra { --cor: var(--fraca); } /* ---- as janelas do painel (liberar o som, nota caiu, painel parado) ------- */ .janela--pulso .janela__corpo p:first-child { margin-top: 0; } .janela--ruim { border-top: 4px solid var(--gente); } /* No molde a janela aparece aberta no lugar, e não por cima da tela. */ .janela--vitrine { position: static; display: flex; flex-direction: column; margin: 0 0 var(--e3); max-height: none; height: auto; } @media (max-width: 560px) { .janela--vitrine { width: auto; height: auto; border: 1px solid var(--linha); border-radius: 16px; } }