/* ============================================================================
   JMWOLF · pele NEON GRID

   A linguagem visual veio do Dashi Taskboard (`web/src/theme-neon.css`), lida
   do código-fonte dele — token por token, não por amostragem de screenshot.
   Mesma paleta, mesmas primitivas de brilho, mesmo registro tipográfico, para
   que abrir o board dentro do JMWOLF não pareça trocar de aplicativo.

   Como o tema funciona (e é o que torna fácil mexer nele):

   1. TOKENS      as cores e as primitivas de brilho moram em `:root`.
   2. CICLO       cada cartão recebe um par `--cy-a`/`--cy-b` por `:nth-child`.
                  Todo efeito lê esse par — trocar a paleta é trocar as 6 cores
                  do bloco CICLO DE NEON, e nada mais.
   3. CAMADAS     coroa de 2px no topo, varredura fina por cima, relevo por
                  dentro e halo por fora. Sempre nessa ordem.

   Responsivo em três faixas: >=1180px lateral com rótulo · 820–1179 só ícone ·
   <820 a lateral sai da tela e volta pelo botão de menu.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */

/* Modo claro — "neon de dia": mesmas matizes, halo contido para não queimar. */
:root {
  color-scheme: light;

  --bg: #f4f2fb;
  --header-bg: #efedf9;
  --sidebar-bg: #eae7f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f0edfa;
  --surface-hover: #f6f3ff;
  --surface-active: #e9e4fb;

  --text-primary: #14121f;
  --text-secondary: #4b4763;
  --text-tertiary: #7d7898;
  --text-quaternary: #a29dbb;

  --border: rgba(90, 60, 190, .16);
  --border-strong: rgba(90, 60, 190, .32);

  --accent: #7a1fd8;
  --accent-hover: #8b2ef0;
  --accent-soft: rgba(122, 31, 216, .12);
  --danger: #d6003c;
  --warning: #b36a00;
  --success: #00875a;

  --status-backlog: #6f6a8f;
  --status-todo: #7b22d6;
  --status-progress: #00875a;
  --status-review: #0091b3;
  --status-blocked: #d6003c;
  --status-done: #5b3fd6;
  --status-canceled: #8b87a3;

  /* ---- CICLO DE NEON: trocar estas 6 cores re-skinna o painel inteiro ---- */
  --cy-1: #0091b3;
  --cy-2: #d6006e;
  --cy-3: #7b22d6;
  --cy-4: #00875a;
  --cy-5: #b36a00;
  --cy-6: #d63a18;

  /* primitivas de brilho e relevo */
  --cy-tint: 9%;
  --cy-tint2: 7%;
  --cy-scan: .3;
  --cy-halo: 34%;
  --cy-bevel-hi: rgba(255, 255, 255, .9);
  --cy-bevel-lo: rgba(60, 30, 120, .16);
  --cy-rim: rgba(255, 255, 255, .7);
  --cy-base: rgba(70, 40, 140, .2);
  --cy-edge: rgba(90, 60, 190, .1);
  --cy-grid: 5%;

  /* par padrão, sobrescrito pelo ciclo :nth-child */
  --cy-a: var(--cy-3);
  --cy-b: var(--cy-1);

  --cy-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "Segoe UI Mono", "SF Mono", Consolas, monospace;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, sans-serif;

  /* ---- apelidos em português: o resto da folha fala por estes ---- */
  --fundo: var(--bg);
  --superficie: var(--surface);
  --superficie-2: var(--surface-muted);
  --elevado: var(--surface-raised);
  --texto: var(--text-primary);
  --texto-medio: var(--text-secondary);
  --texto-fraco: var(--text-tertiary);
  --linha: var(--border);
  --linha-forte: var(--border-strong);
  --azul: var(--cy-1);
  --azul-forte: var(--accent-hover);
  --azul-fundo: var(--accent-soft);
  --laranja: var(--cy-5);
  --laranja-fundo: color-mix(in srgb, var(--cy-5) 14%, transparent);
  --verde: var(--success);
  --amarelo: var(--warning);
  --vermelho: var(--danger);
  --roxo: var(--cy-3);
  --mono: var(--cy-mono);

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;

  --nav-larga: 224px;
  --nav-estreita: 68px;
  --topo-alto: 60px;

  --t-rapido: 140ms ease;
  --t-medio: 240ms cubic-bezier(.3, .7, .4, 1);
}

/* O mundo canônico do tema é o escuro. */
:root[data-tema="escuro"],
:root:not([data-tema="claro"]) {
  color-scheme: dark;

  --bg: #06050d;
  --header-bg: #0a0814;
  --sidebar-bg: #080711;
  --surface: #0e0c1a;
  --surface-raised: #151228;
  --surface-muted: #120f20;
  --surface-hover: #1a1630;
  --surface-active: #221c3d;

  --text-primary: #eae7f8;
  --text-secondary: #a9a3c9;
  --text-tertiary: #7b7499;
  --text-quaternary: #5a5478;

  --border: rgba(150, 120, 255, .16);
  --border-strong: rgba(150, 120, 255, .32);

  --accent: #00e5ff;
  --accent-hover: #5cefff;
  --accent-soft: rgba(0, 229, 255, .14);
  --danger: #ff2e63;
  --warning: #ffb020;
  --success: #00ffa3;

  --status-backlog: #8b7bc7;
  --status-todo: #a855ff;
  --status-progress: #00ffa3;
  --status-review: #00e5ff;
  --status-blocked: #ff2e63;
  --status-done: #7b61ff;
  --status-canceled: #6b6785;

  --cy-1: #00e5ff;
  --cy-2: #ff2e97;
  --cy-3: #a855ff;
  --cy-4: #00ffa3;
  --cy-5: #ffb020;
  --cy-6: #ff5e3a;

  --cy-tint: 16%;
  --cy-tint2: 12%;
  --cy-scan: .55;
  --cy-halo: 55%;
  --cy-bevel-hi: rgba(255, 255, 255, .14);
  --cy-bevel-lo: rgba(0, 0, 0, .55);
  --cy-rim: rgba(255, 255, 255, .07);
  --cy-base: rgba(0, 0, 0, .7);
  --cy-edge: rgba(255, 255, 255, .05);
  --cy-grid: 7%;
}

/* O claro só volta quando o sistema pede E o Jean não escolheu escuro. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    color-scheme: light;
    --bg: #f4f2fb; --header-bg: #efedf9; --sidebar-bg: #eae7f6;
    --surface: #ffffff; --surface-raised: #ffffff; --surface-muted: #f0edfa;
    --surface-hover: #f6f3ff; --surface-active: #e9e4fb;
    --text-primary: #14121f; --text-secondary: #4b4763;
    --text-tertiary: #7d7898; --text-quaternary: #a29dbb;
    --border: rgba(90, 60, 190, .16); --border-strong: rgba(90, 60, 190, .32);
    --accent: #7a1fd8; --accent-hover: #8b2ef0; --accent-soft: rgba(122, 31, 216, .12);
    --danger: #d6003c; --warning: #b36a00; --success: #00875a;
    --status-backlog: #6f6a8f; --status-todo: #7b22d6; --status-progress: #00875a;
    --status-review: #0091b3; --status-blocked: #d6003c; --status-done: #5b3fd6;
    --status-canceled: #8b87a3;
    --cy-1: #0091b3; --cy-2: #d6006e; --cy-3: #7b22d6;
    --cy-4: #00875a; --cy-5: #b36a00; --cy-6: #d63a18;
    --cy-tint: 9%; --cy-tint2: 7%; --cy-scan: .3; --cy-halo: 34%;
    --cy-bevel-hi: rgba(255, 255, 255, .9); --cy-bevel-lo: rgba(60, 30, 120, .16);
    --cy-rim: rgba(255, 255, 255, .7); --cy-base: rgba(70, 40, 140, .2);
    --cy-edge: rgba(90, 60, 190, .1); --cy-grid: 5%;
  }
}

:root[data-tema="claro"] { color-scheme: light; }

/* ---------------------------------------------------- 2. BASE E ESTRUTURA */

* { box-sizing: border-box; }

/* `hidden` tem de vencer o `display` das classes. Sem este !important a gaveta
 * (`.gaveta { display: flex }`) abre sozinha no carregamento. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: 400 14px/1.55 var(--fonte);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .96rem; }
h4 { font-size: .84rem; }
p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
code, kbd, pre, .mono { font-family: var(--cy-mono); font-size: .88em; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cy-1) 24%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--cy-1) 55%, transparent); background-clip: content-box; }

.pular {
  position: fixed; top: -100px; left: 8px; z-index: 300;
  background: var(--accent); color: #04121a; padding: 10px 16px; border-radius: var(--r-md); font-weight: 700;
}
.pular:focus { top: 8px; }

.visual-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* CHÃO — a malha cyberpunk sob toda a aplicação. */
.app {
  display: grid;
  grid-template-columns: var(--nav-larga) 1fr;
  grid-template-rows: var(--topo-alto) 1fr;
  grid-template-areas: "topo topo" "nav conteudo";
  height: 100dvh;
  background-color: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--cy-1) var(--cy-grid), transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cy-3) var(--cy-grid), transparent) 1px, transparent 1px);
  background-position: center top;
  background-size: 44px 44px, 44px 44px;
}

/* ------------------------------------------- 3. REGISTRO TIPOGRÁFICO (mono)
   Dado, identificador e rótulo falam em mono de terminal, caixa alta e
   `tabular-nums` — o número não dança quando o valor muda. */

.kpi__rotulo,
.kpi__valor,
.issue__id,
.coluna__topo h3,
.coluna__conta,
.evento__hora,
.fonte-selo,
.nav__versao,
.comentario__meta,
thead th {
  font-family: var(--cy-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kpi__valor { letter-spacing: .02em; }

/* ------------------------------------------------------------- 4. CABEÇALHO */

.topo {
  grid-area: topo;
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--header-bg), color-mix(in srgb, var(--cy-3) 6%, var(--header-bg)));
  box-shadow: 0 1px 0 var(--cy-rim), 0 8px 24px -18px color-mix(in srgb, var(--cy-1) 80%, transparent);
  z-index: 60;
}

/* O botão de menu vale em TODA largura desde 2026-10-21 (HUN-7): no estreito
   ele abre a gaveta, no largo ele recolhe a barra para só-ícones. Era
   `display:none` com um ramo que o mostrava abaixo de 819px — e no desktop
   não havia como ganhar a tela de volta para o canvas. */
.topo__menu { display: grid; place-items: center; background: none; border: 0; color: var(--text-secondary); padding: 8px; border-radius: var(--r-sm); cursor: pointer; }
.topo__menu:hover { background: var(--surface-hover); color: var(--text-primary); }

.marca { display: flex; align-items: center; gap: 10px; color: var(--text-primary); flex: none; }
.marca__sigla {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--cy-1), var(--cy-3) 55%, var(--cy-2));
  color: #04121a; font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--cy-1) 70%, transparent), inset 0 1px 0 var(--cy-bevel-hi);
}
.marca__nome { font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em; }
.marca__nome b { font-weight: 800; color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ------------------------------------------------------------ 5. NAVEGAÇÃO */

.nav {
  grid-area: nav;
  display: flex; flex-direction: column;
  padding: 12px 10px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, var(--sidebar-bg), color-mix(in srgb, var(--cy-3) 5%, var(--sidebar-bg)));
  overflow-y: auto; z-index: 50;
}
.nav__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav__lista a {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-md);
  color: var(--text-secondary); font-size: .89rem; font-weight: 500; white-space: nowrap;
  transition: background var(--t-rapido), color var(--t-rapido), box-shadow var(--t-rapido);
}
.nav__lista a:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav__lista a[aria-current="page"] {
  color: var(--accent); font-weight: 650;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 6px 18px -14px color-mix(in srgb, var(--accent) 85%, transparent);
}
/* filete neon na borda do item ativo */
.nav__lista a[aria-current="page"]::before {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(180deg, var(--cy-1), var(--cy-3));
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--cy-1) 70%, transparent);
  content: ""; pointer-events: none;
}
.nav__lista svg { flex: none; width: 19px; height: 19px; }

.nav__pe { padding-top: 12px; border-top: 1px solid var(--border); margin-top: 8px; }
.nav__versao { margin: 8px 4px 0; color: var(--text-quaternary); font-size: .68rem; }

.veu { position: fixed; inset: 0; z-index: 45; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px); }

/* ------------------------------------------------------------- 6. CONTEÚDO */

.conteudo { grid-area: conteudo; overflow: hidden auto; padding: 22px clamp(16px, 2.4vw, 32px) 56px; scroll-behavior: smooth; }
.conteudo:focus { outline: none; }

.tela { max-width: 1480px; margin: 0 auto; animation: entrar var(--t-medio) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .tela { animation: none; } * { transition-duration: 1ms !important; } }

.tela__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.tela__titulo { display: flex; flex-direction: column; gap: 3px; }
.tela__titulo h1 { text-shadow: 0 0 24px color-mix(in srgb, var(--cy-1) 28%, transparent); }
.tela__titulo p { margin: 0; color: var(--text-secondary); font-size: .88rem; max-width: 70ch; }
.tela__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------- 7. CICLO DE NEON POR :nth-child
   Cada cartão de uma lista recebe um par de cores diferente. É o que dá o
   arco-íris contido do board em vez de um painel monocromático. */

.grade > *:nth-child(6n + 1), .kanban > *:nth-child(6n + 1), .coluna__lista > *:nth-child(6n + 1) { --cy-a: var(--cy-1); --cy-b: var(--cy-3); }
.grade > *:nth-child(6n + 2), .kanban > *:nth-child(6n + 2), .coluna__lista > *:nth-child(6n + 2) { --cy-a: var(--cy-2); --cy-b: var(--cy-3); }
.grade > *:nth-child(6n + 3), .kanban > *:nth-child(6n + 3), .coluna__lista > *:nth-child(6n + 3) { --cy-a: var(--cy-3); --cy-b: var(--cy-1); }
.grade > *:nth-child(6n + 4), .kanban > *:nth-child(6n + 4), .coluna__lista > *:nth-child(6n + 4) { --cy-a: var(--cy-4); --cy-b: var(--cy-1); }
.grade > *:nth-child(6n + 5), .kanban > *:nth-child(6n + 5), .coluna__lista > *:nth-child(6n + 5) { --cy-a: var(--cy-5); --cy-b: var(--cy-6); }
.grade > *:nth-child(6n + 6), .kanban > *:nth-child(6n + 6), .coluna__lista > *:nth-child(6n + 6) { --cy-a: var(--cy-6); --cy-b: var(--cy-2); }

/* ------------------------------------------------------- 8. CARTÕES (neon)
   A receita completa: gradiente diagonal tingido pelo par, coroa de 2px no
   topo com brilho sangrando, varredura fina por cima, relevo por dentro e
   halo por fora. */

