/* ============================================================================
   JARVIS — SISTEMA DE DESIGN (v11)
   A única fonte de cor, superfície, tipo, espaço, borda, raio, sombra,
   movimento, foco e dos componentes. Nenhuma tela define cor própria.

   A IDENTIDADE, EM TRÊS FRASES
   · O chão é azul-grafite profundo, não preto: a profundidade vem de
     camadas e de luz, não de borda em tudo.
   · Ciano é a PRESENÇA do Jarvis e a ação da pessoa: o núcleo, a marca, o
     foco, o botão que faz algo. Aparece pouco, e por isso significa algo
     quando aparece. (Até a v10 era cobre; a v11 trocou para o ciano que se
     associa a um Jarvis — ver docs/referencia_megajarvis_v11.md.)
   · Azul-íon é a MÁQUINA TRABALHANDO — pensando, executando, conferindo.
     Nunca é clicável. Âmbar é "precisa de você". Verde e vermelho são só
     resultado (deu certo / não deu).

   Por que fonte do sistema e não web font: o produto não pode depender de
   um terceiro para desenhar a própria interface (privacidade, tempo de
   carga, funcionar em rede ruim). Segoe UI Variable e SF Pro são faces
   excelentes e já estão na máquina de quem usa.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ── superfícies: uma escala de elevação ─────────────────────────────── */
  /* v12 — azul-noite, como a referência pedida pelo dono do produto: o chão
     quase preto azulado, a barra lateral mais escura que o conteúdo, cartões
     translúcidos com borda azul-acinzentada, ciano com halo na ação. */
  --j-chao: #050912;
  --j-camada-1: #09101F;
  --j-camada-2: #0D1528;
  --j-camada-3: #142036;
  --j-veu-modal: rgba(2, 5, 12, .72);
  --j-trilho-fundo: rgba(5, 11, 26, .94);
  --j-cartao: rgba(12, 18, 34, .78);
  --j-cartao-borda: rgba(45, 59, 92, .55);

  /* ── linhas ──────────────────────────────────────────────────────────── */
  --j-traco-suave: #131D33;
  --j-traco: #1E2A44;
  --j-traco-forte: #2D3B5C;

  /* ── tinta ───────────────────────────────────────────────────────────── */
  --j-tinta: #F1F5F9;
  --j-tinta-2: #9CA3AF;
  --j-tinta-3: #6B7280;

  /* ── papéis ──────────────────────────────────────────────────────────── */
  --j-presenca: #22D3EE;
  --j-presenca-forte: #67E8F9;
  --j-presenca-veu: rgba(34, 211, 238, .13);
  --j-sobre-presenca: #03161C;
  /* a ação da pessoa: ciano mais fundo, com halo */
  --j-acao: #0891B2;
  --j-acao-forte: #06B6D4;
  --j-brilho: rgba(34, 211, 238, .36);

  --j-ion: #60A5FA;
  --j-ion-veu: rgba(96, 165, 250, .12);

  --j-atencao: #FBBF24;
  --j-atencao-veu: rgba(251, 191, 36, .12);
  --j-ok: #34D399;
  --j-ok-veu: rgba(52, 211, 153, .12);
  --j-sobre-ok: #03140C;
  --j-erro: #F87171;
  --j-erro-veu: rgba(248, 113, 113, .12);

  /* ── tipo ────────────────────────────────────────────────────────────── */
  --j-fonte: "Inter", "Segoe UI Variable Text", "SF Pro Text", system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Títulos condensados e técnicos. Rajdhani quando estiver instalada;
     Bahnschrift (Windows 10+) em largura condensada é a mais próxima que já
     está na máquina — nenhuma fonte baixada de terceiro em tempo de uso. */
  --j-fonte-titulo: "Rajdhani", "Bahnschrift", "Segoe UI Variable Display", "SF Pro Display", system-ui,
                    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --j-fonte-mono: "Cascadia Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --j-t-12: 12px;      /* rótulo, metadado */
  --j-t-13: 13px;      /* interface densa */
  --j-t-14: 14px;      /* interface padrão */
  --j-t-leitura: 15.5px; /* mensagem: texto para ler */
  --j-t-17: 17px;      /* título de seção */
  --j-t-21: 21px;      /* título de folha */
  --j-t-28: 28px;      /* saudação */
  --j-altura: 1.45;
  --j-altura-leitura: 1.62;
  --j-rastro-rotulo: .06em;

  /* ── espaço (escala de 4) ────────────────────────────────────────────── */
  --j-e1: 4px;  --j-e2: 8px;  --j-e3: 12px; --j-e4: 16px;
  --j-e5: 20px; --j-e6: 24px; --j-e7: 32px; --j-e8: 48px;

  /* ── raio ────────────────────────────────────────────────────────────── */
  --j-raio-controle: 10px;
  --j-raio-superficie: 16px;
  --j-raio-folha: 20px;
  --j-raio-pilula: 999px;

  /* ── sombra: no escuro quem cria elevação é a borda; a sombra é para o
        que FLUTUA (diálogo, menu, aviso) ─────────────────────────────────── */
  --j-sombra-flutua: 0 18px 48px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --j-sombra-baixa: 0 1px 2px rgba(0, 0, 0, .35);

  /* ── movimento: comunica estado, não decora ─────────────────────────── */
  --j-tempo-rapido: 120ms;
  --j-tempo: 200ms;
  --j-tempo-entrada: 320ms;
  --j-curva: cubic-bezier(.2, .8, .2, 1);

  /* ── foco: um anel, sempre visível no teclado ───────────────────────── */
  --j-anel: 0 0 0 2px var(--j-chao), 0 0 0 4px var(--j-presenca);

  /* ── toque ───────────────────────────────────────────────────────────── */
  --j-alvo: 36px;

  /* ── ESTADOS DO AGENTE: cor por estado canônico (ver nucleo/fases.js) ─── */
  --j-cor-ocioso: var(--j-tinta-3);
  --j-cor-trabalho: var(--j-ion);
  --j-cor-permissao: var(--j-atencao);
  --j-cor-concluido: var(--j-ok);
  --j-cor-falhou: var(--j-erro);
  --j-cor-cancelado: var(--j-tinta-3);
}

