/* =============================================================================
   EngiDesignSystem 3.0 — o meio termo (escolhido pelo dono a 2026-09-29)
   Da 2.1 fica a identidade: as cores da Engibots (tinta #0B0426, menta #50E6AE, menta escura #246B51 para agir), a
   Google Sans Flex com algarismos alinhados, a entrada com a faixa em tinta e a escolha de organização. Da versão de
   antes volta a forma do dia a dia: menu claro com grupos e ícones, barra de topo, tabelas e cartões em caixa. E a
   forma suaviza: cantos de 8px nos controlos e 12px nas caixas, títulos na largura normal, estados em etiquetas
   pastel, o cabeçalho das tabelas em tinta suave e o ativo em menta suave.

   USO
   - Texto a 14px. Título de página a 28px, secção a 20px, destaque a 16px, apoio a 13px, mínimo 12px.
   - Uma só cor de agir em todas as apps (--ds-accent). A organização só escolhe a cor do seu quadrado (--ds-org).
   - Números: tabular-nums na letra da interface (nunca mono). Código usa --ds-codigo.
   - Estado nunca só por cor: a etiqueta tem sempre texto (.ds-status.ok/.warn/.danger/.muted/.info/.falta).
   Proposta com as três versões lado a lado: mock/v3-meio-termo.html. Galeria com o markup: mock/galeria.html.
============================================================================= */

/* Google Sans Flex (SIL OFL 1.1, fontes/OFL.txt), alojada no núcleo: nenhum produto depende do Google Fonts
   nem de o abrir na CSP. Variável em tamanho ótico, largura e peso; os algarismos alinhados (tnum) estão lá.
   O sincronizar.sh copia a pasta fontes/ para junto do engi-ds.css. */
@font-face{font-family:"Google Sans Flex";font-style:normal;font-weight:400 700;font-stretch:25% 151%;font-display:swap;src:url("fontes/google-sans-flex-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Google Sans Flex";font-style:normal;font-weight:400 700;font-stretch:25% 151%;font-display:swap;src:url("fontes/google-sans-flex-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --ds-canvas:#F7F6FA;
  --ds-surface:#FFFFFF;
  --ds-subtle:#F7F6FA;
  --ds-border:#E7E5EE;
  --ds-border-strong:#D9D6E2;
  --ds-divider:#F0EEF4;
  --ds-hover:#F6F5F9;
  --ds-text:#1A1726;
  --ds-soft:#57536B;
  --ds-faint:#736F87;

  /* Marca Engibots. A menta só vive sobre a tinta (1,6:1 sobre branco: nunca texto sobre branco). */
  --ds-tinta:#0B0426;
  --ds-menta:#50E6AE;
  --ds-menta-suave:rgba(80,230,174,.12);
  --ds-sobre-tinta:rgba(255,255,255,.74);
  --ds-sobre-tinta-fraco:rgba(255,255,255,.55);
  --ds-linha-tinta:rgba(255,255,255,.12);

  /* A cor de agir: a menta do logótipo, mais escura e menos saturada (6,4:1 com texto branco). */
  --ds-accent:#246B51;
  --ds-accent-wash:color-mix(in srgb, var(--ds-accent) 8%, var(--ds-surface));
  --ds-accent-line:color-mix(in srgb, var(--ds-accent) 28%, var(--ds-border));

  /* Quadrado da organização no menu: a única cor que a organização escolhe. */
  --ds-org:#2F6FAE;
  --ds-org-fg:#FFFFFF;

  --ds-success:#1E7A55; --ds-success-wash:#E8F3EE;
  /* Sem uso no núcleo desde a 3.0.6 (o amarelo torrado que o dono rejeitou). Fica definido para não partir CSS de
     produtos que ainda o usem; sai na 4.0. */
  --ds-warning:#B5790B; --ds-warning-wash:#FBF3E2;
  --ds-danger:#C4312B;  --ds-danger-wash:#FBEDEC;
  --ds-info:#1F3A5F;

  /* Gráficos (2.3): tons suaves para as barras, a linha em tinta. Entradas da família da menta, saídas do vermelho.
     As barras distinguem-se pela posição e pela legenda, não só pela cor. */
  --ds-grafico-entrada:color-mix(in srgb, var(--ds-menta) 55%, var(--ds-surface));
  --ds-grafico-saida:color-mix(in srgb, var(--ds-danger) 38%, var(--ds-surface));
  --ds-grafico-linha:var(--ds-tinta);
  --ds-grafico-previsto:var(--ds-border-strong);

  /* 3.0: forma suave. 8px nos controlos, 12px nas caixas, 6px nas etiquetas. */
  --ds-r:8px; --ds-r-lg:12px; --ds-r-etq:6px;
  --ds-sombra-caixa:0 1px 2px rgba(11,4,38,.04),0 4px 14px rgba(11,4,38,.05);
  /* O cabeçalho das tabelas e das caixas em tinta suave, e o ativo (menu, segmentado) em menta suave. */
  --ds-cab:#EFEDF7; --ds-cab-texto:#2A2540; --ds-cab-linha:#E2DFEE;
  --ds-ativo:rgba(80,230,174,.2);
  /* Etiquetas de estado em pastel, com texto escuro da mesma família (contraste AA em todas). */
  --ds-etq-ok:#E4F6EE; --ds-etq-ok-texto:#1E6B4E;
  --ds-etq-warn:#EEEAFB; --ds-etq-warn-texto:#3B2F73;
  --ds-etq-danger:#FBEDEC; --ds-etq-danger-texto:#9F2A25;
  --ds-etq-falta:#FCEEE8; --ds-etq-falta-texto:#8A3F2C;
  --ds-etq-muted:#F0EEF4; --ds-etq-muted-texto:#57536B;
  --ds-etq-info:#E8EEF7; --ds-etq-info-texto:#1F3A5F;
  /* Traços (3.0.6): a mesma família em linhas, riscas, barras e selos com texto branco. A lavanda a 6,6:1 com branco,
     o pêssego a 3,6:1 com branco (só barras, nunca texto). Substituem o --ds-warning, o amarelo torrado. */
  --ds-etq-warn-traco:#5B4BB8; --ds-etq-falta-traco:#C4714B;
  --ds-controlo:40px; --ds-controlo-compacto:36px;
  --ds-form-max:720px;
  --ds-font:"Google Sans Flex","Google Sans",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ds-mono:var(--ds-font);
  --ds-codigo:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ds-shadow:0 1px 2px rgba(11,4,38,.05);
  --ds-shadow-md:0 12px 28px rgba(11,4,38,.12);
  --ds-shadow-lg:0 20px 48px rgba(11,4,38,.18);

  /* 3.2: o que estava cravado nos componentes passa a token, para o tema escuro o poder trocar. No claro, os valores de
     sempre. */
  --ds-fds:#FAFBFC;                       /* colunas de fim de semana nas grelhas */
  --ds-skel-1:#eef0f3; --ds-skel-2:#f6f7f9; /* o brilho do esqueleto */
  color-scheme:light;
}

/* ---- Tema escuro (3.2) ----
   Ativa-se com data-tema="escuro" no <html>, ou com data-tema="automatico" quando o sistema está em escuro. Sem
   data-tema, ou com "claro", nada muda. Só se trocam tokens: os componentes já os usam. O contraste de cada par de
   texto e fundo está travado em AA nos dois temas (tema-contraste-aa.spec.ts). Os documentos (PDF) e os emails ficam
   claros: não passam por aqui. */
:root[data-tema="escuro"] {
  color-scheme:dark;
  --ds-canvas:#0E0C15;
  --ds-surface:#17141F;
  --ds-subtle:#1C1926;
  --ds-border:#2D2939;
  --ds-border-strong:#3B3649;
  --ds-divider:#231F2E;
  --ds-hover:#221E2D;
  --ds-text:#ECEAF3;
  --ds-soft:#B3AFC4;
  --ds-faint:#9591A8;
  /* A tinta fica um pouco mais clara, para o avatar, o aviso e a faixa de entrada não desaparecerem no fundo. */
  --ds-tinta:#2A2152;
  /* A cor de agir sobe de tom para se ler sobre o escuro, e o texto por cima dela passa a tinta. */
  --ds-accent:#3FBF8F;
  --ds-accent-fg:#0B0426;
  --ds-success:#4CC38A; --ds-success-wash:#12261D;
  --ds-warning:#E0A93B; --ds-warning-wash:#2A2112;
  --ds-danger:#F0716B;  --ds-danger-wash:#2D1615;
  --ds-danger-fg:#1A0B0A;
  --ds-info:#8AB4E8;
  --ds-grafico-linha:var(--ds-soft);
  --ds-sombra-caixa:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.3);
  --ds-cab:#1F1B2B; --ds-cab-texto:#D9D5E6; --ds-cab-linha:#2D2939;
  --ds-ativo:rgba(80,230,174,.16);
  --ds-etq-ok:#143326; --ds-etq-ok-texto:#7FE0B4;
  --ds-etq-warn:#241F42; --ds-etq-warn-texto:#C9C0F5;
  --ds-etq-danger:#3A1A19; --ds-etq-danger-texto:#F4A19C;
  --ds-etq-falta:#3A2219; --ds-etq-falta-texto:#F0B49A;
  --ds-etq-muted:#262231; --ds-etq-muted-texto:#B3AFC4;
  --ds-etq-info:#17253A; --ds-etq-info-texto:#A9C6EC;
  --ds-etq-warn-traco:#6E5FD0;
  --ds-shadow:0 1px 2px rgba(0,0,0,.4);
  --ds-shadow-md:0 12px 28px rgba(0,0,0,.45);
  --ds-shadow-lg:0 20px 48px rgba(0,0,0,.55);
  --ds-fds:#1A1724;
  --ds-skel-1:#221E2D; --ds-skel-2:#2B2738;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="automatico"] {
    color-scheme:dark;
    --ds-canvas:#0E0C15;
    --ds-surface:#17141F;
    --ds-subtle:#1C1926;
    --ds-border:#2D2939;
    --ds-border-strong:#3B3649;
    --ds-divider:#231F2E;
    --ds-hover:#221E2D;
    --ds-text:#ECEAF3;
    --ds-soft:#B3AFC4;
    --ds-faint:#9591A8;
    /* A tinta fica um pouco mais clara, para o avatar, o aviso e a faixa de entrada não desaparecerem no fundo. */
    --ds-tinta:#2A2152;
    /* A cor de agir sobe de tom para se ler sobre o escuro, e o texto por cima dela passa a tinta. */
    --ds-accent:#3FBF8F;
    --ds-accent-fg:#0B0426;
    --ds-success:#4CC38A; --ds-success-wash:#12261D;
    --ds-warning:#E0A93B; --ds-warning-wash:#2A2112;
    --ds-danger:#F0716B;  --ds-danger-wash:#2D1615;
    --ds-danger-fg:#1A0B0A;
    --ds-info:#8AB4E8;
    --ds-grafico-linha:var(--ds-soft);
    --ds-sombra-caixa:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.3);
    --ds-cab:#1F1B2B; --ds-cab-texto:#D9D5E6; --ds-cab-linha:#2D2939;
    --ds-ativo:rgba(80,230,174,.16);
    --ds-etq-ok:#143326; --ds-etq-ok-texto:#7FE0B4;
    --ds-etq-warn:#241F42; --ds-etq-warn-texto:#C9C0F5;
    --ds-etq-danger:#3A1A19; --ds-etq-danger-texto:#F4A19C;
    --ds-etq-falta:#3A2219; --ds-etq-falta-texto:#F0B49A;
    --ds-etq-muted:#262231; --ds-etq-muted-texto:#B3AFC4;
    --ds-etq-info:#17253A; --ds-etq-info-texto:#A9C6EC;
    --ds-etq-warn-traco:#6E5FD0;
    --ds-shadow:0 1px 2px rgba(0,0,0,.4);
    --ds-shadow-md:0 12px 28px rgba(0,0,0,.45);
    --ds-shadow-lg:0 20px 48px rgba(0,0,0,.55);
    --ds-fds:#1A1724;
    --ds-skel-1:#221E2D; --ds-skel-2:#2B2738;
  }
}

*{box-sizing:border-box;--ds-accent-wash:color-mix(in srgb, var(--ds-accent) 8%, var(--ds-surface));--ds-accent-line:color-mix(in srgb, var(--ds-accent) 28%, var(--ds-border))}
/* A margem de 8px que o browser dá ao <body> somava-se ao .ds-shell de 100vh e deixava o DOCUMENTO
   16px mais alto do que a janela: uma barra de scroll vertical permanente em TODAS as páginas, por
   cima da barra interna da app, mesmo em ecrãs sem conteúdo que role (ticket #39 da equipa; o fix
   anterior atacou a barra HORIZONTAL das tabelas, que era outra coisa). Medido: html 916 / janela 900. */
/* O height:100% (e não 100vh) é o que mantém isto verdadeiro com ZOOM do browser. Com zoom, o vh é
   calculado em pixels sem zoom e DEPOIS escalado: a 125% o shell fica 25% mais alto do que a janela e
   nasce uma barra de scroll no documento inteiro, por fora da barra interna da app, que rola um shell
   que não tem nada para rolar (ticket #57 da equipa: "uma scrollbar principal que não acrescenta
   nada"). Medido: a 100% não havia barra nenhuma; a 110/125/150% o excesso era exatamente 10/25/50%
   da altura da janela. O % é relativo à caixa real do viewport e não sofre a segunda multiplicação. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0;padding:0;height:100%}
/* A letra também fora do shell e da entrada (o seletor de idioma dos ecrãs de conta vive no canto, fora de ambos, e
   saía em serifa). */
body{font-family:var(--ds-font)}
.ds-mono{font-variant-numeric:tabular-nums lining-nums}
/* Um expoente ou um índice não abre a linha dele (3.1.4): com a altura normal, o <sup> de uma fórmula empurrava a
   linha para baixo e o parágrafo ficava com um degrau a meio (Estimativas do Engi360, #242). */
sup,sub{line-height:0}
/* Caixas de seleção e opções nativas na cor de agir (3.1.8). Onde o produto não usa o .ds-check, ficavam no azul do
   browser (Alerta de horas do Engi360, 2026-10-01). */
input[type="checkbox"],input[type="radio"]{accent-color:var(--ds-accent)}
/* Títulos e marca na mesma letra, um pouco mais estreita: é a ligação ao ENGI do logótipo. */
.ds-estreita{font-variation-settings:"wdth" 90}

/* ---- Shell ---- */
.ds-shell{height:100%;display:flex;background:var(--ds-canvas);color:var(--ds-text);font-family:var(--ds-font);font-size:14px;font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;position:relative;overflow:hidden}
.ds-side{width:240px;flex:none;background:var(--ds-surface);border-right:1px solid var(--ds-border);color:var(--ds-text);display:flex;flex-direction:column;min-height:0}
/* Colapso da sidebar em DESKTOP (in-flow). Restrito a >1024 para não colidir com a
   gaveta sobreposta do tablet (ver bloco "Responsivo" no fim do ficheiro). */
