/* A identidade visual das telas do conector.
   Adaptada do design da plataforma (DESIGN/prometheus-app), que e somente
   leitura: as cores e medidas foram lidas de la, os arquivos nao foram
   tocados. */

/* Montserrat baixada e servida por nos (fontes/), subset latino, pesos
   400/600/700/800 — nao mais pelo CDN da Google. A pagina de privacidade
   promete "compartilhamos com ninguem", e o CDN do Google entregava IP e
   User-Agent do advogado antes mesmo do login.

   Os quatro .woff2 vieram de QUATRO requisicoes separadas ao Google Fonts,
   uma por peso (?family=Montserrat:wght@<peso>) — nao de uma unica
   requisicao combinada (wght@400;600;700;800). A combinada devolve a fonte
   VARIAVEL, com a MESMA url para os quatro pesos (arquivo maior, ~38KB
   contra ~19KB de cada estatica) — declarar @font-face assim serviria o
   mesmo arquivo pros quatro font-weight, sem quebrar nada visivelmente
   errado o bastante pra notar (a variavel tambem renderiza), so tipografia
   "quase certa". Se for atualizar o peso/subset, refaça o download peso a
   peso e confira que os quatro arquivos tem tamanho/hash diferentes antes
   de trocar. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/estatico/fontes/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/estatico/fontes/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/estatico/fontes/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/estatico/fontes/montserrat-800.woff2") format("woff2");
}

:root {
  --areia: #EEE9DF;
  --tinta: #1B2632;
  --terracota: #A35139;
  --terracota-escura: #8A4230;
  --ambar: #FFB162;
  --secundario: #6E7783;
  --borda: #E3DCCF;
  --creme: #FFF6EC;
  --campo: #FFFFFF;
  --campo-codigo: #FBFAF6;
  --erro: #B00020;
  --marca: linear-gradient(108deg, #16202B 0%, #1B2632 22%, #2C3B4D 52%, #6B4A4A 82%, #A35139 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.rot {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --- a moldura de duas colunas ------------------------------------------ */
.acesso { display: flex; min-height: 100vh; }

.acesso__marca {
  flex: 0 0 46%; position: relative; overflow: hidden;
  background: var(--marca); color: var(--areia);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 54px 64px;
}
.acesso__estampa {
  position: absolute; inset: 0;
  background-image: url(/estatico/estampa.png); background-size: 300px 300px;
  opacity: 0.5;
}
.acesso__marca > * { position: relative; }

.logo { display: flex; align-items: center; gap: 1px; }
.logo span {
  font-size: 30px; font-weight: 800; letter-spacing: -0.035em; color: var(--areia);
}
.logo img { height: 27px; width: auto; display: block; margin: 0 1px; }
.logo .rot {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em;
  margin-left: 18px; padding-left: 18px; color: #93A2B2;
  border-left: 1px solid rgba(238, 233, 223, 0.22);
}

.manchete {
  margin: 18px 0 0; font-size: 44px; line-height: 1.06; font-weight: 800;
  letter-spacing: -0.04em; text-wrap: balance;
}
.subtexto {
  margin: 24px 0 0; font-size: 16px; line-height: 1.65; color: #B7C2CE;
  max-width: 500px;
}

.fatos { display: flex; flex-direction: column; gap: 18px; }
.fato__titulo {
  font-size: 14.5px; font-weight: 700; color: var(--ambar); display: block;
}
.fato__texto {
  font-size: 12.5px; line-height: 1.45; color: #93A2B2; max-width: 380px;
}

/* --- o formulario ------------------------------------------------------- */
.acesso__form {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 54px 64px; max-width: 560px; margin: 0 auto; width: 100%;
}
h1 {
  margin: 0 0 6px; font-size: 27px; font-weight: 800; letter-spacing: -0.03em;
}
.introducao { margin: 0 0 26px; font-size: 14px; line-height: 1.6; color: var(--secundario); }

label { display: block; margin-top: 16px; font-size: 14px; }
label > .rot { display: block; margin-bottom: 7px; color: var(--secundario); }

input[type=text], input[type=email], input[type=password], input:not([type]) {
  width: 100%; height: 46px; padding: 0 15px; border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--tinta);
  background: var(--campo); border: 1px solid var(--borda);
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  outline: none; border-color: var(--terracota);
  box-shadow: 0 0 0 3px rgba(163, 81, 57, 0.14);
}