/* v12 — o ESCURO é a identidade do produto e vale sem escolha nenhuma. O
   claro existe por escolha em Ajustes: "claro" fixa, "sistema" segue o aparelho. */
@media (prefers-color-scheme: light) {
  :root[data-tema="sistema"] {
    color-scheme: light;
    --j-trilho-fundo: #FFFFFF;
    --j-cartao: #FFFFFF;
    --j-cartao-borda: #D8E0E8;
    --j-acao: #0E7490;
    --j-acao-forte: #0891B2;
    --j-brilho: rgba(8, 145, 178, .18);
    --j-chao: #F3F5F7;
    --j-camada-1: #EBEFF3;
    --j-camada-2: #FFFFFF;
    --j-camada-3: #E1E6EC;
    --j-veu-modal: rgba(20, 28, 36, .32);
    --j-traco-suave: #E1E6EB;
    --j-traco: #D0D8DF;
    --j-traco-forte: #B2BDC7;
    --j-tinta: #111820;
    --j-tinta-2: #4A5663;
    --j-tinta-3: #6C7885;
    --j-presenca: #0A7B8D;
    --j-presenca-forte: #086575;
    --j-presenca-veu: rgba(10, 123, 141, .1);
    --j-sobre-presenca: #F2FDFF;
    --j-sobre-ok: #FFFFFF;
    --j-ion: #2F63D6;
    --j-ion-veu: rgba(47, 99, 214, .09);
    --j-atencao: #946400;
    --j-atencao-veu: rgba(148, 100, 0, .1);
    --j-ok: #2C7A4D;
    --j-ok-veu: rgba(44, 122, 77, .09);
    --j-erro: #B23A2F;
    --j-erro-veu: rgba(178, 58, 47, .08);
    --j-sombra-flutua: 0 18px 48px rgba(20, 22, 24, .16), 0 2px 6px rgba(20, 22, 24, .08);
    --j-sombra-baixa: 0 1px 2px rgba(20, 22, 24, .08);
  }
}
:root[data-tema="claro"] {
  color-scheme: light;
  --j-trilho-fundo: #FFFFFF;
  --j-cartao: #FFFFFF;
  --j-cartao-borda: #D8E0E8;
  --j-acao: #0E7490;
  --j-acao-forte: #0891B2;
  --j-brilho: rgba(8, 145, 178, .18);
  --j-chao: #F3F5F7;
  --j-camada-1: #EBEFF3;
  --j-camada-2: #FFFFFF;
  --j-camada-3: #E1E6EC;
  --j-veu-modal: rgba(20, 28, 36, .32);
  --j-traco-suave: #E1E6EB;
  --j-traco: #D0D8DF;
  --j-traco-forte: #B2BDC7;
  --j-tinta: #111820;
  --j-tinta-2: #4A5663;
  --j-tinta-3: #6C7885;
  --j-presenca: #0A7B8D;
  --j-presenca-forte: #086575;
  --j-presenca-veu: rgba(10, 123, 141, .1);
  --j-sobre-presenca: #F2FDFF;
  --j-sobre-ok: #FFFFFF;
  --j-ion: #2F63D6;
  --j-ion-veu: rgba(47, 99, 214, .09);
  --j-atencao: #946400;
  --j-atencao-veu: rgba(148, 100, 0, .1);
  --j-ok: #2C7A4D;
  --j-ok-veu: rgba(44, 122, 77, .09);
  --j-erro: #B23A2F;
  --j-erro-veu: rgba(178, 58, 47, .08);
  --j-sombra-flutua: 0 18px 48px rgba(20, 22, 24, .16), 0 2px 6px rgba(20, 22, 24, .08);
  --j-sombra-baixa: 0 1px 2px rgba(20, 22, 24, .08);
}

