/* ============================================================
   IntelliPortal — Design System
   Camadas: reset → tokens → base → layout → components → utils
   ============================================================ */
@layer reset, tokens, base, layout, components, utilities;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"] { list-style: none; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
  ::selection { background: color-mix(in oklab, var(--brand) 30%, transparent); }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* brand — paleta IntelliComm (blocos do logotipo) */
    --c-blue: #0076be;
    --c-green: #00b33f;
    --c-red: #ee3326;
    --c-amber: #ffb131;
    --c-silver: #6b7785;

    --brand-h: 244;
    --brand: #0076be;
    --brand-strong: #005e99;
    --brand-soft: #e7f3fb;
    --accent: var(--c-amber);
    /* gradiente "pinwheel" com as 4 cores da marca */
    --brand-wheel: conic-gradient(from 140deg,
      var(--c-green) 0deg 90deg,
      var(--c-red) 90deg 180deg,
      var(--c-blue) 180deg 270deg,
      var(--c-amber) 270deg 360deg);

    /* neutrals (light) — fundo cinza-azulado de propósito (não branco puro),
       cards mais claros que o fundo pra criar profundidade sem depender só
       de sombra. Diferença fundo↔card mais acentuada que um "quase branco".
       2026-09-15: Bruce pediu um off-white mais perceptível nos cards/
       superfícies (antes quase branco puro, 0.99) — branco puro cansa a
       vista em uso prolongado. Ajuste "moderado": visivelmente menos claro,
       mas ainda neutro (mesma tonalidade fria 250, nem cinza nem creme) —
       não precisou mexer na logo, o contraste do texto navy continua ótimo. */
    --bg: oklch(0.915 0.01 250);
    --surface: oklch(0.965 0.006 250);
    --surface-2: oklch(0.94 0.009 250);
    --surface-3: oklch(0.905 0.011 250);
    --border: oklch(0.83 0.01 250);
    --border-strong: oklch(0.74 0.014 250);
    --text: oklch(0.28 0.02 260);
    --text-soft: oklch(0.5 0.02 260);
    --text-faint: oklch(0.62 0.02 260);

    /* status (alinhadas à paleta da marca) */
    --ok: #00a53a;
    --warn: #e69200;
    --danger: #e5372a;
    --info: var(--c-blue);

    /* severidade — mesmo vocabulario dos badges (ok/warn/danger), usado pra
       colorir cards/linhas conforme grau de urgencia (prazo, status etc.) */
    --sev-ok: var(--ok);
    --sev-warn: var(--warn);
    --sev-danger: var(--danger);

    --focus: var(--brand);

    /* radius */
    --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

    /* spacing scale */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
    --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* typography */
    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
    --fs-xs: 0.75rem; --fs-sm: 0.825rem; --fs-md: 0.925rem;
    --fs-lg: 1.075rem; --fs-xl: 1.35rem; --fs-2xl: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);

    /* elevation */
    --shadow-xs: 0 1px 2px oklch(0.4 0.03 260 / 0.06);
    --shadow-sm: 0 1px 3px oklch(0.4 0.03 260 / 0.08), 0 1px 2px oklch(0.4 0.03 260 / 0.06);
    --shadow-md: 0 6px 16px -4px oklch(0.4 0.03 260 / 0.12), 0 2px 6px -2px oklch(0.4 0.03 260 / 0.08);
    --shadow-lg: 0 24px 48px -12px oklch(0.35 0.04 260 / 0.22);

    --sidebar-w: 274px;
    --topbar-h: 62px;
    --ring: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    /* diz ao navegador o tema das UIs nativas (barra de rolagem, selects,
       date pickers). Sem isso, com o SO no escuro e o portal no tema claro,
       a barra de rolagem sai escura. */
    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --brand: #3aa1da;
      --brand-strong: #6bbde8;
      --brand-soft: #103048;
      --accent: #ffbe52;

      --bg: oklch(0.19 0.014 265);
      --surface: oklch(0.23 0.016 265);
      --surface-2: oklch(0.26 0.017 265);
      --surface-3: oklch(0.3 0.018 265);
      --border: oklch(0.34 0.016 265);
      --border-strong: oklch(0.44 0.02 265);
      --text: oklch(0.94 0.008 265);
      --text-soft: oklch(0.76 0.015 265);
      --text-faint: oklch(0.62 0.015 265);

      --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.3);
      --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.4);
      --shadow-md: 0 8px 20px -6px oklch(0 0 0 / 0.5);
      --shadow-lg: 0 28px 56px -16px oklch(0 0 0 / 0.62);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --brand: #3aa1da;
    --brand-strong: #6bbde8;
    --brand-soft: #103048;
    --accent: #ffbe52;
    --bg: oklch(0.19 0.014 265);
    --surface: oklch(0.23 0.016 265);
    --surface-2: oklch(0.26 0.017 265);
    --surface-3: oklch(0.3 0.018 265);
    --border: oklch(0.34 0.016 265);
    --border-strong: oklch(0.44 0.02 265);
    --text: oklch(0.94 0.008 265);
    --text-soft: oklch(0.76 0.015 265);
    --text-faint: oklch(0.62 0.015 265);
    --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.4);
    --shadow-md: 0 8px 20px -6px oklch(0 0 0 / 0.5);
    --shadow-lg: 0 28px 56px -16px oklch(0 0 0 / 0.62);
  }

  /* Cor de destaque do tema, por usuário (pedido do Bruce, 2026-10-08) —
     "sempre degrade": como todo elemento de marca (botão primário, avatar,
     banner do perfil, barra de progresso etc.) já usa
     `linear-gradient(135deg, var(--brand), var(--accent))`, só redefinir
     --brand/--accent aqui já re-colore o Portal inteiro em degradê, sem
     mexer em mais nenhuma regra. Sem preferência (sem `data-accent` no
     <html>, ver base.ejs) continua o azul padrão de sempre, acima.
     --brand-strong/--brand-soft/--accent sempre derivados da MESMA cor
     validada da marca (--c-red/--c-green/--c-amber/--c-silver) via
     color-mix, nunca hex novo inventado (ver ARQUITETURA.md / boards.service.js
     sobre "nunca inventa cor nova"). */
  :root[data-accent="red"] {
    --brand: var(--c-red);
    --brand-strong: color-mix(in oklab, var(--c-red) 80%, black);
    --brand-soft: color-mix(in oklab, var(--c-red) 10%, white);
    --accent: color-mix(in oklab, var(--c-red) 55%, white);
  }
  :root[data-accent="green"] {
    --brand: var(--c-green);
    --brand-strong: color-mix(in oklab, var(--c-green) 80%, black);
    --brand-soft: color-mix(in oklab, var(--c-green) 10%, white);
    --accent: color-mix(in oklab, var(--c-green) 55%, white);
  }
  :root[data-accent="gold"] {
    /* ouro um pouco mais escuro que --c-amber puro no claro, pra manter
       contraste legível com texto branco em botão/avatar — o amarelo claro
       da marca sozinho fica fraco demais nesses usos. */
    --brand: color-mix(in oklab, var(--c-amber) 80%, black);
    --brand-strong: color-mix(in oklab, var(--c-amber) 62%, black);
    --brand-soft: color-mix(in oklab, var(--c-amber) 12%, white);
    --accent: var(--c-amber);
  }
  :root[data-accent="silver"] {
    --brand: var(--c-silver);
    --brand-strong: color-mix(in oklab, var(--c-silver) 78%, black);
    --brand-soft: color-mix(in oklab, var(--c-silver) 10%, white);
    --accent: color-mix(in oklab, var(--c-silver) 55%, white);
  }

  @media (prefers-color-scheme: dark) {
    :root[data-accent="red"]:not([data-theme="light"]) {
      --brand: color-mix(in oklab, var(--c-red) 75%, white);
      --brand-strong: color-mix(in oklab, var(--c-red) 90%, white);
      --brand-soft: color-mix(in oklab, var(--c-red) 22%, black);
      --accent: color-mix(in oklab, var(--c-red) 55%, white);
    }
    :root[data-accent="green"]:not([data-theme="light"]) {
      --brand: color-mix(in oklab, var(--c-green) 75%, white);
      --brand-strong: color-mix(in oklab, var(--c-green) 90%, white);
      --brand-soft: color-mix(in oklab, var(--c-green) 22%, black);
      --accent: color-mix(in oklab, var(--c-green) 55%, white);
    }
    :root[data-accent="gold"]:not([data-theme="light"]) {
      --brand: var(--c-amber);
      --brand-strong: color-mix(in oklab, var(--c-amber) 85%, white);
      --brand-soft: color-mix(in oklab, var(--c-amber) 22%, black);
      --accent: color-mix(in oklab, var(--c-amber) 60%, white);
    }
    :root[data-accent="silver"]:not([data-theme="light"]) {
      --brand: color-mix(in oklab, var(--c-silver) 75%, white);
      --brand-strong: color-mix(in oklab, var(--c-silver) 90%, white);
      --brand-soft: color-mix(in oklab, var(--c-silver) 22%, black);
      --accent: color-mix(in oklab, var(--c-silver) 55%, white);
    }
  }
  :root[data-accent="red"][data-theme="dark"] {
    --brand: color-mix(in oklab, var(--c-red) 75%, white);
    --brand-strong: color-mix(in oklab, var(--c-red) 90%, white);
    --brand-soft: color-mix(in oklab, var(--c-red) 22%, black);
    --accent: color-mix(in oklab, var(--c-red) 55%, white);
  }
  :root[data-accent="green"][data-theme="dark"] {
    --brand: color-mix(in oklab, var(--c-green) 75%, white);
    --brand-strong: color-mix(in oklab, var(--c-green) 90%, white);
    --brand-soft: color-mix(in oklab, var(--c-green) 22%, black);
    --accent: color-mix(in oklab, var(--c-green) 55%, white);
  }
  :root[data-accent="gold"][data-theme="dark"] {
    --brand: var(--c-amber);
    --brand-strong: color-mix(in oklab, var(--c-amber) 85%, white);
    --brand-soft: color-mix(in oklab, var(--c-amber) 22%, black);
    --accent: color-mix(in oklab, var(--c-amber) 60%, white);
  }
  :root[data-accent="silver"][data-theme="dark"] {
    --brand: color-mix(in oklab, var(--c-silver) 75%, white);
    --brand-strong: color-mix(in oklab, var(--c-silver) 90%, white);
    --brand-soft: color-mix(in oklab, var(--c-silver) 22%, black);
    --accent: color-mix(in oklab, var(--c-silver) 55%, white);
  }
}

