/* ============================================================================================ * Plataforma NeuroPsi — folha de estilo única. * * Montada em 17/08/2026 na unificação dos dois sistemas internos (painel da equipe + Central de * Avisos). O arquivo tem três camadas, e a ordem importa: * * 1. BASE E SHELL (este bloco) sem escopo. Vale para a plataforma inteira: cor, tipografia, * cabeçalho de dois andares, faixas de estado, rodapé, login e * a tela de Início. É o que faz as duas metades parecerem um * sistema só. * 2. MÓDULO AVISOS tudo sob `body.m-avisos`. * 3. MÓDULO EQUIPE tudo sob `body.m-equipe`. * 4. RECONCILIAÇÃO no fim do arquivo: alinha os poucos tokens que os dois * sistemas definiam com valores diferentes. * * As camadas 2 e 3 são escopadas porque `.cartao`, `.ficha`, `.barra`, `.etiqueta` e `.filtros` * existem nas duas folhas com significados diferentes. Sem escopo, uma sobrescreveria a outra e a * quebra apareceria só na tela, não no build. Geradas por `escopar-css.py` — para mexer numa * regra de módulo, mexa na folha de origem e rode o script de novo. * * Identidade (21/08/2026): trocada pela paleta e tipografia do preview do site institucional * (../site-institucional/preview/, v5 aprovada pela Bruna) — terracota/vinho/marrom/camel sobre * fundo branco, Playfair Display nos títulos, Urbanist no corpo. Os nomes de token mudaram junto * (--marrom/--creme/--salvia da paleta antiga viraram --tinta/--branco/--bege, e o "marrom" antigo * — que era cor de TEXTO — virou "tinta"; "marrom" agora é a cor de SUPERFÍCIE escura do * institucional, #803800, usada no cabeçalho e no botão primário). É um rename, não um alias: * cada token com o MESMO nome tem que valer o MESMO em shell.css e nos dois módulos, ou a mesma * variável passa a significar duas cores diferentes dependendo da aba — exatamente o defeito que * a reconciliação do fim deste arquivo existe para evitar. `--salvia` (verde) fica de fora da * paleta de marca de propósito: nos dois módulos ele é sinal funcional (bom/ruim, enviado/falhou), * não decoração, e o institucional não precisa dessa distinção por não ser painel de decisão. * * Contraste: cada token de texto abaixo foi conferido contra WCAG AA (4,5:1 pra texto normal, 3:1 * pra texto grande/negrito e componente de interface) com a fórmula de luminância relativa — * mesmo padrão que a varredura Playwright já usava nesta folha. Onde a cor "óbvia" da paleta * reprovava (terracota em texto pequeno: 3,42:1; o terracota-claro do institucional sobre o * marrom do cabeçalho: só 2,47:1), o texto usa uma variante escurecida do MESMO matiz — o token de * marca continua disponível para borda, ícone e superfície grande, onde a exigência é outra. * ============================================================================================ */ @font-face { font-family: Playfair; src: url(/fonts/playfair-600.woff2) format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: Playfair; src: url(/fonts/playfair-700.woff2) format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: Playfair; src: url(/fonts/playfair-italic-600.woff2) format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: Urbanist; src: url(/fonts/urbanist-400.woff2) format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: Urbanist; src: url(/fonts/urbanist-500.woff2) format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: Urbanist; src: url(/fonts/urbanist-600.woff2) format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: Urbanist; src: url(/fonts/urbanist-700.woff2) format('woff2'); font-weight: 700; font-display: swap; } :root { --serif: Playfair, Georgia, "Times New Roman", serif; --sans: Urbanist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --branco: #FFFFFF; --bege: #F5E9D8; /* camel bem claro — camada de agrupamento sob cartão branco */ --bege-2: #EFDFC6; --tinta: #33261E; /* texto principal — era "marrom" */ --tinta-2: #5C4A3E; /* texto secundário — era "marrom-2" */ /* #6B5C50, não o #8B7A6D do preview institucional: aquele tom dá 4,12:1 sobre branco e 3,44:1 * sobre o bege — reprova o mínimo de 4,5:1 da WCAG AA pro texto normal (rótulo, nota de rodapé, * contador). Mesmo matiz, escurecido até passar — a mesma lógica já aplicada aqui em 17/08 pro * "marrom-3" antigo. */ --tinta-3: #6B5C50; /* era "marrom-3" */ --terracota-esc: #A83407; /* variante escura do terracota — é a que serve como TEXTO/link */ --terracota: #CF7329; /* terracota de marca — borda, ícone, superfície grande, nunca texto pequeno */ --terracota-clr: #E8AC6C; --marrom: #803800; /* acento escuro — cabeçalho, botão primário, faixa de destaque */ --vinho: #710000; /* segundo acento da marca — também sinal.ruim, ver reconciliação */ --camel: #C89C71; --claro: #F7EDE4; /* texto claro sobre fundo escuro */ --borda: #E7D6BE; --borda-forte: #D8BD98; /* Sinal de desempenho — funcional, fora da paleta de marca (ver nota no topo do arquivo). */ --sinal-bom: #3F6B37; --sinal-bom-media: #6E8168; /* mesmo hex do antigo --salvia: função mudou de "cor de marca" pra "sinal", o tom não precisava mudar */ --sinal-bom-fundo: #DCE4D8; /* idem, era --salvia-claro */ --sinal-ruim: #710000; /* = --vinho: a marca já tinha um vermelho escuro pronto pra isso */ --sinal-ruim-fundo:#FBEAEA; --r: 12px; --r-p: 8px; --sombra: 0 1px 2px rgba(51,38,30,.05), 0 6px 16px rgba(51,38,30,.05); --sombra-alta: 0 2px 6px rgba(51,38,30,.08), 0 12px 28px rgba(51,38,30,.08); /* Escala de espaço: 4 / 8 / 14 / 22 / 36 / 56. Poucos degraus, usados de forma consistente. */ --e1: 4px; --e2: 8px; --e3: 14px; --e4: 22px; --e5: 36px; --e6: 56px; } * { box-sizing: border-box; } body { margin: 0; background: var(--branco); color: var(--tinta); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } /* --terracota (#CF7329) dá 3,42:1 sobre branco — passa no não-texto (borda, ícone, sublinhado) * mas reprova nos 4,5:1 que texto normal exige. --terracota-esc é o mesmo matiz escurecido * (6,65:1): o link continua lendo como terracota sem reprovar. */ a { color: var(--terracota-esc); } a:hover { color: #8A2C06; } h1 { font-family: var(--serif); font-weight: 700; font-size: 27px; line-height: 1.2; margin: 0 0 var(--e1); letter-spacing: -.2px; } h1 span { color: var(--terracota); } h2 { font-size: 15px; margin: var(--e5) 0 var(--e3); letter-spacing: -.1px; color: var(--tinta); } /* Piso de legibilidade: nada de texto corrido abaixo de 13.5px nesta plataforma. É ferramenta de * trabalho lida o dia inteiro, e nota de rodapé ilegível é nota que ninguém lê. */ .sub { color: var(--tinta-2); font-size: 14px; margin: 0 0 var(--e4); max-width: 78ch; } .sub strong { color: var(--tinta); } .nota { color: var(--tinta-2); font-size: 13.5px; } /* ---------------------------------------------------------------------------- cabeçalho * * Dois andares. O de cima diz em que ÁREA você está (são cinco); o de baixo, em que tela dentro * dela. Vinte destinos numa fila só viram uma sopa onde ninguém acha nada, e esconder metade * atrás de um botão exigiria JavaScript que este projeto não tem. */ .topo { background: var(--marrom); color: var(--claro); position: sticky; top: 0; z-index: 20; } .topo-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--e4); display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; } .marca { color: var(--claro); font-family: var(--serif); font-weight: 700; text-decoration: none; letter-spacing: .2px; font-size: 17px; padding: var(--e3) 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } /* Sem segundo tom no logotipo: o camel e o terracota-claro do institucional dão 3,4:1 e 4,25:1 * sobre este marrom — não sobram opções de acento que passem em 4,5:1 pra um texto deste * tamanho. O ícone (na marcação, não aqui) já carrega o terracota; o nome fica só em --claro. */ .topo .areas { display: flex; gap: var(--e4); margin-right: auto; flex-wrap: wrap; } .topo .areas a { color: var(--claro); opacity: .74; text-decoration: none; font-size: 14.5px; padding: var(--e3) 0; border-bottom: 2px solid transparent; } .topo .areas a:hover { opacity: 1; } .topo .areas a.on { opacity: 1; color: var(--branco); border-bottom-color: var(--terracota-clr); font-weight: 600; } .sair { display: flex; align-items: center; gap: var(--e3); margin: 0; } .quem { font-size: 13.5px; color: var(--claro); opacity: .74; text-decoration: none; white-space: nowrap; } .quem:hover { opacity: 1; } .sair button { background: transparent; border: 1px solid rgba(247,237,228,.3); color: var(--claro); padding: 5px 12px; border-radius: var(--r-p); cursor: pointer; font-size: 13.5px; font-family: inherit; } .sair button:hover { background: rgba(247,237,228,.1); border-color: var(--terracota-clr); } /* segundo andar */ .secoes { background: var(--branco); border-bottom: 1px solid var(--borda); } .secoes-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--e4); display: flex; gap: var(--e4); flex-wrap: wrap; } .secoes-in a { color: var(--tinta-2); text-decoration: none; font-size: 14px; padding: 11px 0; border-bottom: 2px solid transparent; white-space: nowrap; } .secoes-in a:hover { color: var(--tinta); } .secoes-in a.on { color: var(--tinta); font-weight: 600; border-bottom-color: var(--terracota); } /* Badge de contagem: branco sobre terracota puro dá só 3,42:1 num texto de 11,5px — precisa da * variante escura pra passar em 4,5:1, igual ao link. */ .pilula { display: inline-block; background: var(--terracota-esc); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; vertical-align: 1px; } /* ---------------------------------------------------------------------------- faixas de estado * * Ficam no shell, e não na tela de avisos: envio pausado, job esperando conferência humana e * grupo renomeado no WhatsApp precisam encontrar a pessoa onde ela estiver, inclusive no meio do * CRM. É metade do ganho de ter unificado os dois sistemas. */ .faixa { padding: 10px var(--e4); font-size: 14px; text-align: center; border-bottom: 1px solid rgba(51,38,30,.08); } /* `body` no seletor só para empatar em especificidade com a regra de link escopada por * módulo — senão o link dentro da faixa marrom vira terracota escuro e some no fundo. */ body .faixa a { color: inherit; } .faixa-atencao { background: #F8EEDF; color: #6E5222; } .faixa-erro { background: #FBEAE3; color: #7E3B27; } .faixa-parado { background: var(--tinta-2); color: var(--claro); } /* ---------------------------------------------------------------------------- corpo e rodapé */ .pagina { max-width: 1240px; margin: 0 auto; padding: var(--e5) var(--e4) var(--e6); } .rodape { max-width: 1240px; margin: 0 auto; padding: var(--e4) var(--e4) var(--e5); color: var(--tinta-3); font-size: 13.5px; border-top: 1px solid var(--borda); } /* ---------------------------------------------------------------------------- login */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--e4); } .login-caixa { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e5); width: 100%; max-width: 420px; box-shadow: var(--sombra-alta); } .login-caixa h1 { margin-bottom: var(--e2); } .login-caixa .sub { font-size: 14px; margin-bottom: var(--e4); } .login-caixa label { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta-2); margin-bottom: var(--e1); } .login-caixa input { width: 100%; border: 1px solid var(--borda-forte); border-radius: var(--r-p); padding: 10px; font-size: 15px; margin-bottom: var(--e3); font-family: inherit; background: #fff; color: var(--tinta); } .login-caixa input:focus { outline: 2px solid var(--terracota); outline-offset: 1px; } /* Botão sólido: branco sobre terracota puro reprova em texto normal (3,42:1). --marrom (o acento * escuro do institucional) dá 8,46:1 — e é a mesma cor que o próprio site usa no botão primário. */ .login-caixa button { width: 100%; background: var(--marrom); color: var(--claro); border: none; border-radius: var(--r-p); padding: 11px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; } .login-caixa button:hover { filter: brightness(1.12); } .login-erro { background: var(--sinal-ruim-fundo); border: 1px solid var(--terracota-clr); border-left: 3px solid var(--vinho); border-radius: var(--r-p); padding: var(--e3) var(--e4); color: var(--vinho); font-size: 14px; margin: 0 0 var(--e3); } .login-caixa .nota { margin: var(--e3) 0 0; } /* ---------------------------------------------------------------------------- tela de Início * * A única tela que atravessa os dois módulos. Um bloco por frente de trabalho, e o critério do * que vira o número grande é estreito: o que faz alguém mudar de rumo ao abrir o sistema de * manhã. Contagem que não muda decisão vem na linha de baixo, menor. */ .inicio-topo { margin-bottom: var(--e5); } .inicio-sinais { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .sinal { display: flex; flex-direction: column; gap: var(--e1); background: var(--branco); border: 1px solid var(--borda); border-left: 3px solid var(--borda-forte); border-radius: var(--r); padding: var(--e4); text-decoration: none; color: inherit; box-shadow: var(--sombra); } .sinal:hover { box-shadow: var(--sombra-alta); border-color: var(--borda-forte); } .sinal-rotulo { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); } .sinal-num { font-family: var(--serif); font-size: 31px; line-height: 1.1; letter-spacing: -.3px; font-weight: 700; } .sinal-nota { font-size: 14px; color: var(--tinta-2); } .sinal-linha { font-size: 13.5px; color: var(--tinta-2); margin-top: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--borda); } .sinal-linha em { font-style: normal; font-weight: 600; color: var(--tinta); } .sinal-linha em.ruim { color: var(--sinal-ruim); } /* Cor só significa estado. Nada aqui é colorido para ficar bonito. */ .sinal-bom { border-left-color: var(--sinal-bom-media); } .sinal-bom .sinal-num { color: var(--sinal-bom); } /* Era `border-left-color: var(--terracota)` — usava a cor de marca pra sinalizar "ruim", sem ser * vermelho. Com o vinho na paleta agora existe um vermelho de marca de verdade pra isso. */ .sinal-ruim { border-left-color: var(--vinho); } .sinal-ruim .sinal-num { color: var(--sinal-ruim); } .sinal-neutro .sinal-num { color: var(--tinta); } .inicio-bloco { margin-top: var(--e6); } .inicio-erros { list-style: none; margin: 0; padding: 0; } .inicio-erros li { display: flex; align-items: center; gap: var(--e2); padding: 10px var(--e3); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-p); margin-bottom: var(--e1); font-size: 14px; } .inicio-erros .quando { margin-left: auto; color: var(--tinta-3); font-size: 13.5px; } /* ---------------------------------------------------------------------------- telas estreitas */ @media (max-width: 820px) { .topo-in { gap: var(--e3); } .topo .areas { gap: var(--e3); width: 100%; margin-right: 0; order: 3; } .topo .areas a { padding: var(--e2) 0; } .sair { margin-left: auto; } .pagina { padding: var(--e4) var(--e3) var(--e5); } .secoes-in { gap: var(--e3); padding: 0 var(--e3); overflow-x: auto; } h1 { font-size: 23px; } .sinal-num { font-size: 27px; } } /* =========================================================================================== * 2. MÓDULO AVISOS — GERADO por escopar-css.py. Não edite aqui: * a fonte é ../grupos-whatsapp/app/public/styles.css * =========================================================================================== */ /* Central de Avisos — CSS único, sem framework, sem CDN externo. Paleta da marca NeuroPsi+Leve, mesma do app da Comunidade de Supervisão. Ferramenta interna: prioridade é legibilidade e não errar clique, não vitrine. */ body.m-avisos { --salvia: #6B7C64; --salvia-claro: #8B9A84; --salvia-suave: #EBEFE9; --verde: #3C4A3A; --ocre: #C79A6B; --ocre-suave: #F6ECE0; --ocre-texto: #8A6231; --terracota: #B4552F; --terracota-suave:#FBEAE3; --creme: #F7F3EC; --creme2: #FDFBF7; --tinta: #26241F; --texto-suave: #5B564C; --texto-mudo: #8B8578; --borda: #E3DCD0; --radius: 10px; } /* ---------- topo ---------- */ /* ---------- faixas de estado ---------- */ /* ---------- layout ---------- */ body.m-avisos .cabecalho-pagina { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; } body.m-avisos .cabecalho-pagina h1 { margin: 0; } body.m-avisos .migalha { margin: 0 0 .8rem; font-size: .88rem; } body.m-avisos .cartao { background: var(--creme2); border: 1px solid var(--borda); border-radius: var(--radius); padding: 1.15rem 1.3rem; margin-bottom: 1.1rem; } body.m-avisos .cartao.estreito { max-width: 560px; } body.m-avisos .cartao.perigo { border-color: #E8C4B6; background: #FEFAF8; } body.m-avisos .destaque-atencao { border-color: #E5CDA9; background: var(--ocre-suave); } body.m-avisos .destaque-ok { border-color: #C3D0BC; background: var(--salvia-suave); } body.m-avisos .grade-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; } body.m-avisos .dois-lados { display: flex; gap: 2rem; flex-wrap: wrap; } /* ---------- métricas ---------- */ body.m-avisos .metrica .rotulo { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-mudo); } body.m-avisos .metrica .numero { display: block; font-size: 2rem; font-weight: 600; line-height: 1.15; margin: .15rem 0 .4rem; color: var(--verde); } body.m-avisos .metrica .numero small { font-size: .85rem; font-weight: 400; color: var(--texto-mudo); } body.m-avisos .barra { height: 6px; background: var(--salvia-suave); border-radius: 3px; overflow: hidden; margin-bottom: .6rem; } body.m-avisos .barra-fill { height: 100%; width: var(--p, 0%); background: var(--salvia); } /* ---------- tabela ---------- */ body.m-avisos .tabela { width: 100%; border-collapse: collapse; font-size: .92rem; } body.m-avisos .tabela th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-mudo); font-weight: 600; padding: .4rem .6rem; border-bottom: 1px solid var(--borda); } body.m-avisos .tabela td { padding: .5rem .6rem; border-bottom: 1px solid #F0EBE1; vertical-align: top; } body.m-avisos .tabela tr:last-child td { border-bottom: none; } body.m-avisos .tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } body.m-avisos .linha-apagada td { opacity: .5; } body.m-avisos .detalhe { max-width: 380px; overflow-wrap: anywhere; } /* ---------- etiquetas e situações ---------- */ body.m-avisos .etiqueta { display: inline-block; font-size: .7rem; padding: .1rem .45rem; border-radius: 4px; background: var(--salvia-suave); color: var(--verde); margin-left: .35rem; white-space: nowrap; } body.m-avisos .etiqueta-aviso { background: var(--ocre-suave); color: var(--ocre-texto); } body.m-avisos .etiqueta-erro { background: var(--terracota-suave); color: #8C3A1B; } body.m-avisos .etiqueta-fraca { background: #EEEAE2; color: var(--texto-mudo); } body.m-avisos .situacao { font-size: .75rem; padding: .12rem .5rem; border-radius: 4px; text-transform: lowercase; } body.m-avisos .situacao-ativo { background: var(--salvia-suave); color: var(--verde); } body.m-avisos .situacao-arquivado { background: #EEEAE2; color: var(--texto-suave); } body.m-avisos .situacao-sumido { background: var(--ocre-suave); color: var(--ocre-texto); } body.m-avisos .situacao-removido { background: var(--terracota-suave); color: #8C3A1B; } /* ---------- formulários ---------- */ body.m-avisos label { display: block; margin-bottom: .8rem; font-size: .88rem; color: var(--texto-suave); } /* Os tipos number, date e url entraram em 28/08/2026, com o formulario de passo de fluxo 1:1: ate entao nenhuma tela deste modulo usava esses tipos, e um campo de "enviar depois de N horas" aparecia sem caixa nenhuma ao lado dos campos de texto. */ body.m-avisos input[type=text], body.m-avisos input[type=email], body.m-avisos input[type=password], body.m-avisos input[type=search], body.m-avisos input[type=number], body.m-avisos input[type=date], body.m-avisos input[type=url], body.m-avisos input[type=tel], body.m-avisos select, body.m-avisos textarea { width: 100%; padding: .5rem .65rem; margin-top: .25rem; border: 1px solid var(--borda); border-radius: 7px; background: #fff; font: inherit; color: var(--tinta); } body.m-avisos input:focus, body.m-avisos select:focus, body.m-avisos textarea:focus { outline: 2px solid var(--salvia-claro); outline-offset: 1px; border-color: var(--salvia); } body.m-avisos input:disabled, body.m-avisos select:disabled { background: #F2EFE9; color: var(--texto-mudo); } body.m-avisos .linha-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } body.m-avisos .linha-form input, body.m-avisos .linha-form select { margin-top: 0; width: auto; flex: 1 1 200px; } body.m-avisos .filtros { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; } body.m-avisos .filtros input, body.m-avisos .filtros select { margin-top: 0; width: auto; } body.m-avisos .link-limpar { font-size: .85rem; } body.m-avisos .botao { display: inline-block; padding: .45rem 1rem; border-radius: 7px; cursor: pointer; border: 1px solid var(--borda); background: #fff; color: var(--verde); font: inherit; font-size: .9rem; text-decoration: none; white-space: nowrap; } body.m-avisos .botao:hover { border-color: var(--salvia); background: var(--salvia-suave); color: var(--verde); } body.m-avisos .botao.primario { background: var(--verde); border-color: var(--verde); color: var(--creme2); } body.m-avisos .botao.primario:hover { background: var(--salvia); border-color: var(--salvia); color: #fff; } body.m-avisos .botao.perigoso { background: var(--terracota); border-color: var(--terracota); color: #fff; } body.m-avisos .botao.perigoso:hover { background: #9C4526; border-color: #9C4526; color: #fff; } body.m-avisos .botao.largo { width: 100%; text-align: center; margin-top: .4rem; } body.m-avisos .botao.pequeno { padding: .2rem .6rem; font-size: .8rem; } body.m-avisos .botao:disabled { opacity: .45; cursor: not-allowed; } body.m-avisos .acoes-linha { display: flex; gap: .4rem; } body.m-avisos .acoes-linha form { display: inline; } body.m-avisos .grade-checkbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .3rem .9rem; margin-bottom: 1rem; } body.m-avisos .checkbox-item { display: flex; gap: .5rem; align-items: baseline; margin: 0; padding: .25rem 0; font-size: .9rem; color: var(--tinta); } body.m-avisos .checkbox-item input { width: auto; margin: 0; } body.m-avisos .checkbox-item small { display: block; color: var(--texto-mudo); font-size: .78rem; } /* ---------- ficha ---------- */ body.m-avisos .ficha { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: .4rem 1.2rem; margin: 0; } body.m-avisos .ficha dt { color: var(--texto-mudo); font-size: .85rem; } body.m-avisos .ficha dd { margin: 0; } /* ---------- diversos ---------- */ body.m-avisos .nota { font-size: .84rem; color: var(--texto-mudo); margin: .5rem 0 0; } body.m-avisos .nota a { color: var(--salvia); } body.m-avisos .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } body.m-avisos .pequeno { font-size: .82rem; } body.m-avisos .lista-simples { margin: .5rem 0 0; padding-left: 1.1rem; } body.m-avisos .lista-simples li { margin-bottom: .3rem; } body.m-avisos .alerta { padding: .6rem .8rem; border-radius: 7px; font-size: .9rem; } body.m-avisos .alerta.erro { background: var(--terracota-suave); color: #8C3A1B; } body.m-avisos .mensagem-erro { color: var(--texto-suave); overflow-wrap: anywhere; } body.m-avisos .paginacao { display: flex; gap: .6rem; } body.m-avisos .senha-provisoria { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.3rem; letter-spacing: .04em; background: #fff; border: 1px dashed var(--salvia); border-radius: 7px; padding: .7rem 1rem; display: inline-block; } /* ---------- login ---------- */ @media (max-width: 640px) { body.m-avisos .ficha { grid-template-columns: 1fr; gap: .1rem .6rem; } body.m-avisos .ficha dd { margin-bottom: .5rem; } body.m-avisos .cartao { padding: 1rem; } } /* ---------- Fase 1: compositor, balão e estados de envio ---------- */ body.m-avisos .compositor { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; align-items: start; } body.m-avisos .compositor textarea { min-height: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.5; resize: vertical; } body.m-avisos .rotulo-previa { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-mudo); margin-bottom: .4rem; } /* Balão parecido com o do WhatsApp — a equipe precisa julgar o texto como a leitora vai ver, não como markdown cru. */ body.m-avisos .balao { background: #E7FFDB; border: 1px solid #CFEFC0; border-radius: 8px 8px 8px 2px; padding: .7rem .85rem; min-height: 90px; max-width: 460px; font-size: .93rem; line-height: 1.5; color: #111B21; overflow-wrap: anywhere; } body.m-avisos .balao code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0,0,0,.06); padding: 0 .2rem; border-radius: 3px; } body.m-avisos .balao .vazio { color: #7A8B77; font-style: italic; } body.m-avisos .cru { margin-top: .9rem; } body.m-avisos .cru summary { cursor: pointer; font-size: .84rem; color: var(--texto-mudo); } body.m-avisos .texto-cru { background: #F2EFE9; border: 1px solid var(--borda); border-radius: 7px; padding: .7rem .85rem; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .5rem; } body.m-avisos .atalhos { display: flex; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 1rem; } body.m-avisos .acoes-grandes { flex-wrap: wrap; gap: .6rem; align-items: flex-start; } body.m-avisos .acoes-grandes form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } body.m-avisos .acoes-grandes input[type=text] { margin-top: 0; width: auto; min-width: 200px; } /* Estados de envio. O vocabulário está em routes/avisos.js — "entregue", "recebido" e "lido" são proibidos, porque esta integração não devolve confirmação de entrega. */ body.m-avisos .envio { font-size: .86rem; display: inline-block; } body.m-avisos .envio-ok { color: var(--verde); } body.m-avisos .envio-ok-fraco { color: var(--salvia); } body.m-avisos .envio-atencao { color: var(--ocre-texto); } body.m-avisos .envio-erro { color: #8C3A1B; font-weight: 500; } body.m-avisos .envio-neutro { color: var(--texto-mudo); } body.m-avisos .aviso-entrega { border-top: 1px solid var(--borda); margin-top: 1rem; padding-top: .8rem; } /* Status de campanha */ body.m-avisos .st-rascunho { background: #EEEAE2; color: var(--texto-suave); } body.m-avisos .st-aguardando_aprovacao { background: var(--ocre-suave); color: var(--ocre-texto); } body.m-avisos .st-agendado { background: var(--salvia-suave); color: var(--verde); } body.m-avisos .st-enviando { background: var(--ocre); color: var(--verde); } body.m-avisos .st-concluido { background: var(--salvia); color: #fff; } body.m-avisos .st-parcial { background: var(--ocre-suave); color: var(--ocre-texto); } body.m-avisos .st-falhou { background: var(--terracota-suave); color: #8C3A1B; } body.m-avisos .st-cancelado { background: #EEEAE2; color: var(--texto-mudo); } body.m-avisos .linha-tempo { list-style: none; margin: 0; padding: 0; } body.m-avisos .linha-tempo li { padding: .35rem 0 .35rem .9rem; border-left: 2px solid var(--borda); display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline; } @media (max-width: 860px) { body.m-avisos .compositor { grid-template-columns: 1fr; } body.m-avisos .balao { max-width: none; } } /* ---------- Fase 2: anexo, modelos, recorrência ---------- */ body.m-avisos .inline-check { display: inline-flex; gap: .35rem; align-items: center; margin: 0; font-size: .84rem; } body.m-avisos .inline-check input { width: auto; margin: 0; } body.m-avisos .sub-titulo { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-mudo); margin: 1.2rem 0 .5rem; } body.m-avisos .anexo-linha { border-left: 3px solid var(--ocre); padding-left: .7rem; margin-top: .8rem; } body.m-avisos input[type=file] { width: 100%; padding: .45rem; margin-top: .25rem; border: 1px dashed var(--borda); border-radius: 7px; background: #fff; font: inherit; font-size: .88rem; } /* ---------- Fase 2 lote 2: números, QR, barras por dia ---------- */ body.m-avisos .qrcode { max-width: 280px; width: 100%; border: 8px solid #fff; border-radius: 8px; display: block; margin: .8rem 0; } body.m-avisos .barras-dia { display: flex; gap: 4px; align-items: flex-end; height: 90px; margin: .6rem 0 0; } /* O rótulo do dia sai do fluxo (`position: absolute`) e a coluna reserva a altura dele em * `padding-bottom`. Sem isto os dois disputam os mesmos 90px: a altura em % do preenchimento é * calculada sobre a coluna inteira, não sobra espaço para o rótulo, e o flex ENCOLHE a barra mais * alta — comprimia o topo da escala em ~14% e achatava justamente o pico do gráfico. Só apareceu * em 28/08/2026, quando as barras voltaram a ter altura (a altura vinha de `style=` inline, que a * CSP bloqueia, e o gráfico era uma fileira de tocos de 2px). */ body.m-avisos .barra-dia { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 14px; position: relative; padding-bottom: 15px; } body.m-avisos .barra-dia-fill { width: 100%; height: var(--p, 0%); background: var(--salvia); border-radius: 3px 3px 0 0; min-height: 2px; } body.m-avisos .barra-dia span { font-size: .62rem; color: var(--texto-mudo); position: absolute; bottom: 0; left: 0; right: 0; text-align: center; } /* ---------------------------------------------------------------- resgate dos estilos inline * 28/08/2026. `style="..."` nunca funcionou nesta plataforma: a CSP e `style-src 'self'`, sem * `unsafe-inline`, e o navegador descarta o atributo inteiro. As classes abaixo sao o que aqueles * atributos QUERIAM fazer. * * Duas delas nao eram cosmeticas — as barras estavam informando errado: * * `.barra-fill` recebia `width` inline. Sem width, um div ocupa 100% do pai: a barra de "cota * de hoje" aparecia CHEIA em todo numero, todo dia, inclusive com zero disparo. * * `.barra-dia-fill` recebia `height` inline. Sem height, sobrava so o `min-height: 2px`: o * grafico dos ultimos 7 dias era uma fileira de tocos iguais. * * A porcentagem ja vem inteira (0-100) do template, entao a escada `.p-0`..`.p-100` reproduz o * valor exato — nao ha arredondamento novo. Ela define `--p`, e cada barra decide se isso e * largura ou altura. */ body.m-avisos .p-0 { --p:0% } body.m-avisos .p-1 { --p:1% } body.m-avisos .p-2 { --p:2% } body.m-avisos .p-3 { --p:3% } body.m-avisos .p-4 { --p:4% } body.m-avisos .p-5 { --p:5% } body.m-avisos .p-6 { --p:6% } body.m-avisos .p-7 { --p:7% } body.m-avisos .p-8 { --p:8% } body.m-avisos .p-9 { --p:9% } body.m-avisos .p-10 { --p:10% } body.m-avisos .p-11 { --p:11% } body.m-avisos .p-12 { --p:12% } body.m-avisos .p-13 { --p:13% } body.m-avisos .p-14 { --p:14% } body.m-avisos .p-15 { --p:15% } body.m-avisos .p-16 { --p:16% } body.m-avisos .p-17 { --p:17% } body.m-avisos .p-18 { --p:18% } body.m-avisos .p-19 { --p:19% } body.m-avisos .p-20 { --p:20% } body.m-avisos .p-21 { --p:21% } body.m-avisos .p-22 { --p:22% } body.m-avisos .p-23 { --p:23% } body.m-avisos .p-24 { --p:24% } body.m-avisos .p-25 { --p:25% } body.m-avisos .p-26 { --p:26% } body.m-avisos .p-27 { --p:27% } body.m-avisos .p-28 { --p:28% } body.m-avisos .p-29 { --p:29% } body.m-avisos .p-30 { --p:30% } body.m-avisos .p-31 { --p:31% } body.m-avisos .p-32 { --p:32% } body.m-avisos .p-33 { --p:33% } body.m-avisos .p-34 { --p:34% } body.m-avisos .p-35 { --p:35% } body.m-avisos .p-36 { --p:36% } body.m-avisos .p-37 { --p:37% } body.m-avisos .p-38 { --p:38% } body.m-avisos .p-39 { --p:39% } body.m-avisos .p-40 { --p:40% } body.m-avisos .p-41 { --p:41% } body.m-avisos .p-42 { --p:42% } body.m-avisos .p-43 { --p:43% } body.m-avisos .p-44 { --p:44% } body.m-avisos .p-45 { --p:45% } body.m-avisos .p-46 { --p:46% } body.m-avisos .p-47 { --p:47% } body.m-avisos .p-48 { --p:48% } body.m-avisos .p-49 { --p:49% } body.m-avisos .p-50 { --p:50% } body.m-avisos .p-51 { --p:51% } body.m-avisos .p-52 { --p:52% } body.m-avisos .p-53 { --p:53% } body.m-avisos .p-54 { --p:54% } body.m-avisos .p-55 { --p:55% } body.m-avisos .p-56 { --p:56% } body.m-avisos .p-57 { --p:57% } body.m-avisos .p-58 { --p:58% } body.m-avisos .p-59 { --p:59% } body.m-avisos .p-60 { --p:60% } body.m-avisos .p-61 { --p:61% } body.m-avisos .p-62 { --p:62% } body.m-avisos .p-63 { --p:63% } body.m-avisos .p-64 { --p:64% } body.m-avisos .p-65 { --p:65% } body.m-avisos .p-66 { --p:66% } body.m-avisos .p-67 { --p:67% } body.m-avisos .p-68 { --p:68% } body.m-avisos .p-69 { --p:69% } body.m-avisos .p-70 { --p:70% } body.m-avisos .p-71 { --p:71% } body.m-avisos .p-72 { --p:72% } body.m-avisos .p-73 { --p:73% } body.m-avisos .p-74 { --p:74% } body.m-avisos .p-75 { --p:75% } body.m-avisos .p-76 { --p:76% } body.m-avisos .p-77 { --p:77% } body.m-avisos .p-78 { --p:78% } body.m-avisos .p-79 { --p:79% } body.m-avisos .p-80 { --p:80% } body.m-avisos .p-81 { --p:81% } body.m-avisos .p-82 { --p:82% } body.m-avisos .p-83 { --p:83% } body.m-avisos .p-84 { --p:84% } body.m-avisos .p-85 { --p:85% } body.m-avisos .p-86 { --p:86% } body.m-avisos .p-87 { --p:87% } body.m-avisos .p-88 { --p:88% } body.m-avisos .p-89 { --p:89% } body.m-avisos .p-90 { --p:90% } body.m-avisos .p-91 { --p:91% } body.m-avisos .p-92 { --p:92% } body.m-avisos .p-93 { --p:93% } body.m-avisos .p-94 { --p:94% } body.m-avisos .p-95 { --p:95% } body.m-avisos .p-96 { --p:96% } body.m-avisos .p-97 { --p:97% } body.m-avisos .p-98 { --p:98% } body.m-avisos .p-99 { --p:99% } body.m-avisos .p-100 { --p:100% } body.m-avisos .alerta.ok { background: var(--salvia-suave); color: var(--verde); } body.m-avisos .respiro-topo { margin-top: 1rem; } body.m-avisos .respiro-topo-curto { margin-top: .4rem; } body.m-avisos .barra.estreita { max-width: 220px; } /* Tabela larga rola dentro do proprio quadro. Sem isto e a PAGINA que rola de lado — defeito que * este projeto ja mede tela a tela. */ body.m-avisos .rolagem-x { overflow-x: auto; } /* =========================================================================================== * 3. MÓDULO EQUIPE — GERADO por escopar-css.py. Não edite aqui: * a fonte é ../equipe/app/public/styles.css * =========================================================================================== */ /* Painel da equipe — folha de estilo. * * Herdada do painel de anúncios (11/08/2026), que resolveu o problema de tudo ter o mesmo * peso: título, número, rótulo e nota de rodapé no mesmo tom, tabelas sem hierarquia, cor usada * como enfeite. Num painel de decisão isso custa caro — a pessoa lê tudo para descobrir o que * importa, e sem sinal de bom/ruim precisa fazer a conta de cabeça em cada linha. * * Três regras que governam o resto: * 1. UM número principal por bloco. O resto é contexto e vem menor. * 2. Cor só significa desempenho. Verde é acima da média da conta, vermelho é abaixo. Nada é * colorido para ficar bonito — se tudo tem cor, cor não informa nada. * 3. Número é tabular e alinhado à direita, sempre. Coluna de dinheiro que dança impede * comparação visual, que é o único jeito de ler uma tabela de 100 linhas rápido. * * Identidade (21/08/2026): trocada pela paleta e tipografia do preview do site institucional * (projetos/site-institucional/preview/, v5 aprovada pela Bruna) — terracota/vinho/marrom/camel * sobre fundo branco, Playfair Display nos títulos e números de destaque, Urbanist no corpo. * O verde de "sinal.bom" continua fora dessa paleta de propósito: no institucional ele não existe * (não é site de decisão), mas aqui é a única cor que informa desempenho — trocá-lo por uma cor * de marca faria a mesma cor significar duas coisas diferentes em telas diferentes. * O fundo creme virou branco (decisão da Bruna, mesma mudança que o institucional fez em * 21/08). Como isso apaga a separação entre um cartão branco e a página branca por baixo, todo * lugar que antes usava o creme como "camada por baixo de cartão branco" (coluna do quadro, * cabeçalho de tabela, estado ativo da lateral) passou a usar um bege-camel — a mesma solução * que o institucional usou nos filetes de seção quando teve o mesmo problema. * * IMPORTANTE — este projeto (`equipe/`) está DESATIVADO desde 17/08/2026 (unificado em * `../plataforma/`, ver o aviso no topo de `PROJETO_STATUS.md`). O container daqui não serve * tráfego. Mas este arquivo continua sendo a FONTE do módulo Equipe dentro da plataforma * unificada — `plataforma/montar-css.sh` lê direto daqui e escopa cada regra sob * `body.m-equipe`. Os nomes e valores de token abaixo têm que bater com os canônicos definidos * em `plataforma/css-fonte/shell.css`; um nome igual com cor diferente nos dois lugares faz a * mesma variável significar duas coisas dependendo da aba. Tipografia (Playfair/Urbanist) já * vem do `@font-face` do shell — não repetir aqui. */ body.m-equipe { --serif: Playfair, Georgia, "Times New Roman", serif; --sans: Urbanist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Paleta institucional (mesmos tokens do preview v5) */ --branco: #FFFFFF; --bege: #F5E9D8; /* camel bem claro — camada de agrupamento sob cartão branco, nunca fundo de página */ --bege-2: #EFDFC6; /* camel um pouco mais forte — hover/estado ativo sobre --bege */ --tinta: #33261E; /* texto principal — era "marrom" */ --tinta-2: #5C4A3E; /* texto secundário — era "marrom-2" */ /* #6B5C50, não o #8B7A6D do institucional: aquele tom dá 4,12:1 sobre branco e 3,44:1 sobre o * bege — reprova o mínimo de 4,5:1 da WCAG AA pro texto normal, que é o que esse token carrega * (rótulo de card, cabeçalho de tabela, metadado). Mesmo matiz, escurecido até passar. */ --tinta-3: #6B5C50; /* rótulo, metadado, texto terciário — era "marrom-3" */ --terracota-esc: #A83407; --terracota: #CF7329; --terracota-clr: #E8AC6C; --marrom: #803800; /* acento escuro — cabeçalho, botão primário, estado ativo forte */ --vinho: #710000; /* segundo acento da marca — também usado como sinal.ruim, ver nota abaixo */ --camel: #C89C71; --claro: #F7EDE4; /* texto claro sobre fundo escuro (cabeçalho, pílula ativa) */ --borda: #E7D6BE; --borda-forte: #D8BD98; /* Sinal de desempenho — funcional, fora da paleta de marca (ver nota no topo do arquivo). * sinal-ruim reaproveita o vinho da marca: já é um vermelho escuro o bastante pra servir de * texto com contraste, então não precisa de um terceiro vermelho só pra isso. */ --sinal-bom: #3F6B37; --sinal-bom-media: #6E8168; --sinal-bom-fundo: #DCE4D8; --sinal-ruim: #710000; --sinal-ruim-fundo: #FBEAEA; --r: 12px; --r-p: 8px; --sombra: 0 1px 2px rgba(51,38,30,.05), 0 6px 16px rgba(51,38,30,.05); --sombra-alta: 0 2px 6px rgba(51,38,30,.08), 0 12px 28px rgba(51,38,30,.08); /* Escala de espaço: 4 / 8 / 14 / 22 / 36 / 56. Poucos degraus, usados de forma consistente. */ --e1: 4px; --e2: 8px; --e3: 14px; --e4: 22px; --e5: 36px; --e6: 56px; } /* --terracota (#CF7329) dá só 3,42:1 sobre branco — passa no não-texto (borda, ícone, sublinhado) * mas reprova nos 4,5:1 que link de texto normal exige. --terracota-esc é o mesmo matiz escurecido * (6,65:1), então o link continua lendo como terracota sem reprovar. */ body.m-equipe a:hover { color: #8A2C06; } /* ---------------------------------------------------------------------------- cabeçalho */ /* ---------------------------------------------------------------------------- títulos */ body.m-equipe .sub { color: var(--tinta-2); font-size: 14px; margin: 0 0 var(--e4); max-width: 78ch; } body.m-equipe .sub strong { color: var(--tinta); } /* Faixa de contexto: de quando é o dado, o que ele cobre. Discreta mas sempre presente. */ body.m-equipe .aviso { background: var(--branco); border: 1px solid var(--borda); border-left: 3px solid var(--camel); border-radius: var(--r-p); padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 13.5px; color: var(--tinta-2); } body.m-equipe .aviso strong { color: var(--tinta); } body.m-equipe .erro { background: var(--sinal-ruim-fundo); border: 1px solid var(--terracota-clr); border-left: 3px solid var(--vinho); border-radius: var(--r-p); padding: var(--e3) var(--e4); color: var(--vinho); font-size: 14px; } /* ---------------------------------------------------------------------------- filtros */ body.m-equipe .filtros { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e3) var(--e4); display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap; box-shadow: var(--sombra); margin-bottom: var(--e4); } body.m-equipe .filtros label { display: block; font-size: 11px; color: var(--tinta-3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; } body.m-equipe .filtros input, body.m-equipe .filtros select { border: 1px solid var(--borda-forte); border-radius: var(--r-p); padding: 8px 10px; font-size: 14px; background: var(--branco); color: var(--tinta); font-family: inherit; min-width: 150px; } body.m-equipe .filtros input:focus, body.m-equipe .filtros select:focus { outline: 2px solid var(--terracota); outline-offset: 1px; } body.m-equipe .btn { background: var(--marrom); color: var(--claro); border: none; border-radius: var(--r-p); padding: 9px 18px; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; font-weight: 600; font-family: inherit; } body.m-equipe .btn:hover { filter: brightness(1.12); } body.m-equipe .btn.secundario { background: none; color: var(--tinta-2); border: 1px solid var(--borda-forte); } /* ---------------------------------------------------------------------------- cards de métrica */ body.m-equipe .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--e3); margin-bottom: var(--e4); } body.m-equipe .card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4) var(--e4) var(--e3); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 5px; } /* O card principal da tela. Um por página — se dois competem, nenhum é o principal. */ body.m-equipe .card.destaque { border-color: var(--borda-forte); box-shadow: var(--sombra-alta); } body.m-equipe .card .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--tinta-3); font-weight: 700; } /* `nowrap` + tamanho fluido: "R$ 897.695,45" quebrava em duas linhas no card de destaque, o que * destrói a leitura do número principal — era o primeiro valor da tela e o mais difícil de ler. * O clamp encolhe a fonte em card estreito em vez de quebrar o número. Playfair pelo mesmo motivo * do "numerão" do institucional: é o único número da tela que carrega peso de identidade. */ body.m-equipe .card strong { font-family: var(--serif); font-size: clamp(22px, 2.7vw, 30px); line-height: 1.12; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; } body.m-equipe .card.destaque strong { font-size: clamp(25px, 3.3vw, 36px); } body.m-equipe .card .nota { font-size: 12.5px; color: var(--tinta-2); line-height: 1.45; } /* ---------------------------------------------------------------------------- tabelas */ body.m-equipe .tabela-wrap { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); box-shadow: var(--sombra); overflow-x: auto; } body.m-equipe table { width: 100%; border-collapse: collapse; font-size: 14px; } body.m-equipe thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-3); font-weight: 700; padding: var(--e3) var(--e3); border-bottom: 1px solid var(--borda); white-space: nowrap; background: var(--bege); } /* Nada de `position: sticky` aqui. Dentro do contêiner com `overflow-x`, ele passou a cobrir a * primeira linha do corpo — a linha mais importante da tabela, já que tudo é ordenado por * relevância. Cabeçalho que esconde o primeiro resultado é pior que cabeçalho que rola. */ body.m-equipe thead th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; } body.m-equipe tbody td { padding: var(--e3); border-bottom: 1px solid var(--borda); vertical-align: middle; } body.m-equipe tbody tr:last-child td { border-bottom: none; } body.m-equipe tbody tr:hover { background: #FBF5EA; } body.m-equipe .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } body.m-equipe .principal { font-weight: 650; } /* Id/metadado sob o nome. Presente para conferência, sem competir com o nome. */ body.m-equipe .id { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--tinta-3); margin-top: 2px; letter-spacing: -.2px; } /* ---------------------------------------------------------------------------- sinal de desempenho * A única cor semântica do painel. Verde = acima da média da conta; vermelho = abaixo. Fica de * fora da paleta de marca de propósito — ver nota no topo do arquivo. */ body.m-equipe .sinal { font-variant-numeric: tabular-nums; font-weight: 650; } body.m-equipe .sinal.bom { color: var(--sinal-bom); } body.m-equipe .sinal.ruim { color: var(--sinal-ruim); } body.m-equipe .sinal.neutro { color: var(--tinta-2); font-weight: 500; } body.m-equipe .etiqueta { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; white-space: nowrap; } body.m-equipe .etiqueta.ativa { background: var(--sinal-bom-fundo); color: #3F5139; } body.m-equipe .etiqueta.pausada { background: var(--bege); color: var(--tinta-3); } /* ---------------------------------------------------------------------------- barra comparativa * Usada onde a leitura é "quanto deste total". Barra comunica proporção mais rápido que número. */ body.m-equipe .barra { /* `display: block` no próprio contêiner: como , ele é inline por padrão e ignora altura — a barra existia no HTML e não aparecia em tela nenhuma. */ display: block; height: 5px; background: var(--bege); border-radius: 100px; overflow: hidden; margin-top: 6px; min-width: 60px; } body.m-equipe .barra span { display: block; height: 100%; background: var(--tinta-3); border-radius: 100px; } body.m-equipe .barra.alerta span { background: var(--terracota); } /* ---------------------------------------------------------------------------- login */ @media (max-width: 700px) { body.m-equipe .card strong { font-size: 26px; } body.m-equipe .card.destaque strong { font-size: 30px; } body.m-equipe thead th { position: static; } } /* ---------------------------------------------------------------------------- faixa de estado * Primeira coisa que a tela "Agora" responde: o agente está rodando ou parado. Um pino colorido e * uma frase — se precisar ler dois parágrafos para saber isso, o painel falhou. */ body.m-equipe .faixa-estado { display: flex; align-items: center; gap: var(--e3); background: var(--branco); border: 1px solid var(--borda); border-left: 3px solid var(--tinta-3); border-radius: var(--r-p); padding: var(--e3) var(--e4); margin-bottom: var(--e4); } body.m-equipe .faixa-estado .pino { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3); flex: none; } body.m-equipe .faixa-estado.bom { border-left-color: var(--sinal-bom); } body.m-equipe .faixa-estado.bom .pino { background: var(--sinal-bom); } body.m-equipe .faixa-estado.ruim { border-left-color: var(--sinal-ruim); } body.m-equipe .faixa-estado.ruim .pino { background: var(--sinal-ruim); } body.m-equipe .faixa-estado.espera { border-left-color: var(--terracota); } body.m-equipe .faixa-estado.espera .pino { background: var(--terracota); } body.m-equipe .faixa-estado .nota { font-size: 12.5px; color: var(--tinta-2); } /* ---------------------------------------------------------------------------- pilulas de filtro */ body.m-equipe .pilula { display: inline-block; font-size: 13px; padding: 6px 13px; border-radius: 100px; border: 1px solid var(--borda-forte); color: var(--tinta-2); text-decoration: none; background: var(--branco); } body.m-equipe .pilula:hover { background: var(--bege); } body.m-equipe .pilula.ativa { background: var(--marrom); border-color: var(--marrom); color: var(--claro); font-weight: 600; } /* ---------------------------------------------------------------------------- feed de eventos * Uma linha por acontecimento. A barra colorida à esquerda diz de quem foi a ação sem exigir * leitura: lead, equipe, sistema. Venda e falha ganham fundo próprio porque são as duas coisas que * não podem passar despercebidas numa lista longa. */ body.m-equipe .feed { display: flex; flex-direction: column; gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; } body.m-equipe .evento { display: flex; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--branco); border-left: 3px solid var(--borda-forte); } body.m-equipe .evento.lead { border-left-color: var(--sinal-bom-media); } body.m-equipe .evento.equipe { border-left-color: var(--terracota); } body.m-equipe .evento.sistema { border-left-color: var(--borda-forte); } body.m-equipe .evento.venda { background: var(--sinal-bom-fundo); border-left-color: var(--sinal-bom); } body.m-equipe .evento.falha { background: var(--sinal-ruim-fundo); border-left-color: var(--sinal-ruim); } body.m-equipe .evento .quando { flex: none; width: 76px; font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; padding-top: 2px; } body.m-equipe .evento .corpo { min-width: 0; } body.m-equipe .evento .linha1 { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: baseline; } body.m-equipe .evento .acao { font-weight: 650; font-size: 14px; } body.m-equipe .evento .quem { font-size: 13px; color: var(--tinta-2); } body.m-equipe .evento .tel { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; } body.m-equipe .evento .texto { font-size: 13px; color: var(--tinta-2); margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; } /* ---------------------------------------------------------------------------- funil em miniatura */ body.m-equipe .funil-mini { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e4); } body.m-equipe .etapa-mini { flex: 1 1 130px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-p); padding: var(--e3); text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; gap: 2px; } body.m-equipe .etapa-mini:hover { border-color: var(--borda-forte); } body.m-equipe .etapa-mini .n { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; } body.m-equipe .etapa-mini .t { font-size: 11.5px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .5px; } body.m-equipe .etapa-mini.ganho { border-left: 3px solid var(--sinal-bom); } body.m-equipe .etapa-mini.perda { border-left: 3px solid var(--tinta-3); } /* ---------------------------------------------------------------------------- quadro (kanban) * Rola na horizontal dentro do próprio contêiner — a página nunca rola de lado. As colunas usam * bege (não branco): com a página branca, uma coluna branca segurando cartão branco some. */ body.m-equipe .quadro { display: flex; gap: var(--e3); overflow-x: auto; padding-bottom: var(--e3); align-items: flex-start; } body.m-equipe .coluna { flex: 0 0 268px; background: var(--bege); border-radius: var(--r); padding: var(--e2); max-height: 72vh; display: flex; flex-direction: column; } body.m-equipe .coluna.ganho { background: var(--sinal-bom-fundo); } body.m-equipe .coluna.perda { background: var(--bege-2); } body.m-equipe .coluna-topo { display: flex; align-items: center; justify-content: space-between; padding: var(--e2) var(--e2) 6px; } body.m-equipe .coluna-topo .nome { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-2); } body.m-equipe .coluna-topo .conta { font-size: 12px; font-weight: 700; color: var(--tinta-3); font-variant-numeric: tabular-nums; } body.m-equipe .coluna-valor { font-size: 12px; color: var(--tinta-2); padding: 0 var(--e2) 6px; font-variant-numeric: tabular-nums; } body.m-equipe .cartoes { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; } body.m-equipe .cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-p); padding: var(--e2) var(--e3); text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; gap: 2px; } body.m-equipe .cartao:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); } body.m-equipe .cartao .titulo { font-size: 13.5px; font-weight: 600; line-height: 1.3; } body.m-equipe .cartao .meta { font-size: 11.5px; color: var(--tinta-3); } body.m-equipe .mais { font-size: 12px; color: var(--tinta-3); padding: var(--e2); text-align: center; } /* ---------------------------------------------------------------------------- listas do ClickUp */ body.m-equipe h3.pasta { font-family: var(--serif); font-size: 15px; margin: var(--e4) 0 var(--e2); color: var(--tinta); font-weight: 700; } body.m-equipe .grade-listas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--e2); } body.m-equipe .cartao-lista { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-p); padding: var(--e3); text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; gap: 3px; } body.m-equipe .cartao-lista:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); } body.m-equipe .cartao-lista .titulo { font-size: 14px; font-weight: 600; line-height: 1.3; } body.m-equipe .cartao-lista .meta { font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; } @media (max-width: 700px) { body.m-equipe .evento { flex-direction: column; gap: 2px; } body.m-equipe .evento .quando { width: auto; } body.m-equipe .coluna { flex-basis: 82vw; } } /* Marcador de evento repetido no feed. Sequência idêntica vira uma linha só; o contador fica * discreto porque o que importa é o evento, não quantas vezes ele bateu. */ body.m-equipe .evento .repeticao { font-size: 11px; font-weight: 700; color: var(--sinal-ruim); background: var(--sinal-ruim-fundo); padding: 1px 7px; border-radius: 100px; letter-spacing: .3px; } /* ============================================================================ tarefas * A área de tarefas imita a navegação do ClickUp de propósito: barra lateral fixa com visões * salvas e hierarquia, conteúdo à direita, e a mesma linguagem visual de bandeira de prioridade, * inicial colorida de responsável e chip de status. Quem passa o dia no ClickUp não deveria ter * que reaprender onde as coisas ficam só porque está olhando o espelho. * O que NÃO se imita: nada aqui é editável. É leitura, e a lateral diz isso o tempo todo. */ body.m-equipe .app { display: flex; gap: var(--e4); align-items: flex-start; } body.m-equipe .conteudo { flex: 1; min-width: 0; } body.m-equipe .lateral { flex: 0 0 246px; position: sticky; top: 64px; align-self: flex-start; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e3) 0; max-height: calc(100vh - 90px); overflow-y: auto; box-shadow: var(--sombra); } body.m-equipe .lateral .busca { padding: 0 var(--e3) var(--e2); } body.m-equipe .lateral .busca input { width: 100%; border: 1px solid var(--borda-forte); border-radius: var(--r-p); padding: 7px 10px; font-size: 13px; font-family: inherit; background: var(--bege); } body.m-equipe .lateral .visoes { display: flex; flex-direction: column; padding: var(--e2) 0; border-bottom: 1px solid var(--borda); } body.m-equipe .lateral .visoes a, body.m-equipe .lateral .item { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: 6px var(--e3); text-decoration: none; color: var(--tinta); font-size: 13.5px; border-left: 2px solid transparent; } body.m-equipe .lateral .visoes a:hover, body.m-equipe .lateral .item:hover { background: var(--bege); } body.m-equipe .lateral .visoes a.ativa, body.m-equipe .lateral .item.ativa { background: var(--bege-2); border-left-color: var(--terracota); font-weight: 600; } body.m-equipe .lateral em { font-style: normal; font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; } body.m-equipe .lateral em.alerta { color: var(--sinal-ruim); font-weight: 700; } body.m-equipe .lateral .espaco { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; color: var(--tinta-3); padding: var(--e3) var(--e3) var(--e1); } body.m-equipe .lateral .pasta { font-size: 12.5px; font-weight: 650; color: var(--tinta-2); padding: 7px var(--e3) 2px; } body.m-equipe .lateral .item.dentro { padding-left: var(--e4); } body.m-equipe .lateral .item span, body.m-equipe .lateral .visoes a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.m-equipe .rodape-lateral { padding: var(--e3) var(--e3) 0; margin-top: var(--e2); border-top: 1px solid var(--borda); font-size: 11.5px; color: var(--tinta-3); line-height: 1.5; } /* ------------------------------------------------------------------ trilha, abas */ body.m-equipe .trilha { font-size: 12px; color: var(--tinta-3); margin-bottom: 2px; } body.m-equipe .trilha a { color: var(--tinta-2); } body.m-equipe .abas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--borda); margin-bottom: var(--e3); } body.m-equipe .abas a { padding: 8px var(--e3); font-size: 13.5px; text-decoration: none; color: var(--tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px; } body.m-equipe .abas a.ativa { color: var(--tinta); font-weight: 650; border-bottom-color: var(--terracota); } /* ------------------------------------------------------------------ linha de tarefa */ body.m-equipe .tabela-tarefas { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); margin-bottom: var(--e4); } body.m-equipe .linha-tarefa { display: flex; align-items: center; gap: var(--e3); padding: 9px var(--e3); border-bottom: 1px solid var(--borda); text-decoration: none; color: var(--tinta); font-size: 14px; } body.m-equipe .linha-tarefa:last-child { border-bottom: none; } body.m-equipe .linha-tarefa:hover { background: #FBF5EA; } body.m-equipe .linha-tarefa.feita .nome { color: var(--tinta-3); } body.m-equipe .linha-tarefa .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.m-equipe .linha-tarefa .local { font-size: 11.5px; color: var(--tinta-3); white-space: nowrap; } body.m-equipe .linha-tarefa .prazo { font-size: 12.5px; color: var(--tinta-2); width: 74px; text-align: right; font-variant-numeric: tabular-nums; } body.m-equipe .linha-tarefa .pessoas { display: flex; gap: 2px; } body.m-equipe .status { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: var(--bege); color: var(--tinta-2); white-space: nowrap; } body.m-equipe .status[data-tipo="closed"], body.m-equipe .status[data-tipo="done"] { background: var(--sinal-bom-fundo); color: #3F5139; } body.m-equipe .status[data-tipo="open"] { background: #F5E1CE; color: #8A3D12; } /* Bandeira de prioridade — mesma leitura do ClickUp: urgente vermelho, alta terracota, normal * verde (sinal funcional), baixa cinza. Cor aqui significa urgência e nada mais. */ body.m-equipe .bandeira { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--tinta-3); } body.m-equipe .bandeira.urgent { background: var(--sinal-ruim); } body.m-equipe .bandeira.high { background: var(--terracota); } body.m-equipe .bandeira.normal { background: var(--sinal-bom-media); } body.m-equipe .bandeira.low { background: var(--borda-forte); } body.m-equipe .avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta-2); color: var(--claro); font-size: 10px; font-weight: 700; letter-spacing: .2px; flex: none; } /* ------------------------------------------------------------------ agrupamento por status */ body.m-equipe .grupo { margin-bottom: var(--e4); } body.m-equipe .grupo-topo { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; color: var(--tinta-2); margin-bottom: var(--e2); } body.m-equipe .grupo-topo em { font-style: normal; color: var(--tinta-3); } body.m-equipe .cartao .bandeira { margin-bottom: 2px; } body.m-equipe .rodape-cartao { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } body.m-equipe .rodape-cartao .prazo { font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ ficha da tarefa */ body.m-equipe .ficha { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e3) var(--e4); box-shadow: var(--sombra); } body.m-equipe .ficha-linha { display: flex; gap: var(--e3); padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 14px; } body.m-equipe .ficha-linha:last-child { border-bottom: none; } body.m-equipe .ficha-linha .k { flex: 0 0 160px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-3); font-weight: 700; padding-top: 3px; } body.m-equipe .ficha-linha .v { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } body.m-equipe .descricao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4); white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--tinta-2); overflow-wrap: anywhere; } body.m-equipe .checklist { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e3) var(--e4); margin-bottom: var(--e2); } body.m-equipe .checklist-topo { font-weight: 650; font-size: 13.5px; margin-bottom: var(--e2); } body.m-equipe .checklist-topo em { font-style: normal; color: var(--tinta-3); font-size: 12px; } body.m-equipe .item-check { display: flex; gap: var(--e2); align-items: baseline; font-size: 13.5px; padding: 3px 0; } body.m-equipe .item-check .caixa { width: 15px; height: 15px; border: 1px solid var(--borda-forte); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: none; } body.m-equipe .item-check.feito { color: var(--tinta-3); text-decoration: line-through; } body.m-equipe .item-check.feito .caixa { background: var(--sinal-bom-fundo); border-color: var(--sinal-bom-media); color: #3F5139; } /* ------------------------------------------------------------------ pessoas */ body.m-equipe .grade-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--e2); } body.m-equipe .pessoa { display: flex; align-items: center; gap: var(--e2); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r-p); padding: var(--e2) var(--e3); text-decoration: none; color: var(--tinta); font-size: 13.5px; } body.m-equipe .pessoa:hover { border-color: var(--borda-forte); } body.m-equipe .pessoa .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.m-equipe .pessoa .conta { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-2); } @media (max-width: 900px) { body.m-equipe .app { flex-direction: column; } body.m-equipe .lateral { position: static; flex: none; width: 100%; max-height: none; } body.m-equipe .linha-tarefa .local { display: none; } } /* ---------------------------------------------------------------------------- texto rico * Descrição de tarefa e página de doc vêm com marcação do ClickUp. O conversor escapa tudo antes, * então aqui é só tipografia — corpo largo o suficiente para leitura contínua, sem competir com a * hierarquia da página. Fica em sans (não Playfair): é texto técnico longo, pensado pra escanear * rápido, não pra ler como manifesto. */ body.m-equipe .texto-rico { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4); font-size: 14.5px; line-height: 1.65; color: var(--tinta-2); max-width: 82ch; overflow-wrap: anywhere; } body.m-equipe .texto-rico h3, body.m-equipe .texto-rico h4, body.m-equipe .texto-rico h5, body.m-equipe .texto-rico h6 { color: var(--tinta); margin: var(--e4) 0 var(--e2); text-transform: none; letter-spacing: 0; } body.m-equipe .texto-rico h3 { font-size: 17px; } body.m-equipe .texto-rico h4 { font-size: 15px; } body.m-equipe .texto-rico h5, body.m-equipe .texto-rico h6 { font-size: 14px; } body.m-equipe .texto-rico p { margin: 0 0 var(--e2); } body.m-equipe .texto-rico ul, body.m-equipe .texto-rico ol { margin: 0 0 var(--e2); padding-left: 22px; } body.m-equipe .texto-rico li { margin-bottom: 3px; } body.m-equipe .texto-rico ul.checagem { list-style: none; padding-left: 0; } body.m-equipe .texto-rico ul.checagem li { display: flex; gap: var(--e2); align-items: baseline; } body.m-equipe .texto-rico ul.checagem li.feito { color: var(--tinta-3); text-decoration: line-through; } body.m-equipe .texto-rico ul.checagem .caixa { width: 15px; height: 15px; border: 1px solid var(--borda-forte); border-radius: 4px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } body.m-equipe .texto-rico blockquote { margin: 0 0 var(--e2); padding: 2px 0 2px var(--e3); border-left: 3px solid var(--borda-forte); color: var(--tinta-3); } body.m-equipe .texto-rico code { background: var(--bege); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } body.m-equipe .texto-rico pre { background: var(--bege); padding: var(--e3); border-radius: var(--r-p); overflow-x: auto; } body.m-equipe .texto-rico pre code { background: none; padding: 0; } body.m-equipe .texto-rico hr { border: none; border-top: 1px solid var(--borda); margin: var(--e3) 0; } body.m-equipe .texto-rico strong { color: var(--tinta); } body.m-equipe .pagina-doc { margin-bottom: var(--e4); } body.m-equipe .titulo-pagina { font-family: var(--serif); font-weight: 700; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--tinta); margin: 0 0 var(--e2); } /* Foto de responsável quando existe; iniciais quando não. Mesmo tamanho, para a linha não dançar. */ body.m-equipe img.avatar { object-fit: cover; } body.m-equipe .avatar.mais { background: var(--bege); color: var(--tinta-2); } /* Subtarefa recolhida sob a mãe na visão em lista. */ body.m-equipe .linha-tarefa .ramo { color: var(--tinta-3); font-size: 12px; flex: none; } /* ---------------------------------------------------------------------------- calendário * Uma lista da conta ("Agenda de encontros") usa view de calendário no ClickUp. Mês fechado, semana * começando no domingo como lá, e no máximo quatro tarefas por dia antes de virar "+N" — célula que * cresce sem limite destrói a grade e some com o resto do mês. */ body.m-equipe .mes-topo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); } body.m-equipe .mes-topo strong { font-family: var(--serif); font-size: 17px; font-variant-numeric: tabular-nums; } body.m-equipe .mes-topo .sub { margin: 0; font-size: 13px; } body.m-equipe .calendario { /* minmax(0, 1fr) e não 1fr: com `1fr` puro, um nome de tarefa longo empurra a coluna e o mês * fica com dias de larguras diferentes — sexta e sábado saíram para fora do quadro. */ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; } body.m-equipe .cabecalho-dia { background: var(--bege); padding: 6px var(--e2); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-3); text-align: center; } body.m-equipe .dia { background: var(--branco); min-height: 108px; padding: 5px 6px; display: flex; flex-direction: column; gap: 2px; } body.m-equipe .dia.vazio { background: var(--bege); } body.m-equipe .dia.hoje { background: #FBF1DF; box-shadow: inset 0 0 0 2px var(--terracota-clr); } body.m-equipe .dia .numero { font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; } body.m-equipe .dia .marca { display: flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 1.25; background: var(--bege); border-radius: 4px; padding: 3px 5px; text-decoration: none; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.m-equipe .dia .marca:hover { background: var(--bege-2); } body.m-equipe .dia .marca.feita { color: var(--tinta-3); } body.m-equipe .dia .mais { font-size: 10.5px; color: var(--tinta-3); } @media (max-width: 900px) { body.m-equipe .calendario { grid-template-columns: repeat(7, minmax(96px, 1fr)); overflow-x: auto; } } /* ---------------------------------------------------------------- formulários de gestão * Acrescentado em 28/08/2026, junto com a gestão de relacionamento (ficha, ata, desfecho). * * Este módulo nasceu somente de leitura: as únicas entradas em 30 telas eram a busca e um botão, * e por isso `input`, `select` e `textarea` nunca ganharam estilo aqui — só o módulo Avisos tem. * Sem este bloco, os formulários novos saem com o controle cru do navegador no meio de telas que * passaram pela revisão de identidade de 21/08. * * Nenhuma cor nova: são os mesmos tokens de `.filtros`, que já passaram pela conferência de * contraste. É o mesmo controle, em outro arranjo. */ body.m-equipe .form-gestao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4); box-shadow: var(--sombra); margin-bottom: var(--e4); } body.m-equipe .form-gestao .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e3); margin-bottom: var(--e3); } body.m-equipe .form-gestao label { display: block; font-size: 11px; color: var(--tinta-3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; } body.m-equipe .form-gestao input, body.m-equipe .form-gestao select, body.m-equipe .form-gestao textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); padding: 8px 10px; background: var(--branco); color: var(--tinta); } body.m-equipe .form-gestao textarea { min-height: 96px; line-height: 1.55; resize: vertical; } body.m-equipe .form-gestao input:focus, body.m-equipe .form-gestao select:focus, body.m-equipe .form-gestao textarea:focus { outline: 2px solid var(--terracota); outline-offset: 1px; } body.m-equipe .form-gestao .largo { grid-column: 1 / -1; } body.m-equipe .form-gestao .acoes { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; } body.m-equipe .form-gestao .dica { font-size: 12px; color: var(--tinta-3); margin: var(--e2) 0 0; } /* Duas etiquetas que faltavam para os estados que a gestão introduz: inadimplente e farol * vermelho precisam de vermelho, farol amarelo precisa de um alerta que não seja vermelho. * Os dois pares foram conferidos contra WCAG AA em texto pequeno: #710000 sobre #FBEAEA dá * 10,6:1, e #A83407 sobre #F5E9D8 dá 5,5:1. */ body.m-equipe .etiqueta.alerta { background: var(--sinal-ruim-fundo); color: var(--vinho); } body.m-equipe .etiqueta.atencao { background: var(--bege); color: var(--terracota-esc); } /* Linha de pendência/compromisso. Some do fluxo quando resolvida, mas continua legível — a lista * do que já foi cumprido é metade do argumento numa reunião de renovação. */ body.m-equipe .pendencia { display: flex; gap: var(--e2); align-items: baseline; } body.m-equipe .pendencia.feita { color: var(--tinta-3); text-decoration: line-through; } body.m-equipe .pendencia .prazo { font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------------------------------------------------------------- arranjo e respiro * Estas classes existem porque `style="..."` NÃO FUNCIONA nesta plataforma: a CSP é * `style-src 'self'`, sem `unsafe-inline`, então o navegador descarta o atributo inteiro — não * a declaração inválida, o atributo. Conferido em 28/08/2026 com getComputedStyle: os 49 * `style=` espalhados pelas views têm ZERO declarações aplicadas. * * Ou seja: `
` é um div em bloco, e sempre foi. Quem escrever estilo * inline aqui está escrevendo comentário. Afrouxar a CSP para `unsafe-inline` resolveria o * layout e enfraqueceria o cabeçalho — não vale a troca; o que falta é classe. */ body.m-equipe .linha-etiquetas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: var(--e3); } body.m-equipe .linha-acoes { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; margin-bottom: var(--e4); } body.m-equipe .respiro { margin-bottom: var(--e3); } body.m-equipe .respiro-largo { margin-bottom: var(--e4); } body.m-equipe .respiro-topo { margin-top: var(--e3); } body.m-equipe .respiro-topo-largo { margin-top: var(--e5); } /* Cor no número do cartão. NÃO usar `.sinal` para isso: `.sinal` é um cartão inteiro definido no * shell (sem escopo de módulo), e aplicá-lo dentro de `.card` desenha uma caixa dentro da caixa. * É a mesma família de colisão que a unificação de 17/08 teve que resolver com escopamento. */ body.m-equipe .card strong.bom { color: var(--sinal-bom); } body.m-equipe .card strong.ruim { color: var(--sinal-ruim); } /* ---------------------------------------------------------------- lead scoring * Banda é classificação, não decoração: A é a única que ganha peso visual, porque é a única que * muda o que a pessoa faz hoje. B e C ficam legíveis e discretas, e D nem aparece na fila. * Sem `style=` inline aqui — a CSP descarta o atributo inteiro (ver nota no fim deste arquivo). */ body.m-equipe .banda-chip { display: inline-block; min-width: 20px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 2px; border: 1px solid var(--borda-forte); color: var(--tinta-2); background: none; vertical-align: baseline; } body.m-equipe .banda-chip.b-a { background: var(--marrom); border-color: var(--marrom); color: var(--claro); } body.m-equipe .banda-chip.b-b { background: var(--bege-2); border-color: var(--borda-forte); color: var(--tinta); } body.m-equipe .banda-chip.b-c { background: none; } body.m-equipe .banda-chip.b-d { border-style: dashed; color: var(--tinta-3); } body.m-equipe .escore-partes { font-size: 11.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; margin: 0; } body.m-equipe td.motivos { font-size: 12.5px; color: var(--tinta-2); line-height: 1.45; max-width: 380px; } body.m-equipe .celula-tags { max-width: 320px; font-size: 12.5px; color: var(--tinta-2); } body.m-equipe .celula-vazia { padding: var(--e4); } /* Ficha do contato: um cartão por oferta, a prioritária destacada. */ body.m-equipe .escores { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e2); margin-bottom: var(--e4); } body.m-equipe .escore-cartao { border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e3); background: var(--branco); } body.m-equipe .escore-cartao.prioritaria { border-color: var(--borda-forte); box-shadow: var(--sombra); } body.m-equipe .escore-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } body.m-equipe .escore-produto { font-weight: 600; font-size: 14px; } body.m-equipe .escore-valor { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; margin-left: auto; } body.m-equipe .motivos-lista { list-style: none; padding: 0; margin: var(--e2) 0 0; display: flex; flex-direction: column; gap: 3px; } body.m-equipe .motivos-lista li { font-size: 12.5px; color: var(--tinta-2); line-height: 1.4; } /* ---------------------------------------------------------------- resgate dos estilos inline * 28/08/2026. Continuação da limpeza: `style="..."` nunca funcionou nesta plataforma (CSP * `style-src 'self'`, sem `unsafe-inline` — o navegador descarta o atributo inteiro). As classes * abaixo são o que aqueles atributos QUERIAM fazer, agora numa folha de estilo, que é o único * lugar de onde a CSP aceita estilo. */ /* Fila de pílulas dentro de `.filtros`. O `.filtros` é flex com `align-items: flex-end` e gap * grande, pensado para pares rótulo+campo; uma fila de pílulas quer gap curto e nada de baseline. */ body.m-equipe .pilulas { display: flex; gap: 6px; flex-wrap: wrap; } /* A barra de filtro da linha do tempo não tem rótulo nem campo — só pílulas. Sem isto ela fica * com a altura de um formulário que não existe. */ body.m-equipe .filtros.compacta { padding: 10px var(--e4); } /* A contagem ao lado do nome do funil. Era `opacity:.6`, que sobre a pílula ativa (texto claro no * marrom) derrubaria o contraste para 1,3:1. Aqui a hierarquia vem de peso e tamanho, e a cor * continua sendo a da pílula — funciona igual nos dois estados. */ body.m-equipe .pilula .conta { font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; } /* Bloco de alerta da tela Agora. `.cartao.perigo` só existia no módulo Avisos, então aqui o * cartão de "o agente precisa de conserto" nunca teve nada que o distinguisse de um cartão comum * — a borda vermelha morava no atributo inline. O vermelho é o `--vinho` da paleta, não o * `#c0392b` solto que estava no HTML. */ body.m-equipe .cartao.perigo { background: var(--sinal-ruim-fundo); border-color: var(--terracota-clr); border-left: 6px solid var(--vinho); padding: var(--e3) var(--e4); gap: var(--e2); } /* Lista de falhas dentro de `.erro`. O horário de cada falha é metadado: recua por tamanho, não * por opacidade — a caixa já é vermelha e clarear o texto ali custa contraste. */ body.m-equipe .lista-erros { margin: var(--e2) 0 0; padding-left: 18px; } body.m-equipe .lista-erros .quando { font-size: 12.5px; } body.m-equipe .celula-vazia { padding: var(--e4); } body.m-equipe .texto-ruim { color: var(--sinal-ruim); } /* Recuo da subtarefa na visão em lista: era `padding-left: 14 + nivel*22` calculado no template. * A árvore do ClickUp raramente passa de dois níveis; o template limita em 6. */ body.m-equipe .linha-tarefa.recuo-1 { padding-left: 36px; } body.m-equipe .linha-tarefa.recuo-2 { padding-left: 58px; } body.m-equipe .linha-tarefa.recuo-3 { padding-left: 80px; } body.m-equipe .linha-tarefa.recuo-4 { padding-left: 102px; } body.m-equipe .linha-tarefa.recuo-5 { padding-left: 124px; } body.m-equipe .linha-tarefa.recuo-6 { padding-left: 146px; } /* Cor do avatar de membro. Antes vinha de `cu_membros.cor` (hex escolhido por cada pessoa no * ClickUp) aplicado inline — ou seja, nunca apareceu: todos os avatares sempre foram * `--tinta-2`. Hex de terceiro não cabe numa folha estática, e o do ClickUp nem sempre teria * contraste com o texto branco em cima (`#ff897f` não tem). * * A cor passa a sair do id da pessoa (ver `corAvatar` em server.js) sobre esta paleta fechada: * seis tons da casa, todos conferidos contra `--claro` em WCAG AA — o menor é 5,4:1. Estável, e * não muda quando alguém troca o avatar no ClickUp. */ body.m-equipe .avatar.c1 { background: var(--marrom); } body.m-equipe .avatar.c2 { background: var(--vinho); } body.m-equipe .avatar.c3 { background: var(--terracota-esc); } body.m-equipe .avatar.c4 { background: var(--tinta); } body.m-equipe .avatar.c5 { background: var(--tinta-2); } body.m-equipe .avatar.c6 { background: var(--sinal-bom); } /* ============================================================================================ * 4. RECONCILIAÇÃO * * Os dois sistemas nasceram da mesma paleta, mas com hexadecimais e nomes de variável * diferentes: o terracota era #B4552F de um lado e #B45B3E do outro, o sálvia #6B7C64 e #6E8168, * a borda #E3DCD0 e #E3DACB. Diferença pequena demais para alguém apontar, grande o bastante * para o sistema parecer dois ao trocar de aba. * * Este bloco realinha os tokens do módulo Avisos aos canônicos, e corrige o punhado de regras em * que a variável carregava DOIS significados ao mesmo tempo. Vem por último de propósito: é a * última palavra sobre cor. * * 21/08/2026 — identidade nova (ver topo de shell.css): os valores abaixo foram atualizados pra * paleta terracota/vinho/marrom/camel do preview institucional. `--tinta`, que este módulo já * usava com esse nome, mudou de valor mas não de papel. `--terracota` do Avisos aponta pra * variante ESCURA (a mesma usada em texto no resto da plataforma): o texto de botão e link deste * módulo é pequeno, e o terracota puro da marca (#CF7329) reprova o 4,5:1 da WCAG AA nesse * tamanho — só passa em borda, ícone e superfície grande. */ body.m-avisos { --terracota: #A83407; --terracota-suave:#FBEAEA; --salvia: #6E8168; --salvia-suave: #DCE4D8; --creme: #FFFFFF; --creme2: #FFFFFF; --tinta: #33261E; --texto-suave: #5C4A3E; --texto-mudo: #6B5C50; --borda: #E7D6BE; --radius: 12px; /* `--verde` NÃO vira marrom, apesar de ser tentador para uniformizar o visual. Ele carregava * duas funções na folha antiga: cor de interface (fundo do cabeçalho, botão primário, número * grande) e SINAL DE SUCESSO (`.envio-ok`, `.situacao-ativo`, `.st-agendado`). As funções de * interface passaram para o shell e para as regras logo abaixo; a de sinal fica, e por isso o * verde continua verde. Trocá-lo apagaria a diferença entre "enviado" e "falhou" sem que * nenhuma tela acusasse erro. */ } /* Botão primário: era verde-escuro no módulo Avisos e terracota no da Equipe. Passa a ser um só — * o mesmo marrom escuro que o shell usa no botão de login e o institucional usa no dele. Branco * sobre terracota puro dá só 3,42:1 (reprova texto normal); sobre este marrom dá 8,46:1. */ body.m-avisos .botao.primario { background: var(--marrom); border-color: var(--marrom); color: #fff; } body.m-avisos .botao.primario:hover { background: #6B2F00; border-color: #6B2F00; filter: none; } /* Número grande: tinta nos dois módulos. Verde aqui competia com o verde de sinal. */ body.m-avisos .metrica .numero { color: var(--tinta); } /* Sinal de entrega: passa a usar o token semântico, agora que `--verde` não é mais cor de * interface. Mesmo tom exato do "bom" do módulo da Equipe. */ body.m-avisos .envio-ok { color: var(--sinal-bom); } body.m-avisos .envio-erro { color: var(--sinal-ruim); } /* Cartão: os dois módulos tinham raio e sombra próprios. Iguala a forma, sem tocar no conteúdo. */ body.m-avisos .cartao { border-radius: var(--r); box-shadow: var(--sombra); border-color: var(--borda); background: var(--branco); } /* Piso de legibilidade da plataforma. As duas folhas tinham textos abaixo de 13px em nota de * rodapé, etiqueta e célula de tabela — é ferramenta lida o dia inteiro, e o que não se lê não * informa. Nada aqui sobe tamanho de título; só levanta o chão. */ body.m-avisos small, body.m-avisos .nota, body.m-avisos .detalhe { font-size: 13.5px; } body.m-equipe .nota, body.m-equipe .card .nota { font-size: 13.5px; } /* Contraste: os dois módulos redefinem o tom "apagado" dentro do próprio escopo, e por isso o * valor do `:root` não os alcança. A varredura de contraste (playwright, WCAG AA) apontou mais de * mil elementos em 3,33:1 — rótulo de cartão, nota de rodapé, contador de lista. Corrigido aqui, * no token, e não elemento a elemento: nenhuma medida de layout muda, o texto só escurece. * * 21/08/2026: o módulo Equipe passou a definir `--tinta-3` (não mais `--marrom-3`) já no valor * corrigido (#6B5C50) na própria folha de origem — a linha que existia aqui virou redundante e * saiu. `--texto-mudo` do Avisos continua precisando do ajuste porque a folha de origem dele * ainda não foi tocada. */ body.m-avisos { --texto-mudo: #6B5C50; } /* Os últimos 14 casos de contraste, todos entre 4,16 e 4,45:1 — a um passo do mínimo de 4,5:1. * São contadores e notas em 10,5–12px, e em tamanho pequeno a exigência é a mesma do texto * normal. Passam a usar o tom de texto de apoio, que já é o tom das etiquetas ao lado. * `--marrom-2` virou `--tinta-2` na renomeação de 21/08 — atualizado junto, senão a variável não * resolve e o navegador cai no herdado em silêncio. */ body.m-equipe .coluna-topo .conta, body.m-equipe .dia .mais, body.m-equipe .dia .marca.feita { color: var(--tinta-2); } /* `.nota` dentro de cartão e de faixa de estado vinha em 12,5px e escapava do piso definido no * shell por ser mais específica. Meio ponto de fonte, nenhuma medida de layout muda. */ body.m-equipe .card .nota, body.m-equipe .faixa-estado .nota { font-size: 13.5px; } /* Piso de 12,5px para o metadado das tabelas densas. A varredura encontrou 874 elementos abaixo * de 12px, concentrados em poucas classes: identificador de tarefa (10,5px), meta de linha * (11,5px), etiqueta de status (11,2px) e cabeçalho de tabela (11px). São textos que a equipe lê * o dia inteiro para decidir o que abrir — pequenos demais para o trabalho que fazem. * * `.avatar` fica de fora de propósito: são as INICIAIS dentro do círculo de foto, dimensionadas * para caber no círculo. Aumentar ali estoura a bolha, e ninguém lê inicial como texto. */ body.m-equipe .id, body.m-equipe .meta, body.m-equipe .local, body.m-equipe .status, body.m-equipe .repeticao, body.m-equipe th, body.m-avisos th { font-size: 12.5px; } body.m-avisos .etiqueta, body.m-avisos .etiqueta-fraca, body.m-avisos .etiqueta-aviso, body.m-avisos .etiqueta-erro { font-size: 12.5px; } /* Link tem UMA cor na plataforma. O módulo de Avisos pintava o link dentro de `.nota` de sálvia * (#6E8168), que além de ser um segundo idioma visual dá 4,13:1 sobre o creme e reprova em AA. * * A regra é ancorada em `.pagina` — o CORPO da tela — e não no `body`. Sem essa âncora ela também * alcançava o cabeçalho, e o nome da usuária (`.quem`, que é um link) virava terracota escuro * sobre o marrom do topo: 2,2:1, pior do que o problema que eu estava corrigindo. Regra de link * escrita larga demais é assim: conserta a tela e quebra a moldura. * * 21/08/2026: cor atualizada pra bater com o link do shell (--terracota-esc / hover escurecido). */ body.m-avisos .pagina a, body.m-avisos .pagina .nota a { color: #A83407; } body.m-avisos .pagina a:hover, body.m-avisos .pagina .nota a:hover { color: #8A2C06; } /* Contador "+ N nesta etapa" no funil: 4,45:1, a um passo do mínimo. */ body.m-equipe .mais { color: var(--tinta-2); }