@media (pointer: coarse) { :root { --j-alvo: 44px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --j-tempo-rapido: 1ms; --j-tempo: 1ms; --j-tempo-entrada: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--j-chao);
  color: var(--j-tinta);
  font: 400 var(--j-t-14)/var(--j-altura) var(--j-fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--j-presenca); text-underline-offset: 3px; }
a:hover { color: var(--j-presenca-forte); }
:focus { outline: none; }
:focus-visible { box-shadow: var(--j-anel); border-radius: var(--j-raio-controle); }
::selection { background: var(--j-presenca-veu); }
[hidden] { display: none !important; }
code, kbd, pre { font-family: var(--j-fonte-mono); font-size: .92em; }

h1, h2, h3 { font-family: var(--j-fonte-titulo); font-weight: 600; margin: 0;
             letter-spacing: -.012em; text-wrap: balance; }

.j-so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.j-pular {
  position: fixed; left: var(--j-e4); top: -64px; z-index: 1000;
  padding: var(--j-e2) var(--j-e4); border-radius: var(--j-raio-controle);
  background: var(--j-presenca); color: var(--j-sobre-presenca);
  font-weight: 600; text-decoration: none;
  transition: top var(--j-tempo) var(--j-curva);
}
.j-pular:focus { top: var(--j-e4); color: var(--j-sobre-presenca); }

.j-rolagem { scrollbar-width: thin; scrollbar-color: var(--j-traco) transparent; }
.j-rolagem::-webkit-scrollbar { width: 10px; height: 10px; }
.j-rolagem::-webkit-scrollbar-thumb {
  background: var(--j-traco); border: 3px solid transparent;
  background-clip: content-box; border-radius: var(--j-raio-pilula);
}
.j-rolagem::-webkit-scrollbar-track { background: transparent; }

.j-rotulo-caixa {
  font-size: var(--j-t-12); font-weight: 600; color: var(--j-tinta-3);
  letter-spacing: var(--j-rastro-rotulo); text-transform: uppercase;
}
.j-numeros { font-variant-numeric: tabular-nums; }

/* ============================================================================
   BOTÃO
   ============================================================================ */
