/* ═══════════════════════════════════════════════════════════
   SIS CORE — DESIGN SYSTEM "QUIET LIGHT"
   Padrão oficial Santosom · Inter + JetBrains Mono · azul Apple
   Cinzas neutros (sem tinta azul), hairlines, vidro fosco nos
   overlays. Pensado para longas horas de ecrã.
   ═══════════════════════════════════════════════════════════
   AS VARIÁVEIS NÃO VIVEM AQUI. Desde 31/07 (Convenção UI F4) as
   declarações — :root, [data-theme=dark], as 5 skins e o eixo
   de MEDIDA [data-layout] — estão em assets/tokens.css, que é
   linkado ANTES desta folha e é a mesma folha que os módulos
   embebem. Aqui ficam só COMPONENTES, e consomem-se por token:
   var(--bg*), var(--text*), var(--h-topbar), var(--r-card)…
   Número estrutural novo escrito à mão nesta folha é dívida:
   nasce token no tokens.css, senão o eixo data-layout não lhe
   chega e as 3 medidas voltam a ser uma só.
   ═══════════════════════════════════════════════════════════ */

/* tipos de política — variantes escuras dos tons fixos */
:root[data-theme="dark"] .policy-chip--def{background:#122630;color:#64d2ff;border-color:#1f455a}
:root[data-theme="dark"] .policy-chip--regra{background:#16283f;color:#409cff;border-color:#24466b}
:root[data-theme="dark"] .policy-chip--proc{background:#132a1a;color:#45c866;border-color:#245c33}
:root[data-theme="dark"] .policy-chip--kpi{background:#2c2113;color:#f0a63c;border-color:#54401d}
:root[data-theme="dark"] .policy-chip--aviso{background:#331a19;color:#ff6961;border-color:#66302c}
:root[data-theme="dark"] .policy-chip--conduta{background:#251831;color:#cf8ff0;border-color:#4a2f60}
:root[data-theme="dark"] .pol-card--def{border-left-color:#64d2ff}
:root[data-theme="dark"] .pol-card--regra{border-left-color:#409cff}
:root[data-theme="dark"] .pol-card--proc{border-left-color:#45c866}
:root[data-theme="dark"] .pol-card--kpi{border-left-color:#f0a63c}
:root[data-theme="dark"] .pol-card--aviso{border-left-color:#ff6961}
:root[data-theme="dark"] .pol-card--conduta{border-left-color:#cf8ff0}
:root[data-theme="dark"] .pp-def .pp-section-head,:root[data-theme="dark"] .pp-section-head.pp-def{color:#64d2ff}
:root[data-theme="dark"] .pp-regra .pp-section-head,:root[data-theme="dark"] .pp-section-head.pp-regra{color:#409cff}
:root[data-theme="dark"] .pp-proc .pp-section-head,:root[data-theme="dark"] .pp-section-head.pp-proc{color:#45c866}
:root[data-theme="dark"] .pp-kpi .pp-section-head,:root[data-theme="dark"] .pp-section-head.pp-kpi{color:#f0a63c}
:root[data-theme="dark"] .pp-aviso .pp-section-head,:root[data-theme="dark"] .pp-section-head.pp-aviso{color:#ff6961}
:root[data-theme="dark"] .pp-conduta .pp-section-head,:root[data-theme="dark"] .pp-section-head.pp-conduta{color:#cf8ff0}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:var(--fs-base);display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto}
::selection{background:var(--sel)}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:inherit;color:inherit}
/* (07/10/2026) CAMPO DE BASE dentro de uma página: as páginas que escrevem
   <input>/<select> sem classe ficavam com o desenho do browser (contorno preto,
   cantos a direito) — Pessoas & Acessos, Taxonomia, SYSCRM · Definições…
   `:where()` tem especificidade ZERO: só ganha ao estilo do browser; qualquer
   classe de uma página (.field input, .pol-search, …) ou estilo inline continua
   a mandar, venha antes ou depois deste ficheiro. */
:where(.page) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=button]):not([type=submit]),select,textarea){
  padding:6px 10px;border:1px solid var(--line);border-radius:8px;background-color:var(--bg1);color:var(--text);
  font-size:13px;line-height:1.3;outline:none;transition:border-color .15s,box-shadow .15s}
:where(.page) :where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
:where(.page) :where(input[type=checkbox],input[type=radio]){accent-color:var(--cyan)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);background-clip:padding-box}

/* TOP BAR */
.topbar{
  height:var(--h-topbar);flex-shrink:0;background:var(--bg1);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 var(--pad-topbar-x);gap:14px;position:relative;z-index:50;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.brand-name{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--text)}
.brand-sub{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.08em;margin-top:1px}
.topbar-sep{width:1px;height:24px;background:var(--line)}
/* MIGALHAS (06/10): cada nível é UMA peça (nome + ▾) com fundo suave ao passar
   o rato, a seta entre níveis é um chevron fino e a raiz é a casa. O ▾ fica
   escondido até se passar pela peça — sempre à vista lia-se como lixo. */
.crumbs{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--text2);flex-wrap:nowrap;min-width:0;overflow:hidden}
.crumbs .c-item{display:inline-flex;align-items:center;gap:1px;padding:3px 6px;border-radius:var(--r-btn);
  white-space:nowrap;min-width:0;transition:background .12s,color .12s}
/* o ▾ escondido ocupa a folga da direita da peça: sem isto o espaço ANTES da
   seta ficava o dobro do de depois e as migalhas pareciam desalinhadas */
.crumbs .c-item.has-drop{padding-right:1px}
.crumbs .c-item:hover{background:var(--bg);color:var(--text)}
.crumbs .c-item > span{overflow:hidden;text-overflow:ellipsis}
.crumbs .c-active{color:var(--text);font-weight:600}
.crumbs .c-home{display:inline-flex;align-items:center;color:var(--text3)}
.crumbs .c-item:hover .c-home{color:var(--cyan)}
.crumbs .c-sep{display:inline-flex;align-items:center;color:var(--text3);opacity:.7;flex-shrink:0}
.crumbs .c-sep svg{width:12px;height:12px}

/* destaque global no topo: próximos eventos (~4h) — posição configurável.
   REGRA base: a pesquisa (1.º item do cluster direito) leva o margin-left:auto,
   por isso os ícones ficam SEMPRE à direita mesmo quando a faixa está vazia. */
.topbar-next{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.topbar-next:empty{display:none}
.search{margin-left:auto}
/* esquerda: faixa a seguir ao breadcrumb; pesquisa+ícones à direita (base) */
.topbar.next-esquerda .topbar-next{margin-left:0}
/* direita: faixa encostada à pesquisa (o auto passa para a faixa) */
.topbar.next-direita .topbar-next{margin-left:auto}
.topbar.next-direita .search{margin-left:0}
.topbar.next-direita .topbar-next:empty ~ .search{margin-left:auto}   /* faixa vazia → ícones à direita */
/* centro: faixa centrada; pesquisa+ícones à direita */
.topbar.next-centro .topbar-next{margin-left:auto;margin-right:auto}
.topbar.next-centro .search{margin-left:0}
.topbar.next-centro .topbar-next:empty ~ .search{margin-left:auto}
.tn-chip{
  display:inline-flex;align-items:center;gap:5px;max-width:230px;min-width:0;
  padding:4px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg);
  font-size:11.5px;color:var(--text);cursor:pointer;transition:.12s;
}
.tn-chip:hover{border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 9%, var(--bg))}
.tn-hora{font-size:10.5px;font-weight:700;color:var(--cyan);flex-shrink:0}
.tn-tit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-falta{font-size:10px;font-weight:700;color:var(--red, #d70015);flex-shrink:0;
  background:color-mix(in srgb, var(--red, #d70015) 12%, transparent);border-radius:999px;padding:0 6px}
.tn-todas{
  width:24px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--bg);
  color:var(--text2);cursor:pointer;font-size:15px;line-height:1;flex-shrink:0;
}
.tn-todas:hover{color:var(--cyan);border-color:var(--cyan)}

.search{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-box);
  padding:6px 11px;width:300px;transition:.15s;
}
/* compacta (só lupa) — liberta espaço no topo para os próximos eventos */
/* compacta = mais um botão de ícone (06/10): sem caixa nem fundo próprios, do
   tamanho dos vizinhos — a caixa cinzenta solta era o único botão diferente da fila */
.search.compact{width:var(--sz-icon-btn);height:var(--sz-icon-btn);padding:0;justify-content:center;cursor:pointer;
  background:transparent;border-color:transparent;border-radius:var(--r-btn);color:var(--text2)}
.search.compact input,.search.compact .search-key{display:none}
.search.compact:hover{background:var(--bg);color:var(--text)}
.search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
.search input{flex:1;background:none;border:none;outline:none;font-size:12.5px;color:var(--text)}
.search input::placeholder{color:var(--text3)}
.search-key{font-family:var(--font-mono);font-size:10px;color:var(--text3);background:var(--bg1);border:1px solid var(--line);padding:2px 5px;border-radius:3px}

.icon-btn{
  width:var(--sz-icon-btn);height:var(--sz-icon-btn);border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:.15s;position:relative;
}
.icon-btn:hover{background:var(--bg);color:var(--text)}
/* a fila de ícones da direita lê-se como UM grupo (06/10): o gap de 14px da
   barra é para separar blocos (marca · migalhas · ações), não ícone a ícone */
.topbar > .search ~ .icon-btn{margin-left:-10px}
/* 06/10: dois ícones a menos na fila. O ⌘K (#cmdkBtn) duplicava a lupa — a
   paleta abre-se pelo chip «⌘K» dentro da pesquisa e pelo atalho Ctrl+K, que
   não mudou. O «?» (#helpQuickBtn, página Regras & Políticas) duplicava o livro
   — a página abre-se no «Página ↗» do painel de Políticas. Ficam no DOM porque
   o JS os procura por id (gating, onclick); escondem-se aqui. */
.topbar #cmdkBtn,.topbar #helpQuickBtn{display:none}
.search-key[role="button"]{cursor:pointer}
.search-key[role="button"]:hover{color:var(--cyan);border-color:var(--cyan)}
.icon-btn.has-badge::after{
  content:'';position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 2px var(--bg1);
}

.admin-toggle{
  display:flex;align-items:center;gap:8px;padding:6px 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;
  font-size:11px;color:var(--text2);transition:.15s;font-family:var(--font-mono);letter-spacing:.06em;
}
.admin-toggle:hover{border-color:var(--line2);color:var(--text)}
.admin-toggle.on{background:var(--gold-bg);border-color:var(--gold-bd);color:var(--gold)}
.admin-toggle .dot{width:6px;height:6px;border-radius:50%;background:var(--text3)}
.admin-toggle.on .dot{background:var(--gold)}

.user-pill{
  display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;
  background:var(--bg);border:1px solid var(--line);border-radius:30px;
}
.avatar{width:var(--sz-avatar);height:var(--sz-avatar);border-radius:50%;background:var(--cyan-soft);
  border:2px solid var(--acc-bd);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10.5px;color:var(--cyan)}
.user-info{display:flex;flex-direction:column;line-height:1.2}
.user-name{font-size:11.5px;color:var(--text);font-weight:500}
.user-role{font-size:9px;color:var(--text3);font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase}

/* ADMIN BANNER */
.admin-banner{
  display:none;padding:8px 22px;background:var(--gold-bg);
  border-bottom:1px solid var(--gold-bd);font-size:11.5px;color:var(--gold);
  font-family:var(--font-mono);letter-spacing:.04em;align-items:center;gap:10px;font-weight:500;
}
body.admin-on .admin-banner{display:flex}
.admin-banner .ab-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.admin-banner .ab-actions{margin-left:auto;display:flex;gap:6px}

/* MAIN LAYOUT */
.layout{flex:1;display:flex;overflow:hidden;min-height:0}

/* SIDEBAR */
.sidebar{
  width:var(--sbw,var(--w-rail));flex-shrink:0;background:var(--bg1);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;position:relative;transition:width .18s ease;
}
.sidebar.dragging{transition:none}
.sidebar.collapsed{width:var(--w-rail-min)}
.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-meta,.sidebar.collapsed .group-title,.sidebar.collapsed .nav-children,.sidebar.collapsed .sb-footer-text,.sidebar.collapsed .sb-footer-const,.sidebar.collapsed .sb-filter,.sidebar.collapsed .group-tag,.sidebar.collapsed .group-actions{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:10px 0;margin:0}
.sidebar.collapsed .group-head{padding:8px 0;justify-content:center}
/* régua recolhida (06/10): só o ícone. A seta de submenu, a marca de estado e o
   «@» da ajuda vivem ao lado do RÓTULO — sem ele colavam-se ao ícone e a régua
   parecia desconfigurada. A barra de scroll também sai: comia ~10px dos 52–64
   da régua e os ícones ficavam descentrados (a roda do rato continua a rolar). */
.sidebar.collapsed .nav-chevron,.sidebar.collapsed .nav-estado,.sidebar.collapsed .nav-help-mark,.sidebar.collapsed .row-actions{display:none!important}
.sidebar.collapsed .sb-scroll{scrollbar-width:none}
.sidebar.collapsed .sb-scroll::-webkit-scrollbar{display:none}

.sb-header{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.sb-collapse{width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text3);transition:.15s}
.sb-collapse:hover{background:var(--bg);color:var(--text)}
.sb-title{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.16em;text-transform:uppercase;flex:1}

/* seletor de ícone visual (grid) nos modais de item/modelo */
.icon-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;max-height:132px;overflow-y:auto;padding:2px}
.icon-tile{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:var(--bg1,#fff);color:var(--text2);cursor:pointer;transition:.12s;padding:0}
.icon-tile:hover{border-color:var(--cyan);color:var(--text)}
.icon-tile.on{border-color:var(--cyan);background:var(--cyan-soft);color:var(--cyan)}
.icon-tile.icon-import{font-size:20px;line-height:1;color:var(--text3);font-weight:400}

/* filtro do menu, embutido no cabeçalho (compacta — sem linha de pesquisa separada) */
.sb-filter{flex:1;min-width:0;padding:5px 9px;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;font-size:11.5px;color:var(--text);outline:none;transition:.15s}
.sb-filter:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
.sb-filter::placeholder{color:var(--text3)}

.sb-scroll{flex:1;overflow-y:auto;padding:6px 0 16px}

.nav-group{margin-bottom:2px}
.group-head{
  display:flex;align-items:center;gap:8px;padding:10px 14px 6px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text3);user-select:none;cursor:pointer;
}
.group-head:hover{color:var(--text2)}
/* setas: expandido ▾ (para baixo) · colapsado ▸ (para a frente) */
.group-head .gh-icon{transition:.2s;transform:rotate(90deg)}
.group-head.collapsed .gh-icon{transform:rotate(0deg)}
.gh-ico-mini{display:none;color:var(--text2)}
.sidebar.collapsed .gh-ico-mini{display:flex;width:100%;justify-content:center}
.sidebar.collapsed .gh-icon{display:none}
.group-tag{font-size:9px;padding:1px 6px;border-radius:8px;background:var(--bg);color:var(--text2);letter-spacing:.05em;border:1px solid var(--line)}
.group-tag.erp{background:var(--cyan-soft);color:var(--erp);border-color:var(--acc-bd)}
.group-tag.mes{background:var(--gold-bg);color:var(--mes);border-color:var(--gold-bd)}
.group-actions{display:none;margin-left:auto;gap:2px}
body.admin-on .group-actions{display:flex}
.group-actions button{width:18px;height:18px;border-radius:3px;color:var(--text3);display:flex;align-items:center;justify-content:center;font-size:11px}
.group-actions button:hover{background:var(--gold-bg);color:var(--gold)}
.group-head:not(.collapsed) + .group-body + .group-actions, .group-tag + .group-actions{margin-left:6px}
.group-head .group-actions{margin-left:auto}

.group-body{display:flex;flex-direction:column}
.group-head.collapsed + .group-body{display:none}

.nav-item{
  display:flex;align-items:center;gap:10px;padding:var(--pad-row-y) var(--pad-row-x);margin:0 6px;
  min-height:var(--h-row);box-sizing:border-box;
  font-size:var(--fs-row);color:var(--text2);cursor:pointer;transition:.12s;
  border-radius:var(--r-row);border:1px solid transparent;position:relative;user-select:none;
}
.nav-item:hover{background:var(--bg);color:var(--text)}
.nav-item.active{background:var(--cyan-soft);color:var(--cyan);border-color:var(--acc-bd);font-weight:500}
.nav-item.has-children .nav-chevron{margin-left:auto;transition:.2s;color:var(--text3);font-size:10px}
.nav-item.expanded .nav-chevron{transform:rotate(90deg)}
.nav-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}
.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-help-mark{font-family:var(--font-mono);font-size:9px;color:var(--purple);background:var(--purple-bg);padding:1px 4px;border-radius:3px}

.nav-children{display:none}
.nav-item.expanded + .nav-children{display:flex;flex-direction:column}
/* indentação por NÍVEL (D4): o --nav-nivel vem do buildItem. A fórmula dá os
   34px/54px de sempre nos 2 primeiros níveis e continua a partir daí — antes
   o 3.º nível em diante colava-se todo aos 54px e a fundura não se lia */
.nav-children .nav-item{padding-left:calc(14px + 20px*var(--nav-nivel,1));font-size:12px}

/* admin row controls */
.row-actions{display:none;margin-left:auto;gap:1px}
body.admin-on .nav-item:hover .row-actions{display:flex}
.row-actions button{width:18px;height:18px;border-radius:3px;color:var(--text3);display:flex;align-items:center;justify-content:center;font-size:10px}
.row-actions button:hover{background:var(--gold-bg);color:var(--gold)}
body.admin-on .nav-item:hover{background:var(--gold-bg)}
body.admin-on .nav-item.active{background:rgba(217,119,6,.08);color:var(--gold);border-color:var(--gold-bd)}

.add-child-row{display:none;align-items:center;gap:7px;padding:5px 14px 7px 38px;margin:0 6px;cursor:pointer;color:var(--text3);font-size:11.5px;border-radius:5px;font-style:italic}
body.admin-on .add-child-row{display:flex}
.add-child-row:hover{background:var(--gold-bg);color:var(--gold)}

/* coluna: a linha da Constituição é IRMÃ do bloco da licença (para o clique
   não abrir o modal) e, em linha, disputava-lhe a largura. Recolhido, as duas
   escondem-se — ver a regra .sidebar.collapsed acima. */
.sb-footer{padding:10px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:stretch;gap:4px}
.sb-footer-text{flex:1;line-height:1.3}
.sb-footer-version{font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.sb-footer-license{font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.lic-sec{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:4px}
.lic-row{display:flex;gap:12px;padding:3px 0;font-size:13px}
.lic-row>span:first-child{flex:0 0 84px;color:var(--text3)}
.lic-row>span:last-child{flex:1;word-break:break-word}
.lic-row a{color:#2563eb;text-decoration:none}
.lic-row a:hover{text-decoration:underline}
.sb-footer-status{font-size:10px;color:var(--green);font-family:var(--font-mono)}
/* 06/10: rodapé mais calmo — letra da casa em vez da mono, o «online» à direita
   da versão (uma linha a menos) e a Constituição como ligação discreta */
.sb-footer{padding:9px var(--pad-row-x) 10px}
.sb-footer-text{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:baseline}
.sb-footer-version,.sb-footer-license,.sb-footer-status{font-family:var(--font-ui);font-size:10.5px}
.sb-footer-version{color:var(--text2);font-weight:500}
.sb-footer-status{grid-column:2;grid-row:1;font-weight:500}
.sb-footer-license{grid-column:1 / -1}
.sb-footer-const{transition:color .12s}
.sb-footer-const:hover{color:var(--cyan)!important}

/* CONTENT */
.content{flex:1;overflow-y:auto;background:var(--bg);position:relative}
.page{position:relative;z-index:1;padding:24px 28px;max-width:1600px}
/* ═══ Preencher o ecrã — primitiva reutilizável (ver spec 2026-07-20-layout-preencher-ecra) ═══
   Uma página em modo "fill" ocupa toda a altura do .content (em vez de altura
   natural com espaço branco por baixo) e o seu corpo estica. Mantém resolução e
   texto nativos — NÃO é zoom. Uso:
     <div class="page page--fill">… <div class="page__fillbody">corpo</div> …</div> */
.page--fill{display:flex;flex-direction:column;height:100%;max-width:none}
.page--fill > .page__fillbody{flex:1;min-height:0;overflow:auto}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:24px;flex-wrap:wrap}
.page-title-block{flex:1;min-width:0}
.page-eyebrow{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.page-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--text);line-height:1.1;margin-bottom:6px;letter-spacing:-.5px;display:flex;align-items:center;gap:10px}
/* O ÍCONE DA PÁGINA (Telmo 04/08) — o mesmo do menu, com a cor da área, agora
   também no topo. Ficou necessário quando o menu passou a arrancar FECHADO: com a
   tira recolhida, a área da página só se lia no menu que está fechado.
   A cor entra pelo `--ga` que o pageIconeHtml escreve inline (o mesmo token que
   os grupos do menu usam) — nunca um hex nesta folha. O quadrado tem tinta de
   fundo esbatida para o ícone se ler nos temas claros E escuros. */
.page-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;color:var(--ga,var(--text3));
  background:color-mix(in srgb, var(--ga,var(--text3)) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ga,var(--text3)) 26%, transparent)}
.page-ico svg{width:19px;height:19px}
@supports not (color: color-mix(in srgb, red 10%, transparent)){
  /* sem color-mix a caixa fica neutra em vez de invisível */
  .page-ico{background:var(--bg3);border-color:var(--line)}
}
.page-desc{font-size:13px;color:var(--text2);max-width:720px;line-height:1.5}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:7px;padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--r-btn);
  font-size:var(--fs-btn);font-weight:600;border:1px solid transparent;transition:.15s;font-family:var(--font-ui);letter-spacing:0;
}
.btn-primary{background:var(--cyan);color:var(--on-accent,#fff);border-color:var(--cyan)}
.btn-primary:hover{background:var(--cyan2);border-color:var(--cyan2)}
.btn-ghost{background:var(--bg1);color:var(--text2);border-color:var(--line);box-shadow:0 1px 1px rgba(0,0,0,.02)}
.btn-ghost:hover{background:var(--bg);border-color:var(--line2);color:var(--text)}
.btn-warn{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-bd)}
.btn-warn:hover{background:#f7e8cf}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-bd)}
.btn-danger:hover{background:#f7d2d5}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-icon{padding:6px;width:var(--sz-icon-sm);justify-content:center}

/* DASHBOARD */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.metric{
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);transition:.15s;
}
.metric:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.metric::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--cyan);border-radius:12px 12px 0 0;opacity:.85}
.metric.gold::before{background:var(--gold)}
.metric.green::before{background:var(--green)}
.metric.purple::before{background:var(--purple)}
.metric.red::before{background:var(--red)}
.metric-label{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.metric-value{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--text);letter-spacing:-1px;line-height:1.05}
.metric-trend{font-size:11px;color:var(--green);font-family:var(--font-mono);display:flex;align-items:center;gap:4px}
.metric-trend.down{color:var(--red)}
.metric-trend.flat{color:var(--text3)}

.widgets{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-bottom:16px}
.widget{
  grid-column:span 6;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-card);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);
}
.widget.span-3{grid-column:span 3}
.widget.span-4{grid-column:span 4}
.widget.span-5{grid-column:span 5}
.widget.span-7{grid-column:span 7}
.widget.span-8{grid-column:span 8}
.widget.span-9{grid-column:span 9}
.widget.span-12{grid-column:span 12}
.widget-head{
  padding:var(--pad-head) var(--pad-card-x);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;background:var(--bg2);
}
.widget-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text);flex:1;letter-spacing:-.1px;display:flex;align-items:center;gap:8px}
.widget-tag{font-family:var(--font-mono);font-size:9px;color:var(--cyan);padding:2px 6px;border-radius:3px;background:var(--cyan-soft);letter-spacing:.06em;border:1px solid var(--acc-bd)}
.widget-tag.gold{color:var(--gold);background:var(--gold-bg);border-color:var(--gold-bd)}
.widget-tag.green{color:var(--green);background:var(--green-bg);border-color:var(--green-bd)}
.widget-tag.red{color:var(--red);background:var(--red-bg);border-color:var(--red-bd)}
.widget-tag.purple{color:var(--purple);background:var(--purple-bg);border-color:var(--purple-bd)}
.widget-actions{display:flex;gap:4px}
.widget-body{padding:var(--pad-card) var(--pad-card-x);flex:1;overflow:auto}
.widget-body.flush{padding:0}

/* INÍCIO (06/10) — só nesta página (.page-home), os outros ecrãs com widgets
   ficam como estão. A etiqueta de código (KPI/FAV/CAL/TASKS) sai: o título já
   diz o que é; o DEMO fica, mas discreto; cabeçalho do widget sem faixa cinzenta;
   o vazio dos favoritos centrado no espaço em vez de uma caixa tracejada. */
.page-home .home-hoje{font-size:13px;color:var(--text3);margin-top:2px}
.page-home .widget-tag{display:none}
.page-home .widget-head{background:var(--bg1);border-bottom:0;padding-bottom:2px}
.page-home .widget-title{font-size:14px;font-weight:650;letter-spacing:-.15px}
.page-home .widget-title .pill-warn{background:transparent;border:1px solid var(--line2);color:var(--text3);
  font-size:9.5px;font-weight:600;letter-spacing:.04em;padding:1px 6px}
/* o vazio dos favoritos ENCHE o widget (que estica até à altura do vizinho) e
   fica centrado, sem caixa tracejada: sem esticar ficava um buraco por baixo */
.page-home .widget-body:has(> .fav-empty){display:flex;flex-direction:column}
.page-home .fav-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:18px;background:transparent;border:0;color:var(--text3);font-size:12.5px}
.page-home .task-meta{font-family:var(--font-ui);font-size:11px;letter-spacing:0}

/* FAVORITES */
.fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.fav-card{
  background:var(--bg1);border:1px solid var(--line);border-radius:6px;padding:11px 13px;
  cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;position:relative;
}
.fav-card:hover{border-color:var(--cyan);background:var(--cyan-soft);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.fav-name{font-size:12.5px;font-weight:600;color:var(--text)}
.fav-link{font-family:var(--font-mono);font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:3px;display:none;align-items:center;justify-content:center;color:var(--text3);background:var(--bg1)}
.fav-card:hover .fav-remove{display:flex}
.fav-remove:hover{background:var(--red-bg);color:var(--red)}
.fav-empty{padding:18px;text-align:center;color:var(--text3);font-size:12px;border:1px dashed var(--line2);border-radius:6px;background:var(--bg2)}

/* TASKS */
.task-list{display:flex;flex-direction:column;gap:6px}
.task{
  display:flex;align-items:center;gap:10px;padding:8px 11px;
  background:var(--bg2);border:1px solid var(--line);border-radius:5px;transition:.12s;
}
.task:hover{background:var(--bg1);border-color:var(--line2)}
.task-pri{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0}
.task-pri.high{background:var(--red)}
.task-pri.med{background:var(--gold)}
.task-pri.low{background:var(--green)}
.task-title{flex:1;font-size:12px;color:var(--text);font-weight:500}
.task-meta{font-family:var(--font-mono);font-size:10px;color:var(--text3)}

/* DEPT GRID */
.dept-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.area-card{
  background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:18px;
  cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);
  flex:1 1 280px;   /* tamanho automático: preenche a linha, mínimo 280px */
}
/* tamanho do cartão por item (node.card) — frações da linha */
.area-card.card-full{flex:1 1 100%;max-width:100%}
.area-card.card-half{flex:1 1 calc(50% - 7px);max-width:calc(50% - 7px)}
.area-card.card-third{flex:1 1 calc(33.333% - 10px);max-width:calc(33.333% - 10px)}
.area-card.card-quarter{flex:1 1 calc(25% - 11px);max-width:calc(25% - 11px);min-width:150px}
.area-card.card-fifth{flex:1 1 calc(20% - 12px);max-width:calc(20% - 12px);min-width:140px}
/* VISTA POR LINHAS (2026-07-27, pedido do Telmo: «por cartões ou poder colocar
   vista por linhas»). Alternativa densa aos cartões nas páginas dos tópicos do
   SYSHOME — mesma informação, uma por linha, para varrer com os olhos em vez
   de procurar. A escolha é por utilizador (userPrefs.vistaHub). */
.dept-grid.vista-linhas{flex-direction:column;flex-wrap:nowrap;gap:0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.dept-grid.vista-linhas .area-card{flex:1 1 auto;max-width:100%;min-width:0;
  flex-direction:row;align-items:center;gap:12px;padding:10px 14px;
  border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
.dept-grid.vista-linhas .area-card:last-child{border-bottom:0}
.dept-grid.vista-linhas .area-card:hover{background:var(--bg2);transform:none}
.dept-grid.vista-linhas .area-icon{width:26px;height:26px;flex-shrink:0}
.dept-grid.vista-linhas .area-name{font-size:13.5px;min-width:190px;flex-shrink:0}
.dept-grid.vista-linhas .area-desc{margin:0;font-size:12.5px;color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){
  .dept-grid.vista-linhas .area-card{flex-wrap:wrap}
  .dept-grid.vista-linhas .area-name{min-width:0}
  .dept-grid.vista-linhas .area-desc{white-space:normal;flex-basis:100%}
}
/* cartão compacto (1/4 e 1/5): só ícone + nome, uma linha */
.area-card.card-compact{padding:12px 14px;gap:9px;flex-direction:row;align-items:center}
.area-card.card-compact .area-icon{width:30px;height:30px;flex-shrink:0}
.area-card.card-compact .area-name{font-size:13.5px}
.area-card.card-compact .area-desc,.area-card.card-compact .area-stats{display:none}
/* grupos/secções dentro de uma página central (child contentor) */
.dept-section{flex:1 1 100%;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--bg1,#fff);box-shadow:var(--shadow)}
.dept-section.card-half{flex:1 1 calc(50% - 7px);max-width:calc(50% - 7px)}
.dept-section.card-third{flex:1 1 calc(33.333% - 10px);max-width:calc(33.333% - 10px)}
.dept-section.card-quarter{flex:1 1 calc(25% - 11px);max-width:calc(25% - 11px);min-width:220px}
.dept-section.card-fifth{flex:1 1 calc(20% - 12px);max-width:calc(20% - 12px);min-width:200px}
.dept-section-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.dept-section-head .ds-icon{width:28px;height:28px;border-radius:7px;background:var(--cyan-soft);color:var(--cyan);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dept-section-head .ds-title{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text);flex:1}
.ds-actions{display:flex;gap:4px}
.ds-actions button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;background:var(--bg1,#fff);color:var(--text3);cursor:pointer;padding:0}
.ds-actions button:hover{border-color:var(--cyan);color:var(--cyan)}
.dept-grid.ds-grid{margin-top:0}
.area-card{position:relative}
.area-card:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* editar/eliminar por cartão (modo de edição) */
.area-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:2}
.area-actions button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;background:var(--bg1,#fff);color:var(--text3);cursor:pointer;padding:0}
.area-actions button:hover{border-color:var(--cyan);color:var(--cyan)}
.area-card.card-compact .area-actions{position:static;margin-left:auto}
/* estrela de favorito nos cartões e grupos (todos os utilizadores) */
.area-actions .area-fav{color:var(--line2,#cbd5e1);font-size:14px;line-height:1}
.area-actions .area-fav:hover{color:var(--gold);border-color:var(--gold)}
.area-actions .area-fav.is-fav{color:var(--gold);border-color:var(--gold)}
.ds-actions .ds-fav{color:var(--line2,#cbd5e1);font-size:14px;line-height:1}
.ds-actions .ds-fav:hover{color:var(--gold);border-color:var(--gold)}
.ds-actions .ds-fav.is-fav{color:var(--gold);border-color:var(--gold)}
.area-icon{width:42px;height:42px;border-radius:8px;background:var(--cyan-soft);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.area-card.gold .area-icon{background:var(--gold-bg);color:var(--gold)}
.area-card.purple .area-icon{background:var(--purple-bg);color:var(--purple)}
.area-card.green .area-icon{background:var(--green-bg);color:var(--green)}
.area-card.red .area-icon{background:var(--red-bg);color:var(--red)}
.area-name{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.area-desc{font-size:12.5px;color:var(--text2);line-height:1.45;flex:1}
.area-stats{display:flex;gap:14px;padding-top:10px;border-top:1px solid var(--line);margin-top:auto}
.area-stat{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.06em}
.area-stat strong{color:var(--text);font-size:14px;font-weight:700;display:block;font-family:var(--font-display)}
/* selo «Novo» nos cartões dos hubs (2026-07-29): a mesma resposta do ponto do
   menu (idTemNaoVisto), com corpo suficiente para se ler num quadro. */
.card-novo{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:var(--red-bg);color:var(--red);vertical-align:2px}
/* vista por linhas: os valores encostam à direita da linha, sem risco por cima */
.dept-grid.vista-linhas .area-stats{border-top:0;padding-top:0;margin:0 0 0 auto;flex-shrink:0}
/* o ← Voltar não existe no painel dividido: lá a navegação usa replaceState e
   o back do browser sairia da app em vez de andar para trás nas páginas */
body.split-child #navBackBtn{display:none}

/* TABLES */
.table-wrap{background:var(--bg1);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  text-align:left;padding:11px 16px;background:var(--bg2);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;font-weight:500;
}
td{padding:11px 16px;border-bottom:1px solid var(--line);color:var(--text)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg2)}
td.mono{font-family:var(--font-mono);font-size:12px}
td.right{text-align:right}

/* PILLS */
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:10px;font-family:var(--font-mono);font-weight:600;letter-spacing:.04em;border:1px solid;white-space:nowrap}
/* (07/10/2026) o `<div class="pill">` é caixa de MENSAGEM (frase inteira: «Catálogo
   por migrar — correr …sql e reiniciar…»), não etiqueta: com o nowrap da etiqueta
   ia a 1400 px e saía do ecrã, no telemóvel e no portátil. */
div.pill{white-space:normal;line-height:1.4;max-width:100%;border-radius:10px}
.pill-active,.pill-ok,.pill-true{background:var(--green-bg);color:var(--green);border-color:var(--green-bd)}
.pill-inactive,.pill-bad,.pill-false{background:var(--red-bg);color:var(--red);border-color:var(--red-bd)}
.pill-warn{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-bd)}
.pill-info,.pill-erp{background:var(--cyan-soft);color:var(--erp);border-color:var(--acc-bd)}
.pill-mes{background:var(--gold-bg);color:var(--mes);border-color:var(--gold-bd)}
.pill-quality{background:var(--purple-bg);color:var(--quality);border-color:var(--purple-bd)}
.pill-maint{background:var(--green-bg);color:var(--maint);border-color:var(--green-bd)}

/* MODALS */
.modal-bg{
  position:fixed;inset:0;background:var(--dim);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  display:none;align-items:center;justify-content:center;z-index:200;
}
.modal-bg.on{display:flex}
/* EDITAR NO LUGAR (03/08): um modal aberto A PARTIR da gaveta da ajuda tem de
   ficar ACIMA dela. A gaveta é `z-index:320` e o `.modal-bg` é 200 — sem isto o
   editor da política abria por trás do véu e via-se só o ecrã a escurecer, sem
   um único erro na consola. A classe põe-na quem abre (abrirEditorPoliticaNaGaveta)
   e o closeModal tira-a: fora deste caminho o empilhamento fica como sempre foi. */
.modal-bg.sobre-gaveta{z-index:340}
.modal{
  background:var(--bg1);border:1px solid var(--line);border-radius:18px;
  width:100%;max-width:520px;max-height:90vh;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
}
.modal-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:var(--bg2)}
.modal-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text);flex:1;letter-spacing:-.2px}
.modal-close{width:24px;height:24px;border-radius:4px;color:var(--text3);display:flex;align-items:center;justify-content:center;font-size:14px}
.modal-close:hover{background:var(--bg);color:var(--text)}
.modal-body{padding:18px;overflow-y:auto}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.row-2 > div{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.field input,.field select,.field textarea{
  padding:9px 12px;background:var(--bg1);border:1px solid var(--line);border-radius:9px;
  font-size:12.5px;color:var(--text);outline:none;transition:.15s;width:100%;
}
.field textarea{resize:vertical;font-family:var(--font-ui);min-height:60px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
/* Seletor "Visível para grupos" — chips com toggle por clique (sem Ctrl).
   Scoped sob .roles-picker para ganhar em especificidade a `.field label`
   (que é uppercase/mono/muted) — cada .role-opt é um <label> dentro de .field. */
.roles-picker{display:flex;flex-wrap:wrap;gap:6px;max-height:140px;overflow-y:auto;
  padding:8px;background:var(--bg1);border:1px solid var(--line);border-radius:6px}
.roles-picker:empty::after{content:"Sem grupos disponíveis.";color:var(--text3);font-size:12px}
.roles-picker .role-opt{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg1);cursor:pointer;
  user-select:none;transition:.12s;font-family:var(--font-ui);font-size:12.5px;
  font-weight:500;letter-spacing:normal;text-transform:none;color:var(--text)}
.roles-picker .role-opt:hover{border-color:var(--cyan)}
.roles-picker .role-opt input{position:absolute;opacity:0;width:0;height:0;margin:0}
.roles-picker .role-opt .tick{width:15px;height:15px;flex:none;border:1.5px solid var(--line2,var(--line));
  border-radius:4px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--on-accent,#fff);font-size:11px;line-height:1;transition:.12s}
.roles-picker .role-opt.on{border-color:var(--cyan);background:var(--cyan-soft);color:var(--cyan)}
.roles-picker .role-opt.on .tick{background:var(--cyan);border-color:var(--cyan)}
.roles-picker .role-opt.on .tick::after{content:"✓"}
.modal-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--bg2)}
.modal-foot .btn-warn{margin-right:auto}

/* TABS */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tab{padding:9px 16px;font-size:12.5px;color:var(--text2);cursor:pointer;font-weight:500;border-bottom:2px solid transparent;transition:.15s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--cyan);border-bottom-color:var(--cyan);font-weight:600}

/* TRILHO DE FLUXO (D3, 2026-08-05) — faixa do SHELL no topo das páginas de um
   fluxo (SysHomeOrg.FLUXOS; desenha-a pintarTrilhoFluxo no app.js). Uma linha
   SEMPRE: transborda na horizontal com a scrollbar escondida, como o cabeçalho
   de uma linha dos módulos (REGRAS §6).
   Desde 06/08 cada passo é um BOTÃO/CHIP e não um separador sublinhado (Telmo,
   ao ver a página Utilizadores: «coloca nos separadores em cima tipo botões»).
   Porquê chip e não a sub-linha do `.tabs`: com o menu agrupado o trilho é o
   SUBMENU do tópico, e um alvo com fundo e borda lê-se como coisa em que se
   carrega — a sub-linha lia-se como decoração do cabeçalho da página. Tudo por
   token (fundo `--bg2`, borda `--line`, ativo preenchido a `--cyan` com a tinta
   de contraste `--on-accent`): claro/escuro e as 5 skins de graça.
   O ATIVO estiliza-se pelo `aria-current="page"` que o pintor já escreve — um
   marcador só, o mesmo que o leitor de ecrã anuncia (a classe `.active` fica no
   markup para quem a usa como âncora de medição). */
.fluxo-trilho{display:flex;align-items:center;gap:3px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.fluxo-trilho::-webkit-scrollbar{display:none}
.fluxo-rotulo{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);padding:0 10px 0 2px;white-space:nowrap;flex:none}
.fluxo-passo{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-btn);padding:6px 11px;font-family:inherit;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;white-space:nowrap;transition:.15s;flex:none}
.fluxo-passo:hover{background:var(--bg3);border-color:var(--line2);color:var(--text)}
.fluxo-passo[aria-current="page"]{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent,#fff);font-weight:600}
.fluxo-passo[aria-current="page"]:hover{background:var(--cyan2);border-color:var(--cyan2);color:var(--on-accent,#fff)}
.fluxo-passo:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* o PONTO de novidade dentro do chip: é o mesmo `.nav-new-dot` do menu (mesma
   definição, mesmo tamanho, mesma pulsação) e vive num span próprio para o
   rótulo continuar a ser um nó de texto inteiro — é assim que o SysI18N o
   traduz. Só o anel de recorte sai: ele é da cor `--bg1` do menu e aqui o chip
   tem outro fundo (e o ativo tem o acento), onde o anel se via como halo. */
.fluxo-passo .nav-new-dot{margin-left:0;box-shadow:none}
.fluxo-seta{color:var(--text3);font-size:11px;flex:none;user-select:none}

/* EMPTY STATE */
.empty{padding:60px 20px;text-align:center;color:var(--text3)}
.empty-icon{width:48px;height:48px;border-radius:50%;background:var(--bg);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--text3)}
.empty-title{font-family:var(--font-display);font-size:15px;color:var(--text2);margin-bottom:6px;font-weight:600}
.empty-desc{font-size:12.5px;color:var(--text3);max-width:400px;margin:0 auto;line-height:1.5}

/* @HELP MARK / POPOVER */
.help-mark{
  display:inline-flex;width:14px;height:14px;border-radius:50%;
  align-items:center;justify-content:center;cursor:pointer;font-size:9px;font-weight:700;
  background:var(--cyan-soft);color:var(--cyan);border:1px solid var(--acc-bd);
  vertical-align:middle;margin-left:6px;transition:.15s;
}
.help-mark::after{content:'?'}
.help-mark:hover{background:var(--cyan);color:var(--on-accent,#fff)}
.help-mark.purple{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-bd)}
.help-mark.purple:hover{background:var(--purple);color:var(--on-estado,#fff)}

.help-pop{
  display:none;position:fixed;background:var(--glass-menu);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  width:340px;box-shadow:var(--shadow-lg);z-index:300;
  font-size:12.5px;line-height:1.5;color:var(--text);
}
.help-pop.on{display:flex;flex-direction:column;animation:popIn .18s ease-out}
@keyframes popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.help-pop-head{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;background:var(--bg2)}
.help-pop-alias{font-family:var(--font-mono);font-size:11px;color:var(--purple);background:var(--purple-bg);padding:2px 8px;border-radius:4px;border:1px solid var(--purple-bd);font-weight:600;flex:1}
.help-pop-close{width:22px;height:22px;border-radius:4px;color:var(--text3);font-size:13px;display:flex;align-items:center;justify-content:center}
.help-pop-close:hover{background:var(--bg);color:var(--text)}
.help-pop-title{padding:10px 14px 4px;font-weight:700;font-size:13.5px;color:var(--text);font-family:var(--font-display)}
.help-pop-body{padding:0 14px 12px;color:var(--text2)}
.help-pop-body p{margin-bottom:6px}
.help-pop-foot{padding:8px 14px;border-top:1px solid var(--line);background:var(--bg2);display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.help-pop-foot a{color:var(--cyan);text-decoration:none;font-weight:600}
.help-pop-foot a:hover{text-decoration:underline}

/* SETTINGS GRID — cartões de definições lado a lado (2 a 2), reflow p/ 1 col em ecrã estreito */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}}

/* POLICY CARD (used in Políticas page) */
.policy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.policy-card{
  background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);transition:.15s;cursor:pointer;
}
.policy-card:hover{border-color:var(--purple);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.policy-card.active{border-color:var(--purple);background:var(--purple-bg)}
.policy-alias{font-family:var(--font-mono);font-size:11px;color:var(--purple);background:var(--purple-bg);padding:3px 8px;border-radius:4px;border:1px solid var(--purple-bd);font-weight:600;align-self:flex-start}
.policy-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.policy-body{font-size:12.5px;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.policy-meta{font-family:var(--font-mono);font-size:10px;color:var(--text3);display:flex;gap:10px;padding-top:8px;border-top:1px solid var(--line);margin-top:auto}

/* SEARCH RESULTS in Políticas */
.policy-search{margin-bottom:16px;display:flex;gap:8px;align-items:center}
.policy-search input{flex:1;padding:9px 12px;background:var(--bg1);border:1px solid var(--line);border-radius:6px;font-size:12.5px;outline:none}
.policy-search input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}

/* CHARTS */
.bar-list{display:flex;flex-direction:column;gap:10px}
.bar-row{display:flex;flex-direction:column;gap:4px}
.bar-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text2)}
.bar-label strong{font-family:var(--font-mono);font-weight:600;color:var(--text)}
.bar-track{background:var(--bg);border:1px solid var(--line);border-radius:3px;height:7px;overflow:hidden}
.bar-fill{height:100%;background:var(--cyan);border-radius:3px}
.bar-fill.gold{background:var(--amber)}
.bar-fill.green{background:var(--green)}

/* MENU EDITOR */
.tree-edit{list-style:none;padding-left:0;font-family:var(--font-ui)}
.tree-edit ul{list-style:none;padding-left:18px;border-left:1px dashed var(--line)}
.tree-edit li{padding:2px 0}
.tree-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;transition:.12s}
.tree-row:hover{background:var(--bg2)}
.tree-row.is-group{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--text3);text-transform:uppercase}
.tree-row .tid{font-family:var(--font-mono);font-size:10px;color:var(--text3);background:var(--bg);border:1px solid var(--line);padding:1px 6px;border-radius:3px}
.tree-row .tname{font-size:13px;color:var(--text);font-weight:500;flex:1}
.tree-row .tactions{display:flex;gap:2px;opacity:.5;transition:.15s}
.tree-row:hover .tactions{opacity:1}

/* BREADCRUMB AS LINKS */
.crumbs span[data-id]{cursor:pointer}
.crumbs span[data-id]:hover{color:var(--cyan)}

/* INFO LINK BUTTON */
.info-btn{
  display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:4px;
  font-family:var(--font-mono);font-size:10px;color:var(--purple);background:var(--purple-bg);
  border:1px solid var(--purple-bd);cursor:pointer;letter-spacing:.04em;font-weight:600;
}
.info-btn:hover{background:var(--purple);color:var(--on-estado,#fff)}

/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:14px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.stat-l{font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.stat-v{font-size:18px;font-weight:700;color:var(--text);font-family:var(--font-display)}

/* FAVORITE GROUPS */
.fav-section{margin-bottom:18px}
.fav-section:last-child{margin-bottom:0}
.fav-section-head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:0 2px;
}
.fav-section-name{
  font-family:var(--font-mono);font-size:10px;color:var(--text3);
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
.fav-section-count{
  font-family:var(--font-mono);font-size:10px;color:var(--text3);
  background:var(--bg);border:1px solid var(--line);padding:1px 6px;border-radius:3px;
}
.fav-section-actions{margin-left:auto;display:flex;gap:4px}
.fav-section-actions button{
  width:22px;height:22px;border-radius:4px;color:var(--text3);
  display:flex;align-items:center;justify-content:center;font-size:11px;
}
.fav-section-actions button:hover{background:var(--gold-bg);color:var(--gold)}
.fav-card.internal{border-left:3px solid var(--cyan);padding-left:10px}
.fav-card .fav-source{
  font-family:var(--font-mono);font-size:9px;color:var(--cyan);
  background:var(--cyan-soft);padding:1px 5px;border-radius:3px;align-self:flex-start;
  letter-spacing:.04em;
}
.fav-actions{
  position:absolute;top:4px;right:4px;display:none;gap:2px;
}
.fav-card:hover .fav-actions{display:flex}
.fav-actions button{
  width:18px;height:18px;border-radius:3px;color:var(--text3);background:var(--bg1);
  display:flex;align-items:center;justify-content:center;font-size:10px;border:1px solid var(--line);
}
.fav-actions button:hover{background:var(--bg);color:var(--text)}
.fav-actions button.del:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-bd)}

/* FAVORITOS (06/10) — o cartão passa a LINHA com ícone: o ícone da página na
   cor do módulo, o nome e, por baixo, onde ela vive (ou o site, se for externo);
   sem a etiqueta INTERNO, sem o caminho em mono e sem o filete azul à esquerda.
   O cabeçalho da pasta leva o ícone e o nome como foi escrito (nada de
   maiúsculas espaçadas). Vale na página e no widget do Início. */
.fav-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.fav-card,.fav-card.internal{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);border-left-width:1px;background:var(--bg1);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.fav-card:hover{border-color:color-mix(in srgb, var(--fa, var(--cyan)) 45%, var(--line));background:var(--bg1);
  box-shadow:var(--shadow-md)}
.fav-ico{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--fa, var(--cyan));background:color-mix(in srgb, var(--fa, var(--cyan)) 10%, var(--bg1))}
.fav-ico svg{width:17px;height:17px}
.fav-card.externo .fav-ico{background:var(--bg3)}
.fav-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fav-card .fav-name{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fav-card .fav-link{font-family:var(--font-ui);font-size:11.5px;letter-spacing:0}
.fav-ir{flex:none;display:flex;color:var(--text3);opacity:.6;transition:opacity .12s, transform .12s}
.fav-card:hover .fav-ir{opacity:1;transform:translateX(2px);color:var(--fa, var(--cyan))}
.fav-card .fav-actions{top:50%;transform:translateY(-50%);right:10px}
.fav-section{margin-bottom:22px}
.fav-section-head{gap:7px;margin-bottom:10px}
.fav-section-ico{display:inline-flex;color:var(--text3)}
.fav-section-ico svg{width:14px;height:14px}
.fav-section .fav-section-name{font-family:var(--font-ui);font-size:13px;font-weight:650;letter-spacing:0;
  text-transform:none;color:var(--text)}
.fav-section-count{font-family:var(--font-ui);font-size:11px;font-weight:600;border:0;background:var(--bg3);
  color:var(--text2);padding:1px 7px;border-radius:9px}

/* STAR / FAVORITE BUTTON ON NAV ITEMS */
.nav-fav{
  display:none;width:18px;height:18px;border-radius:3px;flex-shrink:0;
  color:var(--text3);align-items:center;justify-content:center;font-size:11px;
}
/* estrela de favorito só em modo de edição (ADMIN) — navegação por ícones fica limpa */
body.admin-on .nav-item:hover .nav-fav{display:flex}
.nav-fav:hover{color:var(--amber);background:var(--gold-bg)}
body.admin-on .nav-fav.is-fav{display:flex;color:var(--amber)}
.sidebar.collapsed .nav-fav{display:none!important}

/* PAGE FAVORITE BUTTON */
.btn-fav{background:var(--bg1);color:var(--text2);border-color:var(--line)}
.btn-fav.is-fav{background:var(--gold-bg);color:var(--amber);border-color:var(--gold-bd)}
.btn-fav:hover{background:var(--bg);color:var(--text)}
.btn-fav.is-fav:hover{background:#f7e8cf}

/* FAVORITE GROUP DRAGGING (visual cue) */
.fav-card[draggable="true"]{cursor:grab}
.fav-card.dragging{opacity:.4}
.fav-section.drag-over .fav-grid{outline:2px dashed var(--cyan);outline-offset:4px;border-radius:8px}

/* TOPBAR BADGE (count) — 01/10/2026: a bolinha nasce no CANTO do ícone e cresce
   para FORA dele (ancorada à esquerda, no meio do botão + 2px): ancorada à direita,
   o «9+» crescia para dentro e tapava o ícone. Letra da casa a 10px com algarismos
   tabulares (a mono a 9px lia-se mal). As cores dizem o que é:
     vermelho (de base) — precisa de ti AGORA: notificações por ler, urgências do chat;
     .gold   — por ver / por conhecer: mensagens do chat por ler, políticas por conhecer;
     .neutro — contagem de trabalho: as tarefas pendentes (existem sempre; não é alarme). */
.topbar-badge{
  position:absolute;top:1px;left:calc(50% + 4px);min-width:15px;height:15px;padding:0 4px;
  background:var(--red);color:var(--on-estado,#fff);border-radius:8px;font-family:var(--font-ui);
  font-size:9.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--bg1);letter-spacing:0;pointer-events:none;
}
.topbar-badge.on{display:flex}
.topbar-badge.gold{background:var(--gold)}
/* neutro em tom suave (06/10): cinzento-escuro cheio pesava tanto como o
   vermelho — e é justamente a contagem que NÃO é alarme */
.topbar-badge.neutro{background:var(--bg3);color:var(--text2);box-shadow:0 0 0 2px var(--bg1),inset 0 0 0 1px var(--line2)}
/* ícone de topo da secção aberta na barra direita fica destacado (a barra de
   abas foi removida — a navegação e os contadores vivem só aqui no topo) */
.icon-btn.active{background:var(--cyan-soft);color:var(--cyan)}

/* NOTIFICATIONS PANEL */
.notif-panel{
  display:none;position:fixed;top:60px;right:160px;width:380px;max-height:520px;
  background:var(--glass-menu);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  z-index:300;flex-direction:column;overflow:hidden;
}
.notif-panel.on{display:flex;animation:popIn .18s ease-out}
.notif-head{
  padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:var(--bg2);
}
.notif-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text);flex:1;letter-spacing:-.1px}
.notif-count{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.06em}
.notif-list{flex:1;overflow-y:auto}
.notif-item{
  padding:11px 14px;display:flex;gap:11px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:.12s;position:relative;
}
.notif-item:hover{background:var(--bg2)}
.notif-item.unread{background:rgba(0,113,227,.05)}
.notif-item.unread::before{content:'';position:absolute;left:5px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.notif-item-icon{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--cyan-soft);color:var(--cyan);
}
.notif-item-icon.gold{background:var(--gold-bg);color:var(--gold)}
.notif-item-icon.red{background:var(--red-bg);color:var(--red)}
.notif-item-icon.green{background:var(--green-bg);color:var(--green)}
.notif-item-icon.purple{background:var(--purple-bg);color:var(--purple)}
.notif-item-body{flex:1;min-width:0}
.notif-item-title{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:2px}
.notif-item-text{font-size:12px;color:var(--text2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-item-time{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-top:4px;letter-spacing:.04em}
.notif-empty{padding:40px 20px;text-align:center;color:var(--text3);font-size:12.5px}

/* AVISOS DO SISTEMA — a faixa no topo das Notificações («ainda não estão a
   funcionar») e as linhas do modal de configuração. Só tokens: a mesma faixa
   tem de se ler em claro e em escuro (@avisos_sistema). */
.notif-aviso{
  padding:11px 14px;display:flex;flex-direction:column;gap:8px;
  background:var(--cyan-soft);border-bottom:1px solid var(--line);
}
.notif-aviso-txt{font-size:12px;color:var(--text2);line-height:1.45}
.notif-aviso-acoes{display:flex;gap:6px;flex-wrap:wrap}
.avisos-estado{display:flex;gap:8px;align-items:flex-start;margin-bottom:14px}
.avisos-estado-txt{font-size:12px;color:var(--text2);line-height:1.45;flex:1}
.avisos-cta{margin:-6px 0 14px}
.avisos-sec{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text3);margin:16px 0 4px;
}
.avisos-linha{
  display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
}
.avisos-linha:last-of-type{border-bottom:0}
.avisos-linha.off{opacity:.45}
.avisos-linha-txt{flex:1;min-width:0}
.avisos-linha-rot{font-size:12.5px;font-weight:600;color:var(--text)}
.avisos-linha-nota{font-size:11.5px;color:var(--text2);line-height:1.4;margin-top:2px}
.avisos-switch{position:relative;flex-shrink:0;width:38px;height:22px;cursor:pointer}
.avisos-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.avisos-switch span{
  position:absolute;inset:0;border-radius:11px;background:var(--bg3);
  border:1px solid var(--line);transition:.15s;pointer-events:none;
}
.avisos-switch span::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--bg1);box-shadow:var(--shadow);transition:.15s;
}
.avisos-switch input:checked + span{background:var(--cyan);border-color:var(--cyan)}
.avisos-switch input:checked + span::after{transform:translateX(16px);background:#fff}
.avisos-switch input:disabled + span{opacity:.5}
.avisos-switch input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.avisos-rodape{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.avisos-nota{font-size:11.5px;color:var(--text3);line-height:1.45}

/* RIGHT PANEL (chat / notif / tarefas) — abre encostado à borda direita */
.right-panel{
  position:fixed;top:var(--h-topbar);right:0;bottom:0;width:400px;background:var(--bg1);
  border-left:1px solid var(--line);z-index:90;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s ease-out;box-shadow:var(--shadow-lg);
}
.right-panel.open{transform:translateX(0)}
/* (07/10/2026) FECHADO não pinta nada: fora do ecrã por translateX, a sombra
   (64px de desfoque) e o backdrop-filter entravam pela borda direita do ecrã —
   uma faixa escura no tema escuro, clara no claro. `visibility` só muda no FIM
   do fecho (o deslizar continua a ver-se) e logo no início da abertura; de
   brinde, fechado deixa de apanhar o foco do Tab. */
.right-panel{visibility:hidden;transition:transform .22s ease-out,visibility 0s linear .22s}
.right-panel.open,body.rp-pinned .right-panel{visibility:visible;transition:transform .22s ease-out,visibility 0s}

/* painel fixado: reserva a largura do painel no conteúdo */
body.rp-pinned .layout{margin-right:400px;transition:margin .22s}
body.rp-pinned .right-panel{transform:translateX(0);box-shadow:none;right:0}
body.rp-pinned .admin-banner + .layout{margin-right:400px}

.rp-head{
  display:flex;align-items:stretch;background:var(--bg2);border-bottom:1px solid var(--line);flex-shrink:0;
}
.rp-tabs{display:flex;flex:1;gap:0}
.rp-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px;font-size:11.5px;font-weight:600;color:var(--text2);
  border-bottom:2px solid transparent;transition:.15s;position:relative;
}
.rp-tab:hover{color:var(--text);background:var(--bg3)}
.rp-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);background:var(--bg1)}
.rp-tab-badge{
  display:none;min-width:16px;height:16px;padding:0 4px;background:var(--red);color:var(--on-estado,#fff);
  border-radius:8px;font-family:var(--font-mono);font-size:9px;font-weight:700;
  align-items:center;justify-content:center;letter-spacing:0;
}
.rp-tab-badge.on{display:inline-flex}
.rp-tab.active .rp-tab-badge{background:var(--cyan)}
/* cabeçalho do painel direito (substituiu a barra de abas): nome da secção aberta */
.rp-title{flex:1;display:flex;align-items:center;padding:0 14px;font-family:var(--font-display);
  font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.1px}
.rp-actions{display:flex;align-items:center;gap:2px;padding:0 8px}
.rp-action{
  width:28px;height:28px;border-radius:5px;color:var(--text3);
  display:flex;align-items:center;justify-content:center;transition:.15s;font-size:13px;
}
.rp-action:hover{background:var(--bg);color:var(--text)}
.rp-action.active,.rp-action#rpPinBtn.on{background:var(--cyan-soft);color:var(--cyan)}

.rp-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.rp-pane[hidden]{display:none}
.rp-pane-head{
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg2);
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.rp-pane-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text);flex:1;letter-spacing:-.1px}
.rp-pane-count{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.04em}

/* POLICIES PANEL ITEMS (tab no painel direito) */
.pol-panel-item{
  padding:11px 13px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s;
}
.pol-panel-item:hover{background:var(--bg2)}
.pol-panel-item:last-child{border-bottom:none}

/* 4 tabs no painel: ajustar font-size para caber */
.rp-tab{font-size:11px;padding:10px 4px}
.rp-tab span{white-space:nowrap}

/* POLICIES PAGE — toolbar, sidebar, cards */
.pol-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.pol-search{flex:1;min-width:240px;padding:9px 12px;background:var(--bg1);border:1px solid var(--line);border-radius:6px;font-size:12.5px;outline:none;font-family:var(--font-ui)}
.pol-search:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
.pol-chips,.pol-context-toggle{display:flex;gap:5px;flex-wrap:wrap}
.pol-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--bg1);border:1px solid var(--line);color:var(--text2);cursor:pointer;transition:.12s;font-family:var(--font-ui)}
.pol-chip:hover{background:var(--bg)}
.pol-chip.active{background:var(--cyan-soft);color:var(--cyan);border-color:var(--acc-bd)}
.pol-chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

.pol-layout{display:grid;grid-template-columns:220px 1fr;gap:16px}
.pol-sidebar{background:var(--bg1);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;position:sticky;top:14px;max-height:calc(100vh - 200px)}
.pol-sidebar-toggle{display:flex;border-bottom:1px solid var(--line)}
.pol-sidebar-toggle button{flex:1;padding:8px;font-size:11px;font-weight:600;color:var(--text2);background:none;border:none;cursor:pointer;border-right:1px solid var(--line);font-family:var(--font-ui)}
.pol-sidebar-toggle button:last-child{border-right:none}
.pol-sidebar-toggle button.active{background:var(--cyan-soft);color:var(--cyan)}
.pol-sidebar-toggle button:hover:not(.active){background:var(--bg)}
.pol-sidebar-list{flex:1;overflow-y:auto;padding:6px}
.pol-side-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:7px 10px;border-radius:5px;font-size:12px;color:var(--text2);background:none;border:none;cursor:pointer;text-align:left;margin-bottom:1px;font-family:var(--font-ui)}
.pol-side-item:hover{background:var(--bg)}
.pol-side-item.active{background:var(--cyan-soft);color:var(--cyan);font-weight:600}
.pol-side-item span{font-family:var(--font-mono);font-size:10px;color:var(--text3)}

