/* Painel AIA — folha unica, sem dependencias externas. */

:root {
  --bg: #0e1116;
  --bg-2: #151a22;
  --bg-3: #1c222c;
  --line: #262e3a;
  --line-soft: #1e252f;
  --fg: #e6edf3;
  --fg-dim: #9aa7b6;
  --fg-mute: #6b7887;
  --accent: #d97757;
  --accent-soft: rgba(217, 119, 87, 0.14);
  --ok: #4ea672;
  --warn: #d1a34a;
  --err: #d16565;
  --info: #5b90c9;
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--fg-dim); }
.small { font-size: 12px; }
.error { color: var(--err); font-size: 13px; margin: 4px 0 0; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--bg-3);
       padding: 1px 5px; border-radius: 4px; color: var(--fg-dim); }

/* ---------------- botoes / inputs ---------------- */

.btn {
  font: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg);
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  transition: background .13s, border-color .13s, opacity .13s;
  white-space: nowrap;
}
.btn:hover { background: #232b36; border-color: #333d4b; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1005; font-weight: 600; }
.btn.primary:hover { background: #e28965; border-color: #e28965; }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: #6a3a3a; color: #e69a9a; }
.btn.danger:hover { background: #341f1f; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.wide { width: 100%; justify-content: center; }

input[type=text], input[type=password], input[type=email], input:not([type]),
textarea, select {
  font: inherit; width: 100%;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; outline: none;
}
select { cursor: pointer; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { font-family: var(--mono); font-size: 13px; resize: vertical; min-height: 74px; }

.check { display: flex; align-items: center; gap: 7px; font-size: 13px;
         color: var(--fg-dim); cursor: pointer; user-select: none; }
.check input { accent-color: var(--accent); width: auto; }

/* ---------------- login ---------------- */

.login-screen {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1000px 600px at 50% -10%, #1b222d 0%, var(--bg) 62%);
}
.login-card {
  width: 100%; max-width: 400px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px; padding: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.login-mark {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent); color: #1a1005; font-weight: 700; letter-spacing: .5px;
  font-size: 15px; margin-bottom: 18px;
}
.login-card h1 { margin: 0 0 4px; font-size: 21px; }
.login-card p { margin: 0 0 20px; font-size: 13px; }
.login-card label { display: block; font-size: 12px; color: var(--fg-dim);
                    margin-bottom: 6px; text-transform: uppercase; letter-spacing: .6px; }
.login-card input { margin-bottom: 16px; }
/* Campo de senha com botão de mostrar/ocultar (o «olho»). Genérico: o input tem
   padding-right para o botão caber, e o botão se ancora à direita. A margem NÃO é
   forçada aqui (cada contexto tem a sua) — só o login precisa mover a margem do
   input para o wrapper, senão o olho ficaria alto. */
.pw-wrap { position: relative; }
.pw-wrap > input { width: 100%; padding-right: 42px; }
.pw-olho {
  position: absolute; top: 0; right: 0; height: 100%; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--fg-mute);
}
.pw-olho:hover { color: var(--fg); }
.pw-olho.on { color: var(--accent); }
.login-card .pw-wrap { margin-bottom: 16px; }
.login-card .pw-wrap > input { margin-bottom: 0 !important; }
/* No Cofre os campos ficam numa linha flex — o wrapper ocupa o lugar do input. */
.aud-filtros .pw-wrap { flex: 1; min-width: 190px; }
.login-card p.muted { line-height: 1.6; }
.hint { margin-top: 18px !important; font-size: 12px; color: var(--fg-mute); line-height: 1.7; }
.hint a, .login-card a { color: var(--accent); text-decoration: none; }
.hint a:hover, .login-card a:hover { text-decoration: underline; }
.ok-msg { color: var(--ok); font-size: 13px; margin: 12px 0 0 !important; line-height: 1.6; }
#senha-form .btn.wide { margin-top: 8px; }

/* ---------------- topbar ---------------- */

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 52px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 600; display: flex; align-items: center; gap: 9px;
  /* virou botao (abre a conversa do Painel): tira a moldura do button e
     herda a tipografia do cabecalho. */
  border: none; background: none; color: inherit; font: inherit;
  cursor: pointer; padding: 0; }
.brand:hover .mark { filter: brightness(1.1); }
.mark {
  background: var(--accent); color: #1a1005; font-weight: 700; font-size: 11px;
  padding: 3px 7px; border-radius: 6px; letter-spacing: .5px;
}
.badges { display: flex; gap: 7px; flex-wrap: wrap; }
.badge {
  font-size: 11.5px; padding: 3px 9px; border-radius: 20px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-dim);
}
.badge.ok { color: var(--ok); border-color: #24422f; background: #15251c; }
.badge.warn { color: var(--warn); border-color: #453a20; background: #241f12; }
.badge.live { color: var(--accent); border-color: #4a2f22; background: #2a1a13; }
.badge.err { color: var(--err); border-color: #5a2a2a; background: #2a1616; }
/* DE QUAL PROJETO. Numa tela que junta dez projetos num lugar só — a caixa, as
   propostas, a fila — o nome do projeto é o primeiro contexto de quem lê, e não
   um detalhe. Fica legível, não apagado como os outros selos. */
.badge.projeto { color: var(--info); border-color: #24374a; background: #16222e; }
/* Indicador de projeto fora de dia no git. Sujo = não commitado (âmbar); push =
   commits não enviados ao GitHub (accent). */
.badge.tipo { color: #6db3c9; border-color: #24404a; background: #13232a; }
.badge.git-sujo { color: var(--warn); border-color: #453a20; background: #241f12; }
.badge.git-push { color: var(--accent); border-color: #4a2f22; background: #2a1a13; }

/* ---------------- Mapa mental do projeto (SVG) ---------------- */
/* Janela do mapa o MAIOR possível: quase a tela inteira. A borda ao redor do modal
   encolhe, e o card vira coluna flex — cabeçalho e legenda fixos, o SVG ocupa todo
   o meio. */
#modal-mapa { padding: 10px; }
/* Especificidade dupla (.modal-card.mapa-card) para vencer o .modal-card base, que
   vem depois no arquivo e limitaria a 430px de largura. */
.modal-card.mapa-card { max-width: none; width: 100%; height: calc(100vh - 20px);
             max-height: calc(100vh - 20px); padding: 16px 18px;
             display: flex; flex-direction: column; overflow: hidden; }
.mapa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.mapa-head h3 { margin: 0; }

/* O FECHAR fica sempre no mesmo lugar: canto superior direito da janela.
   Antes ele vinha no fim da fila de botões da barra, encostado no último —
   ficava diferente em cada tela (dependia de quantos botões havia antes) e
   perto demais de uma ação de verdade, que é como se fecha uma janela sem
   querer. Agora é uma esquina fixa: o olho sabe onde procurar sem ler.

   `margin-left:auto` empurra só ele para a direita, sem mexer na ordem do
   HTML — a tecla Tab continua chegando nele por último, e não primeiro.
   O cabeçalho é `sticky` para o Fechar não sumir quando a janela rola: numa
   tela cheia de conteúdo, o botão de sair tem de estar sempre à vista. */
.mapa-head .fechar-canto, .maq-det-head .fechar-canto { margin-left: auto; }
.modal-card .mapa-head, .modal-card .maq-det-head {
                         position: sticky; top: 0; z-index: 3;
                         background: var(--bg-2); padding-bottom: 6px; }
.mapa-zoom { display: flex; align-items: center; gap: 6px; }
.mapa-zoom #mapa-nivel { min-width: 42px; text-align: center; }
/* `flex: 1 1 0` e nao `1 1 auto`: com base `auto`, o tamanho pedido por esta
   caixa e o do CONTEUDO dela — e o conteudo e um SVG com 110 maquinas, largo e
   alto como um mapa. Numa coluna de altura fixa, ele ganhava a disputa e
   espremia a lista de hipervisores ate ela virar uma tira de poucos pixels,
   impossivel de ler e de rolar. Com base zero, esta caixa fica com o que
   SOBRAR, que e o papel dela: ela ja rola por dentro. */
.mapa-area { flex: 1 1 0; min-height: 120px; overflow: auto; background: var(--bg);
             border: 1px solid var(--line); border-radius: 10px; cursor: grab; }
.mapa-area.arrastando { cursor: grabbing; }
.mapa-area.arrastando * { pointer-events: none; }   /* não seleciona texto ao arrastar */
/* O tamanho em pixels do SVG vem dos atributos width/height (controle de zoom); a
   área rola quando ele é maior. Sem width:100% aqui, senão o CSS venceria o zoom. */
.mapa-svg { display: block; }
.mapa-legenda { flex: 0 0 auto; }
.mapa-edge { stroke: #3a4658; stroke-width: 1.4; }
.mapa-salto { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .85; }
.mapa-card-rect { fill: #161b22; stroke: #2a3442; }
.mapa-nome { fill: var(--fg); font-weight: 700; font-size: 13px; }
.mapa-func { fill: var(--accent); font-size: 11px; }
.mapa-mono { font-family: var(--mono); font-size: 11px; fill: var(--fg-dim); }
.mapa-dim { font-size: 11px; fill: var(--fg-mute); }
.mapa-centro-rect { fill: #2a1a13; stroke: #4a2f22; }
.mapa-centro-t { fill: var(--accent); font-weight: 700; font-size: 14px; }
.mapa-centro-s { fill: var(--fg-mute); font-size: 10px; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
                font-size: 12px; color: var(--fg-mute); align-items: center; }
.mapa-legenda i.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
                         margin-right: 4px; vertical-align: middle; }
.mapa-legenda i.lg-line { display: inline-block; width: 18px; height: 0;
                          border-top: 2px solid #3a4658; vertical-align: middle; margin-right: 4px; }
.mapa-legenda i.lg-line.dash { border-top: 2px dashed var(--accent); }
.mapa-legenda i.lg-line.inf { border-top: 2px solid #3a4656; opacity: .55; }
.mapa-legenda i.lg-line.lat { border-top: 2px dotted #8f7ad9; }

/* Estrutura: organograma agregado. Cada projeto e um cluster com faixa-titulo; as
   maquinas sao clicaveis (abrem a aba Maquinas do projeto). */
.est-cluster-rect { fill: #171c24; stroke: #2a3442; }
.est-cluster-t { fill: var(--accent); font-weight: 700; font-size: 13px; }
#est-area .est-node { cursor: pointer; }
#est-area .est-node:hover .mapa-card-rect { stroke: var(--accent); }
.est-icone { font-size: 16px; }
/* Organograma unifilar: conectores em cotovelo (topologia) e nós de grupo. */
.est-liga { fill: none; stroke: #3a4656; stroke-width: 1.6; }
.est-liga-salto { stroke: var(--accent); stroke-dasharray: 5 4; opacity: .85; }
.est-liga-inf { opacity: .5; }                 /* uplink inferido (nao declarado) */
.est-galho .est-cluster-t { font-size: 12px; }

/* As PORTAS do aparelho: a boca na borda de baixo, o traco que sai dela e o no
   da porta (qual rede ela serve e quantas maquinas estao atras). E o que deixa
   um roteador parecer o que ele e — uma fronteira entre redes, nao um ponto. */
.est-porta-boca { fill: #3fb2a0; stroke: #16211f; stroke-width: 1; }
.est-liga-porta { stroke: #3fb2a0; stroke-width: 1.8; }
.est-porta { cursor: pointer; }
.est-porta-rect { fill: #14201e; stroke: #2e4a45; }
.est-porta:hover .est-porta-rect { stroke: #3fb2a0; }
.est-porta-rect.inativa { opacity: .5; stroke-dasharray: 4 3; }
.est-porta-nome { fill: var(--fg); font-weight: 650; font-size: 12px; }
.est-porta-rede { font-family: var(--mono); font-size: 11px; fill: #7fd3c5; }
.est-porta-papel { fill: #d9a441; font-size: 10px; text-transform: uppercase; }
.est-porta-n { fill: var(--fg-mute); font-size: 11px; }
.est-porta-wan { fill: #d9a441; font-size: 10.5px; font-family: var(--mono); }
.mapa-legenda i.lg-porta { display: inline-block; width: 12px; height: 8px; border-radius: 2px;
                           background: #3fb2a0; vertical-align: middle; margin-right: 4px; }
#mapa-area .est-node { cursor: pointer; }
#mapa-area .est-node:hover .mapa-card-rect { stroke: var(--accent); }
/* Interacoes laterais entre dispositivos (peering/vlan/rota): opt-in, discretas. */
.topo-lat { stroke: #8f7ad9; stroke-width: 1.3; stroke-dasharray: 2 3; opacity: .75; }
.topo-lat-vlan { stroke: #d9a441; }
.topo-lat-rota { stroke: #3fb2a0; }
.topo-lat-dependencia { stroke: #4a90d9; stroke-dasharray: 1 3; }
.topo-lat-rot { fill: var(--fg-dim); font-size: 10px; }
.est-leg-tipos { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }

/* Painel de detalhe e controle da maquina */
.maq-det-card { max-width: min(94vw, 860px); }
.maq-det-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.maq-det-tit h3 { margin: 0; }
.md-sec { border-top: 1px solid var(--line); padding: 12px 0; }
.md-sec:first-child { border-top: 0; }
.md-sec h4 { margin: 0 0 6px; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.md-sec-cab { display: flex; align-items: center; gap: 10px; }
.md-sec-cab h4 { margin: 0; }
.md-info { display: grid; gap: 4px; }
.md-info-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; font-size: 13px; }
.md-info-k { color: var(--fg-mute); }
.md-info-v { color: var(--fg-dim); word-break: break-word; }
.md-acoes, .md-vm-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.md-acoes { margin-top: 4px; }
.md-apps-macro { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.md-mais { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
           background: var(--bg-3); color: var(--fg-dim); font-size: 15px; line-height: 1;
           cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.md-mais:hover { border-color: var(--accent); color: var(--fg); }
.md-nota { margin: 8px 0 6px; }
.md-nota-ta { width: 100%; min-height: 48px; font-size: 13px; }
.md-nota-acoes { display: flex; justify-content: flex-end; margin-top: 5px; }
.md-apps-t { font-size: 12px; color: var(--fg-mute); margin: 8px 0 4px; }
.md-apps-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.md-app { font-size: 12px; color: var(--fg-dim); background: var(--bg); border: 1px solid var(--line);
          border-radius: 6px; padding: 3px 8px; }
.badge.mono { font-family: var(--mono); }
.md-bruto { font-family: var(--mono); font-size: 11px; white-space: pre-wrap; background: var(--bg);
            border: 1px solid var(--line); border-radius: 6px; padding: 9px; max-height: 260px; overflow: auto; }
.md-vm { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.md-vm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.md-vm-id { font-family: var(--mono); color: var(--fg-mute); }
.md-vm-nome { font-weight: 600; }
.md-vm-acoes { margin-left: auto; }

/* Sub-organograma dos apps: máquina → redes docker → containers (dependências). */
.so-wrap { overflow-x: auto; background: var(--bg); border: 1px solid var(--line);
           border-radius: 8px; padding: 6px; margin: 4px 0 6px; }
.so-svg { width: 100%; height: auto; display: block; min-width: 440px; }
.so-edge { stroke: #3a4658; stroke-width: 1.3; }
.so-edge.dash { stroke: var(--accent); stroke-dasharray: 4 3; opacity: .8; }
.so-t { fill: var(--fg-dim); font-size: 11px; }
.so-maq rect, .so-maq { fill: #2a1a13; stroke: #4a2f22; }
.so-rede { fill: #13232a; stroke: #24404a; }
.so-cont { fill: #161b22; stroke: #2a3442; }

/* Turno da conversa na aba Execuções (opção A) — leva ao chat com o agente. */
.conversa-turno { cursor: pointer; border-left: 3px solid var(--accent); }
.conversa-turno:hover { background: var(--bg-3); }

/* Legenda dos selos de projeto (botão «?» na barra lateral). */
.legenda-git { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
               padding: 9px 11px; margin: 0 0 8px; font-size: 12px; color: var(--fg-mute);
               display: flex; flex-direction: column; gap: 6px; }
.legenda-git .badge { margin-right: 4px; }

/* O selo que virou controle: mesma aparencia de selo, com a seta do seletor. */
.badge-select {
  width: auto; font-size: 11.5px; padding: 3px 26px 3px 9px; border-radius: 20px;
  background: var(--bg-3) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa7b6' stroke-width='1.4'/%3E%3C/svg%3E")
              no-repeat right 9px center / 9px;
  border: 1px solid var(--line); color: var(--fg-dim);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.badge-select:hover { border-color: #3a4658; color: var(--fg); }
.badge-select.ok   { color: var(--ok); border-color: #24422f; background-color: #15251c; }
.badge-select.warn { color: var(--warn); border-color: #453a20; background-color: #241f12; }
.badge-select.err  { color: var(--err); border-color: #5a2a2a; background-color: #2a1616; }
.badge-select:disabled { opacity: .5; cursor: wait; }

/* O menu do servidor: o que vale para a maquina inteira sai da regua do projeto
   e vem para ca — sistema, usuarios, regras, a conta e a saida. */
.menu-btn { font-size: 18px; line-height: 1; padding: 4px 10px; }
.menu {
  position: absolute; top: calc(100% + 4px); right: 12px; z-index: 30; width: 296px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.menu-item {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13.5px;
  background: none; border: 0; color: var(--fg); cursor: pointer;
  padding: 9px 11px; border-radius: 8px;
}
.menu-item small { display: block; color: var(--fg-mute); font-size: 11.5px; margin-top: 1px; }
.menu-item:hover { background: var(--bg-3); }
.menu-item:disabled { opacity: .45; cursor: not-allowed; }
.menu-item:disabled:hover { background: none; }
.menu-sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }

/* ---------------- layout ---------------- */

/* Tres janelas na mesma tela — a lista de projetos, o projeto aberto e a
   conversa —, e cada uma pode sair de cena. Quem fica ocupa o espaço de quem
   saiu: a coluna do meio e sempre o `1fr`, seja ela o projeto ou a conversa. */
.layout {
  display: grid; height: calc(100vh - 52px);
  --barra: 268px;
  grid-template-columns: minmax(0, 1fr);
}
/* projeto + conversa: a faixa do meio decide quanto cada um ocupa */
.layout.com-doca { grid-template-columns: minmax(0, 1fr) 5px var(--doca, 420px); }

/* só a conversa: ela toma a tela inteira, e nao ha o que redimensionar */
.layout.sem-centro .main,
.layout.sem-centro .divisor { display: none; }
.layout.sem-centro.com-doca { grid-template-columns: minmax(0, 1fr); }

.sidebar {
  background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
.side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 10px;
}
.side-head h2 { margin: 0; font-size: 12px; text-transform: uppercase;
                letter-spacing: .8px; color: var(--fg-dim); flex: 1; }
/* O seletor de ordem cabe na mesma linha do titulo: ele e ajuste, nao acao, e
   nao pode competir com o «+ Novo». Fonte pequena e fundo do painel — quem nao
   esta procurando por ele nem repara. */
.ordem-projetos {
  background: var(--bg); color: var(--fg-dim); border: 1px solid var(--line);
  border-radius: 6px; font-size: 11px; padding: 2px 4px; max-width: 132px;
}
.ordem-projetos:hover { color: var(--fg); }
.project-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }

/* Infraestrutura: o outro domínio do painel, separado dos Projetos por uma
   linha. Um só atalho — o organograma da rede — para não competir com a lista. */

/* A barra recolhida: some tudo, fica o botao de trazer de volta. Só onde ha
   largura para dividir — no celular, recolher a lista nao daria espaco a
   ninguem, entao o trilho nem existe. */
.trilho-btn { padding: 3px 7px; font-size: 13px; line-height: 1; }
@media (min-width: 861px) {
  .layout.barra-recolhida { --barra: 46px; }
  .layout.barra-recolhida .side-head { padding: 12px 6px; justify-content: center; }
  .layout.barra-recolhida .side-head h2,
  .layout.barra-recolhida #btn-new-project,
  .layout.barra-recolhida .project-list,
  .layout.barra-recolhida .side-foot { display: none; }
}

/* O ⚙ de cada projeto: abre a janela do projeto (Arquivos/Execuções/Agentes).
   Clicar na linha fala com o agente; o ⚙ e o caminho de quem quer inspecionar. */
.project .name .engrenagem {
  margin-left: auto; flex: none; font-size: 12px; padding: 2px 7px; line-height: 1.4;
  opacity: 0; transition: opacity .12s;
  /* Numa barra estreita, os selos do projeto (git, contadores, «sem push»)
     empurravam o ⚙ para fora da vista — e ele era a ÚNICA volta para a janela
     do projeto. Ordem alta e z-index o mantêm alcançável. */
  order: 99; position: relative; z-index: 1;
}
/* O ⚙ é a saída: no projeto aberto ele nunca depende de hover para existir. */
.project.active .name .engrenagem { opacity: 1; }
.project:hover .name .engrenagem,
.project.active .name .engrenagem,
.project .name .engrenagem.ligada { opacity: 1; }
.project .name .engrenagem.ligada { color: var(--accent); border-color: #4a3327; }
@media (hover: none) { .project .name .engrenagem { opacity: 1; } }

.project {
  padding: 10px 11px; border-radius: 9px; cursor: pointer; margin-bottom: 3px;
  border: 1px solid transparent; transition: background .12s;
}
.project:hover { background: var(--bg-3); }
.project.active { background: var(--accent-soft); border-color: #4a3327; }
/* O projeto com quem se esta conversando agora: a barra da esquerda mostra
   qual agente esta do outro lado da tela. */
.project.conversando .name .nome-proj { color: var(--accent); }
.project.conversando::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.project { position: relative; }
/* A linha do nome carrega o nome e os selos (git, «● 8», «sem push», «painel»)
   e o ⚙. Numa barra estreita isso nao cabe — e o que nao cabia era CORTADO no
   meio do ultimo selo, que e a pior perda possivel: o selo existe para avisar,
   e meio selo nao avisa nada.
   Duas decisoes: os selos podem passar para uma segunda linha (`wrap`), e o
   NOME e o unico que encurta com reticencias (`nome-proj`). Nome com reticencia
   continua reconhecivel; selo pela metade, nao. */
.project .name {
  font-weight: 550; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; row-gap: 4px; min-width: 0;
}
.project .name .nome-proj {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.project .meta { font-size: 11.5px; color: var(--fg-mute); margin-top: 2px; }
.project .name .badge { font-size: 9.5px; padding: 1px 6px; flex: none; }
.badge.self { color: var(--accent); border-color: #4a3327; background: #2a1a13; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
       display: inline-block; animation: pulse 1.4s infinite; flex: none; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.side-foot { display: flex; border-top: 1px solid var(--line); }
.side-foot .stat { flex: 1; padding: 11px; text-align: center; }
.side-foot .stat span { display: block; font-size: 18px; font-weight: 600; }
.side-foot .stat small { color: var(--fg-mute); font-size: 11px; }

.main { display: flex; flex-direction: column; overflow: hidden; }
/* «Mantenha o cabecalho sempre que possivel» (operador, 16/10): o nome do
   projeto e a regua de abas saiam de vista ao rolar, e quem estava no fim de
   uma lista longa perdia a referencia de ONDE esta e como sair dali. Gruda no
   topo da coluna — abaixo do topbar, que ja e sticky em 52px. */
.main-head { padding: 16px 22px 0; border-bottom: 1px solid var(--line);
             background: var(--bg); position: sticky; top: 0; z-index: 8; }
/* Idem: o nome e o caminho do projeto moram aqui, e um caminho longo nao pode
   empurrar o cabecalho para fora da largura reservada. */
.main-head .cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                     align-items: center; }
.main-head h2 { margin: 0; font-size: 18px; }
.main-head .path { font-family: var(--mono); font-size: 12px; margin-top: 2px; grid-column: 1 / -1; }
.main-head .tabs { grid-column: 1 / -1; }
.cabeca-acoes { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 8px; }

/* O menu preso ao botao que o abre — sem isto ele se penduraria no canto da
   pagina, e nao embaixo do ⋮. */
.menu-wrap { position: relative; }
.menu-wrap .menu { top: calc(100% + 4px); right: 0; }

/* Tela do servidor (Sistema, Usuarios): entra no lugar da regua do projeto e
   leva junto o caminho de volta — ela nao pertence a projeto nenhum. */
.server-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.fechar-x { font-size: 13px; line-height: 1; padding: 4px 9px; }

.tabs { display: flex; gap: 2px; margin-top: 12px; }
.tab {
  font: inherit; font-size: 13px; background: none; border: none; cursor: pointer;
  color: var(--fg-dim); padding: 9px 14px; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 550; }

.pill { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px;
        background: var(--bg-3); color: var(--fg-dim); margin-left: 4px; vertical-align: 1px; }
.pill.alert { background: #301c1c; color: var(--err); }

/* ---------------- proximos passos (aba Agentes) ---------------- */

/* O retrato de agora: o que ja rodou neste projeto, e como acabou. */
.saude { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
         gap: 8px; margin-bottom: 12px; }
.saude-item {
  border: 1px solid var(--line-soft); border-left-width: 3px; border-radius: 8px;
  background: var(--bg); padding: 8px 11px;
}
.saude-item.ok { border-left-color: var(--ok); }
.saude-item.aviso { border-left-color: var(--warn); }
.saude-item.erro { border-left-color: var(--err); }
.saude-item.vazio { border-left-color: var(--line); }
.saude-chave { font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
               color: var(--fg-mute); }
.saude-valor { font-size: 12.5px; color: var(--fg-dim); margin-top: 2px; }

.testes-barra { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
                margin-bottom: 12px; }
.testes-barra code { font-size: 11.5px; }
.testes-saida {
  width: 100%; max-height: 260px; margin: 6px 0 0; border-radius: 8px;
  border: 1px solid var(--line);
}
.passo-evidencia { font-size: 12px; color: var(--fg-mute); margin: 2px 0 0 18px;
                   font-family: var(--mono); }

.praticas {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 12px 14px; margin-bottom: 16px;
}
.praticas-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.praticas-cab .btn { margin-left: auto; }
.passo { padding: 9px 0; border-top: 1px solid var(--line-soft); }
.passo:first-of-type { border-top: 0; }
.passo-topo { display: flex; align-items: baseline; gap: 8px; }
.passo-marca { color: var(--fg-mute); }
.passo.p-alta .passo-marca { color: var(--err); }
.passo.p-media .passo-marca { color: var(--warn); }
.passo.feito { opacity: .55; }
.passo.feito .passo-marca { color: var(--ok); }
.passo-porque { font-size: 12.5px; color: var(--fg-dim); margin: 3px 0 0 18px; line-height: 1.55; }
.passo-como {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 0 18px;
  font-size: 12.5px; color: var(--fg-mute);
  border-left: 2px solid var(--accent); padding-left: 9px;
}

/* ---------------- git do projeto ---------------- */

.git-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.git-ramo { display: flex; align-items: baseline; gap: 8px; }
.git-ramo strong { font-family: var(--mono); color: var(--accent); }
.git-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.git-tit { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.git-arquivo { cursor: pointer; }
.git-arquivo.active, .hrow.active { border-color: var(--accent); background: var(--accent-soft); }
.git-arquivo .mono { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.git-guardar { display: flex; gap: 8px; margin-top: 10px; }
.git-guardar input { flex: 1; }
.git-detalhe {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); display: flex; flex-direction: column; max-height: 62vh;
}
/* O diff com as cores que todo mundo espera: verde entra, vermelho sai. */
.git-detalhe .viewer-body { white-space: pre-wrap; word-break: break-word; }

@media (max-width: 1100px) { .git-corpo { grid-template-columns: 1fr; } }

/* ---------------- destinos e servidores ---------------- */

.hrow.destino .hp { min-width: 0; }
.hrow.orfao { border-color: #4a2b2b; }
.hrow .hm.mono, .hrow a.hm { font-family: var(--mono); font-size: 11.5px; }
.hrow a.hm { color: var(--info); text-decoration: none; }
.hrow a.hm:hover { text-decoration: underline; }
.badge.warn { cursor: help; }

.chave-ssh {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2); padding: 12px 14px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.chave-txt {
  margin: 0; padding: 9px 11px; background: var(--bg); border-radius: 7px;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim);
  white-space: pre-wrap; word-break: break-all; width: 100%;
}
.mapa-tit { font-size: 13px; color: var(--fg-dim); margin: 22px 0 10px; }

/* A saida do envio, com a mesma cara da do console — e o mesmo motor. */
.envio {
  margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); overflow: hidden;
}
.envio-cab {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.envio-cab strong { font-family: var(--mono); font-size: 11.5px; color: var(--accent);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envio .console-saida { max-height: 340px; }

/* ---------------- console do projeto ---------------- */

/* Divide a janela do projeto por baixo: as abas ficam em cima, o console
   embaixo, e a faixa de cima dele decide quanto cada um ocupa. */
.console {
  flex: 0 0 auto; display: flex; flex-direction: column;
  height: var(--console, 260px); min-height: 120px;
  background: var(--bg-2); border-top: 1px solid var(--line);
}
.console-puxador { height: 5px; cursor: row-resize; background: var(--line); flex: 0 0 auto; }
.console-puxador:hover, .console-puxador.puxando { background: var(--accent); }
.console-cab {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.console-tit { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.console-cab code { font-size: 11px; padding: 2px 7px; }
.console-estado { font-size: 11.5px; color: var(--fg-mute); }
.console-estado.rodando { color: var(--accent); }
.console-saida {
  flex: 1; margin: 0; padding: 10px 12px; overflow: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; background: var(--bg);
}
.console-saida .cmd { color: var(--accent); }
.console-saida .fim { color: var(--fg-mute); }
.console-saida .fim.falhou { color: var(--err); }
.console-saida .aviso { color: var(--warn); }
.console-linha {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-top: 1px solid var(--line-soft); flex: 0 0 auto;
}
/* Setas de historico do console (uteis no celular, ao lado do Executar) */
#console-cmd { flex: 1 1 auto; min-width: 0; }   /* encolhe p/ caber os botoes */
.con-hist { flex: 0 0 auto; min-width: 34px; padding: 5px 9px; font-size: 15px;
            line-height: 1; font-family: var(--mono); }
.console-prompt { font-family: var(--mono); color: var(--accent); }
.console-linha input {
  flex: 1; font-family: var(--mono); font-size: 12.5px; padding: 6px 9px;
}
body.redimensionando-v { cursor: row-resize; user-select: none; }

.panel { display: none; flex: 1; overflow-y: auto; padding: 18px 22px 40px; }
.panel.active { display: block; }

.empty { color: var(--fg-mute); text-align: center; padding: 50px 20px; font-size: 13px; }

/* ---------------- composer ---------------- */

/* No topo da aba Execuções ficam duas coisas, e só elas: a caixa do comando
   novo e a linha da execução aberta. Ficam grudadas ali enquanto a pilha de
   eventos corre por baixo — e a pilha vem invertida, o mais recente na frente. */
.comandos-topo {
  position: sticky; top: 0; z-index: 6; background: var(--bg);
  margin: -18px -22px 12px; padding: 18px 22px 4px;
}

.composer { background: var(--bg-2); border: 1px solid var(--line);
            border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.composer-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px;
                flex-wrap: wrap; }
.agente-select { width: auto; max-width: 230px; padding: 4px 8px; font-size: 12px; }

.run-head {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px; font-size: 12.5px;
}
.run-head b { font-weight: 600; }

/* A volta para a lista de execuções, colada na linha da execução aberta. */
.exec-barra { display: flex; align-items: flex-start; gap: 10px; }
.exec-barra .run-head { flex: 1; margin-bottom: 8px; }

/* ---------------- stream ---------------- */

.stream { display: flex; flex-direction: column; gap: 9px; }

.ev { border: 1px solid var(--line-soft); border-radius: var(--radius);
      background: var(--bg-2); overflow: hidden; }
.ev-head {
  display: flex; align-items: center; gap: 9px; padding: 8px 13px;
  font-size: 12px; color: var(--fg-dim); border-bottom: 1px solid var(--line-soft);
}
.ev-head .tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px; background: var(--bg-3);
}
.ev-body { padding: 11px 13px; white-space: pre-wrap; word-break: break-word;
           font-size: 13.5px; line-height: 1.62; }
/* Saida de comando tambem QUEBRA: a linha que nao cabe ja exigia rolar para ser
   lida, e dobrada ela ao menos aparece inteira. O `pre-wrap` mantem as colunas
   de quem cabe — so a linha comprida e que dobra. */
.ev-body.code { font-family: var(--mono); font-size: 12.5px; color: var(--fg-dim);
                max-height: 330px; overflow: auto;
                white-space: pre-wrap; word-break: break-word; }

.ev.text .tag { background: #1c2b22; color: var(--ok); }
.ev.tool .tag { background: #1b2735; color: var(--info); }
.ev.result .tag { background: #2a1a13; color: var(--accent); }
.ev.err .tag, .ev.stderr .tag { background: #301c1c; color: var(--err); }
.ev.sys .tag { background: var(--bg-3); color: var(--fg-mute); }
.ev.think .tag { background: #241f12; color: var(--warn); }
.ev.result { border-color: #4a3327; }
.ev.err { border-color: #4a2b2b; }

.ev-head .toggle { margin-left: auto; cursor: pointer; color: var(--fg-mute);
                   font-size: 11px; user-select: none; }
.ev-head .toggle:hover { color: var(--fg); }

.typing { display: inline-block; width: 7px; height: 14px; background: var(--accent);
          vertical-align: text-bottom; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }

/* ---------------- arquivos ---------------- */

/* A barra de entrada e saida da pasta do projeto. */
.arq-barra {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.arq-barra code { font-size: 12px; padding: 3px 8px; }

/* O convite de soltar arquivo: so aparece com um arrasto em curso. */
.soltar-aqui {
  position: fixed; inset: 52px 0 0 0; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14, 17, 22, .82); pointer-events: none;
}
.soltar-aqui span {
  border: 2px dashed var(--accent); border-radius: 16px;
  padding: 22px 30px; color: var(--accent); font-size: 15px;
}

/* `minmax(0, 1fr)` e nao `1fr`: uma trilha `1fr` tem largura minima AUTOMATICA,
   ou seja, nao encolhe abaixo do conteudo mais largo que tem dentro. Com o
   visor mostrando um arquivo de linhas longas, a coluna inchava ate a linha
   mais comprida e a barra horizontal aparecia embaixo da PAGINA INTEIRA — nao
   do visor. O `.layout` ja fazia assim; o `.files` tinha ficado de fora. */
.files { display: grid; grid-template-columns: 300px minmax(0, 1fr);
         gap: 14px; height: 100%; }
.tree { border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--bg-2); overflow: auto; padding: 8px; max-height: 72vh; }
.tree-item { padding: 3px 8px; border-radius: 6px; cursor: pointer;
             font-family: var(--mono); font-size: 12px; white-space: nowrap;
             display: flex; gap: 7px; align-items: center; }
.tree-item:hover { background: var(--bg-3); }
.tree-item.active { background: var(--accent-soft); }
.tree-item .sz { margin-left: auto; color: var(--fg-mute); font-size: 11px; }
.tree-item.dir { color: var(--info); }
.tree-item.note { color: var(--fg-mute); font-style: italic; }

.viewer { border: 1px solid var(--line); border-radius: var(--radius);
          background: var(--bg-2); display: flex; flex-direction: column; max-height: 72vh; }
.viewer-head { padding: 9px 13px; border-bottom: 1px solid var(--line);
               font-family: var(--mono); font-size: 12px; color: var(--fg-dim);
               display: flex; align-items: center; gap: 10px; }
.viewer-head #viewer-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-head .btn { margin-left: auto; flex: none; }
/* QUEBRA EM VEZ DE ROLAR (operador, 15/10/2026). Era `white-space: pre`, e um
   README com tabela ou uma linha longa empurrava a barra horizontal para baixo
   da pagina inteira — ler virava rolar para a direita e voltar, linha a linha.
   `pre-wrap` preserva as quebras e a indentacao do arquivo, e so dobra a linha
   que nao cabe; `break-word` cuida de URL e caminho longo, que nao tem espaco
   onde dobrar. E o mesmo par que a conversa ja usava em toda bolha. */
.viewer-body { margin: 0; padding: 13px; overflow: auto; font-family: var(--mono);
               font-size: 12.5px; line-height: 1.6;
               white-space: pre-wrap; word-break: break-word; }

/* ---------------- historico ---------------- */

.history { display: flex; flex-direction: column; gap: 8px; }
.hrow {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2); cursor: pointer;
}
.hrow:hover { border-color: var(--line); background: var(--bg-3); }
.hrow .st { font-size: 10.5px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .5px; padding: 3px 8px; border-radius: 5px; flex: none; }
.st.done { background: #15251c; color: var(--ok); }
.st.running, .st.starting, .st.stopping { background: #2a1a13; color: var(--accent); }
.st.error, .st.timeout { background: #301c1c; color: var(--err); }
.st.stopped, .st.interrupted { background: var(--bg-3); color: var(--fg-mute); }
.hrow .hp { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .hm { font-size: 11.5px; color: var(--fg-mute); flex: none; }

/* ---------------- sistema ---------------- */

.system { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--bg-2); padding: 14px 16px; }
.card .k { font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
           color: var(--fg-mute); margin-bottom: 5px; }
.card .v { font-size: 16px; font-weight: 550; word-break: break-word; }
.card .v.mono { font-family: var(--mono); font-size: 13px; }

/* ---------------- agentes ---------------- */

.ag-intro { margin: 0 0 14px; line-height: 1.6; max-width: 76ch; }

.ag-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 14px 16px; margin-bottom: 12px;
}
.ag-box h3 { margin: 0 0 4px; font-size: 14px; }
.ag-box p { margin: 0 0 9px; line-height: 1.55; }
/* Item 3: aviso de que a caixa descartou trechos do padrão + ver/recolocar padrão. */
.ag-descartado { font-size: 12px; color: var(--warn); background: #241f12;
                 border: 1px solid #453a20; border-radius: 6px; padding: 5px 9px; margin: 0 0 8px; }
.ag-box-acoes { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.ag-padrao { margin: 8px 0 0; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line);
             border-radius: 6px; font-size: 12px; white-space: pre-wrap; color: var(--fg-mute);
             max-height: 220px; overflow: auto; }

.ag-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ag-campo label { display: block; font-size: 11px; text-transform: uppercase;
                  letter-spacing: .7px; color: var(--fg-mute); margin-bottom: 5px; }
.ag-campo input, .ag-campo select { padding: 7px 10px; font-size: 13px; }
.ag-opcoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; }

.ag-efetivo {
  margin-top: 13px; padding: 9px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--fg-dim);
}
.ag-efetivo.aviso { border-color: #453a20; background: #1e1c14; color: var(--warn); }

.ag-pendente {
  margin-top: 8px; font-size: 12px; color: var(--warn);
  border-left: 2px solid var(--warn); padding-left: 9px;
}
.ag-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; }
.ag-grade .ag-box { margin-bottom: 0; display: flex; flex-direction: column; }
.ag-grade textarea { margin-top: auto; }

.ag-acoes { display: flex; align-items: center; gap: 14px; margin: 16px 0 26px; }
.ag-servidor { border-top: 1px solid var(--line); padding-top: 18px; }
.ag-servidor .users-head { align-items: center; }
.hm.mono { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim);
           word-break: break-all; }
#modal-agente .modal-card { max-width: 500px; }
#modal-agente textarea { min-height: 62px; }

/* Cada variavel e um bloco fechado: nome, campo, de onde tirar a chave e,
   quando ja ha uma guardada, como apaga-la. */
#modal-chaves .modal-card { max-width: 500px; }
.ch-var { padding-top: 6px; border-top: 1px solid var(--line); margin-top: 16px; }
.ch-var:first-child { border-top: 0; margin-top: 10px; }
.ch-var input[type=password]:disabled { opacity: .45; }

/* ---------------- usuarios ---------------- */

.whoami { display: flex; align-items: center; gap: 8px; }
.whoami .who-name { font-size: 13px; color: var(--fg-dim); max-width: 180px;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.papel { text-transform: lowercase; }
.badge.papel.superadmin { color: var(--accent); border-color: #4a3327; background: #2a1a13; }
.badge.papel.admin { color: var(--info); border-color: #24374a; background: #16222e; }
.badge.papel.operador { color: var(--fg-dim); }

.users-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.users-head p { flex: 1; line-height: 1.6; }
.users { display: flex; flex-direction: column; gap: 8px; }

.urow {
  display: flex; align-items: center; gap: 14px; padding: 12px 15px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-2);
}
.urow.inativo { opacity: .58; }
.uident { flex: 1; min-width: 0; }
.uname { display: flex; align-items: center; gap: 7px; font-weight: 550; flex-wrap: wrap; }
.uident .hm { font-size: 11.5px; color: var(--fg-mute); }
.uacoes { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.papel-select { width: auto; padding: 4px 8px; font-size: 12px; }

.email-status {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 13px 15px; margin-bottom: 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.email-status.warn { border-color: #453a20; background: #1e1c14; }
.email-status.ok { border-color: #24422f; background: #141d18; }
.email-status .es-title { font-weight: 600; font-size: 13px; }
.email-status .es-body { font-size: 12.5px; color: var(--fg-dim); line-height: 1.6; }

#ml-link { font-family: var(--mono); font-size: 12px; }

/* ---------------- modal / toast ---------------- */

/* A ESTRUTURA NAO COBRE A CONVERSA (operador, 15/10/2026). Ela e um modal
   `inset:0`, que ficava por cima da coluna da direita — e a conversa, que e
   fixa e vale em toda pagina, sumia justamente na Estrutura. Com a doca aberta
   o modal para na borda dela. So a Estrutura: dialogo curto (novo projeto,
   confirmacao) e passageiro e pode cobrir a tela toda. */
body.com-doca #modal-estrutura { right: var(--doca); }
@media (max-width: 860px) {
  /* No celular nao ha doca: a Estrutura volta a valer a tela inteira. */
  body.com-doca #modal-estrutura { right: 0; }
}

.modal { position: fixed; inset: 0; background: rgba(6,8,11,.72);
         display: grid; place-items: center; z-index: 60; padding: 20px;
         /* O fundo tambem rola. Sem isto, um card mais alto que a area visivel
            ficava centralizado e CORTADO em cima e embaixo, sem alcance nenhum:
            no celular, o operador via a primeira pendencia e o «Fechar», e nada
            no meio. Relatado em 30/09, no Frota, com 5 pendencias. */
         overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* `dvh` e a altura VISIVEL de verdade. No Safari do iPhone, `100vh` mede a tela
   SEM as barras do navegador — entao `calc(100vh - 40px)` ainda e mais alto que
   o que se ve, e o card passa do alcance em vez de rolar por dentro. */
@supports (height: 100dvh) {
  .modal-card { max-height: calc(100dvh - 40px); }
  .modal-card.mapa-card { height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); }
  /* A folha de escolha pelo mesmo motivo: ela media 80vh, que no iPhone e mais
     alto do que se ve, e a lista passava do alcance por baixo. */
  .folha-escolha-card { max-height: 80dvh; }
}
@media (max-width: 860px) {
  /* Encostado no topo, e nao centralizado: card alto centralizado perde as duas
     pontas de uma vez. */
  .modal { place-items: start center; padding: 10px; }
  .modal-card { max-height: calc(100dvh - 20px); }
}

/* A caixa do operador rola na LISTA, com o cabecalho parado: e uma fila longa, e
   perder o «Ver todas»/«Fechar» ao rolar e o que obriga a voltar ao topo. */
#modal-caixa .modal-card { display: flex; flex-direction: column; padding: 18px 8px 12px; }
#modal-caixa .mapa-head { padding: 0 12px 6px; }
/* `min-height: 0` e o que autoriza um filho flex a ENCOLHER abaixo do conteudo —
   sem ele, a lista cresce e quem rola vira a pagina inteira (ou ninguem). */
#modal-caixa .caixa-lista { flex: 1 1 auto; min-height: 0; }

/* O PLACAR tem o mesmo problema da caixa, e pelo mesmo motivo: com nove
   projetos e trinta apontamentos, o corpo passa da tela e o cabeçalho (com o
   «Fechar») sobe junto. Relatado pelo operador em 30/09 — «as caixas precisam de
   uma barra de rolagem». Aqui o corpo rola e o cabeçalho fica. */
#modal-acomp .modal-card { display: flex; flex-direction: column; }
#modal-acomp #acomp-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto;
                            -webkit-overflow-scrolling: touch; }
/* O formulário de editar/cadastrar máquina abre POR CIMA do detalhe da máquina e
   da lista de descoberta (que também são modais); sem isto, por vir antes no
   DOM, ele nascia atrás e sumia. Fica abaixo do toast (80). */
#modal-maquina { z-index: 70; }
.modal-card { background: var(--bg-2); border: 1px solid var(--line);
              border-radius: 14px; padding: 24px; width: 100%; max-width: 430px;
              box-shadow: 0 24px 60px rgba(0,0,0,.5);
              /* Modal mais alto que a tela rola por dentro, em vez de cortar o
                 rodapé (com os botoes Salvar/Cancelar) fora do alcance. */
              max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-card h3 { margin: 0 0 18px; font-size: 17px; }
.modal-card label { display: block; font-size: 12px; color: var(--fg-dim); margin: 14px 0 6px; }
.modal-card label.check { margin-top: 16px; }
.modal-card small { display: block; margin-top: 5px; font-size: 11.5px; }
.modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 22px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  padding: 10px 18px; border-radius: 10px; z-index: 80; font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.toast.err { border-color: #6a3a3a; color: #e69a9a; }

/* ---------------- regras de inicializacao de projeto ---------------- */

/* Gaveta presa ao cabecalho: abre por cima do painel, sem empurrar o layout
   (que tem altura fixa de 100vh - 52px). No celular, onde a topbar quebra de
   linha e a altura dela deixa de ser 52px, ela volta para o fluxo normal. */
.regras-box {
  position: fixed; top: 52px; left: 0; right: 0; z-index: 19;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 16px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  max-height: calc(100vh - 52px);
}
.regras-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.regras-head h3 { margin: 0; font-size: 14px; }
.regras-box textarea {
  flex: 1; min-height: 200px; max-height: calc(100vh - 220px); line-height: 1.5;
}
.regras-box textarea[readonly] { opacity: .8; }
.regras-box p { margin: 0; max-width: 100ch; }

/* ---------------- doca da conversa ---------------- */

.divisor { background: var(--line); cursor: col-resize; }
.divisor:hover, .divisor.puxando { background: var(--accent); }
.divisor:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

.doca {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); border-left: 1px solid var(--line);
}
.doca-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.doca-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
            color: var(--fg-mute); }
.doca-cab strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis;
                   white-space: nowrap; }
.doca iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }

/* Enquanto a faixa é arrastada, o ponteiro não pode “entrar” no quadro da
   conversa: se entrar, o arrasto morre ali e a largura congela. */
body.redimensionando { cursor: col-resize; user-select: none; }
body.redimensionando .doca iframe { pointer-events: none; }

/* ---------------- responsivo ---------------- */

@media (max-width: 860px) {
  .regras-box { position: static; max-height: none; box-shadow: none; }
  .regras-box textarea { max-height: 50vh; }
  .layout, .layout.com-doca, .layout.sem-centro.com-doca {
    grid-template-columns: 1fr; height: auto;
  }
  .divisor { display: none; }
  .doca { border-left: 0; border-top: 1px solid var(--line); height: 80vh; }
  .trilho-btn { display: none; }
  /* A janela do meio nao se fecha onde ela e a tela inteira. */
  .layout.sem-centro .main { display: flex; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .files { grid-template-columns: 1fr; }
  .tree { max-height: 30vh; }
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; }
  .badges { order: 3; width: 100%; }
  /* Hostname e versao do servidor saem do cabeçalho no celular: viram duas
     linhas de identidade que empurram o conteudo. Continuam na pagina Sistema. */
  .so-desktop { display: none; }
  /* empilhado, a janela do meio flui e a pagina rola (sem recorte) */
  .main { overflow: visible; }
  .main-head { padding: 12px 14px 0; }
  .panel { padding: 14px 14px 34px; }
  /* as abas nao cabem numa linha no celular: rolam no eixo x, sem barra visivel */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
}

/* ---------------- equipe do projeto ----------------
   A mesma linha da tela de usuarios, com uma grade de caixas embaixo: o nome
   de quem trabalha aqui em cima, e o que essa pessoa pode fazer logo abaixo,
   visivel sem clicar. Direito escondido atras de um "editar" e direito que
   ninguem confere. */

.mrow {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 15px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-2);
}
.mrow.dono { border-color: #3a4658; }
.mrow.fora { opacity: .6; }
.mrow-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mrow-cab .uident { flex: 1; min-width: 160px; }
.mrow-acoes { display: flex; gap: 7px; flex-wrap: wrap; }

.dir-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 5px 14px; padding-top: 4px; border-top: 1px dashed var(--line-soft);
}
.dir-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
            color: var(--fg-dim); cursor: pointer; user-select: none; }
.dir-item input { accent-color: var(--accent); width: auto; }
.dir-item.sensivel { color: var(--warn); }
.dir-item.herdado { color: var(--info); cursor: help; }
.dir-item input:disabled { cursor: not-allowed; }
.dir-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.legenda-direitos { margin-top: 16px; display: grid; gap: 6px;
                    font-size: 11.5px; color: var(--fg-mute); line-height: 1.5; }
.legenda-direitos b { color: var(--fg-dim); font-weight: 600; }
.legenda-direitos .alerta { color: var(--warn); }

.direitos-caixa {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  background: var(--bg); max-height: 210px; overflow-y: auto;
}
.modal-card.larga { max-width: 620px; }

/* ---------------- descoberta de rede (nmap) ---------------- */
.desc-lista { margin-top: 12px; max-height: 52vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.desc-row { display: grid; grid-template-columns: auto 1fr 120px 120px 1fr auto;
  align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.desc-abrir { white-space: nowrap; }

/* ---------------- biblioteca de software ---------------- */
.bib-lista { margin-top: 12px; max-height: 56vh; overflow-y: auto; display: grid; gap: 10px; }
.bib-item { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--bg); }
.bib-item-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bib-item-desc { color: var(--fg-dim); font-size: 12.5px; margin: 6px 0; }
.bib-item-acoes { display: flex; gap: 8px; margin-top: 6px; }
.bib-tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
           background: var(--bg-2); border: 1px solid var(--line); color: var(--fg-dim); }
.bib-tag.local { border-color: #6a7fd9; color: #9db0ff; }
.bib-tag.conf { border-color: #c9a341; color: #e0c46a; }
.bib-tag.rein { border-color: #d9704e; color: #e59a80; }
.bib-resultado { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px;
                 padding: 12px; background: var(--bg); max-height: 46vh; overflow-y: auto; }
.bib-res-tit { font-weight: 600; margin-bottom: 8px; }
.bib-alvos { display: flex; flex-wrap: wrap; gap: 8px; }
.bib-passo { border-top: 1px solid var(--line); padding: 8px 0; font-size: 12.5px; }
.bib-passo pre { white-space: pre-wrap; word-break: break-word; margin: 6px 0 0;
                 font-size: 11px; color: var(--fg-dim); max-height: 160px; overflow: auto; }
.bib-passo.bib-instalado b, .bib-passo.bib-ja-instalado b { color: #3fb27f; }
.bib-passo.bib-falhou b { color: #d9704e; }
.bib-form { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.bib-form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bib-form label { display: block; font-size: 12px; color: var(--fg-dim); margin: 10px 0 4px; }
.bib-form input[type=text], .bib-form input:not([type]) {
  width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-2); color: var(--fg); font-size: 13px; }
.bib-form label.check { display: flex; align-items: center; gap: 7px; }

/* Conexões (interações) no detalhe da máquina */
.md-conex { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.md-conex-lista { display: grid; gap: 5px; margin: 6px 0; }
.md-conex-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.md-conex-row .btn { margin-left: auto; }
.md-conex-add { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 6px; }
/* As portas do aparelho: uma linha por boca, com a rede que ela serve. */
.md-portas { display: grid; gap: 5px; margin: 8px 0; }
/* A linha de formulario que nasce embaixo de um usuario (trocar/apagar). */
/* As duas abas do Cofre: equipamento x projeto. */
.cofre-abas { display: flex; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap; }
.cofre-aba {
  background: var(--bg-2); color: var(--fg-dim); cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 7px 14px; font-size: 13px; font-weight: 550;
}
.cofre-aba:hover { color: var(--fg); border-color: var(--line); }
.cofre-aba.ativa { color: var(--fg); border-color: var(--accent); background: var(--bg); }

.md-user-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                margin: 4px 0 10px; padding: 8px 11px; border-radius: var(--radius);
                border: 1px solid var(--accent); background: var(--bg-2); }
.md-user-form input { min-width: 190px; flex: 1; }
.md-porta-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
                padding: 5px 9px; border: 1px solid var(--line-soft);
                border-radius: var(--radius); background: var(--bg-2); }
.md-porta-row.inativa { opacity: .6; }
.md-porta-row .btn { margin-left: auto; }
.md-porta-nome { font-weight: 600; }
.md-porta-end { font-family: var(--mono); color: #7fd3c5; }
.md-porta-in { min-width: 150px; }
.md-conex-add select, .md-conex-add input {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); color: var(--fg); font-size: 12.5px; }

/* Consumo do agente no painel do projeto */
.ag-consumo { margin-top: 8px; padding: 8px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; }
.ag-consumo b { color: var(--accent); }

/* Importar equipamentos em lote */
.imp-seguro { margin: 6px 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
  background: rgba(63,178,127,.10); border: 1px solid rgba(63,178,127,.45); color: var(--fg); }
.imp-fonte { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.imp-texto { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); color: var(--fg); font-size: 12.5px; resize: vertical; }
.imp-previa { margin-top: 10px; max-height: 40vh; overflow: auto; }
.imp-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.imp-tab th, .imp-tab td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.imp-tab th { color: var(--fg-dim); font-weight: 600; }
.imp-resultado { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; background: var(--bg); }
.imp-res-tit { font-weight: 600; margin-bottom: 6px; }

/* Segredos do projeto */
.seg-lista { margin: 10px 0; display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.seg-row { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.seg-row .seg-nome { font-size: 13px; }
.seg-acoes { display: flex; gap: 6px; justify-content: flex-end; }
.seg-form { border-top: 1px solid var(--line); padding-top: 12px; }
.seg-form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.seg-form .pw-wrap { max-width: 100%; }
@media (max-width: 640px) { .seg-row, .seg-form-grade { grid-template-columns: 1fr; } }

/* Ajuda: guia de funções (pesquisável) */
.ajuda-busca { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-2); color: var(--fg); font-size: 13px; min-width: 240px; }
.ajuda-intro { margin: 4px 0 8px; }
.ajuda-corpo { overflow-y: auto; max-height: calc(100vh - 190px); padding-right: 4px; }
.ajuda-sec { margin-bottom: 16px; }
.ajuda-area { margin: 10px 0 8px; font-size: 14px; color: var(--accent);
  position: sticky; top: 0; background: var(--bg-2); padding: 4px 0; z-index: 1; }
.ajuda-item { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
  margin-bottom: 8px; background: var(--bg); }
.ajuda-nome { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.ajuda-faz { font-size: 12.5px; color: var(--fg); margin-bottom: 4px; }
.ajuda-limite { font-size: 12px; color: var(--fg-dim); }
.ajuda-limite-rot { color: #c9a341; font-weight: 600; }

/* Reiniciar servidores (seleção múltipla) */
.rei-lista { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: var(--bg); }
.rei-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; }
.rei-row:hover { background: var(--bg-2); }
.rei-row-painel { border: 1px solid rgba(217,112,78,.55); background: rgba(217,112,78,.08); }
.rei-aviso { margin: 4px 0 10px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
  background: rgba(217,112,78,.12); border: 1px solid rgba(217,112,78,.5); color: var(--fg); }
.rei-row .rei-chk { width: 16px; height: 16px; }
.rei-row .rei-nome { font-weight: 600; }
.rei-row .rei-end { color: var(--fg-dim); font-size: 12px; }
.rei-row .bib-tag { margin-left: auto; }
.rei-todos { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-dim); }
.rei-resultado { margin-top: 12px; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; background: var(--bg); max-height: 34vh; overflow-y: auto; }
.rei-res-linha { font-size: 12.5px; padding: 3px 0; }
.rei-res-linha.ok { color: #3fb27f; }
.rei-res-linha.erro { color: #d9704e; }

/* Resultado do «Testar» de um agente (na linha do agente) */
.ag-teste { margin-top: 6px; font-size: 12px; white-space: pre-line; padding: 6px 9px;
  border-radius: 7px; border: 1px solid var(--line); background: var(--bg); }
.ag-teste.ok { border-color: #3fb27f; }
.ag-teste.aviso { border-color: #c9a341; }
.ag-teste.erro { border-color: #d9704e; }

/* Uso ao vivo do dispositivo (CPU/memória/discos) no detalhe */
.uso-linha { margin: 9px 0; }
.uso-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 3px; }
.uso-barra { height: 9px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.uso-fill { height: 100%; border-radius: 5px 0 0 5px; transition: width .3s; }
.desc-row:last-child { border-bottom: 0; }
.desc-row input.desc-nome, .desc-row input.desc-tipo {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); color: var(--fg); font-size: 13px; width: 100%; }
.desc-row .desc-ip { font-family: var(--mono); font-size: 12.5px; color: var(--fg); }
.desc-row .desc-portas { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desc-chk { width: 15px; height: 15px; }
.desc-acoes { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.desc-erro { margin: 14px; padding: 10px 12px; border-radius: 8px;
  background: rgba(220,80,80,.12); border: 1px solid rgba(220,80,80,.4); color: var(--fg); }

/* ---------------- auditoria ---------------- */

.aud-resumo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.aud-resumo .cartao {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2); padding: 9px 13px; min-width: 108px;
}
.aud-resumo .cartao b { display: block; font-size: 17px; font-weight: 600; }
.aud-resumo .cartao small { color: var(--fg-mute); font-size: 11px; }
.aud-resumo .cartao.alerta b { color: var(--warn); }

.aud-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.aud-filtros input { flex: 1; min-width: 190px; }
.aud-filtros select { width: auto; min-width: 145px; }

.arow {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 13px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2); font-size: 12.5px;
}
.arow.negado { border-color: #4a2a2a; background: #221616; }
.arow.erro { border-color: #453a20; }
.arow .quando { color: var(--fg-mute); font-size: 11.5px; flex: none; width: 118px; }
.arow .quem { font-weight: 550; flex: none; min-width: 150px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow .oque { flex: 1; min-width: 0; }
.arow .oque small { display: block; color: var(--fg-mute); font-size: 11.5px;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-paginas { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* O prazo de guarda e o recorte por equipamento: duas faixas discretas, acima
   da lista, que dizem o que se esta olhando e o que ja pode ser apagado. */
.aud-retencao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 13px; margin-bottom: 10px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-2);
}
.aud-retencao small { color: var(--fg-mute); }
.aud-recorte {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 13px; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--bg-2);
}
.aud-recorte b { font-size: 14px; }
.aud-recorte small { color: var(--fg-mute); flex: 1; min-width: 180px; }

@media (max-width: 760px) {
  .arow { flex-direction: column; gap: 3px; }
  .arow .quando, .arow .quem { width: auto; }
  .direitos-caixa { grid-template-columns: 1fr; }
}

/* ---------------- git: o painel do remoto ---------------- */
.git-remoto {
  padding: 8px 13px; margin-bottom: 10px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2);
}
.git-remoto-linha { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; font-size: 12.5px; }
.git-atras  { color: var(--warn); font-weight: 600; }
.git-em-dia { color: var(--ok); font-weight: 600; }

/* ---------------- GitHub: o token ---------------- */
.gh-form { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.gh-form label { font-size: 13px; color: var(--fg-dim); }
.gh-form input[type=password], .gh-form input[type=text] { width: 100%; }

/* ---------------- máquinas do projeto ---------------- */
.mq-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.mq-grade label, #maquina-form > label { font-size: 13px; color: var(--fg-dim); }
#maquina-form textarea { width: 100%; }
.btn.warn { color: var(--warn); border-color: #453a20; background: #241f12; }
.btn.warn:hover { border-color: #6a5a2e; }
#console-maquina { max-width: 230px; }
@media (max-width: 640px) { .mq-grade { grid-template-columns: 1fr; } }

/* revelar/copiar credencial na aba Máquinas */
.mq-segredos { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mq-segredos .btn { font-family: var(--mono, monospace); }

/* seções expansíveis do modal de novo projeto */
.np-sub { border-left: 2px solid var(--line); padding: 8px 0 4px 12px; margin: 2px 0 6px 6px;
          display: flex; flex-direction: column; gap: 6px; }
.np-sub .mq-grade { gap: 6px 12px; }
.np-sub small { line-height: 1.5; }

/* aba Máquinas: aviso de senha e chave do painel */
.mq-aviso { color: var(--warn); margin-top: 4px; }
#chave-painel .mono.small { display: block; margin-top: 4px; word-break: break-all; color: var(--fg-dim); }

/* Cofre */
.cofre-grupo { margin-bottom: 14px; }
.cofre-proj-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.cofre-proj { font-weight: 600; color: var(--accent); margin: 0; font-size: 13px; }

/* Modal de máquina: títulos de seção, para o formulário longo ficar guiado */
.mq-secao { font-size: 12px; font-weight: 700; letter-spacing: .04em;
            text-transform: uppercase; color: var(--accent);
            margin: 20px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line-soft); }
.mq-secao:first-of-type { margin-top: 8px; }
.mq-secao small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400;
                  color: var(--fg-mute); font-size: 11px; margin-top: 3px; }
.modal-card small code, .mq-secao code { font-size: 11px; background: var(--bg); padding: 0 4px;
                  border-radius: 4px; color: var(--fg-dim); }
/* Senha + botão «👁 Ver» lado a lado: o campo cresce, o botão fica junto dele. */
.mq-senha-linha { display: flex; gap: 8px; align-items: stretch; }
.mq-senha-linha #mq-senha { flex: 1; min-width: 0; }
.mq-senha-linha #mq-ver-senha { flex: 0 0 auto; white-space: nowrap; }

/* ---------------- realce de sintaxe do visualizador (padrão VS Code Dark) ---- */
.viewer-body.com-realce { color: #d4d4d4; }
.hl-com   { color: #6a9955; font-style: italic; }   /* comentário — verde */
.hl-str   { color: #ce9178; }                        /* texto/string — laranja */
.hl-num   { color: #b5cea8; }                        /* número — verde-claro */
.hl-kw    { color: #569cd6; }                        /* palavra-chave — azul */
.hl-const { color: #4fc1ff; }                        /* true/false/null — azul-claro */

/* editor de texto no visualizador de arquivos */
#viewer-edit { width: 100%; border: none; resize: none; background: var(--bg);
               color: var(--fg); font-family: var(--mono); font-size: 12.5px;
               line-height: 1.5; padding: 10px 12px; outline: none; }
.viewer-head .spacer { flex: 1; }

/* highlight.js: manter o padding do visualizador (o tema traz o seu) */
.viewer-body.hljs { padding: 10px 12px; background: var(--bg); overflow: auto; }

/* ================================================================
   RESPONSIVIDADE FINA (celular) — o painel inteiro cabe e opera no
   toque: modais roláveis, grades que empilham, tabelas que rolam no
   eixo X, e inputs de 16px (o iOS nao da zoom ao focar).
   ================================================================ */
@media (max-width: 640px) {
  /* modais: menos borda, roláveis, e os botoes de acao quebram linha
     em vez de vazar para fora do card */
  .modal { padding: 8px; }
  .modal-card { padding: 16px; border-radius: 12px; max-height: calc(100dvh - 16px); }
  .login-card { padding: 22px; }
  .modal-card.mapa-card { height: calc(100dvh - 12px); }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* 16px evita o zoom automatico do iOS ao focar um campo */
  input[type=text], input[type=password], input[type=email], input:not([type]),
  textarea, select { font-size: 16px; }

  /* grades de 2 colunas viram 1 */
  .bib-form-grade { grid-template-columns: 1fr; }
  .md-info-row { grid-template-columns: 1fr; gap: 1px; margin-bottom: 6px; }
  .md-info-row .md-info-k { color: var(--fg-mute); font-size: 11.5px; }

  /* linhas com muitas colunas fixas empilham (descoberta, reiniciar) */
  .desc-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; }
  .desc-row .desc-abrir { justify-self: start; }
  .rei-row { flex-wrap: wrap; }
  .md-conex-add, .desc-acoes, .bib-item-acoes { flex-wrap: wrap; }
  .md-conex-add select, .md-conex-add input { flex: 1 1 auto; min-width: 0; }

  /* conteudo largo rola no eixo X em vez de estourar a tela */
  .imp-previa, .git-corpo, #md-corpo { overflow-x: auto; }
  .imp-tab { min-width: 460px; }

  /* cabecalho de modal grande: a busca ocupa a linha inteira */
  .ajuda-busca { min-width: 0; width: 100%; }
  #mapa-sub, #est-sub, #bib-sub, #desc-sub, #imp-sub, #rei-sub { width: 100%; }

  /* alvos de toque um pouco maiores */
  .btn.small { padding: 6px 11px; }

  /* a doca (conversa) empilhada ocupa mais tela util */
  .doca { height: 78vh; }

  /* rodape da lista de projetos: os stats + botao cabem sem apertar */
  .side-foot { flex-wrap: wrap; }
}

/* Telas bem estreitas (~360px): margens internas menores para ganhar largura. */
@media (max-width: 380px) {
  .panel { padding: 12px 10px 32px; }
  .login-screen { padding: 16px; }
  .modal-card { padding: 13px; }
}

/* Teste de agente: o estado de cada um, na própria caixa do agente */
.ag-teste { display: grid; gap: 4px; margin-top: 8px; }
.ag-teste-resumo { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.ag-teste-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
                  padding: 5px 8px; border-radius: 6px; background: rgba(127,127,127,.07);
                  font-size: 12px; }
.ag-teste-linha.ruim { background: rgba(220,80,80,.10); }
.ag-teste-sinal { color: #35c26b; font-size: 14px; line-height: 1; }
.ag-teste-linha.ruim .ag-teste-sinal { color: #e06b6b; }
.ag-teste-aviso { color: #d9a441; font-size: 11px; }
.ag-teste-dica { flex-basis: 100%; color: var(--fg-dim); font-size: 11px; padding-left: 22px; }
@media (max-width: 640px) {
  .ag-teste-linha { flex-direction: column; gap: 2px; }
  .ag-teste-dica { padding-left: 0; }
}

/* Chave SSH: as três vias, em ordem de risco (a de colar é a exceção) */
.mq-chave-vias { margin: 6px 0 8px; padding-left: 20px; display: grid; gap: 5px;
                 font-size: 12px; color: var(--fg-dim); }
.mq-chave-vias strong { color: var(--fg); }
.mq-chave-vias code { font-size: 11px; }

/* Detalhe da máquina: acesso e biblioteca */
.md-acesso { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.md-acesso input { flex: 1 1 160px; min-width: 140px; }
.md-bib-item { display: flex; gap: 10px; align-items: center; justify-content: space-between;
               padding: 7px 9px; border-radius: 7px; background: rgba(127,127,127,.07);
               margin-top: 5px; }
.md-bib-item.fora { opacity: .62; }
.md-bib-item > div { min-width: 0; }
@media (max-width: 640px) {
  .md-bib-item { flex-direction: column; align-items: stretch; }
  .md-acesso input { flex-basis: 100%; }
}

/* Detalhe: por que a máquina não respondeu, dito por extenso */
.md-causa { margin: 0 0 12px; padding: 9px 11px; border-radius: 8px; font-size: 12px;
            background: rgba(217,112,78,.12); border: 1px solid rgba(217,112,78,.35);
            color: var(--fg); line-height: 1.45; }
.md-causa strong { color: #e08a5e; }

/* Colar máquina: o que a cópia NÃO trouxe */
.mq-aviso-copia { margin: -6px 0 14px; padding: 10px 12px; border-radius: 8px;
                  font-size: 12px; line-height: 1.5; color: var(--fg);
                  background: rgba(217,160,65,.12); border: 1px solid rgba(217,160,65,.38); }
.mq-aviso-copia strong { display: block; margin-bottom: 4px; color: #d9a441; }
.mq-aviso-copia div + div { margin-top: 5px; }

/* Em que projetos este aparelho esta envolvido (operador, 14/10/2026). Azul, e
   nao ambar: nao e aviso de problema — e contexto. O ambar do bloco acima quer
   dizer «falta coisa aqui»; usar a mesma cor para as duas gastaria o alarme. */
.mq-projetos { margin: -6px 0 14px; padding: 10px 12px; border-radius: 8px;
               font-size: 12px; line-height: 1.5; color: var(--fg);
               background: rgba(79,140,255,.10); border: 1px solid rgba(79,140,255,.34); }
.mq-projetos strong { display: block; margin-bottom: 6px; color: #6ea8ff; }
.mq-projetos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.mq-projeto-tag { padding: 2px 9px; border-radius: 999px; font-size: 11.5px;
                  background: rgba(79,140,255,.18); border: 1px solid rgba(79,140,255,.42); }

/* Importar: o cabeçalho proposto quando a 1ª linha é dado */
.imp-sugestao { margin-top: 10px; padding: 10px 12px; border-radius: 8px;
                background: rgba(127,127,127,.08); border: 1px solid var(--line); }
.imp-sugestao pre { margin: 6px 0 8px; padding: 8px 10px; background: var(--bg);
                    border-radius: 6px; font-size: 12px;
                    white-space: pre-wrap; word-break: break-word; }

/* Dossiê do equipamento */
.md-dossie-texto { margin: 8px 0 0; padding: 11px 13px; background: var(--bg);
                   border: 1px solid var(--line); border-radius: 8px; font-size: 12px;
                   line-height: 1.55; max-height: 44vh; overflow: auto;
                   white-space: pre-wrap; word-break: break-word; }
.md-dossie-form { display: grid; gap: 7px; margin-top: 10px; }
.md-dossie-form button { justify-self: start; }

/* Menu ao clicar numa máquina do organograma/mapa */
.menu-maquina { position: fixed; z-index: 90; min-width: 230px; padding: 5px;
                background: var(--bg-2); border: 1px solid var(--line);
                border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.menu-maquina .menu-item { display: block; width: 100%; text-align: left;
                           background: none; border: 0; color: var(--fg);
                           padding: 8px 10px; border-radius: 7px; cursor: pointer;
                           font-size: 13px; }
.menu-maquina .menu-item:hover { background: rgba(127,127,127,.14); }
.menu-maquina .menu-item small { display: block; color: var(--fg-dim); font-size: 11px;
                                 margin-top: 2px; }

/* Usuários e senhas de uma máquina */
.md-user { display: flex; align-items: center; justify-content: space-between; gap: 10px;
           flex-wrap: wrap; padding: 7px 9px; border-radius: 7px; margin-top: 5px;
           background: rgba(127,127,127,.07); font-size: 12px; }
.md-user > div { min-width: 0; }
/* `.md-user-valor` saiu em 09/10/2026: a senha na pagina da maquina deixou
   de ter caixa propria e passou ao par canonico `.cred-par` / `.cred-caixa`,
   que e o mesmo nas quatro telas. */

/* O mesmo equipamento, visto de vários projetos */
.md-equip { margin: 0 0 10px; padding: 9px 11px; border-radius: 8px; font-size: 12px;
            background: rgba(90,140,200,.10); border: 1px solid rgba(90,140,200,.30); }
.md-equip strong { display: block; margin-bottom: 3px; color: #7fa8d8; }
.md-equip-aviso { margin-top: 5px; color: #d9a441; font-size: 11px; }
.md-user.alheio { opacity: .82; border-left: 3px solid rgba(90,140,200,.55); }

/* ————— Catálogo de equipamentos ————— */
.cat-lista { padding: 6px 16px 18px; overflow: auto; }
.cat-familia { margin-top: 16px; }
.cat-familia > h4 { margin: 0 0 2px; font-size: 14px; }
.cat-familia > p { margin: 0 0 8px; font-size: 12px; color: var(--fg-dim); }
.cat-grade { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.cat-cartao { text-align: left; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg-2); cursor: pointer; }
.cat-cartao:hover { border-color: var(--accent); }
.cat-cartao b { display: block; font-size: 13px; }
.cat-cartao span { display: block; font-size: 11.5px; color: var(--fg-dim); margin-top: 3px; }
.cat-selos { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.cat-selo { font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--fg-dim); }
.cat-selo.shell { border-color: #3a6; color: #3a6; }
.cat-selo.cobra { border-color: #c95; color: #c95; }
.cat-perfil { padding: 10px 18px 22px; overflow: auto; }
.cat-perfil h4 { margin: 18px 0 6px; font-size: 13px; }
.cat-resumo { font-size: 13px; line-height: 1.5; }
.cat-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cat-tab th, .cat-tab td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.cat-tab th { color: var(--fg-dim); font-weight: 500; }
.cat-papel-principal { color: #3a6; }
.cat-papel-evitar { color: #d66; }
.cat-passos { margin: 4px 0 0 18px; padding: 0; font-size: 12.5px; line-height: 1.6; }
.cat-proc { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; }
.cat-proc > b { font-size: 12.5px; }
.cat-risco { border-left: 3px solid #d66; padding: 4px 0 4px 10px; margin: 6px 0;
  font-size: 12.5px; line-height: 1.5; }
.cat-div { font-size: 11.5px; margin-top: 4px; line-height: 1.5; }
.cat-div.erro { color: #d66; }
.cat-div.aviso { color: var(--fg-dim); }

/* ————— Portas de serviço ————— */
.md-portas { padding: 8px 0 4px; }
.portas-tab td:first-child { font-variant-numeric: tabular-nums; }
.porta-aberta { color: #d66; font-weight: 500; }
.porta-barrada { color: #c95; }
.porta-declarada { color: var(--fg-dim); }
.porta-desligada { color: #3a6; }

/* ————— Funções de equipamento (fora de projeto) ————— */
.func-bloco { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.func-titulo { font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
/* O acesso ao Cofre: um seletor de nivel, separado das caixas de equipamento
   por uma linha — nao e «mais uma funcao», e a porta das credenciais. */
.cofre-nivel { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ---- Backup: os alertas antes das tabelas -------------------------------
   A tela de backup existe para responder «o que ficou de fora?». O que arde
   tem de ser lido antes de qualquer tabela — por isso as tres faixas, e por
   isso a grave tem cor propria e nao divide estilo com o aviso comum. */
.bkp-faixa { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
             margin-bottom: 10px; font-size: 13px; line-height: 1.6; }
.bkp-faixa.grave { border-color: #d9704e; background: rgba(217, 112, 78, .09); color: #e59a80; }
.bkp-faixa.leve  { border-color: #c9a341; background: rgba(201, 163, 65, .07); color: #e0c46a; }
.bkp-faixa.calma { border-color: #3fb27f; background: rgba(63, 178, 127, .07); color: #74c8a0; }
.bkp-faixa b { color: inherit; }

/* ---- Backup: escolher pastas e olhar dentro de um backup ---------------- */
.bkp-arquivos { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
                margin-top: 12px; background: var(--bg); }
.bkp-arquivos > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.bkp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }
.bkp-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px;
                  color: var(--fg-dim); }
.bkp-form label.wide { grid-column: 1 / -1; }
.bkp-form input, .bkp-form textarea { font-size: 12.5px; }
.bkp-arvore { margin-top: 10px; max-height: 32vh; overflow-y: auto; font-size: 12.5px; }
.bkp-arvore .pasta { color: #9db0ff; }

/* ---- Backup: a explicação, para quem não é da área ---------------------
   Texto largo e respirado de propósito: quem abre isto está com dúvida, e
   dúvida não se tira com parágrafo apertado. */
.bkp-ajuda { border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px;
             margin-top: 12px; background: var(--bg); max-height: 60vh; overflow-y: auto;
             font-size: 13px; line-height: 1.7; }
.bkp-ajuda h4 { margin: 18px 0 6px; font-size: 13.5px; color: var(--fg); }
.bkp-ajuda h4:first-child { margin-top: 0; }
.bkp-ajuda p { margin: 6px 0; color: var(--fg-dim); }
.bkp-ajuda ul { margin: 6px 0 6px 18px; padding: 0; color: var(--fg-dim); }
.bkp-ajuda li { margin: 4px 0; }
.bkp-ajuda b { color: var(--fg); }
.bkp-ajuda code { font-size: 12px; padding: 1px 5px; border-radius: 4px;
                  background: rgba(255,255,255,.06); }
.bkp-legenda { display: inline-block; padding: 0 8px; border-radius: 999px;
               font-size: 11.5px; border: 1px solid; }
.bkp-legenda.grave { border-color: #d9704e; color: #e59a80; }
.bkp-legenda.leve  { border-color: #c9a341; color: #e0c46a; }
.bkp-legenda.calma { border-color: #3fb27f; color: #74c8a0; }

/* ---- Estrutura: as VMs paradas -----------------------------------------
   Uma VM desligada so aparecia depois de abrir o hipervisor e clicar «Listar
   VMs»: quem nao soubesse procurar nunca via que ela estava parada. */
/* `flex: 0 0 auto` — a lista NAO encolhe. Ela e o conteudo que a pessoa abriu
   para ler; quem cede espaco e o desenho, que continua ali embaixo e rola. */
.est-paradas { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px;
               padding: 10px 13px; margin: 10px 0; background: var(--bg);
               /* 50vh cabe ate numa tela de 600px de altura sem cortar a
                  legenda: 60 de cabecalho + 300 de lista + 120 de desenho + 90
                  de legenda = 570, dentro dos 580 do cartao. */
               max-height: 50vh; overflow-y: auto; font-size: 13px; }
.est-paradas .host { font-weight: 600; margin-top: 8px; }
.est-paradas .host:first-child { margin-top: 0; }
.est-paradas .vm { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 12px; }
.est-paradas .vm .id { color: var(--fg-dim); font-variant-numeric: tabular-nums; }

/* ---- Estrutura: o seletor por tipo e a visao por hipervisor ------------- */
.est-filtro { font-size: 12px; padding: 4px 8px; border-radius: 8px;
              border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.est-paradas .grupo { border: 1px solid var(--line); border-radius: 9px;
                      padding: 9px 11px; margin: 8px 0; }
.est-paradas .grupo-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                          margin-bottom: 6px; }
.est-paradas .grupo-cab .nome { font-weight: 600; }
.est-paradas .vm.parada .id { color: #e59a80; }
.est-paradas .vm .sem-copia { font-size: 11px; color: #e59a80; }

/* A ficha de ajuste de um trabalho de backup. Abre embaixo da linha do
   trabalho, e nasce fechada: mexer no agendamento de uma máquina em produção
   não pode ser a primeira coisa que o dedo encontra. */
.bkp-ajuste { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
              border: 1px solid var(--line); border-radius: 10px;
              padding: 10px 12px; margin: 4px 0 10px; background: var(--bg); }
.bkp-ajuste-campo { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.bkp-ajuste-campo .input { min-width: 150px; }
.bkp-ajuste .bib-item-acoes { width: 100%; }

/* As seções dobráveis da tela de Backup (o índice das cópias). Nascem fechadas:
   quem abre a página quer o quadro geral; quem precisa do índice vai buscá-lo. */
.bkp-secao { border: 1px solid var(--line); border-radius: 10px; margin: 10px 0;
             background: var(--bg); }
.bkp-secao > summary { padding: 9px 13px; cursor: pointer; font-size: 13px; }
.bkp-secao-corpo { padding: 0 13px 12px; }

/* O semáforo do backup. O ponto é o que se lê primeiro numa lista longa — por
   isso vem antes do número da máquina, e por isso carrega o motivo no title:
   cor sem porquê é uma luz que se aprende a ignorar. */
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
         flex: 0 0 auto; }
.ponto.verde    { background: #3fb27f; }
.ponto.amarelo  { background: #e0b341; }
.ponto.vermelho { background: #e0603f; }
.ponto.cinza    { background: #5a6673; }
.sem-legenda { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; }

/* A régua de ferramentas do parque, dentro da Estrutura. Linha própria, abaixo
   do título: no celular a barra de título já estava cheia, e enfiar mais quatro
   botões nela é o que tornava a tela inútil. Rola na horizontal quando não cabe,
   em vez de quebrar em quatro linhas e comer a altura do desenho. */
.est-ferramentas { display: flex; gap: 8px; flex: 0 0 auto; margin: 0 0 8px;
                   overflow-x: auto; padding-bottom: 2px; }
.est-ferramentas .btn { white-space: nowrap; }

/* Recolhida, a barra de projetos mostra qual está aberto. Sem esse selo ela
   some e leva junto a única pista de onde a pessoa está — no celular, onde ela
   nasce recolhida, é a diferença entre um seletor e um beco. */
.barra-atual { font-size: 12px; color: var(--accent); max-width: 42vw;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pontos de retorno, dentro de Sistema. A lista precisa caber numa olhada:
   quem a abre costuma estar com pressa, e o que importa e a linha de cima. */
.marcos-bloco { margin: 18px 0 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.marcos-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.marcos-head h3 { margin: 0; font-size: 14px; }
#marco-ajuda { margin: 4px 0 10px; max-width: 70ch; }
#marcos-lista table { width: 100%; border-collapse: collapse; }
#marcos-lista th { text-align: left; font-size: 11px; color: var(--fg-mute);
  font-weight: 500; padding: 4px 8px 4px 0; }
#marcos-lista td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line);
  vertical-align: top; font-size: 12.5px; }
#marcos-lista td .mono { font-family: var(--mono); font-size: 12px; }


/* Os serviços de um equipamento: porta, endereço e o que é. Três colunas porque
   quem lê procura uma das três — «o que responde na 8006?», «qual o endereço do
   PBS?», «este ferro serve o quê?». */
.md-servicos { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.md-servico { display: grid; grid-template-columns: 92px minmax(180px, auto) 1fr;
  gap: 10px; align-items: baseline; font-size: 12.5px; padding: 3px 0;
  border-top: 1px solid var(--line); }
.md-servico:first-child { border-top: none; }
.md-servico .mono { font-family: var(--mono); color: var(--fg-dim); }
.md-servico-nome { color: var(--fg-dim); display: flex; gap: 6px; align-items: center; }
@media (max-width: 700px) { .md-servico { grid-template-columns: 1fr; gap: 2px; } }


/* ---- Serviços da casa ----
   Agrupado por servidor porque é assim que se lê: «o que tem nesta máquina?»
   vem antes de «o que é esta porta?». O descritivo fica embaixo, em cinza — ele
   é o que dispensa abrir o painel só para descobrir o que ele é. */
.svc-lista { overflow-y: auto; padding: 4px 16px 18px; }
.svc-servidor {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.svc-servidor .mono { font-family: var(--mono); font-size: 12px; }
.svc-servidor .btn { margin-left: auto; }
.svc-item { padding: 6px 0 7px 2px; }
.svc-item-topo { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.svc-porta { color: var(--fg-dim); font-size: 12px; min-width: 84px; }
.svc-url { font-size: 12px; color: var(--accent); text-decoration: none; }
.svc-url:hover { text-decoration: underline; }
.svc-desc { font-size: 12.5px; color: var(--fg-mute); margin: 2px 0 0 86px;
  line-height: 1.5; max-width: 96ch; }
.svc-origem { opacity: .6; font-style: italic; }
@media (max-width: 700px) { .svc-desc { margin-left: 0; } }


/* Arrastar uma máquina para dentro (ou para fora) de um projeto. O fantasma
   segue o cursor porque sem ele não se sabe que HÁ um arrasto em curso; o grupo
   sob o cursor se acende porque sem isso não se sabe onde vai cair. */
.arrasto-fantasma {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--accent); color: #16110e; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.arrastando { cursor: grabbing; user-select: none; }
body.arrastando #est-svg-el { cursor: grabbing; }
#est-svg-el [data-maq] { cursor: grab; }
#est-svg-el [data-grupo].alvo-arrasto .est-cluster-rect {
  stroke: var(--accent); stroke-width: 2; filter: brightness(1.35);
}


/* A folha de escolha: uma lista com busca, para escolher UM item. */
.folha-escolha {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.folha-escolha-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; width: min(560px, 100%); max-height: 80vh;
  display: flex; flex-direction: column; gap: 9px;
}
.folha-escolha-card h3 { margin: 0; font-size: 15px; }
.folha-escolha-lista { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.folha-escolha-item {
  text-align: left; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px; cursor: pointer; color: var(--fg);
  display: flex; flex-direction: column; gap: 2px; font: inherit; font-size: 13px;
}
.folha-escolha-item:hover { border-color: var(--accent); }


/* O sino da caixa do operador: aparece só quando há algo sem ler, e a cor diz o
   pico de urgência. Sino sempre visível com zero ao lado ensina a ignorar sino. */
.sino { position: relative; }
.sino .sino-n {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  border-radius: 999px; background: var(--accent); color: #16110e;
  font-size: 10px; font-weight: 700; line-height: 16px; padding: 0 3px;
}
.sino.atencao .sino-n { background: var(--warn); color: #241f12; }
.sino.urgente .sino-n { background: var(--err); color: #fff; }

.caixa-lista { overflow-y: auto; padding: 6px 16px 18px; display: flex;
  flex-direction: column; gap: 10px; }
.caixa-item { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  background: var(--bg); }
.caixa-item.atencao { border-color: #453a20; }
.caixa-item.urgente { border-color: #5a2a2a; }
.caixa-item.lida { opacity: .62; }
.caixa-topo { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.caixa-corpo { white-space: pre-wrap; font-size: 12.5px; color: var(--fg-dim);
  margin: 7px 0 0; line-height: 1.55; max-width: 100ch; }
/* A PERGUNTA e AS ALTERNATIVAS — a parte da tela em que se decide.
   Antes: a pergunta era uma linha de texto solta no meio do relato, e as
   alternativas eram botõezinhos lado a lado. Com opções de verdade («pg_dump
   diário no VPS + cópia fora da máquina (recomendado; cobre o que importa)»)
   isso não se lia: o texto estourava o botão ou era cortado. Agora a pergunta
   tem moldura e rótulo, e cada alternativa é uma linha inteira. */
.caixa-pergunta { margin-top: 9px; padding: 8px 10px; border-radius: 8px;
  background: #121a28; border-left: 3px solid var(--info); }
.caixa-pergunta-rot { font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-dim); }
.caixa-pergunta-txt { font-size: 13.5px; color: var(--fg); line-height: 1.5;
  margin-top: 2px; white-space: pre-wrap; max-width: 100ch; }

.caixa-acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.caixa-acoes.lista { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.caixa-opcao { display: flex; gap: 9px; align-items: flex-start; width: 100%;
  text-align: left; padding: 9px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: #0f1420; color: inherit;
  font: inherit; font-size: 13px; line-height: 1.45; }
.caixa-opcao:hover { border-color: var(--info); background: #131b2a; }
.caixa-opcao.simples { width: auto; padding: 5px 11px; font-size: 12.5px; }
.caixa-opcao-n { flex: 0 0 auto; min-width: 17px; height: 17px; margin-top: 1px;
  border-radius: 50%; background: #243049; color: var(--fg-dim);
  font-size: 10.5px; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums; }
/* A RECOMENDADA fica marcada: quem estudou o assunto já disse qual acha melhor,
   e esconder isso devolve ao operador o trabalho de reconstruir o raciocínio. A
   marca não decide por ele — as outras continuam a um clique. */
.caixa-opcao.recomendada { border-color: #2f5a3a; background: #0f1a14; }
.caixa-opcao.recomendada .caixa-opcao-n { background: #2f5a3a; color: #bfe3c9; }
.caixa-opcao-txt { flex: 1; min-width: 0; }
.caixa-rodape { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }

/* O selo do restart: verde = pode, âmbar = espere, cinza = não sei. Aparece em
   todo lugar que tem botão de reiniciar, com o motivo no tooltip — quem vê
   âmbar precisa saber O QUE esperar, e não só que deve esperar. Ele não bloqueia
   botão nenhum: decidir continua sendo de quem opera. */
.selo-restart {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--fg-dim); background: var(--bg-3); white-space: nowrap;
}
.selo-restart:empty { display: none; }
.selo-restart.bloco { display: flex; margin: 2px 0 8px; align-self: flex-start; }
.selo-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-mute); }
.selo-restart.pode { color: var(--ok); border-color: #24422f; background: #15251c; }
.selo-restart.pode .selo-ponto { background: var(--ok); }
.selo-restart.espere { color: var(--warn); border-color: #453a20; background: #241f12; }
.selo-restart.espere .selo-ponto { background: var(--warn); animation: pulse 1.6s infinite; }
.selo-restart.sem-saber { opacity: .75; }
.selo-idade { opacity: .6; font-size: 10.5px; }

/* O sino vazio continua clicavel — so nao chama atencao. Esconde-lo zerava a
   unica porta para o historico de decisoes. */
.sino.vazio { opacity: .45; }
.sino.vazio:hover { opacity: 1; }

/* A pendência do projeto, na lista da esquerda. Pisca devagar: rápido demais
   vira ruído e se aprende a ignorar; parado demais não chama. Quem prefere tela
   quieta (ou o sistema pede «menos movimento») não perde informação — o número e
   a cor continuam lá. */
.badge.pendencia {
  background: #7a2e12; color: #ffd9c2; border-color: #a8451d;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.badge.pendencia:hover { background: #a8451d; color: #fff; }
@keyframes pisca-pendencia {
  0%, 60% { opacity: 1; }
  80%     { opacity: .35; }
  100%    { opacity: 1; }
}
.badge.pendencia.pisca { animation: pisca-pendencia 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .badge.pendencia.pisca { animation: none; }
}

/* A cor do RESTART, em todo lugar onde existe um para pedir: verde dá, vermelho
   nao da. E a cor do ALVO (a VM escolhida no seletor, a maquina da linha), nao
   do botao — o mesmo botao muda de cor quando se troca o alvo. Cor sozinha nao
   informa: o motivo vai sempre no `title`, e o botao tambem desabilita quando
   nao da. */
.restart-pode { color: #6ee7a8 !important; }
.restart-espere { color: #ff8f7a !important; }
.btn.restart-pode:hover { color: #b7f5d2 !important; }
.btn.restart-espere:hover { color: #ffc2b5 !important; }
.rei-marca { font-size: 11px; line-height: 1; margin-right: 2px; }

/* A caixa de resposta de cada pergunta. Uma linha por pendencia: responder tem
   de custar menos que adiar, senao adia-se. */
.caixa-resposta { display: flex; gap: 6px; margin: 8px 0 4px; }
.caixa-resposta input {
  flex: 1; min-width: 0; padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: #0f1420; color: inherit;
  font-size: 16px;   /* 16px: abaixo disso o iOS da zoom no campo ao focar */
}
.caixa-troca { margin: 4px 0; padding-left: 8px; border-left: 2px solid #2a3242; }
.caixa-troca.do-agente { border-left-color: #a8451d; }

/* O botao da janela de restart. Tres estados, tres leituras: apagado (ninguem
   pediu), ambar (ha pedido esperando) e o cronometro correndo. */
.btn.janela { font-variant-numeric: tabular-nums; }
.btn.janela.vazio { opacity: .45; }
.btn.janela.vazio:hover { opacity: 1; }
.btn.janela.pedido { color: #ffd9a0; border-color: #a8721d; }
.btn.janela.contando {
  color: #ff8f7a; border-color: #a8451d; background: #2a1410;
  animation: pisca-pendencia 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .btn.janela.contando { animation: none; } }
.jan-pedido { padding: 8px 10px; border: 1px solid #3a2a18; border-radius: 8px;
              background: #16120c; margin-bottom: 8px; }
.jan-abrir { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.jan-abrir input[type=number] { width: 90px; }
.jan-abrir input {
  padding: 7px 9px; border-radius: 7px; border: 1px solid #2a3242;
  background: #0f1420; color: inherit; font-size: 16px; flex: 1; min-width: 120px;
}
.jan-conta { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.jan-relogio { font-size: 34px; font-variant-numeric: tabular-nums; color: #ff8f7a; }
.jan-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.jan-escopo { font-weight: 600; margin: 2px 0 6px; }

/* O campo que falta preencher: vermelho ate a primeira tecla. A cor some
   sozinha quando a pessoa digita — aviso que fica depois de resolvido ensina a
   ignorar aviso. */
input.faltando, textarea.faltando {
  border-color: #a8451d !important;
  box-shadow: 0 0 0 2px rgba(168, 69, 29, .25);
}

/* A seta que abre e fecha a pasta. Alvo proprio, separado do nome: clicar no
   nome escolhe o destino, e duas acoes no mesmo alvo fariam toda escolha abrir e
   fechar a pasta sem querer. */
.tree-seta { display: inline-block; width: 14px; text-align: center; }
.tree-seta.clicavel { cursor: pointer; border-radius: 4px; }
.tree-seta.clicavel:hover { background: #26324a; }
.tree-nome { overflow: hidden; text-overflow: ellipsis; }

/* O menu do botao direito na arvore. Flutua acima de tudo e fecha no proximo
   clique — menu que fica aberto vira armadilha de clique errado. */
.menu-arquivo {
  position: fixed; z-index: 9999; min-width: 210px; padding: 5px;
  background: #121829; border: 1px solid #2a3242; border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.menu-arquivo-item {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  background: none; border: 0; color: #e7edf7; border-radius: 6px;
  font: inherit; cursor: pointer;
}
.menu-arquivo-item:hover { background: #26324a; }

/* O selo da leitura: «leitura de ha 3 min» enquanto rele, «✓ lido agora» quando
   a nova chega. A idade importa tanto quanto o numero — dado sem hora nao diz se
   ainda vale. */
.leitura-selo { font-size: 11px; color: #9fb0c9; margin-left: 8px; white-space: nowrap; }
.leitura-selo.ok { color: #6ee7a8; }

/* A seta que abre e fecha uma secao do detalhe da maquina. */
.sec-seta {
  background: none; border: 0; color: #9fb0c9; cursor: pointer;
  font-size: 14px; padding: 0 6px 0 0; line-height: 1;
}
.sec-seta:hover { color: #e7edf7; }

/* A PIRAMIDE da Estrutura: cada faixa e um degrau, e a largura acompanha quantos
   aparelhos ha nele — a forma sai dos dados, nao de um enfeite. */
.piramide { display: flex; flex-direction: column; align-items: center; gap: 14px;
            padding: 16px 10px 30px; }
.pir-faixa { width: 100%; display: flex; flex-direction: column; align-items: center; }
.pir-cab { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.pir-nivel {
  display: inline-flex; width: 20px; height: 20px; align-items: center;
  justify-content: center; border-radius: 50%; background: #26324a; color: #cfe0ff;
  font-size: 11px;
}
.pir-grade { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pir-item {
  display: inline-flex; align-items: center; gap: 5px; max-width: 190px;
  padding: 5px 9px; border-radius: 8px; border: 1px solid #2a3242;
  background: #131a29; color: #e7edf7; cursor: pointer; font: inherit; font-size: 12px;
}
.pir-item:hover { background: #1c2536; border-color: #3b4a66; }
.pir-item.arquivada { opacity: .5; }
.pir-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O placar das propostas. Numero grande, rotulo pequeno: quem abre quer o
   numero, e le o resto so se ele surpreender. */
.acomp-cartoes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.acomp-cartao {
  flex: 1 1 150px; padding: 12px 14px; border: 1px solid #2a3242;
  border-radius: 10px; background: #131a29;
}
.acomp-num { font-size: 30px; font-variant-numeric: tabular-nums; }
.acomp-rot { font-size: 12px; color: #9fb0c9; }
.acomp-barra { height: 6px; border-radius: 3px; background: #1c2536; margin-top: 8px; }
.acomp-fill { height: 100%; border-radius: 3px; }
.acomp-tabela { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.acomp-tabela th, .acomp-tabela td { text-align: left; padding: 5px 8px;
                                     border-bottom: 1px solid #1c2536; }
.acomp-tabela td.zerado { color: #d9704e; }
.acomp-paradas { display: flex; flex-direction: column; gap: 4px; }
.acomp-parada { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.acomp-dias { min-width: 42px; color: #c9a341; font-variant-numeric: tabular-nums; }

/* ---------------- a tabela de CAPACIDADE ----------------

   Nasceu de um pedido do operador em 01/10: ele leu «o R370_B está com 12 GB
   livres de 3197» num relatório de texto e disse que aquilo merecia uma página.
   A conta que decide uma compra ou uma migração estava só na linha de comando.

   A linha do hipervisor é escura e pesada; as VMs dele vêm abaixo, recuadas e
   mais leves. Assim o olho acha o agrupamento sem precisar de borda em volta. */
.cap-corpo { overflow: auto; padding: 4px 16px 18px; }
.cap-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cap-tab th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-2);
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-dim);
  padding: 7px 9px; border-bottom: 1px solid var(--line);
}
.cap-tab td { padding: 6px 9px; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.cap-hv > td { background: var(--bg-3); border-top: 2px solid var(--line); }
.cap-hv td:first-child { font-size: 13px; }
.cap-vm td:first-child { padding-left: 26px; color: var(--fg-dim); }
/* VM parada não some da tabela: ela continua segurando disco, e é justamente
   isso que se quer ver aqui. Fica apagada, não escondida. */
.cap-vm.parada { opacity: .55; }
.cap-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cap-mudo { color: var(--warn); font-style: italic; }
.cap-zero { color: var(--err); }
.cap-pool { margin-bottom: 3px; }
.cap-barra {
  height: 4px; border-radius: 3px; background: #1b2430; margin-top: 3px;
  overflow: hidden; min-width: 80px;
}
.cap-barra-in { height: 100%; background: var(--ok); }
.cap-barra-in.atencao { background: var(--warn); }
.cap-barra-in.grave { background: var(--err); }

/* O ⬆ de cada pasta: escolhe para onde o upload vai. Ganhou alvo próprio quando
   se descobriu, em 02/10, que o clique na linha inteira fazia ISTO — e por isso
   ninguém achava como abrir a pasta. Fica discreto e cresce no hover: presente
   para quem procura, calado para quem não. */
.tree-destino {
  margin-left: auto; padding: 0 5px; border-radius: 4px; opacity: .35;
  font-size: 11px; cursor: pointer; flex: none;
}
.tree-item:hover .tree-destino { opacity: .8; }
.tree-destino:hover { opacity: 1; background: #26324a; }

/* ---------------- a aba APLICAÇÃO ----------------

   Abas configuráveis que abrem o aplicativo do projeto dentro do painel. O
   quadro ocupa o que sobra da altura: uma aplicação embutida em 300px não
   serve para trabalhar, e foi para trabalhar que ela foi pedida. */
/* `.active` NAO e enfeite aqui: sem ele esta regra vence a que esconde.
   `.panel` esconde (`display: none`) e `.panel.active` mostra — as duas com a
   mesma especificidade da regra abaixo, que vinha DEPOIS no arquivo e ganhava
   sempre. Resultado medido em 05/10/2026, com captura do operador: a aba
   Aplicacao ficava desenhada por cima da Auditoria, duas ferramentas empilhadas
   na mesma pagina, e um quadro branco enorme no meio. O mecanismo de «um painel
   por vez» estava certo no JavaScript; uma linha de CSS o desfazia. */
.panel[data-panel="aplicacoes"].active { display: flex; flex-direction: column; min-height: 0; }
.app-barra { display: flex; gap: 6px; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.app-abas { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.app-aba {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 8px 8px 0 0; cursor: pointer;
  border: 1px solid var(--line); border-bottom: none; background: var(--bg-2);
  color: var(--fg-dim); font: inherit; font-size: 12.5px;
}
.app-aba:hover { color: var(--fg); }
.app-aba.ativa { background: var(--bg-3); color: var(--fg); border-color: var(--accent); }
.app-editar { opacity: .35; font-size: 11px; }
.app-aba:hover .app-editar { opacity: .9; }
.app-aviso { padding: 0 12px; flex: 0 0 auto; }
.app-cartao-acoes { display: flex; gap: 10px; align-items: center; margin-top: 8px;
  flex-wrap: wrap; }
/* `min-height: 0` no pai e `flex: 1` aqui: sem os dois, o quadro cresce com o
   conteúdo e empurra a página inteira em vez de rolar por dentro. */
.app-quadro { flex: 1 1 auto; min-height: 0; display: flex; }
.app-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.app-form { padding: 12px; border-top: 1px solid var(--line); flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 4px; max-width: 620px; }
.app-form-acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.app-teste { font-size: 12px; margin-top: 8px; color: var(--fg-dim); }
.app-teste.bom { color: var(--ok); }
.app-teste.ruim { color: var(--err); }

/* A lista de endereços descobertos. Cada linha diz a PROCEDÊNCIA: endereço
   tirado do `server_name` do proxy vale mais que um montado a partir de uma
   porta, porque alguém o configurou de propósito. */
.app-achados { display: flex; flex-direction: column; gap: 4px; padding: 8px 0 12px; }
.app-achado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 5px 9px; border: 1px solid var(--line-soft); border-radius: 7px;
  background: var(--bg); font-size: 12.5px; }
.app-achado .mono { font-family: var(--mono); font-size: 12px; }
/* Endereço que não serve tela: apagado, não escondido. A porta nativa de um
   banco responde a um GET e não é uma aplicação — mas sumir com ela faria a
   lista parecer completa estando curta. */
.app-achado.sem-tela { opacity: .5; }

/* A CAIXA DE SUGESTOES. Reaproveita `.caixa-lista` (que ja tem a rolagem e o
   teto de altura em dvh) e `.caixa-item` — a janela nova nao inventa um segundo
   jeito de ser janela. O que e proprio daqui e a LEITURA: blocos rotulados, a
   ficha com as sete perguntas e a barra de botoes. */
.sug-topo { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.sug-contagens { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; }
.sug-num { font-size: 13px; color: var(--fg-dim); }
/* Numero que tambem e filtro: o operador clica no «precisam de voce» e a lista
   vira aquilo. Numero que nao leva a lugar nenhum obriga a refazer o recorte. */
.sug-num-bt { cursor: pointer; border-radius: 5px; padding: 2px 7px;
  border: 1px solid transparent; }
.sug-num-bt:hover { border-color: var(--line); }
.sug-num-ativo { border-color: var(--accent); color: var(--fg); }
.sug-num-ativo b { color: var(--accent); }
.sug-num b { font-size: 17px; color: var(--fg); margin-right: 2px; }
.sug-porprojeto { font-size: 12px; color: var(--fg-dim); display: flex;
  flex-wrap: wrap; gap: 5px; align-items: center; }
.sug-chip { cursor: pointer; border: none; font: inherit; }
.sug-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.sug-filtros input[type="search"] { flex: 1 1 220px; min-width: 160px; }
.sug-item .sug-abrir { margin-top: 6px; }
.sug-bloco { margin-top: 10px; }
.sug-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--fg-dim); margin-bottom: 3px; }
.sug-txt { white-space: pre-wrap; line-height: 1.5; }
.sug-prova .sug-txt { font-family: ui-monospace, monospace; font-size: 12px; }
.sug-parecer { margin-top: 12px; padding: 9px 11px; border-radius: 8px;
  border: 1px dashed var(--line); }
.sug-opcoes { margin-top: 12px; }
.sug-op { margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--line); }
.sug-op-tit { font-weight: 600; }
.sug-autor { margin-top: 10px; }
.sug-ficha { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Ficha que chegou preenchida pelo agente: a borda diz, sem texto, que aquilo
   ali ja tem resposta e o trabalho e conferir. */
.sug-ficha-prep { border-left: 2px solid var(--accent); padding-left: 10px;
  margin-left: -12px; }
.sug-perg { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0;
  cursor: pointer; }
.sug-perg input { margin-top: 3px; }
.sug-perg-tx { flex: 1; }
.sug-rev { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
.sug-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.sug-extra input[type="text"] { flex: 1 1 260px; }
.sug-botoes { display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin-top: 11px; }
.sug-porque-nao { flex-basis: 100%; }
/* Termo da casa com a traducao no title: jargao sem traducao faz o leigo
   decidir pelo que ACHA que a palavra quer dizer. */
.sug-termo { border-bottom: 1px dotted var(--fg-dim); cursor: help; }

/* Em qual maquina o console esta ligado, no cabecalho — nao no placeholder, que
   some na primeira letra digitada. Remoto fica destacado: digitar achando que
   esta «aqui» e mandar o comando para a maquina errada. */
.console-alvo { font-size: 11px; color: var(--fg-dim); padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.console-alvo.remoto { color: var(--fg); border-color: #5a4a2a; background: #2a2418; }

/* O codigo e o clique nas linhas do Placar. `button` e `div` lado a lado na
   mesma lista: sugestao abre, pendencia (que se responde na caixa) nao. */
.acomp-parada { display: flex; gap: 8px; align-items: baseline; width: 100%;
  text-align: left; background: none; border: 0; color: inherit; font: inherit;
  padding: 3px 4px; border-radius: 6px; }
button.acomp-parada { cursor: pointer; }
button.acomp-parada:hover { background: var(--bg-alt, #1b1f27); }
.acomp-id { font-size: 11px; color: var(--fg-dim); font-family: ui-monospace, monospace; }
.acomp-tit { flex: 1; min-width: 0; }

/* Copiar o codigo e o texto: o operador leva para a conversa e pergunta ao
   agente que escreveu. Copiar a mao de uma lista trocou sugestao por pendencia
   duas vezes em 05/10. */
.sug-copias { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; }

/* «Dá para voltar atrás?» tem TRÊS estados: sim, não, e ainda não respondi. A
   caixa de marcar só sabe dois, e o vazio dela era lido como «não» — a tela
   afirmava «você marcou» a quem não tinha marcado nada. */
.sug-escolhas { display: flex; gap: 14px; margin-top: 6px; }
.sug-escolha { display: flex; gap: 5px; align-items: center; cursor: pointer; }

/* A regua de tres respostas, e o aviso do que a maquina VIU — que e aviso, e
   nao marca. 07/10/2026: pre-triagem propoe, operador afirma. */
.sug-tri { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.sug-tri:last-of-type { border-bottom: none; }
.sug-tri-nsei { background: color-mix(in srgb, #c9a227 8%, transparent);
  border-radius: 5px; }
.sug-viu { font-size: 11.5px; line-height: 1.45; margin: 4px 0 2px;
  padding: 5px 8px; border-radius: 5px; color: var(--fg-dim);
  background: color-mix(in srgb, #c9a227 12%, transparent); }
.sug-viu b { color: #d9b84a; font-weight: 600; }

/* «Por que diferente» — so aparece quando ele discorda da maquina. */
.sug-porque-dif { margin-top: 9px; padding: 8px 10px; border-radius: 6px;
  background: var(--bg-2); border-left: 3px solid var(--accent); }
.sug-porque-rot { font-size: 12px; margin-bottom: 5px; }
.sug-porque-dif input[type="text"] { width: 100%; }

/* Os dois campos de texto livre do operador. */
.sug-operador { margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--line); }
.sug-campo-livre { margin-bottom: 10px; }
.sug-campo-rot { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.sug-campo-linha { display: flex; gap: 7px; align-items: flex-start;
  margin-top: 5px; }
.sug-campo-linha textarea { flex: 1; resize: vertical; }
.sug-ja-dito { margin-bottom: 10px; }
.sug-ja-item { font-size: 12px; line-height: 1.5; padding: 4px 0;
  border-bottom: 1px solid var(--line-soft); }
.sug-ja-quando { color: var(--fg-mute); font-family: ui-monospace, monospace; }
.sug-ja-resp { margin-top: 2px; padding-left: 12px; color: var(--fg-dim); }
.sug-esperando { color: #d9b84a; }

/* A ficha que chega marcada pelo agente.
   Quem sabe se aquilo apaga alguma coisa e quem escreveu o pedido. A tela
   mostra o que ele marcou e POR QUE, e o operador confere. O destaque existe
   para o operador distinguir, de relance, o que e resposta do agente do que e
   resposta dele. */
.sug-abertura { font-size: 12.5px; line-height: 1.5; margin: 2px 0 10px;
  padding: 8px 10px; border-radius: 6px; background: var(--bg-2);
  border-left: 3px solid var(--accent); }
.sug-abertura-cega { border-left-color: #c9a227; }
.sug-abertura-feita { border-left-color: var(--line); opacity: .85; }
.sug-perg-agente { background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 5px; padding-left: 6px; margin-left: -6px; }
/* Linha em que o operador mexeu deixa de ser «do agente»: a cor sai, para ele
   ver o que ja reviu sem precisar lembrar. */
.sug-perg-mexida { background: none; }
.sug-ev { font-size: 11.5px; line-height: 1.45; margin-top: 3px;
  color: var(--fg-dim); }
.sug-ev b { color: var(--accent); font-weight: 600; }
.sug-ev-tr { font-style: italic; opacity: .8; }

/* Alcance e valor: fora da vista por padrao. Uma decisao vale onde foi tomada;
   ampliar e excecao, e quem propoe ampliar e o agente. */
.sug-dobra { margin-top: 9px; }
/* `.sug-dobra-link` e `.sug-dobra-campos` sairam em 10/10/2026 com o item 10:
   a pergunta do ALCANCE deixou a triagem e foi para a pauta da curadoria. O CSS
   sai junto — classe sem uso e peso morto que a guarda conta. */

/* A LEITURA DO AGENTE (10/10/2026). Ela e o centro da ficha: e o que o operador
   confere. Fica num bloco com borda a esquerda, como citacao — porque e fala de
   outra pessoa, e nao do painel. */
.sug-leitura { font-size: 12px; line-height: 1.5; margin: 6px 0 4px;
  padding: 7px 10px; border-radius: 5px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sug-leitura-cab { display: flex; align-items: baseline; gap: 6px; }
/* A resposta do agente NUNCA e so cor: a palavra «SIM»/«NAO»/«NAO SEI» esta
   escrita, e a cor so reforca. Uma pessoa em doze nao distingue verde de
   vermelho, e o painel tem mais de um operador. */
.sug-leitura-resp { font-weight: 700; letter-spacing: .4px; font-size: 11.5px;
  padding: 1px 6px; border-radius: 3px; border: 1px solid currentColor; }
.sug-leitura-mot { margin-top: 3px; }
.sug-leitura-ev { margin-top: 4px; font-size: 11.5px; opacity: .85; }
.sug-leitura-arq { font-family: var(--mono, monospace); opacity: .9; }
.sug-leitura-des { font-family: var(--mono, monospace); color: #7fc98a; }
/* `.sug-conf` sao os tres atos do operador — concordo, discordo, nao sei. Herda
   o espacamento de `.sug-escolhas`, que vem junto no mesmo elemento. */
.sug-conf { margin-top: 6px; }
.sug-conf-motivo { margin-top: 5px; }
.sug-conf-motivo input { width: 100%; }
/* Discordancia fica visivel sem depender de cor: a borda a esquerda muda de
   espessura, que e forma. */
.sug-tri-dif { border-left: 3px solid #d98a4a; padding-left: 7px; }
/* Pergunta tecnica que o AUTOR nao declarou. Nao e erro do operador, e por isso
   nao usa o tom de erro: e uma falta de informacao, e o texto diz de quem. */
.sug-declara-falta { font-size: 12px; line-height: 1.45; margin: 5px 0 3px;
  padding: 6px 9px; border-radius: 5px;
  background: color-mix(in srgb, #c9a227 12%, transparent); }
/* «Concordo com tudo», no topo da ficha. */
.sug-tudo { margin: 8px 0 10px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px; }
/* O calendario do Adiar, no proprio botao (item 11). */
.sug-adiar-cal { display: flex; flex-direction: column; gap: 6px; width: 100%;
  margin-top: 7px; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--linha, #333); }
.sug-adiar-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.sug-adiar-cal input { width: 100%; }
.sug-ampliar { font-size: 12px; line-height: 1.45; margin-bottom: 6px;
  padding: 6px 9px; border-radius: 5px;
  background: color-mix(in srgb, #c9a227 14%, transparent); }
.sug-ampliar b { color: #d9b84a; }
.sug-rev { display: block; }

/* ===== R1 — a navegação de três botões e a página de Projetos =============
   09/10/2026. A lista lateral tratava como iguais coisas de escala muito
   diferente (medido: de 24 a 58.606 arquivos por projeto) e deixava de caber
   com 100. Os cartões permitem ver DE RELANCE quem precisa de atenção.

   COR NUNCA SOZINHA: ~8% dos homens não distinguem verde de vermelho, e o
   painel tem mais de um operador. Todo estado aparece em três canais — cor,
   FORMA (● ◐ ■ ○) e NÚMERO. Tirar a cor daqui não pode tirar a informação. */
.nav-raiz-btn { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 6px; background: none;
  color: var(--fg); font-size: 13.5px; text-align: left; cursor: pointer; }
.nav-raiz-btn:hover { background: var(--bg-2); }
.nav-raiz-btn.ativa { background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--fg); font-weight: 600; }

.pagina-nova { padding: 14px 16px; overflow: auto; }
.pj-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pj-cab h2 { margin: 0; font-size: 17px; }

.pj-faixa { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pj-faixa-item { display: flex; align-items: baseline; gap: 4px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg-2);
  color: var(--fg-dim); font-size: 12.5px; cursor: pointer; }
.pj-faixa-item b { font-size: 16px; color: var(--fg); }
.pj-faixa-item:hover { border-color: var(--accent); }
.pj-filtro-ativo { font-size: 12px; color: var(--fg-dim); margin-bottom: 10px; }

.pj-grade { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.pj-card { border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  padding: 10px 12px; background: var(--bg-2); }
.pj-topo { display: flex; align-items: center; gap: 8px; }
.pj-nome { flex: 1; background: none; border: none; padding: 0; text-align: left;
  color: var(--fg); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.pj-nome:hover { color: var(--accent); }
.pj-ativ { font-size: 12px; color: var(--fg-dim); margin-top: 4px; }

.pj-selo { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.pj-forma { font-size: 13px; line-height: 1; }
.pj-rot { color: var(--fg-dim); }
.pj-num { background: var(--bg-3); border-radius: 9px; padding: 1px 7px;
  font-size: 11px; }

/* As quatro cores. A FORMA acompanha cada uma no HTML — ver pagina-projetos.js */
.pj-turno { border-left-color: var(--ok); }
.pj-turno .pj-forma { color: var(--ok); }
.pj-esperando { border-left-color: var(--warn); }
.pj-esperando .pj-forma { color: var(--warn); }
.pj-parado { border-left-color: var(--err); }
.pj-parado .pj-forma { color: var(--err); }
/* Saudável NÃO some: fica cinza, pequeno, no fim. Sumir é o que acontece com o
   esquecido. */
.pj-ocioso { border-left-color: var(--line); }
.pj-ocioso .pj-forma { color: var(--fg-mute); }

.pj-dobra { margin-top: 8px; }
.pj-dobra-link { background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--accent); }
.pj-filhos { display: flex; flex-direction: column; gap: 3px; margin-top: 6px;
  padding-left: 10px; border-left: 1px dashed var(--line); }
.pj-filho { display: flex; align-items: center; gap: 6px; background: none;
  border: none; padding: 3px 0; color: var(--fg); font-size: 12.5px;
  text-align: left; cursor: pointer; }
.pj-filho:hover { color: var(--accent); }
.pj-criar-filho { background: none; border: 1px dashed var(--line); border-radius: 5px;
  padding: 4px 8px; margin-top: 4px; color: var(--fg-dim); font-size: 11.5px;
  cursor: pointer; }
.pj-criar-filho:hover { border-color: var(--accent); color: var(--accent); }

/* ===== R4 — o dashboard ====================================================
   09/10/2026. Medido no mesmo dia: 212 decisões acumuladas com 12 projetos.
   Cada número traz a definição ao passar o mouse e leva ao que o compõe —
   número que não leva a lugar nenhum obriga a refazer o recorte à mão.
   O que ainda não existe aparece em CINZA como «previsto», nunca como zero:
   zero e «não construído» são coisas diferentes. */
.db-bloco { margin-bottom: 20px; }
.db-bloco h3 { margin: 0 0 8px; font-size: 14px; color: var(--fg-dim);
  font-weight: 600; }
.db-linha { display: flex; flex-wrap: wrap; gap: 9px; }
.db-num { display: flex; align-items: baseline; gap: 6px; padding: 9px 14px;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  background: var(--bg-2); color: var(--fg-dim); font-size: 12.5px;
  cursor: pointer; }
.db-num b { font-size: 20px; color: var(--fg); line-height: 1; }
.db-num:hover { border-color: var(--accent); }
/* Número que não leva a lugar nenhum não finge que leva. */
.db-num-parado { cursor: default; }
.db-num-parado:hover { border-color: var(--line); }
.db-rot { white-space: nowrap; }
.db-forma { font-size: 13px; line-height: 1; }

.db-suas { border-left-color: var(--accent); }
.db-curadoria { border-left-color: var(--info); }
.db-plantao { border-left-color: var(--warn); }
.db-info { border-left-color: var(--line); }

.db-nota { font-size: 12px; color: var(--fg-dim); margin: 8px 0 0;
  max-width: 62ch; line-height: 1.5; }
.db-previsto { display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 5px 10px; border: 1px dashed var(--line);
  border-radius: 6px; color: var(--fg-mute); font-size: 12px; }

/* R2 — subprojetos: filtros, o botão barrado e o aviso de órfão */
.pj-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 12px; }
.pj-busca { flex: 1 1 200px; min-width: 160px; }
.pj-sel { max-width: 200px; }
.pj-check { display: flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--fg-dim); cursor: pointer; }
/* O botão de criar subprojeto de um subprojeto APARECE e explica — esconder não
   ensina a regra, e o DEC-003 manda a frase estar na tela. */
.pj-criar-barrado { opacity: .5; border-style: dotted; cursor: help; }
.pj-orfao { font-size: 12px; line-height: 1.5; margin-bottom: 10px;
  padding: 7px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* P1 — o pulso dos componentes. Calado é vermelho; previsto é cinza, e a
   diferença é a regra: vermelho que não se pode apagar ensina a ignorar. */
.db-pulso { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; background: var(--bg-2); }
.db-pulso-cab { font-size: 12.5px; margin-bottom: 6px; }
.db-comp { display: flex; align-items: baseline; gap: 6px; font-size: 12px;
  padding: 3px 0; color: var(--fg-dim); }
.db-comp b { color: var(--fg); font-weight: 600; }
.db-comp-em_dia .db-forma { color: var(--ok); }
.db-comp-atrasado .db-forma { color: var(--warn); }
.db-comp-calado .db-forma { color: var(--err); }
.db-comp-previsto .db-forma { color: var(--fg-mute); }
.db-comp-previsto { opacity: .7; }

/* ===== CREDENCIAL NA TELA (item 0.2 do operador, 09/10/2026) ================
   Copiar é o padrão e não mostra nada; revelar mostra por 20 s, com a conta
   regressiva à vista, e some sozinha. As quatro telas que mexem com credencial
   usam o mesmo par — ver `credPar` no app.js. */
.cred-par { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
/* A caixa do valor é MONOESPAÇADA e quebra: senha com caractere ambíguo (l/I/1,
   O/0) só se lê assim, e chave SSH não cabe numa linha. */
.cred-caixa { font-family: var(--mono, monospace); font-size: 12px;
  word-break: break-all; max-width: 46ch; padding: 3px 7px; border-radius: 4px;
  border: 1px dashed color-mix(in srgb, #d98a4a 60%, transparent);
  background: color-mix(in srgb, #d98a4a 10%, transparent); }
/* A conta regressiva não é só cor: é número, e fica ao lado do valor para quem
   está lendo saber quanto tempo ainda tem. */
.cred-conta { font-weight: 700; opacity: .75; white-space: nowrap; }

/* Cada falta da §22 com o que exige e o que conserta (item 0.3, 09/10/2026). */
.md-falta { margin-top: 6px; }
.md-falta-que { font-weight: 600; }

/* ===== POPUP DE SENHA, com as tres opcoes (item 1b, 09/10/2026) ============
   A frase humanizada aparece por 60s (e nao 20, como o `credPar`): esta e para
   COPIAR NUM PAPEL, nao para conferir de relance. */
.senha-pop { flex-basis: 100%; margin-top: 8px; padding: 10px 12px;
  border-radius: 7px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  display: flex; flex-direction: column; gap: 7px; }
.senha-pop-rot { font-weight: 700; }
.senha-pop-modos { display: flex; flex-wrap: wrap; gap: 6px; }
.senha-pop-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
/* O valor gerado: monoespacado e quebrando, porque alguem vai COPIAR do papel
   — e l/I/1 e O/0 so se distinguem assim. */
.senha-pop-valor { font-family: var(--mono, monospace); font-size: 14px;
  letter-spacing: .5px; word-break: break-all; padding: 6px 9px;
  border-radius: 5px;
  border: 1px dashed color-mix(in srgb, #d98a4a 60%, transparent);
  background: color-mix(in srgb, #d98a4a 10%, transparent); }
.senha-pop-aviso { min-height: 1.2em; }
.senha-pop input { width: 100%; }
/* O campo e o olho na mesma linha: o olho nao pode empurrar o campo para baixo
   nem encolher a senha a ponto de ela quebrar em duas linhas. */
.senha-pop-campo { display: flex; gap: 6px; align-items: center; }
.senha-pop-campo input { flex: 1 1 auto; min-width: 0; }
.senha-pop-campo .btn { flex: 0 0 auto; min-width: 64px; }

/* O RITO, depois da troca: cinco linhas que ficam na tela. Cor E simbolo E
   posicao — quem nao distingue verde de vermelho le o ✓ e o ✗. */
.senha-passos { display: flex; flex-direction: column; gap: 3px; }
.senha-passo { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.senha-passo-marca { font-weight: 700; color: var(--ok); min-width: 1em; }
.senha-passo.ruim .senha-passo-marca { color: var(--err); }
.senha-passo.ruim strong { color: var(--err); }
.senha-pop-fim { gap: 9px; }

/* A planilha do cofre (item 2, 09/10/2026). Separada visualmente do backup
   cifrado logo acima: o backup existe para RESTAURAR, a planilha para PLANEJAR
   — e confundir as duas custa um backup que ninguem abre. */
.cofre-planilha { margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line); }

/* O aviso de que o NAVEGADOR salva a palavra-chave (10/10/2026). A tela promete
   «nunca é guardada» — verdade do lado do painel, e o painel nao manda no
   Firefox. Dizer os dois lados e o que torna o aviso util: ele e risco e e
   tambem onde procurar as chaves dos backups antigos. */
.cofre-aviso-navegador { margin-top: 6px; padding: 6px 9px; border-radius: 5px;
  line-height: 1.45;
  background: color-mix(in srgb, #c9a227 12%, transparent); }

/* A FAIXA DA SESSÃO DO AGENTE (11/10/2026). Acima de tudo, porque quando ela
   acende nada mais funciona — e porque o operador passou uma manhã sem saber
   que o agente estava fora. Cor E texto E botão: quem não distingue a cor lê a
   frase, que diz o que houve e o que fazer. */
.faixa-agente { display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: color-mix(in srgb, var(--err) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--err) 45%, transparent);
  font-size: 13px; }
.faixa-agente-txt { flex: 1 1 auto; }

/* A JANELA DE RECONECTAR: a pré-checagem em cima, os três passos embaixo. */
.al-pre { display: flex; flex-direction: column; gap: 4px; margin: 10px 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; }
.al-pre-linha { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.al-pre-marca { font-weight: 700; color: var(--ok); min-width: 1em; }
.al-pre-linha.ruim .al-pre-marca { color: var(--err); }
.al-pre-linha.ruim strong { color: var(--err); }
.al-passos { display: flex; flex-direction: column; gap: 12px; }
.al-passo { display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; }
.al-passo input { max-width: 380px; }
.al-saida { white-space: pre-wrap; font-size: 13px; color: var(--fg-dim); }
/* A URL em texto, para copiar: quebra em qualquer ponto porque é longa e a
   máquina do painel não tem navegador — ela vai ser lida de outro aparelho. */
.al-url { word-break: break-all; font-size: 12px; padding: 6px 8px;
  border: 1px dashed var(--line); border-radius: 5px; margin-top: 6px; }

/* ---- R7: a pagina de Gerencia ------------------------------------------
   Cartao, e nao lista: sao quatro areas de peso parecido, e o numero de cada
   uma e o que faz alguem decidir onde olhar. A lista esconderia o numero no
   fim da linha. */
.ger-head { margin: 4px 0 18px; }
.ger-head h2 { margin: 0 0 4px; font-size: 20px; }
.ger-grade { display: grid; gap: 14px;
             grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ger-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
            border-radius: 10px; background: var(--card, rgba(255,255,255,.03));
            border: 1px solid rgba(255,255,255,.10); }
.ger-card-head { display: flex; align-items: center; gap: 8px; }
.ger-card-head h3 { margin: 0; font-size: 15px; }
.ger-icone { font-size: 18px; }
.ger-resumo { margin: 0; font-size: 12px; opacity: .72; line-height: 1.45; }
.ger-corpo { flex: 1; }
.ger-numero { margin: 6px 0 4px; }
.ger-numero strong { font-size: 26px; line-height: 1; }
.ger-unidade { font-size: 12px; opacity: .72; }
.ger-linhas { margin: 0; padding-left: 16px; font-size: 12px; opacity: .80;
              line-height: 1.6; }
/* «Nao e sua alcada» NAO pode parecer zero: um e a casa vazia, o outro e a
   porta fechada, e na tela se leem igual se a cor for a mesma. */
.ger-vedado { margin: 10px 0 4px; font-size: 12.5px; line-height: 1.5;
              color: #d9a441; }
.ger-abrir { align-self: flex-start; }

/* R2: o pai, no formulario de projeto novo. Azul como o bloco de «usado por N
   projetos» da pagina do aparelho: os dois sao CONTEXTO, nao aviso de problema —
   o ambar da casa quer dizer «falta coisa aqui». */
.np-pai-aviso { margin: -2px 0 8px; padding: 8px 10px; border-radius: 8px;
                font-size: 12px; line-height: 1.5;
                background: rgba(79,140,255,.10);
                border: 1px solid rgba(79,140,255,.34); }

/* ---- Seletor de secao no CABECALHO (Painel/Projetos/Gerencia/Estrutura) ----
   Pedido do operador em 14/10/2026, do celular: a coluna de projetos nao dava
   espaco de toque e competia com a tela. Os quatro botoes sobem para o topo e
   viram UM seletor; a coluna some e a selecao passa a ser pela pagina Projetos.
   Alvo de toque >= 44px (o minimo que o dedo acerta). */
.nav-topo { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.nav-topo .nav-raiz-btn {
  display: inline-flex; align-items: center; gap: 6px; width: auto;
  min-height: 40px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--fg);
  font-size: 13.5px; cursor: pointer; }
.nav-topo .nav-raiz-btn:hover { background: var(--bg-2); }
.nav-topo .nav-raiz-btn.ativa {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--fg); font-weight: 600; }
.nav-ic { font-size: 15px; line-height: 1; }
.nav-rotulo { white-space: nowrap; }

/* A coluna lateral de projetos saiu da vista: a selecao e pela pagina Projetos.
   O aside (com a lista e os totais) continua no DOM — o JS ainda escreve nele —,
   so nao ocupa espaco. */
.sidebar { display: none; }
.layout, .layout.com-doca, .layout.sem-centro.com-doca { }

@media (max-width: 860px) {
  .nav-topo { width: 100%; order: 5; }
  .nav-topo .nav-raiz-btn { flex: 1 1 0; justify-content: center; min-height: 46px; }
}

/* O seletor de conversa, no cabecalho da doca (operador, 14/10/2026). */
.doca-seletor { font: inherit; font-size: 13px; font-weight: 600; color: var(--fg);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px; max-width: 220px; cursor: pointer; }
.doca-seletor:hover { border-color: var(--accent); }