/* Lucian UX/UI Prompt #039 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#039 */
/* Abas Entrar / Criar conta: a pílula escura desliza até a aba e o conteúdo entra linha por linha pelo lado
   para onde se moveu. Tokens --ux-* apontam para as variáveis de tema do Ervo (claro e escuro). */

.u039 {
  --ux-surface: var(--cartao);
  --ux-ink: var(--texto);
  --ux-ink-2: var(--suave);
  --ux-page: var(--bg);
  --ux-line: var(--borda-suave);
  --ux-accent: var(--primaria);
  --ux-shadow-strong: rgba(16, 40, 26, .3);
  --ux-ease: cubic-bezier(.2, .8, .2, 1);
  --ux-spring: cubic-bezier(.34, 1.45, .64, 1);
}
:root[data-tema="escuro"] .u039 { --ux-shadow-strong: rgba(0, 0, 0, .72); }

.u039, .u039 *, .u039 *::before, .u039 *::after { box-sizing: border-box; }
.u039 { -webkit-font-smoothing: antialiased; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; }
:where(.u039) button { font: inherit; cursor: pointer; }
.u039[hidden] { display: none !important; }

.u039-tabs { position: relative; display: flex; padding: 5px; border-radius: 999px; background: var(--ux-surface); box-shadow: 0 0 0 1px var(--ux-line); align-self: stretch; }
.u039-pill { position: absolute; left: 0; top: 5px; bottom: 5px; width: var(--w, 80px); border-radius: 999px; background: var(--ux-ink); transform: translateX(var(--x, 5px)); box-shadow: 0 8px 16px -10px var(--ux-shadow-strong); transition: transform .5s var(--ux-spring), width .5s var(--ux-spring); }
.u039-tab { position: relative; flex: 1; height: 46px; border: 0; padding: 0; border-radius: 999px; background: none; font-size: 16px; font-weight: 680; color: var(--ux-ink-2); white-space: nowrap; transition: color .35s var(--ux-ease); }
.u039-tab[aria-selected="true"] { color: var(--ux-page); }
.u039-tab:focus-visible { outline: 2px solid var(--ux-accent); outline-offset: 2px; }

/* painéis: o que sai e o que entra ocupam o mesmo lugar durante a troca */
.u039-panel { display: grid; overflow: clip; overflow-clip-margin: 36px; }
.u039-panel > * { grid-area: 1 / 1; min-width: 0; }
.u039-linha { transition: transform .55s var(--ux-spring), opacity .35s var(--ux-ease); }
.u039-panel .entrar-form { animation: none; }  /* a entrada agora é a deste componente */

@media (prefers-reduced-motion: reduce) {
  .u039, .u039 *, .u039-linha { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

/* abas, cartão de login e cadastro na mesma coluna, com a mesma largura (nada fora de esquadro) */
.entrar-cartao:has(> .u039-tabs) { justify-content: flex-start; padding-top: clamp(32px, 9vh, 96px); }
.entrar-cartao > .u039-tabs, .entrar-cartao > .u039-panel { width: 100%; max-width: 400px; align-self: center; }
/* durante a troca os dois painéis ficam presos no topo: nada sobe nem desce enquanto um sai e o outro entra */
.u039-panel > * { align-self: start; justify-self: stretch; }
.u039-panel > .u062 { width: 100%; }
/* aviso "Senha nova salva" (entrar-senha.js) entra acima do cartão, na própria linha */
.u039-panel > * { grid-area: 2 / 1; }
.u039-panel > .aviso-sucesso { grid-area: 1 / 1; margin: 0 0 12px; }
/* telas de recuperação de senha alinhadas com as abas e o cartão */
.entrar-cartao:has(> .u039-tabs) > .entrar-form { width: 100%; max-width: 400px; align-self: center; }