/* ═══════════════════════════════════════════════════════════════════
   Extraido de design/login/prototipo/index.html — a "tela de acesso"
   publica (login, convite, redefinicao de senha) e' sempre este mesmo
   casco de duas colunas. So' o conteudo da .caixa muda por pagina.
   Medido em oito viewports, sem scroll de 1920x1080 a 360x640.
   ═══════════════════════════════════════════════════════════════════ */

/* ☠️ TINTA VEM DE PAPEL, NUNCA DE PIGMENTO — achados 37 e 28, do Design.

   `--ambar` e `--neutro` sao a MARCA: valem o mesmo nos dois temas. Esta folha
   nasceu para uma tela que so' existia no escuro, e quando a `/autorizar` e a
   `/conferir` passaram a seguir `prefers-color-scheme` (achado 36) seis pares
   ficaram ilegiveis no claro — o pior deles a palavra "Autoriza", a 1,54:1.

   ⚠️ A troca e' NEUTRA em `/entrar`, TOTP e convite, e isso foi conferido ANTES
   de mexer: `_LayoutAcesso` so' emite `data-tema` quando a pagina pede, e essas
   nao pedem. Sem `data-tema` os papeis resolvem pelo `:root` base, que e' o
   escuro — os mesmos #FFBB10 e #8993A4 de sempre.

   ☠️ BORDA, FUNDO E CONTORNO CONTINUAM PIGMENTO. A cantoneira ambar e o
   preenchimento do botao sao a marca, e marca nao troca com o tema. O que troca
   e' o que se le' EM CIMA do papel.                                          */

.tela {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 4vh, 48px);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4.5vw, 56px);
}

.marca::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--veu-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--veu-grade) 1px, transparent 1px);
  background-size: 64px 64px;
}

.marca::after {
  content: "";
  position: absolute; inset: -40%;
  background: linear-gradient(45deg,
    rgba(255, 187, 16, 0)   32%,
    rgba(255, 187, 16, .07) 43%,
    rgba(255, 187, 16, .18) 50%,
    rgba(255, 187, 16, .07) 57%,
    rgba(255, 187, 16, 0)   68%);
  filter: blur(38px);
}

.marca > * { position: relative; }

.assinatura {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; width: fit-content;
}
.assinatura img {
  width: clamp(220px, 24vw, 312px);
  height: auto; display: block;
}
.assinatura p {
  margin: 0; text-align: center;
  font-size: clamp(10.5px, 1vw, 12px);
  font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--texto-fraco);
}

.produto { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 30px); }

.produto h1 {
  margin: 0;
  font-size: clamp(44px, 5.6vw, 72px);
  font-weight: 600; letter-spacing: -.04em; line-height: .94;
  color: var(--acento-texto);
}

/* ⚠️ A `.descricao` era EMITIDA e não tinha regra nenhuma (achado da UX/UI,
   `6c891de`): media `line-height: normal` e `margin: 16px 0` — padrão de navegador
   puro, num sistema em que todo texto tem token. Não era reprova de nada; era o
   único texto da tela sem entrelinha nossa, e a classe no markup prometia o
   contrário. Classe emitida sem regra é a varredura VOLTA da folha morta. */
.descricao {
  margin: 0;
  line-height: 1.5;
  color: var(--texto-fraco);
}

.passos { display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 16px); }
.passo  { display: flex; align-items: center; gap: 14px; }
/* ☠️ A COR DO ICONE VEM DAQUI, e nao de um `stroke="#FFBB10"` no HTML — achado 28,
   segunda metade. Os cinco `svg` desta tela tinham o ambar cravado no atributo, fora do
   CSS, e por isso nenhuma guarda de folha os alcancava.

   ⚠️ As duas setas de link ja' herdavam certo: vivem dentro de um `<a>` com
   `--acento-texto`. Estes tres nao herdavam de ninguem, entao a cor tinha de ser dita —
   e `currentColor` sozinho os deixaria com a cor do texto.

   ☠️ No escuro a troca e' NEUTRA: `--acento-texto` e' #FFBB10 ali, o mesmo literal. */
.passo svg { flex-shrink: 0; color: var(--acento-texto); }
.passo p {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.4;
}