/* ---------- BASE ---------- */
@layer base {
  body {
    font-family: var(--font);
    font-size: var(--fs-md);
    color: var(--text);
    background: var(--bg);
  }
  h1, h2, h3, h4 { line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
  a.link { color: var(--brand-strong); font-weight: 550; }
  a.link:hover { text-decoration: underline; }
  small { font-size: var(--fs-xs); }
  code, kbd { font-family: var(--font-mono); font-size: 0.85em; }
  ::placeholder { color: var(--text-faint); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 100dvh;
  }

  .sidebar {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, var(--surface)) 0%, var(--surface) 240px);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: var(--sp-4);
    gap: var(--sp-2);
  }
  .sidebar__brand {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2) var(--sp-4);
    font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.02em;
  }
  .sidebar__mark {
    display: block; flex: none;
    width: 36px; height: 36px; border-radius: var(--r-md);
    object-fit: cover; box-shadow: var(--shadow-sm);
  }
  .nav-group { margin-top: var(--sp-3); }
  .nav-group__label {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-faint); padding: var(--sp-2) var(--sp-2) var(--sp-1); font-weight: 600;
  }
  .nav-link {
    position: relative;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    color: var(--text-soft); font-weight: 530; font-size: var(--fs-sm);
    transition: background var(--transition), color var(--transition), transform var(--transition);
  }
  .nav-link svg { width: 18px; height: 18px; flex: none; opacity: 0.85; transition: transform var(--transition), opacity var(--transition); }
  .nav-link:hover { background: var(--surface-2); color: var(--text); transform: translateX(3px); }
  .nav-link:hover svg { opacity: 1; transform: scale(1.1); }

  /* item de menu visivel mas sem permissao — nao e mais um <a> (sem href,
     nao navega pra lugar nenhum), so o cadeado + tooltip avisando */
  .nav-link--locked { opacity: 0.55; cursor: not-allowed; }
  .nav-link--locked:hover { background: color-mix(in oklab, var(--danger) 10%, transparent); color: var(--text-soft); transform: none; }
  .nav-link--locked:hover svg { opacity: 0.85; transform: none; }
  .nav-link__lock { margin-left: auto; flex: none; display: flex; opacity: 0.8; }
  .nav-link__lock svg { width: 13px; height: 13px; }
  /* Emoji no lugar do ícone de linha, no mesmo tamanho (ex.: 🧮 Tributário). */
  .nav-link__emoji { width: 18px; flex: none; display: inline-flex; justify-content: center; font-size: 16px; line-height: 1; }
  /* Item que abre outro sistema em nova aba (ex.: Tributário / IntelliAudit). */
  .nav-link__external { margin-left: auto; flex: none; display: flex; opacity: 0.55; }
  .nav-link__external svg { width: 12px; height: 12px; }
  .nav-link[aria-current="page"] {
    background: color-mix(in oklab, var(--brand) 14%, transparent);
    color: var(--brand-strong); font-weight: 620;
  }
  .nav-link[aria-current="page"] svg { opacity: 1; }
  /* traço de destaque que "acende" na aba ativa */
  .nav-link[aria-current="page"]::before {
    content: ""; position: absolute; left: 2px; top: 22%; bottom: 22%; width: 3px;
    border-radius: 99px; background: var(--brand);
    animation: nav-accent-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes nav-accent-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
  .sidebar__foot { margin-top: auto; padding-top: var(--sp-4); }
  .nav-link--block { width: 100%; }

  .main { grid-row: 1; display: flex; flex-direction: column; overflow: hidden; }
  .topbar {
    height: var(--topbar-h); flex: none;
    display: flex; align-items: center; gap: var(--sp-4);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--surface) 82%, transparent);
    backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 20;
  }
  .topbar__title { font-weight: 620; font-size: var(--fs-lg); }
  /* Estrela de favorito ao lado do título (2026-10-19): vazia por padrão,
     preenchida na cor do tema quando a página é favorita. */
  .fav-toggle { margin-left: 2px; color: var(--text-faint); }
  .fav-toggle:hover { color: var(--brand); }
  .fav-toggle.is-active { color: var(--brand); }
  .fav-toggle.is-active svg { fill: currentColor; }

  /* "Meus favoritos" no Painel. */
  .fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-2); }
  .fav-tile {
    position: relative; display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
    padding: 10px 34px 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 560;
    transition: border-color var(--transition), background var(--transition);
  }
  .fav-tile:hover { border-color: var(--brand); background: var(--brand-soft); }
  .fav-tile__icon { flex: none; display: inline-flex; color: var(--brand); }
  .fav-tile__icon svg { width: 18px; height: 18px; }
  .fav-tile__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fav-tile__remove {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: inline-flex; padding: 4px; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity var(--transition);
  }
  .fav-tile__remove svg { width: 14px; height: 14px; }
  .fav-item:hover .fav-tile__remove, .fav-tile__remove:focus-visible { opacity: 1; }
  .fav-tile__remove:hover { color: var(--c-red); background: var(--surface-2); }
  .fav-item { position: relative; }
  @media (hover: none) { .fav-tile__remove { opacity: 1; } }
  .topbar__spacer { flex: 1; }

  .content { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-5); }
  .container {
    max-width: 1160px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-5);
    animation: content-in 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  /* paginas tipo "app dentro do app" (hoje só o Chat do Atendimento) pedem
     mais espaço que o normal — usa a largura E altura quase inteiras do
     .content (só não invade topbar/sidebar), bem mais perto do Digisac
     original (edge-to-edge, sem moldura de página). Margem negativa cancela
     o padding fixo do .content (32px/24px) e devolve uma respiradinha
     pequena (12px) só pra não ficar colado na borda da janela. */
  /* especificidade composta (.container.container--full) de proposito — mais
     abaixo no arquivo (linha ~1140) tem um SEGUNDO ".container { max-width:
     1200px }" de um bloco de polimento visual; com a mesma especificidade,
     aquele vence só por vir depois no arquivo. Isso aqui garante que o
     full-bleed sempre ganha, não importa a ordem. */
  .container.container--full {
    max-width: none;
    margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5));
    padding: var(--sp-3);
    height: calc(100vh - var(--topbar-h) - 2 * var(--sp-3));
    gap: 0;
  }
  @keyframes content-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  .page-head { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
  .page-head__text { flex: 1; min-width: 240px; }
  .page-head p { color: var(--text-soft); margin-top: var(--sp-1); }
  .page-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  /* Selo de ícone ao lado do título (pedido do Bruce, 2026-10-06: "css muito
     simples" em Projetos/Clientes/Comercial/Financeiro) — mesma linguagem
     visual do .kpi__icon (quadrado colorido, ícone da marca), só maior. */
  .page-head__icon {
    width: 46px; height: 46px; border-radius: var(--r-md); flex: none; align-self: center;
    display: grid; place-items: center;
    background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 20%, transparent), color-mix(in oklab, var(--accent) 16%, transparent));
    color: var(--brand);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35), var(--shadow-xs);
  }
  .page-head__icon svg { width: 23px; height: 23px; }
  :root:not([data-theme="light"]) .page-head__icon,
  :root[data-theme="dark"] .page-head__icon { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), var(--shadow-xs); }

  .grid { display: grid; gap: var(--sp-4); }
  .grid--kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

  /* mobile */
  .sidebar-toggle { display: none; }
  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
      position: fixed; inset: 0 auto 0 0; width: min(84vw, var(--sidebar-w));
      z-index: 60; transform: translateX(-102%); transition: transform var(--transition);
      box-shadow: var(--shadow-lg);
    }
    .app.nav-open .sidebar { transform: none; }
    .app.nav-open::after {
      content: ""; position: fixed; inset: 0; background: oklch(0 0 0 / 0.4); z-index: 50;
    }
    .sidebar-toggle { display: inline-grid; }
  }

  /* menu no topo (data-nav-layout="top", preferencia por navegador via
     localStorage — data-nav-layout-toggle em app.js). So se aplica em telas
     largas; abaixo de 900px sempre volta pro menu lateral off-canvas, um
     menu horizontal nao caberia com o numero de itens do app. */
  @media (min-width: 901px) {
    .app[data-nav-layout="top"] {
      /* minmax(0, 1fr), não só 1fr — uma trilha "1fr" sozinha não encolhe
       * abaixo do min-content do que tem dentro (mesma pegadinha clássica
       * de grid), e como a navegação tem muito item, isso empurrava a
       * PÁGINA INTEIRA pra largura maior que a viewport em vez de só
       * rolar a faixa de navegação. */
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto 1fr;
    }
    .app[data-nav-layout="top"] .sidebar {
      grid-row: 1;
      flex-direction: row;
      align-items: center;
      height: var(--topbar-h);
      padding: 0 var(--sp-4);
      gap: var(--sp-5);
      border-right: none;
      border-bottom: 1px solid var(--border);
      overflow: visible;
      background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 10%, var(--surface)) 0%, var(--surface) 340px);
    }
    .app[data-nav-layout="top"] .sidebar__brand { padding: 0; flex: none; }
    /* Bug achado 2026-10-08: faltava isto — sem o container dos grupos virar
       flex na horizontal, cada grupo (já flex por conta própria) ficava
       empilhado por cima do outro (herdava o bloco vertical do modo
       lateral), sobrepondo o conteúdo da página. Essa era a causa real do
       menu "bagunçado" que o Bruce reportou, não só estilo.
       A rolagem horizontal fica só NESTA faixa (não na .sidebar inteira) —
       assim a logo e o usuário/sair ficam sempre fixos nas pontas, só o
       meio rola quando os itens não cabem. */
    /* Nota: NÃO usar mask-image aqui — faz o navegador tratar este elemento
       como "containing block" de qualquer descendente position:fixed
       (mesma categoria de transform/filter/will-change), o que prendia o
       painel do submenu (.nav-sub) dentro dos 62px da faixa, cortado.
       Descoberto depurando o menu "bagunçado" reportado pelo Bruce,
       2026-10-08 — se for reaproveitar a ideia do fade nas bordas, fazer
       via pseudo-elemento separado em cima de `.sidebar` (sem mask), nunca
       direto no elemento que rola E que tem filho position:fixed. */
    .app[data-nav-layout="top"] .sidebar__nav {
      display: flex; flex-direction: row; align-items: center; gap: 0; flex: 1 1 auto; min-width: 0;
      height: 100%; overflow-x: auto; overflow-y: hidden;
      scrollbar-width: thin;
    }
    .app[data-nav-layout="top"] .nav-group {
      margin-top: 0; display: flex; align-items: center; gap: var(--sp-1); flex: none;
      padding-left: var(--sp-3); border-left: 1px solid var(--border); height: 100%;
    }
    .app[data-nav-layout="top"] .nav-group:first-of-type { padding-left: 0; border-left: none; }
    .app[data-nav-layout="top"] .nav-group__label { display: none; }
    .app[data-nav-layout="top"] .nav-link { padding: var(--sp-2) var(--sp-3); white-space: nowrap; }
    .app[data-nav-layout="top"] .nav-link:hover { transform: translateY(-1px); }
    .app[data-nav-layout="top"] .nav-link[aria-current="page"]::before {
      left: 14%; right: 14%; top: auto; bottom: 0; height: 2px; width: auto;
    }
    /* Submenu (.nav-sub) vira painel flutuante (position:fixed, posição
       calculada em app.js no toggle) em vez de empurrar o conteúdo pra
       baixo — overflow-x:auto na .sidebar corta qualquer position:absolute
       interno (overflow-x≠overflow-y "visible" vira auto nos dois eixos,
       regra do próprio CSS), só position:fixed escapa do corte. */
    .app[data-nav-layout="top"] .nav-parent > summary::after { content: none; }
    .app[data-nav-layout="top"] .nav-sub {
      position: fixed; flex-direction: column; gap: 1px; margin: 0; padding: var(--sp-2);
      min-width: 220px; max-width: 280px;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
      box-shadow: var(--shadow-lg); z-index: 1000;
    }
    .app[data-nav-layout="top"] .nav-sub::before { display: none; }
    .app[data-nav-layout="top"] .nav-link--sub {
      padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm);
    }
    .app[data-nav-layout="top"] .sidebar__foot {
      margin-top: 0; margin-left: 0; padding-top: 0;
      display: flex; flex-direction: row; align-items: center; gap: var(--sp-1); flex: none;
    }
    /* o <form> do botão "Sair" é bloco por padrão — sem isto ele quebra
       linha embaixo de "Temp" em vez de ficar lado a lado. */
    .app[data-nav-layout="top"] .sidebar__foot form { display: flex; }
    .app[data-nav-layout="top"] .sidebar__foot .nav-group__label { display: none; }
    /* "Sistema online / IntelliPortal" (duas linhas) estourava a altura da
       faixa de 62px e sobrava por cima — a marca já aparece na logo no
       início da barra, então esconde esse bloco repetido no modo topo. */
    .app[data-nav-layout="top"] .sidebar__status { display: none; }
    .app[data-nav-layout="top"] .nav-link--block { width: auto; }
    .app[data-nav-layout="top"] .main { grid-row: 2; }
  }
}

