/* O que faz: veste a tela de Entrar; o modal (`<dialog>`) e a mesma tela montada inline.
   Quem chama: toda página que carrega `componentes/entrar.js` (a área de conta a monta inline).
   O que devolve: só regras `.en-*`; tudo em token, px só da escala 12/14/16/20/28/40.
   ---------------------------------------------------------------------------
   Companheira de `entrar.js`. O `<dialog>` vem com estilo próprio do navegador
   (borda preta, fundo branco, centralizado): aqui ele é zerado e refeito com os
   tokens, para atravessar os dois temas sem uma linha a mais. O botão é o do
   sistema (`nucleo/botao.css`); esta folha só o dispõe. */

.en-dialogo {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--texto);
  max-width: min(100vw - var(--e-6), 480px);
  width: 100%;
  margin: auto;
}
.en-dialogo::backdrop {
  /* o fundo da página, quase opaco: escurece no escuro e esmaece no claro */
  background: color-mix(in srgb, var(--fundo) 72%, transparent);
  backdrop-filter: blur(2px);
}
.en-caixa {
  position: relative;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-3);
  padding: var(--e-6) var(--e-5) var(--e-5);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--e-6));
  overflow: auto;
}

/* O X: alvo de toque no piso, no canto, sem competir com o título. */
.en-fechar {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  width: var(--toque-min);
  height: var(--toque-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--texto-3);
  cursor: pointer;
}
.en-fechar:hover { color: var(--texto); background: var(--fundo-3); }

/* O CABEÇALHO, SEM O ÍCONE E SEM O CENTRO (06/09/2026). Tinha uma porta de 40
   desenhada acima do título e tudo centralizado. Nenhuma das três telas SaaS
   lidas (Linear, Vercel, Notion) centraliza o título do formulário nem põe um
   desenho nosso acima dele: o desenho que a pessoa procura é a MARCA DO
   PROVEDOR, dentro do botão. Título à esquerda, na linha-guia do resto do
   modal (design-system.md §L4). */
.en-cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-right: var(--toque-min);   /* o X mora nesse canto */
}

/* A LOGO DO PRODUTO, ACIMA DO TÍTULO (06/09/2026, decisão do dono).
   -------------------------------------------------------------------------
   Ela não é um desenho novo: `entrar.js` copia para cá a marcação do
   `.rhc-logo` que a casca já pintou na página, e quem veste o prisma continua
   sendo `nucleo/rodape.css`. O que esta folha faz é só o porte e o respiro,
   porque o tamanho do cabeçalho (47,5 × 40) é grande demais para uma caixa de
   modal: aqui a marca fica na régua do título.

   Vazia, ela desaparece (`:empty`), e o modal começa direto no título. É o
   que acontece onde não há casca. */
.en-logo { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-1); }
.en-logo:empty { display: none; }
.en-logo svg { width: 33px; height: 28px; flex: none; display: block; }
.en-logo .rhc-wordmark { font-size: 16px; line-height: 1; }
.en-titulo {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 28px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--texto); margin: 0;
}
.en-motivo {
  font-size: 16px; line-height: 1.5; color: var(--texto-2);
  margin: 0; max-width: 40ch;
}

/* O ritmo do modal é o do formulário (design-system.md §10), peça a peça, e
   não um `gap` da caixa: cabeça → estado → provedores a `--ritmo-paragrafo`
   (grupo → grupo). Inline, na área de conta, o estado abre o cartão e não
   leva margem. */
.en-caixa > .en-estado,
.en-caixa > .en-provedores { margin-top: var(--ritmo-paragrafo); }

/* O estado: uma linha com ícone, nunca só a cor (RD-03).
   O `[hidden]` PRECISA estar escrito aqui: o `display:none` do navegador para
   `[hidden]` é uma regra de folha de usuário, e qualquer `display` declarado
   por nós a vence. Sem esta linha o atributo não esconde nada, e a caixa vazia
   ficava desenhada entre o título e o botão do provedor, foi assim que ela
   apareceu na `/nuvem/` durante a conferência. */