@media (min-width:1025px){.ds-shell.side-fechada .ds-side{display:none}}
/* Véu da gaveta (só existe/visível em tablet; ver bloco Responsivo) */
.ds-side-backdrop{display:none}
.ds-side-head{flex:none;display:flex;align-items:center;gap:10px;padding:16px 16px 12px}
.ds-side-scroll{flex:1;overflow:auto;padding:4px 10px 10px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--ds-border-strong) transparent}
/* Organização e pessoa no menu: opcional desde a 3.0 (a barra de topo voltou a ser o sítio de omissão). */
.ds-side-org{flex:none;display:flex;align-items:center;gap:10px;margin:0 10px 10px;padding:8px;border:1px solid var(--ds-border);border-radius:var(--ds-r);color:var(--ds-text);font-size:14px;font-weight:500;background:none;font-family:inherit;text-align:left;cursor:pointer;min-width:0}
.ds-side-org:hover{background:var(--ds-hover)}
.ds-side-org .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-side-org svg{width:16px;height:16px;flex:none;color:var(--ds-faint)}
.ds-org-quad{width:26px;height:26px;border-radius:6px;background:var(--ds-org);color:var(--ds-org-fg);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.ds-org-quad.lg{width:44px;height:44px;font-size:15px;border-radius:var(--ds-r)}
.ds-side-foot{flex:none;padding:6px 10px 14px}
.ds-side-user{display:flex;align-items:center;gap:10px;margin-top:8px;padding:12px 6px 0;border-top:1px solid var(--ds-border);color:var(--ds-text);font-size:14px;min-width:0}
.ds-side-user .ds-avatar{background:var(--ds-tinta);color:#fff}
.ds-side-user .quem{min-width:0;flex:1;line-height:1.25}
.ds-side-user .quem b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-side-user .quem small{display:block;font-size:13px;color:var(--ds-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Botões de ícone no menu: sem caixa. */
.ds-side .ds-iconbtn{background:transparent;border-color:transparent;color:var(--ds-soft)}
.ds-side .ds-iconbtn:hover{background:var(--ds-hover);color:var(--ds-text)}
/* O sino no topo do menu fica encostado à direita e o painel abre para dentro do ecrã (com right:0 saía pela
   esquerda). Ver a secção Shell da galeria. */
.ds-side-head .ds-notif{margin-left:auto}
.ds-side .ds-notif-panel{left:0;right:auto}
/* Etiqueta ao lado da marca, para distinguir uma área ("Plataforma") sem outra cor. */
/* Em 240px não cabe ao lado de "ENGIFINANCE": vai para a linha de baixo, alinhada com o nome (o ::after faz a quebra). */
.ds-side-head:has(.ds-brand-etq){flex-wrap:wrap;row-gap:6px}
.ds-side-head:has(.ds-brand-etq)::after{content:"";flex-basis:100%;order:1}
.ds-brand-etq{order:2;margin-left:40px;font-size:12px;font-weight:600;line-height:1.6;color:var(--ds-etq-ok-texto);background:var(--ds-etq-ok);border-radius:var(--ds-r-etq);padding:0 8px;white-space:nowrap}
/* Empresa dentro da organização (um produto com várias empresas por organização): um select por baixo do
   .ds-side-org. Markup: <div class="ds-select-wrap ds-side-empresa"><select class="ds-select">. */
.ds-side-empresa{display:block;margin:-2px 12px 12px}
.ds-side-empresa .ds-select{width:100%;max-width:100%;height:var(--ds-controlo-compacto);font-size:13px}
.ds-side-empresa .ds-select option{color:var(--ds-text);background:var(--ds-surface)}
.ds-side-empresa.ds-select-wrap::after{border-color:var(--ds-soft)}
/* Um item do menu que é um aviso (dias de avaliação, só leitura, pagamento em atraso): em negrito, ou em vermelho
   quando bloqueia. Vive no fundo do menu, antes de Definições, e liga à subscrição. */
.ds-nav-item.aviso{color:var(--ds-text);font-weight:600}
.ds-nav-item.erro{color:var(--ds-danger);font-weight:600}
.ds-nav-item.aviso small,.ds-nav-item.erro small{margin-left:auto;font-size:13px;font-weight:400;color:var(--ds-faint)}
/* Menus que abrem no fundo do menu (idioma, pessoa) abrem para CIMA: para baixo saíam do ecrã. */
.ds-side-foot .ds-dd{display:block}
.ds-side-foot .ds-dd-menu{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.ds-col{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.ds-topbar{height:60px;flex:none;display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--ds-surface);border-bottom:1px solid var(--ds-border)}
/* Opcional: um produto com a organização e a pessoa no menu pode esconder a barra de topo no computador. */
@media (min-width:1025px){.ds-shell.sem-topo .ds-topbar{display:none}}
.ds-main{flex:1;overflow:auto;min-height:0}
/* Sem teto de largura: o teto de 1320px fazia com que encolher a barra lateral não servisse de nada.
   Medido num ecrã de 1600: com a barra aberta o conteúdo ocupava os 1320 disponíveis; ao encolhê-la, a
   área passava a 1600 mas o conteúdo continuava nos 1320 e ENCOSTADO à esquerda, deixando 280px em
   branco à direita (ticket #58 do Pedro: "há uma deslocação para a esquerda e o conteúdo não ocupa
   todo o espaço"). Quem precisa de teto são as linhas de texto corrido, e esse teto está no .ds-sub;
   os formulários já limitam a própria caixa (max-width nos painéis).

   2026-09-07: a mesma queixa voltou, e a leitura acima estava incompleta. Tirar o teto do SHELL não
   tirou os tetos das PÁGINAS: as tabelas e os painéis trazem o seu (680, 760, 820, 980), e num monitor
   de 2560 isso é uma tabela de 680px encostada à esquerda com 1600px de branco à direita. A equipa
   descreveu-o exactamente assim: "no ecrã do portátil não há espaçamento, no segundo ecrã já existe".
   Esses tetos por página são para MANTER (uma tabela de duas colunas com 1400px de largura lê-se pior),
   o que faltava era o conteúdo deixar de estar encostado.

   Por isso o teto voltou, CENTRADO e generoso (1600px): o espaço repartia-se pelos dois lados e lia-se
   como margem, em vez de se acumular à direita e ler-se como layout partido.

   2026-09-23 (1.3.5), decisão do dono: "quando tenho espaço de ecrã, porque é que as tabelas não ocupam
   o ecrã todo?". A queixa de 2026-09-07 era uma TABELA estreita encostada à esquerda, e uma tabela à
   largura resolve-a de raiz, sem deixar centenas de píxeis de margem de cada lado num monitor largo. Por
   isso o conteúdo deixa de ter teto por omissão e as tabelas deixam de aceitar o teto da página (regra
   junto do .ds-tablewrap). Os painéis de formulário mantêm o seu, e o texto corrido também (.ds-sub). O
   --ds-conteudo-max continua a deixar um produto pôr um teto ao conteúdo, que fica centrado. */
.ds-content{padding:28px 32px 48px;max-width:var(--ds-conteudo-max,none);margin-inline:auto}
/* Texto corrido tem teto próprio: uma linha de 1900px não se lê. Os painéis e tabelas não são afetados. */
.ds-sub{max-width:110ch}

/* ---- Brand ---- */
/* Família de marcas: ENGI a cheio e o nome do produto mais leve, como no logótipo.
   Markup: <span class="ds-brand"><b>Engi</b><span>Finance</span></span>. */
.ds-brand{font-weight:500;font-size:17px;letter-spacing:.05em;text-transform:uppercase;font-variation-settings:"wdth" 85;color:var(--ds-text);white-space:nowrap;line-height:1}
.ds-brand b{font-weight:700}
.ds-brand span{color:var(--ds-faint)}
/* O símbolo num quadrado em tinta com o balão em menta: a marca está presente mesmo com o menu claro. */
.ds-mark{position:relative;width:30px;height:30px;border-radius:var(--ds-r);background:var(--ds-tinta);flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ds-menta)}
.ds-mark svg{width:20px;height:20px}
.ds-mark .b{position:relative;width:21px;height:13px;border:2px solid currentColor;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:1.5px}
.ds-mark .b i{width:2px;height:2px;border-radius:50%;background:currentColor}

/* ---- Nav ---- */
.ds-nav-grp{font-size:13px;font-weight:500;color:var(--ds-faint);padding:14px 10px 4px;display:flex;align-items:center;gap:9px;cursor:pointer;background:none;border:0;width:100%;font-family:inherit;text-align:left}
.ds-nav-grp > svg:first-child{display:none}
.ds-nav-grp:hover{color:var(--ds-text)}
.ds-nav-grp .chev{margin-left:auto;color:var(--ds-faint);display:inline-flex}
.ds-nav-item{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;margin:1px 0;border-radius:var(--ds-r);color:var(--ds-soft);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-nav-item:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-nav-item.active{background:var(--ds-ativo);color:var(--ds-text);font-weight:600}
.ds-nav-item.active > svg:first-child{color:var(--ds-accent)}
/* O menu voltou a ter ícones na 3.0 (o menu sem ícones foi das mudanças que o dono sentiu como abruptas). */
.ds-nav-item > svg:first-child{color:var(--ds-faint)}
.ds-nav-item .conta{margin-left:auto;font-size:13px;color:var(--ds-faint)}
.ds-nav-item.active .conta{color:var(--ds-accent)}
.ds-nav-item svg{width:17px;height:17px;flex:none}
.ds-nav-item.child{padding-left:22px;min-height:34px}
/* Um item que abre algo em vez de navegar (Ajuda, Idioma) é um <button> ou o <summary> de um .ds-dd. O font:inherit
   não se usa aqui: repunha o tamanho e o peso herdados por cima dos do .ds-nav-item. */
button.ds-nav-item{width:100%;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer}
summary.ds-nav-item{list-style:none}
summary.ds-nav-item::-webkit-details-marker{display:none}
.ds-nav-item.locked{opacity:.6;overflow:visible}
.ds-nav-item.locked:hover{opacity:.85}
.ds-nav-item.locked::after{content:attr(data-tip);position:absolute;left:6px;right:6px;top:calc(100% + 4px);background:var(--ds-text);color:var(--ds-surface);padding:7px 10px;border-radius:6px;font-size:11.5px;line-height:1.35;font-weight:400;white-space:normal;opacity:0;visibility:hidden;transition:opacity .12s ease .05s;z-index:60;pointer-events:none;box-shadow:var(--ds-shadow-md)}
.ds-nav-item.locked:hover::after{opacity:1;visibility:visible}
.ds-nav-item .nav-lock{margin-left:auto;display:inline-flex;color:var(--ds-faint)}
.ds-nav-item .nav-lock svg{width:12px;height:12px}

/* ---- Topbar bits ---- */
.ds-backlink{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ds-soft);text-decoration:none;cursor:pointer;margin-bottom:8px}
.ds-backlink:hover{color:var(--ds-text)}
.ds-backlink svg{width:14px;height:14px}
.ds-crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ds-faint);min-width:0}
.ds-crumb svg{width:13px;height:13px;flex:none}
.ds-crumb b{color:var(--ds-text);font-weight:600}
.ds-crumb a{color:var(--ds-faint);text-decoration:none;cursor:pointer}
.ds-crumb a:hover{color:var(--ds-text)}
.ds-search{display:flex;align-items:center;gap:8px;width:240px;height:var(--ds-controlo-compacto);padding:0 10px;border:1px solid var(--ds-border-strong);border-radius:var(--ds-r);color:var(--ds-faint);font-size:14px}
.ds-search svg{width:14px;height:14px;flex:none}
.ds-search input{border:0;background:transparent;outline:none;font:inherit;font-size:14px;color:var(--ds-text);width:100%}
.ds-kbd{margin-left:auto;font-size:12px;color:var(--ds-faint);border:1px solid var(--ds-border);border-radius:var(--ds-r);padding:1px 5px;white-space:nowrap;flex:none}
/* 3.0.3 (e 1.3.12 na linha 1.3; #235 do Engi360): o atalho da pesquisa com a tecla do sistema. O engi-ds.js poe ds-apple no <html> no Mac, no iPhone e no iPad. */
.ds-kbd[data-atalho="k"]::before{content:"Ctrl K"}
.ds-apple .ds-kbd[data-atalho="k"]::before{content:"\2318K"}
/* Pesquisa global (1.3.8): a caixa da barra de topo abre um painel de resultados por grupos (paginas,
   configuracoes, ajuda), ancorado a direita da caixa e mais largo do que ela. O veu fecha-o ao clicar fora, como o
   do sino. O destino de uma configuracao pisca (ds-realce) para se ver onde se chegou. */
.ds-search{position:relative}
.ds-search.aberta{z-index:41}   /* acima do veu: a caixa aberta continua a receber cliques */
.ds-search-veu{position:fixed;inset:0;z-index:40}
.ds-search-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:41;width:min(420px,calc(100vw - 16px));max-height:min(460px,70vh);overflow-y:auto;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-md);padding:6px;color:var(--ds-text)}
.ds-search-grupo{font-size:13px;font-weight:500;color:var(--ds-soft);padding:8px 10px 4px}
.ds-search-item{display:flex;align-items:center;gap:10px;min-height:34px;padding:6px 10px;border-radius:var(--ds-r);cursor:pointer;color:var(--ds-text);text-decoration:none;font-size:13px}
.ds-search-item svg{width:15px;height:15px;flex:none;color:var(--ds-soft)}
.ds-search-item .sub{margin-left:auto;padding-left:12px;font-size:12px;color:var(--ds-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.ds-search-item:hover,.ds-search-item.on{background:var(--ds-subtle);color:var(--ds-text)}
.ds-search-item:hover svg,.ds-search-item.on svg{color:inherit}
.ds-search-item.bloqueado{color:var(--ds-soft)}
.ds-search-vazio{padding:12px 10px;color:var(--ds-soft);font-size:12.5px;overflow-wrap:anywhere}   /* repete o termo: um termo sem espaços não alarga o painel */
@keyframes ds-realce{0%,60%{box-shadow:0 0 0 3px var(--ds-accent-line);border-radius:var(--ds-r)}100%{box-shadow:0 0 0 0 transparent}}
.ds-realce{animation:ds-realce 2s ease-out}
/* Tablet e telemovel: a caixa passa a uma lupa; aberta, ocupa a largura toda por cima da barra, com alvos de toque
   de 44px. */
@media (max-width:1024px){
  .ds-search{flex:none;width:32px;justify-content:center;padding:0;cursor:pointer}   /* como um .ds-iconbtn: numa barra cheia a lupa não encolhe, é um alvo de toque */
  .ds-search input,.ds-search .ds-kbd{display:none}
  .ds-search.aberta{position:fixed;top:8px;left:8px;right:8px;width:auto;height:44px;z-index:41;justify-content:flex-start;padding:0 12px;background:var(--ds-surface);box-shadow:var(--ds-shadow-md);cursor:auto}
  .ds-search.aberta input{display:block;font-size:16px}
  .ds-search.aberta .ds-search-panel{left:0;right:0;width:auto;max-height:calc(100vh - 80px)}
  .ds-search-item{min-height:44px}
}
.ds-iconbtn{flex:none;width:var(--ds-controlo-compacto);height:var(--ds-controlo-compacto);border-radius:var(--ds-r);display:grid;place-items:center;color:var(--ds-soft);border:1px solid var(--ds-border);background:var(--ds-surface);cursor:pointer;position:relative}
/* Variante compacta para sítios densos (a árvore do Conhecimento). É uma CLASSE e não estilo inline de
   propósito: em tablet ela volta a crescer (regra da casa: tocável com o dedo), e um estilo inline
   ganharia sempre à media query. */
.ds-iconbtn-sm{width:24px;height:24px}
.ds-iconbtn:hover{background:var(--ds-hover)}
.ds-orgbtn{height:var(--ds-controlo-compacto);max-width:220px;border-radius:var(--ds-r);display:inline-flex;align-items:center;gap:7px;padding:0 10px;color:var(--ds-soft);border:1px solid var(--ds-border);background:var(--ds-surface);cursor:pointer;font-size:12.5px;text-decoration:none}
.ds-orgbtn:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-orgbtn svg{width:15px;height:15px;flex:none}
.ds-orgbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A organização na barra de topo (3.0): o quadrado com a cor dela, o nome e a seta. */
.ds-orgbtn:has(.ds-org-quad){padding-left:6px;color:var(--ds-text);font-weight:500;font-size:13.5px;border-color:var(--ds-border-strong)}
.ds-orgbtn .ds-org-quad{width:24px;height:24px;font-size:11px}
.ds-iconbtn svg{width:15px;height:15px}
.ds-avatar{width:32px;height:32px;border-radius:50%;background:var(--ds-tinta);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.ds-user{font-size:13px;color:var(--ds-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}

/* ---- App switcher (segmented) ---- */
.ds-appsw{display:inline-flex;border:1px solid var(--ds-border);border-radius:var(--ds-r);overflow:hidden}
.ds-appsw button{border:0;background:var(--ds-surface);color:var(--ds-soft);padding:6px 12px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border-left:1px solid var(--ds-border)}
.ds-appsw button:first-child{border-left:0}
.ds-appsw button.active{background:var(--ds-hover);color:var(--ds-text);font-weight:600}
.ds-appsw .dot{width:8px;height:8px;border-radius:2px;flex:none}

/* ---- Page header ---- */
/* 3.1.1: o título ocupa o que sobra, com 320px antes de as ações descerem de linha. Com as ações em flex:none e o
   título sem nada, numa área estreita com cinco botões o título encolhia até uma palavra por linha (Conhecimento do
   Engi360, título de artigo longo). Quando descem, as ações ficam à direita, como na linha. */
.ds-page{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin-bottom:22px}
.ds-page > :first-child{flex:1 1 320px;min-width:0}
.ds-page > .ds-actions{margin-left:auto}
/* Pagina que e so um formulario (1.3.7): titulo, texto e formulario numa coluna estreita e centrada, com a largura
   no token --ds-form-max. Uma pagina com navegacao lateral propria (as Configuracoes) nao a usa: alinha junto dela. */
.ds-coluna{max-width:var(--ds-form-max);margin-inline:auto}
.ds-h1{font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--ds-text);overflow-wrap:anywhere;margin:0}
.ds-h1[tabindex="-1"]:focus{outline:none}
/* O subtítulo diz o que a página mostra, numa linha; nunca instruções de uso. */
.ds-sub{font-size:15px;color:var(--ds-soft);margin-top:4px;overflow-wrap:anywhere}
.ds-actions{display:flex;gap:10px;flex:none}
.ds-sec{font-size:20px;font-weight:600;color:var(--ds-text);margin:32px 0 12px}

/* ---- Buttons ---- */
.ds-btn{height:var(--ds-controlo);padding:0 16px;border:1px solid var(--ds-border-strong);border-radius:var(--ds-r);background:var(--ds-surface);font:inherit;font-size:14px;font-weight:600;color:var(--ds-text);display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
a.ds-btn{text-decoration:none}
/* Uma ligação sem classe dentro da app é da cor de agir (o browser pintava-a de azul, e o azul era o do modelo do
   Blazor que o app.css dos produtos trazia). Sublinha ao pairar. */
.ds-shell a:not([class]),.ds-entrada-form a:not([class]){color:var(--ds-accent);font-weight:500;text-decoration:none}
.ds-shell a:not([class]):hover,.ds-entrada-form a:not([class]):hover{text-decoration:underline}
/* A faixa da entrada (em tinta) fica de fora da regra de cima de propósito: o rodapé dela herda o cinzento da faixa. */
.ds-btn:hover{background:var(--ds-hover)}
.ds-btn svg{width:17px;height:17px}
.ds-btn-primary{border-color:var(--ds-accent);background:var(--ds-accent);color:var(--ds-accent-fg,#fff);font-weight:600;box-shadow:0 1px 2px rgba(11,4,38,.14)}
.ds-btn-primary:hover{background:color-mix(in srgb, var(--ds-accent) 88%, #000);color:var(--ds-accent-fg,#fff)}
.ds-btn-danger{border-color:var(--ds-danger);background:var(--ds-danger);color:var(--ds-danger-fg,#fff);font-weight:600}
.ds-btn-danger:hover{background:color-mix(in srgb, var(--ds-danger) 88%, #000)}
.ds-btn:disabled{opacity:.5;cursor:default;background:var(--ds-surface);color:var(--ds-faint);border-color:var(--ds-border)}
.ds-btn:disabled:hover{background:var(--ds-surface)}
/* botão só-ícone numa célula/linha (editar, copiar, eliminar) */
.ds-btn-ghost{height:32px;width:32px;padding:0;border:1px solid transparent;border-radius:var(--ds-r);background:transparent;color:var(--ds-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ds-btn-ghost:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-btn-ghost.danger:hover{background:var(--ds-danger-wash);color:var(--ds-danger)}
.ds-btn-ghost svg{width:16px;height:16px}
/* Ação escrita (2.1): o estado que pede ação vira ação, na cor de agir. "Conciliar", "Escolher categoria". */
.ds-acao{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ds-accent);cursor:pointer;text-decoration:none;white-space:nowrap}
.ds-acao:hover{text-decoration:underline}
.ds-acao:disabled{color:var(--ds-faint);cursor:default;text-decoration:none}
/* O que já está resolvido recua: texto discreto com um visto. */
.ds-feito{display:inline-flex;align-items:center;gap:6px;color:var(--ds-faint);white-space:nowrap}
.ds-feito::before,.ds-status.ok::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- Dropdown de ações (.ds-dd): <details> nativo com summary vestido de .ds-btn.
   Agrupa ações secundárias (ex.: Exportar, Recibos) sem encher a toolbar de botões.
   Fecho ao clicar fora/escolher opção/Escape: listener global em engi-ds.js (details não fecha sozinho). ---- */
.ds-dd{position:relative;display:inline-block}
.ds-dd>summary{list-style:none}
.ds-dd>summary::-webkit-details-marker{display:none}
.ds-dd>summary .chev{transition:transform .12s ease;color:var(--ds-faint)}
.ds-dd[open]>summary .chev{transform:rotate(180deg)}
.ds-dd-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:260px;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-md);padding:6px;z-index:70}
/* Menu que abre a partir da esquerda do botão: posto pelo engi-ds.js quando o lado direito não cabe (3.0.2), ou
   escrito no markup para fixar o lado. */
.ds-dd-menu[data-lado="esquerda"]{left:0;right:auto}
.ds-dd-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:var(--ds-r);padding:10px 12px;font:inherit;font-size:14px;color:var(--ds-text);cursor:pointer;white-space:nowrap}
.ds-dd-item:hover{background:var(--ds-subtle)}
.ds-dd-item:disabled{color:var(--ds-faint);cursor:default;background:transparent}
.ds-dd-item svg{width:17px;height:17px;color:var(--ds-soft);flex:none}
.ds-dd-label{font-size:13px;color:var(--ds-soft);font-weight:500;padding:8px 12px 3px}
.ds-dd-sep{height:1px;background:var(--ds-border);margin:4px 0}

/* ---- KPI strip ---- */
.ds-kpis{display:flex;flex-wrap:wrap;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-sombra-caixa);margin-bottom:22px;overflow:hidden}
.ds-kpi{flex:1;min-width:160px;padding:16px 20px;border-right:1px solid var(--ds-divider)}
.ds-kpi:last-child{border-right:0}
.ds-kpi-label{font-size:13px;color:var(--ds-soft)}
.ds-kpi-val{font-size:24px;font-weight:600;margin-top:4px;color:var(--ds-text)}
.ds-kpi-val u{font-size:13px;color:var(--ds-faint);font-weight:400;text-decoration:none}
.ds-kpi-val.warn{color:var(--ds-text)} .ds-kpi-val.danger{color:var(--ds-danger)} .ds-kpi-val.ok{color:var(--ds-text)}
.ds-kpi-delta{font-size:12px;margin-top:4px;display:inline-flex;align-items:center;gap:3px;color:var(--ds-soft)}
.ds-kpi-delta svg{width:13px;height:13px}
.ds-kpi-delta.up{color:var(--ds-success);font-weight:600}
.ds-kpi-delta.down{color:var(--ds-danger);font-weight:600}

/* ---- Toolbar / segmented ---- */
.ds-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ds-seg{display:inline-flex;border:1px solid var(--ds-border-strong);border-radius:var(--ds-r);overflow:hidden;background:var(--ds-surface)}
.ds-seg button{white-space:nowrap;border:0;background:var(--ds-surface);color:var(--ds-soft);min-height:calc(var(--ds-controlo-compacto) - 2px);padding:0 14px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;border-left:1px solid var(--ds-border-strong);display:inline-flex;align-items:center;gap:6px}
.ds-seg button:first-child{border-left:0}
.ds-seg button.active{background:var(--ds-ativo);color:var(--ds-text);font-weight:600}
.ds-count{font-size:13px;color:var(--ds-faint)}

/* ---- Tabs de página (secções dentro de um ecrã; ex.: detalhe de Projeto) ----
   Distinto de .ds-seg (filtros): sublinhado, não segmented. */
.ds-tabs{display:flex;gap:26px;border-bottom:1px solid var(--ds-border);margin-bottom:18px}
.ds-tab{appearance:none;border:0;background:transparent;padding:10px 0 11px;font:inherit;font-size:15px;font-weight:500;color:var(--ds-soft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
a.ds-tab,a.ds-cfg-link,a.ds-dd-item{text-decoration:none}
/* Separadores com os filtros na mesma linha (Movimentos: "Todos 248 · Por conciliar 12" e, à direita, a pesquisa, o
   mês e os filtros). A linha de baixo é da barra, não dos separadores. */
.ds-tabs-barra{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:16px;border-bottom:1px solid var(--ds-border);margin-bottom:18px}
/* O overflow-x só abaixo de 1024px: um contentor que rola repintava só em parte quando o Blazor trocava o texto dos
   separadores (as contagens chegam depois), e ficavam dois textos sobrepostos (EngiFinance, em produção). */
/* 3.0.1: os separadores não encolhem no computador. Com min-width:0 encolhiam por baixo das ferramentas e ficavam
   tapados ("Sem documento" por baixo da pesquisa); assim, quando não cabem, as ferramentas descem de linha. */
.ds-tabs-barra .ds-tabs{border:0;margin:0;flex:1 0 auto}
.ds-tabs-ferr{display:flex;align-items:center;gap:8px;padding-bottom:8px;flex:none;margin-left:auto}
@media (max-width:1024px){.ds-tabs-barra .ds-tabs{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}.ds-tabs-ferr{width:100%;flex-wrap:wrap}}
.ds-tab:hover{color:var(--ds-text)}
.ds-tab.active{color:var(--ds-text);border-bottom-color:var(--ds-accent);font-weight:600}
.ds-tab .n{font-size:15px;color:var(--ds-faint);font-weight:400}
.ds-tab.active .n{color:var(--ds-faint)}

/* ---- Paginação (rodapé de tabela) ---- */
.ds-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 0;font-size:14px;color:var(--ds-soft)}
.ds-pagination .pages{display:flex;align-items:center;gap:4px}
.ds-pg{min-width:34px;height:34px;padding:0 8px;border:1px solid var(--ds-border-strong);border-radius:var(--ds-r);background:var(--ds-surface);font:inherit;font-size:14px;color:var(--ds-text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ds-pg:hover{background:var(--ds-hover)}
.ds-pg.active{background:var(--ds-ativo);border-color:var(--ds-accent-line);color:var(--ds-text);font-weight:600}
.ds-pg:disabled{opacity:.45;cursor:default}
.ds-pg svg{width:14px;height:14px}

/* ---- Toast (confirmação efémera pós-ação; canto inferior direito) ---- */
/* z-index ACIMA do modal (122), e não abaixo do overlay (120) como esteve até aqui.
   O toast existe para levar o resultado de uma ação a quem a fez, e gravar, apagar e confirmar são coisas
   que quase sempre se fazem DENTRO de um drawer ou de um modal: 37 ecrãs do Engi360 têm avisos nessa
   situação. A 90, todos esses toasts eram pintados por baixo do escurecimento e ninguém os lia. A equipa
   reabriu a queixa três dias depois de a correção ter ido para produção, e dois dos pedidos vinham
   disfarcados de bug de outra coisa ("Failure to delete project", "nothing happens, no warning").
   Fica abaixo do menu de colunas (125), do aviso de reconexão (130) e da barra de erro do Blazor (1000):
   perder o circuito é mais importante do que ler uma confirmação. */
/* pointer-events: o toast e para LER, nao para clicar. Subi-lo acima do modal (123) poe-no por cima do
   canto inferior direito, e num ecra baixo com um modal alto isso cai em cima do botao de confirmar:
   medido a 768x700, o "Sim, apagar" ficava por baixo do toast e deixava de receber o clique. Um aviso
   que impede a accao que ele proprio esta a comentar e pior do que nao aparecer.
   Atravessa-se tudo menos o "x" de dispensar, que e a unica parte accionavel. */
.ds-toasts{position:absolute;right:18px;bottom:18px;z-index:123;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.ds-toast{--c:var(--ds-menta);display:flex;align-items:flex-start;gap:10px;background:var(--ds-tinta);color:#fff;padding:12px 16px;border-radius:var(--ds-r);box-shadow:var(--ds-shadow-lg);font-size:14px;line-height:1.45;max-width:420px;animation:ds-toast-in .18s ease}
.ds-toast .ds-acao{color:var(--ds-menta)}
.ds-toast svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--c)}
.ds-toast.success{--c:var(--ds-menta)} .ds-toast.danger{--c:#F0857B} .ds-toast.info{--c:#8AB6F0}
.ds-toast .x{margin-left:6px;cursor:pointer;opacity:.7;pointer-events:auto}
.ds-toast .x:hover{opacity:1}
@keyframes ds-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.ds-toast{animation:none}}

/* ---- Table ---- */
/* overflow-x:auto (não hidden): uma tabela mais larga do que o wrap ganha scroll horizontal em vez de ser
   cortada em silêncio (colunas a desaparecer sem aviso); o border-radius continua a recortar os cantos. */
.ds-tablewrap{border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);background:var(--ds-surface);box-shadow:var(--ds-sombra-caixa);overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ds-border-strong) transparent}
/* Uma tabela ocupa a largura do sítio onde está (1.3.5, ver o .ds-content): o max-width que as páginas punham
   no .ds-tablewrap (680, 760, 900, 980, 1100) deixa de valer, sem cada produto ter de mexer no seu markup. É o
   único !important do núcleo e existe porque só ele vence um estilo escrito em linha. Uma tabela que tenha
   mesmo de ser estreita vai dentro de um bloco com essa largura: o .ds-tablewrap enche o pai, não o ecrã. */
.ds-tablewrap{max-width:none!important}
/* Uma tabela que rola na horizontal tem de o DIZER. O overflow:auto acima evita cortar colunas, mas no
   macOS a barra de scroll só aparece ao tocar-lhe: o dono tinha larguras guardadas de 640+234px numa
   tabela com teto de 980px, as duas colunas mais importantes (Estado e Progresso) ficaram para lá da
   borda, e ele concluiu que não existiam. Duas coisas: a barra fica sempre visível (thin), e o JS marca
   o wrap com data-transborda="direita|esquerda|ambos" conforme o que está escondido de cada lado; a
   sombra interior é pintada na caixa do wrap, por isso não rola com o conteúdo. */
.ds-tablewrap::-webkit-scrollbar{height:8px}
.ds-tablewrap::-webkit-scrollbar-thumb{background:var(--ds-border-strong);border-radius:4px}
.ds-tablewrap[data-transborda="direita"]{box-shadow:var(--ds-sombra-caixa),inset -22px 0 16px -16px rgba(16,24,40,.28)}
.ds-tablewrap[data-transborda="esquerda"]{box-shadow:var(--ds-sombra-caixa),inset 22px 0 16px -16px rgba(16,24,40,.28)}
.ds-tablewrap[data-transborda="ambos"]{box-shadow:var(--ds-sombra-caixa),inset -22px 0 16px -16px rgba(16,24,40,.28),inset 22px 0 16px -16px rgba(16,24,40,.28)}
.ds-table{width:100%;border-collapse:collapse;font-size:14px}
.ds-table thead th{text-align:left;padding:12px 14px;font-size:13px;color:var(--ds-cab-texto);font-weight:600;background:var(--ds-cab);border-bottom:1px solid var(--ds-cab-linha);white-space:nowrap}
.ds-table thead th.num{text-align:right}
/* Uma linha por célula, com reticências quando não cabe. O TETO da largura por omissão vive no
   engiDsTabelas (JS), não aqui: o max-width:0 que aqui esteve espremia colunas com espaço livre ao
   lado ("As resposta…" num ecrã meio vazio) e punha um "…" solto na célula do chevron. O JS mede a
   largura natural, só trava colunas exageradas, e a largura escolhida pelo UTILIZADOR ganha sempre
   (alargar a coluna revela mais texto). */
.ds-table td{padding:12px 14px;border-bottom:1px solid var(--ds-divider);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Células com controlos (aprovar, reenviar convite, editar…): a coluna é medida para caber TUDO e nunca
   é encolhida (ver engiDsTabelas), por isso aqui não há transbordo. Antes tinham overflow:visible, e o
   resultado era os botões pintados POR CIMA da coluna vizinha — o ecrã da Equipa ficava ilegível
   (apanhado pelo dono, 2026-08-10). O nowrap mantém cada botão numa linha; a largura é que se ajusta. */
/* O link da LINHA (ds-link-linha) não conta como controlo: é texto que por acaso é um <a> para o
   Ctrl+clique funcionar. Sem esta exceção, a coluna do assunto passava a "coluna de ações" e deixava de
   ser truncada, esticando a tabela (apanhado pelos testes de truncagem, 2026-08-10). */
.ds-table td:has(button),.ds-table td:has(a:not(.ds-link-linha)),.ds-table td:has(input),.ds-table td:has(select),.ds-table td:has(label){overflow:hidden;white-space:nowrap}
/* 3.3.2: a célula que parte (.quebra) parte também com uma ligação lá dentro. A regra de cima é mais específica do que a
   da .quebra (o :has(a:not(...)) conta como uma classe e um elemento), e uma ligação sem .ds-link-linha ficava numa linha
   cortada (EngiAIFlow, 2026-10-03): o produto tinha de se lembrar da classe. Com um botão já partia: o :has(button) perde
   para a .quebra. */
.ds-table td.quebra:has(a:not(.ds-link-linha)){white-space:normal}
/* Uma coluna de ações com vários botões precisa de os manter juntos e alinhados à direita da célula. */
.ds-table td.ds-td-acoes{text-align:right;white-space:nowrap}.ds-td-acoes .ds-iconbtn{display:inline-grid;vertical-align:middle}.ds-td-acoes .ds-iconbtn+.ds-iconbtn{margin-left:4px}
.ds-table tbody tr:last-child td{border-bottom:0}
/* Linha de dia, como num extrato (2.1): agrupa as linhas por data em vez de repetir a data numa coluna. */
.ds-table tr.ds-dia td{padding:16px 14px 6px;font-size:13px;font-weight:600;color:var(--ds-soft);border-bottom:1px solid var(--ds-border);background:var(--ds-surface)}
.ds-table tr.ds-dia:hover{background:none}
/* Uma lista agrupada por dia não se ordena por coluna (o engi-ds.js ignora o clique): o cabeçalho não promete. */
.ds-table:has(> tbody > tr.ds-dia) thead th{cursor:default!important}
.ds-table .l2{display:block;font-size:13px;color:var(--ds-faint);overflow:hidden;text-overflow:ellipsis}
.ds-table tbody tr:hover{background:var(--ds-subtle)}
.ds-table td.num{text-align:right;font-weight:500}
.ds-table td.mono{color:var(--ds-soft)}
.ds-table td.soft{color:var(--ds-soft)}
.ds-table td.strong{font-weight:500}
/* Célula que se lê inteira (1.3.11): o texto parte em linhas em vez de ser cortado com "…". Para o que tem de ser
   LIDO e não só reconhecido: uma frase (o resultado de uma conferência), um email, um nome que vem de um documento.
   A omissão continua a ser uma linha por célula, porque uma tabela em que tudo parte fica com linhas de alturas
   diferentes e deixa de se percorrer com os olhos. O break-word, e não o anywhere, só parte uma palavra que não
   caiba sozinha na coluna (um email comprido), e não mexe na largura mínima com que a coluna é medida. */
.ds-table td.quebra{white-space:normal;overflow-wrap:break-word;text-overflow:clip}
/* Texto livre escrito pelo utilizador (descrições, notas, comentários): preserva quebras de linha E
   parte palavras compridas. O white-space:pre-wrap sozinho não parte — um texto de 500 caracteres sem
   espaços transbordava (ticket #2 da equipa, reaberto: "continua a haver texto não colapsado"). */
.ds-texto-livre{white-space:pre-wrap;overflow-wrap:anywhere}
/* Célula que é um link para o detalhe da linha: parece texto, mas é um <a> de verdade para o
   Ctrl+clique e o botão do meio abrirem noutro separador (ticket #40 da equipa). */
.ds-table td a.ds-link-linha{color:inherit;text-decoration:none}
.ds-table tr:hover td a.ds-link-linha{text-decoration:underline}
/* rodapé de totais (ex.: somas por coluna numérica) */
.ds-table tfoot td{border-top:1px solid var(--ds-border-strong);border-bottom:0;font-weight:600}

/* ---- Estado (3.0): etiqueta pastel com o texto sempre. Menta para o que está feito, lavanda para o que falta
   fazer, pêssego para o que falta ter, vermelho suave para o erro. Sem pontos coloridos (o .d do markup antigo
   continua a existir e não se vê). ---- */
.ds-status{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:26px;padding:0 10px;border-radius:var(--ds-r-etq);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--ds-etq-muted);color:var(--ds-etq-muted-texto)}
.ds-status .d{display:none}
.ds-status.ok{background:var(--ds-etq-ok);color:var(--ds-etq-ok-texto)}
.ds-status.warn{background:var(--ds-etq-warn);color:var(--ds-etq-warn-texto)}
.ds-status.danger{background:var(--ds-etq-danger);color:var(--ds-etq-danger-texto)}
.ds-status.muted{background:var(--ds-etq-muted);color:var(--ds-etq-muted-texto)}
.ds-status.info{background:var(--ds-etq-info);color:var(--ds-etq-info-texto)}
.ds-status.falta{background:var(--ds-etq-falta);color:var(--ds-etq-falta-texto)}
.ds-status.ok::before{width:13px;height:13px}
.ds-idade-alerta{color:var(--ds-text);font-weight:600}
.ds-idade-critica{color:var(--ds-danger);font-weight:600}

/* ---- Avatar ---- */
.ds-ava{width:26px;height:26px;border-radius:var(--ds-r);background:var(--ds-border);color:var(--ds-text);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none}
.ds-ava.lg{width:36px;height:36px;font-size:13px}

/* ---- Progress ---- */
.ds-prog{display:flex;align-items:center;gap:8px;min-width:130px}
.ds-prog-track{flex:1;min-width:24px;height:5px;border-radius:3px;background:var(--ds-divider);overflow:hidden}
.ds-prog-fill{height:100%;background:var(--ds-accent);border-radius:3px}
/* Numa célula (3.0.1): a célula corta o que transborda, e com os 130px mínimos do .ds-prog uma coluna estreita cortava
   o valor ("88" em vez de 88%). Na tabela a barra encolhe até à pista mínima e o valor fica sempre inteiro. */
.ds-table td .ds-prog{min-width:0}
.ds-prog-val{flex:none;min-width:34px;font-size:13px;font-weight:500;color:var(--ds-text);text-align:right;white-space:nowrap}

/* ---- Cartão de boas-vindas (primeira entrada de um convidado) ---- */
.ds-welcome{position:relative;margin:0 0 4px;padding:18px 20px 20px;border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);background:var(--ds-surface);box-shadow:var(--ds-sombra-caixa)}
.ds-welcome-titulo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;padding-right:34px}
.ds-welcome-ic{display:none}
.ds-welcome-sub{margin:6px 0 0;color:var(--ds-soft);font-size:14px;max-width:680px}
.ds-welcome .ds-links{margin-top:13px}
.ds-welcome-fechar{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:var(--ds-r);display:grid;place-items:center;border:0;background:transparent;color:var(--ds-soft);cursor:pointer}
.ds-welcome-fechar:hover{background:var(--ds-hover);color:var(--ds-text)}

/* ---- Quick links ---- */
.ds-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.ds-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-sombra-caixa);padding:14px 16px;cursor:pointer}
.ds-link:hover{border-color:var(--ds-accent-line)}
.ds-link-ic{width:34px;height:34px;border-radius:var(--ds-r);display:grid;place-items:center;flex:none;background:var(--ds-ativo);color:var(--ds-accent)}
.ds-link-ic svg{width:16px;height:16px}
.ds-link > span:nth-of-type(2){display:flex;flex-direction:column;min-width:0}
.ds-link b{font-weight:600;font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-link > span:nth-of-type(2) > span{font-size:13px;color:var(--ds-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Entity cards ---- */
.ds-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-sombra-caixa);padding:18px;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.ds-card:hover{border-color:var(--ds-border-strong)}
.ds-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;padding:2px 8px;border-radius:var(--ds-r);background:var(--ds-subtle);color:var(--ds-soft);border:1px solid var(--ds-border);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ds-chip.active{background:var(--ds-ativo);color:var(--ds-text);border-color:var(--ds-accent-line);font-weight:600}
/* Nome de um anexo POR ENVIAR que abre a pré-visualização (ticket #43): é um <button> por ser uma
   ação e não uma ligação (o ficheiro ainda não tem URL), mas lê-se como texto do chip. */
.ds-chip-link{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-chip-link:hover{color:var(--ds-text);text-decoration:underline}

/* ---- Kanban ---- */
/* #49: as colunas do board esticam todas à altura da mais alta (era align-items:flex-start, e uma
   coluna vazia encolhia até à altura do título: sobravam ~30px para largar o cartão). O min-height
   cobre o caso em que TODAS estão vazias, que é justamente quando se está a arrumar o board. */
/* O quadro cabe na altura do ecrã e cada coluna rola por dentro (#226 do Engi360: "a coluna Concluído fica
   parcialmente cortada [...] não apresenta uma barra de scroll horizontal"). A barra horizontal existia, mas no
   fundo do quadro, que tinha a altura da coluna mais comprida: ficava muito abaixo da dobra, e no Mac ainda
   escondida até se rolar. Agora o quadro não passa do ecrã, e a barra fica à vista, fina e sempre desenhada.
   A altura exata vem do núcleo JS (engiDsQuadros), que mede onde o quadro começa; o calc é para antes de ele
   correr. As colunas continuam todas da mesma altura (#49): esticam até à do quadro. */
.ds-kanban{display:flex;gap:12px;align-items:stretch;overflow-x:auto;padding-bottom:8px;max-height:var(--ds-kanban-altura,calc(100vh - 200px));scrollbar-width:thin;scrollbar-color:var(--ds-border-strong) transparent}
.ds-kanban[data-quadro-livre]{max-height:none}
.ds-kanban::-webkit-scrollbar{height:8px}
.ds-kanban::-webkit-scrollbar-thumb{background:var(--ds-border-strong);border-radius:4px}
/* A coluna contém só o deslocamento vertical (3.0.3, e 1.3.12; #231 do Engi360): contendo os dois, o Shift+roda por
   cima de uma coluna não passava para o quadro, e o quadro deixava de rolar para o lado. */
.ds-kcol{flex:0 0 282px;display:flex;flex-direction:column;min-height:220px;background:var(--ds-canvas);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);padding:8px;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}
/* Colunas escondidas de um lado: uma sombra na margem, como nas tabelas (data-transborda, posto pelo núcleo JS).
   As duas pseudo-caixas são itens do flex presos às margens com sticky; a margem negativa desconta a largura e o
   gap de 12px, para não empurrarem as colunas. */
.ds-kanban::before,.ds-kanban::after{content:"";flex:0 0 18px;align-self:stretch;position:sticky;z-index:2;pointer-events:none;opacity:0;transition:opacity .15s ease}
.ds-kanban::before{left:0;margin-right:-30px;background:linear-gradient(to right,rgba(16,24,40,.16),transparent)}
.ds-kanban::after{right:0;margin-left:-30px;background:linear-gradient(to left,rgba(16,24,40,.16),transparent)}
.ds-kanban[data-transborda="esquerda"]::before,.ds-kanban[data-transborda="ambos"]::before,
.ds-kanban[data-transborda="direita"]::after,.ds-kanban[data-transborda="ambos"]::after{opacity:1}
/* enquanto se arrasta, a coluna sob o cursor diz que aceita: sem isto larga-se às cegas */
.ds-kcol.ds-kalvo{border-color:var(--ds-accent);background:var(--ds-accent-wash);box-shadow:inset 0 0 0 1px var(--ds-accent)}
/* E onde o cartão cai dentro da coluna, para reordenar (#222 do Engi360): uma linha do acento antes do cartão
   (.ds-kantes), ou depois do último (.ds-kfim na coluna). O produto põe e tira as classes enquanto se arrasta. */
.ds-kcard.ds-kantes{box-shadow:0 -5px 0 -3px var(--ds-accent)}
.ds-kcol.ds-kfim::after{content:"";display:block;flex:none;height:2px;margin:-4px 2px 6px;border-radius:2px;background:var(--ds-accent)}
/* O título fica preso em cima enquanto a coluna rola; o fundo é o da coluna, para os cartões passarem por baixo.
   O top de -8px é o padding da coluna: com 0, o Chrome prendia-o 8px abaixo da borda e os cartões espreitavam
   por cima dele nessa faixa. */
.ds-khead{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px 10px;font-weight:600;font-size:12.5px;min-width:0;overflow-wrap:anywhere;position:sticky;top:-8px;z-index:1;background:inherit}
.ds-khead .n{color:var(--ds-faint);font-weight:500}
.ds-kcard{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r);padding:9px 11px;margin-bottom:8px;cursor:pointer;overflow-wrap:anywhere}
/* Prazo com cor (#70, estilo Notion): risca na margem do cartão + data destacada. "atraso" = já passou,
   "hoje" = termina hoje; tarefas concluídas nunca são marcadas (a classe nem lhes é posta). */
.ds-kcard.atraso{border-left:3px solid var(--ds-danger);padding-left:9px}
.ds-kcard.hoje{border-left:3px solid var(--ds-etq-warn-traco);padding-left:9px}
.ds-table td.atraso{color:var(--ds-danger);font-weight:600}
.ds-table td.hoje{color:var(--ds-etq-warn-texto);font-weight:600}
.ds-chip.atraso{background:var(--ds-etq-danger);color:var(--ds-etq-danger-texto);font-weight:600}
.ds-chip.hoje{background:var(--ds-etq-warn);color:var(--ds-etq-warn-texto);font-weight:600}
/* Copiar o código (#71) sem deformar o cartão nem a lista: o botão reserva o espaço (não há reflow)
   e só aparece ao pairar na linha/cartão; em ecrãs de toque (tablet, regra da casa) fica sempre
   visível, porque não há hover. No cabeçalho do detalhe está sempre visível. */
/* inline-grid (3.0.7): o .ds-iconbtn e display:grid, que e de bloco, e o botao descia para uma linha abaixo do codigo. */
.ds-copiar-cod{display:inline-grid;width:18px;height:18px;min-width:18px;border:0;background:transparent;margin-left:4px;vertical-align:middle;opacity:0;transition:opacity .12s ease}
.ds-kcard:hover .ds-copiar-cod,.ds-table tr:hover .ds-copiar-cod,.ds-copiar-cod:focus-visible{opacity:1}
.ds-drawer-head .ds-copiar-cod{opacity:.75}
.ds-drawer-head .ds-copiar-cod:hover{opacity:1}
@media (hover: none){.ds-copiar-cod{opacity:.55}}
.ds-kcard:hover{border-color:var(--ds-border-strong)}
.ds-kcard .cod{font-size:12px;color:var(--ds-faint)}
.ds-kcard .tit{font-size:13px;margin:3px 0 8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ds-kcard .meta{display:flex;align-items:center;gap:6px}
.ds-tag{font-size:11px;padding:1px 7px;border-radius:4px;color:#fff;font-weight:500}

/* ---- Integrations ---- */
.ds-integ{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:12px}
.ds-integ-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);padding:16px}
.ds-integ-card.soon{opacity:.65}
.ds-integ-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ds-integ-ic{width:34px;height:34px;border-radius:var(--ds-r);display:grid;place-items:center;background:var(--ds-subtle);color:var(--ds-text)}
.ds-integ-ic svg{width:18px;height:18px}
.ds-integ-nm{font-weight:600;font-size:14px;margin-bottom:3px}
.ds-integ-desc{font-size:12.5px;color:var(--ds-soft);line-height:1.4}

/* ---- Config ---- */
.ds-cfg{display:flex;gap:28px;align-items:flex-start}
.ds-cfg.nav-fechada{gap:0}
.ds-cfg.nav-fechada .ds-cfg-nav{display:none}
/* mesma correção do índice da wiki (#50): a navegação das configurações é um índice e sofria do
   mesmo, em páginas longas (ex.: automação, faturação) desaparecia por cima */
.ds-cfg-nav{flex:0 0 220px;display:flex;flex-direction:column;gap:1px;position:sticky;top:0;align-self:flex-start;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain}
.ds-cfg-grp{font-size:13px;color:var(--ds-soft);font-weight:500;margin:14px 0 4px}
.ds-cfg-link{display:block;padding:8px 10px;border-radius:var(--ds-r);color:var(--ds-soft);font-size:14px;font-weight:500;cursor:pointer}
.ds-cfg-link:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-cfg-link.active{background:var(--ds-subtle);color:var(--ds-text);font-weight:600}
.ds-cfg-body{flex:1;min-width:0}
.ds-cfg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.ds-cfg-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-sombra-caixa);padding:16px;cursor:pointer}
.ds-cfg-card:hover{border-color:var(--ds-accent-line)}
.ds-cfg-card.off{opacity:.55}
.ds-cfg-card .t{font-weight:600;font-size:15px;margin-bottom:3px}
.ds-cfg-card .d{font-size:13px;color:var(--ds-soft)}
.ds-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--ds-divider)}
.ds-setting:last-child{border-bottom:0}
.ds-setting .lbl{font-size:14px;font-weight:500}
.ds-setting .desc{font-size:13px;color:var(--ds-soft);margin-top:2px}
.ds-switch{width:38px;height:22px;border-radius:11px;position:relative;flex:none;transition:background .15s;cursor:pointer}
.ds-switch i{position:absolute;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.ds-switch.disabled{opacity:.45;cursor:default;pointer-events:none}
/* Checkbox (e grupo) — usar em filtros, seleção de linhas, listas de opções */
.ds-check{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ds-text);cursor:pointer}
.ds-check .box{width:18px;height:18px;border:1.5px solid var(--ds-soft);border-radius:3px;background:var(--ds-surface);flex:none;display:grid;place-items:center;color:#fff}
.ds-check .box svg{width:12px;height:12px;opacity:0}
.ds-check.checked .box{background:var(--ds-accent);border-color:var(--ds-accent);color:var(--ds-accent-fg,#fff)}
.ds-check.checked .box svg{opacity:1}
.ds-check.disabled{opacity:.45;cursor:default;pointer-events:none}
.ds-check-group{display:flex;flex-direction:column;gap:9px}
/* variante "só caixa" para matrizes densas (Papéis × Capacidades, transições de estado) */
.ds-check.bare{gap:0}
.ds-check.bare .box{margin:0}
.ds-panel{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-sombra-caixa);padding:4px 18px;overflow-wrap:anywhere}
/* Caixa com cabeçalho (3.0): o cartão com a faixa de cima em tinta suave, como o cabeçalho das tabelas. Pedido da
   equipa ("a cor nova nos headers dos cards"). */
.ds-caixa{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-sombra-caixa);overflow:hidden;min-width:0}
.ds-caixa-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:10px 16px;background:var(--ds-cab);color:var(--ds-cab-texto);font-weight:600;font-size:14px;border-bottom:1px solid var(--ds-cab-linha)}
.ds-caixa-corpo{padding:16px}

/* ---- Select nativo (Engi360Select; nunca FluentSelect — o popup era cortado) ---- */
.ds-select-wrap{position:relative;display:inline-block;max-width:100%}
/* Um <select> NATIVO cresce até à largura da opção mais comprida, e as páginas só lhe davam
   min-width: com um nome de tarefa longo a caixa esticava para fora do ecrã ("o dropdown passa até
   para o segundo ecrã", ticket #42 da equipa, na marcação de horas).
   O teto é min(contentor, 420px) e não só 100%: medido numa janela de 1600px, uma opção de 305
   caracteres dava um select de 1268px — cabia no ecrã e continuava a ser UI absurda. 420px é a
   largura em que um nome normal ainda se lê inteiro; o resto corta com reticências e a lista aberta
   continua a mostrar o texto completo. Os selects de FORMULÁRIO (.ds-select.full) ficam de fora
   deste teto, porque aí a caixa deve acompanhar a largura do campo (a regra .full vem depois). */
.ds-select{appearance:none;-webkit-appearance:none;height:var(--ds-controlo);max-width:min(100%,420px);padding:0 32px 0 12px;font:inherit;font-size:14px;color:var(--ds-text);background:var(--ds-surface);border:1px solid var(--ds-border-strong);border-radius:var(--ds-r);cursor:pointer;text-overflow:ellipsis}
.ds-select:focus-visible{outline:none;border-color:var(--ds-accent);box-shadow:inset 0 0 0 1px var(--ds-accent)}
.ds-select-wrap::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;transform:translateY(-65%) rotate(45deg);border-right:1.5px solid var(--ds-soft);border-bottom:1.5px solid var(--ds-soft);pointer-events:none}

/* ---- Combobox pesquisável (ComboPesquisa.razor): dropdown/select nativo não pesquisa; este substitui
   pickers que hoje carregam a empresa inteira (clientes, projetos, pessoas) ---- */
.ds-combo{position:relative}
.ds-combo-box{position:relative}
.ds-combo-box .ds-input{padding-right:30px}
.ds-combo-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:20px;height:20px;border-radius:999px;color:var(--ds-faint);cursor:pointer}
.ds-combo-clear:hover{background:var(--ds-hover);color:var(--ds-text)}
/* O painel nunca sai do ecrã: um filtro num canto de uma toolbar a 768px abria um painel de 240px para
   lá da borda direita e a página ganhava scroll horizontal. O teto de largura é CSS; o encosto ao lado
   certo é o JS (engiDsPaineis), porque só ele sabe onde o painel calhou. */
.ds-combo-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;max-width:calc(100vw - 16px);background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-md);max-height:260px;overflow-y:auto;padding:4px}
/* A opção lê-se inteira (3.1.9): parte em linhas em vez de ser cortada com "…". Os nomes de clientes, projetos e tarefas
   são longos, e numa lista cortada não se percebe o que se está a escolher (Engi360, ticket #243, 2026-10-01). */