/* ---------- COMPONENTS ---------- */
@layer components {
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
  }
  /* cards que sao link (hub de relatorios, KPI clicavel) ganham um leve
     "levantar" no hover — cards comuns (nao clicaveis) ficam parados, de proposito */
  a.card {
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  a.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
  }
  a.card:active { transform: translateY(-1px); transition-duration: 80ms; }
  .card__body { padding: var(--sp-5); }
  .card__head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .card__head h3 { flex: 1; }
  /* icone opcional no titulo do card (ex.: conta/profile.ejs) — svg vem via
     icon() logo antes do texto dentro do proprio <h3>. */
  .card__head h3 { display: flex; align-items: center; gap: 9px; }
  .card__head h3 svg { width: 17px; height: 17px; color: var(--brand); flex: none; }

  /* KPI — cor por categoria/urgencia via --kpi-color (default = marca).
     kpi--warn/danger/ok reaproveitam o mesmo vocabulario de severidade
     usado nas listas (ver .row--sev-*), pra o painel já entrar mostrando o
     que precisa de atenção antes mesmo de abrir Clientes/Projetos. */
  .kpi {
    padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-2);
    position: relative; overflow: hidden;
    --kpi-color: var(--brand);
  }
  .kpi--warn { --kpi-color: var(--warn); }
  .kpi--danger { --kpi-color: var(--danger); }
  .kpi--ok { --kpi-color: var(--ok); }
  .kpi::after {
    content: ""; position: absolute; inset: auto -20px -30px auto;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--kpi-color) 22%, transparent), transparent 70%);
  }
  .kpi__icon {
    width: 38px; height: 38px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: color-mix(in oklab, var(--kpi-color) 16%, transparent);
    color: var(--kpi-color);
  }
  .kpi__icon svg { width: 19px; height: 19px; }
  .kpi__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; }
  .kpi__value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
  .kpi__hint { font-size: var(--fs-xs); color: var(--text-soft); }

  /* Resumo de relatório (reports/show.ejs) — KPI + gráfico de barras por
     categoria, pedido do Bruce, 2026-09-28 ("deixar os relatórios mais
     profissionais/interessantes de analisar"). Paleta categórica validada
     CVD-safe (skill de dataviz, ordem fixa — nunca ciclada, 8 fatias,
     resto vira "Outros"); mesmos 8 tons no claro/escuro, só o passo muda
     (ver src/lib/chart-palette.js, a MESMA paleta é usada no PDF). */
  :root {
    --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
    --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #4a3aa7; --chart-8: #e34948;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
      --chart-5: #d55181; --chart-6: #008300; --chart-7: #9085e9; --chart-8: #e66767;
    }
  }
  :root[data-theme="dark"] {
    --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
    --chart-5: #d55181; --chart-6: #008300; --chart-7: #9085e9; --chart-8: #e66767;
  }
  .report-summary {
    display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: stretch;
    padding: var(--sp-5); margin-bottom: var(--sp-4);
  }
  .report-summary__kpi {
    flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1);
    padding-right: var(--sp-6); border-right: 1px solid var(--border);
  }
  .report-summary__chart { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
  .report-summary__chart-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; margin-bottom: 2px; }
  .report-bar { display: flex; align-items: center; gap: var(--sp-3); }
  .report-bar__label { flex: 0 0 150px; font-size: var(--fs-sm); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .report-bar__track { flex: 1; height: 10px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
  .report-bar__fill { height: 100%; border-radius: var(--r-full); }
  .report-bar__value { flex: 0 0 auto; min-width: 28px; text-align: right; font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) {
    .report-summary { flex-direction: column; }
    .report-summary__kpi { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: var(--sp-4); }
  }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 0.55rem 1rem; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); transition-duration: 80ms; }
  .btn svg { width: 16px; height: 16px; }
  .btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-xs); }
  .btn--primary:hover { background: var(--brand-strong); box-shadow: var(--shadow-md); }
  .btn--ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
  .btn--ghost:hover { background: var(--surface-2); }
  .btn--subtle { background: var(--surface-2); color: var(--text-soft); }
  .btn--subtle:hover { background: var(--surface-3); color: var(--text); }
  .btn--danger { background: var(--surface); border-color: color-mix(in oklab, var(--danger) 45%, var(--border)); color: var(--danger); }
  .btn--danger:hover { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); }
  .btn--sm { padding: 0.35rem 0.7rem; font-size: var(--fs-xs); }
  .btn--block { width: 100%; }
  .btn[disabled] { opacity: 0.55; pointer-events: none; }

  /* forms */
  .field { display: flex; flex-direction: column; gap: 6px; position: relative; }

  /* "@mencionar" (pedido do Bruce, 2026-10-06) — dropdown de autocomplete
     que aparece ao digitar @ num <textarea data-mention>, e o destaque do
     "@Nome" já salvo na exibição (ver src/lib/mentions.js). `.field` virou
     o ancestral posicionado (position:relative acima) pra ancorar o
     dropdown sem precisar de wrapper novo em cada formulário. */
  .mention-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
    box-shadow: var(--shadow-md); overflow: hidden; min-width: 180px; max-width: 280px;
  }
  .mention-dropdown__item {
    display: block; width: 100%; text-align: left; padding: 7px 11px; font-size: var(--fs-sm);
    background: transparent; border: none; cursor: pointer; color: var(--text);
  }
  .mention-dropdown__item:hover { background: var(--surface-2); }
  .mention {
    color: var(--brand); font-weight: 650; background: color-mix(in oklab, var(--brand) 12%, transparent);
    padding: 0 3px; border-radius: 3px;
  }
  /* mesmo caso do .modal-overlay[hidden]/.client-picker-item[hidden] mais
     abaixo: "display:flex" tem a MESMA especificidade do [hidden] nativo
     do navegador (ambos 0,1,0) — sem isto, um <div class="field" hidden>
     (ex.: "Motivo do encerramento"/"Técnico responsável pela etapa" em
     clients/show.ejs, controlados por data-reveal) fica visível mesmo
     escondido. Achado 2026-10-02 testando o campo de técnico novo —
     bug pré-existente, nunca tinha pegado nenhum .field escondido antes. */
  .field[hidden] { display: none; }
  .field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
  .field__hint { font-size: var(--fs-xs); color: var(--text-faint); }
  .field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 550; }
  .input, .select, .textarea {
    width: 100%; padding: 0.6rem 0.8rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
  .field--invalid .input, .field--invalid .select { border-color: var(--danger); }
  .textarea { min-height: 90px; resize: vertical; }
  .form-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .form-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--sp-2); }
  .checkbox { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; }
  .checkbox input { width: 17px; height: 17px; accent-color: var(--brand); }

  /* Lista de escolha múltipla (pedido do Bruce, 2026-10-15): os checkboxes
     continuam no form (o servidor recebe igual), mas viram linhas clicáveis
     com busca. Linha marcada fica destacada com a cor do tema. JS em app.js
     ([data-picklist]) faz a busca, o resumo e a validação "pelo menos 1". */
  .picklist { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
  .picklist__search {
    width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent;
    padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-sm); color: var(--text);
  }
  .picklist__search:focus { outline: none; background: var(--surface-2); }
  .picklist__items { max-height: 220px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
  .picklist .checkbox {
    position: relative; justify-content: space-between; cursor: pointer; user-select: none;
    padding: 7px 10px; border-radius: var(--r-sm); font-weight: 500;
  }
  .picklist .checkbox:hover { background: var(--surface-2); }
  .picklist .checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .picklist .checkbox::after {
    content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--border-strong);
  }
  .picklist .checkbox:has(input:checked) { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
  .picklist .checkbox:has(input:checked)::after {
    content: "✓"; border-color: var(--brand); background: var(--brand); color: #fff;
    font-size: 12px; line-height: 15px; text-align: center;
  }
  .picklist .checkbox:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
  .picklist .checkbox[hidden] { display: none; }

  /* Administradoras TEF na ficha do cliente (clients/show.ejs, 2026-10-19):
     lista de blocos em vez de tabela, pra caber na coluna sem rolagem lateral. */
  .tef-list { display: flex; flex-direction: column; gap: var(--sp-2); }
  .tef-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface); }
  .tef-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .tef-item__name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .tef-item__data { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .7fr); gap: var(--sp-2); margin: 8px 0 0; }
  .tef-item__data dt { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  .tef-item__data dd { margin: 2px 0 0; overflow-wrap: anywhere; }
  .tef-item__edit { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border); }
  .tef-item__edit[hidden] { display: none; }
  @media (max-width: 520px) { .tef-item__data { grid-template-columns: 1fr 1fr; } }

  /* Seletor "Escolher" (partials/user-picker.ejs): botão com os escolhidos +
     a lista .picklist logo abaixo, aberta só ao clicar. */
  .userpick { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .userpick__trigger {
    display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 42px;
    padding: 6px 10px 6px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  }
  .userpick__trigger:hover { border-color: var(--border-strong); }
  .userpick.is-open .userpick__trigger { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .userpick.is-error .userpick__trigger { border-color: var(--c-red); }
  .userpick__value { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; font-size: var(--fs-sm); }
  .userpick__value.is-placeholder { color: var(--text-faint); }
  .userpick__chip {
    padding: 2px 9px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 600;
    background: var(--brand-soft); color: var(--brand-strong);
  }
  .userpick__chevron { flex: none; display: inline-flex; color: var(--text-soft); transition: transform .15s; }
  .userpick__chevron svg { width: 16px; height: 16px; }
  .userpick.is-open .userpick__chevron { transform: rotate(180deg); }
  .userpick__panel { box-shadow: var(--shadow-md); }
  .userpick__panel[hidden] { display: none; }
  .userpick__error { font-size: var(--fs-xs); color: var(--c-red); font-weight: 600; }

  /* modal generico (data-modal-open="id" / data-modal-close, ver app.js) —
     usado hoje pelo seletor de cliente do form de Projetos, mas o markup
     (.modal-overlay > .modal > .modal__head/.modal__body) serve pra
     qualquer outra caixa de selecao no futuro. */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: oklch(0 0 0 / 0.45); padding: var(--sp-4);
  }
  /* [hidden] tem a mesma especificidade de ".modal-overlay" (ambos 0,1,0) e
     regra de autor sempre vence a folha de estilo do navegador nesse empate
     — sem isto, "display:flex" acima mantinha o modal visivel mesmo com o
     atributo hidden presente (abria sozinho e nao fechava ao selecionar). */
  .modal-overlay[hidden] { display: none; }
  .modal {
    width: 100%; max-width: 460px; max-height: min(600px, 86vh);
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border);
    flex: none;
  }
  .modal__head h3 { margin: 0; font-size: var(--fs-md); }
  .modal__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); overflow: hidden; min-height: 0; }
  /* variante maior — editor de assinaturas (2 editores ricos) precisa de mais
     espaço que os modais normais (formulário de uma coluna). */
  .modal--lg { max-width: 640px; max-height: min(780px, 90vh); }
  .modal--lg .modal__body { overflow-y: auto; }
  /* Responder/Nova mensagem: "box grande" pedido pelo Bruce, 2026-09-16 —
     precisa de mais espaço que .modal--lg pra caber toolbar + corpo rico +
     anexos confortavelmente. */
  .modal--xl { max-width: 780px; max-height: min(860px, 92vh); }
  .modal--xl .modal__body { overflow-y: auto; }

  /* Assinatura de e-mail rica (negrito/itálico/cor/fonte via
     document.execCommand — sem framework, ver app.js) — pedido do Bruce,
     2026-09-16, igual o editor de assinaturas do Outlook. Reaproveitada
     também no corpo de Responder/Nova mensagem. */
  .richtoolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
  .richtoolbar__btn {
    width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text); font-size: var(--fs-sm);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .richtoolbar__btn:hover { border-color: var(--brand); color: var(--brand); }
  .richtoolbar__sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
  .richtoolbar__select { max-width: 140px; height: 30px; padding: 0 6px; font-size: var(--fs-xs); }
  .richtoolbar__color { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; }
  .richeditor {
    min-height: 110px; max-height: 220px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3); background: #fff; color: #1a1a1a;
    font-size: var(--fs-sm); line-height: 1.5;
  }
  .richeditor:focus { outline: 2px solid color-mix(in oklab, var(--brand) 55%, transparent); outline-offset: 1px; }
  /* corpo de Responder/Nova mensagem — mais alto que a assinatura, já vem
     com a assinatura pré-preenchida dentro (editável/removível pelo usuário,
     igual Outlook) então precisa de espaço pra escrever acima dela. */
  .richeditor--lg { min-height: 220px; max-height: 380px; }

  /* lista de anexos escolhidos (Responder/Nova mensagem) — o <input
     type=file multiple> nativo não deixa remover um arquivo individual, só
     limpar tudo; por isso reconstruímos a lista via JS (DataTransfer) e
     mostramos aqui com um "x" por item. Pedido do Bruce, 2026-09-16. */
  .attach-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .attach-list:empty { display: none; }
  .attach-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface-2); font-size: var(--fs-xs);
  }
  .attach-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attach-item__remove {
    flex: none; width: 22px; height: 22px; border-radius: 50%; border: none;
    background: transparent; color: var(--text-soft); font-size: var(--fs-md); line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .attach-item__remove:hover { background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); }

  /* lista de assinaturas nomeadas (conta/email.ejs) — cada uma é seu próprio
     mini-formulário (nome + editor rico + salvar/excluir), separadas por
     uma linha. Pedido do Bruce, 2026-09-16. */
  .signature-editor { padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
  .signature-editor:first-child { border-top: none; padding-top: 0; }
  .signature-editor .form-actions { margin-top: 2px; }

  /* Notificações (sino no topo + página /notificacoes) — pedido do Bruce,
     2026-09-16: tarefa atribuída e e-mail que chegou direto pra caixa
     pessoal geram uma aqui. Não lida ganha uma barrinha lateral colorida +
     fundo levemente destacado. */
  .notif-item {
    display: block; padding: var(--sp-3); border-radius: var(--r-md);
    color: var(--text); text-decoration: none; border-left: 3px solid transparent;
  }
  .notif-item:hover { background: var(--surface-2); }
  .notif-item--unread { border-left-color: var(--brand); background: color-mix(in oklab, var(--brand) 6%, transparent); }
  .notif-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

  /* sino no topbar */
  .notif-bell { position: relative; }
  .notif-bell__badge {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
  }
  .notif-bell__badge[hidden] { display: none; }

  .client-picker-field { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .client-picker-value {
    flex: 1 1 200px; min-width: 0; padding: 0.6rem 0.8rem;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: var(--fs-sm); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .client-picker-value--empty { color: var(--text-faint); font-weight: 400; }

  .client-picker-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
  .client-picker-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    text-align: left; font-size: var(--fs-sm); color: var(--text);
    transition: background var(--transition);
  }
  .client-picker-item:hover, .client-picker-item:focus-visible { background: var(--surface-2); outline: none; }
  .client-picker-item span:first-child { font-weight: 550; }
  /* mesmo caso do .modal-overlay[hidden] acima: "display:flex" tem a mesma
     especificidade do [hidden] da UA, sem isto o filtro de busca (que so
     alterna item.hidden) nao escondia nada visualmente. */
  .client-picker-item[hidden] { display: none; }

  /* table */
  .table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); position: relative; }
  /* dica visual de que da pra arrastar pro lado — .is-scrollable e alternada
     via JS (app.js) comparando scrollWidth/clientWidth, pra nao aparecer em
     tabela que ja cabe inteira na largura disponivel.
     BUG real achado pelo Bruce, 2026-10-07 ("fica uma listra vertical na
     tarefa"): isso era um `::after` com `position:absolute` — um filho
     posicionado dentro do PRÓPRIO elemento com overflow-x:auto rola JUNTO
     com o conteúdo (vira parte da área rolável), em vez de ficar fixo na
     borda direita visível; ao rolar a tabela pro lado, a faixa de sombra
     "destacava" e sobrava no meio da tela. Trocado pra `box-shadow: inset`
     direto no PRÓPRIO `.table-wrap` (não é filho, é pintura do box do
     elemento — nunca rola com o conteúdo, fica sempre fixo na borda real). */
  .table-wrap.is-scrollable { box-shadow: inset -24px 0 16px -16px color-mix(in oklab, var(--text) 22%, transparent); }
  table.data { width: 100%; border-collapse: collapse; background: var(--surface); font-size: var(--fs-sm); }
  table.data th, table.data td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
  table.data thead th {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-faint); background: var(--surface-2); font-weight: 650;
  }
  table.data tbody tr { transition: background var(--transition); }
  table.data tbody tr:hover { background: var(--surface-2); }
  table.data tbody tr:last-child td { border-bottom: none; }
  .cell-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }

  /* tabelas de relatorio — mais colunas de texto corrido lado a lado do que
     as listas normais, por isso pedem mais respiro vertical entre linhas
     pra nao parecer tudo grudado. So nos relatorios (reports/show.ejs),
     nao mexe nas tabelas do resto do app. */
  table.data--roomy th, table.data--roomy td { padding: 1.15rem 1.15rem; }
  table.data--roomy tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface-2) 55%, var(--surface)); }

  /* identity cell */
  .identity { display: flex; align-items: center; gap: var(--sp-3); color: inherit; text-decoration: none; }
  .avatar {
    width: 36px; height: 36px; border-radius: var(--r-full); flex: none;
    display: grid; place-items: center; font-weight: 650; font-size: var(--fs-xs);
    color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent));
    text-transform: uppercase; position: relative; overflow: hidden;
  }
  /* Variante "tingida" (pedido do Bruce, 2026-10-06: lista de clientes com
     todo avatar igual era monótono) — cor por cliente via --avatar-accent
     (hash determinístico no template, paleta categórica já validada
     CVD-safe de chart-palette.js), gradiente pro mesmo tom mais escuro em
     vez de pra uma 2ª cor fixa, pra nunca destoar/ficar feio combinado. Só
     opt-in nessa classe — avatar de foto de perfil/presença não muda. */
  .avatar--tinted { background: linear-gradient(135deg, var(--avatar-accent, var(--brand)), color-mix(in oklab, var(--avatar-accent, var(--brand)) 65%, black)); }
  /* foto de perfil (pedido do Bruce, 2026-09-22) — "padrão redondo" é só
     isso aqui (object-fit + border-radius do .avatar), a imagem em disco
     fica intacta, sem precisar recortar no servidor. */
  .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .avatar--lg { width: 60px; height: 60px; font-size: var(--fs-lg); }
  .avatar--xl { width: 88px; height: 88px; font-size: 1.6rem; }
  /* Anel de status (online/ausente/offline) ao redor da foto inteira —
     pedido do Bruce, 2026-09-24 ("em torno da foto", era uma bolinha no
     canto antes). `box-shadow` não ocupa espaço no layout, só desenha por
     fora — não empurra texto vizinho mesmo em linhas de tabela apertadas. */
  .avatar--online { box-shadow: 0 0 0 2px var(--ok); }
  .avatar--ausente { box-shadow: 0 0 0 2px var(--warn); }
  .avatar--offline { box-shadow: 0 0 0 2px var(--text-faint); }
  .avatar--lg.avatar--online { box-shadow: 0 0 0 3px var(--ok); }
  .avatar--lg.avatar--ausente { box-shadow: 0 0 0 3px var(--warn); }
  .avatar--lg.avatar--offline { box-shadow: 0 0 0 3px var(--text-faint); }
  /* Perfil (avatar--xl dentro do cabeçalho de "Minha conta"): já tinha um
     anel branco/surface separando da faixa colorida atrás — o anel de
     presença entra por fora desse, os dois compõem (2 sombras). */
  .profile-hero__avatar-wrap .avatar { box-shadow: 0 0 0 4px var(--surface); }
  .profile-hero__avatar-wrap .avatar--online { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--ok); }
  .profile-hero__avatar-wrap .avatar--ausente { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--warn); }
  .profile-hero__avatar-wrap .avatar--offline { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--text-faint); }
  .identity__name { font-weight: 600; }
  .identity__meta { color: var(--text-faint); font-size: var(--fs-xs); }

  /* Menu do avatar no topbar (pedido do Bruce, 2026-09-24) — <details>
     nativo, sem JS pra abrir/fechar (só um "clique fora fecha" genérico em
     app.js, porque isso aqui é um painel flutuante, diferente do acordeão
     inline da sidebar que usa o mesmo <details>). */
  .topbar-menu { position: relative; list-style: none; }
  .topbar-menu > summary { cursor: pointer; list-style: none; }
  .topbar-menu > summary::-webkit-details-marker { display: none; }
  .topbar-menu__panel {
    position: absolute; top: calc(100% + 10px); right: 0; width: 260px; z-index: 100;
    display: flex; flex-direction: column; gap: var(--sp-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: var(--shadow-md); padding: var(--sp-3);
  }
  .topbar-menu__user { display: flex; flex-direction: column; gap: 1px; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
  .topbar-menu__section { display: flex; flex-direction: column; gap: 1px; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
  .topbar-menu__label { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
  .topbar-menu__status {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 6px 8px; border-radius: var(--r-sm); border: none; background: transparent;
    color: var(--text); font-size: var(--fs-sm); cursor: pointer;
  }
  .topbar-menu__status:hover { background: var(--surface-2); }
  .topbar-menu__status--active { background: color-mix(in oklab, var(--brand) 10%, transparent); font-weight: 600; }
  .topbar-menu__status svg { width: 14px; height: 14px; margin-left: auto; color: var(--brand); }
  .topbar-menu__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .topbar-menu__dot--auto { background: transparent; border: 1.5px dashed var(--text-faint); }
  .topbar-menu__dot--online { background: var(--ok); }
  .topbar-menu__dot--ausente { background: var(--warn); }
  .topbar-menu__dot--offline { background: var(--text-faint); }
  .topbar-menu__link {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 6px 8px; border-radius: var(--r-sm); border: none; background: transparent;
    color: var(--text); font-size: var(--fs-sm); cursor: pointer; text-decoration: none;
  }
  .topbar-menu__link:hover { background: var(--surface-2); }
  .topbar-menu__link svg { width: 16px; height: 16px; color: var(--text-soft); }

  /* ── "Minha conta" (account/profile.ejs) — cabeçalho de perfil tipo
     rede social: faixa colorida (mesmo gradiente do avatar de iniciais,
     fica coerente) + avatar grande sobrepondo a borda + botão de câmera
     pra trocar foto sem sair da tela. Pedido do Bruce, 2026-09-24 ("estilo
     muito simples"). */
  .profile-hero { padding: 0; overflow: hidden; }
  .profile-hero__banner {
    height: 92px; position: relative;
    background: linear-gradient(135deg, var(--brand), var(--accent));
  }
  .profile-hero__banner::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(oklch(1 0 0 / 0.09) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.09) 1px, transparent 1px);
    background-size: 26px 26px;
  }
  .profile-hero__body {
    padding: 0 var(--sp-5) var(--sp-5);
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4);
  }
  .profile-hero__avatar-wrap { position: relative; flex: none; margin-top: -46px; }
  .profile-hero__avatar-wrap .avatar { box-shadow: 0 0 0 4px var(--surface); }
  .profile-hero__avatar-edit {
    position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-xs); cursor: pointer; color: var(--text-soft);
  }
  .profile-hero__avatar-edit:hover { color: var(--brand); border-color: var(--brand); }
  .profile-hero__avatar-edit svg { width: 15px; height: 15px; }
  .profile-hero__info { flex: 1 1 220px; min-width: 220px; padding-top: var(--sp-3); }
  .profile-hero__name-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .profile-hero__name-row h2 { margin: 0; }
  .profile-hero__role { color: var(--text-soft); margin: 2px 0 0; }
  .profile-hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-2); color: var(--text-faint); font-size: var(--fs-sm); }
  .profile-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
  .profile-hero__meta svg { width: 15px; height: 15px; flex: none; }
  .profile-hero__stats { display: flex; gap: var(--sp-5); padding-top: var(--sp-4); flex: none; }
  .profile-stat__label { display: block; font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
  .profile-stat__value { display: block; font-weight: 600; margin-top: 2px; }
  @media (max-width: 640px) { .profile-hero__stats { gap: var(--sp-4); } }

  /* Ajustar foto (arrastar + zoom, pedido do Bruce, 2026-09-24) — canvas
     quadrado com um "anel" por cima (box-shadow gigante fora do círculo,
     truque clássico de crop) mostrando só o que vai virar o avatar. */
  .avatar-crop {
    position: relative; width: 320px; height: 320px; max-width: 100%;
    margin: 0 auto; border-radius: var(--r-md); overflow: hidden;
    background: var(--surface-2); touch-action: none;
  }
  .avatar-crop canvas { display: block; cursor: grab; }
  .avatar-crop canvas:active { cursor: grabbing; }
  .avatar-crop__ring {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    border: 2px solid #fff; box-shadow: 0 0 0 2000px color-mix(in oklab, var(--surface) 60%, transparent);
  }

  /* badges */
  .badge {
    /* nowrap (2026-10-20): selo nunca quebra em duas linhas ("Pós-
       Implantação" quebrava na lista de Projetos); a tabela abre espaço. */
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--r-full);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
    background: var(--surface-3); color: var(--text-soft);
  }
  .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .badge--ok { background: color-mix(in oklab, var(--ok) 16%, transparent); color: color-mix(in oklab, var(--ok) 75%, var(--text)); }
  .badge--muted { background: var(--surface-3); color: var(--text-faint); }
  .badge--warn { background: color-mix(in oklab, var(--warn) 20%, transparent); color: color-mix(in oklab, var(--warn) 70%, var(--text)); }
  .badge--danger { background: color-mix(in oklab, var(--danger) 18%, transparent); color: color-mix(in oklab, var(--danger) 72%, var(--text)); }
  .badge--brand { background: color-mix(in oklab, var(--brand) 16%, transparent); color: var(--brand-strong); }
  /* Ciano FIXO (2026-10-20, tipo de operação Atualização): não segue a cor de
     destaque do tema, que deixava "brand" vermelho igual a Correções. Mesma
     receita de mistura das outras, então funciona no claro e no escuro. */
  .badge--cyan { background: color-mix(in oklab, #0a9bb5 17%, transparent); color: color-mix(in oklab, #0a9bb5 78%, var(--text)); }
  /* Azul FIXO da marca IntelliComm (2026-10-20, Implantação e Integração):
     igual pra todo mundo, sem virar vermelho no tema vermelho. */
  .badge--blue { background: color-mix(in oklab, var(--c-blue) 16%, transparent); color: color-mix(in oklab, var(--c-blue) 80%, var(--text)); }
  .badge--plain::before { display: none; }

  /* hub de relatórios (reports/index.ejs) — grupos por categoria, card com
     ícone + badges (fonte "exporta"/"ao vivo") + estado bloqueado igual ao
     cadeado da sidebar, pra reaproveitar a mesma linguagem visual do resto
     do app em vez de inventar um componente novo. */
  .section-label {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-faint); font-weight: 650; margin: 0 0 var(--sp-3);
  }
  .report-section + .report-section { margin-top: var(--sp-6); }
  .report-card {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    padding: var(--sp-5); text-decoration: none;
  }
  .report-card__body { flex: 1; min-width: 0; }
  .report-card__title { font-weight: 650; font-size: var(--fs-md); color: var(--text); }
  .report-card__desc { margin-top: 2px; }
  .report-card__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
  .report-card--locked { opacity: 0.55; cursor: not-allowed; }
  .report-card--locked:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
  .report-card__lock { margin-left: auto; flex: none; opacity: 0.8; }
  .report-card__lock svg { width: 15px; height: 15px; }

  /* trilha de status do projeto (card "Status do projeto") — cada etapa e um
     <form> pequeno (hidden input "status" + botao), clicar submete direto pra
     /projetos/:id/status, sem exigir ordem (2026-09-15: o status deixou de
     ser uma jornada de mao unica, qualquer circulo pode ser clicado a
     qualquer momento). "Concluidas" aqui e so uma pista visual (aparece antes
     da etapa atual na lista), nao um bloqueio. O circulo atual pulsa
     ("balao animado", pedido do Bruce) pra chamar atencao de onde o projeto
     esta agora. */
  .status-track { display: flex; align-items: flex-start; gap: 2px; overflow-x: auto; padding: 4px 2px 8px; }
  .status-track__step {
    position: relative; flex: 1 0 76px; min-width: 76px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
  }
  .status-track__step:not(:last-child)::after {
    content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px;
    background: var(--border); z-index: 0;
  }
  .status-track__step--done:not(:last-child)::after { background: var(--brand); }
  .status-track__circle {
    position: relative; z-index: 1; flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: 700;
    border: 2px solid var(--border-strong); background: var(--surface); color: var(--text-faint);
    cursor: pointer; transition: transform var(--transition), border-color var(--transition), background var(--transition);
  }
  .status-track__circle svg { width: 14px; height: 14px; }
  .status-track__circle:hover:not(:disabled) { transform: scale(1.1); border-color: var(--brand); color: var(--brand); }
  .status-track__circle:disabled { cursor: default; opacity: 1; }
  .status-track__step--done .status-track__circle { background: var(--brand); border-color: var(--brand); color: #fff; }
  .status-track__step--current .status-track__circle {
    border-color: var(--brand); color: var(--brand-strong);
    animation: status-track-pulse 1.8s ease-in-out infinite;
  }
  .status-track__label { font-size: var(--fs-xs); text-align: center; color: var(--text-faint); line-height: 1.25; }
  .status-track__step--current .status-track__label { color: var(--text); font-weight: 650; }

  @keyframes status-track-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 45%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--brand) 0%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .status-track__step--current .status-track__circle { animation: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent); }
  }

  /* tag do usuario — pintada inteira com a cor escolhida (paleta fixa, ver
     tag-colors.js — os hex ja sao tons profundos o bastante pra funcionar
     com texto branco em cima). --tag-color vem inline por tag. */
  .tag {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: var(--r-full);
    font-size: var(--fs-xs); font-weight: 650; line-height: 1.4;
    background: var(--tag-color, var(--text-faint));
    color: #fff;
    border: none;
  }
  .tag::before { display: none; }
  .tag-chip { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .tag-chip form { display: inline-flex; }
  .tag-chip__remove {
    display: inline-grid; place-items: center; width: 18px; height: 18px;
    border-radius: var(--r-full); color: #fff; margin-left: -4px;
    background: color-mix(in oklab, var(--tag-color, var(--text-faint)) 100%, transparent);
    opacity: 0.75;
    transition: opacity var(--transition), background var(--transition);
  }
  .tag-chip__remove svg { width: 11px; height: 11px; }
  .tag-chip__remove:hover { opacity: 1; background: color-mix(in oklab, var(--tag-color, var(--text-faint)) 80%, black); }
  .tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

  /* seletor de cor da tag — paleta fixa, cada opcao e um radio nativo
     (acessivel/navegavel por teclado) escondido atras de um "swatch"
     circular; a bolinha marcada ganha aro + escala. */
  .color-picker { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
  .color-picker input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .color-picker label {
    width: 26px; height: 26px; border-radius: var(--r-full); cursor: pointer;
    border: 2px solid transparent; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.12);
    display: inline-block; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  }
  .color-picker label:hover { transform: scale(1.1); }
  .color-picker input:checked + label {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text-faint);
    transform: scale(1.08);
  }
  .color-picker input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* lista de tags "clicaveis" no formulario de cliente — checkbox nativo
     escondido, a tag em si funciona de toggle: apagada/cinza quando
     desmarcada, colorida cheia quando marcada. */
  .tag-toggles { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .tag-toggle { cursor: pointer; }
  .tag-toggle input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .tag-toggle .tag {
    opacity: 0.4; filter: grayscale(55%); transform: scale(0.97);
    transition: opacity var(--transition), filter var(--transition), transform var(--transition);
  }
  .tag-toggle:hover .tag { opacity: 0.7; }
  .tag-toggle input:checked + .tag { opacity: 1; filter: none; transform: none; }
  .tag-toggle input:focus-visible + .tag { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* severidade — colore a borda esquerda de um card/linha conforme urgencia
     (prazo de tarefa, alerta de acompanhamento, status de projeto etc.).
     Em <tr>, borda vai no primeiro <td> — <tr> nao renderiza border-left
     de forma confiavel com border-collapse. */
  .card--sev-ok { border-left: 3px solid var(--sev-ok); }
  .card--sev-warn { border-left: 3px solid var(--sev-warn); background: color-mix(in oklab, var(--sev-warn) 6%, var(--surface)); }
  .card--sev-danger { border-left: 3px solid var(--sev-danger); background: color-mix(in oklab, var(--sev-danger) 7%, var(--surface)); }

  tr.row--sev-ok td:first-child { box-shadow: inset 3px 0 0 var(--sev-ok); }
  tr.row--sev-warn td:first-child { box-shadow: inset 3px 0 0 var(--sev-warn); }
  tr.row--sev-danger td:first-child { box-shadow: inset 3px 0 0 var(--sev-danger); }
  tr.row--sev-warn { background: color-mix(in oklab, var(--sev-warn) 5%, transparent); }
  tr.row--sev-danger { background: color-mix(in oklab, var(--sev-danger) 6%, transparent); }

  /* alerts / flash */
  .alert {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-sm);
  }
  .alert--success { border-color: color-mix(in oklab, var(--ok) 40%, var(--border)); background: color-mix(in oklab, var(--ok) 10%, var(--surface)); }
  .alert--error { border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); background: color-mix(in oklab, var(--danger) 9%, var(--surface)); }
  .alert--info { border-color: color-mix(in oklab, var(--info) 40%, var(--border)); background: color-mix(in oklab, var(--info) 9%, var(--surface)); }
  .alert--warn { border-color: color-mix(in oklab, var(--warn) 40%, var(--border)); background: color-mix(in oklab, var(--warn) 10%, var(--surface)); }
  .flash-stack { display: flex; flex-direction: column; gap: var(--sp-2); }

  /* hint informativo (topo de pagina, dispensavel — partials/page-hint.ejs) */
  .hint {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    border: 1px solid color-mix(in oklab, var(--info) 35%, var(--border));
    background: color-mix(in oklab, var(--info) 7%, var(--surface));
    font-size: var(--fs-sm); color: var(--text-soft);
    margin-bottom: var(--sp-4);
  }
  .hint__icon { color: var(--info); flex-shrink: 0; margin-top: 1px; }
  .hint p { flex: 1; margin: 0; }
  .hint__dismiss { flex-shrink: 0; margin: -6px -6px -6px 0; }

  /* toolbar / filters */
  .toolbar {
    display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end;
    padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  }
  .toolbar .field { flex: 1; min-width: 160px; }

  /* pagination */
  .pagination { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; flex-wrap: wrap; }
  .pagination__info { font-size: var(--fs-xs); color: var(--text-faint); }
  .pagination__pages { display: flex; gap: var(--sp-1); }

  /* permission matrix */
  .perm-group { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
  .perm-group__head {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); background: var(--surface-2);
    font-weight: 620; font-size: var(--fs-sm);
  }
  .perm-group__items { display: grid; gap: 2px; padding: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .perm {
    display: flex; gap: var(--sp-3); align-items: center;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    transition: background var(--transition);
  }
  .perm:hover { background: var(--surface-2); }
  .perm input { width: 17px; height: 17px; accent-color: var(--brand); flex: none; }
  .perm__name { font-size: var(--fs-sm); font-weight: 520; }
  .perm__slug { font-size: var(--fs-xs); color: var(--text-faint); font-family: var(--font-mono); }

  /* ============ TELA DE LOGIN (animada) ============ */
  .login {
    min-height: 100dvh;
    display: flex; padding: clamp(20px, 5vh, 56px) 20px;
    background-color: #081c2a;
    isolation: isolate;
    overflow: hidden; /* contém o brilho giratório do card (::before, inset -40%) — sem isso ele
                         vaza pra fora da tela e a rotação contínua faz a altura rolável oscilar */
  }
  /* grade sutil — presa à viewport */
  .login::before {
    content: ""; position: fixed; inset: -2px; z-index: -3;
    background-image:
      linear-gradient(oklch(1 0 0 / 0.035) 1px, transparent 1px),
      linear-gradient(90deg, oklch(1 0 0 / 0.035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 40%, transparent 100%);
  }
  /* orbes de cor da marca que flutuam */
  .login__orbs { position: fixed; inset: 0; z-index: -2; filter: blur(80px); opacity: 0.75; pointer-events: none; overflow: hidden; }
  .login__orb { position: absolute; width: 44vmax; height: 44vmax; border-radius: 50%; will-change: transform; }
  .login__orb--1 { background: radial-gradient(circle, var(--c-blue), transparent 62%); top: -14vmax; left: -10vmax; animation: orb-a 26s ease-in-out infinite alternate; }
  .login__orb--2 { background: radial-gradient(circle, var(--c-green), transparent 62%); bottom: -16vmax; left: 18vmax; animation: orb-b 32s ease-in-out infinite alternate; }
  .login__orb--3 { background: radial-gradient(circle, var(--c-amber), transparent 62%); top: -8vmax; right: -8vmax; animation: orb-c 29s ease-in-out infinite alternate; }
  .login__orb--4 { background: radial-gradient(circle, var(--c-red), transparent 65%); bottom: -18vmax; right: 6vmax; animation: orb-d 35s ease-in-out infinite alternate; }

  /* peças decorativas do "pinwheel" */
  .login__tiles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .login__tile { position: absolute; border-radius: 14px; opacity: 0.5; will-change: transform; }
  .login__tile:nth-child(1) { width: 90px; height: 90px; background: var(--c-blue); top: 12%; left: 12%; animation: drift 18s ease-in-out infinite; }
  .login__tile:nth-child(2) { width: 58px; height: 58px; background: var(--c-amber); top: 22%; right: 14%; animation: drift 22s ease-in-out infinite reverse; }
  .login__tile:nth-child(3) { width: 44px; height: 44px; background: var(--c-green); bottom: 16%; left: 20%; animation: drift 26s ease-in-out infinite; }
  .login__tile:nth-child(4) { width: 72px; height: 72px; background: var(--c-red); bottom: 14%; right: 16%; animation: drift 20s ease-in-out infinite reverse; }

  .login__card {
    position: relative; width: min(410px, 100%); margin: auto;
    display: flex; flex-direction: column; gap: var(--sp-5);
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--r-xl);
    background: color-mix(in oklab, var(--surface) 90%, transparent);
    backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid oklch(1 0 0 / 0.6);
    box-shadow: 0 30px 80px -20px oklch(0.1 0.05 250 / 0.55), inset 0 1px 0 oklch(1 0 0 / 0.7);
    animation: card-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    isolation: isolate;
  }
  /* brilho conic girando bem atrás do card (sem bordas duras) */
  .login__card::before {
    content: ""; position: absolute; z-index: -1;
    inset: -40%; border-radius: 50%;
    background: var(--brand-wheel);
    filter: blur(70px); opacity: 0.28;
    animation: spin 24s linear infinite;
  }
  :root[data-theme="dark"] .login__card,
  :root:not([data-theme="light"]) .login__card {
    background: oklch(0.24 0.02 250 / 0.72);
    border-color: oklch(1 0 0 / 0.12);
  }

  /* logotipo: encaixado direto no fundo do proprio card, sem anel nem caixa
     branca (pedido do Bruce em 2026-09-15 — "sem o fundo branco... e sem a
     borda colorida em volta"). Como o card escurece no tema escuro, precisa
     da mesma troca clara/escura do texto que o hero do painel usa. */
  .login__logo { align-self: center; display: grid; place-items: center; animation: card-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
  .login__logo-img { width: clamp(260px, 92%, 400px); height: auto; display: block; }
  .login__logo-img--dark { display: none; }
  :root[data-theme="dark"] .login__logo-img--light { display: none; }
  :root[data-theme="dark"] .login__logo-img--dark { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .login__logo-img--light { display: none; }
    :root:not([data-theme="light"]) .login__logo-img--dark { display: block; }
  }

  .login__head { text-align: center; display: flex; flex-direction: column; gap: 4px; }
  .login__head h1 { font-size: var(--fs-xl); }
  .login__head p { color: var(--text-soft); font-size: var(--fs-sm); }

  .login__field { position: relative; display: flex; flex-direction: column; gap: 6px; }
  .login__field label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
  .login .input { padding: 0.72rem 0.9rem; border-radius: var(--r-md); }

  .login__submit {
    margin-top: var(--sp-1);
    background: linear-gradient(120deg, var(--c-blue), color-mix(in oklab, var(--c-blue) 55%, var(--c-green)));
    color: #fff; border: none; padding: 0.8rem 1rem; border-radius: var(--r-md);
    font-weight: 650; font-size: var(--fs-md);
    box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--c-blue) 70%, transparent);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  }
  .login__submit:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -8px color-mix(in oklab, var(--c-blue) 75%, transparent); }
  .login__submit:active { transform: translateY(1px); }

  .login__foot { text-align: center; font-size: var(--fs-xs); color: var(--text-faint); }
  .login__foot strong { color: var(--text-soft); font-weight: 600; }

  @keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(14px, -22px) rotate(16deg); }
  }
  @keyframes orb-a { to { transform: translate(12vmax, 8vmax) scale(1.15); } }
  @keyframes orb-b { to { transform: translate(-8vmax, -10vmax) scale(1.1); } }
  @keyframes orb-c { to { transform: translate(-10vmax, 9vmax) scale(1.2); } }
  @keyframes orb-d { to { transform: translate(7vmax, -8vmax) scale(1.12); } }

  @media (prefers-reduced-motion: reduce) {
    .login__orb, .login__tile, .login__card::before, .login__card, .login__logo { animation: none !important; }
  }

  .empty {
    text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--text-soft);
    display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
  }
  .empty svg { width: 40px; height: 40px; opacity: 0.4; }

  /* "Ficha" de dados (pedido do Bruce, 2026-10-06: telas de detalhe muito
     simples) — cada linha dt/dd vira uma fileira com separador fino,
     rótulo pequeno/discreto em caixa alta e valor com mais peso, tipo
     "spec sheet" em vez de lista de label:valor crua. Reaproveitado em 8
     telas (clientes/projetos/fechamentos/performance/perfil/etc.) de
     graça, sem mexer em view nenhuma. */
  .dl { display: grid; grid-template-columns: 160px 1fr; gap: 0 var(--sp-4); font-size: var(--fs-sm); }
  .dl dt, .dl dd { padding: 10px 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); display: flex; align-items: center; }
  .dl dt { color: var(--text-faint); font-weight: 650; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; }
  .dl dd { min-width: 0; font-weight: 560; }
  .dl > *:nth-last-child(-n+2) { border-bottom: none; }
  @media (max-width: 640px) {
    .dl { grid-template-columns: 1fr; gap: 0 var(--sp-4); }
    .dl dt { padding-bottom: 2px; border-bottom: none; }
    .dl dd { padding-top: 0; padding-bottom: 12px; }
  }

  /* Quadros (Kanban, pedido do Bruce, 2026-10-06) — colunas lado a lado,
     rolagem horizontal própria (não empurra a página inteira), cada coluna
     rola vertical independente quando tem muito cartão. */
  .kanban { display: flex; gap: var(--sp-4); align-items: flex-start; overflow-x: auto; padding-bottom: var(--sp-3); }
  .kanban__col {
    flex: 0 0 360px; background: var(--surface-2); border-radius: var(--r-lg);
    display: flex; flex-direction: column; max-height: calc(100vh - 230px);
  }
  .kanban__col-head { padding: var(--sp-3) var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
  .kanban__col-head__top { display: flex; align-items: center; gap: var(--sp-2); }
  .kanban__col-head h3 { flex: 1; font-size: var(--fs-sm); font-weight: 650; min-width: 0; }
  .kanban__col-actions { display: flex; gap: 4px; flex-wrap: wrap; }
  /* Botao-balao com emoji + texto SEMPRE visível (pedido do Bruce,
     2026-10-06, 2ª volta) — a versão anterior era um tooltip CSS que só
     aparecia no hover (`::after` lendo `title=`) e cortava perto do topo
     do quadro (o ancestral `.kanban` tem `overflow-x:auto`, o que forca
     `overflow-y` a virar `auto` também e recorta qualquer coisa que
     estoure a caixa pra cima). Trocado por botão normal, no fluxo do
     documento — nunca estoura nem corta, e a pessoa lê sem precisar
     passar o mouse. */
  .kanban__col-action {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface);
    color: var(--text-soft); font-size: 11px; font-weight: 560; white-space: nowrap; cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }
  .kanban__col-action:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
  .kanban__col-action--danger { border-color: color-mix(in oklab, var(--danger) 45%, var(--border)); color: var(--danger); }
  .kanban__col-action--danger:hover { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); }
  .kanban__col-body { flex: 1; overflow-y: auto; padding: 2px var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 40px; transition: background var(--transition); border-radius: var(--r-md); }
  .kanban__col-body.is-dragover { background: color-mix(in oklab, var(--brand) 10%, transparent); }
  .kanban__add-card { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .kanban__add-card .input { background: transparent; border-style: dashed; font-size: var(--fs-sm); }
  .kanban__col--new { flex: 0 0 240px; background: transparent; border: 1.5px dashed var(--border-strong); justify-content: center; padding: var(--sp-2); }
  .kanban__col--new .input { background: var(--surface); }

  .kanban__card {
    display: block; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 4px); box-shadow: var(--shadow-xs);
    color: inherit; text-decoration: none; cursor: grab; position: relative; overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  }
  .kanban__card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  .kanban__card:active { cursor: grabbing; }
  .kanban__card.is-dragging { opacity: 0.4; }
  .kanban__card-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
  .kanban__card-stripe--danger { background: var(--danger); }
  .kanban__card-stripe--warn { background: var(--warn); }
  .kanban__card-stripe--ok { background: var(--ok); }
  .kanban__card-title-row { display: flex; align-items: center; justify-content: center; text-align: center; gap: 5px; flex-wrap: wrap; }
  .kanban__card-title { font-size: var(--fs-sm); font-weight: 560; }
  /* "redondinho" colorido ao lado do título (pedido do Bruce, 2026-10-06) —
     mesma custom property --label-color das etiquetas, só que como bolinha
     em vez de chip, pra não competir com o título. Nome completo só no
     tooltip (title=), não tem espaço pra texto nesse tamanho. */
  .label-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--label-color, var(--brand)); }
  .kanban__card-meta { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
  .kanban__card-meta .badge svg { width: 12px; height: 12px; }
  .kanban__card-members { display: flex; gap: 4px; justify-content: center; margin-top: 8px; }
  .kanban__card-members .avatar { box-shadow: 0 0 0 2px var(--surface); }
  /* Mesma ideia, pra contexto de linha de tabela (Projetos, pedido do
     Bruce, 2026-10-09) — alinhado à esquerda, sem o justify-content:center
     que o .kanban__card-members usa (lá é dentro de um cartão centralizado). */
  .member-avatars { display: flex; gap: 4px; flex-wrap: wrap; }
  .member-avatars .avatar { box-shadow: 0 0 0 2px var(--surface); }
  .kanban__card-cover { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: var(--r-sm); margin-bottom: var(--sp-2); }

  /* Grid de miniaturas de imagem anexada (pedido do Bruce, 2026-10-07,
     Projetos e Tarefas — "botão pra inserir/deletar imagem"). Reaproveitado
     nos dois lugares, não é específico de nenhum módulo. */
  .attachment-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .attachment-grid__item { position: relative; width: 72px; height: 72px; flex: none; }
  .attachment-grid__item img {
    width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm);
    border: 1px solid var(--border); display: block;
  }
  .attachment-grid__remove {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
    display: inline-grid; place-items: center; border-radius: 50%;
    background: var(--danger); color: #fff; border: 2px solid var(--surface); cursor: pointer;
  }
  .attachment-grid__remove svg { width: 11px; height: 11px; }
  /* Anexo sem miniatura (PDF, doc, certificado etc. — Propostas, pedido do
     time comercial, 2026-10-08): ícone + nome truncado no lugar da <img>. */
  .attachment-grid__file {
    width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px;
    align-items: center; justify-content: center; text-align: center; padding: 4px;
    border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text-faint);
  }
  .attachment-grid__file svg { width: 20px; height: 20px; }
  /* placeholder que marca onde o cartão vai cair durante o arraste —
     JS só alterna a classe, o tamanho/cor ficam aqui. */
  .kanban__placeholder { height: 46px; border-radius: var(--r-md); border: 2px dashed color-mix(in oklab, var(--brand) 50%, transparent); background: color-mix(in oklab, var(--brand) 6%, transparent); }

  /* Puxador de coluna (pedido do Bruce, 2026-10-06 — arrastar coluna
     inteira, não só cartão). Fica só no cabeçalho pra não brigar com o
     arraste de cartão dentro do corpo da coluna. */
  .kanban__col-head[draggable="true"] { cursor: grab; }
  .kanban__col-head[draggable="true"]:active { cursor: grabbing; }
  .kanban__col-handle { display: inline-flex; color: var(--text-faint); }
  .kanban__col-handle svg { width: 14px; height: 14px; }
  .kanban__col.is-dragging { opacity: 0.4; }

  /* Timeline de atividade (pedido do Bruce, 2026-10-06) — substitui o
     "row between + border-bottom inline" repetido em Registro de
     informações/Acompanhamento/Histórico do ciclo de vida: cada evento
     ganha um marcador com linha conectora, visual de feed cronológico de
     verdade em vez de texto empilhado. `.timeline__item--muted` pro
     marcador ficar discreto (ex.: eventos automáticos do sistema). */
  .timeline { display: flex; flex-direction: column; }
  .timeline__item { position: relative; padding: 0 0 var(--sp-4) 26px; }
  .timeline__item:last-child { padding-bottom: 0; }
  .timeline__item::before {
    content: ""; position: absolute; left: 3px; top: 5px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 16%, transparent);
  }
  .timeline__item--muted::before { background: var(--text-faint); box-shadow: 0 0 0 3px color-mix(in oklab, var(--text-faint) 14%, transparent); }
  .timeline__item::after {
    content: ""; position: absolute; left: 7px; top: 17px; bottom: -2px; width: 2px;
    background: color-mix(in oklab, var(--border-strong) 65%, transparent);
  }
  .timeline__item:last-child::after { display: none; }
  .timeline__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
  .timeline__note { font-size: var(--fs-sm); white-space: pre-wrap; flex: 1; min-width: 0; overflow-wrap: anywhere; }
  /* Data + lixeira à direita nunca encolhem nem quebram linha: com texto longo
     elas ficavam espremidas e a lixeira descia desalinhada (2026-10-19). */
  .timeline__head > :not(.timeline__note) { flex: none; flex-wrap: nowrap; }
  .timeline__meta { color: var(--text-faint); font-size: var(--fs-xs); margin-top: 3px; }
  .timeline__date { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }

  /* Etiquetas de quadro (pedido do Bruce, 2026-10-06, pra fechar o gap com
     o Trello) — cor vem de uma custom property inline (`--label-color`,
     setada no template direto com `var(--chart-N)`, mesma paleta
     categórica já validada CVD-safe usada nos avatares de cliente), não
     precisa de 1 classe --cor por etiqueta. */
  .label-chip {
    display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-full);
    font-size: var(--fs-xs); font-weight: 650; color: #fff; cursor: pointer; user-select: none;
    background: var(--label-color, var(--brand)); opacity: 0.4;
    transition: opacity var(--transition), transform var(--transition);
  }
  .label-chip:hover { transform: translateY(-1px); }
  .label-chip:has(input:checked) { opacity: 1; box-shadow: 0 0 0 2px color-mix(in oklab, var(--text) 35%, transparent); }
  .label-chip input { position: absolute; opacity: 0; pointer-events: none; }
  .label-chip--sm { padding: 3px 9px 3px 9px; font-size: 10px; }

  .color-swatch { width: 24px; height: 24px; border-radius: 50%; display: inline-block; cursor: pointer; position: relative; background: var(--label-color, var(--brand)); }
  .color-swatch input { position: absolute; opacity: 0; }
  .color-swatch:has(input:checked)::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--text);
  }

  /* Seletor de cor de destaque do tema, /conta (pedido do Bruce,
     2026-10-08) — mesmo idioma do .color-swatch acima, só maior e sempre
     em degradê (--accent-swatch-a/-b setados inline por opção). */
  .accent-swatch {
    width: 32px; height: 32px; border-radius: 50%; display: inline-block; cursor: pointer; position: relative;
    background: linear-gradient(135deg, var(--accent-swatch-a), var(--accent-swatch-b));
    box-shadow: 0 0 0 1px var(--border) inset;
  }
  .accent-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .accent-swatch:has(input:checked)::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--text);
  }

  .icon-btn {
    display: inline-grid; place-items: center; width: 36px; height: 36px;
    border-radius: var(--r-sm); color: var(--text-soft); border: 1px solid var(--border);
    background: var(--surface);
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
  .icon-btn:active { transform: translateY(0) scale(0.92); transition-duration: 80ms; }
  .icon-btn svg { width: 18px; height: 18px; transition: transform var(--transition); }
  .icon-btn:hover svg { transform: scale(1.08); }
  .icon-btn--danger { border-color: color-mix(in oklab, var(--danger) 45%, var(--border)); color: var(--danger); }
  .icon-btn--danger:hover { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); }
  [data-theme-toggle]:hover svg { transform: rotate(30deg); }

  /* botao de tema mostra sol (claro) ou lua (escuro) conforme o tema atual
     — puro CSS, mesmo gatilho (data-theme / prefers-color-scheme) que ja
     troca os tokens de cor, sem precisar de JS pra trocar o icone. */
  [data-theme-toggle] .theme-icon { display: contents; }
  [data-theme-toggle] .theme-icon--dark { display: none; }
  :root[data-theme="dark"] [data-theme-toggle] .theme-icon--light { display: none; }
  :root[data-theme="dark"] [data-theme-toggle] .theme-icon--dark { display: contents; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [data-theme-toggle] .theme-icon--light { display: none; }
    :root:not([data-theme="light"]) [data-theme-toggle] .theme-icon--dark { display: contents; }
  }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .stack { display: flex; flex-direction: column; gap: var(--sp-4); }
  .stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); }
  .row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
  .between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .muted { color: var(--text-soft); }
  .faint { color: var(--text-faint); }
  .mono { font-family: var(--font-mono); font-size: 0.85em; }
  .text-sm { font-size: var(--fs-sm); }
  .text-xs { font-size: var(--fs-xs); }
  .right { text-align: right; }
  .nowrap { white-space: nowrap; }
  .grow { flex: 1; }
  .hide { display: none !important; }
  .mt-auto { margin-top: auto; }
}