.cartao, .kpi, .issue, .no, .comentario {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cy-a) var(--cy-tint), var(--surface)) 0%,
      var(--surface) 46%,
      color-mix(in srgb, var(--cy-b) var(--cy-tint2), var(--surface)) 100%);
  box-shadow:
    inset 0 1px 0 var(--cy-bevel-hi),
    inset 0 0 0 1px var(--cy-edge),
    inset 0 -10px 20px -14px var(--cy-bevel-lo),
    0 1px 0 var(--cy-rim),
    0 4px 0 -1px var(--cy-base),
    0 10px 22px -12px color-mix(in srgb, var(--cy-a) var(--cy-halo), transparent),
    0 0 26px -14px color-mix(in srgb, var(--cy-b) var(--cy-halo), transparent);
  transition: box-shadow var(--t-rapido), border-color var(--t-rapido), background-color var(--t-rapido);
}

.cartao { padding: 16px; }
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.comentario { padding: 10px 12px; margin-bottom: 8px; font-size: .84rem; border-radius: var(--r-md); }

/* coroa neon: 2px no topo, brilho sangrando para dentro */
.cartao::before, .kpi::before, .issue::before, .no::before {
  position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--cy-a), var(--cy-b));
  box-shadow:
    0 0 10px 1px color-mix(in srgb, var(--cy-a) 70%, transparent),
    0 0 26px 3px color-mix(in srgb, var(--cy-b) 40%, transparent);
  content: ""; pointer-events: none;
}

/* varredura fina, tingida pela cor do próprio cartão */
.cartao::after, .kpi::after, .issue::after {
  position: absolute; z-index: 0; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--cy-a) 5%, transparent) 3px 4px);
  opacity: var(--cy-scan); content: ""; pointer-events: none;
}
.cartao > *, .kpi > *, .issue > * { position: relative; z-index: 1; }

.issue:hover, .no:hover, .cartao:hover {
  border-color: color-mix(in srgb, var(--cy-a) 62%, transparent);
  box-shadow:
    inset 0 1px 0 var(--cy-bevel-hi),
    inset 0 0 0 1px color-mix(in srgb, var(--cy-a) 18%, transparent),
    inset 0 -10px 20px -14px var(--cy-bevel-lo),
    0 1px 0 var(--cy-rim),
    0 6px 0 -1px var(--cy-base),
    0 16px 30px -12px color-mix(in srgb, var(--cy-a) 75%, transparent),
    0 0 40px -12px color-mix(in srgb, var(--cy-b) 70%, transparent);
}

.grade { display: grid; gap: 14px; }
.grade--kpi { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }

.cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.cartao__topo h3 { display: flex; align-items: center; gap: 8px; }
.cartao__topo h3 svg { width: 17px; height: 17px; color: var(--cy-a); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cy-a) 60%, transparent)); }

.kpi__rotulo { color: var(--text-tertiary); font-size: .7rem; font-weight: 700; }
.kpi__valor {
  font-size: 1.72rem; font-weight: 700; line-height: 1.1;
  color: var(--cor, var(--text-primary));
  text-shadow: 0 0 22px color-mix(in srgb, var(--cor, var(--cy-a)) 45%, transparent);
}
.kpi__nota { color: var(--text-secondary); font-size: .78rem; }

/* --------------------------------------------------------- 9. COMPONENTES */

.carregando { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 60px 20px; color: var(--text-tertiary); font-size: .9rem; }
.girando {
  width: 15px; height: 15px; flex: none;
  border: 2px solid color-mix(in srgb, var(--cy-1) 22%, transparent); border-top-color: var(--cy-1);
  border-radius: 50%; animation: girar .7s linear infinite;
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--cy-1) 70%, transparent);
}
@keyframes girar { to { transform: rotate(360deg); } }

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface-muted));
  color: var(--text-primary); font: inherit; font-size: .86rem; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 2px 0 -1px var(--cy-base);
  transition: transform var(--t-rapido), box-shadow var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cy-1) 45%, var(--border-strong));
  color: var(--accent);
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 3px 0 -1px var(--cy-base), 0 0 18px -6px color-mix(in srgb, var(--cy-1) 70%, transparent);
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px var(--cy-bevel-lo); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn--primario {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--surface-raised)), color-mix(in srgb, var(--accent) 14%, var(--surface-muted)));
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 2px 0 -1px var(--cy-base), 0 0 18px -6px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn--primario:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 3px 0 -1px var(--cy-base), 0 0 28px -4px color-mix(in srgb, var(--accent) 90%, transparent);
}
.btn--laranja {
  border-color: color-mix(in srgb, var(--cy-5) 55%, transparent); color: var(--cy-5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cy-5) 24%, var(--surface-raised)), color-mix(in srgb, var(--cy-5) 12%, var(--surface-muted)));
  text-shadow: 0 0 12px color-mix(in srgb, var(--cy-5) 55%, transparent);
}
.btn--laranja:hover:not(:disabled) { border-color: var(--cy-5); color: var(--cy-5); box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 0 26px -5px color-mix(in srgb, var(--cy-5) 85%, transparent); }
.btn--fantasma { background: transparent; box-shadow: none; }
.btn--fantasma:hover:not(:disabled) { background: var(--surface-hover); }
.btn--perigo { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.btn--perigo:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 0 24px -6px color-mix(in srgb, var(--danger) 80%, transparent); }
.btn--bloco { width: 100%; }
.btn--icone { padding: 0; width: 32px; min-height: 32px; flex: none; }
.btn--pequeno { min-height: 27px; padding: 0 9px; font-size: .78rem; }
.btn--pequeno svg { width: 14px; height: 14px; }

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-muted);
  color: var(--text-secondary);
  font-family: var(--cy-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.selo--ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); box-shadow: 0 0 12px -4px color-mix(in srgb, var(--success) 75%, transparent); }
.selo--aviso { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 12%, transparent); box-shadow: 0 0 12px -4px color-mix(in srgb, var(--warning) 70%, transparent); }
.selo--erro { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); box-shadow: 0 0 12px -4px color-mix(in srgb, var(--danger) 70%, transparent); }
.selo--azul { color: var(--cy-1); border-color: color-mix(in srgb, var(--cy-1) 45%, transparent); background: color-mix(in srgb, var(--cy-1) 12%, transparent); box-shadow: 0 0 12px -4px color-mix(in srgb, var(--cy-1) 70%, transparent); }
.selo--laranja { color: var(--cy-5); border-color: color-mix(in srgb, var(--cy-5) 45%, transparent); background: color-mix(in srgb, var(--cy-5) 12%, transparent); box-shadow: 0 0 12px -4px color-mix(in srgb, var(--cy-5) 70%, transparent); }
.selo--roxo { color: var(--cy-3); border-color: color-mix(in srgb, var(--cy-3) 45%, transparent); background: color-mix(in srgb, var(--cy-3) 12%, transparent); box-shadow: 0 0 12px -4px color-mix(in srgb, var(--cy-3) 70%, transparent); }

.ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; box-shadow: 0 0 8px 0 currentColor; }

.vazio {
  padding: 34px 20px; text-align: center;
  color: var(--text-tertiary); font-size: .88rem;
  border: 1px dashed color-mix(in srgb, var(--cy-3) 26%, var(--border)); border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cy-3) 4%, transparent), transparent 60%);
}
.vazio strong { display: block; color: var(--text-secondary); margin-bottom: 4px; font-size: .95rem; }

.alerta {
  position: relative; overflow: hidden;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cy-1) 10%, var(--surface-muted)), var(--surface-muted));
  color: var(--text-secondary); font-size: .86rem;
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 2px 0 -1px var(--cy-base);
}
.alerta::before {
  position: absolute; top: 0; right: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--cy-1), var(--cy-3));
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--cy-1) 70%, transparent);
  content: "";
}
.alerta svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.alerta strong { color: var(--text-primary); }
.alerta--aviso { background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 12%, var(--surface-muted)), var(--surface-muted)); border-color: color-mix(in srgb, var(--warning) 32%, var(--border)); }
.alerta--aviso::before { background: linear-gradient(90deg, var(--cy-5), var(--cy-6)); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--warning) 70%, transparent); }
.alerta--aviso svg { color: var(--warning); }
.alerta--erro { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 12%, var(--surface-muted)), var(--surface-muted)); border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
.alerta--erro::before { background: linear-gradient(90deg, var(--cy-2), var(--cy-6)); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--danger) 70%, transparent); }
.alerta--erro svg { color: var(--danger); }
.alerta--info svg { color: var(--cy-1); }

/* formulários */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.campo > label { color: var(--text-secondary); font-size: .76rem; font-weight: 700; font-family: var(--cy-mono); letter-spacing: .05em; text-transform: uppercase; }
.campo__dica { color: var(--text-tertiary); font-size: .75rem; }
input[type="text"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--cy-3) 5%, var(--surface-muted));
  color: var(--text-primary); font: inherit; font-size: .87rem;
  box-shadow: inset 0 1px 3px var(--cy-bevel-lo);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
textarea { resize: vertical; min-height: 86px; font-family: var(--cy-mono); font-size: .82rem; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: inset 0 1px 3px var(--cy-bevel-lo), 0 0 0 3px var(--accent-soft);
}
select { cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

/* tabela */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 2px 0 -1px var(--cy-base); }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cy-3) 12%, var(--surface-muted)), var(--surface-muted));
  color: var(--text-tertiary); font-size: .7rem; font-weight: 700;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-rapido), box-shadow var(--t-rapido); }
tbody tr[data-clicavel]:hover {
  cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cy-1) 14%, transparent), transparent 65%);
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), inset 2px 0 0 var(--cy-1);
}

/* abas (subtelas) */
.abas { display: flex; gap: 3px; margin-bottom: 18px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 13px; margin-bottom: -1px;
  color: var(--text-tertiary); font: inherit; font-size: .82rem; font-weight: 600;
  font-family: var(--cy-mono); letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; transition: all var(--t-rapido);
}
.abas button:hover { color: var(--text-primary); }
.abas button[aria-selected="true"] {
  color: var(--accent); border-bottom-color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 8px 18px -16px color-mix(in srgb, var(--accent) 90%, transparent);
}

/* ------------------------------------------------------------- 10. KANBAN */

.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(264px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.coluna {
  position: relative; overflow: hidden;
  padding: 11px; min-height: 140px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cy-a) 7%, var(--surface-muted)), transparent 70%);
  transition: background var(--t-rapido), border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.coluna[data-alvo="1"] {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--surface-muted)), transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 32px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.coluna__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 0 3px; }
.coluna__topo h3 { font-size: .74rem; color: var(--text-secondary); }
.coluna__conta { color: var(--text-tertiary); font-size: .74rem; }
.coluna__lista { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }

.issue { padding: 10px 11px; cursor: grab; border-radius: var(--r-md); }
.issue[data-arrastando="1"] { opacity: .4; cursor: grabbing; }
.issue__id { color: var(--text-tertiary); font-size: .68rem; font-weight: 700; }
.issue__titulo { font-size: .86rem; font-weight: 550; margin: 3px 0 7px; line-height: 1.4; }
.issue__pe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------- 12. ATIVIDADE */