.ds-combo-item{padding:9px 12px;border-radius:var(--ds-r);font-size:14px;line-height:1.35;color:var(--ds-text);cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.ds-combo-item:hover,.ds-combo-item.on{background:var(--ds-subtle);color:var(--ds-text)}
.ds-combo-multi .ds-chip{cursor:default}
.ds-combo-msg{padding:10px;font-size:12.5px;color:var(--ds-faint)}

/* ---- Calendar ---- */
.ds-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-size:12.5px;color:var(--ds-soft)}
.ds-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
.ds-cal{display:flex;flex-wrap:wrap;gap:22px}
.ds-cal-m{width:200px}
.ds-cal-mt{font-weight:600;font-size:13px;margin-bottom:6px;text-transform:capitalize}
.ds-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ds-cal-wd{text-align:center;font-size:12px;color:var(--ds-faint);padding-bottom:2px}
.ds-cal-d{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:3px;color:var(--ds-text)}
.ds-cal-d.fds{background:var(--ds-divider);color:var(--ds-faint)}
/* Feriado: informação, não aviso. Azul suave, para não se confundir com o fim de semana (cinzento). */
.ds-cal-d.feriado{background:var(--ds-etq-info);color:var(--ds-etq-info-texto);font-weight:600}
/* dia de HOJE: anel no acento, em cima de qualquer marca (férias/feriado/fds) */
.ds-cal-d.hoje{outline:2px solid var(--ds-accent);outline-offset:-2px;font-weight:700}
.ds-map th.dh.hoje{color:var(--ds-accent-ink,var(--ds-accent));font-weight:700}
/* #47: na vista de janela as colunas atravessam meses. A primeira coluna de cada mês leva uma linha
   mais forte à esquerda, e o cabeçalho de cima diz que mês é: sem isso, "1, 2, 3" a seguir a "30, 31"
   lê-se como continuação do mesmo mês. */
