/* Identidade visual da Área do Associado — Gênesis */
:root {
  --brand-navy: #1b3f79;
  --brand-navy-dark: #122d59;
  --brand-sky: #47b4e7;
  --brand-sky-soft: #dff3fc;
  --brand-surface: #f3f8fc;

  /* Compatibilidade com os nomes usados nas telas migradas. */
  --yellow: var(--brand-sky);
  --yellow-2: #2998ce;
  --yellow-soft: var(--brand-sky-soft);
  --yellow-cream: #eef8fd;
  --ink: var(--brand-navy);
  --ink-2: #294b7f;
  --ink-3: #526987;
  --gray: #6b7d94;
  --gray-2: #91a0b3;
  --line: #dbe6f0;
  --line-soft: #eaf1f7;
  --cream: var(--brand-surface);
  --cream-2: #e7f1f8;
  --shadow-sm: 0 1px 2px rgba(27, 63, 121, .05);
  --shadow: 0 12px 30px rgba(27, 63, 121, .09);
  --shadow-lg: 0 28px 60px rgba(27, 63, 121, .16);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(71, 180, 231, .12), transparent 28rem),
    var(--cream);
}

.aa-nav {
  box-shadow: 0 4px 24px rgba(27, 63, 121, .06);
}

.aa-nav-logo,
.login-form-wrap .logo {
  display: flex;
  align-items: center;
}

.aa-nav-logo img {
  display: block;
  width: auto;
  height: 38px;
}

.login-form-wrap .logo img {
  display: block;
  width: auto;
  height: 52px;
}

.eyebrow,
.page-eyebrow,
.sec-tag {
  color: var(--brand-navy);
}

.eyebrow::before {
  background: var(--brand-sky);
}

.aa-avatar,
.aa-card-ico {
  color: var(--brand-navy);
  background: linear-gradient(145deg, #cbeeff, var(--brand-sky));
  box-shadow: inset 0 0 0 1px rgba(27, 63, 121, .08);
}

.aa-card,
.boletos-card,
.ano-bar,
.toc-card,
.manual-section {
  box-shadow: var(--shadow-sm);
}

.aa-card,
.manual-section {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.aa-card:hover {
  border-color: rgba(71, 180, 231, .55);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.aa-card-help {
  background: linear-gradient(145deg, var(--brand-navy), var(--brand-navy-dark));
  border-color: var(--brand-navy);
}

.aa-card-help .aa-card-ico {
  color: #fff;
  background: #25d366;
  box-shadow: 0 8px 20px rgba(37, 211, 102, .24);
}

.aa-card-help .aa-link {
  color: #7bd1f6;
}

.ano-btn.active,
.btn-pagar,
.submit,
.manual-table thead th,
.svc-badge {
  background: var(--brand-navy);
}

.ano-btn.active:hover,
.btn-pagar:hover,
.submit:hover {
  background: var(--brand-navy-dark);
}

.login-brand {
  background:
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, .16), transparent 18rem),
    linear-gradient(145deg, var(--brand-navy) 0%, #245e9c 58%, var(--brand-sky) 140%);
  color: #fff;
}

.login-brand .back {
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .25);
}

.login-brand .back:hover {
  color: var(--brand-navy);
  background: #fff;
}

.login-brand-body .eyebrow,
.login-brand-body h1 {
  color: #fff;
}

.login-brand-body .eyebrow::before {
  background: var(--brand-sky);
}

.login-brand-body p,
.login-brand-stats .lbl {
  color: rgba(255, 255, 255, .78);
}

.login-brand-stats {
  border-top-color: rgba(255, 255, 255, .22);
}

.login-brand-stats .item+.item {
  border-left-color: rgba(255, 255, 255, .22);
}

.login-brand-stats .num {
  color: #fff;
}

.login-brand-mark {
  right: -80px;
  bottom: -110px;
  width: 390px;
  height: 390px;
  border: 54px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  opacity: 1;
}

.login-brand-mark::before,
.login-brand-mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.login-brand-mark::before {
  inset: 44px;
  border: 22px solid rgba(71, 180, 231, .25);
}

.login-brand-mark::after {
  inset: 105px;
  background: rgba(255, 255, 255, .07);
}

.field input:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 4px rgba(71, 180, 231, .2);
}

.remember input {
  accent-color: var(--brand-navy);
}

@media (max-width: 640px) {
  .aa-nav-logo img {
    height: 32px;
  }

  .login-form-wrap .logo img {
    height: 46px;
  }

  .login-brand-mark {
    right: -90px;
    bottom: -100px;
    width: 280px;
    height: 280px;
    border-width: 38px;
  }

  .login-brand-mark::before {
    inset: 30px;
    border-width: 16px;
  }

  .login-brand-mark::after {
    inset: 74px;
  }
}