/* ============================================================
   AcesseV2 — roteiro de instalacao acompanhado
   Azul 2026 (#1e78d2 / #155a9e), a mesma cor que o ConfigSis
   desenha na borda da janela. A pagina e o instalador precisam
   parecer o mesmo produto: e isso que da confianca no handoff.
   ============================================================ */

:root{
  color-scheme: light dark;
  --fundo:#f4f6f9;
  --superficie:#ffffff;
  --superficie-2:#eef2f7;
  --linha:#dde3ec;
  --linha-forte:#8a94a3;
  --tinta:#14202e;
  --tinta-2:#55626e;
  --futura:#5e6c7c;
  --marca:#1e78d2;
  --marca-forte:#155a9e;
  --marca-suave:rgba(30,120,210,.09);
  --marca-borda:rgba(30,120,210,.28);
  --ok:#146c2e;
  --ok-fill:#1a7f37;
  --ok-suave:rgba(26,127,55,.09);
  --erro:#b3261e;
  --erro-suave:rgba(179,38,30,.07);
  --aviso:#8a5a00;
  --aviso-suave:rgba(138,90,0,.09);
  --r-card:16px;
  --r-ctrl:9px;
  --fonte:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono","Roboto Mono",monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --fundo:#0f151c; --superficie:#161d26; --superficie-2:#1d2632;
    --linha:#2a3340; --linha-forte:#55636f;
    --tinta:#e8eef6; --tinta-2:#9aa6b4; --futura:#8fa0b0;
    --marca:#6db3f5; --marca-forte:#8cc4f8;
    --marca-suave:rgba(109,179,245,.13); --marca-borda:rgba(109,179,245,.34);
    --ok:#6fd18a; --ok-fill:#2f8f4d; --ok-suave:rgba(111,209,138,.13);
    --erro:#ffb4ab; --erro-suave:rgba(255,180,171,.11);
    --aviso:#ffd08a; --aviso-suave:rgba(255,208,138,.11);
  }
}

/* white-label: Parc_indice = 2 -> Sistema VETTA.
   ATENCAO: este teal e um PLACEHOLDER. Trocar pela cor real da marca. */
body[data-marca="vetta"]{
  --marca:#0f8a7e; --marca-forte:#0b6b61;
  --marca-suave:rgba(15,138,126,.09); --marca-borda:rgba(15,138,126,.30);
}
@media (prefers-color-scheme: dark){
  body[data-marca="vetta"]{
    --marca:#4fd1c0; --marca-forte:#7de0d2;
    --marca-suave:rgba(79,209,192,.13); --marca-borda:rgba(79,209,192,.34);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh;
  font-family:var(--fonte); font-size:16px; line-height:1.6;
  color:var(--tinta); background:var(--fundo);
  display:flex; flex-direction:column;
}
h1,h2,h3{margin:0;line-height:1.28;font-weight:600;letter-spacing:-.01em}
p{margin:0}
a{color:var(--marca-forte)}
:focus-visible{outline:3px solid var(--marca);outline-offset:2px;border-radius:4px}

.oculto{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pular{
  position:absolute;left:12px;top:-60px;z-index:60;
  background:var(--superficie);color:var(--marca-forte);
  padding:10px 16px;border-radius:8px;border:1px solid var(--linha);
  text-decoration:none;font-weight:600;transition:top .15s;
}
.pular:focus{top:12px}

/* ---------- barra ---------- */
.barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 24px;height:60px;background:var(--superficie);border-bottom:1px solid var(--linha);
}
.barra-marca{display:flex;align-items:center;gap:10px;min-width:0;font-weight:600;font-size:14.5px}
.logo rect{fill:var(--marca)}
.barra-suporte{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;
  border-radius:var(--r-ctrl);border:1px solid var(--linha);
  color:var(--tinta);font-size:13.5px;font-weight:500;text-decoration:none;
}
.barra-suporte:hover{border-color:var(--marca);color:var(--marca-forte)}

/* ---------- estrutura ---------- */
.pagina{
  flex:1;width:100%;max-width:1060px;margin:0 auto;padding:32px 24px 56px;
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:38px;align-items:start;
}

/* ---------- stepper: passado, presente e futuro sempre visiveis ---------- */
.stepper{position:sticky;top:26px}
.stepper-titulo{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--tinta-2);margin-bottom:16px;
}
.etapas{list-style:none;margin:0;padding:0}
.etapa{position:relative;padding:0 0 22px 42px}
.etapa::before{content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:var(--linha)}
.etapa:last-child::before{display:none}
.etapa[data-estado="ok"]::before{background:var(--ok-fill)}

