/* ============================================================================
   INTER, AUTO-HOSPEDADA           (ORION 06/09, 2a etapa da ordem do ALTAIR)

   Antes vinha por <link> do Google Fonts. Dois problemas com isso:
     1. o Nova e app de MESA e pode rodar sem internet. Link externo falha em
        SILENCIO -- a pilha de reserva sempre existe, entao nao ha erro, so uma
        fonte diferente. E a reserva no Windows e 'Segoe UI', que o Wilker
        proibiu nominalmente.
     2. era dependencia de terceiro num caminho critico de aparencia.
   Agora o arquivo mora aqui, como o Oblivion faz (app.css 19-26: @font-face
   apontando pro proprio .woff2). Inter e licenca OFL, auto-hospedar e previsto.

   Dois subsets em vez do arquivo unico do Oblivion: 'latin' cobre o portugues
   inteiro (os acentos vivem no Latin-1), e 'latin-ext' entra por causa de nome
   de cliente com caractere fora dele. O navegador baixa so o que a pagina usar.
   Fonte variavel: um arquivo serve os pesos 100 a 900, inclusive o 650 que o
   Oblivion usa em titulo e KPI.
   ============================================================================ */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fontes/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fontes/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ========================================================================
   NOVA — front (tema escuro + layout fiel ao ClickUp), 23/08
   rail | sidebar | centro (topbar + main) | painel de tarefa
   ======================================================================== */
:root{
  /* BUG (Wilker, 01/09, print real): o picker nativo do <input type=date/time> (o popup de
     calendario/relogio, nao o campo em si) abria em tema CLARO -- fundo branco, "setembro 2026"
     preto -- mesmo com color-scheme:dark ja declarado numa dezena de selectors espalhados pelo app
     (#compData incluso). O input em si respeita a propriedade; o POPUP (superficie nativa
     separada) em alguns Chromium so confia no color-scheme quando ele chega pelo :root/documento,
     nao so pelo elemento. Nao existia NENHUMA declaracao em :root/html neste app -- o app inteiro
     e escuro, sem alternancia de tema, entao declarar aqui e seguro e e o nivel que faltava. */
  color-scheme:dark;
  --bg:#0f0f12; --sidebar:#17171b; --rail:#0a0a0c; --surface:#1c1c21; --surface-2:#24242b;
  --tinta:#ececef; --tinta-2:#b4b4bd;--tinta-3:#8c8c8c; /* PENDENTE DO TEMA: cinza neutro, nao destoa do ClickUp (rgb(131,131,131) no mesmo nivel), mas o ClickUp medido esta em tema CLARO e a paleta do Nova tem vies azul (#75757f). Entra nos 222 pontos travados pelo tema.
     O-012 (07/09, ORION): valor corrigido de #888 pra #8c8c8c por FALHA DE CONTRASTE WCAG medida contra os 3 fundos escuros onde o token e usado como texto (formula de luminancia relativa).
     ANTES (#888, L=0.2461): contraste 5.40:1 sobre --bg(#0f0f12) [passa 4.5], 4.79:1 sobre --surface(#1c1c21) [passa, raspando], 4.35:1 sobre --surface-2(#24242b) [FALHA o minimo de 4.5:1 pra texto normal].
     DEPOIS (#8c8c8c, L=0.2624): contraste 5.69:1 sobre --bg, 5.05:1 sobre --surface, 4.59:1 sobre --surface-2 (agora passa os 3, com margem). Hierarquia preservada: --apagado(#75757f) < --tinta-3(#8c8c8c) < --tinta-2(#b4b4bd). */ --apagado:#75757f;
  --borda:rgba(255,255,255,.07); --borda-2:rgba(255,255,255,.12);
  /* --borda-3: variante REFORCADA de --borda-2 pra uso em BORDA DE CARD (Parte 4, O-012). --borda-2 puro
     (rgba(255,255,255,.12)) misturado sobre --surface(#1c1c21) rende luminancia efetiva 0.0390, contraste
     de 1.44:1 contra a superficie do card -- passa o piso de 1.4:1 mas raspando, sem folga real. --borda-3
     a .16 rende luminancia efetiva 0.0523, contraste 1.65:1 -- borda ainda perceptivel com folga. */
  --borda-3:rgba(255,255,255,.16);
  --roxo:#7b68ee; --roxo-2:#9683ff; --roxo-suave:rgba(123,104,238,.16);
  --verde:#2ecd6f; --amarelo:#ffb020; --vermelho:#e5484d; --azul:#4a9eff; --r:8px;/* RAIO DE MENU — TABELA, NAO REGRA. O ClickUp nao tem raio uniforme e nao tem regra deduzivel: o menu de
   acoes tem 246 de largura com raio 8 e o de status tem 247 com raio 12, um pixel de diferenca. Nao e
   largura, nem conteudo, nem profundidade, nem gatilho. Duas tentativas de generalizar ja cairam hoje:
   primeiro "o ClickUp usa 12" (tres amostras), depois "campo=12, acao=8" (cinco amostras, quebrada pela
   prioridade, que e campo e tem 8). Entao aqui vale UM VALOR POR SUPERFICIE MEDIDA, e superficie nova
   entra depois de medida — nao por analogia. Tabela que cresce e honesta; regra que generaliza e aposta.
     datas ........ 12      responsavel ... 12      status ....... 12
     prioridade .... 8      acoes da lista . 8                              (ALTAIR, 30/08) */
--r-menu:12px; --r-menu-acoes:8px; --r-lg:12px;
}
/* MOLDE DE CARD (O-012, ORION 07/09). Papel proprio, separado de --r (botao) e --r-lg (painel):
   --card-r e o raio do card, --card-sh a sombra fina do card. Qualquer card do app que seguir o
   molde consome estes tokens.
   PADDING, revisado 07/09 (segunda rodada, medicao real na tela da TRISUL): o padding vertical
   original (11px) media 22px pros dois lados contra 59px de texto de verdade (rotulo+valor+nota)
   -- quase um terco do card era ar. Vertical e horizontal viram tokens SEPARADOS de proposito:
   o horizontal (13px) nao custa altura e o texto do valor precisa dele pra nao encostar na borda;
   o vertical e o unico numero que sobra quando o card carrega so 3 linhas curtas, entao ele e o
   que cai. --card-pad continua existindo como atalho (`padding:var(--card-pad)`) pros cards que
   nao sao sensiveis a altura (recCard, docvDestaque, tpAtalho, finBusca). */
:root{--card-r:10px; --card-sh:0 1px 2px rgba(0,0,0,.35); --card-pad-y:7px; --card-pad-x:13px; --card-pad:var(--card-pad-y) var(--card-pad-x); --lista-lh:1.25;
  /* medido na tela real 08/09 (Playwright, TRISUL, 1920px): 74px com o padding/tipografia
     atuais. Base da lei PROPORCIONAL de espacamento entre cards (O-016 item 8). */
  --card-kpi-h:74px}

/* ══════════════════════════════════════════════════════════════════════════
   ESTADOS DE DADO: AUSENTE e APROXIMADO (ORION 08/09, motor de produtividade)
   Sem escopo .moonOblivion de proposito -- o motor e generico, serve qualquer
   departamento, dentro ou fora do visual Oblivion. --tinta-3 funciona nos dois
   porque --mo-steel ja e var(--tinta-3) desde a unificacao de cor da O-012.

   AUSENTE: nao ha fonte pra esse numero (ex.: ClickUp nao guarda historico de
   status, "parado ha X dias" nao tem de onde vir). NUNCA mostra zero, nunca
   mostra traco sozinho sem explicar -- os dois se confundem com "esta tudo
   bem" ou com dado real. O bloco fica PRESENTE (nao some, senao daqui a duas
   semanas alguem re-introduz um zero falso achando que e conserto), sem
   valor grande nenhum, e a CAUSA nomeada em texto onde o valor estaria.
   Uso: adicionar `dado-ausente` no card (`.kpi.dado-ausente`, `.card.dado-
   ausente`, etc) e escrever a causa no lugar do valor.
   O-087 (Wilker, 14/09): "odiei esse pontilhado, nao quero que usem nunca
   mais isso" -- a moldura tracejada MORREU (a regra `.dado-ausente{border-
   style:dashed;...}` que existia aqui foi REMOVIDA, nao so' desativada). O
   sinal de honestidade agora mora SO no texto (cor apagada + italico, 2
   regras abaixo, intocadas) -- ele reclamou do desenho, nunca do aviso;
   matar o aviso junto teria trocado feio por mentiroso.

   APROXIMADO: o numero existe mas e estimativa, nao exato (ex.: "saiu"
   derivado sem data exata de fechamento). Tem que ser DISCRETO -- e o
   oposto do ausente: nao pode gritar, senao um painel cheio de avisos vira
   ruido e o Wilker para de ler todos, inclusive os que importam. So um "~"
   na frente do valor e um sublinhado pontilhado com o motivo no title/tooltip.
   Uso: adicionar `dado-aproximado` no elemento do VALOR (nao no card
   inteiro -- so aquele numero e estimativa, o resto do card pode ser exato). */
.dado-ausente .val,.dado-ausente .cardValor{color:var(--tinta-3);font-size:15px;font-style:italic;font-weight:600;letter-spacing:0}
.dado-ausente .pe,.dado-ausente .finKpiSub{color:var(--tinta-3);font-style:italic}
.dado-aproximado{border-bottom:1px dotted var(--tinta-3);cursor:help}
.dado-aproximado::before{content:'~ ';color:var(--tinta-3);font-weight:600;font-style:normal}
*{margin:0;padding:0;box-sizing:border-box}
/* TRAVA DE SEGURANCA (Wilker, achou 2 svg de ~900px no painel de tarefa — ICO.link/checkCircle soltos
   sem span.tpIc por cima; svg sem width/height estica pro tamanho do PAI, nao do proprio conteudo).
   Baseline 16x16 pra qualquer svg sem width — de proposito CEDO no arquivo e com a MESMA especificidade
   de ".algumaClasse svg" (nao um seletor de ID, que venceria por especificidade e atropelaria tamanhos
   customizados de verdade, tipo os 28px da barra da descricao): qualquer regra ".x svg{width:Ypx}"
   declarada depois deste ponto continua vencendo no empate de especificidade, por ordem — so o svg que
   NINGUEM vestiu cai aqui. Nunca mais um icone pode esticar sozinho no app inteiro. */
svg:not([width]){width:16px;height:16px;flex:0 0 auto}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;background:var(--bg);color:var(--tinta);height:100vh;overflow:hidden;font-size:13px;-webkit-font-smoothing:antialiased}
#app{display:flex;height:100vh}
/* largura do rail: token porque DOIS lugares dependem dela — o proprio rail e o calc dos 20% da busca,
   que corre sobre a barra e a barra comeca depois do rail. Numero repetido a mao derivaria em silencio. */
:root{--rail-larg:64px}
/* GUTTER da Lista: a calha a esquerda e a direita de TODA linha, cabecalho, grupo e rodape.
   Era 48 escrito a mao em quatro regras e mais duas vezes dentro da conta do piso. Vira token porque
   e ancora de posicao: as notas de medicao passam a citar --gutter em vez de um x cru, e envelhecem
   junto com o codigo em vez de contra ele. */
:root{--gutter:48px}
/* trilha da ULTIMA coluna (o botao Adicionar no cabecalho e o menu ... de cada linha). Medida ALTAIR 30/08:
   no ClickUp a mesma trilha de 64 governa os dois — cu-task-list-header-settings no cabecalho e
   cu-task-row__menu-placeholder na linha, ambos em x 1774 com 64 de largura. Aqui eram 90 escritos a mao
   em quatro lugares: o fallback do grid, a trilha montada no JS e a conta do piso da linha. */
:root{--col-acoes:64px}
/* largura PADRAO da barra lateral. Medida no ClickUp (256, era 245 aqui). Vira token porque o numero vivia
   em tres lugares — o fallback do CSS, o padrao do duplo-clique e o calculo do arrasto — e o arrasto ainda
   descontava o rail com um 62 escrito a mao, que ficou errado no instante em que o rail virou 64. */
/* O-069 (14/09), Wilker: "altura única pra tudo" -- unificado (.lista/.espacoTit/.pastaTit todos
   min-height:28px, .espacoFilhos > .lista de 40px removida). Sobrou 1 de 150 nomes 3px curto pra
   caber numa linha so ("Domínios & hospedagens"), sem espaço pra crescer no min-height (a lei e
   altura única, nao altura elástica por nome). Wilker decidiu: alarga a lateral em vez de
   encurtar o nome. 256->264px -- 8px de folga sobre os 3px que faltavam (o próximo item mais
   apertado tem 14px de sobra, entao 8px nao cria um novo estouro em cascata). */
:root{--sidebar-w:264px}
/* ESCALA DE ESPACAMENTO (card). LEI: o gap ENTRE cards vizinhos numa grade e sempre MAIOR que o
   padding de DENTRO do card. Card novo nasce consumindo estes tokens; numero solto em gap ou
   padding de card vira defeito. --sp-entre-cards cobre o padding de card pequeno tipo KPI (11-13px)
   e o padding do .card padrao (16px); veio calibrado acima dos dois em vez de token por caso. */
:root{--sp-linha:8px;--sp-card-interno:12px;--sp-entre-cards:18px;--sp-entre-secoes:24px}
/* PISO DA LINHA. Abaixo dele as barras param de encolher e a lista transborda por dentro (o ClickUp faz igual, e trava em 990).
   Era o literal 966 repetido em TRES regras, e ele nao e um numero: e a soma das colunas + o gutter. Escrito a mao,
   mudar uma largura de coluna deixava o piso valendo pelo tamanho antigo, em silencio e em tres lugares diferentes.
   Aqui as parcelas ficam a vista e a soma nao pode errar. Se uma coluna mudar, muda a parcela — nao o total. */
:root{--nome-min:140px}   /* A PARCELA DELIBERADA — e o piso que REALMENTE vale hoje, nao o que se pretendia.
     ALTAIR mediu a cadeia do ClickUp: ele nao declara piso na linha, declara min-width:350 na coluna Nome e deixa a soma EMERGIR.
     Ao refazer a conta com as colunas de VERDADE apareceu um defeito nosso: o piso de 966 foi somado com 150/150/160/120, que sao
     o fallback MORTO do --gridcols. O nova.js escreve 160 uniforme em todas (medido 29/08), entao as colunas custam 730+96=826 e o
     Nome fica com 140 no piso, nao com os 200 que o conserto de 25/08 pretendia. Escrevi 140 porque e o que acontece; honrar os 200
     sobe o piso pra 1026 e faz a lista transbordar mais cedo — mudanca de comportamento, entao e escolha, nao correcao de aritmetica.
     E NAO trocar por 350: o 350 do ClickUp convive com 4 colunas (160/160/160/64) e o Nova tem 5. O numero depende da decisao
     de 3-vs-5 colunas, que e do Wilker. Enquanto ela nao vem, mexer aqui e importar o valor sem a premissa. */
:root{--linha-min:calc(var(--nome-min) + 160px + 160px + 160px + 160px + var(--col-acoes) + calc(var(--gutter) * 2))} /* Nome + as 4 colunas de campo (160 uniforme, como o ClickUp) + Adicionar + padding 48*2 */
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}

/* LADO DIREITO (superbar + baixo) */
#direita{flex:1;display:flex;flex-direction:column;min-width:0}
#baixo{flex:1;display:flex;min-height:0;position:relative}

/* BARRA SUPERIOR GLOBAL */
#superbar{height:40px;flex:0 0 40px;display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:none;background:var(--sidebar)} /* medido ALTAIR 29/08: ClickUp 40 de altura e SEM borda inferior. Os 8px a mais empurravam TUDO abaixo (barra de views, cabecalho da lista, 1a linha) — varios desvios de posicao y eram arrasto deste, nao defeito proprio */
.spEsq{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.wsBtn{display:flex;align-items:center;gap:8px;height:28px;box-sizing:border-box;background:none;border:none;color:var(--tinta);font-size:14px;font-weight:600;padding:0 8px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* nome do workspace 14/600 (medido) */
.wsBtn:hover{background:var(--surface)}
.wsDot{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--roxo),#b06dff);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px} /* medido ALTAIR: 18x18 no ClickUp */
.wsCaret{color:var(--apagado);font-size:10px}
.spCentro{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;max-width:760px;margin:0 auto}
.spSeta{width:28px;height:28px;border-radius:6px;background:none;border:none;color:var(--apagado);font-size:17px;display:inline-flex;align-items:center;justify-content:center}
.spSeta svg{width:16px;height:16px}
.tpTopo button svg{width:16px;height:16px}
.tpStatusPill svg{width:13px;height:13px;vertical-align:-2px}
.calNav svg{width:16px;height:16px}
.avSeta svg{width:14px;height:14px}
.spSeta:hover{background:var(--surface);color:var(--tinta)}
.spPesquisa{flex:0 1 calc((100vw - var(--rail-larg)) * .2);max-width:360px;min-width:176px;height:28px;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--borda);border-radius:666px;padding:0 12px;color:var(--apagado);font-size:14px;cursor:text} /* PILULA (radius 666), altura 28, fonte 14. A cor NAO viaja (o branco do ClickUp e tema claro): no escuro o equivalente da superficie elevada e --surface-2.
   LARGURA: o 345 fixo era um retangulo anotado como se fosse a medida da peca. O ClickUp usa `flex:0 1 20%; max-width:360; min-width:176` — ela RESPIRA com a janela.
   Fixo em 345 divergia com SINAL TROCADO: 15 menor a 1920 e 59,4 MAIOR a 1440. Trocar 345 por 360 acertaria uma tela e pioraria a outra: nao era o numero, era a formula.
   Os 20% correm sobre a barra. A barra do ClickUp e a janela inteira; a do Nova comeca depois do rail — por isso o calc desconta o rail em vez de fingir largura cheia.
   O residuo levou a ALTAIR a medir a ORIGEM e achar a causa: os dois empilham em ordens OPOSTAS. No ClickUp a barra e full-width e o rail nasce sob ela; no Nova o rail e full-height e a barra nasce ao lado.
   Inverter isso e decisao de esqueleto do Wilker, nao conserto. Enquanto nao for decidido, o desconto do rail mantem o MECANISMO certo e deixa o desvio visivel. */
.spPesquisa .lupa{font-size:13px}
.spKbd{margin-left:auto;font-size:12px;font-weight:500;background:none;padding:0;border-radius:0;color:var(--apagado)} /* medido ALTAIR TR-05: no ClickUp o atalho e TEXTO PURO (sem fundo, radius 0, 12px) — aqui o Nova punha cartao onde ele nao poe */
.spChatsIA{display:flex;align-items:center;gap:6px;height:20px;box-sizing:border-box;background:var(--bg);border:1px solid var(--borda);border-radius:666px;padding:0 14px;color:var(--tinta-2);font-size:14px;font-weight:500;white-space:nowrap} /* medido ALTAIR TR-40: PILULA (radius 666) e altura 20 — mesmo caso da busca, e formato e nao ajuste de 2px. Tipografia remedida 29/08: 14/500 no ClickUp. O 12,5/400 antigo nao era so divergencia, era tamanho ORFAO — nenhuma outra peca da barra usava 12,5 */
.spChatsIA:hover{background:var(--surface)}
.spSpark{color:var(--roxo-2)}
.spDir{display:flex;align-items:center;gap:2px;justify-content:flex-end} /* medido ALTAIR: passo entre os 4 icones 26 no ClickUp contra 32 aqui. As pecas ja batem (24x24, SVG 16); so o espacamento divergia — 24+2=26 */
.spIcone{width:24px;height:24px;border-radius:6px;background:none;border:none;color:var(--apagado);font-size:15px} /* medido ALTAIR TR-41: 24x24 (era 28; antes disso 30) */
.spIcone:hover{background:var(--surface);color:var(--tinta)}
.spAvatar{width:24px;height:24px;border-radius:666px;background:#d94a6a;color:#fff;font-size:12px;font-weight:700;border:none} /* avatar da conta: 24x24 REDONDO. Remedido pela ALTAIR 29/08 na cadeia inteira: quem PINTA e o __dcb_color_var (24x24 radius 666); o 43,8x32 e o BOTAO em volta, nao o avatar. A distincao antiga ("conta quadrado, tarefa redondo") NAO se sustenta: os de tarefa sao 16x16 radius 666 — muda o TAMANHO, nao o formato. */

/* RAIL */
#rail{width:var(--rail-larg);flex:0 0 var(--rail-larg);background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:8px}
.railLogo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--roxo),#b06dff);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
/* Motor Departamento (05/09, pedido do Wilker: 12 departamentos + universais nao cabem mais em
   1080p sem rolar): .railIcons ganha scroll proprio (Logo e Convidar ficam FORA, fixos) --
   min-height:0 e o gotcha classico de flex-column pra um filho com overflow conseguir encolher e
   rolar de verdade, sem isso o container so estoura o pai. Botoes tambem encolheram (padding,
   icone, rotulo) pra caber mais linhas antes de precisar rolar. */
.railIcons{display:flex;flex-direction:column;gap:1px;flex:1;min-height:0;width:100%;align-items:center;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--borda-2) transparent}
.railIcons::-webkit-scrollbar{width:4px}
.railIcons::-webkit-scrollbar-thumb{background:var(--borda-2);border-radius:4px}
.railIcons::-webkit-scrollbar-track{background:transparent}
.railBtn{width:50px;background:none;border:none;color:var(--apagado);display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;border-radius:8px;transition:all .15s;flex:0 0 auto}
.railBtn .ri{font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.railBtn .ri svg{width:16px;height:16px}
/* ALTAIR (05/09, medicao real): rotulo longo ("Administrativo", "Conhecimento") ficava mais largo
   que o botao e cortava na borda -- .railBtn tem align-items:center (nao stretch), entao o .rl
   nao herdava a largura do pai sozinho; precisa de width:100% explicito pro ellipsis ter uma
   caixa de verdade pra cortar dentro. */
.railBtn .rl{font-size:8px;letter-spacing:.2px;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.railBtn:hover{color:var(--tinta-2);background:rgba(255,255,255,.04)}
.railBtn.ativo{color:#fff}
.railBtn.ativo .ri{color:var(--roxo-2)}
.railConvidar{margin-top:auto;color:var(--apagado)}

/* SIDEBAR */
#sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--sidebar);border-right:1px solid var(--borda);display:flex;flex-direction:column;overflow:hidden}
/* ALTAIR 30/08: com a barra fechada, o botao "Fechar barra lateral" continuava VISIVEL em x146, inerte,
   ao lado do "Abrir" em x83 — dois botoes com rotulos opostos na mesma faixa, um apontando para uma acao
   impossivel. Causa: width:0 nao esconde o conteudo, so zera a caixa; os filhos vazavam para fora.
   overflow:hidden fecha a janela junto com a largura. */
#app.sb-oculta #sidebar{width:0;flex-basis:0;border-right:none;overflow:hidden}
#app.sb-oculta #sbResize{display:none}
#app.sb-oculta #sbReabrir{display:flex}
/* O-091 item 2 (Wilker/ALTAIR, 14/09): a conta dos 40px documentada aqui em O-083 MORREU junto com
   a causa dela -- `#sbReabrir` deixou de ser `position:absolute` fora do fluxo (era por isso que
   existia padding compensatorio nesta regra). Agora e' filho normal do flex, dentro de `.tbEsq`,
   o proprio `gap` dela empurra `#tbTitulo`, sem numero nenhum aqui pra derivar ou pra apodrecer.
   Ver `#sbReabrir` em nova.css pro mecanismo novo. */
#sbHead{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px}
#sbTitulo{font-size:15px;font-weight:600}
#sbAdd{width:24px;height:24px;border-radius:6px;background:none;border:none;color:var(--tinta-2);font-size:16px}
#sbAdd:hover{background:var(--surface-2)}
#sbBusca{margin:0 12px 8px;display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--borda);border-radius:var(--r);padding:7px 11px}
#sbBusca .lupa{color:var(--apagado);font-size:13px}
#busca{flex:1;background:none;border:none;color:var(--tinta);outline:none;font-size:12.5px}
#sbCorpo{flex:1;overflow-y:auto;padding:4px 8px 16px}
.navItem{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:var(--tinta-2);font-size:14px;cursor:pointer}
/* TIPOGRAFIA DA NAVEGACAO. ALTAIR mediu 30/08: o ClickUp usa 14px/400 em TODO item de navegacao, e a arvore
   do Nova ja estava certa — espaco, pasta e lista todos em 14. Divergiam so QUATRO elementos, os de fora da
   arvore: os itens soltos (Todas as tarefas, Caixa de entrada), o titulo Favoritos e o rotulo da lista.
   Consertado por CLASSE e nao por lista de elementos: a medicao dela foi feita com a barra no estado em que
   ela abre, e se a arvore carregar mais ao rolar — como a Lista faz — haveria item que ela nao viu.
   Classe pega o que existe agora e o que aparecer depois. Os rotulos do rail (9px) ficam FORA: o ClickUp tem
   os proprios e eles nao entram nesta conta. */
#sbCorpo .navSub{font-size:14px}
#sbCorpo .emLista{font-size:14px}
.navItem:hover{background:var(--surface);color:var(--tinta)}
.navItem.ativo{background:var(--roxo-suave);color:#fff}
.navItem .ic{font-size:14px;width:16px;height:16px;text-align:center;color:var(--apagado);display:inline-flex;align-items:center;justify-content:center}
.navItem .ic svg{width:16px;height:16px}
.viewAba .vi svg,.viewAdd .vi svg{width:15px;height:15px}
.ctrlIc svg,.ctrlIcone svg{width:15px;height:15px}
.avIc svg{width:15px;height:15px}
.tpIc svg{width:15px;height:15px}
.spSpark svg{width:14px;height:14px;vertical-align:-2px}
.lupa svg{width:14px;height:14px;vertical-align:-2px}
/* VIEW TABELA */
.tab{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px} /* ALTAIR TR-43: sem table-layout:fixed a tabela usa layout AUTOMATICO e o navegador distribui a largura pelo CONTEUDO, ignorando o width. O arrasto da .tabResize escrevia style.width=294px no .tabTh (JS correto, medido durante o arrasto) e a coluna continuava em 214 — o inline chegava e nao pintava. Com fixed, a largura declarada manda. */
/* A6 (AREA5): pin de fixar coluna, STUB */
.tabPin{display:inline-flex;align-items:center;color:var(--apagado);cursor:pointer;margin-left:4px}
.tabPin:hover{color:var(--tinta-2)}
.tabPin svg{width:13px;height:13px}
.tab th{text-align:left;font-weight:500;color:var(--apagado);font-size:11px;height:32px;padding:0 14px;border-bottom:1px solid var(--borda);position:sticky;top:0;background:var(--bg);z-index:1}
.tab td{height:32px;padding:0 14px;border-bottom:1px solid var(--borda);border-right:1px solid var(--borda);color:var(--tinta-2)}
/* Nome FIXO 214px (medido no ClickUp): nao estica; a sobra vai toda pra coluna-preenchimento.
   Antes tinha min-width:280 e absorvia o vazio, esparramando o nome pela tela quando a Grade nasce pobre. */
.tab td.tabNome,.tab th.tabNome{color:var(--tinta);font-weight:500;width:214px;padding-left:6px;font-size:14px} /* ALTAIR TR-43: min/max-width 214 TRAVAVAM o redimensionamento — o arrasto escrevia style.width=294 no th e o max-width vencia. width:214 fica como PADRAO (o inline do usuario sobrepoe); o piso agora e o min-width generico do .tabTh */
.tab td.tabNome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab tr[data-id]{cursor:pointer}
.tab tr[data-id]:hover td{background:var(--surface)}
.tabStatus{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;text-transform:uppercase;padding:3px 9px;border-radius:5px}
/* A7 (AREA5): mesmo tamanho ja usado pro grupoPillIco dentro de pilula pequena (.kbTit) */
.tabStatusIco{width:14px;height:14px}
.tabStatusIco.cheio{width:13px;height:13px}
.tabStatusIco.cheio::after{left:2.5px;top:-.5px;width:3.5px;height:7px}
/* TABELA-10: wrapper vira o scroller real (altura limitada) pro cabecalho sticky grudar nele, nao no #main */
/* O-081 volta 1 (14/09): moldura unica, 4px->28px. Provado por DOM (nao pelo nome, pedido do
   Maestro): `#tabelaWrap` e IRMAO de `#kanban`/`#calWrap`/`#cronoWrap` dentro de `#viewConteudo`
   (renderView(), linha ~2836), que tem padding ZERO proprio -- cada view-type paga a propria
   moldura, sem nenhum ancestral pagando por ele. NAO e container interno (a suspeita original),
   e uma moldura de tela como as outras, so com um numero pequeno demais sobrevivendo sozinho. */
#tabelaWrap{overflow:auto;padding:0 28px;height:calc(100vh - 185px)}
.navItem .badge{margin-left:auto;background:var(--roxo);color:#fff;font-size:10px;padding:1px 7px;border-radius:999px}
.navSub{margin-left:26px}
.navSep{height:1px;background:var(--borda);margin:10px 12px}
.navSepFino{height:1px;background:var(--borda);margin:4px 12px}
.cadeado{margin-left:auto;font-size:10px;opacity:.5}
.navLabel{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--apagado);padding:8px 12px 4px;display:flex;align-items:center;justify-content:space-between}
.navLabel button{background:none;border:none;color:var(--apagado);font-size:14px}
/* H6/H8 (AREA2): secao Canais dentro do espaco */
.navCanaisSec{padding-left:20px}
.navCanaisTit{font-size:11px;color:var(--apagado);padding:6px 10px 2px}
.navCanalAdd{font-size:13px;color:var(--apagado)}
/* H9 (AREA2): rodape da arvore, Convidar + indicador de plano */
.navArvRodape{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;margin-top:4px;border-top:1px solid var(--borda);font-size:12px}
.navArvConvidar{display:flex;align-items:center;gap:6px;color:var(--tinta-2);cursor:pointer}
.navArvConvidar:hover{color:var(--tinta)}
.navArvConvidar svg{width:14px;height:14px}
.navArvRascunho{color:var(--apagado)}
.espacoTit,.pastaTit{display:flex;align-items:center;gap:7px;padding:0 10px;min-height:28px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--tinta-2)} /* altura 30 e fonte 14/400 UNIFORMES (medido): a hierarquia vem do recuo e do icone, nao de encolher fonte por nivel. O-065 (13/09): height virou min-height -- nome comprido tem que QUEBRAR (ver .espNome/.pastaNome abaixo), nunca cortar; nome curto (99% dos casos) continua exatamente nos mesmos 28px de sempre. */
.espacoTit{font-weight:400}
.espacoTit:hover,.pastaTit:hover{background:var(--surface);color:var(--tinta)}
.espacoTit .dot{width:16px;height:16px;border-radius:5px;background:var(--roxo);display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#fff;flex:0 0 16px}
.tri{color:var(--apagado);transition:transform .15s;width:12px;display:inline-flex;align-items:center;justify-content:center}
.tri svg{width:10px;height:10px} /* caret de expandir da sidebar = SVG do kit (era o glifo ▸), igual ao tCaret da linha */
/* `.espaco.aberto>.espacoTit .tri,.pasta.aberto>.pastaTit .tri` morta apagada daqui (ORION 09/09)
   -- identica, valor por valor, a que sobrevive em ~3663 (NAV-02). So peso morto duplicado. */
.espacoTit .add,.pastaTit .add{margin-left:auto;opacity:0;font-size:15px;color:var(--apagado)}
.espacoTit:hover .add,.pastaTit:hover .add{opacity:1}
.espacoFilhos,.pastaFilhos{display:none}
.espaco.aberto>.espacoFilhos,.pasta.aberto>.pastaFilhos{display:block}
.pasta>.pastaTit{padding-left:22px}
.lista,.favItem{display:flex;align-items:center;gap:8px;padding:0 10px 0 41px;min-height:28px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--tinta-2)} /* NOVA (medido ALTAIR 29/08): altura 28 (o comentario antigo dizia 30 e a regra sempre foi 28 — comentario errado, codigo certo), fonte 14/400, texto em x=133, MESMO x da .pasta, entao o alinhamento pretendido funciona. SEM PAR NO CLICKUP AINDA: a sidebar dele esta colapsada (5px) e nao abre por script — item da fila do Wilker, destrava os 223 pontos de NAV. Os valores aqui sao coerencia interna ate esse par existir — o espacador do chevron. O-065 (13/09), ALTAIR mediu "Cobranças em Abe..." cortado com reticencias: height virou min-height, nome comprido quebra em 2 linhas em vez de cortar (lei do Wilker de 05/09, sem excecao); nome curto continua nos mesmos 28px. */
.lista:hover,.favItem:hover{background:var(--surface);color:var(--tinta)}
.lista.ativa,.favItem.ativa{background:var(--roxo-suave);color:#fff}
.lista .li,.favItem .li{color:var(--apagado);font-size:12px}
.lista .cont,.favItem .cont{margin-left:auto;font-size:10px;color:var(--apagado)}
/* O-069 (13/09): mesma causa do .listaMais acima, achado medindo "Domínios & hospedagens" (faltavam
   so' 2px pra caber numa linha) -- `.cont` vazio (sem contador de tarefa, o caso de TODA lista
   dentro de pasta hoje) ainda e' um item de flex de verdade, entao o `gap:8px` do container conta
   ele igual a um cheio: 8px pagos por um espaco que nao tem nada dentro. `:empty` tira ele do
   fluxo so' quando realmente nao ha conteudo -- lista com contador real (se um dia existir) continua
   recebendo o proprio gap normalmente. */
.lista .cont:empty,.favItem .cont:empty{display:none}
.vazio{color:var(--apagado);font-style:italic;padding:10px;font-size:12px} /* ESTADO VAZIO EM TEXTO (22 usos). NAO usar como modificador em icone: o padding 10 e o italico vazam. Icone usa .semPrio/.semSub. */

/* CENTRO */
/* revisao geral (31/08, ALTAIR — Regra 21): CU deixa 7px de margem direita antes da borda da
   janela (.cu-manager2__main 321..1913 num viewport de 1920); o Nova encostava (#centro
   311..1920, 0 de margem). Padding aplicado aqui, e SUPERADO pelo achado seguinte: dava certo
   sozinho (1913 exato), mas depois o #main ganhou scrollbar-gutter:stable (fix da inconsistencia
   de 9px entre as 6 views) e as DUAS reservas de espaco passaram a somar, empurrando tudo ~20px
   a mais do que o alvo. Duas reservas pro mesmo proposito (margem direita) e mais dificil de
   raciocinar do que uma so — o padding SAIU daqui; a margem agora e responsabilidade UNICA do
   scrollbar-gutter em #main, que ja precisa existir pra manter as 6 views iguais entre si. Se o
   gutter sozinho nao bater exato com o alvo do ClickUp, ela remede e a gente ajusta UM numero,
   nao dois empilhados. */
#centro{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
/* revisao geral (31/08, ALTAIR — achado estrutural/Regra 20): 50px era chute, nunca tinha sido
   medida A PROPRIA FAIXA (so o conteudo dentro dela) — ClickUp mede 38px, descontado o banner
   promocional que empurra tudo 44px pra baixo e nao e produto (nao construido) */
/* O-083 (14/09): moldura unica alcanca a topbar. Lateral ABERTA: 20px->28px, decidido -- titulo
   nasce no mesmo x do conteudo abaixo, sem obstaculo nenhum no caminho. Lateral FECHADA: resolvido
   na O-091 item 2 (ver #sbReabrir), botao virou filho normal do flex em vez de excecao a parte. */
#topbar{height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--borda)}
.tbEsq{display:flex;align-items:center;gap:10px}
.tbDir{display:flex;align-items:center;gap:14px}
#tbTitulo{font-size:15px;font-weight:600}
/* Segmento ao lado do nome, no titulo da ficha do cliente (Wilker, 31/08: "tire o segmento daí e
   coloque do lado do nome"). So aparece quando existe — 32/32 clientes sem segmento hoje, entao
   NAO tem placeholder ("—"/"sem segmento") pro caso vazio, so o nome sozinho. */
.cliTituloSeg{margin-left:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--apagado);background:var(--surface-2);padding:2px 8px;border-radius:999px;vertical-align:middle}
/* breadcrumb da lista (Espaco / Pasta / Lista v  estrela) */
.bc{display:inline-flex;align-items:center;gap:7px}
.bcEspaco{font-size:14px;font-weight:500;color:var(--tinta-2)}
/* O-022 (ORION 08/09) item 26: .bcEspaco virou tambem alvo de <button> (breadcrumb clicavel) --
   reset de botao nativo pra nao pintar borda/fundo do sistema operacional por cima do estilo acima. */
.bcCrumb{background:none;border:none;font:inherit;padding:2px 4px;margin:-2px -4px;border-radius:6px;cursor:pointer}
.bcCrumb:hover{background:var(--surface);color:var(--tinta)}
.bcSep{color:var(--apagado);font-weight:400}
.bcLista{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--tinta);font-size:15px;font-weight:600;cursor:pointer;padding:3px 6px;border-radius:6px}
.bcLista:hover{background:var(--surface)}
.bcLista svg{width:15px;height:15px;color:var(--apagado)}
.bcChv{font-style:normal;font-size:11px;color:var(--apagado)}
.bcFav{background:none;border:none;color:var(--apagado);font-size:16px;cursor:pointer;padding:2px 4px;border-radius:6px;line-height:1}
.bcFav:hover{background:var(--surface);color:var(--tinta)}
/* .bcFav.on morta apagada daqui (ORION 09/09, achado ARCTURUS): cor crua #ffb020, sobrescrita
   pela regra em ~3978 que usa o token var(--amarelo,#f5c518) -- unico uso real de .bcFav (nova.js:1764) */
#tbViews{display:flex;gap:2px}
#tbAcoes{display:flex;align-items:center;gap:8px}
.viewBtn{background:none;border:none;color:var(--apagado);padding:6px 12px;border-radius:6px;font-size:12.5px;display:flex;align-items:center;gap:6px}
.viewBtn:hover{color:var(--tinta);background:var(--surface)}
.viewBtn.ativo{color:#fff;background:var(--surface-2)}
.viewBtn .vi{font-size:13px;opacity:.8}
.acaoBtn{background:none;border:none;color:var(--tinta-2);font-size:12.5px;padding:6px 12px;border-radius:6px;display:flex;align-items:center;gap:6px}
.acaoBtn.roxo{background:var(--roxo);color:#fff;font-weight:600}
.acaoBtn.roxo:hover{background:var(--roxo-2)}
.acaoBtn.claro{background:var(--surface-2)}
.acaoBtn.claro:hover{background:var(--surface)}
.acaoIcone{width:30px;height:30px;border-radius:6px;background:none;border:none;color:var(--apagado);font-size:15px}
.acaoIcone:hover{background:var(--surface);color:var(--tinta)}
/* revisao geral (31/08, ALTAIR — achado interno): .viewAbas/.viewControle vivem DENTRO do mesmo
   #main{overflow:auto} que o conteudo da view (Lista/Quadro/Grade/...). Quando o conteudo de uma
   view e alto o bastante pra estourar #main, a barra de rolagem vertical aparece e encolhe a
   largura efetiva pra TODOS os filhos, inclusive .ctrlDir (margin-left:auto) no topo — so que a
   barra so aparece nas views cujo conteudo, NAQUELE carregamento, e alto o bastante (Lista/Quadro
   na medicao dela). Corrigido reservando o gutter da scrollbar SEMPRE, apareca ela ou nao —
   assim a largura efetiva de #main e IDENTICA nas 6 views, tenha ou nao overflow vertical.
   Alternativa considerada e descartada: isolar o scroll vertical num container so pro conteudo
   (deixando viewAbas/viewControle fixos) quebraria o scroll HORIZONTAL sincronizado entre a barra
   e as linhas (min-width:var(--linha-min) nos dois, fix da propria ALTAIR de 25/08 pra tela
   estreita) a menos que eu sincronizasse scrollLeft via JS — mudanca de arquitetura maior do que
   o pedido, entao nao escolhi essa rota sem avisar. */
#main{flex:1;overflow:auto;scrollbar-gutter:stable}

/* INICIO (4 quadrantes) */
#homeSaudacao{font-size:24px;font-weight:600;padding:26px 28px 18px}
/* O-012 (ORION 07/09) -- DUVIDA PRO MAESTRO: 20px nao bate com a escala atual
   (--sp-linha:8 / --sp-entre-cards:18). Mantido o valor visual (nao troquei sem a decisao dele);
   sinalizado pro Maestro decidir se cria um degrau intermediario ou se este gap deve virar 18. */
/* O-012 (ALTAIR, 07/09): 20px nao batia com a escala -- vai pro degrau mais proximo (18). */
.homeGrid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:clamp(300px,42vh,480px);gap:var(--sp-entre-cards);padding:0 28px 28px}
/* "Meu trabalho" fundido (Wilker, 03/09: "Meu trabalho e Atribuidas a mim podem ficar numa caixa
   so") -- cartao unico ocupa a largura das duas colunas, linha de baixo, sobra espaco pras 4
   abas + linhas de tarefa com data sem precisar rolar na horizontal. */
.homeCardAmplo{grid-column:1 / -1}
/* O-022 (ORION 08/09), item 21, ordem do Wilker: "Chegou pra você" + "Meu trabalho" + o novo card
   Quests viram TRES colunas lado a lado nessa linha (antes eram dois cartoes .homeCardAmplo
   empilhados). Grid aninhado dentro da linha amplo -- herda a mesma altura de linha do .homeGrid
   pai (align-items:stretch e o default de grid, cada .homeCard filho estica igual aos cartoes de
   cima), entao a rolagem de 77 itens fica presa no .homeCardBody de cada um, nunca estoura a linha. */
.homeTresCols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-entre-cards)}
.homeCard{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
/* O-022 (ORION 08/09), item 27, tema GENERICO do Nova (fora do `.moonOblivion`): trava do Maestro --
   "derive, nao copie". O gradiente do Oblivion (`--mo-haze`->`--mo-card`) e duas cores escuras
   feitas pra chao escuro daquele tema; levar o LITERAL pra ca seria a mesma doenca do item 4 (cor
   que nao viaja com o tema). O que viaja e o MECANISMO -- 135deg, tom puxado pro roxo indo pra
   superficie do proprio tema, parada em 70% -- reaproveitando `--roxo-suave`/`--surface` que ja
   sao usados juntos assim em `.docvDestaque` (mesma obra, tema generico). Regra BASE aqui, embaixo
   de `.homeCard` puro; o `.moonOblivion .homeCard.cardDestaque` mais abaixo no arquivo tem 2
   classes de especificidade e continua vencendo dentro do escopo Oblivion -- as duas convivem,
   cada tema com sua propria versao do mesmo mecanismo. */
.homeCard.cardDestaque{background:linear-gradient(135deg,var(--roxo-suave),var(--surface) 70%);border-color:var(--roxo)}
/* O-087 (Wilker, 14/09): "botao de adicionar precisa ficar na mesma linha do titulo da tabela".
   LUGAR PADRAO pra qualquer botao de acao de um bloco (nao caso especial de tela nenhuma): a
   regra ja e' `display:flex;justify-content:space-between` -- basta o botao ser o 2o filho do
   `.homeCardTit` (texto do titulo + <button>) que ele cai sozinho na ponta direita, SEM
   `margin-left:auto` nem `style` inline nenhum. Varios lugares do arquivo (empreendimento
   "Vincular cliente", tarefas do ativo "+ Tarefa") reinventam isso com flex/gap/margin-left:auto
   redundantes -- funciona, mas nao precisava; nao mexi neles agora (fora do escopo desta ordem),
   fica registrado pra quem tocar de novo usar a forma direta.
   CRITERIO de qual acao vai pro topo da tela (#tbAcoes) e qual vai pro homeCardTit do bloco:
   acao que age sobre a ENTIDADE INTEIRA da ficha (editar o parceiro, desativar) mora no topo;
   acao que age sobre UM BLOCO/TABELA especifico (adicionar linha naquela tabela) mora na linha
   do titulo daquele bloco. Acao de tabela mora na tabela, acao da ficha mora no topo. */
.homeCardTit{font-size:15px;font-weight:600;padding:16px 18px 8px;display:flex;align-items:center;justify-content:space-between}
.homeCardTit .mini{font-size:11px;color:var(--apagado);font-weight:400}
/* cartao "Caixa de entrada" do Inicio (Wilker, 03/09) -- "ver tudo" no canto, mesmo estilo de
   link discreto ja usado em .agdSync/texto apagado clicavel do resto do app. */
.homeCardVerTudo{font-size:11.5px;color:var(--roxo-2);font-weight:500;cursor:pointer}
.homeCardVerTudo:hover{text-decoration:underline}
.homeCardBody{padding:2px 8px 10px;overflow-y:auto;flex:1}
.homeAbas{display:flex;gap:16px;padding:6px 18px 0;border-bottom:1px solid var(--borda)}
/* O-081/O-082 (14/09): `.homeAbas` serve TRES papeis com o mesmo nome -- os DOIS casos de tela
   inteira tem que ser lidos JUNTOS, senao quem achar um vai achar que o outro esta errado.
   (1) filtro pequeno DENTRO de um `.homeCard` do Inicio ("Meu trabalho" -- nova.js:1069), interno,
   sem relacao com moldura de tela nenhuma -- fica nos 18px da regra acima, sem motivo pra mudar.
   (2) barra de abas de tela inteira que e IRMA de `.clienteSecoes`, SEM pai que ja pague a moldura
   -- `#cliAbasNav`/`#empAbasNav` (ficha de cliente/empreendimento), regra abaixo: recebem 28px
   PROPRIO, porque ninguem mais paga por elas.
   (3) barra de abas de tela inteira que e FILHA de um container que JA paga a moldura --
   `#moonAbasNav` (Moon, dentro de `.moonOblivion` que agora e 28px) -- ver
   `.moonOblivion .homeAbas` mais abaixo: zera o horizontal, porque somar em cima do que o pai ja
   paga dobraria a conta (lei do O-080, componente cede ao pai). Regra (2) SOBE pra 28 porque nao
   tem pai pagando; regra (3) DESCE pra 0 porque tem. Duas direcoes opostas pro MESMO objetivo
   (rotulo da aba alinhado com o conteudo abaixo dela) -- o motivo da direcao e SEMPRE "quem ja
   pagou nesta cadeia", nunca o numero em si. */
#cliAbasNav,#empAbasNav{padding-left:28px}
.homeAba{font-size:12.5px;color:var(--apagado);padding:6px 0;border-bottom:2px solid transparent;cursor:pointer}
.homeAba.ativa{color:var(--tinta);border-bottom-color:var(--roxo)}
.homeGrupo{display:flex;align-items:center;gap:8px;padding:10px 12px 4px;font-size:12px;color:var(--tinta-2);font-weight:600}
.homeGrupo .qt{color:var(--apagado);font-weight:400}
.homeRow{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:6px;font-size:12.5px;color:var(--tinta-2);cursor:pointer}
.homeRow:hover{background:var(--surface-2);color:var(--tinta)}
.homeRow .chk{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--apagado);flex:0 0 15px;display:inline-flex;align-items:center;justify-content:center;font-size:9px}
.homeRow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homeRow .sub{margin-left:auto;color:var(--apagado);font-size:11px;flex:0 0 auto;padding-left:10px}
.emLista{color:var(--apagado);font-weight:400}
.homeVazio{color:var(--apagado);font-size:12px;padding:16px 12px}
/* Agenda timeline */
.agTimeline{padding:0 8px}
.agLinha{display:flex;min-height:44px;border-top:1px solid var(--borda)}
.agLinha.agTopo{min-height:24px;border:none}
.agLinha.agDiaTodo{min-height:34px;background:var(--surface-2);border-radius:6px;align-items:center;margin-bottom:2px}
.agHora{flex:0 0 62px;font-size:10.5px;color:var(--apagado);padding:4px 8px}
.agSlot{flex:1;position:relative}
.agEv{display:inline-block;background:var(--roxo-suave);color:var(--roxo-2);font-size:11px;padding:3px 8px;border-radius:5px;margin:4px 4px 0 0;cursor:pointer;max-width:96%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.agAgora{position:absolute;left:0;right:0;height:2px;background:var(--vermelho)}
.agAgoraTag{position:absolute;left:-46px;top:-8px;background:var(--vermelho);color:#fff;font-size:9px;padding:1px 5px;border-radius:4px}

/* Bloco de agenda por hora (spec 31/08, entidade separada de tarefa — decisao ALTAIR ponto 2).
   #agHoras vira o referencial: #agBlocos e absoluto DENTRO dele, alinhado a .agSlot (por isso
   left:62px, mesma largura de .agHora) e cada .agBloco se posiciona por minuto real, nao por
   linha de hora — assim cobre fracao de hora e multiplas horas igual o exemplo do Wilker
   (09:30-10:30). */
.agHoras{position:relative}
.agBlocos{position:absolute;left:62px;right:8px;top:0;pointer-events:none}
.agBloco{position:absolute;left:2px;right:2px;background:var(--roxo-suave);border:1px solid var(--roxo);border-radius:6px;padding:3px 8px;overflow:hidden;cursor:pointer;pointer-events:auto;display:flex;align-items:baseline;gap:6px}
.agBloco:hover{background:var(--roxo);color:#fff}
.agBloco:hover .agBlocoHora{color:#fff}
.agBlocoHora{font-size:10px;color:var(--roxo-2);flex:0 0 auto;font-variant-numeric:tabular-nums}
.agBlocoTit{font-size:12px;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.agBloco:hover .agBlocoTit{color:#fff}
.agBlocoTarefaIc{flex:0 0 auto;color:var(--roxo-2);display:inline-flex}
.agBlocoTarefaIc svg{width:11px;height:11px}
/* O-091 item 1: fica -- codifica ESTADO (bloco ligado a uma tarefa real vs bloco solto), aplicada
   via classe JS so' quando b.tarefa_id existe (telaPlanejador). Nao e moldura parada. */
.agBlocoComTarefa{border-style:dashed}
/* O-091 item 1 (Wilker/ALTAIR, 14/09): tracejado parado vira moldura, nao acao -- morreu, igual
   aos outros "adicionar" do app (.finDespAddBtn/.ovAddCartao), nenhum deles usa dashed. */
.agBlocoAdd{position:absolute;right:2px;bottom:-32px;background:none;border:1px solid var(--borda);color:var(--apagado);font-size:11.5px;padding:5px 10px;border-radius:6px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;pointer-events:auto}
.agBlocoAdd:hover{color:var(--tinta);border-color:var(--roxo)}
.agBlocoAdd svg{width:12px;height:12px}
/* painel de criar/editar bloco */
.agBlocoPainel{width:260px;padding:12px;display:flex;flex-direction:column;gap:8px}
.agBlocoPTit{font-size:12.5px;font-weight:600;color:var(--tinta)}
.agBlocoPTitulo{background:var(--bg);border:1px solid var(--borda);border-radius:6px;color:var(--tinta);font-size:13px;padding:7px 9px;outline:none;font-family:inherit;color-scheme:dark}
.agBlocoPHoras{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--apagado)}
.agBlocoPHoras input{flex:1;background:var(--bg);border:1px solid var(--borda);border-radius:6px;color:var(--tinta);font-size:12.5px;padding:6px 8px;outline:none;font-family:inherit;color-scheme:dark}
.agBlocoPLigado{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--apagado)}
.agBlocoPLigado svg{width:12px;height:12px}
.agBlocoPAbrir{margin-left:auto;color:var(--roxo-2);cursor:pointer;text-decoration:underline}
/* O-091 item 1: mesmo motivo do .agBlocoAdd acima -- tracejado parado morreu. */
.agBlocoPGerar{background:none;border:1px solid var(--borda);color:var(--roxo-2);font-size:12px;padding:7px 9px;border-radius:6px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.agBlocoPGerar:hover{border-color:var(--roxo)}
.agBlocoPGerar svg{width:12px;height:12px}
.agBlocoPRodape{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.agBlocoPExcluir{background:none;border:none;color:var(--apagado);font-size:12px;cursor:pointer;font-family:inherit}
.agBlocoPExcluir:hover{color:#e5484d}
.agBlocoPSalvar{background:var(--roxo);color:#fff;border:none;padding:7px 14px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.agBlocoPSalvar:hover{background:var(--roxo-2)}

/* VIEW: abas (Canal/Lista/Quadro/Calendario) */
/* revisao geral (31/08, ALTAIR — mesmo achado do #topbar): 42px era chute, ClickUp mede 35px */
.viewAbas{display:flex;align-items:center;gap:2px;padding:0 16px;height:35px;border-bottom:1px solid var(--borda);min-width:var(--linha-min)}
.viewAba{background:none;border:none;border-bottom:2px solid transparent;color:var(--apagado);font-size:13px;padding:6px 12px;border-radius:0;display:flex;align-items:center;gap:6px;height:24px} /* medido ALTAIR: ClickUp 24/5px/13, nao 30/6/12,5 (inversao linha-alta-fonte-menor) */
.viewAba .vi{font-size:12px;opacity:.75}
.viewAba:hover{color:var(--tinta);background:var(--surface)}
/* A2 (AREA2): aba ativa e SUBLINHADO + texto escuro no ClickUp, nao pill preenchido */
.viewAba.ativa{color:var(--tinta);background:none;font-weight:500;border-bottom-color:var(--tinta)}
.viewAba.ativa .vi{opacity:1}
.viewAdicionarCanal{background:none;border:none;color:var(--apagado);font-size:13px;padding:6px 12px;border-radius:5px;display:flex;align-items:center;gap:6px;height:24px;margin-right:4px;border-right:1px solid var(--borda)}
.viewAdicionarCanal:hover{color:var(--tinta);background:var(--surface)}
.viewAdicionarCanal .vi{font-size:12px;opacity:.75}
.viewAdd{background:none;border:none;color:var(--apagado);font-size:12px;padding:6px 10px;border-radius:6px;margin-left:6px}
.viewAdd:hover{color:var(--tinta);background:var(--surface)}

/* VIEW: barra de controle (Status + Tarefa) */
/* revisao geral (31/08, ALTAIR — medida a CAIXA, nao so o item): a barra do ClickUp e mais
   ESTREITA que o proprio container dela nos dois lados (321..1913 o container, 329..1905 a
   barra = 8px de recuo esquerda e 8px direita, simetrico) — nao e padding empurrando o
   conteudo pra dentro, e a CAIXA da barra que e menor. Margem (nao padding) porque padding nao
   move a borda do proprio elemento (o que ela mediu com getBoundingClientRect), so o conteudo
   dentro dela. RESSALVA MINHA: essa margem SO foi verificada no carregamento normal (1920px);
   em tela estreita (scroll horizontal via min-width:var(--linha-min), fix ALTAIR 25/08) o
   .viewAbas e as linhas da tabela NAO ganharam a mesma margem — nao pedido, nao medido — entao
   o footprint horizontal total da .viewControle fica 16px maior que os outros nesse cenario.
   Se isso importar, e ela quem mede/decide, nao decidi sozinho. */
/* revisao geral (31/08, ALTAIR): padding-right zerado — o ClickUp nao tem padding nenhum aqui,
   o recuo da direita e TODO da margin (8px, ja certa). Com os 20px de padding-right em cima da
   margin, o conteudo (.ctrlDir) ficava 20px+2 longe demais do que deveria. padding-left MANTIDO
   em 20 (ela mediu Nova/Lista contra ClickUp/Grade nesse lado — views diferentes, comparacao
   nao vale; fica intocado ate ela remedir na mesma view). */
.viewControle{display:flex;align-items:center;gap:4px;padding:8px 0 8px 20px;margin:0 8px;border-bottom:1px solid var(--borda);min-width:var(--linha-min)} /* gap 6->4: passo 28 unico na barra toda (igual ao .ctrlDir e ao ClickUp) */
.ctrlBtn{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--tinta-2);font-size:12px;height:24px;padding:4px 6px;border-radius:12px;box-sizing:border-box} /* medido ALTAIR TR-12: pilula radius 12, padding 4px 6px, 12px */
/* revisao geral (31/08, medido): "Agrupando por:" — rotulo fixo, SO na Lista, antes do pill de status */
.ctrlAgruparPrefixo{display:inline-flex;align-items:center;height:24px;font-size:12px;color:var(--tinta-2);white-space:nowrap}
/* C1 (AREA5): Grade agrupa por status sempre, sem picker — vira botao so-icone, mesma pilula das outras */
.ctrlBtn.soIconeAgrupar{width:23.8px;height:24px;padding:4px 3px;gap:0}
.ctrlBtn:hover{background:var(--surface)}
.ctrlBtn.ativo{color:var(--roxo-2);font-weight:500;background:rgb(42,36,74)} /* medido ALTAIR TR-12: no ClickUp o estado ATIVO ganha SUPERFICIE TINGIDA (bg rgb(240,241,255) lilas + texto roxo), nao so texto colorido. A cor nao viaja (aquilo e tema claro): no escuro = roxo escurecido de baixa saturacao. ALTAIR le o pixel */
.ctrlIc{font-size:13px}
.ctrlDir{margin-left:auto;display:flex;align-items:center;gap:4px}
.ctrlIcone{width:23.8px;height:24px;border-radius:12px;background:none;border:none;color:var(--apagado);font-size:12px;font-weight:500;padding:4px 3px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center} /* medido ALTAIR TR-07..11: grupo de filtro = 23,8x24, PILULA radius 12, padding 4px 3px, 12px/500, um tom so */
#ctrlBusca,#ctrlConfig{width:24px;border-radius:6px;padding:0} /* excecao medida: busca e config sao radius 6 / 24x24 no ClickUp tambem — ja batiam */
#ctrlConfig{margin-left:12.8px} /* medido ALTAIR TR-13: 16,8 entre lupa e engrenagem (4 do gap + 12,8) — separa os dois grupos */
.ctrlIcone:hover{background:var(--surface);color:var(--tinta)}
.ctrlIcone.ativo{background:var(--roxo-suave);color:var(--roxo-2)} /* estado ligado tem que PINTAR (medido: antes .ativo nao mudava nada, o botao ligado ficava igual ao desligado) */
.ctrlIcone svg{width:16px;height:16px;stroke-width:1.5} /* V3-03/04: svg 15->16 e traco mais fino pro contorno nao borrar a 16 */
/* botao "Modo eu" (avatar do usuario) */
/* .ctrlModoEu morta apagada daqui (ORION 09/09, lote das 4 duplicatas "so repetem valor" --
   ARCTURUS/ALTAIR): so tinha display/align/justify, subconjunto identico da regra que sobrevive
   em ~3665 (mesmos 3 valores + width/padding). Nunca tinha efeito proprio. */
/* O-114 (ORION, 16/09): medido ao vivo pelo ALTAIR -- a regra JA dizia 22x22 redondo, mas
   renderizava 18x22 OVAL. Causa: `.ctrlIcone` (o botao em volta) e' 23,8px de largura com
   padding:4px 3px e box-sizing:border-box -- a area util e' so' uns 17,8px, e sem
   flex-shrink:0 o avatar (item de um `inline-flex`) ENCOLHIA no eixo principal (horizontal)
   pra caber, sem encolher a altura (eixo cruzado, nao afetado por flex-shrink) -- daqui vem o
   ovalado. Padrao do app pra avatar de pessoa e' `.spAvatar` (medido: 24x24, 12px/700) -- subo
   pro mesmo tamanho/peso aqui e travo o encolhimento; o botao ganha largura propria abaixo. */
.meAvatar{width:24px;height:24px;border-radius:50%;background:var(--roxo);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;flex-shrink:0}
.ctrlIcone.ctrlModoEu{width:auto;padding:2px}
.ctrlModoEu.ativo{background:var(--roxo-tint,rgba(124,92,255,.18));box-shadow:0 0 0 2px var(--roxo) inset}

/* LISTA (colunas em grid) */
/* min-width:max-content (O-123, ORION 17/09): campo personalizado pode somar MUITAS colunas de
   160px (uma lista com 12 campos + 5 nativas passa de 2700px) -- sem isto, o grid tenta caber nos
   100% do container e o '1fr' (Nome) e' espremido quase a zero, o conteudo rico dele (grip+check+
   status+nome+tags) atropela o vizinho visualmente. Com max-content, a linha cresce alem de 100%
   e #viewConteudo (overflow-x:auto abaixo) rola pro lado -- mesmo comportamento que a Grade ja
   tem de gracas (ela e' <table>, cresce sozinha). */
.listaHead,.tRow,.grupoRodape{display:grid;grid-template-columns:var(--gridcols,1fr 160px 160px 160px 160px var(--col-acoes));align-items:center;gap:0;min-width:max-content}
#viewConteudo{overflow-x:auto} /* deixa a Lista rolar de lado quando min-width:max-content acima estoura a largura (muitos campos personalizados) -- Kanban/Grade/etc ja tem overflow proprio, isto so' cobre a Lista */
/* cabecalho de coluna: agora DENTRO de cada grupo (nao sticky no topo). Medido: 32px, 12px/500,
   rgb(131,131,131), sem uppercase. */
.listaHead{padding:0 var(--gutter) 0 0;height:32px;margin-top:6px;margin-bottom:1px;font-size:12px;font-weight:500;color:rgb(131,131,131)}
/* sem border-bottom: medido, o ClickUp nao tem borda no cabecalho.
   RESPIRO EM VOLTA DO CABECALHO DE COLUNA. ALTAIR remediu 30/08 com as ancoras declaradas, e o ClickUp TEM
   o elemento do meio: 124 cabecalhos de coluna para 31 grupos, um por grupo, mesma estrutura daqui.
   Os vaos DELE, cada um entre dois elementos vizinhos e sem nada no meio:
     pilula do grupo  -> cabecalho de coluna ....  6
     cabecalho        -> primeira linha .........  1
   Os 39 que apareceram antes eram 6 + 32 + 1: numero verdadeiro e inaplicavel, porque atravessa TRES
   elementos. Vao medido por cima de uma estrutura intermediaria nao e margem de nada — e um total.
   O respiro dele mora ANTES do cabecalho, nao depois: ele quase encosta o cabecalho na primeira linha. */
.lhSort{margin-left:5px;font-size:10px;opacity:0;transition:opacity .12s}
.lhCel:hover .lhSort{opacity:.7}
.lhSort.ativo{opacity:1;color:var(--roxo-2)}
.listaHead .colNome{padding-left:var(--gutter)} /* ClickUp (medido ALTAIR): cabecalho "Nome" no recuo 48 e nome da tarefa no 99 — 51px de diferenca, o cabecalho NAO alinha com o texto da coluna, porque o prefixo mora nesses 51. O 97 antigo era coerencia NOSSA ("alinhar Nome com o texto"), nao medida do ClickUp. Com .listaHead ja em padding 0 48px, o zero aqui poe "Nome" no recuo 48 como la. */
.listaHead .lhCel{cursor:pointer;min-width:0;height:100%;display:flex;align-items:center;line-height:16px} /* medido ALTAIR: a celula media 15,4 numa faixa de 32 — area clicavel de 48%. O texto ja estava centrado nos dois (centro relativo 0), entao esticar NAO move nada, so cresce o alvo. line-height 16 (era normal=15,4) contra 16,008 do ClickUp. */
.listaHead .lhCel:hover{color:var(--tinta-2)}
/* .lhTxt (O-123, ALTAIR): ellipsis isolado no texto -- `.lhCel` e' flex com 2 filhos (texto + seta
   de ordenar), `text-overflow:ellipsis` direto nele corta cru sem reticencia (gotcha conhecido de
   ellipsis em flex container com varios filhos). Sozinho aqui, funciona limpo, e ainda dispara o
   listener global de title-por-overflow (nao precisa de title= manual por coluna). */
.lhTxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
/* D3 (AREA2): so icone, circulo — nao "+ Adicionar" com texto */
.listaHead .lhAdd{color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;padding:0}
.lhMais{display:inline-flex;align-items:center}
.lhMais svg{width:13px;height:13px}
.colResp,.colInicio,.colData,.colPrio,.colAdd,.colCf{padding-left:4px;min-width:0} /* .colInicio estava de fora: o icone de vazio saia em dx 0 e sem raio enquanto as outras TRES irmas usavam dx 4. Contradicao interna — nao precisou do ClickUp pra decidir qual era o padrao. .colCf (O-123): campo personalizado na Lista, mesma calha das nativas. min-width:0 (O-123, ALTAIR): item de grid sem isso nao encolhe abaixo do conteudo, empurrando a coluna -- toda celula de valor precisa poder encolher pro ellipsis interno ter efeito. */
.colCf{display:flex;align-items:center;font-size:13px;color:var(--tinta-2);cursor:pointer} /* O-123 leva 4 (ORION): virou editavel inline (igual .colResp/.colData/.colPrio) -- cursor:default era do tempo so'-leitura */
.colCfSoLeitura{cursor:default} /* formula/rollup/location/etc (EDITAVEIS_CF_LISTA de fora) -- sem afordancia de clique que nao faz nada */
/* .colCfTxt (O-123, ALTAIR, sobra da volta 1): mesmo gotcha do cabecalho -- ellipsis direto no
   `.colCf` (flex) nao reticencia de verdade, so' corta cru. Isolado aqui, funciona limpo e dispara
   o listener global de title-por-overflow sozinho (celula com valor longo ganha o texto completo
   no hover, sem title= manual). */
.colCfTxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
/* .tData ganha o mesmo tratamento (O-123, ALTAIR: "mesmo mecanismo, toda celula, nativa e
   personalizada") -- data raramente estoura 160px, mas a lei e' pra qualquer celula, nao so' a
   que vazou no print. */
.tData{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.grupo{margin-bottom:6px}
.grupoHead{position:relative;display:flex;align-items:center;gap:8px;padding:2px var(--gutter)}
.grupoHead .grupoSeta{position:absolute;left:16px} /* medido ALTAIR: no ClickUp a seta mora DENTRO da calha de 48, em dx 16, e o pill comeca em 48. No Nova ela OCUPAVA a calha e empurrava o pill pra 70. Tirando ela do fluxo, um deslocamento de 22 some e leva junto a posicao da bolinha, do rotulo e do contador — causa unica, quatro pontos. */ /* medido ALTAIR: altura 24 (era 32); pill 20 + 2px em cima/baixo */
.grupoSeta{color:rgb(131,131,131);cursor:pointer;transition:transform .15s;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;flex:0 0 auto;transform:rotate(90deg)} /* medido ALTAIR: no ClickUp e um BUTTON 24x24 raio 6 com icone de 16 — o Nova tinha so um svg de 14. E a cor: seta e contador usavam --apagado (117,117,127) enquanto os rotulos de coluna, dois elementos acima, usam 131 — contradicao INTERNA, e o ClickUp usa 131 nos dois. */
.grupoSeta svg{width:16px;height:16px}
.grupo.fechado .grupoSeta{transform:rotate(0)}
.grupo.fechado .grupoCorpo{display:none}
.grupoPill{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:normal;padding:2px 6px 2px 4px;border-radius:6px;height:20px;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;overflow:hidden;min-width:0}
/* rotulo PROPRIO dentro da pilula (medido): nowrap + ellipsis + clip. Sem ele o texto longo
   quebra em 2 linhas e derrama pra fora da faixa colorida (a caixa reporta 20px e mente). */
.grupoPillTxt{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* medido ALTAIR: o ClickUp mantem a PILULA em 11px e SOBRESCREVE o rotulo pra 12 dentro dela; o Nova deixava herdar. No cabecalho da Lista nao muda nada — la a .grupoHead .grupoPill ja e 12 e o rotulo ja herdava 12. */
/* medido: rotulo da pilula e 11px no Quadro e 12px na LISTA (valor por view, nao unifica). Base = 11 (Quadro). */
.grupoHead .grupoPill{font-size:12px}
.grupoPillIco{width:16px;height:16px;border-radius:50%;border:2px dashed currentColor;box-sizing:border-box;flex:0 0 auto;position:relative} /* V2-02: icone de status na pilula 16x16 (anel); .cheio pros fechados. B1 (AREA3): tracejado por padrao (nao-iniciado/aberto), so fechado vira preenchido */
.grupoPillIco.cheio{background:currentColor;border-style:solid}
.grupoPillIco.cheio::after{content:"";position:absolute;left:3px;top:0px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)} /* check branco, mesma tecnica de .tStatus.stFeito */
.grupoCont{color:rgb(131,131,131);font-size:12px;font-weight:500} /* mesma cor dos rotulos de coluna (era --apagado, 117,117,127) e peso 500 como o ClickUp (era 400) */
.tRow{padding:0 var(--gutter) 0 0;height:35px;cursor:pointer}
/* CALHA: quem mora nela. Medido pelos dois caminhos (ALTAIR na tela, eu no CSS) e os numeros fecharam:
     Nova     97 entre a borda do conteudo e o nome     ClickUp  51
     diferenca 46 = alca 24 + caixa de selecao 22 — exatamente o bloco toggle.
   Os DOIS reservam 48. O ClickUp poe alca e caixa DENTRO da reserva (o toggle-container dele); o Nova
   reservava 48 de padding VAZIO e desenhava o bloco DEPOIS — o mesmo espaco duas vezes.
   Agora a linha nao tem padding a esquerda e o bloco ocupa a calha. O cabecalho mantem o recuo por DENTRO
   da primeira celula, senao as trilhas do grid desencontram entre cabecalho e linha. */ /* medido ALTAIR: ClickUp NAO tem borda entre tarefas (0px none), separa por espacamento. A borda era vicio nosso; em 137 linhas mudava a textura da tela */
.tRow:hover,.tRow:focus-visible{background:rgba(255,255,255,.0138)} /* medido e RECONCILIADO nos dois lados 29/08: o realce do ClickUp vai de 255 pra 252, razao de contraste 1,0259. O .03 daqui dava 1,0616 — 2,38x mais forte. O alfa que IGUALA a razao sobre rgb(15,15,18) e 0,01377. O que viaja entre temas e a RAZAO 1,0259, nao o alfa: se o fundo da superficie mudar, refaz a busca binaria. (Antes: 'V2-03 hover suave ~+8'.) */
.tRow:focus{outline:none}
.tRow:focus-visible{outline:2px solid var(--roxo);outline-offset:-2px;border-radius:4px} /* --acento NAO existe neste tema; o token e --roxo (#7b68ee). Regra com var inexistente cai pra currentColor e pinta errado em silencio. */
/* INDICADOR DE STATUS DA LINHA. Medido ALTAIR 30/08 em 9 status do ClickUp: nao e uma forma, sao TRES,
   e a regra e por TIPO de status, nao por cor.
     nao iniciado (open)  -> circulo VAZADO TRACEJADO  (icone `statusIconOpenDashed` la)
     ativo (custom)       -> circulo VAZADO SOLIDO     (icone `statusIconOpen`)
     concluido (closed)   -> circulo PREENCHIDO com tique branco
   O Nova ja guarda o tipo em nova_statuses, entao isso e mapeamento e nao dado faltando.
   RESSALVA HONESTA: as duas primeiras estao provadas em 9 exemplares; a terceira vem de evidencia de
   TELA (grupo PERDIDO com circulo vermelho e tique branco) porque a view do Wilker esconde fechadas —
   falta o `href` do icone dele. A forma esta certa; o desenho fino do tique pode precisar de ajuste. */
.tStatus{width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #888;flex:0 0 16px;margin-right:9px;display:inline-block;vertical-align:middle;position:relative}
/* O-091 item 1: fica -- codifica ESTADO (aberto=tracejado, fechado=solido), medido contra o
   ClickUp, mesmo vocabulario de .grupoPillIco (kanban) e .calEvStatusIco. Nao e moldura. */
.tStatus.stAberto{border-style:dashed}
.tStatus.stFeito{background:var(--stCor,#888)}
.tStatus.stFeito::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.colNome,.tNome{display:flex;align-items:center;min-width:0}
.colNome{align-self:stretch} /* alvo de clique na altura da LINHA, como no ClickUp (34,2 na linha dele). So e seguro depois que a colisao de classe caiu: enquanto .tFlag herdava padding de .vazio e media 39, o conteudo excedia a linha nos TRES modos e o stretch resolvia contra 39, transbordando 11px pra linha de baixo. Com o conteudo em 24, que cabe ate no alt-pequeno (28), a trilha passa a valer a altura da .tRow e o stretch acompanha os tres modos sozinho. Se voltar a transbordar, procurar quem cresceu no conteudo — nao remover isto. */
.tNome{font-size:14px;font-weight:500;line-height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;gap:8px}
.tagInline{font-size:10.5px;padding:2px 8px;border-radius:999px;margin-left:8px;flex:0 0 auto;font-weight:500;white-space:nowrap}
.tDescIc{color:var(--apagado);margin-left:8px;flex:0 0 auto;display:inline-flex;opacity:.6}
.tDescIc svg{width:13px;height:13px}
.tRespVazio svg,.tDataVazio svg{width:15px;height:15px}
.tFlag svg{width:15px;height:15px}
/* O-114 (ORION, 16/09), varredura: mesmo tamanho do padrao (.spAvatar, 24x24) mas fonte tinha
   ficado pra tras (11px/600 em vez de 12px/700) -- drift de tipografia, nao de forma. */
.tAvatar{width:24px;height:24px;border-radius:50%;background:var(--roxo);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.tRespVazio,.tDataVazio{color:var(--apagado);opacity:.4;font-size:15px}
/* ALTAIR 30/08: a celula de data do ClickUp e 14px/400, lida numa celula PREENCHIDA ("4 dias atras") da
   coluna Data inicial. E ela achou que a Data inicial usa a MESMA classe (due-date__info-value) e a MESMA
   linguagem relativa do vencimento — entao o 14 vale para as duas colunas de data, por medicao dele e nao
   por analogia minha. 12 -> 14.
   RESSALVA DE PROCEDENCIA: ela reportou "13px" do MEU lado e o CSS aqui declarava 12. As 15 celulas de
   inicio visiveis estavam VAZIAS (conferido no banco: inicio null), entao naquela coluna nao existe
   .tData nenhum — o 13 saiu de outro elemento. O numero que troquei veio da DECLARACAO daqui contra a
   MEDICAO dele, nao de comparar as duas telas. Falta uma tarefa mae, nao arquivada, de status aberto e
   com data de inicio para conferir a celula preenchida. */
.tData{font-size:14px;color:var(--tinta-2)}
/* [SUPERSEDED 30/08 — ver bloco abaixo] ALTAIR 30/08, medido NA LISTA (visao "Andamento das demandas",
   linha "Criativo Nativo Storys", .due-date__info-value): prazo de 22/10/25, dez meses vencido, sai em
   rgb(32,32,32) peso 400 — o texto normal. Duas linhas vencidas, as duas neutras. O Nova pintava as
   duas de vermelho. Regra do Wilker 30/08: forma nao se decide, se copia. O vermelho SAIU nessa data.
   .tDataOk (verde para concluida) FICA por ora — ninguem mediu data de tarefa concluida na Lista.
   Cuidado ao generalizar: "o ClickUp nao pinta atraso" e FALSO. O contador agregado "Em atraso" do
   calendario dele e vermelho (medido). Ele nao pinta a data da LINHA; pinta o RESUMO. — SO QUE essa
   mesma sessao, no mesmo dia, mediu a Grade (view Tabela) e la o ClickUp PINTA a data da linha de
   vermelho (rgb 198,42,47). O shadow DOM do ClickUp bloqueou a re-medicao direta da Lista (ancora
   positiva "dias atr" no texto, zero elemento alcancavel — "nao alcanco", nunca "nao existe"), entao
   ALTAIR decidiu por INFERENCIA (nao remedicao) aplicar o mesmo mecanismo na Lista, registrado como tal
   no checklist da AREA2. Se ela remedir e a Lista realmente for neutra, este bloco volta a inherit. */
.tData.tDataAtraso{color:var(--vermelho)}
.tData.tDataOk{color:var(--verde)}
/* A3 (AREA5): fonte da celula de data e 13 SO na Grade (medido) — o .tData global e 14, usado pela
   Lista (devido-date de outro elemento la). A cor de atraso agora e a mesma global acima; nao precisa
   mais de override aqui (era so pra Grade antes da Lista herdar o mesmo vermelho). */
.tab td.tabCel .tData{font-size:13px}
.tFlag{font-size:14px;color:var(--apagado);display:inline-flex;align-items:center;justify-content:center;line-height:1} /* .tFlag era o UNICO porta-icone da linha sem inline-flex (.tGrip, .tHa, .tAvatar todos tem). Como span inline dentro de .colPrio (que e flex), virava item blockificado e a altura vinha da CAIXA DE LINHA — metrica de fonte, nao conteudo. Media 39 numa linha de 35 e esticava a TRILHA da grade inteira, invisivel porque a bandeira vazia e transparente. inline-flex faz a caixa abracar o icone de 15px. */
.tFlag.semPrio{opacity:.4} /* era .3 enquanto responsavel e datas usam .4 — tres campos vizinhos com dois valores de apagado. Segunda contradicao interna do mesmo bloco. */ /* era .vazio e colidia com o estado-vazio de texto (123): herdava padding 10 e ia a 35 de altura numa linha de 35/28, ditando a TRILHA da grade. Sem o padding volta aos 15 do svg. */
/* prioridade: bandeira (de TRACO, nao encher — coerencia do kit) + ROTULO ao lado (medido: ClickUp mostra a palavra). */
.colPrio{display:flex;align-items:center;gap:6px;min-width:0}
/* ALTAIR 30/08, medido na Lista "Todas as campanhas" do ClickUp, 80 linhas com os DOIS valores:
   "Alta" 15x e "Normal" 15x, ambos 14px/400, altura 16, rgb(100,100,100). So a largura muda, e ela
   acompanha o texto. Tamanho e peso VIAJAM e entram direto. A COR nao viaja — a dele e de tema claro.
   O que viaja e a razao: rgb(100,100,100) sobre branco da 5,92; o --tinta-2 daqui dava 9,30, bem mais
   forte que o original, e o --tinta-3 (#888) da 5,40, o mais proximo do degrau medido. */
.tPrioLbl{font-size:14px;font-weight:400;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bandeira SVG do kit no menu de prioridade (era o glifo ⚑, incoerente ao lado da bandeira desenhada da celula) */
.ddFlag{display:inline-flex;align-items:center;margin-right:2px;vertical-align:middle}
.ddFlag svg{width:14px;height:14px}
.addTarefa{display:flex;align-items:center;gap:8px;padding:8px 20px;color:var(--apagado);font-size:12.5px}
.addMais{font-size:14px}
.addTarefaInput{flex:1;background:none;border:none;color:var(--tinta);font-size:14px;font-weight:500;height:32px;outline:none} /* F3 (AREA2): medido 14/500, o Nova tinha 12,5/400 */
.addTarefaInput::placeholder{color:var(--apagado)}
/* rodape de grupo: MESMA grade e padding da linha, pra o "Calcular" alinhar por coluna (medido:
   ClickUp poe um footer-field__calc por coluna visivel, na faixa de 35px do controle Adicionar). */
.grupoRodape{display:grid;grid-template-columns:var(--gridcols,1fr 160px 160px 160px 160px var(--col-acoes));align-items:center;gap:0;padding:0 var(--gutter) 0 0;height:35px} /* mesma trilha da .tRow: se o rodape mantiver a calha de padding, ele desencontra das linhas em 48 */
.grupoRodape .colNome{padding-left:93px} /* medido ALTAIR: o ClickUp poe o "+ Adicionar" 4px antes do nome (-4). ATENCAO: a justificativa antiga dizia "acompanha o cabecalho (97)" e esse 97 NAO EXISTE MAIS — o cabecalho foi a 0 porque o ClickUp nao alinha titulo de coluna com o texto dela. O 93 continua valendo por OUTRO motivo, nao por esse: leva o botao ao recuo 141, e o ClickUp tem 95 — os mesmos 46px do gutter. Quando o gutter for corrigido, este valor cai junto. NAO derivar do cabecalho de novo. */
.grupoRodape .addCtrl{flex:0 1 auto;min-width:0;display:flex;align-items:center}
/* F2 (AREA2): 2o gatilho do rodape, "Adicionar Tarefa" com dropdown, ao lado do curto */
/* F2 (ALTAIR verificacao 1): tinha ficado escondido ate hover — o ClickUp mostra os DOIS gatilhos
   sempre, sem precisar passar o mouse. Fix: visivel por padrao. */
.addTarefaBtn2{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid var(--borda);border-radius:6px;color:var(--apagado);font-size:12px;font-weight:500;height:24px;padding:0 8px;margin-left:10px;cursor:pointer}
.addTarefaBtn2 svg{width:13px;height:13px}
.addTarefaBtn2Ch{display:inline-flex;opacity:.7}
.grupoRodape .colNome{display:flex;align-items:center}
.addTarefaBtn2:hover{color:var(--tinta);border-color:var(--tinta-2)}
.addBtn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--apagado);font-size:14px;font-weight:400;cursor:pointer;padding:0;height:24px}
.addBtn:hover{color:var(--tinta-2)}
.addBtn .addMais{display:inline-flex;align-items:center}
.addBtn .addMais svg{width:14px;height:14px}
/* O-123 leva 2 (ALTAIR, "Calcular de verdade"): virou clicavel (cursor:pointer) e a regra de
   hover ganhou .colCf (campo personalizado tambem tem rodape agora). .calcAtivo (resultado
   calculado) fica sempre visivel, nao so' no hover -- senao a pessoa calcularia e o numero
   sumiria assim que tirasse o mouse, parecendo que nao fez nada. .calcIndisponivel (tipo objeto,
   fora do escopo desta leva) sem cursor de clique, pra nao prometer o que nao faz. */
.calcCel{font-size:12px;color:var(--apagado);opacity:0;cursor:pointer;padding-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:inline-block}
.grupoRodape .colResp:hover .calcCel,.grupoRodape .colInicio:hover .calcCel,.grupoRodape .colData:hover .calcCel,.grupoRodape .colPrio:hover .calcCel,.grupoRodape .colCf:hover .calcCel{opacity:1}
.calcCel:hover{color:var(--tinta-2)}
.calcCel.calcAtivo{opacity:1;color:var(--tinta-2)}

/* KANBAN */
/* O-081 volta 1 (14/09): moldura unica, 24px->28px. Irmao de #tabelaWrap/#calWrap dentro de
   #viewConteudo (padding zero), mesmo grupo. */
#kanban{display:flex;gap:16px;overflow-x:auto;padding:16px 28px;height:100%;align-items:flex-start} /* G3 (ALTAIR verificacao 1): passo de coluna 280 = 264 + gap 16 (medicao anterior de 8 estava errada — nova medicao com x exato dos dois lados) */
/* coluna: largura FIXA 264 (medido; nao estica com o conteudo), transparente e sem borda —
   a cara vem do corpo tingido (.kbCards). */
.kbCol{flex:0 0 264px;max-width:264px;min-width:0;background:transparent;border:none;max-height:calc(100vh - 120px);display:flex;flex-direction:column}
/* E1/E2 (AREA3): "+ Adicionar grupo" a direita da ultima coluna */
/* E1 (ALTAIR verificacao 1): container 264x40 (mesma largura de coluna), botao 143x32 dentro dele —
   era uma DIV 136x38 sem essa moldura. Estilo copiado do .kbAddBtn (14/500, --apagado, raio 8, padding
   0 11, gap 4) pra ficar consistente com o rodape das colunas de verdade. */
.kbAddGrupo{flex:0 0 264px;width:264px;height:40px;box-sizing:border-box;display:flex;align-items:center;padding:0 4px}
.kbAddGrupoBtn{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--apagado);font-size:14px;font-weight:500;width:143px;height:32px;padding:0 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
.kbAddGrupoBtn:hover{color:var(--tinta-2);background:var(--surface)}
.kbAddGrupoBtn svg{width:11px;height:11px}
.kbCol.drop .kbCards{box-shadow:0 0 0 1px var(--roxo)}
.kbTit{padding:0 8px;height:40px;flex:0 0 auto;box-sizing:border-box;display:flex;align-items:center;gap:8px;min-width:0;padding-right:111px} /* flex:0 0 auto — a .kbCol e flex column com max-height, entao o cabecalho ENCOLHIA quando a coluna enchia: 40 declarados, 22,7 medidos com 11 cards. So aparecia no caso CHEIO. ALTAIR: as acoes do card de TOPO flutuam pra dentro desta faixa (top -9). Com "EM ANDAMENTO" sobravam 2px — menos de meio caractere, e o Wilker cria status com nome comprido o tempo todo. Reserva a largura da barra de acoes (99) + folga: o .grupoPillTxt ja trunca com ellipsis, faltava o TETO pra ele truncar contra */ /* medido ALTAIR: cabecalho da coluna 40 (era 38). Rotulo do status: 12px/500 (cu-status-group-header__label) */
/* ACHADO (31/08, construindo o dot de cor do CPL): .kbDot e um <span>, inline por padrao — width/
   height NAO se aplicam a inline (viram caixa zero, invisivel) a menos que o pai seja flex (todo
   uso anterior estava dentro de .ddOp{display:flex}, que "blockifica" o filho automaticamente,
   por isso funcionava sem ninguem notar o problema). A tabela de Entregas usa .kbDot dentro de
   <td> (nao-flex) — mesmo defeito, ja em producao, so nunca visivel porque ninguem reparou no
   ponto que devia aparecer e nao aparecia. display:inline-block e no-op onde ja e filho de flex
   (o navegador ja blockifica), e conserta os 2 contextos nao-flex (aqui e a tabela). */
.kbDot{display:inline-block;width:9px;height:9px;border-radius:3px}
.kbCont{font-size:14px;font-weight:500;/* cor vem inline, DO STATUS: o ClickUp amarra o contador ao status e o Nova usava cinza fixo. Mesmo formato do bug da cor da etiqueta — o dado existe e nao chegava. Copiado do vizinho .grupoPill, que ja recebia. */overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto} /* ALTAIR: nao truncava (visible/clip/normal) e com contagem grande EMPURRAVA o layout; o ClickUp corta. Mesma familia da divida do status comprido, e o gatilho aqui e coluna com muitas tarefas — estado normal de lista de cliente */
/* subtarefa no card do Quadro: TEXTO "N subtarefa" (nao o badge numerico da Lista) */
.kbCardSub{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:14px;color:var(--tinta)} /* medido ALTAIR: "N subtarefa(s)" e 14/400 cor primaria, mesmo tamanho do nome (era 11,5 cinza) — 2,5px E um degrau de cor na mesma linha */
.kbCardSubIco{display:inline-flex}
.kbCardSubIco svg{width:12px;height:12px}
/* corpo tingido, arredondado so embaixo (o cabecalho fecha em cima), padding 0 8 8 (medido).
   O background inline (cor do status a 5%/10%) vem do renderKanban. */
/* C9b (ALTAIR verificacao 3): overflow-y:overlay nao existe mais no Chromium — cai em auto por baixo
   dos panos, entao a barra classica voltava a reservar espaco. O jeito certo nao e trocar o MODO de
   overflow, e matar a RESERVA da propria barra: scrollbar-width:none (Firefox) + ::-webkit-scrollbar
   width:0 (Chromium) — a rolagem continua funcionando, so a barra fica sem largura nenhuma pra roubar. */
/* EXCECAO A LEI gap>padding (O-007, ORION 07/09): o gap de 8px do Kanban e medido pixel a pixel contra o ClickUp (ver comentarios abaixo), fidelidade ao ClickUp e mais antiga e prevalece aqui. Nao mexer sem remedir o ClickUp. */
.kbCards{padding:0 8px 8px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px;border-radius:0 0 8px 8px;min-width:0}
.kbCards::-webkit-scrollbar{width:0}
/* C9a (ALTAIR verificacao 1): o CU tem 2 camadas de sombra (hairline 1px + drop sutil) — o Nova tinha
   so 1. Preto puro nao pinta no tema escuro (mecanismo ja documentado no hover/C10): a camada hairline
   vira um contorno CLARO sutil em vez de escuro — adapta a opacidade/cor, mantem as DUAS camadas.
   C8: min-height 40 (o card so-com-nome tinha 33, alvo corrigido pra 40). */
/* BUG REAL achado pelo Wilker (print, nao numero): .kbCards e flex-column e .kbCard herdava
   flex-shrink:1 (padrao) — com muitos cards a coluna esmagava TODOS os itens abaixo da altura de
   conteudo, e como overflow e visible, o conteudo vazava por cima do card seguinte. flex:0 0 auto
   trava o card no tamanho do proprio conteudo; quem rola e o container (.kbCards), nunca o item. */
.kbCard{background:var(--bg);border:none;border-radius:10px;margin:0 1px;padding:9px 11px 4px;min-height:40px;flex:0 0 auto;box-sizing:border-box;cursor:pointer;box-shadow:0 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.35);transition:background .12s} /* medido ALTAIR: board-task radius 10, sem borda, elevado em repouso (sombra sutil, separa da coluna). Insets do ClickUp no padding: topo 9, lados 11, base 4 — MEDIDO EXATO 29/08 (o codigo tinha 10/12, 1px a mais que o proprio comentario ja dizia; o '~' virou numero). MARGEM 0 1px: medido ALTAIR — a largura UTIL da coluna e 238 nos dois apps (o Nova tem calha 8 e padding 9, o ClickUp calha 10 e padding 8; as duas construcoes chegam no mesmo 238). Os 2px que sobravam na largura do card eram a margem lateral do card DELES, nao padding nem calha. Mexer no padding da coluna quebraria os 238 que ja batem. */
.kbCard:hover{background:var(--surface-2)} /* medido ALTAIR no PIXEL: sombra preta no escuro nao pinta (3-6 unidades). O mecanismo do ClickUp (card sobe no hover) traduz pra CLAREAR o fundo — rgb(36,36,43)=--surface-2, 21 unidades sobre a area toda */
.kbCardNome{font-size:14px;font-weight:500;color:var(--tinta);line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ALTAIR: quebrava em 2 linhas (altura 40,6) contra 1 (20) no ClickUp, mudando a altura do card e quantos cabem na tela. line-height explicito de 20 no lugar do 1.45 — parte do padrao sistematico (o Nova usa line-height normal onde o ClickUp declara valor) */ /* medido ALTAIR: card e TAREFA (14/500 primaria), nao item secundario — mesmo achado da subtarefa do painel */
.kbCardFoot{display:flex;align-items:center;gap:10px;height:28px;box-sizing:content-box;margin-top:10px;padding-top:9px} /* medido ALTAIR: properties-band do ClickUp e 28 FIXO quando existe (avatar 26 ou icone 14 centram nela), nao varia. AUSENTE-QUANDO-VAZIA: CONFIRMADO em 30/08 — o card mais pobre dele (33 de altura) nao tem essa faixa nem marcador nenhum. O rodape daqui passou a nascer so quando ha responsavel, data ou prioridade. C7 (AREA3): border-top SAIU — medicao nova confirma que o ClickUp nao tem linha separadora nenhuma, so o espacamento. */
.kbCardFoot .tData{margin-left:auto}
.kbAvatar{width:20px;height:20px;border-radius:50%;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;flex:none}
.kbFootIco{color:var(--apagado);display:inline-flex;align-items:center}
.kbFootIco svg{width:14px;height:14px}
.kbCardTags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.kbTag{font-size:10px;padding:1px 7px;border-radius:9px;border:1px solid;line-height:1.5}
/* adicionar tarefa: BOTAO (medido), nao input cru. 32px, largura total menos padding, transparente,
   cor = cor do status (inline), radius 8, 14px/500. O input dark so nasce apos o clique. */
.kbAdd{margin-top:4px;flex:0 0 auto} /* mesmo risco do .kbCard: item direto de .kbCards (flex-column), sem isso tambem esmagaria em coluna cheia */
.kbAddBtn{width:100%;height:32px;background:transparent;border:none;border-radius:8px;padding:0 11px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;cursor:pointer;text-align:left;color:var(--apagado)} /* D2 (AREA3): cinza discreto fixo, nao mais a cor do status. D2b (ALTAIR verificacao 1): gap 6->4 */
.kbAddBtn:hover{background:color-mix(in srgb,var(--tinta) 7%,transparent);color:var(--tinta-2)}
.kbAddMais{display:inline-flex;align-items:center}
.kbAddMais svg{width:14px;height:14px}
.kbAddInput{width:100%;height:32px;background:var(--bg);border:1px solid var(--roxo);border-radius:8px;padding:0 11px;font-size:13px;color:var(--tinta);outline:none}
.kbAddInput::placeholder{color:var(--apagado)}

/* CALENDARIO (grade mensal) */
/* O-081 volta 1 (14/09): moldura unica, 24px->28px. Mesmo grupo de #kanban/#tabelaWrap. */
#calWrap{padding:16px 28px}
/* A1 (AREA4): calTopo morava dentro do conteudo da view (2a faixa, embaixo). Virou o proprio
   #calToolbarSlot, dentro de .viewControle — MESMA faixa dos controles da direita, como o ClickUp. */
.calToolbarSlot{align-items:center;gap:8px}
.calTopo{display:flex;align-items:center;gap:8px;margin-bottom:14px} /* mantido: nao referenciado mais no JS, mas outras telas podem reusar a classe */
.calNav{width:24px;height:24px;border-radius:6px;background:none;border:1px solid var(--borda);color:var(--tinta-2);font-size:16px}
.calNav:hover{background:var(--surface-2);color:var(--tinta)}
.calMes{font-size:14px;font-weight:500;color:var(--tinta);margin-left:4px}
.calHoje{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;background:none;border:1px solid var(--borda);color:var(--tinta-2);padding:0 7px;border-radius:6px;font-size:12px;line-height:16px;font-weight:500} /* ALTURA DECLARADA, nao calculada — corrigido depois que a ALTAIR mediu o mecanismo do ClickUp: height 24 + box-sizing border-box + padding vertical ZERO + flex centrado + line-height 16. A minha primeira versao usava line-height 14 e chegava em 24 HOJE, mas voltaria a variar se a fonte mudasse. O que viaja e a REGRA ('altura declarada'), nao o numero. Padding lateral 10 -> 7, tambem medido. */ /* line-height EXPLICITO e a origem do +1,2 que a ALTAIR achou em sete botoes: sem ele o 'normal' a 12px da 15,24, e 4+4 de padding + 2 de borda + 15,24 = 25,24 — exatamente o que ela mediu. Com 14 fecha em 24, o valor do ClickUp. */ /* sem fundo, ~24 de altura (medido) */
.calHoje:hover{background:var(--surface-2);color:var(--tinta)}
.calModoBtn{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;gap:6px;background:none;border:1px solid var(--borda);color:var(--tinta);padding:0 7px;border-radius:6px;font-size:12px;line-height:16px;font-weight:500} /* mesmo mecanismo do .calHoje: altura declarada em vez de calculada. */ /* mesma origem do +1,2 do .calHoje. E o peso 500: era 400 enquanto o VIZINHO 'Hoje' usava 500 — contradicao interna, e no ClickUp os dois concordam em 500. */
.calModoBtn:hover{background:var(--surface-2)}
.calModoBtn svg{width:13px;height:13px;color:var(--apagado)}
.calModoMenu{min-width:150px;padding:4px;border-radius:12px}
.calModoTitulo{font-size:11px;color:var(--apagado);padding:6px 12px 4px}
.calModoItem{display:flex;justify-content:space-between;align-items:center;gap:28px;width:100%;background:none;border:none;color:var(--tinta);font-size:13px;padding:5px 12px;border-radius:6px;cursor:pointer;text-align:left}
.calModoItem:hover{background:var(--surface-2)}
.calModoItem.ativo{color:var(--roxo-2)}
.calModoItem kbd{font-size:11px;color:var(--apagado);background:var(--surface-2);border-radius:4px;padding:1px 6px;font-family:inherit;min-width:18px;text-align:center}
/* B6 (ALTAIR verificacao 1): cabecalho dos dias (.calDiasSemHead) e grade de celulas (.calGrade)
   viraram DOIS grids empilhados dentro de .calGradeWrap — so a grade de celulas rola (overflow-y
   proprio), o cabecalho fica fixo em cima. Antes era um grid so, e rolar ate hoje rolava a PAGINA
   inteira (o scroll de verdade era so o de #main, que carrega TUDO junto, barra inclusive). */
.calGradeWrap{flex:1;min-width:0;margin-right:49px;display:flex;flex-direction:column;max-height:calc(100vh - 220px)}
.calDiasSemHead{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--borda);border:1px solid var(--borda);border-bottom:none;border-radius:var(--r) var(--r) 0 0;overflow:hidden;flex:0 0 auto}
.calGrade{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:min-content;gap:1px;background:var(--borda);border:1px solid var(--borda);border-radius:0 0 var(--r) var(--r);overflow-y:auto;flex:1;min-height:0;min-width:0}
.calDiaSem{background:var(--bg);padding:4px 10px;text-align:left;font-size:13px;color:var(--tinta);font-weight:500} /* medido ALTAIR: cabecalho do dia senta no MESMO fundo da coluna (sem faixa cinza), cor PRIMARIA, altura 25 (padding 4) */
/* min-width:0 nas celulas: sem isso a coluna 1fr estica pro min-content do evento (nome longo) e as
   7 colunas perdem a largura igual — o sabado saia da tela. Com min-width:0, o track segura 1fr e o
   evento usa o ellipsis (que ja existe) em vez de empurrar a coluna. */
/* B5 (AREA4, ALTAIR verificacao 1): 170 corrigido pra 141 — medicao nova com 4 referencias exatas
   (numeros dos dias em y 309/450/591/732, passo 141 entre eles). Supera a medicao antiga (170), que
   tinha sido feita num estado especifico (as duas barras laterais abertas) sem essas referencias diretas. */
.calCel{position:relative;background:var(--bg);min-height:141px;min-width:0;padding:6px 6px 24px;display:flex;flex-direction:column;gap:3px}
/* ALTAIR 30/08: as 42 celulas do calendario do ClickUp tem UM fundo so, rgba(0,0,0,0). Ele nao distingue
   celula de fora do mes por fundo — so pela regra de cor do NUMERO, que e por coluna. O --surface daqui
   fazia sentido quando a celula era muda; com numero dentro, virou uma afirmacao que o original nao faz. */
/* as 42 iguais: transparente deixava o veu da GRADE aparecer e as celulas de fora ficavam mais CLARAS
   que as do mes — a diferenca inverteu de lado em vez de sumir. O que o ClickUp tem e uma superficie so. */
.calCel.fora{background:var(--bg)}
.calCel[data-ms]:hover .calAdd{opacity:1;pointer-events:auto}
.calNum{opacity:.7;position:absolute;right:9px;bottom:5.5px;font-size:12px;font-weight:400;color:var(--tinta)} /* numero no canto inferior direito (medido); cor PRIMARIA (ALTAIR: era secundaria) */
.calCel.fds .calNum{opacity:1;color:rgb(112,112,116)} /* fim de semana, medido ALTAIR: o ClickUp usa cinza mais fraco nas colunas 0 e 6 (11 de 42, todos la). O valor dele e de tema claro — o que viaja e a RAZAO DE CONTRASTE: rgb(124,130,141) sobre branco da 3,86, e rgb(112,112,116) sobre o --bg 15 da o mesmo 3,86. Tentei antes com --apagado a .7 e dava 2,65, abaixo do piso: 'mais apagado' nao e o alvo, o degrau medido e. */
/* ORDEM IMPORTA: esta regra fica DEPOIS da de fim de semana de proposito. As duas tem a mesma
   especificidade, entao vence a ultima — e no ClickUp `cal-today` vem depois de `cal-weekend`. Estava
   antes e o sabado apagava o destaque de hoje. So da para ver o defeito quando hoje CAI num fim de
   semana: nos outros cinco dias ele fica escondido. */
/* ALTAIR 30/08, achado pela REGRA e nao pela cor: no ClickUp a celula de hoje casa TRES regras, e a de
   hoje vence por vir depois com a mesma especificidade — logo hoje sobrepoe fim de semana em qualquer
   coluna, e nao dependia do sabado da amostra. E a declaracao dele nao e um valor: e
   `color: var(--theme-main-color); opacity: 1`. Ou seja o mecanismo e "hoje usa a cor de destaque do
   tema". Entao o fiel aqui NAO e copiar o rgb(89,93,102) dele (que e a cor principal do tema CLARO dele,
   e por isso aparecia tambem no fundo do .calAdd): e usar a cor de destaque DAQUI. Papel viaja entre
   temas, valor nao. O peso 700 era invencao nossa e sai. */
.calCel.hoje .calNum{opacity:1;color:var(--roxo);font-weight:400} /* hoje NAO esmaece: o .7 vale para o dia normal (medido ALTAIR); aqui o destaque e o ponto */ /* hoje: so o numero destaca (medido: sem fundo roxo nem badge, o roxo era invencao nossa) */
.calAdd{position:absolute;right:20.5px;bottom:2.5px;width:18px;height:18px;border:none;border-radius:2px;background:rgb(89,93,102);color:#fff;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s;cursor:pointer;padding:0} /* par dos mais fieis do mapa: 18x18, raio 2 e fundo rgb(89,93,102) IDENTICOS nos dois, oculto em repouso nos dois. So as distancias divergiam — 26/4 aqui contra 20,5/2,5 no ClickUp (medido ALTAIR). */ /* medido ALTAIR: + de criar tarefa no dia — mesma linha do numero, imediatamente a esquerda (gap 5), so no hover da celula */
.calAdd svg{width:10px;height:10px}
.calCel[data-dia]:hover .calAdd{opacity:1;pointer-events:auto}
/* ALTAIR: FOCO INVISIVEL. O .calAdd e <button> e o opacity:0 NAO tira da ordem de tabulacao — o foco
   chegava nos 31 botoes e o usuario nao via nenhum. Pior que nao receber foco: o teclado "funciona" e a
   tela nao acompanha. Aqui e :focus no PROPRIO botao, nao :focus-within na celula — o foco ja chega,
   o que faltava era ele APARECER quando chega. */
.calAdd:focus,.calAdd:focus-visible{opacity:1;pointer-events:auto}
.calAdd:focus-visible{outline:2px solid var(--roxo);outline-offset:1px} /* offset POSITIVO: o botao tem 18px e fundo proprio; anel por dentro comeria o + */
/* C5 (AREA4, ALTAIR verificacao 2): medido de novo — SEM borda nenhuma (0px none, nem contorno nem
   esquerda) e altura 37 (Nova tinha 31). Removida a borda toda, padding vertical 6->8 pra fechar a
   altura. Cor de fundo exata NAO capturada por ela em 2 tentativas (elemento e o body transparentes) —
   mantido o tingido por status ja construido, ajustar so aqui se ela achar o valor certo depois. */
/* C5 (AREA4, ALTAIR verificacao 4): a causa raiz nao era padding insuficiente, era padding DEMAIS +
   fonte grande demais — medido no ClickUp: padding 4px (nao 10), nome 12/400 (nao 13). Com isso a
   caixa fecha em 37 SOZINHA nos dois casos (com e sem horario) — nao e pra forcar altura fixa. */
.calEv{min-width:0;max-width:100%;border:none;border-radius:2px;padding:4px 6px;font-size:12px;font-weight:400;line-height:1.3;cursor:pointer;overflow:hidden;box-sizing:border-box}
.calEv:hover{filter:brightness(1.12)}
.calEv.calEvPast{opacity:.7} /* vencida em aberto esmaece (medido: cal-event-past) */
/* C3/C4 (AREA4): topo (nome + icone de status) + linha de horario, quando existe */
.calEvTopo{display:flex;align-items:center;gap:4px}
.calEvNome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px} /* C5 (AREA4, ALTAIR verificacao 5): alvo real tem 2 alturas (26 sem hora, 37 com) — nome 16->18 fecha as duas sozinho, junto do ajuste da hora */
/* O-091 item 1: fica -- codifica ESTADO (aberto=tracejado, fechado=solido em .cheio), mesmo
   vocabulario de .grupoPillIco/.tStatus.stAberto. Nao e moldura. */
.calEvStatusIco{width:10px;height:10px;border-radius:50%;border:1.5px dashed currentColor;box-sizing:border-box;flex:0 0 auto;color:var(--apagado)}
.calEvStatusIco.cheio{border-style:solid;background:currentColor}
.calEvHora{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:400;line-height:11px;color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* C3 (AREA4, ALTAIR verificacao 2): 9/400 medido — era 11px sem peso explicito. verificacao 5: line-height 12->11, margin-top saiu (a conta dela e 4+18+11+4=37, sem gap entre as linhas) */
.calEvHora svg{width:11px;height:11px}
/* multi-dia: barra unica que transborda pra direita (largura setada por JS) + z-index acima das vizinhas; stub reserva a altura no dia do meio */
.calEvSpan{position:relative;z-index:5;max-width:none}
.calEvStub{visibility:hidden}
/* painel lateral de nao-agendadas / em atraso (borda direita, nasce colapsado) */
.calCorpo{display:flex;gap:12px;align-items:flex-start;position:relative} /* relative: o painel lateral sai do fluxo (absolute) pra grade ganhar largura total, como o ClickUp (item 38) */
.calCorpo .calGrade,.calCorpo .calAgenda{flex:1;min-width:0;margin-right:49px} /* reserva 40 do strip colapsado + 9 de folga (medido ALTAIR: ClickUp deixa 9), pro strip ficar AO LADO e nao cobrir o sabado. Celula ~189,5. Priorizei SEM sobreposicao > celula exata (escolha da ALTAIR); os 194,8 exatos exigiriam recuperar o padding da view, camada compartilhada */
.calLatVCont{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:500;color:var(--tinta-2);white-space:nowrap}
/* D3 (AREA4): icone de lista no topo do painel, acima das abas — faltava por completo */
.calLatColapsada .calLatVIco{color:var(--apagado);display:inline-flex}
.calLatColapsada .calLatVIco svg{width:16px;height:16px}
.calLatTopoEsq{display:flex;align-items:center;gap:6px}
.calLatTopo .calLatVIco{color:var(--apagado);display:inline-flex}
.calLatTopo .calLatVIco svg{width:15px;height:15px}
.calLatAtraso{color:var(--vermelho);font-weight:600} /* medido ALTAIR: no ClickUp o contador de 'Em atraso' e vermelho rgb(226,81,72) peso 600 e no Nova era cinza como o resto. Numero de tarefa atrasada em vermelho e INFORMACAO, nao decoracao — e o alerta que o Nova nao dava. Usei o --vermelho do proprio app (#e5484d, quase o mesmo tom) e SO quando ha atrasada: zero em vermelho alarmaria sem motivo. */
.calLatNome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.calLateral{position:absolute;top:0;right:0;z-index:5;width:240px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);max-height:calc(100vh - 200px);overflow-y:auto;padding:8px;box-shadow:0 8px 30px rgba(0,0,0,.45)} /* FORA do fluxo (item 38): sobrepoe a grade a direita quando expande, como o ClickUp */
/* colapsada: faixa fina de 40px colada na borda direita, altura total, sem contorno proprio (definida DEPOIS de .calLateral pra vencer a cascata) */
.calLateral.calLatColapsada{width:40px;top:0;bottom:0;max-height:none;height:auto;border:0;border-radius:0;background:none;box-shadow:none;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:20px;cursor:pointer;overflow:hidden}
.calLateral.calLatColapsada:hover{background:var(--surface-2)}
.calLatTopo{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 8px;font-size:13px;color:var(--tinta)}
.calLatFechar,.calLatReabrir{background:none;border:none;color:var(--apagado);width:22px;height:22px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center}
.calLatFechar svg,.calLatReabrir svg{width:14px;height:14px}
.calLatFechar:hover,.calLatReabrir:hover{background:var(--surface-2);color:var(--tinta)}
.calLatReabrir{border:1px solid var(--borda);align-self:flex-start;flex:0 0 auto}
.calLatSec{margin-top:6px}
.calLatCab{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--apagado);padding:6px 6px 4px;display:flex;gap:6px}
.calLatCab span{color:var(--tinta-2)}
.calLatItem{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:6px;font-size:12.5px;color:var(--tinta);cursor:pointer;background:var(--bg);margin-bottom:4px;border:1px solid var(--borda);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calLatItem:hover{background:var(--surface-2)}
.calLatBarra{width:3px;align-self:stretch;border-radius:2px;flex:0 0 3px;min-height:16px}
.calLatVazio{font-size:12px;color:var(--apagado);padding:6px}

/* ============================================================================
   O-012 (ORION 08/09), ordem do Wilker: "nao temos nada padronizado nesta
   porra, quero as coisas padronizadas para tudo". Passo 1, CONTRATO DO MOLDE
   -- so declaracao/organizacao, NENHUM valor visual mudou aqui (trava 1 do
   ALTAIR: consolidar nao e redesenhar; melhoria vira nota separada, nao entra
   no lote de unificacao).

   GABARITO APROVADO PELO WILKER (aba Meta do Moon, `moonKpiCard()` em
   nova.js): `.cliCards` (grade) > `.card.finKpi` (celula) > `.cardLabel` +
   `.cardValor` + `.finKpiSub` opcional. ESTE e o molde unico do app daqui pra
   frente. Antes desta ordem existiam 3 sistemas de card paralelos que nunca se
   conheciam -- cada um com seu proprio gap/padding hardcoded, por isso a O-018
   (pares colados) e o item 8 da O-016 (lei de espacamento) nunca fechavam de
   verdade: nao existia UMA lei, existiam varias, uma por sistema.
     1. `.homeCard` (Visao geral do Moon, Financeiro, a maioria dos departamentos)
     2. `.card.finKpi`/`.cliCards` -- ESTE, o aprovado.
     3. `.kpi`/`.kpis-fortes`/`.kpis-leves` (SO moon_relatorio.js, relatorio de
        conta Meta E Google -- moon_google_relatorio.js e territorio do
        PHOENIX, migracao la vai ser reportada a ele, nao editada por mim).

   PAPEL DE CADA UM, resolvido por medicao (nao suposicao) antes de mexer:
   `.homeCard` hoje e usado 100% como CONTAINER generico de secao (titulo +
   corpo -- 34 `.homeCardTit` para 34 `.homeCard`, 33 `.homeCardBody`, quase
   1:1). NUNCA aparece como celula de KPI solta. Os dois papeis (KPI vs
   container) JA estao separados na pratica -- `.homeCard` nao migra pro molde
   de KPI porque nao faz esse papel; o que migra pra `.card.finKpi` e SO o que
   hoje mostra numero+rotulo isolado (o sistema 3, `.kpi` do relatorio de
   conta). `.homeCard` continua existindo como container, mas passa a herdar a
   MESMA lei de espacamento do molde (`--sp-entre-cards`), nao uma propria.

   NOMES DE PAPEL "destaque" -- a armadilha de colisao que o ALTAIR mandou
   tratar: `kpiDestaque` (linha ~2789, `.kpi.kpiDestaque`) e `cardDestaque`
   (linha ~410, `.homeCard.cardDestaque`) NAO disputam o mesmo elemento hoje
   (seletores com qualificador de tipo diferente, `.kpi` vs `.homeCard` --
   confirmado, zero sobreposicao real). Decisao, pra ficar registrada em vez de
   suposta: `cardDestaque` = emphase no CONTAINER inteiro (nivel `.homeCard`).
   `kpiDestaque` = emphase numa CELULA individual dentro de uma fileira de KPI
   (nivel `.card.finKpi`, o que os funis Qualificados/Visitas/Vendas usam).
   Nunca os dois no mesmo elemento, cada um no seu nivel -- por isso NAO
   renomeei (renomear sem necessidade real cria mais um nome pra lembrar).
   Quando a migracao do sistema 3 acontecer (proximo passo, nao este), o
   `kpiDestaque` do `.kpi` vira `kpiDestaque` do `.card.finKpi` -- mesmo nome,
   mesmo papel, nova casa.

   ESPACAMENTO NASCE NO MOLDE (trava 5 do ALTAIR, nao depois): `--sp-entre-cards`
   ja e o gap desta grade (linha abaixo) -- PROPORCIONAL ao token, nao um 18px
   fixo por tela. Isso e a lei que a O-018 vai reusar quando eu chegar nela: gap
   de bloco-contra-bloco tambem vira este mesmo token, nao um numero novo. */
/* CLIENTES */
/* O-080 (14/09), LEI DO ALINHAMENTO (Wilker, direto: "já falei que é pra virar PADRÃO PARA
   TUDO"): componente NUNCA paga borda de tela -- quem paga e' o CONTAINER da tela, uma vez so'.
   Ate aqui `.cliCards` pagava os 24px horizontais por conta propria, o que da certo SO' quando
   ele e' o topo nu da tela (ficha de cliente, onde nasceu) e da ERRADO toda vez que alguem o usa
   DENTRO de um container que ja paga (`.clienteSecoes`, `#ovWrap`) -- 2 telas quebradas no mesmo
   dia por esse motivo (visao geral do Financeiro, ficha do parceiro), a segunda depois que eu
   MESMO escopei o primeiro conserto estreito demais (`#ovWrap .cliCards`, ver O-069/O-080) em vez
   de tirar a causa. Horizontal SAI da base (SO' os 2 lados -- vertical continua, e respiro
   interno, nao borda de tela). Quem nasceu dependendo disso (a aba "Geral" da ficha de cliente,
   unico lugar sem um `.clienteSecoes` por cima) ganhou o `.clienteSecoes` que faltava, igual toda
   aba irma ja tinha -- nunca o padding de volta no componente. */
.cliCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-entre-cards);padding:24px 0}
/* PROBLEMA (Wilker, 31/08, irritado com print): 8 cards na linha do topo, 200px minimo so cabia
   7 em 1920px — o "Entregas" (o mais procurado apos vincular tarefa) sobrava sozinho numa 2a
   linha, vazio do lado. Primeira tentativa (auto-fill/minmax mais estreito) foi ABANDONADA: o
   Wilker testa em 2 larguras que ele mede (1920 e 1366) e o auto-fill so GARANTE quantas colunas
   CABEM, nao COMO SOBRA quando nao cabe tudo — 7 itens podem quebrar 6+1, 5+2 ou 4+3 dependendo
   do pixel exato da janela, e ele foi claro: "nunca 6+1". Um mecanismo que da certo em 1920 e
   1366 mas pode dar 6+1 numa largura intermediaria que ninguem testou nao serve.
   Com "Segmento" fora (foi pro titulo, item novo abaixo), sobram 7 cards. Troquei pra 2
   larguras EXPLICITAS, cada uma sempre limpa (nunca depende de quantos px exatos cabem):
   - >=1700px (cobre o teste em 1920 com folga): repeat(7,1fr), tudo numa linha so.
   - abaixo disso (cobre o teste em 1366): repeat(4,1fr), sempre 4+3 — o split mais equilibrado
     possivel pra um numero impar, nunca 6+1 nem 5+2, em QUALQUER largura abaixo do corte.
   Trade-off registrado: isso trava no numero de hoje (7). Se um card entrar/sair desta linha
   (ex.: a ideia do ARCTURUS de mostrar idade do dado), os 2 numeros (7 e 4) precisam revisar
   junto — decisao deliberada, priorizando "nunca quebra feio" sobre "se auto-ajusta sozinho a
   qualquer contagem futura", porque foi o pedido explicito desta vez. Nao mexi na .cliCards
   generica (id escopado, ver comentario acima na propria regra). */
#cliCardsTopo{grid-template-columns:repeat(4,1fr)}
@media (min-width:1700px){#cliCardsTopo{grid-template-columns:repeat(7,1fr)}}
.card{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:16px}
.cardLabel{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--apagado)}
.cardValor{font-size:20px;font-weight:700;margin-top:6px}
.cardValor.pequeno{font-size:14px;font-weight:600}
/* cards do topo com linha de apoio (Receita/Midia/Leads/Entregas, ORDEM-CAMPOS-FICHA.md fase 2) —
   mesmo .card/.cardLabel/.cardValor, so acrescenta a linha pequena embaixo */
.cardSub{font-size:11px;color:var(--apagado);margin-top:4px}
.pontoStatus{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:0 0 7px}
.pontoStatus.inativo{background:#555}

/* PAINEL FINANCEIRO (Orion) — 04/09, print orion.php do Oblivion ("colocar essas tabelas
   tambem" + grafico "mais bonito"). Viaja a ESTRUTURA do Oblivion, nao o fundo branco dele —
   reusa .cliCards/.card/.homeCard/.homeCardTit/.homeCardBody ja existentes, so acrescenta o que
   e novo de fato: sub-linha de KPI, o grafico SVG, as 2 tabelas leves e o rotulo de frescor. */
/* 5 cards (04/09, adendo do Wilker: MRR/Recebido/Saldo/Inadimplencia + o novo Repasse|Sevenny),
   sempre 1 fileira em 1536 e 1920 (pedido explicito, "nao pode ter quebra de linha"); quem cede
   e a fonte do valor (.finKpi .cardValor abaixo), nunca o layout. ERA `repeat(5,minmax(0,1fr))`
   fixo -- CORRIGIDO O-080 volta 2 (ALTAIR/Wilker, 14/09): esse "5" so descrevia ESTA tela, mas
   `.finCliCards` e reusada por outras 5 (Contratos Juridico=3 cards, Cobrancas em Aberto=1,
   Reajustes=2, Comissoes&Split=2, Parceiros=1, ficha do parceiro=4), cada uma travada nas mesmas
   5 colunas fixas -- card real 20% mais estreito do que devia, ou fileira com 4/5 vazios (medido
   ao vivo: 1 card sozinho ocupando 214px de 1143, resto em branco). Primeiro conserto (volta 1)
   escopou so a ficha do parceiro (`.finCliCards4`) -- ALTAIR pediu pra matar a familia inteira em
   vez de criar `.finCliCards1/2/3`, entao virou `auto-fit`: o numero de colunas nasce do numero
   de cards de verdade (min 200px, mesmo minimo do `.cliCards` generico acima), tracks vazios
   colapsam a 0 (nao aparecem como espaco morto) e os cards que existem dividem a largura toda
   entre si. Com 5 cards reais (Financeiro visao geral) o resultado e IDENTICO a antes -- 1143px
   / 5 cabe em 5 colunas de 200px+, nunca quebra linha. `.moonOblivion .cliCards.finCliCards` (mais
   abaixo) ja tinha seu PROPRIO auto-fit/minmax(168px) havia tempo, sem essa dor -- essa regra
   nunca chega la, prefixo mais especifico ganha sempre. */
.finCliCards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* subtitulo de card = SEMPRE 1 linha (pedido explicito: "ela nao quebra ela esconde o
   restante") — corta com reticencias, o texto completo mora no title (tooltip). */
.finKpiSub{font-size:11px;color:var(--apagado);margin-top:5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finFrescor{color:var(--apagado)}
.finFrescorVelho{color:var(--amarelo)}
.finFrescorDot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amarelo);margin-left:6px;vertical-align:middle}
/* valor tambem nunca quebra — se apertar (5 colunas em telas menores), a fonte cede primeiro
   (clamp), so ellipsa como ultimo recurso. */
.finKpi .cardValor{font-size:clamp(14px,1.3vw,20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* O-080 volta 1: nesta MESMA tela, a marca "incompleto" (.pe) entrava na mesma linha do valor
   dentro de `.finKpi .cardValor`, que e' nowrap+ellipsis (regra acima) -- o valor perdia
   caracteres pra marca ("R$ 10.966,00 inc..."). Lei do Wilker: valor de dinheiro NUNCA e'
   espremido, isso e' pior que texto cortado comum (tela de decisao financeira). Varri o
   arquivo: esse padrao (valor+.pe na mesma div) so existe nestes 3 cards desta tela, entao a
   excecao fica LOCAL (`.cardValorBadge`), sem mexer no `.finKpi .cardValor` generico que as
   outras ~10 telas que reusam `.finCliCards` dependem pra nao quebrar layout. O numero
   (`.cardValorNum`) fica nowrap sempre; quem cede e quebra pra 2a linha se nao couber e' a
   marca, nunca o numero. Especificidade 3 classes de proposito, pra vencer a regra acima sem
   depender de ordem no arquivo. */
.finKpi .cardValor.cardValorBadge{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;white-space:normal;overflow:visible;text-overflow:clip}
.cardValorBadge .cardValorNum{white-space:nowrap}
/* O-107 (ORION, 16/09): card C da fileira de KPIs de Parceiros (telaParceirosLista) e' uma
   TABELA (nome/clientes/valor por parceiro), nao rotulo+valor -- reusa `.finTab` (mesma classe
   da tabela de baixo desta tela, gabarito antes de invencao) dentro do `.card.finKpi`, so' com
   o respiro do topo que `.cardValor` teria (margin-top:6px, ~linha 1004), porque aqui quem
   ocupa o lugar do valor e' a tabela inteira. Cresce pra baixo com o numero de parceiros sem
   quebrar a fileira: `.cliCards.finCliCards` e' grid auto-fit (~linha 1032), coluna nao muda
   com a altura de um item. */
.finKpiRanking table.finTab{margin-top:6px}
/* O-087 (Wilker, 14/09): a excecao `.finKpiSub.finKpiAviso` que existia aqui (criada na O-080
   pra deixar a frase de "incompleto" quebrar em varias linhas em vez de cortar) morreu junto
   com as proprias frases -- "nao quero essas descricoes, remova" matou o texto que a excecao
   existia pra exibir. Regra removida por ficar sem nenhum uso (nao so' desativada). A marca
   "incompleto" sozinha (`.pe`, dentro de `.cardValorBadge` acima) continua valendo. */
/* card novo Repasse / Sevenny — dividido na HORIZONTAL (2 metades empilhadas, como 2 mini-cards
   um embaixo do outro — correcao do Wilker: nao e lado a lado), mesma largura/fileira dos outros
   4, sem subtitulo. Valor num degrau menor de fonte (cardValor abaixo) pra caber os 2 pares
   rotulo+valor na mesma altura que os outros cards ocupam com 1 par + subtitulo. */
.finKpiSplit{display:flex;flex-direction:column;padding:0}
.finSplitMetade{flex:1 1 0;min-width:0;padding:11px 16px;display:flex;flex-direction:column;justify-content:center}
.finSplitDiv{height:1px;background:var(--borda-2);flex:0 0 1px;margin:0 16px}
.finKpiSplit .cardValor{font-size:clamp(13px,1.1vw,16px);margin-top:3px}
/* O-080 (14/09): mesma lei do `.cliCards` acima -- horizontal sai daqui tambem, o container da
   tela paga. Bottom (14px, respiro antes do proximo bloco) continua, nunca foi borda. */
.finGraficoWrap,.finMovDespWrap{padding:0 0 14px}
.finMovDespWrap{display:flex;gap:14px;align-items:stretch}
.finMovDespWrap .clienteBloco:first-child{flex:2 1 0;min-width:0}
.finMovDespWrap .clienteBloco:last-child{flex:1 1 0;min-width:0}

/* grafico "Faturamento por mes" — SVG inline construido por string (CSP do Nova nao carrega
   lib de CDN nenhuma pro app em si, so pra Artifact). preserveAspectRatio=none + viewBox fixo =
   fluido 100% de largura sem precisar recalcular nada em JS no resize. */
/* O-081 volta 1 (14/09): NAO entra na moldura unica -- confirmado por DOM (pedido do Maestro,
   nao por nome): `.gfWrap` monta dentro de `#finGraficoBox` (renderGraficoFaturamento, chamada em
   telaFinanceiroComoHome), que ja vive DENTRO de `#ovWrap` (28px). Componente interno que ja mora
   dentro de outra moldura -- 8px aqui e respiro do grafico em cima da moldura que o pai ja paga,
   nao uma moldura de tela propria (mesma lei do O-080: componente cede ao pai, nunca soma). */
.gfWrap{position:relative;padding:4px 8px 0}
.gfSvg{width:100%;height:220px;display:block;font-family:inherit}
.gfGrade{stroke:var(--borda);stroke-width:1}
.gfMedia{stroke:var(--borda-2);stroke-width:1;stroke-dasharray:4 4}
/* O-103 (ORION, 16/09), lei do Wilker "texto nunca deforma": este SVG tem preserveAspectRatio
   none com largura (100% do card) e altura (220px fixo contra viewBox 240) escalando por fatores
   DIFERENTES -- <text> dentro herdava as duas escalas e saia esmagado. Rotulos saem do SVG,
   viram HTML posicionado por cima (`.gfLabels`, mesma tecnica do BUG 13 em `.moonGrafico`,
   ~nova.js:8037) -- o SVG fica so' com formas (barra/linha/grade), que esticar sem manter o
   aspecto nao le como defeito. `.gfLabels` cobre EXATAMENTE a caixa do `.gfSvg` (mesmo
   top/left/right que o padding de `.gfWrap` desloca, mesma altura de 220px) -- os `left`/`top`
   em % de cada rotulo (escritos no JS) sao fracao de W/H do viewBox, entao caem no pixel certo
   dentro desta caixa nao importa a largura real do card. `pointer-events:none` pra nao tampar o
   `.gfHover` (tooltip) que mora no SVG por baixo. As 5 classes de rotulo trocam `fill`/SVG por
   `color`/HTML; o `transform` substitui `text-anchor`/baseline do SVG (centraliza e ancora pelo
   pé da letra, igual o texto crescia PRA CIMA da baseline original). */
.gfLabels{position:absolute;top:4px;left:8px;right:8px;height:220px;pointer-events:none}
.gfMediaTxt{position:absolute;transform:translateY(-100%);color:var(--apagado);font-size:10px;white-space:nowrap}
.gfBarra{transform-origin:bottom;transform-box:fill-box;animation:gfCresce .5s cubic-bezier(.16,1,.3,1) backwards}
.gfBarraPico{filter:drop-shadow(0 0 6px rgba(255,176,32,.35))}
@keyframes gfCresce{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.gfBarra{animation:none}}
.gfValor{position:absolute;transform:translate(-50%,-100%);color:var(--tinta-2);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gfValorPico{color:var(--amarelo);font-weight:600}
.gfTagPico{position:absolute;transform:translate(-50%,-100%);color:var(--amarelo);font-size:9px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.gfTagAtual{position:absolute;transform:translate(-50%,-100%);color:var(--roxo-2);font-size:9px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.gfMes{position:absolute;transform:translate(-50%,-100%);color:var(--apagado);font-size:10.5px;white-space:nowrap}
.gfHover{cursor:pointer}
/* BUG achado no sweep (05/09, ordem do Wilker): tooltip do card Faturamento por mes -- posicao
   corrigida em nova.js (media o tamanho real, nunca deslocamento fixo). max-width evita a caixa
   crescer sem fim com mes+tag+variacao numa linha so; .gfTtTag virou bloco proprio (nao mais
   inline colado no mes) pra nao espremer as duas coisas juntas. */
.gfTooltip{position:absolute;pointer-events:none;background:var(--surface-2);border:1px solid var(--borda-2);border-radius:8px;padding:9px 12px;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:2;min-width:150px;max-width:220px;line-height:1.5}
.gfTtMes{font-weight:600;color:var(--tinta);margin-bottom:3px}
.gfTtTag{display:block;font-weight:400;color:var(--apagado);font-size:11px;text-transform:none;margin-bottom:3px}
.gfTtValor{font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.gfTtVar{display:block;margin-top:4px;font-size:11px}
.gfTtUp{color:var(--verde)}
.gfTtDown{color:var(--vermelho)}

/* tabelas leves Movimento/Despesas — deliberadamente NAO reusa .tab (aquele componente carrega
   resize/add-coluna do estilo ClickUp, peso errado pra um resumo financeiro simples) */
.finTab{width:100%;border-collapse:collapse;font-size:12.5px}
.finTab th{text-align:left;font-weight:500;color:var(--apagado);font-size:11px;padding:6px 10px;border-bottom:1px solid var(--borda)}
.finTab td{padding:7px 10px;border-bottom:1px solid var(--borda);color:var(--tinta-2)}
.finTab tr:last-child td{border-bottom:none}
.finValor{font-variant-numeric:tabular-nums;text-align:right}
.finTabRodape td{color:var(--tinta);font-weight:600;border-top:1px solid var(--borda-2);border-bottom:none}
.finPill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:600}
.finPillPendente{background:rgba(255,176,32,.16);color:var(--amarelo)}
.finPillVencida{background:rgba(229,72,77,.16);color:var(--vermelho)}
.finPillPaga{background:rgba(46,205,111,.16);color:var(--verde)}

/* LEI DO HOVER (O-101, Wilker 16/09, medido pelo ALTAIR via CSSOM): linha de tabela que abre algo
   ao clicar TEM hover; linha que nao abre nada NAO ganha hover, porque hover promete clique. Antes
   desta lei, `.parceiroLinha` (cursor:pointer + onclick real) nao tinha NENHUM hover -- o unico
   hover de `.finTab` era `.moonOblivion .finTab tbody tr:hover`, preso ao tema do Moon e pintando
   TODA linha, inclusive as que so tem um link interno clicavel (ex.: `.contaSubRow`, a celula
   "Contas" da carteira) -- exatamente contra a lei.
   MECANISMO, escrito UMA vez: `.linhaClicavel` (nome ja existia, usado uma unica vez em
   tabelaExternaAtivoHtml com cursor:pointer inline e SEM hover -- promovido aqui pra classe
   universal). Marca QUALQUER `<tr>` do app, dentro ou fora de `.finTab`, cuja area inteira (fora
   de botoes/links proprios com stopPropagation) abre algo ao clicar. Nao marca linha cujo unico
   clique util e' um botao ou link ANINHADO (o resto da linha continua mudo) -- por isso
   `.contaSubRow`, `.tabAddRow` (cursor:text, e' campo de digitar, categoria oposta) e
   `depAdminLinha` (sem onclick nenhum na linha, so' nos botoes Editar/Excluir) ficam de fora.
   TOKEN: `--surface-2`, MESMA derivacao que `.ntCampo:hover`/`.ddOp:hover` ja usam -- `.finTab`
   mora dentro de `.homeCard` (fundo `--surface`), hover e' um passo de elevacao acima do proprio
   fundo. A tabela de tarefas (`.tab`, fora de `.homeCard`, fundo `--bg` direto) ja seguia a MESMA
   logica com o proprio degrau (`.tab tr[data-id]:hover td{background:var(--surface)}`) -- nao
   mexido aqui, mecanismo dela ja estava certo, so nao tinha nome exportavel pro resto do app. */
.linhaClicavel{cursor:pointer}
.linhaClicavel:hover{background:var(--surface-2)}

/* Despesas do mes EDITAVEL (04/09) — botao no cabecalho do card, valor clicavel, remover no
   hover da linha. .finTabDesp reusa .finTab, so ajusta a 3a coluna (acao) pra ficar estreita. */
.finDespAddBtn{background:none;border:1px solid var(--borda);color:var(--roxo-2);font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;cursor:pointer;font-family:inherit}
.finDespAddBtn:hover{background:var(--roxo-suave);border-color:var(--roxo)}
/* O-113 (ORION, 16/09): a coluna de acao ganhou um 2o icone (Marcar como pago, ao lado do
   Remover) -- largura de 24px pra 1 icone virou 44px pra 2, mesmo padding lateral de antes. */
.finTabDesp th:last-child,.finTabDesp td.finDespAcao{width:44px;padding-left:0;padding-right:8px}
.finDespValor{cursor:pointer;border-radius:4px;padding:2px 4px;margin:-2px -4px}
.finDespValor:hover{background:var(--surface-2)}
.finDespRemover{visibility:hidden;cursor:pointer;color:var(--apagado);font-size:15px;line-height:1;padding:2px 5px;border-radius:4px}
.finTabDesp tr:hover .finDespRemover{visibility:visible}
.finDespRemover:hover{color:var(--vermelho);background:rgba(229,72,77,.12)}
/* .finDespPagar espelha .finDespRemover (mesmo esconde/revela no hover da linha, mesmo tamanho)
   trocando so a cor de destaque: vermelho de remover vira verde (--verde, token generico de
   sucesso do app) de confirmar. rgba(46,205,111,.12) e' --verde em rgb, mesma alpha .12 do par. */
.finDespPagar{visibility:hidden;cursor:pointer;color:var(--apagado);font-size:14px;line-height:1;padding:2px 5px;border-radius:4px}
.finTabDesp tr:hover .finDespPagar{visibility:visible}
.finDespPagar:hover{color:var(--verde);background:rgba(46,205,111,.12)}
/* Vencimento: mesmo padrao clicavel do Valor (.finDespValor) quando editavel. "sem data" reusa
   o mecanismo de dado ausente do resto do app (.dado-ausente no <td>, .pe dentro -- nova.css
   ~114): nao e' "incompleto" (o valor existe e ta errado), e' AUSENTE (o Wilker ainda nao
   preencheu), texto no lugar do valor, nunca traco mudo. */
.finDespVence{cursor:pointer;border-radius:4px;padding:2px 4px;margin:-2px -4px}
.finDespVence:hover{background:var(--surface-2)}
.finDespInput{width:100%;background:var(--bg);border:1px solid var(--roxo);border-radius:4px;color:var(--tinta);font-size:12.5px;padding:3px 6px;outline:none;font-family:inherit;color-scheme:dark}
.finTabDesp td .finDespInput{width:88px}

/* Ficha do parceiro, tabela "Clientes ligados" (O-100 follow-up, ALTAIR/ORION, 15/09): achado do
   Wilker -- "Editar split"/"Tirar" empilhavam em TODA linha, e nomes de 2 palavras ("Antonio
   Carvalho") quebravam em 2. Medido ao vivo (parceiro real, 18 clientes): a causa nao era excesso
   de coluna, era UMA fonte espremendo as outras. "Valor do parceiro"/"Receita bruta" (celValor)
   podem mostrar um numero curto ("R$ 900,00") OU a frase de motivo de incompleto vinda do backend
   (ate ~70 caracteres, "sem fee_mensal e sem base de comissao (nao existe em nenhuma tabela)") --
   sem teto, o layout automatico da tabela dimensiona a coluna pela linha MAIS LARGA que ja passou
   por ali, entao essas 2 colunas tomavam 320px CADA (58% de 1109px), sobrando 106px pro Cliente
   (por isso o nome de 2 palavras quebrava) e 131.875px pras acoes -- 3-4px curto pra "Editar
   split"+"Tirar" caberem lado a lado. O PRINCIPIO (o mesmo da lei do card pequeno): a largura
   pertence ao conteudo que PRECISA dela -- uma frase de motivo, rara (a maioria das linhas mostra
   valor curto), nao pode mandar na coluna inteira so' por ter sido a mais longa que ja passou por
   ali. Teto aqui: a frase QUEBRA EM ALTURA dentro do teto (varias linhas), nunca estica a coluna.
   Nenhuma coluna escondida, nenhum valor em R$ cortado (o mais longo medido, ~85px, cabe folgado).
   Classe propria (nao mexe no `.finTab` generico, que ~10 outras telas reusam sem este problema). */
.finTabParceiro th:nth-child(6),.finTabParceiro td:nth-child(6),
.finTabParceiro th:nth-child(7),.finTabParceiro td:nth-child(7){width:160px;white-space:normal}

/* CLIENTES — secoes por bloco (spec 31/08: Asaas/Marketing/SWOT, reusa .homeCard/.homeRow ja
   existentes do Inicio — "nao vai fazer bagunça, deixa os blocos bonitinho") */
/* layout novo (31/08, Wilker, 3 prints): a coluna direita estreita durou pouco — ele decidiu que
   a ficha e 1 coluna so, com os 4 cartoes que moravam la (Identidade/Quem paga/Contato/
   Financeiro complementar) descendo pro corpo, numa linha entre Entregas e Asaas
   (.clienteCardsLinha). O grid de 2 colunas (`minmax(0,1fr) 260px`, o fix da tabela de Perfis
   espremida) saiu junto — sem coluna lateral disputando espaco, a tabela recupera a largura
   toda sozinha, o SWOT+Marketing (`.clienteSecoesTopo`) continua a unica divisao horizontal. */
/* ORION O-012 (07/09): "Reservado" nascia colado no topo -- .clienteSecoes so tinha padding
   lateral/inferior, nunca superior. Mesmo token do gap entre blocos (--sp-entre-secoes), pra o
   respiro do topo seguir a MESMA escala que separa um bloco do outro, nem zero nem oceano. */
/* O-081 (Wilker, 14/09): LEI DA MOLDURA UNICA. Entre `.ovWrap` (28px, medido contra o ClickUp,
   tem procedencia) e este 24px (numero digitado, sem referencia), o Wilker decidiu pelo medido --
   sobe pra 28px. O 24px horizontal era um literal escrito aqui, NAO a variavel
   `--sp-entre-secoes` (que tambem vale 24px mas e outra coisa: gap entre cards, margem de aviso)
   -- variavel INTOCADA de proposito, mudar ela mudaria coisa sem relacao. Desde O-080 nenhum
   componente carrega padding proprio, entao essa troca nao dobra nada por baixo -- so a moldura
   muda, confirmado no pixel em 10 das 12 familias de tela desta classe (as outras 2, Empreendimento
   e departamento classico com estado vazio, confirmadas por leitura do JS: mesma classe, zero
   condicao). CORRECAO (volta 1, 14/09): eu tinha escrito aqui "as 2 telas do Moon Oblivion nao
   tinham override e mudam junto" -- FALSO, corrigido depois de medir de novo em vez de confiar no
   proprio relatorio. `telaMoon`/`telaMoonContaMeta` montam `class="clienteSecoes moonOblivion"`,
   DUAS classes soltas no MESMO elemento. `.moonOblivion` (linha ~2959) TEM sua propria declaracao
   de `padding` (26px horizontal) -- especificidade IGUAL a desta regra (uma classe cada), e como
   `.moonOblivion` vem DEPOIS no arquivo, o shorthand `padding` dela vence o desta regra inteiro
   pro elemento que carrega as duas classes. Nao e aninhamento (por isso um grep por seletor
   combinado tipo `.moonOblivion .clienteSecoes` nunca acharia isso) -- e COLISAO por ordem de
   declaracao entre duas regras de mesma especificidade. O Moon nunca esteve nos 24px desta regra;
   sempre esteve, e continua, nos 26px da regra dele (ver O-081 volta 1 sobre se isso muda). */
.clienteSecoes{display:flex;flex-direction:column;gap:var(--sp-entre-secoes);padding:var(--sp-entre-secoes) 28px 28px}
.clienteBloco{min-height:60px}
/* LEI DO PADRAO UNICO DE CARD (O-100, Wilker 15/09): "card com pouco conteudo ocupando espaco
   desnecessario JA ERA PRA SER PADRAO... voces nao aprendem nada comigo" -- ele ja tinha falado
   isso varias vezes antes desta ordem, e cada vez foi tratada como conserto de UMA tela em vez de
   lei do app inteiro (mesma familia de erro do [[feedback_zero_descricao_em_qualquer_lugar]] no
   mesmo dia: corrigir o ponto apontado sem varrer a especie).
   A LEI: card com pouco conteudo NUNCA ocupa a largura inteira. Largura cheia e' de quem PRECISA
   dela -- tabela, grafico, lista que cresce, texto longo -- nunca de quem escreveu a tela naquele
   dia. A decisao nasce do CONTEUDO, e se decide ANTES de escrever o HTML, nao depois de ver feio.
   CRITERIO (aplica na hora de montar a tela, nao depois): o bloco cabe inteiro numa linha curta ou
   poucas linhas curtas -- um rotulo, um valor, uma pilula, uma frase, um select isolado? Entra
   dentro de `.homeCardsEstreitos` (abaixo), ao lado de outro bloco do mesmo tipo. O bloco E'
   tabela, grafico, lista que cresce (vinculos, documentos, itens) ou texto livre longo? Fica FORA
   do wrapper, filho direto de `.clienteSecoes`, paga a largura cheia sozinho -- ela e' dele por
   natureza do conteudo, nao por description generica de "card".
   MECANISMO: mesmo grid que `.cliCards` ja usava pras KPIs (auto-fill+minmax, quantos couberem por
   linha, cada um com piso de largura) -- tecnica copiada (gabarito antes de invencao), classe NOVA
   porque o papel e' outro: `.cliCards` e' KPI com padding proprio (24px 0); isto aqui e' wrapper
   generico pra qualquer `.homeCard` de conteudo curto, sem padding extra (o pai `.clienteSecoes`
   ja paga o espacamento entre secoes). */
/* UNIFICACAO com `.clienteCardsLinha` (ORION/ALTAIR, O-100 follow-up, 15/09): existiam 2
   mecanismos vivos pro MESMO problema -- `.clienteCardsLinha` (flex, mais antigo, 31/08, so'
   "Quem paga"+"Financeiro complementar") e este aqui (grid, criado pra O-100 sem eu ter achado o
   mais antigo primeiro -- miss meu, contra a propria disciplina de "gabarito antes de invencao"
   do dia). auto-FILL deixava trilhas vazias reservando espaco (medido: 1 filho em 1109px de
   linha ficava com 265px e sobravam 2/3 em branco -- mesmo defeito que a O-080 ja tinha corrigido
   no `.finCliCards`, so' que aqui, por outro caminho). Trocado pra auto-FIT (trilha vazia
   colapsa, quem existe reparte o espaco de verdade) -- MAS auto-fit sozinho estica um filho unico
   pra 100% da linha (medido: 1109px), desfazendo a PROPRIA lei que este arquivo acabou de
   escrever. Por isso a regra de baixo: com exatamente 1 filho, a coluna vira `minmax(260px,546px)`
   -- 546 nao e' chute, e' a largura real que 2 filhos ja ficam sob auto-fit NESTA MESMA classe
   (bateu com o que "Quem paga"/"Financeiro complementar" ja tinham de largura no `.clienteCardsLinha`
   antigo, 551,5px, medido com o pagador mais comprido do banco inteiro, 62 caracteres). Uma UNICA
   regua: nenhum card desta classe passa de ~546px, tenha 1 ou 2 filhos -- card estreito fica
   previsivelmente estreito, e o filho unico com sentenca longa (ex.: frase-resumo de Contratos,
   822px em max-content puro, mais de 2/3 da linha) quebra em 3 linhas dentro do teto em vez de
   esticar a coluna. `:has(> .homeCard:only-child)` e' o MESMO idioma ja usado neste arquivo em
   `.moonOblivion .grade:has(> :only-child)` (uso oposto la: esticar quando sobra 1; aqui, o
   inverso). Piso de 260 (nao 240): a Identidade sozinha ja precisa de ~243-264px dependendo de
   como se mede -- 240 cortaria por pouco, 260 da folga sem mudar nada visualmente nos usos reais
   de hoje (nenhum tem 3+ filhos, onde o piso realmente decidiria a contagem de coluna). */
.homeCardsEstreitos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-entre-cards)}
.homeCardsEstreitos:has(> .homeCard:only-child){grid-template-columns:minmax(260px,546px)}
/* BUG achado pelo Wilker (06/09, furioso -- "voce deixa todos os cards colados"): #moonCorpo,
   #moonContaCorpo e #moonGoogleCorpo sao filhos de .clienteSecoes (que tem o gap), mas os CARDS que
   cada renderMoonXxx desenha sao filhos DELES, um nivel abaixo -- gap do pai nunca alcanca. Nenhum
   dos 3 tinha display/gap proprio (bloco puro), entao os .homeCard consecutivos ficavam com margem
   ZERO entre si. Corrigido no CONTAINER, uma vez so.
   O-020 (ORION 08/09): o 14px daquele conserto nunca foi atualizado quando a lei virou token
   (--sp-entre-cards:18) -- achado pelo Wilker de novo, agora na aba Google ("todos os card
   grudado"), 4px abaixo da lei em 8 pares medidos. Mesma causa do gap fixo do `.moonOblivion`
   (ver comentario acima, o de 06/09 tambem nunca foi atualizado) -- os dois consertos de 06/09
   pra "colado" ficaram parados no numero antigo enquanto o resto do app evoluiu pro token. */
#moonCorpo, #moonContaCorpo, #moonGoogleCorpo{display:flex;flex-direction:column;gap:var(--sp-entre-cards)}
/* `.clienteCardsLinha` (linha dos 4 cartoes que desceram da antiga coluna lateral, 31/08) foi
   MORTA e migrada pra `.homeCardsEstreitos` na unificacao de 15/09 (ver comentario grande acima
   dela) -- so' tinha 2 usos vivos ("Quem paga"+"Financeiro complementar"), os outros 2 (Identidade,
   Contato) ja' tinham migrado pra' la' antes. Nao ficam 2 classes fazendo a mesma coisa por 2
   caminhos diferentes -- o generico venceu, nome que nao mente sobre o escopo (nao e' so' de
   "cliente"). */
/* observacoes (Identidade): "de destaque, nao esconda num canto" (ALTAIR) — carrega regra de
   negocio real (ex.: "2 cobrancas de 600: Mirant + The Rose"), por isso NAO usa o estilo apagado
   do .homeVazio nem o .sub truncado do .homeRow — texto legivel, com respiro, marcado por uma
   borda de destaque em vez de cor apagada. */
.cliObs{margin:2px 12px 8px;padding:8px 10px;border-left:3px solid var(--roxo);background:var(--surface-2);border-radius:0 6px 6px 0;font-size:12.5px;color:var(--tinta);line-height:1.45}
/* MATRIZ SWOT (spec Wilker 31/08, 4a rodada — medida por pixel pela ALTAIR contra o print).
   Fundo escuro SATURADO por familia (nao pastel, nao cinza com risco) — luminancia alvo ~50-60,
   longe dos ~225 do pastel que ele recusou 2x. Titulo usa a cor VIVA do token (a mesma cor que
   era borda na 1a rodada — "titulo do quadrante: a cor viva da familia"), texto do conteudo
   claro. Token do app ONDE existe equivalente (--azul/--amarelo/--verde/--vermelho no titulo);
   hardcode so no FUNDO, que precisa ser um tom escuro que nenhum token do app oferece pronto. */
.swotNomeAtual{padding:2px 12px 8px;font-size:12.5px;font-weight:600;color:var(--tinta-2)}
.swotCarrossel{display:flex;align-items:center;gap:8px;padding:2px 12px 4px}
.swotCarrossel .swotNomeAtual{flex:1;padding:0;text-align:center}
.swotSeta{background:none;border:none;color:var(--apagado);cursor:pointer;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:0 0 24px}
.swotSeta:hover{background:var(--surface-2);color:var(--tinta)}
.swotSeta svg{width:15px;height:15px}
.swotDots{display:flex;justify-content:center;gap:5px;padding-bottom:8px}
.swotDot{width:6px;height:6px;border-radius:50%;background:var(--borda-2);cursor:pointer}
.swotDot.ativo{background:var(--roxo)}
/* CORRECAO (ALTAIR mediu contra o print): os 4 quadrantes NAO se tocam — cada um e separado,
   com folga entre si e cantos arredondados INDIVIDUAIS (nao 1 contorno externo so). */
.swotMatriz{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;margin:0 12px 12px}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.swotQ{position:relative;padding:var(--sp-entre-cards) 20px;min-height:130px;border-radius:14px;color:rgba(255,255,255,.92)}
.swotQTit{position:absolute;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
/* 5a rodada (ALTAIR mediu CONTRASTE WCAG, nao luminancia — criterio novo, mais preciso, ela
   trocou de proposito). Titulo de Forças e Ameaças NAO usam mais o token puro: o token bate
   >=4,5 em fundo claro mas nao no fundo escuro saturado de cada um — ela deu o alvo exato. */
.swotQ-tl .swotQTit{top:14px;left:18px;color:#7db9ff}
.swotQ-tr .swotQTit{top:14px;right:18px;text-align:right;color:var(--amarelo)}
.swotQ-bl .swotQTit{bottom:14px;left:18px;color:var(--verde)}
.swotQ-br .swotQTit{bottom:14px;right:18px;text-align:right;color:#ff7d82}
.swotQTxt{display:block;font-size:13px;line-height:1.5;white-space:pre-wrap}
.swotQ-tl .swotQTxt,.swotQ-tr .swotQTxt{margin-top:22px}
.swotQ-bl .swotQTxt,.swotQ-br .swotQTxt{margin-bottom:22px}
/* "vazio" (0,4) NAO e o texto que ela mediu como "lavado" — a fixture dela tem os 4 quadrantes
   sem conteudo, entao o que apareceu na tela foi ESTE placeholder, nao .swotQTxt (que ja estava
   em 0,92, o alvo dela). Nao subo pra 0,94 (apagaria a diferenca entre vazio/preenchido, um
   padrao que o resto do app usa de proposito) — subo pra 0,6, legivel mas ainda visivelmente
   mais fraco que texto real. Sinalizado no relatorio, nao decidido em silencio. */
.swotQVazio{color:rgba(255,255,255,.6);font-style:italic}
/* letra maior (24px->36px, ela mediu "pequena"), circulo mais sutil (.22->.12, "clareia" o fundo
   escuro sem virar uma mancha branca) — mesma matematica de posicao de antes, so tamanho maior. */
.swotLetra{position:absolute;top:50%;left:50%;width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:800;color:rgba(255,255,255,.85);pointer-events:none;z-index:2}
.swotLetra-tl{transform:translate(-82%,-82%)}
.swotLetra-tr{transform:translate(-18%,-82%)}
.swotLetra-bl{transform:translate(-82%,-18%)}
.swotLetra-br{transform:translate(-18%,-18%)}
/* editor — "popup do mesmo tamanho do modal de tarefa do Nova" (palavras dele): mesmas medidas
   de .ntBox, nao inventei tamanho novo. Overlay proprio (nao reusa #novaTarefaModal, que e um
   id fixo unico no DOM) mas MESMA linguagem visual (fundo escurecido, box centralizado no topo). */
.swotOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:130;display:flex;align-items:flex-start;justify-content:center}
.swotBox{margin-top:9vh;width:820px;max-width:94vw;max-height:82vh;background:var(--surface);border:1px solid var(--borda-2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
#swotModal{display:none}
#swotModal.on{display:block}
.swotTopo{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--borda)}
.swotNomeCampo{flex:1;display:flex;align-items:center;gap:4px;font-size:15px;font-weight:600;color:var(--tinta-2)}
.swotNomeCampo input{flex:1;background:var(--surface-2);border:1px solid var(--borda);border-radius:7px;padding:6px 10px;font-size:14px;font-weight:500;color:var(--tinta);font-family:inherit}
#swotSalvarBtn{border-radius:8px}
/* "editar tem que parecer com o resultado" (palavras dele) — o editor usa a MESMA .swotMatriz da
   visualizacao, so trocando o texto estatico por textarea (herda cor/posicao/fundo pastel). */
.swotGridEdit{padding:16px;flex:1;overflow:auto;display:flex}
.swotGridEdit .swotMatriz{flex:1;min-height:380px;margin:0}
textarea.swotQTxt{width:100%;resize:none;background:transparent;border:none;outline:none;color:rgba(255,255,255,.92);font-family:inherit;padding:0;height:calc(100% - 22px)}
textarea.swotQTxt::placeholder{color:rgba(255,255,255,.4)}
/* SWOT + Marketing lado a lado (pedido do Wilker 31/08). ALTAIR, print: stretch (a licao da
   Equipe) esticava a SWOT vazia pra ~500px so pra acompanhar o Marketing cheio — pior que o
   degrau que evitava. Trocado pra flex-start: aqui os dois cards sao CONTEUDO DIFERENTE (SWOT
   x lista de perfis), nao itens repetidos de uma mesma lista como na Equipe — cada um do seu
   tamanho e normal, nao e o mesmo tipo de "degrau" que era bug la. Efeito colateral aceito:
   quando a SWOT tiver conteudo de verdade, os dois podem voltar a ter alturas diferentes lado a
   lado — isso e correto aqui, nao e o defeito que o stretch existia pra evitar. */
.clienteSecoesTopo{display:flex;gap:14px;align-items:flex-start}
/* CORRECAO FINAL (Wilker, 31/08, bravo com razao): as duas rodadas anteriores tentaram achar
   "mais equilibrio" (280px fixo, depois clamp ate ~384px) — ele nunca pediu equilibrio, pediu
   METADE PRA CADA, literal: "ambas devem dividir o mesmo espaço". ALTAIR tinha aprovado o clamp
   como resolvido; o erro foi dela relaxar o pedido dele pra "melhor", nao meu de calcular errado
   — mas o numero final e o mesmo de sempre: `flex:1` nos dois, sem override nenhum pra SWOT.
   Conferido ANTES de aplicar (ela pediu pra eu confirmar, ja tinha cortado a tabela uma vez):
   1920px (alvo oficial do Nova, ver memoria project_nova_alvo_1920) menos sidebar 256 menos
   rail 64 menos padding de .clienteSecoes (24×2=48) = 1552px de linha; menos 14px de gap = 1538,
   dividido ao meio = 769px pra cada lado. A tabela de Perfis precisa 656px (medido antes) — cabe
   com ~113px de folga. A SWOT vazia volta a ocupar um retangulo grande — decisao dele, sabendo
   disso (foi a propria observacao da ALTAIR, horas atras, que trouxe a discussao ate aqui).
   ESSA APROVACAO DO WILKER (31/08) FICA REGISTRADA ACIMA, intacta -- o numero dela e que mudou.
   CONTA NEUTRALIZADA (O-085, 14/09): esta regra ja tinha sido confirmada MORTA (O-081 volta 1 --
   zero chamada de `.clienteSecoesTopo` em nova.js, o par Perfis+SWOT que ela dividia nao e'
   desenhado por nenhuma tela atual). Uma reconta foi escrita mesmo assim na volta anterior
   (765px, so' aritmetica) e ENVELHECEU DE NOVO no mesmo dia -- a lateral mudou de largura
   (O-069, 256->264px) antes de qualquer um medir a tela que nao existe. NAO refaz a conta:
   numero que ninguem pode medir nao deve ficar escrito parecendo medido. Se `.clienteSecoesTopo`
   for reaproveitada um dia, o numero certo se mede AO VIVO naquele momento -- nunca por conta,
   nunca reaproveitando um calculo antigo. */
.clienteSecoesTopo .clienteBloco{flex:1;min-width:0}
/* subtitulos colapsaveis DENTRO de cada bloco da ficha (Wilker, 31/08, correcao do proprio:
   "nao quero esconder o BLOCO, quero esconder as coisas DENTRO do bloco" — o bloco em si
   ("Assinaturas e faturas (Asaas)", "Marketing"...) fica sempre visivel, titulo comum, sem
   seta). "Isso ja vira motor pra tudo dentro dos Clientes": mecanismo REUSAVEL — qualquer bloco
   novo na ficha so chama subAcc(titulo, corpo) + ligarSubAcc(wrap) e ja herda. Mesmo mecanismo
   dos grupos de status da Equipe (.eqStatusCaret/.eqStatusGrupo — caret que gira + corpo
   escondido), nomes proprios pra nao emprestar classe de um contexto diferente. Nasce com
   "aberto" JA presente — ele pediu a OPCAO de esconder ("nao ficar visualmente poluido"), nao
   que nascesse escondido (isso daria poluicao zero E informacao zero). */
.clienteSubAcc{margin-bottom:2px}
.clienteSubAccCab{cursor:pointer;user-select:none;justify-content:flex-start}
.clienteSubAccCaret{display:inline-flex;color:var(--apagado);transition:transform .12s;margin-right:2px}
.clienteSubAccCaret svg{width:9px;height:14px}
.clienteSubAcc.aberto .clienteSubAccCaret{transform:rotate(90deg)}
.clienteSubAccCorpo{display:none}
.clienteSubAcc.aberto .clienteSubAccCorpo{display:block}
.cliAsaasVinculo{display:flex;align-items:center;gap:8px;padding:6px 12px 10px;font-size:12.5px;color:var(--tinta-2)}
.cliAsaasDesvincular{margin-left:auto;background:none;border:none;color:var(--apagado);font-size:11.5px;cursor:pointer;font-family:inherit;text-decoration:underline}
.cliAsaasDesvincular:hover{color:var(--tinta)}
.cliAsaasOficial{margin-left:auto;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--apagado);background:var(--surface-2);padding:2px 8px;border-radius:666px}
.cliAsaasMeio{margin-left:auto;flex:0 0 auto}
.cliAsaasStatus{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:666px;text-transform:uppercase;letter-spacing:.3px}
.cliAsaasStatus-active,.cliAsaasStatus-received{background:rgba(72,199,142,.15);color:var(--verde)}
.cliAsaasStatus-overdue,.cliAsaasStatus-inactive{background:rgba(229,72,77,.15);color:#e5484d}
.cliAsaasStatus-expired{background:var(--surface-2);color:var(--apagado)}
.cliAsaasStatus-pending{background:rgba(255,197,61,.15);color:var(--amarelo,#f5c518)}
.cliAsaasCand{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;font-size:12.5px}
.cliAsaasCand:hover{background:var(--surface-2)}
.cliAsaasCand .nm{flex:0 1 auto;color:var(--tinta)}
.cliAsaasCand .sub{color:var(--apagado);font-size:11.5px}
.cliAsaasCandBtn{margin-left:auto;background:var(--roxo);color:#fff;border:none;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;flex:0 0 auto}
.cliAsaasCandBtn:hover{background:var(--roxo-2)}

/* bloco Marketing (spec 31/08, modelo Oblivion): Perfis e Contas de anuncio viraram TABELA —
   ver .audTb/.audTbWrap reusada em carregarClienteMarketing(). Os cards .cliPerfil* da versao
   anterior (perfis empilhados) foram removidos, nao ficam mortos no CSS. */
.cliContaSujo{margin-left:6px;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--apagado);background:var(--surface-2);padding:1px 6px;border-radius:666px}
/* O-022 (ORION 08/09), pedido do PERSEUS: o defeito que travou 7 clientes (conta Google indo pra
   API da Meta) nasceu de uma tabela onde as duas plataformas ficam misturadas na mesma lista e a
   coluna "Plataforma" era so texto plano -- facil de ler errado numa varredura rapida. `platTag`:
   pilula pequena com cor, mesma anatomia de `.finPill`/`.cliContaSujo` (nada novo inventado). Cor
   por token existente: Meta usa --azul (mesmo tom que `.moonLink`/relatorio ja usam pra Meta),
   Google usa --verde (unica cor de marca do Google que ja existe como token no app; nao reproduzo
   o multicolor real da marca aqui, so preciso de UMA cor que nunca seja confundida com a do Meta). */
.platTag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 7px;border-radius:666px;white-space:nowrap}
.platTagMeta{background:rgba(74,158,255,.16);color:var(--azul)}
.platTagGoogle{background:rgba(46,205,111,.16);color:var(--verde)}
.cliCobrancaDiverge{color:#e5484d;font-size:11px;margin-left:8px}
/* pixel/dataset por perfil (ARCTURUS entregou 31/08) — "cadastrado", NUNCA "ativo": o campo do
   banco significa so isso, cadastrado_ativo esta true em quase 100% das linhas e nao diferencia
   nada (decisao do Wilker, ver core.js). */
.cliPixelItem{white-space:nowrap;font-size:12px}
.cliPixelItem + .cliPixelItem{margin-top:3px}
.cliPixelCadastrado{margin-left:4px;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--apagado);background:var(--surface-2);padding:1px 6px;border-radius:666px}

/* PAINEL TAREFA */
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
#overlay.on{opacity:1;pointer-events:auto}
#tarefaPainel{position:fixed;top:0;right:-980px;width:940px;max-width:96vw;height:100vh;background:var(--bg);border-left:1px solid var(--borda-2);box-shadow:-16px 0 50px rgba(0,0,0,.6);transition:right .25s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;overflow:hidden;z-index:50}
#tarefaPainel.aberto{right:0}
.tpTopo{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--borda);position:sticky;top:0;background:var(--bg);z-index:2}
.tpTopo button{background:none;border:none;color:var(--apagado);font-size:16px;width:28px;height:28px;border-radius:6px}
.tpTopo button:hover{background:var(--surface);color:var(--tinta)}
.tpId{margin-left:auto;font-size:11.5px;color:var(--apagado);font-family:ui-monospace,"Cascadia Code",monospace;cursor:pointer;padding:4px 8px;border-radius:5px}
.tpId:hover{background:var(--surface);color:var(--tinta-2)}
.tpAvisoLixeira{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;border-radius:7px;font-size:13px;background:rgba(255,107,112,.12);color:#ff6b70;border:1px solid rgba(255,107,112,.25)} /* tarefa na lixeira abria pela URL e deixava editar SEM AVISO — some da lista e da busca, mas o painel gravava. O backend agora recusa; isto explica por que. */
.tpAvisoLixeira.tpAvisoArquivada{background:var(--surface);color:var(--tinta-2);border-color:var(--borda)} /* arquivada NAO bloqueia: e reversivel e visivel. So informa. */
.tpNomeBox{position:relative;margin-bottom:18px} /* a margem mora AQUI, nao no textarea: o h1 e absoluto e o box precisa fechar exatamente na altura do campo */
#tpNomeH1{position:absolute;left:0;top:0;width:100%;margin:0;padding:0;pointer-events:none;font-family:inherit;font-size:28px;font-weight:600;line-height:1.3;color:var(--tinta);white-space:pre-wrap;overflow-wrap:break-word} /* medido ALTAIR no ClickUp: h1 absoluto na MESMA caixa do textarea (dx/dy/dw/dh = 0) com pointer-events:none pro clique atravessar. Da a semantica de cabecalho nivel 1 que o leitor de tela anuncia. */
.tpNomeBox:focus-within #tpNomeH1{display:none} /* ao editar o h1 SOME e o textarea pinta: troca, nao sobreposicao. Por isso nunca aparece texto dobrado, mesmo se a metrica divergir 1px. */
#tpNome{width:100%;background:none;border:none;color:transparent;caret-color:transparent;font-family:inherit;font-size:28px;font-weight:600;outline:none;line-height:1.3;display:block;padding:0;resize:none;overflow:hidden} /* textarea, NAO input: no ClickUp o titulo quebra linha e o painel cresce (cdk-textarea-autosize). font-family:inherit e OBRIGATORIO — textarea nao herda fonte e cairia em monoespacada. Transparente em REPOUSO por color (nao opacity: opacity 0 tiraria o campo da arvore de acessibilidade). resize:none + overflow:hidden porque a altura e calculada no JS (ajustarNome). Titulo 28/600, medido ALTAIR. */ /* transparente em REPOUSO por color, nao por opacity: opacity 0 tiraria o campo da arvore de acessibilidade. */
#tpNome:focus{color:var(--tinta);caret-color:var(--tinta)} /* ao focar, o campo assume a pintura */
.tpGrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:0 6px} /* medido ALTAIR: col-gap 10 (passo 450=440+10); row-gap 4 (campo 32 + 4 = passo de linha 36); padding 0 6 = fields-container do ClickUp (campos 6px mais dentro que o titulo) */
.tpCampo{display:flex;align-items:center;gap:12px;height:32px;font-size:13px;min-width:0} /* medido ALTAIR: campo 32/13 (era 36/14); passo de linha 36 = 32 + row-gap 4 do .tpGrid. Altura FIXA (nao min-height): as duas secoes ficam no mesmo ritmo */
.tpLbl{color:var(--apagado);width:145px;flex:0 0 145px;display:flex;align-items:center;gap:8px;font-size:13px} /* medido ALTAIR T-15: rotulo 145,3 no ClickUp (era 118) */ /* medido ALTAIR: fonte do campo 13 (era 14) */
.tpIc{font-size:13px;width:16px;text-align:center;opacity:.9}
.tpVal{flex:1;color:var(--tinta);display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden}
.tpVazio{color:var(--apagado);opacity:.7}
.tpEditavel{cursor:pointer;border-radius:5px;padding:2px 6px;margin:-2px -6px}
.tpEditavel:hover{background:var(--surface-2)}
.tpCampo.dd{position:relative}
.tpCampo .ddMenu{top:calc(100% + 2px);left:118px;max-height:260px;overflow-y:auto}
.tpCampoInput{background:var(--surface);border:1px solid var(--roxo);border-radius:5px;color:var(--tinta);padding:3px 8px;font-size:12.5px;font-family:inherit;color-scheme:dark}
/* flex-shrink:0 (O-114, ORION, 16/09, varredura): sem isso, um `.tpAvatarMini` dentro de uma
   fileira flex apertada (`.tpVal{display:flex;overflow:hidden}`, varios responsaveis juntos)
   pode encolher so' na largura -- MESMO mecanismo que deixou #meAvatar oval (18x22 em vez de
   22x22), aqui prevenido antes de virar queixa. */
.tpAvatarMini{width:22px;height:22px;border-radius:50%;background:var(--roxo);color:#fff;font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.tpAcoesTarefa{display:flex;gap:16px;margin-top:14px;padding:12px 0;border-top:1px solid var(--borda)} /* J1 (ALTAIR): nao e sticky no ClickUp — rola com o corpo, nao gruda no rodape */
/* ALTAIR 30/08: as CINCO acoes (Dependencias, Checklist, Anexar, Clipe, Audio) ficavam abaixo da dobra da
   coluna rolavel. Quem nao rolasse ate o fim nao sabia que existiam, e clicar onde elas PARECIAM estar caia
   no overlay, que fecha o painel. Dois problemas, uma causa: a barra dependia da rolagem.
   `sticky bottom:0` resolve os dois de uma vez — a barra fica sempre no rodape da coluna, sempre visivel e
   sempre dentro da area clicavel. Precisa de FUNDO PROPRIO: sem ele o conteudo passa por baixo e o texto
   se sobrepoe. A borda de cima separa a barra do conteudo que rola atras dela. */
.tpAcao{color:var(--tinta-2);font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tpAcao svg{width:14px;height:14px}
.tpAcao:hover{color:var(--tinta)}
.tpVal svg{width:14px;height:14px}
.acaoIc svg{width:16px;height:16px;vertical-align:-3px} /* V3-02: icone do + a 16x16 */
.tpConcluir{background:none;border:none;color:rgb(100,100,100);font-size:13.33px;height:24px;padding:0 12px;border-radius:6px;cursor:pointer;white-space:nowrap;font-family:inherit} /* padding 12 fecha os ~11 que faltavam na largura (153,9 -> ~165, ClickUp 164,9) */ /* medido ALTAIR T-11: atalho de concluir ao lado do Status (164,9x24, 13,33px, rgb(100,100,100)) */
.tpConcluir:hover{color:var(--tinta);background:var(--surface-2)}
/* O-022 (ORION 08/09), item 18: medido pelo Wilker (print) e confirmado ao vivo -- este botao
   (164,9px, medida fiel ao ClickUp) SOMADO ao rotulo (145px) + valor (pill Status) nao cabe nos
   ~219px de uma coluna do `.tpGrid` de 2 colunas (o ClickUp mede Status numa coluna BEM mais larga,
   sem dividir a grade em 2 naquela linha). Aqui o botao vazava pra DENTRO da coluna vizinha
   (Responsaveis), texto literalmente colado no texto do campo ao lado -- overlap visivel real, nao
   so um caso de wrap vertical. Fix: quando o espaco nao fecha, o botao cai pra propria linha
   DENTRO da mesma celula (`.tpCampo` vira flex-wrap), a medida dele (164,9x24) fica intacta -- nao
   mudei o componente medido, so onde ele cabe. */
.tpCampo:has(#tpConcluir){flex-wrap:wrap;row-gap:2px}
/* sem margin-left: alinhar com a coluna de valor (157px) fazia o botao continuar vazando pra
   coluna vizinha (mesmo defeito, so sem o texto colado). Comeca na borda esquerda da propria
   celula -- fica embaixo do icone/rotulo, esteticamente menos fiel ao ClickUp, mas NUNCA
   invade a coluna de Responsaveis. */
#tpConcluir{flex:0 0 100%;max-width:100%}
.tpStatusPill{padding:0 8px;height:24px;border-radius:6px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:normal;cursor:pointer;display:inline-flex;align-items:center;gap:6px} /* medido ALTAIR: padding 0 8px, altura 24, peso 500, sem letter-spacing. E o MECANISMO de contraste e outro: fundo SOLIDO na cor do status com texto BRANCO, nao fundo tenue com texto colorido — isso e mecanismo, nao valor, entao vale apesar dos temas opostos. O fundo vem inline. */
.tag{background:var(--roxo-suave);color:var(--roxo-2);padding:2px 9px;border-radius:999px;font-size:11px;margin-right:4px}
.tpSec{font-size:14px;font-weight:400;color:var(--tinta);margin:24px 4.7px 10px 28px;height:32px;box-sizing:border-box;display:flex;align-items:center} /* medido ALTAIR: cabecalho recuado 28 a mais na esquerda e ~5 na direita (largura 870), altura 32, SEM underline (o __container do ClickUp e border 0 / fundo transparente) e sem padding-bottom (sem a linha, os 8 empurrariam o texto) */ /* TAMANHO 14 confirmado pelo par certo (.cu-task-view-section-header__container, nao o wrapper externo). PESO 400, nao 600: o 600 era racional NOSSO ("pesa como secao, nao legenda") — o ClickUp usa 400 no texto e no container. Mesmo caso do padding-left 97 do cabecalho: coerencia interna vestida de medida. Sem uppercase; a contagem "· N" fica. */
.tpSubgrupo{font-size:12px;color:var(--apagado);margin:2px 0 8px} /* subgrupo cinza (12/400) entre o titulo da secao e os campos */
.tpCriarCampo{background:none;border:none;color:var(--tinta-2);font-size:13px;padding:8px 0;cursor:pointer;display:inline-flex;align-items:center;gap:4px} /* botao de TEXTO: sem caixa, sem borda, sem radius (medido) */
.tpCriarCampo:hover{color:var(--tinta)}
/* MEDIDO EM `ql-editor` (ALTAIR 30/08) — o alvo importa mais que o numero, e este caso e a prova:
     content-description-body ... 13px/13px   wrapper, nenhum texto usa
     cu-editor-wrapper .......... 13px/13px   wrapper
     cu-editor-content .......... 13px/13px   wrapper
     ql-editor .................. 16px/24px   <- onde o texto MORA
   A primeira remedicao veio 13/13, dos embrulhos, e teria trocado dois valores CERTOS por dois errados.
   Barrei pela assinatura: entrelinha igual ao tamanho da fonte e medida tomada onde ela nao se aplica.
   Entao 16/1.5 (=24) fica, e agora bate com o elemento certo do ClickUp.
   HIERARQUIA que o textarea nao tem: la os titulos sao h1.ql-heading 32px/700, entrelinha 48. O
   "HEADLINE" da descricao e um h1 de 32; aqui e uma linha de 16 como as outras. E a divergencia REAL. */
/* E1/E2 (AREA1): #tpDesc virou contentEditable (era textarea). resize:vertical nao existe mais —
   contenteditable cresce com o conteudo, que e o comportamento do ClickUp. */
.tpDescWrap{position:relative}
/* #questDesc (modal de Quest) reusa a MESMA regra -- pedido literal do Wilker, 01/09: "deixa
   flexivel igual da task, ela aumenta quando o texto aumenta ai so rolar pra baixo, nao visual".
   Antes era <textarea> com moldura/altura fixa/scroll proprio; ele nao quis. #tpDesc ja e
   exatamente esse comportamento (sem borda, sem altura fixa, sem overflow proprio -- contenteditable
   que so cresce). Selector estendido, nao duplicado, pra nao ter a mesma regra em dois lugares. */
#tpDesc,#questDesc{width:calc(100% - 12px);min-height:111px;background:transparent;border:none;border-radius:0;color:var(--tinta);padding:0;margin:0 6px;font-size:16px;line-height:1.5;outline:none;white-space:pre-wrap;word-break:break-word}
#tpDesc:empty:before,#questDesc:empty:before{content:attr(data-placeholder);color:var(--apagado);pointer-events:none}
#tpDesc:focus,#questDesc:focus{border-color:var(--roxo)}
/* barra flutuante: NAO MEDIDO posicionamento exato (652x28 e a caixa; aqui e relativa ao editor) */
.tpDescBarra{position:absolute;display:none;background:var(--surface);border:1px solid var(--borda-2);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.6);padding:3px;gap:2px;z-index:20}
.tpDescBarra.on{display:flex}
.tpDescFerr{width:28px;height:28px;border:none;background:none;border-radius:6px;color:var(--tinta-2);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tpDescFerr:hover{background:var(--surface-2);color:var(--tinta)}
#tpNovaSub,#tpNovoCom{width:100%;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta);padding:9px 12px;font-size:12.5px;margin-top:10px;outline:none}
#tpNovoCom{background:transparent;border:none;border-radius:0;padding:6px 10px;font-size:14px;margin-top:0;min-height:33px;outline:none;white-space:pre-wrap;word-break:break-word} /* medido ALTAIR: caixa de comentario e superficie plana (nao cartao) — sem fundo/borda/radius, padding 6 10, 14px. M2 (AREA1): trocado de <input> para contentEditable. */
#tpNovoCom:empty:before{content:attr(data-placeholder);color:var(--apagado);pointer-events:none}
#tpNovaSub{background:transparent;border:none;border-radius:0;padding:6px 10px;font-size:14px} /* medido ALTAIR T-22: o add-button do ClickUp e PLANO (transparente, sem borda, radius 0, 13,33px). Mesmo override do #tpNovoCom — os dois dividiam a regra do cartao */
.tpCom{display:flex;gap:10px;padding:12px 14px;background:var(--surface-2);border-radius:8px;margin-bottom:8px;font-size:14px;line-height:1.5} /* medido ALTAIR: comentario postado INVERTE a regra da descricao — aqui e CARTAO (superficie elevada, radius 8), separado por si, sem border-bottom. ClickUp usa branco; no escuro o equivalente e --surface-2 */
.tpComAv{width:24px;height:24px;border-radius:50%;background:rgb(89,93,102);color:rgba(255,255,255,.9);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px} /* medido ALTAIR: avatar 24, iniciais 10 (ANTES do padrao .spAvatar existir) -- O-114 (16/09), varredura: sobe pra 12px/700, mesma fonte do padrao atual; tamanho (24) ja batia. */
.tpComCorpo{flex:1;min-width:0}
.tpComTopo{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.tpCom b{color:var(--tinta);font-weight:400;font-size:13px} /* medido ALTAIR: nome do autor 13/400 cor primaria (era 12,5/700 roxo — a peca que mais destoava) */
.tpCom .quando{color:var(--apagado);font-size:11px;margin-left:6px}
/* M1 (AREA1): a caixa e COLUNA (editor em cima, barra de ferramentas embaixo) — nao linha unica como
   o <input> antigo forcava. Altura 531x73 medida com o input; agora cresce com o contentEditable. */
.tpComBox{display:flex;flex-direction:column;gap:6px;margin-top:10px}
#tpEnviarCom{background:var(--roxo);border:none;color:#fff;width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:filter .15s}
#tpEnviarCom:hover{filter:brightness(1.12)}
#tpEnviarCom svg{width:16px;height:16px}
.tpLink{display:inline-block;margin-top:22px;color:var(--roxo-2);font-size:12px;text-decoration:none}
.dd{position:relative}
.ddMenu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--surface);border:1px solid var(--borda-2);border-radius:var(--r-menu);box-shadow:0 8px 30px rgba(0,0,0,.6);z-index:10;min-width:180px;padding:5px;display:none}
/* TR-21 generalizado (O-098, ORION, 15/09): `.ddMenu` normal e' absolute RELATIVO ao proprio `.dd`
   -- dentro de um ancestral com `overflow:auto/hidden` (ex.: `.filtroPainel`), a parte que passa da
   borda do painel fica CLIPADA (existe no layout, getBoundingClientRect confirma, mas nao pinta na
   tela e nao recebe clique). Achado ao vivo convertendo os selects do filtro genérico pro `.dd`
   (Operador/E-OU/etc. -- so' a 1a opcao aparecia, as outras existiam clipadas). MESMO mecanismo que
   `.filtroValLista`/`.filtroCampoPicker` ja usavam pra escapar do painel: fixed + posicao calculada
   em JS (`montarDdFechado{posicaoFixa:true}`), margin-top solto (o `top` vem inteiro do JS aqui). */
/* overflow-y:auto (O-125, ORION 17/09): `max-height` sozinho nao rola nada -- `.ddMenu` base nao
   declara overflow (fica `visible`, conteudo alto simplesmente vaza pra fora da caixa). O JS
   (`ddMenuFixoAbrir`) seta `max-height` inline; esta regra e' o que transforma esse teto em
   ROLAGEM PROPRIA em vez de vazamento -- sem ela a lista longa continuava cortando visualmente
   no mesmo lugar, so' que agora fora do ancestral em vez de dentro dele. */
/* width:auto!important (ORION, O-125 verificacao ao vivo): `.compColDir .ddMenu{width:100%}`
   (regra abaixo, pensada pro `.ddMenu` absolute encher o `.dd` do proprio campo) passa a resolver
   contra a VIEWPORT assim que o menu vira `position:fixed` -- o containing block muda de "o .dd
   pai" pra "a tela inteira". Medido ao vivo: #compClienteMenu abria com right:3018 numa tela de
   1904px (100% da JANELA, nao do campo). `.ddMenuFixo` e' sempre um escape do fluxo normal --
   width:auto!important garante que NENHUMA regra de largura por ancestral (existente ou futura)
   volte a vazar pra dentro do menu fixed; min-width:180px do `.ddMenu` base continua valendo.
   z-index:170 (VOLTA 2, ALTAIR): o JS agora reparenta este menu pro `<body>` enquanto aberto (ver
   `ddMenuFixoAbrir`, ancestral com `transform` vira containing block de `position:fixed` e quebra
   o calculo) -- como filho direto do body, precisa vencer `#tarefaPainel` (z-index:50) e qualquer
   modal padrao (130-160, ver `.menuFlut`/`.persPainel`), sem chegar no territorio do toast (9999). */
.ddMenu.ddMenuFixo{position:fixed;margin-top:0;overflow-y:auto;overflow-x:hidden;width:auto!important;max-width:calc(100vw - 16px);z-index:170}
.ddMenu.on{display:block}
.ddTitulo{height:32px;display:flex;align-items:center;padding:0 16px;font-size:12px;font-weight:500;color:var(--apagado)} /* ALTAIR: titulo do menu de agrupar, medido no ClickUp (12/500, secundaria, altura 32, padding 8 16) */
.ddOp{height:32px;box-sizing:border-box;padding:0 11px;border-radius:6px;font-size:13px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--tinta-2)}
.ddOp:hover{background:var(--surface-2);color:var(--tinta)}
/* F1 (ALTAIR verificacao 1): menu de agrupar — 368 de largura, linha 1 com 2 botoes lado a lado
   (Status 136 + Crescente/Decrescente 80), linha 2/3 cheias (Adicionar subgrupo, Remover agrupamento) */
/* F1 (ALTAIR verificacao 2): estilizado pelo ID direto (#ctrlAgruparMenu), nao so pela classe
   adicionada via JS — 356 medido sugere que o width nao estava vencendo por alguma razao de timing;
   ID e sempre a mesma especificidade da classe mas nao depende do JS ter rodado a tempo. */
.ddAgrupaMenu,#ctrlAgruparMenu{width:368px;min-width:368px}
.ddAgrupaL1{display:flex;gap:8px;padding:2px}
.ddAgrupaCampo{position:relative;width:136px;height:32px;box-sizing:border-box;padding:0 11px;border-radius:6px;font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--tinta-2);background:var(--surface-2);border:none;text-align:left}
.ddAgrupaCampo:hover{color:var(--tinta)}
.ddAgrupaDir{width:80px;height:32px;box-sizing:border-box;padding:0 11px;border-radius:6px;font-size:13px;cursor:pointer;color:var(--tinta-2);background:var(--surface-2);border:none;text-align:left}
.ddAgrupaDir:hover{color:var(--tinta)}
.ddAgrupaLarga{width:100%}
#ddAgrupaCampoMenu{top:calc(100% + 2px);left:0;min-width:136px}

/* RECURSOS (Mais/Documentos/Formulário) */
/* O-081 volta 1 (14/09): moldura unica, 32px->28px. Flush (largura total, sem max-width), sem
   motivo documentado pro 32. Vertical (26px) intocado. */
.recWrap{padding:26px 28px}
.recTit{font-size:22px;font-weight:600;margin-bottom:22px}
.recGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-entre-cards)}
/* ORION O-012 (07/09): as pastas do departamento (#depGridSubs, nova.js:6456) quebravam em 4+2
   porque auto-fill/minmax(230px) e sensivel a largura da tela -- mesma causa raiz do desalinhamento
   dos 17 KPIs (auto-fit por linha). Sao sempre poucos itens (pastas de um departamento, nunca uma
   lista longa), entao colunas FIXAS resolvem sem risco: cabem numa fileira so, sem depender de
   quanto sobra de tela. Escopado por ID, o .recGrid generico (usado noutras telas com mais itens
   e com .recDesc, ver nova.js:10426/10475) continua auto-fill de proposito. */
#depGridSubs.recGrid{grid-template-columns:repeat(6,1fr)}
@media (max-width:1100px){#depGridSubs.recGrid{grid-template-columns:repeat(3,1fr)}}
.recCard{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--card-pad);cursor:pointer;transition:all .15s}
.recCard:hover{border-color:var(--borda-2);background:var(--surface-2)}
.recIc{display:inline-flex;width:38px;height:38px;border-radius:9px;background:var(--roxo-suave);color:var(--roxo-2);align-items:center;justify-content:center;margin-bottom:12px}
.recIc svg{width:19px;height:19px}
.recNome{font-size:14px;font-weight:600;margin-bottom:5px}
.recDesc{font-size:12px;color:var(--apagado);line-height:1.4}

/* CANAL (chat da lista com o Fenrir) */
.canalWrap{display:flex;flex-direction:column;height:100%}
.canalMsgs{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.canalBoas{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:16px;font-size:13px;line-height:1.5}
.canalIc{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--roxo-suave);color:var(--roxo-2);display:inline-flex;align-items:center;justify-content:center}
.canalIc svg{width:18px;height:18px}
.canalMsg{max-width:70%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.45}
.canalMsg.eu{align-self:flex-end;background:var(--roxo);color:#fff;border-bottom-right-radius:4px}
.canalMsg.fenrir{align-self:flex-start;background:var(--surface-2);color:var(--tinta);border-bottom-left-radius:4px}
.canalBox{display:flex;gap:8px;padding:14px 24px;border-top:1px solid var(--borda)}
#canalInput{flex:1;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta);padding:11px 14px;font-size:13px;outline:none}
#canalInput:focus{border-color:var(--roxo)}
#canalEnviar{width:42px;background:var(--roxo);border:none;border-radius:var(--r);color:#fff;display:inline-flex;align-items:center;justify-content:center}
#canalEnviar svg{width:17px;height:17px}

/* FENRIR */
#fenrirBox{padding:24px;max-width:620px}
#pedidoIA{width:100%;min-height:90px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta);padding:12px;font-size:13px;resize:vertical}
#btnIA{margin-top:10px;background:var(--roxo);border:none;color:#fff;padding:9px 20px;border-radius:var(--r);font-weight:600}
#respIA{margin-top:12px;color:var(--apagado);font-size:12.5px}

/* MENU DO AVATAR */
.avMenu{position:fixed;background:var(--surface);border:1px solid var(--borda-2);border-radius:var(--r-menu-acoes);box-shadow:0 8px 30px rgba(0,0,0,.6);z-index:60;min-width:280px;padding:6px;display:none;max-height:88vh;overflow-y:auto}
.avMenu.on{display:block}
/* menu do avatar: coluna unica estreita (medido 288 de largura). O .avGrupo abaixo e inline-flex por causa da PILHA de avatares (cards); aqui a gente reescopa o grupo do MENU pra vertical, senao os itens fluem na horizontal e o menu vira 735 de largura */
#avatarMenu{width:288px;border-radius:12px 8px 12px 12px} /* radius assimetrico medido (canto sup-dir mais fechado, aponta pro avatar) */
#avatarMenu .avGrupo{display:flex;flex-direction:column;align-items:stretch}
#avatarMenu .avGrupo > *{margin-left:0}
/* menu de workspace: mesma colisao de classe do avatar (.avGrupo inline-flex da pilha) — coluna unica estreita (medido 320, radius 0) */
#wsMenu{width:320px;border-radius:8px 12px 12px} /* 320 de largura (confirmado) x radius 8px 12px 12px — REMEDIDO pela ALTAIR 29/08; a medicao antiga dizia radius 0 e estava desatualizada. Regra do Wilker segue valendo: "igual" = design 100% igual; consistencia interna NAO justifica divergir. */
#wsMenu .avGrupo{display:flex;flex-direction:column;align-items:stretch}
#wsMenu .avGrupo > *{margin-left:0}
.avHead{display:flex;align-items:center;gap:12px;padding:12px 12px 14px}
.avBig{width:40px;height:40px;border-radius:50%;background:#d94a6a;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.avNome{font-size:14px;font-weight:600}
.avStatus{display:flex;align-items:center;gap:6px;color:var(--apagado);font-size:12px;margin-top:2px}
.avPonto{width:8px;height:8px;border-radius:50%;background:var(--verde)}
/* MOTOR grupo de avatares. Medido: o ClickUp usa DOIS componentes distintos nas duas visoes.
   LISTA (linha): cu3-avatar-group — 24px, passo 22 (sobrepoe 2), SEM anel. VALIDADO, e o default abaixo.
   QUADRO (card): cu-user-group — componente diferente, overrides em .kbCardFoot .avGrupo. */
.avGrupo{display:inline-flex;align-items:center}
.avGrupo > *{margin-left:-2px}
.avGrupo > *:first-child{margin-left:0}
.avMais{background:var(--roxo-2)!important;color:#fff;font-size:9px;font-weight:700}
/* CARD do Quadro: cu-user-group > cu-avatar_24 cu-avatar_bordered (medido).
   Sobreposicao 8px; row-reverse = 1o responsavel do dado a DIREITA e o da esquerda pinta por cima
   (cai naturalmente da ordem do DOM: irmao posterior pinta por cima, e o reverse o joga pra esquerda).
   Anel = border 1.8px na cor da superficie do card com box-sizing border-box, pra a borda comer pra
   DENTRO e o disco colorido ficar 24 total (box-shadow crescia pra fora e inflava o disco). Fonte 10/400. */
/* Sobreposicao de 8px (medido): margin-left -8 em TODOS os itens, inclusive o primeiro,
   e padding-left:8 no grupo compensa a margem negativa do primeiro e faz a caixa abracar o
   desenho (borda esquerda do grupo == borda esquerda do avatar da esquerda, zero vazamento).
   1 avatar: 8 + (-8 + 24) = 24; 2 avatares: 8 + (-8+24) + (-8+24) = 40. */
.kbCardFoot .avGrupo{flex-direction:row-reverse;padding-left:8px;box-sizing:border-box}
.kbCardFoot .avGrupo .kbAvatar{width:22px;height:22px;font-size:10px;font-weight:400;margin-left:-8px;box-sizing:border-box;border:2px solid var(--bg);box-shadow:none;background-clip:padding-box}
.avOp{display:flex;align-items:center;gap:12px;height:32px;box-sizing:border-box;padding:0 12px;border-radius:6px;font-size:13px;color:var(--tinta-2);cursor:pointer}
.avOp:hover{background:var(--surface-2);color:var(--tinta)}
.avIc{width:18px;text-align:center;font-size:13px;color:var(--apagado)}
.avSeta{margin-left:auto;color:var(--apagado)}
.avSep{height:1px;background:var(--borda);margin:6px 8px}
.avLabel{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--apagado);padding:8px 12px 4px}
/* menu "+ Visualizacao": 2 colunas, grupos, descricao de uma linha, icone colorido por tipo (medido no ClickUp) */
#viewMenu{width:520px;max-width:94vw;padding:8px}
.vmGrupoTit{font-size:12px;font-weight:600;color:var(--tinta);padding:8px 8px 6px}
.vmGrid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.vmItem{align-items:flex-start;gap:10px;padding:9px 10px}
.vmIco{width:28px;height:28px;flex:0 0 28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.vmIco svg{width:15px;height:15px}
.vmTxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.vmNome{font-size:13px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vmDesc{font-size:11px;color:var(--apagado);line-height:1.3}

/* CONFIGURAÇÕES */
/* O-081 volta 1 (14/09): moldura unica, 40px->28px. Confirmado no DOM que este wrapper e FLUSH
   (marginLeft:0, o max-width so limita a direita, nao centraliza) -- mesmo grupo de `.ovWrap`/
   `.clienteSecoes`, sem motivo documentado pro 40. Vertical (32px) intocado, a lei e so horizontal. */
.cfgWrap{max-width:620px;padding:32px 28px}
.cfgTit{font-size:22px;font-weight:600;margin-bottom:24px}
.cfgAvatarRow{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.cfgAvatar{width:56px;height:56px;border-radius:50%;background:#d94a6a;color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cfgNome{font-size:16px;font-weight:600}
.cfgEmail{color:var(--apagado);font-size:13px;margin-top:3px}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.cfgCampo{margin-bottom:var(--sp-entre-cards)}
.cfgCampo label{display:block;font-size:12px;color:var(--apagado);margin-bottom:6px}
.cfgCampo input{width:100%;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta);padding:10px 12px;font-size:13px;outline:none}
.cfgCampo input:focus{border-color:var(--roxo)}
.cfgVazio{color:var(--apagado);font-size:13px}
.cfgPessoas{display:flex;flex-direction:column;gap:2px}
.cfgPessoa{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:6px;font-size:13px}
.cfgPessoa:hover{background:var(--surface)}
/* REFERENCIA: esta e a tela simples com lista + estado de erro pra copiar (funcao
   `telaConfigMetaPaginas()` em nova.js). Se voce precisa de uma tela nova de configuracao com
   lista de itens e um estado de erro honesto (nao lista vazia disfarcada), comece copiando daqui
   em vez de inventar um quarto jeito.
   O-021 (ORION 08/09), tela de leitura de Paginas do Meta pro video de app review -- PRIMEIRA
   tela nova depois do molde de card fechado hoje, e o PERSEUS avisou que nao existia precedente
   de lista+erro simples pra copiar. Isto vira o precedente: reusa a anatomia de `.cfgPessoas`/
   `.cfgPessoa` (ja estabelecida na aba Pessoas), com o NOME em destaque (vai pra video, o analista
   da Meta precisa ler sem esforco -- prioridade explicita do pedido, elegancia perde pra legibilidade
   aqui). `.telaErroBase`: estado de erro GENERICO pra telas fora do escopo `.moonOblivion` (que ja
   tem `.aviso.ruim` proprio) -- nome generico de proposito, pra qualquer tela simples nova reusar
   em vez de inventar um terceiro jeito de mostrar erro. Cor do token de erro ja existente
   (--vermelho, mesmo tom de `.finPillVencida`), nunca inventado. */
.cfgPaginasMeta{display:flex;flex-direction:column;gap:2px}
.cfgPaginaMeta{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:8px;border-bottom:1px solid var(--borda)}
.cfgPaginaMeta:last-child{border-bottom:none}
.cfgPaginaMetaNome{font-size:16px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfgPaginaMetaCategoria{font-size:12px;color:var(--apagado);flex:0 0 auto}
.cfgPaginaMetaCliente{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;flex:0 0 auto;white-space:nowrap}
.cfgPaginaMetaCliente.temCliente{background:rgba(46,205,111,.16);color:var(--verde)}
.cfgPaginaMetaCliente.semCliente{background:rgba(229,72,77,.16);color:var(--vermelho)}
.cfgPaginasMetaTopo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.cfgPaginasMetaHora{font-size:12px;color:var(--apagado)}
.telaErroBase{background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.3);border-radius:var(--r);color:var(--vermelho);padding:14px 16px;font-size:13px;line-height:1.5}
.telaErroBase b{display:block;margin-bottom:4px;font-size:13px}
/* O-133 item 1 (ORION, 18/09): card da Conexão com o Meta -- MESMA anatomia de `.cfgPlano`
   (card pequeno auto-contido, nunca largura cheia: max-width, nao stretch), reusada aqui em vez
   de inventar um quarto jeito de "caixa com borda" na mesma tela de Configurações. */
.metaConexaoCard{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:24px;max-width:440px;display:flex;flex-direction:column;gap:10px}
.metaConexaoStatus{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.metaConexaoStatusOff{color:var(--tinta-2)}
.metaConexaoStatusOn{color:var(--verde)}
.metaConexaoDot{width:8px;height:8px;border-radius:50%;background:var(--verde);flex:0 0 auto}
.metaConexaoDot.metaConexaoDotOff{background:var(--apagado)}
.metaConexaoConta{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metaConexaoDesde{font-size:12px;color:var(--apagado)}
.metaConexaoCard .imBtn{align-self:flex-start;margin-top:4px}
.cfgAvatarMini{width:28px;height:28px;border-radius:50%;color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.cfgPlano{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:24px;max-width:420px}
.cfgPlanoNome{font-size:13px;color:var(--roxo-2);font-weight:600;letter-spacing:.3px}
.cfgPlanoPreco{font-size:32px;font-weight:700;margin:8px 0}
.cfgPlanoPreco span{font-size:14px;color:var(--apagado);font-weight:400}
.cfgPlanoDesc{font-size:13px;color:var(--tinta-2);line-height:1.5}

/* PESQUISAR GLOBAL */
#buscaModal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80;display:none;padding-top:12vh;justify-content:center}
#buscaModal.on{display:flex}
.bmBox{width:600px;max-width:92vw;height:max-content;max-height:70vh;background:var(--surface);border:1px solid var(--borda-2);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden}
.bmTopo{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--borda)}
.bmLupa{color:var(--apagado);display:inline-flex}
.bmLupa svg{width:18px;height:18px}
#bmInput{flex:1;background:none;border:none;color:var(--tinta);font-size:16px;font-weight:500;height:28px;outline:none} /* medido ALTAIR 30/08: ClickUp 16/500 e altura 28; aqui era 15/400 e 20. A LARGURA (492 contra 482) nao se forca: ela e o que sobra da caixa depois da lupa e do Esc, entao ela segue a caixa e nao o contrario. */
.bmEsc{font-size:10px;color:var(--apagado);background:var(--surface-2);padding:2px 7px;border-radius:4px}
#bmResultados{max-height:52vh;overflow-y:auto;padding:6px}
.bmDica{color:var(--apagado);font-size:13px;padding:18px;text-align:center}
.bmDica.bmCorte{border-top:1px solid var(--borda);margin-top:4px;font-variant-numeric:tabular-nums} /* o teto de 25 existia e era MUDO: quem procurava via 25 e concluia que era tudo. O silencio aqui e sobre AUSENCIA — nada na tela fazia duvidar. */
/* ALTAIR 30/08: espacamento entre itens no ClickUp = 36. Aqui era 37 e virou 40 quando o avatar (20)
   entrou e passou a mandar na altura. 8 de padding + 20 do avatar = 36. A divergencia so ficou visivel
   depois de o item ganhar conteudo — medir antes seria medir um estado que ia deixar de existir. */
.bmItem{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:7px;cursor:pointer}
.bmItem:hover{background:var(--surface-2)}
.bmIc{color:var(--roxo-2);display:inline-flex}
.bmIc svg{width:15px;height:15px}
.bmNome{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmSub{font-size:11px;color:var(--apagado)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}
::-webkit-scrollbar-track{background:transparent}

/* ===== CHECKLISTS (dentro da tarefa) ===== */
/* ALTAIR 30/08, medido com O MESMO objeto dos dois lados (mesmos checklists, mesmos itens): o item bate
   (34 aqui contra 35 la) e a MOLDURA e que nao existe no ClickUp — fundo transparente, raio 0, padding 0.
   Cada checklist do Nova vinha numa caixa propria. E o cabecalho de 25 contra 40 era CONSEQUENCIA: o
   padding vertical de 10 comia o que la e altura do titulo. Tirar a caixa acerta os dois de uma vez. */
.tpChecklist{margin:10px 0;padding:0;background:transparent;border:none;border-radius:0}
.tpClHead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tpClNome{flex:1;min-width:0;font-weight:500;font-size:14px;line-height:25px;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* medido ALTAIR: nome do checklist 14/500; T-21 altura da linha 25 (era 19) */
.tpClProg{font-size:11px;color:var(--apagado);flex:0 0 auto}
.tpClHeadAcoes{display:flex;align-items:center;gap:0;flex:0 0 auto} /* ações fixas à direita (medido): add-item + ⋯, passo 20 (botao 20 + gap 0) */
.tpClBtn{width:20px;height:20px;border:none;background:none;color:var(--apagado);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.tpClBtn:hover{background:var(--surface-2);color:var(--tinta)}
.tpClBtn svg{width:14px;height:14px}
.tpClBar{height:4px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:8px}
.tpClBar>span{display:block;height:100%;background:var(--verde);transition:width .2s}
.tpClItens{display:flex;flex-direction:column;gap:2px}
.tpClItem{display:flex;align-items:center;gap:6px;min-height:29px;padding:2px 4px;border-radius:5px;font-size:14px;color:var(--tinta-2)} /* B10 gabarito ALTAIR: 14/400 h29. CONFLITO com medida antiga (34,8) que este comentario carregava —
   ficou com a medida mais recente, escrita explicitamente no checklist; a antiga fica registrada aqui
   para quem remedir decidir qual das duas era o embrulho. */
.tpClItem:hover{background:var(--surface-2)}
.tpClGrip{color:var(--apagado);cursor:grab;display:inline-flex;flex:0 0 auto;opacity:.55}
.tpClGrip svg{width:16px;height:16px} /* alça 16 (medido) */
.tpClItemMain{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer;margin:0}
.tpClItemNome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpClItem input{width:15px;height:15px;accent-color:var(--roxo);cursor:pointer;flex:0 0 auto}
.tpClItem.feito .tpClItemNome{text-decoration:line-through;color:var(--apagado)}
.tpClAdd{width:100%;margin-top:6px;background:none;border:none;border-top:1px solid var(--borda);padding:2px 4px 0;color:var(--tinta);font-size:14px;line-height:19px;outline:none} /* medido ALTAIR T-20: 14px (era 12); altura 25,9 -> ~21 do ClickUp via padding/line-height */
.tpClAdd::placeholder{color:var(--apagado)}

/* ===== ANEXOS ===== */
.tpAnexoGrade{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.tpAnexo{position:relative;display:flex;flex-direction:column;width:150px;border:none;border-radius:12px;overflow:hidden;text-decoration:none;color:var(--tinta);background:transparent;transition:background .15s} /* medido ALTAIR: tile 150x166 radius 12 transparente, sem borda (nao e linha de lista). color explicito mata o #0000EE de link herdado do navegador (bomba armada) */
.tpAnexo:hover{background:var(--surface)}
.tpAnexoX{position:absolute;top:4px;right:4px;width:20px;height:20px;border:none;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;display:inline-flex;opacity:0;pointer-events:none;transition:opacity .12s;align-items:center;justify-content:center;cursor:pointer;padding:0} /* revela no hover via OPACITY (padrao do app), nao display:none — sempre no layout, so invisivel/inerte ate o hover */
.tpAnexoX svg{width:12px;height:12px}
.tpAnexo:hover .tpAnexoX{opacity:1;pointer-events:auto}
.tpAnexoX:hover{background:var(--vermelho)}
.tpAnexo img{width:150px;height:150px;object-fit:cover;display:block;border-radius:12px;background:var(--surface-2)}
.tpAnexoExt{height:150px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--apagado);background:transparent} /* medido ALTAIR: ClickUp poe ICONE 48x48 aqui (deferido, precisa conjunto de icones). Interino: extensao neutra, sem o bloco roxo 700 */
.tpAnexoNome{font-size:12px;color:rgb(131,131,131);padding:4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* medido ALTAIR: nome 12px rgb(131,131,131) (era 10,5) */

/* ===== POPOVER DE DATAS (início + vencimento) ===== */
/* ALTAIR 30/08: o seletor do ClickUp e de DUAS colunas (479x436). A esquerda sao 8 atalhos com passo 32,
   cada um com a data resultante a direita em 12px cinza. Larguras internas NAO MEDIDAS: ela levantou o
   total, o passo de 32 e o tamanho do texto auxiliar, nao a divisao entre as colunas. */
.ddDatas{padding:10px;min-width:220px;width:479px;max-height:436px;box-sizing:border-box} /* ALTAIR verificacao 2: painel 479x436 */
.ddDatasCols{display:flex;gap:10px;align-items:flex-start}
.ddAtalhos{flex:0 0 auto;min-width:180px;border-right:1px solid var(--borda);padding-right:8px}
.ddDatasDir{flex:1;min-width:220px}
.ddAtalho{display:flex;align-items:center;justify-content:space-between;gap:10px;height:32px;padding:0 6px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--tinta);white-space:nowrap} /* 13->14, ALTAIR verificacao 2 */
.ddAtalho:hover{background:var(--surface-2)}
.ddAtalho.sel{background:var(--roxo-suave)}
.ddAtalhoData{font-size:12px;color:var(--tinta-3);flex:0 0 auto}
.ddDataLinha{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ddDataLinha label{font-size:11.5px;color:var(--tinta-2)}
.ddDataLinha input[type=date]{background:var(--bg);border:1px solid var(--borda);border-radius:6px;color:var(--tinta);padding:5px 8px;font-size:12px;color-scheme:dark}
.ddDataAcoes{display:flex;justify-content:space-between;gap:8px;margin-top:4px;border-top:1px solid var(--borda);padding-top:8px}
.ddDataAcoes button{background:var(--surface-2);border:none;color:var(--tinta-2);padding:5px 12px;border-radius:6px;font-size:12px}
.ddDataAcoes button.roxo{background:var(--roxo);color:#fff}
.ddDataAcoes button:hover{filter:brightness(1.12)}

/* ===== PAINÉIS (dashboard nativo) ===== */
/* O-081 volta 1 (14/09): moldura unica, 20px->28px. Flush, largura total, sem motivo documentado
   pro 20. */
.pnWrap{padding:16px 28px;overflow-y:auto;height:100%}
.pnAtualiza{font-size:11px;color:var(--apagado);margin-bottom:14px}
.pnCards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-entre-cards);margin-bottom:16px}
.pnCard{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:16px;box-shadow:var(--card-sh)}
.pnCardNum{font-size:28px;font-weight:700;line-height:1}
.pnCardLbl{font-size:12px;color:var(--apagado);margin-top:6px}
.pnGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pnWidget{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:14px 16px}
.pnWidgetTit{font-size:12.5px;font-weight:600;color:var(--tinta);margin-bottom:12px}
.pnBarRow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.pnBarLbl{width:120px;font-size:11.5px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnBarWrap{flex:1;height:8px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.pnBar{display:block;height:100%;background:linear-gradient(90deg,var(--roxo),var(--roxo-2));border-radius:5px}
.pnBarNum{width:26px;text-align:right;font-size:11.5px;color:var(--tinta-2)}
.pnLista{display:flex;flex-direction:column;gap:2px}
.pnItem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px;border-radius:6px;cursor:pointer}
.pnItem:hover{background:var(--surface-2)}
.pnItemNome{font-size:12.5px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnItemData{font-size:11px;color:var(--apagado);white-space:nowrap}

/* ===== BLOCO DE NOTAS ===== */
/* O-081 volta 1 (14/09): moldura unica, 20px->28px. Mesmo grupo do .pnWrap, flush. */
.notasWrap{padding:16px 28px;height:100%}
.notasArea,#notasArea{width:100%;height:100%;min-height:420px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);color:var(--tinta);padding:16px;font-size:13.5px;line-height:1.6;resize:none;outline:none}
#notasArea::placeholder{color:var(--apagado)}

/* ===== CRONOGRAMA (Linha do tempo / Gantt) ===== */
.cgWrap{display:flex;position:relative;height:calc(100vh - 210px);border:1px solid var(--borda);border-radius:var(--r);overflow:hidden;margin-top:4px}
.cgZoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:2px;z-index:4}
/* revisao geral (31/08, ALTAIR — so Linha do tempo medida): CU poe o zoom no TOPO da grade, nao
   no rodape. Classe SEPARADA (nao mudei .cgZoom direto) porque o mesmo elemento e compartilhado
   com o Gantt, que ela nao mediu — mudar a base moveria o zoom do Gantt tambem, sem medicao. */
.cgZoomTopo{bottom:auto;top:14px}
.cgZoom button{width:28px;height:28px;background:var(--surface);border:1px solid var(--borda);color:var(--tinta-2);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cgZoom button:first-child{border-radius:6px 6px 0 0}
.cgZoom button:last-child{border-radius:0 0 6px 6px;border-top:0}
.cgZoom button:hover{background:var(--surface-2);color:var(--tinta)}
.cgColNomes{flex:0 0 240px;border-right:1px solid var(--borda);overflow-y:auto;background:var(--surface)}
.cgCabNome{height:44px;display:flex;align-items:center;padding:0 14px;font-size:11.5px;font-weight:600;color:var(--apagado);border-bottom:1px solid var(--borda);position:sticky;top:0;background:var(--surface)}
.cgNome{height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12.5px;color:var(--tinta-2);border-bottom:1px solid var(--borda);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cgNome:hover{background:var(--surface-2)}
.cgDot{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.cgGrupo{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;font-size:11px;color:var(--apagado);border-bottom:1px solid var(--borda);background:var(--bg)}
.cgArea{flex:1;overflow-x:auto;overflow-y:auto}
.cgScroll{position:relative}
.cgRegua{display:flex;height:44px;position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--borda)}
.cgDia{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:5px;border-right:1px solid var(--borda);position:relative}
.cgDia.fds{background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,.035) 4px,rgba(255,255,255,.035) 8px)} /* fim de semana com hachura diagonal (medido), nao fundo chapado */
.cgDia.hoje{background:var(--surface-2)} /* sem roxo: o indicador de hoje e a linha vertical .cgHoje */
/* revisao geral (31/08, ALTAIR): "August 2026" quebrava em 2 linhas (media 41px de largura,
   cabia so "August"). nowrap forca uma linha so, igual ao ClickUp — absolute+shrink-to-fit ja
   deveria bastar sozinho, nowrap garante independente da causa exata do wrap. */
.cgMes{position:absolute;top:5px;left:4px;font-size:10px;font-weight:700;color:var(--tinta-2);text-transform:capitalize;white-space:nowrap}
.cgNum{font-size:11px;color:var(--apagado)}
/* ALTAIR 30/08: o ClickUp marca hoje na escala do Gantt com `.cu-gantt-today` — circulo de 18x18, raio
   50%, fundo rgb(229,72,77). O Nova destacava so por peso e fundo de coluna. Num Gantt esse marcador nao
   e enfeite: e o ponto de referencia de leitura — sem ele ninguem sabe onde esta no tempo sem contar dias.
   O rgb(229,72,77) dele e EXATAMENTE o --vermelho daqui, entao o valor entra direto e nao por conversao.
   NAO MEDIDO: se a coluna de hoje tambem tem fundo proprio no ClickUp. O tint daqui fica ate alguem medir. */
.cgDia.hoje .cgNum{width:18px;height:18px;border-radius:50%;background:var(--vermelho);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.cgDiaSem{font-size:10px;color:var(--apagado);margin-bottom:1px} /* dia da semana ordinal BR (2a 3a sa do) acima do numero */
.cgDia.hoje .cgDiaSem{color:var(--tinta-2)}
/* escala de dois niveis do Gantt: semana em cima (com Wxx), dia embaixo */
.cgReguaSem{display:flex;height:28px;position:sticky;top:0;z-index:3;background:var(--surface);border-bottom:1px solid var(--borda)}
.cgReguaSem+.cgRegua{top:28px}
.cgSemana{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;border-right:1px solid var(--borda);font-size:11px;color:var(--tinta-2);overflow:hidden;white-space:nowrap}
.cgSemW{color:var(--apagado);font-size:10px}
.cgNomeLista{height:34px;display:flex;align-items:center;padding:0 14px;font-size:12.5px;font-weight:600;color:var(--tinta);border-bottom:1px solid var(--borda);background:var(--bg)}
/* barra do Gantt: azul-claro FIXA (nao a cor do status), radius 6, borda 1px, 28 de altura */
.cgBarra.cgBarraGantt{height:28px;top:3px;background:rgb(198,212,249);border:1px solid rgb(160,182,235);border-radius:6px} /* 2 classes: vence o .cgBarra{height:23} que vem depois no arquivo */
.cgBarraGantt .cgBarraTxt{color:rgb(38,52,90)}
/* barra-mae agregada da lista: filete verde fino que abrange o periodo dos filhos */
.cgTrilhaLista{background:var(--bg)}
.cgBarraMae{position:absolute;top:13px;height:8px;background:rgb(166,222,150);border-radius:12px}
/* setas de dependencia do Gantt: segmentos DIV 2px + ponta triangulo CSS (medido: nao e SVG) */
.cgLink{position:absolute;background:rgb(185,190,199);z-index:3;pointer-events:none}
.cgLinkArrow{position:absolute;width:0;height:0;border-left:7px solid rgb(187,187,187);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;z-index:3;pointer-events:none}
/* barra da Timeline (motor proprio no ClickUp): cinza com titulo azul, radius 6, alcas de redimensionar nas pontas */
.cgBarra.cgBarraTimeline{height:31.8px;top:1px;background:var(--surface-2);border:1px solid var(--borda-2);border-radius:6px} /* 2 classes pra vencer; Timeline 31,8 (medido, diferente do Gantt 28) */
.cgBarraTimeline .cgBarraTxt{color:rgb(75,155,255)}
.cgResize{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;opacity:0}
.cgResizeI{left:0}.cgResizeF{right:0}
.cgBarraTimeline:hover .cgResize{opacity:1;background:linear-gradient(var(--tinta-2),var(--tinta-2)) center/2px 12px no-repeat}
/* pendencia 1 (Wilker, 31/08 — D2/D7 do Gantt): alca de dependencia, medida no hover — 10x10 redonda,
   cinza rgb(187,187,187), uma em cada ponta da barra. Arrastar de uma ate outra barra cria a ligacao. */
.cgAlcaDep{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:rgb(187,187,187);opacity:0;cursor:pointer;transform:translateY(-50%);z-index:2}
.cgBarra:hover .cgAlcaDep{opacity:1}
.cgAlcaDepI{left:-5px}
.cgAlcaDepF{right:-5px}
.cgLinkArrastando{position:fixed;height:2px;background:var(--roxo);transform-origin:0 50%;pointer-events:none;z-index:999}
/* AREA6: Timeline nao tem toolbar propria mais — Hoje+Dias▾ moram no #calToolbarSlot (croToolbar em
   nova.js), reusando .calHoje (Calendario) pra economia de CSS. Painel "Lista de pendencias" a direita. */
/* mesma tecnica de ALTURA DECLARADA do .calHoje vizinho na mesma faixa (licao ja aprendida nesta base:
   padding+line-height "natural" desalinha 1-2px do irmao ao lado; declarar a altura fecha sempre igual) */
.cgEscalaBtn{display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;height:24px;background:none;border:1px solid var(--borda);color:var(--tinta-2);padding:0 10px;border-radius:6px;font-size:12px;line-height:16px;font-weight:500;cursor:pointer;white-space:nowrap}
.cgEscalaBtn:hover{background:var(--surface-2);color:var(--tinta)}
.cgEscalaBtn svg{width:13px;height:13px}
/* B2 (AREA7): botao ⊕ do cabecalho da coluna Nome (STUB) — .cgCabNome ja e flex, margin-left:auto empurra pra direita */
.cgAddCol{background:none;border:none;color:var(--apagado);cursor:pointer;font-size:15px;line-height:1;margin-left:auto}
.cgAddCol:hover{color:var(--tinta)}
/* A6: 2 icones STUB (olho/ajuste) no canto esquerdo, acima da regua — substituem o texto "Tarefa" (C1) */
.cgCabTimeline{gap:6px}
.cgIconeBtn{background:none;border:none;color:var(--apagado);width:24px;height:24px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cgIconeBtn:hover{background:var(--surface-2);color:var(--tinta)}
.cgIconeBtn svg{width:15px;height:15px}
/* B(A3): celula de regua mais grossa nas escalas Semana/Mes — o numero vira o rotulo inteiro, sem cgNum pequeno */
.cgDiaEscala{align-items:center;justify-content:center;padding-bottom:0}
.cgDiaEscala .cgNum{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
/* C3/C4: rodape clicavel que revela os grupos de status escondidos (sem tarefa no periodo) */
.cgRodapeVazios{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--borda);padding:8px 14px;font-size:11.5px;color:var(--roxo);cursor:pointer}
.cgRodapeVazios:hover{text-decoration:underline}
/* C7: seta de colapso do grupo — reusa o .grupoSeta ja medido (Lista/Quadro: botao 24x24, icone 16,
   90deg=aberto / 0deg=fechado), so reposicionada pro fim da linha (aqui e flex simples, nao a calha
   absoluta da Lista) */
.cgGrupo .grupoSeta{margin-left:auto}
/* AREA7 (B1): a raiz do Gantt reusa o MESMO mecanismo — so que a linha de cabecalho do lado das barras
   la e a barra-mae (.cgTrilhaLista, D3 ja confirmada certa), nao um .cgTrilhaGrupo vazio. Excluir as
   duas do hide: o cabecalho do bloco (nome OU barra-mae) fica visivel, so os FILHOS somem. */
.cgGrupoBloco.cgColapsado .cgNome,.cgGrupoBloco.cgColapsado .cgAddTask,.cgGrupoBloco.cgColapsado .cgTrilha:not(.cgTrilhaGrupo):not(.cgTrilhaLista){display:none}
.cgGrupoBloco.cgColapsado .grupoSeta{transform:rotate(0)}
/* B1 (AREA7): icone de lista no no raiz da arvore */
.cgNomeLista{gap:6px}
.cgListaIco{display:inline-flex;color:var(--apagado)}
.cgListaIco svg{width:15px;height:15px}
/* B4 (AREA7): "+ Add Task" no fim da arvore, mesma linguagem visual do "+ Adicionar tarefa" da Grade (.tabAddRow) */
.cgAddTask{height:34px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--borda);cursor:text;color:var(--apagado)}
.cgAddTaskMais{color:var(--tinta-3,#888);margin-right:8px;display:inline-flex}
.cgAddTaskMais svg{width:13px;height:13px}
.cgAddTaskInput{background:transparent;border:none;color:var(--tinta);font-size:12.5px;width:100%;outline:none}
/* A5 (AREA7): botao de painel esconde a coluna de nomes inteira; .cgArea (flex:1) toma o espaco sozinha */
.cgColNomes.cgColEscondida{display:none}
/* D1 (AREA7): nome da barra do Gantt fica FORA, a direita — span irmao absoluto dentro do .cgTrilha
   (que ja e position:relative), centralizado na altura da linha inteira (aproxima o centro dos 28px da
   barra sem precisar repetir o offset de 3px dela) */
.cgBarraTxtFora{position:absolute;top:0;height:100%;display:flex;align-items:center;font-size:12px;color:var(--tinta);white-space:nowrap;pointer-events:none}
.cgLayout{display:flex;gap:12px;align-items:stretch}
.cgLayout .cgWrap{flex:1;min-width:0}
/* revisao geral (31/08, ALTAIR — 1a medicao da Linha do tempo): 260 era chute, ClickUp mede 320 */
.cgBacklog{flex:0 0 320px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);height:calc(100vh - 210px);display:flex;flex-direction:column;overflow:hidden}
.cgBacklogTit{font-size:13px;font-weight:600;color:var(--tinta);padding:12px 14px 8px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.cgBacklogTit span{color:var(--apagado);font-weight:400}
/* E2: STUB — Nova so tem UM modo de backlog, o dropdown existe mas nao tem pra onde trocar ainda */
.cgBacklogFiltro{display:block;margin:0 14px 8px;background:none;border:1px solid var(--borda);color:var(--tinta-2);padding:5px 10px;border-radius:6px;font-size:12px;text-align:left;cursor:pointer}
.cgBacklogFiltro:hover{background:var(--surface-2);color:var(--tinta)}
.cgBacklogBusca{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 10px;background:var(--surface-2);border-radius:7px}
.cgBacklogLupa{display:inline-flex;color:var(--apagado)}
.cgBacklogLupa svg{width:14px;height:14px}
.cgBacklogBusca input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--tinta);font-size:12.5px}
.cgBacklogCont{padding:0 14px 8px;font-size:11px;color:var(--apagado);border-bottom:1px solid var(--borda)}
.cgBacklogLista{flex:1;overflow-y:auto;padding:8px}
.cgBacklogVazio{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;font-size:12.5px;color:var(--apagado);text-align:center}
.cgBacklogVazioIc{opacity:.5}
.cgBacklogVazioIc svg{width:28px;height:28px}
.cgBacklogItem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--tinta-2);cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgBacklogItem:hover{background:var(--surface-2)}
/* E5: alca de arrastar (medido: caractere braille ⠿, nao icone svg) no lugar do marcador colorido */
.cgBacklogAlca{flex:0 0 auto;color:var(--apagado);font-size:13px;line-height:1}
.cgLinhas{position:relative}
.cgTrilha{height:34px;border-bottom:1px solid var(--borda);position:relative}
.cgTrilhaGrupo{background:var(--bg)}
.cgBarra{position:absolute;top:5px;height:23px;border:1.5px solid;border-radius:6px;display:flex;align-items:center;padding:0 8px;cursor:pointer;overflow:hidden}
.cgBarra:hover{filter:brightness(1.2)}
.cgBarra.marco{border-radius:50% 6px 6px 50%}
.cgBarraTxt{font-size:11px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgHoje{position:absolute;top:0;bottom:0;width:2px;background:var(--vermelho);z-index:1;pointer-events:none}
/* D4 (AREA7, medido): marcador de tarefa sem data na arvore do Gantt — ponto amarelo 8x8, rgb(255,197,61) */
.cgMarcadorSemData{position:absolute;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:rgb(255,197,61)}

/* ===== BARRA DE CONTROLE — busca inline + agrupar ===== */
.ctrlBuscaInline{display:none;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--borda);border-radius:7px;padding:4px 10px;margin-left:8px}
.ctrlBuscaInline.on{display:flex}
.ctrlBuscaInline svg{width:14px;height:14px;color:var(--apagado)}
.ctrlBuscaInline input{background:none;border:none;outline:none;color:var(--tinta);font-size:12.5px;width:170px}
.ctrlBuscaInline input::placeholder{color:var(--apagado)}
#ctrlAgrupar{position:relative}
#ctrlResp{position:relative}
#ctrlResp.ativo{color:var(--roxo-2);background:var(--roxo-suave)}

/* ===== TABELA — cabeçalho clicável (ordenação) + menu de status na linha ===== */
.tabTh{cursor:pointer;user-select:none;min-width:60px} /* piso: com table-layout:fixed uma coluna sem largura declarada pode colapsar; 60 garante que a alca de resize continue alcancavel */
.tabTh:hover{color:var(--tinta)}
.ddMenuStatus{position:absolute;top:20px;left:0;z-index:30}

/* ===== VIEW EQUIPE (cards por pessoa, lado a lado) ===== */
/* ALTAIR 30/08, view Equipe MEDIDA nos dois (ela criou a view no ClickUp: deixou de ser SEM PAR).
   Batem ao caractere: largura do cartao 250, raio 4, e os rotulos "Não feito"/"Feito".
   Divergem e entram aqui: gap da grade (15 aqui, normal=0 la), titulo do cartao (13/600 aqui, 14/500 la)
   e avatar da carga (22 aqui, 24 la). As ALTURAS (+44 e +58) NAO ajusto direto — sao consequencia destes
   tres e de padding; medir de novo depois em vez de fixar altura, que esconderia a causa. */
/* revisao geral (31/08, ALTAIR — print do Wilker, quebrado de verdade): gap 0 colava os cards
   um no outro (alvo medido: 15px). align-items:flex-start deixava cada card se esticar so pra
   sua propria altura de conteudo, causando o degrau (ClickUp: todos os cards da linha com a
   MESMA altura). Mecanismo: align-items:stretch (o default do flexbox, que estava sendo
   sobrescrito) — estica cada card ate a altura do mais alto da linha, sem chutar um px fixo. */
.eqGrade{display:flex;gap:15px;padding:14px 4px;overflow-x:auto;align-items:stretch;height:calc(100vh - 210px)}
.eqCard{flex:0 0 250px;max-height:318px;background:var(--surface);border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.28);display:flex;flex-direction:column;padding:0;overflow:hidden} /* 250x318, sombra em vez de borda (medido) */
.eqCardTopo{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.eqAvatar{width:26px;height:26px;border-radius:50%;background:var(--roxo);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px}
.eqNome{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* B1 (AREA8): "+" (criar tarefa atribuida) e "⌄" (recolher) a direita do titulo do card */
.eqCardAcoes{flex:0 0 auto;display:flex;align-items:center;gap:2px}
.eqCardAdd{background:none;border:none;color:var(--apagado);width:22px;height:22px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.eqCardAdd:hover{background:var(--surface-2);color:var(--tinta)}
.eqCardAdd svg{width:14px;height:14px}
.eqCardColapsar{width:22px;height:22px} /* reusa .grupoSeta (cor/rotacao/icone ja medidos), so encolhe pra caber no cabecalho apertado do card */
.eqCard.recolhido .eqCardColapsar{transform:rotate(0)}
.eqCard.recolhido .eqCardAddRow,.eqCard.recolhido .eqCardMeio,.eqCard.recolhido .eqBarSeg,.eqCard.recolhido .eqStatusLista{display:none}
.eqCardAddRow{display:none;padding:0 14px 10px}
.eqCardAddRow.aberto{display:block}
.eqCardAddInput{width:100%;background:var(--surface-2);border:none;border-radius:5px;padding:6px 8px;color:var(--tinta);font-size:12.5px;outline:none}
/* numeros empilhados sobre o rotulo, em duas colunas, + anel a direita */
.eqCardMeio{display:flex;align-items:center;padding:0 14px 10px;gap:8px}
.eqNums{display:flex;gap:52px;flex:1}
.eqNum{display:flex;flex-direction:column;gap:2px}
.eqNum b{font-size:14px;font-weight:400;color:var(--tinta)}
.eqNum span{font-size:10px;color:var(--apagado)}
.eqAnel{flex:0 0 60px}
.eqAnelTxt{font-size:14px;font-weight:600;fill:var(--tinta)}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTES GRAFICOS REUTILIZAVEIS (O-119, ORION 16/09)
   Padrao PROPRIO do Nova pra "coisas graficas" (pedido do Wilker com prints do ClickUp) --
   NAO e copia do ClickUp, e' desenho novo, no tema escuro do Nova. Os dois (rosca + barra) sao
   MECANISMO: 1 funcao cada (chartRosca()/barraProgresso(), nova.js), chamadas por QUALQUER tela
   com dado pronto (nome/quantidade/cor ou feito/total) -- nunca redesenhadas tela a tela.

   POR QUE ROSCA + LEGENDA EM VEZ DE PIZZA COM ROTULO LIGADO POR LINHA (como o ClickUp mostrou):
   rotulo ligado por linha em fatia PEQUENA e' o mesmo problema de "texto encavalando" que ja
   resolvemos noutro lugar (SVG bug 13) -- só que aqui o desafio nao e' esticar, e' DUAS OU MAIS
   fatias pequenas perto uma da outra brigando pelo mesmo espaco de rotulo. Legenda em LISTA
   (abaixo/ao lado, nunca radial) elimina a colisao por construcao: quantas fatias existirem,
   cada uma vira uma LINHA da lista, nunca duas linhas disputam o mesmo lugar. Nome+numero
   continuam sempre legiveis, mesmo com 1% de fatia.

   POR QUE NUNCA TEXTO DENTRO DO SVG DA ROSCA: zero <text>. O arco (forma pura) PODE esticar sem
   problema (lei ja aprovada, O-103) -- a lei que NAO pode e' texto, e a legenda inteira mora em
   HTML fora do SVG, entao nao ha nada pra checar aqui (nao existe o caso a evitar). Redondo em
   qualquer largura vem de `aspect-ratio:1` no wrapper (nova.css abaixo) -- garantia matematica
   do CSS, nao depende de medir cada tela nova que for usar o componente.

   TECNICA DO ARCO: MESMA de `anelPct()` (stroke-dasharray/stroke-dashoffset num <circle>, sem
   biblioteca nenhuma), generalizada de 1 fatia (progresso) pra N fatias empilhadas (categorias)
   -- gabarito reusado, nao inventado do zero. */
.chartRoscaWrap{display:flex;align-items:center;gap:16px}
.chartRosca{width:88px;height:88px;aspect-ratio:1;flex:0 0 88px;display:block}
.chartRoscaLegenda{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.chartRoscaItem{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tinta-2)}
/* O-119 VOLTA 1 (ALTAIR, 16/09): status preto sumia de proposito -- mesma correcao do arco
   (nova.js/chartRosca): borda solida #888 (opaca, funciona em fundo claro OU escuro, ao
   contrario de --borda que e' branco translucido e some no papel), nunca depende da cor que o
   status recebeu. */
.chartRoscaCor{width:8px;height:8px;border-radius:50%;flex:0 0 8px;border:1px solid #888;box-sizing:border-box}
.chartRoscaNome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.chartRoscaQtd{font-weight:700;color:var(--tinta);flex:0 0 auto;font-variant-numeric:tabular-nums}
.chartRoscaVazio{color:var(--apagado);font-size:12px}

/* barra de progresso: 2 tamanhos (linha de lista / card), mesma marcacao, so' o trilho muda de
   altura -- CSS puro (largura da barra = %), sem SVG nenhum (nao ha forma pra deformar aqui). */
.barraProg{display:flex;align-items:center;gap:8px}
.barraProgTrilho{flex:1;background:var(--borda);border-radius:99px;overflow:hidden;min-width:0}
.barraProgFill{height:100%;background:var(--roxo);border-radius:99px}
.barraProgTxt{flex:0 0 auto;font-size:11px;color:var(--apagado);font-variant-numeric:tabular-nums;white-space:nowrap}
.barraProgLinha .barraProgTrilho{height:5px}
.barraProgCard .barraProgTrilho{height:8px}
.barraProgCard .barraProgTxt{font-size:12px;color:var(--tinta-2)}
/* ══════════════════════════════════════════════════════════════════════════ */

/* TELA DE PRODUTIVIDADE (O-112, ORION 17/09) -- nova_produtividade.js. Vocabulario ATUAL do app
   (nao .moonOblivion): `.card`/`--sp-entre-cards`/`--card-pad` do molde geral (linha ~1012/156),
   `.homeCardTit` pro titulo de bloco (mesma classe que os 34 `.homeCard` do app usam).
   VOLTA 1 (ALTAIR, 17/09): LEI DO CARD PEQUENO LADO A LADO valia so' pros cards DENTRO de cada
   bloco -- os BLOCOS (geral/sub/nivel_departamento) empilhavam verticais, largura cheia cada um,
   mesmo quando cabiam varios lado a lado. `#novaProdCorpo` virou flex-wrap: cada `.prodBloco` pede
   so' a largura que precisa (min-width do card menor, max-width um teto pra secao com MUITA gente
   nao virar uma fileira unica gigante -- ela quebra linha PRA DENTRO de si mesma, e o bloco
   continua cabendo do lado de outro bloco pequeno). */
#novaProdArea{padding:20px 28px}
#novaProdCorpo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-entre-secoes)}
/* VOLTA 1 SOBRA (ALTAIR, 17/09): bloco sem moldura -- titulo e card do bloco vizinho na MESMA
   linha, sem nada separando um bloco do outro, deixava ambiguo de quem era o card. `.prodBloco`
   ganha o MESMO padrao de card que `.prodPessoaCard` ja usa (borda/raio/sombra), so' com
   `--surface-2` (mais claro) em vez de `--surface` -- o bloco fica um degrau ACIMA visualmente, os
   cards de pessoa (--surface, mais escuros) ficam visivelmente DENTRO dele, nunca se confundem. */
.prodBloco{display:flex;flex-direction:column;gap:var(--sp-card-interno);flex:0 1 auto;min-width:260px;max-width:min(100%,720px);background:var(--surface-2);border:1px solid var(--borda);border-radius:var(--card-r);box-shadow:var(--card-sh);padding:16px}
.prodSecaoSubTit{padding:0}
.prodBlocoCorpo{display:flex;flex-wrap:wrap;gap:var(--sp-entre-cards);align-items:flex-start}
.prodBlocoCorpo .chartRoscaWrap{flex:0 0 auto}
.prodBlocoVazio{font-size:12px;color:var(--apagado);font-style:italic}
.prodPessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-entre-cards);flex:1 1 220px}
.prodPessoaCard{background:var(--surface);border:1px solid var(--borda);border-radius:var(--card-r);box-shadow:var(--card-sh);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--sp-card-interno)}
.prodPessoaNome{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prodPessoaNums{display:flex;gap:var(--sp-card-interno)}
.prodPessoaNum{flex:1;display:flex;flex-direction:column}
.prodPessoaNumV{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.prodPessoaNumL{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--apagado);margin-top:2px}
.prodPessoaExtras{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11px;color:var(--tinta-2)}
.prodPessoaExtra b{color:var(--tinta);font-weight:700}
.prodPessoaExtraRuim,.prodPessoaExtraRuim b{color:var(--vermelho)}
.prodSemTarefa{font-size:12px;color:var(--apagado);font-style:italic}
/* ══════════════════════════════════════════════════════════════════════════ */

/* barra segmentada por status, radius so nas pontas (le como peca unica) */
.eqBarSeg{display:flex;height:3px;margin:0 14px 12px;gap:0}
.eqSeg{display:block;height:100%}
/* lista de status com contagem */
.eqStatusLista{flex:1;overflow-y:auto;padding:0 6px 10px}
.eqStatusRow{display:flex;align-items:center;gap:8px;height:26px;padding:0 8px;border-radius:5px;cursor:pointer}
.eqStatusRow:hover{background:var(--surface-2)}
.eqStatusCaret{display:inline-flex;color:var(--apagado);transition:transform .12s}
.eqStatusCaret svg{width:9px;height:14px}
.eqStatusGrupo.aberto .eqStatusCaret{transform:rotate(90deg)}
.eqStatusDot{width:8px;height:8px;border-radius:1px;flex:0 0 8px} /* B3 (AREA8): quadrado (medido), era circulo */
.eqStatusNome{flex:1;font-size:12px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.3px}
.eqStatusSub{display:none;padding:2px 8px 6px 30px}
.eqStatusGrupo.aberto .eqStatusSub{display:block}
.eqStatusTarefa{font-size:12px;color:var(--tinta-2);padding:5px 6px;border-radius:5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eqStatusTarefa:hover{background:var(--surface-2);color:var(--tinta)}
/* card Carga de trabalho: barras verticais, uma por pessoa */
.eqCardCarga{padding:14px 12px}
.eqCardTitulo{font-size:14px;font-weight:500;color:var(--tinta);margin-bottom:14px}
.eqCargaBars{display:flex;align-items:flex-end;gap:24px;height:228px;overflow-x:auto;padding:0 8px}
.eqCargaCol{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;height:100%;justify-content:flex-end}
.eqCargaTrilho{width:6px;background:var(--surface-2);border-radius:3px;display:flex;align-items:flex-end;overflow:hidden;flex:0 0 auto;min-height:3px} /* altura = total da pessoa (medido) */
.eqCargaFill{width:100%;background:rgb(99,213,77);border-radius:3px} /* feito, ancorado embaixo */
.eqAvatarSm{width:24px;height:24px;flex:0 0 24px;font-size:10px} /* 22 -> 24, medido no .cu-workload-box */

/* ===== SIDEBAR MODULAR (redimensionar / colapsar) ===== */
#sbResize{flex:0 0 5px;margin-left:-3px;cursor:col-resize;background:transparent;z-index:5;transition:background .15s}
#sbResize:hover,#sbResize.arrastando{background:var(--roxo)}
.sbHeadIcons{display:flex;align-items:center;gap:2px}
.sbHeadIc{width:26px;height:26px;border-radius:6px;background:none;border:none;color:var(--apagado);display:inline-flex;align-items:center;justify-content:center}
.sbHeadIc:hover{background:var(--surface);color:var(--tinta)}
.sbHeadIc svg{width:16px;height:16px}
/* CURA ESTRUTURAL (O-091 item 2, 14/09): a divida anotada em O-083 esta paga. O botao saiu do
   `position:absolute` (fora do fluxo do `#topbar`) e virou filho normal do flex -- MORA DENTRO de
   `.tbEsq`, primeiro elemento antes de `#tbTitulo`, nao direto no `#topbar`: `#topbar` usa
   `justify-content:space-between` entre `.tbEsq`/`.tbDir`, que reparte o espaco sobrando IGUAL
   entre TODOS os pares de filhos consecutivos -- com o botao como 3o filho direto, o espaco
   sobrando virava 2 fatias (botao-titulo e titulo-tbDir) em vez de 1, e o titulo pulava pra
   longe do botao, quase no meio da tela (medido: ~550px de vao, achado ao testar, corrigido antes
   de entregar). Dentro de `.tbEsq` (que ja tem `gap:10px` proprio, independente do
   `justify-content` do pai) o botao fica adjacente ao titulo, sem essa interferencia. Os 4 pontos
   que a divida listava pra reconferir, resolvidos:
   (1) hover/estado: `display:none`/`flex` continua a troca -- dentro do flex isso NAO pula layout
   porque a visibilidade do botao e' SEMPRE identica a do proprio `#sidebar` (os dois trocam juntos
   com `.sb-oculta`), nunca existe um estado intermediario onde um mudou e o outro nao.
   (2) z-index 20: removido -- existia pra ficar por cima de `#sidebar`/`#sbResize` durante a
   transicao de fechar, que so fazia sentido com o botao flutuando SOBRE aquela faixa. Agora o
   botao vive dentro do `#topbar`, area que nunca se sobrepoe ao `#sidebar`/`#sbResize` mesmo
   durante a transicao (`#sidebar` tem `transition:width/flex-basis`, nunca invade a faixa do
   `#topbar` acima dele).
   (3) centralizacao vertical: `align-items:center` de `.tbEsq` resolve, sem `top` fixo.
   (4) atalho Ctrl+\: o listener fica em `document` (nao no elemento) e o clique busca o botao por
   `id`, os dois indiferentes a onde o elemento mora no HTML -- so' precisava manter o mesmo id,
   mantido. */
#sbReabrir{display:none;flex:0 0 auto;width:26px;height:26px;border-radius:6px;background:var(--surface);border:1px solid var(--borda);color:var(--tinta-2);align-items:center;justify-content:center}
#sbReabrir:hover{background:var(--surface-2);color:var(--tinta)}
#sbReabrir svg{width:16px;height:16px}
/* barra superior: ícones com svg do tamanho certo */
.spIcone{display:inline-flex;align-items:center;justify-content:center}
.spIcone svg{width:16px;height:16px} /* 17->16 (medido) */
.spEsq{display:flex;align-items:center;gap:6px}

/* ===== TOAST + gravando + transição sidebar ===== */
#sidebar{transition:flex-basis .16s ease,width .16s ease}
.spIcone.gravando{color:#fff;background:var(--vermelho);animation:pulseGrav 1s infinite}
@keyframes pulseGrav{0%,100%{opacity:1}50%{opacity:.55}}
#novaToast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface-2);color:var(--tinta);border:1px solid var(--borda-2);border-radius:9px;padding:10px 18px;font-size:12.5px;z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#novaToast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* AVISO DE OFFLINE. Nao usa o #novaToast de proposito: aquele some em 2,6s e offline nao e um evento, e um ESTADO —
   um aviso que sai da tela sozinho volta a ser o silencio que ele veio corrigir. Fica ate a rede voltar.
   Formato copiado do ClickUp (medido ALTAIR): ele nao anuncia a falha, diz o que AINDA funciona. Orientacao, nao alarme. */
#avisoOffline{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);display:none;align-items:center;gap:8px;max-width:min(520px,calc(100vw - 48px));background:var(--surface-2);color:var(--tinta);border:1px solid var(--borda-2);border-radius:9px;padding:10px 16px;font-size:12.5px;font-weight:600;line-height:1.45;z-index:9998;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#avisoOffline.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
#avisoOffline b{color:var(--tinta);font-weight:600}
#avisoOffline .aoTxt{font-weight:400;color:var(--tinta-2)}
#avisoOffline .aoPonto{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--vermelho)}

/* ===== SUBTAREFAS clicáveis no painel ===== */
/* ALTAIR 30/08, medido no par [SID SILVA] Fatura principal (12 subtarefas dos dois lados): no ClickUp a
   subtarefa NAO e item de lista, e LINHA DE TAREFA — mesmo componente da Lista principal, 35 de altura,
   com cabecalho de colunas (Nome | Responsavel | Prioridade | Data de vencimento | Adicionar) e os campos
   visiveis na propria linha. Aqui era caixa de marcar + nome, 29 de altura. Nao e diferenca de estilo: e
   diferenca do QUE a subtarefa e. Altura 29 -> 35, que e o que cabe com os campos dentro. */
/* LARGURAS NAO MEDIDAS: 90/130/110 sao escolha minha. ALTAIR mediu os NOMES das colunas do ClickUp
   (Nome | Responsavel | Prioridade | Data de vencimento | Adicionar) e a largura total (1155), nao a de
   cada uma. Se alguma coluna ficar apertada ou sobrando, suspeitar destes tres numeros antes do conteudo.
   SEIS colunas, nao cinco: a bolinha de status e um filho da grade tambem. Com cinco, o nome caia na
   coluna do responsavel e tudo escorregava um lugar — a grade nao reclama, so desalinha.
   `.tpSub` tem REGRA UNICA agora (ORION 08/09, achado do ARCTURUS): existia uma declaracao morta
   la em cima (linha ~1275) com LAYOUT INTEIRO diferente -- flex em vez de grid, padding/fonte/borda
   todos outros. Apagada. */
.tpSub{display:grid;grid-template-columns:15px 1fr 90px 130px 110px 24px;align-items:center;gap:8px;height:35px;padding:0 6px;border-radius:6px;border-bottom:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--tinta)}
.tpSubHead{display:grid;grid-template-columns:15px 1fr 90px 130px 110px 24px;align-items:center;gap:8px;height:36px;padding:0 6px;font-size:12px;font-weight:500;color:rgb(131,131,131)}
.tpSubCol{display:flex;align-items:center;min-width:0;overflow:hidden}
.tpSubColAdd{width:24px} /* medido ALTAIR: subtarefa e TAREFA (14/500, cor primaria); altura 29 (a fonte maior empurrava p/ 31,9) e SEM border-bottom (cu-task-row-main e 0px none) */
.tpSub:hover{background:var(--surface-2);color:var(--tinta)}
/* `.tpSubCheck` (geometria) tem regra unica agora -- existia uma morta (linha ~1276, 14px/1.5px,
   cor por TOKEN `var(--apagado)`) sobrescrita por esta (15px/1.6px, cor CRUA `#888`). Apagada a
   morta. NAO troquei o `#888` pelo token por conta propria -- isso muda cor visivel na tela
   (decisao de aparencia, nao faxina de duplicata), reportado ao ALTAIR em vez de decidido aqui. */
.tpSubCheck{width:15px;height:15px;border:1.6px solid #888;border-radius:50%;flex:0 0 15px}
.tpSubNome{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpSub.feito .tpSubNome{text-decoration:line-through;color:var(--apagado)} /* MESMO padrao do .tpClItem.feito do checklist — o app ja sabia desenhar concluido e a subtarefa nao usava. Copiado, nao inventado. */
.tpSubCheck.feito{box-shadow:inset 0 0 0 2px var(--bg)} /* anel PREENCHIDO quando feito: a cor sozinha (verde x cinza) some pra quem nao separa as duas. O fundo vem inline com a cor DO STATUS — currentColor aqui pegaria a cor do TEXTO e pintaria errado. */

/* ===== SELETOR DE VISUALIZAÇÃO DA TASK (Barra lateral / Modal / Tela cheia) ===== */
/* `.tpTopoDir` -- achado DIFERENTE do esperado (ORION 09/09): nao era "uma viva, uma morta". Grep
   em nova.js inteiro deu ZERO usos reais desta classe -- as DUAS declaracoes (aqui e em ~1880)
   sao orfas, nenhuma pinta nada. Apaguei as duas (nao so uma), reportado a ALTAIR como desvio do
   padrao esperado. */
.tpModoBtn{background:none;border:none;color:var(--apagado);width:30px;height:30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.tpModoBtn:hover{background:var(--surface);color:var(--tinta)}
.tpModoBtn svg{width:16px;height:16px}
.ddModo{right:0;left:auto;min-width:170px}
.ddModo .ddOp.sel{color:var(--roxo-2)}
.ddModo .avIc svg{width:15px;height:15px}
/* MODAL: centralizado sobre o overlay */
/* width/height mortos aqui (860px/86vh) -- havia uma regra standalone em 1995 (1040px, morta tambem,
   apagada) e a que vence de verdade e' a de baixo (2547: width:min(1320px,96vw);height:90vh). Todo o
   resto desta regra (transform, max-width, border, box-shadow, opacity, transition) e' UNICO e continua
   vivo -- ORION 09/09 */
#tarefaPainel.modo-modal{right:auto;left:50%;top:50%;transform:translate(-50%,-48%) scale(.97);max-width:94vw;border:1px solid var(--borda-2);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
#tarefaPainel.modo-modal.aberto{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
/* TELA CHEIA: quase full, com margem */
/* width/height mortos aqui (calc(100vw - 72px)/calc(100vh - 48px)) -- havia standalone em 1996
   (calc(100vw - 100px), morta, apagada) e quem vence e' a de baixo (2548: mesma largura calc(100vw -
   72px), mas height:calc(100vh - 36px)). Resto da regra (transform, border, box-shadow, opacity,
   transition) e' UNICO e continua vivo -- ORION 09/09 */
#tarefaPainel.modo-tela{right:auto;left:50%;top:24px;transform:translate(-50%,16px);border:1px solid var(--borda-2);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
#tarefaPainel.modo-tela.aberto{transform:translate(-50%,0);opacity:1;pointer-events:auto}

/* ===== POPUP DE AGENDA (botão calendário da barra superior) ===== */
#agendaPopup{min-width:300px;max-width:340px;padding:0;overflow:hidden}
.agpHead{padding:12px 14px 8px;border-bottom:1px solid var(--borda)}
.agpTit{font-size:13.5px;font-weight:600;color:var(--tinta);display:block}
.agpData{font-size:11.5px;color:var(--apagado);text-transform:capitalize}
.agpBody{max-height:340px;overflow-y:auto;padding:6px}
.agpGrupo{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--apagado);padding:8px 8px 4px}
.agpItem{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;cursor:pointer}
.agpItem:hover{background:var(--surface-2)}
.agpDot{width:7px;height:7px;border-radius:50%;background:var(--roxo);flex:0 0 7px}
.agpNome{flex:1;font-size:12.5px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agpHora{font-size:11px;color:var(--apagado)}
.agpFoot{padding:10px 14px;border-top:1px solid var(--borda);font-size:12px;color:var(--roxo-2);cursor:pointer;text-align:center}
.agpFoot:hover{background:var(--surface)}

/* ===== MENU "..." de mais ações da tarefa ===== */
/* segunda declaracao de `.tpTopoDir` apagada aqui tambem (ORION 09/09) -- ver comentario na
   primeira (~1842): zero uso real da classe em nova.js, as duas eram orfas. */
.ddMais{right:0;left:auto;min-width:180px}
.ddMais .avIc svg{width:15px;height:15px}
.ddMais .ddOp.perigo{color:var(--vermelho)}
.ddMais .ddOp.perigo:hover{background:rgba(229,72,77,.12)}

/* ===== HEADER DA TAREFA (fiel ao ClickUp) ===== */
.tpHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--borda);background:var(--sidebar);position:sticky;top:0;z-index:6}
.tpHeadEsq{display:flex;align-items:center;gap:3px;min-width:0}
.tpHeadDir{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.tpHeadIc{width:28px;height:28px;border-radius:7px;background:none;border:none;color:var(--apagado);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.tpHeadIc:hover{background:var(--surface);color:var(--tinta)}
.tpHeadIc:active{background:var(--surface-2)} /* medido ALTAIR: o ClickUp ESCURECE mais ao pressionar (6% -> 9%) e o Nova nao distinguia pressionado de hover. O que viaja e o MECANISMO — 'ativo e um passo alem do hover' — nao o valor: aqui a escala do Nova vai --bg #0f0f12 -> --surface (hover) -> --surface-2 (ativo), CLAREANDO, porque o fundo e escuro. Copiar a direcao do ClickUp escureceria contra um fundo ja escuro. */
.tpHeadIc svg{width:16px;height:16px}
.tpBreadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tinta-2);min-width:0;overflow:hidden;margin-left:4px} /* medido ALTAIR T-06: 13px (era 12,5) */
.tpBcItem{display:inline-flex;align-items:center;gap:5px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* medido ALTAIR T-06b: itens 14px (o separador fica 13, ja batia) */
.tpBcLista{color:var(--tinta);font-weight:500}
/* A2: faltava CSS pra tpBcAdd/tpBcAba — nasciam com estilo padrao do browser (sem tamanho fixo pro
   svg 24x24), o botao ficava espremido e o icone virava um risco vertical na tela. */
.tpBcAdd,.tpBcAba{background:none;border:none;color:var(--apagado);width:22px;height:22px;flex:0 0 auto;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tpBcAdd svg,.tpBcAba svg{width:14px;height:14px}
.tpBcAdd:hover,.tpBcAba:hover{background:var(--surface-2);color:var(--tinta)}
.tpBcLista[data-lista]:not([data-lista=""]):hover{text-decoration:underline} /* breadcrumb clicavel leva a lista */
.tpBcDot{width:16px;height:16px;border-radius:4px;background:var(--roxo);color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px}
.tpBcSep{color:var(--apagado)}
.tpCriada{font-size:11.5px;color:var(--apagado);margin-right:4px;white-space:nowrap}
.tpHeadBtn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--tinta-2);font-size:14px;font-weight:500;height:28px;padding:0 7px;border-radius:7px;white-space:nowrap} /* medido ALTAIR 29/08: raio 7 (nao 6) em toda a barra do cabecalho, e peso 500 (nao 400) nos botoes COM rotulo. Tamanho 14 ja batia. */ /* medido ALTAIR T-03/T-04: Brain2 e Compartilhar sao 28 de altura e 14px (era 26,3/12,5) — o padrao 12,5-contra-14 de novo */
.tpHeadBtn:hover{background:var(--surface)}
.tpHeadBtn:active{background:var(--surface-2)} /* TEM que vir DEPOIS do :hover acima: especificidade identica (0,2,0), empate resolve por ORDEM. Uma regra unica cobrindo .tpHeadIc e .tpHeadBtn ficava morta pra um dos dois, porque os :hover deles moram em lugares diferentes do arquivo. */
.tpHeadBtn svg{width:16px;height:16px} /* medido ALTAIR: icone 16 (era 14). Com gap 4 e padding 7, a conta da largura fecha: 16+4+texto+14 = 117,6 contra 118,4 do ClickUp. Os TRES valores juntos — mexer so no padding nao fechava. */
.tpHeadBtn .spSpark{color:var(--roxo-2)}
/* corpo da tarefa */
.tpTipoLinha{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tpTipo{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--borda);color:var(--tinta-2);font-size:13px;height:28px;box-sizing:border-box;padding:0 9px;border-radius:6px} /* medido ALTAIR T-10: 28 de altura e 13px (era 25,2/12); largura ja batia */
.tpTipo:hover{background:var(--surface)}
.tpTipo svg{width:13px;height:13px}
.tpIdMini{font-size:11.5px;color:var(--apagado);cursor:pointer}
.tpBrainSug{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:8px;padding:10px 14px;font-size:12.5px;color:var(--tinta-2);margin:4px 0 18px}
.tpBrainSug .spSpark{color:var(--roxo-2)}

/* ===== TAREFA EM 2 COLUNAS (conteúdo | barra ícones | Activity) — igual ClickUp ===== */
/* `.tpBody` tem REGRA UNICA agora, de proposito (ORION 08/09, achado do ALTAIR): existiam 3
   declaracoes pra `class="tpBody"`, que so aparece UMA vez no HTML (nova.js:5228) -- mesma
   especificidade as tres, a ULTIMA do arquivo sempre vencia em silencio. As outras duas
   (padding:20px 24px 40px / padding:var(--sp-entre-cards) 22px 30px) eram padding MORTO,
   nunca pintaram nada -- apagadas, nao comentadas (regra morta comentada e' o que confundiu
   todo mundo hoje com o `.corpo`). LICAO: em arquivo sem escopo, classe repetida com VALORES
   DIFERENTES nao e' "contextos diferentes" -- e exatamente o sintoma de regra empilhada. */
.tpBody{flex:1;display:flex;min-height:0;padding:0}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.tpColEsq{flex:1;min-width:0;min-height:0;overflow-y:auto;padding:var(--sp-entre-cards) 98px 72px}
/* ALTAIR 30/08: a barra de acoes (Dependencias/Checklist/Anexar) caia nos ULTIMOS 4 PIXELS da janela e o
   clique ia parar no #overlay, que fecha o painel. O elementFromPoint no centro do botao devolvia
   `div#overlay.on` — o painel punha por cima de si mesmo o elemento que o fecha.
   Duas correcoes, e as duas valem independente de qual sub-causa mandava:
     min-height:0  — item flex sem isso nao ENCOLHE, entao a coluna transborda em vez de rolar, e a cauda
                     do conteudo fica fora da area clicavel do painel (o painel tem overflow:hidden).
     padding-bottom 30 -> 72 — maior que a altura da barra, entao mesmo no pior corte o que encosta no
                     rodape e espaco vazio, nao controle. 30 era menor que a peca que ele deveria proteger. */ /* medido ALTAIR: corpo do ClickUp tem margem lateral FIXA ~50,45 + padding 48 = ~98; como a margem e fixa (nao auto), dobro no padding (sem wrapper). Insere todo o conteudo esquerdo, igual ao ClickUp */
.tpBarraIcones{flex:0 0 32px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0;background:transparent} /* medido ALTAIR: sidebar do ClickUp e transparente (herda) e SEM borda esquerda; removida a borda e o tom proprio pra virar bloco unico com a atividade. Orientacao das abas (rail vertical vs horizontal) ainda pendente de medicao */
.tpBi{width:32px;height:32px;border-radius:7px;background:none;border:none;color:var(--apagado);display:inline-flex;align-items:center;justify-content:center}
.tpBi:hover{background:var(--surface);color:var(--tinta)}
/* `.tpBi.ativo` morta apagada daqui (ORION 09/09) -- identica, valor por valor, a que sobrevive
   em ~2157. Nao havia diferenca nenhuma entre as duas, so peso morto. */
.tpBi svg{width:17px;height:17px}
.tpColDir{flex:0 0 559px;min-width:320px;margin-left:11px;display:flex;flex-direction:column;min-height:0;background:transparent}
/* CONJUNTO barra + coluna. A conta antiga dizia "514 + 46 = 560" e a DECOMPOSICAO estava trocada: o 46 e o 514
   nao existem em lugar nenhum — a barra e 32 e a coluna era 528. O total 560 estava certo pelo motivo errado, e
   por isso ele sobreviveu: numero que fecha nao e conferido. Remedido ALTAIR 30/08 nos dois:
     Nova     barra 32 + espaco  0 + coluna 528 = 560
     ClickUp  barra 32 + espaco 11 + coluna 559 = 602
   A barra ja batia. Os 42 de diferenca sao 31 de coluna e 11 de espaco, e e isso que muda aqui.
   Fundo transparente e SEM borda esquerda (ClickUp herda o fundo do pai, border-left 0). */
.tpActHead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;font-size:14px;font-weight:600;color:var(--tinta);border-bottom:1px solid var(--borda)}
.tpActIcs{display:inline-flex;gap:8px;color:var(--apagado)}
.tpActIcs svg{width:15px;height:15px}
.tpActFeed{flex:1;overflow-y:auto;padding:12px 16px}
/* COMPOSITOR. Medido ALTAIR 30/08: o do ClickUp tem MOLDURA (raio 10, borda 1px) e a barra de ferramentas
   mora DENTRO dela, embaixo do campo — e e isso que faz a caixa dele ter 85 contra os 59 daqui. No Nova nao
   havia moldura, entao nao havia onde a barra morar: por isso a moldura vem antes das ferramentas, e nao
   depois. Ao contrario a barra fica solta no rodape da coluna.
   A borda clara dele (rgb(232,232,232)) NAO viaja pro escuro; o que viaja e o papel: separar o campo do
   feed sem pesar. Aqui isso e --borda. */
.tpColDir .tpComBox{margin:12px 14px;padding:0;border:1px solid var(--borda);border-radius:10px;border-top:1px solid var(--borda);display:flex;flex-direction:column;gap:0;align-items:stretch;overflow:hidden}
.tpColDir .tpComBox input{margin:0;padding:10px 12px;border:none;background:transparent;height:auto}
.tpComBarra{display:flex;align-items:center;gap:6px;padding:6px 8px}
.tpComFerr{display:inline-flex;align-items:center;gap:6px;flex:1}
.tpComTipo{height:24px;min-width:96px;padding:0 8px;border-radius:6px;border:1px solid var(--borda);background:transparent;color:var(--tinta-2);font-size:12px;font-weight:500;cursor:pointer} /* M4: 82 -> 96 */
.tpComTipo:hover{background:var(--surface)}
.tpComIc{width:28px;height:28px;border-radius:7px;border:none;background:transparent;color:var(--apagado);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px} /* M5: raio 6 -> 7 (medido nos icones "demais") */
#tpComBarra{border-radius:50%} /* M5: o icone de comandos de barra ("/") e CIRCULO no ClickUp (raio 666 = full), unico entre os 9 */
.tpComEnviarWrap{display:inline-flex;align-items:center;margin-left:auto}
#tpComAgendar{width:18px;height:28px;border:none;background:transparent;color:var(--apagado);display:inline-flex;align-items:center;justify-content:center;cursor:pointer} /* M6: seta de agendar, ao lado do enviar */
.tpComIc:hover{background:var(--surface);color:var(--tinta)}
.tpComIc svg{width:16px;height:16px}
/* ditado em curso: o mesmo vermelho pulsante que a gravacao de clipe/audio ja usa na barra superior.
   O estado tem que ser OBVIO — microfone ligado sem sinal visivel e a pior classe de surpresa. */
.tpComIc.gravando{color:#fff;background:var(--vermelho);animation:pulseGrav 1s infinite}
/* SELO DE TIPO no item do feed. O ClickUp distingue comentario de nota pelo seletor do compositor; aqui o
   dado ja vinha e a tela nao contava. NAO copiei desenho dele porque a nota dele nao foi medida — isto e
   decisao nossa, discreta de proposito: o selo informa e nao compete com o autor. Se a medicao do ClickUp
   vier diferente, troca-se o desenho e o dado continua o mesmo. */
/* acoes de etiqueta dentro do picker: aparecem no hover da linha, como o resto do app. */
.avOp,.ddOp,.docvItem{position:relative}
.docvItem:hover .tagAcoes{display:inline-flex}
.ddOp:hover .tagAcoes{display:inline-flex}
.tagAcoes{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;gap:4px}
.avOp:hover .tagAcoes{display:inline-flex}
.tagAcao{width:22px;height:22px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;color:var(--apagado)}
.tagAcao:hover{background:var(--surface-2);color:var(--tinta)}
.tagAcao.tagDel:hover{color:var(--vermelho)}
.tagAcao svg{width:13px;height:13px}
/* no campo, as acoes moram no ROTULO e nao na linha: a linha inteira ja e o editor de VALOR. */
.tpLbl{position:relative}
.campoAcoes{right:-52px}
.tpCampoEdit:hover .campoAcoes{display:inline-flex}
.tpComSelo{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.07);color:var(--tinta-2);margin-left:6px}
.tpComNota .tpComTexto{border-left:2px solid var(--borda-2);padding-left:8px}
/* L5 (ALTAIR): reacoes + Responder no rodape do card de comentario */
.tpComRodape{display:flex;align-items:center;gap:6px;margin-top:4px}
.tpComReac{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer}
.tpComReac:hover{background:var(--surface-2)}
.tpComResp{margin-left:auto;font-size:12px;color:var(--apagado);cursor:pointer}
.tpComResp:hover{color:var(--tinta);text-decoration:underline}
/* regra morta apagada aqui (ORION 09/09): #tarefaPainel.modo-modal{width:1040px} e
   #tarefaPainel.modo-tela{width:calc(100vw - 100px)} -- ambas standalone, sobrescritas pela
   regra de baixo (2555/2556), sem nenhuma outra propriedade que precisasse sobreviver */

/* ===== EDIÇÃO INLINE nas células da Lista ===== */
.tRow .colResp,.tRow .colData,.tRow .colPrio{cursor:pointer;border-radius:5px}
.tRow .colResp:hover,.tRow .colData:hover,.tRow .colPrio:hover{background:var(--surface-2)}
.ddCel{position:absolute;top:26px;left:0;z-index:40;min-width:180px}
.celData{background:var(--bg);border:1px solid var(--roxo);border-radius:5px;color:var(--tinta);padding:3px 6px;font-size:12px;color-scheme:dark}

/* ===== drag no calendário ===== */
.calEv{cursor:pointer}
/* O-091 item 1 (Wilker/ALTAIR, 14/09): classificado e CONFIRMADO que fica -- o tracejado so' existe
   enquanto uma tarefa esta sendo arrastada por cima (o `.calDrop` so' entra via JS durante dragover,
   sai no drop/dragleave). E' o "solte aqui", resposta a uma acao, nao moldura parada na tela. Mesma
   familia: .calAgendaTodoCel.calDrop/.calAgendaCol.calDrop, .agdCel.calDrop, .agdHoraCel.calDrop,
   .ovCard.ovDragOver -- todos entram/saem por classe JS durante o arrasto, nenhum fica sozinho. */
.calCel.calDrop{background:var(--roxo-suave);outline:2px dashed var(--roxo)}

/* filtro por prioridade ativo */
#ctrlFiltro.ativo{color:var(--roxo-2);background:var(--roxo-suave)}

/* ===== Tabela: células editáveis inline ===== */
/* ALTAIR 30/08 mediu no ClickUp: Name 213, Status 199, Data de vencimento 199, Prioridade 199. Aqui as
   quatro colunas de dado nao tinham largura nenhuma — encolhiam ate o conteudo e sobrava .tabFill com
   1338px. Uma tabela cujo conteudo ocupa uma faixa e o resto e vazio funciona como lista, nao como grade.
   O 214 do .tabNome ja estava medido antes (o dela agora deu 213: um pixel, dentro do arredondamento).
   RESSALVA: ela relatou "uma coluna de conteudo" porque varreu por NOME DE CLASSE e as quatro celulas de
   dado compartilham `.tabCel` — elas existiam. O que nao existia era a largura. */
.tab td.tabCel,.tab th.tabTh:not(.tabNome){width:199px;min-width:199px}
.tab td.tabCel{cursor:pointer;position:relative}
.tab td.tabCel:hover{background:var(--surface-2)}

/* ===== CAIXA DE ENTRADA (inbox) ===== */
/* O-084 (Wilker, 14/09, "Confirmado" ao ver os 2 prints): sai de coluna centralizada
   (max-width:760px;margin:0 auto) pra moldura unica flush, 20px->28px. Motivo dele, com os prints
   na mao: alinhamento com o resto do app + um titulo de tarefa que cortava na coluna estreita
   ("Mitre Exclusive - Daslu Residence 86acf...") aparece inteiro no flush. `.docEdit` NAO mudou
   junto -- ele nao respondeu sobre o editor, escopo fica so' `.inboxWrap`. Classe unica, 7 telas
   (nao 6 -- ver comentario no arquivo de log/mensagem a ALTAIR: achei Lixeira e o agregado de
   Espaco/Pasta "ver todas" que nao estavam no grep dele), todas mudam juntas por serem a MESMA
   regra -- nenhuma fica sobrando centralizada. */
.inboxWrap{padding:28px}
.inboxGrupo{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--apagado);padding:16px 6px 6px;display:flex;gap:8px;align-items:center}
.inboxGrupo .qt{background:var(--surface-2);color:var(--tinta-2);border-radius:999px;padding:0 7px;font-size:10px}
.inboxItem{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--borda);border-radius:var(--r);margin-bottom:8px;cursor:pointer;background:var(--surface)}
.inboxItem:hover{border-color:var(--roxo)}
.inboxDot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.inboxTxt{flex:1;min-width:0}
.inboxNome{font-size:13px;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inboxSub{font-size:11.5px;color:var(--apagado);margin-top:2px}
.inboxStatus{font-size:10.5px;font-weight:600;text-transform:uppercase;color:var(--tinta-2);background:var(--surface-2);padding:3px 9px;border-radius:5px;white-space:nowrap}
.questChk{width:17px;height:17px;border-radius:50%;border:2px solid var(--borda-2);flex:0 0 auto;cursor:pointer}
.questChk.feito{background:var(--verde);border-color:var(--verde)}

/* ===== tarefa: setas nav, favorito, subtarefa concluir ===== */
.tpHeadIc.off{opacity:.28;pointer-events:none}
/* medido ALTAIR T-02: as SETAS de navegar sao 24 no ClickUp (os outros tpHeadIc — Mais/Fav/Modo/Fechar — sao 28 e ja batem, nao mexer) */
#tpNavPrev,#tpNavNext{width:24px;height:24px;border-radius:6px} /* medido ALTAIR: no ClickUp o raio acompanha o TAMANHO — 6px nos botoes de 24, 7px nos de 28 e nos com rotulo. O raio 7 em bloco no .tpHeadIc quebrou justamente estes dois, que ja batiam. */
#tpFav.ativo{color:var(--amarelo)}
.tpSubCheck{cursor:pointer;transition:all .12s}
.tpSubCheck:hover{border-color:var(--verde)}
.tpSubCheck.feito{background:var(--verde);border-color:var(--verde)}

/* ===== MODAL "Mover para" ===== */
#moverModal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;display:none;align-items:flex-start;justify-content:center}
#moverModal.on{display:flex}
.mvBox{margin-top:12vh;width:460px;max-width:92vw;max-height:60vh;background:var(--surface);border:1px solid var(--borda-2);border-radius:var(--r-lg);box-shadow:0 24px 70px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.mvTopo{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--borda)}
.mvTopo input{flex:1;background:var(--bg);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);padding:8px 12px;font-size:13px;outline:none}
.mvTopo button{background:none;border:none;color:var(--apagado);width:28px;height:28px;border-radius:6px}
.mvTopo button:hover{background:var(--surface-2);color:var(--tinta)}
.mvTopo button svg{width:15px;height:15px}
.mvLista{overflow-y:auto;padding:6px}
.mvItem{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:7px;cursor:pointer}
.mvItem:hover{background:var(--surface-2)}
.mvItem.atual{opacity:.5;pointer-events:none}
.mvNome{font-size:13px;color:var(--tinta)}
.mvCaminho{font-size:11px;color:var(--apagado)}

/* ===== Activity funcional (abas/busca/seguir) ===== */
.tpActIc{background:none;border:none;color:var(--apagado);width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;position:relative}
.tpActIc:hover{background:var(--surface-2);color:var(--tinta)}
.tpActIc.ativo{color:var(--roxo-2)}
/* K3 (AREA1, decisao Wilker 30/08): contador do sino — tudo nao visto (atividade+comentarios) desde a ultima visita. Sem numero quando 0. */
.tpSinoBadge{display:none;position:absolute;top:-3px;right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--vermelho,#e03e3e);color:#fff;font-size:10px;line-height:14px;font-weight:600;text-align:center}
.tpSinoBadge.on{display:block}
.tpActIcs{display:inline-flex;gap:2px}
.tpActBuscaBar{display:none;padding:8px 14px;border-bottom:1px solid var(--borda)}
.tpActBuscaBar.on{display:block}
.tpActBuscaBar input{width:100%;background:var(--bg);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);padding:7px 11px;font-size:12.5px;outline:none}
/* o botao que revela o resto do feed: fica ACIMA dos itens porque o feed e cronologico e o que esta
   escondido e o PASSADO — botao embaixo apontaria para a direcao errada. */
/* CALENDARIO PROPRIO do painel de datas. Cores e raios saem dos tokens do app — o do sistema operacional
   nao seguia nenhum deles, e era a unica parte da tela que mudava de aparencia com o navegador.
   HOJE e ESCOLHIDO tem sinais DIFERENTES de proposito: hoje e o anel, escolhido e o preenchimento. No dia
   em que se escolhe hoje os dois aparecem juntos e continuam legiveis como duas informacoes. */
/* acoes do cabecalho de grupo: so no hover da faixa, como no ClickUp. Geometria medida por ela — 24x24,
   raio 6, mesma cor dos dois. Os dois botoes dele nao tem rotulo acessivel; aqui tem title, que e uma
   diferenca a favor e nao vou tirar. */
.grupoAcoes{display:inline-flex;gap:2px;margin-left:6px;opacity:0;transition:opacity .12s}
.grupoHead:hover .grupoAcoes{opacity:1}
.grupoAcao{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:rgb(131,131,131);cursor:pointer;font-size:14px;line-height:1}
.grupoAcao:hover{background:var(--surface-2);color:var(--tinta)}
.grupoAcao svg{width:14px;height:14px}
/* ALTAIR 30/08: os tres botoes do cabecalho de coluna do Quadro sao o MESMO componente do cabecalho de
   grupo da Lista (24x24, raio 6). No Quadro eles ficam colados a direita da faixa. O chevron do recolher
   aponta pra esquerda no ClickUp (cu3-icon-chevronLeft); o ICO.chevron daqui aponta pra baixo, entao giro. */
/* posicao ABSOLUTA de proposito: a .kbTit reserva 111px de padding-right para a barra de acoes do card
   de TOPO, que flutua pra dentro desta faixa. Com margin-left:auto os botoes parariam no fim do content
   box (dx 153) em vez do fim da faixa. Absoluto os ancora na borda real. Conta: 264 - 8 - (3 x 24) = 184,
   que e exatamente o dx medido do primeiro botao; e o ultimo fecha em 256, 8 da borda. gap ZERO porque
   os dx medidos sao 184/208/232 — 24 de distancia, a propria largura do botao, sem folga entre eles. */
.kbTit{position:relative}
.kbAcoes{position:absolute;right:8px;top:50%;transform:translateY(-50%);gap:0;margin:0}
.kbTit:hover .kbAcoes{opacity:1} /* B5 (AREA3): .grupoAcoes{opacity:0} so ganhava opacity:1 via .grupoHead:hover — a coluna do Quadro usa .kbTit, nunca herdava o hover, ficava sempre invisivel (nao so "sem hover", INVISIVEL) */
.kbRecolher svg{transform:rotate(90deg)}
/* ALTAIR 30/08: recolher no ClickUp nao so esconde os cards — a coluna vai de 264 para 32 de largura.
   Esconder sem encolher nao devolve espaco nenhum, que e a razao de existir do recolher. Faixa medida:
   cabecalho 32x112, padding 8, dentro um elemento 20x62 com o rotulo do status e um icone 16x16 em dy 12.
   O texto NAO e girado: transform none, writing-mode horizontal-tb. Reproduzo o MECANISMO medido — caixa
   de 20 de largura e quebra natural —, nao a inferencia de letra por linha, que ela marcou como palpite. */
.kbCol.recolhida{flex:0 0 32px;max-width:32px}
.kbCol.recolhida .kbCards{display:none}
.kbCol.recolhida .kbTit{height:112px;padding:8px;flex-direction:column;align-items:center;gap:4px;position:static}
.kbCol.recolhida .grupoPill{flex-direction:column;align-items:center;gap:4px;padding:0;background:none!important;width:20px;overflow:visible}
.kbCol.recolhida .grupoPillIco{margin:0}
/* B1 (ALTAIR verificacao 1): 16x16 media no cabecalho do Quadro; alvo e 14x14 aberto / 13x13 fechado —
   MENOR no Quadro, o 16 fica so pra pilula da Lista (ja fechada na AREA2, nao mexer nela). */
.kbTit .grupoPillIco{width:14px;height:14px}
.kbTit .grupoPillIco.cheio{width:13px;height:13px}
.kbTit .grupoPillIco.cheio::after{left:2.5px;top:-.5px;width:3.5px;height:7px}
.kbCol.recolhida .grupoPillTxt{width:20px;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:12px;text-overflow:clip}
.kbCol.recolhida .kbCont,.kbCol.recolhida .kbAcoes{display:none}
.kbCol.recolhida .kbTit{cursor:pointer} /* a faixa inteira reexpande: com os botoes escondidos, sem isso nao havia volta */
.ddCalBox{padding:8px 4px 4px}
.ddCalTopo{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ddCalMes{font-size:12px;font-weight:600;color:var(--tinta);text-transform:capitalize}
.ddCalNav{width:22px;height:22px;border:none;background:none;color:var(--apagado);border-radius:6px;cursor:pointer;font-size:15px;line-height:1}
.ddCalHoje{width:42px;height:24px;border:1px solid var(--borda);background:none;color:var(--tinta-2);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500} /* B06: 42x24 12/500, medido ALTAIR */
.ddCalHoje:hover{background:var(--surface-2);color:var(--tinta)}
.ddCalNav:hover{background:var(--surface-2);color:var(--tinta)}
.ddCalSem{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.ddCalSem span{text-align:center;font-size:10px;color:var(--apagado)}
.ddCalGrade{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ddCalDia{height:26px;border:none;background:none;color:var(--tinta-2);border-radius:6px;cursor:pointer;font-size:12px;font-family:inherit}
.ddCalDia:hover{background:var(--surface-2);color:var(--tinta)}
.ddCalDia.hoje{box-shadow:inset 0 0 0 1px var(--roxo);color:var(--tinta)}
.ddCalDia.sel{background:var(--roxo);color:#fff;font-weight:600}
.ddCalVazio{height:26px}
.ddCalRodape{display:flex;justify-content:flex-end;padding-top:6px}
.ddCalHoje{background:none;border:none;color:var(--roxo-2);font-size:12px;cursor:pointer;font-family:inherit}
.ddDataBtn{background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta);border-radius:6px;padding:3px 8px;font-size:12px;cursor:pointer;font-family:inherit}
/* AREA4 (ALTAIR): hora opcional na data — paridade que faltava no painel de tarefa */
.ddDataHora{background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta);border-radius:6px;padding:2px 6px;font-size:12px;font-family:inherit;width:88px;color-scheme:dark}
.ddDataBtn.ativo{border-color:var(--roxo);color:var(--tinta)}
.tpFeedMais{width:100%;background:none;border:none;border-bottom:1px solid var(--borda);color:var(--tinta-2);font-size:12px;padding:6px 0 10px;margin-bottom:10px;cursor:pointer;text-align:left}
.tpFeedMais:hover{color:var(--tinta)}
.tpEvento{font-size:13px;line-height:16px;color:var(--apagado);padding:8px 4px;border-bottom:1px solid var(--borda)} /* medido ALTAIR 30/08 no stream do ClickUp: item de 32 de altura, fonte 13. Aqui era 12 e a linha saia com 33. A altura vem do line-height 16 + 8 de padding em cima e embaixo — declarada pela SOMA e nao por um height, senao ela desencontra da fonte na primeira vez que alguem mexer no tamanho do texto. */
.tpEvento .tpEvAutor{color:var(--tinta-2);font-weight:600}
.tpEvento .quando{margin-left:6px}
.tpBi.ativo{background:var(--roxo-suave);color:var(--roxo-2)} /* regra unica agora, ver comentario da morta em ~1948 */

/* ===== Lista: seleção múltipla + controles no hover ===== */
/* V2-01: a casa do checkbox e RESERVADA sempre (16px, igual ClickUp) e so a opacidade muda no hover — sem isso a linha inteira pulava 22px a cada passada de mouse */
.tSelBox{width:22px;align-self:stretch;margin-right:2px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;opacity:0;transition:opacity .12s} /* medido ALTAIR: checkbox 22; grip+checkbox = bloco toggle 48 do ClickUp */
.tRow:hover .tSelBox,.tRow:focus-visible .tSelBox,.tRow:has(:focus-visible) .tSelBox,.tRow.sel .tSelBox{opacity:1}
.tSelChk{width:15px;height:15px;accent-color:var(--roxo);cursor:pointer}
.tRow.sel{background:var(--roxo-suave)}
.tHoverAcoes{visibility:hidden;display:inline-flex;align-items:center;gap:4px;margin-left:4px} /* visibility, NAO display: com display:none as acoes entravam no hover e EMPURRAVAM o conteudo — o .tNome encolhia de 463,5 pra 373,5 e a etiqueta saltava 90px, so por passar o mouse. Um nome que cabia inteiro truncava sozinho. O ClickUp RESERVA o espaco (as acoes dele aparecem dentro dos 985,2 do __main, com todos os dx identicos em repouso e em hover). visibility esconde e mantem a caixa. */
.tRow:hover .tHoverAcoes,.tRow:focus-visible .tHoverAcoes,.tRow:has(:focus-visible) .tHoverAcoes{visibility:visible}
.tHa{width:24px;height:24px;border-radius:6px;color:var(--apagado);background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tHa:hover{background:var(--surface);color:var(--tinta)}
.tHa svg{width:14px;height:14px}
/* alca de arrastar: so no hover, no inicio da colNome (medido: 1o elemento da esquerda) */
.tGrip{width:24px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;color:var(--apagado);cursor:grab;opacity:0;transition:opacity .12s;flex:0 0 auto} /* medido ALTAIR: grip 24; com checkbox 22 = bloco toggle 48 */
.tRow:hover .tGrip,.tRow:focus-visible .tGrip,.tRow:has(:focus-visible) .tGrip{opacity:1}
.tGrip svg{width:14px;height:14px}
/* caret expansor: SEMPRE visivel quando ha subtarefa (medido: nao e hover), entre checkbox e status */
.tCaret{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:rgb(131,131,131);cursor:pointer;flex:0 0 auto;transition:transform .12s}
.tCaret:hover{background:var(--surface-2)}
/* O-022 (ORION 08/09), item 20: o caret virou focavel por teclado (tabindex+role no nova.js) --
   precisa de anel de foco proprio, senao fica alcancavel mas invisivel pra quem navega sem
   mouse. Mesmo token de foco ja usado no resto do app (--roxo-2). */
.tCaret:focus-visible{outline:2px solid var(--roxo-2);outline-offset:1px}
.tCaret.aberto{transform:rotate(90deg)}
.tCaret.semSub{opacity:0;pointer-events:none} /* reserva a faixa mesmo sem subtarefa: nome no mesmo x em todas as linhas */
.tCaret svg{width:14px;height:14px}
/* cluster de meta a direita do nome: sempre visivel, condicional ao dado */
.tMeta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding-left:8px}
.tMetaSub{display:inline-flex;align-items:center;gap:3px;color:rgb(131,131,131);font-size:12px}
.tMetaIco{display:inline-flex;align-items:center;color:rgb(120,120,127)}
.tMetaSub svg,.tMetaIco svg{width:14px;height:14px}
.tMetaN{line-height:1;font-size:11px}
/* ⋯ no FIM da linha (colAdd), so no hover */
.tRow .colAdd{display:flex;align-items:center;justify-content:flex-end}
.tHaMenu{width:24px;height:24px;border-radius:6px;display:none;align-items:center;justify-content:center;color:var(--apagado);cursor:pointer;font-weight:700;letter-spacing:1px}
.tRow:hover .tHaMenu,.tRow:focus-visible .tHaMenu,.tRow:has(:focus-visible) .tHaMenu{display:inline-flex}
.tHaMenu:hover{background:var(--surface-2);color:var(--tinta)}
/* PILULA flutuante (medido): centralizada na area de conteudo, radius 12, rgb(32,32,32), sombra pra
   baixo. Nao doca na borda. O padding no #main (sel-ativa) reserva espaco pra nao cobrir a ultima linha. */
#direita{position:relative}
/* G2 (AREA2, ALTAIR verificacao 2): medido 1071x40 — o Nova tinha 1187x48. Altura vinha do padding
   vertical (8px) somado aos 32px do botao (48 total); 4px fecha os 40. */
/* G2 (AREA2, ALTAIR verificacao 3): 1295 contra 1071 medido — a barra esticava pro container em vez de
   encolher pro conteudo. width:fit-content forca o shrink-to-fit mesmo se algo mais acima empurrar largura. */
#barraSel{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:fit-content;max-width:calc(100% - 48px);display:flex;align-items:center;gap:4px;background:rgb(32,32,32);border-radius:12px;padding:4px 10px;z-index:70;box-shadow:0 10px 15px -3px rgba(0,0,0,.106)}
#direita.sel-ativa #main{padding-bottom:80px}
/* contador = BOTAO inteiro que desseleciona (medido: clicar em qualquer ponto dos 171px desfaz).
   Contorno neutro, sem fundo roxo (o roxo era invencao nossa). Texto 14/500 branco, "1 Tarefa selecionada". */
/* G2 (AREA2, ALTAIR verificacao 4): contador fora da #barraSel — pilula propria, centralizada, colada
   logo ACIMA da barra de acoes (posicao exata nao medida: acabamento, nao bloqueio). */
#barraSelCont{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 12px;font-size:14px;font-weight:500;color:#fff;background:rgb(32,32,32);border:1px solid rgba(255,255,255,.13);border-radius:8px;cursor:pointer;white-space:nowrap;z-index:70;box-shadow:0 10px 15px -3px rgba(0,0,0,.106)}
#barraSelCont:hover{background:rgba(50,50,50,1)}
.bsContX{display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6)}
.bsContX svg{width:14px;height:14px}
/* acao com rotulo: fundo TRANSPARENTE (o proprio fundo fragmentava a barra em caixinhas), 32px, 14/500 */
/* G3 (AREA2, ALTAIR verificacao 2): medicao nova, mais precisa, contradiz a nota antiga desta linha —
   os 7 botoes batiam 2px LARGOS demais (Status 81 contra 79, etc.) e essa mesma diferenca de 2px
   (1px por lado) fecha exatamente com 10px de padding em vez de 11. Cópia é 100%: a medida nova vale,
   a nota antiga ("corte nao se copia") era raciocinio meu, nao ordem do Wilker — nao pesa contra medicao fresca. */
.bsBtn{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;background:transparent;border:none;color:rgba(255,255,255,.663);font-size:14px;font-weight:500;border-radius:8px;cursor:pointer;white-space:nowrap}
.bsBtn:hover{background:rgba(255,255,255,.08);color:#fff}
.bsBtn svg{width:16px;height:16px}
/* Duplicar/Excluir/Mais = icones 32x32 sem rotulo, no fim. Lixeira em vermelho. */
.bsIcone{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;color:rgba(255,255,255,.663);border-radius:8px;cursor:pointer;font-weight:700}
.bsIcone:hover{background:rgba(255,255,255,.08);color:#fff}
.bsIcone svg{width:16px;height:16px}
.bsIcone.bsLixeira{color:var(--vermelho)} /* paleta do app (mesma do botao destrutivo do modal): coerencia interna, nao o hex do ClickUp */
.bsIcone.bsLixeira:hover{background:color-mix(in srgb,var(--vermelho) 14%,transparent);color:var(--vermelho)}
/* picker de data flutuante (Datas em massa) e o ✓ do picker de etiqueta */
.flutData{padding:6px;display:flex;flex-direction:column;gap:6px}
.flutDataLimpar{background:none;border:none;color:var(--apagado);font-size:12.5px;text-align:left;padding:6px 8px;border-radius:6px;cursor:pointer}
.flutDataLimpar:hover{background:var(--surface);color:var(--tinta)}
/* menu MAIS da barra de selecao: busca + 2 grupos rotulados em 2 colunas (medido no ClickUp) */
.maisMenu{width:340px;max-width:340px;padding:8px}
.maisBusca{padding:0 2px 8px}
.maisBuscaInput{width:100%;background:var(--bg);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);padding:7px 10px;font-size:13px;outline:none}
.maisBuscaInput:focus{border-color:var(--roxo)}
.maisGrupoTit{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--apagado);padding:8px 6px 4px}
.maisGrid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.maisItem{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--tinta);font-size:13px;padding:8px;border-radius:6px;cursor:pointer;text-align:left;min-width:0}
.maisItem:hover{background:var(--surface)}
.maisIco{display:inline-flex;align-items:center;color:var(--apagado);flex:0 0 auto}
.maisIco svg{width:15px;height:15px}
.maisTxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flutDataInput{background:var(--surface);border:1px solid var(--borda);color:var(--tinta);border-radius:6px;padding:6px 8px;font-size:13px;outline:none;color-scheme:dark}
.avCheck{color:var(--roxo-2);font-weight:700;margin-left:6px}
/* menu de acoes RICO (forma do ClickUp): 3 botoes no topo, grupos separados, itens 28px, rodape 40px */
.menuRico{width:261px;min-width:261px;padding:0;overflow-y:auto} /* auto, nao hidden: menu alto rola e a ultima secao fica alcancavel */
.mrBotoes{display:flex;padding:6px;gap:0}
.mrBtn{flex:1;background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta-2);font-size:13px;padding:7px 6px;cursor:pointer}
.mrBtn:first-child{border-radius:6px 0 0 6px}
.mrBtn:last-child{border-radius:0 6px 6px 0}
.mrBtn:not(:first-child){border-left:none}
.mrBtn:hover{background:var(--surface);color:var(--tinta)}
.mrSep{height:1px;background:var(--borda);margin:4px 0}
.mrItens{padding:2px 0}
.mrItem{display:flex;align-items:center;gap:8px;padding:0 12px;height:28px;font-size:14px;color:var(--tinta);cursor:pointer}
.mrItem:hover{background:var(--surface)}
.mrIco{display:inline-flex;align-items:center;color:var(--apagado);flex:0 0 auto}
.mrIco svg{width:16px;height:16px}
.mrTxt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrChv{display:inline-flex;color:var(--apagado)}
.mrChv svg{width:13px;height:13px}
.mrItem.mrPerigo,.mrItem.mrPerigo .mrIco{color:var(--vermelho)}
.mrRodape{display:flex;align-items:center;gap:8px;width:100%;padding:0 12px;height:40px;background:none;border:none;color:var(--tinta-2);font-size:13px;cursor:pointer;text-align:left}
.mrRodape:hover{background:var(--surface)}

/* ===== Gantt: barra arrastável ===== */
.cgBarra{cursor:grab}
.cgBarra.arrastando{cursor:grabbing;opacity:.85;box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* ===== Calendário: seletor Mês/Semana + vista Semana ===== */
.calSel{margin-left:auto;display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--borda);border-radius:7px;padding:2px}
.calSelBtn{background:none;border:none;color:var(--apagado);font-size:12px;padding:5px 12px;border-radius:5px}
.calSelBtn.ativo{background:var(--roxo);color:#fff}
.calSelBtn:hover:not(.ativo){background:var(--surface-2);color:var(--tinta)}
/* I1/I2/I4 (AREA4, pacote grande, 31/08): Dia/4dias/Semana virou AGENDA por hora — cabecalho fixo +
   faixa "O dia todo" fixa + grade de 24h que rola, gutter de horas e colunas dos dias rolando JUNTOS
   (irmaos dentro do MESMO container com overflow — garante sincronia sem JS de scroll espelhado). */
.calAgenda{display:flex;flex-direction:column;border:1px solid var(--borda);border-radius:var(--r);overflow:hidden;height:calc(100vh - 260px);background:var(--bg)}
.calAgendaGutterCel{flex:0 0 70px} /* I8 (revisao geral, 31/08): 60px quebrava "O dia todo" em 2 linhas — medido 70px no ClickUp */
.calAgendaHead{display:flex;border-bottom:1px solid var(--borda)}
.calAgendaHead .calSemCab{flex:1;min-width:0}
.calSemCab{padding:8px 10px;font-size:11.5px;color:var(--apagado);text-align:center}
.calSemCab b{color:var(--tinta);font-size:14px;display:block;margin-top:2px}
.calSemCab.hoje b{color:var(--roxo-2)} /* today: destaca so o numero (mesma regra do mes) */
/* I2: faixa "O dia todo", acima da grade de horas — onde entra evento SEM hora especifica (medido) */
.calAgendaTodo{display:flex;min-height:31px;border-bottom:1px solid var(--borda);background:var(--surface)}
.calAgendaTodoLbl{display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:var(--tinta-2);white-space:nowrap}
.calAgendaTodoCel{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 6px;position:relative}
.calAgendaTodoCel .calEv{padding:2px 6px;border-radius:2px;font-size:11.5px;cursor:pointer}
.calAgendaTodoCel .calAdd{position:absolute;right:4px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}
.calAgendaTodoCel:hover .calAdd{opacity:1;pointer-events:auto}
/* I1: grade de horas — 24 faixas de 60px (medido: passo consistente entre rotulos consecutivos) */
.calAgendaScroll{flex:1;display:flex;overflow-y:auto;min-height:0}
.calAgendaGutter{flex:0 0 70px} /* I8: mesma largura do gutter do cabecalho, tem que casar (70px) */
.calAgendaHoraLbl{display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 8px 0 0;font-size:11px;color:var(--apagado);border-top:1px solid var(--borda);box-sizing:border-box;white-space:nowrap}
.calAgendaHoraLbl:first-child{border-top:none}
.calAgendaDias{flex:1;display:grid;grid-template-columns:repeat(var(--calAgendaCols,7),1fr)}
.calAgendaCol{position:relative;border-left:1px solid var(--borda);background-image:repeating-linear-gradient(to bottom,var(--borda) 0,var(--borda) 1px,transparent 1px,transparent 60px)}
.calAgendaCol:first-child{border-left:none}
.calAgendaEv{position:absolute;left:2px;right:2px;border-radius:2px;padding:2px 6px;font-size:11px;overflow:hidden;cursor:pointer;box-sizing:border-box}
/* O-091 item 1: fica -- mesma familia/motivo de .calCel.calDrop acima (so' existe durante o arrasto). */
.calAgendaTodoCel.calDrop,.calAgendaCol.calDrop{outline:2px dashed var(--roxo);outline-offset:-2px}
/* I5 (AREA4, reabertura 31/08): botao "+" no hover TAMBEM em Dia/4 dias/Semana — reusa .calAdd (mesmo
   componente do Mes, mesmo cuCriarTarefa por baixo), so muda de absoluto-na-celula pra fluxo normal no
   fim da coluna (aqui nao ha grade fixa igual ao Mes pra ancorar num canto medido) */
.calSemCol .calAdd{position:static;align-self:flex-end;opacity:0;pointer-events:none}
.calSemCol:hover .calAdd{opacity:1;pointer-events:auto}

/* abas do Meu trabalho clicáveis */
.homeAba{cursor:pointer}

/* ===== menu "..." do espaço na sidebar ===== */
/* O-065 (13/09): era overflow:hidden+ellipsis -- nome comprido de espaco cortava em silencio,
   lei do Wilker de 05/09 (texto espremido/cortado = falha grave, sem excecao). Quebra em 2
   linhas agora (a linha da .espacoTit virou min-height junto, ver acima); nome curto (a
   maioria) nao muda em nada visualmente. */
.espacoTit .espNome{flex:1;overflow-wrap:break-word;white-space:normal}
.espMais{opacity:0;color:var(--apagado);font-size:15px;padding:0 4px;cursor:pointer}
.espacoTit:hover .espMais{opacity:1}
.espMais:hover{color:var(--tinta)}

/* ===== menu "..." da lista na sidebar ===== */
/* O-069 (13/09), ALTAIR mediu por dentro: o `⋯` era opacity:0 em repouso mas continuava
   RESERVANDO 21px em flex:0 0 auto -- botao invisivel comendo espaco do nome, e' a MESMA causa
   que ja tinha sido resolvida pro `.espMais`/`.add` do espaco (linha ~4813, "saem do fluxo, nome
   vale a linha inteira, aparecem POR CIMA no hover") mas nunca replicada aqui pra lista/pasta --
   exatamente o erro que a ALTAIR nomeou: explicacao que fecha o caso != causa esgotada. Mesmo
   tratamento agora: fora do fluxo, `right` fixo, nome ganha calha so' no :hover. */
.lista{position:relative}
.lista .listaMais{position:absolute;top:50%;right:10px;transform:translateY(-50%);opacity:0;color:var(--apagado);font-size:15px;padding:0 4px;cursor:pointer;margin-left:0}
.lista:hover .listaMais{opacity:1}
.lista:hover .listaNome{padding-right:26px}
.lista .listaMais:hover{color:var(--tinta)}
.avMenu .avOp.perigo{color:var(--vermelho)}
.avMenu .avOp.perigo:hover{background:rgba(229,72,77,.12)}

/* menu "..." da pasta */
/* O-065 (13/09): mesmo fix do .espNome acima, mesmo motivo (achado real: "Cobranças em Abe..."
   cortado na lateral do Financeiro) -- nome comprido quebra, nunca corta. */
.pastaTit .pastaNome{flex:1;overflow-wrap:break-word;white-space:normal}
/* O-069 (13/09): mesmo fix do .listaMais acima -- fora do fluxo, nunca reserva espaco em repouso. */
.pastaTit{position:relative}
.pastaTit .pastaMais{position:absolute;top:50%;right:10px;transform:translateY(-50%);opacity:0;margin-left:0}
.pastaTit:hover .pastaMais{opacity:1}
.pastaTit:hover .pastaNome{padding-right:26px}

/* ===== DOCUMENTOS (tela nova) ===== */
.docvHead{margin-bottom:20px}
.docvSub{font-size:13px;color:var(--apagado);margin-top:6px;line-height:1.45}
/* O-012 (ORION 07/09): margin-bottom:22px removida -- o gap do container pai .clienteSecoes
   ja cobre o espaco entre secoes, a margem duplicava a folga. */
.docvDestaque{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--roxo-suave),transparent);border:1px solid var(--borda-2);border-radius:var(--r-lg);padding:var(--card-pad);cursor:pointer;transition:border-color .15s}
/* O-036 (ORION 12/09), Wilker: "olha como ta isso, esta colado porra" -- achado na visao geral do
   departamento (`#ovWrap`: faixa + `.ovGrid` colados, 0px de vao contra os 16px de gap ENTRE os
   cards da propria grade -- a tela ensinava o olho a esperar 16 e entregava 0 na transicao mais
   importante). CONFIRMEI O PAPEL antes de mexer (regra do proprio comentario acima): `.docvDestaque`
   e' um bloco INDEPENDENTE da grade que vem depois, nao uma celula dela -- entao o token certo e'
   `--sp-entre-cards` (irmaos independentes), nao o gap interno da grade. NAO toquei na regra BASE
   (ela existe sem margin de proposito, ver comentario acima -- remover a margin ali evitou dobrar
   com o gap:24px do `.clienteSecoes`). Escopado só' nos tres lugares onde `.docvDestaque` e' filho
   DIRETO de um container SEM gap proprio (bloco puro, sem flex/grid) -- os unicos onde a colagem
   literal acontece. Varredura completa dos 4 lugares que usam `.docvDestaque` no app:
     1. `#ovWrap` (visao geral do departamento, `.ovGrid` logo depois) -- SEM gap -- FIX aqui.
     2. `.recWrap` (tela Documentos, `.recGrid` logo depois) -- SEM gap -- FIX aqui.
     3. `#main` direto (telaFinanceiro, `.finGraficoWrap` logo depois) -- SEM gap -- FIX aqui.
     4. `.clienteSecoes` (home de departamento/sub, `blocoGridSubs` logo depois) -- gap:24px JA
        cobre, e' o caso que gerou a regra da linha acima -- INTOCADO de proposito. */
.ovWrap>.docvDestaque,.recWrap>.docvDestaque,#main>.docvDestaque{margin-bottom:var(--sp-entre-cards)}
/* O-058 (13/09, ALTAIR): `.finDetalheBase` (Movimento+Despesas do Financeiro) e' um bloco
   INDEPENDENTE anexado no FIM de `#ovWrap`, depois da grade padrao (`.ovGrid`, sem margin proprio
   por ser generica pra todo departamento) -- mesma familia de excecao da regra acima: irmao
   direto sem gap proprio entre eles, token `--sp-entre-cards`, nao numero solto. */
.ovWrap>.finDetalheBase{margin-top:var(--sp-entre-cards)}
/* O-069 (13/09) achou o padding em dobro do Financeiro dentro de `#ovWrap` e consertou aqui,
   escopado por contexto (`#ovWrap .cliCards{padding-left:0}`). CERTO no metodo, ESTREITO no
   alcance: a mesma dobra voltou horas depois na ficha do parceiro (fora de `#ovWrap`), porque a
   causa continuava viva na BASE. O-080 (14/09) moveu o conserto pra base (`.cliCards`/
   `.finGraficoWrap`/`.finMovDespWrap` nao levam mais padding horizontal nenhum, ver linha ~910) --
   esta regra escopada morreu, virou 0-menos-0. Fica so' o registro de onde a licao nasceu. */
.docvDestaque:hover{border-color:var(--roxo)}
.docvDestIc{display:inline-flex;width:42px;height:42px;border-radius:10px;background:var(--roxo);color:#fff;align-items:center;justify-content:center;flex:0 0 42px}
.docvDestIc svg{width:21px;height:21px}
.docvDestTxt{flex:1;min-width:0}
.docvDestNome{font-size:15px;font-weight:600}
.docvDestDesc{font-size:12.5px;color:var(--tinta-2);margin-top:3px;line-height:1.45}
.docvDestTag{font-size:11px;color:var(--roxo-2);background:var(--roxo-suave);padding:4px 10px;border-radius:999px;white-space:nowrap;font-weight:600}

/* ===== FORMULARIO (tela nova) ===== */
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.formInfo{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--borda);border-left:3px solid var(--roxo);border-radius:var(--r-lg);padding:var(--sp-entre-cards) 20px;margin-bottom:26px;max-width:760px}
.formInfoIc{display:inline-flex;flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:var(--roxo-suave);color:var(--roxo-2);align-items:center;justify-content:center}
.formInfoIc svg{width:20px;height:20px}
.formInfoTxt b{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
.formInfoTxt p{font-size:12.5px;color:var(--tinta-2);line-height:1.55;margin:0}
.formSecTit{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--apagado);margin-bottom:12px}

/* ===== METAS & OKRs (tela nova) ===== */
.mtProg{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:16px}
.mtProgTopo{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.mtProgTit{font-size:12.5px;font-weight:600;color:var(--tinta)}
.mtProgPct{font-size:24px;font-weight:700;color:var(--verde);line-height:1}
.mtProgBar{height:12px;background:var(--surface-2);border-radius:7px;overflow:hidden}
.mtProgBar>span{display:block;height:100%;background:linear-gradient(90deg,var(--verde),#37e07d);border-radius:7px;transition:width .3s}
.mtProgLeg{font-size:11.5px;color:var(--apagado);margin-top:9px}
.mtAtalhoTxt{font-size:12px;color:var(--tinta-2);line-height:1.5;margin-bottom:12px}
.mtAtalhoBtn{width:100%;justify-content:center}

/* ===== CONFIG · Notificacoes (toggles) ===== */
.cfgToggle{display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--borda)}
.cfgToggle:last-child{border-bottom:none}
.cfgToggleTexto{flex:1;min-width:0}
.cfgToggleNome{font-size:13.5px;color:var(--tinta);font-weight:500}
.cfgToggleDesc{font-size:12px;color:var(--apagado);margin-top:3px;line-height:1.45}
.switchNota{position:relative;flex:0 0 auto;width:40px;height:22px;cursor:pointer}
.switchNota input{position:absolute;opacity:0;width:0;height:0}
.switchPino{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--borda);border-radius:999px;transition:background .18s,border-color .18s}
.switchPino::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--apagado);transition:transform .18s,background .18s}
.switchNota input:checked+.switchPino{background:var(--roxo);border-color:var(--roxo)}
.switchNota input:checked+.switchPino::before{transform:translateX(18px);background:#fff}
.switchNota input:focus-visible+.switchPino{box-shadow:0 0 0 2px var(--roxo-suave)}

/* ===== CONFIG · PREFERENCIAS (selects) ===== */
.cfgCampo select{width:100%;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta);padding:10px 34px 10px 12px;font-size:13px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
.cfgCampo select:focus{border-color:var(--roxo)}
.cfgCampo select option{background:var(--surface-2);color:var(--tinta)}
.cfgCampoAjuda{font-size:11.5px;color:var(--apagado);margin-top:6px;line-height:1.45}

/* ===== PAINEIS PLUS · Concluidas vs Abertas ===== */
.pnProp{display:flex;flex-direction:column;gap:12px}
.pnPropBar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--surface-2)}
.pnPropSeg{display:block;height:100%}
.pnPropLegs{display:flex;gap:18px;flex-wrap:wrap}
.pnPropLeg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tinta-2)}
.pnPropLeg i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.pnPropLeg b{color:var(--tinta);font-weight:600}
.pnPropPct{font-size:11.5px;color:var(--apagado)}

/* ===== CONFIG · DEPARTAMENTOS (O-096, 14/09) ===== */
/* mesmo tamanho/raio do swatch de legenda que ja existe (.pnPropLeg i, 10x10 raio 3) -- cor por
   inline style, so' o formato do quadradinho e' compartilhado. */
.depAdminCor{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}
/* achado testando: .smCor (o seletor de cor que ja existia, copiado do Status da lista) nasce
   26x26 quadrado, mas `.cnLinha input{width:100%}` (regra do proprio formulario, mais especifica
   que so' `.smCor` sozinho) esticava ele pra ocupar a linha inteira -- os dois desenhos nunca
   tinham sido combinados antes. `.cnLinha .smCor` (2 classes) vence `.cnLinha input` (1 classe +
   elemento) na especificidade, devolve o quadrado sem mexer em nenhum dos dois desenhos originais. */
.cnLinha .smCor{width:26px;flex:0 0 auto}

/* ===== CONFIG · CENTRAL DE MODELOS ===== */
.cfgModelos{max-width:860px}
.modAviso{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:20px}
.modAvisoIc{color:var(--roxo-2);flex:0 0 auto;display:inline-flex;margin-top:1px}
.modAvisoIc svg{width:18px;height:18px}
.modAvisoTxt b{font-size:13px;font-weight:600;color:var(--tinta)}
.modAvisoTxt p{font-size:12.5px;color:var(--tinta-2);line-height:1.5;margin-top:4px}
.modGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.modCard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:16px}
.modCardTopo{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modIc{color:var(--roxo-2);display:inline-flex}
.modIc svg{width:18px;height:18px}
.modTipo{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--apagado);background:var(--surface-2);padding:3px 8px;border-radius:999px}
.modNome{font-size:14px;font-weight:600;color:var(--tinta);margin-bottom:5px}
.modDesc{font-size:12.5px;color:var(--tinta-2);line-height:1.5;margin-bottom:14px;flex:1}
.modUsar{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta);font-size:12.5px;padding:7px 14px;border-radius:var(--r);cursor:pointer;transition:filter .15s,border-color .15s}
.modUsar svg{width:14px;height:14px}
.modUsar:hover{border-color:var(--roxo);filter:brightness(1.1)}

/* ===== CHAT / CANAIS (conversa com o Fenrir) ===== */
.chatNova{display:flex;height:100%;overflow:hidden}
.chatCanais{flex:0 0 240px;display:flex;flex-direction:column;border-right:1px solid var(--borda);background:var(--surface)}
.chatCanaisTopo{padding:14px 16px 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--apagado);font-weight:600}
.chatCanaisLista{flex:1;overflow-y:auto;padding:0 8px}
.chatCanalItem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--tinta-2);font-size:13px}
.chatCanalItem:hover{background:var(--surface-2)}
.chatCanalItem.ativo{background:var(--roxo-suave);color:var(--tinta)}
.chatCanalHash{color:var(--apagado);display:inline-flex;flex:0 0 auto}
.chatCanalHash svg{width:15px;height:15px}
.chatCanalNome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatCanaisNota{padding:12px 16px;font-size:11px;color:var(--apagado);line-height:1.5;border-top:1px solid var(--borda)}
.chatConversa{flex:1;display:flex;flex-direction:column;min-width:0}
.chatVazio{margin:auto;color:var(--apagado);font-size:13px}
.chatConvWrap{display:flex;flex-direction:column;height:100%}
.chatConvHead{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--borda)}
.chatConvHash{color:var(--apagado);display:inline-flex}
.chatConvHash svg{width:17px;height:17px}
.chatConvTit{font-size:15px;font-weight:600;color:var(--tinta)}
.chatConvTag{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--roxo-2);background:var(--roxo-suave);padding:4px 10px;border-radius:999px}
.chatConvTag svg{width:13px;height:13px}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.chatMsgs{flex:1;overflow-y:auto;padding:var(--sp-entre-cards) 20px;display:flex;flex-direction:column;gap:10px}
.chatBoas{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:14px 16px}
.chatBoasIc{color:var(--roxo-2);flex:0 0 auto;display:inline-flex;margin-top:1px}
.chatBoasIc svg{width:18px;height:18px}
.chatBoas b{font-size:13px;color:var(--tinta)}
.chatBoasSub{font-size:12.5px;color:var(--tinta-2);line-height:1.5}
.chatMsg{max-width:76%;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.chatMsg.eu{align-self:flex-end;background:var(--roxo);color:#fff;border-bottom-right-radius:4px}
.chatMsg.fenrir{align-self:flex-start;background:var(--surface-2);color:var(--tinta);border-bottom-left-radius:4px}
.chatBox{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--borda)}
.chatBox input{flex:1;background:var(--surface);border:1px solid var(--borda);border-radius:999px;color:var(--tinta);padding:10px 16px;font-size:13px;outline:none}
.chatBox input:focus{border-color:var(--roxo)}
.chatBox input::placeholder{color:var(--apagado)}
.chatEnviar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--roxo);border:none;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .15s}
.chatEnviar svg{width:18px;height:18px}
.chatEnviar:hover{filter:brightness(1.12)}

/* ===== CONFIG · API DA CLICKUP ===== */
.cfgApi{max-width:640px}
.cfgApiIntro{font-size:13px;color:var(--tinta-2);line-height:1.6;margin-bottom:22px}
.cfgApiTokenRow{display:flex;align-items:center;gap:8px}
.cfgApiToken{flex:1;min-width:0;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta-2);padding:10px 12px;font-size:13px;font-family:Consolas,"SFMono-Regular",Menlo,monospace;letter-spacing:1px;outline:none;cursor:default}
.cfgApiBtn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta-2);padding:9px 14px;font-size:12.5px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.cfgApiBtn:hover{background:var(--surface-2);color:var(--tinta);border-color:var(--borda-2)}
.cfgApiBtnIc{display:inline-flex;color:var(--apagado)}
.cfgApiBtnIc svg{width:14px;height:14px}
.cfgApiBtn:hover .cfgApiBtnIc{color:var(--roxo-2)}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.cfgApiNota{display:flex;gap:14px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--sp-entre-cards) 20px;margin:var(--sp-entre-secoes) 0}
.cfgApiNotaIc{flex:0 0 auto;display:inline-flex;color:var(--roxo-2);margin-top:1px}
.cfgApiNotaIc svg{width:20px;height:20px}
.cfgApiNotaTxt b{display:block;font-size:13px;color:var(--tinta);font-weight:600;margin-bottom:5px}
.cfgApiNotaTxt p{font-size:12.5px;color:var(--tinta-2);line-height:1.55;margin:0}
.cfgApiOAuth{background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:20px}
.cfgApiOAuthTopo{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cfgApiOAuthIc{display:inline-flex;color:var(--roxo-2)}
.cfgApiOAuthIc svg{width:22px;height:22px}
.cfgApiTag{font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--amarelo);background:color-mix(in srgb,var(--amarelo) 16%,transparent);border-radius:999px;padding:3px 10px}
.cfgApiOAuthTit{font-size:15px;font-weight:600;color:var(--tinta);margin-bottom:6px}
.cfgApiOAuthDesc{font-size:12.5px;color:var(--tinta-2);line-height:1.55}

/* ===== CONFIG · AUDITORIA ===== */
.cfgAud{max-width:860px}
.audTag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--amarelo);background:var(--surface-2);border:1px solid var(--borda);border-radius:999px;padding:3px 9px;margin-left:10px;vertical-align:middle}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.audAviso{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:var(--sp-entre-cards)}
.audAvisoIc{color:var(--amarelo);flex:0 0 auto;display:inline-flex;margin-top:1px}
.audAvisoIc svg{width:18px;height:18px}
.audAvisoTxt b{font-size:13px;font-weight:600;color:var(--tinta)}
.audAvisoTxt p{font-size:12.5px;color:var(--tinta-2);line-height:1.5;margin-top:6px}
.audTbWrap{border:1px solid var(--borda);border-radius:var(--r-lg);overflow-x:auto;background:var(--surface)}
.audTb{width:100%;border-collapse:collapse;font-size:12.5px}
.audTb th{text-align:left;font-weight:600;color:var(--apagado);background:var(--surface-2);padding:10px 14px;border-bottom:1px solid var(--borda);font-size:11px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.audTb td{padding:11px 14px;border-bottom:1px solid var(--borda);color:var(--tinta-2);vertical-align:top;line-height:1.45}
.audTb tbody tr:last-child td{border-bottom:none}
.audTbData{color:var(--apagado);white-space:nowrap}
.audTbUser{color:var(--tinta);font-weight:500;white-space:nowrap}
.audRodape{font-size:11.5px;color:var(--apagado);margin-top:14px;line-height:1.5}

/* ===== CONFIG · IMPORTAR / EXPORTAR ===== */
.cfgIE{max-width:720px}
.ieTabs{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);padding:4px;margin-bottom:20px}
.ieTab{background:none;border:none;color:var(--tinta-2);font-size:12.5px;font-weight:500;padding:7px 16px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s}
.ieTab:hover{color:var(--tinta)}
.ieTab.ativo{background:var(--roxo-suave);color:var(--roxo-2)}
.ieCards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ieCard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:14px 16px;transition:border-color .15s}
.ieCard:hover{border-color:var(--borda-2)}
.ieLogo{flex:0 0 auto;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:9px;color:var(--roxo-2);font-size:11.5px;font-weight:700;letter-spacing:.3px}
.ieCardTxt{flex:1;min-width:0}
.ieCardNome{font-size:13.5px;font-weight:600;color:var(--tinta)}
.ieCardDesc{font-size:12px;color:var(--tinta-2);line-height:1.45;margin-top:2px}
.ieBtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta);font-size:12.5px;padding:7px 14px;border-radius:var(--r);cursor:pointer;transition:filter .15s,border-color .15s}
.ieBtn svg{width:15px;height:15px}
.ieBtn:hover{border-color:var(--roxo);filter:brightness(1.1)}
.ieBtnRoxo{background:var(--roxo);border-color:var(--roxo);color:#fff}
.ieBtnRoxo:hover{border-color:var(--roxo-2)}
.ieExport{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);padding:20px;max-width:520px}
.ieExportTxt{font-size:13px;color:var(--tinta-2);line-height:1.55}
.ieHist{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-lg);overflow:hidden}
.ieHist th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--apagado);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--borda)}
.ieHist td{font-size:12.5px;color:var(--tinta-2);padding:12px 14px;border-bottom:1px solid var(--borda)}
.ieHist tr:last-child td{border-bottom:none}
.ieOk{display:inline-block;font-size:11.5px;color:var(--verde);background:rgba(46,205,111,.14);padding:3px 9px;border-radius:999px}

/* Config · Cronograma de trabalho */
.cronDias{display:flex;flex-wrap:wrap;gap:8px}
.cronDia{position:relative;cursor:pointer;user-select:none}
.cronDia input{position:absolute;opacity:0;width:0;height:0}
.cronDia span{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:9px 12px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta-2);font-size:12.5px;font-weight:500;transition:all .15s}
.cronDia input:checked+span{background:var(--roxo-suave);border-color:var(--roxo);color:var(--tinta)}
.cronDia input:focus-visible+span{box-shadow:0 0 0 2px var(--roxo-suave)}
.cronLinha{display:flex;gap:16px}
.cronLinha .cfgCampo{flex:1;min-width:0}
.cronLinha input[type=time],.cronLinha input[type=number]{color-scheme:dark}
.cronBtns{display:flex;flex-wrap:wrap;gap:10px}
.cronBtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--borda);border-radius:var(--r);color:var(--tinta);padding:9px 14px;font-size:12.5px;font-weight:500;cursor:pointer;transition:all .15s}
.cronBtn:hover{background:var(--surface-2);border-color:var(--borda-2)}
.cronBtnIc{display:inline-flex;width:15px;height:15px;color:var(--roxo-2)}
.cronBtnIc svg{width:15px;height:15px}
@media(max-width:640px){.cronLinha{flex-direction:column;gap:0}}

/* ===== MODAL DE INPUT (substitui prompt nativo) ===== */
/* z-index 150, medido no O-088: confirmar()/pedirTexto() e' generico e pode ser chamado de DENTRO
   de um modal ja aberto (achado real: #ecGerModal chamando confirmar() no "Excluir" ficava atras
   -- .compOverlay e' 130, #inputModal era 120). Tem que vencer qualquer casca .compOverlay/modal
   de 130-140, nunca o contrario -- por isso 150, acima de todos eles. */
#inputModal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150;display:none;align-items:flex-start;justify-content:center}
#inputModal.on{display:flex}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.imBox{margin-top:20vh;width:440px;max-width:92vw;background:var(--surface);border:1px solid var(--borda-2);border-radius:var(--r-lg);box-shadow:0 24px 70px rgba(0,0,0,.6);padding:var(--sp-entre-cards)}
.imTit{font-size:14px;font-weight:600;color:var(--tinta);margin-bottom:12px}
.imBox input{width:100%;background:var(--bg);border:1px solid var(--borda);border-radius:8px;color:var(--tinta);padding:11px 13px;font-size:14px;outline:none}
.imBox input:focus{border-color:var(--roxo)}
.imAcoes{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.imBtn{background:var(--surface-2);border:none;color:var(--tinta-2);font-size:13px;padding:8px 16px;border-radius:8px}
.imBtn:hover{filter:brightness(1.15)}
.imBtn.roxo{background:var(--roxo);color:#fff}
.imBtn.perigo{background:var(--vermelho);color:#fff} /* botao de confirmacao destrutiva (Excluir) */
.imMsg{font-size:13.5px;color:var(--tinta-2);line-height:1.5;margin-bottom:16px} /* corpo do modal confirmar (substitui window.confirm) */

/* ===== FIX modal da tarefa: maior + alternancia de volta pra lateral ===== */
#tarefaPainel.modo-lateral{left:auto;transform:none}
/* O-022 (ORION 08/09), item 18, palavra do Wilker: "vamos mexer neste modal e deixar ele mais
   largo, ta tudo espremido, olha como ficou os campos tudo em cima do outro". Medido ao vivo numa
   tarefa real (campo personalizado "Conta de Anúncio" + "Datas"): a CAUSA do empilhamento nao era
   so largura -- `.tpCampo{height:32px}` era FIXO (nao min-height, por design antigo, pro ritmo
   bater com a coluna esquerda), e campo com rotulo/valor compostos (icone+texto+acoes) que nao
   cabe em 1 linha ESTOURAVA essa altura em silencio: scrollHeight 44 contra clientHeight 32,
   pixels sobrando por cima da linha de baixo -- overlap real, so que invisivel pra um
   getBoundingClientRect ingenuo (o overflow e visual, o box em si nao muda de tamanho). Aumentei a
   largura (pedido literal dele) E troquei `.tpCampo` pra min-height (ver regra abaixo) -- as duas
   causas juntas, nao so uma. */
/* estas duas tem REGRA UNICA de width/height agora (ORION 09/09, achado ARCTURUS) -- havia
   duas regras mortas mais acima (uma bundle grande em 1853/1860, uma standalone ja apagada)
   competindo pelo mesmo width/height; so restou a delas em outras propriedades (transform,
   border, box-shadow etc), que continuam la' intactas */
#tarefaPainel.modo-modal{width:min(1320px,96vw);height:90vh;left:50%;right:auto}
#tarefaPainel.modo-tela{width:calc(100vw - 72px);height:calc(100vh - 36px);left:50%;right:auto}
/* coluna de campos (direita) ganhou espaco de verdade -- 559 pra 620px -- pra sobrar mais antes de
   um rotulo/valor precisar de 2 linhas. Nao elimina o caso extremo (nome de campo MUITO longo),
   por isso o min-height abaixo continua sendo a garantia real. */
.tpColDir{flex-basis:620px}
/* .tpCampo{height:32px} virou min-height: um campo que precisa de 2 linhas (rotulo composto,
   valor composto tipo "Início → Vencimento") agora EMPURRA a proxima linha da grade pra baixo em
   vez de estourar silenciosamente por cima dela. O ritmo de 36px continua valendo pra quase todo
   campo (a maioria cabe em 1 linha, nada mudou visualmente neles) -- so os poucos casos de 2
   linhas ficam ligeiramente fora do ritmo, o que e MELHOR que overlap real. */
.tpCampo{height:auto;min-height:32px}

/* ===== MODAL DE CRIACAO DE TAREFA (igual ClickUp) ===== */
#novaTarefaModal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:130;display:none;align-items:flex-start;justify-content:center}
#novaTarefaModal.on{display:flex}
.ntBox{margin-top:9vh;width:820px;max-width:94vw;max-height:82vh;background:var(--surface);border:1px solid var(--borda-2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.ntTabs{display:flex;align-items:center;gap:22px;padding:14px 18px 0;border-bottom:1px solid var(--borda);position:relative}
.ntTab{font-size:13.5px;color:var(--apagado);padding-bottom:12px;cursor:pointer;border-bottom:2px solid transparent}
.ntTab.ativa{color:var(--tinta);border-bottom-color:var(--roxo);font-weight:600}
.ntTab.off{opacity:.5;cursor:default}
.ntTabsFim{margin-left:auto;display:flex;align-items:center;gap:2px;margin-bottom:7px}
.ntIcoBtn{background:none;border:none;color:var(--apagado);width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.ntIcoBtn:hover{background:var(--surface-2);color:var(--tinta)}
.ntFechar{background:none;border:none;color:var(--apagado);width:28px;height:28px;border-radius:6px;cursor:pointer}
.ntFechar:hover{background:var(--surface-2);color:var(--tinta)}
.ntFechar svg{width:16px;height:16px}
.ntBody{padding:16px 20px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.ntSeletores{display:flex;gap:8px}
.ntSel{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--borda);border-radius:7px;padding:5px 11px;font-size:12.5px;color:var(--tinta-2);cursor:pointer}
.ntSel:hover{border-color:var(--roxo)}
.ntSel svg{width:13px;height:13px}
.ntChv{font-style:normal;font-size:10px;color:var(--apagado);margin-left:1px}
.ntNome{background:none;border:none;color:var(--tinta);font-size:22px;font-weight:600;outline:none;padding:4px 0}
.ntNome::placeholder{color:var(--apagado);font-weight:500}
.ntDesc{background:none;border:none;color:var(--tinta-2);font-size:13.5px;outline:none;resize:none;min-height:44px;font-family:inherit}
.ntDesc::placeholder{color:var(--apagado)}
.ntSugCliente{background:var(--surface-2);border:1px solid var(--borda);border-radius:8px;margin:4px 0;padding:2px 6px}
.ntCampos{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.ntCampoWrap{position:relative}
.ntCampo{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--borda);border-radius:16px;padding:6px 13px;font-size:12.5px;color:var(--tinta-2)}
.ntCampo:hover{background:var(--surface-2);color:var(--tinta)}
.ntCampo svg{width:14px;height:14px}
.ntCampo .kbDot{width:9px;height:9px;border-radius:50%}
.ntCampoWrap .ddMenu{top:36px;left:0}
/* #ntAtivoMenu / #ntAtivoClienteMenu (Motor Ativo, achado real ALTAIR 04/09): nome longo
   quebrava dentro da linha de 32px fixos e SOBREPUNHA a proxima opcao (print real, 105 opcoes
   sem largura pra "1800 Oscar Pinheiros — Benx + Tellus"). Escopado por id — nao mexe nos outros
   ~10 dropdowns .ddOp do app (clientes/responsaveis, listas curtas, nunca reclamado). */
#ntAtivoMenu, #ntAtivoClienteMenu{min-width:420px;overflow-x:hidden}
#ntAtivoClienteMenu{min-width:320px}
.ddMenuBuscaWrap{padding:2px 2px 6px}
.ddMenuLista{max-height:280px;overflow-y:auto}
#ntAtivoMenu .ddOp,#ntAtivoClienteMenu .ddOp{overflow:hidden}
.ddOpNome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O-022 (ORION 08/09), itens 4+6: menu "Selecionar conta" -- largura propria (min-width base era
   180px, curto demais pra nome+cliente+valor lado a lado, e era isso que espremia tudo numa
   linha corrida) + as 2 colunas que faltavam pro nome. `.ddOpMeio` (cliente) e `.ddOpValor`
   (dinheiro) tem largura fixa, entao toda linha alinha na mesma coluna que a de cima -- nunca
   mais texto corrido separado por ponto. */
.ddMenuConta{min-width:340px}
.ddMenuConta .ddOpMeio{flex:0 0 110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--apagado);font-size:12px}
.ddMenuConta .ddOpValor{flex:0 0 78px;text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta-2)}
/* O-022 (ORION 08/09), item 5: campo de busca fixo no topo + lista rolavel embaixo -- por isso o
   max-height saiu do `.ddMenuConta` (o menu inteiro, que incluiria a busca na rolagem) e foi pra
   `.ddMenuContaLista` (so a parte que precisa rolar). Achado ao mexer: o `.ddMenuConta` antigo
   tinha max-height:320px SEM overflow-y -- nao clipava nada de verdade (overflow default e
   visible, o menu so crescia pra fora do limite). Corrigido de brinde, nao era o pedido mas era
   o mesmo bug de forma (numero que promete um limite que o CSS nao cumpria).
   `.ddBusca`/`.ddBuscaInput` sao o PRIMEIRO campo de busca dentro de um `.ddMenu` no app -- vira
   padrao pra qualquer dropdown longo que precisar disso depois (ex: Grupo de anuncios do PHOENIX). */
.ddMenuConta .ddMenuContaLista{max-height:280px;overflow-y:auto}
.ddBusca{padding:2px 3px 6px;margin-bottom:3px;border-bottom:1px solid var(--borda-2)}
.ddBuscaInput{width:100%;height:30px;box-sizing:border-box;background:var(--surface-2);border:1px solid var(--borda-2);border-radius:6px;padding:0 10px;font-size:13px;color:var(--tinta);outline:none}
.ddBuscaInput:focus{border-color:var(--roxo)}
.ddBuscaInput::placeholder{color:var(--apagado)}
.ddOp.ddSemResultado{opacity:.6;pointer-events:none;cursor:default}
#ntAtivoMenu .ddOp .sub,#ntAtivoClienteMenu .ddOp .sub{flex-shrink:0;white-space:nowrap;color:var(--apagado);font-size:11px;margin-left:4px}
/* .notaCorpo (Motor Ativo, achado real ALTAIR 04/09): ficha do empreendimento mostrava a nota do
   vault crua ("# Elev", "**Vila Prudente**"). renderMarkdownMinimo() em nova.js gera esta marcacao. */
.notaCorpo{font-size:13px;color:var(--tinta-2);line-height:1.6}
.notaCorpo .notaTit1{font-size:18px;font-weight:700;color:var(--tinta);margin:14px 0 6px}
.notaCorpo .notaTit1:first-child{margin-top:0}
.notaCorpo .notaTit2{font-size:15px;font-weight:700;color:var(--tinta);margin:12px 0 6px}
.notaCorpo .notaTit3{font-size:13.5px;font-weight:700;color:var(--tinta);margin:10px 0 4px}
.notaCorpo .notaPar{margin:0 0 8px}
.notaCorpo .notaLista{margin:0 0 8px;padding-left:20px}
.notaCorpo .notaLista li{margin:2px 0}
.notaCorpo .notaCitacao{margin:0 0 8px;padding:6px 12px;border-left:3px solid var(--borda-2);color:var(--apagado);font-style:italic}
.notaCorpo hr{border:none;border-top:1px solid var(--borda);margin:12px 0}
.notaTabela{width:100%;border-collapse:collapse;font-size:12.5px;margin:0 0 10px}
.notaTabela th{text-align:left;font-weight:600;color:var(--apagado);font-size:11px;padding:5px 8px;border-bottom:1px solid var(--borda-2)}
.notaTabela td{padding:5px 8px;border-bottom:1px solid var(--borda);color:var(--tinta-2)}
.notaTabela tr:last-child td{border-bottom:none}
.ntMais{border-radius:16px;padding:6px 12px;font-weight:700;letter-spacing:1px}
.ntSecCampos{display:flex;flex-direction:column;gap:8px}
.ntSec{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--apagado);margin-top:2px}
.ntCustom{display:flex;flex-direction:column}
/* linha discreta de campo personalizado — igual ClickUp */
.ntLinCampo{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--borda);font-size:13px}
.ntLinCampo:last-child{border-bottom:none}
.ntLinIco{width:18px;text-align:center;color:var(--apagado);font-size:12px;flex:none}
.ntLinNome{color:var(--tinta-2)}
.ntLinVal{margin-left:auto;color:var(--tinta);cursor:pointer;padding:3px 8px;border-radius:6px;min-width:30px;text-align:right}
.ntLinVal:hover{background:var(--surface-2)}
.ntLinVal.vazio{color:var(--apagado)}
.ntLinEd{background:var(--bg);border:1px solid var(--roxo);border-radius:6px;color:var(--tinta);padding:4px 8px;font-size:12.5px;outline:none;min-width:140px;color-scheme:dark;font-family:inherit}
.ntLinEdChk{width:16px;height:16px;accent-color:var(--roxo);cursor:pointer}
.ntCamposAcoes{display:flex;gap:8px;flex-wrap:wrap}
.ntPill{background:var(--surface-2);border:1px solid var(--borda);border-radius:7px;padding:6px 12px;font-size:12.5px;color:var(--tinta-2);cursor:pointer}
.ntPill:hover{border-color:var(--roxo);color:var(--tinta)}
.ntVazio{font-size:12px;color:var(--apagado)}
.ntFooter{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--borda);margin-top:4px}
.ntModelos{background:none;border:1px solid var(--borda);border-radius:8px;padding:8px 14px;font-size:12.5px;color:var(--tinta-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ntModelos:hover{background:var(--surface-2);color:var(--tinta)}
.ntFooterDir{display:flex;align-items:center;gap:6px}
.ntCriarSplit{display:flex;align-items:stretch;margin-left:4px}
.ntCriar{background:var(--roxo);border:none;color:#fff;font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:8px 0 0 8px;cursor:pointer}
.ntCriar:hover{filter:brightness(1.1)}
.ntCriar:disabled{opacity:.6}
.ntCriarChv{background:var(--roxo);border:none;border-left:1px solid rgba(255,255,255,.2);color:#fff;padding:0 8px;border-radius:0 8px 8px 0;font-size:10px;cursor:pointer}
.ntCriarChv:hover{filter:brightness(1.1)}
/* modal expandido (botao tela cheia) */
.ntBox.grande{width:1080px;max-height:90vh;margin-top:5vh}
/* ===== SEGURANCA: tela de login ===== */
#novaLogin{position:fixed;inset:0;z-index:400;background:var(--bg);display:flex;align-items:center;justify-content:center}
.lgBox{width:340px;max-width:90vw;background:var(--surface);border:1px solid var(--borda-2);border-radius:14px;padding:32px 28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lgLogo{font-size:26px;font-weight:700;color:var(--tinta);text-align:center}
.lgSub{font-size:13px;color:var(--apagado);text-align:center;margin-bottom:8px}
.lgInput{background:var(--bg);border:1px solid var(--borda);border-radius:8px;color:var(--tinta);padding:11px 13px;font-size:14px;outline:none}
.lgInput:focus{border-color:var(--roxo)}
.lgBtn{background:var(--roxo);border:none;color:#fff;font-size:14px;font-weight:600;padding:11px;border-radius:8px;cursor:pointer;margin-top:4px}
.lgBtn:hover{filter:brightness(1.1)}
.lgBtn:disabled{opacity:.6}
.lgErro{font-size:12.5px;color:#e5484d;text-align:center;min-height:16px}
/* ===== SEGURANCA: gestao de acessos ===== */
.gaLista{display:flex;flex-direction:column;gap:8px;margin-top:14px;max-width:760px}
.gaUser{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--borda);border-radius:10px}
.gaAvatar{width:34px;height:34px;border-radius:50%;color:#fff;font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:none}
.gaInfo{flex:1;min-width:0}
.gaNome{font-size:14px;color:var(--tinta);font-weight:500}
.gaEmail{font-size:12px;color:var(--apagado)}
.gaTagMestre{font-size:10px;background:var(--roxo);color:#fff;padding:1px 7px;border-radius:8px;vertical-align:middle;margin-left:4px}
.gaNivel{font-size:12px;color:var(--tinta-2);padding:3px 10px;border:1px solid var(--borda);border-radius:14px}
.gaImut{font-size:11px;color:var(--apagado);font-style:italic}
.gaBtn{background:none;border:1px solid var(--borda);border-radius:7px;padding:6px 11px;font-size:12px;color:var(--tinta-2);cursor:pointer}
.gaBtn:hover{border-color:var(--roxo);color:var(--tinta)}
.gaBtn.perigo:hover{border-color:#e5484d;color:#e5484d}
/* modal de escopo */
#escopoModal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:140;display:none;align-items:center;justify-content:center}
#escopoModal.on{display:flex}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.escBox{width:440px;max-width:92vw;max-height:80vh;overflow-y:auto;background:var(--surface);border:1px solid var(--borda-2);border-radius:13px;padding:var(--sp-entre-cards) 20px;display:flex;flex-direction:column;gap:10px}
/* Departamentos (Motor Departamento, 04/09) largura maior -- 8 linhas de dot+nome+4 radios
   nao cabem nos 440px do escBox original (pensado pra 1 coluna de checkbox). */
.escBox:has(.escListaDeptos){width:620px}
.escListaDeptos{gap:0}
/* Fase A4 (05/09): departamento + seus subs + listas avulsas viraram um bloco (a borda que
   separava departamentos migrou do escDeptoLinha pro escDeptoBloco, senao os subs ficam soltos
   depois da linha, sem fechar visualmente o grupo). */
.escDeptoBloco{border-bottom:1px solid var(--borda);padding-bottom:4px}
.escDeptoBloco:last-child{border-bottom:none}
.escDeptoLinha{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 4px 2px}
.escDeptoNome{font-size:13px;color:var(--tinta);min-width:110px;margin-right:6px}
.escDeptoLinha .escItem{padding:4px 8px;font-size:12.5px;gap:5px}
.escSubBlock{display:flex;flex-direction:column;gap:0;margin-left:20px;border-left:2px solid var(--borda);padding-left:8px}
.escSubLinha{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px}
.escSubLinha .escItem{padding:3px 7px;font-size:12px;gap:4px}
.escDotMini{width:7px;height:7px}
.escSubNome{font-size:12px;color:var(--apagado);min-width:100px;margin-right:6px}
.escListaAvulsaItem{font-size:12px}
/* Fase D3 (05/09): links do Moon (cliente -> ficha do ativo; conta -> tela ao vivo; "Resolver no
   Oblivion" -> aba nova) -- mesmo espirito visual do resto do app, sem lib nenhuma. */
/* item a da medicao Clientes (ALTAIR, 06/09): avatar de iniciais antes do nome, secao 8.4 do
   espelho -- circulo fixo, so 1 cor (o cadastro nao tem cor por cliente, diferente do avGrupo de
   membros do ClickUp que usa a cor de cada pessoa). */
.moonAvatar{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--roxo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.moonLink{color:var(--roxo-2);cursor:pointer;text-decoration:none}
.moonLink:hover{text-decoration:underline}
/* BUG 10 (05/09, Wilker -- "borrao" no Gasto por dia): com 29-30 barras finas escaladas por
   viewBox+preserveAspectRatio=none, qualquer aresta em posicao sub-pixel vira anti-aliasing
   generalizado (le como borrao visto de longe). shape-rendering:crispEdges forca as arestas do
   RETANGULO pro pixel mais proximo -- so nas barras, nunca no texto (texto TEM que continuar
   suavizado, crispEdges em texto fica pior). Rotulo tambem estava com 9px de unidade de viewBox,
   que escala pra BAIXO de 9px real na tela (a unidade de viewBox nao e pixel de tela quando o SVG
   e esticado) -- por isso o numero aqui e bem maior que o alvo final: 20 escala pra ~11-14px reais
   nas larguras de card que o Nova usa hoje. */
.moonGraficoWrap{width:100%}
.moonGraficoSvgWrap{position:relative}
.moonGrafico{width:100%;height:130px;display:block}
.moonBarra{fill:var(--roxo);shape-rendering:crispEdges}
.moonBarra:hover{fill:var(--roxo-2)}
/* item 6.4 (tela Meta/Google, secao 6 do espelho): dia de pico destacado, valor escrito acima --
   HTML fora do SVG (mesma razao do bug 13), posicionado em px reais porque a altura do viewBox
   (H=130) e IGUAL a altura real em CSS (height:130px), entao 1 unidade = 1px sem conversao. */
.moonBarra.moonBarraPico{fill:var(--amarelo)}
.moonPicoLabel{position:absolute;transform:translateX(-50%);font-size:10px;font-weight:650;color:var(--amarelo);white-space:nowrap}
/* BUG 13 (05/09, achado pela ALTAIR medindo): rotulo saiu do SVG (unidade de viewBox nao e pixel
   de tela -- 20 la dentro virou ~28px reais) e virou HTML normal aqui embaixo, com font-size de
   CSS de verdade, que NUNCA escala junto com o grafico, nao importa a largura real do card. */
.moonEixoRow{position:relative;height:16px;margin-top:2px}
.moonEixoLabel{position:absolute;top:0;transform:translateX(-50%);font-size:11px;color:var(--apagado);white-space:nowrap}
/* item 5 da medicao "Visao geral" (ALTAIR, 06/09): rodape do grafico -- primeira data · pico · ultima
   data, igual ao moon.php (que usa isto pra dizer "de onde ate onde" sem precisar do eixo inteiro). */
.moonGraficoRodape{display:flex;justify-content:space-between;font-size:11px;color:var(--apagado);margin-top:6px}

/* ══════════════════════════════════════════════════════════════════════════
   ORDEM DO WILKER, furioso (06/09): "eu quero 100% igual a prova do Oblivion,
   nao quero sua opiniao nem a da ANTARES de como deve ficar". O visual do
   Relatorios (Moon) passa a usar o CSS do Oblivion, NAO a paleta escura do
   Nova -- escopado dentro de .moonOblivion pra nao vazar pro resto do app
   (que continua escuro). Tokens e regras copiados de:
     Oblivion-Front/assets/css/tokens.css (paleta, sombra, raio)
     Oblivion-Front/assets/css/app.css (.kpis/.kpi/.painel/table/.pill/.aviso)
   Comeca pela Visao geral (a primeira tela que ele ve); as demais entram
   tela por tela nas proximas rodadas.
   ══════════════════════════════════════════════════════════════════════════ */
.moonOblivion{
  /* ORION O-002 (07/09) -- ESCURECIMENTO TOTAL, ordem revoga o "100% Oblivion
     claro" de 06/09. So os VALORES mudam: mecanismo, nome de variavel e
     anatomia continuam os mesmos, e a paleta agora e a do proprio Nova
     (roxo de acento, superficies #1c1c21/#24242b, texto #ececef) em vez do
     azul/branco do Oblivion. Contraste calculado abaixo em cada bloco. */
  /* O-012 (ORION 07/09): as variaveis que repetiam hex identico a um token do :root
     passam a CONSUMIR o token via var() (Parte 1) -- --mo-graphite, --mo-slate, --mo-fog,
     --mo-card, --mo-white, --mo-blue, --mo-electric, --mo-ok, --mo-warn, --mo-bronze, --mo-bad.
     As demais (--mo-abyss, --mo-navy, --mo-sky, --mo-haze, --mo-bronze-d, --mo-bronze-h, os
     *-bg de status) nao tem equivalente no :root e ficam como estavam.

     DIVIDA ANOTADA (Maestro, 08/09): --mo-haze e literal fixo (#241f3d), nunca virou var()
     porque nao tinha par no :root. Hoje isso e inofensivo -- o Nova so tem UM tema (grep
     confirma uma unica `--tinta:` no arquivo inteiro) -- mas --mo-haze e usado como FUNDO em
     varios lugares com texto por cima que JA e tematico (`var(--mo-blue)`=var(--roxo),
     `var(--mo-graphite)`=var(--tinta), herdado): `.ini`, `.aviso.info`, `.peropt:hover`,
     `.combo-item:hover/.ativo`, `.obcal-nav:hover`, `.obcal-dia:hover/.entre`, `.cri-texto`,
     `.moonAvatar`, `.finPill.chipLista:hover`. No dia em que existir tema claro, `--tinta` troca
     de cor e `--mo-haze` continua roxo-escuro fixo -- metade do par viaja com o tema, a outra
     metade nao, e o contraste quebra em silencio nesses pontos especificos. Nao e desta rodada
     resolver (tema claro esta travado), mas fica registrado pra quando chegar. */
  --mo-abyss:#050507; --mo-navy:#d9d3ff; --mo-blue:var(--roxo); --mo-blue-h:#6a58d1;
  --mo-electric:var(--roxo-2); --mo-sky:#c9c2ff; --mo-haze:#241f3d;
  --mo-bronze:var(--amarelo); --mo-bronze-d:#cc8d19; --mo-bronze-h:#3a2c12;
  /* O-022 (ORION 08/09), item 4: `.perbtn:hover` usava `#45454f` cru direto na regra, sem token --
     mesma familia de divida do --mo-haze (ver nota acima). Criado agora porque o item 4 precisava
     do MESMO valor no botao "Selecionar conta" (pedido do Maestro: nunca copiar o literal medido
     na mao pra um segundo lugar -- se nao existe token, criar um, nao duplicar hex solto). */
  --mo-mist-hover:#45454f;
  --mo-graphite:var(--tinta); --mo-slate:var(--tinta-2); --mo-steel:var(--tinta-3);
  --mo-mist:var(--borda-3); --mo-fog:var(--bg); --mo-white:var(--surface-2); --mo-card:var(--surface);
  --mo-ok:var(--verde); --mo-ok-bg:rgba(46,205,111,.14); --mo-warn:var(--amarelo); --mo-warn-bg:rgba(255,176,32,.14);
  --mo-bad:var(--vermelho); --mo-bad-bg:rgba(229,72,77,.14);
  --mo-r:var(--card-r); --mo-sh:var(--card-sh); --mo-sh-md:0 4px 16px rgba(0,0,0,.5);
  --mo-fonte:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* ORION 06/09 -- CORPO. Eram so font-family + letter-spacing, entao o texto
     herdava os 13px do body do Nova. O Oblivion escreve `font:14px/1.5` no
     body (app.css 70-75) e TODA medida dele (th 11, td 13.5, kpi .val 22) foi
     desenhada em cima desse corpo. 13px encolhe a tela inteira em 7%. */
  font:14px/1.5 var(--mo-fonte);
  font-feature-settings:'cv05' 1,'cv08' 1,'ss03' 1;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--mo-fog); color:var(--mo-graphite);
  /* ORION 06/09 -- ESPACAMENTO. Este bloco faz o papel do `.corpo` do Oblivion
     (o Nova nao tem esse elemento). Entao a calha tem que ser a DELE:
     12px 26px 36px, gap 14 (app.css 135). Estava 12/16/20 -- 10px a menos de
     cada lado, que e exatamente o "card colado na borda" que o Wilker
     reprovou. O comentario do proprio Oblivion explica o 12 do topo: 22px
     somados ao gap de 18 do cabecalho abriam buraco.
     E o `.corpo` do Oblivion NAO tem raio: ele e a superficie da tela, nao um
     card em cima dela. O border-radius daqui era adaptacao nossa.
     O-020 (ORION 08/09): o gap 14 fixo nunca foi atualizado quando a lei virou
     token (--sp-entre-cards:18). Achado pelo Wilker na aba Google ("todos os
     card grudado") -- 18 pares medidos a 14px, 4px abaixo da lei, mesmo
     defeito de "numero proprio em vez de token" que ja apareceu nas larguras
     de coluna e no `.kpis`. Esta e a raiz de TODO .moonOblivion (o dashboard
     inteiro de 7 abas E o relatorio de conta usam o MESMO bloco), entao o
     fix e uniforme nos dois, nao so na tela do Google.
     O-081 volta 1 (14/09): horizontal 26px->28px, moldura unica. O 26 nao era palavra do Wilker
     sobre O NUMERO -- era o valor do `.corpo` do Oblivion ORIGINAL, copiado pra "resolver o
     colado" (a queixa dele em 06/09 era especificamente "cards colados na borda", nunca "quero
     26px"). Conferi no historico antes de mudar (ALTAIR pediu): nenhuma frase do Wilker aprova o
     26 como numero: ele aprovou o CONSERTO do colado, que qualquer valor adequado resolvia. Mesma
     familia do defeito que o proprio comentario acima ja registra (gap 14 fixo em vez de token) --
     numero proprio sobrevivendo por inercia em vez de seguir a lei vigente. Vertical (12/36)
     intocado, a lei e so horizontal. */
  padding:12px 28px 36px;
  display:flex; flex-direction:column; gap:var(--sp-entre-cards);
}
/* O-038 (ORION 12/09), Wilker olhando a tela: "tudo que ara visoes do Meta Google Merkurius Visao
   geral quero seguir essa linha aqui" (a largura da linha das abas, `#moonAbasNav`) -- o conteudo
   do Merkurius/Pipeline vinha 26px mais ESTREITO de cada lado, medido pelo ALTAIR (linha das abas
   1537px, conteudo 1485px). CAUSA: `andares_merkurius.js`/`andares_pipeline.js` desenham o proprio
   corpo como `<div class="moonOblivion" data-and="...">` DENTRO de `#moonCorpo` -- que por sua vez
   ja e' filho do `.moonOblivion` EXTERNO que o proprio `telaMoon` monta (o mesmo que envolve
   `#moonAbasNav`). Dois elementos com a MESMA classe `.moonOblivion`, um dentro do outro: o padding
   lateral de 26px (regra acima) se aplicava DUAS VEZES, uma por wrapper. Fix: zera o padding do
   wrapper aninhado -- mantem display/flex-direction/gap (os `<section>` de dentro continuam
   precisando do gap pra nao colar entre si), so' a MOLDURA de fora, que ja' vem do `.moonOblivion`
   externo, nao se repete. Nao mexi na regra base (ela serve a PORTA ANTIGA do menu Andares, que
   escreve direto em `#main` sem nenhum `.moonOblivion` ancestral -- la' o padding tem que existir
   de verdade, e continua). */
#moonCorpo>.moonOblivion{padding:0}
/* O-018 (ORION 08/09): causa raiz dos 18 pares colados medidos pelo Maestro. A lei de
   espacamento so tinha sido testada CARD CONTRA CARD DA MESMA GRADE -- nunca fileira contra o
   proximo bloco, porque #relCorpo (o container que envolve .kpis, .grade do grafico/funil,
   "Metricas de engajamento", Top campanhas etc, todos <section> filhos diretos dele) e uma div
   pura, sem display nem gap. Blocos de nivel de bloco empilham SEM espaco nenhum entre si por
   padrao -- e exatamente o "encostado" que ele mediu em 18 pares, zero excecao. A lei agora vale
   pra QUALQUER par de vizinhos, nao so irmaos da mesma grade (regra nova, documentada aqui e no
   molde): --sp-entre-secoes e o degrau certo pra bloco contra bloco. */
#relCorpo{display:flex;flex-direction:column;gap:var(--sp-entre-secoes)}
/* O-018 (ORION 08/09): mesmo bug, um nivel abaixo -- #relTops (moon_relatorio.js:571) envolve
   "Top campanhas" (painel solto) + .grade2 (Top anuncios/Top conjuntos), tambem sem gap proprio. */
#relTops{display:flex;flex-direction:column;gap:var(--sp-entre-cards)}
/* O-020 (ORION 08/09): a ANTARES ligou o relatorio do Google na interface e o Maestro mediu
   157 pares abaixo da lei, 56 deles a ZERO -- e a MESMA causa raiz da O-018, so que o Google usa
   IDs proprios (`#relGoogleCorpo`/`#relGoogleTops`, moon_google_relatorio.js), diferentes de
   `#relCorpo`/`#relTops` do Meta, entao o fix de la nunca alcancou aqui. Corrigido igual. */
#relGoogleCorpo{display:flex;flex-direction:column;gap:var(--sp-entre-secoes)}
#relGoogleTops{display:flex;flex-direction:column;gap:var(--sp-entre-cards)}
.moonOblivion h1,.moonOblivion h2{letter-spacing:-0.021em;font-weight:650}
.moonOblivion .val,.moonOblivion .forte,.moonOblivion .kpi .val,.moonOblivion .kpi .pe,
/* ORION 06/09: .finPill entrou aqui. O diff par a par mostrou que a pilula do
   Oblivion (.pill) tinha digito de largura fixa e a ponte do Nova (.finPill)
   nao -- entao o CPL dentro da pilula nao alinhava coluna com coluna. Numero
   de largura variavel numa coluna de numeros e o comeco do desalinhamento que
   o Wilker proibiu. */
.moonOblivion td,.moonOblivion th,.moonOblivion .nota,.moonOblivion .pill,
.moonOblivion .finPill{
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1,'cv05' 1,'cv08' 1;
}
/* kpis */
/* O-016 item 11 (ORION 08/09, 2a rodada): a 1a rodada forcava as duas fileiras a compartilhar
   UMA trilha de 12 colunas (span 2/1) -- isso espremeu o leve pra 113px e obrigou a fonte do
   valor a cair pra 13px. O Maestro identificou que a restricao era MINHA, nao um pedido real:
   ele so queria "linha de cima mais larga, linha de baixo com largura boa", nunca que as duas
   linhas dividissem trilha. Correcao: cada fileira e uma grade PROPRIA e independente, cada uma
   com cards do mesmo tamanho dentro de si -- forte ~243px (6 ou 3 colunas), leve ~155px (11 ou
   12 colunas, se tiver Compras). PRECISA que o PHOENIX separe os itens em dois containers na
   marcacao (hoje e um `<section class="kpis">` so, flat) -- pedido feito ao Maestro. Nomes
   sugeridos: `.kpis-fortes` e `.kpis-leves` (+ `.com-compras` quando o 12o item aparecer). */
/* O-022 (ORION 08/09), item 7: o `margin-top` aqui somava DUPLICADO com o gap que ja existe
   entre os filhos de `#relCorpo` (a barra do topo e o `#relCorpo` sao filhos de `.moonOblivion`,
   separados pelo gap dele, --sp-entre-cards:18) -- o resultado eram 2 espacamentos empilhados
   (18 do container + 24 deste margin-top + a propria altura da barra) somando 66px, o "buraco"
   que o Wilker apontou. Eu tinha aceitado o ARGUMENTO da decomposicao como se fosse medida --
   nao era, o resultado na tela e que decide. Removido: o gap do `.moonOblivion` ja basta. */
/* O-018, DOIS MECANISMOS DE ESPACAMENTO, DE PROPOSITO -- NAO SAO CONCORRENTES, NAO UNIFICAR
   (decisao do ALTAIR, 08/09, depois de investigar um alarme falso de "duplicata" aqui do lado):
   `--sp-entre-cards` (18px fixo) -- distancia entre CARDS e entre SECOES: elementos que sao
   irmaos INDEPENDENTES (um card do outro, uma secao da outra). Usado em `.cliCards`, `#relCorpo`
   (via `--sp-entre-secoes`), `#relTops`.
   `calc(var(--card-kpi-h) * .22)` (proporcional, ~16px hoje) -- distancia entre CELULAS de uma
   MESMA fileira de KPI (`.kpis`, `.kpis-fortes`, `.kpis-leves`): partes de um bloco composto so,
   nao objetos independentes. E' o mecanismo que ja RESOLVE o item 8 da O-016 (espacamento
   proporcional ao card) -- reusar esta formula em vez de inventar outra quando a lei da O-018
   for escrita pra outros lugares que precisem de proporcao.
   Se um dia alguem olhar rapido e achar que sao dois valores fazendo a mesma coisa: NAO SAO.
   Confirme o papel (irmaos independentes vs celulas do mesmo bloco) antes de "consertar". */
.moonOblivion .kpis{display:flex;flex-direction:column;
  gap:calc(var(--card-kpi-h) * .22)}
.moonOblivion .kpis-fortes{display:grid;grid-template-columns:repeat(6,1fr);gap:calc(var(--card-kpi-h) * .22)}
/* O-022 (ORION 08/09), item 27, ORDEM DO WILKER ("regra do 50% escuro, 30% de apoio, 20% destaque
   forte", "nao se limita so pra ca nao, pra TUDO que for card"): leitura fixada pelo Maestro e
   PROPORCAO DE TELA, nao opacidade/hierarquia -- metade da superficie continua escura como hoje
   (a maioria dos cards NAO muda), uns 30% ganha tom de apoio, no MAXIMO 20% carrega destaque forte
   (teto, medir sempre). Criterio de QUEM entra: o que PEDE DECISAO OU ACAO (zero em Vendas, saldo
   baixo, tarefa vencida, conta sem dono) -- nunca o que e grande ou bonito.
   TENTATIVA 1 (revertida pelo Maestro): nth-child(4/5/6) na linha forte. Prendia o destaque a
   POSICAO, nao ao SIGNIFICADO -- no dia em que a linha de KPI for reordenada (ja aconteceu uma vez
   nesta obra) o destaque erra de card em silencio, sem quebrar nada visivel. Mesma familia de
   acoplamento silencioso que ja custou caro aqui (`.kpis` com dois papeis, larguras divergentes).
   FIX: classe de PAPEL `.kpiDestaque` decidida por quem MONTA o card (sabe o que o numero
   significa), nao por CSS adivinhando posicao. moon_relatorio.js/moon_google_relatorio.js
   (territorio do PHOENIX) marcam os 3 KPIs de venda com essa classe -- pedido formal, nao
   contorno. Fundo reusa --mo-haze (contraste ja medido ~13,3:1, ver nota de .cri-texto) em degrade
   ate --mo-card, mesmo padrao visual do `.docvDestaque` (linear-gradient 135deg, forte->base). */
.moonOblivion .kpi.kpiDestaque,
/* O-012 passo 2, CORRECAO (ORION 08/09): faltava o par pro molde novo -- eu tinha dito que ja
   existia e estava errado (achado do ALTAIR, medido por ele em nova.css). `.kpi.kpiDestaque`
   so bate na classe ANTIGA; quando a troca 1 substitui `.kpi` por `.card.finKpi`, este seletor
   parava de casar e Qualificados/Visitas/Vendas perdiam o gradiente. Adicionado aqui, MESMO
   efeito, nao um ajustado -- so o par que faltava. */
.moonOblivion .card.finKpi.kpiDestaque,
.moonOblivion .homeCard.cardDestaque{
  background:linear-gradient(135deg,var(--mo-haze),var(--mo-card) 70%);
  border-color:var(--roxo);
}
/* O-022 (ORION 08/09), itens 1+2: alarme de contas + saldo lado a lado na Visao geral. Classe
   propria (nao reusei `.finCliCards`, que e' fileira de KPI PEQUENO -- envolver 2 `.homeCard`
   grandes nela seria a MESMA familia de erro do `.kpis` com dois papeis, so que eu cometendo
   desta vez). Simples: 2 colunas, mesmo gap do resto da tela. */
.moonDuplaCards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-entre-cards)}
.moonOblivion .kpis-leves{display:grid;grid-template-columns:repeat(11,1fr);gap:calc(var(--card-kpi-h) * .22)}
.moonOblivion .kpis-leves.com-compras{grid-template-columns:repeat(12,1fr)}
/* O-020 (ORION 08/09): o Google (moon_google_relatorio.js) tem 10 KPIs leves, fixos, sem
   condicional (apurado pelo PHOENIX no banco -- a fonte do Google so tem conversao agregada,
   nao tem quebra por tipo como o `com-compras` do Meta) -- 8 na conta errada, 10 na de verdade.
   Usar o default (11 colunas, contagem do Meta) deixava coluna vazia, a fileira parava antes do
   fim da tela (o "espaco desnecessario" que o Wilker ja apontou 2x). Mesmo padrao do
   `.com-compras`: modificador por CONTAGEM REAL, nunca herdada de outro arquivo por acidente. */
.moonOblivion .kpis-leves.n10{grid-template-columns:repeat(10,1fr)}
/* O-018/O-020 (ORION 08/09): "Metricas de engajamento" (moon_relatorio.js:564) reusava
   `class="kpis"`, que virou o wrapper flex-column das duas fileiras de peso -- o grid antigo
   (auto-fit, ainda escrito INLINE nessa linha) ficou inerte por baixo de display:flex, e os 5
   cards empilharam um por linha (defeito achado pelo Maestro medindo, nao por erro no console:
   computed style mostrava o grid, mas display:flex nao pinta grid nenhum). Pedido ao PHOENIX:
   trocar a classe dessa secao pra `.kpis-simples` e tirar o `style=` inline (grid-template-
   columns, padding, margin -- tudo migra pra esta regra). 5 itens fixos, cabem numa linha so em
   qualquer largura normal do app (~307px cada em 1537px uteis, medido pelo Maestro). */
.moonOblivion .kpis-simples{display:grid;grid-template-columns:repeat(5,1fr);
  gap:calc(var(--card-kpi-h) * .22);padding:var(--card-pad)}
/* min-width:0 (ORION 08/09): SEM isso, um item de grid usa min-width:auto por padrao -- o
   mesmo bug do .ci-nm (item 3) e do .cliCards.finCliCards, so que em item de grid: conteudo
   largo (valor tipo "R$ 20.354,20") forcava a TRILHA daquela coluna a crescer alem do 1fr
   igual, e os fortes saiam com larguras diferentes entre si (medido: 240/294/238/217/250px em
   vez de todos iguais). QUARTO caso do mesmo padrao hoje (popup, .ci-nm, grid-template-columns
   inline, agora item de grid) -- regra do molde: todo item de grid ou flex que carrega texto de
   largura variavel leva min-width:0, senao o conteudo manda no layout em vez do layout mandar. */
.moonOblivion .kpi{min-width:0;background:var(--mo-card);border:1px solid var(--mo-mist);border-radius:var(--mo-r);padding:var(--card-pad-y) var(--card-pad-x);box-shadow:var(--mo-sh)}
.moonOblivion .kpi .rot{font-size:11px;font-weight:600;color:var(--mo-steel);letter-spacing:.03em;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moonOblivion .kpi .val{font-size:18px;font-weight:680;letter-spacing:-.025em;margin-top:2px;line-height:1.1;font-variant-numeric:tabular-nums}
/* O-016 item 11 (ORION 08/09, 3a rodada): medido pelo Maestro na tela real -- leve em 125px
   (nao 155 como eu estimei sem medir) faltava 4px pro valor mais largo caber em 18px. Autorizado
   subir so ate 16px (o Maestro travou piso em 15). Dois pesos, duas fontes: 18 forte / 16 leve
   e hierarquia de proposito, nao gambiarra. */
.moonOblivion .kpis-leves .kpi .val{font-size:16px}
/* O-022 (ORION 08/09), item 9: "nao precisa, estao apenas ocupando espaco" -- as notas (.pe) da
   fileira leve saem (Wilker: "no link", "vezes por pessoa", "165 leads" nao acrescentavam nada
   que o proprio rotulo+valor ja nao dissessem). SO na leve -- a forte mantem a nota (ex.: "R$
   50,13 investido / 406 leads" da forte carrega contexto real, o Wilker nao pediu tirar aquela).
   Conteudo centralizado nos dois eixos, como pedido. Sem a nota, o card fica mais baixo --
   --card-kpi-h e o gap proporcional sao a ALTURA MEDIDA do card forte (que continua com nota),
   entao nao mexem aqui: a leve so fica com folga sobrando embaixo dela mesma, dentro da propria
   celula, nunca cortando nem esticando o forte. */
.moonOblivion .kpis-leves .kpi{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.moonOblivion .kpis-leves .kpi .rot{justify-content:center}
.moonOblivion .kpis-leves .kpi .pe{display:none}
.moonOblivion .kpi .pe{font-size:11.5px;color:var(--mo-slate);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moonOblivion .kpi.destaque{border-color:rgba(123,104,238,.4);box-shadow:0 0 0 1px rgba(123,104,238,.15),var(--mo-sh-md)}
.moonOblivion .kpi.destaque .val{color:var(--mo-blue)}
/* painel (card) */
.moonOblivion .painel{background:var(--mo-card);border:1px solid var(--mo-mist);border-radius:var(--mo-r);box-shadow:var(--mo-sh);overflow:hidden}
.moonOblivion .painel-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--mo-mist)}
.moonOblivion .painel-top h2{font-size:13.5px;font-weight:650}
.moonOblivion .painel-top .nota{font-size:11.5px;color:var(--mo-steel)}
/* O-020 (ORION 08/09): style inline repetido nos DOIS arquivos (moon_relatorio.js e
   moon_google_relatorio.js -- o Google copiou uma divida que ja existia no Meta, nao criou
   uma nova). `style="gap:6px"` no painel-top dos paineis "Top X" (mais compacto que o padrao
   de 10px): vira modificador, mesmo valor, sem inventar numero novo. */
.moonOblivion .painel-top.compacto{gap:6px}
/* `style="padding:14px 12px 8px"` no wrapper que envolve cabecalho+linhas das tabelas "Top X". */
.moonOblivion .painel-corpo.tabela{padding:14px 12px 8px}
/* `style="padding-bottom:8px"` no wrapper que fecha a lista de linhas antes do fim da secao. */
.moonOblivion .top-corpo{padding-bottom:8px}
/* `style="padding:26px"` (estado vazio central, tela toda) e `style="padding:12px 14px"`
   (estado vazio dentro de uma lista) -- dois contextos, dois valores ja existentes, cada um
   vira modificador do `.vazio` em vez de inline. */
.moonOblivion .vazio.central{padding:26px}
.moonOblivion .vazio.lista{padding:12px 14px}
/* `style="margin:12px 14px"` (aviso "ruim" fora do fluxo normal de painel, precisa de margem
   lateral alem da margin-bottom que o `.aviso` ja tem por padrao) e a variante com
   `margin-top:8px;width:100%` de um dos avisos. */
.moonOblivion .aviso.independente{margin:12px 14px}
.moonOblivion .aviso.topo{margin-top:8px;width:100%}
/* tabela */
.moonOblivion .rolo{overflow-x:auto}
.moonOblivion table{width:100%;border-collapse:collapse}
.moonOblivion th{font-size:11px;font-weight:650;color:var(--mo-steel);text-transform:uppercase;letter-spacing:.05em;text-align:right;padding:9px 14px;border-bottom:1px solid var(--mo-mist);white-space:nowrap;background:var(--mo-white)}
.moonOblivion th:first-child{text-align:left}
.moonOblivion td{padding:11px 14px;border-bottom:1px solid var(--mo-mist);text-align:right;white-space:nowrap;font-size:13.5px}
.moonOblivion td:first-child{text-align:left}
.moonOblivion tbody tr:last-child td{border-bottom:none}
.moonOblivion tbody tr:hover{background:rgba(255,255,255,.04)}
.moonOblivion .cli{display:flex;align-items:center;gap:9px}
.moonOblivion .ini{width:27px;height:27px;border-radius:7px;background:var(--mo-haze);color:var(--mo-blue);display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 27px}
.moonOblivion .cli .n{font-weight:600;color:var(--mo-graphite)}
.moonOblivion .cli .p{font-size:11.5px;color:var(--mo-steel);font-weight:400}
.moonOblivion .pill{display:inline-block;font-size:11px;font-weight:650;padding:2px 8px;border-radius:20px}
.moonOblivion .pill.ok,
.moonOblivion .finPillPaga{background:var(--mo-ok-bg);color:var(--mo-ok)}
.moonOblivion .pill.warn,
.moonOblivion .finPillPendente{background:var(--mo-warn-bg);color:var(--mo-warn)}
.moonOblivion .pill.bad,
.moonOblivion .finPillVencida{background:var(--mo-bad-bg);color:var(--mo-bad)}
.moonOblivion .pill.neutro{background:var(--mo-fog);color:var(--mo-steel)}
.moonOblivion .vazio{color:var(--mo-steel);font-style:italic;font-size:12.5px}
.moonOblivion .forte{font-weight:650}
/* aviso (banner) */
/* ORION 06/09: faltava o `margin-bottom:16px` do app.css (263). Sem ele dois
   avisos seguidos ficam com folga ZERO -- medido no navegador, colados um no
   outro, que e o defeito que o Wilker reprovou hoje. Reposto igual ao
   Oblivion, sem inventar: la ele tambem convive com o gap:14 do .corpo, e a
   folga resultante entre um aviso e a faixa seguinte e 30px. E o que ele viu
   na prova, entao e o que fica. */
.moonOblivion .aviso{display:flex;gap:11px;align-items:flex-start;padding:12px 15px;border-radius:var(--mo-r);font-size:13px;line-height:1.5;margin-bottom:16px}
.moonOblivion .aviso b{font-weight:700}
.moonOblivion .aviso.bom{background:var(--mo-ok-bg);color:var(--mo-ok);border-left:3px solid var(--mo-ok)}
.moonOblivion .aviso.ruim{background:var(--mo-bad-bg);color:var(--mo-bad);border-left:3px solid var(--mo-bad)}
.moonOblivion .aviso.info{background:var(--mo-haze);color:var(--mo-navy);border-left:3px solid var(--mo-electric)}
.moonOblivion .aviso a{color:inherit;font-weight:650;text-decoration:underline}
/* nav de abas + selects, dentro do escopo claro */
/* O-016 (ORION 08/09): padding lateral igualado ao padrao do resto do app (base .homeAbas,
   nova.css:366, usa 18px) -- dentro do Moon estava em 14px, menor que em qualquer outra tela,
   por isso lia como colado na borda mesmo com o divisor certo do lado direito. */
/* O-022 (ORION 08/09), item 2: reincidente -- "as letras ainda nao estao centralizadas". A
   fileira nunca tinha `align-items`, entao ficava no `stretch` padrao do flex: as abas (texto
   simples) e o bloco de filtros (botoes/dropdown, altura diferente) esticavam pra mesma altura
   da linha mas o TEXTO dentro de cada um nao ficava centralizado verticalmente no proprio
   espaco esticado. `align-items:center` resolve na raiz, nao remendando cada filho. */
/* O-082 (14/09): o 18px acima virou o DESALINHO -- `#moonAbasNav` e FILHO de `.moonOblivion`
   (agora 28px), nao irmao como `#cliAbasNav`/`#empAbasNav` (ver a dupla documentacao em
   nova.css:433 sobre os dois casos opostos). Filho de quem ja paga CEDE, nao soma -- lei do
   O-080. Zero aqui, sem herdar o 18px generico da regra base (`.homeAbas`, nova.css:432).
   ARMADILHA (achada pelo ALTAIR antes de eu escrever, registrando pra nao se perder): o proprio
   elemento nasce com `style="padding-right:18px"` INLINE (nova.js:7652) -- inline SEMPRE ganha
   de CSS externo pra essa propriedade especifica, entao por mais que este seletor escreva
   `padding-right`, o navegador vai obedecer o inline e manter 18px do lado direito. NAO E BUG:
   o lado direito nunca foi o problema (a queixa e alinhamento da ESQUERDA com o conteudo abaixo,
   o direito so' da respiro pro `#moonFiltros` que fica colado no fim da fileira via
   `margin-left:auto`) -- fica assimetrico de proposito (0 esquerda, 18 direita), nao editei o
   inline porque mexer nele e escopo diferente (o direito nunca foi reclamado). */
/* O-108 (ORION, 16/09), lei do Wilker: superficie com fundo/borda nunca encosta conteudo na
   propria borda, respiro simetrico. `padding:6px 0 0` zerava o esquerdo de proposito na O-082
   (componente cede ao pai, `.moonOblivion` ja paga 28px por fora) -- duas leis colidindo no mesmo
   elemento (ver [[reference_duas_leis_no_mesmo_elemento]]): a lei do ALINHAMENTO externo (ceder ao
   pai) venceu sozinha, sem confrontar a lei da SUPERFICIE (respiro interno), que tambem se aplica
   porque este elemento TEM fundo/borda proprios (`background:var(--mo-card)`, raio arredondado).
   As duas continuam validas ao mesmo tempo: o ALINHAMENTO por fora com o conteudo abaixo (nao
   muda, a barra continua comecando no mesmo x que os cards) e o RESPIRO por dentro (novo, 14px --
   medido ao vivo no card "Meta Ads" logo abaixo: borda 1px + `var(--card-pad-x)` 13px = 14px do
   canto externo do card ate o texto; a barra nao tem essa borda esquerda, entao usa 14px direto
   em vez do token puro, pra bater no MESMO pixel, nao so' no mesmo nome de variavel). */
.moonOblivion .homeAbas{background:var(--mo-card);border-bottom:1px solid var(--mo-mist);border-radius:var(--mo-r) var(--mo-r) 0 0;padding:6px 0 0 14px;align-items:center}
.moonOblivion .homeAba{color:var(--mo-steel);font-weight:600;font-size:13px}
.moonOblivion .homeAba.ativa{color:var(--mo-blue);border-bottom-color:var(--mo-blue)}
/* separa visualmente as abas dos filtros de periodo/plataforma (#moonFiltros, ver nova.js
   ~6644): divisor fino. O-016: primeira tentativa (--mo-mist, 1px) nao ficou visivel o
   suficiente na tela real -- subiu pra --borda-3 (mais opaco) com folga maior dos dois
   lados, sem virar espaco vazio (a folga entra no proprio calculo do divisor, nao soma). */
.moonOblivion #moonFiltros{border-left:1px solid var(--borda-3);padding-left:16px;margin-left:4px}
.moonOblivion select.ntCampo,.moonOblivion input.ntCampo{background:var(--mo-white);border:1px solid var(--mo-mist);color:var(--mo-graphite);border-radius:8px}
.moonOblivion .mini{color:var(--mo-steel)}
.moonOblivion .moonLink{color:var(--mo-blue)}
/* barra de investimento por dia (bars ficam roxas por padrao no resto do app -- aqui viram azul) */
.moonOblivion .moonBarra{fill:var(--mo-electric)}
.moonOblivion .moonBarra:hover{fill:var(--mo-blue)}
.moonOblivion .moonBarra.moonBarraPico{fill:var(--mo-bronze)}
.moonOblivion .moonPicoLabel{color:var(--mo-bronze-d)}
.moonOblivion .moonEixoLabel{color:var(--mo-steel)}
.moonOblivion .moonGraficoRodape{color:var(--mo-steel)}
.moonOblivion .moonValorLabel{color:var(--mo-slate)}

/* ══════════════════════════════════════════════════════════════════════════
   ESCOPO OBLIVION -- COMPLEMENTO           (ORION, ordem do ALTAIR, 06/09)

   Continua o bloco acima. O rascunho cobria kpi/painel/tabela/pill/aviso;
   aqui entra o RESTO do app.css do Oblivion mais os tres componentes proprios
   (dropdown, periodo personalizado, busca com autocomplete), porque o Wilker
   reprovou controle nativo em tela -- nenhum <select> e nenhum
   <input type=date> daqui pra frente.

   FONTE DA VERDADE: Oblivion-Front/assets/css/app.css. Cada bloco cita a
   linha de onde saiu. O tokens.css NAO entra: nao e carregado por nenhum .php
   do Oblivion (grep: zero), e o tema escuro dele a aplicacao real nunca usa.
   Onde os dois divergem (--ob-fog #E4E6EA la contra --fog #EFF1F4 no app.css),
   vale o app.css, que e o que pinta na tela que o Wilker viu.

   PREFIXO --mo-: mantido o do rascunho. Nao e enfeite -- dois nomes do
   Oblivion colidem com o Nova e um quebra em silencio: `--sidebar` e COR no
   Nova (#17171b) e LARGURA no Oblivion (248px); `--r` e 8px aqui e 10px la.
   Valor identico ao do Oblivion, so o nome muda.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- base: o que o Oblivion poe no body/button/a (app.css 70-80) --------- */
.moonOblivion button,.moonOblivion input,.moonOblivion textarea,.moonOblivion table{
  font-family:var(--mo-fonte);font-feature-settings:'cv05' 1,'cv08' 1,'ss03' 1;
  letter-spacing:-0.011em}
.moonOblivion button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.moonOblivion a{color:inherit;text-decoration:none}
.moonOblivion :focus-visible{outline:2px solid var(--mo-electric);outline-offset:2px;border-radius:6px}
/* rotulo em caixa-alta espacada (app.css 50). O .kpi .rot redefine peso e
   espaco por cima -- de proposito, e assim no Oblivion. */
.moonOblivion .rot{font-weight:700;letter-spacing:.07em}

/* Existia aqui `.moonOblivion .corpo{...gap:14px}`, orfao do port original do Oblivion --
   `class="corpo"` nunca apareceu em nenhuma marcacao do app (confirmado por grep em todo o
   front). Gerou alarme falso de "fix morto" (achado de duplicata que na verdade eram dois
   seletores diferentes -- `.moonOblivion` puro, o de verdade, x este). Removido em 08/09. */

/* ---- RADAR: faixa de alerta ambar do topo (app.css 140-144) ------------- */
.moonOblivion .radar{display:flex;align-items:center;gap:13px;background:var(--mo-warn-bg);
  border:1px solid rgba(255,176,32,.3);border-left:3px solid var(--mo-warn);
  border-radius:var(--mo-r);padding:12px 15px}
.moonOblivion .radar svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--mo-warn);fill:none;
  stroke-width:1.8;stroke-linecap:round}
.moonOblivion .radar b{font-weight:650}
.moonOblivion .radar .txt{font-size:13px;color:#ffd9a0;line-height:1.45}
.moonOblivion .radar a{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--mo-warn);
  white-space:nowrap;border-bottom:1px solid rgba(255,176,32,.45);cursor:pointer}

/* ---- KPI: o que faltava do card (app.css 152,157-158) ------------------- */
.moonOblivion .kpi .val.falta{color:var(--mo-steel);font-size:19px;font-weight:600}
.moonOblivion .kpi .pe .up{color:var(--mo-ok);font-weight:650}
.moonOblivion .kpi .pe .down{color:var(--mo-bad);font-weight:650}

/* ---- GRADE e o resto do painel (app.css 163-175) ------------------------ */
/* O-016 itens 9/16 (ORION 08/09): 430px fixo pro funil sobrava largura (metade esquerda com
   conteudo, direita e embaixo vazias). max-content deixa a coluna do funil do tamanho real do
   proprio conteudo (os degraus + rotulos), nunca mais largo por preguica de medir. A ALTURA
   continua igualada ao grafico por align-items:stretch (ja existia, mantido -- e o que faz o
   funil mais estreito ficar tao alto quanto o card do grafico ao lado, "harmonico" como pedido). */
.moonOblivion .grade{display:grid;grid-template-columns:1fr max-content;gap:var(--sp-entre-cards);align-items:stretch}
/* ORION (08/09): regra pra ANTES do PHOENIX montar o relatorio do Google -- o Maestro decidiu
   que o funil pode nao existir la (Google so tem contagem, nao trajetoria de lead; funil de 5
   degraus em cima de 1 numero seria inventar profundidade que nao existe). Paridade visual e
   gramatica de card/espacamento/tipografia, NAO obrigacao do mesmo bloco existir em toda tela.
   Esta regra faz o grafico ocupar a largura INTEIRA, sozinho e reto, quando o vizinho (funil)
   simplesmente nao estiver no HTML -- sem style inline, sem media improvisada por quem monta a
   tela. Se o funil existir (mesmo um de 2 degraus), a regra de cima (1fr max-content) continua
   valendo normalmente. */
.moonOblivion .grade:has(> :only-child){grid-template-columns:1fr}
/* os dois paineis tem altura natural diferente (grafico fixo, funil cresce);
   sem isto um flutua mais curto que o outro e a linha visual quebra */
.moonOblivion .grade>.painel{display:flex;flex-direction:column}
.moonOblivion .grade>.painel>.painel-corpo{flex:1;display:flex;flex-direction:column;justify-content:center}
@media (max-width:1180px){.moonOblivion .grade{grid-template-columns:1fr}}
.moonOblivion .painel-top .acao{margin-left:auto;font-size:12px;font-weight:600;color:var(--mo-blue);cursor:pointer}

/* ---- FAIXA de numeros dentro do painel (app.css 339-343) ---------------- */
.moonOblivion .faixa{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding:7px 14px}
.moonOblivion .faixa .it{display:flex;align-items:baseline;gap:7px}
.moonOblivion .faixa .rot{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--mo-steel)}
.moonOblivion .faixa b{font-size:14.5px;font-variant-numeric:tabular-nums}
.moonOblivion .faixa .obs{font-size:11.5px;color:var(--mo-steel)}

/* ---- BARRA de proporcao dentro da celula (app.css 198-200) -------------- */
.moonOblivion .barra{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.moonOblivion .barra .t{height:3px;width:56px;background:var(--mo-mist);border-radius:2px;overflow:hidden}
.moonOblivion .barra .t i{display:block;height:100%;border-radius:2px;background:var(--mo-electric)}

/* ---- LISTA lateral do painel (app.css 203-210) -------------------------- */
/* COLISAO DE NOME, achada por mim em 06/09: `.lista` existe nos DOIS mundos.
   No Nova e a linha de cliente da barra lateral (height:28px, padding-left:41px,
   gap:8, fonte 14, cor --tinta-2, cursor pointer, raio 7). No Oblivion e o
   painel de lista do "Ultimos leads". Declarar so display/flex-direction deixava
   a linha do Nova entrar por baixo: o painel herdava os 28px de altura e a
   calha de 41px. Nao explodia porque nada esta com overflow:hidden -- ou seja,
   passaria em print e quebraria depois. Aqui a heranca morre inteira. */
.moonOblivion .lista{display:flex;flex-direction:column;
  height:auto;padding:0;gap:0;border-radius:0;cursor:auto;
  font-size:inherit;color:inherit}
.moonOblivion .lista:hover{background:none}
.moonOblivion .linha{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;
  border-bottom:1px solid var(--mo-mist)}
.moonOblivion .linha:last-child{border-bottom:none}
.moonOblivion .ponto{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:0 0 7px}
.moonOblivion .ponto.b{background:var(--mo-electric)}
.moonOblivion .ponto.o{background:var(--mo-bronze)}
.moonOblivion .ponto.v{background:var(--mo-ok)}
.moonOblivion .ponto.r{background:var(--mo-bad)}
.moonOblivion .linha .c{font-size:12.8px;line-height:1.45}
.moonOblivion .linha .c b{font-weight:650}
.moonOblivion .linha .q{font-size:11px;color:var(--mo-steel);margin-top:2px}
.moonOblivion .origem{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mo-steel);background:var(--mo-fog);padding:1px 5px;border-radius:4px}

/* ---- BOTOES (app.css 253-260) ------------------------------------------ */
.moonOblivion .btn{font:inherit;font-size:13px;font-weight:650;padding:9px 18px;
  border:1px solid transparent;border-radius:8px;cursor:pointer;
  transition:background .12s,border-color .12s}
.moonOblivion .btn.primario{background:var(--mo-blue);color:#fff}
.moonOblivion .btn.primario:hover{background:var(--mo-blue-h)}
.moonOblivion .btn.neutro{background:var(--mo-white);color:var(--mo-slate);border-color:var(--mo-mist)}
.moonOblivion .btn.neutro:hover{border-color:var(--mo-steel);color:var(--mo-graphite)}
.moonOblivion .btn.risco{background:var(--mo-white);color:var(--mo-bad);border-color:rgba(229,72,77,.35)}
.moonOblivion .btn.risco:hover{background:var(--mo-bad-bg)}
.moonOblivion .btn.mini{font-size:11.5px;padding:5px 11px;border-radius:7px}
/* estado desabilitado: o Oblivion nunca desabilita um .btn (os forms dele
   validam no servidor), entao nao ha o que copiar. Aqui o "Aplicar periodo"
   nasce desligado ate haver inicio E fim escolhidos, e precisa de um estado.
   Segue o mesmo gesto que o Oblivion usa em campo desabilitado (app.css 246):
   perde forca e perde o cursor de clique. */
.moonOblivion .btn:disabled{opacity:.45;cursor:default}
.moonOblivion .btn.primario:disabled:hover{background:var(--mo-blue)}

/* ---- CAMPO: rotulo + entrada (app.css 234-251) --------------------------
   O `.campo select` do Oblivion NAO vem: controle nativo esta proibido. Quem
   faz esse papel e o .combo, logo abaixo. */
.moonOblivion .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px 14px}
.moonOblivion .campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.moonOblivion .campo.largo{grid-column:1/-1}
.moonOblivion .campo label{font-size:11.5px;font-weight:650;color:var(--mo-slate);letter-spacing:.01em}
.moonOblivion .campo label i{font-style:normal;color:var(--mo-steel);font-weight:500}
.moonOblivion .campo input,.moonOblivion .campo textarea{
  width:100%;font:inherit;font-size:13.5px;color:var(--mo-graphite);background:var(--mo-white);
  border:1px solid var(--mo-mist);border-radius:8px;padding:9px 11px;
  transition:border-color .12s,box-shadow .12s}
.moonOblivion .campo textarea{resize:vertical;min-height:66px}
.moonOblivion .campo input:focus,.moonOblivion .campo textarea:focus{
  outline:none;border-color:var(--mo-electric);box-shadow:0 0 0 3px rgba(150,131,255,.28)}
.moonOblivion .campo input:disabled{background:var(--mo-fog);color:var(--mo-steel)}
.moonOblivion .campo .dica{font-size:11px;color:var(--mo-steel);line-height:1.45}
.moonOblivion .acoes{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:15px;
  border-top:1px solid var(--mo-fog)}
.moonOblivion .acoes .nota{font-size:11.5px;color:var(--mo-steel);line-height:1.45}

/* ---- LINHA-TOPO: a fileira do cabecalho (app.css 623-631, 719-720) -------
   Barra de topo padrao do Oblivion, usada tambem em agenda/orion/pipeline.
   O `.linha-topo select` do Oblivion nao vem, pelo mesmo motivo do .campo. */
.moonOblivion .linha-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.moonOblivion .linha-topo .nota{font-size:12.5px;color:var(--mo-steel)}
.moonOblivion .linha-topo > .combo{width:auto;flex:0 0 auto;max-width:230px}
.moonOblivion .linha-topo > .combo .combo-btn{width:100%;padding:8px 11px;font-size:13px;min-width:170px}
.moonOblivion .linha-topo > .combo .combo-pop{min-width:290px}
/* na ponta direita da fileira, painel ancorado a esquerda sai da tela */
.moonOblivion .linha-topo > .perbox:last-child .perpanel{left:auto;right:0;min-width:300px}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTE 1 -- DROPDOWN (perbox / perbtn / perpanel / peropt)
   Copia de app.css 578-621 e 707-715. Substitui o <select> nativo.
   Comportamento em oblivion-ui.js, portado do JS do _layout.php: um painel
   por vez, fecha no Esc e no clique fora.
   DIFERENCA DE MARCACAO, nao de desenho: no Oblivion cada opcao e um <a> com
   URL pronta, porque la a troca recarrega a pagina. Aqui e um <button>, porque
   o Nova nao navega -- a escolha vira evento. O pixel e o mesmo.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   .andCombo -- combo com busca do escopo .moonOblivion (O-046, ORION 13/09).
   FONTE UNICA de verdade: ate' aqui, este bloco vivia DUPLICADO byte a byte em
   `andares_merkurius.js` e `andares_pipeline.js` (dois <style> injetados via
   JS, cada modulo com o proprio `garantirCss()`). A duplicacao foi registrada
   como divida na O-040 ("mexeu num, mexe no outro") -- o Wilker relatou a
   BARRA SOBREPOSTA numa maquina que a nossa nao reproduzia, e em vez de gastar
   tempo provando qual das duas copias "ganhava" em qual ordem de carregamento,
   a causa raiz (duas fontes pra' mesma verdade) foi ELIMINADA: movida pra' CA,
   pra' `nova.css`, que carrega uma unica vez via <link> no <head>, ANTES de
   qualquer <script> rodar -- nao existe mais "qual modulo carregou primeiro"
   pra' este CSS, porque nao ha' mais copia nenhuma disputando. Os dois modulos
   continuam usando as MESMAS classes (`.andCombo`/`.andComboBtn`/etc), so' que
   agora consomem uma fonte so'. NAO reintroduza este bloco em nenhum dos dois
   arquivos JS -- se precisar mudar o visual do combo, muda AQUI, uma vez. */
.moonOblivion .andCombo{position:relative}
/* CORRECAO (O-046 rodada 3, ORION 13/09): mesmo par pai-flexivel/filho-rigido do `.perbtn` acima,
   achado ao varrer o padrao inteiro. `overflow:hidden` aqui e' a rede de seguranca -- quando o
   `.andCombo` (pai) encolhe mais do que `.andComboTxt` truncado + `.andComboQt` cabem, o conteudo
   nao pinta mais pra fora, so' fica sem espaco pro contador (`flex-shrink:0` no Qt da prioridade
   pro nome truncar primeiro, ele e' o ultimo a ceder).
   CORRECAO (O-046 rodada 4, ORION 13/09): mesmo com tudo isso, `.andComboBtn` continuava vazando
   ~9px pra fora do proprio `.andCombo` em telas apertadas. Investiguei "widget nativo" primeiro
   (`appearance:auto` de `<button>`) e ERREI o diagnostico -- testei `appearance:none` e o vazamento
   nao mudou nada. A causa real, achada forcando `width:5px !important` direto no elemento (nem
   isso encolheu): `box-sizing:border-box` NUNCA deixa a caixa ficar menor que o proprio
   padding+borda (aqui, 6px+6px padding horizontal computado + 1px+1px borda = ~22px) -- isso e'
   matematica de caixa, nao regra CSS perdendo pra outra; nao tem `width` que vence, o conteudo
   viraria negativo. Ou seja: `.andComboBtn` tem um piso IRREDUTIVEL de ~22px que nunca apareceu
   em nenhum computed style. O erro de verdade nao era aqui -- era o pai (`.andCombo`, embaixo,
   `.andBarraFiltro>.andCombo`) ter `min-width:0`, um piso que o proprio filho, so' com padding e
   borda, ja nao consegue respeitar. Fix real: `.andCombo` ganhou um piso medido (perto do
   `.andComboBtn` na pratica), igual o `.perbox` ja tinha o dele -- ver o comentario la'. */
.moonOblivion .andComboBtn{font:inherit;font-size:12.5px;padding:6px 10px;border-radius:8px;
  border:1px solid var(--mo-mist);background:var(--mo-white);color:var(--mo-graphite);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;max-width:210px;overflow:hidden}
.moonOblivion .andComboBtn .andComboTxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.moonOblivion .andComboBtn .andComboQt{opacity:.6;font-size:11px;flex-shrink:0}
.moonOblivion .andComboPop{position:absolute;top:calc(100% + 4px);left:0;z-index:40;
  width:260px;max-height:320px;overflow:auto;background:var(--mo-card);border:1px solid var(--mo-mist);
  border-radius:var(--mo-r);box-shadow:var(--mo-sh-md)}
.moonOblivion .andComboBusca{padding:8px;position:sticky;top:0;background:var(--mo-card);
  border-bottom:1px solid var(--mo-mist)}
.moonOblivion .andComboBusca input{width:100%;font:inherit;font-size:12.5px;padding:6px 8px;
  border-radius:7px;border:1px solid var(--mo-mist);background:var(--mo-white)}
.moonOblivion .andComboBusca input:focus{outline:none;border-color:var(--mo-electric)}
.moonOblivion .andComboItem{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;
  font-size:12.5px;color:var(--mo-graphite);cursor:pointer}
.moonOblivion .andComboItem:hover{background:var(--mo-fog)}
.moonOblivion .andComboItem.sel{font-weight:650;color:var(--mo-blue)}
.moonOblivion .andComboQtd{color:var(--mo-steel);font-size:11.5px}
.moonOblivion .andComboVazio{padding:10px;font-size:12px;color:var(--mo-steel)}
.moonOblivion .perbox{position:relative;display:inline-block}
/* CORRECAO (O-046 rodada 3, ORION 13/09): `overflow:hidden` aqui e' a rede de seguranca que
   fecha a familia inteira "pai flexivel, filho rigido" pra este componente, em vez de perseguir
   filho por filho. Achado assim: com `.perbtn{width:100%;min-width:0}` (rodada 1) a caixa do
   botao ja seguia certo o `.perbox` encolhido -- mas o CONTEUDO de dentro (`.rot`, o rotulo; a
   `svg.seta`, a setinha) continuava com piso PROPRIO (flex item sem `min-width:0` = nao encolhe
   abaixo do conteudo). Quando o `.perbox` aperta mais do que esse piso interno aguenta, o
   navegador nao erra o layout -- ele so' deixa o conteudo excedente PINTAR PRA FORA da caixa
   (comportamento padrao de `overflow:visible`), sobre o vizinho. Sem isso, cada filho novo que
   alguem adicionar dentro do botao (rotulo, contador, icone) e' um convite a repetir o mesmo
   defeito. Com `overflow:hidden` o filho pode ate' nao caber -- ele so' nunca mais pinta fora.
   Mesmo raciocinio e mesmo fix em `.andComboBtn` abaixo. NOTA (rodada 4): `.perbtn` tem
   `min-width:172px` proprio (embaixo) -- ele NUNCA precisa encolher perto do piso irredutivel
   de padding+borda do proprio `<button>` (~24px aqui), entao o defeito que apareceu no
   `.andComboBtn` (ver comentario la', `.andCombo` sem piso proprio) nao se repete aqui. Fica
   registrado o PORQUE de nao precisar do mesmo fix, nao por esquecimento. */
.moonOblivion .perbtn{display:flex;align-items:center;gap:9px;padding:8px 12px;min-width:172px;
  background:var(--mo-white);border:1px solid var(--mo-mist);border-radius:9px;
  font-size:13px;color:var(--mo-graphite);box-shadow:var(--mo-sh);overflow:hidden;
  transition:border-color .13s,box-shadow .13s}
.moonOblivion .perbtn:hover{border-color:var(--mo-mist-hover)}
.moonOblivion .perbox.aberto .perbtn{border-color:var(--mo-electric);box-shadow:0 0 0 3px rgba(150,131,255,.28)}
.moonOblivion .perbtn svg:first-child{color:var(--mo-blue);flex:0 0 14px}
/* o .rot global e caixa-alta espacada; dentro do botao ele e so o rotulo do
   periodo -- por isso o proprio Oblivion redeclara peso e espacamento aqui. `min-width:0` +
   `overflow:hidden` + `text-overflow:ellipsis` (O-046 rodada 3) pra truncar com reticencias em
   vez de depender so' do corte cru do `.perbtn` pai -- mesma logica do `.andComboTxt`. */
.moonOblivion .perbtn .rot{font-weight:550;white-space:nowrap;letter-spacing:normal;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.moonOblivion .perbtn .n{margin-left:auto;color:var(--mo-steel);font-size:12.5px;
  font-variant-numeric:tabular-nums}
.moonOblivion .perbtn .seta{color:var(--mo-steel);flex:0 0 13px;transition:transform .16s}
.moonOblivion .perbox.aberto .perbtn .seta{transform:rotate(180deg)}

.moonOblivion .perpanel{position:absolute;top:calc(100% + 7px);left:0;z-index:80;
  min-width:262px;padding:6px;
  background:var(--mo-white);border:1px solid var(--mo-mist);border-radius:11px;
  box-shadow:0 16px 44px rgba(0,0,0,.5)}
.moonOblivion .perpanel[hidden]{display:none}

.moonOblivion .peropt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--mo-graphite);
  cursor:pointer;transition:background .12s}
.moonOblivion .peropt span{flex:1;white-space:nowrap}
.moonOblivion .peropt b{color:var(--mo-steel);font-weight:600;font-size:12.5px;
  align-self:center;font-variant-numeric:tabular-nums}
/* .ativo e o MESMO realce do :hover, para a navegacao por seta do teclado --
   nao e cor nova, e o var(--mo-haze) que o Oblivion ja usa no hover */
.moonOblivion .peropt:hover,.moonOblivion .peropt.ativo{background:var(--mo-haze)}
.moonOblivion .peropt.on{background:var(--mo-blue);color:#fff;font-weight:600}
.moonOblivion .peropt.on b{color:rgba(255,255,255,.82)}
.moonOblivion .peropt small{display:block;font-size:11px;font-weight:400;color:var(--mo-steel);
  margin-top:2px;white-space:nowrap}
.moonOblivion .peropt.on small,.moonOblivion .peropt:hover small{color:inherit;opacity:.75}

.moonOblivion .percustom{margin-top:6px;padding:13px 12px 12px;
  border-top:1px solid var(--mo-mist);display:flex;flex-direction:column;gap:5px}
.moonOblivion .percustom .tit{font-size:13px;color:var(--mo-slate);margin-bottom:5px}
.moonOblivion .percustom label{font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--mo-steel);text-transform:none;margin-top:4px}
.moonOblivion .percustom .btn{margin-top:11px;width:100%;justify-content:center;padding:9px}
.moonOblivion .pernota{font-size:12.5px;color:var(--mo-steel);white-space:nowrap}
.moonOblivion .pernota-pe{padding:9px 12px 4px;font-size:11px;color:var(--mo-steel);
  border-top:1px solid var(--mo-mist);margin-top:5px}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTE 2 -- COMBO com busca (app.css 270-303)
   O dropdown de lista longa do Oblivion: botao + campo de busca + lista. E o
   "trocar de cliente" do Pipeline e do relatorio de conta -- o proprio PHP diz
   que e o mesmo componente. Serve tambem de base pro campo de busca com
   autocomplete, mais abaixo.
   ══════════════════════════════════════════════════════════════════════════ */
.moonOblivion .combo{position:relative;display:inline-block;width:100%}
.moonOblivion .combo-btn{display:flex;align-items:center;gap:8px;width:100%;font:inherit;
  font-size:13.5px;color:var(--mo-graphite);background:var(--mo-white);
  border:1px solid var(--mo-mist);border-radius:8px;padding:9px 11px;cursor:pointer;
  text-align:left;transition:border-color .12s,box-shadow .12s}
.moonOblivion .combo-btn:hover{border-color:var(--mo-steel)}
.moonOblivion .combo.aberto .combo-btn{border-color:var(--mo-electric);box-shadow:0 0 0 3px rgba(150,131,255,.28)}
.moonOblivion .combo-btn .cb-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moonOblivion .combo-btn .cb-qt{font-size:11.5px;color:var(--mo-steel);font-variant-numeric:tabular-nums}
.moonOblivion .combo-btn svg{width:14px;height:14px;flex:0 0 14px;stroke:var(--mo-steel);fill:none;
  stroke-width:2.2;stroke-linecap:round}

.moonOblivion .combo-pop{display:none;position:absolute;z-index:40;top:calc(100% + 5px);left:0;
  min-width:100%;max-width:340px;background:var(--mo-white);border:1px solid var(--mo-mist);
  border-radius:10px;box-shadow:var(--mo-sh-md);overflow:hidden}
.moonOblivion .combo.aberto .combo-pop{display:block}
.moonOblivion .combo-busca{padding:9px;border-bottom:1px solid var(--mo-fog)}
.moonOblivion .combo-busca input{width:100%;font:inherit;font-size:13px;padding:7px 10px;
  border:1px solid var(--mo-mist);border-radius:7px;color:var(--mo-graphite);background:var(--mo-white)}
.moonOblivion .combo-busca input:focus{outline:none;border-color:var(--mo-electric)}
.moonOblivion .combo-lista{max-height:290px;overflow:auto;padding:4px}
.moonOblivion .combo-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  border-radius:7px;font-size:13.5px;color:var(--mo-graphite);cursor:pointer;
  text-decoration:none;background:none;border:none;text-align:left}
.moonOblivion .combo-item:hover,.moonOblivion .combo-item.ativo{background:var(--mo-haze)}
.moonOblivion .combo-item.sel{background:var(--mo-blue);color:#fff}
.moonOblivion .combo-item.sel .ci-qt{color:rgba(255,255,255,.75)}
/* O-016 item 3 (ORION 08/09): faltava min-width:0. `flex:1` SEM min-width:0 usa min-width:auto
   por padrao -- o item nunca encolhe abaixo do proprio conteudo, entao overflow/ellipsis nunca
   entra em acao e o nome comprido empurra o `.combo-item` inteiro, quebrando o alinhamento com
   `.ci-qt` (que tambem precisava de flex:0 0 auto pra nao ser espremido pelo nome). */
.moonOblivion .combo-item .ci-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moonOblivion .combo-item .ci-qt{flex:0 0 auto;margin-left:6px;font-size:11.5px;color:var(--mo-steel);font-variant-numeric:tabular-nums}
.moonOblivion .combo-vazio{padding:14px 12px;font-size:12.5px;color:var(--mo-steel);text-align:center}
.moonOblivion .combo-sep{height:1px;background:var(--mo-fog);margin:5px 0}
.moonOblivion .combo-custom{padding:10px 11px 12px}
.moonOblivion .combo-custom .ct{font-size:11.5px;font-weight:650;color:var(--mo-slate);margin-bottom:7px}
.moonOblivion .combo-custom .btn{margin-top:9px;width:100%}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTE 3 -- CALENDARIO / PERIODO PERSONALIZADO (.obcal)
   Substitui os dois <input type=date> que o Oblivion usa dentro do
   .percustom -- o Wilker reprovou o picker nativo do Windows hoje.

   HONESTIDADE SOBRE A FONTE: o Oblivion NAO tem calendario proprio. Entao
   aqui nao ha de onde copiar um. O que fiz foi montar o calendario SO com as
   primitivas dele, nada inventado:
     celula selecionada .......... .peropt.on   (fundo --mo-blue, texto #fff, 600)
     celula sob o mouse .......... .peropt:hover (fundo --mo-haze)
     raio da celula .............. 8px, o mesmo do .peropt
     dia fora do mes ............. --mo-steel, o terciario do Oblivion
     dia de hoje ................. anel --mo-electric, a cor de foco/selecao dele
     cabecalho dos dias .......... .faixa .rot (10.5px / 700 / .07em / steel)
     rodape e botao .............. .percustom + .btn.primario
   A UNICA medida sem origem no Oblivion e a altura da celula (32px): ela sai
   da largura do painel -- 262px de min-width menos 12 de calha, dividido por 7
   colunas, da ~35px, e 32 mantem a celula quadrada com folga de 2px de gap.
   ══════════════════════════════════════════════════════════════════════════ */
.moonOblivion .obcal{padding-top:2px}
.moonOblivion .obcal-top{display:flex;align-items:center;gap:8px;padding:0 2px 8px}
.moonOblivion .obcal-mes{flex:1;text-align:center;font-size:13px;font-weight:650;
  color:var(--mo-graphite);text-transform:capitalize}
.moonOblivion .obcal-nav{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;
  place-items:center;color:var(--mo-steel);transition:background .12s,color .12s}
.moonOblivion .obcal-nav:hover{background:var(--mo-haze);color:var(--mo-blue)}
.moonOblivion .obcal-nav svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.moonOblivion .obcal-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.moonOblivion .obcal-sem span{font-size:10.5px;font-weight:700;letter-spacing:.07em;
  color:var(--mo-steel);text-align:center;padding:4px 0}
.moonOblivion .obcal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.moonOblivion .obcal-dia{height:32px;border-radius:8px;font-size:13px;color:var(--mo-graphite);
  display:grid;place-items:center;cursor:pointer;font-variant-numeric:tabular-nums;
  transition:background .12s,color .12s}
.moonOblivion .obcal-dia:hover{background:var(--mo-haze)}
.moonOblivion .obcal-dia.fora{color:var(--mo-steel)}
.moonOblivion .obcal-dia.hoje{box-shadow:inset 0 0 0 1px var(--mo-electric)}
/* dia no meio do intervalo: mesmo realce do hover, sem raio, pra faixa correr
   continua entre a ponta de la e a de ca */
.moonOblivion .obcal-dia.entre{background:var(--mo-haze);border-radius:0}
.moonOblivion .obcal-dia.pde{border-radius:8px 0 0 8px}
.moonOblivion .obcal-dia.pate{border-radius:0 8px 8px 0}
.moonOblivion .obcal-dia.pde.pate{border-radius:8px}
.moonOblivion .obcal-dia.on{background:var(--mo-blue);color:#fff;font-weight:600}
.moonOblivion .obcal-dia.on:hover{background:var(--mo-blue-h)}
.moonOblivion .obcal-dia:disabled{color:var(--mo-mist);cursor:default;background:none}
/* rodape EM COLUNA, nao em linha. Medido no navegador: lado a lado dentro do
   painel de 262px, "04/08/2026 ate 22/08/2026" quebrava em TRES linhas ao lado
   do botao -- texto espremido, o defeito que o Wilker cobrou ontem. Em coluna
   a data tem os 250px inteiros e o botao ocupa a largura toda, que e
   exatamente o que o .percustom do Oblivion ja faz com o botao dele. */
.moonOblivion .obcal-pe{display:flex;flex-direction:column;align-items:stretch;gap:8px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--mo-mist)}
.moonOblivion .obcal-sel{font-size:11.5px;color:var(--mo-slate);
  font-variant-numeric:tabular-nums}
.moonOblivion .obcal-pe .btn{width:100%;justify-content:center;margin-top:0}
.moonOblivion .obcal-sel i{font-style:normal;color:var(--mo-steel)}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTE 4 -- BUSCA com autocomplete (.obbusca)
   A caixa e o `.filtros .busca` do Oblivion (app.css 688-696): mesma borda,
   mesmo raio, mesmo foco eletrico, mesmo placeholder steel. A lista que cai
   embaixo e o .combo-pop/.combo-lista/.combo-item ja definidos acima -- nao
   ha painel novo, e o mesmo do combo. Sem <datalist>, que e nativo.
   ══════════════════════════════════════════════════════════════════════════ */
.moonOblivion .obbusca{position:relative;display:inline-block;width:100%;max-width:280px}
.moonOblivion .obbusca-campo{display:flex;align-items:center;gap:8px;background:var(--mo-white);
  border:1px solid var(--mo-mist);border-radius:8px;padding:0 11px;
  transition:border-color .12s,box-shadow .12s}
.moonOblivion .obbusca-campo:hover{border-color:var(--mo-steel)}
.moonOblivion .obbusca-campo:focus-within{border-color:var(--mo-electric);
  box-shadow:0 0 0 3px rgba(150,131,255,.28)}
.moonOblivion .obbusca-campo svg{width:14px;height:14px;flex:0 0 14px;stroke:var(--mo-steel);
  fill:none;stroke-width:2;stroke-linecap:round}
.moonOblivion .obbusca-campo input{flex:1;min-width:0;font:inherit;font-size:13.5px;
  color:var(--mo-graphite);background:none;border:none;padding:9px 0;outline:none}
.moonOblivion .obbusca-campo input::placeholder{color:var(--mo-steel)}
.moonOblivion .obbusca-limpar{flex:0 0 18px;width:18px;height:18px;border-radius:50%;display:grid;
  place-items:center;color:var(--mo-steel);font-size:14px;line-height:1}
.moonOblivion .obbusca-limpar:hover{background:var(--mo-fog);color:var(--mo-graphite)}
.moonOblivion .obbusca-limpar[hidden]{display:none}
.moonOblivion .obbusca.aberto .combo-pop{display:block}
/* a lista da busca ancora na largura da caixa, nao nos 340 do combo */
.moonOblivion .obbusca .combo-pop{max-width:none}

.escPerfilBar{display:flex;gap:8px;align-items:center}
.escPerfilBar select{flex:1;background:var(--bg);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);font-size:13px;padding:7px 9px}
.escTopo{display:flex;align-items:center;justify-content:space-between}
.escTopo b{font-size:15px;color:var(--tinta)}
.escSub{font-size:12.5px;color:var(--apagado)}
.escLista{display:flex;flex-direction:column;gap:2px;margin:4px 0}
.escItem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;font-size:13.5px;color:var(--tinta)}
.escItem:hover{background:var(--surface-2)}
.escItemL{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer}
.escItem input{width:16px;height:16px;accent-color:var(--roxo)}
.escPerm{background:var(--bg);border:1px solid var(--borda);border-radius:6px;color:var(--tinta);font-size:12px;padding:4px 8px;cursor:pointer;color-scheme:dark}
.escPerm:disabled{opacity:.4}
.escFoot{display:flex;justify-content:flex-end;margin-top:6px}
/* lista de documentos reais do ClickUp */
.docvLista{display:flex;flex-direction:column;gap:4px;margin-top:10px;max-width:720px}
/* passo 6 (05/09): grupo por alcance (Meus/Do departamento/Da empresa) dentro de docvLista -- mesmo espacamento vertical entre itens que a lista tinha antes de virar 3 grupos */
.docvGrupo{display:flex;flex-direction:column;gap:4px;max-width:720px}
.docvItem{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface-2);border:1px solid var(--borda);border-radius:8px;cursor:pointer}
.docvItem:hover{border-color:var(--roxo)}
.docvItemIc{color:var(--apagado);display:inline-flex}
.docvItemIc svg{width:15px;height:15px}
.docvItemNome{flex:1;font-size:13.5px;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docvItemData{font-size:11.5px;color:var(--apagado)}
/* config Uso de IA */
.cfgSec{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--apagado);margin:16px 0 8px}
.cfgIaRecs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfgIaRec{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--surface-2);border:1px solid var(--borda);border-radius:8px;font-size:13px;color:var(--tinta)}
.cfgIaRec svg{width:15px;height:15px;color:var(--roxo)}
/* dependencias no painel de tarefa */
.tpDepsLista{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.tpDepLinha{display:flex;align-items:center;gap:9px;padding:7px 10px;background:var(--surface-2);border-radius:7px;font-size:12.5px}
.tpDepTipo{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--apagado);flex:none}
.tpDepNome{color:var(--tinta);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpDepX{color:var(--apagado);cursor:pointer;font-size:12px;padding:2px 5px;border-radius:4px}
.tpDepX:hover{background:var(--bg);color:#e5484d}
.menuFlut{z-index:160;min-width:180px;max-width:340px;max-height:88vh;overflow-y:auto} /* 88vh (nao 320): o menu de acoes tem 12+ itens e o 320 escondia Arquivar/Excluir abaixo da dobra; o ClickUp deixa o painel crescer e so rola em tela pequena */
.menuFlut .avOp{white-space:normal;word-break:break-word} /* nome de tarefa longo (ex. submenu Relacionamentos) quebra em vez de estourar a largura pra 710px */
.menuFlutSub{display:block;font-size:10.5px;color:var(--apagado);margin-top:1px}
/* picker de lista com busca (pedido Wilker, 01/09 -- espaco com 20+ listas numa coluna so).
   .pickerListaBusca reusa o mesmo tratamento visual de #mvBusca (.mvTopo input, abrirMoverPara)
   -- so o wrapper muda (aqui e avMenu flutuante, la e modal centralizado .mvBox). */
.pickerListaMn{width:260px;max-width:92vw;padding:6px}
.pickerListaBusca{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);padding:7px 10px;font-size:12.5px;outline:none;margin-bottom:4px}
.pickerListaBusca:focus{border-color:var(--roxo)}
.pickerListaCorpo{max-height:50vh;overflow-y:auto}
/* abas do modal — paineis */
.ntPane{display:flex;flex-direction:column;gap:12px}
.ntPane.oculto{display:none}
/* .ntCampoWrap.oculto (Motor Ativo, 04/09): mesmo toggle do .ntPane.oculto acima, escopado ao
   wrapper do campo "Cliente do vinculo" (#ntAtivoClienteW) -- generico "oculto" sozinho vazaria
   `display` pra qualquer elemento que use a classe (lint pegou: "generica e tambem modificador"). */
.ntCampoWrap.oculto{display:none}
.ntCampo.ativo{border-color:var(--roxo);color:var(--tinta)}
.ntCriarSolo{border-radius:8px}
/* aba documento */
.ntDocOps{display:flex;flex-direction:column;gap:2px}
.ntDocOp{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;font-size:13.5px;color:var(--tinta-2);cursor:pointer}
.ntDocOp:hover{background:var(--surface-2);color:var(--tinta)}
.ntDocIco{width:18px;text-align:center;color:var(--apagado);display:inline-flex;align-items:center;justify-content:center}
.ntDocIco svg{width:15px;height:15px}
.ntToggle{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinta-2);cursor:pointer;user-select:none}
.ntToggle input{position:absolute;opacity:0;width:0;height:0}
.ntToggleTrilho{width:32px;height:18px;border-radius:9px;background:var(--borda-2);position:relative;transition:background .15s}
.ntToggleTrilho::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.ntToggle input:checked + .ntToggleTrilho{background:var(--roxo)}
.ntToggle input:checked + .ntToggleTrilho::after{left:16px}
/* aviso das abas nao-replicadas */
.ntAviso{font-size:13px;line-height:1.55;color:var(--tinta-2);background:var(--surface-2);border:1px solid var(--borda);border-radius:9px;padding:16px 18px}
.ntAviso b{color:var(--tinta)}
/* split button "+ Tarefa" com setinha do menu de tipos */
.acaoSplit{display:inline-flex;align-items:stretch}
/* V3-01: o chevron estava herdando 7px 0 0 7px do .acaoSplit .acaoBtn (mais especifico) e ficava redondo do lado da EMENDA. Forca 0 6px 6px 0 (redondo so na ponta). V3-02: raio 6, botao 24px. */
.acaoSplit .acaoBtn{border-radius:6px 0 0 6px}
.acaoSplit .acaoBtn.roxo{height:24px;padding:0 5px;font-size:12px;font-weight:500;gap:4px} /* medido ALTAIR TR-14: 64,6 de largura com padding 0 5 (a medida antiga de 84,4 era de outra tela/estado). A COR nao viaja: o preto rgb(32,32,32) e tema claro; o roxo aqui e o equivalente funcional */
.acaoSplit .acaoChv{padding:7px 3px} /* medido ALTAIR TR-14: chevron 19,8 com padding 7px 3px */
.acaoChv{border-radius:0 6px 6px 0!important;border-left:1px solid rgba(255,255,255,.22)!important;padding:0 5px!important;font-size:10px}
/* AREA 9 — FASE 1: pill "Salvar visualização" (S3). Medido no ClickUp em TEMA CLARO — texto
   rgb(153,84,58) sobre fundo amarelo. Adaptado pro tema escuro com --amarelo (token ja existente):
   o mecanismo (fundo tingido de amarelo + texto amarelo) viaja, o rgb cru nao (ficaria ilegivel no
   escuro — mesma licao de outras areas). Split button, mesma tecnica ja usada no .acaoSplit. */
.viewSalvarWrap{display:inline-flex;align-items:stretch;height:24px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--amarelo) 18%,transparent)}
.viewSalvarBtn{background:none;border:none;color:var(--amarelo);font-size:12px;font-weight:500;padding:0 10px;cursor:pointer;white-space:nowrap}
.viewSalvarBtn:hover{background:color-mix(in srgb,var(--amarelo) 10%,transparent)}
.viewSalvarChv{background:none;border:none;border-left:1px solid color-mix(in srgb,var(--amarelo) 30%,transparent);color:var(--amarelo);padding:0 6px;cursor:pointer;display:inline-flex;align-items:center}
.viewSalvarChv:hover{background:color-mix(in srgb,var(--amarelo) 10%,transparent)}
.viewSalvarChv svg{width:11px;height:11px}
.viewSalvarMenuSep{height:1px;background:var(--borda);margin:4px 0}
/* O-026 (ORION 08/09), ordem do Wilker: filtro de cliente (#ctrlCliente, barra de views das
   Demandas) "mais explicito... igual esse botao" -- apontou o .viewSalvarWrap acima. MESMA anatomia,
   copiada 1:1 (altura 24px, raio 6, overflow:hidden, divisor+caret) -- so a cor muda, e muda porque o
   PAPEL muda: .viewSalvarWrap e acao primaria (salvar), este e filtro. --amarelo e token de acao
   primaria (usado tambem em pendencia/atraso, ver .finFrescorVelho/.finPillPendente); usar ele aqui
   pintaria o filtro como se fosse uma acao urgente pendente, mentira visual. --roxo e o token de
   marca/selecao do Nova (mesmo tom de .acaoBtn.roxo, #ntCriar) -- papel de filtro/escolha, nao de
   alerta. Wilker aprovou o roxo ("sim botao roxo degare") e pediu degrade -- espirito do gradiente
   ja aprovado no .homeCard.cardDestaque (linha ~410, roxo-suave -> surface): MESMA matiz variando de
   intensidade, nunca troca de cor. Direcao 90deg (horizontal), nao 135deg do card -- pilula de 24px
   de altura e larga, o componente e outra proporcao, diagonal quase nao apareceria. Faixa 12%-26% de
   tint (media parecida com o 18% chapado de antes, ponta mais clara medida: roxo-2 ainda da 4,72:1 de
   contraste real, sobra ate o 4,5 minimo -- testado ate 30% pra achar a borda, que fica em 4,42, por
   isso parei em 26 com folga). Divisor: testei tint translucido subindo ate 45% (e medi ate 100%
   opaco de --roxo cru: so 3,41 de contraste contra a ponta clara) -- roxo cru contra roxo tingido e
   pouca diferenca de luminancia, nao da pra empurrar so na porcentagem. Troquei a base pra --roxo-2
   SOLIDO (mesmo tom do texto/icone, sem tint nenhum) -- contra a ponta mais clara do fundo da 4,72:1,
   igual o texto: visivel de verdade, nao so "tecnicamente diferente". */
.cliFiltroWrap{display:inline-flex;align-items:stretch;height:24px;border-radius:6px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--roxo) 12%,transparent),color-mix(in srgb,var(--roxo) 26%,transparent))}
.cliFiltroBtn{background:none;border:none;color:var(--roxo-2);font-size:12px;font-weight:500;padding:0 10px;cursor:pointer;white-space:nowrap}
.cliFiltroBtn:hover{background:color-mix(in srgb,var(--roxo) 10%,transparent)}
.cliFiltroChv{background:none;border:none;border-left:1px solid var(--roxo-2);color:var(--roxo-2);padding:0 6px;cursor:pointer;display:inline-flex;align-items:center}
.cliFiltroChv:hover{background:color-mix(in srgb,var(--roxo) 10%,transparent)}
.cliFiltroChv svg{width:11px;height:11px}
/* menu "Criar" (tipos de item) */
.menuCriar{min-width:270px;padding:6px}
.mcTopo{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 4px}
.mcTit{font-size:12.5px;font-weight:600;color:var(--tinta)}
.mcGerenciar{font-size:12px;color:var(--roxo);cursor:pointer}
.mcGerenciar:hover{text-decoration:underline}
.mcBusca{padding:2px 6px 6px}
.mcBusca input{width:100%;background:var(--bg);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);padding:7px 10px;font-size:12.5px;outline:none;box-sizing:border-box}
.mcBusca input:focus{border-color:var(--roxo)}
.mcLista{max-height:210px;overflow-y:auto}
.mcItem{position:relative}
.mcItem.sel{color:var(--tinta)}
.mcIco{width:20px;text-align:center;display:inline-block;margin-right:6px;color:var(--apagado)}
.mcCheck{margin-left:auto;color:var(--roxo);font-size:9px}
.mcVazio{font-size:12px;color:var(--apagado);padding:8px 10px}
/* painel "Personalizar visualizacao" (engrenagem da barra) */
.persPainel{position:fixed;z-index:160;width:290px;max-height:80vh;overflow-y:auto;background:var(--surface);border:1px solid var(--borda-2);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.6);padding:8px}
.persTopo{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 6px}
.persTopo b{font-size:13.5px;color:var(--tinta);font-weight:600}
.persX{background:none;border:none;color:var(--apagado);width:24px;height:24px;border-radius:6px;cursor:pointer}
.persX:hover{background:var(--surface-2);color:var(--tinta)}
.persX svg{width:14px;height:14px}
.persNome{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--borda);border-radius:8px;padding:8px 10px;margin:2px 4px 8px;font-size:13px;color:var(--tinta)}
.persNome .persIco svg{width:15px;height:15px}
.persSec{display:flex;flex-direction:column}
.persLinha{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:7px;font-size:13px;color:var(--tinta-2)}
.persAtalho{cursor:pointer}
.persAtalho:hover{background:var(--surface-2)}
.persLbl{flex:1}
.persIco{width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--apagado)}
.persIco svg{width:15px;height:15px}
.persVal{font-size:12px;color:var(--apagado)}
.persChv{color:var(--apagado);font-size:14px}
.persDiv{height:1px;background:var(--borda);margin:6px 4px}
.persTog{width:34px;height:19px;border-radius:10px;background:var(--borda-2);border:none;position:relative;cursor:pointer;flex:none;transition:background .15s}
.persTog.on{background:var(--roxo)}
.persTogBola{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .15s}
.persTog.on .persTogBola{left:17px}
/* PAINEL "Campos" da Lista (O-123, ORION 17/09) -- substitui o toggle simples de 4 nativas por um
   painel de verdade (busca + grupos Mostrados/Propriedades/Personalizados + reordenar por alca),
   igual ao gabarito do ClickUp (O-118). `.ddMenu.ddMenuFixo` ja da position:fixed/z-index/sombra;
   aqui so o que e' proprio deste painel (largura maior, grupos, linha com alca+switch). Reusa
   .persTog/.persTogBola (mesmo switch ja usado no painel Personalizar) em vez de inventar um novo.
   ACHADO (ALTAIR, volta 1): `.camposPainel{width:320px}` sozinho perdia pra `.ddMenu.ddMenuFixo{
   width:auto!important}` (O-125, pensado pra dropdown comum crescer pro conteudo) -- 2 classes
   bate 1 em especificidade mesmo com !important dos dois lados. `.ddMenu.camposPainel` empata em
   especificidade (2 classes) e vem DEPOIS no arquivo, entao vence no desempate por ordem -- o
   painel volta a ser um retangulo fixo com ellipsis interno, nunca cresce pro nome mais comprido. */
.ddMenu.camposPainel{width:320px!important;max-width:calc(100vw - 16px);padding:6px}
.camposBusca{padding:4px 6px 8px}
.camposBusca input{width:100%;background:var(--surface-2);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);padding:7px 10px;font-size:13px;outline:none}
.camposBusca input:focus{border-color:var(--roxo)}
.camposGrupo:not(:last-of-type){margin-bottom:4px}
.camposGrupoTit{font-size:11px;letter-spacing:.3px;color:var(--apagado);padding:6px 8px 4px;text-transform:uppercase}
.camposLinha{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:13px;color:var(--tinta-2)}
.camposLinha:hover{background:var(--surface-2)}
.camposLinha.arrastando{opacity:.4}
.camposGrip{width:14px;flex:0 0 auto;color:var(--apagado);cursor:grab;opacity:0;display:flex;align-items:center}
.camposLinha:hover .camposGrip{opacity:1}
.camposGrip.semArrasto{visibility:hidden}
.camposIco{width:16px;flex:0 0 auto;color:var(--apagado);font-size:11px;text-align:center}
.camposNome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta)}
.camposSwitch:disabled{opacity:.4;cursor:default}
.camposRodape{border-top:1px solid var(--borda);margin-top:6px;padding-top:6px}
.camposCriarBtn{width:100%;background:none;border:none;color:var(--roxo-2);font-size:13px;font-weight:600;padding:8px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:6px;justify-content:center}
.camposCriarBtn:hover{background:var(--surface-2)}
.camposCriarBtn svg{width:14px;height:14px}
/* O-123 leva 3 (ORION, 17/09): editor de opcoes com seletor de cor (Criar campo / Editar campo) */
.cnOpcoesEditor,#cnOpcoes,#ceOpcoes{display:flex;flex-direction:column;gap:4px}
.cnOpcaoLinha{display:flex;align-items:center;gap:8px}
.cnOpcaoCor{width:20px;height:20px;flex:0 0 auto;border-radius:6px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.cnOpcaoNome{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);padding:6px 9px;font-size:13px;outline:none}
.cnOpcaoNome:focus{border-color:var(--roxo)}
.cnOpcaoDel{width:16px;flex:0 0 auto;color:var(--apagado);cursor:pointer;display:flex;align-items:center;opacity:.6}
.cnOpcaoDel:hover{opacity:1;color:var(--vermelho)}
.cnOpcaoDel svg{width:14px;height:14px}
.cnOpcaoAdd{align-self:flex-start;background:none;border:none;color:var(--roxo-2);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 2px;margin-top:2px}
.cnOpcaoAdd:hover{text-decoration:underline}
.paletaCorPainel{padding:8px;width:auto!important}
.paletaCorGrade{display:grid;grid-template-columns:repeat(6,22px);gap:6px}
.paletaCorSw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.paletaCorSw.sel{outline:2px solid var(--roxo);outline-offset:1px}
.paletaCorCustom{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--borda);font-size:12.5px;color:var(--tinta-2);cursor:pointer}
.paletaCorCustom input[type=color]{width:22px;height:22px;padding:0;border:1px solid var(--borda);border-radius:6px;cursor:pointer;background:none}
/* O-123 leva 5 (ORION, 17/09): painel de lixeira de campos */
.camposLixeiraTopo{display:flex;align-items:center;gap:8px;padding:4px 4px 10px;font-size:13px;color:var(--tinta)}
.camposLixeiraVoltar{background:none;border:none;color:var(--apagado);cursor:pointer;display:flex;align-items:center;padding:2px;border-radius:6px;transform:rotate(180deg)}
.camposLixeiraVoltar:hover{background:var(--surface-2);color:var(--tinta)}
.camposLixeiraVoltar svg{width:16px;height:16px}
.camposLixeiraVazio{padding:16px 8px;text-align:center;font-size:12.5px;color:var(--apagado)}
.camposLixeiraLinha{justify-content:space-between}
.camposLixeiraRestaurar{background:none;border:1px solid var(--borda);color:var(--roxo-2);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;flex:0 0 auto}
.camposLixeiraRestaurar:hover{background:var(--surface-2)}
.camposLixeiraRestaurar:disabled{opacity:.5;cursor:default}
/* Quebrar texto: nomes de tarefa quebram em vez de cortar */
body.quebraTexto .lnNome,body.quebraTexto .celNome,body.quebraTexto .tbNome{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
select.ntCcInput{cursor:pointer}

/* editor de documento (banco proprio) */
/* O-085 (Wilker, 14/09, aval que ja cobria o conjunto Inbox+Editor): sai de coluna centralizada
   pra moldura unica flush, 28px, alinhado com o titulo da tela e o resto do app -- mesmo destino
   do .inboxWrap (O-084). RISCO MEDIDO ANTES DE ESCREVER (pedido explicito do Maestro, nao de
   passagem): testei os dois desenhos com paragrafo de verdade (4 paragrafos, nao um texto de
   2 linhas). Simples (moldura E texto na largura toda, ~1127px) ficou RUIM de ler -- linha
   comprida demais, confirmado no print, nao so' suposto. Por isso NAO ficou o simples: a moldura
   comeca em 28 igual a todo mundo (title/breadcrumb alinhados), e quem limita a largura de
   leitura e' o `.docCorpo` (abaixo), sozinho, com o proprio max-width -- 2 responsabilidades
   separadas, nao 1 container fazendo as 2 coisas ao mesmo tempo. */
.docEdit { padding: 24px 28px 60px; }
.docVoltar { background: none; border: none; color: var(--apagado); cursor: pointer; font-size: 13px; padding: 4px 0; margin-bottom: 10px; }
.docVoltar:hover { color: var(--tinta); }
.docTitulo { width: 100%; border: none; background: none; color: var(--tinta); font-size: 30px; font-weight: 700; padding: 6px 0; outline: none; }
.docTitulo::placeholder { color: var(--apagado); }
/* O-085 (14/09): limite de leitura proprio, independente da moldura (`.docEdit` acima, agora
   flush 28px). 760px -- medido contra o A (centralizado, 780px de largura de texto real) pra
   manter a mesma experiencia de leitura de antes, so' com o titulo alinhado com o app. */
.docCorpo { width: 100%; max-width: 760px; min-height: 55vh; margin-top: 14px; border: none; background: none; color: var(--tinta); font-size: 15px; line-height: 1.65; outline: none; resize: vertical; font-family: inherit; }
.docCorpo::placeholder { color: var(--apagado); }
.docStatus { position: fixed; bottom: 18px; right: 22px; font-size: 12px; color: var(--apagado); background: var(--surface-2); padding: 4px 10px; border-radius: var(--r); }

/* colunas ocultaveis da lista (Gerenciar colunas) */
.colOcultaResp .colResp { display: none !important; }
.colOcultaInicio .colInicio { display: none !important; }
.colOcultaData .colData { display: none !important; }
.colOcultaPrio .colPrio { display: none !important; }
/* aba Delegado: para quem */
.homeDelegPara { margin-left: auto; font-size: 12px; color: var(--apagado); white-space: nowrap; }

/* Quadro branco (canvas de post-its) */
.qbWrap { display: flex; flex-direction: column; height: calc(100vh - 120px); }
.qbTopo { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--borda); }
.qbNome { flex: 0 1 320px; background: none; border: none; color: var(--tinta); font-size: 18px; font-weight: 700; outline: none; padding: 4px 0; }
.qbAddBtn { background: var(--roxo); color: #fff; border: none; border-radius: var(--r); padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 600; }
.qbSalvo { font-size: 12px; color: var(--apagado); margin-left: auto; }
.qbCanvas { position: relative; flex: 1; overflow: auto; background:
  linear-gradient(var(--borda) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, var(--borda) 1px, transparent 1px) 0 0 / 24px 24px,
  var(--surface); }
.qbNota { position: absolute; width: 180px; min-height: 96px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); color: #1a1a1a; display: flex; flex-direction: column; }
.qbNotaBar { height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: grab; border-radius: 8px 8px 0 0; background: rgba(0,0,0,.06); }
.qbNotaBar:active { cursor: grabbing; }
.qbCor { width: 12px; height: 12px; border-radius: 50%; background: rgba(0,0,0,.25); cursor: pointer; border: 1px solid rgba(0,0,0,.2); }
.qbDel { cursor: pointer; font-size: 16px; line-height: 1; color: rgba(0,0,0,.5); padding: 0 2px; }
.qbDel:hover { color: #c00; }
.qbTxt { flex: 1; padding: 8px 10px; font-size: 13px; line-height: 1.4; outline: none; overflow-wrap: anywhere; }

/* botoes de acao nos formularios */
.formBtn { background: var(--surface-2); border: 1px solid var(--borda); color: var(--apagado); border-radius: var(--r); padding: 4px 10px; font-size: 12px; cursor: pointer; margin-left: 6px; }
.formBtn:hover { color: var(--tinta); border-color: var(--roxo); }
.formBtnX { padding: 4px 8px; }
.formBtnX:hover { color: var(--vermelho); border-color: var(--vermelho); }

/* ===== Gerenciador de status / criador de campo (motores na UI) ===== */
#statusMgrModal,#campoNovoModal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:130;display:none;align-items:flex-start;justify-content:center}
#statusMgrModal.on,#campoNovoModal.on{display:flex}
/* px cru identico ao token, migrado 08/09 (ARCTURUS, ordem ALTAIR) */
.smBox{margin-top:14vh;width:520px;max-width:94vw;background:var(--surface);border:1px solid var(--borda-2);border-radius:var(--r-lg);box-shadow:0 24px 70px rgba(0,0,0,.6);padding:var(--sp-entre-cards)}
.smTopo{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.smTit{font-size:15px;font-weight:600;color:var(--tinta)}
.smX{cursor:pointer;color:var(--tinta-3);font-size:15px;padding:2px 6px;border-radius:6px}
.smX:hover{background:var(--surface-2);color:var(--tinta)}
.smAviso{font-size:12px;color:var(--tinta-3);margin-bottom:12px}
.smLista{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto}
.smLinha{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--borda);border-radius:8px;padding:7px 9px}
.smLinha.smDragging{opacity:.4}
.smGrip{cursor:grab;color:var(--tinta-3);font-size:12px;letter-spacing:-2px;user-select:none}
.smCor{width:26px;height:26px;padding:0;border:none;background:none;border-radius:6px;cursor:pointer;flex:0 0 auto}
.smNome{flex:1;background:var(--surface-2);border:1px solid var(--borda);border-radius:6px;color:var(--tinta);padding:6px 8px;font-size:13px;outline:none}
.smNome:hover{border-color:var(--borda-2)}
.smNome:focus{border-color:var(--roxo);background:var(--surface)}
.smLapis{color:var(--tinta-3);font-size:12px;flex:0 0 auto;pointer-events:none}
.smGrip{cursor:grab}
.smGrip:active{cursor:grabbing}
.smTipo{background:var(--surface-2);border:1px solid var(--borda);border-radius:6px;color:var(--tinta-2);font-size:12px;padding:6px 8px;outline:none}
.smDel{cursor:pointer;color:var(--tinta-3);font-size:14px;padding:4px 6px;border-radius:6px;flex:0 0 auto}
.smDel:hover{background:rgba(220,60,60,.16);color:#ff6b6b}
/* O-091 item 1: tracejado parado morreu -- ja tinha hover com fundo (linha abaixo), igual ao
   .kbAddBtn (mesmo papel: ultima linha de uma lista, adiciona item novo), so faltava tirar a borda. */
.smAdd{margin-top:10px;cursor:pointer;color:var(--roxo);font-size:13px;font-weight:500;padding:8px;border:none;border-radius:8px;text-align:center}
.smAdd:hover{background:var(--surface-2)}
.smRodape{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.cnLinha{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.cnLinha label{font-size:12px;color:var(--tinta-3);font-weight:500}
.cnLinha input,.cnLinha select{width:100%;background:var(--bg);border:1px solid var(--borda);border-radius:8px;color:var(--tinta);padding:10px 12px;font-size:14px;outline:none}
.cnLinha input:focus,.cnLinha select:focus{border-color:var(--roxo)}

/* Lixeira */
.lixoItem{align-items:center}
.lixoBtn{background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta-2);font-size:12px;padding:5px 10px;border-radius:7px;margin-left:6px;cursor:pointer;white-space:nowrap}
.lixoBtn:hover{filter:brightness(1.15)}
.lixoRestaurar{color:var(--roxo);border-color:var(--roxo)}
.lixoApagar:hover{background:rgba(220,60,60,.16);color:#ff6b6b;border-color:#ff6b6b}

/* breadcrumb da tarefa pai (voltar da subtarefa) */
.tpBcPai{cursor:pointer;color:var(--roxo,#8b7cf0);display:inline-flex;align-items:center;gap:3px}
.tpBcPai:hover{text-decoration:underline}
.tpBcPai svg{width:13px;height:13px}

/* NAV-02: caret da sidebar gira quando aberto */
.espacoTit .tri,.pastaTit .tri{display:inline-block;transition:transform .15s ease}
.espaco.aberto>.espacoTit .tri,.pasta.aberto>.pastaTit .tri{transform:rotate(90deg)}
/* LISTA-toolbar-06: botao "Modo eu" com rotulo */
.ctrlModoEu{display:inline-flex;align-items:center;justify-content:center;width:23.8px;padding:4px 3px} /* so o avatar (medido): o texto "Modo eu" saiu, 92->24. TR-15: entra no padrao do GRUPO DE FILTRO (23,8 / padding 4-3), nao no par busca/config — esta regra tardia estava sobrescrevendo o lote 2 */
/* LISTA-15: acao "..." na linha */
/* .tHa.tHaMenu removida: nenhum elemento usa as duas classes juntas (0 ocorrencias no JS) e o .tHaMenu ja traz esses dois valores. Regra morta confunde quem procura de onde vem o estilo. */

/* TAREFA-11b: separa autor e data no comentario/atividade da tarefa */
.tpCom .quando,.tpEvento .quando{margin-left:8px;color:var(--tinta-3,#888);font-size:11.5px}

/* Recolher campos vazios (painel da tarefa) */
/* recolhe campos vazios, MENOS os nucleo (Datas e Rastrear tempo), igual ClickUp */
.tpColEsq.ocultarVazios .tpCampo:has(.tpVazio):not(#tpDataCampo):not(#tpRastrearCampo){display:none}
.tpVaziosToggle{margin:2px 0 6px;width:fit-content} /* hug no link: sem isso o contêiner tem 806px mas só o link de ~121 responde, criando uma faixa que parece clicável e não faz nada */
.tpMiniLink{background:none;border:none;color:var(--tinta-3,#888);font-size:12px;cursor:pointer;padding:2px 0}
.tpMiniLink:hover{color:var(--roxo,#8b7cf0)}

/* TABELA-08 selecao multipla + TABELA-09 linha de adicionar */
/* coluna # UNIFICADA (40px): numero em repouso; no hover troca por alca + checkbox (medido). */
.tab td.tabHash,.tab th.tabHashTh{width:40px;min-width:40px;max-width:40px;text-align:center;padding:0;border-right:none;position:relative}
.tabHashNum{font-size:12px;font-weight:500;color:rgb(124,130,141);font-variant-numeric:tabular-nums}
.tab tr[data-id]:hover .tabHashNum{opacity:0}
.tabHashHover{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:3px}
.tab tr[data-id]:hover .tabHashHover{display:flex}
.tabHashGrip{display:inline-flex;align-items:center;justify-content:center;color:rgb(124,130,141);cursor:grab;width:16px;height:16px}
.tabHashGrip svg{width:14px;height:14px}
.tabHashHover .tabSelChk{width:14px;height:14px;margin:0;cursor:pointer}
.tabSelAll{width:14px;height:14px;margin:0;cursor:pointer;vertical-align:middle}
.tab tr.sel td{background:var(--roxo-fraco,rgba(139,124,240,.14))}
.tabAddRow td{height:35px;padding:0 14px;border-bottom:1px solid var(--borda);border-right:none}
.tabAddRow td.tabHash{padding:0}
.tabAddRow td{cursor:text}
.tabAddMais{color:var(--tinta-3,#888);margin-right:8px}
.tabAddInput{background:transparent;border:none;color:var(--tinta);font-size:13px;width:80%;outline:none}
.tabAddInput::placeholder{color:var(--tinta-3,#888)}

/* TRANSV-09: estado de erro de carga (nao confundir com lista vazia) */
.cargaErro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:70px 24px;text-align:center;color:var(--tinta-2)}
.cargaErroIco{font-size:34px;color:var(--estranho,#f5b64d)}
.cargaErroTit{font-size:16px;font-weight:600;color:var(--tinta)}
.cargaErroSub{font-size:13.5px;max-width:42ch;line-height:1.5}
.cargaErroDet{color:var(--tinta-3,#888);font-size:12px}
.cargaErro .imBtn{margin-top:4px}

/* Tabela: numeracao de linha (TABELA, estilo ClickUp) */
/* icone do tipo de tarefa antes do nome (medido: 13.3px cinza, nome a ~24px do inicio da celula) */
.tabNomeIco{display:inline-flex;align-items:center;color:rgb(141,141,141);margin-left:6px;vertical-align:middle} /* D3 (AREA5): icone de descricao vem DEPOIS do nome no ClickUp, nao antes — margin-right virou margin-left */
.tabNomeIco svg{width:13px;height:13px}
.tabNomeTxt{vertical-align:middle}
/* ultima coluna = preenchimento (ocupa o resto). O botao de adicionar coluna (50x32) fica
   encostado a esquerda dela, logo apos a ultima coluna real, com o icone centralizado. */
/* coluna-preenchimento GULOSA: width:100% faz ela absorver toda a sobra, pra as reais nao esticarem */
.tab td.tabFill,.tab th.tabAddColTh{width:auto;text-align:left} /* ALTAIR TR-44: com table-layout:fixed o width:100% fazia esta celula reivindicar a largura toda e invadir a ultima coluna — o .tabAddColBtn pousava SOBRE a seta de menu dela, e quem tentasse abrir o menu clicava em "adicionar coluna". auto deixa o fixed repartir o que sobra */
.tab th.tabAddColTh{padding:0;border-right:none;background:var(--bg)}
.tab td.tabFill{border-right:none}
.tab th.tabAddColTh{min-width:66px} /* TR-44: piso pra celula do "+" — garante que ela nao seja espremida a ponto do botao encostar/cobrir a seta da ultima coluna */
.tabAddColBtn{width:50px;height:32px;margin-left:8px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--apagado);cursor:pointer} /* margin-left: respiro entre a ultima coluna e o "+" (TR-44) */
.tabAddColBtn svg{width:16px;height:16px}
.tabAddColBtn:hover{color:var(--tinta);background:var(--surface)}
/* rodape de totais FIXADO: 32px, fundo levissimo, "Calcular" so no hover da celula */
.tab tfoot .tabTotais td{position:sticky;bottom:0;height:32px;padding:0 14px;background:color-mix(in srgb,#000 2.4%,var(--bg));border-top:1px solid var(--borda);border-bottom:none;border-right:1px solid var(--borda)}
.tabCalcular{font-size:12px;color:var(--apagado);opacity:0;cursor:pointer}
.tab tfoot .tabTotalCel:hover .tabCalcular{opacity:1}

/* TABELA-04/05: redimensionar e reordenar coluna */
/* ALTAIR TR-45: em coluna estreita o rotulo enchia a largura e EMPURRAVA a seta pra FORA do proprio th
   (que tem overflow visivel), vazando pra coluna vizinha — a coluna perdia o proprio menu e o usuario
   ficava sem como oculta-la. SOLUCAO: padding-right reserva o espaco da seta e o rotulo corta com
   ellipsis; a seta e absolute nesse espaco, como a .tabResize ja fazia.
   NAO usar display:flex aqui: ja foi tentado e QUEBROU o alinhamento (o th deixa de ser table-cell, o
   table-layout:fixed perde as ancoras e as celulas do corpo se distribuem sozinhas — cabecalhos
   empilhando no mesmo x e celulas todas com a mesma largura). O modelo table-cell sustenta a tabela. */
.tab th.tabTh{position:sticky;top:0;z-index:1;box-sizing:border-box;padding-right:24px} /* ALTAIR: o position:relative que eu pus aqui SOBRESCREVIA o sticky da regra .tab th (linha 88) e o cabecalho perdia a fixacao. sticky JA estabelece contexto de posicionamento pros filhos absolute (a seta e a .tabResize), entao nao precisa de relative */
.tab th.tabTh .tabThLbl{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A8 (AREA5): o pin (.tabPin) e IRMAO do .tabThLbl no DOM, so existe na coluna Nome. Com o label
   display:block ele ocupa a largura toda do th e empurra o pin (inline-flex) pra linha de baixo — bug
   achado pela ALTAIR (pin deveria ficar na MESMA linha, a direita do rotulo). Sem mexer no th (Regra
   ja documentada acima: display:flex no th QUEBRA o table-layout) — so o label desta coluna especifica
   vira inline-block com largura sobrando pro pin, os dois ficam lado a lado como qualquer texto+icone. */
.tab th.tabNome .tabThLbl{display:inline-block;max-width:calc(100% - 22px);vertical-align:middle}
/* a seta vai pro espaco reservado pelo padding, ancorada como a .tabResize ja faz (que fica em right:0) */
.tab th.tabTh .tabThMenu{position:absolute;right:8px;top:50%;transform:translateY(-50%);margin-left:0}
.tabThLbl{cursor:pointer;font-size:13px;font-weight:700}
.tabResize{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;user-select:none;z-index:2}
.tabResize:hover{background:var(--roxo,#8b7cf0)}
.tab th.tabTh.tabDragging{opacity:.5;background:var(--surface-2)}

/* MOTOR 1: barra de acoes do card do Quadro + menu da linha da Tabela */
.kbCard{position:relative}
.kbCardAcoes{position:absolute;top:-9px;right:-2px;display:none;gap:0;background:var(--surface);border:1px solid var(--borda);border-radius:7px;padding:2px;box-shadow:0 4px 12px rgba(0,0,0,.3)} /* medido ALTAIR: no ClickUp as acoes FLUTUAM pra fora da borda superior direita (dy -9), nao ficam dentro sobre o conteudo. O fundo proprio ja existia — e o que torna a flutuacao segura */
.kbCard:focus-visible{outline:2px solid var(--roxo);outline-offset:-2px} /* anel PROPRIO: o `auto` do navegador rendeu rgb(16,16,16) sobre fundo rgb(15,15,18) — contraste 1.01, invisivel. O navegador escolhe uma cor pensando em fundo claro e ninguem redefine pro escuro. Mesma decisao de mecanismo dos outros focaveis: cor do sistema do Nova, nao a do navegador. */
.kbCardAc:focus-visible{outline:2px solid var(--roxo);outline-offset:-1px} /* offset -1 porque o botao tem 24 e o anel de -2 comeria o icone */
.kbCard:hover .kbCardAcoes,.kbCard:focus-visible .kbCardAcoes,.kbCard:has(:focus-visible) .kbCardAcoes{display:inline-flex} /* :focus-visible, NAO :focus nem :focus-within — clicar no card DA FOCO (tem tabIndex), entao com :focus os botoes ficavam revelados depois do mouse sair, por cima do card e recebendo clique. Um deles CONCLUI a tarefa. :focus-visible so casa foco vindo do TECLADO, que era a intencao. ALTAIR: hover NAO EXISTE pra teclado. Sem o focus-within, quem chega no card pelo Tab encontra as acoes escondidas — tornar o card focavel sozinho nao resolveria. O ClickUp revela por foco tambem (no passo 5 da tabulacao o "Marcar como concluida" ja esta focado) */
.kbCardAc{cursor:pointer;color:var(--tinta-3,#888);width:24px;height:24px;box-sizing:border-box;padding:0;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;line-height:1} /* medido ALTAIR: botao 24x24 raio 6 (era 21x21 raio 5) */
.kbCardAc:hover{background:var(--surface-2);color:var(--tinta)}
.kbCardAc svg{width:15px;height:15px}
.tabHaMenu{display:none;cursor:pointer;color:var(--tinta-3,#888);font-weight:700;float:right;padding:0 4px}
.tab tr[data-id]:hover .tabHaMenu,.tab tr[data-id]:focus-visible .tabHaMenu,.tab tr[data-id]:has(:focus-visible) .tabHaMenu{display:inline-block}
.tab tr[data-id]:focus{outline:none}
.tab tr[data-id]:focus-visible{outline:2px solid var(--roxo);outline-offset:-2px}
.tabHaMenu:hover{color:var(--roxo,#8b7cf0)}

/* MOTOR menu-de-coluna: caret de opcoes no cabecalho da Tabela */
.tabThMenu{display:none;cursor:pointer;color:var(--tinta-3,#888);margin-left:4px;font-size:10px;vertical-align:middle}
.tab th.tabTh:hover .tabThMenu{display:inline}
.tabThMenu:hover{color:var(--roxo,#8b7cf0)}

/* ============ MOTOR 2 — OVERVIEW DA PASTA (cartoes) ============ */
.ovWrap{padding:20px 28px;overflow-y:auto;height:100%}
/* grade de 6 unidades (medida ClickUp): span 2=450 (1/3), span 3=683 (1/2), span 6=1382 (full); gap 16 */
/* O-012 (ORION 07/09) -- DUVIDA PRO MAESTRO: 16px nao bate com a escala atual
   (--sp-linha:8 / --sp-entre-cards:18). Mantido o valor visual, NAO trocado: este grid e medido
   contra o ClickUp (ver historico de medicoes do ALTAIR neste arquivo), entao pode ser excecao
   legitima e nao numero solto -- sinalizado pro Maestro decidir. */
/* EXCECAO A LEI de espacamento (O-012, ALTAIR 07/09): gap 16px nao bate com a escala do app
   (--sp-entre-cards:18), mas esta grade e medida PIXEL A PIXEL contra o ClickUp (ver comentario
   "grade de 6 unidades (medida ClickUp)" duas linhas abaixo) -- mesma familia de excecao do
   Kanban (.kbCards, linha ~637). Nao mexer sem remedir o ClickUp. */
.ovGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-content:start}
.ovCard{background:var(--surface);border:1px solid var(--borda);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;height:302px;box-shadow:var(--card-sh)}
.ovSpan2{grid-column:span 2}
.ovSpan3{grid-column:span 3}
.ovSpan6{grid-column:span 6}
@media (max-width:1000px){.ovSpan2,.ovSpan3{grid-column:span 3}.ovSpan6{grid-column:span 6}}
.ovCard.ovDragging{opacity:.4}
/* O-091 item 1: fica -- mesma familia/motivo de .calCel.calDrop (nova.css, secao "drag no calendário": so' existe durante o arrasto). */
.ovCard.ovDragOver{outline:2px dashed var(--roxo);outline-offset:-2px}
.ovCardHead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--borda);user-select:none}
.ovDrag{color:var(--apagado);cursor:grab;font-size:13px;line-height:1}
.ovCardTit{font-weight:600;font-size:13.5px;color:var(--tinta)}
.ovCardCount{color:var(--apagado);font-size:12px;background:var(--surface-2);border-radius:10px;padding:1px 8px;min-width:0}
.ovCardCount:empty{display:none}
.ovCardTools{margin-left:auto;display:flex;gap:4px}
.ovCardTool{color:var(--apagado);cursor:pointer;padding:3px 6px;border-radius:5px;font-size:12px;line-height:1}
.ovCardTool:hover{background:var(--surface-2);color:var(--tinta)}
.ovCardBody{padding:0;flex:1;overflow-y:auto}
.ovLoad,.ovShell,.ovVazio{padding:16px 14px;color:var(--apagado);font-size:12.5px}
.ovVazio{padding:0;color:var(--apagado)}
/* tabela do cartao Listas: 7 colunas */
.ovTbl{width:100%}
.ovTblHead{display:grid;grid-template-columns:minmax(160px,1fr) 60px 120px 110px 110px 110px 130px;padding:6px 14px;border-bottom:1px solid var(--borda);color:var(--apagado);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.ovTblRow{display:grid;grid-template-columns:minmax(160px,1fr) 60px 120px 110px 110px 110px 130px;padding:0 14px;align-items:center;height:36px;border-bottom:1px solid var(--borda)}
.ovTblRow:hover{background:var(--surface-2)}
.ovPastaRow{grid-template-columns:minmax(160px,1fr) 130px;cursor:pointer}
.ovC{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tinta);min-width:0}
.ovCNome{cursor:pointer;overflow:hidden}
.ovListNome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovCNome:hover .ovListNome{color:var(--roxo-2)}
.ovListIco{color:var(--apagado);font-size:12px;flex:none}
.ovVazio{color:var(--apagado);opacity:.5}
.ovProgTxt{color:var(--tinta-2);font-size:12px}
.ovAnel{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ovAnelIn{width:13px;height:13px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:7px;color:var(--tinta-2);font-weight:600}
.ovCard.ovW2 .ovAnelIn{background:var(--surface)}
.ovTblAdd{padding:8px 14px;color:var(--apagado);font-size:12.5px;cursor:pointer}
.ovTblAdd:hover{color:var(--roxo-2);background:var(--surface-2)}
/* botao + Cartao na barra de acoes */
.ovAddCartao{background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta-2);border-radius:6px;padding:5px 11px;font-size:12.5px;font-weight:500}
.ovAddCartao:hover{border-color:var(--borda-2);color:var(--tinta)}
/* seletor de cartao */
.ovSeletor{min-width:230px;max-height:60vh;overflow-y:auto}
.ovSelCat{padding:8px 12px 4px;color:var(--apagado);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ovSelOp{display:flex;align-items:center;gap:9px}
.ovSelIco{width:16px;text-align:center;color:var(--apagado)}

/* FIX ALTAIR 2026-08-25: SVG do +Nova lista sem width/height explodia pra 1295px */
/* FIX ORION 13/09: faltava o guarda ":not([width])" que a regra-mae do topo do arquivo ja usa
   (svg:not([width]), ~linha 122) -- sem ele, esta regra clampava TAMBEM svg de CONTEUDO real
   (grafico completo, com width proprio) que passasse a viver dentro de #ovWrap, nao so icone
   solto. O Financeiro caiu nisso ao herdar a visao padrao: .gfSvg tem width="100%" proprio e
   virou 14x14 por especificidade, mesmo tendo o proprio tamanho declarado. Mesma lei de sempre:
   svg SEM width e' icone e leva o clamp; svg COM width e' conteudo e manda no proprio tamanho --
   vale pra qualquer grafico futuro de qualquer departamento, sem excecao nova por nome. */
.ovWrap svg:not([width]){width:14px;height:14px;flex:0 0 auto}
/* FIX ALTAIR 2026-08-25: coluna Nome colapsava a zero em tela estreita; piso de largura + scroll horizontal (via #main), preserva sticky do cabecalho. A conta mora agora em --linha-min. */
.listaHead,.tRow,.grupo{min-width:var(--linha-min)}

/* MOTOR 3: casca honesta de view nao construida */
.viewCasca{padding:40px 28px;max-width:520px;color:var(--tinta-2)}
.viewCasca b{color:var(--tinta);font-size:14px}
.viewCasca p{margin-top:8px;font-size:13px;color:var(--apagado);line-height:1.5}

/* MOTOR 3: item "Excluir visualizacao" no painel Personalizar */
.persLinha.persPerigo .persLbl{color:#e5484d}
.persLinha.persPerigo:hover{background:rgba(229,72,77,.1)}
.persLinha.persPerigo .persIco{color:#e5484d}

/* MOTOR 3: altura da linha da Lista (painel Personalizar) */
body.alt-pequeno .tRow{height:28px}
body.alt-grande .tRow{height:44px}
body.alt-grande .tNome{line-height:24px}
/* controle segmentado Altura da linha */
.persAltura{display:flex;align-items:center;justify-content:space-between;gap:10px}
.persSeg{display:inline-flex;background:var(--surface-2);border-radius:7px;padding:2px;gap:2px}
.persSegBt{background:none;border:none;color:var(--tinta-2);font-size:12px;padding:4px 9px;border-radius:5px;cursor:pointer;font-family:inherit}
.persSegBt.on{background:var(--roxo);color:#fff}
.persSegBt:not(.on):hover{background:var(--surface);color:var(--tinta)}

/* MOTOR 3: subtarefa aninhada (modo Expandidas) — indentada sob a tarefa-mae */
.tRowSub .colNome{padding-left:28px}
.tRowSub .tNome{color:var(--tinta-2)}
.tRowSub{background:rgba(255,255,255,.012)}

/* MOTOR 3: badge de contagem de subtarefa na linha da mae (Recolhidas) */
.tSubBadge{display:inline-flex;align-items:center;gap:2px;margin-left:8px;padding:0 3px;height:20px;border-radius:4px;background:var(--surface-2);color:var(--tinta-2);font-size:12px;font-weight:500;cursor:pointer;flex:0 0 auto}
.tSubBadge:hover{background:var(--roxo-suave);color:var(--roxo-2)}
.tSubBadge.aberto{background:var(--roxo);color:#fff}
.tSubBadge svg{width:14px;height:14px}
.tSubBadgeN{line-height:1}

/* MOTOR 3: gutter de subtarefa. O padding-left de 48px da .tRow JA e o gutter reservado em toda linha (checkbox alinha com/sem subtarefa). O marcador de recolher e ABSOLUTO dentro dele, so no pai expandido, nao empurra nada. */
.tRow{position:relative}
.tSubCollapse{position:absolute;left:24px;top:50%;transform:translateY(-50%) rotate(90deg);width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--apagado);cursor:pointer;border-radius:4px}
.tSubCollapse:hover{background:var(--surface-2);color:var(--tinta)}
.tSubCollapse svg{width:12px;height:12px}

/* Overview de espaco: chips do cartao Folders (sem contagem), vazio com CTA, barra de topo */
.ovChips{display:flex;flex-wrap:wrap;gap:8px;padding:14px}
.ovChip{display:inline-flex;align-items:center;gap:7px;width:264px;height:48px;box-sizing:border-box;padding:0 12px;border:1px solid var(--borda);border-radius:8px;background:var(--surface-2);cursor:pointer;overflow:hidden}
.ovChip:hover{border-color:var(--borda-2);background:var(--surface)}
.ovChipIco{flex:0 0 auto;font-size:15px}
.ovChipNome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--tinta)}
.ovEmpty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
.ovEmptyIco{font-size:26px;opacity:.7}
.ovEmptyTxt{color:var(--apagado);font-size:12.5px;max-width:280px;line-height:1.5}
.ovEmptyBtn{background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta-2);border-radius:6px;padding:5px 11px;font-size:12.5px;cursor:pointer;font-family:inherit}
.ovEmptyBtn:hover{border-color:var(--borda-2);color:var(--tinta)}
.ovEmptyBtn svg{width:13px;height:13px;vertical-align:-2px}
.ovAutoRefresh{display:inline-flex;align-items:center;gap:6px;color:var(--apagado);font-size:12px;margin-right:2px}
.ovArDot{width:7px;height:7px;border-radius:50%;background:#38b000;flex:0 0 auto}

/* chip do Folders: icone SVG (nao emoji), herda a cor do tema */
.ovChipIco{color:var(--apagado);display:inline-flex;align-items:center}
.ovChipIco svg{width:16px;height:16px}
.ovEmptyIco svg{width:26px;height:26px}

/* emoji -> SVG: dimensiona os icones que antes eram glifo de fonte (herdam currentColor) */
.ovDrag svg,.ovCardTool svg{width:14px;height:14px}
.li{display:inline-flex;align-items:center;flex:0 0 auto}
.li svg{width:14px;height:14px}
.pastaIco{display:inline-flex;align-items:center;color:var(--apagado);flex:0 0 auto}
.pastaIco svg{width:15px;height:15px}
.bcIco{display:inline-flex;align-items:center;vertical-align:-3px;color:var(--apagado)}
.bcIco svg{width:16px;height:16px}
.ovSelIco svg{width:15px;height:15px}

/* MOTOR — FILTRO GENERICO */
.ctrlFiltrosBtn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--tinta-2);font-size:12.5px;padding:4px 9px;border-radius:6px;cursor:pointer;font-family:inherit;height:24px}
.ctrlFiltrosBtn:hover{background:var(--surface);color:var(--tinta)}
.ctrlFiltrosBtn.soIcone{width:23.8px;height:24px;box-sizing:border-box;padding:4px 3px;gap:0;border-radius:12px;font-size:12px;font-weight:500;color:var(--apagado);justify-content:center} /* medido ALTAIR TR-08..11: mesmo padrao do grupo (23,8x24, pilula 12, padding 4 3, 12/500) e MESMO TOM dos vizinhos — antes era 23 / 12,5px / rgb(180,180,189), destoando */
.ctrlFiltrosBtn.ativo{color:var(--roxo-2)}
.ctrlFiltrosIc{display:inline-flex;align-items:center}
.ctrlFiltrosIc svg{width:15px;height:15px}
.filtroBadge{font-size:11px;font-weight:600;min-width:16px;height:16px;display:none;align-items:center;justify-content:center;padding:0 4px;border-radius:8px;background:var(--roxo);color:#fff;box-sizing:border-box}
.ctrlFiltrosBtn.ativo .filtroBadge{display:inline-flex}
/* chip de filtro ativo com limpar direto (medido: check roxo + closeSmall em circulo) */
.filtroChip{display:none;align-items:center;gap:6px;height:24px;padding:0 4px 0 8px;border-radius:6px;font-size:12px;color:var(--roxo-2)}
.filtroChip.on{display:inline-flex}
.filtroChipIc{display:inline-flex;color:var(--roxo-2)}
.filtroChipIc svg{width:14px;height:14px}
.filtroChipX{width:18px;height:18px;border-radius:50%;background:var(--surface-2);border:none;color:var(--tinta-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.filtroChipX svg{width:11px;height:11px}
.filtroChipX:hover{background:var(--surface);color:var(--tinta)}
.filtroPainel{position:fixed;z-index:100;width:520px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--borda-2);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.6);padding:12px 14px}
.filtroTopo{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.filtroTopo b{font-size:13.5px;color:var(--tinta)}
/* revisao geral (31/08): cabecalho ganhou Filtros salvos + menu suspenso (STUB, @1543/@1534 medidos
   proximos ao X — posicao exata do agrupamento nao foi medida, padrao defensavel + reversivel) */
.filtroTopoDir{display:flex;align-items:center;gap:2px}
.filtroSalvosBtn{background:none;border:none;color:var(--tinta-2);font-size:12px;cursor:pointer;font-family:inherit;padding:4px 6px;border-radius:5px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.filtroSalvosBtn svg{width:13px;height:13px}
.filtroSalvosBtn:hover{background:var(--surface-2);color:var(--tinta)}
.filtroMenuSusp{background:none;border:none;color:var(--apagado);cursor:pointer;padding:4px 6px;border-radius:5px;display:inline-flex;align-items:center;font-family:inherit}
.filtroMenuSusp:hover{background:var(--surface-2);color:var(--tinta)}
.filtroCorpo{display:flex;flex-direction:column;gap:8px}
.filtroVazio{color:var(--apagado);font-size:12.5px;padding:6px 2px}
.filtroLinha{display:flex;align-items:center;gap:8px}
.filtroPre{color:var(--apagado);font-size:12.5px;min-width:44px}
.filtroConector{color:var(--roxo-2);font-weight:600}
.filtroSel{background:var(--bg);border:1px solid var(--borda);border-radius:6px;color:var(--tinta);font-size:12.5px;padding:5px 8px;outline:none;font-family:inherit;cursor:pointer;color-scheme:dark}
.filtroSel.filtroOp{min-width:56px}
.filtroSel.filtroCampo,.filtroSel.filtroVal{flex:1;min-width:0}
.filtroLixo{color:var(--apagado);cursor:pointer;display:inline-flex;align-items:center;padding:4px;border-radius:5px;border:none;background:none;font-family:inherit}
.filtroLixo:hover{background:rgba(229,72,77,.12);color:#e5484d}
.filtroLixo svg{width:15px;height:15px}
.filtroRodape{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.filtroRodapeEsq{display:flex;align-items:center;gap:14px}
.filtroAdd,.filtroAddGrupo{background:none;border:none;color:var(--roxo-2);font-size:12.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.filtroAdd svg,.filtroAddGrupo svg{width:13px;height:13px}
.filtroLimpar{background:none;border:none;color:var(--apagado);font-size:12px;cursor:pointer;font-family:inherit}
.filtroLimpar:hover{color:#e5484d}
/* grupo aninhado ("Adicionar filtro agrupado") — o motor (passaGrupo/contaFiltros) ja avaliava
   f.tipo==='grupo' recursivamente antes disso existir na UI; so faltava desenhar.
   O-091 item 1: a borda tracejada (moldura parada) morreu -- separa do resto pelo mesmo jeito que
   .filtroCampoPicker/.ecPainel ja separam painel-dentro-de-painel na mesma tela: fundo um tom mais
   claro que o .filtroPainel ao redor (--surface-2 contra --surface), sem contorno nenhum. */
.filtroGrupoAninhado{background:var(--surface-2);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:8px}
.filtroGrupoCab{justify-content:flex-start}
.filtroGrupoTag{flex:1;font-size:11px;color:var(--apagado);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.filtroGrupoCorpo{display:flex;flex-direction:column;gap:8px;padding-left:4px}
.filtroAddSub{background:none;border:none;color:var(--roxo-2);font-size:12px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;align-self:flex-start}
.filtroAddSub svg{width:12px;height:12px}
/* picker "Selecionar filtro" (busca + lista de campos) — abre no lugar do antigo push direto de Status.
   EXCECAO ESCRITA (O-098, ORION, 15/09, decisao do ALTAIR): a ordem do Wilker matou o SELECT NATIVO
   -- caixa crua do sistema operacional, seta e lista do Windows, os 2 prints que ele mandou eram
   disso. Este picker JA esta no tema do app, ja e' desenho nosso -- nao e' o que ele reclamou, entao
   NAO converge pro `.dd`/`.ddMenu`/`.ddOp` comum. Dois motivos a mais: (1) ele tem os itens "em
   breve" (`.filtroCampoOpStub`, campo que ainda nao existe, mostrado desabilitado) -- o `.dd` padrao
   nao tem esse conceito, construir ali seria REFATORAR o padrao pra caber um caso que so' existe
   aqui, ordem de PADRONIZACAO nao autoriza isso; (2) matar um componente que funciona porque a
   arquitetura pareceria mais limpa e' o MESMO erro da O-097 (trocar o desenho do Wilker pelo do
   ORION sem ele pedir) -- nao repete no mesmo dia. MECANISMO fica diferente (painel fixed proprio,
   nao o toggle .ddMenu); APARENCIA foi ALINHADA pra parecer o mesmo componente aos olhos de quem
   usa -- raio do item, tamanho de fonte, altura, cor de texto parada/hover e o item ja selecionado
   agora seguem exatamente `.ddMenu`/`.ddOp` (abaixo). O fundo `--surface-2` (mais claro que o
   `--surface` do `.ddMenu`) e' a UNICA propriedade que continua diferente de proposito: este painel
   fica ABERTO SOBRE `.filtroPainel` (que já é `--surface`) -- um `.ddMenu` normal nunca abre dentro
   de outro painel, entao nunca precisou desse degrau de contraste; aqui precisa, senão o picker some
   contra o fundo de quem o' contem. */
.filtroCampoPicker{position:fixed;width:230px;max-height:300px;display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--borda-2);border-radius:var(--r-menu);box-shadow:0 8px 30px rgba(0,0,0,.6);padding:8px;z-index:210;gap:6px;box-sizing:border-box}
.filtroCampoPickerTit{font-size:11px;color:var(--apagado);font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:0 2px}
.filtroCampoBusca{background:var(--bg);border:1px solid var(--borda);border-radius:6px;color:var(--tinta);font-size:12.5px;padding:6px 8px;outline:none;font-family:inherit;color-scheme:dark}
.filtroCampoLista{overflow-y:auto;max-height:220px;display:flex;flex-direction:column;gap:1px}
.filtroCampoOp{height:32px;box-sizing:border-box;padding:0 11px;border-radius:6px;font-size:13px;color:var(--tinta-2);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.filtroCampoOp:hover{background:var(--surface);color:var(--tinta)}
.filtroCampoOp.sel{color:var(--roxo-2)}
.filtroCampoOpStub{color:var(--apagado)}
.filtroCampoOpStub:hover{color:var(--apagado)}
.filtroCampoEmBreve{font-size:10px;color:var(--apagado);flex:0 0 auto}
/* item ja selecionado, generico (O-098): mesmo token que .ddModo ja usava so' pra si -- promovido
   pra .ddOp puro, reusavel por qualquer menu fechado que precise marcar o valor atual (nenhum select
   nativo perdia essa pista, entao a troca de desenho nao pode perder tambem). */
.ddOp.sel{color:var(--roxo-2)}

/* filtro de data: input de parametro */
input[type="date"].filtroValParam{max-width:150px}
.filtroSel.filtroValData{flex:1;min-width:0}

/* ============ MOTOR 4 — FAVORITOS ============ */
#favBarra{display:none}
#favBarra.on{display:flex;align-items:center;gap:6px;height:30px;padding:0 16px;border-bottom:1px solid var(--borda);background:var(--sidebar);overflow-x:auto;flex:0 0 auto}
.favChip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--borda);border-radius:6px;padding:3px 8px;color:var(--tinta-2);font-size:12.5px;cursor:pointer;font-family:inherit;flex:0 0 auto;max-width:220px}
.favChip:hover{border-color:var(--borda-2);color:var(--tinta)}
.favChipIco{display:inline-flex;color:var(--apagado);flex:0 0 auto}
.favChipIco svg{width:13px;height:13px}
.favChipNome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.favChipX{display:inline-flex;color:var(--apagado);border-radius:4px;padding:1px;flex:0 0 auto}
.favChipX:hover{background:rgba(255,255,255,.12);color:var(--tinta)}
.favChipX svg{width:12px;height:12px}
.bcFav svg{width:16px;height:16px}
.bcFav.on{color:var(--amarelo,#f5c518)} /* regra unica agora, ver comentario da morta la em cima (~355) */
.favChevron{background:none;border:none;color:var(--apagado);cursor:pointer;font-size:10px;padding:2px 4px;border-radius:6px;line-height:1}
.favChevron:hover{background:var(--surface);color:var(--tinta)}
#favMenu{min-width:240px}
.favMenuOp{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 12px;cursor:pointer;border-radius:6px}
.favMenuOp:hover{background:var(--surface-2)}
.favMenuLbl{font-size:12.5px;color:var(--tinta)}
.favMenuChk{width:16px;display:inline-flex;justify-content:center;color:var(--roxo-2)}
.favMenuChk svg{width:14px;height:14px}

/* filtro: multi-select inline do valor (é A ou B numa condição) */
.filtroValWrap{position:relative;flex:1;min-width:0}
.filtroValBtn{width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--apagado)}
.filtroValBtn.preenchido{color:var(--tinta)}
.filtroValBtn.aberto{border-color:var(--roxo)}
.filtroValLista{position:fixed;min-width:190px;max-width:300px;max-height:220px;overflow-y:auto;background:var(--surface-2);border:1px solid var(--borda-2);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.6);padding:4px;z-index:210} /* ALTAIR TR-21: era absolute DENTRO do .filtroPainel (overflow:auto) e as opcoes abaixo da borda eram CLIPADAS — existiam, tinham caixa, e nao recebiam clique. Agora escapa do painel (fixed + posicao calculada no JS), como os outros menus do app. Radius/sombra no padrao unificado do TR-16 */
.filtroValOp{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;font-size:12.5px;color:var(--tinta);cursor:pointer}
.filtroValOp:hover{background:var(--surface)}
.filtroValOp input{accent-color:var(--roxo);flex:0 0 auto}
.filtroValOp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtroValVazio{padding:8px;color:var(--apagado);font-size:12px}

/* cartao Recentes do Overview */
.ovRecentes{padding:6px 4px}
.ovRecItem{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:13px;color:var(--tinta);border-radius:6px}
.ovRecItem:hover{background:var(--surface-2)}
.ovRecIco{color:var(--apagado);display:inline-flex;flex:0 0 auto}
.ovRecIco svg{width:14px;height:14px}
.ovRecNome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.ovRecPai{color:var(--apagado);font-size:12px;flex:0 0 auto;white-space:nowrap}

/* filtro: controles de texto (Contém + modo) e Último/Próximo (número + unidade) */
.filtroValTexto{flex:1;min-width:0}
.filtroValModo,.filtroValUni{flex:0 0 auto}
.filtroValNum{width:64px;flex:0 0 auto}
input.filtroValNum,input.filtroValTexto{color-scheme:dark}

/* cartao Workload (Carga por status) */
.ovWork{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.ovWorkRow{display:flex;align-items:center;gap:10px}
.ovWorkNome{flex:0 0 130px;font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--tinta-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovWorkBarWrap{flex:1;min-width:0;height:14px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.ovWorkBar{height:100%;border-radius:4px;min-width:3px}
.ovWorkN{flex:0 0 auto;font-size:12px;color:var(--tinta);font-weight:600;min-width:22px;text-align:right}

/* meta-icones do card do Quadro (descricao/anexo/checklist), condicionais */
.kbCardMetas{display:flex;align-items:center;gap:10px;margin-top:6px;color:var(--apagado)}
.kbMeta{display:inline-flex;align-items:center;gap:3px;font-size:11px}
.kbMeta svg{width:13px;height:13px}

/* busca global: cabecalho unico de secao e os dois campos novos do item (medido ALTAIR 30/08) */
.bmSecao{font-size:12px;font-weight:500;color:var(--apagado);padding:8px 14px 4px}
.bmIdade{margin-left:8px;font-size:12px;color:var(--apagado);flex:0 0 auto;white-space:nowrap}
/* O-114 (ORION, 16/09), varredura: faltava font-weight (nascia 400, todo avatar-de-pessoa do app
   e' 700) -- unico problema real aqui, tamanho 20x20/10px fica como esta' de proposito (variante
   compacta da busca global, redonda de verdade -- nao e' o mesmo defeito do #meAvatar). */
.bmAvatar{width:20px;height:20px;border-radius:50%;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;margin-left:8px}

/* usuario inativo continua NA LISTA, marcado — esconder quem esta atribuido a uma tarefa tira o caminho
   de volta. Ver o comentario em core.membros: 30 tarefas do Wilker estavam nesse estado. */
.ddOp .opInativo{margin-left:6px;font-size:11px;color:var(--tinta-3);font-style:italic}
.ddOp.inativo .tpAvatarMini{opacity:.55}

/* prioridade e menu de CAMPO e mesmo assim tem raio 8 (medido). Entrada propria da tabela de raios: e o
   caso que derrubou a divisao por familia, entao esta linha existe para NAO haver regra aqui. */
#tpPrioMenu{border-radius:var(--r-menu-acoes);width:200px;min-width:200px}
/* B04: os 4 niveis sao 14/400/28, diferente do .ddOp padrao (13/32) */
#tpPrioMenu .ddOpPrio{height:28px;font-size:14px;font-weight:400}
#tpPrioMenu .ddOpPrioIA{height:28px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px}
#tpPrioMenu .ddPrioAdd{height:48px;display:flex;align-items:center;gap:6px;padding:0 11px}
#tpPrioMenu .ddPrioAv{cursor:pointer}

/* cabecalho de secao dentro de menu (medido ALTAIR 30/08 no seletor de prioridade: 12px/500 cinza,
   faixa de 32). O de status usa o mesmo componente — mesma familia, mesma medida. */
.ddSecao{height:32px;display:flex;align-items:center;padding:0 8px;font-size:12px;font-weight:500;color:rgb(131,131,131)}

/* B05 seletor de responsavel do painel (ALTAIR): 280x390, busca no topo, secoes Eu/Pessoas */
#tpRespMenu{width:280px;max-height:390px;overflow-y:auto}
#tpRespMenu .ddBusca{width:calc(100% - 16px);margin:0 8px 6px;background:var(--bg);border:1px solid var(--borda);border-radius:7px;color:var(--tinta);padding:7px 10px;font-size:13px;outline:none;box-sizing:border-box}
#tpRespMenu .ddBusca:focus{border-color:var(--roxo)}

/* B03 (ALTAIR 30/08, verificacao 2): 247 largura, cabecalho 12/500 h28, item 12/400 h20, atual 12/700 negrito */
#tpStatusMenu{width:247px}
#tpStatusMenu .ddSecaoStatus{height:28px}
#tpStatusMenu .ddOpStatus{height:20px;font-size:12px;font-weight:400}
#tpStatusMenu .ddOpStatus.atual{font-weight:700}

/* B11: botao excluir subtarefa, so no hover da linha (padrao grupoAcoes) */
.tpSubDel{opacity:0;width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:rgb(131,131,131);cursor:pointer;transition:opacity .12s}
.tpSub:hover .tpSubDel{opacity:1}
.tpSubDel:hover{background:var(--surface-2);color:var(--vermelho)}

/* B12 (ALTAIR): menu de acoes da tarefa (...), 262x686, raio 12 — diverge da tabela de raios (8 e a
   familia padrao de menu de ACAO); este item especifico foi medido em 12. Rodape "Compartilhamento e
   permissoes" destacado: 14/500, faixa h32, separador acima. */
#tpMaisMenu{width:262px;max-height:686px;overflow-y:auto;border-radius:12px}
#tpMaisMenu .ddOpRodape{font-size:14px;font-weight:500;height:32px;border-top:1px solid var(--borda);margin-top:4px;padding-top:8px}

/* A1 (AREA1): setas de navegar entre tarefas sao VERTICAIS no ClickUp (^v empilhadas), nao <>.
   Mesmo icone (chevronDown) girado: prev aponta pra cima, next ja aponta pra baixo. */
.tpNavVert svg{transition:transform .1s}
#tpNavPrev.tpNavVert svg{transform:rotate(180deg)}

/* B2/B3/B4: contadores de subtarefa/link/anexo ao lado do pill de tipo. Tamanho NAO MEDIDO com
   precisao (spec so deu "icone + numero"); reuso a escala do .tpIdMini que ocupava o mesmo lugar. */
.tpContadorPill{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--tinta-2);margin-left:8px}
.tpContadorPill svg{width:13px;height:13px}

/* G1/G2 (AREA1): titulo de Subtarefas com contador "N disponivel" + barra de progresso (reusa a
   cor/altura da barra de checklist ja medida). Numero exato de "disponivel" NAO MEDIDO (assumido:
   subtarefas nao concluidas) — declarado, nao inventado como certeza. */
.tpSecSubHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px}
.tpSubDisp{font-size:12px;color:var(--tinta-2);flex:0 0 auto}
.tpSubBarra{flex:0 1 80px;height:4px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.tpSubBarra>span{display:block;height:100%;background:var(--verde)}

/* H1/I1 (AREA1): entradas inline no CORPO, substituindo os botoes que ficavam na barra inferior.
   Tamanho exato NAO MEDIDO (a spec so descreveu "linha" e "secao sempre visivel"); reuso a escala
   do .tpAcao que ja fazia o mesmo papel visual na barra. */
.tpDepEntrada,.tpAddChecklist{color:var(--tinta-2);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 4px;border-radius:6px}
.tpDepEntrada:hover,.tpAddChecklist:hover{background:var(--surface-2);color:var(--tinta)}

/* AGENDA (Google Calendar, so leitura, + tarefas do Wilker com vencimento). Tela nova, area
   aprovada pelo Wilker ("quero tudo") -- COMPROMISSOS do agenda.js (ARCTURUS), TAREFAS de
   cuTarefasAgenda(). .calNav/.calHoje/.calMes sao REUSADOS aqui (mesma classe do Planejador),
   estado (agendaModo/agendaRef) e proprio -- so o visual e compartilhado, nao o estado. */
/* BUG (Wilker, 01/09, "quero ela em toda largura"): max-width:900px era resquicio do desenho
   antigo em LISTA (largura de leitura, de proposito naquele formato). A grade que veio depois
   (ALTAIR, print do Oblivion) nunca devia ter herdado esse teto -- ninguem tirou. #agdWrap e ID
   exclusivo desta tela (conferido: nenhuma outra tela usa), entao sem risco de espremer outra
   tela ao soltar a largura aqui. */
/* O-081 volta 1 (14/09): moldura unica, 24px->28px. Tela propria (Agenda), flush. */
#agdWrap{padding:16px 28px}
.agdToolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.agdModos{display:flex;gap:2px;margin-left:auto;background:var(--surface);border:1px solid var(--borda);border-radius:8px;padding:2px}
.agdModoBtn{background:none;border:none;color:var(--tinta-2);font-size:12px;font-weight:500;padding:4px 10px;border-radius:6px;cursor:pointer}
.agdModoBtn:hover{color:var(--tinta)}
.agdModoBtn.ativo{background:var(--surface-2);color:var(--tinta)}
.agdAviso{font-size:12px;color:var(--tinta-2);background:var(--surface);border:1px solid var(--borda);border-radius:8px;padding:8px 12px;margin-bottom:10px}
.agdAvisoErro{color:var(--vermelho);border-color:var(--vermelho)}
/* o acordeao das atrasadas+sem-data que morava aqui (agdResumoLinha/agdAtrasadasToggle/
   agdAtrasadasChevron/agdSemDataTxt/agdAtrasadasLista) SAIU (fatia 3 da fusao com o Planejador,
   01/09) -- virou a barra lateral reusada dele (calLateral, ver mais abaixo). Removido, nao so
   escondido: nada no JS gera mais essas classes. */
/* position:relative: ancoradouro pra .calLateral (fatia 3, barra lateral reusada do Planejador),
   que e position:absolute;top:0;right:0 -- mesmo papel que .calCorpo ja tem la (item 38, comentario
   original: "a grade ganha largura total, como o ClickUp"). */
.agdCorpo{display:flex;flex-direction:column;gap:10px;position:relative}
.agdDia{background:var(--surface);border:1px solid var(--borda);border-radius:10px;padding:10px 14px}
.agdDiaCab{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;font-size:13px}
.agdDiaCab b{color:var(--tinta);text-transform:capitalize}
.agdDiaCab span{color:var(--tinta-2)}
.agdDiaCab.hoje b{color:var(--roxo-2)}
.agdDiaVazio{font-size:12px;color:var(--apagado);padding:2px 0}
.agdEv{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:8px;border-left:3px solid var(--agdCor,var(--roxo));background:color-mix(in srgb,var(--agdCor,var(--roxo)) 10%,transparent);text-decoration:none;margin-bottom:4px}
.agdEv:hover{background:color-mix(in srgb,var(--agdCor,var(--roxo)) 18%,transparent)}
.agdEvHora{flex:0 0 auto;width:70px;font-size:11px;color:var(--tinta-2);font-variant-numeric:tabular-nums;padding-top:1px}
.agdEvCorpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.agdEvTit{font-size:13px;color:var(--tinta);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agdEvTags{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tinta-2)}
.agdEvPalpite{color:var(--apagado);font-style:italic}
.agdEvMeet svg{width:12px;height:12px;vertical-align:-2px}
.agdEvRec{color:var(--apagado)}
/* O-091 item 1: divisoria parada, tracejado morreu -- vira o mesmo solido que toda outra divisoria
   do app ja usa (ex: .tpClAdd), nunca foi acao nem estado, so' separador de secao. */
.agdTarSec{margin-top:6px;padding-top:6px;border-top:1px solid var(--borda)}
.agdTar{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer;font-size:13px}
.agdTar:hover{background:var(--surface-2)}
.agdTarBolha{flex:0 0 auto;width:10px;height:10px;border-radius:50%;border:2px solid var(--apagado)}
.agdTarNome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta)}
.agdTarFeita .agdTarNome{color:var(--apagado);text-decoration:line-through}
.agdTarData,.agdTarHora{flex:0 0 auto;font-size:11px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.agdTarFlag{flex:0 0 auto;display:flex}
.agdTarFlag svg{width:12px;height:12px}
.agdNovoBtn{margin-left:0;padding:0 12px;height:24px;border-radius:6px;font-size:12px}

/* MODAL "Novo compromisso" (fase 2, agenda.criar) -- mesma familia visual do #swotModal/.imBox,
   #compModal e o proprio elemento reusado (id fixo, innerHTML trocado a cada abertura).
   BUG (Wilker, 01/09, "abre o popup e nao deixa eu fechar"): faltava esta regra. Sem
   #compModal{display:none}, remover .on em fechar() nao escondia nada -- o .compOverlay
   (position:fixed) pinta em tela cheia INDEPENDENTE do display do pai, entao o modal ficava
   sempre visivel desde o primeiro innerHTML, e Cancelar/X pareciam nao fazer nada. Mesmo
   mecanismo do #swotModal/#inputModal (linha ~805/2141), so que aqui nunca foi escrito. */
#compModal{display:none}
#compModal.on{display:block}
.compOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:130;display:flex;align-items:flex-start;justify-content:center}
.compBox{margin-top:8vh;width:480px;max-width:94vw;max-height:84vh;background:var(--surface);border:1px solid var(--borda-2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
/* pedido (Wilker, 01/09, 2a rodada): "maior, dividido em duas colunas, igual quando abro uma
   tarefa" -- ele confirmou depois que e SOMA, nao troca: a tipografia/campos do primeiro redesign
   (.ntNome, .ntCampo, color-scheme:dark) continuam, so o TAMANHO e o FORMATO da caixa mudam pra
   bater com abrirTarefa() (tpBody/tpColEsq/tpColDir). Escala menor que a da tarefa (1240px) de
   proposito: o compromisso tem bem menos campo que uma tarefa com atividade/comentario -- copiar
   o tamanho exato deixaria a caixa maior que o conteudo, oca. O que viaja e a FORMA (grande, 2
   colunas), nao o pixel exato. */
.compBoxGrande{margin-top:6vh;width:min(920px,94vw);max-height:88vh}
/* O-009 ARMAZEM (ORION 08/09). Card por perfil no molde do app: borda/raio/sombra via `.card`
   (ja existe), respiro entre perfis e entre os dois blocos internos (Pixel/Projecao) na escala
   de espacamento, nunca numero solto. `.dado-ausente` (ja existe, do motor de produtividade)
   cobre o caso pixel/projecao null sem inventar segundo mecanismo pro mesmo problema. */
.compCorpo:has(.armzPerfil){display:flex;flex-direction:column;gap:var(--sp-entre-cards)}
.armzPerfil{padding:var(--card-pad)}
.armzPerfilNome{font-size:13.5px;font-weight:650;color:var(--tinta);margin-bottom:var(--sp-linha)}
.armzPerfilGrade{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-entre-cards)}
.armzBloco{border:1px solid var(--borda);border-radius:var(--card-r);padding:var(--card-pad)}
.armzBlocoRot{font-size:11px;font-weight:600;color:var(--apagado);letter-spacing:.03em;margin-bottom:4px}
/* trava do Maestro: SO rotulo + botao, nunca campo com valor. */
.armzTokenLinha{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-linha)}
.armzTokenRot{font-size:13px;color:var(--tinta)}
.armzContasLinha{display:flex;flex-direction:column;gap:var(--sp-linha);margin-top:var(--sp-entre-cards)}
.armzContasGrupo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.compTopo{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--borda);font-size:14px;color:var(--tinta)}
.compBoxGrande .compTopo{padding:16px 20px;font-size:16px}
.compCorpo{padding:16px;overflow-y:auto}
/* a grade de 2 colunas -- mesmo espirito de .tpBody{display:flex}/.tpColEsq{flex:1}/
   .tpColDir{flex:0 0 559px}, largura da direita reduzida (340 contra 559) porque aqui e so
   propriedades curtas (tipo/repete/cliente), nao um feed de atividade. */
.compCorpoGrid{display:flex;flex:1;min-height:0;padding:0;overflow:hidden}
.compColEsq{flex:1;min-width:0;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column}
.compColDir{flex:0 0 320px;min-width:260px;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--borda);background:var(--bg)}
.compColDirTit{font-size:11px;color:var(--tinta-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
/* .ntCampo normalmente fica lado a lado numa fileira que se ajusta ao conteudo (.ntCampos, flex-
   wrap); na coluna direita, estreita, empilha -- cada um ocupa a largura toda, como uma lista de
   propriedades (mesma ideia do .tpCampo da tarefa, so que o campo aqui e a propria pilula). */
.compColDir .ntCampo{width:100%;justify-content:flex-start}
.compColDir .ddMenu{width:100%}
.compErro{background:rgba(229,72,77,.12);border:1px solid var(--vermelho);color:var(--vermelho);border-radius:8px;padding:8px 12px;font-size:12.5px;margin:12px 20px 0}
/* MODAL DE QUEST redesenhado (BUG 13): uma coluna so (.compBox, nao .compBoxGrande), reusando os
   padroes .tpTipo/.tpTipoLinha/.tpCampo/.tpGrid da Tarefa em vez do shell de duas colunas do
   compromisso -- Quest so tem 2-3 campos, forcar duas colunas deixava ~60% vazio (medido ALTAIR). */
.questQuandoCampo{margin:10px 0 4px}
.questDescLinha{margin-top:12px}
/* popover de Quando: mesma familia visual do calendario da Tarefa (.ddCal*), so mais estreito --
   o de la (479px) reserva espaco pros 8 atalhos que a Tarefa tem e a Quest nao usa. BUG 14
   (ALTAIR, medido: popover cortado por .compCorpo, campo de Hora inteiro invisivel): o popover
   deixou de ser filho do modal -- agora e um .avMenu/.menuFlut igual a pickerListaFlut/
   menuFlutuante (position:fixed, anexado ao body, flip automatico se nao couber embaixo), por
   isso so precisa do padding/largura aqui, o .avMenu de base ja da fundo/borda/sombra/scroll. */
.questQuandoPop{width:260px;padding:4px}
.questHoraLinha{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--borda);font-size:12.5px;color:var(--tinta-2)}
.questHoraLinha input[type=time]{background:var(--surface);border:1px solid var(--borda-2);border-radius:6px;color:var(--tinta);padding:4px 8px;font-size:12.5px;font-family:inherit;color-scheme:dark}
/* pedido (Wilker, 01/09): "tira a cara do Oblivion, usa o design de quando abre uma tarefa" --
   #compTitulo reusa .ntNome (o campo grande/sem borda do nome da tarefa em modalNovaTarefa), so
   que la o pai e flex-column (esticaria sozinho); aqui o pai tambem virou flex-column
   (.compColEsq), mas width:100% continua precisando vir daqui -- <input> nao estica sozinho. */
#compTitulo{width:100%;margin-bottom:14px;font-size:24px}
.compLinhaDupla{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.compDiaInteiroWrap{justify-content:flex-end}
.compCheck{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;color:var(--tinta-2);font-weight:400;cursor:pointer}
/* BUG (Wilker, 01/09, print real): checkbox branco puro do navegador, destoando do resto do app.
   Nao e custom em lugar nenhum do Nova -- confirmei em .tpClItem (checklist da tarefa), que TAMBEM
   e <input type=checkbox> nativo: o que muda e accent-color, que recolore so o preenchimento do
   estado marcado pra roxo, mantendo o controle nativo (sem appearance:none nem caixa fake). Mesmo
   tamanho que ja tinha (15x15), so faltava essa linha. */
.compCheck input{width:15px;height:15px;accent-color:var(--roxo);cursor:pointer}
/* color-scheme:dark: sem isso o navegador desenha o iconezinho de calendario/relogio e o popup
   nativo do date/time no tema CLARO dele -- destoava do resto do app (queixa do Wilker, "os
   campos de data/hora nativos, com o iconezinho do navegador"). So o icone/popup mudam; o
   COMPORTAMENTO do input continua identico. */
#compData,#compHoraIni,#compHoraFim,#compRepeteAte{color-scheme:dark}
.ntCampos{margin-bottom:12px}
.compColDir .ntCampoWrap{margin-bottom:0}
#compDescricao{width:100%;background:var(--bg);border:1px solid var(--borda);border-radius:8px;color:var(--tinta);padding:10px 12px;font-size:13px;outline:none;resize:vertical;font-family:inherit;min-height:160px;flex:1}
#compDescricao:focus{border-color:var(--roxo)}
.compRodape{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--borda)}
/* O-075 (13/09): a regra abaixo nasceu estreita (so' `#compSalvar`, um ID) e nunca foi varrida --
   MESMO defeito do dia inteiro (corte de texto, altura, .listaMais): corrigido num irmao, dormente
   nos outros. `.ntCriar` normalmente fica colado a um `.ntCriarChv`/`.emComporEnviarSeta` (split
   button) e por isso so' arredonda o lado esquerdo -- sozinho, sem seta do lado, o canto direito
   fica reto e o botao sai visivelmente torto (achado real, Wilker no modal de Parceiros, O-075).
   Regra generica: QUALQUER `.ntCriar` dentro de `.compRodape` arredonda os 2 lados, EXCETO o unico
   caso real de split-button dentro de `.compRodape` hoje (`#emComporEnviar`, que tem
   `.emComporEnviarSeta` colada). Mata a causa pra qualquer modal futuro, nao so' os de hoje. */
.compRodape .ntCriar:not(#emComporEnviar){border-radius:8px}
/* ALTAIR mediu 1px de sobra (13/09): `.ntSel` (Cancelar) e' 7px em todo o app, `.ntCriar` acima
   virou 8px so' aqui dentro do rodape -- os dois irmaos do mesmo `.compRodape` ficavam com raio
   diferente. Nao mexe no `.ntSel` global (usado em 20+ lugares fora daqui, com motivo proprio pra
   ser 7px) -- so' iguala DENTRO do rodape, mesma tecnica de escopo por contexto de sempre. */
.compRodape .ntSel{border-radius:8px}

/* POPUP DE EVENTO (pedido Wilker, 01/09): mesma casca de #compModal (compOverlay/compBox/compTopo/
   compCorpo/compRodape, ja reusados), so o CONTEUDO interno e novo -- linhas de leitura, nao
   formulario. #agdEventoModal SEPARADO de #compModal (ids distintos) mas com o MESMO mecanismo
   display:none/.on -- e exatamente a falta dessa regra que quebrou o outro modal hoje mais cedo,
   entao aqui ja nasce certo. */
#agdEventoModal{display:none}
#agdEventoModal.on{display:block}
/* MODAL DE QUEST -- MESMO BUG que #compModal ja teve e o comentario acima ja avisa: sem esta regra
   por id, .compOverlay (position:fixed) pinta em tela cheia independente do .on do pai, entao
   remover .on em fechar() nao esconde nada e o modal fica preso pra sempre (BUG achado por ALTAIR,
   acionando de verdade: "trava em Criando..." -- a quest era criada, so o modal nao fechava porque
   nunca esteve escondido pra comecar. Faltou eu seguir o proprio aviso do comentario acima). */
#questModal{display:none}
#questModal.on{display:block}
/* O-075 (13/09), VARREDURA COMPLETA dos modais do app depois do Wilker travar no de Parceiros --
   MESMO bug do #compModal/#agdEventoModal/#questModal acima, nunca varrido pros irmaos que usam a
   mesma casca `.compOverlay`/`.compBox` com `m.classList.add/remove('on')`. Confirmado UM A UM
   (nao so' por grep) antes de escrever, porque grep largo demais pega comentario e grep estreito
   demais erra regra composta -- os dois erraram antes de eu chegar aqui:
     REALMENTE QUEBRADOS (fechar() so' tira '.on', .compOverlay ficava preso em tela cheia):
     armazemModal, vincModal, vincContaModal, parceiroModal, emMarcarTodasModal.
     NAO QUEBRADOS HOJE, mas pelo motivo ERRADO: emAssinaturaModal e emComporModal tambem nao
     tinham a regra, só' nao apareciam porque o proprio `fechar()` deles faz `m.innerHTML=''` --
     sem `.compOverlay` no DOM, nao ha' o que pintar. Funciona por acidente de outra linha, nao por
     design -- mesma familia de "defeito dormente com data marcada pra acordar" (basta alguem tirar
     aquele innerHTML='' num refactor futuro sem saber que ele carregava a responsabilidade toda).
     Ganham a regra tambem, sem mudar nada visivel hoje -- so' o `.on` passa a significar algo por
     si so', em vez de depender de uma segunda linha em silencio pra isso. */
#armazemModal,#vincModal,#vincContaModal,#parceiroModal,#emMarcarTodasModal,#emAssinaturaModal,#emComporModal,#splitClienteModal,#addClienteParceiroModal,#ecGerModal{display:none}
#armazemModal.on,#vincModal.on,#vincContaModal.on,#parceiroModal.on,#emMarcarTodasModal.on,#emAssinaturaModal.on,#emComporModal.on,#splitClienteModal.on,#addClienteParceiroModal.on,#ecGerModal.on{display:block}
/* PERSEUS, O-076 (14/09): dois modais novos (split de cliente, adicionar cliente ao parceiro)
   usam a MESMA casca .compOverlay/.compBox -- entram na regra acima, mesma familia de bug que
   a O-075 varreu; nasce certo em vez de descoberto depois.
   ORION, O-079 (14/09): `#ecGerModal` (gerenciar lista do motor Escolher-ou-Criar) entra na
   mesma regra pelo mesmo motivo -- nasce com o par certo desde a primeira linha, nunca precisa
   de bug real pra ganhar isto depois. */
/* ══════════════════════════════════════════════════════════════════════════
   MOTOR "ESCOLHER OU CRIAR" (O-079, 14/09) -- peca unica e reusavel, ver
   nova.js (campoEscolherOuCriar/abrirGerenciarOpcoes/abrirEscolherFusao) pro
   contrato completo. `.ecInput` herda o visual de QUALQUER campo de texto de
   modal (`.ntCampo`, ja usado em Nome/Chave Pix/Apelido) -- so' ganha layout
   proprio aqui, nunca reestiliza a base. */
.ecCampo{position:relative;display:flex;align-items:center;gap:6px}
.ecInput{flex:1;min-width:0;width:100%}
.ecGerBtn{flex:0 0 auto;background:none;border:none;color:var(--apagado);cursor:pointer;font-size:15px;padding:4px 6px;border-radius:6px;line-height:1}
.ecGerBtn:hover{background:var(--surface-2);color:var(--tinta)}
.ecPainel{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface-2);border:1px solid var(--borda-2);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.4);max-height:220px;overflow-y:auto;z-index:60;padding:4px}
.ecOp,.ecCriarOp{padding:7px 10px;border-radius:6px;font-size:12.5px;color:var(--tinta);cursor:pointer;overflow-wrap:break-word}
.ecOp:hover,.ecCriarOp:hover{background:var(--surface)}
.ecCriarOp{color:var(--roxo-2);font-weight:600;border-top:1px solid var(--borda);margin-top:2px;padding-top:9px}
.ecVazio{padding:10px;color:var(--apagado);font-size:12.5px;font-style:italic}
/* lista plural de especialidades no modal de parceiro (O-088 volta 1) -- o campoEscolherOuCriar
   acima so' escolhe UMA por vez, quem acumula e' esta lista; reusa .finPill (mesma pilula da
   ficha) so' com um X de remover a mais, nunca reestiliza a base. */
.pcEspChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pcEspChip{display:inline-flex;align-items:center;gap:5px}
.pcEspChipX{background:none;border:none;color:inherit;opacity:.6;cursor:pointer;padding:0;line-height:1;display:flex}
.pcEspChipX:hover{opacity:1}
.pcEspChipX svg{width:10px;height:10px}
/* linha do gerenciador -- reusa .ntSel pros botoes (mesma decisao da O-075: kit generico do
   app, so' quebra quando fica sozinho sem seta, e nenhum destes tem seta do lado). */
.ecGerLinha{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--borda)}
.ecGerLinha:last-child{border-bottom:none}
.ecGerNome{flex:1;min-width:0;font-size:13px;color:var(--tinta);overflow-wrap:break-word}
.ecGerUso{flex:0 0 auto;font-size:11px;color:var(--apagado)}
.ecFundirLista{max-height:240px;overflow-y:auto;margin:8px 0}
.agdEvPopLinha{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--borda)}
.agdEvPopLinha:last-child{border-bottom:none}
.agdEvPopIco{flex:0 0 auto;color:var(--apagado);display:flex;align-items:center;padding-top:1px}
.agdEvPopIco svg{width:15px;height:15px}
.agdEvPopCorpo{display:flex;flex-direction:column;gap:2px;min-width:0}
.agdEvPopLbl{font-size:11px;color:var(--tinta-3);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.agdEvPopVal{font-size:13.5px;color:var(--tinta);line-height:1.4}
.agdEvPopTipoDot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.agdEvPopPalpite{color:var(--apagado);font-style:italic;font-size:12px}
.agdEvPopVazio{color:var(--apagado)}
/* MOVER (Wilker, 03/09): forma inline no rodape do popup -- some/aparece no lugar do botao Mover,
   sem modal aninhado. Mesmos inputs nativos date/time do resto do app (sem lib nova). */
.agdEvPopMoverForm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.agdEvPopMoverForm[hidden]{display:none}
.agdEvPopMoverForm input[type="date"],.agdEvPopMoverForm input[type="time"]{height:32px;border-radius:7px;background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta);font-size:12.5px;padding:0 8px}
/* .ntCriar normalmente e <button> so-texto; aqui vira <a> com icone+texto (Abrir no Google) --
   precisa das regras de alinhamento/decoracao que o botao puro nao precisava. */
#agdEvPopAbrir{display:inline-flex;align-items:center;gap:7px;text-decoration:none;border-radius:8px}
#agdEvPopAbrir svg{width:14px;height:14px}

/* ===== AGENDA: GRADE DE CALENDARIO ==========================================
   Estrutura copiada do print da agenda do Oblivion mandado pelo Wilker (topo com
   Hoje/setas + seletor de mes e ano + abas + contador + botao, faixa de 7 cards
   de tipo, e grade de celulas com o evento como barra dentro do dia).
   O print e tema CLARO; o Nova e escuro -- viaja a ESTRUTURA, nao a cor de fundo.
   As cores dos EVENTOS viajam, porque sao semanticas (uma por tipo).
   Semana e Dia usam eixo de 24h -- pedido literal: "dia (as 24h)".
   NAO confundir com a rotina do Inicio, que e 8h-21h de proposito.        */
.agdTopo{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.agdNavGrupo{display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--borda);border-radius:8px;padding:2px}
.agdSel{background:var(--surface);border:1px solid var(--borda);border-radius:8px;color:var(--tinta);font-size:12px;font-weight:500;padding:5px 8px;cursor:pointer;outline:none}
.agdSel:hover{border-color:var(--borda-2)}
.agdPeriodo{font-size:12px;color:var(--tinta-2);white-space:nowrap}
.agdSync{margin-left:auto;font-size:11px;color:var(--apagado);white-space:nowrap}
.agdNovoBtn{white-space:nowrap}

/* --- faixa de cards de tipo (7 tipos de compromisso + Task = 8, BUG 11) --- */
.agdCards{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--sp-entre-cards);margin-bottom:14px}
.agdCard{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--borda);border-left:3px solid transparent;border-radius:8px;padding:8px 10px;min-width:0;box-shadow:var(--card-sh)}
.agdCard.temValor{border-left-color:var(--agdCor,var(--azul))}
.agdCardNome{font-size:11px;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agdCard:not(.temValor) .agdCardNome{color:var(--apagado)}
.agdCardNum{font-size:20px;font-weight:600;color:var(--apagado);line-height:1.1;font-variant-numeric:tabular-nums}
.agdCard.temValor .agdCardNum{color:var(--agdCor,var(--azul))}
.agdCardPct{font-size:10px;color:var(--apagado)}

/* --- barra lateral da Agenda: lista as Quests do recorte (BUG 11, "todas as quests da view") --- */
.agdSideTipos{padding:14px 10px}
.agdSideTit{font-size:11px;font-weight:600;color:var(--apagado);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.agdSideTipo{display:flex;align-items:center;gap:7px;padding:5px 2px;font-size:12.5px;color:var(--tinta-2)}
/* BUG 12 (Wilker): a linha inteira e clicavel (abre pra editar) -- o check (.questChkMini,
   reusado) e quem marca. cursor:pointer + hover pra parecer o que e, mesmo criterio de qualquer
   outra linha clicavel do app. */
.agdSideQuest{cursor:pointer;border-radius:6px}
.agdSideQuest:hover{background:var(--surface-2)}
.agdSideNome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agdSideNum{font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums}
.agdSideVazio{font-size:12px;color:var(--apagado);padding:5px 2px}

/* --- MES: grade de 7 colunas --- */
/* BUG (Wilker, 01/09, print real): a barra lateral colapsada (.calLatColapsada, position:absolute;
   right:0) cobria a ultima coluna (sabado) -- ela nao empurra, ela sobrepoe. O Planejador nunca
   teve esse problema porque RESERVA o espaco no container (.calGradeWrap{margin-right:49px},
   confirmado no CSS dele) -- a grade nao chega ate a borda que a lateral ocupa. Mesmo valor aqui,
   nas 3 views (Mes/Semana-4dias/Dia -- ver .agdGradeHoras abaixo). Quando ela ABRE (240px) pode
   sobrepor de verdade -- e temporario e ele mesmo abriu, igual ao Planejador. */
.agdGradeMes{background:var(--surface);border:1px solid var(--borda);border-radius:10px;overflow:hidden;margin-right:49px}
.agdCabDias{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface-2);border-bottom:1px solid var(--borda)}
.agdCabDias>div{padding:7px 0;text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--tinta-2)}
.agdCels{display:grid;grid-template-columns:repeat(7,1fr)}
.agdCel{min-height:104px;border-right:1px solid var(--borda);border-bottom:1px solid var(--borda);padding:5px 5px 7px;cursor:pointer;display:flex;flex-direction:column;gap:3px;overflow:hidden}
/* fatia 4 (arrastar tarefa pro dia): mesmo tratamento visual de .calCel.calDrop no Planejador. */
.agdCel.calDrop{background:var(--roxo-suave);outline:2px dashed var(--roxo)}
.agdCel:nth-child(7n){border-right:none}
.agdCel:hover{background:rgba(255,255,255,.02)}
/* BUG (Wilker, 01/09, "parece um buraco"): preto translucido POR CIMA do --surface do container
   ficava mais escuro que a parede do app e que o proprio container -- exatamente o "buraco".
   Confirmado nas 2 pontas dele: .agdCel/.agdSlot/.agdColDia nunca tiveram fundo proprio (so este
   .agdForaMes tinha), e a barra de evento/chip de tarefa tambem nunca usaram preto (agdChipTar tem
   ZERO background -- so o texto sobre o fundo da celula; agdBarra e cor solida do tipo; agdEvGrade
   mistura a cor do tipo com --surface, nunca com preto) -- entao o "fundo preto do evento" que ele
   via era este mesmo bug: o evento sentado numa celula fora-do-mes escurecida. O Planejador resolve
   isso do jeito dele (celula fora usa a MESMA cor da parede, --bg, sem overlay nenhum) -- aqui o
   principio e o mesmo (nenhum overlay escuro), mas o valor certo pra ESTA grade e --surface (a cor
   do CONTAINER dela, .agdGradeMes), nao --bg -- --bg destoaria do card em vez de bater com ele. A
   distincao de "fora do mes" continua so pelo numero (.agdForaMes .agdCelNum ja usa var(--apagado),
   nao mudou). */
.agdForaMes{background:var(--surface)}
.agdForaMes .agdCelNum{color:var(--apagado)}
.agdCelNum{align-self:center;font-size:12px;color:var(--tinta-2);font-variant-numeric:tabular-nums;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;flex:0 0 auto}
.agdCelNum.hoje{background:var(--azul);color:#fff;font-weight:600}
.agdCelItens{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden}

/* --- barra de evento dentro da celula --- */
.agdBarra{display:block;font-size:11px;line-height:1.35;padding:3px 6px;border-radius:4px;color:#fff;background:var(--agdCor,var(--azul));text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.agdBarra:hover{filter:brightness(1.12)}
.agdBarra b{font-weight:600;font-variant-numeric:tabular-nums}
.agdFeriado{background:#7a5c2e;color:#f2e6d0}
.agdChipTar{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tinta-2);padding:2px 5px;border-radius:4px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agdChipTar:hover{background:var(--surface-2);color:var(--tinta)}
.agdTarFeita{opacity:.55;text-decoration:line-through}

/* --- SEMANA / DIA: eixo de 24 horas --- */
.agdGradeHoras{background:var(--surface);border:1px solid var(--borda);border-radius:10px;overflow:hidden;margin-right:49px}
.agdGhCab{display:flex;background:var(--surface-2);border-bottom:1px solid var(--borda)}
/* BUG (Wilker, 01/09, print dele): 56px cabia "23:00" (o eixo embaixo) mas cortava "Dia todo"
   (o canto de cima) -- as duas colunas TEM que ter a mesma largura pra alinhar com os dias por
   baixo, entao o fix e nas DUAS juntas, nao so nesta. */
.agdGhCanto{flex:0 0 64px;border-right:1px solid var(--borda)}
.agdGhCantoTxt{font-size:10px;color:var(--apagado);display:flex;align-items:center;justify-content:center;white-space:nowrap}
.agdGhCabs{flex:1;display:grid;grid-template-columns:repeat(var(--agdCols,7),1fr)}
.agdCabDia{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;border-right:1px solid var(--borda)}
.agdCabDia:last-child{border-right:none}
.agdCabNome{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--tinta-2)}
.agdCabNum{font-size:15px;color:var(--tinta);font-variant-numeric:tabular-nums;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%}
.agdCabDia.hoje .agdCabNum{background:var(--azul);color:#fff;font-weight:600}
.agdCabDia.hoje .agdCabNome{color:var(--azul)}
.agdGhFaixa{display:flex;border-bottom:1px solid var(--borda);min-height:26px}
.agdGhFaixaCels{flex:1;display:grid;grid-template-columns:repeat(var(--agdCols,7),1fr)}
.agdFaixaCel{border-right:1px solid var(--borda);padding:3px 4px;display:flex;flex-direction:column;gap:2px;min-width:0}
.agdFaixaCel:last-child{border-right:none}
/* BUG 7 (Wilker, print real: quest e compromisso as 10h um em cima do outro): a primeira correcao
   dividiu a LARGURA por colisao (50%/50%) e ele recusou -- "quero ela inteiro nao dividido...
   imagina 1000 quest, evento e task, as linhas tem que descer, flexivel pra baixo". Trocou
   posicionamento absoluto (top calculado por minuto, HORA_PX fixo) por layout de FLUXO: .agdGhCorpo
   virou um CSS GRID de 64px (eixo) + N colunas de dia, com 24 LINHAS de altura variavel
   (minmax(48px,auto)) -- cada hora cresce sozinha conforme quantos itens tem, sem afetar as
   outras horas. Os filhos (.agdHoraLinha + .agdHoraCel x N, repetidos 24x) entram em ORDEM DE
   LEITURA (hora 0: rotulo + N celulas; hora 1: rotulo + N celulas...) e o grid-auto-flow padrao
   (row) os posiciona sozinho -- nenhum grid-row/grid-column manual no HTML. */
.agdGhCorpo{display:grid;grid-template-columns:64px repeat(var(--agdCols,7),1fr);grid-template-rows:repeat(24,minmax(48px,auto));max-height:calc(100vh - 340px);overflow-y:auto}
/* cartao "Agenda" do Inicio (Wilker, 03/09): reusa a MESMA grade, mas dentro de #hAgenda o scroll
   de verdade e o do proprio .homeCardBody (altura limitada pelo card, ja com overflow-y:auto) --
   sem isto, o max-height calc(100vh-340px) da secao (pensado pra ocupar a tela inteira) cria um
   scroll ANINHADO dentro de um card de metade de tela, dois lugares "rolando" ao mesmo tempo. Os
   demais --agdCols continuam responsivos (1 coluna aqui, sempre 'dia'), sem overflow horizontal. */
#hAgenda .agdGhCorpo{max-height:none}
.agdHoraLinha{box-sizing:border-box;border-bottom:1px solid var(--borda);border-right:1px solid var(--borda);position:relative}
.agdHoraLinha span{position:absolute;top:-7px;right:6px;font-size:10px;color:var(--apagado);font-variant-numeric:tabular-nums;background:var(--surface);padding:0 2px}
.agdHoraCel{box-sizing:border-box;border-bottom:1px solid var(--borda);border-right:1px solid var(--borda);display:flex;flex-direction:column;gap:2px;padding:2px 3px;cursor:pointer;min-width:0;position:relative}
.agdHoraCel:hover{background:var(--surface-2)}
/* O-091 item 1: fica -- mesma familia/motivo de .calCel.calDrop (nova.css, secao "drag no calendário": so' existe durante o arrasto). */
.agdHoraCel.calDrop{outline:2px dashed var(--roxo);outline-offset:-2px}
/* linha da hora atual (Wilker, pedido do cartao "Agenda" do Inicio -- vale pra secao inteira
   tambem, mesma grade/renderAgendaGrade): proporcional DENTRO da celula da hora corrente. A
   celula ja estica pra altura da linha do grid (CSS Grid align-items:stretch padrao), entao
   top:% acompanha a altura real mesmo variavel (BUG 7 so proibiu altura proporcional a DURACAO
   do compromisso -- isto e so um marcador de "agora", nao volta ao posicionamento antigo). */
.agdHoraCelAgora{z-index:1}
.agdAgoraLinha{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--vermelho);pointer-events:none;z-index:2}
.agdAgoraPonto{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--vermelho)}
/* item de evento/quest: ERA position:absolute com top/height calculados (a duracao virava altura).
   Fluxo normal agora -- o item so ocupa a celula da HORA DE INICIO e empilha com os vizinhos dessa
   hora (ordem de inicio, ja vem assim de itensPorDiaHora no JS). Duracao do compromisso virou TEXTO
   ("10:00-12:00" em vez de so "10:00") -- opcao combinada com ALTAIR/Wilker: informacao exata, sem
   reintroduzir "item que atravessa varias linhas" (a mesma convivencia estranha que ele rejeitou
   no eixo horizontal, so que vertical). */
.agdEvGrade{display:flex;flex-direction:column;gap:1px;padding:3px 6px;border-radius:5px;border-left:3px solid var(--agdCor,var(--azul));background:color-mix(in srgb,var(--agdCor,var(--azul)) 26%,var(--surface));text-decoration:none;overflow:hidden;box-sizing:border-box;cursor:pointer;flex:0 0 auto}
.agdEvGrade:hover{background:color-mix(in srgb,var(--agdCor,var(--azul)) 40%,var(--surface))}
.agdEvGrade b{font-size:10px;color:var(--tinta-2);font-variant-numeric:tabular-nums;font-weight:600}
.agdEvGrade span:not(.questChkMini){font-size:11.5px;color:var(--tinta);line-height:1.25;overflow:hidden;text-overflow:ellipsis}
/* quest: hora+titulo lado a lado (BUG 6, ja resolvido antes da reescrita, continua valendo) + o
   check (BUG 8: elemento proprio, verde quando concluida -- NUNCA opacidade/risco no chip, decisao
   dele so pra Quest, .agdTarFeita/chipTar de tarefa continuam intocados). */
.agdEvGradeQuest{flex-direction:row;align-items:center;gap:5px}
.agdEvGradeQuest b{flex:0 0 auto}
/* BUG 9 (Wilker, print real, "ficou uma kibe"): .questChkMini e um <span>, e o seletor generico
   ":span" acima aplicava flex:1 nele tambem -- o check esticava pra preencher o espaco do titulo
   (74x13px medido, virava elipse com border-radius:50%). :not(.questChkMini) tira o check da regra
   generica do span de texto NA RAIZ, em vez de brigar depois com mais especificidade -- ele tem a
   propria regra logo abaixo, com tamanho fixo de verdade. */
.agdEvGradeQuest span:not(.questChkMini){flex:1;min-width:0;white-space:nowrap}
.questChkMini{width:13px;height:13px;border-radius:50%;border:2px solid var(--borda-2);flex:0 0 auto;cursor:pointer}
.questChkMini.feito{background:var(--verde);border-color:var(--verde)}

@media(max-width:1500px){.agdCards{grid-template-columns:repeat(4,1fr)}}

/* ===== E-MAIL (SPEC: Nova-QA/SPEC-EMAIL.md) — Fase 1 ===== */
.railBadge{position:absolute;top:2px;right:6px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--vermelho);color:#fff;font-size:9.5px;font-weight:700;line-height:15px;text-align:center;font-variant-numeric:tabular-nums}
.railBtn{position:relative}
.emContaLinha{display:flex;align-items:center;gap:8px}
.emContaDot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.emContaNome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emAddConta{color:var(--roxo)}
.emSyncTag{font-size:10px;color:var(--apagado);white-space:nowrap;margin-left:4px}
.emSyncErro{color:var(--vermelho)}
/* ===== Fase 6: barra lateral (contadores reais, Importante, Mais/Menos, Marcadores) ===== */
.emPastasSecundarias{display:none}
.emPastasSecundarias.aberto{display:block}
.emMaisMenosBtn{color:var(--apagado);font-size:12.5px;justify-content:center}
.emMaisMenosBtn:hover{background:var(--surface-2);color:var(--tinta-2)}
.emMarcadorLinha{gap:8px}
.emMarcadorDot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--tinta-3)}
.emMarcadorNome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emMarcadorRenomear{background:none;border:none;color:var(--apagado);display:none;padding:2px;cursor:pointer;flex:0 0 auto}
.emMarcadorRenomear svg{width:12px;height:12px}
.emMarcadorLinha:hover .emMarcadorRenomear{display:inline-flex}
.emMarcadorRenomear:hover{color:var(--tinta)}
.emCriarMarcadorBtn{color:var(--roxo)}
/* picker de marcador na thread aberta (#emAcaoMarcador) -- reusa .ddOp, so acrescenta o check */
.emMarcadorCheck{width:14px;flex:0 0 auto;color:var(--roxo);font-weight:700}
/* pedido do Wilker, print do Gmail como referencia: a lista ocupa o main INTEIRO, nao uma coluna
   estreita centralizada. Era max-width:900px + margin:0 auto -- 344px de sobra de cada lado numa
   tela de 1920px, e o assunto/snippet cortava cedo por falta de espaco. .emAssuntoLinha (flex:1)
   e .emDe (flex:0 0 180px) ja aproveitam a largura sozinhos assim que o teto sai. */
/* O-081 volta 1 (14/09): moldura unica, 20px->28px. Mesmo grupo do .pnWrap/.notasWrap, flush
   (nao verifiquei ao vivo por dificuldade de navegacao no teste, mas mesma declaracao/mesmo
   padrao dos outros dois -- risco baixo). */
.emWrap{padding:16px 28px}
.emBusca{margin-bottom:12px;display:flex;gap:8px;position:relative}
.emBusca input{flex:1;width:100%;background:var(--surface);border:1px solid var(--borda);border-radius:8px;color:var(--tinta);padding:8px 12px;font-size:13px;font-family:inherit;box-sizing:border-box}
/* Fase 5: icone de filtro (abre o painel de busca avancada) + faixa de "busca ativa" quando o
   resultado vem do Gmail em vez do espelho -- pedido do Wilker com print do painel do Gmail. */
.emBuscaFiltroBtn{flex:0 0 auto;background:var(--surface);border:1px solid var(--borda);border-radius:8px;color:var(--tinta-2);width:36px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.emBuscaFiltroBtn:hover{border-color:var(--roxo);color:var(--tinta)}
.emBuscaFiltroBtn svg{width:15px;height:15px}
/* Nit (ALTAIR, forma): ancorado embaixo do campo, igual o Gmail -- SEM overlay escurecendo a tela
   (esse era o problema medido: modal centralizado com .compOverlay, diferente do print do Wilker).
   position:relative fica em .emBusca (acima), o painel e absolute em relacao a ela. */
.emBaPainel{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--borda-2);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.45);z-index:20;max-height:80vh;overflow-y:auto}
.emBaPainel.aberto{display:block}
.emBuscaAtiva{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:12.5px;color:var(--tinta-2)}
.emBuscaAtiva code{background:var(--surface);border-radius:5px;padding:2px 6px;color:var(--tinta);font-size:11.5px}
/* flex, nao grid com auto-fit (minmax(0,1fr) com auto-fit e instavel pra numero de filhos
   variavel): a mesma classe serve pra linha de 3 campos (Tamanho: op/valor/unidade) e a de 2
   (Data dentro de: janela/data), cada .cnLinha filha divide o espaco igual, sem classe extra. */
.emBaLinhaDupla{display:flex;gap:10px}
.emBaLinhaDupla > .cnLinha{flex:1;min-width:0}
/* Fase 4: checkbox mestre + reload + menu de 3 pontos, acima da linha de abas/paginacao -- pedido
   do Wilker com print do Gmail. .girando anima o icone de reload enquanto espera o incremental. */
.emAcoesLista{display:flex;align-items:center;gap:10px;padding:6px 4px}
.emAcoesLista input[type="checkbox"]{width:15px;height:15px;accent-color:var(--roxo);cursor:pointer}
.emAcaoIconBtn{background:none;border:none;color:var(--tinta-2);width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.emAcaoIconBtn:hover{background:var(--surface-2);color:var(--tinta)}
.emAcaoIconBtn svg{width:15px;height:15px}
.emAcaoIconBtn.girando svg{animation:emGirar .8s linear infinite}
@keyframes emGirar{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.emSelContador{color:var(--tinta-2);font-size:12.5px;font-weight:600}
.emLoteAcoes{display:flex;gap:6px}
.emRowSel{width:14px;height:14px;accent-color:var(--roxo);cursor:pointer;flex:0 0 auto;margin-right:2px}
.ddOpApagado{padding:8px 11px;font-size:12px;color:var(--apagado);white-space:normal;line-height:1.4;max-width:220px}
/* Fase 3: abas de categoria (Principal/Social/Promocoes), so na Entrada -- mesma posicao/jeito do
   Gmail: linha de abas acima da lista, ativa sublinhada (border-bottom, nao pill/fundo). Nit C: a
   paginacao (X a Y de Z + < >) divide a MESMA linha, alinhada a direita -- .emListaTopo e quem leva
   a borda inteira (nao so .emCatAbas), senao a metade da direita fica sem linha por baixo quando
   ha abas, e a linha inteira some quando nao ha (pastas != Entrada). */
.emListaTopo{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borda);margin-bottom:2px;min-height:36px}
.emCatAbas{display:flex;gap:4px}
.emCatAba{background:none;border:none;border-bottom:2px solid transparent;color:var(--apagado);font-size:12.5px;font-weight:600;padding:9px 14px;cursor:pointer;display:flex;align-items:center;gap:6px;margin-bottom:-1px}
.emCatAba:hover{color:var(--tinta-2)}
.emCatAba.ativa{color:var(--roxo);border-bottom-color:var(--roxo)}
.emCatBadge{background:var(--surface-2);color:var(--tinta-2);font-size:10.5px;font-weight:700;border-radius:8px;padding:1px 6px;font-variant-numeric:tabular-nums}
.emCatAba.ativa .emCatBadge{background:var(--roxo);color:#fff}
.emPaginacao{display:flex;align-items:center;gap:8px;padding:0 4px;margin-left:auto}
.emPagTexto{color:var(--apagado);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.emPagBtn{background:none;border:1px solid var(--borda);border-radius:6px;color:var(--tinta-2);width:24px;height:24px;line-height:1;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.emPagBtn:hover{border-color:var(--roxo);color:var(--tinta)}
.emPagBtn.desabilitado{opacity:.35;cursor:default;pointer-events:none}
.emLista{display:flex;flex-direction:column}
.emRow{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid var(--borda);cursor:pointer;font-size:12.5px;color:var(--tinta-2);min-width:0}
.emRow:hover{background:var(--surface-2)}
.emRow.emNaoLida{color:var(--tinta);font-weight:600}
.emRow.emNaoLida .emSnippet{font-weight:400}
.emEstrela{flex:0 0 auto;color:var(--borda-2);font-size:15px;line-height:1;cursor:pointer}
.emEstrela.on{color:var(--amarelo)}
.emEstrela:hover{color:var(--amarelo)}
.emEstrelaMsg{font-size:16px;padding:2px}
.emDe{flex:0 0 180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emAssuntoLinha{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.emAssunto{color:inherit}
.emSnippet{color:var(--apagado)}
.emClipe{flex:0 0 auto;color:var(--apagado);display:inline-flex}
.emClipe svg{width:13px;height:13px}
.emData{flex:0 0 auto;width:52px;text-align:right;color:var(--apagado);font-variant-numeric:tabular-nums;font-weight:400}
.emVazio{color:var(--apagado);font-size:13px}
.emThreadTopo{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.emThreadAssunto{font-size:16px;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emMsgBox{background:var(--surface);border:1px solid var(--borda);border-radius:10px;margin-bottom:12px;overflow:hidden}
.emMsgCab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--borda);font-size:13px;color:var(--tinta)}
.emMsgEmail{color:var(--apagado);font-weight:400;font-size:12px}
.emMsgPara{color:var(--apagado);font-size:11.5px;margin-top:2px;font-weight:400}
.emMsgData{color:var(--apagado);font-size:11.5px;white-space:nowrap;flex:0 0 auto}
.emMsgCabDir{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.emVerOriginalBtn{background:var(--surface-2);border:1px solid var(--borda);border-radius:6px;color:var(--tinta-2);font-size:11.5px;padding:3px 9px;cursor:pointer;white-space:nowrap}
.emVerOriginalBtn:hover{border-color:var(--roxo);color:var(--tinta)}
/* transparente pra deixar o fundo escuro do .emMsgBox (pai) aparecer atras do body do srcdoc, que
   tambem esta transparente pra e-mail sem fundo proprio; e-mail com fundo proprio (branco fixo por
   dentro) usa o filtro invert no srcdoc em vez de depender deste transparent. */
.emIframe{display:block;width:100%;height:60vh;border:none;background:transparent;color-scheme:dark}
.emAnexos{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--borda)}
.emAnexoItem{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--borda);border-radius:6px;padding:4px 9px;font-size:12px;color:var(--tinta-2);text-decoration:none}
.emAnexoItem:hover{border-color:var(--roxo);color:var(--tinta)}
.emAnexoItem svg{width:13px;height:13px}

/* ===== E-MAIL — Fase 2 (P3: escrever, responder, encaminhar, rascunho, arquivar/lixeira/spam) ===== */
.emEscreverBtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:var(--roxo);border:none;color:#fff;font-size:13px;font-weight:600;padding:9px 0;border-radius:8px;cursor:pointer;margin-bottom:10px}
.emEscreverBtn:hover{opacity:.92}
.emEscreverBtn svg{width:14px;height:14px}
.emThreadAcoesTopo{display:flex;gap:6px;margin-left:auto}
.emThreadAcoes{display:flex;gap:8px;padding:14px 2px 4px}
.emComporParaFixo{color:var(--tinta-2);font-size:13px;padding:6px 0}
.emComporAnexosBar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.emComporAnexoBtn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--borda);border-radius:7px;padding:5px 11px;font-size:12.5px;color:var(--tinta-2);cursor:pointer}
.emComporAnexoBtn:hover{border-color:var(--roxo);color:var(--tinta)}
.emComporAnexoBtn svg{width:13px;height:13px}
.emComporAnexoItem{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--borda);border-radius:6px;padding:3px 4px 3px 9px;font-size:12px;color:var(--tinta-2)}
.emComporAnexoX{display:inline-flex;background:none;border:none;color:var(--apagado);cursor:pointer;padding:2px}
.emComporAnexoX:hover{color:var(--vermelho)}
.emComporAnexoX svg{width:11px;height:11px}
.emComporStatus{flex:1;font-size:11.5px;color:var(--apagado);align-self:center}

/* ===== FASE 7: janela "Escrever" (minimizar/tela cheia, barra de formatacao, link, emoji, foto
   inline, assinatura, programar envio, descartar+desfazer) ===== */

/* minimizar: vira barra no rodape direito, sem escurecer o resto da tela (o usuario continua
   operando o app atras); tela cheia: a mesma .compBox ocupa o viewport inteiro. */
#emComporModal.min .compOverlay{background:transparent;align-items:flex-end;justify-content:flex-end;padding:0 16px 0 0;pointer-events:none}
#emComporModal.min .compBox{pointer-events:auto;width:260px;max-height:44px;margin:0;border-radius:10px 10px 0 0;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#emComporModal.min .compCorpo,#emComporModal.min .compRodape,#emComporModal.min .compErro{display:none}
#emComporModal.cheia .compOverlay{padding:0}
#emComporModal.cheia .compBox{width:100%;max-width:100%;height:100vh;max-height:100vh;margin:0;border-radius:0}

.emComporTopoBtns{display:flex;align-items:center;gap:2px;margin-left:auto}
.emComporIconBtn{width:30px;height:30px;border-radius:6px;background:none;border:none;color:var(--tinta-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;position:relative}
.emComporIconBtn:hover{background:var(--surface-2);color:var(--tinta)}
.emComporIconBtn svg{width:16px;height:16px}
.emComporIconBtn input[type="file"]{display:none}

/* barra de formatacao (execCommand) -- glifos de texto no lugar de icone exato, mesmo criterio
   ja usado em .tpDescFerr: a FUNCAO de cada botao vem dos prints, o icone pixel a pixel nao. */
.emFmtBarra{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:5px 2px;margin:6px 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.emFmtBarra[hidden]{display:none}
.emFmtSep{width:1px;height:20px;background:var(--borda);margin:0 4px}
.emFmtBtn{width:26px;height:26px;border-radius:5px;background:none;border:none;color:var(--tinta-2);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.emFmtBtn:hover{background:var(--surface-2);color:var(--tinta)}
.emFmtLetra{font-weight:700;font-family:Georgia,serif}
.emFmtItal{font-style:italic}
.emFmtSub{text-decoration:underline}
.emFmtTach{text-decoration:line-through}
.emFmtSelect{height:26px;border-radius:5px;background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta-2);font-size:12px;padding:0 4px;max-width:110px}
.emFmtCorWrap{position:relative}
.emFmtCorMenu{width:150px;display:none;flex-wrap:wrap;gap:5px;padding:8px}
.emFmtCorMenu.on{display:flex}
.emFmtSwatch{width:18px;height:18px;border-radius:4px;border:1px solid var(--borda-2);cursor:pointer}
.emFmtSwatchCustom{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tinta-2);width:100%;margin-top:4px;cursor:pointer}
.emFmtSwatchCustom input[type="color"]{width:22px;height:20px;border:none;background:none;padding:0;cursor:pointer}
.emFmtCheck{width:14px;display:inline-block;flex:0 0 auto;color:var(--roxo);font-weight:700}

#emComporCorpo blockquote,#emAsCorpo blockquote{border-left:3px solid var(--borda-2);margin:6px 0;padding:2px 0 2px 10px;color:var(--tinta-2)}
.emComporCorpoTexto{width:100%;min-height:180px;resize:vertical;background:none;border:none;color:var(--tinta);font:inherit;padding:8px 0;box-sizing:border-box}
.emComporCorpoTexto[hidden]{display:none}

/* rodape: Enviar+status a esquerda, icones no meio, kebab+descartar a direita -- mesma .compRodape
   de sempre, so troca o alinhamento (empurra os grupos pras pontas em vez de tudo a direita). */
.emComporRodape{justify-content:space-between;flex-wrap:wrap;gap:8px}
.emComporRodapeEsq{display:flex;align-items:center;gap:10px}
.emComporRodapeMeio{display:flex;align-items:center;gap:2px}
.emComporRodapeDir{display:flex;align-items:center;gap:2px;margin-left:auto}
#emComporEnviarWrap{display:flex;align-items:center;position:relative}
.emComporEnviarSeta{align-self:stretch;padding:0 8px;border-radius:0 8px 8px 0;border:none;border-left:1px solid rgba(255,255,255,.25);background:var(--roxo);color:#fff;cursor:pointer;font-size:11px}
.emComporEnviarSeta:hover{filter:brightness(1.1)}
.emComporAgendarAviso{padding:8px 11px 4px;font-size:11px;color:var(--apagado);line-height:1.4;max-width:220px;white-space:normal}
.emComporAtalhoAgendar,.emComporAgendarConfirmar{white-space:nowrap}

/* BLOQUEANTE (ALTAIR, medido no pixel): os 3 popovers da barra do rodape (Enviar/Programar, emoji,
   menu de 3 pontos) herdavam .ddMenu{top:100%}, abrindo PRA BAIXO a partir de um botao perto do
   fim de uma janela com .compBox{overflow:hidden} -- a parte que passa da borda da caixa fica
   cortada e sem hit-test, entao o clique cai no .compOverlay por baixo (que fecha a janela --
   testado so nos 2 primeiros, mas o emoji tem exatamente a mesma geometria, corrigido junto).
   Selector por ID (especificidade maior que .ddMenu, nao depende de ordem no arquivo). */
#emComporEnviarMenu,#emComporMaisMenu,#emEmojiPop{top:auto;bottom:100%;margin-top:0;margin-bottom:6px}
/* BLOQUEANTE, eixo horizontal (ALTAIR, medido com clique real): #emComporMais mora colado na borda
   DIREITA do rodape (.emComporRodapeDir), mas .ddMenu abre com left:0 -- o menu crescia pra FORA da
   caixa pela direita (101px cortados em janela normal, os 5 itens inteiros fora da tela em cheia).
   Alinha pela borda direita do proprio botao, igual o Gmail faz nesse canto. Os outros dois (Enviar/
   emoji) ja couberam no teste dela -- sem mudanca de eixo horizontal neles. */
#emComporMaisMenu{left:auto;right:0}

/* emoji */
.emEmojiPop{width:240px;padding:6px}
.emEmojiBusca{width:100%;height:28px;border-radius:6px;background:var(--surface-2);border:1px solid var(--borda);color:var(--tinta);font-size:12.5px;padding:0 8px;margin-bottom:6px;box-sizing:border-box}
.emEmojiGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;max-height:180px;overflow-y:auto}
.emEmojiItem{background:none;border:none;font-size:18px;cursor:pointer;border-radius:5px;padding:3px;line-height:1}
.emEmojiItem:hover{background:var(--surface-2)}

/* marcador ao enviar (kebab, Fase 7 -- depende da Fase 6, mesmo .ddOp/.emMarcadorCheck/.emMarcadorDot) */
.emComporMarcadorLista{max-height:160px;overflow-y:auto;border-top:1px solid var(--borda);margin-top:4px;padding-top:4px}
.emComporMarcadorLista[hidden]{display:none}

/* Programados: pasta PROPRIA do Nova (fora do Gmail), mesma .emRow da lista normal */
.emRowAgendado{display:flex;align-items:center;gap:10px}

/* toast com botao de acao (Desfazer do Descartar) -- variante do #novaToast comum, que nao tem botao */
#novaToastAcao{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--surface);border:1px solid var(--borda-2);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.5);padding:10px 10px 10px 16px;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--tinta);z-index:200;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
#novaToastAcao.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#novaToastAcaoBtn{background:none;border:none;color:var(--roxo-2);font-weight:700;font-size:13px;cursor:pointer;padding:4px 8px}
#novaToastAcaoBtn:hover{text-decoration:underline}
#emComporCorpo{min-height:180px;padding:8px 0;color:var(--tinta);font-size:13.5px;line-height:1.5;outline:none}
#emComporCorpo:empty:before{content:attr(data-placeholder);color:var(--apagado);pointer-events:none}

/* ══════════════════════════════════════════════════════════════════════════
   TEXTO CORTADO NO NOVA        (ORION, ordem do ALTAIR, 06/09)
   Wilker trata ellipsis apertado como falha grave. Os dois casos abaixo foram
   medidos por mim no app rodando (localhost:4600), nao deduzidos.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) "Administrativo" e "Conhecimento" saiam como "Administrat…" na barra de
   icones: rotulo de 8px numa caixa de 50px precisando de 54.
   O #rail tem 64px e ZERO padding lateral (medido), e o .railBtn de 50px
   deixa 7px livres de cada lado. O rotulo passa a usar 60 desses 64: o icone
   nao se move (o .railBtn continua com 50), so a palavra deixa de bater na
   parede. Sobram 2px de folga de cada lado dentro do rail. */
.railBtn .rl{width:60px;max-width:60px;margin:0 -5px}

/* 2) Nome do espaco na barra lateral ("Clinica Medica Antonini", e aqui
   "Administrativo" com 118px de caixa precisando de 139).
   CAUSA: o ⋯ (.espMais) e o + (.add) sao opacity:0 ate o hover, mas seguiam
   OCUPANDO 36px de largura + 14px de gap na linha o tempo todo. Botao
   invisivel comendo um terco do nome.
   Saem do fluxo: o nome vale a linha inteira sempre, e os dois aparecem POR
   CIMA no hover -- que e exatamente o que o ClickUp faz nesta mesma linha.
   No hover o nome ganha calha a direita pra nao correr por baixo deles. */
.espacoTit{position:relative}
.espacoTit .espMais,.espacoTit .add{position:absolute;top:50%;transform:translateY(-50%);margin-left:0}
.espacoTit .add{right:10px}
.espacoTit .espMais{right:32px}
.espacoTit:hover .espNome{padding-right:52px}

/* ══════════════════════════════════════════════════════════════════════════
   RELATORIO DE CONTA (Moon · Meta) — CYGNUS, E3/06/09.
   Divisao combinada com o ALTAIR: o ORION escreveu o que e generico do
   Oblivion (.linha-topo, o combo, .btn, .faixa, perbox/calendario); daqui pra
   baixo e o que so existe nesta tela. Tudo COPIADO do app.css do Oblivion,
   nada escolhido por mim -- a ordem do Wilker e "100% igual a prova".
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- grades (o display:grid que o PHP escreve inline nas div) ------------ */
/* O-012 (ORION 07/09) -- DUVIDA PRO MAESTRO: 14px nao bate com a escala atual
   (--sp-linha:8 / --sp-entre-cards:18). Mantido o valor visual (nao troquei por nenhum dos
   dois tokens sem a decisao dele); sinalizado pro Maestro decidir se cria um degrau
   intermediario na escala ou se este gap deve virar 18 (--sp-entre-cards). */
/* O-012 (ALTAIR, 07/09): 14px nao batia com a escala (--sp-linha:8 / --sp-entre-cards:18) --
   decisao: sem degrau intermediario, vai pro mais proximo (18, diferenca de 4 contra 6 do 8). */
.moonOblivion .grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:var(--sp-entre-cards)}
.moonOblivion .grade3{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:var(--sp-entre-cards)}

/* ---- legenda do grafico de duas linhas ---------------------------------- */
.moonOblivion .graf-legenda{display:flex;justify-content:center;gap:20px;margin-bottom:6px;
  font-size:11.5px;color:var(--mo-slate)}
.moonOblivion .graf-legenda i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
/* O-117 (ORION, 16/09): pedido formal do PHOENIX (moon_relatorio.js/moon_google_relatorio.js,
   graf(), ~linha 283/296) -- as duas classes abaixo nao existiam, o JS vinha 100% inline pra
   provar o valor exato (cor/posicao por ponto SAO dado, ficam inline de proposito) enquanto o
   resto (forma/tamanho/camada) esperava a classe existir. So' o ESTATICO entra aqui.
   `.moonPontoGrafico`: circulo HTML por cima do SVG (mesma tecnica do BUG 13/moonPicoLabel
   acima -- svg com preserveAspectRatio="none" deforma forma redonda, HTML nao). left/top/
   background continuam inline (posicao e cor SAO o dado, um ponto azul e outro bronze). */
.moonOblivion .moonPontoGrafico{position:absolute;transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;pointer-events:none}
/* `.grafTooltip`: mesma linguagem visual das ja existentes `.cri-abrir`/`.cri-qtd` (badge escuro
   flutuante sobre conteudo, rgba(10,18,38,...)+branco) -- reusada aqui em vez de inventar cor
   nova, so' com opacidade um pouco maior (.9) porque carrega 3 linhas de texto pra ler, nao 1
   selo curto. left/top continuam inline (posicao de mouse, muda a cada frame). */
.moonOblivion .grafTooltip{position:absolute;z-index:5;pointer-events:none;
  background:rgba(10,18,38,.9);color:#fff;font-size:11px;line-height:1.5;
  padding:6px 9px;border-radius:7px;white-space:nowrap;box-shadow:var(--mo-sh-md)}

/* ---- faixa de status: o ponto colorido de cada item --------------------- */
.moonOblivion .faixa .pt{width:6px;height:6px;border-radius:50%;flex:0 0 6px}

/* ---- funil invertido ------------------------------------------------------
   O-022 (ORION 08/09), item 8: `.fu-rot`/`.fu-tip`/`.fu-val` estavam com cor
   pensada pra texto SOBRE a forma colorida (branco + text-shadow, herdado de
   uma versao antiga onde o rotulo morava DENTRO do trapezio). O texto migrou
   pra fora, do LADO da forma (moon_relatorio.js:262-273, ordem do PHOENIX de
   06/09 pra parar de cortar) -- mas a cor ficou a mesma, branco quase invisivel
   sobre o fundo escuro do app, nao sobre o degrau colorido. E' provavelmente
   a causa real de "parece tudo empilhado igual": a forma (`.fu-degrau`, o
   trapezio com `clip-path`, largura variavel calculada em moon_relatorio.js)
   ja afunila corretamente, so ficou pouco legivel porque o texto ao lado
   quase some. Cor trocada pros tokens do tema escuro (`--mo-graphite`/
   `--mo-steel`), do jeito que qualquer outro texto do app usa. */
.moonOblivion .fu-rot{font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--mo-graphite);line-height:1}
/* a divergencia de leads e um dado a mais, nao um alerta: pontilhado + cursor
   de ajuda, do jeito que o Oblivion marca "passe o mouse que tem historia" */
.moonOblivion .fu-tip{border-bottom:1px dotted var(--mo-steel);cursor:help}
.moonOblivion .fu-val{font-weight:750;color:var(--mo-graphite);line-height:1.15}
/* a conversao fica FORA do degrau: dentro, brigaria com o numero pelo mesmo
   espaco, e o degrau de baixo e estreito */
.moonOblivion .fu-conv{width:50px;flex:none;font-size:11px;color:var(--mo-steel);text-align:left}

/* ---- paineis "Top": SISTEMA DE COLUNA COMPARTILHADO (O-012/O-020, ORION 08/09) -----------
   O Maestro mediu duas gramaticas de tabela convivendo: moon_relatorio.js (Meta) chumbava
   44/58/62/74px por coluna, moon_google_relatorio.js (Google) chumbava 50/56/62/74px pras
   MESMAS colunas conceituais -- ninguem decidiu, cada arquivo chutou o seu, e um dos chutes ja
   cortou texto ("Taxa de conversao" de 106px numa coluna de 97px). Correcao: coluna nomeada por
   PAPEL (nao numero), em token, com min-width em vez de width fixo -- se o conteudo pedir mais
   espaco um dia, ele CRESCE em vez de cortar. Os dois arquivos passam a usar as mesmas classes,
   nunca mais `style="width:Npx"` inline. Valores calibrados generosos (maior dos dois chutes
   antigos + folga), com --col-taxa novo pro caso que ja cortou. */
:root{--col-metrica:58px; --col-custo:64px; --col-valor:76px; --col-pill:60px; --col-taxa:70px}
.moonOblivion .top-cab{display:flex;gap:8px;padding:6px 14px 4px;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;color:var(--mo-steel)}
/* cabecalho pode ter rotulo mais longo que a coluna precisa pro NUMERO (ex.: "Taxa de
   conversao") -- aqui, ao contrario da celula de dado, permitir quebra em vez de cortar e
   seguro: sao 2 linhas de rotulo, nunca informacao que se perde. */
.moonOblivion .top-cab span{text-align:right;white-space:normal;line-height:1.2}
.moonOblivion .top-cab .col-metrica,.moonOblivion .linha-top .col-metrica{flex:0 0 var(--col-metrica);min-width:var(--col-metrica)}
.moonOblivion .top-cab .col-custo,.moonOblivion .linha-top .col-custo{flex:0 0 var(--col-custo);min-width:var(--col-custo)}
.moonOblivion .top-cab .col-valor,.moonOblivion .linha-top .col-valor{flex:0 0 var(--col-valor);min-width:var(--col-valor)}
.moonOblivion .top-cab .col-pill,.moonOblivion .linha-top .col-pill{flex:0 0 var(--col-pill);min-width:var(--col-pill)}
.moonOblivion .top-cab .col-taxa,.moonOblivion .linha-top .col-taxa{flex:0 0 var(--col-taxa);min-width:var(--col-taxa)}
.moonOblivion .linha-top{display:flex;align-items:center;gap:8px;padding:7px 14px;
  border-top:1px solid var(--mo-mist);transition:background .13s ease}
.moonOblivion .linha-top .pos{font-size:10.5px;font-weight:700;color:var(--mo-steel);width:12px;
  flex:0 0 12px;transition:color .13s ease}
/* ORION O-012 (07/09), medicao do PHOENIX na TRISUL: nome mais longo dos Top campanhas/anuncios
   tem 451px, a coluna .nm so tem 278px de largura visivel, e nao ha folga pra alargar (o painel
   e 1 de 3 colunas do .grade3, roubar espaco tira de Top campanhas/Top anuncios). Reticencia de
   1 linha cortaria a informacao que o Wilker usa pra decidir (ex.: "5. Interesses - 30 a 5...").
   Decisao do Maestro: quebra em ATE 2 linhas em vez de cortar -- 278px * 2 linhas ~= 556px uteis,
   engole o nome inteiro; -webkit-line-clamp continua de guarda pro caso raro de nome maior ainda.
   --lista-lh e o token novo (nao existia linha-altura de texto de lista no molde ate aqui). */
.moonOblivion .linha-top .nm{flex:1;min-width:0;font-size:12.5px;font-weight:600;
  color:var(--mo-graphite);white-space:normal;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:var(--lista-lh);
  text-decoration:none;transition:color .13s ease}
.moonOblivion .linha-top .v{text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums}
.moonOblivion .linha-top .v.forte{font-weight:650}
.moonOblivion .linha-top.clicavel{cursor:pointer;position:relative}
.moonOblivion .linha-top.clicavel:hover{background:rgba(123,104,238,.10)}
.moonOblivion .linha-top.clicavel:hover .nm,
.moonOblivion .linha-top.clicavel:hover .pos{color:var(--mo-blue)}
/* seta que so aparece no hover: diz para onde o clique leva */
/* ORION 06/09: faltava o `.clicavel` no seletor. No Oblivion (app.css 365) a
   seta so nasce escondida em linha CLICAVEL; aqui ela sumia em QUALQUER
   .linha-top, entao linha sem clique perdia a seta que o Oblivion mostra. */
.moonOblivion .linha-top.clicavel .seta-ir{opacity:0;transform:translateX(-3px);color:var(--mo-blue);
  font-weight:700;transition:opacity .13s ease,transform .13s ease;flex:0 0 auto}
.moonOblivion .linha-top.clicavel:hover .seta-ir{opacity:1;transform:translateX(0)}
/* barrinha na borda esquerda, o mesmo idioma do item de menu aceso */
.moonOblivion .linha-top.clicavel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--mo-blue);transition:width .13s ease}
.moonOblivion .linha-top.clicavel:hover::before{width:3px}

/* ---- melhores criativos ------------------------------------------------- */
/* O-020 (ORION 08/09): gap 14px literal, mesma familia de divida que os outros -- nunca migrou
   pro token quando a lei virou --sp-entre-cards:18. auto-fill continua correto aqui (lista de
   creativos de tamanho variavel, sem fileira irma pra alinhar contra). */
.moonOblivion .cri-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--sp-entre-cards);padding:16px}
.moonOblivion .cri-card{border:1px solid var(--mo-mist);border-radius:10px;overflow:hidden;background:var(--mo-card)}
.moonOblivion .cri-capa{position:relative;aspect-ratio:1/1;background:var(--mo-mist);
  overflow:hidden;display:block}
.moonOblivion .cri-capa img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease}
.moonOblivion a.cri-capa:hover img{transform:scale(1.03)}
.moonOblivion .cri-abrir{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;
  gap:5px;padding:5px 9px;border-radius:7px;background:rgba(10,18,38,.82);color:#fff;
  font-size:11px;font-weight:600;opacity:0;transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease;pointer-events:none}
.moonOblivion a.cri-capa:hover .cri-abrir{opacity:1;transform:none}
/* carrossel: as laminas ficam empilhadas e so passam no hover, uma de cada vez.
   Sem isso a tela mostrava a primeira imagem e nada dizia que havia mais nove. */
.moonOblivion .cri-lamina{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease}
.moonOblivion a.cri-capa:hover .cri-lamina{animation:moonLaminas 6s infinite}
@keyframes moonLaminas{0%,14%{opacity:0}17%,31%{opacity:1}34%,100%{opacity:0}}
/* ORION 06/09 -- O ATRASO, que faltava (app.css do Oblivion).
   O comentario acima ja dizia a intencao certa: "uma de cada vez". Sem estas
   cinco linhas as seis laminas rodam o MESMO ciclo ao mesmo tempo -- acendem
   juntas e apagam juntas, e a tela le como "o preview pisca", nao como "o
   preview roda". O ciclo tem 6s e cada lamina entra 1s depois da anterior.
   Padrao de porte pela metade que vale procurar no resto: a regra principal e
   o keyframe vieram, e as linhas quase iguais do fim do bloco ficaram. */
.moonOblivion a.cri-capa:hover .cri-lamina:nth-of-type(2){animation-delay:1s}
.moonOblivion a.cri-capa:hover .cri-lamina:nth-of-type(3){animation-delay:2s}
.moonOblivion a.cri-capa:hover .cri-lamina:nth-of-type(4){animation-delay:3s}
.moonOblivion a.cri-capa:hover .cri-lamina:nth-of-type(5){animation-delay:4s}
.moonOblivion a.cri-capa:hover .cri-lamina:nth-of-type(6){animation-delay:5s}
.moonOblivion .cri-qtd{position:absolute;right:8px;top:8px;padding:3px 8px;border-radius:20px;
  background:rgba(10,18,38,.72);color:#fff;font-size:10px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px}
.moonOblivion .cri-qtd::before{content:'';width:7px;height:7px;border:1.5px solid #fff;
  border-radius:2px;box-shadow:2px -2px 0 -.5px rgba(255,255,255,.55)}
.moonOblivion .cri-play{position:absolute;left:8px;top:8px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.moonOblivion .cri-baixa{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.55);color:#fff;
  font-size:9.5px;padding:2px 6px;border-radius:20px}
/* ORION 08/09 (decisao pedida pelo Maestro, PHOENIX): asset de Performance Max SO TEXTO, sem
   foto -- o Google tem isso, o Meta nao. NAO reusa `.cri-capa` (ela existe pra segurar IMAGEM;
   reusar pra texto seria o mesmo erro que a colisao de `.kpis` custou hoje). Classe dedicada,
   mesmo `.cri-card` por fora (borda/raio/sombra do molde continuam), miolo proprio: mesmo
   aspect-ratio 1/1 da capa de foto (pra grade ficar com todas as celulas do mesmo tamanho,
   foto e texto misturados na mesma `.cri-grade`), fundo solido (nao imagem), titulo+descricao
   do anuncio centralizados, cortados em N linhas visualmente -- MAS nunca sem saida: o Maestro
   travou que corte definitivo (sem jeito nenhum de ver o resto) e falha grave quando o texto
   cortado E o proprio dado, nao um identificador (diferente do `.linha-top .nm`, onde o nome
   clampado em 2 linhas e ok porque o resto se resolve por contexto). Aqui o texto e a COPY do
   anuncio. PEDIDO AO PHOENIX: `title="<texto completo>"` no `.cri-texto` (mesmo mecanismo que
   ja uso no `.dado-aproximado` -- tooltip nativo do navegador ao passar o mouse), sem depender
   do popup de midia (que e pra foto/video, um asset de texto pode nao ter media nenhuma pra
   abrir ali). Contraste medido antes de aprovar (formula WCAG): `--mo-graphite` (#ececef) sobre
   `--mo-haze` (#241f3d) ~13,3:1; `--mo-slate` (#b4b4bd) sobre o mesmo fundo ~7,6:1. Os dois
   folgados acima do minimo 4.5:1 pra texto pequeno (13px/11.5px aqui). */
/* O-121 VOLTA 3 (ALTAIR, 17/09): concessao pontual do Maestro -- so' estes 3
   seletores (.cri-texto/.cri-texto-desc/.cri-texto-titulo), nada mais neste
   arquivo (ORION tem alteracao em andamento aqui). `aspect-ratio:1/1` fica
   como TAMANHO PREFERENCIAL (mesmo quadrado de sempre quando o texto e'
   curto, mesma altura que .cri-capa na mesma linha) -- so' `overflow:hidden`
   e `-webkit-line-clamp` saem, que eram quem cortava o texto MESMO sobrando
   espaco vazio no quadro (achado do ALTAIR, medindo). Sem eles, a caixa
   cresce alem do quadrado APENAS quando o texto de verdade nao cabe (uso
   normal de aspect-ratio como preferencia, nao teto); .cri-texto-titulo nao
   e' mais desenhado pelo JS (o rotulo de tipo virou unico, no rodape,
   O-121 volta 1) -- CSS morta, deixada como estava, sem risco. */
.moonOblivion .cri-texto{position:relative;aspect-ratio:1/1;background:var(--mo-haze);
  display:flex;flex-direction:column;justify-content:center;padding:16px}
.moonOblivion .cri-texto .cri-texto-marca{position:absolute;left:8px;top:8px;padding:3px 8px;
  border-radius:20px;background:rgba(10,18,38,.72);color:#fff;font-size:10px;font-weight:600}
.moonOblivion .cri-texto-titulo{font-size:13px;font-weight:650;color:var(--mo-graphite);line-height:1.3}
.moonOblivion .cri-texto-desc{font-size:11.5px;color:var(--mo-slate);margin-top:6px;line-height:1.3}
.moonOblivion .cri-pe{padding:9px 11px 11px}
.moonOblivion .cri-nome{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.moonOblivion .cri-res{font-size:11.5px;color:var(--mo-steel);margin-top:3px}
.moonOblivion .cri-cpr{font-size:11.5px;font-weight:650;margin-top:2px}

/* ---- popup de midia (lightbox): camada fixa cobrindo a tela --------------
   padrao [hidden] de maior especificidade (igual .perpanel linha 2799 e
   .obbusca-limpar linha 2953): a regra visivel primeiro, a combinada com
   [hidden] logo depois, pra vencer por especificidade nao importa a ordem. */
.moonOblivion .cri-popup{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);padding:32px;z-index:10000;cursor:zoom-out}
.moonOblivion .cri-popup[hidden]{display:none}
.moonOblivion .cri-popup-fechar{position:fixed;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(0,0,0,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.moonOblivion .cri-popup-fechar:hover{background:rgba(0,0,0,.75)}
.moonOblivion .cri-popup-corpo{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;cursor:default}
/* O-027 (ORION 08/09), achado do PHOENIX: `.cri-popup-video`/`.cri-popup-embed` existiam no HTML
   (moon_relatorio.js) e NUNCA tiveram regra aqui -- o iframe do Reels renderizava na dimensao crua
   que a Meta manda (1080x1920) e saia da tela por cima/baixo, medido com getBoundingClientRect.
   MESMO teto que `mostrarImagem()` ja usa (moon_relatorio.js:857, inline no <img>) -- imagem e video
   tem que se comportar igual no mesmo popup, nao dois limites divergentes pro mesmo componente.
   `.cri-popup-video` e a TAG <video> direto (nao um wrapper); `.cri-popup-embed` e um <div> que recebe
   o `embed_html` cru da Meta por dentro (o iframe do Reels mora ali, por isso o seletor mira
   `.cri-popup-embed iframe`, nao a div).
   ACHADO MEDIDO (nao teorico), 4 rodadas com getBoundingClientRect dentro da estrutura REAL do popup
   (.cri-popup > .cri-popup-corpo > .cri-popup-embed, dois flex aninhados) antes de fechar nesta regra:
   <video>/<img> tem tamanho INTRINSECO vindo do arquivo carregado, entao width/height:auto + max-
   reescala proporcional sozinho (mesmo mecanismo do <img> em mostrarImagem()) -- por isso o <video>
   abaixo ficou simples. <iframe> nao tem isso, e testar so nele (fora da estrutura aninhada) mentiu:
   1) so max-width/max-height (sem auto): largura ficava no bruto do atributo (1084px, abaixo do teto
      de 90vw entao nunca cortava) e so a altura era espremida (954px) -- distorcia o video, esticado.
   2) width/height:auto + aspect-ratio: funcionava ISOLADO (testei solto no body, bateu certinho), mas
      dentro dos DOIS flex aninhados de verdade colapsava pra 0x0 -- flex com filho block (`.cri-popup-
      embed`, sem regra propria) nao repassa "auto" ate um iframe que so tem aspect-ratio, sem nenhuma
      dimensao propria, pra derivar tamanho. So aparece nesta profundidade de aninhamento -- por isso
      medi DENTRO do popup real, nao isolado, depois de a primeira tentativa "parecer certa" e falhar.
   RESOLVIDO com `width:min(90vw, 88vh * 9 / 16)` explicito -- calcula a largura maxima que ainda cabe
   nos DOIS tetos ao mesmo tempo (9/16 e a proporcao medida, 1080x1920), sem depender de "auto" se
   resolver sozinho atraves da cadeia de flex. `height:auto` + `aspect-ratio:9/16` derivam a altura
   dessa largura ja definida -- essa direcao (largura definida -> altura por aspect-ratio) e suportada
   sem ambiguidade, o problema era so a direcao contraria. Confirmado: 534,6x950,4px, proporcao 0,563
   (bate com 9/16=0,5625), top:62/bottom:1013 dentro dos 1080 de altura da viewport de teste.
   LIMITE HONESTO: 9/16 e a proporcao medida (Reels), fixo -- um anuncio quadrado ou horizontal nesse
   popup ficaria distorcido. Resolveria de verdade com JS lendo o width/height reais do embed_html e
   setando isso por tarefa -- fora do escopo desta troca (so CSS), avisei o Maestro. */
.moonOblivion .cri-popup-video{max-width:90vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.moonOblivion .cri-popup-embed iframe{max-width:90vw;max-height:88vh;width:min(90vw,88vh * 9 / 16);height:auto;aspect-ratio:9/16}
/* O-027 (ORION 08/09), a 3a classe que faltava (`.cri-popup-aviso`) -- omissao do ALTAIR na ordem
   original, nao minha, ele mesmo assumiu. Mensagem de FALHA (video sem source/embed, ou player que
   nao carregou) dentro do popup escuro (`.cri-popup{background:rgba(0,0,0,.85)}`) -- papel de AVISO,
   nao erro grave: token e `--mo-warn`/`--mo-warn-bg` (o par amarelo do Oblivion), nunca `--mo-bad`
   (vermelho, reservado pra falha destrutiva de verdade, tipo vencido). Mesmo MECANISMO que `.radar`
   ja usa (linha ~2974, o card de alerta do dashboard) -- reusado, nao um terceiro padrao de aviso
   inventado: fundo `--mo-warn-bg`, borda fina translucida a 30%, texto no tom SUAVE #ffd9a0 (nao o
   --mo-warn cru -- o `.radar` ja resolveu essa distincao: cor forte pro icone/borda, tom mais claro
   pro TEXTO CORRIDO, mais confortavel de ler uma frase inteira que a cor saturada). Contraste medido
   (formula WCAG completa, luminancia relativa) contra o fundo COMPOSTO do popup (preto 85% sobre o
   app, ~rgb(2,2,3)): #ffd9a0 = 15,49:1. Bem acima do minimo 4,5 -- e onde eu quis errar pro lado de
   "lido", nao "decorado", como pedido: aviso de falha nao pode ficar subtil. */
.moonOblivion .cri-popup-aviso{display:inline-block;background:var(--mo-warn-bg);border:1px solid rgba(255,176,32,.3);border-radius:var(--mo-r);color:#ffd9a0;font-size:14px;font-weight:500;line-height:1.5;text-align:center;padding:14px 20px;max-width:420px}

/* ---- trilha (breadcrumb) do topo ---------------------------------------- */
.moonOblivion .rel-trilha{margin-left:auto;font-size:12.5px;display:flex;align-items:center;gap:6px}
.moonOblivion .rel-trilha a{color:var(--mo-blue);text-decoration:none}
.moonOblivion .rel-trilha .sep{color:var(--mo-steel)}

/* ---- timbre: so no papel, escondido na tela ----------------------------- */
.moonOblivion .timbre{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSAO (o botao PDF = window.print, como o Moon antigo faz: biblioteca de
   PDF rasteriza e o texto vira imagem).
   Portado do @media print do app.css. UMA adaptacao necessaria: o Oblivion
   esconde .side/.top-dir/.form/.periodo, que sao os elementos DELE; o Nova tem
   outro cromo (#rail, #superbar, #favBarra, #sidebar). Os seletores mudam
   porque o HTML e outro; o efeito e o mesmo -- sobra o relatorio e o timbre.

   ARMADILHA (Maestro, 08/09), nos DOIS sentidos -- este bloco ja enganou gente
   duas vezes no mesmo dia: (1) alguem le um valor daqui como se fosse da TELA
   e reporta defeito falso (quase aconteceu, 8 defeitos fantasmas evitados por
   pouco); (2) um style INLINE na marcacao (fora daqui) pode estar VENCENDO uma
   regra de impressao (achado real: `style="font-size:13.5px"` num <h2>
   mascarava `.painel-top h2{font-size:11.5px}` aqui dentro -- o PDF saia com
   cabecalho maior do que este bloco projeta, ninguem via porque print de TELA
   nunca prova impressao). Antes de mexer OU de reportar algo como defeito:
   confira se o numero vem daqui (so vale no papel) ou da folha de tela (so
   vale na tela), e se um inline na marcacao esta sobrepondo um dos dois SEM
   avisar. Print de tela nunca prova impressao -- so um PDF gerado de verdade
   prova. ══════════════════════════════════════════════════════════════════════════ */
@media print{
  @page{margin:21mm 0 0;size:A4}
  /* ORION 06/09 -- FAIXA PRETA DE 21mm NO TOPO DE TODA PAGINA.
     CAUSA, por cascata: o :root do Nova declara `color-scheme:dark` (linha 13,
     posto de proposito pra que o popup nativo de data nao abrisse branco). Com
     color-scheme dark o navegador pinta o CANVAS da pagina escuro, e o canvas
     inclui a area de margem do @page -- os 21mm do topo. O `html,body{
     background:#fff}` abaixo nao cobre isso: ele pinta a caixa do html, nao a
     margem da folha. E o `print-color-adjust:exact` que vem logo depois, que
     existe pro gradiente do funil sair no papel, obriga o escuro a sair junto.
     Ou seja: tres regras certas, cada uma pelo seu motivo, somando um defeito.
     Aqui o documento volta a ser claro SO na impressao. A tela nao muda, e o
     popup de data continua escuro onde ele existe. */
  :root{color-scheme:light}
  html,body{background:#fff!important;color:#111}
  body{padding:0 10mm 8mm}
  /* fundo, borda e gradiente PRECISAM sair no papel, senao o funil vira
     silhueta vazia e a barra do timbre some */
  *,*::before,*::after{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
    color-adjust:exact!important}
  /* cromo do Nova fora do papel. O Oblivion esconde `.side,.top-dir,.form,
     .periodo,.acao,.badge,.toggle`, que sao os elementos DELE; o Nova tem outro
     HTML, entao os seletores mudam e o efeito e o mesmo. */
  #rail,#superbar,#favBarra,#sidebar,#tarefaPainel,#overlay,
  .moonOblivion .linha-topo,.moonOblivion .btn,.moonOblivion button,
  /* A FAIXA NAO VAI PRO PAPEL, e nao e escolha de layout: o PDF desta tela vai
     pro CLIENTE, e a faixa carrega saldo da conta, valor em aberto, gasto
     acumulado e limite -- financeiro interno da agencia. O Oblivion tira pelo
     mesmo motivo (app.css: "fora do relatorio: navegacao, filtros, botoes -- e
     o SALDO DA CONTA"). O :has() tem que vir junto: a faixa mora dentro de um
     <section class="painel">, e esconder so o conteudo deixaria o cartao vazio
     no papel. */
  .moonOblivion .faixa,.moonOblivion .painel:has(.faixa){display:none!important}
  #baixo,#direita,#app{display:block!important;overflow:visible!important}
  #main{margin:0!important;padding:0!important;overflow:visible!important}
  .moonOblivion{background:#fff!important;padding:0!important;gap:0!important}
  .moonOblivion .rel-trilha{font-size:8.5px}

  /* timbre: so existe no papel */
  .moonOblivion .timbre{display:flex;align-items:baseline;justify-content:space-between;
    position:fixed;top:-19mm;left:0;right:0;padding:0 10mm 5px;height:16mm;
    border-bottom:2px solid var(--mo-blue);background:#fff;z-index:999}
  .moonOblivion .timbre .marca{font-weight:800;font-size:15px;letter-spacing:2.4px;
    text-transform:uppercase;color:var(--mo-blue)}
  .moonOblivion .timbre .sub{font-size:8px;letter-spacing:1.3px;text-transform:uppercase;
    color:#8a8a8a;margin-left:9px}
  .moonOblivion .timbre .dir{font-size:8.5px;color:#777;text-align:right;line-height:1.45}
  .moonOblivion .timbre-espaco{display:none}

  /* o relatorio encolhe pra caber na folha: o Oblivion redesenha painel, kpi e
     tabela em corpo menor, e nao so reaproveita o tamanho de tela.
     O-117 (ORION, 16/09): `.kpi` (aqui e nas regras abaixo) e' NOME ANTIGO -- a consolidacao de
     molde de card (moon_relatorio.js, comentario "MOLDE UNICO DE CARD", O-016/08-09) trocou
     kpi/rot/val/pe por card.finKpi/cardLabel/cardValor/finKpiSub faz tempo, e ESTA folha de
     impressao nunca acompanhou a troca -- todo `.kpi`/`.kpi .val`/`.kpi .rot`/`.kpi .pe` daqui
     pra baixo casava com ZERO elemento no relatorio real (achado medindo o computed style ao
     vivo: `.moonOblivion .kpi` no DOM devolvia null). Groups completo, renomeado pro nome atual;
     nenhum valor visual mudou de intencao, so' o seletor passou a alcancar alguem. */
  /* O-121 VOLTA 1 (ALTAIR, 16/09): concessao pontual do Maestro -- so' este
     seletor entra na regra, nada mais neste arquivo (ORION tem alteracao em
     andamento aqui). Card de criativo (Meta e Google, mesma classe .cri-card
     nos dois relatorios) cortava na quebra de pagina, topo e rodape. */
  .moonOblivion .painel,.moonOblivion .card.finKpi,.moonOblivion .cri-card{break-inside:avoid;page-break-inside:avoid}
  .moonOblivion .painel{border:1px solid #dcdfe6;box-shadow:none;margin-bottom:7px;border-radius:7px}
  .moonOblivion .painel-top{padding:7px 11px}
  .moonOblivion .painel-top h2{font-size:11.5px}
  .moonOblivion .nota{font-size:8.5px}
  /* 6 colunas fixas: no papel nao existe "auto-fit", a largura e sempre a mesma
     folha A4, e deixar o navegador decidir muda a grade conforme a janela que
     estava aberta na hora de imprimir */
  /* ORION 06/09 -- KPIs QUEBRANDO 4+2 no A4 onde o Oblivion poe 6 em uma linha.
     CAUSA, por cascata: esta regra existia e nao casava com NADA nas abas do
     Moon. Ela mira `.kpis`, que e o nome da classe no OBLIVION; a fileira das
     cinco abas do Moon e montada pelo nova.js com outra classe,
     `.cliCards.finCliCards`. Sem regra que a alcance, ela leva pro papel o
     grid de tela -- auto-fit/minmax(168px,1fr) -- e auto-fit encolhe as
     colunas ate nao caberem 6 e entao QUEBRA a fileira. */
  .moonOblivion .cliCards.finCliCards{gap:5px;margin-bottom:7px;
    grid-template-columns:repeat(6,1fr)!important}
  /* O-117 (ORION, 16/09): a linha acima mirava TAMBEM `.kpis`, que agora existe
     de verdade (moon_relatorio.js/moon_google_relatorio.js, o relatorio de
     conta) mas e' so' um WRAPPER flex-column (nova.css ~3298) em volta de
     `.kpis-fortes`/`.kpis-leves` -- grid-template-columns num container flex
     nao faz nada, regra morta desde que este relatorio nasceu. Removida daqui
     (achado do PHOENIX, O-110/O-117); as duas classes de verdade ganham regra
     PROPRIA logo abaixo, porque nenhuma das duas tinha override nenhum pro
     papel -- cada uma levava pro A4 a mesma contagem de coluna da tela
     (6/11-12/10), e' isso que 55px sobrando por celula e nomes/valores
     encavalados/cortados no PDF real (medido: R$1..., 664,7K41,1K).
     Contagem escolhida pela LARGURA util da A4 (190mm ~=718px, body ~linha
     5566): fortes (6 na tela) -> 3 (2 fileiras de 3, ~230px por celula, cabe
     "R$ 18.292,32" a 14px folgado); leves (11/12/10 na tela) -> 4 (3-4
     fileiras conforme a conta, ~170px por celula, os valores curtos do
     PHOENIX -- "664,7K", "R$ 27,5" -- sobram longe disso); simples (5 na
     tela, rotulos mais longos: "Compartilhamentos") -> 3 (2 fileiras,
     ~230px, testado no PDF real da TRISUL abaixo). */
  .moonOblivion .kpis-fortes{grid-template-columns:repeat(3,1fr)!important;gap:5px!important}
  .moonOblivion .kpis-leves{grid-template-columns:repeat(4,1fr)!important;gap:5px!important}
  .moonOblivion .kpis-simples{grid-template-columns:repeat(3,1fr)!important;gap:5px!important;padding:0!important}
  /* !important nos 5: `.card.finKpi` de base (~linha 5850) e' MESMA especificidade (3 classes) e
     vem DEPOIS no arquivo (fora do print, entao sem media-query pra desempatar) -- sem
     !important ela venceria mesmo dentro do @media print, e o cartao continuaria escuro no
     papel contra o proprio "documento volta a ser claro" que este bloco de impressao promete
     (comentario do timbre, acima). `.destaque`/`.kpiDestaque` (borda roxa) tambem tem
     especificidade maior (4 classes) e sao PAPEL, nao decoracao -- fica de fora do !important
     de proposito, o roxo do destaque sobrevive no papel tambem. */
  .moonOblivion .card.finKpi{background:#f7f8fb!important;border:1px solid #e4e7ee!important;
    box-shadow:none!important;padding:7px 9px!important;border-radius:6px!important}
  .moonOblivion .finKpi .cardLabel{font-size:7.5px!important;letter-spacing:.05em;color:#5b6270!important}
  /* O-117, defeito 2 do PHOENIX ("R$ 1...", "R$ 4..." cortados): a causa de verdade nao era so'
     coluna estreita -- `.cardValor` tem DUAS regras cascateando (nova.css, fora deste bloco):
     a generica `.finKpi .cardValor` (2 classes) poe `white-space:nowrap;overflow:hidden;
     text-overflow:ellipsis`, e a Oblivion-scoped `.moonOblivion .finKpi .cardValor` (3 classes,
     ~linha 5850, DEPOIS deste bloco no arquivo) poe `font-size:22px` sem redeclarar as tres
     acima -- entao elas sobrevivem da regra generica, e um numero de 22px nowrap numa coluna de
     ~230px (ou pior, ~110px antes do fix das colunas acima) so' podia terminar cortado.
     `!important` nos quatro: font-size (senao os 22px da regra Oblivion, que vem DEPOIS no
     arquivo e empata em especificidade, ganham mesmo dentro do print) e os tres de quebra
     (senao a regra generica de fora do print continua valendo, que e' o proprio defeito). Lei
     do Wilker: nunca espreme -- se nao couber, quebra pra' 2a linha, nunca corta. */
  .moonOblivion .finKpi .cardValor{font-size:14px!important;white-space:normal!important;
    overflow:visible!important;text-overflow:clip!important;line-height:1.25!important;
    color:#111!important}
  .moonOblivion .finKpi .finKpiSub{font-size:7.5px!important;line-height:1.3;color:#5b6270!important}

  /* grade de 2 colunas (grafico + funil) vira 1 coluna; a de 3 (paineis Top)
     idem. No Oblivion e a `.grade`; aqui sao .grade2 e .grade3. */
  .moonOblivion .grade2,.moonOblivion .grade3{grid-template-columns:1fr!important;gap:7px}
  /* Grade de criativos fixa em 3 colunas no papel. O Oblivion faz por
     `.painel > div[style*="grid-template-columns"]`, que casa la porque o grid
     dele nasce em style inline; aqui o grid mora na classe .cri-grade, entao o
     seletor de atributo nao casaria com nada. Mesmo efeito, seletor adaptado. */
  .moonOblivion .cri-grade{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}
  .moonOblivion .cri-abrir,.moonOblivion .cri-lamina{display:none}

  /* paineis Top: a linha e o equivalente da <tr> do Oblivion, entao segue o
     mesmo encolhimento de table/th/td (9,5px, padding 3px 5px) */
  .moonOblivion .linha-top{padding:3px 5px;font-size:9.5px}
  .moonOblivion .linha-top .nm,.moonOblivion .linha-top .v{font-size:9.5px}
  .moonOblivion .top-cab{padding:3px 5px}
  /* O-117 (ORION, 16/09), defeito 4 do PHOENIX: "Top campanhas" tem ate 12 colunas de metrica
     (col-metrica/col-custo/col-valor/col-pill/col-taxa, cada uma flex:0 0 largura-fixa, NUNCA
     encolhe) mais o nome (.nm, flex:1, min-width:0 -- encolhe ate' SUMIR). Medido: 12 colunas
     fixas somam ~870-900px de largura contra uns 718px uteis da A4 (190mm, body ~linha 5566) --
     o nome nunca tinha chance (ficava com 0px, sumia da tabela) e ainda sobravam colunas
     vazando da folha (TX.CONV cortado, medido no PDF real da TRISUL abaixo). ESCOLHA: quebrar em
     mais linhas (lei do Wilker), nao reduzir metrica nenhuma -- o `flex-wrap` deixa as colunas de
     metrica que nao couberem na mesma linha do nome escorrerem pra' linha(s) de baixo, na ORDEM
     que ja vem no HTML (a mesma ordem da tela, so' que agora em 2-3 linhas por campanha em vez de
     1 espremida ou cortada).

     VOLTA 1 (ALTAIR, 16/09): a 1a tentativa usava `min-width:200px` (piso, nao teto) em `.nm` --
     nome curto ficava em 200px, nome longo CRESCIA alem disso (medido antes: 200 a 264px
     conforme a campanha). Cabecalho (`.top-cab span:first-child`, sempre vazio, sempre exatos
     200px) e cada linha de dado (`.nm`, largura variando por campanha) T INHAM LARGURAS
     DIFERENTES ENTRE SI -- cada uma "gastava" uma fatia diferente da linha antes das metricas
     comecarem, entao cada linha (e o cabecalho) quebrava as metricas EM PONTOS DIFERENTES.
     Resultado medido pelo ALTAIR: valor da 1a linha ficava 40-50px a esquerda do rotulo que
     deveria ficar em cima dele -- nao dava pra saber qual numero era de qual coluna.
     FIX DE VERDADE: `flex:0 0 Npx` (basis FIXO, sem crescer nem encolher) em vez de min-width --
     `.nm` e o espaco vazio do cabecalho ficam SEMPRE do mesmo tamanho, goste o nome ou nao (nome
     mais longo que isso cai no proprio -webkit-line-clamp:2 que `.nm` ja tinha antes desta ordem,
     MESMO fallback que a tela ja aceita pra nome raro demais). Com os dois lados EXATAMENTE do
     mesmo tamanho sempre, a soma acumulada de largura ate' cada coluna e' identica em cabecalho e
     em qualquer linha -- o navegador so' pode quebrar no MESMO ponto nos dois, pela propria
     matematica do flex-wrap (mesma largura de container, mesma sequencia de larguras fixas). */
  .moonOblivion .top-cab,.moonOblivion .linha-top{flex-wrap:wrap;row-gap:3px}
  .moonOblivion .linha-top .nm{flex:0 0 210px}
  /* O cabecalho so' tem UM span no lugar do nome (span vazio, sem .pos nem .seta-ir): pra ele
     quebrar as metricas no MESMO x que a linha de dado, o span precisa valer a SOMA do que a
     linha de dado gasta antes da 1a metrica -- pos (12px) + gap (8px) + nm (210px fixo, acima) +
     gap (8px) [+ seta-ir (medido: ~4px) + gap (8px), SO' quando a linha e' clicavel e' desenha a
     seta -- `painelTop(..., clicavel)`, nem toda tabela Top passa `true`]. Os dois casos medidos
     ao vivo (Top campanhas: 12+8+210+8+4+8=250px de linha, span de 242px + 1 gap; as tabelas sem
     seta: 12+8+210+8=238px de linha, span de 230px + 1 gap) -- `:has()` (mesma tecnica ja usada
     acima, `.painel:has(.faixa)`) escolhe qual conta vale por tabela, sem tocar no HTML. */
  /* !important nos dois: o span do cabecalho nasce com `style="flex:1"` INLINE
     (moon_relatorio.js/moon_google_relatorio.js, marcador do lugar do nome) -- inline vence
     classe externa mesmo com `:has()`/3 classes de especificidade, sem `!important` o `flex:1`
     inline continuava valendo e o cabecalho nunca alinhava (medido: span ficava com ~72px em vez
     dos 242px pedidos aqui). */
  .moonOblivion .painel:has(.linha-top .seta-ir) .top-cab span:first-child{flex:0 0 242px!important}
  .moonOblivion .painel:not(:has(.linha-top .seta-ir)) .top-cab span:first-child{flex:0 0 230px!important}
  .moonOblivion .rolo{overflow:visible!important}
  .moonOblivion a{text-decoration:none;color:#111}
  .moonOblivion .aviso{border:1px solid #ddd;background:#fafafa;color:#333;font-size:9.5px}
  .moonOblivion svg,.moonOblivion img{max-width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOON DO NOVA VESTIDO DE OBLIVION      (ORION, ordem do ALTAIR, 06/09)
   Fecha as diferencas medidas pelo DRACO em
   Downloads/QA/DIFERENCAS-Oblivion-x-Nova.md

   O QUE ESTE BLOCO E
   O Moon do Nova nao usa as classes do Oblivion: usa as do proprio Nova
   (.card.finKpi, .homeCard, .finTab, .finPill, .acaoBtn). Reescrever essa
   marcacao e nova.js, que nao e so meu. Entao aqui as classes do Nova recebem
   os VALORES do Oblivion, dentro do escopo -- fora dele o Nova segue escuro.
   Cada numero vem do app.css do Oblivion e bate com a coluna "Oblivion" da
   tabela do DRACO.

   DEPENDE DE UMA LINHA QUE NAO E MINHA
   Nada disto acende enquanto telaMoon() (nova.js ~6548) nao puser a classe
   moonOblivion no container da tela. Pedido ao ALTAIR em 06/09.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- 2. FILEIRA DE KPI ---------------------------------------------------
   QA: "grid de 5 colunas com so 4 filhos -- sobram ~350px vazios a direita".
   O .finCliCards trava repeat(5). O Oblivion usa auto-fit/minmax(168px,1fr):
   com 4 cards em 1800px da 4 colunas de 442,5px, que e o que o DRACO mediu do
   lado dele. Gap no token --sp-entre-cards (era 10, colado contra o padding
   11/13 do proprio .finKpi), sem padding proprio (a calha e a do corpo). */
.moonOblivion .cliCards.finCliCards{
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--sp-entre-cards);padding:0;
  align-items:stretch}

/* o card em si: mesmo raio/borda/sombra do molde, padding revisado O-012 2a rodada (ver
   comentario do token --card-pad-y no topo do arquivo -- 22px de padding vertical era quase um
   terco do card, cortado pra --card-pad-y).
   CORRECAO (ORION 08/09), causa achada e confirmada do card mais largo na fileira leve: faltava
   `min-width:0` aqui. A regra antiga `.kpi` (line ~2891, antes da migracao do sistema 3) tinha
   `min-width:0` explicito; eu escrevi esta versao nova sem carregar essa linha. Sem ela, o card e
   um item de grid com `min-width:auto` (padrao), que usa o min-content do conteudo como piso --
   "Custo / msg" tem uma nota ("5 mensagens", `white-space:nowrap`) que nao cabe no 1fr dividido
   igual, entao SO' aquela coluna cresce pra caber o texto (confirmado: media 130,95px contra
   124,33-124,34px dos outros 10, e o `minWidth` computado era literalmente "auto"). Nao era
   decisao de design -- testei essa hipotese antes de mexer -- era regressao minha na migracao. */
.moonOblivion .card.finKpi{
  min-width:0;
  background:var(--mo-card);border:1px solid var(--mo-mist);border-radius:var(--mo-r);
  padding:var(--card-pad-y) var(--card-pad-x);box-shadow:var(--mo-sh)}
/* o Oblivion DESTACA o primeiro card e o Nova nao destacava nenhum */
.moonOblivion .finCliCards > .finKpi:first-child{
  border-color:rgba(123,104,238,.4);box-shadow:0 0 0 1px rgba(123,104,238,.15),var(--mo-sh-md)}
.moonOblivion .finCliCards > .finKpi:first-child .cardValor{color:var(--mo-blue)}
/* O-022 (ORION 08/09), print do Wilker ("ficaram mal desenhados, fundo do card com outro fundo",
   "nada a ver"): medido -- dentro de `.homeCard` (Alarme, Saldo, Comparação), os `.card.finKpi`
   nascem com fundo/borda/raio PROPRIOS, iguais ao card que ja os envolve. Caixa dentro de caixa
   sem motivo, e o `:first-child` acima (regra antiga, "Oblivion destaca o primeiro") acendia UM
   deles (Saldo somado) por POSICAO, nao por significado -- a mesma familia do erro do item 27 que
   ja corrigimos hoje (nth-child), so que aqui ninguem tinha pedido destaque nenhum: 3 caixas iguais
   e 1 diferente e ruido, nao hierarquia. Dentro de um `.homeCard`, o KPI vira SECAO do card que o
   contem: sem fundo/borda/raio proprios, separado por espacamento (o gap do grid ja chega) + um
   divisor de 1px entre eles, nunca moldura. O destaque de verdade (quando existe) e do CARD DE
   FORA (`.cardDestaque`, ja aplicado em Alarme/Saldo), nunca do quadradinho de dentro. */
.moonOblivion .homeCard .card.finKpi{background:none;border:none;box-shadow:none;border-radius:0}
.moonOblivion .homeCard .cliCards.finCliCards{gap:0}
.moonOblivion .homeCard .card.finKpi:not(:last-child){border-right:1px solid var(--mo-mist)}
.moonOblivion .homeCard .finCliCards > .finKpi:first-child .cardValor{color:var(--mo-graphite)}

/* O-012 (ORION 07/09) -- PARTE 9, recalculado na 2a rodada (padding do molde cortado pra
   --card-pad-y). .card.tpAtalho e .card.finBusca sao filhos da MESMA grade .cliCards.finCliCards
   que os .finKpi, mas nao tem rotulo/valor/nota -- sem trava de altura eles ficam mais baixos e
   desalinham a fileira. Grid ja estica por padrao (align-items:stretch acima), entao min-height
   nos FILHOS DIRETOS da grade iguala: padding 7*2 (14) + rotulo ~13 + margem 2 + valor 22*1.1
   (~24) + margem 2 + nota ~14 = 69, arredondado com folga pra 70px. */
.moonOblivion .cliCards.finCliCards > *{min-height:70px}

/* variante ATALHO do molde: sem valor grande, e navegacao (chips + "ver tarefas"). */
.moonOblivion .card.tpAtalho{
  background:var(--mo-card);border:1px solid var(--mo-mist);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:var(--card-pad);
  display:flex;flex-direction:column;gap:6px;overflow:hidden}
.moonOblivion .card.tpAtalho .finPill.chipLista{white-space:normal}
/* O-016 item 7 (ORION 08/09): anatomia do molde -- rotulo em cima (mesma tipografia do .rot
   dos cards de numero), conteudo no meio, acao como ultima linha. Sem valor grande, mas com a
   MESMA hierarquia visual, pra nao ler como "card de outro sistema" na mesma fileira. */
.moonOblivion .card.tpAtalho .tpAtalhoRot{font-size:11px;font-weight:600;color:var(--mo-steel);
  letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moonOblivion .card.tpAtalho .tpAtalhoListas{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.moonOblivion .card.tpAtalho .tpAtalhoAcao{font-size:11.5px;white-space:nowrap}

/* variante ATALHO do molde: envolve o dropdown de conta (.dd/.ntCampoWrap/.ddMenu), componente
   ja existente -- so o CARD ao redor e novo aqui. */
.moonOblivion .card.finBusca{
  background:var(--mo-card);border:1px solid var(--mo-mist);border-radius:var(--card-r);
  box-shadow:var(--card-sh);padding:var(--card-pad);
  display:flex;align-items:center}
/* O-016 item 2 (ORION 08/09): rotulo "Abrir relatorio de uma conta" quebrava em 2 linhas dentro
   do botao estreito -- encurtado no nova.js pra "Selecionar conta" e travado numa linha aqui,
   defensivo caso o texto mude de novo no futuro. */
.moonOblivion .card.finBusca .ntCampo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* O-022 (ORION 08/09), item 4, REINCIDENTE: Maestro mediu o BOTAO (nao o menu, ja corrigido 2x)
   fora do padrao -- `.ntCampo` e generico do Nova (borda `var(--borda)` opaca clara, fundo
   transparente, radius 16 em pilula), enquanto o `.perbtn` vizinho na MESMA tela (Oblivion escuro)
   usa outra gramatica inteira (radius 9, fundo/borda proprios do tema escuro). Varredura (Maestro +
   eu) confirmou: e o UNICO `.dd` do app convivendo com `.perbtn` -- so aqui, Meta/Google. Escopado
   em `.moonOblivion .card.finBusca .ntCampo` (nao em `.moonOblivion .dd` nem em `.ntCampo` puro) --
   o `.dd`/`.ntCampoWrap` genericos do resto do app continuam intocados. Valores copiados do
   `.perbtn` medido (padding/radius/fundo/borda/fonte/box-shadow), so sem min-width (o texto aqui e
   dinamico, nome de conta variando de tamanho, min-width do perbtn era pro rotulo fixo de periodo). */
.moonOblivion .card.finBusca .ntCampo{width:100%;display:flex;align-items:center;gap:6px;
  background:var(--mo-white);border:1px solid var(--mo-mist);border-radius:9px;
  padding:8px 12px;font-size:13px;color:var(--mo-graphite);box-shadow:var(--mo-sh);
  transition:border-color .13s,box-shadow .13s}
.moonOblivion .card.finBusca .ntCampo:hover{background:var(--mo-white);border-color:var(--mo-mist-hover);color:var(--mo-graphite)}
/* O-016 (ORION 08/09): esta fileira (finBusca + 5 KPIs) tambem usava auto-fit -- mesmo bug
   sistemico do dia. 6 itens conhecidos, colunas fixas. */
.moonOblivion .finCliCards6{grid-template-columns:repeat(6,1fr)}

/* ROTULO -- o item que o Wilker mais odeia: 9px/400 em MAIUSCULA com ls 1,5px
   virando 11px/600 em caixa NORMAL com ls 0,33px. O text-transform tem que
   morrer explicitamente, senao Gasto 30 dias continua GASTO 30 DIAS. */
.moonOblivion .finKpi .cardLabel{
  font-size:11px;font-weight:600;color:var(--mo-steel);letter-spacing:.03em;
  text-transform:none;
  display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* o .finKpi .cardValor do Nova usa clamp(14px,1.3vw,20px): so um seletor de
   3 classes vence, por isso o .moonOblivion na frente e obrigatorio aqui */
.moonOblivion .finKpi .cardValor{
  font-size:22px;font-weight:680;letter-spacing:-.025em;margin-top:2px;line-height:1.1;
  color:var(--mo-graphite);font-variant-numeric:tabular-nums}
.moonOblivion .finKpi .finKpiSub{
  font-size:11.5px;color:var(--mo-slate);margin-top:2px}
/* PADRAO DO MOLDE: `.finKpiSub` e line-height 1,5 (herdado da regra generica acima). O relatorio
   de conta cumpre o padrao -- fortes com 242px de coluna, sobra espaco de sobra pra nota.

   EXCECAO ESCRITA, condicionada (decisao do ALTAIR, 08/09, depois de eu decompor a causa dos
   2,31px que apareceram quando igualei o `cardValor` do relatorio ao gabarito de 22px): quando a
   COLUNA E ESTREITA a ponto da nota cortar, o sub cai pra 1,3 -- O-020, achado na fileira
   finBusca+5-KPIs do dashboard (204px de coluna hoje; a nota "conversões, como a plataforma
   reporta" cortava herdando `white-space:nowrap;text-overflow:ellipsis` da base). A CONDICAO REAL
   e a LARGURA da coluna, nao "ser o dashboard" -- `.finCliCards6` e o nome da fileira estreita
   HOJE, nao a regra. Se uma tela nova nascer com coluna igual de estreita, ela precisa da MESMA
   excecao (mesma causa); se o dashboard um dia ganhar coluna mais larga, a excecao sai dali com
   ele. Nao amarrei isso a uma media query de largura de verdade pra nao inventar mecanismo novo
   agora (ALTAIR pediu simplicidade) -- fica a classe como proxy da condicao, com este comentario
   apontando qual e a condicao de verdade.
   PRECO CONHECIDO da excecao, medido: 2,31px A MENOS de altura no card onde ela se aplica, contra
   o padrao de 1,5. Isso e o custo aceito da excecao, nao um defeito solto pra investigar de novo. */
.moonOblivion .finCliCards6 .finKpiSub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}

/* ============================================================================
   O-012 (ORION 08/09), passo 2: CSS de acolhimento pro sistema 3 (`.kpi` do
   relatorio de conta, moon_relatorio.js) migrar pra este molde -- SEM EU TOCAR
   NO ARQUIVO DO PHOENIX (ordem do ALTAIR: territorio dele, trabalhando nele
   hoje). Aqui SO o CSS; a lista exata de troca de classe foi mandada ao
   ALTAIR pra ele repassar. Estas regras nao afetam NADA hoje -- os seletores
   miram `.card.finKpi` dentro de `.kpis-fortes`/`.kpis-leves`/`.kpis-simples`,
   uma combinacao que so vai existir depois que o PHOENIX aplicar a troca.
   Zero risco pro que ja roda: nenhuma classe existente foi redefinida.

   `.card.finKpi` sozinho (a regra generica, linha ~4987) ja e IDENTICA a
   `.moonOblivion .kpi` (linha ~2873, mesmo background/border/radius/padding/
   shadow, byte a byte) -- a celula em si nao precisa de override nenhum.
   O que precisa de ajuste sao os 3 pontos onde o `.kpi` do relatorio diverge
   do `.finKpi` generico: */
/* 1) VALOR: existiu aqui um override pra 18px (o relatorio sempre foi 18, o generico e 22) --
   decisao do ALTAIR (08/09), depois de eu decompor a causa dos 2,08px de diferenca de altura
   entre relatorio e dashboard: o generico 22px E' o gabarito aprovado (a propria ordem O-012 cita
   "os KPIs da aba Meta", que e o dashboard, como referencia). Manter o relatorio em 18 seria deixar
   a excecao redefinir a regra. Removido -- o relatorio agora HERDA o 22px generico de proposito,
   nao por omissao. Numero maior no relatorio e mudanca visual CIENTE, nao acidente. */
/* CORRECAO (ORION 08/09), os 2px que o ALTAIR mandou resolver: causa achada por medicao direta
   (nao suposta) -- montei `.kpi`/`.pe` velho e `.card.finKpi`/`.finKpiSub` novo lado a lado e
   comparei getBoundingClientRect de cada filho. `.rot`/`.cardLabel` batiam exato (16,5px os
   dois). `.val`/`.cardValor` batiam exato (19,8px os dois, line-height:1.1 explicito nos dois).
   SO `.pe`/`.finKpiSub` divergia: 17,25px vs 16,09px -- 1,16px nessa linha, ~2px na soma dos 6
   cards que o PHOENIX mediu. Raiz: `.finKpiSub` BASE (nao-moonOblivion, linha ~940) declara
   `line-height:1.4` (relativo, 11,5px*1,4=16,1px, bate com o medido); `.pe` NUNCA teve
   line-height proprio, sempre foi o "normal" do navegador pra este font-size (~17,25px, tambem
   bate com o medido). A troca de nome herdou uma regra-irma que o `.pe` nunca teve. Fix: mata o
   1.4 herdado SO nestes 3 contextos, devolvendo o "normal" original -- sem line-height novo
   inventado, so removendo o que a troca de classe trouxe sem querer.
   CORRECAO DA CORRECAO: a 1a tentativa usou `line-height:normal`, que devolveu 15px, nao 17,25px
   -- "normal" e calculado pela metrica da FONTE ativa naquele ponto da cascata, nao um numero
   fixo, e o contexto novo (dentro de `.card.finKpi`) tem uma fonte ambiente diferente da do
   `.kpi` antigo o bastante pra "normal" dar outro valor. Troquei pelo NUMERO medido direto:
   17,25px ÷ 11,5px de font-size = 1,5 exato -- `line-height:1.5` explicito reproduz o valor
   antigo de verdade, sem depender de metrica de fonte que pode mudar de novo por outro motivo. */
.moonOblivion .kpis-fortes .card.finKpi .finKpiSub,
.moonOblivion .kpis-leves .card.finKpi .finKpiSub,
.moonOblivion .kpis-simples .card.finKpi .finKpiSub{line-height:1.5}
/* 2) LEVES: hoje `.kpis-leves .kpi` centraliza o conteudo e esconde a nota
   (`.pe{display:none}`) -- comportamento que so existe nesta fileira, tem
   que sobreviver a troca de nome dos filhos. */
.moonOblivion .kpis-leves .card.finKpi{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.moonOblivion .kpis-leves .card.finKpi .cardLabel{justify-content:center}
.moonOblivion .kpis-leves .card.finKpi .finKpiSub{display:none}
/* 3) DESTAQUE DO "INVESTIMENTO": NAO virou `kpiDestaque` (a classe de
   emphase-de-celula que ja existe no molde, gradiente) porque a CSS de hoje
   pro `.kpi.destaque` e visualmente DIFERENTE (borda com glow roxo, nao
   gradiente) -- fundir os dois teria trocado a aparencia aprovada por outra.
   Mantive o nome de classe ORIGINAL `destaque` (nao inventei nome novo,
   nao fundi com kpiDestaque) e so re-declarei o mesmo efeito sobre
   `.card.finKpi`. ANOTADO pro ALTAIR como oportunidade futura (trava 1: nao
   decido isso sozinho) -- hoje existem DOIS tratamentos de "isto importa"
   convivendo no mesmo relatorio (glow em Investimento via `destaque`,
   gradiente em Qualificados/Visitas/Vendas via `kpiDestaque`); unificar os
   dois e uma pergunta de design, nao uma consolidacao mecanica. */
.moonOblivion .card.finKpi.destaque{border-color:rgba(123,104,238,.4);box-shadow:0 0 0 1px rgba(123,104,238,.15),var(--mo-sh-md)}
.moonOblivion .card.finKpi.destaque .cardValor{color:var(--mo-blue)}
/* variantes usadas em outros pontos do relatorio (comparacao periodo a periodo
   -- .val.falta / .pe .up / .pe .down), preservadas com o mesmo valor visual
   sob os novos nomes de classe. */
.moonOblivion .card.finKpi .cardValor.falta{color:var(--mo-steel);font-size:19px;font-weight:600}
.moonOblivion .card.finKpi .finKpiSub .up{color:var(--mo-ok);font-weight:650}
.moonOblivion .card.finKpi .finKpiSub .down{color:var(--mo-bad);font-weight:650}
/* `kpi--forte` (classe aplicada pelo JS em Investimento/Resultados/Custo por
   resultado) NAO TEM regra CSS nenhuma hoje -- confirmado por busca, zero
   ocorrencia. E' um no-op: a largura "forte" vem inteira da grade de 6
   colunas (`.kpis-fortes`), nao da classe. Pode ser DROPADA na troca sem
   nenhum efeito visual -- nao precisa de equivalente no molde. */

/* ---- 3. PAINEL E TITULO DE SECAO ----------------------------------------
   .homeCard vira painel; .homeCardTit vira painel-top (13,5px/650, calha
   14x16, risco embaixo). O subtitulo (.mini) volta a andar COLADO no titulo,
   em vez de ser jogado na ponta direita pelo space-between. */
.moonOblivion .homeCard{
  background:var(--mo-card);border:1px solid var(--mo-mist);border-radius:var(--mo-r);
  box-shadow:var(--mo-sh)}
.moonOblivion .homeCardTit{
  font-size:13.5px;font-weight:650;color:var(--mo-graphite);
  padding:14px 16px;border-bottom:1px solid var(--mo-mist);
  justify-content:flex-start;gap:10px}
.moonOblivion .homeCardTit .mini{font-size:11.5px;color:var(--mo-steel);font-weight:400}
.moonOblivion .homeCardTit .homeCardVerTudo{margin-left:auto;font-size:12px;font-weight:600;color:var(--mo-blue)}
/* O-011 item 1 (ORION 08/09): "Contas sob gestão" volta como TITULO DE SECAO -- texto puro, sem
   moldura, sem fundo, sem borda (diferente de `.homeCardTit`, que E' cabecalho de card com borda
   embaixo -- aqui o pedido e' o oposto, hierarquia sem virar caixa). Mesmo peso tipografico do
   `.homeCardTit` (13.5/650) pra ler como o MESMO nivel de titulo que o resto do app usa, so sem a
   caixa em volta. */
.moonOblivion .cliCardsTit{font-size:13.5px;font-weight:650;color:var(--mo-graphite);margin-bottom:8px}
.moonOblivion .homeCardBody{padding:0;color:var(--mo-graphite)}
/* comKpis removida em O-012: o wrapper .homeCard/.homeCardBody que ela vestia saiu da
   marcacao de "Contas sob gestao" (ANTARES). Classe orfa, confirmada por grep antes de apagar. */

/* ---- 5. TABELA ----------------------------------------------------------
   Cabecalho em MAIUSCULA 11px/650 ls .05em sobre branco, calha 9x14, e numero
   a DIREITA. A regra do alinhamento e a do Oblivion na letra: tudo a direita,
   menos a primeira coluna. */
.moonOblivion .finTab{font-size:13.5px;font-variant-numeric:tabular-nums}
.moonOblivion .finTab th{
  font-size:11px;font-weight:650;color:var(--mo-steel);text-transform:uppercase;
  letter-spacing:.05em;text-align:right;padding:9px 14px;
  border-bottom:1px solid var(--mo-mist);background:var(--mo-white);white-space:nowrap}
.moonOblivion .finTab th:first-child{text-align:left}
.moonOblivion .finTab td{
  padding:11px 14px;border-bottom:1px solid var(--mo-mist);text-align:right;
  white-space:nowrap;font-size:13.5px;color:var(--mo-graphite)}
.moonOblivion .finTab td:first-child{text-align:left}
.moonOblivion .finTab tbody tr:last-child td{border-bottom:none}
/* O-101 (ORION, 16/09): era `tr:hover` puro -- pintava TODA linha desta tabela, inclusive as que
   so tem um `.moonLink` interno clicavel (`.contaSubRow`, contas orfas), contra a lei do hover
   escrita acima (~linha 1122). Escopado pro MESMO `.linhaClicavel` que o resto do app usa agora --
   so' a linha do cliente (`data-cliente`, abre a ficha inteira) continua tendo hover aqui. A COR
   fica a mesma (`rgba(255,255,255,.04)`).
   CORRIGIDO (ALTAIR mediu, volta 1): a explicacao anterior aqui dizia "tema claro do Moon, fundo
   --mo-white" -- ERRADO, medido ao vivo. `--mo-white` (definido em `:root`, ~linha 3151) e'
   `var(--surface-2)` neste app -- o Moon inteiro foi remapeado pro tema ESCURO do Nova, nunca fica
   branco em tela. O fundo
   real atras da linha de cliente e' `.clienteSecoes.moonOblivion`, medido em `rgb(15,15,18)`
   (escuro, ~`--bg`). O `#fff!important` em `.moonOblivion` (linha ~5539) so' existe dentro de
   `@media print` -- vira branco SO' no PDF que sai pro cliente, tela nenhuma. Hover nao existe em
   papel, entao esse branco nunca concorre com esta regra.
   A COR CERTA, pelo motivo certo: `rgba(255,255,255,.04)` e' um LAVADO branco translucido, tecnica
   equivalente a `--surface-2` (clarear um degrau) so' que por overlay em vez de token solido --
   funciona bem PORQUE o fundo e' escuro (o mesmo principio de "lighten on hover" que justifica
   `--surface-2` na lei generica), nao apesar disso. Nao trocado pelo token generico porque ja
   estava medido e aprovado (ver [[reference_contraste_nao_viaja]]: so' o MECANISMO viaja entre
   escopos, a cor de cada um fica com quem ja mediu ela -- aqui os dois sao tecnicas escuras
   equivalentes, so' que ninguem tinha escrito PORQUE antes). */
.moonOblivion .linhaClicavel:hover{background:rgba(255,255,255,.04)}
/* nome da conta e cliente eram link ROXO; no Oblivion sao texto escuro */
.moonOblivion .finTab td .moonLink,.moonOblivion .finTab td a{color:var(--mo-graphite);font-weight:400}
.moonOblivion .finTab td .moonLink:hover{color:var(--mo-blue)}
.moonOblivion .tpVazio{color:var(--mo-steel);opacity:1}

/* ---- 4. PILLS E BOTAO ---------------------------------------------------
   Pill do Nova e transparente (rgba .16) com raio 999; a do Oblivion e SOLIDA
   com raio 20 e peso 650. */
.moonOblivion .finPill{
  padding:2px 8px;border-radius:20px;font-size:11px;font-weight:650}
/* Atualizar agora: roxo 12,5px/600 pad 6x12 raio 6 -> azul do Oblivion */
.moonOblivion .acaoBtn.roxo{
  background:var(--mo-blue);color:#fff;font-size:13px;font-weight:650;
  padding:9px 18px;border-radius:8px}
.moonOblivion .acaoBtn.roxo:hover{background:var(--mo-blue-h)}
.moonOblivion .acaoBtn.claro{
  background:var(--mo-white);color:var(--mo-slate);border:1px solid var(--mo-mist);
  font-size:13px;font-weight:650;padding:9px 18px;border-radius:8px}

/* ---- 7. FAIXA DE AVISO --------------------------------------------------
   O REMENDO SAIU. Era um bloco com !important pra vencer o style inline que o
   nova.js escrevia (border-color:var(--vermelho)). Agora o nova.js emite a
   classe de verdade -- <div class="aviso ruim">, que ja existe no escopo, com
   a barra so a esquerda e o texto #7A2C2C. Nove faixas convertidas.
   Nenhum !important sobrou no escopo. */


/* ══════════════════════════════════════════════════════════════════════════
   O-069 (13/09), Wilker olhando a tela: "ta sendo alturas diferentes... ja
   falei que era pra isso ficar padronizado as alturas". A regra de 40px que
   morava aqui (nome do cliente em 2 linhas com o valor embaixo) foi REMOVIDA.

   HISTORICO, pra ninguem reescrever o mesmo erro: em 06/09 o criterio era
   certo (altura irregular chama mais atencao que altura maior) mas a
   CONCLUSAO estava errada -- resolvi o serrilhado DENTRO da secao Clientes e
   criei um degrau de 12px ENTRE secoes (28px pastas/favoritos/documentos
   contra 40px clientes), e o Wilker viu o degrau maior, nao o serrilhado
   menor que eu apaguei. Mesma familia de erro do corte de texto do mesmo dia:
   consertar o pedaco que me mostraram em vez do mecanismo inteiro.

   POR QUE DA PRA TIRAR SEM PERDER NADA: `mostrarFee` (o valor que forcava a
   2a linha) so' e' true em `sidebarClientesFinanceiro()`, que nao tem
   NENHUM chamador vivo hoje (O-057 -- funcao morta, guardada so' pro caso
   legado hipotetico voltar). Ou seja, a rota que forcava 40px nunca renderiza
   valor nenhum HOJE -- a excecao existia pra um problema que nao aparece na
   pratica atual.

   LEI NOVA (ordem do Wilker, travas da ALTAIR): UMA altura pra TODO `.lista`
   da lateral -- nenhuma excecao de altura escrita em CSS pra secao nenhuma.
   Se `mostrarFee` reviver um dia, quem reativar resolve o valor cedendo
   ESPACO (mesma linha/tooltip/oculto), nunca pedindo altura extra de volta --
   nome comprido continua quebrando (ver .lista .cont/.espNome/.pastaNome,
   overflow-wrap:break-word) e a linha cresce sozinha quando isso acontece,
   que e' diferente de uma SECAO INTEIRA ter piso mais alto que as outras. */

/* botao de dropdown SEM contador (.n). No Oblivion o .n leva o margin-left:auto
   e empurra a seta pra ponta; o filtro de plataforma e so do Nova (o Oblivion
   nao tem esse filtro) e nao tem contador nenhum, entao a seta ficaria colada
   no texto com sobra vazia a direita. Modificador proprio pra nao mexer na
   geometria do seletor de periodo, que e do Oblivion. */
.moonOblivion .perbtn.semN .seta{margin-left:auto}

/* ══════════════════════════════════════════════════════════════════════════
   BARRAS DO OBLIVION (.obBarras)        (ORION 06/09)
   Valores tirados do FONTE do Oblivion, nao do print:
     moon.php 138-151 ............... Visao geral (sem pico)
     _moon_plataforma.php 128-141 ... Meta/Google (com pico)
   La eles vivem em style inline no PHP; aqui viram classe, mesmo valor.

   A largura da barra NAO e fixa. O Oblivion usa flex:1 na coluna, entao os
   "60px" que o QA mediu sao o resultado de ~30 dias na largura DELE. O card do
   Nova e mais estreito (tem a lateral de departamentos), entao a barra sai
   menor e isso esta certo: copiar 60px fixo furaria a fileira.
   ══════════════════════════════════════════════════════════════════════════ */
.moonOblivion .obBarras{
  display:flex;align-items:flex-end;gap:3px;
  height:130px;padding:18px 16px 14px}
/* a Meta reserva mais altura porque o valor do pico mora ACIMA da barra */
.moonOblivion .obBarras.comPico{height:150px;padding:18px 16px 8px}
.moonOblivion .obBarCol{
  flex:1;min-width:0;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end}
.moonOblivion .obBarras.comPico .obBarCol{gap:4px}
.moonOblivion .obBar{
  min-height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--mo-electric),var(--mo-blue))}
.moonOblivion .obBar.pico{
  background:linear-gradient(180deg,var(--mo-bronze),var(--mo-bronze-d))}
/* o valor do pico e mais largo que a coluna. Transborda DE PROPOSITO, sobre as
   colunas vizinhas, que nesse ponto estao vazias -- e o que o Oblivion faz.
   Cortar com ellipsis aqui seria pior: o numero e a informacao. */
.moonOblivion .obBarValor{
  font-size:10px;font-weight:650;color:var(--mo-slate);
  text-align:center;white-space:nowrap;overflow:visible}
.moonOblivion .obBarPe{
  display:flex;justify-content:space-between;
  padding:0 16px 13px;font-size:11px;color:var(--mo-steel)}
.moonOblivion .obBarras.comPico + .obBarPe{padding-bottom:14px}

/* ══════════════════════════════════════════════════════════════════════════
   BLOCO D (ORION 06/09) -- rotulo por barra, semana parcial e o delta em classe
   ══════════════════════════════════════════════════════════════════════════ */

/* ROTULO POR BARRA, em linha propria.
   A aba Tendencias escrevia os valores com position:absolute e left:% -- so
   que .moonValorLabel NUNCA teve regra de CSS no projeto (a unica mencao dela
   na folha inteira era uma linha de cor). Sem position, os spans caiam inline
   e colavam num paredao: "R$ 2.171R$ 10.357R$ 10.474...".
   Aqui nao ha posicao calculada: a linha de rotulos repete a MESMA geometria
   das colunas (flex:1, mesmo gap, mesmo padding lateral), entao cada rotulo
   nasce embaixo da sua barra por construcao. Nao tem como desalinhar. */
.moonOblivion .obBarRotulos{
  display:flex;gap:3px;padding:0 16px 10px}
.moonOblivion .obBarRotulos > span{
  flex:1;min-width:0;text-align:center;
  font-size:10.5px;color:var(--mo-steel);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* SEMANA PARCIAL: hachura mantida (ela existe pra semana em andamento nao
   parecer queda), mas na familia AZUL do Oblivion, nao no cinza escuro do
   Nova. Mesma cor das outras barras, so listrada. */
.moonOblivion .obBar.parcial{
  background:repeating-linear-gradient(45deg,
    var(--mo-electric) 0 4px, var(--mo-sky) 4px 8px)}

/* DELTA (+27,7% / -16,1%). Era style inline com os tokens do Nova; virou
   classe. Fora do escopo as cores continuam IDENTICAS as de antes, entao
   nenhuma outra tela muda. Dentro do escopo viram as do Oblivion. */
.moonDelta{font-weight:650}
.moonDelta.neutro{color:var(--apagado)}
.moonDelta.bom{color:var(--verde)}
.moonDelta.ruim{color:var(--vermelho)}
.moonOblivion .moonDelta.neutro{color:var(--mo-steel)}
.moonOblivion .moonDelta.bom{color:var(--mo-ok)}
.moonOblivion .moonDelta.ruim{color:var(--mo-bad)}

/* AVATAR DE INICIAIS dentro do escopo. O .moonAvatar do Nova e um CIRCULO roxo
   de 26px; o do Oblivion (.ini, app.css 186) e quadrado arredondado de 27px,
   fundo haze e texto azul. O .ini ja esta no escopo; aqui o .moonAvatar da aba
   Clientes, que usa outra classe pro mesmo papel, ganha o mesmo desenho. */
.moonOblivion .moonAvatar{width:27px;height:27px;flex:0 0 27px;border-radius:7px;
  background:var(--mo-haze);color:var(--mo-blue);font-size:11px;font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   CAMADA 3 -- TEXTO ILEGIVEL DENTRO DA FAIXA DE ALERTA   (ORION 06/09)

   Medido antes: o titulo da faixa vermelha estava em 8,23:1, e o NOME DA CONTA
   dentro dela, que e a unica informacao acionavel do alarme, em 1,79:1. O
   minimo AA pra texto normal e 4,5:1. O alarme dispara e o conteudo do alarme
   nao se le.

   CAUSA: .homeRow e .homeVazio nunca ganharam regra no escopo. Elas caiam nas
   regras do Nova, que sao do tema ESCURO -- .homeRow{color:var(--tinta-2)} e
   .homeVazio{color:var(--apagado)}. Cor de texto claro sobre fundo claro.
   Nao e cor errada por descuido de paleta: e tema errado inteiro vazando.

   NOTA DE PORTE (correcao do DRACO, 06/09): a lista de contas orfas DENTRO da
   faixa e invencao do Nova. O Oblivion poe uma frase e mais nada. Entao aqui
   nao ha o que copiar dele -- o criterio e o do Wilker: legivel, e a hierarquia
   sai de peso e tamanho, nunca de apagar a cor.
   ══════════════════════════════════════════════════════════════════════════ */

/* a linha herda a cor de quem a contem: dentro da faixa vermelha ela fica no
   #7A2C2C da propria faixa (8,23:1), fora dela no grafite do escopo */
.moonOblivion .homeRow{color:inherit;font-size:12.5px}
.moonOblivion .homeRow:hover{background:rgba(255,255,255,.06);color:inherit}
.moonOblivion .homeRow .nm{color:inherit;font-weight:600}
.moonOblivion .homeRow .sub{color:inherit;font-weight:650;font-variant-numeric:tabular-nums}
/* o link de acao dentro da faixa segue o idioma do Oblivion pra link em aviso
   (app.css: .aviso a{color:inherit;font-weight:650;text-decoration:underline})
   -- azul dentro de faixa vermelha brigaria com o proprio alarme */
.moonOblivion .aviso .moonLink{color:inherit;font-weight:650;text-decoration:underline;cursor:pointer}

/* estado VAZIO: era --apagado (#75757f, token do tema escuro). Passa pro
   secundario do Oblivion, que a propria tabela de contraste dele marca como
   7,4:1 -- folgado acima do minimo. */
.moonOblivion .homeVazio{color:var(--mo-slate);font-size:12.5px;padding:16px 12px}

/* chip de lista: o fundo vinha inline em var(--surface-2), token do tema ESCURO,
   dentro da tela clara -- texto grafite sobre #24242b dava 1,10:1, invisivel.
   Virou classe, com o valor certo de cada lado. */
.finPill.chipLista{background:var(--surface-2);cursor:pointer}
.moonOblivion .finPill.chipLista{background:var(--mo-fog);color:var(--mo-slate)}
.moonOblivion .finPill.chipLista:hover{background:var(--mo-haze);color:var(--mo-blue)}

/* ══════════════════════════════════════════════════════════════════════════
   ESTADO CARREGANDO -- cara PROPRIA          (ORION 06/09, camadas 1 e 2)

   Antes "carregando…" e "não deu para carregar" eram a MESMA classe (.vazio) e
   pintavam pixel a pixel igual. Agora sao tres coisas distintas:
      carregando -> esta regra, com giro e a cor de trabalho (azul)
      falhou     -> .aviso ruim, a faixa vermelha que ja existe
      vazio      -> .vazio / .homeVazio, cinza, sem alarme

   O Oblivion nao tem estado de carregando: ele monta a pagina inteira no
   servidor antes de mandar. Entao nao ha o que copiar, e o desenho sai do
   vocabulario dele -- azul e a cor de "em andamento" (--electric, a mesma do
   foco e da selecao), cinza e ausencia, vermelho e falha.
   O texto usa --mo-slate (7,4:1) e nao o --mo-steel do vazio (3,2:1): estado
   de sistema tem que ser mais legivel que ausencia de dado, nao menos.
   ══════════════════════════════════════════════════════════════════════════ */
.moonCarregando{display:flex;align-items:center;gap:9px;padding:14px 16px;
  font-size:12.5px;color:var(--apagado)}
.moonOblivion .moonCarregando{color:var(--mo-slate)}
.moonCarregando::before{content:'';width:13px;height:13px;flex:0 0 13px;
  border-radius:50%;border:2px solid var(--borda-2);border-top-color:var(--roxo);
  animation:moonGirando .7s linear infinite}
.moonOblivion .moonCarregando::before{border-color:var(--mo-mist);
  border-top-color:var(--mo-electric)}
@keyframes moonGirando{to{transform:rotate(360deg)}}
/* quem pediu menos movimento no sistema nao ganha um giro na cara */
@media (prefers-reduced-motion:reduce){.moonCarregando::before{animation:none}}