.en-estado[hidden] { display: none; }
.en-estado {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: 14px; line-height: 1.5;
  color: var(--texto-2);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--secundaria) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--secundaria) 26%, transparent);
}
.en-estado small { display: block; font-size: 12px; color: var(--texto-3); }
.en-estado-ic { flex: none; display: inline-flex; margin-top: 2px; color: var(--secundaria); }
.en-estado-espera .en-estado-ic { animation: en-girar 1.4s linear infinite; }
.en-estado-erro {
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  color: var(--texto);
}
.en-estado-erro .en-estado-ic { color: var(--acento); }
.en-estado-ok {
  background: color-mix(in srgb, var(--sucesso) 12%, transparent);
  border-color: color-mix(in srgb, var(--sucesso) 40%, transparent);
  color: var(--texto);
}
.en-estado-ok .en-estado-ic { color: var(--sucesso); }
@keyframes en-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .en-estado-espera .en-estado-ic { animation: none; } }

/* OS BOTÕES DE PROVEDOR: a superfície é a do guia de cada marca (06/09/2026).
   -------------------------------------------------------------------------
   Eram um retângulo `--texto` sobre `--fundo`: no tema escuro, um botão BRANCO
   com um traço branco dentro. Foi exatamente o que o dono viu e chamou de
   "botão branco genérico onde devia estar o botão do Google".

   O guia do Google publica DUAS superfícies para o botão, e uma por tema é a
   forma correta de usar as duas: a clara (`#FFFFFF` com borda `#747775` e texto
   `#1F1F1F`) e a escura (`#131314` com borda `#8E918F` e texto `#E3E3E3`). A
   marca em si nunca muda de cor, em nenhuma das duas. A Microsoft usa a mesma
   construção, e por isso os dois botões dividem a regra: dois botões de entrada
   lado a lado com superfícies diferentes leriam como dois pesos.

   Estas cores são as ÚNICAS literais desta folha, e é de propósito: token da
   casa aqui reescreveria a marca de outra empresa a cada ajuste da nossa
   paleta. O `color-scheme` do documento continua mandando em todo o resto. */
.en-provedores { display: grid; gap: var(--e-3); }
.en-provedores:empty { display: none; }
/* `.en-provedores >` NÃO é enfeite de seletor: `/conta/` escreve um `.btn`
   próprio, de mesma especificidade e mais abaixo na cascata, que zerava a borda
   e baixava o botão de 58 para 44. Medido na conferência: o mesmo botão saía
   com dois portes e duas bordas em duas páginas do mesmo site. Este degrau a
   mais é o que faz a peça do sistema mandar na página. */