/* ---------- ABAS DE PÁGINA (barra horizontal com sublinhado) ----------
   Diferente das .chat-tabs (pílulas numa coluna estreita) — essas são pra
   separar seções de uma página larga (ex.: Boletim / Pausas em
   /performance/convert). Link com querystring (?aba=), SSR, sem JS. */
@layer components {
  .tabbar { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); }
  .tabbar__tab {
    padding: 10px 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-faint);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
  }
  .tabbar__tab:hover { color: var(--text); }
  .tabbar__tab--active { color: var(--brand-strong); border-color: var(--brand); }
  .tabbar__count { margin-left: 4px; opacity: 0.7; font-weight: 500; }
}

/* ---------- CHAT (módulo Atendimento / Digisac) ---------- */
@layer components {
  /* Preenche a altura do .container--full (que já é quase a janela inteira,
     ver regra acima) — nada de "% da tela" solto aqui, é o pai que manda. */
  .chat-wrap {
    display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-3); align-items: stretch;
    flex: 1; min-height: 460px;
  }
  @media (max-width: 820px) {
    .chat-wrap { grid-template-columns: 1fr; }
    .chat-wrap--has-active .chat-list-col { display: none; }
  }

  /* abas Chats / Fila / Contatos em cima da lista, mesmo padrao do Digisac
     original (ver captura que o Bruce mandou 2026-09-15) — cada aba e um
     link com querystring (?aba=), recarrega a lista do lado do servidor. */
  .chat-list-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; min-height: 0; }
  .chat-tabs {
    display: flex; gap: 2px; padding: 3px;
    background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border);
  }
  .chat-tab {
    flex: 1; text-align: center; padding: 6px 4px; border-radius: var(--r-sm);
    font-size: var(--fs-xs); font-weight: 650; color: var(--text-faint);
    transition: background var(--transition), color var(--transition);
  }
  .chat-tab:hover { color: var(--text); }
  .chat-tab--active { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow-xs); }
  .chat-tab__count { margin-left: 4px; opacity: 0.75; }
  /* botao "so nao lidas" encolhido dentro da propria barra de abas — sem
     pagina-titulo grande sobrando espaço em cima (topbar ja mostra o
     titulo "Chat"). */
  .chat-tabs__toggle {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 30px; border-radius: var(--r-sm); color: var(--text-faint);
    transition: background var(--transition), color var(--transition);
  }
  .chat-tabs__toggle:hover { background: var(--surface); color: var(--text); }
  .chat-tabs__toggle svg { width: 15px; height: 15px; }

  .chat-list {
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); overflow: hidden auto;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
  }
  .chat-list > .empty { margin: auto; }
  .chat-list__wait { font-size: var(--fs-xs); font-weight: 650; }
  .chat-list__wait--long { color: var(--danger); }
  .chat-list__item {
    display: block; padding: 12px 14px; border-bottom: 1px solid var(--border);
    color: var(--text); transition: background var(--transition);
  }
  .chat-list__item:last-child { border-bottom: 0; }
  .chat-list__item:hover { background: var(--surface-2); }
  .chat-list__item[aria-current="true"] {
    background: color-mix(in oklab, var(--brand) 12%, var(--surface));
    box-shadow: inset 3px 0 0 var(--brand);
  }
  .chat-list__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .chat-list__name {
    font-weight: 600; font-size: var(--fs-sm); color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chat-list__time { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }

  .chat-pane {
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); display: flex; flex-direction: column;
    height: 100%; min-height: 0; overflow: hidden;
  }
  /* sem conversa aberta: centraliza o "escolha uma conversa" no meio do
     painel (que agora é bem mais alto), em vez de ficar colado no topo. */
  .chat-pane > .empty { margin: auto; }
  .chat-pane__head {
    padding: 12px 14px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: var(--surface-2);
  }
  .chat-pane__head strong { color: var(--text); }
  .chat-thread {
    padding: 14px; overflow-y: auto; flex: 1;
    display: flex; flex-direction: column; gap: 8px; background: var(--bg);
  }
  .chat-thread--compact {
    max-height: 420px; border: 1px solid var(--border);
    border-radius: var(--r-sm); background: var(--bg);
  }

  .chat-msg { max-width: 78%; padding: 7px 11px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.4; }
  .chat-msg--in { align-self: flex-start; background: var(--surface-3); color: var(--text); border-bottom-left-radius: 3px; }
  .chat-msg--out { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 3px; }
  .chat-msg--out a, .chat-msg--out .chat-msg__text { color: #fff; }
  .chat-msg__text { white-space: pre-wrap; word-break: break-word; }
  .chat-msg__text.faint { color: var(--text-faint); }
  .chat-msg--out .chat-msg__text.faint { color: rgba(255, 255, 255, 0.75); }
  .chat-msg__media { margin-bottom: 4px; }
  .chat-msg__media img, .chat-msg__media video { cursor: zoom-in; border-radius: var(--r-sm); }
  .chat-msg__meta { font-size: var(--fs-xs); opacity: 0.72; margin-top: 3px; }

  .chat-pane__foot { padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); }
}