.pol-main{min-height:200px}
.pol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.pol-card{background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:7px;border-left:3px solid var(--line2);min-height:170px}
.pol-card:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.pol-card--def   { border-left-color:#0f7f9b }
.pol-card--regra { border-left-color:#0071e3 }
.pol-card--proc  { border-left-color:#1d8a45 }
.pol-card--kpi   { border-left-color:#b25a00 }
.pol-card--aviso { border-left-color:#d70015 }
.pol-card--conduta { border-left-color:#8944ab }
.pol-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pol-sev{font-size:9.5px;font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.pol-card-title{font-size:13.5px;font-weight:700;color:var(--text);font-family:var(--font-display);letter-spacing:-.1px;line-height:1.25}
.pol-card-body{font-size:12px;color:var(--text2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pol-card-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.pol-badge{font-family:var(--font-mono);font-size:9.5px;color:var(--text3);background:var(--bg);border:1px solid var(--line);padding:1px 6px;border-radius:3px}
.pol-badge--topic{color:var(--purple);background:var(--purple-bg);border-color:var(--purple-bd)}
.pol-card-foot{display:flex;gap:10px;font-family:var(--font-mono);font-size:9.5px;color:var(--text3);padding-top:6px;border-top:1px solid var(--line);margin-top:auto}

@media (max-width:920px){
  .pol-layout{grid-template-columns:1fr}
  .pol-sidebar{position:static;max-height:none}
}

/* PÁGINAS HTML COMPLETAS (full-doc) — embrulhadas em iframe */
/* alturas: topbar 54px + module-strip 34px (+ admin banner 36px) */
.page-iframe-wrap{
  position:relative;
  height:calc(100vh - var(--h-topbar) - var(--h-strip));
  margin:-24px -28px;
  background:var(--bg);
}
body.admin-on .page-iframe-wrap{ height:calc(100vh - var(--h-topbar) - var(--h-strip) - 36px) }
.page-iframe{
  width:100%;height:100%;border:0;display:block;background:#fff;
}

/* POLICIES FOOTER (widget auto-injectado no fim de cada página) */
.page-policies-footer{
  margin:24px 0 0;padding:16px 18px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
}
.pp-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px;letter-spacing:-.1px}
.pp-count{font-family:var(--font-mono);font-size:10px;color:var(--text3);background:var(--bg1);border:1px solid var(--line);padding:1px 6px;border-radius:3px;font-weight:500}
.pp-groups{display:flex;flex-direction:column;gap:10px}
.pp-section{display:flex;flex-direction:column;gap:5px}
.pp-section-head{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--text3);font-weight:700}
.pp-def   .pp-section-head, .pp-section-head.pp-def   { color:#0f7f9b }
.pp-regra .pp-section-head, .pp-section-head.pp-regra { color:#0071e3 }
.pp-proc  .pp-section-head, .pp-section-head.pp-proc  { color:#1d8a45 }
.pp-kpi   .pp-section-head, .pp-section-head.pp-kpi   { color:#b25a00 }
.pp-aviso .pp-section-head, .pp-section-head.pp-aviso { color:#d70015 }
.pp-conduta .pp-section-head, .pp-section-head.pp-conduta { color:#8944ab }
.pp-chips{display:flex;flex-wrap:wrap;gap:5px}
.pp-foot{margin-top:12px;text-align:right}

/* POLICY CHIPS (@tipo.alias inline) */
.policy-chip{
  display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:10px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;
  border:1px solid;cursor:pointer;transition:.12s;vertical-align:middle;line-height:1.4;
  white-space:nowrap;
}
.policy-chip:hover{filter:brightness(.95);transform:translateY(-1px)}
.policy-chip--def   { background:#eef9fc;color:#0f7f9b;border-color:#b5e3ef }
.policy-chip--regra { background:#eef5fd;color:#0071e3;border-color:#c9dff6 }
.policy-chip--proc  { background:#eff9f1;color:#1d8a45;border-color:#b3dfc0 }
.policy-chip--kpi   { background:#fdf6ec;color:#b25a00;border-color:#efd3a3 }
.policy-chip--aviso { background:#fdf1f1;color:#d70015;border-color:#f3b8bc }
.policy-chip--conduta { background:#f7f0fb;color:#8944ab;border-color:#e0c9ee }

/* TOAST STACK */
.toast-stack{
  position:fixed;bottom:18px;right:18px;z-index:400;display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
body.rp-pinned .toast-stack{right:418px}
/* …e com o painel ABERTO sem estar fixado (28/09): os avisos caíam em cima da
   caixa de escrever do chat («Grupo criado» tapava o campo). O mesmo afastamento
   que o «?» já tinha (`body:not(.modo-extensao).rp-open .help-fab`). */
body:not(.modo-extensao).rp-open .toast-stack{right:418px}
.toast{
  width:340px;background:var(--glass-menu);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:11px;padding:12px 12px 14px;
  position:relative;overflow:hidden;animation:toastIn .25s ease-out;pointer-events:auto;
}
.toast.out{animation:toastOut .2s ease-in forwards}
@keyframes toastIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}
.toast-icon{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--cyan-soft);color:var(--cyan);
}
.toast-red .toast-icon{background:var(--red-bg);color:var(--red)}
.toast-gold .toast-icon{background:var(--gold-bg);color:var(--gold)}
.toast-purple .toast-icon{background:var(--purple-bg);color:var(--purple)}
.toast-green .toast-icon{background:var(--green-bg);color:var(--green)}
.toast-body{flex:1;min-width:0}
.toast.clickable .toast-body{cursor:pointer}
.toast-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;letter-spacing:-.1px}
.toast-text{font-size:12px;color:var(--text2);line-height:1.4}
.toast-close{
  width:22px;height:22px;border-radius:4px;color:var(--text3);font-size:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.toast-close:hover{background:var(--bg);color:var(--text)}
.toast-progress{
  position:absolute;left:0;bottom:0;height:2px;background:var(--cyan);
  animation:toastProg 6s linear forwards;
}
.toast-red .toast-progress{background:var(--red)}
.toast-gold .toast-progress{background:var(--gold)}
.toast-purple .toast-progress{background:var(--purple)}
.toast-green .toast-progress{background:var(--green)}
@keyframes toastProg{from{width:100%}to{width:0%}}

@media (max-width:920px){
  .toast-stack{right:10px;left:10px}
  /* no telemóvel o painel é o ecrã: o afastamento de secretária atirava os
     avisos para fora dele */
  body:not(.modo-extensao).rp-open .toast-stack{right:10px}
  .toast{width:auto}
}

/* AVATAR + STATUS DOT */
.avatar-wrap{position:relative;display:inline-flex}
.user-pill{cursor:pointer;transition:.15s}
.user-pill:hover{background:var(--bg)}

.status-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:#98989d;border:2px solid var(--bg1);flex-shrink:0;
}
.user-pill .status-dot{position:absolute;bottom:-2px;right:-2px}
.status-available{background:#34c759}
.status-busy{background:#ff3b30}
.status-away{background:#ff9f0a}
.status-offline{background:#98989d}

/* STATUS MENU */
/* O menu do utilizador CRESCEU (estado, tema, estilo, layout, idioma, movimento,
   interação + 8 ações) e não cabia: medido a 01/08 em 928px de altura num ecrã de
   720px, sem max-height nem overflow — os DOIS últimos itens, «Modo de edição» e
   «Terminar sessão», ficavam fora do ecrã e não havia scroll que chegasse lá
   (Telmo: «saiu do perfil do utilizador o modo editar» e «também não tem o
   logoff» — não tinham saído, estavam por baixo do fundo do ecrã). Um menu que
   não cabe tem de rolar; e é o `dvh` que conta no telefone, onde a barra do
   browser come altura (o `vh` fica como recurso para motores sem dvh). */
.status-menu{
  display:none;position:fixed;top:var(--h-topbar);right:14px;width:220px;
  background:var(--glass-menu);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-lg);z-index:300;padding:6px;flex-direction:column;
  max-height:calc(100vh - var(--h-topbar) - 14px);
  max-height:calc(100dvh - var(--h-topbar) - 14px);
  overflow-y:auto;overscroll-behavior:contain;
}
.status-menu.on{display:flex;animation:popIn .15s ease-out}
.status-menu-head{
  font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.1em;
  text-transform:uppercase;padding:6px 8px 4px;
}
.status-menu button{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:5px;
  font-size:12.5px;color:var(--text2);text-align:left;transition:.12s;
}
.status-menu button:hover{background:var(--bg)}
.status-menu button .status-dot{position:static;border-color:var(--bg1);width:11px;height:11px}
/* «Aspeto e idioma» recolhido (06/10): a linha lê-se como os outros itens do
   menu, com o resumo do escolhido à direita e a seta que roda ao abrir */
.sm-aparencia > summary{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;
  font-size:12.5px;color:var(--text2);list-style:none;transition:.12s;user-select:none}
.sm-aparencia > summary::-webkit-details-marker{display:none}
.sm-aparencia > summary:hover{background:var(--bg)}
.sm-aparencia > summary{flex-wrap:wrap;row-gap:1px}
.sm-aparencia > summary > span[data-i18n]{white-space:nowrap}
/* o resumo vai para a 2.ª linha, alinhado com o rótulo: ao lado não cabia nos 220px do menu */
.sm-apar-resumo{order:3;flex-basis:100%;padding-left:25px;font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sm-apar-resumo:empty{display:none}
.sm-apar-chev{order:2;margin-left:auto;color:var(--text3);transition:transform .15s;flex:none}
.sm-aparencia[open] > summary .sm-apar-chev{transform:rotate(90deg)}
.sm-aparencia[open] > summary{color:var(--text)}
.sm-apar-corpo{padding:0 0 4px}

/* CHAT FILTER CHIPS */
.chat-filters{
  display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:var(--bg1);
}
.chat-filter-chip{
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--bg2);color:var(--text2);transition:.15s;border:none;cursor:pointer;
}
.chat-filter-chip:hover{background:var(--bg3);color:var(--text)}
.chat-filter-chip.active{background:var(--cyan-soft);color:var(--cyan)}

/* CHAT LIST (Messenger-style) */
.chat-list{flex:1;overflow-y:auto;padding:4px 0;background:var(--bg1)}
.chat-list-empty{padding:30px 20px;text-align:center;color:var(--text3);font-size:12.5px}
.chat-list-row{
  display:flex;align-items:center;gap:11px;padding:9px 14px;cursor:pointer;
  transition:.1s;position:relative;
}
.chat-list-row:hover{background:var(--bg2)}
.chat-list-row.unread{background:rgba(0,113,227,.05)}
.cl-avatar-wrap{position:relative;flex-shrink:0;width:42px;height:42px}
.cl-avatar{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--on-accent,#fff);font-weight:700;font-size:13px;font-family:var(--font-display);
}
.cl-avatar.group{background:linear-gradient(135deg,var(--cyan),var(--purple))}
.cl-avatar-wrap .status-dot{position:absolute;bottom:0;right:0;width:11px;height:11px;border-color:var(--bg1)}
.cl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-top{display:flex;align-items:center;gap:8px}
.cl-name{flex:1;font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-list-row.unread .cl-name{font-weight:700}
.cl-time{font-family:var(--font-mono);font-size:10px;color:var(--text3);flex-shrink:0;letter-spacing:.04em}
.chat-list-row.unread .cl-time{color:var(--cyan)}
.cl-bottom{display:flex;align-items:center;gap:8px}
.cl-preview{flex:1;font-size:12px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-list-row.unread .cl-preview{color:var(--text);font-weight:500}
.cl-unread{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex-shrink:0}

/* CHAT BACK BAR */
.chat-back-bar{
  display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:var(--bg2);flex-shrink:0;
}
.chat-back-btn{
  width:30px;height:30px;border-radius:50%;font-size:18px;color:var(--cyan);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chat-back-btn:hover{background:var(--bg)}

/* NOTIFICATIONS — section heads + dot */
.notif-section-head{
  font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text);
  padding:10px 14px 6px;letter-spacing:-.1px;
}
.notif-unread-dot{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--cyan);flex-shrink:0;
}
.notif-item.unread::before{display:none}

/* TÓPICOS da caixa (02/08) — o cabeçalho de um assunto leva a conta do que
   falta ler e o gesto que o limpa. O botão só aparece quando há o que limpar,
   por isso a linha nunca fica com um botão morto. */
.notif-section-head.topico{
  display:flex;align-items:baseline;gap:8px;padding-right:10px;
}
.notif-topico-nome{flex:0 0 auto}
.notif-topico-conta{
  font-family:var(--font-mono);font-size:10.5px;font-weight:400;color:var(--text3);
  letter-spacing:.02em;margin-right:auto;white-space:nowrap;
}
.notif-topico-conta b{font-weight:700;color:var(--text2)}
.notif-topico-btn{
  flex:0 0 auto;border:1px solid var(--line);background:var(--bg1);color:var(--text2);
  border-radius:6px;padding:2px 8px;font-family:var(--font-ui);font-size:11px;
  cursor:pointer;white-space:nowrap;
}
.notif-topico-btn:hover{background:var(--bg);color:var(--text);border-color:var(--line2)}

/* ═══ PAINEL DE NOTIFICAÇÕES (06/10) ══════════════════════════════════════════
   Lista AGRUPADA EM CARTÕES: o fundo da lista é cinzento e cada assunto é um
   cartão branco com as linhas lá dentro, separadas por um fio — o mesmo desenho
   das definições do iOS. A lista plana com um cabeçalho por cada uma não tinha
   hierarquia nenhuma. Em cima: o resumo com o «marcar todas» como ligação, e os
   filtros num controlo segmentado com a contagem em cada um (data-n). */
[data-pane="notif"]{background:var(--bg)}
.notif-cab.rp-pane-head{background:var(--bg1);border-bottom:0;padding:12px 14px 2px;gap:8px}
.notif-cab .rp-pane-count{font-family:var(--font-ui);font-size:12.5px;color:var(--text3);letter-spacing:0}
.notif-cab .rp-pane-count b{color:var(--text);font-weight:700}
.notif-todas{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:7px;border:0;background:transparent;
  color:var(--cyan);font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.notif-todas:hover{background:var(--cyan-soft)}
.notif-todas:disabled{color:var(--text3);background:transparent;cursor:default;opacity:.6}

/* filtros: calha + segmento branco levantado; a contagem numa bolinha */
.notif-seg.chat-filters{display:flex;flex-wrap:nowrap;gap:2px;margin:0;padding:8px 14px 12px;background:var(--bg1);
  border-bottom:1px solid var(--line)}
.notif-seg .chat-filter-chip{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:5px 6px;border-radius:7px;background:transparent;color:var(--text2);font-size:12px;font-weight:500;white-space:nowrap;
  box-shadow:none}
.notif-seg{position:relative}
.notif-seg::before{content:'';position:absolute;inset:8px 14px 12px;background:var(--bg3);border-radius:9px;z-index:0}
.notif-seg .chat-filter-chip{position:relative;z-index:1}
.notif-seg .chat-filter-chip:hover{color:var(--text);background:transparent}
.notif-seg .chat-filter-chip.active{background:var(--bg1);color:var(--text);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.notif-seg .chat-filter-chip[data-n]::after{content:attr(data-n);min-width:16px;height:16px;padding:0 5px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  background:var(--text3);color:var(--bg1);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.notif-seg .chat-filter-chip[data-filter="unread"][data-n]::after{background:var(--cyan);color:var(--on-accent,#fff)}
.notif-seg .chat-filter-chip[data-filter="conhecimento"][data-n]::after{background:var(--gold);color:var(--on-estado,#fff)}
/* no telemóvel (06/10): os quatro segmentos não cabiam nos 375px — o modo toque
   dá 13px e folga de 16px aos chips; aqui o segmentado aperta (o alvo continua
   com a altura toda da calha). */
@media (max-width:600px){
  .notif-seg.chat-filters{padding:8px 10px 12px}
  .notif-seg::before{inset:8px 10px 12px}
  #notifFilterChips .chat-filter-chip{padding:7px 3px;font-size:12px;gap:3px;min-width:0}
  #notifFilterChips .chat-filter-chip[data-n]::after{min-width:15px;height:15px;padding:0 4px;font-size:9.5px}
}

/* aviso dos avisos: uma linha compacta com ícone, o ⓘ da ajuda no fim */
.notif-aviso{position:relative;margin:12px 12px 0;padding:9px 10px 9px 38px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg1);flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:6px}
.notif-aviso::before{content:'';position:absolute;left:11px;top:50%;width:18px;height:18px;transform:translateY(-50%);
  background:var(--gold);
  -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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E") center/contain no-repeat}
.notif-aviso-txt{flex:1 1 150px;font-size:12px;color:var(--text2)}
.notif-aviso-acoes .btn{white-space:nowrap}
.notif-aviso > .info-dot{margin:0}

/* a lista: fundo cinzento, assuntos em cartão */
.notif-list{background:var(--bg);padding:0 12px 18px}
.notif-section-head{position:sticky;top:0;z-index:2;background:var(--bg);
  font-family:var(--font-ui);font-size:12px;font-weight:700;color:var(--text);letter-spacing:0;
  padding:16px 4px 7px;margin:0}
.notif-section-head.topico{display:flex;align-items:center;gap:7px;padding-right:0}
.notif-topico-conta{font-family:var(--font-ui);font-size:0;letter-spacing:0;margin-right:auto}
.notif-topico-conta b{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;box-sizing:border-box;background:var(--cyan);color:var(--on-accent,#fff);font-size:10.5px;font-weight:700}
.notif-topico-btn{border:0;background:transparent;color:var(--cyan);padding:2px 2px;font-size:11.5px;font-weight:600}
.notif-topico-btn:hover{background:transparent;color:var(--cyan);text-decoration:underline}
.notif-grupo{background:var(--bg1);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03)}
.notif-grupo .notif-item{margin:0;border-radius:0;border-bottom:0;padding:12px 12px 12px 24px;gap:11px;background:transparent}
.notif-grupo .notif-item + .notif-item::after{content:'';position:absolute;top:0;left:67px;right:0;height:1px;background:var(--line)}
.notif-grupo .notif-item:hover{background:var(--bg2)}
.notif-item-icon{width:32px;height:32px;border-radius:50%}
.notif-item-icon svg{width:15px;height:15px}
/* título e hora na mesma linha; o resto por baixo, a toda a largura */
.notif-item-body{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:baseline}
.notif-item-body > *{grid-column:1 / -1}
.notif-item-title{grid-column:1;grid-row:1;margin:0 0 2px;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-item-time{grid-column:2;grid-row:1;margin:0;font-family:var(--font-ui);font-size:11px;letter-spacing:0;color:var(--text3);white-space:nowrap}
.notif-item-text{font-size:12.5px;line-height:1.4}
/* por ler: ponto azul à esquerda (como no correio) e o título mais forte */
.notif-unread-dot{left:9px;right:auto;top:28px;transform:none;width:8px;height:8px}
.notif-item.unread .notif-item-time{color:var(--cyan)}   /* muda de cor e NÃO engrossa (regra do não lido, nao-lidos-chat.test) */
.notif-item:not(.unread) .notif-item-title{font-weight:500;color:var(--text2)}
.notif-item:not(.unread) .notif-item-icon{opacity:.75}
.notif-empty{margin:24px 0;padding:32px 16px;background:var(--bg1);border:1px solid var(--line);border-radius:12px}

/* TAREFAS e POLÍTICAS no mesmo desenho (06/10): fundo cinzento, cartões por
   grupo (procedimento / «por dar conhecimento»), cabeçalho com ligação. */
[data-pane="tasks"],[data-pane="policies"]{background:var(--bg)}
.rp-pane .tasks-list,.rp-pane .pol-panel-lista{background:var(--bg);padding:0 12px 18px;display:block;gap:0}
.tasks-list > .notif-section-head:first-child,.pol-panel-lista > .notif-section-head:first-child{padding-top:14px}
.tasks-list > .notif-grupo:first-child,.pol-panel-lista > .notif-grupo:first-child{margin-top:12px}
.rp-pane .tasks-empty{margin:16px 0;padding:32px 16px;background:var(--bg1);border:1px solid var(--line);border-radius:12px}
.pol-panel-sep{height:12px}
/* linha de tarefa: círculo de marcar + título + tipo/quem */
.notif-grupo .task-card{flex-direction:row;align-items:flex-start;gap:11px;padding:11px 12px;background:transparent;
  border:0;border-radius:0;position:relative}
.notif-grupo .task-card + .task-card::after{content:'';position:absolute;top:0;left:42px;right:0;height:1px;background:var(--line)}
.notif-grupo .task-card:hover{background:var(--bg2);border:0}
.notif-grupo .task-card-check{width:19px;height:19px;border-radius:50%;margin-top:1px;border:1.5px solid var(--line2);font-size:11px;font-weight:700}
.notif-grupo .task-card:hover .task-card-check{border-color:var(--cyan)}
.task-card-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.notif-grupo .task-card-title{font-size:13px;font-weight:600;line-height:1.35}
.notif-grupo .task-card-meta{margin-left:0}
.task-card-quem{font-size:11.5px;color:var(--text3)}
.notif-grupo .task-card.done{opacity:1}
.notif-grupo .task-card.done .task-card-title{color:var(--text3);font-weight:500}
/* linha de política: título, duas linhas de texto e o @alias com os estados */
.notif-grupo .pol-panel-item{padding:12px;border-bottom:0;position:relative;background:transparent}
.notif-grupo .pol-panel-item + .pol-panel-item::after{content:'';position:absolute;top:0;left:12px;right:0;height:1px;background:var(--line)}
.notif-grupo .pol-panel-item:hover{background:var(--bg2)}
.pol-panel-tit{font-size:13px;font-weight:600;color:var(--text);line-height:1.35}
.pol-panel-txt{font-size:12.5px;color:var(--text2);line-height:1.4;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pol-panel-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
/* filtros das políticas: pastilhas finas numa linha que rola (seis não cabem num segmentado) */
.pol-chips.chat-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px;padding:8px 14px 12px;background:var(--bg1)}
.pol-chips::-webkit-scrollbar{display:none}
.pol-chips .chat-filter-chip{padding:4px 11px;font-weight:500;background:transparent;color:var(--text2);border:1px solid var(--line);white-space:nowrap}
.pol-chips .chat-filter-chip:hover{background:var(--bg);color:var(--text)}
.pol-chips .chat-filter-chip.active{background:var(--cyan-soft);color:var(--cyan);border-color:var(--acc-bd);font-weight:600}

/* APROVAÇÕES — o pedido decide-se na própria linha da aba, e o pedido todo
   abre num modal. Sem uma segunda paleta: tudo por token, dark incluído. */
.notif-item.aprov-pendente{border-left:2px solid var(--cyan);background:var(--cyan-soft)}
.notif-item.aprov-pendente:hover{background:var(--cyan-soft);filter:brightness(.98)}
.aprov-linha{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.aprov-cab{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.aprov-cab-tit{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text);line-height:1.3}
.aprov-cab-sub{font-size:11.5px;color:var(--text2);margin-top:3px}
.aprov-resumo{font-size:12.5px;color:var(--text2);margin-bottom:10px}
.aprov-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-bottom:10px}
.aprov-campo{display:flex;flex-direction:column;gap:2px;min-width:0}
.aprov-campo.largo{grid-column:1/-1}
.aprov-campo-rot{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text3);
}
.aprov-campo-val{font-size:12.5px;color:var(--text);word-break:break-word}
.aprov-detalhe{
  white-space:pre-wrap;font-size:12px;color:var(--text2);background:var(--bg2);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  max-height:220px;overflow:auto;margin-bottom:10px;
}
.aprov-falta{
  font-size:11.5px;color:var(--gold);background:var(--gold-bg);
  border:1px solid var(--gold-bd);border-radius:8px;padding:6px 10px;margin-bottom:10px;
}
.aprov-motivo{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.aprov-motivo label{font-size:12px;font-weight:600;color:var(--text)}
.aprov-motivo-reg{font-weight:400;color:var(--text3)}
.aprov-motivo textarea{
  width:100%;border:1px solid var(--line2);border-radius:8px;padding:8px 10px;
  font-family:var(--font-ui);font-size:12.5px;color:var(--text);background:var(--bg1);
  resize:vertical;min-height:60px;
}
.aprov-motivo textarea:focus{outline:none;border-color:var(--cyan)}
.aprov-motivo-ajuda{font-size:11px;color:var(--text3)}
.aprov-erro{
  font-size:11.5px;color:var(--red);background:var(--red-bg);
  border:1px solid var(--red-bd);border-radius:8px;padding:6px 10px;
}
.aprov-decidido{
  font-size:12px;color:var(--text2);background:var(--bg2);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;
}
.aprov-decidido-motivo{margin-top:4px;color:var(--text);font-style:italic}

/* DAR CONHECIMENTO (políticas e regras) — pastilha + gesto na própria linha,
   e o aviso do topo. Tudo por token: o dark sai igual sem uma segunda paleta. */
.notif-item-conh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.notif-item.conh-pendente,.pol-panel-item.conh-pendente{
  border-left:2px solid var(--gold);background:var(--gold-bg);
}
.notif-item.conh-pendente:hover,.pol-panel-item.conh-pendente:hover{background:var(--gold-bg);filter:brightness(.98)}
.topbar-conh{display:flex;align-items:center}
.topbar-conh:empty{display:none}
.conh-chip{
  display:inline-flex;align-items:center;gap:5px;border:1px solid var(--gold-bd);
  background:var(--gold-bg);color:var(--gold);border-radius:999px;padding:3px 10px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.03em;
  cursor:pointer;white-space:nowrap;
}
.conh-chip:hover{background:var(--gold);color:var(--on-estado,#fff);border-color:var(--gold)}
.conh-chip b{font-size:11.5px}

/* CHAT SEARCH */
.chat-search{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--bg2);flex-shrink:0;color:var(--text3);
}
.chat-search input{
  flex:1;background:var(--bg1);border:1px solid var(--line);border-radius:14px;
  padding:6px 12px;font-size:12px;color:var(--text);outline:none;
}
.chat-search input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}

/* CHAT ATTACH */
.chat-attach-btn{
  width:32px;height:32px;border-radius:50%;color:var(--text2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chat-attach-btn:hover{background:var(--bg);color:var(--cyan)}
.chat-attach-card{
  margin-top:5px;padding:7px 10px;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);border-radius:6px;display:flex;align-items:center;gap:8px;
  font-size:11.5px;
}
.chat-message:not(.mine) .chat-attach-card{background:var(--bg2);border-color:var(--line);color:var(--text)}
.chat-attach-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.1);border-radius:4px}
.chat-attach-name{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-attach-size{font-family:var(--font-mono);font-size:10px;opacity:.8}

/* TASKS PANE */
.tasks-list{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.tasks-empty{padding:30px 20px;text-align:center;color:var(--text3);font-size:12.5px}
.task-card{
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:10px 12px;
  display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:.15s;
}
.task-card:hover{background:var(--bg1);border-color:var(--line2)}
.task-card.done{opacity:.55}
.task-card.done .task-card-title{text-decoration:line-through}
.task-card-head{display:flex;align-items:center;gap:8px}
.task-card-check{
  width:18px;height:18px;border-radius:4px;border:1.5px solid var(--line2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:var(--bg1);
}
.task-card.done .task-card-check{background:var(--green);border-color:var(--green);color:var(--on-estado,#fff);font-size:10px}
.task-card-title{flex:1;font-size:12.5px;font-weight:600;color:var(--text)}
.task-card-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-left:26px}
.task-card-meta .pill{font-size:9px;padding:1px 6px}
.task-card-proc{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-left:26px}

.chat-channels{
  display:flex;gap:4px;padding:8px 10px;overflow-x:auto;flex-shrink:0;
  border-bottom:1px solid var(--line);background:var(--bg2);
}
.chat-channels::-webkit-scrollbar{height:0}
.chat-channel{
  flex-shrink:0;display:flex;align-items:center;gap:6px;padding:5px 10px;
  border-radius:14px;background:var(--bg1);border:1px solid var(--line);
  font-size:11.5px;color:var(--text2);cursor:pointer;transition:.12s;font-weight:500;
}
.chat-channel:hover{background:var(--bg);color:var(--text)}
.chat-channel.active{background:var(--cyan);color:var(--on-accent,#fff);border-color:var(--cyan)}
.chat-channel .ch-icon{display:flex;align-items:center}
.chat-channel .ch-unread{
  font-family:var(--font-mono);font-size:9px;background:var(--red);color:var(--on-estado,#fff);
  padding:1px 5px;border-radius:8px;font-weight:600;
}
.chat-channel.active .ch-unread{background:#fff;color:var(--cyan)}
.chat-channel.dm{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-bd)}
.chat-channel.dm.active{background:var(--purple);color:var(--on-estado,#fff);border-color:var(--purple)}

.chat-active-head{
  padding:10px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.chat-active-name{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text)}
.chat-active-meta{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.04em}
.chat-active-status{margin-left:auto;font-family:var(--font-mono);font-size:9px;color:var(--green);display:flex;align-items:center;gap:4px}
.chat-active-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}

.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.chat-message{
  background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:8px 11px;
  max-width:85%;align-self:flex-start;display:flex;flex-direction:column;gap:3px;
}
.chat-message.mine{align-self:flex-end;background:var(--cyan);color:var(--on-accent,#fff);border-color:var(--cyan)}
.chat-message.unread{border-color:var(--cyan)}
.chat-msg-from{font-size:10.5px;font-weight:600;color:var(--text2)}
.chat-message.mine .chat-msg-from{color:rgba(255,255,255,.85)}
.chat-msg-body{font-size:12.5px;color:var(--text);line-height:1.45;word-wrap:break-word}
.chat-message.mine .chat-msg-body{color:var(--on-accent,#fff)}
.chat-msg-time{font-family:var(--font-mono);font-size:9px;color:var(--text3);align-self:flex-end;letter-spacing:.04em}
.chat-message.mine .chat-msg-time{color:rgba(255,255,255,.7)}

.chat-day-sep{align-self:center;font-family:var(--font-mono);font-size:10px;color:var(--text3);background:var(--bg);padding:3px 10px;border:1px solid var(--line);border-radius:10px;margin:4px 0}

.chat-compose{
  padding:10px 12px;border-top:1px solid var(--line);background:var(--bg2);
  display:flex;gap:8px;align-items:center;flex-shrink:0;
}
.chat-compose input{
  flex:1;padding:8px 12px;background:var(--bg1);border:1px solid var(--line);border-radius:18px;
  font-size:12.5px;color:var(--text);outline:none;
}
.chat-compose input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
.chat-foot{
  padding:6px 12px;background:var(--bg2);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-shrink:0;
}

@media (max-width:920px){
  .chat-drawer{width:100%}
  .notif-panel{right:10px;left:10px;width:auto}
}

/* CALENDAR */
.cal-toolbar{
  display:flex;align-items:center;gap:10px;padding:12px 0;flex-wrap:wrap;
}
.cal-month-name{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text);min-width:160px}
.cal-nav{display:flex;gap:4px;align-items:center}
.cal-nav button{
  width:30px;height:30px;border-radius:5px;border:1px solid var(--line);background:var(--bg1);
  color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:14px;
}
.cal-nav button:hover{background:var(--bg);color:var(--text)}
.cal-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:center}
.cal-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-size:11.5px;font-weight:500;border:1px solid var(--line);background:var(--bg1);
  color:var(--text2);cursor:pointer;transition:.12s;
}
.cal-chip:hover{background:var(--bg);color:var(--text)}
.cal-chip.active{background:var(--cyan-soft);color:var(--cyan);border-color:var(--acc-bd);font-weight:600}
.cal-chip-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cal-filters select{
  padding:6px 10px;background:var(--bg1);border:1px solid var(--line);border-radius:5px;
  font-size:11.5px;color:var(--text);outline:none;
}

.cal-grid{
  background:var(--bg1);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
}
.cal-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);background:var(--bg2);border-bottom:1px solid var(--line);
}
.cal-weekdays > div{
  padding:8px 10px;font-family:var(--font-mono);font-size:10px;color:var(--text3);
  letter-spacing:.1em;text-transform:uppercase;text-align:center;font-weight:600;
}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);min-height:120px;border-bottom:1px solid var(--line)}
.cal-week:last-child{border-bottom:none}
.cal-day{
  border-right:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:3px;
  cursor:pointer;transition:.1s;min-height:0;
}
.cal-day:last-child{border-right:none}
.cal-day:hover{background:var(--bg2)}
.cal-day.other-month{background:var(--bg);opacity:.55}
.cal-day.today .cal-day-num{
  background:var(--cyan);color:var(--on-accent,#fff);width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;
}
.cal-day-num{
  font-family:var(--font-mono);font-size:11.5px;color:var(--text2);font-weight:600;
  align-self:flex-start;
}
.cal-day-events{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow:hidden}
.cal-event{
  padding:2px 6px;border-radius:3px;font-size:10.5px;font-weight:500;
  border-left:3px solid;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;
}
.cal-event:hover{filter:brightness(.95)}
.cal-event-time{font-family:var(--font-mono);font-size:9.5px;font-weight:600;margin-right:3px;opacity:.85}
.cal-more{
  font-family:var(--font-mono);font-size:10px;color:var(--text3);padding:1px 6px;
  font-weight:500;letter-spacing:.04em;cursor:pointer;
}
.cal-more:hover{color:var(--cyan)}
/* (08/10/2026) as etiquetas NÃO encolhem: o que não cabe esconde-se e vai para o
   «+ N mais» (calAjustaMes no views.js) */
.cal-day-events > .cal-event,.cal-day-events > .cal-more{flex-shrink:0}
/* fim de semana recuado também no mês (como na semana/dia) — mais leve do que os
   dias de outro mês, que já têm o --bg e a opacidade */
.cal-day.fds:not(.other-month){background:color-mix(in srgb, var(--bg) 70%, var(--bg1))}
.cal-day.fds:not(.other-month):hover{background:var(--bg2)}

/* CALENDAR DAY MODAL list */
.cal-day-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.cal-day-event{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--bg2);border:1px solid var(--line);border-radius:6px;cursor:pointer;
}
.cal-day-event:hover{background:var(--bg1);border-color:var(--line2)}
.cal-day-event-bar{width:4px;align-self:stretch;border-radius:2px;flex-shrink:0}
.cal-day-event-body{flex:1;display:flex;flex-direction:column;gap:2px}
.cal-day-event-title{font-size:12.5px;font-weight:600;color:var(--text)}
.cal-day-event-meta{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.04em}

/* CALENDAR LEGEND */
.cal-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text2);margin-bottom:8px}
.cal-legend-item{display:inline-flex;align-items:center;gap:5px}
.cal-legend-dot{width:10px;height:10px;border-radius:3px}

@media (max-width:920px){
  .cal-week{min-height:80px}
  .cal-event{font-size:10px;padding:1px 4px}
}

/* PROCEDURES */
.proc-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.proc-filters input,.proc-filters select{
  padding:8px 11px;background:var(--bg1);border:1px solid var(--line);border-radius:6px;
  font-size:12.5px;color:var(--text);outline:none;
}
.proc-filters input:focus,.proc-filters select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
.proc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.proc-card{
  background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);
}
.proc-card:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.proc-card-head{display:flex;align-items:center;gap:10px}
.proc-card-title{flex:1;font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.proc-card-desc{font-size:12.5px;color:var(--text2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proc-card-meta{display:flex;flex-wrap:wrap;gap:5px}
.proc-card-stats{display:flex;gap:14px;padding-top:8px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:.04em;margin-top:auto}
.proc-card-stats strong{color:var(--text);font-size:13px;font-weight:700;font-family:var(--font-display);margin-right:4px}

/* PROCEDURE DETAIL */
.proc-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;
  background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  margin-top:6px;
}
.proc-summary-item{display:flex;flex-direction:column;gap:5px}
.proc-summary-l{font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.proc-summary-item .pill,.proc-summary-item .info-btn{align-self:flex-start;cursor:default}

/* STEP ROWS */
.step-row{
  display:flex;align-items:flex-start;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);position:relative;
}
.step-row:last-child{border-bottom:none}
.step-order{
  width:22px;font-family:var(--font-mono);font-size:11px;color:var(--text3);
  font-weight:600;flex-shrink:0;padding-top:9px;
}
.step-bullet{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;background:var(--bg2);color:var(--text2);position:relative;
}
.step-bullet.step-cyan{background:var(--cyan-soft);color:var(--cyan)}
.step-bullet.step-green{background:var(--green-bg);color:var(--green)}
.step-bullet.step-gold{background:var(--gold-bg);color:var(--gold)}
.step-bullet.step-purple{background:var(--purple-bg);color:var(--purple)}
.step-row:not(:last-child) .step-bullet::after{
  content:'';position:absolute;top:32px;left:50%;width:1px;height:calc(100% + 16px);
  background:var(--line);transform:translateX(-50%);
}
.step-body{flex:1;min-width:0}
.step-title{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:4px}
.step-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step-assignee{font-family:var(--font-mono);font-size:10.5px;color:var(--text3);letter-spacing:.04em}
.step-actions{display:flex;gap:2px;flex-shrink:0}

/* RESPONSIVE */
@media (max-width:920px){
  .sidebar{position:absolute;left:0;top:0;bottom:0;z-index:30;transform:translateX(-100%);transition:.25s;box-shadow:var(--shadow-md)}
  .sidebar.open{transform:translateX(0)}
  .search{width:160px}
  .widget,.widget.span-3,.widget.span-4,.widget.span-5,.widget.span-7,.widget.span-8,.widget.span-9{grid-column:span 12}
}

/* ═══════════════════════════════════════════════════════════
   MENU V3 — cores por área · favoritos na sidebar ·
   ligações externas (embed/janela) · "ver como" grupo
   ═══════════════════════════════════════════════════════════ */
:root{
  --ext:#c22030;  --ext-bg:#fdf1f1;  --ext-bd:#f3b8bc;
  --sys:#515154;  --sys-bg:#f0f0f3;  --sys-bd:#d2d2d7;
}

/* — accent de área: cada .nav-group recebe --ga via JS — */
.nav-group{--ga:var(--cyan)}
.nav-group .group-tag{
  background:color-mix(in srgb, var(--ga) 8%, var(--bg1));
  color:var(--ga);
  border-color:color-mix(in srgb, var(--ga) 32%, var(--bg1));
}
.nav-group .nav-icon{color:var(--ga);opacity:.78}
.nav-group .nav-item:hover .nav-icon{opacity:1}
.nav-group .nav-item.active{
  background:color-mix(in srgb, var(--ga) 9%, var(--bg1));
  color:color-mix(in srgb, var(--ga) 82%, var(--white));
  border-color:color-mix(in srgb, var(--ga) 32%, var(--bg1));
  box-shadow:inset 2.5px 0 0 var(--ga);
}
.group-tag.quality{background:var(--purple-bg);color:var(--quality);border-color:var(--purple-bd)}
.group-tag.maint{background:var(--green-bg);color:var(--maint);border-color:var(--green-bd)}
.group-tag.ext{background:var(--ext-bg);color:var(--ext);border-color:var(--ext-bd)}
.group-tag.sys{background:var(--sys-bg);color:var(--sys);border-color:var(--sys-bd)}

/* ═══ «VER POR» — as lentes do menu (Telmo 04/08) ═══════════════════════════
   Os NÚMEROS vêm dos tokens do layout (nada literal aqui além das espessuras
   de hairline, como no resto da folha). */
/* 06/10: controlo SEGMENTADO (calha + botão branco levantado, como o de zona do
   SYSTEC). Os inativos são só ícone; o ativo mostra também o nome. Com os cinco
   nomes à vista a fila transbordava («Departamentc») e lia-se como texto solto. */
.sb-eixos{
  display:flex;gap:2px;align-items:center;
  margin:10px var(--pad-row-x) 8px;padding:2px;
  background:var(--bg3);border:1px solid var(--line);border-radius:9px;
}
.sb-eixo{
  flex:1 1 0;min-width:0;height:calc(var(--sz-icon-sm) - 2px);
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:0 6px;border:0;border-radius:7px;
  background:transparent;color:var(--text3);
  font-family:var(--font-ui);font-size:11.5px;
  cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;
  white-space:nowrap;overflow:hidden;
}
.sb-eixo-ico{display:inline-flex;flex-shrink:0}
.sb-eixo-lbl{display:none;overflow:hidden;text-overflow:ellipsis}
.sb-eixo:hover{color:var(--text)}
.sb-eixo.is-on{flex:2 1 auto;background:var(--bg1);color:var(--text);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.sb-eixo.is-on .sb-eixo-ico{color:var(--cyan)}
.sb-eixo.is-on .sb-eixo-lbl{display:inline}
.sb-eixo-cfg{flex:0 0 auto;width:calc(var(--sz-icon-sm) - 2px)}
.sidebar.collapsed .sb-eixos{display:none}
.sb-eixo-vazio{padding:14px var(--pad-row-x);color:var(--text3);font-size:12px}

/* O grupo de uma lente: o ícone da área ao lado do título (é ele que faz a cor
   ler-se como PERTENÇA e não como decoração) e o contador em vez da tag. */
.nav-group-eixo .gh-ico-eixo{display:flex;align-items:center;color:var(--ga);flex-shrink:0}
.sidebar.collapsed .nav-group-eixo .gh-ico-eixo{display:none}
.nav-group-eixo .group-title{color:var(--text2)}
.nav-group-eixo .group-head.on-path .group-title{color:var(--text)}
.nav-group-eixo.is-residual .group-title{font-style:italic}
/* Cabeçalho da área com o menu ABERTO (06/10): lê-se como uma LINHA do menu e
   não como uma etiqueta — letra normal (nada de maiúsculas espaçadas a 9px),
   ícone da área à esquerda, contagem discreta e a seta à DIREITA, como nos
   itens com submenu. As oito pastilhas coloridas competiam com os ícones. */
.sidebar:not(.collapsed) .nav-group-eixo{margin:0 0 1px}
.sidebar:not(.collapsed) .nav-group-eixo .group-head{
  gap:9px;margin:0 6px;padding:7px var(--pad-row-x);min-height:var(--h-row);box-sizing:border-box;
  border-radius:var(--r-row);font-size:var(--fs-row);font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--text2);transition:background .12s,color .12s;
}
.sidebar:not(.collapsed) .nav-group-eixo .group-head:hover{background:var(--bg);color:var(--text)}
.sidebar:not(.collapsed) .nav-group-eixo .group-title{color:inherit;font-weight:inherit;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar:not(.collapsed) .nav-group-eixo .group-head.on-path{color:var(--text)}
.sidebar:not(.collapsed) .nav-group-eixo .group-tag{
  order:1;margin-left:auto;background:transparent;border:0;padding:0;
  color:var(--text3);font-size:11px;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums;
}
.sidebar:not(.collapsed) .nav-group-eixo .group-actions{order:2}
.sidebar:not(.collapsed) .nav-group-eixo .gh-icon{order:3;display:inline-flex;color:var(--text3)}
.sidebar:not(.collapsed) .nav-group-eixo .gh-ico-eixo svg{width:15px;height:15px}
/* área aberta: as páginas dela ficam penduradas num fio fino da cor da área */
.sidebar:not(.collapsed) .nav-group-eixo .group-head:not(.collapsed) + .group-body{
  margin:1px 0 6px calc(6px + var(--pad-row-x) + 7px);padding-left:4px;
  border-left:1px solid color-mix(in srgb, var(--ga) 30%, var(--line));
}
.sidebar:not(.collapsed) .nav-group-eixo .group-body > div > .nav-item{margin-left:0}
/* Régua recolhida numa lente (06/10): UM ícone por área, não as páginas todas.
   As páginas soltas de uma lente quase nunca têm ícone próprio e a régua virava
   uma coluna de «camadas» iguais. A área da página atual fica acesa como um item
   ativo; a novidade lá dentro sobe para o ícone da área (o mesmo ponto vermelho
   do .nav-new-dot); passar o rato ou clicar abre o menu com essa área aberta. */
.sidebar.collapsed .nav-group-eixo .group-body{display:none}
.sidebar.collapsed .nav-group-eixo .group-head{position:relative;min-height:var(--h-row);margin:1px 6px;
  border-radius:var(--r-row);border:1px solid transparent;box-sizing:border-box}
.sidebar.collapsed .nav-group-eixo .gh-ico-mini{color:var(--ga)}
.sidebar.collapsed .nav-group-eixo .group-head:hover{background:var(--bg)}
.sidebar.collapsed .nav-group-eixo .group-head.on-path{background:var(--cyan-soft);border-color:var(--acc-bd)}
.sidebar.collapsed .nav-group-eixo:has(.group-body .nav-new-dot) .group-head::after{
  content:'';position:absolute;top:7px;left:calc(50% + 5px);width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 2px var(--bg1);   /* o mesmo ponto azul do .nav-new-dot */
}

/* FORA DE GRUPOS (04/08) — o que o admin tirou dos baldes vive no topo, sem
   cabeçalho, com um hairline a separar. Sem a linha, um item solto lia-se como
   pertencendo ao primeiro grupo desenhado logo abaixo. */
.sb-soltos{padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.sb-soltos:empty{display:none}

/* Ciclo de vida do item: «em teste» e «oculto» levam SEMPRE marca — um item
   escondido com cara de normal é o que faz alguém publicá-lo sem saber. */
.nav-estado{
  flex-shrink:0;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;
  padding:1px 5px;border-radius:6px;border:1px solid var(--line2);
  color:var(--text3);background:var(--bg3);
}
.nav-estado.est-teste{color:var(--gold);background:var(--gold-bg);border-color:var(--gold-bd)}
.nav-estado.est-oculto{color:var(--text3);background:var(--bg4);border-color:var(--line2)}

/* Perfis de menu por grupo (modal) */
.mp-linha{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.mp-linha:first-of-type{border-top:0}
.mp-grupo{flex:0 0 190px;font-size:12.5px;color:var(--text);display:flex;align-items:center;gap:6px}
.mp-n,.mp-todas{font-family:var(--font-mono);font-size:9.5px;padding:1px 5px;border-radius:6px;border:1px solid var(--line2);color:var(--text3)}
.mp-areas{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.mp-area{
  --ga:var(--text3);
  padding:3px 9px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line2);background:var(--bg1);color:var(--text3);
  font-family:var(--font-ui);font-size:11px;transition:background .15s,color .15s,border-color .15s;
}
.mp-area:hover{border-color:var(--ga);color:var(--text2)}
.mp-area.is-on{
  color:var(--ga);border-color:color-mix(in srgb, var(--ga) 42%, var(--bg1));
  background:color-mix(in srgb, var(--ga) 10%, var(--bg1));font-weight:600;
}

/* — badge de modo de abertura nos itens com link — */
.nav-ext{display:flex;align-items:center;color:var(--text3);flex-shrink:0}
.nav-ext.embed{color:var(--green)}
/* 06/10: «abre embebido / em nova janela» é detalhe de quem vai clicar — só ao
   passar o rato. Sempre à vista era um ícone verde em quase todas as linhas. */
.sb-scroll .nav-ext{opacity:0;transition:opacity .12s}
.sb-scroll .nav-item:hover .nav-ext,.sb-scroll .nav-item.active .nav-ext{opacity:1}
/* Definições aberto: os pontos já estão nos itens, o resumo no cabeçalho repetia-os */
.sb-admin .sb-admin-head.expanded > .nav-new-dot{display:none}

/* — faixa de favoritos no topo da sidebar (ordem pessoal) — */
.nav-favstrip{margin:2px 0 6px;padding-bottom:6px;border-bottom:1px dashed var(--line)}
.favstrip-head{
  display:flex;align-items:center;gap:7px;padding:8px 14px 5px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
}
.favstrip-head .fs-count{margin-left:auto;color:var(--text3);letter-spacing:0}
a.nav-item{text-decoration:none}
.fav-strip-item .fs-ord{font-family:var(--font-mono);font-size:9px;color:var(--text3);width:12px;text-align:right;flex-shrink:0}
.fav-strip-item .fs-tools{display:none;margin-left:auto;gap:1px}
.fav-strip-item:hover .fs-tools{display:flex}
.fav-strip-item:hover .nav-ext{display:none}
.fs-tools button{width:18px;height:18px;border-radius:3px;color:var(--text3);display:flex;align-items:center;justify-content:center;font-size:10px}
.fs-tools button:hover{background:var(--cyan-soft);color:var(--cyan)}
.fav-strip-item.is-orphan{opacity:.55}
.fav-strip-item.is-orphan .nav-label{text-decoration:line-through}
.sidebar.collapsed .nav-favstrip,.sidebar.collapsed .viewas-note,.sidebar.collapsed .nav-ext{display:none}

/* — "ver como" (simulação de grupo de utilizadores) — */
.viewas-select{
  padding:3px 6px;background:var(--bg1);border:1px solid var(--gold-bd);border-radius:5px;
  font-size:11px;color:var(--gold);font-family:var(--font-mono);outline:none;max-width:230px;
}
.viewas-note{
  display:flex;align-items:center;gap:7px;margin:6px 6px 4px;padding:6px 10px;
  background:var(--gold-bg);border:1px dashed var(--gold-bd);border-radius:5px;
  font-size:11px;color:var(--gold);
}
.viewas-note b{font-weight:700}
.viewas-note button{margin-left:auto;font-size:10.5px;text-decoration:underline;color:var(--gold)}

/* — página de ligação externa (embed / nova janela) — */
.extv-seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px;gap:2px}
.extv-seg button{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:4px;
  font-size:11.5px;color:var(--text2);transition:.12s;
}
.extv-seg button.is-on{background:var(--bg1);color:var(--text);box-shadow:var(--shadow);font-weight:600}
.extv-frame{background:var(--bg1);border:1px solid var(--line2);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.extv-bar{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;
  background:var(--bg3);border-bottom:1px solid var(--line);
}
.extv-dot{width:8px;height:8px;border-radius:50%;background:var(--line2);flex-shrink:0}
.extv-url{
  display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;height:24px;padding:0 9px;
  background:var(--bg1);border:1px solid var(--line);border-radius:4px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--text2);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.extv-badge{
  flex-shrink:0;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:8px;background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd);
}
.extv-body{padding:16px;min-height:260px}
/* embed real das ligações externas (2026-07-28): o iframe ocupa a altura útil
   da janela; fundo branco para sites externos não ficarem "transparentes" no dark */
.extv-body.is-live{padding:0;min-height:0;height:max(420px, calc(100vh - 300px))}
.extv-iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.extv-note{margin-top:10px;font-size:11.5px;color:var(--text3);font-style:italic}
.extv-window{
  background:var(--bg1);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:44px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.extv-window-icon{
  width:52px;height:52px;border-radius:10px;background:var(--bg3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--text2);
}
.extv-window-icon svg{width:22px;height:22px}
.extv-window h2{font-size:17px;font-weight:700}
.extv-window p{font-size:12.5px;color:var(--text2);max-width:420px;line-height:1.5}
.extv-window .extv-url{flex:none;max-width:min(440px,90%)}

/* — mocks de conteúdo embebido (demonstração) — */
.extv-kan{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.extv-kan-col{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:8px;min-height:170px}
.extv-kan-col h4{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;display:flex;justify-content:space-between}
.extv-card{background:var(--bg1);border:1px solid var(--line);border-radius:5px;padding:8px;margin-bottom:7px}
.extv-card strong{display:block;font-size:11.5px;color:var(--text)}
.extv-card span{display:block;font-size:10.5px;color:var(--text2);margin-top:2px}
.extv-sheet{border:1px solid var(--line);border-radius:6px;overflow:hidden;font-family:var(--font-mono);font-size:10px}
.extv-sheet .r{display:grid;grid-template-columns:30px repeat(5,1fr);border-bottom:1px solid var(--line)}
.extv-sheet .r:last-child{border-bottom:0}
.extv-sheet .c{padding:6px 8px;border-right:1px solid var(--line);color:var(--text2);white-space:nowrap;overflow:hidden}
.extv-sheet .c:last-child{border-right:0}
.extv-sheet .r.h .c{background:var(--bg3);color:var(--text3);font-weight:700;text-align:center}
.extv-sheet .c.n{background:var(--bg3);color:var(--text3);text-align:center}
.extv-sheet .c.hot{background:var(--gold-bg);color:var(--gold);font-weight:700}
.extv-row{
  display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:7px;
  background:var(--bg1);border:1px solid var(--line);border-radius:6px;
}
.extv-row .nav-icon{color:var(--text2)}
.extv-row strong{font-size:12px;color:var(--text)}
.extv-row span.d{display:block;font-size:10.5px;color:var(--text2);margin-top:1px}
.extv-row .pill{margin-left:auto}
.extv-chat{display:flex;flex-direction:column;gap:8px;max-width:520px}
.extv-msg{display:flex;gap:8px;align-items:flex-start}
.extv-msg .av{
  width:24px;height:24px;border-radius:50%;background:var(--bg3);border:1px solid var(--line);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:8px;font-weight:700;color:var(--text2);
}
.extv-msg .bub{background:var(--bg2);border:1px solid var(--line);border-radius:3px 8px 8px 8px;padding:7px 10px;font-size:11.5px;color:var(--text)}
.extv-msg .bub b{display:block;font-size:10px;margin-bottom:2px;color:var(--text2)}
.extv-msg.me{flex-direction:row-reverse}
.extv-msg.me .bub{background:var(--cyan-soft);border-color:var(--acc-bd);border-radius:8px 3px 8px 8px}
.extv-bar-mini{height:6px;background:var(--bg3);border-radius:99px;overflow:hidden;flex:1;max-width:120px}
.extv-bar-mini i{display:block;height:100%;background:var(--green)}

/* ═══════════════════════════════════════════════════════
   SYS MODULES — launcher, module strip, embed, matriz SYSDEF
   ═══════════════════════════════════════════════════════ */

/* botão de grelha (topbar, à esquerda da marca) */
.launcher-btn{color:var(--text2)}
.launcher-btn:hover{background:var(--cyan-soft);color:var(--cyan)}

/* overlay + painel do launcher */
/* assinatura: launcher tipo "Launchpad" — vidro fosco sobre a página */
.launcher-bg{position:fixed;inset:0;background:var(--glass-page);z-index:300;display:none;
  backdrop-filter:blur(36px) saturate(180%);-webkit-backdrop-filter:blur(36px) saturate(180%)}
.launcher-bg.on{display:block}
.launcher{
  position:absolute;top:62px;left:16px;width:580px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 86px);overflow-y:auto;
  background:var(--glass-panel);border:1px solid var(--glass-border);border-radius:22px;
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-lg);padding:16px;
}
.launcher-search{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:0 10px 0 13px;
  min-height:42px;color:var(--text3);transition:border-color .15s,box-shadow .15s;
}
.launcher-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
.launcher-search:focus-within > svg{color:var(--cyan)}
.launcher-search > svg{flex:none;width:16px;height:16px;transition:color .15s}
.launcher-search input{flex:1;min-width:0;height:40px;padding:0;background:none;border:none;outline:none;font-size:14px;color:var(--text)}
.launcher-search input::placeholder{color:var(--text3)}
.launcher-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.launcher-tile{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:14px 8px 12px;border-radius:10px;cursor:pointer;text-align:center;transition:.12s;
}
.launcher-tile:hover{background:var(--bg)}
.lt-icon{
  width:46px;height:46px;border-radius:12px;position:relative;
  border:1.5px solid var(--ma);color:var(--ma);
  background:color-mix(in srgb, var(--ma) 7%, var(--bg1));
  display:flex;align-items:center;justify-content:center;
}
.lt-icon svg{width:20px;height:20px}
.lt-code{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--text)}
.lt-name{font-size:10.5px;color:var(--text3);line-height:1.25}
.launcher-tile.locked{opacity:.45;filter:grayscale(.75);cursor:not-allowed}
.lt-lock{
  position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;border-radius:50%;
  background:var(--bg1);border:1px solid var(--line2);color:var(--text3);
  display:flex;align-items:center;justify-content:center;
}
.lt-lock svg{width:9px;height:9px}

/* sem favoritos não há faixa (06/10): a altura sai também das contas dos
   iframes (.page-iframe-wrap / .module-embed descontam o --h-strip) */
body.sem-faixa{--h-strip:0px}
body.sem-faixa .module-strip{display:none}
body.kiosk #topSplitBtn{display:none}

/* barra de módulos ativos (sob a topbar) */
.module-strip{
  height:var(--h-strip);flex-shrink:0;background:var(--bg1);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:6px;padding:0 var(--pad-topbar-x);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
}
.ms-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);margin-right:6px;flex-shrink:0;white-space:nowrap;
}
.ms-pill{
  display:flex;align-items:center;gap:6px;padding:4px 11px;flex-shrink:0;
  border:1px solid var(--line);border-radius:20px;background:var(--bg);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--text2);
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.ms-pill:hover{border-color:var(--ma);color:var(--text)}
.ms-pill .me-dot{width:6px;height:6px;border-radius:50%;background:var(--ma);flex-shrink:0}
.ms-pill.active{
  background:color-mix(in srgb, var(--ma) 10%, var(--bg1));
  border-color:var(--ma);color:var(--text);font-weight:700;
}

/* módulo embebido (iframe com barra de contexto) */
.module-embed{display:flex;flex-direction:column}
.module-embed-bar{
  height:38px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 16px;
  background:var(--bg1);border-bottom:1px solid var(--line);
}
.module-embed-bar .me-dot{width:8px;height:8px;border-radius:50%;background:var(--ma);flex-shrink:0}
/* o código + o nome vivem no mesmo invólucro porque juntos são A PORTA dos
   passos (.js-cf-porta); o gap de 10px da barra é reposto aqui dentro para o
   desenho ficar exatamente como estava antes do invólucro existir. */
.module-embed-bar .me-title{display:inline-flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}
.me-code{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ma);flex-shrink:0}
.me-name{font-size:12.5px;font-weight:600;color:var(--text);flex-shrink:0}
.module-embed-bar .me-title:hover .me-name{color:var(--cyan)}
/* grupo da direita (foco + seg/link) — empurrado para a direita; fica no canto mesmo sem chips */
.me-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Contadores do SYSCRM (pedido Telmo) — centrados na linha; chips compactos na barra embebida */
.me-carga{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:nowrap;overflow:hidden;min-width:0}
.me-carga:empty{display:none}
.me-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 6px;border:1px solid var(--line);background:var(--bg1);border-radius:999px;cursor:pointer;font:inherit;color:var(--text3);white-space:nowrap}
.me-chip:hover:not([disabled]){border-color:var(--text3);color:var(--text)}
.me-chip .me-chip-n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;font-size:10px;font-weight:800;color:#fff;background:var(--text3)}
.me-chip .me-chip-l{font-size:11px;font-weight:600}
.me-chip.me-chip--c-resp .me-chip-n{background:#0071e3}
.me-chip.me-chip--c-sla  .me-chip-n{background:#d70015}
.me-chip.me-chip--c-agu  .me-chip-n{background:#a85700}
.me-chip.me-chip--c-tar  .me-chip-n{background:#248a3d}
.me-chip.me-chip--c-apr  .me-chip-n{background:#b45309}
.me-chip.is-on{border-color:var(--ma);color:var(--text);box-shadow:inset 0 0 0 1px var(--ma)}
.me-chip.is-zero{opacity:.45;cursor:default}
.me-chip.is-zero .me-chip-n{background:var(--line);color:var(--text3)}
@media (max-width:1180px){.me-chip .me-chip-l{display:none}}
/* Foco — botão ⛶ (só aparece quando o iframe manda crm-carga; desenhado pelo bridge em app.js) */
.me-foco:empty{display:none}
.me-foco{display:inline-flex;align-items:center}
.me-foco .me-foco-btn{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px solid var(--line);background:var(--bg1);border-radius:6px;cursor:pointer;
  color:var(--text3);font-size:14px;line-height:1;transition:.12s;
}
.me-foco .me-foco-btn:hover{border-color:var(--text3);color:var(--text)}
.me-foco .me-foco-btn.is-on{border-color:var(--ma);color:var(--ma);background:color-mix(in srgb, var(--ma) 10%, var(--bg1));box-shadow:inset 0 0 0 1px var(--ma)}
/* «Abrir em janela» / seletor de modo — só ícone (tooltip nativo) */
.me-open{width:28px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.extv-seg--icons button{padding:5px 8px}
.module-embed .page-iframe{flex:1;height:auto;min-height:0}

/* 06/10 — a barra por cima do módulo mais FINA: o caminho da barra de cima já
   diz onde se está; esta fica para o que é só dela (a porta dos passos, os
   contadores, o foco, o «abrir em janela»). Estrutura igual — só medidas. */
.module-embed-bar{height:32px;padding:0 14px;gap:8px}
.module-embed-bar .me-title{gap:7px}
.me-code{font-size:10px;letter-spacing:.05em}
.me-name{font-size:12px}
.module-embed-bar .me-dot{width:7px;height:7px}
.me-open.btn{width:26px;height:24px;border-color:transparent;background:transparent;color:var(--text3)}
.me-open.btn:hover{background:var(--bg);color:var(--text)}

/* blocos de espera enquanto o iframe do módulo carrega (saem com .me-pronto;
   ao fim de 12s saem de qualquer forma — um onload perdido não deixa a forma
   cinzenta por cima de um módulo que até carregou) */
.me-espera{position:absolute;left:0;right:0;top:32px;bottom:0;padding:24px 28px;background:var(--bg);
  display:flex;flex-direction:column;gap:12px;pointer-events:none;z-index:1;
  animation:meEsperaFim .2s ease 12s forwards}
.me-espera i{display:block;height:14px;width:60%;border-radius:7px;
  background:linear-gradient(90deg,var(--bg4,#e8e8ed) 0%,var(--bg3) 50%,var(--bg4,#e8e8ed) 100%);background-size:200% 100%;
  animation:meEsperaBrilho 1.4s ease-in-out infinite}
.me-espera i:nth-child(3){width:45%}
.me-espera i:nth-child(4){width:52%}
.me-espera .me-esp-tit{height:22px;width:28%;margin-bottom:6px}
.me-espera .me-esp-bloco{height:180px;width:100%;border-radius:12px;margin-top:8px}
.module-embed.me-pronto .me-espera{display:none}
@keyframes meEsperaBrilho{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes meEsperaFim{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.me-espera i{animation:none}}
body[data-motion="off"] .me-espera i{animation:none}

/* matriz Módulos × Grupos (página SYSDEF · Definições base) */
.sysdef-matrix{width:100%;border-collapse:collapse;font-size:12px}
.sysdef-matrix th{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;color:var(--text3);
  padding:9px 6px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap;background:var(--bg2);
}
.sysdef-matrix th:first-child{text-align:left;padding-left:16px}
.sysdef-matrix td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center}
.sysdef-matrix td:first-child{text-align:left;padding-left:16px}
.sysdef-matrix tbody tr:hover{background:var(--bg2)}
.sysdef-matrix tbody tr:last-child td{border-bottom:none}
.sd-mod{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sd-mod .me-dot{width:7px;height:7px;border-radius:50%;background:var(--ma)}
.sysdef-matrix input[type=checkbox]{accent-color:var(--cyan);cursor:pointer;width:13px;height:13px}
.sysdef-matrix input[type=checkbox]:disabled{cursor:default;opacity:.55}
.sd-all{background:var(--bg2);border-left:1px solid var(--line);border-right:1px solid var(--line)}

/* SYSHOME → Parâmetros: a linha escolhida da lista de módulos. Por token
   (var(--cyan-soft)/var(--cyan)), como o resto da casa — nunca hex à mão. */
.pm-row-on{background:var(--cyan-soft)}
.pm-row-on td:first-child{box-shadow:inset 2px 0 0 var(--cyan)}
.pm-row-on:hover{background:var(--cyan-soft)}

/* módulo embebido injeta-se direto no #content (sem .page) — sem margens negativas */
.module-embed{margin:0;height:calc(100vh - var(--h-topbar) - var(--h-strip))}
body.admin-on .module-embed{height:calc(100vh - var(--h-topbar) - var(--h-strip) - 36px)}

/* ═══════════════════════════════════════════════════════
   CHROME UNIFICADO — sidebar ajustável/fixável
   ═══════════════════════════════════════════════════════ */

/* sidebar esquerda — pin + resize */
.sb-collapse.on{background:var(--cyan-soft);color:var(--cyan)}
.sb-resize{
  position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:10;
}
.sb-resize:hover{background:linear-gradient(to right,transparent,var(--acc-bd))}
.sidebar.collapsed .sb-resize{display:none}
.sidebar.collapsed #sbPin,.sidebar.collapsed #sbCollapseAll{display:none}

/* ciclo de vida dos módulos — badges no launcher + seletor na matriz SYSDEF */
.lt-flag{
  font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.08em;
  padding:2px 6px;border-radius:4px;margin-top:2px;
}
.lt-flag.teste{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-bd)}
.lt-flag.oculto{background:var(--red-bg);color:var(--red);border:1px dashed var(--red-bd)}
.launcher-tile.is-oculto .lt-icon{border-style:dashed;opacity:.75}
.launcher-tile.is-teste .lt-icon{box-shadow:0 0 0 3px var(--gold-bg)}

/* LANÇADOR (06/10): agrupado por ÁREA, com o NOME à frente e o código por
   baixo; mais largo (as colunas acompanham a largura) e o «em teste» num sinal
   ao canto em vez de uma pastilha a ocupar linha em metade dos tiles. */
.launcher{width:min(760px, calc(100vw - 32px))}
.launcher-grid{grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));gap:2px 4px}
.lt-grupo{grid-column:1 / -1;display:flex;align-items:center;gap:7px;padding:14px 6px 6px;
  font-size:11.5px;font-weight:650;color:var(--text2);border-top:1px solid var(--line)}
.lt-grupo:first-child{border-top:0;padding-top:2px}
.lt-grupo-ico{display:inline-flex;color:var(--ga, var(--text3))}
.lt-grupo-ico svg{width:14px;height:14px}
.lt-grupo-n{font-size:10.5px;font-weight:500;color:var(--text3);font-variant-numeric:tabular-nums}
.launcher-tile{gap:5px;padding:12px 6px 10px}
.lt-name{order:2;font-size:12px;font-weight:600;color:var(--text);line-height:1.25}
.lt-code{order:3;font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--text3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.launcher-tile{min-width:0}   /* códigos longos (SYSCLIENTLIVE) não alargam a coluna */
.lt-flag{position:absolute;top:6px;left:6px;margin:0;font-size:7.5px;padding:1px 4px;opacity:.9}
.sd-status-sel{
  font-family:var(--font-mono);font-size:10px;padding:3px 6px;border-radius:5px;
  border:1px solid var(--line);background:var(--bg1);color:var(--text2);cursor:pointer;
}
.sd-status-sel.ativo{border-color:var(--green-bd);color:var(--green);background:var(--green-bg)}
.sd-status-sel.teste{border-color:var(--gold-bd);color:var(--gold);background:var(--gold-bg)}
.sd-status-sel.oculto{border-color:var(--red-bd);color:var(--red);background:var(--red-bg)}
.sd-status-sel:disabled{cursor:default;opacity:.7}
.sysdef-matrix tr.sd-row-oculto td{opacity:.75}
/* Grupos marcados num módulo que ainda NÃO está «Disponível»: a marca guarda-se,
   mas não tem efeito (moduleNodeVisible barra antes de chegar ao grupo). Mostra-se
   esbatida e com risco para não parecer que já está a dar acesso — foi por isto que
   o Telmo marcou o grupo Gestão em vários módulos e nada apareceu (2026-07-27). */
.sysdef-matrix td.sd-grp-inerte{position:relative}
.sysdef-matrix td.sd-grp-inerte input{opacity:.45}
.sysdef-matrix td.sd-grp-inerte input:checked{opacity:.55}
.sysdef-matrix td.sd-grp-inerte input:checked::after{
  content:'';position:absolute;left:50%;top:50%;width:20px;height:1.5px;
  background:var(--text3);transform:translate(-50%,-50%) rotate(-20deg);pointer-events:none}

/* favoritos da sidebar — colapsar/expandir */
.favstrip-head{cursor:pointer;user-select:none}
.favstrip-head .fs-chev{display:inline-flex;margin-right:5px;color:var(--text3);transition:transform .15s;transform:rotate(90deg)}
.nav-favstrip.collapsed .favstrip-head .fs-chev{transform:rotate(0deg)}
.nav-favstrip.collapsed{padding-bottom:2px}

/* menu esquerdo NÃO fixo: oculta-se (só ícones) e expande por aproximação do rato,
   em overlay sobre o conteúdo; ao navegar volta a ocultar. Fixo: nunca oculta. */
.layout{position:relative}
body.sb-auto .sidebar{position:absolute;left:0;top:0;bottom:0;z-index:60;width:var(--w-rail-min)}
body.sb-auto .content{margin-left:var(--w-rail-min)}
body.sb-auto .sidebar.peek{width:var(--sbw,var(--w-rail));box-shadow:var(--shadow-lg);border-right:1px solid var(--line2)}

/* ═══════════════════════════════════════════════════════
   SYSHELP-INDEX — ajuda transversal (FAB, drawer, novo, media)
   ═══════════════════════════════════════════════════════ */

/* ponto "novo" no menu — desaparece quando o utilizador entra na página.
   AZUL e quieto desde 06/10 (era vermelho a pulsar): o vermelho é «precisa de
   ti AGORA» (as bolinhas do topo) e havia ponto em quase todas as áreas — a cor
   do alarme deixava de dizer alguma coisa. Azul = por ler, como o ponto das
   notificações; dourado com número continua a ser o AGIR (.nav-agir). */
.nav-new-dot{
  width:7px;height:7px;border-radius:50%;background:var(--cyan);flex-shrink:0;
  margin-left:5px;box-shadow:0 0 0 2px var(--bg1);
}
@keyframes newPulse{0%,100%{opacity:1}50%{opacity:.45}}
/* recolhido: o ponto nasce no CANTO do ícone (meio da linha + 5px), como as
   bolinhas do topo (01/10) — ancorado à direita da linha caía em cima do ícone */
.sidebar.collapsed .nav-new-dot{position:absolute;top:7px;left:calc(50% + 5px);right:auto;margin:0}
/* marca AGIR no menu — trabalho À ESPERA de alguém (Convenção UI F6, 04/08).
   É o par do `.nav-new-dot` e NÃO o mesmo: o ponto diz «há coisa nova para LER»
   e este diz «há N à tua espera». Por isso são duas formas diferentes (ponto sem
   número · pastilha COM número) e nunca se somam num total — «3 por ler» + «2 à
   tua espera» não é «5». Cor de estado, nunca hex à mão; o dígito vem do token
   de contraste (branco fixo falha nos temas claros). */
.nav-agir{
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;margin-left:5px;flex-shrink:0;
  background:var(--gold);color:var(--on-estado,#fff);
  font-family:var(--font-mono);font-size:10px;font-weight:700;line-height:16px;text-align:center;
}
.sidebar.collapsed .nav-agir{position:absolute;top:4px;left:calc(50% + 4px);right:auto;margin:0}
/* bolinha de "não visto" no canto do tile do launcher (mesmo ponto .nav-new-dot) */
.lt-newdot{position:absolute;top:7px;right:7px;margin:0;width:8px;height:8px}

/* botão flutuante de ajuda (todas as páginas) */
/* 06/10: mais calmo — 36px, branco com o «?» azul, e azul cheio só ao passar o
   rato. O círculo azul cheio era a peça mais forte de todos os ecrãs, sempre
   por cima do conteúdo. Com novidades por ler continua DOURADO e com o número
   (.has-new), porque aí tem mesmo de chamar. O telemóvel tem regras próprias. */
.help-fab{
  position:fixed;bottom:20px;right:18px;width:36px;height:36px;border-radius:50%;z-index:250;
  background:var(--bg1);color:var(--cyan);border:1px solid var(--line);
  font-family:var(--font-display);font-size:16px;font-weight:800;
  box-shadow:var(--shadow-md);transition:.15s;display:flex;align-items:center;justify-content:center;
}
.help-fab:hover{transform:scale(1.08);background:var(--cyan);color:var(--on-accent,#fff);border-color:var(--cyan)}
.help-fab.has-new{background:var(--gold);color:var(--on-estado,#fff);border-color:var(--gold)}
/* indicador de novidade no ? da própria página — leva o NÚMERO do que está
   por ler aqui (a contagem é a mesma do drawer). Um dígito cabe no ponto
   redondo; a partir de 2 dígitos vira pastilha e alarga sozinho. */
.help-fab-dot{
  position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:9px;
  background:var(--red);border:2.5px solid var(--bg1);animation:newPulse 1.6s infinite;
  align-items:center;justify-content:center;padding:0 1px;box-sizing:border-box;
  color:var(--on-estado,#fff);font-family:var(--font-display);font-size:10px;font-weight:800;line-height:1;
  letter-spacing:0;font-variant-numeric:tabular-nums;
}
.help-fab-dot.help-fab-count{padding:0 4px;border-radius:9px}
body.rp-pinned .help-fab{right:418px}
/* barra direita aberta (mesmo não fixa): afasta o botão de ajuda para não tapar o Enviar do chat */
body:not(.modo-extensao).rp-open .help-fab{right:418px}
/* ...e o chat deixou de ter uma largura só. Esta regra foi escrita quando o
   painel media sempre 400px; com os degraus de largura (17/09) o botão ficava
   DENTRO do painel, em cima da caixa de escrever — exatamente o que a linha
   de cima existe para evitar. Cada degrau afasta-o na sua medida.
   Na «inteira» o painel é o ecrã todo e não há para onde o afastar: aí o ?
   sai, porque nessa largura a página que ele ajudaria já não está à vista. */
/* As duas larguras do meio saíram a 17/09 e com elas estas duas regras: o
   chat tem hoje dois estados, e em nenhum deles o ? precisa de degrau próprio
   — no lateral a regra de cima (418px) já o afasta, e no ecrã inteiro não há
   para onde o afastar. */
body:not(.modo-extensao).rp-open.chat-w-inteira .help-fab{ display:none; }

/* ── NOVO no LOCAL da página (assets/nov-locais*.js) ──
   A marca vive numa camada por cima da página e NUNCA dentro dela: um <span>
   injetado numa célula ou num flex mudava o layout da página que se está a
   anunciar. A camada não apanha o rato (só as pastilhas apanham), por isso
   trabalhar com uma marca no ecrã é igual a não a ter. */
.nov-camada{position:fixed;inset:0;z-index:240;pointer-events:none}
.nov-anel{
  position:fixed;border:1.5px solid var(--red);border-radius:8px;
  box-shadow:0 0 0 3px var(--red-bg);pointer-events:none;
}
.nov-marca{
  position:fixed;pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;
  height:15px;padding:0 5px;border-radius:8px;background:var(--red);color:var(--on-estado,#fff);
  border:1.5px solid var(--bg1);box-shadow:var(--shadow);
  font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
  animation:newPulse 2s ease-in-out infinite;
}
.nov-marca:hover{animation:none;background:var(--red);transform:scale(1.08)}
/* escolher no ecrã: anel a seguir o rato + o caminho do local em texto */
body.nov-a-escolher{cursor:crosshair}
body.nov-a-escolher .nov-camada{z-index:330}
.nov-anel-escolha{border-style:dashed;border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
/* «anotado aqui» (03/08): o técnico saltou do SYSTEC para a página anotada e
   tem de ver ONDE é. Fica AZUL e não vermelho de propósito — o vermelho é o
   «NOVO» das novidades e diz «lê isto»; este diz «é aqui», é de passagem, e
   apaga-se sozinho. Duas cores para duas coisas diferentes na mesma camada. */
.nov-anel-apontado{border-color:var(--accent,#0071e3);box-shadow:0 0 0 3px var(--ring)}
.nov-marca-apontada{
  background:var(--accent,#0071e3);color:var(--on-accent,#fff);
  animation:none;text-transform:none;letter-spacing:.02em;font-size:9px;
}
.nov-marca-apontada:hover{background:var(--accent,#0071e3);transform:none;cursor:default}
.nov-etiqueta{
  position:fixed;max-width:260px;padding:3px 7px;border-radius:6px;
  background:var(--bg1);border:1px solid var(--line2);box-shadow:var(--shadow-md);
  font-family:var(--font-mono);font-size:10px;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
/* drawer de ajuda */
.help-drawer-bg{position:fixed;inset:0;background:var(--dim);z-index:320;display:none;
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
.help-drawer-bg.on{display:block}
.help-drawer{
  position:absolute;top:0;right:0;bottom:0;width:600px;max-width:calc(100vw - 40px);
  background:var(--bg1);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;animation:hdIn .2s ease-out;
}
@keyframes hdIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.hd-head{display:flex;align-items:flex-start;gap:10px;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
/* `min-width:0` no bloco do texto e `flex:none` no ✕: é o par que faz a
   PESQUISA encolher sem NUNCA empurrar o botão de fechar para fora do
   cabeçalho (medido a 375px — a gaveta fica com 335px e sobram 275 para
   título + campo + ✕). Sem o min-width, um h2 comprido não deixa o irmão
   encolher e o flex transborda em silêncio. */
.hd-head-txt{flex:2 1 120px;min-width:0}
.hd-head > .modal-close{flex:none}
.hd-eyebrow{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.hd-head h2{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.3px;margin-top:3px}

/* ─── PESQUISA no cabeçalho da gaveta `?` (F5, Telmo 04/08) ─────────────────
   Colada ao ✕, e é o cabeçalho que a torna persistente: o corpo da gaveta é
   reescrito a cada troca de tab, este bloco não. Encolhe em ecrã estreito
   (`flex:1 1 150px` + `min-width`) e nunca rouba o lugar do ✕. */
.hd-busca{
  flex:1 1 150px;min-width:96px;max-width:220px;margin-top:2px;
  display:flex;align-items:center;gap:5px;padding:0 7px;box-sizing:border-box;
  background:var(--bg1);border:1px solid var(--line);border-radius:7px;
  transition:border-color .12s,box-shadow .12s;
}
.hd-busca:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
.hd-busca-ico{flex:none;display:flex;color:var(--text3)}
.hd-busca-inp{
  flex:1;min-width:0;padding:6px 0;background:none;border:0;outline:none;
  font-family:var(--font-ui);font-size:12px;color:var(--text);
}
.hd-busca-inp::placeholder{color:var(--text3)}
/* o contador: «3 de 12» numa lista, «2/5» num texto, «0 aqui · 2 em Políticas»
   quando aqui não há — tabular para não dançar a cada tecla */
.hd-busca-n{
  flex:none;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono);font-size:9.5px;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.hd-busca-n.vazio{color:var(--gold)}
.hd-busca-setas{flex:none;display:flex;gap:1px}
.hd-busca-setas button{
  width:16px;height:18px;border-radius:4px;color:var(--text3);
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
}
.hd-busca-setas button:hover{background:var(--bg3);color:var(--text)}
/* a OCORRÊNCIA realçada. `mark` traz amarelo do browser — daí o background
   explícito, por token, que serve claro, escuro e as 4 skins (REGRAS §6).
   A ocorrência onde as setas ‹ › estão veste o acento, e o par
   --cyan/--on-accent é o único que a casa garante em contraste. */
mark.hd-hit{
  background:var(--gold-bg);color:inherit;border-radius:3px;padding:0 1px;
  box-shadow:inset 0 0 0 1px var(--gold-bd);
}
mark.hd-hit.hd-hit-atual{background:var(--cyan);color:var(--on-accent,#fff);box-shadow:none}
/* texto de CHROME dos painéis (o «sem notas», o «sem entradas do índice»): fica
   fora do .hd-p de propósito — o realce não escreve aqui, senão o contador
   mostrava ocorrências que não são do conteúdo que se filtrou. */
.hd-nada{font-size:12.5px;color:var(--text3);line-height:1.6}
.hd-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--bg2);flex-shrink:0}
.hd-tab{flex:1;padding:10px 8px;font-size:12px;font-weight:600;color:var(--text2);border-bottom:2px solid transparent;transition:.15s}
.hd-tab:hover{color:var(--text);background:var(--bg3)}
.hd-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);background:var(--bg1)}
/* nº por ler na tab «Novidades» (que é a primeira). É a MESMA contagem do ? da
   página — quem a lê é o novidades-core. Vai num span próprio para o rótulo
   continuar a ser um nó de texto inteiro (é assim que o SysI18N o traduz). */
.hd-tab-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:15px;height:15px;margin-left:5px;padding:0 4px;border-radius:8px;
  background:var(--red);color:var(--on-estado,#fff);box-sizing:border-box;
  font-family:var(--font-display);font-size:9.5px;font-weight:800;line-height:1;
  letter-spacing:0;font-variant-numeric:tabular-nums;vertical-align:1px;
}
.hd-body{flex:1;overflow-y:auto;padding:18px 20px}
.hd-foot{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:var(--bg2);flex-shrink:0}
.hd-meta{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10.5px;color:var(--text3);margin-bottom:10px}
.hd-art-title{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:10px;letter-spacing:-.2px}
.hd-p{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:9px}
.hd-p.mono-p{font-family:var(--font-mono);font-size:11.5px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.hd-sec{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin:16px 0 8px;padding-top:12px;border-top:1px dashed var(--line)}
.hd-pending{background:var(--gold-bg);border:1px solid var(--gold-bd);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* media: prints / vídeos / animações */
.hd-media{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.hm-frame{
  height:110px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;
}
.hm-cap{font-size:11px;color:var(--text3);margin-top:5px;line-height:1.4}
.hm-img{width:100%;border-radius:8px;border:1px solid var(--line)}
.hm-kind{position:absolute;top:6px;left:8px;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.1em;color:var(--text3)}
.hm-video{background:#1d1d1f}
.hm-play{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:#1d1d1f;display:flex;align-items:center;justify-content:center;font-size:14px;padding-left:3px}
.hm-anim{background:linear-gradient(120deg,var(--cyan-soft),var(--purple-bg),var(--green-bg));background-size:200% 200%;animation:hmAnim 3s ease infinite}
@keyframes hmAnim{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hm-anim-bar{width:8px;border-radius:3px;background:var(--cyan);opacity:.75;animation:hmBar 1.2s ease-in-out infinite}
.hm-anim-bar:nth-child(1){height:34px}
.hm-anim-bar:nth-child(2){height:52px;animation-delay:.2s}
.hm-anim-bar:nth-child(3){height:26px;animation-delay:.4s}
@keyframes hmBar{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1.15)}}

/* DESENHO inline (media com `svg`) — substitui a caixa «🖼️ PRINT». Ocupa a
   largura toda do painel (um fluxo cortado a meio não se lê) e por isso sai da
   grelha de duas colunas do .hd-media. As cores vêm por currentColor e pelos
   tokens: o mesmo desenho serve claro e escuro e as quatro skins. */
.hd-media .hm-svg{grid-column:1/-1}
.hm-desenho{border:1px solid var(--line);border-radius:8px;background:var(--bg2);padding:12px;color:var(--text2)}
.hm-desenho svg{display:block;width:100%;height:auto}

/* «O NOME É A PORTA» (Telmo 01/08) — o nome da página/módulo abre os passos.
   Substituiu o ícone do canto superior direito (`.cf-solto`, saiu): a tab já
   existia na gaveta e o canto já levava favorito, dashboard e «abrir externo».

   Sem caixa, sem ícone e sem mudar a cor em repouso: o nome tem de continuar a
   ler-se como um título. O que anuncia o gesto é o cursor, o sublinhado ao
   passar e — para quem anda de teclado — o anel de foco, que aqui não pode ser
   `outline:none` nenhum (é a única pista que essa pessoa tem). */
.js-cf-porta{cursor:pointer}
.js-cf-porta:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--text3)}
.js-cf-porta:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
h1.page-title.js-cf-porta:hover{color:var(--cyan)}

/* «COMO FUNCIONA» — os passos 1 · 2 · 3 */
.hd-fluxo{margin:0 0 14px}
.hd-cf-lead{font-size:12.5px;color:var(--text2);line-height:1.6;margin-bottom:12px}
.hd-passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hd-passo{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
/* o número é a âncora da leitura: fixo, tabular e sempre do mesmo tamanho, para
   a coluna dos textos alinhar do 1 ao 9 (e ao 10) sem saltar */
.hd-passo-n{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--cyan);color:var(--on-accent,#fff);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.hd-passo-txt{flex:1;min-width:0}
.hd-passo-t{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:650;color:var(--text);line-height:1.35}
.hd-passo-ico{flex:none;display:flex;color:var(--cyan)}
.hd-passo-f{font-size:12px;color:var(--text2);line-height:1.6;margin-top:4px}
.hd-passo-l{display:flex;gap:7px;align-items:baseline;margin-top:5px;font-size:11.5px;line-height:1.5}
/* rótulo em nó de texto INTEIRO (o SysI18N casa assim) e legível em dark: o
   --text3 do Quiet Light não passa AA em corpo pequeno, por isso vai --text2 */
.hd-passo-rot{
  flex:none;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text2);background:var(--bg3);border:1px solid var(--line);border-radius:4px;padding:2px 5px;
}
.hd-passo-val{color:var(--text2);min-width:0}

/* políticas / novidades no drawer */
.hd-pol{padding:8px 10px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px;cursor:pointer;font-size:12px;color:var(--text2);transition:.12s}
.hd-pol:hover{border-color:var(--acc-bd);background:var(--cyan-soft)}
.hd-pol.big{padding:11px 13px}
.hd-pol-t{font-weight:600;color:var(--text);margin-top:5px;font-size:12.5px}
.hd-pol-b{font-size:11.5px;color:var(--text3);margin-top:3px;line-height:1.5}
.hd-news{padding:11px 13px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--bg2)}
/* novidade destacada: cheguei aqui pela marca «NOVO» do local, e é esta que a
   marca estava a anunciar (duas classes = ganha ao .hd-news, em qualquer ordem) */
.hd-news.hd-news-destaque{border-color:var(--red-bd);background:var(--red-bg)}
.hd-news-meta{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-top:4px}
/* COLAPSO dos textos da gaveta (Telmo, 05/08): fechado = só o cabeçalho.
   O corpo fica no DOM (o realce da pesquisa e o «ouvir» trabalham sobre ele)
   e esconde-se por CLASSE; a setinha diz o estado e roda ao abrir. O gesto é
   o cabeçalho — cursor + anel de foco, porque também se chega por Tab. */
.hd-news-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:13px;cursor:pointer;border-radius:6px}
.hd-news-head:focus-visible,.hd-art-title:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.hd-news-head:hover .hd-news-chev,.hd-art-title:hover .hd-news-chev{color:var(--cyan)}
.hd-news-head strong{flex:1;min-width:0}
.hd-news-data{font-family:var(--font-mono);font-size:10px;color:var(--text3);flex:none}
.hd-news-chev{display:inline-flex;color:var(--text3);flex:none;transition:transform .12s}
.hd-news:not(.hd-news-fech) .hd-news-chev,.hd-art-title:not(.hd-art-fech) .hd-news-chev{transform:rotate(90deg)}
.hd-news-fech .hd-news-head{margin-bottom:0}
.hd-news-fech .hd-news-corpo{display:none}
.hd-art-title{display:flex;align-items:center;gap:8px;cursor:pointer}
.hd-art-corpo.hd-fech{display:none}
.hd-news-ir{font:inherit;color:var(--cyan);padding:0;text-decoration:underline;text-underline-offset:2px}
.hd-news-ir:hover{color:var(--cyan2)}
.hd-news-bloq{text-decoration:line-through;text-decoration-thickness:1px;color:var(--text3);cursor:help}

/* técnico */
.hd-tech-note{font-family:var(--font-mono);font-size:10.5px;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-bd);border-radius:6px;padding:7px 10px;margin-bottom:6px}
.hd-git,.hd-git-link{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px;text-decoration:none;color:var(--text);font-size:12px;transition:.12s}
.hd-git:hover,.hd-git-link:hover{border-color:var(--acc-bd);background:var(--cyan-soft)}
.hd-git-path{font-family:var(--font-mono);font-size:11px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}
.hd-git-desc{font-size:11.5px;color:var(--text3)}
.hd-git-link{font-family:var(--font-mono);font-size:11px;color:var(--cyan);margin-top:8px}

/* Notas Técnicas de Entrega na tab Técnico (SYSTEC, 02/08): as entregas que
   tocaram esta página. A barra do lado é --gold quando ficou coisa por fazer —
   os tokens de estado, nunca hex, senão o cartão vinha errado nas outras skins
   e no tema escuro. */
.hd-nt{border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:7px;padding:9px 11px;margin-bottom:6px}
.hd-nt.tem-pend{border-left-color:var(--gold)}
.hd-nt-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.hd-nt-data{font-size:11px;color:var(--text3);font-family:var(--font-mono)}
.hd-nt-ver{font-family:var(--font-mono);font-size:10.5px;color:var(--text3)}
.hd-nt-pend{font-size:10.5px;font-weight:700;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-bd);border-radius:999px;padding:1px 8px}
.hd-nt-tit{font-size:12.5px;font-weight:600;line-height:1.35}
.hd-nt-det{font-size:11.5px;color:var(--text3);margin-top:3px}
.hd-nt-ir{margin:2px 0 10px}

/* ── pesquisa global: dropdown de sugestões (typeahead) ── */
.search{position:relative}
.search-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:360px;
  background:var(--glass-menu);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 12px 32px rgba(0,0,0,.12);max-height:60vh;overflow-y:auto;display:none;z-index:300}
.search-drop.on{display:block}
.sd-group{padding:4px 0;border-bottom:1px solid var(--line)}
.sd-group:last-of-type{border-bottom:none}
.sd-group-label{padding:6px 12px 2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--text3);text-transform:uppercase}
.sd-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:12.5px;color:var(--text)}
.sd-item:hover,.sd-item.sel{background:var(--bg2)}
.sd-item .sd-path{margin-left:auto;font-size:10.5px;color:var(--text3);white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.sd-empty{padding:14px 12px;font-size:12px;color:var(--text3)}
.sd-create{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px dashed var(--line);cursor:pointer;color:var(--cyan);font-size:12.5px}
.sd-create:hover,.sd-create.sel{background:var(--bg2)}

/* ── ⚙ Administração — rodapé fixo da sidebar (módulo base) ── */
.sb-admin{border-top:1px solid var(--line);padding:6px 8px;flex-shrink:0}
.sb-admin .sb-admin-head{font-weight:600}
.sb-admin .sb-admin-head .nav-chevron{transition:transform .15s}
.sb-admin .sb-admin-head.expanded .nav-chevron{transform:rotate(90deg)}
.sb-admin .sb-admin-children{max-height:40vh;overflow-y:auto;margin-top:2px}
/* P4: o SYSTEC de um N1 (Administrador do cliente) entra só para VER se está
   tudo verde. O item fica mais leve para se ler como «leitura» e não como uma
   casa a meio de carregar — o `title` diz o resto. Por token, sem hex à mão:
   assim segue os cinco skins e os dois temas sem uma linha por cada. */
.sb-admin .sb-admin-head.sb-systec-status .nav-label{font-weight:500;color:var(--text2,inherit)}
.sb-admin .sb-admin-head.sb-systec-status .nav-icon{opacity:.72}

/* ── breadcrumbs: desdobramento por nível ── */
.crumbs .c-grp{cursor:pointer}
.crumbs .c-grp:hover{color:var(--cyan)}
.c-drop-btn{border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:9px;padding:2px 3px;margin-left:0;border-radius:4px;line-height:1;
  opacity:0;transition:opacity .12s}
.c-item:hover .c-drop-btn,.c-drop-btn:focus-visible{opacity:1}
.c-drop-btn:hover{background:var(--bg2);color:var(--cyan)}
.crumb-drop{position:fixed;min-width:230px;max-width:320px;max-height:60vh;overflow-y:auto;background:var(--glass-menu);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.12);z-index:400;padding:4px 0}
.crumb-drop .cd-item{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12.5px;cursor:pointer;color:var(--text)}
.crumb-drop .cd-item:hover{background:var(--bg2)}
.crumb-drop .cd-item.on .cd-label{font-weight:700}
.crumb-drop .cd-check{margin-left:auto;color:var(--green);font-size:11px}
.crumb-drop .cd-chev{margin-left:auto;color:var(--text3)}
.crumb-drop .cd-empty{padding:10px 12px;font-size:12px;color:var(--text3)}
.crumb-drop .cd-sep{height:1px;background:var(--line);margin:4px 0}
.crumb-drop .cd-item .cd-more{margin-left:auto;color:var(--text3);padding:0 6px;border-radius:4px;visibility:hidden}
.crumb-drop .cd-item:hover .cd-more{visibility:visible}
.crumb-drop .cd-item .cd-more:hover{background:var(--bg2);color:var(--text)}

/* ── caminho ativo: negrito só no que estás a trabalhar ── */
.nav-item.active .nav-label{font-weight:700}
.nav-item.on-path>.nav-label{font-weight:600;color:var(--text)}
.group-head.on-path .group-title{font-weight:700;color:var(--text)}

/* ── menu do utilizador: secções extra + sessão terminada ── */
.status-menu-user{padding:10px 14px 6px;font-weight:700;font-size:12.5px;color:var(--text);border-bottom:1px solid var(--line)}
.status-menu-sep{height:1px;background:var(--line);margin:4px 0}
.status-menu .sm-danger{color:var(--red)}
/* ── A MINHA FOTO: o cabeçalho do menu (Fotos, 24/09) ──
   Pedido do Diogo: «a foto do utilizador devia ficar em cima da parte do
   estado». A cara, o nome, o grupo e a bola do estado (a mesma da pílula);
   carregar na foto abre o enquadramento (assets/foto-propria.js). */
.sm-perfil{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 12px;
  padding:10px 8px 12px;margin:0 0 4px;border-bottom:1px solid var(--line)}
.sm-perfil [hidden]{display:none}
.status-menu .sm-foto{position:relative;display:block;width:52px;height:52px;padding:0;border-radius:50%;
  background:none;cursor:pointer;flex:none}
.status-menu .sm-foto:hover{background:none}
.status-menu .sm-foto:disabled{cursor:default}
.sm-foto-av{width:52px;height:52px;font-size:17px;letter-spacing:.02em}
#userPillAvatar,.sm-foto-av{position:relative;overflow:hidden}
.avatar > img.avatar-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;opacity:0;transition:opacity .2s ease}
.avatar.tem-foto > img.avatar-foto{opacity:1}
.sm-foto-cam{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.46);color:#fff;opacity:0;transition:opacity .15s ease}
.status-menu .sm-foto:hover .sm-foto-cam,.status-menu .sm-foto:focus-visible .sm-foto-cam{opacity:1}
.status-menu .sm-foto:disabled .sm-foto-cam{display:none}
.status-menu .sm-foto .status-dot{position:absolute;right:1px;bottom:1px;width:14px;height:14px;
  border:2.5px solid var(--bg1)}
.sm-perfil-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.sm-perfil-nome{font-weight:700;font-size:13.5px;line-height:1.25;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-perfil .status-menu-user{padding:0;border:0;font-weight:500;font-size:11.5px;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-perfil .status-menu-presence{padding:0;font-size:10.5px;color:var(--text3)}
.sm-foto-acoes{grid-column:1 / -1;display:flex;gap:6px}
.status-menu .sm-foto-acao{flex:1 1 auto;justify-content:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:var(--cyan-soft);color:var(--cyan);font-size:11.5px;font-weight:600}
.status-menu .sm-foto-acao:hover{background:var(--acc-bd)}
.status-menu .sm-foto-tirar{flex:0 0 auto;background:var(--bg3);color:var(--text2)}
.status-menu .sm-foto-tirar:hover{background:var(--bg3);color:var(--red)}
.status-menu .sm-foto-tirar.is-confirmar{background:var(--red);color:var(--on-estado)}
body[data-input="touch"] .status-menu .sm-foto{padding:0}
body[data-input="touch"] .status-menu .sm-foto-acao{padding:9px 12px;font-size:12.5px}
@media (prefers-reduced-motion:reduce){.avatar > img.avatar-foto,.sm-foto-cam{transition:none}}
.session-end{position:fixed;inset:0;background:var(--bg2,#f7f8fa);display:none;align-items:center;justify-content:center;z-index:1000}
.session-end.on{display:flex}
.session-end-card{background:var(--bg1,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 56px rgba(0,0,0,.14);padding:34px 40px;text-align:center;max-width:380px}
.session-end-card h2{margin:10px 0 6px;font-size:20px}
.session-end-card p{font-size:12.5px;color:var(--text2);line-height:1.6;margin-bottom:16px}

/* ── modo de edição: flag no menu + badge no utilizador ── */
.status-menu #smEditMode{display:flex;align-items:center;gap:8px}
.status-menu .sm-flag{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--text3);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.status-menu .sm-flag.on{color:var(--gold);border-color:var(--gold)}
.user-pill .edit-badge{font-size:8.5px;font-weight:800;letter-spacing:.08em;color:var(--gold);border:1px solid var(--gold);border-radius:5px;padding:1px 4px;margin-left:6px}

/* ── SPLIT (Fase B1): painel lateral + área principal ── */
.split-panel{position:relative;width:var(--spw,25%);min-width:0;flex-shrink:0;display:flex;flex-direction:column;
  border-right:1px solid var(--line);background:var(--bg1,#fff);order:1}
.content{order:2}
.split-panel.split-right{order:3;border-right:none;border-left:1px solid var(--line)}
.split-panel.split-oculto{width:26px;align-items:center;justify-content:center}
.split-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:12px}
.split-bar button{border:none;background:transparent;cursor:pointer;color:var(--text2);border-radius:5px;padding:2px 6px}
.split-bar button:hover{background:var(--bg2);color:var(--text)}
.split-frame{flex:1;width:100%;border:none}
.split-resize{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:5}
.split-panel.split-right .split-resize{right:auto;left:-3px}
.split-reveal{border:1px solid var(--line);background:var(--bg1,#fff);border-radius:6px;padding:10px 4px;cursor:pointer;color:var(--text2)}
.split-reveal:hover{color:var(--text);background:var(--bg2)}

/* ── faixa do topo (só favoritos) ── */
.ms-empty{font-size:11px;color:var(--text3);align-self:center}
.ms-spring{flex:1}

/* ── explorador de pastas de rede (openMode netbrowse) ── */
.nb-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 2px 12px;font-size:13px}
.nb-bar .nb-crumb{cursor:pointer;color:var(--cyan);padding:2px 6px;border-radius:6px}
.nb-bar .nb-crumb:hover{background:var(--bg2)}
.nb-bar .nb-sep{color:var(--text3)}
.nb-bar .nb-spring{flex:1}
.nb-list{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg1,#fff)}
.nb-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
.nb-item:last-child{border-bottom:none}
.nb-item:hover{background:var(--bg2)}
.nb-item .nb-ic{width:20px;text-align:center;flex-shrink:0}
.nb-item .nb-nome{flex:1;font-size:13px;color:var(--text)}
.nb-item .nb-meta{font-size:11px;color:var(--text3);font-family:var(--font-mono)}
.nb-item.nb-up .nb-nome{color:var(--text2)}
.nb-item.nb-dir .nb-nome{font-weight:600}
.nb-aviso{font-size:12px;color:var(--amber);margin-bottom:8px}

/* fixes pós-review B1-3: sidebar auto-recolhida não tapa o painel esquerdo; picker com estilo */
body.sb-auto .split-panel:not(.split-right){margin-left:var(--w-rail-min)}
#splitPickerList .cd-item{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12.5px;cursor:pointer;color:var(--text);border-radius:7px}
#splitPickerList .cd-item:hover{background:var(--bg2)}

/* ── preferências: tabs dos perfis ── */
.prefs-tabs{display:flex;gap:6px;margin-bottom:14px}
.prefs-tabs button{flex:1;border:1px solid var(--line);background:var(--bg1,#fff);border-radius:8px;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text2)}
.prefs-tabs button.on{border-color:var(--cyan);color:var(--text)}
#prefsBaseList .cd-item{border:1px solid var(--line);border-radius:7px;margin-top:4px}

/* durante o arrasto do split, os iframes não roubam o rato */
body.split-dragging iframe{pointer-events:none}
body.split-dragging{user-select:none;cursor:col-resize}

/* ── ordenação de módulos (modo de edição) ── */
.launcher-tile[draggable="true"]{cursor:grab}
.launcher-tile .lt-order{position:absolute;bottom:6px;right:6px;display:flex;gap:2px}
.launcher-tile .lt-order button{border:1px solid var(--line);background:var(--bg1,#fff);border-radius:5px;cursor:pointer;font-size:10px;padding:1px 5px;color:var(--text2)}
.launcher-tile .lt-order button:hover{color:var(--text);background:var(--bg2)}

/* ── modo extensão (2º monitor): sem avisos duplicados, user só-avatar ── */
body.modo-extensao #topBtnChat, body.modo-extensao #topBtnNotif,
body.modo-extensao #topBtnTasks, body.modo-extensao #topBtnPolicies{display:none!important}
/* chip que torna o modo extensão visível (senão parece que os avisos sumiram) */
.ext-chip{border:1px solid var(--amber,#b25a00);color:var(--amber,#b25a00);background:transparent;
  border-radius:999px;padding:3px 10px;font:600 10.5px/1.4 'JetBrains Mono',monospace;
  letter-spacing:.4px;cursor:pointer;white-space:nowrap}
.ext-chip:hover{background:var(--amber,#b25a00);color:var(--on-estado,#fff)}
body.modo-extensao .right-panel{display:none!important}
body.modo-extensao .user-pill .user-info{display:none}
/* o painel direito não existe em modo-extensao: anula os offsets de rp-pinned
   (senão ficam gutters/deslocamentos mortos, sem controlo visível para desafixar) */
body.modo-extensao.rp-pinned .layout{margin-right:0}
body.modo-extensao.rp-pinned .toast-stack{right:18px}
body.modo-extensao.rp-pinned .help-fab{right:18px}

/* ── split com mini-separadores (Fase B1.2) ── */
.split-tabs{display:flex;gap:2px;overflow-x:auto;min-width:0;flex:1}
.split-tab{display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 9px;border:1px solid var(--line);border-bottom:none;border-radius:7px 7px 0 0;font-size:11px;color:var(--text2);cursor:pointer;white-space:nowrap;background:var(--bg2)}
.split-tab.on{background:var(--bg1,#fff);color:var(--text);font-weight:600}
.split-tab button{border:none;background:transparent;cursor:pointer;color:var(--text3);font-size:10px;padding:0 2px}
.split-tab button:hover{color:var(--red)}
.split-frames{flex:1;display:flex;flex-direction:column;min-height:0}
.split-frames .split-frame{flex:1}
.split-panel.split-oculto .split-bar,.split-panel.split-oculto .split-frames,.split-panel.split-oculto .split-resize{display:none}

/* ── favoritos com pastas na faixa ── */
.ms-pill.ms-pasta{font-weight:600}
/* faixa dos favoritos (06/10): letra da casa, não mono; pasta com ícone de traço (era o emoji 📁) */
.module-strip .ms-pill{font-family:var(--font-ui);font-size:12px;letter-spacing:0;padding:4px 12px 4px 10px;background:var(--bg1)}
.ms-ico{display:inline-flex;color:var(--text3)}
.ms-ico svg{width:13px;height:13px}
.crumb-drop a.cd-item{text-decoration:none;color:var(--text)}

/* ── ★ fixa na topbar (Fase B1.3): favoritar a página atual ── */
#topFavBtn{font-size:15px;color:var(--text3);line-height:1;flex-shrink:0}
#topFavBtn:hover{color:var(--gold)}
#topFavBtn.is-fav{color:var(--gold)}

/* ── menu "…" nos pills da faixa (Fase B1.3) ── */
.ms-pill .ms-more{display:none;margin-left:2px;padding:0 3px;border-radius:4px;color:var(--text3);line-height:1;font-weight:700}
.ms-pill:hover .ms-more{display:inline-block}
.ms-pill .ms-more:hover{background:var(--bg2);color:var(--text)}


/* ── ficha de módulo (Fase B2.1) ── */
.sd-mod-link{cursor:pointer}
.sd-mod-link:hover strong{color:var(--cyan);text-decoration:underline}
.ficha-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ficha-tbl td,.ficha-tbl th{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ficha-tbl td:first-child{color:var(--text3);white-space:nowrap;width:130px}
.ficha-defs th{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.ficha-defs td:first-child{width:auto}
.ficha-pag{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.ficha-pag:hover{background:var(--bg2)}
.ficha-pag .pill{margin-left:auto}
.ficha-pag .pill + .pill{margin-left:6px}

/* ── criação de módulo (Fase B2.1) ── */
.fm-grupos{display:flex;flex-wrap:wrap;gap:8px 14px}
.fm-grupos label{display:flex;gap:5px;align-items:center;font-size:12px}

/* ── regras × definições (Fase B2.2) ── */
#polRegraDefs .fm-grupos label{font-size:11px}
.pol-panel-item .pill{font-size:9px;padding:1px 6px}

/* ── ligações do módulo (Fase B2.2) ── */
.lk-tipo{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--text3);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* ═══════════════════════════════════════════════════════════
   REFRESH 2026-07 — "QUIET LIGHT" (linguagem Apple)
   Camada de afinação sobre o sistema: etiquetas em Inter (o
   mono fica reservado a dados), títulos com tracking apertado,
   ícones de traço fino, foco visível, motion reduzido.
   ═══════════════════════════════════════════════════════════ */

/* ícones de linha: traço mais fino e pontas redondas (sensação SF Symbols) */
svg{stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg,.nav-icon svg,.sb-collapse svg,.rp-tab svg,.rp-action svg,
.lt-icon svg,.notif-item-icon svg,.toast-icon svg,.area-icon svg,.ds-icon svg,
.search svg,.launcher-search svg,.chat-search svg,.chat-attach-btn svg,.empty-icon svg,
.step-bullet svg,.extv-window-icon svg,.status-menu svg{stroke-width:1.7}

/* etiquetas deixam o mono: Inter 600, tracking curto e calmo */
.page-eyebrow,.metric-label,.group-head,.field label,th,
.sb-title,.ms-label,.fav-section-name,.stat-l,.proc-summary-l,
.hd-eyebrow,.hd-sec,.cal-weekdays > div,.sd-group-label,.favstrip-head,
.status-menu-head,.pp-section-head,.notif-count,.rp-pane-count{
  font-family:var(--font-ui);font-weight:600;letter-spacing:.06em;
}
.field label{text-transform:none;letter-spacing:.01em;font-size:11px;color:var(--text2)}
th{letter-spacing:.05em}
.group-head{font-size:9.5px}
.brand-sub{font-family:var(--font-ui);font-weight:500;letter-spacing:.14em}
.user-role{font-family:var(--font-ui);font-weight:500;letter-spacing:.08em}
/* 2.ª leva (06/10): a mono fica SÓ para o que é código — @alias, ids, caminhos,
   refs, versões, teclas. Horas, contagens, «→ responsável», tendências e
   pastilhas de estado são texto para pessoas e passam à letra da casa.
   (O chat fica de fora: é do SYSCOM, com folha própria.) */
.metric-trend,.task-meta,.area-stat,.notif-item-time,.cal-event-time,.cal-day-event-meta,
.proc-card-stats,.step-assignee,.task-card-proc,.hd-meta,.hd-news-meta,.hd-news-data,
.hd-nt-data,.nb-item .nb-meta,.mail-quando,.cn-quando,.pp-count,.policy-meta,.pol-card-foot{
  font-family:var(--font-ui);letter-spacing:0;
}
.pill,.widget-tag,.pol-sev,.pol-badge,.hm-kind,.lk-tipo{
  font-family:var(--font-ui);font-weight:600;letter-spacing:.02em;
}

/* display: pesos contidos, tracking apertado */
.brand-name{font-weight:700;letter-spacing:.02em;font-size:15px}
.page-title{font-weight:650;letter-spacing:-.022em}
.metric-value{font-weight:650;letter-spacing:-.03em}
.hd-head h2{font-weight:700;letter-spacing:-.02em}
.area-stat strong{font-weight:650}
.stat-v{font-weight:650}

/* painel direito flutuante em vidro; fixado volta a opaco */
.right-panel{background:var(--glass-menu);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%)}
body.rp-pinned .right-panel{background:var(--bg1);backdrop-filter:none;-webkit-backdrop-filter:none}

/* cantos coerentes em micro-controlos */
.status-menu button{border-radius:8px}
.launcher-tile{border-radius:14px}
.chat-search input{border-radius:999px}
.chat-compose input{border-radius:999px}

/* hovers mais serenos */
.area-card:hover{transform:translateY(calc(-2px*var(--mx,1))) scale(calc(1 + .015*var(--mx,1)))}
.proc-card:hover{transform:translateY(calc(-1px*var(--mx,1))) scale(calc(1 + .012*var(--mx,1)))}
.help-fab:hover{transform:scale(calc(1 + .06*var(--mx,1)))}

/* foco por teclado sempre visível */
:focus-visible{outline:none;box-shadow:0 0 0 3.5px var(--focus)}
/* (08/10/2026) Campo DENTRO de uma caixa de pesquisa: quem mostra o foco é a caixa
   (:focus-within, borda azul + anel). Sem isto o anel acima pintava-se também no
   próprio <input> — um 2.º retângulo azul colado ao texto, dentro do 1.º (lançador
   de aplicações, pesquisa do topo, pesquisa da ajuda). */
:is(.search,.launcher-search,.hd-busca) input:focus-visible{box-shadow:none}

/* ═══ MOTION — feedback tátil ao passar e ao clicar (também em touch) ═══ */
.btn,.icon-btn,.nav-item,.area-card,.fav-card,.launcher-tile,.ms-pill,.chat-filter-chip,
.pol-chip,.cal-chip,.rp-tab,.tab,.status-menu button,.sd-item,.pol-card,.policy-card,
.proc-card,.metric,.task,.task-card,.chat-list-row,.notif-item,.user-pill,.sb-collapse,
.modal-close,.rp-action,.help-fab,.cal-nav button,.chat-channel,.icon-tile,.hd-pol,.nb-item{
  transition:transform .18s cubic-bezier(.32,.72,.36,1),box-shadow .22s ease,
    background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease;
}
.nav-icon,.lt-icon,.area-icon{transition:transform .2s cubic-bezier(.32,.72,.36,1)}

/* chegar com o rato: vida q.b. — intensidade controlada por --mx
   (Definições → Aspeto → Movimento; theme.js aplica body[data-motion]) */
:root{--mx:1}
body[data-motion="off"]{--mx:0}
body[data-motion="subtle"]{--mx:.5}
body[data-motion="strong"]{--mx:2.8}
.btn:hover{transform:translateY(calc(-1px*var(--mx)))}
.btn-primary:hover{box-shadow:0 4px 14px rgba(0,113,227,.30)}
.nav-item:hover .nav-icon{transform:scale(calc(1 + .12*var(--mx)))}
.launcher-tile:hover .lt-icon{transform:scale(calc(1 + .10*var(--mx)))}
.area-card:hover .area-icon{transform:scale(calc(1 + .07*var(--mx)))}
/* efeito "dock": o próprio quadro cresce um nadinha ao chegar */
.launcher-tile:hover{transform:scale(calc(1 + .05*var(--mx)))}
.fav-card:hover{transform:scale(calc(1 + .02*var(--mx)))}
.ms-pill:hover{transform:scale(calc(1 + .06*var(--mx)))}
.icon-btn:hover{transform:scale(calc(1 + .08*var(--mx)))}
.user-pill:hover{transform:scale(calc(1 + .03*var(--mx)))}
.metric:hover{transform:translateY(calc(-1px*var(--mx))) scale(calc(1 + .012*var(--mx)))}

/* clicar: encolhe ligeiro — o feedback funciona igual em rato e touch */
.btn:active{transform:scale(.965)}
.icon-btn:active,.sb-collapse:active,.modal-close:active,.rp-action:active,.cal-nav button:active,.icon-tile:active{transform:scale(.88)}
.nav-item:active,.status-menu button:active,.sd-item:active,.task:active,.task-card:active,.chat-list-row:active,.notif-item:active,.hd-pol:active,.nb-item:active{transform:scale(.985)}
.area-card:active,.fav-card:active,.policy-card:active,.pol-card:active,.proc-card:active,.launcher-tile:active,.metric:active{transform:scale(.98)}
.ms-pill:active,.chat-filter-chip:active,.pol-chip:active,.cal-chip:active,.chat-channel:active{transform:scale(.94)}
.user-pill:active{transform:scale(.97)}
.help-fab:active{transform:scale(.90)}
.rp-tab:active,.tab:active{transform:scale(.96)}

/* touch (sem hover): estado premido mais evidente */
@media (hover:none){
  .nav-item:active,.status-menu button:active,.sd-item:active{background:var(--bg3)}
  .btn:active{opacity:.85}
  .area-card:active,.fav-card:active,.launcher-tile:active{background:var(--bg2)}
}

/* entradas com mola suave (Apple: rápido a entrar, suave a assentar) */
.modal-bg.on .modal{animation:modalIn .28s cubic-bezier(.32,1.25,.4,1)}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.launcher-bg.on .launcher{animation:launcherIn .32s cubic-bezier(.3,1.2,.35,1)}
@keyframes launcherIn{from{opacity:0;transform:scale(.965) translateY(-6px)}to{opacity:1;transform:none}}

/* controlo segmentado (Aspeto / Idioma no menu do utilizador) */
.sm-seg{display:flex;gap:2px;background:var(--bg3);border-radius:9px;padding:2px;margin:2px 8px 8px}
.sm-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 4px;border-radius:7px;font-size:11.5px;font-weight:500;color:var(--text2);
  transition:background .16s ease,color .16s ease,box-shadow .2s ease,transform .18s cubic-bezier(.32,.72,.36,1)}
.sm-seg button:active{transform:scale(.95)}
.sm-seg button.on{background:var(--bg1);color:var(--text);font-weight:600;box-shadow:var(--shadow)}
.status-menu .sm-seg button{padding:6px 4px}

/* ═══ MODO TOUCH — alvos grandes; o menu lateral vira quadros de clicar
   com o ícone em cima e o texto dentro (Definições → Aspeto → Interação;
   theme.js aplica body[data-input="touch"]). Base do futuro modo tablet. ═══ */
body[data-input="touch"]{--sbw:324px}
body[data-input="touch"] .nav-item{padding:12px 12px;font-size:13px;border-radius:12px}
/* o menu inteiro vira cartões: raiz e grupos em grelha de 2 colunas.
   NOTA: buildItem embrulha cada item num <div> wrapper — as células do
   grid são esses wrappers, e o cartão é o .nav-item lá dentro. */
body[data-input="touch"] .sb-scroll{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px 10px 16px;align-content:start}
body[data-input="touch"] .sb-scroll > .nav-group,
body[data-input="touch"] .sb-scroll > .nav-favstrip,
body[data-input="touch"] .sb-scroll > .viewas-note,
body[data-input="touch"] .sb-scroll > .add-child-row{grid-column:1/-1}
body[data-input="touch"] .sb-scroll > div:empty,
body[data-input="touch"] .group-body > div:empty{display:none}
/* wrappers com submenu expandido ocupam a linha inteira */
body[data-input="touch"] .sb-scroll > div:has(> .nav-item.expanded),
body[data-input="touch"] .group-body > div:has(> .nav-item.expanded){grid-column:1/-1}
body[data-input="touch"] .group-body{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:4px 10px 8px}
body[data-input="touch"] .sb-scroll > div > .nav-item,
body[data-input="touch"] .group-body > div > .nav-item{
  position:relative;flex-direction:column;justify-content:center;gap:9px;margin:0;padding:16px 6px 13px;
  text-align:center;background:var(--bg1);border:1px solid var(--line);min-height:92px;box-shadow:var(--shadow);
}
body[data-input="touch"] .sb-scroll > div > .nav-item .nav-icon,
body[data-input="touch"] .group-body > div > .nav-item .nav-icon{width:28px;height:28px}
body[data-input="touch"] .sb-scroll > div > .nav-item .nav-icon svg,
body[data-input="touch"] .group-body > div > .nav-item .nav-icon svg{width:26px;height:26px}
body[data-input="touch"] .sb-scroll > div > .nav-item .nav-label,
body[data-input="touch"] .group-body > div > .nav-item .nav-label{white-space:normal;line-height:1.25;font-size:12px;flex:none}
body[data-input="touch"] .sb-scroll > div > .nav-item .nav-chevron,
body[data-input="touch"] .group-body > div > .nav-item .nav-chevron{position:absolute;top:8px;right:9px;margin:0}
body[data-input="touch"] .nav-children .nav-item{flex-direction:row;text-align:left;min-height:44px}
/* os cartões do menu também crescem ao chegar (efeito dock) */
body[data-input="touch"] .sb-scroll > div > .nav-item:hover,
body[data-input="touch"] .group-body > div > .nav-item:hover{transform:scale(calc(1 + .035*var(--mx,1)));border-color:var(--acc-bd)}
body[data-input="touch"] .btn{padding:11px 18px;font-size:13px;border-radius:11px}
body[data-input="touch"] .icon-btn{width:var(--tap-min);height:var(--tap-min)}
body[data-input="touch"] .field input,body[data-input="touch"] .field select,body[data-input="touch"] .field textarea{padding:12px 14px;font-size:14px}
body[data-input="touch"] .chat-filter-chip,body[data-input="touch"] .pol-chip,body[data-input="touch"] .cal-chip{padding:9px 16px;font-size:13px}
body[data-input="touch"] .status-menu{width:260px}
body[data-input="touch"] .status-menu button{padding:12px 12px;font-size:13.5px}
body[data-input="touch"] .sm-seg button{padding:10px 6px;font-size:12.5px}
body[data-input="touch"] .launcher-grid{grid-template-columns:repeat(3,1fr);gap:8px}
body[data-input="touch"] .launcher-tile{padding:20px 10px 16px}
body[data-input="touch"] .lt-icon{width:56px;height:56px;border-radius:15px}
body[data-input="touch"] .lt-icon svg{width:26px;height:26px}
body[data-input="touch"] .modal-close,body[data-input="touch"] .rp-action{width:38px;height:38px}
body[data-input="touch"] .rp-tab{padding:14px 6px;font-size:12.5px}
body[data-input="touch"] .ms-pill{padding:8px 16px;font-size:11.5px}
body[data-input="touch"] .tab{padding:12px 18px}
body[data-input="touch"] th,body[data-input="touch"] td{padding:14px 16px}

/* ═══ DOCK (ampliação à Mac — dock.js) ═══ */
.ms-pill{transform-origin:bottom center;will-change:transform}
.launcher-tile{will-change:transform}

/* ═══ MOBILE / JANELA PEQUENA (≤920px) — menu vira overlay com
   hambúrguer; as notificações passam para a barra inferior ═══ */
.mobile-menu-btn{display:none}
.mobile-tabbar{display:none}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:var(--dim);z-index:125;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:920px){
  /* O ☰ da topbar NÃO volta: eram DOIS menus (cima e baixo) e o Telmo mandou
     ficar um só (04/08) — o «Menu» da tabbar é o único gatilho em mobile.
     A base .mobile-menu-btn{display:none} já o esconde; nada a mostrar aqui. */
  /* topbar limpa: os botões de avisos vivem na tabbar; utilizador só avatar */
  .topbar{padding:0 12px;gap:8px}
  .topbar #helpQuickBtn,.topbar #topBtnChat,.topbar #topBtnNotif,.topbar #topBtnTasks,.topbar #topBtnPolicies{display:none}
  /* Fora do home a topbar TRANSBORDAVA 49px e o avatar saía do ecrã (medido
     a 375px: scrollWidth 424): a ★ entra com flex-shrink:0 e empurra tudo.
     No telemóvel saem os botões que lá não fazem sentido — o 2º monitor
     (#topSendBtn) não existe num iPhone, o ⌘K (#cmdkBtn) duplica a pesquisa
     que está mesmo ao lado, e a ★ (#topFavBtn) duplica a ★ que vive em cada
     item do menu (é o que o hint dos favoritos manda usar). */
  .topbar #topSendBtn,.topbar #cmdkBtn,.topbar #topFavBtn{display:none}
  .topbar #topSplitBtn{display:none}   /* o ◫ Dividir (06/10) segue o 2.º monitor: não há ecrã para dividir num telemóvel */
  /* Os botões que ficam não se esmagam: com flex-shrink por omissão o flexbox
     espremia os icon-btns até 16px de largura — alvo de toque impossível.
     O que encolhe na topbar é só a pesquisa, que é elástica por desenho. */
  .topbar .icon-btn,.topbar .brand,.topbar .user-pill{flex:none}
  .topbar .crumbs,.topbar .topbar-sep{display:none}
  .topbar .brand-sub{display:none}
  .user-pill .user-info{display:none}
  .user-pill{padding:4px}
  .search{width:auto;flex:1;min-width:0}
  .search-key{display:none}
  /* Menu lateral em overlay POR CIMA do backdrop.
     O `body.sb-auto .sidebar` da zona de secretária (uma linha mais acima neste
     ficheiro) declara z-index:60 e é MAIS ESPECÍFICO do que um `.sidebar` só —
     ganhava, e o menu abria DEBAIXO do seu próprio véu (125): via-se
     escurecido e nenhum item respondia ao toque. Era isto que fazia «o menu não
     funciona no iPhone» (Telmo, 04/08) — medido com elementFromPoint, que
     devolvia `sidebar-backdrop.on` em cima de cada item.
     O `sb-auto` está aqui de propósito: sem ele a regra volta a perder no dia em
     que alguém abra a página sem o menu fixado, que é o estado por omissão. */
  .sidebar,body.sb-auto .sidebar{z-index:130}
  /* E a LARGURA cai na mesma armadilha: o `body.sb-auto .sidebar` declara
     `width:var(--w-rail-min)` (64px) e ganha a qualquer `.sidebar` só. Tirar o
     `collapsed` no mobile.js não bastava — a gaveta abria «inteira» com 64px de
     largura, ou seja continuava a ser uma régua e os rótulos ficavam cortados.
     Aberta no telemóvel ocupa quase o ecrã, com um resto à direita para se ver
     que há conteúdo atrás e para lá se tocar a fechar. */
  .sidebar.open,body.sb-auto .sidebar.open{width:min(86vw,320px)}
  /* FORA DO FLUXO SEMPRE (04/08, auditoria): com o menu FIXADO o .sidebar era
     um filho normal do .layout e a régua colapsada ficava 64px a OCUPAR ecrã —
     num iPhone de 375px o conteúdo (e o iframe de cada módulo) vivia com 311px.
     No telemóvel o menu é gaveta: fechado sai do ecrã por transform (que não
     gera scroll nem reflow), aberto desliza por cima do véu. O par com sb-auto
     é pela mesma guerra de especificidade dos dois comentários acima. */
  .sidebar,body.sb-auto .sidebar{position:fixed;left:0;top:var(--h-topbar);bottom:var(--h-tabbar);
    transform:translateX(-103%);transition:transform .18s ease;box-shadow:none}
  .sidebar.open,body.sb-auto .sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
  /* …e o conteúdo recupera os 64px que o modo solto reservava por margem
     (body.sb-auto .content) — a gaveta já não vive no fluxo de ninguém */
  body.sb-auto .content{margin-left:0}
  body.sb-auto .split-panel:not(.split-right){margin-left:0}
  .sidebar-backdrop.on{display:block}
  /* barra inferior com contadores (mobile.js espelha os da topbar).
     --h-tabbar = os 60px MAIS a safe area. Com box-sizing:border-box global,
     um `height:60px` com `padding-bottom:env(...)` punha o inset DENTRO dos
     60px: num iPhone com 34px de indicador os botões ficavam com 25px de
     altura. A altura tem de CRESCER com o inset, e tudo o que se afasta da
     tabbar afasta-se desta variável e não de um 60 escrito à mão. */
  :root{--h-tabbar:calc(60px + env(safe-area-inset-bottom))}
  /* ACIMA do backdrop (125) E da gaveta (130) — Telmo, 04/08: «o menu do
     syscore não funciona nos iphones». Com 120 o tabbar ficava DEBAIXO do
     véu: bastava abrir a gaveta pelo «Menu» e nenhum botão de baixo
     respondia mais, porque o elementFromPoint devolvia o backdrop. O
     tabbar é a navegação principal — fica sempre alcançável, e é por ele
     que se fecha a gaveta. */
  .mobile-tabbar{position:fixed;left:0;right:0;bottom:0;height:var(--h-tabbar);display:flex;z-index:135;
    background:var(--glass-menu);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:10px;font-weight:500;color:var(--text2);position:relative}
  .mtab:active{transform:scale(.92)}
  /* o separador aberto (29/09): o mesmo acento do botão aceso da barra de cima */
  .mtab.active{color:var(--cyan);font-weight:600}
  .mtab .m-badge{position:absolute;top:6px;left:calc(50% + 4px);min-width:15px;height:15px;padding:0 4px;
    background:var(--red);color:var(--on-estado,#fff);border-radius:8px;font-family:var(--font-mono);font-size:9px;font-weight:700;
    display:none;align-items:center;justify-content:center}
  .mtab .m-badge.on{display:flex}
  /* o Chat usa o dourado para as não lidas e o vermelho só quando há uma
     urgência à espera (23/09) — o espelho do contador da barra de cima */
  .mtab .m-badge.gold{background:var(--gold)}
  /* as tarefas pendentes são trabalho, não alarme (06/10) — a mesma bolinha neutra do topo */
  .mtab .m-badge.neutro{background:var(--bg3);color:var(--text2);box-shadow:inset 0 0 0 1px var(--line2)}
  /* conteúdo e overlays respeitam a tabbar */
  .content{padding-bottom:calc(var(--h-tabbar) + 4px)}
  /* o par 100vh→100dvh como já se faz mais acima neste ficheiro: em Safari o
     100vh é o viewport GRANDE (como se a barra de endereço estivesse escondida),
     logo o embed ficava mais alto que a área visível e o fundo do módulo —
     inclusive por baixo da tabbar — ficava fora de alcance. O 1.º valor é o
     recuo para quem não conhece dvh. */
  .module-embed{height:calc(100vh - var(--h-topbar) - var(--h-strip) - var(--h-tabbar))}
  .module-embed{height:calc(100dvh - var(--h-topbar) - var(--h-strip) - var(--h-tabbar))}
  .right-panel{width:100vw;top:var(--h-topbar);bottom:var(--h-tabbar)}
  body.rp-pinned .layout{margin-right:0}
  body.rp-pinned .right-panel{box-shadow:var(--shadow-lg)}
  .toast-stack{bottom:calc(var(--h-tabbar) + 16px)}
  /* o ? COLADO ao canto (Telmo 04/08: «fica longe do canto») — logo acima
     da tabbar de 60px e encostado à direita, a acompanhar a safe area.
     E a METADE do tamanho (04/08 v2: «para otimizar a vista») — o visual
     encolhe para 22px mas o ALVO DE TOQUE fica nos 44px AA, por um ::after
     transparente centrado: ninguém falha o dedo num botão que se vê menos. */
  .help-fab{bottom:calc(66px + env(safe-area-inset-bottom));right:calc(8px + env(safe-area-inset-right));
    width:22px;height:22px;font-size:11px}
  .help-fab::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;
    transform:translate(-50%,-50%);border-radius:50%}
  body.rp-pinned .toast-stack{right:18px}
  body.rp-pinned .help-fab{right:calc(8px + env(safe-area-inset-right))}
  /* …e o mesmo para a barra ABERTA sem estar fixada: a regra de secretária
     `body:not(.modo-extensao).rp-open .help-fab{right:418px}` afasta o ? do
     painel de 400px — num ecrã de 375px atirava-o para FORA do ecrã à
     esquerda (left=-65, medido na auditoria de 04/08). No telemóvel o painel
     é o ecrã inteiro e o ? fica no canto, por cima dele, como no pinned. */
  body:not(.modo-extensao).rp-open .help-fab{right:calc(8px + env(safe-area-inset-right))}
  /* o rodapé da gaveta de ajuda leva as 5 portas (ajuda-portas.js) — numa
     linha só eram ~1030px e as últimas ficavam fora do ecrã sem scroll */
  .hd-foot{flex-wrap:wrap}
  /* um alias comprido num chip nowrap sai do cartão/painel — quebra linha
     (a cópia do módulo Politicas leva a mesma regra no CSS dele) */
  .policy-chip{white-space:normal;word-break:break-word}
  /* páginas mais respiráveis em ecrã estreito */
  .page{padding:16px 14px}
  .metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .launcher{left:8px;right:8px;width:auto;top:58px}
  .launcher-grid{grid-template-columns:repeat(3,1fr)}   /* telemóvel: 3 colunas fixas (vence a regra auto-fill de cima) */
}

/* menos movimento para quem o pediu ao sistema — anular por completo
   (encurtar duration criaria transições "all" implícitas em tudo) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ═══ Calendário consolidado v3 — toolbar compacta + vistas dia/semana ═══ */
.cal-page{padding-top:6px}
/* ═══ Preencher o ecrã — calendário (spec 2026-07-20-layout-preencher-ecra) ═══
   .cal-page já existe no DOM (page cal-page) com toolbar/banner/corpo como filhos
   diretos. A página enche a altura do .content e o corpo (semana/dia .cal-hgrid ou
   mês .cal-grid) estica para o fundo. Sem zoom, sem tocar em JS. Regras scoped a
   .cal-page → não afetam mais nada. */
.cal-page{display:flex;flex-direction:column;height:100%;max-width:none}
.cal-page > .cal-hgrid,
.cal-page > .cal-grid{flex:1;min-height:0}
/* semana/dia: as linhas de hora (têm data-h) distribuem-se pela altura livre;
   .cal-hcell mantém o piso de 40px → com 24h abertas voltam a 40px e há scroll */
.cal-hscroll .cal-hrow[data-h]{flex:1 1 auto}
/* (08/10/2026) folga no fim da grelha: o «?» da ajuda (fixo, canto inferior
   direito) tapava a última hora de domingo — passa a ficar sobre esta faixa vazia */
.cal-hfim{flex:none;height:44px;background:var(--bg2)}
/* «Todo o dia» na régua: duas linhas curtas cabem nos 56px */
.cal-hallday .cal-hgutter{line-height:1.25;padding-right:6px}
/* mês: as semanas dividem a altura igualmente (anula a altura fixa por specificity) */
.cal-page > .cal-grid{display:flex;flex-direction:column}
.cal-page > .cal-grid .cal-week{flex:1;min-height:0}
.cal-page > .cal-grid .cal-day{height:auto}
.cal-top{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  padding:6px 0 10px;position:relative;z-index:30;max-width:100%;
}
/* barra numa só linha: o ⚙ de definições (e restantes botões da direita) nunca
   cai para baixo — só os dropdowns de filtro (tipos/agendas/pessoa/área)
   encolhem, com reticências, quando falta largura (ex.: chat aberto). */
.cal-top > .cal-nav,
.cal-top > .cal-top-title,
.cal-top > .cal-view-switch,
.cal-top > .btn,
.cal-top > .cal-icon-btn,
.cal-top > .cal-dd.dir{ flex:none; }
.cal-top > .cal-dd:not(.dir){ min-width:0; }
/* a barra numa só linha é regra de SECRETÁRIA: num iPhone de 375px os filhos
   flex:none somavam ~760px e metade saía do ecrã sem scroll nenhum (auditoria
   04/08). Em ecrã estreito a toolbar quebra linha — os dropdowns de filtro
   continuam a encolher dentro de cada linha. */
@media (max-width:920px){
  .cal-top{flex-wrap:wrap}
}
.cal-top-title{
  font-family:var(--font-display);font-size:16.5px;font-weight:700;color:var(--text);
  white-space:nowrap;margin:0 4px;
}
.cal-top-spacer{flex:1;min-width:8px}
/* período sem eventos, ao lado do título (ver calTextoVazio no views.js) */
.cal-top-vazio{flex:none;font-size:12.5px;color:var(--text3);white-space:nowrap;margin-left:-2px}
.cal-top-vazio::before{content:'·';margin-right:6px}
@media (max-width:920px){ .cal-top-vazio{display:none} }
.cal-icon-btn{
  width:30px;height:30px;border-radius:6px;border:1px solid var(--line);background:var(--bg1);
  color:var(--text2);display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;
}
.cal-icon-btn:hover{background:var(--bg);color:var(--text)}
.cal-view-switch{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg1)}
.cal-view-switch button{
  padding:6px 12px;font-size:11.5px;color:var(--text2);background:transparent;border:none;cursor:pointer;
  border-right:1px solid var(--line);
}
.cal-view-switch button:last-child{border-right:none}
.cal-view-switch button.on{background:var(--cyan-soft);color:var(--cyan);font-weight:600}
/* dropdowns da toolbar */
.cal-dd{position:relative;display:inline-flex}
.cal-dd-btn{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;
  border:1px solid var(--line);background:var(--bg1);color:var(--text2);font-size:11.5px;cursor:pointer;
  max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.cal-dd-btn:hover,.cal-dd-btn.on{background:var(--bg);color:var(--text)}
.cal-dd-caret{font-size:9px;opacity:.6}
.cal-dd-badge{
  background:var(--cyan-soft);color:var(--cyan);border-radius:999px;padding:1px 7px;
  font-size:10px;font-weight:700;
}
.cal-dd-panel{
  display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:210px;max-width:300px;
  max-height:320px;overflow-y:auto;background:var(--bg1);border:1px solid var(--line2);
  border-radius:8px;box-shadow:0 10px 32px rgba(0,0,0,.18);padding:6px;z-index:60;
}
.cal-dd-panel.on{display:block}
.cal-dd.dir .cal-dd-panel{left:auto;right:0}
.cal-dd-item{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;font-size:12px;
  color:var(--text2);cursor:pointer;user-select:none;
}
.cal-dd-item:hover{background:var(--bg);color:var(--text)}
.cal-dd-item.sel{background:var(--cyan-soft);color:var(--cyan);font-weight:600}
.cal-dd-item input[type=checkbox]{width:auto;cursor:pointer;accent-color:var(--cyan)}
.cal-dd-n{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--text3)}
.cal-dd-foot{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;display:flex;justify-content:flex-end}
.cal-dd-sep{border-top:1px solid var(--line);margin:5px 0}
/* mês só com dias úteis */
.cal-grid.so-uteis .cal-weekdays{grid-template-columns:repeat(5,1fr)}
.cal-grid.so-uteis .cal-week{grid-template-columns:repeat(5,1fr)}
/* grelha de horas (dia / semana) */
.cal-hgrid{border:1px solid var(--line);border-radius:10px;background:var(--bg1);overflow:hidden;display:flex;flex-direction:column}
.cal-hrow{display:grid;grid-template-columns:56px repeat(var(--cal-cols,7),1fr);border-bottom:1px solid var(--line)}
.cal-hrow:last-child{border-bottom:none}
.cal-hgutter{
  font-family:var(--font-mono);font-size:10px;color:var(--text3);text-align:right;
  padding:4px 8px 0 0;border-right:1px solid var(--line);user-select:none;
}
.cal-hhead{background:var(--bg2)}
.cal-hday{
  padding:8px 10px;font-size:11.5px;color:var(--text2);cursor:pointer;text-align:center;
  border-right:1px solid var(--line);
}
.cal-hday:last-child{border-right:none}
.cal-hday:hover{background:var(--bg)}
.cal-hday strong{font-size:14px;color:var(--text);margin-left:4px}
.cal-hday.today{background:var(--cyan-soft)}
.cal-hday.today strong{color:var(--cyan)}
.cal-hallday{background:var(--bg2);min-height:30px}
.cal-hallday .cal-hgutter{font-size:9px;padding-top:8px}
.cal-hcell{
  min-height:40px;border-right:1px solid var(--line);padding:2px 3px;position:relative;
  display:flex;flex-direction:column;gap:2px;cursor:pointer;
}
.cal-hcell:last-child{border-right:none}
.cal-hcell:hover{background:var(--bg2)}
.cal-hcell .cal-event{cursor:pointer}
/* preenche a altura disponível do .cal-hgrid; scroll interno só quando há horas a mais */
.cal-hscroll{flex:1;min-height:0;overflow-y:auto;position:relative;display:flex;flex-direction:column}
/* hora atual em destaque + linha do "agora" */
.cal-hrow.now-hour{background:color-mix(in srgb, var(--cyan) 6%, transparent)}
.cal-hrow.now-hour .cal-hgutter{color:var(--cyan);font-weight:700}
.cal-nowline{
  position:absolute;left:0;right:0;height:0;border-top:2px solid var(--red);z-index:5;pointer-events:none;
}
.cal-nowline::before{
  content:'';position:absolute;left:-1px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--red);
}
.cal-event-now{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--cyan) 55%, transparent);
  font-weight:700;
}

/* ═══ Calendário v4 — quadros iguais, horário útil, hoje marcado, próximo ═══ */
/* colunas SEMPRE do mesmo tamanho (minmax(0,1fr) impede o conteúdo de alargar) */
.cal-hrow{grid-template-columns:56px repeat(var(--cal-cols,7),minmax(0,1fr))}
.cal-hcell,.cal-hday{min-width:0}
.cal-hcell .cal-event,.cal-day-events .cal-event{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* mês: células com altura UNIFORME (o «+ N mais» absorve o excedente) */
.cal-week{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-grid.so-uteis .cal-week{grid-template-columns:repeat(5,minmax(0,1fr))}
.cal-day{min-width:0;height:122px;overflow:hidden}
/* hoje marcado no número do dia (como no Outlook) */
.cal-day.today .cal-day-num{
  background:var(--cyan);color:var(--on-accent,#fff);width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;
}
.cal-hday.today span{color:var(--cyan);font-weight:700}
/* (08/10/2026) Semana/dia: HOJE é a coluna inteira num tom leve e a hora atual é só
   a linha vermelha (.cal-nowline) + a hora a azul na régua. A faixa da hora atual
   atravessava os 7 dias e competia com hoje. Fim de semana recuado (--bg): lê-se a
   semana de trabalho de relance, em claro e em escuro. */
.cal-hrow.now-hour{background:none}
.cal-hcell.fds{background:var(--bg)}
.cal-hday.fds{background:var(--bg)}
.cal-hday.fds span,.cal-hday.fds strong{color:var(--text3)}
.cal-hcell.fds:hover{background:var(--bg3)}
.cal-hcell.today-col,.cal-hcell.fds.today-col{background:color-mix(in srgb, var(--cyan) 5%, var(--bg1))}
.cal-hcell.today-col:hover{background:color-mix(in srgb, var(--cyan) 10%, var(--bg1))}
.cal-hday.today,.cal-hday.fds.today{background:color-mix(in srgb, var(--cyan) 10%, var(--bg1))}
.cal-hday.fds.today strong{color:var(--cyan)}
@supports not (color: color-mix(in srgb, red 10%, white)){
  .cal-hcell.today-col,.cal-hcell.fds.today-col{background:var(--cyan-soft)}
}
/* expansor «ver mais horas» fora do horário útil */
.cal-hmais{background:var(--bg2)}
.cal-hmais-btn{
  padding:5px 10px;font-size:10.5px;color:var(--text3);cursor:pointer;text-align:center;
  user-select:none;
}
.cal-hmais-btn:hover{color:var(--cyan);background:var(--bg)}
/* banner do próximo evento */
.cal-next{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px 12px;border-radius:8px;
  border:1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
  background:color-mix(in srgb, var(--cyan) 8%, var(--bg1));
  font-size:12px;color:var(--text);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.cal-next:hover{background:color-mix(in srgb, var(--cyan) 14%, var(--bg1))}
.cal-next-em{color:var(--text3)}

/* ═══ Modal de evento estilo Outlook (form + painel de ocupação) ═══ */
.modal-evento{max-width:980px;width:calc(100vw - 48px)}
.cal-ev-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.cal-ev-form{min-width:0}
.cal-ev-lado{
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;
  position:sticky;top:0;max-height:62vh;overflow-y:auto;
}
.cal-ev-lado-titulo{
  font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:8px;display:flex;gap:6px;align-items:center;
}
.cal-ev-ocupacao{display:flex;flex-direction:column;gap:4px}
.cal-ev-ocup-item{
  font-size:11.5px;color:var(--text2);padding:5px 8px;border-radius:6px;border:1px solid var(--line);
  background:var(--bg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cal-ev-ocup-item .mono{font-size:10px;color:var(--text3);margin-right:4px}
.cal-ev-ocup-item.conflito{border-color:var(--red);background:color-mix(in srgb, var(--red) 8%, var(--bg2))}
/* editor rico */
.cal-ev-toolbar{display:flex;gap:2px;align-items:center;border:1px solid var(--line);border-bottom:none;
  border-radius:9px 9px 0 0;background:var(--bg2);padding:4px 6px}
/* (08/10/2026) barra + editor são UMA caixa: o .field põe 6px entre filhos e a barra
   ficava solta por cima do editor. O foco acende as duas partes juntas. */
.cal-ev-toolbar + .cal-ev-editor{margin-top:-6px}
.field:focus-within > .cal-ev-toolbar{border-color:var(--cyan)}
.cal-ev-toolbar button{
  min-width:26px;height:24px;border:none;background:transparent;border-radius:4px;
  color:var(--text2);cursor:pointer;font-size:11.5px;
}
.cal-ev-toolbar button:hover{background:var(--bg);color:var(--text)}
.cal-ev-tb-sep{width:1px;height:16px;background:var(--line);margin:0 4px}
.cal-ev-editor{
  min-height:150px;max-height:300px;overflow-y:auto;border:1px solid var(--line);
  border-radius:0 0 9px 9px;background:var(--bg1);padding:10px 12px;font-size:12.5px;
  color:var(--text);line-height:1.55;outline:none;
  white-space:pre-wrap;   /* descrições multi-linha: os \n têm de SOBREVIVER ao abrir/gravar */
}
.cal-ev-editor:focus{border-color:var(--cyan)}
.cal-ev-editor.so-texto{border-radius:9px}
.cal-ev-editor.so-texto:focus{box-shadow:0 0 0 3px var(--ring)}
/* «opcional» e afins: dica leve dentro do rótulo, não ao mesmo peso */
.cal-ev-opc{font-weight:400;color:var(--text3);margin-left:4px}
.cal-ev-opc::before{content:'·';margin-right:4px}
/* erro do formulário no rodapé (substitui o alert do browser) */
.cal-ev-erro{margin-right:auto;align-self:center;color:var(--red);font-size:12px;font-weight:600;line-height:1.35}
.cal-ev-erro[hidden]{display:none}
.modal-evento input:disabled{opacity:.55;cursor:not-allowed}
.cal-ev-editor a{color:var(--cyan)}
/* chips (participantes, anexos) */
.cal-ev-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cal-ev-chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:11px;border:1px solid var(--line);background:var(--bg2);color:var(--text2);
}
.cal-ev-chip button{
  border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:10px;padding:0;
}
.cal-ev-chip button:hover{color:var(--red)}
/* disponibilidade dos participantes */
.cal-ev-disp{display:flex;align-items:center;gap:8px;margin-top:5px}
.cal-ev-disp-nome{font-size:10.5px;color:var(--text2);width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.cal-ev-disp-barra{display:flex;gap:1px;flex:1}
.cal-ev-disp-slot{flex:1;height:12px;border-radius:2px;opacity:.85;min-width:4px}
@media (max-width: 900px){
  .cal-ev-body{grid-template-columns:1fr}
  .cal-ev-lado{position:static;max-height:none}
}

/* setas de ordenação no painel Agendas (o topo aparece primeiro no dia) */
.cal-dd-seta{
  width:20px;height:18px;border:1px solid var(--line);background:var(--bg2);border-radius:4px;
  color:var(--text3);cursor:pointer;font-size:8px;line-height:1;padding:0;flex-shrink:0;
}
.cal-dd-seta:hover:not(:disabled){color:var(--cyan);background:var(--bg)}
.cal-dd-seta:disabled{opacity:.3;cursor:default}

/* mês: células crescem com a altura do ecrã (cabem 4-5 eventos por dia) */
@media (min-height: 900px){ .cal-day{height:150px} }
@media (min-height: 1050px){ .cal-day{height:178px} }

/* barra «A seguir» com cartões dos próximos eventos */
.cal-next{display:flex;align-items:stretch;gap:8px;cursor:default;padding:5px 10px;white-space:normal;overflow-x:auto}
.cal-next-rotulo{
  font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;
  align-self:center;flex-shrink:0;margin-right:2px;
}
.cal-next-card{
  display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg1);font-size:11.5px;min-width:0;max-width:250px;
  flex:0 1 auto;overflow:hidden;
}
.cal-next-card:hover{border-color:var(--cyan);background:color-mix(in srgb, var(--cyan) 8%, var(--bg1))}
.cal-next-card.primeiro{border-color:color-mix(in srgb, var(--cyan) 45%, var(--line));background:color-mix(in srgb, var(--cyan) 10%, var(--bg1))}
.cal-next-hora{font-size:10.5px;font-weight:700;color:var(--cyan);flex-shrink:0}
.cal-next-titulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.cal-next-card .cal-next-em{font-size:10px;color:var(--text3);flex-shrink:0}

/* tempo em falta ao vivo (barra «A seguir», < 1h) */
.cal-next-count{
  font-size:10.5px;font-weight:700;color:var(--red, #d70015);flex-shrink:0;
  background:color-mix(in srgb, var(--red, #d70015) 12%, transparent);
  border-radius:999px;padding:1px 7px;
}

/* correio: ícone de topo + dropdown mini-inbox */
.mail-wrap{position:relative;display:inline-flex}
.mail-drop{
  display:none;position:absolute;top:calc(100% + 8px);right:0;width:360px;max-width:86vw;
  background:var(--bg1);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 12px 36px rgba(0,0,0,.20);z-index:60;overflow:hidden;
}
.mail-drop.on{display:block}
.mail-drop-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.mail-drop-head strong{font-weight:700}
.mail-drop-list{max-height:60vh;overflow-y:auto}
.mail-item{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.mail-item:hover{background:var(--bg2)}
.mail-item-top{display:flex;align-items:baseline;gap:8px}
.mail-de{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.mail-quando{font-size:10px;color:var(--text3);flex-shrink:0;font-family:var(--font-mono)}
.mail-assunto{font-size:11.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-resumo{font-size:10.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-drop-foot{padding:8px 12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11px}
.mail-drop-foot a{color:var(--cyan);cursor:pointer}
.mail-vazio{padding:22px 12px;text-align:center;color:var(--text3);font-size:12px}
/* cabeçalho de dia na lista de correio (Hoje/Ontem/DD/MM) — fica colado ao topo ao scrollar */
.mail-day{position:sticky;top:0;z-index:1;padding:8px 12px 3px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text3);background:var(--bg1)}

/* menus de contexto (CtxMenu, assets/ctxmenu.css) — mapear os tokens dessa lib
   partilhada para os tokens da skin do shell, para ficarem certos em claro E
   escuro (as vars do shell já viram no modo escuro; sem isto usava os fallbacks
   claros hardcoded da lib). */
.ctxm{
  --panel:var(--bg1); --ink:var(--text); --muted:var(--text2); --faint:var(--text3);
  --citron-soft:var(--cyan-soft); --bad:var(--red); --bad-soft:var(--red-bg); --sh:var(--shadow-lg);
}

/* ═══ Widgets — página SYSHOME → Sistema & Tabelas (Frente C) ═══ */
.w-intro{margin:-6px 0 14px}
.w-area-title{margin:20px 0 10px}
.w-area-title:first-of-type{margin-top:6px}
.w-admin-card{border:1px solid var(--line);border-radius:12px;background:var(--bg1);padding:12px 14px;margin-bottom:14px}
.w-cfg{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.w-cfg-label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text2)}
.w-cfg-label select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font-size:12px}
.w-cfg-id{margin-left:auto;align-self:center;font-size:10.5px;color:var(--text3)}
.w-cfg-id code{font-family:var(--font-mono)}
.w-admin-card .widget{margin:0}

/* ── painel dividido: shell em modo filho (index.html?split=1) ──
   cromo mínimo — quem identifica a página é o separador do painel no shell pai */
body.split-child .topbar,
body.split-child .module-strip,
body.split-child .sidebar,
body.split-child .split-panel,
body.split-child .admin-banner,
body.split-child .right-panel,
body.split-child .mobile-tabbar,
body.split-child .help-fab,
body.split-child .ext-chip,
body.split-child .toast-stack{display:none!important}
body.split-child .layout{height:100vh}
body.split-child .content{padding-top:12px}

/* ── picker do ◫ Dividir: agrupado por ramo, com as bloqueadas à vista ── */
.sp-ramo{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text3);padding:10px 12px 4px}
#splitPickerList .cd-item .sp-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#splitPickerList .sp-modo{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text3);border:1px solid var(--line);border-radius:5px;padding:1px 5px;flex-shrink:0}
#splitPickerList .sp-ja{font-size:10px;font-weight:700;color:var(--cyan);flex-shrink:0}
#splitPickerList .cd-item.sp-dentro{background:var(--bg2)}
#splitPickerList .cd-item.sp-off{cursor:default;opacity:.55}
#splitPickerList .cd-item.sp-off:hover{background:transparent}
#splitPickerList .sp-motivo{font-size:10.5px;color:var(--text3);text-align:right;flex-shrink:0;max-width:52%}
.sp-bloq{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.sp-bloq summary{cursor:pointer;font-size:11px;color:var(--text3);padding:4px 12px}
.sp-bloq summary:hover{color:var(--text2)}

/* QUADRO «CÓDIGO DE CONDUTA» nas Políticas (assets/conduta-quadro.js, partilhado com o
   módulo autónomo). Tokens e mais nada: a folha do módulo é outra, e um hex à mão aqui
   dava dark errado lá (REGRAS §6). */
.cnd-quadro{margin:0 0 16px}
.cnd-head{margin:6px 0 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cnd-nota{font-size:12px;color:var(--text2)}
.cnd-esp{flex:1}
.cnd-cap{margin-bottom:14px}
.cnd-cap-t{font-size:13px;font-weight:600;color:var(--text)}
.cnd-art{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line)}
.cnd-art-t{flex:1;min-width:180px;font-size:13px}
.cnd-art-b{font-size:11.5px;color:var(--text3)}
.cnd-vazio,.cnd-rodape{font-size:12px;color:var(--text3);padding:6px 0}

/* ─── Aparência da organização (adm-config) + estilo no menu do utilizador ─── */
.apar-amb{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--bg2)}
.apar-amb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.apar-amb-head strong{font-size:12.5px}
.apar-amb-dica{font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.apar-tema{margin-left:auto}
.apar-skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.apar-skin{border:1px solid var(--line);border-radius:9px;padding:6px;background:var(--bg1);text-align:center;transition:.12s}
.apar-skin.clicavel{cursor:pointer}
.apar-skin.clicavel:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.apar-skin.on{border-color:var(--cyan);box-shadow:0 0 0 3px var(--ring)}
.apar-prev{border:1px solid;border-radius:7px;overflow:hidden;display:flex;flex-direction:column;gap:3px;padding:4px;height:54px;position:relative}
.apar-prev-top{display:flex;align-items:center;gap:4px;border:1px solid;border-radius:4px;padding:2px 4px}
.apar-prev-card{display:flex;flex-direction:column;gap:2px;border:1px solid;border-radius:4px;padding:3px 4px;flex:1;justify-content:center}
.apar-prev-dark{position:absolute;right:4px;bottom:4px;width:22px;height:14px;border-radius:3px;display:flex;align-items:center;justify-content:center}
.apar-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.apar-tl{display:block;height:3px;border-radius:2px;width:70%}
.apar-tl.curto{width:40%}
.apar-skin-nome{font-size:11px;font-weight:600;margin-top:5px;color:var(--text)}
/* rótulo do eixo dentro do cartão do ambiente: o painel tem DOIS eixos
   (estilo=cor, layout=medida) e sem rótulo lê-se como uma fila só */
.apar-eixo-rot{display:flex;align-items:baseline;gap:6px;font-size:11px;font-weight:700;color:var(--text2);margin:10px 0 6px}
.apar-eixo-rot:first-of-type{margin-top:0}
.apar-eixo-rot span{font-family:var(--font-mono);font-size:9.5px;font-weight:400;color:var(--text3)}
/* preview do LAYOUT: desenha MEDIDAS, não cores — as alturas e os raios vêm
   inline do LAYOUT_PREVIEW (views.js), com a cor neutra da skin em vigor */
.apar-prev-lay{border-color:var(--line2);background:var(--bg)}
.apar-lay-top{background:var(--line3);opacity:.55;flex-shrink:0}
.apar-lay-corpo{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px}
.apar-lay-linha{display:block;background:var(--line3);opacity:.38}
.apar-toggle{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text2);line-height:1.5;border-top:1px solid var(--line);padding-top:10px;margin-top:4px;cursor:pointer}
.apar-toggle input{margin-top:2px}
.sm-seg-skin{flex-wrap:wrap}
/* 3 rótulos com palavra inteira («Confortável») não cabem numa linha do menu */
.sm-seg-layout{flex-wrap:wrap}
.sm-amb{font-family:var(--font-mono);font-size:9.5px;color:var(--text3);padding:2px 12px 6px;line-height:1.5}
.sm-seg.bloqueado{opacity:.5}
.sm-seg.bloqueado button{cursor:not-allowed}
/* matriz de ambientes por widget (página SYSHOME → Widgets) */
.w-cfg-env-boxes{display:flex;gap:10px;align-items:center;padding:6px 0 7px}
.w-cfg-env-boxes label{display:flex;gap:4px;align-items:center;font-size:11.5px;color:var(--text);cursor:pointer}

/* ── guia interativo (assets/guia.js) — os passos do «Como funciona», NO ecrã ──
   véu com furo sobre o alvo + balão; passo «clicar» deixa o alvo clicável
   (furo pointer-events:none) e bloqueia o resto. Tokens da casa, claro+escuro. */
.guia-raiz{position:fixed;inset:0;z-index:320;pointer-events:none}
.guia-blq{position:fixed;background:rgba(15,15,20,.45);pointer-events:auto}
.guia-furo{position:fixed;border-radius:10px;pointer-events:auto;box-shadow:0 0 0 3px var(--cyan);transition:all .22s ease}
.guia-furo.guia-livre{pointer-events:none}
.guia-pulsa{animation:guiaPulsa 1.2s ease-in-out infinite}
@keyframes guiaPulsa{50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){.guia-furo{transition:none}.guia-pulsa{animation:none}}
.guia-balao{position:fixed;pointer-events:auto;max-width:360px;padding:14px 16px;background:var(--bg1);
  color:var(--text);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow-lg);
  font-size:12.5px;line-height:1.5;transition:left .22s,top .22s}
.guia-balao .guia-passo{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:5px;display:flex;align-items:center;gap:8px}
/* ouvir a ajuda (▶⇄⏹) — voz do sistema, leitura em PT para já (guia.js) */
.guia-play{width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;
  background:var(--bg2);color:var(--text2);font-size:9px;line-height:1;display:inline-grid;
  place-items:center;vertical-align:middle;flex:none;padding:0}
.guia-play:hover{border-color:var(--cyan);color:var(--cyan)}
.guia-play.on{background:var(--cyan);border-color:var(--cyan);color:var(--on-accent,#fff)}
.hd-cf-lead{display:flex;align-items:center;gap:8px}
/* ▶ por BLOCO: discreto até ao hover; na leitura fica aceso */
.guia-play-bloco{opacity:.45;margin-right:7px}
.guia-play-bloco.on{opacity:1}
.hd-news:hover .guia-play-bloco,.hd-passo:hover .guia-play-bloco,
.hd-p:hover .guia-play-bloco,.hd-pol:hover .guia-play-bloco{opacity:1}
.hd-p .guia-play-bloco{float:left;margin:1px 8px 0 0}
.hd-news .guia-play-bloco{float:left;margin:2px 8px 0 0}

/* ═══ GAVETA DA AJUDA (06/10) — o mesmo desenho dos painéis novos ═══════════════
   Só aspeto: as novidades e o artigo continuam a nascer FECHADOS (testes do
   colapso). O ▶ de ouvir sai da ponta esquerda (empurrava cada texto) para o
   canto direito e aparece ao passar o rato ou com o foco; no toque fica, discreto.
   Cartões brancos com contorno, títulos a 600, datas na letra da casa, secções
   em letra normal, «Onde clica»/«Resultado» como rótulo e o título da política
   antes do @alias. */
.hd-news,.hd-passo,.hd-pol.big{position:relative;background:var(--bg1);border:1px solid var(--line);border-radius:12px}
.hd-news{padding:11px 40px 11px 14px}
.hd-passo{padding:12px 40px 12px 13px}
.hd-pol.big{padding:12px 40px 12px 14px;display:flex;flex-direction:column}
.hd-news:hover,.hd-passo:hover{border-color:var(--line2)}
.hd-news .guia-play-bloco,.hd-passo .guia-play-bloco,.hd-pol.big .guia-play-bloco,.hd-p .guia-play-bloco{
  position:absolute;top:10px;right:10px;float:none;margin:0;opacity:0;transition:opacity .12s}
.hd-p{position:relative}
.hd-p .guia-play-bloco{top:0;right:-4px}
:is(.hd-news,.hd-passo,.hd-pol.big,.hd-p):is(:hover,:focus-within) .guia-play-bloco,
.guia-play-bloco:focus-visible,.guia-play-bloco.on{opacity:1}
@media (hover:none){ .guia-play-bloco{opacity:.55} }
.hd-news-head{font-size:13px}
.hd-news-head strong{font-weight:600;line-height:1.35}
.hd-news-data,.hd-news-meta{font-family:var(--font-ui);font-size:11px;letter-spacing:0}
.hd-sec{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text2);
  border-top:1px solid var(--line);margin:18px 0 10px;padding-top:14px}
.hd-body > .hd-sec:first-child,.hd-body > :first-child > .hd-sec:first-child{border-top:0;margin-top:0;padding-top:0}   /* a 1.ª secção não leva traço: colava uma faixa vazia ao topo */
.hd-passo-rot{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--text3);background:none;border:0;padding:0;min-width:70px}
.hd-pol.big .hd-pol-t{order:1;margin-top:0;font-size:13px}
.hd-pol.big .hd-pol-b{order:2;color:var(--text2);font-size:12px}
.hd-pol.big .policy-alias{order:3;align-self:flex-start;margin-top:7px}
.hd-pol.big:hover{border-color:var(--acc-bd);background:var(--bg1)}
.guia-balao h4{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:0 0 5px}
.guia-balao p{margin:0 0 8px;color:var(--text2)}
.guia-balao .guia-clica{font-weight:700;color:var(--text)}
.guia-l{display:flex;gap:8px;margin:0 0 6px;font-size:12px;color:var(--text2)}
.guia-rot{flex:none;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);padding-top:2px;min-width:64px}
.guia-pontos{display:flex;gap:5px;margin:4px 0 10px}
.guia-pontos i{width:7px;height:7px;border-radius:50%;background:var(--bg4,var(--line2))}
.guia-pontos i.ok{background:var(--line3,var(--text3))}
.guia-pontos i.on{background:var(--cyan)}
.guia-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.guia-adia{margin-left:auto;border:0;background:none;cursor:pointer;font:inherit;font-size:11.5px;
  color:var(--text3);text-decoration:underline;padding:4px 2px}
.guia-adia:hover{color:var(--text2)}
/* «Não voltar a mostrar» (06/10): por baixo dos botões, discreto — desliga o
   arranque sozinho do guia em todas as páginas (volta a ligar-se no menu do
   utilizador → «Guia nas páginas novas») */
.guia-nunca{display:block;margin:10px 0 0 auto;border:0;background:none;cursor:pointer;font:inherit;font-size:11px;
  color:var(--text3);padding:0}
.guia-nunca:hover{color:var(--text2);text-decoration:underline}
/* a info ancorada ao ? fixo quando se fecha o guia («podes sempre reativar aqui») */
.guia-fab-info{position:fixed;z-index:320;max-width:min(300px,calc(100vw - 90px));padding:9px 12px;
  background:var(--text);color:var(--bg1);border-radius:10px;font-size:12px;line-height:1.5;cursor:pointer;
  box-shadow:var(--shadow-lg)}
.guia-fab-info::after{content:'';position:absolute;right:-6px;bottom:12px;width:0;height:0;
  border:6px solid transparent;border-left-color:var(--text);border-right:0}
/* o botão da tab «Como funciona» que segue os passos no ecrã */
.guia-cf-seguir{margin:0 0 12px}

/* ═══════════════════════════════════════════════════════════════════════════
   CONCEITO DO MÓDULO (03/08) — a superfície das três portas.

   Telmo: «abrir em janela (…) assim quem quiser saber o conceito do módulo e
   perceber antes de configurar tem toda a informação, mais que a ajuda».

   Porque é uma JANELA CENTRADA e não uma gaveta como a do `?`: a gaveta tem
   600px e serve para consultar ao lado do trabalho; o conceito lê-se de uma
   ponta à outra e é a única coisa no ecrã enquanto se lê. Os 860px dão duas
   colunas de cartões com 400px cada — chega para uma valia em três linhas
   (com 600px ficava uma coluna e o texto ganhava o dobro da altura).

   Tudo por TOKEN, com fallback (Convenção §10): esta folha é a do shell, mas o
   mesmo desenho tem de servir claro, escuro e as skins.
   ═══════════════════════════════════════════════════════════════════════════ */
.conceito-bg{position:fixed;inset:0;background:var(--dim);z-index:340;display:none;
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
.conceito-bg.on{display:flex;align-items:center;justify-content:center;padding:28px}
.conceito-win{
  width:860px;max-width:100%;max-height:100%;
  background:var(--bg1,#fff);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
  animation:cnIn .2s ease-out;
}
@keyframes cnIn{from{transform:translateY(14px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.cn-head{display:flex;align-items:flex-start;gap:10px;padding:18px 22px 14px;
  border-bottom:1px solid var(--line);flex-shrink:0}
.cn-head-txt{flex:1;min-width:0}
.cn-eyebrow{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text3)}
.cn-head h2{font-family:var(--font-display);font-size:21px;font-weight:800;
  letter-spacing:-.3px;margin-top:3px;color:var(--text)}
.cn-head-acoes{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cn-body{flex:1;overflow-y:auto;padding:20px 22px 24px}

/* a mensagem: é o que se lê primeiro e às vezes o único que se lê */
.cn-lead{padding:16px 18px;border-radius:12px;background:var(--cyan-soft,#eef5fd);
  border:1px solid var(--acc-bd,#c9dff6)}
.cn-titulo{font-family:var(--font-display);font-size:16px;font-weight:750;
  color:var(--text);line-height:1.35;margin:0 0 7px}
.cn-frase{font-size:14px;line-height:1.6;color:var(--text2);margin:0}
.cn-p{font-size:13px;color:var(--text2);line-height:1.68;margin:0 0 9px}
.cn-porque .cn-p:last-child{margin-bottom:0}

.cn-sec{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text3);margin:22px 0 10px;padding-top:14px;
  border-top:1px dashed var(--line)}

.cn-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.cn-card{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.cn-card-t{font-size:13px;font-weight:650;color:var(--text);line-height:1.35;margin-bottom:5px}
.cn-card-b{font-size:12.5px;color:var(--text2);line-height:1.6}
/* uma risca de cor por família: a valia é o que se ganha, o exemplo é a prova */
.cn-card.cn-valia{border-left:3px solid var(--green,#1d8a45)}
.cn-card.cn-exemplo{border-left:3px solid var(--cyan,#0071e3);background:var(--bg1,#fff)}

/* antes → agora: é a forma de dizer o que ficou automático sem explicar COMO */
.cn-autos{display:flex;flex-direction:column;gap:9px}
.cn-auto{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.cn-auto-par{display:grid;grid-template-columns:1fr 20px 1fr;gap:8px;align-items:start}
.cn-antes,.cn-depois{display:flex;flex-direction:column;gap:3px;font-size:12.5px;
  color:var(--text2);line-height:1.55}
.cn-rot{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3)}
.cn-depois{color:var(--text)}
.cn-depois .cn-rot{color:var(--green,#1d8a45)}
.cn-seta{display:flex;align-items:center;justify-content:center;color:var(--text3);padding-top:14px}
.cn-seta svg{width:14px;height:14px}

.cn-fonte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cn-fonte li{font-size:12px;color:var(--text2);line-height:1.55;padding-left:13px;position:relative}
.cn-fonte li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--line3,#aeaeb2)}
.cn-quando{font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.cn-aviso{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:10.5px;
  color:var(--gold,#b25a00)}

.cn-pe{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:13px;
  border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.cn-pe .cn-ir-ajuda{margin-left:auto;font-family:var(--font-ui)}

/* A 3.ª PORTA — o ícone ao lado do ícone do módulo (assets/conceito.js).
   No tile do launcher fica no canto, sobre o ícone; na barra do módulo embebido
   fica em linha, ao lado do nome. É o MESMO botão nos dois sítios (uma classe),
   e é o `title` que ensina o gesto a quem nunca lá carregou. */
.cn-porta{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border-radius:7px;cursor:pointer;
  border:1px solid var(--line2);background:var(--bg1,#fff);color:var(--text3);transition:.12s;
}
.cn-porta:hover{color:var(--cyan,#0071e3);border-color:var(--acc-bd,#c9dff6);background:var(--cyan-soft,#eef5fd)}
.launcher-tile .cn-porta{position:absolute;top:8px;right:8px;opacity:0}
.launcher-tile:hover .cn-porta,.launcher-tile .cn-porta:focus-visible{opacity:1}
.module-embed-bar .cn-porta{margin-left:8px;flex-shrink:0}

/* ≤900px: uma coluna, e a janela ocupa o ecrã (nos telemóveis o conceito é a
   página, não uma janela por cima de outra) */
@media (max-width:900px){
  .conceito-bg.on{padding:0}
  .conceito-win{width:100%;height:100%;max-height:100%;border-radius:0;border:0}
  .cn-cards{grid-template-columns:1fr}
  .cn-auto-par{grid-template-columns:1fr;gap:6px}
  .cn-seta{padding-top:0;justify-content:flex-start;transform:rotate(90deg)}
}

/* 1.ª porta do conceito, no TOPO do «Como funciona» (help.js). Reaproveita o
   `.hd-pol` (a linha clicável da gaveta) e ganha só o destaque de estar em
   primeiro — a pergunta «para que serve isto?» vem antes de «por onde começo?». */
.hd-cn-porta{margin-bottom:14px;border-color:var(--acc-bd,#c9dff6);background:var(--cyan-soft,#eef5fd)}
.hd-cn-porta span{font-weight:650;color:var(--text)}
.hd-cn-porta svg{color:var(--cyan,#0071e3)}
/* o codigo e o nome do modulo no estado vazio do conceito. Vao em <span> proprios
   porque o SysI18N casa por NO DE TEXTO INTEIRO — colados a frase, ela nunca
   casaria com o dicionario e o vazio ficava em PT dentro do EN. */
.cn-mod{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:var(--text3);margin-bottom:4px}
.cn-mod-nome{color:var(--text3)}
/* Definições (07/10/2026): cada tópico diz que páginas tem */
.def-topicos .def-topico-paginas{font-size:11.5px;color:var(--text3);margin:-2px 0 8px;line-height:1.45}
.dept-grid.def-topicos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dept-grid.def-topicos>.area-card{width:auto;max-width:none;flex:none}
@media (max-width:1100px){.dept-grid.def-topicos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dept-grid.def-topicos{grid-template-columns:1fr}}