/* Estilos compartilhados entre index.html (gravador) e ajuda.html (FAQ) */

:root {
  --bg: #0a0a1a;
  --card: #121228;
  --border: #24243f;
  --primary: #00f0ff;
  --text: #e8e8f0;
  --muted: #8a8aa0;
  --warn: #ffb020;
  --danger: #ff4060;
  --ok: #20d97f;
}

* { box-sizing: border-box; }

/* Sem isto o link herda o azul padrao do navegador (#0000EE), que sobre o fundo
   escuro fica quase invisivel. .atalhos a e .nav a sao mais especificos e
   continuam com a cor deles. */
a { color: var(--primary); }
a:hover { text-decoration: none; }

body {
  margin: 0;
  padding: 24px 16px 48px;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.wrap { max-width: 680px; margin: 0 auto; }

header { text-align: center; margin-bottom: 32px; }
h1 { font-size: 1.6rem; margin: 0 0 4px; letter-spacing: 1px; }
.sub { color: var(--muted); font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 18px;
}

h2 {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 14px;
}

ol, ul { margin: 0; padding-left: 22px; }
li { margin-bottom: 8px; }

code {
  background: #1c1c34;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--primary);
  word-break: break-word;
}

pre {
  background: #1c1c34;
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.8rem;
  margin: 10px 0;
}
pre code { background: none; padding: 0; }

/* ===== Botões ===== */
.install-area { text-align: center; padding: 28px 22px; }

.btn {
  background: linear-gradient(135deg, #00f0ff, #0080ff);
  color: #06121f;
  border: none;
  border-radius: 10px;
  padding: 16px 34px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
/* Enquanto a porta esta ocupada TODOS os botoes que a disputam ficam
   desabilitados - inclusive o de gravar, que abriria a mesma porta. */
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }

/* ===== Avisos ===== */
.notice {
  border-left: 3px solid var(--warn);
  background: rgba(255, 176, 32, 0.07);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
}
.notice.bad { border-left-color: var(--danger); background: rgba(255, 64, 96, 0.07); }
.notice.good { border-left-color: var(--ok); background: rgba(32, 217, 127, 0.07); }
.notice strong { color: var(--warn); }
.notice.bad strong { color: var(--danger); }
.notice.good strong { color: var(--ok); }

/* ===== Tabelas ===== */
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
td { padding: 6px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
td:first-child { color: var(--muted); padding-right: 14px; }
td:last-child { text-align: right; font-family: monospace; color: var(--primary); }

/* ===== FAQ (details/summary) ===== */
details {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
details:last-of-type { border-bottom: none; }

summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: '+';
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}
details[open] summary::before { content: '\2212'; }
summary:hover { color: var(--primary); }

/* Contador de campos preenchidos no titulo de um bloco recolhivel.
   Existe porque os campos nao sao mais apagados entre um robo e o outro: sem
   ele, uma credencial que sobrou do robo anterior fica invisivel dentro do
   bloco fechado e vai para o proximo sem ninguem ver. */
.conta {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.conta[hidden] { display: none; }

.answer { padding: 0 0 14px 22px; font-size: 0.92rem; color: #d0d0dc; }
.answer p { margin: 0 0 10px; }
.answer p:last-child { margin-bottom: 0; }

/* ===== Passos grandes (parte para professores) ===== */
.passos { counter-reset: passo; padding-left: 0; list-style: none; }
.passos > li {
  counter-increment: passo;
  position: relative;
  padding-left: 44px;
  margin-bottom: 16px;
  font-size: 1rem;
}
.passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #06121f;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* Primeira linha do passo: funciona como titulo, para quem so bate o olho */
.passos strong.t {
  display: block;
  font-size: 1.02rem;
  color: var(--text);
  margin-bottom: 2px;
}
.passos .tag {
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--warn);
  white-space: nowrap;
}

/* Barra de atalhos para as secoes */
.atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}
.atalhos a {
  font-size: 0.8rem;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--primary);
  text-decoration: none;
}
.atalhos a:hover { border-color: var(--primary); }

.aviso-so {
  text-align: center;
  font-size: 0.83rem;
  color: var(--muted);
  margin: -10px 0 26px;
}
.aviso-so strong { color: var(--text); }

/* ===== Identificacao do sistema operacional =====
   A faixa vem ANTES do titulo, alinhada a esquerda, no caminho natural da
   leitura. Fica impossivel comecar a seguir os passos sem ver de qual sistema
   sao. Cada sistema tem sua cor, repetida na borda do card e no atalho do topo,
   para dar para perceber a troca de secao so rolando a pagina. */
:root {
  --so-win: #4da3ff;
  --so-linux: #ffb020;
  --so-mac: #b9b9cc;
}

.so-faixa {
  display: inline-block;
  padding: 5px 16px;
  margin-bottom: 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #06121f;
}

.card.so-windows { border-left: 4px solid var(--so-win); }
.card.so-linux   { border-left: 4px solid var(--so-linux); }
.card.so-mac     { border-left: 4px solid var(--so-mac); }

.so-windows .so-faixa { background: var(--so-win); }
.so-linux   .so-faixa { background: var(--so-linux); }
.so-mac     .so-faixa { background: var(--so-mac); }

.so-windows h2 { color: var(--so-win); }
.so-linux   h2 { color: var(--so-linux); }
.so-mac     h2 { color: var(--so-mac); }

/* Atalhos do topo com a mesma cor do sistema */
.atalhos a.a-windows { color: var(--so-win); border-color: rgba(77, 163, 255, 0.4); }
.atalhos a.a-linux   { color: var(--so-linux); border-color: rgba(255, 176, 32, 0.4); }
.atalhos a.a-mac     { color: var(--so-mac); border-color: rgba(185, 185, 204, 0.4); }
.atalhos a.a-windows:hover { border-color: var(--so-win); }
.atalhos a.a-linux:hover   { border-color: var(--so-linux); }
.atalhos a.a-mac:hover     { border-color: var(--so-mac); }

/* ===== Separador entre a parte simples e a tecnica ===== */
.divisor {
  margin: 44px 0 22px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.divisor h2 {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 6px;
}
.divisor p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* O primeiro divisor nao separa assuntos: ele abre a pagina e anuncia o que ela
   ensina. Com o peso dos outros divisores, que sao so marcos de secao, o titulo
   do tutorial some entre o cabecalho e os atalhos - foi o que aconteceu. */
.divisor.principal {
  margin: 10px 0 26px;
  padding-top: 0;
  border-top: 0;
}
.divisor.principal h2 {
  font-size: 1.25rem;
  letter-spacing: 3px;
  color: var(--text);
  margin: 0 0 12px;
}
.divisor.principal h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--primary);
  border-radius: 2px;
}
.divisor.principal p { font-size: 0.9rem; }

/* Cards da parte tecnica ficam visualmente mais discretos */
.tecnico { border-style: dashed; }
.tecnico h2 { color: var(--muted); }

/* ===== Passos 1 e 2 do fluxo de gravacao ===== */
.passo-tag {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 12px;
  border-radius: 20px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
}

/* Caixa dos blocos que ficam retraidos: roteador, PJE e motores. Nenhum dos
   tres e usado em toda gravacao, entao os tres tem de parecer a mesma coisa -
   um deles solto, sem a caixa, le-se como titulo de secao e nao como bloco
   que abre. A classe se chamava .bloco-pje e ja valia para o roteador. */
.bloco-opcional {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 14px;
  margin-bottom: 18px;
}
.bloco-opcional summary { font-size: 0.9rem; }

.auto-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  font-size: 0.9rem;
}
.auto-linha input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Acao secundaria: reconfigurar sem regravar */
.btn-secundario {
  width: 100%;
  background: none;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 0.85rem;
  padding: 12px 20px;
}
.btn-secundario:hover { background: rgba(0, 240, 255, 0.1); filter: none; }
.btn-secundario:disabled { opacity: 0.5; cursor: default; }

