/* Login premium — identidade CLARA DOURADA (padrão Visão Geral / gestor-home) */

body.pg-login {
  --lb-bg-light: rgb(240 231 215);
  --lb-surface: rgba(255, 255, 255, 0.92);
  --lb-border: rgba(17, 17, 17, 0.14);
  --lb-text-1: rgb(24 24 24);
  --lb-text-2: rgb(74 66 48);
  --lb-text-mute: rgb(120 106 74);
  --lb-text-soft: rgb(150 136 104);
  --login-blue: rgb(176 134 47);          /* acento = ouro escuro */
  --login-blue-hover: rgb(138 104 30);
  --warm: 95,72,20;                        /* sombra quente */

  min-height: 100svh;
  overflow-x: hidden;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--lb-bg-light);
  background-image: radial-gradient(circle at 50% -2%, rgba(255, 255, 255, 0.5), transparent 42%);
  color: var(--lb-text-1);
}

/* Ondas douradas sutis de textura */
body.pg-login::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'><g fill='none' stroke='rgb(201,154,50)' stroke-width='0.8' stroke-opacity='0.13'><path d='M-120 320 C180 270 340 380 610 330 C820 290 960 300 1130 325 C1360 360 1540 280 1720 320'/><path d='M-140 410 C160 360 350 470 620 415 C840 372 1000 388 1160 410 C1390 450 1540 375 1740 420'/><path d='M-160 510 C140 465 360 570 640 515 C850 475 1015 485 1185 520 C1415 565 1580 490 1760 535'/><path d='M-180 610 C130 570 370 665 650 615 C860 580 1025 590 1200 625 C1430 670 1600 605 1780 645'/></g></svg>");
  background-size: cover;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgb(0 0 0) 12%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, rgb(0 0 0) 12%, transparent 78%);
  pointer-events: none;
}

.pg-login .auth-pagina {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 100svh;
  padding:
    max(clamp(64px, 10vh, 112px), env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  overflow: hidden;
  background: transparent;
}

.pg-login .login-shell {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 100%;
}

.pg-login .login-card-wrap {
  position: relative;
  width: min(100%, 480px);
  isolation: isolate;
}

/* Card de vidro fosco + sombra quente */
.pg-login .login-card {
  position: relative;
  width: 100%;
  max-width: none;
  padding: 44px 44px 38px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    0 26px 60px rgba(var(--warm), 0.16),
    0 4px 14px rgba(var(--warm), 0.1);
  color: var(--lb-text-1);
}

.pg-login .auth-logo {
  position: relative;
  display: block;
  margin: 0 auto 22px;
  width: min(364px, 84vw);
  height: 86px;
}

body.pg-login .auth-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.pg-login .login-title {
  margin: 0;
  color: var(--lb-text-1);
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.pg-login .login-subtitle {
  max-width: 360px;
  margin: 8px auto 36px;
  color: var(--lb-text-soft);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
}

.pg-login .form-grupo {
  margin-bottom: 22px;
}

.pg-login .form-grupo label {
  display: block;
  margin-bottom: 6px;
  color: var(--lb-text-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
}

.pg-login .login-field {
  display: flex;
  align-items: center;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid var(--lb-border);
  border-radius: 12px;
  background: var(--lb-surface);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.pg-login .login-field:focus-within {
  border-color: var(--login-blue);
  box-shadow: 0 0 0 4px rgba(201, 162, 78, 0.18);
}

.pg-login .login-field-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  color: rgb(176 134 47);
}

.pg-login .login-field-icon svg,
.pg-login .login-password-toggle svg,
.pg-login .login-security-inline svg,
.pg-login .login-security-title svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.pg-login .login-field input,
.pg-login .login-field select {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 14px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lb-text-1);
  font-family: inherit;
  /* 16px: abaixo disso o celular dá zoom automático ao focar o campo. Login é a
     página de maior tráfego do sistema — todo usuário passa por aqui. */
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
}

.pg-login .login-field input:focus,
.pg-login .login-field select:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.pg-login .login-field input::placeholder {
  color: var(--lb-text-soft);
  font-weight: 400;
}

/* Campos readonly (ex.: cidade/UF preenchidos pelo CEP) — mesma caixa, só
   com o cursor indicando que não dá para digitar. */
.pg-login .login-field input:read-only {
  cursor: default;
  color: var(--lb-text-2);
}

/* ── Autofill fix ──── */
.pg-login .login-field input:-webkit-autofill,
.pg-login .login-field input:-webkit-autofill:hover,
.pg-login .login-field input:-webkit-autofill:focus,
.pg-login .login-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--lb-text-1) !important;
  caret-color: var(--lb-text-1);
  -webkit-box-shadow: 0 0 0 1000px rgb(255 255 255) inset !important;
  box-shadow: 0 0 0 1000px rgb(255 255 255) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.pg-login .login-password-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgb(150 136 104);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.pg-login .login-password-toggle:hover {
  background: rgba(201, 162, 78, 0.1);
  color: var(--lb-text-2);
}

.pg-login .login-password-toggle svg[hidden] {
  display: none;
}

.pg-login .login-password-toggle:focus-visible,
.pg-login .login-support-link:focus-visible,
.pg-login .login-register a:focus-visible,
.pg-login .auth-logo:focus-visible {
  border-radius: 8px;
  outline: 3px solid rgba(201, 162, 78, 0.45);
  outline-offset: 3px;
}

.pg-login .login-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 2px 28px;
}