.codigo input {
  height: 44px; font-size: 17px; letter-spacing: 0.35em; text-align: center;
  font-variant-numeric: tabular-nums; background: var(--campo-codigo);
}

button, .botao {
  width: 100%; height: 48px; margin-top: 22px; border: 0; border-radius: 10px;
  background: var(--terracota); color: var(--creme); cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  transition: background .18s;
}
button:hover { background: var(--terracota-escura); }
button.secundario {
  background: transparent; color: var(--secundario);
  border: 1px solid var(--borda); margin-top: 12px;
}
button.secundario:hover { background: #E7E1D5; color: var(--tinta); }

.cartao {
  border-radius: 12px; background: var(--campo); border: 1px solid var(--borda);
  padding: 15px 16px; margin-top: 18px; font-size: 13.5px; line-height: 1.55;
}
.aviso { border-color: #EBDCC6; background: #FDF8EE; }
.erro {
  color: var(--erro); font-size: 13.5px; margin-top: 14px;
  border-radius: 12px; padding: 13px 15px; line-height: 1.5;
  background: #FDF2F2; border: 1px solid #F0D5D5;
}
.erro:empty { display: none; }   /* sem erro, sem caixa vazia na tela */

.erro button {
  width: auto; height: auto; margin: 10px 0 0;
  padding: 7px 13px; font-size: 13px; font-weight: 600;
  background: transparent; color: var(--erro);
  border: 1px solid #F0D5D5; border-radius: 8px;
}
.erro button:hover { background: #F7E4E4; }

/* Botao de "encerrar" sessao / "revogar" conector, em /conta — terceira
   excecao a regra generica de `button` (as outras duas: `.secundario` e
   `.erro button`). Tom neutro (var(--secundario)/var(--borda)), nao
   var(--erro): sao acoes de manutencao rotineira e reversiveis (relogar,
   reconectar), uma por linha de uma lista — pintar cada uma de vermelho
   sobrecarregaria a tela e diluiria o vermelho, que aqui e reservado para
   erro de verdade (.erro, .aviso). */
.encerrar {
  width: auto; height: auto; margin: 0; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600;
  background: transparent; color: var(--secundario);
  border: 1px solid var(--borda); border-radius: 8px;
}
.encerrar:hover { background: #E7E1D5; color: var(--tinta); }

.aceite { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; }
.aceite input { width: auto; height: auto; margin-top: 3px; }
.aceite span { font-size: 13px; line-height: 1.5; color: var(--secundario); }

.rodape { margin-top: 26px; font-size: 13.5px; color: var(--secundario); }
.rodape p { margin: 7px 0; }

fieldset {
  margin-top: 20px; border: 1px solid var(--borda); border-radius: 12px;
  padding: 14px 16px;
}
legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--secundario); }
fieldset label { margin-top: 9px; display: flex; align-items: center; gap: 9px; }
fieldset input { width: auto; height: auto; }
fieldset label:has(input:disabled) { color: #9AA3AC; }

/* --- cartao central (consentimento e paginas de texto) ------------------ */
.central {
  max-width: 520px; margin: 0 auto; padding: 48px 24px;
  display: flex; flex-direction: column; min-height: 100vh;
  justify-content: center;
}
.central .logo span { color: var(--tinta); }
.central .logo .rot { color: var(--secundario); border-left-color: var(--borda); }
.central__caixa h1.centrado { text-align: center; }
.central__caixa {
  margin-top: 26px; background: var(--campo); border: 1px solid var(--borda);
  border-radius: 12px; padding: 28px 30px;
}

.texto { font-size: 14.5px; line-height: 1.7; }
.texto h2 { font-size: 16px; margin: 26px 0 8px; }

/* --- a moldura de app (telas de dentro da conta) ------------------------ */
/* Pedido do dono do produto, 08/09/2026: sem isto o advogado sentia que
   continuava "fazendo uma autenticacao fora do nosso ambiente" depois de
   ja ter entrado. Usa `_moldura_app`, nao `_moldura_acesso`. */
.app { display: flex; min-height: 100vh; }

.app-barra {
  flex: 0 0 260px; background: var(--tinta); color: var(--areia);
  display: flex; flex-direction: column; padding: 28px 22px;
}
.app-conta {
  margin: 26px 0 6px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(238, 233, 223, 0.14);
}
.app-conta__nome { display: block; font-size: 14.5px; font-weight: 700; }
.app-conta__email {
  display: block; font-size: 12px; color: #93A2B2; margin-top: 2px;
  word-break: break-all;
}

.app-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; flex: 1; }
.app-nav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  color: #C7CFD8;
}
.app-nav__item:hover { background: rgba(238, 233, 223, 0.08); color: var(--areia); text-decoration: none; }
.app-nav__item.ativo { background: var(--terracota); color: var(--creme); }
.app-nav__contador {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: rgba(238, 233, 223, 0.14); color: #C7CFD8;
}
.app-nav__item.ativo .app-nav__contador { background: rgba(255, 255, 255, 0.22); color: var(--creme); }

.app-sair { margin-top: auto; padding-top: 18px; }
.app-sair button {
  width: 100%; height: auto; margin-top: 0; padding: 10px 0;
  background: transparent; border: 1px solid rgba(238, 233, 223, 0.22);
  color: #C7CFD8; font-weight: 600; font-size: 13px;
}
.app-sair button:hover { background: rgba(238, 233, 223, 0.08); color: var(--areia); }

.app-conteudo { flex: 1; padding: 48px 56px; max-width: 720px; width: 100%; }
.app-conteudo h1 { margin-bottom: 26px; }

/* --- primeiros passos: numeracao em circulo ------------------------------ */
.passos { display: flex; flex-direction: column; margin-top: 8px; }
.passo { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--borda); }
.passo:last-child { border-bottom: 0; }
.passo__numero {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; background: var(--borda); color: var(--secundario);
}
.passo.atual .passo__numero { background: var(--terracota); color: var(--creme); }
.passo.feito .passo__numero { background: var(--tinta); color: var(--areia); }
.passo.futuro { opacity: 0.5; }
.passo__corpo { flex: 1; min-width: 0; }
.passo__corpo h2 { margin: 2px 0 4px; font-size: 16px; }
.passo__legenda { margin: 0 0 4px; font-size: 13px; color: var(--secundario); }

