/* ============================================================
   wd-auth — páginas de autenticação (design de referência)
   Design system: PLATAFORMA.md (dark) — Cousine + Inter, gota.
   Accent desta família: --wd-accent = #009CFF (azul da marca).
   ============================================================ */

:root {
  --wd-display: 'Cousine', ui-monospace, 'Courier New', monospace;
  --wd-body: 'Inter', system-ui, sans-serif;

  --wd-bg: #00131F;
  --wd-surface: #002539;
  --wd-surface-2: #00304A;
  --wd-rule: rgba(170, 180, 202, .22);
  --wd-rule-dark: rgba(170, 180, 202, .16);

  --wd-text: #F1F1F1;
  --wd-text-2: #AAB4CA;
  --wd-primary: #005480;
  --wd-secondary: #009CFF;
  --wd-danger: #BE2D2D;
  --wd-success: #008000;

  --wd-accent: #009CFF;
  --wd-accent-hover: #33B1FF;
  --wd-accent-tint-10: rgba(0, 156, 255, .10);
  --wd-accent-tint-15: rgba(0, 156, 255, .15);

  --wd-r-md: 8px;
  --wd-r-lg: 12px;
  --wd-r-full: 9999px;

  --wd-s-sm: 8px;
  --wd-s-md: 12px;
  --wd-s-lg: 16px;
  --wd-s-xl: 24px;
  --wd-s-2xl: 32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--wd-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--wd-text);
  background: var(--wd-bg);
  min-height: 100vh;
  /* glow suave da marca no topo + grid de assinatura (hero) */
  background-image:
    radial-gradient(1100px 480px at 85% -10%, rgba(0, 156, 255, .10), transparent 60%),
    linear-gradient(var(--wd-rule-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--wd-rule-dark) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wd-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Shell de autenticação (split: marca | formulário) ---------- */

.auth-shell {
  display: grid;
  grid-template-columns: minmax(320px, 480px) 1fr;
  gap: var(--wd-s-2xl);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  min-height: 100vh;
  padding: var(--wd-s-2xl);
}

/* Painel de marca */
.brand-panel { display: flex; flex-direction: column; gap: var(--wd-s-xl); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wd-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .01em;
  color: var(--wd-text);
}
.wordmark .drop {
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(135deg);
  background: var(--wd-accent);
  flex: none;
}
.wordmark span { color: var(--wd-secondary); }

.brand-panel h2 {
  font-family: var(--wd-display);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  max-width: 15ch;
}

.brand-panel .lede { color: var(--wd-text-2); max-width: 42ch; }

.brand-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.brand-list li {
  display: flex; align-items: center; gap: 10px;
  color: var(--wd-text-2); font-size: 13px;
}
.brand-list li .drop {
  width: 8px; height: 8px; flex: none;
  border-radius: 50% 50% 50% 0;
  transform: rotate(135deg);
  background: var(--wd-accent);
  opacity: .8;
}
.brand-foot {
  margin-top: var(--wd-s-lg);
  font-family: var(--wd-display);
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--wd-text-2);
}

/* Cartão do formulário */
.auth-card {
  background: var(--wd-surface);
  border: 1px solid var(--wd-rule);
  border-radius: var(--wd-r-lg);
  padding: var(--wd-s-2xl);
  width: 100%;
  max-width: 420px;
  justify-self: center;
}

.micro-label {
  font-family: var(--wd-display);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wd-text-2);
  display: block;
  margin-bottom: var(--wd-s-sm);
}

.auth-card h1 {
  font-family: var(--wd-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.auth-card .sub { color: var(--wd-text-2); font-size: 13px; margin-bottom: var(--wd-s-xl); }

/* ---------- Campos ---------- */

.field { margin-bottom: var(--wd-s-lg); }
.field > label {
  display: block;
  font-family: var(--wd-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wd-text-2);
  margin-bottom: 6px;
}

.input-wrap { position: relative; }

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  font: 400 14px/1.4 var(--wd-body);
  color: var(--wd-text);
  background: var(--wd-bg);
  border: 1px solid var(--wd-rule);
  border-radius: var(--wd-r-md);
  padding: 11px 14px;
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder { color: rgba(170, 180, 202, .5); }
input:focus {
  outline: none;
  border-color: var(--wd-accent);
  box-shadow: 0 0 0 2px var(--wd-accent-tint-15);
}

/* botão olho (mostrar/ocultar senha) — visual; JS fica por conta da integração */
.peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--wd-r-md);
  color: var(--wd-text-2); cursor: pointer;
}
.peek:hover { color: var(--wd-text); background: var(--wd-surface-2); }
.peek svg { width: 18px; height: 18px; }

.hint { font-size: 11.5px; color: var(--wd-text-2); margin-top: 6px; }
.hint.error { color: var(--wd-danger); }

.field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wd-s-md); margin: 2px 0 var(--wd-s-xl);
  font-size: 12.5px;
}
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--wd-text-2); cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--wd-accent); }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13px/1 var(--wd-body);
  padding: 12px 18px;
  border-radius: var(--wd-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .06s;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wd-accent-tint-15); }

.btn--primary { background: var(--wd-accent); color: var(--wd-bg); width: 100%; }
.btn--primary:hover { background: var(--wd-accent-hover); color: var(--wd-bg); }

