:root { --fundo: #f4f5f7; --superficie: #ffffff; --borda: #dfe1e6; --texto: #172b4d; --texto-fraco: #5e6c84; --acento: #0b6bcb; --urgente: #d1453b; --alta: #e07b39; --media: #d9a406; --baixa: #5aa35a; /* as duas séries do gráfico por semana: o azul do painel e um laranja que, junto dele, se distingue até para quem tem daltonismo (conferido com o validador da skill dataviz: 25 para protanopia e deuteranopia, 36 para visão normal) */ --serie-entradas: var(--acento); --serie-concluidas: #eb6834; --serie-concluidas-listra: #f9c4ad; --atrasada: #d1453b; --alerta-fundo: #fdecea; --alerta-texto: #a8231a; --raio: 8px; } * { box-sizing: border-box; } [x-cloak] { display: none !important; } body { margin: 0; padding: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; } h1 { font-size: 1.1rem; margin: 0; } .aviso { color: var(--texto-fraco); padding: 24px; } /* aviso de erro: fica colado no topo da tela, para a pessoa ver mesmo com a página rolada até o card */ .aviso.faixa-erro { position: sticky; top: 8px; z-index: 10; margin: 0 0 12px; padding: 10px 14px; background: var(--alerta-fundo); color: var(--alerta-texto); border: 1px solid var(--alerta-texto); border-radius: var(--raio); font-size: 0.9rem; } .erro { color: var(--urgente); } /* login */ .login { max-width: 320px; margin: 12vh auto; padding: 24px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); } .login form { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .login label { font-size: 0.85rem; color: var(--texto-fraco); } input, select, textarea { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; background: var(--superficie); color: inherit; width: 100%; } button { padding: 8px 12px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: inherit; font: inherit; cursor: pointer; } button[type='submit'] { background: var(--acento); border-color: var(--acento); color: #fff; } button:hover { filter: brightness(0.97); } /* cabeçalho */ .cabecalho { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--superficie); border-bottom: 1px solid var(--borda); } .cabecalho .grupo { margin: 2px 0 0; font-size: 0.85rem; color: var(--texto-fraco); } .cabecalho .acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* o selo do WhatsApp tem uma cor por situação: verde, vermelho (a Evolution disse que desconectou) e âmbar (não dá nem para saber, porque o painel não fala com a Evolution) */ .conexao { font-size: 0.8rem; padding: 3px 8px; border-radius: 999px; } .conexao.conectado { background: #e6f4ea; color: #1e7b34; } .conexao.desconectado { background: var(--alerta-fundo); color: var(--alerta-texto); font-weight: 600; } .conexao.sem-contato { background: #fff4e5; color: #8a5300; font-weight: 600; } .abas { display: flex; gap: 4px; } .abas button.ativa { background: var(--acento); border-color: var(--acento); color: #fff; } main { padding: 16px; } /* a tarja do WhatsApp: só aparece quando há o que fazer, e as cores seguem as do selo do cabeçalho */ .tarja-whatsapp { margin: 0 0 14px; padding: 10px 12px; border: 1px solid; border-radius: var(--raio); font-size: 0.9rem; } .tarja-whatsapp strong { display: block; margin-bottom: 2px; } .tarja-whatsapp.desconectado { background: var(--alerta-fundo); color: var(--alerta-texto); border-color: #f3c9c6; } .tarja-whatsapp.sem-contato { background: #fff4e5; color: #8a5300; border-color: #f0d5a8; } /* números do topo */ .numeros { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin: 0 0 16px; padding: 0; } .numeros li { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 14px; font-size: 0.85rem; color: var(--texto-fraco); } .numeros strong { display: block; font-size: 1.4rem; color: var(--texto); } .numeros li.alerta strong { color: var(--atrasada); } /* busca e filtros do quadro: o campo de busca cresce para ocupar o que sobra, e os seletores têm largura própria, para a barra não mudar de forma quando as opções do catálogo chegam */ .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .filtros input[type='search'] { flex: 1 1 260px; -webkit-appearance: none; appearance: none; } .filtros select { flex: 0 1 200px; } .filtros select:disabled { opacity: 0.55; } /* "Equipamento clínico e laboratorial", o nome de categoria mais comprido, só aparece inteiro no seletor fechado com cerca de 290 px. No telefone os seletores ocupam a linha toda, e isto não se aplica. */ @media (min-width: 701px) { .filtros .por-categoria { flex-basis: 290px; } } /* colunas */ .colunas { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; } .coluna { background: #ebecf0; border-radius: var(--raio); padding: 8px; } .coluna h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-fraco); margin: 4px 6px 10px; } /* "últimos 14 dias", na coluna Concluída: em minúsculas e sem negrito, para ler como parte do nome. Sem quebra no meio: quando não cabe ao lado do nome, desce inteiro para a linha de baixo. */ .coluna h2 .titulo-coluna { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; } .coluna h2 .periodo { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.75rem; white-space: nowrap; } .coluna .conta { background: var(--superficie); border-radius: 999px; padding: 1px 8px; font-size: 0.75rem; } .cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; } /* os botões que recolhem a coluna e a barra de filtros só existem no telefone (bloco @media (max-width: 700px), mais abaixo); no computador as colunas ficam sempre abertas, a barra sempre à vista, e o título é o texto de sempre */ .recolher, .alternar-filtros { display: none; } /* a área de soltar da coluna recolhida só aparece no telefone, durante um arrasto (bloco @media (max-width: 700px), mais abaixo) */ .area-soltar { display: none; } /* card */ .card { background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: 6px; padding: 10px; cursor: grab; overflow-wrap: anywhere; } .card.prioridade-urgente { border-left-color: var(--urgente); } .card.prioridade-alta { border-left-color: var(--alta); } .card.prioridade-media { border-left-color: var(--media); } .card.prioridade-baixa { border-left-color: var(--baixa); } .card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--texto-fraco); } .card .prazo { text-align: right; } .card .prazo.atrasada { background: var(--alerta-fundo); color: var(--alerta-texto); font-weight: 600; padding: 0 8px; border-radius: 999px; } .card .titulo { margin: 6px 0; font-weight: 600; } .card .meta, .card .rodape { margin: 4px 0 0; font-size: 0.85rem; color: var(--texto-fraco); display: flex; gap: 2px 8px; flex-wrap: wrap; } .card .prioridade { white-space: nowrap; font-weight: 600; color: var(--texto); } .card .rodape { justify-content: space-between; } .card .selos { margin: 8px 0 0; display: flex; gap: 6px; flex-wrap: wrap; } .selo { font-size: 0.78rem; padding: 2px 6px; border-radius: 4px; background: #f1f2f4; color: var(--texto-fraco); } .selo.revisar { background: #fff4e5; color: #8a5300; } .selo.aviso-pendente { background: var(--alerta-fundo); color: var(--alerta-texto); } /* arrastar: o lugar de onde o card saiu fica apagado, e o card que foi pego "levanta" */ .card.arrastando { opacity: 0.4; } .card.sortable-chosen { box-shadow: 0 4px 12px rgba(9, 30, 66, 0.25); } /* diálogo do motivo (ao soltar um card em Aguardando) */ .dialogo { border: 1px solid var(--borda); border-radius: var(--raio); padding: 0; width: min(420px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto); } .dialogo::backdrop { background: rgba(9, 30, 66, 0.4); } .dialogo form { padding: 16px; display: flex; flex-direction: column; gap: 8px; } .dialogo h2 { margin: 0; font-size: 1rem; } .dialogo .ajuda { margin: 0; font-size: 0.82rem; color: var(--texto-fraco); } /* 16px: abaixo disso o iPhone dá zoom na página ao tocar no campo */ .dialogo input { font-size: 16px; } .dialogo menu { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0 0; padding: 0; } .dialogo menu button { min-height: 40px; padding: 8px 16px; } /* detalhe da demanda: o cabeçalho com o × fica colado no topo, para fechar estar sempre ao alcance mesmo com o diálogo rolado até o histórico */ .dialogo.detalhe { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; } .dialogo.detalhe header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 6px 16px; background: var(--superficie); border-bottom: 1px solid var(--borda); } .dialogo.detalhe h2 { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; } .dialogo.detalhe .situacao { font-size: 0.78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: #eef1f5; color: var(--texto-fraco); white-space: nowrap; } .dialogo.detalhe .fechar { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--texto-fraco); } .dialogo.detalhe .corpo { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 20px; } .dialogo.detalhe .corpo > .erro { margin: 0; padding: 8px 12px; border-radius: 6px; background: var(--alerta-fundo); color: var(--alerta-texto); font-size: 0.9rem; } /* avisos no alto do detalhe: classificação para revisar, opções que não carregaram e aviso que não saiu */ .faixa-detalhe { margin: 0; padding: 10px 12px; border-radius: 6px; font-size: 0.88rem; } .faixa-detalhe p { margin: 0; } .faixa-detalhe.atencao { background: #fff4e5; color: #8a5300; } .faixa-detalhe.aviso-pendente { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; background: var(--alerta-fundo); color: var(--alerta-texto); } /* a situação, com o motivo que se pede ali mesmo ao escolher Aguardando ou Cancelada */ .mudar-situacao { display: flex; flex-direction: column; gap: 6px; } .mudar-situacao > label { font-size: 0.82rem; color: var(--texto-fraco); } .linha-situacao { display: flex; gap: 8px; } .linha-situacao select { flex: 1; min-width: 0; } .mudar-situacao .ajuda { margin: 0; font-size: 0.82rem; color: var(--texto-fraco); overflow-wrap: anywhere; } .pedido-motivo { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; } .pedido-motivo label { font-size: 0.9rem; font-weight: 600; } .pedido-motivo .botoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; } /* o botão que confirma o cancelamento é cheio, para não se confundir com o "Cancelar demanda" de contorno */ .dialogo.detalhe .pedido-motivo .perigo { background: var(--alerta-texto); border-color: var(--alerta-texto); color: #fff; } /* os campos de edição */ .dialogo.detalhe form { display: flex; flex-direction: column; gap: 10px; padding: 0; } .dialogo.detalhe label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--texto-fraco); } .dialogo.detalhe .linha { display: flex; gap: 10px; } .dialogo.detalhe .linha label { flex: 1; min-width: 0; } .dialogo.detalhe .dica { font-size: 0.78rem; line-height: 1.3; } .dialogo.detalhe textarea { resize: vertical; } /* 16px: abaixo disso o iPhone dá zoom na página ao tocar no campo. 44px: alvo de toque */ .dialogo.detalhe input, .dialogo.detalhe select, .dialogo.detalhe textarea { font-size: 16px; } .dialogo.detalhe input, .dialogo.detalhe select { min-height: 44px; } /* o rótulo é cinza, mas o que a pessoa escreve nos campos não */ .dialogo.detalhe label input, .dialogo.detalhe label select, .dialogo.detalhe label textarea { color: var(--texto); } .dialogo.detalhe button { min-height: 44px; } .dialogo.detalhe select:disabled, .dialogo.detalhe button:disabled { opacity: 0.55; cursor: default; } .dialogo.detalhe .perigo { color: var(--alerta-texto); border-color: #f3c9c6; } /* de onde a demanda veio e o que aconteceu com ela */ .origem, .historico { border-top: 1px solid var(--borda); padding-top: 12px; } .origem h3, .historico h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-fraco); margin: 0 0 6px; } .origem .quem { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 0.82rem; color: var(--texto-fraco); margin: 0 0 6px; } .origem .legenda { margin: 8px 0 4px; font-size: 0.78rem; color: var(--texto-fraco); } blockquote { margin: 0 0 6px; padding: 8px 10px; background: var(--fundo); border-radius: 6px; border-left: 3px solid var(--borda); white-space: pre-wrap; overflow-wrap: anywhere; } blockquote.citado { font-size: 0.86rem; color: var(--texto-fraco); } .historico ol { margin: 0; padding-left: 18px; font-size: 0.86rem; } .historico li { margin-bottom: 4px; overflow-wrap: anywhere; } .historico .quando { color: var(--texto-fraco); margin-right: 6px; white-space: nowrap; } /* o card abre o detalhe: quem navega pelo teclado precisa ver onde está */ .card:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* a aba Descartadas: o número ao lado do nome fica neutro quando não há nada e chama a atenção quando há */ .abas .conta-aba { display: inline-block; min-width: 1.5em; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #eef1f5; color: var(--texto-fraco); font-size: 0.75rem; line-height: 1.5; text-align: center; } .abas .conta-aba.com-itens { background: #fff4e5; color: #8a5300; font-weight: 600; } .abas button.ativa .conta-aba { background: var(--superficie); color: var(--acento); } /* as mensagens que a IA descartou: uma coluna só, estreita o bastante para ler como uma conversa */ .descartadas { max-width: 760px; } .descartadas h2 { margin: 0 0 6px; font-size: 1rem; } .descartadas .explicacao { margin: 0 0 14px; font-size: 0.9rem; color: var(--texto-fraco); } .descartadas .aviso { padding: 12px 0; } .faixa-descartadas { margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; font-size: 0.9rem; } .faixa-descartadas.erro { background: var(--alerta-fundo); color: var(--alerta-texto); } .faixa-descartadas.ok { background: #e6f4ea; color: #1e7b34; } .faixa-descartadas.atencao { background: #fff4e5; color: #8a5300; } .lista-descartadas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .descartada { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; overflow-wrap: anywhere; } .descartada header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-bottom: 8px; font-size: 0.85rem; color: var(--texto-fraco); } .descartada header .quem { font-size: 0.95rem; color: var(--texto); } .descartada .legenda { margin: 8px 0 4px; font-size: 0.78rem; color: var(--texto-fraco); } /* o motivo é da IA, e a caixa à parte diz isso: ninguém pode achar que foi uma pessoa que decidiu */ .descartada .motivo-ia { margin: 10px 0 12px; padding: 8px 10px; border-radius: 6px; background: #eef4fb; font-size: 0.88rem; } .virar-demanda { display: block; min-height: 44px; margin-left: auto; padding: 8px 18px; background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; } .virar-demanda:disabled { opacity: 0.6; cursor: default; } /* a aba Indicadores: números, gráficos de barra feitos só com CSS (sem biblioteca) e a lista das atrasadas. Tudo sob .indicadores, para nenhum nome daqui (.valor, .rotulo, .titulo...) tocar em outra parte do painel. */ .indicadores, .conteudo-indicadores { display: flex; flex-direction: column; gap: 16px; } .indicadores .aviso { margin: 0; padding: 12px 0; } .faixa-indicadores { margin: 0; padding: 10px 12px; border-radius: 6px; font-size: 0.9rem; background: #fff4e5; color: #8a5300; } /* os cinco números: os mesmos cartões do quadro, numa grade que reparte a largura sem quebrar o texto no meio */ .indicadores .cartoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; } .indicadores .cartoes li { padding: 10px 14px; } .indicadores .cartoes strong { line-height: 1.2; } .indicadores .cartoes .nome { display: block; margin-top: 2px; color: var(--texto); line-height: 1.25; } .indicadores .cartoes small { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.3; } /* sem número a mostrar ("sem dados"), o texto fica cinza: é uma ausência, e não um valor */ .indicadores .cartoes li.sem-valor strong { color: var(--texto-fraco); } /* os cartões dos gráficos, em três colunas: as semanas (duas colunas) e, à direita, as atrasadas, que descem ao lado dos outros; embaixo das semanas, a categoria (alta, por ter uma linha para cada uma) ao lado da prioridade e do tipo, um sobre o outro. Os cartões de uma área preenchem a área inteira; só as atrasadas têm a altura da lista. */ .indicadores .graficos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; grid-template-areas: 'semanas semanas atrasadas' 'categoria prioridade atrasadas' 'categoria tipo atrasadas'; } .grafico { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; min-width: 0; } .grafico-semanas { grid-area: semanas; } .grafico-atrasadas { grid-area: atrasadas; align-self: start; } .grafico-categoria { grid-area: categoria; } .grafico-prioridade { grid-area: prioridade; } .grafico-tipo { grid-area: tipo; } .grafico h2 { margin: 0 0 12px; font-size: 0.9rem; } .grafico h2 small { display: block; margin-top: 1px; font-size: 0.78rem; font-weight: 400; color: var(--texto-fraco); } .aviso-grafico { margin: 0; font-size: 0.9rem; color: var(--texto-fraco); } .nota-grafico { margin: 10px 0 0; font-size: 0.78rem; color: var(--texto-fraco); } /* barras horizontais: o nome, a barra e o número logo na ponta dela. A barra do maior valor ocupa tudo menos o espaço do número; a linha fina à esquerda é o chão de onde todas saem. */ .indicadores .barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .barra-linha { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 22px; } .barra-linha .rotulo { font-size: 0.85rem; line-height: 1.25; overflow-wrap: anywhere; } .barra-linha .trilha { display: flex; align-items: center; gap: 6px; min-height: 22px; border-left: 1px solid var(--borda); } .barra-linha .barra { flex: none; height: 12px; width: calc((100% - 2.4rem) * var(--p, 0) / 100); border-radius: 0 4px 4px 0; background: var(--acento); } .barra-linha .barra.prioridade-urgente { background: var(--urgente); } .barra-linha .barra.prioridade-alta { background: var(--alta); } .barra-linha .barra.prioridade-media { background: var(--media); } .barra-linha .barra.prioridade-baixa { background: var(--baixa); } .barra-linha .valor { font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* colunas por semana: duas por semana, a das entradas (lisa) e a das concluídas (listrada), na mesma escala. O número fica em cima de cada coluna, e a altura de cada uma já desconta o espaço dele. */ .legenda-grafico { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; font-size: 0.82rem; color: var(--texto-fraco); } .legenda-grafico .amostra { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 3px; vertical-align: -1px; } .amostra.entradas, .coluna-barra.entradas { background: var(--serie-entradas); } .amostra.concluidas, .coluna-barra.concluidas { background: repeating-linear-gradient(45deg, var(--serie-concluidas) 0 3px, var(--serie-concluidas-listra) 3px 5px); } .indicadores .semanas { display: flex; } .semana { flex: 1 1 0; min-width: 0; } .colunas-semana { display: flex; justify-content: center; gap: 2px; height: 170px; border-bottom: 1px solid var(--borda); } .coluna-de-barra { position: relative; flex: 1 1 0; max-width: 24px; } .coluna-barra { position: absolute; left: 0; right: 0; bottom: 0; min-height: 2px; border-radius: 4px 4px 0 0; height: calc((100% - 1.4rem) * var(--p, 0) / 100); } .coluna-de-barra .valor { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; bottom: calc((100% - 1.4rem) * var(--p, 0) / 100 + 4px); } .rotulo-semana { display: block; padding-top: 5px; font-size: 0.7rem; line-height: 1.15; text-align: center; color: var(--texto-fraco); font-variant-numeric: tabular-nums; } .semana.atual .rotulo-semana { color: var(--texto); font-weight: 600; } /* a lista das atrasadas: cada linha é um botão, para o teclado e o leitor de tela também abrirem a demanda */ .lista-atrasadas { list-style: none; margin: 0; padding: 0; } .lista-atrasadas li + li { border-top: 1px solid var(--borda); } .lista-atrasadas button { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; width: 100%; min-height: 44px; padding: 10px 6px; border: 0; border-radius: 6px; background: none; text-align: left; } .lista-atrasadas button:hover { background: var(--fundo); filter: none; } .lista-atrasadas button:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; } .lista-atrasadas .numero { color: var(--texto-fraco); font-variant-numeric: tabular-nums; } .lista-atrasadas .texto { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; } .lista-atrasadas .titulo { font-weight: 600; } .lista-atrasadas small { font-size: 0.78rem; color: var(--texto-fraco); } .lista-atrasadas .atraso { color: var(--alerta-texto); font-size: 0.85rem; text-align: right; white-space: nowrap; } .lista-atrasadas .atraso strong { font-weight: 600; } .lista-atrasadas .atraso small { display: block; color: var(--texto-fraco); } /* em tela de contraste forçado (Windows) o navegador troca as cores de fundo; as barras precisam manter as delas */ @media (forced-colors: active) { .indicadores .barra, .indicadores .coluna-barra, .indicadores .amostra { forced-color-adjust: none; } } @media (max-width: 980px) { .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .indicadores .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .indicadores .graficos { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; } .indicadores .graficos > .grafico { grid-area: auto; } } @media (max-width: 700px) { .cabecalho { flex-direction: column; align-items: flex-start; } main { padding: 12px 8px; } .colunas { grid-template-columns: 1fr; } /* o título de cada coluna vira um botão que recolhe e abre a coluna; recolhida, ela mostra só o nome e a quantidade (o quadro.js guarda o que a pessoa deixou). O botão é o título: o texto de sempre sai de cena, para o nome e a quantidade não aparecerem duas vezes. */ .colunas .coluna h2 { margin: 0 0 6px; } .colunas .coluna h2 > .titulo-coluna, .colunas .coluna h2 > .conta { display: none; } .recolher { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 8px 0 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; } .recolher:active { background: rgba(9, 30, 66, 0.08); } .recolher:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; } .recolher .titulo-coluna { flex: 1 1 auto; min-width: 0; } .recolher .conta { flex: none; } /* o sinal de aberta ou recolhida, nos dois botões, é uma seta feita com duas bordas de um quadrado girado (sem imagem nem fonte de ícones): para baixo com o que está recolhido (tocar abre) e para cima com o que está aberto (tocar recolhe). Segue o aria-expanded do botão. */ .seta { flex: none; width: 8px; height: 8px; margin: -3px 4px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } [aria-expanded='true'] > .seta { margin-top: 3px; transform: rotate(-135deg); } .coluna.recolhida h2 { margin-bottom: 0; } .coluna.recolhida .cards { display: none; } /* durante um arrasto, a coluna recolhida mostra uma área de soltar no lugar da barra (o quadro.js liga a marca "solta-aqui"): sem ela, um card largado na barra cairia na última lista que o dedo cruzou. É uma lista do Sortable de verdade, sempre vazia, que vale o status da coluna, e se comporta como as outras: está no fluxo da página, e o card que o Sortable põe dentro dela aparece (apagado, como nas outras listas) e ocupa o lugar dele. Assim, quando o card sai da lista de onde veio e entra na área, uma encolhe e a outra cresce o mesmo tanto, e as colunas de baixo não se mexem debaixo do dedo. (Uma área sobreposta à barra, fora do fluxo, não compensava a lista que encolheu: tudo abaixo subia a altura de um card, e a área seguinte fugia do dedo.) No início do arrasto a barra troca por uma área do mesmo tamanho, e não há faixa de título onde soltar cairia noutra lista. A coluna não abre: no fim do arrasto a área some e a barra volta. */ .coluna.solta-aqui > h2 { display: none; } .coluna.solta-aqui .area-soltar { display: block; min-height: 44px; border: 2px dashed var(--acento); border-radius: var(--raio); background: #e7f1fc; } .area-soltar::before { content: attr(data-rotulo); display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; color: #0a4d94; font-size: 0.92rem; font-weight: 600; text-align: center; } /* com o card em cima dela, a área muda de cor: a pessoa vê que vai soltar ali */ .coluna.solta-aqui .area-soltar:not(:empty) { border-style: solid; background: #cfe3fa; } /* a barra de busca e filtros também recolhe, atrás do botão Filtros. Com filtro ligado o botão muda de cor e diz quantos estão ativos (senão a pessoa esquece que filtrou e acha que sumiu card). Recolhida, a barra só é escondida: o que foi digitado e escolhido continua valendo. */ .alternar-filtros { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-bottom: 12px; padding: 8px 12px; font-size: 16px; text-align: left; } .alternar-filtros[aria-expanded='true'] { margin-bottom: 8px; } .alternar-filtros:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .alternar-filtros .seta { margin-left: auto; } .alternar-filtros.ativo { background: #fff4e5; border-color: #f0d5a8; color: #8a5300; font-weight: 600; } .resumo-filtros { padding: 1px 10px; border-radius: 999px; background: #8a5300; color: #fff; font-size: 0.85rem; font-weight: 600; } .filtros:not(.aberta) { display: none; } .numeros { gap: 8px; } .numeros li { flex: 1 1 0; min-width: 0; padding: 8px 10px; } /* a busca e cada seletor ocupam a linha toda: com o dedo, um campo por linha é o que não se erra */ .filtros input[type='search'], .filtros select { flex: 1 1 100%; } /* o detalhe é uma folha que ocupa a tela toda: no telefone cada pixel de leitura conta */ .dialogo.detalhe { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; } .dialogo.detalhe .linha { flex-direction: column; } /* o Salvar ocupa a largura toda: é o botão que o polegar procura no fim dos campos */ .dialogo.detalhe form menu button { flex: 1; } /* o "Virar demanda" também: é o que o polegar procura no fim de cada mensagem */ .virar-demanda { width: 100%; } /* o diálogo do motivo (ao soltar um card em Aguardando): o campo e os botões tinham 40 e 41 px, e o resto do painel usa os 44 px que o dedo acerta */ .dialogo input, .dialogo menu button { min-height: 44px; } /* com três abas não sobra lugar para o Sair ao lado delas: o selo do WhatsApp e o Sair dividem a primeira linha, e as abas ficam na de baixo, repartindo a largura, com os 44 px de altura que o polegar acerta (o Sair também: tinha 40) */ .cabecalho .acoes { width: 100%; } .cabecalho .acoes .sair { margin-left: auto; min-height: 44px; } .abas { order: 1; width: 100%; } .abas button { flex: 1 1 auto; min-height: 44px; } /* a aba Indicadores: cartões de dois em dois (o quinto, sozinho, na largura toda; o :nth-of-type porque o