.ds-map th.mescab{font-size:13px;color:var(--ds-soft);font-weight:500;padding:2px 6px;border-bottom:1px solid var(--ds-border)}
.ds-map th.mes1,.ds-map td.mes1{border-left:2px solid var(--ds-border-strong)}
/* Encher a caixa em vez de deixar branco à direita (decisão do dono):
   - vista de DIAS: o número de dias já vem cortado à medida do espaço (engiDsMapaJanela), e o
     width:100% absorve o resto de píxeis que a divisão inteira deixa;
   - vista de MÊS: o número de colunas é fixo (os dias do mês), portanto quem estica são as colunas.
   A vista de ANO fica de fora: são 12 colunas largas e esticá-las não acrescenta leitura nenhuma. */
.ds-map:not(.ano){width:100%}
/* ...e o espaço extra vai TODO para as colunas de dia. Sem isto a tabela estica pela coluna dos nomes
   (é a que tem texto para crescer), o que além de feio comia o espaço que o observador mede para
   decidir quantos dias cabem: a contagem ficava presa no mínimo. O width:1% mantém a coluna colada ao
   conteúdo, dentro do min/max que já tinha. */
.ds-map:not(.ano) .nm{width:1%}
.ds-map td.d.hoje{outline:1.5px solid var(--ds-accent);outline-offset:-1.5px}

/* ---- Team map (pessoa × dia: ausências, alocação) ---- */
.ds-mapwrap{overflow-x:auto;border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);background:var(--ds-surface)}
.ds-map{border-collapse:collapse}
.ds-map th,.ds-map td{border:1px solid var(--ds-divider)}
.ds-map .nm{position:sticky;left:0;background:var(--ds-surface);text-align:left;padding:6px 12px;white-space:nowrap;font-size:12.5px;min-width:150px;max-width:220px;overflow:hidden;text-overflow:ellipsis;z-index:1}
.ds-map thead .nm{z-index:2}
.ds-map .dh{width:26px;min-width:26px;font-size:12px;color:var(--ds-faint);text-align:center;padding:4px 0;font-weight:500}
.ds-map .dh.fds{background:var(--ds-fds)}
.ds-map td.d{width:26px;min-width:26px;height:28px;padding:0}
.ds-map td.d.fds{background:var(--ds-divider)}
/* Vista de ano: só 12 colunas — estica para preencher a largura em vez de deixar espaço em branco. */
.ds-map.ano{width:100%;table-layout:fixed}
.ds-map.ano .dh,.ds-map.ano td.d{width:auto;min-width:0}
/* A vista de ANO usa table-layout:fixed para os 12 meses ficarem iguais, mas isso dá também à coluna
   dos nomes 1/13 da largura e os nomes saíam cortados — nas vistas de dias e de mês não saíam, porque
   aí a coluna acompanha o conteúdo. Com layout fixo o único jeito é dizer a largura, e a escolhida é o
   mesmo teto (220px) que as outras vistas já respeitavam. */
.ds-map.ano .nm{width:220px}

/* ---- Grelha editável / timesheet (linhas = projeto/atividade, colunas = dias) ---- */
.ds-tswrap{overflow-x:auto;border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);background:var(--ds-surface)}
.ds-ts{border-collapse:collapse;width:100%;font-size:13px}
.ds-ts th,.ds-ts td{border:1px solid var(--ds-divider)}
.ds-ts thead th{background:var(--ds-subtle);font-size:13px;color:var(--ds-soft);font-weight:500;padding:8px 10px;text-align:center}
.ds-ts thead th.fds{background:var(--ds-fds)}
/* 3.1.1: a primeira coluna tem 170px no mínimo e estica com a tabela. O nome da tarefa (.tkcol) acompanha a coluna, e
   o botão de remover fica no fim dela. Com o .tkcol fixo em 150px, a 1600px a coluna tinha ~330px, o nome cortava aos
   150 e o botão ficava a meio (Engi360, "As minhas horas" no Portal). */
.ds-ts .rk{position:sticky;left:0;background:var(--ds-surface);text-align:left;padding:8px 12px;white-space:nowrap;width:170px;min-width:170px;font-weight:500;z-index:1}
.ds-ts .rk .tkcol{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.ds-ts .rk .tkcol > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.ds-ts td.cell{padding:0;width:56px;min-width:56px;position:relative}
.ds-ts td.cell.fds{background:var(--ds-fds)}
.ds-ts-input{width:100%;height:36px;border:0;background:transparent;text-align:center;font:inherit;font-size:13px;color:var(--ds-text);outline:none}
.ds-ts-input:hover{background:var(--ds-hover)}
.ds-ts-input:focus{background:var(--ds-accent-wash);box-shadow:inset 0 0 0 1.5px var(--ds-accent)}
/* Nota/descrição por célula: indicador de canto quando tem nota; botão discreto no hover */
.ds-ts-note{position:absolute;top:0;right:0;width:0;height:0;border-top:7px solid var(--ds-accent);border-left:7px solid transparent;pointer-events:none}
.ds-ts-notebtn{position:absolute;bottom:1px;right:1px;width:16px;height:16px;border:0;border-radius:4px;background:transparent;color:var(--ds-border-strong,#cfd4da);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.7}
.ds-ts-notebtn svg{width:12px;height:12px}
.ds-ts td.cell:hover .ds-ts-notebtn{opacity:1;color:var(--ds-accent-ink,var(--ds-accent))}
.ds-ts-notebtn:hover{background:var(--ds-hover);color:var(--ds-accent-ink,var(--ds-accent))}
.ds-ts td.cell.has-note .ds-ts-notebtn{opacity:1;color:var(--ds-accent-ink,var(--ds-accent))}
.ds-ts tfoot td{background:var(--ds-subtle);font-weight:600;text-align:center;padding:8px 10px}
.ds-ts tfoot .rk{text-align:right;font-size:13px;color:var(--ds-soft)}

/* ---- Wiki ---- */
.ds-wiki{display:flex;gap:24px;align-items:flex-start}
/* #50: o índice acompanha a leitura. Antes rolava com a página: numa wiki com muitas páginas, a
   meio de um artigo longo já não havia índice nenhum no ecrã e a única saída era voltar ao topo.
   Fica colado ao topo do .ds-main (é ele que rola) com scroll próprio quando a lista é comprida. */
/* 2.1: o topo da página ficou mais alto (título de 32px, frase de 16px) e o conteúdo tem mais margem; o desconto
   passou de 160 para 180px, senão o fundo do índice voltava a ficar abaixo do ecrã (wiki-side-visivel.spec). */
.ds-wiki-side{width:240px;flex:none;position:sticky;top:0;align-self:flex-start;max-height:calc(100vh - 180px);padding-bottom:8px;overflow-y:auto;overscroll-behavior:contain}
.ds-wiki-grp{font-size:13px;color:var(--ds-soft);font-weight:500;padding:0 6px 6px;border-bottom:1px solid var(--ds-border);margin-bottom:6px}
.ds-wiki-link{display:block;padding:5px 8px;border-radius:var(--ds-r);color:var(--ds-soft);font-size:13px;cursor:pointer;text-decoration:none}
.ds-wiki-link:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-wiki-link.active{background:var(--ds-subtle);color:var(--ds-text);font-weight:600}
.ds-wiki-children{padding-left:12px;border-left:1px solid var(--ds-border);margin-left:8px}
.ds-wiki-main{overflow-wrap:anywhere;flex:1;min-width:0;max-width:760px;line-height:1.65}
.ds-wiki-main h1{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.ds-wiki-main h2{font-size:17px;font-weight:600;margin:20px 0 8px}
.ds-wiki-main p{margin:8px 0;color:var(--ds-soft)}
.ds-wiki-main ul,.ds-wiki-main ol{margin:8px 0 8px 18px;color:var(--ds-soft)}
.ds-wiki-main li{margin:4px 0}
/* #52 da equipa: "quando se usa ``` para fazer um code block, não fica com secção de Código à volta".
   O markdown JÁ gerava <pre><code> (é CommonMark base); o que faltava era o DS ter uma única regra
   para prosa: não havia estilo nenhum para pre, code, blockquote, tabelas ou hr, portanto o bloco
   saía como texto solto. O realce de sintaxe é outra decisão (exige um highlighter servido por nós,
   a CSP não deixa CDN) e fica de fora de propósito. */
.ds-wiki-main h3{font-size:14.5px;font-weight:600;margin:16px 0 6px}
.ds-wiki-main code{font-family:var(--ds-codigo);font-size:12px;background:var(--ds-canvas);border:1px solid var(--ds-border);border-radius:4px;padding:1px 5px;color:var(--ds-text)}
.ds-wiki-main pre{font-family:var(--ds-codigo);background:var(--ds-canvas);border:1px solid var(--ds-border);border-radius:var(--ds-r);padding:12px 14px;margin:12px 0;overflow-x:auto}
/* dentro do bloco a caixa é do <pre>: o <code> volta a ser texto simples, senão vinha caixa dentro de caixa */
.ds-wiki-main pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.55;white-space:pre;color:var(--ds-text)}
.ds-wiki-main blockquote{margin:12px 0;padding:2px 0 2px 14px;border-left:3px solid var(--ds-border);color:var(--ds-soft)}
.ds-wiki-main hr{border:0;border-top:1px solid var(--ds-border);margin:20px 0}
.ds-wiki-main table{border-collapse:collapse;margin:12px 0;font-size:13px;display:block;overflow-x:auto;max-width:100%}
.ds-wiki-main th,.ds-wiki-main td{border:1px solid var(--ds-border);padding:6px 10px;text-align:left;vertical-align:top}
.ds-wiki-main th{background:var(--ds-canvas);font-weight:600}
.ds-wiki-main img{max-width:100%;height:auto;border-radius:var(--ds-r)}
/* lista de tarefas: a marca é a caixa, não o ponto (o Markdig põe as classes, faltava o estilo) */
.ds-wiki-main ul.contains-task-list{list-style:none;margin-left:2px}
/* bloco e não flex: com flex cada pedaço formatado da frase (um negrito, um código) virava uma coluna */
.ds-wiki-main li.task-list-item{display:block}
.ds-wiki-main li.task-list-item>input[type=checkbox]{margin:0 8px 0 0;vertical-align:-1px}

/* ---- Empty ---- */
/* Vazio (2.1): diz porque está vazio e o primeiro passo, alinhado à esquerda, sem ilustração. */
.ds-empty{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;padding:40px 0;color:var(--ds-soft);max-width:520px}
.ds-empty-dots{display:none}
.ds-empty h3{margin:0;font-size:22px;font-weight:600;color:var(--ds-text)}
.ds-empty p{margin:0;max-width:60ch}
.ds-empty-dots span{width:6px;height:6px;border-radius:50%;background:var(--ds-accent);opacity:.5}

/* ---- COO ---- */
.ds-coo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:18px}
.ds-coo-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);padding:16px}
.ds-coo-chat{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);padding:16px}
.ds-bubble-u{align-self:flex-end;max-width:80%;background:var(--ds-accent-wash);color:var(--ds-text);padding:9px 13px;border-radius:8px 8px 2px 8px;font-size:13px;overflow-wrap:anywhere}
.ds-bubble-a{align-self:flex-start;max-width:85%;background:var(--ds-hover);color:var(--ds-text);padding:9px 13px;border-radius:8px 8px 8px 2px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.ds-composer{display:flex;gap:10px;align-items:center;border:1px solid var(--ds-border);border-radius:var(--ds-r);padding:7px 7px 7px 13px}

/* ===========================================================================
   Drawer (slide-over) + Modal + Overlay — detalhe e criar/editar.
   O drawer é o padrão para DETALHE (leitura) e CRIAR/EDITAR (formulário).
   O modal centrado é para confirmações / ações destrutivas.
   ======================================================================== */
.ds-overlay{position:absolute;inset:0;background:rgba(11,4,38,.32);z-index:120}
.ds-drawer{position:absolute;top:0;right:0;bottom:0;width:480px;max-width:94vw;background:var(--ds-surface);border-left:1px solid var(--ds-border);box-shadow:-16px 0 32px rgba(11,4,38,.10);z-index:121;display:flex;flex-direction:column;overflow:hidden}
.ds-drawer.wide{width:580px}
/* Gaveta larga (1.3.11): para trabalhar sobre uma lista com várias colunas sem sair do ecrã de onde se veio, como
   conferir os recibos do contabilista pessoa a pessoa. Os 580px da .wide chegam para um formulário; uma tabela de
   seis colunas não cabia lá, o núcleo espremia cada coluna até ao piso, e o nome do ficheiro, o email e o resultado
   da conferência ficavam cortados com "…" (Engi360, 2026-09-28: "não consigo ler como deve de ser"). O teto de 94vw
   é o de todas as gavetas, e no telemóvel o max-width de 100vw de todas chega para ocupar o ecrã. */
.ds-drawer.largo{width:1040px}
.ds-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid var(--ds-border);flex:none;min-width:0}
/* O título do drawer pode ser texto do utilizador: quebra dentro do espaço dele e o botão de fechar nunca é esmagado. */
/* E ocupa o espaço até ao botão de fechar (3.1.4): sem o flex, um campo no cabeçalho (o nome da tarefa a editar)
   ficava com a largura natural, um terço da gaveta, e o nome partia em linhas curtas e cortava-se (#242 do Engi360). */