/* --- telas estreitas ---------------------------------------------------- */
@media (max-width: 900px) {
  .acesso { flex-direction: column; }
  .acesso__marca {
    flex: none; padding: 32px 28px; gap: 22px;
  }
  .manchete { font-size: 30px; }
  .fatos, .subtexto { display: none; }   /* a marca fica; a venda sai */
  .acesso__form { padding: 32px 28px; }

  .app { flex-direction: column; }
  .app-barra {
    flex: none; flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 16px 20px; gap: 12px 18px;
  }
  .app-barra .logo .rot { display: none; }
  .app-conta { margin: 0; padding: 0; border: 0; }
  .app-nav { flex-direction: row; flex-wrap: wrap; margin-top: 0; flex: none; width: 100%; }
  .app-sair { margin-top: 0; margin-left: auto; padding-top: 0; }
  .app-sair button { width: auto; padding: 8px 14px; }
  .app-conteudo { padding: 28px 20px; }
}

/* --- a tela unica (10/09/2026) ---------------------------------------- */
.app-conteudo { max-width: 780px; }
.ola { margin: -8px 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--secundario); max-width: 60ch; }
.rotulo {
  display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--secundario);
}

/* blocos como cartoes */
.bloco {
  background: #fff; border: 1px solid var(--borda); border-radius: 14px;
  padding: 22px 24px 24px; margin-bottom: 16px;
}
.bloco--conta { background: transparent; border-style: dashed; }
.bloco__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bloco h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.bloco--conta h2 { font-size: 15px; margin: 14px 0 8px; }
.bloco__numero {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%; font-size: 13.5px; font-weight: 800;
  background: var(--areia); color: var(--tinta); border: 1px solid var(--borda);
}
.bloco__numero[data-estado="atual"] { background: var(--terracota); color: var(--creme); border-color: var(--terracota); }
.bloco__numero[data-estado="feito"] { background: var(--tinta); color: var(--areia); border-color: var(--tinta); }
.bloco__legenda { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--secundario); }
.bloco .introducao { margin-bottom: 14px; }

