/* Tela Entrar (M7; DESIGN 5, linha "Tela Entrar", e 7; FSD 10.3). Página pública: não carrega o app.css, então traz
   só a base e os componentes que usa, com os mesmos tokens. Sem animação de entrada; só as transições de hover, foco e
   toque dos controles, que o movimento reduzido torna secas (tokens). */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--studio-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Exceção à casca do app (DESIGN 7): quando o cartão não cabe na altura, a página rola na vertical, nunca na horizontal. */
body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--studio-bg);
  color: var(--label);
  font-family: var(--font-ui);
}
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
h1, p { margin: 0; }

.icon {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* Foco visível em duas cores (técnica C40, DESIGN 5 e 7), como no app. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}
:focus:not(:focus-visible) { outline: none; }
@media (prefers-contrast: more) {
  :focus-visible { outline-width: 4px; }
}

/* ---------- Página e cartão ---------- */
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding:
    max(var(--space-7), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(var(--space-7), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}
.login__card {
  width: 100%;
  padding: var(--space-7);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--shadow-3), var(--card-rim);
  text-align: center;
}
@media (min-width: 40rem) {
  .login__card { width: min(var(--card-w), 100%); padding: var(--space-8); }
}
.login__mark { display: block; width: 48px; height: 48px; margin: 0 auto; }
.login__title {
  margin-top: var(--space-5);
  font: 700 var(--text-title-2) / var(--lh-title-2) var(--font-ui);
  color: var(--label);
}
.login__desc {
  margin-top: var(--space-2);
  font: 400 var(--text-subheadline) / var(--lh-subheadline) var(--font-ui);
  color: var(--label-secondary);
}
.login__form { margin-top: var(--space-7); text-align: start; }
.login__note {
  margin-top: var(--space-5);
  font: 400 var(--text-footnote) / var(--lh-footnote) var(--font-ui);
  color: var(--label-secondary);
}

/* ---------- Campos ---------- */
.field + .field { margin-top: var(--space-5); }
.field__label {
  display: block;
  margin-bottom: var(--space-3);
  font: 600 var(--text-subheadline) / var(--lh-subheadline) var(--font-ui);
  color: var(--label);
}
.text-field {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 var(--space-5);
  border: 1px solid var(--separator-strong);
  border-radius: var(--radius-m);
  background: var(--card-bg-2);
  color: var(--label);
  /* 17 px: abaixo de 16, o Safari do iPhone amplia a página ao focar (FSD 10.3). */
  font: 400 var(--text-body) / normal var(--font-ui);
  scroll-margin-block: var(--space-7);
  transition: border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .text-field:hover { border-color: var(--label-tertiary); }
}
.text-field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.text-field[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 5px var(--focus-halo); }
@media (prefers-contrast: more) {
  .text-field { border-width: 2px; }
}

.pass-row { position: relative; }
.pass-row .text-field { padding-inline-end: 48px; }

/* ---------- Botões ---------- */
:is(.icon-btn, .text-btn) { transition: transform var(--dur-spring-snappy) var(--ease-spring); }
:is(.icon-btn, .text-btn):not([aria-disabled="true"]):active { transform: scale(var(--press-scale)); transition-duration: 0s; }

.icon-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--label-secondary);
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  background: transparent;
  transition: background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover::before { background: var(--fill-1); }
}
.icon-btn:active::before { background: var(--fill-1); }
/* "Mostrar senha" dentro do campo, encostado à direita (DESIGN 5): o estado pela forma do ícone, nunca só pela cor. */
#btn-show-pass { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; }
#btn-show-pass[aria-pressed="false"] .icon--eye-off,
#btn-show-pass[aria-pressed="true"] .icon--eye { display: none; }

.text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: var(--target);
  min-height: var(--target);
  padding: 0 var(--space-5);
  border: var(--hairline);
  border-radius: var(--radius-m);
  background: var(--card-bg-2);
  color: var(--accent);
  font: 600 var(--text-headline) / var(--lh-headline) var(--font-ui);
}
.text-btn--primary { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .text-btn--primary:not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--accent) 92%, var(--label)); }
}
.text-btn--primary:not([aria-disabled="true"]):active { background: color-mix(in srgb, var(--accent) 92%, var(--label)); }
.text-btn--block { display: flex; width: 100%; min-height: 48px; }
.text-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
#btn-login { margin-top: var(--space-5); scroll-margin-block: var(--space-7); }

/* ---------- Erro do formulário ---------- */
/* Sempre no documento (role=alert); sem erro, não ocupa espaço (o texto vazio e o ícone hidden). */
.login__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font: 400 var(--text-subheadline) / var(--lh-subheadline) var(--font-ui);
  color: var(--danger);
}
.login__error:has(#login-error-text:not(:empty)) { margin-top: var(--space-5); }
.login__error .icon { width: 20px; height: 20px; }

/* ---------- Cores forçadas (DESIGN 5) ---------- */
@media (forced-colors: active) {
  .login__card { border: 1px solid CanvasText; }
  .text-field { background: Field; color: FieldText; border-color: CanvasText; }
  .text-field[aria-invalid="true"] { border: 2px solid Highlight; }
  .icon-btn { color: ButtonText; }
  #btn-show-pass[aria-pressed="true"] { outline: 2px solid Highlight; }
  .login__error { color: CanvasText; }
  .text-btn--primary,
  .text-btn--primary:not([aria-disabled="true"]):is(:hover, :active) { forced-color-adjust: none; background: LinkText; color: Canvas; -webkit-text-fill-color: Canvas; }
}