/* ---------- CHAT: avatar + divisor de dia ---------- */
@layer components {
  .avatar-pic { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
  .avatar-pic--initials {
    border-radius: 50%; background: color-mix(in oklab, var(--brand) 20%, var(--surface-3));
    color: var(--text-soft); font-weight: 650; flex: 0 0 auto; letter-spacing: -0.02em;
  }
  .chat-list__item { display: flex; gap: 10px; align-items: flex-start; }
  .chat-list__item > .avatar-pic { margin-top: 2px; }
  .chat-list__body { min-width: 0; flex: 1; }
  .chat-pane__head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .chat-pane__head-id strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .chat-day {
    align-self: center; font-size: var(--fs-xs); color: var(--text-soft);
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 2px 10px; border-radius: var(--r-full); margin: 6px 0;
  }
}

/* ===================================================================
   REFINO "PROFUNDIDADE" (2026-09-09)
   Leva o DNA da tela de login pra dentro do app: rail profundo, wash de
   marca, superficies em camadas, sombras refinadas, vidro. Bloco aditivo
   - remover daqui pra baixo reverte ao visual anterior.
   =================================================================== */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 140ms ease both; }
::view-transition-new(root) { animation: vt-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@layer tokens {
  :root {
    /* 2026-09-15: off-white "moderado" (pedido do Bruce) — este bloco é o
       que realmente vale (vem depois do primeiro :root lá em cima no
       arquivo, mesma especificidade, quem vem por último ganha). Achei
       isso testando: minha primeira tentativa de ajustar só o bloco de
       cima não tinha efeito nenhum na página, porque este aqui sobrescrevia
       tudo de novo. Mesmo esquema de ajuste (~0.02-0.03 de luminosidade a
       menos, tonalidade mantida). */
    --bg: oklch(0.93 0.008 245);
    --surface: oklch(0.968 0.005 240);
    --surface-2: oklch(0.945 0.007 245);
    --surface-3: oklch(0.918 0.009 245);
    --surface-sunken: oklch(0.923 0.008 245);
    --border: oklch(0.88 0.007 245);
    --border-strong: oklch(0.8 0.011 245);

    --shadow-xs: 0 1px 2px oklch(0.28 0.04 260 / 0.05);
    --shadow-sm: 0 1px 2px oklch(0.28 0.04 260 / 0.05), 0 3px 8px -2px oklch(0.28 0.04 260 / 0.06);
    --shadow-md: 0 1px 2px oklch(0.28 0.04 260 / 0.05), 0 8px 20px -6px oklch(0.28 0.04 260 / 0.1), 0 20px 40px -12px oklch(0.28 0.04 260 / 0.08);
    --shadow-lg: 0 2px 6px oklch(0.25 0.05 260 / 0.08), 0 24px 60px -16px oklch(0.22 0.05 260 / 0.24);

    /* rail claro no tema claro — segue o tema (antes era navy fixo) */
    --rail-bg: oklch(0.96 0.005 245);
    --rail-bg-2: oklch(0.93 0.014 255);
    --rail-text: oklch(0.30 0.021 260);
    --rail-text-soft: oklch(0.485 0.02 260);
    --rail-line: oklch(0.30 0.02 260 / 0.13);
    --rail-active-bg: color-mix(in oklab, var(--brand) 15%, transparent);
    --rail-active-fg: var(--brand-strong);

    /* 2ª rodada (pedido do Bruce, 2026-10-06): a 1ª tentativa deixou o
       topbar branco demais — ele quer que o topbar literalmente CONTINUE o
       degradê, não dependa de transparência pra "deixar passar" a cor de
       trás (frágil: depende de opacidade + blur combinarem certinho com o
       que está atrás, que muda). Solução: `--glass` já nasce com o MESMO
       tom azulado do degradê embutido na cor (não quase-branco), então o
       topbar bate com o conteúdo logo abaixo não importa o que role atrás. */
    --glass: oklch(0.91 0.027 250 / 0.75);
    --glass-line: oklch(1 0 0 / 0.5);
    /* sobe do topo (cobre a topbar de vidro) + toque radial pra ter caráter
       — bem mais discreto que antes (30%→10%, 24%→9%), pra ler como um
       tingimento de marca sutil, não uma faixa azul chapada. */
    --wash:
      linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, transparent), color-mix(in oklab, var(--brand) 3%, transparent) 45%, transparent 75%),
      radial-gradient(80% 65% at 18% -15%, color-mix(in oklab, var(--c-blue) 9%, transparent), transparent 65%);

    --ease-spring: cubic-bezier(0.34, 1.32, 0.58, 1);
    --transition: 170ms cubic-bezier(0.4, 0, 0.2, 1);
    --r-lg: 16px;

    --fs-2xl: clamp(1.55rem, 1.15rem + 1.7vw, 2.05rem);
    --fs-xl: clamp(1.25rem, 1.05rem + 0.7vw, 1.4rem);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: oklch(0.17 0.014 260);
      --surface: oklch(0.215 0.016 260);
      --surface-2: oklch(0.25 0.017 260);
      --surface-3: oklch(0.29 0.018 260);
      --surface-sunken: oklch(0.185 0.014 260);
      --border: oklch(0.3 0.014 260);
      --border-strong: oklch(0.4 0.018 260);
      --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.4);
      --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4), 0 4px 12px -3px oklch(0 0 0 / 0.45);
      --shadow-md: 0 2px 6px oklch(0 0 0 / 0.4), 0 12px 32px -8px oklch(0 0 0 / 0.6);
      --shadow-lg: 0 2px 8px oklch(0 0 0 / 0.5), 0 32px 64px -16px oklch(0 0 0 / 0.7);
      --rail-bg: oklch(0.145 0.014 262);
      --rail-bg-2: oklch(0.19 0.016 262);
      --rail-text: oklch(0.95 0.01 250);
      --rail-text-soft: oklch(0.66 0.02 250);
      --rail-line: oklch(1 0 0 / 0.07);
      --rail-active-bg: linear-gradient(100deg, color-mix(in oklab, var(--brand) 30%, transparent), color-mix(in oklab, var(--brand) 12%, transparent));
      --rail-active-fg: #fff;
      --glass: oklch(0.22 0.016 260 / 0.7);
      --glass-line: oklch(1 0 0 / 0.09);
      --wash:
        linear-gradient(180deg, color-mix(in oklab, var(--brand) 12%, transparent), transparent 60%),
        radial-gradient(90% 70% at 22% -20%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 70%);
    }
  }
  :root[data-theme="dark"] {
    --bg: oklch(0.17 0.014 260);
    --surface: oklch(0.215 0.016 260);
    --surface-2: oklch(0.25 0.017 260);
    --surface-3: oklch(0.29 0.018 260);
    --surface-sunken: oklch(0.185 0.014 260);
    --border: oklch(0.3 0.014 260);
    --border-strong: oklch(0.4 0.018 260);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4), 0 4px 12px -3px oklch(0 0 0 / 0.45);
    --shadow-md: 0 2px 6px oklch(0 0 0 / 0.4), 0 12px 32px -8px oklch(0 0 0 / 0.6);
    --shadow-lg: 0 2px 8px oklch(0 0 0 / 0.5), 0 32px 64px -16px oklch(0 0 0 / 0.7);
    --rail-bg: oklch(0.145 0.014 262);
    --rail-bg-2: oklch(0.19 0.016 262);
    --rail-text: oklch(0.95 0.01 250);
    --rail-text-soft: oklch(0.66 0.02 250);
    --rail-line: oklch(1 0 0 / 0.07);
    --rail-active-bg: linear-gradient(100deg, color-mix(in oklab, var(--brand) 30%, transparent), color-mix(in oklab, var(--brand) 12%, transparent));
    --rail-active-fg: #fff;
    --glass: oklch(0.22 0.016 260 / 0.7);
    --glass-line: oklch(1 0 0 / 0.09);
    --wash:
      linear-gradient(180deg, color-mix(in oklab, var(--brand) 12%, transparent), transparent 60%),
      radial-gradient(90% 70% at 22% -20%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 70%);
  }
}

