/* ===================================================================
   Tela de login — Vaga Lume
   Split: hero (anoitecer na floresta + vagalumes) | painel de acesso
   =================================================================== */

.vl-login {
  --vl-amber: #fdb913;
  --vl-orange: #f7941e;
  --vl-amber-dark: #e08700;
  --vl-ink: #241a0e;
  --vl-muted: #8b8271;

  display: flex;
  width: 100%;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
}

.vl-serif {
  font-family: "Lora", Georgia, serif;
}

/* ----------------------------- HERO ----------------------------- */

.vl-hero {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 44px 52px 56px 52px;
  background: linear-gradient(
      180deg,
      rgba(24, 14, 2, 0.45) 0%,
      rgba(24, 14, 2, 0.2) 38%,
      rgba(24, 14, 2, 0.5) 68%,
      rgba(20, 12, 2, 0.85) 100%
    ),
    url("/img/amazonia.jpg") center / cover no-repeat;
}

/* brilho quente no horizonte (o "lume") */
.vl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      120% 55% at 50% 104%,
      rgba(253, 185, 19, 0.28) 0%,
      rgba(253, 185, 19, 0.1) 38%,
      rgba(253, 185, 19, 0) 65%
    );
  pointer-events: none;
}

/* vagalumes */
.vl-ff {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 10px 3px rgba(255, 220, 120, 0.75),
    0 0 26px 9px rgba(255, 190, 60, 0.25);
  animation: vl-flicker 3.2s ease-in-out infinite alternate,
    vl-drift 9s ease-in-out infinite alternate;
}

.vl-ff:nth-child(1)  { top: 22%; left: 14%; animation-delay: 0s, 0s; }
.vl-ff:nth-child(2)  { top: 34%; left: 38%; animation-delay: 0.7s, 1s; transform: scale(0.8); }
.vl-ff:nth-child(3)  { top: 18%; left: 62%; animation-delay: 1.4s, 2s; }
.vl-ff:nth-child(4)  { top: 44%; left: 75%; animation-delay: 0.3s, 0.5s; transform: scale(1.2); }
.vl-ff:nth-child(5)  { top: 56%; left: 22%; animation-delay: 1.9s, 3s; transform: scale(0.7); }
.vl-ff:nth-child(6)  { top: 62%; left: 55%; animation-delay: 0.9s, 1.6s; }
.vl-ff:nth-child(7)  { top: 70%; left: 82%; animation-delay: 2.4s, 0.8s; transform: scale(0.9); }
.vl-ff:nth-child(8)  { top: 76%; left: 38%; animation-delay: 1.1s, 2.6s; transform: scale(1.15); }
.vl-ff:nth-child(9)  { top: 50%; left: 90%; animation-delay: 1.7s, 4s; transform: scale(0.65); }
.vl-ff:nth-child(10) { top: 28%; left: 88%; animation-delay: 2.9s, 1.2s; transform: scale(0.75); }

@keyframes vl-flicker {
  0%   { opacity: 0.12; }
  55%  { opacity: 0.95; }
  100% { opacity: 0.35; }
}

@keyframes vl-drift {
  from { margin-top: 0;     margin-left: 0; }
  to   { margin-top: -28px; margin-left: 22px; }
}

.vl-hero-logo {
  position: absolute;
  z-index: 3;
  top: 36px;
  left: 44px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.vl-hero-logo img {
  height: 64px;
  display: block;
}

.vl-hero-content {
  position: relative;
  z-index: 3;
  max-width: 640px;
}

.vl-hero-eyebrow {
  color: #ffd980;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.vl-hero-title {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 26px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.vl-hero-title em {
  font-style: italic;
  font-weight: 600;
  color: #ffcb45;
}

.vl-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vl-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(20, 12, 2, 0.55);
  border: 1px solid rgba(255, 217, 128, 0.25);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(3px);
}

.vl-hero-badge i {
  color: var(--vl-amber);
  font-size: 12px;
}

/* ---------------------------- PAINEL ---------------------------- */

