/* ==========================================================================
   Spectare Urbis · Acesso — botão do cabeçalho e diálogo de entrada
   --------------------------------------------------------------------------
   A aparência é a do SITE (fundo claro #fafbf7, verde da marca #1d8864,
   Manrope/Arial e os mesmos raios de borda de experience.css: 2px nos campos,
   3px nos botões, 4px no que acompanha o .nav-cta, 6px na superfície) — nada
   do tema escuro da plataforma.

   O arquivo mora em /assets pelo mesmo motivo de acesso.js: `server.ts`
   publica na raiz só uma lista fixa de arquivos.
   ========================================================================== */

/* ---- botão do cabeçalho -------------------------------------------------- *
 * Reaproveita a classe .button.green do site; só o tom muda: o verde menta
 * base (--green #77e5b1) é para fundo escuro e fica sem contraste no
 * cabeçalho claro, então em superfície clara usamos o verde da marca.        */
.header .nav-entrar,
.acesso-dialogo .button.green {
  background: #1d8864;
  color: #f4fbf7;
}
.header .nav-entrar:hover,
.acesso-dialogo .button.green:hover {
  background: #166b4e;
  box-shadow: 0 10px 28px #1d886429;
}

.header .nav-entrar {
  gap: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.header .acesso-sair-topo {
  padding: 11px 13px;
  border: 1px solid #bac8c1;
  border-radius: 4px;
  background: transparent;
  color: #35604f;
  font-size: 12px;
  white-space: nowrap;
}
.header .acesso-sair-topo:hover {
  border-color: #1d8864;
  color: #14513a;
}

/* Itens que só existem dentro do menu recolhido — mesma lógica do
   .nav-contact: escondidos no desktop, visíveis no menu (≤1000px). */
.nav-entrar-menu { display: none; }

@media (max-width: 1000px) {
  .header .nav-entrar,
  .header .acesso-sair-topo { display: none; }

  .header nav .nav-entrar-menu {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 0;
    border-radius: 3px;
    background: #1d8864;
    color: #f4fbf7;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
  }
  .header nav .nav-entrar-menu.acesso-sair-menu {
    background: transparent;
    border: 1px solid #c3cec6;
    color: #35604f;
    font-weight: 400;
  }
}

/* ---- diálogo ------------------------------------------------------------- */
.acesso-dialogo {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #dbe4d9;
  border-radius: 6px;
  background: #fafbf7;
  color: #142c38;
  box-shadow: 0 30px 90px #091e2833;
}
.acesso-dialogo::backdrop { background: #091e2870; }

.acesso-formulario {
  display: grid;
  gap: 14px;
  padding: 26px 26px 22px;
}

.acesso-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.acesso-dialogo h2 {
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.05em;
}
.acesso-dialogo h2 em { color: #1d8864; }

.acesso-fechar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d3ddd0;
  border-radius: 4px;
  background: transparent;
  color: #4b6b5c;
  font-size: 14px;
  line-height: 1;
}
.acesso-fechar:hover { border-color: #1d8864; color: #14513a; }

.acesso-texto {
  font-size: 12px;
  line-height: 1.65;
  color: #63776c;
}

.acesso-campo { display: grid; gap: 7px; }
.acesso-campo label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #4b6b5c;
}
.acesso-campo input {
  width: 100%;
  padding: 12px;
  border: 1px solid #c3d3c6;
  border-radius: 2px;
  background: #ffffff;
  color: #142c38;
  font: 13px Manrope, Arial, sans-serif;
  outline: 0;
}
.acesso-campo input:focus {
  border-color: #1d8864;
  box-shadow: 0 0 0 3px #1d88641f;
}

.acesso-erro {
  padding: 10px 12px;
  border-left: 2px solid #c2532f;
  background: #f7e5de;
  color: #7c2f18;
  font-size: 12px;
  line-height: 1.5;
}

.acesso-enviar {
  justify-self: stretch;
  border: 0;
  font-size: 13px;
}
.acesso-enviar span { margin-left: auto; }
.acesso-enviar[disabled] {
  transform: none;
  box-shadow: none;
  opacity: 0.7;
  cursor: progress;
}

.acesso-micro {
  font-size: 10px;
  line-height: 1.6;
  color: #71857b;
}

@media (max-width: 600px) {
  .acesso-formulario { padding: 22px 18px 18px; }
  .acesso-dialogo h2 { font-size: 22px; }
}