.institucional {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 46ch;
}
.institucional .fio { height: 1px; background: var(--fio); }
.institucional .razao {
  margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45;
  color: var(--texto);
}
/* ⚠️ A OUTRA CÓPIA DO MESMO LINK — media 146 × 15, sem o piso. Ela não é urgente
   (aqui há ponteiro, e a norma passa nas duas), mas deixar uma cópia no piso e a
   outra fora é exatamente a forma que já apareceu duas vezes esta semana: conserto
   na instância, não no padrão (o alinhamento das 6 telas, o `overflow-wrap` da
   `td`). Duas cópias do mesmo link com regras diferentes divergem sozinhas.
   ⚠️ `width: fit-content` fica: sem ele o `min-height` cresceria a caixa inteira. */
.institucional a {
  display: flex; align-items: center; gap: 7px; width: fit-content;
  min-height: var(--toque);
  font-size: 12.5px; font-weight: 500; color: var(--acento-texto);
  text-decoration: underline; text-underline-offset: 3px;
}

.acesso {
  position: relative;
  background: var(--veu);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 5vw, 64px);
}
.acesso::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: linear-gradient(180deg,
    rgba(255, 187, 16, 0) 0%, rgba(255, 187, 16, .55) 50%, rgba(255, 187, 16, 0) 100%);
}

/* Os dois eixos declarados SEPARADOS de propósito: altura e lado são negociados
   por regras diferentes, e juntá-los num `padding` só foi o que criou a colisão
   descrita mais abaixo, no bloco de `max-height`. */
.caixa {
  position: relative; width: 100%; max-width: 400px;
  padding-block: 44px;
  padding-inline: 0;          /* no desktop a cantoneira vive FORA, em left/right: -28px */
}

.caixa::before, .caixa::after {
  content: ""; position: absolute; width: 52px; height: 52px;

  /* ☠️ DECORAÇÃO NUNCA COME CLIQUE. Estas cantoneiras são enfeite, mas são
     `position: absolute` sobre um `.formulario` não posicionado — então ficavam
     POR CIMA do botão. Medido a 375×812 em /convite, com o dedo: tocar no canto
     inferior direito de "Definir senha" acertava a `div.caixa` e não acontecia
     nada. 5,2% do botão era área morta, na PRIMEIRA tela que um corretor novo vê.

     Uma linha, e é a correção certa — não o remendo. Enfeite que intercepta
     ponteiro é defeito em qualquer tela, não só nestas. */
  pointer-events: none;
}
.caixa::before {
  top: 0; left: -28px;
  border-top: 2px solid var(--ambar); border-left: 2px solid var(--ambar);
  border-top-left-radius: 16px;
}
.caixa::after {
  bottom: 0; right: -28px;
  border-bottom: 2px solid var(--ambar); border-right: 2px solid var(--ambar);
  border-bottom-right-radius: 16px;
}

.formulario { display: flex; flex-direction: column; gap: clamp(24px, 3.5vh, 32px); }

.titulo-acesso { display: flex; flex-direction: column; gap: 6px; }
.titulo-acesso h2 {
  margin: 0; font-size: clamp(21px, 2vw, 25px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.22;
}
.titulo-acesso p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto-fraco); }

.campos { display: flex; flex-direction: column; gap: 20px; }
.campo  { display: flex; flex-direction: column; gap: 8px; }
/* ☠️ **O RÓTULO ALINHA PELA TINTA, E NÃO PELA CAIXA** — achado 51.
   O Luciano descreveu duas vezes: *"os rótulos estão colados na borda esquerda da tela
   enquanto os campos começam recuados"*. O Design mediu `getBoundingClientRect().left` das
   duas CAIXAS, achou 0px de diferença, e escreveu "alinhado". As caixas estavam mesmo
   alinhadas — o que desalinha é o respiro DENTRO do campo.

   O texto digitado começa em `padding` + `border` do campo. O texto do rótulo começava na
   borda da caixa. Nesta folha isso dá **17px** de desencontro, em toda tela de acesso e na
   `/autorizar`; nos filtros da grade dá 13px, e lá o conserto é o mesmo.

   ⚠️ E é composto: o rótulo já é menor e mais apagado que o campo. Somado ao deslocamento,
   são três sinais dizendo "este rótulo não pertence a este campo".

   ☠️ `calc(... + 1px)` porque a BORDA conta. Alinhar só pelo `padding` deixa 1px de
   desencontro — invisível de perto, e é exatamente o resíduo que faz uma tela parecer
   "quase certa" sem ninguém conseguir dizer por quê. */