.fluxo-eventos { display: flex; flex-direction: column; gap: 1px; }
.evento {
  display: grid; grid-template-columns: 66px 86px 1fr; gap: 11px; align-items: baseline;
  padding: 7px 10px; border-radius: var(--r-sm); font-size: .83rem;
  transition: background var(--t-rapido), box-shadow var(--t-rapido);
  animation: aparecer var(--t-medio) both;
}
@keyframes aparecer { from { opacity: 0; transform: translateX(-5px); } }
.evento:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--cy-1) 12%, transparent), transparent 65%); box-shadow: inset 2px 0 0 var(--cy-1); }
.evento__hora { color: var(--text-quaternary); font-size: .7rem; }
.evento__titulo { color: var(--text-primary); }
.evento__detalhe { color: var(--text-tertiary); font-size: .78rem; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento[data-nivel="erro"] .evento__titulo { color: var(--danger); text-shadow: 0 0 14px color-mix(in srgb, var(--danger) 45%, transparent); }
.evento[data-nivel="aviso"] .evento__titulo { color: var(--warning); }

.fonte-selo { font-size: .64rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-align: center; }
.fonte-selo[data-fonte="cerebro"] { color: var(--cy-3); background: color-mix(in srgb, var(--cy-3) 16%, transparent); box-shadow: 0 0 12px -5px var(--cy-3); }
.fonte-selo[data-fonte="taskboard"] { color: var(--cy-1); background: color-mix(in srgb, var(--cy-1) 16%, transparent); box-shadow: 0 0 12px -5px var(--cy-1); }
.fonte-selo[data-fonte="maestri"] { color: var(--cy-5); background: color-mix(in srgb, var(--cy-5) 16%, transparent); box-shadow: 0 0 12px -5px var(--cy-5); }
.fonte-selo[data-fonte="obsidian"] { color: var(--cy-4); background: color-mix(in srgb, var(--cy-4) 16%, transparent); box-shadow: 0 0 12px -5px var(--cy-4); }
.fonte-selo[data-fonte="central"] { color: var(--text-tertiary); background: var(--surface-muted); }

/* ------------------------------------------------------------- 13. GAVETA */

.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(560px, 100vw);
  display: flex; flex-direction: column;
  border-left: 1px solid color-mix(in srgb, var(--cy-1) 26%, var(--border-strong));
  background: linear-gradient(180deg, color-mix(in srgb, var(--cy-3) 8%, var(--surface)), var(--surface) 40%);
  box-shadow: -20px 0 60px -30px color-mix(in srgb, var(--cy-1) 80%, transparent), -1px 0 0 var(--cy-rim);
  animation: deslizar var(--t-medio) both;
}
@keyframes deslizar { from { transform: translateX(26px); opacity: 0; } }
.gaveta__topo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex: none; }
.gaveta__topo::before {
  position: absolute; top: 0; right: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--cy-1), var(--cy-3), var(--cy-2));
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--cy-1) 60%, transparent);
  content: "";
}
.gaveta__topo h2 { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.gaveta__corpo { padding: 16px; overflow-y: auto; flex: 1; }
.gaveta__corpo h3 { margin: 18px 0 8px; color: var(--accent); font-family: var(--cy-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.gaveta__corpo h3:first-child { margin-top: 0; }
.gaveta__corpo pre {
  margin: 0 0 12px; padding: 11px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 70%, #000);
  font-size: .79rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  box-shadow: inset 0 1px 3px var(--cy-bevel-lo);
}

.pares { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .84rem; margin-bottom: 14px; }
.pares dt { color: var(--text-tertiary); font-weight: 700; font-family: var(--cy-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.pares dd { margin: 0; color: var(--text-primary); word-break: break-word; }

.comentario__meta { color: var(--text-quaternary); font-size: .68rem; margin-bottom: 5px; }
.comentario p { white-space: pre-wrap; word-break: break-word; }

/* ------------------------------------------------------------- 14. AVISOS */

.avisos { position: fixed; bottom: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.aviso {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--cy-1) 30%, var(--border-strong));
  background: linear-gradient(135deg, color-mix(in srgb, var(--cy-1) 12%, var(--surface-raised)), var(--surface-raised));
  font-size: .86rem; pointer-events: auto;
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 12px 30px -16px color-mix(in srgb, var(--cy-1) 80%, transparent);
  animation: subir var(--t-medio) both;
}
.aviso::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--cy-1), var(--cy-3)); content: ""; }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
.aviso[data-saindo="1"] { animation: sumir var(--t-medio) both; }
@keyframes sumir { to { opacity: 0; transform: translateX(20px); } }
.aviso svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.aviso--ok { border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.aviso--ok::before { background: linear-gradient(90deg, var(--cy-4), var(--cy-1)); }
.aviso--ok svg { color: var(--success); }
.aviso--erro { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.aviso--erro::before { background: linear-gradient(90deg, var(--cy-2), var(--cy-6)); }
.aviso--erro svg { color: var(--danger); }
.aviso--info svg { color: var(--cy-1); }
.aviso__texto { flex: 1; word-break: break-word; }
.aviso__texto b { display: block; margin-bottom: 2px; }

/* --------------------------------------------------------- 15. RESPONSIVO */

/* A BARRA LATERAL RECOLHIDA POR ESCOLHA, não por largura.

   O mesmo visual do bloco de 1179px logo abaixo, com outro gatilho: ali quem
   manda é a tela, aqui é o Jean. As regras estão escritas duas vezes de
   propósito — CSS não tem como um seletor herdar de uma media query, e a
   alternativa (marcar o `data-nav` por JS também na faixa estreita) faria o
   estado do usuário e o estado da tela se misturarem num atributo só.

   Dentro de `min-width: 820px` porque abaixo disso a barra sai da grade e vira
   gaveta sobreposta: lá `data-nav` é "a gaveta está aberta", sentido oposto.
   Sem essa cerca, a especificidade de `.app[data-nav]` (0,2,0) venceria a do
   bloco de 819px (0,1,0) e quebraria o celular. */
@media (min-width: 820px) {
  .app[data-nav="recolhida"] { grid-template-columns: var(--nav-estreita) 1fr; }
  .app[data-nav="recolhida"] .nav { width: var(--nav-estreita); transition: width var(--t-medio); }
  .app[data-nav="recolhida"] .nav__lista a { justify-content: center; padding: 10px; }
  .app[data-nav="recolhida"] .nav__lista a span { display: none; }
  .app[data-nav="recolhida"] .nav__pe #btn-desligar { font-size: 0; gap: 0; padding: 0; }
  .app[data-nav="recolhida"] .nav__versao { display: none; }
}

/* ESPIAR COM O MOUSE: recolhida, ela abre ao passar o ponteiro e fecha ao sair.
   
   A COLUNA DA GRADE NÃO MUDA — só a largura do elemento. É a diferença entre
   uma barra que espia e uma tela que pula: se a coluna crescesse, o conteúdo
   inteiro reflowaria a cada passada de mouse, e tabela e canvas saltariam de
   lugar. Como a `.nav` já tem `z-index: 50`, ela simplesmente passa POR CIMA
   do conteúdo e devolve o espaço ao sair.

   `:focus-within` junto com `:hover` porque quem navega por Tab também precisa
   ver os rótulos — sem ele, a barra recolhida seria intransitável no teclado.

   `(hover: hover)` porque em tela de toque não existe "tirar o mouse": o
   estado ficaria preso aberto depois do primeiro toque. Lá o botão de menu
   continua sendo o caminho. */
@media (min-width: 820px) and (hover: hover) {
  .app[data-nav="recolhida"] .nav:hover,
  .app[data-nav="recolhida"] .nav:focus-within {
    width: var(--nav-larga);
    box-shadow: 20px 0 60px -30px color-mix(in srgb, var(--cy-1) 80%, transparent);
  }
  .app[data-nav="recolhida"] .nav:hover .nav__lista a,
  .app[data-nav="recolhida"] .nav:focus-within .nav__lista a {
    justify-content: flex-start; padding: 9px 11px;
  }
  .app[data-nav="recolhida"] .nav:hover .nav__lista a span,
  .app[data-nav="recolhida"] .nav:focus-within .nav__lista a span { display: inline; }
  .app[data-nav="recolhida"] .nav:hover .nav__pe #btn-desligar,
  .app[data-nav="recolhida"] .nav:focus-within .nav__pe #btn-desligar {
    font-size: .86rem; gap: 7px; padding: 0 13px;
  }
  .app[data-nav="recolhida"] .nav:hover .nav__versao,
  .app[data-nav="recolhida"] .nav:focus-within .nav__versao { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .app[data-nav="recolhida"] .nav { transition: none; }
}

/* faixa do meio: a barra lateral fica só com ícone */
@media (max-width: 1179px) {
  .app { grid-template-columns: var(--nav-estreita) 1fr; }
  .nav__lista a { justify-content: center; padding: 10px; }
  .nav__lista a span { display: none; }
  .nav__pe #btn-desligar { font-size: 0; gap: 0; padding: 0; }
  .nav__versao { display: none; }
  .topo .marca__nome { display: none; }
}

/* faixa estreita: a barra sai da grade e volta por cima */
@media (max-width: 819px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topo" "conteudo"; }
  .topo__menu { display: grid; place-items: center; }
  .topo .marca__nome { display: inline; }

  .nav {
    position: fixed; top: var(--topo-alto); bottom: 0; left: 0; width: 240px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cy-3) 10%, var(--surface)), var(--surface) 40%);
    transform: translateX(-102%); transition: transform var(--t-medio);
    box-shadow: 20px 0 60px -30px color-mix(in srgb, var(--cy-1) 80%, transparent);
  }
  .nav[data-aberta="1"] { transform: none; }
  .nav__lista a { justify-content: flex-start; padding: 10px 12px; }
  .nav__lista a span { display: inline; }
  .nav__pe #btn-desligar { font-size: .86rem; gap: 7px; padding: 0 13px; }
  .nav__versao { display: block; }

  .conteudo { padding: 16px 14px 48px; }
  .gaveta { width: 100vw; border-left: 0; }
  .grade--kpi { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
  .kpi__valor { font-size: 1.45rem; }
  .evento { grid-template-columns: 56px 1fr; gap: 8px; }
  .evento .fonte-selo { display: none; }
  .avisos { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

@media (max-width: 560px) {
  .topo { gap: 9px; padding: 0 11px; }
  .topo .marca__nome { display: none; }
  h1 { font-size: 1.2rem; }
  .tela__topo { margin-bottom: 15px; }
  .cartao { padding: 13px; }
  .kanban { grid-auto-columns: minmax(230px, 86vw); }
  .pares { grid-template-columns: 1fr; gap: 2px 0; }
  .pares dt { margin-top: 7px; }
}

@media print {
  .topo, .nav, .gaveta, .avisos, .veu, .tela__acoes { display: none !important; }
  .app { display: block; height: auto; background: none; }
  body { overflow: visible; background: #fff; color: #000; }
  .conteudo { overflow: visible; padding: 0; }
  .cartao::before, .cartao::after, .kpi::before, .kpi::after, .issue::before, .issue::after { display: none; }
}

/* ============================================================================
   O PORTÃO — a única tela que não existe no painel local

   Lá a porta já era a trava: o servidor só aceitava `Host` de loopback, então
   quem abria a página já estava na máquina. Aqui a trava é a sessão.

   Nada de visual novo: reaproveita `.cartao` (com a coroa, a varredura e o
   halo que todo painel tem) e os botões do sistema. O portão tem de parecer a
   porta da frente do JMWOLF, não de outro produto.
   ========================================================================== */

.portao {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}

/* ============================================================================
   O PORTÃO EM DUAS COLUNAS

   Esquerda: o nome do que há do outro lado da porta, e o robô logo abaixo.
   Direita: o cartão de entrada, e o crédito embaixo dele.

   Nasceu com uma grade em fuga no fundo e quatro frases de destaque à
   esquerda. As duas saíram — a grade porque vai dar lugar a outra animação,
   as frases porque a tela de entrada não precisa vender para quem já decidiu
   entrar.

   ABAIXO DE 1100px VIRA UMA COLUNA SÓ

   O herói some e o cartão volta ao centro. Espremer os dois num celular
   deixaria o formulário com meia largura, e entre mostrar o robô e deixar
   entrar, deixar entrar ganha.
   ========================================================================== */

@media (min-width: 1100px) {
  .portao {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    /* `stretch` faz as duas colunas ocuparem a altura toda; sem isso a linha
       tinha a altura do cartão e ficava centrada, e o `align-self: start` do
       herói o prendia ao topo DESSA LINHA — que é o meio da tela. */
    align-items: stretch;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(20px, 4vh, 44px) clamp(32px, 5vw, 88px);
    justify-items: stretch;
  }
  /* o cartão volta a se centrar sozinho dentro da coluna esticada */
  /* ------------------------------------------------------- as quatro frases
   Alinhadas à esquerda, na mesma coluna do título, no tamanho da referência
   que o Jean mandou — não encolher. */
.portao__destaques {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.portao__destaques li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--texto-2, var(--text-secondary));
  /* O ESTADO INICIAL MORA AQUI, NÃO NO JS.
     É o que impede o quadro de spoiler: o navegador nunca tem o estado final
     para mostrar antes da animação começar. O JS só escalona o atraso. */
  opacity: 0;
  animation: destaque-entra .5s cubic-bezier(.22, .9, .3, 1) both;
}
.portao__destaque-ic {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cy-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cy-1) 22%, transparent);
  color: var(--cy-1);
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi);
}
.portao__destaque-ic svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Entra deslizando da esquerda, que é de onde a coluna começa — e NÃO pulsa
   depois. No painel do diretor da BeCourse, dez caixas com pulso contínuo
   saíram da tela por ruído visual: animação que nunca termina deixa de ser
   entrada e vira distração. */
@keyframes destaque-entra {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

/* Movimento reduzido recebe as frases prontas, no lugar — não ausentes. */
@media (prefers-reduced-motion: reduce) {
  .portao__destaques li { animation: none; opacity: 1; transform: none; }
}

.portao__coluna { align-self: center; }
  .portao .portao__coluna { justify-self: end; width: 100%; }
}

/* mancha de luz atrás de tudo, para o robô não nascer do nada */
/* Brilho de ambiente, discreto. Nasceu grande e forte e virava uma nuvem
   cinzenta atrás do robô — com o recorte limpo ela não tem mais o que
   justificar, então fica só o suficiente para o fundo não ser chapado. */
.portao__brilho {
  position: absolute;
  left: 28%; top: 46%;
  width: 24rem; height: 24rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cy-1) 7%, transparent);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------- título e robô */
/* VISÍVEL POR PADRÃO, ESCONDIDO NO ESTREITO — e não o contrário.
 *
 * A primeira versão fazia `display:none` aqui e `display:flex` num
 * `@media (min-width:1100px)` lá em cima. Mesma especificidade, e quem vence
 * é quem vem por último no arquivo: o herói nunca aparecia. Errei isso duas
 * vezes, a segunda depois de ter escrito um comentário avisando.
 *
 * Invertendo o padrão, a ordem deixa de importar: quem esconde é uma media
 * query de `max-width`, que nunca disputa com a regra base. */
.portao__hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* `stretch` para o título poder encostar à esquerda; o robô se recentra
     sozinho logo abaixo. Com `center` aqui, o bloco inteiro ficava com a
     largura do texto e "alinhar à esquerda" não tinha efeito nenhum. */
  align-items: stretch;
  gap: 10px;
  align-self: start;
  padding-top: 0;
  animation: portao-sobe .5s ease-out both;
}
@media (max-width: 1099px) {
  .portao__hero { display: none; }
}

/* O TÍTULO: PRATA CORRENDO PARA O AZUL.
 *
 * Nasceu em gradiente ciano-rosa-roxo (varria a paleta neon inteira, e
 * competia com a marca no cartão ao lado), depois virou ciano sólido igual
 * ao "WOLF". Agora atravessa a frase: começa num cinza prateado e termina
 * no azul da marca.
 *
 * O BRILHO SAI DE `drop-shadow`, NÃO DE `text-shadow`.
 *
 * A letra aqui é TRANSPARENTE — a cor vem do gradiente recortado pelo glifo
 * (`background-clip: text`). `text-shadow` pinta atrás do texto, ou seja,
 * atrás de nada: sairia um borrão chapado em volta do bloco. `drop-shadow`
 * segue o alfa do que foi rasterizado, então acompanha o contorno de cada
 * letra. É a diferença entre neon e mancha.
 *
 * E `width: fit-content` NÃO É ENFEITE.
 *
 * `background-clip: text` recorta o gradiente da CAIXA, não do texto. Como
 * h1 é bloco, a caixa tinha a largura inteira da coluna (842px) e a frase,
 * com 450px, enxergava só a primeira metade do degradê — começava no prata
 * e parava no azul do meio, sem nunca alcançar o fim. Encolhendo a caixa até
 * o texto, o gradiente passa a atravessar exatamente a frase. */
.portao__titulo {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  /* 1.12 cortava a perna do "g" e a cedilha do "ç": com `fit-content` a caixa
     encolhe até o texto, e a linha apertada leva o limite de baixo junto. O
     respiro aqui é do glifo, não do layout. */
  line-height: 1.26;
  padding-bottom: .06em;
  font-weight: 800;
  letter-spacing: -.025em;
  text-align: left;
  background: linear-gradient(104deg,
    #eef3f8 0%,
    #b9c6d4 24%,
    #7f98b4 46%,
    #2f9fd6 74%,
    var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, .55))
    drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 34%, transparent));
}

/* pulsação lenta e curta: letreiro que pisca forte vira alarme, e isto é
   uma tela de entrada */
@media (prefers-reduced-motion: no-preference) {
  .portao__titulo { animation: neon-respira 5s ease-in-out infinite; }
}
@keyframes neon-respira {
  0%, 100% {
    filter:
      drop-shadow(0 1px 0 rgba(0, 0, 0, .55))
      drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 34%, transparent));
  }
  50% {
    filter:
      drop-shadow(0 1px 0 rgba(0, 0, 0, .55))
      drop-shadow(0 0 28px color-mix(in srgb, var(--accent) 52%, transparent));
  }
}

/* O robô vem com fundo preto desvanecido em halo, não recortado — por isso
   nada de `clip-path` nem recorte de silhueta aqui: qualquer corte extra
   reabriria as frestas das juntas que o halo existe para resolver.

   A máscara abaixo é outra coisa, e é segura: um desvanecimento VERTICAL do
   rodapé. As pernas saíram pela borda de baixo na captura, então a imagem
   termina num corte reto; sem isso o robô parece serrado na canela em vez de
   emergir do escuro. */
/* Corpo inteiro até os pés, recortado limpo — sem máscara de rodapé e sem
   sombra. A máscara existia porque a captura cortava as pernas na borda da
   janela; a captura foi refeita com o boneco reduzido na própria cena, então
   não há mais corte para disfarçar.

   As frestas das juntas foram fechadas no ARQUIVO, por fechamento
   morfológico — nada de filtro aqui tentando esconder buraco. */
/* ------------------------------------------------- cartão e crédito */
.portao__coluna {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(27rem, 100%);
}
.portao__creditos {
  margin: 0;
  font-size: .76rem;
  text-align: center;
  color: var(--texto-3, var(--text-tertiary));
}

.portao__cartao {
  position: relative;
  z-index: 1;
  --cy-a: var(--cy-1);
  --cy-b: var(--cy-3);
  width: 100%;
  padding: 30px 26px 22px;
}

