/* ══════════════════════════════════════════════════════ 1. tokens */
:root{
  /* Superfícies — a hierarquia inteira mora nestes sete degraus.
     A paleta é neutra-fria de propósito: azul saturado no FUNDO competia
     com o azul de acento, que é quem deve significar interação. O matiz
     continua frio (222°), mas a saturação caiu — o resultado lê como
     grafite profundo, não como "tela azul". */
  --bg-app:#0B0D11;
  --bg-trilho:#0E1015;
  --bg-surface:#12151C;
  --bg-hover:#171B23;
  --bg-campo:#0F1218;
  /* Elevated: o degrau ACIMA de surface — menu, popover, diálogo. Antes
     menu e cartão usavam a mesma cor e a pilha visual não existia. */
  --bg-elevated:#191E28;
  --bg-ativo:rgba(77,155,255,.12);

  /* bordas: a sutil separa, a normal contorna */
  --borda-sutil:#191D26;
  --borda:#222835;
  --borda-forte:#2E3746;

  /* texto: três níveis, e a hierarquia sai daqui.
     O tx3 subiu. Ele veste metadados de 10 a 12px — autor, data, contagem,
     rótulo de tópico — e reprovava no contraste AA (4,5:1) em TODOS os
     temas: 3,4 a 3,7 sobre o fundo do cartão. Não é detalhe de
     conformidade: o rótulo do tópico, que é a navegação primária da
     Biblioteca, era o texto de MENOR contraste da tela. Cada valor abaixo
     foi escolhido contra o degrau mais claro em que o token pousa
     (`--bg-elevated`), que é o pior caso de cada tema. */
  --tx1:#E9EDF4;
  --tx2:#9AA4B4;
  --tx3:#848E9E;

  /* sombras: três alturas — menu, painel flutuante, modal */
  --sombra-pop:0 8px 28px rgba(0,0,0,.45);
  --sombra-overlay:0 16px 48px rgba(0,0,0,.52);
  --sombra-modal:0 24px 70px rgba(0,0,0,.6);

  /* acento e semântica */
  --azul:#4D9BFF;
  /* O texto que senta EM CIMA do acento. Nos temas escuros é quase-preto;
     no claro o acento escurece e o texto vira branco. */
  --sobre-acento:#04101F;
  --azul-claro:#6FADFF;
  --azul-fraco:rgba(77,155,255,.12);
  /* Um degrau entre o fundo e a borda: o hover do chip de filtro precisava
     dele, e um rgba escrito na regra seria valor fora da seção 1. */
  --azul-medio:rgba(77,155,255,.20);
  --azul-borda:rgba(77,155,255,.35);
  --ok:#3ECF8E;      --ok-fraco:rgba(62,207,142,.12);
  --alerta:#F2B457;  --alerta-fraco:rgba(242,180,87,.12);
  --erro:#FF7B72;    --erro-fraco:rgba(255,123,114,.12);
  /* bordas semânticas: existiam soltas dentro de `.aviso`, que é valor fora
     da seção 1 — o único lugar onde valor pode morar. */
  --ok-borda:rgba(62,207,142,.30);
  --alerta-borda:rgba(242,180,87,.30);
  --erro-borda:rgba(255,123,114,.30);

  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-pill:999px;

  /* alturas de controle — a razão de existir deste arquivo */
  --h-controle:36px;
  --h-mini:28px;
  --h-linha:44px;
  --h-topo:48px;

  /* espaçamento, múltiplos de 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e5:20px; --e6:24px; --e8:32px;

  /* Motion: dois tempos de sistema. Micro-durações fora deles (.08–.16s em
     reação, thread, toast) são ajuste fino LOCAL e deliberado — não vire
     token o que só tem um uso. Easing padrão do produto é ease-out. */
  --t-rapido:150ms;
  --t-medio:200ms;

  /* Densidade: a escala tipográfica em três degraus.
     O produto vivia num degrau só — título de seção a 12px, rótulo de
     cartão a 11px, grupo de sidebar a 10px — sem NENHUMA forma de
     compensar. Numa ferramenta de jornada inteira, num monitor de NOC a um
     metro e meio, isso cansa. O padrão passa a ser `confortavel`; quem
     prefere o antigo escolhe `compacta` em Preferências (QA UI-001). */
  --fs-secao:15px; --fs-meta:13px; --fs-micro:12px; --fs-grupo:11px;

  --trilho-w:232px;
  --trilho-rail:52px;

  /* sidebar do aplicativo */
  --sb-w:236px;
  --sb-rail:60px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;

  /* apelidos do esquema anterior: os style= inline que sobraram nos templates
     apontam para estes nomes e não podem quebrar antes da limpeza */
  --fundo:var(--bg-app);
  --painel:var(--bg-surface);
  --painel-alto:var(--bg-hover);
  --painel-topo:rgba(11,13,17,.72);
  --texto:var(--tx1);
  --texto-2:var(--tx2);
  --texto-3:var(--tx3);
  --grafite:var(--tx2);
  --grafite-fraco:var(--bg-hover);
  --linha:var(--borda-sutil);
  --branco:var(--bg-surface);
  --raio:8px;
  --raio-p:6px;
}

/* ════════════════════════════════════════════════════════ 2. base */
*{box-sizing:border-box}
/* `.consulta{display:flex}` vencia a regra do navegador para [hidden]. Vale
   para qualquer classe que defina display, por isso é global. */
[hidden]{display:none!important}
/* O fundo vai no <html>, e não só no <body>.
   Enquanto a navegação é comum, o navegador propaga o fundo do body para o
   canvas e o html sem fundo não incomoda ninguém. Com `@view-transition`
   (mais abaixo) deixa de ser assim: o body está DENTRO do snapshot `root`
   que é animado, e durante a troca as duas camadas — a que sai e a que
   entra — passam por opacidade parcial ao mesmo tempo. O que aparece atrás
   delas é o html; sem fundo próprio, é o canvas do navegador, e o piscar
   branco entre telas é exatamente isso. */
html{color-scheme:dark;background:var(--bg-app)}
body{margin:0;background:var(--bg-app);color:var(--tx1);
  font-family:var(--sans);font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;
  border-radius:var(--r-sm)}
h1{font-size:20px;font-weight:650;letter-spacing:-.3px;margin:0}
h2{font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  color:var(--tx2);margin:0 0 var(--e3)}
hr{border:none;border-top:1px solid var(--borda-sutil)}
code,.mono{font-family:var(--mono);font-size:12px}
.nada{color:var(--tx3)}
.oculto{display:none}

/* rolagem discreta: o trilho não pode ter uma barra clara chamando atenção */
*{scrollbar-width:thin;scrollbar-color:var(--borda) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:padding-box}
:hover::-webkit-scrollbar-thumb{background:var(--borda);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--borda-forte);
  background-clip:padding-box}

/* ══════════════════════════════════════════════════ 3. controles */
/* Um botão. Quatro variantes que mudam COR, nunca tamanho — a hierarquia sai
   do peso visual, não de fazer o principal maior que os outros. */
.botao{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--e2);height:var(--h-controle);padding:0 var(--e3);
  border:1px solid transparent;border-radius:var(--r-md);
  background:var(--azul);color:var(--sobre-acento);font-family:inherit;font-size:13px;
  font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:background var(--t-rapido) ease,border-color var(--t-rapido) ease,
  color var(--t-rapido) ease,filter var(--t-rapido) ease}
.botao:hover{background:var(--azul-claro);color:var(--sobre-acento);text-decoration:none}
/* Pressionado responde na hora, antes de a rede responder. */
.botao:active{filter:brightness(.92)}
.botao.fraco:active,.botao.ghost:active,.icone-btn:active,
.icone-acao:active{background:var(--bg-ativo)}
.botao:disabled{opacity:.45;cursor:not-allowed}
/* Secundário com presença: sobre --bg-app, o fundo --bg-surface tinha um
   degrau de contraste que sumia em monitor de brilho baixo — "Filtros" e
   "Exportar" pareciam desabilitados. Um degrau acima e borda forte. */
.botao.fraco{background:var(--bg-hover);color:var(--tx1);
  border-color:var(--borda-forte);font-weight:500}
.botao.fraco:hover{background:var(--bg-ativo);border-color:var(--azul-borda);
  color:var(--tx1)}
.botao.ghost{background:transparent;color:var(--tx2);border-color:transparent;
  font-weight:500}
.botao.ghost:hover{background:var(--bg-hover);color:var(--tx1)}
/* Vermelho só no hover e na confirmação: botão permanentemente vermelho vira
   paisagem e para de significar perigo. */
.botao.perigo,.perigo{background:var(--bg-surface);color:var(--tx2);
  border-color:var(--borda);font-weight:500}
.botao.perigo:hover,.perigo:hover{background:var(--erro-fraco);color:var(--erro);
  border-color:rgba(255,123,114,.4)}
.botao.mini,.mini{height:var(--h-mini);padding:0 var(--e2);font-size:12px}
/* O par destrutivo (digitar o nome + Remover) vai para a outra ponta da
   régua: destruir nunca fica ao alcance de um clique escorregado do Salvar. */
.acoes .confirma-remocao{margin-left:auto;max-width:240px}
.acoes{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  margin-bottom:var(--e4)}

/* Ícone dentro de botão de texto: mesmo gap da busca, mesmo tamanho de
   glifo. Sem isto cada botão novo escolhe o próprio espaçamento, que é como
   se chega a três recuos diferentes na mesma barra. */
.botao svg{width:14px;height:14px;flex:none}
.botao:has(svg){gap:var(--e2)}

/* Ação de linha: alvo de 28px mesmo com o glifo pequeno. Ícone solto numa
   área de 8px é caça ao pixel, e a tabela é onde mais se erra o clique. */
.icone-acao{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--tx3);cursor:pointer;
  transition:background var(--t-rapido) ease,color var(--t-rapido) ease}
.icone-acao svg{width:15px;height:15px}
.icone-acao:hover{background:var(--bg-hover);color:var(--tx1)}

/* botão de ícone: quadrado, mesma altura dos demais */
.icone-btn{display:inline-flex;align-items:center;justify-content:center;
  width:var(--h-controle);height:var(--h-controle);padding:0;
  border:1px solid transparent;border-radius:var(--r-md);background:transparent;
  color:var(--tx2);cursor:pointer;transition:background var(--t-rapido) ease,
  color var(--t-rapido) ease}
.icone-btn:hover{background:var(--bg-hover);color:var(--tx1);text-decoration:none}
.icone-btn.mini{width:var(--h-mini);height:var(--h-mini)}
.icone-btn svg{width:15px;height:15px}

/* campos */
label{display:block;font-size:12px;color:var(--tx2);margin:var(--e3) 0 var(--e1)}
/* Todos os tipos de campo de TEXTO, e não só `text` e `password`.
   `date`, `datetime-local`, `number` e `search` ficavam de fora e saíam com
   o desenho nativo do navegador — borda clara no meio de uma tela escura.
   Não é problema novo do Cowork: Agendamentos já usa `datetime-local` e
   `number`, e a busca de Equipamentos usa `search`. Consertar no seletor
   base conserta as três (item 71), em vez de criar uma variante local. */
input[type=text],input[type=password],input[type=date],
input[type=datetime-local],input[type=time],input[type=number],
input[type=search],input[type=email],input[type=url],
input:not([type]),select,textarea{
  width:100%;height:var(--h-controle);padding:0 var(--e3);font-family:inherit;
  font-size:13px;color:var(--tx1);background:var(--bg-campo);
  border:1px solid var(--borda);border-radius:var(--r-md);
  transition:border-color var(--t-rapido) ease,box-shadow var(--t-rapido) ease}
textarea{height:auto;padding:var(--e2) var(--e3);line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--tx3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul-borda);
  box-shadow:0 0 0 3px var(--azul-fraco)}
input[readonly]{color:var(--tx2);background:var(--bg-app)}
input[type=file]{height:auto;padding:var(--e2) var(--e3);color:var(--tx2);
  font-size:12px}
/* O seletor nativo (calendário, relógio) segue o esquema da página; sem
   isto ele abre branco sobre a tela escura. */
input[type=date],input[type=datetime-local],input[type=time]{
  color-scheme:dark}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{
  filter:invert(.7);cursor:pointer}
input[type=search]::-webkit-search-cancel-button{filter:invert(.6)}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--azul);margin:0 6px 0 0;
  cursor:pointer}
option{background:var(--bg-campo);color:var(--tx1)}
.campo{margin-bottom:var(--e3)}
.campo .ajuda,.ajuda{font-size:11px;color:var(--tx3);margin-top:var(--e1);
  line-height:1.6}
.campo textarea{font-family:var(--mono);font-size:12px;min-height:90px;
  resize:vertical}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e4)}
select[multiple]{height:180px;padding:var(--e2);font-family:var(--mono);
  font-size:12px}

/* selos: cor no texto e no ponto, sem cápsula */
.selo{display:inline-flex;align-items:center;gap:var(--e2);font-size:12px;
  font-weight:500;white-space:nowrap;color:var(--tx2)}
.ponto{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}
.selo.ok{color:var(--ok)}
.selo.alerta{color:var(--alerta)}
.selo.erro{color:var(--erro)}
.selo.neutro{color:var(--tx3)}

/* etiquetas: cápsula quase transparente, nunca parecendo botão */
.tag{display:inline-flex;align-items:center;height:20px;padding:0 var(--e2);
  border:1px solid var(--borda-sutil);border-radius:var(--r-sm);
  background:transparent;color:var(--tx3);font-size:11px;line-height:1;
  white-space:nowrap}
a.tag,button.tag{cursor:pointer;font-family:inherit}
a.tag:hover,button.tag:hover{color:var(--azul);border-color:var(--azul-borda);
  text-decoration:none}
.tags{display:flex;gap:var(--e1);flex-wrap:wrap;align-items:center}

/* chips de vista e de filtro */
.chip,.vista{display:inline-flex;align-items:center;gap:var(--e2);
  height:var(--h-mini);padding:0 var(--e3);border-radius:var(--r-md);
  border:1px solid transparent;background:transparent;color:var(--tx2);
  font-family:inherit;font-size:12px;white-space:nowrap;
  transition:background var(--t-rapido) ease,color var(--t-rapido) ease}
.chip:hover,.vista:hover{background:var(--bg-hover);color:var(--tx1);
  text-decoration:none}
.chip.on,.vista.on{background:var(--azul-fraco);color:var(--tx1);
  border-color:var(--azul-borda)}
.chip b{font-weight:600;color:inherit}

/* menus suspensos */
/* O corpo abre absoluto (fallback sem JS) e o script promove a .pop-fixa:
   coordenadas de viewport calculadas na abertura, com detecção de colisão.
   É o que deixa o menu escapar de tabela com clip, editor com overflow e
   gaveta — a regra .pop-fixa mora no FIM do arquivo para vencer os ajustes
   por contexto (.eu-menu, .ed-menu) por ordem, com a mesma especificidade. */
.menu{display:inline-block;position:relative}
.menu>summary{list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu-corpo{position:absolute;right:0;top:calc(100% + var(--e1));z-index:40;
  min-width:200px;padding:var(--e1);text-align:left;background:var(--bg-elevated);
  border:1px solid var(--borda);border-radius:var(--r-lg);
  box-shadow:var(--sombra-pop);transform-origin:top right;
  animation:menu-entra 120ms ease-out}
@keyframes menu-entra{from{opacity:0;transform:scale(.97) translateY(-3px)}}
.menu-corpo a,.menu-corpo button:not(.botao){display:block;width:100%;
  text-align:left;padding:var(--e2) var(--e3);border:none;
  border-radius:var(--r-sm);background:none;font-family:inherit;font-size:12.5px;
  color:var(--tx2);cursor:pointer}
.menu-corpo a:hover,.menu-corpo button:not(.botao):hover{background:var(--bg-hover);
  color:var(--tx1);text-decoration:none}
.menu-nota{padding:var(--e2) var(--e3);font-size:var(--fs-micro);
  color:var(--tx2);line-height:1.45}
.menu-nota b{color:var(--tx1)}
.aviso-uso{background:var(--alerta-fraco);border-radius:var(--r-sm);
  margin:var(--e1) var(--e2)}
.menu-secao{font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--tx3);padding:var(--e2) var(--e3) var(--e1)}
.menu-risco{border-top:1px solid var(--borda-sutil);margin-top:var(--e1);
  padding-top:var(--e1)}
.menu-corpo .perigoso{color:var(--tx2)}
.menu-corpo .perigoso:hover{background:var(--erro-fraco);color:var(--erro)}

/* avisos */
/* Bloco, e não flex: quase todo aviso é `<b>título</b> detalhe`, e num flex
   o texto solto virava item anônimo AO LADO do título — duas colunas que
   ninguém desenhou. Quem precisa de botão na mesma faixa usa .faixa-chave. */
.aviso{display:block;min-height:42px;
  padding:var(--e2) var(--e4);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md);font-size:12.5px;line-height:1.55;
  background:var(--bg-surface);color:var(--tx2)}
.aviso.alerta{background:var(--alerta-fraco);
  border-color:var(--alerta-borda);color:var(--alerta)}
.aviso.erro{background:var(--erro-fraco);border-color:var(--erro-borda);
  color:var(--erro)}
/* Sucesso é VERDE. "Conta criada" saía em âmbar (cor de aviso) em Credenciais
   e Templates e em verde em Regras — o mesmo componente com três caras
   (QA visual 03/09, T-01). */
.aviso.ok{background:var(--ok-fraco);border-color:var(--ok-borda);
  color:var(--ok)}
/* Um <summary> com a classe do botão subia 8px em relação aos <button>
   vizinhos ("Editar" nas notas, "Executar" nos templates): mesma caixa. */
summary.botao{display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;list-style:none}
summary.botao::-webkit-details-marker{display:none}
/* O menu "Gerenciar" das credenciais estourava a altura da tela e o "ver"
   do segredo cobria o placeholder (QA visual E-52). */
.menu-conta{max-height:min(72vh,600px);overflow:auto}
/* Tags e sites: as ações de uma linha ficam numa linha (QA visual E-24). */
.tabela-tags td.fim{white-space:nowrap}
.tabela-tags td.fim form{display:inline-flex;flex-wrap:nowrap;align-items:center;
  gap:4px;vertical-align:middle;margin-left:4px}
.tabela-tags td.fim input{width:120px}
/* Diálogo aberto não deixa a página rolar nem deslocar (F-07). */
html:has(dialog[open]){overflow:hidden}
.cw-pagina{overflow-x:clip}
/* O cabeçalho das telas do Cowork (título + chips + botão) não quebrava linha:
   em 1440px o "Novo incidente" ficava fora da tela e o foco do diálogo puxava
   a página para o lado (origem real do F-07). */
.cw-cab{flex-wrap:wrap;row-gap:var(--e2)}
.cw-cab .cw-cab-acoes{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.menu-conta input[type=password]{padding-right:44px}
/* Coluna vazia do quadro de atividades explica o que fazer (T-16). */
.botao .ico{vertical-align:-2px;margin-right:2px}
.cw-coluna-vazia{font-size:12px;color:var(--tx3);padding:14px 8px;text-align:center;
  border:1px dashed var(--borda-sutil);border-radius:var(--r-md)}
.em-linha>form,.em-linha>details{display:inline-flex;align-items:center}
/* Só o PRIMEIRO negrito é título (vira linha própria); um negrito no meio
   da frase — "use <b>Executar agora</b> na linha dele" — continua inline. */
.aviso b{font-weight:600;color:inherit}
.aviso b:first-child,.aviso>div>b:first-child{display:block}
.aviso code{font-size:11.5px;background:rgba(0,0,0,.25);padding:1px 5px;
  border-radius:4px}
.aviso-topo{margin-bottom:var(--e4)}
.aviso.faixa-chave{display:flex;align-items:center;gap:var(--e3)}

/* superfície: uma só, sem caixa dentro de caixa */
.bloco{background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-radius:var(--r-lg);margin-bottom:var(--e5);overflow:hidden}
.bloco>h2{padding:var(--e3) var(--e4);margin:0;font-size:var(--fs-secao);
  border-bottom:1px solid var(--borda-sutil)}
.bloco .corpo{padding:var(--e4)}
.linha{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--borda-sutil)}
.linha:last-child{border-bottom:none}
.linha .principal{flex:1;min-width:0}
.linha .titulo{font-size:13px;font-weight:500}
.linha .detalhe{font-size:var(--fs-meta);color:var(--tx2)}
.linha .direita{text-align:right;font-size:12px;color:var(--tx2);
  white-space:nowrap}

/* tabela */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:var(--e2) var(--e3);background:transparent;
  border-bottom:1px solid var(--borda-sutil);font-size:11px;font-weight:500;
  letter-spacing:.5px;text-transform:uppercase;color:var(--tx3)}
td{height:var(--h-linha);padding:0 var(--e3);vertical-align:middle;
  border-bottom:1px solid var(--borda-sutil)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t-rapido) ease}
tbody tr:hover{background:var(--bg-hover)}
td.mono{color:var(--tx2);font-variant-numeric:tabular-nums}
td.fim{text-align:right;white-space:nowrap}

.vazio{padding:var(--e8) var(--e5);text-align:center;color:var(--tx2);
  font-size:13px}
/* `>b` e não `b`: o título do vazio é o FILHO direto. Um negrito no meio de
   um parágrafo ("Exemplos: <b>Backup diário</b>, …") continuava inline até
   alguém notar cada nome quebrando numa linha própria. */
.vazio>b{display:block;color:var(--tx1);font-size:14px;font-weight:600;
  margin-bottom:var(--e1)}
.vazio p{margin:0 0 var(--e1)}
.vazio .botao{margin-top:var(--e4)}

/* ══════════════════════════════════════════════════ 4. estruturas */
/* --- shell do aplicativo: sidebar + topbar contextual
   O corpo vira duas colunas: o trilho de navegação à esquerda, persistente
   entre telas, e a área de conteúdo com uma topbar discreta. `com-shell`
   existe porque login e as janelas de terminal NÃO têm shell — display:flex
   no body global empilharia o conteúdo delas na horizontal. */
body.com-shell{display:flex;min-height:100vh}
.area{flex:1;min-width:0;display:flex;flex-direction:column}

.sb{position:sticky;top:0;z-index:35;display:flex;flex-direction:column;
  width:var(--sb-w);height:100vh;flex:none;background:var(--bg-trilho);
  border-right:1px solid var(--borda-sutil);
  transition:width var(--t-medio) ease;view-transition-name:ism-sb}
html.sb-mini .sb{width:var(--sb-rail)}

.sb-topo{display:flex;align-items:center;height:56px;padding:0 var(--e2);
  flex:none}
.sb-marca{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  height:40px;padding:0 var(--e2);border-radius:var(--r-md);
  text-decoration:none;transition:background var(--t-rapido) ease}
.sb-marca:hover{background:var(--bg-hover);text-decoration:none}
.sb-logo{display:grid;place-items:center;width:28px;height:28px;flex:none;
  border-radius:8px;background:linear-gradient(155deg,#3B77D1,#1B3157);
  color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.sb-logo svg{width:15px;height:15px}
.sb-nome{min-width:0;line-height:1.15}
.sb-nome b{display:block;font-size:13.5px;font-weight:650;
  letter-spacing:.2px;color:var(--tx1)}
.sb-nome span{display:block;font-size:10px;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.sb-mini .sb-topo{justify-content:center;padding:0}
html.sb-mini .sb-marca{flex:none;padding:0;width:40px;justify-content:center}
html.sb-mini .sb-nome{display:none}

.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;
  padding:var(--e1) var(--e2) var(--e4);display:flex;flex-direction:column;
  gap:1px}
.sb-item{position:relative;display:flex;align-items:center;gap:10px;
  height:32px;padding:0 10px;border-radius:var(--r-md);flex:none;
  border:none;background:none;font-family:inherit;text-align:left;
  color:var(--tx2);font-size:13px;white-space:nowrap;cursor:pointer;
  text-decoration:none;
  transition:background var(--t-rapido) ease,color var(--t-rapido) ease}
.sb-item svg{width:16px;height:16px;flex:none;color:var(--tx3);
  transition:color var(--t-rapido) ease}
.sb-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb-item:hover{background:var(--bg-hover);color:var(--tx1);
  text-decoration:none}
.sb-item:hover svg{color:var(--tx2)}
.sb-item:focus-visible{outline:none;
  box-shadow:inset 0 0 0 1px var(--azul-borda);background:var(--bg-hover)}
/* O item ativo MORFA de uma tela para a outra em vez de sumir aqui e
   aparecer lá. Só existe um `.on` por vez no documento. */
.sb-item.on{background:var(--bg-ativo);color:var(--tx1);font-weight:500;
  view-transition-name:ism-nav-ativo}
.sb-item.on svg{color:var(--azul)}
.sb-grupo{margin:var(--e4) 0 2px;padding:0 10px;font-size:10px;
  font-weight:600;letter-spacing:.9px;text-transform:uppercase;
  color:var(--tx3);white-space:nowrap}
html.sb-mini .sb-item{justify-content:center;padding:0;height:36px}
html.sb-mini .sb-item span{display:none}
html.sb-mini .sb-item svg{width:17px;height:17px}
/* No trilho estreito o rótulo do grupo vira um fio: a estrutura continua
   perceptível sem texto espremido. */
html.sb-mini .sb-grupo{margin:var(--e3) var(--e3) 2px;padding:0;height:1px;
  overflow:hidden;color:transparent;background:var(--borda-sutil)}

/* Dica flutuante do trilho recolhido — CSS puro, sem biblioteca. O atraso
   evita que atravessar o trilho com o mouse dispare uma fileira de dicas. */
html.sb-mini .sb .sb-item::after{content:attr(data-dica);position:absolute;
  left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px);
  z-index:80;padding:5px 10px;border-radius:var(--r-md);
  background:var(--bg-elevated);border:1px solid var(--borda);
  color:var(--tx1);font-size:12px;font-weight:500;white-space:nowrap;
  box-shadow:var(--sombra-pop);opacity:0;pointer-events:none;
  transition:opacity var(--t-rapido) ease .05s,
             transform var(--t-rapido) ease .05s}
html.sb-mini .sb .sb-item:hover::after{opacity:1;
  transform:translateY(-50%) translateX(0);transition-delay:.25s}

.sb-pe{flex:none;padding:var(--e2);border-top:1px solid var(--borda-sutil)}
.sb-pe .sb-item{color:var(--tx3)}
.sb-pe .sb-item:hover{color:var(--tx1)}
.sb-alterna svg{transition:transform var(--t-medio) ease}
html.sb-mini .sb-alterna svg{transform:rotate(180deg)}

/* --- topbar contextual */
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;
  gap:var(--e3);height:var(--h-topo);padding:0 var(--e4);
  background:var(--painel-topo);backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--borda-sutil)}
.topo-secao{min-width:0;font-size:13px;font-weight:600;color:var(--tx1);
  letter-spacing:-.1px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.topo-espaco{flex:1}
.topo-abre-sb{display:none}

/* Modo SaaS: o ambiente em que se está, permanente na topbar.
   Discreto de propósito — é orientação, não alarme —, mas com ponto de cor
   e sem encolher: numa tela estreita, o que sai é o título da seção (que a
   navegação já diz), não o nome do cliente cujos equipamentos vão receber
   comando. */
.topo-amb{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  height:24px;padding:0 10px;margin-left:var(--e3);
  border:1px solid var(--borda-sutil);border-radius:99px;
  background:var(--bg-hover);color:var(--tx2);
  font-size:11.5px;font-weight:600;letter-spacing:.1px;
  text-decoration:none;white-space:nowrap;max-width:220px;overflow:hidden;
  text-overflow:ellipsis}
.topo-amb:hover{color:var(--tx1);border-color:var(--azul)}
.topo-amb-ponto{flex:0 0 auto;width:6px;height:6px;border-radius:50%;
.topo-amb-logo{width:16px;height:16px;border-radius:4px;object-fit:cover;flex:none}
/* O ponto do chip diz do coletor, quando o ambiente depende dele. */
.topo-amb-ponto.coletor-on{background:#2fbf71;box-shadow:0 0 0 2px rgba(47,191,113,.25)}
.topo-amb-ponto.coletor-off{background:#e5484d;box-shadow:0 0 0 2px rgba(229,72,77,.25)}
.topo-amb-estado{margin-left:6px;font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em}
.faixa-coletor{background:rgba(229,72,77,.12);color:#e5484d;border-bottom-color:#e5484d}
  background:var(--azul)}

/* Gatilho da paleta: parece um campo, age como botão. */
.topo-busca{display:inline-flex;align-items:center;gap:var(--e2);
  height:30px;padding:0 6px 0 var(--e3);min-width:200px;
  border:1px solid var(--borda);border-radius:var(--r-md);
  background:var(--bg-campo);color:var(--tx3);font-family:inherit;
  font-size:12.5px;cursor:pointer;
  transition:border-color var(--t-rapido) ease,color var(--t-rapido) ease}
.topo-busca:hover{border-color:var(--borda-forte);color:var(--tx2)}
.topo-busca svg{width:14px;height:14px;flex:none}
.topo-busca span{flex:1;text-align:left}
.tecla{display:inline-flex;align-items:center;height:18px;padding:0 5px;
  border:1px solid var(--borda);border-radius:4px;
  background:var(--bg-surface);color:var(--tx3);
  font-family:var(--mono);font-size:10px;line-height:1}

/* ------------------------------------------- transição entre telas */
/* Documento para documento, feita pelo NAVEGADOR. A navegação continua
   sendo navegação — F5, voltar, ctrl-clique e abrir em outra guia seguem
   iguais, e cada tela carrega seus scripts do zero. A alternativa (trocar
   o conteúdo por fetch) quebraria toda tela que liga handler na carga.
   Navegador que não conhece a regra ignora e navega como sempre. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ism-tela-sai 120ms ease-in both}
::view-transition-new(root){animation:ism-tela-entra 180ms ease-out both}
@keyframes ism-tela-sai{to{opacity:0;transform:translateY(-4px)}}
@keyframes ism-tela-entra{from{opacity:0;transform:translateY(6px)}}
/* O topo fica PARADO: ele é o mesmo em todas as telas, e vê-lo fazer
   cross-fade com ele mesmo é o que faz a troca parecer recarga. */
.topo{view-transition-name:ism-topo}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-old(ism-nav-ativo),::view-transition-new(ism-nav-ativo){
    animation:none}
}
.eu{display:flex;align-items:center;gap:var(--e3);font-size:12px;color:var(--tx2)}
.eu .bola{display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:linear-gradient(160deg,#2F5C9E,#1B3157);
  color:#fff;font-size:10px;font-weight:600;letter-spacing:.5px;
  overflow:hidden;flex:none}
/* Com foto, o degradê sai da frente: ele existe para dar contraste às
   iniciais, e atrás de uma imagem opaca é só peso. A cor escolhida no
   perfil (`cw-cor-*`) vence os dois — mesma classe do avatar do Cowork,
   uma lista fechada e nunca `style` montado com valor de formulário. */
.eu .bola.bola-foto{background:var(--bg-campo)}
.eu .bola img{width:100%;height:100%;object-fit:cover;display:block}
.eu .sair{color:var(--tx2)}
.eu .sair:hover{color:var(--tx1)}

/* --- página */
/* `width:100%`: a página é filho de um flex column (.area), e sem largura
   explícita o `margin:0 auto` a encolheria ao tamanho do conteúdo. */
.pagina{width:100%;max-width:1100px;margin:0 auto;
  padding:var(--e6) var(--e5)}
.pagina.larga{max-width:none;padding:0}
/* `larga` zera o padding porque em Equipamentos a grade `.tela` estrutura a
   página — e o padding mora em `.tela>.conteudo`. Execuções, o painel e a
   revisão usam `larga` com um `.conteudo` SOLTO, que aquele seletor não
   alcança: o conteúdo ia parar colado na borda esquerda da janela. O teto de
   largura evita o extremo oposto num ultrawide. */
.pagina.larga>.conteudo{max-width:1560px;margin:0 auto;
  padding:var(--e5) var(--e6) 80px}
.sub{color:var(--tx2);font-size:var(--fs-meta);margin:var(--e1) 0 0}
.sub b{color:var(--tx1);font-weight:600;font-variant-numeric:tabular-nums}
.voltar{display:inline-block;margin-bottom:var(--e2);font-size:12px;
  color:var(--tx2)}
.voltar:hover{color:var(--tx1)}

/* --- trilho de filtros, retrátil */
.tela{display:grid;grid-template-columns:var(--trilho-w) minmax(0,1fr);
  align-items:start;transition:grid-template-columns var(--t-medio) ease}
.tela.recolhido{grid-template-columns:var(--trilho-rail) minmax(0,1fr)}
.tela>.conteudo{min-width:0;padding:var(--e5) var(--e5) 80px}
.trilho{position:sticky;top:var(--h-topo);height:calc(100vh - var(--h-topo));
  overflow-y:auto;overflow-x:hidden;background:var(--bg-trilho);
  border-right:1px solid var(--borda-sutil);padding:var(--e4) var(--e2) var(--e8)}
.trilho-topo{display:flex;align-items:center;gap:var(--e2);
  padding:0 var(--e2) var(--e2)}
.trilho-topo h2,.trilho-topo .rotulo-trilho{flex:1;margin:0;font-size:10px;
  letter-spacing:.9px;text-transform:uppercase;font-weight:600;
  color:var(--tx3)}
.trilho-alterna{flex:none;color:var(--tx3)}
.limpar{font-size:11px;color:var(--azul);padding:2px var(--e1);
  border-radius:var(--r-sm)}
.limpar:hover{background:var(--azul-fraco);text-decoration:none}

/* Espaçamento cria a hierarquia; antes havia um divisor por grupo. */
.grupo{padding:var(--e2) 0 0}
.grupo>summary{display:flex;align-items:center;gap:var(--e2);cursor:pointer;
  padding:var(--e1) var(--e2);border-radius:var(--r-sm);font-size:10px;
  font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--tx3)}
.grupo>summary:hover{color:var(--tx2)}
.icone-grupo{width:14px;height:14px;flex:none;color:var(--tx3)}
.seta{width:8px;height:8px;flex:none;margin-left:auto;color:var(--tx3);
  transition:transform var(--t-rapido) ease}
.grupo[open] .seta{transform:rotate(90deg)}
.grupo-corpo{padding:var(--e1) 0 var(--e2)}
.faceta{display:flex;align-items:center;gap:var(--e2);height:26px;
  padding:0 var(--e2);border-radius:var(--r-sm);color:var(--tx2);font-size:12.5px}
.faceta:hover{background:var(--bg-hover);color:var(--tx1);text-decoration:none}
.marca-caixa{display:grid;place-items:center;width:14px;height:14px;flex:none;
  border:1px solid var(--borda-forte);border-radius:4px;background:var(--bg-campo);
  transition:background var(--t-rapido) ease}
.marca-caixa svg{width:8px;height:8px;opacity:0;color:var(--sobre-acento)}
.faceta.on{color:var(--tx1)}
.faceta.on .marca-caixa{background:var(--azul);border-color:var(--azul)}
.faceta.on .marca-caixa svg{opacity:1}
.faceta .rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.faceta .n{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.faceta .ponto.reg{background:var(--ok)}
.faceta .ponto.aus{background:var(--alerta)}
.faceta .ponto.dup{background:var(--erro)}
.busca-tag{height:var(--h-mini);margin:0 0 var(--e1);font-size:12px}
.tags-lista{max-height:200px;overflow-y:auto}

/* trilho recolhido: só ícones. Caixa de seleção espremida não ajuda ninguém. */
.tela.recolhido .trilho{padding:var(--e4) var(--e1)}
.tela.recolhido .trilho-topo{justify-content:center;padding:0 0 var(--e2)}
.tela.recolhido .trilho-topo h2,
.tela.recolhido .trilho-topo .limpar,
.tela.recolhido .grupo-corpo,
.tela.recolhido .seta,
.tela.recolhido .grupo>summary .rotulo-grupo{display:none}
.tela.recolhido .grupo>summary{justify-content:center;height:38px;padding:0}
.tela.recolhido .grupo>summary:hover{background:var(--bg-hover)}
.tela.recolhido .icone-grupo{width:17px;height:17px}
.tela.recolhido .grupo.tem-filtro>summary,
.tela.recolhido .grupo.tem-filtro .icone-grupo{color:var(--azul)}

/* Pular para o conteúdo. Invisível até o foco — e aí é um botão de
   verdade, no canto superior esquerdo, acima de tudo. */
.pular-nav{position:fixed;top:-100px;left:var(--e3);z-index:200;
  padding:var(--e2) var(--e4);background:var(--azul);
  color:var(--sobre-acento);border-radius:var(--r-md);font-size:13px;
  font-weight:500;text-decoration:none;transition:top var(--t-rapido)}
.pular-nav:focus{top:var(--e3);text-decoration:none}

/* --- cabeçalho da página */
/* `flex-wrap`: abaixo de ~450px o h1 era espremido a 89px, o subtítulo
   quebrava em cinco linhas e a ação primária ia parar na borda da
   viewport, fora do contêiner. */
.cabeca{display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:var(--e4);margin-bottom:var(--e3)}
.cabeca>div{min-width:0}
@media (max-width:640px){
  .cabeca>.acoes-cabeca{flex-basis:100%}
}
.cabeca .sub{margin-top:2px}

/* métricas: informação, não botão */
.cartoes-topo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e1);
  margin:0 0 var(--e3)}
.cartao-n{display:inline-flex;align-items:center;gap:var(--e2);
  height:var(--h-mini);padding:0 var(--e3);border:1px solid transparent;
  border-radius:var(--r-md);background:transparent;color:var(--tx2);
  font-size:12px;transition:background var(--t-rapido) ease}
.cartao-n::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--tx3)}
.cartao-n.sem-ponto::before{display:none}
.cartao-n b{font-size:13px;font-weight:600;color:var(--tx1);
  font-variant-numeric:tabular-nums}
