/* tkit.css — identidade visual Thinking IT Solutions.
 *
 * Fonte: tkit-identidade (LEIA-ME.md). Regra que manda no arquivo inteiro:
 * "o cobre aparece uma única vez por aplicação, nunca em área grande de
 * preenchimento". Por isso o cobre aqui é acento pontual — foco, estado ativo,
 * uma ação primária por tela — e nunca fundo de bloco.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;800&display=swap');

:root {
  /* paleta da marca */
  --grafite: #1c1f24;
  --cobre: #b5673a;
  --cobre-claro: #c9784a;
  --areia: #f4f1ed;
  --cinza: #6c727a;

  /* superfícies derivadas — tons do grafite, não cinzas neutros, para o
     conjunto continuar lendo como a marca e não como um tema genérico */
  --fundo: var(--grafite);
  --superficie: #23272e;
  --superficie-alta: #2b3038;
  --borda: #363c45;
  --texto: var(--areia);
  --texto-fraco: #9aa1aa;
  --acento: var(--cobre-claro);

  --ok: #5a9367;
  --alerta: #c9a227;
  --erro: #c05a4d;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --esp: 4px;
}

:root[data-tema='claro'] {
  --fundo: var(--areia);
  --superficie: #ffffff;
  --superficie-alta: #faf8f5;
  --borda: #e0dbd3;
  --texto: var(--grafite);
  --texto-fraco: var(--cinza);
  --acento: var(--cobre);
  --ok: #3f7a4d;
  --alerta: #96791b;
  --erro: #a8453a;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema='escuro']) {
    --fundo: var(--areia);
    --superficie: #ffffff;
    --superficie-alta: #faf8f5;
    --borda: #e0dbd3;
    --texto: var(--grafite);
    --texto-fraco: var(--cinza);
    --acento: var(--cobre);
    --ok: #3f7a4d;
    --alerta: #96791b;
    --erro: #a8453a;
  }
}

* { box-sizing: border-box; }

/* `hidden` precisa vencer o display das classes.
 *
 * O atributo hidden vira `display:none` pela folha do navegador, que tem
 * especificidade menor que qualquer classe nossa. Sem este bloco, `.entrada`
 * (display:grid) continua ocupando a tela inteira mesmo escondida — e a página
 * abre com uma faixa vazia gigante no topo. */
[hidden] { display: none !important; }


body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.9rem; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.86em;
}

/* ── estrutura ─────────────────────────────────────────────────────────── */

.topo {
  display: flex;
  align-items: center;
  gap: calc(var(--esp) * 3);
  padding: calc(var(--esp) * 4) calc(var(--esp) * 6);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
.topo .marca { display: flex; align-items: center; gap: calc(var(--esp) * 2.5); }
.topo .marca img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.topo .nome { font-weight: 800; letter-spacing: -0.01em; }
.topo .produto { color: var(--texto-fraco); font-weight: 500; }
.topo .espaco { flex: 1; }

main { max-width: 1060px; margin: 0 auto; padding: calc(var(--esp) * 7) calc(var(--esp) * 4); }

.secao { margin-bottom: calc(var(--esp) * 9); }
.secao > header {
  display: flex; align-items: baseline; gap: calc(var(--esp) * 3);
  margin-bottom: calc(var(--esp) * 4);
}
.secao > header p { margin: 0; color: var(--texto-fraco); font-size: 0.88rem; }

/* ── cartões e listas ──────────────────────────────────────────────────── */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: calc(var(--esp) * 5);
}

.lista { display: flex; flex-direction: column; gap: calc(var(--esp) * 3); }

.item {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  padding: calc(var(--esp) * 4);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--esp) * 4);
}
.item .corpo { flex: 1; min-width: 0; }
.item .titulo { font-weight: 800; display: flex; align-items: center; gap: calc(var(--esp) * 2); }
.item .detalhe { color: var(--texto-fraco); font-size: 0.85rem; margin-top: 2px; }
.item.inativo { opacity: 0.55; }

.vazio {
  border: 1px dashed var(--borda);
  border-radius: var(--r-md);
  padding: calc(var(--esp) * 8);
  text-align: center;
  color: var(--texto-fraco);
}

/* ── estado ────────────────────────────────────────────────────────────── */

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--texto-fraco);
  white-space: nowrap;
}
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.selo.off { color: var(--texto-fraco); }
.selo.aviso { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 40%, transparent); }
.selo.erro { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 40%, transparent); }

/* selo da linha do produto (MCP Manager Platform: Enterprise / Personal).
   Neutro de propósito: o cobre da tela já está no ícone. */
.linha-produto {
  display: inline-block; vertical-align: middle;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--texto-fraco);
  white-space: nowrap;
}
.app-header h1 .linha-produto { margin-left: 6px; position: relative; top: -1px; }

.pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pilula {
  font-size: 0.75rem; padding: 2px 9px; border-radius: var(--r-sm);
  background: var(--superficie-alta); border: 1px solid var(--borda); color: var(--texto-fraco);
}

/* ── controles ─────────────────────────────────────────────────────────── */

label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; }

input[type='text'], input[type='password'], select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  color: var(--texto);
  font: inherit;
  font-size: 0.92rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
input::placeholder { color: var(--texto-fraco); }

.campo { margin-bottom: calc(var(--esp) * 4); }
.campo .ajuda { color: var(--texto-fraco); font-size: 0.78rem; margin-top: 5px; font-weight: 500; }

button {
  font: inherit; font-weight: 600; font-size: 0.88rem;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--borda); background: var(--superficie-alta); color: var(--texto);
  cursor: pointer;
}
button:hover { border-color: var(--texto-fraco); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* A ÚNICA superfície de cobre por tela — a ação principal. */
button.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
button.primario:hover { filter: brightness(1.08); }

button.discreto { background: transparent; border-color: transparent; color: var(--texto-fraco); padding: 6px 10px; }
button.discreto:hover { color: var(--texto); border-color: var(--borda); }
button.perigo:hover { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, transparent); }