.ds-drawer-head > *:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ds-drawer-head .ds-iconbtn{flex:none}
.ds-drawer-body{padding:18px 22px;overflow-y:auto;flex:1;overflow-wrap:anywhere}
.ds-drawer-body > * + *{margin-top:14px}
.ds-drawer-foot{display:flex;justify-content:flex-start;gap:10px;padding:16px 22px;border-top:1px solid var(--ds-border);flex:none;background:var(--ds-surface)}
.ds-drawer-sec{font-size:16px;font-weight:600;color:var(--ds-text);margin:24px 0 10px;padding-top:18px;border-top:1px solid var(--ds-border)}
.ds-danger-zone{margin-top:32px;padding:14px 16px;border:1px solid var(--ds-danger);border-radius:var(--ds-r-lg);background:color-mix(in srgb, var(--ds-danger) 6%, transparent)}
.ds-danger-zone > .ds-drawer-sec{margin-top:0;color:var(--ds-danger)}
.ds-drawer-sec:first-child{margin-top:0;padding-top:0;border-top:0}

/* Modal centrado (confirmações).
   z-index ACIMA do overlay (120) E do drawer (121): há 13 ecrãs onde o modal de confirmação pode aparecer com
   um drawer aberto atrás. Ficou em 81 quando o #324 subiu o overlay de 80 para 120 (fix de tablet) e não subiu
   o modal com ele: durante esse tempo o overlay tapou TODOS os modais de confirmação da aplicação, e como o
   overlay fecha ao clique, carregar em "Eliminar" fechava o modal sem eliminar nada. Ver o teste
   DesignSystemCamadasTests, que trava a ordem das camadas. */
/* max-height + scroll: sem isto um modal mais alto do que a janela transbordava para CIMA e para BAIXO
   (esta centrado por translate), ficando com o titulo cortado e os botoes fora do ecra, e com
   overflow:hidden nao havia como la chegar. Medido: 30 linhas de formulario dao 1015px, e numa janela de
   640px o "Sim" ficava inalcancavel. O drawer ja fazia isto bem desde sempre; o modal nunca fez.
   Sao DUAS regras porque ha duas formas de modal em uso: com .ds-modal-body e sem ele. Com o corpo
   proprio, rola so o corpo e o rodape fica sempre a vista, como no drawer. Sem ele, rola o modal inteiro,
   que e pior de ler mas nunca esconde nada. Nenhum produto precisa de mexer no markup. */
.ds-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:420px;max-width:92vw;max-height:calc(100% - 32px);overflow-y:auto;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-lg,0 14px 34px rgba(16,24,40,.18));z-index:122}
.ds-modal:has(> .ds-modal-body){display:flex;flex-direction:column;overflow:hidden}
.ds-modal:has(> .ds-modal-body) > .ds-modal-head{flex:none}
.ds-modal:has(> .ds-modal-body) > .ds-modal-body{overflow-y:auto;flex:1;min-height:0}
.ds-modal:has(> .ds-modal-body) > .ds-modal-foot{flex:none}
.ds-modal-head{padding:22px 24px 6px;font-size:20px;font-weight:600}
.ds-modal-body{overflow-wrap:anywhere;padding:4px 24px 20px;font-size:15px;color:var(--ds-soft);line-height:1.55}
.ds-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:0 24px 22px}

/* Propriedades (detalhe, leitura) */
.ds-prop{display:grid;grid-template-columns:120px 1fr;gap:11px 14px;align-items:center;margin:0}
.ds-prop dt{color:var(--ds-soft);font-size:13px}
.ds-prop dd{margin:0;font-size:14px}
.ds-comment{border-top:1px solid var(--ds-divider);padding-top:10px;margin-top:10px;font-size:12.5px;overflow-wrap:anywhere}
.ds-comment .a{font-weight:600} .ds-comment .d{color:var(--ds-faint);font-size:12px;margin-left:6px}

/* Formulário (criar / editar) — usar dentro do drawer ou em página */
.ds-form{display:flex;flex-direction:column;gap:14px}
.ds-field{display:flex;flex-direction:column;gap:5px}
/* As colunas de uma linha de campos são minmax(0,1fr) e não 1fr: com 1fr (= minmax(auto,1fr)) uma coluna nunca
   encolhe abaixo do conteúdo, e o campo de data do Safari do iPad tem uma largura mínima própria. Numa linha de
   três, a data de saída saía do painel (#184 do Engi360, 2026-08-26). O campo e a caixa também podem encolher. */
.ds-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ds-field-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ds-drawer .ds-field-row.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.ds-field-row>.ds-field{min-width:0}
.ds-field-row .ds-input,.ds-field-row .ds-select{min-width:0;max-width:100%}
.ds-label{font-size:14px;font-weight:500;color:var(--ds-text)}
.ds-input,.ds-textarea{width:100%;height:var(--ds-controlo);padding:0 12px;font:inherit;font-size:14px;color:var(--ds-text);background:var(--ds-surface);border:1px solid var(--ds-border-strong);border-radius:var(--ds-r);outline:none}
.ds-textarea{height:auto;min-height:84px;padding:10px 12px;line-height:1.5;resize:vertical}
.ds-input:focus,.ds-textarea:focus{border-color:var(--ds-accent);box-shadow:inset 0 0 0 1px var(--ds-accent)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-faint)}
/* Campo de data no Safari do iPad e do iPhone (3.1.3). Com a aparência nativa, o iOS desenha o controlo à sua
   largura e não à do campo: mesmo com o min-width:0 da linha de campos (#184), as duas datas do Relatório de horas
   saíam do cartão e o Prazo saía da gaveta (#242 do Engi360, 2026-10-01). Sem a aparência nativa a caixa segue a
   largura como as outras, e o toque continua a abrir o seletor do sistema. Só no iOS (-webkit-touch-callout), para
   não mexer nos browsers de secretária. O valor alinha à esquerda, como nos outros campos (o iOS centra-o). */
@supports (-webkit-touch-callout:none){
  .ds-input[type=date],.ds-input[type=time],.ds-input[type=datetime-local],.ds-input[type=month],.ds-input[type=week]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
}
.ds-input::-webkit-date-and-time-value{text-align:left}
.ds-hint{font-size:13px;color:var(--ds-soft);overflow-wrap:anywhere}
.ds-select.full{width:100%;max-width:100%}   /* campo de formulário: acompanha a largura do campo, sem o teto de 420px */
/* erro de validação de campo */
.ds-field.error .ds-input,.ds-field.error .ds-textarea,.ds-field.error .ds-select{border-color:var(--ds-danger);box-shadow:inset 0 0 0 1px var(--ds-danger)}
.ds-field-error{font-size:13px;color:var(--ds-danger);display:flex;align-items:center;gap:5px}
.ds-field-error svg{width:13px;height:13px;flex:none}
/* swatch de cor — catálogos / configurações (uniforme em todo o lado) */
.ds-color{width:44px;height:32px;border-radius:var(--ds-r);border:1px solid var(--ds-border);padding:0;cursor:pointer;flex:none;background-clip:padding-box}
.ds-color::-webkit-color-swatch-wrapper{padding:2px}
.ds-color::-webkit-color-swatch{border:none;border-radius:4px}
.ds-color::-moz-color-swatch{border:none;border-radius:4px}

/* ---- Callout / message-bar (aviso inline: info / warn / danger / success) ---- */
.ds-callout{--c:var(--ds-info);overflow-wrap:anywhere;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--ds-r);border:0;background:color-mix(in srgb, var(--c) 7%, var(--ds-surface));font-size:14px;line-height:1.5;color:var(--ds-text)}
.ds-callout svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--c)}
.ds-callout b{font-weight:600}
.ds-callout .x{margin-left:auto;flex:none;cursor:pointer;color:var(--ds-faint)}
.ds-callout.info{--c:var(--ds-info)}
.ds-callout.warn{--c:var(--ds-etq-warn-traco)}
.ds-callout.danger{--c:var(--ds-danger)}
.ds-callout.success{--c:var(--ds-success)}
/* Ligações dentro de um aviso (3.3.0): na cor das ligações do sistema também fora do .ds-shell (o painel do assistente
   numa página solta, as páginas de conta). Saíam no azul sublinhado do browser. */
.ds-callout a:not([class]){color:var(--ds-accent);font-weight:500;text-decoration:none}
.ds-callout a:not([class]):hover{text-decoration:underline}

/* ---- Estados (req: cada ecrã em cheio / vazio / a carregar / erro) ---- */
.ds-demobar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ds-demobar-label{font-size:13px;color:var(--ds-soft);font-weight:500}
/* controlo de demonstração flutuante (não faz parte da app — só do mock) */
.ds-demo{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:999px;box-shadow:var(--ds-shadow-md,0 6px 16px rgba(16,24,40,.12));padding:5px 7px 5px 13px;opacity:.92}
.ds-demo:hover{opacity:1}
.ds-demo-label{font-size:13px;color:var(--ds-soft);font-weight:500;white-space:nowrap}
.ds-demo .ds-seg{border-radius:999px}
.ds-skel{display:flex;flex-direction:column;gap:12px}
.ds-skel-bar{height:14px;border-radius:5px;background:linear-gradient(90deg,var(--ds-skel-1) 25%,var(--ds-skel-2) 37%,var(--ds-skel-1) 63%);background-size:400% 100%;animation:ds-sh 1.3s ease infinite}
@keyframes ds-sh{0%{background-position:100% 0}100%{background-position:-100% 0}}
.ds-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:60px 24px;color:var(--ds-soft)}
/* Página-estado a ecrã inteiro (ex.: módulo bloqueado): centra o bloco na área útil, nos dois eixos.
   O .ds-state solto continua top-anchored (empty-states inline no meio das páginas). */
.ds-state-page{min-height:calc(100vh - 210px);display:flex;align-items:center;justify-content:center}
.ds-state-ic{width:48px;height:48px;border-radius:var(--ds-r-lg);display:grid;place-items:center;margin-bottom:4px;background:var(--ds-etq-muted);color:var(--ds-soft)}
/* Estado de erro (3.0.3, fundação 05): o ícone num quadrado vermelho suave, da família da etiqueta de erro. Sem
   isto cada produto pintava-o com CSS local (o EngiAnalytics) ou ficava neutro (o EngiFinance). */
.ds-state.erro .ds-state-ic,.ds-state-ic.danger{background:var(--ds-etq-danger);color:var(--ds-etq-danger-texto)}
.ds-state-ic svg{width:24px;height:24px}
/* margin:0 (3.0.4): as margens do browser no h3 e no p somavam-se ao gap e deixavam ~40px entre o título e o texto
   (visto pelo EngiAnalytics). O botão desce um pouco mais, para não colar ao texto. */
.ds-state h3{margin:0;font-weight:600;color:var(--ds-text);font-size:20px}
.ds-state p{margin:0;max-width:420px;font-size:15px}
.ds-state > .ds-btn{margin-top:8px}
/* Linha de ações do estado (3.0.6): dois ou mais botões, centrados, à mesma distância do texto que um botão só.
   Sem ela, cada produto escrevia a sua div com flex (o "Sem acesso" do EngiFinance) e perdia o margin-top. */
.ds-state-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}

/* ===========================================================================
   Ecrã de autenticação (login / DevLogin / Entra ID): cartão centrado.
   Substitui o legado .empty-shell.
   ======================================================================== */
.ds-auth-shell{min-height:100vh;display:grid;place-items:center;background:var(--ds-canvas);font-family:var(--ds-font);font-variant-numeric:tabular-nums lining-nums;padding:24px}
/* Entrada 2.1: a faixa em tinta faz de menu (marca, frase do produto, rodapé) e o formulário fica sobre
   branco, sem cartão. Markup: .ds-entrada > .ds-entrada-faixa + .ds-entrada-form (com um .ds-auth dentro). */
.ds-entrada{min-height:100vh;display:grid;grid-template-columns:minmax(260px,38%) 1fr;background:var(--ds-surface);font-family:var(--ds-font);color:var(--ds-text);font-variant-numeric:tabular-nums lining-nums}
.ds-entrada-faixa{background:var(--ds-tinta);color:#fff;padding:32px 36px 28px;display:flex;flex-direction:column;gap:18px}
.ds-entrada-marca{display:flex;align-items:center;gap:10px}
/* Desde a 3.0 a marca é escura (o menu é claro); na faixa em tinta volta a branco, senão o ENGI desaparece. */
.ds-entrada-faixa .ds-brand{color:#fff}
.ds-entrada-faixa .ds-brand span{color:var(--ds-sobre-tinta)}
.ds-entrada-frase{margin-top:auto;font-size:32px;line-height:1.15;font-weight:600;font-variation-settings:"wdth" 88;max-width:15ch}
.ds-entrada-frase em{font-style:normal;color:var(--ds-menta)}
.ds-entrada-org{display:flex;align-items:center;gap:12px;margin-top:auto}
.ds-entrada-org b{display:block;font-size:22px;font-weight:600;font-variation-settings:"wdth" 88;line-height:1.15}
.ds-entrada-org small{display:block;color:var(--ds-sobre-tinta-fraco);font-size:13px}
.ds-entrada-rod{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--ds-sobre-tinta-fraco)}
.ds-entrada-rod a{color:inherit;text-decoration:none}
.ds-entrada-rod a:hover{color:#fff}
.ds-entrada-form{display:flex;align-items:center;padding:48px 56px}
.ds-entrada-form .ds-auth{width:100%;max-width:400px;border:0;box-shadow:none;padding:0;background:none}
/* No telemóvel, numa só coluna, a faixa fica com a altura dela e o formulário logo a seguir, em cima: com o
   min-height:100vh a grelha repartia a altura e a faixa esticava uns 280px de tinta vazia. */
@media (max-width:820px){.ds-entrada{grid-template-columns:1fr;grid-template-rows:auto 1fr}.ds-entrada-faixa{padding:20px 20px 18px}.ds-entrada-frase{display:none}.ds-entrada-form{padding:28px 20px;align-items:flex-start}}
/* O canto onde vive a escolha de idioma nos ecrãs de antes de entrar (login, registo, convite, dois
   fatores). Estes ecrãs não têm barra de topo, que é onde o seletor vive no resto do produto, e por isso
   não tinham como trocar de língua DE TODO: quem chegasse na língua errada ficava nela.

   FIXED e não absolute, e isto foi medido. Com absolute o seletor fica preso ao topo do documento, e o
   formulário de criar organização é alto: num telemóvel, ao chegar ao campo do país já a saída para outra
   língua tinha saído do ecrã por cima. Voltava a ser o mesmo defeito com outra posição. Fixed mantém-no
   onde está, que é o que "ter por onde sair" quer dizer.

   No topo e não no fundo de propósito: quem chega e não percebe a página precisa de ver a saída antes de
   ler o formulário, não depois de o percorrer todo. */
.ds-auth-lang{position:fixed;top:16px;right:16px;z-index:2}
@media (max-width:640px){.ds-auth-lang{top:10px;right:10px}}
.ds-auth{width:380px;max-width:100%;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-md);padding:30px 28px;display:flex;flex-direction:column;gap:16px}
.ds-auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ds-accent-ink,var(--ds-accent))}
.ds-auth-brand .ds-brand{font-size:17px}
.ds-auth h1{font-size:32px;font-weight:600;text-align:left;letter-spacing:-.01em;font-variation-settings:"wdth" 90;margin:0}
.ds-auth .sub{font-size:15px;color:var(--ds-soft);text-align:left;margin-top:-8px}
.ds-auth .ds-btn{width:100%;justify-content:center;height:var(--ds-controlo)}
/* Links do cartão de autenticação: escuros como no mock (a{color:#14171F}), nunca o azul da app.
   Exclui .ds-btn (os botões-âncora mantêm a cor do botão, incl. o primário sobre o acento). */
.ds-auth a:not(.ds-btn):not(.ds-acao){color:var(--ds-text)}
.ds-auth a:not(.ds-btn):not(.ds-acao):hover{color:var(--ds-soft)}
.ds-auth-foot{font-size:14px;color:var(--ds-soft);text-align:left}

/* A agulha (comutador de plano): pulso de orientação na primeira entrada (mock 09 C). */
@keyframes ds-agulha-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ds-accent) 40%, transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Barra de erro do Blazor (chrome de framework; vive no DS para CSS único) */
#blazor-error-ui{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:none;align-items:center;gap:12px;padding:11px 18px;background:var(--ds-danger);color:#fff;font-family:var(--ds-font);font-size:13px;box-shadow:0 -2px 10px rgba(0,0,0,.12)}
#blazor-error-ui .reload{color:#fff;text-decoration:underline;cursor:pointer}
#blazor-error-ui .dismiss{margin-left:auto;cursor:pointer;font-size:18px;line-height:1;opacity:.85}

/* ===========================================================================
   Gráficos (burndown, séries) — paleta, eixos e fonte canónicos.
   Desenha em <svg>; aplica estas variáveis/classes a traços, grelha e rótulos.
   Série principal = acento; comparação/meta = --ds-faint tracejado.
   ======================================================================== */
.ds-chart{font-family:var(--ds-font);font-size:11px;color:var(--ds-soft)}
.ds-chart .axis{stroke:var(--ds-border);stroke-width:1}
.ds-chart .grid{stroke:var(--ds-divider);stroke-width:1}
.ds-chart .label{fill:var(--ds-faint);font-size:10.5px}
.ds-chart .tick{fill:var(--ds-faint);font-size:11px}
.ds-chart .series{stroke:var(--ds-accent);stroke-width:2;fill:none}
.ds-chart .series-area{fill:var(--ds-accent);opacity:.08}
.ds-chart .series-ref{stroke:var(--ds-faint);stroke-width:1.5;stroke-dasharray:4 3;fill:none}
.ds-chart .dot{fill:var(--ds-accent)}
.ds-chart .entrada{fill:var(--ds-grafico-entrada);stroke:none}
.ds-chart .saida{fill:var(--ds-grafico-saida);stroke:none}
.ds-chart .linha{stroke:var(--ds-grafico-linha);stroke-width:2;fill:none}
.ds-chart .previsto{fill:var(--ds-grafico-previsto);stroke:none}
/* estados/categorias: usar as cores semânticas do DS, nunca arco-íris aleatório */
.ds-chart .ok{stroke:var(--ds-success);fill:var(--ds-success)}
.ds-chart .warn{stroke:var(--ds-etq-warn-traco);fill:var(--ds-etq-warn-traco)}
.ds-chart .danger{stroke:var(--ds-danger);fill:var(--ds-danger)}
.ds-chart .info{stroke:var(--ds-info);fill:var(--ds-info)}

/* Conversa (tickets/pedidos) — estilo chat */
.ds-chat{display:flex;flex-direction:column;gap:10px}
.ds-chat-msg{max-width:88%;align-self:flex-start;overflow-wrap:anywhere}
.ds-chat-msg.mine{align-self:flex-end}
/* Em edição, a mensagem ocupa a largura toda (#84 da equipa): o item flex encolhe ao conteúdo e num
   comentário curto a caixa de editar herdava uma largura minúscula, impossível de ler. */