@layer base {
  h1, h2 { text-wrap: balance; }
  p, .page-head p, li { text-wrap: pretty; }
  :where(.kpi__value, td.right, .mono, table.data td, .chat-list__time) { font-variant-numeric: tabular-nums; }
}

@layer layout {
  .sidebar {
    background: linear-gradient(180deg, var(--rail-bg-2), var(--rail-bg) 42%);
    border-right: none;
    box-shadow: inset -1px 0 0 var(--rail-line), 6px 0 24px -12px oklch(0 0 0 / 0.25);
    --text: var(--rail-text);
    --text-soft: var(--rail-text-soft);
    --text-faint: var(--rail-text-soft);
    /* overlays derivados da cor do texto do rail: escuros no rail claro,
       claros no rail escuro, sem depender de valor fixo */
    --surface-2: color-mix(in oklab, var(--rail-text) 7%, transparent);
    --surface-3: color-mix(in oklab, var(--rail-text) 13%, transparent);
    --border: var(--rail-line);
  }
  .sidebar__brand { color: var(--rail-text); }
  .sidebar__mark { box-shadow: 0 0 0 1px var(--rail-line), 0 4px 12px -4px oklch(0 0 0 / 0.3); }
  .nav-group__label { color: color-mix(in oklab, var(--rail-text) 50%, transparent); }
  .nav-link { color: var(--rail-text-soft); font-weight: 500; }
  .nav-link:hover { background: color-mix(in oklab, var(--rail-text) 7%, transparent); color: var(--rail-text); }
  .nav-link[aria-current="page"] {
    background: var(--rail-active-bg);
    color: var(--rail-active-fg); font-weight: 600;
    box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--brand) 45%, transparent);
  }
  .nav-link[aria-current="page"]::before {
    background: var(--brand);
    box-shadow: 0 0 12px color-mix(in oklab, var(--brand) 55%, transparent);
  }

  .topbar {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-line);
    box-shadow: 0 1px 0 var(--border), 0 8px 24px -16px oklch(0 0 0 / 0.2);
  }

  /* wash de marca cobrindo topbar + início do conteúdo (a topbar de vidro
     deixa transparecer). Fica em .main (não rola com o conteúdo). */
  .main { position: relative; isolation: isolate; }
  .main::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 460px; z-index: -1;
    background: var(--wash); pointer-events: none;
  }
  .container { max-width: 1200px; }
  .page-head h1 { letter-spacing: -0.025em; }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
}

@layer components {
  .card {
    border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    box-shadow: var(--shadow-sm);
  }
  .card__head {
    border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 3.5%, transparent), transparent);
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  }
  .card__head h3 { letter-spacing: -0.015em; }
  a.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklab, var(--brand) 30%, var(--border));
  }

  .kpi { box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(1 0 0 / 0.5); }
  :root:not([data-theme="light"]) .kpi,
  :root[data-theme="dark"] .kpi { box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(1 0 0 / 0.06); }
  .kpi__value { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.1rem); }
  .kpi__label { letter-spacing: 0.08em; }

  .btn {
    border-radius: 10px;
    transition: background var(--transition), border-color var(--transition), transform 140ms var(--ease-spring), box-shadow var(--transition), filter var(--transition);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn--primary {
    background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 92%, white), var(--brand));
    box-shadow: var(--shadow-xs), inset 0 1px 0 oklch(1 0 0 / 0.25), 0 8px 20px -8px color-mix(in oklab, var(--brand) 55%, transparent);
  }
  .btn--primary:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(1 0 0 / 0.3), 0 12px 26px -8px color-mix(in oklab, var(--brand) 60%, transparent);
  }
  .btn--ghost { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-xs); }
  .btn--subtle { background: color-mix(in oklab, var(--surface-2) 80%, transparent); }

  .input, .select, .textarea {
    background: var(--surface-sunken); border-color: var(--border);
    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.04);
    border-radius: 10px;
  }
  .input:focus, .select:focus, .textarea:focus {
    background: var(--surface);
    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.03), 0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent);
  }

  .table-wrap { border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
  .table-wrap.is-scrollable { box-shadow: var(--shadow-sm), inset -24px 0 16px -16px color-mix(in oklab, var(--text) 22%, transparent); }
  table.data { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
  table.data thead th {
    text-transform: none; letter-spacing: 0; font-weight: 600;
    color: var(--text-soft); background: transparent;
    border-bottom: 1.5px solid var(--border-strong);
    padding-top: 0.9rem; padding-bottom: 0.7rem;
  }
  table.data td { border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }
  table.data tbody tr:hover { background: color-mix(in oklab, var(--brand) 5%, transparent); }

  .toolbar { border: none; box-shadow: var(--shadow-sm); background: var(--surface); }
  .badge { padding: 3px 10px; }

  :focus-visible { outline: 2px solid color-mix(in oklab, var(--brand) 70%, transparent); outline-offset: 2px; }
}

/* ---------- CHAT: compositor (Fase 2) ---------- */
@layer components {
  .chat-composer { padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
  .chat-composer__mode { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-soft); align-self: flex-start; cursor: pointer; }
  .chat-composer__mode input { width: 14px; height: 14px; accent-color: var(--warn); }
  .chat-composer__row { display: flex; gap: 8px; align-items: flex-end; }
  .chat-composer__input {
    flex: 1; resize: none; max-height: 140px; min-height: 40px;
    padding: 9px 12px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); font: inherit; line-height: 1.4;
  }
  .chat-composer__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); }
  .chat-composer__send { flex: 0 0 auto; height: 40px; width: 44px; padding: 0; border-radius: 12px; }
  .chat-composer__send svg { width: 18px; height: 18px; }
  .chat-composer[data-mode="comment"] { background: color-mix(in oklab, var(--warn) 10%, var(--surface-2)); }
  .chat-composer[data-mode="comment"] .chat-composer__input { border-color: color-mix(in oklab, var(--warn) 45%, var(--border)); }
  .chat-composer__err { margin: 0; }

  .chat-msg--pending { opacity: 0.6; }
  .chat-msg--failed { outline: 1px solid var(--danger); }
  .chat-msg--comment { align-self: center; max-width: 90%; background: color-mix(in oklab, var(--warn) 16%, var(--surface)); color: var(--text); border: 1px dashed color-mix(in oklab, var(--warn) 50%, var(--border)); border-radius: var(--r-sm); }
  .chat-msg--comment .chat-msg__meta::before { content: "nota interna · "; }
}

@layer components {
  .chat-composer--locked { background: color-mix(in oklab, var(--warn) 8%, var(--surface-2)); color: var(--text-soft); }
  .chat-composer--locked p { margin: 0; }
}

/* ---------- CHAT: anexo + gravação (Fase 2b) ---------- */
@layer components {
  .chat-composer__row .icon-btn { flex: 0 0 auto; width: 38px; height: 40px; border-radius: 10px; }
  .chat-composer__attach { padding: 4px 2px; }
  .chat-attach-preview {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); max-width: 100%;
  }
  .chat-attach-preview .icon-btn { width: 24px; height: 24px; }
  .chat-composer[data-recording] { background: color-mix(in oklab, var(--danger) 12%, var(--surface-2)); }
  .chat-composer[data-recording] [data-composer-mic-btn] { border-color: var(--danger); }
  .rec-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--danger); animation: rec-pulse 1s ease-in-out infinite;
  }
  @keyframes rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
}

/* ---------- CHAT: ações de chamado + reações (Fase 2c) ---------- */
@layer components {
  .chat-ticket-menu { position: relative; }
  .chat-ticket-menu > summary { list-style: none; cursor: pointer; }
  .chat-ticket-menu > summary::-webkit-details-marker { display: none; }
  .chat-ticket-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    width: 260px; display: flex; flex-direction: column; gap: 2px;
    padding: 12px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  }

  .chat-msg { position: relative; }
  .chat-msg__react {
    position: absolute; top: -14px; display: flex; gap: 1px;
    padding: 2px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    opacity: 0; transform: scale(0.9); pointer-events: none;
    transition: opacity 120ms, transform 120ms;
  }
  .chat-msg--in .chat-msg__react { left: 4px; }
  .chat-msg--out .chat-msg__react { right: 4px; }
  .chat-msg:hover .chat-msg__react { opacity: 1; transform: none; pointer-events: auto; }
  .chat-msg__react button {
    width: 24px; height: 24px; border-radius: 50%; font-size: 13px; line-height: 1;
    display: grid; place-items: center; transition: background 120ms, transform 120ms;
  }
  .chat-msg__react button:hover { background: var(--surface-2); transform: scale(1.2); }
  .chat-msg__react button.reacted { background: color-mix(in oklab, var(--brand) 25%, transparent); transform: scale(1.1); }
  .chat-msg__react button[disabled] { opacity: 0.5; }
}

@layer components {
  .chat-msg__reactions { display: flex; gap: 2px; margin-top: 3px; }
  .chat-msg__reactions span {
    font-size: 12px; line-height: 1; padding: 2px 5px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--border);
  }
  .chat-msg--out .chat-msg__reactions { justify-content: flex-end; }
}