.portao__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.portao__marca .marca__sigla { width: 32px; height: 32px; font-size: 13px; }
.portao__marca .marca__nome { font-size: 25px; }

.portao__sub {
  margin: 0 0 24px;
  color: var(--texto-2, var(--text-secondary));
  font-size: 14px;
}

.portao__form { display: grid; gap: 7px; }
.portao__form .campo__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-3, var(--text-tertiary));
}
.portao__form .campo__entrada {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--borda, var(--border));
  border-radius: 10px;
  background: var(--superficie-2, var(--surface-muted));
  color: inherit;
  font: inherit;
}
.portao__form .campo__entrada:focus-visible {
  outline: 2px solid var(--acento, var(--accent));
  outline-offset: 1px;
}
.portao__form .btn { margin-top: 8px; }

/* O OLHO DA SENHA

   Mora DENTRO do campo, e por isso o campo ganha recheio à direita: sem o
   `padding-right`, texto longo passaria por baixo do botão e ficaria
   ilegível justamente quando a pessoa pediu para ver.

   O botão não entra na ordem de tabulação antes do campo porque vem depois
   dele no DOM — quem usa teclado digita a senha e só então alcança o olho,
   que é a ordem natural. */
.portao__senha { position: relative; display: grid; }
.portao__senha .campo__entrada { padding-right: 42px; }

.portao__olho {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 8px;
  background: none; cursor: pointer;
  color: var(--text-tertiary);
  transition: color .15s, background .15s;
}
.portao__olho svg { width: 19px; height: 19px; }
.portao__olho:hover { color: var(--text-primary); background: var(--surface-hover); }
.portao__olho:focus-visible {
  outline: 2px solid var(--cy-1);
  outline-offset: 1px;
  color: var(--text-primary);
}
/* enquanto a senha está visível o olho fica aceso: o estado da tela tem de
   ser legível sem decorar qual ícone significa o quê */
.portao__olho[aria-pressed="true"] { color: var(--cy-1); }

.portao__recado {
  margin: 13px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  min-height: 1.2em;
}
.portao__recado[data-tipo="ok"]   { color: var(--sucesso, var(--success)); }
.portao__recado[data-tipo="erro"] { color: var(--perigo, var(--danger)); }

.portao__pe {
  margin: 22px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--borda, var(--border));
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto-3, var(--text-tertiary));
}
.portao__pe + .btn { margin-top: 13px; }

@media (max-width: 560px) {
  .portao { padding: 16px; }
  .portao__cartao { padding: 24px 18px 18px; }
}

/* ---------------------------------------------- O CÉREBRO 3D, DENTRO DA TELA

   Antes esta aba só abria o painel 3D numa janela separada — ele
   manda `X-Frame-Options: DENY`, então embutir era recusado pelo próprio
   produto. Com as sinapses no banco, o cérebro passou a ser desenhado aqui.

   A altura usa `dvh` em vez de `vh` para o celular: a barra do navegador
   entra e sai, e com `vh` o canvas ficaria cortado atrás dela. */
.cerebro3d {
  position: relative;
  height: min(58dvh, 520px);
  min-height: 300px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--surface-muted);
}

.cerebro3d__tela { display: block; width: 100%; height: 100%; touch-action: none; }

.cerebro3d__legenda { margin-top: 12px; }

.cerebro3d__lobos { display: flex; flex-wrap: wrap; gap: 6px 12px; }

.cerebro3d__lobo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: .72rem/1 var(--cy-mono, ui-monospace, monospace);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cerebro3d__lobo i {
  width: 9px; height: 9px;
  border-radius: 99px;
  box-shadow: 0 0 7px currentColor;
}

@media (max-width: 860px) {
  .cerebro3d { height: min(48dvh, 380px); }
}

/* O palco do cérebro: o canvas precisa de altura EXPLÍCITA e os rótulos ficam
   por cima dele, não dentro — o motor escreve HTML neles a cada quadro. */
.cerebro3d { position: relative; }
.cerebro3d__rotulos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cerebro3d__rotulos > * { pointer-events: auto; }

/* ============================================================================
   CONTROLES DO PAINEL 3D

   A barra de câmera fica SOBRE o canvas (como no painel original) e o painel
   de filtros à direita. Em tela estreita o painel desce para baixo do palco —
   empilhar é melhor que espremer os dois em 360 px.
   ========================================================================== */

.cerebro-palco {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 12px;
  align-items: start;
}

/* ------------------------------------------------------ barra de câmera */

/* A barra passou a flutuar SOBRE o canvas, como no original — as regras de
   posição estão em `.barra-camera`, mais abaixo. Aqui ficam só os detalhes
   que são nossos: as setas e o botão de tela cheia quadrados, para que todos
   os alvos de toque tenham a mesma largura mínima. */
.barra-camera .grupo .btn[title^="girar"],
.barra-camera .grupo .btn[title^="inclinar"],
.barra-camera .grupo .btn[title="tela cheia"] { min-width: 32px; justify-content: center; }

/* ------------------------------------------------------- painel direito */

.cerebro-painel {
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px 10px;
  max-height: min(58dvh, 520px);
  overflow-y: auto;
}

.sec { border-bottom: 1px solid var(--border); }
.sec:last-child { border-bottom: 0; }

.sec__titulo {
  cursor: pointer;
  list-style: none;
  padding: 10px 2px;
  font: 700 .68rem/1 var(--cy-mono, ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.sec__titulo::-webkit-details-marker { display: none; }
.sec__titulo::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s;
}
.sec[open] > .sec__titulo::before { transform: rotate(90deg); }
.sec__corpo { padding: 0 2px 10px; display: grid; gap: 7px; }

/* -------------------------------------------------------------- chaves */

.chave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--text-secondary);
  padding: 2px 0;
}
.chave--off { opacity: .45; cursor: not-allowed; }
.chave__rotulo { flex: 1; }

/* o input real some mas CONTINUA no DOM: é ele que dá teclado e leitor de
   tela. Um `<div>` com clique não daria nenhum dos dois. */
.chave__entrada { position: absolute; opacity: 0; width: 0; height: 0; }

.chave__trilho {
  flex: none;
  width: 34px; height: 19px;
  border-radius: 99px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  position: relative;
  transition: background .18s, border-color .18s;
}
.chave__trilho::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: 99px;
  background: var(--text-tertiary);
  transition: transform .18s, background .18s;
}
.chave__entrada:checked + .chave__trilho {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.chave__entrada:checked + .chave__trilho::after {
  transform: translateX(15px);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.chave__entrada:focus-visible + .chave__trilho {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- faixa */

.faixa { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.faixa__rotulo { font-size: .82rem; color: var(--text-secondary); flex: none; }
.faixa__entrada { flex: 1; min-width: 0; accent-color: var(--accent); }
.faixa__eco {
  flex: none;
  font: 600 .72rem/1 var(--cy-mono, ui-monospace, monospace);
  color: var(--accent);
  min-width: 34px;
  text-align: right;
}

/* -------------------------------------------------------------- radios */

.radios { display: grid; gap: 5px; }
.radios__item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--text-secondary);
}
.radios__entrada { position: absolute; opacity: 0; width: 0; height: 0; }
.radios__marca {
  flex: none;
  width: 13px; height: 13px;
  border-radius: 99px;
  border: 1.5px solid var(--border-strong);
  position: relative;
  transition: border-color .15s;
}
.radios__entrada:checked + .radios__marca {
  border-color: var(--accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 60%, transparent);
}
.radios__entrada:checked + .radios__marca::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 99px;
  background: var(--accent);
}
.radios__entrada:focus-visible + .radios__marca {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------ legenda clicável */

.legenda-lobos { display: grid; gap: 2px; }

.legenda-lobo {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 4px 5px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-size: .78rem;
  color: var(--text-secondary);
}
.legenda-lobo:hover { background: var(--surface-hover); }
.legenda-lobo i {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 99px;
  box-shadow: 0 0 7px currentColor;
}
.legenda-lobo__nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda-lobo__n {
  flex: none;
  font: 600 .7rem/1 var(--cy-mono, ui-monospace, monospace);
  color: var(--text-tertiary);
}
/* lobo escondido: riscado e apagado — some da cena, não da lista, para dar
   como voltar */
.legenda-lobo--off { opacity: .4; }
.legenda-lobo--off .legenda-lobo__nome { text-decoration: line-through; }
.legenda-lobo--off i { box-shadow: none; }

@media (max-width: 860px) {
  /* empilhar é melhor que espremer os dois em 360 px */
  .cerebro-palco { grid-template-columns: 1fr; }
  .cerebro-painel { max-height: none; }
}

/* ============================================================================
   O PALCO COMPLETO DO PAINEL 3D — rótulos, HUD, cartão e dica

   TUDO AQUI FICA DENTRO DE `.cerebro3d`, E ISSO É CONTRATO, NÃO ARRUMAÇÃO.

   `cerebro.js` calcula a anticolisão dos rótulos procurando obstáculos com
   `canvas.parentElement.querySelectorAll('.barra-camera button, .hud .c,
   .ticker .tk, .cartao-no, .carregando')`. Os nomes e o parentesco são lidos
   pelo motor — que é cópia literal do painel 3D original e não vamos editar. Renomear
   qualquer uma destas classes, ou tirar a peça de dentro do palco, faz os
   rótulos voltarem a passar por cima dos botões, sem erro nenhum.

   As variáveis mudam de nome entre os dois apps (lá `--borda`, aqui
   `--border`), então as cores são traduzidas; as medidas são as mesmas.
   ========================================================================== */

/* ------------------------------------------------------------- rótulos */

/* Os rótulos JÁ eram desenhados pelo motor desde o primeiro dia — o que
   faltava era só isto. Sem `position:absolute`, `offsetWidth` media a largura
   inteira do container, todo candidato estourava os limites do canvas, e a
   anticolisão escondia os dez. O sintoma era não ter rótulo nenhum; a causa
   era CSS que nunca foi portado. */
.rotulo {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 5px;
  width: max-content; max-width: 320px;
  white-space: nowrap;
  font-size: 11.5px;
  color: #e9f2ff;
  text-shadow: 0 0 6px rgba(0, 0, 0, .9), 0 0 2px #000;
  will-change: transform;
}
.rotulo i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px var(--cor, #fff); flex: none; }
.rotulo b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rotulo span { color: var(--text-secondary); font-size: 10.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rot-lobo b { font-weight: 700; letter-spacing: .3px; }
.rot-modelo { opacity: .8; }
.rot-modelo b { color: #fff; font-weight: 700; }
.rot-modelo.ativo { opacity: 1; }
.rot-modelo.ativo span { color: var(--verde); }
.rot-agente {
  max-width: 240px;
  background: rgba(4, 10, 26, .55);
  padding: 2px 7px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .07);
}
.rot-agente b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.rot-agente.e-trabalhando { border-color: rgba(52, 211, 153, .55); }
.rot-foco {
  background: rgba(34, 211, 238, .16);
  border: 1px solid rgba(34, 211, 238, .6);
  padding: 2px 8px; border-radius: 8px;
}

/* -------------------------------------------- barra de câmera sobre o palco */

.barra-camera {
  position: absolute; left: 14px; top: 14px; right: 14px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start;
  pointer-events: none;          /* o palco continua arrastável entre os botões */
  z-index: 4;
}
.barra-camera > * { pointer-events: auto; }
.barra-camera .grupo {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: rgba(4, 10, 26, .55);
  border: 1px solid var(--border);
  padding: 5px; border-radius: 12px;
  backdrop-filter: blur(8px);
}
.barra-camera .btn { font-size: 12px; padding: 5px 10px; }

/* ----------------------------------------------------------------- HUD */

.hud {
  position: absolute; right: 14px; top: 104px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 3; pointer-events: none;
}
.hud .c {
  min-width: 150px; max-width: 190px;
  background: rgba(4, 10, 26, .5);
  border: 1px solid var(--border);
  border-radius: 11px; padding: 6px 10px;
  backdrop-filter: blur(8px);
}
.hud .c .r { font-size: 10.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.hud .c .v { font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.hud .c .d { font-size: 11px; color: var(--text-secondary); line-height: 1.3; }
.hud .c.vivo-c .v { color: var(--verde); text-shadow: 0 0 14px rgba(52, 211, 153, .6); }
/* os dois cartões que online não têm o que mostrar: presentes, e explicados */
.hud .c.sem-dado .v { color: var(--text-tertiary); text-shadow: none; }

/* ------------------------------------------------------ dica e cartão do nó */

.dica {
  position: absolute; z-index: 8; pointer-events: none;
  background: rgba(5, 12, 30, .92);
  border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 8px 11px;
  font-size: 12.5px; max-width: 340px;
}
.dica b { display: block; color: #fff; font-size: 13px; }
.dica .s { color: var(--text-secondary); font-size: 12px; }

.cartao-no {
  position: absolute; left: 14px; bottom: 14px;
  width: min(440px, calc(100% - 28px)); max-height: 58%;
  overflow: auto; z-index: 7;
  background: rgba(5, 12, 30, .9);
  border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 14px 16px;
  backdrop-filter: blur(10px);
}
.cartao-no h4 { margin: 0 0 6px; font-size: 15px; color: #fff; word-break: break-word; }
.cartao-no .sub { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; }
.cartao-no pre {
  white-space: pre-wrap; word-break: break-word;
  font: 12px/1.5 var(--cy-mono, ui-monospace, monospace);
  color: #b9c8e6;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--border);
  border-radius: 9px; padding: 9px;
  max-height: 210px; overflow: auto; margin: 8px 0;
}
.cartao-no .acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cartao-no .fechar {
  position: absolute; right: 10px; top: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-tertiary); font-size: 18px; line-height: 1;
}
.cartao-no .fechar:hover { color: #fff; }
.cartao-no h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin: 12px 0 4px; }
.ligacoes a { display: block; color: #9fd8ff; text-decoration: none; font-size: 12.5px; padding: 2px 0; cursor: pointer; }
.ligacoes a:hover { color: #fff; }
.ligacoes .ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }

/* ============================================================================
   A COLUNA DA ESQUERDA — a lista de memórias

   É uma LISTA VIRTUAL: só as ~20 linhas visíveis existem no DOM, posicionadas
   por `top` dentro de um espaçador da altura total. Com 383 notas um `<div>`
   por nota até funcionaria; a virtualização está aqui porque o cofre cresce e
   porque é o que o painel original faz — e porque rolar 383 nós reposiciona
   383 nós a cada quadro.
   ========================================================================== */

.cerebro-lista {
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: min(58dvh, 520px);
}
.cerebro-lista__cab { display: flex; align-items: center; justify-content: space-between; }
.cerebro-lista__cab h3 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); }
.cerebro-lista__conta { font-size: 13px; color: var(--text-secondary); font-weight: 700; font-variant-numeric: tabular-nums; }

.pilulas { display: flex; gap: 6px; flex-wrap: wrap; }
.pilula {
  font-size: 12px; padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--text-tertiary);
  cursor: pointer;
}
.pilula:hover { color: var(--text-primary); }
.pilula.on {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.lista-virtual { flex: 1; overflow-y: auto; position: relative; border-radius: 10px; min-height: 140px; }
.lista-virtual .alto { position: relative; }
.linha-mem {
  position: absolute; left: 0; right: 0; height: 40px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 8px; border-radius: 9px;
  cursor: pointer;
  border: 0; background: none; width: 100%; text-align: left;
  font: inherit; color: inherit;
}
.linha-mem:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.linha-mem.sel {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset;
}
.linha-mem .ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.linha-mem .tx { min-width: 0; flex: 1; }
.linha-mem .t { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-mem .s { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-mem.nova .t::after {
  content: "nova"; margin-left: 6px; font-size: 10px;
  color: #052e1f; background: var(--verde);
  border-radius: 6px; padding: 0 5px; font-weight: 800;
}
.cerebro-lista__rodape { font-size: 11.5px; color: var(--text-tertiary); }

.nota-honesta {
  font-size: 11.5px; color: var(--text-tertiary);
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-left: 8px;
}

/* ------------------------------------------------------- as três colunas */

/* Lista · palco · filtros, como no original. Abaixo de 1180 px a lista sai da
   linha e vai para cima do palco: espremer três colunas num laptop estreito
   deixa o cérebro do tamanho de um selo, e o cérebro é o ponto da tela. */
.cerebro-palco { grid-template-columns: 236px 1fr 232px; }

@media (max-width: 1180px) {
  .cerebro-palco { grid-template-columns: 1fr 232px; }
  .cerebro-lista { grid-column: 1 / -1; max-height: 260px; }
}
@media (max-width: 860px) {
  .cerebro-palco { grid-template-columns: 1fr; }
  .cerebro-lista { max-height: 240px; }
}

/* O "esqueci a senha" é um <button>, não um <a>: ele dispara uma ação, não
   navega. Parece link porque é o que se espera nessa posição — mas o leitor
   de tela anuncia botão, que é a verdade. */
.portao__link {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: 0;
  padding: 4px;
  color: var(--text-tertiary);
  font: inherit;
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.portao__link:hover { color: var(--accent); }
.portao__link:disabled { opacity: .5; cursor: progress; }

/* ============================================================================
   AVANÇO DE PROJETO — a barra, e a grade executiva do Dashboard

   O número é `concluídas / (total − canceladas)`. O denominador tira as
   canceladas de propósito: uma tarefa cancelada não é trabalho feito nem
   trabalho pendente, e mantê-la no total faria todo projeto parecer mais
   atrasado do que está.

   `percentual` nulo é projeto SEM TAREFA, e isso não é 0%. Zero por cento diz
   "tem trabalho e nada foi feito"; a ausência diz "não há o que medir". A
   interface mostra os dois de formas diferentes — ver `.avanco--vazio`.
   ========================================================================== */

.avanco { margin-top: 10px; }
.avanco__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}
.avanco__n {
  font: 700 1.05rem/1 var(--cy-mono, ui-monospace, monospace);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.avanco__trilho {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--cy-3) 14%, var(--surface-muted));
  box-shadow: inset 0 1px 2px var(--cy-bevel-lo);
}
.avanco__barra {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 70%, transparent),
    var(--accent));
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

/* as três faixas de leitura — a cor diz em que ponto o projeto está sem
   obrigar a ler o número */
.avanco--inicio .avanco__barra { background: linear-gradient(90deg, color-mix(in srgb, var(--laranja) 60%, transparent), var(--laranja)); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--laranja) 70%, transparent); }
.avanco--fim    .avanco__barra { background: linear-gradient(90deg, color-mix(in srgb, var(--verde) 60%, transparent), var(--verde)); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--verde) 70%, transparent); }
.avanco--inicio .avanco__n { color: var(--laranja); }
.avanco--fim    .avanco__n { color: var(--verde); }

/* --------------------------------------------- seleção de projeto no Board */

.projeto__marca {
  width: 16px; height: 16px; flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.cartao--marcado {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset,
              0 0 24px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* ============================================================================
   GRADE DE EVOLUÇÃO — a leitura executiva do Dashboard

   Um cartão por projeto, com anel de progresso. O anel é um `<circle>` com
   `stroke-dasharray` igual ao perímetro e `stroke-dashoffset` proporcional ao
   que falta — sem biblioteca, sem canvas, e anima sozinho na transição.

   Os cartões são ordenados do MENOS avançado para o mais: numa leitura
   executiva o que interessa primeiro é o que está longe de acabar.
   ========================================================================== */

.evolucao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}

.evolucao__item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--surface-muted);
  cursor: pointer;
  transition: border-color var(--t-rapido), transform var(--t-rapido), box-shadow var(--t-rapido);
}
.evolucao__item:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--accent) 90%, transparent);
}

