@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

body {
  height: 100vh;
}

/* ===== TOPBAR ===== */
.topbar {
  width: 100%;
  background-color: var(--secondary-color-light);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar img {
  max-width: 250px;
}

/* ===== LAYOUT CENTRAL ===== */
.auth {
  position: relative;
  padding: 0 24px;
  height: calc(100% - 64px);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: var(--secondary-color-light);
}

/* ===== CARD ===== */
.auth-form {
  width: min(500px, 92vw);
  height: auto;

  background-color: var(--secondary-color);

  display: flex;
  flex-direction: column;

  padding: 34px 32px;
  border-radius: 14px;

  box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.10);
}


.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.auth-logo {
  width: 180px;
  max-width: 70%;
  padding: 10px 0 6px 0;
}

.brand-subtitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(0, 0, 0, 0.55);
}

/* Alertas */
.alert {
  margin: 8px 0 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.alert-error {
  background: rgba(220, 53, 69, 0.08);
  color: #b4232a;
  border: 1px solid rgba(220, 53, 69, 0.18);
}

/* Labels */
.auth-form label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 8px 0 6px 0;
}

.auth-form input[type="text"],
.auth-form input[type="password"] {
  width: 100%;
  padding: 11px 12px;

  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-color: #f7f7f7;

  font-size: 15px;
  color: var(--primary-color-dark);

  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.auth-form input::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.auth-form input:focus {
  outline: none;
  border-color: rgba(11, 94, 215, .35);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(11, 94, 215, .10);
}

/* ====== BLOQUEIA OLHO NATIVO DO EDGE/IE ====== */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}


.password-field {
  position: relative;
  width: 100%;
  margin-bottom: 14px;
}

/* Garante espaço p/ botão */
.password-field input[type="password"],
.password-field input[type="text"] {
  padding-right: 44px;
}

/* Botão do olho */
.toggle-pass {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);

  height: 36px;
  width: 36px;

  border: 0;
  background: transparent;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #6b7280;
  line-height: 0;
  border-radius: 8px;

  transition: color .15s ease, background-color .15s ease;
}

.toggle-pass:hover {
  color: #111827;
  background-color: rgba(0, 0, 0, 0.04);
}

.toggle-pass:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}


.login-button {
  width: 100%;
  padding: 11px 12px;

  border-radius: 8px;
  border: none;

  background-color: var(--primary-color);
  color: var(--secondary-color);

  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
  transition: all 0.18s ease;
}

.login-button:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-1px);
}

.login-button:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* ===== DIVISOR ===== */
.auth-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: 14px 0 12px 0;

  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: .03em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.10);
}


.govbr-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 11px 12px;
  border-radius: 8px;

  border: 1.5px solid #16a34a;
  background: transparent;
  color: #16a34a;

  font-size: 16px;
  font-weight: 600;
  text-decoration: none;

  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.govbr-button:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  transform: translateY(-1px);
}

.govbr-button:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
}


.security-hint {
  margin-top: 12px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(0, 0, 0, 0.55);
}

/* Boas Festas */
.boas-festas-inline {
  width: 100%;
  text-align: center;
  margin-top: 10px;

  color: #16a34a;
  font-size: 14px;
  font-weight: 700;
}


.auth-footer {
  text-align: center;
  margin-top: 14px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.env-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 999px;

  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.env-homolog {
  color: #b4232a;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.18);
}

.env-dev {
  color: #9a3412;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.22);
}

.env-prod {
  color: #065f46;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.22);
}



/* ===== LOADING OVERLAY ===== */
.auth.loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.82);
  z-index: 5;
}

.auth.loading:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border: 4px solid #d1d5db;
  border-top-color: #005a92;
  border-radius: 50%;

  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;

  z-index: 6;
}


.snow-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10px;

  opacity: 0.85;

  animation-name: snow-fall, snow-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;

  color: #0b5ed7;
}

@keyframes snow-fall {
  to {
    transform: translateY(105vh);
  }
}

@keyframes snow-sway {
  0% {
    margin-left: 0;
  }

  50% {
    margin-left: 18px;
  }

  100% {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .auth-form {
    padding: 28px 22px;
  }

  .auth-logo {
    width: 160px;
  }
}