/* ═══ PAINEL NOVO + SIDEBAR REORGANIZADA (2026-09-09) ═══ */

@layer layout {
  /* sidebar: nome + tag + nav rolável + rodapé fixo */
  .sidebar { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .sidebar__brand { align-items: center; gap: 9px; padding: var(--sp-2) var(--sp-1) var(--sp-4); font-size: inherit; }
  .sidebar__brand > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .sidebar__mark { width: 34px; height: 34px; }
  .sidebar__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.1; color: var(--rail-text); }
  .sidebar__tag {
    font-size: 9.5px; line-height: 1.3; color: var(--rail-text-soft);
    text-transform: uppercase; letter-spacing: 0.03em; white-space: normal;
  }
  .sidebar__nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }
  .sidebar__foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--rail-line); display: flex; flex-direction: column; gap: 2px; }
  .sidebar__status { display: flex; align-items: center; gap: 10px; padding: 6px var(--sp-3) 10px; }
  .sidebar__status > div { display: flex; flex-direction: column; line-height: 1.2; }
  .sidebar__status .text-sm { color: var(--rail-text); }
  .sidebar__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 25%, transparent); flex: none; }

  .nav-badge {
    margin-left: auto; font-size: 10px; font-weight: 700; line-height: 1;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    display: inline-grid; place-items: center;
    background: var(--brand); color: #fff;
  }
  .nav-parent { position: relative; }
  .nav-parent > summary { list-style: none; cursor: pointer; }
  .nav-parent > summary::-webkit-details-marker { display: none; }
  .nav-parent__chev { margin-left: auto; transition: transform var(--transition); opacity: 0.6; }
  .nav-parent__chev svg { width: 15px; height: 15px; }
  .nav-parent[open] > summary .nav-parent__chev { transform: rotate(90deg); }
  .nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; padding-left: 30px; position: relative; }
  .nav-sub::before { content: ""; position: absolute; left: 16px; top: 4px; bottom: 8px; width: 1px; background: var(--rail-line); }
  .nav-link--sub { padding: 6px 10px; font-size: var(--fs-xs); }
}

@layer components {
  /* ── layout do painel ── */
  .dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }
  .dash__main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
  .dash__rail { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
  @media (max-width: 1080px) { .dash { grid-template-columns: 1fr; } .dash__rail { position: static; } }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

  /* ── hero ── */
  /* hero: adapta ao tema — claro no tema claro, escuro no escuro */
  .dash-hero {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg); padding: clamp(22px, 3.2vw, 38px);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    color: var(--text);
    border: 1px solid var(--border);
    background:
      radial-gradient(120% 150% at 6% -10%, color-mix(in oklab, var(--c-blue) 22%, transparent), transparent 58%),
      radial-gradient(90% 130% at 102% 110%, color-mix(in oklab, var(--c-green) 14%, transparent), transparent 55%),
      linear-gradient(120deg, color-mix(in oklab, var(--c-blue) 9%, var(--surface)), var(--surface));
    box-shadow: var(--shadow-sm);
  }
  .dash-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(color-mix(in oklab, var(--brand) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--brand) 8%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 70% at 25% 30%, #000 20%, transparent 100%);
  }
  .dash-hero__text { position: relative; z-index: 1; }
  .dash-hero__text h1 { color: var(--text); font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.1rem); letter-spacing: -0.025em; }
  .dash-hero__text p { color: var(--text-soft); margin-top: 8px; max-width: 46ch; }
  .dash-hero__logo { position: relative; z-index: 1; height: clamp(56px, 6vw, 78px); width: auto; flex: none; }
  @media (max-width: 620px) { .dash-hero__logo { display: none; } }
  /* texto navy do logo some no hero escuro — troca pra versao com o texto
     branco (mesmo gatilho data-theme / prefers-color-scheme do sol/lua). */
  .dash-hero__logo--dark { display: none; }
  :root[data-theme="dark"] .dash-hero__logo--light { display: none; }
  :root[data-theme="dark"] .dash-hero__logo--dark { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dash-hero__logo--light { display: none; }
    :root:not([data-theme="light"]) .dash-hero__logo--dark { display: block; }
  }
  @media (max-width: 620px) { .dash-hero__logo--dark { display: none; } }

  /* versão escura do hero */
  :root:not([data-theme="light"]) .dash-hero,
  :root[data-theme="dark"] .dash-hero {
    color: #fff; border-color: transparent;
    background:
      radial-gradient(120% 150% at 6% -10%, color-mix(in oklab, var(--c-blue) 50%, transparent), transparent 58%),
      radial-gradient(90% 130% at 102% 110%, color-mix(in oklab, var(--c-green) 28%, transparent), transparent 55%),
      linear-gradient(120deg, oklch(0.25 0.05 255), oklch(0.17 0.03 262));
    box-shadow: var(--shadow-md), inset 0 1px 0 oklch(1 0 0 / 0.08);
  }
  :root:not([data-theme="light"]) .dash-hero__text h1,
  :root[data-theme="dark"] .dash-hero__text h1 { color: #fff; }
  :root:not([data-theme="light"]) .dash-hero__text p,
  :root[data-theme="dark"] .dash-hero__text p { color: oklch(1 0 0 / 0.74); }
  :root:not([data-theme="light"]) .dash-hero::after,
  :root[data-theme="dark"] .dash-hero::after {
    background-image: linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  }

  /* ── KPI trend ── */
  .kpi__trend {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    font-size: var(--fs-xs); font-weight: 600; color: var(--kpi-color);
  }
  .kpi__trend svg { width: 13px; height: 13px; }
  a.kpi { text-decoration: none; color: inherit; }

  /* ── barras ── */
  .bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
  .bar__fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 99px; }

  /* ── feed (atividade + notificações) ── */
  .feed { display: flex; flex-direction: column; }
  .feed__item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); color: inherit; text-decoration: none; }
  .feed__item:last-child { border-bottom: 0; }
  a.feed__item:hover, .feed__item--notif[href]:hover { background: color-mix(in oklab, var(--brand) 5%, transparent); }
  .feed__body { flex: 1; min-width: 0; }
  .feed__avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent)); text-transform: uppercase; }
  .feed__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; }
  .feed__dot--brand { background: var(--brand); }
  .feed__dot--ok { background: var(--ok); }
  .feed__dot--warn { background: var(--warn); }
  .feed__dot--danger { background: var(--danger); }

  /* ── acesso rápido ── */
  .quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .quick__btn {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 10px; border-radius: 12px; text-align: center;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft);
    font-size: var(--fs-sm); font-weight: 600;
    transition: transform 140ms var(--ease-spring), border-color var(--transition), color var(--transition), background var(--transition);
  }
  .quick__btn svg { width: 20px; height: 20px; }
  .quick__btn:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand) 40%, var(--border)); color: var(--brand-strong); background: var(--surface); }

  /* ── dica + citação ── */
  .dash .card__head h3 { display: flex; align-items: center; gap: 6px; }
  .dash .card__head h3 svg { width: 16px; height: 16px; color: var(--accent); }
  .dash-tip {
    background:
      radial-gradient(120% 130% at 100% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
      var(--surface);
  }
  .dash-tip .card__body p { color: var(--text-soft); }

  /* citação: adapta ao tema, igual o hero */
  .dash-quote {
    position: relative; overflow: hidden; color: var(--text); padding: var(--sp-5);
    display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--border);
    background:
      radial-gradient(110% 140% at 100% -10%, color-mix(in oklab, var(--c-amber) 16%, transparent), transparent 55%),
      linear-gradient(140deg, color-mix(in oklab, var(--brand) 7%, var(--surface)), var(--surface));
  }
  :root:not([data-theme="light"]) .dash-quote,
  :root[data-theme="dark"] .dash-quote {
    color: #fff; border-color: transparent;
    background:
      radial-gradient(110% 140% at 100% -10%, color-mix(in oklab, var(--c-amber) 28%, transparent), transparent 55%),
      linear-gradient(140deg, oklch(0.25 0.05 255), oklch(0.16 0.03 262));
  }
  .dash-quote__mark { opacity: 0.4; color: var(--accent); }
  .dash-quote__mark svg { width: 26px; height: 26px; }
  .dash-quote p { font-size: 1.05rem; font-weight: 600; line-height: 1.4; text-wrap: balance; }
  .dash-quote__logo { width: 26px; height: 26px; border-radius: 7px; margin-top: 4px; }

  /* ── Central de E-mails: lista + detalhe (mestre-detalhe, parecido com um
     inbox de verdade) — pedido do Bruce, 2026-09-16. ── */
  .email-shell { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--sp-4); align-items: start; }

  /* Projetos por setor (2026-10-20): abas + Lista/Quadro + filtros num card. */
  .sector-bar { margin-bottom: var(--sp-4); overflow: hidden; }
  .sector-bar__top {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-4) 0; border-bottom: 1px solid var(--border);
  }
  .sector-bar__tabs { border-bottom: 0; margin-bottom: 0; flex-wrap: wrap; }
  .sector-bar .toolbar { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: var(--sp-3) var(--sp-4); }
  .segmented { display: inline-flex; padding: 3px; margin-bottom: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
  .segmented__item {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 560; color: var(--text-soft); text-decoration: none;
  }
  .segmented__item svg { width: 15px; height: 15px; }
  .segmented__item.is-active { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow-xs); }

  /* Quadro: colunas por status, rolagem lateral só se não couber. */
  .pboard { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(195px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); align-items: start; }
  .pboard__col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-2); min-height: 180px; transition: border-color var(--transition), background var(--transition); }
  .pboard__col.is-over { border-color: var(--brand); background: var(--brand-soft); }
  .pboard__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px var(--sp-2); }
  .pboard__cards { display: flex; flex-direction: column; gap: var(--sp-2); }
  .pboard__empty { margin: var(--sp-3) 6px; }
  .pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--shadow-xs); }
  .pcard[draggable="true"] { cursor: grab; }
  .pcard.is-dragging { opacity: .45; }
  .pcard--late { border-left: 3px solid var(--c-red); }
  .pcard__title { display: block; font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
  .pcard__title:hover { color: var(--brand-strong); }
  .pcard__client { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
  .pcard__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
  .pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; min-height: 22px; }

  /* Bloco da caixa no topo (2026-10-20): abas + números clicáveis + filtros
     num card só, a lista vem logo depois. */
  .mailbox-bar { margin-bottom: var(--sp-3); overflow: hidden; }
  .mailbox-bar__top {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-4) 0; border-bottom: 1px solid var(--border);
  }
  .mailbox-bar__tabs { border-bottom: 0; margin-bottom: 0; }
  .mailbox-bar__stats { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: var(--sp-2); }
  .mailbox-stat {
    display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px; border-radius: 99px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft);
    font-size: var(--fs-xs); text-decoration: none; transition: border-color var(--transition), background var(--transition);
  }
  .mailbox-stat strong { font-size: var(--fs-sm); color: var(--text); }
  .mailbox-stat:hover { border-color: var(--brand); }
  .mailbox-stat.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
  .mailbox-stat.is-active strong { color: var(--brand-strong); }
  .mailbox-bar__filters .toolbar { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: var(--sp-3) var(--sp-4); }
  /* "Buscar e-mails de um período" dentro do bloco, logo abaixo dos filtros. */
  .mailbox-bar__fetch {
    display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-4) var(--sp-3); border-top: 1px dashed var(--border);
  }
  .mailbox-fetch-form { flex-basis: 100%; display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-1); }
  .mailbox-fetch-form[hidden] { display: none; }
  .mailbox-fetch-form .field { flex: 0 1 200px; }
  .mailbox-fetch-form .field:first-of-type { flex-basis: 280px; }
  .mailbox-fetch-form__hint { flex-basis: 100%; margin: 0; }
  .mailbox-bar__note { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 0 var(--sp-4) var(--sp-3); }
  .mailbox-bar__note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

  /* "Configurações da caixa", recolhido no fim da página. */
  .email-tools__summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; font-weight: 600;
  }
  .email-tools__summary::-webkit-details-marker { display: none; }
  .email-tools__summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
  .email-tools__summary svg { width: 16px; height: 16px; }
  .email-tools[open] .email-tools__summary { border-bottom: 1px solid var(--border); }
  .email-tools__section + .email-tools__section { padding-top: var(--sp-3); border-top: 1px dashed var(--border); }
  .email-tools__section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
  @media (max-width: 860px) { .email-shell { grid-template-columns: 1fr; } }
  .email-list {
    display: flex; flex-direction: column; max-height: 74vh; overflow-y: auto;
    padding: 4px;
  }
  .email-row {
    display: block; padding: 10px 12px; border-radius: var(--r-md);
    border: 1px solid transparent; color: inherit; text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
  }
  .email-row + .email-row { margin-top: 2px; }
  .email-row:hover { background: var(--surface-2); }
  .email-row--active { background: color-mix(in oklab, var(--brand) 10%, transparent); border-color: color-mix(in oklab, var(--brand) 30%, transparent); }
  .email-row__top { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
  .email-row__from { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
  .email-row--unread .email-row__from,
  .email-row--unread .email-row__subject { color: var(--text); font-weight: 700; }
  .email-row__date { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; flex: none; }
  .email-row__subject { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .email-row__tags { display: flex; gap: 6px; margin-top: 6px; }
  .email-detail { min-width: 0; }
  /* Corpo do e-mail em HTML: sandbox="" sem allow-same-origin isola de
     verdade (sem script, sem acesso ao DOM da página) — e-mail é conteúdo
     não confiável, mesmo vindo de gente conhecida (assinatura/imagem podem
     trazer HTML malformado ou de terceiros). Por isso não dá pra
     redimensionar pela altura real do conteúdo (o "sandbox" bloqueia esse
     acesso também) — altura fixa com rolagem própria. */
  /* fundo fixo (nao usa var(--surface)) igual ao tom off-white do tema claro
     — no claro fica quase imperceptivel de tao parecido com o resto da
     pagina; no escuro continua claro de proposito (texto de assinatura vem
     com cor fixa do remetente, um fundo escuro deixaria ilegivel). Truque de
     inverter cores no escuro foi testado e revertido (2026-09-16, "ficou
     feio" — pedido do Bruce): o filter:invert deixa cores/gradientes de
     e-mail real com aparencia estranha, nao vale a pena pelo ganho. */
  .email-body-frame { width: 100%; height: 420px; border: 1px solid oklch(0.88 0.008 250); border-radius: var(--r-md); background: oklch(0.965 0.006 250); }
}

/* Guia do Portal (/guia, pedido do Bruce, 2026-10-20; "polida" no mesmo dia).
   Cada grupo do menu tem um tom (--tone) tirado das cores da marca, nunca cor
   inventada; Primeiros passos e o quadro de avisos seguem a cor de destaque
   de quem está vendo. --tone-ink é a versão legível pra texto, nos dois temas. */
@layer components {
  .guide-tone--comeco, .guide-tone--auto { --tone: var(--brand); }
  .guide-tone--atendimento { --tone: var(--c-blue); }
  .guide-tone--ferramentas { --tone: #0a9bb5; }
  .guide-tone--pessoas { --tone: var(--c-green); }
  .guide-tone--gestao { --tone: var(--c-amber); }
  .guide-tone--sistema { --tone: var(--c-silver); }
  [class*="guide-tone--"] { --tone-ink: color-mix(in oklab, var(--tone) 72%, var(--text)); --tone-soft: color-mix(in oklab, var(--tone) 12%, transparent); }

  /* topo */
  .guide-hero {
    position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: var(--sp-6); margin-bottom: var(--sp-6); box-shadow: var(--shadow-sm);
    background:
      radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 55%),
      radial-gradient(90% 120% at 0% 100%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%),
      var(--surface);
  }
  .guide-hero__top { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
  .guide-hero__icon {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: var(--shadow-md);
  }
  .guide-hero__icon svg { width: 28px; height: 28px; }
  .guide-hero__text { flex: 1; min-width: 220px; }
  .guide-hero__text h1 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; }
  .guide-hero__text p { margin: 4px 0 0; color: var(--text-soft); }
  .guide-hero__stats { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .guide-hero__stats div {
    display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 10px 14px;
    border-radius: var(--r-md); background: color-mix(in oklab, var(--surface) 70%, transparent);
    border: 1px solid var(--border);
  }
  .guide-hero__stats strong { font-size: 1.35rem; line-height: 1.1; color: var(--brand); }
  .guide-hero__stats span { font-size: var(--fs-xs); color: var(--text-faint); text-align: center; }
  .guide-hero__search {
    display: flex; align-items: center; gap: 10px; margin-top: var(--sp-5); padding: 0 14px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .guide-hero__search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent); }
  .guide-hero__search svg { width: 18px; height: 18px; color: var(--text-faint); flex: none; }
  .guide-hero__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; padding: 12px 0; }
  .guide-index { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
  .guide-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px;
    background: var(--tone-soft); color: var(--tone-ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
    border: 1px solid color-mix(in oklab, var(--tone) 22%, transparent); transition: transform var(--transition), background var(--transition);
  }
  .guide-chip svg { width: 15px; height: 15px; }
  .guide-chip:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--tone) 20%, transparent); }
  .guide-empty { margin: var(--sp-4) 0 0; color: var(--text-faint); font-size: var(--fs-sm); }

  /* seções */
  .guide-section { scroll-margin-top: 16px; }
  .guide-section + .guide-section { margin-top: 2.75rem; }
  .guide-section__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .guide-section__head h2 { margin: 0; font-size: 1.2rem; letter-spacing: -0.01em; }
  .guide-section__head p { margin: 2px 0 0; color: var(--text-soft); font-size: var(--fs-sm); }
  .guide-tile {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none;
    background: var(--tone-soft); color: var(--tone-ink); border: 1px solid color-mix(in oklab, var(--tone) 25%, transparent);
  }
  .guide-tile svg { width: 21px; height: 21px; }
  .guide-tile--sm { width: 34px; height: 34px; border-radius: 10px; }
  .guide-tile--sm svg { width: 17px; height: 17px; }

  /* cards */
  .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--sp-4); align-items: start; }
  .guide-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    scroll-margin-top: 16px; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  }
  .guide-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: linear-gradient(180deg, var(--tone), color-mix(in oklab, var(--tone) 30%, transparent));
  }
  .guide-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in oklab, var(--tone) 35%, var(--border)); }
  .guide-card.is-locked { background: color-mix(in oklab, var(--surface) 65%, var(--surface-2)); }
  .guide-card.is-locked .guide-tile { filter: grayscale(0.7); opacity: 0.75; }
  .guide-card__head { display: flex; align-items: center; gap: var(--sp-3); }
  .guide-card__head h3 { flex: 1; min-width: 0; margin: 0; font-size: 1.02rem; }
  .guide-access {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--text-soft);
  }
  .guide-access svg { width: 12px; height: 12px; }
  .guide-access--ok { background: color-mix(in oklab, var(--c-green) 14%, transparent); color: color-mix(in oklab, var(--c-green) 75%, var(--text)); }
  .guide-access--locked { color: var(--text-faint); }
  .guide-card__summary { margin: 0; line-height: 1.6; color: var(--text); }
  .guide-card__label {
    display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint);
  }
  .guide-card__label svg { width: 13px; height: 13px; }
  .guide-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: var(--fs-sm); line-height: 1.5; }
  .guide-checks li { display: flex; gap: 8px; align-items: flex-start; }
  .guide-checks svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--tone-ink); }
  .guide-card__auto {
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--tone-soft);
    border: 1px dashed color-mix(in oklab, var(--tone) 35%, transparent);
  }
  .guide-card__auto .guide-card__label { color: var(--tone-ink); }
  .guide-card__auto ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 5px; font-size: var(--fs-sm); line-height: 1.5; }
  .guide-card__foot { margin-top: auto; padding-top: var(--sp-1); display: flex; justify-content: flex-end; }
  .guide-open {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; text-decoration: none;
    font-size: var(--fs-sm); font-weight: 600; color: var(--tone-ink); background: var(--tone-soft);
    transition: gap var(--transition), background var(--transition);
  }
  .guide-open svg { width: 15px; height: 15px; }
  .guide-open:hover { gap: 10px; background: color-mix(in oklab, var(--tone) 22%, transparent); }
  .guide-locked-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-faint); }
  .guide-locked-note svg { width: 13px; height: 13px; }

  /* linha do tempo "O Portal faz sozinho" */
  .guide-timeline {
    list-style: none; margin: 0; padding: var(--sp-4) var(--sp-5); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  }
  .guide-timeline__item { position: relative; display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; }
  .guide-timeline__item:not(:last-child)::after {
    content: ""; position: absolute; left: 17px; top: 50px; bottom: -10px; width: 2px; background: var(--border);
  }
  .guide-timeline__dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
  .guide-timeline__dot svg { width: 17px; height: 17px; }
  .guide-timeline__dot.is-aviso { background: color-mix(in oklab, var(--c-amber) 20%, var(--surface)); color: color-mix(in oklab, var(--c-amber) 70%, var(--text)); }
  .guide-timeline__dot.is-regra { background: color-mix(in oklab, var(--brand) 15%, var(--surface)); color: var(--brand); }
  .guide-timeline__body { flex: 1; min-width: 0; padding-top: 6px; }
  .guide-timeline__when { font-weight: 650; }
  .guide-timeline__what { margin-top: 2px; color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.5; }
  .guide-timeline__who {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
    background: var(--surface-2); color: var(--text-soft); font-size: var(--fs-xs); font-weight: 600;
  }
  .guide-timeline__who svg { width: 12px; height: 12px; flex: none; }

  [data-guide-item][hidden], [data-guide-section][hidden], [data-guide-row][hidden] { display: none !important; }

  @media (max-width: 640px) {
    .guide-hero { padding: var(--sp-4); }
    .guide-hero__stats { width: 100%; }
    .guide-hero__stats div { flex: 1; min-width: 0; padding: 8px; }
    .guide-card { padding: var(--sp-4); }
    .guide-card__head { flex-wrap: wrap; }
    .guide-timeline { padding: var(--sp-2) var(--sp-4); }
    /* no celular o topo já fica apertado; lá a guia está no rodapé do menu */
    .topbar__guide { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .guide-card, .guide-chip, .guide-open { transition: none; }
    .guide-card:hover, .guide-chip:hover { transform: none; }
  }
}