.campo label {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--texto-fraco);
  padding-left: calc(var(--esp-4) + var(--fio-largura));
}

/* ☠️ `--texto`, NUNCA `--claro`. O achado 37 do Design pegou isto nos códigos de
   recuperação; aqui era pior, e nesta MESMA folha: `--claro` é #F0F0F0 fixo — pigmento —,
   e o fundo do campo troca com o tema. No claro dava #F0F0F0 sobre #FFFFFF = 1,14:1, ou
   seja, o proprietário NÃO ENXERGAVA O QUE DIGITAVA.

   ⚠️ E só ficou alcançável quando a `/autorizar` passou a seguir `prefers-color-scheme`
   (achado 36). A folha nasceu numa tela que só existia no escuro; a mudança de tema não
   tocou nela, e o defeito entrou por baixo.

   ☠️ No escuro a troca é literalmente NEUTRA: `--texto` também é #F0F0F0 ali. No claro vai
   de 1,14:1 para 18,01:1. */
/* ⚠️ `select` entra na MESMA regra desde 22/08/2026, quando a UF da tela do proprietario
   virou combo a pedido do Luciano. Uma regra separada para o combo o deixaria com altura,
   fonte e foco proprios — e dois campos lado a lado com alturas diferentes e' o tipo de
   coisa que ninguem consegue nomear e todo mundo ve'. */
.campo input,
.campo select {
  height: var(--toque);
  width: 100%;
  border-radius: var(--raio-campo);
  border: 1px solid var(--fio-invertido);
  background: var(--campo-fundo);
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--texto);
}
.campo input::placeholder { color: var(--texto-fraco); }
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--acento-texto);
  box-shadow: 0 0 0 4px rgba(255, 187, 16, .12);
}

.campo-senha { position: relative; display: flex; align-items: center; }
.campo-senha input { padding-right: calc(var(--toque) + 8px); }
.campo-senha button {
  position: absolute; right: 6px;
  /* ☠️ Escrevia 40×40 à mão — 12px abaixo do `--toque` e 4px abaixo do piso da
     WCAG 2.5.8. O mutirão que levou todo controle para `var(--toque)` passou pela
     casca e não passou pelas telas de acesso, que são as ÚNICAS que 470 corretores
     usam antes de ter conta. */
  width: var(--toque); height: var(--toque);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  border-radius: 8px;
}
/* ⚠️ A cor do olho de mostrar senha vem daqui — ela estava cravada como `#8993A4` no
   atributo `stroke` do `Entrar.cshtml`.

   ☠️ ESTE CASO NINGUEM TINHA VISTO. Nem o Design, que mediu as seis paginas publicas no
   tema claro, nem eu — porque a `/entrar` nao pede tema e o valor cravado nao morde HOJE.
   Quem achou foi a guarda nova, ao ser ampliada do `color` para o VALOR. Uma guarda que
   so' cobre o defeito conhecido acha exatamente o defeito conhecido. */
.campo-senha button svg { color: var(--texto-fraco); }

.campo-senha button:focus-visible { outline: 2px solid var(--acento-fio); outline-offset: 2px; }

.acoes { display: flex; flex-direction: column; gap: 16px; }

.entrar {
  height: var(--toque); width: 100%;
  border-radius: var(--raio-campo); border: none;
  /* ⚠️ `--acento-sobre-fundo`, e não `--escuro`. O VALOR é o mesmo (#0C181F nos dois temas)
     e o visual não muda — o que muda é o nome dizer POR QUE ele é fixo: o fundo é âmbar, e
     âmbar não troca com o tema. `--escuro` aqui parecia pigmento arbitrário e passaria a
     mesma impressão de `--claro` no campo de texto, que era defeito de verdade. */
  /* ☠️ `--sobre-ambar`, e NAO `--acento-sobre-fundo`. Medido em 23/08/2026, tema claro:
     este botao ficou ambar com texto AMBAR — 1,00:1, texto invisivel, no botao que fecha
     a captacao do proprietario. A causa: o fundo aqui e' o pigmento `--ambar`, que NAO
     inverte, e a tinta era o papel que passou a inverter com a casca ambar. */
  background: var(--ambar); color: var(--sobre-ambar);
  font-family: inherit; font-size: 16px; font-weight: 600;
  letter-spacing: -.01em; cursor: pointer;
}
.entrar:hover { filter: brightness(1.06); }
.entrar:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

