/* =====================================================================
   Telas de acesso (D248) — entrada, primeiro acesso, convite, recuperação.

   Três regiões no computador: o logotipo do CLIENTE à esquerda, o cartão
   com o formulário no centro e a marca beAgri à direita. No celular e em
   tela estreita, uma coluna: logotipo do cliente, formulário e a marca
   beAgri, menor. O formulário é sempre o elemento principal.

   Só o nome e o logotipo são do cliente. Estrutura, botões e cores são da
   beAgri e vêm de base.css — aqui não há cor nova de marca.
   ===================================================================== */
.acesso-tela {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 24px 32px;
  box-sizing: border-box;
}
.acesso-tela-larga { grid-template-columns: minmax(0, 1fr) minmax(320px, 680px) minmax(0, 1fr); }

.acesso-lado { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.acesso-lado-cliente { justify-self: end; }
.acesso-lado-beagri { justify-self: start; }

/* Os dois logotipos são redimensionados SEM deformar: largura e altura
   máximas, com a proporção original preservada. */
.acesso-logo-cliente { display: block; max-width: 260px; max-height: 220px; width: auto; height: auto; object-fit: contain; }
.acesso-nome-cliente { margin: 12px 0 0; font-size: 1.05rem; font-weight: 600; color: #2b3540; text-align: center; overflow-wrap: anywhere; }
.acesso-nome-cliente-sem-logo { font-size: 1.5rem; margin: 0; }

.acesso-logo { display: block; width: 200px; max-width: 100%; height: auto; max-height: 30vh; object-fit: contain; background: transparent; border: 0; }
/* Grafia exata da marca (D117): "beAgri Sistemas", com "Sistemas" em
   itálico. Nada de `text-transform` — em maiúsculas viraria outra grafia. */
.acesso-marca { font-size: .78rem; letter-spacing: .04em; color: #6b7684; margin: 8px 0 0; text-align: center; }
.acesso-marca-sistemas { font-style: italic; }

.acesso-cartao {
  width: 100%; background: #fff; border: 1px solid #d8dee6; border-radius: 10px;
  padding: 28px 28px 24px; box-sizing: border-box; min-width: 0;
}
.acesso-cartao h1 { margin: 0 0 4px; font-size: 1.35rem; }
.acesso-cartao h2 { margin: 18px 0 8px; font-size: 1.02rem; }

.acesso-explicacao { color: #46505c; font-size: .92rem; line-height: 1.5; margin: 0 0 18px; }
.acesso-campo { display: block; margin-bottom: 14px; }
.acesso-campo > span:first-child, .acesso-campo > label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .92rem; }
.acesso-campo input[type="text"], .acesso-campo input[type="email"], .acesso-campo input[type="password"],
.acesso-campo input[type="tel"] {
  width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 1rem;
  border: 1px solid #c3ccd7; border-radius: 6px;
}
.acesso-dica { display: block; color: #6b7684; font-size: .82rem; margin-top: 3px; font-weight: 400; line-height: 1.4; }
.acesso-acoes { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.acesso-acoes button, .acesso-acoes .botao, .acesso-acoes .botao-secundario { flex: 1 1 160px; padding: 11px; font-size: 1rem; text-align: center; }
.acesso-mensagem { border-radius: 6px; padding: 11px 13px; margin-bottom: 16px; font-size: .92rem; line-height: 1.45; }
.acesso-erro { background: #fdecec; border: 1px solid #f0b7b7; color: #8a1c1c; }
.acesso-aviso { background: #fdf6e3; border: 1px solid #ecd9a4; color: #6b5310; }
.acesso-info { background: #eef4fb; border: 1px solid #bcd3ee; color: #1d456f; }
.acesso-erro ul { margin: 6px 0 0; padding-left: 20px; }
.acesso-rodape { margin-top: 18px; color: #6b7684; font-size: .82rem; line-height: 1.6; }
.acesso-rodape a { display: inline-block; }
.botao-como-link { display: block; text-align: center; padding: 11px; font-size: 1rem;
  border: 1px solid #c3ccd7; border-radius: 6px; text-decoration: none; }

/* Senha com o botão de mostrar/ocultar dentro da mesma linha do campo. */
.acesso-senha { display: flex; gap: 6px; align-items: stretch; }
.acesso-senha input { flex: 1 1 auto; min-width: 0; }
.acesso-senha-ver {
  flex: 0 0 auto; padding: 0 12px; border: 1px solid #c3ccd7; border-radius: 6px; background: #f4f6f9;
  color: #2b3540; font-size: .82rem; cursor: pointer; min-width: 78px;
}
.acesso-senha-ver:focus-visible { outline: 2px solid var(--verde, #1f6b3a); outline-offset: 1px; }

/* Indicador de força: cor nunca é o único sinal — o texto diz o nível, e a
   lista diz o que falta. */
.acesso-forca { margin-top: 8px; }
.acesso-forca-barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 6px; }
.acesso-forca-barra span { border-radius: 3px; background: #dfe4ea; }
.acesso-forca[data-nivel="1"] .acesso-forca-barra span:nth-child(-n+1) { background: #c0392b; }
.acesso-forca[data-nivel="2"] .acesso-forca-barra span:nth-child(-n+2) { background: #c98a1b; }
.acesso-forca[data-nivel="3"] .acesso-forca-barra span:nth-child(-n+3) { background: #5b8f2f; }
.acesso-forca[data-nivel="4"] .acesso-forca-barra span:nth-child(-n+4) { background: #1f6b3a; }
.acesso-forca-texto { margin: 6px 0 2px; font-size: .84rem; color: #46505c; }
.acesso-forca-lista { list-style: none; margin: 0; padding: 0; font-size: .82rem; color: #6b7684; }
.acesso-forca-lista li::before { content: "○ "; }
.acesso-forca-lista li[data-ok="1"] { color: #1f6b3a; }
.acesso-forca-lista li[data-ok="1"]::before { content: "● "; }

.acesso-marcar { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; font-size: .92rem; line-height: 1.4; }
.acesso-marcar input { margin-top: 3px; flex: 0 0 auto; }

/* Passos do assistente do primeiro acesso. */
.acesso-passos { list-style: none; display: flex; gap: 6px; margin: 0 0 20px; padding: 0; counter-reset: passo; }
.acesso-passos li {
  flex: 1 1 0; min-width: 0; padding: 8px 4px 0; border-top: 4px solid #dfe4ea; font-size: .74rem;
  color: #6b7684; text-align: center; counter-increment: passo; overflow-wrap: anywhere;
}
.acesso-passos li::before { content: counter(passo) ". "; font-weight: 700; }
.acesso-passos li[data-feito="1"] { border-top-color: #8fbf9f; color: #2b3540; }
.acesso-passos li[aria-current="step"] { border-top-color: var(--verde, #1f6b3a); color: #14301f; font-weight: 700; }

/* Confirmação de cada contato, no assistente. */
.acesso-contato { border: 1px solid #d8dee6; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.acesso-contato-titulo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 600; font-size: .94rem; }
.acesso-contato-valor { font-weight: 400; color: #46505c; overflow-wrap: anywhere; }
.acesso-contato-ok { color: #1f6b3a; font-weight: 700; }
.acesso-contato-linha { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: stretch; }
.acesso-contato-linha input { flex: 1 1 120px; min-width: 0; padding: 9px 10px; font-size: 1.05rem; letter-spacing: .18em;
  border: 1px solid #c3ccd7; border-radius: 6px; box-sizing: border-box; }
.acesso-contato-linha button { flex: 0 0 auto; padding: 9px 14px; }
.acesso-codigo { font-size: 1.15rem; letter-spacing: .22em; }
/* Rótulo que só o leitor de tela lê. */
.acesso-sr-only { position: absolute; width: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Faixa que identifica um servidor técnico com comunicação simulada. */
.acesso-simulada { margin: 0 0 14px; padding: 8px 12px; border-radius: 6px; background: #fdf6e3; border: 1px dashed #d9b45b;
  color: #6b5310; font-size: .82rem; line-height: 1.4; }

.acesso-mensagens-simuladas { list-style: none; padding: 0; margin: 0; }
.acesso-mensagens-simuladas li { border: 1px solid #d8dee6; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.acesso-mensagens-simuladas pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font-size: .86rem; font-family: inherit; }

/* Tela estreita: uma coluna, na ordem cliente → formulário → beAgri. */
@media (max-width: 900px) {
  .acesso-tela, .acesso-tela-larga { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 16px; align-content: center; }
  .acesso-lado-cliente, .acesso-lado-beagri { justify-self: center; }
  .acesso-logo-cliente { max-width: 180px; max-height: 110px; }
  .acesso-nome-cliente-sem-logo { font-size: 1.2rem; }
  .acesso-logo { width: 110px; max-height: 16vh; }
  .acesso-cartao { padding: 22px 18px 20px; }
  .acesso-passos li { font-size: .68rem; }
}

/* ---------------------------------------------------------------------
   Dentro do sistema: minha conta, dispositivos, configuração inicial
   --------------------------------------------------------------------- */
.conta-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.conta-cartao { border: 1px solid var(--cinza-borda, #d8dee6); border-radius: 8px; padding: 14px 16px; background: var(--branco, #fff); min-width: 0; }
.conta-cartao h2 { margin: 0 0 8px; font-size: 1rem; }
.conta-cartao dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .92rem; }
.conta-cartao dt { color: #6b7684; }
.conta-cartao dd { margin: 0; overflow-wrap: anywhere; }
.conta-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.config-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.config-etapa { border: 1px solid var(--cinza-borda, #d8dee6); border-radius: 8px; padding: 12px 14px; background: var(--branco, #fff);
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.config-etapa-marca { width: 28px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  border: 2px solid #c3ccd7; color: #6b7684; font-size: .9rem; }
.config-etapa[data-feita="1"] .config-etapa-marca { border-color: #1f6b3a; background: #1f6b3a; color: #fff; }
.config-etapa h2 { margin: 0; font-size: 1rem; }
.config-etapa p { margin: 2px 0 0; font-size: .88rem; color: #46505c; }
.config-etapa-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.config-progresso { height: 10px; border-radius: 5px; background: #dfe4ea; overflow: hidden; margin: 6px 0 14px; }
.config-progresso span { display: block; height: 100%; background: #1f6b3a; }
@media (max-width: 700px) {
  .config-etapa { grid-template-columns: auto 1fr; }
  .config-etapa-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

.logotipo-previa { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
/* O aviso da escolha do arquivo só ocupa lugar quando tem o que dizer. */
[data-logotipo-aviso][hidden], [data-logotipo-previa][hidden] { display: none; }
.logotipo-previa img { max-width: 220px; max-height: 120px; width: auto; height: auto; object-fit: contain;
  border: 1px dashed #c3ccd7; border-radius: 6px; padding: 6px; background:
  repeating-conic-gradient(#f1f3f6 0% 25%, #fff 0% 50%) 50% / 16px 16px; }

/* Aviso de fim de sessão: dentro da janela padrão do sistema (.pc-modal). */
#dlg-sessao input[type="password"] { width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 1rem;
  border: 1px solid #c3ccd7; border-radius: 6px; margin: 6px 0 4px; }
.link-minha-conta { font-size: .82rem; }

/* Formulário de uma ação só, na linha da lista. */
.form-na-linha { display: inline; }

/* (27/10/2026, pedido do responsável) A seleção do usuário simulado (index.html): o cartão no centro da tela, o
   logotipo do cliente acima e a marca beAgri abaixo. O logotipo do cabeçalho e a marca d'água do pé ficam escondidos
   só nesta tela (continuam no HTML, para as outras telas sem sessão). */
.login-demo {
  min-height: calc(100vh - var(--altura-cabecalho, 3.5rem) - 64px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px 16px; box-sizing: border-box;
}
.login-demo-cliente { display: flex; flex-direction: column; align-items: center; }
.login-demo-cliente .acesso-logo-cliente { max-width: 180px; max-height: min(120px, 16vh); }
.login-demo-cartao { max-width: 520px; }
.login-demo-cartao .titulo-pagina { margin: 0 0 8px; font-size: 1.35rem; text-align: center; }
.login-demo-form { margin: 0; max-width: none; }
.login-demo-form select { width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 1rem; }
.login-demo-beagri { display: flex; flex-direction: column; align-items: center; }
.login-demo-beagri .acesso-logo { width: 90px; max-height: 12vh; }
.layout:has(.login-demo) .cabecalho-logos { visibility: hidden; }
.layout:has(.login-demo) .marca-agua-solta { display: none; }
@media (max-width: 640px) {
  .login-demo { gap: 16px; padding: 16px 0; }
  .login-demo-cliente .acesso-logo-cliente { max-width: 160px; max-height: 100px; }
  .login-demo-beagri .acesso-logo { width: 90px; }
}