.ds-chat-msg.a-editar{width:88%}
.ds-chat-meta{font-size:12px;color:var(--ds-soft);margin-bottom:2px}
.ds-chat-bubble{background:var(--ds-subtle);border:0;border-radius:var(--ds-r);padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.ds-chat-msg.mine .ds-chat-bubble{background:var(--ds-accent-wash)}
/* Nota interna: lavanda, para se distinguir da resposta ao cliente (era o amarelo de post-it). */
.ds-chat-bubble.interna{background:var(--ds-etq-warn);border-color:var(--ds-etq-warn-traco)}
/* Mensagem formatada (#161 do Engi360): markdown já convertido em HTML dentro de uma bolha ou de uma descrição.
   A bolha e o .ds-texto-livre estão em pre-wrap para texto simples; com HTML isso contava também os \n que o
   render põe entre blocos, e cada parágrafo levava uma linha em branco a mais. O .ds-md volta ao normal e dá
   a cada bloco margens à escala de uma mensagem, não de uma página (as da wiki vivem em .ds-wiki-main).
   Tem de vir DEPOIS de .ds-texto-livre e de .ds-chat-bubble: é a mesma especificidade e ganha a última. */
.ds-md{white-space:normal}
.ds-md>:first-child{margin-top:0}
.ds-md>:last-child{margin-bottom:0}
.ds-md p{margin:6px 0}
.ds-md ul,.ds-md ol{margin:6px 0 6px 18px}
.ds-md li{margin:2px 0}
.ds-md h1,.ds-md h2,.ds-md h3,.ds-md h4{font-weight:600;margin:10px 0 4px;line-height:1.3}
.ds-md h1{font-size:15px}
.ds-md h2{font-size:14px}
.ds-md h3,.ds-md h4{font-size:13px}
.ds-md a{color:var(--ds-accent-ink,var(--ds-accent));text-decoration:underline}
.ds-md code{font-family:var(--ds-codigo);font-size:12px;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:4px;padding:1px 5px}
.ds-md pre{font-family:var(--ds-codigo);background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r);padding:8px 10px;margin:8px 0;overflow-x:auto;white-space:pre}
.ds-md pre code{background:none;border:0;padding:0;font-size:12px;line-height:1.5}
.ds-md blockquote{margin:8px 0;padding:2px 0 2px 10px;border-left:3px solid var(--ds-border);color:var(--ds-soft)}
.ds-md hr{border:0;border-top:1px solid var(--ds-border);margin:10px 0}
/* a tabela rola dentro da bolha: display:block com overflow é o que a impede de empurrar a mensagem para fora dos 88% */
.ds-md table{border-collapse:collapse;margin:8px 0;font-size:12.5px;display:block;overflow-x:auto;max-width:100%}
/* as células não herdam o overflow-wrap:anywhere da mensagem: partir palavras ao meio para caber é pior do que rolar */
.ds-md th,.ds-md td{border:1px solid var(--ds-border);padding:4px 8px;text-align:left;vertical-align:top;overflow-wrap:normal}
.ds-md th{background:var(--ds-surface);font-weight:600}
.ds-md ul.contains-task-list{list-style:none;margin-left:2px}
.ds-md li.task-list-item{display:block}
.ds-md li.task-list-item>input[type=checkbox]{margin:0 6px 0 0;vertical-align:-1px}
.ds-chat-chips{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.ds-chip{display:inline-flex;align-items:center;gap:3px;font-size:12px;background:var(--ds-subtle);color:var(--ds-soft);border-radius:var(--ds-r);padding:1px 7px}

/* Sino de notificações in-app (central do utilizador) */
.ds-notif{position:relative;display:inline-flex}
.ds-notif-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--ds-danger);color:var(--ds-danger-fg,#fff);font-size:10px;line-height:15px;font-weight:600;text-align:center}
.ds-notif-backdrop{position:fixed;inset:0;z-index:40}
/* 2.3: o painel na linguagem 2.1 (pedido do dono). Mais largo, assunto até duas linhas, sem ícone por item, a não
   lida marcada pelo peso do assunto e não pelo fundo, ações em texto, e a sombra e o raio do .ds-dd-menu. */
.ds-notif-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:41;width:min(380px,calc(100vw - 16px));max-height:min(480px,75vh);display:flex;flex-direction:column;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-md);overflow:hidden;color:var(--ds-text)}
.ds-notif-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--ds-border);font-size:16px;font-weight:600;color:var(--ds-text)}
.ds-notif-link{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--ds-accent);cursor:pointer;white-space:nowrap}
.ds-notif-link:hover{text-decoration:underline}
.ds-notif-list{overflow-y:auto}
.ds-notif-empty{padding:20px 16px;color:var(--ds-soft);font-size:14px}
/* O item deixou de ser UM botão a envolver tudo (ticket #46): agora é um contentor com um <a>
   verdadeiro (para Ctrl+clique abrir noutro separador) e um botão à parte para marcar como lida —
   um botão dentro de outro é HTML inválido. O padding passou para o <a>, senão a zona clicável
   deixava de cobrir a linha toda. */
.ds-notif-item{position:relative;display:flex;align-items:flex-start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--ds-divider)}
.ds-notif-item:hover{background:var(--ds-subtle)}
/* A por ler distingue-se pelo peso do assunto (o fundo e o ponto saíram). */
.ds-notif-item.nao-lida{background:none}
.ds-notif-item.nao-lida .ds-notif-assunto{font-weight:600;color:var(--ds-text)}
/* Sem ícone por item: o assunto já diz de que se trata. */
.ds-notif-ic{display:none}
.ds-notif-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ds-notif-assunto{font-size:14px;font-weight:400;line-height:1.35;color:var(--ds-soft);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ds-notif-texto{font-size:13px;color:var(--ds-soft);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ds-notif-time{font-size:12px;color:var(--ds-faint)}
/* 2.1: sem ponto de "não lida"; a linha por ler distingue-se pelo fundo. */
.ds-notif-dot{display:none}
.ds-notif-alvo{flex:1;min-width:0;display:flex;align-items:flex-start;gap:10px;padding:12px 44px 12px 16px;color:inherit;text-decoration:none;cursor:pointer}
/* 28x28 e sempre visível: num ecrã tátil não há hover, e esconder a ação atrás do rato era repetir o
   erro da engrenagem das tabelas (que ficou inalcançável em tablet). */
/* Marcar como lida: um ícone sem caixa que aparece ao pairar na linha. Em ecrã tátil fica sempre à vista (não há
   hover), e cresce para o dedo (bloco dos alvos de toque, lá em baixo). */
.ds-notif-lida{position:absolute;top:10px;right:10px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:var(--ds-r);background:transparent;color:var(--ds-faint);cursor:pointer;opacity:0;transition:opacity .12s ease}
.ds-notif-item:hover .ds-notif-lida,.ds-notif-lida:focus-visible{opacity:1}
@media (hover: none){.ds-notif-lida{opacity:1}}
.ds-notif-lida:hover{color:var(--ds-accent);background:var(--ds-hover)}

/* Seletor de idioma (topbar) */
.ds-lang{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--ds-border);border-radius:var(--ds-r);padding:2px;background:var(--ds-surface)}
.ds-lang-opt{font-size:12px;font-weight:600;color:var(--ds-soft);text-decoration:none;padding:2px 7px;border-radius:6px;line-height:1.4}
.ds-lang-opt:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-lang-opt.on{background:var(--ds-ativo);color:var(--ds-text)}

/* A barra de topo que não cabe (3.4.0). A 390, a barra da administração do Engi360 tinha 609px: o assistente, a ajuda, o
   sino, a organização, o sair e a pessoa ficavam fora do ecrã, sem forma de lá chegar. O produto marca o que pode sair
   da barra (data-ds-recolhe, com a ordem: o número mais alto sai primeiro) e põe na barra o botão "Mais"
   ([data-ds-mais], escondido). O engi-ds.js mede a barra: se não cabe, mostra o "Mais" e esconde as peças marcadas, uma
   a uma, até caber; ao abrir, o "Mais" lista-as, e cada entrada carrega na peça escondida (ou segue a mesma ligação).
   O que não é marcado nunca sai: o menu, a pesquisa, o assistente, o sino e a pessoa ficam sempre à vista. */
[data-ds-recolhido]{display:none!important}
.ds-mais{position:relative;display:inline-flex;flex:none}
.ds-mais[hidden],.ds-mais-lista[hidden]{display:none}
/* Com a lista aberta, a dica do botão tapava o canto da lista (nas capturas do Engi360, o "ES" do idioma). */
.ds-mais:has(> .ds-mais-lista:not([hidden])) [data-tip]::after{display:none}
.ds-mais-lista{position:absolute;top:calc(100% + 8px);right:0;z-index:41;min-width:240px;max-width:calc(100vw - 16px);max-height:min(480px,75vh);overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-md);color:var(--ds-text)}
.ds-mais-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:var(--ds-r);background:none;color:var(--ds-text);font:inherit;font-size:13.5px;text-align:left;text-decoration:none;cursor:pointer}
.ds-mais-item:hover,.ds-mais-item:focus-visible{background:var(--ds-hover)}
.ds-mais-item svg{flex:none;width:15px;height:15px;color:var(--ds-soft)}
.ds-mais-grupo{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 4px 0 10px}
.ds-mais-rotulo{font-size:13.5px;color:var(--ds-text)}
.ds-mais-opcoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.ds-mais-opcao{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--ds-border);border-radius:var(--ds-r);background:var(--ds-surface);color:var(--ds-soft);font:inherit;font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer}
.ds-mais-opcao:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-mais-opcao.atual{background:var(--ds-ativo);border-color:var(--ds-accent-line);color:var(--ds-text);cursor:default}
/* 3.5.0: um seletor (o de empresa) na lista, em coluna: os nomes são longos, uma opção por linha, a atual marcada. */
.ds-mais-grupo.coluna{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:6px 4px 6px 10px}
.ds-mais-grupo.coluna .ds-mais-rotulo{font-size:12px;color:var(--ds-soft)}
.ds-mais-grupo.coluna .ds-mais-opcoes{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:2px}
.ds-mais-grupo.coluna .ds-mais-opcao{justify-content:flex-start;min-height:36px;padding:6px 10px;font-size:13px;font-weight:500;text-align:left;white-space:normal;overflow-wrap:anywhere}

/* Seletor de menções por chips (clicar alterna) */
.ds-chips-pick{display:flex;flex-wrap:wrap;gap:6px}
.ds-chip-pick{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:3px 10px;border-radius:var(--ds-r);border:1px solid var(--ds-border);background:var(--ds-surface);color:var(--ds-text);cursor:pointer}
.ds-chip-pick:hover{background:var(--ds-hover)}
.ds-chip-pick.on{background:var(--ds-accent-wash);border-color:var(--ds-accent-line);color:var(--ds-accent);font-weight:600}