.cartao-n.ok::before{background:var(--ok)}
.cartao-n.erro::before{background:var(--erro)}
.cartao-n.alerta::before{background:var(--alerta)}
a.cartao-n:hover{background:var(--bg-hover);color:var(--tx1);text-decoration:none}
.cartao-n.on{background:var(--azul-fraco);border-color:var(--azul-borda);
  color:var(--tx1)}

.faixa-chave{min-height:42px;margin-bottom:var(--e3)}
.faixa-chave div{flex:1;font-weight:500}
.faixa-chave .botao{flex:none}

/* --- busca */
.barra-busca{position:relative;margin-bottom:var(--e3)}
.modos{display:flex;gap:var(--e4);margin-bottom:var(--e2);
  border-bottom:1px solid var(--borda-sutil)}
.modo{position:relative;background:none;border:none;font-family:inherit;
  font-size:12px;color:var(--tx2);padding:0 0 var(--e2);cursor:pointer}
.modo:hover{color:var(--tx2)}
.modo.on{color:var(--tx1)}
.modo.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--azul)}
.consulta{display:flex;align-items:center;gap:var(--e2);height:var(--h-controle);
  padding:0 var(--e2) 0 var(--e3);background:var(--bg-campo);
  border:1px solid var(--borda);border-radius:var(--r-md);
  transition:border-color var(--t-rapido) ease,box-shadow var(--t-rapido) ease}
.consulta:focus-within{border-color:var(--azul-borda);
  box-shadow:0 0 0 3px var(--azul-fraco)}
.consulta .prompt{display:flex;flex:none;color:var(--tx3);
  font-family:var(--mono);font-size:13px;user-select:none;
  transition:color var(--t-rapido) ease}
/* O ícone acende junto com a borda: em foco ele deixa de ser decoração e
   passa a marcar onde o texto começa. */
.consulta:focus-within .prompt{color:var(--tx2)}
.consulta .prompt svg{width:14px;height:14px}
.consulta input{flex:1;min-width:0;height:auto;padding:0;background:none;
  border:none;font-size:13px}
.consulta input:focus{outline:none;box-shadow:none}
#form-avancado input{font-family:var(--mono)}
.consulta .botao{height:var(--h-mini)}
/* Enter já envia o formulário. O botão só aparece quando há o que buscar — e
   a classe é adicionada pelo JS, nunca pelo servidor: sem script o botão
   continua visível, senão quem não tem JS ficaria sem forma de enviar com o
   mouse. */
.consulta.sem-texto .buscar{display:none}
.buscar{width:var(--h-mini);height:var(--h-mini);flex:none}
.buscar svg{width:14px;height:14px}
.dicas{display:flex;flex-wrap:wrap;gap:var(--e1);margin:0;color:var(--tx3);
  font-size:11px}
.dicas code{background:var(--bg-hover);color:var(--tx2);padding:2px var(--e2);
  border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer}
.dicas code:hover{color:var(--azul);border-color:var(--azul-borda)}
.ajuda-consulta>summary{display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border:1px solid var(--borda);border-radius:50%;
  color:var(--tx3);font-size:11px;cursor:pointer}
.ajuda-consulta>summary:hover{color:var(--azul);border-color:var(--azul-borda)}
.ajuda-corpo{width:390px;padding:var(--e3)}
.ajuda-corpo .dicas{margin-bottom:var(--e1)}
.sugestoes{position:absolute;left:0;right:0;top:100%;z-index:44;
  margin-top:var(--e1);padding:var(--e1);background:var(--bg-elevated);
  border:1px solid var(--borda);border-radius:var(--r-lg);max-height:280px;
  overflow-y:auto;box-shadow:var(--sombra-pop)}
.sugestao{display:block;width:100%;padding:var(--e1) var(--e3);text-align:left;
  background:none;border:none;border-radius:var(--r-sm);font-family:var(--mono);
  font-size:12.5px;color:var(--tx2);cursor:pointer}
.sugestao:hover,.sugestao.on{background:var(--bg-hover);color:var(--tx1)}

/* --- vistas e colunas */
.vistas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e1);
  margin:0 0 var(--e3)}
.direita-vistas{margin-left:auto;display:flex;align-items:center;gap:var(--e1)}
.vista.mais{width:var(--h-mini);padding:0;justify-content:center;
  color:var(--tx3);cursor:pointer;list-style:none}
.vista.mais::-webkit-details-marker{display:none}
.vista-nova,.colunas{position:relative}
.vista-nova .menu-corpo,.colunas .menu-corpo{left:auto;right:0;width:250px;
  padding:var(--e3)}
.form-vista label{margin:0 0 var(--e1)}
.form-vista .botao,.colunas form .botao{width:100%;margin-top:var(--e3)}
.form-vista-rm{margin:0}
.form-vista-rm .rm{display:block;width:100%;padding:var(--e1) var(--e2);
  text-align:left;background:none;border:none;border-radius:var(--r-sm);
  font-family:inherit;font-size:12px;color:var(--tx2);cursor:pointer}
.form-vista-rm .rm:hover{background:var(--erro-fraco);color:var(--erro)}
.linha-coluna{display:flex;align-items:center;gap:var(--e2);margin:0;
  padding:var(--e1) 2px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.linha-coluna:hover{color:var(--tx1)}

/* --- tabela de equipamentos */
/* `overflow:hidden` cortava o menu ⋮ das últimas linhas: o dropdown abre
   para baixo, passa do limite do bloco e o operador não consegue clicar nas
   ações do último equipamento. `clip` no eixo X mantém o corte horizontal
   (colunas largas não vazam) e `visible` no Y deixa o menu pendurar para
   fora — o par clip/visible é o único que faz isso sem virar contêiner de
   rolagem. O custo é o canto arredondado de baixo perder o recorte no hover
   da última linha, que é bem mais barato que uma ação inalcançável. */
/* `container-type:inline-size` porque a régua certa é a largura da TABELA, não
   a da janela. As media queries abaixo olhavam a viewport, e a tabela vive num
   bloco que a sidebar de navegação (~200px, ou 56 recolhida) e o trilho de
   filtros (~230px) já encolheram: em 1440x900 — o padrão do MacBook Pro 14"
   em "Mais espaço" — a coluna de tags continuava ligada, a tabela media 965px
   dentro de um contêiner de 930 e a célula de AÇÕES ficava 34px fora do clip.
   Sem rolagem horizontal, as onze ações do menu ⋮ eram inalcançáveis. Faixas
   medidas no QA: 1421-1499, 1281-1420 e tudo abaixo de 1180 (QA BUG-003). */
.tabela-envolve{background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-radius:var(--r-lg);overflow-x:clip;overflow-y:visible;
  container-type:inline-size;container-name:tabela}
.tabela-envolve table{font-size:12.5px}
/* A coluna de ações da tabela de usuários estourava o card em 1440px e os
   botões ficavam fora do alcance (QA visual F-09): os botões quebram linha. */
.tabela-rolante td.fim .em-linha{flex-wrap:wrap;justify-content:flex-end;
  gap:4px;min-width:150px}
/* A tabela precisa CABER no bloco: com clip não existe rolagem, e o que
   passar da borda é amputado — a coluna de ações inteira sumia em notebook.
   Padding de célula mais denso (Termius) e teto com reticências nas colunas
   de texto livre; o valor completo continua no title e no painel. */
.tabela-envolve th,.tabela-envolve td{padding-left:var(--e2);
  padding-right:var(--e2)}
.tabela-envolve td .filtro-celula{display:block;max-width:14ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabela-envolve .tags{max-width:150px;flex-wrap:nowrap;overflow:hidden}
.tabela-envolve .tags .tag{flex:0 0 auto}
/* Estreitou e mesmo assim não coube: tags e endereço saem de cena antes de
   qualquer coluna virar amputação — os dois continuam no painel de detalhes
   e na página do equipamento. Ações nunca é sacrificada.
   Os cortes são por CONTAINER: com o trilho aberto a tabela tem ~930px numa
   janela de 1440, e é a largura dela que decide o que cabe. Recolher o trilho
   devolve as colunas sozinho, sem mexer na janela. */
@container tabela (max-width:1000px){.tabela-envolve .col-tags{display:none}}
@container tabela (max-width:820px){.tabela-envolve .col-endereco{display:none}}
@container tabela (max-width:680px){.tabela-envolve .col-coleta{display:none}}
/* Rede de segurança. Mesmo com os cortes acima, uma combinação de colunas
   opcionais ligadas pelo operador pode estourar de novo — e com `clip` o que
   estoura não tem rolagem, some. A coluna de ações fica presa à direita: o
   que for amputado é o meio da tabela, nunca a porta para operar o
   equipamento. */
.tabela-envolve .col-acoes{position:sticky;right:0;z-index:1;
  background:var(--bg-surface)}
.tabela-envolve tbody tr:hover .col-acoes{background:var(--bg-hover,var(--bg-surface))}
.tabela-envolve thead .col-acoes{z-index:3}
/* A sombra só aparece quando há conteúdo cortado atrás dela. */
.tabela-envolve .col-acoes::before{content:"";position:absolute;left:-10px;
  top:0;bottom:0;width:10px;pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(0,0,0,.18))}
/* Cabeçalho da tabela acompanha a rolagem, grudando logo abaixo da topbar.
   Fundo opaco: sem ele as linhas passam por trás do texto do cabeçalho. */
.tabela-envolve th{position:sticky;top:var(--h-topo);z-index:2;
  background:var(--bg-surface)}
.linha-host{cursor:pointer}
.linha-host.marcada{background:var(--azul-fraco)}
.col-marca{width:36px;padding-right:0}
/* Cabeçalho clicável de ordenação. A seta só aparece na coluna ativa: uma
   seta pálida em dez colunas é ruído, e o operador procura a que está em uso
   (QA UX-002). */
.tabela-envolve th a.ordena{display:inline-flex;align-items:center;gap:3px;
  color:inherit;text-decoration:none;white-space:nowrap}
.tabela-envolve th a.ordena:hover{color:var(--tx1)}
.tabela-envolve th a.ordena.on{color:var(--tx1);font-weight:600}
.seta-ord{font-size:9px;line-height:1;opacity:.85}
/* `<th scope="row">` do hostname: semanticamente é cabeçalho da linha — é o
   que faz o leitor de tela dizer "swvxicatp01, Site, matriz" em vez de
   "matriz" solto. Visualmente tem de continuar sendo uma célula: o `th` do
   tema é 11px, MAIÚSCULAS, com letter-spacing e cor apagada, e herdar isso
   transformava `swvxicatp01` em `SWVXICATP01`. Também precisa sair do
   `position:sticky` do cabeçalho, senão a coluna flutua na rolagem. */
.tabela-envolve td.cel-host,.tabela-envolve th.cel-host{font-weight:400;
  text-align:left;position:static;background:none;text-transform:none;
  letter-spacing:normal;font-size:12.5px;color:var(--tx1);
  padding:0 var(--e3);height:var(--h-linha);vertical-align:middle;
  border-bottom:1px solid var(--borda-sutil)}
/* Rodapé de paginação. */
/* Painel de integridade do inventário: sinal, frase e a porta para a lista.
   O nível decide só a cor do ponto — "alerta" é o que quebra operação,
   "info" é higiene. */
.lista-integridade{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--e2)}
.lista-integridade li{display:flex;align-items:center;gap:var(--e2);
  font-size:12.5px;color:var(--tx2)}
.int-texto{flex:1;min-width:0}
.int-sinal{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--tx3)}
.int-alerta .int-sinal{background:var(--alerta)}
.int-alerta .int-texto{color:var(--tx1)}
.int-info .int-sinal{background:var(--tx3)}
.paginacao{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  margin:var(--e3) 0 0;font-size:12px;color:var(--tx2)}
.pag-botoes{display:flex;align-items:center;gap:var(--e2)}
.pag-atual{padding:0 var(--e2);white-space:nowrap}
.pag-tamanho{margin-left:auto;display:flex;align-items:center;gap:var(--e2)}
.pag-n{color:var(--tx2);text-decoration:none;padding:2px 6px;
  border-radius:var(--r-sm)}
.pag-n:hover{background:var(--bg-hover);color:var(--tx1)}
.pag-n.on{background:var(--azul-fraco);color:var(--tx1);font-weight:600}
/* Extremo já alcançado: continua no fluxo (o layout não pula) e para de
   convidar ao clique. */
.botao.inerte{opacity:.4;pointer-events:none}
.col-acoes{width:78px;text-align:right;white-space:nowrap}
.host{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--tx1)}
a.host:hover{color:var(--azul)}
.estado{display:inline-flex;align-items:center;gap:var(--e2);font-size:12px;
  color:var(--tx2);white-space:nowrap}
.estado .ponto{background:currentColor}
.estado.ok{color:var(--ok)}
.estado.erro{color:var(--erro)}
.estado.alerta{color:var(--alerta)}
.estado.neutro{color:var(--tx3)}
.estado.velho{opacity:.55}
.coleta{font-size:12px;color:var(--tx2);white-space:nowrap}
a.coleta:hover{color:var(--azul)}
.coleta.alerta{color:var(--alerta)}
.coleta.erro{color:var(--erro)}
.coleta.neutro{color:var(--tx3)}
.cfg-mudou{display:inline-block;margin-left:var(--e2);font-family:var(--mono);
  font-size:11px;color:var(--tx3)}
a.cfg-mudou:hover{color:var(--azul);text-decoration:none}

/* ações da linha: sempre visíveis */
/* A meia-opacidade de repouso SOMAVA com o cinza terciário do ícone, e o
   produto das duas atenuações lia como botão desabilitado — o operador não
   achava o SSH sem já saber que ele existia. Hierarquia por cor e hover,
   nunca por transparência sobre cor fraca: dois descontos viram invisível. */
.acoes-linha{display:inline-flex;align-items:center;gap:2px}
.icone{display:inline-flex;align-items:center;justify-content:center;
  width:var(--h-mini);height:var(--h-mini);border:none;border-radius:var(--r-sm);
  background:none;color:var(--tx2);font-family:var(--mono);font-size:11px;
  cursor:pointer}
.icone:hover{background:var(--bg-hover);color:var(--tx1);text-decoration:none}
.menu>summary.icone{font-size:15px;line-height:1}
/* O menu Inventário é um <summary> vestido de botão: precisa da mesma altura
   dos controles ao lado, senão volta a existir botão de 34 e de 36 na mesma
   linha — que é exatamente o que este arquivo existe para impedir. */
.menu.inventario>summary{display:inline-flex}

/* --- barra de lote flutuante: some quando não há seleção */
.lote{position:fixed;left:50%;bottom:var(--e5);z-index:45;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:var(--e3);
  padding:var(--e2) var(--e2) var(--e2) var(--e4);background:var(--bg-elevated);
  border:1px solid var(--borda-forte);border-radius:var(--r-lg);
  box-shadow:var(--sombra-overlay);
  transition:opacity var(--t-medio) ease,transform var(--t-medio) ease}
.lote.visivel{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.lote-conta{font-size:12.5px;color:var(--tx1);white-space:nowrap}
.lote-conta b{font-weight:600;font-variant-numeric:tabular-nums}
.lote-alvo{display:flex;gap:var(--e1)}
.lote-acao{display:flex;align-items:center;gap:var(--e1)}
.lote-acao input{width:112px;height:var(--h-mini);font-size:12px}
.escolha{margin:0;cursor:pointer}
.escolha span{display:inline-flex;align-items:center;height:var(--h-mini);
  padding:0 var(--e2);border-radius:var(--r-sm);font-size:12px;color:var(--tx2)}
.escolha input{position:absolute;opacity:0;width:0}
.escolha input:checked+span{color:var(--tx1);background:var(--azul-fraco)}
.lote-sep{width:1px;height:20px;background:var(--borda)}
.lote-voc{font-size:12px;color:var(--tx3)}
.lote-voc:hover{color:var(--tx1)}

/* --- gaveta lateral */
/* `hidden` → visível reinicia a animação (display:none re-renderiza), então
   a entrada vale para TODA abertura, não só a primeira. 160ms: presença de
   aplicativo desktop, não teatro. */
.gaveta-fundo{position:fixed;inset:0;z-index:50;background:rgba(4,8,14,.5);
  animation:veu-entra 160ms ease-out}
.gaveta{position:fixed;top:0;right:0;bottom:0;z-index:51;width:min(440px,94vw);
  background:var(--bg-surface);border-left:1px solid var(--borda);
  box-shadow:-12px 0 40px rgba(0,0,0,.4);overflow-y:auto;
  animation:gaveta-entra 160ms ease-out}
@keyframes veu-entra{from{opacity:0}}
@keyframes gaveta-entra{from{opacity:.4;transform:translateX(24px)}}
/* Painéis que aparecem por troca de aba/modo dão um passo curto para
   dentro — troca seca parece recarga; 140ms parece resposta. */
#pref-aparencia,#pref-terminal,#painel-editor,#painel-template,
#painel-consulta,#painel-manual,.aba-corpo,.sino-panel{
  animation:painel-entra 140ms ease-out}
@keyframes painel-entra{from{opacity:0;transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){
  .gaveta,.gaveta-fundo,#pref-aparencia,#pref-terminal,#painel-editor,
  #painel-template,#painel-consulta,#painel-manual,.aba-corpo,.sino-panel,
  .menu-corpo{animation:none}
}
.gaveta-corpo{padding:var(--e5) var(--e5) var(--e8)}
.carregando,.erro-painel{padding:var(--e6) 0;color:var(--tx2);font-size:13px}
.erro-painel{color:var(--alerta)}
/* --- seletor manual (gaveta): busca gruda no topo, barra de ação gruda no
   pé. 152 equipamentos são ~7000px de lista; sem isto o operador rolava
   tudo para achar o botão de confirmar. */
.seletor-topo{position:sticky;top:0;z-index:3;margin:0 calc(-1*var(--e5));
  padding:var(--e2) var(--e5) var(--e3);background:var(--bg-surface)}
.seletor-topo input{width:100%}
.seletor-utils{display:flex;gap:var(--e2);align-items:center;
  margin-bottom:var(--e3)}
.seletor-barra{position:sticky;bottom:0;z-index:3;display:flex;
  align-items:center;gap:var(--e2);
  margin:var(--e3) calc(-1*var(--e5)) calc(-1*var(--e8));
  padding:var(--e3) var(--e5);background:var(--bg-surface);
  border-top:1px solid var(--borda-sutil)}
.seletor-barra .espaco{flex:1}
/* A tabela do seletor divide 400px entre quatro colunas: nada quebra linha,
   o excesso vira reticências — o nome completo está no title da célula. */
.gaveta table td,.gaveta table th{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:130px;padding-left:var(--e2);
  padding-right:var(--e2)}
.gaveta table .col-marca{max-width:36px}
.painel-topo{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e3);margin-bottom:var(--e3)}
.painel-topo .host{display:block;font-size:15px}
.painel-topo .estado{margin-top:var(--e1)}
.sub-ident{display:block;margin-top:2px;font-family:var(--mono);font-size:12px;
  color:var(--tx3)}
.fechar-gaveta{padding:0 var(--e1);background:none;border:none;color:var(--tx3);
  font-size:20px;line-height:1;cursor:pointer}
.fechar-gaveta:hover{color:var(--tx1)}
/* e2, não e1: cinco botões colados leem como um botão só de cinco palavras. */
.painel-acoes{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e5)}
.painel-acoes form{display:inline}
.abas{display:flex;gap:var(--e4);margin-bottom:var(--e4);
  border-bottom:1px solid var(--borda-sutil)}
.aba{position:relative;padding:0 0 var(--e2);background:none;border:none;
  font-family:inherit;font-size:12.5px;color:var(--tx3);cursor:pointer}
.aba:hover{color:var(--tx2)}
.aba.on{color:var(--tx1)}
.aba.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--azul)}
.aba-corpo{display:block}

/* rótulo em cima, valor embaixo — sem uma caixa por informação */
.dados dt{margin-top:var(--e4);font-size:11px;color:var(--tx3)}
.dados dt:first-child{margin-top:0}
.dados dd{margin:2px 0 0;font-size:13px;color:var(--tx1)}
.dados dd.mono{font-family:var(--mono);font-size:12px}
.nota-painel,.vazio-painel{margin:var(--e4) 0 0;font-size:11px;color:var(--tx3);
  line-height:1.6}
.vazio-painel{padding:var(--e6) 0;text-align:center;font-size:12px}
.alerta-txt{color:var(--alerta)}
.mini-link{margin-left:var(--e2);font-size:11px}
.mini-tabela th{padding:var(--e1) var(--e2)}
.mini-tabela td{height:30px;padding:0 var(--e2);font-size:12px}

/* ═══════════════════════════════════════════════════════ 5. telas */
/* --- comparador de configuração */
.seletores{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);
  margin-bottom:var(--e2)}
.lado-sel{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  padding:var(--e2) var(--e3);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md)}
.lado-sel form{display:flex;align-items:center;gap:var(--e2);margin:0}
.lado-sel label{margin:0;font-size:10px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.lado-sel select{width:auto;min-width:210px;height:var(--h-mini);
  padding:0 var(--e2);font-size:12px}
.ler-vivo{margin-left:auto;display:flex;align-items:center;gap:var(--e1)}
.ler-vivo input{width:132px;height:var(--h-mini);font-size:12px}
.nota-vivo{margin:0 0 var(--e4);font-size:11px;color:var(--tx3);line-height:1.6}
.diff-bloco{overflow:hidden}
.diff-cabeca{display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--borda-sutil)}
.diff-cabeca div{padding:var(--e2) var(--e3);font-size:11px;font-weight:500;
  letter-spacing:.5px;text-transform:uppercase;color:var(--tx3)}
.diff-cabeca div:first-child{border-right:1px solid var(--borda-sutil)}
.diff-lados{max-height:calc(100vh - 300px);overflow:auto}
.diff-tabela{width:100%;border-collapse:collapse;table-layout:fixed;
  font-family:var(--mono);font-size:12px;line-height:1.55}
.diff-tabela td{height:auto;padding:1px 0;border:none;vertical-align:top;
  white-space:pre-wrap;word-break:break-word}
.diff-tabela tr:hover{background:rgba(255,255,255,.03)}
.diff-tabela .num{width:52px;padding:1px var(--e2) 1px 0;text-align:right;
  color:var(--tx3);font-size:11px;user-select:none}
.diff-tabela .txt{padding-right:var(--e3);color:var(--tx2)}
.diff-tabela td:nth-child(3){padding-left:var(--e2);
  border-left:1px solid var(--borda-sutil)}
.diff-tabela .nada-aqui{background:repeating-linear-gradient(135deg,
  transparent,transparent 6px,rgba(255,255,255,.02) 6px,rgba(255,255,255,.02) 12px)}
.l-mudou td:nth-child(2){background:var(--erro-fraco);color:var(--erro)}
.l-mudou td:nth-child(4){background:var(--ok-fraco);color:var(--ok)}
.l-del td:nth-child(2){background:var(--erro-fraco);color:var(--erro)}
.l-add td:nth-child(4){background:var(--ok-fraco);color:var(--ok)}
.l-corte td{padding:var(--e1) 0;text-align:center;color:var(--tx3);font-size:11px;
  background:var(--bg-hover);border-top:1px solid var(--borda-sutil);
  border-bottom:1px solid var(--borda-sutil)}
.txt-add{color:var(--ok)}
.txt-del{color:var(--erro)}
.txt-mudou{color:var(--alerta)}
.diff-cfg{margin-top:var(--e4)}
.diff-cfg>summary{padding:var(--e1) 0;font-size:12px;color:var(--azul);
  list-style:none;cursor:pointer}
.diff-cfg>summary::-webkit-details-marker{display:none}
.diff-corpo{margin:var(--e2) 0 0;padding:var(--e2) var(--e3);
  background:var(--bg-app);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md);font-family:var(--mono);font-size:11.5px;
  line-height:1.5;max-height:340px;overflow:auto;white-space:pre;color:var(--tx2)}
.diff-corpo .mais{color:var(--ok)}
.diff-corpo .menos{color:var(--erro)}
.diff-corpo .trecho{color:var(--tx3)}
.diff-corpo .arquivo{color:var(--tx1);font-weight:600}
.diff-commit{max-height:70vh}

/* --- tela de Backups: o hub */
.bloco-rodar{display:flex;flex-direction:column;gap:var(--e3)}
.rodar-linha{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
.rodar-credencial{max-width:520px}
.agendados{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  border-top:1px solid var(--borda-sutil);padding-top:var(--e3)}
.rotulo-mini{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3)}
.corpo-busca{margin-bottom:var(--e3)}
.corpo-busca input{max-width:360px}
.dif-mais{color:var(--ok)}
.dif-menos{color:var(--erro)}

/* Os outros dois degraus de densidade. Ficam FORA do :root principal para o
   tema não precisar repeti-los: densidade é ortogonal à paleta. */
:root[data-densidade=compacta]{
  --fs-secao:12px; --fs-meta:11.5px; --fs-micro:11px; --fs-grupo:10px}
:root[data-densidade=padrao]{
  --fs-secao:13px; --fs-meta:12px; --fs-micro:11.5px; --fs-grupo:10.5px}

/* Movimento reduzido, por preferência do usuário E pela do sistema.
   As duas contam: quem marcou no ISM não deveria precisar marcar de novo no
   sistema operacional, e quem já marcou no sistema não deveria precisar
   descobrir a nossa opção. */
:root[data-movimento=reduzido] *,
:root[data-movimento=reduzido] *::before,
:root[data-movimento=reduzido] *::after{
  transition-duration:1ms !important;animation-duration:1ms !important;
  animation-iteration-count:1 !important;scroll-behavior:auto !important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:1ms !important;
    animation-duration:1ms !important;animation-iteration-count:1 !important;
    scroll-behavior:auto !important}
}

/* --- importação */
.mudanca{margin:2px 0;font-size:12px}
.mudanca .antes{color:var(--tx3);text-decoration:line-through}
.mudanca .seta{margin:0 var(--e1);color:var(--tx3)}
.mudanca .depois{color:var(--ok)}
#txt{min-height:150px}

/* --- visão geral: o centro de operações
   Cada número aqui tem um clique que RESOLVE, não um gráfico que se
   contempla. O ISM não coleta série temporal da frota de propósito, então a
   tela não finge ser um Grafana: ela é o lugar onde a ação acontece. */

/* A barra de estado responde "está tudo bem?" antes de qualquer número —
   e NOMEIA a causa. É por isso que não existe um health score de 0 a 100:
   "87/100" não diz se são dois offline ou um incidente crítico. */
.cabeca-visao{align-items:flex-start}
.cabeca-visao .acoes-cabeca{align-items:center;gap:var(--e2)}
.estado-barra{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  margin:var(--e2) 0 0;font-size:var(--fs-meta);color:var(--tx2)}
.estado-barra b{color:var(--tx1);font-weight:600}
.estado-barra .sep{color:var(--tx3)}
.estado-barra .ponto{width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--tx3)}
.estado-saudavel .ponto{background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-fraco)}
.estado-atencao .ponto{background:var(--alerta);
  box-shadow:0 0 0 3px var(--alerta-fraco)}
.estado-critico .ponto{background:var(--erro);
  box-shadow:0 0 0 3px var(--erro-fraco)}
.estado-critico b{color:var(--erro)}
.carimbo{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Passado um quarto de hora, o carimbo para de parecer dado fresco. */
.carimbo .velho{color:var(--alerta)}

.visao-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--e3);
  margin-bottom:var(--e4)}
.visao-stats-4{grid-template-columns:repeat(4,1fr)}
.visao-stats-5{grid-template-columns:repeat(5,1fr)}
.stat{display:flex;flex-direction:column;gap:2px;padding:var(--e3) var(--e4);
  background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-radius:var(--r-lg);text-decoration:none;
  transition:border-color var(--t-rapido) ease,background var(--t-rapido) ease}
.stat:hover{border-color:var(--borda-forte);background:var(--bg-hover);
  text-decoration:none}
.stat-rotulo{font-size:var(--fs-micro);font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tx3)}
.stat-valor{font-size:22px;font-weight:650;line-height:1.25;color:var(--tx1);
  font-variant-numeric:tabular-nums}
.stat-valor small{font-size:13px;font-weight:400;color:var(--tx3)}
.stat-nota{font-size:var(--fs-micro);color:var(--tx3)}
.stat.atencao .stat-nota,.stat.alerta .stat-nota{color:var(--alerta)}
.stat.erro .stat-nota{color:var(--erro)}
.stat.ok .stat-nota{color:var(--ok)}
.stat.erro{border-color:var(--erro-fraco)}
.stat.alerta{border-color:var(--alerta-fraco)}
/* Sparkline de 7 dias — só aparece quando existe histórico de verdade. */
.stat .spark{width:100%;height:20px;margin-top:2px;color:var(--tx3);
  opacity:.8}
.stat.erro .spark{color:var(--erro)}
.stat.alerta .spark{color:var(--alerta)}

/* Precisa da sua atenção — ordenado pelo que dói mais, nunca pela data. */
.atencao{margin-bottom:var(--e4)}
.atencao>h2{display:flex;align-items:center;gap:var(--e2)}
.atencao>h2 .conta{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;border-radius:9px;
  background:var(--bg-hover);color:var(--tx2);font-size:var(--fs-grupo);
  font-weight:600;font-variant-numeric:tabular-nums}
.atencao-item{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--borda-sutil);
  transition:opacity var(--t-rapido) ease,transform var(--t-rapido) ease}
.atencao-item:last-child{border-bottom:0}
.atencao-item.saindo{opacity:0;transform:translateX(8px)}
.atencao-item .principal{flex:1;min-width:0}
.atencao-item .titulo{font-size:var(--fs-meta);font-weight:600;color:var(--tx1)}
.atencao-item .detalhe{font-size:var(--fs-micro);color:var(--tx2);
  margin-top:1px}
.atencao-item .direita{flex:none;gap:var(--e2)}
.atencao-item .nivel-nome{font-size:var(--fs-grupo);text-transform:uppercase;
  letter-spacing:.05em;color:var(--tx3)}
.atencao-item .sev{width:6px;align-self:stretch;min-height:26px;flex:none;
  border-radius:3px;background:var(--tx3)}
.nivel-critico .sev{background:var(--erro)}
.nivel-critico .nivel-nome{color:var(--erro)}
.nivel-erro .sev{background:var(--erro);opacity:.6}
.nivel-aviso .sev{background:var(--alerta)}
.nivel-aviso .nivel-nome{color:var(--alerta)}
.nivel-info .sev{background:var(--azul)}
.vazio-bom{color:var(--tx2)}

/* Ações rápidas: lista fechada, filtrada por papel no servidor. */
.acoes-rapidas{display:flex;flex-direction:column;padding:var(--e2) 0}
.acao-rapida{display:block;padding:var(--e2) var(--e4);font-size:var(--fs-meta);
  color:var(--tx1);text-decoration:none;
  transition:background var(--t-rapido) ease}
.acao-rapida:hover{background:var(--bg-hover);text-decoration:none}

/* Dia zero. A primeira frase de um ISM recém-instalado era um aviso âmbar
   sobre host key — uma reclamação como boas-vindas (QA FEATURE-012). */
.boas-vindas .passos{margin:var(--e3) 0 0;padding-left:var(--e5);
  display:flex;flex-direction:column;gap:var(--e3);font-size:var(--fs-meta)}
.boas-vindas .passos li{color:var(--tx2)}
.boas-vindas .passos b{color:var(--tx1)}
/* Os três passos são o mesmo gesto — texto, depois a ação — e por isso
   têm o mesmo tratamento. Antes, o passo 1 usava `.em-linha`, que é
   `justify-content:flex-end` feita para célula de tabela: dentro do <li>
   ela virava bloco e jogava os botões contra a borda direita, enquanto os
   passos 2 e 3 tinham o <a> solto, fluindo inline no fim da frase. Três
   passos iguais, três alinhamentos diferentes. */
.boas-vindas .passos .acoes{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--e1);margin-top:var(--e2);margin-bottom:0}
/* A chamada de ação depois da lista precisa de ar: colada no último item,
   ela lê como uma quarta linha da enumeração e não como o convite que é. */
.boas-vindas .passos+.sub{margin-top:var(--e4)}

.visao-grade{display:grid;grid-template-columns:3fr 2fr;gap:var(--e4);
  align-items:start}
.visao-col{min-width:0}
.visao-col .bloco{margin-bottom:var(--e4)}
a.linha{text-decoration:none;color:inherit}
.linha-nav{transition:background var(--t-rapido) ease}
.linha-nav:hover{background:var(--bg-hover);text-decoration:none}
.visao-eventos{padding:var(--e2) var(--e4) var(--e3);display:flex;
  flex-direction:column}
.visao-evento{display:flex;gap:var(--e3);align-items:baseline;
  padding:5px 0;font-size:var(--fs-meta);
  border-top:1px solid var(--borda-sutil)}
.visao-evento:first-child{border-top:0}
.visao-evento>.mono{flex:none;font-size:var(--fs-micro)}
.visao-evento .principal{display:flex;flex-direction:column;gap:1px;
  min-width:0}
.visao-evento .principal>span:first-child{font-size:var(--fs-micro);
  color:var(--tx1)}
