/* ═══════════════════════════════════════════════════════════════════════════
   UNIDADE DE ALTURA: `dvh`, e nunca `vh`
   ═══════════════════════════════════════════════════════════════════════════
   Toda altura de viewport neste projeto usa `dvh` (dynamic viewport height).
   São 63 declarações, em sete folhas de estilo.

   `vh` no celular é a altura da janela COM a barra de endereço recolhida e
   SEM o teclado. É um número que quase nunca corresponde ao que está visível:

     · no iOS, `100vh` é maior que a tela enquanto a barra de endereço aparece,
       então o rodapé de um modal fica escondido atrás dela;
     · com o teclado virtual aberto, `vh` não muda — e o botão "Salvar" de um
       formulário fica embaixo do teclado, inalcançável, sem nada indicando
       que ele existe;
     · `max-height:90vh` num modal promete "cabe na tela" e entrega um cartão
       cortado nas duas pontas.

   `dvh` acompanha a área realmente visível: encolhe quando o teclado sobe,
   cresce quando a barra some. É o que faz `max-height` significar o que diz.

   O preço é que um elemento com `height:100dvh` muda de tamanho quando a
   barra de endereço aparece ao rolar. Isso é aceitável aqui porque nenhuma
   altura do projeto é de fundo decorativo de página inteira — são modais,
   painéis e janelas, que precisam CABER, e para os quais o redimensionamento
   é o comportamento certo.

   NÃO troque de volta para `vh` por consistência com algum trecho antigo: o
   antigo é que está errado. Se precisar da maior altura possível, `lvh`; da
   menor, `svh`. `vh` puro não é nenhuma das duas.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Admin Panel ─────────────────────────────────────────── */
.t-btn-admin{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.35);color:#a5b4fc;}
.t-btn-admin:hover{background:rgba(99,102,241,.28);border-color:#6366f1;color:#fff;}
.admin-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:var(--z-lightbox,500);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.admin-panel{background:#111;border:1px solid rgba(255,255,255,.09);border-radius:16px;width:min(96vw,1100px);max-height:90dvh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6);}
.admin-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07);gap:12px;flex-wrap:wrap;}
.admin-title{font-size:.95rem;font-weight:700;color:#f0f0f0;display:flex;align-items:center;gap:8px;}
.admin-badge-icon{font-size:1.1rem;}
.admin-search{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 12px;color:#f0f0f0;font-size:.8rem;font-family:'Inter',sans-serif;width:200px;outline:none;}
.admin-search:focus{border-color:rgba(99,102,241,.5);}
.admin-refresh-btn,.admin-close-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#a0a0a0;cursor:pointer;padding:6px 10px;font-size:.85rem;transition:.15s;}
.admin-refresh-btn:hover,.admin-close-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.admin-stats{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap;}
.admin-stat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 16px;flex:1;min-width:100px;}
.admin-stat-n{font-size:1.4rem;font-weight:700;color:#a5b4fc;}
.admin-stat-l{font-size:.7rem;color:rgba(255,255,255,.4);margin-top:2px;}
.admin-table-wrap{overflow:auto;flex:1;}
.admin-table{width:100%;border-collapse:collapse;font-size:.78rem;}
.admin-table th{padding:10px 14px;text-align:left;color:rgba(255,255,255,.4);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;background:#111;z-index:1;}
.admin-table td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:rgba(240,240,240,.85);vertical-align:middle;}
.admin-table tr:hover td{background:rgba(255,255,255,.03);}
.admin-loading{text-align:center;padding:32px;color:rgba(255,255,255,.3);font-size:.82rem;}
.admin-plan-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.admin-plan-badge.prem{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:#fbbf24;}
.admin-plan-badge.free{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);}
.admin-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.2);}
.admin-dot.online{background:#10b981;border-color:#34d399;box-shadow:0 0 6px rgba(16,185,129,.5);}
.admin-footer{padding:10px 20px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:rgba(255,255,255,.3);}


/* ═══════════════════════════════════════════════════════
 CSS CUSTOM PROPERTIES (DESIGN TOKENS)
 Cores,espaçamentos e efeitos centralizados aqui.
 Para temas futuros,basta sobrescrever estas variáveis.
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   O APP DECLARA O PRÓPRIO ESQUEMA DE COR — e isso não é decoração
   ═══════════════════════════════════════════════════════════════════════
   Sem esta linha, o "modo escuro automático" do navegador (Opera o traz
   ligado de fábrica; o Chrome tem o mesmo motor atrás de uma flag) assume
   que a página não sabe se virar no escuro e INVERTE as cores por conta
   própria. O resultado foi o relato de 03/09/2026: no tema CLARO, os
   painéis brancos da barra saíam pretos no Opera e brancos no Chrome — a
   mesma página, o mesmo CSS, dois desenhos.

   A inversão automática só se desliga quando a página declara que dá conta
   dos dois esquemas. É o que estas duas linhas fazem, e é por isso que o
   valor ACOMPANHA o tema em vez de ser fixo: `light dark` sozinho desligaria
   a inversão mas deixaria os controles nativos (scrollbar, seletor de data,
   preenchimento automático) seguindo o sistema, e não o botão que a pessoa
   apertou aqui dentro. O par claro mora em `theme-light.css`. */
:root{color-scheme:dark;}

:root{--clr-text: #f0f0f0;--clr-text-dim: rgba(240,240,240,.35);--clr-text-faint: rgba(240,240,240,.25);--clr-text-muted: rgba(240,240,240,.3);--clr-white: #fff;--clr-bg: #0a0a0a;--clr-bg-2: #111;--clr-bg-card: rgba(255,255,255,.03);--clr-border: rgba(255,255,255,.07);--clr-border-soft: rgba(255,255,255,.06);--clr-border-strong: rgba(255,255,255,.12);--clr-border-faint: rgba(255,255,255,.05);--clr-indigo: #6366f1;--clr-indigo-dark: #4f46e5;--clr-indigo-light: #a5b4fc;--clr-indigo-10: rgba(99,102,241,.1);--clr-indigo-20: rgba(99,102,241,.2);--clr-indigo-30: rgba(99,102,241,.3);--clr-indigo-40: rgba(99,102,241,.4);--clr-indigo-50: rgba(99,102,241,.5);--clr-overlay-50: rgba(0,0,0,.5);--clr-overlay-80: rgba(0,0,0,.8);--clr-success: #10b981;--clr-warning: #f59e0b;--clr-danger: #ef4444;--clr-danger-light: #fca5a5;--clr-teal: #14b8a6;--clr-teal-20: rgba(20,184,166,.2);--font-main: 'Inter',sans-serif;--font-mono: 'JetBrains Mono',monospace;--font-brand: 'Syne',sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--transition-fast: .15s ease;--transition-mid: .2s ease;--transition-slow: .3s ease;--z-note: 10;--z-toolbar: 100;--z-panel: 200;--z-modal: 300;--z-toast: 400;--z-lightbox: 500;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:'Inter',sans-serif;background:var(--clr-bg);color:var(--clr-text);overflow:hidden;display:flex;flex-direction:column}
body{opacity:0;transition:opacity .4s ease}body.page-ready{opacity:1}
@media(prefers-reduced-motion:reduce){body{transition:none;opacity:1}}
#crm-board{flex:1;overflow:auto;padding:20px;display:none;}
#crm-board.visible{display:block;}#auth-screen{position:fixed;inset:0;z-index:3000;display:flex;overflow:hidden;background:#0a0a0a;}.auth-left{width:42%;flex-shrink:0;background:#0d0d0d;border-right:1px solid var(--clr-border-soft);display:flex;flex-direction:column;justify-content:center;padding:200px 50px 40px;position:relative;overflow:hidden;}.auth-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 15% 25%,rgba(99,102,241,.14) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 85% 75%,rgba(20,184,166,.1) 0%,transparent 60%);}.auth-grid{position:absolute;inset:0;background-image:linear-gradient(var(--clr-bg-card) 1px,transparent 1px),linear-gradient(90deg,var(--clr-bg-card) 1px,transparent 1px);background-size:40px 40px;}.auth-shape{position:absolute;border-radius:14px;animation:shapeFloat 9s ease-in-out infinite alternate;}.sh1{width:70px;height:70px;background:rgba(99,102,241,.14);top:12%;right:10%;border:1px solid rgba(99,102,241,.22);}.sh2{width:42px;height:42px;background:rgba(20,184,166,.1);bottom:20%;right:16%;border:1px solid rgba(20,184,166,.2);animation-duration:6.5s;animation-delay:-3s;}.sh3{width:26px;height:26px;background:rgba(245,158,11,.1);top:52%;left:7%;border:1px solid rgba(245,158,11,.18);animation-duration:11s;animation-delay:-5s;}@keyframes shapeFloat{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(14px,18px) rotate(8deg)}}.auth-brand-wrap{position:relative;z-index:2;margin-bottom:40px;}.auth-brand-logo{font-family:'Syne',sans-serif;font-size:2.1rem;font-weight:800;letter-spacing:-2px;color:var(--clr-text);display:flex;align-items:center;gap:10px;margin-bottom:6px;}.logo-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-teal));box-shadow:0 0 12px var(--clr-indigo-50);}#pixel-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.18;image-rendering:pixelated;}.auth-brand-sub{font-size:.78rem;color:rgba(240,240,240,.3);letter-spacing:.4px;}.auth-features{position:relative;z-index:2;display:flex;flex-direction:column;gap:15px;}.auth-feat{display:flex;align-items:flex-start;gap:12px;}.feat-icon{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.82rem;}.fi1{background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.22);}.fi2{background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.2);}.fi3{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.18);}.fi4{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.18);}.feat-title{font-size:.8rem;font-weight:600;color:var(--clr-text);margin-bottom:2px;}.feat-desc{font-size:.72rem;color:rgba(240,240,240,.35);line-height:1.5;}.auth-right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 48px;gap:0;position:relative;overflow:hidden;}.auth-right::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.06) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}.auth-welcome{width:min(390px,100%);margin-bottom:28px;animation:welcomeIn .8s cubic-bezier(.16,1,.3,1) both;}@keyframes welcomeIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}.auth-welcome-eyebrow{display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:rgba(99,102,241,.8);margin-bottom:10px;animation:welcomeIn .8s cubic-bezier(.16,1,.3,1) .1s both;}.auth-welcome-eyebrow-line{flex:1;height:1px;background:linear-gradient(90deg,var(--clr-indigo-40),transparent);}.auth-welcome-heading{font-family:'Syne',sans-serif;font-size:2.2rem;font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:var(--clr-text);margin-bottom:10px;animation:welcomeIn .8s cubic-bezier(.16,1,.3,1) .18s both;}.auth-welcome-heading .hl{background:linear-gradient(135deg,#818cf8,var(--clr-indigo),var(--clr-indigo-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.auth-welcome-desc{font-size:.82rem;color:rgba(240,240,240,.38);line-height:1.6;animation:welcomeIn .8s cubic-bezier(.16,1,.3,1) .26s both;}.auth-cursor{display:inline-block;width:2px;height:1em;background:var(--clr-indigo);margin-left:2px;vertical-align:middle;animation:cursorBlink .9s steps(1) infinite;}@keyframes cursorBlink{0%,49%{opacity:1}50%,100%{opacity:0}}.auth-stats{display:flex;gap:20px;margin-top:14px;animation:welcomeIn .8s cubic-bezier(.16,1,.3,1) .34s both;}.auth-stat{display:flex;align-items:center;gap:6px;}.auth-stat-dot{width:6px;height:6px;border-radius:50%;}.auth-stat-txt{font-size:.72rem;color:rgba(240,240,240,.35);}.auth-card{width:min(390px,100%);background:rgba(16,16,18,.8);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:26px 28px;backdrop-filter:blur(12px);box-shadow:0 20px 60px var(--clr-overlay-50),0 0 0 1px rgba(255,255,255,.04);}.auth-card.anim{animation:cardRise .65s cubic-bezier(.16,1,.3,1) both;}@keyframes cardRise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-card-title{display:none;}.auth-card-sub{display:none;}.auth-tabs{display:flex;margin-bottom:20px;border-radius:10px;background:rgba(255,255,255,.04);padding:4px;border:1px solid var(--clr-border-soft);}.auth-tab{flex:1;padding:8px;text-align:center;font-size:.79rem;font-weight:500;border:none;background:none;color:rgba(240,240,240,.35);cursor:pointer;border-radius:7px;transition:all .2s;font-family:'Inter',sans-serif;}.auth-tab.active{background:rgba(255,255,255,.08);color:var(--clr-text);box-shadow:0 1px 4px rgba(0,0,0,.4);}.auth-form{animation:fadeUp .2s ease both;}@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.a-lbl{font-size:.66rem;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:rgba(240,240,240,.4);margin-bottom:7px;}.a-inp{width:100%;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:12px 14px;font-family:'Inter',sans-serif;font-size:.87rem;color:var(--clr-text);outline:none;transition:border-color .18s,box-shadow .18s;margin-bottom:14px;}.a-inp:focus{border-color:var(--clr-indigo-50);box-shadow:0 0 0 3px var(--clr-indigo-10);}.a-inp::placeholder{color:rgba(240,240,240,.18);}.a-row{display:flex;gap:10px;}.a-row>.a-grp{flex:1;}.a-grp{margin-bottom:14px;}.a-grp .a-inp{margin-bottom:0;}.a-hint{font-size:.7rem;color:rgba(240,240,240,.25);margin-bottom:20px;line-height:1.6;}.auth-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));border:none;border-radius:9px;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;color:#fff;cursor:pointer;transition:opacity .15s,transform .1s,box-shadow .2s;box-shadow:0 4px 18px rgba(99,102,241,.35);}.auth-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 24px rgba(99,102,241,.45);}.auth-btn:active{transform:translateY(0);opacity:.75;}.auth-switch{text-align:center;margin-top:16px;font-size:.76rem;color:rgba(240,240,240,.3);}.auth-switch a{color:#818cf8;cursor:pointer;font-weight:500;text-decoration:underline;text-underline-offset:3px;}.auth-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);border-radius:8px;padding:9px 13px;font-size:.77rem;color:rgba(252,165,165,.9);margin-bottom:14px;display:none;}.auth-error.show{display:block;}@media(max-width:640px){.auth-left{display:none;}.auth-right{padding:20px;}}#toolbar{height:80px;background:#0d0d0d;border-bottom:1px solid var(--clr-border);display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0;z-index:500;}.t-logo{display:flex;align-items:center;margin-right:4px;white-space:nowrap;}.t-logo img{height:39px;width:auto;display:block;}.t-sep{width:1px;height:22px;background:rgba(255,255,255,.08);flex-shrink:0;}.t-pill{display:flex;align-items:center;gap:6px;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:4px 12px 4px 8px;font-size:.74rem;color:rgba(240,240,240,.5);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;}.t-dot{width:5px;height:5px;border-radius:50%;background:var(--clr-indigo);box-shadow:0 0 5px rgba(99,102,241,.6);flex-shrink:0;}.t-btn{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:6px 11px;font-family:'Inter',sans-serif;font-size:.74rem;color:rgba(240,240,240,.5);cursor:pointer;white-space:nowrap;transition:all .18s;}.t-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);color:var(--clr-text);}.t-btn svg{width:13px;height:13px;flex-shrink:0;}.t-btn.primary{background:rgba(99,102,241,.15);border-color:var(--clr-indigo-30);color:var(--clr-indigo-light);font-weight:600;}.t-btn.primary:hover{background:rgba(99,102,241,.25);border-color:var(--clr-indigo-50);color:#c7d2fe;}.t-spacer{flex:1;}.t-count{font-family:'JetBrains Mono',monospace;font-size:.67rem;color:rgba(240,240,240,.22);}/* ── A MÃOZINHA ──────────────────────────────────────────────────────
   Ela mora AQUI, junto da regra base, e não lá embaixo: a primeira versão
   caiu dentro de `@media (max-width: 768px)` porque a âncora que escolhi era
   a sobrescrita mobile do `#board`, e não a regra de verdade. O resultado foi
   um cursor que só existia em tela estreita — o arrasto funcionava e nada na
   tela dizia que dava para arrastar.

   Não há regra de reset para os filhos: cada um já declara o cursor que lhe
   cabe, e `.note` usa `grab` porque o cartão TAMBÉM se arrasta. Um reset aqui
   teria apagado justamente isso. */
#board{cursor:grab;}
#board.arrastando{cursor:grabbing;}
#board{flex:1;position:relative;overflow:hidden;background:#0a0a0a;background-size:32px 32px;user-select:none;transition:background .4s;}#board-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none;transition:opacity .4s;opacity:1;}#board-dots{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0);background-size:32px 32px;pointer-events:none;transition:opacity .4s;}#empty-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:.14;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1;}.ei-box{width:50px;height:50px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto;}.ei-txt{font-size:.76rem;color:var(--clr-text);letter-spacing:.3px;font-weight:500;}/* ═══════════════════════════════════════════════════════════════════════
   O PAINEL DE FUNDO CABE NA TELA — E ROLA
   ═══════════════════════════════════════════════════════════════════════
   Ele é ancorado em `bottom:70px` e cresce PARA CIMA. Sem teto de altura e
   sem rolagem, numa tela mais baixa que o painel o topo simplesmente saía
   pela borda de cima — e como não havia `overflow`, não havia como chegar
   lá. As CORES SÓLIDAS são a primeira seção, então eram exatamente elas que
   sumiam: quem relatou disse "as cores sólidas não aparecem, ficam sumidas,
   não podendo rolar".

   O celular já tinha a correção (ver o `@media` mais abaixo), e foi isso que
   escondeu o defeito: em 1366x768 a janela não é celular, não entrava naquela
   regra, e ficava sem teto nenhum. Cada tema de pixel art novo empurrou o
   problema para telas um pouco maiores.

   `dvh` e não `vh`: com a barra do navegador móvel recolhendo, `vh` mede a
   tela cheia e o painel volta a passar do fim. Os 96px descontados são os
   70 de âncora mais um respiro em cima.

   O TÍTULO FICA GRUDADO no alto. Rolando uma lista de sete seções, a única
   coisa que diz o que é aquela janela sairia de vista no primeiro gesto.

   O TETO É A BARRA DE FERRAMENTAS, e não um número. A primeira versão desta
   correção descontava 96px fixos, e com isso o painel passou a SUBIR POR CIMA
   da barra em janela estreita — ali ela quebra em duas linhas, fica com 112px
   de altura, e o painel começava dentro dela. `--wp-teto` é escrito pelo JS
   com a altura medida da barra no momento de abrir; o 92 do `var()` é só a
   rede para o caso de o painel abrir antes de alguém medir. */
#wp-panel{position:fixed;bottom:70px;right:16px;z-index:900;background:#111;border:1px solid var(--clr-border-strong);border-radius:14px;padding:0 18px 18px;width:280px;box-shadow:0 16px 48px rgba(0,0,0,.7);animation:fadeUp .2s ease both;display:none;max-height:calc(100dvh - 70px - var(--wp-teto,92px));overflow-y:auto;overscroll-behavior:contain;}
/* A BARRA DE ROLAGEM PRECISA SER VISTA. O estilo global desta base deixa a
   barra com 4px, e 4px numa janela escura é indistinguível da borda — foi a
   mesma reclamação da planilha ("a barra para arrastar está meio sumida, as
   pessoas podem não enxergar"). Aqui ela é a única pista de que existe mais
   coisa acima, então tem largura de dedo e contraste de verdade. */
#wp-panel::-webkit-scrollbar{width:10px;}
#wp-panel::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:8px;margin:8px 0;}
#wp-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:8px;border:2px solid #111;min-height:40px;}
#wp-panel::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.36);}
#wp-panel{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) rgba(255,255,255,.04);}
.wp-title{position:sticky;top:0;z-index:3;background:#111;margin:0 -18px 10px;padding:16px 18px 11px;
  border-bottom:1px solid rgba(255,255,255,.06);}#wp-panel.open{display:block;}.wp-title{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--clr-text);margin-bottom:14px;}.wp-section{font-size:.62rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(240,240,240,.35);margin-bottom:8px;}.wp-pixels{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}.wp-pixel-swatch{width:56px;height:38px;border-radius:7px;cursor:pointer;border:1.5px solid rgba(255,255,255,.08);transition:all .15s;overflow:hidden;flex-shrink:0;position:relative;}.wp-pixel-swatch:hover{border-color:var(--clr-indigo-50);transform:scale(1.06);}.wp-pixel-swatch.active{border-color:var(--clr-indigo);box-shadow:0 0 0 2px rgba(99,102,241,.35);}.wp-pixel-swatch canvas{width:100%;height:100%;display:block;image-rendering:pixelated;}/* O rótulo mora EM CIMA da miniatura, e nomes de duas palavras ("Aurora
   boreal", "Deserto à noite") quebravam em duas linhas e cobriam metade da
   cena que deviam identificar. Uma linha só, com reticências, e um véu
   escuro por baixo — sem o véu, texto claro sobre a Sakura ou o Deserto ao
   amanhecer simplesmente não se lê. */
.wp-pixel-label{font-size:.46rem;color:rgba(255,255,255,.82);text-align:center;position:absolute;bottom:0;left:0;right:0;letter-spacing:.2px;line-height:1.5;padding:5px 3px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62) 42%,rgba(0,0,0,.82));text-shadow:0 1px 2px rgba(0,0,0,.9);}.wp-colors{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}.wp-swatch{width:28px;height:28px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s,box-shadow .15s;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.45);}.wp-swatch:hover{transform:scale(1.2);}.wp-swatch.active{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 2px rgba(255,255,255,.15);}.wp-gradients{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}/* O ANEL INTERNO ESCURO é o que dá borda às amostras claras. Sem ele, três
   gradientes que terminam em branco viram uma mancha só contra a outra e
   contra o painel — e a borda de fora não serve, porque ela é a marca de
   "selecionado" e ficaria disputando. Em amostra escura o anel some sozinho. */
.wp-grad{width:54px;height:32px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.45);}.wp-grad:hover{transform:scale(1.06);}.wp-grad.active{border-color:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),0 0 0 2px rgba(99,102,241,.35);}/* `display:block` NÃO É ENFEITE: isto é um <label>, e label é INLINE por
   padrão. Em elemento inline, `width:100%` não vale e o padding vertical não
   empurra a linha — então, quando o texto quebrava em duas linhas, a segunda
   caía FORA da borda tracejada. O defeito estava aqui desde sempre e só
   apareceu quando a barra de rolagem do painel comeu 10px da largura e a
   frase deixou de caber numa linha só. */
.wp-upload-btn{display:block;box-sizing:border-box;line-height:1.35;width:100%;padding:9px;background:var(--clr-border-soft);border:1px dashed rgba(255,255,255,.15);border-radius:8px;font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(240,240,240,.6);cursor:pointer;transition:all .15s;position:relative;text-align:center;}.wp-upload-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:var(--clr-text);}.wp-upload-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}.wp-reset{width:100%;padding:7px;background:none;border:1px solid var(--clr-border);border-radius:8px;font-family:'Inter',sans-serif;font-size:.77rem;color:rgba(240,240,240,.35);cursor:pointer;margin-top:8px;transition:all .15s;}.wp-reset:hover{border-color:rgba(255,255,255,.15);color:rgba(240,240,240,.7);}.sp-btn.ws{background:rgba(20,184,166,.12);color:#2dd4bf;border:1px solid rgba(20,184,166,.28);}.sp-btn.ws:hover{background:rgba(20,184,166,.24);}#ws-toolbar-btn{display:none;}
/* ═══ BARRA DE CONTEXTO DO GRUPO ═════════════════════════════════════════
   Irmã do #board, no fluxo: ocupa altura de verdade e o quadro encolhe. Ver
   _minNoteY() — o piso das notas soma esta altura. */
#grupo-barra{display:flex;align-items:center;gap:18px;flex-shrink:0;padding:11px 18px;background:linear-gradient(90deg,rgba(99,102,241,.13),rgba(20,184,166,.07) 55%,transparent);border-bottom:1px solid var(--clr-border);z-index:400;}
#grupo-barra[hidden]{display:none;}
.gb-esq{display:flex;align-items:center;gap:11px;min-width:0;}
.gb-foto{width:38px;height:38px;border-radius:11px;flex-shrink:0;overflow:hidden;position:relative;background:linear-gradient(135deg,#6366f1,#4f46e5);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.34);}
.gb-foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.gb-txt{min-width:0;}
.gb-nome{font-family:'Syne',sans-serif;font-size:.92rem;font-weight:700;color:var(--clr-text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}
.gb-sub{font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.38);margin-top:2px;white-space:nowrap;}
.gb-meio{display:flex;align-items:center;gap:9px;}
/* `margin-left:auto` e não uma coluna vazia: a barra é um flex, e é o auto que
   empurra este bloco para o canto direito sozinho, qualquer que seja o tamanho
   do nome do grupo. */
.gb-reunioes{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:6px 13px;border-radius:20px;cursor:pointer;font-family:'Inter',sans-serif;
  font-size:.74rem;font-weight:600;color:rgba(199,210,254,.9);
  background:rgba(99,102,241,.14);border:1px solid rgba(129,140,248,.32);
  transition:background .15s,border-color .15s,color .15s;}
.gb-reunioes:hover{background:rgba(99,102,241,.26);border-color:rgba(129,140,248,.55);color:#fff;}
.gb-reunioes svg{width:13px;height:13px;flex-shrink:0;opacity:.85;}
/* Em tela estreita fica só o ícone: o texto é o primeiro a sobrar quando o nome
   do grupo e os avatares disputam a mesma linha. */
@media(max-width:980px){.gb-reunioes-txt{display:none;}.gb-reunioes{padding:6px 9px;}}
.gb-avs{display:flex;}
.gb-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-family:'Inter',sans-serif;font-size:.64rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:-7px;box-shadow:0 0 0 2px #0d0d0d,0 0 0 3.5px var(--gc-ring,transparent);}
.gb-av img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block;}
.gb-av:first-child{margin-left:0;}
.gb-av-mais{background:rgba(255,255,255,.1);color:rgba(240,240,240,.55);font-size:.58rem;}
.gb-conta{font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.4);white-space:nowrap;}
.gb-chips{display:flex;gap:5px;flex:1;min-width:0;overflow:hidden;}
.gb-chip{display:inline-flex;align-items:center;gap:4px;font-family:'Inter',sans-serif;font-size:.63rem;font-weight:600;padding:3px 9px 3px 7px;border-radius:20px;background:rgba(16,185,129,.11);border:1px solid rgba(16,185,129,.26);color:#6ee7b7;white-space:nowrap;transition:all .18s;}
.gb-chip.off{background:rgba(255,255,255,.03);border-color:var(--clr-border);color:rgba(240,240,240,.24);}
.gb-chip.off>span:first-child{filter:grayscale(1);opacity:.5;}
.gb-dir{display:flex;gap:6px;margin-left:auto;flex-shrink:0;}
.gb-btn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:8px;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;background:var(--clr-border-faint);border:1px solid var(--clr-border);color:rgba(240,240,240,.65);transition:all .15s;}
.gb-btn:hover{background:rgba(255,255,255,.1);color:var(--clr-text);}
.gb-sair{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.24);color:#fca5a5;}
.gb-sair:hover{background:rgba(239,68,68,.22);color:#fff;}
@media(max-width:980px){#grupo-barra{gap:11px;padding:9px 12px;}.gb-chips{display:none;}.gb-nome{max-width:130px;}}
.ws-active-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(20,184,166,.18);border:1px solid rgba(20,184,166,.35);color:#2dd4bf;border-radius:20px;padding:3px 10px;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s;}.ws-active-badge:hover{background:rgba(20,184,166,.3);}.ws-invite-acts{display:flex;gap:5px;flex-shrink:0;}.ws-invite-accept,.ws-invite-reject{padding:4px 10px;border-radius:6px;font-family:'Inter',sans-serif;font-size:.71rem;font-weight:600;cursor:pointer;transition:all .15s;border:none;}.ws-invite-accept{background:rgba(99,102,241,.15);color:var(--clr-indigo-light);border:1px solid rgba(99,102,241,.25);}.ws-invite-accept:hover{background:rgba(99,102,241,.28);}.ws-invite-reject{background:none;color:rgba(240,240,240,.3);}.ws-invite-reject:hover{color:rgba(240,240,240,.7);}.shp-badge{background:rgba(20,184,166,.15);color:#2dd4bf;border:1px solid rgba(20,184,166,.25);}.note{position:absolute;width:240px;border-radius:14px;display:flex;flex-direction:column;pointer-events:all;will-change:left,top;border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 28px rgba(0,0,0,.55);transition:box-shadow .2s,border-color .2s,transform .15s;overflow:hidden;}.note:hover{box-shadow:0 14px 48px rgba(0,0,0,.75);transform:translateY(-2px);}.note.dragging{box-shadow:0 28px 70px rgba(0,0,0,.85)!important;transition:none!important;z-index:9999!important;cursor:grabbing!important;transform:scale(1.025) rotate(.3deg)!important;}.note.overdue{border-color:rgba(239,68,68,.5)!important;}.n-resize{position:absolute;bottom:0;right:0;width:18px;height:18px;cursor:se-resize;z-index:10;display:flex;align-items:flex-end;justify-content:flex-end;padding:3px;opacity:0;transition:opacity .2s;}.note:hover .n-resize{opacity:1;}.n-resize svg{width:9px;height:9px;color:rgba(255,255,255,.3);}.n-bar{height:3px;width:100%;flex-shrink:0;}.n-head{padding:0;cursor:grab;display:flex;flex-direction:column;}.n-head:active{cursor:grabbing;}.n-chip-row{display:flex;align-items:center;gap:5px;padding:11px 12px 8px;}.n-chip{display:inline-flex;align-items:center;gap:3px;border-radius:20px;padding:2px 8px 2px 5px;font-size:.57rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;}.n-chip-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}.n-del{width:20px;height:20px;border:none;background:none;cursor:pointer;border-radius:5px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2);transition:all .15s;flex-shrink:0;margin-left:auto;}.n-del:hover{background:rgba(239,68,68,.2);color:var(--clr-danger-light);}.n-del svg{width:10px;height:10px;}.n-pin-btn{width:20px;height:20px;border:none;background:none;cursor:pointer;border-radius:5px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2);transition:all .15s;flex-shrink:0;font-size:.7rem;}.n-pin-btn:hover{background:rgba(245,158,11,.15);color:#fcd34d;}.n-pin-btn.active{color:#fcd34d;background:rgba(245,158,11,.15);}.note.pinned .n-expand-area{max-height:none !important;overflow:visible !important;}.n-title-row{padding:4px 12px 9px;}.n-title{display:block;width:100%;background:transparent;border:none;outline:none;resize:none;font-family:'Inter',sans-serif;font-size:.92rem;font-weight:700;color:#fff;-webkit-text-fill-color:#fff;line-height:1.35;padding:0;cursor:text;overflow:hidden;min-height:20px;}.n-title::placeholder{color:rgba(255,255,255,.25);-webkit-text-fill-color:rgba(255,255,255,.25);}.n-body-inline{padding:2px 12px 14px;}.n-text{width:100%;background:none;border:none;outline:none;resize:none;font-family:'Inter',sans-serif;font-size:.77rem;color:rgba(255,255,255,.5);-webkit-text-fill-color:rgba(255,255,255,.5);line-height:1.68;padding:0;cursor:text;min-height:36px;}.n-text::placeholder{color:rgba(255,255,255,.18);-webkit-text-fill-color:rgba(255,255,255,.18);}.n-expand-area{max-height:none;overflow:visible;}.note:hover .n-expand-area,.note.expanded .n-expand-area{max-height:none;}.n-sep{height:1px;background:rgba(255,255,255,.08);margin:0;}.n-dates{padding:10px 12px;display:flex;flex-direction:column;gap:6px;}.n-dates-lbl{font-size:.56rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.2);margin-bottom:2px;}.n-date-row{display:flex;align-items:center;gap:6px;}.n-date-tag{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:rgba(255,255,255,.25);min-width:34px;}.n-dinput{flex:1;background:var(--clr-border-soft);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:4px 8px;font-family:'JetBrains Mono',monospace;font-size:.61rem;color:rgba(255,255,255,.65);-webkit-text-fill-color:rgba(255,255,255,.65);outline:none;transition:border-color .15s;color-scheme:dark;cursor:pointer;}.n-dinput:focus{border-color:var(--clr-indigo-50);background:rgba(99,102,241,.07);}.n-badge{margin:0 10px 8px;border-radius:7px;padding:6px 10px;display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:.61rem;font-weight:500;}.n-badge svg{width:10px;height:10px;flex-shrink:0;}.n-badge.info{background:rgba(99,102,241,.14);color:var(--clr-indigo-light);border:1px solid rgba(99,102,241,.24);}.n-badge.warn{background:rgba(245,158,11,.13);color:#fcd34d;border:1px solid rgba(245,158,11,.24);}.n-badge.urgent{background:rgba(239,68,68,.13);color:var(--clr-danger-light);border:1px solid rgba(239,68,68,.28);animation:urgPulse 1.8s ease-in-out infinite;}@keyframes urgPulse{0%,100%{opacity:.75}50%{opacity:1}}.n-status-pill{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:2px 7px 2px 5px;border:1px solid transparent;cursor:pointer;font-family:'Inter',sans-serif;font-size:.57rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;transition:all .2s;user-select:none;flex-shrink:0;}.n-status-pill:hover{filter:brightness(1.15);}.n-status-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;transition:all .3s;}.n-status-pill.s-todo{background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.22);color:#94a3b8;}.n-status-pill.s-todo .n-status-dot{background:#94a3b8;}.n-status-pill.s-progress{background:rgba(99,102,241,.14);border-color:var(--clr-indigo-30);color:var(--clr-indigo-light);}.n-status-pill.s-progress .n-status-dot{background:var(--clr-indigo);box-shadow:0 0 5px rgba(99,102,241,.8);animation:progressPulse 1.4s ease-in-out infinite;}.n-status-pill.s-done{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.28);color:#6ee7b7;}.n-status-pill.s-done .n-status-dot{background:var(--clr-success);}.n-status-pill.s-closed{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:var(--clr-danger-light);}.n-status-pill.s-closed .n-status-dot{background:var(--clr-danger);}@keyframes progressPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.5);opacity:1}}.n-status-menu{background:#1a1a1a;border:1px solid var(--clr-border-strong);border-radius:10px;padding:4px;box-shadow:0 8px 28px rgba(0,0,0,.6);min-width:130px;animation:menuPop .15s cubic-bezier(.16,1,.3,1) both;}@keyframes menuPop{from{opacity:0;transform:scale(.92) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.n-status-opt{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:7px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;color:rgba(240,240,240,.7);transition:background .15s;white-space:nowrap;}.n-status-opt:hover{background:var(--clr-border);color:var(--clr-text);}.n-status-opt.sel{color:var(--clr-text);font-weight:600;}.n-status-opt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}.note.status-done .n-title{opacity:.45;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25);}.note.status-done .n-text{opacity:.45;}.note.status-closed .n-title{opacity:.3;}.note.status-closed .n-body-inline,.note.status-closed .n-dates{opacity:.35;}@keyframes noteDone{0%{transform:scale(1);box-shadow:0 6px 30px var(--clr-overlay-50);}30%{transform:scale(1.04);box-shadow:0 0 0 4px rgba(16,185,129,.35),0 8px 32px rgba(16,185,129,.2);}60%{transform:scale(.98);}100%{transform:scale(1);box-shadow:0 6px 30px var(--clr-overlay-50);}}@keyframes noteClosed{0%{transform:scale(1);box-shadow:0 6px 30px var(--clr-overlay-50);}25%{transform:scale(1.03) rotate(-1deg);box-shadow:0 0 0 4px rgba(239,68,68,.3);}50%{transform:scale(.97) rotate(.5deg);}75%{transform:scale(1.01);}100%{transform:scale(1);box-shadow:0 6px 30px var(--clr-overlay-50);}}@keyframes noteProgress{0%{box-shadow:0 6px 30px var(--clr-overlay-50);}50%{box-shadow:0 0 0 3px var(--clr-indigo-40),0 8px 28px var(--clr-indigo-20);}100%{box-shadow:0 6px 30px var(--clr-overlay-50);}}.note.anim-done{animation:noteDone .55s cubic-bezier(.16,1,.3,1) both;}.note.anim-closed{animation:noteClosed .55s cubic-bezier(.16,1,.3,1) both;}.note.anim-progress{animation:noteProgress .55s cubic-bezier(.16,1,.3,1) both;}.note-burst{pointer-events:none;position:absolute;inset:0;overflow:visible;z-index:999;}.burst-particle{position:absolute;border-radius:50%;animation:burstOut .5s ease-out forwards;pointer-events:none;}@keyframes burstOut{0%{transform:translate(0,0) scale(1);opacity:1;}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0;}}.note.status-progress .n-bar{animation:barGlow 2s ease-in-out infinite alternate;}@keyframes barGlow{from{filter:brightness(1)}to{filter:brightness(1.5) drop-shadow(0 0 6px currentColor)}}.n-color-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 6px;border-radius:20px;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.5px;color:rgba(255,255,255,.5);background:var(--clr-border-soft);transition:all .15s;}.n-color-btn:hover{background:var(--clr-border-strong);color:rgba(255,255,255,.8);}.n-color-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}.n-color-pop{position:absolute;z-index:10001;background:#1a1a1a;border:1px solid var(--clr-border-strong);border-radius:12px;padding:10px;box-shadow:0 12px 36px rgba(0,0,0,.7);display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:172px;animation:menuPop .15s cubic-bezier(.16,1,.3,1) both;}.n-color-pop .swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s,box-shadow .15s;flex-shrink:0;}.n-color-pop .swatch:hover{transform:scale(1.3);}.n-color-pop .swatch.active{border-color:rgba(255,255,255,.75);box-shadow:0 0 0 2px rgba(255,255,255,.18);}.n-files{padding:0 10px 10px;display:flex;flex-direction:column;gap:4px;}.f-item{background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:5px 8px;display:flex;align-items:center;gap:6px;font-size:.71rem;color:rgba(255,255,255,.65);}.f-item svg{width:10px;height:10px;opacity:.4;flex-shrink:0;}.f-link{text-decoration:none;color:inherit;display:flex;align-items:center;gap:4px;flex:1;overflow:hidden;}.f-link:hover .f-name{color:#fff;}.f-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.71rem;}.f-sz{font-size:.59rem;opacity:.35;flex-shrink:0;font-family:'JetBrains Mono',monospace;}.f-del{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.22);font-size:.8rem;padding:0 2px;transition:color .15s;flex-shrink:0;}.f-del:hover{color:rgba(239,68,68,.8);}.f-drop{border:1px dashed rgba(255,255,255,.1);border-radius:7px;padding:6px 10px;font-size:.69rem;color:rgba(255,255,255,.28);text-align:center;cursor:pointer;position:relative;transition:all .15s;}.f-drop:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.6);}.f-drop.drag-on{background:rgba(99,102,241,.08);border-color:var(--clr-indigo-40);}.f-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}.note.has-viewer{border-radius:14px 0 0 14px;border-right-color:transparent !important;z-index:200 !important;}.f-viewer{position:fixed;width:420px;border-radius:0 14px 14px 0;background:#0e0e0e;border:1px solid rgba(255,255,255,.13);border-left:none;display:flex;flex-direction:column;box-shadow:8px 6px 40px rgba(0,0,0,.7);z-index:199;overflow:hidden;animation:viewerSlide .22s cubic-bezier(.16,1,.3,1) both;}@keyframes viewerSlide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}.fv-header{display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--clr-border);flex-shrink:0;flex-wrap:wrap;}.fv-zoom-bar{display:flex;align-items:center;gap:4px;width:100%;padding-top:7px;border-top:1px solid var(--clr-border-soft);}.fv-zoom-btn{width:24px;height:24px;border:1px solid rgba(255,255,255,.1);background:var(--clr-border-faint);border-radius:5px;color:rgba(240,240,240,.7);font-size:.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;font-family:'Inter',sans-serif;font-weight:600;}.fv-zoom-btn:hover{background:var(--clr-border-strong);border-color:rgba(255,255,255,.2);color:#fff;}.fv-zoom-val{min-width:42px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:rgba(240,240,240,.55);}.fv-zoom-reset{font-size:.65rem;color:rgba(240,240,240,.35);cursor:pointer;padding:2px 6px;border-radius:4px;background:none;border:none;transition:color .15s;font-family:'Inter',sans-serif;}.fv-zoom-reset:hover{color:rgba(240,240,240,.8);}.fv-zoom-spacer{flex:1;}.fv-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.77rem;font-weight:500;color:rgba(240,240,240,.8);}.fv-type{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:rgba(240,240,240,.3);background:var(--clr-border-soft);border-radius:4px;padding:2px 6px;flex-shrink:0;}.fv-close{width:22px;height:22px;border:none;background:none;cursor:pointer;border-radius:5px;display:flex;align-items:center;justify-content:center;color:rgba(240,240,240,.3);transition:all .15s;flex-shrink:0;}.fv-close:hover{background:rgba(239,68,68,.15);color:rgba(252,165,165,.9);}.fv-close svg{width:11px;height:11px;}.fv-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px;position:relative;}.fv-body img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 4px 20px var(--clr-overlay-50);}.fv-body canvas{display:block;width:100%;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.4);}.fv-text{width:100%;height:100%;background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:8px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:rgba(240,240,240,.75);line-height:1.7;overflow:auto;white-space:pre-wrap;word-break:break-all;}.fv-unsupported{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(240,240,240,.35);}.fv-unsupported .fv-big-icon{font-size:2.5rem;}.fv-unsupported p{font-size:.8rem;line-height:1.5;}.fv-dl-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,.15);border:1px solid var(--clr-indigo-30);color:var(--clr-indigo-light);border-radius:8px;padding:8px 16px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:500;text-decoration:none;transition:all .15s;cursor:pointer;margin-top:4px;}.fv-dl-btn:hover{background:rgba(99,102,241,.25);border-color:var(--clr-indigo-50);}.f-item.viewing{background:rgba(99,102,241,.15) !important;border-color:rgba(99,102,241,.35) !important;}.f-eye{background:none;border:none;cursor:pointer;color:rgba(240,240,240,.3);font-size:.75rem;padding:0 2px;transition:color .15s;flex-shrink:0;display:flex;align-items:center;}.f-eye:hover{color:var(--clr-indigo-light);}.f-eye svg{width:11px;height:11px;}.modal-bg{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .18s both;}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal{background:#111;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px 30px;width:min(510px,93vw);box-shadow:0 32px 80px rgba(0,0,0,.9);animation:cardRise .24s cubic-bezier(.16,1,.3,1) both;max-height:90dvh;overflow-y:auto;}.m-h1{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:700;color:var(--clr-text);letter-spacing:-.3px;margin-bottom:3px;}.m-sub{font-size:.73rem;color:rgba(240,240,240,.3);margin-bottom:20px;}.m-lbl{font-size:.65rem;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:rgba(240,240,240,.38);margin-bottom:7px;}.m-inp{width:100%;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:10px 13px;font-family:'Inter',sans-serif;font-size:.85rem;color:var(--clr-text);outline:none;transition:border-color .18s,box-shadow .18s;resize:vertical;margin-bottom:16px;}.m-inp:focus{border-color:rgba(99,102,241,.45);box-shadow:0 0 0 3px rgba(99,102,241,.08);}.m-inp::placeholder{color:rgba(240,240,240,.18);}.m-div{height:1px;background:var(--clr-border);margin:4px 0 16px;}.m-sec{font-size:.62rem;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:rgba(240,240,240,.35);margin-bottom:10px;}.m-dates{display:flex;gap:10px;margin-bottom:14px;}.m-dw{flex:1;}.m-dlbl{font-size:.62rem;font-weight:500;color:rgba(240,240,240,.3);margin-bottom:5px;}.m-dinp{width:100%;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:9px 11px;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--clr-text);outline:none;transition:border-color .18s;color-scheme:dark;}.m-dinp:focus{border-color:rgba(99,102,241,.45);}.m-rem-box{background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:9px;padding:12px 14px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px;}.m-rem-row{display:flex;align-items:center;gap:10px;}.m-toggle{position:relative;width:36px;height:20px;flex-shrink:0;}.m-toggle input{opacity:0;width:0;height:0;position:absolute;}.m-slider{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:20px;cursor:pointer;transition:background .2s;}.m-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;opacity:.5;}.m-toggle input:checked+.m-slider{background:var(--clr-indigo);}.m-toggle input:checked+.m-slider::before{transform:translateX(16px);opacity:1;}.m-rem-lbl{font-size:.81rem;color:rgba(240,240,240,.5);cursor:pointer;flex:1;}.m-rem-sub{display:flex;align-items:center;gap:8px;padding-left:46px;}.m-rem-days{width:60px;background:var(--clr-border-soft);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:5px 8px;font-family:'JetBrains Mono',monospace;font-size:.79rem;color:var(--clr-text);outline:none;text-align:center;transition:border-color .18s;}.m-rem-days:focus{border-color:rgba(99,102,241,.45);}.m-rem-unit{font-size:.74rem;color:rgba(240,240,240,.3);}.m-crow{display:none;}.m-sw{display:none;}.m-color-row{display:flex;align-items:center;gap:10px;margin-bottom:22px;}.m-color-preview{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.2);flex-shrink:0;cursor:pointer;transition:transform .15s;}.m-color-preview:hover{transform:scale(1.1);}.m-color-grid{display:flex;flex-wrap:wrap;gap:6px;flex:1;}.m-color-grid .m-sw{display:flex;width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s,box-shadow .15s;}.m-color-grid .m-sw:hover{transform:scale(1.25);}.m-color-grid .m-sw.sel{border-color:rgba(255,255,255,.65);box-shadow:0 0 0 2px rgba(255,255,255,.15);}.m-btns{display:flex;gap:10px;}.m-btns button{flex:1;padding:11px;border-radius:8px;border:none;font-family:'Inter',sans-serif;font-size:.85rem;cursor:pointer;font-weight:500;transition:all .15s;}.m-cancel{background:var(--clr-border-faint);color:rgba(240,240,240,.5);}.m-cancel:hover{background:rgba(255,255,255,.09);}.m-confirm{background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));color:#fff;font-weight:600;box-shadow:0 3px 12px var(--clr-indigo-30);}.m-confirm:hover{opacity:.9;box-shadow:0 5px 16px rgba(99,102,241,.45);}#fb-setup-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(90deg,#92400e,#78350f);border-bottom:1px solid rgba(251,191,36,.3);padding:10px 20px;display:none;align-items:center;justify-content:center;gap:12px;font-family:'Inter',sans-serif;font-size:.8rem;color:#fde68a;}#fb-setup-banner.show{display:flex;}#fb-setup-banner a{color:#fcd34d;font-weight:600;text-decoration:underline;cursor:pointer;}#fb-setup-banner strong{color:#fff;}/* ═══════════════════════════════════════════════════════════════════════
   O AVISO DE MENSAGEM RECEBIDA
   ═══════════════════════════════════════════════════════════════════════
   Era uma tira cinza que deslizava da direita e sumia cinco segundos depois.
   Funcionava, e não dizia nada além do texto: não havia como saber quanto
   tempo restava, nada marcava a CHEGADA (o momento em que a pessoa precisa
   levantar o olho), e parar o ponteiro em cima não adiantava — o relógio
   corria igual e a mensagem sumia no meio da leitura.

   O vocabulário aqui é o mesmo do guia rápido, de propósito: são as duas
   telas do produto que interrompem alguém, e interromper duas vezes com dois
   sotaques diferentes faz o app parecer montado por dois times.

     · O FIO DE TEMPO, no rodapé, drenando. É a peça do guia que responde
       "quanto falta", aplicada ao que aqui era invisível: o temporizador de
       cinco segundos existia e ninguém o via.
     · A ONDA sai do avatar, uma vez. No guia ela anuncia que a explicação
       mudou de lugar; aqui, que alguém falou com você. Contínua, viraria
       ruído de fundo em dois avisos — quem avisa tem de ser evento.
     · A CHEGADA é a mesma do balão: desfocado, girado, e assenta. Blur é
       caro, então vive só nos 460ms da entrada.
     · O LUSTRO cruza o cartão uma vez, e é o que lhe dá superfície.
     · O CONTEÚDO ENTRA EM CASCATA — nome, texto, hora —, na ordem em que se
       lê, 40ms entre as linhas.

   E PARAR O PONTEIRO EM CIMA CONGELA O FIO. Cinco segundos é pouco para ler
   um recado e decidir; com a pausa, o aviso espera o tempo que for. É a
   correção de comportamento que o desenho novo torna óbvia: o fio parado é
   o que diz que a espera parou.
   ═══════════════════════════════════════════════════════════════════════ */
#chat-notif-stack{position:fixed;bottom:24px;right:24px;z-index:6000;display:flex;
  flex-direction:column-reverse;gap:10px;pointer-events:none;max-width:340px;}

.chat-notif{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:12px 15px 13px;border-radius:14px;overflow:hidden;
  pointer-events:all;cursor:pointer;
  /* Vidro com brilho roxo por baixo e um fio de luz no topo — as três
     camadas do balão do guia. Cinza chapado lê como caixa de sistema. */
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(99,102,241,.17), transparent 58%),
    linear-gradient(168deg, rgba(32,26,52,.97), rgba(17,15,26,.98));
  border:1px solid rgba(129,140,248,.22);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 22px 48px -12px rgba(0,0,0,.8),
    0 0 46px -20px rgba(99,102,241,.65),
    inset 0 1px 0 rgba(255,255,255,.07);
  animation:notifChega .46s cubic-bezier(.16,1,.3,1) both;
  transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .16s,border-color .16s;
}
@keyframes notifChega{
  0%  {opacity:0;filter:blur(7px);transform:translateX(46px) scale(.9) rotate(1.4deg);}
  62% {opacity:1;filter:blur(0);}
  100%{opacity:1;filter:blur(0);transform:none;}
}
.chat-notif:hover{
  transform:translateX(-3px);
  border-color:rgba(129,140,248,.42);
  box-shadow:
    0 26px 56px -12px rgba(0,0,0,.85),
    0 0 60px -18px rgba(99,102,241,.85),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.chat-notif:active{transform:translateX(-1px) scale(.985);}

/* O lustro: uma vez, na chegada. É o que dá superfície ao vidro — sem ele,
   "vidro" é só uma cor translúcida. */
.chat-notif::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:52%;
  pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  animation:notifLustro .78s cubic-bezier(.4,0,.25,1) .14s both;
}
@keyframes notifLustro{
  0%  {transform:translateX(-180%);}
  100%{transform:translateX(340%);}
}

.chat-notif.hiding{
  animation:notifSai .24s ease-in both;
  pointer-events:none;
}
@keyframes notifSai{
  from{opacity:1;transform:none;}
  to  {opacity:0;transform:translateX(28px) scale(.95);}
}

/* ── O AVATAR E A ONDA ──────────────────────────────────────────────────
   A onda é IRMÃ do avatar, e não filha: ela escala até 2,2x, e escalar um
   elemento que tem a foto dentro levaria a foto junto. */
.chat-notif-avatar{
  position:relative;z-index:2;width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#8b5cf6,#5b4bd6);
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:700;color:#fff;font-family:'Inter',sans-serif;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px -6px rgba(99,102,241,.9);
}
.chat-notif-onda{
  position:absolute;left:15px;top:50%;margin-top:-20px;
  width:40px;height:40px;border-radius:50%;pointer-events:none;z-index:1;
  border:2px solid rgba(139,92,246,.85);
  animation:notifOnda .92s cubic-bezier(.16,1,.3,1) .1s 1 both;
}
@keyframes notifOnda{
  0%  {opacity:.9;transform:scale(1);}
  100%{opacity:0;transform:scale(2.2);}
}
.chat-notif-online{
  position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;
  background:var(--clr-success);border:2px solid #1a1729;z-index:3;
}

/* ── O CONTEÚDO, EM CASCATA ─────────────────────────────────────────────
   Na ordem em que se lê. 40ms é tempo suficiente para o olho perceber ordem
   e curto demais para virar espera. */
.chat-notif-body{flex:1;min-width:0;position:relative;z-index:2;}
.chat-notif-body > *,.chat-notif-time{
  animation:notifLinha .4s cubic-bezier(.16,1,.3,1) both;
}
.chat-notif-name{animation-delay:.08s;}
.chat-notif-text{animation-delay:.13s;}
.chat-notif-time{animation-delay:.18s;}
@keyframes notifLinha{
  from{opacity:0;transform:translate3d(12px,0,0);}
  to  {opacity:1;transform:none;}
}

.chat-notif-name{
  font-size:.79rem;font-weight:650;color:#fbfaff;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-notif-arroba{color:rgba(196,181,253,.45);font-weight:400;}
.chat-notif-text{
  font-size:.75rem;color:rgba(236,233,248,.62);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-notif-time{
  position:relative;z-index:2;flex-shrink:0;align-self:flex-start;margin-top:1px;
  font-size:.61rem;color:rgba(196,181,253,.4);font-family:'JetBrains Mono',monospace;
}

.chat-notif-close{
  position:relative;z-index:4;background:none;border:0;cursor:pointer;
  width:22px;height:22px;padding:0;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(236,233,248,.26);font-size:.78rem;line-height:1;
  pointer-events:all;transition:background .16s,color .16s;
}
.chat-notif-close:hover{background:rgba(255,255,255,.09);color:#fff;}

/* ── O FIO DE TEMPO ─────────────────────────────────────────────────────
   Drena da largura cheia até zero, no mesmo tempo do temporizador que fecha
   o aviso. A duração vem de `--notif-vida`, escrita pelo JS a partir da
   MESMA constante que agenda o fechamento: dois números escritos à mão
   dessincronizariam no dia em que alguém mexesse num só, e o fio mentiria.

   `animation-play-state` é o que a pausa do ponteiro alterna. Parar o fio e
   parar o relógio são a mesma coisa vista de dois lados — e o fio parado é o
   que TORNA VISÍVEL que a espera parou. */
.chat-notif-fio{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;
  background:rgba(255,255,255,.06);
}
.chat-notif-fio i{
  display:block;height:100%;width:100%;transform-origin:left center;
  background:linear-gradient(90deg,#6366f1,#a855f7);
  box-shadow:0 0 10px rgba(168,85,247,.7);
  animation:notifDrena var(--notif-vida,5000ms) linear both;
}
@keyframes notifDrena{
  from{transform:scaleX(1);}
  to  {transform:scaleX(0);}
}
.chat-notif.pausado .chat-notif-fio i{animation-play-state:paused;}
/* Um pulso curto no fio quando a pausa começa: sem ele, parar o ponteiro em
   cima não produz resposta nenhuma e a pausa passa despercebida. */
.chat-notif.pausado .chat-notif-fio{background:rgba(168,85,247,.2);}

/* ── EMPILHADOS ─────────────────────────────────────────────────────────
   Três avisos seguidos são três cartões idênticos, e o olho não distingue
   qual chegou por último. Os de trás recuam e desbotam — a pilha ganha
   profundidade e o mais novo fica na frente, que é onde ele deve estar. */
.chat-notif:nth-child(n+4){opacity:.55;transform:scale(.96);}
.chat-notif:nth-child(n+6){display:none;}

/* Quem pediu menos movimento ao sistema pediu por um motivo. Some tudo: a
   chegada, a onda, o lustro e a cascata. O FIO CONTINUA — ele não é enfeite,
   é a única coisa que informa quanto tempo resta —, mas sem o brilho. */
@media (prefers-reduced-motion:reduce){
  .chat-notif,.chat-notif::after,.chat-notif-onda,
  .chat-notif-body > *,.chat-notif-time{
    animation:none !important;transition:none !important;}
  .chat-notif{opacity:1;transform:none;filter:none;}
  .chat-notif-body > *,.chat-notif-time{opacity:1;transform:none;}
  .chat-notif-onda{display:none;}
  .chat-notif-fio i{animation:notifDrena var(--notif-vida,5000ms) linear both !important;
    box-shadow:none;}
}
/* ════════════════════════════════════════
 SOCIAL — Friends & Chat
════════════════════════════════════════ */
#btn-social{position:relative;}.t-notif-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--clr-danger);border:2px solid #0d0d0d;font-size:.58rem;font-weight:700;color:#fff;display:none;align-items:center;justify-content:center;font-family:'Inter',sans-serif;}.t-notif-badge.show{display:flex;}#social-panel{position:fixed;top:62px;right:16px;z-index:1400;width:320px;max-height:calc(100dvh - 80px);background:#111;border:1px solid rgba(255,255,255,.11);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.75);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(-10px) scale(.97);pointer-events:none;transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1);}#social-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all;}.sp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--clr-border);flex-shrink:0;}.sp-title{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--clr-text);}.sp-tabs{display:flex;gap:4px;}.sp-tab{padding:5px 12px;border-radius:7px;border:none;background:none;font-family:'Inter',sans-serif;font-size:.74rem;font-weight:500;color:rgba(240,240,240,.4);cursor:pointer;transition:all .18s;}.sp-tab.active{background:rgba(99,102,241,.15);color:var(--clr-indigo-light);border:1px solid rgba(99,102,241,.28);}.sp-tab:not(.active):hover{background:var(--clr-border-soft);color:rgba(240,240,240,.75);}.sp-body{flex:1;overflow-y:auto;padding:10px;}.sp-add-row{display:flex;gap:6px;margin-bottom:12px;}.sp-add-inp{flex:1;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:8px 11px;font-family:'Inter',sans-serif;font-size:.8rem;color:var(--clr-text);outline:none;transition:border-color .18s;}.sp-add-inp:focus{border-color:rgba(99,102,241,.45);}.sp-add-inp::placeholder{color:rgba(240,240,240,.2);}.sp-add-btn{padding:8px 13px;background:rgba(99,102,241,.18);border:1px solid var(--clr-indigo-30);border-radius:8px;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;color:var(--clr-indigo-light);cursor:pointer;white-space:nowrap;transition:all .15s;}.sp-add-btn:hover{background:var(--clr-indigo-30);border-color:var(--clr-indigo-50);}/* O painel cresceu junto com o cartao do grupo: em 360px os chips de painel
   quebravam em tres linhas e os avatares nao cabiam ao lado da contagem. */
#social-panel{width:min(430px,calc(100vw - 32px))!important;}.profile-photo-wrap{display:flex;align-items:center;gap:14px;padding:14px 14px 12px;border-bottom:1px solid var(--clr-border-soft);margin-bottom:2px;}.profile-avatar-big{width:48px;height:48px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;color:#fff;font-family:'Inter',sans-serif;position:relative;overflow:hidden;cursor:pointer;border:2px solid rgba(99,102,241,.25);transition:border-color .2s;}.profile-avatar-big:hover{border-color:rgba(99,102,241,.6);}.profile-avatar-big img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}.profile-avatar-big .avatar-edit-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;border-radius:50%;font-size:.58rem;color:#fff;font-family:'Inter',sans-serif;font-weight:600;}.profile-avatar-big:hover .avatar-edit-overlay{opacity:1;}.profile-avatar-big input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}.profile-info-wrap{flex:1;min-width:0;}.profile-name-label{font-size:.85rem;font-weight:600;color:var(--clr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.profile-role-label{font-size:.7rem;color:rgba(240,240,240,.35);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.profile-status-wrap{margin-top:6px;}.sp-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;margin-bottom:2px;transition:background .15s;cursor:default;position:relative;border:1px solid transparent;}.sp-row:hover{background:rgba(255,255,255,.04);border-color:var(--clr-border-soft);}.sp-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:700;color:#fff;position:relative;font-family:'Inter',sans-serif;overflow:hidden;}.sp-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:absolute;inset:0;}.sp-info{flex:1;min-width:0;}.sp-name{font-size:.82rem;font-weight:600;color:var(--clr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.sp-meta{font-size:.68rem;color:rgba(240,240,240,.32);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.sp-actions{display:flex;gap:4px;flex-shrink:0;opacity:0;transition:opacity .15s;}.sp-row:hover .sp-actions{opacity:1;}.sp-btn{width:28px;height:28px;border-radius:7px;border:none;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:.78rem;cursor:pointer;transition:all .15s;flex-shrink:0;background:var(--clr-border-faint);color:rgba(240,240,240,.5);}.sp-btn:hover{background:rgba(255,255,255,.1);color:var(--clr-text);}.sp-btn.accept{background:rgba(16,185,129,.15);color:#6ee7b7;border:1px solid rgba(16,185,129,.2);}.sp-btn.accept:hover{background:rgba(16,185,129,.28);}.sp-btn.reject{background:rgba(239,68,68,.1);color:var(--clr-danger-light);border:1px solid rgba(239,68,68,.15);}.sp-btn.reject:hover{background:rgba(239,68,68,.22);}.sp-btn.chat{background:rgba(99,102,241,.12);color:var(--clr-indigo-light);}.sp-btn.chat:hover{background:rgba(99,102,241,.28);}.sp-btn.ws{background:rgba(20,184,166,.1);color:#2dd4bf;}.sp-btn.ws:hover{background:rgba(20,184,166,.24);}.sp-btn.invite{background:rgba(245,158,11,.1);color:#fcd34d;}.sp-btn.invite:hover{background:rgba(245,158,11,.22);}.sp-btn.remove:hover{background:rgba(239,68,68,.1);color:var(--clr-danger-light);}.sp-online-dot{position:absolute;bottom:1px;right:1px;width:9px;height:9px;border-radius:50%;border:2px solid #111;}.sp-online-dot.online{background:var(--clr-success);box-shadow:0 0 5px rgba(16,185,129,.6);}.sp-online-dot.offline{background:#374151;}.sp-online-dot.busy{background:var(--clr-danger);box-shadow:0 0 5px rgba(239,68,68,.5);}.sp-online-dot.working{background:var(--clr-warning);box-shadow:0 0 5px rgba(245,158,11,.5);}#my-status-btn{display:flex;align-items:center;gap:6px;background:none;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:4px 10px 4px 7px;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:500;color:rgba(240,240,240,.65);cursor:pointer;transition:all .15s;white-space:nowrap;}#my-status-btn:hover{background:var(--clr-border-soft);border-color:rgba(255,255,255,.2);}#my-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--clr-success);transition:background .2s;box-shadow:0 0 5px rgba(16,185,129,.6);}.status-menu-pop{position:fixed;z-index:2000;background:#111;border:1px solid var(--clr-border-strong);border-radius:12px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.7);min-width:170px;}.status-menu-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:500;color:rgba(240,240,240,.75);transition:background .12s;}.status-menu-opt:hover{background:var(--clr-border);}.status-menu-opt.active{background:var(--clr-border-faint);color:var(--clr-text);}.status-menu-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}.status-menu-nota{margin:4px 4px 1px;padding:7px 8px 2px;border-top:1px solid var(--clr-border-faint);font-family:'Inter',sans-serif;font-size:.63rem;line-height:1.45;color:rgba(240,240,240,.32);}.sp-info{flex:1;min-width:0;}.sp-name{font-size:.82rem;font-weight:600;color:var(--clr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.sp-meta{font-size:.7rem;color:rgba(240,240,240,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.sp-actions{display:flex;gap:5px;flex-shrink:0;}.sp-btn{padding:4px 10px;border-radius:6px;border:none;font-family:'Inter',sans-serif;font-size:.71rem;font-weight:600;cursor:pointer;transition:all .15s;}.sp-btn.accept{background:rgba(16,185,129,.15);color:#6ee7b7;border:1px solid rgba(16,185,129,.25);}.sp-btn.accept:hover{background:rgba(16,185,129,.28);}.sp-btn.reject{background:rgba(239,68,68,.1);color:var(--clr-danger-light);border:1px solid rgba(239,68,68,.2);}.sp-btn.reject:hover{background:rgba(239,68,68,.22);}.sp-btn.chat{background:rgba(99,102,241,.15);color:var(--clr-indigo-light);border:1px solid rgba(99,102,241,.25);}.sp-btn.chat:hover{background:rgba(99,102,241,.28);}.sp-btn.remove{background:rgba(255,255,255,.04);color:rgba(240,240,240,.35);border:1px solid rgba(255,255,255,.08);}.sp-btn.remove:hover{background:rgba(239,68,68,.1);color:var(--clr-danger-light);border-color:rgba(239,68,68,.2);}.sp-empty{text-align:center;padding:24px 0;font-size:.76rem;color:rgba(240,240,240,.25);}.sp-section-lbl{font-size:.6rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(240,240,240,.2);margin:10px 2px 5px;padding:0 2px;}.sp-divider{height:1px;background:var(--clr-border-faint);margin:6px 0;}.chat-win{opacity:0;transform:translateY(12px);transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1);}.chat-win.visible{opacity:1;transform:translateY(0);}.sp-row{opacity:0;transform:translateY(8px);animation:rowIn .22s cubic-bezier(.16,1,.3,1) forwards;}@keyframes rowIn{to{opacity:1;transform:translateY(0);}}.sp-row:nth-child(1){animation-delay:.02s;}.sp-row:nth-child(2){animation-delay:.04s;}.sp-row:nth-child(3){animation-delay:.06s;}.sp-row:nth-child(4){animation-delay:.08s;}.sp-row:nth-child(5){animation-delay:.10s;}.sp-row:nth-child(6){animation-delay:.12s;}.chat-msg{opacity:0;transform:translateY(6px);animation:msgIn .18s cubic-bezier(.16,1,.3,1) forwards;}@keyframes msgIn{to{opacity:1;transform:translateY(0);}}.sp-group-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--clr-bg-card);border:1px solid var(--clr-border);cursor:pointer;transition:all .15s;margin-bottom:6px;}
/* ═══ CARTÃO DO GRUPO ═══════════════════════════════════════════════════
   Era uma linha de 34px com emoji e três botões sem rótulo. O cartão mostra
   quem está dentro, quem manda e quais painéis estão abertos para mim —
   antes de eu entrar. */
.gc-card{display:block;padding:0;overflow:hidden;margin-bottom:10px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--clr-border);transition:border-color .18s,box-shadow .18s,transform .18s;}
.gc-card:hover{border-color:rgba(99,102,241,.34);box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateY(-1px);}
.gc-topo{display:flex;align-items:center;gap:11px;padding:13px 13px 9px;}
.gc-foto{width:46px!important;height:46px!important;border-radius:13px!important;position:relative;overflow:hidden;flex-shrink:0;box-shadow:0 4px 14px rgba(79,70,229,.3);}
.gc-foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.gc-foto-letra{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700;color:#fff;}
.gc-foto-troca{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;font-size:.9rem;}
.gc-foto:hover .gc-foto-troca{opacity:1;}
.gc-foto .group-photo-inp{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.gc-info{flex:1;min-width:0;}
.gc-nome{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--clr-text);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gc-papel{margin-top:3px;}
.gc-selo-lider{font-size:.6rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fcd34d;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.3);border-radius:20px;padding:2px 8px;}
.gc-selo-membro{font-size:.66rem;color:rgba(240,240,240,.34);}
.gc-menu{width:28px;height:28px;flex-shrink:0;border:none;background:none;color:rgba(240,240,240,.3);font-size:1.05rem;line-height:1;border-radius:8px;cursor:pointer;transition:background .15s,color .15s;}
.gc-menu:hover{background:rgba(255,255,255,.08);color:var(--clr-text);}
.gc-gente{display:flex;align-items:center;gap:9px;padding:0 13px 10px;}
.gc-avs{display:flex;}
.gc-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:-7px;box-shadow:0 0 0 2px #111,0 0 0 3.5px var(--gc-ring,transparent);position:relative;}
.gc-av img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block;}
.gc-av:first-child{margin-left:0;}
.gc-av-mais{background:rgba(255,255,255,.1);color:rgba(240,240,240,.55);font-size:.58rem;}
.gc-conta{font-family:'Inter',sans-serif;font-size:.7rem;color:rgba(240,240,240,.38);}
.gc-online{color:#6ee7b7;font-weight:600;}
.gc-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 13px 11px;}
.gc-chip{display:inline-flex;align-items:center;gap:4px;font-family:'Inter',sans-serif;font-size:.63rem;font-weight:600;padding:3px 9px 3px 7px;border-radius:20px;background:rgba(16,185,129,.11);border:1px solid rgba(16,185,129,.26);color:#6ee7b7;white-space:nowrap;transition:all .15s;}
.gc-chip.off{background:rgba(255,255,255,.03);border-color:var(--clr-border);color:rgba(240,240,240,.26);}
.gc-chip-ico{font-size:.66rem;line-height:1;}
.gc-acoes{display:flex;gap:7px;padding:0 13px 13px;}
.gc-btn,.gc-btn-forte{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:9px;font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .15s;width:auto!important;}
.gc-btn-forte{background:rgba(99,102,241,.17);border:1px solid rgba(99,102,241,.34);color:#c7d2fe;}
.gc-btn-forte:hover{background:rgba(99,102,241,.3);color:#fff;}
.gc-btn{background:var(--clr-border-faint);border:1px solid var(--clr-border);color:rgba(240,240,240,.6);}
.gc-btn:hover{background:rgba(255,255,255,.09);color:var(--clr-text);}
/* Gaveta de membros — sai do cartao para baixo, e nao e uma lista solta. */
.gm-lista{display:flex;flex-direction:column;gap:1px;margin:-8px 0 10px;padding:9px 11px 10px;border:1px solid var(--clr-border);border-top:none;border-radius:0 0 14px 14px;background:rgba(255,255,255,.018);}
.gm-item{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:8px;transition:background .15s;}
.gm-item:hover{background:rgba(255,255,255,.04);}
.gm-av{position:relative;width:24px;height:24px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.gm-dot{position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;border:2px solid #111;}
.gm-nome{font-family:'Inter',sans-serif;font-size:.74rem;color:var(--clr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gm-selo{font-family:'Inter',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fcd34d;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.28);border-radius:20px;padding:1px 6px;flex-shrink:0;}
.gm-estado{margin-left:auto;font-family:'Inter',sans-serif;font-size:.63rem;color:rgba(240,240,240,.3);white-space:nowrap;}
.gm-kick{flex-shrink:0;margin-left:8px;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:600;padding:3px 9px;border-radius:7px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.24);color:#fca5a5;cursor:pointer;transition:all .15s;}
.gm-kick:hover{background:rgba(239,68,68,.24);color:#fff;}
.gm-kick:disabled{opacity:.5;cursor:default;}


/* ═══ PERMISSÕES DOS PAINÉIS (só o líder abre) ══════════════════════════
   O QUE SOBROU AQUI, E POR QUÊ SÓ ISTO.

   Este bloco era a folha inteira da tela antiga — a de quando o acesso era um
   INTERRUPTOR de 44×24 com bolinha que anda de lado. A tela foi refeita mais
   abaixo ("QUEM ENTRA EM CADA PAINEL"), e o bloco velho ficou aqui.

   CSS morto não é neutro. O que ele deixa em pé é exatamente aquilo que o
   bloco novo não redeclarou, e foram duas coisas visíveis na tela:

     · `width:44px;height:24px` continuavam valendo sobre o selo novo, que
       declara `min-width` e `padding` mas não altura — o selo saía com 24px
       de caixa e o texto vazando por fora dela;
     · `.perm-chave::after` continuava desenhando a BOLINHA do interruptor por
       cima do selo. Era a mancha verde à esquerda de cada "Acesso total".

   Ficam só as duas regras que o bloco novo não redeclara. */
.perm-sub{font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.42);margin-top:3px;}
.perm-vazio{font-family:'Inter',sans-serif;font-size:.78rem;color:rgba(240,240,240,.38);text-align:center;padding:26px 12px;line-height:1.6;}

/* ══════════════════════════════════════════════════════════════════════
   QUEM ENTRA EM CADA PAINEL — a tela de delegação
   ══════════════════════════════════════════════════════════════════════
   Refeita em 12/08/2026 a partir de uma arte. O que mudou não é só pintura:

     · o INTERRUPTOR virou SELO ESCRITO. Uma bolinha que anda de lado obriga a
       saber o que "ligado" significa naquela coluna — e numa matriz de quatro
       colunas por pessoa, "ligado" é a pergunta, não a resposta. "Acesso
       total" e "Sem acesso" respondem sem depender de convenção;
     · o LÍDER entrou na grade, em texto. Fora dela, a tela dizia "3 pessoas" e
       mostrava duas, e quem lia a matriz não tinha como saber que existe
       alguém entrando em tudo;
     · DUAS FAIXAS emolduram a grade: a de cima diz o que a tela faz, a de
       baixo o que cada painel é. Quem abre "Painéis" pela primeira vez não
       sabe se está trancando dados ou escondendo botões.
   ══════════════════════════════════════════════════════════════════════ */
/* ── A JANELA ACOMPANHA A LISTA DE PAINÉIS ──────────────────────────────
   Era `min(880px,96vw)`: uma largura escolhida quando a matriz tinha QUATRO
   colunas. Com seis painéis, as duas últimas — Contratos e Projetos — ficavam
   além da borda, e a tela não dizia que existiam: quem abria contava quatro e
   perguntava onde estavam os outros.

   A largura agora é uma CONTA sobre `--perm-cols`, que o app escreve com o
   tamanho de `MD_PAINEIS_GRUPO`. Painel novo alarga a janela sozinho, que é o
   que uma tela gerada por lista precisa fazer para não envelhecer com ela.
   O `96vw` continua sendo o teto, e a rolagem lateral (com a dica e a coluna
   dos nomes presa) continua sendo a rede embaixo dele. */
.perm-modal{width:min(96vw,max(680px,calc(232px + var(--perm-cols,3) * 156px)));}
.perm-cab{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.perm-cab-ico{
  width:48px;height:48px;flex-shrink:0;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#c4b5fd;
  background:radial-gradient(120% 120% at 30% 20%,rgba(168,85,247,.3),rgba(99,102,241,.14));
  border:1px solid rgba(168,85,247,.3);
}
.perm-cab-ico svg{width:22px;height:22px;}
.perm-cab-txt{flex:1;min-width:0;}
.perm-cab .m-h1{margin:0;}
.perm-x{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.5);font-size:.9rem;line-height:1;
  transition:background .15s,color .15s,border-color .15s;
}
.perm-x:hover{background:rgba(255,255,255,.09);color:var(--clr-text);}

/* As duas faixas: mesma forma, papéis opostos — a de cima abre, a de baixo
   fecha. Cores diferentes para não parecerem a mesma frase repetida. */
.perm-faixa,.perm-rodape{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;
  border:1px solid var(--clr-border);background:rgba(255,255,255,.025);
}
.perm-faixa{margin-bottom:14px;}
.perm-rodape{margin-top:14px;}
.perm-faixa-ico,.perm-rodape-ico{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;display:flex;
  align-items:center;justify-content:center;
}
.perm-faixa-ico{background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.26);color:#a5b4fc;}
.perm-rodape-ico{background:rgba(59,130,246,.13);border:1px solid rgba(59,130,246,.24);color:#93c5fd;}
.perm-faixa-ico svg,.perm-rodape-ico svg{width:18px;height:18px;}
.perm-faixa-txt,.perm-rodape-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.perm-faixa-txt b,.perm-rodape-txt b{
  font-family:'Inter',sans-serif;font-size:.79rem;font-weight:600;color:rgba(240,240,240,.9);
}
.perm-faixa-txt span,.perm-rodape-txt span{
  font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.38);line-height:1.5;
}
.perm-saiba{
  flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px 2px;
  font-family:'Inter',sans-serif;font-size:.73rem;color:#93c5fd;
}
.perm-saiba:hover{color:#bfdbfe;text-decoration:underline;}
.perm-limite{
  font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.42);
  line-height:1.6;margin:-6px 0 14px;padding:10px 13px;border-radius:10px;
  background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);
}

/* ── A MOLDURA DA GRADE ─────────────────────────────────────────────────
   Três peças, e cada uma existe por causa de um jeito diferente de a matriz
   passar da largura da janela:

     · `.perm-quadro` é o lugar da SOMBRA da borda direita. Ela precisa ficar
       parada enquanto a grade corre por baixo — dentro do que rola, ela
       rolaria junto e não avisaria nada;
     · `.perm-rolagem` é o que rola;
     · `.perm-dica` é a frase que aparece só quando sobra painel para o lado.
       Sem ela, uma coluna cortada é indistinguível de uma coluna que não
       existe — e foi assim que Contratos e Projetos "sumiram". */
.perm-quadro{position:relative;}
.perm-quadro::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:52px;
  border-radius:0 14px 14px 0;pointer-events:none;opacity:0;
  background:linear-gradient(to left,#111 12%,rgba(17,17,17,0));
  transition:opacity .18s;
}
.perm-quadro.tem-mais::after{opacity:1;}
.perm-rolagem{overflow-x:auto;}
.perm-dica{
  display:flex;align-items:center;gap:7px;margin-top:9px;
  font-family:'Inter',sans-serif;font-size:.71rem;color:rgba(240,240,240,.4);
}
.perm-dica span{color:#93c5fd;font-size:.85rem;line-height:1;}
.perm-dica[hidden]{display:none;}
/* `overflow:clip` e não `hidden`: os dois cortam o canto arredondado, mas
   `hidden` cria um contêiner de rolagem, e aí a coluna dos nomes (`sticky`)
   passaria a se prender a uma caixa que nunca rola — ou seja, não se prenderia
   a nada. O `hidden` fica como reserva para quem não entende `clip`: lá a
   coluna não gruda, e o resto continua igual. */
.perm-grade{
  display:grid;grid-template-columns:minmax(176px,1.2fr) repeat(var(--perm-cols,3),minmax(148px,1fr));
  gap:1px;background:var(--clr-border);border:1px solid var(--clr-border);
  border-radius:14px;overflow:hidden;overflow:clip;min-width:min-content;
}
.perm-canto,.perm-col,.perm-membro,.perm-cel{background:#111116;padding:14px 13px;}
/* ── A COLUNA DE QUEM FICA ─────────────────────────────────────────────
   Rolar para o lado sem isto tira da tela a única coisa que diz de QUEM é a
   linha: sobra uma fileira de selos iguais e a pergunta "de quem é esta?". */
.perm-canto,.perm-membro{position:sticky;left:0;z-index:2;}
.perm-canto{z-index:3;}
.perm-quadro.rolou .perm-canto,.perm-quadro.rolou .perm-membro{
  box-shadow:8px 0 14px -6px rgba(0,0,0,.55);
}
.perm-canto{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;}
.perm-canto b{font-family:'Inter',sans-serif;font-size:.86rem;font-weight:700;color:var(--clr-text);}
.perm-canto span{font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.32);}
.perm-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
/* O ladrilho colorido é o que faz a coluna ser reconhecida sem ler o título. */
.perm-col-ico{
  width:34px;height:34px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:.95rem;line-height:1;
}
/* OITO cores, e não quatro. Eram quatro porque a matriz tinha quatro colunas:
   o quinto painel voltava à cor do primeiro, e duas colunas com o mesmo
   ladrilho desfazem justamente o "reconhecer sem ler". Oito dá folga para os
   próximos — e quando faltar, é uma linha aqui (ver PAINEIS-DELEGAVEIS.md). */
.perm-col-ico[data-p="0"]{background:rgba(99,102,241,.16);border:1px solid rgba(99,102,241,.3);}
.perm-col-ico[data-p="1"]{background:rgba(59,130,246,.16);border:1px solid rgba(59,130,246,.3);}
.perm-col-ico[data-p="2"]{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.28);}
.perm-col-ico[data-p="3"]{background:rgba(236,72,153,.14);border:1px solid rgba(236,72,153,.28);}
.perm-col-ico[data-p="4"]{background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.28);}
.perm-col-ico[data-p="5"]{background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.3);}
.perm-col-ico[data-p="6"]{background:rgba(20,184,166,.14);border:1px solid rgba(20,184,166,.28);}
.perm-col-ico[data-p="7"]{background:rgba(249,115,22,.13);border:1px solid rgba(249,115,22,.26);}
.perm-col-tit{font-family:'Inter',sans-serif;font-size:.79rem;font-weight:700;color:var(--clr-text);line-height:1.25;}
.perm-col-sub{font-family:'Inter',sans-serif;font-size:.65rem;color:rgba(240,240,240,.3);line-height:1.45;}

.perm-membro{display:flex;align-items:center;gap:10px;}
.perm-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#8b5cf6,#4f46e5);color:#fff;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(99,102,241,.28);
}
.perm-quem{display:flex;flex-direction:column;gap:3px;min-width:0;}
.perm-nome{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;color:var(--clr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.perm-papel{
  align-self:flex-start;font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.04em;text-transform:capitalize;padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid var(--clr-border);color:rgba(240,240,240,.4);
}
.perm-papel.lider{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.32);color:#c4b5fd;}

/* A célula do selo é mais estreita que as outras: numa matriz de seis colunas,
   cada 8px de folga aqui vira 48px na largura da janela. */
.perm-cel{display:flex;align-items:center;justify-content:center;padding:12px 9px;}
/* O SELO: forma de pílula, ícone desenhado e a palavra. A cor confirma o que
   o texto já disse — nunca o contrário.

   Sem `min-width` fixo: quem manda na largura é a palavra, e é ela que decide
   quanto a coluna precisa. A ALTURA é que não encolhe — o alvo do dedo mora
   nela. `nowrap` porque "Acesso total" quebrado em duas linhas seria a coluna
   estreitando às custas da leitura. */
.perm-chave{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:34px;padding:9px 12px;border-radius:11px;cursor:pointer;
  white-space:nowrap;
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.45);transition:background .16s,border-color .16s,color .16s;
}
.perm-chave .perm-ico{width:15px;height:15px;flex-shrink:0;}
.perm-chave:hover{background:rgba(255,255,255,.07);}
.perm-chave.on{
  background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.34);color:#6ee7b7;
}
.perm-chave.on:hover{background:rgba(16,185,129,.2);}
.perm-chave:focus-visible{outline:2px solid var(--clr-indigo-light);outline-offset:2px;}
/* A linha do líder informa, não oferece: sem cursor de clique e sem reação ao
   passar o mouse, porque não há o que clicar. */
.perm-chave.fixo{cursor:default;opacity:.75;}

.perm-btns{gap:12px;margin-top:16px;}
.perm-cancel{flex:0 0 34%;padding:14px;border-radius:12px;font-size:.88rem;}
.perm-salvar{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:11px 16px;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#7c5cff,#3b82f6);
  box-shadow:0 8px 24px rgba(99,102,241,.32);
  transition:transform .15s,box-shadow .15s,opacity .15s;
}
.perm-salvar b{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Inter',sans-serif;font-size:.88rem;font-weight:700;color:#fff;
}
.perm-salvar b .perm-ico{width:14px;height:14px;}
.perm-salvar span{font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(255,255,255,.68);}
.perm-salvar:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(99,102,241,.42);}
.perm-salvar:disabled{opacity:.6;cursor:wait;transform:none;}

@media (max-width:760px){
  .perm-btns{flex-direction:column-reverse;}
  .perm-cancel{flex:none;width:100%;}
  .perm-salvar{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .perm-salvar{transition:none;}
}
.sp-group-row:hover{background:rgba(99,102,241,.07);border-color:var(--clr-indigo-20);}.sp-group-icon{width:34px;height:34px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));display:flex;align-items:center;justify-content:center;font-size:.85rem;}.sp-group-info{flex:1;min-width:0;}.sp-group-name{font-size:.82rem;font-weight:600;color:var(--clr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.sp-group-meta{font-size:.7rem;color:rgba(240,240,240,.35);margin-top:1px;}.sp-group-actions{display:flex;gap:5px;flex-shrink:0;}.sp-new-group-row{display:flex;gap:7px;margin-bottom:8px;}.sp-new-group-inp{flex:1;background:var(--clr-border-soft);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 11px;font-family:'Inter',sans-serif;font-size:.78rem;color:var(--clr-text);outline:none;transition:border-color .15s;}.sp-new-group-inp::placeholder{color:rgba(240,240,240,.25);}.sp-new-group-inp:focus{border-color:var(--clr-indigo-40);}.sp-new-group-btn{padding:7px 12px;border-radius:8px;border:none;background:var(--clr-indigo-20);color:var(--clr-indigo-light);font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}.sp-new-group-btn:hover{background:rgba(99,102,241,.35);}.group-invite-notif{position:fixed;bottom:24px;right:24px;z-index:6100;width:290px;background:#111;border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--clr-indigo);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.7);padding:12px 14px;animation:notifIn .3s cubic-bezier(.16,1,.3,1) both;transition:opacity .2s,transform .2s;pointer-events:all;}.group-invite-notif.hiding{opacity:0;transform:translateX(20px);}.group-member-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;margin-right:4px;}.sp-btn.invite{background:rgba(245,158,11,.12);color:#fcd34d;border:1px solid rgba(245,158,11,.22);}.sp-btn.invite:hover{background:rgba(245,158,11,.25);}.sp-row.pending-in .sp-name{color:#fcd34d;}.chat-win{position:fixed;bottom:0;z-index:1600;width:300px;height:420px;background:#111;border:1px solid rgba(255,255,255,.11);border-bottom:none;border-radius:14px 14px 0 0;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.6);transition:height .25s cubic-bezier(.16,1,.3,1);pointer-events:all;}.chat-win.minimized{height:46px;overflow:hidden;}.chat-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--clr-border);cursor:pointer;flex-shrink:0;user-select:none;background:var(--clr-bg-card);border-radius:14px 14px 0 0;}.chat-header-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0;position:relative;}.chat-online-dot{position:absolute;bottom:0;right:0;width:7px;height:7px;border-radius:50%;border:1.5px solid #111;}.chat-online-dot.online{background:var(--clr-success);}.chat-online-dot.offline{background:#374151;}.chat-title{flex:1;font-size:.8rem;font-weight:600;color:var(--clr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.chat-unread{background:var(--clr-danger);color:#fff;border-radius:10px;font-size:.62rem;font-weight:700;padding:1px 6px;font-family:'Inter',sans-serif;}.chat-close-btn{background:none;border:none;cursor:pointer;color:rgba(240,240,240,.3);font-size:.9rem;padding:0 2px;transition:color .15s;flex-shrink:0;}.chat-close-btn:hover{color:var(--clr-text);}.chat-clear-btn{background:none;border:none;cursor:pointer;color:rgba(240,240,240,.22);font-size:.72rem;padding:0 3px;transition:color .15s;flex-shrink:0;font-family:'Inter',sans-serif;letter-spacing:.2px;}.chat-clear-btn:hover{color:rgba(239,68,68,.8);}.chat-msgs{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;}.chat-msg{display:flex;flex-direction:column;max-width:82%;}.chat-msg.mine{align-self:flex-end;align-items:flex-end;}.chat-msg.theirs{align-self:flex-start;align-items:flex-start;}.chat-bubble{padding:7px 11px;border-radius:12px;font-size:.79rem;line-height:1.5;word-break:break-word;font-family:'Inter',sans-serif;}.chat-msg.mine .chat-bubble{background:rgba(99,102,241,.22);color:#e0e7ff;border-radius:12px 12px 4px 12px;}.chat-msg.theirs .chat-bubble{background:var(--clr-border);color:rgba(240,240,240,.85);border-radius:12px 12px 12px 4px;}.chat-time{font-size:.6rem;color:rgba(240,240,240,.25);margin-top:2px;font-family:'JetBrains Mono',monospace;}.chat-file-bubble{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:10px;background:var(--clr-border-soft);border:1px solid rgba(255,255,255,.1);font-size:.75rem;cursor:pointer;transition:background .15s;text-decoration:none;color:rgba(240,240,240,.8);max-width:220px;}.chat-file-bubble:hover{background:rgba(255,255,255,.1);}.chat-file-bubble svg{width:14px;height:14px;opacity:.6;flex-shrink:0;}.chat-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.chat-file-sz{font-size:.61rem;opacity:.4;flex-shrink:0;font-family:'JetBrains Mono',monospace;}.chat-img{max-width:100%;max-height:200px;border-radius:10px;display:block;cursor:zoom-in;object-fit:cover;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:opacity .15s;}.chat-img:hover{opacity:.88;}#chat-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;cursor:zoom-out;}#chat-lightbox.open{display:flex;}#chat-lightbox img{max-width:90vw;max-height:90dvh;border-radius:8px;object-fit:contain;}.chat-input-row{display:flex;align-items:flex-end;gap:6px;padding:8px 10px;border-top:1px solid var(--clr-border);flex-shrink:0;}.chat-file-btn{width:30px;height:30px;border:1px solid rgba(255,255,255,.1);background:var(--clr-border-faint);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(240,240,240,.4);transition:all .15s;flex-shrink:0;position:relative;}.chat-file-btn:hover{background:rgba(255,255,255,.1);color:rgba(240,240,240,.8);}.chat-file-btn svg{width:14px;height:14px;}.chat-file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}.chat-inp{flex:1;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:7px 10px;font-family:'Inter',sans-serif;font-size:.8rem;color:var(--clr-text);outline:none;resize:none;transition:border-color .18s;max-height:80px;overflow-y:auto;min-height:30px;line-height:1.4;}.chat-inp:focus{border-color:rgba(99,102,241,.45);}.chat-inp::placeholder{color:rgba(240,240,240,.2);}.chat-send{width:30px;height:30px;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:opacity .15s;flex-shrink:0;}.chat-send:hover{opacity:.85;}.chat-send svg{width:14px;height:14px;}::-webkit-scrollbar{width:4px;height:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}#auth-screen.landing-scroll{overflow-y:auto !important;overflow-x:hidden !important;flex-direction:column !important;}.auth-hero{display:flex;min-height:100dvh;flex-shrink:0;}.lp-section{width:100%;padding:100px 8vw;border-top:1px solid var(--clr-border-soft);flex-shrink:0;}.lp-section:nth-child(odd){background:#0a0a0a;}.lp-section:nth-child(even){background:#0d0d0f;}.lp-eyebrow{display:flex;align-items:center;gap:8px;font-size:.62rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(99,102,241,.7);margin-bottom:20px;}.lp-eyebrow-dot{width:4px;height:4px;border-radius:50%;background:var(--clr-indigo);}.lp-title{font-family:'Syne',sans-serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:800;color:var(--clr-text);letter-spacing:-2px;line-height:1.1;margin-bottom:24px;}.lp-title .hl{background:linear-gradient(135deg,#818cf8,var(--clr-indigo),var(--clr-indigo-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.lp-subtitle{font-size:1.05rem;color:rgba(240,240,240,.5);line-height:1.8;max-width:560px;}.lp-cols{display:flex;gap:80px;align-items:center;}.lp-cols.reverse{flex-direction:row-reverse;}.lp-col-text{flex:1;min-width:0;}.lp-col-visual{flex:1.1;min-width:0;}.lp-feats{display:flex;flex-direction:column;gap:20px;margin-top:40px;}.lp-feat{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;background:var(--clr-bg-card);border:1px solid var(--clr-border);transition:border-color .2s,background .2s;}.lp-feat:hover{border-color:rgba(99,102,241,.22);background:rgba(99,102,241,.04);}.lp-feat-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;}.lp-feat-title{font-size:.87rem;font-weight:600;color:var(--clr-text);margin-bottom:4px;}.lp-feat-desc{font-size:.77rem;color:rgba(240,240,240,.38);line-height:1.55;}.lp-stats-row{display:flex;gap:0;margin-top:40px;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;}.lp-stat-box{flex:1;padding:22px 16px;text-align:center;border-right:1px solid var(--clr-border);background:rgba(255,255,255,.02);}.lp-stat-box:last-child{border-right:none;}.lp-stat-num{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;color:var(--clr-text);letter-spacing:-1px;line-height:1;}.lp-stat-num .hl{background:linear-gradient(135deg,#818cf8,var(--clr-indigo));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.lp-stat-label{font-size:.68rem;color:rgba(240,240,240,.32);margin-top:5px;letter-spacing:.3px;}.lp-how{display:flex;flex-direction:column;gap:0;margin-top:36px;position:relative;}.lp-how::before{content:'';position:absolute;left:18px;top:20px;bottom:20px;width:1px;background:linear-gradient(180deg,var(--clr-indigo-40),rgba(20,184,166,.3),transparent);}.lp-how-step{display:flex;gap:18px;padding:16px 0;}.lp-how-num{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1a1b3e,#111);border:1px solid rgba(99,102,241,.35);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:.78rem;font-weight:700;color:var(--clr-indigo-light);flex-shrink:0;position:relative;z-index:1;}.lp-how-title{font-size:.87rem;font-weight:600;color:var(--clr-text);margin-bottom:4px;padding-top:6px;}.lp-how-desc{font-size:.77rem;color:rgba(240,240,240,.38);line-height:1.55;}.lp-quote{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.14);border-left:3px solid var(--clr-indigo);border-radius:12px;padding:22px 24px;margin-top:36px;}.lp-quote-text{font-size:.87rem;color:rgba(240,240,240,.6);line-height:1.7;font-style:italic;}.lp-quote-author{font-size:.7rem;color:rgba(240,240,240,.28);margin-top:10px;font-weight:600;}.lp-mock{background:#0e0e10;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);}.lp-mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--clr-bg-card);border-bottom:1px solid var(--clr-border-soft);}.lp-mock-dot{width:9px;height:9px;border-radius:50%;}.lp-mock-body{padding:16px;min-height:200px;position:relative;}.mock-note{position:absolute;border-radius:12px;width:192px;padding:0;overflow:hidden;cursor:default;transition:box-shadow .2s,transform .2s,width .25s,height .25s;box-shadow:0 4px 20px var(--clr-overlay-50);}.mock-note:hover{box-shadow:0 8px 32px rgba(0,0,0,.7);transform:translateY(-2px) scale(1.02);z-index:10 !important;}.mock-note-bar{height:3px;}.mock-note-head{padding:9px 11px 6px;display:flex;flex-direction:column;gap:5px;}.mock-note-chip-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}.mock-note-chip{display:inline-flex;align-items:center;gap:3px;border-radius:20px;padding:2px 7px;font-size:.52rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;border:1px solid;}.mock-note-status{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:2px 8px;font-size:.56rem;font-weight:600;border:1px solid;margin-left:auto;}.mock-note-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}.mock-note-title{font-size:.78rem;font-weight:700;color:var(--clr-text);line-height:1.3;padding:0 11px 4px;}.mock-note-body{font-size:.64rem;color:rgba(240,240,240,.45);padding:0 11px 8px;line-height:1.5;}.mock-note-sep{height:1px;background:var(--clr-border-soft);margin:0;}.mock-note-dates{padding:6px 11px 8px;display:flex;flex-direction:column;gap:3px;opacity:0;max-height:0;overflow:hidden;transition:opacity .2s,max-height .25s;}.mock-note:hover .mock-note-dates{opacity:1;max-height:60px;}.mock-note-date-row{display:flex;align-items:center;gap:5px;font-size:.58rem;color:rgba(240,240,240,.3);}.mock-note-pulse{animation:notePulse 3s ease-in-out infinite;}@keyframes notePulse{0%,100%{box-shadow:0 4px 20px var(--clr-overlay-50)}50%{box-shadow:0 8px 28px rgba(99,102,241,.25)}}.mock-badge-float{position:absolute;background:#111;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:7px 10px;font-size:.65rem;font-weight:600;color:var(--clr-text);box-shadow:0 8px 24px rgba(0,0,0,.6);display:flex;align-items:center;gap:6px;white-space:nowrap;animation:floatBadge 4s ease-in-out infinite;font-family:'Inter',sans-serif;}.mock-badge-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.mock-sp-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;}.mock-sp-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;font-family:'Inter',sans-serif;flex-shrink:0;}.mock-sp-name{font-size:.76rem;font-weight:600;color:var(--clr-text);}.mock-sp-meta{font-size:.64rem;color:rgba(240,240,240,.35);}.mock-sp-online{width:7px;height:7px;border-radius:50%;background:var(--clr-success);flex-shrink:0;box-shadow:0 0 5px rgba(16,185,129,.6);}.mock-chat-win{background:#111;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;}.mock-chat-hdr{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--clr-bg-card);border-bottom:1px solid var(--clr-border);}.mock-chat-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff;font-family:'Inter',sans-serif;}.mock-chat-name{font-size:.75rem;font-weight:600;color:var(--clr-text);}.mock-chat-msgs{padding:10px;display:flex;flex-direction:column;gap:6px;}.mock-msg{max-width:80%;padding:6px 10px;border-radius:10px;font-size:.71rem;color:rgba(240,240,240,.85);}.mock-msg.mine{align-self:flex-end;background:rgba(99,102,241,.22);color:#e0e7ff;border-radius:10px 10px 3px 10px;}.mock-msg.theirs{align-self:flex-start;background:var(--clr-border);border-radius:10px 10px 10px 3px;}.mock-typing{display:flex;align-items:center;gap:4px;padding:8px 12px;}.mock-typing-dot{width:5px;height:5px;border-radius:50%;background:rgba(240,240,240,.3);animation:typingBounce 1.2s ease-in-out infinite;}.mock-typing-dot:nth-child(2){animation-delay:.2s;}.mock-typing-dot:nth-child(3){animation-delay:.4s;}@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}.lp-cta{padding:100px 8vw;text-align:center;background:#0a0a0a;border-top:1px solid var(--clr-border-soft);}.lp-cta-title{font-family:'Syne',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--clr-text);letter-spacing:-1.5px;margin-bottom:16px;line-height:1.15;}.lp-cta-desc{font-size:.95rem;color:rgba(240,240,240,.38);margin-bottom:40px;line-height:1.7;}.lp-cta-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));border:none;border-radius:12px;padding:14px 28px;font-family:'Inter',sans-serif;font-size:.95rem;font-weight:600;color:#fff;cursor:pointer;transition:all .2s;box-shadow:0 8px 28px rgba(99,102,241,.35);}.lp-cta-btn:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 12px 40px var(--clr-indigo-50);}.lp-scroll-hint{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;padding-top:32px;cursor:pointer;opacity:.35;transition:opacity .2s;}.lp-scroll-hint:hover{opacity:.65;}.lp-scroll-hint span{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:rgba(240,240,240,.8);}.lp-scroll-hint svg{color:rgba(240,240,240,.8);animation:scrollBounce 2s ease-in-out infinite;}@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}.lp-footer{text-align:center;padding:32px;border-top:1px solid var(--clr-border-faint);font-size:.72rem;color:rgba(240,240,240,.2);letter-spacing:.5px;}.lp-faq-item:hover{border-color:rgba(99,102,241,.25)!important;}.lp-faq-item.open{border-color:var(--clr-indigo-20)!important;}.lp-faq-item.open .lp-faq-arrow{transform:rotate(180deg);}.lp-faq-item.open .lp-faq-body{max-height:200px!important;}.lp-divider{height:1px;background:linear-gradient(90deg,transparent,var(--clr-indigo-30),rgba(20,184,166,.2),transparent);}@media(max-width:768px){.lp-section{padding:64px 24px;}.lp-cols,.lp-cols.reverse{flex-direction:column;}.lp-col-visual{width:100%;}}/* ══════════════════════════════════════════════
 MOBILE RESPONSIVE — iPhone & Android
══════════════════════════════════════════════ */
@media (max-width: 768px){.auth-hero{flex-direction: column !important;min-height: 100dvh !important;}.auth-left{width: 100% !important;min-height: auto !important;padding: 40px 24px 28px !important;border-right: none !important;border-bottom: 1px solid var(--clr-border-soft) !important;justify-content: flex-start !important;}.auth-brand-logo{font-size: 1.5rem;}.auth-brand-sub{font-size: .72rem;}.auth-features{gap: 10px;margin-top: 20px;}.feat-title{font-size: .78rem;}.feat-desc{font-size: .68rem;}.auth-shape,.auth-grid{display: none;}.lp-scroll-hint{display: none !important;}.auth-right{width: 100% !important;flex: none !important;padding: 28px 20px 40px !important;align-items: stretch !important;}.auth-welcome{width: 100% !important;margin-bottom: 18px;}.auth-welcome-heading{font-size: 1.5rem;letter-spacing: -.5px;}.auth-welcome-desc{font-size: .8rem;}.auth-stats{gap: 10px;flex-wrap: wrap;}.auth-stat-txt{font-size: .68rem;}.auth-card{width: 100% !important;padding: 20px 18px !important;}.auth-tabs{margin-bottom: 16px;}.a-inp{padding: 11px 13px;font-size: .85rem;}.auth-btn{padding: 12px;font-size: .85rem;}#toolbar{height: auto !important;flex-wrap: wrap;gap: 5px;padding: 8px 10px;}.t-logo{font-size: .95rem;}
/* O logo virou botão de "voltar ao meu quadro": precisa parecer
   clicável e precisa mostrar onde está o foco de teclado. */
.t-logo{cursor:pointer;border-radius:10px;transition:opacity .15s,transform .15s;}
.t-logo:hover{opacity:.82;}
.t-logo:active{transform:scale(.97);}
.t-logo:focus-visible{outline:2px solid var(--clr-indigo,#6366f1);outline-offset:3px;}.t-pill{max-width: 100px;font-size: .65rem;padding: 3px 8px 3px 6px;}.t-btn{padding: 5px 8px;font-size: .68rem;gap: 3px;}.t-btn svg{width: 11px;height: 11px;}.t-sep{display: none;}.t-spacer{flex: 1;min-width: 4px;}.t-count{font-size: .6rem;}#board{overflow-y: auto !important;overflow-x: hidden !important;display: flex !important;flex-direction: column !important;align-items: center !important;padding: 12px 0 100px !important;gap: 10px !important;}.note:hover{transform: none !important;}.note.dragging{transform: scale(1.02) !important;}.modal-bg{align-items: flex-end !important;padding: 0;}.modal{width: 100vw !important;border-radius: 20px 20px 0 0 !important;padding: 22px 18px 32px !important;max-height: 92dvh;overflow-y: auto;}#social-panel{width: calc(100vw - 24px) !important;left: 12px !important;right: 12px !important;top: 58px !important;max-height: calc(100dvh - 80px);}#wp-panel{width: calc(100vw - 24px) !important;right: 12px !important;bottom: auto !important;top: 58px !important;max-height: 80dvh;overflow-y: auto;}.chat-win{width: calc(100vw - 16px) !important;right: 8px !important;left: auto !important;}.f-viewer{position: fixed !important;left: 0 !important;right: 0 !important;bottom: 0 !important;top: auto !important;width: 100vw !important;height: 85dvh !important;border-radius: 20px 20px 0 0 !important;border-left: none !important;border-top: 1px solid rgba(255,255,255,.13) !important;}.note.has-viewer{border-radius: 14px !important;border-right: 1px solid rgba(255,255,255,.1) !important;}.lp-section{padding:48px 18px;width:100% !important;box-sizing:border-box;}.lp-cols,.lp-cols.reverse{flex-direction:column !important;gap:28px;}.lp-col-text{width:100% !important;min-width:0 !important;flex:none !important;}.lp-col-visual{display:none !important;}.lp-cols > *{width:100% !important;}.lp-title{font-size:1.85rem;letter-spacing:-.8px;}.lp-subtitle{font-size:.87rem;line-height:1.7;}.lp-feats{margin-top:22px;gap:10px;}.lp-feat{padding:13px 14px;gap:12px;}.lp-feat-icon{width:32px;height:32px;flex-shrink:0;}.lp-feat-title{font-size:.83rem;}.lp-feat-desc{font-size:.74rem;}.lp-stats-row{flex-direction:column;}.lp-stat-box{border-right:none;border-bottom:1px solid var(--clr-border);padding:16px;}.lp-stat-box:last-child{border-bottom:none;}.lp-stat-num{font-size:1.5rem;}.lp-how{margin-top:20px;}.lp-how::before{display:none;}.lp-how-step{padding:10px 0;gap:12px;}.lp-how-num{width:28px;height:28px;font-size:.7rem;flex-shrink:0;}.lp-how-title{font-size:.83rem;padding-top:4px;}.lp-how-desc{font-size:.74rem;}.lp-quote{padding:14px 16px;margin-top:20px;}.lp-quote-text{font-size:.8rem;}.lp-eyebrow{margin-bottom:12px;font-size:.58rem;}.lp-cta{padding:48px 18px;text-align:center;}.lp-cta-title{font-size:1.65rem;}.lp-cta-desc{font-size:.84rem;}.lp-cta-btn{padding:12px 22px;font-size:.88rem;width:100%;justify-content:center;}.lp-footer{padding:22px 18px;font-size:.67rem;}.lp-divider{display:none;}.sp-btn,.auth-btn,.lp-cta-btn{min-height: 42px;}.sp-add-inp{padding: 10px 12px;}}@media (max-width: 430px){.auth-left{padding: 32px 18px 22px !important;}.auth-right{padding: 22px 16px 32px !important;}.auth-welcome-heading{font-size: 1.3rem;}.auth-card{padding: 18px 14px !important;}.auth-stats{display: none;}.auth-features{display: none;}#toolbar{padding: 6px 8px;gap: 3px;}.t-btn{padding: 5px 6px;font-size: .64rem;}.n-title{font-size: .86rem;}.n-text{font-size: .74rem;}.chat-win{width: 100vw !important;right: 0 !important;border-radius: 16px 16px 0 0 !important;}.lp-title{font-size: 1.55rem;}.lp-subtitle{font-size: .82rem;}.lp-feat{padding: 11px 13px;}}@media (hover:none) and (pointer:coarse){.note{user-select: none;-webkit-user-select: none;}#board,.chat-msgs,.sp-body,.modal{-webkit-overflow-scrolling: touch;}.note:hover{box-shadow: 0 6px 30px rgba(0,0,0,.6) !important;border-color: rgba(255,255,255,.1) !important;transform: none !important;}}/* ════════════════════════════════════════
 LANES — fileiras verticais no board
════════════════════════════════════════ */
#board.lane-mode{display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;overflow-y:hidden;gap:14px;padding:20px 20px 40px;}.board-lane{flex-shrink:0;width:280px;display:flex;flex-direction:column;gap:0;background:rgba(255,255,255,.025);border:1px solid var(--clr-border);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}.board-lane.drag-over{border-color:var(--clr-indigo-40);box-shadow:0 0 0 2px rgba(99,102,241,.12);}.lane-header{display:flex;align-items:center;gap:8px;padding:10px 12px 9px;border-bottom:1px solid var(--clr-border-soft);background:rgba(255,255,255,.02);cursor:default;flex-shrink:0;}.lane-accent{width:10px;height:10px;border-radius:50%;flex-shrink:0;}.lane-title{flex:1;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;color:var(--clr-text);background:none;border:none;outline:none;padding:0;cursor:pointer;caret-color:var(--clr-indigo-light);}.lane-title:focus{cursor:text;}.lane-count{font-size:.62rem;font-family:'JetBrains Mono',monospace;color:rgba(240,240,240,.22);background:var(--clr-border-faint);border-radius:20px;padding:2px 7px;flex-shrink:0;}.lane-menu-btn{background:none;border:none;cursor:pointer;color:rgba(240,240,240,.2);font-size:.95rem;padding:0 2px;transition:color .15s;line-height:1;flex-shrink:0;}.lane-menu-btn:hover{color:rgba(240,240,240,.7);}.lane-notes{display:flex;flex-direction:column;gap:8px;padding:10px 10px 6px;min-height:60px;overflow-y:auto;max-height:calc(100dvh - 200px);}#board.lane-mode .note{position:relative !important;left:auto !important;top:auto !important;width:100% !important;min-width:0 !important;max-width:none !important;margin:0 !important;flex-shrink:0;}.lane-add-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;margin:0 10px 10px;border:1px dashed var(--clr-border);border-radius:8px;background:none;font-family:'Inter',sans-serif;font-size:.74rem;color:rgba(240,240,240,.22);cursor:pointer;transition:all .18s;}.lane-add-btn:hover{border-color:var(--clr-indigo-30);color:rgba(165,180,252,.6);background:rgba(99,102,241,.04);}.lane-add-col{flex-shrink:0;width:240px;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border:1.5px dashed var(--clr-border);border-radius:14px;background:none;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:500;color:rgba(240,240,240,.2);cursor:pointer;transition:all .2s;align-self:flex-start;}.lane-add-col:hover{border-color:rgba(99,102,241,.35);color:rgba(165,180,252,.6);background:rgba(99,102,241,.04);}#btn-lane-mode{background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.09);}#btn-lane-mode.active{background:rgba(99,102,241,.15);color:var(--clr-indigo-light);border-color:rgba(99,102,241,.28);}.note.lane-dragging{opacity:.45;}.confirm-clear-pop{position: fixed;inset: 0;z-index: 99999;background: rgba(0,0,0,.65);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity .2s;backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);}.confirm-clear-pop.visible{opacity: 1;}.confirm-clear-card{background: #151515;border: 1px solid var(--clr-border-strong);border-radius: 18px;padding: 28px 28px 24px;width: min(380px,90vw);box-shadow: 0 24px 80px rgba(0,0,0,.8);display: flex;flex-direction: column;align-items: center;gap: 10px;transform: scale(.95);transition: transform .2s;text-align: center;}.confirm-clear-pop.visible .confirm-clear-card{transform: scale(1);}.confirm-clear-icon{font-size: 2rem;margin-bottom: 4px;}.confirm-clear-title{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;color:var(--clr-text);}.confirm-clear-desc{font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(240,240,240,.45);line-height:1.6;max-width:280px;}.confirm-clear-btns{display:flex;gap:10px;margin-top:8px;width:100%;}.confirm-clear-alt{width:100%;margin-top:6px;padding:10px;border-radius:10px;border:1px solid rgba(99,102,241,.35);background:rgba(99,102,241,.14);color:rgba(199,210,254,.95);font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;}.confirm-clear-alt:hover{background:rgba(99,102,241,.26);color:#fff;}.confirm-clear-alt-txt{font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.38);line-height:1.55;max-width:300px;}.confirm-clear-cancel{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:var(--clr-border-faint);color:rgba(240,240,240,.6);font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;}.confirm-clear-cancel:hover{background:rgba(255,255,255,.1);color:var(--clr-text);}.confirm-clear-ok{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.15);color:var(--clr-danger-light);font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;}.confirm-clear-ok:hover{background:rgba(239,68,68,.28);color:#fff;}.note.stack-target{box-shadow: 0 0 0 2px rgba(99,102,241,.7),0 8px 32px var(--clr-indigo-30) !important;transform: scale(1.02) !important;transition: box-shadow .15s,transform .15s !important;}.stack-wrap.stack-target{box-shadow: 0 0 0 2px rgba(99,102,241,.7),0 8px 32px var(--clr-indigo-30) !important;border-color: rgba(99,102,241,.6) !important;}.stack-wrap{position: absolute;display: flex;flex-direction: column;gap: 0;min-width: 270px;border-radius: 12px;overflow: hidden;box-shadow: 0 8px 32px var(--clr-overlay-50);}.stack-header{display: flex;align-items: center;gap: 8px;padding: 9px 12px;background: rgba(255,255,255,.04);border-bottom: 1px solid var(--clr-border);cursor: grab;user-select: none;}.stack-header:active{cursor: grabbing;}.shb{width: 3px;height: 16px;border-radius: 2px;flex-shrink: 0;}.stack-header-title{flex: 1;font-family: 'Inter',sans-serif;font-size: .78rem;font-weight: 600;color: var(--clr-text);background: none;border: none;outline: none;padding: 0;cursor: pointer;caret-color: var(--clr-indigo-light);min-width: 0;}.stack-header-title::placeholder{color: rgba(240,240,240,.25);font-weight: 400;}.stack-header-title:focus{cursor: text;}.stack-header-count{font-size: .62rem;font-family: 'JetBrains Mono',monospace;color: rgba(240,240,240,.3);background: var(--clr-border-soft);border-radius: 20px;padding: 2px 7px;flex-shrink: 0;}.stack-toggle-btn{background: var(--clr-border-soft);border: 1px solid rgba(255,255,255,.1);color: rgba(240,240,240,.6);font-size: 1rem;cursor: pointer;width: 28px;height: 28px;border-radius: 7px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;transition: all .15s;}.stack-toggle-btn:hover{background: var(--clr-border-strong);color: var(--clr-text);border-color: rgba(255,255,255,.2);}.stack-body{display: flex;flex-direction: column;max-height: 600px;overflow-y: auto;transition: max-height .25s cubic-bezier(.16,1,.3,1);}.stack-body.collapsed{max-height: 0;overflow: hidden;}.stack-card-row{display: flex;align-items: center;gap: 8px;padding: 8px 12px;border-bottom: 1px solid var(--clr-border-faint);cursor: pointer;transition: background .14s;}.stack-card-row:last-child{border-bottom: none;}.stack-vazia{display:flex;align-items:center;justify-content:center;min-height:64px;padding:18px 12px;margin:8px;border:1.5px dashed var(--clr-border);border-radius:9px;font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.28);text-align:center;user-select:none;transition:border-color .18s,color .18s;}.stack-wrap.stack-target .stack-vazia{border-color:rgba(99,102,241,.55);color:rgba(165,180,252,.75);}.stack-card-row:hover{background: var(--clr-border-faint);}.stack-card-row-bar{width: 3px;height: 14px;border-radius: 2px;flex-shrink: 0;}.stack-card-row-title{flex: 1;font-family: 'Inter',sans-serif;font-size: .78rem;font-weight: 500;color: var(--clr-text);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.stack-card-row-expand,.stack-card-row-unstack{width: 22px;height: 22px;border: none;border-radius: 5px;background: none;color: rgba(240,240,240,.25);font-size: .72rem;cursor: pointer;display: flex;align-items: center;justify-content: center;opacity: 0;transition: all .14s;flex-shrink: 0;}.stack-card-row:hover .stack-card-row-expand,.stack-card-row:hover .stack-card-row-unstack{opacity: 1;}.stack-card-row-expand:hover{background: var(--clr-indigo-20);color: var(--clr-indigo-light);}.stack-card-row-unstack:hover{background: rgba(245,158,11,.2);color: #fcd34d;}#lofi-btn{display: inline-flex;align-items: center;gap: 6px;background: var(--clr-indigo-10);border: 1px solid rgba(99,102,241,.22);border-radius: 20px;padding: 4px 12px 4px 9px;font-family: 'Inter',sans-serif;font-size: .72rem;font-weight: 500;color: rgba(165,180,252,.8);cursor: pointer;transition: all .2s;white-space: nowrap;max-width: 220px;}#lofi-btn:hover{background: var(--clr-indigo-20);border-color: var(--clr-indigo-40);color: var(--clr-indigo-light);}#lofi-btn.playing{background: rgba(99,102,241,.18);border-color: var(--clr-indigo-40);color: var(--clr-indigo-light);}#lofi-icon{font-size: .85rem;flex-shrink: 0;}#lofi-btn.playing #lofi-icon{animation: lofiBeat .8s ease-in-out infinite;}@keyframes lofiBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}#lofi-track{font-size: .67rem;color: rgba(165,180,252,.6);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 160px;font-family: 'Inter',sans-serif;animation: lofiScroll 12s linear infinite;}@keyframes lofiScroll{0%,20%{transform:translateX(0)}80%,100%{transform:translateX(-30%)}}
/* ── Google Sign-In button ── */
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:rgba(240,240,240,.2);font-size:.72rem;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);}
.btn-google{width:100%;padding:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:9px;font-family:'Inter',sans-serif;font-size:.86rem;font-weight:500;color:rgba(240,240,240,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .18s;margin-bottom:14px;}
.btn-google:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:var(--clr-text);}
.btn-google:active{transform:scale(.98);}
.btn-google svg{width:18px;height:18px;flex-shrink:0;}

/* ── Sort / Filter Panel ── */
#sort-panel{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:1200;width:min(520px,96vw);background:#111;border:1px solid var(--clr-border-strong);border-radius:16px;padding:18px 20px 16px;box-shadow:0 20px 60px rgba(0,0,0,.8);display:none;animation:fadeUp .18s cubic-bezier(.16,1,.3,1) both;}
#sort-panel.open{display:block;}
.sort-panel-title{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--clr-text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.sort-panel-title span{font-size:.68rem;font-weight:500;color:rgba(240,240,240,.3);background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:20px;padding:2px 8px;}
.sort-section{margin-bottom:14px;}
.sort-section-lbl{font-size:.58rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(240,240,240,.25);margin-bottom:8px;}
.sort-chips{display:flex;flex-wrap:wrap;gap:6px;}
.sort-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;border:1px solid var(--clr-border);background:var(--clr-bg-card);font-family:'Inter',sans-serif;font-size:.74rem;font-weight:500;color:rgba(240,240,240,.5);cursor:pointer;transition:all .15s;user-select:none;}
.sort-chip:hover{border-color:rgba(255,255,255,.2);color:var(--clr-text);background:rgba(255,255,255,.06);}
.sort-chip.active{background:rgba(99,102,241,.18);border-color:var(--clr-indigo-40);color:var(--clr-indigo-light);font-weight:600;}
.sort-chip.active-status-todo{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.3);color:#94a3b8;}
.sort-chip.active-status-progress{background:rgba(99,102,241,.18);border-color:var(--clr-indigo-40);color:var(--clr-indigo-light);}
.sort-chip.active-status-done{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#6ee7b7;}
.sort-chip.active-status-closed{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:var(--clr-danger-light);}
.sort-chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sort-panel-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--clr-border-faint);margin-top:4px;}
.sort-active-badge{font-size:.7rem;color:rgba(240,240,240,.3);}
.sort-active-badge b{color:var(--clr-indigo-light);}
.sort-reset{font-size:.72rem;color:rgba(240,240,240,.3);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;padding:4px 8px;border-radius:6px;transition:all .15s;}
.sort-reset:hover{background:rgba(255,255,255,.06);color:rgba(240,240,240,.7);}

/* ── Personal Workspace Manager ── */
#pw-panel{position:fixed;top:62px;left:12px;z-index:1300;width:260px;background:#111;border:1px solid var(--clr-border-strong);border-radius:14px;padding:14px;box-shadow:0 16px 48px rgba(0,0,0,.8);display:none;animation:fadeUp .18s cubic-bezier(.16,1,.3,1) both;}
#pw-panel.open{display:block;}
.pw-header{font-family:'Syne',sans-serif;font-size:.82rem;font-weight:700;color:var(--clr-text);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
.pw-header span{font-size:.62rem;color:rgba(240,240,240,.28);font-family:'Inter',sans-serif;font-weight:400;}
.pw-list{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;max-height:240px;overflow-y:auto;}
.pw-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:all .15s;position:relative;}
.pw-item:hover{background:rgba(255,255,255,.05);border-color:var(--clr-border);}
.pw-item.active{background:rgba(99,102,241,.12);border-color:var(--clr-indigo-30);}
.pw-item-dot{width:7px;height:7px;border-radius:50%;background:rgba(240,240,240,.2);flex-shrink:0;transition:background .15s;}
.pw-item.active .pw-item-dot{background:var(--clr-indigo);box-shadow:0 0 6px rgba(99,102,241,.7);}
.pw-item-name{flex:1;font-size:.8rem;font-weight:500;color:rgba(240,240,240,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pw-item.active .pw-item-name{color:var(--clr-text);font-weight:600;}
.pw-item-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s;}
.pw-item:hover .pw-item-actions{opacity:1;}
.pw-item-btn{width:20px;height:20px;border:none;background:none;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:rgba(240,240,240,.35);transition:all .12s;}
.pw-item-btn:hover{background:rgba(255,255,255,.08);color:rgba(240,240,240,.8);}
.pw-item-btn.del:hover{background:rgba(239,68,68,.15);color:var(--clr-danger-light);}
.pw-item-rename{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--clr-indigo-40);border-radius:5px;padding:2px 6px;font-family:'Inter',sans-serif;font-size:.8rem;color:var(--clr-text);outline:none;}
.pw-add-row{display:flex;gap:6px;}
.pw-add-inp{flex:1;background:var(--clr-border-faint);border:1px solid var(--clr-border);border-radius:8px;padding:7px 10px;font-family:'Inter',sans-serif;font-size:.78rem;color:var(--clr-text);outline:none;transition:border-color .15s;}
.pw-add-inp:focus{border-color:var(--clr-indigo-40);}
.pw-add-inp::placeholder{color:rgba(240,240,240,.2);}
.pw-add-btn{padding:7px 11px;border-radius:8px;border:none;background:var(--clr-indigo-20);color:var(--clr-indigo-light);font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.pw-add-btn:hover{background:var(--clr-indigo-30);}
.pw-divider{height:1px;background:var(--clr-border-faint);margin:10px 0 8px;}
.pw-leave-row{display:flex;gap:6px;}
.pw-leave-btn{flex:1;padding:6px;border-radius:7px;border:1px solid var(--clr-border);background:none;font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.4);cursor:pointer;transition:all .15s;text-align:center;}
.pw-leave-btn:hover{background:rgba(255,255,255,.05);color:rgba(240,240,240,.7);}
.pw-leave-btn.danger{border-color:rgba(239,68,68,.25);color:rgba(252,165,165,.6);}
.pw-leave-btn.danger:hover{background:rgba(239,68,68,.1);color:var(--clr-danger-light);}

/* ── Premium / Monetização ── */
/* ═══════════════════════════════════════════════════════════════════════
   O MODAL DO PREMIUM PRECISA CABER NA TELA — inclusive em notebook
   ═══════════════════════════════════════════════════════════════════════
   Ele não tinha `max-height` nenhum. Enquanto o conteúdo cabia, ninguém
   percebia; quando passou a caber só em monitor alto, o defeito apareceu do
   jeito mais ruim: o fundo CENTRALIZA o cartão, então o que sobra vaza metade
   para cima e metade para baixo — some o título em cima e o botão de assinar
   embaixo, e não há o que rolar, porque nada declarou rolagem.

   Numa tela de notebook (768px de altura) isso escondia justamente as duas
   pontas que importam: o que se está comprando e o botão de comprar.

   `padding` no fundo para o cartão nunca encostar na borda, `max-height` para
   ele saber onde parar, e `overflow-y` para o que passar disso continuar
   alcançável.

   `dvh`, e não `vh`. A versão anterior deste comentário justificava o `vh`
   dizendo que "nenhum outro lugar do projeto usa dvh" — e isso deixou de ser
   verdade: agora TODAS as alturas de viewport do projeto são `dvh`. Ver o
   bloco `UNIDADE DE ALTURA` no topo deste arquivo. */
.premium-modal-bg{position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s both;}
.premium-modal{background:#111;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px;width:min(420px,93vw);max-height:calc(100dvh - 32px);overflow-y:auto;box-shadow:0 40px 100px rgba(0,0,0,.9);position:relative;}
/* O ✕ é `position:absolute` dentro de um cartão que agora rola: sem isto ele
   subiria junto com o conteúdo e sairia da vista logo no primeiro arrasto. */
.premium-modal .pm-close{position:sticky;float:right;top:0;margin:-14px -14px 0 0;}

/* ═══════════════════════════════════════════════════════════════════════
   DIGITAR PARA CONFIRMAR — a única confirmação que exige LER
   ═══════════════════════════════════════════════════════════════════════
   Botão vermelho é fácil de acertar por reflexo, ainda mais quando a pessoa
   acabou de clicar num botão vermelho parecido no passo anterior. Digitar
   quebra o reflexo.

   O visual é o mesmo do campo que o estoque já usa para apagar movimentações
   em massa (`.est-campo-perigo`): maiúscula forçada, espaçamento largo entre
   letras, borda vermelha. Ação sem volta que se parece com ação sem volta é o
   que faz a pessoa reconhecer o peso pela forma, antes de ler o texto. */
.confirm-clear-campo{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:2px;text-align:left;}
.confirm-clear-campo > span{font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.42);}
.confirm-clear-campo input{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(248,113,113,.35);background:rgba(255,255,255,.04);
  color:#f0f0f0;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;outline:0;
  transition:border-color .16s;
}
.confirm-clear-campo input:focus{border-color:#f87171;}
/* Errar a palavra precisa de uma resposta VISÍVEL no campo, e não só do aviso
   que sobe no canto: quem digitou errado está olhando para o que digitou. */
.confirm-clear-campo input.errado{border-color:#ef4444;animation:confirmTremor .28s;}
@keyframes confirmTremor{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}
.pm-close{position:absolute;top:14px;right:14px;background:none;border:none;color:rgba(240,240,240,.3);cursor:pointer;font-size:1.1rem;transition:color .15s;}.pm-close:hover{color:rgba(240,240,240,.8);}
.pm-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(251,191,36,.1));border:1px solid rgba(245,158,11,.35);border-radius:20px;padding:4px 12px;font-size:.68rem;font-weight:700;color:#fbbf24;letter-spacing:.5px;text-transform:uppercase;margin-bottom:16px;}
.pm-title{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;color:var(--clr-text);letter-spacing:-1px;line-height:1.1;margin-bottom:8px;}
.pm-title .hl{background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.pm-desc{font-size:.82rem;color:rgba(240,240,240,.45);line-height:1.7;margin-bottom:20px;}
.pm-features{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.pm-feat{display:flex;align-items:center;gap:10px;font-size:.8rem;color:rgba(240,240,240,.7);}
.pm-feat-icon{width:22px;height:22px;border-radius:6px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.25);display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;}
.pm-renovar-titulo{font-family:'Syne',sans-serif;font-size:.92rem;font-weight:700;color:var(--clr-text);margin-bottom:10px;}

/* Escolha de plano no modal Premium — mensal x anual */
.pm-planos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.pm-plano{position:relative;background:var(--clr-border-faint);border:1.5px solid rgba(255,255,255,.1);border-radius:12px;
  padding:17px 10px 12px;cursor:pointer;text-align:center;transition:border-color .18s,background .18s;font-family:'Inter',sans-serif;}
.pm-plano:hover{background:rgba(255,255,255,.06);}
.pm-plano.ativo{border-color:rgba(99,102,241,.6);background:rgba(99,102,241,.12);}
/* ═══════════════════════════════════════════════════════════════════════
   O PREÇO ENCOLHE COM O CARTÃO — e o contêiner é o CARTÃO, não a grade
   ═══════════════════════════════════════════════════════════════════════
   "R$ 399,99" furava a borda arredondada, e a causa era uma medida tomada no
   lugar errado. `container-type` estava em `.pm-planos`, a GRADE, então `cqi`
   valia 1% dos ~356px dela — e o cartão tem metade disso.

   Com `7cqi` = 24,9px contra um teto de 1,34rem = 21,4px, o teto ganhava
   SEMPRE. A fonte ficava travada no máximo e nunca encolhia, enquanto o cartão
   encolhia junto com a janela. Com R$ 199,99 ainda cabia por pouco; o nono
   caractere de R$ 399,99 passou do limite.

   Agora o contêiner é o cartão, e o termo em `cqi` é o que manda na faixa
   inteira.

   OS NÚMEROS SÃO MEDIDOS NO MODAL DE VERDADE, e não estimados. Uma página de
   teste com a mesma marcação deu 111px de texto onde o modal real dá 174px —
   fonte diferente carregada, provavelmente — e por pouco isso não virou um
   "conserto" que encolhia a fonte sem precisar. Syne 800 é largo:

       "R$ 399,99" a 21,4px  =  174px      ≈ 8,13 × a fonte
       cabe em 148px de área útil (cartão de 170 menos padding e borda)
       logo  fonte ≤ 148 / 8,13  =  18,2px

   A regra antiga pedia 21,4px: transbordava 26px no anual, e 2px até no
   mensal.

   E `cqi` mede a CAIXA DE CONTEÚDO (147px), não o cartão (170px) — errar isso
   custou uma segunda medição, com a fonte caindo a 14,3px sem precisar.
   `11,7cqi` dá 17,2px no cartão real: 8px de folga, e encolhe junto com ele.
   O teto de 1,34rem só é alcançado num cartão largo o bastante para caber. */
.pm-planos{container-type:inline-size;}
/* min-width:0 deixa o cartão encolher no grid; overflow fica VISÍVEL porque
   o selo "Economize" mora acima da borda (top:-9px) e seria decapitado.
   `container-type` aqui é o que faz `cqi` medir o CARTÃO — e ele não recorta
   nada: `inline-size` traz contenção de layout, não de pintura. */
.pm-plano{min-width:0;container-type:inline-size;}
.pm-plano b{display:block;font-family:'Syne',sans-serif;
  font-size:clamp(.78rem,11.7cqi,1.34rem);
  font-weight:800;color:var(--clr-text);letter-spacing:-.6px;line-height:1.15;
  white-space:nowrap;}
/* Sem contêiner de consulta, a reserva mede a tela. Metade do que a grade
   usava, porque agora a referência é o cartão e não a grade. */
@supports not (width: 1cqi){
  .pm-plano b{font-size:clamp(.78rem,5.2vw,1.34rem);}
}
.pm-plano span{display:block;font-size:.64rem;color:rgba(240,240,240,.42);margin-top:3px;
  line-height:1.35;}
.pm-plano i{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#10b981,#059669);
  border-radius:20px;padding:2px 9px;font-size:.58rem;font-weight:700;font-style:normal;color:#fff;white-space:nowrap;}
.pm-plano.ativo span{color:rgba(240,240,240,.62);}

.pm-price{display:flex;align-items:baseline;gap:4px;margin-bottom:20px;}
.pm-price-val{font-family:'Syne',sans-serif;font-size:2.4rem;font-weight:800;color:var(--clr-text);}
.pm-price-period{font-size:.78rem;color:rgba(240,240,240,.35);}
.pm-pix-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px;text-align:center;margin-bottom:16px;}
.pm-qr{width:180px;height:180px;margin:0 auto 12px;background:#fff;border-radius:8px;padding:8px;display:flex;align-items:center;justify-content:center;}
.pm-qr canvas{width:164px!important;height:164px!important;}
.pm-pix-label{font-size:.72rem;color:rgba(240,240,240,.4);margin-bottom:8px;}
.pm-pix-key{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:rgba(240,240,240,.7);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 10px;cursor:pointer;transition:all .15s;word-break:break-all;}
.pm-pix-key:hover{background:rgba(255,255,255,.1);color:var(--clr-text);}
.pm-pix-copied{font-size:.65rem;color:var(--clr-success);margin-top:4px;display:none;}
.pm-stripe-button{width:100%;padding:13px;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;color:#fff;cursor:pointer;box-shadow:0 4px 18px rgba(99,102,241,.35);transition:opacity .15s,transform .15s,box-shadow .15s;}
.pm-stripe-button:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(99,102,241,.45);}
.pm-stripe-button:disabled{opacity:.6;cursor:wait;transform:none;}
.pm-note{font-size:.68rem;color:rgba(240,240,240,.25);text-align:center;line-height:1.6;margin-top:12px;}
.pm-limit-bar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px 14px;margin-bottom:16px;}
.pm-limit-label{font-size:.72rem;color:rgba(240,240,240,.45);margin-bottom:6px;display:flex;justify-content:space-between;}
.pm-limit-label b{color:var(--clr-text);}
.pm-limit-track{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.pm-limit-fill{height:100%;border-radius:3px;background:var(--clr-success);transition:width .4s;}
.pm-limit-fill.warn{background:var(--clr-warning);}
.pm-limit-fill.full{background:var(--clr-danger);}
.t-premium-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(251,191,36,.1));border:1px solid rgba(245,158,11,.3);border-radius:20px;padding:2px 8px;font-size:.62rem;font-weight:700;color:#fbbf24;cursor:pointer;transition:all .15s;margin-left:4px;}
.t-premium-badge:hover{background:rgba(245,158,11,.25);}

/* ═══════════════════════════════════════════════════
   CRM / RECORDS — Módulo financeiro
═══════════════════════════════════════════════════ */

/* ── View Toggle Button ── */
#btn-crm-view{background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.09);}
#btn-crm-view.active{background:rgba(20,184,166,.15);color:#2dd4bf;border-color:rgba(20,184,166,.35);}

/* ── Dashboard Summary Bar — cards soltos, minimalistas ── */
#crm-dashboard{display:none;background:transparent;border-bottom:none;padding:22px 22px 4px;flex-shrink:0;animation:fadeUp .2s ease both;}
#crm-dashboard.visible{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;}
.crm-dash-card{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid var(--clr-border-soft);border-radius:14px;background:var(--clr-bg-card);flex:1;min-width:172px;transition:border-color .2s,transform .2s,background .2s;}
.crm-dash-card:hover{border-color:rgba(99,102,241,.25);transform:translateY(-1px);background:rgba(255,255,255,.03);}
.crm-dash-card-action{flex:0 0 auto;min-width:0;border:none;background:none;padding:0;}
.crm-dash-card-action:hover{transform:none;background:none;}
.crm-dash-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.92rem;flex-shrink:0;}
.crm-dash-label{font-size:.6rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(240,240,240,.32);margin-bottom:3px;}
.crm-dash-value{font-family:'JetBrains Mono',monospace;font-size:1.08rem;font-weight:700;color:var(--clr-text);letter-spacing:-.2px;}
.crm-dash-spacer{flex:1;min-width:4px;}
@media(max-width:900px){#crm-dashboard.visible{gap:10px;}.crm-dash-card{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px);}.crm-dash-spacer{display:none;}.crm-dash-card-action{flex:1 1 100%;}.crm-dash-card-action button{width:100%;justify-content:center;}}

/* ── Table View Container — clean, arejado ── */
#crm-board{display:none;flex:1;overflow:auto;padding:22px;}
#crm-board.visible{display:block;}
.crm-table-wrap{background:var(--clr-bg-card);border:1px solid var(--clr-border-soft);border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.18);}
.crm-table{width:100%;border-collapse:collapse;}
.crm-table thead tr{background:rgba(255,255,255,.025);border-bottom:1px solid var(--clr-border-soft);}
.crm-table th{padding:13px 18px;text-align:left;font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:rgba(240,240,240,.28);white-space:nowrap;}
.crm-table td{padding:15px 18px;border-bottom:1px solid var(--clr-border-faint);font-family:'Inter',sans-serif;font-size:.83rem;color:rgba(240,240,240,.82);vertical-align:middle;}
.crm-table tbody tr:last-child td{border-bottom:none;}
.crm-table tbody tr{transition:background .15s;cursor:default;}
.crm-table tbody tr:hover{background:rgba(255,255,255,.025);}
.crm-table tbody tr.overdue-row{border-left:2px solid var(--clr-danger);}
.crm-table tbody tr.overdue-row td:first-child{padding-left:16px;}

/* ── Record client name cell ── */
.crm-name-cell{display:flex;align-items:center;gap:10px;}
.crm-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0;font-family:'Inter',sans-serif;box-shadow:0 2px 8px rgba(99,102,241,.25);}
.crm-client-name{font-weight:600;color:var(--clr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.crm-client-desc{font-size:.68rem;color:rgba(240,240,240,.3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}

/* ── Value cell ── */
.crm-value-cell{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--clr-text);font-size:.85rem;}

/* ── Status toggle pill ── */
.crm-status-pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 10px 3px 8px;font-family:'Inter',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .2s;user-select:none;border:1px solid transparent;}
.crm-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.crm-status-pill.paid{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#6ee7b7;}
.crm-status-pill.paid .crm-status-dot{background:var(--clr-success);}
.crm-status-pill.pending{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fcd34d;}
.crm-status-pill.pending .crm-status-dot{background:var(--clr-warning);}
.crm-status-pill.overdue{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:var(--clr-danger-light);animation:urgPulse 1.8s ease-in-out infinite;}
.crm-status-pill.overdue .crm-status-dot{background:var(--clr-danger);}
.crm-status-pill:hover{filter:brightness(1.2);}

/* ── Date cell ── */
.crm-date-inp{background:transparent;border:none;outline:none;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:rgba(240,240,240,.55);cursor:pointer;color-scheme:dark;padding:4px 6px;border-radius:5px;transition:background .15s;}
.crm-date-inp:hover{background:rgba(255,255,255,.06);}
.crm-date-inp:focus{background:rgba(99,102,241,.1);color:var(--clr-text);}
.crm-date-overdue{color:var(--clr-danger-light) !important;}

/* ── Table actions ── */
.crm-row-actions{display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.crm-table tbody tr:hover .crm-row-actions{opacity:1;}
.crm-act-btn{width:24px;height:24px;border:none;background:none;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(240,240,240,.3);transition:all .12s;flex-shrink:0;}
.crm-act-btn:hover{background:rgba(255,255,255,.08);color:rgba(240,240,240,.8);}
.crm-act-btn.del:hover{background:rgba(239,68,68,.15);color:var(--clr-danger-light);}
.crm-act-btn svg{width:12px;height:12px;}

/* ── Value editor inline ── */
.crm-value-inp{background:var(--clr-border-faint);border:1px solid var(--clr-indigo-40);border-radius:6px;padding:4px 8px;font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--clr-text);outline:none;width:110px;}

/* ── Add Record Button in table ── */
.crm-add-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--clr-border-soft);cursor:pointer;transition:background .15s;}
.crm-add-row:hover{background:rgba(99,102,241,.05);}
.crm-add-row-icon{width:22px;height:22px;border-radius:6px;border:1.5px dashed rgba(99,102,241,.4);display:flex;align-items:center;justify-content:center;color:rgba(99,102,241,.6);font-size:.85rem;}
.crm-add-row-txt{font-size:.78rem;color:rgba(240,240,240,.3);}

/* ── Convert note badge ── */
.n-convert-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;border:1px solid rgba(20,184,166,.3);background:rgba(20,184,166,.1);color:#2dd4bf;font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.4px;cursor:pointer;transition:all .18s;white-space:nowrap;}
.n-convert-btn:hover{background:rgba(20,184,166,.22);border-color:rgba(20,184,166,.5);}
.n-convert-btn.converted{background:rgba(20,184,166,.06);color:rgba(45,212,191,.5);cursor:default;border-color:rgba(20,184,166,.15);}

/* Presença ao vivo e autodelegação nas notas compartilhadas */
.n-collab-host,.stack-note-collab,.stack-collab-host{display:inline-flex;align-items:center;justify-content:center;
  height:25px;min-width:25px;padding:0 3px;margin-left:auto;border:0;border-radius:16px;
  background:rgba(255,255,255,.055);cursor:pointer;color:rgba(240,240,240,.55);
  transition:background .16s,transform .16s;overflow:visible;white-space:nowrap;}
.n-collab-host[hidden],.stack-note-collab[hidden],.stack-collab-host[hidden]{display:none!important;}
.n-collab-host:hover,.stack-note-collab:hover,.stack-collab-host:hover{background:rgba(255,255,255,.11);transform:translateY(-1px);}
.n-collab-host.empty,.stack-note-collab.empty,.stack-collab-host.empty{border:1px solid rgba(139,92,246,.28);
  background:linear-gradient(145deg,rgba(124,58,237,.2),rgba(79,70,229,.08));
  box-shadow:0 7px 20px rgba(76,29,149,.16),0 0 0 1px rgba(196,181,253,.04) inset;}
.n-collab-host.empty:hover,.stack-note-collab.empty:hover,.stack-collab-host.empty:hover{border-color:rgba(167,139,250,.48);
  background:linear-gradient(145deg,rgba(124,58,237,.31),rgba(79,70,229,.13));
  box-shadow:0 9px 26px rgba(76,29,149,.24);}
.note-collab-empty{font-size:.58rem;line-height:1;opacity:.82;}
/* O clique tem que ser SEMPRE do host, nunca de um filho: o host se redesenha
   inteiro a cada 9 segundos (heartbeat de presença) e sempre que chega foto de
   perfil. Se o botão for apertado num filho e esse filho for recriado antes de
   soltar, o navegador não dispara o click — era isso que fazia "clicar no meio"
   não abrir o menu de delegação. */
[data-note-collab],[data-folder-collab]{cursor:pointer;}
[data-note-collab] > *,[data-folder-collab] > *{pointer-events:none;}
.note-collab-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;
  margin-left:-6px;border:2px solid #17171f;border-radius:50%;overflow:visible;
  color:#fff;font:700 .54rem 'Inter',sans-serif;box-shadow:0 2px 7px rgba(0,0,0,.35);}
.note-collab-avatar:first-child{margin-left:0;}
.note-collab-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.note-collab-avatar.live{box-shadow:0 0 0 1.5px #2dd4bf,0 0 10px rgba(45,212,191,.4);}
.note-collab-avatar.live::before{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(45,212,191,.45);animation:noteCollabPulse 1.7s ease-out infinite;}
.note-collab-avatar.delegated::after{content:'✓';position:absolute;right:-4px;bottom:-3px;z-index:2;
  width:10px;height:10px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#8b5cf6;border:1.5px solid #17171f;color:#fff;font-size:.42rem;font-weight:900;}
@keyframes noteCollabPulse{0%{opacity:.9;transform:scale(.88)}80%,100%{opacity:0;transform:scale(1.22)}}
.note-collab-more{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  margin-left:-5px;border:2px solid #17171f;border-radius:50%;background:#30303b;
  color:rgba(255,255,255,.7);font:700 .52rem 'Inter',sans-serif;}
.stack-note-collab{height:24px;min-width:24px;margin-left:0;flex-shrink:0;}
.stack-note-collab .note-collab-avatar{width:19px!important;height:19px!important;}
/* Cabeçalho da pasta: o botão divide a linha com título, contador e o toggle,
   então nasce menor e sem o margin-left:auto que empurraria os outros. */
.stack-collab-host{height:22px;min-width:22px;margin-left:0;flex-shrink:0;}
.stack-collab-host .note-collab-avatar{width:17px!important;height:17px!important;}
.stack-collab-host .note-collab-more{width:18px;height:18px;font-size:.48rem;}
.note-collab-pop{position:fixed;z-index:7200;width:min(292px,calc(100vw - 16px));padding:13px;
  border:1px solid rgba(255,255,255,.11);border-radius:14px;background:#17171f;
  box-shadow:0 20px 55px rgba(0,0,0,.72);animation:fadeUp .16s ease both;}
.note-collab-pop-title{font:700 .78rem 'Syne',sans-serif;color:#f4f4f7;margin:1px 2px 10px;}
.note-collab-pop-list{display:flex;flex-direction:column;gap:5px;max-height:210px;overflow:auto;}
.note-collab-pop-person{display:flex;align-items:center;gap:9px;padding:7px;border-radius:9px;background:rgba(255,255,255,.035);}
.note-collab-pop-person>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.note-collab-pop-person b{font-size:.72rem;color:rgba(240,240,240,.82);overflow:hidden;text-overflow:ellipsis;}
.note-collab-pop-person i{font-style:normal;font-size:.61rem;color:#5eead4;}
.note-collab-pop-empty{padding:10px 7px;color:rgba(240,240,240,.36);font-size:.69rem;line-height:1.5;}
.note-collab-delegate{width:100%;margin-top:10px;padding:9px;border-radius:9px;
  border:1px solid rgba(139,92,246,.32);background:rgba(139,92,246,.12);color:#c4b5fd;
  font:650 .72rem 'Inter',sans-serif;cursor:pointer;}
.note-collab-delegate:hover{background:rgba(139,92,246,.22);}
.note-collab-delegate.active{border-color:rgba(45,212,191,.3);background:rgba(20,184,166,.1);color:#5eead4;}
.note-collab-delegate:disabled{opacity:.55;cursor:wait;}
@media(max-width:560px){
  .n-collab-host{min-width:30px;height:30px}.n-collab-host .note-collab-avatar:nth-of-type(n+3){display:none;}
  .note-collab-pop{width:calc(100vw - 16px);}
}
@media(prefers-reduced-motion:reduce){.note-collab-avatar.live::before{animation:none;}}

/* ── CRM Record Modal ── */
.crm-modal-row{display:flex;gap:10px;margin-bottom:14px;}
.crm-modal-col{flex:1;min-width:0;}
.crm-modal-lbl{display:block;font-size:.62rem;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:rgba(240,240,240,.35);margin-bottom:6px;}
.crm-client-modal label.m-lbl{display:block;}
.crm-modal-inp{width:100%;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:9px 12px;font-family:'Inter',sans-serif;font-size:.85rem;color:var(--clr-text);outline:none;transition:border-color .18s;color-scheme:dark;}
.crm-modal-inp:focus{border-color:rgba(99,102,241,.45);box-shadow:0 0 0 3px rgba(99,102,241,.07);}
.crm-modal-inp::placeholder{color:rgba(240,240,240,.18);}
.crm-lookup-row{display:flex;gap:8px;align-items:stretch;}
.crm-lookup-row .m-inp{margin-bottom:0;min-width:0;}
.crm-lookup-btn{flex:0 0 auto;border:1px solid rgba(99,102,241,.35);background:rgba(99,102,241,.11);color:#c7d2fe;border-radius:8px;padding:0 12px;font:600 .72rem 'Inter',sans-serif;cursor:pointer;white-space:nowrap;}
.crm-lookup-btn:hover:not(:disabled){background:rgba(99,102,241,.2);}
.crm-lookup-btn:disabled{opacity:.42;cursor:not-allowed;}
.crm-lookup-feedback{min-height:19px;padding:4px 2px 0;margin-bottom:8px;font-size:.7rem;line-height:1.4;color:rgba(240,240,240,.42);}
.crm-lookup-feedback.success{color:#6ee7b7;}
.crm-lookup-feedback.error{color:#fca5a5;}
.crm-lookup-feedback.loading{color:#a5b4fc;}
.crm-client-modal{width:min(680px,94vw);max-width:680px;max-height:min(90dvh,920px);
  padding:0 28px 24px;overflow:auto;border-radius:20px;
  background:
    radial-gradient(620px 250px at 8% -5%,rgba(99,102,241,.16),transparent 62%),
    linear-gradient(180deg,#15151d 0%,#101014 38%);}
.crm-client-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:13px;
  margin:0 -28px 18px;padding:22px 28px 18px;
  background:linear-gradient(180deg,rgba(21,21,29,.98),rgba(21,21,29,.94));
  border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(12px);}
.crm-client-head .m-h1{margin:0;font-size:1.08rem;}
.crm-client-head .m-sub{margin:3px 0 0;}
.crm-client-head-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;font:800 1.2rem 'Syne',sans-serif;color:#fff;
  background:linear-gradient(135deg,#818cf8,#4f46e5);box-shadow:0 9px 24px rgba(79,70,229,.28);}
.crm-client-private{margin-left:auto;align-self:flex-start;padding:5px 9px;border-radius:20px;
  border:1px solid rgba(110,231,183,.18);background:rgba(16,185,129,.08);
  color:rgba(167,243,208,.7);font-size:.62rem;white-space:nowrap;}
.crm-client-section-title{display:flex;align-items:center;gap:8px;margin:21px 0 13px;
  color:rgba(240,240,240,.68);font-size:.68rem;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;}
.crm-client-section-title::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent);}
.crm-client-section-title span{display:inline-flex;width:25px;height:20px;align-items:center;
  justify-content:center;border-radius:6px;background:rgba(99,102,241,.13);color:#a5b4fc;
  font:700 .58rem 'JetBrains Mono',monospace;letter-spacing:0;}
.crm-modal-inp-spaced{margin-bottom:4px;}
.crm-client-modal .m-inp,.crm-client-modal .crm-modal-inp{background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.1);border-radius:10px;transition:border-color .18s,box-shadow .18s,background .18s;}
.crm-client-modal .m-inp:focus,.crm-client-modal .crm-modal-inp:focus{background:rgba(99,102,241,.055);
  border-color:rgba(129,140,248,.58);box-shadow:0 0 0 3px rgba(99,102,241,.11);}
.crm-client-modal .m-confirm{box-shadow:0 8px 24px rgba(79,70,229,.28);}
@media(max-width:620px){
  .crm-client-modal{width:100vw;max-width:none;max-height:92dvh;border-radius:20px 20px 0 0;
    position:fixed;left:0;bottom:0;}
  .crm-client-modal .crm-modal-row{flex-direction:column;}
  .crm-client-private{display:none;}
}
.crm-status-select{display:flex;gap:8px;margin-bottom:14px;}
.crm-status-opt{flex:1;padding:9px 8px;border-radius:9px;border:1.5px solid transparent;cursor:pointer;text-align:center;font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;transition:all .18s;user-select:none;}
.crm-status-opt.sel-paid{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#6ee7b7;}
.crm-status-opt.sel-pending{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#fcd34d;}
.crm-status-opt:not(.sel-paid):not(.sel-pending){background:var(--clr-border-faint);border-color:rgba(255,255,255,.08);color:rgba(240,240,240,.4);}

/* ── Empty CRM state ── */
.crm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:14px;text-align:center;}
.crm-empty-icon{font-size:2.2rem;opacity:.3;}
.crm-empty-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:rgba(240,240,240,.35);}
.crm-empty-desc{font-size:.76rem;color:rgba(240,240,240,.22);max-width:280px;line-height:1.6;}
.crm-empty-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,.15);border:1px solid var(--clr-indigo-30);color:var(--clr-indigo-light);border-radius:9px;padding:9px 16px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .18s;}
.crm-empty-btn:hover{background:rgba(99,102,241,.28);}

/* ── Converted note chip in note card ── */
.n-crm-chip{display:inline-flex;align-items:center;gap:3px;border-radius:20px;padding:2px 7px;font-size:.56rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.22);color:#2dd4bf;}

/* ── Note Type Picker ── */
/* ── Escolher o tipo do que vai ser criado ────────────────────────────
   Eram quatro colunas numa linha so: com o quarto card, cada descricao
   quebrava em cinco linhas e os cartoes viravam tiras verticais de texto.
   Duas por duas devolve largura para a frase caber em duas linhas, que e o
   que se le de relance.

   E os icones sao SVG, e nao emoji: cada sistema desenha o seu — no Windows
   a pasta sai amarela e chapada, no Mac sai outra —, e um dos quatro sempre
   destoava dos outros tres. Traco desenhado aqui herda a cor do card. */
.note-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 4px;}
.note-type-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;padding:16px 16px 15px;border-radius:14px;text-align:left;cursor:pointer;
  border:1px solid var(--clr-border);background:var(--clr-bg-card);
  transition:border-color .18s,background .18s,transform .18s;}
/* O filete de cor no topo e o que separa os quatro de relance, antes de
   qualquer leitura — e cada tipo tem o seu tom, o mesmo do resto do app. */
.note-type-card::before{content:'';position:absolute;left:16px;right:16px;top:0;height:2px;
  border-radius:0 0 3px 3px;background:var(--tipo-cor,#6366f1);opacity:.55;
  transition:opacity .18s;}
.note-type-card[data-cor="pessoal"]{--tipo-cor:#6366f1;}
.note-type-card[data-cor="cliente"]{--tipo-cor:#0f7a52;}
.note-type-card[data-cor="form"]{--tipo-cor:#0e7490;}
.note-type-card[data-cor="pasta"]{--tipo-cor:#c98a04;}
.note-type-card:hover{border-color:var(--tipo-cor,#6366f1);transform:translateY(-2px);
  background:rgba(255,255,255,.035);}
.note-type-card:hover::before{opacity:1;}
.note-type-icon{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-bottom:9px;border-radius:11px;
  background:color-mix(in srgb,var(--tipo-cor,#6366f1) 16%,transparent);
  color:var(--tipo-cor,#6366f1);}
.note-type-icon svg{width:20px;height:20px;display:block;}
.note-type-title{font-size:.9rem;font-weight:700;color:var(--clr-text);letter-spacing:-.2px;}
.note-type-desc{font-size:.73rem;color:rgba(240,240,240,.42);line-height:1.5;}
/* O selo fica no CANTO, e nao empurrando o texto: com ele no fluxo, dois
   cards ficavam mais altos que os outros dois e a grade saia torta. */
.note-type-badge{position:absolute;top:12px;right:12px;border-radius:20px;padding:2px 8px;
  font-size:.58rem;font-weight:800;letter-spacing:.7px;
  background:rgba(15,122,82,.18);border:1px solid rgba(15,122,82,.4);color:#4ade80;}
.note-type-badge.novo{background:rgba(14,116,144,.18);border-color:rgba(14,116,144,.45);
  color:#38bdf8;}
@media(max-width:520px){.note-type-grid{grid-template-columns:1fr;}}
#pick-client:hover{border-color:rgba(20,184,166,.5);background:rgba(20,184,166,.04);}

/* ── Back button in modal ── */
.m-back-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.m-back-btn{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:.75rem;color:rgba(240,240,240,.35);padding:4px 8px;border-radius:6px;transition:all .15s;}
.m-back-btn:hover{background:rgba(255,255,255,.06);color:rgba(240,240,240,.7);}

/* ── Client Note Card — extra UI no board ── */
.note.is-client-note{width:280px;}
/* Client block is always visible, not hidden by expand-area */
.n-client-block{display:block !important;}
/* Reduce min textarea height for client notes so value block shows */
.note.is-client-note .n-text{min-height:18px !important;}
/* Make chip visible and styled */
.n-crm-chip{display:inline-flex !important;align-items:center;gap:3px;border-radius:20px;padding:2px 7px;font-size:.56rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.22);color:#2dd4bf;white-space:nowrap;}
/* Client block sub-elements */
.n-client-value{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 8px;gap:8px;}
.n-client-val-num{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;color:var(--clr-text);}
.n-client-val-num.paid{color:#6ee7b7;}
.n-client-val-num.overdue{color:var(--clr-danger-light);}
.n-client-status-toggle{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:3px 9px 3px 7px;font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .2s;border:1px solid transparent;user-select:none;}
.n-client-status-toggle.paid{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#6ee7b7;}
.n-client-status-toggle.pending{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fcd34d;}
.n-client-status-toggle.overdue{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:var(--clr-danger-light);animation:urgPulse 1.8s ease-in-out infinite;}
.n-client-status-toggle:hover{filter:brightness(1.2);}
.n-client-due{padding:0 10px 8px;font-family:'JetBrains Mono',monospace;font-size:.6rem;color:rgba(240,240,240,.3);}
.n-client-due.overdue{color:var(--clr-danger-light);}
.n-client-val-num{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;color:var(--clr-text);}
.n-client-val-num.paid{color:#6ee7b7;}
.n-client-val-num.overdue{color:var(--clr-danger-light);}
.n-client-status-toggle{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:3px 9px 3px 7px;font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .2s;border:1px solid transparent;user-select:none;}
.n-client-status-toggle.paid{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#6ee7b7;}
.n-client-status-toggle.pending{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25);color:#fcd34d;}
.n-client-status-toggle.overdue{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:var(--clr-danger-light);animation:urgPulse 1.8s ease-in-out infinite;}
.n-client-status-toggle:hover{filter:brightness(1.2);}
.n-client-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.n-client-due{padding:0 10px 8px;font-family:'JetBrains Mono',monospace;font-size:.6rem;color:rgba(240,240,240,.3);}
.n-client-due.overdue{color:var(--clr-danger-light);}
/* Client block is always visible, not inside expand-area */
.n-client-block{display:block !important;}

/* ── CRM Table toolbar with clear button ── */
.crm-table-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.crm-toolbar-title{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--clr-text);letter-spacing:-.2px;}
.crm-count-badge{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:rgba(240,240,240,.35);background:var(--clr-border-faint);border-radius:20px;padding:2px 9px;}
.crm-table-toolbar-spacer{flex:1;}
.crm-clear-btn{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:9px;border:1px solid rgba(239,68,68,.2);background:rgba(239,68,68,.06);color:var(--clr-danger-light);font-family:'Inter',sans-serif;font-size:.73rem;font-weight:600;cursor:pointer;transition:all .18s;}
.crm-clear-btn:hover{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.38);}
.crm-clear-btn svg{width:12px;height:12px;}

/* ── CRM charts (donut + barras mensais) ─────────────────────────────── */
#crm-charts-row{display:none;gap:12px;padding:0 22px 22px;flex-wrap:wrap;}
#crm-charts-row.visible{display:flex;}
.crm-chart-panel{background:var(--clr-bg-card);border:1px solid var(--clr-border-soft);border-radius:16px;padding:16px 18px;flex:1;min-width:220px;transition:border-color .2s;}
.crm-chart-panel:hover{border-color:rgba(255,255,255,.14);}
.crm-chart-panel-wide{flex:2;min-width:280px;}
.crm-chart-title{font-family:'Syne',sans-serif;font-size:.78rem;font-weight:700;color:var(--clr-text-dim);margin-bottom:12px;letter-spacing:-.1px;}
.crm-chart-empty{font-size:.75rem;color:var(--clr-text-faint);padding:20px 0;text-align:center;}
.crm-chart-donut-wrap{display:flex;align-items:center;gap:16px;}
.crm-donut-svg{flex-shrink:0;}
.crm-donut-legend{display:flex;flex-direction:column;gap:7px;}
.crm-donut-leg-item{font-size:.72rem;color:var(--clr-text-dim);display:flex;align-items:center;gap:6px;}
.crm-donut-leg-item b{color:var(--clr-text);font-family:'JetBrains Mono',monospace;font-weight:600;}
.crm-donut-leg-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.crm-chart-bars-host{min-height:96px;display:flex;align-items:flex-end;}
.crm-bars-wrap{display:flex;align-items:flex-end;gap:10px;width:100%;height:88px;padding-top:8px;}
.crm-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;}
.crm-bar{width:100%;max-width:26px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--clr-indigo-light),var(--clr-indigo));transition:height .3s ease;}
.crm-bar-lbl{font-size:.62rem;color:var(--clr-text-faint);text-transform:capitalize;}

/* ── Alertas de atraso: pulso contínuo + flash na transição ──────────── */
@keyframes overduePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45);}50%{box-shadow:0 0 0 6px rgba(239,68,68,0);}}
@keyframes overdueFlash{0%{background:rgba(239,68,68,.55);}100%{background:transparent;}}
.note.overdue{animation:overduePulse 1.8s ease-in-out infinite;}
.crm-table tbody tr.overdue-row{animation:overduePulse 2.2s ease-in-out infinite;}
.crm-status-pill.overdue{animation:overduePulse 1.6s ease-in-out infinite;}
.note.overdue-flash,.crm-table tbody tr.overdue-flash{animation:overdueFlash 1.1s ease-out 2;}

/* ── Busca de clientes ── */
.crm-search-wrap{position:relative;display:flex;align-items:center;}
.crm-search-wrap svg{position:absolute;left:9px;width:13px;height:13px;color:rgba(240,240,240,.3);pointer-events:none;}
.crm-search-inp{background:var(--clr-bg-card);border:1px solid var(--clr-border-soft);border-radius:8px;padding:6px 10px 6px 28px;font-family:'Inter',sans-serif;font-size:.75rem;color:var(--clr-text);outline:none;width:160px;transition:width .2s ease,border-color .15s;}
.crm-search-inp:focus{width:200px;border-color:var(--clr-indigo-40);}
.crm-search-inp::placeholder{color:rgba(240,240,240,.25);}

/* ── Cabecalhos ordenaveis ── */
.crm-th-sort{cursor:pointer;user-select:none;transition:color .15s;}
.crm-th-sort:hover{color:var(--clr-text);}
.crm-sort-arrow{display:inline-block;width:9px;margin-left:3px;opacity:0;transition:opacity .15s;}
.crm-th-sort.sorted .crm-sort-arrow{opacity:1;}
.crm-th-sort.sorted .crm-sort-arrow::after{content:'▲';font-size:.55rem;}
.crm-th-sort.sorted.desc .crm-sort-arrow::after{content:'▼';}

/* ── Entrada animada das linhas ── */
@keyframes crmRowIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.crm-table tbody tr.crm-row-in{animation:crmRowIn .28s ease both;}

/* ── Celula de vencimento (clique para editar, igual ao valor) ── */
.crm-date-cell{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:rgba(240,240,240,.65);cursor:pointer;padding:4px 6px;border-radius:5px;transition:background .15s;text-transform:capitalize;}
.crm-date-cell:hover{background:var(--clr-border-faint);}
.crm-date-cell.crm-date-overdue{color:var(--clr-danger-light);}
.crm-date-empty{color:rgba(240,240,240,.25);font-style:italic;}
.crm-date-inp-edit{background:var(--clr-border-faint);border:1px solid var(--clr-indigo-40);border-radius:6px;padding:4px 8px;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--clr-text);outline:none;color-scheme:dark;}

/* ── Graficos animados ── */
.crm-donut-svg circle{transition:stroke-dasharray .8s cubic-bezier(.16,1,.3,1);}
.crm-donut-visual{position:relative;flex-shrink:0;}
.crm-donut-center{position:absolute;left:0;top:0;width:120px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.crm-donut-center b{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--clr-text);}
.crm-donut-center span{font-size:.52rem;color:rgba(240,240,240,.35);text-transform:uppercase;letter-spacing:.5px;margin-top:1px;}
.crm-donut-legend .crm-donut-leg-item{opacity:0;animation:fadeUp .3s ease forwards;}
.crm-donut-legend .crm-donut-leg-item:nth-child(1){animation-delay:.15s;}
.crm-donut-legend .crm-donut-leg-item:nth-child(2){animation-delay:.25s;}
.crm-donut-legend .crm-donut-leg-item:nth-child(3){animation-delay:.35s;}

.crm-bar{transition:height .7s cubic-bezier(.16,1,.3,1);position:relative;cursor:default;}
.crm-bar.crm-bar-current{background:linear-gradient(180deg,#5eead4,var(--clr-teal));}
.crm-bar-col{position:relative;}
.crm-bar-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-4px) scale(.9);background:#161616;border:1px solid var(--clr-border-strong);border-radius:6px;padding:3px 7px;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--clr-text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;margin-bottom:4px;z-index:5;}
.crm-bar-col:hover .crm-bar-tooltip{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
.crm-bar-col:hover .crm-bar{filter:brightness(1.15);}
.crm-bar-lbl.crm-bar-lbl-current{color:var(--clr-teal);font-weight:700;}

/* ── Checklist da nota ── */
.n-cl-badge{display:none;align-items:center;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:600;color:rgba(240,240,240,.4);background:rgba(255,255,255,.06);border-radius:20px;padding:2px 7px;}
.n-cl-badge.complete{color:#6ee7b7;background:rgba(16,185,129,.14);}
.n-checklist-wrap{padding:8px 12px 10px;}
.n-checklist-head{display:flex;align-items:center;justify-content:space-between;font-size:.6rem;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:6px;}
.n-checklist-add{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);width:16px;height:16px;border-radius:5px;font-size:.72rem;line-height:1;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.n-checklist-add:hover{background:var(--clr-indigo-20);border-color:var(--clr-indigo-40);color:var(--clr-indigo-light);}
.n-checklist-list{display:flex;flex-direction:column;gap:2px;}
.n-cl-item{display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:6px;transition:background .12s;}
.n-cl-item:hover{background:rgba(255,255,255,.04);}
.n-cl-item:hover .n-cl-del{opacity:1;}
.n-cl-check{width:13px;height:13px;flex-shrink:0;accent-color:var(--clr-indigo);cursor:pointer;}
/* `flex:none`, e NÃO `flex:1`. O pai `.n-cl-corpo` é uma COLUNA, e numa
   coluna o eixo principal é a altura: `flex:1` vira `flex-basis:0%` na
   ALTURA e passa por cima do `height` que a medição calcula. O texto de duas
   linhas existia, com height:77px aplicado, e renderizava 22px — cortado no
   meio, sem rolagem e sem nada indicando que faltava.
   Conferido no navegador: trocar para `flex:none` levou o elemento de 22px
   para os 77px do conteúdo. */
.n-cl-text{flex:none;width:100%;min-width:0;background:transparent;border:none;outline:none;font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(255,255,255,.75);padding:2px 0;resize:none;overflow:hidden;box-sizing:border-box;}
.n-cl-text::placeholder{color:rgba(255,255,255,.2);}
.n-cl-item.done .n-cl-text{color:rgba(255,255,255,.3);text-decoration:line-through;}
.n-cl-del{background:none;border:none;color:rgba(255,255,255,.25);width:16px;height:16px;flex-shrink:0;cursor:pointer;opacity:0;transition:opacity .12s,color .12s;display:flex;align-items:center;justify-content:center;}
.n-cl-del:hover{color:var(--clr-danger-light);}
/* ── AS FICHAS DE LINK DO CORPO DA NOTA ──────────────────────────────────
   Uma fila embaixo do texto, com o nome do lugar para onde cada uma leva. Não
   é decoração: o corpo é um textarea e não pode ter link dentro, e o
   placeholder promete "links" desde sempre.

   `word-break` e a largura máxima existem porque endereço de sistema público é
   longo e não tem espaço para quebrar: sem o teto, uma ficha só empurraria a
   largura da nota inteira. */
.n-links{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.n-link-chip{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:3px 9px 3px 7px;border-radius:20px;text-decoration:none;
  background:var(--clr-indigo-10);border:1px solid rgba(99,102,241,.24);
  color:rgba(199,210,254,.92);font-family:'Inter',sans-serif;font-size:.68rem;
  font-weight:500;transition:background .14s,border-color .14s;
}
.n-link-chip:hover{background:var(--clr-indigo-20);border-color:rgba(99,102,241,.45);}
.n-link-chip svg{width:11px;height:11px;flex-shrink:0;opacity:.8;}
.n-link-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── O LINK DO ITEM ──────────────────────────────────────────────────────
   Fica SEMPRE visível, ao contrário do ✕ e do ⋯, que só aparecem com o mouse
   em cima: aqueles são administração do item, e este é o conteúdo dele. Um
   link que só existe quando o ponteiro passa por perto é um link que ninguém
   sabe que está lá — e o item foi escrito justamente para guardá-lo. */
.n-cl-link{width:17px;height:17px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;border-radius:5px;color:var(--clr-indigo-light);
  opacity:.75;transition:opacity .12s,background .12s;text-decoration:none;}
.n-cl-link svg{width:13px;height:13px;}
.n-cl-link:hover{opacity:1;background:var(--clr-indigo-20);}
.n-cl-item.done .n-cl-link{opacity:.35;}
.n-cl-del svg{width:10px;height:10px;}

/* ── Documentos anexados ao cliente (modal CRM) ── */
.crm-doc-list{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;}
.crm-doc-item{display:flex;align-items:center;gap:8px;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:6px 9px;}
.crm-doc-name{flex:1;min-width:0;font-size:.76rem;color:var(--clr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crm-doc-size{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:rgba(240,240,240,.3);flex-shrink:0;}
.crm-doc-del{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.crm-doc-del:hover{color:var(--clr-danger-light);}
.crm-doc-del svg{width:10px;height:10px;}
.crm-doc-add{display:block;width:100%;padding:9px;background:var(--clr-border-soft);border:1px dashed rgba(255,255,255,.15);border-radius:8px;font-family:'Inter',sans-serif;font-size:.75rem;color:rgba(240,240,240,.5);text-align:center;cursor:pointer;margin-bottom:14px;transition:all .15s;}
.crm-doc-add:hover{border-color:var(--clr-indigo-40);color:var(--clr-indigo-light);}
.crm-doc-add input{display:none;}
.crm-doc-count{font-size:.6rem;color:rgba(240,240,240,.35);font-weight:500;cursor:pointer;}
.crm-doc-count:hover{color:var(--clr-indigo-light);}

/* ── Visualizador de documento do cliente (imagem/PDF) ── */
.crm-doc-viewer-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(3px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:30px;}
.crm-doc-viewer{width:min(1020px,100%);height:min(92dvh,1150px);background:#141414;border:1px solid var(--clr-border-strong);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.crm-doc-viewer-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--clr-border);flex-shrink:0;}
.crm-doc-viewer-name{flex:1;min-width:0;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;color:var(--clr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crm-doc-viewer-dl{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--clr-border-faint);color:var(--clr-text);text-decoration:none;font-size:.9rem;flex-shrink:0;}
.crm-doc-viewer-dl:hover{background:var(--clr-indigo-20);}
.crm-doc-viewer-close{background:var(--clr-border-faint);border:none;color:var(--clr-text);width:26px;height:26px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.crm-doc-viewer-close svg{width:12px;height:12px;}
.crm-doc-viewer-close:hover{background:rgba(239,68,68,.2);color:var(--clr-danger-light);}
.crm-doc-viewer-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px;}
/* justify-content:flex-start é OBRIGATÓRIO aqui, e não estética.
   O corpo é um flex container com justify-content:center — certo para uma
   imagem, que fica no meio. Com flex-direction:column esse center passa a
   valer no eixo VERTICAL e, quando o conteúdo é mais alto que o container (um
   currículo de seis páginas sempre é), o começo dele fica FORA da área
   rolável: não há como rolar até o topo, e o documento parecia começar no meio
   de uma frase, com a primeira linha cortada ao meio pelo cabeçalho.
   O mesmo já tinha mordido no visualizador de anexos da nota. */
.crm-doc-viewer-body-pdf{flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;gap:10px;padding:14px;}
.crm-doc-viewer-loading{color:rgba(240,240,240,.4);font-size:.8rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.crm-doc-viewer-loading a{color:var(--clr-indigo-light);}

/* ── Videochamada ── */
.chat-call-btn{background:none;border:none;cursor:pointer;color:rgba(45,212,191,.7);font-size:.85rem;padding:0 3px;transition:color .15s;flex-shrink:0;}
.chat-call-btn:hover{color:var(--clr-teal);}
@keyframes callInvitePulse{0%,100%{background:rgba(20,184,166,.12);}50%{background:rgba(20,184,166,.28);}}
.chat-call-invite{display:none;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;font-family:'Inter',sans-serif;font-size:.72rem;color:#5eead4;animation:callInvitePulse 1.6s ease-in-out infinite;flex-shrink:0;}
.chat-call-invite .chat-call-join{background:var(--clr-teal);border:none;color:#04201c;font-weight:700;font-size:.68rem;padding:3px 10px;border-radius:20px;cursor:pointer;flex-shrink:0;}

/* Janela flutuante, arrastável e redimensionável — não toma a tela toda,
   pra dar pra ver/usar o workspace por trás dela ao mesmo tempo. */
#call-overlay{position:fixed;left:auto;top:auto;right:20px;bottom:20px;width:340px;height:260px;min-width:220px;min-height:160px;max-width:90vw;max-height:80dvh;background:rgba(12,12,12,.97);border:1px solid var(--clr-border-strong);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.6);z-index:3000;display:flex;flex-direction:column;overflow:hidden;resize:both;}
.call-header{display:flex;align-items:center;justify-content:center;padding:7px 10px;flex-shrink:0;cursor:grab;background:var(--clr-bg-card);border-bottom:1px solid var(--clr-border);user-select:none;}
.call-header:active{cursor:grabbing;}
.call-title{font-family:'Syne',sans-serif;font-size:.74rem;font-weight:700;color:var(--clr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Mosaico: por padrao todo mundo (camera ou tela compartilhada) fica do
   mesmo tamanho de miniatura — nunca uma pessoa/tela toma a janela toda
   sozinha. Expandir uma tela especifica e escolha do usuario (botao ⤢),
   nunca automatico. */
.call-grid{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:6px;overflow:auto;padding:6px;min-height:0;}
.call-tile{position:relative;background:#000;border-radius:8px;overflow:hidden;border:1px solid var(--clr-border-strong);flex:0 0 auto;width:min(150px,100%);height:112px;transition:width .25s cubic-bezier(.16,1,.3,1),height .25s cubic-bezier(.16,1,.3,1);}
.call-grid.has-focus .call-tile{width:84px;height:60px;order:1;}
.call-grid.has-focus .call-tile.focused{order:-1;flex:1 1 100%;width:100%;height:min(65%,320px);}
.call-tile video{width:100%;height:100%;object-fit:cover;display:block;}
.call-tile-label{position:absolute;left:6px;bottom:4px;background:rgba(0,0,0,.55);color:#fff;font-size:.58rem;font-family:'Inter',sans-serif;padding:2px 7px;border-radius:20px;}
.call-tile-expand{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:5px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;font-size:.6rem;padding:0;}
.call-tile:hover .call-tile-expand{opacity:1;}
.call-tile.focused .call-tile-expand{opacity:1;background:rgba(99,102,241,.5);}
.call-controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px;flex-shrink:0;border-top:1px solid var(--clr-border);}
.call-ctrl-btn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--clr-text);font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.call-ctrl-btn:hover{background:rgba(255,255,255,.16);}
.call-ctrl-btn.off{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.4);}
.call-ctrl-btn.active{background:rgba(99,102,241,.3);border-color:rgba(99,102,241,.5);color:#c7d2fe;}
.call-ctrl-btn.leave{background:var(--clr-danger);border-color:var(--clr-danger);transform:rotate(135deg);}
.call-ctrl-btn.leave:hover{background:#dc2626;}

/* ── Painel de próximos eventos ── */
#events-panel{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:1200;width:min(420px,94vw);max-height:76dvh;overflow:auto;background:#111;border:1px solid var(--clr-border-strong);border-radius:14px;padding:14px 16px;box-shadow:0 20px 60px rgba(0,0,0,.8);display:none;animation:fadeUp .18s cubic-bezier(.16,1,.3,1) both;}
#events-panel.open{display:block;}
.events-panel-title{font-family:'Syne',sans-serif;font-size:.86rem;font-weight:700;color:var(--clr-text);display:flex;flex-direction:column;gap:2px;margin-bottom:10px;}
.events-panel-sub{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:400;color:rgba(240,240,240,.35);}
.events-empty{text-align:center;padding:24px 10px;font-size:.78rem;color:rgba(240,240,240,.35);}
.events-item{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;cursor:pointer;transition:background .12s;}
.events-item:hover{background:rgba(255,255,255,.05);}
.events-item-icon{font-size:1.05rem;flex-shrink:0;}
.events-item-body{flex:1;min-width:0;}
.events-item-title{font-size:.8rem;font-weight:600;color:var(--clr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.events-item-sub{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:rgba(240,240,240,.35);margin-top:1px;}

/* ── Abas do painel pessoal (Eventos / Orçamento / Despesas / Tarefas) ── */
.events-tabs{display:flex;gap:4px;margin-bottom:12px;background:var(--clr-border-faint);border-radius:9px;padding:3px;}
.events-tab{flex:1;background:none;border:none;padding:6px 4px;border-radius:7px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;color:rgba(240,240,240,.4);cursor:pointer;transition:all .15s;white-space:nowrap;}
.events-tab.active{background:var(--clr-indigo-20);color:var(--clr-indigo-light);}
.events-tab-body{display:none;}
.events-tab-body.active{display:block;}

.events-ics-upload{display:block;text-align:center;padding:8px;margin-bottom:10px;background:var(--clr-border-faint);border:1px dashed rgba(255,255,255,.15);border-radius:8px;font-size:.72rem;color:rgba(240,240,240,.5);cursor:pointer;transition:all .15s;}
.events-ics-upload:hover{border-color:var(--clr-indigo-40);color:var(--clr-indigo-light);}
.events-ics-upload input{display:none;}

.budget-set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-size:.78rem;color:rgba(240,240,240,.6);}
.budget-set-row input{width:110px;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:6px 9px;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--clr-text);outline:none;text-align:right;}
.budget-summary{display:flex;flex-direction:column;gap:8px;}
.budget-row{display:flex;justify-content:space-between;font-size:.76rem;color:rgba(240,240,240,.6);}
.budget-row b{color:var(--clr-text);font-family:'JetBrains Mono',monospace;}
.budget-bar-track{height:8px;background:var(--clr-border-faint);border-radius:20px;overflow:hidden;margin:4px 0;}
.budget-bar-fill{height:100%;background:linear-gradient(90deg,var(--clr-indigo),var(--clr-teal));border-radius:20px;transition:width .4s ease;}
.budget-bar-fill.over{background:linear-gradient(90deg,#f59e0b,var(--clr-danger));}

.expense-add-row{display:flex;gap:6px;margin-bottom:12px;}
.expense-add-row input[type=text]{flex:1;min-width:0;}
.expense-add-row input[type=number]{width:80px;}
.expense-add-row input{background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:7px 9px;font-family:'Inter',sans-serif;font-size:.76rem;color:var(--clr-text);outline:none;}
.expense-add-row button{width:32px;background:var(--clr-indigo-20);border:1px solid var(--clr-indigo-30);border-radius:7px;color:var(--clr-indigo-light);font-size:1rem;cursor:pointer;flex-shrink:0;}
.expense-item{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--clr-border-faint);font-size:.78rem;}
.expense-item:last-child{border-bottom:none;}
.expense-item-desc{flex:1;min-width:0;color:rgba(240,240,240,.75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.expense-item-val{font-family:'JetBrains Mono',monospace;color:var(--clr-danger-light);font-weight:600;flex-shrink:0;}
.expense-item-del{background:none;border:none;color:rgba(240,240,240,.25);cursor:pointer;flex-shrink:0;width:16px;height:16px;}
.expense-item-del:hover{color:var(--clr-danger-light);}
.expenses-empty,.mtasks-empty{text-align:center;padding:16px 0;font-size:.75rem;color:rgba(240,240,240,.3);}

.events-mtask-add{width:100%;margin-top:8px;padding:8px;background:var(--clr-border-faint);border:1px dashed rgba(255,255,255,.15);border-radius:8px;font-size:.74rem;color:rgba(240,240,240,.5);cursor:pointer;transition:all .15s;}
.events-mtask-add:hover{border-color:var(--clr-indigo-40);color:var(--clr-indigo-light);}
.mtask-item{display:flex;align-items:center;gap:8px;padding:5px 2px;}
.mtask-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--clr-indigo);flex-shrink:0;}
.mtask-item input[type=text]{flex:1;min-width:0;background:transparent;border:none;outline:none;font-family:'Inter',sans-serif;font-size:.78rem;color:rgba(240,240,240,.8);}
.mtask-item.done input[type=text]{color:rgba(240,240,240,.3);text-decoration:line-through;}
.mtask-item-del{background:none;border:none;color:rgba(240,240,240,.2);cursor:pointer;flex-shrink:0;width:16px;height:16px;}
.mtask-item-del:hover{color:var(--clr-danger-light);}
.mtask-item-day{width:38px !important;flex:none !important;text-align:center;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.1);border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:rgba(240,240,240,.5) !important;padding:3px 2px !important;}
.mtask-item.mtask-late{animation:overduePulse 1.8s ease-in-out infinite;}
.mtask-item.mtask-late .mtask-item-day{color:var(--clr-danger-light) !important;border-color:rgba(239,68,68,.4);}

/* ── Importar calendário: .ics + Outlook ── */
.events-import-row{display:flex;gap:6px;margin-bottom:10px;}
.events-import-row .events-ics-upload{flex:1;margin-bottom:0;}
.events-outlook-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;background:rgba(0,120,212,.1);border:1px solid rgba(0,120,212,.3);border-radius:8px;font-family:'Inter',sans-serif;font-size:.72rem;color:#5ea6e6;cursor:pointer;transition:all .15s;}
.events-outlook-btn:hover{background:rgba(0,120,212,.2);}
.events-outlook-btn.connected{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#6ee7b7;}

/* ── Orçamento por categoria ── */
.budget-cat-title{font-size:.6rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:rgba(240,240,240,.25);margin:14px 0 8px;}
.budget-cat-row{display:flex;align-items:center;gap:8px;font-size:.74rem;color:rgba(240,240,240,.6);margin-bottom:7px;}
.budget-cat-icon{flex-shrink:0;}
.budget-cat-label{width:82px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.budget-cat-track{flex:1;height:6px;background:var(--clr-border-faint);border-radius:20px;overflow:hidden;}
.budget-cat-fill{height:100%;border-radius:20px;}
.budget-cat-val{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:rgba(240,240,240,.4);flex-shrink:0;width:62px;text-align:right;}

/* ── Navegador de mês + gráfico de categorias das despesas ── */
.expense-month-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px;}
.expense-month-nav button{background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.1);color:rgba(240,240,240,.6);width:24px;height:24px;border-radius:6px;cursor:pointer;}
.expense-month-nav button:hover{background:rgba(255,255,255,.1);}
.expense-month-nav span{font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--clr-text);text-transform:capitalize;min-width:110px;text-align:center;}
.expense-chart-wrap{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px;min-height:80px;}
.expense-add-row2{display:flex;gap:6px;margin-bottom:12px;}
.expense-add-row2 select{flex:1;background:var(--clr-border-faint);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:7px 9px;font-family:'Inter',sans-serif;font-size:.74rem;color:var(--clr-text);outline:none;color-scheme:dark;}
.expense-add-row2 button{padding:7px 14px;background:var(--clr-indigo-20);border:1px solid var(--clr-indigo-30);border-radius:7px;color:var(--clr-indigo-light);font-size:.74rem;font-weight:600;cursor:pointer;white-space:nowrap;}
.expense-item-cat{font-size:.85rem;flex-shrink:0;}
#btn-events{position:relative;}

/* ── Nav fixa da landing page (estilo notion.com) ── */
.lp-nav{position:sticky;top:0;z-index:500;display:flex;align-items:center;gap:28px;padding:14px 32px;background:rgba(10,10,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.lp-nav-logo{display:flex;align-items:center;gap:8px;font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:800;color:var(--clr-text);letter-spacing:-.5px;}
.lp-nav-links{display:flex;gap:22px;flex:1;}
.lp-nav-links a{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:500;color:rgba(240,240,240,.55);text-decoration:none;transition:color .15s;}
.lp-nav-links a:hover,.lp-nav-links a.active{color:var(--clr-text);}
.lp-nav-cta{background:var(--clr-text);color:#0a0a0a;border:none;border-radius:8px;padding:8px 18px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:opacity .15s;}
.lp-nav-cta:hover{opacity:.85;}
@media(max-width:768px){.lp-nav-links{display:none;}.lp-nav{padding:12px 18px;}}

/* ── Scroll reveal das seções da landing (fade + slide sutil) ── */
.lp-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.lp-reveal.in-view{opacity:1;transform:translateY(0);}

/* ── Bento grid (seção "O que é o MyDesk") ── */
.lp-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(90px,auto);gap:14px;}
.lp-bento-item{background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:16px;padding:22px;transition:border-color .25s,transform .25s;}
.lp-bento-item:hover{border-color:rgba(99,102,241,.28);transform:translateY(-3px);}
.lp-bento-visual{grid-column:span 4;grid-row:span 2;padding:0;overflow:hidden;}
.lp-bento-feat{grid-column:span 2;}
.lp-bento-stat{grid-column:span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;}
.lp-bento-wide{grid-column:span 6;display:flex;align-items:center;gap:18px;}
.lp-bento-wide .lp-feat-icon{flex-shrink:0;}
@media(max-width:900px){.lp-bento{grid-template-columns:repeat(2,1fr);}.lp-bento-visual{grid-column:span 2;}.lp-bento-feat,.lp-bento-stat,.lp-bento-wide{grid-column:span 2;}.lp-bento-wide{flex-direction:column;text-align:center;}}
@media(max-width:560px){.lp-bento{grid-template-columns:1fr;}.lp-bento-visual,.lp-bento-feat,.lp-bento-stat,.lp-bento-wide{grid-column:span 1;}}

/* ── Badge de anúncio no hero ── */
.lp-announce{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.28);border-radius:20px;padding:5px 14px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;color:var(--clr-indigo-light);margin-bottom:14px;width:fit-content;animation:announcePulse 2.4s ease-in-out infinite;}
@keyframes announcePulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.25);}50%{box-shadow:0 0 0 5px rgba(99,102,241,0);}}

/* ── Coleção de wallpapers prontos ────────────────────────────────────── */
.wp-gallery{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.wp-gallery-swatch{width:52px;height:36px;border-radius:7px;cursor:pointer;border:1.5px solid rgba(255,255,255,.08);transition:all .15s;background-size:cover;background-position:center;flex-shrink:0;}
.wp-gallery-swatch:hover{border-color:var(--clr-indigo-40);transform:scale(1.06);}
.wp-gallery-swatch.active{border-color:var(--clr-indigo);box-shadow:0 0 0 2px rgba(99,102,241,.35);}
/* O gradiente continua como fundo de reserva: é o que aparece no instante
   antes de a miniatura carregar, e se ela faltar. */
.wp-gallery-swatch.is-video{background-color:#12121e;background-image:linear-gradient(135deg,#1a1a2e,#0d0d0d);position:relative;}
/* O ▶ virou selo de canto para não brigar com o cadeado do outro canto. */
.wp-gallery-play{position:absolute;left:2px;top:1px;font-size:.55rem;line-height:1;
  padding:2px 3px;border-radius:5px;color:#fff;background:rgba(0,0,0,.55);
  text-shadow:0 1px 2px rgba(0,0,0,.6);}
.wp-gallery-free{position:absolute;right:2px;bottom:2px;padding:2px 4px;border-radius:5px;
  background:rgba(5,150,105,.9);color:#ecfdf5;font-size:.43rem;font-weight:800;
  letter-spacing:.25px;text-transform:uppercase;box-shadow:0 1px 4px rgba(0,0,0,.35);}

/* ══════════════════════════════════════════════════════════════════════
   LANDING — "CLAUSE" MARKETING HERO + SEÇÕES INSPIRADAS NO TEMPLATE
   (badge flutuante, headline com marcador, trust bar, dashboard split,
   integrações, testemunho) — integradas à identidade índigo/teal do MyDesk.
═══════════════════════════════════════════════════════════════════════ */
.lp-hero2{position:relative;padding:96px 8vw 64px;text-align:center;max-width:920px;margin:0 auto;overflow:visible;animation:heroIn2 .8s cubic-bezier(.16,1,.3,1) both;}
@keyframes heroIn2{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.lp-float-avatar{position:absolute;width:56px;height:56px;border-radius:50%;background:var(--clr-bg-card);border:1px solid var(--clr-border-strong);display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:floatBadge 4.6s ease-in-out infinite;z-index:1;}
.lp-float-avatar.fa1{top:6px;left:1%;animation-delay:-.4s;}
.lp-float-avatar.fa2{top:64px;right:3%;animation-delay:-1.6s;}
.lp-float-avatar.fa3{bottom:56px;left:7%;animation-delay:-2.7s;}
.lp-float-avatar.fa4{bottom:-6px;right:11%;animation-delay:-3.6s;}
.lp-float-arrow{position:absolute;bottom:-3px;right:-3px;width:17px;height:17px;border-radius:50%;background:var(--clr-success);border:2px solid #0a0a0a;display:flex;align-items:center;justify-content:center;}
.lp-float-arrow::before{content:'↗';font-size:.55rem;color:#fff;font-weight:700;}
@media(max-width:900px){.lp-float-avatar{display:none;}}
.lp-hero2-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.28);border-radius:20px;padding:6px 16px;font-size:.7rem;font-weight:600;color:var(--clr-indigo-light);margin-bottom:24px;animation:announcePulse 2.4s ease-in-out infinite;}
.lp-hero2-title{font-family:'Syne',sans-serif;font-size:clamp(2.2rem,5.5vw,3.5rem);font-weight:800;letter-spacing:-2px;line-height:1.16;color:var(--clr-text);margin-bottom:20px;}
.lp-hero2-title .hl-mark{position:relative;white-space:nowrap;color:var(--clr-text);}
.lp-hero2-title .hl-mark::after{content:'';position:absolute;left:-3%;right:-3%;bottom:3px;height:.3em;background:rgba(245,158,11,.32);z-index:-1;border-radius:2px;}
.lp-hero2-sub{font-size:1rem;color:rgba(240,240,240,.5);line-height:1.8;max-width:560px;margin:0 auto 30px;}
.lp-hero2-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:44px;}
.lp-hero2-btn-fill{background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));border:none;border-radius:10px;padding:13px 26px;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(99,102,241,.35);transition:all .2s;}
.lp-hero2-btn-fill:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 12px 32px rgba(99,102,241,.45);}
.lp-hero2-btn-outline{background:none;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:13px 26px;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;color:var(--clr-text);cursor:pointer;transition:all .2s;}
.lp-hero2-btn-outline:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);}
.lp-hero2-trust{display:flex;flex-direction:column;align-items:center;gap:14px;}
.lp-hero2-trust-txt{font-size:.66rem;letter-spacing:.6px;color:rgba(240,240,240,.28);text-transform:uppercase;font-weight:600;}
.lp-trust-logos{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;}
.lp-trust-logo{font-size:.82rem;font-weight:600;color:rgba(240,240,240,.35);display:flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;transition:color .2s;}
.lp-trust-logo:hover{color:rgba(240,240,240,.72);}
@media(max-width:768px){.lp-hero2{padding:64px 22px 40px;}.lp-hero2-title{font-size:1.9rem;letter-spacing:-1px;}.lp-hero2-sub{font-size:.87rem;}.lp-trust-logos{gap:14px 20px;}}

/* ── Hero real (dentro de .auth-left) — badges flutuantes + headline com marcador ── */
.auth-hero-content{position:relative;z-index:2;animation:heroIn2 .8s cubic-bezier(.16,1,.3,1) both;}
.auth-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.28);border-radius:20px;padding:5px 14px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;color:var(--clr-indigo-light);margin-bottom:18px;width:fit-content;animation:announcePulse 2.4s ease-in-out infinite;}
.auth-hero-title{font-family:'Syne',sans-serif;font-size:2.15rem;font-weight:800;letter-spacing:-1.3px;line-height:1.16;color:var(--clr-text);margin-bottom:14px;}
.auth-hero-title .hl-mark{position:relative;white-space:nowrap;color:var(--clr-text);}
.auth-hero-title .hl-mark::after{content:'';position:absolute;left:-3%;right:-3%;bottom:2px;height:.3em;background:rgba(245,158,11,.32);z-index:-1;border-radius:2px;}
.auth-hero-sub{font-size:.86rem;color:rgba(240,240,240,.45);line-height:1.7;max-width:380px;margin-bottom:26px;}
.auth-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px;}
.auth-hero-ctas .lp-hero2-btn-fill,.auth-hero-ctas .lp-hero2-btn-outline{padding:11px 20px;font-size:.82rem;}
.auth-hero-trust{display:flex;flex-direction:column;gap:10px;}
.auth-hero-trust-txt{font-size:.62rem;letter-spacing:.5px;color:rgba(240,240,240,.25);text-transform:uppercase;font-weight:600;}
.auth-hero-trust .lp-trust-logos{gap:16px;justify-content:flex-start;}
.auth-hero-trust .lp-trust-logo{font-size:.74rem;}
@media(max-width:768px){.auth-hero-title{font-size:1.6rem;}.auth-hero-sub{max-width:100%;}}

/* ── Modal de conexão com Outlook ── */
.outlook-modal-brand{display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;color:rgba(240,240,240,.5);margin-bottom:16px;}
.outlook-modal-help{font-size:.72rem;color:rgba(240,240,240,.32);line-height:1.6;margin:-4px 0 18px;}
.outlook-modal-help a{color:#a5b4fc;text-decoration:underline;text-underline-offset:2px;}

/* ── Dashboard dinâmico + notificações + tarefas (bloco estilo "features") ── */
.lp-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.lp-dash-card{background:var(--clr-bg-card);border:1px solid var(--clr-border);border-radius:16px;padding:26px;transition:border-color .25s,transform .25s;}
.lp-dash-card:hover{border-color:rgba(99,102,241,.25);transform:translateY(-2px);}
.lp-dash-big{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0;overflow:hidden;padding:0!important;}
.lp-dash-text{flex:1;padding:30px;display:flex;flex-direction:column;justify-content:center;min-width:240px;}
.lp-dash-visual{flex:1;background:#0a0a0a;padding:22px;display:flex;flex-direction:column;gap:16px;min-width:260px;border-left:1px solid var(--clr-border-soft);}
.lp-dash-visual-hdr{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:rgba(240,240,240,.4);}
.lp-dash-avatars span{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--clr-border-strong);align-items:center;justify-content:center;font-size:.6rem;margin-left:-6px;border:2px solid #0a0a0a;}
.lp-chart-bars{flex:1;display:flex;align-items:flex-end;gap:8px;min-height:120px;}
.lp-chart-bar{flex:1;height:6%;background:rgba(255,255,255,.08);border-radius:4px 4px 0 0;transition:height 1.1s cubic-bezier(.16,1,.3,1);}
.lp-chart-bar.active{background:linear-gradient(180deg,#818cf8,var(--clr-indigo));}
.lp-reveal.in-view .lp-chart-bar{height:var(--h);}
.lp-dash-cta{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:10px 18px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;color:var(--clr-text);cursor:pointer;width:fit-content;transition:all .18s;}
.lp-dash-cta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);}
.lp-toggle-list,.lp-activity-list{display:flex;flex-direction:column;gap:10px;}
.lp-toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:rgba(240,240,240,.6);padding:8px 0;border-bottom:1px solid var(--clr-border-faint);}
.lp-toggle-row:last-child{border-bottom:none;}
.lp-toggle-mini{width:32px;height:18px;border-radius:20px;background:rgba(255,255,255,.1);position:relative;flex-shrink:0;}
.lp-toggle-mini::before{content:'';position:absolute;width:12px;height:12px;left:3px;top:3px;background:#fff;border-radius:50%;opacity:.5;transition:transform .2s;}
.lp-toggle-mini.on{background:var(--clr-indigo);}
.lp-toggle-mini.on::before{transform:translateX(14px);opacity:1;}
.lp-activity-item{display:flex;gap:10px;align-items:flex-start;font-size:.76rem;color:rgba(240,240,240,.6);line-height:1.5;}
.lp-activity-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff;flex-shrink:0;}
.lp-activity-time{display:block;font-size:.64rem;color:rgba(240,240,240,.25);margin-top:2px;}
@media(max-width:900px){.lp-dash-big{flex-direction:column;}.lp-dash-visual{border-left:none;border-top:1px solid var(--clr-border-soft);}}
@media(max-width:768px){.lp-dash-grid{grid-template-columns:1fr;}}

/* ── Faixa escura de integrações ── */
.lp-integrations{background:linear-gradient(180deg,#0c0d1a,#08090f);padding:90px 8vw;text-align:center;border-top:1px solid var(--clr-border-soft);border-bottom:1px solid var(--clr-border-soft);position:relative;overflow:hidden;}
.lp-integrations::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 0);background-size:26px 26px;pointer-events:none;}
.lp-int-title{font-family:'Syne',sans-serif;font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;color:var(--clr-text);letter-spacing:-1.2px;margin:14px 0;position:relative;}
.lp-int-sub{font-size:.92rem;color:rgba(240,240,240,.42);max-width:520px;margin:0 auto 18px;line-height:1.7;position:relative;}
.lp-int-link{font-size:.78rem;font-weight:600;color:#a5b4fc;text-decoration:underline;text-underline-offset:3px;position:relative;}
.lp-int-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:44px;position:relative;}
.lp-int-icon{width:104px;height:78px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:1.5rem;transition:all .2s;}
.lp-int-icon span{font-size:.6rem;color:rgba(240,240,240,.4);font-family:'Inter',sans-serif;font-weight:600;}
.lp-int-icon:hover{border-color:rgba(99,102,241,.35);transform:translateY(-3px);background:rgba(99,102,241,.06);}
@media(max-width:768px){.lp-integrations{padding:56px 24px;}.lp-int-icon{width:84px;height:66px;font-size:1.2rem;}}

/* ── Testemunho / citação de propósito ── */
.lp-testimonial{max-width:720px;margin:0 auto;text-align:center;}
.lp-testimonial-mark{font-family:'Syne',sans-serif;font-size:3rem;color:var(--clr-indigo);line-height:1;margin-bottom:8px;opacity:.6;}
.lp-testimonial-quote{font-family:'Syne',sans-serif;font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;color:var(--clr-text);line-height:1.5;letter-spacing:-.3px;}
.lp-testimonial-author{margin-top:20px;font-size:.8rem;color:rgba(240,240,240,.35);font-weight:600;}

/* ── CTA final: botão outline adicional ── */
.lp-cta-btn-outline{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 28px;font-family:'Inter',sans-serif;font-size:.95rem;font-weight:600;color:var(--clr-text);cursor:pointer;transition:all .2s;margin-left:12px;}
.lp-cta-btn-outline:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);transform:translateY(-2px);}
@media(max-width:768px){.lp-cta-btn-outline{margin-left:0;margin-top:12px;width:100%;justify-content:center;}}

/* ══════════════════════════════════════════════════════════════════════
   LANDING — NOVA IDENTIDADE VISUAL (tema claro, estilo Notion)
   Tudo escopado dentro de #auth-screen — o app em si (index.html) segue
   100% no tema escuro índigo/teal original, nenhuma variável --clr-*
   global é alterada aqui, só os seletores exclusivos da landing.
═══════════════════════════════════════════════════════════════════════ */
#auth-screen{background:#fff;}

/* ── Nav clara ── */
#auth-screen .lp-nav{background:rgba(255,255,255,.92);border-bottom:1px solid #ececea;}
#auth-screen .lp-nav-logo{color:#191919;}
#auth-screen .lp-nav-links a{color:#454440;}
#auth-screen .lp-nav-links a:hover,#auth-screen .lp-nav-links a.active{color:#191919;}
#auth-screen .lp-nav-cta{background:#191919;color:#fff;}
#auth-screen .lp-nav-cta:hover{opacity:.82;}

/* ── Hero principal ── */
#auth-screen .lpN-hero{max-width:900px;margin:0 auto;padding:64px 8vw 56px;text-align:center;}
#auth-screen .lpN-avatars{display:flex;justify-content:center;gap:10px;margin-bottom:28px;flex-wrap:wrap;}
#auth-screen .lpN-avatar{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 6px 18px rgba(0,0,0,.08);border:2px solid #e5e5e3;animation:floatBadge 4.4s ease-in-out infinite;}
#auth-screen .lpN-avatar.c1{border-color:#6366f1;animation-delay:-.2s;}
#auth-screen .lpN-avatar.c2{border-color:#14b8a6;animation-delay:-.8s;}
#auth-screen .lpN-avatar.c3{border-color:#f59e0b;animation-delay:-1.4s;}
#auth-screen .lpN-avatar.c4{border-color:#ef4444;animation-delay:-2s;}
#auth-screen .lpN-avatar.c5{border-color:#8b5cf6;animation-delay:-2.6s;}
#auth-screen .lpN-avatar.c6{border-color:#10b981;animation-delay:-3.2s;}
#auth-screen .lpN-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(2.4rem,6vw,4rem);line-height:1.12;letter-spacing:-2px;color:#191919;margin-bottom:22px;}
#auth-screen .lpN-pill{display:inline-flex;align-items:center;gap:8px;background:#eceafd;color:#4f46e5;border-radius:40px;padding:2px 22px 2px 14px;}
#auth-screen .lpN-pill::before{content:'';width:12px;height:12px;border-radius:50%;background:#6366f1;flex-shrink:0;}
#auth-screen .lpN-sub{font-size:1.05rem;color:#5f5e5b;max-width:520px;margin:0 auto 30px;line-height:1.7;}
#auth-screen .lpN-ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:52px;}
#auth-screen .lpN-btn-fill{background:#191919;color:#fff;border:none;border-radius:40px;padding:13px 26px;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .18s;}
#auth-screen .lpN-btn-fill:hover{opacity:.85;transform:translateY(-1px);}
#auth-screen .lpN-btn-outline{background:#eceafd;color:#4f46e5;border:none;border-radius:40px;padding:13px 26px;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .18s;}
#auth-screen .lpN-btn-outline:hover{background:#e0ddfb;}
#auth-screen .lpN-shot{max-width:760px;margin:0 auto;box-shadow:0 30px 70px rgba(0,0,0,.16),0 4px 14px rgba(0,0,0,.06);border-color:#e5e5e3;}
#auth-screen .lpN-shot-tag{margin-left:10px;font-size:.62rem;color:rgba(240,240,240,.3);font-family:'JetBrains Mono',monospace;}
#auth-screen .lpN-trust{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px;}
#auth-screen .lpN-trust-txt{font-size:.64rem;letter-spacing:.6px;text-transform:uppercase;color:#a5a49e;font-weight:600;}
#auth-screen .lpN-trust-logos{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;}
#auth-screen .lpN-trust-logos span{font-size:.86rem;font-weight:600;color:#78776f;}
@media(max-width:700px){#auth-screen .lpN-hero{padding:44px 20px 40px;}#auth-screen .lpN-title{font-size:2rem;}#auth-screen .lpN-avatar{width:38px;height:38px;font-size:1rem;}}

/* ── Seção de login/registro ── */
#auth-screen .lpN-auth-section{background:#faf9f7;border-top:1px solid #ececea;padding:64px 20px;display:flex;flex-direction:column;align-items:center;}
#auth-screen .lpN-auth-intro{text-align:center;margin-bottom:26px;}
#auth-screen .lpN-auth-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#6366f1;margin-bottom:10px;}
#auth-screen .lpN-auth-heading{font-family:'Syne',sans-serif;font-size:1.7rem;font-weight:800;color:#191919;letter-spacing:-.6px;margin-bottom:8px;}
#auth-screen .lpN-auth-desc{font-size:.86rem;color:#6b6a66;}

/* ── Card do formulário — claro ── */
#auth-screen .auth-card{background:#fff;border:1px solid #ececea;box-shadow:0 20px 50px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);backdrop-filter:none;}
#auth-screen .auth-tabs{background:#f3f2ef;border-color:#ececea;}
#auth-screen .auth-tab{color:#8a8983;}
#auth-screen .auth-tab.active{background:#fff;color:#191919;box-shadow:0 1px 4px rgba(0,0,0,.08);}
#auth-screen .a-lbl{color:#8a8983;}
#auth-screen .a-inp{background:#f7f7f5;border:1px solid #e5e5e3;color:#191919;}
#auth-screen .a-inp::placeholder{color:#b8b7b1;}
#auth-screen .a-hint{color:#a5a49e;}
#auth-screen .auth-divider{color:#c3c2bc;}
#auth-screen .btn-google{background:#fff;border:1px solid #e5e5e3;color:#3a3934;}
#auth-screen .btn-google:hover{background:#f7f7f5;}
#auth-screen .auth-switch{color:#8a8983;}
#auth-screen .auth-switch a{color:#4f46e5;}
#auth-screen .auth-error{background:#fef2f2;border-color:#fecaca;color:#b91c1c;}
#auth-screen #forgot-pass{color:#8a8983!important;}

/* ── Seções de conteúdo (bento, feats, how, quote, stats) ── */
#auth-screen .lp-section:nth-child(odd),
#auth-screen .lp-section:nth-child(even){background:#fff;border-top:1px solid #ececea;}
#auth-screen .lp-eyebrow{color:#8a8983;}
#auth-screen .lp-eyebrow-dot{background:var(--clr-indigo);}
#auth-screen .lp-title{color:#191919;}
#auth-screen .lp-title .hl,#auth-screen .lp-stat-num .hl{background:linear-gradient(135deg,#6366f1,#4f46e5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#auth-screen .lp-subtitle{color:#5f5e5b;}
#auth-screen .lp-feat{background:#f7f7f5;border-color:#ececea;}
#auth-screen .lp-feat:hover{border-color:rgba(99,102,241,.35);background:#f2f1fd;}
#auth-screen .lp-feat-title{color:#191919;}
#auth-screen .lp-feat-desc{color:#78776f;}
#auth-screen .lp-bento-item{background:#f7f7f5;border-color:#ececea;}
#auth-screen .lp-bento-item:hover{border-color:rgba(99,102,241,.3);}
#auth-screen .lp-stat-num{color:#191919;}
#auth-screen .lp-stat-label{color:#8a8983;}
#auth-screen .lp-how-num{background:#f0f0fd;border-color:rgba(99,102,241,.3);color:#4f46e5;}
#auth-screen .lp-how-title{color:#191919;}
#auth-screen .lp-how-desc{color:#78776f;}
#auth-screen .lp-quote{background:#f0f0fd;border-color:rgba(99,102,241,.16);}
#auth-screen .lp-quote-text{color:#3a3934;}
#auth-screen .lp-quote-author{color:#8a8983;}
#auth-screen .lp-divider{background:linear-gradient(90deg,transparent,#e5e5e3,transparent);}
#auth-screen .lp-dash-card{background:#f7f7f5;border-color:#ececea;}
#auth-screen .lp-dash-card:hover{border-color:rgba(99,102,241,.3);}
#auth-screen .lp-toggle-row{color:#3a3934;border-color:#ececea;}
#auth-screen .lp-activity-item{color:#3a3934;}
#auth-screen .lp-activity-time{color:#a5a49e;}
#auth-screen .lp-dash-cta{background:#191919;border:none;color:#fff;}
#auth-screen .lp-dash-cta:hover{opacity:.85;}

/* ── Integrações, testemunho ── */
#auth-screen .lp-integrations{background:#faf9f7;border-color:#ececea;}
#auth-screen .lp-integrations::before{opacity:.5;}
#auth-screen .lp-int-title{color:#191919;}
#auth-screen .lp-int-sub{color:#78776f;}
#auth-screen .lp-int-link{color:#4f46e5;}
#auth-screen .lp-int-icon{background:#fff;border-color:#ececea;}
#auth-screen .lp-int-icon span{color:#a5a49e;}
#auth-screen .lp-testimonial-mark{color:#d4d3cd;}
#auth-screen .lp-testimonial-quote{color:#191919;}
#auth-screen .lp-testimonial-author{color:#8a8983;}

/* ── FAQ ── */
#auth-screen .lp-faq-item{border-color:#ececea!important;}
#auth-screen .lp-faq-item>div:first-child{background:#f7f7f5!important;}
#auth-screen .lp-faq-item span:first-of-type{color:#191919!important;}
#auth-screen .lp-faq-arrow{color:#a5a49e!important;}
#auth-screen .lp-faq-body div{color:#5f5e5b!important;}

/* ── CTA final e rodapé ── */
#auth-screen .lp-cta{background:#faf9f7;border-color:#ececea;}
#auth-screen .lp-cta-title{color:#191919;}
#auth-screen .lp-cta-desc{color:#6b6a66;}
#auth-screen .lp-cta-btn{background:#191919;box-shadow:none;}
#auth-screen .lp-cta-btn:hover{opacity:.85;box-shadow:none;transform:translateY(-2px);}
#auth-screen .lp-cta-btn-outline{border-color:#dcdbd7;color:#191919;}
#auth-screen .lp-cta-btn-outline:hover{background:#f7f7f5;}
#auth-screen .lpN-cta-trust{color:#a5a49e;}
#auth-screen .lp-footer2{background:#fff;border-color:#ececea;}
#auth-screen .lp-footer2-brand-name{color:#191919;}
#auth-screen .lp-footer2-brand-desc{color:#8a8983;}
#auth-screen .lp-footer2-col a{color:#78776f!important;}
#auth-screen .lp-footer2-col a:hover{color:#191919!important;}
#auth-screen .lp-footer2-col-title{color:#b8b7b1;}
#auth-screen .lp-footer2-col span[style]{color:#78776f!important;}
#auth-screen .lp-footer2-bottom{color:#a5a49e;border-color:#ececea;}

/* ── Pricing (planos) — retemados diretamente no HTML (ver login.html) ── */
#auth-screen #lp-pricing{background:#fff;}
#auth-screen .lpN-plan-card{background:#f7f7f5;border:1px solid #ececea;border-radius:20px;padding:28px;display:flex;flex-direction:column;flex:1;min-width:260px;}
#auth-screen .lpN-plan-card.premium{background:linear-gradient(135deg,#eceafd,#f5f4fe);border-color:rgba(99,102,241,.3);position:relative;overflow:hidden;}
#auth-screen .lpN-plan-eyebrow{font-size:.65rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#8a8983;margin-bottom:14px;}
#auth-screen .lpN-plan-card.premium .lpN-plan-eyebrow{color:#4f46e5;}
#auth-screen .lpN-plan-price{font-family:'Syne',sans-serif;font-size:2.6rem;font-weight:800;color:#191919;letter-spacing:-2px;line-height:1;margin-bottom:4px;}
#auth-screen .lpN-plan-period{font-size:.78rem;color:#8a8983;margin-bottom:24px;}
#auth-screen .lpN-plan-feats{display:flex;flex-direction:column;gap:10px;flex:1;margin-bottom:24px;}
#auth-screen .lpN-plan-feat{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#3a3934;}
#auth-screen .lpN-plan-feat.off{color:#b8b7b1;}
#auth-screen .lpN-plan-feat .ck{color:#10b981;font-size:.9rem;}
#auth-screen .lpN-plan-card.premium .lpN-plan-feat .ck{color:#4f46e5;}
#auth-screen .lpN-plan-feat .x{opacity:.4;font-size:.9rem;}
#auth-screen .lpN-plan-btn{width:100%;padding:12px;border-radius:10px;font-family:'Inter',sans-serif;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .18s;border:1px solid #e2e1dc;background:#efeeea;color:#3a3934;}
#auth-screen .lpN-plan-btn:hover{background:#e6e5e0;}
#auth-screen .lpN-plan-btn.premium{background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;color:#fff;box-shadow:0 4px 18px rgba(99,102,241,.3);}
#auth-screen .lpN-plan-badge{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:20px;padding:3px 10px;font-size:.62rem;font-weight:700;color:#fff;letter-spacing:.5px;text-transform:uppercase;}
#auth-screen .lpN-plan-note{text-align:center;margin-top:20px;font-size:.72rem;color:#a5a49e;}

/* ── "Como funciona" — passos horizontais numerados (substitui o antigo layout de 2 colunas texto+mock) ── */
#auth-screen .lpN-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-bottom:44px;}
#auth-screen .lpN-steps::before{content:'';position:absolute;top:22px;left:12%;right:12%;height:1px;background:#e5e5e3;z-index:0;}
#auth-screen .lpN-step{position:relative;text-align:center;padding:0 16px;z-index:1;}
#auth-screen .lpN-step-num{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #6366f1;color:#4f46e5;font-family:'Syne',sans-serif;font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
#auth-screen .lpN-step-title{font-size:.92rem;font-weight:700;color:#191919;margin-bottom:6px;}
#auth-screen .lpN-step-desc{font-size:.78rem;color:#78776f;line-height:1.6;}
@media(max-width:768px){#auth-screen .lpN-steps{grid-template-columns:1fr;gap:28px;}#auth-screen .lpN-steps::before{display:none;}}

/* ── Grid de recursos — substitui as antigas 4 seções repetitivas (Social/Personalização/Pilhas/Segurança) por um único grid de cards ── */
#auth-screen .lpN-fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
#auth-screen .lpN-fcard{background:#f7f7f5;border:1px solid #ececea;border-radius:16px;padding:22px;transition:all .2s;}
#auth-screen .lpN-fcard:hover{border-color:rgba(99,102,241,.3);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.06);}
#auth-screen .lpN-fcard-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:14px;}
#auth-screen .lpN-fcard-title{font-size:.88rem;font-weight:700;color:#191919;margin-bottom:6px;}
#auth-screen .lpN-fcard-desc{font-size:.76rem;color:#78776f;line-height:1.6;}
@media(max-width:900px){#auth-screen .lpN-fgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#auth-screen .lpN-fgrid{grid-template-columns:1fr;}}

/* ── Footer multi-coluna ── */
.lp-footer2{padding:56px 8vw 28px;border-top:1px solid var(--clr-border-faint);background:#08090c;}
.lp-footer2-grid{display:flex;gap:60px;flex-wrap:wrap;justify-content:space-between;max-width:1100px;margin:0 auto 36px;}
.lp-footer2-brand{max-width:260px;}
.lp-footer2-brand-name{display:flex;align-items:center;gap:8px;font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;color:var(--clr-text);margin-bottom:10px;}
.lp-footer2-brand-desc{font-size:.76rem;color:rgba(240,240,240,.32);line-height:1.7;}
.lp-footer2-col-title{font-size:.68rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(240,240,240,.3);margin-bottom:14px;}
.lp-footer2-col a{display:block;font-size:.79rem;color:rgba(240,240,240,.5);text-decoration:none;margin-bottom:10px;transition:color .15s;cursor:pointer;}
.lp-footer2-col a:hover{color:var(--clr-text);}
.lp-footer2-bottom{max-width:1100px;margin:0 auto;padding-top:22px;border-top:1px solid var(--clr-border-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.7rem;color:rgba(240,240,240,.2);}
@media(max-width:640px){.lp-footer2{padding:40px 22px 24px;}.lp-footer2-grid{gap:28px;}.lp-footer2-bottom{flex-direction:column;text-align:center;}}
/* ── Videochamada: câmeras responsivas que acompanham o tamanho da janela ──
   As tiles deixam de ter tamanho fixo e passam a crescer/encolher preenchendo
   o espaço disponível. Ao redimensionar o overlay, os vídeos redimensionam junto.
   O modo foco (.has-focus) é preservado com as regras originais. */
#call-grid:not(.has-focus){align-content:stretch;}
#call-grid:not(.has-focus) .call-tile{flex:1 1 45%;width:auto;height:auto;min-width:120px;min-height:0;transition:none;}
#call-grid:not(.has-focus) .call-tile:only-child{flex-basis:100%;}
#call-tile video,.call-tile video{width:100%;height:100%;object-fit:cover;background:#000;}
/* Modo foco: destaque maior e responsivo em janelas grandes */
#call-grid.has-focus .call-tile.focused{height:auto;flex:1 1 100%;aspect-ratio:16/9;max-height:72%;}
/* ── Prévia ampla do corpo da nota ──
   O JS mede os primeiros 290 caracteres e grava a altura exata inline. Este
   teto é o fallback sem JS e evita voltar à prévia curta de 200px. */
.n-text{max-height:290px;overflow-y:auto;scrollbar-gutter:stable;}
/* ── Animação de entrada da página principal — "reveal" forte ──
   Um véu com o logo se abre; a toolbar cai com mola; as notas dão pop
   escalonado; o fundo faz um zoom sutil. Em #board-bg/#board-bg-video
   animamos SÓ transform (são irmãos das notas, não ancestrais — não
   criam containing-block que desloque as notas position:fixed). */
#app-enter-veil{position:fixed;inset:0;z-index:99999;pointer-events:none;display:grid;place-items:center;
  background:radial-gradient(ellipse 70% 60% at 50% 42%, rgba(40,42,90,.45), transparent 68%), #08080d;
  animation:veilOut .9s cubic-bezier(.7,0,.2,1) both;}
#app-enter-veil .veil-logo{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;font-size:34px;
  background:linear-gradient(135deg,#6366f1,#14b8a6);
  box-shadow:0 14px 70px rgba(99,102,241,.6),inset 0 0 0 1px rgba(255,255,255,.16);
  animation:veilLogo .9s cubic-bezier(.16,1,.3,1) both;}
@keyframes veilOut{0%{opacity:1}38%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes veilLogo{0%{opacity:0;transform:scale(.72)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}

@keyframes appToolbarIn{0%{opacity:0;transform:translateY(-48px)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes appBgZoom{from{transform:scale(1.09)}to{transform:none}}
@keyframes appNotePop{0%{opacity:0;transform:translateY(30px) scale(.88)}100%{opacity:1;transform:none}}
@keyframes appFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

body.app-enter #toolbar{animation:appToolbarIn .7s cubic-bezier(.22,1.18,.36,1) .22s both;}
body.app-enter #board-bg,body.app-enter #board-bg-canvas,body.app-enter #board-pixel-canvas{animation:appBgZoom 1.05s cubic-bezier(.16,1,.3,1) both;}
body.app-enter .note{animation:appNotePop .6s cubic-bezier(.34,1.32,.5,1) .34s both;}
body.app-enter #crm-dashboard,body.app-enter #crm-charts-row,body.app-enter #crm-board{animation:appFadeUp .7s cubic-bezier(.16,1,.3,1) .34s both;}
@media(prefers-reduced-motion:reduce){
  #app-enter-veil{animation:veilOut .3s ease both;}
  body.app-enter #toolbar,body.app-enter #board-bg,body.app-enter #board-bg-canvas,body.app-enter #board-pixel-canvas,
  body.app-enter .note,body.app-enter #crm-dashboard,body.app-enter #crm-charts-row,body.app-enter #crm-board{animation:none;}
}
/* ══════════════════════════════════════════════════════════════
   A CORTINA DA TROCA DE QUADRO
   ══════════════════════════════════════════════════════════════
   Irmã da animação de entrada logo acima, e de propósito: entrar no site e
   trocar de quadro são a mesma coisa vista de perto — um quadro sendo montado
   —, e duas linguagens diferentes para isso fariam parecer duas coisas.

   O QUE ELA ENCENA é o que está acontecendo por baixo: doze peças chegam
   voando e assentam em grade, que é o quadro se remontando. Uma roleta de
   carregamento serviria para qualquer tela e por isso não diria nada nesta.

   Os deslocamentos de voo vêm do JS, peça por peça (`--dx`, `--dy`, `--r`), e são
   fixos: a mesma troca precisa parecer a mesma coisa toda vez.

   Três peças coloridas no meio das neutras. Doze viram confete; três dão o tom
   do produto e param aí. */
#ws-cortina{
  position:fixed;inset:0;z-index:9400;
  display:grid;place-items:center;
  background:
    radial-gradient(ellipse 66% 56% at 50% 44%, rgba(56,50,116,.5), transparent 70%),
    rgba(8,8,13,.94);
  backdrop-filter:blur(7px) saturate(.85);
  -webkit-backdrop-filter:blur(7px) saturate(.85);
  font-family:'Inter',sans-serif;
  opacity:0;transition:opacity .22s ease;
}
#ws-cortina.visivel{opacity:1;}
/* A saída sobe um pouco a cena antes de apagar: o quadro novo aparece POR
   BAIXO, como se a cortina se afastasse, e não como se a tela piscasse. */
#ws-cortina.saindo{opacity:0;transition:opacity .36s cubic-bezier(.4,0,1,1);}
#ws-cortina.saindo .wsc-palco{transform:scale(1.07);}

.wsc-palco{display:flex;flex-direction:column;align-items:center;
  padding:0 20px;transition:transform .36s cubic-bezier(.4,0,1,1);}

.wsc-grade{display:grid;grid-template-columns:repeat(4,30px);
  grid-auto-rows:22px;gap:9px;margin-bottom:26px;}
.wsc-peca{
  display:block;border-radius:6px;
  background:var(--cor,rgba(255,255,255,.085));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 20px -10px var(--brilho,transparent);
  animation:wscPeca .52s cubic-bezier(.18,1.12,.35,1) both;
  animation-delay:calc(var(--i) * 28ms);
}
@keyframes wscPeca{
  from{opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--r)) scale(.55);}
  to  {opacity:1;transform:none;}
}

.wsc-acao{font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(196,181,253,.5);
  animation:wscSobe .5s cubic-bezier(.16,1,.3,1) .30s both;}
.wsc-nome{display:flex;align-items:center;gap:9px;margin-top:9px;
  max-width:min(560px,84vw);
  font-family:'Syne',sans-serif;font-size:1.32rem;font-weight:700;
  letter-spacing:-.015em;color:#f4f2ff;
  animation:wscSobe .52s cubic-bezier(.16,1,.3,1) .36s both;}
.wsc-rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wsc-ico{font-size:1.12rem;line-height:1;flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(129,140,248,.5));}

/* Indeterminado de propósito: a troca não tem porcentagem para mostrar, e uma
   barra que finge saber quanto falta mente em toda troca que demora. */
.wsc-fio{margin-top:20px;width:118px;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.07);
  animation:wscSobe .5s cubic-bezier(.16,1,.3,1) .44s both;}
.wsc-fio i{display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,transparent,#818cf8,#2dd4bf,transparent);
  animation:wscFio 1.15s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes wscFio{from{transform:translateX(-115%)}to{transform:translateX(295%)}}
@keyframes wscSobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:620px){
  .wsc-grade{grid-template-columns:repeat(4,26px);grid-auto-rows:19px;gap:8px;}
  .wsc-nome{font-size:1.1rem;}
}
/* A cortina CONTINUA existindo com movimento reduzido: ela não é enfeite —
   é o que esconde o quadro sendo esvaziado e diz para onde se está indo.
   O que sai é o voo das peças. */
@media(prefers-reduced-motion:reduce){
  #ws-cortina,#ws-cortina *{animation:none!important;}
  .wsc-peca,.wsc-acao,.wsc-nome,.wsc-fio{opacity:1;transform:none;}
  .wsc-fio i{width:100%;}
  #ws-cortina.saindo .wsc-palco{transform:none;}
}

/* ══════════════════════════════════════════════════════════════
   A PLANILHA DENTRO DO VISUALIZADOR
   ══════════════════════════════════════════════════════════════
   Com letra de coluna e número de linha, grudados ao rolar. Numa tabela larga
   sem cabeçalho fixo é preciso rolar de volta ao topo para lembrar o que é
   cada coluna — e é aí que se confere a coluna errada.

   Quem rola é a tabela, e não o corpo do visualizador: é o que permite ao
   cabeçalho ficar preso e ao rodapé com a contagem ficar sempre visível. */
.fv-xlsx{display:flex;flex-direction:column;min-height:0;flex:1;width:100%;}
.fv-xl-rolo{flex:1;min-height:0;overflow:auto;background:#0b0c12;
  /* Firefox: "auto" é a barra larga do sistema, e não a fininha. */
  scrollbar-width:auto;
  scrollbar-color:rgba(148,163,184,.55) rgba(255,255,255,.05);}

/* ── A BARRA DE ROLAGEM, AQUI, É PARTE DA INTERFACE ─────────────────────
   A do app inteiro tem 4px e um cinza quase invisível. Está certo para uma
   coluna de texto, onde rolar é vertical e ninguém precisa ser convidado.

   Numa tabela de dezoito colunas o gesto principal é HORIZONTAL, e uma barra
   que não se vê é uma funcionalidade que não existe: quem abre a planilha
   conclui que ela tem cinco colunas e que o resto ficou de fora. Foi o
   relato — "a barra para arrastar para o lado está meio sumida, as pessoas
   podem não enxergar".

   Então ela é grossa e tem contraste de verdade — NESTE quadro, e só nele.
   A borda de 3px com `background-clip:padding-box` é o que dá o recuo do
   trilho sem precisar de um segundo elemento. */
.fv-xl-rolo::-webkit-scrollbar{width:13px;height:13px;}
.fv-xl-rolo::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:8px;}
.fv-xl-rolo::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.5);background-clip:padding-box;
  border:3px solid transparent;border-radius:9px;
  /* Mínimo para a alça continuar agarrável numa planilha de mil linhas, em
     que a proporção sozinha daria um risco de dois pixels. */
  min-height:44px;min-width:44px;}
.fv-xl-rolo::-webkit-scrollbar-thumb:hover{background:rgba(196,208,226,.78);
  background-clip:padding-box;}
.fv-xl-rolo::-webkit-scrollbar-thumb:active{background:rgba(224,231,243,.9);
  background-clip:padding-box;}
.fv-xl-rolo::-webkit-scrollbar-corner{background:transparent;}

.fv-xl-tab{border-collapse:separate;border-spacing:0;
  font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.86);}
.fv-xl-tab th,.fv-xl-tab td{
  border-right:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
  padding:5px 9px;white-space:nowrap;
  /* Célula longa não estica a tabela até o infinito: corta e o resto se lê
     baixando o arquivo, que é para isso que o botão está ali. */
  max-width:320px;overflow:hidden;text-overflow:ellipsis;}
.fv-xl-tab td.num{text-align:right;font-variant-numeric:tabular-nums;}

/* Cabeçalho de colunas: gruda no topo. */
.fv-xl-tab thead th{position:sticky;top:0;z-index:2;
  background:#161825;color:rgba(240,240,240,.5);
  font-weight:600;font-size:.66rem;letter-spacing:.06em;text-align:center;
  min-width:46px;}
/* Número da linha: gruda na esquerda. */
.fv-xl-num{position:sticky;left:0;z-index:1;
  background:#161825;color:rgba(240,240,240,.34);
  font-weight:500;font-size:.66rem;text-align:right;
  min-width:34px;font-variant-numeric:tabular-nums;}
/* O canto é o cruzamento dos dois, e precisa ficar acima dos dois. */
.fv-xl-canto{position:sticky;left:0;top:0;z-index:3;background:#1b1e2e;min-width:34px;}

/* Faixa alternada: numa tabela larga o olho perde a linha na volta. */
.fv-xl-tab tbody tr:nth-child(even) td{background:rgba(255,255,255,.018);}
.fv-xl-tab tbody tr:hover td{background:rgba(99,102,241,.09);}

.fv-xl-abas{display:flex;gap:4px;padding:8px 10px 0;overflow-x:auto;
  background:#101220;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;}
.fv-xl-aba{border:0;border-radius:8px 8px 0 0;padding:7px 13px;
  background:transparent;color:rgba(240,240,240,.42);
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
  white-space:nowrap;cursor:pointer;transition:background .15s,color .15s;}
.fv-xl-aba:hover{background:rgba(255,255,255,.05);color:rgba(240,240,240,.72);}
.fv-xl-aba.ativa{background:#0b0c12;color:#f0f0f0;
  box-shadow:inset 0 2px 0 var(--clr-indigo,#6366f1);}

.fv-xl-rodape{flex-shrink:0;padding:7px 12px;
  background:#101220;border-top:1px solid rgba(255,255,255,.06);
  font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.36);}

/* Pino — nota fixada ganha destaque âmbar e vai pra frente */
.note.pinned{box-shadow:0 0 0 1.5px rgba(245,158,11,.6),0 14px 40px rgba(245,158,11,.18),0 10px 30px rgba(0,0,0,.5)!important;
  border-color:rgba(245,158,11,.42)!important;}

/* ══════════════════════════════════════════════════════════════
   PASTAS (pilhas/stacks) — visual mais bonito e menos compacto
   ══════════════════════════════════════════════════════════════ */
.stack-wrap{min-width:298px;border-radius:16px !important;
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06) !important;}
.stack-header{gap:11px;padding:14px 16px;background:rgba(255,255,255,.06) !important;}
.shb{width:3px;height:17px;border-radius:2px;flex-shrink:0;}
.stack-header-color-dot{width:14px !important;height:14px !important;box-shadow:0 0 0 3px rgba(255,255,255,.06);}
.stack-header-title{font-size:.88rem !important;font-weight:700 !important;letter-spacing:-.2px;}
.stack-header-count{background:rgba(255,255,255,.09);color:rgba(255,255,255,.6);font-size:.66rem;font-weight:700;padding:3px 10px;border-radius:20px;min-width:24px;text-align:center;}
.stack-toggle-btn{width:31px !important;height:31px !important;border-radius:9px !important;font-size:1rem;}
.stack-toggle-btn:hover{background:rgba(255,255,255,.11) !important;color:#fff !important;}
.stack-card-row{gap:12px;padding:12px 15px;border-bottom-color:rgba(255,255,255,.05) !important;}
.stack-card-row:last-child{border-bottom:none;}
.stack-card-row:hover{background:rgba(255,255,255,.055) !important;}
.stack-card-row-bar{width:4px !important;height:24px !important;border-radius:3px !important;}
.stack-card-row-title{font-size:.84rem !important;font-weight:600 !important;}
.stack-card-row-status{font-size:.66rem !important;}
.stack-card-row-color{width:11px !important;height:11px !important;}
.stack-card-row-expand,.stack-card-row-unstack{width:24px !important;height:24px !important;border-radius:7px !important;}
.stack-card-row-expand:hover,.stack-card-row-unstack:hover{background:rgba(255,255,255,.08) !important;color:rgba(240,240,240,.7) !important;}

/* ══════════════════════════════════════════════════════════════
   PRÉVIA DE HTML no visualizador de arquivos
   ══════════════════════════════════════════════════════════════ */
.fv-html{flex:1 1 auto;width:100%;min-height:60dvh;border:0;border-radius:8px;background:#fff;display:block;}
.fv-html-nota{flex:0 0 auto;width:100%;padding:8px 12px;margin-bottom:10px;border-radius:8px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);
  font-family:'Inter',sans-serif;font-size:.72rem;color:#fcd34d;text-align:center;line-height:1.5;}

/* ══════════════════════════════════════════════════════════════
   AVISO DE E-MAIL NÃO CONFIRMADO
   Faixa logo abaixo da barra de ferramentas. Avisa, não bloqueia.
   ══════════════════════════════════════════════════════════════ */
#aviso-email{position:fixed;left:50%;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:10px;
  max-width:min(680px,calc(100vw - 32px));padding:10px 12px 10px 16px;border-radius:12px;
  background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.32);backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(0,0,0,.4);animation:fadeUp .3s ease both;}
#aviso-email .ae-ico{font-size:1rem;color:#fcd34d;flex-shrink:0;}
#aviso-email .ae-txt{font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(255,255,255,.86);line-height:1.4;}
#aviso-email .ae-txt b{color:#fcd34d;font-weight:600;}
#aviso-email .ae-btn{flex-shrink:0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);
  border-radius:8px;padding:6px 12px;font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;cursor:pointer;transition:background .16s;}
#aviso-email .ae-btn:hover:not(:disabled){background:rgba(255,255,255,.18);}
#aviso-email .ae-btn:disabled{opacity:.5;cursor:default;}
#aviso-email .ae-btn.ae-ok{background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.4);color:#6ee7b7;}
#aviso-email .ae-btn.ae-ok:hover:not(:disabled){background:rgba(16,185,129,.32);}
#aviso-email .ae-x{flex-shrink:0;background:none;border:none;color:rgba(255,255,255,.4);font-size:.9rem;cursor:pointer;padding:2px 4px;line-height:1;}
#aviso-email .ae-x:hover{color:#fff;}
@media(max-width:640px){
  #aviso-email{flex-wrap:wrap;justify-content:flex-end;}
  #aviso-email .ae-txt{flex-basis:100%;}
}

/* ══════════════════════════════════════════════════════════════
   CRM (Clientes) — dashboard
   Faixa em gradiente com busca, três cartões de indicador com
   minigráfico, painel de linha + painel de barras, e a tabela.
   Paleta verde→ciano sobre quase-preto; os gráficos são SVG
   montado à mão (a CSP não permite lib externa).
   ══════════════════════════════════════════════════════════════ */
#crm-dashboard.visible{display:block !important;padding:0;}

/* ── Faixa superior ── */
/* UMA COR POR MODELO. Os tres paineis nasceram do mesmo herói e ficaram com
   o mesmo verde-teal: trocar de modelo mudava os numeros e a tabela, e a
   faixa de cima continuava identica — o que faz a pessoa duvidar se a troca
   aconteceu. A cor e o sinal mais rapido de "voce mudou de lugar", e chega
   antes de qualquer rotulo.
   Financeiro fica com o indigo, que e a cor da propria marca e cabe ao painel
   principal. Recrutamento fica com o violeta, que ja era a cor do modelo no
   botao (`.rh-ligado`). E o teal, que era daqui, passou a ser do modelo de
   Clientes, que tem tela propria. */
.cdash-hero{position:relative;display:flex;align-items:center;gap:16px;padding:26px 26px 74px;
  background:
    radial-gradient(88% 150% at 10% -18%, rgba(165,180,252,.9) 0%, rgba(99,102,241,.7) 26%, rgba(79,70,229,.34) 52%, transparent 72%),
    linear-gradient(100deg,#3730a3 0%,#4338ca 20%,#3b4bb8 44%,#1e2352 68%,#0a0c1a 100%);}
#crm-view.rh-modelo .cdash-hero{
  background:
    radial-gradient(88% 150% at 10% -18%, rgba(216,180,254,.9) 0%, rgba(168,85,247,.68) 26%, rgba(126,34,206,.34) 52%, transparent 72%),
    linear-gradient(100deg,#5b21b6 0%,#6d28d9 20%,#7c3aed 44%,#3b1d6b 68%,#130a1f 100%);}
.cdash-hero-title{font-family:'Syne',sans-serif;font-size:1.55rem;font-weight:800;letter-spacing:-.6px;color:#fff;margin:0;flex-shrink:0;}
.cdash-search{position:relative;display:flex;align-items:center;flex:1;max-width:440px;margin-left:auto;}
.cdash-search svg{position:absolute;left:15px;width:16px;height:16px;color:rgba(255,255,255,.45);pointer-events:none;}
.cdash-search input{width:100%;background:rgba(4,26,28,.62);border:1px solid rgba(255,255,255,.09);border-radius:12px;
  padding:12px 16px 12px 42px;font-family:'Inter',sans-serif;font-size:.85rem;color:#fff;outline:none;transition:border-color .18s,background .18s;}
.cdash-search input::placeholder{color:rgba(255,255,255,.42);}
.cdash-search input:focus{border-color:rgba(110,231,183,.5);background:rgba(4,26,28,.8);}
.cdash-hero-btn{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:rgba(4,26,28,.62);border:1px solid rgba(255,255,255,.09);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,transform .18s;}
.cdash-hero-btn svg{width:19px;height:19px;}
.cdash-hero-btn:hover{background:rgba(4,26,28,.85);transform:translateY(-1px);}

/* ── Cartões de indicador (montam sobre a faixa) ── */
.cdash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px;padding:0 26px;margin-top:-56px;position:relative;z-index:2;}
.cdash-kpi{background:#080c0d;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px 18px 14px;
  box-shadow:0 20px 44px rgba(0,0,0,.5);animation:crmCardRise .5s cubic-bezier(.16,1,.3,1) both;}
.cdash-kpi:nth-child(2){animation-delay:.07s;} .cdash-kpi:nth-child(3){animation-delay:.14s;}
@keyframes crmCardRise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.cdash-kpi-lbl{font-size:.82rem;font-weight:500;color:rgba(255,255,255,.72);}
.cdash-kpi-mid{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 10px;}
.cdash-kpi-num{font-family:'Syne',sans-serif;font-size:1.72rem;font-weight:800;letter-spacing:-1px;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;min-width:0;}
.cdash-spark{flex:0 1 112px;min-width:56px;height:44px;}
.cdash-spark svg{width:100%;height:100%;display:block;overflow:visible;}
.cdash-kpi-foot{display:flex;align-items:center;gap:9px;}
.cdash-delta{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:7px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;}
.cdash-delta.up{background:rgba(16,185,129,.15);color:#4ade80;}
.cdash-delta.down{background:rgba(239,68,68,.15);color:#f87171;}
.cdash-vs{font-size:.72rem;color:rgba(255,255,255,.4);}
.cdash-vs.alerta{color:#f87171;}

/* ── Painéis ── */
#crm-charts-row.visible{display:grid !important;grid-template-columns:minmax(0,1fr) 350px;gap:16px;padding:18px 26px 18px;align-items:stretch;}
.cdash-panel{background:#080c0d;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:18px 20px;box-shadow:0 16px 42px rgba(0,0,0,.42);min-width:0;}
.cdash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.cdash-panel-title{font-family:'Syne',sans-serif;font-size:1.02rem;font-weight:700;color:#fff;letter-spacing:-.3px;}
.cdash-segs{display:flex;gap:2px;}
.cdash-seg{background:none;border:none;color:rgba(255,255,255,.42);font-family:'Inter',sans-serif;font-size:.76rem;font-weight:500;
  padding:7px 13px;border-radius:9px;cursor:pointer;transition:background .16s,color .16s;}
.cdash-seg:hover{color:rgba(255,255,255,.82);}
.cdash-seg.active{background:#1b2323;color:#fff;font-weight:600;}
.cdash-range{background:#1b2323;border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:7px 13px;font-size:.74rem;color:rgba(255,255,255,.68);white-space:nowrap;}

/* Gráfico de linha */
#crm-line-chart{position:relative;}
#crm-line-chart svg{width:100%;height:238px;display:block;overflow:visible;}
/* pathLength="1" no path → dasharray independente do tamanho real da linha. */
#crm-line-chart .crm-line-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:crmDraw 1.8s cubic-bezier(.16,1,.3,1) .2s forwards;}
@keyframes crmDraw{to{stroke-dashoffset:0}}
.cdash-axis{font-family:'Inter',sans-serif;font-size:10.5px;fill:rgba(255,255,255,.34);}
.cdash-chart-empty{display:flex;align-items:center;justify-content:center;height:200px;font-size:.78rem;color:rgba(255,255,255,.26);text-align:center;}

/* Gráfico de barras */
.cdash-bars{display:flex;align-items:stretch;gap:12px;height:238px;}
.cdash-bars-axis{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:22px;font-size:.66rem;color:rgba(255,255,255,.34);font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;}
.cdash-bars-plot{flex:1;display:flex;align-items:flex-end;gap:8px;min-width:0;}
.crm-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;position:relative;min-width:0;}
/* padding-top reserva a faixa onde o balão aparece: sem ela, a barra mais
   alta empurrava o balão para fora do painel. */
.crm-bar-area{flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center;position:relative;padding-top:34px;}
.crm-bar{position:relative;width:100%;max-width:26px;min-height:0;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#0f766e,#115e59);
  transition:height .7s cubic-bezier(.16,1,.3,1),filter .15s;}
.crm-bar.crm-bar-current{background:linear-gradient(180deg,#6ee7b7,#22d3ee);box-shadow:0 0 20px rgba(110,231,183,.35);}
.crm-bar-col:hover .crm-bar{filter:brightness(1.25);}
.crm-bar-lbl{font-size:.66rem;color:rgba(255,255,255,.42);text-transform:capitalize;}
.crm-bar-lbl.crm-bar-lbl-current{color:#fff;font-weight:600;}
.crm-bar-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;background:#1b2323;
  border-radius:7px;padding:4px 9px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;color:#fff;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .14s;z-index:5;box-shadow:0 6px 16px rgba(0,0,0,.45);}
.crm-bar-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1b2323;}
.crm-bar-col:hover .crm-bar-tooltip,.crm-bar-tooltip.fixa{opacity:1;}

/* ── Tabela ── */
#crm-board.visible{display:block !important;padding:0 26px 26px;}
.cdash-panel-table{padding:20px 22px 6px;}
.crm-table-toolbar{margin-bottom:4px;flex-wrap:wrap;}
.crm-toolbar-title{font-family:'Syne',sans-serif;font-size:1.08rem;font-weight:700;}
.crm-count-badge{background:rgba(45,212,191,.14);color:#5eead4;font-size:.66rem;padding:3px 11px;border-radius:20px;font-weight:700;}
.crm-client-meta{display:flex;flex-wrap:wrap;gap:3px 9px;margin-top:3px;max-width:300px;}
.crm-client-meta span{font-size:.64rem;color:rgba(94,234,212,.54);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px;}
.cdash-pill-btn{display:inline-flex;align-items:center;gap:7px;background:#1b2323;border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);border-radius:10px;padding:9px 14px;font-family:'Inter',sans-serif;font-size:.76rem;font-weight:500;
  cursor:pointer;transition:background .16s,color .16s;white-space:nowrap;}
.cdash-pill-btn:hover{background:#252e2e;color:#fff;}
.cdash-pill-btn svg{width:14px;height:14px;flex-shrink:0;}
.google-sheet-btn{border-color:rgba(52,211,153,.17);background:rgba(16,185,129,.07);}
.google-sheet-btn:hover{background:rgba(16,185,129,.15);border-color:rgba(52,211,153,.3);}
.google-app-mark{width:18px;height:18px;border-radius:4px;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;font-size:.73rem;font-weight:800;line-height:1;}
.google-app-mark.sheets,.google-export-logo.sheets{background:#0f9d58;}
.google-app-mark.docs,.google-export-logo.docs{background:#4285f4;}
.google-export-modal,.google-result-modal{width:min(430px,92vw);text-align:center;padding:28px;}
.google-export-logo{width:48px;height:48px;border-radius:14px;margin:0 auto 15px;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:1.35rem;font-weight:800;
  box-shadow:0 10px 26px rgba(0,0,0,.28);}
.google-export-privacy{display:flex;flex-direction:column;gap:5px;text-align:left;margin:20px 0;
  padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:11px;
  background:rgba(255,255,255,.035);}
.google-export-privacy b{font-size:.75rem;color:rgba(240,240,240,.78);}
.google-export-privacy span{font-size:.69rem;line-height:1.55;color:rgba(240,240,240,.42);}
.google-export-error{min-height:0;margin:-8px 0 12px;color:#fca5a5;font-size:.72rem;line-height:1.45;}
.google-export-error:empty{display:none;}
.google-result-check{width:50px;height:50px;margin:0 auto 15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,.15);
  border:1px solid rgba(52,211,153,.32);color:#6ee7b7;font-size:1.25rem;font-weight:800;}
.google-result-check.warning{background:rgba(245,158,11,.14);border-color:rgba(251,191,36,.32);color:#fbbf24;}
.google-result-warning{margin:15px 0 4px;padding:11px 13px;border:1px solid rgba(251,191,36,.22);
  border-radius:10px;background:rgba(245,158,11,.08);color:#fde68a;font-size:.72rem;line-height:1.5;text-align:left;}
.google-result-open{display:flex;align-items:center;justify-content:center;text-decoration:none;flex:1;}
.cdash-pill-btn.ativo{background:rgba(45,212,191,.16);border-color:rgba(45,212,191,.3);color:#5eead4;}
.cdash-pill-btn.danger{color:#f87171;}
.cdash-pill-btn.danger:hover{background:rgba(239,68,68,.16);color:#fca5a5;}
.crm-table-wrap{background:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important;}
.crm-table thead tr{background:transparent !important;border-bottom:1px solid rgba(255,255,255,.09) !important;}
.crm-table th{padding:14px 14px !important;font-size:.62rem !important;letter-spacing:1.2px !important;color:rgba(255,255,255,.4) !important;}
.crm-table td{padding:14px 14px !important;font-size:.86rem !important;border-bottom:1px solid rgba(255,255,255,.05) !important;}
.crm-table tbody tr:hover{background:rgba(255,255,255,.03) !important;}
.crm-table tbody tr.overdue-row{border-left:none;}
.cdash-id{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:rgba(255,255,255,.55);white-space:nowrap;}
.crm-avatar{width:44px !important;height:44px !important;border-radius:10px !important;font-size:.9rem !important;color:#04120f !important;box-shadow:0 3px 10px rgba(0,0,0,.35) !important;}
.crm-client-name{font-weight:500 !important;font-size:.88rem !important;max-width:230px;}
.crm-value-cell{font-size:.9rem !important;font-weight:600 !important;color:#fff !important;font-family:'Inter',sans-serif !important;}
.crm-date-cell{color:rgba(255,255,255,.66);}
.crm-status-pill{border-radius:20px;padding:5px 13px;font-size:.7rem;font-weight:600;text-transform:none;letter-spacing:0;border:none;}
.crm-status-pill .crm-status-dot{display:none;}
.crm-status-pill.paid{background:rgba(16,185,129,.16);color:#34d399;}
.crm-status-pill.pending{background:rgba(234,179,8,.16);color:#fde047;}
.crm-status-pill.overdue{background:rgba(239,68,68,.16);color:#f87171;animation:none;}
.cdash-kebab{width:28px;height:28px;border:none;background:none;border-radius:8px;color:rgba(255,255,255,.4);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.cdash-kebab:hover{background:rgba(255,255,255,.08);color:#fff;}
.cdash-kebab svg{width:16px;height:16px;}

/* Menu flutuante (kebab da linha, Filtrar, Ordenar por) */
.cdash-menu{position:fixed;background:#12191a;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:6px;
  box-shadow:0 22px 54px rgba(0,0,0,.65);z-index:9000;min-width:186px;animation:crmCardRise .16s ease both;}
.cdash-menu-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;border-radius:8px;padding:9px 11px;
  font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(255,255,255,.78);cursor:pointer;text-align:left;transition:background .13s,color .13s;}
.cdash-menu-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.cdash-menu-item.sel{color:#5eead4;}
.cdash-menu-item.danger{color:#f87171;}
.cdash-menu-item.danger:hover{background:rgba(239,68,68,.14);}
.cdash-menu-item svg{width:14px;height:14px;flex-shrink:0;}

/* ══════════════════════════════════════════════════════════════
   MODELO DE RECRUTAMENTO (docs/js/rh.js)
   A mesma faixa, os mesmos cartões e os mesmos painéis — só o que
   está DENTRO deles muda. Por isso aqui só existe o que o funil
   acrescenta: o botão largo da faixa, as colunas e os cartões.
   ══════════════════════════════════════════════════════════════ */

/* O botão "Alterar modelo" é o mesmo da faixa, com rótulo ao lado do ícone:
   um ícone sozinho não diria que existem dois modelos de leitura. */
.cdash-hero-btn-larga{width:auto;gap:8px;padding:0 15px;font-family:'Inter',sans-serif;
  font-size:.8rem;font-weight:500;white-space:nowrap;}
.cdash-hero-btn-larga svg{width:16px;height:16px;}
.cdash-hero-btn-larga.rh-ligado{background:rgba(167,139,250,.22);border-color:rgba(167,139,250,.45);color:#ddd6fe;}

#crm-funil{padding:14px 0 18px;}

/* Colunas lado a lado com rolagem horizontal PRÓPRIA: sem isto, seis etapas
   empurravam a página inteira para o lado e a barra de rolagem do corpo
   aparecia embaixo de tudo. */
.rh-funil{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;align-items:flex-start;}
.rh-col{flex:0 0 244px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  border-radius:13px;padding:11px;min-width:0;}
.rh-col-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 3px;}
.rh-col-nome{flex:1;font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.82);
  letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rh-col-num{background:rgba(167,139,250,.16);color:#c4b5fd;font-size:.66rem;font-weight:700;
  padding:2px 9px;border-radius:20px;font-variant-numeric:tabular-nums;}
.rh-col-body{display:flex;flex-direction:column;gap:9px;min-height:78px;border-radius:10px;
  transition:background .15s,box-shadow .15s;}
.rh-col-body.sobre{background:rgba(167,139,250,.1);box-shadow:inset 0 0 0 1px rgba(167,139,250,.35);}
.rh-col-vazia{display:flex;align-items:center;justify-content:center;min-height:78px;padding:10px;
  font-size:.7rem;color:rgba(255,255,255,.22);text-align:center;line-height:1.4;}

.rh-card{background:#0e1415;border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:11px 12px 9px;
  cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;
  animation:crmCardRise .32s cubic-bezier(.16,1,.3,1) both;}
.rh-card:hover{border-color:rgba(167,139,250,.4);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.42);}
.rh-card:focus-visible{outline:2px solid #a78bfa;outline-offset:2px;}
.rh-card.arrastando{opacity:.42;}
.rh-card-rep{opacity:.55;}
.rh-card-ok{border-color:rgba(52,211,153,.35);}
/* Cartão do funil, no desenho do conceito: retrato redondo, nome, cargo por
   baixo, e a linha de rodapé com o LOCAL da pessoa à esquerda e HÁ QUANTO
   TEMPO a candidatura chegou à direita. Numa coluna com dezenas de nomes, é
   essa linha que separa quem se inscreveu agora de quem espera há uma semana. */
.rh-card-top{display:flex;align-items:flex-start;gap:9px;}
.rh-card-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:700;color:#04120f;flex-shrink:0;}
.rh-card-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.rh-card-nome{font-size:.82rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rh-card-cargo{font-size:.68rem;color:rgba(255,255,255,.44);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
/* A estrela é a nota 80+ da triagem por IA, não um favorito escolhido a dedo. */
.rh-card-estrela{color:#fbbf24;font-size:.78rem;line-height:1;margin-top:2px;flex-shrink:0;}
/* Cor não decide nada sozinha: os dois selos carregam a palavra escrita. */
.rh-card-selo{display:inline-block;margin-top:7px;font-size:.6rem;font-weight:700;
  padding:2px 7px;border-radius:20px;white-space:nowrap;}
.rh-card-selo.rep{background:rgba(239,68,68,.16);color:#f87171;}
.rh-card-selo.ok{background:rgba(16,185,129,.16);color:#34d399;}
.rh-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin-top:7px;}
.rh-card-meta span{font-size:.64rem;color:rgba(255,255,255,.4);white-space:nowrap;}
.rh-card-local{overflow:hidden;text-overflow:ellipsis;max-width:100%;}
/* Empurra o tempo para a direita da linha, como no conceito. */
.rh-card-quando{margin-left:auto;}
/* Criar candidato já na coluna certa: quem chega por indicação não passa pela
   triagem, e obrigar a criar no começo e arrastar é trabalho à toa. */
.rh-col-add{width:100%;margin-top:9px;padding:8px;border:1px dashed rgba(255,255,255,.1);
  border-radius:9px;background:none;color:rgba(255,255,255,.34);
  font-family:'Inter',sans-serif;font-size:.7rem;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.rh-col-add:hover{border-color:rgba(167,139,250,.4);color:#ddd6fe;background:rgba(167,139,250,.07);}
.rh-mv{width:24px;height:22px;border:none;border-radius:7px;background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5);font-size:.9rem;line-height:1;cursor:pointer;transition:background .14s,color .14s;}
.rh-mv:hover{background:rgba(167,139,250,.2);color:#ddd6fe;}
.rh-kebab{font-size:1rem;letter-spacing:0;}
.rh-rep-modal{width:min(460px,94vw);}
/* Aviso de quem está fora do funil. Discreto, mas sempre presente enquanto
   houver alguém escondido — esconder sem avisar é indistinguível de perder. */
.rh-ocultos{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 13px;
  border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  font-size:.73rem;color:rgba(255,255,255,.45);}
.rh-ocultos button{border:none;background:none;padding:0;font-family:'Inter',sans-serif;
  font-size:.73rem;font-weight:600;color:#c4b5fd;cursor:pointer;text-decoration:underline;}
.rh-ocultos button:hover{color:#ddd6fe;}
.rh-kebab:hover{background:rgba(255,255,255,.12);color:#fff;}

/* Item de menu com segunda linha (título da vaga + respostas e data). */
.cdash-menu-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cdash-menu-txt small{font-size:.68rem;color:rgba(255,255,255,.4);}
.cdash-menu-item:hover .cdash-menu-txt small{color:rgba(255,255,255,.55);}

/* Triagem por IA: o botão herda o roxo que o modelo de recrutamento usa em
   todo o resto, para não parecer um recurso vindo de fora. */
.rh-ia-btn{border-color:rgba(167,139,250,.22);background:rgba(167,139,250,.08);color:#ddd6fe;}
.rh-ia-btn:hover{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.4);color:#fff;}
.rh-ia-modal{width:min(520px,94vw);}
/* O aviso NÃO é rodapé em letra miúda: quem vai usar isto para decidir sobre
   a vida de alguém precisa ler antes de clicar, não depois. */
.rh-ia-aviso{margin:16px 0 4px;padding:12px 14px;border:1px solid rgba(167,139,250,.24);
  border-radius:11px;background:rgba(167,139,250,.07);color:rgba(240,240,240,.7);
  font-size:.72rem;line-height:1.55;}
.rh-ia-conta{margin:10px 0 2px;font-size:.72rem;color:rgba(255,255,255,.42);}

/* ── Aviso de etapa ao candidato ──
   O endereço fica em destaque, e não em letra miúda: é a única informação da
   janela que não dá para desfazer depois de clicar em enviar. */
.rh-aviso-modal{width:min(500px,94vw);}
.rh-aviso-dica{margin:-6px 0 2px;font-size:.71rem;line-height:1.5;
  color:rgba(255,255,255,.42);}
.rh-aviso-lembrar{display:flex;align-items:center;gap:8px;margin:14px 0 2px;
  font-size:.74rem;color:rgba(255,255,255,.5);cursor:pointer;}
.rh-aviso-lembrar input{width:15px;height:15px;accent-color:#6366f1;cursor:pointer;}
.rh-ia-formatos{margin:14px 0 0;font-size:.71rem;line-height:1.5;color:rgba(255,255,255,.38);}

/* ── Resultado da triagem ──
   Folha larga, não caixinha. A primeira versão reusava a janela de resumo de
   documento, estreita e feita para texto corrido — comparar cinco candidatos
   ali dentro obrigava a rolar e reler. Aqui cada candidato é um cartão com a
   nota à direita, e a comparação se faz de relance, que é a única razão de
   existir de uma triagem. */
.rh-tri-bg{position:fixed;inset:0;z-index:9500;background:rgba(4,8,10,.78);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;
  animation:crmCardRise .18s ease both;}
.rh-tri-folha{width:min(940px,96vw);max-height:90dvh;display:flex;flex-direction:column;
  background:#080c0d;border:1px solid rgba(255,255,255,.08);border-radius:18px;
  box-shadow:0 28px 70px rgba(0,0,0,.62);overflow:hidden;}
.rh-tri-cab{display:flex;align-items:flex-start;gap:14px;padding:22px 26px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(120deg,rgba(167,139,250,.14),transparent 62%);}
.rh-tri-eyebrow{font-size:.64rem;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(196,181,253,.72);margin-bottom:4px;}
.rh-tri-cab h1{flex:1;margin:0;font-family:'Syne',sans-serif;font-size:1.32rem;font-weight:800;
  letter-spacing:-.5px;color:#fff;}
.rh-tri-cab > div{flex:1;min-width:0;}
.rh-tri-x{width:32px;height:32px;flex-shrink:0;border:none;border-radius:9px;background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.6);font-size:.9rem;cursor:pointer;transition:background .15s,color .15s;}
.rh-tri-x:hover{background:rgba(255,255,255,.12);color:#fff;}
.rh-tri-corpo{flex:1;min-height:0;overflow-y:auto;padding:20px 26px 8px;}

.rh-tri-intro{margin-bottom:18px;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);}
.rh-tri-intro p{margin:0 0 6px;font-size:.82rem;line-height:1.6;color:rgba(240,240,240,.7);}
.rh-tri-intro p:last-child{margin-bottom:0;}
.rh-tri-intro b{color:#c4b5fd;font-weight:600;}

.rh-tri-card{margin-bottom:12px;padding:16px 18px;border-radius:14px;background:#0e1415;
  border:1px solid rgba(255,255,255,.07);}
.rh-tri-card-cab{display:flex;align-items:center;gap:11px;}
.rh-tri-pos{width:26px;height:26px;flex-shrink:0;border-radius:8px;background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.6);font-size:.74rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.rh-tri-nome{flex:1;min-width:0;font-family:'Syne',sans-serif;font-size:1.02rem;font-weight:700;
  color:#fff;letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* A nota vem sempre acompanhada da faixa escrita: cor sozinha não informa. */
.rh-tri-nota{flex-shrink:0;display:flex;align-items:baseline;gap:3px;padding:5px 12px;border-radius:10px;
  font-variant-numeric:tabular-nums;}
.rh-tri-nota b{font-family:'Syne',sans-serif;font-size:1.22rem;font-weight:800;line-height:1;}
.rh-tri-nota i{font-style:normal;font-size:.66rem;opacity:.6;}
.rh-tri-faixa{margin-left:8px;font-size:.66rem;font-weight:600;opacity:.85;align-self:center;white-space:nowrap;}
.rh-tri-nota.n-alta {background:rgba(16,185,129,.14);color:#6ee7b7;}
.rh-tri-nota.n-boa  {background:rgba(45,212,191,.13);color:#5eead4;}
.rh-tri-nota.n-media{background:rgba(234,179,8,.14);color:#fde047;}
.rh-tri-nota.n-baixa{background:rgba(249,115,22,.14);color:#fdba74;}
.rh-tri-nota.n-fora {background:rgba(239,68,68,.13);color:#fca5a5;}
.rh-tri-nota.n-sem  {background:rgba(255,255,255,.05);color:rgba(255,255,255,.42);
  font-size:.72rem;padding:7px 12px;}

.rh-tri-porque{margin:10px 0 0;font-size:.82rem;line-height:1.6;color:rgba(240,240,240,.72);}
.rh-tri-lista{margin:9px 0 0;padding:0;list-style:none;}
.rh-tri-lista li{position:relative;padding-left:18px;margin-bottom:4px;font-size:.8rem;
  line-height:1.55;color:rgba(240,240,240,.66);}
.rh-tri-lista li::before{position:absolute;left:0;top:0;font-weight:700;}
.rh-tri-lista.mais  li::before{content:'+';color:#6ee7b7;}
.rh-tri-lista.menos li::before{content:'−';color:#fdba74;}
.rh-tri-falta{margin:10px 0 0;font-size:.76rem;line-height:1.55;color:rgba(240,240,240,.48);}
.rh-tri-falta b{color:rgba(196,181,253,.8);font-weight:600;}
.rh-tri-solto{margin:8px 0 0;font-size:.8rem;line-height:1.6;color:rgba(240,240,240,.6);
  white-space:pre-wrap;}

/* Currículo não lido não é rodapé: é a coisa que a pessoa tem de resolver
   antes de confiar na ordem da lista. */
.rh-tri-avisos{margin:16px 0 6px;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(251,191,36,.2);background:rgba(245,158,11,.07);}
.rh-tri-avisos-tit{font-size:.76rem;font-weight:700;color:#fde68a;margin-bottom:9px;}
.rh-tri-aviso-item{font-size:.76rem;line-height:1.55;color:rgba(253,230,138,.82);margin-bottom:7px;}
.rh-tri-aviso-item b{color:#fff;font-weight:600;}
.rh-tri-aviso-item span{display:block;color:rgba(240,240,240,.5);font-size:.72rem;}
.rh-tri-comousar{margin:16px 0 4px;font-size:.78rem;line-height:1.6;color:rgba(240,240,240,.55);
  font-style:italic;}

.rh-tri-pe{display:flex;align-items:center;gap:14px;padding:14px 26px;
  border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);}
.rh-tri-nota-pe{flex:1;font-size:.7rem;line-height:1.5;color:rgba(255,255,255,.4);}
.rh-tri-copiar{flex-shrink:0;border:1px solid rgba(255,255,255,.09);border-radius:9px;
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);padding:8px 16px;
  font-family:'Inter',sans-serif;font-size:.76rem;cursor:pointer;transition:background .15s,color .15s;}
.rh-tri-copiar:hover{background:rgba(255,255,255,.12);color:#fff;}

@media(max-width:720px){
  .rh-tri-bg{padding:0;}
  .rh-tri-folha{width:100%;max-height:100dvh;height:100%;border-radius:0;border:none;}
  .rh-tri-cab,.rh-tri-corpo,.rh-tri-pe{padding-left:16px;padding-right:16px;}
  .rh-tri-card-cab{flex-wrap:wrap;}
  .rh-tri-nome{flex-basis:100%;order:-1;white-space:normal;}
}

/* Funil em barras horizontais no painel da direita: o rótulo da etapa é uma
   frase, e frase em pé não se lê. */
.rh-funil-barras{display:flex;flex-direction:column;justify-content:center;gap:11px;height:238px;}
.rh-fb-linha{display:flex;align-items:center;gap:10px;}
.rh-fb-rot{flex:0 0 108px;font-size:.7rem;color:rgba(255,255,255,.6);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rh-fb-trilho{flex:1;height:14px;border-radius:7px;background:rgba(255,255,255,.05);overflow:hidden;min-width:0;}
.rh-fb-barra{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#a78bfa,#22d3ee);
  transition:width .7s cubic-bezier(.16,1,.3,1);}
.rh-fb-num{flex:0 0 26px;text-align:right;font-size:.72rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;}

@media(max-width:720px){
  .rh-funil{display:block;overflow-x:visible;}
  .rh-col{width:100%;margin-bottom:12px;}
  .rh-fb-rot{flex-basis:88px;}
}

@media(max-width:1040px){
  #crm-charts-row.visible{grid-template-columns:1fr !important;}
  .cdash-kpis{grid-template-columns:repeat(auto-fit,minmax(196px,1fr));margin-top:-46px;}
  .cdash-kpi-num{font-size:1.5rem;}
  .cdash-hero{flex-wrap:wrap;padding-bottom:64px;}
  .cdash-hero-title{font-size:1.3rem;}
  .cdash-search{max-width:none;margin-left:0;order:3;flex-basis:100%;}
}

/* CRM — container rolável */
#crm-view{display:none;}
#crm-view.visible{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;}
#crm-view #crm-board.visible{flex:none !important;overflow:visible !important;}

/* ═══════════════════════════════════════════════════════════════════
   VISUALIZADOR DE ARQUIVO — modal centralizado
   Ele era um painel colado à direita da nota, com z-index = "z da nota + 1".
   Como o z das notas cresce a cada clique, qualquer nota clicada depois
   passava na frente dele, e o painel ainda tapava as notas vizinhas. Como
   modal com fundo escurecido ele fica na frente do quadro inteiro, sem
   cobrir nota nenhuma e sem precisar reorganizar o board do usuário.
   Só no desktop: abaixo de 768px o painel vira folha inferior (regra própria).
   ═══════════════════════════════════════════════════════════════════ */
.fv-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  z-index:6150;animation:fvFade .18s ease both;}
@keyframes fvFade{from{opacity:0}to{opacity:1}}
/* Vale também no celular (folha inferior), senão o fundo escuro cobriria o painel. */
.f-viewer{z-index:6200 !important;}

/* ── O BOTÃO DE EXPANDIR ────────────────────────────────────────────────
   Mesma família do × ao lado: mesmo tamanho, mesmo silêncio. Ele não pode
   disputar atenção com o conteúdo — só precisa estar onde a mão procura
   quando a janela ficou pequena. */
.fv-expandir{width:22px;height:22px;border:none;background:none;cursor:pointer;
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  color:rgba(240,240,240,.3);font-size:.82rem;line-height:1;flex-shrink:0;
  transition:background .15s,color .15s,transform .12s;}
.fv-expandir:hover{background:rgba(255,255,255,.09);color:rgba(240,240,240,.9);}
.fv-expandir:active{transform:scale(.92);}
.fv-expandir:focus-visible{outline:2px solid var(--clr-indigo-light);outline-offset:1px;}
/* No celular o painel já é uma folha que ocupa a largura toda: não há o que
   expandir, e um botão que não muda nada é pior que botão nenhum. */
@media (max-width:768px){ .fv-expandir{display:none;} }

@media (min-width:769px){
  .f-viewer{
    top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
    transform:translate(-50%,-50%);
    width:min(860px,92vw) !important;
    height:min(80dvh,780px) !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.75) !important;
    z-index:6200 !important;
    animation:fvPop .2s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes fvPop{
    from{opacity:0;transform:translate(-50%,-50%) scale(.97)}
    to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
  }
  /* EXPANDIDO — não é tela cheia: a margem que sobra é o que mantém visível
     que existe um app atrás, e é por onde se clica para fechar. Tela cheia de
     verdade viraria outra página, e sair dela seria procurar a saída. */
  .f-viewer.expandido{
    width:96vw !important;
    height:94dvh !important;
    /* A transição é do TAMANHO, e a posição fica no centro o tempo todo —
       animar os dois juntos faz a janela derrapar para o canto e voltar. */
    transition:width .26s cubic-bezier(.16,1,.3,1),height .26s cubic-bezier(.16,1,.3,1);
  }
  .f-viewer{transition:width .26s cubic-bezier(.16,1,.3,1),height .26s cubic-bezier(.16,1,.3,1);}
  @media (prefers-reduced-motion:reduce){
    .f-viewer,.f-viewer.expandido{transition:none;}
  }
}


/* ═══════════════════════════════════════════════════════════════════
   BARRA DE PROGRESSO DA CHECKLIST (anunciada na landing)
   ═══════════════════════════════════════════════════════════════════ */
.n-prog{margin:2px 0 9px;overflow:hidden;}
.n-prog>span{display:block;height:100%;width:0;
  transition:width .35s cubic-bezier(.16,1,.3,1);}

/* A PORCENTAGEM DENTRO DA BARRA.
   Ela vem de `content: attr(data-pct)` num `::after`, e não de um elemento
   novo, porque o JS usa `firstElementChild` para achar o preenchimento — um
   filho a mais mudaria qual elemento é o primeiro e a barra pararia de encher.

   A barra cresceu de 6 para 16 pixels: texto de dez pixels não cabe em seis, e
   uma porcentagem impressa por fora tiraria da barra a única vantagem que ela
   tem sobre o selo, que é ser lida sem parar para ler.

   BRANCO COM SOMBRA, E NÃO `mix-blend-mode: difference`. O difference invertia
   o número sozinho sobre cada metade — elegante no papel, ilegível na tela: em
   cima do teal ele devolvia um bordô sujo, e era exatamente no meio do
   progresso que o número precisava ser lido. Branco sólido com uma sombra
   escura curta funciona sobre o trilho vazio E sobre o preenchimento, sem
   depender da cor que estiver embaixo. */
.n-prog{position:relative;height:16px;border-radius:8px;}
.n-prog>span{border-radius:8px;}
.n-prog.com-pct::after{
  content:attr(data-pct);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.03em;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.45);
  pointer-events:none;z-index:2;
}
/* Cores mais fortes que o par indigo/teal antigo, que morria contra o fundo
   escuro da nota quando a barra estava com pouca coisa preenchida. O trilho
   também clareou: com 9% de branco ele sumia, e uma barra sem trilho visível
   não mostra o quanto FALTA — mostra só um risco solto. */
.n-prog{background:rgba(255,255,255,.13);}
.n-prog>span{background:linear-gradient(90deg,#8b5cf6,#3b82f6 55%,#06b6d4);
  box-shadow:0 0 10px -2px rgba(59,130,246,.55);}

/* ── 100%: a barra comemora, uma vez ────────────────────────────────────
   Verde, um brilho que atravessa da esquerda para a direita, e um pulso
   curto. A animação roda UMA vez e para — barra piscando para sempre num
   quadro com vinte notas vira ruído, e quem terminou a tarefa não precisa ser
   lembrado disso o dia inteiro. Quem pediu menos movimento não recebe nenhum.

   A classe `festa` é posta pelo JS só na TRANSIÇÃO para 100%: repintar a nota
   não redispara a comemoração. */
.n-prog.completo>span{
  background:linear-gradient(90deg,#10b981,#34d399);
  box-shadow:0 0 12px -2px rgba(16,185,129,.7);
}
.n-prog.completo::after{color:#04231a;text-shadow:0 1px 1px rgba(255,255,255,.35);}

@keyframes progPulso{
  0%{transform:scaleY(1);}
  35%{transform:scaleY(1.5);}
  100%{transform:scaleY(1);}
}
@keyframes progBrilho{
  from{transform:translateX(-100%);}
  to{transform:translateX(220%);}
}
.n-prog.festa{animation:progPulso .55s cubic-bezier(.16,1,.3,1) 1;}
.n-prog.festa::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:progBrilho .85s ease-out 1;
  pointer-events:none;z-index:1;
}
@media (prefers-reduced-motion:reduce){
  .n-prog.festa{animation:none;}
  .n-prog.festa::before{display:none;}
}
/* Na nota pequena a barra volta a ser só barra: o número não caberia e ficaria
   pior do que não estar lá. */
.note.compacta .n-prog{height:6px;}
.note.compacta .n-prog::after{display:none;}

/* O "+2" dos delegados a mais é contagem, não nome: sem o @ e com o número em
   monoespaçada, para não se confundir com um apelido curto. */
.n-cl-selo.para.mais{font-family:'JetBrains Mono',monospace;font-weight:700;}

/* A porcentagem no selo de conclusão fica um degrau abaixo do "3/5": as duas
   leituras convivem, mas a que se procura primeiro é quantos faltam. */
.n-cl-pct{font-style:normal;margin-left:5px;padding-left:5px;
  border-left:1px solid currentColor;opacity:.62;}

/* ═══════════════════════════════════════════════════════════════════
   CHAT — mesma coloração do reel da landing: bolha própria em gradiente
   violeta, bolha do outro em cinza escuro
   ═══════════════════════════════════════════════════════════════════ */
.chat-msg.mine .chat-bubble{
  background:linear-gradient(135deg,#7c5cff,#5b5bf0) !important;
  color:#fff !important;
  border-radius:14px 14px 4px 14px !important;
  box-shadow:0 3px 12px rgba(99,102,241,.28);}
.chat-msg.theirs .chat-bubble{
  background:#23232e !important;
  color:rgba(240,240,240,.9) !important;
  border-radius:14px 14px 14px 4px !important;
  border:1px solid rgba(255,255,255,.05);}
.chat-msg.mine .chat-time{color:rgba(190,180,255,.55);}

/* ═══════════════════════════════════════════════════════════════════
   A SAÍDA DE UMA PESSOA DO GRUPO
   ═══════════════════════════════════════════════════════════════════
   O bloco do meio do diálogo: o que fica preso ao nome de quem sai, e para
   quem vai. Ele só existe quando há o que transferir — tirar alguém que não
   tocava nada é um clique e um aviso, e uma caixa vazia perguntando "passar
   para quem?" seria uma pergunta sem assunto. */
.saida-heranca{
  width:100%;margin-top:4px;padding:12px;border-radius:12px;text-align:left;
  background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.2);
}
.saida-heranca-tit{
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:700;color:#fcd34d;
}
.saida-heranca-itens{
  display:flex;flex-direction:column;gap:2px;margin-top:5px;
  font-size:.72rem;color:rgba(240,240,240,.5);
}
.saida-para{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:.72rem;color:rgba(240,240,240,.45);
}
.saida-para select{
  flex:1;min-width:0;background:#141414;color:var(--clr-text);
  border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 8px;
  font-family:'Inter',sans-serif;font-size:.75rem;cursor:pointer;outline:none;
}
.saida-para select:focus{border-color:rgba(99,102,241,.45);}

/* ═══════════════════════════════════════════════════════════════════
   A CONVERSA DE GRUPO
   ═══════════════════════════════════════════════════════════════════
   MUDOU EM 04/09/2026: o que é VISUAL vale para as DUAS janelas.
   Aberta ao lado da do grupo, a conversa 1:1 parecia de outro aplicativo —
   fundo escuro contra fundo claro, balão violeta contra balão azul, campo de
   escrever com outro raio. Nada disso era decisão: era o alcance destas
   regras, escrito quando só o grupo existia.

   O que continua sendo SÓ DO GRUPO é o que o diálogo de dois não tem: o
   cabeçalho com a contagem de pessoas, e o rosto com o nome uma vez por
   bloco. Num diálogo de dois só existe um autor possível, e repetir quem
   falou em cada bloco seria ruído puro.

   O que muda é a HIERARQUIA, não a paleta: a bolha continua a mesma (violeta
   para o que eu escrevi, grafite para o resto). O que ganha destaque é quem
   falou; o que perde é o que se repete.
   ═══════════════════════════════════════════════════════════════════ */

/* ── O cabeçalho diz com QUEM se está falando ─────────────────────────── */
.chat-win-grupo .gcw-hdr{
  gap:10px;padding:9px 12px;
  background:linear-gradient(180deg,rgba(99,102,241,.13),rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.chat-minimize-btn{
  width:28px;height:28px;border:0;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.055);color:rgba(240,240,240,.58);
  font:700 1rem/1 'Inter',sans-serif;transition:background .15s,color .15s;
}
.chat-minimize-btn:hover{background:rgba(255,255,255,.1);color:var(--clr-text);}
.chat-minimize-btn:focus-visible{outline:2px solid var(--clr-indigo);outline-offset:2px;}
.gcw-hdr-av{
  width:30px;height:30px;border-radius:10px;flex-shrink:0;position:relative;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  box-shadow:0 3px 10px rgba(79,70,229,.34);font-size:.8rem;
}
.gcw-hdr-ico{font-size:.82rem;line-height:1;}
.gcw-hdr-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.chat-win-grupo .gcw-hdr .chat-title{flex:none;font-size:.81rem;font-weight:700;letter-spacing:-.1px;}
.gcw-hdr-sub{
  font-size:.62rem;color:rgba(240,240,240,.34);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

/* ── O corpo respira: o bloco é a unidade, não a mensagem ─────────────── */
.chat-win .chat-msgs{gap:2px;padding:12px 11px 10px;}
/* Entre falas de pessoas diferentes o espaço é maior — é a pausa que separa
   quem fala. Dentro do bloco as linhas encostam, como uma fala só. */
.chat-win .chat-msg.gcw-abre{margin-top:11px;}
.chat-win .chat-msgs > .chat-msg:first-child{margin-top:0;}
.chat-win .chat-msg{max-width:86%;}

/* ── O dia ────────────────────────────────────────────────────────────
   Uma linha que atravessa a conversa com a data no meio: sem ela, a mensagem
   de ontem às 21:59 e a de hoje às 08:00 são vizinhas indistinguíveis. */
.gcw-dia{
  align-self:stretch;display:flex;align-items:center;gap:10px;
  margin:14px 2px 6px;color:rgba(240,240,240,.28);
  font-size:.6rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
}
.gcw-dia::before,.gcw-dia::after{
  content:"";flex:1;height:1px;background:rgba(255,255,255,.07);
}
.gcw-dia span{flex-shrink:0;}
.chat-win .chat-msgs > .gcw-dia:first-child{margin-top:0;}

/* ── Quem falou ───────────────────────────────────────────────────────
   Rosto e nome uma vez por bloco. O @ fica ao lado, apagado: é o
   identificador exato, e quem precisa dele sabe onde procurar. */
.gcw-autor{
  display:flex;align-items:center;gap:7px;margin:0 0 4px 1px;min-width:0;
}
.gcw-av{
  width:26px;height:26px;flex-shrink:0;display:block;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);overflow:hidden;
}
.gcw-av img,.gcw-av .sg-av-vazio{display:block;}
.gcw-autor-nome{
  font-size:.71rem;font-weight:700;color:rgba(240,240,240,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gcw-autor-arroba{
  font-size:.61rem;color:rgba(240,240,240,.26);flex-shrink:0;
  white-space:nowrap;
}
/* O bloco inteiro na MESMA margem — um balão embaixo do outro, e pronto.

   Aqui morava um degrau: as linhas seguintes entravam 33px, para alinhar com
   o texto do primeiro balão em vez do rosto. Na cabeça fazia sentido; na tela
   virou escada, porque o primeiro balão fica embaixo do rosto e não ao lado
   dele — o rosto está na linha DE CIMA. Então o degrau não alinhava com nada:
   só empurrava as frases seguintes para a direita e desmanchava a coluna.

   Quem diz "ainda é a mesma pessoa" é o canto de cima quadrado do balão, que
   fica. Isso não custa deslocamento nenhum. */
.chat-win .chat-msg.theirs.gcw-segue .chat-bubble{border-top-left-radius:6px;}
.chat-win .chat-msg.mine.gcw-segue .chat-bubble{border-top-right-radius:6px;}

/* ── A hora ───────────────────────────────────────────────────────────
   No fim do bloco, e ao passar o mouse. A hora de cada linha é informação que
   quase nunca se procura e sempre se lê: cobrar atenção por ela em toda linha
   é caro, e some com o texto. */
.chat-win .chat-time{
  opacity:0;max-height:0;margin-top:0;overflow:hidden;
  transition:opacity .14s,max-height .14s,margin-top .14s;
}
.chat-win .chat-msg.gcw-fim .chat-time,
.chat-win .chat-msg:hover .chat-time{opacity:1;max-height:16px;margin-top:3px;}
@media (prefers-reduced-motion:reduce){
  .chat-win .chat-time{transition:none;}
}

/* ── Escrever ─────────────────────────────────────────────────────────── */
.chat-win .chat-input-row{
  padding:9px 10px 10px;gap:7px;
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.02));
}
.chat-win .chat-inp{
  border-radius:14px;padding:8px 12px;background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.07);
}
.chat-win .chat-inp:focus{
  border-color:rgba(124,92,255,.5);background:rgba(124,92,255,.07);
  box-shadow:0 0 0 3px rgba(124,92,255,.1);
}
.chat-win .chat-file-btn,.chat-win .chat-send{
  width:32px;height:32px;border-radius:11px;
}
.chat-win .chat-send{
  background:linear-gradient(135deg,#7c5cff,#5b5bf0);
  box-shadow:0 3px 12px rgba(99,102,241,.3);
  transition:transform .15s,box-shadow .15s,opacity .15s;
}
.chat-win .chat-send:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(99,102,241,.42);}


/* ═══════════════════════════════════════════════════════════════════
   CORES EM GRADIENTE (Premium)
   ═══════════════════════════════════════════════════════════════════ */
.swatch.grad{box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;position:relative;}
.swatch.travado{position:relative;}
.swatch.travado::after{content:'🔒';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:.55rem;background:rgba(0,0,0,.5);border-radius:inherit;}
.swatch.travado:hover{transform:none;}
.n-color-pop .swatch-sep{flex-basis:100%;height:0;margin:3px 0 1px;border-top:1px solid rgba(255,255,255,.08);}
.n-color-pop .swatch-sep::before{content:'Gradientes ⭐';display:block;font-family:'Inter',sans-serif;
  font-size:.55rem;color:rgba(240,240,240,.35);margin-top:4px;letter-spacing:.4px;}

.m-sw.travado{position:relative;opacity:.5;}
.m-sw.travado::after{content:"
F512";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.5rem;background:rgba(0,0,0,.45);border-radius:inherit;}


/* ═══════════════════════════════════════════════════════════════════
   CHAMADA — AO VIVO, cronômetro, onda de áudio e quem está falando
   ═══════════════════════════════════════════════════════════════════ */
.call-header{gap:12px;align-items:center;}
.call-live{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:700;
  color:#fff;background:rgba(239,68,68,.92);padding:4px 10px;border-radius:20px;
  letter-spacing:.5px;flex-shrink:0;font-family:'Inter',sans-serif;}
.call-live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:callPisca 1s steps(1) infinite;}
@keyframes callPisca{0%,49%{opacity:1}50%,100%{opacity:.15}}
.call-timer{font-family:'JetBrains Mono',monospace;font-size:.72rem;
  color:rgba(240,240,240,.5);flex-shrink:0;font-variant-numeric:tabular-nums;}
.call-wave{display:flex;align-items:center;gap:3px;height:20px;margin-left:auto;flex-shrink:0;}
.call-wave i{width:3px;height:12%;border-radius:2px;background:#34d399;
  transition:height .08s linear;}
.call-wave i:nth-child(even){background:#6ee7b7;}
.call-tile.falando{outline:2px solid #34d399;outline-offset:-2px;
  box-shadow:0 0 22px rgba(52,211,153,.35);}
@media(prefers-reduced-motion:reduce){.call-live i{animation:none;}}


/* ═══════════════════════════════════════════════════════════════════
   PASTAS REDIMENSIONÁVEIS — alça na borda direita
   ═══════════════════════════════════════════════════════════════════ */
.stack-wrap{position:relative;}
.stack-resize{position:absolute;top:0;right:0;width:8px;height:100%;cursor:ew-resize;
  z-index:3;background:transparent;transition:background .15s;}
.stack-resize:hover{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14));}
.stack-resize::after{content:'';position:absolute;top:50%;right:2px;width:2px;height:26px;
  border-radius:2px;background:rgba(255,255,255,.18);transform:translateY(-50%);
  opacity:0;transition:opacity .15s;}
.stack-wrap:hover .stack-resize::after{opacity:1;}


/* ═══════════════════════════════════════════════════════════════════
   CHAMADA — avatar enquanto a câmera está fechada
   A chamada começa sem vídeo; o vídeo só aparece quando a pessoa abre.
   ═══════════════════════════════════════════════════════════════════ */
.call-avatar{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(1.6rem,7vw,3rem);color:#fff;
  letter-spacing:-1px;text-shadow:0 2px 12px rgba(0,0,0,.35);}
.call-tile.sem-camera .call-avatar{display:flex;}
.call-tile.sem-camera video{opacity:0;}
.call-ctrl-btn.off{background:rgba(239,68,68,.18) !important;border-color:rgba(239,68,68,.4) !important;
  opacity:.9;position:relative;}
.call-ctrl-btn.off::after{content:'';position:absolute;left:12%;right:12%;top:50%;height:2px;
  background:#f87171;transform:rotate(-20deg);border-radius:2px;}

/* ═══════════════════════════════════════════════════════════════════
   CHECKLIST — mesmo desenho do reel da landing
   Caixa arredondada que enche de verde ao marcar, com o tique desenhado
   em CSS. O texto NÃO fica riscado: na landing o item concluído continua
   legível e quem sinaliza é a caixa verde.
   ═══════════════════════════════════════════════════════════════════ */
.n-cl-item{gap:10px !important;padding:5px 4px !important;}
.n-cl-check{
  appearance:none;-webkit-appearance:none;
  width:17px !important;height:17px !important;flex-shrink:0;
  border-radius:5px;border:1.7px solid rgba(255,255,255,.28);
  background:transparent;cursor:pointer;position:relative;
  transition:background .18s,border-color .18s,transform .18s;}
.n-cl-check:hover{border-color:rgba(52,211,153,.6);}
.n-cl-check:checked{background:#34d399;border-color:#34d399;}
.n-cl-check:checked::after{
  content:'';position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid #06281c;border-width:0 2px 2px 0;transform:rotate(42deg);}
.n-cl-check:active{transform:scale(.88);}
.n-cl-check:checked{animation:clPop .32s cubic-bezier(.34,1.4,.5,1);}
@keyframes clPop{0%{transform:scale(.75)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.n-cl-text{font-size:.79rem !important;color:rgba(255,255,255,.82) !important;}
.n-cl-item.done .n-cl-text{
  color:rgba(255,255,255,.55) !important;
  text-decoration:none !important;}
.n-cl-text::placeholder{color:rgba(255,255,255,.25);}
.n-checklist-head{letter-spacing:.9px;font-size:.58rem;color:rgba(255,255,255,.32);}
.n-checklist-add{transition:transform .15s,color .15s;}
.n-checklist-add:hover{transform:scale(1.18);color:#34d399;}
@media(prefers-reduced-motion:reduce){.n-cl-check:checked{animation:none;}}

/* ═══════════════════════════════════════════════════════════════════
   BARRA DE FERRAMENTAS ACIMA DO QUADRO
   z-index só tem efeito em elemento posicionado. A barra era `static`,
   então o z-index:500 dela nunca valeu de nada: qualquer nota, que é
   `position:absolute`, era pintada por cima dela. Bastava a nota estar
   perto do topo (ou o quadro rolar) para a barra sumir atrás do card.
   ═══════════════════════════════════════════════════════════════════ */
#toolbar{position:relative;z-index:600;}
#crm-dashboard,#crm-view{position:relative;z-index:1;}

/* ═══════════════════════════════════════════════════════════════════
   LINHAS DA PASTA — mais texto do título visível
   O título recebe o nome inteiro; quem cortava era o CSS. Três medidas:
   deixa quebrar em duas linhas, encolhe o respiro lateral e esconde os
   dois botões de ação até passar o mouse (eles sozinhos comiam ~50px).
   ═══════════════════════════════════════════════════════════════════ */
.stack-card-row{gap:9px !important;padding:10px 12px !important;align-items:flex-start !important;}
.stack-card-row-title{
  white-space:normal !important;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;line-height:1.3;word-break:break-word;
  padding-top:1px;}
.stack-card-row-color,.stack-card-row-status{margin-top:2px;}
.stack-card-row-status{max-width:96px;overflow:hidden;}

/* Botões só aparecem no hover: fora dele, o espaço é do título. */
.stack-card-row-expand,.stack-card-row-unstack,.stack-card-row-apagar{
  opacity:0 !important;width:0 !important;min-width:0;padding:0 !important;
  margin:0 !important;overflow:hidden;transition:opacity .14s,width .14s;}
.stack-card-row:hover .stack-card-row-expand,
.stack-card-row:hover .stack-card-row-unstack,
.stack-card-row:hover .stack-card-row-apagar{opacity:1 !important;width:24px !important;}

/* Em tela sensível ao toque não existe hover — os botões ficam visíveis. */
@media (pointer:coarse){
  .stack-card-row-expand,.stack-card-row-unstack,
  .stack-card-row-apagar{opacity:1 !important;width:24px !important;}
}

/* Excluir a nota de dentro da pasta. Vermelho só no hover do próprio botão:
   ele fica ao lado de duas ações reversíveis, e destacá-lo o tempo todo faria
   a linha inteira parecer perigosa. */
.stack-card-row-apagar{
  height:24px;border:none;border-radius:7px;background:none;
  color:rgba(240,240,240,.25);font-size:.72rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stack-card-row-apagar:hover{background:rgba(239,68,68,.18);color:#fca5a5;}

/* Item de fundo bloqueado (vídeo, só Premium) */
/* Item bloqueado — o cadeado é um SELO no canto, não uma tampa.
   Antes ele ocupava a miniatura inteira sobre um fundo escuro liso: os quatro
   fundos em vídeo viravam quatro quadradinhos idênticos com um cadeado, sem
   nenhuma pista do que estavam bloqueando. Agora a prévia aparece — só que
   escurecida e dessaturada, que é o que diz "existe, mas não é seu ainda". */
.wp-gallery-swatch.wp-travado{position:relative;opacity:1;filter:saturate(.65) brightness(.62);}
.wp-gallery-swatch.wp-travado:hover{filter:saturate(.9) brightness(.8);}
.wp-gallery-swatch.wp-travado::after{content:'🔒';position:absolute;right:2px;bottom:1px;
  font-size:.62rem;line-height:1;padding:2px 3px;border-radius:5px;
  background:rgba(0,0,0,.66);box-shadow:0 1px 4px rgba(0,0,0,.5);}


/* ═══════════════════════════════════════════════════════════════════
   INTERRUPTOR DE LEMBRETES POR E-MAIL (Painel pessoal)
   ═══════════════════════════════════════════════════════════════════ */
.ev-lembrete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:10px 0 4px;padding:11px 13px;border:1px solid rgba(255,255,255,.08);
  border-radius:11px;background:rgba(255,255,255,.03);}
.ev-lembrete-txt b{display:block;font-family:'Inter',sans-serif;font-size:.79rem;color:rgba(255,255,255,.9);}
.ev-lembrete-txt span{display:block;font-size:.66rem;color:rgba(255,255,255,.42);margin-top:2px;}
.ev-switch{flex-shrink:0;width:40px;height:22px;border-radius:20px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);cursor:pointer;padding:0;position:relative;transition:background .18s,border-color .18s;}
.ev-switch i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.5);transition:transform .18s,background .18s;}
.ev-switch.on{background:rgba(52,211,153,.28);border-color:rgba(52,211,153,.55);}
.ev-switch.on i{transform:translateX(18px);background:#34d399;}

/* ═══════════════════════════════════════════════════════════════════
   RELATÓRIO FINANCEIRO
   ═══════════════════════════════════════════════════════════════════
   Peça impressa: fundo branco, tinta escura, números tabulares e uma
   hierarquia só — cabeçalho, número-herói com a composição, indicadores,
   tabelas. As cores de estado (recebido/a receber/atrasado) passaram no
   validador de paleta e nunca aparecem sozinhas: todo segmento e toda
   linha trazem o rótulo escrito, para quem imprime em preto e branco ou
   não distingue as cores.
   ═══════════════════════════════════════════════════════════════════ */
.crm-report-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(99,102,241,.14);
  border:1px solid rgba(99,102,241,.32);color:#a5b4fc;border-radius:9px;padding:8px 13px;
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;transition:all .15s;}
.crm-report-btn:hover{background:rgba(99,102,241,.24);}
.crm-report-btn svg{width:14px;height:14px;}

#crm-relatorio{display:none;}
#crm-relatorio.aberto{display:block;position:fixed;inset:0;z-index:9000;overflow:auto;
  background:rgba(6,6,10,.92);backdrop-filter:blur(5px);padding:30px 16px 40px;}

.rel-folha{--tinta:#14141c;--fraca:#6b6b7b;--linha:#e4e4ea;--pago:#0f7a52;--pend:#c98a04;
  --atraso:#b3261e;--barra:#4f46e5;
  max-width:820px;margin:0 auto;background:#fff;color:var(--tinta);border-radius:10px;
  padding:52px 54px 40px;font-family:'Inter',sans-serif;box-shadow:0 30px 90px rgba(0,0,0,.55);
  font-variant-numeric:tabular-nums;}

.rel-masthead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid var(--tinta);padding-bottom:16px;margin-bottom:34px;}
.rel-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--barra);margin-bottom:7px;}
.rel-masthead h1{font-family:'Syne',sans-serif;font-size:1.62rem;letter-spacing:-.6px;margin:0 0 8px;}
.rel-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--fraca);}
.rel-ref{font-family:'JetBrains Mono',monospace;font-size:.68rem;}
.rel-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.15rem;color:var(--barra);flex-shrink:0;}

.rel-hero-rot{font-size:.64rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--fraca);}
.rel-hero-num{font-family:'Syne',sans-serif;font-size:2.5rem;font-weight:800;letter-spacing:-1.5px;
  line-height:1.1;margin:6px 0 18px;}
.rel-comp{display:flex;gap:2px;height:11px;margin-bottom:14px;}
.rel-comp-seg{border-radius:3px;min-width:3px;}
.rel-comp-seg.s-pago{background:var(--pago);} .rel-comp-seg.s-pendente{background:var(--pend);}
.rel-comp-seg.s-atraso{background:var(--atraso);}
.rel-comp-leg{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:34px;}
.rel-comp-item{display:flex;align-items:baseline;gap:7px;font-size:.78rem;}
.rel-comp-item i{width:9px;height:9px;border-radius:3px;flex-shrink:0;align-self:center;}
.rel-comp-item i.s-pago{background:var(--pago);} .rel-comp-item i.s-pendente{background:var(--pend);}
.rel-comp-item i.s-atraso{background:var(--atraso);}
.rel-comp-item b{font-weight:600;} .rel-comp-item span{color:var(--fraca);}

.rel-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:38px;}
.rel-kpi{background:#f8f8fb;border-radius:9px;padding:14px 15px;}
.rel-kpi span{display:block;font-size:.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--fraca);margin-bottom:7px;}
.rel-kpi b{display:block;font-size:1.06rem;font-weight:700;letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rel-kpi em{display:block;font-style:normal;font-size:.72rem;color:var(--fraca);margin-top:3px;}
.rel-kpi.alerta b{color:var(--atraso);}

.rel-folha section{margin-bottom:34px;}
.rel-folha h2{font-family:'Syne',sans-serif;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;
  margin:0 0 12px;display:flex;align-items:center;gap:9px;}
.rel-cont{font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;color:var(--fraca);
  background:#f0f0f5;border-radius:20px;padding:2px 9px;letter-spacing:0;}

.rel-tab{width:100%;border-collapse:collapse;font-size:.8rem;}
.rel-tab th{text-align:left;font-size:.6rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--fraca);border-bottom:1.5px solid var(--tinta);padding:0 8px 7px;}
.rel-tab td{padding:9px 8px;border-bottom:1px solid var(--linha);vertical-align:middle;}
.rel-tab .num{text-align:right;white-space:nowrap;}
.rel-tab tfoot td{border-bottom:none;border-top:1.5px solid var(--tinta);font-weight:700;padding-top:11px;}
.rel-zebra tbody tr:nth-child(even){background:#fafafc;}
.rel-tab td em{display:block;font-style:normal;font-size:.68rem;color:var(--fraca);margin-top:2px;}
.rel-mes{white-space:nowrap;}
.rel-venc{color:var(--fraca);white-space:nowrap;}
.rel-w{width:34%;}
.rel-minibar{display:block;height:8px;border-radius:3px;background:var(--barra);min-width:2px;}
.rel-pill{display:inline-block;font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.rel-pill.s-pago{background:rgba(15,122,82,.12);color:var(--pago);}
.rel-pill.s-pendente{background:rgba(201,138,4,.14);color:#8a5f03;}
.rel-pill.s-atraso{background:rgba(179,38,30,.12);color:var(--atraso);}
.rel-pill.s-parcial{background:rgba(14,116,144,.12);color:#0E7490;}

.rel-rodape{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--linha);padding-top:14px;font-size:.66rem;color:var(--fraca);}

/* As ações moram DENTRO da folha, no fim do documento. Já foram barra fixa na
   base da tela, e ali cobriam uma linha da tabela de clientes enquanto se
   rolava — em captura de página inteira, apareciam atravessadas no meio do
   relatório. Em fluxo, no fim, não há o que cobrir. */
.rel-acoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--linha);}
/* Sobre papel branco, e não mais sobre a faixa escura: o botão precisa de
   contraste com a folha. */
.rel-acoes button{border:1px solid var(--linha);background:#fff;color:var(--tinta);
  border-radius:9px;padding:10px 20px;font-family:'Inter',sans-serif;font-size:.84rem;
  font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;}
.rel-acoes button:hover{background:#f4f4f8;border-color:var(--fraca);}
/* Fechar: pequeno, no canto, sobre o fundo escurecido — fora da folha. */
.rel-x{position:fixed;top:16px;right:16px;z-index:9010;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(10,10,16,.75);
  color:#fff;font-size:1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.rel-x:hover{background:rgba(239,68,68,.55);border-color:rgba(239,68,68,.5);}
.rel-acoes button.primario{background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;
  color:#fff;font-weight:700;}
.rel-acoes button.primario:hover{background:linear-gradient(135deg,#4f46e5,#4338ca);}

@media(max-width:720px){
  .rel-folha{padding:32px 24px;}
  .rel-kpis{grid-template-columns:repeat(2,1fr);}
  .rel-w{display:none;}
}

/* No papel: só a folha, sem fundo escuro nem botões. */
@media print{
  body>*{display:none !important;}
  #crm-relatorio.aberto{display:block !important;position:static !important;background:#fff !important;
    backdrop-filter:none !important;padding:0 !important;overflow:visible !important;}
  .rel-folha{box-shadow:none !important;border-radius:0 !important;padding:0 !important;max-width:none !important;}
  .rel-acoes,.rel-x{display:none !important;}
  .rel-tab{page-break-inside:auto;}
  .rel-tab tr{page-break-inside:avoid;}
  .rel-folha section{page-break-inside:avoid;}
  .rel-zebra tbody tr:nth-child(even){background:#fafafc !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .rel-comp-seg,.rel-minibar,.rel-comp-item i,.rel-pill{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* Visualizador de .docx — folha de papel, com a formatação do documento.
   Ver extrairParagrafos() em app.js: alinhamento, recuos, negrito, itálico,
   sublinhado e realce saem do XML do Word. O que NÃO é reproduzido: fontes
   do documento, tabelas, imagens e numeração automática de lista.
   A largura de 21cm e o corpo serifado imitam a página impressa, que é como
   um documento em ABNT é conferido. */
.fv-docx{max-width:760px;margin:0 auto;padding:44px 52px 60px;
  background:#f6f4ef;color:#16161a;
  font-family:Georgia,'Times New Roman',serif;font-size:.94rem;line-height:1.68;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  box-shadow:0 6px 30px rgba(0,0,0,.5);}
.fv-docx p{margin:0 0 .55rem;text-align:justify;}
.fv-docx h2,.fv-docx h3,.fv-docx h4{font-family:Georgia,'Times New Roman',serif;
  font-weight:700;color:#000;margin:1.3rem 0 .6rem;line-height:1.4;}
.fv-docx h2{font-size:1.12rem;}
.fv-docx h3{font-size:1.02rem;}
.fv-docx h4{font-size:.96rem;}
.fv-docx h2:first-child,.fv-docx h3:first-child,.fv-docx h4:first-child{margin-top:0;}
.fv-docx strong{font-weight:700;color:#000;}
.fv-docx em{font-style:italic;}
.fv-docx u{text-decoration:underline;text-underline-offset:2px;}
.fv-docx mark{background:#fdf0a0;color:inherit;padding:0 1px;}
.fv-docx sup,.fv-docx sub{font-size:.7em;line-height:0;}
/* Citação com mais de 3 linhas na ABNT: recuo de 4 cm, corpo menor,
   entrelinha simples e sem aspas. */
.fv-docx .fv-docx-citacao{font-size:.86rem;line-height:1.35;margin-bottom:.8rem;
  color:#2a2a30;}
.fv-docx .fv-docx-lista{position:relative;}
.fv-docx .fv-docx-lista::before{content:'•';position:absolute;left:-1rem;color:#555;}
.fv-docx-vazio{height:.5rem;}
/* Tabela do documento. O leitor antigo pegava os paragrafos de dentro das
   celulas soltos, e a tabela virava frases desgarradas no meio do texto. */
.fv-docx-tbl-wrap{overflow-x:auto;margin:.9rem 0;}
.fv-docx-tbl{border-collapse:collapse;width:100%;font-size:.86rem;}
.fv-docx-tbl th,.fv-docx-tbl td{border:1px solid #c8c4bb;padding:6px 9px;
  text-align:left;vertical-align:top;}
.fv-docx-tbl th{background:#e8e5dd;font-weight:700;}
/* Papel branco não combina com o resto do app no claro do modal — o fundo
   escuro do visualizador fica em volta, e a folha se destaca como papel. */
@media (max-width:640px){.fv-docx{padding:26px 20px 36px;font-size:.9rem;}}

/* ── Lista de workspaces compartilhados (barra de ferramentas) ──
   Ocupou o lugar da rádio Lo-Fi. Mostra em que quadros a pessoa participa
   e qual está aberto agora. */
.ws-lista-pop{position:fixed;z-index:1250;width:300px;max-height:min(420px,70dvh);overflow-y:auto;
  background:#14141c;border:1px solid var(--clr-border-strong);border-radius:14px;
  box-shadow:0 20px 56px rgba(0,0,0,.7);padding:6px;
  animation:wsPopEntra .16s cubic-bezier(.2,.9,.3,1);transform-origin:top left;}
@keyframes wsPopEntra{from{opacity:0;transform:translateY(-5px) scale(.97);}}

/* ── Esqueleto enquanto a lista chega ──
   Três barras com o formato das linhas que vêm: a janela já nasce do tamanho
   final e não dá o salto que empurra o conteúdo quando a lista aparece. O
   brilho que atravessa é o que diferencia "carregando" de "vazio" — barra
   parada passaria por conteúdo cinza. */
.ws-skel{height:38px;border-radius:9px;margin:2px 0;
  background:linear-gradient(100deg,rgba(255,255,255,.045) 30%,rgba(255,255,255,.1) 48%,
    rgba(255,255,255,.045) 66%);background-size:280% 100%;
  animation:wsSkel 1.05s ease-in-out infinite;}
.ws-skel:nth-child(2){opacity:.72;}
.ws-skel:nth-child(3){opacity:.46;}
@keyframes wsSkel{from{background-position:180% 0;}to{background-position:-80% 0;}}

/* Cada item entra logo depois do anterior. O atraso é pequeno de propósito:
   o suficiente para a lista parecer chegar, curto o bastante para não fazer
   ninguém esperar por enfeite. Teto de 8 para uma lista longa não virar
   desfile. */
.ws-lista-item{animation:wsItemEntra .19s ease-out backwards;
  animation-delay:calc(var(--ws-ordem,0) * 22ms);}
@keyframes wsItemEntra{from{opacity:0;transform:translateY(4px);}}

/* Quem pediu menos movimento recebe a lista pronta, sem nada disso. */
@media (prefers-reduced-motion:reduce){
  .ws-lista-pop,.ws-lista-item{animation:none;}
  .ws-skel{animation:none;background:rgba(255,255,255,.06);}
}
.ws-lista-tit{font-size:.62rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:rgba(240,240,240,.3);padding:9px 10px 7px;}
.ws-lista-corpo{display:flex;flex-direction:column;gap:2px;}
.ws-lista-vazio{padding:14px 12px 18px;font-size:.78rem;color:rgba(240,240,240,.4);line-height:1.65;}
.ws-lista-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:9px;background:none;border:1px solid transparent;
  color:var(--clr-text);font-family:'Inter',sans-serif;cursor:pointer;transition:background .15s;}
.ws-lista-item:hover{background:rgba(255,255,255,.06);}
.ws-lista-item.is-aberto{background:rgba(99,102,241,.13);border-color:rgba(99,102,241,.3);}
.ws-lista-ico{font-size:.95rem;flex-shrink:0;}
.ws-lista-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.ws-lista-nome{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-lista-sub{font-size:.68rem;color:rgba(240,240,240,.35);}
.ws-lista-agora{font-size:.6rem;font-weight:700;color:#a5b4fc;background:rgba(99,102,241,.18);
  border-radius:20px;padding:2px 8px;flex-shrink:0;}
/* Lápis do 1:1: só aparece de verdade quando o dedo/ponteiro está na linha,
   para não poluir a lista com um ícone em cada item. No toque não há hover,
   então ele nunca fica invisível — só mais discreto. */
.ws-lista-ren{font-size:.72rem;flex-shrink:0;padding:3px 5px;border-radius:6px;
  opacity:.25;transition:opacity .15s,background .15s;cursor:pointer;}
.ws-lista-item:hover .ws-lista-ren{opacity:.75;}
.ws-lista-ren:hover{opacity:1;background:rgba(255,255,255,.09);}
.ws-lista-ren:focus-visible{opacity:1;outline:2px solid var(--clr-indigo);outline-offset:1px;}

/* ══════════════════════════════════════════════════════════════════
   CONSTRUTOR DE FORMULÁRIO
   Três colunas no desktop (passos · edição · pré-visualização) porque a
   pré-visualização é o que evita publicar um formulário torto: ver o que o
   cliente vai ver, enquanto se edita, vale mais que qualquer explicação.
   No celular ela desce para o fim, em vez de sumir.
   ══════════════════════════════════════════════════════════════════ */
.fm-bg{position:fixed;inset:0;z-index:6500;display:flex;align-items:center;
  justify-content:center;padding:22px;background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.fm-card{width:100%;max-width:1180px;max-height:92dvh;display:flex;flex-direction:column;
  background:#12121a;border:1px solid rgba(255,255,255,.1);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;}
.fm-cab{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);}
.fm-cab-txt{flex:1;min-width:0;}
.fm-h1{font-family:'Syne',sans-serif;font-size:1.22rem;font-weight:800;}
.fm-sub{font-size:.78rem;color:rgba(240,240,240,.4);margin-top:3px;line-height:1.5;}
.fm-voltar,.fm-x{background:rgba(255,255,255,.06);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.6);border-radius:9px;width:31px;height:31px;flex-shrink:0;
  cursor:pointer;font-size:.85rem;line-height:1;}
.fm-voltar:hover,.fm-x:hover{background:rgba(255,255,255,.11);color:var(--clr-text);}
.fm-corpo{flex:1;min-height:0;display:grid;grid-template-columns:200px 1fr 340px;
  gap:0;overflow:hidden;}

.fm-passos{padding:20px 16px;border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;}
.fm-passo{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;}
.fm-passo.atual{background:rgba(99,102,241,.13);}
.fm-passo-n{width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);color:rgba(240,240,240,.45);
  font-size:.7rem;font-weight:700;}
.fm-passo.atual .fm-passo-n{background:var(--clr-indigo);color:#fff;}
.fm-passo.feito .fm-passo-n{background:rgba(16,185,129,.22);color:#6ee7b7;}
.fm-passo-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.fm-passo-txt b{font-size:.8rem;font-weight:600;}
.fm-passo-txt i{font-style:normal;font-size:.66rem;color:rgba(240,240,240,.32);}

.fm-painel{padding:20px 22px;overflow-y:auto;}
.fm-lbl{font-size:.78rem;font-weight:600;color:rgba(240,240,240,.72);margin:16px 0 6px;}
.fm-painel > .fm-lbl:first-child{margin-top:0;}
.fm-opc{color:rgba(240,240,240,.3);font-weight:400;}
.fm-sub2{font-size:.72rem;color:rgba(240,240,240,.35);margin:-2px 0 9px;line-height:1.5;}
.fm-inp{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--clr-border);
  border-radius:10px;padding:10px 12px;font-family:'Inter',sans-serif;
  font-size:.84rem;color:var(--clr-text);}
.fm-inp:focus{outline:none;border-color:rgba(99,102,241,.55);background:rgba(255,255,255,.07);}
.fm-area{resize:vertical;line-height:1.5;}
.fm-cont{text-align:right;font-size:.66rem;color:rgba(240,240,240,.25);margin-top:3px;}

.fm-colunas{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px;}
.fm-campos{display:flex;flex-direction:column;gap:6px;}
.fm-campo{display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
  border-radius:10px;padding:6px 8px;}
.fm-mover{display:flex;flex-direction:column;gap:1px;flex-shrink:0;}
.fm-mover-b{background:none;border:none;color:rgba(240,240,240,.3);cursor:pointer;
  font-size:.52rem;line-height:1;padding:1px 2px;}
.fm-mover-b:hover:not(:disabled){color:var(--clr-text);}
.fm-mover-b:disabled{opacity:.2;cursor:default;}
.fm-campo-rot{flex:1;min-width:0;background:none;border:none;color:var(--clr-text);
  font-family:'Inter',sans-serif;font-size:.78rem;padding:3px 2px;}
.fm-campo-rot:focus{outline:none;}
/* color-scheme:dark faz o navegador abrir a lista nativa em modo escuro. Sem
   ele a lista vinha clara, e o nome de cada grupo — que herda a cor do select,
   quase branca — sumia no fundo branco. */
.fm-campo-tipo{flex-shrink:0;max-width:118px;background:rgba(255,255,255,.05);
  border:1px solid var(--clr-border);border-radius:7px;color:rgba(240,240,240,.6);
  font-family:'Inter',sans-serif;font-size:.68rem;padding:4px 5px;cursor:pointer;
  color-scheme:dark;}
.fm-campo-tipo option{background:#16161f;color:#f0f0f0;}
.fm-campo-tipo optgroup{background:#16161f;color:#a5b4fc;font-weight:700;}
.fm-campo-obr{flex-shrink:0;width:22px;height:22px;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.28);font-size:.85rem;line-height:1;}
.fm-campo-obr.on{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.32);color:#fca5a5;}
.fm-campo-del{flex-shrink:0;background:none;border:none;color:rgba(240,240,240,.25);
  cursor:pointer;font-size:.75rem;padding:2px 3px;}
.fm-campo-del:hover{color:var(--clr-danger-light);}
.fm-opcoes{padding:0 8px 2px 30px;}
.fm-opcoes-inp{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
  border-radius:8px;padding:6px 9px;font-family:'Inter',sans-serif;font-size:.72rem;
  color:var(--clr-text);resize:vertical;line-height:1.5;}
.fm-opcoes-inp:focus{outline:none;border-color:rgba(99,102,241,.45);}
.fm-add{width:100%;margin-top:8px;background:none;border:1px dashed rgba(99,102,241,.35);
  color:#a5b4fc;border-radius:10px;padding:9px;font-family:'Inter',sans-serif;
  font-size:.76rem;font-weight:600;cursor:pointer;}
.fm-add:hover{background:rgba(99,102,241,.08);}

.fm-opts{display:flex;flex-direction:column;gap:9px;}
.fm-opt{display:flex;align-items:flex-start;gap:10px;}
.fm-opt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.fm-opt-txt b{font-size:.76rem;font-weight:600;}
.fm-opt-txt i{font-style:normal;font-size:.66rem;color:rgba(240,240,240,.33);line-height:1.45;}
.fm-chave{flex-shrink:0;width:38px;height:21px;border-radius:20px;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid var(--clr-border);position:relative;
  transition:background .16s;}
.fm-chave::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:rgba(240,240,240,.5);transition:transform .16s,background .16s;}
.fm-chave.on{background:rgba(99,102,241,.55);border-color:rgba(99,102,241,.6);}
.fm-chave.on::after{transform:translateX(17px);background:#fff;}

/* Destino da resposta: uma decisão única, explicada como resultado. Três
   switches independentes deixariam selecionar "cliente" e "nota" ao mesmo
   tempo sem dizer se o envio criaria um ou os dois. */
.fm-destino-cab{display:flex;flex-direction:column;gap:3px;margin:10px 0 1px;padding-top:12px;
  border-top:1px solid var(--clr-border);}
.fm-destino-cab b{font-size:.76rem;color:rgba(240,240,240,.88);}
.fm-destino-cab span{font-size:.65rem;line-height:1.45;color:rgba(240,240,240,.36);}
.fm-destino-grupo{display:flex;flex-direction:column;gap:8px;}
.fm-destino{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) 20px;align-items:start;
  gap:9px;padding:10px;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:10px;
  background:rgba(255,255,255,.025);color:var(--clr-text);cursor:pointer;transition:.16s;
  font-family:'Inter',sans-serif;}
.fm-destino:hover:not(:disabled){background:rgba(99,102,241,.08);border-color:rgba(129,140,248,.28);}
.fm-destino.sel{background:linear-gradient(145deg,rgba(79,70,229,.18),rgba(99,102,241,.07));
  border-color:rgba(129,140,248,.48);box-shadow:0 0 0 1px rgba(99,102,241,.09) inset;}
.fm-destino:focus-visible{outline:2px solid #818cf8;outline-offset:2px;}
.fm-destino:disabled{opacity:.45;cursor:not-allowed;}
.fm-destino-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:rgba(99,102,241,.14);color:#c7d2fe;font-size:.9rem;}
.fm-destino-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fm-destino-txt b{font-size:.72rem;line-height:1.35;color:rgba(240,240,240,.86);}
.fm-destino-txt i{font-style:normal;font-size:.63rem;line-height:1.45;color:rgba(240,240,240,.38);}
.fm-destino-txt small{margin-top:3px;font-size:.59rem;line-height:1.4;color:#a5b4fc;}
.fm-destino-marca{width:18px;height:18px;border:1px solid rgba(255,255,255,.16);border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:.62rem;background:rgba(255,255,255,.04);}
.fm-destino.sel .fm-destino-marca{border-color:#818cf8;background:#6366f1;}

.fm-cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;}
.fm-cor{position:relative;width:100%;height:48px;border-radius:12px;border:2px solid transparent;cursor:pointer;
  transition:transform .16s,box-shadow .16s,border-color .16s;}
.fm-cor::after{content:attr(aria-label);position:absolute;left:8px;right:8px;bottom:5px;color:var(--fm-on,#fff);
  font:700 .54rem 'Inter',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.35);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.fm-cor:hover{transform:translateY(-2px);}
.fm-cor.sel{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.28);}

.fm-erro{min-height:1.2em;font-size:.76rem;color:var(--clr-danger-light);margin-top:11px;}
.fm-rodape{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;}
.fm-btn-pri{background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;color:#fff;
  border-radius:10px;padding:10px 20px;font-family:'Inter',sans-serif;
  font-size:.82rem;font-weight:600;cursor:pointer;}
.fm-btn-pri:disabled{opacity:.6;cursor:wait;}
.fm-btn-sec{background:rgba(255,255,255,.06);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.7);border-radius:10px;padding:10px 18px;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;}
.fm-btn-sec:hover{background:rgba(255,255,255,.1);color:var(--clr-text);}
.fm-publicar{width:100%;padding:13px;}
.fm-ok{font-size:.85rem;font-weight:600;color:#6ee7b7;margin:14px 0 4px;}
.fm-link-row{display:flex;gap:8px;}
.fm-link{font-family:'JetBrains Mono',monospace;font-size:.72rem;}
.fm-fim{width:100%;margin-top:14px;}

/* ── Pré-visualização: o que o cliente vai ver ── */
.fm-previa{border-left:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;
  min-height:0;background:rgba(0,0,0,.18);}
.fm-previa-cab{padding:14px 18px 10px;font-size:.7rem;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:rgba(240,240,240,.3);}
/* A PRÉVIA MOSTRA O QUE VAI SER PUBLICADO, e a página pública virou papel
   claro em 30/08/2026 (ver o cabeçalho do formulario.css). Prévia com o
   desenho antigo é usada para decidir cor, nome e ordem dos campos sobre uma
   tela que não existe mais.

   As cores aqui são fixas de propósito: esta caixa desenha uma página CLARA
   dentro de um app escuro, então ela não pode herdar os tokens do app. */
.fm-previa-tela{--fmp-cor:#6366f1;flex:1;overflow-y:auto;padding:0;margin:0 12px 12px;
  background:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;
  border-top:3px solid var(--fmp-cor);}
.fm-previa-tela>*{margin-left:16px;margin-right:16px;}
.fmp-brand{display:flex;align-items:center;gap:7px;margin:16px 16px 18px;color:#16161a;}
/* Na prévia, o nome próprio do escritório segue a mesma composição da página
   pública: letra aberta e peso contido, sem o quadrado da inicial ao lado.
   Se a prévia compuser diferente, ela deixa de servir para decidir. */
.fmp-brand-proprio{font-size:.94rem;font-weight:600;letter-spacing:.015em;}
.fmp-brand-mark{width:21px;height:21px;border-radius:6px;color:var(--fmp-on,#fff);
  background:var(--fmp-cor);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font:800 .6rem 'Syne',sans-serif;}
.fmp-brand b{font:700 .76rem 'Inter',sans-serif;letter-spacing:-.2px;}
.fmp-brand i{margin-left:auto;font-style:normal;font-size:.54rem;color:#9a9aa4;}
.fmp-eyebrow{font-size:.5rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#9a9aa4;margin-bottom:6px;}
.fmp-tit{font-family:'Syne',sans-serif;font-size:1.02rem;font-weight:700;
  color:#16161a;margin-bottom:5px;letter-spacing:-.4px;overflow-wrap:anywhere;}
.fmp-desc{font-size:.72rem;color:#4a4a55;line-height:1.6;
  margin-bottom:14px;overflow-wrap:anywhere;}
/* As seções da página pública, no mesmo desenho: número em bloco (a cor
   escolhida pode ser clara) e o título sobre um filete. */
.fmp-secao{display:flex;align-items:center;gap:8px;margin:16px 16px 10px;
  padding-bottom:6px;border-bottom:1px solid #e4e4e1;}
.fmp-secao-n{min-width:21px;height:17px;padding:0 5px;border-radius:5px;
  display:grid;place-items:center;flex-shrink:0;font:700 .56rem 'Inter',sans-serif;
  color:#16161a;background:color-mix(in srgb,var(--fmp-cor) 16%,#fff);}
.fmp-secao-t{font-size:.68rem;font-weight:700;color:#16161a;}
.fmp-campo{margin-bottom:11px;}
.fmp-rot{font-size:.68rem;font-weight:600;color:#4a4a55;margin-bottom:4px;
  overflow-wrap:anywhere;}
.fmp-req{color:#b42318;}
.fmp-caixa{background:#fdfdfc;border:1px solid #d3d3cf;
  border-radius:7px;padding:8px 10px;font-size:.7rem;color:#a9a9b2;}
.fmp-caixa.alto{min-height:44px;}
.fmp-caixa.arquivo{border-style:dashed;text-align:center;padding:14px 10px;background:#fafaf9;}
.fmp-botao{margin:14px 16px 0;background:var(--fmp-cor);color:var(--fmp-on,#fff);border-radius:8px;
  padding:11px;text-align:center;font-size:.78rem;font-weight:700;}
.fmp-seguro{text-align:center;margin:10px 16px 16px;font-size:.52rem;color:#9a9aa4;line-height:1.45;}

@media(max-width:1040px){
  .fm-corpo{grid-template-columns:1fr;overflow-y:auto;}
  .fm-passos{flex-direction:row;border-right:none;
    border-bottom:1px solid rgba(255,255,255,.07);overflow-x:auto;}
  .fm-passo-txt i{display:none;}
  .fm-previa{border-left:none;border-top:1px solid rgba(255,255,255,.07);}
  .fm-colunas{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .fm-bg{padding:0;}
  .fm-card{max-height:100dvh;height:100dvh;border-radius:0;border:none;}
}

/* ══ A NOTA DE FORMULÁRIO ══════════════════════════════════════════════
   Ela era um post-it de tarefa com um formulário pendurado no rodapé:
   oferecia Início, Prazo, Checklist e "Anexar arquivo" — quatro coisas que
   não existem para um formulário — e enterrava as três que existem.

   O que ela É: um link público que colhe respostas. Então o painel do
   formulário sobe para o topo (ver `montarFaixaFormulario`) e o que não
   serve sai da frente.

   A COR CONTINUA. Ela é como a pessoa agrupa as notas no quadro, e isso vale
   para formulário como vale para o resto — foi a única das cinco que ficou. */
.nota-formulario .n-dates,
.nota-formulario .n-checklist-wrap,
.nota-formulario .n-ficha-edit,
.nota-formulario .n-files{display:none;}
/* O primeiro filete separava o corpo do bloco de datas, que aqui não existe
   mais — sem isto sobraria uma linha solta acima do painel. */
.nota-formulario .n-expand-area > .n-sep:first-of-type{display:none;}
/* O filete da esquerda diz, no quadro cheio, que esta nota é de outra
   natureza — antes de ler o título. */
.nota-formulario{border-left:2px solid rgba(99,102,241,.5);}

/* ══ O PAINEL DO FORMULÁRIO, DENTRO DA NOTA ══ */
.n-form-faixa{margin:10px;padding:12px 13px 13px;border-radius:12px;
  border:1px solid rgba(99,102,241,.22);
  background:linear-gradient(160deg,rgba(99,102,241,.13),rgba(99,102,241,.05));}
.n-form-cab{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
.n-form-tag{font-size:.55rem;font-weight:800;letter-spacing:1.3px;color:#a5b4fc;}
/* O NÚMERO É A NOTÍCIA: a única pergunta que se faz ao olhar um formulário
   no quadro é "chegou alguma coisa?". Um contador de 10px ao lado de uma
   etiqueta não respondia; isto responde de longe. */
.n-form-placar{display:flex;align-items:baseline;gap:7px;margin-bottom:11px;}
.n-form-cont{font-family:'Syne',sans-serif;font-size:1.7rem;font-weight:800;
  line-height:1;color:#fff;letter-spacing:-1px;}
.n-form-cont-rot{font-size:.7rem;font-weight:600;color:rgba(240,240,240,.45);}
.n-form-acoes{display:flex;gap:6px;flex-wrap:wrap;}
.n-form-b{flex:1;min-width:66px;background:rgba(255,255,255,.05);
  border:1px solid var(--clr-border);color:rgba(240,240,240,.72);
  border-radius:8px;padding:6px 9px;font-family:'Inter',sans-serif;
  font-size:.68rem;font-weight:600;cursor:pointer;transition:all .15s;}
.n-form-b:hover{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.35);color:#c7d2fe;}
/* "Respostas" é a ação que se procura; as outras duas são apoio. */
.n-form-b.forte{background:rgba(99,102,241,.9);border-color:transparent;color:#fff;}
.n-form-b.forte:hover{background:rgba(99,102,241,1);color:#fff;}

/* ══ PAINEL DE RESPOSTAS ══ */
.fr-bg{position:fixed;inset:0;z-index:6450;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(0,0,0,.7);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.fr-card{width:100%;max-width:620px;max-height:86dvh;display:flex;flex-direction:column;
  background:#14141d;border:1px solid rgba(255,255,255,.1);border-radius:16px;
  box-shadow:0 26px 66px rgba(0,0,0,.6);overflow:hidden;}
.fr-cab{display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);}
.fr-tit{flex:1;min-width:0;font-family:'Syne',sans-serif;font-size:.98rem;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fr-x{background:none;border:none;color:rgba(240,240,240,.4);font-size:.95rem;
  cursor:pointer;padding:2px 4px;}
.fr-x:hover{color:var(--clr-text);}
.fr-corpo{flex:1;overflow-y:auto;padding:14px 18px 18px;
  display:flex;flex-direction:column;gap:10px;}
.fr-vazio{font-size:.8rem;color:rgba(240,240,240,.3);line-height:1.6;padding:16px 0;
  text-align:center;}
.fr-item{background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
  border-radius:12px;padding:12px 14px;}
.fr-item-cab{font-size:.65rem;color:rgba(240,240,240,.3);margin-bottom:8px;}
/* Foto que veio na resposta: mesmo circulo do cartao do funil. */
.fr-foto{width:54px;height:54px;border-radius:50%;overflow:hidden;margin-bottom:9px;
  border:1px solid var(--clr-border);}
.fr-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.fr-tabela{display:flex;flex-direction:column;gap:5px;}
.fr-linha{display:grid;grid-template-columns:minmax(90px,34%) 1fr;gap:10px;
  font-size:.76rem;line-height:1.5;}
.fr-k{color:rgba(240,240,240,.38);overflow-wrap:anywhere;}
.fr-v{color:rgba(240,240,240,.88);overflow-wrap:anywhere;white-space:pre-wrap;}
.fr-anexo{display:inline-block;margin-top:9px;font-size:.72rem;color:#a5b4fc;
  text-decoration:none;background:rgba(99,102,241,.12);border-radius:7px;padding:5px 10px;}
.fr-anexo:hover{background:rgba(99,102,241,.22);}
/* ── Ficha por nicho dentro da nota de cliente ──
   Linha de dado: ícone, rótulo pequeno em cima, valor embaixo. Rótulo em cima
   e não ao lado porque a nota é estreita — lado a lado, um "Processo" já come
   metade da largura e sobra pouco para o número. */
.n-client-sep{height:1px;background:rgba(255,255,255,.08);margin:7px 0 6px;}
.n-cli-tag{display:inline-flex;align-items:center;gap:4px;font-family:'Inter',sans-serif;
  font-size:.6rem;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:20px;
  background:rgba(99,102,241,.16);color:#a5b4fc;margin-bottom:7px;}
.n-cli-campo,.n-cli-pessoa{display:flex;align-items:flex-start;gap:7px;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.05);}
.n-cli-pessoa{align-items:center;}
.n-cli-ico,.n-cli-pessoa-ico{font-size:.72rem;line-height:1.3;flex-shrink:0;opacity:.75;
  width:14px;text-align:center;}
.n-cli-campo-txt,.n-cli-pessoa-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.n-cli-k{font-family:'Inter',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:rgba(240,240,240,.34);}
.n-cli-v{font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.86);
  overflow-wrap:anywhere;}
.n-cli-sub{font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.5);
  overflow-wrap:anywhere;}
/* Etiqueta de estado: cor SEMPRE acompanhada de texto — em nota colorida, cor
   sozinha não distingue quem não enxerga a diferença. */
.n-cli-selo{flex-shrink:0;align-self:center;font-family:'Inter',sans-serif;font-size:.58rem;
  font-weight:700;padding:2px 7px;border-radius:20px;white-space:nowrap;
  background:rgba(255,255,255,.08);color:rgba(240,240,240,.72);}
.n-cli-clicavel{cursor:pointer;}
.n-cli-clicavel:hover .n-cli-v{color:#a5b4fc;}
.n-cli-seta{align-self:center;color:rgba(240,240,240,.3);font-size:.9rem;flex-shrink:0;}

.n-cli-chk-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:9px 0 5px;}
.n-cli-chk-cont{font-family:'Inter',sans-serif;font-size:.6rem;color:rgba(240,240,240,.4);}
.n-cli-barra{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:7px;}
.n-cli-barra-in{height:100%;border-radius:3px;background:linear-gradient(90deg,#6366f1,#8b5cf6);
  transition:width .25s;}
.n-cli-chk-item{display:flex;align-items:center;gap:7px;padding:3px 0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.n-cli-chk-box{width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
  font-size:.6rem;line-height:1;color:#fff;transition:background .15s,border-color .15s;}
.n-cli-chk-item.feito .n-cli-chk-box{background:#10b981;border-color:#10b981;}
.n-cli-chk-txt{font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.8);
  overflow-wrap:anywhere;}
.n-cli-chk-item.feito .n-cli-chk-txt{color:rgba(240,240,240,.42);text-decoration:line-through;}
.n-cli-chk-item:hover .n-cli-chk-box{border-color:rgba(255,255,255,.45);}

/* ── Modelo da ficha, dentro do cadastro de cliente ── */
.crm-tpl-campos{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.crm-tpl-linha{display:flex;gap:8px;}
.crm-tpl-linha>.crm-modal-inp{flex:1;min-width:0;}
.crm-tpl-selo{flex:0 0 148px;color-scheme:dark;}
.crm-tpl-chk{margin-bottom:14px;}
.crm-tpl-chk-lista{display:flex;flex-direction:column;gap:5px;margin:6px 0 8px;}
.crm-tpl-chk-item{display:flex;align-items:center;gap:8px;}
.crm-tpl-chk-box{width:20px;height:20px;flex-shrink:0;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.22);background:none;color:#fff;font-size:.7rem;line-height:1;
  display:flex;align-items:center;justify-content:center;}
.crm-tpl-chk-item.feito .crm-tpl-chk-box{background:#10b981;border-color:#10b981;}
.crm-tpl-chk-txt{flex:1;min-width:0;background:rgba(255,255,255,.05);
  border:1px solid var(--clr-border);border-radius:7px;padding:6px 9px;
  font-family:'Inter',sans-serif;font-size:.76rem;color:var(--clr-text);outline:none;}
.crm-tpl-chk-item.feito .crm-tpl-chk-txt{color:rgba(240,240,240,.45);text-decoration:line-through;}
.crm-tpl-chk-del{background:none;border:none;color:rgba(240,240,240,.28);cursor:pointer;
  font-size:.8rem;padding:4px 6px;flex-shrink:0;}
.crm-tpl-chk-del:hover{color:#fca5a5;}
.crm-tpl-chk-add{background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.28);
  color:#a5b4fc;border-radius:8px;padding:6px 12px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.74rem;}
.crm-tpl-chk-add:hover{background:rgba(99,102,241,.2);}

.fr-acoes{display:flex;gap:7px;margin-top:11px;}
.fr-b{background:rgba(255,255,255,.06);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.7);border-radius:8px;padding:6px 12px;
  font-family:'Inter',sans-serif;font-size:.72rem;cursor:pointer;}
.fr-b:hover{background:rgba(99,102,241,.15);color:#a5b4fc;}
.fr-b:disabled{opacity:.4;cursor:default;}
.fr-b:disabled:hover{background:rgba(255,255,255,.06);color:rgba(240,240,240,.7);}
.fr-b-del:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.3);color:#fca5a5;}
/* Seletores da importação de respostas. color-scheme:dark para a lista nativa
   abrir escura, como nos demais selects do app. */
.fr-sel{background:rgba(255,255,255,.06);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.7);border-radius:8px;padding:6px 9px;max-width:190px;
  font-family:'Inter',sans-serif;font-size:.72rem;cursor:pointer;color-scheme:dark;}
.fr-sel option{background:#16161f;color:#f0f0f0;}
.fr-sel-form{max-width:none;width:100%;padding:8px 10px;font-size:.78rem;}
.fi-marca{margin-left:8px;color:#6ee7b7;background:rgba(16,185,129,.12);
  border-radius:20px;padding:2px 8px;font-size:.6rem;}
@media(max-width:560px){
  .fr-linha{grid-template-columns:1fr;gap:1px;}
}

/* ══ COMENTÁRIOS NA NOTA ══
   Vive no fim da área expandida, depois dos anexos: é conversa sobre a nota,
   não conteúdo dela, e não pode empurrar o texto para baixo quando a nota
   está fechada. */
.n-coment-wrap{padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.06);
  margin-top:2px;}
.n-coment-head{display:flex;align-items:center;justify-content:space-between;
  font-size:.62rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:rgba(240,240,240,.32);margin-bottom:7px;}
.n-coment-cont{display:inline-block;min-width:15px;text-align:center;
  background:rgba(99,102,241,.2);color:#a5b4fc;border-radius:20px;
  padding:1px 6px;font-size:.6rem;letter-spacing:0;}
.n-coment-cont:empty{display:none;}
.n-coment-lista{display:flex;flex-direction:column;gap:7px;max-height:168px;
  overflow-y:auto;margin-bottom:7px;}
.n-coment-lista:empty{margin-bottom:0;}
.n-coment-vazio{font-size:.68rem;color:rgba(240,240,240,.22);padding:2px 0 4px;}
.n-coment-item{background:rgba(255,255,255,.04);border-radius:9px;padding:6px 8px;}
.n-coment-item.meu{background:rgba(99,102,241,.11);}
.n-coment-cab{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.n-coment-cab b{font-size:.66rem;font-weight:600;color:#a5b4fc;}
.n-coment-hora{font-size:.6rem;color:rgba(240,240,240,.26);flex:1;}
.n-coment-del{background:none;border:none;color:rgba(240,240,240,.22);cursor:pointer;
  font-size:.62rem;padding:0 2px;line-height:1;}
.n-coment-del:hover{color:var(--clr-danger-light);}
.n-coment-txt{font-size:.72rem;line-height:1.5;color:rgba(240,240,240,.8);
  white-space:pre-wrap;word-break:break-word;}
.n-coment-novo{display:flex;align-items:flex-end;gap:6px;}
.n-coment-inp{flex:1;min-width:0;resize:none;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid var(--clr-border);
  border-radius:9px;padding:6px 9px;font-family:'Inter',sans-serif;
  font-size:.72rem;line-height:1.45;color:var(--clr-text);}
.n-coment-inp:focus{outline:none;border-color:rgba(99,102,241,.5);
  background:rgba(255,255,255,.07);}
.n-coment-enviar{flex-shrink:0;background:rgba(99,102,241,.18);
  border:1px solid rgba(99,102,241,.32);color:#a5b4fc;border-radius:9px;
  padding:6px 9px;font-size:.7rem;cursor:pointer;line-height:1;}
.n-coment-enviar:hover{background:rgba(99,102,241,.3);}

/* ── Campo do diálogo de renomear workspace ── */
.ws-nome-inp{width:100%;margin:14px 0 4px;background:rgba(255,255,255,.05);
  border:1px solid var(--clr-border);border-radius:9px;padding:10px 12px;
  font-family:'Inter',sans-serif;font-size:.85rem;color:var(--clr-text);}
.ws-nome-inp:focus{outline:none;border-color:rgba(99,102,241,.55);
  background:rgba(255,255,255,.07);}

/* ── Chamada: tela de chamando e de chamada recebida ──
   O convite antigo era uma faixa dentro do chat e só existia para quem
   estivesse com a janela aberta. Estas telas cobrem a página inteira. */
.chamando-bg,.chamada-bg{position:fixed;inset:0;z-index:6300;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.chamando-card,.chamada-card{background:#14141c;border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:30px 26px;text-align:center;width:min(320px,100%);
  box-shadow:0 30px 80px rgba(0,0,0,.7);}
.chamando-av,.chamada-av{width:74px;height:74px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,#6366f1,#4f46e5);display:flex;align-items:center;
  justify-content:center;font-family:'Syne',sans-serif;font-size:1.7rem;font-weight:800;color:#fff;}
.chamada-av{animation:chamadaPulsa 1.5s ease-in-out infinite;}
@keyframes chamadaPulsa{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.5)}
  50%{box-shadow:0 0 0 14px rgba(99,102,241,0)}}
@media(prefers-reduced-motion:reduce){.chamada-av{animation:none}}
.chamando-nome,.chamada-nome{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700;
  color:var(--clr-text);margin-bottom:5px;}
.chamando-sub,.chamada-sub{font-size:.82rem;color:rgba(240,240,240,.45);margin-bottom:22px;}
.chamando-pts i{font-style:normal;animation:chamandoPt 1.2s infinite;}
.chamando-pts i:nth-child(2){animation-delay:.2s}
.chamando-pts i:nth-child(3){animation-delay:.4s}
@keyframes chamandoPt{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.chamando-pts i{animation:none;opacity:.6}}
.chamada-acoes{display:flex;gap:10px;}
.chamada-acoes button,.chamando-cancelar{flex:1;padding:13px;border-radius:12px;border:none;
  font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;min-height:46px;}
.chamada-atender{background:linear-gradient(135deg,#10b981,#059669);color:#fff;}
.chamada-recusar,.chamando-cancelar{background:rgba(239,68,68,.16);
  border:1px solid rgba(239,68,68,.35)!important;color:#fca5a5;}
.chamando-cancelar{width:100%;}

/* ── Escolha do tipo de pasta, na criação ──
   O tipo já existia, mas só era descoberto renomeando a pasta para
   "Concluído" e esperando o app reconhecer pelo nome. */
.tipo-pasta-bg{position:fixed;inset:0;z-index:6250;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(0,0,0,.68);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.tipo-pasta-card{background:#14141c;border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:24px 22px;width:min(360px,100%);box-shadow:0 26px 70px rgba(0,0,0,.68);}
.tipo-pasta-tit{font-family:'Syne',sans-serif;font-size:1.02rem;font-weight:700;
  color:var(--clr-text);margin-bottom:5px;}
.tipo-pasta-sub{font-size:.76rem;color:rgba(240,240,240,.4);margin-bottom:16px;line-height:1.55;}
.tipo-pasta-ops{display:flex;flex-direction:column;gap:7px;}
.tipo-pasta-op{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:12px 13px;border-radius:11px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);color:var(--clr-text);
  font-family:'Inter',sans-serif;cursor:pointer;transition:background .15s,border-color .15s;}
.tipo-pasta-op:hover{background:rgba(255,255,255,.08);border-color:rgba(99,102,241,.35);}
.tipo-pasta-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.tipo-pasta-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tipo-pasta-txt b{font-size:.86rem;font-weight:600;}
.tipo-pasta-txt span{font-size:.71rem;color:rgba(240,240,240,.38);}
.tipo-pasta-livre{display:flex;gap:8px;margin-top:4px;}
.tipo-pasta-inp{flex:1;min-width:0;background:rgba(255,255,255,.06);
  border:1px solid rgba(99,102,241,.35);border-radius:10px;padding:11px 12px;
  font-family:'Inter',sans-serif;font-size:.86rem;color:var(--clr-text);}
.tipo-pasta-ok{background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;color:#fff;
  border-radius:10px;padding:11px 18px;font-family:'Inter',sans-serif;font-size:.84rem;
  font-weight:600;cursor:pointer;}

/* ── Resumo por IA ── */
.fv-ia-btn{background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;color:#fff;
  border-radius:7px;padding:4px 10px;font-family:'Inter',sans-serif;font-size:.68rem;
  font-weight:600;cursor:pointer;margin-left:auto;flex-shrink:0;white-space:nowrap;}
.fv-ia-btn:disabled{opacity:.55;cursor:wait;}
.ia-resumo-bg{position:fixed;inset:0;z-index:6400;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(0,0,0,.7);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.ia-resumo-card{background:#14141c;border:1px solid rgba(255,255,255,.13);border-radius:18px;
  width:min(560px,100%);max-height:84dvh;display:flex;flex-direction:column;
  box-shadow:0 28px 76px rgba(0,0,0,.7);}
.ia-resumo-cab{display:flex;align-items:center;gap:10px;padding:16px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);}
.ia-resumo-tit{font-family:'Syne',sans-serif;font-size:.98rem;font-weight:700;color:var(--clr-text);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ia-resumo-x{background:none;border:none;color:rgba(240,240,240,.4);font-size:.95rem;
  cursor:pointer;padding:2px 4px;}
.ia-resumo-x:hover{color:var(--clr-text);}
.ia-resumo-corpo{flex:1;overflow-y:auto;padding:16px 18px;}
.ia-resumo-corpo p{font-size:.87rem;line-height:1.7;color:rgba(240,240,240,.86);margin:0 0 11px;}
.ia-resumo-corpo p b{color:#a5b4fc;font-weight:600;}
/* Item de lista dos pontos do PDF: o traço do modelo vira marcador recuado,
   senão a lista some no meio do texto corrido. */
.ia-resumo-corpo p.ia-resumo-item{position:relative;padding-left:16px;margin-bottom:7px;}
.ia-resumo-corpo p.ia-resumo-item::before{content:'';position:absolute;left:3px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:#6366f1;}
.ia-resumo-pe{display:flex;align-items:center;gap:12px;padding:12px 18px 16px;
  border-top:1px solid rgba(255,255,255,.08);}
.ia-resumo-nota{flex:1;font-size:.68rem;color:rgba(240,240,240,.34);line-height:1.5;}
.ia-resumo-copiar{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:var(--clr-text);border-radius:8px;padding:7px 14px;font-family:'Inter',sans-serif;
  font-size:.78rem;cursor:pointer;flex-shrink:0;}
.ia-resumo-copiar:hover{background:rgba(255,255,255,.12);}

/* ══ CALENDÁRIO DO PAINEL PESSOAL ══
   Tomou o lugar do "Conectar Outlook": aquela integração exigia registro de
   aplicativo num diretório da Microsoft, que conta pessoal não cria mais. */
.cal-topo{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.cal-nav{width:26px;height:26px;border-radius:7px;background:var(--clr-border-faint);
  border:1px solid var(--clr-border);color:var(--clr-text);font-size:.95rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cal-nav:hover{background:rgba(255,255,255,.1);}
.cal-mes{flex:1;font-family:'Syne',sans-serif;font-size:.86rem;font-weight:700;
  color:var(--clr-text);text-transform:capitalize;}
.cal-hoje{background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.32);
  color:var(--clr-indigo-light);border-radius:7px;padding:4px 10px;font-family:'Inter',sans-serif;
  font-size:.68rem;font-weight:600;cursor:pointer;flex-shrink:0;}
.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-cab{text-align:center;font-size:.58rem;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:rgba(240,240,240,.25);padding:2px 0 4px;}
.cal-vazio{aspect-ratio:1;}
.cal-dia{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;background:none;border:1px solid transparent;border-radius:8px;cursor:pointer;
  font-family:'Inter',sans-serif;color:rgba(240,240,240,.55);padding:0;transition:background .12s;}
.cal-dia:hover{background:rgba(255,255,255,.06);}
.cal-dia.tem-item{color:var(--clr-text);}
.cal-dia.e-hoje{border-color:rgba(99,102,241,.45);color:var(--clr-indigo-light);font-weight:700;}
/* ── ARRASTAR PARA REMARCAR ────────────────────────────────────────────
   O dia sob o cursor precisa dizer que aceita o cartão ANTES de soltar: sem
   isso a pessoa solta às cegas e descobre o resultado depois. */
.cal-item[draggable="true"]{cursor:grab;}
.cal-item[draggable="true"]:active{cursor:grabbing;}
.cal-item-voando{opacity:.45;}
.cal-dia-alvo{background:rgba(99,102,241,.22)!important;border-color:var(--clr-indigo-light)!important;
  box-shadow:inset 0 0 0 1px var(--clr-indigo-light);}
@media (prefers-reduced-motion: reduce){.cal-item-voando{opacity:.7;}}
.cal-dia.e-sel{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.5);color:#fff;}
.cal-num{font-size:.76rem;line-height:1;}
.cal-pontos{display:flex;gap:2px;align-items:center;height:5px;}
.cal-ponto{width:4px;height:4px;border-radius:50%;display:inline-block;flex-shrink:0;}
.cal-ponto-agenda{background:#818cf8;}
.cal-ponto-nota{background:#f59e0b;}
.cal-ponto-cliente{background:#10b981;}
.cal-ponto-ics{background:#14b8a6;}
.cal-mais{font-style:normal;font-size:.5rem;color:rgba(240,240,240,.4);line-height:1;}
.cal-legenda{display:flex;flex-wrap:wrap;gap:10px;margin:9px 0 4px;
  font-size:.6rem;color:rgba(240,240,240,.32);}
.cal-legenda span{display:flex;align-items:center;gap:4px;}
.cal-dia-detalhe{margin-top:6px;}
.cal-dia-cab{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.cal-dia-tit{flex:1;font-size:.76rem;font-weight:600;color:var(--clr-text);text-transform:capitalize;}
.cal-add{background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));border:none;
  color:#fff;border-radius:7px;padding:5px 10px;font-family:'Inter',sans-serif;font-size:.67rem;
  font-weight:600;cursor:pointer;flex-shrink:0;}
.cal-dica{font-size:.72rem;color:rgba(240,240,240,.3);padding:8px 2px;}
.cal-itens{display:flex;flex-direction:column;gap:4px;}
.cal-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);cursor:pointer;}
.cal-item:hover{background:rgba(255,255,255,.06);}
.cal-item-ico{font-size:.8rem;flex-shrink:0;}
.cal-item-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.cal-item-tit{font-size:.76rem;color:var(--clr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-item-sub{font-size:.62rem;color:rgba(240,240,240,.32);}
.cal-item-del{background:none;border:none;color:rgba(240,240,240,.25);cursor:pointer;
  font-size:.75rem;padding:2px 4px;flex-shrink:0;}
.cal-item-del:hover{color:var(--clr-danger-light);}
.cal-sep{height:1px;background:var(--clr-border);margin:14px 0 10px;}

/* ══ FEED DE ATIVIDADE DO WORKSPACE ══
   Canto INFERIOR ESQUERDO de propósito: os avisos de chat e de convite vivem
   no direito, e misturar as duas coisas seria ruim nos dois sentidos —
   mensagem de pessoa se perderia no meio de "moveu uma nota", e o movimento
   constante do quadro afogaria o que exige resposta.
   O visual é o do cartão "Workspace do time" da landing. */
#ativ-feed{position:fixed;left:16px;bottom:16px;z-index:1550;
  display:flex;flex-direction:column;gap:11px;
  width:min(396px,calc(100vw - 32px));pointer-events:none;}
.ativ-card{--ativ-accent:#818cf8;position:relative;overflow:hidden;pointer-events:auto;
  display:grid;grid-template-columns:40px 32px minmax(0,1fr) 28px;
  align-items:center;gap:11px;min-height:78px;padding:13px 12px 15px;
  background:
    radial-gradient(circle at 4% 0,rgba(99,102,241,.18),transparent 38%),
    linear-gradient(145deg,rgba(24,23,36,.97),rgba(11,12,19,.98));
  border:1px solid color-mix(in srgb,var(--ativ-accent) 28%,rgba(255,255,255,.08));
  border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  animation:ativEntra .48s cubic-bezier(.16,1,.3,1) both;}
.ativ-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 25%,rgba(255,255,255,.045) 48%,transparent 72%);
  transform:translateX(-115%);animation:ativBrilho .95s ease .14s both;}
.ativ-card--delegou,.ativ-card--liberou{--ativ-accent:#c084fc;}
.ativ-card--concluiu{--ativ-accent:#34d399;}
.ativ-card--removeu,.ativ-card--limpou{--ativ-accent:#fb7185;}
.ativ-card--comentou,.ativ-card--resposta{--ativ-accent:#22d3ee;}
.ativ-card--anexou,.ativ-card--prazo{--ativ-accent:#fbbf24;}
@keyframes ativEntra{
  from{opacity:0;transform:translate3d(-30px,8px,0) scale(.94);filter:blur(4px);}
  55%{filter:blur(0);}
  to{opacity:1;transform:none;}}
@keyframes ativBrilho{to{transform:translateX(115%);}}
.ativ-card.saindo{animation:ativSai .3s ease forwards;}
@keyframes ativSai{to{opacity:0;transform:translate3d(-24px,-3px,0) scale(.96);filter:blur(2px);}}
@media(prefers-reduced-motion:reduce){
  .ativ-card{animation:ativFade .3s ease both;}
  .ativ-card::before,.ativ-life{animation:none!important;}
  .ativ-card.saindo{animation:ativFadeOut .25s ease forwards;}
  @keyframes ativFade{from{opacity:0}to{opacity:1}}
  @keyframes ativFadeOut{to{opacity:0}}}
.ativ-ico{width:40px;height:40px;display:grid;place-items:center;position:relative;z-index:1;
  color:var(--ativ-accent);border:1px solid color-mix(in srgb,var(--ativ-accent) 30%,transparent);
  border-radius:13px;background:color-mix(in srgb,var(--ativ-accent) 12%,transparent);
  font-size:1.05rem;box-shadow:0 8px 24px color-mix(in srgb,var(--ativ-accent) 12%,transparent);}
.ativ-av{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--clr-indigo),var(--clr-indigo-dark));
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(255,255,255,.12);
  font-family:'Syne',sans-serif;font-size:.78rem;font-weight:800;color:#fff;}
.ativ-av img{width:100%;height:100%;object-fit:cover;display:block;}
.ativ-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;min-width:0;}
.ativ-linha{font-size:.82rem;line-height:1.45;color:rgba(240,240,240,.78);}
.ativ-linha b{color:color-mix(in srgb,var(--ativ-accent) 82%,#fff);font-weight:700;}
.ativ-linha i{font-style:normal;color:#fff;}
.ativ-meta{display:flex;align-items:center;gap:6px;min-width:0;color:rgba(240,240,240,.28);
  font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;}
.ativ-meta>span+span::before{content:"•";margin-right:6px;}
.ativ-onde{max-width:210px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ativ-close{position:relative;z-index:2;width:28px;height:28px;padding:0;display:grid;place-items:center;
  color:rgba(240,240,240,.32);border:1px solid transparent;border-radius:8px;background:transparent;
  font-size:.92rem;cursor:pointer;transition:color .16s,background .16s,border-color .16s;}
.ativ-close:hover{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.08);}
.ativ-life{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--ativ-accent),transparent);
  transform-origin:left center;animation:ativVida 7s linear both;}
@keyframes ativVida{to{transform:scaleX(0);opacity:.25;}}

/* ══ AVISO RÁPIDO (TOAST) ══
   Irmão do feed acima, de propósito: quem lê "entrou no workspace" e quem lê
   "moveu uma nota" está lendo a mesma coisa — o app avisando. Eram dois
   visuais sem parentesco, e o do toast era uma tarja de 10px de altura que
   sumia no fundo escuro do quadro.

   NÃO HÁ EMOJI AQUI. Os ~300 pontos de chamada continuam passando o deles,
   mas ele não chega à tela: em `toast()` o emoji só escolhe o TOM, e quem
   desenha é um glifo em SVG, traçado, na cor do tom. Emoji é fonte do
   sistema — muda de desenho entre Windows, Android e iPhone, não aceita a
   cor do cartão e sai borrado no tamanho grande.

   Continua no CENTRO EMBAIXO, e não num canto: o feed de atividade mora no
   canto inferior esquerdo e os avisos de chat no direito. Não sobra canto. */
#toast{
  --toast-accent:#818cf8;
  --toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
  position:fixed;bottom:28px;left:50%;z-index:5000;
  display:flex;align-items:stretch;overflow:hidden;
  min-width:min(330px,calc(100vw - 28px));
  max-width:min(520px,calc(100vw - 28px));
  font-family:'Inter',sans-serif;
  background:linear-gradient(150deg,#1a1d2c 0%,#111321 52%,#0b0d15 100%);
  border:1px solid rgba(255,255,255,.07);border-radius:14px;
  box-shadow:0 28px 68px rgba(0,0,0,.7),
             0 0 40px -16px color-mix(in srgb,var(--toast-accent) 70%,transparent),
             0 1px 0 rgba(255,255,255,.05) inset;
  opacity:0;pointer-events:none;
  transform:translate3d(-50%,22px,0) scale(.97);
  transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1);}
#toast.show{opacity:1;transform:translate3d(-50%,0,0) scale(1);}
/* Faixa de luz varrendo o cartão na entrada — por cima de tudo, como no feed. */
#toast::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.06) 47%,transparent 68%);
  transform:translateX(-120%);}
#toast.show::before{animation:toastBrilho 1.05s ease .1s both;}
@keyframes toastBrilho{to{transform:translateX(120%);}}
/* Fio de luz na borda de cima, para o cartão não acabar num corte seco. */
#toast::after{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--toast-accent) 75%,transparent),transparent);}

/* O bloco do ícone encosta na borda e vai de cima a baixo: é ele que dá ao
   cartão a silhueta de aviso, e não um selo solto no meio do estofamento. */
#t-ico{position:relative;flex:0 0 auto;width:60px;align-self:stretch;
  display:grid;place-items:center;color:var(--toast-accent);
  background:linear-gradient(155deg,color-mix(in srgb,var(--toast-accent) 22%,transparent),
                                    color-mix(in srgb,var(--toast-accent) 5%,transparent));
  border-right:1px solid color-mix(in srgb,var(--toast-accent) 20%,rgba(255,255,255,.05));
  box-shadow:inset 3px 0 0 var(--toast-accent);}
#t-ico::before{content:"";display:block;width:23px;height:23px;background:currentColor;
  -webkit-mask:var(--toast-glifo) center/contain no-repeat;
          mask:var(--toast-glifo) center/contain no-repeat;}

.t-corpo{display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-width:0;padding:13px 20px 14px 16px;}
/* O nome do produto no topo, como quem assina o aviso. É marca, não texto de
   interface — por isso não passa pelo i18n. */
.t-marca{font-size:.57rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:color-mix(in srgb,var(--toast-accent) 70%,#ffffff);}
#t-msg{font-size:.92rem;font-weight:600;line-height:1.42;letter-spacing:-.005em;
  color:#eef0f8;overflow-wrap:anywhere;}

/* A barra diz quanto falta para sumir — os mesmos 2,8s do `setTimeout`. */
#t-life{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;pointer-events:none;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--toast-accent),color-mix(in srgb,var(--toast-accent) 12%,transparent));}
#toast.show #t-life{animation:toastVida 2.8s linear both;}
@keyframes toastVida{from{transform:scaleX(1);}to{transform:scaleX(0);opacity:.3;}}

/* Os tons. O emoji da chamada escolhe qual — ver `_toastTom` em app.js. As
   cores são as mesmas do feed de atividade, para os dois avisos combinarem. */
#toast[data-tom="ok"]{--toast-accent:#34d399;--toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}
#toast[data-tom="alerta"]{--toast-accent:#fbbf24;--toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h16.9a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");}
#toast[data-tom="erro"]{--toast-accent:#fb7185;--toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");}
#toast[data-tom="premium"]{--toast-accent:#fcd34d;--toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.6 2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E");}

@media(prefers-reduced-motion:reduce){
  /* Nada de `opacity:1!important` aqui: é a opacidade que ESCONDE o toast, e
     travá-la o deixaria na tela para sempre — Regra 13. */
  #toast{transform:translate3d(-50%,0,0);transition:opacity .2s ease;}
  #toast.show{transform:translate3d(-50%,0,0);}
  #toast::before,#toast.show::before{animation:none;transform:translateX(-120%);}
  #t-life,#toast.show #t-life{animation:none;transform:scaleX(1);opacity:.4;}}
.cal-aviso-nota{font-size:.64rem;color:rgba(240,240,240,.3);line-height:1.5;
  margin:2px 0 10px;padding-left:2px;}

/* ══ RECIBO EM PDF (CRM · Premium) ══ */
.recibo-modal{max-width:560px;max-height:88dvh;overflow-y:auto;}
.recibo-secao{font-size:.64rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--clr-indigo-light);margin:18px 0 8px;padding-bottom:5px;
  border-bottom:1px solid rgba(99,102,241,.2);}
.recibo-secao span{color:rgba(240,240,240,.28);font-weight:500;letter-spacing:0;text-transform:none;}
.recibo-linha{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.recibo-modal .m-lbl{margin-top:8px;}
.recibo-modal textarea.m-inp{resize:vertical;min-height:52px;font-family:'Inter',sans-serif;}
.recibo-check{display:flex;align-items:flex-start;gap:8px;margin-top:14px;
  font-size:.76rem;color:rgba(240,240,240,.55);line-height:1.5;cursor:pointer;}
.recibo-check input{margin-top:2px;flex-shrink:0;accent-color:var(--clr-indigo);}
#rc-erro{min-height:1.2em;font-size:.75rem;color:var(--clr-danger-light);margin-top:10px;}
@media(max-width:560px){.recibo-linha{grid-template-columns:1fr;}}

/* ── Assinatura no recibo ── */
.recibo-assin{background:rgba(255,255,255,.03);border:1px solid var(--clr-border);
  border-radius:10px;padding:12px;}
.recibo-assin-previa{min-height:64px;border-radius:7px;background:#f6f4ef;
  display:flex;align-items:center;justify-content:center;padding:6px;margin-bottom:9px;}
.recibo-assin-previa.vazia{background:rgba(255,255,255,.04);color:rgba(240,240,240,.28);
  font-size:.74rem;}
.recibo-assin-previa img{max-width:100%;max-height:72px;display:block;}
.recibo-assin-acoes{display:flex;gap:8px;align-items:center;}
.recibo-assin-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;
  background:rgba(99,102,241,.16);border:1px solid rgba(99,102,241,.32);
  color:var(--clr-indigo-light);border-radius:8px;padding:7px 13px;
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;}
.recibo-assin-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}
.recibo-assin-limpar{background:none;border:1px solid var(--clr-border);
  color:rgba(240,240,240,.45);border-radius:8px;padding:7px 12px;
  font-family:'Inter',sans-serif;font-size:.76rem;cursor:pointer;}
.recibo-assin-limpar:hover{color:var(--clr-danger-light);border-color:rgba(239,68,68,.3);}
.recibo-assin-dica{font-size:.68rem;color:rgba(240,240,240,.3);margin-top:8px;line-height:1.5;}

/* ═══════════════════════════════════════════════════════════════════════
   LISTAS NATIVAS (<select>) — REGRA ÚNICA E AMPLA, DE PROPÓSITO
   ═══════════════════════════════════════════════════════════════════════
   Este defeito já voltou três vezes, uma classe por vez: sem color-scheme o
   navegador abre a lista nativa em modo CLARO, enquanto o texto da opção
   herda a cor quase branca do select — e o resultado é uma lista de itens
   invisíveis (escolaridade, estado civil, município, modelo da ficha).

   Corrigir select por select era o que vinha falhando: cada tela nova
   trazia mais um. Como o app inteiro é escuro, a regra vale para todo
   select. A única exceção possível seria uma lista sobre fundo claro, e não
   existe nenhuma — a folha do relatório não tem select. */
select{color-scheme:dark;}
select option,select optgroup{background:#16161f;color:#f0f0f0;}
select optgroup{font-weight:700;color:#a5b4fc;}
select:disabled{color:rgba(240,240,240,.35);}

/* ── Modelo de ficha dentro da nota comum ──
   O editor mora na área expandida (aparece ao abrir a nota); o resumo, junto
   do texto, é o que se lê sem expandir. */
.n-ficha-edit{padding:0 10px 8px;}
.n-ficha-cab{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.n-ficha-cab>span{font-family:'Inter',sans-serif;font-size:.6rem;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:rgba(240,240,240,.34);flex-shrink:0;}
.n-ficha-sel,.n-ficha-selo{flex:1;min-width:0;background:rgba(255,255,255,.05);
  border:1px solid var(--clr-border);border-radius:7px;padding:5px 7px;
  font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.75);
  cursor:pointer;color-scheme:dark;}
.n-ficha-campos{display:flex;flex-direction:column;gap:7px;}
.n-ficha-campo{display:flex;flex-direction:column;gap:3px;}
.n-ficha-lbl{font-family:'Inter',sans-serif;font-size:.58rem;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:rgba(240,240,240,.34);}
.n-ficha-inp{background:rgba(255,255,255,.05);border:1px solid var(--clr-border);
  border-radius:7px;padding:6px 8px;font-family:'Inter',sans-serif;font-size:.74rem;
  color:var(--clr-text);outline:none;resize:vertical;color-scheme:dark;}
.n-ficha-inp:focus{border-color:rgba(99,102,241,.5);}
.n-ficha-selo{flex:none;margin-top:3px;}


/* ── Aviso de envio de e-mail indisponível ──
   Serviço fora do ar não é erro de quem clicou, e não pode ter a mesma cara de
   "você digitou errado". Âmbar em vez de vermelho, com hierarquia: o que houve,
   o que não se perdeu, e o caminho que continua funcionando. */
.fm-aviso-manut{display:block;margin-top:10px;padding:14px 16px;border-radius:12px;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.26);
  color:rgba(240,240,240,.82);font-size:.8rem;line-height:1.6;}
.fm-aviso-topo{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.fm-aviso-ico{font-size:1rem;line-height:1;}
.fm-aviso-topo b{font-family:'Inter',sans-serif;font-size:.86rem;font-weight:700;color:#fcd34d;}
.fm-aviso-txt{margin:0 0 12px;color:rgba(240,240,240,.66);}
.fm-aviso-link{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:8px 10px;}
.fm-aviso-link code{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;
  font-size:.7rem;color:rgba(240,240,240,.7);overflow-wrap:anywhere;}
.fm-aviso-btn{flex-shrink:0;background:rgba(245,158,11,.16);
  border:1px solid rgba(245,158,11,.32);color:#fcd34d;border-radius:8px;
  padding:6px 12px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.74rem;
  font-weight:600;}
.fm-aviso-btn:hover{background:rgba(245,158,11,.26);}

/* ── Menu "adicionar" do calendário ──
   A legenda mostra quatro tipos de item; o botão passou a abrir os quatro.
   Cada linha traz o nome e o que aquilo faz, porque "nota" e "cliente" não
   dizem sozinhos por que alguém escolheria um em vez do outro. */
.cal-add-menu{position:fixed;z-index:9500;min-width:250px;padding:6px;
  background:#14141d;border:1px solid rgba(255,255,255,.1);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px;}
.cal-add-op{display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:9px 10px;border:none;border-radius:9px;background:none;cursor:pointer;
  text-align:left;font-family:'Inter',sans-serif;}
.cal-add-op:hover{background:rgba(99,102,241,.14);}
.cal-add-ico{font-size:1rem;line-height:1.2;flex-shrink:0;}
.cal-add-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cal-add-txt b{font-size:.8rem;font-weight:600;color:var(--clr-text);}
.cal-add-txt span{font-size:.68rem;color:rgba(240,240,240,.4);line-height:1.4;}
@media (max-width:860px){
  .cal-add-menu{left:12px !important;right:12px;min-width:0;width:auto;}
  .cal-add-op{padding:12px 10px;}
}

/* ══════════════════════════════════════════════════════════════════
   NOTA VIBRANTE — fundo colorido de verdade
   ══════════════════════════════════════════════════════════════════
   O corpo da nota é branco a 50%. Sobre o fundo quase preto padrão isso dá
   contraste de sobra; sobre um fundo colorido, some. Era esse o limite que
   obrigava os degradês a serem escuros.

   Aqui a conta foi feita ao contrário: fixado o fundo colorido, qual opacidade
   o texto precisa. Com 0.78 no corpo, todos os fundos desta família ficam
   entre 6:1 e 9,5:1 de contraste — bem acima do mínimo de 4,5:1. Os demais
   textos apagados sobem junto, na mesma proporção.

   Por isso as cores vibrantes vêm marcadas com `vibrante` na paleta: fundo
   colorido e texto fraco não convivem, e um sem o outro quebra a nota. */
.note.vibrante .n-text{
  color:rgba(255,255,255,.78) !important;
  -webkit-text-fill-color:rgba(255,255,255,.78) !important;}
.note.vibrante .n-dinput{color:rgba(255,255,255,.88) !important;}
.note.vibrante .n-cl-text{color:rgba(255,255,255,.94) !important;}
.note.vibrante .n-date-tag,
.note.vibrante .n-dates-lbl,
.note.vibrante .n-checklist-head,
.note.vibrante .n-cl-badge,
.note.vibrante .n-client-due,
.note.vibrante .n-cli-chk-cont,
.note.vibrante .n-cli-seta{color:rgba(255,255,255,.66) !important;}
.note.vibrante .n-del,
.note.vibrante .n-pin-btn,
.note.vibrante .n-color-btn,
.note.vibrante .n-checklist-add,
.note.vibrante .n-cl-del{color:rgba(255,255,255,.6) !important;}

/* ── Item de checklist que quebra linha, com prazo e responsável ──
   O texto era um <input>: uma linha só, e item longo ficava cortado no meio.
   Virou <textarea> que cresce com o conteúdo — daí `align-items:flex-start`,
   para a caixinha de marcar ficar na PRIMEIRA linha do texto, e não centrada
   no meio de um item de três linhas. */
.n-cl-item{align-items:flex-start !important;}
.n-cl-check{margin-top:4px;}
.n-cl-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.n-cl-text{resize:none;overflow:hidden;line-height:1.45;white-space:pre-wrap;
  word-break:break-word;}
.n-cl-selos{display:flex;flex-wrap:wrap;gap:5px;}
.n-cl-selo{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:20px;
  font-size:.66rem;line-height:1.6;cursor:pointer;border:1px solid transparent;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.55);}
.n-cl-selo:hover{background:rgba(255,255,255,.12);}
.n-cl-selo.para{background:rgba(99,102,241,.14);border-color:rgba(129,140,248,.26);
  color:#c7d2fe;}
/* Vence hoje e vencido têm cores próprias, mas a data continua escrita ao lado:
   cor sozinha não diz nada a quem não a distingue. */
.n-cl-selo.prazo.hoje{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.3);
  color:#fcd34d;}
.n-cl-selo.prazo.atrasado{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.32);
  color:#fca5a5;}
.n-cl-item.done .n-cl-selo{opacity:.4;}
.n-cl-opt{background:none;border:none;color:rgba(255,255,255,.35);width:16px;height:18px;
  flex-shrink:0;cursor:pointer;font-size:.9rem;line-height:1;opacity:0;
  transition:opacity .12s,color .12s;display:flex;align-items:center;justify-content:center;}
.n-cl-item:hover .n-cl-opt,.n-cl-item:focus-within .n-cl-opt{opacity:1;}
.n-cl-opt:hover{color:var(--clr-indigo-light,#a5b4fc);}
/* O ⋯ some no repouso, mas o item que TEM prazo ou responsável mantém o
   caminho à vista: quem já usou uma vez volta ali para mudar. */
.n-cl-item:has(.n-cl-selos) .n-cl-opt{opacity:.55;}

.n-cl-pop{position:fixed;z-index:9600;width:230px;padding:12px;border-radius:12px;
  background:#14161c;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 44px rgba(0,0,0,.6);}
.n-cl-pop-tit{font-size:.62rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin-bottom:6px;}
.n-cl-pop-data{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;color:rgba(255,255,255,.9);font-family:'Inter',sans-serif;font-size:.78rem;
  padding:6px 8px;color-scheme:dark;}
.n-cl-pop-gente{display:flex;flex-direction:column;gap:3px;max-height:150px;overflow-y:auto;}
.n-cl-pop-pessoa{text-align:left;background:none;border:none;border-radius:7px;padding:5px 7px;
  font-family:'Inter',sans-serif;font-size:.75rem;color:rgba(255,255,255,.75);cursor:pointer;}
.n-cl-pop-pessoa:hover{background:rgba(255,255,255,.07);}
.n-cl-pop-pessoa.sel{background:rgba(99,102,241,.18);color:#c7d2fe;}
.n-cl-pop-vazio{font-size:.7rem;line-height:1.5;color:rgba(255,255,255,.35);}
.n-cl-pop-limpar{width:100%;margin-top:11px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(255,255,255,.55);}
.n-cl-pop-limpar:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.3);
  color:#fca5a5;}

/* A borda some contra fundo colorido; um véu claro devolve o recorte do
   cartão sem escurecer o degradê. */
.note.vibrante{border-color:rgba(255,255,255,.16) !important;}
.note.vibrante .n-sep{background:rgba(255,255,255,.16) !important;}

/* ══════════════════════════════════════════════════════════════════
   PAPEL — o irmão invertido do `vibrante`
   ══════════════════════════════════════════════════════════════════
   `vibrante` resolve "fundo colorido, texto claro demais" subindo a opacidade
   do branco. Aqui o problema é o oposto e não tem solução em opacidade:
   branco sobre #f4f6fa é branco sobre branco em qualquer opacidade.

   Então TODO o texto vira escuro. A lista é longa de propósito — um seletor
   esquecido não some, fica invisível, e some justamente para quem escolheu a
   cor. Os valores são os mesmos degraus do tema escuro, espelhados: 0.88 para
   o corpo (contraste 12:1 sobre #f4f6fa), 0.62 para os rótulos apagados. */
.note.claro .n-title,
.note.claro .n-cl-text{color:rgba(15,23,42,.94) !important;
  -webkit-text-fill-color:rgba(15,23,42,.94) !important;}
.note.claro .n-text{color:rgba(15,23,42,.88) !important;
  -webkit-text-fill-color:rgba(15,23,42,.88) !important;}
.note.claro .n-dinput{color:rgba(15,23,42,.88) !important;color-scheme:light;}
.note.claro .n-date-tag,
.note.claro .n-dates-lbl,
.note.claro .n-checklist-head,
.note.claro .n-cl-badge,
.note.claro .n-client-due,
.note.claro .n-cli-chk-cont,
.note.claro .n-coment-head,
.note.claro .n-cli-seta{color:rgba(15,23,42,.62) !important;}
.note.claro .n-del,
.note.claro .n-pin-btn,
.note.claro .n-mais-btn,
.note.claro .n-color-btn,
.note.claro .n-checklist-add,
.note.claro .n-cl-del,
.note.claro .n-coment-enviar{color:rgba(15,23,42,.58) !important;}
/* O `placeholder` não herda a cor do campo: sem esta linha ele fica branco
   sobre branco e a nota vazia parece não ter campo nenhum. */
.note.claro .n-title::placeholder,
.note.claro .n-text::placeholder,
.note.claro .n-coment-inp::placeholder,
.note.claro .n-cl-text::placeholder{color:rgba(15,23,42,.38) !important;
  -webkit-text-fill-color:rgba(15,23,42,.38) !important;}
.note.claro .n-coment-inp{color:rgba(15,23,42,.88) !important;
  background:rgba(15,23,42,.04) !important;border-color:rgba(15,23,42,.12) !important;}
.note.claro .n-dinput{background:rgba(15,23,42,.04) !important;
  border-color:rgba(15,23,42,.12) !important;}
/* Contorno, separador e véu passam a ser escuros: um véu branco sobre papel
   não existe. */
.note.claro{border-color:rgba(15,23,42,.14) !important;}
.note.claro .n-sep{background:rgba(15,23,42,.12) !important;}
.note.claro .n-checklist-wrap,
.note.claro .n-coment-wrap{border-color:rgba(15,23,42,.1) !important;}
.note.claro .n-cl-item:hover{background:rgba(15,23,42,.05) !important;}

/* ══════════════════════════════════════════════════════════════════
   COR VIVA — as cores se dissolvem umas nas outras
   ══════════════════════════════════════════════════════════════════
   Duas versões antes desta erraram por motivos opostos, e as duas ensinam algo.

   A primeira deslizava a POSIÇÃO de um gradiente gigante. No papel funcionava;
   na tela não aparecia — e o pior modo de falhar: parado, o fundo continua um
   degradê bonito, indistinguível de uma cor comum. Nada acusa.

   A segunda trocava o gradiente INTEIRO a cada passo. Aparecia, sim, mas em
   saltos secos: imagem de fundo não interpola, então ou está numa cor ou na
   outra, sem meio-termo.

   A saída é separar as duas coisas que estavam grudadas. COR interpola
   nativamente em CSS — é só animar `background-color` e o navegador dissolve
   um tom no outro sozinho. O aspecto de degradê vem de um véu FIXO por cima,
   que não anima: claro num canto, escuro no outro. O que se move é a cor por
   baixo do véu.

   Resultado: o cartão parece um degradê o tempo todo, e esse degradê atravessa
   o espectro sem nenhum salto.

   A camada é um ::before porque `.note` já tem outras três animações — a
   entrada do app, o pulso de atrasado e as de mudança de status — e só uma
   declaração `animation` vence por elemento. Aqui não há com quem disputar.

   z-index -1 põe a camada acima do fundo do cartão e abaixo do conteúdo, sem
   precisar mexer em nenhum filho; o overflow:hidden do cartão já a recorta nos
   cantos arredondados. */
.note.cor-viva::before, .stack-wrap.cor-viva::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  /* O véu que dá o aspecto de degradê. Fixo de propósito: se ele animasse
     junto, voltaríamos ao problema de animar imagem de fundo. */
  background-image:linear-gradient(145deg,
    rgba(255,255,255,.17) 0%, rgba(255,255,255,.04) 38%,
    rgba(0,0,0,.10) 62%, rgba(0,0,0,.30) 100%);
  animation:corViva 20s linear infinite;
}
/* Dez tons, um a cada décimo do ciclo — em 20s, dois segundos de travessia
   entre vizinhos. Sem `steps`: é justamente a interpolação que faz um tom
   dissolver no outro em vez de saltar. */
@keyframes corViva{
  0%  {background-color:#312e81;}
  10% {background-color:#4c1d95;}
  20% {background-color:#701a75;}
  30% {background-color:#831843;}
  40% {background-color:#7f1d1d;}
  50% {background-color:#7c2d12;}
  60% {background-color:#78350f;}
  70% {background-color:#365314;}
  80% {background-color:#064e3b;}
  90% {background-color:#164e63;}
  100%{background-color:#312e81;}
}
/* O cartão em si guarda um tom de reserva: se o CSS não chegar, a nota nasce
   legível em vez de transparente. */
.note.cor-viva, .stack-wrap.cor-viva{
  background:#312e81 !important;
}
/* A barra do topo e o ponto do chip acompanham, com tons claros — eles são
   traço fino sobre o cartão, e no mesmo tom do fundo sumiriam. */
.note.cor-viva .n-bar, .stack-wrap.cor-viva .shb{
  background-image:linear-gradient(115deg,
    rgba(255,255,255,.30), rgba(255,255,255,0)) !important;
  animation:corVivaClara 20s linear infinite;
}
@keyframes corVivaClara{
  0%  {background-color:#818cf8;}
  10% {background-color:#c084fc;}
  20% {background-color:#e879f9;}
  30% {background-color:#f472b6;}
  40% {background-color:#fb7185;}
  50% {background-color:#fbbf24;}
  60% {background-color:#a3e635;}
  70% {background-color:#34d399;}
  80% {background-color:#2dd4bf;}
  90% {background-color:#60a5fa;}
  100%{background-color:#818cf8;}
}
/* A AMOSTRA do seletor usa a mesma sequência clara, e mais rápida: é um
   círculo de 20px, e no ritmo do cartão levaria vinte segundos para mostrar o
   que a cor faz — bem na hora em que a pessoa está decidindo se a quer. */
.m-sw.cor-viva, .swatch.cor-viva, button.cor-viva{
  background-image:linear-gradient(115deg,
    rgba(255,255,255,.30), rgba(255,255,255,0)) !important;
  animation:corVivaClara 6s linear infinite !important;
}
/* Movimento contínuo é exatamente o que incomoda quem pediu para reduzi-lo.
   Sem animação fica o primeiro tom da sequência com o véu por cima — um
   degradê válido, e não um cartão quebrado. O app avisa no console quando isto
   acontece, porque parado é indistinguível de defeito. */
@media(prefers-reduced-motion:reduce){
  .note.cor-viva::before, .stack-wrap.cor-viva::before,
  .note.cor-viva .n-bar, .stack-wrap.cor-viva .shb,
  .m-sw.cor-viva, .swatch.cor-viva, button.cor-viva{animation:none !important;}
}

/* CHAT SOCIAL — arrastar arquivo e ampliar imagem sem alterar o layout. */
.chat-msgs.drag-on{
  background:rgba(99,102,241,.09);
  box-shadow:inset 0 0 0 2px var(--clr-indigo-40);
}

#chat-lightbox{
  cursor:default;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}
.chat-lb-stage{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  padding:max(64px,calc(env(safe-area-inset-top) + 52px)) 16px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  touch-action:none;
  cursor:zoom-in;
}
.chat-lb-stage.can-pan{cursor:grab;}
.chat-lb-stage.is-panning{cursor:grabbing;}
#chat-lightbox .chat-lb-stage img{
  max-width:100%;
  max-height:100%;
  border-radius:8px;
  object-fit:contain;
  transform-origin:center center;
  transition:transform .14s ease;
  box-shadow:0 14px 50px rgba(0,0,0,.55);
}
.chat-lb-stage.is-panning img{transition:none !important;}
.chat-lb-toolbar{
  position:absolute;
  z-index:2;
  top:max(12px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  background:rgba(17,17,17,.9);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.chat-lb-toolbar button{
  min-width:34px;
  height:32px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:7px;
  background:rgba(255,255,255,.06);
  color:rgba(240,240,240,.88);
  font:600 .78rem var(--font-main);
  cursor:pointer;
}
.chat-lb-toolbar button:hover{background:rgba(255,255,255,.13);}
.chat-lb-toolbar button:disabled{opacity:.3;cursor:default;}
#chat-lb-zoom-value{
  min-width:48px;
  text-align:center;
  color:rgba(240,240,240,.72);
  font:600 .68rem var(--font-mono);
}
#chat-lb-close{
  margin-left:3px;
  color:#fca5a5;
}


/* ── Formatos da janela de chamada ──
   Quatro tamanhos num botão que cicla. `!important` porque redimensionar
   com a quina grava width/height no style do elemento, e style ganha de
   classe — sem isto, escolher um formato depois de ter arrastado a quina
   não faria efeito nenhum. */
#call-overlay.call-fmt-horizontal{width:min(760px,92vw) !important;height:min(440px,72dvh) !important;}
#call-overlay.call-fmt-vertical{width:min(420px,92vw) !important;height:min(680px,84dvh) !important;}
/* Tela cheia cobre a janela inteira: sem quinas para arrastar, sem cantos
   arredondados que deixariam faixa do quadro aparecendo atrás. */
#call-overlay.call-fmt-cheia{inset:0 !important;left:0 !important;top:0 !important;
  right:0 !important;bottom:0 !important;width:auto !important;height:auto !important;
  max-width:none !important;max-height:none !important;border-radius:0 !important;
  resize:none !important;}
/* Em pé, o mosaico vira coluna: lado a lado numa janela estreita cada pessoa
   ficaria do tamanho de um selo. */
#call-overlay.call-fmt-vertical .call-tile{flex:1 1 100%;min-height:120px;}
/* Deitada e em tela cheia sobra espaço: os quadros crescem em vez de ficarem
   perdidos no meio do preto. */
#call-overlay.call-fmt-horizontal .call-tile,
#call-overlay.call-fmt-cheia .call-tile{min-height:180px;}
#call-overlay.call-fmt-cheia .call-grid{gap:10px;padding:10px;}


/* ── Escolha do @ dentro do app ────────────────────────────────────────────
   Aparece quando a conta chegou ao app sem @ válido — as criadas enquanto o
   app inventava o nome, e login por provedor interrompido no meio. Cobre a
   tela de propósito: sem @ a pessoa não é encontrável, então não há o que
   fazer no quadro antes de escolher um. */
#md-ident-ov{position:fixed;inset:0;z-index:var(--z-modal,300);display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);}
#md-ident-ov .md-ident-cx{width:100%;max-width:420px;padding:26px 26px 22px;
  background:var(--clr-bg-2,#111);color:var(--clr-text,#f0f0f0);
  border:1px solid var(--clr-border-strong,rgba(255,255,255,.12));
  border-radius:var(--radius-lg,16px);box-shadow:0 24px 60px rgba(0,0,0,.6);}
#md-ident-ov h2{font-family:var(--font-brand,'Syne',sans-serif);font-size:1.15rem;
  font-weight:700;margin-bottom:8px;}
#md-ident-ov p{font-size:.84rem;line-height:1.55;margin-bottom:18px;
  color:var(--clr-text-dim,rgba(240,240,240,.55));}
#md-ident-ov .md-ident-campo{display:flex;align-items:center;gap:6px;
  padding:11px 14px;border-radius:var(--radius-sm,8px);
  background:var(--clr-bg-card,rgba(255,255,255,.03));
  border:1px solid var(--clr-border,rgba(255,255,255,.07));
  transition:border-color var(--transition-fast,.15s ease);}
#md-ident-ov .md-ident-campo:focus-within{border-color:var(--clr-indigo,#6366f1);}
#md-ident-ov .md-ident-campo span{color:var(--clr-text-dim,rgba(240,240,240,.4));font-weight:600;opacity:1;}
#md-ident-ov input{flex:1;background:none;border:0;outline:none;
  color:var(--clr-text,#f0f0f0);-webkit-text-fill-color:var(--clr-text,#f0f0f0);
  opacity:1;font:inherit;font-size:.95rem;}
#md-ident-ov .md-ident-stat{min-height:18px;margin:8px 2px 16px;font-size:.75rem;
  color:var(--clr-text-dim,rgba(240,240,240,.45));}
#md-ident-ov .md-ident-stat[data-s="bad"]{color:var(--clr-danger-light,#fca5a5);}
#md-ident-ov button{width:100%;padding:11px;border:0;border-radius:10px;
  font:inherit;font-weight:600;cursor:pointer;
  background:var(--clr-indigo,#6366f1);color:#fff;
  transition:filter var(--transition-fast,.15s ease);}
#md-ident-ov button:hover:not(:disabled){filter:brightness(1.12);}
#md-ident-ov button:disabled{opacity:.6;cursor:default;}

/* ── Barra de ferramentas em tela de notebook ──────────────────────────────
   A barra é uma linha flex SEM wrap, dentro de um body overflow:hidden — o
   que não cabe não vira scroll, é simplesmente cortado, e o botão fica
   inalcançável.

   Somados, os botões pedem cerca de 1470px. Um MacBook Air de 13" tem
   exatamente 1470px de largura CSS: em tela cheia a barra raspa o limite, e
   em janela normal — que é como se usa no Mac — "Sair" e o seletor de idioma
   ficam fora da tela. O mobile.css já apertava a barra, mas só a partir de
   860px, largura que notebook nenhum alcança: entre 861px e 1470px não havia
   regra nenhuma.

   Duas medidas, nesta ordem:
     1. faixas intermediárias que apertam a barra para caber em UMA linha;
     2. flex-wrap em qualquer largura, como rede. Se ainda assim não couber,
        a barra ganha uma linha em vez de esconder botão — _minNoteY() mede a
        altura real, então as notas já sabem descer.
   ───────────────────────────────────────────────────────────────────────── */
#toolbar{flex-wrap:wrap;height:auto;min-height:80px;align-content:center;row-gap:6px;}

@media (max-width:1600px){
  #toolbar{min-height:64px;padding:0 10px;gap:6px;}
  .t-logo img{height:31px;}
  .t-pill{max-width:150px;font-size:.7rem;}
  .t-btn{padding:5px 9px;font-size:.7rem;gap:4px;}
  .t-btn svg{width:12px;height:12px;}
  .t-sep{height:18px;}
}

@media (max-width:1280px){
  #toolbar{min-height:56px;padding:0 8px;gap:5px;}
  .t-logo img{height:26px;}
  .t-pill{max-width:120px;font-size:.66rem;}
  .t-btn{padding:4px 7px;font-size:.66rem;}
  .t-btn svg{width:11px;height:11px;}
  .t-count{font-size:.62rem;}
}

/* ── Pagamento parcial ─────────────────────────────────────────────────────
   Terceiro estado entre pendente e pago: parte do dinheiro entrou. A cor é
   verde-azulada de propósito — parente do verde de "pago", porque algo foi
   recebido, e distinta o bastante para não ser lida como pago por engano.
   ───────────────────────────────────────────────────────────────────────── */
.crm-status-pill.partial{background:rgba(20,184,166,.16);color:#5eead4;}
.crm-status-pill.partial .crm-status-dot{background:var(--clr-teal);}

.crm-status-opt.sel-partial{background:rgba(20,184,166,.15);
  border-color:rgba(20,184,166,.4);color:#5eead4;}
/* Sem o :not da parcial, a regra do "não selecionado" apagaria o destaque
   dela — ela vem depois no arquivo e ganharia por ordem. */
.crm-status-opt:not(.sel-paid):not(.sel-pending):not(.sel-partial){
  background:var(--clr-border-faint);border-color:rgba(255,255,255,.08);
  color:rgba(240,240,240,.4);}

/* A conta viva do formulário: quanto ainda falta, enquanto se digita. */
.crm-partial-hint{margin-top:6px;font-size:.72rem;line-height:1.4;
  color:var(--clr-text-dim);min-height:16px;}
.crm-partial-hint[data-s="ok"]{color:#5eead4;}
.crm-partial-hint[data-s="warn"]{color:var(--clr-warning);}

/* Recebido / a receber embaixo do valor, na tabela de clientes. Só aparece
   quando há parcial de verdade — em pago ou pendente as duas linhas seriam
   o valor cheio e zero, que o selo já diz. */
.crm-value-split{display:flex;flex-direction:column;gap:1px;margin-top:3px;
  font-size:.64rem;line-height:1.35;white-space:nowrap;}
.crm-value-split .crm-split-in{color:#5eead4;}
.crm-value-split .crm-split-out{color:var(--clr-text-dim);}

/* Popover do valor parcial — pedido no lugar onde o status é escolhido, para
   não obrigar a abrir a ficha inteira só para informar quanto entrou. Herda
   .cdash-menu (posição, fundo, borda) e só acrescenta o miolo do formulário. */
.crm-parcial-pop{width:216px;padding:12px;}
.crm-parcial-tt{font-size:.72rem;font-weight:600;color:var(--clr-text);
  margin-bottom:8px;}
.crm-parcial-inp{width:100%;padding:8px 10px;border-radius:8px;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);
  color:var(--clr-text);font:inherit;font-size:.85rem;outline:none;
  transition:border-color var(--transition-fast);}
.crm-parcial-inp:focus{border-color:var(--clr-indigo);}
.crm-parcial-pop .crm-partial-hint{margin:7px 0 9px;font-size:.68rem;}
.crm-parcial-ok{width:100%;padding:8px;border:0;border-radius:8px;
  background:var(--clr-indigo);color:#fff;font:inherit;font-size:.78rem;
  font-weight:600;cursor:pointer;transition:filter var(--transition-fast);}
.crm-parcial-ok:hover{filter:brightness(1.12);}

/* Popover do VALOR — mesmo corpo do parcial, um pouco mais largo por causa da
   linha que explica para onde a mudança vai. */
.crm-valor-pop{width:236px;}
.crm-valor-sub{margin:-4px 0 9px;font-size:.66rem;line-height:1.45;
  color:var(--clr-text-dim);}

/* ── O VALOR DA NOTA DE CLIENTE É CLICÁVEL ──────────────────────────────
   Ele era só um número impresso, e a pergunta que chegou foi exatamente essa:
   "digitei um valor errado, como eu edito?". Um dado que se corrige precisa
   parecer que se corrige — daí o lápis, visível de leve o tempo todo em vez de
   aparecer só no hover: quem não sabe que dá para editar também não vai passar
   o mouse por cima para descobrir.

   É um <button> de verdade (ver o comentário em `_pintarBlocoCliente`), então
   a UA manda borda, fundo e fonte próprios — tudo isto é a limpeza deles. A
   fonte e a cor continuam vindo de `.n-client-val-num`, que já sabe pintar o
   número de verde quando está pago e de vermelho quando está atrasado. */
.n-client-val-num.n-cli-valor-bt{
  display:inline-flex;align-items:center;gap:6px;
  -webkit-appearance:none;appearance:none;
  background:none;border:1px solid transparent;border-radius:8px;
  padding:3px 8px;margin-left:-8px;   /* o número segue alinhado à esquerda */
  line-height:1.2;cursor:pointer;text-align:left;
  transition:background var(--transition-fast),border-color var(--transition-fast);
}
.n-cli-valor-bt:hover{background:var(--clr-border-faint);
  border-color:var(--clr-border);}
.n-cli-valor-bt:focus-visible{outline:2px solid var(--clr-indigo-light);
  outline-offset:1px;}
.n-cli-lapis{font-size:.68rem;opacity:.4;
  transition:opacity var(--transition-fast);}
.n-cli-valor-bt:hover .n-cli-lapis,
.n-cli-valor-bt:focus-visible .n-cli-lapis{opacity:1;}

/* O selo virou botão de verdade: precisa parecer clicável e ser alcançável
   pelo teclado. */
.crm-status-pill:focus-visible{outline:2px solid var(--clr-indigo-light);
  outline-offset:2px;}

/* ── Nota alta: o que não couber ROLA, em vez de sair da tela ──────────────
   A nota é position:fixed e o body é overflow:hidden. Sem teto, escolher um
   modelo de nicho com muitos campos empurrava o fim da ficha para fora do
   viewport — e não havia rolagem nenhuma capaz de alcançá-lo. Pior: a alça
   de redimensionar mora no canto inferior da nota e ia junto, então nem
   encolher para ver o resto era possível.

   O teto em pixels é calculado no JS (_limitarAlturaNota), porque depende de
   onde a nota está na tela. Aqui fica a outra metade: quem rola é a área
   expansível, e não a nota. Se a nota rolasse, a alça — que é absolute em
   relação a ela — desceria junto com o conteúdo e sumiria de novo.

   O seletor de cor não é cortado por isto: ele é anexado ao body, não à
   nota. Por isso dá para clipar aqui sem perder o popover.
   ───────────────────────────────────────────────────────────────────────── */
.n-expand-area{overflow-y:auto;overflow-x:hidden;min-height:0;}
/* A regra de nota fixada usa `overflow:visible !important` para garantir o
   max-height:none. Só o eixo vertical precisa voltar a rolar. */
.note.pinned .n-expand-area{overflow-y:auto !important;}

/* Barra de rolagem discreta: dentro de uma nota de 240px, a padrão do
   sistema come largura demais e briga com o conteúdo. */
.n-expand-area::-webkit-scrollbar{width:6px;}
.n-expand-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px;}
.n-expand-area::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);}
.n-expand-area{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}

/* ── A moldura arrasta, e o cursor diz isso ────────────────────────────────
   Só o cabeçalho pegava. Numa nota ABERTA ele é uma faixa fina no topo de um
   cartão que ocupa meia tela — quem quisesse mover a nota tinha de mirar o
   título, e mirar mal significava cair num campo e começar a editar sem
   querer.

   Agora a área morta inteira arrasta: a borda, as sobras entre as seções, o
   vão em volta das linhas de data. Quem decide é o mesmo guarda do cabeçalho,
   no JS — aqui fica só o que a mão precisa VER antes de tentar.

   O cursor tem de ser devolvido a cada controle, um por um. `cursor` herda, e
   sem estas linhas a mãozinha apareceria por cima do campo de data e do
   comentário, prometendo arrastar onde o clique escreve. */
.note{cursor:grab;}
.note:active{cursor:grabbing;}
.note a,.note button,.note textarea,.note input,.note select,.note label,
.note [contenteditable="true"]{cursor:auto;}
.note textarea,.note [contenteditable="true"]{cursor:text;}
.note a,.note button,.note label,.note select,.note .n-status-pill,
.note .n-dinput{cursor:pointer;}
/* A alça continua com o cursor dela: ali o gesto é outro. */
.note .n-resize{cursor:se-resize;}

/* Alça de redimensionar: área de clique maior que o desenho.
   18x18 num canto é alvo pequeno demais — e ela some quando o ponteiro sai
   da nota, o que faz a pessoa perder o alvo no meio do gesto. Agora o alvo
   tem 26px, o ícone continua do mesmo tamanho, e ela fica visível enquanto
   se arrasta. */
.n-resize{width:26px;height:26px;padding:6px;}
.note.resizing .n-resize{opacity:1;}
.n-resize:focus-visible{opacity:1;outline:2px solid var(--clr-indigo-light);
  outline-offset:-2px;border-radius:6px;}

/* A área rolável ocupa o que sobra da nota.

   Sem flex:1 ela se dimensiona pelo conteúdo: aumentar a nota pela alça
   deixava um vazio embaixo em vez de dar mais espaço ao formulário — e era
   justamente aumentando a nota que se tentava ganhar espaço para preencher.
   Com min-height:0 ela pode encolher abaixo do conteúdo e rolar, que é o que
   permite a nota respeitar o teto de altura da tela. */
.n-expand-area{flex:1 1 auto;}

/* ── Painel de vagas ───────────────────────────────────────────────────────
   Lista à esquerda, formulário à direita, numa tela só: a vaga é o cabeçalho
   do funil e se lê junto com ele. Herda .modal-bg/.modal do app para não
   inventar um segundo sistema de modal. */
.vg-modal{width:min(1040px,94vw);max-height:88dvh;display:flex;flex-direction:column;padding:0;}
.vg-head{display:flex;align-items:flex-start;gap:16px;padding:22px 24px 16px;
  border-bottom:1px solid var(--clr-border);}
.vg-head .m-sub{margin:0;}
.vg-fechar{margin-left:auto;background:none;border:0;color:var(--clr-text-dim);
  font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:8px;line-height:1;}
.vg-fechar:hover{background:rgba(255,255,255,.07);color:var(--clr-text);}

.vg-corpo{display:grid;grid-template-columns:300px 1fr;gap:0;min-height:0;flex:1;}
.vg-lista{border-right:1px solid var(--clr-border);padding:14px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;min-height:0;}
.vg-form{padding:18px 24px 24px;overflow-y:auto;min-height:0;}
.vg-form-titulo{font-family:var(--font-brand);font-weight:700;font-size:1rem;
  margin-bottom:14px;}

.vg-nova{width:100%;padding:10px;border-radius:10px;border:1px dashed var(--clr-border-strong);
  background:none;color:var(--clr-indigo-light);font:inherit;font-size:.8rem;font-weight:600;
  cursor:pointer;transition:background var(--transition-fast);}
.vg-nova:hover{background:var(--clr-indigo-10);}

.vg-item{display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;
  padding:11px 12px;border-radius:10px;cursor:pointer;font:inherit;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);
  transition:border-color var(--transition-fast),background var(--transition-fast);}
.vg-item:hover{background:rgba(255,255,255,.05);}
.vg-item.sel{border-color:var(--clr-indigo);background:var(--clr-indigo-10);}
.vg-item-topo{display:flex;align-items:center;gap:8px;}
.vg-item-nome{font-size:.84rem;font-weight:600;color:var(--clr-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vg-item-meta{font-size:.7rem;color:var(--clr-text-dim);line-height:1.4;}
.vg-selo{margin-left:auto;flex-shrink:0;font-size:.62rem;font-weight:700;
  padding:2px 8px;border-radius:20px;white-space:nowrap;}
.vg-prazo{font-size:.66rem;color:var(--clr-text-dim);}
.vg-prazo.perto{color:var(--clr-warning);}
.vg-prazo.venceu{color:var(--clr-danger-light);font-weight:600;}
.vg-vazio{font-size:.76rem;line-height:1.55;color:var(--clr-text-dim);padding:12px 4px;}

/* Respiro maior embaixo: com 6px, o rótulo do campo seguinte encostava na
   caixa e os dois grupos pareciam um só. Visto na tela, não no código. */
.vg-check{display:flex;align-items:center;gap:8px;margin:2px 0 16px;
  font-size:.76rem;color:var(--clr-text-dim);cursor:pointer;}
.vg-check input{cursor:pointer;}
.vg-resumo{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:.74rem;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);color:var(--clr-text-dim);}
.vg-acoes{margin-top:18px;}
.vg-excluir{color:var(--clr-danger-light);}

@media(max-width:820px){
  .vg-corpo{grid-template-columns:1fr;}
  .vg-lista{border-right:0;border-bottom:1px solid var(--clr-border);max-height:34dvh;}
}

/* Botão de destaque do herói — a ação de partida do recrutamento.
   Teal, e não índigo: no herói o índigo se confunde com o seletor de modelo
   que fica ao lado, e as duas coisas fazem trabalhos diferentes. */
.cdash-hero-btn-destaque{background:linear-gradient(135deg,var(--clr-teal),#0ea5e9);
  border-color:transparent;color:#04222a;font-weight:700;}
.cdash-hero-btn-destaque:hover{filter:brightness(1.08);}
.cdash-hero-btn-destaque svg{stroke:#04222a;}

/* ── Cartões do painel: ícone e barra de proporção ─────────────────────────
   O ícone diz de que assunto o cartão trata sem obrigar a ler o rótulo; a
   barra põe o número em escala, porque "9 candidatos" sozinho não diz se é
   muito ou pouco. Só o recrutamento os preenche — no financeiro os dois
   ficam vazios, e a barra vazia é invisível. */
.cdash-kpi-topo{display:flex;align-items:flex-start;gap:10px;}
.cdash-kpi-topo .cdash-kpi-lbl{flex:1;min-width:0;}
.cdash-kpi-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);
  color:var(--clr-teal);}
.cdash-kpi-ico:empty{display:none;}
.cdash-kpi-ico svg{width:16px;height:16px;}

.cdash-kpi-bar{height:3px;border-radius:3px;margin-top:12px;
  background:rgba(255,255,255,.07);overflow:hidden;}
.cdash-kpi-bar > span{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--clr-indigo),var(--clr-teal));
  transition:width .6s cubic-bezier(.16,1,.3,1);}
/* Barra sem preenchimento não desenha faixa nenhuma: 0 de 0 não é um dado. */
.cdash-kpi-bar > span[style*="width: 0"]{background:none;}
@media(prefers-reduced-motion:reduce){.cdash-kpi-bar > span{transition:none;}}

/* ── Banco de talentos ─────────────────────────────────────────────────────
   Três colunas: filtros, lista e o talento escolhido com as vagas
   compatíveis. Mesmo vocabulário visual do resto do painel. */
.tb-modal{width:min(1560px,97vw);max-height:92dvh;display:flex;flex-direction:column;padding:0;}
.tb-hero{display:flex;align-items:flex-start;gap:20px;padding:26px 28px 22px;
  background:linear-gradient(115deg,#0e7490 0%,#0f766e 45%,#0b3b52 100%);}
.tb-h1{font-family:var(--font-brand);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;}
.tb-sub{font-size:.8rem;color:rgba(255,255,255,.72);margin-top:4px;}
.tb-hero-acoes{margin-left:auto;display:flex;align-items:center;gap:10px;}
.tb-busca{width:260px;padding:9px 14px;border-radius:10px;font:inherit;font-size:.82rem;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);color:#fff;outline:none;}
.tb-busca::placeholder{color:rgba(255,255,255,.5);}
.tb-btn-primario{padding:9px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.28);color:#fff;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;}
.tb-btn-primario:hover{background:rgba(0,0,0,.42);}

.tb-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 28px 0;}
.tb-card{padding:16px 18px;border-radius:14px;background:var(--clr-bg-card);
  border:1px solid var(--clr-border);}
.tb-card-lbl{font-size:.76rem;color:var(--clr-text-dim);}
.tb-card-num{font-family:var(--font-brand);font-weight:800;font-size:1.9rem;margin:6px 0 2px;}
.tb-card-pe{font-size:.68rem;color:var(--clr-text-faint);}

.tb-corpo{display:grid;grid-template-columns:250px 1fr 320px;gap:16px;
  padding:18px 28px 24px;min-height:0;flex:1;}
.tb-filtros,.tb-perfil{overflow-y:auto;min-height:0;padding:16px;border-radius:14px;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);}
.tb-lista{overflow:hidden;min-height:0;display:flex;flex-direction:column;
  border-radius:14px;background:var(--clr-bg-card);border:1px solid var(--clr-border);}
.tb-filtros-topo{display:flex;align-items:center;justify-content:space-between;
  font-size:.86rem;font-weight:600;margin-bottom:14px;}
.tb-limpar{background:none;border:0;color:var(--clr-indigo-light);font:inherit;
  font-size:.72rem;cursor:pointer;padding:0;}
.tb-filtro{margin-bottom:12px;}
.tb-faixa{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

.tb-lista-topo{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--clr-border);font-size:.86rem;font-weight:600;}
.tb-cont{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--clr-teal-20);color:#5eead4;}
.tb-tabela-wrap{flex:1;overflow:auto;min-height:0;}
.tb-tabela{width:100%;border-collapse:collapse;font-size:.76rem;}
.tb-tabela th{position:sticky;top:0;background:#101318;text-align:left;
  padding:10px 12px;font-size:.66rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;color:var(--clr-text-dim);border-bottom:1px solid var(--clr-border);}
.tb-tabela td{padding:10px 12px;border-bottom:1px solid var(--clr-border-faint);
  color:var(--clr-text-dim);vertical-align:middle;}
.tb-tabela tr{cursor:pointer;transition:background var(--transition-fast);}
.tb-tabela tbody tr:hover{background:rgba(255,255,255,.04);}
.tb-tabela tr.sel{background:var(--clr-indigo-10);}
.tb-nome{color:var(--clr-text);font-weight:600;}
.tb-cargo{font-size:.68rem;color:var(--clr-text-faint);}
.tb-tags{display:flex;gap:4px;flex-wrap:wrap;}
.tb-tag{font-size:.62rem;padding:2px 7px;border-radius:20px;
  background:var(--clr-indigo-20);color:var(--clr-indigo-light);white-space:nowrap;}
.tb-nota{font-weight:700;color:var(--clr-text);}
.tb-nota-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:3px;}
.tb-nota-bar span{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--clr-indigo),var(--clr-teal));}
.tb-pag{display:flex;align-items:center;gap:6px;padding:12px 16px;
  border-top:1px solid var(--clr-border);}
.tb-pag-info{margin-right:auto;font-size:.7rem;color:var(--clr-text-faint);}
.tb-pag-btn{min-width:28px;height:28px;border-radius:8px;border:1px solid var(--clr-border);
  background:none;color:var(--clr-text-dim);font:inherit;font-size:.72rem;cursor:pointer;}
.tb-pag-btn.sel{background:var(--clr-indigo);border-color:var(--clr-indigo);color:#fff;}

.tb-vazio{padding:36px 24px;text-align:center;}
.tb-vazio-t{font-size:.9rem;font-weight:600;margin-bottom:6px;}
.tb-vazio-s{font-size:.76rem;line-height:1.6;color:var(--clr-text-dim);max-width:420px;margin:0 auto;}
.tb-perfil-vazio{font-size:.76rem;line-height:1.6;color:var(--clr-text-faint);padding:10px 2px;}
.tb-perfil-topo{display:flex;gap:12px;align-items:center;margin-bottom:14px;}
.tb-avatar{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#fff;
  background:linear-gradient(135deg,var(--clr-indigo),var(--clr-teal));}
.tb-perfil-nome{font-weight:700;font-size:.92rem;}
.tb-perfil-cargo{font-size:.74rem;color:var(--clr-text-dim);}
.tb-perfil-meta{font-size:.68rem;color:var(--clr-text-faint);margin-top:2px;}
.tb-perfil-acoes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.tb-acao{flex:1;min-width:96px;padding:7px 10px;border-radius:9px;font:inherit;font-size:.72rem;
  cursor:pointer;background:var(--clr-bg-card);border:1px solid var(--clr-border);color:var(--clr-text-dim);}
.tb-acao:hover{background:rgba(255,255,255,.06);color:var(--clr-text);}
.tb-acao.perigo{color:var(--clr-danger-light);}
.tb-perfil-bloco{margin-bottom:16px;}
.tb-perfil-h{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;margin-bottom:8px;}
.tb-perfil-txt{font-size:.74rem;line-height:1.55;color:var(--clr-text-dim);}
.tb-compat{padding:11px 12px;border-radius:11px;margin-bottom:8px;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);}
.tb-compat-topo{display:flex;align-items:center;gap:8px;}
.tb-compat-nome{font-size:.78rem;font-weight:600;color:var(--clr-text);flex:1;}
.tb-compat-nota{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--clr-teal-20);color:#5eead4;}
/* Sem comparação possível o selo é neutro: verde ali diria "avaliado e bom",
   que é justamente o que não aconteceu. */
.tb-compat-nota.vazia{background:rgba(255,255,255,.06);color:var(--clr-text-faint);}
.tb-compat-meta{font-size:.66rem;color:var(--clr-text-faint);margin:3px 0 7px;}
.tb-compat-semdados{font-size:.66rem;line-height:1.5;color:var(--clr-text-faint);
  margin-bottom:9px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.03);
  border:1px solid var(--clr-border);}
.tb-compat-motivos{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px;}
.tb-motivo{font-size:.6rem;padding:2px 7px;border-radius:20px;
  background:rgba(255,255,255,.05);color:var(--clr-text-faint);}
.tb-motivo.ok{background:var(--clr-teal-20);color:#5eead4;}
.tb-convidar{width:100%;padding:7px;border-radius:9px;border:0;font:inherit;font-size:.72rem;
  font-weight:600;cursor:pointer;background:var(--clr-indigo);color:#fff;}
.tb-convidar:hover:not(:disabled){filter:brightness(1.12);}
.tb-convidar:disabled{opacity:.6;cursor:default;}
.tbf-modal{width:min(680px,94vw);max-height:90dvh;overflow-y:auto;}

@media(max-width:1280px){
  .tb-corpo{grid-template-columns:1fr;}
  .tb-cards{grid-template-columns:repeat(2,1fr);}
  .tb-filtros,.tb-perfil{max-height:none;}
}

/* ── Cartões do painel, 1:1 com o conceito ────────────────────────────────
   Sem minigráfico no recrutamento: o conceito não tem um, e ele disputava
   espaço com o número. A variação ganha seta, e a barra ficou visível — com
   3px translúcidos ela sumia contra o fundo do cartão. */
#crm-view.rh-modelo .cdash-spark{display:none;}
#crm-view.rh-modelo .cdash-kpi-num{font-size:2.3rem;}
#crm-view.rh-modelo .cdash-kpi-bar{height:4px;margin-top:14px;
  background:rgba(255,255,255,.10);}
#crm-view.rh-modelo .cdash-kpi{padding-bottom:16px;}

/* Foto da pessoa no formulário e no cartão do funil. */
.crm-foto-linha{display:flex;align-items:center;gap:14px;margin:12px 0 4px;}
.crm-foto{width:64px;height:64px;border-radius:50%;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--clr-bg-card);border:1px dashed var(--clr-border-strong);
  transition:border-color var(--transition-fast);}
.crm-foto:hover,.crm-foto:focus-visible{border-color:var(--clr-indigo);outline:none;}
.crm-foto img{width:100%;height:100%;object-fit:cover;}
.crm-foto-vazia{font-size:.62rem;color:var(--clr-text-faint);}
.crm-foto-txt{font-size:.72rem;color:var(--clr-text-dim);line-height:1.5;}
.crm-foto-tirar{background:none;border:0;padding:0;margin-top:2px;font:inherit;
  font-size:.7rem;color:var(--clr-danger-light);cursor:pointer;}
.rh-card-av-foto{overflow:hidden;padding:0;}
.rh-card-av-foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* Opção de guardar no banco, dentro do modal de reprovar. */
.rh-rep-guardar{display:flex;align-items:flex-start;gap:10px;margin-top:14px;
  padding:12px;border-radius:11px;cursor:pointer;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);}
.rh-rep-guardar:hover{border-color:var(--clr-teal);}
.rh-rep-guardar input{margin-top:2px;cursor:pointer;flex-shrink:0;}
.rh-rep-guardar b{display:block;font-size:.78rem;font-weight:600;color:var(--clr-text);}
.rh-rep-guardar small{display:block;font-size:.7rem;line-height:1.45;
  color:var(--clr-text-dim);margin-top:2px;}

/* Dica sob o campo de vaga da triagem: a lista mostra as vagas cadastradas, e
   sem isto ninguem descobre que "Outra vaga" aceita qualquer nome. */
.rh-ia-dica{font-size:.68rem;line-height:1.45;color:var(--clr-text-faint);
  margin:5px 2px 2px;}
/* Campo de texto que so aparece quando se escolhe "Outra vaga (digitar)". */
.rh-ia-vaga-outra{margin-top:8px;}

/* Regra de avanço automático, no formulário da vaga. */
.vg-auto{margin:14px 0 6px;padding:12px;border-radius:11px;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);}
.vg-auto .vg-check{margin:0;}
.vg-auto .vg-check b{color:var(--clr-text);font-size:.78rem;}
.vg-auto-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:10px;font-size:.74rem;color:var(--clr-text-dim);}
.vg-nota{width:72px;text-align:center;margin:0;}
.vg-auto-aviso{margin-top:9px;font-size:.68rem;line-height:1.5;color:var(--clr-text-faint);}
.crm-foto-aviso{font-size:.66rem;line-height:1.45;color:var(--clr-text-faint);margin-top:3px;}
.tb-sem-nota{font-size:.62rem;color:var(--clr-text-faint);margin-top:2px;}

/* ═══════════════════════════════════════════════════════════════════════
   PROPOSTA E ADMISSÃO  ·  VISÃO GERAL DO RH
   ═══════════════════════════════════════════════════════════════════════
   As duas telas do fim do processo: uma pessoa (proposta, histórico e
   checklist de admissão) e o quadro inteiro (quem é do time). Prefixos
   `pa-` e `rhv-` — `vg-` já é do painel de vagas. */

/* ── Proposta e admissão ── */
.pa-bg{align-items:flex-start;overflow:auto;padding:22px 0;}
.pa-tela{width:min(1180px,96vw);max-height:none;padding:0;overflow:visible;background:var(--clr-bg-panel);}
.pa-hero{display:flex;align-items:center;gap:14px;padding:22px 26px;border-radius:16px 16px 0 0;
  background:linear-gradient(120deg,rgba(13,148,136,.4),rgba(30,64,175,.34) 62%,transparent);}
.pa-voltar{width:36px;height:36px;border-radius:11px;border:1px solid var(--clr-border);
  background:rgba(255,255,255,.06);color:#fff;font-size:1rem;cursor:pointer;}
.pa-voltar:hover{background:rgba(255,255,255,.13);}
.pa-h1{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.5px;color:#fff;}
.pa-corpo{padding:0 26px 26px;display:flex;flex-direction:column;gap:16px;}

.pa-pessoa{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:14px;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);}
.pa-av{width:60px;height:60px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;overflow:hidden;font-family:'Syne',sans-serif;font-size:1.5rem;
  font-weight:800;color:#fff;background:linear-gradient(135deg,#6366f1,#818cf8);}
.pa-av.com-foto{background:none;}
.pa-av img{width:100%;height:100%;object-fit:cover;display:block;}
.pa-pessoa-id{flex:1;min-width:0;}
.pa-pessoa-linha{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.pa-nome{font-family:'Syne',sans-serif;font-size:1.22rem;font-weight:800;color:#fff;letter-spacing:-.4px;}
.pa-contato{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;
  justify-content:center;background:rgba(99,102,241,.18);color:#c7d2fe;font-size:.72rem;
  text-decoration:none;}
.pa-contato:hover{background:rgba(99,102,241,.32);}
.pa-rot{margin-top:7px;font-size:.62rem;letter-spacing:.5px;text-transform:uppercase;
  color:var(--clr-text-faint);}
.pa-vaga{font-size:.86rem;font-weight:600;color:rgba(255,255,255,.86);}
.pa-status{text-align:right;flex-shrink:0;}
.pa-pill{display:inline-block;margin-top:4px;padding:6px 13px;border-radius:20px;
  background:rgba(16,185,129,.16);color:#34d399;font-size:.74rem;font-weight:700;}
.pa-pill.vazio{background:rgba(255,255,255,.06);color:var(--clr-text-faint);}

.pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pa-card{padding:18px 20px;border-radius:14px;background:var(--clr-bg-card);
  border:1px solid var(--clr-border);}
.pa-card-cab{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:#fff;}
.pa-link{margin-left:auto;border:none;background:none;padding:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;color:#a5b4fc;}
.pa-link:hover{color:#e0e7ff;}
.pa-chip{padding:3px 9px;border-radius:20px;background:rgba(45,212,191,.16);
  color:#5eead4;font-size:.64rem;font-weight:700;}
.pa-tabela{display:flex;flex-direction:column;}
.pa-linha{display:flex;align-items:flex-start;gap:10px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.05);}
.pa-linha:last-child{border-bottom:none;}
.pa-linha-ico{width:18px;flex-shrink:0;font-size:.78rem;opacity:.7;}
.pa-linha-rot{width:150px;flex-shrink:0;font-size:.76rem;color:var(--clr-text-dim);}
.pa-linha-val{flex:1;font-size:.8rem;color:rgba(255,255,255,.9);overflow-wrap:anywhere;}
.pa-obs{margin-top:12px;padding:11px 13px;border-radius:10px;background:rgba(255,255,255,.03);
  border-left:3px solid #6366f1;font-size:.76rem;line-height:1.55;color:var(--clr-text-dim);
  white-space:pre-wrap;}

.pa-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.pa-passo{display:flex;align-items:center;gap:12px;padding:9px 0;position:relative;}
.pa-passo::before{content:'';position:absolute;left:10px;top:30px;bottom:-9px;width:2px;
  background:rgba(255,255,255,.08);}
.pa-passo:last-child::before{display:none;}
.pa-passo-marca{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.6rem;color:#04120f;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);}
.pa-passo.feito .pa-passo-marca{background:#34d399;border-color:#34d399;}
.pa-passo-ico{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.9rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);}
.pa-passo.feito .pa-passo-ico{background:rgba(59,130,246,.22);border-color:rgba(59,130,246,.4);}
.pa-passo-txt{flex:1;min-width:0;}
.pa-passo-nome{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.55);}
.pa-passo.feito .pa-passo-nome{color:#fff;}
.pa-passo-sub{font-size:.68rem;color:var(--clr-text-faint);}
.pa-passo-btn{border:1px solid var(--clr-border);background:rgba(255,255,255,.05);
  color:var(--clr-text-dim);border-radius:8px;padding:5px 11px;font-family:'Inter',sans-serif;
  font-size:.68rem;cursor:pointer;}
.pa-passo-btn:hover{background:rgba(99,102,241,.2);color:#e0e7ff;}

.pa-acoes{display:flex;gap:12px;flex-wrap:wrap;}
.pa-btn{flex:1;min-width:160px;padding:13px;border-radius:12px;border:1px solid var(--clr-border);
  background:var(--clr-bg-card);color:rgba(255,255,255,.86);font-family:'Inter',sans-serif;
  font-size:.8rem;cursor:pointer;transition:background .15s,border-color .15s;}
.pa-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);}
.pa-btn-pri{min-width:230px;padding:13px 22px;border:none;border-radius:12px;color:#04201c;
  background:linear-gradient(135deg,#2dd4bf,#22d3ee);font-family:'Inter',sans-serif;
  font-size:.82rem;font-weight:700;cursor:pointer;}
.pa-btn-pri:hover:not(:disabled){filter:brightness(1.08);}
.pa-btn-pri:disabled{opacity:.5;cursor:default;}

/* O vinculo com o colaborador, visivel e desfazivel: "Ja e colaborador"
   sozinho nao diz a QUEM a ficha esta ligada. */
.pa-vinculo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:-4px;
  padding:10px 14px;border-radius:11px;background:rgba(45,212,191,.07);
  border:1px solid rgba(45,212,191,.2);font-size:.74rem;color:var(--clr-text-dim);}
.pa-vinculo .pa-link{margin-left:0;}
.pa-link-perigo{color:#fca5a5;}
.pa-link-perigo:hover{color:#fecaca;}
.pa-check{width:100%;border-collapse:collapse;}
.pa-check th{text-align:left;padding:0 10px 9px;font-size:.64rem;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:var(--clr-text-faint);}
.pa-check td{padding:11px 10px;border-top:1px solid rgba(255,255,255,.05);vertical-align:middle;}
.pa-item-nome{font-size:.82rem;font-weight:600;color:#fff;}
.pa-item-sub{font-size:.7rem;color:var(--clr-text-faint);margin-top:2px;}
.pa-resp{width:100%;max-width:190px;padding:6px 9px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:rgba(255,255,255,.8);
  font-family:'Inter',sans-serif;font-size:.76rem;}
.pa-resp:hover{border-color:var(--clr-border);background:rgba(255,255,255,.03);}
.pa-resp:focus{outline:none;border-color:var(--clr-indigo);background:rgba(255,255,255,.05);}
.pa-st{border:none;border-radius:20px;padding:5px 12px;font-family:'Inter',sans-serif;
  font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.pa-st.ok{background:rgba(16,185,129,.16);color:#34d399;}
.pa-st.pend{background:rgba(245,158,11,.16);color:#fbbf24;}
.pas-modal{width:min(520px,94vw);}

/* ── Painel de propostas ── */
/* ── Despesas do quadro ───────────────────────────────────────────────
   Reaproveita .flx-kpis do fluxo de caixa: sao os mesmos cartoes de numero,
   e duas regras iguais com nomes diferentes divergem no primeiro ajuste. */
.dsp-modal{width:min(860px,96vw);max-height:92dvh;overflow-y:auto;padding:22px;}
.dsp-mes{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;}
.dsp-mes b{font-family:'Syne',sans-serif;font-size:.95rem;color:#fff;min-width:150px;
  text-align:center;}
.dsp-nav{width:28px;height:28px;border:none;border-radius:8px;cursor:pointer;
  background:var(--clr-border-faint);color:var(--clr-text);font-size:1rem;line-height:1;}
.dsp-nav:hover{background:var(--clr-indigo-20);color:#fff;}
.dsp-verde{color:#34d399 !important;}
.dsp-cats{margin:18px 0;display:flex;flex-direction:column;gap:8px;}
.dsp-cat{display:grid;grid-template-columns:minmax(0,170px) 1fr minmax(0,110px);
  gap:12px;align-items:center;font-size:.76rem;}
.dsp-cat-nome{color:var(--clr-text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dsp-cat-barra{height:9px;border-radius:5px;background:var(--clr-bg-card);overflow:hidden;}
.dsp-cat-barra i{display:block;height:100%;background:#b3261e;border-radius:5px;}
.dsp-cat-val{text-align:right;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
/* O formulario e uma linha so: lancar despesa e tarefa repetitiva, e cada
   campo em bloco proprio dobraria o numero de deslocamentos do olho. */
.dsp-nova{display:grid;grid-template-columns:1.6fr .8fr 1.2fr 1fr auto;gap:8px;
  margin:16px 0;align-items:center;}
.dsp-nova .m-inp{width:100%;}
.dsp-nova .m-confirm{white-space:nowrap;padding:11px 18px;border-radius:8px;border:none;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;}
.dsp-lista{display:flex;flex-direction:column;}
.dsp-item{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,150px) 110px 26px;
  gap:10px;align-items:center;padding:9px 0;font-size:.78rem;
  border-bottom:1px solid rgba(255,255,255,.05);}
.dsp-item:last-child{border-bottom:none;}
.dsp-item-data{color:var(--clr-text-faint);font-size:.72rem;font-variant-numeric:tabular-nums;}
.dsp-item-desc{color:rgba(255,255,255,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dsp-item-desc i{margin-left:6px;padding:1px 6px;border-radius:20px;font-style:normal;
  font-size:.6rem;background:rgba(99,102,241,.18);color:#c7d2fe;}
.dsp-item-cat{color:var(--clr-text-faint);font-size:.72rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.dsp-item-val{text-align:right;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
.dsp-x{width:24px;height:24px;border:none;border-radius:7px;cursor:pointer;
  background:none;color:rgba(255,255,255,.3);font-size:.7rem;}
.dsp-x:hover{background:rgba(239,68,68,.2);color:#fca5a5;}
.dsp-vazio{padding:26px;text-align:center;font-size:.78rem;color:var(--clr-text-faint);}
@media(max-width:720px){
  .dsp-nova{grid-template-columns:1fr 1fr;}
  .dsp-item{grid-template-columns:74px minmax(0,1fr) 96px 24px;}
  .dsp-item-cat{display:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   NOTAS FISCAIS — o painel
   ══════════════════════════════════════════════════════════════════════════
   A primeira versão reaproveitava .flx-kpis e .dsp-* das outras telas de
   dinheiro, e o resultado foi um formulário: quatro caixas iguais, listas
   separadas por fios, nada com profundidade e nada se movendo. Funcionava e
   parecia rascunho.

   Esta tela pede outra coisa. Ela responde uma pergunta com resposta
   desconfortável — "quanto do que entrou ainda não tem nota" —, e quem abre
   precisa ver a resposta antes de ler qualquer número. Então o painel tem
   HIERARQUIA de verdade: um cartão de cobertura que domina, quatro números
   subordinados a ele, e as listas como objetos empilhados.

   As animações são escalonadas de propósito. Tudo aparecendo junto é um
   piscar; em cascata, o olho segue a ordem em que a informação deve ser lida
   — cobertura, números, pendências, notas. São 260ms no total: rápido o
   suficiente para não atrasar quem já sabe o que veio fazer.

   Tudo respeita `prefers-reduced-motion` no fim do bloco.
   ══════════════════════════════════════════════════════════════════════════ */
.nf-modal{
  width:min(940px,96vw);max-height:92dvh;overflow-y:auto;padding:0;
  background:linear-gradient(168deg,#141419 0%,#0e0e12 46%,#0b0b0e 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset;
}
/* O cabeçalho gruda no topo: a tela rola, e sem isto o título e o ✕ somem
   assim que a lista de notas passa de meia dúzia. */
.nf-cab{
  position:sticky;top:0;z-index:3;padding:24px 28px 18px;
  background:linear-gradient(180deg,#16161c 72%,rgba(22,22,28,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:flex-start;gap:16px;
}
.nf-cab > div{flex:1;min-width:0;}
.nf-cab .m-h1{margin-bottom:4px;font-size:1.5rem;}
.nf-cab .m-sub{margin-bottom:0;}
.nf-corpo{padding:0 28px 26px;}

/* ── O aviso ──────────────────────────────────────────────────────────────
   Barra lateral, e não moldura cheia: amarelo em toda a volta competia com o
   título. O ícone dá o tom antes da leitura. */
.nf-aviso{
  display:flex;gap:13px;align-items:flex-start;
  border:1px solid rgba(245,158,11,.15);border-left:3px solid #f59e0b;
  background:linear-gradient(100deg,rgba(245,158,11,.1),rgba(245,158,11,.015) 60%);
  border-radius:11px;padding:13px 17px;margin-bottom:22px;
  font-size:.75rem;line-height:1.6;color:rgba(240,240,240,.52);
  animation:nfSobe .3s cubic-bezier(.16,1,.3,1) both;
}
.nf-aviso::before{
  content:'!';flex-shrink:0;width:19px;height:19px;border-radius:50%;
  background:rgba(245,158,11,.18);color:#fcd34d;
  font-size:.72rem;font-weight:800;line-height:19px;text-align:center;
  margin-top:1px;
}
.nf-aviso b{display:block;color:#fcd34d;font-weight:600;margin-bottom:3px;
  font-size:.79rem;letter-spacing:-.1px;}

/* ── A competência ────────────────────────────────────────────────────────
   Uma faixa própria, e não três elementos soltos: é o filtro que manda em
   tudo o que vem abaixo, e precisa se ler como controle. */
.nf-mes{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-bottom:18px;animation:nfSobe .3s cubic-bezier(.16,1,.3,1) .03s both;
}
/* Mesma razao: "Agosto 2026" tem quatro algarismos seguidos, e no Syne eles
   brigam entre si. */
.nf-mes b{
  font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:#fff;
  min-width:190px;text-align:center;letter-spacing:-.1px;
  font-variant-numeric:tabular-nums;
}
.nf-nav{
  width:34px;height:34px;border:1px solid var(--clr-border);border-radius:10px;
  cursor:pointer;background:rgba(255,255,255,.03);color:rgba(240,240,240,.6);
  font-size:1.05rem;line-height:1;display:flex;align-items:center;
  justify-content:center;transition:background .16s,border-color .16s,
  color .16s,transform .16s;
}
.nf-nav:hover{background:rgba(99,102,241,.15);border-color:var(--clr-indigo-40);
  color:#c7d2fe;transform:translateY(-1px);}
.nf-nav:active{transform:translateY(0) scale(.94);}

/* ── O HERÓI ────────────────────────────────────────────
   Eram quatro caixas iguais de número. Número não é resposta: "R$ 3.500,00"
   ainda exige comparar com o recebido para virar conclusão. Aqui a tela DIZ
   a conclusão em uma frase — "Faltam 2 notas, R$ 3.500,00" — e o anel dá a
   medida ao lado, para quem acompanha de perto.

   O anel, e não a barra: uma barra num painel de dinheiro se confunde com
   gráfico de valor. O anel se lê como progresso, e o vazio dele é exatamente
   o que falta fazer. */
.nf-heroi{
  display:flex;align-items:center;gap:24px;padding:22px 24px;
  border-radius:16px;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(16,185,129,.1),rgba(16,185,129,.02) 55%,transparent);
  border:1px solid rgba(16,185,129,.2);
  animation:nfSobe .34s cubic-bezier(.16,1,.3,1) .05s both;
}
.nf-heroi.pendente{
  background:linear-gradient(140deg,rgba(245,158,11,.12),rgba(239,68,68,.03) 55%,transparent);
  border-color:rgba(245,158,11,.24);
}
.nf-anel{position:relative;width:86px;height:86px;flex-shrink:0;
  animation:nfAnelEntra .5s cubic-bezier(.16,1,.3,1) .12s both;}
@keyframes nfAnelEntra{from{opacity:0;transform:scale(.82) rotate(-12deg);}
                       to{opacity:1;transform:scale(1) rotate(0);}}
.nf-anel svg{width:100%;height:100%;transform:rotate(-90deg);}
.nf-anel circle{fill:none;stroke-width:7;stroke-linecap:round;}
.nf-anel-fundo{stroke:rgba(255,255,255,.07);}
.nf-anel-traco{
  stroke:#34d399;filter:drop-shadow(0 0 6px rgba(16,185,129,.5));
  /* O ARCO NASCE PRONTO, no atributo do SVG. Tentei animá-lo de duas formas
     e as duas eram frágeis: keyframe com um só quadro `from` depende de o
     navegador resolver o `to` implícito a partir de um atributo de
     apresentação (o Chrome deixava a animação presa em `running`), e escrever
     o valor num `requestAnimationFrame` não roda com a aba em segundo plano
     — o anel ficaria vazio para sempre.

     Um número errado na tela custa mais que uma animação a menos. O arco sai
     certo sempre, e o movimento de entrada fica no cartão inteiro. */
}
.nf-heroi.pendente .nf-anel-traco{
  stroke:#fbbf24;filter:drop-shadow(0 0 6px rgba(245,158,11,.45));
}
.nf-anel span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  /* Em Inter, e não no Syne da marca: o Syne desenha os algarismos como forma,
     e "72%" a este tamanho vira desenho. O número que mede a resposta é o que
     menos pode ficar bonito às custas de ser lido. */
  font-family:'Inter',sans-serif;font-size:1.32rem;font-weight:800;color:#fff;
  letter-spacing:-1px;font-variant-numeric:tabular-nums;
}
.nf-heroi-txt{flex:1;min-width:0;}
.nf-heroi-txt h3{
  margin:0 0 5px;font-family:'Inter',sans-serif;font-size:1.16rem;font-weight:700;
  color:#fff;letter-spacing:-.4px;line-height:1.25;
}
.nf-heroi-txt p{margin:0;font-size:.78rem;line-height:1.55;
  color:rgba(240,240,240,.45);}
/* As pastilhas são o resumo por estágio: três números pequenos valem mais que
   três caixas grandes, porque a soma deles é a fila de trabalho. */
/* Onde estao os outros meses. A competencia segue o VENCIMENTO, e quem
   cadastra hoje uma cobranca de outubro abre a tela vazia — mandar procurar
   mes a mes e o que fazia parecer que o cliente nao existia. */
/* As abas dentro do dialogo do RPS sao as mesmas da fila, so que menores: e
   uma escolha entre duas coisas, nao um filtro de lista. */
.nf-rps-modo{margin-bottom:18px;}
.nf-rps-modo .nf-aba{padding:9px 12px;}
.nf-outros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;}
.nf-outros span{font-size:.72rem;color:rgba(240,240,240,.4);}
.nf-pastilhas{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
.nf-past{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;
  font-size:.68rem;font-weight:600;color:var(--st);
  background:color-mix(in srgb, var(--st) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--st) 26%, transparent);
}
.nf-past i{width:5px;height:5px;border-radius:50%;background:var(--st);flex-shrink:0;}

/* ── As abas ──────────────────────────────────────────
   Filtrar por estágio existe porque a fila cresce: em dezembro são trinta
   linhas, e quem entra para emitir não quer rolar por cima das já emitidas. */
.nf-abas{
  display:flex;gap:4px;padding:4px;border-radius:11px;margin-bottom:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--clr-border-faint);
  animation:nfSobe .3s cubic-bezier(.16,1,.3,1) .08s both;
}
.nf-aba{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 12px;border:none;border-radius:8px;cursor:pointer;background:none;
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;
  color:rgba(240,240,240,.45);transition:background .16s,color .16s;
}
.nf-aba:hover{color:rgba(240,240,240,.8);background:rgba(255,255,255,.04);}
.nf-aba.on{background:rgba(99,102,241,.2);color:#fff;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;}
.nf-aba i{font-style:normal;font-size:.66rem;padding:1px 6px;border-radius:20px;
  background:rgba(255,255,255,.08);color:inherit;opacity:.75;
  font-variant-numeric:tabular-nums;}

/* ── A obrigação ──────────────────────────────────────
   Uma linha por obrigação, com faixa lateral na cor do estágio: dá para
   varrer a lista pela margem esquerda sem ler nada. */
.nf-obr{
  position:relative;display:grid;gap:10px 16px;align-items:center;
  grid-template-columns:104px minmax(0,1fr) auto auto;
  padding:14px 16px 14px 19px;font-size:.79rem;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
  border:1px solid var(--clr-border-faint);overflow:hidden;
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
  animation:nfSobe .32s cubic-bezier(.16,1,.3,1) both;
}
.nf-obr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;}
.nf-obr.e-sem::before{background:#ef4444;}
.nf-obr.e-preparada::before{background:#f59e0b;}
.nf-obr.e-emitida::before{background:#10b981;}
/* A emitida recua um pouco: ela é histórico, e o trabalho é o que está acima
   dela. Volta ao normal no hover, para quem foi conferir. */
.nf-obr.e-emitida{opacity:.72;}
.nf-obr:hover{
  opacity:1;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.14);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.nf-obr-nome{color:rgba(255,255,255,.93);font-weight:500;min-width:0;}
.nf-obr-nome b{margin-left:8px;font-weight:600;font-size:.68rem;
  color:var(--clr-text-faint);font-variant-numeric:tabular-nums;}
.nf-obr-nome em{margin-left:7px;font-style:normal;font-size:.62rem;font-weight:600;
  padding:1px 7px;border-radius:20px;background:rgba(255,255,255,.07);
  color:rgba(240,240,240,.42);}
.nf-obr-nome u{
  display:flex;gap:7px;margin-top:5px;text-decoration:none;
  font-size:.68rem;line-height:1.45;color:rgba(252,211,77,.82);font-weight:400;
}
.nf-obr-nome u::before{content:'\25b2';font-size:.5rem;line-height:1.9;
  flex-shrink:0;opacity:.85;}
.nf-obr-val{text-align:right;color:#fff;font-weight:700;font-size:.86rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.2px;}

/* ── Seções ───────────────────────────────────────────────────────────────
   O fio até a borda diz até onde o título manda; sem ele o rótulo flutua
   sobre a lista. */
.nf-sec{
  display:flex;align-items:center;gap:10px;margin:26px 0 12px;
  font-size:.62rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(240,240,240,.4);
}
.nf-sec::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--clr-border),transparent);}
.nf-sec i{
  font-style:normal;padding:2px 9px;border-radius:20px;letter-spacing:0;
  background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);
  color:#fca5a5;font-size:.64rem;font-weight:700;order:2;
}

/* ── As linhas ────────────────────────────────────────────────────────────
   Cada nota é um CARTÃO, e não uma linha de tabela: assim a fileira de botões
   pertence visivelmente àquela nota, e não ao espaço entre duas.
   A entrada é escalonada — o olho desce a lista na ordem em que ela existe. */
.nf-lista{display:flex;flex-direction:column;gap:9px;}
.nf-pend,.nf-item{
  display:grid;gap:10px 16px;align-items:center;
  padding:13px 16px;font-size:.79rem;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
  border:1px solid var(--clr-border-faint);
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
  animation:nfSobe .32s cubic-bezier(.16,1,.3,1) both;
}
.nf-pend:hover,.nf-item:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.14);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
/* A cascata: seis degraus bastam. Da sétima em diante todas entram juntas —
   escalonar uma lista longa vira espera. */
.nf-lista > *:nth-child(1){animation-delay:.08s;}
.nf-lista > *:nth-child(2){animation-delay:.12s;}
.nf-lista > *:nth-child(3){animation-delay:.16s;}
.nf-lista > *:nth-child(4){animation-delay:.2s;}
.nf-lista > *:nth-child(5){animation-delay:.24s;}
.nf-lista > *:nth-child(n+6){animation-delay:.26s;}
.nf-pend{grid-template-columns:minmax(0,1fr) auto auto;}
/* Largura fixa no selo: "A EMITIR" e "EMITIDA" têm tamanhos diferentes, e sem
   reserva o nome do tomador começa em lugares distintos a cada linha. */
.nf-item{grid-template-columns:104px minmax(0,1fr) auto auto;}
.nf-pend-nome,.nf-item-nome{color:rgba(255,255,255,.93);font-weight:500;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nf-item-nome b{margin-left:8px;font-weight:600;font-size:.68rem;
  color:var(--clr-text-faint);font-variant-numeric:tabular-nums;}
/* A pendência é nota de rodapé da linha: com o triângulo antes, ela para de
   competir com o nome e continua a poucos centímetros do botão que corrige. */
.nf-item-nome u{
  display:flex;gap:7px;margin-top:5px;text-decoration:none;
  font-size:.68rem;line-height:1.45;color:rgba(252,211,77,.82);
  white-space:normal;font-weight:400;
}
.nf-item-nome u::before{content:'▲';font-size:.5rem;line-height:1.9;
  flex-shrink:0;opacity:.85;}
.nf-pend-val,.nf-item-val{text-align:right;color:#fff;font-weight:700;
  font-size:.86rem;font-variant-numeric:tabular-nums;white-space:nowrap;
  letter-spacing:-.2px;}
/* O status é SELO, e não um ponto ao lado de um texto: solto, o ponto se
   perdia contra o fundo do cartão. */
.nf-st{
  display:inline-flex;align-items:center;gap:6px;font-size:.62rem;
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--st);
  white-space:nowrap;padding:5px 10px;border-radius:20px;justify-self:start;
  background:color-mix(in srgb, var(--st) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--st) 30%, transparent);
}
.nf-st i{width:5px;height:5px;border-radius:50%;background:var(--st);
  flex-shrink:0;box-shadow:0 0 6px var(--st);}
.nf-item-acoes{display:flex;align-items:center;gap:7px;justify-content:flex-end;}

/* ── Botões ───────────────────────────────────────────────────────────── */
.nf-mini,.nf-btn-prep{
  border:1px solid var(--clr-border);border-radius:9px;
  background:rgba(255,255,255,.035);color:rgba(240,240,240,.72);cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:500;
  padding:7px 13px;white-space:nowrap;text-decoration:none;
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.nf-mini:hover,.nf-btn-prep:hover{background:rgba(99,102,241,.16);
  border-color:var(--clr-indigo-40);color:#c7d2fe;transform:translateY(-1px);}
.nf-mini:active,.nf-btn-prep:active{transform:translateY(0) scale(.97);}
.nf-mini.forte{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.32);
  color:#6ee7b7;font-weight:600;}
.nf-mini.forte:hover{background:rgba(16,185,129,.26);border-color:rgba(16,185,129,.5);
  color:#a7f3d0;box-shadow:0 4px 14px rgba(16,185,129,.18);}
.nf-x{
  width:28px;height:28px;border:none;border-radius:8px;cursor:pointer;
  background:none;color:rgba(255,255,255,.24);font-size:.76rem;flex-shrink:0;
  transition:background .16s,color .16s;
}
.nf-x:hover{background:rgba(239,68,68,.18);color:#fca5a5;}

/* ── Vazio ────────────────────────────────────────────────────────────── */
.nf-vazio-guia{padding:26px 4px 10px;text-align:center;
  animation:nfSobe .32s cubic-bezier(.16,1,.3,1) .1s both;}
.nf-vazio-guia p{margin:0;font-size:.8rem;color:rgba(240,240,240,.5);}
.nf-vazio-porque{max-width:540px;margin:10px auto 0 !important;
  font-size:.73rem !important;line-height:1.65;color:rgba(240,240,240,.3) !important;}
.nf-vazio{padding:26px;text-align:center;font-size:.78rem;
  color:var(--clr-text-faint);}

/* ── Rodapé ───────────────────────────────────────────────────────────── */
.nf-rodape{
  margin-top:24px;padding-top:17px;border-top:1px solid var(--clr-border-faint);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.nf-link{font-size:.75rem;color:var(--clr-indigo-light);text-decoration:none;
  padding:7px 11px;border-radius:8px;transition:background .16s;}
.nf-link:hover{background:rgba(99,102,241,.12);text-decoration:none;}

/* ── O formulário ─────────────────────────────────────────────────────── */
.nf-form{width:min(580px,94vw);}
.nf-grupo{
  display:flex;align-items:center;gap:9px;
  font-size:.6rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--clr-indigo-light);margin:20px 0 12px;
}
.nf-grupo::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--clr-indigo-20),transparent);}
.nf-grupo:first-of-type{margin-top:16px;}
.nf-dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.nf-quatro{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:11px;}
.nf-dupla .m-inp,.nf-quatro .m-inp{margin-bottom:11px;}
.nf-form .m-inp{transition:border-color .18s,box-shadow .18s,background .18s;}
.nf-form .m-inp:focus{background:rgba(99,102,241,.05);}
/* O que NÃO muda de nota para nota fica recolhido: digita-se uma vez. */
.nf-bloco{
  border:1px solid var(--clr-border);border-radius:12px;padding:0 15px;
  margin:8px 0 18px;background:rgba(255,255,255,.018);
  transition:border-color .18s,background .18s;
}
.nf-bloco:hover{border-color:rgba(255,255,255,.13);}
.nf-bloco[open]{padding-bottom:9px;background:rgba(255,255,255,.028);}
.nf-bloco summary{
  cursor:pointer;padding:13px 0;font-size:.73rem;font-weight:600;
  color:rgba(240,240,240,.78);display:flex;align-items:center;gap:10px;
  list-style:none;user-select:none;
}
.nf-bloco summary::-webkit-details-marker{display:none;}
.nf-bloco summary::before{
  content:'';width:6px;height:6px;flex-shrink:0;
  border-right:1.6px solid var(--clr-text-faint);
  border-bottom:1.6px solid var(--clr-text-faint);
  transform:rotate(-45deg);transition:transform .2s;margin-left:2px;
}
.nf-bloco[open] summary::before{transform:rotate(45deg);}
.nf-bloco summary i{font-style:normal;font-size:.64rem;font-weight:500;
  color:var(--clr-text-faint);margin-left:auto;}
.nf-bloco[open] > *:not(summary){animation:nfSobe .26s cubic-bezier(.16,1,.3,1) both;}
.nf-ajuda{font-size:.69rem;line-height:1.6;color:rgba(240,240,240,.33);
  margin:-7px 0 15px;}
.nf-ajuda-topo{margin:0 0 15px;}
.nf-check{display:flex;align-items:center;gap:10px;margin:2px 0 15px;
  cursor:pointer;font-size:.79rem;color:rgba(240,240,240,.72);}
.nf-check input{width:17px;height:17px;flex-shrink:0;
  accent-color:var(--clr-indigo);cursor:pointer;}
/* O líquido à vista: o único jeito de pegar uma retenção digitada errada
   ANTES de o documento existir — depois, corrigir custa cancelamento. */
.nf-liquido:not(:empty){
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px 15px;border-radius:10px;margin-bottom:9px;
  background:linear-gradient(100deg,rgba(16,185,129,.11),rgba(16,185,129,.03));
  border:1px solid rgba(16,185,129,.24);
  animation:nfSobe .26s cubic-bezier(.16,1,.3,1) both;
}
.nf-liquido span{font-size:.61rem;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:rgba(110,231,183,.7);}
.nf-liquido b{font-size:1.12rem;color:#6ee7b7;font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;}
.nf-liquido i{font-style:normal;font-size:.69rem;color:rgba(240,240,240,.36);
  margin-left:auto;}

@keyframes nfSobe{from{opacity:0;transform:translateY(9px);}
                  to{opacity:1;transform:translateY(0);}}
@keyframes nfEnche{from{width:0 !important;}}


@media(max-width:860px){
  .nf-topo{grid-template-columns:1fr;}
  .nf-nums{grid-template-columns:repeat(3,1fr);}
  .nf-num{flex-direction:column;align-items:flex-start;gap:5px;}
}
@media(max-width:768px){
  .nf-cab{padding:18px 18px 14px;}
  .nf-corpo{padding:0 18px 20px;}
  /* Alvo de toque de 40px MEDIDOS: só padding dava 38, e a diferença de dois
     pixels não aparece no código, só na régua. */
  .nf-mini,.nf-btn-prep{display:inline-flex;align-items:center;
    justify-content:center;min-height:40px;padding:0 15px;font-size:.75rem;}
  /* O ✕ é o único destrutivo da fileira: mesmo alvo dos outros, para não ser
     o mais fácil de acertar por engano nem o mais difícil de propósito. */
  .nf-x{width:40px;height:40px;font-size:.84rem;}
  .nf-nav{width:40px;height:40px;}
}
@media(max-width:640px){
  .nf-nums{grid-template-columns:1fr;}
  .nf-num{flex-direction:row;align-items:baseline;}
  .nf-obr{grid-template-columns:minmax(0,1fr) auto;
    grid-auto-rows:auto;row-gap:9px;padding:14px 14px 14px 17px;}
  .nf-obr-nome{grid-column:1/-1;}
  .nf-heroi{flex-direction:column;text-align:center;gap:16px;}
  .nf-pastilhas{justify-content:center;}
  .nf-abas{flex-wrap:wrap;}
  .nf-st{grid-column:1/-1;}
  .nf-obr-val{text-align:left;}
  .nf-item-acoes{justify-content:flex-end;flex-wrap:wrap;}
  .nf-heroi-txt h3{font-size:1.05rem;}
  .nf-dupla{grid-template-columns:1fr;gap:0;}
}
/* Quem pediu menos movimento recebe a tela pronta, sem cascata nenhuma. */
@media(prefers-reduced-motion:reduce){
  .nf-aviso,.nf-mes,.nf-topo,.nf-pend,.nf-item,.nf-vazio-guia,
  .nf-liquido:not(:empty),.nf-bloco[open] > *:not(summary){animation:none;}
  .nf-barra i,.nf-anel{animation:none;}
  .nf-obr:hover,.nf-mini:hover,.nf-btn-prep:hover,
  .nf-nav:hover{transform:none;}
}

/* ── Fluxo de caixa ────────────────────────────────────────────────────
   Doze colunas, uma por semana. A pilha e de baixo para cima: o vencido
   embaixo, apoiado no eixo, e o a receber em cima — assim a parte vermelha
   se compara entre semanas sem depender de onde a barra comeca. */
.flx-modal{width:min(900px,96vw);max-height:92dvh;overflow-y:auto;padding:22px;}
.flx-cab{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;}
.flx-cab > div{flex:1;min-width:0;}
.flx-x{width:30px;height:30px;flex-shrink:0;border:none;border-radius:9px;cursor:pointer;
  background:var(--clr-border-faint);color:var(--clr-text);font-size:.9rem;}
.flx-x:hover{background:rgba(239,68,68,.2);color:var(--clr-danger-light);}
/* O passo fica no alto, em pilulas: sao seis escolhas mutuamente exclusivas
   e a atual precisa estar visivel sem abrir nada. */
.flx-passos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.flx-passos button{padding:6px 13px;border-radius:20px;cursor:pointer;
  border:1px solid var(--clr-border);background:none;color:var(--clr-text-faint);
  font-family:'Inter',sans-serif;font-size:.73rem;transition:all .15s;}
.flx-passos button:hover{color:#fff;border-color:var(--clr-indigo-40);}
.flx-passos button.sel{background:var(--clr-indigo-20);border-color:transparent;
  color:#c7d2fe;font-weight:600;}
.flx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px;}
.flx-kpis > div{padding:12px 14px;border-radius:11px;background:var(--clr-bg-card);
  border:1px solid var(--clr-border);display:flex;flex-direction:column;gap:5px;min-width:0;}
.flx-kpis span{font-size:.6rem;font-weight:700;letter-spacing:.9px;color:var(--clr-text-faint);}
.flx-kpis b{font-size:.95rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.flx-vermelho{color:#f87171 !important;}
.flx-grafico{display:flex;align-items:flex-end;gap:6px;height:210px;
  padding:0 2px 0;border-bottom:1px solid var(--clr-border);}
.flx-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;gap:5px;}
.flx-val{font-size:.58rem;color:var(--clr-text-dim);text-align:center;height:12px;
  white-space:nowrap;overflow:hidden;}
.flx-pilha{flex:1;display:flex;flex-direction:column;justify-content:flex-end;}
.flx-b{display:block;width:100%;border-radius:3px 3px 0 0;}
.flx-b-receber{background:#4f46e5;}
.flx-b-vencido{background:#b3261e;border-radius:0;}
.flx-rot{font-size:.55rem;color:var(--clr-text-faint);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* A semana corrente marcada: sem isso, doze rotulos iguais nao dizem onde
   e "agora", e o grafico perde o unico ponto de referencia que tem. */
.flx-rot.agora{color:#c7d2fe;font-weight:700;}
.flx-legenda{display:flex;gap:20px;margin:14px 0 0;font-size:.72rem;color:var(--clr-text-faint);}
.flx-legenda span{display:flex;align-items:center;gap:7px;}
.flx-legenda i{width:11px;height:11px;border-radius:3px;display:block;}
.flx-notas{margin-top:16px;font-size:.75rem;line-height:1.6;color:var(--clr-text-faint);}
.flx-notas p{margin:0 0 6px;}
.flx-aviso{font-style:italic;opacity:.85;}
@media(max-width:640px){
  .flx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .flx-rot{font-size:.5rem;}
}

/* ── A serie na tabela ────────────────────────────────────────────────
   Uma linha por CONTRATO, e as parcelas debaixo dela. O agrupamento so
   funciona se ele for VISIVEL: com as parcelas apenas recuadas, dezenove
   linhas quase iguais continuavam parecendo dezenove clientes. Entao o
   grupo inteiro ganha fundo proprio e uma barra continua a esquerda — as
   duas coisas que dizem "isto aqui e um bloco" sem precisar de legenda. */
.crm-row-serie{cursor:pointer;}
.crm-row-serie td{background:rgba(99,102,241,.07);border-top:1px solid rgba(99,102,241,.18);}
.crm-row-serie:hover td{background:rgba(99,102,241,.12);}
.crm-row-serie.aberta td{background:rgba(99,102,241,.13);}
.crm-row-serie td:first-child{border-left:3px solid #6366f1;}
.crm-serie-seta{display:inline-block;width:14px;color:#a5b4fc;font-size:.7rem;
  transition:transform .15s;}
.crm-serie-valor{cursor:default;}
.crm-serie-atraso{color:#f87171;}
.crm-serie-quitada{color:#34d399;font-size:.74rem;}

/* A parcela e recuada, mais discreta e presa a barra da esquerda: ela
   pertence a linha de cima, e sem isso as duas competem pela mesma leitura. */
.crm-row-parcela td{background:rgba(99,102,241,.035);border-top-color:rgba(255,255,255,.03);}
.crm-row-parcela td:first-child{border-left:3px solid rgba(99,102,241,.35);
  padding-left:26px;font-size:.62rem;opacity:.5;}
.crm-row-parcela .crm-avatar{width:22px;height:22px;font-size:.6rem;opacity:.55;}
.crm-parcela-marca{color:rgba(255,255,255,.72);font-size:.78rem;font-weight:600;}
/* A ultima parcela fecha o bloco: sem a borda de baixo, o grupo se derrama
   na proxima linha da tabela e o olho nao acha onde ele termina. */
.crm-row-parcela:last-child td{border-bottom:1px solid rgba(99,102,241,.18);}
.crm-row-mais td{background:rgba(99,102,241,.035);padding:4px 0 8px;}
.crm-mais-btn{border:none;background:none;cursor:pointer;padding:4px 0;
  font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;color:#93a4f8;}
.crm-mais-btn:hover{color:#c7d2fe;text-decoration:underline;}

/* ── Parcelas ─────────────────────────────────────────────────────────
   O "3/12" ao lado do nome e o que impede a leitura errada da tabela: sem
   ele, doze linhas iguais parecem doze clientes, e a soma da carteira
   parece um erro. */
.crm-serie-chip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;
  background:rgba(99,102,241,.18);color:#c7d2fe;font-size:.62rem;font-weight:700;
  vertical-align:middle;font-variant-numeric:tabular-nums;}
.crm-serie-nota{margin:2px 0 12px;padding:9px 12px;border-radius:9px;font-size:.74rem;
  line-height:1.5;background:rgba(99,102,241,.1);color:#c7d2fe;
  border:1px solid rgba(99,102,241,.22);}

/* ── Cobrar ────────────────────────────────────────────────────────────
   A previa ocupa o meio da janela porque e a peca que decide o clique: quem
   manda uma cobranca quer LER a cobranca antes, e nao descobrir o texto
   depois de enviado. */
.cob-modal{width:min(560px,95vw);max-height:90dvh;overflow-y:auto;}
.cob-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:14px 0 16px;padding:14px;border-radius:12px;background:var(--clr-bg-card);
  border:1px solid var(--clr-border);}
.cob-resumo div{display:flex;flex-direction:column;gap:4px;min-width:0;}
.cob-resumo span{font-size:.62rem;font-weight:700;letter-spacing:.9px;color:var(--clr-text-faint);}
.cob-resumo b{font-size:.86rem;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cob-aviso{margin-bottom:12px;padding:9px 12px;border-radius:9px;font-size:.74rem;
  background:rgba(201,138,4,.12);color:#fbbf24;}
.cob-previa{margin:6px 0 14px;padding:13px 15px;border-radius:11px;white-space:pre-wrap;
  font-family:'Inter',sans-serif;font-size:.76rem;line-height:1.6;
  color:rgba(255,255,255,.86);background:var(--clr-bg-card);
  border:1px solid var(--clr-border);max-height:210px;overflow-y:auto;}
/* Enviar pesa mais que os outros dois: com tres botoes de mesma largura,
   nenhum parece o principal e a pessoa tem de ler os tres para decidir. */
.cob-modal .m-btns .m-confirm{flex:1.5;}
.cob-modal .m-inp{width:100%;}
/* A linha de erro dos modais nao tinha regra nenhuma — aparecia como texto
   comum, do tamanho do resto, e passava despercebida justamente quando
   importa. Serve tambem ao recibo, que usa a mesma classe. */
.campo-erro{min-height:1em;margin:8px 0 0;font-size:.76rem;line-height:1.45;
  color:var(--clr-danger-light);}
.campo-erro:empty{margin:0;min-height:0;}

/* ── Qual proposta enviar ──────────────────────────────────────────────
   Duas saídas do mesmo tamanho, lado a lado no eixo vertical: nenhuma é "a
   certa", e destacar uma delas empurraria a escolha. */
.pm-modal{width:min(460px,94vw);padding:22px;display:flex;flex-direction:column;gap:10px;}
.pm-h1{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;color:#fff;}
.pm-sub{font-size:.76rem;line-height:1.5;color:var(--clr-text-faint);margin-bottom:4px;}
.pm-opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:14px;border-radius:12px;border:1px solid var(--clr-border);
  background:var(--clr-bg-card);color:var(--clr-text);cursor:pointer;
  font-family:'Inter',sans-serif;transition:border-color .15s,background .15s;}
.pm-opt:hover:not(:disabled){border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.08);}
/* Opcao indisponivel fica APAGADA e com o motivo escrito embaixo. Sumir com
   ela deixaria a pessoa procurando um recurso que existe. */
.pm-opt-off{opacity:.5;cursor:not-allowed;}
.pm-opt-ico{display:flex;align-items:center;color:#a5b4fc;flex-shrink:0;margin-top:1px;}
.pm-opt-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pm-opt-txt b{font-size:.84rem;font-weight:600;color:#fff;}
.pm-opt-txt i{font-style:normal;font-size:.72rem;line-height:1.45;color:var(--clr-text-faint);}
.pm-cancelar{margin-top:2px;padding:9px;border:none;border-radius:10px;background:none;
  color:var(--clr-text-faint);font-family:'Inter',sans-serif;font-size:.76rem;cursor:pointer;}
.pm-cancelar:hover{color:#fff;}

.pr-bg{align-items:flex-start;overflow:auto;padding:22px 0;}
.pr-tela{width:min(1080px,96vw);max-height:none;padding:0;overflow:visible;background:var(--clr-bg-panel);}
.pr-corpo{padding:22px 26px 26px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pr-bloco{padding:16px 18px;border-radius:14px;background:var(--clr-bg-card);
  border:1px solid var(--clr-border);min-width:0;}
.pr-bloco-cab{display:flex;align-items:center;gap:10px;
  font-family:'Syne',sans-serif;font-size:.92rem;font-weight:700;color:#fff;}
.pr-bloco-sub{margin:3px 0 12px;font-size:.68rem;line-height:1.45;color:var(--clr-text-faint);}
.pr-lista{display:flex;flex-direction:column;gap:8px;}
.pr-card{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;
  transition:border-color .15s,background .15s;}
.pr-card:hover{border-color:rgba(45,212,191,.4);background:rgba(255,255,255,.055);}
.pr-card:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px;}
.pr-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:.78rem;font-weight:700;color:#04120f;
  background:linear-gradient(135deg,#6366f1,#818cf8);}
.pr-id{flex:1;min-width:0;}
.pr-nome{font-size:.82rem;font-weight:600;color:#fff;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.pr-sub{font-size:.68rem;color:var(--clr-text-faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.pr-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;}
.pr-valor{font-size:.76rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;}
.pr-pill{padding:2px 9px;border-radius:20px;background:rgba(99,102,241,.18);
  color:#c7d2fe;font-size:.62rem;font-weight:700;white-space:nowrap;}
.pr-pill.ok{background:rgba(16,185,129,.16);color:#34d399;}
.pr-quando{font-size:.64rem;color:var(--clr-text-faint);white-space:nowrap;}
.pr-quando.grave{color:#f87171;}
/* Remover a proposta direto do cartao: some quando ela nao existe, e nunca
   aparece em quem ja e colaborador — la a proposta e historico. */
.pr-card{position:relative;}
.pr-remover{position:absolute;top:6px;right:6px;width:20px;height:20px;border:0;
  border-radius:6px;background:none;color:rgba(255,255,255,.28);font-size:.7rem;
  line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s;}
.pr-card:hover .pr-remover,.pr-remover:focus-visible{opacity:1;}
.pr-remover:hover{background:rgba(239,68,68,.18);color:#fca5a5;}
@media(max-width:900px){.pr-corpo{grid-template-columns:1fr;}}

/* ── Visão geral do RH ──────────────────────────────────────────────────
   TELA CHEIA, e não modal. São cinco indicadores, dois gráficos, sete
   blocos e a tabela do quadro: numa janela sobra margem morta dos lados e
   falta largura para a tabela, que passava a rolar na horizontal DENTRO de
   um quadro que já rolava na vertical. `position:fixed` + rolagem própria,
   e o corpo da página travado atrás para o scroll não se dividir em dois. */
.rhv-full{position:fixed;inset:0;z-index:1500;overflow-y:auto;overflow-x:hidden;
  background:var(--clr-bg);animation:fadeIn .18s both;}
body.rhv-travado{overflow:hidden;}
/* A faixa acompanha a rolagem: com 2.000 px de painel, voltar ao topo só
   para usar a busca é ida e volta que ninguém quer fazer duas vezes. */
.rhv-hero{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;padding:20px clamp(16px,3vw,34px);
  background:linear-gradient(100deg,#0c5c58 0%,#0f7a5f 32%,#12805a 52%,rgba(10,10,10,.92) 88%),
    var(--clr-bg);
  border-bottom:1px solid rgba(255,255,255,.08);}
.rhv-h1{flex:1;min-width:200px;font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;
  letter-spacing:-.8px;color:#fff;}
.rhv-hero-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rhv-busca-wrap{display:flex;align-items:center;gap:9px;width:min(390px,58vw);
  padding:0 14px;border-radius:11px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.34);color:var(--clr-text-faint);}
.rhv-busca-wrap:focus-within{border-color:rgba(45,212,191,.55);}
.rhv-busca-wrap svg{flex-shrink:0;}
.rhv-busca{flex:1;min-width:0;padding:11px 0;border:none;background:none;color:#fff;
  font-family:'Inter',sans-serif;font-size:.8rem;}
.rhv-busca:focus{outline:none;}
.rhv-pill{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;
  border:1px solid rgba(255,255,255,.16);background:rgba(10,12,20,.62);color:#e2e8f0;
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s;}
.rhv-pill:hover{background:rgba(30,34,52,.8);border-color:rgba(255,255,255,.28);}
.rhv-quadrado{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:11px;border:1px solid rgba(255,255,255,.16);background:rgba(10,12,20,.62);
  color:#e2e8f0;font-size:.9rem;line-height:1;cursor:pointer;flex-shrink:0;
  transition:background .15s,border-color .15s,color .15s;}
.rhv-quadrado:hover{background:rgba(30,34,52,.8);border-color:rgba(255,255,255,.28);}
.rhv-sair:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4);color:#fca5a5;}
.rhv-corpo{padding:18px clamp(16px,3vw,34px) 40px;display:flex;flex-direction:column;gap:16px;}

.rhv-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.rhv-kpi{padding:16px 18px;border-radius:14px;background:var(--clr-bg-card);
  border:1px solid var(--clr-border);}
.rhv-kpi-lbl{font-size:.76rem;color:rgba(255,255,255,.72);}
.rhv-kpi-linha{display:flex;align-items:center;gap:12px;margin:10px 0 8px;}
.rhv-kpi-esq{display:flex;align-items:baseline;gap:8px;flex-shrink:0;}
.rhv-kpi-num{font-family:'Syne',sans-serif;font-size:2.15rem;font-weight:800;color:#fff;
  letter-spacing:-1.4px;line-height:1;}
.rhv-kpi-delta{padding:2px 7px;border-radius:20px;font-size:.66rem;font-weight:700;
  white-space:nowrap;}
.rhv-kpi-delta.sobe{color:#34d399;background:rgba(16,185,129,.14);}
.rhv-kpi-delta.desce{color:#f87171;background:rgba(239,68,68,.14);}
.rhv-kpi-delta.igual{color:var(--clr-text-faint);background:rgba(255,255,255,.05);}
.rhv-kpi-spark{flex:1;min-width:40px;height:36px;color:#2dd4bf;}
.rhv-kpi-spark.desce{color:#f87171;}
.rhv-spark{width:100%;height:100%;display:block;}
.rhv-kpi-pe{font-size:.68rem;color:var(--clr-text-faint);}

.rhv-graficos{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;}
.rhv-bloco{padding:16px 18px;border-radius:14px;background:var(--clr-bg-card);
  border:1px solid var(--clr-border);min-width:0;display:flex;flex-direction:column;}
.rhv-bloco-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-shrink:0;
  font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:#fff;}
.rhv-bloco-n{margin-left:auto;padding:2px 9px;border-radius:20px;background:rgba(99,102,241,.18);
  color:#c7d2fe;font-size:.66rem;font-weight:700;font-variant-numeric:tabular-nums;}
.rhv-periodos{margin-left:auto;display:flex;gap:4px;}
.rhv-periodos button{border:none;background:none;padding:4px 10px;border-radius:8px;
  font-family:'Inter',sans-serif;font-size:.68rem;color:var(--clr-text-faint);cursor:pointer;}
.rhv-periodos button.sel{background:rgba(255,255,255,.09);color:#fff;}
.rhv-vazio{padding:22px 6px;text-align:center;font-size:.74rem;color:var(--clr-text-faint);
  line-height:1.5;}

/* A cor do gráfico mora aqui, e o SVG a herda por `currentColor`. */
.rhv-area{position:relative;height:210px;color:#2dd4bf;}
.rhv-area svg{width:100%;height:180px;display:block;}
.rhv-area-eixo{position:relative;height:18px;}
.rhv-area-eixo span{position:absolute;transform:translateX(-50%);font-size:.62rem;
  color:var(--clr-text-faint);white-space:nowrap;}
.rhv-area-max,.rhv-area-min{position:absolute;left:0;font-size:.62rem;color:var(--clr-text-faint);}
.rhv-area-max{top:0;}
.rhv-area-min{top:158px;}

.rhv-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.rhv-donut{position:relative;width:150px;height:150px;flex-shrink:0;}
.rhv-donut svg{width:100%;height:100%;transform:rotate(-90deg);}
.rhv-donut-centro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;}
.rhv-donut-centro b{font-family:'Syne',sans-serif;font-size:1.5rem;color:#fff;line-height:1;}
.rhv-donut-centro span{font-size:.62rem;color:var(--clr-text-faint);}
.rhv-legenda{flex:1;min-width:190px;display:flex;flex-direction:column;gap:5px;}
.rhv-leg-item{display:flex;align-items:center;gap:8px;font-size:.72rem;}
.rhv-leg-cor{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.rhv-leg-nome{flex:1;color:var(--clr-text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rhv-leg-n{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
.rhv-leg-pct{width:48px;text-align:right;color:var(--clr-text-faint);font-variant-numeric:tabular-nums;}

.rhv-blocos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.rhv-baixo{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rhv-bloco-corpo{flex:1;display:flex;flex-direction:column;}
.rhv-linha{display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.045);font-size:.75rem;min-width:0;}
.rhv-linha:last-child{border-bottom:none;}
.rhv-clique{cursor:pointer;}
.rhv-clique:hover .rhv-linha-nome,.rhv-clique:hover .rhv-duas b{color:#c7d2fe;}
.rhv-linha-ico{display:flex;align-items:center;color:var(--clr-text-faint);flex-shrink:0;}
.rhv-linha-nome{flex:1;min-width:0;color:rgba(255,255,255,.88);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rhv-linha-sub{color:var(--clr-text-faint);font-size:.68rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:38%;}
.rhv-linha-n{margin-left:auto;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.rhv-linha-n.grave{color:#f87171;font-weight:600;}
.rhv-linha-alerta{display:flex;align-items:center;color:#fbbf24;flex-shrink:0;}
.rhv-linha-alerta.grave{color:#f87171;}
.rhv-tag{padding:3px 9px;border-radius:20px;background:rgba(99,102,241,.16);color:#c7d2fe;
  font-size:.63rem;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis;}
/* O aniversariante vem com inicial em disco: a lista tem nome e área, e sem
   a âncora à esquerda vira parágrafo em vez de lista de gente. */
.rhv-av{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;flex-shrink:0;font-size:.72rem;font-weight:700;color:#0b1220;
  background:linear-gradient(135deg,#5eead4,#818cf8);}
.rhv-duas{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.rhv-duas b{font-weight:600;font-size:.75rem;color:rgba(255,255,255,.9);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rhv-duas i{font-style:normal;font-size:.66rem;color:var(--clr-text-faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
/* Próximas admissões é tabela disfarçada de lista: quatro colunas que só se
   leem de relance se ficarem ALINHADAS entre as linhas. */
.rhv-linha-cols{display:grid;grid-template-columns:16px 92px minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,.9fr);
  gap:12px;align-items:center;}
.rhv-linha-cols .rhv-linha-data{color:var(--clr-text-dim);font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.rhv-linha-cargo,.rhv-linha-area{color:var(--clr-text-faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
/* "Ver todos (9)" e não um link decorativo: o bloco corta em seis, e sem o
   rodapé quem tem nove lê seis e vai embora achando que viu tudo. */
.rhv-ver{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  margin-top:10px;padding:9px 0 1px;border:none;border-top:1px solid rgba(255,255,255,.05);
  background:none;color:#93a4f8;font-family:'Inter',sans-serif;font-size:.7rem;
  font-weight:600;cursor:pointer;transition:color .15s;}
.rhv-ver:hover{color:#c7d2fe;}
.rhv-ver svg{transition:transform .15s;}
.rhv-ver:hover svg{transform:translateX(3px);}

.rhv-quadro{padding:16px 18px;border-radius:14px;background:var(--clr-bg-card);
  border:1px solid var(--clr-border);overflow-x:auto;}
.rhv-tabela{width:100%;border-collapse:collapse;}
.rhv-tabela th{text-align:left;padding:0 10px 9px;font-size:.64rem;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:var(--clr-text-faint);}
.rhv-tabela td{padding:10px;border-top:1px solid rgba(255,255,255,.05);font-size:.78rem;
  color:rgba(255,255,255,.85);}
.rhv-tabela tr[data-colab]{cursor:pointer;}
.rhv-tabela tr[data-colab]:hover td{background:rgba(255,255,255,.03);}
.rhv-sit{padding:3px 10px;border-radius:20px;font-size:.66rem;font-weight:700;}
.rhv-sit-ativo{background:rgba(16,185,129,.16);color:#34d399;}
.rhv-sit-ferias{background:rgba(56,189,248,.16);color:#7dd3fc;}
.rhv-sit-afastado{background:rgba(245,158,11,.16);color:#fbbf24;}
.rhv-sit-desligado{background:rgba(148,163,184,.16);color:#cbd5e1;}
.rhv-kebab{width:26px;height:24px;border:none;border-radius:7px;background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5);font-size:1rem;line-height:1;cursor:pointer;}
.rhv-kebab:hover{background:rgba(167,139,250,.2);color:#ddd6fe;}
.rhvf-modal{width:min(760px,95vw);max-height:88dvh;overflow-y:auto;}
/* A ficha do colaborador e a do candidato continuada: ela tem secoes porque
   sao vinte campos, e uma lista corrida de vinte campos ninguem le. */
.rhvf-secao{margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--clr-border);
  font-family:'Syne',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;color:var(--clr-text-dim);}
.rhvf-secao:first-of-type{margin-top:10px;}
/* O que o processo seletivo perguntou entra como LEITURA: e o registro do que
   a pessoa respondeu, e editar aqui criaria uma segunda verdade. */
.rhvf-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;}
.rhvf-campo{display:flex;align-items:baseline;gap:8px;font-size:.74rem;min-width:0;}
.rhvf-campo span{color:var(--clr-text-faint);white-space:nowrap;}
.rhvf-campo b{color:rgba(255,255,255,.88);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rhvf-puxar{display:block;margin:16px 0 0;}
@media(max-width:640px){.rhvf-campos{grid-template-columns:1fr;}}

@media(max-width:1440px){
  .rhv-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .rhv-blocos{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:1180px){
  .rhv-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rhv-blocos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rhv-graficos,.rhv-baixo,.pa-grid{grid-template-columns:1fr;}
  .rhv-linha-cols{grid-template-columns:16px 88px minmax(0,1.2fr) minmax(0,1fr);}
  .rhv-linha-cols .rhv-linha-area{display:none;}
}
@media(max-width:640px){
  .rhv-kpis,.rhv-blocos{grid-template-columns:1fr;}
  .rhv-h1{font-size:1.4rem;}
  .rhv-busca-wrap{width:100%;}
  .rhv-hero-acoes{width:100%;}
  .rhv-pill span{display:none;}
  .rhv-linha-cols{grid-template-columns:16px 82px minmax(0,1fr);}
  .rhv-linha-cols .rhv-linha-cargo{display:none;}
  .pa-linha-rot{width:110px;}
  .pa-btn,.pa-btn-pri{min-width:100%;}
}

/* Excluir pasta. Discreto ate a pasta ser apontada: um lixo sempre aceso no
   cabecalho de cada pasta transforma o quadro num campo minado. */
.stack-del-btn{width:28px;height:28px;border:1px solid transparent;border-radius:8px;background:none;color:rgba(240,240,240,.28);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;opacity:0;transition:opacity .15s,background .15s,color .15s,border-color .15s;}
.stack-del-btn svg{width:15px;height:15px;}
.stack-wrap:hover .stack-del-btn{opacity:1;}
.stack-del-btn:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.32);color:#fca5a5;}
.stack-del-btn:focus-visible{opacity:1;outline:2px solid rgba(239,68,68,.5);outline-offset:1px;}

/* Cabecalho do menu de status: diz sobre qual parcela ele age. */
.cdash-menu-tit{padding:8px 12px 7px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.02em;color:rgba(240,240,240,.42);border-bottom:1px solid var(--clr-border-faint);margin-bottom:4px;white-space:nowrap;}
/* Contrato quitado: nao ha proxima parcela, entao a pilula e so leitura e nao
   pode se parecer com um botao. */
.crm-status-pill.crm-pill-fixa{cursor:default;}
.crm-status-pill[data-act]{cursor:pointer;}

/* ═══════════════════════════════════════════════════════════════════════
   MODELO CLIENTES
   ═══════════════════════════════════════════════════════════════════════
   Preto azulado com teal e ciano, que é a cor que separa este modelo dos
   outros dois de relance — o financeiro é índigo, o recrutamento herda a cor
   do nicho. As medidas, os cantos e as bordas são os mesmos do resto do
   MyDesk: a tela é nova, o vocabulário visual não. */
#cli-view{--cli-teal:#22d3ee;--cli-teal-forte:#06b6d4;--cli-verde:#10b981;
  /* Quatro degraus de luminosidade, e nao um preto so: e a diferenca entre
     eles que separa fundo, faixa, cartao e tabela sem precisar de borda
     clara. */
  --cli-fundo:#060809;--cli-cartao:#0b1417;--cli-tabela:#0a1012;
  display:flex;flex-direction:column;gap:0;padding:0 0 26px;min-height:100%;}
/* O painel antigo sai INTEIRO no modelo de clientes. Precisa de dois ids
   para vencer a especificidade de `#crm-dashboard.visible{...!important}` —
   com um seletor mais fraco, os graficos de faturamento continuariam
   aparecendo embaixo da carteira. */
#crm-view.cli-modelo>#crm-dashboard,
#crm-view.cli-modelo>#crm-charts-row,
#crm-view.cli-modelo>#crm-board{display:none!important;}
#crm-view:not(.cli-modelo)>#cli-view{display:none;}
#crm-view.cli-modelo{background:var(--cli-fundo,#060809);}

/* ── Cabeçalho ───────────────────────────────────────────────────────── */
/* A FAIXA DO TOPO. Titulo, busca, botoes e indicadores numa superficie so,
   com o gradiente teal que a referencia usa para dar corpo ao cabecalho. A
   transicao para o preto da tabela e por gradiente, e nao por borda: borda
   marcaria uma divisao que nao existe. */
.cli-faixa{position:relative;padding:0 0 20px;
  background:radial-gradient(900px 380px at 14% 0%,rgba(20,184,166,.16),transparent 58%),
             radial-gradient(760px 320px at 82% -10%,rgba(14,165,233,.12),transparent 60%),
             linear-gradient(180deg,#08252a 0%,#07191d 62%,var(--cli-fundo,#060809) 100%);
  border-bottom:1px solid rgba(255,255,255,.045);margin-bottom:18px;}
.cli-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:24px 26px 18px;}
.cli-titulo{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.6px;color:var(--clr-text);margin:0;line-height:1.15;}
/* Sem teto de largura: o `max-width:52ch` quebrava o subtitulo em duas
   linhas mesmo sobrando espaco na tela. */
.cli-sub{font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(240,240,240,.45);margin:4px 0 0;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* O bloco de texto cede espaco para a busca e os botoes, e nao o contrario:
   sem `min-width:0` ele nunca encolhe e o subtitulo empurra a barra para
   baixo. */
.cli-cab-txt{min-width:0;flex:1 1 320px;}
.cli-cab-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.cli-busca{position:relative;display:flex;align-items:center;background:rgba(255,255,255,.035);border:1px solid var(--clr-border);border-radius:11px;padding:0 12px;height:40px;min-width:250px;transition:border-color .18s,background .18s;}
.cli-busca:focus-within{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.05);}
.cli-busca svg{width:15px;height:15px;color:rgba(240,240,240,.3);flex-shrink:0;}
.cli-busca-inp{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--clr-text);font-family:'Inter',sans-serif;font-size:.82rem;padding:0 8px;}
.cli-busca-inp::placeholder{color:rgba(240,240,240,.28);}

.cli-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:11px;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;border:1px solid var(--clr-border);background:rgba(255,255,255,.035);color:rgba(240,240,240,.72);transition:all .17s;white-space:nowrap;}
.cli-btn svg{width:15px;height:15px;flex-shrink:0;}
.cli-btn:hover{background:rgba(255,255,255,.07);color:var(--clr-text);border-color:rgba(255,255,255,.18);}
.cli-btn-forte{background:linear-gradient(135deg,var(--cli-teal-forte),var(--cli-verde));border-color:transparent;color:#04231f;font-weight:700;}
.cli-btn-forte:hover{filter:brightness(1.1);color:#04231f;border-color:transparent;}
.cli-btn-fantasma.ativo{border-color:rgba(34,211,238,.45);color:var(--cli-teal);background:rgba(34,211,238,.08);}
.cli-btn-peq{height:31px;padding:0 11px;font-size:.72rem;border-radius:9px;}
.cli-btn-peq svg{width:13px;height:13px;}
.cli-btn-largo{width:100%;justify-content:center;margin-top:12px;}
/* O seletor de modelo se apresenta como o que e: o caminho de volta para os
   outros dois paineis. Fica discreto, mas nunca escondido. */
.cli-btn-modelo{border-color:rgba(34,211,238,.22);color:rgba(103,232,249,.8);}
.cli-btn-modelo:hover{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.45);color:var(--cli-teal);}
.cli-arquivo{position:relative;overflow:hidden;}

/* ── Cartões de indicador ────────────────────────────────────────────── */
.cli-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 26px;}
.cli-kpi{display:flex;align-items:center;gap:14px;border-radius:15px;padding:15px 17px;transition:border-color .2s,background .2s;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);box-shadow:0 6px 20px rgba(0,0,0,.28);}
.cli-kpi:hover{border-color:rgba(255,255,255,.16);background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03));}
.cli-kpi-ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--kpi-cor) 17%,transparent);border:1px solid color-mix(in srgb,var(--kpi-cor) 26%,transparent);color:var(--kpi-cor);flex-shrink:0;}
.cli-kpi-ico svg{width:19px;height:19px;}
.cli-kpi-rot{font-family:'Inter',sans-serif;font-size:.71rem;font-weight:500;color:rgba(240,240,240,.55);}
/* Tamanho FIXO: "1" e "128" dizem a mesma coisa sobre a importancia do
   indicador, e um "1" miudo faria a carteira nova parecer erro de carga. */
.cli-kpi-num{font-family:'Syne',sans-serif;font-size:1.65rem;font-weight:800;color:#fff;line-height:1.12;letter-spacing:-.6px;font-variant-numeric:tabular-nums;}
.cli-kpi-sub{font-family:'Inter',sans-serif;font-size:.69rem;color:rgba(240,240,240,.42);}

/* ── Corpo: tabela + coluna lateral ─────────────────────────────────── */
/* `stretch` e o que faz o painel da tabela acompanhar a altura da coluna
   lateral. Com `start`, ele terminava logo depois da ultima linha e deixava
   um vao preto embaixo — que nao parecia erro por haver um cliente so, e sim
   por o cartao acabar no meio da tela. */
.cli-corpo{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;padding:0 26px;align-items:stretch;flex:1;}
.cli-lado{display:flex;flex-direction:column;gap:16px;}
.cli-painel{background:var(--cli-cartao,#0b1417);border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:18px 18px 16px;}
.cli-painel-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.cli-painel-tit{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--clr-text);margin:0;letter-spacing:-.2px;}
.cli-mt{margin-top:20px;}
.cli-conta{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;color:var(--cli-teal);background:rgba(34,211,238,.12);border-radius:20px;padding:3px 9px;}

/* ── Tabela ─────────────────────────────────────────────────────────── */
#cli-painel-tabela{display:flex;flex-direction:column;min-height:min(560px,58dvh);background:var(--cli-tabela,#0a1012);}
/* O corpo cresce e empurra o rodape para baixo: a paginacao fica no FIM do
   painel, e nao colada na primeira linha. */
.cli-tabela-wrap{overflow-x:auto;margin:0 -18px;padding:0 18px;flex:1;display:flex;flex-direction:column;}
.cli-tabela-wrap>.cli-rodape{margin-top:auto;}
.cli-tabela{width:100%;border-collapse:collapse;min-width:900px;}
.cli-tabela th{text-align:left;font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(240,240,240,.46);padding:0 12px 11px;border-bottom:1px solid rgba(255,255,255,.09);white-space:nowrap;}
.cli-tabela td{padding:12px;border-bottom:1px solid rgba(255,255,255,.055);font-family:'Inter',sans-serif;font-size:.79rem;color:rgba(240,240,240,.78);vertical-align:middle;}
.cli-tabela tbody tr:last-child td{border-bottom:none;}
.cli-linha{cursor:pointer;transition:background .15s,box-shadow .15s;animation:cliEntra .3s ease both;outline:none;}
@keyframes cliEntra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* O hover clareia e contorna, mas NÃO mexe na altura nem na posição: linha
   que cresce ao passar o mouse empurra as de baixo e a lista treme. */
.cli-linha:hover{background:rgba(20,184,166,.05);box-shadow:inset 2px 0 0 rgba(45,212,191,.65);}
.cli-linha:hover .cli-acoes-btn{color:var(--clr-text);background:rgba(255,255,255,.07);}
.cli-linha:focus-visible{background:rgba(20,184,166,.05);box-shadow:inset 2px 0 0 rgba(45,212,191,.9),inset 0 0 0 1px rgba(45,212,191,.35);}
.cli-linha.indo{background:rgba(34,211,238,.12);}
.cli-linha.voltou{animation:cliVoltou 1.4s ease both;}
@keyframes cliVoltou{0%,60%{background:rgba(34,211,238,.14)}100%{background:transparent}}
.cli-td-sel{width:34px;}
/* A CAIXINHA E DESENHADA AQUI. A nativa com `accent-color` sai como um
   quadrado branco no tema escuro: o navegador so troca a cor do preenchido, e
   a moldura continua sendo a do sistema. */
.cli-chk{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid rgba(255,255,255,.22);border-radius:5px;background:rgba(255,255,255,.03);cursor:pointer;position:relative;flex-shrink:0;transition:all .15s;margin:0;}
.cli-chk:hover{border-color:rgba(45,212,191,.55);background:rgba(20,184,166,.08);}
.cli-chk:checked{background:var(--cli-teal-forte);border-color:var(--cli-teal-forte);}
/* O confere e desenhado com duas bordas giradas: sem imagem e sem fonte. */
.cli-chk:checked::after{content:'';position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid #04231f;border-width:0 2px 2px 0;transform:rotate(43deg);}
.cli-chk:focus-visible{outline:2px solid rgba(45,212,191,.6);outline-offset:2px;}
.cli-linha.selecionada{background:rgba(20,184,166,.06);}
.cli-linha.selecionada:hover{background:rgba(20,184,166,.09);}

/* A barra da selecao. Ela aparece so quando ha algo marcado — barra vazia
   permanente ocupa espaco para nao dizer nada. */
.cli-selecao{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;margin:0 0 12px;border:1px solid rgba(45,212,191,.28);border-radius:11px;background:rgba(20,184,166,.07);animation:cliEntra .2s ease both;}
.cli-selecao-conta{font-family:'Inter',sans-serif;font-size:.76rem;font-weight:700;color:var(--cli-teal);margin-right:4px;}
.cli-selecao .cli-btn.perigo{color:rgba(252,165,165,.85);border-color:rgba(239,68,68,.25);}
.cli-selecao .cli-btn.perigo:hover{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.4);color:#fca5a5;}
.cli-selecao-limpar{margin-left:auto;background:none;border:none;padding:0 4px;font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.42);cursor:pointer;transition:color .15s;}
.cli-selecao-limpar:hover{color:var(--clr-text);}
.cli-cel-cliente{display:flex;align-items:center;gap:11px;min-width:0;}
.cli-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:700;color:#fff;flex-shrink:0;text-shadow:0 1px 2px rgba(0,0,0,.3);}
.cli-nome{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--clr-text);font-size:.82rem;}
.cli-fav{color:#fbbf24;display:inline-flex;}
.cli-fav svg{fill:currentColor;}
.cli-nome-sub{font-size:.69rem;color:rgba(240,240,240,.45);margin-top:2px;}
.cli-vazio{color:rgba(240,240,240,.2);}
.cli-data{font-size:.78rem;}
.cli-data.atrasado{color:#fca5a5;}
.cli-data-sub{font-size:.66rem;color:rgba(240,240,240,.32);margin-top:2px;}
.cli-data-sub.atrasado{color:rgba(252,165,165,.75);}
.cli-resp{font-size:.75rem;color:rgba(240,240,240,.7);}
.cli-td-tags{max-width:170px;}
.cli-td-acoes{width:44px;text-align:right;}

.cli-chip{display:inline-block;font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.075);color:rgba(240,240,240,.75);margin:2px 4px 2px 0;white-space:nowrap;}
.cli-chip-seg{background:rgba(34,211,238,.1);color:#67e8f9;}
.cli-chip-tipo{background:rgba(139,92,246,.13);color:#c4b5fd;}
.cli-chip-mais{background:rgba(255,255,255,.03);color:rgba(240,240,240,.35);cursor:default;}
.cli-status{display:inline-flex;align-items:center;gap:6px;font-size:.71rem;font-weight:600;padding:4px 10px;border-radius:20px;background:color-mix(in srgb,var(--st) 13%,transparent);color:var(--st);white-space:nowrap;}
.cli-status-ponto{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.cli-acoes-btn{width:28px;height:28px;border:none;border-radius:8px;background:none;color:rgba(240,240,240,.42);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;}
.cli-acoes-btn:hover{background:rgba(255,255,255,.08);color:var(--clr-text);}

.cli-rodape{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:14px;margin-top:2px;border-top:1px solid var(--clr-border-faint);}
.cli-rodape-txt{font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.34);}
.cli-pag{display:flex;align-items:center;gap:5px;}
.cli-pag-btn{min-width:29px;height:29px;padding:0 8px;border:1px solid var(--clr-border);border-radius:8px;background:none;color:rgba(240,240,240,.55);font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .15s;}
.cli-pag-btn:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--clr-text);}
.cli-pag-btn:disabled{opacity:.3;cursor:default;}
.cli-pag-btn.sel{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.4);color:var(--cli-teal);}
.cli-porpag-rot{display:flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.34);}
.cli-porpag{background:rgba(255,255,255,.04);border:1px solid var(--clr-border);border-radius:8px;color:rgba(240,240,240,.7);font-family:'Inter',sans-serif;font-size:.74rem;padding:5px 7px;cursor:pointer;}

/* ── Paginação da tabela do FINANCEIRO ──────────────────────────────────
   Prefixo próprio (`crm-`), medidas iguais às da carteira de Clientes: são
   duas tabelas do mesmo produto, e duas listas de páginas com aparências
   diferentes na mesma tela seriam duas coisas para aprender. O que NÃO se
   repete é o seletor de linhas por página — aqui o número é fixo em 20, e um
   seletor a mais na barra é escolha oferecida sem motivo.
   O rodapé só é desenhado quando há mais de uma página (ver
   `_crmDesenharRodape`), então ele não ocupa espaço em carteira pequena. */
.crm-rodape{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 4px 2px;}
.crm-rodape:empty{display:none;}
.crm-rodape-txt{font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.34);}
.crm-pag{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.crm-pag-btn{min-width:29px;height:29px;padding:0 8px;border:1px solid var(--clr-border);border-radius:8px;background:none;color:rgba(240,240,240,.55);font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .15s;}
.crm-pag-btn:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--clr-text);}
.crm-pag-btn:disabled{opacity:.3;cursor:default;}
.crm-pag-btn.sel{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.42);color:var(--clr-indigo-light);}
/* No celular a contagem sai e ficam só os botões: "Mostrando 1 a 20 de 118"
   quebrava em duas linhas e empurrava a navegação para fora da vista. */
@media (max-width:560px){
  .crm-rodape{justify-content:center;}
  .crm-rodape-txt{display:none;}
}

/* ── Estados vazios ─────────────────────────────────────────────────── */
.cli-vazio-box{display:flex;flex-direction:column;align-items:center;gap:11px;padding:52px 24px;text-align:center;}
.cli-vazio-ico{color:rgba(34,211,238,.3);}
.cli-vazio-tit{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;color:var(--clr-text);}
.cli-vazio-txt{font-family:'Inter',sans-serif;font-size:.8rem;color:rgba(240,240,240,.4);max-width:42ch;line-height:1.6;margin-bottom:6px;}
.cli-vazio-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;}
.cli-lado-vazio{font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.32);padding:16px 4px;text-align:center;line-height:1.6;}

/* ── Resumo rápido ──────────────────────────────────────────────────── */
.cli-resumo{display:flex;flex-direction:column;gap:1px;}
.cli-resumo-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--clr-border-faint);}
.cli-resumo-linha:last-child{border-bottom:none;}
.cli-resumo-rot{font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.5);}
.cli-resumo-val{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;color:var(--clr-text);}
.cli-resumo-val.bom{color:var(--cli-verde);}
.cli-resumo-val.alerta{color:#fbbf24;}
.cli-dist{display:flex;height:6px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.05);margin-top:14px;}
.cli-dist span{display:block;height:100%;}

/* ── Próximas ações ─────────────────────────────────────────────────── */
.cli-acoes-lista{display:flex;flex-direction:column;gap:2px;}
.cli-acao{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border:none;background:none;border-radius:10px;cursor:pointer;text-align:left;width:100%;transition:background .15s;}
.cli-acao:hover{background:rgba(255,255,255,.045);}
.cli-acao-ponto{width:7px;height:7px;border-radius:50%;background:var(--cli-teal);margin-top:5px;flex-shrink:0;}
.cli-acao.atrasada .cli-acao-ponto{background:#ef4444;}
.cli-acao-txt{min-width:0;flex:1;}
/* DUAS LINHAS, E NÃO QUATRO. Eram rótulo, título, cliente e data
   empilhados: numa coluna estreita com cinco itens isso vira vinte linhas
   de texto, e a lista parece cheia sem estar dizendo mais. */
.cli-acao-topo{display:flex;align-items:baseline;gap:8px;}
.cli-acao-tit{flex:1;min-width:0;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;color:var(--clr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* A etiqueta vira pastilha à DIREITA, na mesma linha do título. Como
   sobrancelha em cima, ela custava uma linha inteira por item. */
.cli-acao-tipo{flex-shrink:0;font-family:'Inter',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(240,240,240,.3);}
.cli-acao-base{display:flex;align-items:baseline;gap:6px;margin-top:2px;min-width:0;}
/* O CLIENTE COM MAIS CONTRASTE QUE A DATA: é ele que distingue um item do
   outro, e no cinza de antes cinco itens de duas pessoas diferentes
   pareciam todos da mesma. */
.cli-acao-cli{flex-shrink:0;max-width:52%;font-family:'Inter',sans-serif;font-size:.71rem;font-weight:600;color:rgba(240,240,240,.66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cli-acao-quando{flex:1;min-width:0;font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cli-acao.atrasada .cli-acao-quando{color:rgba(252,165,165,.7);}

/* ═══════════════════════════════════════════════════════════════════════
   TELA 2 — A PÁGINA DO CLIENTE
   ═══════════════════════════════════════════════════════════════════════ */
#cli-view.saindo{opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;}
.cli-det{position:relative;display:flex;flex-direction:column;gap:18px;padding:0 0 40px;animation:cliDetEntra .26s cubic-bezier(.16,1,.3,1) both;}
@keyframes cliDetEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cli-det>*:not(.cli-fundo){position:relative;z-index:1;}
.cli-det-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 26px 0;}
.cli-voltar{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid var(--clr-border);border-radius:9px;padding:6px 12px;font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;color:rgba(240,240,240,.65);cursor:pointer;margin-bottom:12px;transition:all .16s;}
.cli-voltar:hover{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.35);color:var(--cli-teal);}
.cli-voltar svg{width:14px;height:14px;}

/* ── O fundo animado ─────────────────────────────────────────────────
   Quatro camadas, nenhuma clicável, nenhuma acima do conteúdo. Só transform
   e opacity se movem: animar width/top/left obrigaria o navegador a refazer
   o layout a cada quadro, com tabela e linha do tempo por cima. */
/* ── O FUNDO VALE A PÁGINA INTEIRA ─────────────────────────────────────
   Isto era uma FAIXA de 330px no topo, com uma máscara que a apagava antes de
   encostar no conteúdo — e a razão estava escrita aqui: "fundo que vai ate a
   borda compete com o texto em vez de emoldura-lo".

   A razão valia quando o texto ficava direto sobre o fundo. Não é mais o caso:
   tudo abaixo do cabeçalho mora dentro de painéis com fundo próprio
   (`--cli-cartao`), e o que a faixa emoldurava passou a ser meia tela de preto
   com a cor toda espremida em cima.

   Então o fundo cobre a página e o cuidado com o contraste muda de lugar: em
   vez de apagar a cor, ela fica FRACA embaixo — a matiz continua, a
   luminosidade não. O terceiro radial existe só para o rodapé não voltar a ser
   preto liso. */
.cli-fundo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:0;--px:0px;--py:0px;}
.cli-fundo-base{position:absolute;inset:-10%;background:radial-gradient(70% 46% at 15% 6%,rgba(6,95,90,.55),transparent 62%),radial-gradient(60% 40% at 85% 0%,rgba(8,145,178,.32),transparent 60%),radial-gradient(90% 42% at 78% 88%,rgba(6,95,90,.2),transparent 68%),linear-gradient(168deg,#071215 0%,#0a1a1f 26%,#080f14 62%,#08171b 100%);will-change:transform;animation:cliBase 16s ease-in-out infinite alternate;}
@keyframes cliBase{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.06) translate3d(-1.5%,1%,0)}}

/* ── A MALHA ONDULADA ────────────────────────────────────────────────
   Curvas HORIZONTAIS que atravessam a cena. A versao anterior eram colunas
   verticais pontilhadas: cada uma subia no seu tempo, e o resultado dizia
   "equalizador", nao "superficie". O erro era de eixo, e nao de ajuste —
   barras que sobem individualmente nunca formam terreno. */
/* A MALHA CONTINUA SENDO DO TOPO. O contêiner passou a ter a altura da
   página; sem esta trava a onda esticaria do cabeçalho ao rodapé e deixaria de
   ser um arco para virar um borrão vertical. */
.cli-onda-cena{position:absolute;inset:0 0 auto 0;height:min(330px,46dvh);overflow:hidden;pointer-events:none;
  /* Entrada suave ao abrir o cliente; o movimento continuo e dos grupos. */
  animation:cliOndaEntra .72s ease-out both;
  /* As linhas se apagam para a esquerda, como na referencia: malha que vai
     ate a borda vira grade, e nao relevo. So o esmaecimento HORIZONTAL fica
     aqui — o vertical esta em `.cli-fundo`. Duas mascaras no mesmo elemento
     dependem de uma propriedade de composicao que os navegadores implementam
     com nomes diferentes e nem sempre: quando ela nao pega, as duas viram
     uniao em vez de intersecao. */
  -webkit-mask-image:linear-gradient(to left,#000 46%,transparent 96%);
  mask-image:linear-gradient(to left,#000 46%,transparent 96%);}
.cli-onda-svg{width:100%;height:100%;display:block;}
@keyframes cliOndaEntra{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* Animacao nos GRUPOS, e nao nos caminhos: mover vinte e cinco curvas
   separadamente seria vinte e cinco animacoes para dizer o que tres dizem. */
.cli-camada{will-change:transform,opacity;transform-origin:50% 42%;}
.cli-camada-tras{opacity:.62;filter:blur(1.3px);animation:cliOndaTras 34s ease-in-out infinite;}
.cli-camada-meio{animation:cliOndaMeio 24s ease-in-out infinite;animation-delay:-5s;}
.cli-camada-frente{animation:cliOndaFrente 19s ease-in-out infinite;animation-delay:-11s;}

/* Os pontos vem do tracejado SOBRE a curva: eles seguem o caminho, entao
   acompanham a onda em vez de se alinharem em coluna. */
.cli-onda-pontos{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 9;
  animation:cliOndaFluxo 26s linear infinite;}
/* Algumas contínuas amarram a malha: so pontos viram poeira, so linhas viram
   mapa de contorno. */
.cli-onda-linha{fill:none;stroke-width:1;stroke-linecap:round;}

@keyframes cliOndaTras{
  0%,100%{transform:translate3d(-2%,2px,0) scale(.97);opacity:.5;}
  50%{transform:translate3d(2%,-7px,0) scale(1);opacity:.68;}}
@keyframes cliOndaMeio{
  0%,100%{transform:translate3d(-1%,0,0) scaleY(1);}
  50%{transform:translate3d(2.5%,6px,0) scaleY(1.05);}}
@keyframes cliOndaFrente{
  0%,100%{transform:translate3d(1.5%,-3px,0) scaleY(1.02);}
  50%{transform:translate3d(-1.5%,5px,0) scaleY(.98);}}
/* O tracejado escorrendo pela curva e o que da a sensacao de dado em
   movimento, sem mover elemento nenhum. */
@keyframes cliOndaFluxo{from{stroke-dashoffset:0;}to{stroke-dashoffset:-120;}}

.cli-brilho{position:absolute;border-radius:50%;filter:blur(58px);will-change:transform,opacity;pointer-events:none;}
.cli-brilho.b1{width:340px;height:340px;left:8%;top:-8%;background:rgba(34,211,238,.20);animation:cliBrilho 11s ease-in-out infinite alternate;}
.cli-brilho.b2{width:260px;height:260px;right:14%;top:12%;background:rgba(16,185,129,.16);animation:cliBrilho 14s ease-in-out infinite alternate-reverse;animation-delay:-5s;}
.cli-brilho.b3{width:200px;height:200px;left:52%;top:34%;background:rgba(45,212,191,.13);animation:cliBrilho 9s ease-in-out infinite alternate;animation-delay:-9s;}
/* Dois a mais, na metade de baixo: com o fundo cobrindo a página, três brilhos
   agrupados no topo deixavam o resto liso. Estes são maiores e mais fracos —
   embaixo o fundo acompanha, não chama. */
.cli-brilho.b4{width:420px;height:420px;left:6%;top:62%;background:rgba(16,185,129,.08);animation:cliBrilho 17s ease-in-out infinite alternate;animation-delay:-3s;}
.cli-brilho.b5{width:360px;height:360px;right:10%;top:82%;background:rgba(34,211,238,.07);animation:cliBrilho 13s ease-in-out infinite alternate-reverse;animation-delay:-7s;}
@keyframes cliBrilho{0%{transform:translate3d(0,0,0) scale(1);opacity:.55}100%{transform:translate3d(24px,-18px,0) scale(1.14);opacity:.85}}

.cli-part{position:absolute;border-radius:50%;background:rgba(165,243,252,.75);box-shadow:0 0 7px rgba(34,211,238,.5);pointer-events:none;will-change:transform,opacity;animation-name:cliParticula;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
@keyframes cliParticula{0%{transform:translate3d(0,8px,0);opacity:.14}50%{transform:translate3d(6px,-9px,0);opacity:.62}100%{transform:translate3d(-4px,5px,0);opacity:.2}}

/* ── Cartão do cliente em foco ──────────────────────────────────────── */
.cli-det-topo{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;padding:0 26px;align-items:start;}
.cli-det-dir{display:flex;flex-direction:column;gap:16px;min-width:0;}
.cli-foco{background:rgba(8,15,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.09);animation:cliDetEntra .34s cubic-bezier(.16,1,.3,1) .06s both;}
.cli-foco-selo{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;color:var(--cli-teal);margin-bottom:14px;}
.cli-foco-ponto{width:6px;height:6px;border-radius:50%;background:var(--cli-teal);box-shadow:0 0 8px var(--cli-teal);}
.cli-foco-av{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:13px;box-shadow:0 8px 26px rgba(0,0,0,.4);}
.cli-foco-linha-nome{display:flex;align-items:center;gap:8px;}
.cli-foco-nome{font-family:'Syne',sans-serif;font-size:1.25rem;font-weight:800;color:var(--clr-text);margin:0;letter-spacing:-.4px;outline:none;}
.cli-foco-nome:focus-visible{outline:2px solid rgba(34,211,238,.5);outline-offset:3px;border-radius:4px;}
.cli-fav-btn{width:26px;height:26px;border:none;border-radius:7px;background:none;color:rgba(240,240,240,.25);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .16s;}
.cli-fav-btn:hover{background:rgba(251,191,36,.12);color:#fbbf24;}
.cli-fav-btn.on{color:#fbbf24;}
.cli-fav-btn.on svg{fill:currentColor;}
.cli-foco-desc{font-family:'Inter',sans-serif;font-size:.78rem;color:rgba(240,240,240,.5);line-height:1.6;margin:10px 0 0;}
.cli-foco-dados{display:flex;flex-direction:column;gap:8px;margin-top:15px;}
.cli-foco-dado{display:flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.62);}
.cli-foco-ico{color:rgba(34,211,238,.55);display:inline-flex;flex-shrink:0;}
.cli-foco-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:all .15s;}
.cli-foco-link:hover{color:var(--cli-teal);border-bottom-color:rgba(34,211,238,.4);}
.cli-foco-selos{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px;}
.cli-foco-desde{font-family:'Inter',sans-serif;font-size:.7rem;color:rgba(240,240,240,.3);margin-top:12px;}

.cli-rapidas{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px;padding-top:16px;border-top:1px solid var(--clr-border-faint);}
.cli-rapida{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border:1px solid var(--clr-border);border-radius:11px;background:rgba(255,255,255,.025);color:rgba(240,240,240,.6);font-family:'Inter',sans-serif;font-size:.66rem;font-weight:500;cursor:pointer;transition:all .16s;text-align:center;}
.cli-rapida:hover:not(.off){background:rgba(34,211,238,.09);border-color:rgba(34,211,238,.32);color:var(--cli-teal);}
.cli-rapida.off{opacity:.35;cursor:not-allowed;}
.cli-rapida svg{width:15px;height:15px;}
/* A marca do WhatsApp é o único desenho cheio da fileira, e cheio pesa mais
   que traço no mesmo tamanho: 14px em vez de 15 iguala o volume ao lado dos
   vizinhos. O hover sai do teal da tela e vai para o verde da marca — é o
   único botão que leva para fora do MyDesk, e o verde avisa isso antes do
   clique. */
.cli-rapida .ico-wa{width:14px;height:14px;}
.cli-rapida.wa:hover:not(.off){background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.34);color:#25d366;}

/* ── Indicadores do cliente ─────────────────────────────────────────── */
.cli-det-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.cli-det-kpi{display:flex;flex-direction:column;background:rgba(8,15,20,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:15px 16px 12px;animation:cliDetEntra .3s ease both;}
.cli-det-kpi:nth-child(2){animation-delay:.05s}.cli-det-kpi:nth-child(3){animation-delay:.1s}.cli-det-kpi:nth-child(4){animation-delay:.15s}
.cli-det-kpi-topo{display:flex;align-items:center;gap:13px;}
/* Anel, e nao quadrado preenchido: e o desenho da referencia, e o contorno
   fino deixa o icone respirar dentro de um cartao pequeno. */
.cli-kpi-anel{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--kpi-cor);border:1px solid color-mix(in srgb,var(--kpi-cor) 30%,transparent);background:color-mix(in srgb,var(--kpi-cor) 10%,transparent);}
.cli-kpi-anel svg{width:19px;height:19px;}
.cli-det-kpi .cli-kpi-txt{min-width:0;flex:1;}
.cli-det-kpi .cli-kpi-rot{font-size:.72rem;color:rgba(240,240,240,.5);}
.cli-det-kpi .cli-kpi-num{font-size:1.75rem;line-height:1.15;margin-top:1px;}
.cli-det-kpi .cli-kpi-sub{font-size:.7rem;margin-top:1px;}
.cli-det-kpi .cli-kpi-sub.alerta{color:#fbbf24;}
/* O risco ocupa a largura do cartao, embaixo. O espaco fica reservado mesmo
   sem dado: um cartao mais baixo que os outros quebra a linha da fileira. */
.cli-spark{margin-top:10px;height:26px;}
.cli-spark svg{width:100%;height:100%;display:block;opacity:.75;}

/* ── Acompanhamentos ────────────────────────────────────────────────── */
.cli-acomp{background:rgba(8,15,20,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.08);transition:box-shadow .3s;}
.cli-acomp.destacado{box-shadow:0 0 0 2px rgba(34,211,238,.5);}
.cli-acomp-lista{display:flex;flex-direction:column;}
/* Linhas separadas por um fio, e nao cartoes: sao itens de uma lista, e cada
   um dentro da propria caixa faria tres caixas dentro de uma. */
.cli-acomp-item{display:flex;align-items:center;gap:0;padding:11px 4px;border-bottom:1px solid var(--clr-border-faint);transition:background .15s;}
.cli-acomp-item:last-of-type{border-bottom:none;}
.cli-acomp-item:hover{background:rgba(255,255,255,.022);}
/* O dia SEM caixa: no desenho ele e so o numero grande com o mes embaixo. A
   caixa colorida que eu tinha posto competia com o ponto de status ao lado. */
.cli-acomp-data{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:38px;flex-shrink:0;margin-right:18px;}
/* Inter, e nao Syne. Syne e a fonte de TITULO do MyDesk: ela tem formas
   largas e caracteristicas, e num numero de dois digitos o "06" sai parecendo
   "o6". No desenho o dia e um numero comum, so pesado. */
.cli-acomp-dia{font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:700;color:var(--clr-text);line-height:1;letter-spacing:-.2px;font-variant-numeric:tabular-nums;}
.cli-acomp-mes{font-family:'Inter',sans-serif;font-size:.55rem;font-weight:700;color:rgba(240,240,240,.33);letter-spacing:.09em;margin-top:4px;}
/* O ANO SEMPRE VISIVEL. A lista mostrava so dia e mes, e numa carteira de
   seguros as apolices vencem em anos diferentes: tres vencimentos empilhados
   sem ano fazem o "10 JUN" de 2027 parecer o proximo da fila. Mais apagado
   que o mes porque quase sempre e o ano corrente — mas presente em todas as
   linhas, porque uma marca que some em algumas obriga a reparar na ausencia
   dela, que e o que ninguem faz. */
.cli-acomp-ano{font-family:'Inter',sans-serif;font-size:.55rem;font-weight:700;color:rgba(240,240,240,.22);letter-spacing:.06em;margin-top:2px;font-variant-numeric:tabular-nums;}
.cli-acomp-item.atrasado .cli-acomp-dia{color:#fca5a5;}
/* A hora tambem nao e monoespacada. A mono existe no projeto para numero que
   se COMPARA em coluna (valor, contador); aqui ela so deixa a linha com cara
   de terminal. `tabular-nums` ja resolve o alinhamento. */
.cli-acomp-hora{font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;color:rgba(240,240,240,.48);flex-shrink:0;min-width:38px;margin-right:14px;font-variant-numeric:tabular-nums;}
.cli-acomp-ponto{--pt:#6366f1;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--pt);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--pt) 22%,transparent);margin-right:15px;}
.cli-acomp-ponto.futuro{--pt:#6366f1;}
.cli-acomp-ponto.hoje{--pt:#10b981;}
.cli-acomp-ponto.atrasado{--pt:#ef4444;}
.cli-acomp-txt{flex:1;min-width:0;}
.cli-acomp-tit{font-family:'Inter',sans-serif;font-size:.8rem;font-weight:600;color:var(--clr-text);line-height:1.35;}
.cli-acomp-cli{font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.33);margin-top:1px;line-height:1.35;}
.cli-acomp-item.atrasado .cli-acomp-cli{color:rgba(252,165,165,.7);}
.cli-acomp-quem{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.cli-acomp-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-size:.58rem;font-weight:700;color:rgba(240,240,240,.75);background:rgba(255,255,255,.07);border:1px solid var(--clr-border);}
.cli-acomp-nome{font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.45);}
@media (max-width:900px){.cli-acomp-nome{display:none;}}
/* O botao de acoes so aparece ao apontar a linha: no estado parado, o
   desenho termina no responsavel. */
.cli-acomp-item .cli-acoes-btn{opacity:0;transition:opacity .15s,background .15s,color .15s;}
.cli-acomp-item:hover .cli-acoes-btn,.cli-acomp-item:focus-within .cli-acoes-btn{opacity:1;}

/* ── Abas ───────────────────────────────────────────────────────────── */
.cli-abas{display:flex;gap:4px;padding:0 26px;border-bottom:1px solid var(--clr-border);margin:0 0 -4px;overflow-x:auto;}
.cli-aba{padding:11px 15px;border:none;background:none;font-family:'Inter',sans-serif;font-size:.79rem;font-weight:600;color:rgba(240,240,240,.4);cursor:pointer;border-bottom:2px solid transparent;transition:all .16s;white-space:nowrap;}
.cli-aba:hover{color:rgba(240,240,240,.75);}
.cli-aba.sel{color:var(--cli-teal);border-bottom-color:var(--cli-teal);}
.cli-aba-corpo{padding:0 26px;}

/* ── Linha do tempo ─────────────────────────────────────────────────── */
.cli-filtro-pilulas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.cli-pilula{padding:5px 11px;border:1px solid var(--clr-border);border-radius:20px;background:none;font-family:'Inter',sans-serif;font-size:.7rem;font-weight:500;color:rgba(240,240,240,.45);cursor:pointer;transition:all .15s;}
.cli-pilula:hover{color:var(--clr-text);border-color:rgba(255,255,255,.2);}
.cli-pilula.sel{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.4);color:var(--cli-teal);}
.cli-tempo{display:flex;flex-direction:column;}
.cli-tempo-item{display:flex;gap:13px;padding:0 0 18px;position:relative;}
.cli-tempo-item::before{content:'';position:absolute;left:13px;top:28px;bottom:0;width:1px;background:var(--clr-border);}
.cli-tempo-item:last-child{padding-bottom:0;}
.cli-tempo-item:last-child::before{display:none;}
.cli-tempo-ico{width:27px;height:27px;border-radius:50%;background:rgba(34,211,238,.11);color:var(--cli-teal);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;}
.cli-tempo-txt{flex:1;min-width:0;padding-top:3px;}
.cli-tempo-cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.cli-tempo-tipo{font-family:'Inter',sans-serif;font-size:.76rem;font-weight:700;color:var(--clr-text);}
.cli-tempo-quando{font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.3);}
.cli-tempo-corpo{font-family:'Inter',sans-serif;font-size:.78rem;color:rgba(240,240,240,.6);line-height:1.6;margin-top:3px;white-space:pre-wrap;word-break:break-word;}
.cli-tempo-autor{font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.26);margin-top:3px;}
/* O X so aparece ao apontar a entrada: sempre aceso, ele convida ao acidente
   numa lista que se le mais do que se edita. */
.cli-tempo-x{width:22px;height:22px;border:none;border-radius:6px;background:none;color:rgba(240,240,240,.25);font-size:.7rem;cursor:pointer;flex-shrink:0;opacity:0;transition:all .15s;align-self:flex-start;margin-top:2px;}
.cli-tempo-item:hover .cli-tempo-x,.cli-tempo-item:focus-within .cli-tempo-x{opacity:1;}
.cli-tempo-x:hover{background:rgba(239,68,68,.14);color:#fca5a5;}
.cli-obs{font-family:'Inter',sans-serif;font-size:.79rem;color:rgba(240,240,240,.58);line-height:1.65;white-space:pre-wrap;word-break:break-word;margin:0;}

/* ── Atividades e documentos ────────────────────────────────────────── */
.cli-ativs,.cli-docs{display:flex;flex-direction:column;gap:3px;}
.cli-ativ{display:flex;align-items:flex-start;gap:11px;padding:10px 8px;border-radius:10px;transition:background .15s;}
.cli-ativ:hover{background:rgba(255,255,255,.035);}
.cli-ativ-ponto{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--cli-teal);}
.cli-ativ-atrasada .cli-ativ-ponto{background:#ef4444;}
.cli-ativ-concluida .cli-ativ-ponto{background:var(--cli-verde);}
.cli-ativ-tit{font-family:'Inter',sans-serif;font-size:.79rem;font-weight:600;color:var(--clr-text);}
.cli-ativ-concluida .cli-ativ-tit{color:rgba(240,240,240,.5);}
.cli-ativ-sub{font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.32);margin-top:2px;}
.cli-doc{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:10px;transition:background .15s;}
.cli-doc:hover{background:rgba(255,255,255,.035);}
.cli-doc-ico{color:rgba(34,211,238,.6);display:inline-flex;flex-shrink:0;}
.cli-doc-txt{flex:1;min-width:0;}
.cli-doc-nome{background:none;border:none;padding:0;font-family:'Inter',sans-serif;font-size:.79rem;font-weight:600;color:var(--clr-text);cursor:pointer;text-align:left;}
.cli-doc-nome:hover{color:var(--cli-teal);}
.cli-doc-sub{font-family:'Inter',sans-serif;font-size:.67rem;color:rgba(240,240,240,.3);margin-top:2px;}

/* ── Dados cadastrais ───────────────────────────────────────────────── */
.cli-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 24px;}
.cli-dado{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--clr-border-faint);}
.cli-dado-rot{font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.38);flex-shrink:0;}
.cli-dado-val{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--clr-text);text-align:right;word-break:break-word;}
/* O bloco das respostas do formulário, abaixo do cadastro. O de cima é o que
   o escritório mantém; este é o que veio de fora, uma vez. */
.cli-resp-tit{font-family:'Syne',sans-serif;font-size:.86rem;font-weight:700;color:var(--cli-teal,#22d3ee);margin:26px 0 10px;}
/* TEXTO LONGO — o relato do caso — ocupa a linha inteira e alinha à
   esquerda. Um parágrafo de dez linhas espremido na metade direita de uma
   linha de duas colunas não se lê: era o mesmo que continuar escondido. */
.cli-dado.cli-dado-longo{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:6px;}
.cli-dado.cli-dado-longo .cli-dado-val{text-align:left;white-space:pre-wrap;line-height:1.65;}
.cli-dado-val.vazio{color:rgba(240,240,240,.22);font-style:italic;}

/* ── Formulário, filtros e relatório ────────────────────────────────── */
.cli-form,.cli-rel{width:min(760px,94vw);max-height:88dvh;display:flex;flex-direction:column;}
.cli-filtros{width:min(620px,94vw);}.cli-acoes-modal{width:min(560px,94vw);max-height:82dvh;overflow-y:auto;}.cli-acoes-resumo{font-family:'Inter',sans-serif;font-size:.74rem;color:rgba(240,240,240,.4);padding:2px 2px 10px;}.cli-acoes-lista-todas{max-height:none;}.cli-filtros-ativos{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:10px 12px;margin:0 0 10px;border:1px solid var(--clr-border);border-radius:10px;background:rgba(255,255,255,.02);font-family:'Inter',sans-serif;}.cli-filtros-ativos-rot{font-size:.72rem;font-weight:600;color:rgba(240,240,240,.4);}.cli-filtro-ficha{display:inline-flex;align-items:center;gap:5px;padding:3px 5px 3px 10px;border-radius:20px;border:1px solid rgba(99,102,241,.3);background:rgba(99,102,241,.12);font-size:.72rem;color:rgba(199,210,254,.92);}.cli-filtro-ficha-x{border:none;background:none;cursor:pointer;color:rgba(199,210,254,.55);font-size:.68rem;line-height:1;padding:2px 4px;border-radius:50%;transition:color .15s,background .15s;}.cli-filtro-ficha-x:hover{color:#fff;background:rgba(99,102,241,.35);}.cli-filtros-ativos-conta{font-size:.71rem;color:rgba(240,240,240,.32);}.cli-filtros-ativos-limpar{margin-left:auto;border:1px solid var(--clr-border);background:var(--clr-border-faint);color:rgba(240,240,240,.62);border-radius:8px;padding:5px 11px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;}.cli-filtros-ativos-limpar:hover{background:rgba(255,255,255,.1);color:var(--clr-text);}
.cli-form-cab,.cli-filtros-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;}
.cli-fechar{width:30px;height:30px;border:none;border-radius:9px;background:rgba(255,255,255,.05);color:rgba(240,240,240,.5);font-size:.9rem;cursor:pointer;flex-shrink:0;transition:all .15s;}
.cli-fechar:hover{background:rgba(255,255,255,.12);color:var(--clr-text);}
.cli-form-corpo,.cli-rel-corpo{overflow-y:auto;flex:1;padding-right:4px;margin-right:-4px;}
.cli-filtros-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.cli-check-linha{display:flex;align-items:center;gap:9px;margin-top:16px;font-family:'Inter',sans-serif;font-size:.78rem;color:rgba(240,240,240,.6);cursor:pointer;}
.cli-check-linha input{accent-color:var(--cli-teal-forte);width:15px;height:15px;cursor:pointer;}
.cli-pedir{width:min(460px,94vw);}
.cli-area{resize:vertical;min-height:70px;font-family:'Inter',sans-serif;line-height:1.55;}
.cli-rel-tit{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:var(--cli-teal);margin:20px 0 8px;}
.cli-rel-tit:first-child{margin-top:0;}
.m-inp.erro{border-color:rgba(239,68,68,.5)!important;}

/* ── Responsivo ─────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .cli-corpo{grid-template-columns:minmax(0,1fr);}
  .cli-det-topo{grid-template-columns:minmax(0,1fr);}
  .cli-kpis{grid-template-columns:repeat(2,1fr);}
  .cli-det-kpis{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .cli-cab,.cli-det-cab,.cli-kpis,.cli-corpo,.cli-abas,.cli-aba-corpo,.cli-det-topo{padding-left:14px;padding-right:14px;}
  .cli-titulo{font-size:1.4rem;}
  .cli-cab-acoes{width:100%;}
  .cli-busca{flex:1;min-width:0;}
  .cli-kpis{grid-template-columns:repeat(2,1fr);gap:10px;}
  .cli-det-kpis{grid-template-columns:repeat(2,1fr);}
  .cli-dados{grid-template-columns:minmax(0,1fr);}
  .cli-rapidas{grid-template-columns:repeat(3,1fr);}
  /* A TABELA VIRA CARTÃO. Nove colunas em 360px viram nove colunas ilegíveis
     — a rolagem horizontal resolveria o layout e não a leitura. */
  .cli-tabela{min-width:0;}
  .cli-tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .cli-tabela tbody tr{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:13px 12px;margin-bottom:9px;border:1px solid var(--clr-border);border-radius:13px;background:rgba(255,255,255,.022);}
  .cli-tabela td{border:none;padding:2px 0;}
  .cli-td-sel{grid-row:1;grid-column:1;}
  .cli-tabela td:nth-child(2){grid-row:1;grid-column:2;}
  .cli-tabela td:nth-child(n+3){grid-column:1/-1;}
  .cli-td-acoes{position:absolute;right:12px;text-align:right;width:auto;}
  .cli-tabela tbody tr{position:relative;}
  .cli-rodape{flex-direction:column;align-items:stretch;gap:10px;}
  .cli-porpag-rot{justify-content:flex-end;}
  .cli-onda-cena{height:min(420px,60dvh);}
  .cli-brilho{filter:blur(38px);}
  .cli-brilho.b1{width:200px;height:200px}.cli-brilho.b2{width:170px;height:170px}.cli-brilho.b3{display:none}
  /* No celular só um dos de baixo, e menor: cinco camadas desfocadas custam
     caro num aparelho fraco, e o efeito nem se vê numa tela dessa largura. */
  .cli-brilho.b4{width:240px;height:240px;}
  .cli-brilho.b5{display:none;}
  /* A camada de tras ja nao e montada em tela estreita; a regra fica como
     rede de seguranca caso a janela cresca sem recarregar a tela. */
  .cli-camada-tras{display:none;}
  .cli-camada{filter:none!important;}
}

/* ── Movimento reduzido ─────────────────────────────────────────────
   Quem pediu menos movimento no sistema não pediu menos contraste: o fundo
   fica, parado. Tirar a cor junto seria responder a outra pergunta. */
@media (prefers-reduced-motion: reduce){
  .cli-fundo-base,.cli-onda-cena,.cli-camada,.cli-onda-pontos,.cli-brilho,.cli-part{animation:none!important;transform:none!important;}
  .cli-det,.cli-foco,.cli-det-kpi,.cli-linha{animation:none!important;}
  #cli-view.saindo{transition:none;opacity:1;transform:none;}
}

/* ═══ ATALHOS ══════════════════════════════════════════════════════════
   Admin, idioma e Sair atras de um botao so. Eles nao sumiram: mudaram de
   lugar, e o painel os empilha em vez de esticar a barra. */
.t-atalhos-host{position:relative;display:inline-flex;}
#btn-atalhos.aberto{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.32);color:var(--clr-indigo-light);}
/* A tecla se anuncia: descobrir Ctrl+K por acaso nao acontece. */
.t-kbd{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:600;color:rgba(240,240,240,.32);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:2px 5px;margin-left:5px;line-height:1;white-space:nowrap;}
#btn-atalhos.aberto .t-kbd{color:rgba(165,180,252,.7);border-color:rgba(99,102,241,.25);}

/* `right:0` é só o ponto de partida: o painel nasce alinhado pela direita do
   botão, e quem prende a borda esquerda dentro da janela é o JS
   (_atalhosPosiciona), porque a barra quebra linha e o botão nem sempre está
   no fim dela. `max-width` é a rede embaixo disso: em tela estreita o painel
   encolhe em vez de vazar. */
.atalhos-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:2200;min-width:252px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;gap:4px;padding:8px;background:#141414;border:1px solid var(--clr-border-strong);border-radius:13px;box-shadow:0 18px 48px rgba(0,0,0,.6);animation:atalhosEntra .16s cubic-bezier(.16,1,.3,1) both;}
@keyframes atalhosEntra{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* Dentro do painel os botoes viram LINHAS: na barra eles se alinham lado a
   lado, aqui a leitura e de cima para baixo. */
.atalhos-pop .t-btn{width:100%;justify-content:flex-start;height:34px;border-radius:9px;}
.atalhos-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 10px 5px 11px;}
.atalhos-rot{font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.5);}

/* ── Barra superior: fixa ou automatica ───────────────────────────────
   So onde existe mouse. A macaneta e uma faixa de 4px no alto da tela, e
   dedo nao acerta 4px: no celular a barra fica sempre fixa e a opcao nem
   aparece no painel. Solta, ela sai do fluxo — o quadro sobe e ganha os
   80px — e volta por transform, que anima sem forcar reflow a cada quadro. */
@media (hover:hover) and (pointer:fine){
  body.barra-solta #toolbar{
    position:fixed;top:0;left:0;right:0;
    transform:translateY(-100%);
    transition:transform .22s cubic-bezier(.16,1,.3,1);
  }
  body.barra-solta.barra-a-mostra #toolbar{transform:translateY(0);}
}
@media (hover:none),(pointer:coarse){#linha-barra-modo{display:none;}}
@media (prefers-reduced-motion:reduce){body.barra-solta #toolbar{transition:none;}}
/* Nesta linha o .t-btn e rotulo + botao pequeno: dentro do painel o .t-btn
   ocupa 100% da largura, e aqui ele volta a caber ao lado do rotulo. */
.atalhos-linha .t-btn{width:auto;height:28px;padding:4px 10px;}
.atalhos-sep{height:1px;background:var(--clr-border-faint);margin:3px 2px;}
.atalhos-pop .atalhos-sair{color:rgba(252,165,165,.8);}
.atalhos-pop .atalhos-sair:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28);color:#fca5a5;}
/* O menu do idioma abre DENTRO do painel; sem isto ele nasceria atras dele. */
.atalhos-pop .i18n-selector{position:relative;z-index:2;}
@media (max-width:760px){
  .atalhos-pop{right:auto;left:0;min-width:min(240px,86vw);}
  #btn-atalhos .t-kbd{display:none;}
}

/* ══════════════════════════════════════════════════════════════════════
   A BARRA ARRASTÁVEL — o que aparece só enquanto se arrasta
   ══════════════════════════════════════════════════════════════════════
   Nada aqui é permanente: fora do gesto, a barra é exatamente a de antes. Um
   "pegue-me" desenhado o tempo todo em oito botões seria ruído diário para uma
   arrumação que se faz uma vez por ano.

   O cursor é a única pista fora do arrasto — `grab` no botão diz que ele sai do
   lugar, e só aparece com o mouse em cima. */
.barra-arrastando .t-btn{cursor:grabbing;}
#toolbar > .t-btn:hover{cursor:grab;}
.t-arrastando{opacity:.38;}

/* A ZONA DE DESTINO acesa. Sem ela, arrastar por cima do painel fechado é um
   gesto no escuro: nada diz que aquilo aceita o que está na mão. */
.barra-arrastando #toolbar.barra-alvo{box-shadow:inset 0 0 0 1px rgba(99,102,241,.45);}
.barra-arrastando .atalhos-pop.barra-alvo{border-color:rgba(99,102,241,.55);
  box-shadow:0 18px 48px rgba(0,0,0,.6),0 0 0 3px rgba(99,102,241,.16);}
.barra-arrastando #btn-atalhos{border-color:rgba(99,102,241,.5);color:#c7d2fe;}

/* O rodapé do painel: a dica some quando o painel já tem botão guardado (aí ela
   já foi entendida), e o restaurar só existe quando há o que restaurar. */
.barra-rodape{display:flex;flex-direction:column;gap:4px;}
.barra-dica{font-family:'Inter',sans-serif;font-size:.68rem;line-height:1.4;
  color:rgba(240,240,240,.3);text-align:center;padding:6px 8px 2px;
  border-top:1px solid var(--clr-border-faint);margin-top:2px;}
.barra-restaurar{width:100%;height:30px;border-radius:9px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.72rem;
  background:rgba(255,255,255,.03);border:1px solid var(--clr-border-faint);
  color:rgba(240,240,240,.45);transition:background .15s,color .15s;}
.barra-restaurar:hover{background:rgba(255,255,255,.07);color:rgba(240,240,240,.8);}

/* ── Observacoes do cliente ─────────────────────────────────────────────
   A nota fixa no topo, e as entradas datadas abaixo. Sao duas leituras
   diferentes e por isso tem peso visual diferente: a fixa e um cartao com
   contorno, as datadas sao uma coluna com linha do lado. */
.cli-obs-fixa{border:1px dashed rgba(34,211,238,.24);border-radius:12px;padding:13px 15px;background:rgba(34,211,238,.035);margin-bottom:18px;}
.cli-obs-fixa.vazia{border-color:var(--clr-border);background:none;}
.cli-obs-fixa-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;}
.cli-obs-fixa-rot{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cli-teal);}
.cli-obs-fixa-rot svg{width:12px;height:12px;}
.cli-obs-fixa-txt{font-family:'Inter',sans-serif;font-size:.79rem;color:rgba(240,240,240,.68);line-height:1.65;margin:0;white-space:pre-wrap;word-break:break-word;}
.cli-obs-fixa.vazia .cli-obs-fixa-txt{color:rgba(240,240,240,.26);font-style:italic;}
.cli-obs-editar{background:none;border:none;padding:0;font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;color:rgba(240,240,240,.4);cursor:pointer;transition:color .15s;}
.cli-obs-editar:hover{color:var(--cli-teal);}
.cli-obs-editar.perigo:hover{color:#fca5a5;}

/* CADA OBSERVACAO E UM CARTAO, com a mesma forma da nota fixa. A versao
   anterior era uma coluna com um fio e um ponto do lado: mais leve, e por
   isso mesmo lida como rodape do cartao de cima em vez de conteudo proprio.
   O que separa as duas continua sendo a borda — tracejada e teal na fixa,
   inteira e discreta nas datadas. */
.cli-obs-lista{display:flex;flex-direction:column;gap:10px;}
.cli-obs{border:1px solid var(--clr-border);border-radius:12px;padding:13px 15px;background:rgba(255,255,255,.018);transition:border-color .16s,background .16s;}
.cli-obs:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03);}
.cli-obs-data{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;}
.cli-obs-dia{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cli-teal);}
.cli-obs-dia::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.cli-obs-autor{font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.26);text-transform:none;letter-spacing:0;font-weight:400;}
.cli-obs-txt{font-family:'Inter',sans-serif;font-size:.79rem;color:rgba(240,240,240,.68);line-height:1.65;margin:0;white-space:pre-wrap;word-break:break-word;}
.cli-obs-acoes{display:flex;gap:12px;opacity:0;transition:opacity .15s;flex-shrink:0;}
.cli-obs:hover .cli-obs-acoes,.cli-obs:focus-within .cli-obs-acoes{opacity:1;}

/* ── Refino do painel de clientes ───────────────────────────────────── */
.cli-painel-tit-linha{display:flex;align-items:center;gap:9px;min-width:0;}
.cli-painel-acoes{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.cli-tabela.compacta td{padding:7px 12px;}
.cli-tabela.compacta .cli-avatar{width:28px;height:28px;border-radius:8px;font-size:.65rem;}

/* A variacao ao lado do numero. Cor com sinal: verde sobe, vermelho desce,
   cinza quando nao mudou. */
.cli-resumo-dir{display:inline-flex;align-items:baseline;gap:7px;}
.cli-delta{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:700;}
.cli-delta.sobe{color:#34d399;}
.cli-delta.desce{color:#fca5a5;}
.cli-delta.igual{color:rgba(240,240,240,.3);}

/* A barra da taxa de retorno. Vazia quando nao ha o que calcular — barra
   cheia debaixo de "sem dados" e uma contradicao, e o olho acredita na
   barra. */
.cli-taxa{height:5px;border-radius:20px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:10px;}
.cli-taxa span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--cli-teal-forte),var(--cli-verde));transition:width .3s;}
.cli-taxa.vazia{background:rgba(255,255,255,.04);}
.cli-taxa-nota{font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.3);margin-top:6px;}
.cli-dist-rot{font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.32);margin-top:16px;}
.cli-dist{margin-top:6px;}

/* Proximas acoes como linha do tempo: o fio liga os pontos e diz que os itens
   estao em ordem de tempo, e nao apenas empilhados. */
.cli-acoes-lista{position:relative;}
.cli-acao{position:relative;padding-left:20px;}
.cli-acao::before{content:'';position:absolute;left:11px;top:22px;bottom:-2px;width:1px;background:var(--clr-border);}
.cli-acao:last-child::before{display:none;}
.cli-acao-ponto{position:absolute;left:8px;top:14px;margin:0;box-shadow:0 0 0 3px var(--cli-cartao,#0b1417);}
.cli-acao.futura .cli-acao-ponto{background:#6366f1;}
.cli-acao.hoje .cli-acao-ponto{background:#10b981;}
.cli-acao.atrasada .cli-acao-ponto{background:#ef4444;}
.cli-acao-tipo{font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(240,240,240,.3);margin-bottom:2px;}

/* ── Processos (ficha juridica) ─────────────────────────────────────── */
.cli-processos{display:flex;flex-direction:column;gap:10px;}
.cli-proc{border:1px solid var(--clr-border);border-radius:12px;padding:13px 15px;background:rgba(255,255,255,.018);transition:border-color .16s,background .16s;}
.cli-proc:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03);}
/* Prazo vencido muda a borda, e nao o fundo: fundo colorido numa lista de
   processos deixa a leitura pesada quando varios estao atrasados. */
.cli-proc.atrasado{border-color:rgba(239,68,68,.35);}
.cli-proc-cab{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.cli-proc-num{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--clr-text);}
.cli-proc-fase{font-family:'Inter',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cli-teal);background:rgba(34,211,238,.12);border-radius:20px;padding:3px 9px;}
.cli-proc-cab .cli-obs-acoes{margin-left:auto;}
.cli-proc-linha{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 0;border-bottom:1px solid var(--clr-border-faint);}
.cli-proc-linha:last-of-type{border-bottom:none;}
.cli-proc-rot{font-family:'Inter',sans-serif;font-size:.71rem;color:rgba(240,240,240,.38);flex-shrink:0;}
.cli-proc-val{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--clr-text);text-align:right;word-break:break-word;}
.cli-proc-notas{font-family:'Inter',sans-serif;font-size:.77rem;color:rgba(240,240,240,.6);line-height:1.6;margin:9px 0 0;white-space:pre-wrap;word-break:break-word;}

/* ── O RESUMO DA BANCA ────────────────────────────────────────────────────
   Três números que a pessoa fazia de cabeça relendo a lista: o que venceu, o
   que vence nesta semana, e quando é a próxima audiência. */
.cli-proc-resumo{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.cli-proc-resumo-item{
  display:flex;flex-direction:column;gap:1px;padding:9px 14px;border-radius:11px;
  background:rgba(255,255,255,.028);border:1px solid var(--clr-border);min-width:0;
}
.cli-proc-resumo-item b{
  font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;color:var(--clr-text);
  line-height:1.1;white-space:nowrap;
}
.cli-proc-resumo-item span{
  font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.36);white-space:nowrap;
}
.cli-proc-resumo-item.vencido{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.28);}
.cli-proc-resumo-item.vencido b{color:#fca5a5;}
.cli-proc-resumo-item.perto{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.24);}
.cli-proc-resumo-item.perto b{color:#fcd34d;}

/* ── AS DUAS DATAS QUE COBRAM AÇÃO ────────────────────────────────────────
   Prazo e audiência saem da lista de campos e viram cartão: são as únicas
   linhas desta ficha que pedem alguém em algum lugar num dia marcado. O
   "quanto falta" vem junto porque a data crua não responde a pergunta que se
   faz ao ler — está perto ou está longe? */
.cli-proc-datas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.cli-proc-data{
  flex:1 1 170px;min-width:0;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.025);border:1px solid var(--clr-border);
}
.cli-proc-data-rot{
  display:block;font-family:'Inter',sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(240,240,240,.32);margin-bottom:3px;
}
.cli-proc-data b{
  font-family:'Inter',sans-serif;font-size:.86rem;font-weight:700;color:var(--clr-text);
}
.cli-proc-data-quando{
  display:block;font-family:'Inter',sans-serif;font-size:.68rem;
  color:rgba(240,240,240,.4);margin-top:1px;
}
/* A COR NÃO ANDA SOZINHA: "há 3 dias" e "hoje" continuam escritos ao lado.
   Vermelho sem palavra exclui quem não distingue vermelho de cinza. */
.cli-proc-data.vencido{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.3);}
.cli-proc-data.vencido b,.cli-proc-data.vencido .cli-proc-data-quando{color:#fca5a5;}
.cli-proc-data.hoje{background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.3);}
.cli-proc-data.hoje b,.cli-proc-data.hoje .cli-proc-data-quando{color:#fcd34d;}
.cli-proc-data.perto{border-color:rgba(245,158,11,.18);}

/* Processo encerrado ou arquivado não cobra nada — a mesma regra da nota
   concluída que parou de avisar vencimento. */
.cli-proc.encerrado{opacity:.6;}
.cli-proc.urgente{border-color:rgba(245,158,11,.32);}
.cli-proc.atrasado.urgente{border-color:rgba(239,68,68,.35);}

.cli-proc-agenda{
  font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(34,211,238,.55);
  margin:-4px 0 10px;
}
.cli-proc-copiar{
  width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--clr-border);border-radius:7px;background:none;cursor:pointer;
  color:rgba(240,240,240,.3);transition:color .14s,border-color .14s,background .14s;
}
.cli-proc-copiar:hover{color:var(--cli-teal);border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.1);}

/* ── A LINHA DO TEMPO DO PROCESSO ─────────────────────────────────────────
   Um processo é uma sequência, não um cadastro — e desenhá-la é desenhar uma
   ESPINHA com fatos pendurados nela, e não uma lista com um filete à esquerda.

   A GEOMETRIA, que é o que mudou em 26/08/2026 e de onde vem todo o resto:

     |<-- canaleta -->|fio|ramo|ponto|  o fato
       AGOSTO 2026     ·   ——   (⚖)   Movimento oficial · Petição (outras)

   · A CANALETA à esquerda é a régua de tempo. Os meses moram nela, alinhados
     à direita contra o fio: três datas seguidas não contam que houve três
     semanas de silêncio entre duas delas, e o mês conta.
   · O FIO é contínuo e ACESO, e é sempre da cor da casa — a origem se lê no
     ponto, não no fio. Ele desbota com a idade: presente aceso, passado
     quieto.
   · O RAMO liga o fio ao ponto e nasce de um nó no fio. É ele, e não o ponto,
     que carrega a cor da origem: é o caminho por onde aquele fato chegou.
   · O RÓTULO E O FATO na mesma linha. "Movimento oficial · Petição (outras)"
     é uma informação só; em duas linhas cada movimento ocupava o dobro sem
     dizer mais nada. Prosa escrita por gente continua embaixo — título que
     não termina não é título.
   · A MOLDURA existe numa linha só, a última: quarenta cartões empilhados são
     uma lista de caixas, e não uma história.

   A escada de entrada tem bloco próprio, mais abaixo. */
.cli-and{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--clr-border-faint);
  /* A canaleta é coluna de grade, e não recuo: assim a faixa de sincronia
     mora nela, do lado do primeiro fato, sem posicionamento absoluto e sem
     depender da altura do cabeçalho. */
  /* A canaleta tem duas faixas, e a largura é a soma delas: a ficha das
     fontes à esquerda e os rótulos de mês encostados no fio. Elas não podem
     se cruzar — o primeiro rótulo cai justamente na altura da ficha. */
  --and-canaleta:352px;
  --and-ficha:190px;
  --and-mes:130px;
  --and-ramo:30px;
  --and-fio:var(--cli-teal,#22d3ee);
  display:grid;grid-template-columns:var(--and-canaleta) minmax(0,1fr);
  align-items:start;
}
.cli-and-cab{
  grid-column:1 / -1;display:flex;align-items:flex-start;gap:14px;
  flex-wrap:wrap;margin-bottom:15px;
}
.cli-and-cab-txt{flex:1 1 240px;min-width:0;}
.cli-and-tit{
  display:block;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(240,240,240,.86);
}
.cli-and-sub{
  margin:5px 0 0;font-family:'Inter',sans-serif;font-size:.715rem;line-height:1.5;
  color:rgba(240,240,240,.3);
}
.cli-and-cab-acoes{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-left:auto;}
.cli-and-filtro{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:7px 30px 7px 13px;border-radius:10px;
  border:1px solid var(--clr-border);background-color:rgba(255,255,255,.03);
  font-family:'Inter',sans-serif;font-size:.715rem;color:rgba(240,240,240,.62);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8 9.5 4.5' fill='none' stroke='%23879aad' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:10px;
  transition:color .14s,border-color .14s,background-color .14s;
}
.cli-and-filtro:hover{
  color:var(--cli-teal);border-color:rgba(34,211,238,.32);background-color:rgba(34,211,238,.07);
}
/* O menu nativo herda o fundo do sistema e sairia texto claro sobre branco. */
.cli-and-filtro option{background:#121722;color:#f0f0f0;}
.cli-and-add{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 13px;border-radius:10px;background:none;border:1px solid var(--clr-border);
  font-family:'Inter',sans-serif;font-size:.715rem;color:rgba(240,240,240,.55);
  transition:color .14s,border-color .14s,background .14s;
}
.cli-and-add:hover{color:var(--cli-teal);border-color:rgba(34,211,238,.32);background:rgba(34,211,238,.08);}

/* A FAIXA DE SINCRONIA mora na canaleta, na altura do primeiro fato: é
   ressalva sobre a trilha inteira, e no cabeçalho ela disputava a linha com
   cinco outros controles. */
/* ── A FICHA DAS FONTES OFICIAIS ──────────────────────────────────────────
   Título, o que se sabe, e o que se pode fazer — nessa ordem e em três faixas.
   Antes eram quatro cápsulas de cores e alturas diferentes empilhadas na
   canaleta, e a diferença entre elas não queria dizer nada. */
.cli-and-sinc{
  grid-column:1;grid-row:2;justify-self:start;
  display:flex;flex-direction:column;
  width:min(100%,var(--and-ficha));margin:0 0 16px;border-radius:14px;overflow:hidden;
  border:1px solid var(--clr-border);background:rgba(255,255,255,.022);
}
.cli-and-sinc-cab{display:flex;align-items:center;gap:9px;padding:11px 13px 9px;}
.cli-and-sinc-ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb,var(--cli-teal,#22d3ee) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cli-teal,#22d3ee) 34%,transparent);
  color:var(--cli-teal,#22d3ee);
}
.cli-and-sinc-ico svg{width:13px;height:13px;}
.cli-and-sinc-tit{
  font-family:'Inter',sans-serif;font-size:.705rem;font-weight:700;
  color:rgba(240,240,240,.84);
}
.cli-and-sinc-linhas{display:flex;flex-direction:column;gap:6px;padding:0 13px 11px;}
/* Dentro da ficha o selo deixa de ser pílula e vira LINHA: a cápsula existe
   para se destacar no meio de outra coisa, e aqui ela está entre iguais. O
   ponto à esquerda guarda a cor, que é o que ainda distingue as duas fontes. */
.cli-and-sinc .cli-cnj-selo,
.cli-and-sinc .cli-djen-selo{
  position:relative;display:block;min-height:0;max-width:100%;
  padding:0 0 0 14px;border:0;border-radius:0;background:none;
  font-size:.66rem;line-height:1.5;white-space:normal;overflow-wrap:anywhere;
}
.cli-and-sinc .cli-cnj-selo::before,
.cli-and-sinc .cli-djen-selo::before{
  content:"";position:absolute;left:2px;top:.5em;width:5px;height:5px;
  border-radius:50%;background:currentColor;opacity:.9;
}
/* EM COLUNA E DA MESMA LARGURA. Lado a lado eles nao cabiam, e um caia para
   baixo do outro com tamanhos diferentes: um botao curto encostado a esquerda
   e um comprido embaixo, centralizado. Duas acoes irmas se desenham iguais. */
.cli-and-sinc-acoes{
  display:flex;flex-direction:column;gap:7px;padding:9px 11px 11px;
  border-top:1px solid var(--clr-border-faint);background:rgba(255,255,255,.016);
}
.cli-and-sinc-acoes:empty{display:none;}
.cli-and-sinc .cli-cnj-att,
.cli-and-sinc .cli-djen-atualizar{
  width:100%;min-height:0;padding:6px 9px;border-radius:9px;
  font-size:.645rem;line-height:1.35;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;
}

.cli-and-vazio{
  grid-column:2;font-family:'Inter',sans-serif;font-size:.73rem;
  color:rgba(240,240,240,.28);padding:6px 0 2px;line-height:1.6;
}

.cli-and-trilha{
  grid-column:2;grid-row:2;
  display:flex;flex-direction:column;position:relative;
  padding-left:var(--and-ramo);
  /* UM passo só, lido pelo atraso de todas as camadas da escada. Mexer no
     ritmo da entrada é mexer neste número, e em nenhum outro. */
  --cli-and-passo:62ms;
}
/* O CLARÃO no alto do fio. É o que faz a espinha parecer ACESA, e não
   desenhada: um toco de fio acima do primeiro fato, com bloom. */
/* ── A BARRA — UM ELEMENTO SÓ, DO ALTO AO FIM ─────────────────────────────
   Ela ERA oito pedaços: um `::before` por linha, cada um com a sua opacidade
   e as suas três sombras. Encostados, os pedaços deixavam emenda visível e o
   brilho saía picotado — cada trecho com um halo próprio, começando e
   acabando. Não parecia uma barra; parecia uma coluna de traços.

   Agora é UM elemento absoluto atravessando a trilha inteira. Tudo nele é
   GRADIENTE, e nenhuma `box-shadow`: a sombra acompanha a CAIXA do elemento,
   e não o que está pintado nela — com o traço se apagando e a sombra acesa
   por igual, as pontas ficavam com brilho sem núcleo.

     · o núcleo, quatro pixels claros no meio da caixa
     · o halo perto e o halo longe, as duas faixas que dão a queda de luz
     · a MÁSCARA vertical, que apaga a barra no alto e no fim

   É a máscara que faz o desvanecer nas duas pontas valer para o brilho junto
   com o traço. E é ela que cumpre a regra antiga: o fio NÃO segue depois do
   último passo, porque a barra morre nos últimos quarenta e oito pixels.

   `left:0` é a linha do fio: pseudo-elemento se posiciona pela caixa de
   PADDING do pai, e o padding da trilha já é o ramo. */
.cli-and-trilha::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  /* SOBE SÓ ATÉ O TÍTULO. Com os cento e trinta pixels de antes ela saía da
     linha do tempo e atravessava a auditoria logo acima — luz de uma seção
     acesa em cima de outra. Quarenta e seis é o que cabe entre o primeiro nó
     e o alto do bloco. */
  left:0;margin-left:-26px;width:52px;top:-46px;bottom:0;
  transform-origin:top;
  background:
    linear-gradient(90deg,transparent calc(50% - 2px),
      #eafcff calc(50% - 2px),#eafcff calc(50% + 2px),
      transparent calc(50% + 2px)),
    linear-gradient(90deg,transparent 36%,
      color-mix(in srgb,var(--and-fio) 88%,transparent) 50%,transparent 64%),
    linear-gradient(90deg,transparent 2%,
      color-mix(in srgb,var(--and-fio) 24%,transparent) 50%,transparent 98%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,
    rgba(0,0,0,.4) 20px,#000 48px,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,
    rgba(0,0,0,.4) 20px,#000 48px,#000 calc(100% - 48px),transparent 100%);
  /* O NEON ZUMBE, e não pisca uma vez só: um tubo aceso não fica parado.
     Amplitude pequena e opacidade só — é a única coisa da tela que se move
     sem que ninguém tenha feito nada. Movimento reduzido a desliga. */
  animation:cli-and-zumbido 3600ms ease-in-out infinite;
}
/* ── A CORRENTE ───────────────────────────────────────────────────────────
   Um pulso de luz descendo a barra, sem parar. É o que separa "uma linha
   pintada de ciano" de "um tubo com energia passando dentro". Mesma máscara
   da barra, para ele morrer nas mesmas duas pontas. */
.cli-and-trilha::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:0;margin-left:-22px;width:44px;top:-46px;bottom:0;
  background-repeat:no-repeat;background-size:100% 210px;
  background-image:radial-gradient(ellipse 9px 92px at 50% 50%,
    #eafcff 0 5%,
    color-mix(in srgb,var(--and-fio) 75%,transparent) 26%,
    transparent 74%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,
    rgba(0,0,0,.4) 20px,#000 48px,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,
    rgba(0,0,0,.4) 20px,#000 48px,#000 calc(100% - 48px),transparent 100%);
  animation:cli-and-corrente 4200ms linear infinite;
}
@keyframes cli-and-corrente{
  from{background-position:0 -230px;}
  to{background-position:0 calc(100% + 230px);}
}
@keyframes cli-and-zumbido{
  0%,100%{opacity:.78;}
  50%{opacity:1;}
}

/* A COR É A ORIGEM, escrita uma vez por linha e lida pelo ponto, pelo ramo e
   pelo selo. A ordem importa: um item do DJEN é `auto` e `djen` ao mesmo
   tempo, e a mudança de fase é `auto` e `fase`. */
.cli-and-item{
  display:flex;align-items:flex-start;gap:13px;position:relative;padding-bottom:9px;
  --and-cor:var(--cli-teal,#22d3ee);
}
.cli-and-item.auto{--and-cor:rgba(240,240,240,.5);}
.cli-and-item.fase{--and-cor:var(--cli-teal,#22d3ee);}
.cli-and-item.cnj,
.cli-and-item.djen{--and-cor:#fcd34d;}
/* Quem fecha a trilha pode ser um fato OU o marcador do mês mais antigo —
   por isso a regra é do último filho, e não do último item. */
.cli-and-trilha > :last-child{padding-bottom:0;}
/* O RAMO: um nó no fio e o traço que leva ao ponto. É AQUI que a origem
   aparece antes do ícone — o caminho por onde aquele fato chegou. */
/* O RAMO é TRACEJADO de propósito: o fio é a linha do tempo e é contínua; o
   ramo é a derivação até um fato, e o traço interrompido diz que ele é
   ligação, e não mais um pedaço do tempo. O nó cheio é onde ele nasce. */
.cli-and-item::after{
  content:"";position:absolute;left:calc(-1 * var(--and-ramo));top:14px;
  width:var(--and-ramo);height:6px;pointer-events:none;transform-origin:left;
  background-image:
    radial-gradient(circle,var(--and-cor) 0 2.6px,transparent 3px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--and-cor) 55%,transparent) 0 4px,
      transparent 4px 8px);
  background-size:6px 6px,100% 1px;
  background-position:left center,left center;
  background-repeat:no-repeat,repeat-x;
  opacity:clamp(.5,calc(1 - var(--i,0) * .04),1);
}
/* No fato mais recente o nó é um ANEL com miolo — a estação principal da
   linha —, e o ramo até ele é contínuo: é o caminho que está em uso. */
.cli-and-item.atual::after{
  top:6px;height:22px;
  background-image:
    radial-gradient(circle,transparent 0 6.2px,var(--and-fio) 6.6px 8.2px,transparent 8.6px),
    radial-gradient(circle,var(--and-fio) 0 3px,transparent 3.5px),
    linear-gradient(90deg,var(--and-fio),
      color-mix(in srgb,var(--and-fio) 45%,transparent));
  background-size:22px 22px,22px 22px,100% 2px;
  background-repeat:no-repeat,no-repeat,no-repeat;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--and-fio) 75%,transparent));
}
.cli-and-ponto{
  position:relative;z-index:1;flex-shrink:0;width:26px;height:26px;border-radius:50%;
  /* Quatro pixels abaixo do alto do cartão: é o que põe o centro do ponto na
     altura da PRIMEIRA LINHA do fato, e não no meio de um cartão cuja altura
     muda com o tamanho do texto. O ramo e o nó no fio leem a mesma conta. */
  margin-top:4px;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;line-height:1;
  background:color-mix(in srgb,var(--and-cor) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--and-cor) 34%,transparent);
  color:var(--and-cor);
}
.cli-and-ponto svg{width:13px;height:13px;}
/* O anel do pulso. Invisível fora da escada — nenhuma regra de repouso
   depende dele. */
.cli-and-ponto::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  border:1px solid currentColor;opacity:0;
}
/* O que o app escreveu sozinho é mais apagado que o que a pessoa escreveu: a
   história é dela, e o registro automático é apoio. */
.cli-and-item.auto .cli-and-ponto{
  background:rgba(255,255,255,.04);border-color:var(--clr-border);color:rgba(240,240,240,.4);
}
/* A MUDANÇA DE FASE é capítulo, e não parágrafo: ponto cheio contra ponto
   vazado. Nasce do app, mas não é apoio — é a divisória da história. */
.cli-and-item.fase .cli-and-ponto{
  background:color-mix(in srgb,var(--and-cor) 20%,transparent);
  border-color:color-mix(in srgb,var(--and-cor) 55%,transparent);
  color:var(--and-cor);
}
/* A publicação do DJEN vem de fora como o movimento do CNJ, e leva o mesmo
   âmbar: nesta trilha, âmbar é tudo que o escritório não escreveu. */
.cli-and-item.djen .cli-and-ponto{
  background:color-mix(in srgb,var(--and-cor) 13%,transparent);
  border-color:color-mix(in srgb,var(--and-cor) 34%,transparent);
  color:var(--and-cor);
}
/* ── CADA FATO É UM CARTÃO ────────────────────────────────────────────────
   Sem a moldura, oito movimentos eram oito parágrafos soltos e o olho tinha
   de descobrir sozinho onde um acabava e o outro começava — ainda mais agora
   que o rótulo, o fato e a data dividem a mesma linha. A borda é fraca de
   propósito: ela separa, não emoldura. */
.cli-and-corpo{
  position:relative;
  flex:1;min-width:0;padding:8px 15px 10px;border-radius:11px;
  background:rgba(255,255,255,.022);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:background .18s ease,box-shadow .18s ease;
}
.cli-and-item:hover .cli-and-corpo{
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
/* A ÚLTIMA LINHA É A RESPOSTA. "Em que pé está" se responde com o fato mais
   recente, e é a única com moldura. O ponto dela cresce PARA FORA, por margem
   negativa: aumentar a caixa empurraria o texto desta linha alguns pixels à
   direita, e uma linha desalinhada com as outras estraga a coluna inteira. */
/* As margens negativas mantêm a CAIXA em 26px: o ponto cresce para fora, e a
   coluna de texto continua onde estava. -4px em cima e -8px dos lados é o que
   põe o centro de um círculo de 42px exatamente onde estava o de 26px. */
.cli-and-item.atual .cli-and-ponto{
  width:42px;height:42px;margin:-4px -8px 0;border-width:2px;
  /* MIOLO ESCURO, e não tinta translúcida: na arte o disco é quase preto e
     quem brilha é a borda, o anel e o ícone. Com o miolo aceso o ponto virava
     uma bolha de cor e o ícone dentro dele sumia. */
  background:radial-gradient(circle at 50% 38%,
    color-mix(in srgb,var(--and-cor) 15%,#060b14),
    color-mix(in srgb,var(--and-cor) 4%,#060b14));
  border-color:color-mix(in srgb,var(--and-cor) 85%,transparent);
  color:var(--and-cor);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--and-cor) 24%,transparent),
    0 0 18px color-mix(in srgb,var(--and-cor) 45%,transparent),
    0 0 44px 3px color-mix(in srgb,var(--and-cor) 22%,transparent),
    inset 0 0 14px color-mix(in srgb,var(--and-cor) 20%,transparent);
  /* O CORAÇÃO DA TELA BATE. É o único elemento com animação sem fim do painel,
     e é o que responde "em que pé está" — o resto fica quieto. Amplitude
     pequena de propósito: pulsar é sinal de vivo, não pisca-pisca. */
  animation:cli-and-respira 2900ms ease-in-out infinite;
}
/* Com o miolo escuro, o icone precisa vir CLARO: a cor da origem sozinha
   sobre um disco quase preto quase nao aparece. */
.cli-and-item.atual .cli-and-ponto svg{
  width:19px;height:19px;
  color:color-mix(in srgb,var(--and-cor) 45%,#ffffff);
}
/* ── O ANEL DO NÓ MAIS RECENTE ────────────────────────────────────────────
   Era meio arco de um pixel, e sumia. Agora é a circunferência INTEIRA, com
   dois pixels, brilho por fora e por dentro — é ela, e não o tamanho do
   ponto, que diz "é aqui que o processo está".

   E ela é o que PULSA. Um anel que abre e desmaia lê como batida a metros de
   distância; a mesma batida feita só de sombra no ponto quase não aparece. */
/* O ANEL FICA ACESO O TEMPO TODO. Fazê-lo abrir e desmaiar parecia a solução
   óbvia para "pulsar", mas metade do ciclo ele estava em trinta por cento de
   opacidade — de longe, um círculo fraco piscando. Aqui ele só respira de
   brilho, sem sair do lugar. */
.cli-and-item.atual .cli-and-ponto::before{
  content:"";position:absolute;inset:-11px;border-radius:50%;pointer-events:none;
  border:2px solid color-mix(in srgb,var(--and-cor) 85%,transparent);
  box-shadow:
    0 0 14px color-mix(in srgb,var(--and-cor) 60%,transparent),
    inset 0 0 12px color-mix(in srgb,var(--and-cor) 40%,transparent);
  animation:cli-and-anelvivo 2900ms ease-in-out infinite;
}
@keyframes cli-and-anelvivo{
  0%,100%{opacity:.82;}
  50%{opacity:1;}
}
/* ── QUEM PULSA É A ONDA ──────────────────────────────────────────────────
   Um segundo anel que sai do primeiro e se abre até sumir, sem parar. É o que
   se vê de longe: movimento que ATRAVESSA espaço lê como batida, enquanto uma
   variação de brilho no mesmo lugar quase não aparece.

   No mesmo compasso do anel e do ponto — as três coisas batem juntas, senão
   viram três animações disputando a mesma atenção. */
.cli-and-item.atual .cli-and-ponto::after{
  inset:-11px;
  border:2px solid color-mix(in srgb,var(--and-cor) 75%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--and-cor) 45%,transparent);
  animation:cli-and-onda 2900ms cubic-bezier(.2,.55,.3,1) infinite;
}
@keyframes cli-and-onda{
  0%{opacity:.85;transform:scale(1);}
  72%{opacity:0;transform:scale(2);}
  100%{opacity:0;transform:scale(2);}
}
.cli-and-item.atual .cli-and-corpo{
  padding:11px 17px 13px;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--and-cor) 13%,transparent),
    color-mix(in srgb,var(--and-cor) 3%,transparent) 62%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--and-cor) 30%,transparent),
    0 0 24px -6px color-mix(in srgb,var(--and-cor) 34%,transparent);
}
.cli-and-item.atual:hover .cli-and-corpo{
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--and-cor) 17%,transparent),
    color-mix(in srgb,var(--and-cor) 4%,transparent) 62%,transparent);
}
.cli-and-topo{display:flex;align-items:flex-start;gap:14px;}
.cli-and-cabeca{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;flex:1 1 auto;min-width:0;
}
.cli-and-tipo{
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:700;
  color:rgba(240,240,240,.9);
}
.cli-and-item.djen .cli-and-tipo{color:rgba(252,211,77,.8);}
.cli-and-titulo{
  font-family:'Inter',sans-serif;font-size:.775rem;font-weight:600;
  color:rgba(240,240,240,.74);min-width:0;overflow-wrap:anywhere;
}
/* A data e o "há quantos dias" vão para a DIREITA: são a mesma informação em
   duas escalas, e juntas no fim da linha param de competir com o que
   aconteceu. Não há HORA nenhuma porque não existe hora para mostrar — ver o
   comentário no JS. */
.cli-and-meta{display:flex;align-items:center;gap:11px;flex:0 0 auto;padding-top:1px;}
.cli-and-chip-meta{
  display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;
  color:rgba(240,240,240,.42);white-space:nowrap;
}
.cli-and-chip-meta svg{width:12px;height:12px;opacity:.5;}
.cli-and-data{font-family:'Inter',sans-serif;font-size:.705rem;color:rgba(240,240,240,.5);}
.cli-and-quando{font-family:'Inter',sans-serif;font-size:.69rem;color:rgba(240,240,240,.32);}
/* O SELO DE ORIGEM só existe no que a pessoa NÃO escreveu. Etiqueta em tudo
   não distingue nada — a mesma régua do selo de procedência do cadastro. */
.cli-and-fonte{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  font-family:'Inter',sans-serif;font-size:.56rem;font-weight:800;line-height:1.5;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--and-cor) 30%,transparent);
  background:color-mix(in srgb,var(--and-cor) 12%,transparent);
  color:var(--and-cor);
}
/* O SELO DA FASE ATUAL fica SOBRE o título, e não na fila da direita: ele diz
   o que a linha é, e não de onde ela veio. */
.cli-and-agora{
  display:inline-flex;align-items:center;margin:0 0 7px;padding:3px 10px;border-radius:999px;
  font-family:'Inter',sans-serif;font-size:.55rem;font-weight:800;line-height:1.6;
  letter-spacing:.13em;text-transform:uppercase;
  border:1px solid color-mix(in srgb,var(--cli-teal,#22d3ee) 34%,transparent);
  background:color-mix(in srgb,var(--cli-teal,#22d3ee) 12%,transparent);
  color:var(--cli-teal,#22d3ee);
}
.cli-and-texto{
  font-family:'Inter',sans-serif;font-size:.765rem;color:rgba(240,240,240,.6);
  line-height:1.6;margin:5px 0 0;white-space:pre-wrap;word-break:break-word;
}

/* ── A RÉGUA DE MESES ─────────────────────────────────────────────────────
   O mês mora na CANALETA, alinhado à direita contra o fio, e um ramo curto o
   liga a ele. O fio ATRAVESSA o marcador: o mês é régua, e não um fato que
   interrompe a história. */
.cli-and-mes{position:relative;height:40px;}
.cli-and-mes::after{
  content:"";position:absolute;top:50%;height:1px;transform-origin:right;
  left:calc(-1 * (var(--and-ramo) + 15px));width:15px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--and-fio) 12%,transparent),
    color-mix(in srgb,var(--and-fio) 42%,transparent));
}
.cli-and-mes-rot{
  position:absolute;top:0;bottom:0;pointer-events:none;
  /* Encostado no fio e com largura FIXA: esticado até a borda da canaleta, o
     rótulo passava por cima da ficha das fontes — caixa transparente, mas
     cobrindo os botões dela. */
  left:calc(-1 * (var(--and-ramo) + 22px + var(--and-mes)));
  width:var(--and-mes);
  display:flex;align-items:center;justify-content:flex-end;text-align:right;
  font-family:'Inter',sans-serif;font-size:.6rem;font-weight:800;
  letter-spacing:.19em;text-transform:uppercase;
  color:color-mix(in srgb,var(--and-fio) 62%,transparent);
}

/* As ações só aparecem no item sob o ponteiro: uma trilha com "Editar
   Excluir" repetido em cada linha vira uma lista de botões, não uma história.

   E SAÍRAM DO FLUXO em 26/08/2026. Escondidas por opacidade elas continuavam
   OCUPANDO trinta pixels em cada linha — e desde que cada fato virou um
   cartão, esses trinta pixels viraram uma faixa vazia no rodapé de todos
   eles. Agora ficam no canto do cartão, sobre o espaço que já era delas. */
.cli-and-acoes{
  position:absolute;right:14px;bottom:8px;z-index:2;
  display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .14s;
}
.cli-and-item:hover .cli-and-acoes,
.cli-and-acoes:focus-within{opacity:1;pointer-events:auto;}

/* A CANALETA SÓ EXISTE ENQUANTO CABE. Abaixo disto ela vira zero: o mês volta
   a ser uma linha acima do grupo e a faixa de sincronia volta a ser faixa. Um
   rótulo de mês espremido em quarenta pixels não é régua de tempo nenhuma. */
@media (max-width:1400px){
  .cli-and{grid-template-columns:minmax(0,1fr);--and-canaleta:0px;}
  .cli-and-sinc{
    grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:center;
    width:auto;justify-self:stretch;
  }
  .cli-and-trilha{grid-column:1;grid-row:3;}
  .cli-and-vazio{grid-column:1;}
  .cli-and-mes{height:auto;padding:16px 0 9px;}
  .cli-and-mes-rot{position:static;width:auto;display:inline-flex;text-align:left;}
  .cli-and-mes::after{display:none;}
}
@media (max-width:620px){
  .cli-and{--and-ramo:18px;}
  .cli-and-meta{flex-wrap:wrap;}
  .cli-and-topo{flex-direction:column;gap:6px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   A ESCADA — o processo se ACENDE ao abrir
   ═══════════════════════════════════════════════════════════════════════
   Pedido de 26/08/2026: ao entrar na ficha de um cliente do jurídico, a linha
   do tempo do processo tem de ACONTECER, e não apenas estar lá — as fases e
   os movimentos entrando na ordem em que se leem.

   Cinco camadas, todas penduradas no MESMO índice (`--i`, escrito pelo JS em
   cada marcador de mês e em cada fato) e no mesmo passo:

     farol   um pulso de luz desce o fio inteiro, uma vez
     fio     cada trecho cresce de cima para baixo
     ramo    o traço até o ponto se abre a partir do fio
     ponto   acende, e um anel se abre e some
     corpo   entra pela esquerda, logo atrás do seu ponto

   E QUATRO REGRAS, nenhuma delas enfeite:

   · SÓ AO ABRIR. A classe `revelando` é posta pelo JS quando o cliente é
     aberto ou o processo é trocado na mesa — nunca numa repintura. Uma trilha
     que dança a cada gravação é a página recarregando sozinha, que é a
     sensação que esta ficha já pagou caro para não ter.
   · O ESTADO FINAL É O REPOUSO. Sem a classe, tudo está visível e parado:
     nenhuma regra daqui esconde nada por conta própria, e `both` faz o fim da
     animação coincidir com o normal. Se o CSS não rodar, a trilha está lá
     inteira.
   · MOVIMENTO REDUZIDO acaba com a escada, e não com a trilha — é o mesmo
     `both` que garante isso. O bloco está logo abaixo.
   · SÓ transform e opacity no que se repete por linha. O único box-shadow
     animado está em um elemento, uma vez.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── A BARRA SE DESENHA, DE CIMA PARA BAIXO ───────────────────────────────
   Um `scaleY` na barra INTEIRA, e não um por trecho: era isso que fazia a
   entrada aparecer em pedacinhos, cada um com o seu atraso.

   A duração é a mesma conta do atraso da escada — o último degrau acende em
   `n × passo + 90ms`, e é esse o tempo que a barra tem para descer. Assim ela
   chega ao fim junto com o último ponto, e não muito antes.

   O ZUMBIDO e a CORRENTE continuam rodando por baixo: são de outra natureza
   (não terminam), e por isso ficam na regra de repouso, listados aqui de novo
   para não serem apagados por esta. */
.cli-and-trilha{--cli-and-varre:calc(150ms + min(var(--n,6),12) * var(--cli-and-passo));}
.cli-and-trilha.revelando::before{
  animation:cli-and-zumbido 3600ms ease-in-out infinite,
    cli-and-desenha var(--cli-and-varre) cubic-bezier(.4,.12,.5,.92) both;
}
.cli-and-trilha.revelando::after{
  animation:cli-and-corrente 4200ms linear infinite,
    cli-and-desenha var(--cli-and-varre) cubic-bezier(.4,.12,.5,.92) both;
}
@keyframes cli-and-desenha{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.cli-and-trilha.revelando .cli-and-item::after,
.cli-and-trilha.revelando .cli-and-mes::after{
  animation:cli-and-ramo 300ms ease-out both;
  animation-delay:calc(var(--i,0) * var(--cli-and-passo) + 60ms);
}
@keyframes cli-and-ramo{from{opacity:0;transform:scaleX(0);}to{opacity:1;transform:none;}}
.cli-and-trilha.revelando .cli-and-ponto{
  animation:cli-and-acende 440ms cubic-bezier(.22,1.15,.36,1) both;
  animation-delay:calc(var(--i,0) * var(--cli-and-passo) + 90ms);
}
@keyframes cli-and-acende{
  0%{opacity:0;transform:scale(.4);}
  58%{opacity:1;transform:scale(1.13);}
  100%{opacity:1;transform:scale(1);}
}
/* Um pulso, e não um laço: anel que fica piscando vira ruído de fundo. Isto
   vale para TODO ponto — menos o mais recente, logo abaixo, que é o único da
   tela com batida sem fim. */
.cli-and-trilha.revelando .cli-and-ponto::after{
  animation:cli-and-anel 760ms ease-out both;
  animation-delay:calc(var(--i,0) * var(--cli-and-passo) + 150ms);
}
.cli-and-trilha.revelando .cli-and-item.atual .cli-and-ponto::after{
  animation:cli-and-onda 2900ms cubic-bezier(.2,.55,.3,1) infinite;
  animation-delay:calc(var(--i,0) * var(--cli-and-passo) + 620ms);
}
@keyframes cli-and-anel{
  0%{opacity:.6;transform:scale(.65);}
  100%{opacity:0;transform:scale(2.2);}
}
.cli-and-trilha.revelando .cli-and-corpo,
.cli-and-trilha.revelando .cli-and-mes-rot{
  animation:cli-and-entra 420ms cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * var(--cli-and-passo) + 135ms);
}
@keyframes cli-and-entra{
  from{opacity:0;transform:translate3d(-9px,3px,0);}
  to{opacity:1;transform:none;}
}
/* O ÚLTIMO FATO respira UMA vez, devagar, depois que a escada passa por ele:
   quando o olho volta ao topo, o halo ainda está assentando — e é ali que
   está a resposta da pergunta que trouxe a pessoa até aqui. */
.cli-and-trilha.revelando .cli-and-item.atual .cli-and-ponto{
  animation:
    cli-and-acende 440ms cubic-bezier(.22,1.15,.36,1)
      calc(var(--i,0) * var(--cli-and-passo) + 90ms) both,
    cli-and-respira 2900ms ease-in-out
      calc(var(--i,0) * var(--cli-and-passo) + 620ms) infinite;
}
@keyframes cli-and-respira{
  0%,100%{box-shadow:
    0 0 0 1px color-mix(in srgb,var(--and-cor) 24%,transparent),
    0 0 18px color-mix(in srgb,var(--and-cor) 45%,transparent),
    0 0 44px 3px color-mix(in srgb,var(--and-cor) 22%,transparent),
    inset 0 0 14px color-mix(in srgb,var(--and-cor) 20%,transparent);}
  50%{box-shadow:
    0 0 0 1px color-mix(in srgb,var(--and-cor) 55%,transparent),
    0 0 40px color-mix(in srgb,var(--and-cor) 95%,transparent),
    0 0 96px 16px color-mix(in srgb,var(--and-cor) 55%,transparent),
    inset 0 0 28px color-mix(in srgb,var(--and-cor) 48%,transparent);}
}
/* Quem pediu menos movimento vê a trilha PRONTA, e não uma trilha invisível:
   é `both` no fim de uma duração de um centésimo de milissegundo.

   As duas que NÃO TERMINAM — o zumbido do neon e a batida do nó atual —
   precisam de `animation:none`, e não da duração encurtada: um laço infinito
   de um centésimo de milissegundo é pior do que o original. */
@media (prefers-reduced-motion:reduce){
  .cli-and-trilha::before,
  .cli-and-trilha::after,
  .cli-and-trilha.revelando::before,
  .cli-and-trilha.revelando::after,
  .cli-and-item.atual .cli-and-ponto,
  .cli-and-item.atual .cli-and-ponto::before,
  .cli-and-item.atual .cli-and-ponto::after,
  .cli-and-trilha.revelando .cli-and-item.atual .cli-and-ponto,
  .cli-and-trilha.revelando .cli-and-item.atual .cli-and-ponto::after{
    animation:none!important;
  }
  .cli-and-trilha.revelando .cli-and-item::after,
  .cli-and-trilha.revelando .cli-and-mes::after,
  .cli-and-trilha.revelando .cli-and-mes-rot,
  .cli-and-trilha.revelando .cli-and-ponto,
  .cli-and-trilha.revelando .cli-and-ponto::after,
  .cli-and-trilha.revelando .cli-and-corpo{
    animation-duration:.01ms!important;animation-delay:0ms!important;
  }
}

/* ROLAGEM DO QUADRO — so no pessoal e no 1:1.
   Grupo nao rola: quadro compartilhado que cresce por acao de uma pessoa
   muda o enquadramento de todo mundo. Ver REGRAS-WORKSPACE.md. */
body.quadro-rola #board{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}

/* ═══════════════════════════════════════════════════════════════
   PORTA DE CONFIRMAÇÃO DE E-MAIL
   Cobre a tela inteira porque é bloqueio, não recado. A barra que existia
   antes podia ser fechada, e fechar era o que todo mundo fazia.
   ═══════════════════════════════════════════════════════════════ */
#porta-email{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,8,16,.88);backdrop-filter:blur(10px);animation:peEntra .25s ease both;}
@keyframes peEntra{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#porta-email{animation:none}}
.pe-caixa{width:min(520px,100%);background:#111114;border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:34px 32px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.7);}
.pe-ico{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem;background:rgba(99,102,241,.16);border:1px solid rgba(99,102,241,.32);}
.pe-titulo{font-family:'Syne',sans-serif;font-size:1.32rem;font-weight:800;letter-spacing:-.5px;
  color:#f0f0f0;margin:0 0 14px;line-height:1.25;}
.pe-txt{font-size:.88rem;line-height:1.65;color:rgba(240,240,240,.72);margin:0 0 12px;}
.pe-txt b{color:#a5b4fc;}
.pe-porque{font-size:.82rem;color:rgba(240,240,240,.5);}
.pe-prazo{display:block;text-align:left;margin:18px 0 22px;padding:12px 14px 12px 16px;
  border-radius:11px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.26);
  /* A barra âmbar entrou no lugar da ampulheta: marca o aviso sem emoji.
     Vem DEPOIS do `border` de cima — declaração posterior vence, e a ordem
     invertida apagaria a barra sem erro nenhum. */
  border-left:3px solid rgba(251,191,36,.6);
  font-size:.82rem;line-height:1.55;color:rgba(253,230,138,.95);}
.pe-prazo b{color:#fbbf24;}
/* Bloqueio é mais grave que prazo: vermelho, não âmbar. */
.pe-ico-bloq{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.3);}
/* Depois do prazo o aviso deixa de ser ameaça e vira garantia: nada foi
   apagado. Verde, não âmbar — a cor precisa dizer o mesmo que o texto. */
.pe-prazo-ok{background:rgba(16,185,129,.09);border-color:rgba(16,185,129,.26);
  border-left-color:rgba(52,211,153,.65);color:rgba(209,250,229,.95);}
.pe-prazo-ok b{color:#6ee7b7;}
.pe-bloqueio{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30);
  border-left-color:rgba(248,113,113,.7);color:rgba(254,205,205,.95);}
.pe-acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.pe-btn{flex:1 1 150px;padding:12px 18px;border-radius:10px;cursor:pointer;font-family:'Inter',sans-serif;
  font-size:.86rem;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(240,240,240,.85);transition:all .16s;}
.pe-btn:hover:not(:disabled){background:rgba(255,255,255,.11);}
.pe-btn:disabled{opacity:.55;cursor:default;}
.pe-ok{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:transparent;color:#fff;}
.pe-ok:hover:not(:disabled){opacity:.9;}
.pe-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.07);font-size:.76rem;color:rgba(240,240,240,.4);}
.pe-sair{background:none;border:none;color:rgba(240,240,240,.45);font-family:'Inter',sans-serif;
  font-size:.76rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;}
.pe-sair:hover{color:rgba(240,240,240,.8);}
@media(max-width:560px){.pe-caixa{padding:26px 20px;}.pe-titulo{font-size:1.12rem;}}

/* ── Adicionar membro ao grupo ───────────────────────────────────────────
   Esta janela usava `.sp-btn` nos dois botões, e `.sp-btn` é o botão de
   ÍCONE das linhas de amigo: 28x28 fixos. Com a palavra "Buscar" dentro, o
   texto transbordava para fora de uma caixa quase invisível, e "Fechar"
   ficava solto no canto parecendo um link perdido. Classes próprias. */
.am-caixa{width:min(430px,93vw);padding:24px 24px 20px;}
.am-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:18px;}
.am-tit{font-family:'Syne',sans-serif;font-size:1.08rem;font-weight:800;color:#f0f0f0;
  line-height:1.2;}
/* O nome do grupo, porque quem administra mais de um precisa saber em qual
   está convidando — a janela abre igual nos dois. */
.am-sub{margin-top:3px;font-size:.735rem;color:rgba(240,240,240,.4);}
.am-x{width:28px;height:28px;flex-shrink:0;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.05);color:rgba(240,240,240,.45);font-size:.78rem;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.am-x:hover{background:rgba(255,255,255,.1);color:#f0f0f0;}
.am-lbl{display:block;font-size:.735rem;color:rgba(240,240,240,.45);margin-bottom:8px;}

/* O @ vive DENTRO do campo, como prefixo fixo. Ele é parte do endereço e não
   algo que a pessoa precise digitar — e quem digita mesmo assim é limpo na
   normalização, então os dois caminhos chegam no mesmo lugar. */
.am-linha{display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:11px;padding:4px 4px 4px 12px;
  transition:border-color .18s,box-shadow .18s;}
.am-linha:focus-within{border-color:rgba(99,102,241,.65);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);}
.am-arroba{font-size:.87rem;color:rgba(240,240,240,.28);flex-shrink:0;}
.am-inp{flex:1;min-width:0;background:none;border:0;outline:0;padding:9px 0;
  font-family:'Inter',sans-serif;font-size:.87rem;color:#f0f0f0;}
.am-inp::placeholder{color:rgba(240,240,240,.2);}

.am-btn{flex-shrink:0;border:0;border-radius:8px;padding:9px 15px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;white-space:nowrap;
  background:rgba(255,255,255,.06);color:rgba(240,240,240,.6);
  transition:background .15s,color .15s,opacity .15s;}
.am-btn:hover{background:rgba(255,255,255,.1);color:rgba(240,240,240,.9);}
.am-btn.primario{background:#6366f1;color:#fff;}
.am-btn.primario:hover{background:#4f46e5;}
.am-btn:disabled{opacity:.55;cursor:default;}

/* Nasce fechado e só ocupa espaço quando tem o que dizer: uma caixa vazia
   permanente empurra o rodapé para baixo e parece defeito. */
.am-res{display:none;align-items:center;gap:11px;margin-top:14px;padding:11px 13px;
  border-radius:11px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  animation:amResIn .22s cubic-bezier(.16,1,.3,1) both;}
.am-res.visivel{display:flex;}
.am-res.achou{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.22);}
@keyframes amResIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.am-aviso{font-size:.755rem;color:rgba(240,240,240,.42);}
.am-res.carregando .am-aviso{animation:amPulso 1.1s ease-in-out infinite;}
@keyframes amPulso{0%,100%{opacity:1;}50%{opacity:.45;}}
.am-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.am-av-vazio{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  font-size:.92rem;font-weight:700;color:#fff;}
.am-pessoa{flex:1;min-width:0;}
.am-nome{font-size:.845rem;font-weight:600;color:#f0f0f0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.am-user{margin-top:1px;font-size:.705rem;color:rgba(240,240,240,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.am-pe{display:flex;justify-content:flex-end;margin-top:18px;}

@media(max-width:420px){
  .am-caixa{padding:20px 18px 16px;}
  /* Numa tela estreita o botão ao lado do campo espreme os dois. Ele desce e
     ocupa a linha inteira, que é onde ainda dá para acertar com o dedo. */
  .am-linha{flex-wrap:wrap;padding:4px 8px 8px 12px;}
  .am-linha .am-btn{width:100%;margin-top:2px;}
}

/* A grade de permissões rola na horizontal no celular — e no desktop também,
   se a lista de painéis crescer além do que a janela alcança. Nenhuma largura
   de tela comporta seis colunas de selo em 390px, e espremê-las até caber
   tornaria o alvo pequeno demais para o dedo, que é o que esta tela existe
   para operar. Rolar é a resposta certa; o que faltava era DIZER que se rola —
   `.perm-dica` e a sombra de `.perm-quadro`, lá em cima. */
.perm-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
@media (max-width:768px){
  /* No celular a coluna dos nomes encolhe: presa à esquerda, ela come a tela
     inteira antes de sobrar espaço para o primeiro selo. */
  .perm-grade{grid-template-columns:minmax(132px,1fr) repeat(var(--perm-cols,3),minmax(148px,1fr));}
  .perm-canto,.perm-col,.perm-membro{padding:12px 10px;}
  .perm-avatar{width:28px;height:28px;font-size:.72rem;}
}


/* ═══════════════════════════════════════════════════════════════════════
   NOTA TRANCADA — anexo acima do limite do plano gratuito
   ═══════════════════════════════════════════════════════════════════════
   O dado NAO foi apagado (Regra 10 do REGRAS-WORKSPACE.md): a nota esta ali,
   inteira, e volta no dia do pagamento. O que ela faz agora e nao abrir.

   O conteudo e desfocado, e nao escondido: uma nota em branco pareceria
   perdida, e o susto de achar que o trabalho sumiu e exatamente o que esta
   regra existe para evitar. Desfocado, ve-se que ha algo la.

    porque texto desfocado continua selecionavel e copiavel —
   um cadeado que o Ctrl+C abre nao e cadeado. */
.note.nota-trancada{position:relative;}
.note.nota-trancada .n-title,
.note.nota-trancada .n-text,
.note.nota-trancada .n-files,
.note.nota-trancada .n-checklist{
  filter:blur(4px);opacity:.5;pointer-events:none;user-select:none;-webkit-user-select:none;
}
.note.nota-trancada::after{
  content:'🔒';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;background:rgba(10,10,12,.34);border-radius:inherit;pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════════
   IMPORTAR CLIENTES
   ═══════════════════════════════════════════════════════════════════════
   Três passos no mesmo modal: escolher o arquivo, conferir de que coluna vem
   cada campo, e ver a prévia antes de gravar. O modal é alto de propósito — o
   mapa de colunas tem vinte e cinco linhas, e paginá-lo faria a pessoa
   decidir sem ver o conjunto. */
.cli-imp{width:min(620px,94vw);max-height:calc(100dvh - 40px);overflow-y:auto;}
.cli-imp-sub{margin:0 0 14px;font-size:.76rem;line-height:1.55;color:rgba(240,240,240,.42);}

/* O alvo de arrastar. Grande porque é o único alvo da tela: um campo de
   arquivo padrão some no meio do modal. */
.cli-imp-alvo{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:34px 18px;border-radius:14px;cursor:pointer;text-align:center;
  border:1.5px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.02);
  transition:border-color .16s,background .16s;
}
.cli-imp-alvo:hover,.cli-imp-alvo:focus-visible{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.06);}
.cli-imp-alvo.sobre{border-color:#6366f1;background:rgba(99,102,241,.12);}
.cli-imp-alvo.carregando{opacity:.5;pointer-events:none;}
.cli-imp-ico{color:rgba(165,180,252,.7);}
.cli-imp-alvo strong{font-size:.86rem;color:#f0f0f0;}
.cli-imp-alvo em{font-style:normal;font-size:.7rem;color:rgba(240,240,240,.34);}

.cli-imp-cab-opt{display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:.75rem;color:rgba(240,240,240,.6);cursor:pointer;}

/* O mapa de colunas. Rótulo à esquerda, seletor à direita — a leitura é
   "o campo X vem da coluna Y", e é nessa ordem que a frase se lê. */
.cli-imp-mapa{display:flex;flex-direction:column;gap:5px;
  max-height:46dvh;overflow-y:auto;padding-right:4px;}
.cli-imp-grupo{margin:12px 0 3px;font-size:.63rem;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:rgba(240,240,240,.3);}
.cli-imp-grupo:first-child{margin-top:0;}
.cli-imp-linha{display:grid;grid-template-columns:1fr 1.15fr;gap:10px;align-items:center;}
.cli-imp-rot{font-size:.75rem;color:rgba(240,240,240,.62);}
.cli-imp-rot.obrig{color:#f0f0f0;font-weight:600;}
.cli-imp-sel{padding:6px 9px !important;font-size:.74rem !important;}

/* O placar da prévia. Números grandes porque a pergunta é "quantos" — e a
   resposta precisa ser lida antes de a pessoa clicar em importar. */
.cli-imp-placar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;}
.cli-imp-num{flex:1;min-width:104px;padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);}
.cli-imp-num b{display:block;font-family:'Syne',sans-serif;font-size:1.5rem;
  font-weight:800;color:#f0f0f0;line-height:1.1;}
.cli-imp-num span{font-size:.65rem;color:rgba(240,240,240,.38);}
.cli-imp-num.bom{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.24);}
.cli-imp-num.bom b{color:#6ee7b7;}
.cli-imp-num.fraco b{color:rgba(240,240,240,.45);}

/* A amostra existe para conferir de olho: "48 clientes" parece certo mesmo
   quando a coluna do nome está trocada com a do telefone. */
.cli-imp-amostra{border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:11px 13px;margin-bottom:12px;background:rgba(255,255,255,.02);}
.cli-imp-item{display:flex;flex-direction:column;gap:1px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04);}
.cli-imp-item:last-child{border-bottom:0;}
.cli-imp-item b{font-size:.78rem;color:#f0f0f0;font-weight:600;overflow-wrap:anywhere;}
.cli-imp-item span{font-size:.68rem;color:rgba(240,240,240,.36);overflow-wrap:anywhere;}
.cli-imp-mais{padding-top:7px;font-size:.68rem;color:rgba(240,240,240,.3);}

.cli-imp-aviso{margin:0 0 12px;padding:9px 12px;border-radius:10px;font-size:.72rem;
  line-height:1.5;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.2);
  color:#fcd34d;}
.cli-imp-repet{border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:11px 13px;margin-bottom:12px;}
.cli-imp-repet .cli-imp-sub{margin-bottom:9px;}
.cli-imp-radio{display:flex;align-items:flex-start;gap:8px;padding:5px 0;
  font-size:.74rem;color:rgba(240,240,240,.7);cursor:pointer;}

.cli-imp-barra{position:relative;height:6px;border-radius:99px;margin:4px 0 12px;
  background:rgba(255,255,255,.07);overflow:visible;}
.cli-imp-barra i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width .2s;}
.cli-imp-barra span{position:absolute;right:0;top:10px;font-size:.66rem;
  color:rgba(240,240,240,.4);font-variant-numeric:tabular-nums;}

@media (max-width:560px){
  .cli-imp-linha{grid-template-columns:1fr;gap:3px;}
  .cli-imp-mapa{max-height:40dvh;}
}

/* ── O total ao lado da parte, no cartão de indicador ───────────────────
   "13" sozinho, grande, no canto de cima, era lido como o total da carteira —
   e o total (16) ficava num selo pequeno ao lado do título da tabela. Uma
   fração não tem como ser lida errado. */
.cli-kpi-de{font-size:.52em;font-weight:600;color:rgba(240,240,240,.34);
  letter-spacing:0;margin-left:2px;}

/* A repartição por status na tela final da importação */
.cli-imp-status{flex-direction:row !important;align-items:center;gap:8px;}
.cli-imp-status i{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.cli-imp-status b{flex:1;font-weight:500 !important;font-size:.75rem !important;
  color:rgba(240,240,240,.72) !important;}
.cli-imp-status span{font-variant-numeric:tabular-nums;font-weight:700;
  font-size:.78rem !important;color:#f0f0f0 !important;}

/* A explicação de por que os dois números diferem. Fundo próprio porque ela
   não é um detalhe: é a resposta à pergunta que a tela acabou de criar. */
.cli-imp-explica{margin:10px 0 0;padding:10px 12px;border-radius:10px;
  font-size:.72rem;line-height:1.6;color:rgba(190,230,255,.8);
  background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.18);}

/* Os nomes sob cada status, na tela final da importação. "1 Em negociação"
   obriga a procurar quem é — e procurar é o que esta tela existe para evitar. */
.cli-imp-status-bloco{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.cli-imp-status-bloco:last-child{border-bottom:0;}
.cli-imp-status-nomes{margin:3px 0 0 15px;font-size:.7rem;line-height:1.5;
  color:rgba(240,240,240,.42);overflow-wrap:anywhere;}

/* ── O selo de status é um botão ────────────────────────────────────────
   Trocar de status era a decisão mais frequente da carteira e a mais cara de
   fazer: abrir o cliente, achar o campo, voltar. Agora o selo abre o menu.
   `font:inherit` e `border:0` porque virar <button> traria a tipografia e o
   contorno do navegador — a mesma armadilha que engordou o distintivo do
   grupo na barra quando ele virou botão. */
.cli-status-btn{
  font:inherit;font-size:.71rem;font-weight:600;line-height:1.35;
  border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.cli-status-btn:hover{
  background:color-mix(in srgb,var(--st) 24%,transparent);
  border-color:color-mix(in srgb,var(--st) 40%,transparent);
}
.cli-status-btn:focus-visible{outline:2px solid var(--st);outline-offset:2px;}
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .cli-status-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);}
}

/* O aviso de que apagar no Financeiro leva a carteira junto. Fundo próprio
   porque não é um detalhe do texto acima: é a consequência que a tela onde o
   botão vive não deixa adivinhar. */
.confirm-clear-alerta{
  margin-top:10px;padding:9px 12px;border-radius:10px;
  font-size:.72rem;line-height:1.55;color:#fca5a5;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.22);
}

/* A escolha da ficha, na importação. Cliente importado nascia sem ficha, e é a
   ficha que decide a aba do ramo — uma corretora traria 500 segurados e a aba
   Apólices nunca apareceria. */
.cli-imp-ficha{border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:11px 13px;margin:12px 0;background:rgba(255,255,255,.02);}
.cli-imp-ficha .cli-imp-sub{margin-bottom:9px;}

/* ═══════════════════════════════════════════════════════════════════════
   IMPORTAR O FINANCEIRO
   ═══════════════════════════════════════════════════════════════════════
   Prefixo próprio, e não `.cli-imp` reaproveitado: são dois painéis, e a
   Regra 9 vale também para a folha de estilo — no dia em que a importação de
   clientes ganhar um passo a mais, a do financeiro não pode mudar de forma
   junto. O que se repete aqui são medidas, e medida repetida não é acoplamento.

   As cores são as MESMAS do bloco vizinho, escritas do mesmo jeito: nada de
   hexadecimal fixo no fundo, para que a conversão para tokens de tema pegue
   os dois de uma vez quando ela chegar aqui. */
.fin-imp{width:min(660px,94vw);max-height:calc(100dvh - 40px);overflow-y:auto;}
.fin-imp-sub{margin:0 0 14px;font-size:.76rem;line-height:1.55;color:rgba(240,240,240,.42);}
.fin-imp-nota{margin:9px 0 0;font-size:.7rem;line-height:1.5;color:rgba(240,240,240,.34);}

.fin-imp-alvo{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:34px 18px;border-radius:14px;cursor:pointer;text-align:center;
  border:1.5px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.02);
  transition:border-color .16s,background .16s;
}
.fin-imp-alvo:hover,.fin-imp-alvo:focus-visible{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.06);}
.fin-imp-alvo.sobre{border-color:#10b981;background:rgba(16,185,129,.12);}
.fin-imp-alvo.carregando{opacity:.5;pointer-events:none;}
.fin-imp-ico{color:rgba(110,231,183,.75);}
.fin-imp-alvo strong{font-size:.86rem;color:var(--clr-text);}
.fin-imp-alvo em{font-style:normal;font-size:.7rem;color:rgba(240,240,240,.34);}

.fin-imp-cab-opt{display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:.74rem;color:rgba(240,240,240,.62);cursor:pointer;}

/* O mapa é alto de propósito: são vinte e oito linhas, e paginá-las faria a
   pessoa decidir sem ver o conjunto — a coluna de parcela só faz sentido ao
   lado da de vencimento. */
.fin-imp-mapa{display:flex;flex-direction:column;gap:5px;
  max-height:46dvh;overflow-y:auto;padding-right:4px;}
.fin-imp-grupo{margin:12px 0 3px;font-size:.63rem;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:rgba(240,240,240,.3);}
.fin-imp-grupo:first-child{margin-top:0;}
.fin-imp-grupo-sub{margin:0 0 6px;font-size:.7rem;line-height:1.5;
  color:rgba(240,240,240,.34);}
.fin-imp-linha{display:grid;grid-template-columns:1fr 1.15fr;gap:10px;align-items:center;}
.fin-imp-rot{font-size:.75rem;color:rgba(240,240,240,.62);}
.fin-imp-rot.obrig{color:var(--clr-text);font-weight:600;}
.fin-imp-sel{padding:6px 9px !important;font-size:.74rem !important;}

.fin-imp-placar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:10px;}
.fin-imp-num{flex:1;min-width:104px;padding:11px 13px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);}
.fin-imp-num b{display:block;font-family:'Syne',sans-serif;font-size:1.5rem;
  line-height:1.1;color:var(--clr-text);font-variant-numeric:tabular-nums;}
.fin-imp-num span{font-size:.65rem;color:rgba(240,240,240,.38);}
.fin-imp-num.bom{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.24);}
.fin-imp-num.bom b{color:#6ee7b7;}
.fin-imp-num.fraco b{color:rgba(240,240,240,.45);}

/* O dinheiro numa linha só, e grande: é o número que denuncia coluna trocada
   antes de qualquer conferência de nome. */
.fin-imp-soma{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 0 14px;padding:10px 13px;border-radius:12px;
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.18);}
.fin-imp-soma span{font-size:.72rem;color:rgba(240,240,240,.5);}
.fin-imp-soma b{font-family:'Syne',sans-serif;font-size:1.15rem;color:#6ee7b7;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}

.fin-imp-amostra{border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:11px 13px;margin-bottom:12px;}
.fin-imp-item{display:flex;flex-direction:column;gap:2px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04);}
.fin-imp-item:last-child{border-bottom:0;}
.fin-imp-item-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.fin-imp-item b{font-size:.78rem;color:var(--clr-text);font-weight:600;overflow-wrap:anywhere;}
.fin-imp-item i{font-style:normal;font-size:.76rem;font-weight:600;color:#6ee7b7;
  font-variant-numeric:tabular-nums;flex-shrink:0;}
.fin-imp-item span{font-size:.68rem;color:rgba(240,240,240,.36);overflow-wrap:anywhere;}
.fin-imp-mais{padding-top:7px;font-size:.68rem;color:rgba(240,240,240,.3);}

.fin-imp-escolha{border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:11px 13px;margin-bottom:12px;background:rgba(255,255,255,.02);}
.fin-imp-radio{display:flex;align-items:flex-start;gap:8px;padding:5px 0;
  font-size:.74rem;line-height:1.45;color:rgba(240,240,240,.7);cursor:pointer;}
.fin-imp-radio input{margin-top:2px;flex-shrink:0;}

.fin-imp-avisos{margin:0 0 12px;padding:10px 13px;border-radius:12px;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);}
.fin-imp-avisos .fin-imp-grupo{color:rgba(252,211,77,.75);margin-top:0;}
.fin-imp-aviso-linha{font-size:.72rem;line-height:1.5;color:#fcd34d;padding:4px 0;}
/* De quem o aviso fala. Mais apagado que a frase e recuado: a frase diz O QUE
   houve, esta linha diz ONDE — quem já entendeu o problema pula, e quem vai
   corrigir tem o nome e a linha sem sair da tela. `anywhere` porque nome de
   empresa é longo e não pode empurrar o modal para os lados. */
.fin-imp-aviso-quem{margin:2px 0 0 10px;font-size:.68rem;line-height:1.5;
  color:rgba(252,211,77,.62);overflow-wrap:anywhere;}

.fin-imp-conta{border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:11px 13px;margin:12px 0;}
.fin-imp-conta-linha{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:4px 0;font-size:.74rem;color:rgba(240,240,240,.55);
  border-bottom:1px solid rgba(255,255,255,.04);}
.fin-imp-conta-linha:last-child{border-bottom:0;color:var(--clr-text);font-weight:600;}
.fin-imp-conta-linha b{font-variant-numeric:tabular-nums;color:var(--clr-text);}

.fin-imp-barra{position:relative;height:6px;border-radius:99px;margin:4px 0 12px;
  background:rgba(255,255,255,.07);overflow:visible;}
.fin-imp-barra i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#10b981,#6366f1);transition:width .2s;}
.fin-imp-barra span{position:absolute;right:0;top:10px;font-size:.66rem;
  color:rgba(240,240,240,.4);font-variant-numeric:tabular-nums;}

/* Nenhuma tela é a padrão. No celular o mapa vira uma coluna e encolhe: com
   duas colunas, o `select` ficava com 90px e nenhum nome de coluna cabia. */
@media (max-width:560px){
  .fin-imp-linha{grid-template-columns:1fr;gap:3px;}
  .fin-imp-mapa{max-height:40dvh;}
  .fin-imp-soma{flex-direction:column;gap:2px;}
}

/* ── Apólices ───────────────────────────────────────────────────────────
   Mesmo desenho dos processos: o cartão herda `.cli-proc`. O que muda é o
   placar em cima e o bloco de sinistros dentro. */
.cli-ap-placar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;}
.cli-ap-num{flex:1;min-width:96px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);}
.cli-ap-num b{display:block;font-family:'Syne',sans-serif;font-size:1.15rem;
  font-weight:800;color:#f0f0f0;line-height:1.2;overflow-wrap:anywhere;}
.cli-ap-num span{font-size:.63rem;color:rgba(240,240,240,.38);}
.cli-ap-num.bom b{color:#6ee7b7;}
.cli-ap-num.alerta{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.24);}
.cli-ap-num.alerta b{color:#fcd34d;}
.cli-ap-num.ruim{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.24);}
.cli-ap-num.ruim b{color:#fca5a5;}

/* A que vence em 30 dias fica âmbar; a vencida herda o vermelho de `.atrasado`
   dos processos. É o mesmo vocabulário de cor do resto da carteira. */
.cli-ap.aviso{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.04);}
.cli-ap-ramo{font-size:1rem;flex-shrink:0;}
.cli-ap-sit{flex-shrink:0;}

.cli-ap-sinistros{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06);}
.cli-ap-sin-tit{font-size:.65rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:rgba(240,240,240,.3);margin-bottom:6px;}
.cli-ap-sin{display:flex;align-items:center;gap:8px;padding:4px 0;flex-wrap:wrap;}
.cli-ap-sin-txt{flex:1;min-width:0;font-size:.72rem;color:rgba(240,240,240,.6);
  overflow-wrap:anywhere;}
.cli-ap-sin-desc{margin:0 0 6px;padding-left:2px;font-size:.7rem;line-height:1.5;
  color:rgba(240,240,240,.4);overflow-wrap:anywhere;}

/* A dica ao lado do seletor de ficha. Ocupa a segunda coluna da linha para o
   seletor não ficar sozinho e do tamanho da tela inteira. */
.cli-form-dica{display:flex;align-items:flex-end;padding-bottom:9px;}
.cli-form-dica span{font-size:.68rem;line-height:1.5;color:rgba(240,240,240,.34);}

/* ── Os campos do nicho, no formulário do cliente ───────────────────────
   Escolher a ficha e nada mudar na tela é um seletor sem sentido: a pessoa
   marca "Apólice de seguro" e continua sem onde escrever o ramo, a seguradora
   e a vigência. Estes campos aparecem ao escolher e trocam junto com a ficha.

   Bloco com moldura própria porque eles NÃO são do cadastro comum: nome,
   e-mail e telefone valem para todo cliente; ramo e vigência só para este. */
.cli-nicho{
  display:flex;flex-direction:column;gap:11px;margin:6px 0 4px;
  padding:13px;border-radius:12px;
  background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.16);
}
.cli-nicho:empty{display:none;padding:0;border:0;margin:0;}
.cli-nicho-tit{
  font-size:.73rem;font-weight:700;color:rgba(199,210,254,.85);
  letter-spacing:.2px;
}
/* Campo com etiqueta ao lado: o valor manda, a etiqueta é qualificação. */
.cli-nicho-linha{display:grid;grid-template-columns:1fr 130px;gap:8px;align-items:start;}
.cli-nicho-selo{font-size:.73rem !important;}
.cli-nicho-etapas{
  font-size:.68rem;line-height:1.55;color:rgba(240,240,240,.38);
  padding-top:4px;border-top:1px solid rgba(255,255,255,.06);
}
@media (max-width:560px){
  .cli-nicho-linha{grid-template-columns:1fr;}
}

/* ── IMPORTAR APÓLICE EM PDF ────────────────────────────────────────────
   A conferência do nome vem PRIMEIRO e em destaque: a apólice entra na ficha
   de um cliente que já está aberto, e o único erro caro aqui é importar o PDF
   de uma pessoa na ficha de outra. Quando o nome não bate, a caixa fica âmbar
   — não vermelha, porque não é erro: nome de empresa e nome de cadastro
   divergem o tempo todo, e quem decide é ela.

   Cada campo lido mostra a LINHA de onde saiu, em corpo menor. É o que
   permite conferir sem abrir o PDF do lado, e responde à confusão dos "13
   clientes / 16 no financeiro": valor sem origem confunde mais do que ajuda. */
.cli-ap-confere{background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.22);
  border-radius:12px;padding:12px 14px;margin-bottom:14px;}
.cli-ap-confere-alerta{background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.34);}
.cli-ap-confere-tit{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(240,240,240,.5);margin-bottom:5px;}
.cli-ap-confere-alerta .cli-ap-confere-tit{color:#f59e0b;}
.cli-ap-confere-txt{font-family:'Inter',sans-serif;font-size:.86rem;color:rgba(240,240,240,.9);
  line-height:1.5;word-break:break-word;}

.cli-ap-lidos{display:flex;flex-direction:column;gap:10px;}
.cli-ap-lido{border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:9px;}
.cli-ap-lido:last-child{border-bottom:0;padding-bottom:0;}
.cli-ap-lido-rot{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(240,240,240,.42);}
.cli-ap-lido-val{font-family:'Inter',sans-serif;font-size:.9rem;color:#f0f0f0;
  line-height:1.45;margin-top:2px;word-break:break-word;}
/* A origem é prova, não conteúdo: fica legível, e discreta o bastante para
   não competir com o valor que ela veio confirmar. */
.cli-ap-fonte{font-family:'JetBrains Mono','SFMono-Regular',monospace;font-size:.66rem;
  color:rgba(240,240,240,.3);line-height:1.5;margin-top:3px;word-break:break-word;}

.cli-ap-faltou{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
.cli-ap-faltou-tit{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(240,240,240,.42);margin-bottom:4px;}
.cli-ap-faltou-txt{font-family:'Inter',sans-serif;font-size:.8rem;
  color:rgba(240,240,240,.55);line-height:1.6;}

/* ── LER APÓLICE ESCANEADA (OCR) ────────────────────────────────────────
   A barra existe porque OCR de três páginas leva dezenas de segundos. Sem
   sinal de vida a pessoa fecha a janela achando que travou — foi assim que o
   botão de fechar dos amigos virou um "o resto para de funcionar".

   E a frase "nada é enviado para fora" fica FIXA, não some com o progresso:
   a apólice tem CPF, endereço e valores, e quem está esperando um documento
   de cliente ser processado merece saber onde ele está sendo processado. */
.cli-ocr{max-width:400px;padding:24px;text-align:center;}
.cli-ocr .m-h1{margin-bottom:14px;}
.cli-ocr-passo{font-family:'Inter',sans-serif;font-size:.82rem;
  color:rgba(240,240,240,.7);margin-bottom:12px;min-height:1.2em;}
.cli-ocr-trilho{height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;}
.cli-ocr-barra{height:100%;width:2%;border-radius:99px;background:#22d3ee;
  transition:width .25s ease;}
.cli-ocr-nota{font-family:'Inter',sans-serif;font-size:.72rem;
  color:rgba(240,240,240,.4);line-height:1.6;margin-top:14px;}

/* O aviso de que veio de imagem. Âmbar, e não vermelho: não é erro, é uma
   leitura que exige conferência maior. Texto de PDF é exato; OCR troca 0 por
   O e 1 por l, e num número de apólice isso passa despercebido. */
.cli-ocr-aviso{font-family:'Inter',sans-serif;font-size:.74rem;line-height:1.55;
  color:#f59e0b;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.28);
  border-radius:9px;padding:7px 10px;margin-top:8px;}

/* ── AS AÇÕES DA APÓLICE E DO PROCESSO ESTAVAM INVISÍVEIS ───────────────
   `.cli-obs-acoes` nasce com `opacity:0` e só reaparece em
   `.cli-obs:hover`. A linha da apólice e a do processo são `.cli-proc` — a
   regra de hover NUNCA casava, e os botões Editar, Excluir e "+ Sinistro"
   ficavam permanentemente transparentes. Existiam, ocupavam espaço, recebiam
   clique se alguém acertasse por acaso, e não apareciam nunca.

   Foi reportado como "permita que eu possa clicar na apólice para editar" e
   "inclusive excluir elas": o pedido não era de um recurso novo, era de
   enxergar o que já estava lá.

   Ficam VISÍVEIS, e não só no hover. Hover não existe em toque, e esconder
   ação de excluir atrás de um gesto que metade dos aparelhos não tem é o
   mesmo defeito de novo, com outra roupa. */
.cli-proc .cli-obs-acoes{opacity:.55;}
.cli-proc:hover .cli-obs-acoes,
.cli-proc:focus-within .cli-obs-acoes{opacity:1;}

/* A linha inteira abre a apólice. O cursor é o que promete isso antes do
   clique; sem ele a área clicável é invisível e ninguém tenta. */
.cli-proc-clicavel{cursor:pointer;}
.cli-proc-clicavel:focus-visible{outline:2px solid rgba(34,211,238,.6);outline-offset:2px;}
/* Os botões voltam ao cursor normal: dentro de uma área clicável, um alvo que
   faz OUTRA coisa precisa parecer outro alvo. */
.cli-proc-clicavel .cli-obs-acoes button{cursor:pointer;}

/* Os dados do cliente que vieram na apólice. Bloco separado dos campos da
   apólice de propósito: são dois assuntos com donos diferentes — o contrato e
   a pessoa —, e misturá-los faria alguém achar que endereço é campo de
   apólice. */
.cli-ap-cliente{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:9px;}
.cli-ap-usar{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.78rem;color:rgba(240,240,240,.75);
  line-height:1.5;margin-top:2px;}
.cli-ap-usar input{margin-top:2px;accent-color:#22d3ee;flex-shrink:0;}
/* Quando o valor da ficha VAI SER TROCADO, a linha fica âmbar. Não é erro — é
   uma substituição, e substituição precisa ser vista antes de acontecer. */
.cli-ap-troca{color:#f59e0b !important;}

/* ══════════════════════════════════════════════════════════════════════
   O PLANO EMPRESARIAL — roxo, e só o que muda
   ══════════════════════════════════════════════════════════════════════
   `showEnterpriseModal` reaproveita a estrutura inteira do modal do Premium
   (.premium-modal, .pm-badge, .pm-features, .pm-stripe-button) e troca só a
   cor. Copiar o bloco inteiro para pintá-lo de roxo criaria duas folhas do
   mesmo modal, e a que não se olha todo dia envelhece — foi assim que a
   lista de vendas do Premium ficou três módulos atrás.

   Roxo é a cor do Empresarial na landing; azul é o Premium mensal e verde o
   anual. Quem vê o cartão e depois o modal precisa reconhecer o mesmo plano. */
.pm-enterprise{border-color:rgba(168,85,247,.3);}
.pm-enterprise .pm-badge{background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(139,92,246,.1));
  border-color:rgba(168,85,247,.4);color:#d8b4fe;}
.pm-enterprise .pm-title .hl{background:linear-gradient(135deg,#c084fc,#a855f7);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.pm-enterprise .pm-feat-icon{background:rgba(168,85,247,.14);color:#d8b4fe;}
.pm-enterprise .pm-stripe-button{background:linear-gradient(135deg,#a855f7,#7c3aed);
  box-shadow:0 4px 18px rgba(168,85,247,.35);
  /* É uma <a>, não um <button>: sem isto o texto herda o azul de link e o
     bloco perde a altura que o botão tinha. */
  display:block;text-align:center;text-decoration:none;line-height:1.2;}
/* ── A PORTA FECHADA ─────────────────────────────────────────────────────
   Mesmo modal do Empresarial (é o mesmo assunto e o mesmo caminho de volta),
   com o SELO em vermelho: roxo é convite para comprar, e aqui a primeira
   informação não é uma oferta — é que uma porta fechou. O resto do cartão
   continua roxo de propósito: o que destranca é o Empresarial, e a cor é o que
   liga esta tela ao plano na landing e no modal de assinatura. */
.pm-bloqueio .pm-badge{background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(220,38,38,.1));
  border-color:rgba(239,68,68,.4);color:#fca5a5;}
.pm-bloqueio .pm-feat-icon{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22);}

.pm-ent-preco{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;color:#e9d5ff;
  letter-spacing:-1px;line-height:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.pm-ent-preco span{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:500;
  letter-spacing:0;color:rgba(240,240,240,.42);}

/* ══════════════════════════════════════════════════════════════════════
   O CONVITE DE GRUPO
   ══════════════════════════════════════════════════════════════════════
   Era um cartãozinho no canto, do tamanho de um aviso de mensagem nova. Agora
   é tela: entrar num grupo é a única hora em que a pessoa é apresentada ao
   produto inteiro do Empresarial, e depois de entrar ninguém volta a ler uma
   tela de boas-vindas.

   Herda o modal do Empresarial (`pm-enterprise`) porque é o plano que paga
   este grupo — quem entra vai reencontrar o roxo no distintivo da barra e nas
   telas de assento. O que muda é o miolo: em vez de uma lista de vendas, uma
   lista de COMO FUNCIONA. */
.convite-bg{opacity:0;transition:opacity .2s;}
.convite-bg.visivel{opacity:1;}
.convite-bg.saindo{opacity:0;}
.convite-modal{
  width:min(560px,94vw);padding:0;overflow:hidden;
  transform:scale(.97);transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.convite-bg.visivel .convite-modal{transform:scale(1);}

/* O topo é o cartão de visita do grupo: quem convidou, e para onde. O
   gradiente separa "de quem é este convite" de "como funciona" sem uma linha. */
.convite-topo{
  padding:26px 28px 20px;text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(168,85,247,.22), transparent 70%),
    linear-gradient(180deg, rgba(124,58,237,.14), transparent);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.convite-av{
  width:62px;height:62px;margin:0 auto 14px;border-radius:19px;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  background:linear-gradient(135deg,#a855f7,#6d28d9);
  box-shadow:0 12px 30px rgba(124,58,237,.4);
}
.convite-modal .convite-badge{margin-bottom:10px;}
.convite-nome{
  font-family:'Syne',sans-serif;font-size:1.55rem;font-weight:800;
  color:#f0f0f0;letter-spacing:-.8px;line-height:1.15;overflow-wrap:anywhere;
}
.convite-de{font-size:.78rem;color:rgba(240,240,240,.45);margin-top:6px;}

/* A lista rola quando não cabe — e é a lista que rola, não a tela inteira: os
   botões precisam ficar à mão em qualquer altura de janela. */
.convite-lista{
  display:flex;flex-direction:column;gap:2px;padding:16px 18px 6px;
  max-height:min(46dvh,420px);overflow-y:auto;
  /* A ÚLTIMA LINHA VISÍVEL SE APAGA no pé da lista. Sem isso o corte cai no
     meio de uma frase e parece defeito de renderização — com o esmaecido, lê-se
     "continua". É a diferença entre a pessoa rolar e a pessoa achar que a tela
     quebrou. */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);
}
.convite-item{
  display:flex;gap:13px;align-items:flex-start;padding:10px 10px;border-radius:12px;
  transition:background .15s;
}
.convite-item:hover{background:rgba(255,255,255,.03);}
.convite-item-ico{
  width:34px;height:34px;flex-shrink:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.24);
}
.convite-item b{
  display:block;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;
  color:rgba(240,240,240,.92);margin-bottom:3px;
}
.convite-item span{
  display:block;font-size:.755rem;line-height:1.6;color:rgba(240,240,240,.45);
}

.convite-acoes{display:flex;gap:10px;padding:14px 18px 0;}
.convite-nao{
  flex:0 0 auto;padding:13px 20px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  color:rgba(240,240,240,.55);font-family:'Inter',sans-serif;
  font-size:.9rem;font-weight:600;transition:background .15s,color .15s;
}
.convite-nao:hover{background:rgba(255,255,255,.09);color:var(--clr-text);}
.convite-modal .convite-sim{flex:1;}
.convite-modal .pm-note{padding:0 18px 18px;margin-top:10px;}
@media (prefers-reduced-motion:reduce){
  .convite-bg,.convite-modal{transition:none;}
}

/* A linha de criar grupo, travada. Ela CONTINUA VISÍVEL de propósito: esconder
   faria a pessoa achar que o produto não faz grupo. O cadeado diz que existe e
   que custa — e o clique abre o convite, não um "não". */
.sp-new-group-travada .sp-new-group-inp{cursor:pointer;border-style:dashed;
  border-color:rgba(168,85,247,.3);}
.sp-new-group-travada .sp-new-group-btn{background:rgba(168,85,247,.16);color:#d8b4fe;}
.sp-new-group-travada .sp-new-group-btn:hover{background:rgba(168,85,247,.3);}

/* ── O SELETOR DE ASSENTOS, DENTRO DO APP ────────────────────────────────
   Mesma peça do diálogo da landing, e de propósito: quem viu a pergunta lá e
   depois aqui precisa reconhecer que é a mesma compra. */
.pm-ent-assentos{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px 0 12px;}
.pm-ent-passo{width:40px;height:40px;border-radius:10px;border:1px solid rgba(168,85,247,.35);
  background:rgba(168,85,247,.12);color:#d8b4fe;font-size:1.15rem;cursor:pointer;line-height:1;}
.pm-ent-passo:hover{background:rgba(168,85,247,.26);}
.pm-ent-qtd{width:92px;height:40px;text-align:center;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#f5f5f7;
  font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:800;outline:none;
  /* As setinhas do type=number brigam com os botões ao lado — dois jeitos de
     fazer a mesma coisa, e o pequeno demais para acertar no toque. */
  -moz-appearance:textfield;appearance:textfield;}
.pm-ent-qtd::-webkit-outer-spin-button,
.pm-ent-qtd::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pm-ent-conta{text-align:center;font-size:.8rem;color:rgba(240,240,240,.55);margin-bottom:4px;}
.pm-ent-conta b{font-family:'Syne',sans-serif;font-size:1.3rem;color:#e9d5ff;letter-spacing:-.5px;}
.pm-ent-conta span{font-size:.72rem;color:rgba(240,240,240,.35);}

/* A porta para o Empresarial, dentro do modal do Premium. Um link, e não um
   terceiro cartão de preço: o Empresarial se explica por quantidade de gente,
   e enfileirá-lo com "mensal ou anual" transformaria uma escolha de dois numa
   de três, com uma delas pedindo outra pergunta. */
/* Acima da dobra, e com cara de CAIXA e não de rodapé: no pé do modal ela
   era invisível — o modal rola, e abaixo do botão de assinar não existe
   ninguém. Roxo discreto para não competir com o botão do Premium, que é o
   que a maioria veio comprar. */
.pm-porta-ent{background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.25);
  border-radius:11px;padding:11px 14px;margin-bottom:16px;text-align:center;}
.pm-link-ent{display:block;width:100%;background:none;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.84rem;font-weight:700;color:#d8b4fe;padding:2px 0 4px;}
.pm-link-ent:hover{color:#e9d5ff;text-decoration:underline;}
.pm-porta-ent span{display:block;font-size:.72rem;color:rgba(240,240,240,.4);line-height:1.5;}

/* ── A LISTA DE ASSENTOS ─────────────────────────────────────────────────
   Cada linha aqui é R$ 90 por mês. Por isso ela é uma LISTA legível, e não
   chips apertados: quem olha está conferindo uma fatura, e conferir fatura
   pede um nome por linha, com o botão de tirar longe do de dar. */
.pm-ent-add{display:flex;align-items:center;gap:8px;margin:4px 0 6px;}
.pm-ent-arroba{color:rgba(240,240,240,.35);font-size:.9rem;}
.pm-ent-inp{flex:1;min-width:0;height:38px;border-radius:10px;padding:0 12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#f5f5f7;font-family:'Inter',sans-serif;font-size:.85rem;outline:none;}
.pm-ent-inp:focus{border-color:rgba(168,85,247,.45);}
.pm-ent-btn{height:38px;padding:0 14px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;
  font-family:'Inter',sans-serif;font-size:.8rem;font-weight:700;white-space:nowrap;}
.pm-ent-btn:hover{opacity:.9;}
.pm-ent-btn:disabled{opacity:.5;cursor:default;}
.pm-ent-lista{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;}
.pm-ent-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);}
.pm-ent-quem{font-size:.84rem;color:#e9d5ff;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.pm-ent-tirar{background:none;border:1px solid rgba(239,68,68,.3);color:#fca5a5;
  border-radius:8px;padding:4px 10px;font-size:.72rem;cursor:pointer;
  font-family:'Inter',sans-serif;flex-shrink:0;}
.pm-ent-tirar:hover{background:rgba(239,68,68,.14);}
.pm-ent-tirar:disabled{opacity:.5;cursor:default;}
.pm-ent-vazio{padding:18px 14px;text-align:center;font-size:.79rem;
  color:rgba(240,240,240,.4);line-height:1.6;border-radius:10px;
  border:1px dashed rgba(255,255,255,.1);}

/* A ocupação abaixo do total: são dois números diferentes (o que a fatura
   cobra e quantas cadeiras estão ocupadas) e a tela tem de dizer os dois —
   mostrar só a ocupação faria quem tem 10 comprados e 3 ocupados estranhar a
   própria fatura, e estranhar fatura é o começo de uma contestação. */
.pm-ent-ocupacao{margin-top:6px;font-size:.72rem;color:rgba(240,240,240,.4);}
.pm-ent-link{background:none;border:0;padding:0;cursor:pointer;color:#d8b4fe;
  font-family:'Inter',sans-serif;font-size:.72rem;text-decoration:underline;}
.pm-ent-link:hover{color:#e9d5ff;}

/* ── O QUE O ANDAMENTO APONTA ─────────────────────────────────────────────
   Endereço e documento entram como fichas DEPOIS do texto: são anexo do fato,
   e não o fato. O documento não é copiado para cá — ele mora na aba
   Documentos, e a ficha aponta. Quando some de lá, a ficha diz. */
.cli-and-anexos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.cli-and-chip{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;cursor:pointer;
  padding:3px 9px 3px 7px;border-radius:20px;text-decoration:none;
  background:rgba(34,211,238,.09);border:1px solid rgba(34,211,238,.22);
  color:rgba(165,243,252,.9);font-family:'Inter',sans-serif;font-size:.67rem;font-weight:500;
  transition:background .14s,border-color .14s;
}
.cli-and-chip:hover{background:rgba(34,211,238,.18);border-color:rgba(34,211,238,.4);}
.cli-and-chip svg{width:11px;height:11px;flex-shrink:0;opacity:.85;}
.cli-and-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* O ícone é o único filho que não pode encolher: o nome do arquivo é que corta
   com reticências quando a ficha não cabe. */
.cli-and-chip-ico{display:inline-flex;flex-shrink:0;overflow:visible;}
/* Documento que saiu da aba Documentos: a ficha fica, riscada, porque o
   andamento afirma que apontava para algo — apagar a ficha apagaria o fato. */
.cli-and-chip.sumiu{
  background:rgba(255,255,255,.03);border-color:var(--clr-border);
  color:rgba(240,240,240,.32);text-decoration:line-through;
}
.cli-and-dica{
  font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.3);
  line-height:1.5;margin-top:-2px;
}

/* O seletor de documento e o envio, lado a lado: o campo continua habilitado
   mesmo sem arquivo nenhum, e a porta de enviar fica ao lado — mandar a pessoa
   para outra aba no meio de um formulário aberto é perder o que ela digitou. */
/* O seletor OCUPA A LINHA e o envio fica embaixo, alinhado à direita. Lado a
   lado, os dois disputavam a mesma largura: o `<select>` estreitava e o
   navegador cortava o texto da opção no meio — e a altura de um `<label>`
   nunca casa com a de um `<select>` sem número mágico. Embaixo, cada um tem a
   sua largura e a ação fica onde o olho já terminou de ler o campo. */
.cli-and-doc-linha{display:flex;flex-direction:column;gap:6px;}
.cli-and-doc-linha .m-inp{width:100%;}
.cli-and-envio{
  align-self:flex-end;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  position:relative;padding:6px 12px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.6);font-family:'Inter',sans-serif;font-size:.72rem;
  font-weight:600;white-space:nowrap;transition:background .14s,border-color .14s,color .14s;
}
.cli-and-envio:hover{
  background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.34);color:rgba(165,243,252,.95);
}
.cli-and-envio.enviando{opacity:.6;pointer-events:none;}
.cli-and-envio svg{width:13px;height:13px;flex-shrink:0;}

/* ═══════════════════════════════════════════════════════════════════════
   AS REUNIÕES DO GRUPO
   ═══════════════════════════════════════════════════════════════════════
   Mesmo vocabulário visual do painel de permissões (cabeçalho com ícone
   redondo, cartões escuros, roxo do grupo), porque as duas telas saem do
   mesmo lugar e abrir uma depois da outra não pode parecer trocar de app. */
.reu-modal{width:min(680px,95vw);max-height:88dvh;display:flex;flex-direction:column;}
/* O cabeçalho carrega a AÇÃO. "Marcar reunião" morava num rodapé fixo embaixo,
   depois da lista inteira — o botão mais importante da tela era o último a ser
   encontrado, e num modal que rola ele competia com a última reunião. */
.reu-cab{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px;
  flex-shrink:0;border-bottom:1px solid var(--clr-border);}
.reu-cab-ico{
  width:52px;height:52px;flex-shrink:0;border-radius:15px;display:flex;
  align-items:center;justify-content:center;color:#ddd6fe;
  background:linear-gradient(145deg,rgba(168,85,247,.4),rgba(99,102,241,.22));
  border:1px solid rgba(168,85,247,.4);
  box-shadow:0 10px 26px rgba(124,58,237,.28),inset 0 1px 0 rgba(255,255,255,.12);
}
.reu-cab-ico svg{width:24px;height:24px;}
.reu-cab-txt{flex:1;min-width:0;}
.reu-cab .m-h1{margin:0;}
.reu-sub{font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.45);margin-top:4px;}
.reu-cab-acoes{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.reu-x{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.5);font-size:.9rem;line-height:1;
  transition:background .15s,color .15s,border-color .15s;
}
.reu-x:hover{background:rgba(255,255,255,.09);color:var(--clr-text);
  border-color:var(--clr-border-strong);}

.reu-corpo{overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;
  padding-right:4px;margin-right:-4px;}
.reu-secao{
  display:flex;align-items:center;gap:7px;
  font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(240,240,240,.42);margin-top:2px;
}
.reu-secao svg{width:13px;height:13px;flex-shrink:0;opacity:.75;}
.reu-carregando{font-family:'Inter',sans-serif;font-size:.78rem;color:rgba(240,240,240,.35);padding:18px 0;text-align:center;}

.reu-vazio{text-align:center;padding:36px 16px;}
.reu-vazio-ico{font-size:2.1rem;margin-bottom:10px;opacity:.6;}
.reu-vazio-tit{font-family:'Inter',sans-serif;font-size:.92rem;font-weight:700;color:var(--clr-text);}
.reu-vazio-sub{font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.45);
  margin:7px auto 0;line-height:1.6;max-width:340px;}

/* ── O CARTÃO É PARTIDO EM DOIS ───────────────────────────────────────────
   À esquerda, QUANDO. À direita, O QUÊ.

   Antes tudo era uma pilha de linhas do mesmo peso, e a data — que é a
   pergunta que se faz ao abrir a lista — vinha como mais uma frase cinza no
   topo. Agora ela tem coluna própria, fundo próprio e o horário no maior corpo
   do cartão: dá para varrer a lista inteira lendo só a faixa da esquerda, sem
   entrar em nenhum cartão. */
.reu-cartao{
  position:relative;display:flex;border-radius:16px;
  background:linear-gradient(160deg,#17171c,#131316);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.reu-cartao:hover{
  border-color:rgba(255,255,255,.14);transform:translateY(-1px);
  box-shadow:0 12px 30px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05);
}
.reu-cartao.encerrada{opacity:.5;}
@media (prefers-reduced-motion:reduce){.reu-cartao{transition:none;}.reu-cartao:hover{transform:none;}}

/* A COLUNA DO QUANDO */
.reu-data{
  flex:0 0 108px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;padding:16px 8px;text-align:center;
  border-radius:15px 0 0 15px;
  background:rgba(255,255,255,.022);
  border-right:1px solid rgba(255,255,255,.06);
}
.reu-data-ico{display:flex;color:rgba(167,139,250,.5);margin-bottom:2px;}
.reu-data-ico svg{width:16px;height:16px;}
.reu-data-dia{
  font-family:'Inter',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(240,240,240,.38);
}
/* O horário é o maior corpo do cartão de propósito: entre duas reuniões do
   mesmo dia, é a única coisa que decide qual é qual.

   Em Inter, e não no Syne da marca: o "1" do Syne tem serifa de pé e o "0" é
   quase oval, e a 1,5rem "14:00" chega a parecer outra coisa. Fonte de marca é
   para título — hora é dado, e dado precisa de algarismo sem opinião. */
.reu-data-hora{
  font-family:'Inter',sans-serif;font-size:1.45rem;font-weight:800;color:#fff;
  line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.reu-data-prazo{
  font-family:'Inter',sans-serif;font-size:.56rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#a5b4fc;
}
/* A que está acontecendo AGORA se distingue sem depender só da cor: ela ganha
   a coluna acesa, o rótulo escrito e o ponto que pulsa. */
.reu-cartao.agora{
  border-color:rgba(34,211,238,.4);
  box-shadow:0 6px 24px rgba(0,0,0,.45),0 0 0 1px rgba(34,211,238,.1);
}
.reu-cartao.agora .reu-data{
  background:linear-gradient(180deg,rgba(34,211,238,.14),rgba(34,211,238,.04));
  border-right-color:rgba(34,211,238,.28);
}
.reu-cartao.agora .reu-data-ico{color:rgba(103,232,249,.75);}
.reu-agora{display:inline-flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;
  font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#67e8f9;}
.reu-pulso{width:6px;height:6px;border-radius:50%;background:#22d3ee;flex-shrink:0;
  box-shadow:0 0 10px rgba(34,211,238,.9);animation:reuPulso 1.6s ease-in-out infinite;}
@keyframes reuPulso{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.8);}}
@media (prefers-reduced-motion:reduce){.reu-pulso{animation:none;}}

/* A COLUNA DO QUÊ */
.reu-miolo{flex:1;min-width:0;padding:14px 16px;}
.reu-topo{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px;}
.reu-cad{
  font-family:'Inter',sans-serif;font-size:.57rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 9px;border-radius:20px;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.35);color:#d8b4fe;
}
/* O "…" recolhe Editar e Excluir. Soltos no rodapé eles pesavam tanto quanto o
   "Vou" — e são ações de quem MARCOU a reunião, não de quem a lê. */
.reu-menu{
  margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;color:rgba(240,240,240,.5);
  font-size:1.05rem;line-height:1;transition:background .14s,color .14s,border-color .14s;
}
.reu-menu:hover{background:rgba(255,255,255,.07);border-color:var(--clr-border-strong);
  color:var(--clr-text);}
.reu-menu-pop{
  position:absolute;right:12px;top:44px;z-index:20;min-width:132px;padding:4px;
  background:#1c1c21;border:1px solid var(--clr-border-strong);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.7);
  animation:menuPop .15s cubic-bezier(.16,1,.3,1) both;
}
.reu-menu-item{
  display:block;width:100%;text-align:left;padding:8px 10px;border-radius:7px;
  background:none;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:500;
  color:rgba(240,240,240,.72);transition:background .14s,color .14s;
}
.reu-menu-item:hover{background:rgba(255,255,255,.07);color:var(--clr-text);}
.reu-menu-item.perigo{color:#fca5a5;}
.reu-menu-item.perigo:hover{background:rgba(239,68,68,.14);color:#fecaca;}

.reu-tit{font-family:'Inter',sans-serif;font-size:1.04rem;font-weight:700;color:#fff;
  line-height:1.3;letter-spacing:-.01em;}
.reu-pauta{font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(240,240,240,.45);
  line-height:1.5;margin:5px 0 0;white-space:pre-wrap;}

/* A CONTAGEM — uma linha só, com o ícone de gente na frente. */
.reu-conta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;
  font-family:'Inter',sans-serif;font-size:.72rem;}
.reu-conta-ico{display:flex;color:rgba(240,240,240,.3);flex-shrink:0;}
.reu-conta-ico svg{width:14px;height:14px;}
.reu-n{color:rgba(240,240,240,.42);}
.reu-n.vai{color:#6ee7b7;font-weight:600;}
.reu-n.nao{color:rgba(248,113,113,.8);}
.reu-n.talvez{color:#fcd34d;}
.reu-n.sem{color:rgba(240,240,240,.3);}

/* QUEM — etiqueta, pilha de iniciais e o excedente em "+N". */
.reu-gente{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:9px;}
.reu-gente-linha{display:flex;align-items:center;gap:8px;min-width:0;}
.reu-gente-rot{
  font-family:'Inter',sans-serif;font-size:.55rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;flex-shrink:0;color:rgba(240,240,240,.35);
}
.reu-gente-rot.vai{color:#6ee7b7;}
.reu-gente-rot.talvez{color:#fcd34d;}
.reu-gente-rot.nao{color:#fca5a5;}
.reu-avs{display:flex;flex-shrink:0;align-items:center;}
.reu-av{
  width:26px;height:26px;border-radius:50%;margin-left:-6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Inter',sans-serif;font-size:.62rem;font-weight:800;color:#fff;
  border:2px solid transparent;
  background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 0 0 2px #17171c;
}
.reu-av:first-child{margin-left:0;}
.reu-av.vai{background:linear-gradient(135deg,#10b981,#059669);}
.reu-av.talvez{background:linear-gradient(135deg,#f59e0b,#d97706);}
.reu-av.nao{background:linear-gradient(135deg,#ef4444,#b91c1c);}
.reu-av.sem{background:rgba(255,255,255,.09);color:rgba(240,240,240,.5);}
/* Quem tem foto mostra a FOTO — e a cor do grupo passa para o anel, porque é
   ela que diz se a pessoa vai ou não vai. Perder a cor ao ganhar a foto seria
   trocar uma informação por outra em vez de somar as duas. */
.reu-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.reu-av.com-foto{background:none;}
.reu-av.com-foto.vai{border-color:#10b981;}
.reu-av.com-foto.talvez{border-color:#f59e0b;}
.reu-av.com-foto.nao{border-color:#ef4444;}
.reu-av.com-foto.sem{border-color:rgba(255,255,255,.22);}
.reu-av-mais{
  margin-left:5px;flex-shrink:0;font-family:'Inter',sans-serif;font-size:.65rem;
  font-weight:700;color:rgba(240,240,240,.4);font-variant-numeric:tabular-nums;
}
/* Os @ escritos continuam: uma bolinha "A" que só se revela no hover não serve
   para quem está no celular, e duas pessoas com a mesma inicial é o caso
   comum. Decisão de 12/08/2026, guardada por teste. */
.reu-gente-nomes{
  font-family:'Inter',sans-serif;font-size:.7rem;color:rgba(240,240,240,.38);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── A RESPOSTA ───────────────────────────────────────────────────────────
   Cada botão carrega a cor do que ele diz mesmo sem estar escolhido — o verde
   do "Vou" é o que faz a ação ser encontrada sem ler. Escolhido, ele enche. */
.reu-pe{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap;}
.reu-resp{display:inline-flex;gap:7px;flex-wrap:wrap;}
.reu-resp-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;padding:7px 14px;
  border-radius:9px;cursor:pointer;background:rgba(255,255,255,.03);
  border:1px solid var(--clr-border-strong);color:rgba(240,240,240,.5);
  transition:background .14s,color .14s,border-color .14s,box-shadow .14s;
}
.reu-resp-btn i{font-style:normal;font-size:.8rem;line-height:1;opacity:.9;}
.reu-resp-btn:hover{background:rgba(255,255,255,.07);color:var(--clr-text);}
.reu-resp-btn.r-vou{color:#6ee7b7;border-color:rgba(16,185,129,.35);
  background:rgba(16,185,129,.08);}
.reu-resp-btn.r-vou:hover{background:rgba(16,185,129,.16);border-color:rgba(16,185,129,.5);}
.reu-resp-btn.escolhido{color:#fff;font-weight:700;}
.reu-resp-btn.r-vou.escolhido{background:linear-gradient(135deg,#10b981,#059669);
  border-color:rgba(16,185,129,.6);box-shadow:0 4px 14px rgba(16,185,129,.35);}
.reu-resp-btn.r-talvez.escolhido{background:linear-gradient(135deg,#f59e0b,#d97706);
  border-color:rgba(245,158,11,.6);box-shadow:0 4px 14px rgba(245,158,11,.3);}
.reu-resp-btn.r-nao.escolhido{background:linear-gradient(135deg,#ef4444,#dc2626);
  border-color:rgba(239,68,68,.6);box-shadow:0 4px 14px rgba(239,68,68,.3);}

.reu-autor{font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.26);
  margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* O botão de marcar vive no CABEÇALHO. */
.reu-marcar{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;color:#fff;
  padding:10px 17px;border-radius:11px;border:1px solid rgba(129,140,248,.5);
  background:linear-gradient(135deg,#7c6cf5,#4f46e5);
  box-shadow:0 8px 22px rgba(79,70,229,.35);
  transition:filter .15s,box-shadow .15s,transform .15s;
}
.reu-marcar:hover{filter:brightness(1.12);transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(79,70,229,.5);}
.reu-marcar span:first-child{font-size:.95rem;line-height:1;opacity:.9;}
@media (prefers-reduced-motion:reduce){.reu-marcar:hover{transform:none;}}

.reu-form{width:min(520px,94vw);}
.reu-campo{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;}
.reu-lbl{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(240,240,240,.35);}
.reu-linha{display:flex;gap:10px;margin-top:10px;}
.reu-form .reu-campo + .reu-campo{margin-top:0;}
.reu-form > .reu-campo{margin-top:10px;}
.reu-area{resize:vertical;min-height:64px;font-family:'Inter',sans-serif;}
.reu-explica{font-family:'Inter',sans-serif;font-size:.7rem;color:rgba(196,181,253,.65);margin-top:9px;}

/* No toque o alvo tem de passar de 40px (§4.1 do checklist) — medido, não
   estimado: com 7px de padding o botão de resposta não chega lá, e "quase 40"
   passa por certo em quem só olha.

   O `.reu-x` só engorda AQUI de propósito: no desktop ele tem de continuar
   idêntico ao `.perm-x`, que é a mesma peça na tela irmã. */
@media (max-width:768px){
  .reu-resp-btn{padding:12px 16px;}
  .reu-menu{width:40px;height:40px;}
  .reu-marcar{padding:12px 18px;}
  .reu-x{width:40px;height:40px;}
  .reu-cab-txt .m-h1{font-size:1.2rem;}
}
/* ── ESTREITO: A COLUNA DEITA ────────────────────────────────────────────
   Com 108px fixos à esquerda e o resto num celular, o miolo ficava com menos
   de 200px e o título quebrava em quatro linhas. Aí a coluna vira FAIXA no
   topo do cartão — mesma informação, mesma ordem de leitura, deitada. */
@media (max-width:560px){
  .reu-linha{flex-direction:column;gap:10px;}
  /* O cabeçalho vira DUAS fileiras. Com o botão e o ✕ disputando a linha do
     título, "Reuniões do grupo" quebrava em três linhas e a frase de baixo em
     cinco — o título ficava com menos largura que o botão ao lado dele. */
  .reu-cab{flex-wrap:wrap;gap:12px;}
  .reu-cab-ico{width:44px;height:44px;border-radius:13px;}
  .reu-cab-ico svg{width:21px;height:21px;}
  .reu-cab-acoes{order:3;width:100%;}
  .reu-marcar{flex:1;justify-content:center;}
  .reu-cartao{flex-direction:column;}
  .reu-data{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;align-items:baseline;
    gap:9px;padding:11px 14px;text-align:left;
    border-radius:15px 15px 0 0;
    border-right:none;border-bottom:1px solid rgba(255,255,255,.06);
  }
  .reu-cartao.agora .reu-data{border-right-color:transparent;
    border-bottom-color:rgba(34,211,238,.28);}
  .reu-data-ico{display:none;}
  .reu-data-hora{font-size:1.18rem;}
  .reu-data-prazo,.reu-agora{margin-left:auto;}
  .reu-miolo{padding:13px 14px;}
  .reu-tit{font-size:.97rem;}
  .reu-menu-pop{right:10px;top:auto;}
  .reu-resp{width:100%;}
  .reu-resp-btn{flex:1;justify-content:center;padding:12px 6px;font-size:.76rem;}
  .reu-autor{margin-left:0;width:100%;}
}

/* ═══════════════════════════════════════════════════════════════════════
   O AVISO DE REUNIÃO — no meio da tela
   ═══════════════════════════════════════════════════════════════════════
   Mesma moldura do convite de grupo (`premium-modal-bg` + `convite-modal`),
   de propósito: duas telas centrais com aparências diferentes pareceriam dois
   aplicativos. O que muda é o miolo — aqui o que importa é a DATA, e ela
   ganha o maior corpo da tela. */
.reu-aviso-bg{opacity:0;transition:opacity .2s;}
.reu-aviso-bg.visivel{opacity:1;}
.reu-aviso{transform:scale(.97);transition:transform .22s cubic-bezier(.16,1,.3,1);}
.reu-aviso-bg.visivel .reu-aviso{transform:scale(1);}
.reu-aviso-av{background:linear-gradient(135deg,#818cf8,#4f46e5);}
.reu-aviso-av svg{width:28px;height:28px;color:#fff;}
.reu-aviso-tit{margin-top:2px;}

.reu-aviso-quando{
  padding:20px 28px;text-align:center;border-bottom:1px solid rgba(255,255,255,.07);
}
.reu-aviso-data{
  font-family:'Syne',sans-serif;font-size:1.18rem;font-weight:700;color:#c7d2fe;
  line-height:1.3;
}
.reu-aviso-grupo{
  font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.35);margin-top:5px;
}

.reu-aviso-btns{display:flex;gap:10px;padding:18px 28px 24px;}
.reu-aviso-vou,.reu-aviso-ver{
  flex:1;padding:11px;border-radius:12px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.84rem;font-weight:600;
  transition:filter .15s,background .15s,border-color .15s;
}
/* "Vou" é a ação, e por isso é a cheia: quem leu a data já sabe se vai, e
   resolver ali evita a viagem até a lista. */
.reu-aviso-vou{border:1px solid rgba(129,140,248,.5);color:#fff;
  background:linear-gradient(135deg,#6366f1,#4f46e5);}
.reu-aviso-vou:hover{filter:brightness(1.1);}
.reu-aviso-vou:disabled{opacity:.6;cursor:default;}
.reu-aviso-ver{border:1px solid var(--clr-border);color:rgba(240,240,240,.6);
  background:rgba(255,255,255,.04);}
.reu-aviso-ver:hover{background:rgba(255,255,255,.09);color:var(--clr-text);}

/* Online ou presencial: a etiqueta no topo do cartão, ao lado da cadência. */
.reu-modo{
  font-family:'Inter',sans-serif;font-size:.57rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 9px;border-radius:20px;
  background:rgba(20,184,166,.14);border:1px solid rgba(20,184,166,.35);color:#5eead4;
}
/* Presencial em âmbar: são naturezas diferentes, e a cor é o que faz a
   diferença ser notada de relance numa lista de dez reuniões. */
.reu-modo.presencial{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.36);color:#fcd34d;}

.reu-onde{display:flex;align-items:center;gap:7px;margin-top:7px;min-width:0;}
.reu-onde-ico{display:inline-flex;flex-shrink:0;color:rgba(240,240,240,.5);}
.reu-onde-ico svg{width:14px;height:14px;}
.reu-onde-txt,.reu-onde-link{
  font-family:'Inter',sans-serif;font-size:.76rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.reu-onde-txt{color:rgba(240,240,240,.58);}
.reu-onde-link{color:#7dd3fc;text-decoration:none;font-weight:600;}
.reu-onde-link:hover{text-decoration:underline;}

/* Os dois botões do formulário: escolha de dois, sem lista fechada. */
.reu-modos{display:flex;gap:8px;}
.reu-modo-btn{
  flex:1;padding:9px;border-radius:10px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;
  background:rgba(255,255,255,.03);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.5);transition:all .15s;
}
.reu-modo-btn:hover{background:rgba(255,255,255,.07);color:var(--clr-text);}
.reu-modo-btn.escolhido{
  background:rgba(99,102,241,.2);border-color:rgba(129,140,248,.55);color:#c7d2fe;
}

/* A lixeira da nota se anuncia ANTES do clique. O ✕ da nota que está numa
   pasta — que só a devolve para lá — continua neutro: dois gestos, dois
   desenhos, duas cores. */
.n-del.perigo:hover{background:rgba(239,68,68,.22);color:#fecaca;}

/* ═══════════════════════════════════════════════════════════════════════
   QUALIDADE DE VIDA — 20/08/2026
   Menção, reação, histórico, não perturbe, gaveta de atividade e favoritas.
   Tudo reaproveita as variáveis e os tons que o resto do app já usa; nenhuma
   cor nova foi inventada para não abrir um segundo tema por engano.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── O @ dentro do comentário ─────────────────────────────────────────
   Discreto quando é outra pessoa, e âmbar quando sou eu: a menção existe para
   ser encontrada em meio a texto, e o olho precisa achá-la sem ler a frase. */
.n-coment-mencao{
  color:#a5b4fc;font-weight:600;
  background:rgba(99,102,241,.14);border-radius:4px;padding:0 3px;
}
.n-coment-mencao.eu{
  color:#fcd34d;background:rgba(245,158,11,.18);
}
/* O comentário que a notificação veio mostrar. Pulso único, não laço: aviso
   contínuo vira ruído de fundo e a pessoa deixa de vê-lo. */
.n-coment-item.mencionado{
  animation:coment-acende 2.4s ease-out 1;
}
@keyframes coment-acende{
  0%,55%{background:rgba(245,158,11,.28);box-shadow:0 0 0 1px rgba(245,158,11,.5);}
  100%{background:rgba(255,255,255,.04);box-shadow:none;}
}

/* ── A lista de @ ao digitar ──────────────────────────────────────────── */
.mencao-pop{
  position:fixed;z-index:10050;width:222px;max-height:220px;overflow-y:auto;
  background:#161622;border:1px solid var(--clr-border);border-radius:10px;
  box-shadow:0 18px 46px rgba(0,0,0,.6);padding:4px;
}
.mencao-item{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:5px 8px;border:none;background:none;border-radius:7px;cursor:pointer;
  font-family:'Inter',sans-serif;text-align:left;transition:background .12s;
}
.mencao-item:hover,.mencao-item:focus-visible{background:rgba(99,102,241,.18);}
.mencao-item b{color:#c7d2fe;font-size:.75rem;font-weight:600;}
.mencao-item span{color:rgba(240,240,240,.45);font-size:.68rem;}

/* ── Reações ──────────────────────────────────────────────────────────
   A régua vive apagada e só acende ao passar o ponteiro pelo comentário: cinco
   emojis permanentes em cada linha transformariam a conversa num teclado. O
   sinal que JÁ tem gente fica visível sempre — ele é informação, não controle. */
.n-coment-reacoes{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap;}
.n-reacao{
  border:1px solid transparent;background:rgba(255,255,255,.05);
  border-radius:20px;padding:1px 6px;cursor:pointer;line-height:1.5;
  font-family:'Inter',sans-serif;font-size:.67rem;color:rgba(240,240,240,.6);
  transition:opacity .15s,background .15s,border-color .15s;
}
.n-reacao.vazia{opacity:0;}
.n-coment-item:hover .n-reacao.vazia,
.n-reacao.vazia:focus-visible{opacity:.45;}
.n-reacao:hover{background:rgba(255,255,255,.12);opacity:1;}
.n-reacao.minha{
  background:rgba(99,102,241,.22);border-color:rgba(129,140,248,.5);color:#c7d2fe;
}

/* ── O ••• da nota e o menu dele ──────────────────────────────────────── */
.n-mais-btn{
  width:20px;height:20px;border:none;background:none;cursor:pointer;
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.2);transition:all .15s;flex-shrink:0;
  font-size:.62rem;letter-spacing:.5px;
}
.n-mais-btn:hover{background:rgba(255,255,255,.1);color:rgba(240,240,240,.75);}
.nota-menu{
  position:fixed;z-index:10050;min-width:186px;padding:4px;
  background:#161622;border:1px solid var(--clr-border);border-radius:10px;
  box-shadow:0 18px 46px rgba(0,0,0,.6);
}
.nota-menu-item{
  width:100%;text-align:left;padding:7px 10px;border:none;background:none;
  border-radius:7px;cursor:pointer;color:rgba(240,240,240,.8);
  font-family:'Inter',sans-serif;font-size:.75rem;transition:background .12s;
}
.nota-menu-item:hover{background:rgba(99,102,241,.18);color:var(--clr-text);}


/* ── O histórico ──────────────────────────────────────────────────────── */
.hist-pop{
  position:fixed;z-index:10050;width:274px;max-height:320px;overflow-y:auto;
  background:#161622;border:1px solid var(--clr-border);border-radius:11px;
  box-shadow:0 18px 46px rgba(0,0,0,.6);padding:8px;
}
.hist-cab{
  font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:rgba(240,240,240,.4);padding:2px 4px 7px;
}
.hist-vazio{
  font-family:'Inter',sans-serif;font-size:.72rem;
  color:rgba(240,240,240,.35);padding:4px 4px 8px;
}
.hist-lista{display:flex;flex-direction:column;gap:2px;}
.hist-item{
  display:flex;align-items:flex-start;gap:6px;
  padding:5px 6px;border-radius:7px;transition:background .12s;
}
.hist-item:hover{background:rgba(255,255,255,.05);}
.hist-txt{
  flex:1;min-width:0;font-family:'Inter',sans-serif;font-size:.72rem;
  color:rgba(240,240,240,.78);line-height:1.35;
}
.hist-hora{display:block;color:rgba(240,240,240,.33);font-size:.65rem;margin-top:1px;}
.hist-voltar{
  flex-shrink:0;border:none;background:rgba(255,255,255,.06);cursor:pointer;
  border-radius:6px;width:22px;height:22px;color:rgba(240,240,240,.5);
  font-size:.8rem;transition:all .15s;
}
.hist-voltar:hover{background:rgba(16,185,129,.2);color:#6ee7b7;}

/* ── A gaveta "Desde sua última visita" ───────────────────────────────── */
.gav-cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:wrap;
  padding:2px 10px 6px;font-family:'Inter',sans-serif;
  font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:rgba(240,240,240,.4);
}
/* O recorte precisa estar escrito na tela: sem isto a pessoa lê os números
   como se fossem da conta inteira, e eles são do quadro aberto. */
.gav-escopo{
  margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500;font-size:.64rem;
  color:rgba(240,240,240,.28);
}
.gav-resumo{display:flex;flex-direction:column;gap:2px;padding-bottom:4px;}
.gav-linha{
  display:flex;align-items:center;gap:7px;padding:3px 10px;
  font-family:'Inter',sans-serif;font-size:.74rem;color:rgba(240,240,240,.76);
}
.gav-linha.silenciada{color:rgba(240,240,240,.45);font-size:.7rem;}
.gav-ico{width:15px;text-align:center;flex-shrink:0;font-size:.75rem;}
.gav-vazio{
  padding:3px 10px 6px;font-family:'Inter',sans-serif;
  font-size:.73rem;color:rgba(240,240,240,.33);
}
.gav-sub{
  padding:7px 10px 3px;font-family:'Inter',sans-serif;font-size:.65rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(240,240,240,.32);
}
.gav-nota{
  width:100%;text-align:left;border:none;background:rgba(255,255,255,.04);
  border-radius:7px;padding:6px 10px;margin-top:3px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(240,240,240,.72);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all .15s;
}
.gav-nota:hover{background:rgba(99,102,241,.18);color:var(--clr-text);}
.gav-limpar{
  border:none;background:none;cursor:pointer;padding:4px 10px 0;
  font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.35);
}
.gav-limpar:hover{color:rgba(240,240,240,.7);text-decoration:underline;}



/* ═════════════════════════════════════════════════════════════════════════
   O PAINEL DE ATALHOS — DESENHO
   ═════════════════════════════════════════════════════════════════════════
   Segunda tentativa, e a primeira errou o alvo. Ela alinhou tudo e deu a cada
   item uma moldura própria — o resultado foi uma PILHA DE CAIXAS CINZAS, que é
   arrumado e feio ao mesmo tempo. Caixa dentro de caixa não organiza: só
   repete a borda do painel quinze vezes para dentro.

   A virada é tirar a moldura das linhas e devolver o peso ao ÍCONE. Cada ação
   ganha um chip colorido de 26px; a linha em volta é transparente até o mouse
   chegar. Assim a cor vem dos ícones (que são poucos e diferentes entre si) e
   não do fundo (que era o mesmo em tudo), e o olho encontra "Convidar" pelo
   verde-água antes de ler a palavra.

   Escopado em .atalhos-pop de ponta a ponta: os mesmos .t-btn e .dnd-btn vivem
   na barra, com outro tamanho e outra fila.
   ═════════════════════════════════════════════════════════════════════════ */
.atalhos-pop{
  min-width:272px;max-width:min(312px,calc(100vw - 16px));
  gap:1px;padding:8px;border-radius:16px;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(99,102,241,.13),transparent 62%),
    linear-gradient(180deg,#18181d 0%,#101013 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 28px 70px rgba(0,0,0,.7),0 3px 10px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
  max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
  /* Nasce no canto do botão que o abriu, e não no meio do nada. */
  transform-origin:top right;
  animation:atalhosEntra .26s cubic-bezier(.22,1.15,.36,1) both;
}
.atalhos-pop::-webkit-scrollbar{width:8px;}
.atalhos-pop::-webkit-scrollbar-track{background:transparent;}
.atalhos-pop::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.13);border-radius:99px;
  border:2px solid transparent;background-clip:content-box;
}
.atalhos-pop::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:content-box;}

@keyframes atalhosEntra{
  from{opacity:0;transform:translateY(-10px) scale(.94);}
  to{opacity:1;transform:none;}
}
@keyframes atalhosItem{
  from{opacity:0;transform:translateY(-7px);}
  to{opacity:1;transform:none;}
}
.atalhos-pop > *{animation:atalhosItem .28s cubic-bezier(.16,1,.3,1) both;}
.atalhos-pop > :nth-child(1){animation-delay:.02s}
.atalhos-pop > :nth-child(2){animation-delay:.04s}
.atalhos-pop > :nth-child(3){animation-delay:.06s}
.atalhos-pop > :nth-child(4){animation-delay:.08s}
.atalhos-pop > :nth-child(5){animation-delay:.1s}
.atalhos-pop > :nth-child(6){animation-delay:.12s}
.atalhos-pop > :nth-child(7){animation-delay:.14s}
.atalhos-pop > :nth-child(8){animation-delay:.16s}
.atalhos-pop > :nth-child(9){animation-delay:.18s}
.atalhos-pop > :nth-child(10){animation-delay:.2s}
.atalhos-pop > :nth-child(11){animation-delay:.22s}
.atalhos-pop > :nth-child(12){animation-delay:.24s}
.atalhos-pop > :nth-child(n+13){animation-delay:.26s}

/* ── AÇÕES: linha sem moldura, peso no chip do ícone ───────────────────── */
.atalhos-pop .t-btn{
  position:relative;width:100%;height:42px;
  justify-content:flex-start;gap:11px;padding:0 9px;
  border:1px solid transparent;border-radius:11px;background:none;
  font-size:.8rem;font-weight:500;color:rgba(240,240,240,.82);
  transition:background .17s,color .17s,border-color .17s;
}
/* O chip: o SVG vira a caixa. 26px de alvo colorido é o que dá ritmo à lista
   e o que faz achar a opção pela cor antes de ler a palavra. */
.atalhos-pop .t-btn svg{
  width:26px;height:26px;padding:6px;flex-shrink:0;
  border-radius:9px;background:rgba(255,255,255,.06);
  color:rgba(240,240,240,.62);opacity:1;
  transition:background .17s,color .17s,transform .17s;
}
.atalhos-pop .t-btn:hover{background:rgba(255,255,255,.055);color:#fff;}
.atalhos-pop .t-btn:hover svg{transform:scale(1.07);}
.atalhos-pop .t-btn:active{background:rgba(255,255,255,.085);}
.atalhos-pop .t-btn:active svg{transform:scale(.96);}
.atalhos-pop .t-btn:focus-visible{outline:2px solid var(--clr-indigo);outline-offset:1px;}

/* Cada ação tem a própria cor. São poucas e fixas, então é lista mesmo — e uma
   cor por função lê mais rápido do que um cinza para tudo. */
.atalhos-pop #btn-admin svg {background:rgba(99,102,241,.18);color:#a5b4fc;}
.atalhos-pop #btn-invite svg{background:rgba(20,184,166,.18);color:#5eead4;}
.atalhos-pop #btn-guia svg  {background:rgba(245,158,11,.17);color:#fcd34d;}
.atalhos-pop #btn-exit svg  {background:rgba(239,68,68,.16);color:#fca5a5;}
.atalhos-pop #btn-admin:hover svg {background:rgba(99,102,241,.3);}
.atalhos-pop #btn-invite:hover svg{background:rgba(20,184,166,.3);}
.atalhos-pop #btn-guia:hover svg  {background:rgba(245,158,11,.28);}

/* ── SEÇÕES: o título traz o próprio fio ───────────────────────────────── */
.atalhos-pop .gav-cab,
.atalhos-pop .dnd-cab{
  display:flex;align-items:center;gap:9px;
  margin:12px 10px 6px;padding:0;
  font-size:.615rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(240,240,240,.32);
}
.atalhos-pop .gav-cab::after,
.atalhos-pop .dnd-cab::after{
  content:"";order:2;flex:1;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.1),transparent);
}
.atalhos-pop .gav-escopo,
.atalhos-pop .dnd-estado{
  order:3;margin-left:0;flex-shrink:0;
  font-size:.615rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:rgba(240,240,240,.28);
}
.atalhos-pop .dnd-estado.ativo{color:#c4b5fd;}
/* Com o título trazendo o fio, o separador antes dele seria o segundo traço
   seguido. Some só nesses dois casos. */
.atalhos-pop .atalhos-sep:has(+ .gav-cab),
.atalhos-pop .atalhos-sep:has(+ .dnd-bloco){display:none;}
.atalhos-pop .atalhos-sep{
  height:1px;margin:6px 10px;background:none;
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}

/* O conteúdo de cada seção assenta num cartão de fundo quase nulo: o
   suficiente para dizer "isto anda junto", sem virar mais uma caixa. */
.atalhos-pop .gav-resumo,
.atalhos-pop .dnd-bloco{
  margin:0 2px;padding:9px 10px;border-radius:12px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.04);
}
.atalhos-pop .gav-linha{padding:3px 0;gap:9px;font-size:.755rem;color:rgba(240,240,240,.8);}
.atalhos-pop .gav-ico{width:17px;font-size:.8rem;opacity:.9;}
.atalhos-pop .gav-vazio{padding:1px 0;font-size:.74rem;color:rgba(240,240,240,.34);}
.atalhos-pop .gav-sub{padding:9px 0 3px;font-size:.6rem;letter-spacing:.1em;color:rgba(240,240,240,.3);}
.atalhos-pop .gav-nota{
  display:flex;align-items:center;height:32px;
  margin-top:6px;padding:0 10px;border-radius:9px;
  background:rgba(255,255,255,.045);border:1px solid transparent;
  font-size:.735rem;
  transition:background .17s,border-color .17s,color .17s,transform .14s;
}
.atalhos-pop .gav-nota:hover{
  background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.3);
  color:#fff;transform:translateX(2px);
}
.atalhos-pop .gav-limpar{padding:7px 0 0;font-size:.7rem;}

/* Os três prazos do silêncio são UMA escolha, e não três botões soltos.
   Encostados num trilho só, com o aceso preenchido, a pergunta que a tela
   responde vira "qual está ligado" em vez de "quais existem". */
.atalhos-pop .dnd-botoes{
  display:flex;gap:0;flex-wrap:nowrap;margin-top:9px;padding:2px;
  border-radius:10px;background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.045);
}
.atalhos-pop .dnd-btn{
  flex:1 1 auto;min-width:max-content;height:28px;padding:0 6px;
  border:none;border-radius:8px;background:none;
  font-size:.7rem;color:rgba(240,240,240,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .17s,color .17s;
}
.atalhos-pop .dnd-btn:hover{background:rgba(255,255,255,.07);color:#fff;}
.atalhos-pop .dnd-btn.ativo{
  background:linear-gradient(180deg,rgba(99,102,241,.5),rgba(99,102,241,.32));
  color:#e0e7ff;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.atalhos-pop .dnd-btn.off{flex:0 0 auto;padding:0 10px;color:rgba(252,165,165,.75);}
.atalhos-pop .dnd-btn.off:hover{background:rgba(239,68,68,.14);color:#fca5a5;}

/* ── A LINHA DO IDIOMA, NA PRIMEIRA PRATELEIRA ─────────────────────────
   Duas coisas que só apareceram depois de ela subir para o topo:

   ORDEM. A barra arrastável deixa soltar botões dentro do painel, e eles
   entram no começo do HTML — passavam na frente justamente da linha que
   precisa ser a primeira. Ordem negativa resolve em tempo de execução, que é
   quando esses botões chegam.

   PILHA. O menu do idioma abre PARA BAIXO. No fim do painel ele abria sobre o
   nada; na primeira prateleira, abre sobre as ações — e as ações são
   `position:relative`, então disputam pintura com ele e ganhavam: o "Admin" e
   o "Convidar" apareciam ATRAVÉS da lista de idiomas. Levantar a linha inteira
   resolve os dois lados de uma vez, o gatilho e o menu juntos. */
.atalhos-pop #linha-idioma{order:-2;position:relative;z-index:2000;}
.atalhos-pop #linha-idioma + .atalhos-sep{order:-1;}

/* ── AJUSTES: rótulo + pastilha, peso baixo ────────────────────────────── */
.atalhos-pop .atalhos-linha{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:42px;padding:0 9px;border-radius:11px;
  transition:background .17s;
}
.atalhos-pop .atalhos-linha:hover{background:rgba(255,255,255,.04);}
.atalhos-pop .atalhos-rot{font-size:.8rem;font-weight:500;color:rgba(240,240,240,.6);}
/* A pastilha diz "isto se clica" sem competir com as ações lá de cima: o
   contorno é dela, o preenchimento só aparece quando a opção está ligada. */
.atalhos-pop .atalhos-linha .t-btn{
  flex:0 0 auto;width:auto;height:28px;padding:0 13px;
  border-radius:99px;font-size:.72rem;font-weight:500;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(240,240,240,.78);
}
.atalhos-pop .atalhos-linha .t-btn:hover{background:rgba(255,255,255,.11);color:#fff;}
.atalhos-pop .atalhos-linha .t-btn:active{transform:scale(.96);}
.atalhos-pop .atalhos-linha .t-btn[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(99,102,241,.42),rgba(99,102,241,.26));
  border-color:rgba(99,102,241,.5);color:#e0e7ff;
}

/* O Sair é o único que encerra alguma coisa: fica no fim por ORDEM, porque a
   barra arrastável solta botões aqui em tempo de execução e eles caíam depois
   dele. O vermelho mora no chip; a linha só acende ao passar o mouse. */
.atalhos-pop .atalhos-sair{order:99;margin-top:2px;color:rgba(252,165,165,.9);}
.atalhos-pop .atalhos-sair:hover{background:rgba(239,68,68,.13);color:#fecaca;}
.atalhos-pop .atalhos-sair:hover svg{background:rgba(239,68,68,.3);color:#fecaca;}
/* "Restaurar barra padrão" vem de outro módulo — a barra arrastável — como um
   div de desenho próprio, sem ícone e sem a classe das ações. É rodapé, e não
   ação: entra em ordem 97 (depois de tudo, antes do separador e do Sair) e num
   tom mais baixo, para não disputar atenção com quem tem chip. */
.atalhos-pop .barra-rodape{order:97;margin-top:6px;}
.atalhos-pop .barra-restaurar{
  height:32px;border-radius:10px;font-size:.71rem;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  color:rgba(240,240,240,.5);
}
.atalhos-pop .barra-restaurar:hover{background:rgba(255,255,255,.075);color:rgba(240,240,240,.82);}
.atalhos-pop .barra-dica{font-size:.66rem;padding:4px 6px 2px;border-top:none;}
.atalhos-pop .atalhos-sep-fim{order:98;}

@media (prefers-reduced-motion:reduce){
  .atalhos-pop,.atalhos-pop > *{animation:none !important;}
  .atalhos-pop .t-btn:hover,.atalhos-pop .gav-nota:hover{transform:none;}
  .atalhos-pop .t-btn:hover svg,.atalhos-pop .t-btn:active svg{transform:none;}
}

/* ── Não perturbe ─────────────────────────────────────────────────────── */
.dnd-bloco{padding:2px 10px 4px;}
.dnd-cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:rgba(240,240,240,.4);padding-bottom:6px;
}
.dnd-estado{
  text-transform:none;letter-spacing:0;font-weight:500;font-size:.64rem;
  color:rgba(240,240,240,.28);
}
.dnd-estado.ativo{color:#c4b5fd;}
.dnd-botoes{display:flex;gap:4px;flex-wrap:wrap;}
.dnd-btn{
  flex:1 1 auto;min-width:56px;padding:5px 7px;border-radius:7px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
  color:rgba(240,240,240,.5);transition:all .15s;
}
.dnd-btn:hover{background:rgba(255,255,255,.09);color:var(--clr-text);}
.dnd-btn.ativo{
  background:rgba(139,92,246,.24);border-color:rgba(167,139,250,.55);color:#ddd6fe;
}
.dnd-btn.off{
  flex-basis:100%;background:none;border-color:transparent;
  color:rgba(240,240,240,.35);
}
.dnd-btn.off:hover{color:#fca5a5;background:rgba(239,68,68,.1);}

/* O botão da barra avisa que a conta está em silêncio. Sem isto, quem ligou o
   modo e esqueceu acharia que o app parou de receber. */
#btn-atalhos.dnd-ligado{
  border-color:rgba(167,139,250,.45);color:#ddd6fe;
}
#btn-atalhos.dnd-ligado::after{
  content:'🌙';font-size:.66rem;margin-left:4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSULTA DE PROCESSO NO CNJ (DataJud) — 24/08/2026
   Só aparece na aba Processos, que só existe no segmento jurídico.
   Âmbar em vez do ciano do CRM: o que vem de fora precisa se distinguir do
   que o escritório escreveu, e a cor faz isso antes da leitura.
   ═══════════════════════════════════════════════════════════════════════ */
.cli-cnj{grid-column:1/-1;margin:-4px 0 2px;}
.cli-cnj-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.cli-cnj-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 11px;border-radius:8px;background:rgba(245,158,11,.09);
  border:1px solid rgba(245,158,11,.28);font-family:'Inter',sans-serif;
  font-size:.71rem;font-weight:600;color:#fcd34d;transition:all .14s;
}
.cli-cnj-btn:hover:not(:disabled){background:rgba(245,158,11,.17);border-color:rgba(245,158,11,.45);}
.cli-cnj-btn:disabled{opacity:.4;cursor:default;}

/* A dica ao lado do botão: quantos dígitos faltam, ou o tribunal que o número
   revela. É o retorno que evita a viagem à rede para descobrir um erro de
   digitação. */
.cli-cnj-dica{
  font-family:'Inter',sans-serif;font-size:.68rem;letter-spacing:.02em;
  color:rgba(240,240,240,.3);
}
.cli-cnj-dica[data-s="bom"]{color:#6ee7b7;font-weight:600;}
.cli-cnj-dica[data-s="ruim"]{color:var(--clr-danger-light,#fca5a5);}

.cli-cnj-res{
  margin-top:8px;padding:10px 12px;border-radius:10px;
  background:rgba(245,158,11,.05);border:1px solid rgba(245,158,11,.18);
}
.cli-cnj-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px;}
.cli-cnj-trib{
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;color:#fcd34d;
}
.cli-cnj-grau{
  font-family:'Inter',sans-serif;font-size:.66rem;padding:1px 7px;border-radius:20px;
  background:rgba(255,255,255,.06);color:rgba(240,240,240,.55);
}
.cli-cnj-linha{display:flex;gap:8px;padding:2px 0;font-family:'Inter',sans-serif;font-size:.72rem;}
.cli-cnj-rot{flex-shrink:0;min-width:86px;color:rgba(240,240,240,.35);}
.cli-cnj-val{color:rgba(240,240,240,.8);line-height:1.45;}
.cli-cnj-movs{
  margin-top:7px;font-family:'Inter',sans-serif;font-size:.7rem;color:#6ee7b7;
}
.cli-cnj-aviso{
  margin-top:6px;font-family:'Inter',sans-serif;font-size:.68rem;
  color:rgba(240,240,240,.4);line-height:1.5;
}
.cli-cnj-erro{
  font-family:'Inter',sans-serif;font-size:.72rem;line-height:1.5;
  color:var(--clr-danger-light,#fca5a5);
}

/* ── O SELO DA DATA DA BASE ────────────────────────────────────────────
   A regra mais importante deste bloco. A base do CNJ é carga mensal e chega a
   estar seis semanas atrás; sem esta data à vista, "nenhum movimento novo" é
   lido como "não há prazo correndo". Discreto, mas nunca ausente. */
.cli-cnj-selo{
  font-family:'Inter',sans-serif;font-size:.63rem;letter-spacing:.02em;
  padding:2px 7px;border-radius:20px;cursor:help;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.22);color:#fcd34d;
}

.cli-cnj-att{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  padding:3px 9px;border-radius:8px;background:none;border:1px solid var(--clr-border);
  font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.45);
  transition:all .14s;
}
.cli-cnj-att:hover:not(:disabled){color:#fcd34d;border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.07);}
.cli-cnj-att:disabled{opacity:.5;cursor:default;}
.cli-cnj-att.girando svg{animation:cli-cnj-gira .9s linear infinite;}
@keyframes cli-cnj-gira{to{transform:rotate(360deg);}}

/* O movimento oficial na trilha: mesmo lugar, outra origem. Ponto âmbar em vez
   do ciano, e sem os botões de editar e excluir — que o JS já não monta. */
.cli-and-item.cnj .cli-and-ponto{
  background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#fcd34d;
}
.cli-and-item.cnj .cli-and-tipo{color:rgba(252,211,77,.75);}

/* O cartão de movimentação processual é o MESMO `chat-notif` da mensagem de
   amigo — mesma onda, mesmo fio, mesma pausa. Só o âmbar muda, que é a cor
   de tudo que vem do CNJ nesta aba. */
.chat-notif.chat-notif-cnj .chat-notif-avatar{
  background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.4);
  color:#fcd34d;font-size:1.05rem;
}
.chat-notif.chat-notif-cnj .chat-notif-onda{background:rgba(245,158,11,.22);}
.chat-notif.chat-notif-cnj .chat-notif-arroba{
  color:rgba(252,211,77,.8);font-variant-numeric:tabular-nums;
}
.chat-notif.chat-notif-cnj .chat-notif-fio i{background:rgba(245,158,11,.55);}

/* O CARTÃO DO CNJ PRECISA CABER A FRASE INTEIRA.
   No aviso de mensagem, cortar com reticências é aceitável: a conversa está a
   um clique e o resto do texto está lá. Aqui o texto É a notícia — "Expedição
   de documento — Outros documentos" cortado em "Expedição de docu…" não diz
   nada, e o número do processo cortado não dá nem para conferir qual é. */
.chat-notif.chat-notif-cnj .chat-notif-name,
.chat-notif.chat-notif-cnj .chat-notif-text{
  white-space:normal;overflow:visible;text-overflow:clip;
}
.chat-notif.chat-notif-cnj .chat-notif-name{line-height:1.35;}
/* O número numa linha só, e só dele: quebrar 0847068-46.2026.8.10.0001 no
   meio torna impossível bater o olho e reconhecer o processo. */
.chat-notif.chat-notif-cnj .chat-notif-arroba{
  display:block;margin-top:2px;font-size:.72rem;white-space:nowrap;
}
/* Três linhas de movimento; o que passar disso é nome de ato que ninguém lê
   inteiro num aviso. */
.chat-notif.chat-notif-cnj .chat-notif-text{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* A LARGURA ERA O QUE FALTAVA. A pilha limitava TODO cartão a 340px, e num
   aviso de movimentação isso é pouco: depois do avatar, da data e do X sobram
   menos de 200px — e o número do processo sozinho tem 25 caracteres.

   O limite sai da PILHA e passa para cada cartão: o de mensagem fica
   exatamente como estava, e o do CNJ ganha o espaço de que precisa. */
#chat-notif-stack{max-width:none;align-items:flex-end;}
.chat-notif{max-width:340px;}
.chat-notif.chat-notif-cnj{
  width:430px;max-width:min(430px, calc(100vw - 48px));align-items:flex-start;
}
/* Com o cartão mais alto, o avatar e a data alinham pelo topo em vez de
   flutuarem no meio de três linhas de texto. */
.chat-notif.chat-notif-cnj .chat-notif-avatar{align-self:flex-start;}
/* A etiqueta que diz o que o cartão é. Sobrancelha curta e em caixa alta —
   ela se lê antes do nome sem competir com ele pela atenção. */
.chat-notif.chat-notif-cnj .chat-notif-etiqueta{
  font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(252,211,77,.72);margin-bottom:3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRAZOS DO PROCESSO — 24/08/2026
   Vários por processo, e a contagem em dias úteis a partir da publicação.
   ═══════════════════════════════════════════════════════════════════════ */
.cli-pz{grid-column:1/-1;margin:2px 0 4px;}
.cli-pz-cab{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.cli-pz-tit{
  font-family:'Inter',sans-serif;font-size:.63rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(240,240,240,.32);
}
.cli-pz-add{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  padding:3px 9px;border-radius:8px;background:none;border:1px solid var(--clr-border);
  font-family:'Inter',sans-serif;font-size:.68rem;color:rgba(240,240,240,.5);
  transition:all .14s;
}
.cli-pz-add:hover{color:var(--cli-teal);border-color:rgba(34,211,238,.32);background:rgba(34,211,238,.08);}
.cli-pz-lista{display:flex;flex-direction:column;gap:6px;}
.cli-pz-linha{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.cli-pz-feito{width:15px;height:15px;flex-shrink:0;cursor:pointer;accent-color:var(--cli-teal);}
.cli-pz-data{width:145px;flex-shrink:0;}
.cli-pz-nome{flex:1;min-width:130px;}
/* Cumprido continua legível — some da agenda, não da vista. */
.cli-pz-linha.feito .cli-pz-data,
.cli-pz-linha.feito .cli-pz-nome{opacity:.45;text-decoration:line-through;}
.cli-pz-tirar{
  flex-shrink:0;width:24px;height:24px;border:none;background:none;cursor:pointer;
  border-radius:6px;color:rgba(240,240,240,.3);font-size:.72rem;transition:all .14s;
}
.cli-pz-tirar:hover{background:rgba(239,68,68,.14);color:var(--clr-danger-light,#fca5a5);}
.cli-pz-origem{
  width:100%;padding-left:24px;font-family:'Inter',sans-serif;
  font-size:.66rem;color:rgba(240,240,240,.35);
}
.cli-pz-vazio{
  font-family:'Inter',sans-serif;font-size:.72rem;
  color:rgba(240,240,240,.28);padding:3px 0 2px;
}

/* A calculadora. Verde-água como o resto do CRM: ela é ferramenta da casa,
   e não dado vindo do CNJ (que é âmbar). */
.cli-pz-calc{
  margin-top:10px;padding:10px 12px;border-radius:10px;
  background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.16);
}
.cli-pz-calc-tit{
  font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;
  color:rgba(34,211,238,.75);margin-bottom:7px;
}
.cli-pz-calc-linha{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.cli-pz-calc-pub{flex:1;min-width:190px;}
.cli-pz-calc-dias{width:74px;flex-shrink:0;}
.cli-pz-calc-atalhos{display:flex;gap:4px;}
.cli-pz-chip{
  padding:3px 8px;border-radius:7px;cursor:pointer;border:1px solid var(--clr-border);
  background:rgba(255,255,255,.04);font-family:'Inter',sans-serif;
  font-size:.68rem;color:rgba(240,240,240,.55);transition:all .14s;
}
.cli-pz-chip:hover{color:var(--cli-teal);border-color:rgba(34,211,238,.35);}
.cli-pz-calc-saida{
  margin-top:8px;font-family:'Inter',sans-serif;font-size:.85rem;
  color:var(--clr-text);
}
.cli-pz-calc-rel{font-size:.72rem;color:rgba(240,240,240,.45);}
/* De onde a conta partiu. Não é ressalva — é a origem do número, e por isso
   vem em cinza de texto e não em amarelo de alerta. */
.cli-pz-calc-nota{
  margin-top:5px;font-family:'Inter',sans-serif;font-size:.67rem;line-height:1.5;
  color:rgba(240,240,240,.5);
}
/* A ressalva não é rodapé: ela decide se a pessoa vai conferir no tribunal. */
.cli-pz-calc-aviso{
  margin-top:5px;font-family:'Inter',sans-serif;font-size:.67rem;line-height:1.5;
  color:rgba(252,211,77,.72);
}
.cli-pz-calc-usar{
  margin-top:8px;padding:5px 12px;border-radius:8px;cursor:pointer;
  background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.34);
  font-family:'Inter',sans-serif;font-size:.71rem;font-weight:600;color:var(--cli-teal);
  transition:all .14s;
}
.cli-pz-calc-usar:hover{background:rgba(34,211,238,.24);}

/* ── O painel de prazos do escritório ──────────────────────────────────
   Fica acima do resumo do mês: prazo vencido é a única coisa da tela com
   hora marcada, e ler o faturamento primeiro é ler na ordem errada. */
.cli-prazos-conta{
  margin-left:auto;font-family:'Inter',sans-serif;font-size:.65rem;
  padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.05);color:rgba(240,240,240,.45);
}
.cli-prazos-conta.atrasado{
  background:rgba(239,68,68,.14);color:var(--clr-danger-light,#fca5a5);font-weight:600;
}
.cli-prazos-lista{display:flex;flex-direction:column;gap:2px;}
.cli-prazo-item{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:6px 7px;border:none;background:none;border-radius:8px;cursor:pointer;
  transition:background .14s;
}
.cli-prazo-item:hover{background:rgba(255,255,255,.05);}
.cli-prazo-dia{
  flex-shrink:0;width:38px;font-family:'JetBrains Mono',monospace;
  font-size:.68rem;color:rgba(240,240,240,.4);
}
.cli-prazo-item.atrasado .cli-prazo-dia{color:var(--clr-danger-light,#fca5a5);font-weight:600;}
.cli-prazo-meio{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.cli-prazo-quem{
  font-family:'Inter',sans-serif;font-size:.74rem;color:rgba(240,240,240,.82);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cli-prazo-oque{
  font-family:'Inter',sans-serif;font-size:.66rem;color:rgba(240,240,240,.38);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cli-prazo-quando{
  flex-shrink:0;font-family:'Inter',sans-serif;font-size:.64rem;
  color:rgba(240,240,240,.35);
}
.cli-prazo-item.atrasado .cli-prazo-quando{color:var(--clr-danger-light,#fca5a5);}
.cli-prazos-mais{
  padding:5px 7px 0;font-family:'Inter',sans-serif;
  font-size:.66rem;color:rgba(240,240,240,.3);
}

/* ── O aviso de conflito ───────────────────────────────────────────────
   Âmbar e não vermelho: ele AVISA e não impede. Vermelho diria "você não
   pode", e quem decide sobre conflito é o advogado. */
.cli-conflito{
  grid-column:1/-1;margin:-2px 0 4px;padding:9px 11px;border-radius:9px;
  background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);
  font-family:'Inter',sans-serif;font-size:.72rem;line-height:1.5;
}
.cli-conflito-grave{color:#fcd34d;}
.cli-conflito-grave b{font-weight:700;}
.cli-conflito-nota{color:rgba(240,240,240,.62);margin-top:3px;}
.cli-conflito-rodape{
  margin-top:5px;font-size:.66rem;color:rgba(240,240,240,.36);
}

/* O prazo dentro de "Próximas ações": o rótulo já o separa, e a cor é o que
   faz o olho achá-lo sem ler a lista inteira. Não há cartão separado de
   prazos, e a publicação do CNJ não entra aqui — a lista é de compromisso com
   data marcada. Ver os comentários em pintarLista e em proximasAcoes. */
.cli-acao.cli-acao-prazo .cli-acao-tipo{color:#fca5a5;font-weight:700;}

/* ── Os avisos do topo do modal de plano ──────────────────────────────────
   "Premium ativo até tal dia" e "teste grátis, faltam N dias". Nasceram com
   `style=` inline dentro do template, e style inline não responde a tema:
   a caixa verde-clara continuava verde-clara quando o painel virou branco. */
.pm-aviso{
  border-radius:10px;padding:10px 14px;margin-bottom:16px;
  font-size:.8rem;text-align:center;line-height:1.5;
}
.pm-aviso span{display:block;font-size:.73rem;opacity:.8;margin-top:2px;}
.pm-aviso-ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:#6ee7b7;}
.pm-aviso-teste{background:rgba(99,102,241,.12);border:1px solid rgba(139,92,246,.3);color:#c4b5fd;}

.fv-carregando{padding:24px;font-size:.82rem;text-align:center;color:rgba(240,240,240,.45);}