/* SYSTEC F4b/F5 — estilos do modo kiosk (T4bis) e da assistência remota (T5).
   Theme-aware: só tokens do shell (assets/tokens.css), que já mudam sozinhos
   com html[data-theme="dark"] e com a skin. Carregado por 1 <link> no index.html.

   07/10/2026 — saíram o @media (prefers-color-scheme: dark) e os overrides com
   hex do modal de consentimento: com o SO em escuro e a app em claro, o @media
   pintava os <p> a #cbd5e1 sobre o cartão branco que o override [data-theme=
   "light"] repunha — texto quase ilegível. Quem manda no tema é o data-theme da
   app, nunca o do SO; e o cartão usava --surface/--border, que nem existem nos
   tokens (valia sempre o fallback claro). O acento #0a8f86 à mão passou a
   --cyan + --on-accent (a tinta por cima do acento, que nos temas escuros não é
   branca — tokens.css §2). */

/* ── Kiosk (T4bis): ecrã gerido sem sessão pessoal ─────────────────────────── */
/* window.SyscoreKioskGuard(true) marca body.kiosk; escondemos a barra pessoal
   (menu de utilizador, favoritos, 2.º monitor, chat/notif/tarefas/correio) — a
   salvaguarda real é o login remoto de baixo privilégio; isto é cosmético. */
body.kiosk .user-pill,
body.kiosk #topFavBtn,
body.kiosk #topSendBtn,
body.kiosk #topBtnChat,
body.kiosk #topBtnNotif,
body.kiosk #topBtnTasks,
body.kiosk #topBtnPolicies,
body.kiosk #mailWrap,
body.kiosk .launcher-btn,
body.kiosk .mobile-menu-btn,
body.kiosk #cmdkBtn { display: none !important; }
body.kiosk .status-menu { display: none !important; }

/* ── Badge de sessão partilhada (anfitrião) ────────────────────────────────── */
.systec-share-badge {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  margin: 0 8px; padding: 4px 10px; border-radius: 999px;
  background: var(--cyan); color: var(--on-accent, #fff); font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); white-space: nowrap;
}
.systec-share-badge .ssb-eye { font-size: 13px; }
.systec-share-badge button {
  border: 0; cursor: pointer; color: inherit;
  background: color-mix(in srgb, var(--on-accent, #fff) 22%, transparent);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600;
}
.systec-share-badge button:hover { background: color-mix(in srgb, var(--on-accent, #fff) 40%, transparent); }
.systec-share-badge button:focus-visible { outline: 2px solid var(--on-accent, #fff); outline-offset: 1px; }
/* «Sem ligação ao servidor» — só aparece depois de várias falhas seguidas do
   polling (systec-assistencia.js, POLL_FALHAS_AVISO). A sessão NÃO se desmonta. */
.systec-share-badge .ssb-aviso { display: none; align-items: center; gap: 4px; font-weight: 500; }
.systec-share-badge.ssb-sem-ligacao .ssb-aviso { display: inline-flex; }

/* Telemóvel (≤640px): o JS tira o badge da topbar e põe-no no <body> com esta
   classe — uma pastilha fixa (👁 + ⚠ + Terminar) logo abaixo da topbar, por
   cima do menu em overlay. A topbar a 375–390 px não tem folga, e o «Terminar»
   é a garantia de consentimento: nunca pode ficar fora do ecrã. */
.systec-share-badge--fixa {
  position: fixed; z-index: 99998;
  top: calc(var(--h-topbar, 52px) + 8px); left: 50%; transform: translateX(-50%);
  margin: 0; max-width: calc(100vw - 32px);
}
.systec-share-badge--fixa .ssb-txt,
.systec-share-badge--fixa .ssb-aviso-txt { display: none; }
.systec-share-badge--fixa button { padding: 4px 12px; font-size: 12px; }   /* alvo de toque maior */
/* rede de segurança: se por alguma razão ficar na topbar num ecrã estreito */
@media (max-width: 640px) {
  .topbar .systec-share-badge .ssb-txt,
  .topbar .systec-share-badge .ssb-aviso-txt { display: none; }
}

/* ── Modal de consentimento (anfitrião) ────────────────────────────────────── */
.systec-consent-scrim {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center;
}
.systec-consent-card {
  width: min(440px, 92vw); background: var(--bg1); color: var(--text);
  border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 18px 60px rgba(0,0,0,.35);
  border: 1px solid var(--line);
}
.systec-consent-card h3 { margin: 0 0 6px; font-size: 17px; }
.systec-consent-card .scc-modo {
  display: inline-block; margin: 2px 0 10px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--cyan-soft); color: var(--cyan);
}
.systec-consent-card p { margin: 8px 0; font-size: 13.5px; line-height: 1.5; color: var(--text2); }
.systec-consent-card .scc-nota { font-size: 12px; color: var(--text3); }
.systec-consent-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.systec-consent-actions button {
  border-radius: 9px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.systec-consent-actions .scc-nao { background: transparent; border-color: var(--line); color: var(--text); }
.systec-consent-actions .scc-sim { background: var(--cyan); color: var(--on-accent, #fff); }
.systec-consent-actions .scc-sim:hover { background: var(--cyan2); }

/* ── Cursor-fantasma do assistente (modo apontar) ──────────────────────────── */
.systec-ghost-cursor {
  position: fixed; z-index: 99999; pointer-events: none; transform: translate(-2px, -2px);
  transition: left .06s linear, top .06s linear; will-change: left, top;
  color: var(--cyan);   /* o SVG pinta com fill=currentColor */
}
.systec-ghost-cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.systec-ghost-cursor .sgc-lbl {
  position: absolute; left: 16px; top: 12px; white-space: nowrap;
  background: var(--cyan); color: var(--on-accent, #fff); font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}