.visao-evento .principal .nada{font-size:var(--fs-micro);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bloco-rodape{display:block;padding:var(--e2) var(--e4);text-align:center;
  font-size:var(--fs-meta);color:var(--tx2);
  border-top:1px solid var(--borda-sutil)}
.bloco-rodape:hover{background:var(--bg-hover);color:var(--tx1);
  text-decoration:none}
@media (max-width:1400px){
  .visao-stats{grid-template-columns:repeat(3,1fr)}
  .visao-stats-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .visao-stats,.visao-stats-4,.visao-stats-5{
    grid-template-columns:repeat(2,1fr)}
  .visao-grade{grid-template-columns:1fr}
  .atencao-item{flex-wrap:wrap}
  .atencao-item .direita{width:100%;justify-content:flex-end}
}

/* Tabela que não cabe ROLA, em vez de estourar a página. As tabelas de
   Usuários e Plataformas quebravam "2026-08-27 21:27" em duas linhas a
   375px e dobravam a altura da linha (QA UI-006). */
.tabela-rolante{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela-rolante>table{min-width:560px}
.nowrap,td.nowrap{white-space:nowrap}

/* Lista de checkboxes com rótulo — usada em Preferências e Notificações. */
.opcao-check{display:flex;align-items:flex-start;gap:var(--e2);
  padding:var(--e2) 0;font-size:var(--fs-meta);color:var(--tx1);
  cursor:pointer}
.opcao-check input{margin-top:2px;flex:none}
.opcao-check .nada{display:block;font-size:var(--fs-micro)}

/* Faixa de manutenção: presente em toda tela enquanto a janela dura. */
.faixa-manutencao{position:static;display:flex;
  align-items:center;gap:var(--e2);justify-content:center;
  padding:6px var(--e4);font-size:var(--fs-micro);
  background:var(--alerta-fraco);color:var(--alerta);
  border-bottom:1px solid var(--alerta)}
.faixa-manutencao b{font-weight:600}
.faixa-manutencao a{color:inherit;text-decoration:underline}

/* --- login */
/* A primeira tela que alguém vê. O brilho no topo é sutil de propósito:
   identidade sem parecer landing page. */
.entrada{display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:var(--e6);
  background:radial-gradient(90% 55% at 50% -10%,
    rgba(77,155,255,.07),transparent 62%) var(--bg-app)}
.caixa{width:100%;max-width:384px;padding:var(--e8) var(--e8) var(--e6);
  background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-radius:16px;box-shadow:var(--sombra-overlay)}
.marca-login{display:flex;flex-direction:column;align-items:center;gap:var(--e3);
  text-align:center;margin-bottom:var(--e6)}
.marca-login .sb-logo{width:44px;height:44px;border-radius:12px}
.marca-login .sb-logo svg{width:22px;height:22px}
.marca-login div b{display:block;font-size:19px;font-weight:650;
  letter-spacing:-.2px;color:var(--tx1)}
.marca-login div span{display:block;margin-top:1px;font-size:12px;
  color:var(--tx3)}
.caixa .botao{width:100%;margin-top:var(--e5)}
.rodape-login{margin-top:var(--e5);font-size:11px;color:var(--tx3);
  text-align:center;line-height:1.6}
.rodape-login a{color:var(--tx3)}

/* --- MFA: desafio, cadastro e códigos de recuperação */
.caixa-larga{max-width:460px}
.mfa-titulo{font-size:16px;font-weight:650;color:var(--tx1);
  margin:0 0 var(--e2);text-align:center}
.mfa-qr{display:flex;justify-content:center;margin:var(--e4) auto}
.mfa-qr svg{width:196px;height:196px;padding:10px;background:#fff;
  color:#000;border-radius:10px}
.mfa-segredo{margin:var(--e3) 0 var(--e5);text-align:center}
.mfa-segredo span{display:block;font-size:11px;color:var(--tx3);
  margin-bottom:4px}
.mfa-segredo code{font-size:12.5px;letter-spacing:.4px;user-select:all;
  overflow-wrap:anywhere}
.mfa-codigos{list-style:none;margin:var(--e4) 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--e2)}
.mfa-codigos code{display:block;text-align:center;padding:var(--e2);
  background:var(--bg-app);border:1px solid var(--borda-sutil);
  border-radius:8px;font-size:13px;user-select:all}

/* --- janela de sessão */
body.janela{background:var(--bg-app)}
body.janela.preta{background:#000}
.abrir-sessao{max-width:440px;margin:0 auto;padding:var(--e6) var(--e5) var(--e8)}
.abrir-sessao .aviso{margin-bottom:var(--e4)}
.abrir-sessao .acoes{margin:var(--e4) 0 0}
.abrir-sessao .botao{flex:1}
.cred-caixa{padding:var(--e4) var(--e5);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-left:2px solid var(--azul);
  border-radius:var(--r-lg)}
.cred-titulo{margin-bottom:var(--e3);font-size:10px;font-weight:600;
  letter-spacing:.9px;text-transform:uppercase;color:var(--tx3)}
.cred-caixa .campo{margin-bottom:var(--e3)}
.cred-caixa label{margin:0 0 var(--e1)}
.cred-caixa input[type=password]{font-family:var(--mono);letter-spacing:2px}
.cred-nota{margin:var(--e3) 0 0;font-size:11px;color:var(--tx3);line-height:1.6}
.cred-guardada{display:flex;align-items:flex-start;gap:var(--e3);
  padding:var(--e3) var(--e4);background:var(--ok-fraco);
  border:1px solid rgba(62,207,142,.25);border-radius:var(--r-lg)}
.cred-guardada .ponto{margin-top:6px;background:var(--ok)}
.cred-guardada b{display:block;font-family:var(--mono);font-size:13px}
.cred-guardada span{display:block;font-size:11px;color:var(--tx2)}
.cred-espera{margin:var(--e3) 0 0;font-size:12px;color:var(--azul)}
.cred-aviso{margin:var(--e5) 0 0;padding-top:var(--e3);font-size:11px;
  color:var(--tx3);line-height:1.6;border-top:1px solid var(--borda-sutil)}
.cred-aviso code{padding:1px var(--e1);background:var(--bg-hover);
  border-radius:4px}
.cred-esquecer{margin-top:var(--e3)}

/* --- terminal */
.term-topo{display:flex;align-items:center;gap:var(--e3);height:var(--h-topo);
  padding:0 var(--e4);background:var(--bg-surface);color:var(--tx1);
  font-size:13px;border-bottom:1px solid var(--borda-sutil)}
.term-topo .host{font-weight:600}
.term-topo .meta{flex:1;color:var(--tx2);font-size:12px}
.gravando{padding:2px var(--e3);background:var(--erro-fraco);color:var(--erro);
  border-radius:var(--r-pill);font-size:11px}
.term-caixa{height:calc(100vh - 92px);padding:var(--e2);background:#000;
  position:relative;overflow:hidden}
.term-caixa .xterm{height:100%}
/* O morador do terminal. Camada decorativa: nunca captura clique, nunca
   cobre texto que importe (anda colado na borda de baixo), e o teclado o
   dispensa. Duração/direção vêm do JS via custom properties. */
#tux{position:absolute;bottom:2px;left:0;z-index:3;pointer-events:none;
  will-change:transform;opacity:.92}
#tux.andando{animation:tux-atravessa var(--tux-dur,18s) linear forwards}
#tux.andando svg{animation:tux-gingado .5s ease-in-out infinite}
#tux.invertido svg{transform:scaleX(-1)}
#tux .tux-pe-a{animation:tux-passo .5s ease-in-out infinite}
#tux .tux-pe-b{animation:tux-passo .5s ease-in-out infinite reverse}
@keyframes tux-atravessa{
  from{transform:translateX(var(--tux-de,-40px))}
  to{transform:translateX(var(--tux-ate,100vw))}}
@keyframes tux-gingado{
  0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes tux-passo{
  0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
:root[data-movimento=reduzido] #tux{display:none}
@media (prefers-reduced-motion:reduce){#tux{display:none}}
/* O pinguim do 404: estático, olhando para baixo — procurou, não achou. */
.erro-tux{display:block;margin:0 auto var(--e3);opacity:.85}
/* Execução concluída sem falha: um pulso único no selo. Termina sozinho. */
.selo-celebra{animation:selo-pulso .55s ease-out 1}
@keyframes selo-pulso{
  0%{box-shadow:0 0 0 0 rgba(62,207,142,.45)}
  100%{box-shadow:0 0 0 10px rgba(62,207,142,0)}}
.term-rodape{padding:var(--e1) var(--e4);background:var(--bg-surface);
  color:var(--tx3);font-size:11px;border-top:1px solid var(--borda-sutil)}
.term-aviso{padding:var(--e2) var(--e4);font-size:12px}
.term-aviso.caiu{background:var(--erro-fraco);color:var(--erro)}

/* --- usuários */
.senha-uma-vez{margin-bottom:var(--e5);padding:var(--e4) var(--e5);
  background:var(--bg-surface);border:1px solid var(--azul-borda);
  border-left:2px solid var(--azul);border-radius:var(--r-lg)}
.senha-uma-vez>b{display:block;font-size:11px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--tx2)}
.senha{display:inline-block;margin:var(--e3) 0 var(--e2);
  padding:var(--e2) var(--e4);background:var(--bg-campo);
  border:1px solid var(--borda-forte);border-radius:var(--r-md);
  font-family:var(--mono);font-size:19px;letter-spacing:1.5px;color:var(--tx1);
  user-select:all}
.senha-uma-vez p{margin:0;max-width:62ch;font-size:12px;color:var(--tx2)}
.senha-uma-vez p b{color:var(--tx1)}
.em-linha{display:flex;align-items:center;justify-content:flex-end;gap:var(--e1)}
.em-linha input,.em-linha select{width:150px;height:var(--h-mini);font-size:12px}
td .em-linha select{min-width:96px}
td .em-linha form{display:contents}
.aprender-lote{margin-top:var(--e4);padding-top:var(--e3);
  border-top:1px solid var(--borda-sutil)}
.aprender-lote label{margin-top:0}

/* --- coletas e agendamentos (telas ainda não migradas) */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--e3);margin-bottom:var(--e5)}
.cartao{padding:var(--e3) var(--e4);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-lg)}
.cartao .rotulo{font-size:12px;color:var(--tx2)}
.cartao .valor{font-size:24px;font-weight:650;line-height:1.25;color:var(--tx1);
  font-variant-numeric:tabular-nums}
.cartao .valor small{white-space:nowrap}
.cartao .valor small{font-size:14px;font-weight:400;color:var(--tx3)}
/* Cartão que também é filtro (tela de Backups). O número é a pergunta e o
   clique é a resposta: "sem nenhum: 12" só serve se levar aos doze. */
a.cartao.filtravel{text-decoration:none;display:block;
  transition:border-color var(--t-rapido),background var(--t-rapido)}
a.cartao.filtravel:hover{border-color:var(--borda);background:var(--bg-hover)}
a.cartao.filtravel.ativo{border-color:var(--azul)}
a.cartao.filtravel.grave .valor{color:var(--alerta)}
.acoes-linha{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.acoes-linha .botao{padding:2px 10px;font-size:12px}
/* ...MENOS quando a coluna de ações é uma célula de tabela.
   `display:flex` num <td> tira a célula do algoritmo de altura da linha: os
   botões quebram, o conteúdo cresce, e a <tr> continua na altura de uma
   linha só. Medido em 800px de largura, com três ações: o terceiro botão
   terminava 34px ABAIXO do fundo da própria célula, por cima da linha
   seguinte. Só aparecia em janela estreita, que é onde ninguém testa.
   Como `table-cell`, o conteúdo inline quebra e a linha cresce junto. */
td.acoes-linha{display:table-cell;text-align:right;line-height:2.2;
  white-space:normal}
td.acoes-linha>*{vertical-align:middle}
td.acoes-linha>*+*{margin-left:6px}
/* Notas (Cowork). Texto de gente, então respeita quebra de linha e não
   colapsa espaço: quem escreve uma lista de passos espera vê-la como lista. */
.notas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--e3)}
.nota{padding:var(--e3);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-lg)}
.nota.fixada{border-color:var(--alerta-borda);background:var(--alerta-fraco)}
.nota-cab{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;
  margin-bottom:6px}
.nota-cab .ajuda{margin:0;margin-left:auto}
.nota-texto{white-space:pre-wrap;word-break:break-word;color:var(--tx1);
  font-size:13px;line-height:1.55}
.nota-acoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  margin-top:var(--e2)}
.nota-acoes form{display:inline}
.nota-acoes .botao{padding:2px 10px;font-size:12px}
.nota-editar summary{display:inline-block;cursor:pointer;list-style:none}
.nota-editar textarea{width:100%;margin:var(--e2) 0}
.nota-nova{display:flex;flex-direction:column;gap:var(--e2);
  margin-top:var(--e4);align-items:flex-start}
.nota-nova textarea{width:100%}
.filtros-linha{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;
  margin-bottom:var(--e4)}
/* Sem isto os campos herdam width:100% do estilo base e cada um cai numa
   linha — três filtros viram três linhas, e a barra deixa de parecer barra. */
.filtros-linha input,.filtros-linha select{width:auto;min-width:180px;flex:0 1 auto}
.filtros-linha input[name="q"]{flex:1 1 280px}
.botao.perigo{color:var(--erro)}
/* Filtro clicável (estilo Panorama): o valor da célula é o filtro.
   Discreto até o hover de propósito — a tabela é para LER, e sublinhar 144
   linhas transformaria a leitura num campo de links. A affordance aparece
   quando o cursor chega, e o `title` diz o que o clique vai fazer. */
a.filtro-celula{color:inherit;text-decoration:none;border-bottom:1px dashed
  transparent;transition:border-color .12s,color .12s;
  /* Sem isto "filial-rj" quebra no hífen e a célula vira duas linhas — o
     valor deixa de ser legível como um valor só. */
  white-space:nowrap}
a.filtro-celula:hover{color:var(--azul);border-bottom-color:var(--azul)}
a.filtro-celula.on{color:var(--azul);border-bottom-color:var(--azul)}
a.filtro-celula.on::after{content:"×";margin-left:4px;opacity:.7;font-size:11px}
.job-acoes{display:flex;align-items:center;gap:var(--e1)}
.job-acoes form{display:inline}
.progresso,.barra{height:4px;margin:var(--e3) 0;background:var(--bg-hover);
  border-radius:var(--r-pill);overflow:hidden}
.progresso i,.barra i{display:block;width:0;height:100%;background:var(--azul);
  transition:width .3s}
.contagem{display:flex;gap:var(--e5);margin-bottom:var(--e2);font-size:13px}
.contagem b{font-weight:600}
.saida,.rolo{padding:var(--e3);background:var(--bg-app);color:#C9D4E4;
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  font-family:var(--mono);font-size:12px;overflow:auto;white-space:pre-wrap;
  word-break:break-word}
.saida{height:420px}
.rolo{height:260px;margin-top:var(--e3)}
.saida .ok{color:var(--ok)}
.saida .er{color:var(--erro)}
.saida .av{color:var(--alerta)}
.saida .dim{color:var(--tx3)}
.exec-hosts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--e2)}
.exec-host{padding:var(--e2) var(--e3);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);font-size:12px}
.exec-host .nome{font-family:var(--mono);font-size:13px;font-weight:600}
.exec-host .fase{color:var(--tx2)}
.exec-host.ok{border-left:2px solid var(--ok)}
.exec-host.erro{border-left:2px solid var(--erro)}
.exec-host.parcial{border-left:2px solid var(--alerta)}
.exec-host.correndo{border-left:2px solid var(--azul)}
.opcoes{display:flex;flex-wrap:wrap;gap:var(--e1);margin-bottom:var(--e2)}
.opcoes label{display:inline-flex;align-items:center;height:var(--h-controle);
  margin:0;padding:0 var(--e4);background:var(--bg-campo);
  border:1px solid var(--borda);border-radius:var(--r-md);font-size:13px;
  color:var(--tx2);cursor:pointer;
  transition:border-color var(--t-rapido) ease,color var(--t-rapido) ease}
/* A opção NÃO escolhida também é clicável, e precisa parecer: "Sequencial"
   apagado ao lado de "Paralelo" aceso lia como desabilitado. */
.opcoes label:hover{border-color:var(--borda-forte);color:var(--tx1)}
.opcoes input{position:absolute;opacity:0;width:0}
.opcoes input:checked+span{color:var(--tx1);font-weight:600}
.opcoes label:has(input:checked){background:var(--azul-fraco);
  border-color:var(--azul-borda)}
.grade-tags{display:flex;flex-wrap:wrap;gap:var(--e1);max-height:190px;
  padding:var(--e3);overflow:auto;background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md)}
.grade-tags label{display:inline-flex;align-items:center;height:22px;margin:0;
  padding:0 var(--e3);border:1px solid var(--borda-sutil);
  border-radius:var(--r-sm);font-size:12px;color:var(--tx2);cursor:pointer}
.grade-tags label:has(input:checked){background:var(--azul-fraco);
  border-color:var(--azul-borda);color:var(--tx1)}
.grade-tags input{position:absolute;opacity:0;width:0}
.previa{margin-top:var(--e2);padding:var(--e2) var(--e3);background:var(--bg-hover);
  border-radius:var(--r-md);font-family:var(--mono);font-size:12px;color:var(--tx2)}
.previa b{color:var(--azul);font-weight:500}
.somente-run,.somente-backup{margin:0}
.pulsando{animation:pulso 1.4s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.45}}

/* --- detalhe de equipamento e formulários */
.par{display:grid;grid-template-columns:150px 1fr;gap:2px var(--e3);font-size:13px}
.par dt{padding:var(--e1) 0;font-size:12px;color:var(--tx2)}
.par dd{margin:0;padding:var(--e1) 0}
.fp{font-family:var(--mono);font-size:11px;color:var(--tx2);word-break:break-all}
.diff{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);margin:var(--e3) 0}
.diff>div{padding:var(--e3);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md)}
.diff .rot{margin-bottom:var(--e1);font-size:11px;color:var(--tx3)}
.diff .antiga{background:var(--bg-hover)}
.diff .nova{background:var(--erro-fraco);border-color:rgba(255,123,114,.3)}
.busca{display:flex;gap:var(--e2);margin-bottom:var(--e4)}
.busca input{flex:1;font-family:var(--mono);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:var(--e1);margin-bottom:var(--e4)}
.chips.vocabulario{margin:var(--e1) 0 0;max-height:112px;overflow-y:auto}
.vocabulario .chip{border:1px solid var(--borda-sutil);font-family:inherit;
  cursor:pointer}
#tags-novas{color:var(--alerta)}
.rodape-nota{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e3);
  font-size:11px;color:var(--tx3)}
.pilhas{display:flex;flex-wrap:wrap;gap:var(--e1);margin:0 0 var(--e3)}
.pilha{display:inline-flex;align-items:center;gap:var(--e2);height:var(--h-mini);
  padding:0 var(--e1) 0 var(--e3);background:var(--azul-fraco);
  border:1px solid var(--azul-borda);border-radius:var(--r-md);color:var(--tx1);
  font-size:12px}
.pilha .cat{font-size:11px;color:var(--tx3)}
.pilha .x{display:grid;place-items:center;width:18px;height:18px;
  border-radius:var(--r-sm);color:var(--tx2);font-size:13px;line-height:1}
.pilha .x:hover{background:rgba(255,255,255,.08);color:var(--tx1);
  text-decoration:none}

/* ═════════════════════════════════════════════════════ 6. estados */
/* Esqueleto na tabela em vez de spinner no meio da página: o layout não pula
   quando o conteúdo chega. */
.esqueleto{position:relative;overflow:hidden;background:var(--bg-hover);
  border-radius:var(--r-sm);color:transparent!important}
.esqueleto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  animation:varre 1.2s ease-in-out infinite}
@keyframes varre{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* Esqueleto no formato da galeria de temas: mesmos trilhos da .temas-grade,
   blocos do tamanho de um cartão — a tela não salta quando os 68 chegam. */
#temas-carregando{display:grid;gap:var(--e3);
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.tema-esq{height:92px}
.girando{display:inline-block;width:11px;height:11px;vertical-align:-1px;
  border:2px solid var(--borda-forte);border-top-color:var(--azul);
  border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ═════════════════════════════════════════════════ responsivo */
/* ------------------------------------------------ builder de execução */
.builder{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--e8);align-items:start;margin-bottom:var(--e8)}
.builder-form{min-width:0}
/* Este div guarda só <input type=hidden> — mas ele PRÓPRIO gera caixa, e como
   filho direto do grid consumia a primeira célula, jogando o formulário para
   a coluna do resumo. Some do fluxo; os campos continuam sendo enviados. */
#hosts-escolhidos{display:none}
/* Seções separadas por espaço e um fio, não por caixa dentro de caixa. */
/* e4 e não e5: com seis seções, os 8px a mais de cada lado somavam quase
   100px de rolagem para não mostrar nada. O respiro continua; o desperdício,
   não. */
.secao{padding:var(--e4) 0;border-top:1px solid var(--borda-sutil)}
.secao:first-child{padding-top:0;border-top:none}
.secao>h2{margin-bottom:var(--e2)}
.secao .duas{margin-top:var(--e3)}
.secao .opcoes{margin-bottom:0}

.editor-cmd{min-height:132px;font-family:var(--mono);font-size:12.5px;
  line-height:1.7;background:var(--bg-app)}

/* ─────────────────────────────────────────────── editor de comandos
   Duas camadas empilhadas: o <pre> pinta, o <textarea> recebe o teclado.
   TODA métrica que afeta a posição de um caractere é declarada UMA vez,
   nas variáveis abaixo, e usada pelas duas — fonte, tamanho, entrelinha,
   espaçamento e quebra. Qualquer divergência entre as camadas faz a cor
   "andar" em relação ao cursor enquanto se digita, e é o tipo de defeito
   que só aparece na linha 40 de um script. */
.ed{--ed-fonte:var(--mono);--ed-tam:12.5px;--ed-linha:1.7;
  --ed-pad:var(--e3);--ed-gutter:44px;
  border:1px solid var(--borda);border-radius:var(--r-md);
  background:var(--bg-app);overflow:hidden}
.ed:focus-within{border-color:var(--azul-borda)}
.ed-barra{display:flex;align-items:center;gap:var(--e1);
  padding:var(--e1) var(--e2);border-bottom:1px solid var(--borda-sutil);
  background:var(--bg-surface)}
.ed-espaco{flex:1}
.ed-btn{height:var(--h-mini);padding:0 var(--e2);border:1px solid transparent;
  border-radius:var(--r-sm);background:none;color:var(--tx2);
  font-family:inherit;font-size:12px;cursor:pointer;white-space:nowrap;
  list-style:none}
.ed-btn::-webkit-details-marker{display:none}
.ed-btn:hover{background:var(--bg-hover);color:var(--tx1)}
.ed-btn.feito{color:var(--ok)}
.ed-menu{position:relative}
.ed-menu .menu-corpo{max-height:340px;overflow:auto}
.ed-menu .menu-corpo button{display:flex;flex-direction:column;gap:1px;
  width:100%;padding:var(--e2) var(--e3);border:0;background:none;
  text-align:left;cursor:pointer;font-family:inherit}
.ed-menu .menu-corpo button:hover{background:var(--bg-hover)}
.ed-menu .menu-corpo b{font-family:var(--mono);font-size:12px;color:var(--tx1)}
.ed-menu .menu-corpo span{font-size:11.5px;color:var(--tx3)}

.ed-corpo{position:relative;display:flex;max-height:340px}
.ed.grande .ed-corpo{max-height:70vh}
.ed-linhas{flex:0 0 var(--ed-gutter);padding:var(--ed-pad) 0;overflow:hidden;
  border-right:1px solid var(--borda-sutil);background:var(--bg-campo);
  font-family:var(--ed-fonte);font-size:var(--ed-tam);
  line-height:var(--ed-linha);color:var(--tx3);text-align:right;
  user-select:none}
.ed-linhas span{display:block;padding-right:var(--e2)}
.ed-linhas span.erro{color:var(--erro);font-weight:600}

.ed-campo{position:relative;flex:1;min-width:0}
/* As duas camadas: mesma caixa, mesma métrica, mesma quebra de linha. */
.ed-realce,.ed-campo textarea{
  margin:0;padding:var(--ed-pad);border:0;
  font-family:var(--ed-fonte);font-size:var(--ed-tam);
  line-height:var(--ed-linha);letter-spacing:normal;tab-size:2;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}
.ed-realce{position:absolute;inset:0;overflow:auto;pointer-events:none;
  color:var(--tx1);background:none}
.ed-campo textarea{position:relative;display:block;width:100%;height:100%;
  min-height:150px;max-height:inherit;resize:none;overflow:auto;
  background:transparent;color:transparent;caret-color:var(--azul-claro);
  -webkit-text-fill-color:transparent}
.ed-campo textarea::selection{background:var(--azul-medio);
  -webkit-text-fill-color:transparent}
.ed-campo textarea:focus{outline:none;box-shadow:none}
/* O placeholder precisa ser visível — ele é a única camada que o <pre> não
   desenha, porque não existe texto para pintar. */
.ed-campo textarea::placeholder{color:var(--tx3);
  -webkit-text-fill-color:var(--tx3)}
.ed.simples .ed-corpo{max-height:180px}
.ed.simples .ed-campo textarea{min-height:80px}

/* cores da sintaxe — três, e não uma paleta inteira: o que precisa saltar
   é variável, bloco de lógica e comando especial. Colorir mais faria um
   script de rede parecer código-fonte, e ele não é. */
.ed-var{color:var(--azul-claro)}
.ed-var-falta{color:var(--alerta);text-decoration:underline wavy var(--alerta);
  text-underline-offset:3px}
.ed-bloco{color:#C792EA}
.ed-tok{color:var(--ok)}
.ed-com{color:var(--tx3);font-style:italic}
.ed-aberto{color:var(--erro);background:var(--erro-fraco)}
.ed-realce .ed-linha-erro{display:inline-block;width:100%;
  background:var(--erro-fraco)}

.ed-busca{display:flex;align-items:center;gap:var(--e1);
  padding:var(--e1) var(--e2);border-bottom:1px solid var(--borda-sutil);
  background:var(--bg-surface)}
.ed-busca input{height:var(--h-mini);flex:1;font-size:12px}
.ed-busca button{height:var(--h-mini);min-width:28px;border:0;background:none;
  color:var(--tx2);cursor:pointer;border-radius:var(--r-sm)}
.ed-busca button:hover{background:var(--bg-hover);color:var(--tx1)}
.ed-busca-n{font-size:11.5px;color:var(--tx3);white-space:nowrap}

.ed-rodape{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);padding:var(--e1) var(--e3);
  border-top:1px solid var(--borda-sutil);background:var(--bg-surface);
  font-size:11.5px;color:var(--tx3)}
.ed-conta{color:var(--tx2)}
.ed-atalho{opacity:.7}

/* ───────────────────────────────────────────────────── variáveis */
.vars-grid{display:grid;gap:var(--e2)}
.var-linha{display:grid;grid-template-columns:minmax(120px,180px) 1fr auto;
  align-items:center;gap:var(--e2)}
.var-nome{font-size:12px;color:var(--azul-claro);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.var-linha.falta .var-nome{color:var(--alerta)}
.var-linha.falta input{border-color:var(--alerta-borda)}
.vars-rodape{display:flex;align-items:center;gap:var(--e3);
  margin-top:var(--e3);flex-wrap:wrap}
.vars-rodape .ajuda{margin:0}
.vars-usadas{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e2)}
.var-chip{display:inline-flex;align-items:center;gap:var(--e1);
  padding:2px var(--e2);border-radius:var(--r-pill);
  background:var(--bg-hover);font-family:var(--mono);font-size:11px;
  color:var(--tx2)}
.var-chip b{color:var(--azul-claro);font-weight:500}

.gaveta.larga{width:min(1100px,96vw)}
.vars-acoes{display:flex;align-items:center;gap:var(--e2);
  margin:var(--e3) 0;flex-wrap:wrap}
.vars-acoes .ajuda{margin:0;flex:1;min-width:200px}
.vars-aviso{padding:var(--e2) var(--e3);margin-bottom:var(--e3);
  border-radius:var(--r-sm);background:var(--bg-hover);font-size:12.5px;
  color:var(--tx2)}
.vars-aviso.erro{background:var(--alerta-fraco);color:var(--tx1)}
.tabela-vars{overflow:auto;max-height:60vh;border:1px solid var(--borda-sutil);
  border-radius:var(--r-md)}
.tabela-vars table{width:100%;border-collapse:collapse}
.tabela-vars th{position:sticky;top:0;z-index:1;padding:var(--e2) var(--e3);
  background:var(--bg-surface);border-bottom:1px solid var(--borda);
  text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--tx3)}
.tabela-vars td{padding:0;border-bottom:1px solid var(--borda-sutil)}
.tabela-vars td:first-child{padding:var(--e2) var(--e3);white-space:nowrap}
.tabela-vars td:first-child .nada{display:block;font-size:11px}
.tabela-vars input{height:34px;border:0;border-radius:0;background:none;
  font-family:var(--mono);font-size:12px}
.tabela-vars input:focus{background:var(--bg-ativo);outline:1px solid var(--azul-borda);
  outline-offset:-1px}
.col-acao{margin-left:var(--e2);border:0;background:none;color:var(--azul);
  font-family:inherit;font-size:10.5px;text-transform:none;cursor:pointer;
  letter-spacing:0}
.col-acao:hover{text-decoration:underline}

/* ──────────────────────────────────────────────── prévia e voo */
.previa-barra{display:flex;align-items:center;gap:var(--e3);
  margin-bottom:var(--e2)}
.previa-barra select{max-width:280px}
.previa-texto{margin:0;padding:var(--e3);max-height:300px;overflow:auto;
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  background:var(--bg-app);font-family:var(--mono);font-size:12.5px;
  line-height:1.7;color:var(--tx1);white-space:pre-wrap;word-break:break-word}
.previa-erro{color:var(--alerta);font-family:var(--sans)}
.previa[aria-busy="true"]{opacity:.6}
.voo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e1) var(--e3);
  padding:var(--e2) var(--e3);margin-bottom:var(--e3);
  border-radius:var(--r-md);background:var(--ok-fraco);font-size:12.5px;
  color:var(--tx2)}
.voo.com-problema{background:var(--alerta-fraco)}
.voo b{color:var(--tx1)}
.voo b.ruim{color:var(--alerta)}
.voo-aviso{flex-basis:100%;font-size:11.5px;color:var(--tx3)}

/* ─────────────────────────────────────────── opções avançadas */
details.avancado{padding:var(--e4) 0;border-top:1px solid var(--borda-sutil)}
details.avancado>summary{display:flex;align-items:baseline;gap:var(--e3);
  cursor:pointer;list-style:none}
details.avancado>summary::-webkit-details-marker{display:none}
details.avancado>summary::before{content:"▸";color:var(--tx3);
  transition:transform var(--t-rapido)}
details.avancado[open]>summary::before{transform:rotate(90deg)}
details.avancado>summary h2{display:inline;margin:0}
details.avancado>summary .nada{font-size:11.5px}
details.avancado>*{margin-top:var(--e3)}
details.avancado .campo{margin-bottom:var(--e3)}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--e4)}
.opcoes-linha{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e2)}
label.caixa{display:flex;align-items:center;gap:var(--e2);font-size:12.5px;
  color:var(--tx2);cursor:pointer}
.abas-plataforma{margin-top:var(--e3)}
.ajuda-topo{margin-bottom:var(--e3)}
.aviso.mini{padding:var(--e2) var(--e3);margin-top:var(--e2);font-size:12.5px}
.vazio-mini{padding:var(--e5);text-align:center;color:var(--tx3);
  border:1px dashed var(--borda);border-radius:var(--r-md)}
.vazio-mini p{margin:0 0 var(--e3)}

/* ───────────────────────────── interação ao vivo (itens 41 e 49)
   O bloco tem o peso de um alerta porque ele PARA aquele equipamento: é a
   única coisa na tela que exige uma ação para a execução continuar. */
.interacao{padding:var(--e4);margin-bottom:var(--e3);
  border:1px solid var(--alerta-borda);border-left:3px solid var(--alerta);
  border-radius:var(--r-md);background:var(--alerta-fraco)}
.interacao.perigosa{border-color:var(--erro-borda);border-left-color:var(--erro);
  background:var(--erro-fraco)}
.interacao h2{margin:0 0 var(--e2);font-size:14px}
.interacao-contexto{margin:0 0 var(--e2);padding:var(--e2) var(--e3);
  max-height:120px;overflow:auto;border-radius:var(--r-sm);
  background:var(--bg-app);font-family:var(--mono);font-size:11.5px;
  color:var(--tx3);white-space:pre-wrap}
.interacao-pergunta{margin:0 0 var(--e3);font-size:13px;color:var(--tx1)}
.interacao-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2)}
.interacao-texto{flex:1;min-width:180px;height:var(--h-controle);
  font-family:var(--mono);font-size:12.5px}
.col-acao-alvo{width:36px;text-align:right}

/* relatório final (item 92) */
.cartoes-fim{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--e3);margin-bottom:var(--e4)}
.cartao-fim{padding:var(--e4);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md);background:var(--bg-surface)}
.cartao-fim.alerta{border-color:var(--alerta-borda)}
.cartao-fim h3{margin:0 0 var(--e2);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--tx3)}
.lista-fim{margin:0;padding:0;list-style:none;font-size:12.5px}
.lista-fim li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2);
  padding:var(--e2) 0;border-top:1px solid var(--borda-sutil)}
.lista-fim li:first-child{border-top:0}
.lista-fim b{color:var(--ok);font-weight:500}
.menu-form{width:320px;padding:var(--e3)}
.menu-form .campo{margin-bottom:var(--e2)}
.menu-form .botao{width:100%}

@media (max-width:900px){
  .tres{grid-template-columns:1fr}
  .var-linha{grid-template-columns:1fr;gap:var(--e1)}
  .ed{--ed-gutter:32px}
  .interacao-acoes{flex-direction:column;align-items:stretch}
}
.alvo-resultado{display:flex;align-items:center;gap:var(--e2);
  margin-top:var(--e3);font-size:12.5px;color:var(--tx2)}
.manual-barra{display:flex;align-items:center;gap:var(--e3)}
#manual-lista{margin-top:var(--e3)}
.busca-seletor{margin-bottom:var(--e3)}

/* O resumo acompanha a rolagem: quem configura precisa ver o impacto sem
   subir e descer a página. */
.resumo{position:sticky;top:calc(var(--h-topo) + var(--e5))}
.resumo-fixo{padding:var(--e4);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-lg)}
.resumo h2{margin-bottom:var(--e3)}
.resumo .dados dd{font-size:13px}
.resumo-plat{margin-top:var(--e1)!important}
.plat-linha{display:flex;justify-content:space-between;font-size:12px;
  color:var(--tx2);padding:1px 0}
.plat-linha b{color:var(--tx1);font-weight:500;font-variant-numeric:tabular-nums}
.resumo .ajuda{margin-top:var(--e2)}

@media (max-width:1100px){
  .builder{grid-template-columns:1fr}
  .resumo{position:static}
}

/* ---------------------------------------------- comandos e política */
.editor-caixa{margin-top:var(--e2)}
#abas-comandos{margin-bottom:0}
.politica{margin-top:var(--e3)}
.pol-cabeca{display:flex;align-items:center;gap:var(--e2);font-size:12.5px;
  font-weight:500;color:var(--tx2);margin-bottom:var(--e2)}
.pol-cabeca.ok{color:var(--ok)}
.pol-cabeca.alerta{color:var(--alerta)}
.pol-cabeca.erro{color:var(--erro)}
.pol-linha{display:flex;align-items:center;gap:var(--e2);padding:2px 0;
  font-size:12px;color:var(--tx2)}
.pol-linha.ok{color:var(--tx3)}
.pol-linha.alerta{color:var(--alerta)}
.pol-linha.erro{color:var(--erro)}
.pol-linha .mono{color:inherit}
.pol-verd{color:var(--tx3);font-size:11px}
#aviso-plataforma .aviso{margin-bottom:0}

/* ------------------------------------------------- filtros rápidos */
.filtros-rapidos{margin-top:var(--e3)}
.filtros-rapidos>summary{display:inline-flex;align-items:center;gap:var(--e2);
  height:var(--h-mini);padding:0 var(--e2);border-radius:var(--r-sm);
  font-size:12px;color:var(--tx2);cursor:pointer;list-style:none}
