/* ═══════════════════════════════════════════════════════════════════════════
   Tema SUÍTE — par claro/escuro.

   Tese: as 9 cores de coluna vêm do ClickUp e são neon (#00ffee, #00fd2e,
   #a700ff). Elas carregam significado — a etapa do pipeline. O cromo do tema
   recua para acromático total, então a única cor na tela é a da etapa.
   Nenhum acento de interface disputa atenção com um chip de coluna.

   A sidebar é escura nas duas metades (como o Original, que fixa
   --sidebar-bg). Só o quadro vira. Isso mantém as duas metades como o mesmo
   desenho em vez de dois temas com o mesmo nome.

   No escuro a separação é por DEGRAU DE LUMINÂNCIA, não por borda nem sombra:
   #1B1E22 sobre #141619 já é superfície visível. No claro isso não funciona
   (branco sobre branco não separa), então lá a borda de 1px volta — é a única
   diferença estrutural entre as metades.

   Nada aqui vaza para o Original nem para o Minimal: tudo é escopado em
   body[data-theme="suite"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens: metade clara (padrão) ─────────────────────────────────────── */
body[data-theme="suite"]{
  --paper:#F4F5F6;
  --paper-line:#E2E6E8;
  --card:#FFFFFF;
  --ink:#1B2426;
  --muted:#67757A;
  --red:#C2373B;
  --green:#1D8A5C;
  --yellow:#B4700D;
  /* --lime é o "realce" do Original (neon #D8FF3E). Aqui vira superfície
     neutra: quem usa var(--lime) — .mention, .modal-tag, .status-pill — passa
     a destacar por degrau de luminância, sem introduzir cor nova na tela. */
  --lime:#E8EBED;
  --lime-dark:#1B2426;
  /* .cw-avatar usa var(--accent,#D8FF3E) e --accent nunca foi definido em
     lugar nenhum — sem isto o avatar cai no fallback lima do Original. */
  --accent:#E8EBED;
  --border:1px solid var(--paper-line);
  --sidebar-bg:#101215;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
}

/* ─── Tokens: metade escura ─────────────────────────────────────────────── */
/* Especificidade (0,2,0) vence o body.dark (0,1,0) do extra.css. */
body[data-theme="suite"].dark{
  --paper:#141619;
  /* Antes #262B31 — quase a mesma luminância do --card (#1B1E22), então a
     linha existia mas mal se via (era o caso do traço sob "GESTÃO" no modal,
     .modal-row, .fdd-row). Clareado para ler como linha de verdade. */
  --paper-line:#363D46;
  --card:#1B1E22;
  --ink:#E4E7EA;
  --muted:#7E868F;
  --red:#E5484D;
  --green:#30C88B;
  --yellow:#E0A030;
  --lime:#22262B;
  --lime-dark:#E4E7EA;
  --accent:#22262B;
  --border:1px solid var(--paper-line);
}

/* ─── Tipografia ────────────────────────────────────────────────────────── */
body[data-theme="suite"] :is(h1,h2,h3,h4,.brand-name,.card-brand,.col-title-chip,.form-btn,.nav-item){
  font-family:'Inter',sans-serif;
}
body[data-theme="suite"] h1{font-size:28px;font-weight:600;letter-spacing:-.025em;}
body[data-theme="suite"] .eyebrow,
body[data-theme="suite"] .nav-label,
body[data-theme="suite"] .brand-sub{
  font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;
}

/* Todo dado numérico em mono com tabular-nums: numa coluna de cards os
   valores alinham na vírgula e a data ocupa sempre a mesma largura.
   É o hábito de timecode aplicado a prazo e dinheiro. */
body[data-theme="suite"] :is(.deadline,.card-value,.col-count,.stat b,.avatar,.attention-collab,.card-collab){
  font-family:'IBM Plex Mono',monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  text-transform:none;
}