/* Ajuda (gaveta da topbar) */
.ds-help{position:relative;display:inline-flex}
.ds-help-backdrop{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.18)}
.ds-help-panel{position:fixed;top:0;right:0;z-index:51;width:min(440px,92vw);height:100vh;display:flex;flex-direction:column;background:var(--ds-surface);border-left:1px solid var(--ds-border);box-shadow:var(--ds-shadow-lg)}
.ds-help-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--ds-divider);font-size:14px;font-weight:600;color:var(--ds-text)}
.ds-help-x{background:none;border:none;color:var(--ds-soft);cursor:pointer;display:inline-flex;padding:2px;border-radius:var(--ds-r)}
.ds-help-x:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-help-body{flex:1;overflow-y:auto;padding:16px}
.ds-help-prose{max-width:none}
.ds-help-aviso{background:var(--ds-subtle);border:0;color:var(--ds-text);font-size:12px;padding:8px 10px;border-radius:var(--ds-r);margin-bottom:12px}
.ds-help-vazio{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ds-soft);text-align:center;padding:32px 16px;font-size:13px}
.ds-help-foot{border-top:1px solid var(--ds-divider);padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.ds-help-link{display:inline-flex;align-items:center;gap:6px;color:var(--ds-accent);text-decoration:none;font-size:13px}
.ds-help-link:hover{text-decoration:underline}
.ds-help-link.forte{font-weight:600}

/* ---- Assistente (3.3.0) ----
   O painel do assistente embebido (Engi360, piloto aprovado pelo dono a 2026-10-03): a pessoa pede pela conversa o que
   faria no ecrã, e pergunta o que está na ajuda. No computador encosta-se à direita como uma terceira coluna do
   .ds-shell, a seguir ao .ds-col: a página encolhe e continua toda à vista e a funcionar. Uma gaveta por cima tapava as
   colunas da direita das tabelas e os botões de ação, que é onde a pessoa vai confirmar o que o assistente fez. No tablet
   e no telemóvel ocupa o ecrã inteiro, acima da gaveta do menu (101).
   Camada (3.4.1, decisão da coordenação do Engi360): o painel fica ACIMA das gavetas da página (122, acima do véu 120 e da
   gaveta 121) e abaixo das janelas de confirmação. Quem tem uma tarefa aberta numa gaveta quer perguntar por ela sem a
   fechar: no computador a gaveta abre ao lado do painel, e no tablet e no telemóvel fica por baixo dele, à espera. Com
   uma janela de confirmação aberta (.ds-modal), o painel desce para baixo do véu (110), como antes: a confirmação tapa
   tudo e recebe o clique.
   Cada escrita é um cartão com os valores reais e os botões, e nada acontece antes do clique; o que não tem volta pede uma
   palavra escrita. O botão da barra de topo leva data-ds-assistente (o atalho ⌘J ou Ctrl+J carrega nele) e o de fechar
   data-ds-assistente-fechar (o Escape dentro do painel carrega nele). No computador o painel é uma região
   (role="complementary", com nome); no tablet e no telemóvel o engi-ds.js passa-o a diálogo, com o foco preso lá dentro.
   Ícones neutros (uma conversa, não brilhos). Markup na galeria, secção "Assistente". */
.ds-shell,.ds-assistente{--ds-assistente-largura:400px}
.ds-assistente{position:relative;z-index:122;width:var(--ds-assistente-largura);flex:none;display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--ds-surface);border-left:1px solid var(--ds-border);color:var(--ds-text);font-size:14px}
.ds-assistente[hidden]{display:none}
.ds-assistente-head{flex:none;display:flex;align-items:center;gap:4px;height:60px;padding:0 12px 0 16px;border-bottom:1px solid var(--ds-border)}
.ds-assistente-tit{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ds-assistente-tit svg{width:18px;height:18px;flex:none;color:var(--ds-accent)}
.ds-assistente-head .ds-iconbtn{background:transparent;border-color:transparent}
.ds-assistente-head .ds-iconbtn:hover{background:var(--ds-hover);color:var(--ds-text)}
/* A conversa. O overflow-wrap no corpo inteiro: um endereço ou um código sem espaços não alarga o painel. */
.ds-assistente-corpo{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:14px;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:var(--ds-border-strong) transparent}
/* Numa conversa comprida, o corpo rola e nada encolhe: com o encolher do flex, um cartão ficava espremido e cortava os
   botões (visto nas capturas da 3.3.0). */
.ds-assistente-corpo > *{flex-shrink:0}
.ds-assistente-msg{min-width:0;line-height:1.55}
.ds-assistente-msg.pessoa{align-self:flex-end;max-width:85%;padding:9px 13px;background:var(--ds-accent-wash);border-radius:var(--ds-r-lg) var(--ds-r-lg) 4px var(--ds-r-lg);white-space:pre-wrap}
.ds-assistente-msg p,.ds-assistente-msg ul,.ds-assistente-msg ol{margin:0 0 8px}
.ds-assistente-msg ul,.ds-assistente-msg ol{padding-left:20px}
.ds-assistente-msg li + li{margin-top:2px}
.ds-assistente-msg > :last-child{margin-bottom:0}
.ds-assistente-msg code{font-family:var(--ds-codigo);font-size:12.5px;background:var(--ds-subtle);border-radius:4px;padding:1px 4px}
.ds-assistente-msg a{color:var(--ds-accent);font-weight:500;text-decoration:none}
.ds-assistente-msg a:hover{text-decoration:underline}
/* De onde veio a resposta: o artigo da ajuda e o ecrã onde se vê. */
.ds-assistente-fontes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ds-assistente-fonte{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;height:28px;padding:0 10px;border:1px solid var(--ds-border);border-radius:999px;background:var(--ds-surface);color:var(--ds-text);font-size:12.5px;text-decoration:none}
.ds-assistente-fonte svg{width:13px;height:13px;flex:none;color:var(--ds-soft)}
.ds-assistente-fonte span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ds-assistente-fonte:hover{background:var(--ds-hover)}
/* A pensar: só o texto, num role="status". Sem pontos animados nem brilhos: a interface não tem cara de IA (regra do dono). */
.ds-assistente-pensa{color:var(--ds-soft);font-size:13px}
/* Cartão de confirmação: o que vai acontecer, com os valores reais, e os botões. */
.ds-assistente-cartao{min-width:0;border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);background:var(--ds-surface);box-shadow:var(--ds-sombra-caixa);overflow:hidden}
.ds-assistente-cartao-tit{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--ds-cab);color:var(--ds-cab-texto);border-bottom:1px solid var(--ds-cab-linha);font-size:13.5px;font-weight:600}
.ds-assistente-cartao-tit svg{width:15px;height:15px;flex:none}
.ds-assistente-campos{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:6px 14px;margin:0;padding:12px 14px;font-size:13.5px;line-height:1.45}
.ds-assistente-campos dt{max-width:140px;color:var(--ds-soft)}
.ds-assistente-campos dd{margin:0;min-width:0;font-weight:500;white-space:pre-wrap}
/* Em bloco, e não em flex: num flex, o texto e o <b> da palavra eram itens à parte, e o ponto final caía numa linha sozinho. */
.ds-assistente-palavra{display:block;padding:0 14px 12px;font-size:13px;line-height:1.45}
.ds-assistente-palavra .ds-input{display:block;height:var(--ds-controlo-compacto);margin-top:6px}
.ds-assistente-cartao-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--ds-divider)}
.ds-assistente-cartao-acoes .ds-btn{height:var(--ds-controlo-compacto);padding:0 14px}
.ds-assistente-cartao-acoes .abrir{margin-left:auto}
.ds-assistente-cartao.irreversivel{border-color:color-mix(in srgb, var(--ds-danger) 35%, var(--ds-border))}
.ds-assistente-cartao.irreversivel .ds-assistente-cartao-tit{background:var(--ds-etq-danger);color:var(--ds-etq-danger-texto);border-bottom-color:color-mix(in srgb, var(--ds-danger) 20%, var(--ds-border))}
/* Depois do clique, o cartão fica com o resultado no lugar dos botões. */
.ds-assistente-cartao-fim{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--ds-divider);color:var(--ds-soft);font-size:13px}
.ds-assistente-cartao-fim svg{width:15px;height:15px;flex:none}
.ds-assistente-cartao-fim.ok{color:var(--ds-success)}
.ds-assistente-cartao-fim.erro{color:var(--ds-danger)}
/* Conversa vazia: o que se pode pedir. */
.ds-assistente-vazio{margin-block:auto;display:flex;flex-direction:column;gap:12px}
.ds-assistente-vazio h3{margin:0;font-size:16px;font-weight:600}
.ds-assistente-vazio p{margin:0;color:var(--ds-soft);line-height:1.5}
.ds-assistente-sugestoes{display:flex;flex-direction:column;gap:6px}
.ds-assistente-sugestao{display:block;width:100%;padding:9px 12px;border:1px solid var(--ds-border);border-radius:var(--ds-r);background:var(--ds-surface);color:var(--ds-text);font:inherit;font-size:13.5px;line-height:1.4;text-align:left;cursor:pointer}
.ds-assistente-sugestao:hover{background:var(--ds-hover);border-color:var(--ds-accent-line)}
/* As conversas guardadas. A linha é um botão para abrir e outro para apagar. */
.ds-assistente-grupo{margin:8px 0 2px;padding:0 10px;color:var(--ds-soft);font-size:12.5px;font-weight:500}
.ds-assistente-grupo:first-child{margin-top:0}
.ds-assistente-conversa{display:flex;align-items:center;gap:4px;min-width:0;border-radius:var(--ds-r)}
.ds-assistente-conversa:hover,.ds-assistente-conversa.on{background:var(--ds-hover)}
.ds-assistente-conversa > button:first-child{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:0;background:none;color:var(--ds-text);font:inherit;text-align:left;cursor:pointer}
.ds-assistente-conversa b{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:500}
.ds-assistente-conversa small{color:var(--ds-faint);font-size:12px}
.ds-assistente-conversa .ds-iconbtn{background:transparent;border-color:transparent}
.ds-assistente-conversa .ds-iconbtn:hover{background:var(--ds-surface);color:var(--ds-danger)}
/* O pé: o contexto da página, a caixa de escrever e a nota. */
.ds-assistente-pe{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 12px max(12px, env(safe-area-inset-bottom));border-top:1px solid var(--ds-border);background:var(--ds-surface)}
.ds-assistente-contexto{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.ds-assistente-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;height:28px;padding:0 4px 0 10px;border:1px solid var(--ds-border);border-radius:999px;background:var(--ds-subtle);color:var(--ds-text);font-size:12.5px}
.ds-assistente-chip svg{width:13px;height:13px;flex:none;color:var(--ds-soft)}
.ds-assistente-chip span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ds-assistente-chip button{flex:none;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;color:var(--ds-soft);cursor:pointer}
.ds-assistente-chip button:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-assistente-escrever{display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 12px;border:1px solid var(--ds-border-strong);border-radius:var(--ds-r-lg);background:var(--ds-surface)}
.ds-assistente-escrever:focus-within{border-color:var(--ds-accent);box-shadow:0 0 0 3px var(--ds-accent-wash)}
.ds-assistente-escrever textarea{flex:1;min-width:0;min-height:26px;max-height:160px;padding:6px 0;border:0;outline:none;resize:none;background:transparent;color:var(--ds-text);font:inherit;font-size:14px;line-height:1.5;field-sizing:content}
.ds-assistente-escrever .ds-iconbtn{background:var(--ds-accent);border-color:var(--ds-accent);color:var(--ds-accent-fg,#fff)}
.ds-assistente-escrever .ds-iconbtn:disabled{background:var(--ds-subtle);border-color:var(--ds-border);color:var(--ds-faint);cursor:default}
.ds-assistente-nota{color:var(--ds-faint);font-size:12px;line-height:1.4}
/* O botão da barra de topo (3.3.3). Só com o ícone, e por isso a cheio na cor de agir, com o ícone na cor de cima do
   acento (branco no claro; no escuro o acento é claro e o ícone fica escuro, como no botão principal, para ter
   contraste): é o único botão a cheio na barra, e vê-se sem texto. Aberto, ganha um anel à volta, separado do botão pela
   cor da barra, e continua a cheio. Sem animação. O nome e a dica vêm do produto (aria-label e data-tip) e o engi-ds.js
   junta-lhes o atalho do sistema: "Assistente (⌘J)" no Mac, "Assistente (Ctrl+J)" nos outros. E o atalho, escrito na
   tecla do sistema (como o da pesquisa). */
.ds-iconbtn[data-ds-assistente]{background:var(--ds-accent);border-color:var(--ds-accent);color:var(--ds-accent-fg,#fff)}
.ds-iconbtn[data-ds-assistente]:hover{background:color-mix(in srgb, var(--ds-accent) 88%, #000);border-color:color-mix(in srgb, var(--ds-accent) 88%, #000)}
.ds-iconbtn[data-ds-assistente][aria-pressed="true"]{box-shadow:0 0 0 2px var(--ds-surface),0 0 0 4px var(--ds-accent)}
.ds-kbd[data-atalho="j"]::before{content:"Ctrl J"}
.ds-apple .ds-kbd[data-atalho="j"]::before{content:"\2318J"}
/* Abaixo de 1280 o painel estreita: com o menu aberto, a página fica com 580px a 1180. */
@media (max-width:1279px){.ds-shell,.ds-assistente{--ds-assistente-largura:360px}}
/* No tablet e no telemóvel ocupa o ecrã inteiro (camada 122, ver a fundação 06). */
@media (max-width:1024px){.ds-assistente{position:absolute;inset:0;z-index:122;width:auto;border-left:0}}
/* 3.4.1: com o painel aberto no computador, a gaveta da página abre ao lado dele e não por baixo (encostada à direita,
   o painel tapava-lhe 400px). Uma gaveta larga encolhe para caber. No tablet e no telemóvel o painel ocupa o ecrã e a
   gaveta fica por baixo, no lugar dela. */
.ds-shell:has(> .ds-assistente:not([hidden])) .ds-drawer{right:var(--ds-assistente-largura);max-width:calc(100% - var(--ds-assistente-largura) - 24px)}
@media (max-width:1024px){.ds-shell:has(> .ds-assistente:not([hidden])) .ds-drawer{right:0;max-width:94vw}}
/* Uma janela de confirmação aberta tapa tudo, também o painel: ele desce para baixo do véu (120). */
.ds-shell:has(.ds-modal:not([hidden])) > .ds-assistente{z-index:110}
@media (max-width:640px){.ds-assistente-head{padding:0 8px 0 12px}.ds-assistente-corpo{padding:12px}.ds-assistente-pe{padding-inline:8px}}
/* Com o painel aberto no computador (3.3.1). A página fica mais estreita do que o ecrã, e as regras da barra de topo,
   que olham para a largura do ecrã, não chegavam: nas capturas do Engi360 a 1180 os botões da barra passavam por cima do
   cabeçalho do painel, e a 1440 a pesquisa tapava o caminho. Com o painel aberto a barra fica compacta (a pesquisa vira
   lupa, o caminho e o nome da pessoa saem, a organização fica com o quadrado); e entre 1025 e 1439 o menu passa a gaveta
   sobreposta, como no tablet (o botão do menu abre-a), para a página não ficar espremida entre o menu e o painel. */
@media (min-width:1025px){
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-topbar{gap:6px;padding:0 12px}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-topbar .ds-crumb,
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-topbar .ds-user,
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-topbar .ds-topo-extra{display:none}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-orgbtn:has(.ds-org-quad){padding:0 6px;gap:0}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-orgbtn:has(.ds-org-quad) > :not(.ds-org-quad){display:none}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-topbar .ds-lang{padding:1px}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-topbar .ds-lang-opt{padding:2px 5px}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-search{flex:none;width:32px;justify-content:center;padding:0;cursor:pointer}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-search input,
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-search .ds-kbd{display:none}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-search.aberta{position:fixed;top:8px;left:8px;right:8px;width:auto;height:44px;z-index:41;justify-content:flex-start;padding:0 12px;background:var(--ds-surface);box-shadow:var(--ds-shadow-md);cursor:auto}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-search.aberta input{display:block}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-search.aberta .ds-search-panel{left:0;right:0;width:auto;max-height:calc(100vh - 80px)}
}
@media (min-width:1025px) and (max-width:1439px){
  /* O :has() ganha ao .side-fechada por especificidade: com as duas classes ligadas pelo botão, a gaveta abre. */
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-side{display:flex;position:absolute;top:0;left:0;bottom:0;z-index:101;transform:translateX(-100%);transition:transform .22s ease}
  .ds-shell.drawer-aberta:has(> .ds-assistente:not([hidden])) .ds-side{transform:translateX(0);box-shadow:var(--ds-shadow-lg)}
  .ds-shell:has(> .ds-assistente:not([hidden])) .ds-side-backdrop{display:block;position:absolute;inset:0;z-index:100;background:rgba(20,23,31,.38);opacity:0;visibility:hidden;transition:opacity .2s ease}
  .ds-shell.drawer-aberta:has(> .ds-assistente:not([hidden])) .ds-side-backdrop{opacity:1;visibility:visible}
}

/* Documentação (índice + artigo) */
.ds-doc-index{display:flex;flex-direction:column;gap:22px;margin-top:8px}
.ds-doc-sec-tit{font-size:20px;font-weight:600;color:var(--ds-text);margin:0 0 10px}
.ds-doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ds-doc-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);background:var(--ds-surface);text-decoration:none;color:var(--ds-text);font-size:13px;font-weight:500}
.ds-doc-card:hover{background:var(--ds-hover);border-color:var(--ds-accent-line)}
.ds-doc-card-ic{color:var(--ds-accent);display:inline-flex}
.ds-doc-card-tit{min-width:0}
.ds-doc-layout{display:flex;gap:28px;margin-top:8px;align-items:flex-start}
.ds-doc-nav{flex:none;width:230px;display:flex;flex-direction:column;gap:2px;position:sticky;top:8px}
.ds-doc-nav-sec{font-size:13px;font-weight:500;color:var(--ds-soft);margin:12px 0 4px}
.ds-doc-nav-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--ds-r);color:var(--ds-soft);text-decoration:none;font-size:13px}
.ds-doc-nav-item:hover{background:var(--ds-hover);color:var(--ds-text)}
.ds-doc-nav-item.on{background:var(--ds-subtle);color:var(--ds-text);font-weight:600}
.ds-doc-artigo{flex:1;min-width:0}
.ds-doc-volta{color:var(--ds-accent);text-decoration:none}
.ds-doc-volta:hover{text-decoration:underline}
@media (max-width:820px){.ds-doc-layout{flex-direction:column}.ds-doc-nav{width:100%;position:static}}

/* Novidades / changelog */
.ds-novidades{display:flex;flex-direction:column;gap:18px;margin-top:8px;max-width:960px;margin-inline:auto}
.ds-novidade{border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);background:var(--ds-surface);padding:16px 18px}
.ds-novidade-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.ds-novidade-num{font-size:13px;font-weight:600;color:var(--ds-soft);background:none;border:0;padding:0}
.ds-novidade-data{font-size:12px;color:var(--ds-faint)}
.ds-novidade-tit{font-size:16px;font-weight:600;margin:2px 0 6px}

/* "As minhas notificações" (ecrã inteiro) + rodapé do sino */
/* A página inteira: lista sobre branco, sem caixa. */
.ds-notif-lista{max-width:760px;margin-top:8px;border:0;border-top:1px solid var(--ds-border);border-radius:0;background:none}
.ds-notif-lista .ds-notif-item:last-child{border-bottom:none}
.ds-notif-foot{display:block;text-align:left;padding:12px 16px;border-top:1px solid var(--ds-border);color:var(--ds-accent);font-size:14px;font-weight:600;text-decoration:none}
.ds-notif-foot:hover{text-decoration:underline}

/* Atalho às Novidades no índice da documentação */
.ds-doc-novidades{display:flex;align-items:center;gap:12px;max-width:760px;margin:4px 0 18px;padding:12px 16px;border:0;border-radius:var(--ds-r-lg);background:var(--ds-subtle);text-decoration:none;color:var(--ds-text)}
.ds-doc-novidades:hover{background:var(--ds-hover)}
.ds-doc-novidades .ds-doc-card-ic{color:var(--ds-accent)}
.ds-doc-novidades-txt{display:flex;flex-direction:column;flex:1;min-width:0;font-size:13px}
.ds-doc-novidades-txt b{font-weight:600}
.ds-doc-novidades-txt span{color:var(--ds-soft)}

/* Editor do dashboard (personalizar/organização) */
.ds-dash-edit .ds-dash-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--ds-divider)}
.ds-dash-edit .ds-dash-row:last-of-type{border-bottom:none}
.ds-dash-ic{color:var(--ds-soft);display:inline-flex}
.ds-dash-tit{flex:1;min-width:0;font-size:13px;color:var(--ds-text)}
.ds-iconbtn:disabled{opacity:.4;cursor:default}
/* Barra do cabeçalho da Home com ação Personalizar */
.ds-home-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}

/* Monitorização: barra de uptime (N segmentos, 1 por hora/dia) + farol de estado */
.ds-uptime{display:flex;gap:2px;align-items:stretch;height:26px}
.ds-uptime .seg{flex:1;min-width:2px;border-radius:2px;background:var(--ds-divider)}
.ds-uptime .seg.ok{background:var(--ds-success)}
/* Degradado: pêssego, entre a menta do que está bem e o vermelho do que está em baixo. */
.ds-uptime .seg.warn{background:var(--ds-etq-falta-traco)}
.ds-uptime .seg.danger{background:var(--ds-danger)}
.ds-uptime .seg.na{background:var(--ds-divider)}
.ds-uptime-legend{display:flex;justify-content:space-between;margin-top:5px;font-size:12px;color:var(--ds-faint)}
.ds-farol{width:12px;height:12px;border-radius:50%;flex:none;background:var(--ds-faint)}
.ds-farol.ok{background:var(--ds-success)}
.ds-farol.danger{background:var(--ds-danger)}
.ds-farol.muted{background:var(--ds-faint)}
.ds-mon-card-head{display:flex;align-items:center;gap:8px}
.ds-mon-up{font-size:22px;font-weight:600;line-height:1}
.ds-mon-up.ok{color:var(--ds-success)}
.ds-mon-up.warn{color:var(--ds-etq-falta-texto)}
.ds-mon-up.danger{color:var(--ds-danger)}
.ds-mon-up.muted{color:var(--ds-faint)}

/* Automação: fluxo visual em caixinhas (1 gatilho -> N condições -> N ações) */
.ds-flow{display:flex;flex-direction:column;align-items:stretch;gap:0}
.ds-flow-node{border:1px solid var(--ds-border);border-left:3px solid var(--ds-faint);border-radius:var(--ds-r-lg);background:var(--ds-surface);padding:12px 14px}
.ds-flow-node.quando{border-left-color:var(--ds-accent)}
.ds-flow-node.se{border-left-color:var(--ds-etq-warn-traco)}
.ds-flow-node.entao{border-left-color:var(--ds-success)}
.ds-flow-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ds-flow-badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:3px;color:#fff;background:var(--ds-faint)}
.ds-flow-badge.quando{background:var(--ds-accent);color:var(--ds-accent-fg,#fff)}
.ds-flow-badge.se{background:var(--ds-etq-warn-traco)}
.ds-flow-badge.entao{background:var(--ds-success)}
.ds-flow-title{font-size:13px;font-weight:600;color:var(--ds-text)}
/* conector vertical (seta) entre nós */
.ds-flow-arrow{align-self:center;width:2px;height:18px;background:var(--ds-border-strong,var(--ds-border));position:relative}
.ds-flow-arrow::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ds-border-strong,var(--ds-border))}
/* sub-caixas (uma condição / uma ação) */
.ds-flow-item{border:1px solid var(--ds-border);border-radius:var(--ds-r);background:var(--ds-canvas,var(--ds-surface));padding:8px 10px;margin-bottom:6px}
.ds-flow-item:last-child{margin-bottom:0}
.ds-flow-join{font-size:10px;font-weight:700;color:var(--ds-faint);text-align:center;margin:2px 0}
.ds-flow-empty{font-size:12px;color:var(--ds-faint);font-style:italic}

/* ===========================================================================
   Responsivo — tablet e ecrãs estreitos (iPad em retrato/paisagem).
   O DS é desktop-first; este bloco reflui o shell e os layouts de 2 colunas.
   A meta viewport é width=device-width, logo o iPad renderiza à largura real.

   MENU (mesmo botão, dois estados, cada um só válido no seu breakpoint):
   - Desktop (>1024): .side-fechada colapsa a sidebar em fluxo (regra lá em cima).
   - Tablet (<=1024): .drawer-aberta desliza a sidebar como gaveta SOBREPOSTA
     (position:absolute dentro do .ds-shell, que tem overflow:hidden -> fora do
     ecrã fica recortada, sem scroll horizontal). O MainShell alterna ambos os
     flags e fecha a gaveta ao navegar (NavigationManager.LocationChanged).
   ======================================================================== */
@media (max-width:1024px){
  /* Sidebar -> gaveta sobreposta */
  /* A sombra só com a gaveta aberta: fechada, espreitava na borda esquerda do conteúdo. */
  .ds-side{position:absolute;top:0;left:0;bottom:0;z-index:101;
    transform:translateX(-100%);transition:transform .22s ease}
  .ds-shell.drawer-aberta .ds-side{transform:translateX(0);box-shadow:var(--ds-shadow-lg)}
  .ds-side-backdrop{display:block;position:absolute;inset:0;z-index:100;background:rgba(20,23,31,.38);
    opacity:0;visibility:hidden;transition:opacity .2s ease}
  .ds-shell.drawer-aberta .ds-side-backdrop{opacity:1;visibility:visible}

  /* Topbar: menos folga, esconder o que consome espaço, nunca transbordar */
  .ds-topbar{padding:0 12px;gap:8px}   /* 8px e não 10: com o comutador de planos e a lupa, a 768px cada píxel conta */
  .ds-topbar .ds-user{display:none}     /* fica o avatar; o nome sai */
  .ds-orgbtn{max-width:150px}
  .ds-content{padding:20px 16px 40px}

  /* Layouts de 2 colunas passam a empilhar */
  .ds-wiki{flex-direction:column;gap:16px}
  /* empilhado, o índice está no topo do fluxo: colá-lo tirava metade do ecrã à leitura (#50) */
  .ds-wiki-side{width:100%;position:static;max-height:none;overflow:visible}
  .ds-wiki-main{max-width:none}
  .ds-cfg{flex-direction:column;gap:16px}
  .ds-cfg.nav-fechada{gap:16px}
  .ds-cfg-nav{flex:none;width:100%;position:static;max-height:none;overflow:visible}
  .ds-field-row.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Toolbars deixam de transbordar (selects com min-width fixo passam a nova linha) */
  .ds-toolbar{flex-wrap:wrap}
}

@media (max-width:640px){
  .ds-page{flex-direction:column;align-items:flex-start;gap:12px}
  /* Em coluna, a base de 320px seria altura: o título ficava com 320px de alto. */
  .ds-page > :first-child{flex:none;width:100%}
  .ds-page > .ds-actions{margin-left:0}
  /* Barra de topo a 390px (3.0.1, visto no EngiFinance): com organização, sino, ajuda, idioma e pessoa não cabia, e o
     que sobrava saía do ecrã. Sai o caminho (o título da página diz onde se está), a organização fica só com o
     quadrado, o idioma fica mais compacto, e o que o produto marcar com .ds-topo-extra (a empresa ativa, por exemplo)
     sai. Os botões de ícone mantêm o tamanho, para se acertar com o dedo. */
  .ds-topbar{gap:4px;padding:0 8px}
  .ds-topbar .ds-crumb,.ds-topbar .ds-topo-extra{display:none}
  .ds-orgbtn:has(.ds-org-quad){padding:0 6px;gap:0}
  .ds-orgbtn:has(.ds-org-quad) > :not(.ds-org-quad){display:none}
  .ds-topbar .ds-lang{padding:1px}
  .ds-topbar .ds-lang-opt{padding:2px 5px}
  /* Segmentado com quatro estados e contagens: rola para o lado, como os separadores. */
  .ds-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .ds-seg::-webkit-scrollbar{display:none}
  .ds-seg button{flex:none}
  /* Com três botões no topo, o terceiro saía do ecrã a 390px. */
  .ds-actions{flex-wrap:wrap}
  /* Quatro separadores com contagem não cabem: rolam para o lado, sem barra à vista. */
  .ds-tabs{overflow-x:auto;scrollbar-width:none}
  .ds-tabs::-webkit-scrollbar{display:none}
  /* Tabela empilhada (.ds-table.empilha): no telemóvel cada linha é um bloco de duas colunas, como num extrato.
     A primeira célula (a descrição) fica em cima à esquerda, a do valor (td.num) em cima à direita; as outras
     seguem por baixo, e a última (a ação ou o estado) fica à direita. Os dias (tr.ds-dia) mantêm-se. */
  .ds-tablewrap:has(> .ds-table.empilha){overflow-x:visible}
  .ds-table.empilha,.ds-table.empilha tbody{display:block;width:100%}
  .ds-table.empilha thead{display:none}
  .ds-table.empilha tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:12px 14px;border-bottom:1px solid var(--ds-divider)}
  .ds-table.empilha tbody tr:hover{background:none}
  .ds-table.empilha td{display:block;padding:0;border:0;white-space:normal;overflow:visible;width:auto!important;max-width:none!important}
  /* 3.3.2: empilhada, uma célula com uma ligação também parte (a regra das células com controlos ganhava a esta). */
  .ds-table.empilha td:has(a:not(.ds-link-linha)){white-space:normal;overflow:visible}
  .ds-table.empilha td:first-child{grid-column:1;grid-row:1;font-weight:500}
  .ds-table.empilha td.num{grid-column:2;grid-row:1;text-align:right}
  .ds-table.empilha td:not(:first-child):not(.num){font-size:13px;color:var(--ds-faint)}
  .ds-table.empilha td:last-child:not(.num):not(:first-child){grid-column:2;text-align:right;font-size:14px;color:inherit}
  /* Linha sem td.num (3.1.2): a segunda célula ia para o lado da primeira, a coluna da direita esticava até à largura
     dela, e o nome ficava espremido (capacidades de um papel por cima do nome, 28px para o nome de um conector com
     cinco botões; EngiAIFlow). Sem valor para pôr à direita, as células seguem por baixo, à largura toda. */
  .ds-table.empilha tr:not(:has(> td.num)) > td:not(:first-child){grid-column:1/-1}
  .ds-table.empilha tr:not(:has(> td.num)) > td:last-child:not(:first-child){grid-column:1/-1;text-align:left}
  .ds-table.empilha tr.ds-dia{display:block;padding:16px 14px 6px;border-bottom:1px solid var(--ds-border)}
  .ds-table.empilha tr.ds-dia td{padding:0;border:0}
  /* Mais de um valor na linha (Clientes, Projetos, Rateio): só o primeiro fica em cima à direita; os outros descem e
     ocupam a linha toda, com o rótulo da coluna se a célula o trouxer (data-rotulo), já que o cabeçalho se esconde. */
  .ds-table.empilha td.num ~ td.num{grid-row:auto;grid-column:1/-1;text-align:left;font-size:13px;color:var(--ds-soft)}
  .ds-table.empilha td[data-rotulo]::before{content:attr(data-rotulo) " ";color:var(--ds-faint)}
  /* A linha dos totais, empilhada como as outras, com uma linha mais forte por cima. */
  .ds-table.empilha tfoot{display:block}
  .ds-table.empilha tfoot tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:12px 4px;border-top:1px solid var(--ds-border-strong)}
  .ds-table.empilha tfoot td{display:block;padding:0;border:0}
  .ds-table.empilha tfoot td:empty{display:none}
  .ds-field-row,.ds-field-row.cols-3{grid-template-columns:minmax(0,1fr)}
  .ds-kpis{flex-direction:column}
  .ds-kpi{border-right:0;border-bottom:1px solid var(--ds-border)}
  .ds-kpi:last-child{border-bottom:0}
  .ds-drawer,.ds-drawer.wide{width:100vw;max-width:100vw}
  .ds-orgbtn{max-width:110px}
  .ds-prop{grid-template-columns:1fr}
  .ds-prop dt{margin-top:6px}
}