.filtros-rapidos>summary::-webkit-details-marker{display:none}
.filtros-rapidos>summary:hover{background:var(--bg-hover);color:var(--tx1)}
.filtros-rapidos[open]>summary{color:var(--tx1)}
.grupo-rapido{margin-top:var(--e3)}
.grupo-rapido>h3{margin:0 0 var(--e2);font-size:10px;font-weight:600;
  letter-spacing:.9px;text-transform:uppercase;color:var(--tx3)}
.grupo-rapido .chips{margin-bottom:0;max-height:96px;overflow-y:auto}
.chip-alvo{cursor:pointer}
.chip-alvo .n{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.chip-alvo.on .n{color:var(--tx2)}

/* ------------------------------------------------------- revisão */
/* A revisão usa a mesma grade do builder: conteúdo à esquerda, resumo fixo à
   direita. Antes ela era uma coluna de 820px no meio de uma tela larga, com
   40% de vazio ao lado — e o resumo, que é o que responde "o que vai
   acontecer", não existia. */
.revisao-tela{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--e6);align-items:start}
.revisao{min-width:0}

/* Rodapé grudado embaixo: a decisão de executar não pode depender de o
   operador ter rolado até o fim de uma lista de 134 equipamentos. */
.revisao-rodape{position:sticky;bottom:0;z-index:5;
  margin-top:var(--e5);padding:var(--e3) 0;
  background:var(--bg-app);border-top:1px solid var(--borda)}

.canary-lista{display:flex;flex-wrap:wrap;gap:var(--e2);margin:var(--e2) 0}
.canary-lista .canary-host.mais{color:var(--tx3);font-family:var(--sans)}
/* Escolher canário é marcar nomes, não ler uma tabela: coluna única, rolagem
   interna, e a lista de equipamentos continua sendo a de cima. */
.canary-escolha{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1px;max-height:280px;overflow:auto;margin-top:var(--e3);
  padding:var(--e2);background:var(--bg-app);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md)}
.canary-escolha .opcao-filtro b{font-weight:400}

/* Bloco de confirmação: compacto, com o campo junto do aviso. Banner de meia
   tela para pedir uma palavra é o tipo de coisa que se aprende a pular. */
.confirma{padding:var(--e3);background:var(--alerta-fraco);
  border:1px solid var(--alerta-borda);border-radius:var(--r-md)}
.confirma-aviso{display:flex;align-items:flex-start;gap:var(--e3);
  margin-bottom:var(--e3);font-size:12.5px;color:var(--alerta)}
.confirma-aviso b{display:block;font-weight:600}
.confirma .campo{margin:0;max-width:260px}
.confirma .campo label{color:var(--tx2)}

/* Vazio sem caixa: uma linha discreta em vez de um painel anunciando o nada. */
.vazio-leve{padding:var(--e5) 0;text-align:center;font-size:12.5px;
  color:var(--tx3)}
.vazio-leve b{display:block;margin-bottom:var(--e1);font-weight:600;
  color:var(--tx2)}
.plat-resumo{display:flex;flex-wrap:wrap;gap:var(--e4);margin-top:var(--e2)}
.plat-resumo .plat-linha{gap:var(--e2);justify-content:flex-start}
.lista-alvos{margin-top:var(--e3)}
.lista-alvos>summary{font-size:12px;color:var(--azul);cursor:pointer;
  list-style:none;padding:var(--e1) 0}
.lista-alvos>summary::-webkit-details-marker{display:none}
.bloco-cmd{margin-bottom:var(--e3)}
.cmd-titulo{font-size:11px;color:var(--tx3);margin-bottom:var(--e1)}
.lista-cmd{margin:0;padding-left:var(--e5);color:var(--tx1)}
.lista-cmd li{padding:2px 0;font-size:12.5px}
.revisao-rodape{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);margin-top:var(--e5);padding-top:var(--e4);
  border-top:1px solid var(--borda-sutil)}

/* ------------------------------------------------ histórico e detalhe */
.filtros-hist{display:flex;align-items:center;gap:var(--e1);margin-bottom:var(--e3);
  flex-wrap:wrap}
.hist-busca{margin-left:auto;width:min(340px,100%)}
.hist-busca input{font-size:12.5px}
.duas>.bloco{margin-bottom:0}

/* --------------------------------------------- painel de execução ao vivo */
.barra-exec{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4)}
.barra-exec .barra{flex:1;margin:0;height:5px}
.barra-exec .nada{white-space:nowrap;font-size:12px}
.barra-exec b{color:var(--tx1);font-variant-numeric:tabular-nums}
.linha-alvo{cursor:pointer}

.lista-comandos{display:block}
.cmd-linha{display:flex;align-items:center;gap:var(--e2);padding:var(--e2) 0;
  border-bottom:1px solid var(--borda-sutil);font-size:12.5px;color:var(--tx2)}
.cmd-linha:last-child{border-bottom:none}
.cmd-linha.ok{color:var(--ok)}
.cmd-linha.erro{color:var(--erro)}
.cmd-linha.alerta{color:var(--alerta)}
.cmd-linha.neutro{color:var(--tx3)}
.cmd-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--tx1)}
.cmd-linha.neutro .cmd-nome{color:var(--tx3)}
.cmd-meta{font-size:11px;color:var(--tx3);white-space:nowrap}
.cmd-erro{padding:0 0 var(--e2) var(--e4);font-size:11px;color:var(--erro)}

/* modal: uma caixa centrada, sem framework */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:var(--e5);background:rgba(4,8,14,.6)}
.modal-caixa{width:min(460px,100%);padding:var(--e5);background:var(--bg-elevated);
  border:1px solid var(--borda-forte);border-radius:var(--r-lg);
  box-shadow:var(--sombra-modal)}
.modal-caixa h2{margin-bottom:var(--e2);font-size:15px;letter-spacing:0;
  text-transform:none;color:var(--tx1)}
.modal-caixa .acoes{justify-content:flex-end;margin:0}

/* ------------------------------------------------- resultados e saída */
.linha-resultado.abrivel,.cmd-linha.abrivel{cursor:pointer}
.cmd-linha.abrivel:hover{background:var(--bg-hover)}
.trecho-busca{margin-top:var(--e1);padding:var(--e1) var(--e2);
  background:var(--bg-app);border-left:2px solid var(--alerta);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:11px;color:var(--tx3);
  white-space:pre-wrap;word-break:break-word}
.saida-cmd{margin:var(--e3) 0 0;padding:var(--e3);background:var(--bg-app);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--tx2);
  max-height:60vh;overflow:auto;white-space:pre;tab-size:4}
.saida-cmd mark{background:var(--alerta-fraco);color:var(--alerta);
  padding:0 2px;border-radius:2px}

/* Credencial guardada mas não conferida: âmbar, e não verde. A diferença
   entre "vale" e "não sabemos" tem de estar na cor, senão as duas viram a
   mesma linha de texto que ninguém lê. */
.cred-guardada.morna{border-color:var(--alerta-borda);color:var(--alerta)}
.cred-guardada.morna b{color:var(--alerta)}

/* --- alvos: busca, filtros e chips */
/* Os filtros ficam atrás de um botão. Quando eram três blocos permanentes no
   topo, a tela abria com centenas de valores competindo com a execução — que
   é o conteúdo. Filtro é ferramenta. */
.linha-busca{display:flex;align-items:center;gap:var(--e2);margin-bottom:var(--e2)}
.linha-busca .consulta{flex:1;margin:0}
.envolve-popover{position:relative}
.envolve-popover>.botao .n{display:inline-flex;align-items:center;
  justify-content:center;min-width:18px;height:18px;margin-left:var(--e2);
  padding:0 5px;border-radius:var(--r-pill);background:var(--azul);
  color:var(--bg-app);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.alterna-dsl{height:var(--h-controle);padding:0 var(--e3);border:0;
  border-radius:var(--r-md);background:transparent;color:var(--tx3);
  font-family:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;
  transition:color var(--t-rapido) ease}
.alterna-dsl:hover{color:var(--tx1)}
.alterna-dsl.on{color:var(--azul)}

.popover{position:absolute;top:calc(100% + var(--e2));right:0;z-index:40;
  width:min(560px,92vw);background:var(--bg-elevated);
  border:1px solid var(--borda-forte);border-radius:var(--r-lg);
  box-shadow:var(--sombra-overlay)}
.popover-corpo{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);
  padding:var(--e4);max-height:min(60vh,460px);overflow:auto}
.grupo-filtro h3{margin:0 0 var(--e2);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
.busca-grupo{height:var(--h-mini);margin-bottom:var(--e2);padding:0 var(--e2);
  font-size:12px}
/* Rolagem por grupo: sem isto, 40 tags empurram Site para fora da tela e o
   painel vira outra parede — só que dentro de uma caixa. */
.lista-filtro{max-height:180px;overflow:auto;display:flex;
  flex-direction:column;gap:1px}
.opcao-filtro{display:flex;align-items:center;gap:var(--e2);
  height:var(--h-mini);padding:0 var(--e2);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--tx2);cursor:pointer}
.opcao-filtro:hover{background:var(--bg-hover);color:var(--tx1)}
.opcao-filtro span{flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.opcao-filtro b{color:var(--tx3);font-weight:400;font-size:11.5px;
  font-variant-numeric:tabular-nums}
.popover-rodape{display:flex;justify-content:flex-end;gap:var(--e2);
  padding:var(--e3) var(--e4);border-top:1px solid var(--borda-sutil)}

/* Só o que está ativo aparece. Sem filtro, nenhum chip — e a linha some. */
.chips-ativos{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e3)}
.chip-filtro{display:inline-flex;align-items:center;gap:var(--e2);
  height:var(--h-mini);padding:0 var(--e2) 0 var(--e3);border-radius:var(--r-md);
  border:1px solid var(--azul-borda);background:var(--azul-fraco);
  color:var(--azul);font-family:inherit;font-size:12px;cursor:pointer;
  transition:background var(--t-rapido) ease}
.chip-filtro:hover{background:var(--azul-medio)}
.chip-filtro i{font-style:normal;font-size:14px;line-height:1;opacity:.7}
.chip-filtro:hover i{opacity:1}

/* Ajuda que só aparece quando alguém pergunta. */
.dica{width:16px;height:16px;padding:0;border:1px solid var(--borda);
  border-radius:50%;background:transparent;color:var(--tx3);
  font-family:inherit;font-size:10px;line-height:1;cursor:help;
  vertical-align:middle}
.dica:hover{color:var(--azul);border-color:var(--azul-borda)}

/* --- resumo da execução: blocos, não uma lista de definições */
.resumo-bloco{padding:var(--e3) 0;border-bottom:1px solid var(--borda-sutil)}
.resumo-bloco:last-of-type{border-bottom:0}
.resumo-bloco h3{margin:0 0 var(--e1);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
.resumo-bloco p{margin:0;font-size:13px;color:var(--tx2)}
.resumo-bloco p.resumo-forte{font-size:14px;font-weight:600;color:var(--tx1)}

/* ------------------------------------------------- temas do aplicativo */
/* Um tema é só outra atribuição dos MESMOS tokens — nenhuma regra de
   componente muda. Meia-noite: mais preto, para sala escura. Grafite: neutro,
   sem o azulado, para quem olha a tela o dia inteiro. */
:root[data-tema="meia-noite"]{
  --bg-app:#050609; --bg-trilho:#08090D; --bg-surface:#0B0D12;
  --bg-hover:#111420; --bg-campo:#080A0F; --bg-elevated:#151924;
  --borda-sutil:#12161E; --borda:#1A202B; --borda-forte:#26303E;
  --painel-topo:rgba(5,6,9,.72);
}
:root[data-tema="grafite"]{
  --bg-app:#101113; --bg-trilho:#121316; --bg-surface:#17191C;
  --bg-hover:#1D2024; --bg-campo:#131518; --bg-elevated:#22252B;
  --borda-sutil:#212429; --borda:#2A2E34; --borda-forte:#383D44;
  --tx2:#A5ACB8; --tx3:#8E939B;
  --painel-topo:rgba(16,17,19,.72);
}
/* Marinho: a paleta navy que era o padrão até o redesign — para quem
   preferia o azul de fundo. */
:root[data-tema="marinho"]{
  --bg-app:#0B121D; --bg-trilho:#0D1521; --bg-surface:#121B29;
  --bg-hover:#16202E; --bg-campo:#0D1724; --bg-elevated:#1A2534;
  --borda-sutil:#1A2635; --borda:#223146; --borda-forte:#2C3D55;
  --tx1:#E8EEF7; --tx2:#97A6BC; --tx3:#8093AC;
  --painel-topo:rgba(11,18,29,.78);
}
/* Carvão: neutro quente, para quem cansa do azulado. */
:root[data-tema="carvao"]{
  --bg-app:#121110; --bg-trilho:#141312; --bg-surface:#1A1917;
  --bg-hover:#221F1C; --bg-campo:#161514; --bg-elevated:#252320;
  --borda-sutil:#242220; --borda:#2E2C29; --borda-forte:#3D3934;
  --tx1:#EDEAE4; --tx2:#A8A49C; --tx3:#9A948A;
  --painel-topo:rgba(18,17,16,.78);
}
/* Claro: primeira classe, não inversão preguiçosa — cada token foi
   escolhido para a mesma hierarquia funcionar sobre fundo claro. */
:root[data-tema="claro"]{
  color-scheme:light;
  --bg-app:#F2F3F6; --bg-trilho:#ECEEF2; --bg-surface:#FFFFFF;
  --bg-hover:#E9EDF3; --bg-campo:#FFFFFF; --bg-elevated:#FFFFFF;
  --bg-ativo:rgba(31,111,224,.10);
  --borda-sutil:#E4E8EE; --borda:#D3DAE4; --borda-forte:#B9C3D2;
  --tx1:#181D26; --tx2:#4E5868; --tx3:#616976;
  --azul:#1F6FE0; --azul-claro:#3D82E8;
  --azul-fraco:rgba(31,111,224,.10); --azul-medio:rgba(31,111,224,.16);
  --azul-borda:rgba(31,111,224,.36);
  --sobre-acento:#FFFFFF;
  --ok:#0F9D6A; --ok-fraco:rgba(15,157,106,.10);
  --ok-borda:rgba(15,157,106,.32);
  --alerta:#B87514; --alerta-fraco:rgba(184,117,20,.10);
  --alerta-borda:rgba(184,117,20,.32);
  --erro:#D64541; --erro-fraco:rgba(214,69,65,.08);
  --erro-borda:rgba(214,69,65,.30);
  --sombra-pop:0 8px 28px rgba(23,30,45,.14);
  --sombra-overlay:0 16px 48px rgba(23,30,45,.16);
  --sombra-modal:0 24px 70px rgba(23,30,45,.20);
  --painel-topo:rgba(242,243,246,.80);
}
/* Widgets nativos no claro: o seletor de data/hora e os ícones de busca
   herdavam o esquema escuro e abriam pretos sobre a tela clara. */
:root[data-tema="claro"] input[type=date],
:root[data-tema="claro"] input[type=datetime-local],
:root[data-tema="claro"] input[type=time]{color-scheme:light}
:root[data-tema="claro"] input[type=date]::-webkit-calendar-picker-indicator,
:root[data-tema="claro"] input[type=datetime-local]::-webkit-calendar-picker-indicator,
:root[data-tema="claro"] input[type=search]::-webkit-search-cancel-button{
  filter:none}
:root[data-tema="claro"] .esqueleto::after{
  background:linear-gradient(90deg,transparent,rgba(23,30,45,.06),transparent)}
:root[data-tema="claro"] .aviso code{background:rgba(23,30,45,.08)}

/* ---------------------------------------------------- menu do avatar */
.eu-menu{position:relative}
.eu-menu>summary{list-style:none;cursor:pointer}
.eu-menu>summary::-webkit-details-marker{display:none}
.eu-menu>summary:hover .bola{box-shadow:0 0 0 2px var(--azul-borda)}
.eu-menu .menu-corpo{right:var(--e2);top:calc(100% + 2px)}

/* Amostras de tema nas preferências: as cores são CONTEÚDO da escolha, não
   tokens — por isso vivem inline no template, como dado. */
.amostras{display:inline-flex;gap:3px;margin-left:var(--e2);vertical-align:middle}
.amostras b{width:12px;height:12px;border-radius:3px;
  border:1px solid var(--borda-forte)}

/* Cartões de tema do APLICATIVO: uma miniatura do shell pintada com as
   cores do próprio tema (as cores são CONTEÚDO da escolha e chegam inline,
   como nos cartões de tema do terminal). Clicar aplica na hora. */
.temas-app{display:grid;gap:var(--e3);
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));max-width:940px}
.tema-app{position:relative;display:block;overflow:hidden;cursor:pointer;
  border:1px solid var(--borda);border-radius:var(--r-md);
  background:var(--bg-campo);transition:border-color var(--t-rapido) ease}
.tema-app:hover{border-color:var(--borda-forte)}
.tema-app input{position:absolute;opacity:0;width:0;height:0}
.tema-app:has(input:checked){border-color:var(--azul);
  box-shadow:0 0 0 1px var(--azul)}
.tema-app:has(input:checked) .tema-rodape{color:var(--tx1);font-weight:600}
.tema-app-vis{display:flex;height:74px;background:var(--v-fundo)}
.tema-app-vis .v-trilho{width:24%;background:var(--v-trilho);
  border-right:1px solid var(--v-fio);display:flex;flex-direction:column;
  gap:4px;padding:8px 6px}
.tema-app-vis .v-trilho i{display:block;height:4px;border-radius:2px;
  background:var(--v-fio)}
.tema-app-vis .v-trilho i:first-child{background:var(--v-acento);
  opacity:.85}
.tema-app-vis .v-corpo{flex:1;display:flex;flex-direction:column}
.tema-app-vis .v-topo{height:12px;border-bottom:1px solid var(--v-fio)}
.tema-app-vis .v-miolo{flex:1;display:flex;flex-direction:column;gap:5px;
  padding:8px}
.tema-app-vis .v-b{display:block;height:12px;border-radius:4px;
  background:var(--v-bloco);border:1px solid var(--v-fio)}
.tema-app-vis .v-b.curto{width:62%}

/* --------------------------------------- galeria de temas do terminal */
/* Mesma regra da .paleta: as cores dos cartões são CONTEÚDO da escolha e
   chegam inline, vindas do catálogo (ism/web/temas.py). Aqui fica só a
   moldura — nenhuma cor de tema mora neste arquivo. */
.tema-filtros{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e2);
  margin-bottom:var(--e3)}
.tema-filtros .tema-busca{width:220px}
.pref-abas{margin-bottom:var(--e5)}
.tema-grupo{margin-bottom:var(--e4)}
.tema-grupo-titulo{margin:0 0 var(--e2);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
.temas-grade{display:grid;gap:var(--e3);
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.tema-cartao{position:relative;display:block;overflow:hidden;cursor:pointer;
  background:var(--bg-campo);border:1px solid var(--borda);
  border-radius:var(--r-md);transition:border-color var(--t-rapido) ease}
.tema-cartao:hover{border-color:var(--borda-forte)}
.tema-cartao input{position:absolute;opacity:0;width:0;height:0}
.tema-cartao:has(input:checked){border-color:var(--azul);
  box-shadow:0 0 0 1px var(--azul)}
.tema-amostra{display:block;padding:10px 11px;font-family:var(--mono);
  font-size:10.5px;line-height:1.6}
.tema-amostra .l{display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tema-pontos{display:flex;gap:3px;margin-top:7px}
.tema-pontos i{display:block;width:10px;height:10px;border-radius:2px}
.tema-rodape{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e2);padding:8px 11px;background:var(--bg-surface);
  border-top:1px solid var(--borda-sutil);font-size:12.5px;color:var(--tx2)}
.tema-cartao:has(input:checked) .tema-rodape{color:var(--tx1);font-weight:600}
.tema-marca{font-size:10px;color:var(--tx3);letter-spacing:.04em;
  text-transform:uppercase}
.tema-vazio{padding:var(--e4) 0;color:var(--tx3);font-size:12.5px}

/* A prévia tem a moldura de uma sessão de verdade; as cores vêm do tema
   escolhido, aplicadas pelo script da tela. */
.previa-term{margin:0;padding:var(--e3) var(--e4);overflow:auto;
  border:1px solid var(--borda);border-radius:var(--r-md);
  font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre}

/* ------------------------------------------------- auditoria expansível */
.aud-linha{cursor:pointer}
.aud-corpo>td{padding:0 var(--e3) var(--e3);background:var(--bg-app)}
.aud-json{margin:0;padding:var(--e3);background:var(--bg-app);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--tx2);
  white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto}

/* Espelho de sessão: a mesma moldura da saída de comando, mais alta. */
.sessao-tela{height:calc(100vh - 320px);min-height:300px}

/* ------------------------------------------------ sessão: live viewer */
/* O terminal domina a tela: cabeçalho compacto em cima, resto é terminal.
   A altura sai da viewport porque um terminal de 300px mostra meia tela de
   `show run` e obriga a rolar para ler o que já está desenhado. */
.sv-cabeca{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e4);margin-bottom:var(--e3)}
.sv-quem h1{margin:0 0 2px}
.sv-quem .sub{margin:0}
.sv-estado{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  justify-content:flex-end}
.sv-terminal{height:calc(100vh - 210px);min-height:320px;padding:var(--e2);
  background:#000;border:1px solid var(--borda);border-radius:var(--r-md);
  overflow:hidden}
.sv-terminal .xterm{height:100%}
/* Detalhe da sessão encerrada: metadados em grade, abas, painéis. O
   terminal encolhe para caber a grade sem empurrar tudo para fora. */
.sv-terminal.compacta{height:calc(100vh - 400px)}
.sv-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--e2);margin-bottom:var(--e3)}
.sv-dado{background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r-md);padding:8px 10px;display:flex;
  flex-direction:column;gap:2px;min-width:0}
.sv-dado .rot{font-size:11px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--tx3)}
.sv-dado b{font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sv-dado .int-ok{color:var(--ok)}
.sv-dado .int-ruim{color:var(--erro)}
.sv-abas{align-items:center;flex-wrap:wrap}
.sv-abas .sv-baixar{margin-left:auto;display:flex;gap:var(--e2);
  padding-bottom:var(--e2)}
.sv-painel{background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--r-md);padding:var(--e3);
  max-height:calc(100vh - 400px);overflow:auto}
.sv-tabela{width:100%;border-collapse:collapse}
.sv-tabela td{padding:4px 8px;border-bottom:1px solid var(--borda-sutil);
  vertical-align:top}
.sv-tabela tr.entrada td,.sv-tabela tr.interrompido td{color:var(--tx3)}
/* A linha do histórico navega: o cursor diz isso antes do clique. */
.linha-sessao{cursor:pointer}
tr[data-href]{cursor:pointer}

/* ------------------------------------------------ automações: hub */
.auto-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--e3);margin-bottom:var(--e5)}
.auto-cartao{display:block;background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  padding:var(--e4);color:var(--tx1);text-decoration:none}
.auto-cartao:hover{border-color:var(--azul-borda);text-decoration:none}
.auto-cartao h2{margin-bottom:var(--e2)}
.auto-num{margin:0 0 var(--e2);font-size:22px;font-weight:600;
  line-height:1.2}
.auto-num span{font-size:12px;font-weight:400;color:var(--tx3);
  margin-left:6px}
.auto-cartao .ajuda{margin:0}

/* ------------------------------------------------ configurações */
/* Sidebar interna: as seções crescem sem virar uma página gigantesca.
   Duas colunas de grid — o include do lado é UM filho, o corpo é outro
   (todo filho direto de grid conta; ver armadilha conhecida). */
.config-grade{display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:var(--e5);align-items:start}
.config-lado{position:sticky;top:70px}
.config-nav{display:flex;flex-direction:column;gap:2px}
.config-grupo{margin:var(--e4) 0 var(--e1);padding:0 10px;font-size:10px;
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx3)}
/* Mesmo vocabulário da sidebar do shell: ícone à esquerda, grupo com o
   mesmo tratamento, estado ativo bem marcado. A nav era nove links de texto
   puro e parecia de outro produto (QA UI-004). */
.config-nav a{display:flex;align-items:center;gap:var(--e2);
  padding:7px 10px;border-radius:var(--r-sm);color:var(--tx2);
  font-size:var(--fs-meta);text-decoration:none}
.config-nav a svg{width:16px;height:16px;flex:none;opacity:.75}
.config-nav a:hover{background:var(--bg-hover);text-decoration:none}
.config-nav a:hover svg{opacity:1}
.config-nav a.on{background:var(--bg-hover);color:var(--tx1);
  font-weight:600}
.config-nav a.on svg{opacity:1;color:var(--azul)}
.config-grupo{font-size:var(--fs-grupo)}
/* Busca na nav: o teste dos 15 segundos falhava porque não havia nenhuma —
   nem aqui nem na paleta (QA UX-015). */
.config-busca{width:100%;margin-bottom:var(--e3);padding:6px 10px;
  font-size:var(--fs-meta)}
.config-nav-vazio{padding:var(--e3) 10px;font-size:var(--fs-micro);
  color:var(--tx3)}

/* Histórico por seção: o diff `antes -> depois` da auditoria. */
.hist-linha{align-items:flex-start}
.hist-diff{margin-top:var(--e2);display:flex;flex-direction:column;gap:2px}
.hist-diff .mudanca{font-size:var(--fs-micro)}
.hist-diff .rot{display:inline-block;min-width:150px;color:var(--tx3)}
.config-nota{margin:var(--e4) 0 0;padding:0 10px}
/* contas de serviço: formulários no menu da linha e o de criação */
.menu-conta{min-width:250px}
.menu-conta form{display:flex;flex-direction:column;gap:var(--e2);
  padding:var(--e1) var(--e3) var(--e2)}
.form-conta{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--e3);align-items:end;margin-bottom:var(--e2)}
.form-conta .campo{margin:0;display:flex;flex-direction:column;gap:4px}
.form-conta .campo label{font-size:11px;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.4px}
.form-conta .campo-acao{justify-content:flex-end}

/* --------------------------------------------- templates de automação */
.grade-plataformas{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--e3)}
.plat-editor{margin:0}
.plat-editor textarea{font-family:var(--mono);font-size:12px;width:100%;
  min-height:64px}
.var-linha{display:grid;gap:var(--e2);margin-bottom:var(--e2);
  grid-template-columns:130px 150px 100px 110px 110px 1fr 1fr;
  align-items:center}
.var-linha .var-obrig{display:flex;gap:6px;align-items:center;
  font-size:12px;color:var(--tx2);white-space:nowrap}
@media (max-width:1100px){.var-linha{grid-template-columns:1fr 1fr 1fr}}
.form-variaveis{max-width:560px}

/* ---------------------------------------- novo agendamento (template) */
.picker-modelo{display:flex;gap:var(--e2);align-items:center;max-width:520px}
.picker-modelo select{flex:1}
.ag-previa{margin-top:var(--e3);padding:var(--e3);
  background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md)}
.ag-previa-titulo{font-size:10px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--tx3);margin-bottom:var(--e2)}
.ag-previa .mono{white-space:pre-line}

/* ------------------------------------------- polimento (fatia 23a) */
/* Configurações: sidebar com identidade e seção ativa com indicador. */
.config-titulo{font-size:10px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--tx3);padding:0 10px;margin-bottom:var(--e2)}
.config-nav a{border-left:2px solid transparent;border-radius:0 var(--r-sm)
  var(--r-sm) 0}
.config-nav a.on{border-left-color:var(--azul);background:var(--bg-hover)}
.config-corpo{max-width:960px;min-width:0}
.config-corpo .bloco{margin-bottom:var(--e4)}
.config-corpo table{width:100%}
.config-corpo tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.config-corpo td,.config-corpo th{padding:8px 10px}

/* Geral: rótulo -> valor em grade, em vez de lista vertical comprida. */
.config-dados{display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:0;margin:0}
.config-dados dt{margin:0;padding:9px 0;font-size:12px;color:var(--tx3);
  border-top:1px solid var(--borda-sutil)}
.config-dados dd{margin:0;padding:9px 0;font-size:13px;color:var(--tx1);
  border-top:1px solid var(--borda-sutil);overflow-wrap:anywhere}
.config-dados dt:first-child,.config-dados dt:first-child+dd{border-top:0}
@media (max-width:700px){.config-dados{grid-template-columns:1fr}
  .config-dados dt{border-top:1px solid var(--borda-sutil);padding-bottom:0}
  .config-dados dd{border-top:0;padding-top:2px}}

/* Hub de Automações: cartões com acento e elevação no hover. */
.auto-cartao{position:relative;overflow:hidden;
  transition:transform .12s ease,border-color .12s ease}
.auto-cartao::before{content:"";position:absolute;inset:0 0 auto 0;
  height:2px;background:var(--azul);opacity:.55}
.auto-cartao:hover{transform:translateY(-1px);border-color:var(--azul-borda)}
.auto-num{color:var(--tx1)}

/* Formulários das telas novas: altura e foco consistentes. */
.form-conta input,.picker-modelo select,.menu-conta input{min-height:32px}
.menu-conta input{width:100%}
.sv-baixar{margin-left:auto;display:inline-flex;gap:var(--e2)}

/* Aviso de sucesso — Testar credencial e Certificado usam. */
.aviso.ok{border-color:var(--ok-borda,var(--ok));color:var(--tx1)}
.aviso.ok b{color:var(--ok)}
.cert-checagens{list-style:none;margin:var(--e3) 0;padding:0;
  color:var(--ok);font-size:12.5px}
.cert-checagens li{padding:2px 0}
/* replay + busca da sessão (17e) */
.sv-replay{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  margin-bottom:var(--e2);padding:var(--e2) var(--e3);
  background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md)}
.sv-replay input[type=range]{flex:1;min-width:160px}
.rp-vels{display:inline-flex;gap:2px}
.rp-vel{padding:2px 8px;font-size:11px;border:1px solid var(--borda-sutil);
  background:none;color:var(--tx2);border-radius:var(--r-sm);
  font-family:inherit;cursor:pointer}
.rp-vel.on{color:var(--tx1);border-color:var(--azul-borda);
  background:var(--bg-hover)}
.sv-abas .sv-busca{margin-left:auto;max-width:230px;min-height:28px;
  font-size:12px}
.sv-abas .sv-baixar{margin-left:0}
.sv-busca-item{display:flex;gap:var(--e3);padding:6px 8px;
  border-top:1px solid var(--borda-sutil);font-size:12px;
  align-items:baseline}
.sv-busca-item:first-of-type{border-top:0}
.sv-busca-t{color:var(--azul);min-width:44px}
.sv-linkavel{cursor:pointer}
.sv-linkavel:hover{background:var(--bg-hover)}

.tres{display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 var(--e4)}
.forcar{margin-top:var(--e3)}
.forcar>summary{font-size:11px;color:var(--tx3);cursor:pointer;list-style:none}
.forcar>summary:hover{color:var(--tx1)}
.forcar[open]>summary{color:var(--tx1);margin-bottom:var(--e2)}
.forcar-corpo{max-width:520px;text-align:left}
.campo-olho{position:relative;display:block}
.campo-olho input{width:100%;padding-right:66px}
.campo-olho .olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  height:24px;padding:0 var(--e2);border:1px solid var(--borda-sutil);
  border-radius:var(--r-sm);background:transparent;color:var(--tx3);
  font-size:11px;font-family:inherit;line-height:1;cursor:pointer}
.campo-olho .olho:hover{color:var(--tx1);border-color:var(--azul-borda)}
.tag.alerta{color:var(--alerta);border-color:var(--alerta-borda)}
@media (max-width:640px){.tres{grid-template-columns:1fr}}
/* Comparação entre equipamentos (27w). Os dois lados têm o MESMO peso
   visual de propósito: a tela antiga tinha seletor de um lado e botão de
   leitura do outro, e a assimetria sugeria que os lados faziam coisas
   diferentes — quando o que faltava era o lado esquerdo poder ler. */
.comparar-sel{display:block;margin-bottom:var(--e4)}
.comparar-lados{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
.comparar-lado{display:flex;flex-direction:column;gap:4px;min-width:0}
.comparar-lado select{width:100%;min-width:0}
.comparar-lado .ajuda{margin:0}
.comparar-acoes{display:flex;gap:var(--e2);align-items:center;
  flex-wrap:wrap;margin-top:var(--e3)}
/* Barra única: comando, botões e credencial dividem UMA linha — o input
   global de 100% empilharia tudo e a barra viraria formulário. */
.comparar-ler input{width:auto}
.comparar-ler .comparar-cmd{flex:1;min-width:200px;max-width:340px;
  font-size:12.5px}
.comparar-ler input[name="usuario_rede"]{width:140px}
.comparar-ler .campo-olho{width:150px}
.comparar-ler input[name="senha_rede"]{width:150px}
.comparar-sep{width:1px;height:20px;background:var(--borda)}
.comparar-ler{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;
  margin-bottom:var(--e2)}
.comparar-ler .mono{margin-left:6px;opacity:.7}
@media (max-width:860px){.comparar-lados{grid-template-columns:1fr}}
.cap-chip{display:inline-block;margin:1px 4px 1px 0;
  padding:1px 8px;font-size:11px;border:1px solid var(--borda-sutil);
  border-radius:999px;color:var(--tx2);background:var(--bg-surface)}
.ntp-saida{background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md);padding:var(--e3);font-size:12px;
  white-space:pre-wrap;word-break:break-word;max-height:220px;
  overflow:auto;margin:0 0 var(--e3)}
@media (max-width:860px){.config-grade{grid-template-columns:1fr}
  .config-lado{position:static}
  .config-nav{flex-direction:row;flex-wrap:wrap}}

/* ------------------------------------------------ tela de sessões */
.filtros-sessao{display:flex;gap:var(--e2);flex-wrap:wrap;
  margin-bottom:var(--e3)}
.filtros-sessao input{width:260px}
.linha-periodo{display:flex;align-items:center;gap:var(--e3);
  flex-wrap:wrap;margin-bottom:var(--e4)}
.acoes-cabeca{display:flex;gap:var(--e2);align-items:center}
.tabela-sessoes td{vertical-align:middle}
/* O nome do equipamento e o do operador são links de BUSCA, não de
   navegação: clicar refaz a consulta por aquele termo. Sublinhado só no
   hover para a tabela não virar um campo de links azuis. */
.elo{color:inherit;text-decoration:none;border-bottom:1px dashed transparent}
.elo:hover{color:var(--azul);border-bottom-color:var(--azul-borda)}

/* ------------------------------------------ controles do histórico */
/* Segmentado: "Minhas | Todas" são uma escolha entre duas, e parecer duas
   escolhas independentes fazia o operador clicar nas duas. `Hoje` e `Com
   falhas` são alternáveis e ficam soltos, com a mesma altura. */
.segmentado{display:inline-flex;padding:2px;border-radius:var(--r-md);
  background:var(--bg-campo);border:1px solid var(--borda-sutil)}
.seg{display:inline-flex;align-items:center;height:var(--h-mini);
  padding:0 var(--e3);border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--tx2);font-family:inherit;font-size:12.5px;
  white-space:nowrap;cursor:pointer;
  transition:background var(--t-rapido) ease,color var(--t-rapido) ease,
             border-color var(--t-rapido) ease}
.seg:hover{background:var(--bg-hover);color:var(--tx1)}
/* Ativo com fundo E borda: só a cor do texto some num monitor com brilho
   baixo, que é exatamente onde alguém precisa saber qual filtro está valendo. */
.seg.on{background:var(--azul-fraco);border-color:var(--azul-borda);
  color:var(--azul);font-weight:500}
.seg.solto{height:var(--h-mini);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md);background:var(--bg-campo)}
.seg.solto:hover{background:var(--bg-hover);border-color:var(--borda)}
.seg.solto.on{background:var(--azul-fraco);border-color:var(--azul-borda)}
.filtros-hist{gap:var(--e2)}