/* Mesmo visual do botao, mas e' um link (navega, nao submete). */
.entrar-link {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}

/* A67: a segunda escolha de quem ja' tem sessao ("entrar com outra conta"). Vazado e com
   a tinta do texto: continuar e' o caminho comum e fica com o ambar; trocar de conta e'
   a excecao e nao pode competir com ele. */
.entrar-secundario {
  background: transparent; color: var(--texto);
  border: 1px solid currentColor;
}
.entrar-secundario:hover { filter: none; background: color-mix(in srgb, currentColor 8%, transparent); }

/* N2: a linha que diz o que o botao secundario faz. */
.nota-acao {
  margin: -6px 0 0; text-align: center;
  font-size: 13px; line-height: 1.45; color: var(--texto-fraco);
}

/* É o único caminho de quem esqueceu a senha — e media 139×18px, num dedo. */
.esqueci {
  align-self: center;
  display: inline-flex; align-items: center;
  min-height: var(--toque); padding: 0 12px;
  font-size: 14px; font-weight: 500; color: var(--acento-texto);
  text-decoration: underline; text-underline-offset: 3px;
}

.erro {
  /* ☠️ Era `#ff9a8f` + rgba(255,90,70) — a quinta cor fora da paleta, em três
     declarações. A tinta passava (9,36:1) e escondia a REPROVA: a borda a 35% de
     alpha dava 1,68:1 contra a noite — e a borda é o que DESENHA a faixa (piso 3:1,
     §1.1). Sentença completa da UX/UI em 24/08/2026, com tokens que já existiam:
     tinta 7,39:1 sobre o fundo, borda 9,73:1 — o mesmo padrão do `.acao-destrutiva`,
     que já usa a tinta como border-color. */
  margin: 0; font-size: 14px; color: var(--estado-recusada-tinta);
  background: var(--estado-recusada-fundo);
  border: 1px solid var(--estado-recusada-tinta);
  border-radius: var(--raio-campo);
  padding: 12px 14px;
}

.rodape-celular {
  display: none;
  flex-direction: column; align-items: center; gap: 8px;
  padding: 0 24px clamp(24px, 6vw, 32px);
  text-align: center;
}
.rodape-celular .fio { width: 100%; height: 1px; background: var(--fio); margin-bottom: 4px; }
.rodape-celular p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--texto-fraco); }
.rodape-celular p.razao { font-weight: 600; color: var(--texto); }
/* ☠️ ALVO DE TOQUE — o link media 134 × 14 (medição da UX/UI, `6c891de`), e a ironia
   é que este rodapé EXISTE SÓ PARA O CELULAR: era a única coisa da tela do celular
   sem tamanho de toque, numa tela em que os quatro controles do formulário obedecem
   ao `--toque` (52 no estreito).

   ⚠️ E QUAL PISO FALHOU, dito com precisão porque a diferença importa: falhou o
   **piso do projeto** (`--toque`, 44 fino / 52 toque), NÃO o mínimo da norma. O
   WCAG §2.5.8 tem exceção de espaçamento, e ela se aplica aqui — dos 5 alvos da
   tela só um é menor que 24px e nenhum vizinho cai no círculo de 24px centrado
   nele, então o link **passava** na norma (a UX/UI corrigiu a própria citação, que
   a princípio dizia o contrário). ☠️ Chamar isto de "reprova WCAG" seria afirmação
   falsa de conformidade; o conserto continua certo pelo piso que a casa escolheu,
   que é mais alto que o mínimo legal.

   ⚠️ `min-height` e NUNCA `padding` vertical: padding cresce a área sem alinhar o
   texto e o rodapé ganha altura que ninguém pediu.

   ☠️ E O `inline-flex` NÃO É O QUE IMPEDE A CAIXA DE ESTICAR — medido no navegador
   em 26/08: o computado diz `flex`, e não há outra regra competindo. O pai
   `.rodape-celular` é flex container, e a especificação **blockifica** o `display`
   de um flex item: `inline-flex` vira `flex`, sempre. Quem segura a largura em 134px
   é o `align-items: center` do PAI. ⚠️ A medição deu certo (134 × 52) pela razão
   errada, e é a régua que a casa já tem: *o valor declarado não vale se o contexto
   o desfaz* (flex-shrink, flex-basis, CommandTimeout — agora `display`).
   Fica `inline-flex` de propósito: no dia em que o pai deixar de ser flex, é o valor
   que a gente quer que passe a valer. */