/* ------------------------------------------------------------------- anel */

.anel { position: relative; width: 64px; height: 64px; flex: none; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }  /* começa no topo */
.anel circle { fill: none; stroke-width: 6; }
.anel__fundo { stroke: color-mix(in srgb, var(--cy-3) 16%, var(--surface-raised, var(--surface))); }
.anel__arco {
  stroke: var(--accent);
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 65%, transparent));
  transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1);
}
.anel__n {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 .92rem/1 var(--cy-mono, ui-monospace, monospace);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* as mesmas três faixas da barra do Board, para a leitura ser a mesma nas
   duas telas */
.evolucao__item.avanco--inicio .anel__arco { stroke: var(--laranja); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--laranja) 65%, transparent)); }
.evolucao__item.avanco--fim    .anel__arco { stroke: var(--verde);   filter: drop-shadow(0 0 5px color-mix(in srgb, var(--verde) 65%, transparent)); }
.evolucao__item.avanco--inicio .anel__n { color: var(--laranja); }
.evolucao__item.avanco--fim    .anel__n { color: var(--verde); }
.evolucao__item.avanco--vazio .anel__n { color: var(--text-tertiary); }

/* ------------------------------------------------------------------ corpo */

.evolucao__corpo { min-width: 0; flex: 1; }
.evolucao__nome {
  margin: 0 0 2px; font-size: .92rem; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evolucao__nums { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.evolucao__par { font-size: .74rem; color: var(--text-tertiary); }
.evolucao__par b { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.evolucao__par--perigo b { color: var(--vermelho); }

.evolucao__geral {
  font: 600 .78rem/1 var(--cy-mono, ui-monospace, monospace);
  color: var(--text-secondary);
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  white-space: nowrap;
}

/* o aviso de consequência dentro do diálogo de exclusão — vermelho porque
   descreve o que será perdido, não o que será feito */
.confirmar__aviso {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--vermelho) 40%, transparent);
  background: color-mix(in srgb, var(--vermelho) 9%, transparent);
  color: var(--text-secondary);
  font-size: .84rem;
  line-height: 1.5;
}

/* ============================================================================
   O LOGO QUE SE DESENHA

   Substitui o quadrado com as iniciais da marca. Não ocupa o mesmo tamanho:
   46px contra os 30px do quadrado, porque agora é o símbolo da empresa e não
   um marcador — num cabeçalho de 60px sobram 7px de respiro de cada lado.

   Sem fundo nem moldura: o desenho tem gradiente próprio e respira melhor
   solto. A caixa existe só para reservar o espaço enquanto o SVG carrega,
   para a marca não "pular" quando ele entra.
   ========================================================================== */

.marca__logo {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
}
.marca__logo .jm-logo {
  width: 100%; height: 100%;
  overflow: visible;                      /* o brilho do traço passa da borda */
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cy-1) 45%, transparent));
}

/* Sem animação — biblioteca ausente ou movimento reduzido — a máscara
   nunca é desenhada, e o logo ficaria invisível. Esta regra o mostra inteiro:
   uma marca não pode depender de animação para existir. */
.jm-logo--pronto .jm-img { mask: none !important; }

/* no portão de login o símbolo é o protagonista, não um adereço do nome */
.portao__marca .marca__logo { width: 64px; height: 64px; }

/* ============================================================================
   GRÁFICOS (SVG) — telas de Gestão

   As cores vivem aqui e não no JS: o módulo desenha com `var(--cy-1)` e
   companhia, então o gráfico herda o tema sem o JS saber que tema existe.
   ========================================================================== */

/* GRÁFICO NÃO É ÍCONE — e esta linha desfaz a regra global que diz que é.
 *
 * `svg { fill: none; stroke: currentColor; stroke-width: 1.7 }` lá em cima
 * existe para os ícones de traço do painel. Mas `stroke` e `stroke-width` são
 * propriedades HERDADAS: todo texto, retângulo e círculo dentro de um gráfico
 * nascia com um contorno de 1,7px por cima. Num rótulo de eixo de 11px isso
 * não é um detalhe — é o texto virando borrão, que foi exatamente a queixa do
 * Jean em 2026-10-21 ("gráficos mal renderizados, visão pobre"). Os
 * retângulos invisíveis de hover apareciam como caixas brancas pelo mesmo
 * motivo.
 *
 * `stroke: none` AQUI, no elemento raiz, e não em `.grafico *`: assim os
 * filhos HERDAM "sem traço", e quem precisa de traço continua pedindo pelo
 * atributo — atributo de apresentação perde para regra CSS no MESMO elemento,
 * mas ganha de valor herdado. Com `.grafico *` as linhas de grade e a curva
 * sumiriam junto. */
.grafico { display: block; overflow: visible; stroke: none; }
.grafico__eixo {
  fill: var(--texto-3, var(--text-tertiary));
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
}
.grafico__centro {
  fill: var(--texto, var(--text-primary));
  font-size: 26px;
  font-weight: 800;
}

/* O nome da fatia, na ponta da linha-guia. Mais forte que o rótulo de eixo
   porque é ele que se lê primeiro; o valor logo abaixo usa `.grafico__eixo`,
   mais apagado, na hierarquia certa: o quê antes de quanto. */
.grafico__rotulo {
  fill: var(--texto, var(--text-primary));
  font-size: 12.5px;
  font-weight: 600;
}

/* A rosca com rótulo externo é mais larga que alta e precisa de ar embaixo
   para a última linha-guia. Sem grade nem centralização: o desenho já se
   centra sozinho na viewBox que mede o contêiner. */
.grafico-caixa--rosca { height: 260px; }

.grafico__legenda {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: .8rem; color: var(--texto-2, var(--text-secondary));
}
.grafico__legenda li { display: flex; align-items: center; gap: 7px; }
/* `display: flex` acima VENCE o `display:none` que o atributo `hidden`
   aplica — regra de folha ganha de folha do navegador. Sem esta linha, a
   lista continuava aparecendo embaixo da rosca mesmo quando os rótulos
   externos já diziam tudo, e o mesmo dado saía duas vezes. */
.grafico__legenda[hidden] { display: none; }
.grafico__legenda i { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* caixa de gráfico dentro de um cartão: altura fixa para a grade não
   "pular" enquanto os dados não chegam */
.grafico-caixa { height: 230px; }
.grafico-caixa--baixo { height: 200px; }

/* ============================================================================
   16. ORQUESTRADOR — o canvas espacial

   A geometria, as métricas e o comportamento vieram do Maestri (app Electron,
   bundle NÃO minificado `out/renderer/assets/index-tRgVs7O5.js`), medidos
   constante por constante. A PELE é a do JMWOLF: toda cor, brilho e
   tipografia sai dos tokens do bloco 1 e do par `--cy-a`/`--cy-b` do bloco 7.
   Onde o Maestri usava um valor literal que depende da raiz tipográfica dele
   (13px) o valor foi reescalado para a nossa (14px) e o original ficou escrito
   no comentário ao lado — é o que permite conferir contra o artefato depois.

   O QUE O JS PRECISA ESCREVER: três propriedades em `.orq`, e nada mais.
     --z    zoom, número puro (1 = 100%)
     --ox   canto esquerdo da viewport em coordenadas de MUNDO
     --oy   canto superior da viewport em coordenadas de MUNDO
   A grade e o `transform` do mundo saem das três. Os nós são posicionados em
   px de MUNDO (`left`/`top`/`width`/`height` inline) e nenhum nó conhece zoom
   — é o `scale()` de `.orq__mundo` que faz o trabalho, uma vez por frame.

   A ESCADA DE EMPILHAMENTO. O Maestri usa números de quatro dígitos (seleção
   9999, doca 10000, menus 10050) porque lá o canvas É a janela. Aqui o canvas
   é UMA TELA dentro do painel, e acima dele existem a gaveta (z 120), os
   avisos (z 200) e o atalho de pular (z 300). Então `.orq` abre o próprio
   contexto de empilhamento (`isolation: isolate`) e a escada interna inteira
   cabe em 0–30: nenhum valor daqui pode competir com o chrome do painel, por
   construção e não por sorte com os números.

   O VIDRO não usa `backdrop-filter`. Não é economia de linha: o Maestri
   também não usa (o desfoque dele vem do material nativo da janela), e sobre
   um canvas que repinta a cada pan o custo de pintura de um backdrop-filter
   aparece. O que faz o material é fundo semitransparente + duas hairlines
   `inset` + o halo de neon do painel.

   ESTADO EM `data-*` E EM CLASSE. Tipo de nó é classe (`.orq-no--nota`);
   estado aceita as DUAS formas (`[data-sel="1"]` e `.orq-no--selecionado`).
   A folha e o JS do Orquestrador nasceram em paralelo, e um estado que não
   pinta porque o seletor combinado não existe é meia hora perdida para achar.
   ========================================================================== */

.orq {
  /* ---- a câmera: o JS escreve estas três e mais nada ---- */
  --z: 1;
  --ox: 0;
  --oy: 0;

  /* ---- a escada interna (ver o cabeçalho) ---- */
  --orq-z-grade: 0;      /* o papel quadriculado */
  --orq-z-grupo: 1;      /* moldura de grupo: atrás dos membros */
  --orq-z-cordas: 2;     /* as conexões saem da borda do nó e passam atrás */
  --orq-z-nos: 3;        /* cada nó soma o zIndex próprio DENTRO desta camada */
  --orq-z-selecao: 4;    /* Maestri: 9999 — sempre sobre o nó que descreve */
  --orq-z-gesto: 5;      /* marquee e prévia de criação, sobre o mundo todo */
  --orq-z-chrome: 10;    /* barra, rodapé, minimapa (Maestri: 10000 / 30 / 40) */
  --orq-z-paleta: 20;    /* Maestri: 10040 */
  --orq-z-menu: 30;      /* Maestri: 10050 — acima da paleta DE PROPÓSITO:
                            um menu pode abrir de dentro de um diálogo */

  /* ---- a grade de 20 unidades de MUNDO (Maestri: CELL_WORLD_SIZE = 20) ----
     Traço de 1px com a cor pela metade é o ramo de tela normal; a tela densa
     ganha o traço de 0,5px com a cor inteira, logo abaixo. É o truque que faz
     a grade parecer fina em vez de suja.

     OS VALORES SUBIRAM EM 2026-10-21 (4% → 12%, e 8% → 24% no ramo denso).
     Na homologação da HUN-7 a grade saiu como "visível de menos", e o motivo
     foi medido: a máquina do Jean tem devicePixelRatio 1,25 — abaixo do corte
     de 1,5 —, então ela cai SEMPRE no ramo de 4% e o de 8% nunca a alcança.
     Comparado na tela a 10%, 12% e 14%; 12% aparece em tamanho real sem virar
     ruído. A razão de 1:2 entre os dois ramos foi mantida, que é o que deixa a
     tinta equivalente quando o traço cai pela metade. */
  --orq-grade-traco: 1px;
  --orq-grade-alfa: 12%;

  /* ---- o vidro das pílulas flutuantes ---- */
  --orq-vidro: color-mix(in srgb, var(--surface) 74%, transparent);
  --orq-vidro-forte: color-mix(in srgb, var(--surface) 90%, transparent);
  --orq-vidro-sombra:
    inset 0 0 0 1px var(--cy-edge),
    inset 0 1px 0 var(--cy-bevel-hi),
    0 1px 2px -1px var(--cy-base),
    0 8px 24px -14px color-mix(in srgb, var(--cy-1) 70%, transparent);

  /* ---- as duas sombras do cartão de nó ----
     Maestri: --shadow-node = 0 3px 18px #00000024, 0 0 0 .5px #00000014
              --shadow-node-selected = 0 8px 36px #0000003d, 0 0 0 .5px …
     Mesmos raios de desfoque (18 e 36) e a mesma hairline de 0,5px; o preto
     chapado dá lugar ao halo do par de neon do próprio nó. */
  --orq-sombra-no:
    inset 0 1px 0 var(--cy-bevel-hi),
    inset 0 0 0 1px var(--cy-edge),
    0 0 0 .5px var(--cy-base),
    0 3px 18px -8px var(--cy-base),
    0 0 22px -14px color-mix(in srgb, var(--cy-a) var(--cy-halo), transparent);
  --orq-sombra-no-sel:
    inset 0 1px 0 var(--cy-bevel-hi),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 0 .5px var(--cy-base),
    0 0 0 2px var(--accent-soft),
    0 8px 36px -12px var(--cy-base),
    0 0 40px -12px color-mix(in srgb, var(--accent) 85%, transparent);

  /* ---- alturas de cabeçalho, por tipo ----
     No Maestri são contagens de pixel literais, e o código diz por quê: as
     utilidades em rem renderizavam 22,75px por causa da raiz de 13px, e ali
     "a pixel count IS the feature" — o cabeçalho é a ÚNICA superfície de
     arrasto do portal. Nossa raiz é 14px, então subimos na mesma proporção.
     O portal fica em 32 porque aquele número é funcional, não tipográfico. */
  --orq-h-nota: 18px;      /* Maestri: 16px */
  --orq-h-terminal: 24px;  /* Maestri: 22,75px (h-7 com raiz 13px) */
  --orq-h-portal: 32px;    /* Maestri: 32px — literal, mantido */

  --orq-fundo: color-mix(in srgb, var(--bg) 92%, #000);

  position: relative;
  /* `isolation` aqui é o que garante a escada de 0–30: todo z-index desta
     seção fica preso neste contexto e não alcança a gaveta nem os avisos. */
  isolation: isolate;
  z-index: 0;
  height: min(72vh, 740px);
  color: var(--text-primary);
}

/* Tela densa: traço de meio pixel com a cor cheia (Maestri: lineThickness()
   devolve 0.5 quando devicePixelRatio >= 1.5, senão 1 com a cor a 50%). */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .orq { --orq-grade-traco: .5px; --orq-grade-alfa: 24%; }
}

/* ---------------------------------------------------------------- o palco */

/* A moldura é a única coisa com `overflow: hidden`. Barra, rodapé, minimapa,
   menu e paleta são irmãos dela, dentro de `.orq` — se forem filhos da
   moldura, ela os corta. */
.orq__moldura {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--cy-bevel-hi),
    inset 0 0 60px -20px color-mix(in srgb, var(--cy-3) 60%, transparent);
  touch-action: none;
  /* O PONTEIRO PADRÃO É A SETA, NÃO A MÃO.
   *
   * Era `grab` aqui, e `grab` é a mão aberta: no modo Selecionar o cursor
   * dizia "arraste a tela" enquanto o clique selecionava. Na homologação da
   * HUN-7 isso leu como "cliquei na seta e continua a mão de arraste" — e
   * lia mesmo, porque a mão estava lá. A mão agora é do modo que é mão. */
  cursor: default;
}
.orq__moldura[data-modo="mao"] { cursor: grab; }
/* Espaço descido arma o pan temporário: a mão aparece antes do arraste, que é
   como se descobre que o atalho existe. */