/* ------------------------------------------ tabela navegável */
/* A linha inteira abre a execução. O ponteiro e o realce do hover são o que
   contam isso antes de o operador tentar. */
.tabela-navegavel tbody tr{cursor:pointer}
.tabela-navegavel tbody tr:hover{background:var(--bg-hover)}
.tabela-navegavel tbody tr:hover .seta{color:var(--azul);transform:translateX(2px)}
.id-exec{font-family:var(--mono);font-size:12.5px;color:var(--tx1);
  text-decoration:none}
/* Sem azul de link: a tabela tem de continuar parecendo aplicação, não
   página. O accent aparece no hover, quando já é resposta a uma intenção. */
.id-exec:hover{color:var(--azul);text-decoration:none}
.id-exec:focus-visible{outline:2px solid var(--azul);outline-offset:2px;
  border-radius:var(--r-sm)}
th.col-abrir,td.col-abrir{width:32px;text-align:center;padding-right:var(--e3)}
.seta{display:inline-block;color:var(--tx3);font-size:16px;line-height:1;
  transition:color var(--t-rapido) ease,transform var(--t-rapido) ease}
/* Motivo pode ser longo. Crescer a linha por causa dele quebra a densidade
   da tabela inteira; o texto completo fica no title. */
.motivo-curto{max-width:220px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#historico-tabela[aria-busy="true"]{opacity:.55;
  transition:opacity var(--t-rapido) ease}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Metadados da execução: cada dado com o próprio rótulo. A frase única com
   `·` obrigava a adivinhar o que era motivo, o que era operador e o que era
   credencial — e auditoria é exatamente onde essa distinção importa. */
.meta-exec{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e6);
  margin:0 0 var(--e4)}
.meta-exec dt{margin-bottom:2px;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
.meta-exec dd{margin:0;font-size:13px;color:var(--tx1)}

/* Resumo final: aparece quando a execução termina e devolve o foco ao
   resultado. Barra colorida à esquerda, como o canary — a tela não pode
   continuar parecendo "em execução" depois que acabou. */
.resultado-final{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e4);padding:var(--e3) var(--e4);margin-bottom:var(--e4);
  background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-left:2px solid var(--ok);border-radius:var(--r-md)}
.resultado-final.alerta{border-left-color:var(--alerta)}
.resultado-final.erro{border-left-color:var(--erro)}
.resultado-final b{display:block;margin-bottom:2px;font-size:13.5px;
  color:var(--tx1)}

/* O menu de exportação com título e descrição por formato. O `·` virava uma
   linha só, lida como tooltip. */
.menu-exportar{min-width:250px}
.menu-exportar a b{display:block;font-size:12.5px;font-weight:600;
  color:var(--tx1)}
.menu-exportar a span{display:block;margin-top:1px;font-size:11.5px;
  color:var(--tx3)}
.menu-exportar a:hover span{color:var(--tx2)}

/* Botão de ícone miúdo, para ações que acompanham um título — copiar um ID,
   por exemplo. Alvo de 24px: menor que isso vira caça ao pixel. */
.icone-mini{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-left:var(--e2);padding:0;border:0;
  border-radius:var(--r-sm);background:transparent;color:var(--tx3);
  cursor:pointer;vertical-align:middle;
  transition:background var(--t-rapido) ease,color var(--t-rapido) ease}
.icone-mini svg{width:14px;height:14px}
.icone-mini:hover{background:var(--bg-hover);color:var(--tx1)}
.icone-mini.feito{color:var(--ok)}

/* --- canary: a decisão entre as duas fases */
/* Um bloco só, largura inteira, acima das abas. Ele existe para INTERROMPER:
   quem abre a tela com a execução parada tem de esbarrar nele antes de
   qualquer outra coisa. Por isso não é um cartão no meio do conteúdo nem um
   selo no cabeçalho — os dois se leem como decoração. */
.canary{padding:var(--e4);margin-bottom:var(--e4);background:var(--bg-surface);
  border:1px solid var(--borda);border-left:2px solid var(--alerta);
  border-radius:var(--r-lg)}
/* Canário que falhou muda a cor da barra, não a do bloco inteiro: fundo
   vermelho de página inteira vira paisagem e para de significar perigo. */
.canary.parou{border-left-color:var(--erro)}
.canary h2{margin:0 0 var(--e2);font-size:14px;font-weight:600;color:var(--tx1)}
.canary p{margin:0 0 var(--e3);font-size:12.5px;color:var(--tx2)}
.canary p b{color:var(--tx1)}
.canary-hosts{display:flex;flex-wrap:wrap;gap:var(--e2);
  margin:0 0 var(--e3)}
.canary-host{display:inline-flex;align-items:center;gap:var(--e2);
  height:var(--h-mini);padding:0 var(--e3);border-radius:var(--r-md);
  border:1px solid var(--borda-sutil);background:var(--bg-app);
  font-family:var(--mono);font-size:12px;color:var(--tx2)}
.canary-host.ok{color:var(--ok);border-color:var(--ok-borda)}
.canary-host.erro{color:var(--erro);border-color:var(--erro-borda)}
.canary-host.alerta{color:var(--alerta);border-color:var(--alerta-borda)}
.canary-acoes{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.canary-acoes input{max-width:180px;font-family:var(--mono)}

/* Marca de canário na linha: etiqueta, não coluna. Coluna própria custaria
   largura nas 134 linhas para marcar duas. */
.tag.canario{color:var(--alerta);border-color:var(--alerta-borda)}

/* Escolha dos canários na revisão: caixa na primeira coluna da lista que já
   existe. Uma segunda lista de equipamentos ao lado da primeira seria duas
   fontes para a mesma pergunta. */
td.marca-canary,th.marca-canary{width:74px;text-align:center}
.revisao-canary{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  margin-top:var(--e3);padding-top:var(--e3);
  border-top:1px solid var(--borda-sutil)}
.revisao-canary .ajuda{margin:0}

@media (max-width:1240px){
  .revisao-tela{grid-template-columns:1fr}
  .revisao-tela .resumo{position:static}
}
@media (max-width:1000px){
  .tela,.tela.recolhido{grid-template-columns:1fr}
  .trilho{position:static;height:auto;border-right:none;
    border-bottom:1px solid var(--borda-sutil)}
  .tela.recolhido .trilho{display:none}
  .marca,.marca.recolhida{width:auto;padding:0 var(--e4)}
  .duas,.seletores,.diff{grid-template-columns:1fr}
  .lote{left:var(--e3);right:var(--e3);transform:translateY(16px)}
  .lote.visivel{transform:translateY(0)}
}
/* ─────────────────────────────────────────────── command palette (⌘K)
   Um lugar só para ir a qualquer parte: telas, ações, equipamentos e salas.
   Abre por cima de qualquer página; os dados vêm de /api/paleta e do
   catálogo de navegação que o próprio shell conhece. */
.paleta-veu{position:fixed;inset:0;z-index:90;background:rgba(3,5,9,.55);
  backdrop-filter:blur(5px) saturate(140%);
  -webkit-backdrop-filter:blur(5px) saturate(140%);
  display:flex;align-items:flex-start;justify-content:center;
  padding:11vh var(--e5) var(--e5)}
.paleta{width:min(590px,100%);background:var(--bg-elevated);
  border:1px solid var(--borda-forte);border-radius:14px;
  box-shadow:var(--sombra-modal);overflow:hidden;
  animation:paleta-entra 140ms ease-out}
@keyframes paleta-entra{from{opacity:0;transform:translateY(-8px) scale(.985)}}
.paleta-campo{display:flex;align-items:center;gap:var(--e3);
  padding:0 var(--e4);border-bottom:1px solid var(--borda-sutil)}
.paleta-campo svg{width:16px;height:16px;color:var(--tx3);flex:none}
.paleta-campo input{height:52px;flex:1;min-width:0;padding:0;
  background:none;border:none;font-size:15px;color:var(--tx1)}
.paleta-campo input:focus{outline:none;box-shadow:none}
.paleta-lista{max-height:min(430px,58vh);overflow-y:auto;padding:var(--e2)}
.paleta-grupo{padding:var(--e3) var(--e3) var(--e1);font-size:10px;
  font-weight:600;letter-spacing:.9px;text-transform:uppercase;
  color:var(--tx3)}
.paleta-item{display:flex;align-items:center;gap:var(--e3);width:100%;
  height:40px;padding:0 var(--e3);border:none;border-radius:var(--r-md);
  background:none;font-family:inherit;font-size:13px;color:var(--tx1);
  text-align:left;cursor:pointer;text-decoration:none}
.paleta-item svg{width:15px;height:15px;flex:none;color:var(--tx3)}
.paleta-item .rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.paleta-item .rot b{font-weight:600;color:var(--azul-claro)}
.paleta-item .meta{flex:none;font-family:var(--mono);font-size:11px;
  color:var(--tx3)}
.paleta-item:hover{background:var(--bg-hover);text-decoration:none}
.paleta-item.on{background:var(--bg-ativo)}
.paleta-item.on svg{color:var(--azul)}

/* ------------------------------------------------ ISM Shell (⌘J) */
/* Gaveta no pé da tela, não modal centrado: quem digita um comando quer
   continuar vendo a tela de onde partiu. Mesma paleta de cores e mesma
   régua da paleta de comandos. */
.topo-shell{display:inline-flex;align-items:center;gap:var(--e2);
  height:30px;padding:0 6px 0 var(--e2);border:1px solid var(--borda);
  border-radius:var(--r-md);background:var(--bg-campo);color:var(--tx3);
  font-family:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color var(--t-rapido) ease,color var(--t-rapido) ease}
.topo-shell:hover{border-color:var(--borda-forte);color:var(--tx2)}
.topo-shell svg{width:14px;height:14px;flex:none}
.shell-veu{position:fixed;inset:0;z-index:89;background:rgba(3,5,9,.35);
  display:flex;align-items:flex-end;justify-content:center}
.shell{width:min(980px,100%);height:min(48vh,540px);display:flex;
  flex-direction:column;background:var(--bg-elevated);
  border:1px solid var(--borda-forte);border-bottom:none;
  border-radius:14px 14px 0 0;box-shadow:var(--sombra-modal);
  overflow:hidden;animation:shell-entra 140ms ease-out}
@keyframes shell-entra{from{opacity:0;transform:translateY(24px)}}
.shell-cab{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e2) var(--e4);border-bottom:1px solid var(--borda-sutil);
  font-size:12px;color:var(--tx3)}
.shell-titulo{font-weight:600;color:var(--tx1)}
.shell-onde{font-family:var(--mono);font-size:11px}
.shell-dica{margin-left:auto;display:flex;gap:var(--e3);align-items:center}
.shell-fechar{border:none;background:none;color:var(--tx3);font-size:18px;
  line-height:1;cursor:pointer;padding:0 var(--e1)}
.shell-fechar:hover{color:var(--tx1)}
.shell-saida{flex:1;margin:0;padding:var(--e3) var(--e4);overflow:auto;
  font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--tx1);
  white-space:pre-wrap;word-break:break-word}
.shell-saida .eco{color:var(--azul-claro);margin-top:var(--e2)}
.shell-saida .err{color:var(--erro)}
.shell-saida .dim{color:var(--tx3)}
.shell-linha{display:flex;align-items:center;gap:var(--e2);
  padding:0 var(--e4);border-top:1px solid var(--borda-sutil)}
.shell-prompt{font-family:var(--mono);font-size:12px;color:var(--azul);flex:none}
.shell-linha input{height:44px;flex:1;min-width:0;padding:0;background:none;
  border:none;font-family:var(--mono);font-size:12.5px;color:var(--tx1)}
.shell-linha input:focus{outline:none;box-shadow:none}
.shell-linha input:disabled{color:var(--tx3)}
.paleta-vazio{padding:var(--e6) var(--e4);text-align:center;color:var(--tx3);
  font-size:13px}
.paleta-pe{display:flex;align-items:center;gap:var(--e4);
  padding:var(--e2) var(--e4);border-top:1px solid var(--borda-sutil);
  font-size:11px;color:var(--tx3)}
.paleta-pe .tecla{height:16px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ═══════════════════════════════════════════════════ 7. Cowork */
:root{
  --cw-lado:248px;
  --cw-ctx:316px;
  --cw-thread:380px;
  --cw-av:28px;
  --cw-cab:56px;
}

.cw{display:grid;grid-template-columns:var(--cw-lado) minmax(0,1fr);
  height:calc(100vh - var(--h-topo));min-height:0;background:var(--bg-app)}
.cw.com-ctx{grid-template-columns:var(--cw-lado) minmax(0,1fr) var(--cw-ctx)}
.cw.com-thread{grid-template-columns:var(--cw-lado) minmax(0,1fr) var(--cw-thread)}
.cw.com-ctx.com-thread{
  grid-template-columns:var(--cw-lado) minmax(0,1fr) var(--cw-thread)}
.cw.com-ctx.com-thread .cw-ctx{display:none}
.cw.sem-lado{grid-template-columns:0 minmax(0,1fr)}
.cw.sem-lado.com-ctx{grid-template-columns:0 minmax(0,1fr) var(--cw-ctx)}
.cw.sem-lado.com-thread{grid-template-columns:0 minmax(0,1fr) var(--cw-thread)}
.cw.sem-lado .cw-lado{display:none}

/* ------------------------------------------------------------ lateral */
.cw-lado{background:var(--bg-trilho);border-right:1px solid var(--borda-sutil);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  padding-bottom:var(--e4)}
.cw-lado-topo{display:flex;align-items:center;justify-content:space-between;
  height:var(--cw-cab);padding:0 var(--e4);flex:none;
  border-bottom:1px solid var(--borda-sutil)}
.cw-lado-topo b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx2)}
.cw-recolhe{background:none;border:none;color:var(--tx3);cursor:pointer;
  font-size:16px;line-height:1;padding:var(--e1) var(--e2);border-radius:var(--r-sm)}
.cw-recolhe:hover{background:var(--bg-hover);color:var(--tx1)}

.cw-nav{display:flex;flex-direction:column;padding:var(--e3) var(--e2);gap:1px}
.cw-nav a{display:flex;align-items:center;gap:var(--e2);
  padding:6px var(--e3);border-radius:var(--r-sm);color:var(--tx2);
  font-size:13px;text-decoration:none;transition:background .1s,color .1s}
.cw-nav a:hover{background:var(--bg-hover);color:var(--tx1)}
.cw-nav a.on{background:var(--bg-ativo);color:var(--azul-claro)}
.cw-nav a span{flex:1}
.cw-nav kbd{font-size:10px;color:var(--tx3);border:1px solid var(--borda);
  border-radius:4px;padding:1px 4px;font-family:var(--mono)}

.cw-grupo{padding:var(--e3) var(--e2) 0}
.cw-grupo-cab{display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--e3) var(--e1);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3)}
.cw-mais{background:none;border:none;color:var(--tx3);cursor:pointer;
  font-size:15px;line-height:1;padding:0 4px;border-radius:4px}
.cw-mais:hover{background:var(--bg-hover);color:var(--azul)}
.cw-lista{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:1px}
.cw-lista a{display:flex;align-items:center;gap:6px;padding:5px var(--e3);
  border-radius:var(--r-sm);color:var(--tx2);font-size:13px;
  text-decoration:none;min-width:0}
.cw-lista a:hover{background:var(--bg-hover);color:var(--tx1)}
.cw-lista a.on{background:var(--bg-ativo);color:var(--azul-claro)}
.cw-lista a.nao-lida{color:var(--tx1);font-weight:600}
.cw-nome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-hash{color:var(--tx3);font-weight:400}
.cw-cadeado{color:var(--tx3);font-size:11px}
.cw-vazio-lado{padding:var(--e2) var(--e3);font-size:12px;color:var(--tx3)}

.cw-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--azul);color:var(--sobre-acento);font-size:11px;font-weight:700;
  font-style:normal;line-height:1}
.cw-badge.alt{background:var(--alerta);color:#2A1B04}
.cw-ponto{width:6px;height:6px;border-radius:50%;background:var(--alerta);
  display:inline-block}

.cw-estado{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;
  background:var(--tx3);box-shadow:0 0 0 2px var(--bg-trilho)}
.cw-estado[data-estado="online"]{background:var(--ok)}
.cw-estado[data-estado="ausente"]{background:var(--alerta)}
.cw-estado[data-estado="offline"]{background:var(--borda-forte)}

/* -------------------------------------------------------------- centro */
.cw-meio{display:flex;flex-direction:column;min-width:0;min-height:0;
  /* `relative` ancora o painel de emoji/figurinha DENTRO da coluna de
     mensagens. Sem isto ele se posicionava contra o viewport e caía em
     cima do painel de contexto, do outro lado da tela. */
  position:relative;background:var(--bg-app)}
.cw-cab{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);min-height:var(--cw-cab);padding:var(--e2) var(--e5);flex:none;
  border-bottom:1px solid var(--borda-sutil);background:var(--bg-app)}
.cw-cab h1{font-size:15px;margin:0;display:flex;align-items:center;gap:4px}
.cw-proposito{margin:2px 0 0;font-size:12px;color:var(--tx2);
  max-width:70ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-cab-acoes{display:flex;align-items:center;gap:var(--e2);flex:none;
  flex-wrap:wrap;justify-content:flex-end}
.cw-membros-conta{white-space:nowrap}

.cw-fluxo{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--e4) 0;
  scroll-behavior:auto;outline:none}
.cw-fluxo:focus-visible{box-shadow:inset 0 0 0 2px var(--azul-borda)}
.cw-topo-carga{display:flex;justify-content:center;padding:0 var(--e5) var(--e3)}
.cw-inicio,.cw-vazio-canal{padding:var(--e5);text-align:center;color:var(--tx2);
  max-width:52ch;margin:0 auto}
.cw-inicio b,.cw-vazio-canal b{display:block;color:var(--tx1);font-size:15px;
  margin-bottom:var(--e2)}
.cw-vazio-canal p{margin:0 0 var(--e3);font-size:13px}

.cw-dia{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e3) var(--e5) var(--e2);color:var(--tx3);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em}
.cw-dia::before,.cw-dia::after{content:"";flex:1;height:1px;
  background:var(--borda-sutil)}

/* ------------------------------------------------------------ mensagem */
.cw-msg{display:grid;grid-template-columns:var(--cw-av) minmax(0,1fr) auto;
  gap:var(--e3);padding:var(--e2) var(--e5);position:relative;
  transition:background .1s}
.cw-msg:hover{background:var(--bg-surface)}
.cw-msg.cw-realce{background:var(--azul-fraco);
  animation:cw-pisca 2.4s ease-out}
@keyframes cw-pisca{0%{background:var(--azul-medio)}100%{background:transparent}}
.cw-msg-lado{padding-top:2px}
.cw-av{display:flex;align-items:center;justify-content:center;
  width:var(--cw-av);height:var(--cw-av);border-radius:var(--r-sm);
  background:var(--bg-hover);border:1px solid var(--borda);
  color:var(--tx2);font-size:10px;font-weight:700;letter-spacing:.02em}
.cw-av-robo{background:var(--azul-fraco);border-color:var(--azul-borda);
  color:var(--azul-claro);font-size:9px}
.cw-msg-corpo-area{min-width:0}
.cw-msg-cab{display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap;
  margin-bottom:2px}
.cw-msg-autor{font-size:13px;color:var(--tx1)}
.cw-msg-hora{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.cw-editada{font-size:11px}
.cw-selo-robo{font-size:10px;color:var(--azul-claro);
  background:var(--azul-fraco);border:1px solid var(--azul-borda);
  padding:0 5px;border-radius:var(--r-pill)}
.cw-selo-fixada{font-size:10px;color:var(--alerta);
  background:var(--alerta-fraco);padding:0 5px;border-radius:var(--r-pill)}

.cw-msg-corpo{font-size:13.5px;line-height:1.5;color:var(--tx1);
  overflow-wrap:anywhere}
.cw-msg-corpo p{margin:0 0 var(--e2)}
.cw-msg-corpo p:last-child{margin-bottom:0}
.cw-msg-corpo ul,.cw-msg-corpo ol{margin:var(--e1) 0 var(--e2);
  padding-left:var(--e5)}
.cw-msg-corpo li{margin:1px 0}
.cw-msg-corpo blockquote{margin:var(--e1) 0 var(--e2);padding:2px 0 2px var(--e3);
  border-left:2px solid var(--borda-forte);color:var(--tx2)}
.cw-msg-corpo code{font-family:var(--mono);font-size:12px;
  background:var(--bg-campo);border:1px solid var(--borda-sutil);
  border-radius:4px;padding:1px 4px;color:var(--azul-claro)}
.cw-msg-corpo a{color:var(--azul-claro)}
.cw-removida{color:var(--tx3);font-style:italic}
.cw-msg-fora:hover{background:transparent}

/* ------------------------------------------------------- bloco de CLI */
.cli{position:relative;margin:var(--e2) 0;background:var(--bg-campo);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  max-width:100%}
.cli pre{margin:0;padding:var(--e3) var(--e4);overflow-x:auto;
  max-height:420px;overflow-y:auto}
.cli code{background:none;border:none;padding:0;color:var(--tx1);
  font-family:var(--mono);font-size:12px;line-height:1.55;
  white-space:pre;display:block}
/* Rótulo da linguagem do bloco. `data-lingua` era gravado e nunca exibido;
   distinguir saída de equipamento de trecho de configuração é o que o
   operador faz antes de copiar. */
.cli-lingua{position:absolute;top:6px;left:var(--e4);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);
  pointer-events:none}
.cw-copia{position:absolute;top:6px;right:6px;opacity:0;
  background:var(--bg-surface);border:1px solid var(--borda);
  color:var(--tx2);font-size:11px;padding:2px 8px;border-radius:var(--r-sm);
  cursor:pointer;transition:opacity .12s}
.cli:hover .cw-copia,.cw-copia:focus-visible{opacity:1}
.cw-copia:hover{color:var(--tx1);border-color:var(--borda-forte)}

/* ------------------------------------------------------- chips de objeto */
.ref{display:inline-flex;align-items:center;gap:3px;padding:0 6px;
  border-radius:var(--r-sm);font-size:12px;font-weight:500;
  text-decoration:none;border:1px solid transparent;line-height:1.7;
  vertical-align:baseline}
.ref-usuario{background:var(--azul-fraco);color:var(--azul-claro);
  border-color:var(--azul-borda)}
.ref-equipamento{background:var(--bg-hover);color:var(--tx1);
  border-color:var(--borda);font-family:var(--mono);font-size:11.5px}
.ref-execucao{background:var(--bg-hover);color:var(--tx2);
  border-color:var(--borda);font-family:var(--mono);font-size:11.5px}
.ref-site,.ref-automacao{background:var(--bg-hover);color:var(--tx2);
  border-color:var(--borda)}
.ref:hover{border-color:var(--azul-borda);color:var(--azul-claro)}
.cw-msg-refs{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e2)}

/* ----------------------------------------------------- cartão de evento */
.cw-evento{border:1px solid var(--borda);border-left-width:3px;
  border-radius:var(--r-md);padding:var(--e3) var(--e4);margin:var(--e1) 0;
  background:var(--bg-surface);max-width:64ch}
.cw-evento-ok{border-left-color:var(--ok)}
.cw-evento-erro{border-left-color:var(--erro)}
.cw-evento-alerta{border-left-color:var(--alerta)}
.cw-evento-info{border-left-color:var(--borda-forte)}
.cw-evento-cab{display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
.cw-evento-cab b{font-size:13px}
.cw-evento-assunto{color:var(--tx2);font-size:12.5px}
.cw-evento-linhas{list-style:none;margin:var(--e2) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--e1) var(--e4)}
.cw-evento-linhas li{font-size:12px;color:var(--tx2);
  font-variant-numeric:tabular-nums}
.cw-evento-itens{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e2)}
.cw-evento-acoes{display:flex;gap:var(--e2);margin-top:var(--e3)}

/* --------------------------------------------------------- pé e reações */
/* Reações ao LADO do texto, na mesma linha, alinhadas pela base — o
   padrão de WhatsApp/Slack: o corpo cresce à esquerda, as pílulas ficam à
   direita; anexos e referências descem para a linha de baixo. É só CSS: o
   DOM (template e JS) continua o mesmo, e `order` cuida da posição. */
.cw-msg-corpo-area{display:flex;flex-wrap:wrap;align-items:flex-end;
  column-gap:var(--e3)}
.cw-msg-corpo-area>.cw-msg-cab{flex:1 1 100%;order:0}
.cw-msg-corpo-area>.cw-msg-corpo,.cw-msg-corpo-area>.cw-evento{flex:1 1 0;
  min-width:min(100%,240px);order:1}
.cw-msg-corpo-area>.cw-anexos,.cw-msg-corpo-area>.cw-msg-refs{flex:1 1 100%;
  order:3}
.cw-msg-pe{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  justify-content:flex-end;order:2;flex:0 1 auto;max-width:46%;
  margin-top:var(--e1);min-height:0}
.cw-msg-pe:empty{display:none}
.cw-reacoes{display:flex;gap:4px;flex-wrap:wrap}
.cw-reacao{display:inline-flex;align-items:center;gap:4px;height:22px;
  padding:0 7px;border-radius:var(--r-pill);font-size:11.5px;cursor:pointer;
  background:var(--bg-hover);border:1px solid var(--borda);color:var(--tx2);
  font-variant-numeric:tabular-nums;transition:transform .08s,border-color .1s}
.cw-reacao:hover{border-color:var(--borda-forte);transform:translateY(-1px)}
.cw-reacao.on{background:var(--azul-fraco);border-color:var(--azul-borda);
  color:var(--azul-claro)}
/* Seletor de emoji do recado (/perfil): um botão + grade, no lugar do
   <select> nativo — o <select> continua no formulário, escondido, e é o
   que o servidor lê (ism.js). */
.perfil-emoji-btn{display:inline-flex;align-items:center;gap:var(--e2);
  height:34px;padding:0 var(--e3);border:1px solid var(--borda);
  border-radius:var(--r-md);background:var(--bg-campo);color:var(--tx1);
  font-family:inherit;font-size:14px;cursor:pointer}
.perfil-emoji-btn:hover{border-color:var(--borda-forte)}
.perfil-emoji-btn .sub{font-size:12px;color:var(--tx3)}
.perfil-emoji-pop{position:absolute;z-index:60;width:min(320px,90vw);
  max-height:280px;overflow:auto;padding:var(--e2);margin-top:4px;
  background:var(--bg-elevated);border:1px solid var(--borda-forte);
  border-radius:var(--r-md);box-shadow:var(--sombra-pop)}
.perfil-emoji-pop .grupo{padding:var(--e2) var(--e1) var(--e1);font-size:10px;
  font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--tx3)}
.perfil-emoji-pop .grade{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.perfil-emoji-pop button{height:32px;border:none;background:none;
  border-radius:var(--r-sm);font-size:18px;cursor:pointer}
.perfil-emoji-pop button:hover,.perfil-emoji-pop button.on{background:var(--bg-hover)}
.perfil-emoji-pop .nenhum{grid-column:1/-1;font-size:12px;color:var(--tx2);
  height:28px}
.cw-thread-abre{background:none;border:none;color:var(--azul-claro);
  font-size:12px;cursor:pointer;padding:2px 0;font-weight:500}
.cw-thread-abre:hover{text-decoration:underline}
.cw-marca-tarefa{font-size:11px;color:var(--ok)}

/* ------------------------------------------------- ações da mensagem */
.cw-msg-acoes{display:flex;align-items:flex-start;gap:2px;opacity:0;
  position:absolute;top:-10px;right:var(--e5);background:var(--bg-surface);
  border:1px solid var(--borda);border-radius:var(--r-md);padding:2px;
  transition:opacity .1s;z-index:3}
.cw-msg:hover .cw-msg-acoes,.cw-msg:focus-within .cw-msg-acoes{opacity:1}
.cw-acao{background:none;border:none;color:var(--tx2);cursor:pointer;
  width:26px;height:24px;border-radius:var(--r-sm);font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
  list-style:none}
.cw-acao::-webkit-details-marker{display:none}
.cw-acao:hover{background:var(--bg-hover);color:var(--tx1)}
.cw-emoji-menu,.cw-menu-msg{position:relative}
.cw-emoji-lista{position:absolute;right:0;top:100%;margin-top:4px;z-index:20;
  display:flex;gap:2px;background:var(--bg-elevated);
  border:1px solid var(--borda);border-radius:var(--r-md);padding:4px;
  box-shadow:var(--sombra-pop)}
.cw-emoji{background:none;border:none;cursor:pointer;font-size:15px;
  width:28px;height:28px;border-radius:var(--r-sm)}
.cw-emoji:hover{background:var(--bg-hover);transform:scale(1.15)}
.cw-menu-corpo{position:absolute;right:0;top:100%;margin-top:4px;z-index:20;
  min-width:190px;display:flex;flex-direction:column;padding:4px;
  background:var(--bg-elevated);border:1px solid var(--borda);
  border-radius:var(--r-md);box-shadow:var(--sombra-pop)}
.cw-menu-corpo button{background:none;border:none;text-align:left;
  color:var(--tx2);font-size:12.5px;padding:6px var(--e3);cursor:pointer;
  border-radius:var(--r-sm)}
.cw-menu-corpo button:hover{background:var(--bg-hover);color:var(--tx1)}
.cw-menu-corpo button:disabled{color:var(--tx3);cursor:default;
  background:none}
.cw-menu-corpo button.perigo{color:var(--erro)}
.cw-menu-corpo button.perigo:hover{background:var(--erro-fraco)}

/* ------------------------------------------------------------- anexos */
.cw-anexos{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e2)}
.cw-anexo{display:inline-flex;align-items:center;gap:var(--e2);
  padding:6px var(--e3);border:1px solid var(--borda);border-radius:var(--r-md);
  background:var(--bg-campo);color:var(--tx1);font-size:12px;
  text-decoration:none;max-width:320px}
.cw-anexo:hover{border-color:var(--azul-borda)}
.cw-anexo-ico{color:var(--tx3)}
.cw-anexo-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-anexo-img{display:block;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--borda);max-width:340px;line-height:0}
.cw-anexo-img img{max-width:100%;height:auto;display:block}
.cw-anexo-img:hover{border-color:var(--azul-borda)}

/* --------------------------------------------------------- compositor */
.cw-novas{position:relative;height:0}
.cw-novas button{position:absolute;bottom:var(--e2);left:50%;
  transform:translateX(-50%);background:var(--azul);color:var(--sobre-acento);
  border:none;border-radius:var(--r-pill);padding:5px var(--e4);
  font-size:12px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);white-space:nowrap}
.cw-digitando{height:16px;padding:0 var(--e5);font-size:11.5px;
  color:var(--tx3);flex:none}

.cw-compositor{flex:none;padding:0 var(--e5) var(--e4);position:relative}
.cw-compositor.arrastando .cw-campo{border-color:var(--azul);
  background:var(--azul-fraco)}
.cw-campo{display:flex;align-items:flex-end;gap:var(--e2);
  border:1px solid var(--borda);border-radius:var(--r-lg);
  background:var(--bg-campo);padding:var(--e2) var(--e2) var(--e2) var(--e3);
  transition:border-color .12s}
.cw-campo:focus-within{border-color:var(--azul-borda);
  box-shadow:0 0 0 3px var(--azul-fraco)}
.cw-campo textarea{flex:1;background:none;border:none;resize:none;
  color:var(--tx1);font-size:13.5px;line-height:1.5;padding:6px 0;
  font-family:inherit;max-height:260px;outline:none}
.cw-campo textarea::placeholder{color:var(--tx3)}
.cw-compositor-acoes{display:flex;align-items:center;gap:2px;flex:none}
.cw-enviar{width:30px;height:30px;border-radius:var(--r-md);border:none;
  background:var(--azul);color:var(--sobre-acento);cursor:pointer;font-size:13px}
.cw-enviar:hover{background:var(--azul-claro)}
.cw-dica{margin:6px 0 0;font-size:11px;text-align:right;color:var(--tx3)}
.cw-dica b{color:var(--tx2);font-weight:600}
.cw-somente-leitura{flex:none;padding:var(--e4) var(--e5);
  border-top:1px solid var(--borda-sutil);color:var(--tx3);font-size:12.5px}

.cw-anexos-pendentes{display:flex;flex-wrap:wrap;gap:var(--e2);
  margin-bottom:var(--e2)}
.cw-pendente{display:inline-flex;align-items:center;gap:var(--e2);
  padding:4px var(--e3);border:1px solid var(--borda);
  border-radius:var(--r-pill);background:var(--bg-surface);font-size:11.5px;
  color:var(--tx2)}
.cw-pendente.carregando{opacity:.6}

.cw-msg.cw-enviando{opacity:.55}
.cw-msg.cw-enviando .cw-msg-corpo{white-space:pre-wrap}
.cw-msg.falhou{opacity:1}
.cw-msg-status{font-size:11px;color:var(--tx3);margin-top:2px}
.cw-msg.falhou .cw-msg-status{color:var(--erro)}
.cw-retentar{background:none;border:none;color:var(--azul-claro);
  cursor:pointer;font-size:11px;text-decoration:underline;padding:0}

/* ------------------------------------------------------- autocomplete */
.cw-auto{position:absolute;bottom:calc(100% - var(--e2));left:var(--e5);
  right:var(--e5);max-height:280px;overflow-y:auto;z-index:30;
  background:var(--bg-elevated);border:1px solid var(--borda);
  border-radius:var(--r-md);box-shadow:var(--sombra-overlay);padding:4px}
.cw-auto-item{display:flex;align-items:center;gap:var(--e2);width:100%;
  background:none;border:none;text-align:left;padding:6px var(--e3);
  border-radius:var(--r-sm);cursor:pointer;color:var(--tx1);font-size:13px}
.cw-auto-item:hover,.cw-auto-item.on{background:var(--bg-ativo)}
.cw-auto-rotulo{flex:none;font-weight:500}
.cw-auto-item .ajuda{margin-left:auto;font-size:11.5px}

/* ------------------------------------------------------ painel direito */
.cw-ctx{background:var(--bg-trilho);border-left:1px solid var(--borda-sutil);
  display:flex;flex-direction:column;min-height:0}
.cw:not(.com-ctx) .cw-ctx{display:none}
.cw-ctx-topo{display:flex;align-items:center;justify-content:space-between;
  height:var(--cw-cab);padding:0 var(--e4);flex:none;
  border-bottom:1px solid var(--borda-sutil)}
.cw-ctx-topo b{font-size:13px}
.cw-ctx-corpo{flex:1;overflow-y:auto;padding:var(--e4)}
.cw-ctx-prop{margin:0 0 var(--e4);font-size:12.5px;color:var(--tx2);
  line-height:1.5}
.cw-ctx-secao{margin-bottom:var(--e5)}
.cw-ctx-secao h3{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx3);margin:0 0 var(--e2);display:inline-flex;gap:var(--e2);
  align-items:baseline}
.cw-ctx-secao summary{cursor:pointer;list-style:none}
.cw-ctx-secao summary::-webkit-details-marker{display:none}
.cw-ctx-secao summary h3{display:inline-flex}
.cw-membros,.cw-arquivos,.cw-fixadas,.cw-ctx-itens{list-style:none;margin:0;
  padding:0;display:flex;flex-direction:column;gap:5px}
.cw-membros li{display:flex;align-items:center;gap:var(--e2);font-size:12.5px;
  color:var(--tx2)}
.cw-arquivos li,.cw-fixadas li{font-size:12px;display:flex;
  flex-direction:column;gap:1px}