.rodape-celular a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--toque);
  font-size: 11.5px; font-weight: 500; color: var(--acento-texto);
  text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .tela { grid-template-columns: 1fr; }

  .marca {
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: clamp(28px, 7vw, 40px) 24px 8px;
  }
  .marca::after { inset: -80% -40% auto -40%; height: 420px; }

  .assinatura { align-items: center; }
  .produto    { align-items: center; gap: 10px; }
  .produto h1 { font-size: clamp(34px, 11vw, 44px); text-align: center; }

  .passos { display: none; }

  .institucional { display: none; }

  .acesso { padding: 8px 24px clamp(28px, 7vw, 40px); }
  .acesso::before {
    top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px;
    background: linear-gradient(90deg,
      rgba(255, 187, 16, 0) 0%, rgba(255, 187, 16, .5) 50%, rgba(255, 187, 16, 0) 100%);
  }
  /* ⚠️ Aqui a cantoneira entra para DENTRO da caixa (left/right: 0), então o
     conteúdo precisa dos 18px de folga lateral para não passar por baixo dela. */
  .caixa { max-width: 420px; padding-block: 30px; padding-inline: 18px; }
  .caixa::before { left: 0;  width: 44px; height: 44px; }
  .caixa::after  { right: 0; width: 44px; height: 44px; }

  .rodape-celular { display: flex; }
}

@media (max-width: 900px) and (max-height: 720px) {
  .marca          { padding-top: 16px; gap: 10px; }
  .marca::after   { height: 300px; }
  .assinatura     { gap: 8px; }
  .assinatura img { width: clamp(180px, 52vw, 220px); }
  .produto        { gap: 4px; }
  .produto h1     { font-size: clamp(26px, 8vw, 32px); }
  .caixa          { padding-block: 18px; }
  .formulario     { gap: 18px; }
  .campos         { gap: 14px; }
  .acoes          { gap: 12px; }
  .rodape-celular { gap: 6px; padding-bottom: 16px; }
}

/* ── Janela baixa, em QUALQUER largura ────────────────────────────────
   O notebook comum (1366×768) sobra ~640px de altura útil depois das barras do
   navegador. É tela larga e baixa: as regras de celular não a alcançam, e as de
   desktop assumem altura folgada. Aqui a compressão é decidida só pela altura.
   O alvo de toque de 52px e o corpo de campo de 16px continuam intocados — são os
   dois números que não participam da negociação de espaço. ─────────────────── */
/* ☠️ `padding-block`, e nunca `padding` inteiro. Estas regras negociam ALTURA e
   não têm nada a dizer sobre o lado — mas `padding: 24px 0` zerava o lateral, e
   como este bloco vem DEPOIS do `@media (max-width: 900px)` na folha, com a mesma
   especificidade, ele vencia. O efeito: a partir do momento em que a cantoneira
   passa a viver DENTRO da caixa (≤900px), o espaço que a afastava do texto
   sumia — e como todo celular tem altura ≤820, isso valia em todo celular. A
   cantoneira riscava o título nas SEIS telas de acesso, 44×20px. */
@media (max-height: 820px) {
  .acesso { padding-top: clamp(16px, 3vh, 32px); padding-bottom: clamp(16px, 3vh, 32px); }
  .caixa { padding-block: 24px; }
  .formulario { gap: clamp(16px, 2.2vh, 24px); }
  .campos { gap: 14px; }
  .acoes { gap: 12px; }
}

@media (max-height: 700px) {
  .caixa { padding-block: 14px; }
  .formulario { gap: 14px; }
  .titulo-acesso h2 { font-size: clamp(19px, 1.8vw, 22px); }
}

@media (max-height: 620px) and (min-width: 901px) {
  .produto h1 { font-size: clamp(36px, 4vw, 48px); }
  .passos { gap: 10px; }
}