/* ═══════════════════════════════════════════════════════════════════════════
   Telas de acesso — src/telas/acesso/ (login, criar conta, recuperar e
   redefinir senha). A capa e o painel são do uAcesso.html; cada formulário
   é um TWebForm montado dentro de #acesso-conteudo.
   Duas metades: a capa (azul NUTES, a única exceção ao "nada de azul em bloco
   grande" do design system) e o painel do formulário sobre o papel da página.
   Só tokens; as medidas soltas aqui são tamanhos de fonte e geometria da capa.
   ═══════════════════════════════════════════════════════════════════════ */

.acesso {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
}

/* ── Capa ─────────────────────────────────────────────────────────────── */
.acesso-capa {
  position: relative;
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  padding: var(--space-10);
  overflow: hidden;
  color: var(--brand-mint);
  background: linear-gradient(170deg,
    var(--brand-blue) 0%,
    color-mix(in srgb, var(--brand-blue) 62%, var(--brand-blue-deep)) 55%,
    color-mix(in srgb, var(--brand-blue) 35%, var(--brand-blue-deep)) 100%);
}
[data-theme="dark"] .acesso-capa {
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--brand-blue) 70%, var(--brand-blue-deep)) 0%,
    var(--brand-blue-deep) 60%,
    var(--brand-blue-night) 100%);
}

/* Padrão de ondas: zigue-zague fino em menta, quase transparente, que some
   para a esquerda. O SVG é só máscara (o "black" nele é alfa, não cor). */
.acesso-capa-padrao {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
}
.acesso-capa-padrao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-mint);
  opacity: 0.11;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38' viewBox='0 0 22 38'%3E%3Cpolyline points='0,28 5.5,10 11,28 16.5,10 22,28' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38' viewBox='0 0 22 38'%3E%3Cpolyline points='0,28 5.5,10 11,28 16.5,10 22,28' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E");
  -webkit-mask-size: 22px 38px;
          mask-size: 22px 38px;
}

.acesso-capa-topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.acesso-capa-marca {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--brand-mint) 72%, transparent);
}
.acesso-capa-fio {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--brand-mint) 22%, transparent);
}

/* Título: verde sobre azul só em texto grande, como manda o manual (4.3). */
.acesso-capa-titulo {
  position: relative;
  margin: auto 0;
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: clamp(40px, 2.7vw, 52px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--brand-mint);
}
.acesso-capa-titulo-destaque { color: var(--brand-green); }

/* Quadro de tarefas fantasma no pé da capa: lembra o produto sem disputar
   com o título. */
.acesso-capa-quadro {
  position: absolute;
  left: 57%;
  bottom: calc(var(--space-10) * -2);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transform: rotate(-4deg);
  transform-origin: left bottom;
  pointer-events: none;
}
.acesso-capa-coluna {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 134px;
  height: 260px;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--brand-mint) 12%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--brand-mint) 3%, transparent);
}
.acesso-capa-coluna:nth-child(2) { margin-top: calc(var(--space-3) * -1); }
.acesso-capa-coluna:nth-child(3) { margin-top: calc(var(--space-5) * -1); }
.acesso-capa-coluna i {
  display: block;
  height: 34px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-mint) 7%, transparent);
}

/* ── Painel do formulário ─────────────────────────────────────────────── */
.acesso-painel {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-10) var(--space-6);
}

.acesso-tema {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

/* Onde o TWebForm de cada tela é montado. */
.acesso-conteudo {
  width: 100%;
  max-width: 384px;
}

.acesso-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.acesso-cabecalho {
  display: flex;
  flex-direction: column;
}
.acesso-kicker {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.acesso-titulo {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
.acesso-subtitulo {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.acesso-divisoria { margin: 0; }

/* Rótulos um pouco maiores e mais escuros que o .field padrão: no acesso eles
   são o único texto do formulário. */
.field > .acesso-label {
  font-size: 13.5px;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.acesso-input { min-height: 42px; padding-inline: var(--space-3); font-size: 14px; }

/* Senha com o botão de olho dentro do campo. */
.acesso-senha { position: relative; }
.acesso-senha .acesso-input { padding-right: var(--space-10); }
.acesso-ver-senha {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: color var(--transition), background var(--transition);
}
.acesso-ver-senha:hover { color: var(--color-text); background: var(--color-neutral-200); }
[data-theme="dark"] .acesso-ver-senha:hover { background: var(--color-surface-2); }
.acesso-ver-senha svg { width: 15px; height: 15px; }
.acesso-ver-senha .icone-olho-fechado { display: none; }
.acesso-ver-senha.is-visivel .icone-olho { display: none; }
.acesso-ver-senha.is-visivel .icone-olho-fechado { display: block; }

.acesso-erro { margin: calc(var(--space-1) * -1) 0 0; font-size: 12.5px; }
.acesso-erro[hidden] { display: none; }

.acesso-acao {
  min-height: 44px;
  font-weight: 600;
}
.acesso-acao.is-carregando { cursor: progress; }

.acesso-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.acesso-link {
  font-size: 13px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}
.acesso-link:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Telas estreitas: a capa vira uma faixa no topo ────────────────────── */
@media (max-width: 860px) {
  .acesso { flex-direction: column; }
  .acesso-capa {
    flex: none;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
  .acesso-capa-titulo { margin: 0; font-size: 36px; }
  .acesso-capa-quadro { display: none; }
  .acesso-painel { place-items: start center; padding: var(--space-8) var(--space-4); }
  .acesso-tema { top: var(--space-2); right: var(--space-2); }
  .acesso-ver-senha { width: 40px; height: 40px; right: 1px; }
}

/* Dica abaixo do campo (ex.: "Mínimo de 6 caracteres"). */
.acesso-dica {
  margin-top: var(--space-1);
  margin-bottom: calc(var(--space-1) * -1);
  line-height: 1.3;
}

/* Confirmação de envio (link de recuperação, conta criada). */
.acesso-aviso {
  margin: 0;
  padding: var(--space-3);
  font-size: 13px;
  color: var(--color-success-700);
  background: var(--color-success-100);
  border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
  border-radius: var(--radius-md);
}
.acesso-aviso[hidden] { display: none; }