.cw-arquivos a,.cw-fixadas a{color:var(--tx1);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-arquivos a:hover,.cw-fixadas a:hover{color:var(--azul-claro)}
/* O `.par` global tem rótulo de 150px, que é largo demais para uma coluna
   de 316px: o valor sobrava para fora e `10.21.30.2:22` aparecia cortado
   como `10.21.30.2:2`. Aqui o rótulo encolhe e o valor pode quebrar. */
.cw-ctx .par{grid-template-columns:88px minmax(0,1fr);font-size:12.5px}
.cw-ctx .par dt{font-size:11.5px}
.cw-ctx .par dd{overflow-wrap:anywhere;min-width:0}
.cw-ctx-estado{display:flex;align-items:center;gap:var(--e2);
  font-size:12.5px;color:var(--tx2);margin-bottom:var(--e3)}
.cw-ctx-sessoes{margin:var(--e4) 0}
.cw-ctx-sessoes h3{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx3);margin:0 0 var(--e2)}
.cw-sessao-viva{display:flex;align-items:center;gap:var(--e2);font-size:12px;
  color:var(--alerta);padding:4px 0}
.cw-ponto-vivo{width:7px;height:7px;border-radius:50%;background:var(--alerta);
  flex:none;animation:cw-pulso 2s ease-in-out infinite}
@keyframes cw-pulso{0%,100%{opacity:1}50%{opacity:.35}}
.cw-ctx-contadores{display:flex;gap:var(--e2);flex-wrap:wrap;
  margin:var(--e3) 0}
.cw-ctx-acoes{display:flex;flex-direction:column;gap:var(--e2);
  margin:var(--e4) 0 var(--e3)}
.cw-ctx-acoes .botao{width:100%;justify-content:center}
.cw-admin form{margin-top:var(--e3);display:flex;flex-direction:column;
  gap:var(--e1)}
.cw-admin label{font-size:11.5px;color:var(--tx2);margin-top:var(--e2)}
.cw-admin input,.cw-admin select{width:100%}
.cw-eventos{display:flex;flex-direction:column;gap:2px;margin:var(--e2) 0;
  max-height:230px;overflow-y:auto}
.cw-check-linha{display:flex;align-items:flex-start;gap:var(--e2);
  font-size:12px;color:var(--tx2);cursor:pointer;padding:2px 0}
.cw-check-linha input{margin-top:2px;flex:none;width:auto}

/* ------------------------------------------------------------- thread */
.cw-thread{background:var(--bg-trilho);border-left:1px solid var(--borda-sutil);
  display:flex;flex-direction:column;min-height:0;
  animation:cw-entra .14s ease-out}
@keyframes cw-entra{from{opacity:0;transform:translateX(12px)}
  to{opacity:1;transform:none}}
.cw-thread[hidden]{display:none}
.cw-thread-topo{display:flex;align-items:center;justify-content:space-between;
  height:var(--cw-cab);padding:0 var(--e4);flex:none;
  border-bottom:1px solid var(--borda-sutil)}
.cw-thread-corpo{flex:1;overflow-y:auto;padding:var(--e3) 0}
.cw-thread-corpo .cw-msg{padding-left:var(--e4);padding-right:var(--e4)}
.cw-thread-corpo .cw-msg-acoes{right:var(--e4)}
.cw-thread-sep{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e2) var(--e4);color:var(--tx3);font-size:11px}
.cw-thread-sep::after{content:"";flex:1;height:1px;background:var(--borda-sutil)}
.cw-compositor-thread{padding:0 var(--e4) var(--e4)}

/* --------------------------------------------------------- páginas cw */
.cw-pagina .cw-corpo-rolagem{flex:1;overflow-y:auto;padding:var(--e5);
  max-width:900px;width:100%}
.cw-secao-titulo{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx3);margin:var(--e5) 0 var(--e2)}
.cw-lista-msgs{display:flex;flex-direction:column;gap:var(--e3)}
.cw-achado{border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  background:var(--bg-surface);overflow:hidden}
.cw-achado-canal{display:block;padding:6px var(--e4);font-size:11.5px;
  color:var(--tx2);text-decoration:none;background:var(--bg-trilho);
  border-bottom:1px solid var(--borda-sutil)}
.cw-achado-canal:hover{color:var(--azul-claro)}
.cw-achado .cw-msg{padding:var(--e3) var(--e4)}
.cw-achado .cw-msg:hover{background:transparent}
.cw-achado .cw-msg-acoes{display:none}

.cw-busca-form{display:flex;flex-direction:column;gap:var(--e3);
  margin-bottom:var(--e5)}
.cw-busca-form>input{font-size:15px;height:42px}
.cw-busca-filtros{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.cw-busca-filtros input,.cw-busca-filtros select{max-width:190px}

.cw-mencoes{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--e2)}
.cw-mencoes li a{display:block;padding:var(--e3) var(--e4);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  background:var(--bg-surface);text-decoration:none;color:var(--tx1)}
.cw-mencoes li a:hover{border-color:var(--borda-forte)}
.cw-mencoes li.nova a{border-left:3px solid var(--azul)}
.cw-mencao-cab{display:flex;align-items:baseline;gap:var(--e2);
  font-size:12px;color:var(--tx2);flex-wrap:wrap}
.cw-mencao-texto{margin-top:4px;font-size:13px;color:var(--tx1)}

.cw-atividade{list-style:none;margin:0;padding:0}
.cw-atividade li a{display:flex;align-items:center;gap:var(--e3);
  padding:var(--e3) var(--e4);text-decoration:none;color:var(--tx1);
  border-bottom:1px solid var(--borda-sutil)}
.cw-atividade li:last-child a{border-bottom:none}
.cw-atividade li a:hover{background:var(--bg-hover)}
.cw-ativ-icone{width:22px;height:22px;border-radius:var(--r-sm);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-hover);color:var(--tx2);font-size:12px}
.cw-ativ-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cw-ativ-texto b{font-size:13px;font-weight:500}
.cw-ativ-texto .ajuda{overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cw-ativ-hora{flex:none;font-variant-numeric:tabular-nums}

.cw-tarefas{list-style:none;margin:0;padding:0}
.cw-tarefa{display:flex;align-items:flex-start;gap:var(--e3);
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--borda-sutil);
  position:relative}
.cw-tarefa:last-child{border-bottom:none}
.cw-tarefa:hover{background:var(--bg-hover)}
.cw-tarefa::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:transparent}
.cw-p-critica::before{background:var(--erro)}
.cw-p-alta::before{background:var(--alerta)}
.cw-p-media::before{background:var(--borda-forte)}
.cw-tarefa.feita{opacity:.5}
.cw-tarefa.feita .cw-tarefa-titulo{text-decoration:line-through}
.cw-check{width:18px;height:18px;border-radius:50%;flex:none;margin-top:1px;
  border:1.5px solid var(--borda-forte);background:none;cursor:pointer;
  color:var(--ok);font-size:11px;display:flex;align-items:center;
  justify-content:center}
.cw-check:hover{border-color:var(--ok)}
.cw-tarefa-corpo{flex:1;min-width:0}
.cw-tarefa-topo{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.cw-tarefa-titulo{font-size:13.5px;color:var(--tx1)}
.cw-tarefa-meta{font-size:11.5px;margin-top:2px}
.cw-selo-critica{background:var(--erro-fraco);color:var(--erro);
  border-color:var(--erro-borda)}
.cw-selo-alta{background:var(--alerta-fraco);color:var(--alerta);
  border-color:var(--alerta-borda)}
.cw-selo-media,.cw-selo-baixa{background:var(--bg-hover);color:var(--tx3)}

.cw-handoff-cartao .corpo{padding:var(--e4)}
.cw-handoff-linha{display:flex;align-items:center;gap:var(--e3);
  flex-wrap:wrap;font-size:14px}
.cw-handoff-itens{list-style:none;margin:0;padding:0}
.cw-handoff-itens li{display:flex;align-items:flex-start;gap:var(--e3);
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--borda-sutil);
  font-size:13px}
.cw-handoff-itens li:last-child{border-bottom:none}
.cw-handoff-itens>li>div{flex:1;min-width:0}
.cw-h-prio{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px;
  background:var(--borda-forte)}
.cw-p-critica .cw-h-prio{background:var(--erro)}
.cw-p-alta .cw-h-prio{background:var(--alerta)}
.cw-p-baixa .cw-h-prio{background:var(--ok)}
.cw-tabela{width:100%;border-collapse:collapse}
.cw-tabela th{text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tx3);padding:var(--e2) var(--e4);
  border-bottom:1px solid var(--borda-sutil);font-weight:600}
.cw-tabela td{padding:var(--e2) var(--e4);font-size:13px;
  border-bottom:1px solid var(--borda-sutil)}
.cw-notas-achadas{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--e2)}
.cw-notas-achadas li{padding:var(--e3) var(--e4);font-size:13px;
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  background:var(--bg-surface);border-left:3px solid var(--alerta)}

.cw-linha-form{display:flex;gap:var(--e2);align-items:flex-end;flex-wrap:wrap}
.cw-linha-form>div{flex:1;min-width:130px}
.cw-linha-form>div input,.cw-linha-form>div select{width:100%}
/* Campo SOLTO na linha (sem o <div> em volta) cresce, em vez de ocupar
   100% e forçar quebra. Com `width:100%` os três campos de "Para quem"
   empilhavam um por linha e o botão sobrava sozinho embaixo. */
.cw-linha-form>input,.cw-linha-form>select{flex:1;min-width:160px;width:auto}
.cw-linha-form>button{flex:none}

/* --------------------------------------------------------- diálogos */
.cw-dialogo{border:1px solid var(--borda);border-radius:var(--r-lg);
  background:var(--bg-elevated);color:var(--tx1);padding:0;
  width:min(440px,calc(100vw - 32px));box-shadow:var(--sombra-modal)}
.cw-dialogo::backdrop{background:rgba(4,10,18,.66)}
.cw-dialogo form{padding:var(--e5);display:flex;flex-direction:column;
  gap:var(--e1)}
.cw-dialogo h2{margin:0 0 var(--e3);font-size:15px}
.cw-dialogo label{font-size:11.5px;color:var(--tx2);margin-top:var(--e2)}
.cw-dialogo input,.cw-dialogo select,.cw-dialogo textarea{width:100%}
.cw-dlg-pe{display:flex;justify-content:flex-end;gap:var(--e2);
  margin-top:var(--e4)}

/* ------------------------------------------------------ toasts e resto */
.cw-toasts{position:fixed;bottom:var(--e5);left:50%;
  transform:translateX(-50%);z-index:200;display:flex;
  flex-direction:column;gap:var(--e2);pointer-events:none}
.cw-toast{background:var(--bg-elevated);border:1px solid var(--borda);
  border-radius:var(--r-md);padding:var(--e2) var(--e4);font-size:12.5px;
  color:var(--tx1);box-shadow:var(--sombra-pop);
  animation:cw-sobe .16s ease-out;white-space:nowrap}
.cw-toast.erro{border-color:var(--erro-borda);color:var(--erro)}
.cw-toast.some{opacity:0;transition:opacity .4s}
@keyframes cw-sobe{from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}}

.cw-reconectando{position:fixed;bottom:var(--e4);left:var(--e4);z-index:200;
  background:var(--alerta-fraco);border:1px solid var(--alerta-borda);
  color:var(--alerta);border-radius:var(--r-pill);
  padding:4px var(--e4);font-size:11.5px}

.cw-esqueleto{height:56px;border-radius:var(--r-md);margin:var(--e2) 0;
  background:linear-gradient(90deg,var(--bg-surface) 0%,
    var(--bg-hover) 50%,var(--bg-surface) 100%);
  background-size:200% 100%;animation:cw-brilho 1.2s linear infinite}
@keyframes cw-brilho{from{background-position:200% 0}to{background-position:-200% 0}}

.cw-editor{margin-top:var(--e2)}
.cw-editor textarea{width:100%;font-family:inherit;font-size:13.5px;
  line-height:1.5;resize:vertical}
.cw-editor-pe{display:flex;gap:var(--e2);margin-top:var(--e2)}

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

/* -------------------------------------------- presença operacional */
.aviso-sessao-viva{display:flex;align-items:center;gap:var(--e2);
  padding:var(--e2) var(--e4);border-radius:var(--r-md);font-size:12.5px;
  background:var(--alerta-fraco);border:1px solid var(--alerta-borda);
  color:var(--alerta);margin:var(--e3) 0}

/* ----------------------------------------------------------- telas menores */
@media (max-width:1400px){
  .cw.com-ctx{grid-template-columns:var(--cw-lado) minmax(0,1fr) 280px}
}
@media (max-width:1180px){
  /* Painel direito e thread viram gaveta: em 1366x768 três colunas fixas
     deixariam a conversa com menos de 500px, que é onde um bloco de CLI
     começa a quebrar linha e a saída fica ilegível. */
  .cw.com-ctx,.cw.com-thread,.cw.com-ctx.com-thread{
    grid-template-columns:var(--cw-lado) minmax(0,1fr)}
  .cw-ctx,.cw-thread{position:fixed;top:var(--h-topo);right:0;bottom:0;
    width:min(400px,92vw);z-index:60;box-shadow:-12px 0 40px rgba(0,0,0,.55)}
  .cw.com-ctx .cw-ctx{display:flex}
}
/* Em tela estreita a sidebar vira gaveta: fixa, fechada por padrão, aberta
   pelo botão da topbar. O conteúdo ganha a largura inteira. */
@media (max-width:940px){
  .sb{position:fixed;left:0;top:0;bottom:0;height:auto;z-index:75;
    width:var(--sb-w);transform:translateX(-100%);
    transition:transform var(--t-medio) ease;
    box-shadow:12px 0 40px rgba(0,0,0,.5)}
  html.sb-mini .sb{width:var(--sb-w)}
  html.sb-aberta .sb{transform:none}
  html.sb-mini .sb-nome{display:block}
  html.sb-mini .sb-item{justify-content:flex-start;padding:0 10px;height:32px}
  html.sb-mini .sb-item span{display:inline}
  html.sb-mini .sb-grupo{margin:var(--e4) 0 2px;padding:0 10px;height:auto;
    color:var(--tx3);background:none;overflow:visible}
  html.sb-mini .sb .sb-item::after{display:none}
  .sb-pe{display:none}
  .sb-veu[hidden]{display:none}
  .sb-veu{position:fixed;inset:0;z-index:70;background:rgba(3,5,9,.55)}
  .topo-abre-sb{display:inline-flex}
  .topo{padding-left:var(--e3)}
  .topo-busca{min-width:0}
  .topo-busca span,.topo-busca .tecla{display:none}
  .topo-shell .tecla,.shell-dica,.shell-onde{display:none}
  .eu span{display:none}
}

/* Botão da gaveta de filtros: escondido por padrão e revelado só na media
   query estreita, logo abaixo. A regra base PRECISA vir antes — mesma
   especificidade, e a última vence: com ela depois, o `display:none` anulava
   o `inline-flex` da media query e o botão nunca aparecia. */
.abre-filtros{display:none;align-items:center;gap:6px}
.abre-filtros .n{background:var(--azul-fraco);color:var(--tx1);border-radius:999px;
  padding:0 6px;font-size:10px;font-weight:600}

/* ------------------------------------------------ trilho em tela estreita
   Abaixo de 940px o grid de duas colunas empilhava, e o trilho ia PARA CIMA
   do conteúdo: medido no QA, 1112px de altura em tablet (1,4 tela de rolagem
   antes do primeiro equipamento) e 2,0 telas em mobile. A lista de
   equipamentos ficava inalcançável justamente no aparelho do plantão
   (QA UI-002).

   Aqui ele vira gaveta: sai do fluxo, entra por cima quando o operador pede,
   e o conteúdo começa no topo. Mesmo padrão da sidebar de navegação logo
   acima — o operador já conhece o gesto. */
@media (max-width:940px){
  .tela{grid-template-columns:minmax(0,1fr)}
  .tela.recolhido{grid-template-columns:minmax(0,1fr)}
  .trilho{position:fixed;left:0;top:var(--h-topo);bottom:0;height:auto;
    z-index:74;width:min(320px,86vw);transform:translateX(-100%);
    transition:transform var(--t-medio) ease;
    box-shadow:12px 0 40px rgba(0,0,0,.5)}
  html.filtros-abertos .trilho{transform:none}
  .filtros-veu{position:fixed;inset:0;z-index:73;background:rgba(3,5,9,.55)}
  .filtros-veu[hidden]{display:none}
  /* O botão que abre a gaveta só existe aqui; no desktop o trilho está à
     vista e um botão para revelá-lo seria um clique inventado. */
  .abre-filtros{display:inline-flex}
  .tela>.conteudo{padding:var(--e4) var(--e3) 80px}
}
html.redimensionando .trilho{transition:none}

/* Abaixo de 640px a tabela de dez colunas não é o formato certo: vira cartão
   empilhado. Hostname e estado na primeira linha — que é o que se procura no
   celular durante um plantão —, endereço e site na segunda, ações no fim. */
@media (max-width:640px){
  .tabela-envolve table,.tabela-envolve thead,.tabela-envolve tbody,
  .tabela-envolve tr,.tabela-envolve td,.tabela-envolve th{display:block}
  .tabela-envolve thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0)}
  .tabela-envolve tbody tr{position:relative;padding:var(--e3);
    border-bottom:1px solid var(--borda-sutil)}
  .tabela-envolve tbody td,.tabela-envolve tbody th{border:0;height:auto;
    padding:1px 0;text-align:left}
  .tabela-envolve th.cel-host{font-size:14px;font-weight:600;padding-bottom:4px}
  /* A coluna de ações deixa de ser sticky: em cartão ela é um canto, não uma
     coluna, e sticky sobre um bloco não tem a que se prender. */
  .tabela-envolve .col-acoes{position:absolute;top:var(--e3);right:var(--e3);
    width:auto;background:none}
  .tabela-envolve .col-acoes::before{display:none}
  .tabela-envolve .col-marca{position:absolute;top:var(--e3);left:auto;
    right:70px;width:auto}
  .tabela-envolve .col-tags,.tabela-envolve .col-endereco,
  .tabela-envolve .col-coleta{display:block}
  .paginacao{gap:var(--e2)}
  .pag-tamanho{margin-left:0;width:100%}
}

/* Redimensionar não é interagir: ao cruzar o ponto de quebra, a sidebar
   reexecutava a transição de `translateX` por cima do conteúdo — o estado
   final estava certo, era só um piscar. O JS marca a raiz enquanto a
   janela muda de tamanho, e aqui a animação some. */
html.redimensionando .sb,
html.redimensionando .sb *{transition:none!important}

/* Botão e véu da gaveta: existem só na faixa estreita. */
.cw-gaveta-abre{display:none;position:fixed;top:calc(var(--h-topo) + var(--e2));
  left:var(--e3);z-index:80;width:32px;height:32px;border-radius:var(--r-md);
  background:var(--bg-surface);border:1px solid var(--borda);
  color:var(--tx1);cursor:pointer;font-size:14px;line-height:1}
.cw-veu{display:none}

@media (max-width:860px){
  .cw,.cw.com-ctx,.cw.com-thread{grid-template-columns:1fr}
  .cw-gaveta-abre{display:inline-flex;align-items:center;justify-content:center}
  .cw-veu:not([hidden]){display:block;position:fixed;inset:var(--h-topo) 0 0 0;
    z-index:65;background:rgba(4,10,18,.6)}
  .cw-lado{position:fixed;top:var(--h-topo);left:0;bottom:0;
    width:min(280px,86vw);z-index:70;
    box-shadow:12px 0 40px rgba(0,0,0,.55);
    transform:translateX(-100%);transition:transform .16s ease-out}
  /* Fechada por padrão nesta faixa: aberta, cobria a conversa que a pessoa
     abriu. `sem-lado` é o estado do DESKTOP e não vale aqui. */
  .cw.com-lado .cw-lado{transform:none}
  .cw.sem-lado .cw-lado{display:flex}
  .cw-ctx,.cw-thread{z-index:70}
  .cw:not(.com-ctx) .cw-ctx{display:none}
  .cw-cab{padding-left:calc(var(--e5) + 34px)}
  .cw-msg{grid-template-columns:var(--cw-av) minmax(0,1fr);
    padding-left:var(--e4);padding-right:var(--e4)}
  /* Sem hover no toque, as ações precisam estar visíveis — mas não podem
     custar uma LINHA por mensagem. Empilhadas embaixo, cinco mensagens
     ocupavam a tela inteira. Ancoradas no canto do cabeçalho, aparecem
     sempre e não gastam altura nenhuma. */
  .cw-msg-acoes{position:absolute;top:var(--e1);right:var(--e3);opacity:1;
    background:none;border:none;padding:0;gap:0}
  .cw-msg-cab{padding-right:96px}
  .cw-acao{width:24px;height:22px;font-size:12px}
  .cw-compositor{padding:0 var(--e4) var(--e3)}
  .cw-dica{display:none}
  .cw-fluxo{padding-top:var(--e2)}
}

/* --------------------------------------------------------------- sino */
/* Na topbar o espaço vem do .topo-espaco; o sino só se posiciona. */
.sino-wrap{position:relative}
.sino{display:flex;align-items:center;justify-content:center;width:32px;
  height:32px;border-radius:var(--r-md);border:1px solid transparent;
  background:none;color:var(--tx2);cursor:pointer;position:relative}
.sino:hover{background:var(--bg-hover);color:var(--tx1)}
.sino svg{width:17px;height:17px}
.sino-badge{position:absolute;top:1px;right:0;min-width:15px;height:15px;
  padding:0 4px;border-radius:var(--r-pill);background:var(--erro);
  color:#fff;font-size:10px;font-weight:700;line-height:15px;
  text-align:center}
.sino-panel{position:absolute;right:0;top:calc(100% + 6px);width:360px;
  max-width:calc(100vw - 24px);background:var(--bg-elevated);
  border:1px solid var(--borda);border-radius:var(--r-lg);
  box-shadow:var(--sombra-overlay);z-index:120;overflow:hidden}
.sino-cab{display:flex;align-items:center;justify-content:space-between;
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--borda-sutil);
  font-weight:600;font-size:13px;color:var(--tx1)}
.sino-limpar{border:none;background:none;color:var(--azul);font-size:12px;
  cursor:pointer;padding:2px 4px;border-radius:var(--r-sm)}
.sino-limpar:hover{background:var(--bg-hover)}
.sino-lista{max-height:420px;overflow-y:auto}
.sino-item{display:flex;gap:var(--e3);padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--borda-sutil);text-decoration:none;
  color:var(--tx2);align-items:flex-start}
.sino-item:hover{background:var(--bg-hover)}
.sino-item.lida{opacity:.62}
.sino-item.critica .sino-ic{color:var(--erro)}
.sino-ic{flex:0 0 22px;height:22px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r-sm);
  background:var(--bg-campo);font-size:12px;color:var(--tx2)}
.sino-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  font-size:12.5px}
.sino-txt b{color:var(--tx1);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.sino-txt span{color:var(--tx3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sino-quando{flex:0 0 auto;font-size:11px;color:var(--tx3);
  padding-top:2px}
.sino-vazio{padding:var(--e6) var(--e4);text-align:center;
  color:var(--tx3);font-size:12.5px}
.sino-ver{display:block;text-align:center;padding:var(--e2) 0;
  font-size:12px;color:var(--azul);text-decoration:none;
  border-top:1px solid var(--borda-sutil)}
.sino-ver:hover{background:var(--bg-hover)}

/* -------------------------------------------------------------- toast */
.sino-toast{position:fixed;right:var(--e5);bottom:var(--e5);z-index:200;
  max-width:340px;padding:var(--e3) var(--e4);border-radius:var(--r-md);
  background:var(--bg-elevated);border:1px solid var(--borda-forte);
  color:var(--tx1);font-size:13px;box-shadow:var(--sombra-overlay)}
.sino-toast.critica{border-color:var(--erro-borda);
  background:var(--erro-fraco)}

/* ------------------------------------------------- página /notificacoes */
.notif-filtros{display:flex;gap:var(--e2);flex-wrap:wrap;
  margin-bottom:var(--e4)}
.notif-filtros .on{background:var(--bg-ativo);color:var(--tx1)}
.notif-lista{list-style:none;margin:0;padding:0;
  border:1px solid var(--borda);border-radius:var(--r-lg);
  background:var(--bg-surface);overflow:hidden}
.notif-item a{display:flex;gap:var(--e3);align-items:flex-start;
  padding:var(--e3) var(--e4);text-decoration:none;color:var(--tx2);
  border-bottom:1px solid var(--borda-sutil)}
.notif-item:last-child a{border-bottom:none}
.notif-item a:hover{background:var(--bg-hover)}
.notif-item.nova a{border-left:2px solid var(--azul)}
.notif-item.critica a{border-left:2px solid var(--erro)}
.notif-item:not(.nova) a{opacity:.68}
.notif-tipo{flex:0 0 24px;height:24px;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r-sm);
  background:var(--bg-campo);font-size:12px}
.notif-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-corpo b{color:var(--tx1);font-weight:600}
.notif-x{color:var(--tx3);font-weight:400}
.notif-texto{color:var(--tx3);font-size:12.5px}
.notif-quando{flex:0 0 auto;font-size:11.5px;color:var(--tx3);
  font-variant-numeric:tabular-nums}
.notif-prefs{display:flex;flex-direction:column;gap:0}
.notif-prefs > div{margin-top:var(--e3)}
/* Linha de opção com caixa: alvo confortável, alinhamento constante. Vale
   para qualquer formulário de preferências, não só notificações. */
.opcao-check{display:flex;align-items:center;gap:var(--e3);height:32px;
  padding:0 var(--e2);margin:0;border-radius:var(--r-sm);font-size:13px;
  color:var(--tx1);cursor:pointer}
.opcao-check:hover{background:var(--bg-hover)}
.opcao-check input{flex:none}
@media (max-width: 720px){
  .sino-panel{position:fixed;left:12px;right:12px;top:56px;width:auto}
}

/* ------------------------------------------------ cartão vivo (execução) */
.cw-exec{margin-top:var(--e2);display:flex;flex-direction:column;gap:var(--e2)}
.cw-exec-barra{height:6px;border-radius:var(--r-pill);
  background:var(--bg-campo);overflow:hidden}
.cw-exec-cheio{height:100%;border-radius:var(--r-pill);
  background:var(--azul);transition:width .6s ease}
.cw-exec-meta{display:flex;gap:var(--e3);align-items:center;font-size:12px;
  color:var(--tx2);font-variant-numeric:tabular-nums}
.cw-exec-ok{color:var(--ok)}
.cw-exec-erro{color:var(--erro)}

/* -------------------------------------------------- alarme dentro do card */
.cw-alarme{margin-top:var(--e2);display:flex;gap:var(--e3);
  align-items:center;flex-wrap:wrap;font-size:12.5px;
  padding:var(--e2) var(--e3);border-radius:var(--r-md);
  background:var(--bg-campo)}
.cw-alarme-aberto{border-left:2px solid var(--erro)}
.cw-alarme-reconhecido{border-left:2px solid var(--alerta)}
.cw-alarme-resolvido{border-left:2px solid var(--ok);opacity:.75}
.cw-alarme-estado{font-weight:600;color:var(--tx1)}
.cw-evento-critico{border-color:var(--erro-borda)}
.cw-war-sev{font-size:9px;margin-right:var(--e1)}
.cw-sev-critico{color:var(--erro)}
.cw-sev-erro{color:var(--alerta)}
.cw-sev-aviso{color:var(--alerta)}

/* Ponto de severidade — iconografia do produto, não emoji: emoji muda de
   desenho por sistema e grita numa tela que precisa ser lida em silêncio. */
.sev-ponto{display:inline-block;width:8px;height:8px;margin-right:6px;
  border-radius:50%;background:var(--tx3);vertical-align:0}
.sev-ponto.sev-critico{background:var(--erro)}
.sev-ponto.sev-erro,.sev-ponto.sev-aviso{background:var(--alerta)}
.sev-ponto.sev-ok{background:var(--ok)}
.cw-alarme-estado.sem-dono::before{content:"";display:inline-block;
  width:8px;height:8px;margin-right:6px;border-radius:50%;
  background:var(--erro)}
.mu-tipo{font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx3);align-self:center}
.mu-tipo-aviso{color:var(--alerta)}
.mu-tipo-incidente{color:var(--erro)}
.mu-tipo-pendencia{color:var(--azul)}

/* ------------------------------------------------------ tela de alarmes */
.al-lista{list-style:none;margin:0;padding:var(--e4);display:flex;
  flex-direction:column;gap:var(--e3)}
.al-item{border:1px solid var(--borda);border-radius:var(--r-lg);
  background:var(--bg-surface);padding:var(--e3) var(--e4)}
.al-sev-critico{border-left:3px solid var(--erro)}
.al-sev-erro{border-left:3px solid var(--alerta)}
.al-sev-aviso{border-left:3px solid var(--alerta)}
.al-cab{display:flex;gap:var(--e2);align-items:baseline;flex-wrap:wrap}
.al-cab b{color:var(--tx1)}
.al-sev{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--tx2)}
.al-detalhe{margin-top:var(--e1);color:var(--tx2);font-size:12.5px}
.al-meta{margin-top:var(--e2);display:flex;gap:var(--e4);flex-wrap:wrap;
  font-size:11.5px;color:var(--tx3)}
.al-ack{color:var(--tx2)}
.al-acoes{margin-top:var(--e2);display:flex;gap:var(--e2);flex-wrap:wrap}
.al-resolvido{opacity:.65}
.al-historico .al-item{padding:var(--e2) var(--e4)}

.mu-secao{margin:var(--e4) var(--e4) var(--e2);font-size:11px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--tx3)}
.mu-grade{display:grid;grid-template-columns:repeat(auto-fill,
  minmax(280px,1fr));gap:var(--e3);padding:0 var(--e4) var(--e4)}
.mu-card{border:1px solid var(--borda);border-radius:var(--r-lg);
  background:var(--bg-surface);padding:var(--e3) var(--e4);
  display:flex;flex-direction:column;gap:var(--e2)}
.mu-card.fixado{border-color:var(--borda-forte)}
.mu-aviso{border-left:3px solid var(--alerta)}
.mu-incidente{border-left:3px solid var(--erro)}
.mu-pendencia{border-left:3px solid var(--azul)}
.mu-cab{display:flex;gap:var(--e2);align-items:baseline}
.mu-cab b{color:var(--tx1);flex:1}
.mu-tipo{font-size:13px}
.mu-pin{font-size:11px}
.mu-vivo{font-size:12px;font-weight:600;color:var(--tx1);
  display:flex;gap:var(--e2);align-items:baseline}
.mu-vivo-online{color:var(--ok)}
.mu-vivo-offline{color:var(--erro)}
.mu-texto{font-size:12.5px;color:var(--tx2);white-space:pre-wrap}
.mu-pe{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;
  margin-top:auto}
.mu-menu{margin-left:auto}

.inc-lista{list-style:none;margin:0;padding:var(--e4);display:flex;
  flex-direction:column;gap:var(--e2)}
.inc-item a{display:flex;gap:var(--e3);align-items:baseline;flex-wrap:wrap;
  padding:var(--e3) var(--e4);border:1px solid var(--borda);
  border-radius:var(--r-lg);background:var(--bg-surface);
  text-decoration:none;color:var(--tx2)}
.inc-item a:hover{background:var(--bg-hover)}
.inc-sev-critico a{border-left:3px solid var(--erro)}
.inc-sev-erro a{border-left:3px solid var(--alerta)}
.inc-resolvido a{opacity:.6}
.inc-codigo{font-family:var(--mono);font-size:12px;color:var(--tx1);
  font-weight:700}
.inc-item b{color:var(--tx1)}
.inc-meta{display:flex;gap:var(--e3);flex-wrap:wrap;font-size:11.5px;
  color:var(--tx3);margin-left:auto}
.inc-war{color:var(--azul)}
.inc-estado{font-size:12px;font-weight:600;color:var(--tx2);
  margin-left:var(--e2)}
.inc-corpo{padding:var(--e4)}
.inc-grade{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
@media (max-width: 900px){.inc-grade{grid-template-columns:1fr}}
.inc-painel h2{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--tx3);margin:var(--e4) 0 var(--e2)}
.inc-painel h2:first-child{margin-top:0}
.inc-fatos{display:grid;grid-template-columns:auto 1fr;gap:var(--e1) var(--e4);
  font-size:12.5px;margin:0}
.inc-fatos dt{color:var(--tx3)}
.inc-fatos dd{margin:0;color:var(--tx1)}
.inc-desc{font-size:12.5px;color:var(--tx2);white-space:pre-wrap}
.inc-chips{display:flex;gap:var(--e2);flex-wrap:wrap}
.inc-add{display:flex;gap:var(--e2);margin-top:var(--e2)}
.inc-add input,.inc-add select{min-height:var(--h-mini);font-size:12px}
.inc-timeline{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--e2);font-size:12.5px}
.inc-timeline li{display:flex;gap:var(--e3);align-items:baseline;
  padding-left:var(--e2);border-left:2px solid var(--borda)}
.inc-timeline time{font-family:var(--mono);font-size:11px;color:var(--tx3);
  flex:0 0 38px}
.inc-timeline span{color:var(--tx2)}

/* -------------------------------------------------------- war room cab */
.cw-war-cab{padding:var(--e3) var(--e5);border-bottom:1px solid
  var(--borda);background:var(--erro-fraco)}
.cw-war-resolvido{background:var(--bg-surface);opacity:.85}
.cw-war-linha1{display:flex;gap:var(--e3);align-items:baseline;flex-wrap:wrap}
.cw-war-codigo{font-family:var(--mono);font-weight:700;font-size:13px;
  color:var(--tx1);text-decoration:none}
.cw-war-sev-tag{font-size:11px;font-weight:700;letter-spacing:.4px;
  color:var(--tx2)}
.cw-war-linha1 b{color:var(--tx1)}
.cw-war-linha2{display:flex;gap:var(--e4);align-items:center;flex-wrap:wrap;
  margin-top:var(--e1);font-size:11.5px;color:var(--tx3)}

.cw-precisa{border-left:3px solid var(--erro)}
.cw-precisa-linha,.cw-agora-linha{display:flex;gap:var(--e3);
  align-items:baseline;padding:var(--e1) 0;font-size:13px;flex-wrap:wrap}
.cw-precisa-linha a,.cw-agora-linha a{color:var(--tx1);text-decoration:none}
.cw-precisa-linha a:hover,.cw-agora-linha a:hover{text-decoration:underline}
.cw-agora{display:flex;flex-direction:column}

.menu-corpo.pop-fixa{position:fixed;left:0;top:0;right:auto;z-index:80;
  overflow:auto;overscroll-behavior:contain}

.cw-bot-cartao{margin-bottom:var(--e5)}
.cw-bot-cab{display:flex;align-items:center;gap:var(--e3);
  margin-bottom:var(--e4)}
.cw-bot-cab>div{flex:1;min-width:0}
.cw-bot-avatar{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-md);flex:0 0 36px;
  background:var(--azul-fraco);color:var(--azul);font-size:11px;
  font-weight:700;letter-spacing:.04em}
.cw-bot-fatos{display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--e5);row-gap:var(--e1);align-items:baseline}
.cw-bot-fatos dt{margin:0;font-size:11px;color:var(--tx3)}
.cw-bot-fatos dd{margin:0;font-size:12.5px;color:var(--tx1)}
.cw-bot-atividade{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--e1);font-size:12.5px}
.cw-bot-atividade li{display:flex;gap:var(--e3);align-items:baseline;
  min-width:0}
.cw-bot-atividade time{flex:0 0 auto;font-size:11px;color:var(--tx3)}
.cw-bot-sala{flex:0 0 auto;color:var(--tx2)}
.cw-bot-texto{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--tx2)}
.cw-bot-texto:hover{color:var(--tx1);text-decoration:none}

.cw-quadro{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:var(--e3);align-items:start}
.cw-coluna{background:var(--bg-trilho);border:1px solid var(--borda-sutil);
  border-radius:var(--r-lg);padding:var(--e2);min-height:180px}
