/* ═══════════════════════════════════════════════════════════════════
   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);
}

/* ☠️ `pointer-events: none` nos DOIS pseudo-elementos, e não é enfeite de código.
   Pseudo-elemento é pintado DEPOIS do conteúdo, então estes dois — absolutos e
   transbordando o painel — ficam por cima de tudo para efeito de acerto. O link
   `koneximoveis.com.br` da `/entrar` estava visível, sublinhado e com ícone, e
   **não respondia ao clique**: o toque batia na `.marca`. Achado do Luciano em
   produção, medido pela UX/UI com `elementFromPoint` e controle nos dois
   sentidos (25/08/2026).

   ⚠️ Decoração que intercepta clique é a classe inteira: qualquer pseudo-elemento
   absoluto que nasça aqui precisa desta linha, ou repete o defeito. */
/* ⚠️ O `.acesso::before` entra junto por REGRA, não por sintoma: ele é 1px de
   fio e não cobre nada clicável hoje. Esta folha já produziu DOIS incidentes
   desta classe — as cantoneiras que comiam 5,2% do "Definir senha" e agora as
   manchas do painel —, e duas ocorrências é o gatilho da casa para a regra sair
   da prosa (achado 86 do Code Review). */
.marca::before, .marca::after,
.acesso::before { pointer-events: none; }

.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);
}

/* ☠️ O logotipo troca com o TEMA, não com o sistema operacional — item 5 da
   especificação do UX/UI (23/08). O gatilho é o MESMO dos papéis desta folha:
   sem `data-tema` o escuro fixo vale e só a variante branca existe na tela;
   com `data-tema="sistema"`, o claro do sistema traz a tipografia escura.
   Os dois arquivos têm o K âmbar — a identidade não muda, muda a tipografia. */
/* ⚠️ `img.`, e não só a classe: `.assinatura img` acima é 0-1-1 e vencia o
   0-1-0 da classe pura — no escuro os DOIS logotipos apareciam (pego na
   bancada, 24/08). O empate 0-1-1 resolve pela ordem, e esta regra vem depois. */
img.so-tema-claro { display: none; }
@media (prefers-color-scheme: light) {
  :root[data-tema="sistema"] img.so-tema-claro  { display: block; }
  :root[data-tema="sistema"] img.so-tema-escuro { display: none; }
}

.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);
}

.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);
}
.institucional a {
  display: flex; align-items: center; gap: 7px; width: fit-content;
  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; }

/* ☠️ Desabilitado deixa de PARECER caminho — achado do UX/UI no estado de segredo
   ilegível (25/08): a tela sabia que o código não podia passar e oferecia o âmbar
   cheio, primeiro, assim mesmo. Quem não lesse o erro digitava, falhava e concluía
   que errou o código — exatamente o que a mensagem nega. */
.entrar:disabled {
  background: var(--fio);
  color: var(--texto-fraco);
  cursor: not-allowed;
}
.entrar:disabled:hover { filter: none; }

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

/* É 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 {
  margin: 0; font-size: 14px; color: #ff9a8f;
  background: rgba(255, 90, 70, .1);
  border: 1px solid rgba(255, 90, 70, .35);
  border-radius: var(--raio-campo);
  padding: 12px 14px;
}

/* ⚠️ O aviso da recusa do antiforgery é o ÚNICO `.erro` que vive FORA do formulário —
   ele nasce na casca, acima do `@RenderBody()`, porque vale para as seis telas de
   acesso. Lá dentro quem espaça é o `gap` do `.formulario`, e por isso o `.erro` zera a
   margem; aqui a `.caixa` é bloco comum, sem gap, e sem esta linha o aviso encostaria.

   ☠️ `--esp-5` e não um número: o pino `ADividaDeValorCru_NaoCresce` recusou o `20px`
   que estava aqui (49 espaçamentos crus contra um teto de 48), e ele está certo. 24px é
   também o PISO do `gap` do `.formulario` logo acima — o aviso entra no mesmo ritmo dos
   blocos do formulário em vez de inventar um respiro só dele. */
.aviso-recusa { margin-bottom: var(--esp-5); }

.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); }
.rodape-celular a {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; color: var(--acento-texto);
  text-decoration: underline; text-underline-offset: 3px;
  /* ☠️ ALVO DE TOQUE, e resolve com ÁREA — nunca aumentando a letra: o link
     media ~14px de altura contra o piso de `--toque`, e este é o rodapé do
     celular, onde só se chega com o dedo (achado da UX/UI, 25/08/2026).
     `min-height` + `align-items: center` mantêm o texto exatamente do mesmo
     tamanho e no mesmo lugar; o que cresce é o que responde. */
  min-height: var(--toque);
}

@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; }
}

/* ── TELA PÚBLICA em notebook: duas FASES, não duas colunas — item 4 da
   especificação do UX/UI (23/08), cobrado de novo pelo Luciano em 24/08.
   A coluna de marca vendia a Konex a quem chega por link, mas quem chega já
   foi convencido pelo corretor — e enquanto a marca for coluna, o formulário
   é centrado no que SOBRA (desvio de 342px do centro da janela, medido).
   A marca vira faixa de topo com o logotipo à esquerda e o formulário centra
   NA JANELA, em coluna de min(560px, 92vw) — a régua de leitura volta a
   ~65 caracteres. O gatilho é o mesmo do tema: só `data-tema="sistema"`,
   então login, convite e recuperação (escuro fixo, duas colunas) não mudam.
   Critério de aceite do UX/UI: desvio do centro da janela ≤16px. ────────── */
@media (min-width: 901px) {
  :root[data-tema="sistema"] .tela { grid-template-columns: 1fr; }

  :root[data-tema="sistema"] .marca {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 120px;
    padding-block: var(--esp-4);
    gap: var(--esp-5);
  }
  :root[data-tema="sistema"] .marca::after { inset: -80% -40% auto -40%; height: 300px; }

  :root[data-tema="sistema"] .assinatura img { width: clamp(180px, 16vw, 220px); }
  :root[data-tema="sistema"] .produto h1 { font-size: clamp(28px, 3vw, 40px); }
  :root[data-tema="sistema"] .passos,
  :root[data-tema="sistema"] .institucional { display: none; }

  /* O fio âmbar deixa de ser a divisa vertical entre colunas e vira a divisa
     horizontal entre a faixa e o formulário — o mesmo desenho do celular. */
  :root[data-tema="sistema"] .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%);
  }
  :root[data-tema="sistema"] .caixa { max-width: min(560px, 92vw); }

  /* A razão social morava na coluna que deixou de existir; o rodapé do
     celular já carrega a mesma informação e assume também aqui. */
  :root[data-tema="sistema"] .rodape-celular { display: flex; }
}