:root {
  --login-ink: var(--brand-ink, #191a18);
  --login-muted: var(--brand-muted, #686a64);
  --login-yellow: var(--brand-gold, #d8b53d);
  --login-yellow-deep: var(--brand-gold-strong, #c49a19);
  --login-paper: var(--brand-surface, #fbfbf8);
  --login-line: var(--brand-line, #d9dad3);
}

/* Identidade compartilhada das tres telas de acesso. */
.enrollment-view,
.prof-auth-view:not(.prof-lock-view),
.admin-auth-view {
  min-height: 100vh !important;
  padding: clamp(18px, 3vw, 42px) !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(216, 181, 61, .18), transparent 25rem),
    radial-gradient(circle at 92% 88%, rgba(31, 33, 30, .1), transparent 30rem),
    linear-gradient(135deg, #eeeee9 0%, #deded7 100%) !important;
}

.enrollment-view::before,
.prof-auth-view:not(.prof-lock-view)::before,
.admin-auth-view::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image: linear-gradient(rgba(30, 31, 29, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 31, 29, .08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(135deg, #000, transparent 58%);
}

.enrollment-view,
.prof-auth-view:not(.prof-lock-view),
.admin-auth-view,
.enrollment-view *,
.prof-auth-view:not(.prof-lock-view) *,
.admin-auth-view * {
  box-sizing: border-box;
}

.enrollment-view,
.prof-auth-view:not(.prof-lock-view),
.admin-auth-view {
  grid-template-columns: 1fr !important;
}

.enrollment-view,
.prof-auth-shell,
.admin-auth-shell {
  width: min(100%, 1160px) !important;
}

.enrollment-view,
.prof-auth-shell,
.admin-auth-shell {
  position: relative;
  z-index: 1;
  min-height: min(700px, calc(100vh - clamp(36px, 6vw, 84px))) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(380px, .78fr) !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 30px !important;
  background: var(--login-paper);
  box-shadow: 0 32px 90px rgba(26, 27, 24, .22);
}

.login-hero {
  position: relative !important;
  min-width: 0;
  min-height: 100% !important;
  height: auto !important;
  overflow: hidden;
  background: #20211f !important;
}

.login-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 48% center;
  filter: saturate(.82) contrast(1.05);
  transform: scale(1.015);
}

.login-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 15, 14, .1) 15%, rgba(14, 15, 14, .78) 100%),
    linear-gradient(90deg, rgba(14, 15, 14, .46), transparent 72%);
}

.login-hero-copy {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 5vw, 62px);
  right: clamp(28px, 5vw, 62px);
  bottom: clamp(34px, 6vh, 64px);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
}

.login-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  color: var(--login-ink);
  background: var(--login-yellow);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-shadow: none;
  text-transform: uppercase;
}

.login-hero .login-role-badge {
  width: max-content !important;
  display: inline-flex !important;
  color: var(--login-ink) !important;
}

.login-hero-copy > p {
  margin: 23px 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.login-hero-copy > p i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--login-yellow);
}

.login-hero-copy h1 {
  max-width: 630px;
  margin: 0;
  color: #fff;
  font-size: clamp(3.2rem, 5.4vw, 5.65rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.login-hero-copy small {
  max-width: 510px;
  margin-top: 20px;
  display: block;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.86rem, 1.25vw, 1rem);
  line-height: 1.55;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .42);
}

.enrollment-panel,
.prof-auth-card,
.admin-auth-card {
  grid-column: 2;
  width: 100% !important;
  min-width: 0;
  min-height: 100% !important;
  margin: 0 !important;
  padding: clamp(34px, 5vw, 58px) clamp(28px, 4vw, 50px) 28px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--login-paper) !important;
  box-shadow: none !important;
}

.enrollment-panel > div,
.prof-auth-card,
.admin-auth-card {
  align-self: stretch;
}

.login-form-brand {
  margin-bottom: clamp(30px, 5vh, 52px);
  display: flex;
  align-items: center;
  gap: 11px;
}

.login-form-brand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .14);
}