/* Os quatro estados NAO se distinguem so por cor: cada um tem forma propria
   (numero, numero preenchido com anel, check, exclamacao) e texto oculto para
   leitor de tela. Um usuario com deuteranopia distingue verde de azul com
   dificuldade — a forma resolve. */
.ponto{
  position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;
  border:2px solid var(--linha-forte);color:var(--futura);background:var(--superficie);
}
.ponto svg{width:16px;height:16px}
.etapa[data-estado="atual"] .ponto{
  background:var(--marca-forte);border-color:var(--marca-forte);color:#fff;
  box-shadow:0 0 0 4px var(--marca-suave);
}
.etapa[data-estado="ok"] .ponto{background:var(--ok-fill);border-color:var(--ok-fill);color:#fff}
.etapa[data-estado="bloqueada"] .ponto{background:var(--superficie);border-color:var(--aviso);color:var(--aviso)}

.etapa .rot{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-2);font-weight:600}
.etapa .nome{display:block;font-size:14.5px;font-weight:600;color:var(--futura);margin-top:1px;line-height:1.35}
.etapa[data-estado="atual"] .nome,
.etapa[data-estado="ok"] .nome{color:var(--tinta)}
.etapa .legenda{display:block;font-size:12.5px;color:var(--tinta-2);margin-top:3px;line-height:1.4;word-break:break-word}

.ajuda-lateral{
  margin-top:6px;padding-top:18px;border-top:1px solid var(--linha);
  font-size:13.5px;color:var(--tinta-2);
}
.ajuda-lateral a{display:inline-block;margin-top:8px;font-weight:600}

/* ---------- painel da etapa ---------- */
.painel{
  background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-card);
  padding:30px 32px;box-shadow:0 1px 2px rgba(16,32,56,.05), 0 14px 30px -14px rgba(16,32,56,.16);
  min-height:400px;
}
.painel-rot{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--marca-forte);font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:7px;
}
.titulo{font-size:26px;margin-bottom:9px}
.apoio{color:var(--tinta-2);font-size:15px;margin-bottom:24px;max-width:56ch}

/* ---------- formulario ---------- */
.campo-bloco{margin-bottom:16px;max-width:340px}
.rot-campo{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
/* Sem text-transform: uppercase. A base tem codigos em minuscula e o servidor
   NAO muda a caixa (ver CodigoCliente.Normalizar). Mostrar o campo em caixa alta
   enquanto o valor enviado e outro engana o usuario justamente no caso em que a
   caixa importa. */
input[type=text]{
  width:100%;padding:12px 14px;font-size:17px;font-family:inherit;
  letter-spacing:.05em;
  color:var(--tinta);background:var(--superficie);
  border:1.5px solid var(--linha-forte);border-radius:var(--r-ctrl);
}
input[type=text]::placeholder{letter-spacing:normal;color:var(--tinta-2);opacity:.75}
input[type=text]:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave)}
input[type=text][aria-invalid="true"]{border-color:var(--erro)}
.dica{font-size:13px;color:var(--tinta-2);margin-top:7px;line-height:1.5;max-width:56ch}
.dica-centro{margin-top:16px}