/* Demonstração em vídeo nos cards da Guia (pedido do Bruce, 2026-10-20:
   "um gif ao clicar"). Miniatura com play + janela que toca em loop. */
@layer components {
  .guide-demo {
    position: relative; display: block; width: 100%; aspect-ratio: 1280 / 760; padding: 0; overflow: hidden; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
    box-shadow: var(--shadow-xs); transition: box-shadow var(--transition), border-color var(--transition);
  }
  .guide-demo img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), filter var(--transition); filter: saturate(0.9); }
  .guide-demo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15, 23, 42, 0.55)); }
  .guide-demo__play {
    position: absolute; left: 50%; top: 50%; z-index: 1; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--tone), color-mix(in oklab, var(--tone) 55%, var(--accent)));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 0 6px color-mix(in oklab, #fff 35%, transparent); transition: transform var(--transition);
  }
  .guide-demo__play svg { width: 24px; height: 24px; margin-left: 3px; }
  .guide-demo__label {
    position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  .guide-demo:hover, .guide-demo:focus-visible { border-color: color-mix(in oklab, var(--tone) 45%, var(--border)); box-shadow: var(--shadow-md); }
  .guide-demo:hover img { transform: scale(1.04); filter: none; }
  .guide-demo:hover .guide-demo__play { transform: scale(1.08); }
  .guide-demo:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  .guide-player {
    position: fixed; inset: 0; margin: auto; height: fit-content;
    width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  }
  .guide-player[open] { animation: guide-pop 220ms cubic-bezier(0.16, 1, 0.3, 1); }
  .guide-player::backdrop { background: rgba(10, 15, 30, 0.6); backdrop-filter: blur(3px); }
  @keyframes guide-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
  .guide-player__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
  .guide-player__head h3 { flex: 1; min-width: 0; margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .guide-player__badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px; border-radius: 999px; flex: none;
    font-size: var(--fs-xs); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent));
  }
  .guide-player__badge svg { width: 12px; height: 12px; }
  .guide-player video { display: block; width: 100%; height: auto; max-height: calc(100vh - 170px); background: #0f172a; aspect-ratio: 1280 / 760; }
  .guide-player__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
  .guide-player__foot [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    .guide-demo img, .guide-demo__play { transition: none; }
    .guide-demo:hover img, .guide-demo:hover .guide-demo__play { transform: none; }
    .guide-player[open] { animation: none; }
  }
}
@layer components {
  /* botões de som e "ouvir de novo" na janela da demonstração */
  .guide-player__controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .guide-sound {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600;
    transition: background var(--transition), border-color var(--transition);
  }
  .guide-sound svg { width: 16px; height: 16px; }
  .guide-sound:hover { border-color: var(--brand); }
  .guide-sound .guide-sound__off { display: none; }
  .guide-sound.is-off { color: var(--text-faint); }
  .guide-sound.is-off .guide-sound__on { display: none; }
  .guide-sound.is-off .guide-sound__off { display: inline; }
}

/* Guia › "Performance em detalhe" (pedido do Bruce, 2026-10-20). */
@layer components {
  .guide-card--wide { grid-column: 1 / -1; }
  .guide-perf-alert {
    display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--c-amber) 40%, transparent);
    background: color-mix(in oklab, var(--c-amber) 12%, var(--surface)); line-height: 1.55;
  }
  .guide-perf-alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: color-mix(in oklab, var(--c-amber) 70%, var(--text)); }

  .guide-perf-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
  .guide-perf-tiers div { display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: var(--r-md); background: var(--tone-soft); text-align: center; }
  .guide-perf-tiers strong { font-size: 1.15rem; color: var(--tone-ink); }
  .guide-perf-tiers span { font-size: var(--fs-xs); color: var(--text-soft); }
  .guide-perf-tiers .is-out { background: var(--surface-2); }
  .guide-perf-tiers .is-out strong { color: var(--text-faint); }

  .guide-perf-bands, .guide-perf-cuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .guide-perf-cuts { margin-top: 8px; }
  .guide-perf-band { --b: var(--c-silver); display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md);
    border-left: 4px solid var(--b); background: color-mix(in oklab, var(--b) 10%, var(--surface)); }
  .guide-perf-band strong { color: color-mix(in oklab, var(--b) 70%, var(--text)); }
  .guide-perf-band span { font-size: var(--fs-sm); font-weight: 600; }
  .guide-perf-band em { font-style: normal; font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.4; }
  .guide-perf-band--ok { --b: var(--c-green); }
  .guide-perf-band--warn { --b: var(--c-amber); }
  .guide-perf-band--danger { --b: var(--c-red); }

  .guide-perf-weights { display: grid; gap: 12px; }
  .guide-perf-weight__top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); }
  .guide-perf-weight__top span { font-weight: 700; color: var(--tone-ink); }
  .guide-perf-weight__bar { height: 8px; margin-top: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .guide-perf-weight__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tone), color-mix(in oklab, var(--tone) 55%, var(--brand))); }
  .guide-perf-weight p { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.45; }

  .guide-perf-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
  .guide-perf-rule { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  .guide-perf-rule__impact {
    flex: none; min-width: 52px; height: 30px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
    font-weight: 800; font-size: var(--fs-sm);
  }
  .guide-perf-rule__impact.is-plus { background: color-mix(in oklab, var(--c-green) 16%, transparent); color: color-mix(in oklab, var(--c-green) 75%, var(--text)); }
  .guide-perf-rule__impact.is-minus { background: color-mix(in oklab, var(--c-red) 14%, transparent); color: color-mix(in oklab, var(--c-red) 75%, var(--text)); }
  .guide-perf-rule p { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-soft); }
  .guide-perf-rule__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
  .guide-perf-rule__tags span { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-soft); font-weight: 600; }
  .guide-perf-rule__tags .is-review { background: color-mix(in oklab, var(--c-blue) 14%, transparent); color: color-mix(in oklab, var(--c-blue) 75%, var(--text)); }

  .guide-perf-ladder { display: flex; flex-wrap: wrap; gap: 6px; }
  .guide-perf-ladder div { flex: 1; min-width: 78px; display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: var(--r-md); background: var(--surface-2); }
  .guide-perf-ladder div:nth-child(2) { background: color-mix(in oklab, var(--c-red) 8%, var(--surface-2)); }
  .guide-perf-ladder div:nth-child(3) { background: color-mix(in oklab, var(--c-red) 15%, var(--surface-2)); }
  .guide-perf-ladder div:nth-child(n+4) { background: color-mix(in oklab, var(--c-red) 24%, var(--surface-2)); }
  .guide-perf-ladder span { font-size: var(--fs-xs); color: var(--text-soft); }
  .guide-perf-ladder strong { font-size: 1.05rem; }
  .guide-perf-pauses { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; font-size: var(--fs-sm); }
  .guide-perf-pauses div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
  .guide-perf-pauses strong { white-space: nowrap; color: var(--tone-ink); }

  .guide-steps { counter-reset: gstep; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .guide-steps > li { counter-increment: gstep; position: relative; padding: 2px 0 2px 44px; line-height: 1.55; font-size: var(--fs-sm); }
  .guide-steps > li::before {
    content: counter(gstep); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); color: #fff;
    background: linear-gradient(135deg, var(--tone), color-mix(in oklab, var(--tone) 55%, var(--brand)));
  }
  .guide-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: -10px; width: 2px; background: var(--border); }

  .guide-perf-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-3); }
  .guide-card__auto--warn { --tone: var(--c-red); background: color-mix(in oklab, var(--c-red) 8%, transparent); border-color: color-mix(in oklab, var(--c-red) 30%, transparent); }
  .guide-card__auto--warn .guide-card__label { color: color-mix(in oklab, var(--c-red) 72%, var(--text)); }

  .guide-faq { display: grid; gap: 8px; }
  .guide-faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  .guide-faq summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
  .guide-faq summary::-webkit-details-marker { display: none; }
  .guide-faq summary::after { content: "+"; font-weight: 800; color: var(--tone-ink); }
  .guide-faq details[open] summary::after { content: "−"; }
  .guide-faq details p { margin: 0; padding: 0 14px 12px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-soft); }
}
@layer components {
  .guide-card__auto--ok { --tone: var(--c-green); background: color-mix(in oklab, var(--c-green) 9%, transparent); border-color: color-mix(in oklab, var(--c-green) 32%, transparent); }
  .guide-card__auto--ok .guide-card__label { color: color-mix(in oklab, var(--c-green) 72%, var(--text)); }
}
@layer components {
  /* "Aprovar evento" na linha do tempo da performance (2026-10-20) */
  .icon-btn--ok { border-color: color-mix(in oklab, var(--ok) 45%, var(--border)); color: var(--ok); }
}
@layer components {
  /* vídeo completo no topo de "Performance em detalhe" */
  .guide-perf-video {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: center;
    margin-bottom: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--tone-soft), transparent 70%), var(--surface); box-shadow: var(--shadow-sm);
  }
  .guide-perf-video .guide-demo__play { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  .guide-perf-video .guide-demo__play svg { width: 30px; height: 30px; }
  .guide-perf-video__text h3 { margin: 10px 0 6px; font-size: 1.25rem; letter-spacing: -0.01em; }
  .guide-perf-video__text p { margin: 0; color: var(--text-soft); line-height: 1.6; }
  @media (max-width: 760px) { .guide-perf-video { grid-template-columns: 1fr; } }
}
@layer components {
  /* e-mail do cliente dentro da tarefa (técnico fora da caixa suporte@, 2026-10-20) */
  .task-email { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); max-width: 560px; }
  .task-email summary { cursor: pointer; padding: 6px 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: 6px; }
  .task-email summary svg { width: 15px; height: 15px; }
  .task-email__meta, .task-email__subject, .task-email__body { padding: 0 12px; font-size: var(--fs-sm); }
  .task-email__meta { color: var(--text-soft); }
  .task-email__subject { font-weight: 650; margin-top: 4px; }
  .task-email__body { white-space: pre-wrap; margin: 6px 0 10px; max-height: 260px; overflow: auto; line-height: 1.5; }
}
@layer components {
  /* "O que cada opção do cadastro faz" nos cards da Guia (2026-10-21) */
  .guide-flags { margin: 0; display: grid; gap: 8px; font-size: var(--fs-sm); line-height: 1.5; }
  .guide-flags dt { font-weight: 650; color: var(--tone-ink); }
  .guide-flags dd { margin: 0 0 2px; padding-left: 10px; border-left: 2px solid color-mix(in oklab, var(--tone) 30%, transparent); color: var(--text-soft); }
}
@layer components {
  /* "Dados da filial" embaixo de cada filial na proposta (2026-10-21) */
  .unit-extra td { border-top: 0; padding-top: 0; }
  .discount-fields { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
  .discount-fields > .field { min-width: 260px; }
  .discount-fields__group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .discount-fields__group[hidden] { display: none; }
  .discount-fields__group .field { width: 200px; }
  .unit-extra__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 8px 10px 10px; border-radius: var(--r-md); background: var(--surface-2); }
  .unit-extra__grid label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; }
  .unit-extra__wide { grid-column: span 2; }
  tbody.js-unit-row + tbody.js-unit-row tr:first-child td { border-top: 2px solid var(--border); }
}