.orq__moldura[data-pode-pan="1"] { cursor: grab; }
.orq__moldura[data-panning="1"] { cursor: grabbing; }

/* Cursor derivado do modo da barra. A lista é a do artefato, conferida:
   crosshair em conectar e em note/terminal/portal/arvore; `text` e `select`
   caem no default — o modo texto NÃO é crosshair, por mais que pareça. */
.orq__moldura[data-modo="ligar"],
/* `agente` FALTAVA nesta lista, e é um modo de criação igual aos outros quatro.
   Sem ele o cursor ficava na seta e o modo não dava sinal nenhum de estar
   armado — metade da razão de "o botão agente não faz nada" na HUN-7. O modo
   `texto` continua fora de propósito: o artefato o deixa no cursor padrão. */
.orq__moldura[data-modo="agente"],
.orq__moldura[data-modo="nota"],
.orq__moldura[data-modo="terminal"],
.orq__moldura[data-modo="portal"],
.orq__moldura[data-modo="arvore"] { cursor: crosshair; }
.orq__moldura[data-modo="desenho"] { cursor: cell; }
.orq__moldura[data-arrastando-no="1"] { cursor: grabbing; }

/* A grade: um par de gradientes de uma faixa, célula de 20 unidades de mundo.
   `background-size` em px de TELA = 20 * zoom; sem adaptação por nível, como
   no Maestri (em zoom 0,1 a célula tem 2px e dá moiré — é o comportamento
   original, e mudar isso é decisão de produto, não de folha de estilo). */
.orq__grade {
  position: absolute; inset: 0; pointer-events: none;
  background-color: var(--orq-fundo);
  background-image:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--cy-1) var(--orq-grade-alfa), transparent) 0,
      color-mix(in srgb, var(--cy-1) var(--orq-grade-alfa), transparent) var(--orq-grade-traco),
      transparent var(--orq-grade-traco), transparent 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--cy-3) var(--orq-grade-alfa), transparent) 0,
      color-mix(in srgb, var(--cy-3) var(--orq-grade-alfa), transparent) var(--orq-grade-traco),
      transparent var(--orq-grade-traco), transparent 100%);
  background-size: calc(20px * var(--z)) calc(20px * var(--z));
  background-position: calc(var(--ox) * var(--z) * -1px) calc(var(--oy) * var(--z) * -1px);
  z-index: var(--orq-z-grade);
}

/* O mundo: um div de tamanho ZERO que leva o único transform da cena.
   `isolation: isolate` é obrigatório, não enfeite: o Maestri documenta no
   código que em zoom exatamente 1 ele troca o transform por left/top, o div
   deixa de criar contexto de empilhamento e o chrome de seleção passa a
   pintar por cima dos menus. Com `isolate` o atalho de zoom 1 fica seguro. */
.orq__mundo {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  transform-origin: 0 0;
  transform: translate(calc(var(--ox) * var(--z) * -1px), calc(var(--oy) * var(--z) * -1px)) scale(var(--z));
  isolation: isolate;
  z-index: var(--orq-z-nos);
}

/* A CAMADA DOS DESENHOS — filha do mundo, em coordenadas de mundo.

   `overflow: visible` é LOAD-BEARING, não higiene: o `.orq__mundo` tem
   `width: 0; height: 0` (ele existe só para carregar o transform), então um
   SVG filho com o recorte padrão pintaria dentro de uma janela de 0x0 e NADA
   apareceria — sem erro, sem aviso, com os caminhos todos corretos no DOM.

   `pointer-events: none` pela mesma razão que o SVG das cordas: um SVG que
   recebe clique rouba o clique do fundo e mata o pan e a caixa de seleção.
   Quem decide se um traço foi clicado é o teste geométrico do `desenhoSob()`,
   não o navegador.

   O `z-index` põe os traços ATRÁS dos nós. Ver o limite anotado no palco. */
.orq-desenhos {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  overflow: visible; pointer-events: none;
  z-index: -1;
}
.orq-desenhos [data-sel="1"] {
  outline: none;
  filter: drop-shadow(0 0 3px var(--cy-1)) drop-shadow(0 0 7px var(--cy-1));
}
/* O traco que a borracha ja tocou, antes de o dedo levantar: some pela metade
   em vez de desaparecer. Desaparecer na hora tiraria a chance de soltar fora e
   desistir -- e sem nenhum sinal o arraste viraria roleta. */
.orq-desenhos [data-apagando="1"] { opacity: .25; }

/* O cursor da borracha. A moldura continua em `data-modo="desenho"`, entao o
   que distingue e a ferramenta -- por isso o `data-ferramenta`. */
.orq__moldura[data-modo="desenho"][data-ferramenta="borracha"] { cursor: crosshair; }

/* ------------------------------------------------------------------- o nó */

/* O cartão. Herda a receita do bloco 8 (gradiente tingido pelo par, coroa de
   2px, varredura, relevo e halo) com as sombras do Maestri por fora. */
.orq-no {
  position: absolute; overflow: hidden;
  /* `isolation` prende a escada INTERNA do cartão (coroa z 3, borrão z 4) aqui
     dentro. Sem ela esses z-index sobem para o contexto de `.orq__mundo` e o
     borrão de um nó pinta por cima do vizinho — `overflow: hidden` não forma
     contexto de empilhamento, por mais que a intuição diga que sim. */
  isolation: isolate;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-md); /* Maestri: 10px */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cy-a) var(--cy-tint), var(--surface)) 0%,
      var(--surface) 46%,
      color-mix(in srgb, var(--cy-b) var(--cy-tint2), var(--surface)) 100%);
  box-shadow: var(--orq-sombra-no);
  user-select: none;
  transition: box-shadow var(--t-rapido), border-color var(--t-rapido);
}

/* coroa de 2px e varredura, iguais às do cartão do painel */
.orq-no::before {
  position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--cy-a), var(--cy-b));
  box-shadow:
    0 0 10px 1px color-mix(in srgb, var(--cy-a) 70%, transparent),
    0 0 26px 3px color-mix(in srgb, var(--cy-b) 40%, transparent);
  content: ""; pointer-events: none;
}
.orq-no::after {
  position: absolute; z-index: 0; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--cy-a) 5%, transparent) 3px 4px);
  opacity: var(--cy-scan); content: ""; pointer-events: none;
}