/* ---------- botoes ---------- */
.acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--linha)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;font-family:inherit;font-size:15.5px;font-weight:600;
  border-radius:var(--r-ctrl);border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn-primario{background:var(--marca-forte);color:#fff}
.btn-primario:hover{background:var(--marca);color:#fff}
.btn-secundario{background:transparent;color:var(--tinta);border-color:var(--linha-forte)}
.btn-secundario:hover{border-color:var(--marca);color:var(--marca-forte)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- checagens da etapa 2 ---------- */
.checagens{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:60ch}
.checagem{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border:1px solid var(--linha);border-radius:11px;background:var(--superficie-2);
}
.checagem .marca-ok{width:21px;height:21px;flex:none;margin-top:1px;color:var(--ok)}
.checagem .txt{font-size:14.5px}
.checagem .sub{display:block;font-size:13px;color:var(--tinta-2);margin-top:3px;line-height:1.5}
.checagem input[type=checkbox]{width:21px;height:21px;flex:none;margin:1px 0 0;accent-color:var(--marca-forte);cursor:pointer}
.checagem label{cursor:pointer}
.checagem strong{font-weight:600}

/* ---------- avisos ---------- */
.aviso{display:flex;gap:11px;padding:14px 16px;border-radius:11px;font-size:14px;line-height:1.55;margin-bottom:18px;max-width:62ch}
.aviso svg{width:19px;height:19px;flex:none;margin-top:2px}
.aviso-erro{background:var(--erro-suave);border:1px solid var(--erro)}
.aviso-atencao{background:var(--aviso-suave);border:1px solid var(--aviso)}
.aviso-ok{background:var(--ok-suave);border:1px solid var(--ok-fill)}
.aviso-info{background:var(--marca-suave);border:1px solid var(--marca-borda)}
.ico-erro{color:var(--erro)}
.ico-atencao{color:var(--aviso)}
.ico-ok{color:var(--ok)}
.ico-info{color:var(--marca-forte)}

/* ---------- ficha do arquivo ---------- */
.ficha{
  background:var(--superficie-2);border:1px solid var(--linha);border-radius:11px;
  padding:16px 18px;margin-bottom:18px;max-width:62ch;
}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0;font-size:14px}
.ficha dt{color:var(--tinta-2)}
.ficha dd{margin:0;font-weight:600;word-break:break-word}
.ficha .notas{margin-top:10px;font-size:13px;color:var(--tinta-2)}
.hash-rot{margin-top:14px;font-size:12.5px;color:var(--tinta-2)}
.hash{
  font-family:var(--mono);font-size:11.5px;word-break:break-all;line-height:1.5;
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:6px;padding:9px 10px;margin-top:6px;color:var(--tinta-2);
}
.btn-copiar{
  margin-top:9px;font-size:12.5px;font-family:inherit;font-weight:600;
  color:var(--marca-forte);background:transparent;border:1px solid var(--linha-forte);
  border-radius:7px;padding:8px 12px;cursor:pointer;min-height:38px;
}
.btn-copiar:hover{border-color:var(--marca);background:var(--marca-suave)}
.integridade{margin-top:12px}

/* ---------- passos da etapa 4 ---------- */
.passos{counter-reset:passo;list-style:none;margin:0;padding:0;display:grid;gap:16px}
.passos > li{display:flex;gap:14px;align-items:flex-start;max-width:64ch}
.passos > li::before{
  counter-increment:passo;content:counter(passo);
  width:28px;height:28px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:13.5px;font-weight:700;
  background:var(--marca-suave);border:1px solid var(--marca-borda);color:var(--marca-forte);
}
.passo-txt{font-size:14.5px;line-height:1.6}

details{margin-top:8px}
details summary{
  cursor:pointer;font-size:13px;color:var(--marca-forte);font-weight:600;
  list-style:none;display:inline-flex;align-items:center;gap:7px;padding:6px 0;
}
details summary::-webkit-details-marker{display:none}
details summary::before{
  content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s;
}
details[open] summary::before{transform:rotate(45deg)}
.det-corpo{
  font-size:13.5px;color:var(--tinta-2);line-height:1.6;
  padding:11px 14px;margin-top:4px;
  background:var(--superficie-2);border:1px solid var(--linha);border-radius:9px;
}
.det-corpo strong{color:var(--tinta)}
.det-corpo p{margin-bottom:8px}

code{
  font-family:var(--mono);font-size:12.5px;
  background:var(--superficie-2);border:1px solid var(--linha);
  padding:1.5px 5px;border-radius:5px;
}

/* codigo copiavel no meio da frase */
.cod-inline{
  display:inline-flex;align-items:center;gap:8px;vertical-align:middle;
  background:var(--superficie-2);border:1px solid var(--marca-borda);
  border-radius:7px;padding:3px 4px 3px 10px;font-family:var(--mono);
  font-size:13px;font-weight:700;color:var(--tinta);
}
.btn-copiar-inline{
  font-family:var(--fonte);font-size:11.5px;font-weight:600;color:var(--marca-forte);
  background:var(--superficie);border:1px solid var(--linha);border-radius:5px;
  padding:5px 9px;cursor:pointer;min-height:30px;
}
.btn-copiar-inline:hover{border-color:var(--marca);background:var(--marca-suave)}

/* ---------- pergunta final ---------- */
.pergunta{
  margin-top:26px;padding:20px;border-radius:12px;
  background:var(--marca-suave);border:1px solid var(--marca-borda);max-width:62ch;
}
.pergunta p{font-size:15.5px;font-weight:600;margin-bottom:14px}
.pergunta .par{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- conclusao ---------- */
.saidas{display:grid;gap:9px;margin-top:20px;max-width:44ch}
.saida{
  display:flex;gap:12px;align-items:center;text-align:left;
  padding:14px 16px;background:var(--superficie);
  border:1.5px solid var(--linha-forte);border-radius:11px;
  font-size:14.5px;font-weight:600;color:var(--tinta);text-decoration:none;
}
.saida:hover{border-color:var(--marca);background:var(--marca-suave)}
.saida svg{width:19px;height:19px;flex:none;color:var(--marca-forte)}

/* ---------- contatos / texto corrido ---------- */
.contatos{list-style:none;padding:0;margin:0;display:grid;gap:11px;max-width:52ch}
.contatos li{display:flex;gap:12px;align-items:center;font-size:15px}
.contatos svg{width:19px;height:19px;flex:none;color:var(--marca-forte)}

.texto{max-width:66ch}
.texto h2{font-size:16px;margin:22px 0 7px}
.texto h2:first-child{margin-top:0}
.texto p{font-size:14.5px;color:var(--tinta-2);line-height:1.65}

.rodape{
  border-top:1px solid var(--linha);padding:20px 24px 28px;
  text-align:center;font-size:12.5px;color:var(--tinta-2);
  display:flex;gap:10px;justify-content:center;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- responsivo: o stepper vira faixa horizontal ---------- */
@media (max-width:880px){
  .pagina{grid-template-columns:minmax(0,1fr);gap:20px;padding:20px 16px 44px}
  .stepper{position:static}
  .stepper-titulo{display:none}
  .etapas{display:flex;gap:0;overflow-x:auto;padding-bottom:4px}
  .etapa{flex:1;min-width:132px;padding:0 10px 0 0}
  .etapa::before{left:30px;right:10px;top:16px;bottom:auto;width:auto;height:2px}
  .etapa .ponto{position:static;margin-bottom:9px}
  .etapa .rot,.etapa .legenda{display:none}
  .etapa .nome{font-size:13px}
  .ajuda-lateral{display:none}
  .painel{padding:24px 20px;min-height:0;border-radius:14px}
  .titulo{font-size:22px}
  .barra{padding:0 16px}
}