/* instalacao.css — Modal de Instalação & sistemas, incluindo a saúde da chave.
   Parte de painel.css, dividido em 13/09/2026: um arquivo de 3.782 linhas
   não se navega. A ORDEM dos <link> no index.html importa (cascata). */

/* ---------- instalação & sistemas ---------- */
#instalacao {
  position: fixed;
  inset: 0;
  background: rgba(12, 14, 18, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
#instalacao-caixa {
  background: var(--superficie);
  border-radius: var(--r-l);
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 24px 24px;
  box-shadow: var(--sombra-2);
}
#instalacao-caixa > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
#instalacao-caixa h2 { font-size: 17px; font-weight: 700; font-family: var(--fonte-titulo); }
#instalacao-fechar {
  background: var(--fundo);
  border: 0;
  color: var(--texto-2);
  border-radius: var(--r-s);
  width: 30px; height: 30px;
  font-size: 17px;
  line-height: 1;
}
#instalacao-fechar:hover { background: var(--borda); }
.instalacao-intro { font-size: 12.5px; color: var(--texto-2); margin-bottom: 14px; line-height: 1.5; }
#novo-sistema { display: flex; gap: 8px; margin-bottom: 18px; }
#novo-sistema input {
  flex: 1;
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--texto);
  border-radius: var(--r-m);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
#novo-sistema input:focus { border-color: var(--verde-600); background: var(--superficie); }
#novo-sistema button {
  background: var(--verde-600);
  color: #fff;
  border: 0;
  border-radius: var(--r-m);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}
#novo-sistema button:hover { background: var(--verde-700); }
.cartao-org {
  border: 1px solid var(--borda);
  border-radius: var(--r-l);
  padding: 16px;
  margin-bottom: 12px;
}
.org-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.org-topo strong { font-size: 14px; letter-spacing: -.01em; }
.org-topo code {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--r-s);
  padding: 2px 7px;
  font-size: 11.5px;
  color: var(--verde-texto);
}
.org-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.org-campos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-3);
}
.org-campos label.larga, .org-campos .campo.larga { grid-column: span 3; }
.org-campos .campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-3);
}
.org-campos .campo-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.org-campos .campo.desativada textarea { opacity: .45; }
.mini-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  text-transform: none;
  letter-spacing: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-2);
}
.mini-toggle input { display: none; }
.mini-toggle i {
  width: 28px;
  height: 15px;
  border-radius: 999px;
  background: var(--borda);
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.mini-toggle i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: var(--sombra-1);
}
.mini-toggle input:checked + i { background: var(--verde-600); }
.mini-toggle input:checked + i::after { transform: translateX(13px); }
.org-campos label.media { grid-column: span 2; }
.org-campos input, .org-campos textarea, .org-campos select {
  border: 1px solid var(--borda);
  background: var(--fundo);
  border-radius: var(--r-s);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--texto);
  outline: none;
  resize: vertical;
  min-height: 0;
}
.org-campos input:focus, .org-campos textarea:focus { border-color: var(--verde-600); }
.org-campos input[type="color"] { padding: 2px; height: 34px; cursor: pointer; }
.org-acoes { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.org-acoes button {
  background: var(--verde-600);
  color: #fff;
  border: 0;
  border-radius: var(--r-m);
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .15s;
}
.org-acoes button:hover { background: var(--verde-700); }
.org-feedback { font-size: 12px; font-weight: 600; color: var(--verde-texto); }
/* bloco padronizado de instalação: um código só, o seletor troca a chave */
#inst-padrao {
  background: var(--superficie);
  border: 1px solid var(--verde-600);
  border-radius: var(--r-l);
  padding: 14px;
  margin-bottom: 16px;
}
.inst-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.inst-topo label { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
#inst-sistema, #inst-tipo {
  flex: 1;
  min-width: 160px;
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  padding: 7px 10px;
  font-size: 13px;
}
#inst-padrao pre {
  background: #0c0e12; /* bloco de código fica escuro nos dois temas */
  color: #c8e6d4;
  border-radius: var(--r-m);
  padding: 12px 14px;
  font-size: 11.5px;
  line-height: 1.6;
  overflow-x: auto;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