.pg-login .login-security-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lb-text-mute);
  font-size: 13px;
}

.pg-login .login-security-inline svg {
  color: rgb(46 158 91);
}

.pg-login .login-support-link,
.pg-login .login-register a {
  color: var(--login-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color 160ms ease;
}

.pg-login .login-support-link {
  font-size: 13.5px;
}

.pg-login .login-support-link:hover,
.pg-login .login-register a:hover {
  color: var(--login-blue-hover);
  text-decoration: underline;
}

/* Botão OURO — por id (#btn-entrar, o login) e por classe (.btn-primario,
   reutilizável em qualquer outra tela .pg-login, ex.: cadastro.html). */
.pg-login #btn-entrar,
.pg-login .btn-primario {
  position: relative;
  min-height: 56px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(234 208 138) 0%, rgb(201 162 78) 55%, rgb(176 134 47) 100%);
  color: rgb(58 44 12);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 22px -4px rgba(var(--warm), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  width: 100%;
}

.pg-login #btn-entrar::after,
.pg-login .btn-primario::after {
  content: "→";
  margin-left: 10px;
  font-size: 18px;
  font-weight: 400;
  vertical-align: -1px;
}

.pg-login #btn-entrar:hover:not(:disabled),
.pg-login .btn-primario:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 28px -6px rgba(var(--warm), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pg-login #btn-entrar:focus-visible,
.pg-login .btn-primario:focus-visible {
  outline: 3px solid rgba(201, 162, 78, 0.5);
  outline-offset: 3px;
}

.pg-login #btn-entrar:disabled,
.pg-login .btn-primario:disabled {
  cursor: wait;
  opacity: .75;
  transform: none;
  box-shadow: none;
}

.pg-login #btn-entrar:disabled::after,
.pg-login .btn-primario:disabled::after {
  display: none;
}

/* Botão secundário (ex.: "Trocar o e-mail" no cadastro) — mesma caixa do
   dourado, sem o gradiente: contorno neutro para não competir com o CTA. */
.pg-login .btn-secundario {
  min-height: 52px;
  border: 1px solid var(--lb-border);
  border-radius: 12px;
  background: var(--lb-surface);
  color: var(--lb-text-1);
  font-size: 14.5px;
  font-weight: 600;
  width: 100%;
  transition: border-color 160ms ease, background 160ms ease;
}

.pg-login .btn-secundario:hover:not(:disabled) {
  border-color: var(--login-blue);
  background: rgba(255, 255, 255, 0.95);
}

.pg-login .login-register {
  margin: 32px 0 0;
  color: var(--lb-text-mute);
  text-align: center;
  font-size: 14px;
}

.pg-login #msg-novo {
  display: none;
}

.pg-login .alerta {
  margin-bottom: 20px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.6);
  color: var(--lb-text-1);
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.pg-login .alerta-sucesso {
  border-color: rgb(167 243 208);
  background: rgb(236 253 245);
  color: rgb(6 95 70);
}

.pg-login .alerta-erro {
  border-color: rgb(254 202 202);
  background: rgb(254 242 242);
  color: rgb(153 27 27);
}

.pg-login .alerta-aviso {
  border-color: rgb(253 230 138);
  background: rgb(255 251 235);
  color: rgb(146 64 14);
}

.pg-login .login-security-footer {
  width: min(440px, 100%);
  margin: 40px auto 0;
  color: var(--lb-text-soft);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}

.pg-login .login-security-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--lb-text-mute);
  font-weight: 600;
  font-size: 13.5px;
}

.pg-login .login-security-title svg {
  color: rgb(176 134 47);
}