/* ─── Sidebar (escura nas duas metades) ─────────────────────────────────── */
body[data-theme="suite"] .sidebar{background:var(--sidebar-bg);border-right:0;}
body[data-theme="suite"] .brand-mark{
  background:#E4E7EA;color:#141619;border:0;
  font-family:'Inter',sans-serif;font-weight:700;border-radius:7px;
}
body[data-theme="suite"] .brand-name{color:#E4E7EA;font-weight:600;letter-spacing:-.01em;}
body[data-theme="suite"] .brand-sub{color:#5E666E;}
body[data-theme="suite"] .nav-label{color:#5E666E;}
body[data-theme="suite"] .nav-item{
  color:#7E868F;border:0;font-weight:500;border-radius:6px;padding:8px 10px;
}
body[data-theme="suite"] .nav-item:hover{background:#191D21;color:#B4BBC2;}
/* Estado ativo é degrau de superfície, não bloco de cor. */
body[data-theme="suite"] .nav-item.active{
  background:#1E2227;color:#EDF0F2;border:0;font-weight:600;
}
body[data-theme="suite"] .sidebar-foot{
  font-family:'IBM Plex Mono',monospace;color:#4E565E;
}

/* ─── Cards e superfícies ───────────────────────────────────────────────── */
/* Fora a sombra dura de 5px do Original em tudo. */
/* A sombra dura do Original (box-shadow:5px 5px 0 var(--ink)) vira um bloco
   branco sólido no escuro, porque lá --ink é claro. Fora em tudo. */
body[data-theme="suite"] :is(.card,.chart-card,.stat,.modal,.form-btn,.attention-row,
.comment-row,.fin-table,.cal-row,.msg-tab,.modal-close,.fab,.net-badge,.avatar,
.attention-collab,.status-pill,.modal-tag,.card-tag,.cal-view-toggle,.brand-mark){
  box-shadow:none;
}
body[data-theme="suite"] .card{
  background:var(--card);
  border:var(--border);
  border-radius:8px;
  padding:11px 12px 11px 14px;
}
body[data-theme="suite"] .card::before{width:2px;opacity:.85;}
body[data-theme="suite"] .card:hover{border-color:#CBD3D6;}
body[data-theme="suite"] .card.urgent{border-color:var(--red);}
body[data-theme="suite"] .card.urgent::after{box-shadow:none;border:2px solid var(--card);}
/* Linha minimalista separando uma coluna da próxima — antes era só o gap do
   flex (20px), sem nenhum traço. Funciona nas duas metades porque
   --paper-line já está calibrado em cada uma. Não é caixa (sem fundo), só o
   traço vertical na borda direita de cada coluna, dentro do gap existente.
   Última coluna não tem borda — não há próxima pra separar. */
body[data-theme="suite"] .column{
  background:transparent;box-shadow:none;
  border:0; border-right:1px solid var(--paper-line);
}
body[data-theme="suite"] .column:last-child{border-right:0;}
body[data-theme="suite"] .stat{
  background:var(--card);border:var(--border);border-radius:7px;
}
body[data-theme="suite"] .stat b{font-family:'IBM Plex Mono',monospace;font-weight:600;}
body[data-theme="suite"] .stat span{
  font-family:'IBM Plex Mono',monospace;color:var(--muted);letter-spacing:.1em;
}

/* ─── Chips de coluna: a cor do ClickUp é a única cor da tela ───────────── */
body[data-theme="suite"] .col-title-chip{
  border:0;text-transform:none;letter-spacing:-.005em;
  padding:4px 9px;font-size:11.5px;font-weight:600;border-radius:5px;
}
body[data-theme="suite"] .col-count{
  background:var(--paper-line);color:var(--muted);border:0;font-size:10px;
}
body[data-theme="suite"] .card-tag{
  border:0;border-radius:4px;background:var(--paper);color:var(--muted);
  font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;
}

/* Iniciais viram texto em mono, sem o disco preenchido. */
body[data-theme="suite"] :is(.avatar,.attention-collab){
  background:transparent;border:0;color:var(--muted);
  width:auto;height:auto;border-radius:0;font-weight:500;font-size:10px;
}

/* ─── Botões ────────────────────────────────────────────────────────────── */
/* Primário é inversão de luminância, não cor: escuro sobre claro na metade
   clara, claro sobre escuro na escura. */
body[data-theme="suite"] .form-btn{
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:6px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  text-transform:none;letter-spacing:0;padding:8px 15px;
}
body[data-theme="suite"] .form-btn:hover{transform:none;opacity:.88;}
body[data-theme="suite"] .form-btn.ghost{
  background:var(--card);color:var(--ink);border:var(--border);
}
body[data-theme="suite"] .add-card{
  border:1px dashed var(--paper-line);color:var(--muted);
  font-family:'Inter',sans-serif;background:transparent;
}
body[data-theme="suite"] .add-card:hover{border-color:var(--muted);color:var(--ink);}

/* ─── Campos ────────────────────────────────────────────────────────────── */
body[data-theme="suite"] :is(.form-input,.form-select,.form-textarea){
  border:var(--border);background:var(--card);color:var(--ink);
  box-shadow:none;border-radius:6px;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
body[data-theme="suite"] :is(.form-input,.form-textarea)::placeholder{color:var(--muted);}
body[data-theme="suite"] .form-label{
  font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none;
  color:var(--muted);font-weight:500;
}
body[data-theme="suite"] :is(button,select,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   METADE ESCURA — separação por borda real, não só luminância.

   Desenho original desta seção era "zero borda, só degrau de contraste entre
   superfícies" — na prática ficou achatado demais para o gosto do Ediel, que
   gosta da linha nítida que o tema claro já tem (o traço sob "GESTÃO" no
   modal, os cards do board, as linhas de "Precisa de atenção"). Aqui devolve
   a borda de 1px em --paper-line (já clareado acima) em vez de suprimi-la.
   ═══════════════════════════════════════════════════════════════════════════ */
body[data-theme="suite"].dark :is(.card,.stat,.chart-card,.attention-row,.comment-row,.cal-row,.modal){
  border:var(--border);
}
body[data-theme="suite"].dark .card:hover{background:#22262B;border-color:#454E58;}
/* .card.urgent já tem border-color:var(--red) da regra geral (linha ~123) —
   antes precisava do hack de box-shadow porque a borda estava zerada aqui;
   agora que .card tem borda real, o border-color vermelho já aparece sozinho. */
body[data-theme="suite"].dark .card-tag{background:#22262B;color:var(--muted);}
body[data-theme="suite"].dark .col-count{background:#22262B;}
body[data-theme="suite"].dark .modal{background:var(--card);}
body[data-theme="suite"].dark :is(.form-input,.form-select,.form-textarea){
  background:#15181C;border:1px solid #46505A;color:var(--ink);color-scheme:dark;
}
body[data-theme="suite"].dark :is(.form-input,.form-textarea)::placeholder{color:#949DA7;}
body[data-theme="suite"].dark :is(.form-input,.form-select,.form-textarea):hover:not(:focus){
  border-color:#5C6773;
}
body[data-theme="suite"].dark :is(.form-input,.form-select,.form-textarea):focus-visible{
  border-color:#98A2AD;outline:none;
  box-shadow:0 0 0 3px rgba(152,162,173,.16);
}
body[data-theme="suite"].dark .form-btn{background:var(--ink);color:#141619;border-color:var(--ink);}
body[data-theme="suite"].dark .form-btn.ghost{background:#1B1E22;color:#B4BBC2;border:0;}
body[data-theme="suite"].dark .comments-block .form-btn.ghost{
  background:#1F2328;border:1px solid #46505A;
}
body[data-theme="suite"].dark .add-card{border-color:#2E343B;}
body[data-theme="suite"].dark :is(button,select,input,textarea,[tabindex]):focus-visible{
  outline-color:#7E868F;
}

/* O extra.css força color:#16140F em 17 seletores no body.dark — feito para
   elementos que no Original têm fundo lima/claro. Aqui esses elementos têm
   fundo escuro, então o texto quase-preto ficaria ilegível. Devolve o ink.
   Exceções mantidas fora da lista: .form-btn e .brand-mark, que no Suíte
   realmente têm fundo claro e portanto querem texto escuro. */
body[data-theme="suite"].dark :is(.card-tag,.form-input,.form-textarea,.form-select,
.attention-row,.modal-close,.comment-row,.status-pill,.avatar,
.attention-collab,.nav-item.active,.mention,.modal-tag,.comment-attachment){
  color:var(--ink);
}
/* .net-badge fica FORA da lista acima de propósito: ele tem fundo próprio por
   rede e precisa de tratamento dedicado (ver seção abaixo), senão o ícone
   claro cai sobre o fundo pastel claro e some. */
body[data-theme="suite"].dark :is(.avatar,.attention-collab){color:var(--muted);}

/* ═══════════════════════════════════════════════════════════════════════════
   Badges de rede social.

   O extra.css dá a cada rede um pastel quase-branco (#F6E9FF, #E9FFF9…) com
   ícone escuro — desenhado para papel claro. Em fundo escuro esses pastéis
   viram adesivos lavados. Aqui a lógica inverte: a superfície é escura e a
   COR VAI NO ÍCONE, no tom da marca. O badge deixa de ser um quadrado pastel
   e vira um glifo colorido — que é o que se lê num tema escuro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Claro: mantém o pastel (funciona sobre papel), só troca a borda dura de
   1.5px em --ink pela linha fina do tema. */
body[data-theme="suite"] .net-badge{
  border:1px solid var(--paper-line);
  color:var(--ink);
}

/* Escuro: superfície única, cor no glifo. */
body[data-theme="suite"].dark .net-badge{
  background:#22262B;
  border:0;
}
body[data-theme="suite"].dark .net-badge.net-instagram  {color:#D08BFF;}
body[data-theme="suite"].dark .net-badge.net-instagram-stories{color:#B98BFF;}
body[data-theme="suite"].dark .net-badge.net-tiktok     {color:#25F4EE;}
body[data-theme="suite"].dark .net-badge.net-youtube    {color:#FF5A5A;}
body[data-theme="suite"].dark .net-badge.net-yt-dedicado{color:#FF7A7A;}
body[data-theme="suite"].dark .net-badge.net-insercao   {color:#FFA83C;}
body[data-theme="suite"].dark .net-badge.net-kwai       {color:#FFC93C;}
body[data-theme="suite"].dark .net-badge.net-facebook   {color:#5B9CFF;}

/* ─── Pílulas de status financeiro ──────────────────────────────────────── */
/* Semântica de pagamento é uma das poucas coisas que merecem cor própria —
   verde/âmbar aqui não competem com as etapas, porque só aparecem no
   Financeiro, onde não há chip de coluna. */
body[data-theme="suite"] .status-pill{
  border:1px solid var(--paper-line);
  font-family:'IBM Plex Mono',monospace;
  text-transform:none;letter-spacing:0;
}
body[data-theme="suite"] .status-pill.pago{
  background:transparent;border-color:var(--green);color:var(--green);
}
body[data-theme="suite"] .status-pill.pendente{
  background:transparent;border-color:var(--muted);color:var(--muted);
}
body[data-theme="suite"] .status-pill.parcial{
  background:transparent;border-color:var(--yellow);color:var(--yellow);
}
body[data-theme="suite"].dark .status-pill{background:transparent;}

/* ─── Menção e tag do modal ─────────────────────────────────────────────── */
body[data-theme="suite"] .mention{
  background:var(--lime);color:var(--ink);border-radius:3px;font-weight:600;
}
body[data-theme="suite"] .modal-tag{
  background:var(--lime);color:var(--ink);border:1px solid var(--paper-line);
  font-family:'IBM Plex Mono',monospace;text-transform:none;letter-spacing:0;
}
body[data-theme="suite"].dark .modal-tag{border:0;}

/* ═══════════════════════════════════════════════════════════════════════════
   Demais telas: Dashboard, Financeiro, Calendário, Mensagens, Arquivadas,
   Admin e Configurações.

   Dois problemas herdados, ambos por desenho do Original:

   1. BORDA — dezenas de componentes usam border:1.5px/2px/3px solid var(--ink).
      No Original claro isso é o traço preto neo-brutalista. No Suíte escuro
      --ink é CLARO, então vira contorno branco grosso em tudo.

   2. FUNDO — .attention-row, .comment-row, .cal-row, .msg-tab e outros têm
      background:#fff fixo. O body.dark do Original os mantém brancos de
      propósito e força texto escuro por cima. Aqui o texto é claro, então
      sem trocar o FUNDO o conteúdo some — era o bug das linhas em branco.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Traço: o contorno em --ink vira a linha fina do tema ───────────── */
body[data-theme="suite"] :is(.attention-row,.comment-row,.cal-row,.msg-tab,
.modal-close,.attention-collab,.cal-view-toggle,.tchat-textarea,.toggle-slider,
.fin-table td,.timeline-block,.tchat-panel,.tchat-composer){
  border-color:var(--paper-line);
  border-width:1px;
}
body[data-theme="suite"] :is(.attention-row,.comment-row,.cal-row){
  box-shadow:none;
}

/* ─── 2. Superfícies claras fixas → superfície do tema ──────────────────── */
body[data-theme="suite"].dark :is(.attention-row,.comment-row,.cal-row,.msg-tab,
.modal-close,.cal-toggle-btn,.tchat-textarea,.mention-dropdown,.tchat-bubble){
  background:var(--card);
  color:var(--ink);
}
/* .attention-row/.comment-row/.cal-row NÃO entram aqui — ganharam borda real
   no bloco "separação por borda real" acima. Só os elementos tipo botão/pílula
   (sem a leitura de "linha de lista") continuam sem borda, com o fill como
   única pista visual — msg-tab e cal-toggle-btn são abas, modal-close é um
   botão circular, tchat-textarea segue o mesmo tratamento de .form-input. */
body[data-theme="suite"].dark :is(.msg-tab,.modal-close,.cal-toggle-btn){
  border:0;
}
body[data-theme="suite"].dark .tchat-textarea{
  background:#15181C;border:1px solid #46505A;color:var(--ink);
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
body[data-theme="suite"].dark .tchat-textarea::placeholder{color:#949DA7;}
body[data-theme="suite"].dark .tchat-textarea:hover:not(:focus){border-color:#5C6773;}
body[data-theme="suite"].dark .tchat-textarea:focus-visible{
  border-color:#98A2AD;outline:none;
  box-shadow:0 0 0 3px rgba(152,162,173,.16);
}

/* Hovers em lima hardcoded (rgba(216,255,62,…)) → degrau de luminância. */
body[data-theme="suite"] :is(.attention-row,.cal-row):hover,
body[data-theme="suite"] .fin-table tbody tr:hover,
body[data-theme="suite"] .mention-option:hover{
  background:var(--lime);
}
body[data-theme="suite"].dark :is(.attention-row,.cal-row):hover,
body[data-theme="suite"].dark .fin-table tbody tr:hover,
body[data-theme="suite"].dark .mention-option:hover{
  background:#22262B;
}

/* ─── Abas de Mensagens e toggle do Calendário ──────────────────────────── */
body[data-theme="suite"] :is(.msg-tab,.cal-toggle-btn){
  font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;
}
body[data-theme="suite"] :is(.msg-tab,.cal-toggle-btn).active{
  background:var(--ink);color:var(--paper);
}
body[data-theme="suite"].dark :is(.msg-tab,.cal-toggle-btn).active{
  background:var(--ink);color:#141619;
}

/* ─── Tabela do Financeiro ──────────────────────────────────────────────── */
/* O cabeçalho era --ink com texto --lime (preto sobre lima). Aqui vira
   superfície discreta com rótulo em mono — cabeçalho não precisa gritar. */
body[data-theme="suite"] .fin-table th{
  background:var(--lime);color:var(--muted);
  font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;
}
body[data-theme="suite"] .fin-table td{border-top:1px solid var(--paper-line);}
body[data-theme="suite"].dark .fin-table th{background:#22262B;color:var(--muted);}

/* ─── Chat de equipe ────────────────────────────────────────────────────── */
body[data-theme="suite"] .tchat-wrap{
  border:1px solid var(--paper-line);box-shadow:none;
}
body[data-theme="suite"] .msg-view-tabs{
  border:1px solid var(--paper-line);box-shadow:none;
}
body[data-theme="suite"] .msg-view-tab:first-child{border-right:1px solid var(--paper-line);}
body[data-theme="suite"].dark :is(.direct-contacts-pane,.direct-conversation-pane,
.direct-composer-area,.direct-mention-option){background:var(--card);}
body[data-theme="suite"].dark .direct-contact.active,
body[data-theme="suite"].dark :is(.tchat-tool-btn,.direct-mention-option):hover{
  background:#22262B;
}
body[data-theme="suite"].dark .direct-composer-area .tchat-send-btn{
  background:var(--ink);color:#141619;border-color:var(--ink);
}
body[data-theme="suite"].dark .team-context-pill,
body[data-theme="suite"].dark :is(.direct-file-chip,.tchat-card-chip){background:#15181C;}
/* A bolha própria é #C8EF00 FIXO no body.dark do Original — hex cravado, não
   var(--lime), então não seguia a redefinição de token. */
body[data-theme="suite"] .tchat-msg-me .tchat-bubble{
  background:var(--lime);color:var(--ink);border-color:var(--paper-line);
}
body[data-theme="suite"].dark .tchat-msg-me .tchat-bubble{
  background:#2C3238;color:var(--ink);border:0;
}
body[data-theme="suite"].dark .tchat-bubble{background:#1F2429;border:0;}
body[data-theme="suite"] .tchat-time{
  font-family:'IBM Plex Mono',monospace;color:var(--muted);
}

/* ─── Toggle do modo escuro ─────────────────────────────────────────────── */
body[data-theme="suite"] .toggle-slider{background:var(--paper-line);border:0;}
body[data-theme="suite"] .toggle-slider::before{background:var(--card);}
body[data-theme="suite"] .toggle-switch input:checked + .toggle-slider{
  background:var(--ink);
}
body[data-theme="suite"] .toggle-switch input:checked + .toggle-slider::before{
  background:var(--paper);
}
body[data-theme="suite"].dark .toggle-slider::before{background:var(--muted);}
body[data-theme="suite"].dark .toggle-switch input:checked + .toggle-slider::before{
  background:#141619;
}

/* ─── Botão flutuante (+) ───────────────────────────────────────────────── */
/* Era lima com borda de 3px e sombra dura de 4px. Vira o mesmo primário
   invertido dos outros botões. */
body[data-theme="suite"] .fab{
  background:var(--ink);color:var(--paper);
  border:0;box-shadow:0 3px 12px rgba(0,0,0,.22);
}
body[data-theme="suite"].dark .fab{color:#141619;box-shadow:0 3px 14px rgba(0,0,0,.45);}
body[data-theme="suite"] .fab:hover{transform:none;opacity:.9;box-shadow:0 4px 16px rgba(0,0,0,.28);}

/* ─── Avatar do chat de campanha ────────────────────────────────────────── */
body[data-theme="suite"] .cw-avatar{
  background:var(--accent);color:var(--ink);
  font-family:'IBM Plex Mono',monospace;
}

/* ─── Barras do gráfico de etapas ───────────────────────────────────────── */
/* A trilha vazia da barra precisa de contraste no escuro. */
body[data-theme="suite"].dark .stage-bar-track,
body[data-theme="suite"].dark .bar-track{background:#22262B;}

/* ─── Filtro de período do Dashboard/Financeiro ─────────────────────────── */
/* Aqui --lime é redefinido como superfície neutra (ver linha ~35) — o botão
   ativo ficava "sumido" (fundo quase igual ao fundo da página) porque a
   regra original dependia do --lime vibrante do tema Original. Segue o
   mesmo padrão do .form-btn sólido: bloco --ink com texto --paper, que já
   inverte sozinho entre claro/escuro. */
body[data-theme="suite"] .dash-range-btn.active{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}

/* Sem aviso no .theme-row: o do Minimal existe porque lá o modo escuro é
   desabilitado. No Suíte as duas metades funcionam, então a linha do toggle
   fica limpa. */

@media(prefers-reduced-motion:reduce){
  body[data-theme="suite"] *,body[data-theme="suite"] *::before{transition:none!important;}
}