/* ===== Acoes dentro do campo =====
   Cada campo carrega os proprios botoes, encostados na borda direita:
   - revelar a senha, porque campo mascarado esconde erro de digitacao, e uma
     senha errada gravada no robo tranca a equipe para fora achando que sabe;
   - limpar so aquele campo, sem tocar nos vizinhos.
   Os botoes ficam num grupo flex, entao acrescentar um terceiro no futuro nao
   exige recalcular posicao de ninguem. */
.input-acoes { position: relative; }
.input-acoes .acoes {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}
/* O padding abre espaco para o texto nao passar por baixo dos botoes. Um valor
   por quantidade de botoes, porque input nao encolhe sozinho. */
.input-acoes input,
.input-acoes select { padding-right: 44px; }
.input-acoes.com-olho input { padding-right: 76px; }
/* O select desenha a propria seta no canto direito. Sem afastar, o "x" de
   limpar encosta nela e os dois viram um borrao de dois simbolos. */
.input-acoes.com-select .acoes { right: 26px; }
.input-acoes.com-select select { padding-right: 64px; }

.btn-olho,
.btn-limpar-campo {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1;
}
.btn-olho:hover { color: var(--primary); }
/* Limpar e destrutivo: sinaliza em vermelho, nao em ciano de acao neutra */
.btn-limpar-campo { font-size: 0.95rem; }
.btn-limpar-campo:hover { color: var(--danger); }
/* Sem valor digitado nao ha o que limpar; some para nao virar ruido em sete
   campos ao mesmo tempo */
.btn-limpar-campo[hidden] { display: none; }

.linha-botoes { display: flex; gap: 10px; }
.linha-botoes .btn-secundario { flex: 1; }
.linha-botoes .btn-secundario[hidden] { display: none; }

/* Sair de uma operacao travada sem recarregar a pagina - recarregar levava o
   formulario junto. Aparece so enquanto ha o que cancelar. */
#btn-cancelar { border-color: var(--danger); color: var(--danger); }
#btn-cancelar:hover { background: rgba(255, 64, 96, 0.1); }

/* Escape para quando a escolha automatica de porta errar (comum no Linux,
   onde o navegador lista todas as /dev/ttyS* do chipset) */