.vl-panel {
  flex: 0 0 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 44px;
  background: radial-gradient(
      900px 700px at 100% 0%,
      rgba(253, 185, 19, 0.16) 0%,
      rgba(253, 185, 19, 0) 55%
    ),
    #ffffff;
}

.vl-panel-inner {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.vl-panel-logo {
  display: block;
  margin: 0 auto 26px auto;
  max-height: 130px;
  max-width: 170px;
}

.vl-eyebrow {
  color: var(--vl-amber-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.vl-title {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  color: var(--vl-ink);
  margin-bottom: 6px;
}

.vl-sub {
  font-size: 14px;
  color: var(--vl-muted);
  margin-bottom: 26px;
}

.vl-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #3f3627;
  margin: 0 2px 7px 2px;
}

.vl-field {
  position: relative;
  margin-bottom: 4px;
}

.vl-field > i {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--vl-amber-dark);
  pointer-events: none;
}

.vl-login .vl-input {
  width: 100%;
  height: 48px;
  border: 1px solid #e5e1d8;
  border-radius: 12px;
  background: #f7f6f2;
  padding: 0 44px 0 44px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  color: var(--vl-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
}

.vl-login .vl-input::placeholder {
  color: #b5ad9d;
  font-weight: 400;
}

.vl-login .vl-input:focus {
  color: var(--vl-ink);
  background: #ffffff;
  outline: none !important;
  border-color: var(--vl-amber) !important;
  box-shadow: 0 0 0 4px rgba(253, 185, 19, 0.18) !important;
}

.vl-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 8px 10px;
  color: #b5ad9d;
  cursor: pointer;
}

.vl-eye:hover {
  color: var(--vl-amber-dark);
}

.vl-field-error {
  display: block;
  min-height: 16px;
  font-size: 12px;
  color: #c0392b;
  margin: 4px 2px 10px 2px;
}

/* resumo de erros (usuário/senha incorretos etc.) */
.vl-validation.validation-summary-valid {
  display: none;
}

.vl-validation.validation-summary-errors {
  background: #fdefec;
  border: 1px solid #f3c9be;
  color: #b23a2a;
  font-size: 13px;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}

.vl-validation.validation-summary-errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* lembrar de mim */
.vl-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 2px 24px 2px;
}

.vl-remember-text {
  font-size: 14px;
  color: #4a4436;
}

.vl-login .vl-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.vl-switch {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 30px;
  margin: 0;
  border-radius: 15px;
  background: #e9e5dc;
  cursor: pointer;
  transition: background 0.25s ease;
}

.vl-switch::before {
  content: attr(data-off);
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 24px;
  border-radius: 12px;
  background: #a49c8e;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: left 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.vl-switch-input:checked + .vl-switch {
  background: #ffe9b3;
}

.vl-switch-input:checked + .vl-switch::before {
  content: attr(data-on);
  left: 27px;
  background: var(--vl-amber);
  color: #5b3c00;
}

.vl-switch-input:focus-visible + .vl-switch {
  box-shadow: 0 0 0 3px rgba(253, 185, 19, 0.35);
}

/* botões */
.vl-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--vl-amber) 0%, var(--vl-orange) 100%);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(247, 148, 30, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.vl-btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(247, 148, 30, 0.42);
  color: #fff;
}

.vl-btn-primary i {
  font-size: 13px;
}

.vl-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  margin-top: 14px;
  border-radius: 14px;
  background: #fff4d6;
  color: #9a6a00;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease;
}

.vl-btn-secondary:hover {
  background: #ffedbd;
  color: #7d5600;
  text-decoration: none;
}

.vl-tagline {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  text-align: center;
  font-size: 14px;
  color: #b58a2a;
  margin: 26px 0 6px 0;
}

.vl-panel-footer {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #bdb49f;
  margin: 0;
}

/* -------------------------- RESPONSIVO -------------------------- */

@media only screen and (max-width: 991px) {
  .vl-hero {
    display: none;
  }

  .vl-panel {
    flex: 1 1 auto;
    padding: 32px 24px;
  }
}