@import url('brand.css');

/* ============================================================
   Telas de autenticação — visual moderno (Portal Renascer)
   Paleta e tipografia do MANUAL DA MARCA (res/admin/css/brand.css):
     primária #0f0f0e · secundária #f4f4ef · terciária #2353cc
     Stack Sans Headline (títulos) + Stack Sans Text (corpo) → Helvetica
   Compartilhado por: login, forgot, forgot-reset, forgot-sent,
   forgot-reset-success, uncaonacionallogin.
   ============================================================ */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* Tons profundos da terciária, derivados só para este fundo (não constam
   do manual, mas saem todos do #2353cc escurecido). */
:root {
  --auth-azul-1: #3366d6;   /* = --brand-azul-80, topo do degradê  */
  --auth-azul-2: #2353cc;   /* = --brand-azul                      */
  --auth-azul-3: #1b41a3;   /* = --brand-azul-esc                  */
  --auth-azul-4: #16358a;   /* mais fundo                          */
  --auth-azul-5: #0e2258;   /* base / vinheta                      */
}

body {
  font-family: var(--brand-fonte);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background-color: var(--auth-azul-3);
  /* Degradê em camadas (mesh): a 1ª da lista fica por cima.
     Vinheta -> brilhos -> base diagonal. */
  background-image:
    radial-gradient(circle at 50% 45%, transparent 38%, rgba(14, 34, 88, .55) 100%),
    radial-gradient(1100px 620px at 12% 14%, rgba(102, 144, 224, .55), transparent 62%),
    radial-gradient(900px 540px at 88% 8%,  rgba(51, 102, 214, .50), transparent 64%),
    radial-gradient(1000px 780px at 78% 98%, rgba(14, 34, 88, .60), transparent 66%),
    linear-gradient(140deg,
      var(--auth-azul-2) 0%,
      var(--auth-azul-3) 44%,
      var(--auth-azul-4) 74%,
      var(--auth-azul-5) 100%);
  position: relative;
  /* `overflow: hidden` (nos dois eixos) cortava telas altas — a de redefinir
     senha, com a lista de regras, não rolava no celular. Só o eixo X precisa
     ser travado, por causa dos halos que ficam fora da viewport. */
  overflow-x: hidden;
}

/* Dois halos que derivam devagar, dando vida ao degradê sem distrair */
body::before, body::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none;
}
body::before {
  width: 460px; height: 460px;
  background: var(--auth-azul-1); opacity: .38;
  top: -150px; left: -130px;
  animation: auth-flutua-1 20s ease-in-out infinite alternate;
}
body::after {
  width: 420px; height: 420px;
  background: var(--brand-azul-60); opacity: .26;
  bottom: -140px; right: -110px;
  animation: auth-flutua-2 26s ease-in-out infinite alternate;
}
@keyframes auth-flutua-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(70px, 50px, 0) scale(1.14); }
}
@keyframes auth-flutua-2 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-60px, -45px, 0) scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 410px;
  background: var(--brand-off-4); border-radius: 18px;
  /* sombra puxada para o azul profundo do fundo, não para o preto */
  box-shadow: 0 30px 80px rgba(10, 25, 70, .48), 0 2px 8px rgba(10, 25, 70, .28);
  overflow: hidden;
  animation: rise .5s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .login-card { animation: none; }
}

/* O logo (`logo.png`) é BRANCO sobre transparente — este topo precisa
   continuar escuro. Sai do preto da marca e desce para o azul profundo,
   costurando o card com o fundo. */
.card-head {
  background: linear-gradient(135deg, var(--brand-preto) 0%, var(--auth-azul-4) 100%);
  padding: 34px 30px 26px; text-align: center;
  border-bottom: 3px solid var(--brand-azul);   /* faixa de destaque — terciária */
}
.card-head img { max-width: 175px; height: auto; }

.card-body { padding: 30px 30px 26px; }
.login-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--brand-preto); }
.login-sub   { margin: 0 0 22px; font-size: 13.5px; color: var(--brand-preto-55); line-height: 1.5; }

.alert {
  border-radius: 10px; padding: 11px 14px; font-size: 13.5px;
  margin-bottom: 16px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.4;
}
.alert i { margin-top: 1px; }
.alert-err  { background: #fdecec; color: #c0392b; border: 1px solid #f5c6c6; }
.alert-warn { background: #fff8e6; color: #a07d00; border: 1px solid #ffe3a3; }

.field { position: relative; margin-bottom: 15px; }
.field > i {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--brand-preto-38); font-size: 15px;
}
.field input {
  width: 100%; height: 50px; padding: 0 44px;
  border: 1.6px solid var(--brand-preto-18); border-radius: 12px;
  font-size: 14.5px; color: var(--brand-texto); background: var(--brand-off);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--brand-preto-38); }
.field input:focus {
  outline: none; border-color: var(--brand-azul); background: #fff;
  box-shadow: 0 0 0 4px var(--brand-foco);
}
.field:focus-within > i { color: var(--brand-azul); }
.field .toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--brand-preto-38); cursor: pointer; padding: 8px; font-size: 15px;
}
.field .toggle:hover { color: var(--brand-preto); }

.login-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 18px; }
.remember { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--brand-texto-2); cursor: pointer; user-select: none; }
.remember input { width: 16px; height: 16px; accent-color: var(--brand-azul); cursor: pointer; margin: 0; }
.forgot { color: var(--brand-azul); font-size: 13px; text-decoration: none; }
.forgot:hover { text-decoration: underline; }

.btn-login {
  width: 100%; height: 50px; border: none; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #fff; letter-spacing: .3px;
  background: linear-gradient(135deg, var(--brand-azul) 0%, var(--brand-azul-esc) 100%);
  box-shadow: 0 8px 22px rgba(35,83,204,.35);
  transition: transform .15s, box-shadow .2s, filter .2s;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn-login:hover  { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 12px 28px rgba(35,83,204,.45); color: #fff; }
.btn-login:active { transform: translateY(0); }
.btn-login:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

.login-foot { text-align: center; margin-top: 22px; font-size: 12px; color: var(--brand-preto-38); }
.center { text-align: center; }
.mt { margin-top: 18px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-azul); font-size: 13.5px; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* Força da senha (forgot-reset) — cores semânticas mantidas */
.strength-bar { height: 6px; border-radius: 3px; background: var(--brand-off); margin: -6px 0 12px; overflow: hidden; }
.strength-fill { height: 100%; width: 0; border-radius: 3px; transition: width .3s, background .3s; }
.strength-rules { list-style: none; padding: 0; margin: 0 0 16px; font-size: 12.5px; color: var(--brand-preto-55); }
.strength-rules li { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.strength-rules li::before { content: "\f111"; font-family: FontAwesome; font-size: 7px; color: var(--brand-preto-18); }
.strength-rules li.ok { color: #27ae60; }
.strength-rules li.ok::before { content: "\f00c"; font-size: 11px; color: #27ae60; }

/* Estado de sucesso (forgot-sent / forgot-reset-success) */
.success-icon {
  width: 74px; height: 74px; border-radius: 50%; margin: 4px auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #fff;
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  box-shadow: 0 10px 24px rgba(39,174,96,.35);
}
.success-title { font-size: 20px; font-weight: 700; color: var(--brand-preto); margin: 0 0 6px; }
.success-text  { font-size: 14px; color: var(--brand-texto-2); line-height: 1.55; margin: 0 0 6px; }

@media (max-width: 480px) {
  .card-body { padding: 24px 22px; }
  .card-head { padding: 28px 22px 22px; }
}