/* ---- Overlay de reconexão do Blazor Server ----
   Substitui a UI por omissão ("Rejoining the server"): o blazor.web.js troca classes no elemento
   #components-reconnect-modal (components-reconnect-show = a tentar; -failed = desistiu; -rejected =
   o servidor já não conhece o circuito). Camada 130: acima do modal (122), nada é clicável por baixo.
   Sem JS nosso (a CSP bloqueia on*= inline): a ação de falha é um link href="" que recarrega. */
#components-reconnect-modal{display:none}
/* A TENTAR (decisão do dono, #59, 2026-08-17: "nunca aparecer a mensagem"): deixa de ser um painel a
   tapar o ecrã e passa a ser um cartão discreto no canto, e SÓ ao fim de uns segundos — a maioria das
   quebras resolve-se antes disso e nunca chega a mostrar nada. O trabalho por gravar está protegido
   pelos rascunhos locais (engiDsRascunho), por isso isto é informação, não alarme. */
#components-reconnect-modal.components-reconnect-show{display:block;position:fixed;right:18px;bottom:18px;z-index:130;opacity:0;animation:ds-reconnect-aparecer .3s ease 6s forwards}
#components-reconnect-modal.components-reconnect-show .ds-reconnect-card{width:auto;max-width:340px;flex-direction:row;text-align:left;padding:12px 16px;gap:10px;box-shadow:var(--ds-shadow-md)}
#components-reconnect-modal.components-reconnect-show .ds-reconnect-dots{margin:0}
#components-reconnect-modal.components-reconnect-show .ds-reconnect-text{display:none}
#components-reconnect-modal.components-reconnect-show .ds-reconnect-title{font-size:12.5px;font-weight:500;color:var(--ds-soft)}
@keyframes ds-reconnect-aparecer{to{opacity:1}}
/* FALHOU de vez: aí sim, painel ao centro com a ação de recarregar — um clique num ecrã morto sem
   explicação seria pior do que qualquer aviso. */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected{display:flex;position:fixed;inset:0;z-index:130;align-items:center;justify-content:center;background:rgba(20,23,31,.45);backdrop-filter:blur(3px)}
.ds-reconnect-card{width:380px;max-width:92vw;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-lg,0 14px 34px rgba(16,24,40,.18));padding:28px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.ds-reconnect-dots{display:flex;gap:6px;margin-bottom:4px}
.ds-reconnect-dots span{width:7px;height:7px;border-radius:50%;background:var(--ds-accent);opacity:.4;animation:ds-reconnect-pulse 1.2s ease-in-out infinite}
.ds-reconnect-dots span:nth-child(2){animation-delay:.15s}
.ds-reconnect-dots span:nth-child(3){animation-delay:.3s}
.ds-reconnect-dots span:nth-child(4){animation-delay:.45s}
@keyframes ds-reconnect-pulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
.ds-reconnect-title{font-weight:600;font-size:14px;color:var(--ds-text)}
.ds-reconnect-text{font-size:12.5px;color:var(--ds-soft);line-height:1.55;max-width:300px;margin:4px auto 0}
.ds-reconnect-retry{margin-top:12px}
.ds-reconnect-retry .ds-btn{text-decoration:none}
/* por omissão vê-se o par "a tentar"; nos estados de falha troca-se a mensagem e param os pontos */
.ds-reconnect-quando-falha{display:none}
#components-reconnect-modal.components-reconnect-failed .ds-reconnect-quando-tenta,
#components-reconnect-modal.components-reconnect-rejected .ds-reconnect-quando-tenta{display:none}
#components-reconnect-modal.components-reconnect-failed .ds-reconnect-quando-falha,
#components-reconnect-modal.components-reconnect-rejected .ds-reconnect-quando-falha{display:block}
#components-reconnect-modal.components-reconnect-failed .ds-reconnect-dots span,
#components-reconnect-modal.components-reconnect-rejected .ds-reconnect-dots span{animation:none;opacity:.25}

/* ---- Tooltip instantâneo (topbar) ----
   O title nativo demora 1-2 s a aparecer e o temporizador reinicia a cada re-render do Blazor (o sino
   refresca a topbar), o que o tornava errático (ticket #25). Bolha em CSS puro, ancorada à direita
   (os ícones com tooltip vivem no canto direito da topbar). */
[data-tip]{position:relative;}
[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;z-index:200;background:var(--ds-text);color:var(--ds-surface);font-size:11.5px;line-height:1;padding:6px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .12s ease .12s,transform .12s ease .12s;}
[data-tip]:hover::after{opacity:1;transform:none;}

/* ---- Tabelas ajustáveis (larguras à Excel + colunas visíveis, guardado por utilizador) ---- */
.ds-th-pega{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;user-select:none;z-index:5;touch-action:none}
/* Indicador da coluna ordenada (SVG, nunca um caractere) e affordance do cabeçalho clicável. */
.ds-th-ordem{display:inline-flex;vertical-align:middle;margin-left:4px;color:var(--ds-accent)}
.ds-table thead th[data-ordenavel="1"]:hover{color:var(--ds-text)}
/* A última coluna não tem vizinha: a pega fica toda DENTRO dela e mais larga, senão fica na borda
   extrema (recortada pelo overflow do wrap) e não há onde agarrar. */
.ds-table thead th:last-child .ds-th-pega{right:0;width:12px}
.ds-th-pega:hover{background:var(--ds-accent);opacity:.35}
/* A pega não se via: descobria-se por acaso, com o rato no sítio exato, e não estando no início da
   coluna seguinte ninguém adivinha que está ali (ticket #63 do André). Passa a haver um traço fino
   permanente no limite entre colunas, que é precisamente onde se agarra. O traço fica no LIMITE e não
   no meio da pega: a pega é mais larga do que a fronteira, de propósito, para ser fácil de apanhar. */
.ds-th-pega::before{content:"";position:absolute;top:7px;bottom:7px;right:3px;width:1px;background:var(--ds-border-strong)}
/* O traço só existe ENTRE colunas com nome. Duas situações em que não separa nada e fica uma barra solta
   (dono, na revisão do #63): a última coluna, que não tem vizinha à direita, e a coluna antes da coluna
   de ações, que é um <th> vazio (os chevrons) e portanto não se lê como coluna nenhuma. A PEGA continua a
   existir nos dois casos, porque essas colunas também se ajustam; o que desaparece é só o traço. */
.ds-table thead th:last-child .ds-th-pega::before,
.ds-table thead th[data-sem-nome] .ds-th-pega::before,
.ds-table thead th:has(+ th[data-sem-nome]) .ds-th-pega::before{display:none}
.ds-th-pega:hover::before{background:var(--ds-accent)}
/* A engrenagem vive DENTRO do .ds-tablewrap, que é o contentor com scroll: um position:absolute aqui é
   relativo ao CONTEÚDO, não à parte visível, portanto ao rolar para o lado a engrenagem passeava por cima
   do cabeçalho (aparecia "E[engrenagem]DO" em vez de "ESTADO"). O engiDsTabelas mantém-na colada à
   direita VISÍVEL com um translateX(scrollLeft); o fundo é opaco para nunca deixar texto por baixo. */
.ds-tabela-cfg{position:absolute;top:6px;right:6px;z-index:6;width:24px;height:24px;border:1px solid var(--ds-border);border-radius:var(--ds-r);background:var(--ds-surface);color:var(--ds-faint);cursor:pointer;font-size:13px;line-height:1;opacity:0;transition:opacity .12s ease;box-shadow:0 0 0 3px var(--ds-surface)}
.ds-tablewrap:hover .ds-tabela-cfg{opacity:1}
.ds-tabela-cfg:hover{color:var(--ds-text)}
/* Num ecrã tátil não há hover: a engrenagem ficava invisível para sempre e a configuração das colunas
   era inalcançável em tablet (apanhado pelo dono, 2026-08-10). Aqui fica sempre visível, e maior, para
   ser tocável com o dedo. A pega de arrastar também cresce, pela mesma razão. */
@media (hover: none) {
    /* Sempre visível e colada à direita VISÍVEL, tapava o nome da coluna que lá estivesse ("CLIENTI" e a
       engrenagem por cima, #187 do Engi360). A faixa própria por cima do cabeçalho resolveu isso mas deixava
       uma linha vazia em todas as tabelas do tablet (o dono, 2026-10-01: "um header com duas linhas"). Na 3.1.8
       a engrenagem é uma tampa opaca no canto do próprio cabeçalho, com a altura dele (o JS escreve-a em
       --ds-cfg-altura). A tabela acaba 44px antes da borda, e a tampa fica sobre esse espaço: parada ou rolada até
       ao fim, nenhuma coluna fica por baixo dela. A meio, as colunas passam por baixo da tampa como por baixo de uma
       coluna fixa, sem se lerem através. Não se reserva espaço no último th: as larguras automáticas das colunas
       são border-box, e o padding a mais encolhia o nome em vez de alargar a coluna. */
    .ds-tabela-cfg{opacity:1;top:0;right:0;width:44px;height:var(--ds-cfg-altura,44px);border:0;border-left:1px solid var(--ds-cab-linha);border-radius:0 var(--ds-r-lg) 0 0;background:var(--ds-cab);box-shadow:-8px 0 8px -8px rgba(11,4,38,.18);font-size:15px}
    .ds-tablewrap:has(> .ds-tabela-cfg) > .ds-table{width:calc(100% - 44px);margin-right:44px}
    .ds-tabela-menu{top:42px}
    .ds-th-pega{width:16px;right:-8px}
    .ds-th-pega::before{right:8px}
}
/* Barra de paginação: último filho do .ds-tablewrap (como a engrenagem) e colada à esquerda VISÍVEL —
   o wrap é o contentor com scroll horizontal, e um filho normal fugia do ecrã ao rolar a tabela. */
.ds-tabela-paginacao{position:sticky;left:0;display:flex;align-items:center;gap:14px;padding:10px 12px;border-top:1px solid var(--ds-border);font-size:14px;color:var(--ds-soft);background:var(--ds-surface);border-radius:0 0 var(--ds-r-lg) var(--ds-r-lg)}
.ds-tabela-paginacao-tam{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ds-tabela-paginacao-tam select{font:inherit;color:var(--ds-text);background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r);padding:2px 4px;cursor:pointer}
.ds-tabela-paginacao-conta{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.ds-tabela-paginacao-botoes{display:flex;gap:4px}
/* o chevron é o mesmo do menu de colunas, deitado: uma seta só desenhada em toda a app */
.ds-tabela-paginacao-seta svg{transform:rotate(-90deg)}
/* Vive no <body> em position:fixed (posicionado pelo engiDsTabelas): dentro do .ds-tablewrap era
   CORTADO pelo overflow do wrap — numa tabela de duas linhas via-se meio menu. */
.ds-tabela-menu{position:fixed;z-index:125;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-md);padding:8px;min-width:224px;max-height:320px;overflow-y:auto}
.ds-tabela-menu-item{display:flex;align-items:center;gap:4px;padding:4px 6px 4px 8px;font-size:14px;color:var(--ds-text);border-radius:var(--ds-r)}
.ds-tabela-menu-item:hover{background:var(--ds-hover)}
/* o rótulo é que é <label>, não a linha: dentro de um label as setas trocavam a visibilidade da coluna */
.ds-tabela-menu-nome{flex:1;min-width:0;display:flex;align-items:center;gap:6px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* setas de ordem: 24×24 para serem clicáveis com o dedo em tablet (o DS é desktop-first, mas o menu é tocável) */
.ds-tabela-menu-seta{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ds-border);border-radius:var(--ds-r);background:var(--ds-surface);color:var(--ds-soft);cursor:pointer;line-height:0;padding:0}
.ds-tabela-menu-seta svg{display:block}
.ds-tabela-menu-seta:hover:not(:disabled){color:var(--ds-text);border-color:var(--ds-accent)}
.ds-tabela-menu-seta:disabled{opacity:.3;cursor:default}
/* A mesma barra numa lista que não é tabela (grelha de cartões, lista de blocos).
   Três coisas mudam, e as três porque o contentor não é a caixa de uma tabela:
   - a decoração sai (borda de cima, fundo e cantos de baixo fechavam a caixa do .ds-tablewrap;
     por cima de uma grelha sem caixa ficava uma faixa solta);
   - passa a ocupar a linha inteira: .ds-cards é display:grid e .ds-kanban é flex, e sem isto a
     barra era desenhada como MAIS UM CARTÃO ao lado dos outros;
   - o position:sticky perde o sentido, porque só o .ds-tablewrap é scrollport horizontal.
   E deixa-se quebrar: com dois nowrap num flex sem wrap a barra tem min-content de ~340px, e os
   contentores de cartões são estreitos por construção (252px de track). */
.ds-lista-paginacao{position:static;grid-column:1/-1;flex-basis:100%;width:100%;background:none;border-top:1px solid var(--ds-border);border-radius:0;margin-top:4px}
/* O --ds-divider e para separar dentro de uma superficie clara; sobre a tela da app dava 1,05:1 de
   contraste, ou seja um tracinho invisivel. Sobre a tela usa-se a borda. */
/* A barra tem dois nowrap num flex, portanto min-content de ~338px. Deixa-se quebrar em qualquer
   contentor estreito, e nao so nas grelhas: em toque a barra e mais alta e o problema aparece antes. */
.ds-tabela-paginacao{flex-wrap:wrap;row-gap:6px}

/* Num tablet, mudar de página é com o dedo: 24px é alvo de rato. Tem de vir DEPOIS do .ds-tabela-menu-seta
   (as setas da paginação reutilizam-no) — mesma especificidade, ganha a última regra. */
@media (hover: none) {
    .ds-tabela-paginacao-seta{width:32px;height:32px}
    .ds-tabela-paginacao-tam select{padding:5px 6px}
}

/* ---- Pré-visualização de anexos com zoom (LightboxImagem) ----
   Ocupa quase todo o ecrã: o limite de 1100px que aqui esteve tornava ilegível uma captura de ecrã
   grande (dono, 2026-08-10). A imagem é transformada pelo engiDsZoom; o corte é feito pela "tela", que
   também reclama o gesto (touch-action:none) para o browser não rolar a página ao arrastar/ampliar. */
.ds-lightbox{width:min(96vw,1600px);max-width:96vw;display:flex;flex-direction:column;max-height:94vh}
.ds-lightbox-topo{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13.5px;font-weight:400;border-bottom:1px solid var(--ds-divider)}
.ds-lightbox-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.ds-lightbox-zoom{display:flex;align-items:center;gap:4px;flex:none}
.ds-lightbox-valor{min-width:46px;text-align:center;font-size:12px;color:var(--ds-soft)}
.ds-lightbox-tela{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ds-canvas);touch-action:none;user-select:none}
.ds-lightbox-tela img{max-width:100%;max-height:100%;transform-origin:center center;will-change:transform}
.ds-lightbox-dica{padding:8px 12px;font-size:11.5px;color:var(--ds-faint);border-top:1px solid var(--ds-divider)}
/* Em tablet a barra de zoom fica maior (alvos de toque) e a dica desaparece: o gesto é o dos dois dedos. */
@media (hover: none){
    .ds-lightbox-zoom .ds-iconbtn{width:34px;height:34px}
    .ds-lightbox-dica{display:none}
}

/* ---- Reações com emoji nos comentários ---- */
.ds-reacoes{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px}
.ds-reacao{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--ds-border);border-radius:999px;background:var(--ds-surface);color:var(--ds-soft);font-size:12px;line-height:1;cursor:pointer}
.ds-reacao:hover:not(:disabled){border-color:var(--ds-accent);color:var(--ds-text)}
.ds-reacao.minha{border-color:var(--ds-accent);background:var(--ds-accent-wash);color:var(--ds-text)}
.ds-reacao .emoji{font-size:13px;line-height:1}
.ds-reacao:disabled{opacity:.6;cursor:default}
.ds-reacao-add{color:var(--ds-faint);padding:0 6px}
/* A paleta é POSITION:ABSOLUTE sobre um contentor relativo próprio: dentro de uma bolha de chat com
   overflow, um menu em fluxo empurrava o conteúdo e podia ser cortado (a lição do menu das colunas). */
.ds-reacoes-add{position:relative;display:inline-flex}
.ds-reacoes-paleta{position:absolute;bottom:calc(100% + 4px);left:0;z-index:60;display:flex;gap:2px;padding:4px;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-md)}
.ds-reacao-op{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:var(--ds-r);background:transparent;font-size:15px;line-height:1;cursor:pointer}
.ds-reacao-op:hover:not(:disabled){background:var(--ds-hover)}
/* Em tablet os alvos crescem (regra da casa: tocável com o dedo). */
@media (hover: none){
    .ds-reacao{height:30px}
    .ds-reacao-op{width:34px;height:34px;font-size:17px}
}

/* ---- Alvos de toque em tablet (varrimento portrait 768x1024, 2026-08-17) ----
   Os três reincidentes: os botões compactos da árvore do Conhecimento (24px), o "marcar como lida" dos
   avisos (28px) e os segmentos de vista (Dias/Mês/Ano, períodos das horas: 28px de altura). Em ecrã
   tátil crescem para >=32px, que é o mínimo para um dedo não falhar; em desktop ficam como estão. */
@media (hover: none){
    .ds-iconbtn-sm{width:32px;height:32px}
    .ds-notif-lida{width:34px;height:34px}
    .ds-seg button{padding:9px 15px}
}

/* ---- Linha do tempo do histórico de um item (aba "Histórico" em tickets e tarefas) ---- */
/* O fio corre atrás das bolas, num pseudo-elemento da lista: pintá-lo em cada item deixava um degrau
   entre linhas de alturas diferentes (uma alteração com 1 campo e outra com 5). */
.ds-timeline{list-style:none;margin:0;padding:0;position:relative}
.ds-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--ds-border)}
.ds-tl-i{position:relative;padding:0 0 16px 22px}
.ds-tl-i:last-child{padding-bottom:0}
.ds-tl-dot{position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:999px;background:var(--ds-surface);border:2px solid var(--ds-faint);box-sizing:border-box}
.ds-tl-dot.ok{border-color:var(--ds-success)}
.ds-tl-dot.info{border-color:var(--ds-info)}
.ds-tl-dot.danger{border-color:var(--ds-danger)}
.ds-tl-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:3px}
.ds-tl-quem{font-weight:600;color:var(--ds-text)}
.ds-tl-quando{font-size:12px;color:var(--ds-faint)}
.ds-tl-corpo{display:flex;flex-direction:column;gap:2px}
/* Os valores podem ser um assunto inteiro colado sem espaços: quebra-se dentro da palavra em vez de
   esticar a linha do tempo e pôr a página a rolar de lado. */
.ds-tl-linha{display:flex;flex-wrap:wrap;align-items:center;gap:5px;color:var(--ds-soft);overflow-wrap:anywhere}
.ds-tl-linha.soft{color:var(--ds-faint);font-style:italic}
.ds-tl-linha svg{color:var(--ds-faint);flex:none}
.ds-tl-campo{color:var(--ds-text);font-weight:500}
.ds-tl-campo::after{content:":"}
.ds-tl-de{text-decoration:line-through;text-decoration-color:var(--ds-faint);color:var(--ds-faint)}
.ds-tl-para{color:var(--ds-text)}