.acoes { display: flex; gap: calc(var(--esp) * 2); align-items: center; }

/* ── segredo revelado uma vez ──────────────────────────────────────────── */

.segredo {
  margin-top: calc(var(--esp) * 4);
  border: 1px solid color-mix(in srgb, var(--alerta) 45%, var(--borda));
  border-radius: var(--r-md);
  padding: calc(var(--esp) * 4);
  background: var(--superficie-alta);
}
.segredo .aviso { color: var(--alerta); font-weight: 600; font-size: 0.82rem; margin-bottom: 8px; }
.segredo .valor {
  display: flex; gap: 8px; align-items: center;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--r-sm);
  padding: 10px 12px;
}
.segredo .valor code { flex: 1; word-break: break-all; color: var(--texto); }
.segredo .campo-copiavel { margin-top: 12px; }
.segredo .campo-copiavel + .ajuda { margin-top: 12px; }
.segredo .campo-copiavel .rotulo { font-size: 0.82rem; font-weight: 600; color: var(--texto-fraco); margin-bottom: 6px; }

/* ── entrar ────────────────────────────────────────────────────────────── */

.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.entrada .caixa { width: 100%; max-width: 380px; }
.entrada .marca-grande { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 28px; }
.entrada .marca-grande img { width: 54px; height: 54px; border-radius: 12px; }
.entrada .marca-grande .titulo { font-weight: 800; font-size: 1.15rem; }
.entrada .marca-grande .sub { color: var(--texto-fraco); font-size: 0.85rem; }

.erro-msg {
  color: var(--erro); font-size: 0.85rem; margin-top: 10px; min-height: 1.2em;
}

/* ── tabela simples ────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texto-fraco); font-weight: 600;
  padding: 0 10px 8px; border-bottom: 1px solid var(--borda);
}
td { padding: 11px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tr:last-child td { border-bottom: none; }

/* ── responsivo ────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  main { padding: calc(var(--esp) * 5) 16px; }
  .topo { padding: 14px 16px; }
  .item { flex-direction: column; gap: calc(var(--esp) * 3); }
  .acoes { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layout de aplicação — header fixo, sidebar de instâncias, conteúdo ao lado.

   Estrutura herdada do MCP Manager Mesh, que é onde ela provou funcionar para
   este público: a lista de sistemas sempre visível à esquerda, porque o
   consultor alterna entre clientes o tempo todo e esconder essa lista atrás de
   um menu custa um clique em cada troca.
   ═══════════════════════════════════════════════════════════════════════════ */

body.app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px; flex: none;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.app-header .esq { display: flex; align-items: center; gap: 11px; }
.app-header .esq img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.app-header h1 { font-size: 15px; font-weight: 800; }
.app-header .sub { font-size: 11.5px; color: var(--texto-fraco); margin-top: 1px; }
.app-header .dir { display: flex; align-items: center; gap: 8px; }

.app-layout { flex: 1; display: flex; min-height: 0; }

.app-sidebar {
  width: 280px; flex: none; display: flex; flex-direction: column;
  background: var(--superficie); border-right: 1px solid var(--borda);
}
.app-sidebar .cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--borda); flex: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--texto-fraco);
}
.app-sidebar .rol { flex: 1; overflow-y: auto; padding: 8px; }

.inst {
  padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid transparent; margin-bottom: 4px;
}
.inst:hover { background: var(--superficie-alta); }
.inst.ativa { background: var(--superficie-alta); border-color: var(--acento); }
.inst .nome { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.inst .meta { font-size: 11.5px; color: var(--texto-fraco); margin-top: 3px; }
.inst .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-fraco); flex: none; }
.inst .ponto.ok { background: var(--ok); }
.inst .ponto.erro { background: var(--erro); }

.app-conteudo { flex: 1; overflow-y: auto; padding: 22px 26px; min-width: 0; }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 22px; }
.aba {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--texto-fraco); cursor: pointer; border-radius: 0;
}
.aba:hover { color: var(--texto); border-color: transparent; }
.aba.ativa { color: var(--texto); border-bottom-color: var(--acento); }

.detalhe-vazio {
  height: 100%; display: grid; place-items: center; text-align: center;
  color: var(--texto-fraco);
}

.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.dado .rot {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-fraco); font-weight: 600; margin-bottom: 3px;
}
.dado .val { font-size: 13.5px; word-break: break-all; }

.barra {
  height: 6px; border-radius: 3px; background: var(--superficie-alta);
  overflow: hidden; margin: 7px 0 5px;
}
.barra i { display: block; height: 100%; background: var(--acento); }

/* modal */
dialog.modal {
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: 0; max-width: 560px; width: 92vw;
}
dialog.modal::backdrop { background: rgba(0, 0, 0, .55); }
dialog.modal .cab {
  padding: 16px 20px; border-bottom: 1px solid var(--borda); font-weight: 800;
}
dialog.modal .corpo { padding: 20px; max-height: 64vh; overflow-y: auto; }
dialog.modal .pe {
  padding: 14px 20px; border-top: 1px solid var(--borda);
  display: flex; justify-content: flex-end; gap: 8px;
}

@media (max-width: 860px) {
  .app-layout { flex-direction: column; }
  .app-sidebar { width: 100%; max-height: 190px; border-right: none; border-bottom: 1px solid var(--borda); }
}

/* ── Gateway ────────────────────────────────────────────────────────────────
 * Classes, e não style="…": a CSP do painel (style-src 'self') ignora estilo
 * inline, então atributo style na marcação simplesmente não vale. */

.painel-app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.painel-app[hidden] { display: none; }

/* menu lateral */
.menu { width: 250px; }
.menu .rol { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid transparent;
  color: var(--texto); text-decoration: none; font-size: 13.5px; font-weight: 600;
  background: none; cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--superficie-alta); color: var(--texto); text-decoration: none; }