.orq-no__topo {
  position: relative; z-index: 1; flex: none;
  display: flex; align-items: center; gap: 6px;             /* Maestri: gap 6 */
  height: var(--orq-h-terminal);
  padding: 0 10px;                                          /* Maestri: px 10 */
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent); /* Maestri: foreground 6% */
  cursor: grab;
}
.orq-no__topo svg { width: 14px; height: 14px; flex: none; color: var(--cy-a); filter: drop-shadow(0 0 5px currentColor); }
.orq-no__nome { font-size: .8rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orq-no__acoes { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.orq-no__corpo { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden; padding: 9px 11px; color: var(--text-secondary); font-size: .78rem; line-height: 1.5; }

/* ---- variantes por tipo ----
   Cada tipo fixa o próprio par em vez de herdar o ciclo :nth-child: num
   canvas a ordem dos nós não tem significado, então a cor tem de significar
   o TIPO. Os quatro primeiros pares são os mesmos de `.no` no bloco 11, para
   que a tela de hoje e o Orquestrador não discordem sobre o que é um portal. */
.orq-no--terminal { --cy-a: var(--cy-4); --cy-b: var(--cy-1); }
.orq-no--nota     { --cy-a: var(--cy-5); --cy-b: var(--cy-6); }
.orq-no--portal   { --cy-a: var(--cy-3); --cy-b: var(--cy-2); }
.orq-no--agente   { --cy-a: var(--cy-1); --cy-b: var(--cy-3); }
.orq-no--texto    { --cy-a: var(--cy-1); --cy-b: var(--cy-4); }
.orq-no--arquivo  { --cy-a: var(--cy-2); --cy-b: var(--cy-5); }
.orq-no--link     { --cy-a: var(--cy-1); --cy-b: var(--cy-2); }
.orq-no--arvore   { --cy-a: var(--cy-6); --cy-b: var(--cy-5); }
.orq-no--pilha    { --cy-a: var(--cy-3); --cy-b: var(--cy-5); }

.orq-no--portal .orq-no__topo { height: var(--orq-h-portal); gap: 8px; padding: 0 12px; } /* Maestri: 32 / 8 / 12, literais */
.orq-no--arvore .orq-no__corpo,
.orq-no--terminal .orq-no__corpo { font-family: var(--cy-mono); font-size: .74rem; }

/* O link é uma tira, não um cartão: 280x48 no Maestri, cabeçalho nenhum. */
.orq-no--link { flex-direction: row; align-items: center; gap: 8px; padding: 0 11px; }
.orq-no--link .orq-no__corpo { padding: 0; white-space: nowrap; text-overflow: ellipsis; }

/* O bloco de texto não tem cartão: é texto solto sobre a grade, arrastável de
   qualquer ponto. No Maestri é o único nó que, no estilo de seleção
   "elevation", ganha borda sólida — justamente porque não tem sombra para
   mostrar que está selecionado. */
.orq-no--texto {
  border: 0; background: none; box-shadow: none; overflow: visible;
  padding: 6px;                                            /* Maestri: PADDING 6 */
  color: var(--text-primary); line-height: 1.2;            /* Maestri: lineHeight 1.2 */
  cursor: grab;
}
.orq-no--texto::before, .orq-no--texto::after { display: none; }
.orq-no--texto .orq-no__corpo { padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
.orq-no--texto[data-vazio="1"] .orq-no__corpo { opacity: .3; }   /* Maestri: placeholder opacity 0.3 */

/* ---- estados ----
   `[data-*]` e classe valem igual: ver a nota do cabeçalho da seção. */
.orq-no[data-sel="1"], .orq-no--selecionado {
  border-color: var(--accent);
  box-shadow: var(--orq-sombra-no-sel);
}
.orq-no[data-arrastando="1"], .orq-no--arrastando {
  cursor: grabbing;
  /* o zIndex de frente é escrito inline pelo JS (como o frontZIndex do
     Maestri); aqui só a pintura, para as duas coisas não brigarem */
  box-shadow: var(--orq-sombra-no-sel);
}
.orq-no[data-arrastando="1"] .orq-no__topo, .orq-no--arrastando .orq-no__topo { cursor: grabbing; }

/* Travado: a coroa apaga e a borda vira tracejada. O gesto já é abortado no
   pointerdown pelo JS; a borda tracejada é para o Jean ver ANTES de tentar. */
.orq-no[data-travado="1"], .orq-no--travado { cursor: default; border-style: dashed; }
.orq-no[data-travado="1"] .orq-no__topo, .orq-no--travado .orq-no__topo { cursor: default; }
.orq-no[data-travado="1"]::before, .orq-no--travado::before { opacity: .45; }

.orq-no[data-mudo="1"] .orq-no__mudo, .orq-no--mudo .orq-no__mudo { display: inline-flex; }
.orq-no__mudo { display: none; align-items: center; color: var(--text-tertiary); }
.orq-no__mudo svg { width: 12px; height: 12px; }

/* "Sem moldura": o portal esconde o cabeçalho e o CORPO passa a ser a
   superfície de arrasto — era a única antes, e sem essa troca o nó fica
   impossível de mover. (Maestri: chromeHidden + isDragSurface.) */
.orq-no[data-sem-moldura="1"] .orq-no__topo,
.orq-no--sem-moldura .orq-no__topo { display: none; }
.orq-no[data-sem-moldura="1"] .orq-no__corpo,
.orq-no--sem-moldura .orq-no__corpo { cursor: grab; }

/* Borrado ("Blur"): um véu OPACO por cima, não `filter: blur()`. O artefato é
   explícito e a razão é boa: filtro deixa o texto adivinhável e qualquer um
   o remove pelo DevTools. O botão de revelar tem 44px de alvo. */
.orq-no__borrao {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: var(--surface);
  border-radius: inherit;
}
.orq-no__borrao button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-muted); color: var(--text-secondary);
  cursor: pointer;
}
.orq-no__borrao button svg { width: 18px; height: 18px; }
.orq-no__borrao button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.orq-no:not([data-borrado="1"]):not(.orq-no--borrado) .orq-no__borrao { display: none; }

/* ---- a nota, nas 10 cores do Maestri ----
   Estas 10 são cor de CONTEÚDO, escolhida pelo usuário e gravada no dado
   (`defaultStickyNoteColor: "yellow"`) — não são pele. Por isso os hex ficam
   literais, e a chave em inglês: é o valor que o modelo guarda, identificador
   técnico de fora. O texto vem da tabela STICKY_TEXT_COLOR do artefato, nunca
   calculado: nos tons de meio o cálculo e a tabela discordam.
   A tira do cabeçalho não tem cor própria — é a MESMA cor do corpo com um véu
   de 10% branco (fundo escuro) ou 6% preto (fundo claro). */
.orq-no--nota {
  background: var(--orq-nota-fundo);
  color: var(--orq-nota-texto);
}
.orq-no--nota::before, .orq-no--nota::after { display: none; } /* sem coroa nem varredura: aqui quem identifica é a cor do papel */
.orq-no--nota .orq-no__topo {
  height: var(--orq-h-nota);
  gap: 4px; padding: 0 10px;
  border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;   /* Maestri: 0.5rem = 8px */
  background: var(--orq-nota-fundo);
  color: var(--orq-nota-texto);
}
.orq-no--nota .orq-no__topo::after {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background: var(--orq-nota-veu);
  /* O véu fica ATRÁS do rótulo e do ícone. No artefato ele é o primeiro filho
     e os irmãos levam `relative` de propósito; aqui, sendo `::after`, ele
     pintaria POR CIMA do texto e o lavaria. `-1` o joga para a camada de fundo
     do próprio `.orq-no__topo`, que é contexto de empilhamento (tem
     `position: relative` + `z-index: 1`), então ele não escapa do cabeçalho. */
  z-index: -1;
}
.orq-no--nota .orq-no__topo svg { width: 10px; height: 10px; color: currentColor; filter: none; opacity: .6; } /* Maestri: 8px */
.orq-no--nota .orq-no__nome { font-size: .68rem; font-weight: 500; opacity: .6; }  /* Maestri: 10px/500, opacity .6 */
.orq-no--nota .orq-no__corpo { color: inherit; font-size: .82rem; line-height: 1.5; }

.orq-no--nota { --orq-nota-fundo: #FFF9C4; --orq-nota-texto: #5D4037; --orq-nota-veu: rgba(0, 0, 0, .06); }
.orq-no--nota[data-cor="yellow"]   { --orq-nota-fundo: #FFF9C4; --orq-nota-texto: #5D4037; --orq-nota-veu: rgba(0, 0, 0, .06); }
.orq-no--nota[data-cor="pink"]     { --orq-nota-fundo: #F8BBD0; --orq-nota-texto: #880E4F; --orq-nota-veu: rgba(0, 0, 0, .06); }
.orq-no--nota[data-cor="blue"]     { --orq-nota-fundo: #BBDEFB; --orq-nota-texto: #0D47A1; --orq-nota-veu: rgba(0, 0, 0, .06); }
.orq-no--nota[data-cor="green"]    { --orq-nota-fundo: #C8E6C9; --orq-nota-texto: #1B5E20; --orq-nota-veu: rgba(0, 0, 0, .06); }
.orq-no--nota[data-cor="orange"]   { --orq-nota-fundo: #FFE0B2; --orq-nota-texto: #E65100; --orq-nota-veu: rgba(0, 0, 0, .06); }
.orq-no--nota[data-cor="purple"]   { --orq-nota-fundo: #E1BEE7; --orq-nota-texto: #4A148C; --orq-nota-veu: rgba(0, 0, 0, .06); }
.orq-no--nota[data-cor="white"]    { --orq-nota-fundo: #FFFFFF; --orq-nota-texto: #333333; --orq-nota-veu: rgba(0, 0, 0, .06); }
/* as três escuras: luminância 601 abaixo de 0.5, logo o véu vira branco */
.orq-no--nota[data-cor="charcoal"] { --orq-nota-fundo: #2D2D2D; --orq-nota-texto: #FFFFFF; --orq-nota-veu: rgba(255, 255, 255, .1); }
.orq-no--nota[data-cor="slate"]    { --orq-nota-fundo: #37474F; --orq-nota-texto: #FFFFFF; --orq-nota-veu: rgba(255, 255, 255, .1); }
.orq-no--nota[data-cor="midnight"] { --orq-nota-fundo: #1A237E; --orq-nota-texto: #FFFFFF; --orq-nota-veu: rgba(255, 255, 255, .1); }

/* ------------------------------------------------- a barra flutuante */

/* O vidro, uma vez, para todas as superfícies flutuantes. Sem
   `backdrop-filter`: ver o cabeçalho da seção. */
.orq-barra, .orq-zoom, .orq-rodape > .orq-barra__btn, .orq-minimapa, .orq-menu, .orq-paleta__dialogo {
  background: var(--orq-vidro);
  box-shadow: var(--orq-vidro-sombra);
  border: 0;
}
.orq-minimapa, .orq-menu, .orq-paleta__dialogo { background: var(--orq-vidro-forte); }

.orq-barra {
  position: absolute; z-index: var(--orq-z-chrome);
  top: 12px; left: 50%; transform: translateX(-50%);   /* Maestri: MAIN_TOOLBAR_TOP = 12 */
  height: 36px;                                        /* Maestri: MAIN_TOOLBAR_HEIGHT = 36 */
  display: flex; align-items: center; gap: 6px;        /* Maestri: gap-1.5 = 6 */
  padding: 6px 8px;                                    /* Maestri: px-2 py-1.5 = 8/6 */
  border-radius: 999px;
  max-width: calc(100% - 24px);
}

/* A segunda faixa, contextual, 8px abaixo da principal: 12 + 36 + 8 = 56
   (Maestri: CONTEXTUAL_TOOLBAR_TOP, calculado exatamente assim). */
.orq-barra--contextual {
  top: 56px;
  animation: orq-faixa-entra .3s cubic-bezier(.34, 1.56, .64, 1) both;
}
/* O artefato separa a opacidade da mola de propósito — molejar a opacidade
   esconderia o repique. Daqui vêm os dois tempos diferentes. */
@keyframes orq-faixa-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(.9); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.orq-barra__btn {
  width: 32px; height: 32px; flex: none;               /* Maestri: h-8 w-8 */
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none; color: var(--text-secondary);
  cursor: pointer; font: inherit; font-size: .94rem;   /* Maestri: text-[15px] */
  transition: color var(--t-rapido), background var(--t-rapido);
}
.orq-barra__btn svg { width: 18px; height: 18px; }
.orq-barra__btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.orq-barra__btn:disabled { opacity: .4; cursor: not-allowed; }

/* O ativo NÃO ganha pílula de fundo — no Maestri só o ícone troca de cor, e
   isso é decisão herdada do app mac. Aqui a cor é o acento do painel, com o
   halo que todo elemento aceso tem. */
.orq-barra__btn[aria-pressed="true"],
.orq-barra__btn[data-ativo="1"] {
  color: var(--accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 65%, transparent));
}
/* O botão "Aa" do modo texto é TEXTO, não ícone (16px, tracking -0.04em). */
.orq-barra__btn--texto { font-size: 1rem; font-weight: 500; letter-spacing: -.04em; }

/* ---- as pecas da faixa de desenho ---- */

/* O separador entre as ferramentas e os ajustes. Um filete, nao um botao. */
.orq-barra__sep {
  width: 1px; height: 20px; flex: none; margin: 0 2px;
  background: var(--border);
}

/* A bolha que mostra a cor escolhida. Anel claro por fora para o branco nao
   sumir no vidro da faixa — a cor #FFFFFF esta na paleta e sem o anel ela
   ficaria invisivel justamente quando selecionada. */
.orq-cor-atual {
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--cy-edge), inset 0 0 0 1px color-mix(in srgb, #000 25%, transparent);
}

/* A barrinha que mostra a espessura: a altura E o dado. */
.orq-espessura {
  width: 18px; flex: none; border-radius: 999px;
  background: currentColor; min-height: 2px;
}

.orq-menu__cores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; }
.orq-cor {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; box-shadow: 0 0 0 1px var(--cy-edge);
}
.orq-cor[data-ativo="1"] { box-shadow: 0 0 0 2px var(--accent), 0 0 10px -2px var(--accent); }
.orq-menu__item[data-ativo="1"] { background: var(--surface-active); }

/* pulso ao clicar, suprimido em movimento reduzido no fim da seção */
.orq-barra__btn:active:not(:disabled) svg { animation: orq-pulso .22s ease-out; }
@keyframes orq-pulso { 50% { transform: scale(1.18); } }

.orq-divisor { width: .5px; height: 20px; margin: 0 6px; flex: none; background: color-mix(in srgb, var(--text-primary) 20%, transparent); } /* Maestri: 0.5px x 20px, mx 6, foreground/20 */

/* --------------------------------------------------- o rodapé-direito */

.orq-rodape {
  position: absolute; z-index: var(--orq-z-chrome);
  right: 12px; bottom: 12px;                           /* Maestri: right-3 bottom-3 */
  display: flex; align-items: flex-end; gap: 8px;      /* Maestri: gap-2 */
  pointer-events: none;                                /* o cluster não captura; os filhos sim */
}
.orq-rodape > * { pointer-events: auto; }
.orq-rodape > .orq-barra__btn { border-radius: 50%; }

.orq-zoom {
  display: flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px;
}
.orq-zoom__valor {
  min-width: 48px;                                     /* Maestri: min-w-[48px] */
  padding: 2px 8px; border: 0; border-radius: 999px;
  background: none; color: var(--text-secondary);
  font-family: var(--cy-mono); font-size: .75rem; font-weight: 500;  /* Maestri: 12px mono */
  font-variant-numeric: tabular-nums;                  /* o número não dança ao mudar */
  text-align: center; cursor: pointer;
}
.orq-zoom__valor:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Os sinais − e + NÃO são SVG: são retângulos de 12x2 com `currentColor` e
   raio total. O do mais são DOIS retângulos cruzados, nunca um rotacionado —
   rotacionar uma barra de 2px serrilha, e o Maestri evitou isso de propósito
   (o relatório que falava em rotação foi refutado contra o artefato). */
.orq-glifo { position: relative; display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; }
.orq-glifo i { position: absolute; display: block; background: currentColor; border-radius: 999px; }
.orq-glifo i:first-child { width: 12px; height: 2px; }
.orq-glifo--mais i:last-child { width: 2px; height: 12px; }

/* ----------------------------------------------------------- o minimapa */

.orq-minimapa {
  position: absolute; z-index: var(--orq-z-chrome);
  right: 12px; bottom: 60px;                           /* Maestri: bottom-[60px] right-3 */
  width: 200px; height: 150px;                         /* Maestri: PANEL_WIDTH/HEIGHT */
  padding: 6px; border-radius: var(--r-xl);            /* Maestri: rounded-2xl p-1.5 */
}
.orq-minimapa canvas, .orq-minimapa svg { display: block; width: 100%; height: 100%; }
.orq-minimapa__viewport {
  position: absolute; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 80%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.orq-minimapa__fechar {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--surface-raised); color: var(--text-tertiary); cursor: pointer;
}
.orq-minimapa__fechar svg { width: 12px; height: 12px; }
.orq-minimapa__fechar:hover { color: var(--text-primary); }

/* ------------------------------------------------------------- a seleção */

/* O chrome de seleção é um SVG por cima do nó, nunca uma borda no nó — é o que
   permite a alça ficar FORA do frame (OUTSET 4) e manter 16px de TELA em
   qualquer zoom. Os tamanhos de alça são px de tela divididos pelo zoom no
   JS; aqui ficam só a pintura e os cursores. */
.orq-selecao {
  position: absolute; z-index: var(--orq-z-selecao);
  overflow: visible; pointer-events: none;
  /* o bloco 2 dá a TODO `svg` 20x20; sem desligar aqui, o chrome de seleção
     nasce com 20px e a alça fica no canto errado, mesmo com o atributo certo
     (CSS vence atributo de apresentação) */
  width: auto; height: auto;
}
.orq-selecao__anel {
  fill: none;
  stroke: var(--accent);
  /* Os valores são os do artefato em zoom normal. Abaixo de ~0,7 o Maestri
     multiplica os três por `selectionScale(zoom)` (que já clampa o zoom em
     0,1, logo não há divisão por zero) — e o JS NÃO pode fazer isso por
     atributo de apresentação do SVG: CSS vence atributo. Daí os ganchos: o JS
     escreve `--orq-sel-traco` e `--orq-sel-dash` no anel, e nada mais muda. */
  stroke-width: var(--orq-sel-traco, 1.5);             /* Maestri: traço 1.5 x selectionScale */
  stroke-dasharray: var(--orq-sel-dash, 6 4);          /* Maestri: dash 6/4 x selectionScale */
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent));
}
.orq-selecao__anel[data-estilo="solido"] { stroke-dasharray: none; }
.orq-selecao__ponto { fill: var(--accent); stroke: none; }

/* As 8 alças: 4 cantos de 16px e 4 bordas de 10px de espessura (px de TELA,
   logo divididos pelo zoom em JS). Retângulos transparentes que só existem
   para receber o ponteiro. */
.orq-selecao__alca { fill: transparent; stroke: none; pointer-events: all; }
.orq-selecao__alca[data-alca="ce"], .orq-selecao__alca[data-alca="bd"] { cursor: nwse-resize; }
.orq-selecao__alca[data-alca="cd"], .orq-selecao__alca[data-alca="be"] { cursor: nesw-resize; }
.orq-selecao__alca[data-alca="c"],  .orq-selecao__alca[data-alca="b"]  { cursor: ns-resize; }
.orq-selecao__alca[data-alca="e"],  .orq-selecao__alca[data-alca="d"]  { cursor: ew-resize; }

/* --------------------------------------------------- o menu de contexto */

.orq-menu {
  position: absolute; z-index: var(--orq-z-menu);
  min-width: 160px;                                    /* Maestri: min-w-[10rem] */
  max-height: 70vh; overflow-y: auto;
  padding: 4px; border-radius: var(--r-md);
  animation: orq-menu-entra .12s ease-out both;
}
@keyframes orq-menu-entra { from { opacity: 0; transform: scale(.95); } }

/* `cursor: pointer`, e aqui a gente SAI do Maestri de propósito: lá
   `button { cursor: default }` é regra global, para o app parecer nativo
   (e há até uma preferência `pointerCursors` para desligar). Isto é um painel
   web, e o resto da folha — `.btn`, linha de tabela clicável — usa a mãozinha.
   Fidelidade ao artefato não vale discordar do próprio painel. */
.orq-menu__item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;                                    /* Maestri: px-2 py-1.5 */
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-primary);
  font: inherit; font-size: .85rem; text-align: left;
  cursor: pointer; white-space: nowrap;
}
.orq-menu__item svg { width: 16px; height: 16px; flex: none; color: var(--text-tertiary); } /* Maestri: svg forçado a size-4 */
.orq-menu__item:hover:not(:disabled),
.orq-menu__item[data-realce="1"] { background: var(--surface-active); }
.orq-menu__item:hover:not(:disabled) svg { color: var(--text-primary); }
.orq-menu__item:disabled { opacity: .5; pointer-events: none; }
.orq-menu__item--perigo { color: var(--danger); }
.orq-menu__item--perigo svg { color: var(--danger); }
.orq-menu__item--perigo:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.orq-menu__item--marcavel { position: relative; padding-left: 28px; }  /* Maestri: pl-8, indicador em left-2 */
.orq-menu__marca { position: absolute; left: 8px; width: 14px; height: 14px; }
.orq-menu__separador { height: 1px; margin: 4px -4px; background: var(--border); } /* Maestri: -mx-1 my-1 h-px bg-border */
.orq-menu__rotulo { padding: 6px 8px 2px; color: var(--text-tertiary); font-family: var(--cy-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------ a paleta de comandos */

/* Fica dentro de `.orq`, não na janela: aqui o canvas é uma tela do painel, e
   uma paleta em `position: fixed` passaria por cima da navegação e da gaveta. */
.orq-paleta { position: absolute; inset: 0; z-index: var(--orq-z-paleta); display: grid; justify-items: center; align-content: start; }
.orq-paleta::before { position: absolute; inset: 0; content: ""; background: color-mix(in srgb, var(--bg) 60%, transparent); }
.orq-paleta__dialogo {
  position: relative;
  margin-top: 110px;                                   /* Maestri: topo 110px */
  width: min(640px, calc(100% - 24px));                /* Maestri: max-w-[640px] */
  border-radius: var(--r-lg); overflow: hidden;
  animation: orq-paleta-entra .16s ease-out both;
}
@keyframes orq-paleta-entra { from { opacity: 0; transform: scale(.96); } }

.orq-paleta__busca { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.orq-paleta__busca svg { width: 16px; height: 16px; flex: none; color: var(--text-tertiary); }
.orq-paleta__busca input { border: 0; background: none; box-shadow: none; padding: 0; font-size: .94rem; }
.orq-paleta__busca input:focus { outline: none; box-shadow: none; }
.orq-paleta__lista { max-height: 380px; overflow-y: auto; padding: 6px; } /* Maestri: max-h-[380px] */
.orq-paleta__linha {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
}
.orq-paleta__linha[data-realce="1"] { background: var(--surface-active); }
.orq-paleta__icone { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--cy-1); } /* Maestri: ícone 15px em caixa de 22 */
.orq-paleta__icone svg { width: 15px; height: 15px; }
.orq-paleta__texto { min-width: 0; display: flex; flex-direction: column; }  /* `min-width: 0` é o que deixa o título truncar dentro do flex */
.orq-paleta__titulo { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Maestri: 14px */
.orq-paleta__titulo b { color: var(--accent); font-weight: 700; }   /* os offsets que o ranqueador manda negritar */
.orq-paleta__sub { color: var(--text-tertiary); font-size: .7rem; } /* Maestri: 11px */
.orq-paleta__pe { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: .7rem; }
.orq-paleta__pe kbd { font-family: var(--cy-mono); font-size: .68rem; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-muted); }

/* ------------------------------------------------------------- as cordas */

/* `pointer-events: none` no <svg> é LOAD-BEARING, não higiene: um SVG de
   viewport inteira por cima do canvas sem isso rouba o clique do fundo e mata
   o pan e a seleção por marquee. O artefato traz o atributo e a verificação
   confirmou que o levantamento o havia omitido — custou uma correção. */
.orq-cordas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  z-index: var(--orq-z-cordas);
}
.orq-cordas path {
  fill: none;
  stroke: color-mix(in srgb, var(--cy-3) 55%, transparent);
  stroke-width: 2;                                     /* Maestri: BASE_STROKE_WIDTH */
  stroke-dasharray: 8 6;                               /* Maestri: DASH_PATTERN "8 6" */
  stroke-linecap: round;
}
/* Apontada: sem tracejado e mais grossa — a corda inteira acende. */
.orq-cordas path[data-apontada="1"] {
  stroke: var(--cy-1);
  stroke-width: 2.5;                                   /* Maestri: ACTIVE_STROKE_WIDTH */
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cy-1) 80%, transparent));
}
.orq-cordas path[data-previa="1"] { stroke: var(--accent); stroke-width: 2.4; } /* Maestri: 2 x 1.2 na prévia do gesto */
.orq-cordas circle { fill: var(--accent); stroke: none; }

/* ------------------------------------------- marquee, prévia e a ponte */

/* Marquee: 1px de acento a 80% com fundo a 8%, e SEM raio — o retângulo de
   seleção do Maestri é de canto reto, e arredondar faz parecer um cartão. */
.orq-marquee {
  position: absolute; z-index: var(--orq-z-gesto); pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 80%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* Prévia de criação por arrasto: tracejada, mais fraca, com raio pequeno. */
.orq-previa {
  position: absolute; z-index: var(--orq-z-gesto); pointer-events: none;
  border: 1.5px dashed var(--accent); border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  opacity: .6;
}

/* A ponte: o nó que materializa uma ligação para FORA desta tela (o
   crossFloorConnector do Maestri, 160x40). A lição que vale levar é a regra,
   não o tamanho: nunca desenhe aresta entre coisas que não estão na mesma
   tela — materialize um nó com ícone, nome e um botão de "ir para", e trate a
   ligação como duas metades. */
.orq-ponte {
  position: absolute; overflow: hidden;
  min-width: 160px; min-height: 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--cy-6) 45%, var(--border));
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cy-6) 14%, var(--surface)), var(--surface) 70%);
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi), 0 0 20px -12px color-mix(in srgb, var(--cy-6) 80%, transparent);
  cursor: grab;
}
.orq-ponte svg { width: 15px; height: 15px; flex: none; color: var(--cy-6); filter: drop-shadow(0 0 5px currentColor); }
.orq-ponte__nome { font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orq-ponte__ir { margin-left: auto; flex: none; border: 0; background: none; color: var(--accent); font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.orq-ponte__ir:hover { text-decoration: underline; }
.orq-ponte[data-sel="1"], .orq-ponte--selecionado { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 0 26px -10px color-mix(in srgb, var(--accent) 85%, transparent); }

/* -------------------------------------------------------------- o grupo */

/* A moldura do grupo é DERIVADA: bounding box dos membros (>= 2) com 16 de
   folga. Ela mora atrás dos nós, e as três opacidades do Maestri dizem o que
   é o quê: .75 borda colorida, .35 borda do grupo "sem cor", .12 o fundo. */
.orq-grupo {
  position: absolute; z-index: var(--orq-z-grupo); pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--orq-grupo-cor, var(--cy-3)) 75%, transparent); /* Maestri: BORDER_WIDTH 1.5, COLORED_BORDER_OPACITY .75 */
  border-radius: 12px;                                 /* Maestri: CORNER_RADIUS 12 */
  background: color-mix(in srgb, var(--orq-grupo-cor, var(--cy-3)) 12%, transparent);           /* Maestri: COLORED_FILL_OPACITY .12 */
}
/* "No color": a borda cai para 35% e o fundo desaparece. */
.orq-grupo[data-cor="neutro"], .orq-grupo--neutro {
  border-color: color-mix(in srgb, var(--text-primary) 35%, transparent);   /* Maestri: NEUTRAL_BORDER_OPACITY .35 */
  background: none;
}
.orq-grupo__rotulo {
  position: absolute; left: 0; bottom: 100%;
  height: 22px; margin-bottom: 6px;                    /* Maestri: HEADER_HEIGHT 22, HEADER_GAP 6 */
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; pointer-events: auto;
  border-radius: var(--r-sm);
  color: var(--orq-grupo-cor, var(--cy-3));
  font-size: .7rem; font-weight: 500;                  /* Maestri: 11px/500 */
  white-space: nowrap; cursor: grab;
}