.btn--secondary { background: transparent; border-color: var(--wd-rule); color: var(--wd-text); }
.btn--secondary:hover { border-color: var(--wd-accent); color: var(--wd-accent); }

.btn--ghost { background: transparent; color: var(--wd-text-2); }
.btn--ghost:hover { color: var(--wd-accent); background: var(--wd-accent-tint-10); }

/* divisor "ou" */
.divider {
  display: flex; align-items: center; gap: var(--wd-s-md);
  color: var(--wd-text-2); font-size: 11px;
  margin: var(--wd-s-xl) 0;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--wd-rule-dark);
}

.auth-alt { text-align: center; font-size: 13px; color: var(--wd-text-2); }

/* ---------- Alertas (estados) ---------- */

.alert {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--wd-rule);
  border-radius: var(--wd-r-md);
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: var(--wd-s-lg);
}
.alert .drop {
  width: 8px; height: 8px; margin-top: 5px; flex: none;
  border-radius: 50% 50% 50% 0; transform: rotate(135deg);
}
.alert--error { background: rgba(190, 45, 45, .10); border-color: rgba(190, 45, 45, .35); color: #F1B4B4; }
.alert--error .drop { background: var(--wd-danger); }
.alert--ok { background: rgba(0, 128, 0, .10); border-color: rgba(0, 128, 0, .35); color: #B4E6B4; }
.alert--ok .drop { background: var(--wd-success); }

/* ---------- Página de erro (centralizada) ---------- */

.error-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--wd-s-2xl);
}
.error-card {
  background: var(--wd-surface);
  border: 1px solid var(--wd-rule);
  border-radius: var(--wd-r-lg);
  padding: 40px var(--wd-s-2xl);
  max-width: 440px;
  width: 100%;
  text-align: center;
}
.error-card .drop-big {
  width: 52px; height: 52px; margin: 0 auto var(--wd-s-xl);
  border-radius: 50% 50% 50% 0; transform: rotate(135deg);
  background: var(--wd-danger);
}
.error-card .drop-big.is-accent { background: var(--wd-accent); }
.error-card h1 { font-family: var(--wd-display); font-size: 22px; margin-bottom: 8px; }
.error-card p { color: var(--wd-text-2); font-size: 13.5px; margin-bottom: var(--wd-s-xl); }
.error-card .btn { width: 100%; }
.error-card .back {
  display: inline-block; margin-top: var(--wd-s-lg);
  font-size: 12px; color: var(--wd-text-2);
}

/* ---------- Página de conta (pós-login) ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wd-s-lg);
  padding: var(--wd-s-lg) var(--wd-s-2xl);
  border-bottom: 1px solid var(--wd-rule-dark);
  background: var(--wd-surface);
}
.topbar .who { display: flex; align-items: center; gap: var(--wd-s-md); font-size: 12.5px; color: var(--wd-text-2); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--wd-accent-tint-15); color: var(--wd-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wd-display); font-weight: 700; font-size: 13px;
}

.main { max-width: 720px; margin: 0 auto; padding: var(--wd-s-2xl); display: flex; flex-direction: column; gap: var(--wd-s-xl); }

.card {
  background: var(--wd-surface);
  border: 1px solid var(--wd-rule);
  border-radius: var(--wd-r-md);
  padding: var(--wd-s-xl);
}
.card h2 {
  font-family: var(--wd-display);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--wd-text-2); font-weight: 700;
  margin-bottom: var(--wd-s-lg);
}

.kv { display: grid; grid-template-columns: 112px 1fr; gap: 10px var(--wd-s-lg); font-size: 13.5px; }
.kv dt { color: var(--wd-text-2); font-family: var(--wd-display); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; align-self: center; }
.kv dd { color: var(--wd-text); }

.app-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wd-s-md);
  padding: 12px 0;
  border-bottom: 1px solid var(--wd-rule-dark);
}
.app-row:last-child { border-bottom: 0; }
.app-row .name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; }
.app-row .name .drop {
  width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(135deg);
  background: var(--wd-accent); opacity: .85;
}

.pill {
  font-family: var(--wd-display);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: var(--wd-r-full);
}
.pill--ok { color: #3fbf5f; background: rgba(63, 191, 95, .14); }
.pill--muted { color: var(--wd-text-2); background: rgba(170, 180, 202, .12); }

/* ---------- Estados de interação (faltavam no design — integração WEB-46) ---------- */

input:disabled { opacity: .55; cursor: not-allowed; }

.btn:disabled,
.btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Estado de carregamento do CTA: gota girando (CSS puro, sem emoji) */
.btn[aria-busy="true"] {
  position: relative;
  color: transparent;
  opacity: 1;
  cursor: progress;
}
.btn[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 13px; height: 13px;
  border: 2px solid var(--wd-bg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: wd-drop-spin .7s linear infinite;
}
@keyframes wd-drop-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation-duration: 2s; }
}

/* ---------- Responsivo: painel da marca vira topo ---------- */

@media (max-width: 860px) {
  .auth-shell {
    grid-template-columns: 1fr;
    align-content: start;
    gap: var(--wd-s-xl);
    padding: var(--wd-s-xl) var(--wd-s-lg);
  }
  .brand-panel h2 { font-size: 21px; max-width: none; }
  .brand-list { display: none; }          /* foco no formulário no mobile */
  .auth-card { max-width: none; padding: var(--wd-s-xl); }
}