.menu-item.ativo { background: var(--superficie-alta); border-color: var(--acento); }
.menu-icone { width: 18px; text-align: center; color: var(--texto-fraco); flex: none; }
.menu-grupo {
  margin: 16px 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.menu-sub { font-weight: 500; padding-left: 14px; }
.menu-sub .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-sub .conta { font-size: 11px; color: var(--texto-fraco); }
.menu-vazio { padding: 6px 14px; font-size: 12px; color: var(--texto-fraco); }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-fraco); flex: none; }
.ponto.ok { background: var(--ok); }
.ponto.erro { background: var(--erro); }
.menu-rodape { border-top: 1px solid var(--borda); padding: 10px; flex: none; }
.menu-item.sair { color: var(--texto-fraco); }
/* Títulos das seções do menu (Operação · Acesso · Sistema). */
.menu-secao {
  margin: 14px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.rol > .menu-secao:first-child { margin-top: 4px; }

/* Vínculo usuário↔máquina (tela Usuários e diálogo). */
.chips-maquina { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.chip-maquina {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  background: var(--superficie-alta); border: 1px solid var(--borda); color: var(--texto); white-space: nowrap;
}
.selo.neutro { color: var(--texto-fraco); }
button.editar-maquinas {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent;
  padding: 2px 6px; border-radius: var(--r-sm); color: inherit; cursor: pointer; text-align: left;
}
button.editar-maquinas:hover { border-color: var(--borda); background: var(--superficie-alta); }
button.editar-maquinas .lapis { color: var(--texto-fraco); font-size: 12px; }
.cel-maquinas { max-width: 280px; }
.lista-maquinas { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 260px; overflow: auto; }
.opcao-tipo.inativo { opacity: .45; }
.opcao-todas { margin-bottom: 6px; }

/* cabeçalho de página */
.pagina-cab { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pagina-cab .txt { flex: 1; min-width: 240px; }
.pagina-cab h2 { font-size: 1.35rem; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagina-cab p { margin: 0; color: var(--texto-fraco); font-size: .88rem; }

/* tipo de conector */
.tipo {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--borda); color: var(--texto-fraco);
}
.tipo.sap { color: #5aa0d8; border-color: color-mix(in srgb, #5aa0d8 45%, var(--borda)); }
.tipo.desktop { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, var(--borda)); }
.tipo.sem { color: var(--alerta); border-style: dashed; }

/* cartões de conector */
.grade-conectores { display: flex; flex-direction: column; gap: 12px; }
.conector {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: 16px 18px;
}
.conector.inativo { opacity: .6; }
.conector .info { flex: 1; min-width: 240px; }
.conector .nome { font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conector .meta { margin-top: 5px; color: var(--texto-fraco); font-size: .82rem; }
.conector .acoes { flex-wrap: wrap; justify-content: flex-end; }
.conector select { width: auto; padding: 5px 8px; font-size: .8rem; }

/* conectores da mesma máquina, agrupados */
.maquina {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: 14px 14px 14px;
}
.maquina-cab { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.maquina-nome { font-weight: 800; font-size: 1.05rem; }
.maquina-meta { color: var(--texto-fraco); font-size: .8rem; }
.maquina .conector { background: var(--superficie-alta); border-radius: var(--r-md, 10px); padding: 14px 16px; }
.maquina .conector .nome { font-size: .95rem; }
.pilula.no-ar { color: var(--texto); border-color: color-mix(in srgb, var(--ok) 45%, var(--borda)); }
.pilula.parada { opacity: .6; text-decoration: line-through; }
.menu-maquina {
  margin: 8px 12px 2px; font-size: 12px; font-weight: 700; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-sub.no-grupo { padding-left: 22px; }

/* MCPs */
.mcps { display: flex; flex-direction: column; gap: 14px; }
.mcp {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: 16px 18px;
}
.mcp.parado { opacity: .8; }
.mcp .cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcp .cab .rota { font-weight: 800; font-size: 1rem; }
.mcp .cab .meta { color: var(--texto-fraco); font-size: .82rem; }
.mcp .cab .espaco { flex: 1; }
.mcp .url { display: block; margin-top: 4px; color: var(--texto-fraco); font-size: .8rem; word-break: break-all; }
.tabela-chaves { width: 100%; margin-top: 12px; font-size: .85rem; }
.tabela-chaves th { font-size: 10.5px; }
.tabela-chaves td { vertical-align: middle; }
.tabela-chaves tr.revogada td { opacity: .5; }
.tabela-chaves .quem { font-weight: 700; }
.tabela-chaves .fraco { color: var(--texto-fraco); font-size: .8rem; }
.tabela-chaves .acoes-chave { text-align: right; white-space: nowrap; }
.sem-chave { color: var(--texto-fraco); font-size: .84rem; padding: 12px 0 2px; }
.validade { cursor: pointer; }
.validade.vencendo { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 45%, var(--borda)); }
.carencia { display: block; margin-top: 3px; font-size: .74rem; color: var(--alerta); }
.legado { margin-top: 6px; border: 1px dashed var(--borda); border-radius: var(--r-lg); padding: 14px 18px; }
.legado .titulo-legado { font-size: .9rem; font-weight: 800; color: var(--alerta); }
.legado .ajuda-legado { font-size: .8rem; color: var(--texto-fraco); margin: 3px 0 0; }
.legado select { width: auto; padding: 5px 8px; font-size: .8rem; }

/* diálogos */
.escolha-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao-tipo {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--r-md); padding: 12px;
  font-weight: 400; margin: 0;
}
.opcao-tipo:has(input:checked) { border-color: var(--acento); background: var(--superficie-alta); }
.opcao-tipo input { margin-top: 3px; }
.opcao-tipo strong { display: block; }
.opcao-tipo small { display: block; color: var(--texto-fraco); font-size: .78rem; margin-top: 2px; }
.texto-modal { margin: 0 0 14px; font-size: .9rem; }
dialog.modal { max-width: 620px; }
dialog.modal .segredo:first-child { margin-top: 0; }
dialog.modal .ajuda code { word-break: break-all; }

@media (max-width: 860px) {
  .menu { width: 100%; }
  .escolha-tipo { grid-template-columns: 1fr; }
  .tabela-chaves .col-uso, .tabela-chaves .col-prefixo { display: none; }
}
.tabela-chaves { table-layout: fixed; }
.tabela-chaves th:nth-child(1) { width: 22%; }
.tabela-chaves th:nth-child(2) { width: 13%; }
.tabela-chaves th:nth-child(3) { width: 22%; }
.tabela-chaves th:nth-child(4) { width: 13%; }
.tabela-chaves th:nth-child(5) { width: 30%; }
.tabela-chaves code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.modal .corpo > div + div .segredo { margin-top: 12px; }

/* ── Licença ────────────────────────────────────────────────────────────────
 * Mesma regra da CSP: tudo por classe, nada de style="…". */

button.largo { width: 100%; }

/* Faixa no topo: aparece em qualquer tela quando a licença não vale ou está
 * no fim. Alerta, não cobre — o cobre é da ação principal de cada tela. */
.faixa-licenca {
  flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 20px; font-size: .86rem; font-weight: 600;
  color: var(--alerta);
  background: color-mix(in srgb, var(--alerta) 12%, var(--superficie));
  border-bottom: 1px solid color-mix(in srgb, var(--alerta) 40%, var(--borda));
}
.faixa-licenca.erro {
  color: var(--erro);
  background: color-mix(in srgb, var(--erro) 12%, var(--superficie));
  border-bottom-color: color-mix(in srgb, var(--erro) 40%, var(--borda));
}
.faixa-licenca a { color: inherit; text-decoration: underline; }

.licenca { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.licenca .cartao { padding: 18px 20px; }
.licenca h3 { font-size: .95rem; margin-bottom: 4px; }
.licenca .explica { margin: 0 0 12px; color: var(--texto-fraco); font-size: .85rem; }
.licenca .dados { margin-top: 4px; }
.licenca .dado .val.fraco { color: var(--texto-fraco); }
.licenca .dado .val.erro { color: var(--erro); }
.licenca .motivo { margin-top: 12px; font-size: .85rem; color: var(--texto-fraco); }
.licenca .motivo.erro { color: var(--erro); }
.linha-copiar {
  display: flex; gap: 8px; align-items: center;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--r-sm);
  padding: 8px 10px;
}
.linha-copiar code { flex: 1; min-width: 0; word-break: break-all; color: var(--texto); }
.linha-copiar.codigo-instalacao code { font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; }
.linha-copiar.renovacao { margin-top: 12px; }
.linha-copiar.renovacao code { font-size: .78rem; max-height: 7.5em; overflow-y: auto; }
.ativar { display: flex; gap: 8px; align-items: stretch; }
.ativar textarea {
  flex: 1; min-height: 44px; height: 44px; resize: vertical;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .82rem;
}
.licenca .ok-msg { color: var(--ok); font-size: .85rem; margin-top: 10px; min-height: 1.2em; }
.atualizar-licenca { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.atualizar-licenca .explica { margin: 0; flex: 1; min-width: 220px; }

@media (max-width: 720px) {
  .ativar { flex-direction: column; }
}

/* ── Endereços interno e público de um MCP ──────────────────────────────────
 * O público primeiro: é o que vai para o cliente MCP na internet. */
.enderecos { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.endereco { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.endereco code { color: var(--texto-fraco); font-size: .8rem; word-break: break-all; }
.endereco .rot {
  flex: none; width: 58px; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.endereco .rot.publico { color: var(--ok); }
/* Largura fixa: com `auto`, o texto das opções ("pública — para o cliente MCP…")
 * alarga o seletor e empurra Rotacionar/Desativar para fora da célula. */
.tabela-chaves .acoes-chave select { width: 118px; padding: 5px 8px; font-size: .8rem; }
/* Com o seletor no lugar do botão, a coluna de ações precisa de mais espaço:
 * as outras cedem um pouco (nome, prefixo e datas cabem com reticências). */
.tabela-chaves th:nth-child(1) { width: 20%; }
.tabela-chaves th:nth-child(2) { width: 11%; }
.tabela-chaves th:nth-child(3) { width: 19%; }
.tabela-chaves th:nth-child(4) { width: 10%; }
.tabela-chaves th:nth-child(5) { width: 40%; }

/* ── Diagnóstico ────────────────────────────────────────────────────────────
 * Um cartão por item; a cor da borda esquerda diz o estado antes de ler. */
.diagnostico { display: flex; flex-direction: column; gap: 10px; max-width: 920px; }
.diag-cab { font-size: .82rem; color: var(--texto-fraco); margin-bottom: 2px; }
.diag-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borda); border-left-width: 4px;
  border-radius: var(--r-md); padding: 13px 16px;
}
.diag-item.ok { border-left-color: var(--ok); }
.diag-item.aviso { border-left-color: var(--alerta); }
.diag-item.erro { border-left-color: var(--erro); }
.diag-icone { font-size: 1.15rem; line-height: 1.3; flex: none; }
.diag-corpo { flex: 1; min-width: 0; }
.diag-titulo { font-weight: 800; font-size: .95rem; }
.diag-ms { font-weight: 400; font-size: .74rem; color: var(--texto-fraco); margin-left: 6px; }
.diag-detalhe { font-size: .86rem; margin-top: 3px; word-break: break-word; }
.diag-acao {
  margin-top: 8px; font-size: .84rem; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--fundo); border: 1px solid var(--borda);
}
.diag-item.erro .diag-acao { border-color: color-mix(in srgb, var(--erro) 35%, var(--borda)); }
.diag-item.aviso .diag-acao { border-color: color-mix(in srgb, var(--alerta) 35%, var(--borda)); }
.diag-etapas { margin: 8px 0 0; padding-left: 20px; font-size: .82rem; }
.diag-etapas li { margin: 2px 0; }
.diag-etapas li.ok::marker { color: var(--ok); }
.diag-etapas li.erro { color: var(--erro); }
.diag-etapas .et { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 700; }

/* ── Identidade: entrar em duas etapas, usuários, conta e auditoria ─────────
 * Tudo por classe (CSP style-src 'self'). */

.etapas-login { display: flex; gap: 6px; margin-bottom: 16px; }
.etapas-login .etapa {
  flex: 1; text-align: center; font-size: .74rem; font-weight: 600; padding: 5px 0;
  border-bottom: 2px solid var(--borda); color: var(--texto-fraco);
}
.etapas-login .etapa.ativa { color: var(--texto); border-bottom-color: var(--acento); }
.etapas-login .etapa.feita { color: var(--ok); border-bottom-color: color-mix(in srgb, var(--ok) 60%, var(--borda)); }
input.codigo { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
input.codigo.recuperacao { letter-spacing: .12em; font-size: 1.1rem; }
.links-mfa { display: flex; justify-content: space-between; margin-top: 10px; }
.sso { margin-top: 14px; }
.sso .ou { display: flex; align-items: center; gap: 10px; color: var(--texto-fraco); font-size: .78rem; margin-bottom: 12px; }
.sso .ou::before, .sso .ou::after { content: ''; flex: 1; border-top: 1px solid var(--borda); }
a.botao {
  display: block; text-align: center; font-weight: 600; font-size: .88rem; padding: 9px 16px;
  border-radius: var(--r-sm); border: 1px solid var(--borda); background: var(--superficie-alta); color: var(--texto);
}
a.botao:hover { border-color: var(--texto-fraco); text-decoration: none; }
.ajuda-bloco { color: var(--texto-fraco); font-size: .8rem; margin: 0 0 12px; }

.app-header .quem {
  font-size: .8rem; color: var(--texto-fraco); border: 1px solid var(--borda); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap;
}
.app-header .quem:hover { color: var(--texto); text-decoration: none; }
.app-header .quem strong { color: var(--texto); font-weight: 600; }

/* O papel decide o que aparece; o servidor decide o que vale. */
body.leitura .escrita { display: none !important; }
body:not(.pode-licenca) .so-licenca { display: none !important; }
body:not(.pode-usuarios) [data-permissao='usuarios'] { display: none !important; }
body:not(.pode-auditoria) [data-permissao='auditoria'] { display: none !important; }
body:not(.pode-gerir-usuarios) .gerir-usuarios { display: none !important; }
body.restrita .menu .rol > .menu-item:not([data-menu='conta']),
body.restrita .menu .menu-grupo,
body.restrita #menu-mcps { display: none !important; }
/* Gateway sem licença válida: os MCPs não respondem, então o menu mostra só o
   essencial — Visão geral, Usuários, Licença e Minha conta. O resto some. */
body.sem-licenca .menu .rol > .menu-item:not([data-menu='dashboard']):not([data-menu='usuarios']):not([data-menu='licenca']):not([data-menu='conta']),
body.sem-licenca .menu .menu-grupo,
body.sem-licenca .menu-filtro,
body.sem-licenca #menu-mcps,
body.sem-licenca #selo-estado { display: none !important; }

.papel { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borda); }
.papel.administrador { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, var(--borda)); }
.papel.operador { color: #5aa0d8; border-color: color-mix(in srgb, #5aa0d8 45%, var(--borda)); }
.papel.auditor { color: var(--texto-fraco); }

.tabela-usuarios td, .tabela-auditoria td, .tabela-sessoes td { vertical-align: middle; }
.tabela-usuarios .quem-u strong { display: block; }
.tabela-usuarios .quem-u small { color: var(--texto-fraco); }
.tabela-usuarios .acoes-u { text-align: right; white-space: nowrap; }
.tabela-usuarios select { width: auto; padding: 5px 8px; font-size: .8rem; }
.tabela-usuarios tr.inativo td { opacity: .55; }
.fraco { color: var(--texto-fraco); }
.pequeno { font-size: .8rem; }

.conta { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.conta .cartao, .usuarios .cartao, .auditoria .cartao { padding: 18px 20px; }
.conta h3, .usuarios h3 { font-size: .95rem; margin-bottom: 4px; }
.conta .explica, .usuarios .explica { margin: 0 0 12px; color: var(--texto-fraco); font-size: .85rem; }
.conta .campo-idioma { max-width: 280px; margin-bottom: 0; }
.form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.form-linha .campo { margin-bottom: 0; }
.acoes-form { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.ok-msg { color: var(--ok); font-size: .85rem; min-height: 1.2em; }

.mfa-cadastro { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-top: 8px; }
.mfa-cadastro .qr { background: #fff; border-radius: var(--r-md); padding: 8px; line-height: 0; }
.mfa-cadastro .qr img { width: 216px; height: 216px; display: block; image-rendering: pixelated; }
.mfa-cadastro ol { margin: 0 0 12px; padding-left: 18px; font-size: .86rem; }
.mfa-cadastro ol li { margin-bottom: 6px; }
.segredo-totp { font-size: .95rem; letter-spacing: .08em; word-break: break-all; }
.codigos-recuperacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 10px 0; }
.codigos-recuperacao code { font-size: 1rem; letter-spacing: .06em; }

/* Filtros numa linha só em tela larga: quatro campos e, no fim, Filtrar com o
   grupo de exportação (CSV/JSON juntos, sem JSON sobrar sozinho embaixo). */
.filtros-auditoria {
  display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  gap: 10px; align-items: end; margin-bottom: 12px;
}
.filtros-auditoria .campo { margin-bottom: 0; min-width: 0; }
/* Mesmo padding e fonte dos inputs de texto: com padding menor o campo de data
   ficava mais baixo e os rótulos De/Até desciam alguns pixels. */
.filtros-auditoria input[type='date'] {
  width: 100%; font: inherit; font-size: 0.92rem; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
}
.filtros-auditoria .acoes-filtro { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
/* Altura única para texto, lista, data e botões: cada controle tinha a sua
   (o de data, com ícone, ficava maior) e os rótulos saíam desalinhados. */
.filtros-auditoria input, .filtros-auditoria select, .filtros-auditoria button {
  box-sizing: border-box; height: 42px; padding-top: 0; padding-bottom: 0;
}
.grupo-exportar { display: inline-flex; }
.grupo-exportar button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.grupo-exportar button + button { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
@media (max-width: 900px) {
  .filtros-auditoria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-auditoria .acoes-filtro { grid-column: 1 / -1; }
}

/* Largura fixa só onde o conteúdo tem tamanho previsível (quando, usuário, IP);
   ação e alvo em porcentagem, cortando com reticências (texto inteiro no
   title). O detalhe, que é o texto longo, vai numa linha própria com a largura
   toda do cartão — numa coluna ele ficava espremido e quebrava letra a letra. */
.tabela-auditoria { font-size: .82rem; table-layout: fixed; }
.tabela-auditoria th:nth-child(1) { width: 9.5rem; }
.tabela-auditoria th:nth-child(2) { width: 9rem; }
.tabela-auditoria th:nth-child(3) { width: 8.5rem; }
.tabela-auditoria th:nth-child(4) { width: 30%; }
.tabela-auditoria .corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-auditoria .acao { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 700; }
.tabela-auditoria .acao.alerta { color: var(--alerta); }
.tabela-auditoria .quando { white-space: nowrap; color: var(--texto-fraco); }
/* Evento com detalhe: a linha do evento perde a borda de baixo para o detalhe
   ficar colado nela, como um bloco só. */
.tabela-auditoria tr.com-detalhe td { border-bottom: none; padding-bottom: 3px; }
.tabela-auditoria .linha-detalhe td { padding-top: 0; }
.tabela-auditoria .detalhe {
  color: var(--texto-fraco); font-size: .78rem; overflow-wrap: anywhere;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.mais-auditoria { margin-top: 10px; }

@media (max-width: 720px) {
  .mfa-cadastro { grid-template-columns: 1fr; }
}
.usuarios { display: flex; flex-direction: column; gap: 14px; }
/* Ações quebram linha em vez de vazar do cartão em tela estreita. */
.tabela-usuarios .acoes-u { white-space: normal; }
.tabela-usuarios .acoes-u button { margin: 2px 0; }

/* ── OAuth: consentimento, Clientes OAuth e somente leitura ─────────────── */

/* A tela de consentimento é uma decisão só: sem menu ao lado para distrair
   (e para ninguém clicar em outra coisa achando que já autorizou). */
.painel-app.foco .app-sidebar { display: none; }
body.sem-oauth [data-menu='oauth-clientes'] { display: none !important; }

.consentimento { max-width: 640px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 14px; }
.consentimento .cartao { padding: 20px 22px; }
.consentimento h3 { font-size: .95rem; margin-bottom: 6px; }
.consentimento .explica { margin: 0 0 12px; color: var(--texto-fraco); font-size: .85rem; }
.consentimento .cliente-oauth { display: flex; align-items: center; gap: 12px; }
.consentimento .cliente-oauth .nome { font-size: 1.15rem; font-weight: 800; }
.consentimento .destino { margin-top: 10px; font-size: .85rem; }
.consentimento .destino code { word-break: break-all; }
.aviso-oauth {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); font-size: .82rem;
  border: 1px solid color-mix(in srgb, var(--alerta) 40%, var(--borda)); color: var(--texto-fraco);
}
.lista-rotas { display: flex; flex-direction: column; gap: 8px; }
.lista-rotas .opcao-tipo code { font-size: .88rem; }
.lista-rotas .opcao-tipo.travada { cursor: default; }
.opcao-leitura { margin-top: 4px; }
.acoes-consentimento { display: flex; gap: 10px; justify-content: flex-end; }

.selo.leitura { color: #5aa0d8; border-color: color-mix(in srgb, #5aa0d8 45%, var(--borda)); }
button.selo.leitura, button.selo.escrita-total { cursor: pointer; background: none; }
.opcao-chave-leitura { margin-top: 2px; }
/* Aviso de MCP sem nenhuma ferramenta anotada como leitura (conector antigo):
   com somente leitura, a credencial não alcançaria nada. */
.aviso-leitura {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: .8rem; line-height: 1.4;
  border: 1px solid color-mix(in srgb, var(--alerta) 45%, var(--borda)); color: var(--texto);
  background: color-mix(in srgb, var(--alerta) 8%, transparent);
}
.opcao-tipo small.aviso-leitura { display: block; margin-top: 6px; }
/* No consentimento, o aviso só faz sentido com "Somente leitura" marcado. */
#form-consentimento:has(#oauth-leitura:not(:checked)) .so-com-leitura { display: none; }

.clientes-oauth { display: flex; flex-direction: column; gap: 14px; }
.clientes-oauth .cartao { padding: 16px 20px; }
.clientes-oauth .cartao.inativo { opacity: .6; }
.cab-cliente { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cab-cliente .txt { flex: 1; min-width: 220px; }
.cab-cliente .nome { font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cab-cliente .meta { color: var(--texto-fraco); font-size: .8rem; margin-top: 3px; word-break: break-all; }
.tabela-consentimentos { margin-top: 12px; font-size: .84rem; }
.tabela-consentimentos td { vertical-align: middle; }
.tabela-consentimentos tr.inativo td { opacity: .55; }
.tabela-consentimentos .acoes-u { text-align: right; }
.tabela-consentimentos code { font-size: .8rem; }

/* O ícone do produto é um bloco grafite: sobre o cabeçalho escuro ele se
 * perdia no fundo. Um anel na cor da borda o separa nos dois temas, sem
 * gastar o cobre. */
.topo .marca img,
.header-left > img,
.entrada .marca-grande img { box-shadow: 0 0 0 1px var(--borda); }

/* ── menu lateral: MCPs por máquina ─────────────────────────────────────── */
.menu-grupo-mcps { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-ativos {
  font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: none;
  color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: 999px; padding: 1px 7px;
}
.menu-filtro {
  margin: 0 12px 8px; width: calc(100% - 24px); padding: 6px 10px; font-size: 12px;
  border-radius: var(--r-sm); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
}
.menu-filtro:focus { outline: none; border-color: var(--acento); }
.menu-maquina {
  display: flex; align-items: center; gap: 7px; width: 100%; margin: 6px 0 1px; padding: 6px 12px;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  color: var(--texto); font-size: 12.5px; font-weight: 700;
}
.menu-maquina:hover { background: var(--superficie-alta); }
.menu-maquina .seta { width: 10px; color: var(--texto-fraco); font-size: 10px; }
.menu-maquina .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-maquina-corpo { display: flex; flex-direction: column; gap: 1px; }
.menu-sub .versao { font-size: 10px; color: var(--texto-fraco); font-family: var(--mono, ui-monospace, monospace); }
.menu-mcp {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 40px; border-radius: var(--r-sm);
  border: 1px solid transparent; color: var(--texto-fraco); font-size: 12px; text-decoration: none;
  font-family: var(--mono, ui-monospace, monospace);
}
.menu-mcp:hover { background: var(--superficie-alta); color: var(--texto); text-decoration: none; }
.menu-mcp.ativo { border-color: var(--acento); background: var(--superficie-alta); color: var(--texto); }
.menu-mcp.parado { opacity: .6; }
.menu-mcp .ponto { width: 6px; height: 6px; }
.menu-mcp .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-cli {
  min-width: 18px; padding: 0 5px; border-radius: 999px; text-align: center;
  font-size: 10.5px; font-weight: 700; line-height: 16px; font-family: inherit;
  color: var(--texto-fraco); background: var(--superficie-alta); border: 1px solid var(--borda);
}
.badge-cli.on { color: #fff; background: var(--ok); border-color: var(--ok); }

/* selos de clientes no cabeçalho de cada MCP */
.selo-cli {
  font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--texto-fraco); white-space: nowrap;
}
.selo-cli.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.mcp.destacado { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.tabela-chaves .quem .ponto { display: inline-block; vertical-align: middle; margin-right: 4px; }

/* Clientes OAuth: destino de cada MCP (máquina · produto · versão) */
.destinos .destino-mcp { display: flex; flex-direction: column; gap: 1px; margin: 2px 0; }
.destinos .destino-mcp small { color: var(--texto-fraco); font-size: .74rem; display: flex; align-items: center; gap: 5px; }
.destinos .destino-mcp small .ponto { width: 6px; height: 6px; }

/* ── tráfego MCP ─────────────────────────────────────────────────────────── */
.tabela-trafego tr.trafego { cursor: pointer; }
.tabela-trafego tr.trafego:hover td { background: var(--superficie-alta); }
.tabela-trafego tr.trafego.aberto td { background: var(--superficie-alta); }
.tabela-trafego small { font-size: .74rem; }
.linha-payload td { background: var(--superficie-alta); padding: 10px 12px 14px; }
.payloads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rot-payload { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 4px; }
.payloads pre {
  margin: 0; max-height: 420px; overflow: auto; padding: 10px 12px; font-size: .74rem; line-height: 1.45;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--r-sm);
  white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 900px) { .payloads { grid-template-columns: 1fr; } }

/* ── downloads ───────────────────────────────────────────────────────────── */
.downloads { display: flex; flex-direction: column; gap: 14px; }
.produto-download { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.produto-download .cab-produto .nome { font-weight: 800; font-size: 1.02rem; }
.produto-download .cab-produto .meta { color: var(--texto-fraco); font-size: .82rem; margin-top: 3px; }
.arquivo-download {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid var(--borda); border-radius: var(--r-md); background: var(--superficie-alta);
}
.arquivo-download.principal { border-color: color-mix(in srgb, var(--acento) 55%, var(--borda)); }
.arquivo-download .info { flex: 1; min-width: 0; }
.arquivo-download .nome { font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-download .meta { color: var(--texto-fraco); font-size: .76rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.arquivo-download a.botao { display: inline-block; min-width: 96px; }
a.botao.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
a.botao.primario:hover { filter: brightness(1.08); }
button.mini { padding: 1px 6px; font-size: .72rem; }
.anteriores summary { cursor: pointer; color: var(--texto-fraco); font-size: .82rem; margin-top: 4px; }
.anteriores .versao-anterior { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.anteriores .versao-anterior .rot { font-size: .78rem; font-weight: 700; color: var(--texto-fraco); }
.config-downloads { padding: 16px 18px; margin-bottom: 14px; }
.config-downloads h3 { margin: 0 0 4px; font-size: .95rem; }
.config-downloads .explica { color: var(--texto-fraco); font-size: .84rem; margin: 0 0 12px; }

/* ── Dashboard principal ───────────────────────────────────────────────────
 * Usa apenas os dados já presentes em /api/painel. Toda interação abaixo é
 * navegação ou filtro local; nenhuma regra operacional nasce nesta camada. */
.dashboard { max-width: 1440px; margin: 0 auto; }
.dash-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin: 2px 0 22px;
}
.dash-cabecalho h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.045em; line-height: 1.1; }
.dash-cabecalho p { color: var(--texto-fraco); margin: 7px 0 0; font-size: .88rem; }
.dash-eyebrow, .dash-kicker {
  display: block; color: var(--acento); font-size: .64rem; font-weight: 800;
  letter-spacing: .14em; margin-bottom: 7px;
}
.dash-filtros {
  display: inline-flex; padding: 3px; border: 1px solid var(--borda);
  border-radius: 999px; background: var(--superficie);
}
.dash-filtros button {
  border: 0; background: transparent; color: var(--texto-fraco); border-radius: 999px;
  padding: 6px 14px; font-size: .76rem;
}
.dash-filtros button:hover { color: var(--texto); }
.dash-filtros button.ativo { background: var(--superficie-alta); color: var(--texto); box-shadow: 0 0 0 1px var(--borda); }

.dash-metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dash-metrica {
  display: flex; flex-direction: column; align-items: stretch; text-align: left; min-height: 174px;
  padding: 18px; border-radius: var(--r-lg); background: var(--superficie); border: 1px solid var(--borda);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.dash-metrica:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--texto-fraco) 65%, var(--borda)); }
.dash-metrica.principal { border-top-color: var(--acento); }
.dash-metrica.atencao { border-top-color: var(--erro); }
.dash-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-ico {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--superficie-alta); border: 1px solid var(--borda);
  color: var(--texto-fraco); font-size: 14px; flex: none;
}
.dash-metrica.principal .dash-ico { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 40%, var(--borda)); }
.dash-metrica .rotulo { color: var(--texto-fraco); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.dash-metrica .valor { font-size: 2.25rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; margin: 18px 0 15px; }
.dash-metrica .valor small { color: var(--texto-fraco); font-size: .92rem; font-weight: 600; letter-spacing: -.02em; margin-left: 3px; }
.dash-metrica .valor.textual { font-size: 1.42rem; letter-spacing: -.035em; margin-top: 21px; }
.dash-metrica .legenda { color: var(--texto-fraco); font-size: .68rem; margin-top: auto; padding-top: 12px; }
.dash-barra { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 5px; }
.dash-barra i { display: block; border-radius: 2px; background: var(--borda); }
.dash-barra i.preenchido { background: var(--ok); }
.dash-licenca { display: flex; align-items: center; gap: 7px; color: var(--texto-fraco); font-size: .76rem; }
.dash-licenca i, .dash-saude-linha i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--erro); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--erro) 12%, transparent);
}
.dash-licenca i.on, .dash-saude-linha i.on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 12%, transparent); }
.dash-saude-linha i.aviso { background: var(--alerta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--alerta) 12%, transparent); }

.dash-grade { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 12px; align-items: start; }
.dash-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 18px; }
.dash-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.dash-card h3 { font-size: .98rem; }
.dash-card > header a { color: var(--texto-fraco); font-size: .72rem; font-weight: 700; }
.dash-card > header a:hover { color: var(--texto); text-decoration: none; }
.dash-coluna { display: flex; flex-direction: column; gap: 12px; }
.dash-coluna .dash-card { flex: 1; }
.dash-lista-maquinas { display: flex; flex-direction: column; }
.dash-maquina {
  display: grid; grid-template-columns: auto minmax(150px, 1fr) 58px 58px auto; align-items: center; gap: 12px;
  width: 100%; padding: 13px 8px; border: 0; border-top: 1px solid var(--borda);
  border-radius: 0; background: transparent; text-align: left;
}
.dash-maquina:first-child { border-top: 0; }
.dash-maquina:hover { background: var(--superficie-alta); }
.dash-status { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-fraco); }
.dash-status.on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 10%, transparent); }
.dash-maquina-info { min-width: 0; }
.dash-maquina-info strong, .dash-maquina-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-maquina-info strong { font-size: .84rem; }
.dash-maquina-info small { color: var(--texto-fraco); font-size: .7rem; margin-top: 2px; }
.dash-maquina-numeros { text-align: right; }
.dash-maquina-numeros strong, .dash-maquina-numeros small { display: block; }
.dash-maquina-numeros strong { font-size: .82rem; }
.dash-maquina-numeros small { color: var(--texto-fraco); font-size: .62rem; }
.dash-seta { color: var(--texto-fraco); }
.dash-vazio { color: var(--texto-fraco); padding: 28px 8px; text-align: center; font-size: .82rem; }
.dash-saude-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--borda); font-size: .77rem; }
.dash-saude-linha > span { display: flex; align-items: center; gap: 10px; color: var(--texto-fraco); }
.dash-saude-linha strong { font-size: .73rem; }
.dash-acoes h3 { margin-bottom: 11px; }
.dash-acoes > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--borda); color: var(--texto-fraco); font-size: .76rem; }
.dash-acoes > a:hover { color: var(--texto); text-decoration: none; }
.dash-acoes > a b { color: var(--acento); font-size: .9rem; }