@media (max-width: 480px) {
  .pg-login .auth-pagina {
    padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }

  .pg-login .login-card {
    padding: 36px 24px 28px;
    border-radius: 20px;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.7),
      0 16px 40px rgba(var(--warm), 0.14);
  }

  .pg-login .auth-logo {
    height: 70px;
    width: min(322px, 86vw);
  }

  .pg-login .login-title {
    font-size: 26px;
  }

  .pg-login .login-subtitle {
    font-size: 14px;
    margin-bottom: 28px;
  }

  .pg-login .login-support {
    align-items: flex-end;
    flex-direction: column-reverse;
    gap: 12px;
    margin-bottom: 24px;
  }

  .pg-login .login-security-inline {
    align-self: flex-start;
  }

  .pg-login .login-support-link {
    align-self: flex-end;
  }
}

/* ── Cadastro: bloco de consentimento LGPD ──────────────────────────── */
.pg-login .lgpd-aviso {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid var(--lb-border);
  border-radius: 14px;
  background: var(--lb-surface);
}

.pg-login .lgpd-aviso-titulo {
  margin-bottom: 12px;
  color: var(--lb-text-1);
  font-size: 14px;
  font-weight: 700;
}

.pg-login .lgpd-aviso-titulo a {
  color: var(--login-blue);
  text-decoration: underline;
}

.pg-login .lgpd-aviso-pontos {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lb-border);
  color: var(--lb-text-mute);
  font-size: 12px;
  line-height: 1.7;
}

.pg-login .lgpd-rotulo {
  margin-bottom: 8px;
  color: var(--lb-text-mute);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pg-login .lgpd-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid var(--lb-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--lb-text-1);
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.pg-login .lgpd-check:hover {
  border-color: var(--login-blue);
}

.pg-login .lgpd-check:last-child {
  margin-bottom: 0;
}

.pg-login .lgpd-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--login-blue);
  cursor: pointer;
}

.pg-login .lgpd-check strong {
  color: var(--lb-text-1);
}

.pg-login .lgpd-check a {
  color: var(--login-blue);
  text-decoration: underline;
}

.pg-login .lgpd-detalhe {
  display: block;
  margin-top: 2px;
  color: var(--lb-text-mute);
  font-size: 12px;
}

/* ── Cadastro: verificação por código ───────────────────────────────── */
.pg-login .codigo-intro {
  margin: 0 0 6px;
  color: var(--lb-text-1);
  font-size: 14px;
  line-height: 1.6;
}

.pg-login .codigo-validade {
  margin: 0 0 16px;
  color: var(--lb-text-mute);
  font-size: 13px;
}

.pg-login .codigo-ajuda {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--lb-border);
  border-radius: 12px;
  background: var(--lb-surface);
  color: var(--lb-text-mute);
  font-size: 12.5px;
  line-height: 1.7;
}

.pg-login .codigo-ajuda summary {
  color: var(--lb-text-1);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pg-login .codigo-ajuda-corpo {
  margin-top: 8px;
}

.pg-login .codigo-alerta {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgb(253 230 138);
  border-radius: 12px;
  background: rgb(255 251 235);
}

.pg-login .codigo-alerta-msg {
  margin-bottom: 10px;
  color: rgb(146 64 14);
  font-size: 13px;
  line-height: 1.5;
}

.pg-login .login-field input.codigo-digitos {
  padding-left: 14px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 22px;
  letter-spacing: .4em;
  text-align: center;
}

.pg-login .codigo-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.pg-login .btn-link {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--lb-text-mute);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.pg-login .btn-link.destaque {
  color: var(--login-blue);
}

/* ── Loading overlay dourado ────────────────────────── */
.login-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(240, 231, 215, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 1;
  transition: opacity 220ms ease;
}

.login-loading-overlay[hidden] {
  display: none;
}

.login-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(90vw, 320px);
  padding: 36px 30px 32px;
  border-radius: 20px;
  text-align: center;
  color: rgb(24 24 24);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 24px 60px rgba(95, 72, 20, 0.18);
  animation: login-loading-in 320ms ease both;
}

.login-loading-logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgb(176 134 47);
  margin-bottom: 6px;
}

.login-spinner {
  width: 40px;
  height: 40px;
  margin: 20px 0 24px;
  border-radius: 50%;
  border: 3px solid rgba(201, 162, 78, 0.22);
  border-top-color: rgb(176 134 47);
  animation: login-spin .8s linear infinite;
}

.login-loading-card strong {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
}

.login-loading-card span {
  font-size: 13.5px;
  color: rgb(120 106 74);
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

@keyframes login-loading-in {
  from {
    opacity: 0;
    transform: scale(.95) translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-login .login-field,
  .pg-login .login-password-toggle,
  .pg-login #btn-entrar,
  .pg-login .login-support-link,
  .pg-login .login-register a {
    transition: none;
  }

  .login-loading-card {
    animation: none;
  }

  .login-spinner {
    animation: login-spin 1.6s linear infinite;
  }
}