.en-provedores > .en-provedor {
  width: 100%;
  min-height: var(--toque-acao);
  gap: var(--e-3);
  margin: 0;
  background: #131314;
  color: #E3E3E3;
  border: 1px solid #8E918F;
  font-weight: 500;
}
[data-tema="claro"] .en-provedores > .en-provedor { background: #FFFFFF; color: #1F1F1F; border-color: #747775; }
.en-provedores > .en-provedor:hover { filter: brightness(1.35); }
[data-tema="claro"] .en-provedores > .en-provedor:hover { filter: brightness(.96); }
/* A área livre em volta da marca é parte do desenho dela: 18 de marca dentro
   de uma caixa de 24, como os dois guias pedem. */
.en-provedores > .en-provedor .en-marca { flex: none; width: 18px; height: 18px; margin: 3px; }

/* O PROVEDOR QUE AINDA NÃO ESTÁ LIGADO (06/09/2026). O botão continua no lugar,
   com a marca de sempre: tirá-lo faria a pessoa de conta corporativa concluir
   que o produto não a aceita. O que muda é o peso: superfície esmaecida e um
   selo de texto, nunca só a opacidade (RD-03: a diferença precisa ter palavra).
   Ele NÃO é `disabled`: botão desabilitado não recebe clique e não teria como
   explicar por que está assim. Clicar mostra a frase. */
/* A DIFERENCA E DE SUPERFICIE, NUNCA DE OPACIDADE NO TEXTO (08/09/2026).
   A primeira escrita esmaecia o botao inteiro com `opacity: .62`, e o selo
   trazia mais `.85` por cima. As duas se compoem: no tema claro o texto do
   selo saia a #898989 sobre branco, 3,49:1, reprovado no axe (WCAG 2.1 AA
   pede 4,5:1 para texto pequeno). Opacidade apaga o texto junto com a
   superficie, e o texto e justamente a parte que precisa continuar legivel.
   Agora o esmaecido e feito com token de fundo e de texto, medidos: no claro
   #334155 sobre #EEF2F7, no escuro #B9C4D6 sobre #1B2340. */
.en-provedores > .en-provedor[data-ligado="nao"] {
  background: var(--fundo-3);
  color: var(--texto-2);
  border-style: dashed;
}
[data-tema="claro"] .en-provedores > .en-provedor[data-ligado="nao"] {
  background: var(--fundo-3);
  color: var(--texto-2);
  border-color: #94A3B8;
}
.en-provedores > .en-provedor[data-ligado="nao"]:hover { filter: none; }
.en-selo {
  margin-left: auto;
  font-size: 12px; line-height: 1.4; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px var(--e-2);
  border-radius: var(--r-total);
  border: 1px solid currentColor;
}

/* MANTER CONECTADO (06/09/2026). A caixa fica logo abaixo dos provedores,
   porque é a escolha que vale para qualquer caminho de entrada. Rótulo e ajuda
   são os do formulário do sistema; o que é desta folha é pôr a caixa e o texto
   na mesma linha, com o alvo de toque inteiro clicável. */
.en-manter { margin-top: var(--ritmo-paragrafo); }
.en-manter-linha { display: flex; align-items: center; gap: var(--e-2); cursor: pointer; min-height: var(--toque-acao); }
.en-manter-linha input { width: 18px; height: 18px; flex: none; accent-color: var(--texto); }
.en-manter .campo-ajuda { margin-top: var(--ritmo-rotulo); }

/* NÃO HÁ MAIS "OUTRAS FORMAS DE ENTRAR". O `<details>` com o link por e-mail
   saiu da tela em 06/09/2026 (ver `entrar.js`), e com ele saíram daqui as
   regras `.en-outras`, `.en-email` e `.en-linha`. Folha que veste o que não
   existe mais é a próxima divergência esperando para acontecer. */

/* A palavra "Fechar" so existe no porte de telefone; no modal de mesa o X
   sozinho basta e o `aria-label` continua dizendo o mesmo a quem ouve. Ela e
   declarada AQUI, antes do bloco de telefone, porque as duas regras tem a
   mesma forca: quem vier depois na folha vence, e quem tem de vencer e o
   porte. */
.en-fechar-rotulo { display: none; }

/* ======================================================================
   EM TELEFONE, A TELA DE ENTRAR NAO E UMA SOBREPOSICAO: E A TELA (07/09/2026)
   ======================================================================
   O defeito, medido: num visivel de 812 a caixa ocupava a maior parte da
   altura. Nessa proporcao a sobreposicao perde a razao de existir. Uma
   sobreposicao serve para manter o contexto de tras a vista, ancorando a
   pessoa no que ela estava fazendo; quando ela cobre quase tudo, o que fica
   atras e uma tarja borrada que nao ancora nada, e o fundo vira uma area
   enorme onde um toque acidental descarta a tarefa.

   O QUE OS SaaS FAZEM EM TELEFONE, lido no navegador em 07/09 a 375 de
   largura, nas paginas de entrar de cada um:

   | Produto | A tela de entrar em telefone |
   |---|---|
   | Linear  | superficie inteira, opaca, de borda a borda; sem fundo, sem X, nada a tocar por engano |
   | Notion  | superficie inteira, opaca; marca no topo, sete botoes de provedor empilhados |
   | Stripe  | superficie inteira com barra de topo propria; "Remember me" acima do botao principal |
   | Shopify | superficie inteira, com o cartao ocupando toda a largura util |

   Os quatro concordam no que importa aqui, e nenhum deles usa sobreposicao
   em telefone: a entrada e uma SUPERFICIE INTEIRA, opaca, sem area de fundo
   clicavel. E o padrao de folha inteira (full-screen sheet) que o Material
   e as diretrizes da Apple descrevem para tarefa focada em tela estreita.

   Adotado aqui: ate 600 de largura o mesmo <dialog> deixa de ser caixa
   flutuante e passa a ocupar a tela toda. O que muda com isso:

   - nao ha mais fundo para tocar: o descarte acidental deixa de existir,
     e `entrar.js` desliga o fechar-no-fundo neste porte;
   - fechar vira uma barra de topo com alvo de 44 e a palavra "Fechar" ao
     lado do X: obvio de achar, e no canto, longe do polegar em repouso;
   - a altura acompanha o `visualViewport` (a variavel `--en-altura`, escrita
     por `entrar.js`): com o teclado aberto a folha encolhe em vez de ficar
     por baixo dele, e o conteudo rola, entao o botao principal continua
     alcancavel;
   - a barra de topo e a base respeitam a area segura do aparelho.

   Em 601 ou mais nada disso vale: a caixa flutuante volta inteira, porque
   la a sobreposicao ainda mostra o contexto de tras, que e para o que ela
   serve. */

/* Enquanto a folha esta aberta a pagina de tras nao rola: em telefone o
   `<dialog>` modal do navegador impede o clique, mas nao a rolagem por toque,
   e ver o fundo deslizar sob uma tela cheia le como falha de desenho. */
@media (max-width: 600px) {
  html.en-aberto, html.en-aberto body { overflow: hidden; }
}

@media (max-width: 600px) {
  .en-dialogo {
    max-width: none;
    width: 100%;
    height: var(--en-altura, 100dvh);
    max-height: none;
    margin: 0;
    /* o `<dialog>` modal ja e fixo e ancorado no topo esquerdo pelo navegador;
       zerar a margem e o que o faz encostar nas quatro bordas */
  }
  /* O fundo some porque nao ha mais fundo: a folha e opaca e cobre a tela.
     Ele continua declarado, opaco, para o instante da animacao de entrada e
     para qualquer aparelho onde a folha nao chegue exatamente a borda. */
  .en-dialogo::backdrop { background: var(--fundo); backdrop-filter: none; }

  .en-caixa {
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--fundo);
    padding: 0 var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom, 0px));
  }

  /* A BARRA DE TOPO. O X deixa de flutuar sobre o titulo e vira um item de
     barra, com a palavra ao lado: um icone sozinho e reconhecivel para quem
     ja sabe, e a palavra e para quem nao sabe. Ela gruda no topo porque a
     folha rola, e fechar nao pode depender de rolar de volta. */
  .en-fechar {
    position: sticky;
    top: 0;
    width: auto;
    min-width: var(--toque-min);
    height: var(--toque-min);
    margin: 0 calc(var(--e-4) * -1) var(--e-2);
    padding: 0 var(--e-4);
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: content-box;
    justify-content: flex-start;
    gap: var(--e-2);
    align-self: stretch;
    background: var(--fundo);
    color: var(--texto-2);
    font-size: 16px;
    z-index: 1;
  }
  .en-fechar-rotulo { display: inline; }
  .en-cabeca { padding-right: 0; }
  .en-titulo { font-size: 24px; }

  /* Os provedores sao o que a pessoa veio fazer: ficam logo abaixo do titulo,
     e o que sobra de altura fica embaixo, nunca espremendo os botoes. */
  .en-manter { margin-bottom: auto; }
}

/* A folha ENTRA subindo, que e o gesto que ela desfaz ao sair. Curta, e a
   primeira coisa que `prefers-reduced-motion` desliga. */
@media (max-width: 600px) {
  .en-dialogo[open] { animation: en-subir .22s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .en-dialogo[open] { animation: none; }
}
@keyframes en-subir {
  from { transform: translateY(16px); opacity: .6; }
  to { transform: none; opacity: 1; }
}