.link-discreto {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-discreto:hover { color: var(--primary); }

/* Quadro do que foi lido de volta do robo */
.leitura {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.05);
}
.leitura-titulo {
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.leitura td:last-child { font-size: 0.95rem; }

/* ===== Formulario (senha e nome da rede) ===== */
.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.campo input {
  width: 100%;
  padding: 12px 14px;
  background: #1c1c34;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
.campo select {
  width: 100%;
  padding: 12px 14px;
  background: #1c1c34;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}
.campo input:focus,
.campo select:focus { outline: none; border-color: var(--primary); }
.campo .dica { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }

.resultado {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  display: none;
}
.resultado.mostrando { display: block; }
.resultado.ok { background: rgba(32, 217, 127, 0.1); border-left: 3px solid var(--ok); }
.resultado.erro { background: rgba(255, 64, 96, 0.1); border-left: 3px solid var(--danger); }
.resultado.andamento { background: rgba(0, 240, 255, 0.08); border-left: 3px solid var(--primary); }

/* ===== Link de download ===== */
a.dl {
  display: inline-block;
  margin: 8px 0 4px;
  padding: 9px 16px;
  background: rgba(0, 240, 255, 0.09);
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
a.dl:hover { background: rgba(0, 240, 255, 0.18); }
a.dl::after { content: ' \2197'; }

.hint {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ===== Navegação ===== */
.nav { text-align: center; margin: 24px 0 8px; }
.nav a {
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 20px;
  display: inline-block;
  font-size: 0.9rem;
}
.nav a:hover { border-color: var(--primary); }

footer { text-align: center; color: var(--muted); font-size: 0.75rem; margin-top: 32px; }

/* Link para baixar o guia. Fica escondido no proprio PDF: uma folha impressa
   oferecendo o download de si mesma nao ajuda ninguem. */
.baixar-pdf {
  text-align: center;
  margin: -12px 0 26px;
  font-size: 0.85rem;
}
.baixar-pdf a { color: var(--primary); }
.baixar-pdf span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ===== Impressao e PDF =====
   A pagina e escura na tela, e isso nao serve no papel: fundo preto gasta toner
   e o texto claro some numa impressora comum. Aqui as MESMAS variaveis sao
   redefinidas para um tema claro, entao a versao impressa continua saindo do
   mesmo HTML. Nao existe uma segunda copia do tutorial para envelhecer sozinha
   -- foi a razao de nao gerar o PDF a partir de um documento proprio.

   O PDF distribuido nasce daqui, por ./gerar-pdf.sh.

   Nada depende de impressao colorida: numeros de passo viram circulo com
   contorno, faixas de sistema viram etiqueta com borda, e as tarjas de aviso
   se identificam pela barra lateral. Em impressora monocromatica sai tudo
   legivel, sem precisar do "imprimir cores de fundo" do navegador. */
@media print {
  :root {
    --bg: #ffffff;
    --card: #ffffff;
    --border: #b8b8c6;
    --primary: #0a6d78;
    --text: #14141c;
    --muted: #4e4e63;
    --warn: #8a5a00;
    --danger: #a8102c;
    --ok: #0d6b3f;
    --so-win: #2a5fa8;
    --so-linux: #8a5a00;
    --so-mac: #4e4e63;
  }

  @page { margin: 14mm 12mm; }

  body { background: #fff; font-size: 10.5pt; }
  .wrap { max-width: none; padding: 0; }

  /* Navegar nao existe no papel */
  .atalhos, .nav, .baixar-pdf { display: none; }

  /* A parte tecnica fica de fora: isto e o guia de bancada, nao a referencia */
  .divisor#tecnico, .card.tecnico { display: none; }

  /* As perguntas saem abertas -- no papel nao ha o que clicar */
  details > .answer { display: block !important; }
  summary { padding-bottom: 2px; }
  summary::before { content: '\2022'; }

  /* Circulo do passo sem preenchimento: nao depende de cor de fundo */
  .passos > li::before {
    background: none;
    color: var(--text);
    border: 1.2pt solid var(--muted);
  }
  .so-faixa {
    color: var(--text);
    border: 1pt solid var(--border);
  }

  .card {
    border-radius: 0;
    padding: 12px 0;
    margin-bottom: 10px;
    border: 0;
    border-top: 1pt solid var(--border);
  }

  /* Cada parte comeca em pagina nova; a primeira e a capa e nao quebra antes */
  .divisor { break-before: page; page-break-before: always; padding-top: 0; border-top: 0; }
  .divisor.principal { break-before: auto; page-break-before: auto; }

  /* O card NAO entra aqui: um card alto que nao cabe no resto da folha seria
     empurrado inteiro para a proxima, deixando meia pagina em branco. Ele pode
     partir; o que nao pode partir e um passo, uma pergunta ou um aviso. */
  .passos > li, details, .notice { break-inside: avoid; page-break-inside: avoid; }
  h2 { break-after: avoid; page-break-after: avoid; }

  /* Endereco escrito por extenso: um link azul no papel nao leva a lugar nenhum */
  a { color: var(--text); text-decoration: underline; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.72em;
    color: var(--muted);
    word-break: break-all;
  }
  a[href^="#"] { text-decoration: none; }
}