:root{
  --nf-bg: var(--ast-global-color-5);
  --nf-text: #111111;
  --nf-muted: #6b6b6b;
  --nf-border: #d0d0d0;

  --nf-primary: var(--ast-global-color-6);
  --nf-primary-hover: var(--ast-global-color-6);

  --nf-radius: 12px;
  --nf-card-w: 420px;
}

.nf-hidden{ display:none !important; }



.nf-auth-wnd {
  min-height: 60dvh;
  display: grid;
  place-items: center;
}


/* Full layout */
.nf-auth-layout{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--nf-bg);
  color: var(--nf-text);
}

/* Panels */
.nf-auth-panel{
 
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 48px 24px;
  box-sizing: border-box;
}

/*
.nf-auth-panel--form{
}
*/

.nf-auth-panel--art{
  padding: 0;
}

/* Card */
.nf-auth-card{
  width: 100%;
  max-width: var(--nf-card-w);
}

/* Typography */
.nf-title{
  margin: 0 0 10px;
  font-size: 34px;
  letter-spacing: 0.02em;
  color:var(--fig-blue-900);
}

.nf-subtitle{
  margin: 0 0 26px;
  color: var(--nf-muted);
  font-size: 15px;
}

/* Alerts */
.nf-alert{
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 14px;
  border: 1px solid rgba(0,0,0,.12);
}
.nf-alert--error{ border-color: rgba(239,75,75,.5); background: rgba(239,75,75,.08); }
.nf-alert--success{ border-color: rgba(0,150,90,.4); background: rgba(0,150,90,.08); }

/* Form */
.nf-form{ display: grid; gap: 16px; }
.nf-field{ display: grid; gap: 8px; }

.nf-label{
  font-size: 13px;
  font-weight: 700;
  color: var(--nf-text);
}

.nf-input{
  height: 44px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--nf-border);
  padding: 0 14px;
  box-sizing: border-box;
  outline: none;
  font-size: 14px;
  background: #fff;
}
.nf-input:focus{
  border-color: rgba(239,75,75,.7);
  box-shadow: 0 0 0 3px rgba(239,75,75,.15);
}

/* Row */
.nf-row{ display:flex; gap:12px; align-items:center; }
.nf-row--between{ justify-content: space-between; }

.nf-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  color: var(--nf-text);
}
.nf-check input{ transform: translateY(1px); }

/* Links */
.nf-link{
  color: var(--nf-text);
  text-decoration: none;
  font-size: 13px;
}
.nf-link:hover{ text-decoration: underline; }
.nf-link--accent{ color: var(--nf-primary); font-weight: 700; }

/* Buttons */
.nf-btn{
  height: 46px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-weight: 700;
  font-size: 14px;
  box-sizing: border-box;
}
.nf-btn--block{ width:100%; }

.nf-btn--primary{
  background: var(--nf-primary);
  color: #fff;
}
.nf-btn--primary:hover{ background: var(--nf-primary-hover); }

.nf-btn--ghost{
  background: transparent;
  border-color: rgba(0,0,0,.15);
  color: var(--nf-text);
}

/* Google (kept for later) */
.nf-btn--google{
  background: #fff;
  border-color: rgba(0,0,0,.15);
  color: var(--nf-text);
}
.nf-google-icon{
  width: 18px; height: 18px;
  border-radius: 50%;
  margin-right: 10px;
  background: conic-gradient(from 0deg, #4285F4 0 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
}

/* Footer text */
.nf-footnote{
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--nf-muted);
}

/* Illustration panel: CONSTANT */
.nf-art{
  position: sticky;     /* stays visible while scrolling (desktop) */
  top: 0;
  height: 55vh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.nf-art__img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* fills like your screenshot */
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* RESPONSIVE: stack panels */
@media (max-width: 980px){
  .nf-auth-layout{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .nf-auth-panel{
    min-height: auto;
  }

  .nf-auth-panel--art{
    order: -1;          /* show art on top on mobile */
    padding: 0;
  }

  .nf-art{
    position: relative; /* sticky not needed on mobile */
    height: 320px;      /* constant image block */
  }

  .nf-auth-panel--form{
    padding-top: 28px;
  }

  .nf-title{ font-size: 30px; }
}

@media (max-width: 420px){
  .nf-auth-panel--form{ padding: 22px 16px; }
  .nf-title{ font-size: 26px; }
  .nf-art{ height: 260px; }
}


.noosfera-auth-route--login {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.noosfera-auth-route--login > * {
  width: 100%;
  max-width: 750px;
}