/* os dois formatos de código, um embaixo do outro: quem quer a linha pega a
   linha, quem precisa configurar rola mais um pouco */
.inst-opcao + .inst-opcao { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--borda); }
.inst-opcao-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.inst-opcao-quem { flex: 1; min-width: 200px; }
.inst-opcao-quem strong { display: block; font-size: 13px; }
.inst-opcao-quem small {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: var(--texto-2);
  margin-top: 2px;
}
#inst-formato {
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  padding: 7px 10px;
  font-size: 12.5px;
  flex-shrink: 0;
}
#inst-copiar, #inst-copiar-linha {
  background: var(--verde-600);
  color: #fff;
  border: 0;
  border-radius: var(--r-m);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
#inst-copiar:hover, #inst-copiar-linha:hover { background: var(--verde-500); }

/* ---------- relação de todos os sistemas cadastrados ---------- */
.inst-relacao { margin-bottom: 16px; }
.inst-relacao-topo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}
.inst-relacao-topo strong { font-size: 13px; }
#inst-sistemas-total { font-size: 12px; color: var(--texto-2); }
#inst-sistemas { display: grid; gap: 6px; }
.inst-sistema-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  padding: 9px 11px;
  color: var(--texto);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.inst-sistema-item:hover { border-color: var(--verde-500); }
.inst-sistema-item.ativo { border-color: var(--verde-600); background: var(--verde-tinta); }
.iss-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-3);
  flex-shrink: 0;
}
.iss-ponto.vivo { background: var(--verde-500); }
.iss-nome { font-weight: 600; flex-shrink: 0; }
.inst-sistema-item code {
  color: var(--texto-2);
  font-size: 11.5px;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* a chave é longa e não pode empurrar a contagem para fora do cartão */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.iss-conversas { color: var(--texto-2); font-size: 12px; flex-shrink: 0; }
.inst-vazio { font-size: 12.5px; color: var(--texto-2); }

/* chat ancorado na barra: mora colado ao código de instalação, porque é a
   mesma tarefa (instalar), não uma configuração de sistema */
.inst-barra {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--borda);
}
.inst-barra-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.inst-barra-topo strong { flex: 1; min-width: 180px; font-size: 13px; }
/* o seletor de tipo acompanha o de sistema, mas não disputa a linha com ele:
   "Sistema com login (ERP)" já cabe em 190px */
#inst-tipo { flex: 0 1 auto; min-width: 190px; }
#inst-copiar-marcador, #inst-copiar-identificar {
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--r-m);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
#inst-copiar-marcador:hover, #inst-copiar-identificar:hover { border-color: var(--verde-500); color: var(--verde-500); }
.inst-barra p { font-size: 12.5px; line-height: 1.6; color: var(--texto-2); margin-bottom: 8px; }
.inst-barra-nota { margin-top: 8px; margin-bottom: 0; }
.inst-barra-nota a { color: var(--verde-500); }

/* saúde da chave: diagnóstico de instalação, logo abaixo do código gerado */
.inst-saude {
  margin: 10px 0 2px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  font-size: 13px;
  color: var(--texto-2);
  line-height: 1.6;
}
.inst-saude:empty { display: none; }
.saude-topo { color: var(--texto); margin-bottom: 4px; }
.saude-ok { color: var(--verde-texto); font-weight: 600; }
.saude-mudo { color: var(--texto-3); font-weight: 600; }
.saude-linha { margin-top: 2px; }
.saude-linha code {
  background: var(--sistema-bg);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--texto);
}
/* --texto-3 reprovava nos temas claros (2,36:1 no claro, 2,49 no névoa): a
   dica é o texto que EXPLICA o alerta, precisa ser lido, não decorado */
.saude-dica { color: var(--texto-2); }
/* âmbar e não vermelho: chave recusada quase sempre é instalação com a chave
   trocada, não ataque. Vermelho aqui treinaria a equipe a ignorar vermelho. */
.saude-alerta {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ambar-700);
  background: color-mix(in srgb, var(--ambar-700) 12%, transparent);
}
.saude-alerta strong { color: var(--texto); display: block; margin-bottom: 4px; }

@media (max-width: 640px) { .org-campos { grid-template-columns: 1fr; } .org-campos label.media, .org-campos label.larga { grid-column: span 1; } }