.login-form-brand span {
  display: grid;
  gap: 1px;
}

.login-form-brand strong {
  color: var(--login-ink);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.login-form-brand small {
  color: var(--login-muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.login-form-kicker {
  margin-bottom: 8px;
  color: #9a7700;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.enrollment-panel h2,
.prof-auth-card h1,
.admin-auth-card h1 {
  margin: 0 !important;
  color: var(--login-ink);
  font-size: clamp(2rem, 3vw, 2.65rem) !important;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.enrollment-panel h2 {
  font-family: "Manrope", sans-serif !important;
  text-transform: none !important;
}

#passwordChangeCard[hidden],
#profPasswordChangeCard[hidden],
#adminPasswordChangeCard[hidden],
#profLoginCard[hidden],
#adminLoginCard[hidden],
#enrollmentWelcome[hidden] {
  display: none !important;
}

/* O estado de autenticacao sempre prevalece sobre o layout visual. */
#onboardingView[hidden],
#profAuthView[hidden],
#adminAuthView[hidden] {
  display: none !important;
}

.login-form-intro {
  margin: 12px 0 25px !important;
  color: var(--login-muted) !important;
  font-size: .88rem;
  line-height: 1.55 !important;
}

.enrollment-panel .login-form,
.prof-auth-card .prof-auth-form,
.admin-auth-card .admin-auth-form {
  margin: 0 !important;
  display: grid;
  gap: 14px !important;
}

.enrollment-panel .login-form label,
.prof-auth-card .prof-auth-form label,
.admin-auth-card .admin-auth-form label {
  display: grid;
  gap: 7px;
  color: #343631;
  font-size: .76rem !important;
  font-weight: 750;
}

.enrollment-panel .login-form input,
.prof-auth-card .prof-auth-form input,
.admin-auth-card .admin-auth-form input {
  width: 100%;
  min-height: 52px !important;
  padding: 0 15px !important;
  border: 1px solid var(--login-line) !important;
  border-radius: 13px !important;
  outline: 0;
  color: var(--login-ink);
  background: #fff !important;
  box-shadow: inset 0 1px 1px rgba(25, 26, 24, .025);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.enrollment-panel .login-form input:focus,
.prof-auth-card .prof-auth-form input:focus,
.admin-auth-card .admin-auth-form input:focus {
  border-color: #c49a00 !important;
  box-shadow: 0 0 0 4px rgba(216, 181, 61, .18);
}

.enrollment-panel .login-form button[type="submit"],
.prof-auth-card .prof-auth-form button[type="submit"],
.admin-auth-card .admin-auth-form button[type="submit"] {
  min-height: 54px !important;
  margin-top: 7px;
  border: 0 !important;
  border-radius: 13px !important;
  color: #171815 !important;
  background: linear-gradient(135deg, #e6ca64, var(--login-yellow)) !important;
  box-shadow: 0 11px 24px rgba(148, 118, 27, .17);
  font-weight: 850;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.enrollment-panel .login-form button[type="submit"]:hover,
.prof-auth-card .prof-auth-form button[type="submit"]:hover,
.admin-auth-card .admin-auth-form button[type="submit"]:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 15px 28px rgba(207, 159, 0, .27);
}

.login-support {
  margin: 18px 0 0 !important;
  color: var(--login-muted) !important;
  font-size: .72rem;
  line-height: 1.45 !important;
  text-align: center;
}

.login-developer-credit {
  margin: auto 0 0 !important;
  padding-top: clamp(22px, 5vh, 42px);
  color: #777972 !important;
  font-size: .72rem;
  line-height: 1.3 !important;
  text-align: center;
}

.login-developer-credit strong {
  color: #3a3c37;
  font-weight: 800;
}

#passwordChangeCard .password-rule,
#profPasswordChangeCard .password-rule,
#adminPasswordChangeCard .password-rule {
  margin: 11px 0 23px !important;
  color: var(--login-muted) !important;
  font-size: .8rem;
  line-height: 1.5;
}

#cancelPasswordChange,
#cancelProfPasswordChange,
#cancelAdminPasswordChange {
  min-height: 42px;
  margin-top: 10px;
  border: 0;
  color: #555750;
  background: transparent;
  font-weight: 750;
}

.enrollment-panel .form-feedback,
.prof-auth-card .prof-auth-feedback,
.admin-auth-card .admin-auth-feedback {
  min-height: 20px;
  margin: 8px 0 0 !important;
  font-size: .75rem;
}

@media (max-width: 800px) {
  .enrollment-view,
  .prof-auth-view:not(.prof-lock-view),
  .admin-auth-view {
    padding: 0 !important;
    place-items: start stretch !important;
    background: var(--login-paper) !important;
  }

  .enrollment-view,
  .prof-auth-shell,
  .admin-auth-shell {
    width: 100% !important;
    min-height: 100vh !important;
    display: block !important;
    overflow: visible;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
  }

  .login-hero {
    width: 100%;
    height: clamp(290px, 39vh, 370px) !important;
    min-height: clamp(290px, 39vh, 370px) !important;
  }

  .login-hero-photo {
    object-position: 45% center;
  }

  .login-hero-copy {
    left: 22px;
    right: 22px;
    bottom: 42px;
  }

  .login-hero-copy > p {
    margin: 16px 0 7px;
    font-size: .61rem;
  }

  .login-hero-copy h1 {
    font-size: clamp(2.65rem, 11.5vw, 3.35rem);
  }

  .login-hero-copy small {
    max-width: 390px;
    margin-top: 13px;
    font-size: .78rem;
  }

  .enrollment-panel,
  .prof-auth-card,
  .admin-auth-card {
    position: relative;
    z-index: 3;
    width: calc(100% - 24px) !important;
    min-height: calc(61vh + 26px) !important;
    margin: -26px 12px 0 !important;
    padding: 30px 22px calc(22px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .login-form-brand {
    margin-bottom: 26px;
  }

  .login-developer-credit {
    padding-top: 28px;
  }
}

@media (max-width: 390px), (max-height: 690px) and (max-width: 800px) {
  .login-hero {
    height: 270px !important;
    min-height: 270px !important;
  }

  .login-hero-copy {
    bottom: 36px;
  }

  .login-hero-copy small {
    display: none;
  }

  .login-form-brand {
    margin-bottom: 20px;
  }

  .enrollment-panel,
  .prof-auth-card,
  .admin-auth-card {
    padding-top: 26px !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .login-hero-photo {
    animation: login-photo-arrival 1.1s ease-out both;
  }

  .login-hero-copy > * {
    animation: login-copy-arrival .62s ease-out both;
  }

  .login-hero-copy > :nth-child(2) { animation-delay: .08s; }
  .login-hero-copy > :nth-child(3) { animation-delay: .14s; }
  .login-hero-copy > :nth-child(4) { animation-delay: .2s; }

  @keyframes login-photo-arrival {
    from { opacity: .55; transform: scale(1.06); }
    to { opacity: 1; transform: scale(1.015); }
  }

  @keyframes login-copy-arrival {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* 2026-07-14 - IDENTIDADE TIPOGRAFICA COMPARTILHADA */
.login-hero,
.admin-auth-card,
.prof-auth-card,
.enrollment-panel {
  font-family: var(--brand-font-sans, "Sora", sans-serif);
}

.login-role-badge,
.login-form-kicker,
.login-form-brand small,
.login-support {
  font-family: var(--brand-font-mono, "DM Mono", monospace);
}


/* 2026-07-24 - LOGIN DO GESTOR ALINHADO AOS DEMAIS MODULOS */
.gestor-auth-view {
  min-height: 100vh !important;
  padding: clamp(18px, 3vw, 42px) !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 1fr !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(216, 181, 61, .18), transparent 25rem),
    radial-gradient(circle at 92% 88%, rgba(31, 33, 30, .1), transparent 30rem),
    linear-gradient(135deg, #eeeee9 0%, #deded7 100%) !important;
}

.gestor-auth-view::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image: linear-gradient(rgba(30, 31, 29, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 31, 29, .08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(135deg, #000, transparent 58%);
}

.gestor-auth-view,
.gestor-auth-view * {
  box-sizing: border-box;
}

.gestor-auth-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1160px) !important;
  min-height: min(700px, calc(100vh - clamp(36px, 6vw, 84px))) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(380px, .78fr) !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 30px !important;
  background: var(--login-paper);
  box-shadow: 0 32px 90px rgba(26, 27, 24, .22);
}

.gestor-auth-card {
  grid-column: 2;
  width: 100% !important;
  min-width: 0;
  min-height: 100% !important;
  margin: 0 !important;
  padding: clamp(34px, 5vw, 58px) clamp(28px, 4vw, 50px) 28px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--login-paper) !important;
  box-shadow: none !important;
  font-family: var(--brand-font-sans, "Sora", sans-serif);
}

.gestor-auth-card h1 {
  margin: 0 !important;
  color: var(--login-ink);
  font-size: clamp(2rem, 3vw, 2.65rem) !important;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.gestor-auth-form {
  margin: 0 !important;
  display: grid;
  gap: 14px !important;
}

.gestor-auth-form label {
  display: grid;
  gap: 7px;
  color: #343631;
  font-size: .76rem !important;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.gestor-auth-form input {
  width: 100%;
  min-height: 52px !important;
  padding: 0 15px !important;
  border: 1px solid var(--login-line) !important;
  border-radius: 13px !important;
  outline: 0;
  color: var(--login-ink);
  background: #fff !important;
  box-shadow: inset 0 1px 1px rgba(25, 26, 24, .025);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gestor-auth-form input:focus {
  border-color: #c49a00 !important;
  box-shadow: 0 0 0 4px rgba(216, 181, 61, .18);
}

.gestor-auth-form button[type="submit"] {
  min-height: 54px !important;
  margin-top: 7px;
  border: 0 !important;
  border-radius: 13px !important;
  color: #171815 !important;
  background: linear-gradient(135deg, #e6ca64, var(--login-yellow)) !important;
  box-shadow: 0 11px 24px rgba(148, 118, 27, .17);
  font-weight: 850;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.gestor-auth-form button[type="submit"]:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 15px 28px rgba(207, 159, 0, .27);
}

.gestor-auth-feedback {
  min-height: 20px;
  margin: 8px 0 0 !important;
  color: #a43d31;
  font-size: .75rem;
}

#gestorAuthView[hidden],
#gestorAppShell[hidden] {
  display: none !important;
}

@media (max-width: 800px) {
  .gestor-auth-view {
    padding: 0 !important;
    place-items: start stretch !important;
    background: var(--login-paper) !important;
  }

  .gestor-auth-shell {
    width: 100% !important;
    min-height: 100vh !important;
    display: block !important;
    overflow: visible;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
  }

  .gestor-auth-card {
    position: relative;
    z-index: 3;
    width: calc(100% - 24px) !important;
    min-height: calc(61vh + 26px) !important;
    margin: -26px 12px 0 !important;
    padding: 30px 22px calc(22px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 0 0 !important;
  }
}

@media (max-width: 390px), (max-height: 690px) and (max-width: 800px) {
  .gestor-auth-card {
    padding-top: 26px !important;
  }
}


.password-rules-box {
  margin: 14px 0 16px;
  padding: 13px 15px;
  border: 1px solid rgba(173, 132, 20, .34);
  border-left: 4px solid #d8b53d;
  border-radius: 12px;
  background: #fff9df;
  color: #2f2918;
  font-size: .82rem;
  line-height: 1.45;
}
.password-rules-box strong { display: block; margin-bottom: 6px; }
.password-rules-box ul { margin: 0; padding-left: 19px; }
.password-rules-box li + li { margin-top: 3px; }

.password-rules-box.compact{margin:.75rem 0 0;padding:.75rem 1rem;font-size:.88rem}.password-rules-box.compact ul{margin:.4rem 0 0;padding-left:1.1rem}