/* Perfil App Platform — telas de autenticação
 *
 * O controle de tema (.theme-mini) NÃO mora aqui: está em components.css,
 * porque o shell autenticado também o usa e duas cópias divergem no primeiro
 * ajuste.
 *
 * Login, recuperação de senha, troca obrigatória e primeiro acesso.
 *
 * POR QUE ESTE ARQUIVO EXISTE
 * O desenho destas telas foi aprovado no estudo 0.3 (variação 0.3), mas ficou
 * como 77 linhas de CSS inline DENTRO do protótipo `login.html` e nunca subiu
 * ao pacote. Consequência em cadeia:
 *   1. toda aplicação reimplementou o próprio login;
 *   2. o gate de renderização não via o problema, porque autenticava ANTES de
 *      medir — o Molde saiu COMPLIANT com a tela de login inteira fora
 *      do padrão;
 *   3. ninguém percebeu, porque hash de arquivo gerenciado conferia.
 * A partir do v2, tela de autenticação é componente do pacote como qualquer
 * outro: vem daqui, confere por hash e é medida pelo gate.
 *
 * TOQUE E SAFARI (padrão apple-friendly do estudo 0.3)
 *   - campos com fonte >= 16px: abaixo disso o iOS dá zoom ao focar e a tela
 *     "pula" — o efeito mais reclamado em login no iPhone;
 *   - hover apenas em @media (hover: hover), senão o estado fica preso depois
 *     do toque;
 *   - alvos de toque >= 44px (mínimo do HIG);
 *   - safe-area respeitada, para notch e barra inferior não cobrirem conteúdo.
 *
 * PONTOS DE EXTENSÃO — o pacote consome, a app fornece. Não é redeclaração de
 * token canônico:
 *   --watermark-opacity : intensidade da marca d'água (o shell.css usa a mesma)
 *   --auth-watermark    : url() do símbolo; o caminho do asset é relativo à
 *                         app, e o pacote não pode presumi-lo.
 *
 * VOCABULÁRIO — .auth-link e .theme-op existem para que o elemento carregue a
 * própria classe. O CSS já os estilizava por descendência (.auth-links button),
 * mas o gate de renderização mede a CLASSE do elemento: sem ela, um botão
 * corretamente estilizado é reportado como "nativo sem classe canônica".
 * Vocabulário explícito serve à pessoa que lê o markup e à régua que o mede.
 *
 * TEMA — [data-theme="system"] é ESTAMPADO pelo theme.js deste pacote, com os
 * três valores possíveis. As regras aqui seguem o mesmo padrão de .brand-mark
 * em shell.css. Não confundir com a convenção de páginas onde "sistema" é a
 * ausência do atributo: no pacote Perfil ele existe e é escrito.
 */

.auth-page {
min-height: 100vh; min-height: 100dvh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: calc(var(--sp-6) + env(safe-area-inset-top)) var(--sp-4)
         calc(var(--sp-6) + env(safe-area-inset-bottom));
position: relative;
background: var(--surface-shell);
}
.auth-page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: center;
  background-size: 720px 720px; opacity: var(--watermark-opacity);
  /* Marca d'agua: simbolo "P" oficial, sem redesenho (PP-BR-001) */
  background-image: var(--auth-watermark, none);
}
.auth {
  width: min(408px, 100%);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  position: relative; z-index: 1;
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
/* Simbolo "P" oficial — sem redesenho e sem alteracao de cor (PP-BR-001) */
.auth-mark {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; overflow: hidden;
}
.auth-mark img { width: 100%; height: 100%; object-fit: contain; }
[data-theme="dark"] .auth-mark { background: #FFFFFF; padding: 3px; }
@media (prefers-color-scheme: dark) {
  /* Mesmo padrão de .brand-mark no shell.css: o theme.js DO PACOTE estampa os
     três valores de data-theme, inclusive "system". Não é a convenção de
     páginas onde "sistema" é a ausência do atributo — aqui ele é estampado. */
  [data-theme="system"] .auth-mark { background: #FFFFFF; padding: 3px; }
}
.auth-name { font-size: var(--fs-17); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.auth-sub { font-size: var(--fs-12); color: var(--text-2); }
.auth h1 { font-size: var(--fs-15); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-1); }
.auth .lead { font-size: var(--fs-13); color: var(--text-2); margin: 0 0 var(--sp-5); }
.auth .field + .field { margin-top: var(--sp-4); }
.auth .btn-block { margin-top: var(--sp-5); }
.auth-sep {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  color: var(--text-3); font-size: var(--fs-12);
}
.auth-sep::before, .auth-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth-links { display: flex; justify-content: center; margin-top: var(--sp-4); }
.auth .input { font-size: max(16px, var(--fs-14)); min-height: 44px; }
.auth-links button, .auth-links a {
background: none; border: 0; color: var(--accent);
font-size: var(--fs-13); cursor: pointer;
padding: var(--sp-2) var(--sp-3); min-height: 44px;
}
@media (hover: hover) {
.auth-link:hover, .auth-links button:hover, .auth-links a:hover { color: var(--accent-hover); }
}
.auth-foot {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  justify-content: space-between;
}
.restrito { display: flex; align-items: center; gap: 6px; font-size: var(--fs-11); color: var(--text-3); }
.restrito .ico { width: 13px; height: 13px; }
.theme-op,
.theme-op + .theme-op,
.theme-op[aria-pressed="true"],
.page-foot {
  margin-top: var(--sp-5); font-size: var(--fs-11); color: var(--text-3);
  text-align: center; position: relative; z-index: 1; line-height: var(--lh-normal);
}
.pw-rules { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: 5px; }
.pw-rules li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-11); color: var(--text-3); }
.pw-rules li.ok { color: var(--success); }
.pw-rules .ico { width: 13px; height: 13px; flex: 0 0 13px; }
.step-mark { display: flex; gap: 5px; justify-content: center; margin-bottom: var(--sp-5); }
.step-mark i { width: 22px; height: 3px; border-radius: var(--r-pill); background: var(--border-strong); display: block; }
.step-mark i.on { background: var(--accent); }
@media (max-width: 480px) { .auth { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-md); } }

/* Sem !important: a especificidade do seletor composto já vence, e a regra do
   pacote é não usar !important em lugar nenhum. */
@media (prefers-reduced-motion: reduce) {
  .auth-page .auth, .auth-page .auth * { transition: none; animation: none; }
}