/* ------------------------- o arranjo da subtela e a ponte com o Maestri */

/* A subtela Orquestrador é o palco MAIS o painel da ponte. A ponte era a
   subtela "Ao vivo"; ela não morreu, mudou de lugar — fica ao lado do canvas
   em vez de disputar uma aba com ele. Abaixo de 1100px a coluna desce para
   baixo do palco, porque 300px de painel sobre um canvas estreito deixam o
   canvas inútil. */
.orq-arranjo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.orq-arranjo__palco { min-width: 0; }

@media (max-width: 1099px) {
  .orq-arranjo { grid-template-columns: minmax(0, 1fr); }
}

/* A PONTE RECOLHIDA — trilho de 38px em vez de 300px.
   `:has()` porque quem muda de tamanho é a COLUNA, e o estado mora no painel;
   sem ele seria preciso espelhar o dado no pai, que é a classe de bug que faz
   os dois discordarem. Suportado em todos os navegadores desde 2023. */
.orq-arranjo:has(> .orq-lateral[data-recolhida="1"]) { grid-template-columns: minmax(0, 1fr) 38px; }
.orq-lateral[data-recolhida="1"] { padding: 8px 6px; overflow: visible; }
.orq-lateral[data-recolhida="1"] .orq-lateral__topo { justify-content: center; }
/* `> svg` e NÃO `svg:first-child`: o chevron do botão também é primeiro filho
   — do botão — e a versão descendente o escondia junto, deixando o trilho
   recolhido como uma caixinha vazia e sem saída. */
.orq-lateral[data-recolhida="1"] .orq-lateral__topo > svg,
.orq-lateral[data-recolhida="1"] .orq-lateral__topo h3 { display: none; }

.orq-lateral__recolher {
  margin-left: auto; flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-tertiary);
  cursor: pointer; transition: background var(--t-rapido), color var(--t-rapido);
}
.orq-lateral__recolher:hover { background: var(--surface-hover); color: var(--text-primary); }
/* `color: inherit` e `filter: none` desfazem a regra `.orq-lateral__topo svg`,
   que é descendente e alcança este chevron também: sem isto ele saía com a cor
   e o brilho do ícone da Ponte — um laranja que lê como alerta num botão que
   só recolhe um painel. */
/* `.orq-lateral` na frente só para GANHAR ESPECIFICIDADE de `.orq-lateral__topo
   svg`, que vale (0,1,1) igual e vem depois no arquivo — empate de
   especificidade quem decide é a ordem, e a ordem estava contra. Com a classe a
   mais isto vira (0,2,1) e vence onde quer que esteja. */
.orq-lateral .orq-lateral__recolher svg {
  width: 15px; height: 15px;
  color: inherit; filter: none;
  transform: rotate(90deg);
}
.orq-lateral[data-recolhida="1"] .orq-lateral__recolher { margin: 0; }
.orq-lateral[data-recolhida="1"] .orq-lateral__recolher svg { transform: rotate(-90deg); }

.orq-lateral {
  display: flex; flex-direction: column; gap: 10px;
  max-height: min(72vh, 740px); overflow-y: auto;
  padding: 12px 13px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--cy-bevel-hi);
}
.orq-lateral__topo { display: flex; align-items: center; gap: 7px; }
.orq-lateral__topo h3 { margin: 0; font-size: .86rem; font-weight: 650; }
.orq-lateral__topo svg { width: 15px; height: 15px; color: var(--cy-6); filter: drop-shadow(0 0 5px currentColor); }
.orq-lateral__secao { margin: 6px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.orq-lateral__acoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* Cada linha de seleção e de nota é um botão de verdade: dá para chegar nela
   com Tab, e é por ela que se volta ao nó no canvas. */
.orq-lateral__item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 5px 7px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-secondary);
  font: inherit; font-size: .8rem; text-align: left; cursor: pointer;
}
.orq-lateral__item:hover { background: var(--surface-hover); color: var(--text-primary); }
.orq-lateral__item svg { flex: none; width: 13px; height: 13px; color: var(--cy-a); }
.orq-lateral__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.orq-lateral__agente {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-muted);
}
.orq-lateral__agente-topo { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.orq-lateral__agente-topo strong { flex: 1; font-size: .83rem; }
.orq-lateral__agente-topo svg { flex: none; width: 14px; height: 14px; color: var(--cy-1); }
.orq-lateral__agente input { width: 100%; }
.orq-lateral__agente-botoes { display: flex; gap: 6px; margin-top: 7px; }

/* ------------------------------------- responsivo e movimento reduzido */

/* A moldura encolhe na mesma faixa em que o resto do painel aperta (819px).
   O número saiu da `.canvas-moldura` do canvas simples, aposentado em
   2026-10-21 — a medida ficou porque era boa, não por herança. */
@media (max-width: 819px) {
  .orq { height: min(64vh, 520px); }
  .orq-barra { gap: 4px; padding: 5px 6px; }
  .orq-barra--contextual { top: 56px; }   /* a barra principal continua com 36px de altura aqui, logo a conta 12+36+8 não muda */
  .orq-minimapa { display: none; }   /* 200x150 numa tela estreita come o palco */
  /* E O BOTÃO DELE TAMBÉM SAI.
     Escondendo só o painel, o botão continuava no rodapé, acendia o
     `data-ativo` e não abria nada — um botão morto, que é pior que um botão
     ausente: o usuário acha que a tela travou. Achado na homologação da
     HUN-7, lendo o CSS: nenhuma regra aqui alcançava o botão. */
  .orq-rodape > .orq-barra__btn[aria-label="Minimapa"] { display: none; }
  .orq-paleta__dialogo { margin-top: 48px; }
  .orq-paleta__lista { max-height: 50vh; }
}

@media (max-width: 560px) {
  .orq { height: min(58vh, 420px); }
  .orq-zoom__valor { min-width: 42px; }
  .orq-rodape { right: 8px; bottom: 8px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .orq-barra--contextual,
  .orq-menu,
  .orq-paleta__dialogo { animation: none; }
  .orq-barra__btn:active:not(:disabled) svg { animation: none; }
}