.cw-coluna.recebe{border-color:var(--azul-borda);background:var(--azul-fraco)}
.cw-coluna-titulo{display:flex;align-items:center;gap:var(--e2);
  margin:0 0 var(--e2);padding:var(--e1) var(--e2);font-size:10.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3)}
.cw-coluna-n{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--bg-hover);color:var(--tx3);font-size:10.5px;
  font-variant-numeric:tabular-nums}
.cw-coluna-corpo{display:flex;flex-direction:column;gap:var(--e2);
  min-height:60px}
.cw-postit{position:relative;padding:var(--e2) var(--e3);cursor:grab;
  background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-left:3px solid var(--tx3);border-radius:var(--r-md);
  box-shadow:var(--sombra-pop)}
.cw-postit:hover{border-color:var(--borda-forte);
  border-left-color:var(--tx2)}
.cw-postit.arrastando{opacity:.45;cursor:grabbing}
.cw-postit b{display:block;font-size:12.5px;font-weight:600;
  color:var(--tx1);line-height:1.35}
.cw-postit-meta{display:flex;flex-wrap:wrap;gap:var(--e2);
  margin-top:var(--e1);font-size:11px;color:var(--tx3)}
.cw-postit-vencida{color:var(--erro);font-weight:600}
.cw-postit.cw-p-critica{border-left-color:var(--erro)}
.cw-postit.cw-p-alta{border-left-color:var(--alerta)}
.cw-postit.cw-p-media{border-left-color:var(--azul)}
.cw-postit.cw-p-baixa{border-left-color:var(--tx3)}
.cw-ativ-links{display:flex;gap:var(--e3);margin-top:var(--e2);
  font-size:12px}
@media (max-width:1100px){.cw-quadro{grid-template-columns:1fr 1fr}}

.bib-busca input{height:var(--h-mini);font-size:12.5px;width:180px}
.bib-texto{flex:1;font-size:12.5px;color:var(--tx1);white-space:pre-wrap;
  overflow-wrap:anywhere}

.bib-texto p{margin:0 0 var(--e2)}
.bib-texto p:last-child{margin-bottom:0}
.bib-texto pre{margin:var(--e2) 0;padding:var(--e2);border-radius:var(--r-sm);
  background:var(--bg-app);font-size:11.5px;overflow:auto}
.bib-texto code{font-family:var(--mono);font-size:11.5px}
.bib-anexos{display:flex;flex-wrap:wrap;gap:var(--e2)}
.bib-anexo{display:inline-flex;align-items:center;gap:var(--e2);
  padding:var(--e1) var(--e2);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md);font-size:11.5px;color:var(--tx2);
  text-decoration:none;max-width:100%;overflow:hidden}
.bib-anexo:hover{border-color:var(--borda-forte);color:var(--tx1);
  text-decoration:none}
.bib-conversa{display:flex;flex-direction:column;gap:var(--e2);
  padding-top:var(--e2);border-top:1px solid var(--borda-sutil)}
.bib-comentario{font-size:12px;color:var(--tx2)}
.bib-comentario-cab{display:flex;align-items:baseline;gap:var(--e2)}
.bib-comentario-cab b{font-size:11.5px;color:var(--tx1)}
.bib-comentario-cab form{display:inline;margin-left:auto}
.bib-comentario-cab .perigo{background:none;border:none;padding:0;
  cursor:pointer;color:var(--tx3);font-size:12px}
.bib-comentario-cab .perigo:hover{color:var(--erro)}
.bib-comentario-texto{display:block;white-space:pre-wrap;
  overflow-wrap:anywhere}
.bib-comentar-form{display:flex;gap:var(--e2)}
.bib-comentar-form input[name=texto]{flex:1;height:var(--h-mini);
  font-size:12px}
.bib-anexo-form{display:flex;gap:var(--e2);align-items:center;
  padding-top:var(--e2);border-top:1px dashed var(--borda-sutil)}
.bib-anexo-form input[type=file]{font-size:11.5px;color:var(--tx3)}


.bib-ic{width:13px;height:13px;flex:none;vertical-align:-2px}
.bib-cabeca{flex-wrap:wrap;align-items:flex-start;gap:var(--e3)}
.bib-busca input{height:var(--h-mini);font-size:12.5px;width:220px;
  max-width:100%}
.bib-menu>summary{display:inline-flex;align-items:center;
  justify-content:center;width:var(--h-controle);padding:0}
.bib-menu .menu-corpo{right:0;left:auto}
.bib-menu .menu-corpo form{display:block}
.bib-menu .menu-corpo button{display:block;width:100%;text-align:left;
  padding:var(--e2) var(--e3);border:none;background:none;
  font-family:inherit;font-size:12.5px;color:var(--tx1);cursor:pointer}
.bib-menu .menu-corpo button:hover{background:var(--bg-hover)}
.bib-menu .menu-corpo button.perigo{color:var(--erro)}

/* diálogo "Compartilhar documento" */
.bib-dlg-share{width:min(420px,92vw)}
.bib-share-corpo{padding:var(--e5);display:flex;flex-direction:column;gap:var(--e3)}
.bib-share-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e2)}
.bib-share-cab h2{margin:0;font-size:15px}
.bib-share-lista{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:2px;max-height:min(46vh,360px);overflow:auto}
.bib-share-canal{display:flex;align-items:center;gap:var(--e2);width:100%;
  text-align:left;padding:var(--e2) var(--e3);border:0;border-radius:var(--r);
  background:transparent;color:var(--tx1);font:inherit;cursor:pointer}
.bib-share-canal:hover{background:var(--bg-hover)}
.bib-share-canal:disabled{cursor:default;color:var(--ok,var(--azul));opacity:.9}
.bib-share-tipo{flex:none;width:18px;color:var(--tx3);text-align:center}
.bib-share-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bib-share-status{margin:0;display:flex;align-items:center;gap:var(--e2);min-height:18px}
.bib-share-status.ok{color:var(--sucesso,var(--tx2))}
.bib-share-status.erro{color:var(--erro)}

/* índice de tópicos + corpo */
.bib-layout{display:grid;grid-template-columns:216px minmax(0,1fr);
  gap:var(--e6);align-items:start}
.bib-indice{position:sticky;top:calc(var(--h-topo) + var(--e3));
  display:flex;flex-direction:column;gap:2px;max-height:calc(100vh -
  var(--h-topo) - var(--e6));overflow:auto;min-width:0}
.bib-indice-titulo{margin:var(--e3) 0 var(--e1);font-size:10.5px;
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:var(--tx3)}
.bib-indice-item{display:flex;align-items:center;gap:var(--e2);
  padding:6px var(--e2);border-radius:var(--r-sm);font-size:12.5px;
  color:var(--tx2);text-decoration:none;overflow-wrap:anywhere;
  min-width:0}
.bib-indice-item .cw-coluna-n{margin-left:auto;flex:none}
.bib-indice-item:hover{background:var(--bg-hover);color:var(--tx1);
  text-decoration:none}
.bib-indice-item.on{background:var(--bg-ativo);color:var(--tx1);
  font-weight:500}
.bib-corpo{min-width:0}

.bib-trilho{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--e3);margin-bottom:var(--e4)}
.bib-chips{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e2);
  min-width:0}
.bib-chips .chip{overflow-wrap:anywhere;max-width:100%}
.bib-conta{white-space:nowrap}
.bib-ordena{display:flex;align-items:center;gap:var(--e2)}
.bib-ordena select{height:var(--h-mini);font-size:12px;padding:0 var(--e2)}
.bib-ordena label{margin:0}

/* 268px é o menor cartão que ainda comporta título de duas linhas mais
   resumo de duas. Medido contra a largura REAL do corpo (a tela menos a
   sidebar, o índice de tópicos e os respiros): dá 3 colunas de 1366 para
   cima e 4 em 2560 — antes eram 3 fixas em qualquer largura, e num
   monitor de 2560 sobravam 1.500px de nada. */
.bib-grade{display:grid;grid-template-columns:repeat(auto-fill,
  minmax(268px,1fr));gap:var(--e3)}
.bib-card{position:relative;display:flex;flex-direction:column;gap:var(--e2);
  min-width:0;padding:var(--e4);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-lg);
  color:inherit;text-decoration:none}
.bib-card:hover{border-color:var(--borda-forte);text-decoration:none;
  background:var(--bg-hover)}
.bib-card.fixada{border-color:var(--alerta-borda)}
.bib-card-topo{display:flex;align-items:flex-start;gap:var(--e2);
  min-width:0}
.bib-card-titulo{flex:1;min-width:0;font-size:13.5px;font-weight:600;
  color:var(--tx1);line-height:1.35;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.bib-card-fav{color:var(--alerta);flex:none}
.bib-pino{position:static;color:var(--alerta);flex:none}
.bib-card-resumo{font-size:12px;color:var(--tx2);line-height:1.5;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.bib-card-meta{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e2);margin-top:auto;font-size:11.5px;color:var(--tx2);
  min-width:0}
.bib-card-topico{flex:none;max-width:45%;padding:1px var(--e2);
  border:1px solid var(--borda);border-radius:var(--r-pill);
  font-size:11px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bib-card-sinais{display:flex;align-items:center;gap:4px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bib-tabela td,.bib-tabela th{vertical-align:middle}
.bib-sinais-cel{display:flex;align-items:center;gap:var(--e2);
  color:var(--tx2);font-size:11.5px}
.bib-paginas{display:flex;align-items:center;justify-content:center;
  gap:var(--e3);margin-top:var(--e6)}
.vazio-acoes{display:flex;justify-content:center;flex-wrap:wrap;
  gap:var(--e2);margin-top:var(--e4)}
.bib-vazio{padding-bottom:var(--e6)}
.bib-modelos{display:grid;grid-template-columns:repeat(auto-fit,
  minmax(210px,1fr));gap:var(--e3);margin-top:var(--e6);text-align:left}
.bib-modelo{display:flex;flex-direction:column;gap:var(--e1);
  padding:var(--e3);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  color:var(--tx1);text-decoration:none}
.bib-modelo:hover{border-color:var(--borda-forte);background:var(--bg-hover);
  text-decoration:none}
.bib-modelo .bib-ic{width:16px;height:16px;color:var(--tx3)}

/* ---------------------------------------------- página do documento */
.bib-doc-cabeca{align-items:center;flex-wrap:wrap;gap:var(--e3)}
.bib-doc-tit{min-width:0;flex:1 1 320px}
.bib-doc-cabeca h1{overflow-wrap:anywhere}
.bib-doc-cabeca .acoes-cabeca{flex-wrap:wrap}
.bib-doc-cabeca .botao.on{color:var(--alerta);border-color:var(--alerta-borda)}
.bib-so-largo{display:none}
.bib-embutido{display:inline-block;margin-left:var(--e2)}
/* O documento é o assunto: sem caixa, direto sobre o fundo, em coluna de
   leitura. A conversa continua em caixa e mais leve — antes as duas
   tinham exatamente o mesmo peso visual. */
.bib-doc{margin:var(--e5) 0 var(--e6)}
.bib-doc-texto{max-width:68ch;font-size:15px;line-height:1.7;
  color:var(--tx1);overflow-wrap:anywhere}
/* Título de DOCUMENTO, não rótulo de seção de interface. O `h2` global do
   ISM é 12px, caixa alta e espaçado — certo para "EXECUÇÕES RECENTES" num
   painel, errado para "Passo a passo" dentro de um runbook, onde ele tem
   que ler como título de texto corrido. */
.bib-doc-texto h2{margin:var(--e6) 0 var(--e3);font-size:20px;
  font-weight:650;line-height:1.3;letter-spacing:-.2px;
  text-transform:none;color:var(--tx1)}
.bib-doc-texto h3{margin:var(--e5) 0 var(--e2);font-size:16px;
  font-weight:600;line-height:1.35;letter-spacing:0;
  text-transform:none;color:var(--tx1)}
.bib-doc-texto h2:first-child,.bib-doc-texto h3:first-child{margin-top:0}
.bib-doc-texto p{margin:0 0 var(--e4)}
.bib-doc-texto ul,.bib-doc-texto ol{margin:0 0 var(--e4);
  padding-left:var(--e5)}
.bib-doc-texto li{margin-bottom:var(--e1)}
.bib-doc-texto blockquote{margin:0 0 var(--e4);padding-left:var(--e3);
  border-left:2px solid var(--borda-forte);color:var(--tx2)}
.bib-doc-texto pre{margin:var(--e4) 0;padding:var(--e3);
  border-radius:var(--r-md);background:var(--bg-app);font-size:12.5px;
  overflow:auto}
/* Bloco de comando, tabela e imagem podem sangrar além da coluna de
   leitura: são material de largura, não de prosa. */
.bib-doc-texto .cli,.bib-doc-texto .md-tabela-rolagem{max-width:min(100%,
  980px)}
.md-tabela-rolagem{overflow-x:auto;margin:0 0 var(--e4)}
.md-tabela{width:100%;border-collapse:collapse;font-size:13px}
.md-tabela th,.md-tabela td{padding:var(--e2) var(--e3);
  border:1px solid var(--borda);text-align:left;vertical-align:top;
  overflow-wrap:anywhere}
.md-tabela th{background:var(--bg-hover);font-weight:600;color:var(--tx1)}
.md-tabela td.md-c,.md-tabela th.md-c{text-align:center}
.md-tabela td.md-d,.md-tabela th.md-d{text-align:right}

.bib-anexos{display:grid;grid-template-columns:repeat(auto-fill,
  minmax(190px,1fr));gap:var(--e3)}
.bib-anexo-card{display:flex;flex-direction:column;gap:var(--e2);
  min-width:0;padding:var(--e2);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md)}
.bib-anexo-abre{display:flex;flex-direction:column;gap:2px;min-width:0;
  color:var(--tx1);text-decoration:none}
.bib-anexo-abre:hover{text-decoration:none}
.bib-anexo-nome{font-size:12.5px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.bib-tile-img{display:flex;align-items:center;justify-content:center;
  height:104px;margin-bottom:var(--e1);background:var(--bg-app);
  border-radius:var(--r-sm);overflow:hidden}
.bib-tile-img img{max-width:100%;max-height:100%;object-fit:contain}
.bib-tile-ic{display:flex;align-items:center;justify-content:center;
  height:104px;margin-bottom:var(--e1);background:var(--bg-app);
  border-radius:var(--r-sm);color:var(--tx3)}
.bib-tile-ic .bib-ic{width:28px;height:28px}
.bib-anexo-card form{margin-top:auto}

/* Histórico: painel lateral, e não uma régua de chips no rodapé. */
.bib-historico{position:fixed;top:var(--h-topo);right:0;bottom:0;
  z-index:60;width:min(380px,92vw);display:flex;flex-direction:column;
  background:var(--bg-elevated);border-left:1px solid var(--borda);
  box-shadow:var(--sombra-overlay)}
.bib-historico-cab{display:flex;align-items:center;
  justify-content:space-between;padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--borda-sutil)}
.bib-historico-lista{flex:1;overflow:auto;padding:var(--e2) var(--e4)}
.bib-versao-linha{display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--e3);padding:var(--e3) 0;
  border-bottom:1px solid var(--borda-sutil);font-size:12.5px}
.bib-versao-linha b{display:block;color:var(--tx1)}
.bib-versao-linha.on{background:var(--azul-fraco);margin:0 calc(-1 *
  var(--e2));padding-left:var(--e2);padding-right:var(--e2);
  border-radius:var(--r-sm)}
.bib-versao-acoes{display:flex;align-items:center;gap:var(--e1);
  flex-wrap:wrap;justify-content:flex-end}
.bib-dif-corpo{font-family:var(--mono);font-size:12px;line-height:1.6;
  max-height:60vh;overflow:auto}
.bib-dif-l{padding:1px var(--e2);overflow-wrap:anywhere;
  white-space:pre-wrap}
.bib-dif-l.saiu{background:var(--erro-fraco);color:var(--erro)}
.bib-dif-l.entrou{background:var(--ok-fraco);color:var(--ok)}
.bib-dif-l.igual{color:var(--tx3)}
.bib-dif-l.corte{color:var(--tx3);text-align:center;font-style:italic;
  opacity:.72;user-select:none}
.lista-simples{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--e2)}
.lista-simples li{display:flex;align-items:baseline;gap:var(--e2);
  min-width:0;font-size:13px;overflow-wrap:anywhere}