/* pilulas de estado */
.pilula {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; background: var(--areia); color: var(--secundario);
  border: 1px solid var(--borda);
}
.pilula--ok { background: #EAF3EA; color: #2E5D34; border-color: #CADFCB; }
.pilula--pendente { background: #FDF3EC; color: #A35139; border-color: #F0D9CD; }

/* estado do eProc */
.estado { margin: 0 0 12px; font-size: 14px; }
.estado--pendente { color: var(--secundario); }
.cartao.sucesso { border-color: #CADFCB; background: #EEF6EE; font-size: 15px; color: var(--tinta); }
.sucesso__proximo { margin: 12px 0 0; font-weight: 600; }
details.trocar { margin-top: 14px; }
details.trocar summary { cursor: pointer; color: var(--secundario); font-size: 13.5px; }
details.trocar[open] summary { margin-bottom: 8px; }

/* como voce atua: opcoes em cartao */
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.opcao {
  display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: start;
  padding: 14px 16px; margin: 0; border: 1px solid var(--borda); border-radius: 12px;
  background: #fff; cursor: pointer; font-size: 14px;
}
.opcao input { margin: 3px 0 0; accent-color: var(--terracota); }
.opcao__titulo { font-weight: 700; color: var(--tinta); }
.opcao__legenda { grid-column: 2; font-size: 12.5px; color: var(--secundario); margin-top: 2px; }
.opcao:has(input:checked) { border-color: var(--terracota); background: #FDF7F2; box-shadow: inset 0 0 0 1px var(--terracota); }
#form-atuacao button { width: auto; margin-top: 14px; height: 40px; font-size: 14px; }

/* endereco do servidor: caixa escura, como a referencia */
.url-conector { margin: 4px 0 20px; }
.url-conector .rot { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--secundario); }
.url-conector__caixa {
  display: flex; gap: 12px; align-items: center; padding: 12px 12px 12px 16px;
  border-radius: 12px; background: var(--tinta); color: var(--creme);
}
.url-conector__caixa code { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; color: var(--creme); }
/* A regra global de button e largura 100% (CTA); aqui ele e acessorio. */
.url-conector__caixa button {
  width: auto; flex: 0 0 auto; height: 36px; padding: 0 14px; margin: 0; font-size: 13px;
  background: transparent; color: var(--creme); border: 1px solid rgba(255,255,255,.35);
}
.url-conector__caixa button:hover { background: rgba(255,255,255,.1); color: var(--creme); }

/* abas dos roteiros */
.abas { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: var(--areia); border: 1px solid var(--borda); }
.aba { width: auto; height: 34px; margin: 0; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: transparent; color: var(--secundario); }
.aba:hover { background: #fff; color: var(--tinta); }
.aba.ativa, .aba.ativa:hover { background: var(--tinta); color: var(--areia); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* passo a passo */
.roteiro { list-style: none; counter-reset: passo; padding: 0; margin: 0; }
.roteiro li {
  counter-increment: passo; display: grid; grid-template-columns: 30px 1fr;
  column-gap: 14px; padding: 13px 14px; margin-bottom: 8px;
  border: 1px solid var(--borda); border-radius: 12px; background: #fff;
}
.roteiro li::before {
  content: counter(passo); display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: 12.5px; font-weight: 800;
  background: var(--areia); color: var(--tinta); border: 1px solid var(--borda);
}
.roteiro li strong { display: block; font-size: 14.5px; }
.roteiro li span { grid-column: 2; margin-top: 2px; color: var(--secundario); font-size: 13.5px; line-height: 1.5; }

/* sessoes e assinatura, discretos */
.sessoes { padding-left: 18px; margin: 0; font-size: 13.5px; color: var(--secundario); }
.sessoes li { margin-bottom: 6px; }
.sessoes button.encerrar { width: auto; height: 26px; margin: 0 0 0 8px; padding: 0 10px; font-size: 12px; background: transparent; color: var(--secundario); border: 1px solid var(--borda); }
.sessoes button.encerrar:hover { background: #fff; color: var(--tinta); }
.bloco--conta p { margin: 0; font-size: 14px; }