/* ================================================================
   LOGIN + REGISTRO
   ================================================================ */

/* Header minimo en paginas de auth */
.pf-header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 var(--space-6);
  height:           64px;
  background:       var(--bg-surface);
  border-bottom:    1px solid var(--border-subtle);
  backdrop-filter:  blur(20px);
}

/* Card de autenticacion */
.pf-card-auth {
  width:     100%;
  max-width: 460px;
  padding:   var(--space-8) var(--space-8);
}

.pf-card-auth .pf-card-title {
  font-size:     var(--text-3xl);
  font-weight:   var(--weight-extrabold);
  margin-bottom: var(--space-6);
  text-align:    left;
}

.pf-card-auth .pf-label {
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
  color:         var(--text-secondary);
  margin-bottom: var(--space-2);
}

.pf-card-auth .pf-input {
  padding:   12px var(--space-4);
  font-size: var(--text-md);
}

.pf-card-auth .pf-btn-primary {
  padding:     14px;
  font-size:   var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  margin-top:  var(--space-2);
}

.pf-card-auth .pf-link-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  min-height:      44px;
  text-align:      center;
  margin-top:      var(--space-3);
  font-size:       var(--text-md);
  color:           var(--color-primary);
  padding:         var(--space-2) var(--space-4);
}

.pf-card-auth .pf-link-btn:hover { color: var(--color-hot); }

.pf-card-auth .pf-text-center {
  text-align:  center;
  margin-top:  var(--space-3);
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
}

#loginError,
#registerError,
#resetMsg {
  min-height:    24px;
  margin-top:    var(--space-3);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
  display:       block;
}

#loginError,
#registerError,
#resetMsg.pf-error {
  color:      #FC8585;
  background: rgba(239, 68, 68, 0.08);
}

#resetMsg.pf-success {
  color:      var(--color-success);
  background: rgba(16, 185, 129, 0.08);
}

/* Ocultar cuando vacio */
#loginError:empty,
#registerError:empty,
#resetMsg:empty { display: none; }

/* ── Transición entre vistas de auth ── */
.auth-view-hidden {
  display: none;
}

.auth-back-btn {
  display:      inline-flex;
  align-items:  center;
  gap:          var(--space-1);
  background:   none;
  border:       none;
  padding:      0;
  margin-bottom: var(--space-4);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-semibold);
  color:        var(--color-primary);
  cursor:       pointer;
  transition:   color 0.15s;
}
.auth-back-btn:hover { color: var(--color-hot); }

.auth-reset-desc {
  font-size:     var(--text-sm);
  color:         var(--text-secondary);
  margin-bottom: var(--space-5);
  line-height:   1.5;
}

#resetMsg:empty { display: none; }

/* ── Mobile: card pegado al top en vez de centrado ── */
@media (max-width: 1024px) {
  .pf-main-centered {
    align-items: flex-start;
    padding-top: var(--space-8);
  }
}

/* ── Toggle contraseña ── */
.input-password-wrapper {
  position: relative;
}

.input-password-wrapper .pf-input {
  padding-right: 2.8rem;
}

.btn-toggle-password {
  position:    absolute;
  right:       0.75rem;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  padding:     0;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  color:       var(--text-muted);
  transition:  color var(--transition-fast);
  line-height: 0;
}

.btn-toggle-password:hover { color: var(--color-primary); }