.j-botao {
  --_fundo: var(--j-camada-2);
  --_borda: var(--j-traco);
  --_tinta: var(--j-tinta);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--j-e2);
  min-height: var(--j-alvo);
  padding: 0 var(--j-e4);
  border: 1px solid var(--_borda);
  border-radius: var(--j-raio-controle);
  background: var(--_fundo);
  color: var(--_tinta);
  font-size: var(--j-t-14); font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: background var(--j-tempo-rapido) var(--j-curva),
              border-color var(--j-tempo-rapido) var(--j-curva),
              color var(--j-tempo-rapido) var(--j-curva);
}
.j-botao:hover:not(:disabled) { --_fundo: var(--j-camada-3); --_borda: var(--j-traco-forte); }
.j-botao:active:not(:disabled) { transform: translateY(.5px); }
.j-botao:disabled { opacity: .45; cursor: not-allowed; }
.j-botao svg { width: 18px; height: 18px; flex: none; }

.j-botao--primario { --_fundo: var(--j-presenca); --_borda: transparent;
                     --_tinta: var(--j-sobre-presenca); font-weight: 600; }
.j-botao--primario:hover:not(:disabled) { --_fundo: var(--j-presenca-forte); --_borda: transparent; }

.j-botao--sutil { --_fundo: transparent; --_borda: transparent; --_tinta: var(--j-tinta-2); }
.j-botao--sutil:hover:not(:disabled) { --_fundo: var(--j-camada-2); --_borda: transparent;
                                       --_tinta: var(--j-tinta); }

.j-botao--perigo { --_tinta: var(--j-erro); }
.j-botao--perigo:hover:not(:disabled) { --_fundo: var(--j-erro-veu); --_borda: var(--j-erro); }

/* PARAR: reconhecível sem ler. Sempre o mesmo lugar, a mesma forma. */
.j-botao--parar { --_fundo: var(--j-tinta); --_borda: transparent; --_tinta: var(--j-chao);
                  font-weight: 600; }