.bib-desfazer{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
.bib-lixeira-acoes{display:flex;gap:var(--e2)}
.bib-topico-form{display:flex;gap:var(--e2);align-items:center}
.bib-topico-form input{height:var(--h-mini);font-size:12px;max-width:180px}

/* ------------------------------------------------------------ editor */
/* Escrever documentação não pode parecer editar arquivo de configuração:
   fonte de interface, tamanho de leitura, entrelinha de leitura. O
   monospace fica onde deve ficar — dentro do bloco de comando. */
.bib-editor-pagina{max-width:820px}
.bib-editor-topo{display:flex;flex-wrap:wrap;gap:var(--e3)}
.bib-campo-topico{max-width:320px;flex:1 1 240px}
.bib-campo-titulo input{height:auto;padding:var(--e2) 0;border:none;
  border-bottom:1px solid var(--borda);border-radius:0;background:none;
  font-size:24px;font-weight:600;line-height:1.3}
.bib-campo-titulo input:focus{border-color:var(--azul);
  box-shadow:none;outline:none}
.bib-editor-abas{display:flex;align-items:center;gap:var(--e1);
  margin-bottom:var(--e2)}
.bib-aba{height:var(--h-mini);padding:0 var(--e3);border:none;
  background:none;border-radius:var(--r-sm);font-family:inherit;
  font-size:12.5px;color:var(--tx2);cursor:pointer}
.bib-aba:hover{background:var(--bg-hover);color:var(--tx1)}
.bib-aba.on{background:var(--bg-ativo);color:var(--tx1);font-weight:500}
.bib-contador{margin-left:auto}
.bib-contador.perto{color:var(--alerta)}
.bib-rotulo-oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
/* `.campo textarea` (dois seletores) vencia `.bib-textarea` (um) e
   devolvia o monospace de 12px — que é exatamente o que esta área não
   pode ser. Escrever documentação não pode parecer editar um arquivo de
   configuração. */
.campo textarea.bib-textarea{width:100%;font-family:var(--sans);
  font-size:15px;line-height:1.7;resize:vertical;min-height:420px}
.bib-toolbar button[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.bib-previa{min-height:420px;padding:var(--e4);
  border:1px solid var(--borda-sutil);border-top:none;
  border-radius:0 0 var(--r-md) var(--r-md);background:var(--bg-campo);
  font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.bib-rascunho{display:flex;align-items:center;gap:var(--e2);
  flex-wrap:wrap}

@media (max-width:1080px){
  .bib-layout{grid-template-columns:1fr}
  .bib-indice{position:static;flex-direction:row;flex-wrap:wrap;
    max-height:none}
  .bib-indice-titulo{width:100%;margin-top:0}
  .bib-indice-item{border:1px solid var(--borda-sutil)}
}
@media (max-width:640px){
  .bib-busca,.bib-busca input{width:100%}
  .bib-cabeca .acoes-cabeca{flex-basis:100%}
  .bib-grade{grid-template-columns:1fr}
  .bib-so-largo{display:inline}
}

/* ------------------------------------------------------- impressão */
/* Procedimento de manutenção vai impresso para o rack e anexado a
   chamado. Saía com sidebar, topo, botões e caixa de comentário — o app
   inteiro não tinha uma regra de impressão. */
@media print{
  .sb,.topo,.sb-veu,.paleta-veu,.acoes-cabeca,.voltar,.bib-historico,
  .bib-conversa-bloco,.bib-anexo-form,.bib-trilho,.bib-indice,
  .bib-paginas,.cw-toasts,.aviso{display:none!important}
  body{background:#fff;color:#000}
  .area,.pagina{margin:0;padding:0;max-width:none}
  .bib-doc-texto{max-width:none;font-size:11pt;color:#000}
  .bib-doc-texto h2{break-before:page;break-after:avoid}
  .bib-doc-texto h2:first-child{break-before:auto}
  .bib-doc-texto h3{break-after:avoid}
  .bib-doc-texto pre,.md-tabela,.bib-doc-texto li{break-inside:avoid}
  .bib-doc-texto pre{border:1px solid #ccc;background:#f6f6f6}
  .md-tabela th,.md-tabela td{border:1px solid #999}
  /* O endereço do link vai para o papel: link impresso sem destino é
     uma palavra sublinhada que não leva a lugar nenhum. */
  .bib-doc-texto a[href^="http"]::after{content:" (" attr(href) ")";
    font-size:9pt;color:#555}
}

.bib-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:var(--e1);margin-bottom:0;background:var(--bg-trilho);
  border:1px solid var(--borda-sutil);border-bottom:none;
  border-radius:var(--r-md) var(--r-md) 0 0}
.bib-toolbar button{display:inline-flex;align-items:center;gap:4px;
  height:var(--h-mini);padding:0 var(--e2);border:none;background:none;
  border-radius:var(--r-sm);font-family:inherit;font-size:12px;
  color:var(--tx2);cursor:pointer}
.bib-toolbar button:hover{background:var(--bg-hover);color:var(--tx1)}
.bib-toolbar button[disabled]{opacity:.45;cursor:not-allowed}
.bib-toolbar button.mono{font-family:var(--mono);font-size:11px}
.bib-toolbar-sep{width:1px;height:18px;margin:0 var(--e1);
  background:var(--borda)}
.bib-toolbar+ .bib-textarea{border-top-left-radius:0;
  border-top-right-radius:0}
.bib-doc-texto .md-img{display:block;margin:var(--e3) 0;
  max-width:min(100%,560px);border:1px solid var(--borda-sutil);
  border-radius:var(--r-md)}
.bib-tile-img img{min-width:16px;min-height:16px}
#comentarios .bib-comentario{padding:var(--e3) 0;margin:0;
  border-top:1px solid var(--borda-sutil)}
#comentarios .bib-comentario:first-of-type{border-top:none;padding-top:0}
#comentarios .bib-comentar-form{margin-top:var(--e3);padding-top:var(--e3);
  border-top:1px solid var(--borda-sutil)}
#comentarios .bib-comentario-cab{margin-bottom:2px}

/* ---------------------------------------------------- botão flutuante */
/* z-index 44: acima do conteúdo e dos popovers (40), ABAIXO da barra de
   ação em lote (45), da gaveta (50/51) e do modal (60). Um botão flutuante
   que cobre um diálogo de confirmação é um botão que atrapalha exatamente
   quando não deve. */
.ia-fab{position:fixed;right:var(--e5);bottom:var(--e5);z-index:44;
  display:inline-flex;align-items:center;gap:var(--e2);height:40px;
  padding:0 var(--e4) 0 var(--e3);
  background:var(--bg-elevated);color:var(--tx1);
  border:1px solid var(--borda);border-radius:var(--r-pill);
  box-shadow:var(--sombra-pop);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;
  transition:border-color var(--t-rapido) ease,
             background var(--t-rapido) ease,
             transform var(--t-rapido) ease}
.ia-fab svg{width:17px;height:17px;flex:none;color:var(--azul)}
/* O botão flutuante cobria texto em pelo menos seis telas (Visão geral,
   Coletores, Execuções, Canais de saída, Cowork, mobile) e ficava por cima do
   backdrop dos diálogos (QA visual 03/09, T-07): o conteúdo reserva o espaço
   dele, e com um diálogo aberto ele some. */
main.pagina{padding-bottom:72px}
html:has(dialog[open]) .ia-fab{display:none}
@media (max-width:860px){.ia-fab span{display:none}
  .ia-fab{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}}
.ia-fab:hover{background:var(--bg-hover);border-color:var(--azul-borda);
  transform:translateY(-1px)}
.ia-fab:active{transform:none}
.ia-fab[aria-expanded="true"]{border-color:var(--azul-borda);
  background:var(--bg-ativo)}
/* Arrastável (pedido de 01/09/2026): o botão cobria o clipe, o GIF e o
   enviar do compositor do Cowork. Solto, a posição vira left/top inline e
   right/bottom saem do jogo; `touch-action:none` para o arrasto no celular
   não virar rolagem da página. */
.ia-fab{touch-action:none;user-select:none;-webkit-user-select:none}
.ia-fab.ia-fab-solto{right:auto;bottom:auto}
.ia-fab.ia-fab-arrastando{cursor:grabbing;transition:none;transform:none}
/* Onde há um compositor de mensagem, o botão nasce ACIMA dele. Vale só
   enquanto a pessoa não o soltou em outro lugar. */
body:has(.cw-compositor) .ia-fab:not(.ia-fab-solto){
  bottom:calc(var(--e5) + 76px)}
/* Discreto é o requisito: em tela estreita sobra só o ícone, e o produto
   não vira uma plataforma de chat por causa de um botão. */
@media (max-width:900px){
  .ia-fab{padding:0;width:40px;justify-content:center;
    right:var(--e4);bottom:var(--e4)}
  .ia-fab-rotulo{display:none}
}

/* ---------------------------------------------------------- o painel */
/* z-index 55: acima da gaveta de página (51) — quem abriu o assistente por
   último quer vê-lo — e ABAIXO do modal (60) e da paleta de comandos (90).
   Diálogo e paleta são interrupções deliberadas; o assistente não pode
   escondê-las. */
.ia-painel{position:fixed;top:0;right:0;bottom:0;z-index:55;
  display:flex;flex-direction:column;
  width:min(430px,100vw);background:var(--bg-elevated);
  border-left:1px solid var(--borda);box-shadow:var(--sombra-overlay);
  animation:ia-entra var(--t-medio) ease}
.ia-painel[hidden]{display:none}
@keyframes ia-entra{from{transform:translateX(16px);opacity:0}
  to{transform:none;opacity:1}}
/* "Reduzir movimento" é preferência de acessibilidade e vale aqui como
   vale no resto do produto — o atributo vem do servidor, no <html>. */
[data-movimento="reduzido"] .ia-painel{animation:none}
@media (prefers-reduced-motion:reduce){.ia-painel{animation:none}}
@media (max-width:520px){.ia-painel{width:100vw;border-left:none}}

.ia-cab{display:flex;align-items:center;gap:var(--e2);flex:none;
  height:var(--h-topo);padding:0 var(--e2) 0 var(--e4);
  border-bottom:1px solid var(--borda-sutil)}
.ia-cab-nome{flex:1;min-width:0;line-height:1.25}
.ia-cab-nome b{display:block;font-size:13px;font-weight:600}
.ia-cab-nome span{display:block;font-size:11px;color:var(--tx3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-cab-acoes{display:flex;align-items:center;gap:2px}

.ia-corpo{flex:1;min-height:0;overflow-y:auto;padding:var(--e4);
  scroll-behavior:smooth}
[data-movimento="reduzido"] .ia-corpo{scroll-behavior:auto}

/* ------------------------------------------------------ estado vazio */
.ia-inicio{display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:var(--e6) var(--e2) var(--e4)}
.ia-inicio[hidden]{display:none}
.ia-inicio-marca{width:38px;height:38px;display:grid;place-items:center;
  margin-bottom:var(--e3);border-radius:var(--r-pill);
  background:var(--azul-fraco);color:var(--azul)}
.ia-inicio-marca svg{width:20px;height:20px}
.ia-inicio-titulo{margin:0;font-size:15px;font-weight:600;color:var(--tx1)}
.ia-inicio-sub{margin:var(--e1) 0 var(--e4);font-size:12px;color:var(--tx2);
  max-width:30ch}
.ia-sugestoes{display:flex;flex-direction:column;gap:var(--e2);
  width:100%}
.ia-sugestao{text-align:left;padding:var(--e3);font-family:inherit;
  font-size:12.5px;color:var(--tx1);background:var(--bg-surface);
  border:1px solid var(--borda-sutil);border-radius:var(--r-md);
  cursor:pointer;transition:border-color var(--t-rapido) ease,
    background var(--t-rapido) ease}
.ia-sugestao:hover{background:var(--bg-hover);border-color:var(--azul-borda)}

/* -------------------------------------------------------- mensagens */
.ia-mensagens{display:flex;flex-direction:column;gap:var(--e4)}
.ia-msg{max-width:100%}
.ia-msg.ia-user{align-self:flex-end;max-width:88%}
.ia-user .ia-msg-corpo{padding:var(--e2) var(--e3);border-radius:var(--r-lg);
  background:var(--azul-fraco);border:1px solid var(--azul-borda);
  white-space:pre-wrap;word-break:break-word}
.ia-msg-corpo{font-size:13.5px;line-height:1.55;color:var(--tx1);
  word-wrap:break-word;overflow-wrap:anywhere}
.ia-cru .ia-msg-corpo{white-space:pre-wrap}
.ia-msg-corpo p{margin:0 0 var(--e2)}
.ia-msg-corpo p:last-child{margin-bottom:0}
.ia-msg-corpo ul,.ia-msg-corpo ol{margin:var(--e1) 0 var(--e2);
  padding-left:var(--e5)}
.ia-msg-corpo li{margin:2px 0}
.ia-msg-corpo h1,.ia-msg-corpo h2,.ia-msg-corpo h3{font-size:13px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--tx1);
  margin:var(--e3) 0 var(--e1);padding:0;border:none}
.ia-msg-corpo code{font-family:var(--mono);font-size:12px;
  background:var(--bg-campo);padding:1px 5px;border-radius:var(--r-sm)}
.ia-msg-corpo a{color:var(--azul-claro)}
.ia-msg-corpo .cli{margin:var(--e2) 0}
.ia-msg-corpo blockquote{margin:var(--e1) 0 var(--e2);
  padding:2px 0 2px var(--e3);border-left:2px solid var(--borda-forte);
  color:var(--tx2)}
.ia-parcial{color:var(--tx2)}

/* pontinhos de "pensando" */
.ia-pontos{display:inline-flex;gap:4px;align-items:center;height:18px}
.ia-pontos i{width:5px;height:5px;border-radius:50%;background:var(--tx3);
  animation:ia-pulsa 1.1s infinite ease-in-out}
.ia-pontos i:nth-child(2){animation-delay:.15s}
.ia-pontos i:nth-child(3){animation-delay:.3s}
@keyframes ia-pulsa{0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-2px)}}
[data-movimento="reduzido"] .ia-pontos i{animation:none;opacity:.6}
@media (prefers-reduced-motion:reduce){.ia-pontos i{animation:none;opacity:.6}}

/* ---------------------------------------------------------- fontes */
.ia-fontes{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e3);
  padding-top:var(--e2);border-top:1px solid var(--borda-sutil)}
.ia-fontes-rot{width:100%;font-size:10.5px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--tx3);margin-bottom:2px}
.ia-fonte{display:inline-flex;align-items:baseline;gap:var(--e1);
  /* `min-width:0` é o que faz a elipse acontecer: item de flex não encolhe
     abaixo do próprio conteúdo sem ele, e o nome de um documento longo
     vazava para fora do painel em vez de ser cortado com reticências. */
  max-width:100%;min-width:0;padding:2px var(--e2);font-size:11px;
  color:var(--tx2);
  background:var(--bg-surface);border:1px solid var(--borda-sutil);
  border-radius:var(--r-pill);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ia-fonte b{font-weight:600;color:var(--tx3);flex:none}
.ia-fonte-nome{font-style:normal;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ia-fonte span{color:var(--tx3);flex:none;max-width:20ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Especificidade acima de `.ia-msg-corpo a` (0,0,1,1), que é a regra de
   link INLINE da resposta. Sem isto o chip de procedência herdava a cor de
   link: azul sobre branco no tema claro, 3,78:1 — reprovado no AA, e
   justamente no elemento que existe para dar confiança à resposta. */
.ia-msg-corpo a.ia-fonte{color:var(--tx2);text-decoration:none}
.ia-msg-corpo a.ia-fonte:hover,a.ia-fonte:hover{
  border-color:var(--azul-borda);color:var(--tx1);text-decoration:none}

/* --------------------------------------------------- ações da resposta */
.ia-acoes-msg{display:flex;align-items:center;gap:var(--e1);
  margin-top:var(--e2);opacity:0;transition:opacity var(--t-rapido) ease}
.ia-msg:hover .ia-acoes-msg,.ia-acoes-msg:focus-within{opacity:1}
.ia-acao{height:var(--h-mini);padding:0 var(--e2);font-family:inherit;
  font-size:11px;color:var(--tx3);background:none;border:none;
  border-radius:var(--r-sm);cursor:pointer}
.ia-acao:hover{background:var(--bg-hover);color:var(--tx1)}
.ia-acao.on{background:var(--azul-fraco);color:var(--azul-claro)}

/* --------------------------------------------------- cartão de rascunho */
.ia-rascunho{margin-top:var(--e3);padding:var(--e3);
  background:var(--bg-surface);border:1px solid var(--borda);
  border-radius:var(--r-md)}
.ia-rascunho-cab{display:flex;align-items:baseline;gap:var(--e2);
  flex-wrap:wrap;margin-bottom:var(--e2)}
.ia-rascunho-cab b{font-size:12.5px;color:var(--tx1)}
.ia-rascunho-selo{font-size:10.5px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--alerta)}
.ia-rascunho-linha{display:flex;gap:var(--e2);padding:2px 0;
  font-size:12px;min-width:0}
.ia-rascunho-linha b{flex:none;width:9ch;font-weight:500;color:var(--tx3)}
.ia-rascunho-linha span{min-width:0;color:var(--tx2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ia-rascunho-acoes{display:flex;align-items:center;gap:var(--e2);
  margin-top:var(--e2)}
.ia-rascunho-abrir{height:var(--h-mini);padding:0 var(--e3);
  font-family:inherit;font-size:11.5px;font-weight:500;
  color:var(--azul-claro);background:var(--azul-fraco);
  border:1px solid var(--azul-borda);border-radius:var(--r-sm);
  cursor:pointer}
.ia-rascunho-abrir:hover{background:var(--azul);color:#fff}
.ia-rascunho-abrir:disabled{opacity:.55;cursor:default}
.ia-rascunho-erro{font-size:11px;color:var(--erro)}

/* ------------------------------------------------------------- erro */
.ia-erro{padding:var(--e3);font-size:12.5px;background:var(--erro-fraco);
  border:1px solid var(--erro-borda);border-radius:var(--r-md);
  color:var(--tx1)}
.ia-erro b{display:block;margin-bottom:var(--e1);color:var(--erro)}
.ia-erro-dica{display:block;font-size:11px;color:var(--tx3)}
.ia-erro-link{display:inline-block;margin-top:var(--e2);font-size:11.5px}
.ia-detalhe{margin-top:var(--e2)}
.ia-detalhe summary{font-size:11.5px;color:var(--tx2);cursor:pointer}
.ia-tecnico{margin:var(--e2) 0 0;padding:var(--e2);font-family:var(--mono);
  font-size:11px;color:var(--tx2);background:var(--bg-campo);
  border-radius:var(--r-sm);white-space:pre-wrap;word-break:break-word;
  max-height:220px;overflow:auto}

/* ------------------------------------------------------------- rodapé */
.ia-pe{flex:none;padding:var(--e3) var(--e4) var(--e4);
  border-top:1px solid var(--borda-sutil);background:var(--bg-elevated)}
.ia-campo{display:flex;align-items:flex-end;gap:var(--e2);
  padding:var(--e2);background:var(--bg-campo);
  border:1px solid var(--borda);border-radius:var(--r-lg);
  transition:border-color var(--t-rapido) ease}
.ia-campo:focus-within{border-color:var(--azul-borda)}
.ia-campo textarea{flex:1;min-width:0;height:22px;max-height:160px;
  padding:0 0 0 var(--e1);margin:0;border:none;background:none;resize:none;
  font-family:inherit;font-size:13.5px;line-height:1.45;color:var(--tx1);
  outline:none}
.ia-enviar{flex:none;width:28px;height:28px;display:grid;place-items:center;
  color:var(--sobre-acento);background:var(--azul);border:none;
  border-radius:var(--r-md);cursor:pointer}
.ia-enviar svg{width:15px;height:15px}
.ia-enviar:hover{background:var(--azul-claro)}
.ia-enviar:disabled{opacity:.45;cursor:not-allowed}
.ia-nota{margin:var(--e2) 0 0;font-size:10.5px;color:var(--tx3);
  text-align:center}

/* --------------------------------------------------- lista de conversas */
.ia-lista-conversas{flex:none;max-height:44vh;overflow-y:auto;
  border-bottom:1px solid var(--borda-sutil);background:var(--bg-surface)}
.ia-lista-conversas[hidden]{display:none}
.ia-conversa{display:flex;align-items:center;
  border-bottom:1px solid var(--borda-sutil)}
.ia-conversa:last-child{border-bottom:none}
.ia-conversa-abrir{flex:1;min-width:0;text-align:left;padding:var(--e2) var(--e4);
  background:none;border:none;font-family:inherit;cursor:pointer;
  color:var(--tx1)}
.ia-conversa-abrir b{display:block;font-size:12.5px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-conversa-abrir span{display:block;font-size:11px;color:var(--tx3)}
.ia-conversa:hover{background:var(--bg-hover)}
.ia-conversa-remover{flex:none;width:32px;height:32px;margin-right:var(--e2);
  background:none;border:none;color:var(--tx3);cursor:pointer;
  border-radius:var(--r-sm);font-size:12px}
.ia-conversa-remover:hover{background:var(--erro-fraco);color:var(--erro)}
.ia-conversas-vazio{padding:var(--e4);font-size:12px;color:var(--tx3);
  text-align:center}

/* ═══════════════════════ 7b. Cowork — identidade, mídia e descontração
 *
 * Um princípio governa tudo aqui: COR E FUNDO SÃO CLASSE, nunca `style=`
 * montado com valor de formulário. `cw-cor-roxo` e `cw-fundo-neon` são
 * nomes que o servidor valida contra uma lista fechada (`CORES_AVATAR`,
 * `FUNDOS`); é o que permite personalizar sem abrir uma porta de CSS
 * injetado no meio da conversa.
 */

/* --------------------------------------------------------- avatar e cor */
.cw-av{overflow:hidden;position:relative}
.cw-av-foto{background:var(--bg-campo);padding:0}
.cw-av img{width:100%;height:100%;object-fit:cover;display:block}
.cw-av[data-perfil]{cursor:pointer}
.cw-av[data-perfil]:hover{border-color:var(--azul-borda)}
.cw-av[data-perfil]:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.cw-av-grande{--cw-av:64px;width:64px;height:64px;font-size:20px;
  border-radius:var(--r-lg)}
.cw-av-mini{--cw-av:20px;width:20px;height:20px;font-size:8px}
.cw-av-eu{--cw-av:28px;width:28px;height:28px;font-size:10px}

/* As dez cores do avatar. Fundo saturado com texto claro por cima: a
   mesma dupla lê bem no tema escuro e no claro, o que uma cor de TEXTO
   não conseguiria sem uma segunda paleta. */
.cw-cor-ardosia{background:#4A5568;border-color:#5A6578;color:#fff}
.cw-cor-azul{background:#2B6CB0;border-color:#3B7CC0;color:#fff}
.cw-cor-verde{background:#2F855A;border-color:#38A169;color:#fff}
.cw-cor-roxo{background:#6B46C1;border-color:#7B56D1;color:#fff}
.cw-cor-ambar{background:#B7791F;border-color:#C78929;color:#fff}
.cw-cor-rosa{background:#B83280;border-color:#C84290;color:#fff}
.cw-cor-vermelho{background:#C53030;border-color:#D54040;color:#fff}
.cw-cor-ciano{background:#2C7A7B;border-color:#338A8B;color:#fff}
.cw-cor-lima{background:#5F8A1F;border-color:#6F9A2F;color:#fff}
.cw-cor-grafite{background:#2D3748;border-color:#3D4758;color:#fff}

/* "Não perturbe" ganha a barrinha, e não só uma cor: um ponto vermelho ao
   lado de um ponto verde é a distinção mais difícil que existe para quem
   não distingue as duas — e este ponto é a informação inteira. */
.cw-estado[data-estado="nao_perturbe"]{background:var(--erro);
  position:relative}
.cw-estado[data-estado="nao_perturbe"]::after{content:"";position:absolute;
  left:1px;right:1px;top:2.5px;height:2px;background:#fff;border-radius:1px}
.cw-estado[data-estado="invisivel"]{background:var(--borda-forte)}

.cw-msg-emoji{font-size:12px;line-height:1}

/* ------------------------------------------------- faixa de quem sou eu */
.cw-eu{margin-top:auto;padding:var(--e2);border-top:1px solid var(--borda-sutil);
  position:sticky;bottom:0;background:var(--bg-surface)}
.cw-eu-cartao{display:flex;align-items:center;gap:var(--e2);width:100%;
  padding:var(--e2);border:1px solid transparent;border-radius:var(--r-md);
  background:none;cursor:pointer;text-align:left;font-family:inherit;
  color:var(--tx1)}
.cw-eu-cartao:hover{background:var(--bg-hover);border-color:var(--borda)}
.cw-eu-cartao:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.cw-eu-texto{flex:1;min-width:0}
.cw-eu-texto b{display:block;font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-eu-texto small{display:block;font-size:11px;color:var(--tx3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-eu-estado{width:9px;height:9px;flex:none}

/* ------------------------------------------------------ cartão de perfil */
.cw-cartao{position:fixed;z-index:70;width:268px;
  background:var(--bg-elevated,var(--bg-surface));
  border:1px solid var(--borda-forte);border-radius:var(--r-lg);
  box-shadow:var(--sombra-overlay);overflow:hidden}
.cw-cartao-faixa{height:52px;background:var(--bg-hover)}
.cw-cartao > .cw-av-grande{margin:-32px 0 0 var(--e4);
  border:3px solid var(--bg-surface)}
.cw-cartao-corpo{padding:var(--e3) var(--e4) var(--e4)}
.cw-cartao-nome{display:flex;align-items:center;gap:var(--e2);
  font-size:15px;margin-top:var(--e2)}
.cw-cartao-nome b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-cartao-emoji{font-size:14px}
.cw-cartao-conta{font-size:11.5px;color:var(--tx3);font-family:var(--mono);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-cartao-recado{margin:var(--e3) 0 0;padding:var(--e2) var(--e3);
  font-size:12.5px;color:var(--tx2);background:var(--bg-campo);
  border-radius:var(--r-sm);word-break:break-word}
.cw-cartao-meta{display:flex;align-items:center;gap:var(--e2);
  margin-top:var(--e3);font-size:12px;color:var(--tx2)}
.cw-cartao-pe{display:flex;gap:var(--e2);margin-top:var(--e4)}
.cw-cartao-carregando{padding:var(--e4);font-size:12px;color:var(--tx3)}

/* --------------------------------------------------- diálogo do perfil */
.cw-dlg-perfil{max-width:460px}
.cw-perfil-foto{display:flex;align-items:center;gap:var(--e4);
  margin-bottom:var(--e4)}
.cw-perfil-foto-acoes{display:flex;flex-wrap:wrap;gap:var(--e2);
  align-items:center}
.cw-perfil-foto-acoes .ajuda{width:100%;margin:0}
.cw-recado-emoji{flex:none;width:var(--h-controle);height:var(--h-controle);
  border:1px solid var(--borda);border-radius:var(--r-md);
  background:var(--bg-campo);cursor:pointer;font-size:16px;line-height:1}
.cw-recado-emoji:hover{border-color:var(--azul-borda)}
.cw-estados{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--e2);margin-bottom:var(--e3)}
.cw-estado-op{display:flex;align-items:center;gap:var(--e2);
  padding:var(--e2) var(--e3);border:1px solid var(--borda);
  border-radius:var(--r-md);background:var(--bg-campo);cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--tx2);text-align:left}
.cw-estado-op:hover{border-color:var(--azul-borda)}
.cw-estado-op.on{border-color:var(--azul);background:var(--azul-fraco);
  color:var(--tx1)}
.cw-cores{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e3)}
.cw-cor-op{width:26px;height:26px;border-radius:var(--r-sm);
  border:2px solid transparent;cursor:pointer}
.cw-cor-op.cw-cor-auto{background:var(--bg-hover);border-color:var(--borda)}
.cw-cor-op.on{border-color:var(--tx1);box-shadow:0 0 0 2px var(--azul-fraco)}

/* ------------------------------------------------------ paleta de emoji */
.cw-paleta{position:fixed;z-index:80;width:288px;max-height:300px;
  overflow-y:auto;padding:var(--e2);
  background:var(--bg-elevated,var(--bg-surface));
  border:1px solid var(--borda-forte);border-radius:var(--r-md);
  box-shadow:var(--sombra-pop)}
.cw-paleta-busca{width:100%;margin-bottom:var(--e2)}
.cw-paleta-titulo{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx3);margin:var(--e2) 0 var(--e1);padding:0 var(--e1)}
.cw-paleta-linha{display:flex;flex-wrap:wrap;gap:2px}
.cw-paleta .cw-emoji,.cw-painel-corpo .cw-emoji{width:30px;height:30px;
  font-size:17px;line-height:1;border:none;background:none;cursor:pointer;
  border-radius:var(--r-sm)}
.cw-paleta .cw-emoji:hover,.cw-painel-corpo .cw-emoji:hover{
  background:var(--bg-hover)}
.cw-emoji-mais{font-weight:700;color:var(--tx3)}

/* ------------------------------------------------------------- ícones
 *
 * Traço de 1.4 num viewBox de 16, herdando `currentColor` do botão. Emoji
 * NÃO é iconografia: vem com a fonte do sistema, muda de cor e de peso por
 * conta própria e ignora o `color` de quem o contém. O compositor tinha
 * 📎 ☺ ➤ e a palavra "GIF" — quatro pesos diferentes numa fileira de
 * quatro botões.
 */
.cw-ic{width:16px;height:16px;flex:none;display:block}
.cw-ic-gif{width:22px}
.cw-acao svg,.cw-enviar svg{pointer-events:none}
.cw-acao{width:30px;height:30px}
.cw-acao-gif{width:34px}
.cw-anexo-ico .cw-ic{width:14px;height:14px}
#cw-abre-fundo{display:inline-flex;align-items:center;gap:var(--e2)}

/* --------------------------------------------- controle segmentado
 * Duas ou três opções mutuamente exclusivas, no lugar de abas soltas: o
 * trilho mostra QUANTAS existem mesmo quando só uma está acesa — que é o
 * que faltava para "Buscar na web" ser descoberta.
 */
.cw-segmentado{display:inline-flex;align-self:flex-start;padding:2px;gap:2px;
  background:var(--bg-campo);border:1px solid var(--borda);
  border-radius:var(--r-md)}
.cw-seg{padding:5px var(--e3);border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:500;color:var(--tx3);
  border-radius:5px;transition:background var(--t-rapido) ease-out,
  color var(--t-rapido) ease-out}
.cw-seg:hover{color:var(--tx1)}
.cw-seg.on{background:var(--bg-elevated);color:var(--tx1);
  box-shadow:0 1px 2px rgba(0,0,0,.22)}
.cw-seg:focus-visible{outline:2px solid var(--azul);outline-offset:1px}

/* -------------------------------------------------- campo com ícone */
.cw-campo-busca{position:relative;display:flex;align-items:center}
.cw-campo-busca .cw-ic{position:absolute;left:10px;color:var(--tx3);
  pointer-events:none}
.cw-campo-busca input{width:100%;padding-left:32px}

/* ------------------------------------------- moldura comum de diálogo
 * O `.cw-dialogo` tem `padding:0` e toda a margem interna vem do `form`
 * — o seletor de GIF não tem form, e por isso nascia com título, busca,
 * grade e rodapé colados na borda. `.cw-dlg-corpo` é o mesmo padding,
 * disponível para quem não é formulário.
 */
.cw-dlg-corpo{display:flex;flex-direction:column;gap:var(--e3);
  padding:var(--e5)}
.cw-dlg-cab{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3)}
.cw-dlg-cab h2{display:flex;align-items:center;gap:var(--e2);margin:0;
  font-size:15px}
.cw-dlg-rodape{padding-top:var(--e2);border-top:1px solid var(--borda-sutil)}
.cw-dlg-rodape .ajuda{margin:0}
.cw-gif-rodape{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3)}
/* Crédito do provedor: exigido pelos termos da API do GIPHY e do Tenor.
   Discreto, e sempre visível quando a busca externa está ligada. */
.cw-gif-credito{flex:none;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx3)}

/* ------------------------------------- painel de emoji/figurinha do campo */
.cw-painel-emoji{position:absolute;right:var(--e5);bottom:110px;z-index:60;
  width:328px;max-height:360px;display:flex;flex-direction:column;
  gap:var(--e2);padding:var(--e3);
  background:var(--bg-elevated,var(--bg-surface));
  border:1px solid var(--borda-forte);border-radius:var(--r-lg);
  box-shadow:var(--sombra-overlay)}
.cw-painel-corpo{flex:1;overflow-y:auto;margin:0 calc(var(--e2) * -1);
  padding:0 var(--e2)}
.cw-figurinhas{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:var(--e2)}
.cw-figurinha{padding:var(--e1);border:1px solid transparent;
  border-radius:var(--r-sm);background:none;cursor:pointer;aspect-ratio:1}
.cw-figurinha:hover{background:var(--bg-hover);border-color:var(--borda)}
.cw-figurinha img{width:100%;height:100%;object-fit:contain}

/* --------------------------------------------------------- seletor de GIF
 *
 * Grade em COLUNAS, não em `grid` de tiles fixos. GIF tem proporção
 * própria e é metade da piada: um tile 4:3 com `object-fit:cover` cortava
 * o quadro e esticava o que era quadrado. Em colunas cada um entra com a
 * altura que tem, que é como toda ferramenta que as pessoas usam mostra.
 */
.cw-dlg-gif{width:min(600px,calc(100vw - 32px))}
.cw-gif-grade{columns:3 130px;column-gap:var(--e2);max-height:48vh;
  overflow-y:auto;min-height:180px;
  /* `column-fill:balance` (o padrão) reflui TODAS as colunas a cada
     imagem que chega, e clicar vira mira móvel. `auto` enche uma coluna
     de cada vez e o que já está pintado não se mexe. */
  column-fill:auto;margin:0 calc(var(--e1) * -1);padding:0 var(--e1)}
.cw-gif-item{display:block;width:100%;padding:0;margin:0 0 var(--e2);
  border:1px solid var(--borda);border-radius:var(--r-md);
  background:var(--bg-campo);cursor:pointer;overflow:hidden;
  break-inside:avoid;line-height:0;
  transition:border-color var(--t-rapido) ease-out,
  transform var(--t-rapido) ease-out}
.cw-gif-item:hover,.cw-gif-item:focus-visible{border-color:var(--azul);
  transform:translateY(-1px);outline:none}
.cw-gif-item img{width:100%;height:auto;display:block}
.cw-gif-item.carregando{opacity:.45}
.cw-gif-carregando{padding:var(--e6) 0;text-align:center;font-size:12px;
  color:var(--tx3)}
.cw-gif-aviso{padding:var(--e2) var(--e3);border-radius:var(--r-sm);
  background:var(--alerta-fraco);border:1px solid var(--alerta-borda);
  color:var(--tx2);font-size:11.5px}

/* A grade em colunas é para GIF. Estado vazio e "buscando" precisam da
   largura inteira — dentro de `columns` eles ficavam espremidos em 130px,
   com três palavras por linha. */
.cw-gif-grade.sem-colunas{columns:1}
.cw-gif-topo{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3)}
/* Buscando: a prateleira apaga em vez de sumir. Sumir muda a altura do
   diálogo no meio da digitação; apagar diz "não é isto que manda agora". */
.cw-gif-topo.buscando .cw-segmentado{opacity:.4;pointer-events:none}

.cw-gif-tile{position:relative;break-inside:avoid;margin:0 0 var(--e2)}
.cw-gif-tile .cw-gif-item{margin:0}
.cw-gif-fav{position:absolute;top:6px;right:6px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:none;border-radius:var(--r-pill);cursor:pointer;font-size:13px;
  line-height:1;color:#fff;background:rgba(0,0,0,.55);opacity:0;
  transition:opacity var(--t-rapido) ease-out}
.cw-gif-tile:hover .cw-gif-fav,.cw-gif-fav:focus-visible,
.cw-gif-fav.on{opacity:1}
.cw-gif-fav.on{color:var(--alerta)}
.cw-gif-fav:hover{background:rgba(0,0,0,.75)}

/* ------------------------------------------------------ bloco de código */
.cw-dlg-codigo{width:min(680px,calc(100vw - 32px))}
.cw-dlg-codigo form{gap:var(--e2)}
.cw-cod-area{font-family:var(--mono);font-size:12.5px;line-height:1.55;
  tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;
  background:var(--bg-campo);min-height:240px;resize:vertical}

/* Estado vazio: título que diz o que aconteceu e uma linha que diz o que
   fazer. Um "Nada aqui" cinza solto no meio da grade parece tela quebrada. */
.cw-vazio-caixa{padding:var(--e6) var(--e4);text-align:center}
.cw-vazio-caixa b{display:block;font-size:13px;color:var(--tx1);
  margin-bottom:var(--e2)}
.cw-vazio-caixa p{margin:0 auto;max-width:34em;font-size:12px;
  line-height:1.5;color:var(--tx3)}

/* ------------------------------------------------------------ mídia */
/* `pointer-events:none` na imagem: sem link e sem arrastar, o GIF é
   figura e se comporta como figura. O selo já é `pointer-events:none`. */
.cw-anexo-gif{position:relative;display:inline-block;max-width:min(320px,100%);
  border-radius:var(--r-md);overflow:hidden;border:1px solid var(--borda)}
.cw-anexo-gif img{-webkit-user-drag:none;user-select:none}
.cw-anexo-gif img{max-width:100%;height:auto;display:block}
.cw-selo-gif{position:absolute;left:6px;bottom:6px;padding:1px 5px;
  font-size:9px;font-weight:700;letter-spacing:.06em;color:#fff;
  background:rgba(0,0,0,.62);border-radius:var(--r-sm);pointer-events:none}
.cw-anexo-video{max-width:min(440px,100%)}
.cw-anexo-video video{width:100%;max-height:340px;display:block;
  border-radius:var(--r-md);background:#000;border:1px solid var(--borda)}
.cw-anexo-baixar{display:inline-block;margin-top:var(--e1);font-size:11px;
  color:var(--tx3)}
.cw-anexo-audio{display:flex;flex-direction:column;gap:2px;
  max-width:min(380px,100%)}
.cw-anexo-audio audio{width:100%;height:34px}
.cw-pendente-gif img{height:28px;width:auto;border-radius:var(--r-sm);
  margin-right:var(--e2);vertical-align:middle}

/* ------------------------------------------------------ spoiler e figurinha */
.md-spoiler{background:var(--borda-forte);color:transparent;border-radius:3px;
  padding:0 3px;cursor:pointer;transition:color var(--t-rapido) ease-out,
  background var(--t-rapido) ease-out}
.md-spoiler *{visibility:hidden}
.md-spoiler.aberto{background:var(--bg-hover);color:inherit}
.md-spoiler.aberto *{visibility:visible}
.md-spoiler:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.md-figurinha{height:22px;width:auto;vertical-align:-5px;display:inline-block}
/* A figurinha SOZINHA numa mensagem cresce. Quem decide é o SERVIDOR
   (`marcacao._RE_SO_FIGURINHAS`), e não um `:only-child` daqui: em CSS um
   `<img>` cercado de texto ainda é filho único, porque nó de texto não
   conta como filho — a regra crescia a figurinha do meio da frase. */
.md-figurinha.grande{height:72px;vertical-align:middle}

/* ------------------------------------------------------ lista de membros */
.cw-membro-bt{display:flex;align-items:center;gap:var(--e2);flex:1;min-width:0;
  padding:2px var(--e1);border:none;background:none;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--tx1);border-radius:var(--r-sm)}
.cw-membro-bt:hover{background:var(--bg-hover)}
.cw-membro-txt{min-width:0}
.cw-membro-nome{display:block;font-size:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cw-membro-txt small{display:block;font-size:10.5px;color:var(--tx3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-ctx-atalhos{display:flex;gap:var(--e2);margin-bottom:var(--e3)}

/* ------------------------------------------------------- papel de parede
 *
 * Catorze fundos, todos desenhados em CSS: gradiente ou `repeating-*`.
 * Nenhum é arquivo — imagem de fundo seria um upload por sala servido em
 * toda mensagem, e a promessa de "personalizar" não vale um megabyte por
 * pintura de tela. `--cw-tinta` é a única variável que cada tema precisa
 * reescrever, e ela sai do texto: o padrão funciona no claro e no escuro.
 */
.cw-fluxo[class*="cw-fundo-"]{--cw-tinta:rgba(127,140,160,.13);
  background-attachment:local}
.cw-fundo-quadriculado{background-image:
  linear-gradient(var(--cw-tinta) 1px,transparent 1px),
  linear-gradient(90deg,var(--cw-tinta) 1px,transparent 1px);
  background-size:22px 22px}
.cw-fundo-pontos{background-image:
  radial-gradient(var(--cw-tinta) 1.4px,transparent 1.4px);
  background-size:18px 18px}
.cw-fundo-linhas{background-image:
  repeating-linear-gradient(180deg,var(--cw-tinta) 0 1px,transparent 1px 26px)}
.cw-fundo-diagonal{background-image:
  repeating-linear-gradient(45deg,var(--cw-tinta) 0 1px,transparent 1px 12px)}
.cw-fundo-hex{background-image:
  repeating-linear-gradient(60deg,var(--cw-tinta) 0 1px,transparent 1px 26px),
  repeating-linear-gradient(-60deg,var(--cw-tinta) 0 1px,transparent 1px 26px),
  repeating-linear-gradient(0deg,var(--cw-tinta) 0 1px,transparent 1px 26px)}
.cw-fundo-circuito{background-image:
  repeating-linear-gradient(0deg,var(--cw-tinta) 0 1px,transparent 1px 40px),
  repeating-linear-gradient(90deg,var(--cw-tinta) 0 1px,transparent 1px 40px),
  radial-gradient(var(--cw-tinta) 2px,transparent 2px);
  background-size:40px 40px,40px 40px,40px 40px}
.cw-fundo-aurora{background-image:
  radial-gradient(120% 80% at 10% 0%,rgba(77,155,255,.14),transparent 60%),
  radial-gradient(100% 70% at 90% 100%,rgba(62,207,142,.12),transparent 62%)}
.cw-fundo-poente{background-image:
  radial-gradient(120% 80% at 0% 100%,rgba(242,180,87,.16),transparent 60%),
  radial-gradient(100% 80% at 100% 0%,rgba(255,123,114,.13),transparent 62%)}
.cw-fundo-neon{background-image:
  radial-gradient(90% 60% at 15% 10%,rgba(184,50,128,.18),transparent 60%),
  radial-gradient(90% 60% at 85% 90%,rgba(44,122,123,.20),transparent 60%)}
.cw-fundo-mata{background-image:
  radial-gradient(120% 90% at 50% 0%,rgba(47,133,90,.18),transparent 65%),
  repeating-linear-gradient(135deg,rgba(47,133,90,.06) 0 2px,transparent 2px 14px)}
.cw-fundo-papel{background-color:rgba(183,121,31,.05);background-image:
  repeating-linear-gradient(180deg,rgba(183,121,31,.14) 0 1px,transparent 1px 28px)}
.cw-fundo-carbono{background-image:
  repeating-linear-gradient(45deg,rgba(0,0,0,.16) 0 2px,transparent 2px 5px),
  repeating-linear-gradient(-45deg,rgba(0,0,0,.16) 0 2px,transparent 2px 5px)}
.cw-fundo-estrelas{background-image:
  radial-gradient(1.2px 1.2px at 20% 30%,var(--cw-tinta),transparent),
  radial-gradient(1.2px 1.2px at 70% 60%,var(--cw-tinta),transparent),
  radial-gradient(1px 1px at 45% 80%,var(--cw-tinta),transparent),
  radial-gradient(1px 1px at 85% 15%,var(--cw-tinta),transparent);
  background-size:180px 180px}

.cw-fundos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:var(--e2);margin-bottom:var(--e4)}
.cw-fundo-op{position:relative;height:62px;padding:0;cursor:pointer;
  border:1px solid var(--borda);border-radius:var(--r-md);
  background-color:var(--bg-campo);--cw-tinta:rgba(127,140,160,.22)}
.cw-fundo-op:hover{border-color:var(--azul-borda)}
.cw-fundo-op.on{border-color:var(--azul);box-shadow:0 0 0 2px var(--azul-fraco)}
.cw-fundo-nome{position:absolute;left:0;right:0;bottom:0;padding:2px;
  font-size:10px;color:var(--tx2);background:var(--bg-surface);
  border-radius:0 0 7px 7px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

@media (max-width:720px){
  .cw-painel-emoji{left:var(--e3);right:var(--e3);width:auto}
  .cw-cartao{width:min(268px,92vw)}
}

/* ═══════════════════════════════════════════════════ Meu perfil (/perfil)
 *
 * Página, e não diálogo: o perfil vale no ISM inteiro — aparece no
 * cabeçalho de toda tela —, e um editor que só existisse dentro de uma
 * sala de conversa contradiria isso.
 *
 * Formulário HTML puro, sem JavaScript: o rádio é o controle, e o `label`
 * em volta é a superfície clicável. `appearance:none` no rádio some com a
 * bolinha do sistema sem tirar o foco do teclado nem a semântica — que é o
 * que uma `div` com `onclick` teria tirado.
 */
.perfil-grade{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:var(--e4);align-items:start}
.perfil-cartao{position:sticky;top:calc(var(--h-topo) + var(--e4))}
.perfil-previa{display:flex;align-items:center;gap:var(--e4);
  padding-bottom:var(--e4);margin-bottom:var(--e4);
  border-bottom:1px solid var(--borda-sutil)}
.perfil-previa > div{min-width:0}
.perfil-previa b{display:flex;align-items:center;gap:var(--e2);
  font-size:14px}
.perfil-previa .ajuda{margin:2px 0 0;font-size:11px}
.perfil-recado{margin:var(--e2) 0 0;font-size:12.5px;color:var(--tx2)}
.perfil-foto-form{margin-bottom:var(--e3)}
.perfil-foto-form input[type=file]{font-size:12px;margin-bottom:var(--e2)}
.perfil-form h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx3);margin:var(--e6) 0 var(--e2)}
.perfil-form h2:first-of-type{margin-top:0}
.perfil-form .ajuda{margin:2px 0 var(--e2)}

.perfil-opcoes{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--e2)}
.perfil-op{display:flex;align-items:center;gap:var(--e2);
  padding:var(--e2) var(--e3);border:1px solid var(--borda);
  border-radius:var(--r-md);background:var(--bg-campo);cursor:pointer;
  font-size:12.5px;color:var(--tx2)}
.perfil-op:hover{border-color:var(--azul-borda)}
.perfil-op input{appearance:none;-webkit-appearance:none;width:0;height:0;
  margin:0;position:absolute}
.perfil-op:has(input:checked){border-color:var(--azul);
  background:var(--azul-fraco);color:var(--tx1)}
.perfil-op:has(input:focus-visible){outline:2px solid var(--azul);
  outline-offset:1px}

.perfil-cores{display:flex;flex-wrap:wrap;gap:var(--e2)}
.perfil-cor{display:inline-flex;cursor:pointer}
.perfil-cor input{appearance:none;-webkit-appearance:none;width:0;height:0;
  margin:0;position:absolute}
.perfil-cor:has(input:checked) .cw-cor-op{border-color:var(--tx1);
  box-shadow:0 0 0 2px var(--azul-fraco)}
.perfil-cor:has(input:focus-visible) .cw-cor-op{outline:2px solid var(--azul);
  outline-offset:2px}
.perfil-cor .cw-cor-op{display:block}

.perfil-fundos{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--e2)}
/* 14 fundos em 6+6+2 deixava dois órfãos: em tela larga são 7 por linha (E-63). */
@media (min-width:1100px){.perfil-fundos.perfil-fundos{grid-template-columns:repeat(7,minmax(0,1fr))}}
.perfil-fundo{display:block;cursor:pointer}
.perfil-fundo input{appearance:none;-webkit-appearance:none;width:0;height:0;
  margin:0;position:absolute}
.perfil-fundo .cw-fundo-op{display:block;width:100%}
.perfil-fundo:has(input:checked) .cw-fundo-op{border-color:var(--azul);
  box-shadow:0 0 0 2px var(--azul-fraco)}
.perfil-fundo:has(input:focus-visible) .cw-fundo-op{
  outline:2px solid var(--azul);outline-offset:2px}

/* `:has()` não existe em navegador antigo. O reserva não é bonito, mas é
   funcional: o rádio volta a aparecer, e a escolha continua visível. */
@supports not selector(:has(*)){
  .perfil-op input,.perfil-cor input,.perfil-fundo input{
    appearance:auto;-webkit-appearance:auto;width:auto;height:auto;
    position:static;margin-right:6px}
}

@media (max-width:1000px){
  .perfil-grade{grid-template-columns:minmax(0,1fr)}
  .perfil-cartao{position:static}
}

/* ═══════════════════════════════ Configurações → Inteligência Artificial */
.ia-status{display:flex;align-items:flex-start;gap:var(--e4);flex-wrap:wrap}
.ia-status-selo{display:inline-flex;align-items:center;gap:var(--e2);
  flex:none;padding:var(--e2) var(--e3);border-radius:var(--r-md);
  background:var(--bg-campo);border:1px solid var(--borda)}
.ia-status-selo.on{background:var(--ok-fraco);border-color:var(--ok-borda)}
.ia-ponto{width:8px;height:8px;border-radius:50%;background:var(--tx3)}
.ia-status-selo.on .ia-ponto{background:var(--ok)}
.ia-status-texto{font-size:11px;letter-spacing:.6px;color:var(--tx2)}
.ia-status-selo.on .ia-status-texto{color:var(--ok)}
.ia-status-detalhe{flex:1;min-width:220px;font-size:12.5px;color:var(--tx2)}
.ia-status-detalhe b{color:var(--tx1)}
.ia-atencao{color:var(--alerta)}
.ia-acoes-nota{margin:0 0 0 var(--e2);flex:1;min-width:180px}
.ia-resultado-teste{margin-bottom:var(--e3)}
.ia-resultado-teste[hidden]{display:none}
.ia-opcional{font-size:10px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--tx3);font-weight:400;margin-left:var(--e1)}
.ia-avancado{margin-top:var(--e3);padding-top:var(--e3);
  border-top:1px solid var(--borda-sutil)}
.ia-avancado summary{font-size:12px;color:var(--tx2);cursor:pointer}
.ia-avancado>*:not(summary){margin-top:var(--e3)}
.ia-bloco-detalhe>summary{padding:var(--e3) var(--e4);cursor:pointer;
  list-style:none}
.ia-bloco-detalhe>summary h2{display:inline;padding:0;border:none}
.ia-bloco-detalhe>summary::-webkit-details-marker{display:none}
.ia-bloco-detalhe>summary::after{content:"▾";float:right;color:var(--tx3)}
.ia-bloco-detalhe[open]>summary{border-bottom:1px solid var(--borda-sutil)}
.ia-privacidade{margin:0 0 var(--e2);padding:var(--e3);font-size:12.5px;
  color:var(--tx1);background:var(--alerta-fraco);
  border:1px solid var(--alerta-borda);border-radius:var(--r-md)}
.ia-privacidade.ok{background:var(--ok-fraco);border-color:var(--ok-borda)}
.ia-privacidade.neutra{background:var(--bg-campo);border-color:var(--borda);
  color:var(--tx2)}

/* upload de documentos */
.ia-upload{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  margin:var(--e4) 0}
.ia-solta{flex:1;min-width:240px;display:flex;align-items:center;
  gap:var(--e3);padding:var(--e3) var(--e4);cursor:pointer;
  background:var(--bg-campo);border:1px dashed var(--borda-forte);
  border-radius:var(--r-md);font-size:12.5px;color:var(--tx2);
  transition:border-color var(--t-rapido) ease}
.ia-solta:hover{border-color:var(--azul-borda);color:var(--tx1)}
.ia-solta svg{width:18px;height:18px;flex:none;color:var(--tx3)}
.ia-solta b{color:var(--tx1)}
.ia-solta input[type=file]{position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none}
.ia-solta:focus-within{border-color:var(--azul);outline:2px solid var(--azul);
  outline-offset:2px}
.ia-solta.ia-solta-erro{border-color:var(--erro-borda);
  background:var(--erro-fraco);color:var(--tx1)}
.ia-solta.ia-solta-erro svg{color:var(--erro)}

.ia-docs{display:flex;flex-direction:column;
  border-top:1px solid var(--borda-sutil)}
.ia-doc{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) 0;
  border-bottom:1px solid var(--borda-sutil)}
.ia-doc:last-child{border-bottom:none}
.ia-doc-icone{flex:none;width:38px;height:38px;display:grid;
  place-items:center;border-radius:var(--r-md);font-size:10px;
  font-weight:600;letter-spacing:.4px;background:var(--bg-campo);
  color:var(--tx3);border:1px solid var(--borda-sutil)}
.ia-doc-icone.ia-est-pronto{color:var(--ok);border-color:var(--ok-borda)}
.ia-doc-icone.ia-est-erro{color:var(--erro);border-color:var(--erro-borda)}
.ia-doc-icone.ia-est-processando{color:var(--alerta);
  border-color:var(--alerta-borda)}
.ia-doc-info{flex:1;min-width:0}
.ia-doc-nome{font-size:13px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ia-doc-meta{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);
  margin-top:2px;font-size:11px;color:var(--tx3)}
.ia-doc-erro{margin-top:var(--e1);font-size:11.5px;color:var(--erro)}
.ia-doc-acoes{display:flex;align-items:center;gap:var(--e1);flex:none;
  flex-wrap:wrap;justify-content:flex-end}
.ia-doc-acoes form{margin:0}
@media (max-width:760px){
  .ia-doc{flex-wrap:wrap}
  .ia-doc-acoes{width:100%;justify-content:flex-start}
}
.ia-trecho{margin:0;padding:var(--e3);font-family:var(--mono);font-size:11.5px;
  line-height:1.5;color:var(--tx2);background:var(--bg-campo);
  border-radius:var(--r-sm);white-space:pre-wrap;word-break:break-word}

/* ----------------------------------------------------------- monitoria (M3)
   Gráficos em SVG montados no servidor: a CSP não carrega biblioteca e a
   página tem de ler sem JS. As cores vêm dos tokens do tema. */
.graficos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--e3)}
.grafico-caixa{margin:0;padding:var(--e2) var(--e3);border:1px solid var(--borda-sutil);
  border-radius:8px;background:var(--bg-surface)}
.grafico-caixa figcaption{font-size:12px;color:var(--tx2);margin-bottom:4px}
.grafico{width:100%;height:120px;display:block}
.grafico-eixo{stroke:var(--borda-sutil);stroke-width:1}
.grafico-linha{fill:none;stroke:var(--acento);stroke-width:1.6;vector-effect:non-scaling-stroke}
.grafico-area{fill:var(--acento);opacity:.12}
.grafico-ponto{fill:var(--acento)}
.grafico-rotulo{font-size:10px;fill:var(--tx3)}
.grafico-ultimo{font-size:11px;fill:var(--tx1);font-weight:600}
.grafico-vazio{font-size:12px;fill:var(--tx3)}
.erro-texto{color:var(--erro)}
tr.linha-erro td{background:color-mix(in srgb,var(--erro) 8%,transparent)}
tr.apagada td{opacity:.55}