@media (max-width: 1120px) {
  .dash-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grade { grid-template-columns: 1fr; }
  .dash-coluna { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .dash-cabecalho { align-items: flex-start; flex-direction: column; }
  .dash-metricas, .dash-coluna { grid-template-columns: 1fr; }
  .dash-metrica { min-height: 155px; }
  .dash-maquina { grid-template-columns: auto minmax(120px, 1fr) 48px auto; }
  .dash-maquina-numeros:nth-of-type(2) { display: none; }
}

/* ── marca do cliente (licença) ─────────────────────────────────────────────
 * As cores da marca chegam por /marca.css (--cobre, --cobre-claro e o hover da
 * ação principal); aqui só o que a tela desenha com elas. */

/* Crédito discreto ao MCP Manager, no rodapé do menu, só com marca de cliente. */
.credito-marca {
  padding: 8px 12px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--texto-fraco); opacity: .75;
}

/* Tela Licença: a marca recebida, só leitura. A amostra lê a variável da folha
 * da marca — nada de style="" (CSP). */
.cartao-marca .val { display: flex; align-items: center; gap: 8px; word-break: normal; }
.amostra-cor-marca {
  display: inline-block; width: 18px; height: 18px; border-radius: 5px; flex: none;
  background: var(--cobre); box-shadow: 0 0 0 1px var(--borda);
}
.logo-marca {
  width: 44px; height: 44px; border-radius: 9px; object-fit: contain;
  box-shadow: 0 0 0 1px var(--borda); background: var(--superficie-alta);
}
/* Logo PNG do cliente: pode vir retangular ou com fundo transparente — cabe
 * inteiro no quadrado, sem distorcer. */
img[data-marca-logo] { object-fit: contain; }