.j-botao--parar:hover:not(:disabled) { --_fundo: var(--j-erro); --_borda: transparent;
                                       --_tinta: #fff; }

.j-botao--icone { width: var(--j-alvo); padding: 0; }
.j-botao--pequeno { min-height: 30px; padding: 0 var(--j-e3); font-size: var(--j-t-13); }
.j-botao--pequeno.j-botao--icone { width: 30px; }
/* no dedo, "pequeno" é só o desenho: o alvo continua com 44px
   (medido na bancada: apagar, copiar e fechar tinham 30×30) */
@media (pointer: coarse) {
  .j-botao--pequeno { min-height: var(--j-alvo); }
  .j-botao--pequeno.j-botao--icone { width: var(--j-alvo); }
  .j-pular { min-height: var(--j-alvo); display: inline-flex; align-items: center; }
}

/* ============================================================================
   CAMPO
   ============================================================================ */
.j-campo {
  width: 100%; min-height: var(--j-alvo);
  padding: 8px var(--j-e3);
  border: 1px solid var(--j-traco);
  border-radius: var(--j-raio-controle);
  background: var(--j-camada-1);
  color: var(--j-tinta);
  font-size: var(--j-t-14);
  transition: border-color var(--j-tempo-rapido) var(--j-curva),
              box-shadow var(--j-tempo-rapido) var(--j-curva);
}
.j-campo::placeholder { color: var(--j-tinta-3); }
.j-campo:hover { border-color: var(--j-traco-forte); }
.j-campo:focus-visible, .j-campo:focus { border-color: var(--j-presenca);
                                         box-shadow: 0 0 0 3px var(--j-presenca-veu); }
.j-campo[aria-invalid="true"] { border-color: var(--j-erro); }
select.j-campo { appearance: none; padding-right: var(--j-e7);
  background-image: linear-gradient(45deg, transparent 50%, var(--j-tinta-3) 50%),
                    linear-gradient(135deg, var(--j-tinta-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat; }

.j-grupo { display: grid; gap: var(--j-e2); }
.j-grupo > label, .j-rotulo { font-size: var(--j-t-13); font-weight: 500; color: var(--j-tinta-2); }
.j-ajuda { font-size: var(--j-t-12); color: var(--j-tinta-3); }

.j-alternador {                             /* switch acessível: <button role="switch"> */
  position: relative; width: 38px; height: 22px; flex: none;
  border-radius: var(--j-raio-pilula); border: 1px solid var(--j-traco-forte);
  background: var(--j-camada-3); cursor: pointer; padding: 0;
  transition: background var(--j-tempo) var(--j-curva);
}
.j-alternador::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--j-tinta-2);
  transition: transform var(--j-tempo) var(--j-curva), background var(--j-tempo) var(--j-curva);
}
.j-alternador[aria-checked="true"] { background: var(--j-presenca); border-color: transparent; }
.j-alternador[aria-checked="true"]::after { transform: translateX(16px); background: var(--j-sobre-presenca); }

/* ============================================================================
   SUPERFÍCIE E LISTA
   Não há "cartão" genérico. Uma superfície elevada existe para o que é
   de fato um objeto separado (um pedido de permissão, um resultado);
   o resto é lista com separador.
   ============================================================================ */
.j-superficie {
  background: var(--j-camada-2);
  border: 1px solid var(--j-traco-suave);
  border-radius: var(--j-raio-superficie);
}
.j-lista { list-style: none; margin: 0; padding: 0; }
.j-lista > li { display: flex; align-items: center; gap: var(--j-e3);
                padding: var(--j-e3) 0; border-bottom: 1px solid var(--j-traco-suave); }
.j-lista > li:last-child { border-bottom: 0; }
.j-separador { height: 1px; border: 0; background: var(--j-traco-suave); margin: var(--j-e4) 0; }

/* ============================================================================
   DIÁLOGO (usa <dialog> nativo: foco preso e Esc de graça)
   ============================================================================ */
.j-dialogo {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0; border: 1px solid var(--j-traco);
  border-radius: var(--j-raio-folha);
  background: var(--j-camada-2); color: var(--j-tinta);
  box-shadow: var(--j-sombra-flutua);
}
.j-dialogo::backdrop { background: var(--j-veu-modal); backdrop-filter: blur(2px); }
.j-dialogo[open] { animation: j-entrar var(--j-tempo-entrada) var(--j-curva); }
.j-dialogo__corpo { padding: var(--j-e6) var(--j-e6) var(--j-e4); display: grid; gap: var(--j-e3); }
.j-dialogo__titulo { font-size: var(--j-t-17); }
.j-dialogo__texto { color: var(--j-tinta-2); margin: 0; }
.j-dialogo__acoes { display: flex; justify-content: flex-end; gap: var(--j-e2);
                    padding: var(--j-e3) var(--j-e6) var(--j-e6); }

/* folha lateral (ajustes) — no celular vira folha de baixo */
.j-folha {
  /* max-width: none — o <dialog> do navegador vem com
     max-width: calc(100% - 6px - 2em), e no celular a folha deixava uma
     faixa da página aparecendo à esquerda (medido na bancada, 390px) */
  position: fixed; margin: 0; inset: 0 0 0 auto; height: 100dvh; max-height: none; max-width: none;
  width: min(560px, 100vw); padding: 0; border: 0;
  border-left: 1px solid var(--j-traco);
  background: var(--j-camada-1); color: var(--j-tinta);
  box-shadow: var(--j-sombra-flutua);
}
.j-folha::backdrop { background: var(--j-veu-modal); }
.j-folha[open] { animation: j-deslizar var(--j-tempo-entrada) var(--j-curva); }

@keyframes j-entrar { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes j-deslizar { from { transform: translateX(24px); opacity: 0; } }

/* ============================================================================
   MENU
   ============================================================================ */
.j-menu {
  min-width: 200px; padding: var(--j-e1); margin: 0;
  border: 1px solid var(--j-traco); border-radius: var(--j-raio-superficie);
  background: var(--j-camada-2); box-shadow: var(--j-sombra-flutua);
}
.j-menu__item {
  display: flex; align-items: center; gap: var(--j-e3); width: 100%;
  min-height: var(--j-alvo); padding: 0 var(--j-e3);
  border: 0; border-radius: var(--j-raio-controle); background: transparent;
  color: var(--j-tinta); text-align: left; cursor: pointer; font-size: var(--j-t-14);
}
.j-menu__item:hover, .j-menu__item:focus-visible { background: var(--j-camada-3); box-shadow: none; }
.j-menu__item--perigo { color: var(--j-erro); }

/* ============================================================================
   AVISO (toast)
   ============================================================================ */
.j-avisos {
  position: fixed; z-index: 900; left: 50%; bottom: calc(var(--j-e6) + env(safe-area-inset-bottom));
  transform: translateX(-50%); display: grid; gap: var(--j-e2);
  width: min(420px, calc(100vw - 24px)); pointer-events: none;
}
.j-aviso {
  display: flex; align-items: center; gap: var(--j-e3);
  padding: var(--j-e3) var(--j-e4);
  border: 1px solid var(--j-traco); border-radius: var(--j-raio-superficie);
  background: var(--j-camada-2); box-shadow: var(--j-sombra-flutua);
  color: var(--j-tinta); font-size: var(--j-t-14);
  pointer-events: auto; animation: j-entrar var(--j-tempo-entrada) var(--j-curva);
}
.j-aviso::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
                   background: var(--_cor, var(--j-tinta-3)); }
.j-aviso--ok { --_cor: var(--j-ok); }
.j-aviso--erro { --_cor: var(--j-erro); }
.j-aviso--atencao { --_cor: var(--j-atencao); }

/* ============================================================================
   INDICADOR DE ESTADO DO AGENTE
   Um só componente para todo lugar que diz "o que o Jarvis está fazendo".
   `data-estado` recebe o estado CANÔNICO (nucleo/fases.js), que vem direto
   da fase publicada pelo servidor — não existe segundo modelo de estado.
   ============================================================================ */
.j-estado {
  --_cor: var(--j-cor-ocioso);
  display: inline-flex; align-items: center; gap: var(--j-e2);
  min-height: 24px; font-size: var(--j-t-13); color: var(--j-tinta-2);
}
.j-estado__sinal { position: relative; width: 8px; height: 8px; flex: none;
                   border-radius: 50%; background: var(--_cor); }
.j-estado[data-estado="pensando"],
.j-estado[data-estado="planejando"],
.j-estado[data-estado="executando"],
.j-estado[data-estado="verificando"],
.j-estado[data-estado="recuperando"] { --_cor: var(--j-cor-trabalho); color: var(--j-tinta); }
.j-estado[data-estado="permissao"],
.j-estado[data-estado="incompleto"] { --_cor: var(--j-cor-permissao); color: var(--j-tinta); }
.j-estado[data-estado="concluido"] { --_cor: var(--j-cor-concluido); }
.j-estado[data-estado="falhou"] { --_cor: var(--j-cor-falhou); color: var(--j-tinta); }
.j-estado[data-estado="cancelado"] { --_cor: var(--j-cor-cancelado); }

/* só o que está TRABALHANDO respira; um ponto pulsando em "concluído" mente */
.j-estado[data-estado="pensando"] .j-estado__sinal::after,
.j-estado[data-estado="planejando"] .j-estado__sinal::after,
.j-estado[data-estado="executando"] .j-estado__sinal::after,
.j-estado[data-estado="verificando"] .j-estado__sinal::after,
.j-estado[data-estado="recuperando"] .j-estado__sinal::after,
.j-estado[data-estado="permissao"] .j-estado__sinal::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--_cor); opacity: 0;
  animation: j-onda 1.6s var(--j-curva) infinite;
}
@keyframes j-onda { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

/* ============================================================================
   CARREGANDO — um "sinal" de três barras, não um spinner genérico
   ============================================================================ */
.j-carregando { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.j-carregando i { width: 3px; border-radius: 2px; background: var(--j-ion);
                  animation: j-barra 1s var(--j-curva) infinite; }
.j-carregando i:nth-child(1) { height: 6px; }
.j-carregando i:nth-child(2) { height: 12px; animation-delay: .12s; }
.j-carregando i:nth-child(3) { height: 9px; animation-delay: .24s; }
@keyframes j-barra { 0%, 100% { opacity: .35; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

.j-esqueleto {
  border-radius: var(--j-raio-controle);
  background: linear-gradient(90deg, var(--j-camada-2) 25%, var(--j-camada-3) 40%, var(--j-camada-2) 60%);
  background-size: 300% 100%; animation: j-brilho 1.4s ease-in-out infinite;
}
@keyframes j-brilho { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ============================================================================
   FERRAMENTA — uma ação dentro de uma tarefa
   ============================================================================ */
.j-ferramenta {
  --_cor: var(--j-tinta-3);
  display: grid; grid-template-columns: 16px 1fr auto; align-items: start;
  gap: var(--j-e3); padding: 6px 0; font-size: var(--j-t-13); color: var(--j-tinta-2);
}
.j-ferramenta__marca { width: 16px; height: 16px; margin-top: 1px; position: relative; }
.j-ferramenta__marca::before { content: ""; position: absolute; inset: 4px; border-radius: 50%;
                               background: var(--_cor); }
.j-ferramenta[data-situacao="rodando"] { --_cor: var(--j-ion); color: var(--j-tinta); }
.j-ferramenta[data-situacao="rodando"] .j-ferramenta__marca::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--j-ion-veu); border-top-color: var(--j-ion);
  animation: j-girar .9s linear infinite;
}
.j-ferramenta[data-situacao="feito"] { --_cor: var(--j-ok); }
.j-ferramenta[data-situacao="nao_confirmado"] { --_cor: var(--j-atencao); }
.j-ferramenta[data-situacao="falhou"] { --_cor: var(--j-erro); color: var(--j-tinta); }
.j-ferramenta__detalhe { grid-column: 2 / -1; font-size: var(--j-t-12); color: var(--j-tinta-3); }
@keyframes j-girar { to { transform: rotate(360deg); } }

/* ============================================================================
   VOZ — ouvindo / falando / processando
   ============================================================================ */
.j-voz { position: relative; }
.j-voz[data-voz="ouvindo"] { --_fundo: var(--j-presenca-veu); --_borda: var(--j-presenca);
                             --_tinta: var(--j-presenca); }
.j-voz[data-voz="ouvindo"]::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid var(--j-presenca); opacity: 0;
  animation: j-onda-voz 1.3s var(--j-curva) infinite;
}
.j-voz[data-voz="falando"] { --_tinta: var(--j-ion); --_borda: var(--j-ion); }
@keyframes j-onda-voz { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }

/* ============================================================================
   MEDALHA / CHIP
   ============================================================================ */
.j-medalha {
  display: inline-flex; align-items: center; gap: var(--j-e1);
  height: 22px; padding: 0 var(--j-e2); border-radius: var(--j-raio-pilula);
  font-size: var(--j-t-12); font-weight: 500;
  background: var(--j-camada-3); color: var(--j-tinta-2);
}
.j-medalha--ok { background: var(--j-ok-veu); color: var(--j-ok); }
.j-medalha--atencao { background: var(--j-atencao-veu); color: var(--j-atencao); }
.j-medalha--erro { background: var(--j-erro-veu); color: var(--j-erro); }
.j-medalha--ion { background: var(--j-ion-veu); color: var(--j-ion); }

/* ============================================================================
   v11 — PEÇAS NOVAS
   ============================================================================ */
.j-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.j-icone svg { width: 18px; height: 18px; }

/* passo que ficou para trás na trilha do turno: seguiu adiante, sem afirmar
   que deu certo (chat/mensagens.js::anotarPasso) */
.j-ferramenta[data-situacao="passou"] { --_cor: var(--j-tinta-3); }

.j-botao--ok { --_fundo: var(--j-ok-veu); --_borda: color-mix(in srgb, var(--j-ok) 40%, transparent);
               --_tinta: var(--j-ok); font-weight: 600; }
.j-botao--ok:hover:not(:disabled) { --_fundo: var(--j-ok-veu); --_borda: var(--j-ok); --_tinta: var(--j-ok); }

/* controle segmentado (filtros) */
.j-segmentos {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: 10px; background: var(--j-camada-1); border: 1px solid var(--j-traco-suave);
}
.j-segmentos::-webkit-scrollbar { display: none; }
.j-segmentos__opcao {
  flex: none; min-height: 32px; padding: 0 var(--j-e3); border: 0; border-radius: 7px;
  background: transparent; color: var(--j-tinta-2); font-size: var(--j-t-13); font-weight: 500; cursor: pointer;
  transition: background var(--j-tempo-rapido) var(--j-curva), color var(--j-tempo-rapido) var(--j-curva);
}
.j-segmentos__opcao:hover { color: var(--j-tinta); }
.j-segmentos__opcao[aria-pressed="true"] { background: var(--j-camada-3); color: var(--j-tinta); box-shadow: var(--j-sombra-baixa); }
@media (pointer: coarse) { .j-segmentos__opcao { min-height: 40px; } }

.j-chip { padding: 1px 8px 1px 6px; border-radius: var(--j-raio-pilula); background: var(--j-camada-3); color: var(--j-tinta-2); }

/* aviso com uma ação ("Desfazer") */
.j-aviso--acao { padding-right: var(--j-e2); }
.j-aviso__texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.j-aviso__acao { --_tinta: var(--j-presenca); font-weight: 600; }

/* barra de progresso fina */
.j-progresso { height: 4px; border-radius: var(--j-raio-pilula); background: var(--j-camada-3); overflow: hidden; }
.j-progresso__cheio { display: block; height: 100%; border-radius: inherit; background: var(--j-presenca); }

/* ── acentos (Personalização) ────────────────────────────────────────────────
   A cor escolhida em Personalização troca os tokens da identidade. Mora aqui
   (e não em shell.css) desde a v13 para valer em TODA página que carrega o
   design system: o shell, a workspace 3D e o que vier. Quem aplica o atributo
   é `aplicarTemaSalvo` (ajustes/folha.js), lendo `jarvis_acento`. */
:root[data-acento="matrix"] { --j-presenca: #22C55E; --j-presenca-forte: #4ADE80; --j-presenca-veu: rgba(34, 197, 94, .13); --j-acao: #16A34A; --j-acao-forte: #22C55E; --j-brilho: rgba(34, 197, 94, .36); }
:root[data-acento="roxo"] { --j-presenca: #A855F7; --j-presenca-forte: #C084FC; --j-presenca-veu: rgba(168, 85, 247, .14); --j-acao: #7C3AED; --j-acao-forte: #9333EA; --j-brilho: rgba(168, 85, 247, .36); }
:root[data-acento="fogo"] { --j-presenca: #F97316; --j-presenca-forte: #FB923C; --j-presenca-veu: rgba(249, 115, 22, .14); --j-acao: #EA580C; --j-acao-forte: #F97316; --j-brilho: rgba(249, 115, 22, .36); }
:root[data-acento="cinza"] { --j-presenca: #94A3B8; --j-presenca-forte: #CBD5E1; --j-presenca-veu: rgba(148, 163, 184, .14); --j-acao: #475569; --j-acao-forte: #64748B; --j-brilho: rgba(148, 163, 184, .28); }
:root[data-acento="sangue"] { --j-presenca: #EF4444; --j-presenca-forte: #F87171; --j-presenca-veu: rgba(239, 68, 68, .14); --j-acao: #B91C1C; --j-acao-forte: #DC2626; --j-brilho: rgba(239, 68, 68, .36); }
:root[data-acento="laranja"] { --j-presenca: #FB923C; --j-presenca-forte: #FDBA74; --j-presenca-veu: rgba(251, 146, 60, .14); --j-acao: #C2410C; --j-acao-forte: #EA580C; --j-brilho: rgba(251, 146, 60, .36); }
:root[data-acento="dourado"] { --j-presenca: #EAB308; --j-presenca-forte: #FACC15; --j-presenca-veu: rgba(234, 179, 8, .14); --j-acao: #A16207; --j-acao-forte: #CA8A04; --j-brilho: rgba(234, 179, 8, .34); }
:root[data-acento="prata"] { --j-presenca: #CBD5E1; --j-presenca-forte: #E2E8F0; --j-presenca-veu: rgba(203, 213, 225, .12); --j-acao: #1E40AF; --j-acao-forte: #2563EB; --j-brilho: rgba(203, 213, 225, .26); }
:root[data-tema="claro"][data-acento="prata"], :root[data-tema="claro"][data-acento="cinza"] { --j-presenca: #475569; --j-presenca-forte: #334155; }
:root[data-tema="claro"][data-acento="dourado"] { --j-presenca: #A16207; --j-presenca-forte: #854D0E; }